/* ========================================================================== Inferock site theme: tokens. The observatory console: star white on a blue-black sky; no brand hue (the accent is the star), colour only for a state. Faces: Archivo (text, headings, and the wide display cuts) and Martian Mono (the almanac, ids, figures, code). This sheet loads on the rebuilt pages, and on top of the older sheets on every other page. Every token is --r-*; the only unprefixed names are the BRIDGE block below (the older colour and font names, each assigned from a role), so the older page bodies take the same dark ground. Every colour pair is tested for WCAG 2 AA contrast (text 4.5, non-text 3) by the repository tests. Faces are named by role (display, text, mono), so no rule or page names a family; here the display role is the text face, set wide. ========================================================================== */ /* ---- Web faces: self-hosted latin woff2 (SIL OFL 1.1; each family's licence sits beside it in fonts/) ---- Archivo (one variable file, wght 100-900, wdth 62-125: the text, the headings and the wide display cuts) and Martian Mono (wght 100-800, wdth 75-112.5: the almanac, ids, code). The display role is the text face. */ @font-face { font-family: "r-text"; /* Archivo, wght 100-900, wdth 62-125 */ src: url("fonts/text-n.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "r-mono"; /* Martian Mono, wght 100-800, wdth 75-112.5 */ src: url("fonts/mono-n.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Metric-matched fallbacks (the swap window renders at the web face's own box; CLS) ---- size-adjust: the local face's average advance over sample text equals the web face's (measured against Liberation, the metric twin of Times New Roman / Arial / Courier New). ascent/descent/line-gap: the woff2's hhea box / unitsPerEm / size-adjust. unicode-range: the woff2's OWN cmap (a repository test derives it from the font bytes), so a glyph the web face lacks falls through to the system stack instead of rendering in this face. */ @font-face { font-family: "r-text-fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 102.01%; ascent-override: 86.07%; descent-override: 20.59%; line-gap-override: 0%; unicode-range: U+D, U+20-7E, U+A0-FF, U+102, U+131, U+152-153, U+2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; } @font-face { font-family: "r-mono-fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine"); size-adjust: 124.98%; ascent-override: 80.01%; descent-override: 16.00%; line-gap-override: 0%; unicode-range: U+20-7E, U+A0-FF, U+102, U+131, U+152-153, U+2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308, U+323, U+2002, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } :root { color-scheme: dark; /* ---- layout ---- */ --r-container: 84rem; --r-gutter: clamp(1rem, 4vw, 3.5rem); --r-measure: 62ch; --r-s-1: 0.25rem; --r-s-2: 0.5rem; --r-s-3: 0.75rem; --r-s-4: 1rem; --r-s-5: 1.5rem; --r-s-6: 2rem; --r-s-7: 3rem; --r-s-8: 4rem; --r-s-9: 6rem; --r-s-10: 8rem; --r-radius-1: 2px; --r-radius-pill: 999px; /* ---- type (every clamp() keeps a rem term so browser zoom still scales it) ---- */ --r-font-display: "r-text", "r-text-fallback", Arial, sans-serif; /* N: the text face, wide (font-stretch in the rules) */ --r-font-text: "r-text", "r-text-fallback", Arial, sans-serif; --r-font-mono: "r-mono", "r-mono-fallback", "Courier New", monospace; --r-step-micro: 0.75rem; /* spaced caps labels: the map's label voice */ --r-step-small: 0.9375rem; --r-step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); /* 17 -> 19px */ --r-step-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem); --r-step-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem); --r-step-h2: clamp(1.625rem, 1.25rem + 1.4vw, 2.5rem); --r-step-h1-model: clamp(1.875rem, 1.3rem + 2.2vw, 3.125rem); /* /dane h1 */ --r-step-display: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); /* hero h1, set wide: 32px @390 -> 52px @1280 */ --r-step-figure: clamp(3rem, 1.9rem + 4.4vw, 6rem); /* price figures */ --r-leading-body: 1.55; --r-leading-display: 1.06; --r-tracking-display: -0.01em; --r-tracking-caps: 0.14em; /* ---- colour roles (paper, sheet, collar, ink, dim, rule, rule-strong; the primary fill is ink and its hover is sienna; sienna is also the link and focus colour) ---- */ --r-c-ground: #0B0E13; /* page ground: the sky */ --r-c-surface: #12161C; /* panels: the almanac, code, the ground below the horizon, the footer */ --r-c-surface-2: #1A1F27; /* raised: menus, the launch bar */ --r-c-text: #F4F6FA; /* star: text, the object and its leader, the primary fill, focus */ --r-c-text-muted: #9AA3B2; /* muted: secondary text, faint points, the quieter cardinal marks */ --r-c-line: #2A2F38; /* grid: the alt-azimuth hairlines, decorative only, never a component boundary */ --r-c-line-strong: #66707F; /* the horizon, component boundaries */ --r-c-accent: #F4F6FA; /* star: the one primary fill (Try Dane). Never a state. */ --r-c-accent-strong: #FFFFFF; /* star-hi: the fill's hover, links, focus. Never a state. */ --r-c-on-accent: #0B0E13; /* text on star fills */ --r-c-mark: #0B0E13; /* the sky behind the object's label (DANE); no highlighter here */ /* ---- status (system state only, always with a label; kept out of the map hues; the launch-bar dot = warning) ---- */ --r-success: #3DD68C; --r-warning: #F5B83D; --r-danger: #FF6B5E; /* ---- focus ---- */ --r-focus-ring: 2px solid var(--r-c-accent-strong); --r-focus-offset: 3px; /* ---- motion (site.css moves only inside prefers-reduced-motion: no-preference) ---- */ --r-dur-fast: 120ms; /* hover, press */ --r-dur-menu: 160ms; /* menu open */ --r-dur-hero: 2400ms; /* 2400 ms: the one hero moment, the star wheel rotates into place once */ --r-dur-reveal: 650ms; /* 650 ms: a block of the page fades in as it scrolls into view */ --r-dur-fade: 500ms; /* 500 ms: the object's label fades in */ --r-dur-lead: 900ms; /* 900 ms: the leader draws from the object to its label */ --r-dur-acquire: 700ms; /* 700 ms: the ring closes on the object */ --r-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9); --r-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- BRIDGE: re-skin the older page bodies. The older colour + font names ONLY (landing-theme.css :root), each from a role; never the old layout / type / space tokens. This sheet loads after the old sheets, so these win at equal specificity. Inline