/* ============================================================================ OPSMERA — Colours & Type The control room for property operations. Single source of truth for colour + type tokens. Import this everywhere. Fonts are the brand's real cuts, vendored as variable woff2 in /fonts. (url()s resolve relative to THIS file, so they work from any importer.) ============================================================================ */ @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Variable-Roman.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Variable-Italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* ---- Brand core --------------------------------------------------------- The entire product lives on one deep navy. There is no light theme; the "control room" sits in the dark and signal colour does the talking. */ --navy-900: #081B33; /* deepest — contrast bands, overlays */ --navy-800: #0B2545; /* PRIMARY surface — the canvas everything sits on */ --navy-700: #0F2C50; /* raised — cards, panels, the live-pulse box */ --navy-600: #16365E; /* hover raise / inset wells */ --navy-500: #1E3A5C; /* solid hairline equivalent of a 10% white rule */ /* ---- Ink (text & lines on navy) ---------------------------------------- */ --fg-1: #F4F7FB; /* headlines, key numbers — near-white */ --fg-2: #8B98AD; /* body copy — muted slate */ --fg-3: #5E6E86; /* captions, helper, disabled */ --fg-4: #3A4B66; /* faintest — constellation lines, dividers */ /* hairlines as rgba (preferred over solid for layering) */ --line-1: rgba(255, 255, 255, 0.10); /* standard divider */ --line-2: rgba(255, 255, 255, 0.06); /* faint, large areas */ --line-3: rgba(255, 255, 255, 0.16); /* emphasised / focus rings */ /* ---- Signal (live-status only) ----------------------------------------- IMPORTANT: on Opsmera, WHITE is the primary action colour (buttons, active tabs, focus borders). This mint is reserved as a LIVE-STATUS signal — "online / normal / resolved", the small pulse dots, and the ops-globe's "resolved" green. Do NOT use it as a general accent or for the "//" prefix. */ --mint-400: #5BE0B0; /* hover / glow */ --mint-500: #33D499; /* SIGNAL — live/resolved status dots, globe */ --mint-600: #21A878; /* press / on light */ --mint-700: #1F8F6B; /* deepest */ --mint-glow: rgba(51, 212, 153, 0.22); /* ---- Status (ops semantics — triage, compliance, SLAs) ----------------- Tuned to read clearly on navy. Mint doubles as "success/resolved". */ --status-resolved: #33D499; /* done, compliant, online */ --status-info: #5B9BF0; /* scheduled, informational */ --status-warning: #E8B23E; /* due soon, at-risk SLA */ --status-urgent: #E2574A; /* breached, overdue, P1 */ --status-violet: #9B8CF0; /* automation / AI-driven actions */ /* ---- TAG SYSTEM — the locked contract ---------------------------------- Three independent dimensions; each app chip MUST use exactly one. Mixing them is what makes a UI feel busy. Spec: SYSTEM 1 — TRACK (RAG-only, exactly 4 values; the urgency/health rail) on-track mint Healthy / on schedule / compliant at-risk amber Watch / due soon breached red Overdue / SLA breached done grey Closed / paid / delivered / lodged SYSTEM 2 — PRIORITY (always 4 levels; severity, separate from track) p1 solid red p2 solid amber p3 outlined grey p4 faint grey SYSTEM 3 — STAGE (workflow position, NEUTRAL by design — all the same muted look; distinguished by icon + word, not by warm color. NEVER reach for amber/red/mint here just because something is "in progress". Colors below are mapped onto the existing palette so nothing else changes. */ --track-on-fg: #6FE3B6; /* mint family (slightly brighter than #7fe9c2) */ --track-on-border: rgba(51, 212, 153, 0.42); --track-on-bg: rgba(51, 212, 153, 0.14); --track-on-dot: var(--mint-500); --track-risk-fg: #F0CD82; --track-risk-border: rgba(232, 178, 62, 0.42); --track-risk-bg: rgba(232, 178, 62, 0.14); --track-risk-dot: var(--status-warning); --track-breach-fg: #F0938A; --track-breach-border:rgba(226, 87, 74, 0.48); --track-breach-bg: rgba(226, 87, 74, 0.15); --track-breach-dot: var(--status-urgent); --track-done-fg: rgba(244, 247, 251, 0.55); /* muted ink */ --track-done-border: rgba(255, 255, 255, 0.18); --track-done-bg: rgba(255, 255, 255, 0.04); --track-done-dot: rgba(244, 247, 251, 0.45); /* Stage pills: ONE muted neutral look for every workflow stage. */ --stage-fg: rgba(244, 247, 251, 0.78); --stage-border: rgba(255, 255, 255, 0.16); --stage-bg: rgba(255, 255, 255, 0.04); /* Legacy soft fills (kept for back-compat; new code uses --track-* above). */ --tint-resolved: rgba(51, 212, 153, 0.14); --tint-info: rgba(91, 155, 240, 0.14); --tint-warning: rgba(232, 178, 62, 0.14); --tint-urgent: rgba(226, 87, 74, 0.15); --tint-violet: rgba(155, 140, 240, 0.14); /* ---- On-light (inside white CTA buttons, light cards) ------------------ */ --on-light-ink: #0B2545; --surface-white: #FFFFFF; /* ======================================================================== TYPE Three voices: a high-contrast serif for display, a clean grotesque for everything functional, and a mono for labels/data/the "//" code motif. ======================================================================== */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace; /* fluid display sizes (hero + section heads) */ --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.25rem); /* @kind other */ --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem); /* @kind other */ --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); /* @kind other */ --fs-h3: 1.5rem; /* @kind other */ --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);/* @kind other */ --fs-body: 1.0625rem; /* @kind other */ --fs-small: 0.9375rem; /* @kind other */ --fs-label: 0.75rem; /* @kind other */ --fs-micro: 0.6875rem; /* @kind other */ --lh-tight: 1.04; /* @kind other */ --lh-snug: 1.18; /* @kind other */ --lh-body: 1.62; /* @kind other */ /* tracking */ --track-label: 0.18em; /* @kind other */ --track-tight: -0.02em; /* @kind other */ --track-wide: 0.04em; /* @kind other */ /* ======================================================================== SPACE · RADIUS · ELEVATION (see also: VISUAL FOUNDATIONS in README) ======================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Opsmera corners are NEARLY square — controlled, instrument-panel feel. */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* On a dark canvas, elevation is mostly border + faint glow, not big blurry shadows. Shadows stay tight and cool. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); --glow-mint: 0 0 0 1px rgba(51, 212, 153, 0.5), 0 0 24px var(--mint-glow); --ring-focus: 0 0 0 2px var(--navy-800), 0 0 0 4px var(--mint-500); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ } /* ============================================================================ SEMANTIC ELEMENT STYLES Apply by tag where possible; utility classes mirror them for convenience. Assumes a navy canvas (body background = --navy-800). ============================================================================ */ .op-display, h1.display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg-1); } /* The signature move: italic serif emphasis inside a roman display line. */ .op-display em, .op-emph { font-style: italic; font-weight: 500; } h1, .op-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg-1); } h2, .op-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); } h3, .op-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); } .op-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); } body, p, .op-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } .op-small { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); } /* Eyebrow / kicker — the "// SECTION" motif. BODY font (Manrope), uppercase, tracked + muted. The "//" is the SAME muted tone as the text, never coloured. (Mono is reserved for numbers/indices/metrics, not the eyebrow text.) */ .op-eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 0.625rem; /* 10px */ letter-spacing: 0.3em; text-transform: uppercase; color: rgba(244, 247, 251, 0.42); } .op-eyebrow .slash { color: inherit; } /* "//" matches the text, not mint */ /* Mono index numerals (01 / 02 …) sitting above a serif title. */ .op-index { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track-wide); color: var(--fg-3); } /* Data / metrics — big numbers stay in the grotesque, tabular. */ .op-metric { font-family: var(--font-sans); font-weight: 700; font-feature-settings: 'tnum' 1, 'cv11' 1; font-variant-numeric: tabular-nums; color: var(--fg-1); letter-spacing: -0.01em; } code, .op-code, .op-mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-1); }