/* ============================================================= CONTRXBAND — Colors & Type ============================================================= */ /* ---------- Webfonts ---------- Brand face: Rajdhani (provided as TTF, in fonts/). Mono / data: JetBrains Mono (Google Fonts) — flagged as placeholder until a brand-confirmed mono is provided. */ @font-face { font-family:'Rajdhani'; font-weight:300; font-style:normal; src:url('fonts/rajdhani-light.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'Rajdhani'; font-weight:400; font-style:normal; src:url('fonts/rajdhani-regular.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'Rajdhani'; font-weight:500; font-style:normal; src:url('fonts/rajdhani-medium.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'Rajdhani'; font-weight:600; font-style:normal; src:url('fonts/rajdhani-semibold.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'Rajdhani'; font-weight:700; font-style:normal; src:url('fonts/rajdhani-bold.ttf') format('truetype'); font-display:swap; } @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ============================================================ COLORS — Raw palette ============================================================ */ /* Brand orange — the X, the contraband mark, the alert hue. This is the only "loud" color in the system. Use sparingly. */ --cx-orange-500: #E15A1F; /* primary brand orange */ --cx-orange-400: #F07033; /* hover / lighter accent */ --cx-orange-600: #C24914; /* pressed / deeper */ --cx-orange-300: #FF8A4C; /* highlight / glow */ --cx-orange-100: #FCE2D2; /* tint background (rare) */ /* Charcoal / Ink — primary surface and text. Cool-warm hybrid, never pure black. The "shop floor" color. */ --cx-ink-950: #0E0F10; /* deepest — bezel ground */ --cx-ink-900: #17181A; /* primary surface */ --cx-ink-800: #1F2123; /* raised surface */ --cx-ink-700: #2A2C30; /* card / module */ --cx-ink-600: #3A3D42; /* divider / inset */ --cx-ink-500: #54585F; /* muted text on dark */ /* Bone / Sand — light surface, warm neutral. Reads as canvas, paper tape, packaging cardstock. */ --cx-bone-50: #F6F2EC; /* page background (light) */ --cx-bone-100: #ECE6DB; /* card on light */ --cx-bone-200: #DDD4C3; /* divider on light */ --cx-bone-300: #BFB39C; /* muted */ /* Field Olive — military crate green. Used for surface accents, secondary modules, status badges. */ --cx-olive-700: #3F4A30; --cx-olive-500: #5A6A41; --cx-olive-300: #8A9870; /* Steel — cool neutrals for data, instrumentation. */ --cx-steel-300: #9AA4AE; --cx-steel-500: #6B747D; --cx-steel-700: #3C434A; /* Signal — semantic instrumentation colors. Tuned to read on dark dashboards. */ --cx-signal-go: #3FBE7A; /* in-zone, optimal */ --cx-signal-warn: #E8B23A; /* caution */ --cx-signal-stop: #D8392B; /* fault, critical */ --cx-signal-data: #6FB8E0; /* live data accent */ /* ============================================================ SEMANTIC TOKENS — Dark default (the brand's native mode) ============================================================ */ --cx-bg: var(--cx-ink-950); --cx-bg-raised: var(--cx-ink-900); --cx-bg-card: var(--cx-ink-800); --cx-bg-inset: var(--cx-ink-700); --cx-fg: #F1ECE3; /* primary text on dark */ --cx-fg-muted: #A8A398; --cx-fg-subtle: #6E6A62; --cx-fg-on-accent: #0E0F10; --cx-accent: var(--cx-orange-500); --cx-accent-hover: var(--cx-orange-400); --cx-accent-press: var(--cx-orange-600); --cx-border: #2A2C30; --cx-border-strong:#3A3D42; --cx-border-accent:var(--cx-orange-500); --cx-success: var(--cx-signal-go); --cx-warning: var(--cx-signal-warn); --cx-danger: var(--cx-signal-stop); --cx-data: var(--cx-signal-data); /* ============================================================ TYPE — Family stack ============================================================ */ --cx-font-display: 'Rajdhani', 'Saira Condensed', system-ui, sans-serif; --cx-font-ui: 'Rajdhani', 'Saira', 'Inter', system-ui, sans-serif; --cx-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* ============================================================ TYPE — Scale (compact, instrument-dense) ============================================================ */ --cx-fs-display: 64px; /* hero, marquee */ --cx-fs-h1: 44px; --cx-fs-h2: 30px; --cx-fs-h3: 22px; --cx-fs-h4: 17px; --cx-fs-body: 15px; --cx-fs-small: 13px; --cx-fs-micro: 11px; /* labels, telemetry codes */ --cx-lh-tight: 1.05; --cx-lh-snug: 1.2; --cx-lh-body: 1.5; --cx-tracking-tight: -0.01em; --cx-tracking-normal: 0; --cx-tracking-wide: 0.06em; --cx-tracking-mega: 0.18em; /* eyebrows / labels */ /* ============================================================ SPACING — 4px grid ============================================================ */ --cx-sp-1: 4px; --cx-sp-2: 8px; --cx-sp-3: 12px; --cx-sp-4: 16px; --cx-sp-5: 20px; --cx-sp-6: 24px; --cx-sp-8: 32px; --cx-sp-10: 40px; --cx-sp-12: 48px; --cx-sp-16: 64px; --cx-sp-20: 80px; --cx-sp-24: 96px; /* ============================================================ RADII — Hardware feel. Mostly squared. ============================================================ */ --cx-radius-0: 0px; /* default — squared corners */ --cx-radius-1: 2px; /* keys / chips */ --cx-radius-2: 4px; /* inputs, buttons */ --cx-radius-3: 8px; /* cards */ --cx-radius-4: 14px; /* modules, large surfaces */ --cx-radius-pill: 999px; /* status pills only */ /* ============================================================ BORDERS ============================================================ */ --cx-bw-1: 1px; --cx-bw-2: 2px; --cx-bw-hairline: 0.5px; /* ============================================================ SHADOWS — Hardware / instrument feel Mostly inner shadows + tight outer drops. ============================================================ */ --cx-shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.25); --cx-shadow-2: 0 2px 0 rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.35); --cx-shadow-3: 0 6px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset; --cx-inset-screen: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 2px 8px rgba(0,0,0,0.6); --cx-bezel: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5); --cx-glow-orange: 0 0 0 2px rgba(225,90,31,0.25), 0 0 24px rgba(225,90,31,0.35); /* ============================================================ MOTION ============================================================ */ --cx-ease-mech: cubic-bezier(.2, .8, .2, 1); /* mechanical snap */ --cx-ease-out: cubic-bezier(.16, 1, .3, 1); --cx-ease-in: cubic-bezier(.4, 0, 1, 1); --cx-dur-fast: 120ms; --cx-dur-base: 200ms; --cx-dur-slow: 360ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .cx-display { font-family: var(--cx-font-display); font-weight: 800; font-size: var(--cx-fs-display); line-height: var(--cx-lh-tight); letter-spacing: var(--cx-tracking-tight); text-transform: uppercase; } .cx-h1 { font-family: var(--cx-font-display); font-weight: 700; font-size: var(--cx-fs-h1); line-height: var(--cx-lh-tight); letter-spacing: var(--cx-tracking-tight); text-transform: uppercase; } .cx-h2 { font-family: var(--cx-font-display); font-weight: 700; font-size: var(--cx-fs-h2); line-height: var(--cx-lh-snug); text-transform: uppercase; } .cx-h3 { font-family: var(--cx-font-display); font-weight: 600; font-size: var(--cx-fs-h3); line-height: var(--cx-lh-snug); text-transform: uppercase; } .cx-h4 { font-family: var(--cx-font-ui); font-weight: 600; font-size: var(--cx-fs-h4); line-height: var(--cx-lh-snug); } .cx-body { font-family: var(--cx-font-ui); font-weight: 400; font-size: var(--cx-fs-body); line-height: var(--cx-lh-body); } .cx-small { font-family: var(--cx-font-ui); font-weight: 400; font-size: var(--cx-fs-small); line-height: var(--cx-lh-body); } .cx-eyebrow, .cx-label { font-family: var(--cx-font-display); font-weight: 700; font-size: var(--cx-fs-micro); line-height: 1; letter-spacing: var(--cx-tracking-mega); text-transform: uppercase; } .cx-mono, .cx-data-readout { font-family: var(--cx-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; } .cx-tabular { font-variant-numeric: tabular-nums; } /* Utility: stencil-ish accent — used for the X glyph and "CONTRXBAND" wordmark moments */ .cx-stencil { font-family: var(--cx-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--cx-tracking-wide); }