) to opt in to the terminal look. - Component classes (.card, .chip, .cpl-line, .nrail, .zone, .fitem, .stat, .btn, .mono, .micro, .eyebrow, .topbar, .statechip, .gulfchip, .fresh, .dot, .footnote, .lensslab, .rail-lens, etc.) are additive — they don't exist anywhere in the current template set (verified) — so they're defined at top level, unprefixed, exactly as in the mockups. They only do anything on elements that carry them. ========================================================================== */ /* ============ design tokens (shared across all three mockups / tailwind.config.js "er-*" palette — same colors, CSS-var form for hand-written component CSS) ============ */ :root { --void: #080a0f; --bg: #0b0e15; --surface: #131720; --shelf: #191e2a; --border: #222938; --border-strong: #2d3548; --border-light: rgba(255,255,255,.05); --ghost: #3a4358; --slate: #6b7a94; --silver: #94a3b8; --bone: #c8d1de; --cream: #e2e8f0; --text: #f1f5f9; --accent: #3b82f6; --accent-bright: #60a5fa; --accent-glow: rgba(59,130,246,.15); --cyan: #22d3ee; /* ETI / threat-band ramp — semantic, distinct from the blue accent */ --clear: #3a4358; --watch: #fbbf24; --threat: #fb923c; --critical: #f87171; --clear-wash: rgba(58,67,88,.20); --watch-wash: rgba(251,191,36,.10); --threat-wash: rgba(251,146,60,.12); --critical-wash: rgba(248,113,113,.12); --green: #34d399; --red: #f87171; --amber: #fbbf24; --green-wash: rgba(52,211,153,.12); --red-wash: rgba(248,113,113,.12); --amber-wash: rgba(251,191,36,.10); /* chart-only: a prior-run line needs to clear the dark surface (--ghost is too low-contrast for a stroke) */ --run-ghost: #55627e; /* prod already loads the real webfonts in base.html (Source Serif 4 / JetBrains Mono / DM Sans) — reference them first, mockup fallbacks after */ --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --serif: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ============ page-level chrome (SCOPED — .wireroom root only) ============ */ .wireroom { background: var(--void); color: var(--bone); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; background-image: radial-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: 3px 3px; } .wireroom *, .wireroom *::before, .wireroom *::after { box-sizing: border-box; } .wireroom a { color: var(--accent-bright); text-decoration: none; } .wireroom a:hover { text-decoration: underline; } .wireroom :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 3px; } .wireroom .wrap { max-width: 100%; margin: 0 auto; padding: 0 20px 80px; } .wireroom h2.sec { font-family: var(--serif); font-size: 16px; color: var(--cream); font-weight: 600; margin: 0 0 12px; } .wireroom .secgap { margin-top: 26px; } .wireroom .hair { border-color: var(--border); } /* ============ additive component classes (safe globally — new class names, inert unless applied) ============ */ .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .tnum { font-variant-numeric: tabular-nums; } .micro { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ghost); } /* ---- topbar ---- */ .topbar { position: sticky; top: 0; z-index: 40; background: rgba(8,10,15,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .topbar-in { max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 20px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--cream); } .brand .tld { color: var(--slate); font-weight: 500; } .navlinks { display: flex; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; } .navlinks a { color: var(--slate); } .navlinks a:hover { color: var(--cream); text-decoration: none; } .statechip { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; } .statechip.quiet { background: var(--surface); color: var(--silver); border: 1px solid var(--border); } .statechip.active { background: var(--critical-wash); color: var(--critical); border: 1px solid rgba(248,113,113,.35); } /* Degree-Day Desk uses .statechip bare (no .quiet/.active modifier) for a permanent regime chip — defaults to the same "loud" red treatment used by .statechip.active, since a regime chip is inherently an alert-toned state. */ .statechip:not(.quiet):not(.active) { background: var(--red-wash); color: var(--red); border: 1px solid rgba(248,113,113,.35); } /* Degree-Day Desk's topbar sibling chip — always visible, links out, never buried */ .gulfchip { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; color: var(--slate); border: 1px solid var(--border); display: inline-block; } .gulfchip:hover { color: var(--accent-bright); border-color: var(--accent); text-decoration: none; } /* ---- freshness / beacon ---- */ /* ONE beacon meaning site-wide (owner directive §7a.4): pulsing cyan = "live now", nothing else pulses. .dot.armed / .dot.crit are STATIC color variants only — deviates from the storm_watch.html mockup, which still animates .dot.crit; that mockup predates the owner's round-1 note asking to collapse the beacon zoo. See this file's header note + the handover doc. */ .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .dot.live, .dot.call { background: var(--cyan); box-shadow: 0 0 0 0 rgba(34,211,238,.6); animation: beacon 2.4s infinite; } .dot.crit { background: var(--critical); } .dot.armed { background: var(--accent); } @keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,211,238,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } } .countdown { font-family: var(--mono); font-size: 11.5px; color: var(--silver); letter-spacing: .04em; } .countdown b { color: var(--cream); font-weight: 600; } .zclock { font-family: var(--mono); font-size: 11.5px; color: var(--silver); letter-spacing: .04em; } .zclock b { color: var(--cream); font-weight: 600; } .pricestrip { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .px { font-family: var(--mono); font-size: 11px; color: var(--slate); } .px b { color: var(--bone); font-weight: 600; } .px .up { color: var(--green); } .px .dn { color: var(--red); } .freshset { display: flex; gap: 10px; align-items: center; } .fresh { font-family: var(--mono); font-size: 10px; color: var(--slate); display: flex; align-items: center; gap: 5px; } .fresh .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; } .fresh.stale .d { background: var(--amber); } .fresh.stale { color: var(--amber); } /* ---- preview state switch (review affordance, not shipped product chrome) ---- */ .prev-switch { display: flex; align-items: center; gap: 8px; margin: 16px 0 22px; } .prev-switch .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ghost); } .prevnote { display: flex; align-items: center; gap: 10px; margin: 14px 0 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ghost); } .prevnote .pill { border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--slate); } .samplenote { display: flex; align-items: center; gap: 10px; margin: 16px 0 22px; } .samplenote .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ghost); } .samplenote .pill { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; color: var(--amber); } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .seg button { background: transparent; border: 0; color: var(--slate); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; cursor: pointer; } .seg button + button { border-left: 1px solid var(--border); } .seg button[aria-pressed="true"] { background: var(--shelf); color: var(--cream); } section.view { display: none; } section.view.on { display: block; } /* ============ shared blocks ============ */ .card { background: linear-gradient(180deg, rgba(255,255,255,.012), transparent), var(--surface); border: 1px solid var(--border); border-radius: 10px; } .eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ghost); margin-bottom: 10px; } .grid12 { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } @media (max-width: 860px) { .grid12 { grid-template-columns: 1fr; } } /* ---- hero read / basin read / theread (serif headline, one style site-wide, trimmed to the owner's §7a.1 size: 22-24px, max two sentences) ---- */ .basinread { font-family: var(--serif); font-size: 23px; line-height: 1.3; color: var(--cream); text-wrap: balance; letter-spacing: -.01em; font-weight: 600; margin: 2px 0 0; } .basinread .em { color: var(--text); } .theread { font-family: var(--serif); font-size: 23px; line-height: 1.34; color: var(--cream); letter-spacing: -.005em; font-weight: 600; margin: 2px 0 0; max-width: 920px; text-wrap: balance; } .theread .em { color: var(--text); } .synoptic { font-size: 13.5px; color: var(--silver); line-height: 1.65; max-width: 920px; margin: 12px 0 0; } .synoptic b { color: var(--cream); } .synoptic .klbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ghost); margin-right: 8px; } .chipstrip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .chip { font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--silver); display: inline-flex; align-items: center; gap: 7px; background: var(--void); font-variant-numeric: tabular-nums; } .chip .k { color: var(--slate); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; } .chip b { color: var(--bone); font-weight: 600; } .chip .rise { color: var(--red); } .chip .fall { color: var(--green); } .spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; } .spark i { width: 3px; background: var(--accent); opacity: .75; border-radius: 1px; } .poschips { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 18px 0; } /* ---- trigger board ---- */ .tablescroll { overflow-x: auto; } .trig { width: 100%; border-collapse: collapse; margin-top: 6px; } .trig.tablescroll, .tablescroll .trig { min-width: 560px; } .trig th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ghost); text-align: left; font-weight: 500; padding: 0 10px 8px 0; } .trig th.r, .trig td.r { text-align: right; } .trig td { padding: 10px 10px 10px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--bone); vertical-align: top; } .trig td.cond { color: var(--cream); } .trig td.now { font-family: var(--mono); color: var(--cream); font-weight: 600; white-space: nowrap; } .trig td.trip, .trig td.gap { font-family: var(--mono); color: var(--silver); white-space: nowrap; } .trig td.gap b { color: var(--amber); } .trig td.act { text-align: right; white-space: nowrap; } .alertbtn { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; background: transparent; border: 1px solid var(--border); color: var(--slate); border-radius: 5px; padding: 4px 8px; cursor: pointer; } .alertbtn:hover { border-color: var(--accent); color: var(--accent-bright); } .alertx { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--silver); gap: 8px; align-items: center; flex-wrap: wrap; } .alertx.on { display: flex; } .alertx .tag { font-family: var(--mono); font-size: 11px; color: var(--cream); background: var(--void); border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; } /* ---- call ledger ---- */ .score { font-family: var(--mono); font-size: 11px; color: var(--slate); margin-bottom: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .score b { color: var(--cream); } .score .op { color: var(--accent-bright); } .score .cf { color: var(--green); } .score .wr { color: var(--critical); } .call { border: 1px solid var(--border); border-radius: 9px; background: var(--void); padding: 13px 14px; margin-bottom: 10px; } .call .claim { font-size: 13.5px; color: var(--cream); line-height: 1.42; font-weight: 500; } .call .basis { font-size: 12px; color: var(--silver); margin-top: 7px; line-height: 1.5; } .call .basis .k { color: var(--slate); } .call .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); } .stat { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex: none; } .stat.open { background: var(--accent-glow); color: var(--accent-bright); } .stat.confirmed { background: var(--green-wash); color: var(--green); } .stat.wrong { background: var(--critical-wash); color: var(--critical); } /* ---- terminal-chrome CTA blocks: "arm the season" / "get the mark" / "wire in" ---- */ .arm { margin-top: 18px; border: 1px solid var(--border-strong); border-radius: 11px; overflow: hidden; background: linear-gradient(180deg, rgba(59,130,246,.05), transparent), var(--surface); } .arm-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .arm-top .ic { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .arm-top .t { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); } .arm-body { padding: 14px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .arm-body p { margin: 0; font-size: 13px; color: var(--silver); max-width: 430px; line-height: 1.5; } .arm-body p b { color: var(--cream); } .arm-form { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } .arm-form input { background: var(--void); border: 1px solid var(--border); border-radius: 7px; color: var(--cream); font-family: var(--mono); font-size: 12.5px; padding: 9px 12px; min-width: 210px; } .arm-form input::placeholder { color: var(--slate); } .arm-proof { font-family: var(--mono); font-size: 11px; color: var(--slate); padding: 0 16px 14px; font-variant-numeric: tabular-nums; } .arm-proof b { color: var(--cyan); } .wirein { border: 1px solid var(--border-strong); border-radius: 11px; overflow: hidden; background: linear-gradient(180deg, rgba(59,130,246,.05), transparent), var(--surface); } .wirein-top { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); } .wirein-top .ic { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .wirein-top .t { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); } .wirein-body { padding: 13px 15px; } .wirein-body p { margin: 0 0 11px; font-size: 12.5px; color: var(--silver); line-height: 1.5; } .wirein form { display: flex; gap: 7px; flex-wrap: wrap; } .wirein input { flex: 1; min-width: 150px; background: var(--void); } .wirein-proof { font-family: var(--mono); font-size: 10px; color: var(--slate); padding: 0 15px 13px; font-variant-numeric: tabular-nums; } .wirein-proof b { color: var(--cyan); } .wirebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--void); padding: 11px 18px; } .wirebar .lead { font-family: var(--mono); font-size: 11px; color: var(--silver); display: flex; align-items: center; gap: 8px; } .wirebar .lead b { color: var(--cream); letter-spacing: .08em; } .wirebar .pitch { font-size: 12px; color: var(--slate); } .wirebar form { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; } .wirebar input, .wirein input, .arm-form input { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--cream); font-family: var(--mono); font-size: 12px; padding: 8px 11px; min-width: 190px; } .wirebar input::placeholder, .wirein input::placeholder { color: var(--slate); } .btn { background: var(--accent); color: #06122b; border: 0; border-radius: 7px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; } .btn:hover { background: var(--accent-bright); } /* ============ the couplet family (signature component, 3 sizes) ============ */ /* .cpl / .cpl-line — Storm Watch delta couplet + rail (largest, used with .rail/.raildot) */ .cpl { display: flex; flex-direction: column; gap: 7px; } .cpl-line { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; flex-wrap: wrap; } .cpl-line .name { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--silver); min-width: 118px; } .cpl-line .old { color: var(--slate); font-size: 13px; } .cpl-line .arw { color: var(--ghost); } .cpl-line .new { font-size: 17px; font-weight: 700; color: var(--cream); } .cpl-line .cross { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); margin-left: 2px; } .cpl-line .lbl { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); } /* .hcpl — Degree-Day Desk national-anchor couplet (largest numerals) */ .hcpl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-variant-numeric: tabular-nums; margin: 4px 0 2px; } .hcpl .name { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--silver); } .hcpl .old { color: var(--slate); font-size: 24px; } .hcpl .arw { color: var(--ghost); font-size: 20px; } .hcpl .new { font-size: 44px; font-weight: 700; color: var(--red); line-height: 1; } .hcpl .delta { font-size: 14px; font-weight: 700; color: var(--red); } .hcpl .vsnorm { font-size: 13px; color: var(--silver); } .hcpl .vsnorm b { color: var(--red); } .dualstamp { font-family: var(--mono); font-size: 11px; color: var(--slate); letter-spacing: .03em; margin-top: 6px; } .dualstamp b { color: var(--bone); } .dualstamp .dd { color: var(--amber); } /* .rcpl — Degree-Day Desk per-zone couplet (compact, sits beside the normal-band rail) */ .rcpl { display: flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-variant-numeric: tabular-nums; flex-wrap: wrap; } .rcpl .old { color: var(--slate); font-size: 13px; } .rcpl .arw { color: var(--ghost); } .rcpl .new { font-size: 24px; font-weight: 700; line-height: 1; } .rcpl .anom { font-size: 11px; font-weight: 700; } /* ============ the threat rail (Storm Watch: prev→cur across ETI bands) ============ */ .rail { position: relative; height: 6px; border-radius: 3px; overflow: visible; background: linear-gradient(90deg, var(--clear) 0 20%, var(--watch) 20% 40%, var(--threat) 40% 70%, var(--critical) 70% 100%); opacity: .28; } .railwrap { position: relative; } /* fixed 2026-07-06: a 6px fixed height collapsed the rail+caption block — captions overlapped following content and .zone{overflow:hidden} clipped them */ .railfill { position: absolute; top: 0; height: 6px; border-radius: 3px; opacity: .9; } .raildot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); border: 2px solid var(--void); } .raildot.ghost { background: var(--slate); width: 7px; height: 7px; } .railnotch { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--amber); } /* ============ the normal-band rail (Degree-Day Desk: sibling of the threat rail, used by degree-day zone desks) ============ */ .nrail { position: relative; height: 6px; border-radius: 3px; background: var(--shelf); } .nrail .sig { position: absolute; top: 0; height: 6px; background: rgba(148,163,184,.14); border-radius: 3px; } .nrail .notch { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--silver); } .nrail .gdot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--slate); border: 2px solid var(--void); } /* NOW marker: ONE consistent neutral shape everywhere — a hollow accent ring. State/anomaly color lives in the NUMBER (see .rcpl .new / .anom), never in the marker (owner directive §7a.4). */ .nrail .dotv { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--void); border: 2px solid var(--accent-bright); } .nrail-cap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-top: 7px; } .nrail-cap > span:first-child, .nrail-cap > span:last-child { flex: none; } .nrail-cap b { color: var(--bone); } /* ============ zone desk (Degree-Day Desk — one hub-area card: SETUP + EVOLUTION prose + a compact numbers panel) ============ */ .zone { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-top: 14px; overflow: hidden; } .zone-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cream); } .zone-h .hubs { color: var(--slate); font-weight: 500; font-size: 10px; } .zone-b { display: grid; grid-template-columns: minmax(0,1fr) 270px; } @media (max-width: 820px) { .zone-b { grid-template-columns: 1fr; } } .zone-txt { padding: 13px 16px; border-right: 1px solid var(--border); } @media (max-width: 820px) { .zone-txt { border-right: 0; border-bottom: 1px solid var(--border); } } .zone-txt p { margin: 0; font-size: 13.5px; color: var(--silver); line-height: 1.65; } .zone-txt p + p { margin-top: 9px; } .zone-txt b { color: var(--cream); } .zlbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ghost); margin-right: 7px; } .zone-num { padding: 13px 16px; } .zone-num .railwrap { margin-top: 14px; } .ichip { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; padding: 2px 7px; border-radius: 4px; background: var(--red-wash); color: var(--red); margin-left: auto; } /* ============ market read + EIA line (Degree-Day Desk §E) ============ */ .mktread { font-size: 14px; color: var(--bone); line-height: 1.6; } .mktread b { color: var(--cream); } .mktread .bull { color: var(--red); font-weight: 600; } .mktread .k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); } .eialine { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--slate); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .eialine b { color: var(--bone); } .eialine .draw { color: var(--red); } /* ============ homepage: state strip (hero layer 1) ============ */ .statestrip { background: var(--void); border-bottom: 1px solid var(--border); } .strip-in { max-width: 100%; margin: 0 auto; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: thin; } .scell { flex: none; padding: 11px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 104px; } .scell a { color: inherit; } .scell a:hover { text-decoration: none; } .scell .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); } .scell .v { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--cream); font-weight: 600; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; } .scell .v .old { color: var(--slate); font-size: 11px; font-weight: 400; } .scell .v .arw { color: var(--ghost); font-size: 11px; } .scell .d1 { font-size: 10.5px; font-weight: 500; } .up { color: var(--green); } .dn { color: var(--red); } .scell.clock .v { color: var(--cyan); letter-spacing: .04em; } /* stale desaturation + AS-OF stamp: the stamp itself stays legible even though the surrounding cell desaturates (§ anti-hallucination trust rule — stale data is shown loudly, never as live) */ .scell.stale { filter: saturate(.15) brightness(.85); } .scell.stale .v { color: var(--slate); } .scell.stale .asof { font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; color: var(--amber); filter: saturate(4); } .scell.storm .v { font-size: 11.5px; letter-spacing: .06em; display: flex; align-items: center; gap: 7px; } .scell.storm .v b { color: var(--silver); font-weight: 600; } .scell.heat .v { color: var(--amber); font-size: 12.5px; letter-spacing: .04em; } .scell.heat .v b { color: var(--cream); } /* generic "stale, shown loudly" desaturation hook reused outside the state strip (Storm Watch uses body.is-stale .desat) */ .desat { transition: filter .4s; } body.is-stale .desat { filter: saturate(.18) brightness(.92); } .stalebanner { display: none; align-items: center; gap: 12px; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); border-radius: 9px; padding: 12px 15px; margin-bottom: 18px; } body.is-stale .stalebanner { display: flex; } .stalebanner .lab { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--critical); } .stalebanner .sub { font-family: var(--mono); font-size: 11px; color: var(--silver); } /* ---- pressroom line ---- */ .pressroom { max-width: 100%; margin: 0 auto; padding: 7px 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--border); background: var(--bg); display: flex; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .pressroom b { color: var(--silver); font-weight: 600; } .pressroom .sep { color: var(--ghost); } /* ---- homepage main grid + "the read" hero (layer 2) ---- */ .main { display: grid; grid-template-columns: minmax(0,65fr) minmax(0,35fr); gap: 32px; align-items: start; } @media (max-width: 920px) { .main { grid-template-columns: 1fr; } } .callchrome { border: 1px solid var(--border-strong); border-radius: 11px; overflow: hidden; background: linear-gradient(180deg, rgba(59,130,246,.04), transparent 40%), var(--surface); } .call-label { display: flex; align-items: center; gap: 9px; padding: 12px 18px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--slate); } .call-label b { color: var(--cream); font-weight: 700; } .readmore { display: inline-block; margin: 14px 18px 16px; font-family: var(--mono); font-size: 11.5px; } /* ---- the feed (ONE title style — sans 15px/600 cream; provenance lives in the meta line only, never in per-item font games — owner directive §7b.3) ---- */ .feedhead { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border); margin: 30px 0 0; flex-wrap: wrap; } .feedhead button, .feedhead a[role="tab"] { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--slate); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; cursor: pointer; text-decoration: none; display: inline-block; } .feedhead a[role="tab"]:hover { color: var(--cream); text-decoration: none; } .feedhead button[aria-pressed="true"], .feedhead a[role="tab"][aria-pressed="true"] { color: var(--cream); border-bottom-color: var(--accent); } /* peek affordance: inline excerpt loaded into a

under a feed row */ .peek { margin-top: 8px; } .peek summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; user-select: none; } .peek summary::-webkit-details-marker { display: none; } .peek summary::before { content: "▸"; font-size: 8px; color: var(--ghost); } .peek[open] summary::before { content: "▾"; } .peek summary:hover { color: var(--cream); border-color: var(--border-strong); } .peek .peekbody { margin: 10px 0 2px; padding: 12px 14px; border-left: 2px solid var(--border-strong); background: var(--surface); border-radius: 0 8px 8px 0; } .peek .peekbody p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--silver); } .peek .peekbody p:last-of-type { margin-bottom: 0; } .peek .peekload { font-family: var(--mono); font-size: 10px; color: var(--ghost); letter-spacing: .06em; text-transform: uppercase; } .peekmore { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 11px; } .peekbody-empty { font-family: var(--mono); font-size: 11px; color: var(--slate); } .feedhead .sort { margin-left: auto; display: flex; gap: 2px; } .fitem { display: flex; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--border); align-items: baseline; } /* expandable feed row (owner 2026-07-06: dense list, headline click expands the FULL article inline).

variant of .fitem — summary IS the row. */ details.fitem-x { display: block; padding: 0; } .fitem-x summary { display: flex; gap: 12px; padding: 7px 2px; align-items: baseline; cursor: pointer; list-style: none; } .fitem-x summary::-webkit-details-marker { display: none; } /* SINGLE line per row (owner 2026-07-06): title ellipsizes, meta hugs the right */ .fitem-x summary .ttl, .fitem-line .ttl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fitem-x summary .fmeta, .fitem-line .fmeta { flex: none; display: inline-flex; gap: 6px; margin: 0; align-items: baseline; white-space: nowrap; } .fitem-line { align-items: baseline; } .fitem-x summary:hover .ttl { color: var(--text); } @media(max-width: 700px){ .fitem-x summary .ttl, .fitem-line .ttl { white-space: normal; } .fitem-x summary .fmeta, .fitem-line .fmeta { display: none; } } .fitem-x .ttl::after { content: "▸"; font-size: 9px; color: var(--ghost); margin-left: 8px; } .fitem-x[open] .ttl::after { content: "▾"; } .fitem-x .peekbody { margin: 4px 0 14px 66px; padding: 14px 16px; border-left: 2px solid var(--border-strong); background: var(--surface); border-radius: 0 8px 8px 0; max-width: 720px; } .fitem-x .peekbody p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: var(--bone); } .fitem-x .peekbody p:last-of-type { margin-bottom: 0; } @media(max-width: 700px){ .fitem-x .peekbody { margin-left: 0; } } .fitem .ts { font-family: var(--mono); font-size: 10px; color: var(--slate); flex: none; min-width: 52px; font-variant-numeric: tabular-nums; } .fitem .bd { flex: 1; min-width: 0; } .fitem .ttl { font-size: 15px; color: var(--cream); font-weight: 600; line-height: 1.4; } a.ttl:hover, .ttl:hover { text-decoration: none; color: var(--text); } .fitem .sub { font-size: 12.5px; color: var(--silver); margin-top: 5px; line-height: 1.5; } .fmeta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; align-items: center; } .echip { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--slate); display: inline-flex; gap: 5px; align-items: center; } .echip .cs { font-weight: 700; } .cat { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ghost); } .hottag { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(251,191,36,.4); border-radius: 4px; padding: 1px 6px; vertical-align: 2px; margin-left: 8px; } .fitem.wire .ts::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); margin-right: 6px; vertical-align: 1px; } .endfeed { padding: 18px 2px; font-family: var(--mono); font-size: 11px; color: var(--slate); } /* ---- lens slab (feed interruption / right-rail market lens) ---- */ .lensslab { border: 1px solid var(--border-strong); border-radius: 11px; background: var(--void); margin: 16px 0; overflow: hidden; } .lens-h { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--silver); } .lens-h b { color: var(--cream); } .lens-h .rt { margin-left: auto; color: var(--ghost); font-size: 9px; text-transform: none; letter-spacing: .03em; } .lens-b { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; } @media (max-width: 700px) { .lens-b { grid-template-columns: 1fr; } } .lens-left { padding: 13px 15px; border-right: 1px solid var(--border); } @media (max-width: 700px) { .lens-left { border-right: 0; border-bottom: 1px solid var(--border); } } .lens-right { padding: 13px 15px; } /* rail variant: single column, stacked (used in the right rail) */ .rail-lens .lens-b { grid-template-columns: 1fr; } .rail-lens .lens-left { border-right: 0; border-bottom: 1px solid var(--border); } .sdrow { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--silver); font-variant-numeric: tabular-nums; margin-top: 10px; flex-wrap: wrap; } .sdrow .k { color: var(--slate); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; min-width: 0; } .sdrow b { color: var(--cream); font-weight: 600; } .curvebox svg { display: block; width: 100%; height: 74px; } .curvecap { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ghost); margin-top: 6px; display: flex; justify-content: space-between; } .lenschips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; } /* ---- instrument rail (right column) ---- */ .rail-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ghost); margin: 0 0 10px; } .rblock { margin-bottom: 34px; } /* R1 storm watch tile (homepage) */ .swtile { padding: 14px 16px; } .swtile .st { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); } .swtile .st .mode { color: var(--silver); font-weight: 500; } .swtile .read { font-size: 12.5px; color: var(--silver); line-height: 1.5; margin: 9px 0 12px; } .swscore { font-family: var(--mono); font-size: 10.5px; color: var(--slate); border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .swscore b { color: var(--cream); } .swscore .cf { color: var(--green); } .swscore .wr { color: var(--critical); } .swscore .op { color: var(--accent-bright); } /* ============ Storm Watch: active-mode map + ladder + tape ============ */ .callout { display: inline-flex; flex-direction: column; gap: 6px; background: rgba(8,10,15,.82); border: 1px solid var(--border-strong); border-radius: 9px; padding: 11px 13px; backdrop-filter: blur(3px); } .maprow { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; } @media (max-width: 980px) { .maprow { grid-template-columns: 1fr; } } .mapbox { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--void); min-height: 440px; } .mapbox svg { display: block; width: 100%; height: 100%; } .map-callout { position: absolute; top: 12px; left: 12px; max-width: 280px; } .map-legend { position: absolute; bottom: 10px; left: 12px; display: flex; gap: 12px; font-family: var(--mono); font-size: 9.5px; color: var(--slate); } .map-legend span { display: inline-flex; align-items: center; gap: 5px; } .lg { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .ladder { display: flex; flex-direction: column; gap: 7px; max-height: 520px; overflow: auto; } .lrow { position: relative; border: 1px solid var(--border); border-left-width: 2px; border-radius: 8px; background: var(--surface); padding: 10px 12px; cursor: default; transition: background .12s, border-color .12s; } .lrow:hover { background: var(--shelf); border-color: var(--border-strong); } .lrow.hot { outline: 1px solid rgba(96,165,250,.35); } .lrow-top { display: flex; align-items: center; gap: 11px; } .lrow .nm { font-size: 13px; color: var(--cream); font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lrow .type { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); } .etiwrap { display: flex; align-items: baseline; gap: 8px; } .etiv { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; } .bandtag { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; } .lrow .why { font-size: 11.5px; color: var(--silver); margin-top: 7px; line-height: 1.45; } .lrow .apr { font-family: var(--mono); font-size: 10px; color: var(--slate); margin-top: 6px; letter-spacing: .03em; } .instr { display: inline-flex; gap: 8px; margin-left: 8px; } .instr b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; } .panel { border: 1px solid var(--border-strong); border-radius: 11px; background: var(--void); overflow: hidden; } .panel-h { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--silver); } .panel-h b { color: var(--cream); } .panel-b { padding: 15px; } .changeline { font-family: var(--mono); font-size: 12px; color: var(--bone); margin-bottom: 8px; } .changeline .k { color: var(--slate); } .changeline .up { color: var(--red); } .changeline .dn { color: var(--green); } .panel-cpls { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; } .panel-foot { border-top: 1px solid var(--border); padding: 11px 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .panel-foot .cta { font-family: var(--mono); font-size: 11px; color: var(--accent-bright); } .cardnote { font-family: var(--mono); font-size: 9.5px; color: var(--ghost); margin-left: auto; } .pxrow { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--slate); margin-top: 6px; } .pxrow b { color: var(--bone); } .pxrow .up { color: var(--green); } .pxrow .dn { color: var(--red); } .tape { display: flex; flex-direction: column; } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 2px; } .tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--slate); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 11px; cursor: pointer; } .tabs button[aria-pressed="true"] { color: var(--cream); border-bottom-color: var(--accent); } .tapeline { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--silver); align-items: baseline; } .tapeline .ts { font-family: var(--mono); font-size: 10px; color: var(--slate); flex: none; min-width: 52px; } .tapeline .bd { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex: none; } /* ---- footnote ---- */ .footnote { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 10.5px; color: var(--slate); line-height: 1.7; } .footnote b { color: var(--silver); } .footnote .dd { color: var(--amber); } /* ============ reduced motion ============ */ @media (prefers-reduced-motion: reduce) { .dot.live, .dot.call { animation: none; } .wireroom * { scroll-behavior: auto; } } /* readers' markets rail module (Board R5) */ .mkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); } .mkrow:hover { background: var(--shelf); } .mkrow .nm { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--bone); } .mkfoot { padding: 10px 14px; font-family: var(--mono); font-size: 10.5px; } .peekmore-strong { font-weight: 700; color: var(--accent-bright); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 12px; margin-top: 12px; } /* article page: two-column retention layout (owner 2026-07-06) */ .article-grid { display: block; } .article-rail { display: none; } .article-rail .rblock { margin-bottom: 26px; } @media (min-width: 1100px) { .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; max-width: 1180px; margin: 0 auto; align-items: start; } .article-rail { display: block; padding: 32px 20px 40px 0; } .hide-on-rail { display: none; } } /* ------------------------------------------------------------------ * * Word/label type -> sans (DM Sans); numeric + data readouts stay mono. * Owner 2026-07-06: the monospace font on text labels (e.g. "US 15-day * GWCDD, national (Henry Hub)") reads too "terminal". Labels made of WORDS * move to sans; anything that is a NUMBER (couplets, rails, tables, clocks, * prices, proofs) deliberately stays mono. Appended last so it overrides the * per-class mono above at equal specificity; page blocks with #id scope * (e.g. #asiadesk) override this in turn and are patched in their templates. * ------------------------------------------------------------------ */ .eyebrow, .micro, .klbl, .synoptic .klbl, .zlbl, .hcpl .name, .cpl-line .name, .zone-h, .zone-h .hubs, .mktread .k, .scell .k, .cat, .arm-top .t, .wirein-top .t, .swtile .st, .stalebanner .lab, .samplenote .lbl, .samplenote .pill, .prev-switch .lbl, .prevnote, .navlinks, .rail-eyebrow, .curvecap, .bandtag, .lrow .type, .cardnote, .brand, .statechip, .gulfchip { font-family: var(--sans); } /* Feed category colour-coding by section (owner 2026-07-06). Cool family for the three power markets, warm for the fossil commodities, distinct hues for weather/geopolitics and the content-type tags. Text-only tint on the small .cat label; falls back to the default grey for any unmatched category. */ .cat-upstream { color: #fbbf24; } /* oil / upstream — amber */ .cat-gas { color: #fb923c; } /* natural gas — orange */ .cat-lng { color: #22d3ee; } /* LNG — cyan */ .cat-eu-power { color: #60a5fa; } /* European power — blue */ .cat-us-power { color: #818cf8; } /* US power — indigo */ .cat-apac { color: #2dd4bf; } /* Asia-Pacific power — teal */ .cat-geopolitics{ color: #f87171; } /* geopolitics — red */ .cat-weather { color: #a78bfa; } /* weather — violet */ .cat-briefing { color: #34d399; } /* briefing — green */ .cat-markets { color: #a3e635; } /* markets — lime */ .cat-deep-dive { color: #c084fc; } /* deep dive — purple */