/* ========================================================================== RX-OS — Colors & Type Cognitive security for critical infrastructure. ========================================================================== Loading this file: The defaults are DARK (terminal / console / OT operator at 3am). Add to flip to the paper variant used on the longform pages (/about, /technology). ========================================================================== */ /* Fonts — hosted locally in /fonts, sourced from Google Fonts (See README.md → VISUAL FOUNDATIONS → Type for substitution notes) */ @font-face { font-family: "RX Display"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "RX Display"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "RX Sans"; src: url("fonts/InterTight-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "RX Mono"; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; } /* ========================= 1. PRIMITIVES ========================= */ :root { /* -- Neutrals (dark base) ----------------------------------------------- Near-black, with a whisper of cool hue. NOT pure #000 for large areas, NOT pure #fff for text. We want kernel-panel depth, not OLED void. */ --rx-ink-0: #07090B; /* hero backgrounds, below-fold blocks */ --rx-ink-1: #0B0E12; /* app chrome, default surface */ --rx-ink-2: #121620; /* raised surface, cards, inputs */ --rx-ink-3: #1A2030; /* hovered rows, nested panels */ --rx-ink-4: #242C3E; /* borders on dark, subtle dividers */ --rx-fog-4: #3A4458; /* disabled text / tertiary on dark */ --rx-fog-3: #6B7487; /* muted text on dark */ --rx-fog-2: #A0A8BC; /* secondary text on dark */ --rx-fog-1: #D4D9E4; /* primary text on dark */ --rx-bone: #ECEAE2; /* warm off-white (paper mode, body on dark) */ --rx-paper: #F6F3EB; /* warm paper, used on /about + /technology */ --rx-chalk: #FFFFFF; /* reserved for pure-white accents */ /* -- Signal colors ----------------------------------------------------- Terminal-derived. Green is the default live/healthy. Amber = anomaly detected. Red = guard engaged. Cyan = discovery (passive). */ --rx-signal-500: #7DD87A; /* healthy, live, online, evidence ok */ --rx-signal-600: #4FB85A; --rx-signal-300: #B7ECB4; --rx-signal-900: #0E2612; --rx-anomaly-500: #F3B64A; /* warning, behavioural drift */ --rx-anomaly-300: #F9D88A; --rx-anomaly-900: #2A1D07; --rx-guard-500: #E25D4A; /* alert, threat, blocked */ --rx-guard-300: #F0958A; --rx-guard-900: #2C0E08; --rx-sense-500: #7AB6D8; /* discovery / passive / scanning */ --rx-sense-300: #B3D5EA; --rx-sense-900: #0B1E2A; /* -- Deep brand --------------------------------------------------------- Dark petrol/teal; quiet, sovereign, Belgian-engineering. */ --rx-deep-900: #04120F; --rx-deep-800: #0B1F1C; --rx-deep-500: #16504A; --rx-deep-300: #3D8F85; /* -- Functional radii & elevation -------------------------------------- */ --rx-radius-0: 0; --rx-radius-1: 2px; --rx-radius-2: 4px; --rx-radius-3: 6px; --rx-radius-4: 10px; /* cards, panels */ --rx-radius-pill: 999px; --rx-border-thin: 1px solid var(--rx-ink-4); --rx-border-hairline: 1px solid rgba(212, 217, 228, 0.08); /* We use inset shadows for depth, not drop shadows. Drop shadows = marketing slop; inset = instrument panel. */ --rx-inset-hair: inset 0 0 0 1px rgba(255,255,255,0.04); --rx-inset-soft: inset 0 1px 0 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.04); --rx-glow-signal: 0 0 0 1px var(--rx-signal-500), 0 0 24px -4px rgba(125, 216, 122, 0.45); --rx-glow-guard: 0 0 0 1px var(--rx-guard-500), 0 0 24px -4px rgba(226, 93, 74, 0.45); --rx-drop-sm: 0 1px 0 rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3); --rx-drop-lg: 0 4px 1px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.5); /* -- Spacing scale (4px base) ------------------------------------------ */ --rx-s-0: 0px; --rx-s-1: 4px; --rx-s-2: 8px; --rx-s-3: 12px; --rx-s-4: 16px; --rx-s-5: 24px; --rx-s-6: 32px; --rx-s-7: 48px; --rx-s-8: 64px; --rx-s-9: 96px; --rx-s-10: 128px; /* -- Motion ------------------------------------------------------------- Everything is fast and firm. This is an instrument, not a storefront. No bouncing, no spring overshoot. */ --rx-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --rx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rx-dur-fast: 80ms; --rx-dur-med: 160ms; --rx-dur-slow: 320ms; /* -- Font stacks -------------------------------------------------------- */ --rx-ff-display: "RX Display", "Instrument Serif", Georgia, "Times New Roman", serif; --rx-ff-sans: "RX Sans", "Inter Tight", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif; --rx-ff-mono: "RX Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } /* ========================= 2. SEMANTIC TOKENS (dark default) ========================= */ :root { --bg: var(--rx-ink-0); --bg-raised: var(--rx-ink-1); --bg-sunk: #04060A; --surface: var(--rx-ink-2); --surface-2: var(--rx-ink-3); --fg: var(--rx-bone); --fg-1: var(--rx-fog-1); /* secondary */ --fg-2: var(--rx-fog-2); /* tertiary / captions */ --fg-3: var(--rx-fog-3); /* disabled, muted */ --fg-on-accent: var(--rx-ink-0); --line: rgba(212, 217, 228, 0.08); --line-strong: rgba(212, 217, 228, 0.16); --accent: var(--rx-signal-500); --accent-fg: var(--rx-ink-0); --warn: var(--rx-anomaly-500); --danger: var(--rx-guard-500); --info: var(--rx-sense-500); --focus-ring: 0 0 0 2px var(--rx-ink-0), 0 0 0 4px var(--rx-signal-500); } /* Light / paper mode — used on editorial longform pages */ html.theme-light, .theme-light { --bg: var(--rx-paper); --bg-raised: #FDFBF4; --bg-sunk: #E8E4D6; --surface: #FFFFFF; --surface-2: #F1ECE0; --fg: #111418; --fg-1: #2A2F38; --fg-2: #555A66; --fg-3: #8A8E98; --fg-on-accent: #07090B; --line: rgba(7, 9, 11, 0.10); --line-strong: rgba(7, 9, 11, 0.22); --accent: var(--rx-deep-500); --accent-fg: var(--rx-paper); --focus-ring: 0 0 0 2px var(--rx-paper), 0 0 0 4px var(--rx-deep-500); } /* ========================= 3. BASE TYPE ========================= */ html { font-family: var(--rx-ff-sans); font-size: 16px; line-height: 1.5; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11", "tnum" 0; } body { margin: 0; } /* Display — editorial serif, tight tracking. Used for hero headlines only. Italic is the brand flex — appears on /home ("Infrastructure that *thinks*") */ .rx-display, h1 { font-family: var(--rx-ff-display); font-weight: 400; font-size: clamp(42px, 6.4vw, 96px); line-height: 0.96; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 var(--rx-s-5); text-wrap: pretty; } .rx-display em, h1 em { font-style: italic; } /* H2 — section header, sans, smaller, colder */ .rx-h2, h2 { font-family: var(--rx-ff-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.015em; color: var(--fg); margin: 0 0 var(--rx-s-4); text-wrap: balance; } /* H3 — subsection, sans, all-caps-adjacent */ .rx-h3, h3 { font-family: var(--rx-ff-sans); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.005em; margin: 0 0 var(--rx-s-3); } /* H4 — in-card title */ .rx-h4, h4 { font-family: var(--rx-ff-sans); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: 0; margin: 0 0 var(--rx-s-2); } /* Eyebrow — tiny kicker above headings ("Architecture", "Compliance", etc.) */ .rx-eyebrow { font-family: var(--rx-ff-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--rx-s-3); display: inline-flex; align-items: center; gap: var(--rx-s-2); } .rx-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; opacity: 0.7; } /* Body — default paragraph */ .rx-body, p { font-family: var(--rx-ff-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--fg-1); margin: 0 0 var(--rx-s-4); text-wrap: pretty; } .rx-body--lg { font-size: 19px; line-height: 1.5; color: var(--fg); } .rx-body--sm { font-size: 14px; line-height: 1.5; } /* Caption — small dim label */ .rx-caption { font-family: var(--rx-ff-sans); font-size: 13px; line-height: 1.4; color: var(--fg-2); } /* Code / value — inline or block, tabular */ .rx-code, code, kbd, samp { font-family: var(--rx-ff-mono); font-size: 0.92em; font-feature-settings: "tnum", "zero"; font-weight: 450; } pre.rx-code, .rx-code--block { display: block; padding: var(--rx-s-4); background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--rx-radius-3); color: var(--fg); font-size: 13px; line-height: 1.55; overflow-x: auto; white-space: pre; } /* Metric — large tabular number. Dashboards. */ .rx-metric { font-family: var(--rx-ff-mono); font-weight: 500; font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; font-feature-settings: "tnum"; color: var(--fg); } .rx-metric__unit { font-size: 0.35em; letter-spacing: 0; color: var(--fg-2); margin-left: 0.25em; font-weight: 400; } /* Path — rx-os's signature "rx-os.local/dashboard" / "rx-os :: passive discovery" lockup */ .rx-path { font-family: var(--rx-ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-2); display: inline-flex; gap: 0.5ch; align-items: baseline; } .rx-path strong { color: var(--fg); font-weight: 500; } /* Marker — the "//", "#", "{}", "<>", "~", "\*" principle markers used in /about → Principles. Decorative, monospace, large. */ .rx-marker { font-family: var(--rx-ff-mono); font-weight: 400; font-size: 40px; line-height: 1; color: var(--rx-signal-500); opacity: 0.8; } /* Links */ a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-color: var(--accent); } /* Selection */ ::selection { background: var(--rx-signal-500); color: var(--rx-ink-0); }