/* ========================================================================== NUREXA — Design System Fonts: Fraunces (display) + Inter (body) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ---------------------------------- Tokens ---------------------------------- */ :root{ /* neutrals — warm premium paper/ink */ --ink:#18140d; --ink-soft:#4d4739; --ink-faint:#8b8371; --paper:#faf7f0; --paper-alt:#f2ece0; --card:#ffffff; --line:#e6ddc9; --line-strong:#d5c9ac; /* brand signature (site shell: nav / footer / home / shop / faq / about / canada) */ --brand:#b3872f; --brand-dark:#7e5f1f; --brand-ink:#161209; --brand-tint:#f7eeda; /* default themed accent = brand, overridden per product page on */ --accent:var(--brand); --accent-dark:var(--brand-dark); --accent-ink:var(--brand-ink); --accent-tint:var(--brand-tint); --success:#3d6b4c; --error:#a3372f; --font-display:'Fraunces', ui-serif, Georgia, serif; --font-body:'Inter', ui-sans-serif, system-ui, sans-serif; --space-1:.5rem; --space-2:.75rem; --space-3:1.25rem; --space-4:2rem; --space-5:3rem; --space-6:4.5rem; --space-7:6rem; --space-8:8rem; --r-sm:8px; --r-md:16px; --r-lg:28px; --r-full:999px; --shadow-sm:0 1px 3px rgba(24,20,13,.07); --shadow-md:0 12px 32px -8px rgba(24,20,13,.16); --shadow-lg:0 30px 70px -20px rgba(24,20,13,.28); --ease:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); /* Subtle spring-like overshoot — reserved for entrance moments (modal, menu, drawer) where something settles into place. Not for hover: at hover frequency (tens of times/day) any overshoot reads as bouncy/cheap rather than premium — see the Animation Decision Framework's frequency table. */ --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:180ms; --dur-base:360ms; --dur-slow:640ms; --container:1280px; --nav-h:84px; } /* Per-product themes */ body[data-theme="magnesium"]{ --accent:#a9791f; --accent-dark:#7a5716; --accent-ink:#241b0c; --accent-tint:#f8f1de; } body[data-theme="womens"]{ --accent:#c15577; --accent-dark:#8f3757; --accent-ink:#391521; --accent-tint:#fbeef1; } body[data-theme="biotin"]{ --accent:#1f7a82; --accent-dark:#134a50; --accent-ink:#0c2c30; --accent-tint:#eaf6f6; } body[data-theme="b12"]{ --accent:#8c2233; --accent-dark:#5c1521; --accent-ink:#280a0f; --accent-tint:#faeeee; } /* ---------------------------------- Reset ---------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ min-height:100dvh; font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} input,textarea{font:inherit;color:inherit} ::selection{background:var(--accent);color:#fff} .icon{width:1.25em;height:1.25em;flex-shrink:0} /* ---------------------------------- Type ---------------------------------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.01em;color:var(--ink)} h1{font-size:clamp(2.6rem,4.6vw + 1rem,5.4rem)} h2{font-size:clamp(2rem,2.6vw + 1rem,3.4rem)} h3{font-size:clamp(1.4rem,1.2vw + 1rem,1.9rem)} h4{font-size:1.2rem;font-weight:600} .italic{font-style:italic} p{max-width:60ch} .lede{font-size:clamp(1.05rem,.4vw + 1rem,1.25rem);color:var(--ink-soft);max-width:52ch} .eyebrow{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--font-body);font-weight:600;font-size:.76rem; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark); } .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6} .text-center{text-align:center} .text-center p.lede{margin-inline:auto} .muted{color:var(--ink-faint)} .on-dark{color:#fff} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff} .on-dark .lede{color:rgba(255,255,255,.72)} .on-dark .eyebrow{color:var(--accent, #e8c77a)} /* ---------------------------------- Layout ---------------------------------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)} .section{padding-block:var(--space-7)} .section-sm{padding-block:var(--space-5)} @media (max-width:768px){ .section{padding-block:var(--space-6)} } .stack{display:flex;flex-direction:column} .row{display:flex;align-items:center} .gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)} .grid{display:grid;gap:var(--space-4)} .section-head{max-width:640px;margin-bottom:var(--space-5)} .section-head.text-center{margin-inline:auto} /* ---------------------------------- Buttons ---------------------------------- */ .btn{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-border:0 0 0 0 transparent; --btn-lift:0 0 0 0 transparent; --btn-ring:0 0 0 0 transparent; /* Magnetic-pull offset (see main.js) — set on the same property the hover/active states already use, via addition inside one transform value. JS never touches `transform` directly, so it can't clobber the CSS-driven hover lift the way an inline GSAP x/y tween would. */ --magnet-x:0px; --magnet-y:0px; display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:1.05em 1.9em;border-radius:var(--r-full); font-family:var(--font-body);font-weight:600;font-size:.94rem;letter-spacing:.01em; background:var(--btn-bg);color:var(--btn-fg); box-shadow:var(--btn-border), var(--btn-lift), var(--btn-ring); transform:translate(var(--magnet-x),var(--magnet-y)); transition:transform 160ms var(--ease), box-shadow 200ms var(--ease), background 220ms var(--ease), color 220ms var(--ease); white-space:nowrap; } .btn .icon{width:1.05em;height:1.05em;transition:transform var(--dur-base) var(--ease)} .btn:hover{ transform:translate(var(--magnet-x),var(--magnet-y)) translateY(-2px) scale(1.02); --btn-lift:var(--shadow-md); /* Hover ring: a softer preview of the same accent used by :focus-visible below, so hover reads as "about to be focused" without being mistaken for the real (solid) keyboard-focus ring. */ --btn-ring:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); } .btn:hover .icon{transform:translateX(3px)} .btn:active{transform:translate(var(--magnet-x),var(--magnet-y)) scale(.97)} @media (prefers-reduced-motion:reduce){ .btn:hover{transform:translate(var(--magnet-x),var(--magnet-y))} } .btn-accent{--btn-bg:var(--accent);--btn-fg:#fff} .btn-dark{--btn-bg:var(--ink);--btn-fg:#fff} .btn-light{--btn-bg:#fff;--btn-fg:var(--ink)} .btn-outline{--btn-bg:transparent;--btn-fg:var(--ink);--btn-border:inset 0 0 0 1.5px var(--line-strong)} .btn-outline.btn-outline-light{--btn-fg:#fff;--btn-border:inset 0 0 0 1.5px rgba(255,255,255,.5)} .btn-outline:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-border:0 0 0 0 transparent} .btn-outline.btn-outline-light:hover{--btn-bg:#fff;--btn-fg:var(--ink)} .btn-sm{padding:.8em 1.4em;font-size:.85rem} .btn-block{width:100%} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none} /* ---------------------------------- Badges / Pills ---------------------------------- */ .pill{ display:inline-flex;align-items:center;gap:.5em; padding:.5em 1em;border-radius:var(--r-full); font-size:.78rem;font-weight:600;letter-spacing:.02em; background:var(--accent-tint);color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .pill .icon{width:1em;height:1em} .pill-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-soft)} .rating{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;color:var(--ink-soft)} .rating .stars{display:inline-flex;gap:.1em;color:var(--accent)} .rating .stars .icon{width:1em;height:1em} /* ---------------------------------- Nav ---------------------------------- */ .nav{ position:fixed;inset-inline:0;top:0;z-index:100; height:var(--nav-h); display:flex;align-items:center; background:transparent; transition:background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), height var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); border-bottom:1px solid transparent; } .nav.is-solid{background:rgba(250,247,240,.88);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-color:var(--line);height:72px} .nav-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)} .nav-logo{display:flex;align-items:center;gap:.7em;flex-shrink:0} .nav-logo img{height:36px;width:36px;border-radius:9px;object-fit:cover;transition:height var(--dur-base) var(--ease)} .nav.is-solid .nav-logo img{height:32px;width:32px} .nav-logo .wordmark{font-family:var(--font-display);font-weight:600;font-size:1.28rem;letter-spacing:.02em;color:var(--ink)} .nav-links{display:flex;align-items:center;gap:var(--space-4);list-style:none} .nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);position:relative;padding-block:.3em;transition:color var(--dur-fast) var(--ease)} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right var(--dur-base) var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after,.nav-links a.is-active::after{right:0} .nav-links a.is-active{color:var(--ink)} .nav-actions{display:flex;align-items:center;gap:var(--space-2)} .nav-region-toggle{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-full);padding:3px;gap:2px} .nav-region-toggle button{padding:.45em .85em;border-radius:var(--r-full);font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--ink-faint);transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)} .nav-region-toggle button.is-active{background:var(--ink);color:#fff} @media (max-width:560px){ .nav-region-toggle{display:none} } .country-pill{ display:inline-flex;align-items:center;gap:.5em; padding:.55em 1em;border-radius:var(--r-full); border:1px solid var(--line-strong);font-size:.8rem;font-weight:600;color:var(--ink-soft); transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .country-pill:hover{border-color:var(--ink);color:var(--ink)} .nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-full)} .nav-burger:hover{background:var(--paper-alt)} @media (max-width:920px){ .nav-links{display:none} .nav-burger{display:inline-flex} } /* ---------------------------------- Mega menu (Shop hover dropdown) ---------------------------------- */ .has-mega{position:relative} .nav-mega-trigger{display:inline-flex !important;align-items:center;gap:.4em} .nav-mega-chevron{width:.8em;height:.8em;transition:transform 260ms var(--ease-in-out)} .has-mega.is-open .nav-mega-chevron{transform:rotate(180deg)} .nav-mega-panel{ position:absolute;top:100%;left:50%; transform:translate(-50%,6px) scale(.98); transform-origin:top center; width:min(560px,88vw); margin-top:18px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.8); padding:1.4rem; opacity:0;visibility:hidden;pointer-events:none; transition:opacity 200ms var(--ease), transform 260ms var(--ease-spring), visibility 260ms; z-index:120; } /* Single source of truth: JS toggles .is-open (mouseenter/leave with a close-delay, plus focusin/focusout). No CSS :hover/:focus-within trigger here — those competed with .is-open and caused the panel to flicker on the trigger→panel gap, and to stay stuck open after a click focused the trigger link. */ .has-mega.is-open .nav-mega-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1); } .nav-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem} .nav-mega-item{ display:flex;align-items:center;gap:.9em;padding:.65em;border-radius:var(--r-md); transition:background 200ms var(--ease), transform 200ms var(--ease); } .nav-mega-item:hover{background:var(--mi-tint,var(--paper-alt))} .nav-mega-item:active{transform:scale(.97)} .nav-mega-thumb{width:50px;height:50px;border-radius:12px;background:var(--mi-tint,var(--paper-alt));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .nav-mega-thumb img{width:80%;height:80%;object-fit:contain} .nav-mega-text{display:flex;flex-direction:column;gap:.15em;min-width:0} .nav-mega-title{font-size:.86rem;font-weight:600;color:var(--ink)} .nav-mega-desc{font-size:.75rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-mega-viewall{ display:flex;align-items:center;justify-content:center;gap:.5em; margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line); font-size:.82rem;font-weight:600;color:var(--accent-dark); transition:gap 200ms var(--ease); } .nav-mega-viewall .icon{width:1em;height:1em;transition:transform 200ms var(--ease)} .nav-mega-viewall:hover{gap:.7em} .nav-mega-viewall:hover .icon{transform:translateX(2px)} /* Canada has no products of its own yet (and won't carry the AU lineup), so the mega menu swaps its product grid for a plain waitlist prompt instead of showing AU-only items as if they're what's coming. */ .nav-mega-ca-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1em;padding:1em .5em} .nav-mega-ca-empty p{font-size:.86rem;color:var(--ink-soft)} /* mobile drawer */ .mobile-menu{ position:fixed;inset:0;z-index:130; background:var(--ink);color:#fff; display:flex;flex-direction:column; padding:var(--space-4) clamp(1.25rem,6vw,3rem); transform:translateY(-100%); transition:transform 480ms var(--ease-drawer); } .mobile-menu.is-open{transform:translateY(0)} .mobile-menu-top{display:flex;align-items:center;justify-content:space-between} .mobile-menu-top .nav-logo img{height:34px;width:34px} .mobile-menu-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.2)} .mobile-links{display:flex;flex-direction:column;gap:.2em;margin-top:var(--space-5)} .mobile-links a{ font-family:var(--font-display);font-size:clamp(2rem,7vw,2.8rem);padding-block:.28em; border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-weight:500; opacity:0;transform:translateY(14px); transition:opacity 260ms var(--ease), transform 260ms var(--ease), color 200ms var(--ease); } .mobile-links a:hover{color:var(--accent)} .mobile-menu.is-open .mobile-links a{opacity:1;transform:translateY(0)} .mobile-menu.is-open .mobile-links a:nth-child(1){transition-delay:120ms} .mobile-menu.is-open .mobile-links a:nth-child(2){transition-delay:170ms} .mobile-menu.is-open .mobile-links a:nth-child(3){transition-delay:220ms} .mobile-menu.is-open .mobile-links a:nth-child(4){transition-delay:270ms} .mobile-menu-foot{margin-top:auto;padding-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)} .mobile-country{display:flex;gap:.75em} .mobile-country button{flex:1;padding:1em;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.25);font-weight:600;transition:background 200ms var(--ease), color 200ms var(--ease)} .mobile-country button.is-active{background:#fff;color:var(--ink)} /* ---------------------------------- Country modal ---------------------------------- */ .region-modal{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center; padding:var(--space-3); background:rgba(15,12,7,.55); backdrop-filter:blur(6px); opacity:0;pointer-events:none; transition:opacity var(--dur-base) var(--ease); } .region-modal.is-open{opacity:1;pointer-events:auto} .region-card{ width:min(560px,100%); background:var(--paper); border-radius:var(--r-lg); padding:clamp(1.75rem,4vw,3rem); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.8); text-align:center; transform:translateY(16px) scale(.98); transition:transform 480ms var(--ease-spring); } .region-modal.is-open .region-card{transform:translateY(0) scale(1)} .region-card img{height:40px;width:40px;border-radius:10px;margin-inline:auto;margin-bottom:var(--space-3)} .region-options{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:var(--space-4)} .region-option{ border:1.5px solid var(--line-strong);border-radius:var(--r-md); padding:1.5em 1em;display:flex;flex-direction:column;align-items:center;gap:.5em; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .region-option:hover{border-color:var(--ink);transform:translateY(-2px)} .region-option:active{transform:scale(.98)} .region-option .flag{font-size:1.8rem;line-height:1} .region-option .name{font-weight:700} .region-option .status{font-size:.78rem;color:var(--ink-faint)} /* ---------------------------------- Hero ---------------------------------- */ .hero{position:relative;padding-top:calc(var(--nav-h) + 3.5rem);padding-bottom:var(--space-7);overflow:clip} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-6);align-items:center} .hero-copy h1{margin-block:.35em .5em} .hero-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)} .hero-meta{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap} .hero-media{position:relative} .hero-media img{border-radius:var(--r-lg);width:100%;object-fit:cover;box-shadow:var(--shadow-lg)} /* Transparent product cutouts: no card rectangle — a soft tinted glow behind the bottle and a shadow that hugs the silhouette instead of the image box. */ .hero-media.floating{display:flex;align-items:center;justify-content:center;padding:var(--space-5) 0} .hero-media.floating::before{ content:"";position:absolute;inset:6% 10%; background:radial-gradient(circle, var(--accent-tint) 0%, transparent 72%); border-radius:50%;z-index:0; } .hero-media.floating img{ position:relative;z-index:1;width:auto;max-width:82%;max-height:560px; border-radius:0;box-shadow:none;object-fit:contain; filter:drop-shadow(0 34px 40px rgba(20,15,8,.22)); } .hero-media.floating .float-card{position:absolute;z-index:2} .hero-media .float-card{ position:absolute;bottom:-1.25rem;left:-1.25rem; background:#fff;border-radius:var(--r-md);padding:1em 1.3em; box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.8);display:flex;align-items:center;gap:.8em; max-width:230px; } .hero-media .float-card .icon{width:1.6em;height:1.6em;color:var(--accent)} .hero-media .float-card strong{display:block;font-size:.92rem} .hero-media .float-card span{font-size:.78rem;color:var(--ink-faint)} @media (max-width:920px){ .hero-grid{grid-template-columns:1fr} .hero-media{order:-1} .hero-media .float-card{left:.75rem;bottom:-1rem} } /* full-bleed image banner (editorial showcase) */ .showcase{position:relative;width:100%;overflow:hidden;border-radius:var(--r-lg)} .showcase img{width:100%;display:block} .showcase-wrap{padding-inline:clamp(1.25rem,4vw,3rem)} /* ---------------------------------- Cards ---------------------------------- */ .card{ background:var(--card);border-radius:var(--r-lg); padding:var(--space-4);border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease); } .card:hover{transform:translateY(-4px) scale(1.008);box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.8);border-color:transparent} .card:active{transform:scale(.99)} .feature-card{display:flex;flex-direction:column;gap:1em} .feature-card .ico{ width:52px;height:52px;border-radius:16px;background:var(--accent-tint);color:var(--accent-ink); display:flex;align-items:center;justify-content:center; transition:transform 280ms var(--ease); } .feature-card .ico .icon{width:1.5em;height:1.5em} .feature-card h4{margin:0} .feature-card p{color:var(--ink-soft);font-size:.95rem} .card:hover .ico{transform:scale(1.1) rotate(-4deg)} /* product card (shop grid / home collection / related) */ .product-card{ position:relative; display:flex;flex-direction:column;background:var(--card); border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease), filter 260ms var(--ease); } .product-card:active{transform:scale(.98)} /* Focus one card, settle the rest back — hovering any card in a grid of them softens its siblings so the eye has one clear subject instead of four competing ones. :has() scopes this to whichever grid actually contains the hovered card, so it never leaks into unrelated grids. */ .grid:has(> .product-card:hover) > .product-card:not(:hover){ filter:blur(2px) brightness(.94) saturate(.9); } @media (prefers-reduced-motion:reduce){ .grid:has(> .product-card:hover) > .product-card:not(:hover){ filter:none } } /* Spotlight glow that follows the cursor — --mx/--my are set per-card by main.js (rAF-throttled mousemove), scoped to this element only so it never touches sibling cards' styles. */ .product-card::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--pc-accent,var(--accent)) 26%, transparent), transparent 72%); opacity:0;transition:opacity 320ms var(--ease); } .product-card:hover::after{opacity:1} .product-card .thumb{aspect-ratio:1/1;overflow:hidden;background:var(--pc-tint,var(--paper-alt));display:flex;align-items:center;justify-content:center;position:relative} .product-card .thumb img{width:78%;height:78%;object-fit:contain;transition:transform 420ms var(--ease)} .product-card .thumb .ribbon{position:absolute;top:14px;left:14px} .product-card .body{padding:1.4em 1.4em 1.6em;display:flex;flex-direction:column;gap:.6em;flex:1} .product-card .kicker{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-accent,var(--accent))} .product-card h3{font-size:1.3rem;margin:0} .product-card p{font-size:.9rem;color:var(--ink-soft);flex:1} .product-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4em;gap:.75em} .product-card .price{font-weight:700;font-size:1.05rem} .product-card .cta{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.86rem;color:var(--pc-accent,var(--accent))} .product-card .cta .icon{width:1em;height:1em;transition:transform var(--dur-fast) var(--ease)} .product-card:hover{ transform:translateY(-6px); /* Border glow: same two-tone relationship as the reference (a base tint plus a lighter halo), built from each card's own --pc-accent instead of a fixed color, so every product glows in its own shade. */ border-color:color-mix(in srgb, var(--pc-accent,var(--accent)) 45%, transparent); box-shadow:var(--shadow-lg), 0 0 22px 2px color-mix(in srgb, var(--pc-accent,var(--accent)) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.8); } .product-card:hover .thumb img{transform:scale(1.06) translateY(-3px)} .product-card:hover .cta .icon{transform:translateX(3px)} /* stat block */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)} .stat{text-align:center} .stat .num{font-family:var(--font-display);font-size:clamp(2.2rem,3vw,3.4rem);color:var(--accent)} .stat .label{font-size:.82rem;letter-spacing:.03em;color:var(--ink-soft);margin-top:.3em} @media (max-width:768px){ .stat-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-4)} } /* big stat / number spotlight section */ .numberband{ background:var(--accent-ink);color:#fff;border-radius:var(--r-lg); padding:var(--space-6) clamp(1.5rem,5vw,4rem); display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:center; } .numberband .figure{font-family:var(--font-display);font-size:clamp(4rem,10vw,8rem);line-height:.9;color:var(--accent)} .numberband .figure sup{font-size:.32em;margin-left:.1em;color:#fff} @media (max-width:820px){ .numberband{grid-template-columns:1fr;text-align:center} } /* ---------------------------------- Trust bar ---------------------------------- */ .trustbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-5);padding-block:var(--space-3)} .trustbar .item{display:flex;align-items:center;gap:.6em;color:var(--ink-soft);font-size:.86rem;font-weight:600} .trustbar .item .icon{width:1.3em;height:1.3em;color:var(--accent)} /* ---------------------------------- Marquee ---------------------------------- */ .marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper-alt)} .marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite} @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;flex-wrap:wrap} } .marquee-track span{display:flex;align-items:center;gap:.8em;padding:1em 2.5em;font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--ink-soft);white-space:nowrap} .marquee-track span .icon{width:1em;height:1em;color:var(--accent)} @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ---------------------------------- Accordion (FAQ) ---------------------------------- */ .accordion{border-top:1px solid var(--line)} .accordion-item{border-bottom:1px solid var(--line)} .accordion-trigger{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1em; padding:1.4em .25em;text-align:left;font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--ink); transition:color 200ms var(--ease); } .accordion-trigger:hover{color:var(--accent-dark)} .accordion-trigger:hover .icon{color:var(--accent-dark)} .accordion-trigger .icon{width:1.2em;height:1.2em;flex-shrink:0;transition:transform 240ms var(--ease-in-out), color 200ms var(--ease);color:var(--accent)} .accordion-item.is-open .accordion-trigger .icon{transform:rotate(180deg)} .accordion-panel{ display:grid;grid-template-rows:minmax(0,0fr);min-height:0;overflow:hidden; transition:grid-template-rows 240ms var(--ease); } .accordion-item.is-open .accordion-panel{grid-template-rows:minmax(0,1fr)} .accordion-panel-inner{overflow:hidden;min-height:0;padding:0 .25em 1.6em;color:var(--ink-soft);max-width:70ch} .faq-group-title{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:.75em;margin-top:var(--space-5)} .faq-group-title:first-child{margin-top:0} /* ---------------------------------- Ingredient / list rows ---------------------------------- */ .ingredient-row{display:flex;gap:1.1em;padding-block:1.1em;border-bottom:1px solid var(--line)} .ingredient-row .dot{width:38px;height:38px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ingredient-row .dot .icon{width:1.1em;height:1.1em} .ingredient-row h4{margin-bottom:.15em} .ingredient-row p{font-size:.9rem;color:var(--ink-soft)} /* ---------------------------------- Forms ---------------------------------- */ .field{display:flex;flex-direction:column;gap:.5em;text-align:left} .field label{font-size:.82rem;font-weight:600;color:var(--ink-soft)} .field input{ padding:1em 1.2em;border-radius:var(--r-full);border:1.5px solid var(--line-strong); background:#fff;transition:border-color 200ms var(--ease), box-shadow 200ms var(--ease); } .field input:focus-visible{ outline:none;border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .inline-form{display:flex;gap:.6em;flex-wrap:wrap} .inline-form input{flex:1;min-width:220px} .form-note{font-size:.78rem;color:var(--ink-faint);margin-top:.6em} .form-success{display:none;align-items:center;gap:.6em;color:var(--success);font-weight:600;padding:1em 0} .form-success.is-shown{display:flex} .form-success .icon{width:1.3em;height:1.3em} .form-error{display:none;align-items:center;gap:.6em;color:var(--error);font-weight:600;padding:.6em 0 0;font-size:.9rem} .form-error.is-shown{display:flex} .form-error .icon{width:1.2em;height:1.2em;flex-shrink:0} /* Focus visibility (a11y) */ a:focus-visible,button:focus-visible,input:focus-visible,.accordion-trigger:focus-visible{ outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px; } /* ---------------------------------- Footer ---------------------------------- */ .footer{background:var(--ink);color:rgba(255,255,255,.82)} .footer a{color:rgba(255,255,255,.82);transition:color var(--dur-fast) var(--ease)} .footer a:hover{color:#fff} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-5);padding-block:var(--space-6)} .footer-brand .nav-logo{margin-bottom:1.1em} .footer-brand p{color:rgba(255,255,255,.6);font-size:.92rem;max-width:34ch} .footer h5{font-family:var(--font-body);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.1em} .footer-links{display:flex;flex-direction:column;gap:.75em;font-size:.92rem} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--space-3);display:flex;flex-wrap:wrap;gap:1em;align-items:center;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.5)} .footer-disclaimer{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--space-3);font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.42);max-width:110ch} .footer-country{display:flex;gap:.6em} .footer-country button{padding:.5em 1em;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.25);font-size:.78rem;font-weight:600;transition:background 200ms var(--ease), color 200ms var(--ease)} .footer-country button.is-active{background:#fff;color:var(--ink)} @media (max-width:920px){ .footer-top{grid-template-columns:1fr 1fr;row-gap:var(--space-5)} } @media (max-width:560px){ .footer-top{grid-template-columns:1fr} } /* ---------------------------------- Utility ---------------------------------- */ .bg-alt{background:var(--paper-alt)} .bg-ink{background:var(--ink);color:#fff} .bg-accent-ink{background:var(--accent-ink);color:#fff} .bg-tint{background:var(--accent-tint)} .divider{height:1px;background:var(--line);border:0} .ribbon{ display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border-radius:var(--r-full); background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; } .ribbon.gold{background:var(--accent);} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{ position:fixed;top:-60px;left:1rem;z-index:999;background:var(--ink);color:#fff; padding:.9em 1.4em;border-radius:var(--r-md);transition:top var(--dur-fast) var(--ease); } .skip-link:focus{top:1rem} /* two-col alternating feature section */ .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center} .split.reverse .split-media{order:2} .split-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%} @media (max-width:860px){ .split{grid-template-columns:1fr} .split.reverse .split-media{order:-1} } /* shop.html horizontal product card */ .shop-card{flex-direction:row;cursor:pointer} .shop-card .thumb{width:38%;aspect-ratio:auto;flex-shrink:0} .shop-card .body{width:62%} .flex-wrap{flex-wrap:wrap} @media (max-width:640px){ .shop-card{flex-direction:column} .shop-card .thumb{width:100%;aspect-ratio:1/1} .shop-card .body{width:100%} } /* columns 2 / 3 / 4 grids */ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media (max-width:920px){ .grid-3{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} } /* ---------------------------------- Country visibility ---------------------------------- */ html:not([data-country="CA"]) [data-ca-only]{display:none !important} html:not([data-country="AU"]) [data-au-only]{display:none !important} /* Homepage hero: the product image column is AU-only (data-au-only above hides it for CA). Without this, CA visitors would see an empty right half where the image used to be — collapse to one centered column instead. Scoped to .hero--home only, so product-page heroes (which always show their own product, regardless of region) are untouched. */ html:not([data-country="AU"]) .hero--home .hero-grid{grid-template-columns:1fr;text-align:center} html:not([data-country="AU"]) .hero--home .hero-copy .eyebrow, html:not([data-country="AU"]) .hero--home .hero-copy .lede{margin-inline:auto} html:not([data-country="AU"]) .hero--home .hero-actions{justify-content:center} html:not([data-country="AU"]) .hero--home .hero-meta{justify-content:center} /* About page: two editorial sections pair prose with a product photo (.split-media, AU-only). Collapse to a single left-aligned column for CA rather than centering — this is body copy, not a hero, so it reads naturally the same way the rest of the page's text does. Scoped to .split--about only; product pages also use .split for their own product's own photo, which stays visible regardless of region. */ html:not([data-country="AU"]) .split--about{grid-template-columns:1fr} /* ---------------------------------- Reveal (GSAP hook) ---------------------------------- Elements start fully visible by default. JS (main.js) sets the hidden pre-animation state via gsap.set only once GSAP has actually loaded, then animates it in — so a blocked/slow CDN request never leaves content permanently invisible. */ /* ---------------------------------- Page header (about/faq/canada) ---------------------------------- */ .page-header{padding-top:calc(var(--nav-h) + 3rem);padding-bottom:var(--space-6);text-align:center} .page-header .eyebrow{justify-content:center} .page-header h1{margin-top:.4em} /* breadcrumb */ .crumb{display:flex;align-items:center;gap:.5em;font-size:.85rem;color:var(--ink-faint);margin-bottom:var(--space-3)} .crumb a:hover{color:var(--ink)} .crumb .icon{width:.9em;height:.9em} /* quantity / spec table */ .spec-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .spec-list div{padding:1em .25em;border-bottom:1px solid var(--line);font-size:.9rem} .spec-list dt{color:var(--ink-faint)} .spec-list dd{font-weight:600;text-align:right} @media (max-width:560px){ .spec-list{grid-template-columns:1fr} .spec-list dd{text-align:left} }