) because none of these classes belong to this page: .h3-heading-3 and .paragraph-large are sitewide Webflow, .faq-tabs-title and .faq_accordion are shared with /faq, and .why-cta-chip/.why-cta-row come from the home page's why-book-direct block. Unscoped, this would restyle all of them. ══════════════════════════════════════════════════════════════════════════ */ /* ── Section rhythm and dividers ───────────────────────────────────── The page sits on the band's wash rather than white, and each section draws its own top hairline — the same self-healing arrangement as the home page (several of these sections render conditionally, so whichever one follows still marks the boundary). Inset to the content rail and faded at both ends so no rule terminates in a hard stub. */ .resort-page, .search-page, .blog-page, .chalet-page, .about-page, .host-page, .host-profile-page, .auth-page, .not-found-page { background: radial-gradient(42rem 18rem at 18% 12%, rgba(124, 116, 214, 0.1), transparent 66%), radial-gradient(38rem 16rem at 84% 62%, rgba(42, 144, 199, 0.08), transparent 66%), linear-gradient(180deg, #f7f8fc 0%, #f2f3fa 45%, #f7f8fc 100%); } .resort-page > section, .resort-page .section-large-2, .resort-page .section-medium { position: relative; border-top: 0; border-bottom: 0; background: transparent; /* --section-pad-y is 9vw — 129.6px a side at 1440, so 259px of empty wash at every join. That reads as generous on the home page, whose sections carry 600–900px of content each; here the guide, hosts and popular-search blocks are 257–567px, so half of each section was padding and the page read as sparse rather than airy. Roughly halved, which keeps the band's rhythm without the holes. */ padding-block: clamp(2.75rem, 4.5vw, 4.25rem); } /* #resort-about / #resort-facet-copy set their own padding at ID specificity further up the file. */ .resort-page #resort-about, .resort-page #resort-facet-copy { padding-block: clamp(2.75rem, 4.5vw, 4.25rem); } .resort-page > section + section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * max(1.25rem, 5%), 1600px); height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(16, 29, 51, 0.16) 16%, rgba(16, 29, 51, 0.16) 84%, transparent 100% ); pointer-events: none; } /* ── Headings and body copy ────────────────────────────────────────── Fraunces 400 out, Inter Tight 200 in, on the band's type scale. The #resort-about / #resort-facet-copy rules further up this file are ID-specificity, so those headings have to be named explicitly to be overridden. */ .resort-page .h3-heading-3, .resort-page #resort-about .h3-heading-3, .resort-page #resort-facet-copy .h3-heading-3, .resort-page .h1-heading { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.035em; color: var(--cx-ink); } .resort-page .h3-heading-3 em, .resort-page .h1-heading em { font-style: normal; font-weight: inherit; color: var(--cx-accent); } /* The section lede: 13px sentence case, not 12px uppercase with tracking. */ .resort-page .text-block-6, .resort-page .body-x-large { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.6; color: var(--cx-muted); } .resort-page .paragraph-x-large-2, .resort-page #resort-about .paragraph-x-large-2, .resort-page #resort-facet-copy .paragraph-x-large-2, .resort-page .paragraph-large { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: 16.5px; line-height: 1.68; color: var(--cx-muted); } .resort-page .paragraph-x-large-2 strong, .resort-page #resort-about .paragraph-x-large-2 strong, .resort-page #resort-facet-copy .paragraph-x-large-2 strong { color: var(--cx-ink); font-weight: 500; } /* Sub-headings inside the popular-search panes, and the guide's section titles: sans 500, and without the h3 underline ch-2026.css applies. */ .resort-page .subheading-small, .resort-page .ch-post__section-title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.015em; color: var(--cx-ink); border-bottom: 0; padding-bottom: 0; } .resort-page .faq-tabs-title { margin-bottom: 34px; } /* ── Chips (about, guide, nearby) ──────────────────────────────────── The same glass pill as the home page's why-book-direct row; that treatment is scoped to .why-section there, so it has to be restated here. */ .resort-page .why-cta-chip, .not-found-page .why-cta-chip { padding: 12px 20px; border: 1px solid var(--cx-glass-line); background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); color: var(--cx-ink); font-weight: 500; } .resort-page .why-cta-chip:hover, .not-found-page .why-cta-chip:hover { transform: translateY(-2px); border-color: #fff; background: #fff; box-shadow: var(--cx-glass-shadow-hi); color: var(--cx-ink); } .resort-page .why-cta-chip span, .not-found-page .why-cta-chip span { color: var(--cx-accent-ink); } .resort-page .why-cta-chip--primary, .not-found-page .why-cta-chip--primary { border-color: transparent; background: var(--cx-ink); color: #fff; box-shadow: 0 1px 2px rgba(16, 29, 51, 0.06), 0 14px 30px -16px rgba(16, 29, 51, 0.4); } .resort-page .why-cta-chip--primary:hover, .not-found-page .why-cta-chip--primary:hover { background: #1c2a44; border-color: transparent; color: #fff; } .resort-page .why-cta-chip--primary span, .not-found-page .why-cta-chip--primary span { color: #fff; } /* ── Featured chalets — four across ────────────────────────────────── The editorial card is shared with the home page; only the column count differs. Four holds to 1400px, then steps down so a card never goes narrower than about 260px, which is where its name starts wrapping to three lines. */ .product-grid--editorial-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } @media (max-width: 1399px) { .product-grid--editorial-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1099px) { .product-grid--editorial-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .product-grid--editorial-4 { grid-template-columns: 1fr; gap: 24px; } } /* Every editorial card is an (TrackedChaletLink) — resort hub, home page and search results alike — so the anchor's underline has to go and its colour has to be the card's ink rather than whatever it inherits (#111827 from the page). */ .chalet-ed--anchor { color: var(--ed-ink); text-decoration: none; } /* Two adjustments for four-up. The home page's cards are ~490px wide in a three-column grid; these are ~300px, where the shared card's 33px name and 28px gutters are out of proportion — and its type scale is set in vw, so it doesn't come down on its own. */ .product-grid--editorial-4 .chalet-ed__name { font-size: clamp(19px, 1.45vw, 23px); margin-bottom: 10px; } /* The shared body has no top padding: on the home page the host-logo badge straddles the photo edge and provides that separation. This card carries no badge (the resort endpoint doesn't return the host), so without a top pad the name would sit flush against the photograph. */ .product-grid--editorial-4 .chalet-ed__body { padding: 20px 20px 22px; } /* Availability rows — the one thing the resort card carries that the home page's doesn't. Hairline-separated, tabular figures so the prices align down the column. */ .chalet-ed__avail { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ed-hairline, rgba(16, 29, 51, 0.14)); } .chalet-ed__avail li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ed-hairline, rgba(16, 29, 51, 0.14)); } .chalet-ed__avail-range { font-size: 11.5px; letter-spacing: 0.06em; color: var(--ed-muted, #69718a); } .chalet-ed__avail-price { font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ed-ink, #101d33); white-space: nowrap; } /* Availability badge over the photograph (last-minute / offer). */ .chalet-ed__tag { position: absolute; inset: 12px auto auto 12px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(16, 29, 51, 0.08); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--ed-ink, #101d33); } /* ── Trusted hosts ─────────────────────────────────────────────────── The Webflow slider keeps its markup and JS; the slides become glass tiles and the arrows/dots lose the default chrome. */ .resort-page .logo-slider { background: transparent; } /* The grid is eight fixed 141px columns sitewide, so a resort with one host put a small tile at the far left of a 1296px row with the rest empty — which read as a broken layout rather than a short list. Auto-fit and centred: one host centres, a full roster still fills the row. */ .resort-page .logo-slider-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 170px)); justify-content: center; } /* Solid white, not the band's translucent glass and not the #f6f4ef these tiles carry sitewide: that warm off-white was chosen to be "softer than pure #fff against the dark page", and host logos are artwork drawn for a white background — on a tinted tile the transparent PNGs pick up the cast. The hairline and shadow come from the band so the tile still belongs to it. */ .resort-page .logo-slider-grid .logo-card { background: #fff; border: 1px solid rgba(16, 29, 51, 0.08); border-radius: 18px; box-shadow: var(--cx-glass-shadow); } /* The sitewide hover shadow is 0.35 black, tuned for the dark page. */ .resort-page .logo-slider-grid .logo-card:hover { box-shadow: var(--cx-glass-shadow-hi); } /* Drop the contrast filter, which was drawing a grey rectangle behind every logo on this page. The sitewide rule carries `filter: grayscale(0.85) contrast(0.95)`. Contrast scales each channel away from mid-grey, so it moves white DOWN: 1.0 becomes (1.0 - 0.5) × 0.95 + 0.5 = 0.975, i.e. #F9F9F9. That is invisible on the #f6f4ef tile the filter was tuned against, and obvious on this page's #fff tile. It shows at all because these assets are not the transparent PNGs the tile comment above assumes — More Mountain's is an opaque 512×512 WebP in RGB with no alpha channel, so the "background" being tinted is real pixels, and the logo reads as a grey square floating on a white card. grayscale() and opacity are left alone: neither can shift a white pixel (grey 255 is still 255, and white at 90% over white is still white), so they cost nothing here and the row keeps its tonal treatment and hover. */ .resort-page .logo-slider-grid .logo-image-large { filter: grayscale(0.85); } .resort-page .logo-slider-grid .logo-card:hover .logo-image-large { filter: grayscale(0); } .resort-page .logo-arrow { color: var(--cx-muted); } .resort-page .logo-slide-navigation { color: var(--cx-accent); } /* ── Popular searches ──────────────────────────────────────────────── Each pane becomes one glass card. The dashed SVG rule inside the pane is a Webflow artifact that reads as a second, competing divider next to the card's own edge — hidden, and the header keeps a hairline instead. */ .resort-page .faq-pane-wrapper { padding: 26px 24px 20px; border: 1px solid var(--cx-glass-line); border-radius: 22px; background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); } .resort-page .faq-pane-wrapper .horizontal-divider { display: none; } .resort-page .faq-tab-header { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(16, 29, 51, 0.1); } .resort-page .location-link { color: var(--cx-ink); border-bottom: 1px solid rgba(16, 29, 51, 0.08); } .resort-page .location-link:hover { color: var(--cx-accent-ink); } /* ── FAQs ──────────────────────────────────────────────────────────── Same glass accordion as the home page's "before you book" block. The Webflow dropdown behaviour is untouched — only the surface changes. */ .resort-page .faq_accordion { margin-bottom: 12px; border: 1px solid var(--cx-glass-line); border-radius: 18px; background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .resort-page .faq_accordion:hover { border-color: #fff; box-shadow: var(--cx-glass-shadow-hi); } .resort-page .faq_question { padding: 18px 22px; background: transparent; border: 0; } .resort-page .faq_question .body-large { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 16.5px; letter-spacing: -0.015em; color: var(--cx-ink); } .resort-page .faq_arrow { color: var(--cx-accent); } .resort-page .faq_content { padding: 0 22px 20px; } .resort-page .faq_content .body-medium { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: 15.5px; line-height: 1.65; color: var(--cx-muted); } @media (prefers-reduced-motion: reduce) { .resort-page .why-cta-chip, .not-found-page .why-cta-chip, .resort-page .faq_accordion { transition: none; } .resort-page .why-cta-chip:hover, .not-found-page .why-cta-chip:hover { transform: none; } } /* The cluster-article list, when any are published. */ .resort-page .resort-guide__plan { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(16, 29, 51, 0.1); } .resort-page .ch-post__related { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .resort-page .ch-post__related a { font-weight: 500; color: var(--cx-ink); } .resort-page .ch-post__related a:hover { color: var(--cx-accent-ink); } .resort-page .ch-post__related-sub { color: var(--cx-muted); } /* ── Search results in the pale style ──────────────────────────────── /search-chalets on the same treatment as the resort hub: --cx-* tokens and the wash come from the shared blocks above, this part restyles the results furniture the page doesn't share with anything else. Everything is scoped to .search-page on purpose. .product-grid, .chalet-card and .search-* are Webflow/legacy classes shared with the favourites page, the homepage featured grid and the host dashboard, all of which still run the dark treatment. */ /* The editorial card, same as the home page's featured grid. .product-grid--editorial is already 3 / 2 / 1 across with its own gap, so nothing here needs to restate the columns. Fixed layout: every row as tall as the tallest card in it, so the photos line up across the grid regardless of how long a name ran or whether a card has a category line. .chalet-ed is already height: 100%, so cards fill it. */ .search-page .product-grid--editorial { grid-auto-rows: 1fr; } @media (max-width: 767px) { .search-page .product-grid--editorial { /* One per row: equal heights would pad every short card up to the tallest on the page. */ grid-auto-rows: auto; } } /* ── Results header ──────────────────────────────────────────────── */ .search-page .search-results-header { border-bottom: 1px solid rgba(16, 29, 51, 0.12); } .search-page .search-results-count { font-size: 15px; color: var(--cx-muted); } .search-page .search-results-count strong { font-weight: 500; color: var(--cx-ink); } /* Was near-black on #1a1a1e from the dark treatment — invisible on the wash. */ .search-page .search-sort-select, .search-page .search-share-btn { background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(16, 29, 51, 0.14); color: var(--cx-ink); } .search-page .search-sort-select:hover, .search-page .search-share-btn:hover { border-color: rgba(16, 29, 51, 0.3); } .search-page .search-empty, .search-page .search-clear-all, .search-page .search-page-info { /* #9b9ba1 was a dark-treatment grey; on the wash it read at 2.56:1. */ color: var(--cx-muted); } .search-page .search-empty h3 { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; color: var(--cx-ink); } /* Skeletons, so the loading state doesn't flash dark blocks on the wash. */ .search-page .search-skeleton-card { background: transparent; box-shadow: none; } .search-page .search-skeleton-image { aspect-ratio: 16 / 10; height: auto; background: #e9ecf5; } .search-page .search-skeleton-text { background: #e9ecf5; } /* ── Search chrome on the wash ─────────────────────────────────────── The sticky rail, the mobile trigger and the mobile sheet were all built for the dark treatment and are near-black. On the pale wash the stuck rail reads as a black band across the top of the results. These carry !important because the rules they override do — and match or beat their specificity (#search-rail.is-stuck is 1-1-0, so the scoped .search-page #search-rail.is-stuck is 1-2-0). */ .search-page #search-rail.is-stuck { background: rgba(247, 248, 252, 0.82) !important; backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); box-shadow: 0 10px 30px -18px rgba(16, 29, 51, 0.4) !important; border-bottom: 1px solid rgba(16, 29, 51, 0.08); } @media screen and (max-width: 767px) { /* The collapsed pill that replaces the bar on mobile. */ .search-page .resort-search-trigger { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(16, 29, 51, 0.14); color: var(--cx-ink); box-shadow: 0 10px 28px -18px rgba(16, 29, 51, 0.4); } .search-page .resort-search-trigger__text { color: var(--cx-muted); } /* The full-screen sheet the pill opens. */ .search-page #search-rail.is-msearch-open { background: #f7f8fc !important; } .search-page #search-rail.is-msearch-open .resort-search-sheet-title { color: var(--cx-ink); } } /* ── Filters modal in the pale style ───────────────────────────────── Portalled to , so .search-page can't reach it — these override the dark values in place rather than scoping. Safe to do globally: the modal markup exists only in SearchClient, which is the page being restyled. Kept at the same specificity as the originals and placed after them, so they win on order without needing !important. */ .filter-modal-backdrop { background: rgba(16, 29, 51, 0.42); backdrop-filter: saturate(120%) blur(6px); -webkit-backdrop-filter: saturate(120%) blur(6px); } .filter-modal { background: #f7f8fc; border: 1px solid rgba(16, 29, 51, 0.1); box-shadow: 0 40px 90px -40px rgba(16, 29, 51, 0.55); } .filter-modal-header { border-bottom: 1px solid rgba(16, 29, 51, 0.1); } .filter-modal-title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 200; letter-spacing: -0.02em; color: #101d33; } .filter-modal-close { background: rgba(16, 29, 51, 0.06); color: #101d33; } .filter-modal-close:hover { background: rgba(16, 29, 51, 0.12); } .filter-modal-empty { color: #666e87; } /* The same uppercase meta treatment the cards use for their region line. */ .filter-modal-section-title { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; color: #666e87; } .filter-modal-chip { border: 1px solid rgba(16, 29, 51, 0.14); background: rgba(255, 255, 255, 0.86); color: #101d33; } .filter-modal-chip:hover { background: #fff; border-color: rgba(16, 29, 51, 0.3); } /* Selected chips stay the inverse of the surface, as before — now dark on pale rather than white on dark. */ .filter-modal-chip.is-active { background: #101d33; color: #f7f8fc; border-color: #101d33; } .filter-modal-chip-count { opacity: 0.55; } .filter-modal-footer { border-top: 1px solid rgba(16, 29, 51, 0.1); } .filter-modal-clear { color: #666e87; } .filter-modal-clear:hover { color: #101d33; } .filter-modal-apply { background: #101d33; color: #f7f8fc; font-weight: 500; } .filter-modal-apply:hover { background: #1d2f4d; } /* ── Blog in the pale style ────────────────────────────────────────── The journal index and both article templates. --cx-* tokens and the wash come from the shared blocks above; this is the furniture on top. Scoped to .blog-page throughout: .ch-card, .ch-prose and .ch-post-* are shared with other editorial pages that haven't moved yet. */ /* ── Index: header ────────────────────────────────────────────────── */ /* The display serif goes, as it did everywhere else in the pale style. Stated with the family and weight together because custom.css forces a serif onto every h1–h6 further up. */ .blog-page .ch-heading, .blog-page .ch-postheader__title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.035em; line-height: 1.06; color: var(--cx-ink); } .blog-page .ch-heading em { font-style: normal; /* The display accent only reaches 3.28:1 on the wash; --cx-accent-ink is the variant that exists for accent text, as its own comment explains. */ color: var(--cx-accent-ink); } .blog-page .ch-eyebrow, .blog-page .ch-postheader__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-muted); } .blog-page .ch-lede { color: var(--cx-muted); } /* ── Index: cards ─────────────────────────────────────────────────── */ .blog-page .ch-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; /* Fixed layout: rows as tall as their tallest card, so the images line up across the grid however long a title or excerpt runs. */ grid-auto-rows: 1fr; list-style: none; margin: 0; padding: 0; } @media (max-width: 1199px) { .blog-page .ch-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .blog-page .ch-card-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } } /* Photo to the card edges, then a tinted panel under it. Square corners and no shadow — the panel's tint is what separates the card from the wash. */ .blog-page .ch-card { height: 100%; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; } .blog-page .ch-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .blog-page .ch-card__media { position: relative; aspect-ratio: 16 / 10; width: 100%; border-radius: 0; overflow: hidden; background: #e9ecf5; } .blog-page .ch-card__media img { object-fit: cover; transition: transform 0.5s ease; } .blog-page .ch-card__link:hover .ch-card__media img { transform: scale(1.03); } .blog-page .ch-card__body { display: flex; flex-direction: column; flex: 1; gap: 0; padding: 22px 24px 26px; background: rgba(255, 255, 255, 0.72); border-radius: 0; } /* Category left, date right, with a short rule beneath. */ .blog-page .ch-card__meta { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; } .blog-page .ch-card__meta::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--cx-accent); } .blog-page .ch-card__cat, .blog-page .ch-card__date { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; line-height: 1.4; } .blog-page .ch-card__cat { color: var(--cx-accent-ink); } .blog-page .ch-card__date { flex: 0 0 auto; color: var(--cx-muted); } .blog-page .ch-card__title { margin: 0 0 12px; border: 0; padding: 0; font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: clamp(19px, 1.5vw, 23px); font-weight: 200; line-height: 1.15; letter-spacing: -0.03em; color: var(--cx-ink); } .blog-page .ch-card__excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cx-muted); } /* ── Index: resort cluster cards ──────────────────────────────────── */ .blog-page .ch-cluster-card { padding: 26px 28px 28px; background: rgba(255, 255, 255, 0.72); border-radius: 0; } .blog-page .ch-post__section-title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.03em; color: var(--cx-ink); } /* ── Article header ───────────────────────────────────────────────── */ /* Words in a narrow left column, photograph filling the right and running off the edge of the viewport. Asymmetric on purpose: the text column is sized for a comfortable measure at this type size, and the image takes whatever is left rather than the two splitting evenly. The left padding reproduces .ch-container's rail — padding-inline of max(1.25rem, 5%) against a 100rem cap — so the title starts on the same vertical line as the navbar and the body copy below. There is no right padding: the bleed is the point. */ .blog-page .ch-postheader { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4.5rem); /* No top padding: the photograph runs flush to the underside of the navbar, as in the reference. The text column is vertically centred against it, so it doesn't need the padding to sit away from the top either. */ padding-top: 0; padding-bottom: clamp(2rem, 4vw, 3.5rem); padding-left: max(max(1.25rem, 5%), calc((100% - 100rem) / 2)); padding-right: 0; } /* No photograph: nothing to bleed to, so the header returns to the rail and the text sits in a normal measure. */ .blog-page .ch-postheader--noimage { grid-template-columns: minmax(0, 46rem); /* Nothing to run flush to the navbar here, so the top spacing comes back. */ padding-top: clamp(2rem, 4vw, 3.5rem); padding-right: max(max(1.25rem, 5%), calc((100% - 100rem) / 2)); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .blog-page .ch-postheader__text { min-width: 0; } .blog-page .ch-postheader__nav { margin-bottom: 26px; } .blog-page .ch-postheader__back { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-muted); text-decoration: none; } .blog-page .ch-postheader__back:hover { color: var(--cx-ink); } .blog-page .ch-postheader__title { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); } .blog-page .ch-postheader__lede { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--cx-muted); } /* Category and date on one line, with the hairline under them separating the headline block from the byline. */ .blog-page .ch-postheader__meta { display: flex; align-items: baseline; gap: 18px; margin: 24px 0 0; padding-bottom: 18px; border-bottom: 1px solid rgba(16, 29, 51, 0.14); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; } .blog-page .ch-postheader__cat { color: var(--cx-accent-ink); } .blog-page .ch-postheader__date { color: var(--cx-muted); } .blog-page .ch-postheader__reading-time { color: var(--cx-muted); } .blog-page .ch-postheader__byline { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; } .blog-page .ch-postheader__byline-label { font-size: 13px; color: var(--cx-muted); } .blog-page .ch-postheader__byline-name { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-accent-ink); } .blog-page .ch-postheader__media { position: relative; /* Was 4/3, which at this column width ran ~660px tall and pushed the body copy well below the fold. 16/9 is the same width for three quarters of the height (w x 0.5625 against w x 0.75). */ aspect-ratio: 16 / 9; min-height: 18rem; margin: 0; overflow: hidden; background: #e9ecf5; } .blog-page .ch-postheader__image { object-fit: cover; } /* Stacked below the split's breakpoint: image first, then the words, so the photograph still opens the article. */ @media (max-width: 899px) { .blog-page .ch-postheader { grid-template-columns: 1fr; gap: 2rem; padding-left: max(1.25rem, 5%); padding-right: max(1.25rem, 5%); } .blog-page .ch-postheader__text { order: 2; } .blog-page .ch-postheader__media { order: 1; aspect-ratio: 16 / 10; min-height: 0; /* Full-bleed across the stacked layout rather than inset by the gutter. */ width: 100vw; margin-left: calc(50% - 50vw); } } /* ── Article body ─────────────────────────────────────────────────── */ .blog-page .ch-prose { color: var(--cx-ink); } .blog-page .ch-prose p, .blog-page .ch-prose li { color: var(--cx-muted); font-size: 16.5px; line-height: 1.75; } .blog-page .ch-prose li::marker { color: var(--cx-muted); } .blog-page .ch-prose h2, .blog-page .ch-prose h3 { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.03em; color: var(--cx-ink); } .blog-page .ch-prose h2 { font-size: clamp(24px, 2.2vw, 31px); margin-top: 2.2em; } .blog-page .ch-prose h3 { font-size: clamp(19px, 1.6vw, 23px); margin-top: 1.8em; } .blog-page .ch-prose strong { color: var(--cx-ink); font-weight: 500; } .blog-page .ch-prose a { color: var(--cx-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cx-ink) 35%, transparent); text-underline-offset: 0.18em; } .blog-page .ch-prose a:hover { text-decoration-color: var(--cx-ink); } .blog-page .ch-prose th, .blog-page .ch-prose td { border-bottom-color: rgba(16, 29, 51, 0.14); } .blog-page .ch-prose th { color: var(--cx-ink); } /* ── Article sidebar ───────────────────────────────────────────────── Square corners and the glass-card tint used everywhere else in the pale style (matches .ch-card__body, .ch-cluster-card). */ .blog-page .ch-postbody__card { background: rgba(255, 255, 255, 0.72); } .blog-page .ch-postbody__card-eyebrow { color: var(--cx-accent-ink); } .blog-page .ch-postbody__card-title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; color: var(--cx-ink); } .blog-page .ch-postbody__card-copy { color: var(--cx-muted); } .blog-page .ch-postbody__card-cta { color: #fff; background: var(--cx-ink); } .blog-page .ch-postbody__card-cta:hover { background: #1c2a44; } /* The generic newsletter box, squared off and glass-tinted to match the other cards on this page. Base .newsletter-signup is a centred, dark-theme band (see the NEWSLETTER section above) built for a full-width section, so this overrides layout as well as colour for the narrow sidebar rail. */ .blog-page .newsletter-signup { align-items: flex-start; text-align: left; gap: 1rem; padding: 26px 28px 28px; max-width: none; border: 1px solid var(--cx-glass-line); border-radius: 0; background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); } .blog-page .newsletter-title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-size: 22px; letter-spacing: -0.03em; color: var(--cx-ink); } .blog-page .newsletter-sub { font-size: 14px; color: var(--cx-muted); } .blog-page .newsletter-form { flex-direction: column; align-items: stretch; max-width: none; } .blog-page .newsletter-input { background: #fff; border: 1px solid rgba(16, 29, 51, 0.12); color: var(--cx-ink); } .blog-page .newsletter-input::placeholder { color: #9aa1b4; } .blog-page .newsletter-input:focus { border-color: rgba(42, 144, 199, 0.5); box-shadow: 0 0 0 4px rgba(42, 144, 199, 0.12); } .blog-page .newsletter-submit { background: var(--cx-ink); color: #fff; } .blog-page .newsletter-submit:hover { background: #1c2a44; } .blog-page .newsletter-success { background: rgba(42, 144, 199, 0.1); border-color: rgba(42, 144, 199, 0.3); color: var(--cx-accent-ink); } .blog-page .ch-post__crumb, .blog-page .ch-post__eyebrow, .blog-page .ch-post__back { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-muted); } .blog-page .ch-post__crumb a, .blog-page .ch-post__back a { color: var(--cx-muted); } .blog-page .ch-post__crumb a:hover, .blog-page .ch-post__back a:hover { color: var(--cx-ink); } .blog-page .ch-post__title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.035em; line-height: 1.06; color: var(--cx-ink); } .blog-page .ch-post__lede { color: var(--cx-muted); } /* ── Chalet detail in the pale style ───────────────────────────────── --cx-* tokens and the wash come from the shared blocks above; this is the furniture on top. Scoped to .chalet-page: .ch-chalet__*, .ch-host-card and .ch-similar are shared with the host profile page, which now has its own pale rules for the same classes under .host-profile-page below. */ /* ── Type ─────────────────────────────────────────────────────────── */ /* Fraunces out, body sans at 200 in, as everywhere else in the pale style. The family has to be restated because custom.css forces a serif onto every h1–h6 further up the file. */ .chalet-page .ch-chalet__title, .chalet-page .ch-chalet__section-title, .chalet-page .ch-chalet__fact-num, .chalet-page .ch-chalet__host-name, .chalet-page .ch-host-card__name { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.03em; color: var(--cx-ink); } .chalet-page .ch-chalet__title { letter-spacing: -0.035em; line-height: 1.06; } .chalet-page .ch-chalet__section-title { border-bottom-color: rgba(16, 29, 51, 0.14); } /* The uppercase meta treatment the cards and facet pages use. */ .chalet-page .ch-chalet__eyebrow, .chalet-page .ch-chalet__card-eyebrow, .chalet-page .ch-chalet__crumb, .chalet-page .ch-chalet__fact-label, .chalet-page .ch-chalet__feature-type, .chalet-page .ch-host-card__resort { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; } .chalet-page .ch-chalet__eyebrow, .chalet-page .ch-chalet__card-eyebrow, .chalet-page .ch-host-card__resort { color: var(--cx-accent-ink); } .chalet-page .ch-chalet__crumb, .chalet-page .ch-chalet__fact-label, .chalet-page .ch-chalet__feature-type { color: var(--cx-muted); } .chalet-page .ch-chalet__crumb a:hover { color: var(--cx-ink); } .chalet-page .ch-chalet__prose, .chalet-page .ch-chalet__prose p, .chalet-page .ch-chalet__host-bio, .chalet-page .ch-chalet__card-copy, .chalet-page .ch-chalet__feature, .chalet-page .ch-chalet__faq-a { color: var(--cx-muted); } .chalet-page .ch-chalet__faq-q { color: var(--cx-ink); } /* ── Surfaces ─────────────────────────────────────────────────────── */ /* Square corners and a white panel, matching .chalet-ed and the blog cards. The old 18px radius and 2%-white fill were built for the dark treatment and read as barely-there grey boxes on the wash. */ .chalet-page .ch-chalet__card, .chalet-page .ch-host-card__link { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(16, 29, 51, 0.1); border-radius: 0; } .chalet-page .ch-host-card__link:hover { background: #fff; border-color: rgba(16, 29, 51, 0.22); } /* Square the big surfaces — the gallery figure, its tiles and the map — to match the cards. Controls keep their radius: the pale style squares panels and photography, not buttons (the filters modal's apply button is 12px). */ .chalet-page .ch-chalet__hero, .chalet-page .ch-chalet__thumb, .chalet-page .ch-gallery__tile, .chalet-page .ch-chalet__map, .chalet-page .ch-chalet__host-logo, .chalet-page .ch-avail__empty, .chalet-page .ch-host-card__media, .chalet-page .ch-host-card__img { border-radius: 0; } /* Image placeholders were #020617 — near-black behind every photo, which on the wash flashes as a dark block until the image decodes. The same pale grey the other cards use. */ .chalet-page .ch-chalet__hero, .chalet-page .ch-chalet__thumb, .chalet-page .ch-gallery__tile, .chalet-page .ch-host-card__media { background-color: #e9ecf5; } .chalet-page .ch-chalet__host-logo { background: #fff; border: 1px solid rgba(16, 29, 51, 0.1); } /* ── Controls ─────────────────────────────────────────────────────── */ .chalet-page .ch-btn--secondary { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(16, 29, 51, 0.16); color: var(--cx-ink); } .chalet-page .ch-btn--secondary:hover { background: #fff; border-color: rgba(16, 29, 51, 0.3); } /* Links that sit on the page background. .ch-chalet__see-all is deliberately NOT in this list: it is an overlay button on a translucent black pill over a photograph, so it keeps a near-white label. Giving it the accent put dark blue on a dark scrim at 2.5:1. */ .chalet-page .ch-link-soft, .chalet-page .ch-chalet__back { color: var(--cx-accent-ink); } .chalet-page .ch-chalet__feature-tick { color: var(--cx-accent); } /* ── Similar chalets ──────────────────────────────────────────────── */ .chalet-page .ch-similar { border-top: 1px solid rgba(16, 29, 51, 0.12); } .chalet-page .ch-host-card__price { color: var(--cx-ink); font-weight: 500; } .chalet-page .ch-host-card__meta { color: var(--cx-muted); } /* ── Host profile page in the pale style ────────────────────────────── Not .host-page: that name already belongs to /host, the become-a-host marketing page, which shares .about-* furniture with /about — a real host's profile is a different page reusing .ch-chalet__crumb/section-title and .ch-host-card from the chalet detail page, so it gets its own scope. */ .host-profile-page .ch-chalet__crumb span[aria-hidden] { color: rgba(16, 29, 51, 0.3); } .host-profile-page .ch-chalet__crumb a { color: var(--cx-muted); } .host-profile-page .ch-chalet__crumb a:hover, .host-profile-page .ch-chalet__crumb [aria-current] { color: var(--cx-ink); } .host-profile-page .ch-chalet__section-title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.03em; color: var(--cx-ink); border-bottom-color: rgba(16, 29, 51, 0.14); } .host-profile-page .ch-chalet__section-count { color: var(--cx-muted); } .host-profile-page .ch-host__head { border-bottom-color: rgba(16, 29, 51, 0.14); } .host-profile-page .ch-host__avatar { background: #fff; border: 1px solid rgba(16, 29, 51, 0.1); border-radius: 0; } .host-profile-page .ch-host__eyebrow { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-accent-ink); } .host-profile-page .ch-host__name { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.035em; line-height: 1.06; color: var(--cx-ink); } .host-profile-page .ch-host__bio { color: var(--cx-muted); } .host-profile-page .ch-host__link { color: var(--cx-muted); } .host-profile-page .ch-host__link:hover { color: var(--cx-accent-ink); } .host-profile-page .ch-host__stat-num { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; color: var(--cx-ink); } .host-profile-page .ch-host__stat-label { color: var(--cx-muted); } /* Square corners and a white panel, matching .chalet-page's own cards. */ .host-profile-page .ch-host-card__link { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(16, 29, 51, 0.1); border-radius: 0; } .host-profile-page .ch-host-card__link:hover { background: #fff; border-color: rgba(16, 29, 51, 0.22); } .host-profile-page .ch-host-card__media, .host-profile-page .ch-host-card__img { border-radius: 0; } /* Image placeholder was #020617 — near-black behind every photo, which on the wash flashes as a dark block until the image decodes. */ .host-profile-page .ch-host-card__media { background-color: #e9ecf5; } .host-profile-page .ch-host-card__resort { color: var(--cx-accent-ink); } .host-profile-page .ch-host-card__name { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.03em; color: var(--cx-ink); } .host-profile-page .ch-host-card__meta { color: var(--cx-muted); } .host-profile-page .ch-host-card__price { color: var(--cx-ink); font-weight: 500; } /* Contact fields on the enquiry modal. Two across on desktop for name/email, phone on its own row — the modal is narrow, and three stacked inputs above the message push the send button below the fold on a laptop. */ .enquiry-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; } /* Phone spans both columns so it doesn't sit beside an empty cell. */ .enquiry-modal-fields .ch-field:last-child { grid-column: 1 / -1; } .enquiry-modal-fields + .ch-field__label { display: block; margin-bottom: 6px; } /* The challenge widget only occupies space when Cloudflare wants an interaction, so this margin collapses to nothing the rest of the time. */ .enquiry-modal .ch-turnstile:not(:empty) { margin-top: 12px; } @media (max-width: 599px) { .enquiry-modal-fields { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ ABOUT, HOST AND AUTH IN THE PALE STYLE ────────────────────────────────────────────────────────────────────────── Fifth, sixth and seventh scope hooks after .resort-page / .search-page / .blog-page / .chalet-page. The --cx-* tokens and the page wash come from the two shared blocks above rather than a copy each, so there is still one definition of the palette to change. Scoped throughout, because none of these classes belong to these pages: .ch-hero is shared with the home page and the blog, the about-* sections are shared between /about and /host, and .ch-auth / .ch-auth-form are shared with AuthGateModal and /verify-email. Unscoped, this would restyle all of them. /about and /host are styled as one pair. They share the same section furniture — the host page is built almost entirely from about-principles, about-countries and about-cta — so splitting them into two blocks would mean maintaining the same rules twice. ══════════════════════════════════════════════════════════════════════════ */ /* ── Section rhythm ────────────────────────────────────────────────── These sections set --section-pad-y (9vw, so 130px a side at 1440). That reads as generous where a section carries 600–900px of content; the manifesto and principles blocks here are a third of that, so half of each section was padding and the page opened a ~500px hole between the stat grid and the next heading. Roughly halved, matching .resort-page. */ .about-page > section, .host-page > section { position: relative; background: transparent; padding-block: clamp(2.75rem, 4.5vw, 4.25rem); } /* One fading hairline per boundary, drawn by the section that follows — the same self-healing arrangement as the home page and the resort hub. Several of these sections render conditionally (about-countries needs resorts, about-team needs members), and whichever one follows still marks the join. Inset to the content rail and faded at both ends so no rule ends in a stub. */ .about-page > section + section::before, .host-page > section + section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * max(1.25rem, 5%), 1600px); height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(16, 29, 51, 0.16) 16%, rgba(16, 29, 51, 0.16) 84%, transparent 100% ); pointer-events: none; } /* ── Hero ──────────────────────────────────────────────────────────── .ch-hero is #020617 with white text. The light-theme variant of it is behind html[data-theme='light'], and no theme attribute is set since the dark theme was removed — so this hero renders dark, and dropped a near-black band above a pale page. It now sits on the wash like everything else. */ /* `main` is in the chain to match the specificity of `html[data-theme='light'] .ch-hero`, which repaints this section with its own pale-blue gradient; a bare two-class scope loses to it and the hero kept a visible tonal step against the wash below it. Equal specificity, and this block is later in the file. */ main.about-page .ch-hero, main.host-page .ch-hero { background: transparent; color: var(--cx-ink); padding-block: clamp(1rem, 2vh, 2rem) clamp(2rem, 4vw, 3.5rem); } /* The display serif goes, as it did everywhere else in the pale style. Family and weight are stated together because custom.css forces a serif onto every h1–h6 further up the file. */ /* `.ch-hero` is in the chain for the hero selectors on purpose. A theme bootstrap script sets data-theme="light" on after hydration, and `html[data-theme='light'] .ch-hero__title` (0,2,1) forces #f4f4f6 on the whole hero group — it exists because this copy used to sit on dark photography. A two-class scope loses to it, which rendered the about H1 near-white on a near-white wash: legible in the static HTML and invisible in a browser. Three classes clear it. */ .about-page .ch-hero .ch-hero__title, .host-page .ch-hero .ch-hero__title, .about-page .editorial-headline, .host-page .editorial-headline, .about-page .about-manifesto__statement, .about-page .about-principle__title, .host-page .about-principle__title, .about-page .about-stat__value, .host-page .about-stat__value, .about-page .about-cta .editorial-headline { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.035em; line-height: 1.06; color: var(--cx-ink); /* Existed to lift white type off a photograph; on the wash it reads as a grey halo around every letter. */ text-shadow: none; } /* The italic blue accent was the serif's; upright and in the text accent here. --cx-accent only reaches 3.28:1 on the wash, which is why --cx-accent-ink exists (see its comment in the token block). */ .about-page .ch-hero .ch-hero__title em, .host-page .ch-hero .ch-hero__title em, .about-page .editorial-headline em, .host-page .editorial-headline em, .about-page .about-manifesto__statement em, .about-page .about-cta .editorial-headline em { font-style: normal; color: var(--cx-accent-ink); } .about-page .ch-hero__words, .host-page .ch-hero__words { display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; margin-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem); } .about-page .ch-hero .ch-hero__lede, .host-page .ch-hero .ch-hero__lede { /* Was italic and white, for reading over a photograph. */ font-style: normal; color: var(--cx-muted); font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.6; max-width: 52ch; text-shadow: none; } .about-page .ch-hero .ch-hero__eyebrow, .host-page .ch-hero .ch-hero__eyebrow, .about-page .section-eyebrow, .host-page .section-eyebrow, .about-page .about-principle__num, .host-page .about-principle__num, .about-page .about-stat__label, .host-page .about-stat__label { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-muted); } /* The eyebrow and the section numbers carry the one spot of lilac, which is what --cx-spark is for. */ .about-page .ch-hero .ch-hero__eyebrow, .host-page .ch-hero .ch-hero__eyebrow, .about-page .about-principle__num, .host-page .about-principle__num { color: var(--cx-spark-ink); } .about-page .about-section__lede, .host-page .about-section__lede, .about-page .about-manifesto__support, .about-page .about-principle__body, .host-page .about-principle__body, .about-page .about-split__copy, .about-page .about-cta__lede, .host-page .about-cta__lede { color: var(--cx-muted); } /* Photography is square in this style; only controls keep a radius. The placeholder colour matters because these are priority images on a pale page — #020617 flashed a near-black block over the wash until the image decoded. */ .about-page .ch-hero__plate, .host-page .ch-hero__plate, .about-page .about-split__media { border-radius: 0; background: #e9ecf5; } /* The veil existed to darken the photograph enough for white type on top of it. The type has moved off the image, so it only muddies the picture now. */ .about-page .ch-hero__veil, .host-page .ch-hero__veil { display: none; } /* The caption still sits on the image, so it stays white rather than joining the accent-ink group above — and it carries its own scrim, the same translucent-dark-over-photography treatment the chalet page's overlay button uses. A text-shadow alone wasn't enough. Removing the veil (which used to darken the whole plate for the headline) left this label on whatever happens to be behind it, and on the about photograph that is the sun: white-on-flare, and unreadable however much shadow it carries. A scrim doesn't depend on where the bright part of the picture is. It keeps a radius because it's an overlay control, not a panel. */ .about-page .ch-hero .ch-hero__caption, .host-page .ch-hero .ch-hero__caption { color: rgba(255, 255, 255, 0.95); background: rgba(16, 29, 51, 0.42); backdrop-filter: blur(6px); border-radius: 10px; padding: 0.5rem 0.75rem; } /* ── Controls: the hero pathways ───────────────────────────────────── Glass pills, the same recipe as the home page's CTA chips. Controls are the one thing in this style that keeps a radius. The CTA buttons at the foot of both pages are deliberately absent from this block: they are .why-cta-chip from the home page's why-book-direct band, which is already in this style and reads the --cx-* tokens the hook provides, so they arrive correct with no rule here. */ .about-page .ch-hero .ch-hero__pathway, .host-page .ch-hero .ch-hero__pathway { border-radius: 999px; border: 1px solid var(--cx-glass-line); background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); color: var(--cx-ink); transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .about-page .ch-hero .ch-hero__pathway:hover, .host-page .ch-hero .ch-hero__pathway:hover { box-shadow: var(--cx-glass-shadow-hi); transform: translateY(-1px); color: var(--cx-ink); } /* ── Panels: principles, stats, countries, team, compare ───────────── Raised glass rather than hairline-separated text. This is the part that takes its cue from the reference: light cards floating on a tinted wash, with the shadow doing the separating instead of a rule. Square, because panels and photography are square in this style. */ .about-page .about-principle, .host-page .about-principle, .about-page .about-stat, .host-page .about-stat, .about-page .about-team-member { border: 1px solid var(--cx-glass-line); border-top: 1px solid var(--cx-glass-line); background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); border-radius: 0; padding: clamp(1.25rem, 2vw, 1.75rem); } .about-page .about-principle, .host-page .about-principle { /* Was a border-top rule with padding-top and no sides. */ gap: 0.625rem; } /* ch-2026.css puts `border-bottom: 1px solid #0000001c; padding-bottom: 10px` on every h3 in the document. Inside a card that reads as a divider between the title and the body — a stray rule nobody drew on purpose. Same statement the journal cards needed for the same reason. */ .about-page .about-principle__title, .host-page .about-principle__title, .about-page .about-country__name, .host-page .about-country__name, .about-page .about-team-member__name { border-bottom: 0; padding-bottom: 0; margin-top: 0; } .about-page .about-stat, .host-page .about-stat { /* The 2×2 grid drew its own internal hairlines; each cell is its own panel now, so the grid just needs a gutter. */ border-color: var(--cx-glass-line); } .about-page .about-manifesto__stats, .host-page .about-manifesto__stats { gap: 1rem; border: 0; } .about-page .about-stat__value, .host-page .about-stat__value { font-size: clamp(2rem, 3vw, 2.75rem); } /* Sections that carried a near-transparent white fill designed for a dark page. On the wash it reads as nothing, so it goes and the wash shows. */ .about-page .about-split, .about-page .about-countries, .about-page .about-team, .about-page .about-manifesto, .about-page .about-cta, .host-page .about-countries, .host-page .about-principles, .host-page .about-cta { background: transparent; } /* The serif on these two sits a level deeper than the class the section is named for — on `.about-quote__body p`, not the blockquote — so a rule on the parent was inherited straight past. */ .about-page .about-quote__body p, .about-page .about-team-member__name { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.025em; line-height: 1.18; color: var(--cx-ink); } .about-page .about-quote__body p em { font-style: normal; color: var(--cx-accent-ink); } .about-page .about-team-member__role { color: var(--cx-spark-ink); } /* 10px label in the display accent — 3.28:1 on the wash, the same failure the journal heading had. --cx-accent-ink is the variant for accent text. */ .about-page .about-compare__col-us, .about-page .about-compare__col-label { color: var(--cx-accent-ink); } .about-page .about-team-member__bio { color: var(--cx-muted); } /* The avatar keeps its circle — it's a control-sized token, not a panel or a photograph, and a 72px square of initials reads as a missing image. */ .about-page .about-team-member__avatar { background: #e9ecf5; border: 1px solid var(--cx-glass-line); color: var(--cx-muted); font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; } /* ── Auth (/login, /register, /verify-email) ───────────────────────── The split layout stays; the surfaces and the type change. */ .auth-page .ch-auth { /* Was var(--ch-bg) — a flat near-white that painted over the wash. */ background: transparent; } .auth-page .ch-auth__title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.035em; line-height: 1.06; color: var(--cx-ink); max-width: 18ch; } .auth-page .ch-auth__title em { font-style: normal; color: var(--cx-accent-ink); } .auth-page .ch-auth__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cx-spark-ink); } .auth-page .ch-auth__lede { color: var(--cx-muted); } /* The form gets a panel of its own. Against a tinted wash an unpanelled form reads as floating loose on the page, and the fields lose their edges. */ .auth-page .ch-auth__card { border: 1px solid var(--cx-glass-line); background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); padding: clamp(1.5rem, 2.5vw, 2.25rem); max-width: 30rem; } .auth-page .ch-auth__switch { border-top-color: rgba(16, 29, 51, 0.1); } .auth-page .ch-auth__switch-link { color: var(--cx-accent-ink); } /* Photography square, with the pale placeholder rather than near-black. */ .auth-page .ch-auth__plate { border-radius: 0; background: #e9ecf5; } /* Excluded from the accent-ink group on purpose: this caption sits on a translucent scrim over a photograph, so dark-blue text would put dark on dark. It keeps a near-white label. */ .auth-page .ch-auth__plate-caption, .auth-page .ch-auth__plate-quote { color: rgba(255, 255, 255, 0.95); } .auth-page .ch-auth__plate-quote { font-style: normal; } .auth-page .ch-auth__proof-item { border: 1px solid var(--cx-glass-line); background: var(--cx-glass); box-shadow: var(--cx-glass-shadow); padding: clamp(0.875rem, 1.4vw, 1.125rem); } /* The three-up row separated its items with a right-hand rule on each and no gutter, so as panels they fused into one wide box split by two lines. Restated with a gap and no divider — the shadow separates them now. */ .auth-page .ch-auth__proof { gap: 0.75rem; } @media (min-width: 600px) { .auth-page .ch-auth__proof-item, .auth-page .ch-auth__proof-item:first-child, .auth-page .ch-auth__proof-item:last-child { border-right: 1px solid var(--cx-glass-line); padding-left: clamp(0.875rem, 1.4vw, 1.125rem); padding-right: clamp(0.875rem, 1.4vw, 1.125rem); } } /* The pull-quote was the display serif. It goes, as it did everywhere else in this style — stated with the family because the serif is forced onto this class further up the file. */ .auth-page .ch-auth__plate-quote { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; letter-spacing: -0.02em; } .auth-page .ch-auth__proof-label { color: var(--cx-spark-ink); } .auth-page .ch-auth__proof-body { color: var(--cx-muted); } /* ══════════════════════════════════════════════════════════════════════════ 404 PAGE IN THE PALE STYLE ────────────────────────────────────────────────────────────────────────── Ninth scope hook, .not-found-page on

(app/[locale]/not-found.tsx). The --cx-* tokens and the page wash come from the two shared blocks above, and the CTA chips reuse the .resort-page glass-pill rules, which now list this hook alongside .resort-page. Everything else the page needs is here and scoped, because .section-eyebrow and .why-cta-chip are shared with pages that still carry the older treatment. The page has to hold up at every locale: FR and DE copy runs half again as long as the English, so nothing here is fixed-width or nowrap. ══════════════════════════════════════════════════════════════════════════ */ .not-found-page .nf { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(64vh, 720px); padding-block: clamp(3rem, 7vw, 6rem); padding-inline: max(1.25rem, 5%); background: transparent; text-align: center; } .not-found-page .nf__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 44rem; } .not-found-page .nf__eyebrow { color: var(--cx-spark-ink); letter-spacing: 0.18em; } /* Sans at 200, as on every other pale-style heading. Family and weight are stated together because custom.css forces the serif onto every h1-h6 further up the file, and the light-theme hero rules would otherwise paint an h1 near-white on the near-white wash. */ .not-found-page .nf__title { font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-size: clamp(2.4rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0; color: var(--cx-ink); text-shadow: none; text-wrap: balance; } /* Upright accent, as on the about and host heroes; --cx-accent-ink because the display accent only clears 3.28:1 on the wash. */ .not-found-page .nf__title em { font-style: normal; color: var(--cx-accent-ink); } .not-found-page .nf__lede { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--cx-muted); } .not-found-page .nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; }