/* ========================================================================= Riemann Capital — Colors & Type Source of truth. Import this file before any component CSS. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,wght@1,400;1,500&display=swap'); :root { /* ------------------------------------------------------------------ INK — backgrounds. Cool-neutral, narrow ramp, no color cast. ------------------------------------------------------------------ */ --ink-canvas: #0F1115; /* page background */ --ink-raised: #14161A; /* card / panel fill */ --ink-panel: #1A1D23; /* nested panel, table header, hover row */ --ink-hover: #22262E; /* hover surface */ --ink-pressed: #0A0C0F; /* pressed surface */ /* ------------------------------------------------------------------ BRONZE / CHAMPAGNE — the only chromatic accent. ------------------------------------------------------------------ */ --bronze: #C5A880; /* primary accent, CTA, active highlight */ --bronze-pressed: #B89768; /* pressed CTA */ --bronze-deep: #8E7449; /* deep bronze for subtle markings */ --bronze-soft: rgba(197, 168, 128, 0.12); /* highlight wash */ --bronze-halo: rgba(197, 168, 128, 0.06); /* radial accent on hero */ /* ------------------------------------------------------------------ PAPER — text & foreground. ------------------------------------------------------------------ */ --paper-high: #F5F2EC; /* headlines, prices, key numerals */ --paper-body: #D6D3CC; /* body text */ --paper-muted: #94A3B8; /* labels, secondary metrics */ --paper-dim: #5B6470; /* tertiary, captions */ --paper-faint: #3A4049; /* placeholders, disabled */ /* ------------------------------------------------------------------ TEAL — secondary chromatic. "Financial Teal." The quiet partner to bronze. Used for secondary data series, info glyphs, and the supporting accent on the marketing hero. Never on a CTA. Never paired with bronze inside the same component. ------------------------------------------------------------------ */ --teal: #4F7A82; /* primary teal */ --teal-bright: #6FA1AB; /* highlights, links */ --teal-deep: #2E4E55; /* base, secondary fills */ --teal-soft: rgba(79, 122, 130, 0.14); /* ------------------------------------------------------------------ SIGNAL — data status. Tuned to sit quietly against dark ink. ------------------------------------------------------------------ */ --signal-up: #52C28A; --signal-up-soft: rgba(82, 194, 138, 0.12); --signal-down: #E5604D; --signal-down-soft: rgba(229, 96, 77, 0.12); --signal-caution: #E5A954; --signal-info: #6FA1AB; /* aliased to teal-bright */ /* ------------------------------------------------------------------ BORDERS & HAIRLINES — the structural language. ------------------------------------------------------------------ */ --hair-soft: #22262E; /* default 1px divider */ --hair-strong: #2E333C; /* emphasized divider, hover hairline */ --hair-bronze: #C5A880; /* used only to mark CTA region */ /* ------------------------------------------------------------------ ELEVATION — sparingly applied. ------------------------------------------------------------------ */ --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-pop: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 20px 48px -16px rgba(0, 0, 0, 0.7); /* The signature "alchemical" glow on primary CTAs and key brand surfaces. A diffuse bronze bloom that suggests warmth under cold ink. */ --shadow-bronze-glow: 0 0 0 1px rgba(197, 168, 128, 0.35), 0 8px 28px -6px rgba(197, 168, 128, 0.35), 0 0 40px -8px rgba(197, 168, 128, 0.25); /* A subtle inner highlight on premium cards — the "lit-from-within" look. */ --shadow-card-lit: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.02); /* ------------------------------------------------------------------ RADII — razor minimal. ------------------------------------------------------------------ */ --radius-xs: 2px; /* status dots, micro tags */ --radius-sm: 4px; /* buttons, inputs, badges */ --radius-md: 6px; /* cards, modals */ --radius-pill: 999px; /* status dots only */ /* ------------------------------------------------------------------ SPACING — strict 4px base. ------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-18: 72px; --space-24: 96px; --space-32: 128px; /* ------------------------------------------------------------------ MOTION ------------------------------------------------------------------ */ --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 120ms; --dur-std: 220ms; --dur-macro: 360ms; /* ------------------------------------------------------------------ TYPOGRAPHY — base families ------------------------------------------------------------------ */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --font-serif: 'Newsreader', ui-serif, Georgia, serif; /* Type scale — sized for a 1080p product canvas and a 1280px marketing page */ --type-display: 56px; /* hero, marketing only */ --type-h1: 40px; --type-h2: 28px; --type-h3: 20px; --type-h4: 16px; --type-body: 15px; --type-body-sm: 13px; --type-label: 11px; /* UPPERCASE micro-labels */ --type-mono-lg: 28px; /* hero numerals */ --type-mono: 14px; /* table numerals */ --type-mono-sm: 12px; /* timestamps */ --line-tight: 1.05; --line-snug: 1.25; --line-body: 1.5; } /* ============================================================ GLOBAL RESET (minimal — just what the system depends on) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink-canvas); color: var(--paper-body); font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--line-body); font-feature-settings: 'cv11' on, 'ss01' on; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ SEMANTIC TYPE — apply with class names ============================================================ */ .t-display { font-family: var(--font-sans); font-size: var(--type-display); font-weight: 600; line-height: var(--line-tight); letter-spacing: -0.025em; color: var(--paper-high); } .t-h1 { font-family: var(--font-sans); font-size: var(--type-h1); font-weight: 600; line-height: var(--line-tight); letter-spacing: -0.02em; color: var(--paper-high); } .t-h2 { font-family: var(--font-sans); font-size: var(--type-h2); font-weight: 600; line-height: var(--line-snug); letter-spacing: -0.015em; color: var(--paper-high); } .t-h3 { font-family: var(--font-sans); font-size: var(--type-h3); font-weight: 600; line-height: var(--line-snug); letter-spacing: -0.01em; color: var(--paper-high); } .t-h4 { font-family: var(--font-sans); font-size: var(--type-h4); font-weight: 600; line-height: var(--line-snug); color: var(--paper-high); } .t-body { font-family: var(--font-sans); font-size: var(--type-body); font-weight: 400; line-height: var(--line-body); color: var(--paper-body); } .t-body-sm { font-family: var(--font-sans); font-size: var(--type-body-sm); font-weight: 400; line-height: var(--line-body); color: var(--paper-body); } .t-muted { color: var(--paper-muted); } .t-dim { color: var(--paper-dim); } .t-label { font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-muted); line-height: 1; } /* Numerals — always tabular */ .t-num, .t-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' on, 'zero' on; font-variant-numeric: tabular-nums; color: var(--paper-high); } .t-num-lg { font-size: var(--type-mono-lg); font-weight: 500; letter-spacing: -0.01em; } .t-num-md { font-size: var(--type-mono); font-weight: 500; } .t-num-sm { font-size: var(--type-mono-sm); font-weight: 400; color: var(--paper-muted); } .t-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } /* Signal colors as utility classes */ .t-up { color: var(--signal-up); } .t-down { color: var(--signal-down); } .t-caution { color: var(--signal-caution); } /* A bronze accent on a single word */ .t-bronze { color: var(--bronze); } /* ============================================================ LANGUAGE SWITCHER — shared globe menu (all pages) ============================================================ */ .lang-wrap { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; cursor: pointer; color: var(--paper-muted); padding: 7px 8px; border-radius: 4px; transition: color var(--dur-micro) var(--ease-fluid), background var(--dur-micro) var(--ease-fluid); } .lang-btn:hover { color: var(--paper-high); background: var(--ink-panel); } .lang-caret { opacity: 0.7; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 132px; padding: 5px; background: linear-gradient(180deg, #1A1D23 0%, #16191F 100%); border: 1px solid var(--hair-strong); border-radius: 6px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.7); } .lang-opt { display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: none; border-radius: 4px; font-family: var(--font-sans); font-size: 13.5px; color: var(--paper-body); padding: 9px 12px; transition: background var(--dur-micro) var(--ease-fluid), color var(--dur-micro) var(--ease-fluid); } .lang-opt:hover { background: var(--ink-hover); color: var(--paper-high); }