:root { --accent: #6c1cff; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1); } 50% { box-shadow: -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 }/* --------------------------- 1. GLOBAL COLORS & FONTS ----------------------------*/ body { background-color: #f5f5f5; /* light magazine background */ color: #111111; font-family: "Helvetica Neue", Arial, sans-serif; } /* site title – big, clean like Collectors Weekly */ .site-title, .logo, .site-branding a { font-family: "Georgia", "Times New Roman", serif; font-size: 40px; letter-spacing: 1px; font-weight: 700; text-transform: none; } /* links */ a { color: #111111; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* silver accent color you can reuse */ :root { --dt-silver: #c0c0c0; --dt-black: #000000; } /* --------------------------- 2. HEADER & TOP NAV BAR ----------------------------*/ .site-header, .header, #site-header { background-color: var(--dt-black); color: #ffffff; border-bottom: 1px solid #222222; } /* main navigation (desktop) */ .main-navigation, .navbar, .site-header .menu, .site-header nav { background-color: var(--dt-black); border-top: 1px solid #222222; border-bottom: 1px solid #222222; text-align: left; } /* menu items – simple text bar like Collectors Weekly */ .main-navigation a, .site-header .menu a, .navbar a { display: inline-block; padding: 14px 18px; color: #f5f5f5; font-size: 15px; letter-spacing: 0.5px; text-transform: none; /* keep words natural, not all caps */ } .main-navigation a:hover, .site-header .menu a:hover, .navbar a:hover, .main-navigation .current-menu-item > a, .site-header .current-menu-item > a { color: var(--dt-silver); text-decoration: underline; } /* --------------------------- 3. FEATURED GRID / LISTING CARDS (top 3-across stories like Collectors Weekly) ----------------------------*/ /* general listing card styling */ .listing-card, .lf-item, .elementor .listing-card { background-color: #111111; border-radius: 0; border: none; color: #f5f5f5; } /* remove heavy shadows */ .listing-card, .lf-item { box-shadow: none; } /* image on cards */ .listing-card img, .lf-item__thumbnail img { border-radius: 0; object-fit: cover; } /* title on cards */ .listing-card .title, .lf-item__title, .lf-item .case27-primary-text { font-family: "Georgia", serif; font-size: 20px; font-weight: 600; margin-top: 10px; } /* excerpt / short description */ .listing-card .excerpt, .lf-item__subtitle, .lf-item .case27-secondary-text { font-size: 14px; color: #dddddd; } /* category label – silver pill */ .lf-item .category, .lf-item__category, .listing-card .term-badge { display: inline-block; padding: 3px 8px; margin-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; background-color: rgba(255,255,255,0.06); color: var(--dt-silver); border-radius: 999px; } /* hover effect like a magazine card */ .listing-card:hover, .lf-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); transition: all 0.2s ease-out; } /* --------------------------- 4. “LATEST THRIFT TALES” GRID ----------------------------*/ /* section titles */ h2, .section-title, .elementor-widget-heading .elementor-heading-title { font-family: "Georgia", serif; font-weight: 600; letter-spacing: 0.5px; } /* lighten background behind listing grids */ .elementor-section.latest-thrift-tales, .elementor-section .latest-articles, .elementor-section[data-id*="latest"] { background-color: #f5f5f5; } /* cards in lower grids – white like CW, but keep silver accents */ .latest-thrift-tales .listing-card, .latest-thrift-tales .lf-item, .elementor-section[data-id*="latest"] .listing-card { background-color: #ffffff; color: #111111; } /* --------------------------- 5. CATEGORY BUTTON ROW (bottom strip) ----------------------------*/ .dt-category-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 12px 10px; background-color: #ffffff; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } .dt-category-strip a { flex: 0 0 auto; border: 1px solid #dddddd; border-radius: 999px; padding: 8px 16px; font-size: 13px; color: #333333; background-color: #ffffff; } .dt-category-strip a:hover { border-color: var(--dt-black); color: #000000; } /* you can wrap your menu of category icons in a div with class="dt-category-strip" in Elementor */ /* --------------------------- 6. FOOTER ----------------------------*/ .site-footer, footer { background-color: #f2f2f2; color: #444444; border-top: 1px solid #dddddd; font-size: 13px; } .site-footer a { color: #444444; } .site-footer a:hover { color: #000000; text-decoration: underline; }