/* * ============================================================================= * SEKHMET TOURS -- "Limestone & Clay" design layer (EDT). * ============================================================================= * Every class is namespaced `edt-` and every legacy token is `--edt-*`, so * nothing collides with WooCommerce (.button), Elementor, or the theme's * legacy `sekhem-` classes. * * Usage: wrap EDT-built markup (Elementor sections, global parts, templates) * in `.edt-scope` to get the EDT base (Manrope body, ink on limestone). * Fonts are enqueued in inc/enqueue.php: Fraunces (display, variable optical * size) and Manrope (body/UI). * * Structure: imagery -> base -> layout -> typography -> header -> buttons -> * hero -> home sections -> detail sections -> about -> footer -> reveal/motion * -> responsive -> reduced motion -> layered fixes (15-28) -> DESIGN TOKENS v2 * (30: the single source of truth for colour, type, space, radius, elevation, * motion and z-index; it also aliases every legacy --edt-* name) -> TOUR PAGE * v2 (31) -> REVIEWS v2 (32), which together replaced the old section 29 -> * LISTING PAGES v2 (33) -> RESPONSIVE + A11Y HARDENING (34: 320px overflow * sources, focus-ring contrast, touch targets, reduced motion) -> SITE PAGES * v2 (35: band rotation, the extracted inline styles, and every remaining page * template brought onto the same components). RTL is handled by logical * properties throughout, with rtl.css only for transforms, gradients, * background-position and inset shadows. * ============================================================================= */ /* --------------------------------------------------------------------------- 1. SHARED IMAGERY -- colour, type, spacing, radius, elevation, motion and z-index tokens all live in section 30 (DESIGN TOKENS v2), which also keeps every legacy --edt-* name alive as an alias. Only the two shared image assets stay here (override them per-template when needed). ------------------------------------------------------------------------- */ :root { --edt-panorama: url("../images/hero-bg.jpg"); --edt-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 2. BASE ------------------------------------------------------------------------- */ .edt-scope { /* overflow:hidden made .edt-scope a scroll container, which silently disabled position:sticky on every descendant -- the guide TOC has never worked. overflow-x:clip clips the same horizontal overflow WITHOUT creating a scroll container: per CSS Overflow 3 (and MDN's computed-value note) `visible` only computes to `auto` when the OTHER axis is neither visible nor clip, and clip is exempt. Pre-Safari-16 drops the clip line and degrades to visible -- never to a broken box. Verified by grep that every decoration which relied on the ancestor clipping carries its own overflow:hidden (.edt-hero, .edt-detail-hero, .edt-about-hero, .edt-intro, .edt-cta, .edt-about-cta, .edt-about-story, .edt-promise-art, .edt-card-media, .edt-gallery__item, .edt-premium-card__image-wrap, .edt-acc, .edt-coverflow__slide). */ overflow: visible; overflow-x: clip; font-family: var(--edt-font-body); color: var(--edt-ink); background: var(--edt-paper); font-synthesis: none; text-rendering: optimizeLegibility; } .edt-scope ::selection { background: var(--sk-accent); color: #fff; } .edt-scope a { color: inherit; text-decoration: none; } .edt-scope button, .edt-scope input, .edt-scope textarea { font: inherit; } .edt-scope :focus-visible { outline: var(--sk-bw-2) solid var(--sk-focus-ring); outline-offset: 3px; } /* --------------------------------------------------------------------------- 3. LAYOUT PRIMITIVES ------------------------------------------------------------------------- */ .edt-container { width: min(var(--sk-container), calc(100% - (var(--sk-gutter) * 2))); margin-inline: auto; } .edt-section-space { padding-block: var(--sk-section-y); } /* --------------------------------------------------------------------------- 4. TYPOGRAPHY ------------------------------------------------------------------------- */ .edt-eyebrow { margin: 0 0 var(--sk-sp-4); color: var(--sk-muted-ctx); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } .edt-sunline { display: inline-block; width: 34px; height: 1px; margin-inline-end: 12px; vertical-align: middle; background: var(--edt-gold); } .edt-scope h1, .edt-scope h2, .edt-scope h3 { margin: 0; font-family: var(--edt-font-display); font-weight: 400; color: inherit; } .edt-h2, .edt-intro-copy h2, .edt-section-head h2, .edt-promise-copy h2, .edt-contact-copy h2 { max-width: 700px; font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; color: var(--sk-ink); } /* `em` accents inside display headings -- Fraunces italic; terracotta on the dark bands, clay on the light ones. */ .edt-scope h1 em, .edt-scope h2 em { color: var(--sk-accent-ctx); font-family: var(--edt-font-display); font-size: 1em; font-style: italic; font-weight: 400; letter-spacing: -.03em; } .edt-hero__title em, .edt-detail-hero h1 em, .edt-cta h2 em, .edt-about-hero h1 em, .edt-about-cta h2 em, .edt-promise-art > strong em { font-family: var(--sk-font-display); font-style: italic; } .edt-body-large { max-width: min(56ch, 100%); margin: 28px 0 16px; color: var(--edt-ink-soft); font-size: var(--sk-fs-lede); line-height: 1.55; } .edt-body-muted { max-width: 540px; margin: 0 0 26px; color: var(--edt-muted); font-size: var(--sk-fs-body-sm); line-height: 1.8; } .edt-section-intro { max-width: 265px; margin: 0 0 7px; color: var(--edt-muted); font-size: var(--sk-fs-body-sm); line-height: 1.7; } .edt-text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--edt-gold); color: var(--edt-ink); font-size: var(--sk-fs-button); font-weight: 600; } .edt-text-link > svg { transition: transform var(--sk-dur-2) var(--sk-ease-spring); } .edt-text-link:hover > svg { transform: translateX(3px); } .edt-text-link--dark { color: var(--edt-cream); border-color: var(--edt-gold); } /* Vertical section kicker (01 / label) and accent-bordered note card. */ .edt-kicker { display: flex; align-items: center; color: var(--edt-muted); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .edt-kicker-number { margin-bottom: 18px; color: var(--edt-gold); font-family: var(--sk-font-body); font-size: var(--sk-fs-overline); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .14em; } .edt-note { margin-top: 18px; padding-block: 19px 0; padding-inline-start: 20px; border-inline-start: 1px solid var(--edt-gold); } .edt-note svg { color: var(--edt-gold); } .edt-note span { display: block; margin: 14px 0 8px; color: var(--edt-muted); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-note p { max-width: 190px; margin: 0; color: var(--edt-ink-soft); font-size: var(--sk-fs-body-sm); line-height: 1.65; } .edt-section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: var(--sk-sp-11); } /* --------------------------------------------------------------------------- 5. HEADER -- "Fluid Island": a floating glass pill detached from the viewport top (never an edge-glued bar). The .edt-header wrapper is a transparent fixed strip; the pill itself (.edt-header-inner) carries the surface. Dark glass over heroes, cream glass once scrolled / on light pages (--scrolled / --solid). Full menu overlay + morphing hamburger live in section 23. ------------------------------------------------------------------------- */ .edt-header { position: fixed; z-index: var(--sk-z-header); top: 0; width: 100%; pointer-events: none; color: white; } .edt-header--scrolled, .edt-header--solid { color: var(--edt-ink); } .edt-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(1240px, calc(100% - 32px)); min-height: 64px; margin: 14px auto 0; padding-block: 6px; padding-inline: 22px 8px; pointer-events: auto; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--sk-r-pill); background: rgba(23, 21, 18, .42); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--sk-e-4), inset 0 1px 1px rgba(255, 255, 255, .1); transition: background .5s var(--edt-spring), border-color .5s var(--edt-spring), box-shadow .5s var(--edt-spring), color .35s var(--edt-spring); } .edt-header--scrolled .edt-header-inner, .edt-header--solid .edt-header-inner { border-color: rgba(26, 24, 20, .1); background: rgba(244, 241, 236, .88); box-shadow: var(--sk-e-4), inset 0 1px 1px rgba(255, 255, 255, .65); } .edt-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .edt-brand__mark { width: 38px; height: 38px; object-fit: contain; } .edt-brand__copy { display: grid; gap: 3px; } .edt-brand__copy strong { font-family: var(--edt-font-display); font-size: 22px; font-weight: 400; letter-spacing: .16em; line-height: .9; } .edt-brand--compact .edt-brand__mark { width: 34px; height: 34px; } .edt-brand--compact .edt-brand__copy strong { font-size: 19px; } .edt-nav { display: flex; align-items: center; gap: 30px; margin-inline-start: auto; margin-inline-end: 24px; } .edt-nav-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 23px 0; font-size: var(--sk-fs-meta); font-weight: 700; color: inherit; opacity: .9; transition: opacity .2s var(--edt-spring); } .edt-nav-link:hover, .edt-nav-link--active { opacity: 1; } .edt-nav-link--active::after { position: absolute; bottom: 14px; inset-inline-start: 0; width: 100%; height: 2px; background: var(--edt-gold); content: ""; } .edt-header-actions { display: flex; align-items: center; gap: 16px; } .edt-phone-link { display: inline-flex; align-items: center; gap: 9px; font-size: var(--sk-fs-meta); font-weight: 600; white-space: nowrap; opacity: .95; } /* Hidden on desktop; the inline nav is shown instead. Revealed only once the nav collapses (<=1120px) so the hamburger and the full menu never coexist. */ .edt-menu-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--sk-r-pill); color: inherit; background: transparent; cursor: pointer; transition: border-color .3s var(--edt-spring), background .3s var(--edt-spring), transform .2s var(--edt-spring); } .edt-header--scrolled .edt-menu-toggle, .edt-header--solid .edt-menu-toggle { border-color: rgba(26, 24, 20, .16); } .edt-menu-toggle:hover { border-color: var(--edt-gold); background: rgba(168, 68, 42, .12); } .edt-menu-toggle:focus-visible { outline: var(--sk-bw-2) solid currentColor; outline-offset: 2px; } .edt-menu-toggle:active { transform: scale(.94); } /* --------------------------------------------------------------------------- 6. BUTTONS -- clay (primary), ink (secondary). Press-in active state. Button-in-Button: every trailing arrow svg renders inside its own nested circular wrapper (machined-in, flush with the right padding) and receives magnetic kinetic tension on hover -- the circle drifts diagonally and swells while the button itself only breathes. ------------------------------------------------------------------------- */ .edt-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 23px; border: 1px solid transparent; border-radius: var(--sk-r-sm); font-size: var(--sk-fs-button); font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: transform .16s var(--edt-spring), background .22s var(--edt-spring), color .22s var(--edt-spring), box-shadow .22s var(--edt-spring); } .edt-button:active { transform: scale(.97); } .edt-button--small { min-height: 42px; padding: 0 24px; } .edt-button--gold { color: #fff; background: var(--sk-accent); } .edt-button--gold:hover { background: var(--sk-accent-hover); transform: translateY(-2px); } .edt-button--navy { color: var(--edt-cream); background: var(--edt-ink); } .edt-button--navy:hover { background: var(--sk-band-3); transform: translateY(-2px); } /* Nested trailing-icon circle: the svg itself becomes the wrapper -- box-sizing + padding center the glyph inside a 36px pill. */ .edt-button > svg { box-sizing: border-box; flex: 0 0 auto; width: 36px; height: 36px; padding-block: 10px; padding-inline: 11px 10px; border-radius: var(--sk-r-pill); background: rgba(26, 24, 20, .12); transition: transform .45s var(--edt-spring), background .45s var(--edt-spring); } .edt-button--navy > svg, .edt-scope .edt-cta .edt-button--gold > svg { background: rgba(255, 255, 255, .16); } .edt-button:hover > svg { transform: translate(2px, -1px) scale(1.06); } .edt-button--gold:hover > svg { background: rgba(26, 24, 20, .16); } .edt-button--navy:hover > svg { background: rgba(255, 255, 255, .22); } .edt-button--small > svg { width: 30px; height: 30px; padding: 8px; } .edt-button:focus-visible > svg { transform: none; } /* --------------------------------------------------------------------------- 7. HERO -- panorama, veil, sun-glow, grain layers. ------------------------------------------------------------------------- */ /* min-height:780px was 140px taller than a 360x640 phone viewport, so the hero alone overflowed vertically. The clamp runs 448px @360 -> 780px @1440. `height: 100vh` is the pre-svh fallback; 100svh is the small-viewport value, so showing or hiding mobile browser chrome never resizes the box. */ .edt-hero { position: relative; min-height: clamp(28rem, 21.0833rem + 30.7407vw, 48.75rem); height: 100vh; height: 100svh; max-height: 980px; overflow: hidden; color: white; background: var(--edt-ink-deep); } .edt-hero__image, .edt-hero__veil, .edt-hero__grain, .edt-hero__sun-glow { position: absolute; inset: 0; pointer-events: none; } .edt-hero__image { background-position: center center; background-size: cover; transform: scale(1.035); animation: edt-hero-drift 18s var(--sk-ease-out) both; } .edt-hero__veil { background: linear-gradient(90deg, rgba(23, 21, 18, .78) 0%, rgba(23, 21, 18, .33) 44%, rgba(23, 21, 18, .08) 75%), linear-gradient(0deg, rgba(23, 21, 18, .68), transparent 44%, rgba(23, 21, 18, .36)); } .edt-hero__sun-glow { background: radial-gradient(circle at 83% 38%, rgba(217, 130, 94, .22), transparent 24%); mix-blend-mode: screen; animation: edt-glow-drift 10s var(--edt-ease-in-out) infinite alternate; } .edt-hero__grain { opacity: .06; background-image: var(--edt-grain); mix-blend-mode: soft-light; } .edt-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 64px; } .edt-hero__eyebrow { margin-bottom: 24px; font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-hero__title { max-width: min(18ch, 100%); font-size: var(--sk-fs-display); letter-spacing: -.02em; line-height: 1.02; } .edt-hero__lede { max-width: min(56ch, 100%); margin: 28px 0 34px; color: rgba(255,255,255,.82); font-size: var(--sk-fs-lede); line-height: 1.55; } .edt-hero__actions { display: flex; align-items: center; gap: 26px; } .edt-play-link { display: inline-flex; align-items: center; gap: 11px; color: white; font-size: var(--sk-fs-button); font-weight: 600; } .edt-play-link__icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: var(--sk-r-circle); transition: background .2s var(--edt-spring), color .2s var(--edt-spring), transform .2s var(--edt-spring); } .edt-play-link:hover .edt-play-link__icon { color: var(--edt-ink); background: white; transform: scale(1.08); } .edt-hero__rail { position: absolute; z-index: 1; inset-inline-end: 40px; bottom: 78px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.65); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .edt-hero__rail i { width: 1px; height: 64px; background: var(--edt-gold); } .edt-scroll-cue { position: absolute; z-index: 1; bottom: 42px; left: 50%; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.72); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transform: translateX(-50%); } .edt-scroll-cue__line { display: block; width: 54px; height: 1px; background: var(--edt-gold); } .edt-hero__stats { position: absolute; z-index: 1; inset-inline-end: 9%; bottom: 42px; display: flex; flex-wrap: wrap; gap: 28px; } .edt-hero__stats div { display: grid; gap: 4px; min-width: 105px; } .edt-hero__stats strong { color: var(--edt-gold-light); font-family: var(--sk-font-body); font-size: var(--sk-fs-price-md); font-weight: 700; font-variant-numeric: tabular-nums; } .edt-hero__stats span { display: inline-flex; align-items: center; gap: 4px; color: rgba(255,255,255,.66); font-size: var(--sk-fs-caption); line-height: 1.4; } /* --------------------------------------------------------------------------- 8. HOME SECTIONS ------------------------------------------------------------------------- */ /* Intro / story -- panorama wash behind the limestone page. */ .edt-intro { position: relative; isolation: isolate; overflow: hidden; background: var(--edt-paper); } .edt-intro::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(244,241,236,.92), rgba(244,241,236,.92)), var(--edt-panorama) center / cover; opacity: .68; content: ""; } .edt-intro > .edt-container { position: relative; } .edt-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(430px, 100%), 1.6fr) minmax(0, .7fr); align-items: start; gap: var(--sk-gap-5); } /* Journeys -- dark ink band, filter rail, tone cards. */ .edt-journeys { color: var(--edt-cream); background: var(--edt-ink); } .edt-journeys .edt-section-head h2, .edt-ways .edt-section-head h2, .edt-principles .edt-section-head h2 { color: var(--edt-cream); } .edt-journeys .edt-section-head h2 em, .edt-ways .edt-section-head h2 em, .edt-principles .edt-section-head h2 em { color: var(--edt-gold-light); } .edt-journey-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--sk-gap-5); } .edt-journey-filter { display: flex; flex-direction: column; align-items: flex-start; } .edt-filter-label { margin: 3px 0 18px; color: rgba(247,245,241,.46); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-filter-pill { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(247,245,241,.13); color: rgba(247,245,241,.58); background: transparent; font-size: var(--sk-fs-meta); text-align: start; cursor: pointer; transition: color .2s var(--edt-spring), transform .2s var(--edt-ease-out); } .edt-filter-pill:hover, .edt-filter-pill--active { color: var(--edt-gold-light); transform: translateX(7px); } .edt-filter-foot { display: flex; align-items: start; gap: 10px; margin-top: auto; padding-top: 58px; color: var(--edt-gold); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; } /* Destinations -- postcard cards, uneven heights. */ .edt-destinations { background: var(--sk-page-alt); } .edt-section-head--dest { align-items: end; } .edt-destination-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .84fr) minmax(0, .95fr); align-items: end; gap: 18px; } .edt-destination-card { position: relative; display: block; min-height: 495px; overflow: hidden; color: white; background: var(--edt-ink); } .edt-destination-card--2 { min-height: 565px; } .edt-destination-card--3 { min-height: 445px; } .edt-destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--edt-ease-out); } .edt-destination-card:hover img { transform: scale(1.075); } .edt-destination-card__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,21,18,.85), transparent 58%); } .edt-destination-card__meta { position: absolute; top: 22px; inset-inline-start: 22px; color: rgba(255,255,255,.72); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-destination-card__copy { position: absolute; inset-inline: 22px; bottom: 20px; display: grid; gap: 8px; } .edt-destination-card__copy strong { font-family: var(--edt-font-display); font-size: var(--sk-fs-h3); font-weight: 400; letter-spacing: -.010em; line-height: 1.2; } .edt-destination-card__copy small { max-width: 260px; color: rgba(255,255,255,.74); font-size: var(--sk-fs-body-sm); line-height: 1.6; } .edt-destination-card__copy i { display: grid; width: 38px; height: 38px; margin-top: 4px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: var(--sk-r-circle); font-style: normal; transition: background .2s var(--edt-spring), color .2s var(--edt-spring), transform .2s var(--edt-spring); } .edt-destination-card:hover .edt-destination-card__copy i { color: var(--edt-ink); background: white; transform: rotate(45deg); } /* Ways / philosophy cards. */ .edt-ways { color: var(--edt-cream); background: var(--edt-ink); } .edt-ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; } .edt-way-card { position: relative; min-height: 285px; padding: 24px; color: var(--edt-ink); background: var(--sk-surface); transition: transform .3s var(--edt-ease-out), box-shadow .3s var(--edt-ease-out); } .edt-way-card:hover { box-shadow: var(--sk-e-2); transform: translateY(-2px); } .edt-way-card--dark { color: var(--edt-cream); background: var(--edt-blue); } .edt-way-card--gold { background: var(--sk-accent-tint); } .edt-way-card > span { color: var(--edt-gold); font-family: var(--sk-font-body); font-size: var(--sk-fs-overline); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .14em; } .edt-way-card--dark > span { color: var(--edt-gold-light); } .edt-way-card h3 { margin: 46px 0 9px; font-size: var(--sk-fs-h3); font-weight: 500; letter-spacing: -.010em; line-height: 1.2; } .edt-way-card p { max-width: 260px; margin: 0; color: rgba(26,24,20,.68); font-size: var(--sk-fs-body-sm); line-height: 1.7; } .edt-way-card--dark p { color: rgba(247,245,241,.68); } .edt-way-card > a { position: absolute; inset-inline-end: 21px; bottom: 20px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid currentColor; border-radius: var(--sk-r-circle); transition: transform .2s var(--edt-ease-out), background .2s var(--edt-spring); } .edt-way-card > a:hover { color: var(--edt-ink); background: white; transform: rotate(45deg); } /* Field notes -- postcard frame + quote. */ .edt-field-notes { background: var(--sk-page-alt); } .edt-field-notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--sk-gap-5); } .edt-field-notes-image { position: relative; min-height: 480px; border: 11px solid var(--sk-surface); border-bottom-width: 24px; background-position: center; background-size: cover; box-shadow: var(--sk-e-3); } .edt-field-notes-image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,21,18,.72), transparent 52%); content: ""; } .edt-field-notes-image span { position: absolute; z-index: 1; bottom: 10px; inset-inline-start: 10px; color: rgba(26,24,20,.72); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-field-notes-copy h2 { max-width: 480px; font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; } /* Planning banner. */ .edt-planning { color: var(--edt-cream); background: var(--edt-ink-deep); } .edt-planning__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 240px; } .edt-planning h2 { font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; color: var(--edt-cream); } .edt-planning h2 em { color: var(--edt-gold-light); } /* Promise -- sun disc art + checklist. */ .edt-promise { background: var(--edt-paper); } .edt-promise-grid { display: grid; grid-template-columns: minmax(min(350px, 100%), .9fr) minmax(0, 1fr); align-items: center; gap: var(--sk-gap-5); } .edt-promise-art { position: relative; min-height: 495px; overflow: hidden; color: var(--edt-cream); background: var(--edt-ink); } .edt-promise-art::before, .edt-promise-art::after { position: absolute; content: ""; } .edt-promise-art::before { top: 0; inset-inline-end: -20%; width: 82%; height: 100%; background: linear-gradient(145deg, transparent 0 40%, rgba(168,68,42,.19) 40.2% 40.5%, transparent 40.7%), linear-gradient(28deg, transparent 0 56%, rgba(168,68,42,.12) 56.2% 56.5%, transparent 56.7%); } .edt-promise-art::after { inset-inline-end: -25%; bottom: -20%; width: 110%; height: 70%; border: 1px solid rgba(168,68,42,.33); border-radius: var(--sk-r-circle); transform: rotate(-22deg); } .edt-promise-art__sun { position: absolute; top: 23%; inset-inline-end: 19%; width: 112px; height: 112px; border-radius: var(--sk-r-circle); background: var(--sk-accent); } .edt-promise-art__rings { position: absolute; top: 17%; inset-inline-end: 12%; width: 195px; height: 195px; border: 1px solid rgba(168,68,42,.6); border-radius: var(--sk-r-circle); } .edt-promise-art > span { position: absolute; top: 25px; inset-inline-start: 25px; color: var(--edt-gold-light); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; } .edt-promise-art > strong { position: absolute; bottom: 30px; inset-inline-start: 28px; font-family: var(--edt-font-display); font-size: var(--sk-fs-h2); font-weight: 400; letter-spacing: -.014em; line-height: 1.12; } .edt-promise-art > strong em { color: var(--edt-gold-light); font-style: italic; } .edt-promise-copy h2 { max-width: 460px; } .edt-promise-copy .edt-body-large { max-width: 490px; } .edt-promise-list { display: grid; gap: 13px; margin: 30px 0 33px; } .edt-promise-list div { display: flex; align-items: center; gap: 12px; color: var(--edt-ink-soft); font-size: var(--sk-fs-body-sm); } .edt-promise-list svg { flex: 0 0 auto; padding: 3px; border-radius: var(--sk-r-circle); color: #fff; background: var(--sk-success); } /* Contact -- dark band, underline form fields. */ .edt-contact { color: var(--edt-cream); background: var(--edt-ink-deep); } .edt-contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sk-gap-5); } .edt-contact-copy h2 { color: var(--edt-cream); } .edt-contact-copy > p:not(.edt-eyebrow) { max-width: 330px; margin: 28px 0; color: rgba(247,245,241,.68); font-size: var(--sk-fs-body); line-height: 1.8; } .edt-contact-details { display: grid; gap: 13px; margin-top: 33px; } .edt-contact-details a, .edt-contact-details span { display: inline-flex; align-items: center; gap: 12px; color: rgba(247,245,241,.76); font-size: var(--sk-fs-body-sm); } .edt-contact-details svg { color: var(--edt-gold); } .edt-contact-form { align-self: end; padding: 32px; border: 1px solid rgba(247,245,241,.16); background: rgba(247,245,241,.04); } .edt-contact-form label { display: grid; gap: 9px; color: rgba(247,245,241,.62); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .edt-contact-form input, .edt-contact-form textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--sk-ink-on-dark-3); outline: none; color: white; background: transparent; font-size: var(--sk-fs-body); letter-spacing: 0; text-transform: none; transition: border-color .2s var(--edt-spring); } .edt-contact-form textarea { resize: vertical; } .edt-contact-form input::placeholder, .edt-contact-form textarea::placeholder { color: rgba(247,245,241,.45); } .edt-contact-form input:focus, .edt-contact-form textarea:focus { border-color: var(--edt-gold); } .edt-contact-form > label { margin-top: 30px; } .edt-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; } .edt-form-footer > span { display: inline-flex; align-items: center; gap: 8px; color: rgba(247,245,241,.44); font-size: var(--sk-fs-caption); line-height: 1.4; } .edt-field-error { display: block; margin-top: 5px; color: var(--sk-danger-tint); font-size: var(--sk-fs-caption); font-weight: 700; letter-spacing: 0; line-height: 1.45; text-transform: none; } .edt-contact-form input[aria-invalid="true"], .edt-contact-form textarea[aria-invalid="true"] { border-color: var(--sk-danger-tint); } .edt-form-success { display: grid; align-content: center; min-height: 320px; animation: edt-success-in .6s var(--edt-ease-out) both; } .edt-form-success__icon { display: grid; width: 52px; height: 52px; margin-bottom: 24px; place-items: center; border-radius: var(--sk-r-circle); color: #fff; background: var(--sk-success); animation: edt-success-ring .7s .15s var(--edt-ease-out) both; } .edt-form-success h3 { max-width: 430px; color: var(--edt-cream); font-size: var(--sk-fs-h3); letter-spacing: -.010em; line-height: 1.2; } .edt-form-success > p:not(.edt-eyebrow) { max-width: 360px; margin: 18px 0 24px; color: rgba(247,245,241,.68); font-size: var(--sk-fs-body); line-height: 1.7; } /* --------------------------------------------------------------------------- 9. TOUR DETAIL SECTIONS ------------------------------------------------------------------------- */ /* Same treatment as .edt-hero: clamp 416px @360 -> 720px @1440, vh fallback under svh. (.single-sekhem_tour overrides this again in 31.3.) */ .edt-detail-hero { position: relative; min-height: clamp(26rem, 19.6667rem + 28.1481vw, 45rem); height: 86vh; height: 86svh; max-height: 890px; overflow: hidden; color: white; background-position: center; background-size: cover; } .edt-detail-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,21,18,.84), rgba(23,21,18,.2) 70%), linear-gradient(0deg, rgba(23,21,18,.72), transparent 52%); } .edt-detail-hero__grain { position: absolute; inset: 0; opacity: .06; background-image: var(--edt-grain); mix-blend-mode: soft-light; } .edt-detail-hero__top, .edt-detail-hero__content, .edt-detail-hero__footer { position: relative; z-index: 1; } .edt-detail-brand { display: inline-flex; align-items: center; gap: 9px; color: white; } .edt-detail-brand img { width: 34px; height: 34px; object-fit: contain; } .edt-detail-brand strong { display: block; font-family: var(--edt-font-display); font-size: 19px; font-weight: 500; letter-spacing: .15em; line-height: .9; } .edt-compass { position: relative; display: inline-grid; width: 31px; height: 31px; margin-inline-start: auto; margin-inline-end: 19px; place-items: center; border: 1px solid rgba(168,68,42,.65); border-radius: var(--sk-r-circle); color: var(--edt-gold-light); transition: transform .35s var(--edt-ease-out); } .edt-compass:hover { transform: rotate(45deg); } .edt-detail-hero__top { display: flex; align-items: center; justify-content: space-between; padding-top: 33px; } .edt-back { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.8); font-size: var(--sk-fs-meta); font-weight: 600; transition: color .2s var(--edt-spring); } .edt-back > svg { transition: transform var(--sk-dur-2) var(--sk-ease-spring); } .edt-back:hover { color: var(--edt-gold-light); } .edt-back:hover > svg { transform: translateX(-3px); } .edt-serial { color: var(--edt-gold-light); font-size: var(--sk-fs-overline); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .14em; text-transform: uppercase; } .edt-detail-hero__content { display: flex; flex-direction: column; justify-content: center; height: calc(100% - 150px); padding-top: 65px; } .edt-detail-hero__content h1 { max-width: min(18ch, 100%); font-size: var(--sk-fs-display); letter-spacing: -.02em; line-height: 1.02; } .edt-detail-hero__content h1 em { color: var(--edt-gold-light); font-style: italic; } .edt-detail-hero__content .edt-button { align-self: flex-start; } .edt-detail-hero__lede { max-width: min(56ch, 100%); margin: 25px 0 31px; color: rgba(255,255,255,.8); font-size: var(--sk-fs-lede); line-height: 1.55; } .edt-detail-hero__footer { display: flex; gap: 28px; padding-bottom: 31px; color: rgba(255,255,255,.7); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-detail-hero__footer span { display: inline-flex; align-items: center; gap: 8px; } .edt-detail-hero__footer svg { color: var(--edt-gold); } .edt-detail-intro { background: var(--edt-paper); } .edt-detail-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .75fr); align-items: start; gap: var(--sk-gap-5); } .edt-detail-intro__grid h2 { max-width: 610px; font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; color: var(--sk-ink); } .edt-price { display: grid; gap: 5px; padding-block: 17px 0; padding-inline-start: 22px; border-inline-start: 1px solid var(--edt-gold); } .edt-price span, .edt-price small { color: var(--edt-muted); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-price strong { color: var(--sk-ink); font-family: var(--sk-font-body); font-size: var(--sk-fs-price-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; } .edt-price .edt-button { justify-self: start; margin-top: 19px; } /* Availability facts row (booking rail + city page). */ .edt-availability-facts { display: grid; gap: 12px; margin-top: 30px; color: var(--edt-ink-soft); font-size: var(--sk-fs-meta); } .edt-availability-facts span { display: flex; align-items: center; gap: 10px; } .edt-availability-facts svg { padding: 2px; border-radius: var(--sk-r-circle); color: #fff; background: var(--sk-accent); } /* Closing CTA -- panorama wash over basalt. */ .edt-cta { position: relative; isolation: isolate; overflow: hidden; color: white; background: var(--edt-ink-deep); } .edt-cta::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(23,21,18,.8), rgba(23,21,18,.85)), var(--edt-panorama) center / cover; opacity: .85; content: ""; } .edt-cta__inner { text-align: center; } .edt-cta h2 { font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; } .edt-cta h2 em { color: var(--edt-gold-light); font-style: italic; } .edt-cta__inner > p:not(.edt-eyebrow) { max-width: 400px; margin: 25px auto 30px; color: rgba(255,255,255,.7); font-size: var(--sk-fs-body); line-height: 1.7; } /* --------------------------------------------------------------------------- 10. ABOUT PAGE ------------------------------------------------------------------------- */ /* Clamp 400px @360 -> 700px @1440, vh fallback under svh. */ .edt-about-hero { position: relative; min-height: clamp(25rem, 18.75rem + 27.7778vw, 43.75rem); height: 82vh; height: 82svh; max-height: 880px; overflow: hidden; color: white; background-position: center; background-size: cover; } .edt-about-hero__veil, .edt-about-hero__grain { position: absolute; inset: 0; } .edt-about-hero__veil { background: linear-gradient(90deg, rgba(23,21,18,.82), rgba(23,21,18,.19) 76%), linear-gradient(0deg, rgba(23,21,18,.72), transparent 50%); } .edt-about-hero__grain { opacity: .06; background-image: var(--edt-grain); mix-blend-mode: soft-light; } .edt-about-header, .edt-about-hero__content, .edt-about-hero__footer { position: relative; z-index: 1; } .edt-about-header { display: flex; align-items: center; justify-content: space-between; padding-top: 30px; } .edt-about-header nav { display: flex; align-items: center; gap: 25px; } .edt-about-header nav > a:not(.edt-button) { color: rgba(255,255,255,.75); font-size: var(--sk-fs-meta); font-weight: 600; } .edt-about-header nav > a:not(.edt-button):hover, .edt-about-nav-active { color: var(--edt-gold-light) !important; } .edt-about-hero__content { display: flex; flex-direction: column; justify-content: center; height: calc(100% - 120px); padding-top: 35px; } .edt-about-hero__content h1 { max-width: min(18ch, 100%); font-size: var(--sk-fs-display); letter-spacing: -.02em; line-height: 1.02; } .edt-about-hero__content h1 em { color: var(--edt-gold-light); } .edt-about-hero__lede { max-width: min(56ch, 100%); margin: 26px 0 0; color: rgba(255,255,255,.78); font-size: var(--sk-fs-lede); line-height: 1.55; } .edt-about-hero__footer { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; color: rgba(255,255,255,.68); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-about-hero__footer span { display: inline-flex; align-items: center; gap: 8px; } .edt-about-hero__footer svg { color: var(--edt-gold); } .edt-about-story { position: relative; overflow: hidden; background: var(--edt-paper); } .edt-about-story::before { position: absolute; inset: 0; background: linear-gradient(rgba(244,241,236,.92), rgba(244,241,236,.92)), var(--edt-panorama) center / cover; opacity: .58; content: ""; } .edt-about-story-grid, .edt-portrait-grid { position: relative; z-index: 1; } .edt-about-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .75fr); align-items: start; gap: var(--sk-gap-5); } .edt-about-story-grid h2, .edt-portrait-copy h2 { max-width: 640px; font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; color: var(--sk-ink); } .edt-about-note { padding-block: 18px 0; padding-inline-start: 20px; border-inline-start: 1px solid var(--edt-gold); } .edt-about-note svg { color: var(--edt-gold); } .edt-about-note span { display: block; margin: 14px 0 8px; color: var(--edt-muted); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-about-note p { max-width: 190px; margin: 0; color: var(--edt-ink-soft); font-size: var(--sk-fs-body-sm); line-height: 1.65; } .edt-principles { color: var(--edt-cream); background: var(--edt-ink); } .edt-principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; } .edt-principle-card { position: relative; min-height: 250px; padding: 23px; background: var(--sk-surface); color: var(--edt-ink); transition: transform .3s var(--edt-ease-out), box-shadow .3s var(--edt-ease-out); } .edt-principle-card:hover { box-shadow: var(--sk-e-2); transform: translateY(-2px); } .edt-principle-card > span { color: var(--edt-gold); font-family: var(--sk-font-body); font-size: var(--sk-fs-overline); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .14em; } .edt-principle-card h3 { margin: 42px 0 8px; font-size: var(--sk-fs-h3); font-weight: 500; letter-spacing: -.010em; line-height: 1.2; } .edt-principle-card p { max-width: 250px; margin: 0; color: var(--edt-muted); font-size: var(--sk-fs-body-sm); line-height: 1.7; } .edt-principle-card > svg { position: absolute; inset-inline-end: 21px; bottom: 21px; color: var(--edt-gold); } .edt-portrait { background: var(--sk-page-alt); } .edt-portrait-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sk-gap-5); } .edt-portrait-image { position: relative; min-height: 500px; border: 11px solid var(--sk-surface); border-bottom-width: 24px; background-position: center; background-size: cover; box-shadow: var(--sk-e-3); } .edt-portrait-image span { position: absolute; bottom: 8px; inset-inline-start: 10px; color: rgba(26,24,20,.68); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-team-list { display: grid; gap: 13px; margin: 30px 0 0; color: var(--edt-ink-soft); font-size: var(--sk-fs-body-sm); } .edt-team-list span { display: flex; align-items: center; gap: 13px; } .edt-team-list strong { color: var(--edt-gold); font-family: var(--edt-font-display); font-size: var(--sk-fs-h4); font-weight: 500; } .edt-about-cta { position: relative; isolation: isolate; overflow: hidden; color: white; background: var(--edt-ink-deep); } .edt-about-cta::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(23,21,18,.82), rgba(23,21,18,.88)), var(--edt-panorama) center / cover; opacity: .86; content: ""; } .edt-about-cta__inner { text-align: center; } .edt-about-cta h2 { font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; } .edt-about-cta h2 em { color: var(--edt-gold-light); } .edt-about-cta__inner > p:not(.edt-eyebrow) { max-width: 340px; margin: 24px auto 30px; color: rgba(255,255,255,.68); font-size: var(--sk-fs-body); line-height: 1.7; } /* --------------------------------------------------------------------------- 11. FOOTER ------------------------------------------------------------------------- */ .edt-footer { padding-top: var(--sk-sp-11); } .edt-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); padding-bottom: var(--sk-sp-9); } .edt-footer-brand .edt-brand { margin-bottom: 16px; } .edt-footer-tagline { margin: 0 0 6px; font-family: var(--edt-font-display); font-size: var(--sk-fs-h4); font-style: italic; } .edt-footer-social { display: flex; gap: 10px; } .edt-footer-social a { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(247,245,241,.22); border-radius: var(--sk-r-circle); transition: color .2s var(--edt-spring), border-color .2s var(--edt-spring), transform .2s var(--edt-spring); } .edt-footer-social a:hover, .edt-footer-social a:focus-visible { transform: translateY(-3px); } .edt-footer-grid :is(h2, h3) { margin: 0 0 18px; font-family: var(--edt-font-body); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-footer-nav ul, .edt-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .edt-footer-nav a, .edt-footer-contact a { font-size: var(--sk-fs-body-sm); line-height: 1.5; min-height: 24px; transition: color .2s var(--edt-spring); } /* Payment marks: real wordmark styling, scaled properly (28px tall zone). The brand hexes below are third-party marks and stay verbatim. */ .edt-pay-marks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .edt-pay { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: var(--sk-r-xs); background: #fff; font-weight: 800; font-style: italic; font-size: 15px; letter-spacing: .02em; line-height: 1; } .edt-pay--visa { color: #1a1f71; font-stretch: condensed; } /* brand: Visa */ .edt-pay--mc { position: relative; width: 46px; padding: 0; background: transparent; } .edt-pay--mc i { position: absolute; width: 26px; height: 26px; border-radius: var(--sk-r-circle); } .edt-pay--mc i:first-child { left: 0; background: #eb001b; } /* brand: Mastercard */ .edt-pay--mc i:last-child { right: 0; background: #f79e1b; mix-blend-mode: screen; } /* brand: Mastercard */ .edt-pay--paypal { color: #003087; } /* brand: PayPal */ .edt-pay--paypal span { color: #003087; } /* brand: PayPal; was #009cde (3.08:1 on white, fails AA) -- PayPal's own dark blue, already the "Pay" colour above, measures 11.85:1 */ .edt-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 24px; } .edt-footer-bottom a { display: inline-flex; align-items: center; gap: 7px; } /* --------------------------------------------------------------------------- 12. REVEAL + KEYFRAMES -- scroll reveals ride opacity + transform only (spec section 10.2: --sk-dur-4 on --sk-ease-entrance). The animated blur was dropped: filter is expensive and outside the allowed animatable set. ------------------------------------------------------------------------- */ .edt-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--sk-dur-4) var(--sk-ease-entrance) var(--delay, 0ms), transform var(--sk-dur-4) var(--sk-ease-entrance) var(--delay, 0ms); } .edt-reveal--left { transform: translateX(-24px); } .edt-reveal--right { transform: translateX(24px); } .edt-reveal--down { transform: translateY(-18px); } .edt-reveal.is-visible { opacity: 1; transform: translate(0); } @media (prefers-reduced-motion: reduce) { /* ponytail: bare linear is deliberate here -- reduced motion wants a plain cross-fade with no spring character. */ .edt-reveal { transition: opacity .3s linear var(--delay, 0ms); } } @keyframes edt-hero-drift { from { transform: scale(1.08); } to { transform: scale(1.035); } } @keyframes edt-glow-drift { from { transform: translate3d(-2%, 1%, 0); opacity: .6; } to { transform: translate3d(3%, -2%, 0); opacity: 1; } } @keyframes edt-success-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes edt-success-ring { from { transform: scale(.75); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* --------------------------------------------------------------------------- 13. RESPONSIVE -- one scale for the whole file: 640 / 900 / 1120. ------------------------------------------------------------------------- */ @media (max-width: 1120px) { .edt-nav { gap: 18px; margin-inline-end: 26px; } .edt-phone-link span { display: none; } .edt-hero__stats { inset-inline-end: 5%; } } @media (max-width: 900px) { .edt-header-inner { width: calc(100% - 40px); min-height: 76px; } .edt-header-actions { gap: 11px; } .edt-header-divider, .edt-phone-link { display: none; } .edt-button--small { min-height: 44px; padding: 0 15px; } .edt-menu-toggle { display: inline-flex; } .edt-hero__content { padding-top: 22px; } /* Bounded box (was left:20px / right:auto, so the row could run off the right edge): 2 x 105px min-width + 18px gap = 228px inside 280px. */ .edt-hero__stats { bottom: 46px; inset-inline: var(--sk-sp-5); } .edt-scroll-cue { display: none; } .edt-hero__rail { inset-inline-end: 18px; bottom: 44px; } .edt-intro-grid { grid-template-columns: 1fr; gap: 30px; } .edt-kicker { writing-mode: initial; transform: none; } .edt-kicker-number { margin: 0; margin-inline-end: 14px; } .edt-note { margin-top: 0; } .edt-journey-layout { grid-template-columns: 1fr; gap: 35px; } .edt-journey-filter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; } .edt-filter-label { grid-column: 1 / -1; } .edt-filter-foot { grid-column: 1 / -1; margin-top: 24px; padding-top: 0; } .edt-destination-grid { grid-template-columns: 1fr 1fr; } .edt-destination-card, .edt-destination-card--2, .edt-destination-card--3 { min-height: 440px; } .edt-destination-card--3 { grid-column: 1 / -1; min-height: 350px; } .edt-promise-grid, .edt-contact-grid { grid-template-columns: 1fr; gap: 48px; } .edt-promise-art { min-height: 390px; } .edt-contact-form { padding: 23px; } .edt-detail-hero__footer { flex-wrap: wrap; gap: 12px 19px; } .edt-detail-intro__grid { grid-template-columns: 1fr; gap: 30px; } .edt-price { padding-block: 18px 0; padding-inline-start: 20px; } .edt-ways-grid, .edt-principles-grid { grid-template-columns: 1fr 1fr; } .edt-way-card:last-child, .edt-principle-card:last-child { grid-column: 1 / -1; } .edt-field-notes-grid, .edt-portrait-grid { grid-template-columns: 1fr; gap: 42px; } .edt-field-notes-image, .edt-portrait-image { min-height: 360px; } .edt-about-story-grid { grid-template-columns: 1fr; gap: 30px; } .edt-about-note { margin-top: 0; } .edt-about-header nav a:not(.edt-button) { display: none; } .edt-about-header nav { gap: 0; } } @media (max-width: 640px) { .edt-hero__image { background-position: 58% center; } .edt-hero__veil { background: linear-gradient(90deg, rgba(23, 21, 18, .78), rgba(23, 21, 18, .16)), linear-gradient(0deg, rgba(23, 21, 18, .76), transparent 55%); } .edt-hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; } .edt-hero__stats { gap: 18px; } .edt-section-head { align-items: start; flex-direction: column; gap: 22px; margin-bottom: var(--sk-sp-8); } .edt-journey-filter { grid-template-columns: 1fr; } .edt-filter-label, .edt-filter-foot { grid-column: auto; } .edt-destination-grid { grid-template-columns: 1fr; } .edt-destination-card, .edt-destination-card--2, .edt-destination-card--3 { grid-column: auto; min-height: 430px; } .edt-form-row { grid-template-columns: 1fr; gap: 25px; } .edt-form-footer { align-items: flex-start; flex-direction: column; } .edt-footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; } .edt-detail-hero__content { height: calc(100% - 175px); padding-top: 35px; } .edt-compass { display: none; } .edt-detail-brand strong { font-size: 17px; } .edt-ways-grid, .edt-principles-grid { grid-template-columns: 1fr; } .edt-way-card:last-child, .edt-principle-card:last-child { grid-column: auto; } .edt-planning__inner { align-items: flex-start; flex-direction: column; justify-content: center; padding: 50px 0; } .edt-about-header { padding-top: 20px; } .edt-about-hero__footer { align-items: flex-start; flex-direction: column; gap: 14px; } } /* --------------------------------------------------------------------------- 14. REDUCED MOTION ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .edt-scope, :has(.edt-scope) { scroll-behavior: auto; } .edt-scope *, .edt-scope *::before, .edt-scope *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .edt-reveal { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 15. PHASE 4 ADDITIONS -- solid header variant + WordPress menu output (v2.2.0: the --solid / --scrolled surfaces moved onto the island pill in section 5; the wrapper itself stays transparent.) ------------------------------------------------------------------------- */ /* wp_nav_menu() outputs a ul inside .edt-nav; make it behave like the design's flat link row. */ .edt-nav ul { list-style: none; display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; } .edt-nav a { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 37px 0 34px; font-size: var(--sk-fs-meta); font-weight: 700; color: inherit; opacity: .9; transition: opacity .2s var(--edt-spring); } .edt-nav a:hover { opacity: 1; } .edt-nav .current-menu-item > a::after { position: absolute; bottom: 22px; inset-inline-start: 0; width: 100%; height: 2px; background: var(--edt-gold); content: ""; } .edt-nav .sub-menu { position: absolute; top: 100%; inset-inline-start: -14px; background: var(--sk-surface); border: 1px solid var(--edt-line); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--edt-ease-out), transform .2s var(--edt-ease-out), visibility .2s; box-shadow: var(--sk-e-3); } .edt-nav li { position: relative; } .edt-nav li:hover > .sub-menu, .edt-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .edt-nav .sub-menu a { color: var(--edt-ink); } .edt-nav .sub-menu a::after { display: none; } .edt-nav .sub-menu a:hover { color: var(--edt-gold); opacity: 1; } @media (max-width: 900px) { .edt-nav ul { flex-direction: column; gap: 0; align-items: stretch; } .edt-nav li { position: static; } .edt-nav a { padding: 17px 4px; border-bottom: 1px solid rgba(247,245,241,.12); } .edt-nav .current-menu-item > a::after { bottom: 0; width: 45px; } .edt-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; box-shadow: none; padding-block: 2px; padding-inline-start: 18px; width: auto; min-width: 0; max-width: none; display: none; } .edt-nav li.menu-item-has-children > .sub-menu { display: flex; } .edt-nav .sub-menu a { color: rgba(247,245,241,.75); padding-block: 12px; } } @media (max-width: 1120px) { .edt-nav ul { gap: 18px; } } /* --------------------------------------------------------------------------- 16. PHASE 4 AUDIT FIXES -- custom logo sizing + header stability WordPress's the_custom_logo() outputs img.custom-logo; constrain it at every location it renders (header, footer, detail hero). The height is the fixed axis and the width follows the logo's own aspect ratio -- so ANY uploaded logo dimensions land in the same visual slot. max-width + object-fit guard against ultra-wide or square logos overflowing. ------------------------------------------------------------------------- */ .edt-brand .custom-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; } .edt-brand .custom-logo { display: block; height: 40px; width: auto; max-width: 200px; object-fit: contain; } .edt-brand--compact .custom-logo { height: 34px; max-width: 170px; } .edt-footer .edt-brand .custom-logo { height: 34px; max-width: 170px; } .edt-detail-brand .custom-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; } .edt-detail-brand .custom-logo { display: block; width: 34px; height: 34px; max-width: 34px; object-fit: contain; } @media (max-width: 900px) { .edt-brand .custom-logo { height: 34px; max-width: 150px; } .edt-header-inner { min-height: 76px; } } @media (max-width: 640px) { .edt-brand .custom-logo { max-width: 120px; } .edt-header-actions { gap: 10px; } } /* --------------------------------------------------------------------------- 17. CITIES MODULE -- header link fix, masonry, coverflow ------------------------------------------------------------------------- */ /* Header sits outside .edt-scope -- kill inherited link underlines there. */ .edt-header a, .edt-header a:hover, .edt-header a:focus { text-decoration: none; } /* 3D perspective coverflow: scroll-snap rail (native touch/swipe) with rotateY transforms driven by the inline script. */ .edt-coverflow-wrap { position: relative; } .edt-coverflow { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px calc(50% - min(520px, 80vw) / 2) 46px; /* center first/last slides */ perspective: 1400px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .edt-coverflow::-webkit-scrollbar { display: none; } .edt-coverflow__slide { position: relative; flex: 0 0 min(460px, 78vw); height: min(560px, 62vw); scroll-snap-align: center; overflow: hidden; border-radius: var(--sk-r-xs); color: #fff; background: var(--edt-ink); box-shadow: var(--sk-e-4); transform-style: preserve-3d; /* ponytail: linear is correct here -- the transform is scroll-linked by the inline coverflow script, so an eased curve would visibly lag. */ transition: transform .18s linear, opacity .18s linear; } .edt-coverflow__slide img { width: 100%; height: 100%; object-fit: cover; } .edt-coverflow__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,21,18,.88), transparent 58%); } .edt-coverflow__copy { position: absolute; inset-inline: 22px; bottom: 20px; display: grid; gap: 7px; } .edt-coverflow__meta { color: rgba(255,255,255,.72); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-coverflow__copy strong { font-family: var(--edt-font-display); font-weight: 400; font-size: var(--sk-fs-h2); letter-spacing: -.014em; line-height: 1.12; } .edt-coverflow__copy small { color: rgba(255,255,255,.74); font-size: var(--sk-fs-body-sm); } .edt-coverflow__slide.is-center { box-shadow: var(--sk-e-4), 0 0 0 1px rgba(168,68,42,.4); } .edt-coverflow-nav { display: flex; justify-content: center; gap: 12px; } .edt-coverflow-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(247,245,241,.22); border-radius: var(--sk-r-circle); color: var(--edt-cream); background: transparent; cursor: pointer; transition: background .2s var(--edt-spring), color .2s var(--edt-spring), transform .2s var(--edt-ease-out); } .edt-coverflow-arrow:hover { color: #fff; background: var(--sk-accent); transform: translateY(-2px); } @media (max-width: 900px) { .edt-coverflow { gap: 16px; padding-bottom: 34px; } .edt-coverflow__slide { flex-basis: min(340px, 82vw); height: min(430px, 96vw); } .edt-coverflow-arrow { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .edt-coverflow__slide { transition: none; } } /* --------------------------------------------------------------------------- 18. TOURS SYSTEM -- hero filter (front-page.php) ------------------------------------------------------------------------- */ /* Hero journey search: glass bar above the CTAs. */ .edt-hero-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 560px; margin: 0 0 26px; padding: 10px; /* ponytail: no backdrop-filter -- this bar scrolls with the hero and the project rule limits blur to fixed layers. */ background: rgba(23, 21, 18, .52); border: 1px solid rgba(247, 245, 241, .18); border-radius: var(--sk-r-sm); } .edt-hero-filter select, .edt-hero-filter input { flex: 1 1 130px; min-width: 0; height: 38px; padding: 0 10px; border: 0; border-radius: var(--sk-r-xs); outline: none; color: var(--edt-ink); background: rgba(250, 248, 244, .95); font-size: var(--sk-fs-body); } .edt-hero-filter input::placeholder { color: var(--edt-muted); } .edt-hero-filter .edt-button { flex: 0 0 auto; } @media (max-width: 900px) { .edt-hero-filter { max-width: none; } .edt-hero-filter select, .edt-hero-filter input { flex: 1 1 110px; } .edt-hero-filter .edt-button { flex: 1 1 100%; } } /* --------------------------------------------------------------------------- 19. HEADER/FOOTER QA -- dropdown chevrons, touch targets, WCAG ------------------------------------------------------------------------- */ /* Chevron on every nav item that has children: pure CSS, rotates on hover/open -- a clear sub-menu cue without touching any markup. */ .edt-nav li.menu-item-has-children > a::after, .edt-nav li.page_item_has_children > a::after { content: ''; width: 7px; height: 7px; margin-inline-start: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--edt-ease-out); } .edt-nav li.menu-item-has-children:hover > a::after, .edt-nav li.menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(-2px); } /* Dropdown: softer entrance + visible focus for keyboard users. CRITICAL: .edt-nav ul { display:flex; gap:34px } also matches sub-menus -- without the column override below, dropdown items lay out in a horizontal row with 34px gaps (the broken "two-column" look). Column + tight gap + compact scale fixes it. */ .edt-nav .sub-menu { flex-direction: column; gap: 2px; /* Bounded width. The panel is anchored 14px OUTSIDE its trigger, so its own width is the only lever CSS has against a right-edge overflow; 90vw (never 100vw) stays clear of a classic scrollbar. */ width: max-content; min-width: 200px; max-width: min(20rem, 90vw); padding: 8px 10px; z-index: var(--sk-z-jumpnav); max-height: min(72vh, 460px); overflow-y: auto; overscroll-behavior: contain; } .edt-nav .sub-menu a { padding: 8px 10px; font-size: var(--sk-fs-body-sm); } .edt-nav .sub-menu a:focus-visible { outline: var(--sk-bw-2) solid var(--sk-focus-ring); outline-offset: -2px; } /* Long dropdowns (7+ items -- e.g. the auto-injected Tours list) split into two balanced columns instead of one oversized stack that ran off the viewport and overlapped content. :has() is supported in all current browsers; the fallback is the single column above. */ @media (min-width: 901px) { .edt-nav .sub-menu:has( > li:nth-child(7) ) { display: grid; /* 2 x 160 + 8 gap + 20 padding = 348px (was 210px + 210px = 440px). */ grid-template-columns: repeat(2, minmax(0, 10rem)); gap: 2px 8px; max-width: min(23rem, 90vw); } } /* The right-most triggers open leftwards. A two-column panel anchored 14px left of a nav item near the pill's right edge ran ~270px past the viewport at 1121px -- the narrowest width at which .edt-nav is still visible. */ .edt-nav > ul > li:nth-last-child(-n+3) > .sub-menu { inset-inline-start: auto; inset-inline-end: -14px; } /* Touch targets: 44px minimum on mobile nav + toggle (WCAG 2.5.5). */ @media (max-width: 900px) { .edt-nav a { min-height: 44px; align-items: center; } .edt-menu-toggle { min-width: 44px; min-height: 44px; } .edt-footer-grid { grid-template-columns: 1fr; } .edt-footer-brand { grid-column: auto; } .edt-pay-marks { gap: 10px; } } /* Header/footer premium refinement + switcher mobile behavior. */ @media (max-width: 640px) { /* Globe + chevron only in the header on small phones -- the full label squeezes the phone link and Book-now button. */ .edt-header-actions .edt-lang__label { display: none; } .edt-header-actions .edt-lang__btn { padding: 9px; } } /* --------------------------------------------------------------------------- 20. LANGUAGE SWITCHER, GUIDE, LEGAL ------------------------------------------------------------------------- */ /* Switcher: button + panel -- the pattern the floating agent cards use; a plain absolutely-positioned panel below the button, no
quirks. Panel scrolls if the viewport is short. */ .edt-lang { position: relative; } .edt-lang__btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 9px 11px; min-height: 44px; /* ponytail: neutral grey is the one border that reads on both the dark glass header pill and the light footer surface. */ border: 1px solid rgba(127,127,127,.35); border-radius: var(--sk-r-xs); background: transparent; font-family: var(--sk-font-body); font-size: var(--sk-fs-meta); font-weight: 600; line-height: 1; letter-spacing: .08em; color: inherit; transition: border-color .2s var(--edt-spring); } .edt-lang__btn:hover { border-color: var(--edt-gold); } .edt-lang__btn:focus-visible { outline: var(--sk-bw-2) solid currentColor; outline-offset: 2px; } .edt-lang__globe { width: 15px; height: 15px; } .edt-lang__chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .2s var(--edt-ease-out); } .edt-lang__btn[aria-expanded="true"] .edt-lang__chev { transform: rotate(225deg) translateY(-1px); } .edt-lang__panel { position: absolute; z-index: var(--sk-z-toast); inset-inline-end: 0; top: calc(100% + 10px); min-width: 240px; max-width: min(20rem, 90vw); max-height: min(60vh, 430px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: var(--sk-r-xs); background: var(--sk-surface); border: 1px solid var(--edt-line); box-shadow: var(--sk-e-3); } .edt-lang__panel ul { list-style: none; margin: 0; padding: 0; } .edt-lang li + li { margin-top: 2px; } .edt-lang__panel a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: var(--sk-r-xs); color: var(--edt-ink); font-size: var(--sk-fs-body-sm); text-decoration: none; } .edt-lang__panel a:hover, .edt-lang__panel a:focus-visible { background: var(--sk-sunken); color: var(--edt-ink); } .edt-lang__panel a.edt-lang__current-lang { background: var(--sk-sunken); } .edt-lang__name { font-weight: 700; } .edt-lang__en { font-size: var(--sk-fs-caption); color: var(--edt-muted); } .edt-lang__flag svg { display: block; width: 24px; height: 16px; border-radius: var(--sk-r-xs); box-shadow: 0 0 0 1px var(--sk-line); } /* Guide season badges. */ .edt-season-badge { display: inline-block; margin-bottom: 14px; padding: 7px 14px; border-radius: var(--sk-r-xs); font-size: var(--sk-fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edt-season-badge--gold { background: var(--sk-accent); color: #fff; } .edt-season-badge--blue { background: var(--edt-blue); color: var(--edt-cream); } .edt-season-badge--sand { background: var(--edt-sand); color: var(--edt-ink); } /* Legal typography. */ .edt-legal-body { max-width: min(var(--sk-container-prose), 100%); margin-top: 44px; } .edt-legal-body h2 { font-family: var(--edt-font-display); font-weight: 500; font-size: var(--sk-fs-h3); letter-spacing: -.010em; line-height: 1.2; margin: 40px 0 12px; color: var(--sk-ink); } .edt-legal-body p, .edt-legal-body li { color: var(--edt-ink-soft); font-size: var(--sk-fs-body); line-height: 1.65; } .edt-legal-body ul { padding-inline-start: 22px; } .edt-legal-body a { color: var(--edt-ink); border-bottom: 1px solid var(--edt-gold); } /* --------------------------------------------------------------------------- 21. TOURS SYSTEM v2 -- breadcrumbs, predictive search, reviews, guides ------------------------------------------------------------------------- */ /* sekhem_breadcrumb() now emits nav > ol > li with aria-current on the last crumb (spec 9.7). The flex row moved from the