/* ========================================================================== theme-dark.css — the ink palette, opt-in per page -------------------------------------------------------------------------- Project: Kali Villas Mentawai Layer: Theme (loaded LAST, after the page stylesheet) Loaded by: how-to-get-here.html (first use — the Getting Here page the Tunel Crew lightbox links to; owner direction, 2 Sep 2026) -------------------------------------------------------------------------- js/theme.js stamps data-theme="dark" on when the URL carries ?theme=dark, before any stylesheet loads. Everything below is token work: the sand family becomes ink, the navy family becomes paper, so every component that reads the tokens re-renders in the dark register of the house (the same inks the Tunel Crew page runs on). Components that are navy ON PURPOSE (the closing CTA, the footer, the overview strip, the ferry schedule header, the "new" tag, the featured rate card, the Waves page's doorstep band) keep the light token set INSIDE them, so their own rules — navy ground, sand type — render exactly as designed on the ink page. ========================================================================== */ html[data-theme="dark"] { --sand: #101010; /* page ground — the Tunel Crew ink */ --sand-dark: #171717; /* alternating sections */ --sand-deeper: #2a2a2a; /* borders and dividers */ --navy: #e8e6e6; /* body text — their warm off-white */ --navy-soft: #f2f0ee; --navy-muted: #c9c6c0; /* muted copy */ --navy-dim: #9a978f; /* captions and labels */ --terra-pale: #2a1d15; /* the faint terracotta tint, on ink */ color-scheme: dark; } html[data-theme="dark"] body { background: var(--sand); color: var(--navy); } html[data-theme="dark"] :is(.cta-section, .site-footer, footer, .overview-strip, .overview-item, .ferry-schedule-head, .tag-new, .rate-featured, .doorstep) { --sand: #f5efe3; --sand-dark: #ede5d4; --sand-deeper: #e2d8c6; --navy: #1c2b4a; --navy-soft: #2e3f62; --navy-muted: #3d4f6e; --navy-dim: #5a6a8a; --terra-pale: #f0d8c8; } /* Media placeholders: the light cut sits on sand; on ink, use the dark cut the Tunel Crew page already ships. */ html[data-theme="dark"] .carousel-item, html[data-theme="dark"] .room-hero, html[data-theme="dark"] .chapter-photo, html[data-theme="dark"] .star-frame { background-image: url('../img/logo/media-ph-dark.png'); } /* The top nav paints its own sand (a literal rgba in nav.css, not a token), so on ink it needs saying again: the same ink, the same blur. The brand lockup stays the untouched official file, exactly as the Tunel Crew nav shows it on ink. The two terracotta CTAs keep paper type (their colour reads the sand token). */ html[data-theme="dark"] nav { background: rgba(16, 16, 16, 0.92); border-bottom-color: #2a2a2a; } html[data-theme="dark"] :is(.nav-book, .nav-mobile-cta) { --sand: #f5efe3; } html[data-theme="dark"] .nav-mobile.is-open { box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5); } /* The tools (globe + theme) read paper on ink; the menu is an ink panel. */ html[data-theme="dark"] .nav-tool { color: rgba(245, 239, 227, 0.85); } html[data-theme="dark"] .nav-tool:hover, html[data-theme="dark"] .nav-tool:focus-visible { color: #ffffff; } html[data-theme="dark"] .nav-lang-menu { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6); } /* The Instagram mark ships as the black cut of the pinang-and-sun; on ink it swaps to the official white cut — a content swap in CSS, the files themselves untouched (the Tunel Crew nav does the same). */ html[data-theme="dark"] .nav-ig-mark { content: url('../img/logo/official/white-pinang-and-sun.svg'); } /* ========================================================================== Site-wide (owner direction, 4 Sep 2026): the theme now follows the visitor's system on every page, so the few components that paint literal light colours get their ink counterparts here. ========================================================================== */ /* Form fields: the near-white focus and error tints become ink tints. */ html[data-theme="dark"] .enquiry-form input:focus, html[data-theme="dark"] .enquiry-form select:focus, html[data-theme="dark"] .enquiry-form textarea:focus, html[data-theme="dark"] .enquiry-units-ctl:focus-within { background: #1c1c1c; } html[data-theme="dark"] .enquiry-form input.is-invalid, html[data-theme="dark"] .enquiry-form select.is-invalid, html[data-theme="dark"] .enquiry-form textarea.is-invalid, html[data-theme="dark"] .enquiry-row.is-invalid input, html[data-theme="dark"] .enquiry-row.is-invalid select, html[data-theme="dark"] .enquiry-row.is-invalid textarea, html[data-theme="dark"] .enquiry-units-wrap.is-invalid .enquiry-units-ctl { background: #241a14; } /* The select chevron is a navy stroke baked into a data URI: a paper one on ink. */ html[data-theme="dark"] .enquiry-form select { background-image: url("data:image/svg+xml;utf8,"); } /* Carousel arrows: paper discs on ink. */ html[data-theme="dark"] .carousel-arrow { background: rgba(38, 38, 38, 0.92); color: #e8e6e6; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); } /* Shadows cast in navy become plain shadow. */ html[data-theme="dark"] .nav-mobile.is-open { box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .flatpickr-calendar { box-shadow: 0 14px 48px rgba(0, 0, 0, 0.6) !important; }