/* ============================================================================= Ageshio redesign — component & layout stylesheet ----------------------------------------------------------------------------- Architecture: Elementor owns STRUCTURE + CONTENT; this file owns LAYOUT. Containers carry semantic BEM classes (assigned by scripts/build_homepage.py); the rules below own their geometry precisely. All magic values are tokens in :root so there is a single source of truth. No !important — specificity comes from scoping under the component root (e.g. .ags-hero ...). Naming: block .ags-hero · element .ags-hero__mid · standalone .ags-textlink ========================================================================== */ :root { /* ---- Palette (measured EXACT from Figma) ---- */ --ags-red: #8E1E00; --ags-black: #111010; --ags-cream: #F7F4F2; --ags-white: #FFFFFF; --ags-hero-bg: #151414; --ags-blue: #3A78C1; /* ---- Spacing scale (px) ---- */ --ags-space-1: 4px; --ags-space-2: 8px; --ags-space-3: 16px; --ags-space-4: 24px; --ags-space-5: 32px; --ags-space-6: 48px; --ags-space-7: 64px; --ags-space-8: 96px; /* ---- Content frame ---- */ --ags-container: 1120px; --ags-gutter: 112px; /* side margin at 1280 viewport */ /* ---- SECTION SPACING (Mika's Ageshio-Web-Notes.png feedback, 2026-09-08) ---- Two knobs, both measured off her annotated capture as RATIOS of the frame, so they are independent of that capture's (unrecoverable) DPR: outer guide x=66 of a 3600 frame -> 1.83% of frame width pad swatch 205px vs the 1916px hero band -> 10.7% of viewport height --ags-edge how far out elements sit from the section's left/right edge. This is where the interior ags-c-* pages and .ags-masters ALREADY sit, which is why they are the sections she did NOT mark. --ags-sec-pad breathing room above AND below each section's content. Per-section, so between two sections you read the sum — the "spare space between sections" she asked for. Scope is exactly her annotations: pad on mission/grouptour/vip/exp, edge on grouptour/vip/exp/masters. VALUES IS DELIBERATELY UNTOUCHED — it carries zero annotations, and it is the only section whose design aspect (1.957) is already wider than a laptop viewport (1.879), which is precisely why she left it alone. */ /* ---- REFERENCE FRAME (ultrawide pass, 2026-09-08) --------------------------------- THE PROBLEM. Above ~1440 every value that SIZES content froze (px caps on the cqw fonts, the root rem's 22px ceiling, min(14cqw,200px) on the GT photo) while section heights kept growing with the viewport. At 3440x1440 that left the 1440-sized composition sitting in a 1440-tall section: VIP's copy marooned over a ~275px void, the GT small photo tiny beside a 547px-tall neighbour, Values' middle sparse. It is ONE cause, so it gets ONE fix — patching gap-by-gap did not converge (3 attempts). THE MODEL (Simon's call: "keep our layout similar to how it is on 1440, we are happy to have more space on the sides but keep the sections filling the viewport"). Treat 1440x766 as the design frame — itself derived from Mika's capture, whose hero is exactly one viewport at 3600:1916 — and make ultrawide a literal ENLARGEMENT of it. Every gap, photo and font then holds its 1440 proportion, sections still fill, and the pad stays consistent by construction. TWO scales, deliberately separate, because welding them is what broke earlier passes: --ags-fsc FRAME scale. How wide the layout is. Tracks --ags-frame, which is 100vw until the viewport is BOTH wide and tall. The max(1920px, ...) floor is what keeps every <=1920 viewport byte-identical to before: the frame never gets NARROWER than it used to be, so no viewport suddenly grows side margins it didn't have. --ags-scale CONTENT scale. How big the content is. A contain-fit of 1440x766, so it is bounded by viewport HEIGHT as well as frame width and the composition can therefore never overflow a short viewport. This is the one that must never be floored: flooring it would let content grow past the frame on a 1024-wide screen. --ags-tsc scale / fsc — how much the content is shrunk RELATIVE to its frame. 1 whenever width is the binding constraint. cqw tracks the FRAME, so any cqw-sized font must multiply by this to track CONTENT instead; without it a wide-but-short viewport (1920x900, 2560x1080) oversizes the type and collides. It reduces to the OLD --gt-tsc exactly at the heights that were already verified (0.914 at 1440x700, 1 at >=766 when width-bound), which is why the laptop range does not move. --ags-px ONE REFERENCE PIXEL: 1px at 1440x766, growing with --ags-scale. Every frozen px literal below becomes calc(N * var(--ags-px)) where N is that value's measured 1440 size — so the number in the CSS still reads as the design's own px value. Worked examples (frame / content scale / side space per edge): 1280x700 1280 / 0.889 / 0 1440x766 1440 / 1.000 / 0 1440x700 1440 / 0.914 / 0 1920x1080 1920 / 1.333 / 0 2560x1080 2030 / 1.410 / 265 2560x1440 2560 / 1.778 / 0 3440x900 1920 / 1.175 / 760 3440x1440 2706 / 1.880 / 367 Type at 3440x1440 is ~1.88x its 1440 size — the deliberate freeze in docs/TYPE-SPEC.md is what this pass replaces, and Simon accepted that trade-off explicitly. --- */ --ags-frame: min(100vw, max(1920px, calc(1.8799 * 100lvh))); --ags-fsc: tan(atan2(var(--ags-frame), 1440px)); --ags-scale: min(var(--ags-fsc), tan(atan2(100lvh, 766px))); --ags-tsc: calc(var(--ags-scale) / var(--ags-fsc)); --ags-px: calc(var(--ags-scale) * 1px); --ags-edge: calc(0.0183 * var(--ags-frame)); /* Frame letterbox + the content inset that lands on the frame GUIDE at any width. --ags-well is 0 below ~1920 (frame == 100vw) and opens as side margin past it, so --ags-edge-guide == --ags-edge at/below the reference and caps content to the frame guide on ultrawide (keeps the layout faithful with side space — Simon 2026-09-21). Use for HORIZONTAL insets, NOT gaps/widths. */ --ags-well: max(0px, calc((100vw - var(--ags-frame)) / 2)); --ags-edge-guide: calc(var(--ags-well) + var(--ags-edge)); /* DAMPENED HEADING SCALE (Simon 2026-09-21): display titles scaled 1.88x at 3440 read too big. --ags-hsc tracks --ags-scale up to ~1920 (scale 1.333) then grows at only 35% of the rate, so ≤1920 is UNCHANGED and ultrawide titles are ~1.52x instead of 1.88x. --ags-hpx is the matching "reference pixel" for TITLE font-sizes (swap --ags-px -> --ags-hpx on display headings only). */ --ags-hsc: calc(min(var(--ags-scale), 1.333) + max(0, var(--ags-scale) - 1.333) * 0.35); --ags-hpx: calc(var(--ags-hsc) * 1px); /* ---- CTA PILL — ONE definition, consumed by the homepage §10 and every interior §10 ---- Simon 2026-09-09: "take the same consistent button as the home page". They had drifted badly — interior measured 233x53 against the homepage's 300x32 (font 15.1 vs 14.63, vertical padding 15.9 vs 6, and no min-width at all). Tokens rather than two copies of the numbers, so the two consumers cannot drift apart again; the ONLY place to change the CTA pill is here. The font is the Kit button global's own 0.8125rem — the interior had been overriding it. */ --ags-cta-fs: 0.8125rem; --ags-cta-pad: calc(6 * var(--ags-px)) calc(64 * var(--ags-px)); --ags-cta-minw: calc(300 * var(--ags-px)); /* Heading + the heading→pill gap, added 2026-09-09 when Simon asked to match the heading too. The interior had 51.8px/1.12 against the homepage's 33.75px/1.0 and no gap rule at all (22px vs 46). Same principle: one definition, two consumers. Mobile is EXCLUDED by design — both CTAs have their own treatment inside the ≤1023 block (the homepage's is a text link, not a pill). */ --ags-cta-h-fs: 1.875rem; --ags-cta-h-lh: 1; --ags-cta-gap: calc(19.15 * var(--ags-px)); /* The heading→pill distance is TWO things stacked: the flex container's own row-gap PLUS the button widget's margin-top. Only the second was shared, so the total still differed (46 vs 41) — the interior inner sat on Elementor's default 22px against the homepage's 28. Both live here now. */ --ags-cta-igap: 1.5556rem; /* The BAND itself (Simon 2026-09-09: "match the padding too"). These differed in BEHAVIOUR, not just value: the homepage carried a flat 90px from Elementor's per-element setting (so it never scaled) and got its height from min-height:48svh, while the interior used a scaled 158.4 and had no min-height at all — so its height was padding+content. Matching the padding alone would still have left the bands 313 vs 368 tall, so the min-height is shared too and both bands are now identical. 90 is the homepage's own value at the 1440 reference, now scaling like everything else — which also un-freezes it on ultrawide (it was stuck at 90 there). */ --ags-cta-band-pad: calc(90 * var(--ags-px)); --ags-cta-band-minh: 48svh; --ags-sec-pad: 10.7svh; /* the box a full-screen section's content must land inside */ --ags-stage-box: calc(100lvh - 2 * var(--ags-sec-pad)); /* ---- Radii ---- */ --ags-radius-sm: 8px; --ags-radius-btn: 6px; /* (unused — all CTAs are pills; kept for any future rounded-rect) */ --ags-radius-pill: 999px; /* Type lives in the Elementor Global Kit now (UI-editable, migrates natively) — sizes there are in REM. This is the ONE knob that scales the whole scale as a unit: 1rem resolves to 1px at the 1280 reference (16px root × rem where rem=px/16) and grows to ~1.375× on ultrawide. See docs/TYPE-SPEC.md + create-redesign-kit.php. */ } /* ============================================================================= OLD-SAFARI / iOS-12 FALLBACK for the scale engine + viewport-unit tokens (Simon 2026-09-24). Safari <15.4 (e.g. the 2013 iPad Air on iOS 12) lacks CSS trig (tan/atan2 — which powers --ags-fsc/--ags-scale) AND svh/lvh, so the raw definitions above are INVALID there → --ags-frame, --ags-fsc, --ags-scale and the whole --ags-px cascade collapse → "layout ruined". When trig is unsupported we route those roots to JS-computed equivalents that use NO trig (functions.php `ageshio_stable_vh` publishes --ags-frame-fb / --ags-fsc-fb / --ags-scale-fb from innerWidth/ innerHeight, refreshed on width/orientation) and swap the svh/lvh tokens to vh. tan(atan2(a,b)) == a/b, so the JS scale is mathematically IDENTICAL to the CSS one. MODERN browsers support trig → they SKIP this whole block = zero change. Every derived token (--ags-tsc/px/edge/well/hsc/hpx/edge-guide) cascades from these roots, so no others need overriding here. ============================================================================= */ @supports not (width: tan(1deg)) { :root { --ags-frame: var(--ags-frame-fb, 100vw); --ags-fsc: var(--ags-fsc-fb, 1); --ags-scale: var(--ags-scale-fb, 1); --ags-cta-band-minh: 48vh; --ags-sec-pad: 10.7vh; --ags-stage-box: calc(100vh - 2 * 10.7vh); } } html { /* 1.25vw == 16px at 1280px viewport → Kit rem sizes hit exact Figma px @1280; clamped 16→22px so type stays put below laptop and caps on ultrawide. */ font-size: max(16px, min(1.25vw, 22px)); font-size: clamp(16px, 1.25vw, 22px); } /* THE REM KNOB — reference-frame driven, site-wide (2026-09-09). Every Kit/rem-sized thing (VIP's whole composition, mission, values, --gt-rgap, and now the interior ags-c-* pages' type) enlarges in proportion instead of freezing at the old 22px ceiling. 18px is the knob's value at the 1440 reference, so this is IDENTICAL to the clamp above wherever the frame is 100vw and >=1280 (1512 → 18.9px, 1728 → 21.6px); it only differs where the old clamp was capping (1920: 22 → 24) or where content must shrink to fit a short viewport. The 16px floor is load-bearing: shares this element with the MOBILE layout, where the frame scale is ~0.27 and an unfloored value would render 5px type — the floor is also why mobile came out byte-identical on both the homepage and the interior pages. (Was scoped `html:has(body.ags-redesign)` while only the homepage had been converted.) */ html { font-size: max(16px, calc(18 * var(--ags-px))); } /* ============================================================================= SMOOTH SCROLL (Lenis) — the recommended helper CSS. ----------------------------------------------------------------------------- Lenis adds `.lenis` to when it's driving the scroll (see js/ageshio-smooth-scroll.js, enqueued front-page-only). These rules let the page size correctly under JS-driven scrolling and stop native CSS smooth-scroll from fighting Lenis on anchor jumps. Absent Lenis (reduced-motion / other pages / no-JS), `.lenis` is never added, so none of this applies and native scroll is untouched. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================================================= BACK TO TOP button (ageshio-totop.js) — faithful to Simon's ref (2026-09-22): a SLIM VERTICAL pill, bottom-right, up-arrow over "TO TOP" reading upward. Light/ outlined (cream + maroon), fills maroon on hover; fades in past ~60% scroll. Site-wide. */ .ags-totop { position: fixed; right: max(16px, min(2vw, 30px)); right: clamp(16px, 2vw, 30px); bottom: max(16px, min(2vw, 30px)); bottom: clamp(16px, 2vw, 30px); z-index: 900; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; width: 42px; padding: 13px 0 15px; border-radius: 999px; cursor: pointer; background: #F7F4F2; color: var(--e-global-color-primary, #8E1E00); border: 1px solid rgba(142, 30, 0, .5); box-shadow: 0 6px 20px rgba(20, 16, 16, .16); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease, color .2s ease, border-color .2s ease, bottom .45s cubic-bezier(.4,0,.2,1); } .ags-totop.is-shown { opacity: 1; visibility: visible; transform: none; } /* HOMEPAGE only (body.ags-redesign): the mobile action bar (ENG·BOOK·☰) is pinned to the BOTTOM, so lift the back-to-top button clear of it — its normal corner gap ABOVE the bar (bar height = 2u pad + pill-h). When the bar slides away on scroll-down (body.ags-nav-hidden, set by ageshio-nav.js), drop the button back to the normal corner offset, timed to the bar's own .45s slide so they move together. Interior pages put the bar at the TOP → no collision, so this is homepage-scoped. */ @media (max-width: 1023px) { body.ags-redesign .ags-totop { /* bar height = 3.55 × the mnav knob (2u top+bottom padding + 1.55u pill height). The knob min(4.6vw,18px) is RE-STATED here because --mnav-u is scoped to .ags-mnav and this button is a body-level sibling (not a descendant), so it can't inherit that var. Lift = bar height + the button's normal corner gap. */ --ags-bar-h: calc(3.55 * min(4.6vw, 18px)); bottom: calc(var(--ags-bar-h) + max(16px, min(2vw, 30px))); bottom: calc(var(--ags-bar-h) + clamp(16px, 2vw, 30px)); } body.ags-redesign.ags-nav-hidden .ags-totop { bottom: max(16px, min(2vw, 30px)); bottom: clamp(16px, 2vw, 30px); } } .ags-totop:hover { background: var(--e-global-color-primary, #8E1E00); color: #F7F4F2; border-color: transparent; } .ags-totop:focus-visible { outline: 2px solid var(--e-global-color-primary, #8E1E00); outline-offset: 2px; } .ags-totop svg { display: block; } .ags-totop__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: .18em; font-weight: 700; line-height: 1; } @media (prefers-reduced-motion: reduce) { .ags-totop { transition: opacity .01s, visibility .01s; } } /* ============================================================================= MOTION — reduced-motion accessibility guard (the ONE thing Elementor Pro's native Motion Effects don't handle). Entrance animations add `.elementor-invisible` (opacity:0) then reveal via JS; scrolling motion_fx uses transforms. If the user prefers reduced motion, force everything to its final, visible, untransformed state so content is NEVER stuck hidden and nothing drifts. Belt-and-suspenders: also neutralise the animation classes themselves. Motion authored via _animation / motion_fx in scripts/build_homepage.py; rationale in functions.php + the spec. --- */ /* SAFETY NET — never let a CONTAINER stay stuck hidden. Elementor's entrance-animation JS reliably reveals WIDGETS but is flaky on inner flex containers (it adds `.elementor-invisible` at render but doesn't always remove it), which once blanked the blue Values columns + Masters cards. So we only ever tag WIDGETS for entrance anim (see anim_stagger in build_homepage.py); this rule is belt-and-suspenders: any .e-con that still carries .elementor-invisible is forced visible so content can't vanish. */ .ags-redesign [data-elementor-type="wp-page"] .e-con.elementor-invisible { visibility: visible !important; opacity: 1 !important; } /* OLD SAFARI (<15, e.g. the iOS-12 iPad): Elementor's scroll-triggered entrance animations don't reliably remove `.elementor-invisible` from WIDGETS there, so animated headings (the Mission statement, etc.) stayed hidden = "blank red section". Force ALL invisible content visible with no motion — content over animation. Gated on aspect-ratio (Safari 15+) so MODERN browsers skip this and keep their fade-ins. (Mirrors the reduced-motion fallback below.) */ @supports not (aspect-ratio: 1 / 1) { .elementor-invisible { visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { .elementor-invisible { visibility: visible !important; opacity: 1 !important; animation: none !important; } .elementor-element { transition: none !important; } /* kill any Elementor scrolling-effects transform on the redesign page */ .ags-redesign [data-elementor-type="wp-page"] .elementor-motion-effects-element, .ags-redesign [data-elementor-type="wp-page"] .elementor-motion-effects-container { transform: none !important; } /* wipe: never hide the image behind the panel */ .ags-wipe::after { display: none !important; } } /* ============================================================================= IMAGE WIPE (§8 About) — the ONE effect Elementor Pro can't do natively, so it gets a tiny scoped bit of custom CSS + a dedicated observer in the theme footer (see functions.php ageshio_wipe_script). A colored panel covers the media panel, then sweeps off to the right when the section scrolls in — the single dramatic brand moment (spec M3). Panel is red (brand); scaleX 1→0 from the right edge. Reduced-motion / no-JS safe: the panel starts hidden and only APPEARS once JS adds `.ags-wipe--armed` (so if JS is off, the image is just visible, never covered). --- */ .ags-wipe { position: relative; overflow: hidden; } /* item 3 (Simon 2026-09-22): REMOVE the homepage About slide-reveal — the red wipe panel never covers, so the photo simply shows on scroll-in. Scoped to the About media (the only .ags-wipe on the site); the ::after panel is what animated, so hiding it removes the reveal entirely. */ body.ags-redesign .ags-about__media.ags-wipe::after { display: none !important; } .ags-wipe::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--ags-red); transform: scaleX(0); /* default OFF — no cover unless JS arms it */ transform-origin: right center; z-index: 4; pointer-events: none; } /* JS armed the wipe (and we're not reduced-motion): panel covers the image, ready. */ .ags-wipe.ags-wipe--armed::after { transform: scaleX(1); transform-origin: left center; } /* Triggered on scroll-in: sweep the panel off to the right. */ .ags-wipe.ags-wipe--armed.is-wiped::after { transform: scaleX(0); transform-origin: right center; transition: transform 1.15s cubic-bezier(0.76, 0, 0.24, 1); } /* ============================================================================= RESPONSIVE SCOPE — desktop ≥1024 (locked) · mobile ≤1023 (real single-column layout) ----------------------------------------------------------------------------- The fluid clamp()/vw/grid layout is tuned to hold from ~1024px up through ultrawide (3440), so it stays LOCKED to min-width:1024 — the boundary it's designed to hold to. The instant the viewport drops BELOW that (i.e. the desktop layout can no longer fit), the mobile layout takes over: a real single-column reflow covering the ENTIRE <1024 range (phones AND small tablets). See the MOBILE block far below + docs/superpowers/specs/2026-07-31-mobile-homepage-design.md. The old 768–1023 "coming soon" placeholder gate is RETIRED — mobile now covers that band. The base min-width:1024 below still applies at ≥1024 (unchanged desktop); the mobile media block releases it. --- */ body.elementor-page { min-width: 1024px; } /* The branded placeholder gate (ageshio_mobile_gate() in functions.php) is now DORMANT — the real mobile layout covers the whole <1024 range, so the gate never shows. Kept hidden (and the PHP kept) as a harmless fallback; safe to delete the markup + this line together later. */ .ags-mobile-gate { display: none !important; } /* ============================================================================= BUTTONS — single source of truth (Figma). ----------------------------------------------------------------------------- btn() emits NO inline background/radius/padding in the widget JSON, so Elementor generates no competing per-element rule — these plain component classes win with NORMAL specificity (no compounding tricks). Variants: solid · invert · bar · link. Font is the accent global (Red Rose 700). --- */ .ags-btn .elementor-button { border-radius: var(--ags-radius-pill); /* pill — all filled CTAs are pills in the reference */ padding: 8px 34px; /* thin pill (~36px tall) — matches the reference */ line-height: 1.2; border: none; transition: background-color .15s ease, color .15s ease; } /* All filled section CTAs are PILLS in the Figma reference (verified against s05/s06/s07/s09 crops), so every variant keeps the base pill radius — no 6px rounded-rect. --solid = a content-width red pill (§3/§5/§6); --bar = a full-width red pill (§7/§9); --invert = cream pill (§10). */ .ags-btn--solid .elementor-button { background-color: var(--ags-red); color: var(--ags-cream); } .ags-btn--solid .elementor-button:hover { background-color: #7a1900; } .ags-btn--invert .elementor-button { background-color: var(--ags-cream); color: var(--ags-red); } .ags-btn--invert .elementor-button:hover { background-color: #ffffff; } /* Full-width red pill (Experiences §7, Masters §9 CTAs span their column). */ .ags-btn--bar .elementor-button { background-color: var(--ags-red); color: var(--ags-cream); justify-content: center; /* Padding in `em`, not the base pill's flat 8px/34px: the label is a Kit rem font, so on the homepage it now grows with the reference frame while a px pad froze — the bar measured 36px tall at 1440 but only 54 where 68 was proportional, i.e. visibly squat on ultrawide. The coefficients ARE the old px values at the 1440 reference (8/14.625, 34/14.625), so nothing moves at any verified viewport, and this now holds on interior pages and mobile too. */ padding: 0.547em 2.325em; } .ags-btn--bar .elementor-button:hover { background-color: #7a1900; } /* Borderless underlined text link (READ OUR REVIEWS §3, MEET THE GRAND MASTERS §9). */ .ags-textlink .elementor-button { background-color: transparent; border: none; border-radius: 0; padding: 4px 0; color: var(--ags-red); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 4px; } .ags-textlink .elementor-button:hover { background-color: transparent; color: #7a1900; } /* ============================================================================= SITE NAVBAR — Theme Builder header (.elementor-location-header) ----------------------------------------------------------------------------- FAITHFUL PORT of the old hero nav. build_header_v2.py emits the SAME markup + classes the hero nav used (.ags-hero__nav row · .ags-nav-logo · .ags-nav-group ×3 · .ags-nav-spacer · .ags-nav-lang · .ags-nav-cta), so the original hero-nav rules below style it identically. Only difference from the hero: the gutter/top-offset that the hero STAGE used to supply is applied here on the header's own inner container (the nav is no longer wrapped by the hero stage). Position/hide-show is the block further down. */ /* Frame: full-bleed row, symmetric gutter. The TOP/side spacing is applied on the header's own wrapper container below (not here) — Elementor emits a per-element padding on .ags-hero__nav that zeroes any padding set on this rule, so the offset must live on the header wrapper which we control cleanly. */ .elementor-location-header .ags-hero__nav.e-con { flex-direction: row; align-items: flex-start; gap: max(24px, min(3vw, 64px)); gap: clamp(24px, 3vw, 64px); width: 100%; box-sizing: border-box; padding: 0 var(--ags-hero-gutter); } /* Whole-navbar top spacing: push the entire bar (logo + links + CTA together) down off the top edge. Applied on the header's outer wrapper — the reliable hook (Elementor's default 10px here is replaced with a comfortable, uniform offset). */ .elementor-location-header > .e-con { padding-top: 20px; padding-bottom: max(8px, min(1vh, 14px)); padding-bottom: clamp(8px, 1vh, 14px); /* trimmed ~half — tighter bar, less clash with content */ } /* Brand crest (top-left) — the red emblem SVG. Sized RELATIVE to the nav link type, not a fixed px: in the Figma reference the logo is ~1.76× the 3-line link-stack height, so we express it in `em` off the link font. Pin the wrapper's font-size to the link size (14px) so `em` resolves against the NAV type (the wrapper otherwise inherits 16px) — now if the nav font scales, the logo scales with it. 7.65em ≈ 107px @14px = 1.76× the link stack. */ .elementor-location-header .ags-nav-logo { flex: 0 0 auto; margin-right: max(24px, min(2.5vw, 56px)); margin-right: clamp(24px, 2.5vw, 56px); font-size: 14px; /* Centre the (taller) logo on the link stack so the cloud rises ABOVE the first link and the base sits below it (the reference balance) instead of top-aligning + overhanging downward. align-self:center centres it against the row; negative block margins cancel its overhang so it does NOT inflate the nav-row height (which was pushing the bottom padding down). */ align-self: center; margin-top: calc((7.65em - 3.9em) / -2); margin-bottom: calc((7.65em - 3.9em) / -2); /* -(logo − link-stack)/2 ≈ -26px each side */ } .elementor-location-header .ags-nav-logo img { width: auto; height: 7.65em; max-width: none; display: block; } /* Nav link type is Kit-owned (nav_link: Red Rose Reg 14/-3%). Here: only layout — zero the

margin so link tops align (Events line == English+ line), and make the inherit the widget's Kit type instead of the theme's default anchor styling. */ .elementor-location-header .ags-nav-group p, .elementor-location-header .ags-nav-lang p { margin: 0; } .elementor-location-header .ags-nav-group p a, .elementor-location-header .ags-nav-lang p a { font: inherit; letter-spacing: inherit; } .elementor-location-header .ags-nav-group .elementor-widget-container, .elementor-location-header .ags-nav-lang .elementor-widget-container { padding: 0; } /* CAP the nav font growth. The Kit nav_link global is 0.875rem, so it scales with the "scales as one unit" root knob (14px@1280 → 19px@1920) — but the navbar is CHROME/UI, not editorial content, so it shouldn't balloon on wide screens. clamp() lets it track the rem a little then freezes at 15px. Scoped under the header (0-2-1) to beat the Kit global; the font:inherit above picks it up from the

. Same cap on the BOOK WITH US pill. */ .elementor-location-header .ags-nav-group p, .elementor-location-header .ags-nav-lang p, .elementor-location-header .ags-nav-cta .elementor-button { font-size: max(14px, min(0.875rem, 15px)); font-size: clamp(14px, 0.875rem, 15px); } /* Large gap between the TWO LEFT columns (Figma ≈84px); base row gap stays tight elsewhere. */ .elementor-location-header .ags-nav-group + .ags-nav-group { margin-left: max(48px, min(5.5vw, 120px)); margin-left: clamp(48px, 5.5vw, 120px); } /* Same large lead before the English+ link, so the Events/Shop column separates from the right cluster (English+ · BOOK WITH US) the way the two left column-pairs do. */ .elementor-location-header .ags-nav-lang { margin-left: max(48px, min(5.5vw, 120px)); margin-left: clamp(48px, 5.5vw, 120px); } .elementor-location-header .ags-nav-group, .elementor-location-header .ags-nav-lang { justify-content: flex-start; } /* Each link group: tight vertical stack sized to content so nowrap links never overflow. width:auto (not Elementor's forced 100%) so flex-basis sizes to content; 3px row gap. */ .elementor-location-header .ags-nav-group.e-con { flex: 0 0 auto; width: auto; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; gap: 3px; padding: 0; } /* Flexible spacer that pushes the right cluster (Events/Shop · English+ · BOOK WITH US) to the RIGHT edge — the piece the boxed template lacked (pill was clipping off-screen). */ .elementor-location-header .ags-nav-spacer.e-con { flex: 1 1 auto; min-width: var(--ags-space-4); } /* English + : plain nav link, inline with the right cluster. */ .elementor-location-header > .ags-hero__nav .ags-nav-lang, .elementor-location-header .ags-nav-lang { flex: 0 0 auto; align-self: flex-start; } .elementor-location-header .ags-nav-lang p a { color: var(--ags-cream); -webkit-text-decoration: none; text-decoration: none; } /* BOOK WITH US: full thin-long PILL. Scoped under the header (0-3-1) to beat the later .ags-btn--solid section-CTA rule (6px rounded-rect) on source order. */ .elementor-location-header .ags-nav-cta { flex: 0 0 auto; align-self: flex-start; } .elementor-location-header .ags-nav-cta .elementor-button { padding: 3px 38px; line-height: 1.2; white-space: nowrap; border-radius: var(--ags-radius-pill); } /* ============================================================================= NAVBAR v2 (.ags-nav2) — NEW design. Reference: figma/frames/navbar-v2/navbar-desktop.png. STRUCTURE (matches the reference): .ags-nav2 (transparent, fixed via .elementor-location-header) = a row of: ├─ .ags-nav2__logo — crest + AGESHIO wordmark, OUTSIDE the pill, on the dark page bg (far left) └─ .ags-nav2__pill — the floating CREAM pill, contains ONLY the nav menu: left group = Tour · Retreat · Experiences▾ · Discover▾ (+ Events etc. when re-added) right group = English▾ · [BOOK YOUR TRIP▾ red pill] (split anchored to the item before .ags-nav-book) There is NO separate button widget and NO crest inside the pill — BOOK YOUR TRIP is the menu item .ags-nav-book (keeps its dropdown), styled as the red pill. COLOURS use the Elementor GLOBAL palette vars (single source of truth — Site Settings → Global Colors), with the local --ags-* mirror as fallback. Loaded after Elementor's widget CSS so these win on source order (no !important). Supersedes the inert .ags-hero__nav block above. ============================================================================= */ /* --- ANIMATED MEGA-MENU (two states) ------------------------------------------------------- DEFAULT (no hover): a floating rounded CREAM PILL holding only the links; the crest sits OUTSIDE it, on the page/hero background to the left (crest is NOT on cream). EXPANDED (hovering a dropdown parent, via :has()): the pill animates out to the PAGE EDGES, squaring into a full-width rectangle that now supports BOTH the crest and the links (crest becomes part of the cream), and the dropdown WINDOW drops below it as a connected cream panel. Reference: figma/frames/navbar-v2/navbar-dropdown-open.png. --------------------------------------------------------------------------------------------- */ .ags-nav2 { --ags-nav-crest: 112px; /* emblem size */ --ags-nav-gutter: max(10px, min(1.4vw, 20px)); --ags-nav-gutter: clamp(10px, 1.4vw, 20px); /* side gutter → pill reaches close to both edges */ --ags-crest-gutter: max(-8px, min(0.1vw, 0px)); --ags-crest-gutter: clamp(-8px, 0.1vw, 0px);/* crest shifted further LEFT (near/at the viewport edge) */ --ags-nav-gap: max(16px, min(1.8vw, 30px)); --ags-nav-gap: clamp(16px, 1.8vw, 30px); /* gap crest→pill: a little room so the pill isn't crowded by the logo */ --ags-nav-top: 20px; /* rest gap: viewport top → crest & pill top */ --ags-nav-photo-w: 108px; /* dropdown photo size (square) */ --ags-nav-photo-gap: 12px; /* gap between the two dropdown photos */ --ags-nav-photos-w: calc(2 * var(--ags-nav-photo-w) + var(--ags-nav-photo-gap)); /* the 2-photo cluster width — the BOOK pill matches this so the photos line up directly under it (per feedback) */ --ags-anim: .40s cubic-bezier(.22,1,.36,1);/* ONE shared timing for the whole morph (open + close) */ /* easeOutQuad — a GENTLE decelerate. NOT an extreme ease-out (e.g. .2,.8,.2,1): those fling ~80% of the distance out in the first ~20% of time then crawl the final bit for the rest, which read as a "hesitation before going all the way out". easeOutQuad keeps a more even velocity to the edge. */ --ags-nav-anim: .42s cubic-bezier(.25, .46, .45, .94); /* the DROPDOWN reveal (window height). */ --ags-nav-geo: .34s cubic-bezier(.25, .46, .45, .94); /* PILL GEOMETRY, SHORT edges (top ~20px, right ~20px) + corners — easeOutQuad. */ --ags-nav-geo-x: .34s cubic-bezier(.25, 1, .5, 1); /* PILL GEOMETRY, LONG left edge (margin-left+padding-left travel ~138px, the crest zone, vs 20px for the others). SAME .34s duration as the short edges so ALL edges reach the corners at the EXACT SAME instant; a more front-loaded curve (easeOutQuart) covers its 7× distance so it's visually arrived at the same moment the short edges are — no lag, no early finish. (margin-left+padding-left share this var so links stay pinned.) */ --ags-nav-lead: .1s; /* stagger: on OPEN the pill geometry goes FIRST and the dropdown drops after this lead; on CLOSE the dropdown retracts first and the geometry rounds back after it. */ /* Expanded padding = the rest insets, added back so content (links) never moves as the pill fills to the edges. The window uses the NEGATIVES of these to span the full viewport. */ --ags-pad-l-open: calc(var(--ags-crest-gutter) + var(--ags-nav-crest) + var(--ags-nav-gap)); --ags-pad-r-open: var(--ags-nav-gutter); } /* Header row — holds the absolute crest overlay + the pill. position:relative anchors the crest; the pill is the single flow child that fills the width. NO cream on the row itself — the PILL is the one cream shape (it morphs into the full panel), so there's no crossfade/two-shape flash. */ .ags-nav2.e-con { background-color: transparent; padding: 0; width: 100%; position: relative; flex-direction: row; align-items: stretch; } /* CREST — an ABSOLUTE OVERLAY (not in flow). This is REQUIRED for the Model-B morph: the pill must be able to fill edge-to-edge UNDER the crest on expand. The crest floats on top at the far left, its own fixed position, and never moves when the pill morphs. Decorative → no pointer events. Kill the Elementor image-widget inner inset so the crest box == the crest image. */ .ags-nav2__logo.e-con { position: absolute; left: var(--ags-crest-gutter); top: -10px; /* lifted UP a little → more space between crest & the pill */ z-index: 5; width: auto; align-items: flex-start; pointer-events: none; } /* Home link (2026-08-16): the crest is wrapped in an ; keep the layout- transparent (display:contents). The crest is sized DETERMINISTICALLY to --ags-nav-crest — the exact width the pill's left-padding already reserves for it. The old width:auto chain collapsed to 48px once the lazy SVG sat inside the link (flex item → widget-container → img all width:auto, no intrinsic width propagated), so we pin the box and let object-fit keep the ~square SVG's aspect. */ /* The crest is a home link, but its parent .ags-nav2__logo is pointer-events:none (it overlays the hero; the logo was decorative). Re-enable clicks on the crest itself so the fires. */ .ags-nav2__crest { width: var(--ags-nav-crest); flex: 0 0 auto; pointer-events: auto; cursor: pointer; } .ags-nav2__crest .elementor-widget-container { width: var(--ags-nav-crest); padding: 0; } .ags-nav2__crest .elementor-widget-container > a { display: contents; } .ags-nav2__crest img { height: var(--ags-nav-crest); width: var(--ags-nav-crest) !important; max-width: none !important; -o-object-fit: contain; object-fit: contain; display: block; } /* The CREAM PILL — SECOND in flow, fills the remaining width. Floating rounded bar at rest (short, vertically centred in the taller row via the row's align-items:center). On expand it dissolves INTO the row's cream: bg transparent + radius 0 + right margin → 0, so the whole bar reads as one cream rectangle filling to both edges & the top. Timed on the shared --ags-anim. */ /* THE PILL is the single cream shape that MORPHS. At REST: a short rounded floating bar, inset by the top gap, the crest zone on the left, and the gutter on the right. On EXPAND (.is-mega-open): margins → 0 so it grows to fill the viewport top + both edges, corners square. The removed margins are added back as PADDING so the links never move. Its child .ags-nav2__window unfolds downward inside it (grid reveal) — because the window is a CHILD, its width == the pill's width at EVERY frame, so pill + panel morph as ONE shape. Reverse (mouse-leave removes the class) runs all these transitions backwards → shrinks back into the pill. ONE shared timing (--ags-anim). */ .ags-nav2__pill.e-con { position: relative; /* anchors the window child */ background-color: var(--e-global-color-accent, var(--ags-cream)); /* ELEVATION (review fix, 2026-09-20): the pill is cream, same as the page background on light interior pages (Articles, About) — with no shadow there it had zero contrast, so the nav links looked like bare text floating on the page instead of a floating pill. A soft, low-opacity drop shadow reads as elevation on ANY background: near-invisible extra lift over the maroon homepage hero (already high-contrast), and the thing that actually separates the pill from a same-colour page on Articles/About/every interior page. Two stops (tight + soft) for a natural "resting on the page" shadow rather than a single hard blur ring. */ box-shadow: 0 2px 6px rgba(17,16,16,.10), 0 8px 20px rgba(17,16,16,.14); /* = half the ~44px pill height → an IDENTICAL fully-rounded pill at rest, but it animates COHESIVELY. The global --ags-radius-pill (999px) kept the corners visibly round until ~98% of the morph, so they squared off ~100ms AFTER the edges reached the corners — that's the "corners aren't part of the same animation" issue. A 22px start squares the top corners in step with the edges reaching the viewport. */ border-radius: 22px; flex: 1 1 auto; min-width: 0; margin: var(--ags-nav-top) var(--ags-nav-gutter) 0 var(--ags-pad-l-open); /* left margin reserves crest zone */ padding: 6px 10px 6px 20px; align-items: center; /* UNIFIED BLOOM: keep the links on one row, but let the dropdown WINDOW wrap onto its OWN full- width line BELOW them (flex-wrap) so it's IN-FLOW — the pill's OWN height then includes it. The window reveals via its grid 0fr→1fr; as it grows the pill grows with it, on the SAME transition as the pill's margin/padding/radius → the whole cream shape morphs as ONE motion. At rest the window is 0-height, so this second line adds nothing and the pill looks EXACTLY as before. */ flex-wrap: wrap; row-gap: 0; /* the wrapped dropdown line must NOT inherit the pill's 20px gap: at rest that gap inflated the pill (44→64px); at 0 the rest pill stays thin AND the open dropdown connects directly under the links (its own padding gives the spacing). */ /* CLOSE: everything reverts TOGETHER (no lead) — the pill geometry and the dropdown collapse on the same clock, so the close reads as ONE cohesive motion, not a staged one-by-one revert. */ transition: margin-top var(--ags-nav-geo), margin-right var(--ags-nav-geo), margin-left var(--ags-nav-geo-x), padding-top var(--ags-nav-geo), padding-right var(--ags-nav-geo), padding-left var(--ags-nav-geo-x), border-radius var(--ags-nav-geo); } .ags-nav2.is-mega-open .ags-nav2__pill.e-con { margin: 0; /* fills top + both edges */ /* add the removed insets back as padding so the links + panel anchor DON'T move: margin-top collapses 20→0 (the white fills UP to the viewport top) while padding-top grows by the same amount, so the content baseline and the pill's BOTTOM edge stay fixed → no shift-up, and the panel (top:100%) unfolds from a stationary line in sync with the fill. */ padding-top: calc(6px + var(--ags-nav-top)); padding-left: calc(20px + var(--ags-pad-l-open)); padding-right: calc(10px + var(--ags-pad-r-open)); border-radius: 0 0 18px 18px; /* square top (flush to viewport top/edges), rounded bottom — as before */ box-shadow: 0 22px 34px rgba(17, 16, 16, .10); /* the depth that was on the window, now on the whole shape */ /* OPEN ordering: the geometry (edges + corners) goes FIRST — no delay — so the pill forms its shape before the dropdown drops into it (the window height below is delayed by --ags-nav-lead). The long left edge uses the faster --ags-nav-geo-x so it reaches the corner in step with the short edges. */ transition: margin-top var(--ags-nav-geo), margin-right var(--ags-nav-geo), margin-left var(--ags-nav-geo-x), padding-top var(--ags-nav-geo), padding-right var(--ags-nav-geo), padding-left var(--ags-nav-geo-x), border-radius var(--ags-nav-geo); } /* Nav menu widget fills the pill; lay links out horizontally (the Pro widget's wrapper chain collapses to min-content otherwise, stacking links vertically). Force the widget + its inner wrappers to position:static so the full-width dropdown window resolves against .ags-nav2 (x=0, full viewport width) — NOT the narrower widget wrapper (which offset the panel left). */ .ags-nav2__menu { flex: 1 1 auto; min-width: 0; width: 100%; position: static; } /* ALL wrappers between the sub-menu and .ags-nav2 must be static, so the full-width dropdown window's containing block is .ags-nav2 (only positioned ancestor = x:0, full 1280 width). The nav