/* ═══════════════════════════════════════════════════════════════ THE TAUBINATOR · DESIGN SYSTEM v3.0 Neo-Brutalism × Apple Spatial · Component Library Amber Posey CAIO · P3AK Personal · March 2026 ───────────────────────────────────────────────────────────── DOCTRINE: This file is the single source of truth. Pages import this. Pages do not define their own components. Use classes like Shadcn — define once here, reference everywhere. ───────────────────────────────────────────────────────────── HOW TO USE: 1. Link ds.css in 2. Put

at top of body 3. Add class="ds-page" to 4. Use .ds-* component classes — never write equivalent CSS per-page 5. Put

before 6. Load nav.js and pixel-icons.js before ═══════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────── FONTS ────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap'); /* ══════════════════════════════════════════ TOKENS — never override these per-page. Change them HERE and everything updates. ══════════════════════════════════════════ */ :root { /* ── Richard's Eyes — 125% base zoom · Large and In Charge ── */ zoom: 1.25; /* ── Brand Colors ── */ --brand-orange: #D4581A; --brand-orange-lt: #E07040; --brand-orange-dk: #A83E0E; --brand-steel: #4E6D8C; --brand-steel-lt: #6285A4; --brand-steel-dk: #365272; --brand-army: #556330; --brand-army-lt: #6B7A40; --brand-army-dk: #3E4A22; /* ── Neutrals ── */ --brand-black: #1A1A14; --brand-near-black: #22221A; --brand-sand: #EDE8E0; --brand-cream: #F7F3EE; --brand-white: #FAFAF7; /* ── Accent ── */ --brand-gold: #C8A84B; --brand-teal: #2A8B8B; /* ── Status ── */ --status-green: #4CAF50; --status-amber: #FF9800; --status-red: #F44336; --status-blue: #42A5F5; /* ── Fonts ── */ --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* ── Type Scale — accessibility first, large is the baseline ── */ /* Bumped +2px across the board — March 14, 2026 */ --fs-display: 102px; --fs-h1: 70px; --fs-h2: 50px; --fs-h3: 38px; --fs-h4: 30px; --fs-h5: 24px; --fs-h6: 18px; --fs-body: 22px; --fs-body-sm: 19px; --fs-label: 17px; --fs-label-sm:15px; --fs-mono: 18px; --fs-code: 17px; --fs-nav: 16px; /* ── Spacing Scale ── */ --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 24px; --sp-5: 36px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 100px; /* ── Shadows (hard offset, neo-brutalist) ── */ --shadow-sm: 4px 4px 0; --shadow-md: 7px 7px 0; --shadow-lg: 12px 12px 0; --shadow-xl: 18px 18px 0; /* ── Borders ── */ --bw: 3px; /* primary border weight */ --bwt: 2px; /* thin border weight */ } /* ── Size Modes ── */ [data-size="compact"] { --fs-display: 72px; --fs-h1: 50px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 19px; --fs-h6: 16px; --fs-body: 18px; --fs-body-sm: 16px; --fs-label: 15px; --fs-label-sm: 13px; --fs-mono: 16px; --fs-code: 15px; --fs-nav: 15px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; } [data-size="large"] { --fs-display: 130px; --fs-h1: 90px; --fs-h2: 64px; --fs-h3: 48px; --fs-h4: 38px; --fs-h5: 30px; --fs-h6: 22px; --fs-body: 28px; --fs-body-sm: 23px; --fs-label: 21px; --fs-label-sm: 18px; --fs-mono: 22px; --fs-code: 20px; --fs-nav: 20px; } /* ══════════════════════════════════════════ THEME TOKENS — surface/text/border colors. Everything that changes between light/dark. ══════════════════════════════════════════ */ :root, [data-theme="dark"] { color-scheme: dark; /* ── Backgrounds: stepped contrast, not just shades of mud ── */ --c-bg: #111109; /* true dark — gives cards room to breathe */ --c-surface: #1C1C15; /* surface above bg */ --c-card: #272720; /* card panels — clearly distinct */ --c-card-alt: #30302A; /* nested / alternate card */ --c-inset: #0D0D08; /* inset/well — darker than bg */ /* ── Text: full opacity on primaries, never ghost the rest ── */ --c-text: #F5F2EB; /* near-white warm — high contrast */ --c-text-2: #C8C4BC; /* secondary — solid, not transparent fade */ --c-text-3: #888580; /* tertiary — muted but readable, ~4.5:1 */ --c-text-inv: #111109; --c-accent: var(--brand-orange); /* ── Borders: visible, not whispers ── */ --c-border: #111109; --c-border-lt: rgba(245,242,235,.16); /* was .10 — now visible */ --c-border-md: rgba(245,242,235,.32); /* was .22 — now solid */ --c-shadow: #0A0A06; --c-input-bg: #1C1C15; --c-code-bg: #1C1C15; --c-hdr-bg: #0D0D08; /* header darker than page = clear separation */ --c-hdr-text: #ffffff; --c-footer-bg: var(--brand-army); } [data-theme="light"] { color-scheme: light; --c-bg: #EDE8E0; --c-surface: #F7F3EE; --c-card: #FAFAF7; --c-card-alt: #F0EBE2; --c-inset: #E6E0D6; --c-text: #1A1A14; --c-text-2: #4A4940; /* was rgba .65 — now solid, WCAG AA */ --c-text-3: #706D64; /* was rgba .38 — now solid, 4.5:1 contrast */ --c-text-inv: #FAFAF7; --c-accent: var(--brand-orange); --c-border: #1A1A14; --c-border-lt: rgba(26,26,20,.14); /* was .10 — now visible */ --c-border-md: rgba(26,26,20,.28); /* was .22 — now solid */ --c-shadow: #1A1A14; --c-input-bg: #F7F3EE; --c-code-bg: #EDE8E0; --c-hdr-bg: #1A1A14; --c-hdr-text: #ffffff; --c-footer-bg: var(--brand-army); } /* ══════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.7; background: var(--c-bg); color: var(--c-text); } h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: -2px; color: var(--c-text); } h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.14; letter-spacing: -1px; color: var(--c-text); } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.5px; color: var(--c-text); } h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; color: var(--c-text); } h5 { font-size: var(--fs-h5); font-weight: 500; color: var(--c-text); } h6 { font-size: var(--fs-h6); font-weight: 700; font-family: var(--font-mono); color: var(--c-text-3); letter-spacing: 2px; text-transform: uppercase; } p { font-size: var(--fs-body); line-height: 1.7; color: var(--c-text); } strong { font-weight: 700; } code, kbd { font-family: var(--font-mono); font-size: var(--fs-code); background: var(--c-code-bg); padding: 2px 8px; border: 1px solid var(--c-border-lt); } pre { font-family: var(--font-mono); font-size: var(--fs-code); background: var(--c-code-bg); padding: var(--sp-5); border: var(--bwt) solid var(--c-border-lt); overflow-x: auto; } /* ── Links — base only, components override ── */ a { color: var(--c-accent); text-decoration: none; } a:hover { color: var(--brand-orange-lt); } /* ══════════════════════════════════════════ LAYOUT ══════════════════════════════════════════ */ .ds-page { display: flex; flex-direction: column; min-height: 100vh; } .ds-main { flex: 1; padding: var(--sp-8) var(--sp-10); overflow-x: hidden; } /* ══════════════════════════════════════════ COMPONENT: HEADER (nav.js injects into #tbn-hdr) ══════════════════════════════════════════ */ .hdr { background: var(--c-hdr-bg) !important; color: var(--c-hdr-text); padding: 0 32px; display: flex; align-items: center; border-bottom: 4px solid var(--brand-orange); height: 64px; flex-shrink: 0; position: sticky; top: 0; z-index: 100; } .hdr-brand { display: flex; align-items: center; gap: 0; flex-shrink: 0; text-decoration: none; min-width: 0; margin-right: 8px; } .hdr-logo { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: 3px; color: #fff; line-height: 1; white-space: nowrap; } .hdr-logo span { color: var(--brand-orange); } .hdr-in { color: rgba(255,255,255,.35); letter-spacing: 2px; font-size: 18px; transition: color .2s; } .hdr-brand:hover .hdr-in { color: var(--brand-orange); } .hdr-nav { display: flex; gap: 2px; flex: 1; justify-content: center; align-items: center; flex-wrap: nowrap; overflow-x: auto; } .hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; justify-content: flex-end; } .live-dot { width: 9px; height: 9px; background: #4CAF50; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px #4CAF50; } .hdr-clock { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.50); letter-spacing: 1px; white-space: nowrap; min-width: 44px; text-align: right; } /* Nav links */ .hn { font-family: var(--font-mono); font-size: var(--fs-nav); font-weight: 700; letter-spacing: .5px; color: rgba(255,255,255,.80); padding: 8px 12px; border: 2px solid transparent; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color .15s, border-color .15s, background .15s; line-height: 1; } .hn:hover { color: #fff !important; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); text-decoration: none; } .hn.active { color: var(--brand-orange) !important; border-color: var(--brand-orange); background: rgba(212,88,26,.12); } .hn-sep { display: inline-block; width: 1px; height: 22px; background: rgba(255,255,255,.12); margin: 0 4px; vertical-align: middle; flex-shrink: 0; } .hn-cursor { display: inline-block; color: var(--brand-orange); margin-right: 4px; font-size: 13px; animation: blink-cursor .9s steps(1) infinite; vertical-align: middle; } @keyframes blink-cursor { 0%,49%{opacity:1} 50%,100%{opacity:0} } /* Nav toggles */ .size-toggle, .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.65); font-family: var(--font-mono); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s, color .15s; } .size-toggle { font-size: 10px; font-weight: 700; letter-spacing: 1px; height: 26px; padding: 0 8px; } .theme-toggle { font-size: 14px; width: 30px; height: 26px; padding: 0; } .size-toggle:hover, .theme-toggle:hover { border-color: var(--brand-orange); color: var(--brand-orange); } /* Amber FAB */ .amber-fab { position: fixed; bottom: 28px; right: 28px; z-index: 200; width: 52px; height: 52px; border-radius: 0; background: var(--brand-orange); border: 3px solid var(--brand-orange-dk); box-shadow: var(--shadow-md) var(--c-shadow); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; } .amber-fab:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg) var(--c-shadow); } /* ══════════════════════════════════════════ COMPONENT: UNIVERSAL FOOTER (nav.js injects into #tbn-ftr) Styles also in nav.js injected CSS — ds.css version is the canonical reference for future pages. ══════════════════════════════════════════ */ .tbn-footer { background: #22221A; border-top: 4px solid var(--brand-orange); font-family: var(--font-mono); flex-shrink: 0; } .tbn-footer-top { display: flex; align-items: flex-start; gap: 48px; padding: 40px 40px 32px; } .tbn-fbrand { display: flex; align-items: flex-start; gap: 18px; min-width: 220px; flex-shrink: 0; } .tbn-ficon { flex-shrink: 0; opacity: .9; } .tbn-fbrand-text { display: flex; flex-direction: column; gap: 6px; } .tbn-fname { font-size: 17px; font-weight: 700; letter-spacing: 3px; color: #fff; text-transform: uppercase; } .tbn-fname span { color: var(--brand-orange); } .tbn-ftagline { font-size: 12px; letter-spacing: 1.5px; color: rgba(255,255,255,.55); text-transform: uppercase; } .tbn-famber { font-size: 13px; color: rgba(255,255,255,.50); margin-top: 8px; font-style: italic; letter-spacing: .3px; } .tbn-flinks { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; flex: 1; border-left: 1px solid rgba(255,255,255,.12); } .tbn-fcol { padding: 0 24px; border-right: 1px solid rgba(255,255,255,.12); } .tbn-fcol:last-child { border-right: none; } .tbn-fcol-hdr { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.50); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); } .tbn-fcol a { display: block; font-size: 14px; letter-spacing: .5px; color: rgba(255,255,255,.65); text-decoration: none; padding: 5px 0; transition: color .12s; } .tbn-fcol a:hover { color: var(--brand-orange); } .tbn-footer-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.45); } /* Legacy footer — hidden when tbn-footer is present */ .shared-footer { display: none; } /* ══════════════════════════════════════════ COMPONENT: BUTTONS Usage: Label ══════════════════════════════════════════ */ .ds-btn { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 28px; border: var(--bw) solid var(--c-border-md); background: transparent; color: var(--c-text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm) var(--c-shadow); transition: transform .1s, box-shadow .1s, background .1s, color .1s, border-color .1s; line-height: 1; } /* Base hover — lifts, keeps colors */ .ds-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md) var(--c-shadow); text-decoration: none; color: var(--c-text); /* prevent global a:hover from bleeding in */ border-color: var(--c-text); } /* PRIMARY — orange fill */ .ds-btn.ds-btn-primary { background: var(--brand-orange); color: var(--brand-white); border-color: var(--brand-orange-dk); } .ds-btn.ds-btn-primary:hover { background: var(--brand-orange-lt); color: var(--brand-white); /* explicit — always white on orange */ border-color: var(--brand-orange); } /* SECONDARY — steel fill */ .ds-btn.ds-btn-secondary { background: var(--brand-steel); color: var(--brand-white); border-color: var(--brand-steel-dk); } .ds-btn.ds-btn-secondary:hover { background: var(--brand-steel-lt); color: var(--brand-white); border-color: var(--brand-steel); } /* ARMY — army green fill */ .ds-btn.ds-btn-army { background: var(--brand-army); color: var(--brand-white); border-color: var(--brand-army-dk); } .ds-btn.ds-btn-army:hover { background: var(--brand-army-lt); color: var(--brand-white); border-color: var(--brand-army); } /* DANGER — red fill */ .ds-btn.ds-btn-danger { background: var(--status-red); color: #fff; border-color: #c62828; } .ds-btn.ds-btn-danger:hover { background: #ef5350; color: #fff; border-color: var(--status-red); } /* GHOST — transparent, border only, text turns orange on hover */ .ds-btn.ds-btn-ghost { background: transparent; border-color: var(--c-border-md); box-shadow: none; } .ds-btn.ds-btn-ghost:hover { color: var(--brand-orange); border-color: var(--brand-orange); background: rgba(212,88,26,.06); box-shadow: none; } /* GHOST-WHITE — for use on dark colored section backgrounds */ .ds-btn.ds-btn-ghost-white { background: transparent; border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); box-shadow: none; } .ds-btn.ds-btn-ghost-white:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.10); box-shadow: none; } /* Sizes */ .ds-btn.ds-btn-sm { font-size: var(--fs-label-sm); padding: 8px 18px; letter-spacing: 1px; } .ds-btn.ds-btn-lg { font-size: var(--fs-body-sm); padding: 18px 40px; letter-spacing: 2px; } .ds-btn.ds-btn-xl { font-size: var(--fs-body); padding: 22px 52px; letter-spacing: 2px; } /* ══════════════════════════════════════════ COMPONENT: BADGES & PILLS Usage: URGENT ══════════════════════════════════════════ */ .ds-badge { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border: 2px solid; display: inline-block; white-space: nowrap; line-height: 1.4; } .ds-badge-orange { color: var(--brand-orange); border-color: var(--brand-orange); background: rgba(212,88,26,.12); } .ds-badge-green { color: var(--status-green); border-color: var(--status-green); background: rgba(76,175,80,.12); } .ds-badge-red { color: var(--status-red); border-color: var(--status-red); background: rgba(244,67,54,.12); } .ds-badge-amber { color: var(--status-amber); border-color: var(--status-amber); background: rgba(255,152,0,.12); } .ds-badge-steel { color: var(--brand-steel-lt);border-color: var(--brand-steel); background: rgba(78,109,140,.12);} .ds-badge-gray { color: var(--c-text-3); border-color: var(--c-border-md); background: transparent; } /* Pulsing dot badge (for live/urgent) */ .ds-badge-pulse::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; animation: badge-pulse 1.4s ease-in-out infinite; } @keyframes badge-pulse { 0%,100%{opacity:1} 50%{opacity:.3} } /* ══════════════════════════════════════════ COMPONENT: CARDS Usage:

...

══════════════════════════════════════════ */ .ds-card { background: var(--c-card); border: var(--bw) solid var(--c-border); box-shadow: var(--shadow-md) var(--c-shadow); padding: var(--sp-5); transition: transform .15s, box-shadow .15s; } .ds-card:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg) var(--c-shadow); } .ds-card-inset { background: var(--c-surface); border-color: var(--c-border-lt); box-shadow: none; } .ds-card-inset:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-sm) var(--c-shadow); } .ds-card-hdr { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-2); padding-bottom: var(--sp-3); border-bottom: var(--bwt) solid var(--c-border-lt); margin-bottom: var(--sp-5); display: flex; align-items: center; justify-content: space-between; } /* ══════════════════════════════════════════ COMPONENT: ALERT PANELS Usage:

Title

Body text

══════════════════════════════════════════ */ .ds-alert { padding: var(--sp-4) var(--sp-5); border-left: 6px solid; background: var(--c-card); margin-bottom: var(--sp-4); } .ds-alert-red { border-color: var(--status-red); box-shadow: var(--shadow-sm) var(--status-red); } .ds-alert-amber { border-color: var(--status-amber); box-shadow: var(--shadow-sm) var(--status-amber); } .ds-alert-green { border-color: var(--status-green); box-shadow: var(--shadow-sm) var(--status-green); } .ds-alert-orange { border-color: var(--brand-orange); box-shadow: var(--shadow-sm) var(--brand-orange); } .ds-alert-title { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.5px; color: var(--c-text); margin-bottom: 8px; } .ds-alert-body { font-size: var(--fs-body-sm); color: var(--c-text-2); line-height: 1.65; } /* ══════════════════════════════════════════ COMPONENT: STAT / KPI BLOCK Usage:

$300K

Annual Revenue

══════════════════════════════════════════ */ .ds-stat { padding: var(--sp-5); background: var(--c-card); border: var(--bw) solid var(--c-border); box-shadow: var(--shadow-md) var(--c-shadow); } .ds-stat-val { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 700; line-height: 1; color: var(--brand-orange); margin-bottom: 8px; } .ds-stat-val-red { color: var(--status-red); } .ds-stat-val-green{ color: var(--status-green); } .ds-stat-lbl { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); } /* ── Stats Bar (horizontal row of stats) ── Usage:

$300K

ARR

...

*/ .ds-stats-bar { display: flex; border: var(--bw) solid var(--c-border); box-shadow: var(--shadow-lg) var(--c-shadow); } .ds-stats-item { flex: 1; padding: 20px 28px; border-right: 2px solid var(--c-border-lt); } .ds-stats-item:last-child { border-right: none; } .ds-si-val { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 700; color: var(--brand-orange); line-height: 1; margin-bottom: 6px; } .ds-si-val-red { color: var(--status-red); } .ds-si-val-green { color: var(--status-green); } .ds-si-val-steel { color: var(--brand-steel-lt); } .ds-si-lbl { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); } /* Shadow color helpers */ .ds-shadow-orange { box-shadow: var(--shadow-lg) var(--brand-orange); } .ds-shadow-red { box-shadow: var(--shadow-lg) var(--status-red); } .ds-shadow-green { box-shadow: var(--shadow-lg) var(--status-green); } .ds-shadow-steel { box-shadow: var(--shadow-lg) var(--brand-steel); } .ds-shadow-army { box-shadow: var(--shadow-lg) var(--brand-army); } /* ══════════════════════════════════════════ COMPONENT: EYEBROW The mono label with orange accent bar that appears above hero titles. Usage:

COUNSEL · LEGAL

══════════════════════════════════════════ */ .ds-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--brand-orange); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .ds-eyebrow::before { content: ''; width: 36px; height: 3px; background: var(--brand-orange); display: block; flex-shrink: 0; } /* ══════════════════════════════════════════ COMPONENT: SECTION LABEL The mono divider label with extending line. Usage:

Active Items · 3 Open

══════════════════════════════════════════ */ .ds-section-label { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 32px; display: flex; align-items: center; gap: 14px; } .ds-section-label::after { content: ''; flex: 1; height: 2px; background: var(--c-border-lt); } /* ══════════════════════════════════════════ COMPONENT: PANEL (header + body box) Usage:

Title

Content

══════════════════════════════════════════ */ .ds-panel { background: var(--c-card); border: var(--bw) solid var(--c-border); box-shadow: var(--shadow-md) var(--c-shadow); } .ds-panel-hdr { padding: 16px 24px; border-bottom: 2px solid var(--c-border-lt); background: var(--c-surface); display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-2); } .ds-panel-body { padding: var(--sp-5); } /* Panel color variants — for orange/army/steel header bars */ .ds-panel-hdr-orange { background: var(--brand-orange); color: #fff; border-bottom: none; } .ds-panel-hdr-army { background: var(--brand-army); color: rgba(255,255,255,.8); border-bottom: none; } .ds-panel-hdr-steel { background: var(--brand-steel); color: rgba(255,255,255,.8); border-bottom: none; } /* ══════════════════════════════════════════ COMPONENT: DATA TABLE Usage:

Col
Val

══════════════════════════════════════════ */ .ds-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-body-sm); } .ds-table th { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); padding: 14px 16px; border-bottom: var(--bw) solid var(--c-border); text-align: left; } .ds-table td { padding: 16px; border-bottom: 1px solid var(--c-border-lt); color: var(--c-text); line-height: 1.5; vertical-align: top; } .ds-table tr:last-child td { border-bottom: none; } .ds-table tr:hover td { background: var(--c-card-alt); } /* ══════════════════════════════════════════ COMPONENT: DATA ROW Single key/value display row. Usage:

Label Value

══════════════════════════════════════════ */ .ds-data-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--c-border-lt); gap: 12px; } .ds-data-row:last-child { border-bottom: none; } .ds-dr-key { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-text-3); flex-shrink: 0; } .ds-dr-val { font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--c-text-2); text-align: right; } .ds-dr-val-orange { color: var(--brand-orange); } .ds-dr-val-red { color: var(--status-red); } .ds-dr-val-green { color: var(--status-green); } /* ══════════════════════════════════════════ COMPONENT: INPUTS Usage: ══════════════════════════════════════════ */ .ds-input { font-family: var(--font-mono); font-size: var(--fs-mono); background: var(--c-input-bg); color: var(--c-text); border: var(--bwt) solid var(--c-border-md); padding: 14px 18px; outline: none; width: 100%; transition: border-color .12s; } .ds-input:focus { border-color: var(--brand-orange); } .ds-input::placeholder { color: var(--c-text-3); } /* ══════════════════════════════════════════ COMPONENT: EMPTY STATE Usage:

📄

Nothing here

Add something to get started

══════════════════════════════════════════ */ .ds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-4); text-align: center; gap: var(--sp-3); border: 2px dashed var(--c-border-lt); background: var(--c-card); min-height: 180px; } .ds-empty-icon { font-size: 36px; opacity: .3; } .ds-empty-title { font-size: var(--fs-h5); font-weight: 700; color: var(--c-text-2); } .ds-empty-sub { font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--c-text-3); } /* ══════════════════════════════════════════ COMPONENT: STATUS INDICATOR Usage: LIVE ══════════════════════════════════════════ */ .ds-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .ds-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; } .ds-status-live { color: var(--status-green); } .ds-status-live::before { box-shadow: 0 0 8px var(--status-green); animation: badge-pulse 2s ease-in-out infinite; } .ds-status-ready { color: var(--status-amber); } .ds-status-blocked { color: var(--status-red); } .ds-status-watching{ color: var(--brand-steel-lt); } /* ══════════════════════════════════════════ COMPONENT: HIGHLIGHT BAR BORDERS Add to any element to get a color accent border. Usage:

...

══════════════════════════════════════════ */ .ds-bar-orange { border-left: 6px solid var(--brand-orange) !important; } .ds-bar-steel { border-left: 6px solid var(--brand-steel) !important; } .ds-bar-army { border-left: 6px solid var(--brand-army) !important; } .ds-bar-red { border-left: 6px solid var(--status-red) !important; } .ds-bar-green { border-left: 6px solid var(--status-green) !important; } .ds-bar-amber { border-left: 6px solid var(--status-amber) !important; } /* ══════════════════════════════════════════ SCROLL SNAP SYSTEM Usage:

... content ...

Scroll

══════════════════════════════════════════ */ .ds-snap-root { height: auto; overflow-y: auto; scroll-behavior: smooth; } /* centered sections */ .ds-snap-s { min-height: calc(100vh - 64px); padding: var(--sp-8) var(--sp-12); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } /* top-aligned, scrollable sections */ .ds-snap-s-top { min-height: calc(100vh - 64px); padding: var(--sp-6) var(--sp-12) var(--sp-10); display: flex; flex-direction: column; overflow-y: auto; } /* Scroll cue */ .ds-snap-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--c-text-3); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: cue-float 2.4s ease-in-out infinite; } .ds-snap-cue::after { content: '▾'; font-size: 20px; color: var(--brand-orange); } @keyframes cue-float { 0%,100%{ opacity:.4; transform:translateX(-50%) translateY(0); } 50% { opacity:1; transform:translateX(-50%) translateY(10px); } } /* Legacy aliases — pages using .s/.s-top/.cue still work */ .snap-root { height: auto; overflow-y: auto; scroll-behavior: smooth; } .snap-section, .s { min-height: calc(100vh - 64px); padding: var(--sp-8) var(--sp-12); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .snap-section-top, .s-top { min-height: calc(100vh - 64px); padding: var(--sp-6) var(--sp-12) var(--sp-10); display: flex; flex-direction: column; overflow-y: auto; } .snap-cue, .cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--c-text-3); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: cue-float 2.4s ease-in-out infinite; } .snap-cue::after, .cue::after { content: '▾'; font-size: 20px; color: var(--brand-orange); } /* ══════════════════════════════════════════ COMPONENT: CTA SECTION Full-width solid-color sections used at end of scroll pages. Usage:

...

══════════════════════════════════════════ */ .ds-cta-orange { background: var(--brand-orange); } .ds-cta-army { background: var(--brand-army); } .ds-cta-steel { background: var(--brand-steel); } .ds-cta-surface{ background: var(--c-surface); } /* Text helpers for colored sections */ .ds-cta-orange .ds-eyebrow, .ds-cta-army .ds-eyebrow, .ds-cta-steel .ds-eyebrow { color: rgba(255,255,255,.55); } .ds-cta-orange .ds-eyebrow::before, .ds-cta-army .ds-eyebrow::before, .ds-cta-steel .ds-eyebrow::before { background: rgba(255,255,255,.55); } .ds-cta-orange .ds-section-label, .ds-cta-army .ds-section-label, .ds-cta-steel .ds-section-label { color: rgba(255,255,255,.4); } .ds-cta-orange .ds-section-label::after, .ds-cta-army .ds-section-label::after, .ds-cta-steel .ds-section-label::after { background: rgba(255,255,255,.2); } /* ══════════════════════════════════════════ UTILITY — TYPE / COLOR / SPACING ══════════════════════════════════════════ */ /* Type */ .ds-display { font-size: var(--fs-display); font-weight: 700; font-family: var(--font-sans); line-height: 1.0; letter-spacing: -3px; } .ds-h1 { font-size: var(--fs-h1); font-weight: 700; } .ds-h2 { font-size: var(--fs-h2); font-weight: 700; } .ds-h3 { font-size: var(--fs-h3); font-weight: 600; } .ds-label { font-size: var(--fs-label); font-family: var(--font-mono); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .ds-label-sm{ font-size: var(--fs-label-sm); font-family: var(--font-mono); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .ds-mono { font-family: var(--font-mono); font-size: var(--fs-mono); } .ds-code { font-family: var(--font-mono); font-size: var(--fs-code); } /* Colors */ .ds-orange { color: var(--brand-orange); } .ds-steel { color: var(--brand-steel-lt); } .ds-army { color: var(--brand-army-lt); } .ds-red { color: var(--status-red); } .ds-green { color: var(--status-green); } .ds-amber-c { color: var(--status-amber); } .ds-muted { color: var(--c-text-2); } .ds-dim { color: var(--c-text-3); } /* Backgrounds */ .ds-bg-surface { background: var(--c-surface); } .ds-bg-card { background: var(--c-card); } .ds-bg-orange { background: var(--brand-orange); color: #fff; } .ds-bg-army { background: var(--brand-army); color: rgba(255,255,255,.85); } .ds-bg-steel { background: var(--brand-steel); color: rgba(255,255,255,.85); } /* Spacing */ .ds-mt-1 { margin-top: var(--sp-1); } .ds-mt-2 { margin-top: var(--sp-2); } .ds-mt-3 { margin-top: var(--sp-3); } .ds-mt-4 { margin-top: var(--sp-4); } .ds-mt-5 { margin-top: var(--sp-5); } .ds-mb-4 { margin-bottom: var(--sp-4); } .ds-mb-5 { margin-bottom: var(--sp-5); } /* Flex utilities */ .ds-flex { display: flex; } .ds-flex-center { display: flex; align-items: center; justify-content: center; } .ds-flex-between{ display: flex; align-items: center; justify-content: space-between; } .ds-gap-2 { gap: var(--sp-2); } .ds-gap-3 { gap: var(--sp-3); } .ds-gap-4 { gap: var(--sp-4); } .ds-gap-5 { gap: var(--sp-5); } /* Grid shortcuts */ .ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .ds-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); } .ds-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); } /* ══════════════════════════════════════════ COMPONENT: PROGRESS BAR Usage:

══════════════════════════════════════════ */ .ds-progress { height: 14px; background: var(--c-inset); border: 2px solid var(--c-border); overflow: hidden; position: relative; } .ds-progress-sm { height: 8px; } .ds-progress-lg { height: 22px; } .ds-progress-fill { height: 100%; transition: width .6s ease; position: relative; } .ds-progress-green { background: var(--status-green); } .ds-progress-amber { background: var(--status-amber); } .ds-progress-red { background: var(--status-red); } .ds-progress-orange { background: var(--brand-orange); } .ds-progress-steel { background: var(--brand-steel); } /* Striped variant */ .ds-progress-striped .ds-progress-fill { background-image: repeating-linear-gradient( -45deg, transparent, transparent 8px, rgba(255,255,255,.15) 8px, rgba(255,255,255,.15) 16px ); background-size: 22px 22px; animation: ds-stripe-move 1s linear infinite; } @keyframes ds-stripe-move { to { background-position: 22px 0; } } /* ══════════════════════════════════════════ COMPONENT: GAUGE / RING CSS-only radial gauge. Usage:

72%

HEALTH

══════════════════════════════════════════ */ .ds-gauge { --pct: 0; --gauge-color: var(--brand-orange); --gauge-size: 140px; --gauge-track: var(--c-inset); --gauge-width: 12px; width: var(--gauge-size); height: var(--gauge-size); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: conic-gradient( var(--gauge-color) calc(var(--pct) * 3.6deg), var(--gauge-track) calc(var(--pct) * 3.6deg) ); position: relative; } .ds-gauge::before { content: ''; position: absolute; inset: var(--gauge-width); border-radius: 50%; background: var(--c-card); } .ds-gauge-val { position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 700; color: var(--gauge-color); line-height: 1; } .ds-gauge-lbl { position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); margin-top: 4px; } .ds-gauge-sm { --gauge-size: 90px; --gauge-width: 8px; } .ds-gauge-sm .ds-gauge-val { font-size: var(--fs-h5); } .ds-gauge-sm .ds-gauge-lbl { font-size: 11px; letter-spacing: 1px; } .ds-gauge-lg { --gauge-size: 200px; --gauge-width: 16px; } .ds-gauge-lg .ds-gauge-val { font-size: var(--fs-h2); } /* ══════════════════════════════════════════ COMPONENT: SPARKLINE (CSS only) A horizontal mini-chart using bar segments. Usage:

...

══════════════════════════════════════════ */ .ds-spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; padding: 0; } .ds-spark-bar { flex: 1; min-width: 6px; background: var(--brand-orange); opacity: .65; transition: opacity .2s; } .ds-spark-bar:hover { opacity: 1; } .ds-spark-hi { background: var(--status-green) !important; opacity: 1; } .ds-spark-lo { background: var(--status-red) !important; opacity: 1; } /* ══════════════════════════════════════════ COMPONENT: METRIC CARD Visual card with big number, trend arrow, and spark. Usage:

$4,200

↑ 12%

MONTHLY REVENUE

══════════════════════════════════════════ */ .ds-metric { background: var(--c-card); border: var(--bw) solid var(--c-border); box-shadow: var(--shadow-md) var(--c-shadow); padding: var(--sp-4); } .ds-metric-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .ds-metric-val { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 700; color: var(--c-text); line-height: 1; } .ds-metric-trend { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px; } .ds-metric-up { color: var(--status-green); } .ds-metric-down { color: var(--status-red); } .ds-metric-flat { color: var(--c-text-3); } .ds-metric-lbl { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); margin: 12px 0; } /* ══════════════════════════════════════════ COMPONENT: ICON STAT (big emoji + number) Usage:

📜

OPEN ITEMS

══════════════════════════════════════════ */ .ds-icon-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-4); text-align: center; } .ds-icon-stat-icon { font-size: 48px; line-height: 1; } .ds-icon-stat-val { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 700; color: var(--brand-orange); line-height: 1; } .ds-icon-stat-lbl { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); } /* ══════════════════════════════════════════ COMPONENT: TIMELINE Usage:

Step 1

Description

══════════════════════════════════════════ */ .ds-timeline { position: relative; padding-left: 28px; } .ds-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: var(--c-border-lt); } .ds-tl-item { position: relative; padding: 0 0 var(--sp-5) 20px; } .ds-tl-dot { position: absolute; left: -24px; top: 4px; width: 18px; height: 18px; border: 3px solid var(--c-border-md); background: var(--c-card); } .ds-tl-done { border-color: var(--status-green); background: var(--status-green); } .ds-tl-active { border-color: var(--brand-orange); background: var(--brand-orange); box-shadow: 0 0 12px var(--brand-orange); } .ds-tl-title { font-weight: 700; font-size: var(--fs-body); margin-bottom: 4px; } .ds-tl-desc { font-size: var(--fs-body-sm); color: var(--c-text-2); } /* ══════════════════════════════════════════ COMPONENT: SWIM LANE PAGE HERO Standard header for all 5 swim lane pages. Consistent layout, font sizes, spacing. Usage:

📜

COUNSEL · LEGAL

Two docs unsigned.
The clock is running.

Description text here.

...

══════════════════════════════════════════ */ /* ── Swim Lane Sticky Ticker ── */ .ds-lane-ticker { position: sticky; top: 0; z-index: 90; display: flex; align-items: stretch; width: 100%; background: var(--c-bg-card); border-bottom: 2px solid var(--brand-orange); box-shadow: 0 2px 12px rgba(0,0,0,.35); height: 36px; } .ds-lane-ticker-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); padding: 0 14px; white-space: nowrap; border-right: 1px solid var(--c-border); display: flex; align-items: center; flex-shrink: 0; } .ds-lane-ticker-items { display: flex; flex: 1; } .ds-lane-ticker-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--c-border); white-space: nowrap; } .ds-lane-ticker-item:last-child { border-right: none; } .ds-lane-ticker-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .ds-lane-ticker-key { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-text-3); } .ds-lane-legal .ds-lane-ticker { border-bottom-color: var(--brand-orange); } .ds-lane-finance .ds-lane-ticker { border-bottom-color: var(--brand-gold); } .ds-lane-health .ds-lane-ticker { border-bottom-color: var(--brand-steel-lt); } .ds-lane-brand .ds-lane-ticker { border-bottom-color: var(--brand-gold); } .ds-lane-tech .ds-lane-ticker { border-bottom-color: var(--status-green); } /* ── Swim Lane Hero — "One Thing at a Time" ── */ .ds-lane-hero { height: calc(100vh - 64px - 36px); display: flex; align-items: flex-start; padding: 32px var(--sp-8) var(--sp-4); box-sizing: border-box; gap: var(--sp-5); } .ds-lane-hero-left { flex: 1; min-width: 0; } .ds-lane-hero-right { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .ds-lane-hero-right .ds-card { padding: var(--sp-3); font-size: var(--fs-body-sm); } .ds-lane-hero-right .ds-data-row { padding: 5px 0; } .ds-lane-next-label { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-orange); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 12px; } .ds-lane-next-label::before { content: ''; width: 40px; height: 3px; background: var(--brand-orange); } .ds-lane-title { font-size: clamp(28px, 4vw, var(--fs-h1)); font-weight: 700; line-height: 1.1; letter-spacing: -2px; color: var(--c-text); margin-bottom: var(--sp-3); } .ds-lane-deadline { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--sp-5); } .ds-lane-deadline-dot { width: 14px; height: 14px; flex-shrink: 0; } .ds-lane-deadline-dot.overdue { background: var(--status-red); box-shadow: 0 0 12px var(--status-red); } .ds-lane-deadline-dot.due-soon { background: var(--status-amber); box-shadow: 0 0 8px var(--status-amber); } .ds-lane-deadline-dot.on-track { background: var(--status-green); } .ds-lane-done-btn { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 14px 36px; border: 3px solid var(--brand-orange); background: var(--brand-orange); color: #fff; cursor: pointer; box-shadow: var(--shadow-md) var(--c-shadow); transition: transform .15s, box-shadow .15s, background .15s; align-self: flex-start; } .ds-lane-done-btn:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg) var(--c-shadow); background: var(--brand-orange-lt); } .ds-lane-queue-count { font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-3); margin-top: var(--sp-4); } @media(max-width:900px){ .ds-lane-hero{flex-direction:column;align-items:flex-start;} .ds-lane-hero-right{width:100%;} } /* Color accents per lane */ .ds-lane-legal .ds-lane-next-label { color: var(--brand-orange); } .ds-lane-legal .ds-lane-next-label::before, .ds-lane-legal .ds-lane-next-label::after { background: var(--brand-orange); } .ds-lane-finance .ds-lane-next-label { color: var(--brand-gold); } .ds-lane-finance .ds-lane-next-label::before, .ds-lane-finance .ds-lane-next-label::after { background: var(--brand-gold); } .ds-lane-health .ds-lane-next-label { color: var(--brand-steel-lt); } .ds-lane-health .ds-lane-next-label::before, .ds-lane-health .ds-lane-next-label::after { background: var(--brand-steel-lt); } .ds-lane-brand .ds-lane-next-label { color: var(--brand-gold); } .ds-lane-brand .ds-lane-next-label::before, .ds-lane-brand .ds-lane-next-label::after { background: var(--brand-gold); } .ds-lane-tech .ds-lane-next-label { color: var(--status-green); } .ds-lane-tech .ds-lane-next-label::before, .ds-lane-tech .ds-lane-next-label::after { background: var(--status-green); } /* ══════════════════════════════════════════ COMPONENT: SWIM LANE CONTENT SECTION Standard section divider + content area. Usage:

ACTIVE ITEMS · 3

...

══════════════════════════════════════════ */ .ds-lane-section { padding: var(--sp-6) 0; border-top: 2px solid var(--c-border-lt); } /* ══════════════════════════════════════════ ARCADE / PIXEL UTILITIES ══════════════════════════════════════════ */ [data-px-icon] svg, [data-px-icon] img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; } .ds-crt-glow { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor; } .ds-crt-glow-orange { text-shadow: 0 0 8px var(--brand-orange), 0 0 20px rgba(212,88,26,.4); } .ds-scanlines { position: relative; overflow: hidden; } .ds-scanlines::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px); } .ds-pixel-border { border: 3px solid var(--c-border); box-shadow: var(--shadow-md) var(--c-shadow); border-radius: 0 !important; } /* ══════════════════════════════════════════ SCROLLBARS ══════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--c-surface); } ::-webkit-scrollbar-thumb { background: var(--c-border-md); } ::-webkit-scrollbar-thumb:hover { background: var(--brand-orange); } /* ══════════════════════════════════════════ THEME TRANSITION — smooth but not buttons ══════════════════════════════════════════ */ *:not(button):not(a):not(.ds-btn) { transition-property: background-color, color, border-color; transition-duration: .18s; transition-timing-function: ease; } /* ══════════════════════════════════════════ RESPONSIVE BREAKPOINTS Mobile-first: base → tablet → desktop ══════════════════════════════════════════ */ /* Tablet and below (≤768px) */ @media (max-width: 768px) { :root { zoom: 1 !important; } /* Nav */ .tbn-nav { flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; } .tbn-nav a { font-size: 10px; padding: 4px 6px; letter-spacing: 1px; } .hdr-brand { font-size: 14px; } .hdr-clock { display: none; } /* Snap sections */ .ds-snap-s, .ds-snap-s-top, .snap-section, .s, .snap-section-top, .s-top { min-height: auto; padding: 24px 16px; } /* Typography scale down */ .ds-display { font-size: 32px; letter-spacing: -1px; } .ds-h1 { font-size: 24px; } .ds-h2 { font-size: 20px; } .ds-h3 { font-size: 16px; } /* Grids collapse */ .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; } /* Footer */ .tbn-footer { padding: 24px 16px; } .tbn-fgrid { grid-template-columns: 1fr; gap: 24px; } .tbn-fbrand { min-width: auto; } /* Page wraps (used in entities, boardroom, etc) */ .page-wrap { padding: 24px 16px 60px; } /* Stat cards / flex rows */ .totals-bar, .ent-stats { flex-direction: column; } .doc-grid { grid-template-columns: 1fr; } } /* Mobile (≤480px) */ @media (max-width: 480px) { .tbn-nav a { font-size: 9px; padding: 3px 5px; } .ds-display { font-size: 26px; } .ds-h1 { font-size: 20px; } .page-wrap { padding: 16px 12px 48px; } .ds-snap-s, .ds-snap-s-top, .snap-section, .s, .snap-section-top, .s-top { padding: 16px 12px; } }

Two docs unsigned. The clock is running.

Two docs unsigned.
The clock is running.