/**
* Dark mode. Active when . Loaded last.
* Light surfaces become night blue; the colour bands, gradients and
* photographs stay as they are. Buttons keep their gold.
*/
html[data-tlm-mode="dark"] { color-scheme: dark; }
/* toggle: sun while light, moon while dark; the label names where it goes */
.tlm-mode-toggle .tlm-mode__moon,
.tlm-mode-toggle .tlm-mode__label--to-light,
html[data-tlm-mode="dark"] .tlm-mode-toggle .tlm-mode__sun,
html[data-tlm-mode="dark"] .tlm-mode-toggle .tlm-mode__label--to-dark { display: none !important; }
html[data-tlm-mode="dark"] .tlm-mode-toggle .tlm-mode__moon,
html[data-tlm-mode="dark"] .tlm-mode-toggle .tlm-mode__label--to-light { display: inline !important; }
html[data-tlm-mode="dark"] .ct-header:not(#offcanvas) .tlm-mode-toggle .tlm-mode__label--to-light { display: none !important; }
.tlm-mode-toggle .tlm-mode__sun,
.tlm-mode-toggle .tlm-mode__moon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* header: icon only (the drawer also carries .ct-header, so it is excluded) */
.ct-header:not(#offcanvas) .tlm-mode-toggle .tlm-mode__label { display: none !important; }
/* ------------------------------------------------------------------
* Tokens: every surface that reads as "paper" turns night blue
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] {
--tlm-surface: #1B2440;
--tlm-paper: #161D33;
--vb-cream: #131A2E;
--tlm-page: #131A2E;
--tlm-page-soft: #1A2238;
--tlm-text: #ECE8F4;
--tlm-text-muted: #A9A8C0;
--tlm-gold-ink: #F1C95F;
--tlm-border: 1px solid rgb(255 255 255 / 16%);
--theme-palette-color-3: #ECE8F4 !important;
--theme-text-color: #ECE8F4;
--theme-headings-color: #FFFFFF;
--theme-link-initial-color: #F1C95F;
--theme-link-hover-color: #FFC94D;
}
html[data-tlm-mode="dark"] body { background-color: #131A2E !important; color: #ECE8F4; }
/* page-level light backgrounds that used the (text-colour) cream token */
html[data-tlm-mode="dark"] :is(
.tlm-gallery-content, .tlm-shop-cat-nav, .tlm-v3-manifesto, .tlm-v3-filmstrip, .tlm-search-page
) { background: var(--tlm-page); }
html[data-tlm-mode="dark"] :is(
.tlm-teaser, .hero-section, .tlm-showcase-media-frame, .tlm-chapter--offset .tlm-chapter__media::before,
.tlm-search-page__result-thumb, .woocommerce-page table.shop_table th, .woocommerce-cart .cart-collaterals .cart_totals
) { background: var(--tlm-page-soft); }
html[data-tlm-mode="dark"] .tlsh-hero::after,
html[data-tlm-mode="dark"] .tlg-hero::after { background: var(--tlm-page); }
html[data-tlm-mode="dark"] .tls-hosts,
html[data-tlm-mode="dark"] .tlc-map { background: var(--tlm-page); }
/* ridges that point at the paper colour */
html[data-tlm-mode="dark"] [style*="--vb-edge:var(--tlm-cream)"],
html[data-tlm-mode="dark"] [style*="--vb-edge:var(--vb-cream)"] { --vb-edge: #131A2E !important; }
html[data-tlm-mode="dark"] [style*="--vb-edge:#fff"] { --vb-edge: #131A2E !important; }
/* ------------------------------------------------------------------
* The toggle: a round chip with just the icon in the header,
* icon + words in the mobile drawer
* ------------------------------------------------------------------ */
.ct-header:not(#offcanvas) .menu-item.tlm-mode-toggle > .ct-menu-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-inline-start: 0.5rem;
padding: 0 !important;
border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
border-radius: 50%;
background: color-mix(in srgb, currentColor 8%, transparent);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ct-header:not(#offcanvas) .menu-item.tlm-mode-toggle > .ct-menu-link::after { display: none !important; }
.ct-header:not(#offcanvas) .menu-item.tlm-mode-toggle > .ct-menu-link:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.ct-header .menu-item.tlm-mode-toggle > .ct-menu-link:focus-visible { outline: 3px solid var(--vb-sun); outline-offset: 3px; }
body #offcanvas .ct-panel-content li.tlm-mode-toggle > a.ct-menu-link {
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin-top: 0.75rem;
padding: 0.6rem 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
width: auto;
height: auto;
min-height: 44px;
text-transform: none;
font-size: 1rem;
font-weight: 700;
}
body #offcanvas li.tlm-mode-toggle .tlm-mode__sun,
body #offcanvas li.tlm-mode-toggle .tlm-mode__moon { flex: none; }
/* ------------------------------------------------------------------
* Header and drawer
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] .ct-header.tlm-v3-header--solid,
html[data-tlm-mode="dark"] body:not(:has([data-tlm-theme="hero"])) .ct-header,
html[data-tlm-mode="dark"] .ct-header.tlm-v3-header--solid [data-row*="middle"],
html[data-tlm-mode="dark"] body:not(:has([data-tlm-theme="hero"])) .ct-header [data-row*="middle"] {
background-color: rgba(14, 20, 36, 0.94) !important;
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-tlm-mode="dark"] .ct-header.tlm-v3-header--solid img.default-logo,
html[data-tlm-mode="dark"] body:not(:has([data-tlm-theme="hero"])) .ct-header img.default-logo { opacity: 0; }
html[data-tlm-mode="dark"] .ct-header.tlm-v3-header--solid img.tlm-v3-header-logo-light,
html[data-tlm-mode="dark"] body:not(:has([data-tlm-theme="hero"])) .ct-header img.tlm-v3-header-logo-light { opacity: 1; }
html[data-tlm-mode="dark"] .ct-header nav .menu-item:not(.tlm-drawer-cta) > .ct-menu-link,
html[data-tlm-mode="dark"] .ct-header.tlm-v3-header--solid .ct-header-trigger,
html[data-tlm-mode="dark"] body:not(:has([data-tlm-theme="hero"])) .ct-header .ct-header-trigger { color: #ECE8F4 !important; }
html[data-tlm-mode="dark"] .ct-header nav .menu-item.current-menu-item:not(.tlm-lang-switch):not(.tlm-drawer-cta) > .ct-menu-link { color: var(--vb-sun) !important; }
html[data-tlm-mode="dark"] .ct-header.tlm-v3-header--solid .menu-item.tlm-lang-switch > .ct-menu-link,
html[data-tlm-mode="dark"] body:not(:has([data-tlm-theme="hero"])) .ct-header .menu-item.tlm-lang-switch > .ct-menu-link {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
html[data-tlm-mode="dark"] .ct-header .tlm-lang__opt { color: #ECE8F4; }
/* ------------------------------------------------------------------
* Headings and text that were dark navy / brown on paper
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] :is(
.vb-intro h2, .vb-intro h3, .tlm-steps-summary__lead, .tlm-step-card__title,
.tlm-plan-visit__title, .tlm-plan-visit summary, .tlm-shop-behind h2, .tlm-xp-overview h3,
.tlm-tour-reviews__head h2, .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link, .woocommerce ul.products li.product .price,
.tlm-shop-behind li, .tlm-shop-values li, .tls-intro__text
) { color: #FFFFFF; }
html[data-tlm-mode="dark"] :is(.vb-intro p:not(.vb-kicker), .tlm-plan-visit p, .tlm-plan-visit li, .tlm-shop-behind p) { color: #D9D4E6; }
html[data-tlm-mode="dark"] :is(.tlm-steps-summary__head h2, .tlm-steps-summary__head p, .tlm-shop-behind__grid li, .tlm-shop-behind li, .tlm-legal-toc__title, .tlm-legal-toc a) { color: #FFFFFF; }
html[data-tlm-mode="dark"] .tlm-step-card__num { color: var(--vb-aqua); }
html[data-tlm-mode="dark"] .tlm-plan-visit details { border-color: rgba(255, 255, 255, 0.2); }
/* footer address line */
html[data-tlm-mode="dark"] .tlm-footer strong { color: #fff; }
/* ------------------------------------------------------------------
* Our Story
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] .tls-mission { background: linear-gradient(170deg, #3A1F4F 0%, var(--vb-plum) 100%); color: #fff; }
html[data-tlm-mode="dark"] .tls-mission__head h2,
html[data-tlm-mode="dark"] .tls-values__row h3 { color: #fff; }
html[data-tlm-mode="dark"] .tls-mission__head p,
html[data-tlm-mode="dark"] .tls-values__row p { color: rgba(255, 255, 255, 0.92); }
html[data-tlm-mode="dark"] .tls-values__row { border-color: rgba(255, 255, 255, 0.3); }
html[data-tlm-mode="dark"] .tls-values__row h3::before { background: var(--vb-sun); }
html[data-tlm-mode="dark"] .tls-hosts__head h2 { color: #fff; }
html[data-tlm-mode="dark"] .tls-hosts__hello { color: var(--vb-coral); }
html[data-tlm-mode="dark"] .tls-hosts__text p { color: #D9D4E6; }
html[data-tlm-mode="dark"] .tls-hosts__text .tls-hosts__lead { color: #fff; }
html[data-tlm-mode="dark"] .tls-hosts__text .tls-hosts__beat { color: var(--vb-sun); border-color: var(--vb-coral); }
html[data-tlm-mode="dark"] .tls-hosts__text .tls-hosts__close { color: var(--vb-aqua); }
html[data-tlm-mode="dark"] .tls-photo { background: #1B2440; }
html[data-tlm-mode="dark"] .tls-photo figcaption { color: #ECE8F4; }
/* ------------------------------------------------------------------
* Contact
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] .tlc-hero { color: #ECE8F4; }
html[data-tlm-mode="dark"] .tlc-hero h1 { color: #fff; }
html[data-tlm-mode="dark"] .tlc-hero__lede,
html[data-tlm-mode="dark"] .tlc-hero__facts dt,
html[data-tlm-mode="dark"] .tlc-hero__facts dd { color: #ECE8F4; }
html[data-tlm-mode="dark"] .tlc-hero a.vb-btn--light { color: #fff; border-color: rgba(255, 255, 255, 0.8); }
html[data-tlm-mode="dark"] .tlc-hero a.vb-btn--light:hover { background: #fff; color: var(--vb-night); }
html[data-tlm-mode="dark"] .tlc-sheet { background: #1B2440; color: #ECE8F4; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7); }
html[data-tlm-mode="dark"] .tlc-field label { color: #fff; }
html[data-tlm-mode="dark"] .tlc-opt { color: #A9A8C0; }
html[data-tlm-mode="dark"] .tlc-req { color: var(--vb-sun); }
html[data-tlm-mode="dark"] .tlc .tlc-field input,
html[data-tlm-mode="dark"] .tlc .tlc-field textarea { background: #0E1424; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
html[data-tlm-mode="dark"] .tlc .tlc-field input::placeholder,
html[data-tlm-mode="dark"] .tlc .tlc-field textarea::placeholder { color: #8C8BA6; }
html[data-tlm-mode="dark"] .tlc-submit { background: var(--vb-gold); color: var(--vb-ink); }
html[data-tlm-mode="dark"] .tlc-submit:hover { background: #F0BB1F; }
html[data-tlm-mode="dark"] .tlc-map__intro h2 { color: #fff; }
html[data-tlm-mode="dark"] .tlc-map__intro p { color: #D9D4E6; }
html[data-tlm-mode="dark"] .tlc-map__frame { background: #1B2440; }
html[data-tlm-mode="dark"] .tlc .vb a.vb-btn--dark,
html[data-tlm-mode="dark"] .tlc a.vb-btn--dark { background: var(--vb-gold); color: var(--vb-ink); }
/* ------------------------------------------------------------------
* Shop category tabs, legal sheets
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] .tlm-shop-cat-nav__link { background: #1B2440; color: #ECE8F4; border-color: rgba(255, 255, 255, 0.2); }
html[data-tlm-mode="dark"] .tlm-legal-toc,
html[data-tlm-mode="dark"] .tlm-legal-content__body { background: #1B2440; color: #ECE8F4; }
html[data-tlm-mode="dark"] .tlm-legal-content__body :is(h1, h2, h3, h4, strong) { color: #fff; }
html[data-tlm-mode="dark"] .tlm-legal-content__body :is(p, li) { color: #D9D4E6; }
html[data-tlm-mode="dark"] body .tlm-shop-cat-nav__link:not(.is-active),
html[data-tlm-mode="dark"] body .tlm-gallery-filters__btn:not(.is-active) {
background: #1B2440 !important;
color: #ECE8F4 !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
html[data-tlm-mode="dark"] :is(.tlm-steps-summary p, .tlm-steps-summary__head p) { color: #D9D4E6; }
html[data-tlm-mode="dark"] .tlm-legal-content__body a { color: var(--vb-sun); }
/* kickers are gold pills with dark text in both modes */
html[data-tlm-mode="dark"] .vb-kicker { color: var(--vb-ink) !important; }
body #offcanvas nav li.tlm-mode-toggle > .ct-menu-link::before,
body #offcanvas nav li.tlm-mode-toggle > .ct-menu-link::after { display: none !important; }
/* ------------------------------------------------------------------
* Every form control and label (sorting, search, account, forms)
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] :is(
select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"])
) {
background-color: #0E1424 !important;
border-color: rgba(255, 255, 255, 0.28) !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF;
}
html[data-tlm-mode="dark"] :is(select, textarea, input)::placeholder { color: #8C8BA6; opacity: 1; -webkit-text-fill-color: #8C8BA6; }
html[data-tlm-mode="dark"] select option { background: #1B2440; color: #FFFFFF; }
/* the arrow on selects is a dark SVG; swap it for a light one */
html[data-tlm-mode="dark"] select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23ECE8F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 0.9rem center !important;
background-size: 14px 9px !important;
}
html[data-tlm-mode="dark"] :is(.woocommerce, .woocommerce-page, .tlm-search-page) :is(label, legend, .woocommerce-form__label, .required) { color: #ECE8F4; }
html[data-tlm-mode="dark"] .woocommerce :is(h1, h2, h3, h4, th, dt, .woocommerce-Price-amount) { color: #FFFFFF; }
html[data-tlm-mode="dark"] .woocommerce :is(p, li, td, dd, address) { color: #D9D4E6; }
html[data-tlm-mode="dark"] .woocommerce button.show-password-input { background: transparent !important; color: #ECE8F4 !important; }
html[data-tlm-mode="dark"] .woocommerce :is(table, td, th) { border-color: rgba(255, 255, 255, 0.2); }
html[data-tlm-mode="dark"] :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) { background: #1B2440; color: #ECE8F4; }
html[data-tlm-mode="dark"] .woocommerce-breadcrumb,
html[data-tlm-mode="dark"] .woocommerce-breadcrumb a { color: #D9D4E6; }
html[data-tlm-mode="dark"] .tlm-search-page :is(h1, h2, h3, .tlm-search-page__title, .tlm-search-page__result-title, .amount, a.page-numbers, .page-numbers) { color: #FFFFFF; }
html[data-tlm-mode="dark"] .tlm-search-page .page-numbers.current { background: var(--vb-gold); color: var(--vb-ink); }
html[data-tlm-mode="dark"] .tlm-search-page p { color: #D9D4E6; }
/* ------------------------------------------------------------------
* Single product: the packshot blends (multiply) with its backdrop, so on
* the dark page it sits on a pastel stage, like the shop cards
* ------------------------------------------------------------------ */
html[data-tlm-mode="dark"] body.single-product .woocommerce-product-gallery .flexy-item,
html[data-tlm-mode="dark"] body.single-product .woocommerce-product-gallery .ct-media-container {
background: var(--vb-stage-1) !important;
border-radius: 24px;
}
html[data-tlm-mode="dark"] body.single-product .flexy-pills li { background: var(--vb-stage-1); border-radius: 12px; }
html[data-tlm-mode="dark"] body.single-product :is(h1.product_title, .entry-title) { color: #FFFFFF; }
html[data-tlm-mode="dark"] body.single-product :is(.price, .price .amount, p.price, .woocommerce-Price-amount) { color: var(--vb-sun); }
html[data-tlm-mode="dark"] body.single-product :is(.product_meta, .product_meta a, .posted_in, .posted_in a, .tagged_as a) { color: #D9D4E6; }
html[data-tlm-mode="dark"] body.single-product .posted_in a { color: var(--vb-sun); }
html[data-tlm-mode="dark"] body.single-product :is(.woocommerce-product-details__short-description, .entry-summary p) { color: #ECE8F4; }
html[data-tlm-mode="dark"] body.single-product .related :is(h2, .woocommerce-loop-product__title) { color: #FFFFFF; }
/* gradient-filled headings get a light gradient on the dark page */
html[data-tlm-mode="dark"] body.single-product .summary .product_title,
html[data-tlm-mode="dark"] .tlm-story-mosaic__heading-row h2 {
background: linear-gradient(160deg, #FFFFFF 0%, #FFD9E8 55%, #FFC94D 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* the ridge is painted in the colour of the section that carries it */
html[data-tlm-mode="dark"] .tls-mission { --vb-edge: #3A1F4F !important; }