/* ============================================================ ENDUURR · FOUR DESIGN SYSTEMS, ONE CODEBASE Switch with data-theme on . 01 night NIGHT SHIFT dark · volt accent · Anton 02 startline START LINE light · timing blue · Archivo Black 03 noir NOIR PROTOCOL dark · NO accent · Anton / Space Grotesk 04 lab LAB SHEET light · lactate red · Archivo Black / serif italic Systems 03 and 04 are ported from the founder's launch drafts (reference/source-drafts/). Their rules are preserved, not reinterpreted. Every colour is a token. Never hardcode a hex in a component rule. ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ---------- Shared foundation ---------- */ :root { --font-anton: "Anton", "Arial Narrow", sans-serif; --font-archivo: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-archivo-black: "Archivo Black", "Helvetica Neue", Arial, sans-serif; --font-grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono-plex: "IBM Plex Mono", "Courier New", monospace; --font-serif: "Instrument Serif", Georgia, serif; --container: 1240px; --gutter: clamp(20px, 4vw, 56px); --ease-hard: cubic-bezier(.85, 0, .15, 1); --ease-soft: cubic-bezier(.16, 1, .3, 1); --z-nav: 50; --z-cursor: 200; --z-flash: 300; --z-preloader: 400; /* Defaults every theme may override */ --radius: 0px; --radius-lg: 0px; --btn-radius: 0px; --grain-opacity: 0; --reveal-dur: .7s; --reveal-ease: var(--ease-soft); --display-transform: uppercase; --display-weight: 400; --display-lh: .94; --display-spacing: 0em; --mono-spacing: .2em; --page-texture: none; --page-texture-size: auto; } /* ============================================================ 01 · NIGHT SHIFT, the gym at 11 PM. Campaign-native. ============================================================ */ [data-theme="night"] { --bg: #0A0A0B; --bg-2: #101012; --bg-3: #161618; --ink: #F2F1EC; --dim: #9B9A93; --faint: #55544E; --line: #232326; --line-strong: #34343A; --accent: #D9FF3F; /* Electrolyte */ --accent-ink: #0A0A0B; --font-display: var(--font-anton); --font-body: var(--font-archivo); --font-mono: var(--font-mono-plex); --display-lh: .92; --display-spacing: .01em; --grain-opacity: .06; --reveal-dur: .55s; --reveal-ease: var(--ease-hard); --hl-color: var(--accent); --hl-font: var(--font-display); --hl-style: normal; --tick-color: var(--accent); --rule-num-color: var(--accent); } /* ============================================================ 02 · START LINE, the timing board. Cold light, no nostalgia. Replaces the retired "First Light" system: that one was warm paper + serif italic, which read as generic editorial and collided with System 04. This one is a race-results sheet: cold white, tabular numerals, one electric timing blue. No serif anywhere. Ever. ============================================================ */ [data-theme="startline"] { --bg: #FAFBFC; --bg-2: #FFFFFF; --bg-3: #EEF1F4; --ink: #0B0E11; --dim: #5A646E; --faint: #A6B0BA; --line: #DDE3E9; --line-strong: #0B0E11; --accent: #0038FF; /* Timing blue, chip, split, live */ --accent-ink: #FFFFFF; --font-display: var(--font-archivo-black); --font-body: var(--font-archivo); --font-mono: var(--font-mono-plex); --display-transform: uppercase; --display-lh: .9; --display-spacing: -.035em; --mono-spacing: .16em; --radius: 2px; --radius-lg: 2px; --btn-radius: 2px; --grain-opacity: 0; --reveal-dur: .6s; --reveal-ease: var(--ease-hard); /* faint lane markings */ --page-texture: repeating-linear-gradient(90deg, transparent 0 119px, #E9EDF1 119px 120px); --page-texture-size: auto; /* R-02: no serif, in any weight, for any reason */ --hl-color: var(--accent); --hl-font: var(--font-display); --hl-style: normal; --tick-color: var(--accent); --rule-num-color: var(--accent); } /* ============================================================ 03 · NOIR PROTOCOL, pure monochrome. No accent colour, ever. The accent is motion, scale and restraint. ============================================================ */ [data-theme="noir"] { --bg: #0A0A0A; --bg-2: #111110; --bg-3: #1C1C1B; --ink: #EDECE6; --dim: #9C9B94; --faint: #5E5D58; --line: #262625; --line-strong: #3A3A38; --accent: #EDECE6; /* R-01: emphasis is scale/motion, not hue */ --accent-ink: #0A0A0A; --font-display: var(--font-anton); --font-body: var(--font-grotesk); --font-mono: var(--font-mono-plex); --display-lh: .92; --display-spacing: .005em; --mono-spacing: .24em; --grain-opacity: .05; --reveal-dur: .8s; /* R-01: no accent colour, ever, emphasis is scale and restraint */ --hl-color: var(--faint); --hl-font: var(--font-display); --hl-style: normal; --tick-color: var(--faint); --rule-num-color: var(--ink); } /* ============================================================ 04 · LAB SHEET, the brand bible printed on graph paper. Warm paper, black ink, ONE clinical accent used only for data, marks and live states. ============================================================ */ [data-theme="lab"] { --bg: #F4F2EC; --bg-2: #FFFFFF; --bg-3: #ECEAE2; --ink: #141412; --dim: #6E6C64; --faint: #A8A599; --line: #D5D1C4; --line-strong: #141412; --accent: #D8321E; /* Lactate red, data & live states ONLY */ --accent-ink: #F4F2EC; --grid: #E0DDD2; --font-display: var(--font-archivo-black); --font-body: var(--font-archivo); --font-mono: var(--font-mono-plex); --display-lh: .94; --display-spacing: -.01em; --mono-spacing: .2em; --grain-opacity: 0; --reveal-dur: .8s; /* R-04: the graph-paper grid is always visible at page level */ --page-texture: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); --page-texture-size: 100% 72px, 72px 100%; /* R-03: serif italic is the only softness allowed, one phrase per headline */ --hl-font: var(--font-serif); --hl-style: italic; --hl-transform: none; --hl-spacing: 0; --hl-weight: 400; --hl-color: var(--ink); --tick-color: var(--accent); --rule-num-color: var(--accent); } /* ---------- Base ---------- */ body { font-family: var(--font-body); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; background-color: var(--bg); background-image: var(--page-texture); background-size: var(--page-texture-size); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color .45s ease, color .45s ease; } ::selection { background: var(--accent); color: var(--accent-ink); } [data-theme="noir"] ::selection { background: var(--ink); color: var(--bg); } /* Film grain, dark systems only. NEVER add mix-blend-mode here: a blended fixed layer this size makes some compositors drop the page. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------- Typographic primitives ---------- */ .mono-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--mono-spacing); text-transform: uppercase; font-weight: 400; } .section-label { color: var(--dim); margin-bottom: clamp(20px, 3.5vw, 40px); } .section-label::before { content: " "; color: var(--tick-color, var(--accent)); } .display, .hero-title, .section-title, .cta-title, .page-title, .post-title, .hours-line, .m-line { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); line-height: var(--display-lh); letter-spacing: var(--display-spacing); } /* Accent word inside a headline. Driven by inherited custom properties, NOT `[data-theme="x"] em.hl` descendant rules, the design page nests one theme inside another, and a descendant selector matches every ancestor theme, so the last one in source order would win regardless of which wrapper is nearest. Custom properties inherit from the NEAREST ancestor that sets them, which is what we need. */ em.hl { font-family: var(--hl-font, inherit); font-style: var(--hl-style, normal); text-transform: var(--hl-transform, inherit); letter-spacing: var(--hl-spacing, inherit); font-weight: var(--hl-weight, inherit); color: var(--hl-color, var(--accent)); } /* Outline word */ em.outline { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--ink); } .link-underline { position: relative; padding-bottom: 2px; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .35s var(--ease-soft), background-color .2s; } .link-underline:hover::after { transform: scaleX(1); background: var(--accent); } [data-theme="noir"] .link-underline:hover::after { background: var(--ink); } /* Reveal on scroll */ .rv { opacity: 0; transform: translateY(24px); } .rv.in { opacity: 1; transform: none; transition: opacity var(--reveal-dur) var(--reveal-ease) var(--d, 0s), transform var(--reveal-dur) var(--reveal-ease) var(--d, 0s); } /* ---------- Cursor ---------- */ .cursor, .cursor-ring { display: none; } @media (pointer: fine) { .cursor { display: block; position: fixed; z-index: var(--z-cursor); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); pointer-events: none; top: 0; left: 0; } .cursor-ring { display: block; position: fixed; z-index: var(--z-cursor); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--dim); pointer-events: none; top: 0; left: 0; transition: width .25s var(--ease-soft), height .25s var(--ease-soft), opacity .25s; } .cursor-ring.is-hover { width: 54px; height: 54px; border-color: var(--accent); } [data-theme="lab"] .cursor-ring.is-hover { border-color: var(--ink); } [data-theme="startline"] .cursor-ring, [data-theme="lab"] .cursor-ring { border-radius: 0; } } /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: transform .6s var(--ease-hard); } .preloader.done { transform: translateY(-101%); } [data-preloaded] .preloader, .preloader[hidden] { display: none; } .pre-inner { text-align: center; width: min(520px, 78vw); } .pre-count { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(4rem, 15vw, 10rem); line-height: 1; font-variant-numeric: tabular-nums; } .pre-track { height: 2px; background: var(--line); margin-top: 18px; position: relative; overflow: hidden; } .pre-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); } .pre-word { margin-top: 14px; color: var(--dim); letter-spacing: .35em; } /* ---------- Theme switch flash ---------- */ .switch-flash { position: fixed; inset: 0; z-index: var(--z-flash); background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .switch-flash.active { opacity: 1; } .switch-flash span { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(2rem, 8vw, 6rem); line-height: 1; text-align: center; letter-spacing: var(--display-spacing); } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background-color .45s ease, border-color .45s ease; } [data-theme="lab"] .nav { border-bottom-color: var(--ink); } .wordmark { display: flex; flex-direction: column; gap: 3px; line-height: 1; } .wordmark-name { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: .05em; text-transform: uppercase; } [data-theme="startline"] .wordmark-name, [data-theme="lab"] .wordmark-name { letter-spacing: .01em; } .wordmark-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: .4em; color: var(--dim); text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); } .nav-link { color: var(--dim); transition: color .2s; white-space: nowrap; } .nav-link:hover { color: var(--ink); } .nav-link.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; animation: pulse 1.6s infinite; vertical-align: middle; } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } } /* Theme switcher */ .theme-switch { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--btn-radius); overflow: hidden; } [data-theme="lab"] .theme-switch, [data-theme="startline"] .theme-switch { border-color: var(--line-strong); } .theme-btn { width: 26px; height: 26px; display: grid; place-items: center; border-right: 1px solid var(--line); transition: background-color .2s; } .theme-btn:last-child { border-right: 0; } .theme-btn i { display: block; width: 10px; height: 10px; border: 1px solid var(--dim); } .theme-btn[data-set="night"] i { background: #0A0A0B; border-color: #D9FF3F; } .theme-btn[data-set="startline"] i { background: #FAFBFC; border-color: #0038FF; } .theme-btn[data-set="noir"] i { background: #0A0A0A; border-color: #9C9B94; } .theme-btn[data-set="lab"] i { background: #F4F2EC; border-color: #D8321E; } .theme-btn[aria-pressed="true"] { background: var(--bg-3); } .theme-btn[aria-pressed="true"] i { outline: 1px solid var(--ink); outline-offset: 2px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 15px 26px; border-radius: var(--btn-radius); white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s, letter-spacing .25s, transform .25s var(--ease-soft); } .btn-solid { background: var(--ink); color: var(--bg); } .btn-solid:hover { background: var(--accent); color: var(--accent-ink); } [data-theme="noir"] .btn-solid { background: var(--ink); color: var(--bg); } [data-theme="noir"] .btn-solid:hover { letter-spacing: .34em; background: var(--ink); } [data-theme="lab"] .btn-solid:hover { background: var(--accent); color: var(--accent-ink); } .btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } [data-theme="noir"] .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } /* ---------- Hero ---------- */ /* The hero aims to fit one viewport so the countdown and the cohort form are visible without scrolling. Keep an eye on total height if you add anything: min-height is a floor, not a ceiling, and this block grows silently. */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(84px + 2vh) 0 5vh; overflow: hidden; } .hero-scene { position: absolute; inset: 0; pointer-events: none; } [data-theme="night"] .hero-scene { background: radial-gradient(ellipse 46% 60% at 74% 6%, rgba(242,241,236,.13), transparent 62%), radial-gradient(ellipse 80% 90% at 50% 112%, rgba(0,0,0,.5), transparent 60%); } [data-theme="noir"] .hero-scene { background: radial-gradient(ellipse 60% 70% at 70% 10%, rgba(237,236,230,.07), transparent 65%); } [data-theme="startline"] .hero-scene { background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--accent) 5%, transparent) 100%); } .hero-inner { position: relative; z-index: 2; width: 100%; } /* Two-column: protocol rail + stage (Noir Protocol's signature, useful in all four) */ .hero-grid { display: grid; grid-template-columns: minmax(170px, 265px) 1fr; gap: clamp(22px, 3.5vw, 52px); } .rail { border-right: 1px solid var(--line); padding-right: clamp(18px, 2.5vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 22px; } [data-theme="lab"] .rail { border-right-color: var(--ink); } .rail-step { display: flex; flex-direction: column; gap: 6px; } .rail-step + .rail-step::before { content: ""; width: 22px; height: 1px; background: var(--line-strong); margin-bottom: 16px; } .rail-step b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); } .rail-step span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; } .rail-step.is-done b::after { content: " ✓"; color: var(--accent); } [data-theme="noir"] .rail-step.is-done b::after { color: var(--dim); } .status-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; margin-bottom: clamp(14px, 2vh, 22px); } [data-theme="startline"] .status-pill, [data-theme="lab"] .status-pill { border-radius: 0; border-color: var(--line-strong); } .status-pill .mono-label { color: var(--dim); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; } [data-theme="noir"] .dot { background: var(--ink); } .hero-title { font-size: clamp(2.3rem, 6.1vw, 5.4rem); margin-bottom: clamp(16px, 2.2vh, 24px); } .hero-sub { max-width: 54ch; color: var(--dim); font-size: clamp(.95rem, 1.15vw, 1.08rem); margin-bottom: clamp(18px, 2.6vh, 28px); } .hero-sub strong { color: var(--ink); font-weight: 600; } /* Loading bar, the carb-loading metaphor */ .loadbar { max-width: 560px; margin-bottom: clamp(18px, 2.6vh, 28px); } .loadbar-track { height: 3px; background: var(--line); position: relative; overflow: hidden; } .loadbar-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); animation: loadfill 2.2s var(--ease-soft) .4s forwards; } [data-theme="noir"] .loadbar-fill { background: var(--ink); } @keyframes loadfill { to { transform: scaleX(.82); } } .loadbar-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; } .loadbar-meta .mono-label { color: var(--dim); } .loadbar-meta .mono-label:last-child { color: var(--faint); } /* Countdown */ .countdown { display: flex; align-items: stretch; gap: clamp(8px, 1.2vw, 14px); margin-bottom: clamp(20px, 2.8vh, 32px); flex-wrap: wrap; } .cd-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.9vw, 22px); min-width: clamp(68px, 7.5vw, 98px); } [data-theme="lab"] .cd-cell { border-color: var(--ink); background: var(--bg-2); } [data-theme="startline"] .cd-cell { border-color: var(--line); background: var(--bg-2); } .cd-num { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1; font-variant-numeric: tabular-nums; } /* Data is mono in the two "document" systems */ [data-theme="lab"] .cd-num, [data-theme="startline"] .cd-num { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.02em; } [data-theme="lab"] .cd-cell:last-child .cd-num { color: var(--accent); } .cd-label { color: var(--faint); font-size: 9px; } /* ---------- Cohort form ---------- */ .notify-form { max-width: 580px; } .notify-form-center { margin-inline: auto; } /* Honeypot. Off-canvas rather than display:none, which the better bots skip. Never use this class for anything a reader is meant to reach. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } .notify-label { display: block; color: var(--dim); margin-bottom: 12px; } .notify-row { display: flex; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); overflow: hidden; } [data-theme="night"] .notify-row { border-color: var(--line); } .notify-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 17px 20px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; color: var(--ink); } .notify-input::placeholder { color: var(--faint); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; } .notify-row .btn { border-radius: 0; } .notify-hint { margin-top: 12px; color: var(--faint); font-size: 9px; } .notify-form.is-error .notify-row { border-color: #E5484D; animation: shake .3s ease; } @keyframes shake { 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } } /* Bib (success state) */ .bib { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-2); padding: clamp(20px, 3vw, 30px); position: relative; } .bib-label { color: var(--dim); text-align: center; } .bib-num { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.05; text-align: center; margin: 8px 0 6px; color: var(--accent); font-variant-numeric: tabular-nums; } [data-theme="noir"] .bib-num { color: var(--ink); } [data-theme="lab"] .bib-num, [data-theme="startline"] .bib-num { font-family: var(--font-mono); font-weight: 500; } .bib-note { text-align: center; color: var(--dim); font-size: .9rem; } .bib-note-fine { margin-top: 10px; text-align: center; color: var(--faint); font-size: 9px; } /* ---------- Ticker ---------- */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: clamp(12px, 1.8vw, 18px) 0; position: relative; z-index: 2; } [data-theme="lab"] .marquee { border-color: var(--ink); background: var(--bg-2); } .marquee-inner { display: flex; width: max-content; animation: marquee 26s linear infinite; } .marquee:hover .marquee-inner { animation-play-state: paused; } .marquee-inner span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1; white-space: nowrap; padding-right: 44px; letter-spacing: var(--display-spacing); } .marquee-inner span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--faint); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Generic section ---------- */ .section { padding: clamp(60px, 9vw, 130px) 0; border-bottom: 1px solid var(--line); } [data-theme="lab"] .section { border-bottom-color: var(--grid); } .section-title { font-size: clamp(1.9rem, 4.6vw, 3.9rem); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4.5vw, 52px); flex-wrap: wrap; } .section-lede { color: var(--dim); max-width: 60ch; margin-top: 18px; } /* Frame, System 04's signature, available to all (R-02) */ .frame { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); } [data-theme="lab"] .frame { border-color: var(--ink); } [data-theme="night"] .frame, [data-theme="noir"] .frame { background: var(--bg-2); } .frame-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } [data-theme="lab"] .frame-head { border-bottom-color: var(--ink); } .frame-head .mono-label { color: var(--dim); } .frame-head .is-live { color: var(--accent); } [data-theme="noir"] .frame-head .is-live { color: var(--ink); } .frame-body { padding: clamp(22px, 3.5vw, 52px); } /* Registration crosses, lab only (R-02) */ [data-theme="lab"] .cross { position: relative; } [data-theme="lab"] .cross::before, [data-theme="lab"] .cross::after { content: "+"; position: absolute; font-family: var(--font-mono); font-size: 13px; color: var(--faint); pointer-events: none; } [data-theme="lab"] .cross::before { top: 8px; left: 10px; } [data-theme="lab"] .cross::after { bottom: 8px; right: 10px; } /* ---------- Data strip ---------- */ .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } [data-theme="lab"] .strip { border-color: var(--ink); background: var(--bg-2); } .strip-cell { padding: 20px 18px; border-right: 1px solid var(--line); } .strip-cell:last-child { border-right: 0; } .strip-cell b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); } .strip-cell b em { font-style: normal; color: var(--accent); } [data-theme="noir"] .strip-cell b em { color: var(--dim); } .strip-cell span { display: block; margin-top: 6px; color: var(--dim); } /* ---------- Series cards (C / S / U) ---------- */ .series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px); } .series { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; min-height: clamp(230px, 25vw, 300px); transition: transform .4s var(--ease-soft), background-color .3s, border-color .3s, color .3s; } [data-theme="lab"] .series { border-color: var(--ink); } .series-code { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; text-transform: uppercase; } [data-theme="lab"] .series-code, [data-theme="startline"] .series-code { font-family: var(--font-mono); font-weight: 500; } .series-name { color: var(--dim); } .series-copy { color: var(--dim); flex: 1; font-size: .95rem; } .series-state { color: var(--faint); } .series.is-next { border-color: var(--accent); } [data-theme="noir"] .series.is-next { border-color: var(--line-strong); } .series:hover { transform: translateY(-5px); } [data-theme="lab"] .series:hover { background: var(--ink); color: var(--bg); } [data-theme="lab"] .series:hover .series-copy, [data-theme="lab"] .series:hover .series-name, [data-theme="lab"] .series:hover .series-state { color: var(--bg); } /* ---------- Journal rows ---------- */ .j-list { border-top: 1px solid var(--line); } [data-theme="lab"] .j-list { border: 1px solid var(--ink); background: var(--bg-2); border-bottom: 0; } .j-row { display: grid; grid-template-columns: 92px 1fr auto; gap: clamp(14px, 2.5vw, 34px); align-items: center; padding: clamp(17px, 2.4vw, 24px) 0; border-bottom: 1px solid var(--line); transition: padding-left .3s var(--ease-soft), background-color .25s, color .25s; } [data-theme="lab"] .j-row { padding-inline: 20px; border-bottom-color: var(--grid); } .j-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--faint); } .j-title { font-weight: 600; font-size: clamp(1rem, 1.75vw, 1.35rem); line-height: 1.25; } .j-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-strong); padding: 5px 10px; white-space: nowrap; } .j-row:hover { padding-left: 14px; } [data-theme="lab"] .j-row:hover { background: var(--ink); color: var(--bg); padding-left: 20px; } [data-theme="lab"] .j-row:hover .j-idx { color: var(--accent); } [data-theme="lab"] .j-row:hover .j-tag { color: var(--bg); border-color: var(--bg); } .j-row:hover .j-title { color: var(--accent); } [data-theme="lab"] .j-row:hover .j-title, [data-theme="noir"] .j-row:hover .j-title { color: inherit; } /* ---------- Figure placeholders ---------- */ .figs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } [data-theme="lab"] .figs { border-color: var(--ink); } .fig-slot { aspect-ratio: 3/4; border-right: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; background: var(--bg-3); } [data-theme="night"] .fig-slot, [data-theme="noir"] .fig-slot { background: radial-gradient(120% 90% at 70% 20%, var(--bg-3) 0%, var(--bg-2) 55%, var(--bg) 100%); } [data-theme="lab"] .fig-slot { background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(20,20,18,.03) 10px 11px), var(--bg-3); } .fig-slot:last-child { border-right: 0; } .fig-slot .fig-n { color: var(--accent); } [data-theme="noir"] .fig-slot .fig-n { color: var(--dim); } .fig-slot .mono-label { color: var(--dim); } /* ---------- The Hours (live IST) ---------- */ .hours-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--dim); margin-bottom: 20px; flex-wrap: wrap; } #istClock { color: var(--ink); } .hours-line { font-size: clamp(1.6rem, 3.8vw, 3rem); max-width: 26ch; } /* ---------- CTA ---------- */ .cta { padding: clamp(80px, 12vw, 165px) 0; text-align: center; position: relative; overflow: hidden; } [data-theme="night"] .cta { background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(242,241,236,.07), transparent 65%); } [data-theme="noir"] .cta { background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(237,236,230,.05), transparent 65%); } .cta-title { font-size: clamp(2.4rem, 7vw, 6.2rem); margin-bottom: clamp(16px, 2.5vw, 26px); } .cta-sub { color: var(--dim); margin-bottom: clamp(26px, 4vw, 40px); max-width: 56ch; margin-inline: auto; } /* ---------- Footer ---------- */ .footer { padding: clamp(46px, 7vw, 76px) 0 0; overflow: hidden; border-top: 1px solid var(--line); } [data-theme="lab"] .footer { border-top-color: var(--ink); background: var(--bg-2); } .footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(22px, 4vw, 56px); align-items: start; padding-bottom: clamp(36px, 5vw, 62px); } .footer-col:last-child { text-align: right; } .footer-label { color: var(--dim); margin-bottom: 10px; } .footer-line { color: var(--faint); font-size: .88rem; } .footer-links { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .footer-links a { color: var(--dim); } .footer-links a:hover { color: var(--ink); } .footer-wordmark { font-family: var(--font-display); font-size: clamp(3.4rem, 16vw, 14rem); line-height: .8; text-align: center; text-transform: uppercase; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px var(--line-strong); transform: translateY(12%); user-select: none; transition: color .6s var(--ease-soft), -webkit-text-stroke-color .4s; } .footer:hover .footer-wordmark { color: var(--ink); -webkit-text-stroke-color: transparent; } [data-theme="lab"] .footer:hover .footer-wordmark { color: var(--accent); } /* ============================================================ BLOG · index + posts ============================================================ */ .page-head { padding: calc(96px + 7vh) 0 clamp(34px, 5vw, 60px); border-bottom: 1px solid var(--line); } .page-title { font-size: clamp(2.6rem, 9vw, 7.5rem); } .page-sub { margin-top: 18px; max-width: 56ch; color: var(--dim); } .filter-bar { display: flex; flex-wrap: wrap; gap: 9px; padding: clamp(18px, 2.6vw, 26px) 0; border-bottom: 1px solid var(--line); } .chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); color: var(--dim); transition: all .22s; } .chip:hover { color: var(--ink); } .chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); } .j-row.hidden { display: none; } .featured-note { display: block; margin: clamp(26px, 4vw, 44px) 0; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.6vw, 44px); background: var(--bg-2); transition: border-color .3s, transform .4s var(--ease-soft); } [data-theme="lab"] .featured-note { border-color: var(--ink); } .featured-note:hover { transform: translateY(-4px); border-color: var(--accent); } [data-theme="noir"] .featured-note:hover { border-color: var(--line-strong); } .featured-tag { color: var(--accent); margin-bottom: 14px; display: block; } [data-theme="noir"] .featured-tag { color: var(--dim); } .featured-title { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(1.7rem, 4.2vw, 3.2rem); line-height: 1.04; margin-bottom: 14px; letter-spacing: var(--display-spacing); } .featured-excerpt { color: var(--dim); max-width: 62ch; margin-bottom: 18px; } .featured-meta { color: var(--faint); } /* Post */ .post-head { padding: calc(96px + 5vh) 0 clamp(26px, 4vw, 44px); } .post-back { display: inline-block; color: var(--dim); margin-bottom: clamp(26px, 4vw, 42px); } .post-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .post-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 13px; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--btn-radius); } [data-theme="noir"] .post-cat { border-color: var(--line-strong); color: var(--dim); } .post-num { color: var(--faint); } .post-title { font-size: clamp(2rem, 5.6vw, 4.6rem); max-width: 20ch; } .post-meta { margin-top: 20px; color: var(--dim); display: flex; gap: 16px; flex-wrap: wrap; } .post-rule { border: 0; border-top: 1px solid var(--line); margin: clamp(26px, 4vw, 40px) 0 0; } .prose { max-width: 70ch; padding: clamp(32px, 4.5vw, 56px) 0 clamp(50px, 7vw, 90px); } .prose > p { margin-bottom: 1.35em; color: color-mix(in srgb, var(--ink) 88%, var(--dim)); } .prose p strong { color: var(--ink); font-weight: 600; } .prose h2 { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(1.4rem, 2.9vw, 2.1rem); line-height: 1.12; margin: 2.1em 0 .7em; letter-spacing: var(--display-spacing); } .prose h3 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.25rem); margin: 1.8em 0 .6em; } .prose ul, .prose ol { margin: 0 0 1.35em; } .prose ul li, .prose ol li { padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid var(--line); color: color-mix(in srgb, var(--ink) 88%, var(--dim)); } .prose ul li::before { content: ""; position: absolute; left: 0; color: var(--accent); } [data-theme="noir"] .prose ul li::before { color: var(--faint); } .prose ol { counter-reset: n; } .prose ol li::before { counter-increment: n; content: counter(n, decimal-leading-zero); position: absolute; left: 0; font-family: var(--font-mono); font-size: 11px; color: var(--accent); top: 12px; } .prose blockquote { font-family: var(--font-mono); font-size: clamp(.95rem, 1.5vw, 1.1rem); line-height: 1.65; padding-left: 22px; border-left: 2px solid var(--accent); margin: 1.7em 0; color: var(--ink); } [data-theme="noir"] .prose blockquote { border-left-color: var(--line-strong); } [data-theme="lab"] .prose blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; } .prose hr { border: 0; text-align: center; margin: 2.2em 0; } .prose hr::after { content: ", "; color: var(--faint); letter-spacing: .5em; font-family: var(--font-mono); font-size: 10px; } .prose a:not(.btn) { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } [data-theme="noir"] .prose a:not(.btn) { color: var(--ink); border-bottom-color: var(--line-strong); } .prose a:not(.btn):hover { border-bottom-color: currentColor; } .prose-note { font-size: .82rem; color: var(--faint); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px 18px; margin-top: 2.4em; } /* Data table inside prose */ .prose .table-wrap { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--radius); } [data-theme="lab"] .prose .table-wrap { border-color: var(--ink); } .prose table { width: 100%; border-collapse: collapse; min-width: 460px; } .prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .9rem; } .prose th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); background: var(--bg-3); } .prose td:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--dim); white-space: nowrap; } .prose tr:last-child td { border-bottom: 0; } /* The protocol card, boxed summary in a post */ .protocol-card { border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 30px); margin: 2em 0; background: var(--bg-2); } [data-theme="noir"] .protocol-card { border-color: var(--line-strong); } .protocol-card h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } [data-theme="noir"] .protocol-card h3 { color: var(--ink); } .protocol-card dl { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 10px 18px; } .protocol-card dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .protocol-card dd { color: var(--dim); font-size: .9rem; } .post-nav { display: flex; justify-content: space-between; gap: 16px; padding: clamp(22px, 3.2vw, 32px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(44px, 7vw, 80px); } .post-nav a { color: var(--dim); } .post-nav a:hover { color: var(--accent); } [data-theme="noir"] .post-nav a:hover { color: var(--ink); } .sub-strip { border-top: 1px solid var(--line); padding: clamp(46px, 7vw, 84px) 0; text-align: center; } /* ============================================================ DESIGN SYSTEM PAGE ============================================================ */ .ds-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(20px, 3vw, 34px); } .ds-sample { background-color: var(--bg); background-image: var(--page-texture); background-size: var(--page-texture-size); color: var(--ink); padding: clamp(26px, 4.5vw, 58px); } .ds-sample-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(20px, 3.5vw, 38px); } .ds-name { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(1.7rem, 4.2vw, 3.2rem); line-height: 1; letter-spacing: var(--display-spacing); } .ds-story { color: var(--dim); max-width: 62ch; margin-bottom: clamp(20px, 3.5vw, 34px); } .swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: clamp(24px, 4vw, 42px); } .swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .swatch-color { height: 62px; } .swatch-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--bg-2); } .swatch-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .swatch-hex { font-family: var(--font-mono); font-size: 10px; color: var(--dim); } .ds-type-row { border-top: 1px solid var(--line); padding: clamp(16px, 2.4vw, 24px) 0; display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; } .ds-type-label { color: var(--faint); } .ds-spec-display { font-family: var(--font-display); text-transform: var(--display-transform); font-size: clamp(2rem, 5vw, 4rem); line-height: var(--display-lh); letter-spacing: var(--display-spacing); } .ds-spec-body { max-width: 54ch; } .ds-spec-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .ds-components { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: clamp(20px, 3.5vw, 36px); } .ds-rules { margin-top: clamp(20px, 3.5vw, 36px); border-top: 1px solid var(--line); } .ds-rules li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--dim); font-size: .9rem; display: grid; grid-template-columns: 52px 1fr; gap: 14px; } .ds-rules li b { color: var(--rule-num-color, var(--accent)); font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 940px) { .series-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-col:last-child { text-align: left; } .j-row { grid-template-columns: 78px 1fr; } .j-tag { grid-column: 2; justify-self: start; margin-top: 6px; } .ds-type-row { grid-template-columns: 1fr; gap: 8px; } .figs { grid-template-columns: 1fr; } .fig-slot { aspect-ratio: 16/7; border-right: 0; border-bottom: 1px solid var(--line); } .hero-grid { grid-template-columns: 1fr; } .rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; flex-direction: row; flex-wrap: wrap; gap: 16px; } .rail-step + .rail-step::before { display: none; } } @media (max-width: 640px) { .nav { padding: 11px 16px; } .nav-link { display: none; } .nav-link.live { display: inline-block; font-size: 0; } .nav-link.live::before { margin-right: 0; } .wordmark-tag { display: none; } .notify-row { flex-direction: column; border: 0; gap: 8px; } .notify-input { border: 1px solid var(--line-strong); } .notify-row .btn { width: 100%; padding: 15px; } .countdown { gap: 6px; } .cd-cell { flex: 1; min-width: 0; padding: 12px 4px; } .strip-cell { border-right: 0; border-bottom: 1px solid var(--line); } .post-nav { flex-direction: column; } .prose { max-width: 100%; } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; transform: none; } .marquee-inner, .dot, .nav-link.live::before, .loadbar-fill { animation: none; } .loadbar-fill { transform: scaleX(.82); } .preloader { display: none; } .cursor, .cursor-ring { display: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }