/* ============================================================================= TOURBIRTH — LIGHT THEME css/theme.css · linked site-wide AFTER styles.css + page styles. The site is dark-first (cinematic obsidian). This file defines an opt-in warm-ivory LIGHT theme, activated by `.theme-light` on (set by theme-init.js / theme.js). The cinematic media heroes deliberately stay dark in BOTH themes — light text over film reads best on a dark veil. Strategy: the body is already light by default; the "dark" feel comes from a bounded set of surfaces (dark sections, nav, footer, banner). We flip those. ============================================================================= */ html.theme-light { /* Warm ivory ground palette — the inverse of the obsidian system. */ --tl-ground: #F6F3EC; /* was --obsidian */ --tl-ground-2: #ECE6DA; /* was --deep-neutral */ --tl-raise: #FFFFFF; /* brightest beat (former light sections) */ --tl-ink: #23303A; /* primary text */ --tl-ink-soft: rgba(35, 48, 58, 0.74); --tl-ink-faint: rgba(35, 48, 58, 0.55); --tl-hairline: rgba(139, 115, 64, 0.22); color-scheme: light; } /* ── Base canvas ──────────────────────────────────────────────────────────── */ html.theme-light body { background: var(--tl-ground); color: var(--tl-ink); } /* ── Section surfaces: dark beats become warm ivory; light beats brighten ──── */ html.theme-light .section--dark, html.theme-light .section--gradient-dark { background: var(--tl-ground); color: var(--tl-ink); } html.theme-light .section--deep { background: var(--tl-ground-2); color: var(--tl-ink); } html.theme-light .section--light { background: var(--tl-raise); color: var(--tl-ink); } /* Some dark sections use the alt token directly. NOTE: do NOT include the tb12 .legacy-box wrapper here — it is a transparent flex container around the dark Legacy Box object; tinting it paints an unwanted band behind the box. */ html.theme-light [class*="--alt"] { background-color: var(--tl-ground-2); } /* Body copy + secondary text on the (now light) dark sections */ html.theme-light .section--dark, html.theme-light .section--deep, html.theme-light .section--gradient-dark, html.theme-light .section--dark h1, html.theme-light .section--dark h2, html.theme-light .section--dark h3, html.theme-light .section--deep h1, html.theme-light .section--deep h2, html.theme-light .section--deep h3 { color: var(--tl-ink); } html.theme-light .section--dark p, html.theme-light .section--deep p, html.theme-light .section--gradient-dark p { color: var(--tl-ink-soft); } html.theme-light .section--dark .credential, html.theme-light .section--deep .credential, html.theme-light .section--dark .caption, html.theme-light .section--deep .caption { color: var(--tl-ink-faint); } /* Eyebrows: deeper gold keeps AA contrast on the ivory ground */ html.theme-light .section--dark .section-eyebrow, html.theme-light .section--deep .section-eyebrow, html.theme-light .section--dark .eyebrow, html.theme-light .section--deep .eyebrow { color: var(--gold-deep); } /* Pull-quotes / accent headings inherit ink; keep the gold accent-line gold */ /* NOTE: the fixed-image bands (.home-fixed-band — currently House + Testaments) keep their text light in BOTH themes via home.css. Manifesto, Tourbirth 12 and By Invitation are now SOLID themed sections, so they must NOT be forced light — they flip with the theme like any other .section--dark/--deep. */ /* Interior page heroes are flat-obsidian panels (home uses a photo, tb12 a video — those stay cinematically dark). Flip the flat ones to ivory + ink so the hero reflects the theme too. !important beats the inline obsidian on .hero__media. */ html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__media { background-color: var(--tl-ground) !important; } html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__overlay { background: transparent; } html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__content h1, html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__content .lead { color: var(--tl-ink); } html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__content p { color: var(--tl-ink-soft); } html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__content .eyebrow { color: var(--gold-deep); } html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .hero__content .credential { color: var(--tl-ink-faint); } html.theme-light .hero:not(.hero--home):not(.hero--tb12):not(.hero--cinematic) .btn-outline { color: var(--obsidian); border-color: var(--gold-deep); } /* ── Navigation: force the existing light "inverted" look in light theme ───── */ html.theme-light .site-nav, html.theme-light .site-nav.scrolled, html.theme-light .site-nav.nav--scrolled { background-color: rgba(246, 243, 236, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--tl-hairline); } html.theme-light .site-nav .nav__logo-text, html.theme-light .site-nav .nav__logo-name, html.theme-light .site-nav .nav__link, html.theme-light .site-nav .nav__dropdown-trigger { color: var(--obsidian); } html.theme-light .site-nav .nav__link:hover, html.theme-light .site-nav .nav__link:focus-visible, html.theme-light .site-nav .nav__link[aria-current="page"], html.theme-light .site-nav .nav__link.active { color: var(--gold-deep); } html.theme-light .hamburger__line { background-color: var(--obsidian); } /* Dropdown panel on light ground */ html.theme-light .nav__dropdown { background-color: rgba(255, 255, 255, 0.98); border: 1px solid var(--tl-hairline); } html.theme-light .nav__dropdown-link { color: var(--obsidian); } html.theme-light .nav__dropdown-link:hover { color: var(--gold-deep); } /* Primary CTA — outline reads on the light bar */ html.theme-light .nav__cta { color: var(--obsidian); border-color: var(--gold-deep); } html.theme-light .nav__cta:hover { background-color: var(--gold-deep); color: var(--tl-raise); } /* Mobile menu overlay (uses an #id in the base CSS, so match its specificity) */ html.theme-light #mobile-nav-menu { background-color: var(--tl-ground); } html.theme-light #mobile-nav-menu .nav__mobile-link { color: var(--obsidian); } html.theme-light #mobile-nav-menu .nav__mobile-link[aria-current="page"], html.theme-light #mobile-nav-menu .nav__mobile-link:hover { color: var(--gold-deep); } /* ── Full-screen overlays (page-transition curtain + first-visit loader) ──── These are obsidian in the base design; in light theme they must be ivory so navigation / first paint doesn't flash dark on a light page. */ html.theme-light #page-transition-overlay, html.theme-light .loading-screen { background-color: var(--tl-ground); } html.theme-light .loading-screen__letter { color: var(--obsidian); } /* ── Waitlist banner ──────────────────────────────────────────────────────── */ html.theme-light .banner { background: var(--tl-ground-2); border-bottom: 1px solid var(--tl-hairline); } html.theme-light .banner__text { color: var(--gold-deep); } html.theme-light .banner__link { color: var(--gold-deep); } html.theme-light .banner__dismiss { color: var(--tl-ink-soft); } /* ── Footer ───────────────────────────────────────────────────────────────── */ html.theme-light .footer { background: var(--tl-ground-2); color: var(--tl-ink); } html.theme-light .footer__logo-text, html.theme-light .footer__list-heading { color: var(--obsidian); } html.theme-light .footer__quote { color: var(--tl-ink-soft); } html.theme-light .footer__contact a, html.theme-light .footer__nav-link, html.theme-light .footer__legal-link, html.theme-light .footer__copy, html.theme-light .footer__location, html.theme-light .footer__list-desc { color: var(--tl-ink-soft); } html.theme-light .footer__contact a:hover, html.theme-light .footer__nav-link:hover, html.theme-light .footer__legal-link:hover { color: var(--gold-deep); } html.theme-light .footer__social-link { color: var(--tl-ink-soft); } html.theme-light .footer__social-link:hover { color: var(--gold-deep); } /* Private-list form on light ground */ html.theme-light .footer__form input { background: rgba(35, 48, 58, 0.04); border-color: rgba(35, 48, 58, 0.22); color: var(--charcoal); } html.theme-light .footer__form input::placeholder { color: var(--tl-ink-faint); } /* Footer: the Privacy Policy link must match the copyright/location label styling. (footer.css is bundled into styles.css, so this lives here where it actually loads.) Applies in both themes. */ /* Footer: EVERY text element — ONE font, ONE size, ONE style, ONE colour. */ .footer, .footer * { font-family: var(--font-body) !important; font-size: var(--fs-small) !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0.04em !important; text-transform: none !important; } html:not(.theme-light) .footer, html:not(.theme-light) .footer * { color: rgba(245, 243, 238, 0.62) !important; } html.theme-light .footer, html.theme-light .footer * { color: var(--tl-ink-soft) !important; } .footer a:hover { color: var(--gold) !important; } html.theme-light .footer a:hover { color: var(--gold-deep) !important; } /* …EXCEPT the wordmark — TB monogram, League Spartan, like the nav logo. */ .footer .footer__logo-text { font-family: var(--font-logo) !important; font-size: 1.55rem !important; font-weight: 700 !important; letter-spacing: var(--ls-nav) !important; text-transform: uppercase !important; } html:not(.theme-light) .footer .footer__logo-text { color: var(--offwhite) !important; } html.theme-light .footer .footer__logo-text { color: var(--obsidian) !important; } /* …and the two CTAs are gold-outline buttons that fill on hover — "Request Invitation" now matches the newsletter's "Join Quietly". */ .footer .footer__nav-link--cta, .footer .footer__form-btn { position: relative; display: inline-block !important; overflow: hidden; isolation: isolate; padding: 0.7rem 1.7rem !important; border: 1px solid var(--gold) !important; border-radius: 0 !important; letter-spacing: var(--ls-label, 0.2em) !important; background-color: transparent !important; transition: color 350ms ease, border-color 350ms ease !important; } html:not(.theme-light) .footer .footer__nav-link--cta, html:not(.theme-light) .footer .footer__form-btn { color: var(--gold) !important; } html.theme-light .footer .footer__nav-link--cta, html.theme-light .footer .footer__form-btn { color: var(--gold-deep) !important; border-color: var(--gold-deep) !important; } .footer .footer__nav-link--cta::before, .footer .footer__form-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 350ms var(--ease-cinematic, ease); } .footer .footer__nav-link--cta:hover::before, .footer .footer__form-btn:hover::before { transform: scaleX(1); } .footer .footer__nav-link--cta:hover, .footer .footer__form-btn:hover { color: var(--obsidian) !important; border-color: var(--gold) !important; } /* ── Tourbirth 12 carousel: it already lives on light panels; just ensure the labels/counter read on ivory (they use gold/charcoal already — safe). ────── */ html.theme-light .tb12-carousel__counter { color: var(--tl-ink-faint); } /* ═══════════════════════════════════════════════════════════════════════════ THE LUXURY TOGGLE — base styles (both themes) A thin gold ring; a sun (dark theme → click for light) crossfades to a moon (light theme → click for dark). Quiet, bespoke, never loud. ═══════════════════════════════════════════════════════════════════════════ */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin-left: var(--space-sm, 1rem); padding: 0; border: 1px solid rgba(198, 169, 107, 0.5); border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer; transition: background-color var(--transition-medium, 500ms ease), border-color var(--transition-medium, 500ms ease), color var(--transition-medium, 500ms ease); } .theme-toggle:hover { background-color: rgba(198, 169, 107, 0.12); border-color: var(--gold); } .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .theme-toggle__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), transform 450ms cubic-bezier(0.23, 1, 0.32, 1); } .theme-toggle__icon svg { width: 18px; height: 18px; display: block; } /* Dark theme (default): show the sun */ .theme-toggle__icon--moon { opacity: 0; transform: rotate(-40deg) scale(0.6); } .theme-toggle__icon--sun { opacity: 1; transform: none; } /* Light theme: show the moon */ html.theme-light .theme-toggle__icon--sun { opacity: 0; transform: rotate(40deg) scale(0.6); } html.theme-light .theme-toggle__icon--moon { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle__icon { transition: none; } } /* ── The luxury toggle itself — gold deepens on the light bar ──────────────── */ html.theme-light .theme-toggle { color: var(--gold-deep); border-color: rgba(139, 115, 64, 0.5); } html.theme-light .theme-toggle:hover { background-color: rgba(139, 115, 64, 0.12); border-color: var(--gold-deep); } /* ── Floating, draggable variant — fixed mid-right, faint until engaged ────── */ .theme-toggle--floating { position: fixed; top: 50%; right: 1.25rem; transform: translateY(-50%); z-index: 8600; width: 50px; height: 50px; margin: 0; opacity: 0.82; /* clearly visible, not loud */ scale: 1; color: var(--gold); /* the sun/moon icon */ background-color: rgba(11, 29, 42, 0.52); /* dark chip so the gold icon reads */ border-color: rgba(198, 169, 107, 0.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px -8px rgba(11, 29, 42, 0.55); cursor: grab; touch-action: none; /* let JS own the drag gesture */ transition: opacity 300ms ease, scale 280ms var(--ease-cinematic, ease), background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } .theme-toggle--floating:hover, .theme-toggle--floating:focus-visible, .theme-toggle--floating:active, .theme-toggle--floating.is-dragging { opacity: 1; scale: 1.1; background-color: rgba(11, 29, 42, 0.72); border-color: var(--gold); box-shadow: 0 10px 30px -6px rgba(198, 169, 107, 0.45); } .theme-toggle--floating.is-dragging { cursor: grabbing; scale: 1.12; } .theme-toggle--floating .theme-toggle__icon svg { width: 20px; height: 20px; } html.theme-light .theme-toggle--floating { color: var(--gold); border-color: rgba(198, 169, 107, 0.75); } @media (prefers-reduced-motion: reduce) { .theme-toggle--floating { transition: opacity 200ms ease; } } /* ── Back-to-top — floating, bottom-right, bespoke ────────────────────────── */ .to-top { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 8600; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(198, 169, 107, 0.75); border-radius: 50%; color: var(--gold); background-color: rgba(11, 29, 42, 0.52); /* dark chip so the gold arrow reads */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px -8px rgba(11, 29, 42, 0.55); cursor: pointer; opacity: 0; /* hidden until scrolled */ transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity 360ms ease, transform 420ms var(--ease-cinematic, ease), background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } .to-top.is-visible { opacity: 0.9; transform: translateY(0) scale(1); pointer-events: auto; } /* Rotating gold filament — the bespoke, interactive flourish */ .to-top__ring { position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(198, 169, 107, 0) 200deg, rgba(198, 169, 107, 0.85) 320deg, transparent 360deg); opacity: 0; transition: opacity 400ms ease; -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); pointer-events: none; } .to-top__arrow { position: relative; z-index: 1; width: 22px; height: 22px; transition: transform 360ms var(--ease-cinematic, ease); } .to-top:hover, .to-top:focus-visible { opacity: 1; background-color: rgba(11, 29, 42, 0.72); border-color: var(--gold); box-shadow: 0 12px 32px -6px rgba(198, 169, 107, 0.5); } .to-top:hover .to-top__arrow, .to-top:focus-visible .to-top__arrow { transform: translateY(-3px); } .to-top:hover .to-top__ring, .to-top:focus-visible .to-top__ring { opacity: 1; animation: toTopSpin 2.4s linear infinite; } .to-top:active { transform: translateY(0) scale(0.94); } .to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @keyframes toTopSpin { to { transform: rotate(360deg); } } html.theme-light .to-top { color: var(--gold); border-color: rgba(198, 169, 107, 0.75); } @media (max-width: 640px) { .to-top { width: 46px; height: 46px; right: 1rem; bottom: 1rem; } .to-top__arrow { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity 200ms ease; } .to-top:hover .to-top__ring, .to-top:focus-visible .to-top__ring { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT & PAGE COVERAGE Flip every remaining hardcoded dark surface / light-ink declaration so no section is left un-themed. Intentionally-dark objects (video heroes, the Legacy Box graphic, duotone photography) are deliberately excluded. ═══════════════════════════════════════════════════════════════════════════ */ /* — Headlines that hardcode light ink but sit on now-light section heroes (404, thank-you, interior section heroes — NOT the video heroes). — */ html.theme-light .headline-hero, html.theme-light .headline-display { color: var(--tl-ink); } /* …but a fixed-image band's copy must stay LIGHT in light theme too — it sits on a dark-veiled photo (this beats .headline-display above). Covers House + Testaments (the only .home-fixed-band sections). */ html.theme-light .home-fixed-band h2, html.theme-light .home-fixed-band h3, html.theme-light .home-fixed-band .headline-display, html.theme-light .home-fixed-band .headline-hero, html.theme-light .home-fixed-band .blueprint-stage__numeral, html.theme-light .home-fixed-band .thank-you__heading, html.theme-light .home-fixed-band .pull-quote, html.theme-light .home-fixed-band .accent-line, html.theme-light .home-fixed-band blockquote, html.theme-light .home-fixed-band blockquote p, html.theme-light .home-fixed-band .lead { color: var(--offwhite); } html.theme-light .home-fixed-band p, html.theme-light .home-fixed-band .thank-you__body { color: rgba(245, 243, 238, 0.88); } html.theme-light .home-fixed-band .credential, html.theme-light .home-fixed-band .caption, html.theme-light .home-fixed-band figcaption { color: rgba(245, 243, 238, 0.6); } /* — Form fields across all pages: dark ink on the light ground — */ html.theme-light input, html.theme-light textarea, html.theme-light select { color: var(--charcoal); } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: var(--tl-ink-faint); } /* — Accent cards: dark cards become light surfaces with ink text + gold detail — */ html.theme-light .pathway-card, html.theme-light .film-card__frame { background: var(--tl-raise); border: 1px solid var(--tl-hairline); box-shadow: 0 18px 40px -28px rgba(35, 48, 58, 0.30); } html.theme-light .pathway-card__title, html.theme-light .film-card__title, html.theme-light .testament-card__mark { color: var(--tl-ink); } html.theme-light .pathway-card__desc { color: var(--tl-ink-soft); } html.theme-light .film-card__embed { background: var(--tl-ground-2); } /* Founder image placeholder block (sits behind the photo, if one loads) */ html.theme-light .founder-image { background: var(--tl-ground-2); } /* — House of Connection — */ html.theme-light .section-who-serve { background: var(--tl-ground); } html.theme-light .section-who-serve li, html.theme-light .belief-statement, html.theme-light .founder-intro-text { color: var(--tl-ink); } html.theme-light .pillar-description, html.theme-light .founder-pull-quote p { color: var(--tl-ink-soft); } /* — Discovery Blueprint — */ html.theme-light .blueprint-vision__quote { color: var(--tl-ink); } /* — Thank-you / 404 — heading sits on a .section--dark that now flips light — */ html.theme-light .thank-you__heading { color: var(--tl-ink); } /* NOTE — intentionally NOT overridden (stay dark in BOTH themes): .hero / .hero__content (light copy over film), .hero__video, .hero__overlay, .legacy-box__base / __lid / __item (the dark Legacy Box object), .tb12-duotone & .home-*__bg img (duotone photography), .btn-submit (dark CTA reads well on ivory). */ /* ═══════════════════════════════════════════════════════════════════════════ DARK THEME — neutralize the original design's LIGHT beats The site was authored with alternating dark/light editorial sections. In the (default) dark theme the owner wants NO white blocks, so the light surfaces are converted to dark tones here. `--charcoal` is single-role (only ever dark text on a light surface — never a background), so remapping it to ivory flips every dark-on-light text declaration site-wide in one move. These rules are scoped to html:NOT(.theme-light) so they vanish the instant light is chosen. ═══════════════════════════════════════════════════════════════════════════ */ html:not(.theme-light) { --charcoal: var(--offwhite); /* was #2C2C2C — dark ink → warm ivory in dark theme */ } /* Base canvas (shows through overscroll / rubber-band) */ html:not(.theme-light) body { background: var(--obsidian); } /* Light section beats → deep-neutral so they alternate with the obsidian .section--dark beats instead of flashing white. */ html:not(.theme-light) .section--light, html:not(.theme-light) .section--white, html:not(.theme-light) .tb12-carousel__stage { background: var(--deep-neutral); } /* Distinct bands keep their own dark tone */ html:not(.theme-light) .tb12-lagos { background: var(--obsidian); } html:not(.theme-light) .testament-card { background: var(--deep-neutral); } /* Chapter rail uses obsidian ink (built for light sections); in the now-dark dark theme it would vanish — flip its text/dots to ivory. */ html:not(.theme-light) .tb12-rail__item { color: color-mix(in srgb, var(--offwhite) 58%, transparent); } html:not(.theme-light) .tb12-rail__item.is-active { color: var(--offwhite); } html:not(.theme-light) .tb12-rail__item:hover { color: var(--offwhite); } /* Forms were styled with dark ink for light sections; in the now-dark dark theme that ink sits on a dark surface and vanishes. Force light form text. (Safe: dark theme has no light surfaces left.) */ html:not(.theme-light) input, html:not(.theme-light) textarea, html:not(.theme-light) select, html:not(.theme-light) .form-field input:not([type="radio"]), html:not(.theme-light) .form-field textarea, html:not(.theme-light) .form-field select, html:not(.theme-light) .radio-label, html:not(.theme-light) .form-field label, html:not(.theme-light) .invitation-form-intro, html:not(.theme-light) .invitation-form-intro em { color: var(--offwhite); } html:not(.theme-light) input::placeholder, html:not(.theme-light) textarea::placeholder { color: rgba(245, 243, 238, 0.45); } /* Eyebrows: on the now-dark light-sections, restore the brighter gold (light sections normally deepen it for contrast on ivory). */ html:not(.theme-light) .section--light .section-eyebrow, html:not(.theme-light) .section--light .eyebrow, html:not(.theme-light) .tb12-lagos .section-eyebrow, html:not(.theme-light) .tb12-sessions__eyebrow, html:not(.theme-light) .tb12-slide__label, html:not(.theme-light) .tb12-premise__label, html:not(.theme-light) .home-day__time { color: var(--gold); }