/* Fonts (Fraunces + Inter Tight + JetBrains Mono) are loaded by each page's block in using a preconnect + preload + async-stylesheet pattern. Do NOT @import them here — render-blocking @import inside a stylesheet that itself blocks render is the worst font-loading pattern. See any page's for the canonical block. */ /* ════════════════════════════════════════════════════════════════════════ ProFinanceCast — Design Tokens · v3 "Modern Fintech" Deep emerald-black + ivory + champagne gold + vivid emerald. Old-money editorial confidence × Linear-grade software discipline. ⚠ This file IS the brand. Every page imports it. Don't override here — override on a single page using @media or a parent class. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Money palette ────────────────────────────────────────────────────── */ /* Dark surfaces (the app/dashboard side of the product) */ --canvas: #0B1410; /* deep emerald-black, the floor of every dark page */ --surface: #111E18; /* one step up — main cards/panels */ --surface-2: #16271F; /* two steps up — modals, hover states, toolbars */ --surface-3: #1C3328; /* three steps up — pressed buttons, popovers */ /* Light surfaces (marketing / report card / printable) */ --paper: #F4EFE5; /* ivory paper — landing, reports, blog */ --paper-2: #ECE5D6; /* one shade darker — section bands */ --paper-ink: #14201A; /* near-black emerald for text on paper */ /* The four meaningful colors */ --money: #2BB67D; /* vivid emerald — gains, growth, positive deltas */ --money-soft: rgba(43,182,125,0.12); --money-glow: rgba(43,182,125,0.30); --gold: #D4AF6A; /* champagne — the only accent. Use ≤ 5% surface. */ --gold-soft: rgba(212,175,106,0.10); --warning: #E66E5C; /* terracotta — losses, warnings, debt */ --warning-soft: rgba(230,110,92,0.10); --sage: #8FA092; /* muted green-gray for body text on dark */ /* Text on dark surfaces */ --ink: #F0EDE2; /* off-white with a warm bias — never pure white */ --ink-2: #B8C2BC; /* secondary */ --ink-3: #8A988F; /* tertiary, captions — WCAG AA at 13px (≈5.4:1 vs canvas) — LP-P1-A11Y-2 */ --ink-4: #3F4A44; /* almost-disabled */ /* Lines */ --line: rgba(240,237,226,0.06); --line-2: rgba(240,237,226,0.10); --line-3: rgba(240,237,226,0.18); /* ── Typography ───────────────────────────────────────────────────────── */ /* Fonts loaded by each page from Google Fonts — see Wave 3 boilerplate */ --font-display: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-body: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; /* Type scale — modular 1.25 ratio, 16px base */ --t-11: 0.6875rem; /* meta, eyebrows */ --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-15: 0.9375rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-24: 1.5rem; --t-30: 1.875rem; --t-36: 2.25rem; --t-48: 3rem; --t-60: 3.75rem; --t-80: 5rem; --t-96: 6rem; /* ── Spacing (8pt grid) ───────────────────────────────────────────────── */ --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; /* ── Radius ───────────────────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ── Shadow / Glow ────────────────────────────────────────────────────── */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 20px rgba(0,0,0,0.32); --shadow-3: 0 18px 60px rgba(0,0,0,0.50); --glow-money: 0 0 0 1px rgba(43,182,125,0.30), 0 12px 40px rgba(43,182,125,0.18); --glow-gold: 0 0 0 1px rgba(212,175,106,0.30), 0 12px 40px rgba(212,175,106,0.16); /* ── Motion ───────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1); --ease-finance: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 120ms; --t-base: 220ms; --t-slow: 420ms; --t-stately: 700ms; /* for compound-curve drawing, gauge needles */ /* ── Wave-2 token additions (Sprint 2 — additive, do not modify above) ── Spec: profinancecast-reports/03-design-overhaul.md New names so they don't collide with the existing --s-*, --r-*, --t-* scales. Existing pages keep working; new components opt in by name. ──────────────────────────────────────────────────────────────────── */ /* Spacing scale (4px base, parallel to --s-* but allows clamp() math) */ --space-0: 0; --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; /* Radius scale (parallel to --r-*) */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Elevation — dark-canvas-safe, inset strokes (drop shadows are invisible on #0B1410). Use these for cards/modals on dark surfaces. */ --elev-0: none; --elev-1: 0 0 0 1px rgba(244,239,229,0.06) inset; --elev-2: 0 0 0 1px rgba(244,239,229,0.10) inset, 0 1px 0 rgba(212,175,106,0.18) inset; --elev-3: 0 24px 60px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(244,239,229,0.08) inset; --elev-hover: 0 0 0 1px rgba(212,175,106,0.45) inset; /* champagne hairline */ /* Motion durations (parallel to --t-*) */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-curve: 1600ms; /* Type scale */ --type-display-xl: clamp(48px, 7vw, 96px); --type-display-lg: clamp(36px, 5vw, 64px); --type-display-md: clamp(28px, 3.5vw, 44px); --type-body-lg: 18px; --type-body: 16px; --type-body-sm: 14px; --type-meta: 12px; --type-numeric-xl: 56px; --type-numeric-lg: 32px; --type-numeric: 18px; /* Tabular numerics — apply via .num / [data-num] in pfc-app.css */ --feat-numeric: "tnum" 1, "ss01" 1; /* Ink surfaces — semantic aliases for opacity-stepped ivory text */ --pfc-ink-strong: #F4EFE5; --pfc-ink: rgba(244, 239, 229, 0.86); --pfc-ink-muted: rgba(244, 239, 229, 0.62); --pfc-ink-faint: rgba(244, 239, 229, 0.38); --pfc-line: rgba(244, 239, 229, 0.10); --pfc-line-strong: rgba(244, 239, 229, 0.18); --pfc-gold-soft: rgba(212, 175, 106, 0.18); /* `pfc-` prefixed aliases for the brand palette and font stacks. The core vars above are unprefixed (--canvas, --money, --gold, etc.) for historical reasons; new pages tend to reach for the `pfc-` namespace by symmetry with `--pfc-ink-*`. These aliases make either form work so we don't get silently-undefined `var(--pfc-canvas)` failures. */ --pfc-canvas: var(--canvas); --pfc-surface: var(--surface); --pfc-ivory: var(--paper); --pfc-paper: var(--paper); --pfc-emerald: var(--money); --pfc-gold: var(--gold); --pfc-terracotta: var(--warning); --pfc-display: var(--font-display); --pfc-body: var(--font-body); --pfc-mono: var(--font-mono); /* Container widths */ --container-narrow: 720px; --container: 1080px; --container-wide: 1280px; /* ── W1-D · Final 4-axis token block (Sprint 5) ─────────────────────── Canonical `--pfc-*` namespace. New components opt in here. Coexists with --s-*, --r-*, --t-*, --space-*, --radius-* above so legacy pages keep rendering unchanged. ──────────────────────────────────────────────────────────────────── */ /* Spacing — 7-step + sub */ --pfc-space-0: 0; --pfc-space-1: 4px; --pfc-space-2: 8px; --pfc-space-3: 16px; --pfc-space-4: 24px; --pfc-space-5: 32px; --pfc-space-6: 48px; --pfc-space-7: 96px; /* Radius — 3 steps + pill (12px standard = Monarch grammar) */ --pfc-radius-sharp: 4px; --pfc-radius-standard: 12px; --pfc-radius-rounded: 20px; --pfc-radius-pill: 999px; /* Elevation — 3 inset-stroke variants. Gold = hover signal. */ --pfc-elev-ambient: 0 0 0 1px rgba(244,239,229,0.08) inset; --pfc-elev-raised: 0 0 0 1px rgba(244,239,229,0.10) inset, 0 18px 48px -24px rgba(0,0,0,0.55); --pfc-elev-gold: 0 0 0 1px rgba(212,175,106,0.45) inset; /* Motion — 4 durations × 4 easings */ --pfc-dur-micro: 120ms; --pfc-dur-standard: 240ms; --pfc-dur-settle: 480ms; --pfc-dur-hero: 1600ms; --pfc-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --pfc-ease-micro: cubic-bezier(0.65, 0, 0.35, 1); --pfc-ease-hero: cubic-bezier(0.16, 1, 0.3, 1); --pfc-ease-settle: cubic-bezier(0.34, 1.5, 0.64, 1); /* ── Legacy mapping ──────────────────────────────────────────────────── Old pages used --bg, --text, --teal, --card etc. We map those to new tokens so the existing inline CSS still renders, but in the new palette. ────────────────────────────────────────────────────────────────────── */ --bg: var(--canvas); --bg2: var(--surface); --bg3: var(--surface-2); --card: var(--surface); --border: var(--line); --border2: var(--line-2); --teal: var(--money); --teal-dim: var(--money-soft); --teal-glow: var(--money-glow); --text: var(--ink); --text2: var(--ink-2); --text3: var(--ink-3); --amber: var(--gold); --red: var(--warning); --blue: #6B9CB7; --purple: #9F8FB7; --green: var(--money); --r: var(--r-md); /* --r-sm aliased to itself was a no-op; tokens above already define --r-sm */ } /* ── Surface contexts (Wave 2) ────────────────────────────────────────── Apply via on report-card.html, blog posts, and other paper-style pages. Inverts the ink scale so dark text is readable on the ivory background. ────────────────────────────────────────────────────────────────────── */ [data-surface="ivory"] { --pfc-ink-strong: #1A2520; --pfc-ink: rgba(26, 37, 32, 0.86); --pfc-ink-muted: rgba(26, 37, 32, 0.62); --pfc-ink-faint: rgba(26, 37, 32, 0.38); --pfc-line: rgba(26, 37, 32, 0.10); --pfc-line-strong: rgba(26, 37, 32, 0.18); --pfc-canvas: var(--paper); /* on ivory paper, canvas = paper */ } /* ── Reduced motion: kill animations cleanly ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --pfc-dur-micro: 0.01ms; --pfc-dur-standard: 0.01ms; --pfc-dur-settle: 0.01ms; --pfc-dur-hero: 0.01ms; --dur-instant: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-curve: 0.01ms; --t-fast: 0.01ms; --t-base: 0.01ms; --t-slow: 0.01ms; --t-stately: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ════════════════════════════════════════════════════════════════════════ Reusable atoms ════════════════════════════════════════════════════════════════════════ */ /* Cards */ .pfc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); } .pfc-card-hover { transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); will-change: transform; } .pfc-card-hover:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: var(--shadow-2); } /* Numerical values — always use mono with tabular figures */ .pfc-num, [data-num] { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; } /* Subtle focus ring */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--money); outline-offset: 2px; border-radius: var(--r-xs); } /* Pro-locked elements (used by pfc-entitlements.js) */ [data-pro-only].is-locked, [data-pro-action].is-locked { position: relative; } [data-pro-only].is-locked::after, [data-pro-action].is-locked::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 50%), repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 10px, transparent 10px, transparent 20px); pointer-events: none; } [data-pro-only].is-locked::before, [data-pro-action].is-locked::before { content: '✦ Pro'; position: absolute; top: 8px; right: 8px; font-family: var(--font-mono); font-size: var(--t-11); background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,175,106,0.25); padding: 2px 8px; border-radius: var(--r-pill); pointer-events: none; z-index: 2; } /* Sidebar nav links already render their own Pro. Suppress the card-style ::before/::after lock overlay there to avoid the double-badge + diagonal-stripe artifact on the legacy and pfc-* sidebars. */ .nav-item[data-pro-only].is-locked::before, .nav-item[data-pro-only].is-locked::after, .pfc-nav-item[data-pro-only].is-locked::before, .pfc-nav-item[data-pro-only].is-locked::after { content: none; background: none; border: none; } /* Reveal-on-scroll utility (paired with pfc-motion or any IO) */ @keyframes pfc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } [data-anim="rise"] { animation: pfc-rise var(--t-stately) var(--ease-out) both; } /* ── PFC brand mark (May 2026 refresh) ───────────────────────────────── Single canonical class for the new "PFC" wordmark icon that replaces the previous gold-key SVG (marketing pages) and the boxed "PF" tile (app sidebars). Used inside the existing .logo / .nav-logo anchors — drops the box/gradient styling that .logo-mark previously imposed, because the new mark IS its own typographic identity rather than an icon-in-a-box. Inline SVG inside this span uses Fraunces serif text in --gold (#D4AF6A) with a small diamond accent that echoes the diamond divider in the full lockup at /assets/img/logo-pfc.svg. ──────────────────────────────────────────────────────────────────── */ .pfc-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 32px; flex-shrink: 0; background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; color: var(--gold); } .pfc-brand-mark svg { height: 100%; width: auto; display: block; overflow: visible; } /* The "tick" of an animated counter cell */ @keyframes pfc-pulse { 0% { box-shadow: 0 0 0 0 rgba(43,182,125,0.35); } 100% { box-shadow: 0 0 0 14px rgba(43,182,125,0); } } .pfc-pulse { animation: pfc-pulse 1.4s var(--ease-out) infinite; }