/* ================================================================ DesktopRadar — core Reset, tokens, base element styles. Loaded on every page before the page-scoped sheet. Palette is lifted straight off the device: near-black ground, radar green, sage, teal, amber. Dark only — there is no light mode, the product doesn't have one. ================================================================ */ /* The webfonts are linked from the of each page rather than @import-ed here. An @import cannot start downloading until this file has been fetched and parsed, which puts the fonts one whole round trip later than they need to be — straight onto the critical path for the largest text on the page. Weight 300 was dropped when the body text moved to 400; nothing uses it. */ :root { /* Ground + surfaces */ --dr-ground: #010604; --dr-panel: #06100a; --dr-panel-2: #0a1710; --dr-line: rgba(48, 255, 96, .13); --dr-line-soft: rgba(111, 143, 122, .18); /* Instrument colours */ --dr-green: #30ff60; --dr-green-dim: #4ec06c; --dr-sage: #6f8f7a; /* Sage is the device's own colour and stays exact on the map. Type set in it needs more lift than a coastline stroke does. */ --dr-sage-lit: #9ab8a7; --dr-teal: #5fc8c8; --dr-amber: #cdaa46; /* Type colours */ --dr-text: #dcece2; --dr-text-dim: #a9c3b6; /* Type faces — Montserrat is the device's own face. */ --dr-face: "Montserrat", "Helvetica Neue", Arial, sans-serif; --dr-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --dr-wrap: 1180px; --dr-gutter: 28px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--dr-ground); color: var(--dr-text); font-family: var(--dr-face); font-weight: 400; font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; color: #e8f5ec; } h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.005em; } h4 { font-size: 1rem; } p { max-width: 62ch; } p + p { margin-top: 1.1em; } a { color: inherit; text-decoration: none; } ::selection { background: var(--dr-green); color: var(--dr-ground); } :focus-visible { outline: 2px solid var(--dr-green); outline-offset: 3px; } /* Off-screen until focused, then it lands as a proper panel label. */ .dr_skip { position: absolute; left: 12px; top: -60px; z-index: 200; font-family: var(--dr-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 12px 18px; background: var(--dr-green); color: #02150a; border-radius: 2px; transition: top .18s; } .dr_skip:focus { top: 12px; } /* ── Shared instrument furniture ────────────────────────────── */ /* Small caps label — used for every eyebrow, axis label and readout caption on the site. Tracks wide, like a panel silkscreen. */ .dr_label { font-family: var(--dr-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--dr-sage-lit); } .dr_wrap { max-width: var(--dr-wrap); margin: 0 auto; padding: 0 var(--dr-gutter); } .dr_sec { padding: clamp(72px, 11vh, 130px) 0; position: relative; } /* Hairline between every section — the panel-seam rhythm. */ .dr_sec + .dr_sec { border-top: 1px solid var(--dr-line); } .dr_lede { font-size: clamp(1.08rem, 1.6vw, 1.26rem); color: var(--dr-text-dim); line-height: 1.62; } /* ── Buttons ───────────────────────────────────────────────── */ .dr_btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--dr-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 15px 26px; border: 1px solid var(--dr-green); border-radius: 2px; cursor: pointer; transition: background .22s, color .22s, box-shadow .22s, transform .22s; } .dr_btn_primary { background: var(--dr-green); color: #02150a; box-shadow: 0 0 0 0 rgba(48, 255, 96, .45); } .dr_btn_primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(48, 255, 96, .9); } .dr_btn_ghost { background: transparent; color: var(--dr-green); border-color: rgba(48, 255, 96, .35); } .dr_btn_ghost:hover { border-color: var(--dr-green); background: rgba(48, 255, 96, .07); transform: translateY(-2px); } .dr_btn svg { width: 15px; height: 15px; } /* ── Scroll reveal ─────────────────────────────────────────── */ /* dr-boot.js stamps .has_js on before first paint, so the hiding rule below only ever applies when there is script to un-hide it again. No JS — or a JS error — and the page is simply all visible. */ .has_js .dr_rise { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .has_js .dr_rise.is_in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .has_js .dr_rise { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }