/* ========================================================================== Altair Capital Group — Design Tokens Colors + Typography foundations ========================================================================== */ /* ---------- FONTS ---------- */ @font-face { font-family: "Monstar"; src: url("../fonts/Monstar.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Glacial Indifference"; src: url("../fonts/GlacialIndifference-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Glacial Indifference"; src: url("../fonts/GlacialIndifference-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---------- CORE COLOR PALETTE ---------- Altair's identity is near-black ink + bone-white paper. The dark is a deep blue-black derived from the logo (#1B2131). Accents are warm creams + a muted gold for editorial warmth. */ /* Ink / primary dark (from logo) */ --ink-900: #0F1320; /* Deepest ink — footers, hero overlays */ --ink-800: #1B2131; /* Logo color — primary brand dark */ --ink-700: #2A3144; /* Secondary dark — body text alt */ --ink-600: #3D4358; /* Subtle text on light */ --ink-500: #5B6276; /* Muted body copy */ --ink-400: #8A8F9E; /* Tertiary text, captions */ --ink-300: #B8BCC6; /* Disabled, dividers on dark */ --ink-200: #D9DCE2; /* Hairline borders */ --ink-100: #EDEEF1; /* Subtle backgrounds */ /* Paper / neutrals */ --paper: #FFFFFF; --paper-warm: #FAF8F4; /* Warm off-white, editorial bg */ --paper-cream: #F2EDE3; /* Cream section bg */ --paper-stone: #E8E2D4; /* Stone accent bg */ /* Accent — muted editorial gold (capital/finance gravitas) */ --gold-600: #8A6F3D; --gold-500: #A8894E; /* Primary gold accent */ --gold-400: #C4A878; --gold-300: #DCC8A3; --gold-100: #F1E8D4; /* Semantic */ --success: #3E7D5B; --warning: #B8894A; --error: #A0443A; --info: #4A617E; /* ---------- SEMANTIC COLOR TOKENS ---------- */ --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-elevated: var(--paper); --bg-inverse: var(--ink-800); --bg-inverse-deep: var(--ink-900); --fg: var(--ink-800); /* Primary text */ --fg-1: var(--ink-800); --fg-2: var(--ink-600); /* Secondary */ --fg-3: var(--ink-500); /* Muted */ --fg-4: var(--ink-400); /* Tertiary / captions */ --fg-inverse: var(--paper); --fg-inverse-2: var(--ink-300); --accent: var(--gold-500); --accent-hover: var(--gold-600); --border: var(--ink-200); --border-strong: var(--ink-300); --border-ink: var(--ink-800); /* 1px black hairlines — editorial */ --divider: var(--ink-100); /* ---------- TYPE FAMILIES ---------- Monstar: high-contrast didone display serif — used as wordmark + editorial display. Glacial Indifference: geometric sans (Futura-ish) — all body, UI, and small caps. System serif fallback for long-form prose if Monstar is too stylized. */ --font-display: "Monstar", "Bodoni Moda", "Didot", "Playfair Display", "Times New Roman", serif; --font-sans: "Glacial Indifference", "Futura", "Avenir Next", "Century Gothic", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* ---------- TYPE SCALE ---------- Editorial, generous. Display uses large negative letterspacing for Monstar's didone proportions. Sans uses wide tracking in caps (eyebrows/labels) — a signature of the Altair wordmark. */ --fs-display-1: clamp(64px, 9vw, 128px); --fs-display-2: clamp(48px, 6.5vw, 88px); --fs-h1: clamp(40px, 5vw, 64px); --fs-h2: clamp(32px, 3.6vw, 48px); --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-body-lg: 19px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-eyebrow: 11px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-display: -0.02em; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; /* Signature Altair eyebrow tracking */ --ls-widest: 0.28em; /* Wordmark-level tracking */ /* ---------- 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; --s-11: 160px; /* ---------- RADII ---------- Altair is architectural, near-square. Radii are minimal. No pill buttons; no pillowy cards. */ --radius-0: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ---------- SHADOWS ---------- Editorial flat. One soft card elevation, one hard overlay. No colorful glows. */ --shadow-0: none; --shadow-sm: 0 1px 2px rgba(15, 19, 32, 0.04); --shadow-md: 0 6px 18px rgba(15, 19, 32, 0.06), 0 1px 2px rgba(15, 19, 32, 0.05); --shadow-lg: 0 24px 48px rgba(15, 19, 32, 0.10), 0 4px 12px rgba(15, 19, 32, 0.06); --shadow-inset: inset 0 0 0 1px var(--ink-200); --shadow-ink: inset 0 0 0 1px var(--ink-800); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-editorial: cubic-bezier(0.65, 0, 0.15, 1); --dur-fast: 160ms; --dur-med: 280ms; --dur-slow: 520ms; /* ---------- LAYOUT ---------- */ --container-narrow: 720px; --container: 1200px; --container-wide: 1440px; --gutter: clamp(20px, 4vw, 48px); } /* ========================================================================== SEMANTIC TYPE STYLES Apply to real elements, or use helper classes. ========================================================================== */ html { color: var(--fg); background: var(--bg); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display — for hero wordmarks, massive editorial headlines. Monstar has no lowercase character set designed for body use; reserve for uppercase. */ .t-display-1, .t-display-2 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg-1); text-transform: uppercase; } .t-display-1 { font-size: var(--fs-display-1); } .t-display-2 { font-size: var(--fs-display-2); } /* Headlines — sans, editorial weight */ h1, .t-h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--fg-1); } h2, .t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--fg-1); } h3, .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: var(--ls-normal); text-transform: uppercase; color: var(--fg-1); } h4, .t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-normal); color: var(--fg-1); } h5, .t-h5 { font-family: var(--font-sans); font-size: var(--fs-h5); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-1); } /* Eyebrow — tiny tracked caps above section headlines. Signature. */ .t-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-2); } /* Body */ p, .t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); } .t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } .t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); } .t-caption { font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-3); } /* Wordmark-style all-caps label (extreme tracking, like the logo) */ .t-wordmark { font-family: var(--font-sans); font-weight: 400; letter-spacing: var(--ls-widest); text-transform: uppercase; } /* Selection — subtle gold wash */ ::selection { background: var(--gold-300); color: var(--ink-900); }