/* ============================================================================= VTW26 — vtw26.aitravelstudio.com · design tokens Virtuoso Travel Week 2026 · 3-page mini-site THIS FILE IS AN EXTENSION LAYER. It does not replace, fork or re-author the two source brands. Every value in §1 is mirrored verbatim from: documents/brand-identities/travel-agency-tribes.json (TAT · host) documents/brand-identities/ai-travel-studio.json (AITS · destination) §2 implements the token contract in §04 of the co-brand brief. §3 is the ONLY genuinely new material — VTW26-scoped layout/geometry tokens that neither brand book specifies, plus the co-brand lockup metrics. §4 scopes page 1 back to full TAT (it is TAT's own hub page). Governing rule (brief §02): TAT is the host. AITS is the destination. Colours are never hardcoded in markup. Read from here or from the JSON. Design Agent · 27 July 2026 · v1.0 ========================================================================== */ /* ───────────────────────────────────────────────────────────────────────────── §1 SOURCE BRAND TOKENS — mirrored, never redefined ────────────────────────────────────────────────────────────────────────── */ :root { /* --- Travel Agency Tribes ------------------------------------------------ */ --tat-red: #A81E22; /* Tribe Red · white on it = 7.31:1 AAA */ --tat-red-dark: #85181B; /* hover · white on it = 9.79:1 AAA */ --tat-red-pale: #FBEBEC; --tat-ink: #2D2D2D; /* white on it = 13.77:1 AAA */ --tat-body: #474747; --tat-sand: #E5E2D8; /* ink on it = 10.62:1 AAA */ --tat-cloud: #F6F6F5; --tat-hairline: #E3E3E1; --tat-canvas: #FEFEFE; --tat-mute: #999999; /* 2.87:1 — DECORATIVE ONLY, never text */ --tat-blue: #2199E8; /* 3.10:1 — large text 24px+/icons/borders */ --tat-blue-safe: #14639E; /* the body-text substitute */ --tat-rating: #FFC32B; --tat-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* TAT component signatures (page 1 only — see the button decision, brief §04) */ --tat-btn-radius: 100px; --tat-btn-padding: 17px 20px; --tat-btn-case: uppercase; --tat-btn-weight: 600; --tat-btn-size: 20px; --tat-btn-tracking: .04em; --tat-card-radius: 14px; --tat-container: 1140px; /* --- AI Travel Studio (MARKETING system — canonical) --------------------- */ --aits-ink: #1A1A2E; /* on cream = 16.50:1 AAA */ --aits-ink-light: #3D3D5C; /* on cream = 10.06:1 AAA */ --aits-muted: #6B6B8A; /* on cream = 4.96:1 AA — lightest legal text */ --aits-teal: #007089; /* white on it = 5.71:1 AA */ --aits-teal-light: #0092AA; /* 3.69:1 — large text/icons/borders only */ --aits-teal-deep: #005A6E; /* white on it = 7.81:1 AAA */ --aits-teal-pale: #CAF8FF; --aits-orange: #F47E20; /* FILL ONLY. Never text. Label must be ink */ --aits-orange-deep: #A85510; /* the orange you are allowed to set text in */ --aits-orange-pale: #FEF5EC; --aits-cream: #FDFBF7; --aits-sand: #F5F0E8; --aits-border: #E8E4DC; --aits-display: 'Playfair Display', Georgia, serif; --aits-body-font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; --aits-btn-radius: 8px; --aits-btn-padding: 16px 32px; --aits-btn-case: none; /* sentence case */ --aits-btn-weight: 600; --aits-btn-size: 16px; --aits-card-radius: 8px; --aits-container: 1200px; /* --- BANNED. Present so a build can assert against them, never to be used. -- */ --x-banned-product-teal: #38B2AC; /* 2.58:1 with white — live audit defect */ --x-banned-amplify-teal: #0D9488; /* the third teal. Converge on --aits-teal */ } /* ───────────────────────────────────────────────────────────────────────────── §2 CO-BRAND CONTRACT — brief §04, implemented verbatim Pages 2 & 3. Anything not listed defaults to AITS: the destination brand wins ties. ────────────────────────────────────────────────────────────────────────── */ :root { --page-canvas: var(--aits-cream); /* AITS #FDFBF7 — the shared spine */ --band-neutral: var(--aits-sand); /* AITS #F5F0E8 — the pivot band */ --ink: var(--aits-ink); /* AITS #1A1A2E — one ink per page */ --body: var(--aits-ink-light); /* AITS #3D3D5C */ --muted: var(--aits-muted); /* AITS #6B6B8A */ --hairline: var(--aits-border); /* AITS #E8E4DC */ --host-accent: var(--tat-red); /* TAT #A81E22 — bands 1–2 ONLY */ --host-accent-pale:var(--tat-red-pale); --action: var(--aits-teal); /* AITS #007089 — every forward CTA */ --action-hover: var(--aits-teal-deep); /* AITS #005A6E */ --urgency: var(--aits-orange); /* fill only · max once per page */ --urgency-text: var(--aits-orange-deep); --font-structural: var(--tat-font); /* nav, footer, eyebrows, labels */ --font-display: var(--aits-display); /* product headline + pivot line */ --font-body: var(--aits-body-font); /* all running copy · 1.7 leading */ --radius: 8px; /* cards, inputs, images */ --container: 1200px; --text-col: 680px; /* text column cap, both brands */ } /* ───────────────────────────────────────────────────────────────────────────── §3 NEW — VTW26-scoped additive tokens Nothing here contradicts either brand book; these are the decisions the brand books do not make because they are page-level, not brand-level. ────────────────────────────────────────────────────────────────────────── */ :root { /* --- 3.1 The brand gradient (brief §03). One-way, never alternating. ------ */ --vtw-band-1-bg: var(--aits-cream); /* co-brand header · TAT-led */ --vtw-band-2-bg: var(--aits-cream); /* context band · TAT voice */ --vtw-band-3-bg: var(--band-neutral); /* THE PIVOT · the hinge */ --vtw-band-4-bg: var(--aits-cream); /* product story · AITS voice */ --vtw-band-5-bg: #FFFFFF; /* handoff CTA · full AITS */ --vtw-band-foot-bg:var(--aits-sand); /* --- 3.2 Co-brand lockup (brief §05). Ratio 38 : 21 = 1.81× ≈ the ~1.8× spec */ --vtw-lockup-tat-h: 38px; /* desktop TAT mark height */ --vtw-lockup-aits-h: 21px; /* 55% of TAT — the hierarchy IS the caption */ --vtw-lockup-tat-h-m: 30px; /* mobile */ --vtw-lockup-aits-h-m: 17px; --vtw-lockup-gap: 16px; --vtw-lockup-word-size: 13px; /* the word "with" */ --vtw-lockup-word-color: var(--aits-muted); /* 4.96:1 — legal, just */ --vtw-lockup-word-font: var(--aits-body-font); /* Source Sans 400 */ --vtw-header-min-h: 72px; --vtw-header-pad-y: 20px; --vtw-header-bg: var(--aits-cream); /* light header ALWAYS — */ --vtw-header-rule: var(--host-accent); /* no knockout lockups exist yet */ --vtw-header-rule-w: 3px; /* --vtw-header-position is deliberately absent. The header does not stick; a persistent origin brand fights the gradient. */ /* --- 3.2b Virtuoso partner credential badge (J4D80Kht). A THIRD mark, not part of the TAT/AITS co-brand lockup — kept visually and structurally separate so it reads as a partner credential, never a co-equal brand. The sourced SVG (documents/brand-identities/virtuoso-logo-horizontal.svg) is a knockout lockup — white wordmark, transparent ground — built for a dark/colour surface, not for --vtw-header-bg or --page-canvas (both light). Rather than recolour Virtuoso's own artwork (no usage-guideline doc shipped with it, so the art itself is left untouched), it sits on its own small dark chip — the same --ink-chip-with-white-text pattern this file already uses for .skip and .reviewbar. See §7 for the verified contrast ratio. */ --vtw-partner-badge-bg: var(--ink); --vtw-partner-badge-fg: #FFFFFF; --vtw-partner-badge-radius: 100px; --vtw-partner-badge-gap: 7px; --vtw-partner-badge-pad-header: 5px 11px; --vtw-partner-badge-pad-hero: 7px 14px; --vtw-partner-badge-logo-h-m: 11px; /* header, mobile — smaller than */ --vtw-partner-badge-logo-h-d: 13px; /* header, desktop the AITS mark */ --vtw-partner-badge-logo-h-hero: 16px; /* hero badge, both breakpoints */ --vtw-partner-badge-label-size: 9px; --vtw-partner-badge-label-size-hero: 10.5px; --vtw-partner-badge-label-tracking: .07em; /* --- 3.3 Buttons. Pages 2–3 = AITS geometry throughout (brief §04). -------- */ --vtw-btn-radius: var(--aits-btn-radius); --vtw-btn-padding: var(--aits-btn-padding); --vtw-btn-padding-sm: 12px 24px; --vtw-btn-font: var(--aits-body-font); --vtw-btn-weight: 600; --vtw-btn-size: 16px; --vtw-btn-case: none; --vtw-btn-tracking: normal; --vtw-btn-fill: var(--action); --vtw-btn-fill-hover: var(--action-hover); --vtw-btn-label: #FFFFFF; /* 5.71:1 on --action */ --vtw-btn-ghost-border: var(--action); --vtw-btn-ghost-label: var(--action); --vtw-btn-ghost-hover: var(--aits-teal-pale); --vtw-btn-min-tap: 48px; /* WCAG 2.2 AA 2.5.8 target */ --vtw-btn-transition: background-color .18s ease, box-shadow .18s ease; /* --- 3.4 Focus. One ring, every interactive element, both brands. --------- */ --vtw-focus-color: var(--action); --vtw-focus-ring: 0 0 0 3px rgba(0, 112, 137, .18); --vtw-focus-outline: 2px solid var(--action); --vtw-focus-offset: 2px; /* --- 3.5 The page-3 capture gate. 4 fields, hard ceiling. ---------------- */ --vtw-field-bg: #FFFFFF; /* DEVIATION FROM THE BRIEF, on purpose. Brief §07 specifies "#E8E4DC hairline borders" for the capture-gate fields. Measured, that is 1.27:1 against a white field on a white card — and WCAG 2.2 AA 1.4.11 requires 3:1 for the boundary of a user-interface component, because the border is the ONLY thing telling a low-vision user where the input is. --aits-muted is an existing AITS token (no new colour invented) and measures 5.13:1. Card borders keep the brand hairline: a card is not a UI component. */ --vtw-field-border: var(--aits-muted); --vtw-field-border-rest: var(--aits-border); /* the brand hairline, kept for reference */ --vtw-field-border-focus:var(--action); --vtw-field-border-error:#B3261E; /* 5.90:1 on white — AA for error text */ --vtw-field-error-bg: #FDF3F2; --vtw-field-radius: var(--radius); --vtw-field-pad: 14px 16px; --vtw-field-h: 52px; --vtw-field-label-size: 14px; --vtw-field-label-color: var(--ink); --vtw-field-hint-color: var(--muted); --vtw-gate-max-fields: 4; /* documentation token. Five loses them. */ /* --- 3.6 Vertical rhythm. AITS airiness is the brand — do not compress. --- */ --vtw-space-unit: 8px; --vtw-section-y-mobile: 72px; --vtw-section-y-desk: 112px; --vtw-band-pivot-y-m: 48px; /* the pivot is tighter than a full band */ --vtw-band-pivot-y-d: 64px; --vtw-gutter-mobile: 20px; --vtw-gutter-desk: 48px; --vtw-stack-sm: 12px; --vtw-stack-md: 20px; --vtw-stack-lg: 32px; /* --- 3.7 Type scale. Playfair takes negative tracking above 40px. -------- */ --vtw-eyebrow-size: 12px; --vtw-eyebrow-tracking: .12em; --vtw-eyebrow-weight: 600; --vtw-h1-m: 32px; --vtw-h1-d: 52px; --vtw-h1-tracking-d: -.02em; --vtw-h2-m: 26px; --vtw-h2-d: 38px; --vtw-h3-m: 19px; --vtw-h3-d: 22px; --vtw-pivot-m: 24px; --vtw-pivot-d: 32px; /* brief §06: Playfair 500, 32px, on Sand */ --vtw-body-size: 17px; --vtw-body-lead: 1.7; /* not 1.5. The airiness is the brand. */ --vtw-lede-m: 18px; --vtw-lede-d: 21px; --vtw-small-size: 14px; /* --- 3.8 Surfaces. Borders over shadows, both brands agree. -------------- */ --vtw-card-bg: #FFFFFF; --vtw-card-border: 1px solid var(--hairline); --vtw-card-radius: var(--radius); --vtw-card-pad-m: 20px; --vtw-card-pad-d: 28px; --vtw-elevation-max: 0 2px 8px rgba(26, 26, 46, .06); --vtw-rule: 1px solid var(--hairline); /* --- 3.9 Grid. Three-across collapses to ONE below 768px, never two. ----- */ --vtw-bp-mobile: 375px; --vtw-bp-collapse: 768px; --vtw-bp-desk: 1440px; --vtw-grid-gap-m: 16px; --vtw-grid-gap-d: 24px; } /* ───────────────────────────────────────────────────────────────────────────── §4 PAGE 1 — HOST MODE (applied to , not , so that the root element itself resolves the TAT font stack) Page 1 is TAT's own hub page, not a bridge page. It is fully TAT: pill uppercase buttons, Montserrat only, Tribe Red, Sand. The shape change between page 1 and page 2 is itself part of the gradient — and nobody notices it going in that direction. ────────────────────────────────────────────────────────────────────────── */ .vtw-host { --page-canvas: var(--tat-canvas); --band-neutral: var(--tat-sand); --ink: var(--tat-ink); --body: var(--tat-body); --muted: var(--tat-body); /* TAT has no legal light grey */ --hairline: var(--tat-hairline); --host-accent: var(--tat-red); --action: var(--tat-red); --action-hover: var(--tat-red-dark); --font-structural: var(--tat-font); --font-display: var(--tat-font); /* one family only. No Playfair here.*/ --font-body: var(--tat-font); --radius: var(--tat-card-radius); --container: var(--tat-container); --vtw-btn-radius: var(--tat-btn-radius); /* the pill is a brand signature */ --vtw-btn-padding: var(--tat-btn-padding); --vtw-btn-case: uppercase; --vtw-btn-tracking: .04em; --vtw-btn-ghost-hover: var(--tat-red-pale); --vtw-btn-size: 17px; /* TAT ships 20px; 17px holds the */ --vtw-btn-font: var(--tat-font); /* two-CTA row at 375px without wrap */ --vtw-btn-weight: 600; --vtw-btn-fill: var(--tat-red); --vtw-btn-fill-hover: var(--tat-red-dark); --vtw-btn-ghost-border: var(--tat-red); --vtw-btn-ghost-label: var(--tat-red); --vtw-focus-color: var(--tat-red); --vtw-focus-ring: 0 0 0 3px rgba(168, 30, 34, .18); --vtw-focus-outline: 2px solid var(--tat-red); --vtw-card-bg: var(--tat-canvas); --vtw-card-radius: var(--tat-card-radius); --vtw-elevation-max: 0 2px 8px rgba(0, 0, 0, .06); --vtw-body-lead: 1.65; /* TAT runs slightly tighter */ --vtw-h1-d: 50px; --vtw-h1-tracking-d: -.01em; /* Montserrat needs less than serif */ /* Band backgrounds come from TAT's own neutrals too. Without this the page would sit on AITS Cream #FDFBF7, which is a warmer white than TAT ships and reads as a temperature clash against TAT Cloud. Page 1 is TAT's hub page — "matches the TAT brand kit" is one of its acceptance criteria. */ --vtw-header-bg: var(--tat-canvas); --vtw-band-1-bg: var(--tat-canvas); --vtw-band-2-bg: var(--tat-canvas); --vtw-band-3-bg: var(--tat-sand); --vtw-band-4-bg: var(--tat-cloud); --vtw-band-5-bg: var(--tat-canvas); --vtw-band-foot-bg: var(--tat-sand); } /* ───────────────────────────────────────────────────────────────────────────── §5 MOTION — respect the setting. Both brands are static-first. ────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --vtw-btn-transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────────────────────── §6 ASSET REGISTRY — absolute URLs, no relative paths ────────────────────────────────────────────────────────────────────────── */ :root { --vtw-logo-tat: url("https://digital-hustle.crhq.ai/images/tat-logo-primary.png"); --vtw-logo-aits: url("https://digital-hustle.crhq.ai/images/aits-logo-primary.png"); --vtw-hero-p1: url("https://digital-hustle.crhq.ai/images/tat-brand-01-outcome.jpeg"); --vtw-hero-p3: url("https://digital-hustle.crhq.ai/images/aits-brand-05-story.jpeg"); } /* ============================================================================= §7 CONTRAST LEDGER — every pairing this token set permits. Verified against the two brand books' accessibility_notes on 2026-07-27. #FFFFFF on --action #007089 5.71:1 AA every forward CTA #FFFFFF on --action-hover #005A6E 7.81:1 AAA hover state #FFFFFF on --tat-red #A81E22 7.31:1 AAA page 1 primary CTA #FFFFFF on --tat-red-dark #85181B 9.79:1 AAA page 1 hover --ink on --page-canvas 16.50:1 AAA default text pairing --body on --page-canvas 10.06:1 AAA running copy --muted on --page-canvas 4.96:1 AA "with", captions ONLY --tat-ink on --tat-sand 10.62:1 AAA page 1 sand bands --tat-red on --tat-sand 5.64:1 AA page 1 eyebrows on sand --ink on --urgency #F47E20 7.50:1 AAA the ONLY legal orange pair #FFFFFF on --ink (AITS) #1A1A2E 17.06:1 AAA partner-badge label + logo, pages 2/3 and default #FFFFFF on --ink (TAT host)#2D2D2D 13.77:1 AAA partner-badge, page 1 (host mode resolves --ink to --tat-ink) FORBIDDEN — do not let these into the build: #FFFFFF on #F47E20 2.67:1 broken on the live AITS site today #FFFFFF on #38B2AC 2.58:1 broken on every audit-tool button today #2199E8 text on light 3.10:1 substitute --tat-blue-safe #14639E #999999 text 2.87:1 decorative only ========================================================================== */