/* ============================================================================= JETT — CANONICAL BRAND STYLESHEET "Prospectus" system. Single source of truth across draft.jettsports.com. Loaded by every page. Theming via body class: default. navy primary, silver accent white surface, navy ink (document interiors) navy primary, KAIA PINK accent white surface, navy ink, KAIA PINK accent Typography: Inter Tight (web analog of Söhne — print primary). JetBrains Mono for chrome and labels. No serifs. No italics. Emphasis via weight (700 vs 400). Authored: April 2026. ============================================================================= */ /* ----------------------------------------------------------------------------- FONTS — load once, available everywhere. ----------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================================= TOKENS — raw values, not used directly by components. ============================================================================= */ :root { /* Brand palette */ --jett-navy: #091122; --jett-navy-deep: #050912; --jett-navy-lift: #0F1923; --jett-navy-card: #111d33; --jett-navy-soft: #1A2540; --jett-white: #FFFFFF; --jett-off-white: #F4F5F7; --jett-silver: #9C9C9C; --jett-silver-lt: #C8C8C8; /* Variant accents */ --jett-pink: #EC4899; --jett-pink-deep: #BE185D; --jett-pink-soft: rgba(236, 72, 153, 0.18); --jett-pink-line: rgba(236, 72, 153, 0.35); /* Type stacks */ --jett-font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --jett-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --jett-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Type scale (fluid) — Inter Tight, no serif */ --jett-step--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem); --jett-step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.90rem); --jett-step-0: clamp(0.95rem, 0.92rem + 0.20vw, 1.05rem); --jett-step-1: clamp(1.10rem, 1.04rem + 0.30vw, 1.25rem); --jett-step-2: clamp(1.30rem, 1.20rem + 0.55vw, 1.60rem); --jett-step-3: clamp(1.70rem, 1.50rem + 1.00vw, 2.25rem); --jett-step-4: clamp(2.30rem, 1.95rem + 1.80vw, 3.20rem); --jett-step-5: clamp(3.00rem, 2.40rem + 3.00vw, 4.80rem); --jett-step-6: clamp(4.00rem, 2.90rem + 5.50vw, 7.50rem); /* Layout */ --jett-page-pad: clamp(1.25rem, 1rem + 2vw, 3rem); --jett-col-max: 1440px; --jett-read-max: 68ch; /* Motion */ --jett-ease-out: cubic-bezier(0.19, 1, 0.22, 1); --jett-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ====== SEMANTIC TOKENS (default theme: jett — navy primary) ====== */ --bg-primary: var(--jett-navy); --bg-deep: var(--jett-navy-deep); --bg-lift: var(--jett-navy-lift); --bg-card: var(--jett-navy-card); --bg-soft: var(--jett-navy-soft); --ink: var(--jett-off-white); --ink-strong: var(--jett-white); --ink-dim: rgba(244, 245, 247, 0.78); --ink-mute: var(--jett-silver); --ink-soft: rgba(244, 245, 247, 0.45); --ink-ghost: rgba(244, 245, 247, 0.18); --accent: var(--jett-silver); --accent-strong: var(--jett-silver-lt); --accent-soft: rgba(156, 156, 156, 0.18); --hairline: rgba(255, 255, 255, 0.10); --hairline-2: rgba(255, 255, 255, 0.18); --rule: var(--jett-silver-lt); /* Backwards-compat aliases (legacy sections.css + page-specific styles) */ --text-primary: var(--ink-strong); --text-secondary: var(--ink-dim); --text-muted: var(--ink-mute); --border-subtle: var(--hairline); --bg-secondary: var(--bg-lift); } /* ============================================================================= THEME: LIGHT — white surface, navy ink. For document-interior pages and the brand-system "interior" sections. ============================================================================= */ body.theme-light, .theme-light { --bg-primary: var(--jett-white); --bg-deep: var(--jett-off-white); --bg-lift: var(--jett-off-white); --bg-card: var(--jett-white); --bg-soft: var(--jett-off-white); --ink: var(--jett-navy); --ink-strong: var(--jett-navy); --ink-dim: rgba(9, 17, 34, 0.78); --ink-mute: var(--jett-silver); --ink-soft: rgba(9, 17, 34, 0.45); --ink-ghost: rgba(9, 17, 34, 0.18); --hairline: rgba(9, 17, 34, 0.10); --hairline-2: rgba(9, 17, 34, 0.18); --rule: var(--jett-silver-lt); --text-primary: var(--ink-strong); --text-secondary: var(--ink-dim); --text-muted: var(--ink-mute); --border-subtle: var(--hairline); --bg-secondary: var(--bg-lift); } /* ============================================================================= THEME: KAIA — pink accent on navy ============================================================================= */ body.theme-kaia, .theme-kaia { --accent: var(--jett-pink); --accent-strong: var(--jett-pink); --accent-soft: var(--jett-pink-soft); } /* ============================================================================= THEME: KAIA-LIGHT — pink accent on white ============================================================================= */ body.theme-kaia-light, .theme-kaia-light { --bg-primary: var(--jett-white); --bg-deep: var(--jett-off-white); --bg-lift: var(--jett-off-white); --bg-card: var(--jett-white); --bg-soft: var(--jett-off-white); --ink: var(--jett-navy); --ink-strong: var(--jett-navy); --ink-dim: rgba(9, 17, 34, 0.78); --ink-mute: var(--jett-silver); --ink-soft: rgba(9, 17, 34, 0.45); --ink-ghost: rgba(9, 17, 34, 0.18); --hairline: rgba(9, 17, 34, 0.10); --hairline-2: rgba(9, 17, 34, 0.18); --rule: var(--jett-silver-lt); --accent: var(--jett-pink); --accent-strong: var(--jett-pink); --accent-soft: var(--jett-pink-soft); --text-primary: var(--ink-strong); --text-secondary: var(--ink-dim); --text-muted: var(--ink-mute); --border-subtle: var(--hairline); --bg-secondary: var(--bg-lift); } /* ============================================================================= RESET / BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { font-family: var(--jett-font-body); font-feature-settings: 'cv11'; font-weight: 400; font-style: normal; /* never italic */ background: var(--bg-primary); color: var(--ink); line-height: 1.55; letter-spacing: -0.005em; min-height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } em, i, cite, dfn, address { font-style: normal; /* hard kill italic */ } ::selection { background: var(--ink-strong); color: var(--bg-primary); } /* ============================================================================= LAYOUT — page shell ============================================================================= */ .jett-shell { position: relative; width: 100%; max-width: var(--jett-col-max); margin: 0 auto; padding: 0 var(--jett-page-pad); } /* ============================================================================= NAV — fixed top, logo + links ============================================================================= */ .jett-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.1rem var(--jett-page-pad); display: flex; align-items: center; justify-content: space-between; font-family: var(--jett-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: linear-gradient(to bottom, color-mix(in oklab, var(--bg-deep) 88%, transparent), transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } .jett-nav__brand { display: flex; align-items: center; gap: 0.8rem; color: var(--ink-strong); } .jett-nav__brand img, .jett-nav__brand svg { height: 24px; width: auto; } .jett-nav__crumb { color: var(--ink-mute); } .jett-nav__crumb::before { content: '/ '; color: var(--ink-ghost); } .jett-nav__right { display: flex; gap: 1.6rem; align-items: center; color: var(--ink-dim); } .jett-nav__right a { transition: color 0.25s; } .jett-nav__right a:hover { color: var(--ink-strong); } @media (max-width: 720px) { .jett-nav__crumb { display: none; } .jett-nav__right { gap: 1rem; } } /* ============================================================================= EYEBROW — silver caps tracked label. The Prospectus signature: small caps, hairline rule. ============================================================================= */ .jett-eyebrow { font-family: var(--jett-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; gap: 0.7rem; align-items: center; } .jett-eyebrow--accent { color: var(--accent); } .jett-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ============================================================================= RULES / HAIRLINES — under labels, under section heads, between sections ============================================================================= */ .jett-rule { display: block; height: 1px; background: var(--rule); border: 0; width: 100%; } .jett-rule--soft { background: var(--hairline); } .jett-rule--short { max-width: 220px; } .jett-rule--center { margin-left: auto; margin-right: auto; } .jett-rule--accent { background: var(--accent); height: 1px; } /* ============================================================================= TYPOGRAPHY PRIMITIVES — bold / regular only. No italic. Emphasis = weight contrast (700 vs 400). ============================================================================= */ .jett-display { font-family: var(--jett-font-display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 4vw, 5.8rem); line-height: 0.98; letter-spacing: -0.028em; color: var(--ink-strong); } .jett-display--xl { font-size: clamp(3rem, 2rem + 6vw, 7rem); letter-spacing: -0.035em; line-height: 0.94; } .jett-h2 { font-family: var(--jett-font-display); font-weight: 700; font-size: var(--jett-step-3); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-strong); } .jett-h3 { font-family: var(--jett-font-display); font-weight: 600; font-size: var(--jett-step-2); line-height: 1.1; letter-spacing: -0.012em; color: var(--ink-strong); } .jett-subhead { font-family: var(--jett-font-body); font-weight: 500; font-size: var(--jett-step-1); letter-spacing: -0.008em; color: var(--ink-strong); } .jett-lede { font-family: var(--jett-font-body); font-weight: 300; font-size: var(--jett-step-1); line-height: 1.6; color: var(--ink-dim); max-width: 60ch; } .jett-lede b, .jett-lede strong { color: var(--ink-strong); font-weight: 500; } .jett-body { font-family: var(--jett-font-body); font-weight: 400; font-size: var(--jett-step-0); line-height: 1.65; color: var(--ink-dim); } .jett-body b, .jett-body strong { color: var(--ink-strong); font-weight: 500; } .jett-caption { font-family: var(--jett-font-mono); font-weight: 500; font-size: var(--jett-step--2); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .jett-footnote { font-family: var(--jett-font-body); font-weight: 400; font-size: 0.8rem; line-height: 1.55; color: var(--ink-mute); } /* Replacement for any old italic emphasis: weight contrast or color shift */ .jett-soft { color: var(--ink-mute); font-weight: 300; } .jett-strong { font-weight: 700; color: var(--ink-strong); } .jett-accent { color: var(--accent); } /* ============================================================================= HERO — cover-style. Eyebrow + rule + display + lede + meta. ============================================================================= */ .jett-hero { padding: 8rem 0 3rem; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; } @media (min-height: 1000px) { .jett-hero { min-height: auto; padding-top: 9rem; padding-bottom: 5rem; } } .jett-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } @media (max-width: 720px) { .jett-hero__head { grid-template-columns: 1fr; } } .jett-hero__meta { display: grid; gap: 0.5rem; text-align: right; font-family: var(--jett-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } @media (max-width: 720px) { .jett-hero__meta { text-align: left; } } .jett-hero__lede { margin-top: 2rem; } /* Cover layout — for hero blocks that mimic the PDF cover */ .jett-cover { text-align: center; padding: 6rem 0 3rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; } .jett-cover__logo { height: 28px; width: auto; opacity: 0.92; } .jett-cover__rule { width: 220px; } .jett-cover__title { max-width: 18ch; } /* ============================================================================= SECTION — base section block ============================================================================= */ .jett-section { padding: clamp(4rem, 3rem + 3vw, 7rem) 0 clamp(1rem, 0.8rem + 1vw, 2rem); } .jett-section--tight { padding: clamp(3rem, 2rem + 1.5vw, 4.5rem) 0; } .jett-section--light { background: var(--jett-white); color: var(--jett-navy); --bg-primary: var(--jett-white); --bg-deep: var(--jett-off-white); --bg-lift: var(--jett-off-white); --bg-card: var(--jett-white); --ink: var(--jett-navy); --ink-strong: var(--jett-navy); --ink-dim: rgba(9,17,34,0.78); --ink-mute: var(--jett-silver); --ink-soft: rgba(9,17,34,0.45); --ink-ghost: rgba(9,17,34,0.18); --hairline: rgba(9,17,34,0.10); --hairline-2: rgba(9,17,34,0.18); --text-primary: var(--ink-strong); --text-secondary: var(--ink-dim); --text-muted: var(--ink-mute); --border-subtle: var(--hairline); } .jett-section--soft { background: var(--bg-lift); } .jett-section__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 2vw, 4rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: end; padding-bottom: 1.2rem; border-bottom: 1px solid var(--hairline-2); } @media (max-width: 900px) { .jett-section__head { grid-template-columns: 1fr; } } .jett-section__label { /* alias of .jett-eyebrow for clarity in section heads */ font-family: var(--jett-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .jett-section__title { font-family: var(--jett-font-display); font-weight: 700; font-size: var(--jett-step-3); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-strong); max-width: 24ch; } .jett-section__note { font-family: var(--jett-font-body); font-weight: 400; font-size: var(--jett-step-0); line-height: 1.6; color: var(--ink-dim); max-width: 58ch; margin-top: 0.8rem; } /* ============================================================================= CARD — generic content card, neutral surface ============================================================================= */ .jett-card { background: var(--bg-lift); border: 1px solid var(--hairline-2); border-radius: 8px; padding: clamp(1.4rem, 1rem + 1vw, 2rem); } .jett-card--bare { background: transparent; border-radius: 0; } /* ============================================================================= DOCUMENT CHROME — page numbers + confidential footer. For sections that mimic a real document interior. ============================================================================= */ .jett-doc-chrome { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); font-family: var(--jett-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .jett-doc-chrome__num { letter-spacing: 0.1em; color: var(--ink-mute); } /* Confidential bar — small chrome line you can drop anywhere */ .jett-confidential { font-family: var(--jett-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } /* ============================================================================= FOOTER — site-wide ============================================================================= */ .jett-footer { padding: clamp(3rem, 2rem + 2vw, 5rem) 0 3rem; margin-top: clamp(4rem, 2rem + 3vw, 7rem); border-top: 1px solid var(--hairline); background: var(--bg-deep); color: var(--ink-dim); } .jett-footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; align-items: flex-start; } .jett-footer__mark { font-family: var(--jett-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink-strong); } .jett-footer__tag { margin-top: 0.25rem; font-family: var(--jett-font-body); font-weight: 400; font-size: 0.95rem; color: var(--ink-dim); } .jett-footer__links { display: flex; gap: 2rem; flex-wrap: wrap; } .jett-footer__links a { color: var(--ink-dim); transition: color 0.25s; } .jett-footer__links a:hover { color: var(--ink-strong); } .jett-footer__chrome { margin-top: 2rem; font-family: var(--jett-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } /* ============================================================================= ATMOSPHERE — minimal (Prospectus is restrained). Optional. Use only on hero / cover moments where extra depth helps. ============================================================================= */ .jett-atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .jett-atmosphere::before { content: ''; position: absolute; inset: -10%; background: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(244,245,247,0.04), transparent 65%), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-primary) 30%, var(--bg-primary) 70%, var(--bg-deep) 100%); } /* ============================================================================= REVEAL — fade-up animation. Quiet, restrained. Add `.jett-reveal` to elements; JS toggles `.in` when in viewport. ============================================================================= */ .jett-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--jett-ease-out), transform 0.7s var(--jett-ease-out); } .jett-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .jett-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================================= COMPATIBILITY — kill global italic + serif holdovers anywhere on the site. Defensive overrides for legacy inline styles still using Fraunces/italic. ============================================================================= */ *, em, i, cite, dfn, address, blockquote, q, .brand-title, .brand-section__title, .ts-cover, .ts-headline, .section-headline, .testimonial-quote { font-style: normal !important; } /* Map Fraunces requests onto Inter Tight. Anything that previously asked for the serif now lands on the sans system without surgery. */ [style*="Fraunces"], [style*="fraunces"] { font-family: var(--jett-font-display) !important; }