/* ============================================================ PRIME PAPER — design system ============================================================ */ /* ---------- TOKENS ---------- */ :root{ /* dark ground */ --void:#0A0B0D; --carbon:#101217; --slate:#171A21; --line-d:rgba(245,242,236,.13); --line-d2:rgba(245,242,236,.26); --ash:#8E939B; /* 6.0:1 on --void */ /* paper ground */ --paper:#F5F2EC; --paper-2:#EBE6DB; --paper-3:#DED8CB; --line-l:rgba(16,18,22,.13); --line-l2:rgba(16,18,22,.26); --mute:#5C5F63; /* 5.7:1 on --paper */ /* brand accent — swap the whole identity from one place. Every pair is contrast-checked: --accent on --void, --accent-lo on --paper. */ --accent:#4F9BFF; /* on dark — 7.0:1 */ --accent-lo:#1F5FBF; /* on paper — 5.4:1 */ --accent-t:var(--accent); /* accent as *text*; re-pointed on light ground */ /* The stuck header is a translucent slab of whatever it sits over, so its tint has to move with the palette or it reads as a beige bar on a cool page. */ --glass-d:rgba(10,11,13,.72); --glass-l:rgba(245,242,236,.74); /* Raised surfaces and the text on them, named so a card does not have to know which ground it landed on. A card always sits away from its ground and moves further away on hover — which is lighter on dark and lighter still on light, so the gesture survives the swap even though the values invert. */ --surface:var(--carbon); --surface-2:var(--slate); --ink:var(--paper); --art-hi:var(--accent-hi); --accent-hi:#8FBEFF; --accent-rgb:79,155,255; /* Text on an accent fill. Signal blue is a light accent — white on it is 2.8:1, which is the primary CTA failing the contrast floor. The other palettes in this file already ink their light accents dark; blue was the one that did not. 6.6:1 on the fill, and the blue is untouched. */ --accent-ink:#0A1421; --steel:#2E4257; /* type */ --disp:'Archivo','Onest',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* rhythm */ --gut:clamp(20px,4.2vw,56px); --maxw:1320px; --sec-y:clamp(88px,11vw,180px); --r:2px; /* radius scale — pills were 999px while panels sat at 0–2px, which read as two different design languages on the same page */ --r-xs:6px; /* chips, small marks */ --r-sm:10px; /* inner panes */ --r-md:14px; /* cards and panels */ --r-lg:18px; /* large boxed lists */ /* motion */ --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --e-spring:cubic-bezier(.34,1.4,.5,1); /* live section colours (swapped per section) */ --bg:var(--void); --fg:var(--paper); } /* alternate accents — set data-accent on to preview */ [data-accent="lime"]{ --accent:#C6F24E; --accent-lo:#4F670B; --accent-hi:#DEFB92; --accent-rgb:198,242,78; --accent-ink:#141A06; } [data-accent="teal"]{ --accent:#2FD4C0; --accent-lo:#0F6F63; --accent-hi:#7FE8DC; --accent-rgb:47,212,192; --accent-ink:#02231F; } [data-accent="flame"]{ --accent:#E8551F; --accent-lo:#B93E13; --accent-hi:#FF7A45; --accent-rgb:232,85,31; --accent-ink:#FFFFFF; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} body{ font-family:var(--body); font-size:16px; line-height:1.6; font-weight:400; background:var(--void); color:var(--paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* No overflow declaration here on purpose. Whatever is set on body propagates to the viewport, so this element decides how the whole page scrolls — and every value has a cost: hidden makes overflow-y compute to auto and gives the page a second scroll container, which on iOS breaks the momentum of a swipe; clip avoids that but is young enough that Safari has stopped the page scrolling over it. Nothing here needs it either way: measured at 320, 375 and 768 the page has no horizontal overflow without it, because everything that reaches past the edge — the hero glow, the marquee, the card rail — is already clipped by its own container. */ font-feature-settings:"ss01","cv01"; } body.is-booting{overflow:hidden;height:100vh;} body.menu-open{overflow:hidden;} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button,input{font:inherit;color:inherit;} /* Two mobile browser defaults that read as bugs on a design like this: a grey rectangle flashed behind whatever is tapped, ignoring the element's own shape, and a double-tap zoom that fires when someone taps twice in the header. manipulation keeps pinch zoom — it only drops the double-tap gesture on controls, where it was never wanted. */ a,button,summary,[role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;} button{background:none;border:none;cursor:pointer;} ::selection{background:var(--accent);color:var(--accent-ink);} .mono{font-family:var(--mono);font-weight:400;letter-spacing:.04em;} .wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto;} /* ---------- TYPE SCALE ---------- */ h1,h2,h3{ font-family:var(--disp); font-weight:700; font-stretch:118%; line-height:.95; letter-spacing:-.025em; text-transform:uppercase; text-wrap:balance; } .hero-h1{ font-size:clamp(1.95rem,3.85vw,3.75rem); font-weight:800; line-height:.92; letter-spacing:-.035em; max-width:17ch; margin-bottom:clamp(20px,2.6vw,34px); } .h2{font-size:clamp(1.5rem,2.85vw,2.55rem);max-width:20ch;} h3{font-size:clamp(1rem,1.3vw,1.18rem);letter-spacing:-.01em;line-height:1.15;} .body-lg{font-size:clamp(.98rem,1.15vw,1.075rem);line-height:1.7;max-width:60ch;} .dim{color:var(--ash);} .muted{color:var(--mute);} .tag{ font-size:12px;color:var(--accent-t);letter-spacing:.14em;text-transform:uppercase; margin-bottom:clamp(16px,2vw,26px);display:flex;align-items:center;gap:10px; } .tag::before{content:'';width:20px;height:1px;background:currentColor;opacity:.55;flex:none;} .sec-light .tag{color:var(--accent-lo);} /* ---------- SECTIONS ---------- */ .sec{position:relative;padding-block:var(--sec-y);} .sec-dark{background:var(--void);color:var(--paper);} .sec-light{background:var(--paper);color:var(--void);} /* Muted text and hairlines are named once and re-pointed here rather than overridden rule by rule, so a section can be flipped between grounds by swapping its class alone — nothing downstream has to know. */ .sec-light{ --ash:var(--mute); --accent-t:var(--accent-lo); --surface:var(--paper-2); --surface-2:#FFFFFF; --ink:var(--void); --art-hi:var(--accent-lo); --line-d:var(--line-l); --line-d2:var(--line-l2); } .sec-light .body-lg{color:var(--mute);} .sec-head{ display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px); align-items:end;margin-bottom:clamp(40px,5.5vw,84px); } /* Lenis drives the desktop scroll and sets these classes itself; they are inert without the rules it expects, which is how the library was running until now. Touch never gets here — the browser scrolls it natively. */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;} .lenis.lenis-stopped{overflow:hidden;} .lenis.lenis-smooth iframe{pointer-events:none;} /* ---------- GRAIN ---------- */ .grain{ position:fixed;inset:-8%;z-index:9998;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; will-change:transform; } @keyframes grain{ 0%,100%{transform:translate(0,0)} 16%{transform:translate(-2%,-1.5%)} 33%{transform:translate(1.5%,-2%)} 50%{transform:translate(-1.5%,2%)} 66%{transform:translate(2%,1.5%)} 83%{transform:translate(-2%,1%)} } /* ---------- PRELOADER ---------- */ .boot{ position:fixed;inset:0;z-index:9990;background:var(--void); display:grid;place-items:center; } .boot-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,5vw,52px);} .boot-slip{ width:min(320px,74vw);background:var(--paper);color:var(--void); padding:26px 24px 0;position:relative; box-shadow:0 40px 90px rgba(0,0,0,.6); } .boot-slip-top{position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);} .boot-print{display:flex;flex-direction:column;gap:9px;padding-bottom:22px;} .boot-line{ font-family:var(--mono);font-size:11px;letter-spacing:.06em; opacity:0;transform:translateY(6px); } .boot-perf{ height:10px;margin:0 -24px; background:radial-gradient(circle at 7px 6px,var(--void) 5px,transparent 5.5px) repeat-x; background-size:14px 10px; } .boot-count{ font-family:var(--disp);font-weight:800;font-stretch:120%; font-size:clamp(2.3rem,6.6vw,4.2rem);line-height:1;letter-spacing:-.05em; display:flex;align-items:baseline;gap:6px;color:var(--paper); font-variant-numeric:tabular-nums; } .boot-count i{font-family:var(--mono);font-size:.9rem;font-style:normal;color:var(--accent);letter-spacing:0;} /* ---------- SCROLL SPINE ---------- */ .spine{ position:fixed;right:clamp(14px,1.7vw,26px);top:50%;transform:translateY(-50%); z-index:60;display:flex;flex-direction:column;align-items:center;gap:16px; opacity:0; } .spine-rail{ width:2px;height:min(30vh,240px);background:var(--line-d2);position:relative;overflow:hidden; } .spine-fill{position:absolute;inset:0 0 auto;height:0%;background:var(--accent);} .spine-label{ font-size:9.5px;letter-spacing:.22em;color:var(--ash); writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap; } body.on-light .spine-rail{background:var(--line-l2);} body.on-light .spine-label{color:var(--mute);} @media (max-width:900px){.spine{display:none;}} /* ---------- HEADER ---------- */ .hdr{ position:fixed;top:0;left:0;right:0;z-index:80; transition:transform .5s var(--e-out),background .4s,border-color .4s,backdrop-filter .4s; border-bottom:1px solid transparent; } .hdr.is-stuck{ background:var(--glass-d);backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line-d); } /* Over the paper sections a dark translucent bar reads as a grey slab, not as glass. The header inverts to match whatever is actually underneath it. */ body.hdr-light .hdr.is-stuck{ background:var(--glass-l); border-bottom-color:var(--line-l); } body.hdr-light .nav a{color:var(--void);} body.hdr-light .lang{border-color:var(--line-l2);} body.hdr-light .lang-pip{background:var(--void);} body.hdr-light .lang-b{color:var(--mute);} body.hdr-light .lang-b:hover{color:var(--void);} body.hdr-light .lang-b.is-on{color:var(--paper);} body.hdr-light .btn-sm{--bc:var(--line-l2);color:var(--void);} body.hdr-light .btn-sm:hover{color:var(--accent-ink);} body.hdr-light .burger i{background:var(--void);} body.menu-open.hdr-light .burger i{background:var(--paper);} .hdr.is-hidden{transform:translateY(-102%);} .hdr-in{ width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto; height:clamp(66px,7vw,86px);display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand-chip{ display:block;line-height:0; transition:transform .5s var(--e-spring),filter .4s; } .brand-chip img{height:clamp(24px,2.6vw,31px);width:auto;} .brand:hover .brand-chip{transform:translateY(-2px) rotate(-1.4deg);filter:brightness(1.15);} .nav{display:flex;gap:clamp(18px,2.4vw,38px);} .nav a{ font-size:13.5px;font-weight:450;color:var(--paper);position:relative;padding:6px 0; opacity:.78;transition:opacity .25s; } .nav a::after{ content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out); } .nav a:hover{opacity:1;} .nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:left;} .nav a.is-active{opacity:1;} .hdr-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);} .lang{position:relative;display:flex;border:1px solid var(--line-d2);border-radius:999px;padding:3px;} .lang-pip{ position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:44px; background:var(--paper);border-radius:999px;transition:transform .45s var(--e-out),width .45s var(--e-out); } .lang-b{ position:relative;z-index:1;display:inline-flex;align-items:center; font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em; padding:6px 12px;border-radius:999px;color:var(--ash); text-decoration:none;transition:color .3s; } .lang-b.is-on{color:var(--void);} .lang-b:hover{color:var(--paper);} .lang-b.is-on:hover{color:var(--void);} /* ---------- BUTTONS ---------- */ .btn{ --bc:var(--paper); display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.05em; padding:15px 26px;border:1px solid var(--bc);border-radius:999px; position:relative;overflow:hidden;white-space:nowrap;isolation:isolate; transition:color .4s var(--e-out),border-color .4s; } .btn span{position:relative;z-index:2;} .btn::before{ content:'';position:absolute;inset:0;z-index:1;background:var(--accent); transform:translateY(101%);transition:transform .5s var(--e-out); } .btn:hover::before{transform:translateY(0);} .btn:hover{color:var(--accent-ink);border-color:var(--accent);} .btn-sm{padding:11px 20px;font-size:11.5px;} .btn-fill{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} .btn-fill::before{background:var(--paper);} .btn-fill:hover{color:var(--void);border-color:var(--paper);} .btn-ghost{--bc:var(--line-d2);color:var(--paper);} .btn-block{width:100%;margin-top:6px;} .sec-light .btn{--bc:var(--line-l2);color:var(--void);} .sec-light .btn:hover{color:var(--accent-ink);} /* The outline rule above is written for ghost buttons and would strip a filled one of its ink. The hover fill needs its own answer too: on dark ground the button flips to paper, and mirroring that on light ground means flipping to near-black — which is symmetric on paper and wrong on screen, a black slab where the primary action used to be. It deepens into the darker brand blue instead. Same gesture, still the brand, and white on it reads at 5.8:1. */ .sec-light .btn-fill{color:var(--accent-ink);} .sec-light .btn-fill::before{background:var(--accent-lo);} .sec-light .btn-fill:hover{color:var(--paper);border-color:var(--accent-lo);} .burger{display:none;width:34px;height:34px;position:relative;} .burger i{ position:absolute;left:7px;width:20px;height:1.5px;background:var(--paper); transition:transform .4s var(--e-out),opacity .3s; } .burger i:nth-child(1){top:14px;} .burger i:nth-child(2){top:20px;} .burger.is-x i:nth-child(1){transform:translateY(3px) rotate(45deg);} .burger.is-x i:nth-child(2){transform:translateY(-3px) rotate(-45deg);} /* ---------- MOBILE MENU ---------- */ .mmenu{ position:fixed;inset:0;z-index:75;background:var(--carbon);color:var(--paper); display:flex;flex-direction:column;justify-content:center; padding:0 var(--gut); clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--e-out); pointer-events:none; } .mmenu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto;} .mmenu-nav{display:flex;flex-direction:column;gap:6px;} .mmenu-nav a{ font-family:var(--disp);font-weight:700;font-stretch:112%;text-transform:uppercase; font-size:clamp(1.5rem,6.6vw,2.35rem);line-height:1.08;letter-spacing:-.03em; display:flex;align-items:baseline;gap:14px;padding:6px 0; border-bottom:1px solid var(--line-d); opacity:0;transform:translateY(26px); } .mmenu.is-open .mmenu-nav a{opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .6s var(--e-out);} .mmenu.is-open .mmenu-nav a:nth-child(1){transition-delay:.12s} .mmenu.is-open .mmenu-nav a:nth-child(2){transition-delay:.18s} .mmenu.is-open .mmenu-nav a:nth-child(3){transition-delay:.24s} .mmenu.is-open .mmenu-nav a:nth-child(4){transition-delay:.30s} .mmenu.is-open .mmenu-nav a:nth-child(5){transition-delay:.36s} .mmenu-nav em{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--accent-t);} .mmenu-foot{margin-top:40px;font-size:11px;color:var(--ash);} /* ---------- HERO ---------- */ .hero{ position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-block:clamp(120px,15vh,190px) clamp(70px,9vh,110px);overflow:hidden; } .hero-bg{position:absolute;inset:0;pointer-events:none;} .hero-grid{ position:absolute;inset:0; background-image: linear-gradient(to right,var(--line-d) 1px,transparent 1px), linear-gradient(to bottom,var(--line-d) 1px,transparent 1px); background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px); mask-image:radial-gradient(120% 90% at 20% 10%,#000 0%,transparent 72%); -webkit-mask-image:radial-gradient(120% 90% at 20% 10%,#000 0%,transparent 72%); opacity:.85; } .hero-glow{ position:absolute;right:-8%;top:6%;width:min(58vw,760px);aspect-ratio:1; background:radial-gradient(circle,rgba(var(--accent-rgb),.30),transparent 62%); filter:blur(24px); } .hero-in{ position:relative;width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto; display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(32px,5vw,80px);align-items:center; } .eyebrow{ display:inline-flex;align-items:center;gap:11px; font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-t); margin-bottom:clamp(20px,2.6vw,32px); } .eyebrow i{ width:7px;height:7px;border-radius:50%;background:var(--accent-t);flex:none; box-shadow:0 0 0 0 rgba(var(--accent-rgb),.7);animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)} 70%{box-shadow:0 0 0 12px rgba(var(--accent-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)} } .hero-lead{color:var(--ash);max-width:50ch;margin-bottom:clamp(28px,3.5vw,42px);} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;} .hero-note{margin-top:clamp(24px,3vw,36px);font-size:11px;color:var(--ash);opacity:.7;letter-spacing:.06em;} .scroll-cue{ position:absolute;bottom:clamp(22px,3.4vh,40px);left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:10px; font-size:9.5px;letter-spacing:.3em;color:var(--ash); } .scroll-cue i{display:block;width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:cue 2s var(--e-io) infinite;} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- HERO RECEIPT ---------- */ .hero-slip{perspective:1600px;display:flex;justify-content:center;} /* ---------- POS TERMINAL ---------- */ .pos{ width:min(340px,100%);transform-style:preserve-3d; will-change:transform;position:relative; } .pos-body{ position:relative;z-index:3;transform:translateZ(2px);border-radius:12px 12px 5px 5px; background:linear-gradient(178deg,#2B313A 0%,#1E232B 34%,#12161C 100%); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, -1px 0 0 rgba(255,255,255,.05) inset, 1px 0 0 rgba(0,0,0,.6) inset, 0 26px 50px -16px rgba(0,0,0,.92), 0 3px 10px rgba(0,0,0,.6); } /* specular sweep across the top plate */ .pos-top{ height:13px;border-radius:12px 12px 0 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.14) 22%,rgba(255,255,255,.03) 55%,transparent), linear-gradient(180deg,#39414C,#242A33); } .pos-face{ display:flex;align-items:center;gap:11px; padding:11px 15px 13px; } .pos-leds{display:flex;gap:6px;flex:none;} .led{width:5px;height:5px;border-radius:50%;display:block;} .led-pw{background:#4FD08A;box-shadow:0 0 7px 1px rgba(79,208,138,.75);} .led-fd{ background:var(--accent);box-shadow:0 0 8px 1px rgba(var(--accent-rgb),.9); animation:led 2.6s ease-in-out infinite; } @keyframes led{0%,42%,100%{opacity:1}50%,92%{opacity:.18}} .pos-brand{font-size:8.5px;letter-spacing:.27em;color:#828A96;flex:1;} .pos-vent{ width:36px;height:9px;flex:none;border-radius:1px; background:repeating-linear-gradient(90deg, rgba(0,0,0,.72) 0 1.5px, rgba(255,255,255,.07) 1.5px 3px); box-shadow:0 1px 0 rgba(255,255,255,.06); } /* the paper exit */ .pos-slot{position:relative;padding:0 9px 7px;} .pos-mouth{ height:7px;border-radius:4px;background:#04060A; box-shadow: inset 0 3px 5px rgba(0,0,0,1), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.05); } .pos-teeth{ position:absolute;left:9px;right:9px;bottom:0;height:8px; fill:#0D1116;filter:drop-shadow(0 1px 0 rgba(255,255,255,.07)); } .pos-feed{ position:relative;will-change:transform;z-index:1;width:87%;margin:-10px auto 0; clip-path:inset(0 -110px -900px -110px); } .pos-shade{ position:absolute;top:0;left:0;right:0;height:54px;z-index:4;pointer-events:none; background: linear-gradient(180deg,rgba(6,8,11,.78) 0%,rgba(6,8,11,.40) 26%,rgba(6,8,11,.13) 58%,transparent 100%), linear-gradient(90deg,rgba(0,0,0,.22),transparent 12%,transparent 88%,rgba(0,0,0,.22)); } .slip{ width:100%;position:relative;z-index:1;will-change:transform; background:linear-gradient(180deg,#F3F0E9,#FBFAF7 12%,#F6F3EC); color:var(--void);padding:30px 22px 0; box-shadow: 0 46px 84px -26px rgba(0,0,0,.85), 1px 0 0 rgba(0,0,0,.14), -1px 0 0 rgba(0,0,0,.14); transform-origin:top center; } .slip::after{ content:'';position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg,rgba(0,0,0,.10),transparent 9%,transparent 91%,rgba(0,0,0,.10)), repeating-linear-gradient(180deg, rgba(0,0,0,.028) 0 1px,transparent 1px 3px,rgba(255,255,255,.5) 3px 4px,transparent 4px 62px); } .slip-scan{ position:absolute;left:0;right:0;top:0;height:52px;pointer-events:none;z-index:2;will-change:transform; background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.16),transparent); opacity:0; } .slip-time{ display:flex;justify-content:space-between;font-family:var(--mono); font-size:9.5px;letter-spacing:.14em;color:var(--mute); padding-bottom:11px;margin-bottom:11px;border-bottom:1px dashed var(--line-l2); } .slip-head{ font-size:10px;letter-spacing:.18em;text-align:center;color:var(--mute); padding-bottom:14px;margin-bottom:6px;border-bottom:1px dashed var(--line-l2); } .slip-rows{display:flex;flex-direction:column;} .slip-row,.slip-total{ display:flex;justify-content:space-between;align-items:baseline;gap:12px; font-family:var(--mono);font-size:11.5px;padding:9px 0; } .slip-row{border-bottom:1px dotted var(--line-l);} .slip-row b{font-weight:400;color:var(--mute);} .slip-total{ border-top:1.5px solid var(--void);margin-top:8px;padding-top:12px; font-size:12px;font-weight:600; } .slip-total b{color:var(--accent-lo);} .slip-row.is-hot{background:rgba(var(--accent-rgb),.09);} .slip-code{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:16px 0 14px;font-size:9px;letter-spacing:.2em;color:var(--mute); } .barcode{ width:76%;height:34px; background-image:repeating-linear-gradient(90deg,var(--void) 0 2px,transparent 2px 4px,var(--void) 4px 5px,transparent 5px 9px,var(--void) 9px 12px,transparent 12px 14px); } .slip-perf{ height:11px;margin:0 -24px; background:radial-gradient(circle at 7px 6px,var(--void) 5.4px,transparent 5.9px) repeat-x; background-size:14px 11px; } /* ---------- MARQUEE ---------- Four treatments; set data-mq on (or ?mq=) to compare. Default `paper`: the band reads as the receipt tape itself running across the page, and bridges the dark hero into the light section. */ .mq{ background:var(--paper-2);color:var(--void);overflow:hidden; border-top:1px dashed rgba(16,18,22,.34); border-bottom:1px dashed rgba(16,18,22,.34); padding-block:clamp(12px,1.5vw,17px); position:relative; } .mq::before,.mq::after{ content:'';position:absolute;left:0;right:0;height:1px;background:var(--line-l); } .mq::before{top:3px;} .mq::after{bottom:3px;} .mq-track{display:flex;white-space:nowrap;will-change:transform;} .mq-item{ font-family:var(--disp);font-weight:700;font-stretch:110%;text-transform:uppercase; font-size:clamp(.75rem,1.05vw,.92rem);letter-spacing:.02em; display:inline-flex;align-items:center;gap:clamp(20px,3vw,40px); padding-right:clamp(20px,3vw,40px); } .mq-item::after{content:'';width:6px;height:6px;background:var(--accent-lo);border-radius:50%;flex:none;} /* --- alt A: solid accent band (the original) --- */ [data-mq="solid"] .mq{ background:var(--accent);color:var(--accent-ink); border-block:1px solid rgba(0,0,0,.16); } [data-mq="solid"] .mq::before,[data-mq="solid"] .mq::after{display:none;} [data-mq="solid"] .mq-item::after{background:var(--accent-ink);width:7px;height:7px;} /* --- alt B: deep steel band, brand navy --- */ [data-mq="steel"] .mq{ background:#16202B;color:var(--paper); border-block:1px solid rgba(255,255,255,.09); } [data-mq="steel"] .mq::before,[data-mq="steel"] .mq::after{display:none;} [data-mq="steel"] .mq-item::after{background:var(--accent);} /* --- alt C: dark band, alternating outlined / filled type --- */ [data-mq="ghost"] .mq{ background:var(--void);color:var(--paper); border-block:1px solid var(--line-d); } [data-mq="ghost"] .mq::before,[data-mq="ghost"] .mq::after{display:none;} [data-mq="ghost"] .mq-item{ color:transparent; -webkit-text-stroke:1px rgba(245,242,236,.42); text-stroke:1px rgba(245,242,236,.42); } [data-mq="ghost"] .mq-item:nth-child(even){ color:var(--paper);-webkit-text-stroke:0;text-stroke:0; } [data-mq="ghost"] .mq-item::after{background:var(--accent);-webkit-text-stroke:0;} /* --- alt D: hairline ticker, most restrained --- */ [data-mq="line"] .mq{ background:var(--void);color:var(--ash); border-block:1px solid var(--line-d); padding-block:12px; } [data-mq="line"] .mq::before,[data-mq="line"] .mq::after{display:none;} [data-mq="line"] .mq-item{ font-family:var(--mono);font-weight:400;font-stretch:normal; font-size:11px;letter-spacing:.26em;color:var(--ash); } [data-mq="line"] .mq-item::after{width:4px;height:4px;background:var(--accent);} /* ---------- ABOUT ---------- Deliberately not a card grid. The heading and the body sit side by side as an editorial spread, and the four principles run as one full-width band divided only by hairlines — outlined numerals do the work the boxes did. */ .about-top{ display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,84px);align-items:start; padding-bottom:clamp(46px,6vw,92px); } .about-h{max-width:none;} .about-body{padding-top:6px;} .about-body .body-lg{color:var(--mute);} .about-body .body-lg + .body-lg{margin-top:20px;} .principles{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-l2); } .pri{ position:relative; padding:clamp(26px,3.2vw,44px) clamp(16px,2vw,30px) clamp(22px,2.6vw,34px) 0; } .pri + .pri{border-left:1px solid var(--line-l);padding-left:clamp(16px,2vw,30px);} .pri::before{ content:'';position:absolute;left:0;top:-1px;height:2px;width:100%; background:var(--accent-lo);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--e-out); } .pri:hover::before{transform:scaleX(1);} /* the numeral is the graphic element, not a label */ .pri-n{ display:block;font-family:var(--disp);font-weight:800;font-stretch:118%; font-size:clamp(2.1rem,4vw,3.6rem);line-height:.85;letter-spacing:-.045em; color:transparent; -webkit-text-stroke:1.2px var(--line-l2);text-stroke:1.2px var(--line-l2); margin-bottom:clamp(20px,2.8vw,40px); transition:color .45s var(--e-out),-webkit-text-stroke-color .45s var(--e-out); } .pri:hover .pri-n{color:var(--accent-lo);-webkit-text-stroke-color:transparent;} .pri b{ display:block;font-family:var(--disp);font-weight:700;font-stretch:114%; text-transform:uppercase;font-size:clamp(.95rem,1.35vw,1.18rem); letter-spacing:-.015em;line-height:1.1;margin-bottom:9px; } .pri-t{display:block;font-size:13.5px;line-height:1.55;color:var(--mute);max-width:26ch;} /* ---------- PINNED PRODUCTS ---------- */ .pin-sec{padding-top:clamp(72px,8.4vw,132px);padding-bottom:clamp(52px,6vw,84px);overflow:hidden;} .pin-head{margin-bottom:clamp(36px,5vw,64px);} .pin-head .h2{margin-bottom:18px;} .pin-wrap{overflow:hidden;} .pin-track{ display:flex;gap:clamp(16px,1.8vw,26px); padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut))); will-change:transform; } .pcard{ flex:none;width:clamp(268px,29vw,400px); background:var(--surface);border:1px solid var(--line-d);border-radius:var(--r-md); padding:clamp(22px,2.4vw,32px); display:flex;flex-direction:column; transition:background .5s var(--e-out),border-color .5s,transform .6s var(--e-out); position:relative;overflow:hidden; } .pcard::before{ content:'';position:absolute;inset:0; background:radial-gradient(120% 90% at 50% 0%,rgba(var(--accent-rgb),.16),transparent 60%); opacity:0;transition:opacity .55s var(--e-out); } .pcard:hover{background:var(--surface-2);border-color:var(--line-d2);transform:translateY(-8px);} .pcard:hover::before{opacity:1;} .pcard-top{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.14em;position:relative;} .pcard-n{color:var(--accent-t);} .pcard-k{color:var(--ash);opacity:.65;} .pcard-art{ position:relative;margin:clamp(16px,2vw,26px) 0;aspect-ratio:1.7; display:grid;place-items:center;color:var(--ink);opacity:.5; transition:opacity .55s var(--e-out),transform .7s var(--e-out),color .55s; } .pcard-art svg{width:70%;height:auto;} .pcard:hover .pcard-art{opacity:1;color:var(--art-hi);transform:scale(1.06) translateY(-4px);} .pcard h3{margin-bottom:10px;position:relative;} .pcard p{font-size:13.5px;line-height:1.6;color:var(--ash);position:relative;} .pin-bar{margin-top:clamp(30px,4vw,52px);height:2px;background:var(--line-d);position:relative;} .pin-bar span{position:absolute;inset:0 auto 0 0;width:26%;background:var(--accent);} /* ---------- ROLLS ---------- The plate reads as a spec drawing: dimension lines with arrowheads carry the numbers, so the panel stops being a picture with dead space around it. The sizes flow as chips rather than two tables, which also kills the hole the 5-row and 8-row columns used to leave. */ .rolls{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,66px);align-items:start;} .plate{position:sticky;top:clamp(96px,12vw,140px);margin:0;} .plate-svg{width:100%;height:auto;display:block;} .plate-t{ font-family:var(--mono);font-size:7px;letter-spacing:.02em; fill:var(--void); } #dims{opacity:.62;} #ghostBody{stroke:#1A1C20;fill:none;opacity:.17;stroke-dasharray:4 5;stroke-width:1;} .plate-cap{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-size:10px;letter-spacing:.18em;color:var(--mute); padding-top:clamp(14px,1.8vw,22px);margin-top:clamp(10px,1.4vw,18px); border-top:1px solid var(--line-l); } .plate-cap i{flex:1;height:1px;background:var(--line-l);min-width:16px;} .plate-cap b{ font-family:var(--disp);font-weight:700;font-stretch:114%; font-size:clamp(1rem,1.4vw,1.22rem);letter-spacing:-.015em; color:var(--void);font-variant-numeric:tabular-nums; } .plate-hint{margin-top:12px;font-size:10.5px;color:var(--mute);opacity:.8;letter-spacing:.05em;} .sizes{display:grid;gap:clamp(22px,3vw,38px);} .size-head{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding-bottom:12px;margin-bottom:clamp(14px,1.8vw,20px); border-bottom:1px solid var(--line-l2); } .size-w{ font-family:var(--disp);font-weight:800;font-stretch:118%; font-size:clamp(1.2rem,1.95vw,1.6rem);letter-spacing:-.025em;line-height:1; } .size-c{font-size:10px;letter-spacing:.14em;color:var(--accent-lo);} .chips{display:flex;flex-wrap:wrap;gap:8px;} .chip{ font-family:var(--disp);font-weight:600;font-stretch:108%; font-size:clamp(.85rem,1.05vw,.97rem);letter-spacing:-.005em; font-variant-numeric:tabular-nums; padding:9px 15px;border-radius:999px; border:1px solid var(--line-l2);color:var(--void); background:transparent;cursor:pointer; transition:background .3s var(--e-out),border-color .3s,color .3s,transform .35s var(--e-spring); } .chip .num{font-style:normal;} .chip:hover{border-color:var(--accent-lo);color:var(--accent-lo);transform:translateY(-2px);} .chip.is-on{ background:var(--accent-lo);border-color:var(--accent-lo);color:var(--paper); } .chip.is-on:hover{color:var(--paper);} .roll-note{ margin-top:clamp(30px,3.8vw,52px);font-size:15px;color:var(--mute); padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--line-l); } .roll-note .mono{font-size:12px;color:var(--void);} .roll-note a{color:var(--accent-lo);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;} .roll-note a:hover{color:var(--void);} /* ---------- WHY ---------- */ .why-list{ border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden; } .why-row:last-child{border-bottom:none;} .why-row{ display:grid;grid-template-columns:64px minmax(200px,.9fr) 1.5fr 40px; gap:clamp(14px,2.4vw,36px);align-items:center; padding:clamp(22px,3vw,38px) clamp(8px,1.6vw,24px); border-bottom:1px solid var(--line-d);position:relative;overflow:hidden; transition:padding-left .55s var(--e-out); } .why-row::before{ content:'';position:absolute;inset:0;background:var(--surface); transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--e-out);z-index:0; } .why-row > *{position:relative;z-index:1;} .why-row:hover::before{transform:scaleY(1);transform-origin:top;} .why-row:hover{padding-left:clamp(18px,2.6vw,40px);} .why-n{font-size:11px;letter-spacing:.14em;color:var(--accent-t);} .why-row h3{color:var(--ink);} .why-row p{font-size:14px;line-height:1.6;color:var(--ash);max-width:56ch;} .why-arrow{ justify-self:end;font-size:19px;color:var(--accent-t); opacity:0;transform:translateX(-12px);transition:opacity .45s var(--e-out),transform .45s var(--e-out); } .why-row:hover .why-arrow{opacity:1;transform:none;} /* ---------- SEGMENTS ---------- */ .seg-h{margin-bottom:clamp(30px,4vw,56px);} .segs{border-top:1px solid var(--line-l);} .seg{ display:flex;align-items:center;gap:clamp(16px,2.6vw,40px); padding:clamp(13px,1.7vw,21px) 0;border-bottom:1px solid var(--line-l); font-family:var(--disp);font-weight:700;font-stretch:112%;text-transform:uppercase; font-size:clamp(1.05rem,1.85vw,1.65rem);line-height:1.05;letter-spacing:-.02em; color:var(--void);cursor:default; transition:color .4s var(--e-out),padding-left .55s var(--e-out); } .seg em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--accent-lo);font-weight:400;flex:none;} .seg:hover{color:var(--accent-lo);padding-left:clamp(12px,2vw,28px);} /* ---------- CTA ---------- */ .sec-cta{background:var(--carbon);color:var(--paper);position:relative;overflow:hidden;} .sec-cta::before{ content:'';position:absolute;left:-6%;bottom:-30%;width:min(60vw,700px);aspect-ratio:1; background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 62%);filter:blur(20px); } .cta{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,86px);align-items:start;} .cta-h{margin-bottom:20px;} .cta-l .body-lg{color:var(--ash);} /* No box, no rules. The label carries the structure the border used to, and each value is the link itself rather than a cell in a table. */ .cta-links{ margin-top:clamp(28px,3.6vw,46px); display:grid;gap:clamp(20px,2.4vw,30px) clamp(24px,3vw,44px); grid-template-columns:repeat(auto-fit,minmax(180px,auto)); justify-content:start; } .clink{display:flex;flex-direction:column;align-items:flex-start;gap:8px;} .clink-k{ font-size:9px;letter-spacing:.24em;text-transform:uppercase; color:var(--ash);opacity:.75; } .clink-v{ font-size:clamp(.95rem,1.2vw,1.08rem);letter-spacing:-.005em;line-height:1.2; position:relative;display:inline-block;transition:color .3s var(--e-out); } a.clink .clink-v::after{ content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px; background:var(--accent);transform:scaleX(0);transform-origin:right; transition:transform .45s var(--e-out); } a.clink:hover .clink-v{color:var(--accent-t);} a.clink:hover .clink-v::after{transform:scaleX(1);transform-origin:left;} .clink.is-static .clink-v{color:var(--ash);} .cta-wa{display:flex;flex-direction:column;gap:16px;} .wa-card{ background:rgba(255,255,255,.035); border:1px solid var(--line-d);border-radius:var(--r-md); padding:clamp(18px,2.2vw,26px); } .wa-tag{ display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase; color:var(--ash);margin-bottom:14px; } /* the message reads as the chat bubble it will become */ .wa-bubble{ position:relative;background:var(--paper);color:var(--void); border-radius:12px 12px 12px 3px; padding:14px 17px;font-size:14.5px;line-height:1.5; } .wa-bubble::after{ content:'';position:absolute;left:0;bottom:-7px; border:7px solid transparent;border-top-color:var(--paper);border-left-width:0; } .wa-glyph{width:17px;height:17px;flex:none;position:relative;z-index:2;} .form-hint{font-size:10px;color:var(--ash);opacity:.7;letter-spacing:.05em;margin-top:2px;text-align:center;} /* ---------- FOOTER ---------- */ .foot{background:var(--void);border-top:1px solid var(--line-d);padding-block:clamp(34px,4vw,54px);} .foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .foot-nav{display:flex;gap:clamp(16px,2.2vw,32px);flex-wrap:wrap;} .foot-nav a{font-size:13px;color:var(--ash);transition:color .3s;} .foot-nav a:hover{color:var(--accent);} .foot-small{font-size:10.5px;color:var(--ash);opacity:.65;letter-spacing:.04em;} .foot-social{display:flex;gap:10px;} .foot-social a{ display:grid;place-items:center;width:36px;height:36px;border-radius:50%; border:1px solid var(--line-d);color:var(--ash); transition:color .3s,border-color .3s,transform .35s var(--e-spring); } .foot-social a svg{width:17px;height:17px;} .foot-social a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);} /* ---------- TOAST ---------- */ .toast{ position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:9997; background:var(--paper);color:var(--void);padding:14px 22px;border-radius:999px; font-size:12px;letter-spacing:.03em;max-width:min(560px,90vw);text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.45); transition:transform .6s var(--e-spring); } .toast.is-on{transform:translate(-50%,0);} /* ---------- REVEAL PRIMITIVES (JS only) ---------- */ .has-js [data-fade]{opacity:0;transform:translateY(22px);} .has-js [data-stagger] > *{opacity:0;transform:translateY(26px);} .has-js .line-inner{display:inline-block;transform:translateY(105%);} .line-mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ .hero-in{grid-template-columns:1.3fr .7fr;} .why-row{grid-template-columns:52px minmax(160px,.95fr) 1.5fr 32px;} } @media (max-width:1024px){ .about-top{grid-template-columns:1fr;gap:26px;} .principles{grid-template-columns:1fr 1fr;} .pri + .pri{border-left:none;padding-left:0;} .pri:nth-child(even){border-left:1px solid var(--line-l);padding-left:clamp(16px,2.6vw,26px);} .pri:nth-child(-n+2){border-bottom:1px solid var(--line-l);} .hero-in{grid-template-columns:1fr;gap:44px;} .hero-slip{justify-content:flex-start;} .pos{width:min(320px,88vw);} .pos-feed{clip-path:inset(0 -60px -900px -60px);} .hero-h1{max-width:16ch;} .about{grid-template-columns:1fr;} .rolls{grid-template-columns:1fr;} .plate{position:static;} .cta{grid-template-columns:1fr;} .sec-head{grid-template-columns:1fr;align-items:start;gap:20px;} } @media (max-width:900px){ .nav{display:none;} .burger{display:block;} .hdr-right .btn-sm{display:none;} .why-row{grid-template-columns:auto 1fr;gap:8px 16px;align-items:start;} .why-row h3{grid-column:2;} .why-row p{grid-column:2;margin-top:8px;} .why-arrow{display:none;} .scroll-cue{display:none;} } @media (max-width:720px){ .principles{grid-template-columns:1fr;} .pri,.pri:nth-child(even){border-left:none;padding-left:0;} .pri:not(:last-child){border-bottom:1px solid var(--line-l);} .pcard{width:min(78vw,330px);} .hero{min-height:auto;padding-block:130px 70px;} .foot-in{flex-direction:column;align-items:flex-start;gap:22px;} } @media (max-width:520px){ .hero-cta{width:100%;} .hero-cta .btn{flex:1 1 100%;} .lang-b{padding:6px 9px;font-size:10.5px;} .boot-slip{padding:22px 18px 0;} .boot-perf{margin:0 -18px;} } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .grain{display:none;} .has-js [data-fade],.has-js [data-stagger] > *{opacity:1;transform:none;} .has-js .line-inner{transform:none;} .pos{transform:none;} .slip{transform:none;} .pin-track{transform:none !important;flex-wrap:wrap;justify-content:center;} } /* ---------- ADDENDA ---------- */ .boot{clip-path:inset(0 0 0 0);} /* repeat view in the same session: the curtain is never painted at all */ .no-intro .boot{display:none;} .has-js [data-hero-fade]{opacity:0;transform:translateY(22px);} /* Wide screens: the four cards are laid out in the content column instead of on a rail. Pinning the page to slide cards that are already fully visible reads as a glitch, and the row never lined up with the heading above it. */ .pin-wrap.is-grid{ width:min(var(--maxw),100% - var(--gut)*2); margin-inline:auto;overflow:visible; } .pin-wrap.is-grid .pin-track{ display:grid;grid-template-columns:repeat(4,1fr); padding-inline:0;transform:none !important; } .pin-wrap.is-grid .pcard{width:auto;} .pin-sec.is-grid .pin-bar{display:none;} /* native horizontal scroll fallback for the product rail */ .pin-wrap.is-native{ overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px; } .pin-wrap.is-native::-webkit-scrollbar{display:none;} .pin-wrap.is-native .pin-track{ padding-inline:var(--gut); padding-right:calc(var(--gut) + 20px); } .pin-wrap.is-native .pcard{scroll-snap-align:start;} @media (prefers-reduced-motion:reduce){ .has-js [data-hero-fade]{opacity:1;transform:none;} } /* roll visualiser — reference ghost */ #ghostBody,#ghostTop{stroke:#1A1C20;fill:none;opacity:.22;stroke-dasharray:3 4;stroke-width:1;} .roll-scale{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.16em;color:var(--mute);} .roll-scale i{flex:1;height:1px;background:var(--line-l2);font-style:normal;} /* ---------- GROUND ---------- The client read the page as too dark, and it was: of eight bands five were dark, with the two tallest — hero and the pinned products — both dark, so the scroll averaged out black however many paper sections sat between. Light is now the site. Dark is kept, in full, behind a toggle: it was built and approved, and most of what reads as "designed" here survives the swap because the colours were named rather than written in place. Three bands change sides; products and the footer stay dark either way, which is what keeps the light version from going flat. ?bg=paper|mist|snow still switches grounds for comparison. */ [data-ground="light"] body{background:var(--paper);color:var(--void);} /* The bands that change sides. main.js also swaps their sec-light class, because the header and the spine read that class to work out what they are sitting over — but the tokens are restated here so the first painted frame is already correct rather than waiting on script. */ [data-ground="light"] #top, [data-ground="light"] #catalog, [data-ground="light"] #why, [data-ground="light"] #contact{ background:var(--paper);color:var(--void); --ash:var(--mute); --line-d:var(--line-l); --line-d2:var(--line-l2); --accent-t:var(--accent-lo); } [data-ground="light"] #top .btn, [data-ground="light"] #contact .btn{--bc:var(--line-l2);color:var(--void);} [data-ground="light"] #top .btn-fill, [data-ground="light"] #contact .btn-fill{color:var(--accent-ink);} [data-ground="light"] .pcard::before{ background:radial-gradient(120% 90% at 50% 0%,rgba(var(--accent-rgb),.12),transparent 62%); } [data-ground="light"] .pcard:hover{ box-shadow:0 18px 34px -18px rgba(16,18,22,.30); } /* The card's format label was dimmed to sit back from white type on carbon; the same fade against dark type on a white card is a legibility problem. */ [data-ground="light"] .pcard-k{opacity:.85;} [data-ground="light"] #contact::before{ background:radial-gradient(circle,rgba(var(--accent-rgb),.14),transparent 62%); } /* The curtain hands its docket to the terminal in the hero. Left black it would hand over to a white page and read as a flash, not as a cut. */ [data-ground="light"] .boot{background:var(--paper);} [data-ground="light"] .boot-count{color:var(--void);} [data-ground="light"] .boot-slip{box-shadow:0 30px 70px -18px rgba(16,18,22,.28);} [data-ground="light"] .boot-perf, [data-ground="light"] .slip-perf{ background:radial-gradient(circle at 7px 6px,var(--paper) 5.4px,transparent 5.9px) repeat-x; } /* The hero's own furniture: the grid was drawn in light-on-dark hairlines, and the glow was tuned to bloom against black, where at .30 it only greys paper. */ [data-ground="light"] .hero-grid{ background-image: linear-gradient(to right,var(--line-l) 1px,transparent 1px), linear-gradient(to bottom,var(--line-l) 1px,transparent 1px); opacity:.7; } [data-ground="light"] .hero-glow{ background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 64%); } [data-ground="light"] .scroll-cue i{background:linear-gradient(var(--accent-lo),transparent);} /* On black the receipt separated by being the only light thing on screen. On paper it needs an edge of its own, and the terminal has to cast rather than sit. --paper stays warm inside the slip on purpose: a thermal roll is warm white, and against a cool ground that reads as an object, not a panel. */ [data-ground="light"] .slip{ box-shadow: 0 30px 60px -22px rgba(16,18,22,.34), 0 0 0 1px rgba(16,18,22,.10); } [data-ground="light"] .pos-body{ box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, -1px 0 0 rgba(255,255,255,.05) inset, 1px 0 0 rgba(0,0,0,.6) inset, 0 30px 56px -18px rgba(16,18,22,.44), 0 3px 10px rgba(16,18,22,.22); } /* ---------- GROUND TOGGLE ---------- Shows the ground you would move to, not the one you are in. Inverts with the header, same as the nav and the language pill. */ .tsw{ display:grid;place-items:center;width:34px;height:34px;flex:none; border:1px solid var(--line-d2);border-radius:50%;color:var(--paper); transition:color .3s,border-color .3s,transform .5s var(--e-spring); } .tsw svg{width:15px;height:15px;} .tsw:hover{color:var(--accent);border-color:var(--accent);transform:rotate(-20deg);} .tsw .tsw-moon{display:none;} [data-ground="light"] .tsw .tsw-moon{display:block;} [data-ground="light"] .tsw .tsw-sun{display:none;} body.hdr-light .tsw{color:var(--void);border-color:var(--line-l2);} body.hdr-light .tsw:hover{color:var(--accent-lo);border-color:var(--accent-lo);} /* --- ground palettes ------------------------------------------------------- Same structure, different stock. Each one re-points tokens only; every rule above resolves through them, so a ground is a colour decision and nothing else. Note that pure black is part of what reads as heavy — mist and snow trade it for navy and graphite. --paper stays warm inside the receipt on purpose: a thermal roll is warm white, and against a cool ground that reads as a real object rather than a panel. */ /* mist — cool blue-grey stock, brand navy in place of black. The ground is tinted toward the accent, so the blue stops looking applied and starts looking structural. */ [data-bg="mist"]{ --paper:#EDF1F7; --paper-2:#E1E7F0; --paper-3:#D2DAE6; --mute:#535B67; /* 5.9:1 on --paper */ --line-l:rgba(14,24,38,.13); --line-l2:rgba(14,24,38,.26); --void:#0E1826; --carbon:#14202F; --slate:#1C2A3C; --line-d:rgba(237,241,247,.13); --line-d2:rgba(237,241,247,.26); --ash:#909AA8; /* 6.1:1 on --void */ --glass-d:rgba(14,24,38,.72); --glass-l:rgba(237,241,247,.74); } /* snow — neutral near-white, graphite in place of black. The quietest of the three: no temperature of its own, so the blue and the orange in the logo are the only colour on the page. */ [data-bg="snow"]{ --paper:#F7F8FA; --paper-2:#EDEFF3; --paper-3:#DFE2E8; --mute:#585D65; /* 6.2:1 on --paper */ --line-l:rgba(17,20,26,.12); --line-l2:rgba(17,20,26,.24); --void:#15181E; --carbon:#1B1F26; --slate:#242932; --line-d:rgba(247,248,250,.13); --line-d2:rgba(247,248,250,.26); --ash:#949AA3; /* 6.4:1 on --void */ --glass-d:rgba(21,24,30,.72); --glass-l:rgba(247,248,250,.74); } /* The menu sheet takes the ground with it. Left on carbon while the page went light it kept its dark sheet but inherited the page's dark type, which put the whole navigation at 1.05:1 — invisible on every phone. */ [data-ground="light"] .mmenu{background:var(--paper);color:var(--void);} [data-ground="light"] .mmenu-nav a{border-bottom-color:var(--line-l);} [data-ground="light"] .mmenu-nav em{color:var(--accent-lo);} [data-ground="light"] .mmenu-foot{color:var(--mute);} [data-ground="light"] body.menu-open .burger i{background:var(--void);} /* ---------- MOBILE PAINT BUDGET ---------- The receipt is transformed on every scroll frame, and on a phone GPU the layers stacked around it cost more than the effect is worth. Each rule here removes a full-viewport or per-frame composite that a desktop absorbs and a phone does not: grain a fixed, animated, full-screen layer — recomposited for the whole viewport on every step, and at .05 opacity essentially invisible at this size anyway glow a 24px blur over a ~58vw square; the gradient underneath is already soft, so the filter buys almost nothing slip::after a 1px repeating gradient painted over a moving element slip-scan a second animated overlay on that same moving element The terminal, the paper and the motion all stay. Only the cost goes. */ @media (max-width:900px){ .grain{display:none;} .hero-glow{filter:none;} .slip::after{ background:linear-gradient(90deg,rgba(0,0,0,.10),transparent 9%,transparent 91%,rgba(0,0,0,.10)); } .slip-scan{display:none;} .slip{ box-shadow:0 18px 34px -18px rgba(0,0,0,.55),1px 0 0 rgba(0,0,0,.12),-1px 0 0 rgba(0,0,0,.12); } [data-ground="light"] .slip{ box-shadow:0 16px 30px -16px rgba(16,18,22,.28),0 0 0 1px rgba(16,18,22,.10); } .pos-body{ box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 16px 30px -14px rgba(0,0,0,.75); } [data-ground="light"] .pos-body{ box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 16px 30px -14px rgba(16,18,22,.34); } }