/* Evolve Escapes — design system v3 (round 3, 01/09/2026) Direction: "First Light" — sun-bleached, carved, strong. Round-3 changes: - Display face: Archivo (Expanded width, 600-800) replaces Syne. Conventional, legible letterforms with wide athletic energy. Body stays Hanken Grotesk. - Motion rebuilt on universal mechanics: CSS keyframe entrances + an IntersectionObserver reveal system in /assets/site.js. No chrome-only animation-timeline. A `js` class on gates every pre-animation hidden state; prefers-reduced-motion disables everything. - Panel consistency rule: INK IS STRUCTURAL, NOT DECORATIVE. Ink surfaces are full-bleed bands only (header, hero, proof band, full ink sections, footer). Cards and panels inside light sections are ALWAYS white. Stone is a section background, never a card colour. - New components: .pillars (image-led), .tile-photo (photo-overlay destination tiles), .day-list (editorial itinerary), .ig-grid, .to-top. Palette unchanged from v2 (clients' verified brand system). Contrast (computed, WCAG AA): ink/cream 16.9:1 · text-2/cream 6.0:1 · on-ink/ink 15.0:1 · gold/ink 7.6:1 · ink on clay 5.3:1 · clay-text/cream 5.75:1. Gold #D9A05C and clay #C67B5C are NEVER body text on light surfaces. */ :root { --cream: #FFFBF5; --cream-2: #F8F5F0; --stone: #E8DDD0; --stone-2: #F4EFE6; --line: #E0D3C1; --ink: #1A1A18; --ink-deep: #0E0E0E; --ink-soft: #2A2A26; --text: #1A1A18; --text-2: #6B5F4E; --on-ink: #F4EDE1; --on-ink-2: #CBC2B2; --gold: #D9A05C; --gold-deep: #8A6320; --clay: #C67B5C; --clay-soft: #D0906F; --clay-deep: #9C5136; --clay-text: #9C4E2F; --sage: #5B6144; /* legacy aliases kept for inline references */ --sand: var(--cream); --sand-deep: var(--stone-2); --sand-line: var(--line); --radius: 14px; --radius-sm: 8px; --font-display: "Archivo", "Avenir Next", sans-serif; --font-body: "Hanken Grotesk", "Avenir Next", sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* Anchored sections land clear of the sticky header (round 5: /retreats/#destinations) */ main [id] { scroll-margin-top: 78px; } body { background: var(--cream); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } h1, h2, h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-stretch: 118%; } h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); margin-bottom: 0.6em; font-stretch: 118%; } h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; margin-bottom: 0.4em; } h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.35em; } p, li { max-width: 68ch; } p { text-wrap: pretty; } /* Wrap-measure rule (round 5, supersedes round 4): a standalone line in a wide section runs the FULL container measure. Round 4 capped this at 95ch with text-wrap: balance, but balance splits any 100-250 char line into two equal half-width lines, which reads as the same narrow block the founder keeps flagging. Full width + pretty = first line fills the section, no orphans. */ .line-wide { max-width: 100%; text-wrap: pretty; } a { color: inherit; } strong { font-weight: 700; } :focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 3px; border-radius: 2px; } .panel-ink :focus-visible, .hero :focus-visible, footer :focus-visible, .site-header :focus-visible, .to-top:focus-visible { outline-color: var(--gold); } .container { max-width: 1180px; margin-inline: auto; padding-inline: 22px; } .section { padding-block: clamp(60px, 9.5vw, 116px); } .section-tight { padding-block: clamp(44px, 6vw, 76px); } /* The gold horizon — the site's signature rule. Draws on load, everywhere. */ .horizon { border: 0; height: 2px; background: var(--gold); width: 84px; margin: 0 0 26px; transform-origin: left; animation: horizon-draw 0.9s var(--ease-out) both; } .horizon-wide { width: 100%; opacity: 0.55; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--on-ink); border-bottom: 1px solid rgba(217, 160, 92, 0.35); } .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; } .nav-logo img { height: 26px; width: auto; } .nav-links { display: none; list-style: none; gap: 28px; align-items: center; } .nav-links a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--on-ink); padding-block: 6px; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; } .nav-links a:hover { border-bottom-color: var(--gold); } .nav-links a[aria-current="page"], .nav-links a.current-section { border-bottom-color: var(--gold); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-menu { position: relative; } .nav-menu > summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 0.9rem; padding: 8px 12px; border: 1px solid rgba(244, 237, 225, 0.4); border-radius: var(--radius-sm); color: var(--on-ink); } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu[open] > summary { background: var(--ink-soft); } .nav-menu .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); background: var(--ink); border-radius: var(--radius); padding: 14px; min-width: 220px; box-shadow: 0 18px 40px rgba(10, 10, 8, 0.45); } .nav-menu .menu-panel a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 600; border-radius: var(--radius-sm); color: var(--on-ink); } .nav-menu .menu-panel a:hover { background: var(--ink-soft); color: #fff; } /* Retreats dropdown (desktop). CSS-only open on :hover/:focus-within with a close-grace (delayed hide) so diagonal mouse paths survive; the parent link still navigates to /retreats. JS adds a caret toggle with aria-expanded for touch/keyboard; without JS the caret is hidden and hover/focus still work. */ .nav-drop { position: relative; display: flex; align-items: center; gap: 2px; } .drop-panel { position: absolute; left: -14px; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease 0.25s, transform 0.18s var(--ease-out) 0.25s, visibility 0s linear 0.43s; z-index: 60; } .drop-panel-inner { background: var(--ink); border-radius: var(--radius); padding: 10px; min-width: 250px; box-shadow: 0 18px 40px rgba(10, 10, 8, 0.45); } .nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel, .nav-drop.open .drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } /* Two dropdowns (round 5): the close-grace must die the instant a SIBLING drop engages, or both panels show at once during the grace window. When no drop is engaged the selector stops matching, so each panel keeps its own grace. */ .nav-links:has(.nav-drop:is(:hover, .open, :focus-within)) .nav-drop:not(:hover):not(.open):not(:focus-within) .drop-panel { transition: none; } .drop-panel a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); border-bottom: 0; font-size: 0.95rem; white-space: nowrap; } .drop-panel a:hover { background: var(--ink-soft); color: #fff; border-bottom: 0; } .drop-panel a[aria-current="page"] { border-bottom: 0; color: var(--gold); } .drop-panel .drop-all { border-top: 1px solid rgba(217, 160, 92, 0.3); margin-top: 6px; padding-top: 12px; color: var(--on-ink-2); font-size: 0.9rem; } .drop-toggle { display: none; background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--on-ink); } .js .drop-toggle { display: inline-flex; align-items: center; } .drop-toggle svg { width: 12px; height: 12px; stroke: var(--gold); stroke-width: 2.4; fill: none; transition: transform 0.25s var(--ease-out); } .nav-drop.open .drop-toggle svg, .nav-drop:hover .drop-toggle svg { transform: rotate(180deg); } /* Mobile menu sub-items (retreats under Retreats) */ .nav-menu .menu-panel a.menu-sub { position: relative; padding-left: 32px; font-size: 0.92rem; color: var(--on-ink-2); } .menu-panel .menu-sub::before { content: ""; position: absolute; left: 12px; top: calc(50% - 1px); width: 12px; height: 2px; background: var(--gold); } /* Round 5: five items + two carets need ~920px with the logo and CTA, so the desktop nav appears at 960px (was 880) and runs a tighter gap up to 1120px. */ @media (min-width: 960px) { .nav-links { display: flex; } .nav-menu { display: none; } } @media (min-width: 960px) and (max-width: 1120px) { .nav-links { gap: 18px; } } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: var(--radius-sm); padding: 14px 26px; border: 0; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out); } .btn-primary { background: var(--clay); color: var(--ink); } .btn-primary:hover { background: var(--clay-soft); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(156, 81, 54, 0.28); } .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--on-ink); } .btn-ghost-light { background: transparent; color: var(--on-ink); box-shadow: inset 0 0 0 2px var(--on-ink); } .btn-ghost-light:hover { background: var(--on-ink); color: var(--ink); } .btn-small { padding: 10px 18px; font-size: 0.92rem; } @media (max-width: 480px) { .nav-cta .btn-small { white-space: nowrap; font-size: 0.85rem; padding: 9px 12px; } } .text-link { font-weight: 600; color: var(--text); text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--gold); transition: text-decoration-color 0.2s ease; } .text-link:hover { text-decoration-color: var(--clay-deep); } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--ink); min-height: 78vh; display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; } .hero-full { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); } .hero-photo { position: absolute; inset: 0; z-index: -2; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: first-light 1.8s var(--ease-out) both; } .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgba(14, 14, 14, 0.88) 0%, rgba(14, 14, 14, 0.55) 34%, rgba(14, 14, 14, 0.12) 62%, rgba(14, 14, 14, 0.05) 100% ); } .hero-inner { width: 100%; padding-block: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 48px); } @media (max-width: 640px) { .hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); } .hero p { margin-top: 14px; } .hero-actions { margin-top: 20px; } } .hero .horizon { animation: horizon-draw 1.1s 0.5s var(--ease-out) both; } .hero h1 { animation: rise-in 0.9s 0.15s var(--ease-out) both; } .hero p { color: #F5EEE1; font-size: clamp(1.05rem, 2vw, 1.25rem); margin-top: 18px; animation: rise-in 0.9s 0.3s var(--ease-out) both; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; animation: rise-in 0.9s 0.45s var(--ease-out) both; } .hero-actions .text-link { color: #fff; } .hero .ledger { animation: rise-in 0.9s 0.6s var(--ease-out) both; } @keyframes first-light { from { filter: brightness(0.66) saturate(0.82); transform: scale(1.07); } to { filter: brightness(1) saturate(1); transform: scale(1); } } @keyframes horizon-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ---------- Scroll reveals (JS-gated: nothing hides without the js class) ---------- site.js adds .reveal only to elements BELOW the first viewport, then flips .is-in via IntersectionObserver. Stagger comes from --rd set per sibling. */ .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease var(--rd, 0s), transform 0.8s var(--ease-out) var(--rd, 0s); } .js .reveal.is-in { opacity: 1; transform: none; } /* The retreat ledger — one line of facts on the horizon. Wrap-safe (round 4): items are flex children spaced by gap, so each fact wraps as a whole. The gold dash lives in the gap via an absolute ::before; overflow:hidden clips the dash when an item starts a wrapped line, so no line ever opens with a dangling separator. */ .ledger { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; margin-top: 30px; padding-top: 16px; border-top: 2px solid var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.98rem; color: #F5EEE1; max-width: 720px; overflow: hidden; } .ledger span { position: relative; } .ledger span + span::before { content: ""; position: absolute; left: -22px; top: calc(50% - 1px); width: 14px; height: 2px; background: var(--gold); } .ledger-dark { color: var(--text); border-top-color: var(--gold); } /* ---------- Ink panels (FULL-BLEED SECTIONS ONLY — never cards) ---------- */ .panel-ink { background: var(--ink); color: var(--on-ink); } .panel-ink h2, .panel-ink h3 { color: #fff; } .panel-ink p { color: var(--on-ink); } .panel-ink strong { color: #fff; } .panel-ink .muted { color: var(--on-ink-2); } .panel-sand-deep { background: var(--stone-2); } .panel-stone { background: var(--stone); } .muted { color: var(--text-2); } /* A single pulled line in their voice — big, quiet band */ .pull-line { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.3rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance; } /* ---------- Full-bleed image bands ---------- */ .band { position: relative; overflow: hidden; max-height: 520px; } .band img { width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; } /* JS-driven settle-in: image starts zoomed, eases to rest when the band enters. */ .js .band img { transform: scale(1.1); transition: transform 1.6s var(--ease-out); transform-origin: center; } .js .band.is-in img { transform: scale(1); } .band-caption { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 60px 22px 22px; background: linear-gradient(to top, rgba(14, 14, 14, 0.85), rgba(14, 14, 14, 0.4) 60%, rgba(14, 14, 14, 0)); color: #F5EEE1; font-weight: 600; font-size: 1rem; /* Round 5: bands carry a CTA. Caption left, button bottom-right on desktop; the button wraps below the caption on narrow screens. The clay button carries its own AA surface (ink on clay 5.3:1), independent of the photo. */ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; } .band-caption > span { display: inline-block; border-top: 2px solid var(--gold); padding-top: 10px; max-width: 1136px; flex: 1 1 300px; } .band-cta { flex-shrink: 0; } @media (min-width: 1180px) { .band-caption { padding-inline: calc((100vw - 1136px) / 2); } } /* ---------- Galleries ---------- */ .gallery { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .gallery figure { position: relative; border-radius: var(--radius); overflow: hidden; margin: 0; } .gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .gallery .gallery-wide { grid-column: 1 / -1; } .gallery .gallery-wide img { aspect-ratio: 21 / 10; } @media (min-width: 860px) { .gallery { grid-template-columns: repeat(3, 1fr); } .gallery .gallery-wide { grid-column: span 2; grid-row: span 1; } .gallery .gallery-wide img { aspect-ratio: auto; } } /* Round 7: gallery balancing utilities, so no empty grid cells at any width. .gallery-full spans the whole row at every width (hero image of a gallery); .gallery-wide keeps its round-1 behaviour (full row on phones, 2 of 3 columns on desktop). Arrange counts so every row closes. */ .gallery .gallery-full { grid-column: 1 / -1; } .gallery .gallery-full img { aspect-ratio: 16 / 10; } @media (min-width: 860px) { .gallery .gallery-full img { aspect-ratio: 21 / 9; } } .gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; background: linear-gradient(to top, rgba(14, 14, 14, 0.82), rgba(14, 14, 14, 0.35) 65%, rgba(14, 14, 14, 0)); color: #F5EEE1; font-weight: 600; font-size: 0.92rem; } /* ---------- Image-led pillars (salt "Why" pattern, our brand system) ---------- Round 4: stagger removed — all pillar images sit at the same height, top-aligned. */ .pillars { display: grid; gap: 34px; margin-top: 40px; align-items: start; } @media (min-width: 700px) { .pillars { grid-template-columns: 1fr 1fr; gap: 44px 48px; } } @media (min-width: 1024px) { .pillars-4 { grid-template-columns: repeat(4, 1fr); gap: 34px; } } .pillar-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 18px; } .pillar-photo img { width: 100%; height: 100%; object-fit: cover; } .pillar h3 { margin-bottom: 6px; } .pillar p { font-size: 1rem; } /* ---------- Photo-overlay destination tiles (salt destination-card pattern) ---------- */ a.tile-photo { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; color: #fff; isolation: isolate; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .tile-photo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } .tile-photo .tile-overlay { position: absolute; inset: auto 0 0 0; padding: 90px 22px 20px; background: linear-gradient(to top, rgba(14, 14, 14, 0.94), rgba(14, 14, 14, 0.6) 55%, rgba(14, 14, 14, 0)); } .tile-photo h3 { color: #fff; margin-bottom: 4px; } .tile-photo .tile-overlay p { color: #F5EEE1; font-size: 0.98rem; margin: 0; } .tile-photo .tile-go { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 0.92rem; color: var(--gold); } .tile-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .tile-photo:hover, .tile-photo:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(26, 26, 24, 0.18); } .tile-photo:hover::after { transform: scaleX(1); } /* ---------- Instagram grid ---------- */ .ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; } @media (min-width: 760px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } } .ig-grid a { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .ig-grid img { width: 100%; height: 100%; object-fit: cover; } .ig-grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 14, 0.3), transparent 45%); opacity: 0; transition: opacity 0.25s ease; } .ig-grid a:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(26, 26, 24, 0.16); } .ig-grid a:hover::after { opacity: 1; } /* ---------- Editorial day-by-day itinerary (no boxes) ---------- */ .day-list { margin-top: 34px; border-top: 2px solid var(--gold); } .day { display: grid; gap: 8px 44px; padding-block: 30px; border-bottom: 1px solid var(--line); } @media (min-width: 760px) { .day { grid-template-columns: 200px 1fr; } } .day-name { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: 1.25rem; line-height: 1.2; } .day-name small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; color: var(--gold-deep); margin-bottom: 4px; } /* Round 16: one entry per line, each with its own gold tick. The previous wrapping row bunched two or three times together and broke the reading order of the day (Alex, 07/09). Body line-height is 1.6, so the tick sits at 0.8em to centre on the first line of a wrapping entry. */ .day-times { display: grid; gap: 9px; margin-top: 12px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.95rem; color: var(--text-2); } .day-times span { position: relative; padding-left: 24px; } .day-times span::before { content: ""; position: absolute; left: 0; top: calc(0.8em - 1px); width: 12px; height: 2px; background: var(--gold); } /* ---------- Cards (always white — ink and stone are section colours) ---------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: border-color 0.2s ease, transform 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out); } a.card { text-decoration: none; color: inherit; } .card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 18px 38px rgba(26, 26, 24, 0.14); } .card:hover::after { transform: scaleX(1); } .card-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .card-photo img { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card-body h3 { margin-bottom: 0; } .tile-label { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; } .card-facts { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.95rem; color: var(--text-2); border-top: 2px solid var(--gold); padding-top: 10px; margin-top: auto; } .badge { position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; } .badge-live { background: var(--clay); color: var(--ink); } .badge-inline { display: inline-block; position: static; margin-bottom: 4px; width: fit-content; } /* ---------- Split sections (image height locked to content height) ---------- */ .split { display: grid; gap: 28px; align-items: stretch; } .split-photo { border-radius: var(--radius); overflow: hidden; align-self: stretch; min-height: 300px; max-height: 600px; } .split-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; } .split-photo-capped { max-height: 460px; } .split-photo-capped img { object-position: center 30%; } @media (min-width: 860px) { .split { grid-template-columns: 7fr 5fr; gap: 56px; } .split.flip .split-photo { order: 2; } .split-8-4 { grid-template-columns: 8fr 4fr; } } @media (max-width: 859px) { .split-photo, .split-photo img { min-height: 0; max-height: 380px; } } /* ---------- Steps on the horizon ---------- */ .steps { list-style: none; display: grid; gap: 30px; counter-reset: step; } .steps li { position: relative; padding-top: 18px; border-top: 2px solid var(--gold); } .steps li::before { counter-increment: step; content: counter(step); font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: 1.1rem; color: var(--gold-deep); display: block; margin-bottom: 6px; } .panel-ink .steps li::before { color: var(--gold); } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } .steps-4 { grid-template-columns: repeat(4, 1fr); } } /* ---------- Quotes ---------- */ .quote-row { display: grid; gap: 24px; } @media (min-width: 860px) { .quote-row { grid-template-columns: repeat(3, 1fr); } } .quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; } .quote blockquote { font-size: 1.05rem; line-height: 1.55; } .quote cite { font-style: normal; font-weight: 600; color: var(--text-2); font-size: 0.92rem; border-top: 2px solid var(--gold); padding-top: 10px; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 4px; font-weight: 700; font-size: 1.08rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-deep); flex-shrink: 0; transition: transform 0.25s var(--ease-out); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq-body { padding: 0 4px 22px; color: var(--text-2); } .faq summary:hover { color: var(--clay-text); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } table.data { border-collapse: collapse; width: 100%; font-size: 0.98rem; } table.data th, table.data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data th { font-weight: 700; border-bottom: 2px solid var(--gold); white-space: nowrap; } /* ---------- Forms ---------- */ .form-grid { display: grid; gap: 18px; } @media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .form-full { grid-column: 1 / -1; } } .field label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; } .field .hint { font-weight: 400; color: var(--text-2); font-size: 0.88rem; } .field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--text); background: #fff; border: 1px solid #B3A48C; border-radius: var(--radius-sm); padding: 12px 14px; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 1px; } .field textarea { min-height: 130px; resize: vertical; } .note-box { background: var(--stone-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; color: var(--text); font-size: 0.98rem; } .note-box p { max-width: none; } /* ---------- Capture states ---------- The capture worker answers a plain POST with a 303 back to the site: /enquiry/?sent=1 | ?error=1 and {page}?club=joined | ?club=error. These blocks are hidden until the page (inline script / site.js) reads the query param. Never show a success state the worker did not send. */ /* display:grid/flex on the form classes beats the [hidden] UA style */ .form-grid[hidden], .club-form[hidden] { display: none; } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-state { background: var(--stone-2); border-radius: var(--radius); padding: 22px 24px; color: var(--text); margin-top: 14px; } .form-state[hidden] { display: none; } .form-state:focus { outline: none; } .form-state p { max-width: none; } .form-state h2 { font-size: 1.5rem; margin-bottom: 10px; } .form-state .horizon { margin-bottom: 14px; } .form-state-error { background: #F9E9E2; } .form-state-error a { color: var(--clay-text); font-weight: 700; } /* Panel rule: cards inside stone sections are white, never stone-on-stone */ .panel-sand-deep .form-state { background: #fff; } .panel-sand-deep .form-state-error { background: #F9E9E2; } /* Top-of-page strip for Travel Club popup joins returning to any page */ .club-return { background: var(--ink); color: var(--on-ink); text-align: center; padding: 14px 22px; font-size: 0.98rem; } .club-return a { color: var(--gold); font-weight: 700; } .club-return-error { background: var(--clay-deep); color: #fff; } .club-return-error a { color: #fff; font-weight: 700; } /* ---------- Inline email capture ---------- */ .club-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .club-form input { flex: 1 1 240px; font: inherit; padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid #B3A48C; background: #fff; color: var(--text); } /* ---------- Travel Club popup (JS-only enhancement; inline section is the no-JS path) ---------- */ .club-popup { margin: auto; /* the global reset strips the UA's dialog centring */ border: 0; border-radius: var(--radius); padding: 0; max-width: min(92vw, 460px); overflow: hidden; background: var(--cream); color: var(--text); box-shadow: 0 30px 80px rgba(14, 14, 14, 0.4); } .club-popup::backdrop { background: rgba(14, 14, 14, 0.55); } .club-popup[open] { animation: popup-in 0.45s var(--ease-out) both; } @keyframes popup-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .club-popup-photo img { width: 100%; height: 150px; object-fit: cover; } .club-popup-body { padding: 24px 26px 26px; } /* Initial dialog focus lands on the panel (tabindex=-1 + autofocus), not the ×, so opening the popup never paints a focus ring on the close button. Keyboard users tabbing to controls still get full focus rings. */ .club-popup-body:focus { outline: none; } .club-popup-body h2 { font-size: 1.4rem; margin-bottom: 8px; } .club-popup-body .horizon { margin-bottom: 14px; } .club-popup-body p { font-size: 0.98rem; } .club-popup-offer { font-weight: 700; font-size: 1.12rem; color: var(--clay-text); } .club-popup .club-form { margin-top: 14px; } .club-popup .club-form input { flex: 1 1 160px; } /* Round 7: no ring; a clean white circle with a soft shadow reads on any photo. */ .club-popup-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; background: #fff; border: 0; border-radius: 999px; width: 44px; height: 44px; padding: 0; color: var(--text); cursor: pointer; box-shadow: 0 2px 12px rgba(14, 14, 14, 0.28); } .club-popup-close svg { display: block; width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; } .club-popup-close:hover { background: var(--stone); } .club-popup-dismiss { background: none; border: 0; font: inherit; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-top: 10px; padding: 4px 0; } /* ---------- Back to top ---------- */ .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); box-shadow: 0 10px 24px rgba(14, 14, 14, 0.3); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s var(--ease-out), background-color 0.2s ease; } .to-top.show { opacity: 1; pointer-events: auto; transform: none; } .to-top:hover { background: var(--ink-soft); } .to-top svg { display: block; width: 18px; height: 18px; stroke: var(--gold); stroke-width: 2.4; fill: none; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: var(--on-ink); padding-block: 56px 34px; } .footer-grid { display: grid; gap: 36px; } @media (min-width: 860px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .site-footer .footer-title { font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 10px; } .site-footer ul { list-style: none; display: grid; gap: 8px; } .site-footer .muted { color: var(--on-ink-2); } .site-footer a { color: var(--on-ink); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-logo img { height: 30px; width: auto; margin-bottom: 14px; } .footer-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(217, 160, 92, 0.4); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 0.9rem; color: var(--on-ink-2); } .footer-credit { color: var(--gold); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(217, 160, 92, 0.5); } .footer-credit:hover { border-bottom-color: var(--gold); } .social-links { display: flex; gap: 14px; } .social-links a { display: inline-flex; padding: 6px; } .social-links svg { width: 20px; height: 20px; fill: none; stroke: var(--on-ink); stroke-width: 1.6; } .social-links a:hover svg { stroke: var(--gold); } /* ---------- Utility ---------- */ .grid-3 { display: grid; gap: 24px; } @media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .grid-2 { display: grid; gap: 24px; } @media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-4 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @media (min-width: 860px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .center { text-align: center; } .center p { margin-inline: auto; } .stack > * + * { margin-top: 14px; } .prose > * + * { margin-top: 16px; } .prose h3 { margin-top: 34px; } .prose > section + section { margin-top: 56px; } .prose section h2 { margin-bottom: 16px; } .prose section h3 { margin-top: 30px; margin-bottom: 8px; } .prose ul, .prose ol { padding-left: 22px; } .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-2); } .wide-cta { border-radius: var(--radius); padding: clamp(30px, 5vw, 56px); } .toc { list-style: none; display: grid; gap: 6px; font-variant-numeric: tabular-nums; } .toc a { text-decoration: none; font-weight: 600; padding-block: 4px; display: inline-block; } .toc a:hover { color: var(--clay-text); } @media (min-width: 760px) { .toc { grid-template-columns: 1fr 1fr; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 12px; top: 12px; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .hero-photo img { animation: none; filter: none; transform: none; } .hero .horizon, .horizon { animation: none; transform: none; } .js .reveal { opacity: 1; transform: none; } .js .band img { transform: none; } } /* ========================================================================== Standalone retreat site — additions (09/09/2026) One page, one job: pick a room, pick how you pay, go to checkout. Nothing here overrides a shared rule; it only adds the components the main site has no use for. Depth is declared ONCE per element (a border OR a shadow). ========================================================================== */ /* ---------- Lean footer (wordmark + legal only) ---------- */ .footer-lean { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; } .footer-lean img { height: 30px; width: auto; display: block; } .footer-lean nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.95rem; } .footer-lean nav a { border-bottom: 1px solid rgba(217, 160, 92, 0.45); } .footer-lean nav a:hover { border-bottom-color: var(--gold); text-decoration: none; } /* ---------- Return states (?reserve=unavailable | ?reserve=error) ---------- Both blocks ship in the HTML, hidden. The inline script only unhides one, so a state can never be invented client-side. Full-bleed so it is impossible to miss when the worker sends someone back to the top of the page. */ .notice { padding-block: 16px; border-bottom: 2px solid var(--gold); } .notice[hidden] { display: none; } .notice:focus { outline: none; } .notice p { max-width: 72ch; font-size: 1rem; } .notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .notice-warn { background: var(--ink); color: var(--on-ink); } .notice-error { background: var(--clay-deep); color: #fff; border-bottom-color: #fff; } /* Inline version, used by the