/** * AQ Treks — base theme stylesheet. * Mobile-first: min-width media queries only. Values come from theme.json * presets (var(--wp--preset--*)) — no hardcoded colors/sizes below. * * Deliberately NOT wrapped in @layer: WordPress's own global-styles output * (theme.json -> :where() selectors) is unlayered, and per the cascade-layers * spec any layered rule is weaker than an unlayered one regardless of * specificity or source order. This stylesheet is enqueued after * global-styles-inline-css, so plain rules here override it as expected. */ /* Reset */ *, *::before, *::after { box-sizing: border-box; } /* * WP Travel Engine's own compiled block CSS sets --primary-color: #147dfe * on :root (see dist/blocks.view-rtl.css) — that blue only measures 3.89:1 * against white, under the 4.5:1 AA floor for the booking sidebar's text * buttons. Overriding the same custom property here is less fragile than * chasing every WTE class that reads it — EXCEPT that WTE prints its own * block CSS in wp_footer, after this stylesheet, and re-declares the same * :root variable a second time further down its own file. Source order * alone would let that second declaration win over ours despite equal * specificity, so this needs !important to hold regardless of print order. */ :root { --primary-color: var(--wp--preset--color--primary-dark) !important; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; } body { overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } a { text-decoration: none; } /* * A link sitting inside a paragraph/list item of running prose (a trip's * overview copy, the Air Quality page body, "Before You Go" permit links, * ...) needs more than color alone to read as a link — the reset above * removes the one thing that gave it that on its own. Buttons, nav items * and cards all have their own distinct visual treatment already (a * background, a border, an icon) and never live inside a `p`/`li`, so this * is safely scoped to exactly the "link in a sentence" case WCAG's * link-in-text-block check is about. */ p a, li a { text-decoration: underline; } /* Standard WordPress "visually hidden" utility — for headings and labels a screen reader needs but the design doesn't call for showing (e.g. a section heading that exists purely to keep the heading outline from skipping a level). Not focusable content, so no :focus-visible variant. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); word-wrap: normal !important; border: 0; } :focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* * theme.json declares a 0px root padding so `useRootPaddingAwareAlignments` * generates the `.wp-site-blocks`/`.has-global-padding` plumbing (including * the alignfull negative-margin compensation) with no visible change at * desktop — this just overrides the same custom properties at mobile so * constrained content gets a small edge gutter instead of sitting flush * against the screen, while alignfull sections still reach true edge-to-edge. * * Has to target `body`, not `:root` — core's own global-styles-inline-css * declares these four custom properties directly on `body` (bundled into * its big color/font/line-height rule), and a custom property's own literal * value on an element always wins over whatever it'd otherwise inherit from * an ancestor like `:root`, regardless of which selector "looks" more * specific. Overriding on `:root` alone silently did nothing below `body`. */ @media (max-width: 55.99em) { body { --wp--style--root--padding-top: 0; --wp--style--root--padding-right: 8px; --wp--style--root--padding-bottom: 0; --wp--style--root--padding-left: 8px; } } /* Layout helpers */ /* * Condensed one step down the spacing scale from the original * spacing--80 default (measured ~81px live) — still a real section- * sized breather, just tighter. The per-section overrides below (dense * feature strip vs. sparse charm split) shift down by the same one step * each, so the "tighter/looser than the default" relationship between * sections stays intact — this isn't flattening that intentional * variation, just moving the whole scale down together. */ .aqt-section { padding-block: var(--aqt-section-pad-block, var(--wp--preset--spacing--70)); } .aqt-section--surface { background-color: var(--wp--preset--color--surface); /* Default body text (#657176) on this background is 4.45:1 — 0.05 short of AA. Headings aren't affected (theme.json sets their color directly on h1-h6, which wins over this inherited value) — this only reaches plain paragraph/span text that would otherwise fall back to the default body color. */ color: var(--wp--preset--color--primary); } .aqt-section--dark { background-color: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--background); } .aqt-section--dark a { color: var(--wp--preset--color--background); } /* Components */ .aqt-pill { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); border-radius: 999px; padding-block: var(--wp--preset--spacing--30); padding-inline: var(--wp--preset--spacing--50); font-weight: 600; white-space: nowrap; } .aqt-pill--outline { border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--heading); } /* * Premium button system: rectangular corners instead of the old pill shape, * a soft gradient sheen, layered elevation shadow, a gentle glow on hover, * and a physical-feeling press on click — restrained rather than flashy, * per the client's brief. `.wp-element-button` is the class WordPress * stamps on every `core/button` link styled by theme.json's * `elements.button` (border-radius/colors/padding live there — see * theme.json), so this one rule covers every wp:button on the site * (including its `is-style-outline` variant) without touching individual * patterns. `.aqt-newsletter-form__submit` and `.aqt-journal-featured__cta` * are real buttons too but aren't `core/button` blocks, so they're listed * explicitly — as are WP Travel Engine's own "View Details" (`.wpte-button`) * and "Check Availability" (`.wpte-bf-btn.wte-book-now`) buttons, for the * same "every button on the site" uniformity, though the booking wizard's * smaller internal controls (package/traveler steppers) are left alone — * those toggle selected/active state via background color and restyling * them risks fighting that logic for no visible benefit. Badges/tags * (`.aqt-pill-badge`, topic pills, difficulty badges) are deliberately * excluded — they're labels, not buttons, and keep their pill shape. * * The rgba() values are the theme.json palette's `heading` (#151B1E) and * `primary` (#526B76) colors spelled out by hand, same as the hero overlay * further down this file — CSS custom properties can't be split into rgba() * channels on their own. */ .wp-element-button, .aqt-newsletter-form__submit, .aqt-journal-featured__cta, .wpte-button, .wpte-bf-btn.wte-book-now { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 45%, rgba(21, 27, 30, 0.08) 100%); box-shadow: 0 1px 2px rgba(21, 27, 30, 0.08), 0 6px 16px rgba(21, 27, 30, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .wp-element-button:hover, .aqt-newsletter-form__submit:hover, .aqt-journal-featured__cta:hover, .wpte-button:hover, .wpte-bf-btn.wte-book-now:hover { box-shadow: 0 2px 6px rgba(21, 27, 30, 0.1), 0 10px 24px rgba(21, 27, 30, 0.16), 0 0 0 4px rgba(82, 107, 118, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14); } /* * WP Travel Engine sets its own border-radius directly on these two classes * (100px on `.wpte-button`, 4px on the booking button) and reprints its * compiled CSS in `wp_footer`, after this stylesheet — same reprint-order * quirk as the trip-gallery height cap and trip-duration contrast fixes * elsewhere in this file, so it needs `!important` to actually stick. */ /* stylelint-disable no-descending-specificity -- plain radius override, unrelated to the shadow/glow :hover rule above */ .wpte-button, .wpte-bf-btn.wte-book-now { border-radius: 8px !important; } /* stylelint-enable no-descending-specificity */ /* Transform is layout-safe (compositor-only) but still motion, so it's gated behind reduced-motion same as everything else animated in this project — reduced-motion users still get the shadow/glow feedback above, just not the lift/press. */ @media (prefers-reduced-motion: no-preference) { .wp-element-button, .aqt-newsletter-form__submit, .aqt-journal-featured__cta, .wpte-button, .wpte-bf-btn.wte-book-now { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .wp-element-button:hover, .aqt-newsletter-form__submit:hover, .aqt-journal-featured__cta:hover, .wpte-button:hover, .wpte-bf-btn.wte-book-now:hover { transform: translateY(-1px); } .wp-element-button:active, .aqt-newsletter-form__submit:active, .aqt-journal-featured__cta:active, .wpte-button:active, .wpte-bf-btn.wte-book-now:active { transform: scale(0.97); } } .wp-element-button:active, .aqt-newsletter-form__submit:active, .aqt-journal-featured__cta:active, .wpte-button:active, .wpte-bf-btn.wte-book-now:active { box-shadow: 0 1px 2px rgba(21, 27, 30, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .aqt-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--wp--preset--color--primary); margin-bottom: var(--wp--preset--spacing--20); } .aqt-section--dark .aqt-eyebrow, .aqt-hero--video .aqt-eyebrow { color: var(--wp--preset--color--accent); } /* Main header */ /* * `position: fixed`, not `sticky` — confirmed by direct testing that * `position: sticky` silently fails to stick the moment this element * sits inside even one plain, otherwise-unstyled wrapper div (true * in a fresh throwaway test element too, not just this header), and * this header always has at least the template-part wrapper around it. * `fixed` doesn't depend on that at all — it's also the mechanism the * homepage's hero already used and had already proven reliable. */ .aqt-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Tinted surface, not flat white, and separation from elevation instead of a hairline — a plain white bar + 1px border-bottom is the most recognised "AI nav" signature there is. */ background-color: var(--wp--preset--color--surface); box-shadow: 0 1px 0 var(--wp--preset--color--border), 0 12px 24px -16px rgba(21, 27, 30, 0.18); } /* * The visible "gap" reported between the header and the first section on * every non-home page only ever showed up logged in: WP's admin bar is * `position: fixed` too, at a *higher* z-index than our header, and core * pushes the page down for it by putting `margin-top: 32px` (46px on the * ≤782px breakpoint below) on `` — which shifts normal document flow * (so `
`'s own margin-block-start above ends up correctly offset) * but does nothing for an element that's `position: fixed` itself, since * that's positioned against the viewport, not ``'s box. Left alone, * the header stays pinned to the real viewport top, the admin bar covers * its own top 32px, and `
` starts 32px lower than the header's * visible bottom edge — exactly the gap. Moving the header down to start * below the admin bar instead closes it. */ body.admin-bar .aqt-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .aqt-header { top: 46px; } } /* * Fixed positioning takes the header out of flow on every page, not just * the hero (which already relied on this and compensates with its own * zero-margin rule below). Everywhere else needs the opposite: enough * top space that content starts below the fixed header instead of * hidden behind it. */ body:not(.is-home-hero) .wp-site-blocks > main { margin-block-start: var(--wp--custom--header--height, 88px); } .aqt-header > .wp-block-group { min-height: var(--wp--custom--header--height, 88px); align-items: center; } /* * Hamburger trigger — hidden at desktop, where the nav stays inline. * A plain 3-bar icon that morphs into an X (`.is-active`, toggled by the * drawer script in header.html) rather than a second icon swapped in. */ .aqt-menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; flex-shrink: 0; border: none; background: none; cursor: pointer; } .aqt-menu-toggle__bar { width: 22px; height: 2px; border-radius: 1px; background-color: var(--wp--preset--color--heading); transition: transform 0.25s ease, opacity 0.25s ease; } .aqt-menu-toggle.is-active .aqt-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .aqt-menu-toggle.is-active .aqt-menu-toggle__bar:nth-child(2) { opacity: 0; } .aqt-menu-toggle.is-active .aqt-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .aqt-menu-toggle__bar { transition: none; } } .aqt-drawer-backdrop { position: fixed; inset: 0; z-index: 190; background-color: rgba(21, 27, 30, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .aqt-drawer-backdrop.is-open { opacity: 1; visibility: visible; } body.aqt-drawer-locked { overflow: hidden; } .aqt-drawer-close { display: none; } .aqt-brand { align-items: center; } .aqt-brand__logo-link { display: flex; position: relative; flex-shrink: 0; } .aqt-brand__logo { /* Explicit width (not just height + width:auto) so a tight header row can't flex-shrink the image off its intrinsic 396:180 ratio — that's what was causing the Lighthouse image-aspect-ratio failure. */ width: 132px; height: 60px; flex-shrink: 0; transition: opacity 0.3s ease; } /* * `--mono` is a second image, not a CSS filter on the one above — * `filter: brightness(0) invert(1)` zeroes every opaque pixel's RGB before * inverting, which would collapse this full lockup's linework and its * background into one indistinguishable blob. `logo-header-on-dark.webp` * (white lockup, shown here) and `logo-header-mono.webp` (black lockup, * the default state above) are two real brand-supplied assets instead — * background-color-keyed to transparent from their own flat dark/light * source tiles (`artifacts/web_dark_background.png` and * `artifacts/monochrome_web_logo.png`), then resized + converted to WebP * for the header specifically — so each renders correctly on whatever's * actually behind it: white-on-video for the transparent home-hero * header, black-on-surface everywhere else. The PNG originals of both * still exist (`logo-header-on-dark.png` is the watermark source * `tools/seed/seed-trek-packages.php` stamps onto trek photos — * `logo-header-mono.png` had no other use and was removed). */ .aqt-brand__logo--mono { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; } /* * Primary nav (Destinations / Treks / Plan your trek / Journal / About us). * All five items share one flex row and one look, whether they open a * mega menu, a simple single-column dropdown, or nothing at all (Journal). * `
`/`` instead of `core/navigation-submenu` throughout — * the submenu block only allows nested navigation-link/navigation-submenu * children, so a real multi-column dropdown with an image tile can't live * inside one, and mixing it with hand-rolled dropdowns for the other items * was what caused the two groups to drift out of alignment/spacing in the * first place. `
` gets us click/tap-to-open with zero JS and free * keyboard support (Enter/Space); the only thing it doesn't do natively is * close-on-outside-click, which a small script in header.html handles. */ .aqt-primary-nav { position: relative; display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--wp--preset--spacing--50); row-gap: var(--wp--preset--spacing--10); } @media (min-width: 56em) { .aqt-primary-nav { flex-grow: 1; justify-content: center; } } .aqt-mega { /* No `position: relative` here at mobile widths on purpose: the nav is an off-canvas drawer there (see the `max-width: 55.99em` block below), and each panel expands inline under its own trigger instead of floating, so it doesn't need a positioned ancestor at all — see the `min-width: 56em` block for where each panel goes back to being an absolutely-positioned floating dropdown, which is what desktop wants. */ } .aqt-mega__trigger { display: flex; align-items: center; gap: var(--wp--preset--spacing--10); list-style: none; cursor: pointer; padding: var(--wp--preset--spacing--20) 0; font-weight: 600; color: var(--wp--preset--color--heading); } .aqt-mega__trigger::-webkit-details-marker { display: none; } .aqt-mega__trigger::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: rotate(45deg); margin-top: -4px; transition: transform var(--dur-fast, 160ms) ease; } .aqt-mega[open] .aqt-mega__trigger::after { transform: rotate(-135deg); margin-top: 2px; } .aqt-mega:hover .aqt-mega__trigger { color: var(--wp--preset--color--primary); } .aqt-mega__trigger--plain { text-decoration: none; } .aqt-mega__trigger--plain::after { content: none; } .aqt-mega__trigger--plain:hover { color: var(--wp--preset--color--primary); } .aqt-mega__panel { /* Absolute + viewport-width-via-100vw rather than static: `.aqt-mega` is one flex item in a `flexWrap:nowrap` header row, so a statically-flowed panel is squeezed into that item's own narrow column instead of the full header width. Breaking out of flow sidesteps the parent layout entirely on the small screens where this matters most. */ position: absolute; top: 100%; left: 50%; z-index: 100; transform: translateX(-50%); width: 100vw; max-width: calc(100vw - (var(--wp--preset--spacing--40) * 2)); margin-top: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); /* Same glass treatment as the hero's "Talk to a guide" button (`.aqt-hero .is-style-outline`), just less see-through — that button floats over one dark video frame, this panel floats over anything from page content to the video hero, and needs its own nav links and the promo card's text to stay readable either way. */ background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; box-shadow: 0 12px 32px rgba(21, 27, 30, 0.12); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); max-height: 70vh; overflow-y: auto; } /* Browsers without backdrop-filter support get a fully opaque panel instead of a flat, unblurred tint sitting on top of whatever's behind it — the fallback is the same panel, just without the "glass" part. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aqt-mega__panel { background-color: var(--wp--preset--color--background); border-color: var(--wp--preset--color--border); } } .aqt-mega__col { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .aqt-mega__heading { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--body); border-bottom: 1px solid var(--wp--preset--color--border); padding-bottom: var(--wp--preset--spacing--10); } .aqt-mega__col a { font-weight: 400; color: var(--wp--preset--color--heading); } .aqt-mega__col a:hover { color: var(--wp--preset--color--primary); } .aqt-mega__promo { display: block; border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--surface); position: relative; } .aqt-mega__promo img { width: 100%; height: 140px; object-fit: cover; } .aqt-mega__promo-eyebrow, .aqt-mega__promo-title, .aqt-mega__promo-cta { display: block; padding-inline: var(--wp--preset--spacing--30); } .aqt-mega__promo-eyebrow { margin-top: var(--wp--preset--spacing--30); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--body); } .aqt-mega__promo-title { font-weight: 600; color: var(--wp--preset--color--heading); margin-top: var(--wp--preset--spacing--10); } .aqt-mega__promo-cta { font-weight: 600; color: var(--wp--preset--color--primary-dark); margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--30); } @media (max-width: 55.99em) { /* Below the desktop breakpoint there isn't room for logo + all 5 nav items + search on one line, so the nav moves off the row entirely (`position: fixed`, taken out of flow — the row keeps to a single line: logo, search, hamburger) and becomes an off-canvas drawer that the hamburger button opens/closes. */ .aqt-menu-toggle { display: flex; } .aqt-primary-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; width: min(85vw, 360px); flex-direction: column; align-items: stretch; row-gap: 0; background-color: var(--wp--preset--color--background); padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); box-shadow: -8px 0 32px rgba(21, 27, 30, 0.18); overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } @media (prefers-reduced-motion: reduce) { .aqt-primary-nav { transition: none; } } .aqt-primary-nav.is-open { transform: translateX(0); } .aqt-drawer-close { display: flex; align-items: center; justify-content: center; position: absolute; top: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30); width: 44px; height: 44px; border: none; background: none; color: var(--wp--preset--color--heading); cursor: pointer; } /* Each nav item becomes a full-width row rather than a floating dropdown trigger — the drawer is a narrow column, not the header bar, so there's no "off to the side" for a panel to float over. */ .aqt-mega { width: 100%; border-bottom: 1px solid var(--wp--preset--color--border); } .aqt-mega__trigger, .aqt-mega__trigger--plain { width: 100%; justify-content: space-between; min-height: 44px; } /* * The drawer's background is always solid, even on the homepage where * the floating header goes transparent with white trigger text over * the hero video — an ID selector to unconditionally out-specificity * `body.is-home-hero:not(.is-scrolled) .aqt-mega__trigger` (three * classes deep), otherwise the drawer's nav items render invisible * (white text on the drawer's white background) on the homepage. */ #aqt-primary-nav .aqt-mega__trigger, #aqt-primary-nav .aqt-mega__trigger--plain { color: var(--wp--preset--color--heading); } /* The panel expands inline below its trigger (native
accordion behavior) instead of floating — same markup as desktop's mega menu, just laid out flat since it's already inside a scrollable column. */ .aqt-mega__panel { position: static; top: auto; left: auto; z-index: auto; transform: none; width: 100%; max-width: none; margin-top: 0; padding: 0 0 var(--wp--preset--spacing--40); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; max-height: none; overflow-y: visible; } } @media (min-width: 56em) { .aqt-mega { position: relative; } .aqt-mega__panel { left: 0; transform: none; z-index: 100; width: max-content; max-width: none; min-width: 480px; max-height: none; overflow-y: visible; flex-direction: row; flex-wrap: nowrap; } .aqt-mega__col { min-width: 180px; } .aqt-mega__promo { width: 220px; flex-shrink: 0; } .aqt-mega__promo img { height: 110px; } /* Plan your trek / About us: one plain column of links, no promo tile — the 480px mega-menu minimum would leave them looking like an empty oversized box. */ .aqt-mega--simple .aqt-mega__panel { min-width: 220px; } .aqt-mega--simple .aqt-mega__col { min-width: 0; } } /* * Search icon and hamburger sit right next to each other, not spread out * by the header row's own space-between — this group is one flex item in * that row (pinned to its trailing edge), with its own tight 2px gap * between the two controls. */ .aqt-header__actions { gap: 2px; } /* * A glass pill (frosted, blurred background) expands behind the input on * hover/focus-within alone — no JS required for that part. The solid * accent circle stays opaque and fixed at the row's trailing edge the * whole time, same silhouette as the reference "pill input + popped-out * circular button" pattern, just in our own glass + brand-colour * treatment instead of a flat white bar. The header script only covers * what CSS can't: a tap on a touch device (no real `:hover`) and closing * again on an outside click or Escape. */ .aqt-search { position: relative; display: flex; align-items: center; } /* The pill itself — a pseudo-element sized to the whole row (`inset: 0` automatically covers the input once it's expanded, since .aqt-search's own box grows with its content), kept below the input/button with z-index and out of the way of clicks with pointer-events. */ .aqt-search::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 999px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 24px rgba(21, 27, 30, 0.14); opacity: 0; transform: scaleX(0.4); transform-origin: right center; transition: opacity 0.2s ease, transform 0.25s ease; pointer-events: none; } .aqt-search:hover::before, .aqt-search:focus-within::before, .aqt-search.is-open::before { opacity: 1; transform: scaleX(1); } /* The input's own default focus outline is a hard rectangle — clashes with the rounded glass pill it sits inside. Move the ring onto the pill itself instead of just deleting it, so keyboard focus is still visible, just shaped to match. */ .aqt-search:focus-within::before { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } @supports not ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) { .aqt-search::before { background-color: var(--wp--preset--color--background); } } .aqt-search__toggle { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; /* WP Travel Engine prints its own CSS in wp_footer, after this stylesheet, and its generic `button[type="submit"]` padding wins the source-order tie on any WTE-loaded page (trek grids, taxonomy archives, …) unless forced — same fix shape as the button-radius and trip-gallery height-cap overrides elsewhere in this file. */ padding: 0 !important; border: none; border-radius: 999px; background-color: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--background); cursor: pointer; box-shadow: 0 6px 16px -4px rgba(21, 27, 30, 0.4); transition: background-color 0.2s ease, box-shadow 0.2s ease; } .aqt-search__toggle:hover { background-color: var(--wp--preset--color--primary); box-shadow: 0 10px 22px -6px rgba(21, 27, 30, 0.45); } @media (prefers-reduced-motion: no-preference) { .aqt-search__toggle { transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .aqt-search__toggle:active { transform: scale(0.92); } } .aqt-search__input { position: relative; z-index: 1; width: 0; min-width: 0; height: 44px; padding-inline: 0; border: none; background: none; font: inherit; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--heading); opacity: 0; transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease; } .aqt-search__input:focus-visible { /* The pill (`.aqt-search:focus-within::before`) carries the focus ring instead — a rectangle here would clash with the rounded pill. */ outline: none; } .aqt-search:hover .aqt-search__input, .aqt-search:focus-within .aqt-search__input, .aqt-search.is-open .aqt-search__input { /* Capped, not just 200px flat — the search icon and hamburger now sit right next to each other (`.aqt-header__actions`), so on a narrow phone a flat 200px expansion can outgrow the space actually left between the logo and that pair and shove the hamburger toward/off the viewport edge. `min()` still reaches 200px wherever there's room (tablet/desktop) and only backs off once the viewport can't fit it. 242px is measured against real rendered viewports (320-500px, headless Chrome + CDP device metrics) at zero root padding, not just worked out on paper — the naive arithmetic (logo box + icon+gap+hamburger + row padding) undercounted by ~12px in practice, and flexbox `space-between` won't clamp the overflow for us if this runs short. The root-padding variables are added on top (not baked into the 242 constant) so this stays correct if that padding value ever changes again. */ width: min(200px, calc(100vw - 242px - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right))); opacity: 1; padding-inline-start: var(--wp--preset--spacing--40); } .aqt-search__input::placeholder { color: var(--wp--preset--color--body); opacity: 0.7; } @media (prefers-reduced-motion: reduce) { .aqt-search::before, .aqt-search__input { transition: none; } } /* Footer */ .aqt-footer { padding-block: var(--wp--preset--spacing--80); } .aqt-footer__newsletter { gap: var(--wp--preset--spacing--60); align-items: center; padding-bottom: var(--wp--preset--spacing--70); } .aqt-footer__logo { display: block; width: 168px; height: auto; margin-bottom: var(--wp--preset--spacing--30); } .aqt-footer .wp-block-separator { opacity: 0.16; margin-block: var(--wp--preset--spacing--70); } .aqt-footer__columns h4 { text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin-bottom: var(--wp--preset--spacing--40); } .aqt-footer__columns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } /* stylelint-disable no-descending-specificity -- unrelated BEM component, no real overlap. `text-decoration: none` overrides the global `li a`/`p a` underline reset (see the top of this file) — that rule exists so a link inline in a sentence still reads as a link without relying on color alone, but every link here IS the entire list item or line, not one word inside running prose, so there's nothing for the underline to disambiguate. */ .aqt-footer__columns a, .aqt-footer p a { color: rgba(255, 255, 255, 0.78); text-decoration: none; } /* stylelint-enable no-descending-specificity */ .aqt-footer__columns a:hover { color: var(--wp--preset--color--background); } /* * Socials sit under the address details in the brand column now (first * column of aqt-footer__columns), not the closing bottom bar. * * `.aqt-footer__columns .aqt-footer__socials` (two classes) rather than * plain `.aqt-footer__socials` — `.wp-block-social-links` is itself a * `