/* ========================================================= LUXFLUX — Global Color Design System A scalable, centralized token architecture (Core / Neutral / Text / Border / Status / Button / Glassmorphism / Shadow / Gradient) in the spirit of Stripe, Vercel, and Shopify's design systems. Every color used anywhere in this stylesheet is a reference to a token defined here — there should be no hardcoded hex/rgb/rgba color outside this block (the 3 third-party marketplace brand colors — Amazon/Temu/AliExpress button colors — are the sole intentional exception; see BUTTON COLORS below). Light is the default theme. Dark mode activates two ways, matching how real products do it: automatically via the OS-level `prefers-color-scheme: dark` media query, or explicitly via the existing manual toggle (`data-theme="dark"`/`"light"` on , set by components.js), which always wins over the OS preference. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root{ /* ================================ CORE COLORS — warm champagne-gold luxury system A two-and-a-half-color palette: warm ivory (base), champagne gold (primary accent, doubling as the former "accent" CTA color so the whole site pulls from one gold family), deep charcoal (text). A muted bronze is used only as a slightly deeper gold tone for depth (badges/seals) — not a fourth brand color. ================================ */ --color-primary:#C9973F; /* champagne gold — links, primary UI accents (richer/more saturated for visibility) */ --color-primary-hover:#AD7E2E; --color-primary-light:#E0BD84; --color-primary-dark:#7A5E33; --color-secondary:#96703A; /* deeper bronze-gold — premium badges, verdict seals, secondary accents */ --color-secondary-hover:#7C5B2C; --color-accent:#C9973F; /* same champagne gold — used for CTA buttons (.btn-primary) */ /* ================================ NEUTRAL COLORS ================================ */ --color-background:#FAF6EE; /* warm ivory */ --color-surface:#F4EEE0; --color-surface-2:#EEE5D3; --color-card:#FFFDF8; --color-white:#FFFFFF; /* ================================ TEXT COLORS ================================ */ --text-primary:#2B2620; /* deep charcoal, warm-toned */ --text-secondary:#5C5346; --text-muted:#8A7F6B; --text-inverse:#FFFFFF; --text-link:#8C5C21; /* deep bronze-gold for accessible links/text on ivory (~5.3:1) — richer and darker than the button-fill gold so it visibly stands out against the warm ivory background instead of blending into it */ /* ================================ BORDER COLORS ================================ */ --border-light:#E9E0CC; --border-medium:#D9CBAE; --border-dark:#A6957A; /* ================================ STATUS COLORS (kept as muted, low-saturation functional colors so they read as "system" states rather than new brand hues) ================================ */ --success:#4B7A4E; --warning:#B8862E; --error:#A13D3D; --info:#6B7280; /* ================================ BUTTON COLORS ================================ */ --button-primary: var(--color-accent); /* champagne gold CTA — .btn-primary */ --button-primary-hover: var(--color-primary-hover); --button-secondary: var(--text-primary); /* charcoal secondary — .btn-secondary */ --button-secondary-hover:#423B30; /* Marketplace buttons (Amazon/Temu/AliExpress) intentionally use each network's own official brand color rather than a Luxflux token, for shopper trust/recognition — see .btn-amazon/.btn-temu/.btn-aliexpress. */ --button-amazon:#232F3E; --button-temu:#C24418; --button-temu-text:#FFFFFF; /* white text — darkened the brand orange slightly (still unmistakably "Temu orange") so white reaches 5.1:1 contrast; the original #FF6B35 only reached 2.8:1 with white text, failing WCAG AA */ --button-aliexpress:#DA2B03; /* ================================ GLASS MORPHISM translucent cream/ivory with a soft gold border, per brand direction ================================ */ --glass-bg: rgba(250,246,238,0.6); --glass-bg-hover: rgba(250,246,238,0.82); --glass-border: rgba(201,151,63,0.55); --glass-shadow: 0 8px 32px -8px rgba(43,38,32,0.18); --glass-blur: blur(20px); /* ================================ SHADOWS ================================ */ --shadow-sm: 0 1px 3px rgba(43,38,32,0.08); --shadow-md: 0 4px 16px rgba(43,38,32,0.10); --shadow-lg: 0 20px 60px -24px rgba(43,38,32,0.16); --shadow-xl: 0 30px 80px -24px rgba(201,151,63,0.22); /* ================================ GRADIENTS ================================ */ --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); --gradient-gold: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover)); --gradient-dark: linear-gradient(165deg,#1C1712,#241D16); --gradient-hero: linear-gradient(120deg, #FAF6EE 0%, #F4EADB 40%, #EFE1C4 75%, #E7D3A8 100%); --gradient-accent: linear-gradient(100deg, var(--color-accent) 0%, var(--color-accent) 55%, var(--button-primary-hover) 100%); /* ================================ EXTENSIONS (supplementary tokens the sections above don't cover, but the component library still needs — pale tints, glow/focus colors, scrim overlays, and the small set of non-color design tokens) */ --color-primary-pale:#F6EFDF; --color-accent-hover:#AD7E2E; --color-accent-light:#E0BD84; --color-accent-pale:#FBF3E1; --color-accent-text:#7A511F; /* deep, highly-visible gold for label/meta text (~6.4:1 on ivory) */ --text-on-gold:#2B2620; /* fixed charcoal — gold background never changes with theme (~8:1) */ --text-on-accent:#2B2620; /* fixed charcoal — gold CTA background never changes with theme (~8:1) */ --focus-ring-color: rgba(201,151,63,0.55); --focus-ring: 0 0 0 3px var(--focus-ring-color); --overlay: rgba(43,38,32,0.5); --glass-border-strong: rgba(201,151,63,0.75); --glass-blur-lg: blur(24px); --glass-highlight: rgba(255,255,255,0.7); --shadow-glow-accent: 0 10px 34px -6px rgba(201,151,63,0.5); --shadow-glow-primary: 0 10px 34px -6px rgba(201,151,63,0.5); --font-display:'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono:'JetBrains Mono', 'Courier New', monospace; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --ease-premium: cubic-bezier(.22,.85,.32,1); --dur-fast: 200ms; --dur-med: 300ms; --container: 1240px; color-scheme: light; } /* --------------------------------------------------------- DARK MODE — automatic (OS-level) + manual toggle Same token names, dark-appropriate values. `:not([data-theme="light"])` lets the OS preference apply automatically while still letting an explicit manual "light" choice win over it. The manual `[data-theme= "dark"]` rule below repeats the same values so the toggle works regardless of OS preference. Component CSS never changes — only these token values do. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --color-background:#1C1712; --color-surface:#14100C; --color-surface-2:#241D16; --color-card:#221B14; --border-light: rgba(255,255,255,0.08); --border-medium: rgba(255,255,255,0.16); --border-dark: rgba(255,255,255,0.30); --text-primary:#F5EFE4; --text-secondary:#D9CEB8; --text-muted:#A99C82; --text-link:#D9B76C; --color-primary:#D9B76C; --color-primary-hover:#C6A15B; --color-accent:#D9B76C; --color-accent-hover:#C6A15B; --color-secondary:#C6A15B; --color-secondary-hover:#A6813F; --color-accent-text:#D9B76C; --success:#7FB585; --error:#E08585; --overlay: rgba(10,8,6,0.72); --glass-bg: rgba(34,27,20,0.55); --glass-bg-hover: rgba(34,27,20,0.8); --glass-border: rgba(224,189,102,0.4); --glass-border-strong: rgba(224,189,102,0.65); --glass-shadow: 0 8px 32px -8px rgba(0,0,0,0.45); --glass-highlight: rgba(255,255,255,0.06); --gradient-dark: linear-gradient(165deg,#1C1712,#221B14); --gradient-hero: linear-gradient(120deg, #1C1712 0%, #241D16 35%, #2B2016 70%, #3A2A14 100%); color-scheme: dark; } } [data-theme="dark"]{ --color-background:#1C1712; --color-surface:#14100C; --color-surface-2:#241D16; --color-card:#221B14; --border-light: rgba(255,255,255,0.08); --border-medium: rgba(255,255,255,0.16); --border-dark: rgba(255,255,255,0.30); --text-primary:#F5EFE4; --text-secondary:#D9CEB8; --text-muted:#A99C82; --text-link:#D9B76C; --color-primary:#D9B76C; --color-primary-hover:#C6A15B; --color-accent:#D9B76C; --color-accent-hover:#C6A15B; --color-secondary:#C6A15B; --color-secondary-hover:#A6813F; --color-accent-text:#D9B76C; --success:#7FB585; --error:#E08585; --overlay: rgba(10,8,6,0.72); --glass-bg: rgba(34,27,20,0.55); --glass-bg-hover: rgba(34,27,20,0.8); --glass-border: rgba(224,189,102,0.4); --glass-border-strong: rgba(224,189,102,0.65); --glass-shadow: 0 8px 32px -8px rgba(0,0,0,0.45); --glass-highlight: rgba(255,255,255,0.06); --gradient-dark: linear-gradient(165deg,#1C1712,#221B14); --gradient-hero: linear-gradient(120deg, #1C1712 0%, #241D16 35%, #2B2016 70%, #3A2A14 100%); color-scheme: dark; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x:clip; width:100%; } body{ margin:0; background:var(--color-background); color:var(--text-primary); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition: background .35s ease, color .35s ease; overflow-x:clip; width:100%; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } input,select{ font-family:inherit; } /* Header is sticky and (with the search bar row) taller than a single line -- anchor jumps like nav's "Deals" / "Reviews" links need scroll-margin-top or their target would land underneath it once the header has stuck to the top of the viewport. */ [id]{ scroll-margin-top:140px; } .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0 0 .5em; line-height:1.15; color:var(--text-primary); letter-spacing:-0.01em; } h1{ font-size:clamp(2.4rem,5vw,4.2rem); } h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); } h3{ font-size:1.4rem; } p{ margin:0 0 1em; color:var(--text-secondary); } .eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--color-accent-text); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:22px; height:1px; background:var(--color-accent); display:inline-block; } .section{ padding:88px 0; border-bottom:1px solid var(--border-light); } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; flex-wrap:wrap; } .section-head h2{ margin:8px 0 0; } .view-all{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; color:var(--color-accent-text); border-bottom:1px solid var(--border-medium); padding-bottom:2px; white-space:nowrap; } /* ---------- Skip link / a11y ---------- */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--color-accent); color:var(--text-on-accent); font-weight:700; padding:10px 16px; z-index:9999; } .skip-link:focus{ left:16px; top:16px; } :focus-visible{ outline:2px solid var(--color-accent-hover); outline-offset:3px; border-radius:4px; box-shadow:var(--focus-ring); } /* ---------- Reading progress bar ---------- */ .reading-progress{ position:fixed; top:0; left:0; height:3px; background:var(--text-link); width:0%; z-index:1100; transition:width .1s linear; } /* ========================================================= HEADER / NAV Full-width flat Glassmorphism header, attached to the top of the viewport (not floating) -- two stacked rows that scroll together as one sticky unit: 1. Top row: brand, primary nav, icon actions (64-72px) 2. Search row: persistent full-width pill search bar Only the glass surface itself (blur / background opacity / shadow) reacts to scroll, toggled via .scrolled after 8px (see components.js updateScrollUi). All values route through the existing --glass-* / --shadow-* brand tokens so light/dark themes stay correct automatically -- no colors introduced outside the existing Luxflux palette. ========================================================= */ .site-header{ position:-webkit-sticky; position:sticky; top:0; z-index:1000; width:100%; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border); box-shadow:var(--shadow-lg); transition:background 250ms var(--ease-premium), backdrop-filter 250ms var(--ease-premium), border-color 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium); will-change:background, box-shadow; } .site-header.scrolled{ background:var(--glass-bg-hover); backdrop-filter:var(--glass-blur-lg); -webkit-backdrop-filter:var(--glass-blur-lg); border-color:var(--glass-border-strong); box-shadow:var(--shadow-xl); } .header-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; padding:0 22px; max-width:var(--container); margin:0 auto; } .brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--text-primary); flex-shrink:0; white-space:nowrap; transition:color 250ms var(--ease-premium); } .brand:hover{ color:var(--text-link); } .brand img{ height:30px; width:30px; flex-shrink:0; } .main-nav{ display:flex; align-items:center; gap:26px; } .main-nav a{ font-size:.86rem; letter-spacing:.02em; color:var(--text-secondary); position:relative; padding:8px 2px; transition:color 250ms var(--ease-premium); border-radius:6px; } .main-nav a:hover{ color:var(--text-link); } .main-nav a.active{ color:var(--color-accent-text); } .main-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform 250ms var(--ease-premium); } .main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); } .main-nav a.nav-dropdown-trigger::after{ display:none; } /* ---------- Categories dropdown (desktop: hover flyout, mobile: accordion) ---------- */ .nav-dropdown{ position:relative; } .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; } .nav-dropdown-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,6px); background:var(--glass-bg-hover); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-strong); border-radius:var(--radius-md); min-width:210px; padding:10px; opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), visibility var(--dur-fast); box-shadow:var(--shadow-lg), var(--shadow-glow-accent); z-index:10; } .nav-dropdown-panel::before{ content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:var(--glass-bg-hover); border-left:1px solid var(--glass-border-strong); border-top:1px solid var(--glass-border-strong); border-radius:2px 0 0 0; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{ opacity:1; visibility:visible; transform:translate(-50%,0); } .nav-dropdown-inner{ display:flex; flex-direction:column; gap:2px; } .nav-dropdown-panel a{ display:block; padding:10px 12px; border-radius:8px; font-size:.85rem; color:var(--text-secondary); transition:background .15s ease, color .15s ease; } .nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible{ background:rgba(201,151,63,0.14); color:var(--text-link); } .header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .icon-btn{ width:38px; height:38px; min-width:38px; border-radius:50%; border:1px solid var(--glass-border); background:transparent; color:var(--text-primary); display:flex; align-items:center; justify-content:center; transition:border-color 250ms var(--ease-premium), background 250ms var(--ease-premium), transform 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium); flex-shrink:0; } .icon-btn:hover{ border-color:var(--color-accent); background:rgba(150,112,58,0.1); transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(201,151,63,0.45); } .icon-btn:active{ transform:translateY(0) scale(.94); } .icon-btn svg{ width:15px; height:15px; } .menu-toggle{ display:none; } .menu-close{ display:none; } .nav-backdrop{ display:none; } .dd-caret{ display:inline-block; transition:transform var(--dur-fast) var(--ease-premium); font-size:.8em; } .nav-dropdown.open .dd-caret, .nav-dropdown:focus-within .dd-caret, .nav-dropdown:hover .dd-caret{ transform:rotate(180deg); } /* ---------- Persistent search bar row (AliExpress-style, always visible) ---------- */ .header-searchbar-row{ padding:0 22px 14px; max-width:var(--container); margin:0 auto; } .header-searchbar{ position:relative; display:flex; align-items:center; height:48px; background:var(--glass-bg-hover); border:1px solid var(--glass-border); border-radius:999px; padding-left:20px; transition:border-color 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium); } .header-searchbar:focus-within{ border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(201,151,63,0.16); } .header-searchbar input{ flex:1; height:100%; background:transparent; border:none; outline:none; font-family:var(--font-body); font-size:.92rem; color:var(--text-primary); min-width:0; } .header-searchbar input::placeholder{ color:var(--text-muted); } .header-searchbar-btn{ flex-shrink:0; width:38px; height:38px; margin-right:1px; border-radius:50%; cursor:pointer; background:var(--color-primary-pale); border:1px solid var(--glass-border); color:var(--color-accent-text); display:flex; align-items:center; justify-content:center; transition:transform 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium), background 250ms var(--ease-premium), border-color 250ms var(--ease-premium); } .header-searchbar-btn:hover{ background:var(--color-accent-pale); border-color:var(--color-accent); transform:scale(1.06); box-shadow:0 6px 16px -6px rgba(201,151,63,0.35); } .header-searchbar-btn:active{ transform:scale(.94); } .header-searchbar-btn svg{ width:15px; height:15px; } /* Dark mode keeps the richer gold-gradient treatment the button always had -- it already reads correctly against the dark surface, so only light mode (above) was softened to sit naturally on the warm-ivory background. */ [data-theme="dark"] .header-searchbar-btn{ background:var(--gradient-accent); border-color:transparent; color:var(--text-on-accent); } [data-theme="dark"] .header-searchbar-btn:hover{ box-shadow:0 6px 16px -6px rgba(201,151,63,0.55); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .header-searchbar-btn{ background:var(--gradient-accent); border-color:transparent; color:var(--text-on-accent); } :root:not([data-theme="light"]) .header-searchbar-btn:hover{ box-shadow:0 6px 16px -6px rgba(201,151,63,0.55); } } .header-searchbar-results{ position:absolute; top:calc(100% + 10px); left:0; right:0; background:var(--glass-bg-hover); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg), var(--shadow-glow-accent); max-height:60vh; overflow-y:auto; padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), visibility var(--dur-fast); z-index:20; } .header-searchbar-results.open{ opacity:1; visibility:visible; transform:translateY(0); } /* ---------- Search overlay ---------- */ .search-overlay{ position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(6px); z-index:1200; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; opacity:0; visibility:hidden; transition:opacity .25s ease; } .search-overlay.open{ opacity:1; visibility:visible; } .search-box{ width:min(640px,92vw); background:var(--glass-bg-hover); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-strong); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-lg), var(--shadow-glow-accent); } .search-box input{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--border-medium); color:var(--text-primary); font-family:var(--font-display); font-weight:700; font-size:1.5rem; padding:10px 4px; outline:none; } .search-results{ margin-top:16px; max-height:50vh; overflow-y:auto; } .search-result-item{ display:flex; gap:14px; padding:12px 6px; border-radius:10px; align-items:center; } .search-result-item:hover{ background:rgba(150,112,58,0.1); } .search-result-item img{ width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; } .search-result-meta{ font-family:var(--font-mono); font-size:.7rem; color:var(--color-accent-text); text-transform:uppercase; letter-spacing:.06em; } .search-empty{ color:var(--text-muted); padding:20px 6px; font-size:.9rem; } .search-close{ position:absolute; top:22px; right:26px; } /* ========================================================= BUTTONS ========================================================= */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:13px 26px; border-radius:999px; font-size:.86rem; font-weight:700; letter-spacing:.02em; border:1px solid transparent; transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) ease, background var(--dur-med) ease, opacity var(--dur-med) ease; } .btn:active{ transform:scale(.97); } .btn:focus-visible{ box-shadow:var(--focus-ring); } .btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; } .btn.is-loading{ color:transparent; pointer-events:none; } .btn.is-loading::after{ content:''; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:currentColor; color:var(--text-inverse); animation:btn-spin .7s linear infinite; } @keyframes btn-spin{ to{ transform:rotate(360deg); } } /* Primary/CTA — champagne gold gradient (brand accent). Text is dark charcoal, not white: white-on-gold only reaches ~2:1 contrast (fails WCAG AA), while charcoal-on-gold reaches ~8:1 (passes comfortably). Lift + glow on hover, ripple-on-click is wired in main.js (.ripple). */ .btn-primary{ background:#FF6A00; color:#ffffff; border:none; border-radius:6px; font-size:16px; font-weight:700; padding:10px 12px; min-height:auto; text-shadow:none; box-shadow:0 10px 24px -8px rgba(255,106,0,0.45); } .btn-primary:hover{ background:#E65F00; box-shadow:0 16px 32px -10px rgba(255,106,0,0.55); transform:translateY(-2px); } /* Secondary — solid deep charcoal, white text (~13:1, passes AA). */ .btn-secondary{ background:linear-gradient(100deg, var(--button-secondary), var(--button-secondary-hover)); color:var(--text-inverse); box-shadow:0 10px 30px -8px rgba(43,38,32,0.35), 0 0 0 1px rgba(43,38,32,0.15) inset; } .btn-secondary:hover{ box-shadow:0 16px 40px -10px rgba(43,38,32,0.45), 0 0 0 1px rgba(43,38,32,0.3) inset; transform:translateY(-2px); } .btn-outline{ border-color:var(--glass-border-strong); color:var(--text-primary); background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); } .btn-outline:hover{ border-color:var(--color-primary); color:var(--text-link); transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(201,151,63,0.3); } .btn-block{ width:100%; } .btn-sm{ min-height:38px; padding:9px 18px; font-size:.78rem; } .btn-amazon{ background:#FFD814; color:#111111; border:1px solid #FCD200; border-radius:4px; font-weight:700; padding:10px 20px; min-height:auto; } .btn-temu{ background:#FF6A00; color:#ffffff; border:none; border-radius:6px; font-size:16px; font-weight:700; padding:10px 12px; min-height:auto; } .btn-aliexpress{ background:#FF6A00; color:#ffffff; border:none; border-radius:6px; font-size:16px; font-weight:700; padding:10px 12px; min-height:auto; } .btn-amazon:hover,.btn-temu:hover,.btn-aliexpress:hover{ transform:translateY(-2px); filter:brightness(1.1); } /* Ripple (click feedback) — spans are injected on pointerdown in main.js */ .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.5); transform:scale(0); animation:ripple .6s ease-out; pointer-events:none; } @keyframes ripple{ to{ transform:scale(3); opacity:0; } } /* ========================================================= HERO Now three fully independent, stacked sections rather than one merged block, each with its own container and breathing room: 1. .hero-slideshow-section — the rotating product spotlight (top) 2. .hero-text-section — eyebrow / heading / copy / CTAs / stats 3. .hero-product-section — "This Week's Verdict" product banner ========================================================= */ /* ---- 1. Hero slideshow section (contained premium card) ---- */ .hero-slideshow-section{ position:relative; padding:48px 0 0; overflow:hidden; background: radial-gradient(ellipse at 82% 6%, rgba(150,112,58,0.14), transparent 50%), radial-gradient(ellipse at 14% 90%, rgba(201,151,63,0.16), transparent 55%); } .hero-slideshow{ position:relative; height:480px; border-radius:20px; overflow:hidden; border:1px solid var(--glass-border-strong); box-shadow:var(--shadow-xl), var(--shadow-glow-accent); background:var(--color-surface-2); } @media (min-width:1240px){ .hero-slideshow{ height:520px; } } /* ---- 2. Hero text section (eyebrow / heading / description / CTA / stats) ---- */ .hero-text-section{ position:relative; padding:56px 0 64px; overflow:hidden; background: radial-gradient(ellipse at 60% 0%, rgba(201,151,63,0.12), transparent 60%); } .hero-copy{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; } .hero-copy .eyebrow{ margin-bottom:18px; justify-content:center; } .hero-copy h1{ color:var(--text-primary); } .hero-copy p.lead{ font-size:1.1rem; color:var(--text-secondary); max-width:560px; margin:0 auto; } .hero-cta-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; justify-content:center; } .hero-stats{ display:flex; gap:36px; margin-top:44px; justify-content:center; } .hero-stat b{ display:block; font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--text-link); } .hero-stat span{ font-size:.76rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; } /* Bold-orange CTA buttons — scoped to the hero text section only, so the shared .btn-primary elsewhere (e.g. newsletter Subscribe) is unaffected. Matches spec: bold orange fill, 6px radius, white text, 16px/700 weight, 10px 12px padding. */ .hero-cta-row .btn{ background:#FF6A00; color:#ffffff; border:none; border-radius:6px; font-size:16px; font-weight:700; letter-spacing:normal; padding:10px 12px; min-height:auto; text-shadow:none; box-shadow:0 10px 24px -8px rgba(255,106,0,0.45); } .hero-cta-row .btn:hover{ background:#E65F00; box-shadow:0 16px 32px -10px rgba(255,106,0,0.55); transform:translateY(-2px); } /* ---- 3. Hero product section ("This Week's Verdict" spotlight card) ---- */ .hero-product-section{ position:relative; padding:0 0 72px; overflow:hidden; background: radial-gradient(ellipse at 14% 90%, rgba(201,151,63,0.16), transparent 55%); } .hero-product-section .hero-banner{ max-width:480px; margin:0 auto; } .hero-slide{ position:absolute; inset:0; opacity:0; overflow:hidden; transition:opacity 1.4s ease-in-out; will-change:opacity; pointer-events:none; } .hero-slide.active{ opacity:1; pointer-events:auto; } .hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1); will-change:transform; } /* Slow Ken Burns: gentle zoom + pan, only while a slide is active so it restarts fresh (scale(1)) each time a slide cycles back into view. Alternate pan direction per slide for variety. GPU-accelerated (transform only, no layout/paint-triggering properties). Timed to the 6.5s/slide cadence in main.js with a touch of overrun so the motion never visibly settles/stalls before the crossfade begins. */ .hero-slide.active img{ animation:heroKenBurnsA 7s ease-out forwards; } .hero-slide.active:nth-child(even) img{ animation-name:heroKenBurnsB; } @keyframes heroKenBurnsA{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(-2.5%,-1.5%); } } @keyframes heroKenBurnsB{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(2.5%,1.5%); } } @media (prefers-reduced-motion: reduce){ /* Keep the crossfade (it's just an opacity transition, not motion in the vestibular-trigger sense) but drop the zoom/pan entirely. */ .hero-slide.active img{ animation:none; transform:scale(1); } } /* Bottom scrim + per-slide info/CTA -- own gradient only at the base of the slide, so most of the photo stays clean while the button/label stay legible over any image. */ .hero-slide-scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 45%, rgba(20,15,8,0.72) 100%); } .hero-slide-info{ position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:20px 24px; pointer-events:none; } .hero-slide.active .hero-slide-info > *{ pointer-events:auto; } .hero-slide-eyebrow{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.75); display:block; margin-bottom:6px; } .hero-slide-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,0.35); max-width:60ch; } .hero-slide-btn{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:#FF6A00; color:#ffffff; font-family:var(--font-body); font-size:16px; font-weight:700; line-height:1; padding:10px 12px; border-radius:6px; white-space:nowrap; cursor:pointer; box-shadow:0 10px 24px -8px rgba(255,106,0,0.5); transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) ease, filter var(--dur-med) ease; } .hero-slide-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(255,106,0,0.6); background:#E65F00; } .hero-slide-btn:focus-visible{ box-shadow:var(--focus-ring); } .hero-slide-dots{ position:absolute; top:18px; right:18px; z-index:2; display:flex; gap:7px; } .hero-slide-dot{ width:8px; height:8px; border-radius:50%; padding:0; border:1.5px solid rgba(255,255,255,0.75); background:rgba(255,255,255,0.25); cursor:pointer; transition:background var(--dur-fast) ease, transform var(--dur-fast) ease; } .hero-slide-dot:hover{ transform:scale(1.15); } .hero-slide-dot.active{ background:#fff; } @media (prefers-reduced-motion: reduce){ .hero-slide-dot{ transition:none; } } /* ---- Hero banner: the editor's-pick spotlight, its own separate card ---- */ .hero-banner{ position:relative; display:flex; flex-direction:column; } .hero-banner-label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-text); margin-bottom:14px; display:inline-flex; align-items:center; gap:8px; } .hero-banner-inner{ position:relative; flex:1; margin-top:22px; } /* Floating glass accents — decorative only (aria-hidden), pure CSS transform animation, no images/JS. Slow (7-9s) and low-amplitude so it reads as "premium ambient motion" rather than a distraction. */ .hero-float{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); } .hero-float-1{ width:120px; height:120px; top:-10px; left:-30px; animation:hero-float-a 8s ease-in-out infinite; } .hero-float-2{ width:70px; height:70px; bottom:10%; left:-20px; background:var(--color-accent-pale); animation:hero-float-b 7s ease-in-out infinite; } .hero-float-3{ width:46px; height:46px; bottom:-14px; right:18%; background:var(--color-primary-pale); animation:hero-float-a 9s ease-in-out infinite reverse; } @keyframes hero-float-a{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-14px) translateX(6px); } } @keyframes hero-float-b{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(12px); } } @media (prefers-reduced-motion: reduce){ .hero-float{ animation:none; } } .seal{ position:absolute; top:-26px; right:-6px; width:92px; height:92px; border-radius:50%; background:radial-gradient(circle at 32% 26%, #FBEBC8 0%, #EFCB86 22%, #D9B76C 46%, #C9973F 72%, #A9793A 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-on-gold); box-shadow:0 14px 34px -10px rgba(150,112,58,0.55), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -6px 10px rgba(122,94,51,0.35); z-index:3; border:3px solid var(--color-background); } .seal b{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1; } .seal span{ font-family:var(--font-mono); font-size:.55rem; letter-spacing:.08em; } .hero-card{ position:relative; z-index:1; height:100%; background:linear-gradient(160deg, var(--glass-bg-hover), rgba(255,255,255,0.85)); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-strong); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-xl), var(--shadow-glow-accent); display:flex; flex-direction:column; } .hero-card img{ width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform var(--dur-med) var(--ease-premium); } .hero-card:hover img{ transform:scale(1.04); } .hero-card-body{ padding:22px; } /* ========================================================= PRODUCT CARD ========================================================= */ .product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .product-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .product-grid.cols-2{ grid-template-columns:repeat(2,1fr); } .product-card{ position:relative; background:linear-gradient(165deg, var(--color-surface-2), var(--color-card)); border:1px solid var(--glass-border); border-radius:var(--radius-md); box-shadow:0 1px 0 var(--glass-highlight) inset; overflow:hidden; transition:transform var(--dur-med) var(--ease-premium), border-color .3s ease, box-shadow .35s ease; display:flex; flex-direction:column; } .product-card:hover{ transform:translateY(-6px); border-color:var(--glass-border-strong); box-shadow:0 1px 0 var(--glass-highlight) inset, var(--shadow-lg), var(--shadow-glow-accent); } .product-card-media{ position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--color-surface-2); } .product-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .product-card:hover .product-card-media img{ transform:scale(1.08); } .card-badge{ position:absolute; top:12px; left:12px; background:rgba(10,10,13,0.7); backdrop-filter:blur(6px); border:1px solid var(--border-medium); color:var(--color-accent); font-family:var(--font-mono); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; } .card-store{ position:absolute; top:12px; right:12px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em; padding:5px 9px; border-radius:6px; text-transform:uppercase; color:var(--text-inverse); } .store-amazon{ background:var(--button-amazon); } .store-temu{ background:var(--button-temu); color:var(--text-inverse); } .store-aliexpress{ background:var(--button-aliexpress); } .product-card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .product-card-body h3{ font-size:1.08rem; font-family:var(--font-display); font-weight:700; margin:0; position:relative; } .product-card-body h3 a::after{ content:''; position:absolute; inset:0; } .product-card-desc{ font-size:.84rem; color:var(--text-muted); margin:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .rating-row{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--color-accent-text); } .rating-row .stars{ letter-spacing:1px; } .rating-row .count{ color:var(--text-muted); font-size:.72rem; } .price-row{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:8px; } .price-now{ font-family:var(--font-mono); font-size:1.2rem; color:var(--text-primary); } .price-was{ font-family:var(--font-mono); font-size:.85rem; color:var(--text-muted); text-decoration:line-through; } .price-off{ font-family:var(--font-mono); font-size:.72rem; color:var(--success); } .card-cta{ margin-top:10px; } /* ========================================================= CAROUSEL ========================================================= */ .carousel-wrap{ position:relative; } .carousel-track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; } .carousel-track::-webkit-scrollbar{ display:none; } .carousel-track > *{ scroll-snap-align:start; flex:0 0 280px; } .carousel-nav{ display:flex; gap:10px; position:absolute; right:0; top:-64px; } /* ========================================================= FILTER BAR ========================================================= */ .filter-bar{ display:flex; flex-wrap:wrap; gap:12px; padding:20px; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-md); margin-bottom:32px; } .filter-group{ display:flex; flex-direction:column; gap:6px; } .filter-group label{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .filter-group select, .filter-group input{ background:var(--color-surface-2); border:1px solid var(--border-light); color:var(--text-primary); padding:9px 12px; border-radius:8px; font-size:.85rem; min-width:150px; min-height:44px; transition:border-color .2s ease, box-shadow .2s ease; } .filter-group select:focus-visible, .filter-group input:focus-visible{ border-color:var(--color-accent); box-shadow:var(--focus-ring); outline:none; } .filter-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; } .chip{ padding:8px 14px; min-height:38px; border-radius:999px; border:1px solid var(--border-light); font-size:.78rem; color:var(--text-secondary); transition:all .2s ease; background:transparent; } .chip.active, .chip:hover{ border-color:var(--text-link); color:var(--text-link); background:rgba(201,151,63,0.14); } /* ========================================================= BLOG / ARTICLE ========================================================= */ .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; grid-auto-rows:1fr; } .blog-card{ background:linear-gradient(165deg, var(--color-surface-2), var(--color-card)); border:1px solid var(--glass-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 1px 0 var(--glass-highlight) inset; transition:transform var(--dur-med) var(--ease-premium), border-color .3s ease, box-shadow .3s ease; min-width:0; /* grid items default to min-width:auto, which can refuse to shrink below intrinsic content size (e.g. a large source photo) and force horizontal scroll at narrow widths; min-width:0 lets the card shrink to its grid track like a normal block element. */ } .blog-card:hover{ transform:translateY(-5px); border-color:var(--glass-border-strong); box-shadow:0 1px 0 var(--glass-highlight) inset, var(--shadow-lg); } .blog-card-media{ display:block; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:inherit; position:relative; background:var(--color-surface-2); } .blog-card-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s ease; } /* Fallback for browsers/WebViews that don't support the CSS `aspect-ratio` property (older Android WebView / iOS Safari <15): without it, .blog-card-media would collapse to auto height and every card would take its own image's native height -- exactly the "inconsistent card height / distorted image" symptom this rule prevents. The classic padding-top percentage hack (62.5% = 10/16) reserves the same 16:10 box in 100% of browsers, with the image absolutely positioned to fill it edge-to-edge. Modern browsers that DO support aspect-ratio never run this block. */ @supports not (aspect-ratio: 1 / 1){ .blog-card-media{ height:0; padding-top:62.5%; } .blog-card-media img{ position:absolute; inset:0; } } .blog-card:hover .blog-card-media img{ transform:scale(1.06); } .blog-card-body{ padding:20px; } .blog-meta{ font-family:var(--font-mono); font-size:.68rem; color:var(--color-accent-text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:flex; gap:10px; } .blog-card h3{ font-size:1.15rem; margin-bottom:8px; position:relative; } .blog-card h3 a::after{ content:''; position:absolute; inset:0; } .blog-card p{ font-size:.87rem; } .article-header{ padding:60px 0 30px; text-align:center; } .article-header .eyebrow{ justify-content:center; } .article-meta-row{ display:flex; justify-content:center; gap:20px; margin-top:20px; font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); flex-wrap:wrap; } .article-hero-img{ border-radius:var(--radius-lg); overflow:hidden; margin:30px auto; max-width:960px; border:1px solid var(--border-light); aspect-ratio:16/9; background:var(--color-surface-2); } .article-hero-img img{ width:100%; height:100%; object-fit:cover; } .article-layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:flex-start; } .toc{ position:sticky; top:110px; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:20px; } .toc h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-accent-text); font-family:var(--font-mono); font-weight:500; margin-bottom:12px; } .toc a{ display:block; font-size:.82rem; color:var(--text-secondary); padding:6px 0; border-left:2px solid var(--border-light); padding-left:12px; transition:color .2s ease, border-color .2s ease; } .toc a:hover{ color:var(--text-link); border-color:var(--text-link); } .toc a.active{ color:var(--color-accent-text); border-color:var(--color-accent); } .article-body{ max-width:760px; font-size:1.02rem; } .article-body h2{ margin-top:2em; } .article-body h3{ margin-top:1.6em; } .article-body ul, .article-body ol{ margin:0 0 1.2em; padding-left:1.4em; color:var(--text-secondary); } .article-body li{ margin-bottom:.5em; list-style:disc; } .article-body ol li{ list-style:decimal; } .article-body p{ color:var(--text-secondary); } .article-body strong{ color:var(--text-primary); } .share-row{ display:flex; gap:10px; margin:32px 0; } .share-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border-light); display:flex; align-items:center; justify-content:center; transition:all .2s ease; } .share-btn:hover{ border-color:var(--text-link); color:var(--text-link); transform:translateY(-2px); box-shadow:0 6px 16px -8px rgba(201,151,63,0.5); } .faq-item{ border-bottom:1px solid var(--border-light); padding:18px 0; } .faq-question{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text-primary); background:transparent; border:none; width:100%; text-align:left; } .faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s ease; color:var(--text-secondary); font-size:.92rem; } .faq-item.open .faq-answer{ max-height:300px; margin-top:12px; } .faq-item.open .faq-icon{ transform:rotate(45deg); } .faq-icon{ transition:transform .25s ease; color:var(--color-accent-text); font-size:1.3rem; } .prev-next{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; } .prev-next a{ background:linear-gradient(165deg, var(--color-surface-2), var(--color-card)); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:20px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; display:block; } .prev-next a:hover{ border-color:var(--text-link); transform:translateY(-3px); box-shadow:var(--shadow-glow-primary); } .prev-next .dir{ font-family:var(--font-mono); font-size:.68rem; color:var(--color-accent-text); text-transform:uppercase; letter-spacing:.06em; } /* ========================================================= REVIEW PAGE ========================================================= */ .review-hero{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; padding:50px 0; } .gallery-main{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); aspect-ratio:1/1; background:var(--color-surface-2); } .gallery-main img{ width:100%; height:100%; object-fit:cover; } .gallery-thumbs{ display:flex; gap:10px; margin-top:12px; } .gallery-thumbs img{ width:70px; height:70px; object-fit:cover; border-radius:8px; border:1px solid var(--border-light); cursor:pointer; opacity:.6; transition:opacity .2s ease, border-color .2s ease; } .gallery-thumbs img.active, .gallery-thumbs img:hover{ opacity:1; border-color:var(--color-accent); } .verdict-seal-lg{ width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 32% 26%, #FBEBC8 0%, #EFCB86 22%, #D9B76C 46%, #C9973F 72%, #A9793A 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-on-gold); box-shadow:0 14px 34px -10px rgba(150,112,58,0.55), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -6px 10px rgba(122,94,51,0.35); border:4px solid var(--color-background); flex-shrink:0; } .verdict-seal-lg b{ font-family:var(--font-display); font-weight:800; font-size:2.2rem; line-height:1; } .verdict-seal-lg span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; } .review-title-row{ display:flex; gap:24px; align-items:center; margin-bottom:18px; } .affiliate-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; } .scorebar-group{ display:grid; gap:14px; margin:26px 0; } .scorebar{ display:grid; grid-template-columns:130px 1fr 40px; align-items:center; gap:12px; font-size:.85rem; } .scorebar-track{ height:6px; background:var(--color-surface-2); border-radius:99px; overflow:hidden; } .scorebar-fill{ height:100%; background:var(--text-link); border-radius:99px; } .pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:36px 0; } .pros-cons > div{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:24px; } .pros-cons h4{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; } .pros-cons ul li{ padding-left:22px; position:relative; margin-bottom:10px; font-size:.9rem; color:var(--text-secondary); } .pros h4{ color:var(--success); } .pros li::before{ content:'✓'; position:absolute; left:0; color:var(--success); } .cons h4{ color:var(--error); } .cons li::before{ content:'✕'; position:absolute; left:0; color:var(--error); } .spec-table{ width:100%; border-collapse:collapse; margin:20px 0; } .spec-table tr{ border-bottom:1px solid var(--border-light); } .spec-table td{ padding:12px 4px; font-size:.88rem; } .spec-table td:first-child{ color:var(--text-muted); font-family:var(--font-mono); font-size:.8rem; width:40%; } .verdict-box{ background:var(--glass-bg-hover); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-strong); border-radius:var(--radius-lg); padding:32px; margin:36px 0; position:relative; box-shadow:var(--shadow-glow-accent); } .verdict-box::before{ content:'"'; font-family:var(--font-display); font-size:5rem; color:var(--color-primary-hover); position:absolute; top:-6px; left:20px; opacity:.4; } .who-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; } .who-grid > div{ padding:20px; border-radius:var(--radius-md); border:1px solid var(--glass-border); background:var(--glass-bg); } /* ========================================================= COMPARISON TABLE ========================================================= */ .compare-table-wrap{ overflow-x:auto; margin:30px 0; } .compare-table{ width:100%; border-collapse:collapse; min-width:640px; } .compare-table th, .compare-table td{ padding:16px; border-bottom:1px solid var(--border-light); text-align:left; font-size:.9rem; } .compare-table th{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; color:var(--color-accent-text); } .compare-table tr:first-child th{ border-bottom:1px solid var(--border-medium); } .compare-hero{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; margin:40px 0; } .compare-hero .compare-side{ flex:1 1 220px; } .compare-hero .compare-vs{ flex:0 0 auto; } .compare-vs{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--color-accent-text); text-align:center; } .compare-side{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:30px; text-align:center; transition:border-color .3s ease, transform .3s ease; } .compare-side:hover{ border-color:var(--text-link); transform:translateY(-3px); box-shadow:var(--shadow-glow-primary); } .compare-side img{ height:44px; margin:0 auto 16px; } /* ---- Comparison cards (homepage "Latest Comparisons" + /comparison/ hub) ---- Purpose-built for a clickable grid tile rather than reusing .compare-side (which is a large, centered hero-only component). Left-aligned, compact padding, and a single column on mobile so text never feels cramped. */ .comparison-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .comparison-card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:22px; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .comparison-card:hover{ border-color:var(--text-link); transform:translateY(-3px); box-shadow:var(--shadow-glow-primary); } .comparison-card-badge{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-accent-text); background:var(--color-surface-2); border:1px solid var(--glass-border); border-radius:999px; padding:4px 10px; } .comparison-card h3{ font-size:1.08rem; margin:2px 0 0; } .comparison-card p{ font-size:.88rem; color:var(--text-secondary); margin:0; } .comparison-card-cta{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em; color:var(--text-link); margin-top:auto; padding-top:6px; } @media (max-width:900px){ .comparison-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .comparison-grid{ grid-template-columns:1fr; gap:14px; } .comparison-card{ padding:18px; } .comparison-card h3{ font-size:1rem; } } /* ========================================================= NEWSLETTER / CTA ========================================================= */ .newsletter{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--glass-bg-hover), var(--color-card)); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); padding:70px 0; text-align:center; } .newsletter::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 0%, rgba(150,112,58,0.22), transparent 60%); } .newsletter-form{ display:flex; gap:10px; max-width:460px; margin:26px auto 0; } .newsletter-form input{ flex:1; padding:14px 18px; border-radius:6px; border:1px solid var(--border-medium); background:var(--color-background); color:var(--text-primary); } .newsletter-note{ font-size:.75rem; color:var(--text-muted); margin-top:14px; } /* ========================================================= CATEGORY GRID (homepage) ========================================================= */ .category-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .category-tile{ position:relative; aspect-ratio:1/1.1; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border); display:flex; align-items:flex-end; padding:18px; background:linear-gradient(165deg, var(--color-surface-2), var(--color-card)); box-shadow:0 1px 0 var(--glass-highlight) inset; transition:transform var(--dur-med) var(--ease-premium), border-color .3s ease, box-shadow .3s ease; } .category-tile:hover{ transform:translateY(-5px); border-color:var(--text-link); box-shadow:0 16px 40px -18px rgba(201,151,63,0.45); } .category-tile::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(150,112,58,0.16), transparent 60%); } .category-tile span{ position:relative; font-family:var(--font-display); font-weight:700; font-size:1.3rem; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ position:relative; background:var(--color-card); border-top:1px solid var(--glass-border); padding:70px 0 30px; } .site-footer::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--color-primary-hover) 20%, var(--color-accent-hover) 50%, var(--color-primary-hover) 80%, transparent); opacity:.5; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; } .footer-col h4{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent-text); margin-bottom:16px; } .footer-col a{ display:block; font-size:.86rem; color:var(--text-secondary); padding:5px 0; transition:color .2s ease; } .footer-col a:hover{ color:var(--text-link); } .footer-brand p{ font-size:.86rem; max-width:280px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:50px; padding-top:24px; border-top:1px solid var(--border-light); flex-wrap:wrap; gap:14px; } .footer-bottom p{ margin:0; font-size:.78rem; color:var(--text-muted); } .disclosure-banner{ background:var(--color-surface-2); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); padding:18px 0; text-align:center; } .disclosure-banner p{ margin:0; font-size:.8rem; color:var(--text-muted); } .disclosure-banner a{ color:var(--color-accent-text); } /* ---------- Back to top ---------- */ .back-to-top{ position:fixed; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); right:calc(26px + env(safe-area-inset-right, 0px)); width:46px; height:46px; border-radius:50%; background:#FF6A00; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; line-height:1; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); transition:opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .2s ease; z-index:950; border:none; box-shadow:0 10px 26px -8px rgba(255,106,0,.55); -webkit-tap-highlight-color:transparent; } .back-to-top.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } .back-to-top:hover{ box-shadow:0 14px 32px -8px rgba(255,106,0,.75); background:#E65F00; } .back-to-top:active{ transform:scale(.93); } @media (max-width:760px){ .back-to-top{ width:48px; height:48px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); right:calc(18px + env(safe-area-inset-right, 0px)); } } /* ---------- Skeleton loading ---------- */ .skeleton{ background:linear-gradient(90deg, var(--color-card) 25%, var(--color-surface-2) 50%, var(--color-card) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-md); } @keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } .skeleton-card{ height:340px; } /* ---------- Scroll reveal ---------- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .reveal.visible{ opacity:1; transform:translateY(0); } /* ---------- Breadcrumb ---------- */ .breadcrumb{ display:flex; gap:8px; align-items:center; font-family:var(--font-mono); font-size:.74rem; color:var(--text-muted); padding:18px 0; flex-wrap:wrap; } .breadcrumb a{ color:var(--text-muted); } .breadcrumb a:hover{ color:var(--color-accent-text); } .breadcrumb span.sep{ opacity:.5; } /* ---------- Page hero banner ---------- */ .page-banner{ position:relative; border-radius:var(--radius-lg); overflow:hidden; margin:20px 0 50px; border:1px solid var(--border-light); } .page-banner img{ width:100%; height:280px; object-fit:cover; } /* ---------- Simple content pages ---------- */ .prose{ max-width:760px; margin:0 auto; } .prose h2{ margin-top:1.8em; } .prose ul{ padding-left:1.4em; margin-bottom:1.2em; } .prose li{ list-style:disc; margin-bottom:.5em; color:var(--text-secondary); } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; } .contact-form{ display:grid; gap:16px; } .contact-form input, .contact-form textarea{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:10px; padding:14px 16px; color:var(--text-primary); width:100%; min-height:44px; font-size:1rem; transition:border-color .2s ease, box-shadow .2s ease; } .contact-form textarea{ min-height:120px; resize:vertical; } .contact-form input:focus-visible, .contact-form textarea:focus-visible{ border-color:var(--color-accent); box-shadow:var(--focus-ring); outline:none; } .contact-form input:invalid:not(:placeholder-shown), .contact-form textarea:invalid:not(:placeholder-shown){ border-color:var(--error); } .contact-form label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; display:block; } .form-status{ font-size:.85rem; color:var(--color-accent-text); min-height:1.2em; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px){ .hero-slideshow{ height:400px; } .hero-product-section .hero-banner{ max-width:560px; } .hero-card img{ aspect-ratio:16/9; } .product-grid{ grid-template-columns:repeat(3,1fr); } .category-grid{ grid-template-columns:repeat(3,1fr); } .footer-grid{ grid-template-columns:1fr 1fr; } .article-layout{ grid-template-columns:1fr; } .toc{ position:static; margin-bottom:30px; } .compare-hero{ flex-direction:column; } .compare-hero .compare-side{ width:100%; } .contact-grid{ grid-template-columns:1fr; } } /* ---------- Navigation mechanics: dedicated breakpoint ---------- Deliberately wider than the 760px content-grid breakpoint below so that 768px tablets (iPad Mini/portrait) get the drawer + accordion nav instead of a cramped, wrapping horizontal menu bar. */ @media (max-width: 880px){ .header-inner{ height:60px; padding:0 16px; gap:10px; } .brand{ font-size:1.25rem; gap:7px; } .brand img{ height:28px; width:28px; } .header-actions{ gap:8px; } .header-searchbar-row{ padding:6px 16px 10px; } .header-searchbar{ height:46px; } .main-nav{ position:fixed; top:0; right:0; height:100dvh; height:100svh; width:min(86%,380px); /* Solid gradient, no backdrop-filter: a fixed + overflow-y:auto element with backdrop-filter is a known Android Chrome/WebView compositing bug where the background silently fails to paint, leaving the drawer transparent. A full-screen nav must always be legible, so this element trades blur for guaranteed opacity. */ background:linear-gradient(165deg, rgba(250,246,238,0.99), rgba(244,238,224,0.99)); flex-direction:column; align-items:stretch; padding:96px 26px 32px; gap:2px; transform:translateX(100%); transition:transform var(--dur-med) var(--ease-premium), visibility var(--dur-med) var(--ease-premium); border-left:1px solid var(--glass-border-strong); z-index:1050; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; visibility:hidden; box-shadow:-30px 0 80px -20px rgba(31,41,55,0.25); } [data-theme="dark"] .main-nav{ background:linear-gradient(165deg, rgba(34,27,20,0.98), rgba(20,16,12,0.98)); } .main-nav.open{ transform:translateX(0); visibility:visible; } .menu-close{ display:flex; position:absolute; top:20px; right:20px; } .nav-backdrop{ display:block; position:fixed; inset:0; background:rgba(10,10,13,0.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:1040; opacity:0; visibility:hidden; transition:opacity var(--dur-med) ease, visibility var(--dur-med) ease; } .nav-backdrop.open{ opacity:1; visibility:visible; } .main-nav a{ width:100%; padding:14px 6px; border-bottom:1px solid var(--border-light); font-size:1rem; min-height:44px; display:flex; align-items:center; } .main-nav a::after{ display:none; } .main-nav > a:first-child{ margin-top:0; } .nav-dropdown{ width:100%; } .nav-dropdown-trigger{ width:100%; justify-content:space-between; } /* Accordion: display:none/block is the most reliable cross-browser way to fully remove the closed submenu from layout, hit-testing, and the tab order — the previous grid-template-rows 0fr/1fr technique still left each closed sub-link at its full 44px min-height (needed for a tappable touch target when open), so their real on-screen position overlapped the following "Blog / About / Contact" links even while visually clipped, which broke keyboard focus order and could paint incorrectly on some mobile browsers. */ .nav-dropdown-panel{ display:none; position:static; transform:none; box-shadow:none; background:transparent; border:none; padding:0; margin-top:0; min-width:0; opacity:1; visibility:visible; } /* The desktop hover-flyout rule below has higher specificity (.nav-dropdown:hover/:focus-within .nav-dropdown-panel = 3 classes) than the plain .nav-dropdown-panel override above (1 class), and a tapped link naturally keeps focus on mobile — so without this, that rule's transform:translate(-50%,0) still wins here and drags the whole open submenu ~50% of its width off-screen to the left. */ .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{ transform:none; } .nav-dropdown.open .nav-dropdown-panel{ display:block; } .nav-dropdown-panel::before{ display:none; } .nav-dropdown-inner{ padding-left:14px; display:flex; flex-direction:column; } .nav-dropdown-panel a{ border-bottom:1px solid var(--border-light); font-size:.94rem; color:var(--text-secondary); padding:14px 4px; min-height:44px; } .nav-dropdown.open > .nav-dropdown-trigger{ color:var(--color-accent-text); } .menu-toggle{ display:flex; } } @media (max-width: 760px){ .product-grid, .product-grid.cols-3{ grid-template-columns:repeat(2,1fr); } .category-grid{ grid-template-columns:repeat(2,1fr); } .blog-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } .review-hero{ grid-template-columns:1fr; } .pros-cons{ grid-template-columns:1fr; } .who-grid{ grid-template-columns:1fr; } .prev-next{ grid-template-columns:1fr; } .section{ padding:56px 0; } /* Compact the hero sections on small screens -- same title/subtitle/ CTA/stats content, just sized and spaced to breathe on a small screen instead of the desktop measure. */ .hero-slideshow-section{ padding:28px 0 0; } .hero-text-section{ padding:36px 0 44px; } .hero-product-section{ padding:0 0 48px; } .hero-copy h1{ font-size:clamp(1.6rem, 7vw, 2.2rem); } .hero-copy p.lead{ font-size:.95rem; } .hero-cta-row{ margin-top:18px; justify-content:center; } .hero-cta-row .btn{ flex:1 1 auto; } .hero-stats{ margin-top:28px; gap:18px; } .hero-stat b{ font-size:1.5rem; } .hero-stat span{ font-size:.68rem; } .hero-slideshow{ height:300px; border-radius:16px; } .hero-slide-info{ padding:16px; flex-direction:column; align-items:stretch; } .hero-slide-name{ font-size:.9rem; margin-bottom:10px; } .hero-slide-btn{ align-self:flex-start; padding:10px 12px; font-size:16px; } /* Buy on Amazon / Temu / AliExpress -- scaled down on mobile so all three sit compactly without dominating the screen. */ .affiliate-buttons{ gap:8px; } .affiliate-buttons .btn{ font-size:13px; } .btn-amazon{ padding:8px 14px; } .btn-temu, .btn-aliexpress{ padding:8px 12px; font-size:13px; } } @media (max-width:480px){ .product-grid, .product-grid.cols-3{ grid-template-columns:1fr 1fr; } .category-grid{ grid-template-columns:1fr 1fr; } .hero-stats{ gap:20px; flex-wrap:wrap; } .header-inner{ padding:0 12px; } .brand{ font-size:1.1rem; gap:6px; } .brand img{ height:24px; width:24px; } .header-actions{ gap:8px; } .icon-btn{ width:36px; height:36px; min-width:36px; } .icon-btn svg{ width:13px; height:13px; } .header-searchbar-row{ padding:6px 12px 10px; } .header-searchbar{ padding-left:16px; } .header-searchbar input{ font-size:.85rem; } .main-nav{ width:100%; max-width:none; padding:88px 20px 28px; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }