/* ── yuno-base.css ──────────────────────────────────────────────────────── The shared chrome: tokens, type, cursor, substrate, nav, footer, and the line-mask reveal primitive. Extracted verbatim from index.html so the two are identical at birth. index.html still carries its own inline copy — see docs/superpowers/specs/2026-09-20-souito-case-study-design.md §3.4. ───────────────────────────────────────────────────────────────────── */ /* ── Batica Sans — the site face since 11 Sep 2026 ───────────────────── Self-hosted, converted OTF→WOFF2 unmodified (EULA §5). ONE weight only (Regular 400): with font-synthesis:none below, anything asking for 500–700 renders at 400 — there is no bold. Missing glyphs (→ ↑ ■ ▶ ● ⚠ emoji) fall through to the next font in each stack. LICENCE: 1001fonts "Free For Personal Use" — company websites count as commercial use and need written permission from the author. Do NOT deploy to the live site with this face until that licence is in hand. */ /* Small labels: Creato Display (SIL OFL 1.1, fonts/CreatoDisplay-OFL.txt). */ @font-face{font-family:"Creato Display";src:url("/fonts/CreatoDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Creato Display";src:url("/fonts/CreatoDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Creato Display";src:url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{ font-family:"Batica Sans"; src:url("/fonts/BaticaSans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } /* ── SF Pro (Apple), self-hosted — display face for non-heading text ────────────────────────────────────── Built from SF Pro Fonts.pkg: wdth pinned to 100, opsz pinned to 28 (the Display optical size), wght axis kept live at 200–900, subset to Latin + the punctuation/symbols this page actually uses. 83 KB. Only the UPRIGHT face is loaded — there is deliberately no italic file, and font-synthesis:none below stops the browser from faking one. */ @font-face{ font-family:"SF Pro Display"; src:url("/fonts/SF-Pro-Display-var.woff2") format("woff2"); font-weight:200 900; font-style:normal; font-display:swap; } :root{ /* ── Yuno palette — sampled off the logo render (Sudhe, 03 Sep) ── #040404 black · #FAFAFA white · #292828 3D dark grey · #464645 3D grey #949494 added: secondary body text (6.76:1). #8A8A8A is 5.72:1 on --bg and 4.98:1 on --surface — the old #7B7B7B cleared --bg but failed AA at 4.35:1 against --surface, where the offer band puts it. Pure monochrome: --gold is white. Swap that ONE line to add an accent. */ --ink:#FAFAFA; --bg:#040404; --surface:#141414; --surface-2:#292828; --bone:#FAFAFA; --bone-dim:#949494; --bone-faint:#8A8A8A; --gold:#FAFAFA; --gold-bright:#FFFFFF; --clay:#C9C9C9; --rule:#292828; --rule-gold:#464645; /* Headings (--font-h) and body text (--font-d, --font-b) on Batica Sans; small small labels are Creato Display (was JetBrains Mono). Original stack, to switch back: --font-d:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-b:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif; */ --font-h:"Batica Sans","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-d:"Batica Sans","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-b:"Batica Sans","Plus Jakarta Sans",-apple-system,system-ui,sans-serif; --font-m:"Creato Display","Batica Sans",-apple-system,system-ui,sans-serif; --maxw:1280px; --gut:clamp(20px,5vw,80px); --edge:clamp(22px,4.2vw,62px); /* One rhythm for every display line. SF Pro's own box is 1.193em (asc 1950 + desc 494 / 2048 upem), so anything under ~1.13 clips descenders inside the overflow:hidden .line reveal masks. */ --lh-head:1.15; --lh-sub:1.5; --ease:cubic-bezier(.22,1,.36,1); --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-out-quart:cubic-bezier(.25,1,.5,1); } *{box-sizing:border-box;margin:0;padding:0;font-synthesis:none;-webkit-font-synthesis:none} html,body{overflow-x:clip} body{font-family:var(--font-b);background:transparent;color:var(--bone);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased} /* ---- fixed grainy-gradient substrate (static) ---- */ .bg-texture{position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(60% 80% at 20% 20%,rgba(250,250,250,.10),transparent 60%), radial-gradient(70% 90% at 82% 55%,rgba(250,250,250,.10),transparent 62%), var(--bg)} .bg-texture::after{content:"";position:absolute;inset:0;opacity:.055;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---- line-mask reveal primitive (signature) ---- */ .line{display:block;overflow:hidden} .line-inner{display:block;will-change:transform} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-h);font-weight:340;font-style:normal;line-height:var(--lh-head);letter-spacing:-.021em} ::selection{background:var(--gold);color:var(--bg)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .mono{font-family:var(--font-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500} .em{font-style:normal;font-weight:600;color:var(--gold)} /* ---- custom cursor: a drafting crosshair leaving pen ticks ---- */ @media (hover:hover) and (pointer:fine){ body{cursor:none} .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transform:translate(-50%,-50%);will-change:transform} .cur-dot{width:7px;height:7px;background:var(--gold);box-shadow:0 0 10px var(--gold)} .cur-ring{width:34px;height:34px;border:1px solid rgba(250,250,250,.55);transition:border-color .25s var(--ease),background .25s} .puzz{position:fixed;z-index:9998;pointer-events:none;width:18px;height:18px;transform:translate(-50%,-50%) rotate(var(--r,0deg));opacity:.0;animation:puzzfade 1.1s var(--ease) forwards} @keyframes puzzfade{0%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--r)) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--r) + 24deg)) scale(1.1) translateY(10px)}} } /* ---- nav ---- */ header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .5s var(--ease),border-color .5s,backdrop-filter .5s} header.scrolled{background:rgba(4,4,4,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)} /* The nav rides the hero's edge, not the page column: the mark sits directly above the headline's first letter and the CTA mirrors it on the right. The bands below keep the centred column — nav + hero read as the title spread. */ .nav{display:flex;align-items:center;justify-content:space-between;padding-block:18px; max-width:none;padding-left:var(--edge);padding-right:var(--edge)} /* The UN mark (760×390, no padding) sits at its own size. */ /* Synced from index.html so the bar is identical on a case study. */ /* The UN mark alone: the image is the full UN + theyuno! lockup (1495x344), and the mark is its first 710px, so the box is 710/344 as wide as it is tall and clips the wordmark off. */ .brand{display:block;height:24px;width:calc(24px * 710 / 344);overflow:hidden;flex:0 0 auto} .brand img{display:block;height:100%;width:auto;max-width:none} .foot .brand{width:48px;height:24px} .foot .brand img{width:73px;height:73px;margin:-25px 0 0 -14px} .navlinks{display:flex;gap:34px;align-items:center} .navlinks a{font-size:.82rem;color:var(--bone-dim);transition:color .3s;position:relative} .navlinks a:hover{color:var(--bone)} .navlinks a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out-expo)} .navlinks a:hover::after{transform:scaleX(1)} /* the link for the section you're looking at keeps its tick drawn */ .navlinks a.is-current{color:var(--bone)} .navlinks a.is-current::after{transform:scaleX(1)} /* transition is scoped to the four properties the hover actually changes. It used to be `all`, which meant CSS was transitioning opacity at the same time GSAP's entrance tween animated it — the two settled at a value below 1 and left this button permanently faded. */ .btn{font-family:var(--font-b);font-weight:600;font-size:.8rem;padding:11px 21px;border-radius:999px;border:1px solid var(--rule-gold);color:var(--gold);background:transparent;cursor:none;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .btn:hover{background:var(--gold);color:var(--bg);border-color:var(--gold);transform:translateY(-2px)} .btn.solid{background:var(--gold);color:var(--bg);border-color:var(--gold)} .btn.solid:hover{background:var(--gold-bright);border-color:var(--gold-bright)} /* ---- phone menu ---- */ /* ---- generic ---- */ .band{padding:clamp(90px,14vw,180px) 0;position:relative} /* ---- the spine ---- */ main{position:relative} /* the spine measures itself against main */ .spine{position:absolute;left:calc(var(--edge) / 2 + 6px);top:0;bottom:0;width:1px;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent,var(--rule) 4%,var(--rule) 96%,transparent)} .spine-fill{position:absolute;inset:0;transform-origin:top center;transform:scaleY(0); background:linear-gradient(180deg,transparent,var(--rule-gold) 6%,var(--rule-gold) 94%,transparent)} .spine i{position:absolute;left:0;width:13px;height:1px;background:var(--rule-gold);opacity:0} .spine i.on{background:var(--gold)} @media(max-width:880px){.spine{display:none}} .seclabel{display:flex;align-items:center;gap:14px;margin-bottom:34px} .seclabel .n{font-family:var(--font-m);font-size:.7rem;color:var(--gold);letter-spacing:.2em} .seclabel .t{font-family:var(--font-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint)} .seclabel .bar{flex:1;height:1px;background:var(--rule)} .lead{font-family:var(--font-h);font-weight:330;font-size:clamp(1.9rem,4vw,3.3rem);line-height:var(--lh-head);letter-spacing:-.02em;max-width:16ch} .anim{opacity:0;transform:translateY(30px)} [data-reveal]{opacity:0} /* cta */ .cta{text-align:center;border-top:1px solid var(--rule);background:radial-gradient(80% 130% at 50% 100%,rgba(250,250,250,.13),transparent 60%)} .cta h2{font-size:clamp(2.3rem,6vw,4.6rem);margin-bottom:20px} .cta p{font-family:var(--font-d);font-size:1.06rem;line-height:var(--lh-sub);color:var(--bone-dim);max-width:34ch;margin:0 auto 36px} .cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} footer{border-top:1px solid var(--rule);padding:clamp(44px,5.5vw,72px) 0 clamp(24px,3vw,34px);background:var(--bg);overflow:hidden} .foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,110px);align-items:start} .foot-lead{max-width:60ch} .foot-h{font-family:var(--font-d);font-weight:330;font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:var(--lh-head);letter-spacing:-.02em;margin-bottom:14px;max-width:22ch} .foot-sub{color:var(--bone-dim);font-size:1rem;line-height:1.65;max-width:44ch;margin-bottom:28px} /* Contact: three equal buttons, icon + what it is + where it goes. */ .foot-links{display:flex;flex-wrap:wrap;gap:12px} .foot-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 16px 6px 12px; border:1px solid var(--rule-gold);border-radius:999px;color:var(--bone); transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)} .foot-link svg{width:16px;height:16px;flex:none} .foot-link span{display:flex;flex-direction:column;line-height:1.2} .foot-link b{font-weight:600;font-size:.84rem} .foot-link i{font-style:normal;font-size:.7rem;color:var(--bone-dim)} .foot-link:hover{border-color:var(--bone);background:rgba(250,250,250,.05);transform:translateY(-2px)} .foot-link:focus-visible{outline:1px solid var(--bone);outline-offset:3px} .foot-colk{color:var(--bone) !important;letter-spacing:.2em;margin-bottom:4px} .foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px; margin-top:clamp(40px,5vw,66px);padding-top:20px;border-top:1px solid var(--rule)} .foot-base .q{font-family:var(--font-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)} .foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:11px} .foot-cols li{font-family:var(--font-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)} .foot-cols li.q{color:var(--bone-faint)} @media(max-width:880px){.foot-top{grid-template-columns:1fr}} @media(max-width:560px){.foot-links{flex-direction:column}.foot-link{width:100%}} /* Read by screen readers and search engines, not drawn. */ .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}