/* Heimdall — drafting sheet, night plot Engineering-drawing language on a dark ground: graphite sheet, fine grid, one light ink. Monochrome throughout; the single exception is --alert, a red-pencil vermilion reserved strictly for the live BLOCKED state. Everything the JS painters draw follows the --*-rgb triples below. */ :root { --paper: #121110; /* the sheet — warm lamp-lit graphite, not cold black */ --ground: #121110; /* legacy alias — JS knockout text fills use var(--ground) */ --surface: #1A1815; /* panels: a step up from the ground, opaque */ --surface-2:#282420; /* chart tracks / empty cells */ --ink: #EDEAE2; /* the pen — bone white */ --text: #EDEAE2; --dim: #A49E92; /* secondary annotation */ --dim-soft: #766F63; /* small decorative labels */ /* Signal-lamp palette, borrowed from railway position-light aspects: structure and linework stay ink; LIVE DATA burns lamp-amber; red means BLOCKED and nothing else. Lamps glow — data on this site is light, not paint. */ --cyan: #EDEAE2; /* instrument linework — ink */ --amber: #E8A93E; /* lamp amber — live data marks, calibrating */ --alert: #E25B36; /* signal red — live BLOCKED only */ --glow-amber: rgba(232,169,62,.35); --glow-alert: rgba(226,91,54,.4); --hair: rgba(237,234,226,.13); --hair-strong: rgba(237,234,226,.32); --grid-fine: rgba(237,234,226,.04); --grid-major: rgba(237,234,226,.08); /* RGB triples consumed by the canvas/SVG painters (theme.js → window.PAL). */ --cyan-rgb: 237,234,226; /* instrument linework at rest */ --amber-rgb: 232,169,62; /* data marks (bars, ribbons, spokes) */ --alert-rgb: 226,91,54; /* live BLOCKED */ --idle-rgb: 118,111,99; /* dormant / unknown */ --surface-2-rgb: 40,36,32; /* chart track / heatmap empty cell */ --grid-rgb: 237,234,226; /* gridlines = ink at low alpha */ --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --maxw: 1100px; --pad: clamp(20px, 5vw, 48px); } * { box-sizing: border-box; } html, body { margin: 0; } html { -webkit-text-size-adjust: 100%; background: var(--paper); } body { /* the sheet: a whisper of a major grid only — the fine graph grid lives inside the instruments (charts, plan viewport), where a grid means something */ background: linear-gradient(rgba(233,233,230,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(233,233,230,.045) 1px, transparent 1px); background-size: 96px 96px; color: var(--text); font-family: var(--display); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* sticky footer: column layout so a short page still pins the footer down */ min-height: 100vh; display: flex; flex-direction: column; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* When a train holds the crossing, the whole sheet warms toward the red lamp — the page itself carries the state (set on by app.js). */ html { transition: background-color 1.2s ease; } html[data-crossing="blocked"] { background: #1B1210; } /* lamp glow: live dots are light sources, not paint */ .dep-dot, .link[data-state="calibrating"] .link-dot { box-shadow: 0 0 7px var(--glow-amber); } .link[data-state="down"] .link-dot { box-shadow: 0 0 7px var(--glow-alert); } .chip .dot { box-shadow: 0 0 7px rgba(237,234,226,.25); } .chip[data-state="blocked"] .dot { box-shadow: 0 0 8px var(--glow-alert); } .chip[data-state="calibrating"] .dot { box-shadow: 0 0 8px var(--glow-amber); } .state-pill[data-state="blocked"]::before { box-shadow: 0 0 7px var(--glow-alert); } .state-pill[data-state="calibrating"]::before { box-shadow: 0 0 7px var(--glow-amber); } .stat-value { text-shadow: 0 0 14px var(--glow-amber); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ---- masthead ------------------------------------------------------------ */ .masthead { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--pad); border-bottom: 1px solid var(--hair-strong); background: var(--paper); } .wordmark { display: flex; align-items: center; gap: 14px; } .rune { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--ink); color: var(--ink); font-size: 22px; line-height: 1; background: var(--surface); } .wordmark-text { display: flex; flex-direction: column; } .name { font-weight: 600; letter-spacing: .24em; font-size: 14px; } .tagline { color: var(--dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; } .link { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .link-dot { width: 7px; height: 7px; background: var(--dim-soft); transition: background .3s; } .link[data-state="live"] { color: var(--ink); } .link[data-state="live"] .link-dot { background: var(--ink); } .link[data-state="down"] { color: var(--alert); } .link[data-state="down"] .link-dot { background: var(--alert); } .link[data-state="preview"] { color: var(--dim); } .link[data-state="preview"] .link-dot { background: var(--dim); } .link[data-state="calibrating"] { color: var(--amber); } .link[data-state="calibrating"] .link-dot { background: var(--amber); animation: heimdall-pulse 1.8s ease-in-out infinite; } /* ---- masthead tools / mobile nav toggle ----------------------------------- */ .masthead-tools { display: flex; align-items: center; gap: 16px; } .theme-toggle, .nav-toggle, .acct-link { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--dim); cursor: pointer; font-size: 15px; line-height: 1; transition: color .2s ease, border-color .2s ease; } .theme-toggle:hover, .nav-toggle:hover, .acct-link:hover { color: var(--ink); border-color: var(--ink); } .acct-link[data-state="in"] { color: var(--ink); border-color: var(--hair-strong); } .nav-toggle { display: none; } .nav-icon::before { content: "\2630"; } /* ☰ */ .nav-toggle[aria-expanded="true"] .nav-icon::before { content: "\2715"; } /* ✕ */ .mast-nav { display: flex; align-items: center; gap: 22px; } .mast-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .mast-nav a:hover { color: var(--ink); } .mast-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); } /* ---- preview notice (calibration caveat) ---------------------------------- */ .notice { position: relative; border-bottom: 1px solid var(--hair-strong); background: var(--surface); } .notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(45deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 5px); } .notice-inner { max-width: var(--maxw); margin: 0 auto; padding: 13px var(--pad); display: flex; align-items: flex-start; gap: 14px; } .notice-rune { flex: none; width: 26px; height: 26px; margin-top: 1px; display: grid; place-items: center; border: 1px solid var(--hair-strong); color: var(--ink); font-size: 15px; line-height: 1; } .notice-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); max-width: 92ch; } .notice-text strong { color: var(--ink); font-weight: 600; } /* ---- layout -------------------------------------------------------------- */ main { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 6vw, 64px) var(--pad) 48px; display: flex; flex-direction: column; gap: clamp(36px, 6vw, 60px); flex: 1 0 auto; } /* ---- corner registration marks (shared) ----------------------------------- */ .console, .viewport, .dh-fig, .subscribe { position: relative; } .console::before, .viewport::before, .dh-fig::before, .subscribe::before, .console::after, .viewport::after, .dh-fig::after, .subscribe::after { content: "+"; position: absolute; z-index: 1; font-family: var(--mono); font-size: 13px; line-height: 1; color: var(--dim-soft); pointer-events: none; } .console::before, .viewport::before, .dh-fig::before, .subscribe::before { top: -7px; left: -5px; } .console::after, .viewport::after, .dh-fig::after, .subscribe::after { bottom: -7px; right: -5px; } /* ---- hero / watch (crossing page) ----------------------------------------- */ .watch { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; align-items: center; gap: clamp(24px, 5vw, 64px); } .signal { display: grid; place-items: center; } .signal canvas { width: 100%; max-width: 380px; height: auto; display: block; } .eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); } .eyebrow-tick { width: 8px; height: 8px; background: var(--ink); transition: background .45s ease; } .watch[data-state="blocked"] .eyebrow-tick { background: var(--alert); } .watch[data-state="offline"] .eyebrow-tick { background: var(--dim-soft); } /* position-light signal head (crossing hero) — a real railway aspect as the status element: lamp row rotates with the live state */ .aspect { width: 30px; height: 30px; flex: none; } .asp-housing { fill: var(--surface-2); stroke: var(--hair-strong); stroke-width: 1; } .asp circle { fill: var(--dim-soft); opacity: 0; transition: opacity .45s ease; } .watch[data-state="clear"] .asp-clear circle, .watch[data-state="offline"] .asp-clear circle { opacity: 1; fill: var(--ink); } .watch[data-state="offline"] .asp-clear circle { fill: var(--dim-soft); } .watch[data-state="calibrating"] .asp-cal circle, .watch[data-state="unknown"] .asp-cal circle { opacity: 1; fill: var(--amber); filter: drop-shadow(0 0 3px var(--glow-amber)); animation: heimdall-pulse 1.8s ease-in-out infinite; } .watch[data-state="blocked"] .asp-blocked circle { opacity: 1; fill: var(--alert); filter: drop-shadow(0 0 3px var(--glow-alert)); animation: heimdall-pulse 1.4s ease-in-out infinite; } .state { margin: 0; font-weight: 700; font-size: clamp(38px, 7vw, 64px); line-height: .98; letter-spacing: -.02em; transition: color .55s ease; } .watch[data-state="clear"] .state { color: var(--ink); } .watch[data-state="blocked"] .state { color: var(--alert); } .watch[data-state="offline"] .state { color: var(--dim); } .state-detail { margin: 16px 0 0; color: var(--dim); font-size: 16px; max-width: 46ch; } /* deployment locator */ .deployment { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; } .deployment-loc { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .deployment-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 3px 10px; border: 1px solid var(--hair-strong); background: var(--surface); } .dep-dot { width: 6px; height: 6px; flex: none; background: var(--amber); animation: heimdall-pulse 1.8s ease-in-out infinite; } .readout-rows { display: flex; gap: 0; margin-top: 30px; border-top: 1px solid var(--hair-strong); } .rr { flex: 1; padding: 18px 22px 4px 0; display: flex; flex-direction: column; gap: 6px; } .rr + .rr { padding-left: 22px; border-left: 1px solid var(--hair); } .rr-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .rr-value { font-size: 23px; font-weight: 500; transition: color .45s ease; } .watch[data-state="blocked"] #primary-value { color: var(--alert); } /* ---- acoustic trace ("what Heimdall hears") ------------------------------ */ .trace-lane { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 22px); } .trace-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .trace-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .trace-head .eyebrow { margin: 0; } #trace { width: 100%; height: 76px; display: block; } /* ---- metrics (legacy strip, kept for lab pages) --------------------------- */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .metric { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .metric + .metric { border-left: 1px solid var(--hair); } .metric-value { font-size: 30px; font-weight: 500; letter-spacing: -.01em; } .metric-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } /* ---- blocks --------------------------------------------------------------- */ .block { display: flex; flex-direction: column; gap: 20px; } .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .block-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .01em; } .block-note { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-family: var(--mono); } /* ---- instrument console ---------------------------------------------------- */ /* One shared sheet; readouts separated by ruled 1px hairlines, each numbered like a figure on a drawing. */ .console { background: var(--surface); border: 1px solid var(--hair-strong); counter-reset: fig 1; /* FIG.01 is the page hero; readouts start at 02 */ } .console-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--hair-strong); background: var(--paper); } .console-head .label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .console-head .label b { color: var(--ink); font-weight: 600; letter-spacing: .2em; } .console-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--hair-strong); /* the gap reads as ruled dividers */ } .console-grid > .readout { grid-column: span 3; } .console-grid > .readout.third { grid-column: span 2; } .console-grid > .readout { background: var(--surface); padding: clamp(22px, 3vw, 32px) clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 18px; min-width: 0; } .console-grid > .readout.full { grid-column: 1 / -1; } .readout-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .readout-head h2 { margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } /* every readout is a numbered figure */ .readout-head h2::before { counter-increment: fig; content: "FIG." counter(fig, decimal-leading-zero); color: var(--dim-soft); font-weight: 400; margin-right: 10px; letter-spacing: .1em; } .readout-head .note { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .chart { width: 100%; overflow-x: auto; } .chart svg { display: block; width: 100%; height: auto; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); } /* ---- SVG chart theming ----------------------------------------------------- */ .bar-blocked { fill: var(--amber); } .bar-track { fill: var(--surface-2); } .hbar { fill: var(--amber); } .axis-line { stroke: var(--hair-strong); stroke-width: 1; } .axis-text { fill: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; } .empty { color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 30px 2px; } .lane-label { fill: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; } /* ---- custom chart tooltip --------------------------------------------------- */ .chart rect[data-tip] { cursor: crosshair; } .tooltip { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; max-width: 260px; padding: 7px 10px; border: 1px solid var(--ink); background: var(--surface); box-shadow: 3px 3px 0 rgba(0,0,0,.5); opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; } .tooltip[data-show="1"] { opacity: 1; transform: translateY(0); } .tip-title { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--ink); } .tip-sub { margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); } /* ---- at-a-glance stat callouts ---------------------------------------------- */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px; background: var(--hair-strong); border: 1px solid var(--hair-strong); } .stat-card { background: var(--surface); padding: 16px 18px 14px; } .stat-value { font-family: var(--mono); font-size: clamp(21px, 3.6vw, 27px); font-weight: 600; color: var(--amber); line-height: 1; } .stat-label { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .stat-sentence { margin: 16px 2px 0; font-size: 16px; line-height: 1.55; color: var(--dim); max-width: 64ch; } .stat-sentence b { color: var(--ink); font-weight: 600; } /* radial clock */ .radial-chart svg { max-width: 460px; margin: 0 auto; } /* ---- event log --------------------------------------------------------------- */ .log-list { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; } .log-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--hair); } .log-row:last-child { border-bottom: 0; } .log-when { font-family: var(--mono); font-size: 13px; color: var(--ink); } .log-dur { font-family: var(--mono); font-size: 13px; color: var(--ink); font-weight: 600; text-align: right; white-space: nowrap; } .log-track { grid-column: 1 / -1; height: 5px; background: var(--surface-2); overflow: hidden; } .log-fill { height: 100%; background: var(--amber); } .log-audio { font-size: 12px; color: var(--dim); } /* ---- owner mode (owner.js) --------------------------------------------------- */ .owner-bar { display: flex; gap: 8px; align-items: center; } .owner-link { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: none; border: 1px solid var(--hair-strong); padding: 4px 9px; cursor: pointer; transition: color .12s ease, border-color .12s ease; } .owner-link:hover { color: var(--ink); border-color: var(--ink); } .owner-link.on { color: var(--ink); border-color: var(--ink); } .owner-link.go { color: var(--paper); background: var(--ink); border-color: var(--ink); } #log.owner-on .log-row { cursor: pointer; } #log.owner-on .log-row:hover { background: rgba(233,233,230,.05); } #log .log-row[data-label="real"] { box-shadow: inset 3px 0 0 var(--ink); } #log .log-row[data-label="false"] { box-shadow: inset 3px 0 0 var(--alert); } #log.merge-mode .log-row.selected { background: rgba(233,233,230,.09); box-shadow: inset 3px 0 0 var(--ink); } .owner-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--ink); box-shadow: 0 -6px 24px rgba(0,0,0,.55); } .owner-player[hidden] { display: none; } .owner-player-inner { max-width: 900px; margin: 0 auto; padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 8px; } .owner-player-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .owner-now { font-size: 12px; color: var(--dim); } .owner-x { background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .owner-x:hover { color: var(--ink); } .owner-player-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .owner-player-row audio { flex: 1 1 280px; min-width: 200px; max-width: 440px; height: 38px; } .owner-verify { display: flex; align-items: center; gap: 6px; } .owner-vlabel { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .owner-tag { font-family: var(--mono); font-size: 12px; color: var(--dim); background: var(--surface); border: 1px solid var(--hair-strong); padding: 5px 11px; cursor: pointer; } .owner-tag[data-l="real"].on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .owner-tag[data-l="false"].on { background: var(--alert); color: var(--paper); border-color: var(--alert); } .owner-msg { font-size: 11px; color: var(--dim); margin: 0; min-height: 14px; } /* ---- pending calibration proposal card -------------------------------------- */ .owner-proposal { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--ink); background: var(--paper); } .owner-proposal[hidden] { display: none; } .owner-prop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .owner-prop-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .owner-prop-by { font-size: 10px; color: var(--dim); } .owner-prop-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; } .owner-prop-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; } .owner-prop-k { color: var(--dim); } .owner-prop-v { color: var(--ink); } .owner-prop-v b { color: var(--ink); } .owner-prop-ev { font-size: 10px; color: var(--dim); margin: 8px 0 0; } .owner-prop-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } /* ---- plan viewport (crossing scene) ------------------------------------------ */ .iso-hero { width: 100%; } .viewport { width: 100%; height: clamp(420px, 60vh, 720px); overflow: hidden; border: 1px solid var(--hair-strong); background: linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px), var(--surface); background-size: 24px 24px; } .scene { position: absolute; inset: 0; } .scene svg { width: 100%; height: 100%; display: block; } .iso-title { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; background: var(--paper); border-bottom: 1px solid var(--hair-strong); } .iso-title .t-name { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); } .iso-title .t-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .hud { position: absolute; z-index: 5; font-family: var(--mono); } .hud.tl { bottom: 16px; left: 16px; padding: 12px 16px 14px; background: var(--surface); border: 1px solid var(--hair-strong); } .tl-wrap { display: contents; } .panel-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; } .sigbars { display: flex; gap: 7px; align-items: flex-end; } .sigbar { display: flex; flex-direction: column; align-items: center; gap: 5px; } .sigbar .col { display: flex; flex-direction: column-reverse; gap: 2px; width: 16px; } .sigbar .seg { height: 6px; background: rgba(233,233,230,.10); } .sigbar .seg.on { background: var(--amber); } .sigbar .seg.hot { background: var(--amber); } .sigbar .cap { font-size: 8.5px; letter-spacing: .08em; color: var(--dim); } .reactor { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hair); } .reactor .grade { font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; } .reactor .rmeta { display: grid; grid-template-columns: auto auto; gap: 3px 10px; align-items: baseline; } .reactor .rmeta .k { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .reactor .rmeta .v { font-size: 13px; color: var(--ink); } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--hair-strong); background: var(--surface); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); font-family: var(--mono); } .chip .dot { width: 8px; height: 8px; background: var(--ink); } .chip[data-state="blocked"] { color: var(--alert); border-color: var(--alert); } .chip[data-state="blocked"] .dot { background: var(--alert); animation: heimdall-pulse 1.4s ease-in-out infinite; } .chip[data-state="calibrating"] { color: var(--amber); } .chip[data-state="calibrating"] .dot { background: var(--amber); animation: heimdall-pulse 1.8s ease-in-out infinite; } /* ---- the watchman: an engraving plate on the sheet --------------------------- */ .watchman { position: relative; flex: none; margin: 0; width: clamp(98px, 11vw, 122px); } .wm-plate { position: relative; aspect-ratio: 480 / 585; } .wm-portrait { position: absolute; inset: 0; background: url(heimdall-night.png) no-repeat bottom center / contain; /* monochrome plate: read as an engraved figure printed on the sheet */ filter: grayscale(1) contrast(1.08) brightness(1.04); opacity: .85; transition: opacity .5s ease; } .watchman[data-state="blocked"] .wm-portrait { opacity: 1; } @media (max-width: 760px) { .viewport { height: auto; display: flex; flex-direction: column; } .scene { position: relative; height: auto; aspect-ratio: 16 / 12; } .iso-title { position: relative; } .hud { position: static !important; transform: none !important; padding: 12px 16px; border: 0; border-top: 1px solid var(--hair); } .watchman { width: clamp(82px, 24vw, 104px); } } /* ---- the crossing (map panel) ------------------------------------------------- */ .crossing-map { width: 100%; } .crossing-map .map-embed { display: block; width: 100%; height: clamp(280px, 44vw, 420px); border: 1px solid var(--hair-strong); color-scheme: light; /* the embed joins the dark monochrome sheet: desaturate, then invert to night */ filter: grayscale(1) invert(.92) contrast(.95); } /* live-state pill */ .state-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--hair-strong); background: var(--surface); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-family: var(--mono); } .state-pill::before { content: ""; width: 7px; height: 7px; background: var(--dim-soft); transition: background .3s; } .state-pill[data-state="clear"] { color: var(--ink); border-color: var(--ink); } .state-pill[data-state="clear"]::before { background: var(--ink); } .state-pill[data-state="blocked"] { color: var(--alert); border-color: var(--alert); } .state-pill[data-state="blocked"]::before { background: var(--alert); } .state-pill[data-state="calibrating"] { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .state-pill[data-state="calibrating"]::before { background: var(--amber); animation: heimdall-pulse 1.8s ease-in-out infinite; } @keyframes heimdall-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* ---- crossing schematic (stylised fallback map) ------------------------------- */ .crossing-map .map-svg { display: block; width: 100%; height: auto; max-width: 600px; } .map-frame { fill: none; stroke: var(--hair-strong); } .map-grid { stroke: var(--hair); stroke-width: 1; } .map-road { fill: var(--surface-2); stroke: var(--hair-strong); stroke-width: 1; } .map-centerline { stroke: var(--dim-soft); stroke-width: 1; stroke-dasharray: 6 7; } .map-rail { stroke: var(--ink); stroke-width: 2; } .map-tie { stroke: var(--ink); stroke-width: 1.5; } .map-aim { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; } .map-listen { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .45; } .map-sensor { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; } .map-label { fill: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; } .map-label-cyan { fill: var(--ink); } .map-cross-halo { fill: var(--dim); opacity: .14; transform-box: fill-box; transform-origin: center; } .map-cross-ring { fill: none; stroke: var(--dim); stroke-width: 1.5; } .map-cross-core { fill: var(--dim); } .crossing-map[data-state="clear"] .map-cross-ring { stroke: var(--ink); } .crossing-map[data-state="clear"] .map-cross-core { fill: var(--ink); } .crossing-map[data-state="clear"] .map-cross-halo { fill: var(--ink); } .crossing-map[data-state="blocked"] .map-cross-ring { stroke: var(--alert); } .crossing-map[data-state="blocked"] .map-cross-core { fill: var(--alert); } .crossing-map[data-state="blocked"] .map-cross-halo { fill: var(--alert); opacity: .5; animation: crossPulse 1.6s ease-out infinite; } .crossing-map[data-state="calibrating"] .map-cross-ring { stroke: var(--ink); } .crossing-map[data-state="calibrating"] .map-cross-core { fill: var(--ink); } .crossing-map[data-state="calibrating"] .map-cross-halo { fill: var(--ink); } @keyframes crossPulse { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } } /* ---- subscribe CTA -------------------------------------------------------------- */ .subscribe { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 44px); align-items: center; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--ink); background: var(--surface); } .subscribe h2 { margin: 0 0 10px; font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.01em; } .subscribe-text { margin: 0 0 20px; color: var(--dim); font-size: 15px; max-width: 56ch; } .subscribe-btn { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--paper); background: var(--ink); padding: 12px 20px; font-weight: 600; transition: box-shadow .15s ease, transform .15s ease; } .subscribe-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,.6); } .subscribe-count { margin: 14px 0 0; color: var(--dim-soft); font-size: 12px; letter-spacing: .04em; } .subscribe-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; padding: 14px; border: 1px solid var(--hair-strong); } .subscribe-qr img { display: block; width: 132px; height: 132px; image-rendering: pixelated; } .subscribe-qr figcaption { color: var(--dim); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--mono); } @media (max-width: 620px) { .subscribe { grid-template-columns: 1fr; justify-items: start; } .subscribe-qr { justify-self: center; } } /* ---- footer: one quiet annotation line under a hairline — page content it is not ---- */ .footer { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad) 28px; font-size: 10.5px; letter-spacing: .06em; } .tb { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 6px; border-top: 1px solid var(--hair); padding-top: 14px; } .tb-cell { display: flex; flex-direction: row; align-items: baseline; gap: 7px; padding: 0; min-width: 0; } .tb-k { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim-soft); } .tb-v { color: var(--dim); font-size: 10.5px; } a.tb-cell { text-decoration: none; } a.tb-cell:hover .tb-v { color: var(--ink); } /* back-link breadcrumb */ .crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -16px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); transition: color .2s ease; align-self: flex-start; } .crumb:hover { color: var(--ink); } /* ---- lead / hero for landing + info pages ------------------------------------------ */ .lead { display: flex; flex-direction: column; gap: 18px; max-width: 720px; padding-top: clamp(8px, 3vw, 28px); } .lead .eyebrow { margin: 0; } .lead-title { margin: 0; font-weight: 700; font-size: clamp(34px, 6vw, 58px); line-height: 1.02; letter-spacing: -.025em; } .lead-sub { margin: 0; color: var(--dim); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; max-width: 60ch; } .text-link { color: var(--ink); font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; align-self: flex-start; } .text-link:hover { color: var(--dim); border-bottom-color: var(--dim); } /* ---- live crossings board (sensors page) -------------------------------------------- */ .board { display: flex; flex-direction: column; gap: 18px; } /* the station frame: one physical installation, hosting its watches */ .station { border: 1px solid var(--hair-strong); background: var(--surface); padding: clamp(20px, 3vw, 28px); } .cap-chips { display: flex; gap: 8px; flex-wrap: wrap; } .cap-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--hair-strong); background: var(--paper); padding: 4px 10px; } .cap-chip::before { content: ""; width: 6px; height: 6px; background: var(--ink); } .cap-chip.planned { color: var(--dim); border-style: dashed; } .cap-chip.planned::before { background: var(--dim-soft); } .watches-head { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--hair); } .watches-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .board-head h2 { margin: 0; font-size: clamp(15px, 2vw, 17px); font-weight: 600; letter-spacing: .01em; } .board-note { margin: 4px 0 0; color: var(--dim); font-size: 13.5px; line-height: 1.5; } .board-note a { color: var(--ink); border-bottom: 1px solid var(--hair-strong); } .xing-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hair-strong); background: var(--surface); transition: border-color .2s ease, box-shadow .15s ease, transform .15s ease; } .xing-row:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,.5); } .xing-row[data-state="blocked"] { border-color: var(--alert); } .xing-id { display: flex; flex-direction: column; gap: 5px; } .xing-name { font-size: clamp(21px, 3vw, 28px); font-weight: 700; letter-spacing: -.01em; } .xing-loc { color: var(--dim); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } .xing-stats { display: flex; gap: clamp(18px, 2.5vw, 36px); } .xing-stats > div { display: flex; flex-direction: column; gap: 3px; } .xing-stats dd { margin: 0; font-size: 19px; font-variant-numeric: tabular-nums; } .xing-stats dt { color: var(--dim); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; } .xing-go { color: var(--dim); font-size: 18px; transition: transform .15s ease, color .2s ease; } .xing-row:hover .xing-go { transform: translateX(3px); color: var(--ink); } /* ---- my sensor ------------------------------------------------------------------------ */ .mine-row { grid-template-columns: auto 1fr auto; } .mine-edit { background: none; border: 0; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 4px 2px; } .mine-edit:hover { color: var(--ink); } .mine-empty { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; cursor: pointer; padding: clamp(20px, 3vw, 28px); border: 1px dashed var(--hair-strong); background: none; color: inherit; font: inherit; transition: border-color .2s ease, background .2s ease; } .mine-empty:hover { border-color: var(--ink); background: var(--surface); } .mine-empty-title { font-size: clamp(16px, 2.2vw, 19px); font-weight: 600; } .mine-empty-sub { color: var(--dim); font-size: 13.5px; line-height: 1.5; max-width: 56ch; } .mine-empty-cta { color: var(--ink); font-size: 12px; letter-spacing: .06em; margin-top: 2px; } .mine-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hair-strong); background: var(--surface); } .mine-field { display: flex; flex-direction: column; gap: 6px; } .mine-label { color: var(--dim); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } .mine-form input { background: var(--paper); border: 1px solid var(--hair-strong); color: var(--ink); font: inherit; font-size: 15px; padding: 11px 13px; width: 100%; } .mine-form input:focus { outline: none; border-color: var(--ink); } .mine-err { color: var(--alert); font-size: 12px; margin: -6px 0 0; } .mine-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .mine-save { background: var(--ink); color: var(--paper); border: 0; padding: 10px 26px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--mono); } .mine-save:active { transform: translateY(1px); } .mine-cancel, .mine-remove { background: none; border: 0; cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .mine-cancel { color: var(--dim); } .mine-cancel:hover { color: var(--ink); } .mine-remove { color: var(--alert); margin-left: auto; } /* ---- station console (console.js, signed-in owners) ------------------------------------ */ /* Liveness pill states: reuses .state-pill wholesale. online = ink (heard <5 min), stale = amber lamp (5–30 min), silent = alert (gone >30 min / never). */ .state-pill[data-state="online"] { color: var(--ink); border-color: var(--ink); } .state-pill[data-state="online"]::before { background: var(--ink); } .state-pill[data-state="stale"] { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .state-pill[data-state="stale"]::before { background: var(--amber); animation: heimdall-pulse 1.8s ease-in-out infinite; } .state-pill[data-state="silent"] { color: var(--alert); border-color: var(--alert); } .state-pill[data-state="silent"]::before { background: var(--alert); } .con-head { margin: 6px 0 0; } /* account-area sub-nav (signin.html ↔ console.html) */ .acct-nav { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); display: flex; gap: 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } .acct-nav a { color: var(--dim); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid transparent; } .acct-nav a:hover { color: var(--ink); } .acct-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); } /* station list rows reuse the crossing-board row at console scale */ .con-row-name { font-size: clamp(16px, 2.2vw, 20px); } .console-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hair-strong); background: var(--surface); } .con-name { margin: 0; font-size: clamp(15px, 2vw, 17px); font-weight: 600; letter-spacing: .01em; } .con-id { color: var(--dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; } .con-stats { flex-wrap: wrap; } .con-stats dd { font-size: 17px; } .con-amber { color: var(--amber); } .con-alert { color: var(--alert); } .con-block { border-top: 1px solid var(--hair); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .con-staged { margin: 0; font-size: 12px; color: var(--ink); } .con-staged .mine-cancel { margin-left: 6px; } /* the release form sits inside the already-framed card: drop mine-form's own frame, pack version + sha side by side where there's room */ .con-form { padding: 0; border: 0; background: none; display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 12px; } .con-form .con-wide, .con-form .mine-err, .con-form .mine-actions { grid-column: 1 / -1; } .con-form input { font-family: var(--mono); font-size: 13px; } .con-actions { border-top: 1px solid var(--hair); padding-top: 14px; gap: 18px; } .con-actions .text-link { font-size: 13px; } /* Drawers: the card shows "is my station ok" at a glance; each thing you'd DO folds into a
ruled off like the con-blocks it replaced. The badge carries the state that matters while the drawer is closed. */ .con-drawer { border-top: 1px solid var(--hair); } .con-drawer summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 0; min-height: 44px; /* comfortable touch target */ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); transition: color .2s ease; } .con-drawer summary::-webkit-details-marker { display: none; } .con-drawer summary:hover { color: var(--ink); } .con-caret { flex: none; width: 10px; color: var(--dim-soft); } .con-caret::before { content: "▸"; } .con-drawer[open] > summary { color: var(--ink); } .con-drawer[open] > summary .con-caret::before { content: "▾"; } .con-badge { margin-left: auto; flex: none; padding: 2px 8px; border: 1px solid var(--hair); color: var(--dim-soft); font-size: 10.5px; letter-spacing: .08em; text-transform: none; } .con-badge.con-amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .con-drawer-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 16px; } @media (max-width: 560px) { .con-form { grid-template-columns: 1fr; } .console-card { gap: 10px; } .console-card .board-head { flex-wrap: wrap; } /* long station names vs. the pill */ .con-stats dd { font-size: 15px; } .con-actions { gap: 14px; } } /* ---- web-push control (notify.js, reuses the mine-form vocabulary) --------------------- */ .push-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .push-note { text-transform: none; letter-spacing: .06em; } .push-form { width: 100%; max-width: 480px; } .push-form select { background: var(--paper); border: 1px solid var(--hair-strong); color: var(--ink); font: inherit; font-size: 15px; padding: 11px 13px; width: 100%; } .push-form select:focus { outline: none; border-color: var(--ink); } .push-form select:disabled { opacity: .45; } .push-checks { border: 0; padding: 0; margin: 0; } .push-checks legend { padding: 0; margin-bottom: 6px; } .push-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); padding: 3px 0; cursor: pointer; } .push-check input { accent-color: var(--ink); width: 16px; height: 16px; } .push-quiet { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .push-quiet-sep { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; } .push-saved { color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } /* ---- about (info sections) -------------------------------------------------------------- */ .about { display: flex; flex-direction: column; } .about-section { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; padding: clamp(26px, 4vw, 40px) 0; border-top: 1px solid var(--hair-strong); } .about-section:first-child { border-top: none; padding-top: 0; } .about-section .eyebrow { margin: 0; } .about-section h2 { margin: 0; font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; letter-spacing: -.012em; line-height: 1.12; } .about-section p { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.66; } .about-section ul { margin: 0; padding-left: 18px; color: var(--dim); font-size: 15.5px; line-height: 1.66; display: flex; flex-direction: column; gap: 8px; } .about-section li::marker { color: var(--dim-soft); } .about-section strong { color: var(--ink); font-weight: 600; } /* contact / call-to-action button */ .cta-btn { display: inline-block; align-self: flex-start; margin-top: 4px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; font-weight: 600; color: var(--paper); background: var(--ink); padding: 12px 20px; transition: box-shadow .15s ease, transform .15s ease; } .cta-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,.6); } .about-cta { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; margin-top: 8px; } .about-cta .cta-btn { align-self: center; margin-top: 0; } .about-cta .text-link { align-self: center; } /* ---- homepage hero: the exploded instrument ----------------------------------------------- */ .draft-hero { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: clamp(24px, 5vw, 56px); align-items: center; padding-top: clamp(8px, 3vw, 28px); } .dh-copy { display: flex; flex-direction: column; gap: 20px; } .dh-copy .eyebrow { margin: 0; } .dh-title { margin: 0; font-weight: 700; font-size: clamp(36px, 5.2vw, 58px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; } .dh-title em { font-style: normal; border-bottom: 3px solid var(--ink); } .dh-sub { margin: 0; color: var(--dim); font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6; max-width: 44ch; } .dh-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; } /* field log — a notes table pinned to the sheet */ .field-log { margin-top: clamp(10px, 2vw, 26px); align-self: flex-start; padding: 12px 16px 13px; border: 1px solid var(--hair-strong); background: var(--surface); font-size: 10.5px; letter-spacing: .1em; line-height: 1.85; color: var(--dim); } .field-log .fl-h { color: var(--ink); letter-spacing: .28em; text-transform: uppercase; font-weight: 600; } .field-log b { color: var(--ink); font-weight: 600; } .field-log b.is-blocked { color: var(--alert); } .field-log em { color: var(--ink); font-style: normal; border-bottom: 1px solid var(--hair-strong); } .field-log hr { border: 0; border-top: 1px solid var(--hair); margin: 7px 0; } .dh-fig { margin: 0; background: var(--surface); border: 1px solid var(--hair-strong); } .dh-fig svg { display: block; width: 100%; height: auto; } .dh-fig figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--hair-strong); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } /* exploded-diagram linework (inline SVG in index.html) */ /* plates are opaque so upper layers occlude lower ones — that occlusion is what makes the exploded stack read as vertical */ .xp-plate { fill: var(--surface); fill-opacity: .97; stroke: var(--ink); stroke-width: 1; } .xp-side { fill: var(--surface-2); stroke: var(--ink); stroke-width: .75; } .xp-line { stroke: var(--ink); fill: none; } .xp-fill { fill: var(--ink); } .xp-soft { stroke: var(--dim-soft); fill: none; } .xp-hair { stroke: var(--hair); fill: none; } .xp-band { fill: var(--surface-2); stroke: var(--hair-strong); stroke-width: .75; } .xp-riser { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 6; opacity: .38; fill: none; } .xp-center { stroke: var(--ink); stroke-width: .8; stroke-dasharray: 16 5 3 5; opacity: .3; fill: none; } .xp-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; fill: var(--ink); font-weight: 600; } .xp-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; fill: var(--dim); } .xp-idx { fill: var(--surface); stroke: var(--ink); stroke-width: 1; } .xp-idxnum { font-family: var(--mono); font-size: 10px; fill: var(--ink); text-anchor: middle; font-weight: 600; } .xp-leader { stroke: var(--ink); stroke-width: .8; fill: none; opacity: .55; } @media (prefers-reduced-motion: no-preference) { .xp-riser { animation: riser-drift 26s linear infinite; } @keyframes riser-drift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -160; } } } /* ---- responsive ----------------------------------------------------------------------------- */ @media (max-width: 900px) { .draft-hero { grid-template-columns: 1fr; } .dh-fig { order: 2; } } @media (max-width: 760px) { .tagline { display: none; } .nav-toggle { display: grid; width: 40px; height: 40px; font-size: 17px; } .mast-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px var(--pad) 14px; background: var(--paper); border-bottom: 1px solid var(--ink); box-shadow: 0 12px 24px rgba(0,0,0,.55); } .masthead[data-menu="open"] .mast-nav { display: flex; } .mast-nav a { padding: 15px 2px; font-size: 13px; border-bottom: 1px solid var(--hair); } .mast-nav a:last-child { border-bottom: none; } .xing-row { grid-template-columns: 1fr; gap: 16px; } .xing-go { display: none; } .watch { grid-template-columns: 1fr; } .signal { order: -1; } .signal canvas { max-width: 300px; } .metrics { grid-template-columns: 1fr 1fr; } .metric:nth-child(3) { border-left: none; } .metric:nth-child(n+3) { border-top: 1px solid var(--hair); } .split { grid-template-columns: 1fr; } .console-grid { grid-template-columns: 1fr; } .readout, .readout.full, .readout.third { grid-column: 1 / -1; } } /* ---- mobile type scale + tap targets ---------------------------------------------------------- */ @media (max-width: 600px) { .rr-label, .metric-label { font-size: 11.5px; letter-spacing: .14em; } .eyebrow, .block-note { font-size: 12px; } .notice-text { font-size: 14px; } .axis-text, .lane-label { font-size: 11px; } #punch svg { min-width: 620px; } #ribbon svg, #daily svg { min-width: 480px; } #punch, #ribbon, #daily { -webkit-overflow-scrolling: touch; } .link { font-size: 12px; min-height: 44px; } .subscribe-btn { padding: 14px 22px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- page transitions — fade the content only ------------------------------------------------- */ main { animation: content-fade-in .18s ease backwards; } @keyframes content-fade-in { from { opacity: 0; } to { opacity: 1; } } main.is-leaving { opacity: 0; transition: opacity .12s ease; } @media (prefers-reduced-motion: reduce) { main { animation: none; } main.is-leaving { transition: none; } }