/* Surface moods — May 2026 brand expansion. * * Apply on OR on a section wrapper to lift a page out of the * default brown-black surface into something lighter. Pages should * pick one mood per top-level surface (mixing within a hero is fine). * * — catalog, grid pages * — editorial, magazine, about * — concierge, advisor, settings * — journeys, calm pages * — explicit cinematic (default) * * Headings shift to ink/charcoal, links keep gold, gold buttons stay * the same — the chrome (sidebar, footer, hero photo overlays) stays * dark by design so the brand thread isn't lost. */ body.mood-ivory, body.mood-stone, body.mood-beige, body.mood-mist { color: var(--charcoal); } body.mood-ivory { background: var(--mood-ivory-bg); } body.mood-stone { background: var(--mood-stone-bg); } body.mood-beige { background: var(--mood-beige-bg); } body.mood-mist { background: var(--mood-mist-bg); } /* Headings/typography on light moods */ body.mood-ivory h1, body.mood-stone h1, body.mood-beige h1, body.mood-mist h1, body.mood-ivory h2, body.mood-stone h2, body.mood-beige h2, body.mood-mist h2, body.mood-ivory h3, body.mood-stone h3, body.mood-beige h3, body.mood-mist h3, body.mood-ivory h4, body.mood-stone h4, body.mood-beige h4, body.mood-mist h4, body.mood-ivory p, body.mood-stone p, body.mood-beige p, body.mood-mist p { color: var(--charcoal); } /* The sticky topnav stays dark for brand continuity — but slightly * lifts to a translucent treatment over light bodies. */ body.mood-ivory .topnav, body.mood-stone .topnav, body.mood-beige .topnav, body.mood-mist .topnav { background: rgba(12, 9, 6, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Section wrappers can carry the same mood (without affecting body) */ .mood-section-ivory { background: var(--mood-ivory-bg); color: var(--charcoal); } .mood-section-stone { background: var(--mood-stone-bg); color: var(--charcoal); } .mood-section-beige { background: var(--mood-beige-bg); color: var(--charcoal); } .mood-section-mist { background: var(--mood-mist-bg); color: var(--charcoal); } .mood-section-deep { background: var(--mood-deep-bg); color: var(--cream); } /* Inside a light section, give h1-h4 the right color too */ .mood-section-ivory h1, .mood-section-ivory h2, .mood-section-ivory h3, .mood-section-ivory h4, .mood-section-stone h1, .mood-section-stone h2, .mood-section-stone h3, .mood-section-stone h4, .mood-section-beige h1, .mood-section-beige h2, .mood-section-beige h3, .mood-section-beige h4, .mood-section-mist h1, .mood-section-mist h2, .mood-section-mist h3, .mood-section-mist h4 { color: var(--charcoal); } .mood-section-deep h1, .mood-section-deep h2, .mood-section-deep h3, .mood-section-deep h4 { color: var(--cream); } /* Lift cards on light surfaces */ body.mood-ivory .hotel-card, body.mood-stone .hotel-card, body.mood-beige .hotel-card, body.mood-mist .hotel-card, body.mood-ivory .bt-card, body.mood-stone .bt-card, body.mood-beige .bt-card, body.mood-mist .bt-card { background: #FFFFFF; border: 1px solid var(--border-default, rgba(44, 44, 44, 0.12)); color: var(--charcoal); box-shadow: 0 10px 30px rgba(24, 18, 12, 0.06); } /* Hotel body text inside cards on light surfaces */ body.mood-ivory .hotel-card .body h3, body.mood-stone .hotel-card .body h3, body.mood-beige .hotel-card .body h3, body.mood-mist .hotel-card .body h3 { color: var(--charcoal); } body.mood-ivory .hotel-card .body .loc, body.mood-stone .hotel-card .body .loc, body.mood-beige .hotel-card .body .loc, body.mood-mist .hotel-card .body .loc { color: var(--gold-deep); } body.mood-ivory .hotel-card .body .teaser, body.mood-stone .hotel-card .body .teaser, body.mood-beige .hotel-card .body .teaser, body.mood-mist .hotel-card .body .teaser { color: rgba(24, 18, 12, 0.7); } /* S10 — amenity tag pills on hotel cards on light moods */ body.mood-ivory .hotel-card .amenity-tags, body.mood-stone .hotel-card .amenity-tags, body.mood-beige .hotel-card .amenity-tags, body.mood-mist .hotel-card .amenity-tags { color: rgba(24, 18, 12, 0.55); } body.mood-ivory .hotel-card .amenity-tags span, body.mood-stone .hotel-card .amenity-tags span, body.mood-beige .hotel-card .amenity-tags span, body.mood-mist .hotel-card .amenity-tags span { border: 1px solid rgba(184, 146, 26, 0.25); color: var(--gold-deep, #8A6E10); } /* Filter rail on light surfaces */ body.mood-ivory .hotels-filters, body.mood-stone .hotels-filters, body.mood-beige .hotels-filters, body.mood-mist .hotels-filters { background: #FFFFFF; border: 1px solid var(--border-default, rgba(44, 44, 44, 0.12)); color: var(--charcoal); } body.mood-ivory .hotels-filters .filter-label, body.mood-stone .hotels-filters .filter-label, body.mood-beige .hotels-filters .filter-label, body.mood-mist .hotels-filters .filter-label, body.mood-ivory .hotels-filters summary, body.mood-stone .hotels-filters summary, body.mood-beige .hotels-filters summary, body.mood-mist .hotels-filters summary { color: var(--charcoal); } body.mood-ivory .hotels-filters input, body.mood-stone .hotels-filters input, body.mood-beige .hotels-filters input, body.mood-mist .hotels-filters input, body.mood-ivory .hotels-filters select, body.mood-stone .hotels-filters select, body.mood-beige .hotels-filters select, body.mood-mist .hotels-filters select { background: #FDFBF7; border: 1px solid var(--border-default); color: var(--charcoal); } /* Hero section keeps its photo + dark overlay — but on a light body, * the .hotels-hero wrapper background goes deep so the transition * from light-body → dark-hero reads as a layered editorial. */ body.mood-ivory .hotels-hero, body.mood-stone .hotels-hero, body.mood-beige .hotels-hero, body.mood-mist .hotels-hero { background: var(--mood-deep-bg); color: var(--cream); } body.mood-ivory .hotels-hero h1, body.mood-stone .hotels-hero h1, body.mood-beige .hotels-hero h1, body.mood-mist .hotels-hero h1, body.mood-ivory .hotels-hero .subhead, body.mood-stone .hotels-hero .subhead, body.mood-beige .hotels-hero .subhead, body.mood-mist .hotels-hero .subhead { color: var(--cream); } /* Results count + sort selects on light surfaces */ body.mood-ivory .results-count, body.mood-stone .results-count, body.mood-beige .results-count, body.mood-mist .results-count { color: var(--charcoal); } body.mood-ivory .sort-select, body.mood-stone .sort-select, body.mood-beige .sort-select, body.mood-mist .sort-select { background: #FFFFFF; border: 1px solid var(--border-default); color: var(--charcoal); } /* ───────────────────────────────────────────────────────────────── * Hotel detail page on a light mood. hotel-detail.css hard-binds * .hotel-detail-body to var(--black), so we override here with * higher specificity. The hero photo + dark overlays inside the * page stay dark by design (.hd-cover, .editorial-cover, etc.); * only the page body + editorial body sections lift to the mood. * ───────────────────────────────────────────────────────────────── */ body.hotel-detail-body.mood-ivory, body.hotel-detail-body.mood-stone, body.hotel-detail-body.mood-beige, body.hotel-detail-body.mood-mist { color: var(--charcoal); } body.hotel-detail-body.mood-ivory { background: var(--mood-ivory-bg) !important; } body.hotel-detail-body.mood-stone { background: var(--mood-stone-bg) !important; } body.hotel-detail-body.mood-beige { background: var(--mood-beige-bg) !important; } body.hotel-detail-body.mood-mist { background: var(--mood-mist-bg) !important; } /* Editorial typography on light moods */ body.hotel-detail-body.mood-ivory .editorial-body, body.hotel-detail-body.mood-stone .editorial-body, body.hotel-detail-body.mood-beige .editorial-body, body.hotel-detail-body.mood-mist .editorial-body, body.hotel-detail-body.mood-ivory .hd-editorial__body, body.hotel-detail-body.mood-stone .hd-editorial__body, body.hotel-detail-body.mood-beige .hd-editorial__body, body.hotel-detail-body.mood-mist .hd-editorial__body { color: var(--charcoal); } body.hotel-detail-body.mood-ivory .hd-editorial__body p, body.hotel-detail-body.mood-stone .hd-editorial__body p, body.hotel-detail-body.mood-beige .hd-editorial__body p, body.hotel-detail-body.mood-mist .hd-editorial__body p { color: rgba(24, 18, 12, 0.82); } /* Detail cards on light moods — lift to white panels */ body.hotel-detail-body.mood-ivory .hd-detail-card, body.hotel-detail-body.mood-stone .hd-detail-card, body.hotel-detail-body.mood-beige .hd-detail-card, body.hotel-detail-body.mood-mist .hd-detail-card { background: #FFFFFF; border: 1px solid var(--border-default, rgba(44,44,44,0.12)); box-shadow: 0 10px 30px rgba(24, 18, 12, 0.06); color: var(--charcoal); } body.hotel-detail-body.mood-ivory .hd-detail-card__body p, body.hotel-detail-body.mood-stone .hd-detail-card__body p, body.hotel-detail-body.mood-beige .hd-detail-card__body p, body.hotel-detail-body.mood-mist .hd-detail-card__body p, body.hotel-detail-body.mood-ivory .hd-detail-card__body li, body.hotel-detail-body.mood-stone .hd-detail-card__body li, body.hotel-detail-body.mood-beige .hd-detail-card__body li, body.hotel-detail-body.mood-mist .hd-detail-card__body li { color: rgba(24, 18, 12, 0.82); } /* Breadcrumb bar on light moods */ body.hotel-detail-body.mood-ivory .breadcrumb-bar, body.hotel-detail-body.mood-stone .breadcrumb-bar, body.hotel-detail-body.mood-beige .breadcrumb-bar, body.hotel-detail-body.mood-mist .breadcrumb-bar { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-default, rgba(44,44,44,0.12)); color: var(--charcoal); } /* Request-a-stay modal — was dark by default; on a light body this * lifts to a white panel with ink inputs so the form is readable. */ body.hotel-detail-body.mood-ivory .modal__panel, body.hotel-detail-body.mood-stone .modal__panel, body.hotel-detail-body.mood-beige .modal__panel, body.hotel-detail-body.mood-mist .modal__panel { background: #FFFFFF !important; color: var(--charcoal); border: 1px solid var(--border-default, rgba(44, 44, 44, 0.12)); box-shadow: 0 24px 80px rgba(24, 18, 12, 0.16); } body.hotel-detail-body.mood-ivory .modal__panel h2, body.hotel-detail-body.mood-stone .modal__panel h2, body.hotel-detail-body.mood-beige .modal__panel h2, body.hotel-detail-body.mood-mist .modal__panel h2 { color: var(--charcoal); } body.hotel-detail-body.mood-ivory .modal label, body.hotel-detail-body.mood-stone .modal label, body.hotel-detail-body.mood-beige .modal label, body.hotel-detail-body.mood-mist .modal label { color: var(--charcoal); font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } body.hotel-detail-body.mood-ivory .modal input, body.hotel-detail-body.mood-stone .modal input, body.hotel-detail-body.mood-beige .modal input, body.hotel-detail-body.mood-mist .modal input, body.hotel-detail-body.mood-ivory .modal textarea, body.hotel-detail-body.mood-stone .modal textarea, body.hotel-detail-body.mood-beige .modal textarea, body.hotel-detail-body.mood-mist .modal textarea { background: #FDFBF7 !important; border: 1px solid var(--border-default, rgba(44, 44, 44, 0.12)) !important; color: var(--charcoal) !important; padding: 11px 13px !important; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; border-radius: 2px; } body.hotel-detail-body.mood-ivory .modal input:focus, body.hotel-detail-body.mood-stone .modal input:focus, body.hotel-detail-body.mood-beige .modal input:focus, body.hotel-detail-body.mood-mist .modal input:focus, body.hotel-detail-body.mood-ivory .modal textarea:focus, body.hotel-detail-body.mood-stone .modal textarea:focus, body.hotel-detail-body.mood-beige .modal textarea:focus, body.hotel-detail-body.mood-mist .modal textarea:focus { outline: 0; border-color: var(--gold) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(184, 146, 26, 0.08); } body.hotel-detail-body.mood-ivory .modal__close, body.hotel-detail-body.mood-stone .modal__close, body.hotel-detail-body.mood-beige .modal__close, body.hotel-detail-body.mood-mist .modal__close { color: var(--charcoal); } body.hotel-detail-body.mood-ivory .modal fieldset, body.hotel-detail-body.mood-stone .modal fieldset, body.hotel-detail-body.mood-beige .modal fieldset, body.hotel-detail-body.mood-mist .modal fieldset { border: 1px solid var(--border-default, rgba(44, 44, 44, 0.12)); padding: 14px; margin-bottom: 1rem; } body.hotel-detail-body.mood-ivory .modal legend, body.hotel-detail-body.mood-stone .modal legend, body.hotel-detail-body.mood-beige .modal legend, body.hotel-detail-body.mood-mist .modal legend { color: var(--gold-deep, #8A6E10); padding: 0 8px; } body.hotel-detail-body.mood-ivory .modal .btn-primary, body.hotel-detail-body.mood-stone .modal .btn-primary, body.hotel-detail-body.mood-beige .modal .btn-primary, body.hotel-detail-body.mood-mist .modal .btn-primary { background: var(--gold); color: var(--mood-deep-bg); border: 1px solid var(--gold); padding: 12px 24px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; border-radius: 2px; } body.hotel-detail-body.mood-ivory .modal__note, body.hotel-detail-body.mood-stone .modal__note, body.hotel-detail-body.mood-beige .modal__note, body.hotel-detail-body.mood-mist .modal__note { color: rgba(24, 18, 12, 0.55); font-style: italic; margin-top: 1rem; font-size: 13px; } /* ───────────────────────────────────────────────────────────────── * Soft-blue mood — sophisticated, calm. Use for journeys, advisory * pages, anywhere the brown/gold gets visually loud and you want a * breath. Not navy — washed cool-stone. * ───────────────────────────────────────────────────────────────── */ :root { --mood-azure-bg: #E5EBF1; /* washed slate */ --mood-azure-accent: #4B6076; /* deep teal-grey for accents */ --mood-azure-card: #FFFFFF; } body.mood-azure { background: var(--mood-azure-bg); color: var(--charcoal); } body.mood-azure .topnav { background: rgba(12, 9, 6, 0.92); backdrop-filter: blur(10px); } body.mood-azure h1, body.mood-azure h2, body.mood-azure h3, body.mood-azure h4 { color: var(--charcoal); } body.mood-azure .hotel-card, body.mood-azure .bt-card { background: var(--mood-azure-card); border: 1px solid rgba(75, 96, 118, 0.18); box-shadow: 0 10px 30px rgba(75, 96, 118, 0.10); } body.mood-azure .hotel-card .body .loc { color: var(--mood-azure-accent); } body.mood-azure .hotel-card .body h3 { color: var(--charcoal); } body.mood-azure .hotel-card .body .teaser { color: rgba(24, 18, 12, 0.72); } body.hotel-detail-body.mood-azure { background: var(--mood-azure-bg) !important; color: var(--charcoal); } body.hotel-detail-body.mood-azure .hd-detail-card { background: #FFFFFF; border: 1px solid rgba(75, 96, 118, 0.18); } body.hotel-detail-body.mood-azure .hd-editorial__body p { color: rgba(24, 18, 12, 0.82); } body.hotel-detail-body.mood-azure .breadcrumb-bar { background: rgba(255,255,255,0.85); }