/* ========================================================================== VIBE — design system, 2026 rebuild Anthropic structure on a dark ground. Extracted from hero.html so every page shares one source of truth; hero.html links this and keeps only its canvas-hero rules inline. Rules of the system: · surface #07080E, flat. No ambient blobs, no glass, no glow stacks. · the brand gradient appears ONCE per screen, on one word or one object. · mono uppercase micro-labels carry the "lab" read. · hairlines at 8-10% alpha instead of cards and shadows. ========================================================================== */ renders as a flat rectangle — and those rectangles ARE the logo. Raising the camera is the whole reveal. Nothing is swapped, nothing morphs. Changed from skyline.html (the prototype): · Materials. The city is near-neutral graphite, lit by one direction. Colour is reserved for the ~7% of buildings that are instrumented venues, which read as embers. Previously every roof was tinted, which is why it looked like a heat map rather than a city. · Depth. Per-face vertical gradients, soft contact shadows, facade banding on towers, parapet highlights, and a neutral fog that fades the far city INTO the page background instead of sitting on top of it. · Post. The magenta haze and river wash are gone; bloom is half as strong. · Camera. Slower, wider, higher. The type arrives while the city settles. --------------------------------------------------------------------------- */ @font-face { font-family:'Pepi'; src:url('../fonts/Pepi-Light.otf') format('opentype'); font-weight:300; font-display:swap; } @font-face { font-family:'Pepi'; src:url('../fonts/Pepi-Regular.otf') format('opentype'); font-weight:400; font-display:swap; } @font-face { font-family:'Pepi'; src:url('../fonts/Pepi-Medium.otf') format('opentype'); font-weight:500; font-display:swap; } @font-face { font-family:'Pepi'; src:url('../fonts/Pepi-SemiBold.otf') format('opentype'); font-weight:600; font-display:swap; } @font-face { font-family:'Inter'; src:url('../fonts/Inter-Black.ttf') format('truetype'); font-weight:900; font-display:swap; } /* Korbin Bold — content headers. NOT the hero H1, which stays Pepi. Licensed release (219 glyphs), replacing the Fontspring demo that shipped until 2026-09-21. The demo carried 95 glyphs: no em/en dash, no curly quotes, no © · × …, which is why headings had to be kept ASCII. woff2 first (19 KB); the ttf is the fallback for anything that cannot take it. Arrows (←↑→↓) are absent from BOTH releases — keep them out of Korbin text. */ @font-face { font-family:'Korbin'; src:url('../fonts/Korbin-Bold.woff2') format('woff2'), url('../fonts/Korbin-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } /* Code Saver — data, values, stats, micro-labels. TRIAL LICENCE: personal use only. Buy a commercial licence from dharmatype.com before this deploys. */ @font-face { font-family:'CodeSaver'; src:url('../fonts/CodeSaver-Regular.otf') format('opentype'); font-weight:400; font-display:swap; } :root{ --ink: #07080E; --fg: #F4F3F8; --fg-2: #A9AABC; --fg-3: #6E7085; --line: rgba(226,228,255,0.10); --line-2: rgba(226,228,255,0.20); --g-orange: #FF6B1A; --g-pink: #E91E63; --g-magenta: #D61E7C; --g-purple: #B026FF; --grad: linear-gradient(45deg,#FF6B1A 0%,#E91E63 38%,#D61E7C 62%,#B026FF 100%); --gutter: clamp(22px,5.2vw,80px); --maxw: 1340px; --mono: 'CodeSaver', ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; --display: 'Korbin', 'Pepi', -apple-system, BlinkMacSystemFont, sans-serif; --sans: 'Pepi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ease: cubic-bezier(.16,1,.3,1); } *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; } html{ background:var(--ink); } body{ font-family:var(--sans); background:var(--ink); color:var(--fg); line-height:1.55; -webkit-font-smoothing:antialiased; } canvas,svg,img{ display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } /* ---------- nav ---------- */ .nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; max-width:var(--maxw); margin:0 auto; padding:24px var(--gutter); } /* the hero fades its nav in with the reveal; every other page shows it at once */ .nav--intro{ opacity:0; transform:translateY(-8px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .nav--intro.on{ opacity:1; transform:none; } .brand{ display:flex; align-items:center; gap:11px; } .brand img{ width:21px; height:auto; } .brand b{ font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight:900; font-size:19px; letter-spacing:-.035em; line-height:1; text-transform:lowercase; } .nav nav{ display:flex; gap:32px; font-size:14.5px; color:var(--fg-2); } .nav nav a{ transition:color .25s var(--ease); } .nav nav a:hover{ color:var(--fg); } .pill{ font-size:14px; font-weight:500; padding:9px 19px; border-radius:99px; background:var(--fg); color:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); } .pill:hover{ transform:translateY(-1px); opacity:.9; } /* ---- the menu button + the mobile panel ---- Below 900px the nav links used to be `display:none` with nothing in their place, so a phone could not reach About/Research/Network/App/Venues from the header at all -- the footer was the only way through the site. The SAME