/* ============================================================================= The Bridge — dark mode. ----------------------------------------------------------------------------- Chosen in the footer (Light · Dark · Auto) and remembered on the device; a visitor who never chooses gets the light site, and Auto follows the phone. The class is set in before anything paints (inc/header.php), so there is no flash of the wrong one. The palette is the brand's own teal taken down to night: deep Prussian teal for the page, a lifted teal for cards, Bondi blue brightened just enough to read on it. Loaded after platform.css so these win over the platform's generic (blue) dark palette. ========================================================================== */ html.dark body{ --navy:#0d2b2e; /* bands, footer, the photo headers' base */ --snow:#081a1c; --bg:#0a1d1f; /* the page */ --cream:#0c2124; --cream-2:#0f272a; /* alternating bands */ --paper:#12302f; /* cards and raised surfaces */ --card:#12302f; --ink:#eaf3f3; --ink-soft:#c3d5d5; --muted:#8fa9aa; --line:rgba(234,243,243,.11); --cyan:#5dbcc0; --cyan-deep:#86d2d5; --on-dark:#f1f7f7; --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.3); --shadow-md:0 12px 36px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35); --shadow-lg:0 28px 70px rgba(0,0,0,.6); background:var(--bg);color:var(--ink); } html.dark{color-scheme:dark;background:#0a1d1f;} /* Buttons: the solid one turns light-on-dark; accent keeps its colour. */ html.dark body .btn{--bg:var(--ink);--fg:#0b2224;} html.dark body .btn--light{--bg:var(--ink);--fg:#0b2224;} html.dark body .btn--accent{--bg:var(--cyan);--fg:#062326;} html.dark body .btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 34%,transparent);} html.dark body .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan);color:var(--cyan-deep);} html.dark body .btn--ondark.btn--ghost{--fg:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);} /* Text that was navy on a light surface is ink now; text that was paper on a navy band stays light. (Generated from site.css.) */ html.dark body .brand{color:var(--ink);} html.dark body .hero__quick dd{color:var(--ink);} html.dark body .filmstrip__nav{color:var(--ink);} html.dark body .vplayer__x{color:var(--ink);} html.dark body .vrow .when .d{color:var(--ink);} html.dark body .acc__q{color:var(--ink);} html.dark body .band--cream h2{color:var(--ink);} html.dark body .quote blockquote{color:var(--ink);} html.dark body .cal__nav{color:var(--ink);} html.dark body .cal__ev--rec{color:var(--ink);} html.dark body .eventcard__row b{color:var(--ink);} html.dark body .mobmenu__head .brand__name{color:var(--ink);} html.dark body .mobmenu .menu>li>a,html.dark body .mobmenu .menu>li>button{color:var(--ink);} html.dark body .apppush{color:var(--ink);} html.dark body .appdash__greet{color:var(--ink);} html.dark body .appweek .is-today b{color:var(--ink);} html.dark body .appfeature__play{color:var(--ink);} html.dark body .applist__row b{color:var(--ink);} html.dark body .banner__card h1{color:var(--ink);} html.dark body .calmodal__x{color:var(--ink);} html.dark body .calmodal__date{color:var(--ink);} html.dark body .calev h4{color:var(--ink);} html.dark body .mobmenu__member{color:var(--ink);} html.dark body .section.duo--cream{color:var(--ink);} html.dark body .section.irow--cream{color:var(--ink);} html.dark body .irow__ic{color:var(--ink);} html.dark body .acc__it summary{color:var(--ink);} html.dark body .sperson__facts dt{color:var(--ink);} html.dark body .lrow__b{color:var(--ink);} html.dark body .nspill__a{color:var(--ink);} html.dark body .vrow__date{color:var(--ink);} html.dark body .mcard__go{color:var(--ink);} html.dark body .gchip{color:var(--ink);} html.dark body .gcard h3{color:var(--ink);} html.dark body .gkind b{color:var(--ink);} html.dark body .banner{color:var(--on-dark);} html.dark body .banner h1{color:var(--on-dark);} html.dark body .vplayer__title{color:var(--on-dark);} html.dark body .band h2,html.dark body .band h3{color:var(--on-dark);} html.dark body .band .quote blockquote{color:var(--on-dark);} html.dark body .homecard--navy h2{color:var(--on-dark);} html.dark body .findtags a:hover{color:var(--on-dark);} html.dark body .invite--navy h2{color:var(--on-dark);} html.dark body .footer__brand .brand__name{color:var(--on-dark);} html.dark body .hero__panel{color:var(--on-dark);} html.dark body .banner__card h1{color:var(--on-dark);} html.dark body .polaroid{background:var(--card);} html.dark body .filmstrip__nav{background:var(--card);} html.dark body .appweek .is-today b{background:var(--card);} html.dark body .irow__ic{background:var(--card);} html.dark body:has(.theme-kids) .cards .card{background:var(--card);} html.dark body .mcard__go{background:var(--card);} /* was cream/snow text on a dark band */ html.dark body .img .tag{color:var(--on-dark);} html.dark body .hero__photo-tag{color:var(--on-dark);} html.dark body .band{color:var(--on-dark);} html.dark body .homecard--navy{color:var(--on-dark);} html.dark body .times__list .lab{color:var(--on-dark);} html.dark body .footer__brand .brand,html.dark body .footer__brand .brand__mark{color:var(--on-dark);} html.dark body .socials a{color:var(--on-dark);} html.dark body .announce{color:var(--on-dark);} html.dark body .visitcard__body{color:var(--on-dark);} /* hand fixes after a page-by-page look in dark */ html.dark body .banner__card h1{color:var(--on-dark)!important;} html.dark body .banner{background:#0a1d1f;} html.dark body .footer{background:#0b2325;} html.dark body .fsch__o input:checked+span{color:#0b2224;}