/** * Individual Experience page — Concierge Bairro Alto Hotel * * Tokens extracted from the Figma frame * "Experiências > Passeios & Descobertas > Página Individual de Experiência". */ :root { /* Colors */ --bah-paper: #EEE7DE; --bah-surface: #FFFFFF; --bah-border: #D8C6B0; --bah-rule: #E4DBD0; --bah-ink: #281E1D; --bah-body: #444444; --bah-muted: #483D38; --bah-soft: #AD9F8C; --bah-accent: #AA8866; --bah-badge: #F8E9DA; --bah-dark: #241916; --bah-on-dark: #D8C6B0; /* Typography */ --bah-display: "Playfair Display", Georgia, "Times New Roman", serif; --bah-sans: "Assistant", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Measurements */ --bah-shell: 1488px; --bah-gap: 40px; --bah-radius: 2px; /* * Motion — dropdown/mega menu reveal. Shared by the reveal itself * (concierge-header.css) and the "header goes solid" sync below * (both keyed off the same `.is-menu-intent` class so they move * together); `--bah-menu-intent` is also hardcoded as the hover * timer's delay in concierge.js — JS can't read a custom property * without an extra getComputedStyle() round-trip, not worth it for * one number, so keep the two in sync by hand if either changes. * * `--bah-menu-ease` is a symmetric ease-in-out (easeInOutCubic), not * an ease-out: an ease-out curve front-loads almost all of its * movement into the first third of the duration (full speed * immediately, then a long, barely-visible settle) — technically * smooth, but it *reads* as a sudden snap no matter how long * `--bah-menu-duration` is, because the eye registers the motion as * "done" well before the transition actually ends. Easing gently in * and out avoids that abrupt starting velocity. */ --bah-menu-intent: 200ms; --bah-menu-duration: 360ms; --bah-menu-ease: cubic-bezier(0.65, 0, 0.35, 1); } /* --------------------------------------------------------------- * Fluid typography — GreenShift blocks * * The block editor (GreenShift) saves each heading's font-size as * inline CSS with an #id selector, which has more specificity than * any class here. That's why these classes use !important and are * applied manually to each heading via the block's "Block classes" * field (Block panel → Advanced), which survives block duplication/ * recreation unlike the auto-generated #id. * clamp() values aligned with the same breakpoints (390px–1488px) * used in the rest of the theme, with the min/max pixels confirmed * in Penpot. These blocks' line-height is also saved in fixed px by * GreenShift, so it has to be redefined here in relative (unitless) * units — otherwise the line-height/font-size ratio spikes on * mobile, as the font-size shrinks while the px line-height stays * the same. The values below keep the same ratio the design had on * desktop. * ------------------------------------------------------------- */ .bah-fluid-h1 { font-size: clamp(44px, calc(29.79px + 3.643vw), 84px) !important; line-height: 1.1 !important; } .bah-fluid-h2 { font-size: clamp(38px, calc(28.76px + 2.368vw), 64px) !important; line-height: 1 !important; } .bah-fluid-h3 { font-size: clamp(25px, calc(22.51px + 0.637vw), 32px) !important; line-height: 1 !important; } .bah-fluid-56 { font-size: clamp(35px, calc(27.54px + 1.913vw), 56px) !important; line-height: 1.05 !important; } .bah-fluid-40 { font-size: clamp(29px, calc(25.09px + 1.002vw), 40px) !important; line-height: 1 !important; } .bah-fluid-28 { font-size: clamp(23px, calc(21.22px + 0.455vw), 28px) !important; line-height: 1.14 !important; } /* --------------------------------------------------------------- * Homepage * ------------------------------------------------------------- */ /* * Sticky header lift only — this used to also apply to `[data-id="menu"] * .sub-menu` (both the mega menu and the smaller dropdown) via a plain * `.sub-menu` selector, but that's low enough specificity that Blocksy's * own `[class*="animated-submenu"] > .sub-menu` (dropdown-animation.scss, * parent theme) — which sets its own `box-shadow: var(--theme-box- * shadow)` — wins instead. The dropdowns now set this same shadow value * themselves, directly on `.menu-container .menu .sub-menu:not(.site-mega)` * and `.menu-container .menu .site-mega` in concierge-header.css, at * enough specificity to actually beat Blocksy's rule (see the comment on * the first of those two for why `clip-path` also makes it safe not to * bleed over the nav bar the way it used to). */ [data-header*="type-1"] [data-sticky*="yes"] { box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.03), 0px 4px 8px -1px rgba(0, 0, 0, 0.04), 0px 10px 16px -2px rgba(0, 0, 0, 0.05), 0px 20px 32px -4px rgba(0, 0, 0, 0.06), 0px 40px 64px -8px rgba(0, 0, 0, 0.07); } .h-full { height: 100% !important; } .site-search input { outline-color: transparent !important; } .page-id-8 #header [data-row*=bottom][data-transparent-row="no"] .site-search--on-dark, .page-id-703 #header [data-row*=bottom][data-transparent-row="no"] .site-search--on-dark { border: 1px solid var(--bah-dark); } .page-id-8 #header [data-row*=bottom][data-transparent-row="yes"] .site-search--on-dark, .page-id-703 #header [data-row*=bottom][data-transparent-row="yes"] .site-search--on-dark { border: 1px solid var(--bah-border); } .page-id-8 #header [data-row*=bottom][data-transparent-row="no"] .site-search--on-dark input, .page-id-703 #header [data-row*=bottom][data-transparent-row="no"] .site-search--on-dark input { color: #1C1513 !important; } .page-id-8 #header [data-row*=bottom][data-transparent-row="no"] .site-search--on-dark svg, .page-id-703 #header [data-row*=bottom][data-transparent-row="no"] .site-search--on-dark svg { color: #1C1513 !important; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::before, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::after, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); height: 1px; background-color: var(--bah-border); z-index: 2; width: clamp(0px, calc((100vw - 1622px) / 2), 134px); } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::before { left: 32px; } .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::before { left: 32px; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::after { right: 32px; } .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::after { right: 32px; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a.is-current, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a:hover, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a.is-current, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a:hover { color: var(--bah-border); opacity: 1; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li + li::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li + li::before { color: var(--bah-paper); opacity: .5; } /* * When a submenu opens while the bar is still transparent (over the * hero), it becomes solid — --bah-paper, dark text — instead of staying * transparent with the submenu's light panel opening underneath it (the * contrast between the two looked odd). `:has(.menu-item.is-menu-intent)` * — `.is-menu-intent` is our own class (see initMegaMenuHoverIntent() in * concierge.js), added only after the hover-intent delay elapses, and * removed the instant the pointer leaves — so this bar-solidifying * happens at the exact same moment the dropdown itself reveals (see * concierge-header.css), not before it. `:has(.menu-item:focus-within)` * is the keyboard-only equivalent (Tabbing onto a menu item opens its * dropdown immediately, no intent delay — see the same reasoning in * concierge-header.css) and also the no-JS fallback, since `.is-menu- * intent` never gets added at all without JavaScript. On close, it goes * back to the transparent state on its own, since the rule stops * applying as soon as the trigger class/pseudo-class leaves the `
  • `. * * `--theme-link-initial-color`/`--theme-link-hover-color` are how * Blocksy decides the menu links' color per instance (generated in * wp-content/uploads/blocksy/css/global.css from the Customizer); * overridden with `!important` because that source selector is * auto-generated by Blocksy and can change with future header settings * (e.g. a different "Header Type") — safer than trying to match its * exact specificity. */ .ct-active .ct-icon, .ct-icon { width: 40px !important; height: 35px !important; } /* * The dropdowns' chevron lives inside the menu item's own `` * (`bah_replace_dropdown_chevron_svg()`, on the `nav_menu_item_title` * filter — runs before Blocksy closes the `` tag), so `currentColor` * follows the `color` Blocksy already sets on that `` via * `--theme-link-initial-color`/`--theme-link-hover-color` on its own — * transparent, sticky, hover, or `.ct-active`, it's always the same * `color` as the menu's text. Before this, the stroke came from fixed * variables (`--theme-text-color`, `--theme-palette-color-9`, * `--bah-muted`) that didn't follow those state changes, hence the arrow * ending up a different color than the text next to it. */ .ct-icon, .ct-icon svg path { fill: transparent !important; stroke: currentColor !important; } [data-id="menu"] > ul > li > a, .menu-container .menu > .menu-item { height: 100%; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"], .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] { transition: background-color var(--bah-menu-duration) var(--bah-menu-ease); } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent), .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within), .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent), .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) { background-color: var(--bah-paper) !important; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] [data-id="menu"] > ul > li > a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] [data-id="menu"] > ul > li > a { transition: color var(--bah-menu-duration) var(--bah-menu-ease); } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) [data-id="menu"] > ul > li > a, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) [data-id="menu"] > ul > li > a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) [data-id="menu"] > ul > li > a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) [data-id="menu"] > ul > li > a { --theme-link-initial-color: var(--bah-ink) !important; --theme-link-hover-color: var(--bah-accent) !important; } /* * Logo: Blocksy already swaps on its own between `.default-logo` (the * light-ink one, "bah-logo-dark.svg" — for the dark hero) and * `.sticky-logo` (the dark-ink one, "bah-logo-light.svg" — for a solid * light background) when the header goes sticky mid-scroll * (`[data-sticky*='yes'] .sticky-logo`, in the parent theme's * site-title.scss); just missing the same pair for the "solid because the * submenu is open" state, which isn't sticky at all. */ .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .sticky-logo, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .sticky-logo, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .sticky-logo, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .sticky-logo { display: initial; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .default-logo, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .default-logo, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .default-logo, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .default-logo { display: none; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::before, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::after, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::after { transition: opacity var(--bah-menu-duration) var(--bah-menu-ease); } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent)::before, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent)::after, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within)::before, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within)::after, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent)::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent)::after, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within)::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within)::after { opacity: 0; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li + li::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li + li::before { transition: color var(--bah-menu-duration) var(--bah-menu-ease), opacity var(--bah-menu-duration) var(--bah-menu-ease); } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li a, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li a { color: rgba(36, 25, 22, 0.5); opacity: 1; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li a.is-current, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li a:hover, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li a.is-current, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li a:hover, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li a.is-current, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li a:hover, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li a.is-current, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li a:hover { color: var(--bah-dark); } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li + li::before, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li + li::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item.is-menu-intent) .site-lang li + li::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]:has(.menu-item:focus-within) .site-lang li + li::before { color: rgba(36, 25, 22, 0.5); opacity: 1; } .page-id-8 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"] .site-lang li a { color: var(--bah-paper); opacity: .5; text-decoration: none; } /* clean things up once the header collapses to mobile */ @media (max-width: 1000px) { .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::before, .page-id-8 #header [data-row*=middle][data-transparent-row="yes"]::after, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::before, .page-id-703 #header [data-row*=middle][data-transparent-row="yes"]::after { display: none; } } .homepage-hero { width: 100%; border: 1px solid var(--bah-border); } @media (min-width: 1000px) { .homepage-hero { width: 100%; border-top: 0; border-left: 1px solid var(--bah-border); border-right: 1px solid var(--bah-border); border-bottom: 1px solid var(--bah-border); } } /* --------------------------------------------------------------- * Base * ------------------------------------------------------------- */ .exp { background: var(--bah-paper); color: var(--bah-body); font-family: var(--bah-sans); font-size: 16px; line-height: 1.4875; } .exp.wel { background: transparent; } .exp *, .exp *::before, .exp *::after { box-sizing: border-box; } /* * Width/centering no longer comes from here: on the archive and single * pages, `.exp-shell` is always paired with Blocksy's `.ct-container` * class (see inc/concierge-archives.php and the archive-*/section-* * template-parts), so the content's width always follows the * Customizer's "Max Site Width" instead of a separate, duplicated * `--bah-shell`. Only the internal layout (stacking and spacing) stays * here. */ .exp-shell { display: flex; flex-direction: column; } .exp p { margin: 0; } /* Uppercase labels, the design's standard */ .exp-label { margin: 0 0 14px; font-family: var(--bah-sans); font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 1.25px; text-transform: uppercase; color: var(--bah-ink); } .exp-eyebrow { margin: 0 0 12px !important; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--bah-accent); } .exp-h2 { margin: 0; font-family: var(--bah-display); font-size: clamp(38px, calc(28.76px + 2.368vw), 64px); font-weight: 500; line-height: 1.1; letter-spacing: -0.77px; text-transform: uppercase; color: var(--bah-ink); } .exp-value { margin: 0; font-size: 16px; color: var(--bah-body); } /* --------------------------------------------------------------- * Buttons * ------------------------------------------------------------- */ .exp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border: 1px solid transparent; border-radius: var(--bah-radius); font-family: var(--bah-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.6px; line-height: 1; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .exp-btn svg { width: 16px; height: 16px; flex: none; } .exp-btn--dark { background: var(--bah-dark); color: var(--bah-on-dark); } .exp-btn--dark:hover, .exp-btn--dark:focus-visible { background: #3A2A25; color: #F1E6D6; } .exp-btn--ghost { background: transparent; color: var(--bah-ink); border-color: rgba(216, 198, 176, 0.8); } .exp-btn--ghost:hover, .exp-btn--ghost:focus-visible { background: transparent; border-color: var(--bah-accent); } .exp :is(a, button):focus-visible { outline: 2px solid var(--bah-accent); outline-offset: 3px; } /* --------------------------------------------------------------- * Ghost button with a cascading double border — the accent-outlined * button reused in four places: `.exp-btn.exp-btn--outline` (site-wide * CTA variant), `.arc-hubrow__btn` (post-type hub rows, * concierge-archives.css), `.bah-catslide__btn` (homepage category * slider, concierge-home.css) and `.exp-cta.exp-cta--dark .exp-btn.exp-btn--dark` * (single Experience page's "Fale connosco" CTA, concierge-archives.css). * Shared base + the `::after` double-border trick live here since this * file loads on every page; each file below only adds what genuinely * differs for its own context (padding, or — sitting on a dark * background — which color reverses on hover). * ------------------------------------------------------------- */ .exp-btn.exp-btn--outline, .arc-hubrow__btn, .bah-catslide__btn, .exp-cta.exp-cta--dark .exp-btn.exp-btn--dark { position: relative; display: inline-block; overflow: visible; align-self: center; border: 2px solid var(--bah-soft); border-radius: var(--bah-radius); color: var(--bah-soft); font-size: 16px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; text-decoration: none; margin-top: 32px; } .exp-btn.exp-btn--outline::after, .arc-hubrow__btn::after, .bah-catslide__btn::after, .exp-cta.exp-cta--dark .exp-btn.exp-btn--dark::after { content: ''; display: block; position: absolute; border-right: 2px solid var(--bah-soft); border-bottom: 2px solid var(--bah-soft); bottom: -6px; left: 6px; width: 100%; height: 100%; } .exp-btn.exp-btn--outline { padding: 12px 24px !important; transition: 200ms all ease; } .exp-btn.exp-btn--outline:hover { background-color: var(--bah-muted) !important; border-color: var(--bah-muted) !important; color: var(--bah-paper) !important; padding: 12px 32px !important; } .exp-btn.exp-btn--outline:hover::after { border-color: var(--bah-muted) !important; color: var(--bah-muted) !important; } /* --------------------------------------------------------------- * 1. Header * ------------------------------------------------------------- */ .exp-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0 32px 0; text-align: center; } .exp-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 8px 10px; background: rgba(248, 233, 218, 0.9); border: 1px solid var(--bah-border); border-radius: var(--bah-radius); font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 1; text-transform: uppercase; color: var(--bah-accent); } .exp-badge svg { flex: 0 0 auto; width: 14px; height: 14px; } .exp-title { margin: 0; font-family: var(--bah-display); font-size: clamp(38px, calc(28.76px + 2.368vw), 64px); font-weight: 500; line-height: 1; letter-spacing: -0.77px; color: var(--bah-body); margin-bottom: 12px; } .exp-subtitle { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--bah-body); } .exp-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 12px; } /* --------------------------------------------------------------- * Sassy Social Share — "more networks" popup * * `.exp-share` carries the real `[Sassy_Social_Share]` shortcode output * (single-experience.php) — kept off-screen since only its * `.heateor_sss_more` anchor is used (proxied by the visible "Partilhar" * button, initShareMore() in concierge.js). The plugin injects * `#heateor_sss_sharing_more_providers` + `#heateor_sss_popup_bg` * straight onto via JS (heateorSssMoreSharingPopup(), in the * plugin's own public.js) with hardcoded Arial/light-blue defaults — * there's no template markup to hook into, so every rule below targets * the plugin's own selectors directly. * ------------------------------------------------------------- */ .exp-share { display: none; } #heateor_sss_popup_bg { background: rgba(36, 25, 22, 0.55) !important; } #heateor_sss_sharing_more_providers { top: 50% !important; left: 50% !important; margin: 0 !important; transform: translate(-50%, -50%); width: 560px !important; max-width: calc(100vw - 32px) !important; height: auto !important; max-height: 88vh !important; background: var(--bah-surface) !important; border: 1px solid var(--bah-accent) !important; border-radius: var(--bah-radius) !important; box-shadow: 0 32px 64px rgba(40, 30, 29, 0.28) !important; overflow: hidden !important; } #heateor_sss_sharing_more_providers, #heateor_sss_sharing_more_providers * { font-family: var(--bah-sans) !important; text-shadow: none !important; } #heateor_sss_sharing_more_content { background: transparent !important; border-radius: 0 !important; width: 100% !important; color: var(--bah-ink) !important; padding: 56px 32px 32px !important; box-sizing: border-box !important; } #heateor_sss_sharing_more_providers .filter { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 0 16px !important; } #heateor_sss_sharing_more_providers .filter svg { position: absolute !important; left: 14px !important; top: 13px !important; pointer-events: none !important; } #heateor_sss_sharing_more_providers .filter svg path { fill: var(--bah-soft) !important; } #heateor_sss_sharing_more_providers .filter input.search { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0 16px 0 38px !important; background: var(--bah-paper) !important; border: 1px solid var(--bah-border) !important; border-radius: var(--bah-radius) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 44px !important; color: var(--bah-ink) !important; } #heateor_sss_sharing_more_providers .filter input.search:focus { outline: 2px solid var(--bah-accent) !important; outline-offset: 1px !important; } #heateor_sss_sharing_more_providers .all-services { height: auto !important; max-height: 55vh !important; overflow-y: auto !important; overflow-x: hidden !important; clear: none !important; } #heateor_sss_sharing_more_content .all-services ul.mini { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; } #heateor_sss_sharing_more_content .all-services ul.mini li { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; background: transparent !important; } #heateor_sss_sharing_more_providers .all-services ul li a { display: flex !important; align-items: center !important; gap: 10px !important; height: auto !important; padding: 8px 10px !important; background: transparent !important; border: none !important; border-radius: var(--bah-radius) !important; color: var(--bah-ink) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-decoration: none !important; text-shadow: none !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; transition: background-color 0.2s ease !important; } #heateor_sss_sharing_more_providers .all-services ul li a:hover { background: var(--bah-paper) !important; } #heateor_sss_sharing_more_providers .all-services span.heateor_sss_svg { width: 28px !important; height: 28px !important; min-width: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; border-radius: var(--bah-radius) !important; } #heateor_sss_sharing_more_providers .all-services span.heateor_sss_svg svg { width: 14px !important; height: 14px !important; } #heateor_sss_sharing_more_providers .all-services [class*="heateor_sss_more_label_"] { display: block !important; float: none !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #heateor_sss_sharing_more_providers .footer-panel { display: none !important; } #heateor_sss_sharing_popup_close.close-button.separated { position: absolute !important; top: 16px !important; right: 16px !important; left: auto !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; background: transparent !important; border: 1px solid var(--bah-border) !important; border-radius: var(--bah-radius) !important; box-shadow: none !important; cursor: pointer !important; } #heateor_sss_sharing_popup_close img { display: none !important; } #heateor_sss_sharing_popup_close::after { content: '\2715'; font-size: 13px; line-height: 1; color: var(--bah-ink); } @media (max-width: 690px) { #heateor_sss_sharing_more_providers { width: calc(100vw - 32px) !important; } #heateor_sss_sharing_more_content .all-services ul.mini { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 420px) { #heateor_sss_sharing_more_content .all-services ul.mini { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------- * 2. Gallery * ------------------------------------------------------------- */ .exp-gallery { margin-top: 0; } .exp-gallery__track { overflow: hidden; } .exp-gallery__slide { width: 100%; max-width: 1488px; margin: 0; } .exp-gallery__slide img { display: block; width: 100%; height: clamp(440px, 38vw, 540px); object-fit: cover; } .exp-gallery__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 32px; } /* * `position: static !important` overrides Swiper's own `.swiper-pagination` * default (`position: absolute`), since this element carries that class too. * `justify-content: center`: on mobile the arrows disappear (see * `.exp-gallery__nav` further below) and this pagination ends up alone * in `.exp-gallery__controls`'s row (space-between) — with a single * item, `space-between` behaves like `flex-start` (sits flush left), so * this element has to center its own content. Same pattern as * `.arc-carousel__pagination`. */ .exp-gallery__pagination { position: static !important; display: flex; align-items: center; justify-content: center; gap: 10px; } .exp-gallery__dots { display: flex; align-items: center; gap: 10px; } .exp-gallery__dots .swiper-pagination-bullet { width: 10px; height: 2px; border-radius: 1px; background: var(--bah-border); opacity: 1; transition: width 0.3s ease; } .exp-gallery__dots .swiper-pagination-bullet-active { width: 32px; background: var(--bah-ink); } /* --------------------------------------------------------------- * Swiper pagination dash + "NN / NN" counter — the same small * component reused by every carousel on the site (listing carrossels, * the homepage category slider, the wellness preview, the sleep-tips * slider), in two color variants depending on what it sits on: a light * card/page background (dark-ink dash) or a dark photo slide (light * dash). Kept here since this file loads on every page; each other * file only keeps its own container layout (gap/display) when that * genuinely differs, or something specific to just that one context * (e.g. `.arc-carousel__pagination`'s extra margin reset below). * ------------------------------------------------------------- */ .arc-carousel__dots { display: flex; align-items: center; gap: 8px; } .bah-catslider__dots, .home-wellness__dots, .tips-mobile-slider__dots { display: inline-flex; align-items: center; gap: 10px; } .exp-gallery__dots .swiper-pagination-bullet, .arc-carousel__pagination .swiper-pagination-bullet, .home-wellness__pagination .swiper-pagination-bullet { width: 10px; height: 2px; border-radius: 1px; background: var(--bah-border); opacity: 1; transition: width 0.3s ease; } .exp-gallery__dots .swiper-pagination-bullet-active, .arc-carousel__pagination .swiper-pagination-bullet-active, .home-wellness__pagination .swiper-pagination-bullet-active { width: 32px; background: var(--bah-ink); } .bah-catslider .swiper-pagination-bullet, .tips-mobile-slider__pagination .swiper-pagination-bullet { width: 10px; height: 2px; border-radius: 1px; background: var(--bah-on-dark); opacity: 1; transition: width 0.3s ease; } .bah-catslider .swiper-pagination-bullet-active, .tips-mobile-slider__pagination .swiper-pagination-bullet-active { width: 32px; background: #F9F9F9; } .exp-gallery__counter, .arc-carousel__fraction, .bah-catslider__counter, .home-wellness__counter, .tips-mobile-slider__counter { font-family: var(--bah-sans); font-size: 18px; letter-spacing: 0.9px; color: var(--bah-soft); line-height: 1.2; } /* --------------------------------------------------------------- * Gold accent divider — a short horizontal rule reused under section * titles and card details throughout the site. Sizing/color are * shared here; each context keeps only its own margin. * ------------------------------------------------------------- */ .arc-hero__divider, .arc-hubrow__divider, .arc-card__divider, .wel-row__divider, .wel-fitness__divider, .bah-catslide__divider { display: block; width: 162px; height: 1px; background: var(--bah-accent); } .exp-gallery__nav { display: flex; gap: 12px; } .exp-gallery__arrow { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: 1px solid var(--bah-border); border-radius: 50%; color: var(--bah-ink); font-size: 18px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .exp-gallery__arrow:hover { border-color: var(--bah-accent); color: var(--bah-accent); } /* * Arrows only on desktop — below 1000px (the same breakpoint used in the * rest of the site, see .bah-catslider__nav/.arc-carousel__arrows) only * the dashes + counter stay, navigation by drag gesture. */ @media (max-width: 1000px) { .exp-gallery__nav { display: none; } .exp-gallery__controls { padding-block: 24px; } } /* --------------------------------------------------------------- * 3. Meta bar * ------------------------------------------------------------- */ .exp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; padding-block: 32px; border: 1px solid var(--bah-border); background-color: var(--bah-surface); } .exp-meta__item + .exp-meta__item { border-left: 1px solid var(--bah-rule); padding-left: 24px; } .exp-meta__item { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-inline: 24px; gap: 8px; } .exp-meta__label { text-align: center; margin: 0 0 9px; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 1.25px; text-transform: uppercase; color: var(--bah-soft); } .exp-meta__value { text-align: center; font-size: 18px; font-weight: 400; line-height: 1.1; color: var(--bah-body); } /* --------------------------------------------------------------- * 4. Three-column body * ------------------------------------------------------------- */ .exp-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bah-gap); padding-block: 96px; } .exp-body__col--details { display: flex; flex-direction: column; gap: 36px; padding-left: 32px; border-left: 1px solid var(--bah-border); } .exp-prose { display: flex; flex-direction: column; gap: 16px; color: var(--bah-body); } .exp-prose p { margin: 0; } /* Lists with a diamond marker */ .exp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .exp-list li { position: relative; padding-left: 18px; line-height: 1.4875; } .exp-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--bah-accent); transform: rotate(45deg); } /* Steps — same diamond marker as `.exp-list` */ .exp-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .exp-steps li { position: relative; padding-left: 18px; } .exp-steps li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--bah-accent); transform: rotate(45deg); } .exp-steps__title { display: block; color: var(--bah-body); } .exp-steps__detail { display: block; margin-top: 2px; font-size: 14px; color: var(--bah-muted); } /* Price table */ .exp-prices { margin: 0; display: flex; flex-direction: column; gap: 6px; } .exp-prices__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .exp-prices dt { font-size: 16px; color: var(--bah-body); } .exp-prices dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.7; color: var(--bah-ink); white-space: nowrap; } .exp-prices__note { display: block; font-size: 13px; color: var(--bah-muted); } /* Notes with an icon */ .exp-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px !important; font-size: 14px; line-height: 1.4857; color: var(--bah-muted); } .exp-note__icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--bah-soft); } /* Booking box */ .exp-booking { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; padding: 48px 32px; background: var(--bah-surface); border: 1px solid var(--bah-border); border-radius: var(--bah-radius); text-align: center; } .exp-booking .exp-btn.exp-btn--outline { margin-top: 0; background: transparent; } .exp-booking .exp-booking__actions { margin-top: 24px; } .exp-booking__eyebrow { margin: 0 0 11px; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: 1.25px; text-transform: uppercase; color: var(--bah-soft); } .exp-booking__title { margin: 0 0 11px; font-family: var(--bah-display); font-size: clamp(25px, calc(22.51px + 0.637vw), 32px); font-weight: 400; line-height: 1.125; color: var(--bah-ink); } .exp-booking__note { font-size: 16px; line-height: 1.38; color: var(--bah-body); } .exp-booking__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } .exp-booking__terms { margin-top: 16px; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--bah-soft); } /* --------------------------------------------------------------- * 5. Related * ------------------------------------------------------------- */ .exp-related, .exp-voices { padding-block: 96px; } @media (max-width: 768px) { .exp-related, .exp-voices { padding-block: 64px; } } .exp-sectionhead { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 48px !important; text-align: center; margin: 0 auto; } .exp-sectionhead__text { margin-top: 16px; font-size: 16px; color: var(--bah-body); } .exp-sectionhead .arc-hero__divider { margin: 16px 0 32px 0; } /* --------------------------------------------------------------- * Markers over the card's image — "Ver localização" and "Exclusivo * BAH". The rest of .arc-card's design lives in concierge-archives.css; * this stays here only because, historically, not every page showing an * .arc-card loaded that file — that's no longer quite true today, but * there's no reason to change something that already works. * ------------------------------------------------------------- */ .arc-card__markers { position: absolute; bottom: 20px; right: 20px; z-index: 1; display: flex; flex-direction: row-reverse; gap: 8px; } /* At rest they're circles with just the icon; on hover/focus, they expand into a 6px-corner pill that reveals the label — the button's width follows the label's max-width instead of being animated directly (the browser doesn't animate "width: auto"), so it's the text itself that grows. */ .arc-card__pin, .arc-card__vip { display: inline-flex; align-items: center; height: 38px; min-width: 38px; padding: 0 11px; border-radius: 50%; overflow: hidden; transition: border-radius 0.25s ease, padding 0.25s ease, background-color 0.2s ease, color 0.2s ease; } .arc-card__pin svg, .arc-card__vip svg { flex: 0 0 auto; width: 16px; height: 16px; } .arc-card__markerlabel { flex: 0 0 auto; max-width: 0; opacity: 0; overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: 1px; white-space: nowrap; text-transform: uppercase; transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease; } .arc-card__pin:hover, .arc-card__pin:focus-visible, .arc-card__vip:hover, .arc-card__vip:focus-visible { border-radius: 6px; padding: 0 14px; } .arc-card__pin:hover .arc-card__markerlabel, .arc-card__pin:focus-visible .arc-card__markerlabel, .arc-card__vip:hover .arc-card__markerlabel, .arc-card__vip:focus-visible .arc-card__markerlabel { max-width: 160px; opacity: 1; margin-left: 4px; } .arc-card__pin { background: rgba(255, 255, 255, 0.92); color: var(--bah-ink); } .arc-card__pin:hover, .arc-card__pin:focus-visible { background: #FFFFFF; color: var(--bah-accent); } .arc-card__vip { background: rgba(248, 233, 218, 0.9); color: var(--bah-accent); } /* Below 1000px there's no real hover (touch screens) — the markers stay permanently in the "open" state, with the label visible, instead of relying on a :hover/:focus-visible that never fires on touch. */ @media (max-width: 1000px) { .arc-card__pin, .arc-card__vip { border-radius: 6px; padding: 0 14px; } .arc-card__pin .arc-card__markerlabel, .arc-card__vip .arc-card__markerlabel { max-width: 160px; opacity: 1; margin-left: 4px; } .arc-card__pin { background: #FFFFFF; } } /* --------------------------------------------------------------- * 6. Testimonials * ------------------------------------------------------------- */ /* * `.exp-voices__grid` always lives inside `.arc-carousel--voices * .swiper` (see single-experience.php) — it's itself the * `.swiper-wrapper`, so `width: 100%` already comes from Swiper's own * CSS, and the rest of the layout (centered grid with 4 or fewer * testimonials / 2 columns below 1200px / carousel below 768px) comes * from the `.arc-carousel--voices` rules in concierge-archives.css, * alongside the rest of the `.arc-carousel` component — the same * mechanism `.arc-categories__grid` uses there. */ .exp-voice { margin: 0; padding: 32px; background: var(--bah-surface); border: 1px solid var(--bah-border); display: flex; flex-direction: column; gap: 16px; } .exp-voice__quote-icon { flex: none; width: 28px; height: 19px; color: #E3D0BD; } .exp-voice__quote { margin: 0; font-family: var(--bah-display); font-size: 20px; font-style: normal; line-height: 1.55; color: #483D38; padding: 0; border-inline-start: 0; } .exp-voice__author { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bah-paper); } .exp-voice__name { font-size: 18px; font-weight: 700; letter-spacing: 0.4px; color: var(--bah-ink); } .exp-voice__origin { font-size: 16px; color: var(--bah-soft); } /* --------------------------------------------------------------- * 7. Feedback ("Como foi a sua experiência?") * * Card + numbered-step form fields follow the same convention as the * modal forms' `.site-modal__step`/`.site-modal__num`/`.site-modal__ * required` (concierge-modals.css), just under an `.exp-feedback__` * namespace since this section lives on the page itself, not inside a * modal. Eyebrow/title get their own dedicated classes rather than the * shared `.exp-eyebrow`/`.exp-h2` because Penpot gives this heading a * smaller, non-bold treatment than every other section title on this * page (20px/400 soft-coloured eyebrow, 38–48px/400 serif title vs. the * usual 20px/600 accent-coloured eyebrow and 38–64px/500 title). * ------------------------------------------------------------- */ .exp-feedback { padding-block: 96px; } .exp-feedback .exp-sectionhead { max-width: 620px; } .exp-feedback__eyebrow { margin: 0 0 12px !important; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: 1.25px; text-transform: uppercase; color: var(--bah-soft); } .exp-feedback__title { margin: 0; font-family: var(--bah-display); font-size: clamp(38px, calc(34.45px + 0.911vw), 48px); font-weight: 400; line-height: 1.2; text-transform: uppercase; color: var(--bah-ink); } .exp-feedback .exp-sectionhead__text { max-width: 480px; font-size: 18px; line-height: 1.5556; } .exp-feedback__card { max-width: 924px; margin: 0 auto; padding: 32px; background: var(--bah-surface); border: 1px solid var(--bah-border); border-radius: var(--bah-radius); } /* --- CF7 form --------------------------------------------------- */ .exp-feedback__card form br { display: none; } .exp-feedback__card p { margin: 0; } /* * `form > div + div`, not `.exp-feedback__step + .exp-feedback__step`: * the name/email steps are also `.exp-feedback__step` but live *inside* * `.exp-feedback__row`, so the step-to-step selector was matching there * too and pushing the email column down out of alignment with the name * column. Scoping to direct children of the form (all plain
    s; * CF7's own `.hidden-fields-container` is a
    , so it's * excluded automatically) gives every top-level block the same 24px * gap without reaching inside the row. */ .exp-feedback__card form > div + div { margin-top: 24px; } .exp-feedback__row { display: flex; gap: 24px; } .exp-feedback__step { flex: 1 1 0; } .exp-feedback__fieldhead { margin: 0 0 10px !important; font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--bah-ink); } .exp-feedback__num { margin-right: 2px; font-weight: 600; color: var(--bah-soft); } .exp-feedback__required { margin-left: 2px; font-weight: 600; color: var(--bah-accent); } .exp-feedback__card .wpcf7-form-control:not([type="hidden"]):not(.wpcf7-submit):not(.wpcf7-radio) { display: block; width: 100%; padding: 14px 16px; background: var(--bah-surface); border: 1px solid var(--bah-border); border-radius: var(--bah-radius); font-family: var(--bah-sans); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--bah-ink); } .exp-feedback__card .wpcf7-form-control::placeholder { color: #757575; } .exp-feedback__card textarea.wpcf7-form-control { min-height: 154px; resize: vertical; } .exp-feedback__card .wpcf7-form-control:focus-visible { outline: 2px solid var(--bah-accent); outline-offset: 1px; } .exp-feedback__card .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; text-transform: none; color: #B3413A; } .exp-feedback__card .wpcf7-response-output { margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--bah-border); border-radius: var(--bah-radius); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; } /* * Star rating — rendered by CF7 as [radio], values listed 5→1 in the * Form tab on purpose: with row-reverse below, that DOM order is what * lets ":hover ~" / ":has(:checked) ~" fill "this star and every star * to its left" using a plain *forward* sibling combinator (the last * value in DOM, "1", ends up the leftmost star on screen). Each label * is a 24×24 box painted with the star icon as a background image * instead of a mask (avoids relying on CSS mask-mode support). Both * states are the same color (#AA8866, --bah-accent) — only the SHAPE * differs: an evenodd outline (star_line) at rest vs. the solid star * (star_fill) on hover/checked, not a color swap. */ .exp-feedback__stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; } .exp-feedback__stars .wpcf7-list-item { margin: 0; } .exp-feedback__stars input[type="radio"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .exp-feedback__stars .wpcf7-list-item-label { display: block; width: 24px; height: 24px; overflow: hidden; text-indent: -999px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23AA8866' d='M10.92,2.86673C11.03,2.67789,11.1877,2.5212,11.3772,2.4123C11.5667,2.3034,11.7814,2.24609,12,2.24609C12.2185,2.24609,12.4333,2.3034,12.6228,2.4123C12.8123,2.5212,12.9699,2.67789,13.08,2.86673L15.875,7.66473L21.303,8.84073C21.5165,8.88713,21.7141,8.98868,21.8761,9.13526C22.0382,9.28185,22.159,9.46834,22.2264,9.67615C22.2939,9.88397,22.3058,10.1058,22.2608,10.3196C22.2158,10.5335,22.1155,10.7317,21.97,10.8947L18.27,15.0357L18.83,20.5607C18.8521,20.7783,18.8167,20.9978,18.7274,21.1974C18.6381,21.3971,18.498,21.5697,18.3211,21.6983C18.1442,21.8268,17.9367,21.9067,17.7192,21.9299C17.5018,21.9532,17.2821,21.919,17.082,21.8307L12,19.5907L6.91799,21.8307C6.7179,21.919,6.49818,21.9532,6.28074,21.9299C6.0633,21.9067,5.85577,21.8268,5.67886,21.6983C5.50195,21.5697,5.36185,21.3971,5.27255,21.1974C5.18326,20.9978,5.14789,20.7783,5.16999,20.5607L5.72999,15.0357L2.02999,10.8957C1.88421,10.7328,1.78374,10.5344,1.7386,10.3204C1.69346,10.1065,1.70523,9.88446,1.77273,9.67648C1.84023,9.46851,1.96111,9.28188,2.12329,9.13523C2.28547,8.98857,2.48329,8.88703,2.69699,8.84073L8.12499,7.66473L10.92,2.86673ZM12,4.98573L9.68699,8.95773C9.59953,9.10765,9.4818,9.23772,9.34131,9.33964C9.20082,9.44156,9.04065,9.51311,8.87099,9.54973L4.37899,10.5227L7.44099,13.9497C7.67499,14.2117,7.78798,14.5597,7.75299,14.9087L7.28999,19.4817L11.496,17.6277C11.6548,17.5578,11.8264,17.5216,12,17.5216C12.1735,17.5216,12.3452,17.5578,12.504,17.6277L16.71,19.4817L16.247,14.9087C16.2294,14.736,16.248,14.5616,16.3015,14.3965C16.3551,14.2314,16.4424,14.0792,16.558,13.9497L19.621,10.5227L15.129,9.54973C14.9593,9.51311,14.7991,9.44156,14.6587,9.33964C14.5182,9.23772,14.4004,9.10765,14.313,8.95773L12,4.98573Z'/%3E%3C/svg%3E"); cursor: pointer; transition: 200ms all ease; } .exp-feedback__stars .wpcf7-list-item:hover .wpcf7-list-item-label, .exp-feedback__stars .wpcf7-list-item:hover ~ .wpcf7-list-item .wpcf7-list-item-label, .exp-feedback__stars .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label, .exp-feedback__stars .wpcf7-list-item:has(input:checked) ~ .wpcf7-list-item .wpcf7-list-item-label { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23AA8866' d='M10.92,2.86673C11.03,2.67789,11.1877,2.5212,11.3772,2.4123C11.5667,2.3034,11.7814,2.24609,12,2.24609C12.2185,2.24609,12.4333,2.3034,12.6228,2.4123C12.8123,2.5212,12.9699,2.67789,13.08,2.86673L15.875,7.66473L21.303,8.84073C21.5165,8.88713,21.7141,8.98868,21.8761,9.13526C22.0382,9.28185,22.159,9.46834,22.2264,9.67615C22.2939,9.88397,22.3058,10.1058,22.2608,10.3196C22.2158,10.5335,22.1155,10.7317,21.97,10.8947L18.27,15.0357L18.83,20.5607C18.8521,20.7783,18.8167,20.9978,18.7274,21.1974C18.6381,21.3971,18.498,21.5697,18.3211,21.6983C18.1442,21.8268,17.9367,21.9067,17.7192,21.9299C17.5018,21.9532,17.2821,21.919,17.082,21.8307L12,19.5907L6.91799,21.8307C6.7179,21.919,6.49818,21.9532,6.28074,21.9299C6.0633,21.9067,5.85577,21.8268,5.67886,21.6983C5.50195,21.5697,5.36185,21.3971,5.27255,21.1974C5.18326,20.9978,5.14789,20.7783,5.16999,20.5607L5.72999,15.0357L2.02999,10.8957C1.88421,10.7328,1.78374,10.5344,1.7386,10.3204C1.69346,10.1065,1.70523,9.88446,1.77273,9.67648C1.84023,9.46851,1.96111,9.28188,2.12329,9.13523C2.28547,8.98857,2.48329,8.88703,2.69699,8.84073L8.12499,7.66473L10.92,2.86673Z'/%3E%3C/svg%3E"); } .exp-feedback__stars input[type="radio"]:focus-visible ~ .wpcf7-list-item-label { outline: 2px solid var(--bah-accent); outline-offset: 2px; } .exp-feedback__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--bah-paper); } .exp-feedback__hint { font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--bah-accent); } /* Mobile-only reassurance line — see the Mobile frame in Penpot; the desktop frame doesn't have it. */ .exp-feedback__note { display: none; font-size: 12px; color: var(--bah-soft); } /* * The arrow is painted on `.exp-feedback__submit-wrap` (a plain * wrapping the CF7 [submit] shortcode), not on `.wpcf7-submit` itself: * `` is a replaced element, and replaced elements don't render * `::before`/`::after` generated content in any browser — an ::after * on the button itself would silently never appear. */ .exp-feedback__submit-wrap { position: relative; display: inline-block; } .exp-feedback__card .wpcf7-submit { width: auto; padding: 14px 48px 14px 24px; background: var(--bah-dark); border: 1px solid transparent; border-radius: var(--bah-radius); font-family: var(--bah-sans); font-size: 14px; font-weight: 400; letter-spacing: 0.83px; text-transform: uppercase; color: #F9F9F9; cursor: pointer; transition: background-color 0.2s ease; } .exp-feedback__submit-wrap::after { content: ""; position: absolute; top: 50%; right: 24px; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F9F9F9'%3E%3Cpath d='M9.8,3.76L13.58,7.53C13.7,7.66,13.77,7.82,13.77,8C13.77,8.18,13.7,8.35,13.58,8.47L9.8,12.24C9.68,12.36,9.51,12.43,9.34,12.43C9.16,12.43,8.99,12.36,8.87,12.23C8.75,12.11,8.68,11.95,8.67,11.77C8.67,11.59,8.74,11.43,8.86,11.3L11.5,8.67L2.67,8.67C2.49,8.67,2.32,8.6,2.2,8.47C2.07,8.35,2,8.18,2,8C2,7.82,2.07,7.66,2.2,7.53C2.32,7.41,2.49,7.34,2.67,7.34L11.5,7.34L8.86,4.7C8.8,4.64,8.75,4.57,8.71,4.48C8.68,4.4,8.66,4.32,8.66,4.23C8.66,4.14,8.67,4.05,8.71,3.97C8.74,3.89,8.79,3.81,8.85,3.75C8.92,3.69,8.99,3.64,9.07,3.61C9.15,3.57,9.24,3.55,9.33,3.55C9.42,3.55,9.51,3.57,9.59,3.61C9.67,3.64,9.74,3.7,9.8,3.76Z'/%3E%3C/svg%3E"); } .exp-feedback__card .wpcf7-submit:hover { background: #3A2A25; } /* * CF7 always injects a `.wpcf7-spinner` right after the submit button, * `visibility: hidden` but at full width/margin (its default stylesheet's * `.wpcf7-spinner` rule) — so it silently keeps taking up space inside * `.exp-feedback__submit-wrap` even at rest, throwing off the wrapper's * shrink-wrapped width that the arrow icon's `right: 24px` depends on. * Collapsed to zero here and only given its footprint back once CF7 adds * `form.submitting` (which is also what flips its own visibility rule). */ .exp-feedback__card .wpcf7-spinner { width: 0; margin: 0; opacity: 0; } .exp-feedback__card form.submitting .wpcf7-spinner { width: 24px; margin: 0 0 0 12px; opacity: 0.75; } @media (max-width: 768px) { .exp-feedback { padding-block: 64px; } } @media (max-width: 600px) { .exp-feedback__card { padding: 48px 24px 64px; } .exp-feedback__row { flex-direction: column; gap: 24px; } .exp-feedback__footer { flex-direction: column; align-items: stretch; text-align: center; } .exp-feedback__note { display: block; } .exp-feedback__submit-wrap { align-self: stretch; } .exp-feedback__card .wpcf7-submit { width: 100%; } } /* --------------------------------------------------------------- * 8. Fale Connosco * ------------------------------------------------------------- */ .exp-cta { padding-block: 96px; border-top: 0; } .exp-cta__inner { display: grid; grid-template-columns: minmax(0, 819px) minmax(0, 669px); gap: 32px; align-items: center; } .exp-cta__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; font-size: 16px; color: var(--bah-body); } /* Second line of the CTA title (after the
    , see bah_cta_title_html() in inc/concierge-helpers.php) — highlighted, in the brand's gold color. */ .exp-cta__highlight { color: var(--bah-accent); } @media (max-width: 1180px) { .exp-cta { padding-block: 64px; } } @media (max-width: 1000px) { .exp-cta.exp-cta--dark .exp-eyebrow { text-align: center; } .exp-cta.exp-cta--dark .exp-h2 { text-align: center; } .exp-cta.exp-cta--dark .exp-cta__body p { text-align: center; } .exp-cta.exp-cta--dark .exp-btn.exp-btn--dark { margin: 0 auto; } } /* --------------------------------------------------------------- * Responsive * ------------------------------------------------------------- */ @media (max-width: 1200px) { .exp-body { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 64px; } .exp-body__col--intro { grid-column: 1 / -1; } .exp-cta__inner { grid-template-columns: 1fr; } .menu-container .menu { gap: 12px !important; } .menu-container .menu > .menu-item > a { font-size: 12px !important; } } @media (max-width: 860px) { .exp-body { grid-template-columns: 1fr; gap: 48px; } .exp-body__col--details { padding-left: 0; border-left: 0; border-top: 1px solid var(--bah-border); padding-top: 32px; } .exp-meta { grid-template-columns: 1fr 1fr; gap: 20px 0; } .exp-related, .exp-voices, .exp-cta { padding-block: 64px; } } @media (max-width: 560px) { .exp-hero { padding-top: 32px; } .exp-meta { grid-template-columns: 1fr; } .exp-meta__label { font-size: 16px; } .exp-booking { padding: 32px 20px; } .exp-btn { flex: 1 1 auto; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .exp *, .exp *::before, .exp *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }