/* ========================================================================== OneTeam Aviation Marketing — design tokens Colors + type lifted from the NAMED STYLES in the OT Website Figma file, cross-checked against OT Brand Presentation v1.0 (October 2026). Spec: https://claude.ai/code/artifact/2bc69ba1-c01b-4909-b364-55ac12c8ac88 ========================================================================== */ /* --- Typefaces ----------------------------------------------------------- */ /* Aperitif Serif — licensed to OneTeam, confirmed 2026-10-13. Regular + Italic only; there is no bold cut, and synthetic bold is disabled below. NOTE: the Figma file is set in "Aperitif Serif Demo"; we ship the licensed cut. Glyphs match, but check headline wraps against the comp. */ @font-face { font-family: 'Aperitif Serif'; src: url('../fonts/AperitifSerif-Regular.woff2') format('woff2'), url('../fonts/AperitifSerif-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Aperitif Serif'; src: url('../fonts/AperitifSerif-Italic.woff2') format('woff2'), url('../fonts/AperitifSerif-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } :root { /* --- Brand/Colors (named styles — closed set) --------------------------- */ --ivory: #FAF1E1; --deep-teal: #0C292C; --midnight: #171C1E; --aviation-teal: #1F4951; /* in the brand deck, unused in this comp */ --copper: #C05123; --cognac: #702401; --sandstone: #D4BDA2; /* Page ground. Deliberately NOT Ivory: the comp sets the body to a cooler off-white so Ivory can act as a highlight (see the first pillar row). This is the one value outside the named palette — flagged for Jena. */ --paper: #F6F2EC; /* Placeholder fill for imagery not yet supplied. Not a brand color — every instance is swapped for a real asset before launch. */ --placeholder: #D9D9D9; /* --- Tints: 20% steps. Below 60% on a background needs dark text. ------- */ --copper-60: color-mix(in srgb, var(--copper) 60%, var(--ivory)); --copper-40: color-mix(in srgb, var(--copper) 40%, var(--ivory)); --copper-20: color-mix(in srgb, var(--copper) 20%, var(--ivory)); --sandstone-40: color-mix(in srgb, var(--sandstone) 40%, var(--ivory)); /* --- Semantic roles ----------------------------------------------------- */ --bg: var(--ivory); --bg-dark: var(--deep-teal); --bg-deepest: var(--midnight); --bg-quote: var(--cognac); --text: var(--deep-teal); --text-on-dark: var(--ivory); --text-muted-dark: var(--sandstone); --accent: var(--copper); --accent-hover: var(--cognac); --rule: color-mix(in srgb, var(--deep-teal) 25%, var(--ivory)); --rule-on-dark: color-mix(in srgb, var(--sandstone) 40%, transparent); /* --- Type families ------------------------------------------------------ */ --font-display: 'Aperitif Serif', 'Iowan Old Style', Georgia, serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- Brand/Typography (named styles) — desktop -------------------------- */ /* H1 Aperitif Regular 90/87 0 */ --fs-h1: 90px; --lh-h1: 87px; --ls-h1: 0; /* H2 Aperitif Regular 75/83 0 */ --fs-h2: 75px; --lh-h2: 83px; --ls-h2: 0; /* H3 Aperitif Regular 55/61 0 */ --fs-h3: 55px; --lh-h3: 61px; --ls-h3: 0; /* H5 Aperitif Regular 28/40 0 */ --fs-h5: 28px; --lh-h5: 40px; --ls-h5: 0; /* H4 · Eyebrow DM Sans Bold 20/34 +2 */ --fs-eyebrow: 20px; --lh-eyebrow: 34px; --ls-eyebrow: 2px; /* H6 DM Sans Regular 26/40 -0.5 */ --fs-h6: 26px; --lh-h6: 40px; --ls-h6: -0.5px; /* Body/Regular DM Sans Regular 18/31 -0.5 */ --fs-body: 18px; --lh-body: 31px; --ls-body: -0.5px; /* Body/Small DM Sans Regular 17/29 -0.5 */ --fs-small: 17px; --lh-small: 29px; --ls-small: -0.5px; /* UI/Nav & Button DM Sans Bold 16 +2.5 */ --fs-ui: 16px; --ls-ui: 2.5px; /* Stat number — ad hoc in the comp, Aperitif Regular 200/87 in Copper */ --fs-stat: 200px; --lh-stat: 87px; /* --- Spacing: 8px base, derived from the comp --------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-30: 120px; --space-40: 160px; --section-y: var(--space-30); --section-y-major: var(--space-40); --gutter: 41px; /* from the comp's 4-up team grid */ /* --- Layout ------------------------------------------------------------- */ --container: 1222px; /* the comp's content column inside a 1920 frame */ --measure: 68ch; /* body copy never runs wider */ --pad-side: 24px; /* --- Components --------------------------------------------------------- */ --button-h: 54px; --button-radius: 999px; /* full pill, per the comp */ --field-h: 54px; /* --- Motion: restrained, per "quietly-luxurious" ------------------------ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-hover: 200ms; --dur-enter: 400ms; } @media (min-width: 768px) { :root { --pad-side: 48px; } } @media (min-width: 1024px) { :root { --pad-side: 64px; } } /* --- Mobile ramp (<768). Scaled from the named styles; Jena to review. ---- */ @media (max-width: 767px) { :root { --fs-h1: 42px; --lh-h1: 46px; --fs-h2: 34px; --lh-h2: 39px; --fs-h3: 30px; --lh-h3: 36px; --fs-h5: 22px; --lh-h5: 32px; --fs-eyebrow: 16px; --lh-eyebrow: 26px; --ls-eyebrow: 1.6px; --fs-h6: 20px; --lh-h6: 30px; --fs-body: 17px; --lh-body: 29px; --fs-small: 16px; --lh-small: 27px; --fs-ui: 15px; --ls-ui: 2px; --fs-stat: 72px; --lh-stat: 72px; --section-y: var(--space-16); --section-y-major: var(--space-20); --gutter: var(--space-6); --button-h: 52px; } } /* --- Tablet ramp (768–1199) ----------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { :root { --fs-h1: 64px; --lh-h1: 64px; --fs-h2: 52px; --lh-h2: 58px; --fs-h3: 40px; --lh-h3: 46px; --fs-h5: 24px; --lh-h5: 34px; --fs-h6: 22px; --lh-h6: 34px; --fs-stat: 120px; --lh-stat: 110px; --section-y: var(--space-20); --section-y-major: var(--space-30); } } @media (prefers-reduced-motion: reduce) { :root { --dur-hover: 0ms; --dur-enter: 0ms; } }