/* ========================================================================== VPAAL — TEMPLATE TYPOGRAPHY (safari / destination / experience / hotel / blog single + archive templates, body.vpaal-tpl) READ THIS BEFORE EDITING. Type on these templates is NOT set here any more. It is set in WP Admin -> Tools -> Typography, the same panel that drives the homepage and every Elementor page. That panel emits one stylesheet containing the full T1..T5 definitions (family, size, weight, line-height, letter-spacing, transform) for every selector registered in vpaal_type_selectors(). Until 2026-08-11 this file redefined --t1-size..--t5-ls on .vpaal-tpl and restated the whole T1..T5 scale with `html body.vpaal-tpl` specificity. Those were meant as fallbacks, but because .vpaal-tpl sits on they always beat the panel's :root values — so these templates silently ran the old scale (T1 64px/700/sentence case) while the rest of the site ran the panel's (T1 44px/500/uppercase). That divergence is the bug this file's rewrite fixes. WHAT LIVES HERE NOW - The two template-only size steps that sit between T1 and T2 (--vpt-feature, --vpt-card). Nothing else on the site needs them. - Colour-by-context rules, kept next to type on purpose. - The handful of sentence-case exceptions to T5. HOW TO CHANGE THINGS - Any T1..T5 value ................... Tools -> Typography - Move an element to another step .... move its selector between the T1..T5 lists in vpaal_type_selectors() (WPCode snippet "VPAAL — Typography control panel") - The wide feature card only ......... --vpt-feature below - The mosaic / bento tile only ....... --vpt-card below Do not reintroduce --t1-size..--t5-ls here. They come from the panel. ========================================================================== */ .vpaal-tpl { /* Template-only steps (between T1 and T2). */ --vpt-feature: clamp(26px, 3.2vw, 40px); /* wide feature card title */ --vpt-card: clamp(19px, 2vw, 26px); /* mosaic tile + bento title */ --vpt-sans: 'Inter', sans-serif; --vpt-mono: 'DM Mono', monospace; } /* -------------------------------------------------------------------------- T1½ — the two template-only steps. Family, letter-spacing and transform still come from the panel (these elements are registered in the T1 / T2 lists); only the size, weight and line-height are overridden here. -------------------------------------------------------------------------- */ html body.vpaal-tpl .vp-scard--wide .vp-scard__title { font-size: var(--vpt-feature) !important; line-height: 1.08 !important; } html body.vpaal-tpl .vp-tile__t, html body.vpaal-tpl .vp-bcard--a .vp-bcard__t, html body.vpaal-tpl .vp-bcard--b .vp-bcard__t { font-size: var(--vpt-card) !important; line-height: 1.14 !important; } /* Definition values in the facts lists read one step up from body. */ html body.vpaal-tpl dl.vp-facts dd, html body.vpaal-tpl .vp-facts.vp-facts dd { font-size: var(--t2-size) !important; } /* -------------------------------------------------------------------------- T5 exceptions — meta that reads better in sentence case. Stays mono, stays T5 size (both inherited from the panel); only casing and tracking differ. -------------------------------------------------------------------------- */ html body.vpaal-tpl .vp-hbar__loc, html body.vpaal-tpl .vp-tile__n, html body.vpaal-tpl .vp-bcard__m { letter-spacing: .02em !important; text-transform: none !important; } /* Numbered highlight counters — pseudo-elements, so they cannot be registered in the panel's selector lists. They read the panel's T5 variables. */ html body.vpaal-tpl .vp-hl li::before, html body.vpaal-tpl .vp-scard__idx { font-family: var(--vpt-mono) !important; font-size: var(--t5-size) !important; font-weight: 500 !important; letter-spacing: var(--t5-ls) !important; } /* -------------------------------------------------------------------------- Colour by context. Kept here so type and its colour live together. -------------------------------------------------------------------------- */ html body.vpaal-tpl .vp-tpl h1, html body.vpaal-tpl .vp-tpl h2, html body.vpaal-tpl .vp-tpl h3, html body.vpaal-tpl .vp-tpl h4 { color: var(--vp-ink); } html body.vpaal-tpl .vp-shero h1, html body.vpaal-tpl .vp-shero h2, html body.vpaal-tpl .vp-tile h2, html body.vpaal-tpl .vp-bcard h2, html body.vpaal-tpl .vp-cta h1, html body.vpaal-tpl .vp-cta h2, html body.vpaal-tpl .vp-sec--dark h2 { color: #fff; } /* Gold, matching the homepage section eyebrows (ABOUT / EXPERIENCES). */ html body.vpaal-tpl .vp-eyebrow { color: var(--vp-gold); } html body.vpaal-tpl .vp-cta .vp-eyebrow, html body.vpaal-tpl .vp-sec--dark .vp-eyebrow, html body.vpaal-tpl .vp-tile__c, html body.vpaal-tpl .vp-bcard__k { color: var(--vp-gold-light); } html body.vpaal-tpl .vp-lede { color: var(--vp-muted); } html body.vpaal-tpl .vp-cta .vp-lede, html body.vpaal-tpl .vp-sec--dark .vp-lede { color: rgba(255, 255, 255, .74); } html body.vpaal-tpl .vp-shero__sub { color: rgba(255, 255, 255, .82); } html body.vpaal-tpl .vp-tile__n, html body.vpaal-tpl .vp-bcard__m { color: rgba(255, 255, 255, .74); }