/* ========================================================================= DealStringer — v2 "The Filing" — Design Tokens Wire-terminal direction. Dark surface, grotesque display, monospace stamp. ------------------------------------------------------------------------ v1.0 / Filed 2026-05-14 Usage: ... Everything here is namespaced --t-* (terminal). Pair with the brand guidelines (Design System v2.html) — that is the visual constitution; this file is the build version. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* --------------------------------------------------------------------- */ /* COLOR */ /* Three surfaces, one ink scale, one accent, one signal red, one desk. */ /* Ratio target ~ 62 / 30 / 7 / 1. */ /* --------------------------------------------------------------------- */ --t-bg: #0C0B08; /* Terminal — primary surface, warm near-black */ --t-panel: #15130E; /* Panel — raised surface (cards) */ --t-panel-2: #1F1C14; /* Panel 2 — highest elevation (header bars) */ --t-panel-3: #2A271D; /* Panel 3 — hover state */ --t-ink: #EAE3CF; /* Ink — primary type, warm off-white */ --t-ink-80: #C3BCA6; /* Body text on dark */ --t-ink-60: #8A8470; /* Secondary type, metadata */ --t-ink-40: #5F5A48; /* Tertiary, dim metadata */ --t-ink-20: #3B3729; /* Disabled / on-panel rule */ --t-rule: #2D2A1F; /* Hairline rule */ --t-rule-2: #46422F; /* Bolder rule, container borders */ --t-signal: #FF8A2A; /* SIGNAL — the brand's single accent */ --t-signal-2: #FFB570; /* Signal hover / lighter */ --t-signal-d: #5A3210; /* Signal wash — backgrounds for signal tags */ --t-press: #FF4B2B; /* PRESS — breaking, kill marks, errors */ --t-press-d: #4A1810; /* Press wash */ --t-desk: #4FA9D9; /* DESK — editor / support messages only */ --t-desk-d: #112A3C; /* Desk wash */ /* --------------------------------------------------------------------- */ /* TYPE */ /* Three families. No more. See Design System v2 § 04 for scale rules. */ /* --------------------------------------------------------------------- */ --t-font-display: 'Bricolage Grotesque', 'Inter Tight', system-ui, -apple-system, sans-serif; --t-font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Size scale */ --t-text-xs: 11px; /* Wire stamp, datelines */ --t-text-sm: 13px; --t-text-base: 15px; --t-text-md: 17px; --t-text-lg: 22px; --t-text-xl: 28px; --t-text-2xl: 36px; --t-text-3xl: 48px; --t-text-4xl: 64px; --t-text-5xl: 84px; --t-text-6xl: 124px; --t-leading-tight: 0.92; --t-leading-snug: 1.12; --t-leading-base: 1.55; /* --------------------------------------------------------------------- */ /* SPACING — 4pt base */ /* --------------------------------------------------------------------- */ --t-1: 4px; --t-2: 8px; --t-3: 12px; --t-4: 16px; --t-5: 24px; --t-6: 32px; --t-7: 48px; --t-8: 64px; --t-9: 96px; --t-10: 128px; /* --------------------------------------------------------------------- */ /* RADIUS — minimal. The brand is orthogonal. */ /* --------------------------------------------------------------------- */ --t-radius-0: 0; --t-radius-1: 2px; --t-radius-2: 4px; /* --------------------------------------------------------------------- */ /* SHADOWS — the brand prefers rules to shadows. */ /* --------------------------------------------------------------------- */ --t-shadow-panel: 0 1px 0 var(--t-rule-2), 0 24px 64px -32px rgba(0,0,0,0.6); --t-shadow-glow: 0 0 32px -8px rgba(255,138,42,0.45); } /* ========================================================================= Base reset ========================================================================= */ html, body { margin: 0; padding: 0; background: var(--t-bg); color: var(--t-ink); } body { font-family: var(--t-font-sans); font-size: var(--t-text-base); line-height: var(--t-leading-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: border-box; } /* Subtle scanline texture + CRT vignette. Opt in via class. */ .t-crt::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px), radial-gradient(ellipse 100% 70% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%); } /* ========================================================================= Type primitives ========================================================================= */ .t-display { font-family: var(--t-font-display); font-weight: 700; line-height: var(--t-leading-tight); letter-spacing: -0.045em; font-variation-settings: "opsz" 96; } .t-h1 { font-family: var(--t-font-display); font-weight: 700; font-size: var(--t-text-4xl); line-height: 0.96; letter-spacing: -0.048em; } .t-h2 { font-family: var(--t-font-display); font-weight: 600; font-size: var(--t-text-2xl); line-height: 1.1; letter-spacing: -0.028em; } .t-lede { font-family: var(--t-font-sans); font-size: var(--t-text-lg); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; color: var(--t-ink); } .t-body { font-family: var(--t-font-sans); font-size: var(--t-text-base); line-height: var(--t-leading-base); color: var(--t-ink-80); } .t-mono { font-family: var(--t-font-mono); font-size: var(--t-text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-ink); font-feature-settings: 'tnum'; } .t-kicker { font-family: var(--t-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-ink-60); } .t-kicker-signal { font-family: var(--t-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-signal); display: inline-flex; align-items: center; gap: 10px; } .t-kicker-signal::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--t-signal); } /* Light/accent helpers for display headlines */ .t-light { font-weight: 300; color: var(--t-ink-60); } .t-accent { color: var(--t-signal); } /* ========================================================================= The wordmark — use everywhere DealStringer appears as a brand mark ========================================================================= */ .t-wordmark { font-family: var(--t-font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.9; color: var(--t-ink); display: inline-flex; align-items: baseline; font-variation-settings: "opsz" 72; } .t-wordmark .glyph { color: var(--t-signal); } .t-wordmark--sm { font-size: 22px; letter-spacing: -0.038em; } .t-wordmark--md { font-size: 44px; letter-spacing: -0.045em; } .t-wordmark--lg { font-size: 84px; letter-spacing: -0.05em; } .t-wordmark--xl { font-size: 168px; letter-spacing: -0.05em; } /* Blinking cursor block — for live/filed signaling only */ .t-cursor { display: inline-block; width: 0.6ch; height: 0.9em; background: var(--t-signal); vertical-align: -0.08em; margin-left: 2px; animation: t-blink 1s steps(2) infinite; } @keyframes t-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* ========================================================================= Top HUD — the masthead-bar at the top of files, intake, website ========================================================================= */ .t-hud { border: 1px solid var(--t-rule-2); background: var(--t-panel); padding: 10px 16px; display: flex; align-items: center; gap: 22px; font-family: var(--t-font-mono); font-size: 11px; font-weight: 500; color: var(--t-ink-60); letter-spacing: 0.06em; } .t-hud .live { color: var(--t-signal); display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.14em; } .t-hud .live::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--t-signal); border-radius: 50%; animation: t-blip 1.6s ease-in-out infinite; } @keyframes t-blip { 0%, 70% { box-shadow: 0 0 0 0 rgba(255,138,42,0.6); opacity: 1; } 100% { box-shadow: 0 0 0 8px rgba(255,138,42,0); opacity: 0.4; } } .t-hud .vol { color: var(--t-ink); font-weight: 600; } /* ========================================================================= Buttons ========================================================================= */ .t-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--t-font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 16px 11px; border: 1px solid var(--t-signal); background: var(--t-signal); color: var(--t-bg); cursor: pointer; text-decoration: none; border-radius: var(--t-radius-0); transition: background 120ms ease, border-color 120ms ease; line-height: 1; } .t-btn:hover { background: var(--t-signal-2); border-color: var(--t-signal-2); } .t-btn--outline { background: transparent; color: var(--t-ink); border-color: var(--t-rule-2); } .t-btn--outline:hover { border-color: var(--t-ink); background: var(--t-panel-2); } .t-btn--ghost { background: transparent; border-color: transparent; color: var(--t-signal); padding-left: 0; padding-right: 0; } .t-btn--ghost:hover { color: var(--t-signal-2); background: transparent; } .t-btn--press { background: var(--t-press); border-color: var(--t-press); color: var(--t-bg); } .t-btn--press:hover { background: var(--t-press); filter: brightness(1.1); } /* ========================================================================= Tags / flags — for datelines, breaking, priority ========================================================================= */ .t-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--t-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px 3px; background: var(--t-panel-3); color: var(--t-ink); border: 1px solid var(--t-rule-2); border-radius: var(--t-radius-1); } .t-tag--signal { background: var(--t-signal-d); color: var(--t-signal); border-color: var(--t-signal); } .t-tag--solid { background: var(--t-signal); color: var(--t-bg); border-color: var(--t-signal); } .t-tag--press { background: var(--t-press-d); color: var(--t-press); border-color: var(--t-press); } .t-tag--desk { background: var(--t-desk-d); color: var(--t-desk); border-color: var(--t-desk); } .t-tag--ghost { background: transparent; color: var(--t-ink-60); border-color: var(--t-rule-2); } /* ========================================================================= Inputs (used by The Brief) ========================================================================= */ .t-input, .t-textarea, .t-select { font-family: var(--t-font-sans); font-size: var(--t-text-base); color: var(--t-ink); background: var(--t-bg); border: 1px solid var(--t-rule-2); padding: 12px 14px; width: 100%; outline: none; border-radius: var(--t-radius-0); transition: border-color 120ms ease, box-shadow 120ms ease; } .t-input::placeholder, .t-textarea::placeholder { color: var(--t-ink-40); } .t-input:focus, .t-textarea:focus, .t-select:focus { border-color: var(--t-signal); box-shadow: 0 0 0 1px var(--t-signal); } .t-textarea { line-height: 1.55; resize: vertical; min-height: 96px; } .t-select { appearance: none; background: url("data:image/svg+xml;utf8,") no-repeat right 12px center / 10px 7px, var(--t-bg); padding-right: 32px; } .t-label { display: block; font-family: var(--t-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-ink-60); margin-bottom: 8px; } .t-label .num { color: var(--t-signal); margin-right: 6px; } .t-label .req { color: var(--t-signal); margin-left: 6px; } /* ========================================================================= Panels — basic raised surfaces ========================================================================= */ .t-panel { background: var(--t-panel); border: 1px solid var(--t-rule-2); } .t-panel--head { background: var(--t-panel-2); border-bottom: 1px solid var(--t-rule-2); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-ink-60); } .t-panel--head b { color: var(--t-ink); font-weight: 600; } .t-panel--body { padding: 24px 24px 26px; } /* Three terminal-window dots (used in mocked panel chrome) */ .t-dots { display: inline-flex; gap: 6px; } .t-dots span { width: 8px; height: 8px; background: var(--t-ink-40); display: inline-block; } .t-dots span:first-child { background: var(--t-press); } .t-dots span:nth-child(2) { background: var(--t-signal); } .t-dots span:last-child { background: var(--t-desk); } /* ========================================================================= Wire row — the canonical story card used in The File ========================================================================= */ .t-wire { background: var(--t-bg); border: 1px solid var(--t-rule-2); } .t-wire-head { background: var(--t-panel-2); border-bottom: 1px solid var(--t-rule-2); padding: 10px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; font-family: var(--t-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .t-wire-head .title { color: var(--t-signal); } .t-wire-head .count { color: var(--t-ink-60); } .t-wire-head .rule { height: 1px; background: var(--t-rule-2); } .t-wire-row { padding: 18px; display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; border-bottom: 1px solid var(--t-rule); align-items: start; } .t-wire-row:last-child { border-bottom: 0; } .t-wire-row .rk { font-family: var(--t-font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.045em; color: var(--t-signal); font-variation-settings: "opsz" 48; } .t-wire-row .meta { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-ink-60); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .t-wire-row .meta .sep { color: var(--t-ink-40); } .t-wire-row h4 { font-family: var(--t-font-display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.024em; color: var(--t-ink); margin: 0 0 4px; } .t-wire-row p { font-family: var(--t-font-sans); font-size: 14px; line-height: 1.5; color: var(--t-ink-80); margin: 0; } .t-wire-row p strong { color: var(--t-ink); font-weight: 600; } .t-wire-row .ract { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-signal); font-weight: 600; align-self: center; text-decoration: none; white-space: nowrap; } .t-wire-row .ract:hover { color: var(--t-signal-2); } /* ========================================================================= Endmark — section divider (newsroom -30- convention) ========================================================================= */ .t-endmark { text-align: center; font-family: var(--t-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.4em; color: var(--t-ink-40); margin: 36px 0; } .t-endmark::before, .t-endmark::after { content: ""; display: inline-block; width: 64px; height: 1px; background: var(--t-rule-2); vertical-align: middle; margin: 0 16px; transform: translateY(-3px); } /* ========================================================================= Utility — focus ring, links ========================================================================= */ a { color: var(--t-signal); } a:hover { color: var(--t-signal-2); } :focus-visible { outline: 2px solid var(--t-signal); outline-offset: 2px; }