/* ============================================================================ Aircraft Executives — Marketing Design System tokens.css — design tokens (foundations + components) Surface scope: public marketing web only. Light is primary; dark is a first-class secondary mode. Tokens drive the entire system. Component classes are CSS-only — no JavaScript except the Tweaks panel and the FAQ accordion (one listener each). Drop this file into any prototype; data-theme + data-accent on control the entire surface. ============================================================================ */ /* ───── 1. FONTS ─────────────────────────────────────────────────────────── */ /* Source Serif 4 — display + body. Variable optical-size 8–60. */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap"); /* Inter — UI labels (eyebrows, buttons, nav). 400/500/600. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); /* Palatino is system; falls back through Charter, Georgia. No webfont. */ /* ───── 2. TOKENS — LIGHT (primary) ─────────────────────────────────────── */ :root, [data-theme="light"] { /* Type families */ --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Source Serif 4", Georgia, "Times New Roman", serif; --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-numeric: Palatino, "Palatino Linotype", "Book Antiqua", Charter, serif; /* Surfaces — warm cream, three tiers */ --bg: #F6F4EF; /* page */ --raised: #EFECE4; /* cards, callouts */ --overlay: #E7E3D9; /* tooltips, dropdown menus */ --rule: #D9D3C5; /* hairlines */ --rule-soft: #E8E3D6; /* sub-hairlines */ --rule-strong: #1A1614; /* terminal hairline */ /* Ink */ --ink: #1A1614; /* primary body text */ --ink-2: #4A423B; /* secondary text */ --ink-3: #7A716A; /* tertiary, captions, eyebrows in muted contexts */ --ink-inverse: #F6F4EF; /* Accent — muted gold, deepened for AA on cream */ --gold: #8A7450; /* link, eyebrow, pressed states */ --gold-mute: #B79F73; /* hairline rules, secondary accent */ --gold-tint: #EFE6D2; /* tile / pull-quote backgrounds */ /* Semantic — desaturated museum-card hues */ --ok: #4A7558; /* sage */ --warn: #8A7450; /* gold doubles as warn — never red */ --bad: #8A3F3F; /* rust-red */ --info: #5A7798; /* slate-blue */ /* Tile backgrounds (3% washes of the above) */ --tile-bg-good: rgba(74,117,88,0.05); --tile-bg-warn: rgba(138,116,80,0.06); --tile-bg-bad: rgba(138,63,63,0.05); --tile-bg-info: rgba(90,119,152,0.05); /* Data viz palette — print-safe, desaturated */ --data-1: #5A7798; /* slate-blue */ --data-2: #4A7558; /* sage */ --data-3: #8A7450; /* gold */ --data-4: #8A3F3F; /* rust */ --data-5: #6B4E71; /* plum */ /* Shadow — flat hairlines preferred; reserve shadow for menus */ --shadow-sm: 0 1px 0 rgba(26,22,20,0.04); --shadow-md: 0 8px 24px rgba(26,22,20,0.08); --shadow-lg: 0 24px 56px rgba(26,22,20,0.12); /* Selection */ --selection-bg: var(--gold); --selection-fg: var(--ink-inverse); /* Photography overlay — for type-on-image. Two layered gradients: bottom-heavy (protects text anchored at bottom) plus left-heavy (extra coverage where the title and lede sit). */ --photo-overlay: linear-gradient(to top, rgba(15,14,13,0.80) 0%, rgba(15,14,13,0.55) 25%, rgba(15,14,13,0.18) 55%, rgba(15,14,13,0.00) 90%), linear-gradient(to right, rgba(15,14,13,0.45) 0%, rgba(15,14,13,0.00) 55%); } /* ───── 3. TOKENS — DARK (secondary) ────────────────────────────────────── */ [data-theme="dark"] { --bg: #0F0E0D; --raised: #161513; --overlay: #1E1C1A; --rule: #2A2825; --rule-soft: #1F1D1B; --rule-strong: #EDE7DD; --ink: #EDE7DD; --ink-2: #A8A29E; --ink-3: #78716C; --ink-inverse: #0F0E0D; --gold: #C9A96E; --gold-mute: #8A7450; --gold-tint: #1F1A12; --ok: #7AAA8A; --warn: #C9A96E; --bad: #C97070; --info: #8FA8C2; --tile-bg-good: rgba(122,170,138,0.06); --tile-bg-warn: rgba(201,169,110,0.04); --tile-bg-bad: rgba(201,112,112,0.05); --tile-bg-info: rgba(143,168,194,0.05); --data-1: #8FA8C2; --data-2: #7AAA8A; --data-3: #C9A96E; --data-4: #C97070; --data-5: #A185B0; --shadow-sm: 0 1px 0 rgba(0,0,0,0.30); --shadow-md: 0 8px 24px rgba(0,0,0,0.40); --shadow-lg: 0 24px 56px rgba(0,0,0,0.50); --selection-bg: var(--gold); --selection-fg: var(--ink-inverse); --photo-overlay: linear-gradient(to top, rgba(15,14,13,0.85) 0%, rgba(15,14,13,0.60) 25%, rgba(15,14,13,0.20) 55%, rgba(15,14,13,0.00) 90%), linear-gradient(to right, rgba(15,14,13,0.50) 0%, rgba(15,14,13,0.00) 55%); } /* ───── 4. ACCENT VARIANTS (overlay either theme) ───────────────────────── */ /* Default = gold (no override needed). Variants tune --gold + --gold-mute. */ [data-theme="light"][data-accent="sage"] { --gold: #4A6B52; --gold-mute: #8FA992; --gold-tint: #E5ECDF; } [data-theme="light"][data-accent="slate"] { --gold: #4A6079; --gold-mute: #7E94B0; --gold-tint: #DEE5EC; } [data-theme="light"][data-accent="rust"] { --gold: #7A4A38; --gold-mute: #B07560; --gold-tint: #ECDDD4; } [data-theme="light"][data-accent="plum"] { --gold: #5A4264; --gold-mute: #8E748F; --gold-tint: #E4DCE4; } [data-theme="dark"][data-accent="sage"] { --gold: #8FA992; --gold-mute: #6B8870; --gold-tint: #1A2018; } [data-theme="dark"][data-accent="slate"] { --gold: #7E94B0; --gold-mute: #5C7591; --gold-tint: #161A1F; } [data-theme="dark"][data-accent="rust"] { --gold: #B07560; --gold-mute: #8A5A48; --gold-tint: #211613; } [data-theme="dark"][data-accent="plum"] { --gold: #A185B0; --gold-mute: #7E6488; --gold-tint: #1D1620; } /* ───── 5. SPACING SCALE (8px grid) ─────────────────────────────────────── */ :root { /* Spacing — 8px grid. Scale-aware via [data-spacing]. */ --s-base: 1; /* multiplier — set by data-spacing */ --s-1: calc(4px * var(--s-base)); --s-2: calc(8px * var(--s-base)); --s-3: calc(12px * var(--s-base)); --s-4: calc(16px * var(--s-base)); --s-5: calc(20px * var(--s-base)); --s-6: calc(24px * var(--s-base)); --s-8: calc(32px * var(--s-base)); --s-10: calc(40px * var(--s-base)); --s-12: calc(48px * var(--s-base)); --s-16: calc(64px * var(--s-base)); --s-20: calc(80px * var(--s-base)); --s-24: calc(96px * var(--s-base)); --s-32: calc(128px * var(--s-base)); /* Layout widths */ --width-prose: 720px; --width-content: 1120px; --width-wide: 1320px; --width-narrow: 880px; --width-page: 1440px; /* Radii — 0 is the default. Reserved 2/4/8 only for status pills + photo crops. */ --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; --radius-pill: 9999px; /* Motion */ --dur-fast: 150ms; --dur: 250ms; --dur-slow: 350ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-page:cubic-bezier(0.25, 0.1, 0.25, 1); /* Type scale (clamps; mobile floor 17px on body) */ --t-base: 1; /* multiplier — set by data-type-scale */ --t-eyebrow: calc(11px * var(--t-base)); --t-caption: calc(13px * var(--t-base)); --t-body: calc(17px * var(--t-base)); --t-body-lg: calc(19px * var(--t-base)); --t-h5: calc(15px * var(--t-base)); --t-h4: calc(20px * var(--t-base)); --t-h3: calc(24px * var(--t-base)); --t-h2: calc(32px * var(--t-base)); --t-h1: calc(48px * var(--t-base)); --t-display: clamp(calc(40px * var(--t-base)), calc(5.2vw * var(--t-base)), calc(64px * var(--t-base))); --t-hero: clamp(calc(48px * var(--t-base)), calc(7vw * var(--t-base)), calc(88px * var(--t-base))); --t-mono: calc(13px * var(--t-base)); --tracking-eyebrow: 0.18em; --tracking-caps: 0.12em; --tracking-tight: -0.015em; } /* Spacing scale modes */ [data-spacing="tight"] { --s-base: 0.85; } [data-spacing="default"] { --s-base: 1; } [data-spacing="generous"] { --s-base: 1.18; } /* Type scale modes */ [data-type-scale="small"] { --t-base: 0.92; } [data-type-scale="default"] { --t-base: 1; } [data-type-scale="large"] { --t-base: 1.08; } /* ───── 6. RESET + BASE ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; font-feature-settings: "liga", "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } ::selection { background: var(--selection-bg); color: var(--selection-fg); } img, svg, video { display: block; max-width: 100%; height: auto; } /* Numerals — tabular by default in any element with .num */ .num, .tabular { font-family: var(--font-numeric); font-variant-numeric: lining-nums tabular-nums; } /* Base link — underline opt-in via .link or inside prose */ a { color: inherit; text-decoration: none; } .link, .prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--gold) 35%, transparent); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .link:hover, .prose a:hover { color: var(--ink); border-bottom-color: var(--ink); } /* Page container */ .page { max-width: var(--width-content); margin: 0 auto; padding: var(--s-16) var(--s-12) var(--s-24); } [data-width="narrow"] .page { max-width: var(--width-narrow); } [data-width="wide"] .page { max-width: var(--width-wide); } [data-width="page"] .page { max-width: var(--width-page); } @media (max-width: 720px) { .page { padding: var(--s-10) var(--s-6) var(--s-16); } } /* ───── 7. TYPE PRIMITIVES ──────────────────────────────────────────────── */ /* Eyebrow — all-caps, tracked, often paired with hairline */ .eyebrow { font-family: var(--font-ui); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: var(--s-3); } .eyebrow--line::before { content: ""; width: 32px; height: 1px; background: var(--gold-mute); } .eyebrow--muted { color: var(--ink-3); } /* Headlines */ .h-hero, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; margin: 0; } .h-hero { font-weight: 300; font-size: var(--t-hero); line-height: 1.02; letter-spacing: var(--tracking-tight); } .h1 { font-weight: 300; font-size: var(--t-display); line-height: 1.05; letter-spacing: var(--tracking-tight); } .h2 { font-weight: 400; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.01em; } .h3 { font-weight: 500; font-size: var(--t-h3); line-height: 1.25; } .h4 { font-weight: 500; font-size: var(--t-h4); line-height: 1.3; } .h5 { font-weight: 500; font-size: var(--t-h5); line-height: 1.4; } em.gold, .gold { color: var(--gold); font-style: italic; font-weight: inherit; } /* Body text */ p, .p { margin: 0 0 var(--s-4); color: var(--ink); text-wrap: pretty; } .lede { font-size: var(--t-body-lg); line-height: 1.5; color: var(--ink); } .body-2 { color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; } .caption { font-size: var(--t-caption); color: var(--ink-3); letter-spacing: 0.02em; } .fineprint { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } /* Prose blocks (used in articles / long-form) */ .prose { max-width: var(--width-prose); margin: 0 auto; } .prose > * + * { margin-top: var(--s-4); } .prose h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 400; line-height: 1.15; margin: var(--s-12) 0 var(--s-4); } .prose h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; margin: var(--s-10) 0 var(--s-2); } .prose p, .prose li { font-size: var(--t-body); line-height: 1.7; } .prose blockquote { border-left: 1px solid var(--gold-mute); padding: var(--s-3) var(--s-6); font-style: italic; color: var(--ink); margin: var(--s-6) 0; } .prose blockquote cite { display: block; font-style: normal; font-size: var(--t-caption); color: var(--ink-3); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-top: var(--s-2); } .prose hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-10) 0; } /* ───── 8. RULES + LAYOUT PRIMITIVES ────────────────────────────────────── */ hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-16) 0; } hr.rule-soft { border-top-color: var(--rule-soft); margin: var(--s-8) 0; } hr.rule-gold { border-top: 1px solid var(--gold-mute); width: 48px; margin: 0 0 var(--s-6); } hr.rule-strong{ border-top: 1px solid var(--rule-strong); margin: var(--s-12) 0; } /* Section header — number + eyebrow + headline */ .section-head { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-8); align-items: baseline; margin: var(--s-16) 0 var(--s-10); } .section-head .num { font-family: var(--font-numeric); font-variant-numeric: lining-nums tabular-nums; font-size: var(--t-caption); color: var(--gold); letter-spacing: 0.08em; } .section-head .head { border-top: 1px solid var(--rule); padding-top: var(--s-6); } .section-head .head .eyebrow { margin-bottom: var(--s-4); } @media (max-width: 720px) { .section-head { grid-template-columns: 1fr; gap: var(--s-3); } .section-head .head { padding-top: var(--s-4); } } /* Stack utility */ .stack { display: flex; flex-direction: column; gap: var(--s-4); } .stack-2 { display: flex; flex-direction: column; gap: var(--s-2); } .stack-6 { display: flex; flex-direction: column; gap: var(--s-6); } .stack-8 { display: flex; flex-direction: column; gap: var(--s-8); } /* Row utility */ .row { display: flex; gap: var(--s-4); align-items: center; } .row-tight { display: flex; gap: var(--s-2); align-items: center; } .row-wide { display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap; } .row-spread{ display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); } /* Grid utilities */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ───── 9. COMPONENT — BUTTONS / CTA ────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-6); font-family: var(--font-ui); font-size: var(--t-h5); font-weight: 500; letter-spacing: 0.01em; border: 1px solid var(--ink); background: var(--ink); color: var(--ink-inverse); cursor: pointer; text-decoration: none; border-radius: var(--radius-0); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: color-mix(in oklab, var(--ink) 88%, var(--gold) 12%); border-color: color-mix(in oklab, var(--ink) 88%, var(--gold) 12%); } .btn:active { opacity: 0.85; } .btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--ink-inverse); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .btn--ghost:hover { border-color: var(--ink); background: transparent; } .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink-inverse); } .btn--gold:hover { background: var(--ink); border-color: var(--ink); } .btn--lg { padding: var(--s-4) var(--s-8); font-size: var(--t-h4); } .btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; } /* Inline arrow link — preferred for tertiary actions */ .arrow-link { font-family: var(--font-ui); font-size: var(--t-h5); color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; display: inline-flex; gap: var(--s-2); align-items: baseline; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .arrow-link::after { content: "→"; font-family: var(--font-display); transition: transform var(--dur) var(--ease); } .arrow-link:hover { color: var(--gold); border-bottom-color: var(--gold); } .arrow-link:hover::after { transform: translateX(4px); } /* ───── 10. COMPONENT — STATUS BADGES ──────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 8px; border: 1px solid currentColor; background: transparent; } .badge--available { color: var(--ok); } .badge--sold { color: var(--bad); } .badge--acquired { color: var(--info); } .badge--reserved { color: var(--warn); } .badge--draft { color: var(--ink-3); } .badge--solid { background: currentColor; } .badge--solid > * { color: var(--ink-inverse); } /* ───── 11. COMPONENT — TILE / CARD ────────────────────────────────────── */ .tile { background: var(--raised); border: 1px solid var(--rule); padding: var(--s-6); } .tile--bare { background: transparent; border: 0; border-top: 1px solid var(--rule); padding: var(--s-6) 0 0; } .tile--gold-edge { background: var(--raised); border: 1px solid var(--rule); border-top: 1px solid var(--gold-mute); padding: var(--s-6); } /* Inventory card */ .inv-card { background: var(--bg); border: 1px solid var(--rule); display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease); } .inv-card:hover { border-color: var(--ink); } .inv-card .inv-card__media { aspect-ratio: 16 / 10; background: var(--overlay); position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); } .inv-card .inv-card__media img { width: 100%; height: 100%; object-fit: cover; } .inv-card .inv-card__badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; gap: var(--s-2); } .inv-card .inv-card__body { padding: var(--s-4); } .inv-card .inv-card__cat { font-family: var(--font-ui); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); } .inv-card .inv-card__title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; color: var(--ink); margin-bottom: var(--s-1); } .inv-card .inv-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-soft); font-size: var(--t-caption); } .inv-card .inv-card__meta dt { color: var(--ink-3); font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .inv-card .inv-card__meta dd { margin: 0; color: var(--ink); font-family: var(--font-numeric); font-variant-numeric: lining-nums tabular-nums; } /* ───── 12. COMPONENT — STAT ROW / DATA CALLOUT ────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stat-row__cell { padding: var(--s-6) var(--s-4); border-right: 1px solid var(--rule); } .stat-row__cell:last-child { border-right: 0; } .stat-row__label { font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); } .stat-row__value { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 300; letter-spacing: var(--tracking-tight); color: var(--ink); } .stat-row__value.num { font-family: var(--font-numeric); font-variant-numeric: lining-nums tabular-nums; } .stat-row__detail { font-size: var(--t-caption); color: var(--ink-2); margin-top: var(--s-2); line-height: 1.5; } /* ───── 13. COMPONENT — PULL QUOTE / TESTIMONIAL ───────────────────────── */ .pull { border-top: 1px solid var(--gold-mute); border-bottom: 1px solid var(--rule); padding: var(--s-10) 0; margin: var(--s-12) 0; } .pull__quote { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 300; font-style: italic; line-height: 1.25; color: var(--ink); letter-spacing: var(--tracking-tight); text-wrap: balance; max-width: var(--width-prose); } .pull__attr { margin-top: var(--s-6); display: flex; gap: var(--s-4); align-items: center; font-family: var(--font-ui); font-size: var(--t-caption); letter-spacing: 0.04em; } .pull__attr-name { color: var(--ink); font-weight: 500; } .pull__attr-meta { color: var(--ink-3); } .pull__attr-divider { color: var(--gold-mute); } /* ───── 14. COMPONENT — FAQ / DISCLOSURE ───────────────────────────────── */ .faq { border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { list-style: none; cursor: pointer; padding: var(--s-6) 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: baseline; font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; color: var(--ink); transition: color var(--dur) var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--gold); } .faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 300; font-size: var(--t-h3); color: var(--gold); transition: transform var(--dur) var(--ease); } .faq details[open] summary::after { content: "−"; } .faq details[open] summary { color: var(--gold); } .faq .faq__body { padding: 0 0 var(--s-6); color: var(--ink-2); font-size: var(--t-body); line-height: 1.7; max-width: var(--width-prose); } /* ───── 15. COMPONENT — NUMBERED PROCESS ───────────────────────────────── */ .process { display: grid; gap: 0; } .process__step { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-8); padding: var(--s-8) 0; border-top: 1px solid var(--rule); align-items: baseline; } .process__step:last-child { border-bottom: 1px solid var(--rule); } .process__num { font-family: var(--font-numeric); font-variant-numeric: lining-nums tabular-nums; font-size: var(--t-h2); font-weight: 300; color: var(--gold); letter-spacing: 0.06em; } .process__title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; color: var(--ink); margin: 0 0 var(--s-2); } .process__detail { color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; max-width: 60ch; } @media (max-width: 720px) { .process__step { grid-template-columns: 1fr; gap: var(--s-2); } } /* ───── 16. COMPONENT — CAPABILITY GRID ────────────────────────────────── */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .cap-grid__item { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-8) var(--s-6); } .cap-grid__item h3 { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; color: var(--ink); margin: 0 0 var(--s-3); text-wrap: balance; } .cap-grid__item p { color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } } /* ───── 17. COMPONENT — JOURNAL CARD ───────────────────────────────────── */ .j-card { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--rule); } .j-card__meta { font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); display: flex; gap: var(--s-3); } .j-card__meta .j-card__taxon { color: var(--gold); } .j-card__meta .j-card__author { color: var(--ink-2); } .j-card__title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; } .j-card__lede { color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; max-width: 60ch; } .j-card--featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-8); padding: var(--s-10) 0; } .j-card--featured .j-card__media { aspect-ratio: 4 / 3; background: var(--overlay); border: 1px solid var(--rule); } @media (max-width: 720px) { .j-card--featured { grid-template-columns: 1fr; } } /* ───── 18. COMPONENT — PRICING / TRANSACTION SHEET ────────────────────── */ .sheet { background: var(--raised); border: 1px solid var(--rule); padding: var(--s-8); } .sheet__head { border-bottom: 1px solid var(--rule); padding-bottom: var(--s-4); margin-bottom: var(--s-6); } .sheet__line { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; } .sheet__line:last-child { border-bottom: 0; } .sheet__line dt { color: var(--ink-2); font-size: var(--t-caption); } .sheet__line dd { margin: 0; font-family: var(--font-numeric); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); } .sheet__line--total { border-top: 1px solid var(--ink); border-bottom: 0; padding-top: var(--s-4); margin-top: var(--s-3); } .sheet__line--total dt { color: var(--ink); font-family: var(--font-ui); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .sheet__line--total dd { font-size: var(--t-h3); } /* ───── 19. COMPONENT — FORM ───────────────────────────────────────────── */ .form { display: grid; gap: var(--s-6); } .form__row { display: grid; gap: var(--s-2); } .form__row--inline { grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 600px) { .form__row--inline { grid-template-columns: 1fr; } } .form__label { font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .form__hint { font-size: var(--t-caption); color: var(--ink-3); margin-top: var(--s-1); } .form__input, .form__select, .form__textarea { background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; font-family: var(--font-display); font-size: var(--t-h5); width: 100%; transition: border-color var(--dur) var(--ease); } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-bottom-color: var(--gold); } .form__textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .form__select { appearance: none; -webkit-appearance: none; padding-right: var(--s-6); background: transparent; cursor: pointer; } /* ───── 20. COMPONENT — NAVIGATION ─────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); padding: var(--s-3) var(--s-12); display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-8); align-items: center; } .nav__logo { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 400; letter-spacing: -0.005em; color: var(--ink); display: inline-flex; align-items: center; } .nav__logo .gold { font-style: italic; color: var(--gold); } .nav__logo img { height: 44px; width: auto; display: block; } @media (max-width: 800px) { .nav__logo img { height: 36px; } } [data-theme="dark"] .nav__logo img { filter: brightness(0) invert(1); } .nav__links { display: flex; gap: var(--s-6); list-style: none; padding: 0; margin: 0; justify-content: center; } .nav__links a { font-family: var(--font-ui); font-size: var(--t-h5); color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); } .nav__cta { display: flex; gap: var(--s-3); } @media (max-width: 800px) { .nav { grid-template-columns: auto auto; padding: var(--s-3) var(--s-6); } .nav__links { display: none; } .nav__cta .btn--secondary { display: none; } } /* ───── 21. COMPONENT — FOOTER ─────────────────────────────────────────── */ .footer { background: var(--raised); border-top: 1px solid var(--rule); padding: var(--s-16) var(--s-12) var(--s-8); margin-top: var(--s-24); } .footer__grid { max-width: var(--width-content); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-8); padding-bottom: var(--s-12); border-bottom: 1px solid var(--rule); } .footer__col h5 { font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 var(--s-4); } .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); } .footer__col a { color: var(--ink); font-size: var(--t-h5); transition: color var(--dur) var(--ease); } .footer__col a:hover { color: var(--gold); } .footer__bottom { max-width: var(--width-content); margin: 0 auto; padding-top: var(--s-6); display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; font-size: var(--t-caption); color: var(--ink-3); } .footer__accred { display: flex; gap: var(--s-6); align-items: center; } .footer__accred-mark { height: 56px; width: auto; display: inline-block; vertical-align: middle; object-fit: contain; } [data-theme="dark"] .footer__accred-mark { background: #FFFFFF; padding: 6px 10px; border-radius: 4px; box-sizing: content-box; } @media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer { padding: var(--s-12) var(--s-6) var(--s-6); } } /* ───── 22. COMPONENT — HERO ───────────────────────────────────────────── */ .hero { position: relative; min-height: 80vh; display: grid; align-items: end; background: var(--ink); color: var(--ink-inverse); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); } .hero__content { position: relative; z-index: 1; max-width: var(--width-content); margin: 0 auto; padding: var(--s-24) var(--s-12) var(--s-12); width: 100%; display: grid; gap: var(--s-6); } .hero__eyebrow { color: var(--gold-mute); } .hero__eyebrow.eyebrow--line::before { background: var(--gold-mute); } .hero__title { font-family: var(--font-display); font-weight: 300; font-size: var(--t-hero); line-height: 1.02; letter-spacing: var(--tracking-tight); color: #FAFAF9; text-wrap: balance; max-width: 18ch; } .hero__lede { font-size: var(--t-body-lg); color: rgba(250,250,249,0.85); max-width: 50ch; line-height: 1.5; } .hero__cta { display: flex; gap: var(--s-3); margin-top: var(--s-2); } .hero__cta .btn { background: #FAFAF9; color: var(--ink); border-color: #FAFAF9; } .hero__cta .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-inverse); } .hero__cta .btn--secondary { background: transparent; color: #FAFAF9; border-color: #FAFAF9; } .hero__cta .btn--secondary:hover { background: #FAFAF9; color: var(--ink); } @media (max-width: 720px) { .hero__content { padding: var(--s-16) var(--s-6) var(--s-10); } .hero { min-height: 70vh; } } /* ───── 23. COMPONENT — TWEAKS PANEL ───────────────────────────────────── */ #tweaks-panel { position: fixed; right: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 9999; background: var(--raised); color: var(--ink); border: 1px solid var(--rule); font-family: var(--font-ui); font-size: 12px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 48px); overflow-y: auto; } #tweaks-panel[hidden] { display: none; } .tp-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--raised); z-index: 1; } .tp-title { font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); font-weight: 500; } .tp-close { background: transparent; border: 0; color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color var(--dur) var(--ease); } .tp-close:hover { color: var(--ink); } .tp-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-5); } .tp-section { display: flex; flex-direction: column; gap: var(--s-2); } .tp-label { font-size: 9px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .tp-radio { display: flex; gap: 0; border: 1px solid var(--rule); } .tp-radio button { flex: 1; background: transparent; border: 0; color: var(--ink-2); padding: 8px 6px; font-size: 11px; font-family: inherit; cursor: pointer; border-right: 1px solid var(--rule); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .tp-radio button:last-child { border-right: 0; } .tp-radio button:hover { color: var(--ink); } .tp-radio button[aria-pressed="true"] { background: var(--gold); color: var(--ink-inverse); font-weight: 500; } .tp-swatches { display: flex; gap: var(--s-2); } .tp-swatches button { flex: 1; background: transparent; border: 1px solid var(--rule); padding: 4px; cursor: pointer; transition: border-color var(--dur) var(--ease); height: 32px; } .tp-swatches button:hover { border-color: var(--ink-2); } .tp-swatches button[aria-pressed="true"] { border-color: var(--ink); } .tp-swatches button span { display: block; width: 100%; height: 100%; } /* ───── 24. UTILITIES ──────────────────────────────────────────────────── */ .text-ink { color: var(--ink); } .text-ink-2 { color: var(--ink-2); } .text-ink-3 { color: var(--ink-3); } .text-gold { color: var(--gold); } .bg-raised { background: var(--raised); } .bg-overlay { background: var(--overlay); } .bg-tint { background: var(--gold-tint); } .center { text-align: center; } .right { text-align: right; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); } .mt-16 { margin-top: var(--s-16); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); } .mb-12 { margin-bottom: var(--s-12); } .hide-mobile { } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media print { #tweaks-panel, .nav { display: none !important; } body { background: white; color: black; } }