/** * LOA Design Tokens — reconciled against LynetteOwens.com Web * Requirements.md (NAV-01/02/03/04/05). Maps 1:1 onto the future * Crucible `design-tokens` schema. * * Remaining TBDs from the requirements doc itself: * - hover/active states (Lynette to confirm) * - responsive padding below 1920w (doc: TBD) * - drawer pattern (doc recommends overlay/slide-in; interim: overlay) */ :root { /* Brand color */ --loa-gold: #d4af37; --loa-gold-underline: rgba(212, 175, 55, 0.5); --loa-ink: #0f1115; --loa-ink-mobile: #0f0d13; /* Header (NAV-01 desktop / NAV-02 mobile) */ --loa-header-bg-desktop: rgba(15, 17, 21, 0.9); --loa-header-bg-mobile: rgba(20, 18, 24, 0.8); --loa-header-blur-desktop: 6px; --loa-header-blur-mobile: 12px; --loa-header-border: rgba(255, 255, 255, 0.1); --loa-header-h-desktop: 80px; --loa-header-h-mobile: 73px; /* Logo (NAV-01 / NAV-02) */ --loa-logo-w-desktop: 387px; --loa-logo-h-desktop: 30px; --loa-logo-w-mobile: 305px; --loa-logo-h-mobile: 24px; --loa-logo-offset-desktop: 0px; /* Figma said 21px; Byrne 2026-07-15: too much left margin, sit flush with container edge */ /* Nav links (NAV-03) */ --loa-nav-color: rgba(255, 255, 255, 0.7); --loa-nav-size: 12px; --loa-nav-tracking: 1.2px; --loa-nav-gap: 40px; /* CTA (NAV-05) */ --loa-cta-h: 44px; --loa-cta-pad-x: 33px; /* Drawer (NAV-04) */ --loa-drawer-bg: #0f0d13; --loa-drawer-link-size: 14px; /* Hero (UI-01) */ --loa-hero-h: 1080px; /* section height at 1920w */ --loa-hero-grad-top: rgba(0, 0, 0, 0.6); --loa-hero-grad-mid: rgba(0, 0, 0, 0.2); /* 50% midpoint */ --loa-hero-grad-bottom: #0f1115; --loa-hero-content-max: 1024px; --loa-hero-eyebrow-size: 14px; --loa-hero-eyebrow-tracking: 5.6px; --loa-hero-eyebrow-lh: 1.6; --loa-hero-headline-size: 96px; /* at 1920w; hero.css clamps below */ --loa-hero-body-size: 20px; --loa-hero-body-lh: 28px; --loa-hero-body-max: 672px; --loa-hero-body-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.35); --loa-hero-btn-h: 64px; --loa-hero-btn-pad-x: 48px; /* doc: 48px primary / 49px secondary; 49 = 48 + 1px border (border-box) */ --loa-hero-btn-tracking: 2.4px; --loa-hero-btn-gap: 24px; /* Mobile hero (UI-02) */ --loa-hero-m-img-top: 75px; /* image starts 75px from top per Figma (mobile header is 73px) */ --loa-hero-m-grad-top: rgba(15, 13, 19, 0.2); --loa-hero-m-grad-mid: rgba(15, 13, 19, 0.6); /* 50% midpoint */ --loa-hero-m-grad-bottom: #0f0d13; --loa-hero-m-eyebrow-size: 11px; --loa-hero-m-eyebrow-tracking: 3.3px; /* 0.3em, a touch tighter than desktop's 0.4em so the phrase fits */ --loa-hero-m-eyebrow-gap: 16px; --loa-hero-m-headline-size: 48px; /* hero.css clamps below to fit narrow viewports */ --loa-hero-m-btn-w: 289px; /* tech notes (fixed width) win over QA "full-width" per Byrne 2026-07-17 */ --loa-hero-m-btn-gap: 16px; /* tech notes said 74px; Byrne 2026-07-17 reference image shows a tight stack (~16px measured against 289px button width) — likely a Figma mis-measure */ --loa-hero-m-gutter: 20px; /* Client Roster (UI-03 desktop / UI-04 mobile). Icon-only crop + * white/grey stroke + 40%-opacity/saturation-filter treatment from * the requirements doc was SCRAPPED (Byrne 2026-07-23) in favor of * full-color logos on translucent cards, which was ITSELF SCRAPPED * (Byrne 2026-07-25) in favor of one continuous bar: no card boxes, * no name captions, logos sit directly on the bar (most now * white-text variants for contrast) with a shared drop-shadow. */ --loa-roster-bg: var(--loa-ink); /* #0f1115 desktop per spec */ --loa-roster-bg-mobile: #1d1b20; /* UI-04 spec */ --loa-roster-border: rgba(255, 255, 255, 0.05); --loa-roster-pad-y: 65px; /* Doc: 240px horizontal section padding at 1920w (= (1920-1440)/2, * lines up with the 1440px inner max-width). Sub-1920w wrap/scale * is TBD-with-Tyler per spec; interim clamp scaling (no wrap), * consistent with the 7/22 decision and the hero's approach. */ --loa-roster-pad-x: clamp(24px, 12.5vw, 240px); --loa-roster-inner-pad-x: 32px; --loa-roster-eyebrow-size: 10px; --loa-roster-eyebrow-tracking: 3px; --loa-roster-eyebrow-color: #64748b; /* Doc: 64px gap at 1920w. Same interim clamp-scaling rationale as * --loa-roster-pad-x above. */ --loa-roster-gap: clamp(16px, 3.33vw, 64px); --loa-roster-row-gap-top: 47.5px; /* eyebrow -> logo row */ --loa-roster-logo-h: 64px; /* Reduced-opacity shadow (Byrne 2026-07-25), applied via * filter: drop-shadow() so it follows each logo's alpha shape. */ --loa-roster-logo-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); /* Mobile roster (UI-04). Doc calls for text-only logos on mobile; * 7/22 decision built UI-03+UI-04 as one version instead (logo * images render at both viewports, markup shared). */ --loa-roster-m-pad-y: 24px; --loa-roster-m-pad-left: 20px; /* doc: 20px left padding */ --loa-roster-m-gap: 48px; --loa-roster-m-logo-h: 48px; /* Specialties (UI-05 desktop / UI-06 mobile). Card copy + images * pulled from Figma node 95:49 (desktop) / 111:80 (mobile) per * Byrne 2026-07-26 - CON-04 ticket itself was never filled in. */ --loa-specialties-eyebrow-size: 12px; --loa-specialties-eyebrow-tracking: 3.6px; --loa-specialties-h2-size: 48px; --loa-specialties-descriptor-color: #94a3b8; --loa-specialties-descriptor-max: 384px; /* Doc: 240px horizontal / 128px vertical section padding at 1920w, * same "(1920-1440)/2" logic as the roster. Sub-1920w scaling is the * same carried Tyler TBD; interim clamp matches roster's approach. */ --loa-specialties-pad-y: 128px; --loa-specialties-pad-x: clamp(24px, 12.5vw, 240px); --loa-specialties-inner-pad-x: 32px; --loa-specialties-header-gap: 80px; /* header block -> card grid */ --loa-specialties-card-bg: #0f172a; --loa-specialties-card-border: rgba(255, 255, 255, 0.05); --loa-specialties-card-h: 498px; --loa-specialties-card-gap: 48px; --loa-specialties-card-pad: 48px; --loa-specialties-card-content-gap: 16px; --loa-specialties-grad-top: #0f1115; --loa-specialties-grad-mid: rgba(15, 17, 21, 0.2); /* 50% midpoint */ --loa-specialties-grad-bottom: rgba(15, 17, 21, 0); --loa-specialties-category-color: var(--loa-gold); --loa-specialties-category-tracking: 3px; --loa-specialties-h3-size: 30px; --loa-specialties-body-color: #cbd5e1; --loa-specialties-body-max: 448px; --loa-specialties-cta-tracking: 1.2px; --loa-specialties-cta-underline: rgba(212, 175, 55, 0.5); /* Mobile specialties (UI-06). Doc: no category label / CTA in the * mobile Figma frame (111:80 confirms) - cards are H3 + body only. */ --loa-specialties-m-pad-x: 20px; --loa-specialties-m-pad-top: 64px; --loa-specialties-m-divider-color: #e7c365; --loa-specialties-m-divider-w: 48px; --loa-specialties-m-divider-gap: 8px; --loa-specialties-m-card-h: 300px; --loa-specialties-m-card-gap: 24px; --loa-specialties-m-card-pad: 24px; --loa-specialties-m-card-content-gap: 4px; --loa-specialties-m-grad-top: var(--loa-ink-mobile); --loa-specialties-m-grad-bottom: rgba(15, 13, 19, 0); /* Destinations (UI-07 desktop / UI-08 mobile). Byrne 2026-07-29 * swapped the 4 launch destinations from the Figma placeholders * (Switzerland/Maldives/Italy/Japan) to Dominican Republic/Budapest/ * California/Arizona; card structure/styling still follows the doc. */ --loa-destinations-bg: rgba(255, 255, 255, 0.05); --loa-destinations-pad-y: 128px; --loa-destinations-pad-x: clamp(24px, 12.5vw, 240px); /* same interim clamp rationale as roster/specialties */ --loa-destinations-inner-pad-x: 32px; --loa-destinations-header-gap: 64px; /* header row -> carousel */ --loa-destinations-eyebrow-size: 12px; --loa-destinations-eyebrow-tracking: 3.6px; --loa-destinations-h2-size: 36px; --loa-destinations-arrow-size: 48px; --loa-destinations-arrow-border: rgba(255, 255, 255, 0.1); --loa-destinations-track-h: 656px; --loa-destinations-card-w: 400px; --loa-destinations-card-img-h: 500px; --loa-destinations-card-gap: 32px; --loa-destinations-label-color: var(--loa-gold); --loa-destinations-label-tracking: 1.4px; --loa-destinations-title-size: 24px; --loa-destinations-descriptor-color: #64748b; /* Mobile destinations (UI-08). */ --loa-destinations-m-bg: #1d1b20; --loa-destinations-m-pad-y: 64px; --loa-destinations-m-pad-left: 20px; --loa-destinations-m-h2-size: 24px; --loa-destinations-m-arrow-size: 40px; --loa-destinations-m-card-w: 260px; --loa-destinations-m-card-img-h: 347px; --loa-destinations-m-card-gap: 24px; --loa-destinations-m-label-size: 11px; --loa-destinations-m-title-size: 16px; /* Shown on mobile from v0.30.0 (UI-27 TN 3); was hidden. */ --loa-destinations-m-descriptor-size: 13px; /* Concierge Process Steps (UI-09 desktop / UI-10 mobile). Figma * desktop node 95:141, mobile node 111:101. Eyebrow/H2/intro copy * and step titles/body were never filled in by CON-06 — pulled * directly from Figma per the same precedent as Specialties/ * Destinations (Byrne 2026-07-26/29). Icon assets (36x44, one per * step) could not be retrieved: Figma's exported asset URLs are * blocked by this sandbox's outbound network allowlist (same * failure mode hit 2026-07-22 pulling the roster's gold icon — see * LOA-WORKING-NOTES.md). Icon slot is reserved at spec size so * assets can drop in later with zero markup changes, same fallback * pattern used for the roster when its assets were blocked. */ --loa-process-pad-y: 128px; --loa-process-pad-x: clamp(24px, 12.5vw, 240px); /* same interim clamp rationale as roster/specialties/destinations */ --loa-process-inner-pad-x: 32px; --loa-process-header-gap: 16px; /* eyebrow+H2 group -> intro copy, per Figma gap-[16px] */ --loa-process-section-gap: 96px; /* header block -> step grid, per Figma gap-[96px] */ --loa-process-eyebrow-size: 12px; --loa-process-eyebrow-tracking: 3.6px; --loa-process-h2-size: 48px; --loa-process-intro-color: #94a3b8; --loa-process-intro-max: 672px; --loa-process-grid-gap: 64px; --loa-process-step-gap: 16px; /* icon -> title-row -> body, per Figma gap-[16px] */ --loa-process-icon-w: 36px; --loa-process-icon-h: 44px; --loa-process-ghost-color: rgba(255, 255, 255, 0.1); --loa-process-ghost-size: 30px; --loa-process-title-offset: 43px; /* ghost number -> title left offset, per doc tech note #9 */ --loa-process-body-color: #94a3b8; /* Mobile process (UI-10). Icon sits left of a 64px-offset text * column (36px icon + 28px gap = 64px, matches doc tech note #6 * exactly). No ghost numbers on mobile per doc. Step titles differ * from desktop for steps 1 and 4 (doc: "Native Discovery" not * "Narrative Discovery", "Execution" not "Elite Execution") — * confirmed against both the requirements doc and the Figma mobile * frame itself, not a typo. Mobile Figma frame's step-4 body said * "27/7" (vs desktop's "24/7") — treated as a Figma source typo and * normalized to 24/7 to match desktop, since the doc gives no * indication the hours differ by viewport. */ --loa-process-m-pad-y: 64px; --loa-process-m-pad-x: 20px; --loa-process-m-header-gap: 48px; /* header block -> step list */ --loa-process-m-h2-size: 16px; --loa-process-m-h2-color: #e6e0e9; --loa-process-m-intro-color: #cbc4d2; --loa-process-m-intro-max: 320px; /* Doc gives three different inter-step gaps (93px / 100px / 93px) * with no explained logic — likely Figma auto-layout measurement * artifacts, not a real formula. Same "confirm with Tyler" TBD * pattern as every other cross-viewport spacing question; interim * single value averaging the three. */ --loa-process-m-step-gap: 96px; --loa-process-m-icon-col: 36px; --loa-process-m-text-offset: 64px; --loa-process-m-title-color: #e7c365; --loa-process-m-title-size: 16px; --loa-process-m-title-tracking: 1.6px; --loa-process-m-body-color: #cbc4d2; --loa-process-m-body-size: 13px; /* Testimonial (UI-11 desktop / UI-12 mobile). Figma desktop node * 95:190, mobile node 111:54. Quote/name/title never filled in by * CON-07 -- pulled directly from Figma per the same precedent as * Specialties/Destinations/Process. Avatar photo asset BLOCKED (same * sandbox network-allowlist failure as the Process icons) -- slot * reserved at spec size, empty until Byrne supplies a real photo. */ --loa-testimonial-bg: var(--loa-ink); --loa-testimonial-pad-y: 128px; --loa-testimonial-pad-x: clamp(24px, 12.5vw, 240px); /* same interim clamp rationale as roster/specialties/destinations/process */ --loa-testimonial-inner-pad-x: 32px; --loa-testimonial-quote-mark-size: 320px; --loa-testimonial-quote-mark-color: rgba(255, 255, 255, 0.02); --loa-testimonial-divider-w: 64px; --loa-testimonial-divider-color: var(--loa-gold); --loa-testimonial-divider-gap: 48px; /* divider -> quote */ /* Byrne 2026-09-25 (v0.17.3): 36px/52px, down from Figma's 47.8px/48px. * Figma only ever showed a one-line quote; the rotator's longest * quote ran 7 tightly packed lines at that size. */ --loa-testimonial-quote-size: 36px; --loa-testimonial-quote-line: 52px; --loa-testimonial-quote-max: 1024px; --loa-testimonial-quote-gap: 64px; /* quote -> attribution */ --loa-testimonial-avatar-size: 80px; --loa-testimonial-avatar-border: rgba(212, 175, 55, 0.3); --loa-testimonial-avatar-gap: 24px; /* avatar -> name */ --loa-testimonial-name-size: 18px; --loa-testimonial-name-tracking: 1.8px; --loa-testimonial-title-color: var(--loa-gold); --loa-testimonial-title-tracking: 2.4px; /* Mobile testimonial (UI-12). No decorative quote mark, no gold * divider (doc: "confirm with Lynette Owens if divider should be * added" -- interim: omit, same TBD-defer-to-interim pattern as every * other unresolved mobile design question in this project). */ --loa-testimonial-m-bg: #1d1b20; --loa-testimonial-m-pad-y-top: 62px; --loa-testimonial-m-pad-y-bottom: 64px; --loa-testimonial-m-pad-x: 20px; --loa-testimonial-m-quote-size: 20px; --loa-testimonial-m-quote-color: #e6e0e9; --loa-testimonial-m-quote-max: 530px; --loa-testimonial-m-quote-gap: 32px; --loa-testimonial-m-avatar-size: 64px; --loa-testimonial-m-avatar-gap: 16px; --loa-testimonial-m-name-size: 16px; --loa-testimonial-m-name-tracking: 1.6px; --loa-testimonial-m-title-color: #cbc4d2; /* Closing CTA (UI-13). Figma node 95:206. CON-08 never filled in -- * copy pulled directly from Figma. No mobile Figma frame exists for * this section -- doc explicitly flags this as a question for * Byrne/Lynette to confirm; interim mobile treatment below is fluid * scaling, not a distinct mobile design. Ghost-link arrow icon * (node 95:220) BLOCKED -- same sandbox network-allowlist failure as * every other Figma asset pull this build; slot reserved empty. */ --loa-closing-cta-border-top: 1px solid rgba(255, 255, 255, 0.05); --loa-closing-cta-pad-top: 161px; --loa-closing-cta-pad-bottom: 160px; --loa-closing-cta-pad-x: clamp(24px, 18.9vw, 272px); --loa-closing-cta-max: 1440px; --loa-closing-cta-inner-max: 896px; --loa-closing-cta-eyebrow-size: 12px; --loa-closing-cta-eyebrow-tracking: 4.8px; --loa-closing-cta-eyebrow-color: var(--loa-gold); --loa-closing-cta-eyebrow-gap: 24px; /* eyebrow -> heading */ --loa-closing-cta-heading-size: 72px; --loa-closing-cta-heading-line: 72px; --loa-closing-cta-heading-color: #ffffff; --loa-closing-cta-heading-gap: 32px; /* heading -> body */ --loa-closing-cta-body-size: 20px; --loa-closing-cta-body-line: 28px; --loa-closing-cta-body-color: #94a3b8; --loa-closing-cta-body-max: 672px; --loa-closing-cta-body-gap: 48px; /* body -> CTA row */ --loa-closing-cta-row-gap: 32px; --loa-closing-cta-row-pad-top: 32px; --loa-closing-cta-btn-height: 80px; --loa-closing-cta-btn-pad-x: 64px; --loa-closing-cta-btn-bg: var(--loa-gold); --loa-closing-cta-btn-color: #000000; --loa-closing-cta-btn-size: 12px; --loa-closing-cta-btn-tracking: 3.6px; --loa-closing-cta-link-color: #ffffff; --loa-closing-cta-link-size: 12px; --loa-closing-cta-link-tracking: 3.6px; --loa-closing-cta-link-icon-w: 14px; --loa-closing-cta-link-icon-h: 16px; --loa-closing-cta-link-icon-gap: 8px; /* Mobile closing CTA -- interim fluid scaling only (no dedicated * mobile Figma frame; see flag above). */ --loa-closing-cta-m-pad-top: 80px; --loa-closing-cta-m-pad-bottom: 80px; --loa-closing-cta-m-pad-x: 24px; --loa-closing-cta-m-heading-size: 36px; --loa-closing-cta-m-heading-line: 40px; --loa-closing-cta-m-body-size: 16px; --loa-closing-cta-m-body-line: 24px; --loa-closing-cta-m-btn-height: 64px; --loa-closing-cta-m-btn-pad-x: 40px; /* Footer (UI-14 desktop / UI-15 mobile). Figma desktop node * 95:222, mobile node 111:126. CON-09 never filled in -- pulled * directly from Figma. Brand mark uses the real LOA wordmark asset * (see content.php comment) instead of Figma's placeholder logo+text * on both viewports -- wordmark-max-w values below are a judgment * call sizing the existing header asset to fit each brand column, * not a Figma-specified dimension. Social/mail icons BLOCKED -- * Byrne confirmed reserved empty slots, same policy as every other * blocked asset this build. */ --loa-footer-bg: #000000; --loa-footer-border-top: 1px solid rgba(255, 255, 255, 0.05); --loa-footer-pad-top: 97px; --loa-footer-pad-bottom: 96px; --loa-footer-pad-x: clamp(24px, 12.5vw, 240px); /* same interim clamp rationale as roster/specialties/destinations/process/testimonial */ --loa-footer-max: 1440px; --loa-footer-grid-gap: 64px; --loa-footer-wordmark-max-w: 180px; --loa-footer-brand-gap: 30.8px; --loa-footer-logo-row-gap: 12px; --loa-footer-tagline-color: #64748b; --loa-footer-tagline-size: 14px; --loa-footer-tagline-line: 22.75px; --loa-footer-tagline-max: 320px; --loa-footer-social-gap: 24px; --loa-footer-social-icon-w: 20px; --loa-footer-social-icon-h: 24px; --loa-footer-heading-size: 12px; --loa-footer-heading-tracking: 2.4px; --loa-footer-heading-color: #ffffff; --loa-footer-col-gap: 32px; /* heading -> link list */ --loa-footer-link-color: #64748b; --loa-footer-link-size: 12px; --loa-footer-link-tracking: 1.2px; --loa-footer-link-gap: 20px; --loa-footer-concierge-gap: 24px; --loa-footer-concierge-copy-color: #64748b; --loa-footer-concierge-copy-size: 12px; --loa-footer-concierge-copy-line: 19.5px; --loa-footer-email-color: #ffffff; --loa-footer-email-size: 12px; --loa-footer-email-tracking: 1.2px; --loa-footer-email-gap: 8px; --loa-footer-mail-icon-w: 14px; --loa-footer-mail-icon-h: 16px; --loa-footer-bottom-border: 1px solid rgba(255, 255, 255, 0.05); --loa-footer-bottom-pad-top: 49px; --loa-footer-copyright-color: #475569; --loa-footer-copyright-size: 10px; --loa-footer-copyright-tracking: 2px; --loa-footer-legal-gap: 32px; /* Mobile footer (UI-15) */ --loa-footer-m-bg: #0f0d13; --loa-footer-m-pad-top: 49px; --loa-footer-m-pad-bottom: 48px; --loa-footer-m-pad-x: 20px; --loa-footer-m-block-gap: 48px; --loa-footer-m-wordmark-max-w: 200px; --loa-footer-m-brand-gap: 24px; --loa-footer-m-social-gap: 24px; --loa-footer-m-social-icon: 24px; --loa-footer-m-grid-gap: 24px; --loa-footer-m-col-gap: 16px; --loa-footer-m-heading-color: #e7c365; --loa-footer-m-heading-size: 12px; --loa-footer-m-heading-tracking: 1.2px; --loa-footer-m-link-color: #948e9c; --loa-footer-m-link-size: 14px; --loa-footer-m-link-gap: 8px; --loa-footer-m-bottom-pad-top: 25px; --loa-footer-m-bottom-gap: 16px; --loa-footer-m-copyright-color: #948e9c; --loa-footer-m-copyright-size: 10px; --loa-footer-m-legal-gap: 16px; /* Legal pages (Privacy Policy / future Terms of Service). No Figma * frame exists for this content type -- values below are a judgment * call matching the rest of the site's typography/spacing scale, * not a design pull. */ --loa-legal-bg: var(--loa-ink); --loa-legal-pad-y: 128px; --loa-legal-pad-x: clamp(24px, 12.5vw, 240px); --loa-legal-max: 896px; --loa-legal-title-size: 48px; --loa-legal-title-line: 52px; --loa-legal-title-color: #ffffff; --loa-legal-meta-color: #64748b; --loa-legal-meta-size: 14px; --loa-legal-meta-gap: 48px; /* meta -> intro */ --loa-legal-section-gap: 48px; --loa-legal-h2-size: 24px; --loa-legal-h2-color: #d4af37; --loa-legal-h2-gap: 20px; /* h2 -> first block */ --loa-legal-p-color: #cbd5e1; --loa-legal-p-size: 16px; --loa-legal-p-line: 26px; --loa-legal-p-gap: 16px; --loa-legal-list-indent: 24px; /* Links in legal copy (v0.21.0): the Terms Section 7 Privacy Policy link and the Contact Us mailto. Without these they fell back to browser-default blue on the ink background. */ --loa-legal-link-color: var(--loa-gold); --loa-legal-link-underline: var(--loa-gold-underline); --loa-legal-link-offset: 3px; /* Mobile legal pages */ --loa-legal-m-pad-y: 64px; --loa-legal-m-pad-x: 20px; --loa-legal-m-title-size: 32px; --loa-legal-m-title-line: 38px; --loa-legal-m-h2-size: 20px; /* Contact Modal (NAV-05 "Inquire Now"). Figma node 393:75 is drawn at * a 2238px-wide frame — far larger than the site's 1440px content * max-width used everywhere else. Rather than reproduce that literal * scale (which would make labels/inputs enormous relative to every * other component), all pixel values below are the Figma numbers * scaled by 1440/2238 (~0.6434) so the modal sits on the same visual * scale as the rest of the site, then rounded to the nearest value * that already exists in the design system where one was close * (e.g. eyebrow 12px/3.6px matches specialties/destinations exactly; * button height 80px matches the UI-13 closing CTA's primary button). * Byrne 2026-07-31: scope decided as a modal (not a page), fields are * name/email/phone/message, submits via wp_mail() to byrne@lynette * owens.com. Mobile layout has no Figma frame — interim: single * column, image hidden, flagged TBD like every other mobile gap. */ --loa-modal-max-w: 1440px; --loa-modal-media-w: 567px; /* 881px * scale, desktop only */ --loa-modal-media-opacity: 0.4; /* Figma: opacity-40 on the image container */ /* Byrne 2026-08-09 (Figma node 401:708 — a screenshot of the live * site at 44% opacity, used as a quick way to spec the treatment): * the modal should read as a dimmed LAYER over whatever page the * user was on, not a near-opaque wall. 0.56 backdrop opacity lets * ~44% of the page behind show through, matching that reference. */ --loa-modal-backdrop: rgba(6, 5, 8, 0.56); --loa-modal-bg: var(--loa-ink); /* #0f1115, matches the Figma frame's own bg rect */ --loa-modal-gutter: 64px; /* form-panel inset; ~87px scaled, rounded to an existing gutter-scale value */ --loa-modal-eyebrow-size: 12px; /* reused eyebrow scale (specialties/destinations) over the literal scaled 18.7px */ --loa-modal-eyebrow-tracking: 3.6px; --loa-modal-heading-size: 72px; /* scaled value ~74.6px; 72px reuses the UI-13 closing-CTA H2 size exactly */ --loa-modal-label-color: #837f8c; --loa-modal-label-size: 12px; --loa-modal-label-tracking: 2.4px; --loa-modal-input-size: 18px; /* Figma's literal 35px value-text was mockup-scale; 18px is a normal readable input size */ --loa-modal-input-color: #e6e0e9; --loa-modal-placeholder-color: #45414d; --loa-modal-divider: rgba(255, 255, 255, 0.12); --loa-modal-col-gap: 39px; /* 60px scaled */ --loa-modal-row-gap: 32px; --loa-modal-btn-h: 80px; /* scaled ~76.6px; 80px reuses the UI-13 CTA button height */ --loa-modal-concierge-color: #d4b038; --loa-modal-concierge-size: 44px; /* scaled ~56.6px, reduced further to sit comfortably over a 567px-wide image */ --loa-modal-trust-color: var(--loa-specialties-descriptor-color); /* #94a3b8 — exact match to Figma's #94a3b8 */ --loa-modal-trust-size: 14px; /* About page (UI-16). No Figma frame exists for this page -- same * situation as the legal pages, so the values below are a judgment * call reusing the site's established typography and spacing scale * rather than a design pull. Where an existing component already * had the right value it is referenced or matched exactly (eyebrow * 12px/3.6px = specialties/destinations; h2 48px = specialties; * body 16px/26px = legal), so the page reads as part of the same * system. Flag inconsistencies for the future design pass instead * of guessing at a fix, per the ticket's QA notes. */ --loa-about-bg: var(--loa-ink); --loa-about-pad-x: clamp(24px, 12.5vw, 240px); --loa-about-max: 1440px; --loa-about-narrow-max: 768px; /* reading measure for prose */ --loa-about-section-pad-y: 96px; --loa-about-masthead-pad-top: 128px; --loa-about-masthead-pad-bottom: 24px; --loa-about-eyebrow-size: 12px; --loa-about-eyebrow-tracking: 3.6px; --loa-about-eyebrow-color: var(--loa-gold); --loa-about-eyebrow-gap: 24px; --loa-about-title-size: 64px; --loa-about-title-line: 70px; --loa-about-title-color: #ffffff; --loa-about-lede-size: 20px; --loa-about-lede-line: 32px; --loa-about-lede-color: #94a3b8; --loa-about-lede-gap: 32px; --loa-about-h2-size: 36px; --loa-about-h2-color: #ffffff; --loa-about-h2-gap: 32px; --loa-about-p-size: 16px; --loa-about-p-line: 28px; --loa-about-p-color: #cbd5e1; --loa-about-p-gap: 20px; --loa-about-rule: rgba(255, 255, 255, 0.08); /* Mission callout (acceptance criterion #4) */ --loa-about-mission-bg: rgba(255, 255, 255, 0.03); --loa-about-mission-border: rgba(212, 175, 55, 0.25); --loa-about-mission-pad-y: 72px; --loa-about-mission-heading-size: 12px; --loa-about-mission-heading-tracking: 3.6px; --loa-about-mission-size: 26px; --loa-about-mission-line: 40px; --loa-about-mission-color: #e6e0e9; /* Service tiers. The About page no longer shows tiers (removed * v0.17.0); these stay because the Programs page aliases them. */ --loa-about-tier-bg: #0f172a; /* matches specialties cards */ --loa-about-tier-border: rgba(255, 255, 255, 0.05); --loa-about-tier-pad: 32px; --loa-about-tier-gap: 24px; --loa-about-tier-name-size: 22px; --loa-about-tier-name-color: var(--loa-gold); --loa-about-tier-name-tracking: 2.2px; /* Recognition + memberships lists */ --loa-about-award-gap: 20px; --loa-about-award-name-color: #ffffff; --loa-about-award-name-tracking: 1.2px; /* Pull-quotes: one centered quote at a time in the rotator (v0.17.0). * Size matches the mission callout so the page's two italic * statements read as the same voice. */ --loa-about-quote-max: 820px; --loa-about-quote-size: 26px; --loa-about-quote-line: 40px; --loa-about-quote-color: #e6e0e9; --loa-about-quote-mark-size: 64px; --loa-about-quote-mark-color: var(--loa-gold); --loa-about-quote-mark-gap: 8px; --loa-about-quote-cite-gap: 24px; --loa-about-quote-cite-size: 12px; --loa-about-quote-cite-tracking: 1.8px; --loa-about-quote-cite-color: #94a3b8; /* Editorial figures (v0.17.0). The float sits in the story's * right edge with text wrapping around it; the wide figure runs the * full reading measure. Caption grey matches the lede and quote * citation grey. */ --loa-about-figure-float-w: 45%; --loa-about-figure-float-gap: 32px; /* space between photo and wrapped text */ --loa-about-figure-float-below: 24px; --loa-about-figure-wide-gap: 40px; /* space above and below the wide figure */ --loa-about-figcaption-gap: 12px; --loa-about-figcaption-size: 13px; --loa-about-figcaption-line: 20px; --loa-about-figcaption-color: #94a3b8; /* Team table */ --loa-about-team-head-size: 11px; --loa-about-team-head-tracking: 2.2px; --loa-about-team-head-color: var(--loa-gold); --loa-about-team-cell-pad-y: 20px; --loa-about-team-name-color: #ffffff; --loa-about-team-cell-color: #94a3b8; /* Team profiles (v0.33.0) */ --loa-about-profile-gap: 40px; --loa-about-profile-photo: 160px; --loa-about-profile-ring: var(--loa-gold); --loa-about-profile-initials-size: 44px; --loa-about-profile-name-gap: 20px; --loa-about-profile-email-gap: 10px; --loa-about-profile-email-size: 14px; /* Mobile about page */ --loa-about-m-pad-x: 20px; --loa-about-m-section-pad-y: 56px; --loa-about-m-masthead-pad-top: 64px; --loa-about-m-title-size: 34px; --loa-about-m-title-line: 40px; --loa-about-m-lede-size: 16px; --loa-about-m-lede-line: 26px; --loa-about-m-h2-size: 24px; --loa-about-m-mission-size: 19px; --loa-about-m-mission-line: 30px; --loa-about-m-quote-size: 19px; --loa-about-m-quote-line: 30px; --loa-about-m-quote-mark-size: 48px; --loa-about-m-figure-float-below: 20px; /* Rotator controls (rotator.css). Shared: the homepage testimonial * will reuse these when it gets the same treatment. */ --loa-rotator-color: var(--loa-gold); --loa-rotator-hit: 24px; /* WCAG 2.5.8 minimum target */ --loa-rotator-dot: 8px; --loa-rotator-icon: 10px; --loa-rotator-controls-gap: 8px; --loa-rotator-controls-top: 32px; /* Programs page (UI-17). No Figma frame exists for this page either, * so every value below aliases the About page token of the same * role: the two standalone content pages are one visual system and * a future design pass should retune them together. The only * Programs-specific values are the fee line under each tier name and * the italic bridge line after the program-type grid, both sized * from existing About values (fee = award-name; bridge = mission, * one step smaller). */ --loa-programs-bg: var(--loa-about-bg); --loa-programs-pad-x: var(--loa-about-pad-x); --loa-programs-max: var(--loa-about-max); --loa-programs-narrow-max: var(--loa-about-narrow-max); --loa-programs-section-pad-y: var(--loa-about-section-pad-y); --loa-programs-masthead-pad-top: var(--loa-about-masthead-pad-top); --loa-programs-masthead-pad-bottom: 48px; --loa-programs-eyebrow-size: var(--loa-about-eyebrow-size); --loa-programs-eyebrow-tracking: var(--loa-about-eyebrow-tracking); --loa-programs-eyebrow-color: var(--loa-about-eyebrow-color); --loa-programs-eyebrow-gap: var(--loa-about-eyebrow-gap); --loa-programs-title-size: var(--loa-about-title-size); --loa-programs-title-line: var(--loa-about-title-line); --loa-programs-title-color: var(--loa-about-title-color); --loa-programs-lede-size: var(--loa-about-lede-size); --loa-programs-lede-line: var(--loa-about-lede-line); --loa-programs-lede-color: var(--loa-about-lede-color); --loa-programs-lede-gap: var(--loa-about-lede-gap); --loa-programs-h2-size: var(--loa-about-h2-size); --loa-programs-h2-color: var(--loa-about-h2-color); --loa-programs-h2-gap: var(--loa-about-h2-gap); --loa-programs-p-size: var(--loa-about-p-size); --loa-programs-p-line: var(--loa-about-p-line); --loa-programs-p-color: var(--loa-about-p-color); --loa-programs-rule: var(--loa-about-rule); --loa-programs-card-bg: var(--loa-about-tier-bg); --loa-programs-card-border: var(--loa-about-tier-border); --loa-programs-card-pad: var(--loa-about-tier-pad); --loa-programs-card-gap: var(--loa-about-tier-gap); --loa-programs-card-name-size: var(--loa-about-tier-name-size); --loa-programs-card-name-color: var(--loa-about-tier-name-color); --loa-programs-card-name-tracking: var(--loa-about-tier-name-tracking); --loa-programs-fee-size: 12px; --loa-programs-fee-tracking: var(--loa-about-award-name-tracking); --loa-programs-fee-color: var(--loa-about-award-name-color); --loa-programs-closing-size: 22px; --loa-programs-closing-line: 34px; --loa-programs-closing-color: var(--loa-about-mission-color); --loa-programs-m-pad-x: var(--loa-about-m-pad-x); --loa-programs-m-section-pad-y: var(--loa-about-m-section-pad-y); --loa-programs-m-masthead-pad-top: var(--loa-about-m-masthead-pad-top); --loa-programs-m-title-size: var(--loa-about-m-title-size); --loa-programs-m-title-line: var(--loa-about-m-title-line); --loa-programs-m-lede-size: var(--loa-about-m-lede-size); --loa-programs-m-lede-line: var(--loa-about-m-lede-line); --loa-programs-m-h2-size: var(--loa-about-m-h2-size); --loa-programs-m-closing-size: 18px; --loa-programs-m-closing-line: 28px; /* Council teaser (UI-21): aliases only. Gap = Specialties card gap * (48px), mobile gap = Properties mobile grid gap (32px); the link * matches the Specialties card CTA. */ --loa-programs-teaser-gap: var(--loa-specialties-card-gap); --loa-programs-m-teaser-gap: var(--loa-properties-m-grid-gap); --loa-programs-teaser-link-tracking: var(--loa-specialties-cta-tracking); --loa-programs-teaser-link-underline: var(--loa-specialties-cta-underline); --loa-programs-teaser-img-bg: var(--loa-programs-card-bg); /* "Shape Your Program" (UI-17 TN 10): the NAV-05 header CTA values. */ --loa-programs-types-cta-h: var(--loa-cta-h); --loa-programs-types-cta-pad-x: var(--loa-cta-pad-x); --loa-programs-types-cta-tracking: var(--loa-nav-tracking); --loa-programs-types-cta-gap: 32px; /* Properties page (UI-18). No Figma frame exists. Same rule as the * Programs block above: every value ALIASES an existing token of the * same role, so a future design pass retunes About, Programs and * Properties together. Masthead, measure and card values alias the * Programs tokens; the tile's location label aliases the homepage * Destinations label (gold, 1.4px tracking) so a property reads the * same on both surfaces. The only new values are the property-name * size/line and the small gaps inside a tile. */ --loa-properties-bg: var(--loa-programs-bg); --loa-properties-pad-x: var(--loa-programs-pad-x); --loa-properties-max: var(--loa-programs-max); --loa-properties-narrow-max: var(--loa-programs-narrow-max); --loa-properties-section-pad-y: var(--loa-programs-section-pad-y); --loa-properties-masthead-pad-top: var(--loa-programs-masthead-pad-top); --loa-properties-masthead-pad-bottom: var(--loa-programs-masthead-pad-bottom); --loa-properties-eyebrow-size: var(--loa-programs-eyebrow-size); --loa-properties-eyebrow-tracking: var(--loa-programs-eyebrow-tracking); --loa-properties-eyebrow-color: var(--loa-programs-eyebrow-color); --loa-properties-eyebrow-gap: var(--loa-programs-eyebrow-gap); --loa-properties-title-size: var(--loa-programs-title-size); --loa-properties-title-line: var(--loa-programs-title-line); --loa-properties-title-color: var(--loa-programs-title-color); --loa-properties-lede-size: var(--loa-programs-lede-size); --loa-properties-lede-line: var(--loa-programs-lede-line); --loa-properties-lede-color: var(--loa-programs-lede-color); --loa-properties-lede-gap: var(--loa-programs-lede-gap); --loa-properties-p-size: var(--loa-programs-p-size); --loa-properties-p-line: var(--loa-programs-p-line); --loa-properties-p-color: var(--loa-programs-p-color); --loa-properties-grid-gap: 48px; /* UI-18 Technical Note 9 */ --loa-properties-card-bg: var(--loa-programs-card-bg); --loa-properties-card-border: var(--loa-programs-card-border); --loa-properties-card-pad: var(--loa-programs-card-pad); --loa-properties-img-placeholder: var(--loa-programs-card-bg); --loa-properties-name-size: var(--loa-destinations-title-size); --loa-properties-name-line: 32px; --loa-properties-name-color: var(--loa-programs-h2-color); --loa-properties-name-gap: 8px; --loa-properties-location-size: 14px; /* = .loa-destinations__label */ --loa-properties-location-tracking: var(--loa-destinations-label-tracking); --loa-properties-location-color: var(--loa-destinations-label-color); --loa-properties-location-gap: 16px; --loa-properties-m-pad-x: var(--loa-programs-m-pad-x); --loa-properties-m-section-pad-y: var(--loa-programs-m-section-pad-y); --loa-properties-m-masthead-pad-top: var(--loa-programs-m-masthead-pad-top); --loa-properties-m-title-size: var(--loa-programs-m-title-size); --loa-properties-m-title-line: var(--loa-programs-m-title-line); --loa-properties-m-lede-size: var(--loa-programs-m-lede-size); --loa-properties-m-lede-line: var(--loa-programs-m-lede-line); --loa-properties-m-grid-gap: 32px; --loa-properties-m-name-size: 20px; --loa-properties-m-name-line: 28px; --loa-properties-m-location-size: var(--loa-destinations-m-label-size); /* Outbound "Visit Website" link (v0.27.0): same look as the Advisory Council "See all properties" label link, gold on the legal-link tokens. */ --loa-properties-visit-gap: 24px; --loa-properties-visit-size: var(--loa-programs-fee-size); --loa-properties-visit-tracking: var(--loa-programs-fee-tracking); --loa-properties-link-color: var(--loa-legal-link-color); --loa-properties-link-underline: var(--loa-legal-link-underline); --loa-properties-link-offset: var(--loa-legal-link-offset); /* Tile anchors (UI-18 TN 10): an anchored tile scrolls to just below * the sticky header. The header renders 1px taller than its height * token (bottom border), so a bare header-height offset hid the * tile's top border; the gap token adds breathing room. */ --loa-properties-anchor-gap: 16px; --loa-properties-anchor-offset: calc(var(--loa-header-h-desktop) + var(--loa-properties-anchor-gap)); --loa-properties-m-anchor-offset: calc(var(--loa-header-h-mobile) + var(--loa-properties-anchor-gap)); /* Staging password page (v0.29.0, inc/gate.php). Fields alias the * /plan/ questionnaire, the button aliases the closing CTA. */ --loa-gate-bg: var(--loa-ink); --loa-gate-max: 480px; --loa-gate-pad: 24px; --loa-gate-logo-gap: 48px; --loa-gate-title-size: var(--loa-not-found-m-title-size); --loa-gate-title-line: var(--loa-not-found-m-title-line); --loa-gate-title-color: var(--loa-not-found-title-color); --loa-gate-body-size: var(--loa-not-found-m-lede-size); --loa-gate-body-line: var(--loa-not-found-m-lede-line); --loa-gate-body-color: var(--loa-not-found-lede-color); --loa-gate-body-gap: 16px; --loa-gate-form-gap: 40px; --loa-gate-label-size: var(--loa-plan-label-size); --loa-gate-label-tracking: var(--loa-plan-label-tracking); --loa-gate-label-color: var(--loa-plan-label-color); --loa-gate-label-gap: 12px; --loa-gate-input-size: var(--loa-plan-input-size); --loa-gate-input-color: var(--loa-plan-input-color); --loa-gate-input-divider: var(--loa-plan-input-divider); --loa-gate-input-focus: var(--loa-plan-input-focus); --loa-gate-error-color: var(--loa-plan-error-color); --loa-gate-btn-gap: 32px; --loa-gate-btn-h: var(--loa-plan-btn-h); --loa-gate-btn-pad-x: var(--loa-plan-btn-pad-x); --loa-gate-btn-bg: var(--loa-closing-cta-btn-bg); --loa-gate-btn-color: var(--loa-closing-cta-btn-color); --loa-gate-btn-size: var(--loa-closing-cta-btn-size); --loa-gate-btn-tracking: var(--loa-closing-cta-btn-tracking); --loa-gate-btn-hover: var(--loa-plan-btn-hover); /* Page Not Found ([Web] UI-24, v0.28.0). No Figma frame: the masthead * aliases the Properties masthead, and the page links alias the * Advisory Council "See all properties" label link (gold, uppercase, * 500 weight, 12px, legal-link underline). */ --loa-not-found-bg: var(--loa-properties-bg); --loa-not-found-pad-x: var(--loa-properties-pad-x); --loa-not-found-max: var(--loa-properties-max); --loa-not-found-narrow-max: var(--loa-properties-narrow-max); --loa-not-found-masthead-pad-top: var(--loa-properties-masthead-pad-top); --loa-not-found-masthead-pad-bottom: var(--loa-properties-masthead-pad-bottom); --loa-not-found-eyebrow-size: var(--loa-properties-eyebrow-size); --loa-not-found-eyebrow-tracking: var(--loa-properties-eyebrow-tracking); --loa-not-found-eyebrow-color: var(--loa-properties-eyebrow-color); --loa-not-found-eyebrow-gap: var(--loa-properties-eyebrow-gap); --loa-not-found-title-size: var(--loa-properties-title-size); --loa-not-found-title-line: var(--loa-properties-title-line); --loa-not-found-title-color: var(--loa-properties-title-color); --loa-not-found-lede-size: var(--loa-properties-lede-size); --loa-not-found-lede-line: var(--loa-properties-lede-line); --loa-not-found-lede-color: var(--loa-properties-lede-color); --loa-not-found-lede-gap: var(--loa-properties-lede-gap); --loa-not-found-links-gap-top: var(--loa-properties-lede-gap); --loa-not-found-link-size: var(--loa-properties-visit-size); --loa-not-found-link-tracking: var(--loa-properties-visit-tracking); --loa-not-found-link-color: var(--loa-legal-link-color); --loa-not-found-link-underline: var(--loa-legal-link-underline); --loa-not-found-link-offset: var(--loa-legal-link-offset); --loa-not-found-links-gap: 32px; --loa-not-found-m-links-gap: 16px; --loa-not-found-m-pad-x: var(--loa-properties-m-pad-x); --loa-not-found-m-masthead-pad-top: var(--loa-properties-m-masthead-pad-top); --loa-not-found-m-title-size: var(--loa-properties-m-title-size); --loa-not-found-m-title-line: var(--loa-properties-m-title-line); --loa-not-found-m-lede-size: var(--loa-properties-m-lede-size); --loa-not-found-m-lede-line: var(--loa-properties-m-lede-line); /* Inline prose links on About (2026-09-27): same gold as legal links. */ --loa-about-link-color: var(--loa-legal-link-color); --loa-about-link-underline: var(--loa-legal-link-underline); --loa-about-link-offset: var(--loa-legal-link-offset); /* Advisory Council page (UI-20). No Figma frame exists. Same rule as * the Programs and Properties blocks: every value ALIASES an existing * token of the same role, so a future design pass retunes all the * standalone pages together. Masthead, measure, prose and grid gaps * alias Programs; the week grid gap aliases the Properties grid gap * (48px, UI-20 TN 8); figure, caption and quote alias About; list * labels alias the About award-name label; links alias the legal * link gold. */ --loa-council-bg: var(--loa-programs-bg); --loa-council-pad-x: var(--loa-programs-pad-x); --loa-council-max: var(--loa-programs-max); --loa-council-narrow-max: var(--loa-programs-narrow-max); --loa-council-section-pad-y: var(--loa-programs-section-pad-y); --loa-council-masthead-pad-top: var(--loa-programs-masthead-pad-top); --loa-council-masthead-pad-bottom: var(--loa-programs-masthead-pad-bottom); --loa-council-rule: var(--loa-programs-rule); --loa-council-eyebrow-size: var(--loa-programs-eyebrow-size); --loa-council-eyebrow-tracking: var(--loa-programs-eyebrow-tracking); --loa-council-eyebrow-color: var(--loa-programs-eyebrow-color); --loa-council-eyebrow-gap: var(--loa-programs-eyebrow-gap); --loa-council-title-size: var(--loa-programs-title-size); --loa-council-title-line: var(--loa-programs-title-line); --loa-council-title-color: var(--loa-programs-title-color); --loa-council-lede-size: var(--loa-programs-lede-size); --loa-council-lede-line: var(--loa-programs-lede-line); --loa-council-lede-color: var(--loa-programs-lede-color); --loa-council-lede-gap: var(--loa-programs-lede-gap); --loa-council-h2-size: var(--loa-programs-h2-size); --loa-council-h2-color: var(--loa-programs-h2-color); --loa-council-h2-gap: var(--loa-programs-h2-gap); --loa-council-p-size: var(--loa-programs-p-size); --loa-council-p-line: var(--loa-programs-p-line); --loa-council-p-color: var(--loa-programs-p-color); --loa-council-p-gap: var(--loa-about-p-gap); --loa-council-strong-color: var(--loa-about-award-name-color); --loa-council-label-size: var(--loa-programs-fee-size); --loa-council-label-tracking: var(--loa-programs-fee-tracking); --loa-council-label-color: var(--loa-programs-eyebrow-color); --loa-council-label-gap: var(--loa-about-h2-gap); --loa-council-block-gap: var(--loa-about-figure-wide-gap); --loa-council-grid-gap: var(--loa-properties-grid-gap); --loa-council-list-gap: var(--loa-programs-card-gap); --loa-council-item-label-color: var(--loa-programs-card-name-color); --loa-council-figcaption-gap: var(--loa-about-figcaption-gap); --loa-council-figcaption-size: var(--loa-about-figcaption-size); --loa-council-figcaption-line: var(--loa-about-figcaption-line); --loa-council-figcaption-color: var(--loa-about-figcaption-color); --loa-council-year-color: var(--loa-programs-card-name-color); --loa-council-year-w: 96px; --loa-council-link-color: var(--loa-legal-link-color); --loa-council-link-underline: var(--loa-legal-link-underline); --loa-council-link-offset: var(--loa-legal-link-offset); --loa-council-quote-max: var(--loa-about-quote-max); --loa-council-quote-size: var(--loa-about-quote-size); --loa-council-quote-line: var(--loa-about-quote-line); --loa-council-quote-color: var(--loa-about-quote-color); --loa-council-quote-mark-size: var(--loa-about-quote-mark-size); --loa-council-quote-mark-color: var(--loa-about-quote-mark-color); --loa-council-quote-mark-gap: var(--loa-about-quote-mark-gap); --loa-council-quote-cite-gap: var(--loa-about-quote-cite-gap); --loa-council-quote-cite-size: var(--loa-about-quote-cite-size); --loa-council-quote-cite-tracking: var(--loa-about-quote-cite-tracking); --loa-council-quote-cite-color: var(--loa-about-quote-cite-color); --loa-council-m-pad-x: var(--loa-programs-m-pad-x); --loa-council-m-section-pad-y: var(--loa-programs-m-section-pad-y); --loa-council-m-masthead-pad-top: var(--loa-programs-m-masthead-pad-top); --loa-council-m-title-size: var(--loa-programs-m-title-size); --loa-council-m-title-line: var(--loa-programs-m-title-line); --loa-council-m-lede-size: var(--loa-programs-m-lede-size); --loa-council-m-lede-line: var(--loa-programs-m-lede-line); --loa-council-m-h2-size: var(--loa-programs-m-h2-size); --loa-council-m-grid-gap: var(--loa-properties-m-grid-gap); --loa-council-m-quote-size: var(--loa-about-m-quote-size); --loa-council-m-quote-line: var(--loa-about-m-quote-line); --loa-council-m-quote-mark-size: var(--loa-about-m-quote-mark-size); /* Editorial photos (v0.23.0). A float figure takes this share of the * 768px text column, plus the whole empty margin to its right; text * wraps in the rest. Gaps alias the About float figure. The hero is a * full-bleed banner whose height scales with the viewport. */ --loa-council-float-w: 40%; --loa-council-overhang-max: 360px; /* caps the reach into the margin on very wide screens */ --loa-council-float-gap: var(--loa-about-figure-float-gap); --loa-council-float-below: var(--loa-about-figure-float-below); --loa-council-hero-h: clamp(240px, 42vw, 640px); --loa-council-hero-focus: 50% 45%; --loa-council-hero-bg: var(--loa-programs-card-bg); --loa-council-hero-masthead-pad-top: var(--loa-about-m-masthead-pad-top); /* Plan Your Program questionnaire (UI-23). No Figma frame exists. Same * rule as the Programs, Properties and Council blocks: the page values * alias Programs, and the form values alias the NAV-05 modal's field * tokens so the two forms read as one family (UI-23 TN 3). New values: * the question size/gap, the 56px step button (TN 7), the 2px progress * bar (TN 7) and the card border (TN 14, same value as the header * border). */ --loa-plan-bg: var(--loa-programs-bg); --loa-plan-pad-x: var(--loa-programs-pad-x); --loa-plan-max: var(--loa-programs-max); --loa-plan-narrow-max: var(--loa-programs-narrow-max); --loa-plan-section-pad-y: var(--loa-programs-section-pad-y); --loa-plan-masthead-pad-top: var(--loa-programs-masthead-pad-top); --loa-plan-masthead-pad-bottom: var(--loa-programs-masthead-pad-bottom); --loa-plan-rule: var(--loa-programs-rule); --loa-plan-eyebrow-size: var(--loa-programs-eyebrow-size); --loa-plan-eyebrow-tracking: var(--loa-programs-eyebrow-tracking); --loa-plan-eyebrow-color: var(--loa-programs-eyebrow-color); --loa-plan-eyebrow-gap: var(--loa-programs-eyebrow-gap); --loa-plan-title-size: var(--loa-programs-title-size); --loa-plan-title-line: var(--loa-programs-title-line); --loa-plan-title-color: var(--loa-programs-title-color); --loa-plan-lede-size: var(--loa-programs-lede-size); --loa-plan-lede-line: var(--loa-programs-lede-line); --loa-plan-lede-color: var(--loa-programs-lede-color); --loa-plan-lede-gap: var(--loa-programs-lede-gap); --loa-plan-h2-size: var(--loa-programs-h2-size); --loa-plan-h2-color: var(--loa-programs-h2-color); --loa-plan-h2-gap: var(--loa-programs-h2-gap); --loa-plan-p-size: var(--loa-programs-p-size); --loa-plan-p-line: var(--loa-programs-p-line); --loa-plan-p-color: var(--loa-programs-p-color); --loa-plan-link-color: var(--loa-legal-link-color); --loa-plan-link-underline: var(--loa-legal-link-underline); --loa-plan-link-offset: var(--loa-legal-link-offset); /* Program-type cards (TN 14) */ --loa-plan-card-bg: var(--loa-programs-card-bg); --loa-plan-card-border: var(--loa-header-border); --loa-plan-card-border-checked: var(--loa-gold); --loa-plan-card-pad: var(--loa-programs-card-pad); --loa-plan-card-gap: var(--loa-programs-card-gap); --loa-plan-card-name-size: var(--loa-programs-card-name-size); --loa-plan-card-name-color: var(--loa-programs-card-name-color); --loa-plan-card-name-tracking: var(--loa-programs-card-name-tracking); /* Questions and fields */ --loa-plan-q-size: var(--loa-modal-input-size); --loa-plan-q-line: 28px; --loa-plan-q-color: var(--loa-modal-input-color); --loa-plan-q-gap: 40px; --loa-plan-q-label-gap: 16px; --loa-plan-col-gap: var(--loa-modal-col-gap); --loa-plan-label-size: var(--loa-modal-label-size); --loa-plan-label-tracking: var(--loa-modal-label-tracking); --loa-plan-label-color: var(--loa-modal-label-color); --loa-plan-input-size: var(--loa-modal-input-size); --loa-plan-input-color: var(--loa-modal-input-color); --loa-plan-input-divider: var(--loa-modal-divider); --loa-plan-input-focus: var(--loa-gold); --loa-plan-option-bg: var(--loa-ink); --loa-plan-choice-size: var(--loa-programs-p-size); --loa-plan-choice-color: var(--loa-programs-p-color); --loa-plan-choice-hit: 44px; --loa-plan-check-size: 18px; --loa-plan-helper-size: var(--loa-modal-trust-size); --loa-plan-helper-color: var(--loa-modal-trust-color); --loa-plan-error-color: #e08a8a; /* same value as the modal's error status */ --loa-plan-subhead-size: var(--loa-programs-fee-size); --loa-plan-subhead-tracking: var(--loa-programs-fee-tracking); --loa-plan-subhead-color: var(--loa-programs-eyebrow-color); /* Stepping (TN 7) */ --loa-plan-progress-size: var(--loa-modal-label-size); --loa-plan-progress-tracking: var(--loa-modal-label-tracking); --loa-plan-progress-color: var(--loa-modal-label-color); --loa-plan-progress-h: 2px; --loa-plan-progress-track: var(--loa-header-border); --loa-plan-progress-fill: var(--loa-gold); --loa-plan-btn-h: 56px; --loa-plan-btn-pad-x: var(--loa-hero-btn-pad-x); --loa-plan-btn-tracking: var(--loa-hero-btn-tracking); --loa-plan-btn-hover: #e0c04f; /* hero primary CTA's interim hover */ --loa-plan-back-tracking: var(--loa-specialties-cta-tracking); --loa-plan-back-underline: var(--loa-specialties-cta-underline); --loa-plan-anchor-offset: calc(var(--loa-header-h-desktop) + 16px); --loa-plan-m-anchor-offset: calc(var(--loa-header-h-mobile) + 16px); /* Mobile */ --loa-plan-m-pad-x: var(--loa-programs-m-pad-x); --loa-plan-m-section-pad-y: var(--loa-programs-m-section-pad-y); --loa-plan-m-masthead-pad-top: var(--loa-programs-m-masthead-pad-top); --loa-plan-m-title-size: var(--loa-programs-m-title-size); --loa-plan-m-title-line: var(--loa-programs-m-title-line); --loa-plan-m-lede-size: var(--loa-programs-m-lede-size); --loa-plan-m-lede-line: var(--loa-programs-m-lede-line); --loa-plan-m-h2-size: var(--loa-programs-m-h2-size); --loa-plan-m-card-pad: 24px; /* Layout */ --loa-max-width: 1440px; /* page content sections */ --loa-header-max-width: none; /* Figma/doc said 1440px centered; Byrne 2026-07-15: logo pins to viewport edge, header content is full-bleed */ --loa-gutter: 24px; /* responsive padding below 1920w is TBD in doc */ /* Type */ --loa-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --loa-font-display: "Playfair Display", Georgia, serif; /* Motion */ --loa-ease: cubic-bezier(0.22, 1, 0.36, 1); --loa-speed: 240ms; } @media (prefers-reduced-motion: reduce) { :root { --loa-speed: 0ms; } }