/* ===== Crier interior light mode (opt-in via html.lightmode) ===== Activated by the nav theme toggle (assets/theme-toggle.js). Dormant unless the .lightmode class is on , so dark mode is completely unaffected. Palette = Bright White. Layout/spacing/size never change here — colour only. */ html.lightmode{ --void:#ffffff; --void2:#f4f2ec; --panel:#faf8f3; --ink:#15150f; --muted:#635e50; --faint:#6f6a5b; --line:rgba(20,20,15,.12); } /* flat bright white: drop the dark ambient blobs, vignette and grain */ html.lightmode body::before, html.lightmode body::after, html.lightmode .grain{display:none} /* header / nav */ html.lightmode header.site{background:linear-gradient(180deg,color-mix(in srgb,var(--void) 92%,transparent) 0%,color-mix(in srgb,var(--void) 74%,transparent) 55%,transparent 100%)} html.lightmode header.site.solid{background:color-mix(in srgb,var(--void) 95%,transparent)} html.lightmode nav.main a::after{background:var(--ink)} /* surfaces */ html.lightmode section.band.alt, html.lightmode .contact{background:color-mix(in srgb,var(--ink) 3%,transparent)} html.lightmode .fcard{background:color-mix(in srgb,var(--ink) 2.5%,transparent)} html.lightmode .fcard .n{color:var(--ink)} html.lightmode .field input, html.lightmode .field textarea{background:color-mix(in srgb,var(--ink) 3%,transparent)} html.lightmode .field label{color:var(--faint)} /* button hovers that assume a dark ground */ html.lightmode .hero .herocta:hover, html.lightmode .form button:hover, html.lightmode .form .submitbtn:hover, html.lightmode .pos .applylink:hover{color:var(--ink);border-color:var(--ink)} /* footer + overlay menu */ html.lightmode footer.site{background:color-mix(in srgb,var(--void2) 55%,transparent)} html.lightmode footer.site nav a, html.lightmode footer.site .blurb, html.lightmode .legal, html.lightmode .legal a, html.lightmode .legal .lphone, html.lightmode .contact .email a{color:var(--ink)} html.lightmode footer.site .foot-hamb svg{fill:var(--ink)} html.lightmode .sitemenu{background:var(--void)} html.lightmode .sitemenu::before{display:none} html.lightmode .sitemenu .mtop img{box-shadow:none} html.lightmode .sitemenu .lbl, html.lightmode .sitemenu .mfoot, html.lightmode .sitemenu .mfoot .social a, html.lightmode .sitemenu .mfoot .mmail{color:var(--ink)} /* tracked labels + eyebrows (many pages hardcode #fff, some inline — beat both). Labels sit a step lighter than full ink, mirroring the dark-mode toning. */ html.lightmode .eyebrow, html.lightmode .eyebrow span, html.lightmode .tm .mail{color:var(--ink)!important} html.lightmode .kicker{color:color-mix(in srgb,var(--ink) 72%,var(--void))!important} /* a11y: small gold TEXT on white → slightly darker --btn (4.5:1 AA); large display gold stays brand --gold */ html.lightmode .eyebrow .num{color:var(--btn)!important} html.lightmode .pos .loc, html.lightmode .reels a, html.lightmode .kicker .num{color:var(--btn)} /* about — exits + experience group headings */ html.lightmode .exit .acq{color:var(--ink)} html.lightmode .expgrp .gh{color:color-mix(in srgb,var(--ink) 72%,var(--void))} /* testimonial coverflow — cards keep their dark inline gradients, so their text must STAY light (else --ink/--muted flip dark = dark-on-dark) */ html.lightmode .tc blockquote{color:rgba(255,255,255,.72)} html.lightmode .tc.is-active blockquote{color:#fff} html.lightmode .tc figcaption, html.lightmode .tc figcaption span{color:rgba(255,255,255,.62)} html.lightmode .tc.is-active figcaption{color:#fff} /* carousel dots (about testimonials + studio packaging) sit on a light band */ html.lightmode .qdots button, html.lightmode .pcar-dots button, html.lightmode .pcar-dots a{background:color-mix(in srgb,var(--ink) 26%,transparent)} html.lightmode .qdots button:hover, html.lightmode .pcar-dots button:hover, html.lightmode .pcar-dots a:hover{background:color-mix(in srgb,var(--ink) 45%,transparent)} html.lightmode .qdots button.on, html.lightmode .pcar-dots button.on, html.lightmode .pcar-dots a.on{background:var(--gold)} /* studio — italic carousel caption is near-white; darken on light ground */ html.lightmode .pcar-cap{color:var(--muted)} /* studio — logo wall tiles are white cards; give them a hairline so they read */ html.lightmode .logowall .lt{border-color:var(--line)} /* PR case studies — Challenge/Solution/Results labels + active filter tab are #fff */ html.lightmode .cscopy p b{color:var(--ink)} html.lightmode .cs-tab.active{color:var(--ink)} @media(max-width:640px){ html.lightmode .cs-tab{background:color-mix(in srgb,var(--ink) 5%,transparent)} html.lightmode .cs-tab.active{background:rgba(234,75,43,.14);border-color:rgba(234,75,43,.5)} } /* NB: image-overlay elements (social .cw-badge / .cw-play / gradient scrims, video .vlabel / .pbtn, gallery hovers) intentionally keep their white/dark values — they sit on top of photography in BOTH modes. */ /* ===== nav theme toggle (sun / moon) ===== */ .themetoggle{appearance:none;background:none;border:0;padding:6px;margin:0 2px 0 4px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;color:var(--ink);opacity:.8; transition:opacity .2s,color .2s;line-height:0;flex:0 0 auto} .themetoggle:hover{opacity:1;color:var(--gold)} .themetoggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .themetoggle .ic-sun{display:none} html.lightmode .themetoggle .ic-moon{display:none} html.lightmode .themetoggle .ic-sun{display:block} @media(max-width:860px){.themetoggle{margin-left:0}}