/* ============================================================= AURIC AXIS – Colors & Type Capital markets intelligence · editorial dossier aesthetic ============================================================= */ /* -- Fonts --------------------------------------------------- */ /* Primary: GT Sectra / Tiempos-style editorial serif → Substituted with Fraunces (Google) for display where needed, but Auric Axis's editorial voice calls for something drier. We use EB Garamond + Source Serif as the closest free pair. Body grotesk: Inter (neutral, finance-friendly) Mono: JetBrains Mono (tickers, numerics) */ /* The real site uses: - Black sans for UI/body (looks like a geometric-leaning grotesk – Inter/Manrope/Söhne family) - A BOLD ITALIC SCRIPT-SERIF for the hero gold italic ("before the market does.") → closest free match: Playfair Display Italic 700 (bold, tall x-height, contrasty) - Mono/tracked caps for nav and tags */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { /* ========================================================= COLOR – CORE PALETTE ========================================================= */ /* Ink – the dossier's black. Not pure. Slight warm tilt. */ --ink-950: #0A0806; /* near-black, cube background */ --ink-900: #121010; /* primary dark surface */ --ink-800: #1C1917; /* raised dark surface */ --ink-700: #2A2622; /* dark borders on dark bg */ --ink-600: #3D3732; /* muted on dark */ /* Gold – antique/olive gold, muted. Matches the site hero italic. */ --gold-300: #D9C589; /* highlight tint */ --gold-400: #C5AD6E; /* hover */ --gold-500: #B89B5A; /* primary – "auric" (hero italic color) */ --gold-600: #9A814A; /* pressed / dense (tag color on light bg) */ --gold-700: #7A6638; /* shadow / deep gold */ /* Paper – off-white / cream for dossier/document backgrounds */ --paper-50: #FBF8F3; /* page */ --paper-100: #F5F0E6; /* soft panel */ --paper-200: #ECE4D3; /* divider on paper */ --paper-300: #D9CDB4; /* muted accent */ /* Graphite – neutral greys, slightly warm */ --graphite-900: #1F1D1B; --graphite-700: #4A4540; --graphite-500: #7A7469; --graphite-400: #9B9488; --graphite-300: #BFB9AE; --graphite-200: #DEDAD1; --graphite-100: #EEEAE1; /* Semantic (used sparingly – this brand is not a traffic light) */ --signal-positive: #3B7A4B; /* deep forest green – "confirmed" */ --signal-caution: #B8862B; /* = gold-600; reuse for "pending" */ --signal-negative: #9B3B2E; /* oxblood – "closed / missed" */ /* ========================================================= SEMANTIC – LIGHT SURFACE (default – matches website) Website is white/cream, not dark. ========================================================= */ --bg: #FFFFFF; --bg-raised: #FAFAF7; /* soft panel grey-cream */ --bg-sunken: #F4F2EC; /* sunken bands (between sections) */ --fg: var(--ink-900); /* near-black, not pure */ --fg-muted: var(--graphite-700); --fg-subtle: var(--graphite-500); --accent: var(--gold-500); /* antique gold */ --accent-hover: var(--gold-600); --border: var(--graphite-200); --border-strong:var(--graphite-300); --rule: var(--graphite-200); /* ========================================================= SEMANTIC – DARK SURFACE (for CTAs, dossier alt, decks) ========================================================= */ --bg-dark: var(--ink-900); --bg-dark-raised: var(--ink-800); --fg-dark: #FAFAF7; --fg-dark-muted: var(--graphite-300); --rule-dark: var(--ink-700); /* ========================================================= SEMANTIC – PAPER SURFACE (dossiers, deliverables, print) ========================================================= */ --paper-bg: var(--paper-50); --paper-bg-panel: var(--paper-100); --paper-fg: var(--ink-900); --paper-fg-muted: var(--graphite-700); --paper-fg-subtle: var(--graphite-500); --paper-border: var(--graphite-200); --paper-rule: var(--graphite-300); --paper-accent: var(--gold-600); /* darker gold reads on cream */ /* ========================================================= TYPE – FAMILIES ========================================================= */ --font-serif: 'Cormorant Garamond', 'Tiempos Headline', 'EB Garamond', Georgia, serif; --font-serif-italic: 'Cormorant Garamond', 'Tiempos Headline', 'EB Garamond', Georgia, serif; /* reading serif – used for lede/body prose. more legible at small sizes than the display Cormorant. shares metrics with Plex Sans/Mono. */ --font-serif-read: 'IBM Plex Serif', 'Source Serif 4', 'Georgia', serif; --font-sans: 'IBM Plex Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ========================================================= TYPE – SCALE (editorial, generous) ========================================================= */ --fs-eyebrow: 11px; /* SECTION 01 tags */ --fs-micro: 12px; /* disclaimers, footers */ --fs-meta: 13px; /* meta, labels */ --fs-body: 15px; /* body running text */ --fs-lede: 18px; /* lede paragraphs */ --fs-h4: 20px; --fs-h3: 28px; --fs-h2: 40px; --fs-h1: 56px; --fs-display: 80px; /* Cormorant is lighter than Playfair; bump italic serif sizing a touch */ --fs-hero: 112px; /* for big stat numerals */ /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.65; /* Tracking */ --ls-label: 0.14em; /* uppercase labels – the signature */ --ls-eyebrow: 0.18em; --ls-tight: -0.02em; /* display */ --ls-normal: 0; /* ========================================================= SPACING ========================================================= */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ========================================================= BORDERS & RADII – the brand is square-ish. Radii are small. ========================================================= */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --bw-hair: 1px; --bw-rule: 1px; --bw-heavy: 2px; /* ========================================================= SHADOWS – restrained. Mostly hairlines, not glows. Gold glow is reserved for moments of emphasis. ========================================================= */ --shadow-hairline: 0 0 0 1px rgba(0,0,0,0.06); --shadow-paper: 0 1px 2px rgba(20, 16, 10, 0.08), 0 8px 24px -12px rgba(20, 16, 10, 0.12); --shadow-lift: 0 2px 4px rgba(10,8,6,0.3), 0 16px 40px -16px rgba(10,8,6,0.5); --shadow-gold-glow:0 0 0 1px rgba(212,161,58,0.4), 0 0 24px rgba(212,161,58,0.25); /* ========================================================= MOTION – slow, deliberate. No bounces. ========================================================= */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-entrance: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ============================================================= TYPE – SEMANTIC CLASSES Use these directly (e.g.

). They are the contract between designers and the system. ============================================================= */ /* Display is a mix: sans-bold ink + serif-italic gold. Compose with spans:

We see it before the market does.

*/ .aa-display, .aa-h1 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--fg); } .aa-display em, .aa-h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; } .aa-display { font-size: var(--fs-display); } .aa-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.015em; } .aa-h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--accent); } .aa-h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; } .aa-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.005em; } .aa-lede { font-family: var(--font-serif-read); font-weight: 400; font-size: var(--fs-lede); line-height: var(--lh-loose); font-variation-settings: "opsz" 14; } .aa-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); } .aa-meta { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-meta); line-height: var(--lh-normal); color: var(--fg-muted); } .aa-micro { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--fg-subtle); } /* The signature – uppercase labels with wide tracking. Used for: SECTION 01, eyebrows, field labels (NAME, TITLE, MANDATE), ticker prefixes (TSXV:), header strips, footer disclaimers. */ .aa-label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-meta); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; } .aa-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); } .aa-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-body); font-feature-settings: "tnum" 1, "zero" 1; } .aa-stat { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-hero); line-height: 0.95; letter-spacing: -0.035em; font-feature-settings: "tnum" 1, "lnum" 1; } .aa-stat-md { font-family: var(--font-sans); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.025em; font-feature-settings: "tnum" 1, "lnum" 1; } /* Middot separator – the AURIC AXIS · signature */ .aa-middot::before { content: " · "; opacity: 0.5; margin: 0 0.35em; } /* ============================================================= BASE ELEMENTS – when html is used directly ============================================================= */ html, body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); font-feature-settings: "ss01" 1, "cv11" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: 800 var(--fs-h1)/var(--lh-tight) var(--font-sans); letter-spacing: -0.02em; } h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: -0.015em; } h3 { font: 700 var(--fs-h3)/var(--lh-snug) var(--font-sans); letter-spacing: -0.01em; } h4 { font: 600 var(--fs-h4)/var(--lh-snug) var(--font-sans); } p { font-size: var(--fs-body); line-height: var(--lh-normal); } /* Italic emphasis in headings → auto-switch to serif-italic gold. This is the brand's #1 type move; make it automatic. */ h1 em, h2 em, h3 em, .aa-display em, .aa-h1 em, .aa-h2 em, .aa-h3 em { font-family: var(--font-serif); font-weight: 700; font-style: italic; color: var(--accent); } /* Paper surface utility */ .aa-paper { background: var(--paper-bg); color: var(--paper-fg); } .aa-paper h1, .aa-paper h2, .aa-paper h3, .aa-paper h4 { color: var(--paper-fg); } /* Dark surface utility (default) */ .aa-dark { background: var(--bg); color: var(--fg); }