/* ============================================================================ PERSPICUA INVESTMENTS — Colors & Type Clarity is capital. FONT LOADING ------------ Space Mono and Bricolage Grotesque are bundled locally (see @font-face below; files in /fonts/). Nunito is loaded from Google Fonts. Add to : NOTE: cormorant garamond TTFs are present in /fonts/ but are NOT used by this system — they don't match any spec'd family. See README. ============================================================================ */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/SpaceMono-Regular.ttf') format('truetype'); } @font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/SpaceMono-Italic.ttf') format('truetype'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/SpaceMono-Bold.ttf') format('truetype'); } @font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/SpaceMono-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations'); } :root { /* ——— COLOR: PRIMARY PALETTE ——————————————————————————————————————————— */ --paper: #F4EFE3; /* Primary light bg */ --linen: #EDE8D8; /* Cards, alt sections on light */ --charcoal: #1A1A18; /* Dark bg, body text on light */ --ember: #282821; /* Alt dark sections, footers */ /* ——— COLOR: BRAND ————————————————————————————————————————————————————— */ --chartreuse: #7AB800; /* Primary brand. CTAs, active states */ --canopy: #5F9000; /* Chartreuse hover/pressed */ --lichen: #D6EC85; /* Tags, pills on dark */ /* ——— COLOR: ACCENT ——————————————————————————————————————————————————— */ --terra: #C94C1E; /* Alerts, urgency. Selective only */ --blush: #F2C4A8; /* Terra tint on light */ /* ——— COLOR: NEUTRAL & BOTANICAL ————————————————————————————————————— */ --sage: #8B9E6A; /* Secondary text on dark, dividers */ --stone: #9A9680; /* Captions, metadata, tertiary text */ --pebble: #C8C4B4; /* Borders, rules on light */ /* ——— COLOR: SEMANTIC ————————————————————————————————————————————————— */ --color-success: var(--chartreuse); --color-alert: var(--terra); --color-warning: #C8A000; --color-neutral: var(--stone); /* ——— SEMANTIC: FG / BG (light surface, default) ——————————————————————— */ --bg-1: var(--paper); /* page */ --bg-2: var(--linen); /* card / inset */ --fg-1: var(--charcoal); /* primary text */ --fg-2: var(--stone); /* secondary text, metadata */ --fg-3: var(--pebble); /* hairline rules */ --accent: var(--chartreuse); --rule: var(--pebble); /* ——— TYPE: FAMILIES ————————————————————————————————————————————————— */ --font-display: 'Bricolage Grotesque', 'Trebuchet MS', 'Gill Sans', Arial, sans-serif; --font-body: 'Nunito', 'Optima', 'Segoe UI', Arial, sans-serif; --font-data: 'Space Mono', 'Courier New', monospace; --serif-display: var(--font-display); /* alias */ /* ——— TYPE: SCALE ——————————————————————————————————————————————————— */ --fs-h1: clamp(52px, 9vw, 120px); --fs-h2: clamp(36px, 4.5vw, 64px); --fs-h3: clamp(22px, 2.5vw, 32px); --fs-h4: 18px; --fs-body: 17px; --fs-lead: 20px; --fs-caption: 12px; --fs-label: 10px; --fs-data: 14px; /* ——— TYPE: LINE HEIGHT ———————————————————————————————————————————— */ --lh-h1: 0.93; --lh-h2: 1.05; --lh-h3: 1.15; --lh-h4: 1.3; --lh-body: 1.65; --lh-lead: 1.55; --lh-caption: 1.5; --lh-label: 1.4; --lh-data: 1.4; /* ——— TYPE: TRACKING ——————————————————————————————————————————————— */ --ls-h1: -0.025em; --ls-h2: -0.02em; --ls-h3: -0.01em; --ls-h4: 0; --ls-body: 0; --ls-lead: 0; --ls-caption: 0; --ls-label: 0.15em; --ls-data: 0; /* ——— TYPE: WEIGHTS ———————————————————————————————————————————————— */ --fw-light: 300; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ——— SPACING ———————————————————————————————————————————————————————— */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --grid-columns: 12; --grid-gutter: 24px; --grid-margin: 48px; /* ——— BORDERS / RADII ——————————————————————————————————————————————— */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --border-thin: 0.5px; --border-icon: 1.5px; /* ——— SHADOWS (used sparingly — Perspicua is shadow-light) ———————— */ --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.05); --shadow-md: 0 4px 6px rgba(26, 26, 24, 0.10); --shadow-lg: 0 10px 15px rgba(26, 26, 24, 0.15); /* ——— MOTION ———————————————————————————————————————————————————————— */ --easing-organic: cubic-bezier(0.22, 1, 0.36, 1); --duration-enter: 0.6s; --duration-hover: 200ms; --stagger-delay: 80ms; } /* Dark surface override — use on Charcoal/Ember sections */ .surface-dark { --bg-1: var(--charcoal); --bg-2: var(--ember); --fg-1: var(--paper); --fg-2: var(--sage); --fg-3: var(--ember); --rule: var(--sage); background-color: var(--bg-1); color: var(--fg-1); } /* ============================================================================ SEMANTIC ELEMENTS ============================================================================ */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); margin: 0; } h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); margin: 0; } h4, .h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); margin: 0; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; } .lead { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-lead); } .caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-2); } .data, .metric { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--ls-data); } .label, .eyebrow { font-family: var(--font-data); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); } code, pre { font-family: var(--font-data); font-size: 0.95em; } a { color: var(--chartreuse); text-decoration: none; transition: color var(--duration-hover) var(--easing-organic); } a:hover { color: var(--canopy); } hr, .divider { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* ============================================================================ COLOR UTILITIES (verbatim from variable file) ============================================================================ */ .text-charcoal { color: var(--charcoal); } .text-paper { color: var(--paper); } .text-stone { color: var(--stone); } .text-sage { color: var(--sage); } .text-chartreuse { color: var(--chartreuse); } .text-terra { color: var(--terra); } .bg-paper { background-color: var(--paper); } .bg-linen { background-color: var(--linen); } .bg-charcoal { background-color: var(--charcoal); } .bg-ember { background-color: var(--ember); } .bg-sage { background-color: var(--sage); } /* ============================================================================ BUTTONS — Primary (chartreuse) / Secondary (outline) ============================================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-semibold); padding: 14px 22px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background-color var(--duration-hover) var(--easing-organic), color var(--duration-hover) var(--easing-organic), border-color var(--duration-hover) var(--easing-organic); line-height: 1; } .btn-primary { background-color: var(--chartreuse); color: var(--charcoal); } .btn-primary:hover { background-color: var(--canopy); } .btn-primary:active { background-color: var(--chartreuse); } .btn-secondary { background-color: transparent; color: var(--charcoal); border-color: var(--pebble); } .btn-secondary:hover { border-color: var(--charcoal); background-color: var(--linen); } .surface-dark .btn-secondary { color: var(--paper); border-color: var(--sage); } .surface-dark .btn-secondary:hover { border-color: var(--paper); background-color: var(--ember); } /* ============================================================================ BORDERS / TAGS ============================================================================ */ .border-default { border: 1px solid var(--pebble); } .border-dark { border: 1px solid var(--charcoal); } .tag { display: inline-block; font-family: var(--font-data); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--pebble); border-radius: var(--radius-sm); color: var(--charcoal); } .surface-dark .tag { border-color: var(--sage); color: var(--lichen); }