/* ============================================================ NOVA3D — storefront Layered print grammar + WebGL hero + orchestrated scroll motion. Every effect has a reduced-motion and a no-WebGL fallback. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ------------------------------------------------------------ THEME TOKENS Dark is the default. Every surface, rule and text colour is a token, so the light theme is the same stylesheet with different values — no duplicated rules, no second file to drift. The base is a warm near-black rather than pure #000: on OLED, pure black smears at the scroll edges and makes product photos look like they float in a void. ------------------------------------------------------------ */ :root{ color-scheme:dark; /* brand constants — identical across themes */ --violet:#7C6CF0; --amber:#FFB020; --danger:#FF6B6E; --success:#3DD68C; /* accent: dimmed variant is genuinely dimmer, for text that must hold contrast against light surfaces in the light theme */ --cyan:#00E5D4; --cyan-dim:#00B5A8; /* surfaces, darkest to lightest */ --bg:#0C0C10; --surface:#15151B; --surface-2:#1D1D25; --surface-3:#26262F; --rule:#2A2A33; --rule-strong:#3C3C48; /* text */ --ink:#EDEDF0; --ink-2:#C4C4CE; --muted:#9A9AA6; --on-accent:#0C0C10; /* a block that inverts against the page (footer, split panels) */ --invert-bg:#08080B; --invert-ink:#EDEDF0; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 14px 34px -14px rgba(0,0,0,.7); --shadow-lg:0 26px 60px -22px rgba(0,0,0,.8); /* aliases kept so existing rules keep resolving */ --graphite:var(--ink); --graphite-2:var(--surface-2); --graphite-3:var(--surface-3); --paper:var(--bg); --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; --body:'Inter',ui-sans-serif,system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --gutter:clamp(1.15rem, .6rem + 1.8vw, 2.5rem); --maxw:1280px; --r:12px; --r-lg:22px; --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); } /* Light theme — opt in with data-theme="light" on . */ :root[data-theme="light"]{ color-scheme:light; --cyan:#00A99D; --cyan-dim:#00786F; --bg:#F5F4F1; --surface:#FFFFFF; --surface-2:#EFEDE9; --surface-3:#E4E1DB; --rule:#DFDCD6; --rule-strong:#C7C3BB; --ink:#0B0B0D; --ink-2:#3A3A42; --muted:#6E6E78; --on-accent:#FFFFFF; --invert-bg:#0B0B0D; --invert-ink:#F5F4F1; --shadow-sm:0 1px 2px rgba(11,11,13,.05); --shadow-md:0 14px 34px -16px rgba(11,11,13,.2); --shadow-lg:0 26px 60px -24px rgba(11,11,13,.26); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px} .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} h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em; line-height:1.08;margin:0 0 .5em} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .spec{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} /* ============================================================ MOTION SYSTEM One IntersectionObserver adds .in — everything below keys off it. ============================================================ */ .jsanim [data-reveal]{opacity:0;transform:translate3d(0,26px,0); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--d,0ms);will-change:opacity,transform} [data-reveal].in{opacity:1;transform:none} [data-reveal="scale"]{transform:scale(.94)} [data-reveal="left"]{transform:translate3d(-32px,0,0)} [data-reveal="right"]{transform:translate3d(32px,0,0)} [data-reveal="clip"]{opacity:1;clip-path:inset(0 100% 0 0);transform:none; transition:clip-path 1s var(--ease)} [data-reveal="clip"].in{clip-path:inset(0 0 0 0)} /* line-by-line headline reveal */ .split-line{display:block;overflow:hidden} .split-line>span{display:block;transform:translateY(110%); transition:transform .9s var(--ease);transition-delay:var(--d,0ms)} .in .split-line>span,.split-line.in>span{transform:none} /* counters + shimmer */ @keyframes shimmer{to{background-position:200% 0}} .shimmer{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%); background-size:200% 100%;animation:shimmer 1.4s linear infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes pulse-ring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(2.2);opacity:0}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes marquee{to{transform:translate3d(-50%,0,0)}} @keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(700%)}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important} .split-line>span{transform:none!important} } /* ============================================================ ANNOUNCEMENT BAR ============================================================ */ .announce{background:var(--surface);color:var(--graphite);overflow:hidden;padding:.6rem 0; font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;position:relative} .announce::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,var(--surface),transparent 8%,transparent 92%,var(--surface))} .announce__track{display:flex;gap:3.5rem;width:max-content;white-space:nowrap; animation:marquee 34s linear infinite} .announce:hover .announce__track{animation-play-state:paused} .announce__item{display:flex;align-items:center;gap:.65rem;opacity:.92} .announce__item::before{content:"";width:5px;height:5px;background:var(--cyan); border-radius:50%;flex:none;box-shadow:0 0 8px var(--cyan)} /* ============================================================ HEADER ============================================================ */ .header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;transition:border-color .35s ease,background .35s ease} .header.stuck{border-bottom-color:var(--rule);background:color-mix(in srgb, var(--bg) 93%, transparent)} .header__bar{display:flex;align-items:center;gap:1.5rem;max-width:var(--maxw); margin-inline:auto;padding:.9rem var(--gutter)} .logo{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.04em; display:inline-flex;align-items:center;gap:.1em;position:relative} .logo em{font-style:normal;color:var(--cyan)} .logo i{width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-left:.35rem; position:relative;display:block} .logo i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cyan); animation:pulse-ring 2.4s var(--ease-io) infinite} .nav{display:flex;gap:1.4rem;margin-left:auto;font-size:.875rem} .nav a{color:var(--muted);position:relative;padding-block:.3rem; transition:color .25s ease} .nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%; background:var(--cyan);transform:scaleX(0);transform-origin:right; transition:transform .38s var(--ease)} .nav a:hover{color:var(--graphite)} .nav a:hover::after{transform:scaleX(1);transform-origin:left} .nav a[aria-current="page"]{color:var(--graphite)} .nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--cyan)} .icons{display:flex;gap:.3rem;align-items:center} .icons a{position:relative;display:grid;place-items:center;width:40px;height:40px; border-radius:50%;transition:background .25s ease,transform .25s var(--ease)} .icons a:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)} .icons svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none; stroke-linecap:round;stroke-linejoin:round} .count{position:absolute;top:4px;right:2px;background:var(--cyan);color:var(--on-accent); font-family:var(--mono);font-size:.625rem;min-width:17px;height:17px;border-radius:9px; display:grid;place-items:center;padding-inline:4px;font-weight:500} .count.bump{animation:bump .45s var(--ease)} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}} .burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--rule); border-radius:50%;background:none;cursor:pointer;place-items:center} .burger span{display:block;width:16px;height:1.5px;background:var(--graphite);position:relative; transition:background .2s ease} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px; height:1.5px;background:var(--graphite);transition:transform .3s var(--ease)} .burger span::before{top:-5px}.burger span::after{top:5px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)} .drawer{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:var(--surface); z-index:70;transform:translateX(100%);transition:transform .5s var(--ease); padding:5rem var(--gutter) 2rem;overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.18)} .drawer[data-open="true"]{transform:none} .drawer a{display:block;padding:1rem 0;border-bottom:1px solid var(--rule); font-family:var(--display);font-size:1.25rem;opacity:0;transform:translateX(20px); transition:opacity .4s var(--ease),transform .4s var(--ease)} .drawer[data-open="true"] a{opacity:1;transform:none} .drawer[data-open="true"] a:nth-child(1){transition-delay:.08s} .drawer[data-open="true"] a:nth-child(2){transition-delay:.13s} .drawer[data-open="true"] a:nth-child(3){transition-delay:.18s} .drawer[data-open="true"] a:nth-child(4){transition-delay:.23s} .drawer[data-open="true"] a:nth-child(5){transition-delay:.28s} .drawer[data-open="true"] a:nth-child(6){transition-delay:.33s} .drawer[data-open="true"] a:nth-child(7){transition-delay:.38s} .drawer[data-open="true"] a:nth-child(8){transition-delay:.43s} .scrim{position:fixed;inset:0;background:rgba(8,8,10,.5);backdrop-filter:blur(3px); z-index:65;opacity:0;pointer-events:none;transition:opacity .4s ease} .scrim.on{opacity:1;pointer-events:auto} @media (max-width:1120px){.nav,.icons{display:none}.burger{display:grid}} /* ============================================================ HERO — WebGL canvas + typographic reveal ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; background:radial-gradient(120% 90% at 70% 10%,#23232C 0%,#0B0B0D 60%); overflow:hidden;isolation:isolate} .hero__canvas{position:absolute;inset:0;z-index:0} .hero__canvas canvas{width:100%!important;height:100%!important;display:block} /* fallback shown until/unless WebGL boots */ .hero__fallback{position:absolute;inset:0;z-index:0; background: repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 9px), radial-gradient(60% 60% at 65% 40%,rgba(0,207,193,.22),transparent 70%), radial-gradient(50% 50% at 30% 70%,rgba(108,92,231,.18),transparent 70%)} .hero.webgl .hero__fallback{opacity:0;transition:opacity .8s ease} .hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode:overlay} .hero__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(to top,var(--paper) 0%,rgba(12,12,16,.35) 48%,transparent 78%)} .hero__inner{position:relative;z-index:3;width:100%;max-width:var(--maxw); margin-inline:auto;padding:0 var(--gutter) clamp(3rem,8vw,6rem);color:#fff} .hero__eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em; text-transform:uppercase;color:var(--cyan);margin:0 0 1.1rem; display:flex;align-items:center;gap:.8rem} .hero__eyebrow::after{content:"";height:1px;flex:0 1 110px; background:linear-gradient(90deg,var(--cyan),transparent); transform-origin:left;animation:none} .hero h1{font-size:clamp(2.6rem,7.5vw,5.5rem);color:#fff;letter-spacing:-.045em; max-width:15ch;margin-bottom:.4em} .hero h1 em{font-style:normal; background:linear-gradient(100deg,var(--cyan),#7BE8DF 40%,var(--violet)); -webkit-background-clip:text;background-clip:text;color:transparent} .hero__lede{max-width:46ch;color:rgba(255,255,255,.76);font-size:clamp(1rem,1.4vw,1.125rem);margin:0} .hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem} /* live slicer readout */ .readout{position:absolute;right:var(--gutter);top:clamp(5rem,12vh,8rem);z-index:3; display:grid;gap:.6rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em; color:rgba(255,255,255,.55);text-align:right; padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.13);border-radius:14px; background:rgba(255,255,255,.035);backdrop-filter:blur(10px)} .readout::before{content:"";position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:scan 3.6s var(--ease-io) infinite;opacity:.8} .readout{overflow:hidden} .readout div{display:flex;justify-content:flex-end;gap:.9rem;align-items:baseline} .readout b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums} @media (max-width:860px){.readout{display:none}} .scrollcue{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);z-index:3; font-family:var(--mono);font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase; color:rgba(255,255,255,.42);display:grid;gap:.6rem;justify-items:center} .scrollcue::after{content:"";width:1px;height:34px; background:linear-gradient(rgba(255,255,255,.5),transparent)} .scrollcue span{animation:float 2.6s var(--ease-io) infinite} @media (max-width:860px){.scrollcue{display:none}} /* ============================================================ LAYER STACK divider (the signature) ============================================================ */ .layers{display:block;width:100%;height:34px; background-image:repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 7px); mask-image:linear-gradient(to bottom,transparent,#000 65%,#000); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 65%,#000)} .layers--dark{background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.15) 0 1px,transparent 1px 7px)} /* ============================================================ BUTTONS ============================================================ */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.9rem 1.75rem;border-radius:999px;border:1px solid transparent;overflow:hidden; font-family:var(--display);font-size:.9375rem;font-weight:500;cursor:pointer;isolation:isolate; transition:transform .3s var(--ease),color .3s ease,border-color .3s ease} .btn span{position:relative;z-index:2} .btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit; transform:translateY(101%);transition:transform .45s var(--ease)} .btn:hover::before{transform:translateY(0)} .btn:active{transform:scale(.97)} .btn--solid{background:var(--cyan);color:var(--on-accent)} .btn--solid::before{background:linear-gradient(100deg,#fff,var(--cyan))} .btn--solid:hover{color:var(--on-accent)} .btn--light{background:var(--surface);color:#0C0C10} .btn--light::before{background:linear-gradient(100deg,var(--cyan),#8FF0E8)} .btn--outline{border-color:rgba(255,255,255,.45);color:#fff} .btn--outline::before{background:#fff} .btn--outline:hover{color:var(--graphite);border-color:#fff} .btn--quiet{border-color:var(--rule);color:var(--graphite)} .btn--quiet::before{background:var(--cyan)} .btn--quiet:hover{color:var(--on-accent);border-color:var(--cyan)} .btn--full{width:100%} .btn--arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8; transition:transform .35s var(--ease)} .btn:hover .btn--arrow svg,.btn--arrow:hover svg{transform:translateX(4px)} /* ============================================================ SECTIONS ============================================================ */ .section{padding-block:clamp(3.5rem,8vw,7rem);position:relative} .section--tight{padding-block:clamp(2.25rem,4vw,3.5rem)} .section--dark{background:var(--surface)} .section--dark h2{color:var(--graphite)} .section__head{display:flex;align-items:flex-end;justify-content:space-between; gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap} .section__head h2{font-size:clamp(1.8rem,4vw,3rem);margin:0} .section__head .spec{margin:0 0 .5rem} .section__link{font-size:.875rem;position:relative;padding-bottom:3px} .section__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:currentColor;transform:scaleX(.25);transform-origin:left; transition:transform .4s var(--ease)} .section__link:hover::after{transform:scaleX(1)} /* ============================================================ CATEGORY RAIL — 3D tilt cards ============================================================ */ .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:1rem; overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem; scrollbar-width:thin;perspective:1000px} .rail>*{scroll-snap-align:start} .cat{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--graphite-2); aspect-ratio:4/5;display:flex;align-items:flex-end;transform-style:preserve-3d; transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .cat:hover{box-shadow:0 30px 60px -25px rgba(11,11,13,.5)} .cat img,.cat .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease)} .cat:hover img,.cat:hover .ph{transform:scale(1.09)} .cat::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(8,8,10,.85),transparent 60%); transition:opacity .4s ease} .cat span{position:relative;z-index:2;padding:1.15rem;color:#fff; font-family:var(--display);font-size:.9375rem;font-weight:500; transform:translateZ(30px);display:flex;align-items:center;gap:.5rem;width:100%} .cat span::after{content:"→";margin-left:auto;opacity:0;transform:translateX(-6px); transition:opacity .35s var(--ease),transform .35s var(--ease)} .cat:hover span::after{opacity:1;transform:none} @media (min-width:900px){.rail{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible}} /* ============================================================ PRODUCT GRID — deliberately calmer than the rest of the page ============================================================ */ .grid{display:grid;gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))} .card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s ease} .card:hover{transform:translateY(-5px);border-color:#3A3A46; box-shadow:0 22px 48px -20px rgba(0,0,0,.65)} .card__media{position:relative;aspect-ratio:1;background:var(--surface-2);overflow:hidden} .card__media img,.card__media .ph{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)} .card:hover .card__media img{transform:scale(1.06)} .card__media::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); transform:translateX(-120%);transition:transform .9s var(--ease)} .card:hover .card__media::after{transform:translateX(120%)} .tag{position:absolute;top:.75rem;left:.75rem;z-index:2;font-family:var(--mono); font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .6rem; border-radius:6px;background:color-mix(in srgb, var(--bg) 86%, transparent);color:var(--ink); backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14)} .tag--sale{background:var(--cyan);color:var(--on-accent);border-color:transparent} .tag--low{background:var(--amber);color:var(--on-accent);border-color:transparent} .wish{position:absolute;top:.65rem;right:.65rem;z-index:2;width:36px;height:36px; border-radius:50%;background:rgba(12,12,16,.78);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);border:0;display:grid;place-items:center; cursor:pointer;opacity:0;transform:translateY(-6px) scale(.9); transition:opacity .3s var(--ease),transform .3s var(--ease)} .card:hover .wish,.wish:focus-visible{opacity:1;transform:none} .wish svg{width:16px;height:16px;stroke:#fff;stroke-width:1.7;fill:none; transition:transform .3s var(--ease)} .wish:active svg{transform:scale(1.35)} .wish[aria-pressed="true"] svg{fill:var(--cyan);stroke:var(--cyan)} .wish-form{margin:0} .card__body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .card__specs{display:flex;gap:.4rem;flex-wrap:wrap} .card__specs span{font-family:var(--mono);font-size:.625rem;letter-spacing:.07em; text-transform:uppercase;color:var(--muted);border:1px solid var(--rule); border-radius:5px;padding:.16rem .42rem} .card__name{font-family:var(--display);font-size:.9375rem;font-weight:500;line-height:1.3;margin:0} .card__name a{background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/0 1px no-repeat; transition:background-size .4s var(--ease);padding-bottom:1px} .card:hover .card__name a{background-size:100% 1px} .card__price{display:flex;align-items:baseline;gap:.5rem;margin-top:auto; font-family:var(--mono);font-size:.9375rem} .card__price del{color:var(--muted);font-size:.8125rem} .card__price ins{text-decoration:none} .card__off{color:var(--cyan);font-size:.75rem} .swatches{display:flex;gap:.4rem} .swatches i{width:15px;height:15px;border-radius:50%;display:block;cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:transform .25s var(--ease)} .swatches i:hover{transform:scale(1.25)} /* ============================================================ SPLIT / CUSTOM PRINTING ============================================================ */ .split{background:var(--graphite-2);color:var(--graphite);border-radius:var(--r-lg);overflow:hidden; display:grid;grid-template-columns:1fr;position:relative;isolation:isolate} .split::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5; background:radial-gradient(70% 90% at 85% 20%,rgba(0,207,193,.3),transparent 65%), radial-gradient(60% 70% at 10% 90%,rgba(108,92,231,.28),transparent 65%)} @media (min-width:880px){.split{grid-template-columns:1.05fr .95fr}} .split__text{padding:clamp(2rem,5vw,4rem);position:relative;z-index:1} .split__text h2{color:var(--graphite);font-size:clamp(1.8rem,3.4vw,2.75rem)} .split__text p{color:var(--muted);max-width:42ch} .steps{list-style:none;padding:0;margin:2rem 0} .steps li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline; padding:.95rem 0;border-top:1px solid var(--rule);position:relative} .steps li:last-child{border-bottom:1px solid var(--rule)} .steps li::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%; background:var(--cyan);transform:scaleX(0);transform-origin:left; transition:transform .6s var(--ease);transition-delay:var(--d,0ms)} .steps.in li::before{transform:scaleX(1)} .steps b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;color:var(--cyan)} .steps span{font-size:.9375rem;color:var(--graphite)} .split__media{position:relative;min-height:300px;z-index:1} .split__media img,.split__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ============================================================ STATS / COUNTERS ============================================================ */ .stats-row{display:grid;gap:1px;background:var(--rule); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-block:1px solid var(--rule)} .stats-row div{background:var(--surface);padding:1.75rem 1.25rem;text-align:center} .stats-row b{display:block;font-family:var(--display);font-size:clamp(1.8rem,4vw,2.75rem); font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,var(--graphite),var(--muted)); -webkit-background-clip:text;background-clip:text;color:transparent} .stats-row span{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} /* ============================================================ TRUST ============================================================ */ .trust{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule); border-radius:var(--r-lg);overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .trust div{background:var(--surface);padding:1.6rem 1.35rem;position:relative; transition:background .35s ease} .trust div:hover{background:var(--surface-2)} .trust div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--cyan);transform:scaleY(0);transform-origin:bottom; transition:transform .45s var(--ease)} .trust div:hover::before{transform:scaleY(1);transform-origin:top} .trust h3{font-size:.9375rem;margin:0 0 .35rem} .trust p{margin:0;font-size:.8125rem;color:var(--muted)} /* ============================================================ FAQ ============================================================ */ .faq{border-top:1px solid var(--rule)} .faq:last-of-type{border-bottom:1px solid var(--rule)} .faq summary{cursor:pointer;list-style:none;padding:1.15rem 0;font-family:var(--display); font-size:1.0625rem;display:flex;justify-content:space-between;align-items:center;gap:1rem; transition:color .25s ease} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--cyan-dim)} .faq summary::after{content:"";width:11px;height:11px;flex:none; background:linear-gradient(var(--muted),var(--muted)) 50% 50%/100% 1.5px no-repeat, linear-gradient(var(--muted),var(--muted)) 50% 50%/1.5px 100% no-repeat; transition:transform .35s var(--ease)} .faq[open] summary::after{transform:rotate(135deg)} .faq>div{padding-bottom:1.25rem;color:var(--muted);font-size:.9375rem;max-width:62ch; animation:fadeDown .45s var(--ease)} @keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* ============================================================ NEWSLETTER ============================================================ */ .signup{display:grid;gap:1.75rem;align-items:center;grid-template-columns:1fr; padding:clamp(2rem,5vw,3.5rem);background:var(--surface);border:1px solid var(--rule); border-radius:var(--r-lg);position:relative;overflow:hidden} .signup::after{content:"";position:absolute;right:-10%;top:-40%;width:45%;aspect-ratio:1; border-radius:50%;background:radial-gradient(circle,rgba(0,207,193,.16),transparent 70%); animation:float 7s var(--ease-io) infinite} @media (min-width:820px){.signup{grid-template-columns:1.1fr 1fr}} .signup>*{position:relative;z-index:1} .signup h2{font-size:clamp(1.5rem,2.8vw,2.25rem);margin:0 0 .45rem} .signup p{margin:0;color:var(--muted);font-size:.9375rem} .signup__form{display:flex;gap:.5rem} .signup__form input{flex:1;min-width:0;padding:.9rem 1.15rem;border:1px solid var(--rule); border-radius:999px;font:inherit;background:var(--paper);color:var(--graphite);transition:border-color .3s ease,background .3s ease} .signup__form input:focus{border-color:var(--cyan);background:var(--surface);color:var(--graphite);outline:none} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--surface);color:var(--graphite);margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--rule); position:relative;overflow:hidden} .footer::before{content:"";position:absolute;inset:0;opacity:.35; background:radial-gradient(70% 60% at 15% 0%,rgba(0,207,193,.25),transparent 70%)} .footer>*{position:relative;z-index:1} .footer__grid{display:grid;gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem); grid-template-columns:repeat(auto-fit,minmax(165px,1fr))} .footer h3{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em; text-transform:uppercase;color:var(--cyan);margin:0 0 1.1rem} .footer a{display:block;padding:.32rem 0;font-size:.9375rem;color:var(--muted); width:fit-content;transition:color .25s ease,transform .3s var(--ease)} .footer a:hover{color:var(--graphite);transform:translateX(4px)} .footer__brand p{color:var(--muted);font-size:.875rem;max-width:30ch} .social{display:flex;gap:.65rem;margin-top:1.25rem} .social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%; display:grid;place-items:center;padding:0;transition:border-color .3s ease,background .3s ease,transform .3s var(--ease)} .social a:hover{border-color:var(--cyan);background:rgba(0,207,193,.12);transform:translateY(-3px)} .social svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} .footer__bar{border-top:1px solid var(--rule);padding-block:1.2rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--muted)} /* ============================================================ FORMS / AUTH / FLASH / ERRORS ============================================================ */ .flash{padding:.85rem 1.15rem;border-radius:var(--r);font-size:.9375rem;margin-top:1rem; animation:fadeDown .5s var(--ease)} .flash--ok{background:rgba(0,229,212,.12);color:#6FF0E2;border:1px solid rgba(0,229,212,.3)} .flash--err{background:rgba(229,72,77,.12);color:#FF9B9E;border:1px solid rgba(229,72,77,.32)} .auth{max-width:440px;margin-inline:auto;padding-block:clamp(3rem,8vw,5rem)} .auth h1{font-size:2.25rem} .auth__sub{color:var(--muted);margin:0 0 1.75rem} .form{display:grid;gap:.3rem} .form label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);margin-top:1.1rem} .form input{padding:.9rem 1.05rem;border:1px solid var(--rule);border-radius:var(--r); background:var(--surface);color:var(--graphite);font:inherit;width:100%;transition:border-color .3s ease,box-shadow .3s ease} .form input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 4px rgba(0,229,212,.16)} .form .btn{margin-top:1.6rem} .err{color:#FF9B9E;font-size:.8125rem;margin:.35rem 0 0} .auth__alt{margin-top:1.5rem;font-size:.875rem;color:var(--muted);text-align:center} .errpage{max-width:540px;margin-inline:auto;text-align:center;padding-block:clamp(4rem,12vw,7rem)} .errpage__code{font-family:var(--mono);font-size:.75rem;letter-spacing:.22em; color:var(--cyan-dim);margin:0 0 1rem} .errpage h1{font-size:clamp(1.8rem,4.5vw,2.75rem)} .errpage__ref{font-family:var(--mono);font-size:.6875rem;color:var(--muted);margin-top:1.5rem} .errpage__debug{text-align:left;background:var(--surface-2);color:var(--graphite);padding:1.15rem; border-radius:var(--r);overflow:auto;font-family:var(--mono);font-size:.72rem;margin-top:2rem} /* ============================================================ PAGE LOAD CURTAIN ============================================================ */ .curtain{position:fixed;inset:0;z-index:200;background:var(--paper); display:grid;place-items:center;transition:transform .9s var(--ease) .2s} .curtain.done{transform:translateY(-100%)} .curtain b{font-family:var(--display);font-weight:700;color:var(--graphite);font-size:1.5rem; letter-spacing:-.04em} .curtain b em{font-style:normal;color:var(--cyan)} .curtain .bar{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--cyan); transition:width .6s var(--ease)} @media (prefers-reduced-motion:reduce){.curtain{display:none}} /* ---- placeholders (preview only) ---- */ .ph{position:absolute;inset:0;display:grid;place-items:center; background:repeating-linear-gradient(to bottom,rgba(0,0,0,.045) 0 1px,transparent 1px 9px), linear-gradient(145deg,var(--p1,#2A2A31),var(--p2,#4A4A55))} .ph b{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.45);font-weight:400} .card__media .ph{--p1:#1E1E26;--p2:#2A2A34} .card__media .ph b{color:rgba(255,255,255,.3)} /* ============================================================ SHOP + PRODUCT PAGES (Phase 3) ============================================================ */ .wrap--narrow{max-width:840px} .lede{color:var(--muted);max-width:60ch} .crumbs{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--muted); margin-bottom:1.5rem;display:flex;gap:.5rem;flex-wrap:wrap} .crumbs b{color:var(--graphite);font-weight:500} .shop{display:grid;gap:2rem;grid-template-columns:1fr} @media (min-width:960px){.shop{grid-template-columns:230px 1fr}} .sortbar select{padding:.6rem 2rem .6rem .9rem;border:1px solid var(--rule);border-radius:999px; font:inherit;font-size:.875rem;background:var(--surface);color:var(--graphite);cursor:pointer} .filters-toggle{display:none;width:100%} .filters-form{display:grid;gap:1.5rem;align-content:start} .filters-form fieldset{border:0;padding:0;margin:0;display:grid;gap:.4rem} .filters-form legend{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:.5rem} .filter-link{font-size:.875rem;color:var(--muted);padding:.2rem 0} .filter-link:hover,.filter-link.on{color:var(--cyan)} .filter-link.on{font-weight:500} .filter-clear{font-size:.8125rem;color:var(--muted);text-align:center;display:block;margin-top:.5rem} .price-row{display:flex;align-items:center;gap:.5rem} .price-row input{width:100%;min-width:0;padding:.55rem .7rem;border:1px solid var(--rule); border-radius:8px;font:inherit;font-size:.875rem;background:var(--surface);color:var(--graphite)} .check{display:flex;align-items:center;gap:.55rem;font-size:.875rem;cursor:pointer} .check input{accent-color:var(--cyan)} @media (max-width:959px){ .filters-toggle{display:inline-flex} .filters-form{display:none;margin-top:1rem} .filters-panel.is-open .filters-form{display:grid} } .pager{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2.5rem; font-family:var(--mono);font-size:.75rem;letter-spacing:.06em} .pager a{border-bottom:1px solid var(--rule);padding-bottom:2px} .pager a:hover{border-color:var(--cyan)} .empty-state{text-align:center;padding:4rem 1rem;border:1px dashed var(--rule); border-radius:var(--r-lg);background:var(--surface)} .empty-state h3{font-size:1.25rem} .empty-state p{color:var(--muted);margin-bottom:1.5rem} /* ---- product detail ---- */ .pdp{display:grid;gap:2.5rem;grid-template-columns:1fr} @media (min-width:900px){.pdp{grid-template-columns:1.1fr .9fr;gap:3.5rem}} .pdp__main{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden; background:var(--surface-2);border:1px solid var(--rule)} .pdp__main img{width:100%;height:100%;object-fit:cover} .pdp__thumbs{display:flex;gap:.6rem;margin-top:.75rem;overflow-x:auto;padding-bottom:.25rem} .pdp__thumb{flex:none;width:74px;height:74px;border-radius:10px;overflow:hidden;padding:0; border:1px solid var(--rule);background:none;cursor:pointer;transition:border-color .25s ease} .pdp__thumb.on,.pdp__thumb:hover{border-color:var(--cyan)} .pdp__thumb img{width:100%;height:100%;object-fit:cover} .pdp__buy h1{font-size:clamp(1.6rem,3.4vw,2.4rem)} .pdp__rating{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;color:var(--muted);margin:0 0 1rem} .stars i{font-style:normal;color:var(--rule)} .stars i.on{color:var(--amber)} .pdp__price{display:flex;align-items:baseline;gap:.65rem;font-family:var(--mono); font-size:1.5rem;margin:.5rem 0} .pdp__price del{font-size:1rem;color:var(--muted)} .pdp__price ins{text-decoration:none} .pdp__price small{font-size:.6875rem;color:var(--muted);letter-spacing:.06em} .pdp__lede{color:var(--muted)} .pdp__lead{background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--cyan); border-radius:10px;padding:.8rem 1rem;font-size:.875rem;margin:1.25rem 0} .pdp__low{font-family:var(--mono);font-size:.75rem;color:var(--amber);letter-spacing:.06em} .pdp__variants{margin:1.5rem 0} .swatch-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem} .swatch-opt{display:grid;justify-items:center;gap:.4rem;cursor:pointer;font-size:.6875rem; font-family:var(--mono);color:var(--muted)} .swatch-opt input{position:absolute;opacity:0;width:0;height:0} .swatch-opt span{width:34px;height:34px;border-radius:50%;display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:transform .25s var(--ease),box-shadow .25s ease} .swatch-opt:hover span{transform:scale(1.08)} .swatch-opt input:checked + span{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--cyan)} .swatch-opt.is-out{opacity:.4;cursor:not-allowed} .swatch-opt.is-out span{position:relative} .swatch-opt.is-out span::after{content:"";position:absolute;inset:0;border-radius:50%; background:linear-gradient(45deg,transparent 46%,var(--paper) 46%,var(--paper) 54%,transparent 54%)} .pdp__actions{display:grid;gap:.7rem;margin:1.5rem 0} .qty{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px; overflow:hidden;width:fit-content;background:var(--surface)} .qty button{width:40px;height:44px;border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--muted)} .qty button:hover{color:var(--graphite);background:rgba(255,255,255,.06)} .qty input{width:52px;height:44px;border:0;text-align:center;font:inherit;color:var(--graphite); font-family:var(--mono);background:none;-moz-appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .pdp__oos{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.25rem; background:var(--surface);margin:1.5rem 0} .pdp__oos p{margin:0 0 .9rem;font-size:.9375rem} .wish-inline{margin:.5rem 0 1.5rem} .linkish{background:none;border:0;padding:0;cursor:pointer;font-size:.875rem;color:var(--muted); border-bottom:1px solid var(--rule)} .linkish:hover{color:var(--cyan);border-color:var(--cyan)} .pincode{border-top:1px solid var(--rule);padding-top:1.25rem;margin-top:.5rem} .pincode label{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.5rem} .pincode__row{display:flex;gap:.5rem} .pincode__row input{flex:1;min-width:0;padding:.7rem .9rem;border:1px solid var(--rule); border-radius:999px;font:inherit;font-family:var(--mono); background:var(--surface);color:var(--graphite)} .pincode__out{font-size:.8125rem;margin:.6rem 0 0;min-height:1.2em} .pincode__out.ok{color:var(--cyan)} .pincode__out.bad{color:#FF9B9E} .pdp__specs{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--rule)} .pdp__specs li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0; border-bottom:1px solid var(--rule);font-size:.875rem} .pdp__specs span{color:var(--muted)} .pdp__specs b{font-family:var(--mono);font-weight:500} .tabs__bar{display:flex;gap:.25rem;border-bottom:1px solid var(--rule);margin-bottom:1.5rem; overflow-x:auto} .tabs__bar button{background:none;border:0;padding:.8rem 1.1rem;cursor:pointer;font-size:.9375rem; color:var(--muted);position:relative;white-space:nowrap} .tabs__bar button[aria-selected="true"]{color:var(--graphite)} .tabs__bar button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px; height:2px;background:var(--cyan)} .tabs__panel{display:none} .tabs__panel.is-on{display:block;animation:fadeDown .4s var(--ease)} .review{border-top:1px solid var(--rule);padding:1.5rem 0} .review__head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem} .review__head b{font-size:.875rem;font-weight:500} .verified{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase; color:var(--cyan);border:1px solid currentColor;border-radius:4px;padding:.1rem .35rem} .review h3{font-size:1rem;margin:.25rem 0} .review p{color:var(--muted);font-size:.9375rem;margin:0} .sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none; align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--gutter); background:rgba(21,21,27,.96);backdrop-filter:blur(10px);border-top:1px solid var(--rule)} .sticky-buy b{display:block;font-family:var(--mono)} .sticky-buy span{display:block;font-size:.75rem;color:var(--muted); max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sticky-buy.on{display:flex} @media (min-width:900px){.sticky-buy{display:none!important}} /* ============================================================ FLOATING BOTTOM NAV Mobile and tablet only — the desktop header already carries the full menu, and a second nav there would just be clutter. ============================================================ */ .bnav{ position:fixed;left:50%;transform:translateX(-50%); /* env() keeps it clear of the iPhone home indicator */ bottom:calc(.6rem + env(safe-area-inset-bottom,0px)); z-index:58;width:min(calc(100vw - 1.2rem),460px); background:rgba(18,18,22,.9); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border:1px solid rgba(255,255,255,.1);border-radius:999px; box-shadow:0 10px 34px -8px rgba(0,0,0,.55); } .bnav ul{display:flex;list-style:none;margin:0;padding:.35rem .3rem} .bnav li{flex:1;min-width:0} .bnav a{ display:grid;justify-items:center;gap:.18rem; padding:.45rem .1rem;border-radius:999px;color:rgba(255,255,255,.56); min-height:44px; /* thumb target floor */ transition:color .22s ease,background .22s ease; } .bnav a:hover{text-decoration:none;color:#fff} .bnav a.on{color:#fff} .bnav__icon{position:relative;display:grid;place-items:center;width:24px;height:24px} .bnav__icon svg{width:21px;height:21px} .bnav a.on .bnav__icon::after{ content:"";position:absolute;inset:-7px -9px;border-radius:999px; background:rgba(0,207,193,.16);z-index:-1; } .bnav a.on svg{color:var(--cyan)} .bnav__label{ font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } @media (min-width:1024px){ .bnav{display:none} } /* very small phones: drop the labels rather than crushing them */ @media (max-width:340px){ .bnav__label{display:none} .bnav a{min-height:46px} } /* keep the nav from covering the footer or the sticky buy bar */ @media (max-width:1023px){ body{padding-bottom:4.6rem} .sticky-buy{bottom:calc(4.4rem + env(safe-area-inset-bottom,0px)); border-radius:14px;left:.6rem;right:.6rem;border:1px solid var(--rule)} } /* ============================================================ SPIN WHEEL ============================================================ */ .wheel-wrap{display:grid;justify-items:center;gap:1.5rem;margin:2rem 0} .wheel-stage{position:relative;width:min(88vw,380px);aspect-ratio:1} .wheel{ position:absolute;inset:0;border-radius:50%;overflow:hidden; border:6px solid var(--graphite); box-shadow:0 18px 50px -18px rgba(11,11,13,.6),inset 0 0 0 2px rgba(255,255,255,.08); transition:transform 4.6s cubic-bezier(.15,.9,.2,1); will-change:transform; } .wheel svg{width:100%;height:100%;display:block} .wheel-pointer{ position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:3; width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent; border-top:24px solid var(--cyan); filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); } .wheel-hub{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2; width:31%;aspect-ratio:1;border-radius:50%;cursor:pointer; border:4px solid var(--paper);background:var(--graphite);color:#fff; font-family:var(--display);font-weight:700;letter-spacing:.06em; font-size:clamp(.8rem,2.6vw,1rem); box-shadow:0 6px 20px rgba(0,0,0,.4); transition:transform .25s var(--ease),background .25s ease; } .wheel-hub:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.06);background:#000} .wheel-hub:disabled{opacity:.5;cursor:not-allowed} .wheel-hub.is-spinning{animation:spin 1s linear infinite} .wheel-status{font-size:.875rem;color:var(--muted);text-align:center;margin:0;min-height:1.4em} .wheel-result{ text-align:center;display:grid;gap:.9rem;justify-items:center; padding:1.5rem;border:1px solid var(--rule);border-radius:var(--r-lg); background:var(--surface);width:100%;animation:fadeDown .5s var(--ease); } .wheel-result__label{font-family:var(--display);font-size:clamp(1.3rem,4vw,1.9rem); font-weight:600;margin:0} .wheel-code{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center} .wheel-code code{ font-family:var(--mono);font-size:1.05rem;letter-spacing:.12em; background:var(--paper);border:1px dashed var(--rule);border-radius:9px; padding:.6rem 1rem; } .wheel-expiry{font-family:var(--mono);font-size:.6875rem;color:var(--muted);margin:0} .panel-lite{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.25rem; background:var(--surface);margin:1.5rem 0} .panel-lite h2{font-size:1.05rem;margin-bottom:.75rem} .codelist{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .codelist li{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap; padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.875rem} .codelist li:last-child{border-bottom:0} .codelist code{font-family:var(--mono);background:var(--paper);padding:.2rem .5rem;border-radius:6px} .codelist small{color:var(--muted);margin-left:auto;font-size:.75rem} .fineprint{font-size:.75rem;color:var(--muted);text-align:center;margin-top:2rem;max-width:52ch; margin-inline:auto} /* ============================================================ RANKS ============================================================ */ .section__sub{font-size:clamp(1.2rem,2.6vw,1.6rem);margin:2.5rem 0 1.25rem} .rankcard{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem; background:var(--surface);margin:1.5rem 0} .rankcard__top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start; flex-wrap:wrap} .rankcard__top h2{font-size:clamp(1.5rem,4vw,2.1rem);margin:0} .rankcard__pts{text-align:right} .rankcard__pts b{display:block;font-family:var(--display);font-size:1.8rem; font-variant-numeric:tabular-nums} .rankcard__pts span{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted)} .rankprog{margin:1.25rem 0} .rankprog__bar{height:7px;background:var(--paper);border:1px solid var(--rule); border-radius:99px;overflow:hidden} .rankprog__bar i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.1s var(--ease)} .rankprog p{font-size:.8125rem;color:var(--muted);margin:.6rem 0 0} .rankprog__max{font-size:.875rem;color:var(--cyan-dim)} .rankform{display:grid;gap:.8rem;padding-top:1.15rem;border-top:1px solid var(--rule); margin-top:1.25rem} .rankform label{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);display:grid;gap:.35rem} .rankform input[type=text],.rankform input:not([type]){padding:.7rem .9rem; border:1px solid var(--rule);border-radius:9px;font:inherit;font-family:var(--body)} .rankform .check{grid-auto-flow:column;justify-content:start;align-items:center; font-family:var(--body);font-size:.875rem;letter-spacing:0;text-transform:none; color:var(--graphite)} .rankform button{justify-self:start} .tiergrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))} .tier{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.15rem; background:var(--surface);position:relative;transition:transform .3s var(--ease)} .tier:hover{transform:translateY(-3px)} .tier--mine{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,207,193,.12)} .tier__dot{width:12px;height:12px;border-radius:50%;display:block;margin-bottom:.7rem} .tier h3{font-size:1.05rem;margin:0 0 .25rem} .tier__spend{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em; color:var(--muted);margin:0 0 .6rem} .tier__perks{font-size:.8125rem;color:var(--muted);margin:0} .board{list-style:none;padding:0;margin:0;counter-reset:rank} .board li{display:flex;align-items:center;gap:.85rem;padding:.75rem 0; border-bottom:1px solid var(--rule);font-size:.9375rem} .board li:last-child{border-bottom:0} .board__rank{font-family:var(--mono);font-size:.75rem;color:var(--muted);width:1.6rem;flex:none} .board li:nth-child(1) .board__rank{color:#D4A82C} .board li:nth-child(2) .board__rank{color:#9AA3AD} .board li:nth-child(3) .board__rank{color:#A87244} .board__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .board__tier{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em; text-transform:uppercase;white-space:nowrap} .board__pts{margin-left:auto;font-family:var(--mono);font-size:.8125rem;flex:none} /* ============================================================ RESPONSIVE PASS — 320 / 375 / 390 / 430 / tablet / desktop / wide ============================================================ */ /* nothing may exceed the viewport */ img,svg,video,canvas,table,pre{max-width:100%} .tablewrap{-webkit-overflow-scrolling:touch} /* 320–380: the tightest real phones */ @media (max-width:380px){ :root{--gutter:1rem} .hero h1{font-size:clamp(1.9rem,9vw,2.4rem)} .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{width:100%} .grid{grid-template-columns:1fr} .section__head{flex-direction:column;align-items:flex-start;gap:.75rem} .pdp__price{font-size:1.25rem;flex-wrap:wrap} .wheel-stage{width:min(92vw,320px)} .signup__form{flex-direction:column} .signup__form .btn{width:100%} .footer__grid{gap:1.75rem} } /* 381–600: standard phones */ @media (min-width:381px) and (max-width:600px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem} .card__body{padding:.75rem .8rem .9rem} .card__name{font-size:.875rem} .card__price{font-size:.875rem} .card__specs{display:none} /* too dense at this width */ } /* tablets */ @media (min-width:601px) and (max-width:1023px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .pdp{grid-template-columns:1fr;max-width:640px;margin-inline:auto} .trust{grid-template-columns:repeat(2,1fr)} } /* landscape phones: the hero must not eat the whole screen */ @media (max-height:520px) and (orientation:landscape){ .hero{min-height:520px} .scrollcue{display:none} .bnav{width:min(calc(100vw - 2rem),420px)} } /* wide desktop: cap the line length rather than stretching forever */ @media (min-width:1600px){ :root{--maxw:1400px} .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} } /* pointer-coarse devices: no hover-only affordances */ @media (hover:none){ .wish{opacity:1;transform:none} .card:hover{transform:none} .cat:hover img,.cat:hover .ph{transform:none} } /* print: the invoice and order pages should be printable */ @media print{ .header,.bnav,.announce,.footer,.sticky-buy,.curtain,.hero__canvas{display:none!important} body{background:var(--surface);color:#000;padding-bottom:0} .section{padding-block:1rem} a[href]::after{content:" (" attr(href) ")";font-size:.7em;color:#555} } /* ============================================================ MOBILE TAB BAR A floating pill above the content. Hidden from 900px up, where the header navigation is already fully visible. ============================================================ */ .tabbar{ position:fixed; left:50%; transform:translateX(-50%) translateY(0); bottom:calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index:58; width:min(calc(100vw - 1.5rem), 460px); background:rgba(18,18,22,.86); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border:1px solid rgba(255,255,255,.1); border-radius:26px; box-shadow:0 12px 34px -10px rgba(0,0,0,.55); transition:transform .38s var(--ease), opacity .28s ease; } .tabbar.is-hidden{transform:translateX(-50%) translateY(160%);opacity:0;pointer-events:none} .tabbar ul{display:flex;list-style:none;margin:0;padding:.45rem .3rem} .tabbar li{flex:1 1 0;min-width:0} .tabbar a{ display:grid;justify-items:center;gap:.18rem; padding:.4rem .15rem;border-radius:16px; color:rgba(255,255,255,.56); transition:color .22s ease, background .22s ease; /* comfortable target on the smallest phones without overflowing */ min-height:46px; } .tabbar a:hover{text-decoration:none} .tabbar a.on{color:#fff} .tabbar a:active{background:rgba(255,255,255,.08)} .tabbar__icon{position:relative;display:grid;place-items:center;line-height:0} .tabbar a.on .tabbar__icon svg{stroke:var(--cyan)} .tabbar__label{ font-family:var(--mono); font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase; line-height:1;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:100%; } /* the active pip, echoing the layer-line accent used site-wide */ .tabbar a.on::after{ content:"";position:absolute;top:.15rem;width:16px;height:2px;border-radius:2px; background:var(--cyan);box-shadow:0 0 8px var(--cyan); } .tabbar li{position:relative} .tabbar__badge{ position:absolute;top:-5px;right:-9px; min-width:16px;height:16px;padding:0 4px;border-radius:8px; background:var(--cyan);color:var(--graphite); font-family:var(--mono);font-size:.5625rem;font-weight:500; display:grid;place-items:center; } /* keep the footer clear of the bar, and stack the buy bar above it */ @media (max-width:899px){ body{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom, 0px))} .sticky-buy{bottom:calc(4.75rem + env(safe-area-inset-bottom, 0px)); border-radius:16px;left:.75rem;right:.75rem;border:1px solid var(--rule)} } @media (min-width:900px){.tabbar{display:none}} @media (prefers-reduced-motion:reduce){.tabbar{transition:none}} /* very small phones: drop the labels rather than let them wrap */ @media (max-width:339px){ .tabbar__label{display:none} .tabbar a{min-height:42px} } /* ============================================================ RESPONSIVE PASS — storefront Targets checked: 320, 360, 375, 390, 430, 768, 1024, 1440, 1920. ============================================================ */ /* Global guard: a single wide child should scroll inside its own box rather than pushing the whole page sideways. */ img,svg,video,table,pre{max-width:100%} /* Form controls inherit the UA's light defaults otherwise, which produces black text on a dark field the moment a rule sets only a background. */ input,select,textarea,button{color:inherit;font:inherit} input::placeholder,textarea::placeholder{color:var(--muted);opacity:1} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* tablet */ @media (max-width:900px){ .pdp{gap:2rem} .split__text{padding:1.75rem} .steps li{grid-template-columns:auto 1fr;gap:.75rem} .stats-row{grid-template-columns:repeat(2,1fr)} .footer__grid{gap:1.75rem} } /* phones */ @media (max-width:520px){ .section{padding-block:2.5rem} .section__head{margin-bottom:1.5rem;gap:1rem} .section__head h2{font-size:clamp(1.4rem,1.1rem + 2vw,1.9rem)} /* two products per row still beats one giant card */ .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem} .card__body{padding:.7rem .75rem .85rem;gap:.4rem} .card__name{font-size:.8125rem} .card__price{font-size:.8125rem} .card__specs span{font-size:.5625rem;padding:.12rem .3rem} .card__specs span:nth-child(n+3){display:none} /* keep specs to one line */ .wish{opacity:1;transform:none} /* no hover on touch */ .rail{grid-auto-columns:minmax(140px,1fr);gap:.7rem} .hero{min-height:88svh} .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{width:100%} .readout{display:none} .trust{grid-template-columns:1fr} .signup{padding:1.35rem} .signup__form{flex-direction:column} .signup__form .btn{width:100%} .pdp__thumbs{gap:.45rem} .pdp__thumb{width:60px;height:60px} .pdp__price{font-size:1.25rem} .pdp__specs li{font-size:.8125rem} .footer__grid{grid-template-columns:repeat(2,1fr)} .footer__bar{flex-direction:column;gap:.4rem;text-align:center;align-items:center} .sortbar{width:100%} .sortbar select{width:100%} } /* small phones */ @media (max-width:380px){ .grid{grid-template-columns:1fr;gap:.9rem} .card__specs span:nth-child(n+2){display:none} .footer__grid{grid-template-columns:1fr} .stats-row{grid-template-columns:1fr} .crumbs{font-size:.625rem} } /* landscape phones: a 100svh hero leaves no room for anything else */ @media (max-height:520px) and (orientation:landscape){ .hero{min-height:auto;padding-block:4rem} .scrollcue{display:none} .tabbar{bottom:.4rem} } /* large desktop: stop the measure from getting uncomfortably wide */ @media (min-width:1600px){ :root{--maxw:1420px} .hero__inner{max-width:1420px} } /* coarse pointers: hover effects that never fire just cost paint time */ @media (hover:none){ .card:hover{transform:none;box-shadow:none} .card__media::after{display:none} .cat:hover img,.cat:hover .ph{transform:none} .btn:hover{transform:none} } /* print: nobody wants the nav and the hero on paper */ @media print{ .header,.tabbar,.announce,.footer,.sticky-buy,.hero__canvas,.scrollcue{display:none!important} body{padding-bottom:0;background:#fff} .section{padding-block:1rem} a[href]::after{content:" (" attr(href) ")";font-size:.75em;color:#666} } /* ============================================================ CART + CHECKOUT (Phase 4) ============================================================ */ .cartgrid{display:grid;gap:2rem;grid-template-columns:1fr} @media (min-width:900px){.cartgrid{grid-template-columns:1fr 340px;gap:2.5rem;align-items:start}} .cartlines{display:grid;gap:0} .cartline{display:grid;grid-template-columns:auto 1fr auto;gap:1rem; padding:1.25rem 0;border-bottom:1px solid var(--rule);align-items:start} .cartline__img{width:92px;height:92px;border-radius:12px;overflow:hidden; background:var(--surface-2);flex:none;position:relative;display:block} .cartline__img img{width:100%;height:100%;object-fit:cover} .cartline__body h3{font-size:.9375rem;margin:0 0 .3rem} .cartline__variant{display:flex;align-items:center;gap:.35rem;font-size:.8125rem; color:var(--muted);margin:0 0 .2rem} .cartline__sku{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em; color:var(--muted);margin:0 0 .6rem} .cartline__warn{font-family:var(--mono);font-size:.6875rem;color:var(--amber);margin:0 0 .5rem} .cartline__controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .cartline__price{text-align:right;display:grid;gap:.15rem;font-family:var(--mono)} .cartline__price b{font-size:.9375rem;font-weight:500} .cartline__price del{font-size:.75rem;color:var(--muted)} .cartline__price small{font-size:.6875rem;color:var(--muted)} .qty--sm button{width:32px;height:36px} .qty--sm input{width:42px;height:36px;font-size:.875rem} .ship-nudge{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r); padding:.85rem 1rem;margin-bottom:1.5rem} .ship-nudge p{margin:0 0 .6rem;font-size:.875rem} .ship-nudge__track{height:5px;background:var(--rule);border-radius:3px;overflow:hidden} .ship-nudge__fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:3px;transition:width .6s var(--ease)} .ship-won{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--cyan); margin-bottom:1.5rem} .summary{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg); padding:1.35rem;position:sticky;top:88px} .summary h3{font-size:1.0625rem;margin-bottom:1rem} .summary__tier{font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em; color:var(--cyan);background:rgba(0,229,212,.1);border-radius:8px; padding:.5rem .7rem;margin:0 0 1rem} .summary__lines{margin:0 0 .9rem;display:grid;gap:.5rem} .summary__lines>div{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem} .summary__lines dt,.summary__lines dd{margin:0} .summary__lines dd{font-family:var(--mono)} .summary__lines .is-discount{color:var(--cyan)} .summary__lines .summary__note{font-size:.75rem;color:var(--muted)} .summary__total{display:flex;justify-content:space-between;align-items:baseline; border-top:1px solid var(--rule);padding-top:.9rem;margin:0 0 1.1rem} .summary__total b{font-family:var(--mono);font-size:1.25rem} .summary__dispatch{font-size:.75rem;color:var(--muted);margin:.9rem 0 0;text-align:center} .coupon-form{display:flex;gap:.5rem;margin-bottom:1rem} .coupon-form input{flex:1;min-width:0;padding:.7rem .9rem;border:1px solid var(--rule); border-radius:999px;font:inherit;font-size:.875rem;text-transform:uppercase; background:var(--paper);color:var(--graphite)} .coupon-applied{display:flex;justify-content:space-between;align-items:center; background:rgba(0,229,212,.1);color:var(--cyan);border-radius:8px;padding:.6rem .8rem;margin-bottom:1rem; font-family:var(--mono);font-size:.75rem} .summary__items{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.8rem} .summary__items li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem; align-items:center;font-size:.8125rem} .summary__thumb{position:relative;width:46px;height:46px;border-radius:8px; overflow:hidden;background:var(--surface-2);display:block} .summary__thumb img{width:100%;height:100%;object-fit:cover} .summary__thumb b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px; border-radius:9px;background:var(--cyan);color:var(--on-accent);font-family:var(--mono); font-size:.625rem;display:grid;place-items:center;padding:0 4px} .summary__name small{display:block;color:var(--muted);font-size:.6875rem} .summary__amt{font-family:var(--mono)} /* ---- checkout ---- */ .checkout{display:grid;gap:2rem;grid-template-columns:1fr} @media (min-width:960px){.checkout{grid-template-columns:1fr 360px;gap:2.5rem;align-items:start}} .checkout__main{display:grid;gap:1.25rem} .cbox{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.35rem} .cbox h2{font-size:1rem;margin-bottom:1rem} .cbox textarea{width:100%;padding:.8rem .95rem;border:1px solid var(--rule); border-radius:var(--r);font:inherit;font-size:.9375rem;resize:vertical; background:var(--paper);color:var(--graphite)} .cbox__note{font-size:.75rem;color:var(--muted);margin:.9rem 0 0} .cbox .form-grid{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))} .cbox .form-grid .span2{grid-column:1/-1} .cbox .form-grid label{display:grid;gap:.3rem;font-family:var(--mono);font-size:.625rem; letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cbox .form-grid label.check{grid-auto-flow:column;justify-content:start;align-items:center; font-family:var(--body);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--graphite)} .cbox .form-grid input,.cbox .form-grid select{padding:.75rem .9rem;border:1px solid var(--rule); border-radius:var(--r);font:inherit;font-size:.9375rem;font-family:var(--body); letter-spacing:0;text-transform:none;color:var(--graphite);background:var(--paper)} .cbox .form-grid input:focus,.cbox .form-grid select:focus{border-color:var(--cyan);outline:none} .cbox .form-grid small{font-family:var(--body);font-size:.7rem;letter-spacing:0; text-transform:none;color:var(--muted)} @media (max-width:560px){.cbox .form-grid{grid-template-columns:1fr}} .pick,.addr{display:flex;align-items:center;gap:.85rem;border:1px solid var(--rule); border-radius:var(--r);padding:.9rem 1rem;margin-bottom:.6rem;cursor:pointer; transition:border-color .25s ease,background .25s ease} .pick:hover,.addr:hover{border-color:var(--muted)} .pick:has(input:checked),.addr:has(input:checked){border-color:var(--cyan); background:rgba(0,229,212,.07)} .pick span,.addr span{flex:1;font-size:.9375rem} .pick b,.addr b{display:block;font-weight:500;font-size:.9375rem} .pick small,.addr span{font-size:.75rem;color:var(--muted)} .pick small{display:block} .pick em{font-style:normal;font-family:var(--mono);font-size:.875rem} .pick.is-disabled{opacity:.5;cursor:not-allowed} .addr-picker{margin-bottom:1.25rem} /* ---- confirmation ---- */ .confirm{text-align:center} .confirm h1{font-size:clamp(1.6rem,4vw,2.4rem)} .confirm .lede{margin-inline:auto;margin-bottom:2.5rem} .confirm .cbox{text-align:left;margin-bottom:1.25rem} .confirm__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem} .confirm address{font-style:normal;font-size:.9375rem;line-height:1.7} .track{list-style:none;display:flex;justify-content:space-between;padding:0; margin:0 0 2.5rem;position:relative;gap:.25rem} .track::before{content:"";position:absolute;left:6%;right:6%;top:7px;height:2px;background:var(--rule)} .track li{position:relative;flex:1;text-align:center;font-family:var(--mono); font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .track li span{display:block;width:16px;height:16px;border-radius:50%;background:var(--surface); border:2px solid var(--rule);margin:0 auto .5rem;position:relative;z-index:1} .track li.on{color:var(--graphite)} .track li.on span{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,229,212,.6)} @media (max-width:520px){.track li{font-size:.5rem}} /* ------------------------------------------------------------ THEME TOGGLE ------------------------------------------------------------ */ .themetoggle{ width:38px;height:38px;border-radius:50%;border:1px solid var(--rule); background:transparent;display:grid;place-items:center;cursor:pointer; color:var(--ink-2);transition:color .22s ease,border-color .22s ease,transform .28s var(--ease); } .themetoggle:hover{color:var(--ink);border-color:var(--rule-strong);transform:rotate(-18deg)} .themetoggle svg{width:17px;height:17px} .themetoggle .sun{display:none} .themetoggle .moon{display:block} :root[data-theme="light"] .themetoggle .sun{display:block} :root[data-theme="light"] .themetoggle .moon{display:none} /* Colour-scheme-aware form controls and scrollbars, so native UI (date pickers, dropdown arrows, the scrollbar itself) matches. */ input,select,textarea{color-scheme:inherit} :root[data-theme="light"] .hero__grain{opacity:.28} /* In dark, product photography carries the page — take the edge off pure-white product shots so they don't glare against the surface. */ .card__media img,.pdp__main img{filter:saturate(1.02)} :root:not([data-theme="light"]) .card__media img{filter:saturate(1.02) brightness(.97)} /* ---- payment handoff page ---- */ .paybox{max-width:420px;margin:2rem auto 0;background:var(--surface); border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem} .paybox__note{font-size:.75rem;color:var(--muted);margin:1rem 0 0} /* ============================================================ ACCOUNT (Phase 6) ============================================================ */ .acctnav{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center; border-bottom:1px solid var(--rule);margin:1.5rem 0 2rem;padding-bottom:.1rem} .acctnav a{padding:.6rem .9rem;font-size:.875rem;color:var(--muted);position:relative} .acctnav a:hover{color:var(--ink)} .acctnav a.on{color:var(--ink)} .acctnav a.on::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:-1px; height:2px;background:var(--cyan);border-radius:2px} .acctnav__out{margin-left:auto} .acct-stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .acct-stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg); padding:1.15rem} .acct-stat span{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:.4rem} .acct-stat b{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em} .orderlist{display:grid;gap:.6rem} .orderrow{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center; background:var(--surface);border:1px solid var(--rule);border-radius:var(--r); padding:.95rem 1.15rem;transition:border-color .25s ease,transform .25s var(--ease)} .orderrow:hover{border-color:var(--rule-strong);transform:translateY(-2px);text-decoration:none} .orderrow b{display:block;font-family:var(--mono);font-size:.875rem;font-weight:500} .orderrow small{display:block;color:var(--muted);font-size:.75rem} .orderrow__track{grid-column:1/-1;font-family:var(--mono);font-size:.6875rem;color:var(--muted)} .orderrow__total{font-family:var(--mono);text-align:right} .ochip{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase; padding:.25rem .55rem;border-radius:6px;border:1px solid var(--rule);white-space:nowrap} .ochip--ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,transparent); background:color-mix(in srgb,var(--success) 12%,transparent)} .ochip--ship{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 40%,transparent); background:color-mix(in srgb,var(--violet) 12%,transparent)} .ochip--prod{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,transparent); background:color-mix(in srgb,var(--cyan) 12%,transparent)} .ochip--wait{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent); background:color-mix(in srgb,var(--amber) 12%,transparent)} .ochip--bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent); background:color-mix(in srgb,var(--danger) 12%,transparent)} .timeline{list-style:none;padding:0;margin:0;display:grid;gap:0} .timeline li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.75rem 0; border-left:2px solid var(--rule);padding-left:1.15rem;margin-left:.4rem;position:relative} .timeline li::before{content:"";position:absolute;left:-6px;top:1.1rem;width:9px;height:9px; border-radius:50%;background:var(--rule)} .timeline li:first-child::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)} .timeline time{font-family:var(--mono);font-size:.6875rem;color:var(--muted);white-space:nowrap} .timeline b{display:block;font-size:.9375rem;font-weight:500} .timeline small{color:var(--muted);font-size:.8125rem} .trackbox .btn{margin-top:.75rem} .addrgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .addrcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg); padding:1.15rem;position:relative} .addrcard.is-default{border-color:color-mix(in srgb,var(--cyan) 45%,transparent)} .addrcard__tag{position:absolute;top:.8rem;right:.8rem;font-family:var(--mono);font-size:.5625rem; letter-spacing:.1em;text-transform:uppercase;color:var(--cyan); border:1px solid currentColor;border-radius:4px;padding:.1rem .35rem} .addrcard address{font-style:normal;font-size:.875rem;color:var(--muted); line-height:1.6;margin:.5rem 0 .9rem} .addrcard__actions{display:flex;gap:1rem;flex-wrap:wrap} .addrcard__actions form{margin:0} /* review dialog */ .reviewdlg{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface); color:var(--ink);padding:1.5rem;max-width:520px;width:calc(100vw - 2rem)} .reviewdlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)} .reviewdlg h2{font-size:1.0625rem;margin:0 0 .5rem} .reviewdlg textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--rule); border-radius:var(--r);font:inherit;font-size:.9375rem;background:var(--surface-2); color:var(--ink);resize:vertical} .reviewdlg__actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.5rem} /* star picker: reversed row so CSS sibling selectors can light up to the left */ .starpick{display:inline-flex;flex-direction:row-reverse;gap:.2rem} .starpick input{position:absolute;opacity:0;width:0;height:0} .starpick label{font-size:1.6rem;color:var(--rule-strong);cursor:pointer;line-height:1; transition:color .15s ease} .starpick input:checked ~ label, .starpick label:hover, .starpick label:hover ~ label{color:var(--amber)} /* ============================================================ CUSTOM PRINTING (Phase 7) ============================================================ */ .dropzone{display:grid;place-items:center;gap:.6rem;padding:2rem 1.25rem; border:1.5px dashed var(--rule-strong);border-radius:var(--r-lg);cursor:pointer; text-align:center;background:var(--surface); transition:border-color .25s ease,background .25s ease} .dropzone:hover,.dropzone.is-over{border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 6%,var(--surface))} .dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0} .dropzone__label b{display:block;font-family:var(--display);font-size:1rem;margin-bottom:.25rem} .dropzone__label small{color:var(--muted);font-size:.75rem;line-height:1.5} .filelist{list-style:none;padding:0;margin:.85rem 0 0;display:grid;gap:.5rem} .filelist li{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center; background:var(--surface-2);border:1px solid var(--rule);border-radius:10px;padding:.6rem .75rem} .filelist__ext{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em; background:var(--graphite-3);color:var(--ink);border-radius:5px;padding:.25rem .4rem;min-width:40px; text-align:center} .filelist__name{font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis} .filelist__name small{display:block;color:var(--muted);font-size:.6875rem} .filelist__drop{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem; padding:0 .3rem} .filelist__drop:hover{color:var(--danger)} .filelist--admin li{background:var(--surface)} .quote-dl{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:0 0 1.25rem} .quote-dl dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .quote-dl dd{margin:.2rem 0 0;font-size:.9375rem} .quote-notes{margin:0 0 1.25rem;padding:.85rem 1rem;background:var(--surface-2); border-left:2px solid var(--cyan);border-radius:0 8px 8px 0;font-size:.875rem} /* ============================================================ WHATSAPP FLOAT (Settings -> Store -> WhatsApp number) ============================================================ */ .wa-float{position:fixed;right:calc(var(--gutter) * .75);bottom:calc(var(--gutter) * .75);z-index:60; display:grid;place-items:center;width:54px;height:54px;border-radius:50%; background:#23B33A;color:#fff;box-shadow:var(--shadow-md); transition:transform .3s var(--ease)} .wa-float:hover{transform:translateY(-3px) scale(1.05)} @media (max-width:720px){.wa-float{bottom:calc(var(--gutter) * .75 + 64px)}} /* quick add on product cards */ .card__add{margin-top:.85rem} .card__addform{margin:0} .card__add.btn{padding:.7rem 1rem;font-size:.75rem}