/*
Theme Name: Elite Island Resorts
Theme URI: https://eliteislandresorts.com
Author: Story9 Agency
Author URI: https://story9.agency
Description: Quiet-luxury coastal editorial theme for Elite Island Resorts. Cormorant Garamond display + Manrope UI on an ink/sand palette with cyan accent. Classic PHP theme with theme.json design tokens, Custom Post Types for Resorts/Islands/Journal entries, and WPBakery compatibility.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: elite-island-resorts
Tags: editorial, luxury, travel, hotel
*/
/* ─────────────────────────────────────────────────────────────
Design tokens — single source of truth, mirrored in theme.json.
──────────────────────────────────────────────────────────── */
:root {
--eir-ink: #0B2540;
--eir-ink-soft: #1B3954;
--eir-deep: #08344A;
--eir-cyan: #43BCD9;
--eir-sand: #F2EBE0;
--eir-sand-soft: #FAF6EF;
--eir-sand-deep: #E8DFCE;
--eir-paper: #FBF8F2;
--eir-gold: #B89968;
--eir-coral: #E89A87;
--eir-font-display: 'Cormorant Garamond', Georgia, serif;
--eir-font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
--eir-max-w: 1440px; /* legacy inner-content cap (some templates still read this) */
--eir-canvas-w: 1320px; /* the framed page canvas — nav, content, footer all contained */
--eir-gutter-x: clamp(24px, 4vw, 64px);
--eir-nav-h: 84px; /* nav padding (24px × 2) + logo (36px). Hero/transparent-nav offset reads this. */
/* Editorial spacing scale */
--eir-s-0: 4px;
--eir-s-1: 8px;
--eir-s-2: 14px;
--eir-s-3: 22px;
--eir-s-4: 36px;
--eir-s-5: 56px;
--eir-s-6: 96px;
--eir-s-7: 140px;
}
/* ─── Reset (very light) ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--eir-sand-deep);
color: var(--eir-ink);
font-family: var(--eir-font-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Page canvas frame ──────────────────────────────────
Whole site (nav wrap, content canvas, footer) lives in a contained 1320px
canvas on a deeper sand page background. .eir-canvas is the universal
wrap opened in header.php and closed in footer.php — every page (front,
single, archive, page templates) inherits the same frame.
.eir-front is kept in the rule too so the homepage's WPBakery overflow
resets still apply at the same level. */
.eir-nav-wrap,
.eir-canvas,
.eir-front,
.eir-footer {
max-width: var(--eir-canvas-w);
width: 100%;
margin-inline: auto;
background: var(--eir-paper);
/* Containing block for absolutely-positioned children (transparent nav,
stretched rows) so they anchor to the canvas, not the viewport. */
position: relative;
/* Trim WPBakery's stretch_row negative margins to the canvas edge. */
overflow-x: clip;
}
.eir-footer { background: var(--eir-ink); }
@media (max-width: 1400px) {
.eir-nav-wrap,
.eir-canvas,
.eir-front,
.eir-footer { max-width: 100%; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* ─── Type system ────────────────────────────────────────── */
.eir-display, h1, h2, h3 {
font-family: var(--eir-font-display);
font-weight: 300;
letter-spacing: -0.015em;
line-height: 1.02;
color: var(--eir-ink);
}
h1 { font-size: clamp(56px, 9vw, 140px); }
h2 { font-size: clamp(40px, 5vw, 80px); }
h3 { font-size: clamp(28px, 3vw, 48px); }
.eir-eyebrow {
font-family: var(--eir-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--eir-ink-soft);
}
/* Cyan reads only on ink. On paper/sand the contrast is ~2.8:1 — well below
WCAG AA. Sectional overrides restore cyan where the ground is dark. */
.eir-section--ink .eir-eyebrow,
.eir-hero__eyebrow,
.eir-mega__col--image .eir-eyebrow { color: var(--eir-cyan); }
.eir-italic { font-style: italic; }
.eir-cyan { color: var(--eir-cyan); }
.eir-hairline {
display: inline-block;
width: 32px; height: 1px;
background: currentColor;
opacity: 0.45;
vertical-align: middle;
}
/* ─── Layout primitives ──────────────────────────────────── */
.eir-page { width: 100%; max-width: var(--eir-max-w); margin-inline: auto; }
.eir-section { padding: clamp(64px, 8vw, 60px) var(--eir-gutter-x); }
.eir-section--sand { background: var(--eir-sand); }
.eir-section--sand-soft{ background: var(--eir-sand-soft); }
.eir-section--ink { background: var(--eir-ink); color: var(--eir-paper); }
.eir-section--paper { background: var(--eir-paper); }
/* ─── Buttons ────────────────────────────────────────────── */
.eir-btn,
.eir-btn-primary,
.eir-btn-ghost,
.eir-btn-link {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--eir-font-sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
border: none;
padding: 14px 28px;
cursor: pointer;
transition: opacity .15s ease, background .15s ease;
}
.eir-btn-primary { background: var(--eir-ink); color: var(--eir-paper); }
.eir-btn-primary:hover { background: var(--eir-deep); }
.eir-btn-ghost {
background: transparent; color: var(--eir-ink);
border: 1px solid var(--eir-ink);
}
.eir-btn-link {
background: none; padding: 0;
font-family: var(--eir-font-display); font-style: italic;
text-transform: none; letter-spacing: 0;
font-size: 16px; color: var(--eir-cyan);
}
/* Keyboard focus rings — required for WCAG 2.4.7. Cyan reads on both paper
and ink grounds so a single ring works everywhere. */
.eir-btn-primary:focus-visible,
.eir-btn-ghost:focus-visible,
.eir-btn-link:focus-visible,
.eir-card:focus-visible,
.eir-chip:focus-visible,
.eir-journal__card:focus-visible,
.eir-nav__links a:focus-visible {
outline: 2px solid var(--eir-cyan);
outline-offset: 3px;
}
/* ─── Top utility row ─────────────────────────────────────
Slim dark-blue band above the main nav: Offers + Concierge links, white
text, right-aligned. Sits inside the canvas wrap so it shares the page
frame. Hidden on narrow viewports — links surface in the mobile drawer. */
.eir-nav-top {
background: var(--eir-ink);
color: var(--eir-paper);
padding: 8px var(--eir-gutter-x);
display: flex; align-items: center; justify-content: flex-end;
}
.eir-nav-top__links {
display: flex; gap: 28px;
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 500;
}
.eir-nav-top__link {
color: var(--eir-paper);
text-decoration: none;
opacity: 0.85;
transition: color .15s ease, opacity .15s ease;
}
.eir-nav-top__link:hover { color: var(--eir-cyan); opacity: 1; }
@media (max-width: 700px) {
.eir-nav-top { display: none; }
}
/* ─── Nav ────────────────────────────────────────────────── */
.eir-nav {
padding: 24px var(--eir-gutter-x);
display: flex; align-items: center; justify-content: space-between;
background: var(--eir-paper);
border-bottom: 1px solid rgba(11, 37, 64, 0.06);
/* Sticky now belongs to the wrap, not the nav — see .eir-nav-wrap below. */
position: relative;
z-index: 50;
transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* The whole nav-wrap (utility row + main nav) sticks together as the user scrolls. */
.eir-nav-wrap {
position: sticky;
top: 0;
z-index: 50;
}
/* Transparent-over-hero variant: nav floats over the hero image and only
solidifies once the user scrolls past it. Enabled via body class set
by the Layout theme option (eir_nav_style = 'transparent'). */
body.eir-nav--not-sticky .eir-nav { position: static; }
body.eir-booking-off .eir-booking { display: none; }
body.eir-nav-transparent .eir-nav-wrap { background: transparent; }
body.eir-nav-transparent .eir-nav {
background: transparent;
border-bottom-color: transparent;
color: var(--eir-paper);
}
body.eir-nav-transparent .eir-nav .eir-nav__links { color: var(--eir-paper); }
body.eir-nav-transparent .eir-nav .eir-nav__logo { filter: brightness(0) invert(1); }
body.eir-nav-transparent.eir-scrolled .eir-nav {
background: var(--eir-paper);
border-bottom-color: rgba(11,37,64,0.06);
color: var(--eir-ink);
box-shadow: 0 1px 8px rgba(11,37,64,0.05);
}
body.eir-nav-transparent.eir-scrolled .eir-nav .eir-nav__links { color: var(--eir-ink); }
body.eir-nav-transparent.eir-scrolled .eir-nav .eir-nav__logo { filter: none; }
body.eir-nav-transparent .eir-hero { margin-top: calc(-1 * var(--eir-nav-h)); padding-top: var(--eir-nav-h); } /* let hero start under the floating nav */
/* "Ink" nav variant — fully dark. */
body.eir-nav-ink .eir-nav { background: var(--eir-ink); border-bottom-color: rgba(251,248,242,0.08); color: var(--eir-paper); }
body.eir-nav-ink .eir-nav .eir-nav__links { color: var(--eir-paper); }
body.eir-nav-ink .eir-nav .eir-nav__logo { filter: brightness(0) invert(1); }
.eir-nav__logo { height: 36px; width: auto; }
.eir-nav__links {
display: flex; gap: 36px;
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.eir-nav__links a:hover { color: var(--eir-cyan); }
.eir-nav__reserve { padding: 10px 22px; }
@media (max-width: 900px) {
.eir-nav__links { display: none; }
}
/* ─── Hero ───────────────────────────────────────────────── */
.eir-hero {
position: relative;
/* Match the video's 16:9 aspect ratio at full canvas width. min-height
keeps the hero useable on very wide canvases; max-height caps it on
short viewports so the hero never overflows the visible window. */
aspect-ratio: 16 / 9;
min-height: 560px;
max-height: 88vh;
display: flex; align-items: stretch;
color: var(--eir-paper);
overflow: hidden;
background: var(--eir-ink);
}
.eir-hero__image {
position: absolute; inset: 0;
background-size: cover; background-position: center;
z-index: 0;
}
/* Background video — sits above the still poster but BELOW the gradient
overlay (the overlay lives on .eir-hero::after at z-index 2). */
.eir-hero__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
pointer-events: none;
border: 0;
}
.eir-hero__video--vimeo iframe {
position: absolute; top: 50%; left: 50%;
/* Vimeo background-mode iframe is letterboxed 16:9. Scale + centre to
cover-fill the hero on any aspect ratio. */
width: 177.78vh;
height: 56.25vw;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
/* Gradient overlay — lives on .eir-hero itself so it sits above poster + video.
Top holds enough weight for eyebrow + headline contrast; bottom feathers off
to near-transparent so the resort logos in the video remain legible.
Each hero can override --eir-hero-mask-strength inline (Customizer for the
archive heroes, Carbon Field for the per-resort and per-island heroes) to
dial the mask up or down for its own photo. */
.eir-hero::after {
content: ''; position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(180deg,
rgb(11 37 64 / calc(0.55 * var(--eir-hero-mask-strength, 1))) 0%,
rgb(11 37 64 / calc(0.38 * var(--eir-hero-mask-strength, 1))) 28%,
rgb(11 37 64 / calc(0.26 * var(--eir-hero-mask-strength, 1))) 55%,
rgb(11 37 64 / calc(0.10 * var(--eir-hero-mask-strength, 1))) 88%,
rgb(11 37 64 / calc(0.04 * var(--eir-hero-mask-strength, 1))) 100%);
}
/* Solid mask variant — uniform dark wash, no gradient feather. Strength
still applies, so the base opacity scales with --eir-hero-mask-strength. */
.eir-hero--mask-solid::after {
background: rgb(11 37 64 / calc(0.55 * var(--eir-hero-mask-strength, 1)));
}
/* Asymmetric padding: lighter top (72px) + heavier bottom (clamp ~12vh) lifts the
bottom cluster off the floor, so headline+CTAs sit at ~60% from top under
justify-content: space-between. Short headlines no longer feel marooned. */
.eir-hero__inner {
position: relative; z-index: 3; /* above gradient overlay (::after z-2) */
padding: 56px var(--eir-gutter-x) clamp(72px, 9vh, 120px);
width: 100%;
display: flex; flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* Collection (resorts overview) hero — push the title/deck cluster higher
up in the frame than the homepage hero. Bumping the inner's bottom
padding lifts the bottom cluster off the floor. */
.eir-collection-hero .eir-hero__inner {
padding-bottom: clamp(160px, 26vh, 320px);
}
.eir-hero__rule {
width: 48px; height: 1px; background: var(--eir-cyan); margin-bottom: 18px;
}
.eir-hero__title {
color: var(--eir-paper);
max-width: 980px;
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(52px, 7.6vw, 116px);
line-height: 1.0;
letter-spacing: -0.018em;
margin: 12px 0 0;
}
.eir-hero__deck { margin-top: 28px; max-width: 540px; font-size: 18px; line-height: 1.55; color: rgba(251,248,242,0.92); }
.eir-hero__top {
display: flex; justify-content: space-between; align-items: flex-start;
width: 100%; gap: 24px; flex-wrap: wrap;
}
.eir-hero__top-lead { display: flex; flex-direction: column; align-items: flex-start; }
.eir-hero__eyebrow { color: var(--eir-cyan); }
.eir-hero__badge { color: var(--eir-paper); opacity: 0.7; max-width: 240px; text-align: right; align-self: flex-start; }
.eir-hero__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
/* Title + deck confined to the left half of the hero so they don't overlap
the booking strip (which docks right) or the right side of the video. */
.eir-hero__title { max-width: min(50%, 620px); }
.eir-hero__deck { max-width: min(50%, 520px); }
@media (max-width: 900px) {
.eir-hero__title,
.eir-hero__deck { max-width: 100%; }
}
/* Booking strip docks to the right edge of the hero (mirroring the inner
gutter padding), so the video's bottom-left logos stay clear.
Width: covers from the right edge to at least the hero midline — clamped
so it doesn't get oversized on very wide canvases or too thin on narrow. */
.eir-hero__booking {
align-self: flex-end;
margin-top: 24px;
width: clamp(520px, 55%, 680px);
}
@media (max-width: 700px) {
.eir-hero__booking { align-self: stretch; width: 100%; }
}
.eir-hero__cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.eir-btn-primary--on-dark { background: var(--eir-paper); color: var(--eir-ink); }
.eir-btn-primary--on-dark:hover { background: #fff; }
.eir-btn-ghost--on-dark { background: transparent; color: var(--eir-paper); border-color: var(--eir-paper); }
.eir-btn-ghost--on-dark:hover { background: rgba(251,248,242,0.08); }
/* ── Booking strip — sits inside the hero (resort-only handoff for Phase 1) ── */
.eir-booking {
background: var(--eir-paper);
display: grid;
grid-template-columns: 1fr auto; /* default: minimal — resort + CTA */
align-items: stretch;
position: relative;
z-index: 40;
font-family: var(--eir-font-sans);
overflow: visible;
box-shadow: 0 12px 36px rgba(11,37,64,0.18);
}
/* Fuller layout (resort / dates / guests / CTA) — kept for when the engine
handoff supports param passing. Activate by adding the `--full` modifier. */
.eir-booking--full { grid-template-columns: 1.2fr 1.6fr 1.2fr auto; }
/* Lift the booking row's WPBakery wrapper out of the next row's flow too. */
.eir-front .vc_row:has(.eir-booking) { position: relative; z-index: 40; overflow: visible; }
.eir-front .vc_row:has(.eir-booking) .wpb_column,
.eir-front .vc_row:has(.eir-booking) .vc_column-inner { overflow: visible; }
.eir-booking__field {
padding: 18px 28px 18px;
border-right: 1px solid rgba(11,37,64,0.08);
display: flex; flex-direction: column; justify-content: center; gap: 6px;
position: relative;
}
.eir-booking__label {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-ink-soft);
display: flex; gap: 32px;
}
.eir-booking__label > span { flex: 1; }
/* Resort select */
.eir-booking__select {
font-family: var(--eir-font-display);
font-size: 18px;
background: transparent;
border: none; outline: none;
color: var(--eir-ink);
padding: 0; cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right center;
padding-right: 18px;
}
.eir-booking__select:focus { outline: 1px solid var(--eir-cyan); outline-offset: 4px; }
/* Date range input */
.eir-booking__dates {
font-family: var(--eir-font-display);
font-size: 18px;
background: transparent;
border: none; outline: none;
color: var(--eir-ink);
padding: 0; cursor: pointer;
width: 100%;
}
.eir-booking__dates::placeholder { color: var(--eir-ink-soft); opacity: 0.7; font-style: italic; }
.eir-booking__dates:focus { outline: 1px solid var(--eir-cyan); outline-offset: 4px; }
/* Guests trigger button + popover */
.eir-booking__guests-trigger {
background: transparent; border: none; padding: 0;
font-family: var(--eir-font-display); font-size: 18px;
color: var(--eir-ink); text-align: left; cursor: pointer;
}
.eir-booking__guests-summary { display: inline-block; }
.eir-booking__field--guests { position: relative; z-index: 50; }
.eir-booking__field--guests:has(.eir-booking__guests-pop:not([hidden])) { z-index: 200; }
.eir-booking__guests-pop {
position: absolute;
top: calc(100% + 1px); left: 0;
background: var(--eir-paper);
border: 1px solid rgba(11,37,64,0.12);
box-shadow: 0 8px 36px rgba(11,37,64,0.18);
padding: 18px 22px;
z-index: 200; /* above every other section in the page */
min-width: 340px;
max-width: 380px;
}
/* When the guests field sits at the right edge of the row, flip the popover. */
.eir-booking__field--guests:last-of-type .eir-booking__guests-pop,
.eir-booking__field--guests:nth-last-of-type(2) .eir-booking__guests-pop {
left: auto; right: 0;
}
.eir-booking__counter {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(11,37,64,0.07);
}
.eir-booking__counter:last-of-type { border-bottom: none; }
.eir-booking__counter-label strong {
font-family: var(--eir-font-display);
font-weight: 500; font-size: 17px; display: block; color: var(--eir-ink);
}
.eir-booking__counter-label small {
font-size: 11px; letter-spacing: 0.05em; color: var(--eir-ink-soft); opacity: 0.7;
}
.eir-booking__counter-controls { display: flex; align-items: center; gap: 14px; }
.eir-booking__counter-btn {
width: 30px; height: 30px;
background: transparent;
border: 1px solid rgba(11,37,64,0.18);
color: var(--eir-ink);
font-size: 16px; line-height: 1;
cursor: pointer; border-radius: 2px;
display: flex; align-items: center; justify-content: center;
}
.eir-booking__counter-btn:hover:not(:disabled) { background: var(--eir-ink); color: var(--eir-paper); border-color: var(--eir-ink); }
.eir-booking__counter-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.eir-booking__counter-value { font-family: var(--eir-font-display); font-size: 18px; min-width: 24px; text-align: center; }
.eir-booking__guests-foot { padding-top: 14px; display: flex; justify-content: flex-end; }
.eir-booking__guests-done {
background: var(--eir-ink); color: var(--eir-paper);
border: none; padding: 10px 22px;
font-family: var(--eir-font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
cursor: pointer;
}
.eir-booking__field:last-of-type { border-right: none; }
.eir-booking__cta {
background: var(--eir-ink); color: var(--eir-paper); border: none;
padding: 0 44px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
font-family: var(--eir-font-sans); font-weight: 500;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
transition: background .15s;
cursor: pointer;
}
.eir-booking__cta:hover { background: var(--eir-deep); color: var(--eir-paper); }
@media (max-width: 900px) {
.eir-booking { grid-template-columns: 1fr; }
.eir-booking__field { border-right: none; border-bottom: 1px solid rgba(11,37,64,0.08); }
.eir-booking__cta { padding: 22px; }
.eir-booking__guests-pop { position: relative; top: 8px; box-shadow: none; border: 1px solid rgba(11,37,64,0.08); }
}
/* ── Flatpickr brand overrides ────────────────────────────────────── */
.flatpickr-calendar {
font-family: var(--eir-font-sans);
border: 1px solid rgba(11,37,64,0.12);
border-radius: 0;
box-shadow: 0 6px 30px rgba(11,37,64,0.12);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
background: var(--eir-ink) !important;
border-color: var(--eir-ink) !important;
color: var(--eir-paper) !important;
border-radius: 0 !important;
}
.flatpickr-day.inRange {
background: var(--eir-sand) !important;
border-color: var(--eir-sand) !important;
color: var(--eir-ink) !important;
box-shadow: -5px 0 0 var(--eir-sand), 5px 0 0 var(--eir-sand) !important;
}
.flatpickr-day.today { border-color: var(--eir-cyan); }
.flatpickr-day.today:hover { background: var(--eir-cyan); border-color: var(--eir-cyan); color: var(--eir-ink); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays {
color: var(--eir-ink);
}
.flatpickr-day { color: var(--eir-ink); font-family: var(--eir-font-display); font-size: 14px; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(11,37,64,0.25); }
/* ─── Manifesto ──────────────────────────────────────────── */
.eir-manifesto { padding: var(--eir-s-7) var(--eir-gutter-x) var(--eir-s-6); }
.eir-manifesto__quote {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(40px, 5vw, 88px);
line-height: 1.06;
max-width: 1000px;
letter-spacing: -0.015em;
}
/* ─── Collection grid ────────────────────────────────────── */
.eir-collection {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 0 var(--eir-gutter-x) var(--eir-s-7);
}
/* Cards are flat editorial — photo at top, name + small meta on a paper
panel beneath. On hover the whole card lifts gently with a subtle shadow. */
.eir-card {
background: var(--eir-paper);
display: flex; flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform .28s ease, box-shadow .28s ease;
box-shadow: 0 1px 0 rgba(11,37,64,0.04);
}
.eir-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(11,37,64,0.10), 0 2px 6px rgba(11,37,64,0.06);
}
/* Vertical row spacing — gives breathing room between the top row and bottom
row of cards inside the sand band. */
.eir-card { margin-bottom: 18px; }
@media (max-width: 1100px) { .eir-card { margin-bottom: 12px; } }
.eir-card__image {
aspect-ratio: 3 / 2;
background-size: cover; background-position: center;
transition: opacity .25s ease;
}
.eir-card:hover .eir-card__image { opacity: 0.96; }
/* Card body — paper panel under the image with breathing room below the
meta line and a left inset so the text hangs in from the image edge above. */
.eir-card__body {
background: var(--eir-paper);
padding: 22px 20px 32px;
display: flex; flex-direction: column; gap: 6px;
}
.eir-card__name {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: 30px;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--eir-ink);
}
.eir-card__meta {
font-family: var(--eir-font-display);
font-style: italic;
font-size: 15px;
line-height: 1.4;
color: var(--eir-ink-soft);
opacity: 0.85;
}
.eir-card__island { font-style: normal; font-family: var(--eir-font-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eir-ink-soft); opacity: 0.7; }
.eir-card__sep { margin: 0 8px; opacity: 0.4; font-style: normal; }
.eir-card__summary {
font-size: 14px; line-height: 1.55; color: var(--eir-ink-soft);
margin: 6px 0 0; max-width: 38ch;
}
/* On-dark variant — used inside .eir-section--ink card grids. */
.eir-card--on-dark .eir-card__name { color: var(--eir-paper); }
.eir-card--on-dark .eir-card__meta { color: rgba(251,248,242,0.78); }
.eir-card--on-dark .eir-card__island { color: rgba(251,248,242,0.6); }
@media (max-width: 1100px) { .eir-collection { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .eir-collection { grid-template-columns: 1fr; } }
/* ─── Islands strip ──────────────────────────────────────── */
.eir-islands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0;
}
.eir-island {
position: relative; height: 520px; overflow: hidden;
background-size: cover; background-position: center;
color: var(--eir-paper);
display: flex; align-items: flex-end;
transition: transform .28s ease, box-shadow .28s ease;
}
.eir-island:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.18);
}
.eir-island::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,52,74,0) 30%, rgba(8,52,74,0.78) 100%);
}
.eir-island__body {
position: relative; z-index: 2;
padding: 36px;
}
.eir-island__name { font-family: var(--eir-font-display); font-size: 44px; font-weight: 300; }
.eir-island__desc { margin-top: 12px; font-size: 14px; line-height: 1.6; max-width: 320px; opacity: 0.92; }
@media (max-width: 1000px) { .eir-islands { grid-template-columns: 1fr; } }
/* ─── Preferred rates — image-left / copy-right editorial split ──────────
Replaces the legacy full-bleed photo+gradient banner. Two-column block,
image as a block on the left, copy panel on a clean sand-soft ground. */
.eir-preferred {
background: var(--eir-sand-soft);
color: var(--eir-ink);
}
.eir-preferred--split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: 560px;
}
.eir-preferred__media {
background-size: cover; background-position: center;
min-height: 320px;
}
.eir-preferred__panel {
display: flex; align-items: center;
padding: var(--eir-s-6) clamp(32px, 4vw, 72px);
}
.eir-preferred__inner { max-width: 540px; }
.eir-preferred__title {
font-family: var(--eir-font-display);
font-weight: 300; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.04;
letter-spacing: -0.015em;
color: var(--eir-ink);
}
.eir-preferred__title em { font-style: italic; color: var(--eir-cyan); }
.eir-preferred__deck { margin-top: 18px; max-width: 480px; font-size: 15.5px; line-height: 1.6; color: var(--eir-ink-soft); }
.eir-preferred__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.eir-preferred__cta .eir-btn-primary { background: var(--eir-ink); color: var(--eir-paper); }
.eir-preferred__cta .eir-btn-ghost { color: var(--eir-ink); border-color: var(--eir-ink); }
@media (max-width: 900px) {
.eir-preferred--split { grid-template-columns: 1fr; }
.eir-preferred__media { aspect-ratio: 16 / 10; min-height: 280px; }
.eir-preferred__panel { padding: var(--eir-s-5) var(--eir-gutter-x); }
}
/* ─── Journal ──────────────────────────────────────────────
Cards mirror the resort-card pattern: photo + paper body + hover lift. */
.eir-journal {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 0 var(--eir-gutter-x) var(--eir-s-7);
}
.eir-journal__card {
display: flex; flex-direction: column;
background: var(--eir-paper);
color: inherit;
text-decoration: none;
transition: transform .28s ease, box-shadow .28s ease;
box-shadow: 0 1px 0 rgba(11,37,64,0.04);
}
.eir-journal__card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(11,37,64,0.10), 0 2px 6px rgba(11,37,64,0.06);
}
.eir-journal__img {
height: 280px;
background-size: cover; background-position: center;
transition: opacity .25s ease;
}
.eir-journal__card:hover .eir-journal__img { opacity: 0.96; }
.eir-journal__body {
background: var(--eir-paper);
padding: 22px 20px 32px;
display: flex; flex-direction: column; gap: 10px;
}
.eir-journal__kicker { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eir-cyan); }
.eir-journal__title { font-family: var(--eir-font-display); font-size: 26px; line-height: 1.15; margin: 0; }
.eir-journal__read { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eir-ink-soft); opacity: 0.7; }
@media (max-width: 1000px) { .eir-journal { grid-template-columns: 1fr; } }
/* ─── Concierge ──────────────────────────────────────────────────────
Editorial split on a photo + soft ink overlay — the image gives the
section its own atmosphere (and visually separates it from the footer
below) while the overlay keeps the headline + form readable. */
.eir-concierge {
position: relative;
overflow: hidden;
padding: var(--eir-s-7) var(--eir-gutter-x);
background-color: var(--eir-ink);
background-size: cover;
background-position: center;
color: var(--eir-paper);
}
.eir-concierge::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(11,37,64,0.78) 0%,
rgba(11,37,64,0.62) 40%,
rgba(11,37,64,0.72) 100%);
pointer-events: none;
}
.eir-concierge__grid {
position: relative;
z-index: 1;
display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start;
}
.eir-concierge__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(44px, 4.4vw, 72px);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--eir-paper);
}
.eir-concierge__title em { font-style: italic; color: var(--eir-cyan); }
/* Eyebrows inside the concierge band default to cyan (the section sits on
ink). The --paper modifier flips a specific eyebrow to paper white when
we want it to differ — e.g. "Prefer to write?". */
.eir-concierge .eir-eyebrow { color: var(--eir-cyan); }
.eir-concierge__eyebrow--paper { color: var(--eir-paper) !important; }
.eir-concierge__deck {
max-width: 540px;
font-size: 15.5px;
line-height: 1.6;
color: rgba(251,248,242,0.82);
}
.eir-concierge__contact {
display: flex; flex-direction: column;
gap: 28px;
padding-top: 8px;
}
.eir-concierge__phone {
display: block;
font-family: var(--eir-font-display);
font-weight: 300;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--eir-paper);
margin-top: 10px;
text-decoration: none;
}
.eir-concierge__phone:hover { color: var(--eir-cyan); }
.eir-concierge__hours {
margin-top: 8px;
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-paper);
}
.eir-concierge__rule { height: 1px; background: rgba(251,248,242,0.14); }
.eir-concierge__email {
display: block;
margin-top: 10px;
font-family: var(--eir-font-display);
font-style: italic;
font-size: 22px;
color: var(--eir-cyan);
border-bottom: 1px solid rgba(67,188,217,0.5);
padding-bottom: 4px;
width: fit-content;
}
.eir-concierge__email:hover { color: var(--eir-paper); border-bottom-color: var(--eir-paper); }
@media (max-width: 900px) {
.eir-concierge__grid { grid-template-columns: 1fr; gap: 36px; }
}
/* ─── Footer ─────────────────────────────────────────────── */
.eir-footer { background: var(--eir-ink); color: var(--eir-paper); }
.eir-footer__newsletter {
padding: 88px var(--eir-gutter-x) 80px;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center;
border-bottom: 1px solid rgba(251,248,242,0.094);
}
.eir-footer__letter-title { font-family: var(--eir-font-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.06; font-weight: 300; margin-top: 18px; letter-spacing: -0.015em; }
.eir-footer__letter-deck { margin-top: 18px; font-size: 15px; opacity: 0.7; line-height: 1.55; max-width: 520px; }
.eir-footer__form { display: flex; align-items: stretch; border: 1px solid rgba(251,248,242,0.25); }
.eir-footer__email {
flex: 1; padding: 20px 22px;
background: transparent; border: none; outline: none;
color: var(--eir-paper); font-family: var(--eir-font-display); font-size: 18px; font-style: italic;
}
.eir-footer__email::placeholder { color: rgba(251,248,242,0.5); }
.eir-footer__email:focus { outline: 1px solid var(--eir-cyan); outline-offset: -2px; }
.eir-footer__submit { background: var(--eir-paper); color: var(--eir-ink); border: none; padding: 0 28px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.eir-footer__form-disc { margin-top: 14px; font-size: 11px; letter-spacing: 0.06em; opacity: 0.55; }
.eir-footer__cols {
padding: 72px var(--eir-gutter-x) 56px;
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 48px;
}
.eir-footer__col-title { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eir-cyan); }
.eir-footer__col-list { margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eir-footer__col-list li { font-family: var(--eir-font-display); font-size: 17px; opacity: 0.9; list-style: none; }
.eir-footer__manifesto { margin-top: 24px; font-family: var(--eir-font-display); font-style: italic; font-size: 20px; max-width: 320px; line-height: 1.35; opacity: 0.95; }
.eir-footer__social { margin-top: 32px; display: flex; gap: 14px; }
.eir-footer__social-pill {
width: 36px; height: 36px; border: 1px solid rgba(251,248,242,0.25); border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; letter-spacing: 0.1em; opacity: 0.9;
}
.eir-footer__trust {
padding: 28px var(--eir-gutter-x);
border-top: 1px solid rgba(251,248,242,0.094);
display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.eir-footer__trust-row { display: flex; gap: 28px; align-items: center; }
.eir-footer__trust-item { border-left: 1px solid rgba(251,248,242,0.145); padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.eir-footer__trust-name { font-family: var(--eir-font-display); font-size: 16px; }
.eir-footer__trust-meta { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; margin-top: 2px; }
/* Trust logos — single-colour SVGs tinted white via filter, so any colour
logo drops in and renders consistently. When the logo loads, the plain-text
name below it is hidden (the logo IS the name). The meta line stays. */
.eir-footer__trust-logo {
height: 28px; width: auto; max-width: 110px;
display: block;
filter: brightness(0) invert(1);
opacity: 0.92;
object-fit: contain;
object-position: left center;
}
.eir-footer__trust-item:has(.eir-footer__trust-logo:not([style*="display: none"])) .eir-footer__trust-name { display: none; }
.eir-footer__carbon { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.eir-footer__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--eir-cyan); }
.eir-footer__legal {
background: var(--eir-deep);
padding: 24px var(--eir-gutter-x);
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7;
}
.eir-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 1100px) {
.eir-footer__newsletter { grid-template-columns: 1fr; gap: 36px; }
.eir-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.eir-footer__cols { grid-template-columns: 1fr; }
}
/* ─── Stats bar (4-up) ───────────────────────────────────── */
.eir-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(11,37,64,0.08);
border-bottom: 1px solid rgba(11,37,64,0.08);
margin: 0 var(--eir-gutter-x);
}
.eir-stats__item {
padding: 32px 28px;
border-right: 1px solid rgba(11,37,64,0.08);
display: flex; flex-direction: column; gap: 6px;
}
.eir-stats__item:last-child { border-right: none; }
.eir-stats__value {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: 56px;
line-height: 1;
color: var(--eir-ink);
letter-spacing: -0.01em;
}
.eir-stats__label {
font-family: var(--eir-font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--eir-ink-soft);
}
.eir-stats--on-dark { border-color: rgba(251,248,242,0.12); }
.eir-stats--on-dark .eir-stats__item { border-color: rgba(251,248,242,0.12); }
.eir-stats--on-dark .eir-stats__value { color: var(--eir-paper); }
.eir-stats--on-dark .eir-stats__label { color: var(--eir-paper); opacity: 0.7; }
@media (max-width: 900px) {
.eir-stats { grid-template-columns: 1fr 1fr; }
.eir-stats__item:nth-child(2) { border-right: none; }
}
/* ─── Three experiences (navy band) ───────────────────────
Editorial signature-experience band — sits on ink, three tall portrait
cards. Restrained: number numeral in the top-left, italic display heading,
single line of caption. No buttons, no chrome. */
.eir-three-experiences {
padding: 0 var(--eir-gutter-x);
color: var(--eir-paper);
}
.eir-three-experiences__head {
max-width: 720px;
margin: 0 0 56px;
}
.eir-three-experiences__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(36px, 4.4vw, 72px);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--eir-paper);
}
.eir-three-experiences__title em { font-style: italic; color: var(--eir-cyan); }
.eir-three-experiences__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.eir-three-experience {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.eir-three-experience__media {
position: relative;
aspect-ratio: 3 / 4;
background-size: cover; background-position: center;
background-color: var(--eir-deep);
transition: opacity .25s ease;
}
.eir-three-experience:hover .eir-three-experience__media { opacity: 0.9; }
.eir-three-experience__number {
position: absolute;
top: 20px; left: 20px;
font-family: var(--eir-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
color: var(--eir-paper);
opacity: 0.7;
}
.eir-three-experience__body {
padding: 22px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.eir-three-experience__heading {
font-family: var(--eir-font-display);
font-weight: 300;
font-style: italic;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--eir-paper);
margin: 0;
}
.eir-three-experience__caption {
font-size: 14.5px;
line-height: 1.55;
color: rgba(251,248,242,0.75);
margin: 0;
max-width: 36ch;
}
@media (max-width: 1000px) {
.eir-three-experiences__grid { grid-template-columns: 1fr; gap: 32px; }
.eir-three-experience__media { aspect-ratio: 16 / 10; }
}
/* ─── Manifesto split (2-col) ──────────────────────────────
No inline padding — the parent vc_column-inner already supplies the
--eir-gutter-x. Doubling it pushed the block further right than the
section-header rows above and below. */
.eir-manifesto-split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 96px;
align-items: start;
}
.eir-manifesto-split__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(28px, 3.2vw, 52px);
line-height: 1.08;
letter-spacing: -0.012em;
}
.eir-manifesto-split__body {
font-size: 17px;
line-height: 1.6;
color: var(--eir-ink-soft);
max-width: 520px;
}
.eir-manifesto-split__title em { font-style: italic; color: var(--eir-cyan); }
/* Body em — italic+cyan at small sizes reads thin and low-contrast. Keep
italic but ramp the weight so it pops without losing weight. */
.eir-manifesto-split__body em {
font-style: italic;
font-weight: 700;
color: var(--eir-cyan);
}
@media (max-width: 900px) {
.eir-manifesto-split { grid-template-columns: 1fr; gap: 32px; }
}
/* ─── Preferred Rates amenity grid ─────────────────────────
Default: light ground (used inside the new preferred-rates split).
`--on-dark` modifier flips the borders + label colour for use over ink. */
.eir-amenities {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin-top: 32px;
max-width: 520px;
border-top: 1px solid rgba(11,37,64,0.12);
}
.eir-amenity {
padding: 18px 22px 18px 0;
border-bottom: 1px solid rgba(11,37,64,0.12);
}
.eir-amenity:nth-child(odd) {
border-right: 1px solid rgba(11,37,64,0.12);
padding-right: 22px;
}
.eir-amenity:nth-child(even) {
padding-left: 22px;
}
.eir-amenity__label {
font-family: var(--eir-font-sans);
font-size: 10px; font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--eir-ink-soft);
opacity: 0.75;
margin-bottom: 6px;
}
.eir-amenity__value {
font-family: var(--eir-font-display);
font-style: italic;
font-size: 18px;
line-height: 1.3;
color: var(--eir-ink);
}
.eir-amenities--on-dark { border-top-color: rgba(251,248,242,0.18); color: var(--eir-paper); }
.eir-amenities--on-dark .eir-amenity { border-bottom-color: rgba(251,248,242,0.18); }
.eir-amenities--on-dark .eir-amenity:nth-child(odd) { border-right-color: rgba(251,248,242,0.18); }
.eir-amenities--on-dark .eir-amenity__label { color: var(--eir-paper); opacity: 0.7; }
.eir-amenities--on-dark .eir-amenity__value { color: var(--eir-paper); }
@media (max-width: 700px) {
.eir-amenities { grid-template-columns: 1fr; }
.eir-amenity:nth-child(odd) { border-right: none; padding-right: 0; }
.eir-amenity:nth-child(even) { padding-left: 0; }
}
/* ─── WPBakery integration ───────────────────────────────── */
/* Cards used inside WPBakery vc_row/vc_column structures. Mirror the same
visual treatment they have inside .eir-collection, but standalone. */
.wpb_column .eir-card,
.vc_column-inner .eir-card {
width: 100%;
text-decoration: none;
color: inherit;
}
.wpb_column .eir-journal__card,
.vc_column-inner .eir-journal__card {
text-decoration: none; color: inherit;
}
.wpb_column .eir-island,
.vc_column-inner .eir-island {
display: flex;
align-items: flex-end;
height: 520px;
text-decoration: none;
color: var(--eir-paper);
}
/* WPBakery applies default `margin-left: -15px; margin-right: -15px` to every
vc_row so columns line up with its grid system. We don't use that grid —
reset edge margins so rows fill .eir-front edge-to-edge. */
.eir-front .vc_row {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
/* Full-bleed (stretched) rows: zero the column-inner padding so the inner
section (.eir-hero / .eir-islands / etc.) sits edge-to-edge. The canvas
frame caps the row width — no need for the legacy viewport-stretch trick. */
.eir-front .vc_row[data-vc-full-width] > .wpb_column > .vc_column-inner {
padding: 0 !important;
}
.eir-front .vc_row.eir-flush > .wpb_column > .vc_column-inner,
.eir-front .vc_row[data-vc-full-width] > .wpb_column > .vc_column-inner {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Card row gap: when a flush row contains resort cards or island tiles,
indent the row by (gutter - 9px) and push 9px of padding into each column.
Net effect — outer column edges align with section-header text (gutter
from canvas edge) AND interior columns have an 18px gap between items.
For island tiles inside the ink band, the row also takes vertical padding
so the navy shows above and below the tiles. */
.eir-front .vc_row.eir-flush:has(.eir-card),
.eir-front .vc_row.eir-flush:has(.eir-island),
.eir-front .vc_row.eir-flush:has(.eir-journal__card) {
padding-left: calc(var(--eir-gutter-x) - 9px);
padding-right: calc(var(--eir-gutter-x) - 9px);
}
.eir-front .vc_row.eir-flush:has(.eir-card) > .wpb_column > .vc_column-inner,
.eir-front .vc_row.eir-flush:has(.eir-island) > .wpb_column > .vc_column-inner,
.eir-front .vc_row.eir-flush:has(.eir-journal__card) > .wpb_column > .vc_column-inner {
padding-left: 9px !important;
padding-right: 9px !important;
}
/* Island-tile band: also pad top/bottom so the navy shows around all four
edges, and trim the tile height a touch so the band reads as a unit. */
.eir-front .vc_row.eir-flush:has(.eir-island) {
padding-bottom: var(--eir-s-6);
}
.eir-front .vc_row.eir-flush:has(.eir-island) > .wpb_column > .vc_column-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Coloured section backgrounds fill the full canvas width. */
.eir-front .vc_row.eir-section--paper,
.eir-front .vc_row.eir-section--sand,
.eir-front .vc_row.eir-section--sand-soft,
.eir-front .vc_row.eir-section--ink {
width: 100%;
margin-inline: 0;
padding-inline: 0;
}
/* Inner column gutters on coloured sections: text-margin padding (gutter)
unless the row is flush (then the column-inner zero-padding rule wins). */
.eir-front .vc_row.eir-section--paper > .wpb_column > .vc_column-inner,
.eir-front .vc_row.eir-section--sand > .wpb_column > .vc_column-inner,
.eir-front .vc_row.eir-section--sand-soft > .wpb_column > .vc_column-inner,
.eir-front .vc_row.eir-section--ink > .wpb_column > .vc_column-inner {
padding-left: var(--eir-gutter-x);
padding-right: var(--eir-gutter-x);
}
/* Override WPBakery's stretch_row JS — it sets inline width/left/margin-left
on stretched rows that anchor them to the viewport. Inside the canvas
frame we want every row to fill the canvas, not the viewport.
Box-sizing and overflow-x:clip on .eir-front catch any negative-margin
residue that slips past these resets. */
.eir-front .vc_row[data-vc-full-width],
.eir-front .vc_row[data-vc-stretch-content] {
position: relative !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Same defensive reset for ALL .vc_row inside .eir-front — guards against
any non-stretch row picking up an inline width from WPBakery. */
.eir-front .vc_row {
box-sizing: border-box;
width: 100%;
}
/* Section spacing: WPBakery rows take padding from el_class="eir-section…".
These CSS hooks let editors pick paper / sand / ink rows directly in WPB. */
.vc_row.eir-section--paper { background: var(--eir-paper); padding-block: var(--eir-s-7); }
.vc_row.eir-section--sand { background: var(--eir-sand); padding-block: var(--eir-s-7); }
.vc_row.eir-section--sand-soft { background: var(--eir-sand-soft); padding-block: var(--eir-s-7); }
.vc_row.eir-section--ink { background: var(--eir-ink); padding-block: var(--eir-s-7); color: var(--eir-paper); }
.vc_row.eir-flush,
.vc_row.eir-section--paper.eir-flush,
.vc_row.eir-section--sand.eir-flush,
.vc_row.eir-section--sand-soft.eir-flush,
.vc_row.eir-section--ink.eir-flush { padding-block: 0; }
.vc_row.eir-flush > .vc_column_container > .vc_column-inner { padding: 0 !important; }
/* End-of-band padding — the LAST sand row in a sequence gets extra bottom
padding so the coloured band carries on visibly after the last row of
the grid (or map) before the next section's colour kicks in.
Placed after the flush-row reset so it wins on source order. */
.eir-front .vc_row.eir-section--sand:not(:has(+ .vc_row.eir-section--sand)),
.eir-front .vc_row.eir-section--sand-soft:not(:has(+ .vc_row.eir-section--sand-soft)) {
padding-bottom: 40px !important;
}
/* Section-header rows (.eir-section-header inside the row) belong to whatever
content sits below them — keep the full top padding for breathing room but
compact the bottom so the header reads as a label, not a marooned banner.
Works regardless of whether an intermediate row (e.g. resorts map) sits
between header and grid — the prior `:has(+ .vc_row.eir-flush)` rule broke
in that case. */
.vc_row.eir-section--paper:has(.eir-section-header),
.vc_row.eir-section--sand:has(.eir-section-header),
.vc_row.eir-section--sand-soft:has(.eir-section-header),
.vc_row.eir-section--ink:has(.eir-section-header) {
padding-bottom: var(--eir-s-3);
}
/* Compact top padding of a flush row that follows a section-header row.
Use padding-top on the next row when it shares the section's colour, so
the inked band stays continuous (margin would show the canvas paper
through the gap). Margin is fine when the colour changes.
Combined with the header's padding-bottom: var(--eir-s-3) above, the
total breathing room between header and grid is ~44px. */
.vc_row.eir-section--paper:has(.eir-section-header) + .vc_row.eir-flush.eir-section--paper,
.vc_row.eir-section--sand:has(.eir-section-header) + .vc_row.eir-flush.eir-section--sand,
.vc_row.eir-section--sand-soft:has(.eir-section-header) + .vc_row.eir-flush.eir-section--sand-soft,
.vc_row.eir-section--ink:has(.eir-section-header) + .vc_row.eir-flush.eir-section--ink {
padding-top: var(--eir-s-3);
}
/* When the next row IS a different colour (or unflagged), use margin so the
bands still keep a visual gap between them. */
.vc_row.eir-section--paper:has(.eir-section-header) + .vc_row.eir-flush:not(.eir-section--paper):not(.eir-section--sand):not(.eir-section--sand-soft):not(.eir-section--ink),
.vc_row.eir-section--sand:has(.eir-section-header) + .vc_row.eir-flush:not(.eir-section--paper):not(.eir-section--sand):not(.eir-section--sand-soft):not(.eir-section--ink),
.vc_row.eir-section--sand-soft:has(.eir-section-header) + .vc_row.eir-flush:not(.eir-section--paper):not(.eir-section--sand):not(.eir-section--sand-soft):not(.eir-section--ink),
.vc_row.eir-section--ink:has(.eir-section-header) + .vc_row.eir-flush:not(.eir-section--paper):not(.eir-section--sand):not(.eir-section--sand-soft):not(.eir-section--ink) {
margin-top: var(--eir-s-3);
}
/* Manifesto-split rows: the headline/body block is self-contained editorial
content; the full --eir-s-7 padding reads as wasted air. Top --eir-s-6 (96px),
bottom trimmed to --eir-s-5 (56px) so the next section follows on more
tightly. */
.vc_row.eir-section--paper:has(.eir-manifesto-split),
.vc_row.eir-section--sand:has(.eir-manifesto-split),
.vc_row.eir-section--sand-soft:has(.eir-manifesto-split) {
padding-top: var(--eir-s-6);
padding-bottom: var(--eir-s-5);
}
/* ─── Design-review tightening (Pass 1) ──────────────────── */
/* Headlines on dark sections must inherit, not force ink.
Preferred-rates removed from this list — it now sits on a light sand-soft
panel (the rebuild dropped the dark photo+gradient), so its title needs
ink, not paper. */
.eir-section--ink h1,
.eir-section--ink h2,
.eir-section--ink h3,
.eir-concierge__title,
.eir-footer__letter-title { color: var(--eir-paper); }
/* Italics inside section headers + sectional copy default to cyan unless
explicitly recoloured — matches the mockup's "quietly chosen." rule.
Preferred-rates em removed — it sits on light ground and reads better in
ink (handled by its own rule above). */
.eir-section-header h2 em,
.eir-section-header h2 i,
.eir-concierge__title em,
.eir-footer__letter-title em,
.eir-manifesto__quote em,
.eir-hero__title em { color: var(--eir-cyan); font-style: italic; }
/* Footer trust strip labels were Cormorant 16; mockup is Manrope tracked. */
.eir-footer__trust-name {
font-family: var(--eir-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Footer column items: the menu walker outputs .... The
children inherit Manrope unless we override. Force Cormorant on the
inner anchor. */
.eir-footer__col-list li,
.eir-footer__col-list li a {
font-family: var(--eir-font-display);
font-size: 17px;
color: var(--eir-paper);
opacity: 0.9;
text-decoration: none;
line-height: 1.35;
}
.eir-footer__col-list li a:hover { color: var(--eir-cyan); opacity: 1; }
/* (Booking label rule lives at the top — kept single source of truth there.) */
/* Journal read line: tracked uppercase in mockup. */
.eir-journal__read {
text-transform: uppercase;
letter-spacing: 0.18em;
font-family: var(--eir-font-sans);
font-size: 10px;
}
/* Card summary fully suppressed on cards — mockup shows only chip / name /
type / price / View. Kept the class for any future detail view. */
.eir-card .eir-card__summary { display: none; }
/* Concierge phone must be visible: enforce paper colour and reasonable
font-weight even if a child element collides with global h1 styling. */
.eir-concierge__phone { color: var(--eir-paper); font-weight: 300; }
/* ─── Utility ────────────────────────────────────────────── */
.eir-stack { display: flex; flex-direction: column; }
.eir-row { display: flex; align-items: center; }
.eir-gap-3 { gap: var(--eir-s-3); }
.eir-mt-3 { margin-top: var(--eir-s-3); }
.eir-mt-5 { margin-top: var(--eir-s-5); }
/* ─────────────────────────────────────────────────────────────
Mega menu — editorial panels rendered alongside the primary nav.
See inc/mega-menu.php (rendering) and assets/js/mega-menu.js (behaviour).
───────────────────────────────────────────────────────────── */
/* Top-level item that opens a panel — subtle indicator on hover. */
.eir-nav__item--has-mega { position: relative; }
.eir-nav__caret {
display: inline-block;
margin-left: 6px;
opacity: 0.4;
font-style: italic;
color: var(--eir-cyan);
transition: opacity 0.2s ease;
}
.eir-nav__item--has-mega:hover .eir-nav__caret,
.eir-nav__item--has-mega.is-active .eir-nav__caret { opacity: 1; }
/* Active state — a thin cyan underline. */
.eir-nav__item--has-mega.is-active {
color: var(--eir-cyan);
}
/* ─── Wrapper + panel base ─────────────────────────────────────
Positioned below the nav-wrap (utility row + main nav). JS sets
--eir-nav-bottom to the actual rendered bottom of .eir-nav-wrap so the
panel hugs the nav regardless of how tall the utility row + main nav
stack up — no more magic 80px constant. */
/* Leaflet's controls and pane stack default to z-index 1000+ which can sit
above a fixed-position dropdown. Cap them under the mega menu's wrap
z-index so the menu always wins on open. */
.eir-map__leaflet .leaflet-control-container,
.eir-map__leaflet .leaflet-top,
.eir-map__leaflet .leaflet-bottom,
.eir-map__leaflet .leaflet-pane { z-index: 400 !important; }
.eir-map__leaflet .leaflet-popup-pane { z-index: 700 !important; }
.eir-mega-wrap {
position: fixed;
top: var(--eir-nav-bottom, 120px); /* fallback ≈ utility row + nav height */
left: 0; right: 0;
/* Sits comfortably above every Leaflet pane (capped at 700 above). */
z-index: 9000;
background: var(--eir-paper);
border-top: 1px solid rgba(11, 37, 64, 0.06);
border-bottom: 1px solid rgba(11, 37, 64, 0.08);
box-shadow: 0 14px 28px rgba(11, 37, 64, 0.06);
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
max-height: calc(100vh - var(--eir-nav-bottom, 120px));
overflow-y: auto;
}
.eir-mega-wrap.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.eir-mega {
display: none;
padding: 56px 64px 64px;
max-width: var(--eir-max-w);
margin: 0 auto;
}
.eir-mega.is-open { display: block; }
/* Inner grid. Default — 4 columns: lede + 2 link cols + image. */
.eir-mega__inner {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
gap: 56px;
align-items: start;
}
/* Island variant (Antigua / Barbados) — 3 columns: lede (with small inline
image), resorts list, on-the-island links. Drops the big right-column
photo. */
.eir-mega__inner--island {
grid-template-columns: 1.1fr 1.2fr 1fr;
gap: 48px;
}
.eir-mega__lede-image {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
margin-bottom: 20px;
width: 100%;
max-width: 280px;
}
/* Wide variant (Collection) — full-width card grid, no image column. */
.eir-mega__inner--wide {
display: block;
}
/* Common eyebrow + title pattern in panels. */
.eir-mega__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: 38px;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 12px 0 16px;
color: var(--eir-ink);
}
.eir-mega__strap {
font-family: var(--eir-font-display);
font-style: italic;
font-size: 15px;
line-height: 1.45;
color: var(--eir-ink-soft);
margin: 0 0 20px;
max-width: 32ch;
}
/* Lede column. */
.eir-mega__col--lede { padding-right: 12px; }
/* Right-side image column (Antigua / Barbados / Holidays). */
.eir-mega__col--image {
background-position: center;
background-size: cover;
min-height: 240px;
border-radius: 0;
}
/* Link lists inside the link columns. */
.eir-mega__list {
list-style: none;
padding: 0;
margin: 12px 0 0;
}
.eir-mega__list li { padding: 5px 0; border-bottom: 1px solid rgba(11, 37, 64, 0.06); }
.eir-mega__list li:last-child { border-bottom: none; }
.eir-mega__list a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
color: var(--eir-ink);
text-decoration: none;
font-family: var(--eir-font-display);
font-size: 17px;
transition: color 0.15s ease;
}
.eir-mega__list a:hover { color: var(--eir-cyan); }
.eir-mega__list-name { font-weight: 400; }
.eir-mega__list-meta {
font-family: var(--eir-font-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--eir-ink-soft);
opacity: 0.8;
flex-shrink: 0;
}
/* Simpler list (no meta column). */
.eir-mega__list--simple a { display: block; }
/* ─── The Collection panel — wide card grid ──────────────────── */
.eir-mega__lede {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
align-items: end;
gap: 32px;
margin-bottom: 36px;
}
.eir-mega__group {
margin-top: 32px;
}
.eir-mega__group-label {
margin-bottom: 14px;
}
.eir-mega__cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.eir-mega__card {
display: block;
text-decoration: none;
color: var(--eir-ink);
transition: transform 0.2s ease;
}
.eir-mega__card:hover { transform: translateY(-2px); }
.eir-mega__card-img {
height: 110px;
background-position: center;
background-size: cover;
background-color: var(--eir-sand);
margin-bottom: 10px;
}
.eir-mega__card-name {
font-family: var(--eir-font-display);
font-size: 18px;
line-height: 1.1;
}
.eir-mega__card-type {
font-family: var(--eir-font-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--eir-cyan);
margin-top: 3px;
}
/* Single-card group (e.g. Barbados with one resort) keeps the same 5-col
grid so the card image width matches the Antigua row. The card sits in
column 1 with the remaining columns left empty. */
.eir-mega__group:has(.eir-mega__cards > :only-child) .eir-mega__cards {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* ─── Mobile burger + drawer ─────────────────────────────────── */
.eir-nav__burger {
display: none;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-direction: column;
justify-content: center;
gap: 5px;
margin-left: 12px;
}
.eir-nav__burger span {
display: block;
height: 1.5px;
background: var(--eir-ink);
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
.eir-mega { padding: 40px 32px; }
.eir-mega__inner { gap: 32px; }
.eir-mega__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
/* Hide desktop nav links; show burger. */
.eir-nav__links { display: none; }
.eir-nav__burger { display: inline-flex; }
/* When mobile open, show panels stacked. */
body.eir-mobile-open .eir-mega-wrap {
position: fixed;
top: 80px;
bottom: 0;
left: 0; right: 0;
opacity: 1;
transform: none;
pointer-events: auto;
overflow-y: auto;
}
body.eir-mobile-open .eir-mega { display: block; padding: 28px 24px; }
.eir-mega__inner { grid-template-columns: 1fr; gap: 24px; }
.eir-mega__lede { grid-template-columns: 1fr; gap: 16px; }
.eir-mega__cards { grid-template-columns: repeat(2, 1fr); }
/* Mobile drawer: lead each panel with its imagery so the daydream tone
carries through to the smallest viewport. */
.eir-mega__col--image {
order: -1;
aspect-ratio: 16 / 9;
min-height: 0;
}
.eir-mega__title { font-size: 28px; }
}
/* ─────────────────────────────────────────────────────────────
Resort detail page — single-resort.php + template-parts/resort/*.
Mirrors the home-page design language: ink / paper alternation,
numbered/labelled eyebrows, italic-cyan accents.
───────────────────────────────────────────────────────────── */
/* Hero — overrides the .eir-hero base just enough to swap the H1 from a big
serif quote to a smaller editorial cluster: resort name (eyebrow above) +
brand-locked hero line (serif H1) + sub-line (deck). */
.eir-resort-hero .eir-resort-hero__title-eyebrow {
color: var(--eir-paper);
opacity: 0.85;
margin-bottom: 14px;
}
/* Constrain the hero text cluster to the left half so it doesn't run over
the right side of the background video. Mirrors the homepage hero. */
.eir-resort-hero__line {
font-size: clamp(44px, 6vw, 92px);
max-width: min(50%, 620px);
}
.eir-resort-hero__subline { max-width: min(50%, 520px); }
@media (max-width: 900px) {
.eir-resort-hero__line,
.eir-resort-hero__subline { max-width: 100%; }
}
/* Welcome — ink section, eyebrow + reflective paragraph in display serif.
75/25 split with the resort logo (tinted white) on the right. */
.eir-resort-welcome { padding-top: var(--eir-s-5); padding-bottom: var(--eir-s-5); }
.eir-resort-welcome__inner {
display: grid;
grid-template-columns: 3fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.eir-resort-welcome__copy { min-width: 0; }
.eir-resort-welcome__brand {
display: flex; align-items: center; justify-content: center;
}
.eir-resort-welcome__logo {
display: block;
max-width: 100%;
width: auto;
max-height: 140px;
object-fit: contain;
/* Tint to paper-white so any single-colour SVG/PNG reads cleanly on ink.
The team can override per-asset by uploading a paper-on-ink variant. */
filter: brightness(0) invert(1);
opacity: 0.95;
}
@media (max-width: 900px) {
.eir-resort-welcome__inner { grid-template-columns: 1fr; gap: 32px; }
.eir-resort-welcome__brand { justify-content: flex-start; }
.eir-resort-welcome__logo { max-height: 80px; }
}
/* Resort name heading at the top of the Welcome section. */
.eir-resort-welcome__name {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(32px, 3.4vw, 52px);
line-height: 1.04;
letter-spacing: -0.012em;
color: var(--eir-paper);
margin: 18px 0 0;
}
.eir-resort-welcome__body {
font-family: var(--eir-font-display);
font-size: clamp(20px, 1.9vw, 25px);
line-height: 1.55;
color: var(--eir-paper);
}
/* When the welcome block is reused on a paper-coloured section (Family
page's editorial intro), flip the body + heading to ink so the text
isn't paper-on-paper. The ink-section variant stays paper. */
.eir-section--paper.eir-resort-welcome .eir-resort-welcome__body,
.eir-section--paper.eir-resort-welcome .eir-resort-welcome__name { color: var(--eir-ink); }
.eir-section--paper.eir-resort-welcome .eir-eyebrow { color: var(--eir-ink-soft); }
.eir-resort-welcome__body p { margin: 0 0 18px; }
.eir-resort-welcome__body p:last-child { margin-bottom: 0; }
.eir-resort-welcome__body em { color: var(--eir-cyan); font-style: italic; }
/* Eyebrow on ink reads cyan via the global .eir-section--ink .eir-eyebrow rule. */
/* Spec strip — editorial numbered tile grid on a sand-soft band.
Each spec sits in its own bordered tile with a numbered eyebrow + the
spec text in display serif. Hover lifts the tile to mirror the resort
and journal card pattern. */
.eir-resort-specs { padding-top: var(--eir-s-6); padding-bottom: var(--eir-s-6); }
.eir-resort-specs__head { max-width: 720px; }
.eir-resort-specs__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.012em;
color: var(--eir-ink);
}
.eir-resort-specs__title em { font-style: italic; color: var(--eir-cyan); }
.eir-resort-specs__grid {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.eir-resort-specs__tile {
position: relative;
display: flex; flex-direction: column; gap: 14px;
padding: 28px 24px;
background: #fff;
color: var(--eir-ink);
border-top: 2px solid var(--eir-cyan);
box-shadow: 0 1px 2px rgba(11,37,64,0.04), 0 8px 20px rgba(11,37,64,0.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.eir-resort-specs__tile:hover {
transform: translateY(-3px);
box-shadow: 0 2px 4px rgba(11,37,64,0.06), 0 18px 32px rgba(11,37,64,0.10);
}
.eir-resort-specs__num {
font-family: var(--eir-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
color: var(--eir-cyan);
}
.eir-resort-specs__text {
font-family: var(--eir-font-display);
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.2;
color: var(--eir-ink);
}
.eir-resort-specs__tile em { font-style: italic; color: var(--eir-cyan); }
@media (max-width: 700px) {
.eir-resort-specs__grid { grid-template-columns: 1fr; }
.eir-resort-specs__tile { padding: 24px 22px; }
}
@media (max-width: 700px) {
.eir-resort-specs__grid { grid-template-columns: 1fr; }
.eir-resort-specs__tile { padding: 22px 20px; }
}
/* Accommodation — alternating image/copy rows. */
/* Trim the top breathing on the Accommodation band — the default
eir-section--paper top padding (140px) leaves too much air above the
"Suites & Rooms" eyebrow. */
.eir-resort-accom { padding-top: var(--eir-s-5); }
.eir-resort-accom__head { max-width: none; }
/* Let the headline "A view that earns the room." run full width so it sits
on a single line at desktop. Intro paragraph below still wraps naturally. */
.eir-resort-accom__head h2 { white-space: nowrap; }
.eir-resort-accom__intro { max-width: 760px; } /* intro keeps a sensible measure */
@media (max-width: 900px) {
.eir-resort-accom__head h2 { white-space: normal; }
}
.eir-resort-accom__intro {
font-family: var(--eir-font-display);
font-size: 20px; line-height: 1.5; color: var(--eir-ink-soft, var(--eir-ink));
max-width: 720px;
}
.eir-resort-accom__list {
display: flex; flex-direction: column; gap: var(--eir-s-6);
}
.eir-resort-accom__row {
display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--eir-s-5);
align-items: center;
}
.eir-resort-accom__row.is-flipped { grid-template-columns: 1fr 1.1fr; }
.eir-resort-accom__row.is-flipped .eir-resort-accom__media { order: 2; }
.eir-resort-accom__img {
width: 100%; aspect-ratio: 4 / 3;
background-size: cover; background-position: center;
}
.eir-resort-accom__size {
color: var(--eir-cyan); margin-bottom: 8px;
}
.eir-resort-accom__name {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1; margin: 0 0 14px;
}
.eir-resort-accom__lede {
font-family: var(--eir-font-display);
font-size: 18px; line-height: 1.55; margin: 0 0 18px;
color: var(--eir-ink-soft, var(--eir-ink));
max-width: 520px;
}
.eir-resort-accom__bullets {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
font-family: var(--eir-font-sans); font-size: 14px;
color: var(--eir-ink);
}
.eir-resort-accom__bullets li { padding-left: 18px; position: relative; }
.eir-resort-accom__bullets li::before {
content: ''; position: absolute; left: 0; top: 9px;
width: 8px; height: 1px; background: var(--eir-cyan);
}
/* Dining — first card spans full width (flagship), the rest are a 2-up grid. */
/* Dining head — full width so the headline fits on one line at desktop.
Intro stays at a sensible 760px measure for body readability. */
.eir-resort-dining__head { max-width: none; color: var(--eir-paper); }
.eir-resort-dining__head h2 { white-space: nowrap; }
@media (max-width: 900px) {
.eir-resort-dining__head h2 { white-space: normal; }
}
.eir-resort-dining__intro {
font-family: var(--eir-font-display);
font-size: 20px; line-height: 1.5; opacity: 0.92;
max-width: 720px;
}
.eir-resort-dining__grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: var(--eir-s-4);
}
.eir-resort-dining__card {
background: rgba(251,248,242,0.04);
border: 1px solid rgba(251,248,242,0.10);
display: flex; flex-direction: column;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.eir-resort-dining__card:hover {
transform: translateY(-6px);
background: rgba(251,248,242,0.07);
border-color: rgba(251,248,242,0.18);
box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.15);
}
.eir-resort-dining__card:hover .eir-resort-dining__img { opacity: 0.96; }
.eir-resort-dining__img { transition: opacity .25s ease; }
/* Flagship full-width pattern removed — every dining card sits in the same
2-column grid for a tidier rhythm. The .is-flagship class is harmless
if it lands in markup; it just no longer adjusts layout. */
.eir-resort-dining__img {
width: 100%; aspect-ratio: 3 / 2;
background-size: cover; background-position: center;
}
.eir-resort-dining__body { padding: 28px; color: var(--eir-paper); }
.eir-resort-dining__role { color: var(--eir-cyan); margin-bottom: 6px; }
.eir-resort-dining__name {
font-family: var(--eir-font-display); font-weight: 300;
font-size: clamp(24px, 2.4vw, 32px);
margin: 0 0 12px;
}
.eir-resort-dining__desc {
font-family: var(--eir-font-sans); font-size: 14px; line-height: 1.65;
margin: 0 0 12px; opacity: 0.9;
}
.eir-resort-dining__dress {
font-family: var(--eir-font-display); font-size: 14px;
color: var(--eir-cyan); opacity: 0.85; margin: 0;
}
/* Activities — N columns, evenly distributed. */
/* Trim the gap between Activities and the Spa & Wellness section below.
Default eir-section--paper padding stacks 140px+140px = 280px between
them; halve both ends so it reads as one continuous editorial flow. */
.eir-resort-activities { padding-bottom: var(--eir-s-5); }
.eir-resort-spa { padding-top: var(--eir-s-5); }
.eir-resort-activities__head { max-width: 760px; }
.eir-resort-activities__intro {
font-family: var(--eir-font-display);
font-size: 20px; line-height: 1.5; color: var(--eir-ink-soft, var(--eir-ink));
max-width: 720px;
}
.eir-resort-activities__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--eir-s-4);
}
.eir-resort-activities__col {
padding-top: 24px; border-top: 1px solid rgba(11,37,64,0.12);
}
/* Activity image — landscape thumb above the category name. Sits between
the top hairline and the name, with a small bottom gap. */
.eir-resort-activities__img {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
margin-bottom: 20px;
transition: opacity .25s ease;
}
.eir-resort-activities__col:hover .eir-resort-activities__img { opacity: 0.94; }
.eir-resort-activities__name {
font-family: var(--eir-font-display); font-weight: 300;
font-size: 22px; margin: 0 0 12px;
color: var(--eir-ink);
}
.eir-resort-activities__body {
font-family: var(--eir-font-sans); font-size: 14px;
line-height: 1.65; color: var(--eir-ink-soft, var(--eir-ink));
margin: 0;
}
/* Spa — two-up with image. */
.eir-resort-spa__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--eir-s-5);
align-items: center;
}
.eir-resort-spa__img {
width: 100%; aspect-ratio: 4 / 5;
background-size: cover; background-position: center;
}
.eir-resort-spa__body {
font-family: var(--eir-font-display); font-size: 18px; line-height: 1.6;
color: var(--eir-ink);
}
.eir-resort-spa__body em { color: var(--eir-cyan); font-style: italic; }
/* Spa — extras (treatments + facilities). */
.eir-resort-spa__hours { font-family: var(--eir-font-display); font-size: 18px; }
.eir-resort-spa__extras {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--eir-s-5);
align-items: start;
border-top: 1px solid var(--eir-rule, rgba(0,0,0,0.08));
padding-top: var(--eir-s-5);
}
.eir-resort-spa__extras-label {
color: var(--eir-cyan);
margin-bottom: 14px;
}
.eir-resort-spa__treatments-list,
.eir-resort-spa__facilities-list {
list-style: none;
margin: 0;
padding: 0;
}
.eir-resort-spa__treatment {
padding: 16px 0;
border-bottom: 1px solid var(--eir-rule, rgba(0,0,0,0.06));
}
.eir-resort-spa__treatment:first-child { padding-top: 0; }
.eir-resort-spa__treatment:last-child { border-bottom: 0; }
.eir-resort-spa__treatment-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: baseline;
}
.eir-resort-spa__treatment-name {
font-family: var(--eir-font-display, serif);
font-size: 1.15rem;
}
.eir-resort-spa__treatment-meta {
font-family: var(--eir-font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--eir-ink-soft);
white-space: nowrap;
}
.eir-resort-spa__treatment-lede {
margin: 4px 0 0;
color: var(--eir-ink-soft);
font-size: 0.95rem;
line-height: 1.55;
}
.eir-resort-spa__facilities-list li {
padding: 8px 0;
font-family: var(--eir-font-display, serif);
color: var(--eir-ink-soft);
border-bottom: 1px solid var(--eir-rule, rgba(0,0,0,0.04));
}
.eir-resort-spa__facilities-list li:last-child { border-bottom: 0; }
@media (max-width: 820px) {
.eir-resort-spa__extras { grid-template-columns: 1fr; gap: var(--eir-s-4); }
}
/* Reviews — editorial pull quotes. */
.eir-resort-reviews { padding-top: var(--eir-s-6); padding-bottom: var(--eir-s-6); }
.eir-resort-reviews__head { max-width: 760px; margin: 0 auto; text-align: center; }
.eir-resort-reviews__title {
font-family: var(--eir-font-display, serif);
font-weight: 300;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.eir-resort-reviews__grid {
max-width: 1140px;
margin: 0 auto;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.eir-resort-reviews__item {
padding: 32px 28px;
background: var(--eir-paper-soft, #F5F1EA);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 20px;
}
.eir-resort-reviews__quote {
margin: 0;
font-family: var(--eir-font-display, serif);
font-size: 1.2rem;
line-height: 1.55;
color: var(--eir-ink);
}
.eir-resort-reviews__quote p { margin: 0; }
.eir-resort-reviews__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: baseline;
border-top: 1px solid var(--eir-rule, rgba(0,0,0,0.08));
padding-top: 16px;
}
.eir-resort-reviews__rating {
color: var(--eir-cyan);
letter-spacing: 2px;
font-size: 14px;
}
.eir-resort-reviews__attribution {
font-style: normal;
font-family: var(--eir-font-display, serif);
font-size: 0.95rem;
color: var(--eir-ink);
}
.eir-resort-reviews__source {
margin-left: auto;
font-family: var(--eir-font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--eir-ink-soft);
}
.eir-resort-reviews__source a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
@media (max-width: 820px) {
.eir-resort-reviews__grid { grid-template-columns: 1fr; gap: 22px; }
}
/* Videos — click-to-play grid. */
.eir-resort-videos { padding-top: var(--eir-s-6); padding-bottom: var(--eir-s-6); }
.eir-resort-videos__head { max-width: 760px; margin: 0 auto; text-align: center; }
.eir-resort-videos__title {
font-family: var(--eir-font-display, serif);
font-weight: 300;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.eir-resort-videos__grid {
max-width: 1140px;
margin: 0 auto;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
.eir-resort-videos__item { display: flex; flex-direction: column; gap: 12px; }
.eir-resort-videos__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--eir-paper-soft, #F5F1EA);
border-radius: 4px;
overflow: hidden;
}
.eir-resort-videos__poster {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.eir-resort-videos__poster--blank {
background:
linear-gradient(135deg, rgba(11,37,64,0.10), rgba(67,188,217,0.10)),
var(--eir-paper-soft, #F5F1EA);
}
.eir-resort-videos__play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
color: #fff;
cursor: pointer;
text-decoration: none;
transition: background 200ms ease;
}
.eir-resort-videos__play::before {
content: "";
position: absolute;
width: 80px; height: 80px; border-radius: 50%;
background: rgba(11, 37, 64, 0.72);
transition: transform 200ms ease, background 200ms ease;
}
.eir-resort-videos__play svg { position: relative; transform: translateX(2px); }
.eir-resort-videos__media:hover .eir-resort-videos__play::before {
background: var(--eir-cyan, #43BCD9);
transform: scale(1.05);
}
.eir-resort-videos__player-frame,
.eir-video-player__frame,
.eir-video-player__file {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
background: #000;
}
.eir-resort-videos__caption {
font-family: var(--eir-font-display, serif);
font-size: 1rem;
color: var(--eir-ink-soft);
line-height: 1.4;
}
@media (max-width: 820px) {
.eir-resort-videos__grid { grid-template-columns: 1fr; gap: 22px; }
.eir-resort-videos__play::before { width: 60px; height: 60px; }
}
/* Location — copy + map/image. */
.eir-resort-location__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.012em;
color: var(--eir-paper);
max-width: 16ch;
}
.eir-resort-location__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--eir-s-5);
align-items: start;
}
.eir-resort-location__text {
font-family: var(--eir-font-display); font-size: 20px; line-height: 1.55;
opacity: 0.92; max-width: 540px;
}
.eir-resort-location__address {
font-family: var(--eir-font-sans); font-size: 12px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--eir-cyan);
}
.eir-resort-location__img {
width: 100%; aspect-ratio: 16 / 10;
background-size: cover; background-position: center;
}
/* Recognition — quiet, tracked-uppercase strip. */
/* Recognition — editorial card grid with numbered tiles + cyan mark.
Mirrors the At-a-glance spec tile pattern for visual consistency.
Bottom padding trimmed so it flows into the offers section below. */
.eir-resort-recognition { padding-top: var(--eir-s-6); padding-bottom: var(--eir-s-5); }
.eir-resort-offers { padding-top: var(--eir-s-5); }
.eir-resort-recognition__head { max-width: 720px; }
.eir-resort-recognition__title-h2 {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.012em;
color: var(--eir-ink);
}
.eir-resort-recognition__title-h2 em { font-style: italic; color: var(--eir-cyan); }
.eir-resort-recognition__grid {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.eir-resort-recognition__tile {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 32px 28px 28px;
background: #fff;
border-top: 2px solid var(--eir-cyan);
box-shadow: 0 1px 2px rgba(11,37,64,0.04), 0 8px 20px rgba(11,37,64,0.06);
transition: transform .28s ease, box-shadow .28s ease;
}
.eir-resort-recognition__tile:hover {
transform: translateY(-4px);
box-shadow: 0 2px 4px rgba(11,37,64,0.06), 0 18px 32px rgba(11,37,64,0.10);
}
/* Uploaded source logo — replaces the numbered eyebrow + source text when
present. Kept to a constrained height so wider lockups stay restrained. */
.eir-resort-recognition__logo {
display: block;
height: 28px;
width: auto;
max-width: 180px;
object-fit: contain;
object-position: left center;
margin-bottom: 6px;
}
.eir-resort-recognition__num {
font-family: var(--eir-font-sans);
font-size: 11px; font-weight: 500;
letter-spacing: 0.28em;
color: var(--eir-ink-soft);
opacity: 0.5;
}
.eir-resort-recognition__source {
font-family: var(--eir-font-sans);
font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-cyan);
}
.eir-resort-recognition__title {
font-family: var(--eir-font-display);
font-style: italic;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.25;
color: var(--eir-ink);
}
/* CTA band — closing call-to-action on ink.
Top row: copy left + buttons right, vertically centred.
Below: reassurance line + since year + trust logos (formerly a separate
resort-trust section — now absorbed). */
.eir-resort-cta__inner { max-width: none; }
.eir-resort-cta__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.eir-resort-cta__copy { flex: 1 1 360px; min-width: 0; }
.eir-resort-cta__eyebrow { color: var(--eir-cyan); }
.eir-resort-cta__title {
color: var(--eir-paper);
font-family: var(--eir-font-display); font-weight: 300;
font-size: clamp(40px, 5vw, 80px); line-height: 1.05;
margin: 0;
}
.eir-resort-cta__buttons {
display: flex; gap: 14px; flex-wrap: wrap;
flex: 0 0 auto;
align-self: center;
}
/* Trust strip embedded in the CTA band — dark tone, no inner padding so it
sits flush with the .eir-resort-cta__inner gutter. Matches the footer
look: white-tinted logos on the same ink ground. */
.eir-resort-cta__trust {
margin-top: var(--eir-s-6);
padding-top: var(--eir-s-4);
border-top: 1px solid rgba(251,248,242,0.14);
}
.eir-resort-cta__trust .eir-trust {
max-width: none;
padding: 0;
background: transparent;
}
.eir-resort-cta__trust .eir-trust__head {
border-bottom-color: rgba(251,248,242,0.14);
padding-bottom: 22px;
margin-bottom: 26px;
}
.eir-resort-cta__trust .eir-trust__reassurance {
color: var(--eir-paper);
font-family: var(--eir-font-display);
font-size: clamp(20px, 1.6vw, 26px);
line-height: 1.4;
}
.eir-resort-cta__trust .eir-trust__reassurance em,
.eir-resort-cta__trust .eir-trust__reassurance .eir-italic { color: var(--eir-cyan); }
.eir-resort-cta__trust .eir-trust__since .eir-eyebrow { color: rgba(251,248,242,0.55); }
.eir-resort-cta__trust .eir-trust__since-year {
color: var(--eir-paper);
font-family: var(--eir-font-display);
font-size: 26px;
font-weight: 300;
}
@media (max-width: 800px) {
.eir-resort-cta__top { flex-direction: column; align-items: flex-start; gap: 28px; }
.eir-resort-cta__buttons { align-self: stretch; }
}
/* Related — three-up card grid (re-uses .eir-card). */
.eir-resort-related__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--eir-s-4);
}
/* Gallery thumbnail links — no underline / colour shift on the inner img. */
.eir-resort-gallery__link {
display: block;
text-decoration: none;
cursor: zoom-in;
overflow: hidden;
}
.eir-resort-gallery__link img { transition: transform .35s ease, opacity .25s ease; }
.eir-resort-gallery__link:hover img { transform: scale(1.03); opacity: 0.96; }
/* ─── Lightbox overlay ──────────────────────────────────────
Vanilla JS opens this for any [data-eir-lightbox] anchor. */
.eir-lightbox {
position: fixed; inset: 0;
background: rgba(8, 24, 42, 0.94);
display: none;
align-items: center; justify-content: center;
z-index: 9000;
padding: clamp(20px, 4vw, 64px);
}
.eir-lightbox.is-open { display: flex; }
html.eir-lightbox-locked { overflow: hidden; }
.eir-lightbox__stage {
position: relative;
max-width: min(1280px, 100%);
max-height: 100%;
display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.eir-lightbox__img {
max-width: 100%;
max-height: calc(100vh - 200px);
width: auto; height: auto;
display: block;
background: var(--eir-ink);
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.eir-lightbox__caption-row {
display: flex; justify-content: space-between; align-items: baseline;
width: 100%; gap: 24px;
color: var(--eir-paper);
font-family: var(--eir-font-sans);
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.eir-lightbox__caption { opacity: 0.85; flex: 1 1 auto; }
.eir-lightbox__counter { opacity: 0.55; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.eir-lightbox__close,
.eir-lightbox__nav {
position: absolute;
background: transparent;
border: 1px solid rgba(251,248,242,0.30);
color: var(--eir-paper);
width: 44px; height: 44px;
font-size: 22px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s ease, border-color .2s ease;
font-family: inherit;
}
.eir-lightbox__close:hover,
.eir-lightbox__nav:hover {
background: rgba(251,248,242,0.10);
border-color: var(--eir-paper);
}
.eir-lightbox__close {
top: clamp(16px, 3vw, 32px);
right: clamp(16px, 3vw, 32px);
}
.eir-lightbox__nav--prev {
left: clamp(16px, 3vw, 32px);
top: 50%; transform: translateY(-50%);
}
.eir-lightbox__nav--next {
right: clamp(16px, 3vw, 32px);
top: 50%; transform: translateY(-50%);
}
.eir-lightbox__nav[hidden] { display: none; }
@media (max-width: 700px) {
.eir-lightbox__nav--prev,
.eir-lightbox__nav--next { top: auto; bottom: clamp(16px, 4vw, 24px); transform: none; }
.eir-lightbox__nav--prev { left: 16px; }
.eir-lightbox__nav--next { right: 16px; }
.eir-lightbox__img { max-height: calc(100vh - 260px); }
}
/* Gallery — head + flowing masonry-ish grid. Trim the bottom padding so
the section closes tighter against the Related grid below. */
.eir-resort-gallery { padding-bottom: var(--eir-s-5); }
.eir-resort-gallery__head { max-width: 720px; }
.eir-resort-gallery__title {
font-family: var(--eir-font-display);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.012em;
color: var(--eir-ink);
}
.eir-resort-gallery__title em { font-style: italic; color: var(--eir-cyan); }
.eir-resort-gallery__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.eir-resort-gallery__item { margin: 0; }
.eir-resort-gallery__item img {
width: 100%; height: 100%; object-fit: cover; display: block;
aspect-ratio: 4 / 3;
}
/* ─── Journal archive ─────────────────────────────────────── */
.eir-journal--archive { padding: var(--eir-s-7) var(--eir-gutter-x); grid-template-columns: repeat(3, 1fr); display: grid; gap: var(--eir-s-4); }
@media (max-width: 900px) { .eir-journal--archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .eir-journal--archive { grid-template-columns: 1fr; } }
.eir-pagination { display: inline-flex; gap: 8px; align-items: center; }
.eir-pagination a, .eir-pagination span {
display: inline-block; padding: 8px 14px;
font-family: var(--eir-font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--eir-ink); text-decoration: none;
border: 1px solid rgba(11,37,64,0.10);
}
.eir-pagination .current { background: var(--eir-ink); color: var(--eir-paper); border-color: var(--eir-ink); }
.eir-pagination a:hover { background: var(--eir-ink); color: var(--eir-paper); border-color: var(--eir-ink); }
/* ─── Special Offers ─────────────────────────────────────── */
.eir-offers__grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: var(--eir-s-4);
}
.eir-offer {
background: var(--eir-paper);
border: 1px solid rgba(11,37,64,0.10);
display: flex; flex-direction: column;
}
.eir-offer__img {
width: 100%; aspect-ratio: 16 / 10;
background-size: cover; background-position: center;
}
.eir-offer__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.eir-offer__resort { color: var(--eir-cyan); }
.eir-offer__title {
font-family: var(--eir-font-display); font-weight: 300;
font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 0;
}
.eir-offer__dates {
font-family: var(--eir-font-sans); font-size: 12px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--eir-ink-soft, var(--eir-ink));
margin: 0;
}
.eir-offer__inclusions {
list-style: none; padding: 0; margin: 4px 0 0;
display: flex; flex-direction: column; gap: 6px;
font-family: var(--eir-font-sans); font-size: 14px;
color: var(--eir-ink);
}
.eir-offer__inclusions li { padding-left: 18px; position: relative; }
.eir-offer__inclusions li::before {
content: ''; position: absolute; left: 0; top: 9px;
width: 8px; height: 1px; background: var(--eir-cyan);
}
.eir-offer__foot {
display: flex; justify-content: space-between; align-items: end;
gap: 18px; margin-top: auto; padding-top: 18px;
border-top: 1px solid rgba(11,37,64,0.10);
}
.eir-offer__price-label {
display: block;
font-family: var(--eir-font-sans); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-ink-soft, var(--eir-ink));
}
.eir-offer__price-value {
font-family: var(--eir-font-display); font-weight: 300;
font-size: 24px; color: var(--eir-ink);
}
.eir-offers-terms__inner { max-width: 880px; }
.eir-offers-terms__body {
font-family: var(--eir-font-sans); font-size: 13px;
line-height: 1.7; color: var(--eir-ink-soft, var(--eir-ink));
}
@media (max-width: 800px) {
.eir-offers__grid { grid-template-columns: 1fr; }
}
/* ─── Editorial pages (About, Weddings, Family, Things to Do, Discover) ─── */
.eir-editorial-intro .eir-resort-welcome__body { max-width: 72ch; }
.eir-editorial-row__body {
font-family: var(--eir-font-display);
font-size: 18px; line-height: 1.65;
color: var(--eir-ink-soft, var(--eir-ink));
max-width: 540px;
}
.eir-editorial-row__body p { margin: 0 0 14px; }
.eir-editorial-row__body p:last-child { margin-bottom: 0; }
.eir-editorial-row__body em { color: var(--eir-cyan); font-style: italic; }
.eir-editorial-quote {
text-align: center;
}
.eir-editorial-quote__quote {
max-width: 880px; margin: 0 auto;
font-family: var(--eir-font-display); font-style: italic; font-weight: 300;
font-size: clamp(26px, 3vw, 42px); line-height: 1.3;
color: var(--eir-paper);
}
.eir-editorial-quote__quote p { margin: 0 0 18px; }
.eir-editorial-quote__attr {
display: block;
margin-top: 22px;
font-style: normal;
font-family: var(--eir-font-sans);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-cyan);
}
.eir-editorial-wide {
margin: 0;
}
.eir-editorial-wide__img {
width: 100%;
aspect-ratio: 21 / 9;
background-size: cover; background-position: center;
}
.eir-editorial-wide__caption {
padding: 14px var(--eir-gutter-x) 0;
font-family: var(--eir-font-sans);
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--eir-ink-soft, var(--eir-ink));
}
/* ─── Collection archive ──────────────────────────────────── */
.eir-collection-filters__chips {
display: flex; flex-wrap: wrap; gap: 10px;
padding: 0 var(--eir-gutter-x);
}
.eir-chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 20px;
border: 1px solid rgba(11,37,64,0.18);
border-radius: 2px;
font-family: var(--eir-font-sans);
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--eir-ink);
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eir-chip:hover {
background: rgba(11,37,64,0.06);
border-color: var(--eir-ink);
}
.eir-chip.is-active {
background: var(--eir-ink); color: var(--eir-paper);
border-color: var(--eir-ink);
}
.eir-chip__count {
font-family: var(--eir-font-sans); font-style: normal;
font-size: 11px; opacity: 0.6; letter-spacing: 0.16em;
}
/* Active chip lifts the count into the brand signature accent. */
.eir-chip.is-active .eir-chip__count {
font-family: var(--eir-font-display); font-style: italic;
font-size: 14px; letter-spacing: 0;
color: var(--eir-cyan); opacity: 1;
}
/* Larger archive cards — show summary line. */
.eir-collection--archive { padding: 0 var(--eir-gutter-x) var(--eir-s-7); }
.eir-card--lg .eir-card__summary {
display: block !important; /* overrides the suppression on home page cards */
font-family: var(--eir-font-display);
font-size: 16px; line-height: 1.55;
color: var(--eir-ink-soft, var(--eir-ink));
margin: 12px 0 0;
}
/* ─── Island (destination) detail page ───────────────────────
Most pieces reuse the resort styles (hero, welcome, accom, gallery,
cta band). These rules cover the bits unique to a destination page:
When-to-visit and Getting-here. */
.eir-island-when__inner { max-width: 760px; }
.eir-island-when__text {
font-family: var(--eir-font-display);
font-size: 20px; line-height: 1.6;
color: var(--eir-ink-soft, var(--eir-ink));
max-width: 680px;
}
.eir-island-getting__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--eir-s-4);
}
.eir-island-getting__col--wide { grid-column: span 3; }
.eir-island-getting__label {
font-family: var(--eir-font-sans);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-cyan);
margin-bottom: 8px;
}
.eir-island-getting__value {
font-family: var(--eir-font-display);
font-size: 22px; line-height: 1.5;
color: var(--eir-paper);
margin: 0;
}
.eir-island-resorts__grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
@media (max-width: 800px) {
.eir-island-getting__grid { grid-template-columns: 1fr; }
.eir-island-getting__col--wide { grid-column: 1; }
}
/* ── Resort responsive ─────────────────────────────────────── */
@media (max-width: 1000px) {
.eir-resort-accom__row,
.eir-resort-accom__row.is-flipped { grid-template-columns: 1fr; }
.eir-resort-accom__row.is-flipped .eir-resort-accom__media { order: 0; }
.eir-resort-dining__grid { grid-template-columns: 1fr; }
.eir-resort-spa__grid,
.eir-resort-location__grid { grid-template-columns: 1fr; }
.eir-resort-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.eir-resort-recognition__item { flex-direction: column; gap: 6px; }
.eir-resort-recognition__source { min-width: 0; }
.eir-resort-gallery__grid { grid-template-columns: 1fr; }
.eir-resort-specs__item + .eir-resort-specs__item::before { display: none; }
}
/* ─────────────────────────────────────────────────────────────
Chat widget — floating bubble + side panel powered by a
Vercel-hosted AI route. Block name is `eir-chat` to avoid
collision with the existing `.eir-concierge` CTA section on
the home page. Uses existing brand tokens; nothing here
introduces new colours or fonts.
───────────────────────────────────────────────────────────── */
.eir-chat { position: fixed; inset: auto 0 0 auto; z-index: 9000; pointer-events: none; }
.eir-chat > * { pointer-events: auto; }
/* ── Bubble ───────────────────────────────────────────────── */
/* Flush bottom-right. Horizontal "label" shape — eyebrow + separator +
italic-cyan signature, one line. Shadow casts upward since the bottom
edge sits against the viewport. */
.eir-chat__bubble {
position: fixed; bottom: 0; right: 24px;
display: inline-flex; flex-direction: row; align-items: center;
gap: 12px;
padding: 12px 22px;
background: var(--eir-ink); color: var(--eir-paper);
border: none;
font-family: var(--eir-font-sans);
cursor: pointer;
white-space: nowrap;
box-shadow: 0 -8px 28px rgba(11,37,64,0.18), 0 -2px 6px rgba(11,37,64,0.08);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.eir-chat__bubble:hover { background: var(--eir-deep); transform: translateY(-1px); }
.eir-chat__bubble:focus-visible { outline: 2px solid var(--eir-cyan); outline-offset: 3px; }
.eir-chat__bubble-eyebrow {
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 500;
}
.eir-chat__bubble-rule { width: 1px; height: 14px; background: var(--eir-cyan); opacity: 0.7; }
.eir-chat__bubble-sub {
font-family: var(--eir-font-display); font-style: italic;
color: var(--eir-cyan);
font-size: 14px;
}
/* Hide the bubble while the panel is open so the close × is the only affordance. */
body.eir-chat-open .eir-chat__bubble { display: none; }
/* ── Panel ────────────────────────────────────────────────── */
.eir-chat__panel {
position: fixed; bottom: 0; right: 24px;
width: 420px; max-width: calc(100vw - 32px);
height: 640px; max-height: calc(100dvh - 24px);
background: var(--eir-paper); color: var(--eir-ink);
display: flex; flex-direction: column;
box-shadow: 0 -8px 64px rgba(11,37,64,0.22), 0 -2px 14px rgba(11,37,64,0.08);
border: 1px solid rgba(11,37,64,0.08);
border-bottom: none;
font-family: var(--eir-font-sans);
}
.eir-chat__panel[hidden] { display: none; }
.eir-chat__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(11,37,64,0.08);
}
.eir-chat__head-eyebrow { color: var(--eir-cyan); }
.eir-chat__head-title {
margin: 6px 0 0;
font-family: var(--eir-font-display); font-weight: 300;
font-size: 24px; line-height: 1.1;
letter-spacing: -0.01em;
}
.eir-chat__head-actions {
display: flex; align-items: center; gap: 14px;
}
.eir-chat__end {
background: transparent; border: none;
padding: 4px 0;
font-family: var(--eir-font-sans);
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-ink-soft); cursor: pointer;
}
.eir-chat__end:hover { color: var(--eir-ink); }
.eir-chat__end:disabled { opacity: 0.4; cursor: not-allowed; }
.eir-chat__end:focus-visible { outline: 2px solid var(--eir-cyan); outline-offset: 2px; }
.eir-chat__close {
background: transparent; border: none;
font-size: 26px; line-height: 1;
color: var(--eir-ink-soft); cursor: pointer;
padding: 2px 8px;
}
.eir-chat__close:hover { color: var(--eir-ink); }
.eir-chat__close:focus-visible { outline: 2px solid var(--eir-cyan); outline-offset: 2px; }
/* ── Transcript form (appears after close) ────────────────── */
.eir-chat__transcript { margin-top: 18px; }
.eir-chat__transcript-form { display: block; }
.eir-chat__transcript-lede {
font-family: var(--eir-font-display);
font-size: 15px; line-height: 1.4;
color: var(--eir-ink);
margin-bottom: 10px;
}
.eir-chat__transcript-row {
display: flex; gap: 8px;
}
.eir-chat__transcript-input {
flex: 1;
background: transparent;
border: 1px solid rgba(11,37,64,0.14);
padding: 9px 12px;
font-family: var(--eir-font-sans); font-size: 14px;
color: var(--eir-ink);
}
.eir-chat__transcript-input:focus {
outline: none; border-color: var(--eir-ink);
}
.eir-chat__transcript-send {
padding: 9px 16px;
background: var(--eir-ink); color: var(--eir-paper);
border: none;
font-family: var(--eir-font-sans);
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
cursor: pointer;
}
.eir-chat__transcript-send:disabled { opacity: 0.5; cursor: not-allowed; }
.eir-chat__transcript-done {
font-family: var(--eir-font-display);
font-size: 15px; line-height: 1.4;
color: var(--eir-ink-soft);
}
/* ── Scroll area ──────────────────────────────────────────── */
.eir-chat__scroll {
flex: 1; overflow-y: auto;
padding: 20px 24px 8px;
}
/* Welcome state */
.eir-chat__welcome { padding-top: 4px; }
.eir-chat__welcome-lede {
margin: 0;
font-family: var(--eir-font-display);
font-size: 19px; line-height: 1.4;
color: var(--eir-ink);
}
.eir-chat__suggestions {
margin-top: 22px;
display: flex; flex-direction: column; gap: 8px;
}
.eir-chat__suggestion {
text-align: left;
padding: 12px 14px;
background: transparent;
border: 1px solid rgba(11,37,64,0.14);
color: var(--eir-ink);
font-family: var(--eir-font-sans); font-size: 14px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.eir-chat__suggestion:hover {
border-color: var(--eir-ink); background: #fff;
}
.eir-chat__suggestion:focus-visible {
outline: 2px solid var(--eir-cyan); outline-offset: 2px;
}
/* Messages */
.eir-chat__msg { margin-top: 18px; }
.eir-chat__msg:first-child { margin-top: 0; }
.eir-chat__msg--user {
display: flex; justify-content: flex-end;
}
.eir-chat__msg--user .eir-chat__bubble-msg {
background: var(--eir-sand);
padding: 10px 14px;
max-width: 88%;
font-size: 14px; line-height: 1.5;
color: var(--eir-ink);
}
.eir-chat__msg--assistant .eir-chat__msg-eyebrow {
color: var(--eir-cyan);
margin-bottom: 6px;
}
.eir-chat__msg-body {
font-size: 15.5px; line-height: 1.55;
color: var(--eir-ink);
}
.eir-chat__msg--assistant.is-streaming .eir-chat__msg-body::after {
content: '▍';
display: inline-block; margin-left: 2px;
color: var(--eir-cyan);
animation: eir-chat-caret 1s steps(1) infinite;
}
@keyframes eir-chat-caret {
0%, 60% { opacity: 1; }
61%, 100% { opacity: 0; }
}
/* ── Inline state note (e.g. "An advisor will join shortly.") ─ */
.eir-chat__state { margin-top: 18px; }
.eir-chat__state-body {
font-family: var(--eir-font-display);
font-size: 14px; line-height: 1.4;
color: var(--eir-ink-soft);
text-align: center;
padding: 10px 18px;
border-top: 1px solid rgba(11,37,64,0.08);
border-bottom: 1px solid rgba(11,37,64,0.08);
}
/* ── Typing indicator ────────────────────────────────────── */
.eir-chat__typing {
padding: 4px 24px 0;
font-size: 13px;
}
.eir-chat__typing[hidden] { display: none; }
/* ── Form ─────────────────────────────────────────────────── */
.eir-chat__form {
display: flex; gap: 8px;
padding: 16px 20px 18px;
border-top: 1px solid rgba(11,37,64,0.08);
background: var(--eir-paper);
}
.eir-chat__input {
flex: 1;
background: transparent;
border: 1px solid rgba(11,37,64,0.14);
padding: 11px 14px;
font-family: var(--eir-font-sans); font-size: 14px;
color: var(--eir-ink);
}
.eir-chat__input:focus {
outline: none;
border-color: var(--eir-ink);
}
.eir-chat__input::placeholder {
color: var(--eir-ink-soft); opacity: 0.55;
}
.eir-chat__send {
padding: 11px 20px;
background: var(--eir-ink); color: var(--eir-paper);
border: none;
font-family: var(--eir-font-sans);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
cursor: pointer;
transition: background .15s ease, opacity .15s ease;
}
.eir-chat__send:hover:not(:disabled) { background: var(--eir-deep); }
.eir-chat__send:disabled { opacity: 0.4; cursor: not-allowed; }
.eir-chat__send:focus-visible {
outline: 2px solid var(--eir-cyan); outline-offset: 2px;
}
/* ── Mobile: full-bleed sheet ─────────────────────────────── */
@media (max-width: 600px) {
.eir-chat__panel {
bottom: 0; right: 0; left: 0;
width: 100vw; max-width: 100vw;
height: 100dvh; max-height: 100dvh;
border: none;
}
.eir-chat__bubble { bottom: 0; right: 16px; padding: 12px 18px; }
}
/* ─────────────────────────────────────────────────────────────
Enquiry forms — brand-styled markup used by [eir_form id="…"].
Inherits :root tokens; nothing introduced here is new.
───────────────────────────────────────────────────────────── */
.eir-form {
max-width: 640px;
margin: 0 auto;
padding: var(--eir-s-6) var(--eir-gutter-x);
font-family: var(--eir-font-sans);
color: var(--eir-ink);
}
.eir-form__head { margin-bottom: 28px; }
.eir-form__eyebrow { margin-bottom: 10px; color: var(--eir-cyan); }
.eir-form__title {
font-family: var(--eir-font-display); font-weight: 300;
font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06;
letter-spacing: -0.015em; margin: 0 0 10px;
}
.eir-form__intro {
font-family: var(--eir-font-display); font-size: 17px; line-height: 1.5;
color: var(--eir-ink-soft); margin: 0; max-width: 60ch;
}
.eir-form__form { display: flex; flex-direction: column; gap: 18px; }
.eir-form__field { display: flex; flex-direction: column; gap: 6px; }
.eir-form__label {
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--eir-ink-soft); font-weight: 500;
}
.eir-form__req { color: var(--eir-cyan); margin-left: 4px; }
.eir-form input[type="text"],
.eir-form input[type="email"],
.eir-form input[type="tel"],
.eir-form input[type="number"],
.eir-form input[type="date"],
.eir-form select,
.eir-form textarea {
width: 100%;
background: var(--eir-paper);
border: 1px solid rgba(11,37,64,0.14);
padding: 12px 14px;
font-family: var(--eir-font-sans); font-size: 15px;
color: var(--eir-ink);
border-radius: 0;
-webkit-appearance: none;
}
.eir-form input:focus,
.eir-form select:focus,
.eir-form textarea:focus {
outline: none; border-color: var(--eir-ink);
}
.eir-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.eir-form select {
background-image: linear-gradient(45deg, transparent 50%, var(--eir-ink-soft) 50%),
linear-gradient(135deg, var(--eir-ink-soft) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
background-size: 6px 6px;
background-repeat: no-repeat;
padding-right: 36px;
}
.eir-form__error {
font-size: 12px; color: #c8453c; margin-top: 4px;
}
.eir-form__honeypot {
position: absolute; left: -10000px; width: 1px; height: 1px;
overflow: hidden;
}
.eir-form__foot { margin-top: 12px; }
.eir-form__submit {
background: var(--eir-ink); color: var(--eir-paper);
border: none;
padding: 14px 28px;
font-family: var(--eir-font-sans);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
cursor: pointer;
transition: background .15s ease, opacity .15s ease;
}
.eir-form__submit:hover:not(:disabled) { background: var(--eir-deep); }
.eir-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.eir-form__submit:focus-visible { outline: 2px solid var(--eir-cyan); outline-offset: 3px; }
.eir-form__status {
margin-top: 14px;
font-size: 13px; color: var(--eir-ink-soft);
}
.eir-form__thanks {
padding: 22px 0;
}
.eir-form__thanks-body {
font-family: var(--eir-font-display); font-size: 22px; line-height: 1.4;
color: var(--eir-ink); margin: 0;
}
/* ─────────────────────────────────────────────────────────────
Resorts map — Leaflet implementation with Carto Positron
tiles + custom cyan div-icon pins. Lives in inc/resorts-map.php,
rendered via the [eir_resorts_map] shortcode.
───────────────────────────────────────────────────────────── */
.eir-map {
padding: var(--eir-s-7) var(--eir-gutter-x);
background: var(--eir-paper);
color: var(--eir-ink);
}
/* Compact variant — used when the map sits inside another section
(e.g. the per-resort location section). No outer padding/background;
the surrounding template owns the chrome. */
.eir-map--compact { padding: 0; background: transparent; }
.eir-map--compact .eir-map__leaflet { max-width: none; margin: 0; }
/* Split variant — two side-by-side maps, each fit to its own island.
Reads better on the home page than one map zoomed out to fit both. */
.eir-map__split {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.eir-map__split-panel { display: flex; flex-direction: column; }
.eir-map__split-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 12px;
padding: 0 4px;
}
.eir-map__split-count {
font-family: var(--eir-font-display);
font-style: italic;
font-size: 16px;
color: var(--eir-cyan);
}
.eir-map__split .eir-map__leaflet { max-width: none; margin: 0; }
@media (max-width: 900px) {
.eir-map__split { grid-template-columns: 1fr; gap: 36px; }
}
.eir-map__head {
max-width: 760px;
margin: 0 auto var(--eir-s-5);
text-align: center;
}
.eir-map__eyebrow { color: var(--eir-cyan); margin-bottom: 14px; }
.eir-map__title {
font-family: var(--eir-font-display); font-weight: 300;
font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04;
letter-spacing: -0.015em;
margin: 0 0 18px;
}
.eir-map__lede {
font-family: var(--eir-font-display);
font-size: 18px; line-height: 1.5;
color: var(--eir-ink-soft);
max-width: 60ch; margin: 0 auto;
}
/* ── Leaflet container ───────────────────────────────────── */
.eir-map__leaflet {
max-width: 1100px;
margin: 0 auto;
border: 1px solid rgba(11,37,64,0.10);
background: var(--eir-sand-soft, #faf6ef);
}
/* Leaflet attribution — muted, on-brand */
.leaflet-container .leaflet-control-attribution {
background: rgba(251,248,242,0.85);
font-family: var(--eir-font-sans);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--eir-ink-soft);
padding: 2px 8px;
}
.leaflet-container .leaflet-control-attribution a {
color: var(--eir-ink);
}
/* Leaflet zoom buttons — square, ink, no chrome */
.leaflet-container .leaflet-bar {
border: 1px solid rgba(11,37,64,0.18);
border-radius: 0;
box-shadow: none;
}
.leaflet-container .leaflet-bar a {
background: var(--eir-paper);
color: var(--eir-ink);
font-family: var(--eir-font-sans);
border: none;
border-radius: 0;
border-bottom: 1px solid rgba(11,37,64,0.10);
}
.leaflet-container .leaflet-bar a:last-child { border-bottom: none; }
.leaflet-container .leaflet-bar a:hover {
background: var(--eir-ink); color: var(--eir-paper);
}
/* ── Custom div-icon pin (cyan dot + on-hover aura) ──────── */
.eir-map__pin-icon { background: none !important; border: none !important; }
.eir-map__pin-icon .eir-map__pin-dot {
position: absolute; left: 50%; top: 50%;
width: 20px; height: 20px;
background: var(--eir-cyan);
border: 3px solid var(--eir-paper);
border-radius: 999px;
transform: translate(-50%, -50%);
box-shadow: 0 2px 6px rgba(11,37,64,0.40);
transition: width 0.15s ease, height 0.15s ease;
z-index: 2;
}
.eir-map__pin-icon .eir-map__pin-aura {
position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px;
background: var(--eir-cyan);
border-radius: 999px;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease;
z-index: 1;
}
.eir-map__pin-icon:hover .eir-map__pin-aura { opacity: 0.22; }
.eir-map__pin-icon:hover .eir-map__pin-dot { width: 24px; height: 24px; }
/* Legend → pin bounce: when the user hovers a resort in the list below the
map, the matching pin lifts and pulses so they can spot it. JS sets
.is-hover via mouseenter/leave on the legend link. */
.eir-map__pin-icon.is-hover .eir-map__pin-aura {
opacity: 0.30;
animation: eir-pin-aura-pulse 1.4s ease-in-out infinite;
}
.eir-map__pin-icon.is-hover .eir-map__pin-dot {
animation: eir-pin-bounce 0.9s ease-in-out infinite;
width: 26px;
height: 26px;
box-shadow: 0 6px 14px rgba(11,37,64,0.45);
z-index: 1000;
}
@keyframes eir-pin-bounce {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, calc(-50% - 10px)); }
}
@keyframes eir-pin-aura-pulse {
0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.42; transform: translate(-50%, -50%) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
.eir-map__pin-icon.is-hover .eir-map__pin-dot,
.eir-map__pin-icon.is-hover .eir-map__pin-aura { animation: none; }
}
/* ── Editorial popup — overrides Leaflet's default chrome ── */
.eir-map__popup .leaflet-popup-content-wrapper {
background: var(--eir-paper);
color: var(--eir-ink);
border-radius: 0;
padding: 0;
box-shadow: 0 8px 28px rgba(11,37,64,0.18), 0 2px 6px rgba(11,37,64,0.08);
border: 1px solid rgba(11,37,64,0.10);
overflow: hidden; /* so the lead image clips to the card edges */
}
.eir-map__popup .leaflet-popup-content {
margin: 0;
font-family: var(--eir-font-sans);
line-height: 1.45;
width: 280px !important;
}
.eir-map__popup .leaflet-popup-tip {
background: var(--eir-paper);
border: 1px solid rgba(11,37,64,0.10);
box-shadow: none;
}
.eir-map__popup-card { display: block; }
.eir-map__popup-img {
display: block;
width: 100%;
height: 150px;
background-size: cover;
background-position: center;
background-color: var(--eir-sand);
text-decoration: none;
}
.eir-map__popup-body { padding: 16px 20px 18px; }
.eir-map__popup-eyebrow {
margin-bottom: 6px;
color: var(--eir-cyan);
}
.eir-map__popup-title {
font-family: var(--eir-font-display); font-weight: 300;
font-size: 22px; line-height: 1.1;
color: var(--eir-ink);
margin-bottom: 6px;
}
.eir-map__popup-corner {
font-family: var(--eir-font-sans);
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--eir-ink-soft);
margin-bottom: 12px;
}
.eir-map__popup-link {
font-family: var(--eir-font-display); font-style: italic;
font-size: 16px; text-decoration: none;
}
/* ── Legend below the map ────────────────────────────────── */
.eir-map__legend {
max-width: 1100px; margin: 36px auto 0; padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 32px;
}
.eir-map__legend-link {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: baseline;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(11,37,64,0.08);
color: var(--eir-ink);
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease;
}
.eir-map__legend-link:hover {
color: var(--eir-cyan);
border-bottom-color: var(--eir-ink);
}
.eir-map__legend-dot {
width: 10px; height: 10px;
border-radius: 999px;
background: var(--eir-cyan);
display: inline-block;
transform: translateY(2px);
}
.eir-map__legend-name {
font-family: var(--eir-font-display);
font-size: 19px;
}
.eir-map__legend-corner {
font-family: var(--eir-font-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--eir-ink-soft);
}
@media (max-width: 700px) {
.eir-map__legend { grid-template-columns: 1fr; gap: 0; }
}
/* Standard WP accessible-hidden helper. WordPress core + form templates
rely on this class to hide labels visually while keeping them in the
accessibility tree. Without it, the search form's