/* Theme Name: East Africa Safari Guides Theme URI: https://easguides.travel Description: Standalone theme for East Africa Safari Guides. Converted from a Foxiz child theme 2026-08-12 (FOXIZ FINAL CUTOVER brief) — no parent theme, fully self-contained. See eas_child_theme_support() in functions.php for the real add_theme_support() declarations this theme now owns directly (previously inherited from Foxiz). Author: East Africa Safari Guides Author URI: https://easguides.travel Version: 2.0.0 */ /* ════════════════════════════════════════════════════════════ EAS Body Background Floor (sealed — post-launch bug batch, item 6, 2026-07-16 brief) No rule anywhere in this theme ever set a background-color on or — every page relies entirely on its own inner wrapper div (.eas-*-page) to paint a background. Confirmed via direct getComputedStyle checks: body resolved to fully transparent (rgba(0,0,0,0)) on 6 of 7 sampled templates, one resolved to stark white. Any transient gap or margin at the top of a page (under the fixed header) or at a section boundary near the footer therefore flashes the browser's raw white canvas instead of blending with the site's own palette. This is a floor only — every page's own wrapper background still paints over it in normal layout; this just sets what's visible during any moment nothing else has painted yet. ════════════════════════════════════════════════════════════ */ body { background-color: #FAF7F0; } /* ════════════════════════════════════════════════════════════ EAS Footer Color Standard Background: #141414 | Body text: #C8BFA8 | Links: #D4C9B0 Link hover: #C8A96E | Bottom bar: #0D0D0D / #666666 ════════════════════════════════════════════════════════════ */ .ekit-template-content-footer { background: #141414 !important; } .ekit-template-content-footer .elementor-widget-text-editor p, .ekit-template-content-footer .elementor-widget-text-editor li { color: #C8BFA8 !important; font-size: 15px !important; line-height: 2 !important; } .ekit-template-content-footer .elementor-widget-text-editor a { color: #D4C9B0 !important; text-decoration: none !important; transition: color 0.2s !important; } .ekit-template-content-footer .elementor-widget-text-editor a:hover { color: #C8A96E !important; } /* ════════════════════════════════════════════════════════════ EAS Footer Typography Fixes Target: ElementsKit footer template ID 18626 ════════════════════════════════════════════════════════════ */ /* Remove gap between flex children in footer sections */ .ekit-template-content-footer .e-con { gap: 0 !important; } /* Column internal horizontal padding */ .ekit-template-content-footer .elementor-element > .e-con-inner { padding: 0 24px !important; } /* Body text — 15px / 2 line-height */ .ekit-template-content-footer .elementor-widget-text-editor p { font-size: 15px !important; line-height: 2 !important; color: #B0A890 !important; margin-bottom: 6px !important; } /* Column headings — THE JOURNEYS, EXPLORE, BEGIN YOUR JOURNEY, THE COORDINATES */ .ekit-template-content-footer .elementor-widget-heading .elementor-heading-title { font-size: 11px !important; letter-spacing: 3px !important; color: #C8A96E !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 1px solid #2A2A2A !important; } /* Footer nav links */ .ekit-template-content-footer .elementor-widget-text-editor a { color: #B0A890 !important; text-decoration: none !important; font-size: 14px !important; line-height: 2.4 !important; display: block !important; transition: color 0.2s !important; } .ekit-template-content-footer .elementor-widget-text-editor a:hover { color: #C8A96E !important; } /* START PLANNING button */ .ekit-template-content-footer .elementor-widget-button .elementor-button { font-size: 11px !important; letter-spacing: 3px !important; padding: 14px 28px !important; border: 1px solid #C8A96E !important; color: #C8A96E !important; background: transparent !important; margin-top: 16px !important; } /* Contact details (paragraphs containing tel/email text) */ .ekit-template-content-footer .elementor-widget-text-editor p:has(a[href*="mailto"]), .ekit-template-content-footer .elementor-widget-text-editor p:has(a[href*="tel"]) { font-size: 14px !important; color: #B0A890 !important; line-height: 2.2 !important; } /* Bottom bar (#111111) text */ .ekit-template-content-footer [style*="111111"] .elementor-widget-text-editor p { font-size: 12px !important; color: #555 !important; line-height: 1.5 !important; } /* Bottom bar links — inline, not block */ .ekit-template-content-footer [style*="111111"] .elementor-widget-text-editor a { font-size: 12px !important; color: #555 !important; line-height: 1.5 !important; display: inline !important; } /* Logo in footer */ .ekit-template-content-footer .elementor-widget-image img { max-width: 160px !important; margin-bottom: 20px !important; } /* Main section top/bottom padding */ .ekit-template-content-footer > .e-con:first-child { padding-top: 80px !important; padding-bottom: 80px !important; } /* ════════════════════════════════════════════════════════════ EAS Header Nav Fixes Target: ElementsKit header template ID 18625 ════════════════════════════════════════════════════════════ */ /* Remove margin/gap between header rows */ .ekit-template-content-header > .e-con { margin: 0 !important; } /* Nav menu item links */ .ekit-template-content-header .ekit-nav-menu .menu-item > a { font-size: 11px !important; letter-spacing: 2px !important; color: #1A1A1A !important; padding: 8px 16px !important; text-transform: uppercase !important; } /* Nav hover + active state */ .ekit-template-content-header .ekit-nav-menu .menu-item > a:hover, .ekit-template-content-header .ekit-nav-menu .menu-item.current-menu-item > a { color: #C8A96E !important; } /* Dropdown panel */ .ekit-template-content-header .ekit-nav-menu .sub-menu { border-top: 2px solid #C8A96E !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; min-width: 200px !important; } /* Dropdown items */ .ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item > a { font-size: 12px !important; letter-spacing: 1px !important; padding: 12px 20px !important; color: #1A1A1A !important; border-bottom: 1px solid #F0EDE8 !important; } /* BEGIN YOUR JOURNEY button */ .ekit-template-content-header .elementor-widget-button .elementor-button { font-size: 10px !important; letter-spacing: 3px !important; padding: 12px 20px !important; background: #1A1A1A !important; color: #F0E8D8 !important; border: none !important; } .ekit-template-content-header .elementor-widget-button .elementor-button:hover { background: #C8A96E !important; color: #1A1A1A !important; } /* Utility bar text */ .ekit-template-content-header .elementor-widget-text-editor p { font-size: 11px !important; letter-spacing: 1.5px !important; margin: 0 !important; line-height: 1 !important; } /* ════════════════════════════════════════════════════════════ EAS Mega Nav — Journey Cards + Sticky + Mobile Overlay ════════════════════════════════════════════════════════════ */ /* Sticky header */ .ekit-template-content-header { position: sticky !important; top: 0 !important; z-index: 9999 !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important; } /* Nav bar row — zero out vertical gap */ .ekit-template-content-header > .e-con { margin: 0 !important; } /* Journey Cards mega dropdown — 6-column grid */ .ekit-template-content-header .ekit-nav-menu .menu-item-has-children .sub-menu { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; min-width: 900px !important; padding: 24px !important; gap: 16px !important; left: 50% !important; transform: translateX(-50%) !important; } /* Sub-menu items as cards */ .ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item { border-bottom: none !important; text-align: center !important; padding: 16px 12px !important; border: 1px solid #F0EDE8 !important; transition: all 0.25s !important; } .ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item:hover { border-color: #C8A96E !important; background: #FAFAF5 !important; } .ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item > a { font-family: 'Jost', sans-serif !important; font-size: 11px !important; letter-spacing: 2px !important; color: #2A2A2A !important; text-transform: uppercase !important; display: block !important; padding: 8px 0 !important; } /* ── LOUNGE FORM PAGE 18429 — MINIMAL OVERRIDES ─── Redesign v2 (LOUNGE-FORM-BEGIN-REDESIGN-BUILD-BRIEF-v1.0.md) — light canonical canvas, not the old dark split-screen theme. Field styling is now owned entirely by assets/css/lounge-form.css's .eas-lg-input rules; the old dark input[type] overrides here were fighting them via !important and are removed, not just recolored. */ body.page-id-18429 { background: #FAF7F0 !important; } body.page-id-18429 #wpadminbar { display:none !important; } html body.page-id-18429 { margin-top:0 !important; } /* Zero out Elementor wrapper padding on lounge page */ body.page-id-18429 .e-con, body.page-id-18429 .e-con-inner, body.page-id-18429 .elementor-section, body.page-id-18429 .elementor-container, body.page-id-18429 .elementor-widget-container { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.page-id-18429 .e-con { min-height: 0 !important; } /* ── END LOUNGE FORM MINIMAL OVERRIDES ──────────── */ /* Mobile — full-screen overlay */ @media (max-width: 1024px) { .ekit-template-content-header .ekit-nav-menu-collapse { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: #1A1A1A !important; z-index: 99999 !important; padding: 60px 40px !important; overflow-y: auto !important; } .ekit-template-content-header .ekit-nav-menu-collapse .menu-item > a { font-size: 20px !important; letter-spacing: 2px !important; color: #F0E8D8 !important; padding: 20px 0 !important; border-bottom: 1px solid #2A2A2A !important; display: block !important; } } /* ════════════════════════════════════════════════════════════ .eas-intro-grid--asymmetric Asymmetric two-column intro layout used on journey pages Added: 2026-05-05 ════════════════════════════════════════════════════════════ */ .eas-intro-grid--asymmetric { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: auto 1fr auto; gap: 0; min-height: 90vh; background: var(--canvas, #F5F0E8); position: relative; padding: 0; } .eas-intro-grid--asymmetric .eyebrow { grid-column: 1; grid-row: 1; padding: 120px 0 0 80px; color: var(--amber, #C9963C); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.38em; text-transform: uppercase; } .eas-intro-grid--asymmetric .title { grid-column: 2; grid-row: 1 / 3; padding: 180px 120px 80px 0; display: flex; align-items: center; font-size: clamp(52px, 7vw, 88px); line-height: 1.05; color: var(--forest, #1A2E1A); font-weight: 400; } .eas-intro-grid--asymmetric .body { grid-column: 1; grid-row: 2 / 4; padding: 60px 40px 120px 80px; max-width: 480px; display: flex; flex-direction: column; justify-content: flex-end; } @media (max-width: 968px) { .eas-intro-grid--asymmetric { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: auto; padding: 2rem 1.5rem; } .eas-intro-grid--asymmetric .eyebrow { grid-column: 1; grid-row: 1; padding: 2rem 0 1rem; } .eas-intro-grid--asymmetric .title { grid-column: 1; grid-row: 2; padding: 1rem 0; font-size: clamp(36px, 8vw, 52px); } .eas-intro-grid--asymmetric .body { grid-column: 1; grid-row: 3; padding: 1rem 0 2rem; max-width: 100%; } } /* ════════════════════════════════════════════════════════════ EAS STANDALONE NAV — Shared across all journey page templates Loaded via wp_head() on every standalone template (ob_start arch) DO NOT remove — required by honeymoon, wellness, and all future pages Added: 2026-05-07 ════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ EAS PRIMARY HEADER East Africa Safari Guides Child theme owned — zero dependencies v1.2 — real images, consolidated, final ═══════════════════════════════════════════════════════════ */ :root { --eas-gold: #B8780A; --eas-gold-bright: #D4922E; --eas-gold-on-light: #924F08; --eas-dark: #1A1A1A; --eas-cream: #FAFAF5; --eas-text: #2A2A2A; --eas-muted: #888888; --eas-border: #E8E4DE; --eas-font-nav: 'Jost', sans-serif; --eas-font-head: 'Cormorant Garamond', serif; --eas-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Filled primary buttons — site-wide unified 2026-08-05 (Lounge Form Revisions v1.1, item 3): pulled verbatim from the real, live Final CTA hover state (.eas-comp-final__btn / .eas-comp-final__btn::before in css/eas-components.css — resting gold fill, forest slide-in on hover, cream label both states). These values are the single site-wide source of truth for a primary filled button; .eas-comp- final__btn itself is left self-contained per LAW 18 (components may not inherit host-page tokens) but is kept byte-identical to these, not a coincidence. Previously #C8A96E/#E8C06A/#141414 — a separate, never-actually-matching "Final CTA authority" comment that had drifted from the real component it named. */ --eas-btn-bg: #B8780A; --eas-btn-bg-hover: #2C3424; --eas-btn-text: #FEFDFB; --eas-btn-text-hover: #F4F1E9; --eas-btn-border-color: #B8780A; } /* ─── RESET ─── */ .eas-header *, .eas-header *::before, .eas-header *::after { box-sizing: border-box; } .eas-header ul { list-style: none; margin: 0; padding: 0; } /* ─── BASE ─── */ .eas-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; } /* ─── WP ADMIN BAR COMPENSATION (Departures Final Closeout gap fix) ─── Real root cause, confirmed logged in as admin, not reproducible logged out: WP core adds `margin-top: 32px !important` (46px at <=782px) to whenever the admin bar shows, which pushes body/content down normally — but .eas-header's position:fixed anchors it to the true viewport top regardless of that margin, so it never moves to compensate. The header ends up rendering UNDER/behind the admin bar (its own top 32/46px hidden) while body's content still starts 32/46px lower than the header's real bottom edge — a real blank gap the exact height of the admin bar, on every page using this fixed header, for any logged-in admin/editor. Public visitors are never logged in, so they never saw this — but the founder's own QA workflow is always logged in, and this was a genuine sitewide gap, not something specific to one template. Shifting the header down to sit directly below the admin bar instead of behind it closes the gap without touching the body-padding math above. */ body.admin-bar .eas-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .eas-header { top: 46px; } } /* ─── BODY OFFSET — scoped to pages that carry the EAS nav ─── */ body:has(.eas-header) { padding-top: 118px; /* utility 38px + nav 80px */ } /* Full-bleed hero pages — hero extends under transparent nav (LAW 15 + LAW 17) */ body.eas-transparent-hero:has(.eas-header.is-transparent), body.eas-home-page:has(.eas-header.is-transparent), body.eas-accommodation-single:has(.eas-header.is-transparent), body.eas-dest-archive-page:has(.eas-header.is-transparent), body.eas-journals-archive-page:has(.eas-header.is-transparent), body.home:has(.eas-header.is-transparent), body.single:has(.eas-header.is-transparent) { padding-top: 0 !important; } body:has(.eas-header.is-scrolled) { padding-top: 80px; /* utility collapsed — nav only */ } @media (max-width: 480px) { body:has(.eas-header) { padding-top: 80px; } } /* ═══════════════════════════════════════════════ UTILITY BAR ═══════════════════════════════════════════════ */ .eas-utility-bar, .eas-top-bar { transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease; overflow: hidden; max-height: 48px; } body.scrolled .eas-utility-bar, body.scrolled .eas-top-bar { opacity: 0; max-height: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; pointer-events: none; } .eas-utility-bar { background: var(--eas-dark); height: 38px; overflow: hidden; transition: height 0.35s var(--eas-ease), opacity 0.35s var(--eas-ease); } .eas-utility-inner { max-width: 1400px; margin: 0 auto; padding: 0 60px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .eas-utility-left { display: flex; align-items: center; gap: 10px; font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 1.5px; color: var(--eas-gold); } .eas-utility-left a { color: var(--eas-gold-bright); text-decoration: none; transition: opacity 0.2s; } .eas-utility-left a:hover { opacity: 0.75; } .eas-utility-left span:not(.eas-divider) { color: #888; } .eas-divider { color: #333; } .eas-utility-right { font-family: var(--eas-font-nav); font-size: 10px; letter-spacing: 3px; color: #777; text-transform: uppercase; } /* ═══════════════════════════════════════════════ MAIN NAV BAR ═══════════════════════════════════════════════ */ .eas-nav-bar { height: 80px; background: var(--eas-cream); border-bottom: 1px solid var(--eas-border); transition: background 0.35s var(--eas-ease), border-color 0.35s var(--eas-ease), box-shadow 0.35s var(--eas-ease); } .eas-nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 60px; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; } /* ─── LOGO ─── */ .eas-logo { display: flex; justify-content: center; align-items: center; } .eas-logo a { display: block; line-height: 0; } /* 2026-08-06, Lounge Form Revisions v1.7 rollout — enlarged 58px→70px (the .eas-nav-bar height is a fixed 80px, baked into LAW 15's sitewide body-offset math, so this is the real ceiling without a much larger layout change). svg is the real path now (eas_render_logo_svg()); img is kept as the selector for its own documented missing-file fallback. */ .eas-logo svg, .eas-logo img { display: block; height: 70px; width: auto; max-width: min(260px, 48vw); transition: filter 0.35s var(--eas-ease); } /* The shared logo asset's tagline fill (.st0, #E8C06A) is tuned for dark/photographic contexts (root CLAUDE.md's own token rules). The scrolled/panel-open nav states below render it on a light cream bar, where that gold read too faint — recolored to the same darker gold already used site-wide for text-on-light. Has no visible effect in the transparent (dark hero) state, since that state's own filter (below) flattens every fill to solid white regardless. */ .eas-logo svg .st0 { fill: var(--eas-gold-on-light); } /* ─── NAV LISTS ─── */ .eas-nav-left ul, .eas-nav-right ul { display: flex; align-items: center; } .eas-nav-right ul { justify-content: flex-end; } /* ─── NAV LINKS ─── */ .eas-nav-link { font-family: var(--eas-font-nav); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--eas-text); text-decoration: none; padding: 10px 16px; display: flex; align-items: center; gap: 5px; position: relative; white-space: nowrap; transition: color 0.25s; } .eas-nav-link:hover { color: var(--eas-gold); } .eas-nav-link::after { content: ''; position: absolute; bottom: 4px; left: 16px; right: 16px; height: 1px; background: var(--eas-gold); transform: scaleX(0); transition: transform 0.3s var(--eas-ease); } .eas-nav-link:hover::after { transform: scaleX(1); } .eas-chevron { flex-shrink: 0; transition: transform 0.3s var(--eas-ease); } .eas-nav-item:hover .eas-chevron, .eas-nav-item:focus-within .eas-chevron { transform: rotate(180deg); } /* ─── NAV CTA — site-wide ghost default (gold on hover only) ─── */ .eas-header .eas-nav-bar .eas-cta-btn { font-family: var(--eas-font-nav); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eas-text); text-decoration: none; padding: 11px 22px; border: 1px solid var(--eas-text); margin-left: 8px; display: inline-block; white-space: nowrap; background: var(--eas-cream); transition: all 0.25s var(--eas-ease); } .eas-header .eas-nav-bar .eas-cta-btn:hover { background: var(--eas-gold); border-color: var(--eas-gold); color: #fff; } /* Solid nav pages (destinations, offers, etc.) — match nav bar surface */ .eas-header:not(.is-transparent) .eas-nav-bar .eas-cta-btn { background: var(--eas-cream); color: var(--eas-text); border-color: var(--eas-text); } /* ═══════════════════════════════════════════════ CART INDICATOR — persistent, site-wide (Closeout Addendum v1.3, item 1) — LAW 11 duplicate of the identical block in css/header.css. ═══════════════════════════════════════════════ */ .eas-cart-indicator { position: relative; display: flex; align-items: center; } .eas-cart-indicator--mobile { display: none; } .eas-nav-mobile-actions { display: contents; } .eas-cart-indicator__toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-left: 2px; background: none; border: none; color: var(--eas-text); cursor: pointer; transition: color 0.25s; } .eas-cart-indicator__toggle:hover { color: var(--eas-gold); } .eas-cart-indicator__toggle:focus { outline: none; } .eas-cart-indicator__toggle:focus-visible { outline: 2px solid var(--eas-gold); outline-offset: 2px; } .eas-cart-indicator__count { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; display: none; align-items: center; justify-content: center; font-family: var(--eas-font-nav); font-size: 9.5px; font-weight: 600; line-height: 1; color: #fff; background: var(--eas-gold); border-radius: 50%; } .eas-cart-indicator.has-items .eas-cart-indicator__count { display: flex; } .eas-cart-indicator__panel { position: absolute; top: calc(100% + 12px); right: 0; width: 300px; max-width: calc(100vw - 32px); max-height: 360px; overflow-y: auto; background: var(--eas-cream); border: 1px solid var(--eas-border); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.3); padding: 18px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--eas-ease), transform 0.2s var(--eas-ease), visibility 0.2s; z-index: 20; } .eas-cart-indicator.is-open .eas-cart-indicator__panel { opacity: 1; visibility: visible; transform: translateY(0); } .eas-cart-indicator .eas-cart-panel__label, .eas-cart-indicator .eas-cart-panel__empty { margin: 0 0 10px; } .eas-header.is-transparent .eas-cart-indicator__toggle { color: #fff; } .eas-header.is-transparent .eas-cart-indicator__toggle:hover { color: var(--eas-gold); } .eas-header.is-scrolled .eas-cart-indicator__toggle { color: var(--eas-text); } /* ═══════════════════════════════════════════════ TRANSPARENT STATE — homepage hero overlay ═══════════════════════════════════════════════ */ /* Utility bar stays visible in transparent state (matches homepage) */ .eas-header.is-transparent .eas-utility-bar { height: 38px; min-height: 38px; opacity: 1; pointer-events: auto; overflow: hidden; background: #1A1A1A; } .eas-header.is-transparent .eas-utility-inner { max-width: 1400px; margin: 0 auto; padding: 0 60px; height: 100%; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1200px) { .eas-header.is-transparent .eas-utility-inner { padding: 0 40px; } } .eas-header.is-transparent .eas-utility-left { font-size: 11px; letter-spacing: 1.5px; color: #C8BFA8; } .eas-header.is-transparent .eas-utility-left a { color: #E8C06A !important; font-weight: 400; } .eas-header.is-transparent .eas-utility-left span:not(.eas-divider) { color: #C8BFA8 !important; } .eas-header.is-transparent .eas-utility-right { color: #C8BFA8; font-size: 11px; letter-spacing: 2.5px; opacity: 1; } .eas-header.is-transparent .eas-divider { color: #888888 !important; } .eas-header.is-transparent .eas-nav-bar { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: none !important; } .eas-header.is-transparent .eas-nav-link { color: #fff !important; } .eas-header.is-transparent .eas-nav-link:hover { color: var(--eas-gold) !important; } .eas-header.is-transparent .eas-nav-link::after { background: rgba(255, 255, 255, 0.6); } .eas-header.is-transparent .eas-logo svg, .eas-header.is-transparent .eas-logo img { filter: brightness(0) invert(1); } .eas-header.is-transparent .eas-cta-btn { color: #fff !important; border-color: rgba(255, 255, 255, 0.7) !important; background: transparent !important; } .eas-header.is-transparent .eas-cta-btn:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: #fff !important; color: #fff !important; } .eas-header.is-transparent .eas-chevron { color: #fff; } .eas-header.is-transparent .eas-mobile-toggle span { background: #fff; } /* ─── SCROLLED STATE ─── */ .eas-header.is-scrolled .eas-utility-bar { height: 0; opacity: 0; pointer-events: none; } .eas-header.is-scrolled .eas-nav-bar { background: var(--eas-cream) !important; border-bottom: 1px solid var(--eas-border) !important; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08); } .eas-header.is-scrolled .eas-nav-link { color: var(--eas-text) !important; } .eas-header.is-scrolled .eas-nav-link:hover { color: var(--eas-gold) !important; } .eas-header.is-scrolled .eas-nav-link::after { background: var(--eas-gold); } .eas-header.is-scrolled .eas-logo svg, .eas-header.is-scrolled .eas-logo img { filter: none !important; } .eas-header.is-scrolled .eas-chevron { color: var(--eas-text); } .eas-header.is-scrolled .eas-mobile-toggle span { background: var(--eas-text); } .eas-header.is-scrolled .eas-cta-btn { background: var(--eas-cream) !important; color: var(--eas-text) !important; border-color: var(--eas-text) !important; } /* ═══════════════════════════════════════════════ NAV PANELS — dark translucent floating (CANONICAL v3, §2) Safaris by Traveler · The Migration · Destinations · Group Departures Mirrors css/header.css. Panels are self-contained (own colours/fonts). ═══════════════════════════════════════════════ */ .eas-header .eas-nav-left ul, .eas-header .eas-nav-right ul { height: 100%; } /* Nav items are NOT the positioning context — full-width panels resolve against .eas-header (position:fixed) so they span the viewport, flush under the header. */ .eas-nav-item { display: flex; align-items: center; height: 100%; } /* ─── LIVE DOT (The Migration) — 10px amber, 9px pulse ring, 2.4s (brief §3) ─── */ .eas-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #C9963C; display: inline-block; flex-shrink: 0; animation: eas-live-pulse 2.4s ease-in-out infinite; } @keyframes eas-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 150, 60, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(201, 150, 60, 0); } } @media (prefers-reduced-motion: reduce) { .eas-live-dot { animation: none; } } /* ═══════════════════════════════════════════════ PANEL-OPEN STATE (brief §1) — mirror of css/header.css ═══════════════════════════════════════════════ */ .eas-header.panel-open .eas-nav-bar, .eas-header.is-transparent.panel-open .eas-nav-bar { background: var(--eas-cream) !important; border-bottom: 1px solid var(--eas-border) !important; box-shadow: 0 1px 0 rgba(88, 71, 56, 0.14) !important; } .eas-header.panel-open .eas-nav-link, .eas-header.is-transparent.panel-open .eas-nav-link { color: var(--eas-text) !important; } .eas-header.panel-open .eas-nav-link:hover, .eas-header.is-transparent.panel-open .eas-nav-link:hover { color: var(--eas-gold) !important; } .eas-header.panel-open .eas-nav-link::after { background: var(--eas-gold); } .eas-header.panel-open .eas-logo svg, .eas-header.is-transparent.panel-open .eas-logo svg, .eas-header.panel-open .eas-logo img, .eas-header.is-transparent.panel-open .eas-logo img { filter: none !important; } .eas-header.panel-open .eas-chevron, .eas-header.is-transparent.panel-open .eas-chevron { color: var(--eas-text); } .eas-header.panel-open .eas-cta-btn, .eas-header.is-transparent.panel-open .eas-cta-btn { background: var(--eas-cream) !important; color: var(--eas-text) !important; border-color: var(--eas-text) !important; } /* ─── BASE PANEL — full-width light parchment, flush under header (PANEL LAW §1) ─── */ .eas-panel { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #F5F0E8; border-top: 1px solid rgba(88, 71, 56, 0.16); border-bottom: 2px solid var(--eas-gold); box-shadow: 0 30px 50px -28px rgba(28, 26, 20, 0.28); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.22s var(--eas-ease), transform 0.22s var(--eas-ease); z-index: 9998; } .eas-nav-item:hover > .eas-panel, .eas-nav-item:focus-within > .eas-panel, .eas-nav-item.is-open > .eas-panel { opacity: 1; visibility: visible; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .eas-panel { transition: none; } } .eas-panel-inner { max-width: 1400px; margin: 0 auto; padding: 52px 60px 56px; } /* ─── SAFARIS BY TRAVELER — editorial list + one 4:5 crossfade image ─── */ .eas-trav-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 6vw; align-items: start; } .eas-trav-q { font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eas-gold); font-weight: 500; margin-bottom: 16px; } /* Row sizing fixed 2026-07-15 — built for 4 rows, Friends made a 5th and pushed the panel taller than the visible viewport on common laptop screens (row bottom edge landed past the fold, confirmed via screenshot at 1366x660 content height). Font-size + padding trimmed so all 5 rows fit without scrolling on realistic viewports, while staying legible and on the same parchment/gold editorial language as the Destinations panel. */ .eas-trav-row { display: flex; align-items: baseline; gap: 24px; padding: 11px 0; border-bottom: 1px solid rgba(88, 71, 56, 0.14); text-decoration: none; transition: border-color 0.2s; } .eas-trav-row:hover { border-bottom-color: var(--eas-gold); } .eas-trav-name { font-family: var(--eas-font-head); font-weight: 300; font-size: 26px; line-height: 1.1; color: #1C1A14; min-width: 155px; transition: color 0.2s; } .eas-trav-row:hover .eas-trav-name { color: var(--eas-gold); } .eas-trav-tag { font-family: var(--eas-font-nav); font-weight: 300; font-size: 12.5px; line-height: 1.45; color: #584738; } .eas-trav-img { position: relative; width: 100%; max-width: 340px; aspect-ratio: 4 / 5; max-height: 430px; overflow: hidden; background: #CEC1A8; justify-self: end; } .eas-trav-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; } .eas-trav-face.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .eas-trav-face { transition: none; } } .eas-trav-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 18px; background: linear-gradient(transparent, rgba(28, 26, 20, 0.55)); color: #F5F0E8; font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; } /* ─── THE MIGRATION — light, two columns ─── */ .eas-mig-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; } .eas-mig-eyebrow { display: flex; align-items: center; gap: 11px; font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eas-gold); font-weight: 500; margin-bottom: 16px; } .eas-mig-line { font-family: var(--eas-font-head); font-weight: 300; font-size: 34px; line-height: 1.25; color: #1C1A14; margin-bottom: 20px; } .eas-mig-cta { display: inline-block; font-family: var(--eas-font-nav); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eas-gold); border-bottom: 1px solid rgba(184, 120, 10, 0.4); padding-bottom: 3px; transition: color 0.2s, border-color 0.2s; } .eas-mig-cta:hover { color: #1C1A14; border-bottom-color: #1C1A14; } .eas-mig-months { display: flex; border-top: 1px solid rgba(88, 71, 56, 0.16); border-bottom: 1px solid rgba(88, 71, 56, 0.16); } .eas-mig-months span { flex: 1; text-align: center; padding: 14px 0; font-family: var(--eas-font-nav); font-size: 10.5px; letter-spacing: 0.08em; color: #B59E7D; } .eas-mig-months span.is-now { background: var(--eas-gold); color: #F5F0E8; font-weight: 500; } .eas-mig-note { font-family: var(--eas-font-nav); font-weight: 300; font-size: 12.5px; line-height: 1.55; color: #584738; margin: 14px 0 0; } /* ─── DESTINATIONS — serif circuits ─── */ .eas-dest-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 30px; } .eas-dest-head .t { font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eas-gold); font-weight: 500; } .eas-dest-head .soon { font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #B59E7D; } .eas-dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; } .eas-circuit-col h5 { font-family: var(--eas-font-head); font-weight: 300; font-size: 31px; line-height: 1.05; margin: 0 0 4px; } .eas-circuit-col h5 a { color: #1C1A14; text-decoration: none; transition: color 0.15s; } .eas-circuit-col h5 a:hover { color: var(--eas-gold); } .eas-circuit-desc { font-family: var(--eas-font-nav); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eas-gold); font-weight: 500; margin-bottom: 16px; } .eas-circuit-parks { display: block; font-family: var(--eas-font-nav); font-weight: 300; font-size: 14px; color: #584738; padding: 6px 0; line-height: 1.7; } /* Each destination resolves to its own eas_destination permalink (fixed 2026-07-15) — only linked when a real post exists. */ .eas-circuit-park-link { color: inherit; text-decoration: none; transition: color 0.15s; } .eas-circuit-park-link:hover { color: var(--eas-gold); } /* No eas_destination post yet — shown for context, not a fake link. */ .eas-circuit-park-text { color: #584738; opacity: 0.5; } .eas-circuit-park-sep { color: #584738; opacity: 0.45; } /* ═══════════════════════════════════════════════ MOBILE TOGGLE ═══════════════════════════════════════════════ */ .eas-mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; justify-self: end; } .eas-mobile-toggle span { display: block; width: 24px; height: 1.5px; background: var(--eas-text); transition: all 0.3s var(--eas-ease); } .eas-mobile-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .eas-mobile-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .eas-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Burger lines: ink when the drawer is open (over parchment), even on hero pages (§7) */ .eas-mobile-toggle.is-open span { background: var(--eas-text) !important; } /* ═══════════════════════════════════════════════ MOBILE DRAWER — light parchment, accordion (brief §7) — mirror of css/header.css ═══════════════════════════════════════════════ */ .eas-mobile-overlay { position: fixed; inset: 0; background: #F5F0E8; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--eas-ease), visibility 0.4s var(--eas-ease); overflow-y: auto; -webkit-overflow-scrolling: touch; } .eas-mobile-overlay.is-open { opacity: 1; visibility: visible; } .eas-mobile-inner { padding: 70px 30px 90px; min-height: 100%; display: flex; flex-direction: column; position: relative; } .eas-mobile-close { position: fixed; top: 20px; right: 24px; background: none; border: none; color: #584738; font-size: 22px; cursor: pointer; padding: 8px; line-height: 1; transition: color 0.2s; z-index: 100000; } .eas-mobile-close:hover { color: var(--eas-gold); } .eas-mobile-nav { flex: 1; display: flex; flex-direction: column; } .eas-m-group { border-bottom: 1px solid rgba(88, 71, 56, 0.16); } .eas-m-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 2px; min-height: 44px; background: none; border: none; cursor: pointer; font-family: var(--eas-font-nav); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; color: #2C3424; } .eas-m-plus { font-family: var(--eas-font-head); font-size: 26px; font-weight: 300; color: var(--eas-gold); line-height: 1; width: 20px; text-align: center; transition: transform 0.25s var(--eas-ease); } .eas-m-group.is-open .eas-m-toggle { color: var(--eas-gold); } .eas-m-group.is-open .eas-m-plus { transform: rotate(45deg); } .eas-m-sub { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--eas-ease); } .eas-m-group.is-open .eas-m-sub { max-height: 900px; } .eas-m-sub-inner { padding: 0 2px 24px; } .eas-m-item { display: block; padding: 11px 0; min-height: 44px; text-decoration: none; } .eas-m-item .t { display: block; font-family: var(--eas-font-head); font-weight: 300; font-size: 23px; color: #1C1A14; line-height: 1.1; } .eas-m-item .d { display: block; font-family: var(--eas-font-nav); font-size: 12.5px; color: #584738; margin-top: 3px; line-height: 1.45; } .eas-m-mig-live { display: flex; align-items: center; gap: 10px; font-family: var(--eas-font-nav); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eas-gold); font-weight: 500; padding-bottom: 12px; } .eas-m-soon { display: block; font-family: var(--eas-font-nav); font-size: 12px; letter-spacing: 0.06em; color: #B59E7D; padding: 8px 0 0; } .eas-m-plain { display: flex; justify-content: space-between; align-items: center; padding: 20px 2px; min-height: 44px; font-family: var(--eas-font-nav); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #2C3424; text-decoration: none; border-bottom: 1px solid rgba(88, 71, 56, 0.16); transition: color 0.2s; } .eas-m-plain:hover { color: var(--eas-gold); } .eas-header .eas-m-begin { display: block; text-align: center; margin: 30px 2px 0; padding: 16px; background: var(--eas-gold); color: #F5F0E8; font-family: var(--eas-font-nav); font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: background 0.25s; } .eas-header .eas-m-begin:hover { background: #9A6408; } .eas-mobile-footer { padding-top: 28px; border-top: 1px solid rgba(88, 71, 56, 0.16); margin-top: 24px; } .eas-mobile-footer p { font-family: var(--eas-font-nav); font-size: 13px; color: #584738; letter-spacing: 0.5px; margin: 5px 0; } .eas-mobile-footer a { color: #584738; text-decoration: none; transition: color 0.2s; } .eas-mobile-footer a:hover { color: var(--eas-gold); } /* ════════════════════════════════════════════════════════════ EAS FOOTER — footer.php (PHP-owned, zero plugin dependency) Background: #141414 | Body text: #B0A890 | Headings: #C8A96E Bottom bar: #0D0D0D ════════════════════════════════════════════════════════════ */ .eas-footer { background: #243022; color: #B0A890; font-family: var(--eas-font-nav); } .eas-footer-main { padding: 80px 0; } .eas-footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 60px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; } .eas-footer-col { display: flex; flex-direction: column; } .eas-footer-logo { max-width: 160px; height: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: 0.85; } .eas-footer-ethos { font-family: var(--eas-font-head); font-size: 19px; line-height: 1.8; color: rgba(237, 229, 214, 0.82); font-style: normal; margin-bottom: 28px; } .eas-footer-coords { margin-bottom: 24px; } .eas-footer-label { display: block; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eas-gold); margin-bottom: 8px; } .eas-footer-coords address { font-style: normal; font-size: 15px; color: rgba(237, 229, 214, 0.72); line-height: 1.8; } .eas-footer-social { display: flex; gap: 12px; margin-top: auto; padding-top: 20px; } .eas-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #2A2A2A; color: #6A6252; text-decoration: none; transition: border-color 0.2s, color 0.2s; } .eas-social-link:hover { border-color: var(--eas-gold); color: var(--eas-gold); } .eas-footer-heading { display: block; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eas-gold); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #2A2A2A; } .eas-footer-col nav { display: flex; flex-direction: column; } .eas-footer-col nav a { font-size: 16px; line-height: 2.2; color: rgba(237, 229, 214, 0.88); text-decoration: none; transition: color 0.2s; font-weight: 400; } .eas-footer-col nav a:hover { color: #F2EBD9; } .eas-footer-contact-text { font-family: var(--eas-font-head); font-size: 17px; line-height: 1.75; color: rgba(237, 229, 214, 0.72); font-style: normal; margin-bottom: 20px; } .eas-footer-contact-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .eas-footer-contact-link { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(237, 229, 214, 0.88); text-decoration: none; transition: color 0.2s; font-weight: 400; } .eas-footer-contact-link:hover { color: #F2EBD9; } .eas-footer-contact-link svg { flex-shrink: 0; color: var(--eas-gold); } .eas-footer-cta { display: inline-block; font-family: var(--eas-font-nav); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eas-gold); border: 1px solid var(--eas-gold); padding: 14px 28px; min-height: 44px; text-decoration: none; text-align: center; transition: background 0.2s, color 0.2s; } .eas-footer-cta:hover { background: var(--eas-gold); color: #141414; } .eas-footer-bottom { background: #243022; border-top: 1px solid rgba(200, 169, 110, 0.18); padding: 20px 0; } .eas-footer-bottom-inner { max-width: 1400px; margin: 0 auto; padding: 0 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .eas-footer-bottom p { font-size: 13px; color: rgba(237, 229, 214, 0.72); margin: 0; line-height: 1.5; } .eas-footer-bottom nav { display: flex; align-items: center; gap: 8px; } .eas-footer-bottom nav a { font-size: 13px; color: rgba(237, 229, 214, 0.72); text-decoration: none; transition: color 0.2s; } .eas-footer-bottom nav a:hover { color: var(--eas-gold); } .eas-footer-bottom nav span[aria-hidden] { color: rgba(200, 169, 110, 0.45); } /* Footer responsive */ @media (max-width: 1024px) { .eas-footer-inner { grid-template-columns: 1fr 1fr; gap: 48px; padding: 0 40px; } .eas-footer-bottom-inner { padding: 0 40px; } } @media (max-width: 640px) { .eas-footer-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; } .eas-footer-main { padding: 60px 0; } .eas-footer-bottom-inner { padding: 0 24px; flex-direction: column; align-items: flex-start; gap: 8px; } } /* ═══════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════ */ @media (max-width: 1200px) { .eas-utility-inner, .eas-nav-inner { padding: 0 40px; } .eas-nav-link { padding: 10px 10px; font-size: 10px; letter-spacing: 1.5px; } .eas-cta-btn { padding: 10px 16px; font-size: 9.5px; } .eas-mega-inner { padding: 0 40px; } } @media (max-width: 1024px) { .eas-nav-left, .eas-nav-right { display: none; } .eas-mobile-toggle { display: flex; } .eas-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; } .eas-logo { flex: 1 1 auto; justify-content: flex-start; min-width: 0; padding-left: 4px; } .eas-logo a { display: block; padding-left: 8px; } .eas-logo svg, .eas-logo img { display: block; height: 64px; width: auto; max-width: min(220px, 56vw); object-fit: contain; object-position: left center; } .eas-mobile-toggle { flex: 0 0 auto; margin-left: auto; } .eas-utility-inner { padding: 0 16px; flex-wrap: wrap; justify-content: center; align-content: center; row-gap: 2px; column-gap: 10px; height: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; } .eas-utility-left { flex-wrap: wrap; justify-content: center; font-size: 10px; letter-spacing: 1px; gap: 6px; } .eas-utility-right { flex: 0 0 100%; font-size: 8px; letter-spacing: 2px; line-height: 1.35; text-align: center; } .eas-utility-bar { height: auto; } } /* Cart mobile actions — LAW 11 duplicate of css/header.css's identical block, placed after the shared 1024px block above for the same cascade reason (its .eas-mobile-toggle override must win at equal specificity). */ @media (max-width: 1024px) { .eas-nav-mobile-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; } .eas-nav-mobile-actions .eas-mobile-toggle { margin-left: 0; } .eas-cart-indicator--mobile { display: flex; /* Pre-promotion QA fix — LAW 11 duplicate of css/header.css's identical fix. See that file for the full root-cause comment: removing position:relative here makes .eas-header (position:fixed) the panel's containing block, so top:100% always clears the real header height (80px-118px, varies by scroll/utility-bar state) instead of the 36px toggle box. */ position: static; } .eas-cart-indicator--mobile .eas-cart-indicator__panel { top: calc(100% + 10px); right: 16px; left: auto; width: min(300px, calc(100vw - 24px)); z-index: 10000; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.45); } } @media (max-width: 480px) { .eas-utility-bar { display: none; } .eas-mobile-inner { padding: 70px 24px 40px; } .eas-mobile-nav a { font-size: 19px; } } /* ───────────────────────────────────────────────────────────── CUSTOM LOGO SIZING — site-wide ───────────────────────────────────────────────────────────── */ .custom-logo-link img.custom-logo { height: 52px; width: auto; max-width: 220px; object-fit: contain; transition: opacity 0.3s; } .custom-logo-link:hover img.custom-logo { opacity: 0.85; } @media (max-width: 768px) { .custom-logo-link img.custom-logo { height: 40px; } } /* ───────────────────────────────────────────────────────────── FOXIZ wp_footer LEAKAGE — login popup + hidden modals Foxiz outputs #rb-user-popup-form on every wp_footer() call. Standalone LAW 8 templates may not load foxiz/main.css, so .mfp-hide never applies and the form renders visible in-flow. ───────────────────────────────────────────────────────────── */ .mfp-hide, .is-hidden { display: none !important; } body:has(.eas-header) #rb-user-popup-form, body:has(.eas-header) .rb-user-popup-form, body:has(.eas-header) .popup-newsletter { display: none !important; } /* ═══════════════════════════════════════════════════ EAS GLOBAL TYPOGRAPHY SYSTEM Deployed: July 2026 Applies Cormorant Garamond + Jost site-wide. Uses scoped selectors to avoid breaking Foxiz UI. ═══════════════════════════════════════════════════ */ /* All headings — Cormorant Garamond 300 upright (exclude LAW 18 components). Migration-only addition, not on real live style.css: every selector below also excludes `.eas-st-root` and its descendants. Real WordPress never loads this file on the Blog Post template (single.php has its own enqueue list — confirmed via a direct fetch of the live , see eas-single-post.css's own header comment), so this rule never had a chance to compete with eas-single-post.css's real per-element font rules there. This app loads style.css globally (needed correctly by every other template), so without this exclusion this rule's real, live-correct Cormorant-Garamond-for-headings behavior would incorrectly leak onto Blog Post's own Playfair-Display/Overpass-Mono/Source-Serif-4 headings — confirmed via a live computed-style diff against easguides.travel that real Blog Post headings never carry Cormorant Garamond. Scoping it out here (rather than fighting it with a counter-rule inside BlogPostTemplate.tsx) exactly reproduces the real "this file never applies here" behavior with zero specificity-cascade risk anywhere else, since `.eas-st-root` doesn't exist on any of the 22+ other page types. */ .eas-child-theme h1:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), .eas-child-theme h2:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), .eas-child-theme h3:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), .eas-child-theme h4:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), .eas-child-theme .entry-title:not(.eas-st-root):not(.eas-st-root *), .eas-child-theme .page-title:not(.eas-st-root):not(.eas-st-root *), [class*="eas-"] h1:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), [class*="eas-"] h2:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), [class*="eas-"] h3:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *), .single .entry-title:not(.eas-st-root):not(.eas-st-root *), .archive .page-title:not(.eas-st-root):not(.eas-st-root *) { font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; font-style: normal !important; letter-spacing: -0.01em; line-height: 1.15; } /* Body text — Jost 400 (was 300 — BUILD-BRIEF-PHASE-A-B-CALCULATOR-CORE-v1 A1, 2026-08-14: "Body text minimum weight 400, UI labels/data minimum weight 500." This selector list (`[class*="eas-"] p/li/span/label`) is the single highest-leverage fix on the whole site — it pattern-matches any element inside any custom-built EAS page/component by class-name substring, which is why 300-weight Jost showed up across 50+ template files without any of them setting it themselves; they all inherit from here. `label` split out to its own, higher-weight rule below per the brief's separate UI-label floor. Base size left at the existing inherited value on desktop (already >=16px on every rebuilt template via eas-parity.css's .eas-prose-std/17px or the browser default) — the explicit floor below covers the one place a smaller size was actually set (the pre-existing mobile block). Real bug found and fixed same-day, in the same session: the original `span` clause here (`[class*="eas-"] span:not(.rb-)`) has specificity (0,2,1) — an attribute selector + a type selector + a :not() clause — which is HIGHER than `.eas-eyebrow-std` alone (0,1,0) and even higher than two-class component overrides like `.eas-comp-hero-image__label--hero.eas-eyebrow-std` (0,2,0). Since every UI eyebrow/label on this site is rendered as a `` carrying an `eas-` class, this rule was silently winning the cascade and forcing every one of them down to 400 — directly undoing this session's own eas-parity.css/eas-components.css edits that raised `.eas-eyebrow-std` and friends to 500. Caught via a live computed-style check (not assumed from the CSS diff), root-caused via a full matched-rule cascade dump. Fixed the same way headings above already protect LAW-18 components: exclude `.eas-eyebrow-std` and any `*-label`/`*__label`-pattern span (stat labels, card labels, pace labels, etc. — all genuinely UI-label content per the brief's own category, not body prose) from this bucket, so their own correctly-higher-weight rules win undisturbed. Bare inline spans inside real `

`/`

` prose are unaffected — they inherit weight 400 naturally from their already-covered parent, no rule needed. Same bug, second instance, caught by the same live-verify pass: real "UI label" elements on this site are just as often rendered as `

` as `` — e.g. page-couple-safari-tanzania.php's own `

` — so the `[class*="eas-"] p`/`li` clauses below needed the identical *-label/__label exclusion, not just the span clause. */ .eas-child-theme .entry-content p:not(.eas-st-root *), .eas-child-theme .entry-content li:not(.eas-st-root *), .eas-child-theme .rb-post-excerpt:not(.eas-st-root *), [class*="eas-"] p:not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *), [class*="eas-"] li:not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *), [class*="eas-"] span:not(.rb-):not(.eas-eyebrow-std):not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *) { /* Migration-only `:not(.eas-st-root *)` exclusion on every selector above — same real reason as the heading rule above this one: real WordPress never loads style.css on the Blog Post template at all, so this Jost-body-text rule never competes with eas-single-post.css's real Overpass-Mono/Source-Serif-4 rules there. `.eas-st-root` only exists on this app's Blog Post template, so this has zero effect on any other page. */ font-family: 'Jost', sans-serif !important; font-weight: 400; line-height: 1.75; } /* UI labels/data — weight 500 floor (brief's own, higher, "UI labels/data minimum weight 500" line — distinct from plain body copy above). Covers real elements; the span-based label/eyebrow classes excluded above are governed by their own component/parity rules (also raised to 500 this session), not this selector. */ [class*="eas-"] label:not(.eas-st-root *) { font-family: 'Jost', sans-serif !important; font-weight: 500; line-height: 1.75; } /* Navigation elements */ .eas-nav a, .eas-utility-bar, .eas-utility-bar a, .eas-utility-bar span { font-family: 'Jost', sans-serif !important; font-weight: 400; } /* Mobile font floor — 40+ audience. Same `.eas-st-root *` exclusion as the desktop rules above and for the same real reason (never loaded on Blog Post live) — without it, elements like `.eas-st-deck` (a bare `

`, no `!important` of its own on font-size) would get force-set to 16px on mobile instead of their real `clamp(15px,1.4vw,19px)` value. */ @media (max-width: 768px) { .eas-child-theme .entry-content p:not(.eas-st-root *), [class*="eas-"] p:not(.eas-st-root *) { font-size: 16px !important; line-height: 1.75 !important; } .eas-child-theme h1:not([class*="eas-comp-"]):not(.eas-st-root *), [class*="eas-"] h1:not([class*="eas-comp-"]):not(.eas-st-root *) { font-size: clamp(32px, 8vw, 48px) !important; } .eas-child-theme h2:not([class*="eas-comp-"]):not(.eas-st-root *), [class*="eas-"] h2:not([class*="eas-comp-"]):not(.eas-st-root *) { font-size: clamp(26px, 6vw, 38px) !important; } .eas-child-theme h3:not([class*="eas-comp-"]):not(.eas-st-root *), [class*="eas-"] h3:not([class*="eas-comp-"]):not(.eas-st-root *) { font-size: clamp(20px, 5vw, 28px) !important; } } /* ════════════════════════════════════════════════════════════ EAS FILLED PRIMARY BUTTONS — Final CTA tokens (site-wide) Excludes: .eas-header nav CTA (outline), footer START PLANNING, hero editorial links (.eas-comp-hero-image__cta, .eas-hero__cta) ════════════════════════════════════════════════════════════ */ .eas-comp-final__btn, .eas-final__btn, .btn-p, .eas-btn-primary, .eas-btn--primary, .eas-acc-cta-btn, .eas-couple-page .eas-cta-btn, .eas-honeymoon-page .eas-cta-btn, .eas-solo-page .eas-cta-btn, .eas-milestone-page .eas-cta-btn, .eas-wellness-page .eas-cta-btn, .eas-safari-destinations-page .eas-cta-btn, .eas-group-departures-page .eas-cta-btn, .eas-dest-wrap .eas-cta-wrap .eas-cta-btn, .eas-journals-cta .eas-cta-btn { background-color: var(--eas-btn-bg) !important; color: var(--eas-btn-text) !important; border-color: var(--eas-btn-border-color) !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .eas-comp-final__btn:hover, .eas-comp-final__btn:focus-visible, .eas-final__btn:hover, .eas-final__btn:focus-visible, .btn-p:hover, .btn-p:focus-visible, .eas-btn-primary:hover, .eas-btn-primary:focus-visible, .eas-btn--primary:hover, .eas-btn--primary:focus-visible, .eas-acc-cta-btn:hover, .eas-acc-cta-btn:focus-visible, .eas-couple-page .eas-cta-btn:hover, .eas-couple-page .eas-cta-btn:focus-visible, .eas-honeymoon-page .eas-cta-btn:hover, .eas-honeymoon-page .eas-cta-btn:focus-visible, .eas-solo-page .eas-cta-btn:hover, .eas-solo-page .eas-cta-btn:focus-visible, .eas-milestone-page .eas-cta-btn:hover, .eas-milestone-page .eas-cta-btn:focus-visible, .eas-wellness-page .eas-cta-btn:hover, .eas-wellness-page .eas-cta-btn:focus-visible, .eas-safari-destinations-page .eas-cta-btn:hover, .eas-safari-destinations-page .eas-cta-btn:focus-visible, .eas-group-departures-page .eas-cta-btn:hover, .eas-group-departures-page .eas-cta-btn:focus-visible, .eas-dest-wrap .eas-cta-wrap .eas-cta-btn:hover, .eas-dest-wrap .eas-cta-wrap .eas-cta-btn:focus-visible, .eas-journals-cta .eas-cta-btn:hover, .eas-journals-cta .eas-cta-btn:focus-visible { background-color: var(--eas-btn-bg-hover) !important; color: var(--eas-btn-text-hover) !important; border-color: var(--eas-btn-bg-hover) !important; } /* ───────────────────────────────────────────────────────────── SITE-WIDE ITALIC BAN — founder ruling 2026-07-11 (Task B) No text renders slanted anywhere. Belt-and-suspenders alongside the source-level upright sweep + slanted font-load removal. ───────────────────────────────────────────────────────────── */ em, i, cite, address, var, dfn, q, [class*="eas-"] em, [class*="eas-"] i, [class*="eas-"] cite { font-style: normal; }