/* ===================================================================== chanua-glass.css — true glass panels + read-more drawers Glass here means the real thing, not a frosted plastic card: 1. The fill is nearly clear — a faint diagonal light-to-dark sheen over a thin smoky tint — so the background video is plainly visible THROUGH the pane. 2. Heavy blur with the saturation pushed UP (blur alone washes the colour out, which is what makes cheap "frosted" cards read as grey fog) and the brightness pulled slightly DOWN. That last part is the legibility trick: whatever the video is doing behind a pane — a white cloud, bright sky, a glinting river — the pane darkens it enough that white type on top keeps its contrast, without a solid backing hiding the footage. 3. A directional light edge, not a uniform border: a bright specular line along the top-left, fading to almost nothing at the bottom-right, the way glass catches a light source. 4. A soft, deep shadow so the pane reads as lifted off the video. 5. A whisper of grain so large blurred areas don't look digitally flat. Scope: only when the site-wide background media is active (body.has-bg-video) and never on the homepage. With no background set, every page keeps its plain ivory layout — glass over a flat colour is just a grey box, so it is not applied. Without backdrop-filter support (older Safari/iOS) the fill steps up to a mostly-opaque smoked tint instead — less pretty, still legible. ===================================================================== */ :root { --cs-glass-grain: url("data:image/svg+xml;utf8,"); } /* ---- the glass recipe ---------------------------------------------- */ body.has-bg-video:not(.home) .cs-pane, body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro, body.has-bg-video:not(.home) .cs-triprail, body.has-bg-video:not(.home) .cs-trip-section, body.has-bg-video:not(.home) .cs-quick-stats, body.has-bg-video:not(.home) .cs-seasonal-intel, body.has-bg-video:not(.home) .cs-trip-emergency, body.has-bg-video:not(.home) .cs-drawer, body.has-bg-video:not(.home) .cs-archive-toolbar, body.has-bg-video:not(.home) .cs-page-header, body.has-bg-video:not(.home) .cs-plan__form-wrap, body.has-bg-video:not(.home) .cs-plan__header, body.has-bg-video:not(.home) .cs-contact-card, body.has-bg-video:not(.home) .cs-contact-info, body.has-bg-video:not(.home) .cs-about__content, body.has-bg-video:not(.home) .cs-about-stats, body.has-bg-video:not(.home) .cs-founder, body.has-bg-video:not(.home) .cs-glass:not(.cs-glass--dark), body.has-bg-video:not(.home) .cs-dir__hero-panel { position: relative; border-radius: 26px; border: 0; background: var(--cs-glass-grain), linear-gradient(135deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,.015) 62%, rgba(255,255,255,.09) 100%), rgba(20,15,8,.14); background-blend-mode: soft-light, normal, normal; -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(.9); backdrop-filter: blur(30px) saturate(175%) brightness(.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), /* top specular line */ inset 1px 0 0 rgba(255,255,255,.22), /* left light edge */ inset 0 -1px 0 rgba(255,255,255,.06), /* faint bottom edge */ inset -1px 0 0 rgba(255,255,255,.05), inset 0 0 40px rgba(255,255,255,.04), /* inner glow */ 0 26px 60px -22px rgba(0,0,0,.55), /* lift */ 0 3px 10px rgba(0,0,0,.18); padding: clamp(22px, 3vw, 42px); color: #fff; /* Same light palette the article column already remaps to, so a pane reads correctly wherever it appears — archives included, where there is no .cs-dir-single__content to supply it. */ --cs-ink: #ffffff; --cs-ink-soft: rgba(255,255,255,.88); --cs-ink-faint: rgba(255,255,255,.7); --cs-hair: rgba(255,255,255,.28); --cs-gold: #f0d28f; --cs-gold-deep: #e8bd68; --cs-gold-soft: #f0d28f; } /* Reading-copy panels read better a touch denser than UI panels. */ body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro { background: var(--cs-glass-grain), linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.01) 64%, rgba(255,255,255,.08) 100%), rgba(20,15,8,.24); background-blend-mode: soft-light, normal, normal; -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(.82); backdrop-filter: blur(30px) saturate(170%) brightness(.82); } /* The pane's own text-shadow is no longer needed to fight the video — the glass does that — and a shadow on top of a blurred surface just smudges small type. */ body.has-bg-video:not(.home) .cs-pane, body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro, body.has-bg-video:not(.home) .cs-triprail, body.has-bg-video:not(.home) .cs-trip-section, body.has-bg-video:not(.home) .cs-quick-stats, body.has-bg-video:not(.home) .cs-seasonal-intel, body.has-bg-video:not(.home) .cs-trip-emergency, body.has-bg-video:not(.home) .cs-drawer, body.has-bg-video:not(.home) .cs-archive-toolbar, body.has-bg-video:not(.home) .cs-page-header, body.has-bg-video:not(.home) .cs-plan__form-wrap, body.has-bg-video:not(.home) .cs-plan__header, body.has-bg-video:not(.home) .cs-contact-card, body.has-bg-video:not(.home) .cs-contact-info, body.has-bg-video:not(.home) .cs-about__content, body.has-bg-video:not(.home) .cs-about-stats, body.has-bg-video:not(.home) .cs-founder, body.has-bg-video:not(.home) .cs-glass:not(.cs-glass--dark), body.has-bg-video:not(.home) .cs-dir__hero-panel { text-shadow: 0 1px 1px rgba(0,0,0,.28); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.has-bg-video:not(.home) .cs-pane, body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro, body.has-bg-video:not(.home) .cs-triprail, body.has-bg-video:not(.home) .cs-trip-section, body.has-bg-video:not(.home) .cs-quick-stats, body.has-bg-video:not(.home) .cs-seasonal-intel, body.has-bg-video:not(.home) .cs-trip-emergency, body.has-bg-video:not(.home) .cs-drawer, body.has-bg-video:not(.home) .cs-archive-toolbar, body.has-bg-video:not(.home) .cs-page-header, body.has-bg-video:not(.home) .cs-plan__form-wrap, body.has-bg-video:not(.home) .cs-plan__header, body.has-bg-video:not(.home) .cs-contact-card, body.has-bg-video:not(.home) .cs-contact-info, body.has-bg-video:not(.home) .cs-about__content, body.has-bg-video:not(.home) .cs-about-stats, body.has-bg-video:not(.home) .cs-founder, body.has-bg-video:not(.home) .cs-glass:not(.cs-glass--dark), body.has-bg-video:not(.home) .cs-dir__hero-panel { background: rgba(26,20,11,.9); } } /* ---- panes inside panes go flat: no glass on glass ------------------ */ body.has-bg-video:not(.home) .cs-drawer .cs-trip-section, body.has-bg-video:not(.home) .cs-drawer .cs-trip-emergency, body.has-bg-video:not(.home) .cs-trip-section .cs-trip-section, body.has-bg-video:not(.home) .cs-trip-section .cs-quick-stats, body.has-bg-video:not(.home) .cs-trip-section .cs-seasonal-intel { background: none; box-shadow: none; border-radius: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .cs-drawer .cs-trip-section { margin: 0 0 clamp(26px, 3vw, 38px); } .cs-drawer .cs-trip-section:last-child { margin-bottom: 0; } .cs-drawer .cs-trip-emergency { margin-top: clamp(26px, 3vw, 38px); padding: 0; } /* Spacing the panes need that the hairline-era layout did not. */ body.has-bg-video:not(.home) .cs-dir-single__content .cs-trip-section { margin: 0 0 clamp(22px, 2.6vw, 34px); } body.has-bg-video:not(.home) .cs-prose { margin-bottom: clamp(22px, 2.6vw, 34px); } body.has-bg-video:not(.home) .cs-dir-single__content > .cs-drawer { margin: 0 0 clamp(22px, 2.6vw, 34px); } body.has-bg-video:not(.home) .cs-quick-stats { padding: clamp(22px, 2.6vw, 34px) clamp(26px, 3.4vw, 46px); border: 0; margin-bottom: clamp(22px, 2.6vw, 34px); } body.has-bg-video:not(.home) .cs-seasonal-intel { border-left: 0; max-width: none; padding: clamp(22px, 3vw, 36px); margin-bottom: clamp(22px, 2.6vw, 34px); } body.has-bg-video:not(.home) .cs-triprail { padding: 24px 24px 26px; } body.has-bg-video:not(.home) .cs-trip-emergency { margin-bottom: 0; } /* Pane that must stay full-bleed-clean on small screens. */ @media (max-width: 640px) { body.has-bg-video:not(.home) .cs-pane, body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro, body.has-bg-video:not(.home) .cs-trip-section, body.has-bg-video:not(.home) .cs-drawer { border-radius: 16px; padding: 20px 18px; } } /* ---- sticky section bar: a slim light-glass strip ------------------- */ body.has-bg-video .cs-secnav, body.has-bg-image .cs-secnav { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(250,245,232,.5)); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.25), 0 10px 30px -14px rgba(0,0,0,.4); } body.has-bg-video .cs-secnav .cs-secnav__link { color: rgba(36,29,15,.82); } body.has-bg-video .cs-secnav .cs-secnav__link.is-active { color: #5b4516; border-bottom-color: #5b4516; } /* ---- the drawer ------------------------------------------------------ */ .cs-drawer { margin: clamp(22px, 2.6vw, 34px) 0; padding: 0; } body.has-bg-video:not(.home) .cs-drawer { padding: 0; } .cs-drawer__sum { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 2.2vw, 26px) clamp(22px, 3vw, 40px); cursor: pointer; list-style: none; border-radius: inherit; } .cs-drawer__sum::-webkit-details-marker { display: none; } .cs-drawer__sum::marker { content: ""; } .cs-drawer__sum:focus-visible { outline: 2px solid var(--cs-gold-soft, #e8c97a); outline-offset: -4px; } .cs-drawer__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cs-drawer__text .cs-kick { margin: 0; } .cs-drawer__title { font-family: var(--cs-display-serif); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; color: var(--cs-ink); } .cs-drawer__note { font-family: var(--cs-sans); font-size: .82rem; color: var(--cs-ink-faint); } .cs-drawer__cta { flex: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--cs-sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold-deep); padding: 10px 16px; border: 1px solid var(--cs-hair); border-radius: 999px; transition: background-color .25s ease, border-color .25s ease; } .cs-drawer__sum:hover .cs-drawer__cta { border-color: currentColor; background: rgba(255,255,255,.07); } .cs-drawer__cta svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); } .cs-drawer[open] .cs-drawer__cta svg { transform: rotate(180deg); } .cs-drawer__cta-less { display: none; } .cs-drawer[open] .cs-drawer__cta-more { display: none; } .cs-drawer[open] .cs-drawer__cta-less { display: inline; } .cs-drawer__inner { padding: 0 clamp(22px, 3vw, 40px) clamp(24px, 3vw, 40px); } .cs-drawer__inner::before { content: ""; display: block; height: 1px; margin-bottom: clamp(22px, 2.6vw, 32px); background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.05)); } .cs-drawer[open] > .cs-drawer__sum .cs-drawer__title { color: var(--cs-ink); } /* No-bg (ivory) pages: the same drawer, drawn with hairlines. */ body:not(.has-bg-video) .cs-drawer { border-top: 1px solid var(--cs-hair); border-bottom: 1px solid var(--cs-hair); } body:not(.has-bg-video) .cs-drawer__sum { padding-left: 0; padding-right: 0; } body:not(.has-bg-video) .cs-drawer__inner { padding-left: 0; padding-right: 0; } /* Inline variant inside the archive hero panel — a quiet "how to browse" row. */ .cs-dir__hero-panel .cs-drawer { margin: 14px 0 0; } body.has-bg-video:not(.home) .cs-dir__hero-panel .cs-drawer { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; } .cs-dir__hero-panel .cs-drawer__sum { padding: 12px 0; } .cs-dir__hero-panel .cs-drawer__inner { padding: 0 0 4px; } .cs-dir__hero-panel .cs-drawer__inner::before { display: none; } .cs-dir__hero-panel .cs-drawer__title { font-size: 1rem; } body.has-bg-video:not(.home) .cs-dir__hero-panel { display: inline-block; max-width: min(640px, 100%); padding: clamp(22px, 3vw, 34px); margin-top: 6px; } .cs-dir__hero-panel .cs-sub { margin-top: 0; } /* Reduced motion: no height animation (the JS also skips it). */ @media (prefers-reduced-motion: reduce) { .cs-drawer__cta svg { transition: none; } } /* ---- details inside panes ------------------------------------------- */ /* Section titles: the article's generic h2 rule draws its own hairline, and .cs-trip-section__head draws another plus a growing gold rule — three lines under one heading. One is enough: the head's. */ .cs-dir-single__content .cs-trip-section__title, .cs-drawer .cs-trip-section__title { border-bottom: 0; padding-bottom: 0; margin: 0; } /* Primary buttons: the white-on-pale-gold the light token remap gave them failed contrast over glass. A solid antique-gold with white type is readable on any footage and still clearly the main action. */ body.has-bg-video:not(.home) .cs-pane .cs-btn--primary, body.has-bg-video:not(.home) .cs-triprail .cs-btn--primary, body.has-bg-video:not(.home) .cs-dir-single__content .cs-btn--primary { background: #8a6d35; border-color: #8a6d35; color: #fff; text-shadow: none; box-shadow: 0 8px 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28); } body.has-bg-video:not(.home) .cs-triprail .cs-btn--primary:hover, body.has-bg-video:not(.home) .cs-dir-single__content .cs-btn--primary:hover { background: #a3823f; border-color: #a3823f; color: #fff; } /* Route list that stands in for the map when Leaflet is blocked: a quiet inset on the glass rather than a solid cream tile. */ body.has-bg-video:not(.home) .cs-itin__map-inner:not(.leaflet-container) { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); border-radius: 18px; } body.has-bg-video:not(.home) .cs-itin__map-inner:not(.leaflet-container) * { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); } /* Rail labels were the faintest text on the page. */ body.has-bg-video:not(.home) .cs-triprail__pricelabel, body.has-bg-video:not(.home) .cs-triprail__fact dt { color: rgba(255,255,255,.78); } body.has-bg-video:not(.home) #chanua-map:not(.leaflet-container) { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); border-radius: 18px; border-color: transparent; } body.has-bg-video:not(.home) #chanua-map:not(.leaflet-container) * { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); } /* The "itineraries we actually run" showcase on the Safaris archive is a card grid whose cards already carry their own photo + scrim. One big slab behind all of them would just be a box around boxes, so only its heading block gets the glass. */ body.has-bg-video:not(.home) .cs-official-showcase { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; } body.has-bg-video:not(.home) .cs-official-showcase > .cs-trip-section__head { display: inline-block; max-width: min(720px, 100%); margin-bottom: 22px; padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 38px); border: 0; border-radius: 26px; background: var(--cs-glass-grain), linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 45%, rgba(255,255,255,.09)), rgba(20,15,8,.38); background-blend-mode: soft-light, normal, normal; -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(.78); backdrop-filter: blur(26px) saturate(185%) brightness(.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 1px 0 0 rgba(255,255,255,.2), 0 24px 50px -22px rgba(0,0,0,.55); } body.has-bg-video:not(.home) .cs-official-showcase > .cs-trip-section__head::after { display: none; } /* ---- archive cards: a glass plate under the price ------------------- */ /* The photo stays the star; the price + "View trip" sit on a small pane of real glass so they read on any photograph, instead of relying on the bottom scrim alone. Works with or without the page background video — the glass sits on the card's own photo. */ .cs-dir-card__foot { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,.02) 65%, rgba(255,255,255,.1) 100%), rgba(16,12,6,.16); -webkit-backdrop-filter: blur(22px) saturate(175%) brightness(.9); backdrop-filter: blur(22px) saturate(175%) brightness(.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.05), 0 14px 30px -14px rgba(0,0,0,.6); } .cs-dir-card__foot .cs-dir-card__link { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cs-dir-card__foot { background: rgba(16,12,6,.82); } } /* Links in running copy: the article's dark-green link colour is invisible on a smoky pane. Warm gold underlined links read on every frame. */ body.has-bg-video:not(.home) .cs-prose a:not(.cs-btn), body.has-bg-video:not(.home) .cs-triptop__intro a:not(.cs-btn), body.has-bg-video:not(.home) .cs-trip-section a:not(.cs-btn):not(.cs-related-card):not(.cs-media-cta), body.has-bg-video:not(.home) .cs-drawer a:not(.cs-btn) { color: #f3d995; text-decoration-color: rgba(243,217,149,.5); } body.has-bg-video:not(.home) .cs-prose a:not(.cs-btn):hover, body.has-bg-video:not(.home) .cs-triptop__intro a:not(.cs-btn):hover, body.has-bg-video:not(.home) .cs-trip-section a:not(.cs-btn):not(.cs-related-card):hover { color: #fff; } body.has-bg-video:not(.home) .cs-prose strong, body.has-bg-video:not(.home) .cs-triptop__intro strong { color: #f3d995; } /* Card label never breaks mid-phrase on the small tiles. */ .cs-dir-card__price-label, .cs-dir-card__price-unit { white-space: nowrap; } .cs-dir-card__foot { padding: 12px 14px; } /* The tile behind the map (cream placeholder while Leaflet loads / when it is blocked) becomes a clear inset on the glass. */ body.has-bg-video:not(.home) .cs-mag-split__media { background: rgba(255,255,255,.05); border-radius: 18px; overflow: hidden; } /* Reading panels hug the text measure instead of stretching the full column and leaving an empty glass half beside a 68ch paragraph. */ body.has-bg-video:not(.home) .cs-prose { max-width: min(100%, 860px); } body.has-bg-video:not(.home) .cs-prose .cs-content-pull-img { max-width: 100%; } body.has-bg-video:not(.home) .cs-prose > p, body.has-bg-video:not(.home) .cs-prose > ul, body.has-bg-video:not(.home) .cs-prose > ol, body.has-bg-video:not(.home) .cs-prose > blockquote, body.has-bg-video:not(.home) .cs-prose > h2, body.has-bg-video:not(.home) .cs-prose > h3 { max-width: none; } /* Single-column layouts: the summary rail flows with the page rather than sticking over the panes that follow it. */ @media (max-width: 860px) { .cs-triprail { position: static; } } /* ===================================================================== Booking wizard, Contact, About, generic pages, footer, header ===================================================================== */ /* -- Booking wizard ("Plan your journey") -- */ body.has-bg-video:not(.home) .cs-plan__header { max-width: 640px; margin-left: auto; margin-right: auto; padding: clamp(24px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px); } body.has-bg-video:not(.home) .cs-plan__regarding { border-top-color: rgba(255,255,255,.22); } body.has-bg-video:not(.home) .cs-plan__title, body.has-bg-video:not(.home) .cs-plan__sub, body.has-bg-video:not(.home) .cs-plan__regarding { text-shadow: 0 1px 1px rgba(0,0,0,.3); } body.has-bg-video:not(.home) .cs-plan__title em { color: #f3d995; } /* Choice tiles: little glass pills, gold when chosen. */ body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-plan__tile { color: #fff; text-shadow: none; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-plan__tile:hover { border-color: #f0d28f; background: rgba(255,255,255,.18); } body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-plan__tile.is-selected { background: #8a6d35; border-color: #c9a227; color: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3); } body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-plan__tile--prominent { border-color: #f0d28f; } body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-plan__tile--prominent.is-selected { background: #a3823f; border-style: solid; } /* Fields: white type, light underline that warms to gold on focus. */ body.has-bg-video:not(.home) .cs-plan__field input, body.has-bg-video:not(.home) .cs-plan__field textarea { color: #fff; border-bottom-color: rgba(255,255,255,.4); text-shadow: none; } body.has-bg-video:not(.home) .cs-plan__field input::placeholder, body.has-bg-video:not(.home) .cs-plan__field textarea::placeholder { color: rgba(255,255,255,.5); } body.has-bg-video:not(.home) .cs-plan__field input:focus, body.has-bg-video:not(.home) .cs-plan__field textarea:focus { border-bottom-color: #f0d28f; } body.has-bg-video:not(.home) .cs-plan__progress-track { background: rgba(255,255,255,.22); } body.has-bg-video:not(.home) .cs-plan__progress-fill { background: #f0d28f; } body.has-bg-video:not(.home) .cs-plan__error { color: #ffb9ad; } body.has-bg-video:not(.home) .cs-plan__nav { border-top-color: rgba(255,255,255,.22); } body.has-bg-video:not(.home) .cs-plan__back { color: #fff; border-color: rgba(255,255,255,.4); } body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-btn--primary { background: #8a6d35; border-color: #8a6d35; color: #fff; text-shadow: none; box-shadow: 0 8px 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28); } body.has-bg-video:not(.home) .cs-plan__form-wrap .cs-btn--primary:hover { background: #a3823f; border-color: #a3823f; } /* -- Contact -- */ body.has-bg-video:not(.home) .cs-contact-card { padding: 28px 26px 26px; } body.has-bg-video:not(.home) .cs-contact-card .cs-btn--outline, body.has-bg-video:not(.home) .cs-contact-page .cs-btn--outline { color: #fff; border-color: rgba(255,255,255,.55); } body.has-bg-video:not(.home) .cs-contact-card .cs-btn--outline:hover { background: rgba(255,255,255,.14); border-color: #fff; } body.has-bg-video:not(.home) .cs-contact-card .cs-btn--primary { background: #8a6d35; border-color: #8a6d35; color: #fff; } body.has-bg-video:not(.home) .cs-contact-info a { color: #f3d995; } body.has-bg-video:not(.home) .cs-contact-info { border-style: solid; } /* -- About -- */ body.has-bg-video:not(.home) .cs-about__content { max-width: min(100%, 760px); margin-left: auto; margin-right: auto; } body.has-bg-video:not(.home) .cs-about-stats { padding: clamp(22px, 3vw, 36px); } body.has-bg-video:not(.home) .cs-founder { padding: clamp(22px, 3vw, 36px); } body.has-bg-video:not(.home) .cs-founder .cs-btn--primary { background: #8a6d35; border-color: #8a6d35; color: #fff; } /* -- Generic pages, posts, search results, 404 (they already carried the old .cs-glass class; that recipe is now the true-glass one above) -- */ body.has-bg-video:not(.home) .cs-generic-page__card.cs-glass { color: #fff; } body.has-bg-video:not(.home) .cs-generic-page__card a:not(.cs-btn), body.has-bg-video:not(.home) .cs-archive-card.cs-glass a { color: #f3d995; } /* -- Footer: one long sheet of glass, lit along its top edge -- */ body.has-bg-video:not(.home) .cs-footer.cs-glass--dark { border: 0; border-radius: 0; background: var(--cs-glass-grain), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 40%, rgba(255,255,255,.04)), rgba(16,12,6,.2); background-blend-mode: soft-light, normal, normal; -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(.86); backdrop-filter: blur(30px) saturate(170%) brightness(.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 -20px 50px -24px rgba(0,0,0,.5); } /* -- Header on inner pages: light glass, dark type -- */ body.has-bg-video:not(.home) .cs-nav.is-scrolled { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,245,232,.66)); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); border-bottom-color: transparent; box-shadow: inset 0 -1px 0 rgba(255,255,255,.35), 0 14px 34px -18px rgba(0,0,0,.45); } /* Native date picker / checkbox chrome follows the dark glass. */ body.has-bg-video:not(.home) .cs-plan__form-wrap input, body.has-bg-video:not(.home) .cs-plan__form-wrap textarea { color-scheme: dark; } /* Search / 404 / generic page headers: centred glass plate, light type. */ body.has-bg-video:not(.home) .cs-page-header { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: clamp(26px, 4vw, 44px); } body.has-bg-video:not(.home) .cs-page-header .cs-h2 { color: #fff; } body.has-bg-video:not(.home) .cs-generic-page .cs-wrap > .cs-sub, body.has-bg-video:not(.home) .cs-generic-page .cs-wrap > p { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.4); } body.has-bg-video:not(.home) .cs-generic-page .cs-wrap > p a { color: #f3d995; } body.has-bg-video:not(.home) .cs-page-header .cs-sub { margin-left: auto; margin-right: auto; text-align: center; } /* ===================================================================== Clearer panels, real tiles, more visible drawers ===================================================================== */ /* -- Panels: a defined edge you can actually see on any footage. A true 1px light border (not just an inner highlight), a touch more tint, and a faint outer ring so a pane never melts into a bright frame. -- */ body.has-bg-video:not(.home) .cs-pane, body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro, body.has-bg-video:not(.home) .cs-triprail, body.has-bg-video:not(.home) .cs-trip-section, body.has-bg-video:not(.home) .cs-quick-stats, body.has-bg-video:not(.home) .cs-seasonal-intel, body.has-bg-video:not(.home) .cs-trip-emergency, body.has-bg-video:not(.home) .cs-drawer, body.has-bg-video:not(.home) .cs-archive-toolbar, body.has-bg-video:not(.home) .cs-dir__hero-panel, body.has-bg-video:not(.home) .cs-plan__form-wrap, body.has-bg-video:not(.home) .cs-plan__header, body.has-bg-video:not(.home) .cs-contact-card, body.has-bg-video:not(.home) .cs-contact-info, body.has-bg-video:not(.home) .cs-about__content, body.has-bg-video:not(.home) .cs-about-stats, body.has-bg-video:not(.home) .cs-founder, body.has-bg-video:not(.home) .cs-page-header { border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(.9); backdrop-filter: blur(30px) saturate(175%) brightness(.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 1px 0 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.18), 0 28px 64px -22px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.22); } /* flat nested resets must stay flat */ body.has-bg-video:not(.home) .cs-drawer .cs-trip-section, body.has-bg-video:not(.home) .cs-drawer .cs-trip-emergency, body.has-bg-video:not(.home) .cs-trip-section .cs-trip-section, body.has-bg-video:not(.home) .cs-trip-section .cs-quick-stats, body.has-bg-video:not(.home) .cs-trip-section .cs-seasonal-intel, body.has-bg-video:not(.home) .cs-dir__hero-panel .cs-drawer, body.has-bg-video:not(.home) .cs-official-showcase { border: 0; box-shadow: none; } /* -- Tiles: the small blocks inside a panel become their own little pieces of glass — lighter than the panel, with a bright top edge — so facts, stats, tips, days and lists read as separate objects. -- */ body.has-bg-video:not(.home) .cs-quick-stat, body.has-bg-video:not(.home) .cs-itin__day, body.has-bg-video:not(.home) .cs-trip-health__item, body.has-bg-video:not(.home) .cs-trip-gem, body.has-bg-video:not(.home) .cs-trip-climate__col, body.has-bg-video:not(.home) .cs-trip-incl__col, body.has-bg-video:not(.home) .cs-tiers__card, body.has-bg-video:not(.home) .cs-triprail__fact, body.has-bg-video:not(.home) .cs-mag-facts li, body.has-bg-video:not(.home) .cs-trip-emergency__list li, body.has-bg-video:not(.home) .cs-about-stats__item { background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -12px rgba(0,0,0,.5); padding: 16px 18px; } /* stacks of tiles breathe */ body.has-bg-video:not(.home) .cs-itin__list { display: flex; flex-direction: column; gap: 12px; } body.has-bg-video:not(.home) .cs-itin__day, body.has-bg-video:not(.home) .cs-itin__day:first-child { border-bottom-width: 1px; border-top-width: 1px; padding: 0 20px; } body.has-bg-video:not(.home) .cs-itin__trigger { padding: 18px 2px; } body.has-bg-video:not(.home) .cs-itin__day.is-open { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); border-color: rgba(255,255,255,.34); } body.has-bg-video:not(.home) .cs-trip-gems { gap: 12px; } body.has-bg-video:not(.home) .cs-trip-health, body.has-bg-video:not(.home) .cs-trip-emergency__list { display: grid; gap: 12px; } body.has-bg-video:not(.home) .cs-trip-emergency__list li { border-top: 1px solid rgba(255,255,255,.22); } body.has-bg-video:not(.home) .cs-triprail__facts { border-top: 0; display: grid; gap: 10px; } body.has-bg-video:not(.home) .cs-triprail__fact { border-bottom: 1px solid rgba(255,255,255,.22); } body.has-bg-video:not(.home) .cs-mag-facts { gap: 12px; } body.has-bg-video:not(.home) .cs-mag-facts li { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.22); } body.has-bg-video:not(.home) .cs-quick-stats { gap: 14px; } body.has-bg-video:not(.home) .cs-quick-stats .cs-quick-stat { min-width: 150px; padding: 18px 24px; } /* tier tabs + price pills already tile-like: give them the same edge */ body.has-bg-video:not(.home) .cs-tiers__tab { border: 1px solid rgba(255,255,255,.3); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); } body.has-bg-video:not(.home) .cs-tiers__tab.is-active { background: #8a6d35; border-color: #c9a227; } /* the grid layout inside the climate table keeps its columns */ body.has-bg-video:not(.home) .cs-trip-climate { gap: 12px; } /* -- Drawers: unmistakable. Gold accent on the left edge, a round +/- button, and a hover lift, so they read as something to open. -- */ .cs-drawer__sum { position: relative; } .cs-drawer__cta { background: rgba(255,255,255,.08); border-color: rgba(240,210,143,.55); color: #f3d995; font-weight: 600; } body:not(.has-bg-video) .cs-drawer__cta { color: var(--cs-gold-deep); border-color: var(--cs-gold-deep); } .cs-drawer__sum:hover .cs-drawer__cta { background: #8a6d35; border-color: #c9a227; color: #fff; } .cs-drawer__title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } .cs-drawer__note { font-size: .88rem; } body.has-bg-video:not(.home) .cs-drawer { border-left: 3px solid #c9a227; } body.has-bg-video:not(.home) .cs-drawer:hover { transform: translateY(-2px); } .cs-drawer { transition: transform .3s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { .cs-drawer { transition: none; } body.has-bg-video:not(.home) .cs-drawer:hover { transform: none; } } /* Reading text keeps a slightly denser glass than UI panels, so long paragraphs stay comfortable — still clearly see-through. */ body.has-bg-video:not(.home) .cs-prose, body.has-bg-video:not(.home) .cs-triptop__intro { -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(.8); backdrop-filter: blur(30px) saturate(170%) brightness(.8); }