@font-face{font-family:'Montserrat';font-style:normal;font-weight:400; font-display:swap;src:url('../fonts/montserrat-400.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500; font-display:swap;src:url('../fonts/montserrat-500.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600; font-display:swap;src:url('../fonts/montserrat-600.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700; font-display:swap;src:url('../fonts/montserrat-700.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800; font-display:swap;src:url('../fonts/montserrat-800.woff2') format('woff2')} /* ============================================================ PALETTE — Taste Studios brand colours, applied as a theme token set that each section re-declares. Sections alternate light / tint / dark / red, Apple-style, and every component reads the tokens rather than hard-coding a colour. Brand Red #CC0000 emphasis, headlines, CTAs Brand Silver #B0B0B0 supporting, subtle accents Charcoal #2D2D2D text on light Mid Gray #666666 secondary text, captions Off-White #F5F5F5 background tint, cards, panels Two deviations, both forced by contrast (flagged to Nikko): - Brand Red is 2.34:1 on charcoal, so dark sections use a lightened red #FF3333 (5.33:1). Brand Red stays exact everywhere it sits on a light ground. - Brand Silver is 1.99:1 on Off-White, so silver is only ever used on dark grounds. ============================================================ */ :root{ --red:#CC0000; --red-lift:#FF3333; --silver:#B0B0B0; --charcoal:#2D2D2D; --mid:#666666; --off:#F5F5F5; --ink-deep:#111111; --dark:#161616; --dark-2:#1F1F1F; --ease:cubic-bezier(.22,.68,.28,1); --soft:cubic-bezier(.16,1,.3,1); /* long tail, no snap at the end */ /* fallbacks so anything outside a themed section still resolves these */ --acc:var(--red); --acc-sm:var(--red); --fg:var(--charcoal); --fg2:var(--mid); } /* light ground (default) */ .s{ --bg:#FFFFFF; --fg:var(--charcoal); --fg2:var(--mid); --faint:var(--mid); --acc:var(--red); --on-acc:#FFFFFF; --card:var(--off); --card-hov:#EDEDED; --card-ln:rgba(45,45,45,.10); --hair:rgba(45,45,45,.13); --hair-2:rgba(45,45,45,.26); --hatch:rgba(45,45,45,.07); } .s.tint{ --bg:var(--off); --card:#FFFFFF; --card-hov:#FAFAFA; } .s.dark{ --bg:var(--dark); --fg:var(--off); --fg2:var(--silver); --faint:#8A8A8A; --acc:var(--red-lift); --on-acc:#151515; --acc-sm:#FF5555; /* 12px labels need more than --acc gives */ --card:var(--dark-2); --card-hov:#282828; --card-ln:rgba(245,245,245,.11); --hair:rgba(245,245,245,.13); --hair-2:rgba(245,245,245,.26); --hatch:rgba(245,245,245,.045); } .s.red{ --bg:var(--red); --fg:#FFFFFF; --fg2:#FFFFFF; --faint:#FFFFFF; --acc:#FFFFFF; --on-acc:var(--red); --hair:rgba(255,255,255,.24); --hair-2:rgba(255,255,255,.4); } .s{background:var(--bg);color:var(--fg)} *{box-sizing:border-box} html{scroll-behavior:smooth} /* clip, not hidden: 'hidden' turns into a scroll container and breaks the hero's position:sticky pin; 'clip' stops sideways overflow the same way without that side effect. */ body{margin:0;background:#FFFFFF;color:var(--charcoal); font-family:'Montserrat',system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:clip} p{margin:0} .wrap{max-width:1220px;margin:0 auto;padding:0 30px} @media (max-width:640px){.wrap{padding:0 20px}} .banner{background:var(--ink-deep);border-bottom:1px solid rgba(255,255,255,.12); padding:9px 20px;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase; font-weight:700;color:#9A9A9A;text-align:center} .banner b{color:var(--red-lift)} /* ============ MOTION ============ One rAF scroll loop drives everything scroll-linked: parallax inside image frames, the hero's depth fade, the word-by-word north star, the active section marker, the progress bar. Entrances are IntersectionObserver + CSS transitions. The marquee is a pure CSS animation. Everything switches off under prefers-reduced-motion. */ .prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:90} [data-rise]{opacity:0;transform:translate3d(0,42px,0) scale(.99); transition:opacity .55s var(--ease),transform .66s var(--soft);transition-delay:var(--d,0ms)} [data-rise].in{opacity:1;transform:none} .line{display:block;overflow:hidden;padding-bottom:.1em} .line>span{display:block;transform:translateY(112%); transition:transform .6s var(--soft);transition-delay:var(--d,0ms)} .lit .line>span{transform:none} /* Image frame: the clip reveals the frame, the inner layer parallaxes. Two elements so the reveal and the parallax never fight over the same transform. The observer watches the wrapper, never the clipped box, because a fully clipped element reports no intersection. */ .frame{position:relative;overflow:hidden;border:1px solid var(--hair)} .media .frame{clip-path:inset(0 0 100% 0);transition:clip-path .58s var(--ease)} .media.in .frame{clip-path:inset(0 0 0 0)} .frame .slot{position:absolute;inset:0;border:none} /* the 1.18 base scale exists only to give the parallax layer room to travel without exposing an edge, so it applies only where it parallaxes */ .frame .slot[data-par]{transform:scale(1.18);will-change:transform} /* the placeholder .slot carries padding and a hatch for its label layout; an image must reset both or it paints inset inside its own background */ img.slot{object-fit:cover;display:block;width:100%;height:100%; padding:0;background:none;gap:0} /* parallax is desktop-only, so don't pay for the layer anywhere else */ /* Parallax is desktop-only; off touch/narrow, drop the base zoom too so the image sits at its true framing instead of a cropped 1.18 with no motion. */ @media (pointer:coarse),(max-width:640px){.frame .slot[data-par]{transform:none;will-change:auto}} /* no static will-change here: the loop sets it only while the hero is actually moving, so the layer is not promoted for the whole page */ /* North star, word by word */ /* .70 not .34: an unlit word is a resting state if the reader stops here, so it has to clear 3:1 for large text on Brand Red on its own */ .rw span{opacity:.70;transition:opacity .32s var(--ease)} .rw span.on{opacity:1} .mq{overflow:hidden;background:var(--ink-deep);padding:34px 0;position:relative} /* WCAG 2.2.2: motion that starts on its own and runs past 5s needs a way to stop it. Hidden until hover or keyboard focus, so the resting design is unchanged, and it stays visible while paused so it can be restarted. */ .mq-toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%); width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer; display:grid;place-items:center;font:inherit;color:var(--off); background:rgba(17,17,17,.78);border:1px solid rgba(245,245,245,.34); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;transition:opacity .25s var(--ease),border-color .2s} .mq:hover .mq-toggle,.mq:focus-within .mq-toggle, .mq-toggle[aria-pressed="true"]{opacity:1} .mq-toggle:hover{border-color:var(--off)} .mq-toggle svg{width:13px;height:13px;fill:currentColor;display:block} .mq-toggle .ico-play{display:none} .mq-toggle[aria-pressed="true"] .ico-play{display:block} .mq-toggle[aria-pressed="true"] .ico-pause{display:none} .mq-track.paused{animation-play-state:paused} .mq-track{display:flex;align-items:center;gap:34px;width:max-content; animation:slide 40s linear infinite} .mq-track .w{font-family:'Montserrat',system-ui,sans-serif;font-weight:800;font-size:clamp(1.625rem,4.4vw,3.5rem); letter-spacing:-.024em;text-transform:lowercase;color:var(--off);white-space:nowrap;line-height:1.02} /* alternate solid and outlined so the line has rhythm rather than one flat run of grey */ .mq-track .w.o{color:transparent;-webkit-text-stroke:1px rgba(245,245,245,.5)} @supports not (-webkit-text-stroke:1px #000){.mq-track .w.o{color:rgba(245,245,245,.5)}} .mq-track .dot{color:var(--red-lift);font-size:clamp(0.8125rem,1.4vw,1.125rem);line-height:1} @keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* no hover auto-pause: with an explicit control it made "resume" look broken, because the cursor is still over the band after the click */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-rise],[data-rise].in{opacity:1;transform:none;transition:none} .line>span{transform:none;transition:none} .media .frame{clip-path:none;transition:none} .frame .slot{transform:none} .rw span{opacity:1} .mq-track{animation:none;width:auto;flex-wrap:wrap} .mq-toggle{display:none} /* nothing is moving, so nothing to pause */ .step[open] .step-body{transition:none;grid-template-rows:1fr} .step .tag,.step[open] .tag{opacity:1;transform:none;transition:none;transition-delay:0ms} .card,.brand,.btn,.nav-toggle,.nav-links{transition:none} .sec>.wrap{transform:none !important;opacity:1 !important} .prog{display:none} } /* Honor the two other environment signals Apple bakes in: when the reader asks for less transparency, drop the blur and make the floating chrome solid; when they ask for more contrast, solidify it and firm the edge. */ @media (prefers-reduced-transparency:reduce){ .nav{backdrop-filter:none;-webkit-backdrop-filter:none} .nav.stuck{background:rgb(var(--nav-bg))} .mq-toggle{backdrop-filter:none;-webkit-backdrop-filter:none;background:#111} } @media (prefers-contrast:more){ .nav.stuck{background:rgb(var(--nav-bg));border-bottom-color:rgba(var(--nav-ln),.5)} } /* ============ TYPE ============ */ h1,h2,h3,h4{font-family:'Montserrat',system-ui,sans-serif;margin:0;color:var(--fg);text-wrap:balance} h1{font-size:clamp(2.25rem,6.6vw,5rem);font-weight:700;line-height:1.04;letter-spacing:-.026em} h2{font-size:clamp(1.875rem,4.8vw,3.625rem);font-weight:700;line-height:1.06;letter-spacing:-.022em} h3{font-size:1.25rem;font-weight:700;line-height:1.28;letter-spacing:-.008em} h4{font-size:0.96875rem;font-weight:700;letter-spacing:-.003em} .accent{color:var(--acc)} .body{font-size:1.09375rem;line-height:1.62;color:var(--fg2);max-width:62ch} .body.lg{font-size:1.25rem;line-height:1.5;color:var(--fg);max-width:56ch} .small{font-size:0.90625rem;line-height:1.6;color:var(--fg2)} .eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--faint);margin:0 0 20px} /* Sections settle in rather than hard-cutting: the loop drives a short lift and fade on the content block as the boundary crosses the viewport, then clears the inline styles so no layer is left promoted. */ .sec>.wrap{transform:translate3d(0,0,0)} /* ============ S.0x spine ============ */ .sec{padding:112px 0} @media (max-width:640px){.sec{padding:76px 0}} .rail{display:grid;grid-template-columns:110px 1fr;gap:34px;align-items:stretch} @media (max-width:900px){.rail{grid-template-columns:1fr;gap:16px}} .scol{position:relative} .snum{position:sticky;top:104px;font-family:'Montserrat',system-ui,sans-serif;font-weight:700; font-size:0.8125rem;letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:10px;transition:color .4s var(--ease)} .snum::after{content:'';flex:1;height:1px;background:var(--hair);transition:background .4s var(--ease)} .sec.active .snum{color:var(--acc)} .sec.active .snum::after{background:var(--acc)} @media (max-width:900px){.snum{position:static}.snum::after{display:none}} /* ============ nav ============ */ /* The nav reads the section passing underneath it and re-themes, so it never sits on a light section as a heavy grey slab. .on-light is set by the scroll loop from the section currently under the bar. */ .nav{position:sticky;top:0;z-index:40; --nav-bg:17,17,17; --nav-fg:#F5F5F5; --nav-fg2:var(--silver); --nav-acc:var(--red-lift); --nav-btn-fg:#151515; --nav-ln:255,255,255; background:var(--ink-deep);backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent; transition:background .55s var(--ease),border-color .55s var(--ease), color .55s var(--ease)} .nav.on-light{--nav-bg:255,255,255; --nav-fg:var(--charcoal); --nav-fg2:var(--mid); --nav-acc:var(--red); --nav-btn-fg:#FFFFFF; --nav-ln:45,45,45} .nav.stuck{background:rgba(var(--nav-bg),.93);border-bottom-color:rgba(var(--nav-ln),.10)} /* Scroll-edge effect (Apple): a soft fade where content passes under the floating chrome, in place of a hard divider. Tinted with the nav's own ground so it reads correctly over both light and dark sections. */ .nav::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px; pointer-events:none;opacity:0;transition:opacity .55s var(--ease); background:linear-gradient(rgba(var(--nav-bg),.5),rgba(var(--nav-bg),0))} .nav.stuck::after{opacity:1} .nav-in{max-width:1220px;margin:0 auto;padding:0 30px;height:68px;display:flex; align-items:center;justify-content:space-between;gap:20px} /* ---- wordmark. Default is the supplied mark; data-mark="type" on switches to the Montserrat lockup. Two logo files because the mark's Brand Silver measures 1.99:1 on white: exempt as a logo, but weak. ---- */ .mark{display:flex;align-items:center;text-decoration:none;border:0} .mark-logo{height:26px;width:auto;display:none} .mark-type{display:none;font-family:'Montserrat',system-ui,sans-serif;font-weight:700;font-size:0.9375rem; letter-spacing:.055em;text-transform:uppercase;white-space:nowrap; color:var(--nav-fg);transition:color .55s var(--ease)} .mark-type i{font-style:normal;color:var(--nav-acc);margin-left:.34em; transition:color .55s var(--ease)} [data-mark="logo"] .mark-logo-dark{display:block} [data-mark="logo"] .nav.on-light .mark-logo-dark{display:none} [data-mark="logo"] .nav.on-light .mark-logo-light{display:block} [data-mark="type"] .mark-type{display:block} /*