/* Blackberry-screen black & white theme, layered over the original case-study styling. Contrast note: earlier this file forced a single white/black palette onto the pages. That broke readability, because several pages hardcode light text (cream / white) and dark panels that a variable swap can't reach — leaving light text stranded on a forced-white background. Instead we now LEAVE each page's original, correctly-paired colours in place and simply desaturate the whole page to black & white. A page keeps its own contrast; it just loses its colour. Desaturation is done with a fixed overlay that applies backdrop-filter to everything painted behind it. Crucially this overlay is NOT an ancestor of the page content, so position:fixed elements (the nav, the back-link) keep sticking — a filter on or would unstick them. Type BLACK / WHITE / 6111 (see theme-toggle.js) to switch the desaturation between light, inverted-dark, and a red-&-black duotone. */ @import url('https://fonts.googleapis.com/css2?family=Doto:wght@500;700;900&family=Space+Mono:wght@400;700&display=swap'); /* Home-screen type, applied without touching colour */ :root { --display:"Space Mono", ui-monospace, monospace; --sans:"Space Mono", ui-monospace, monospace; --mono:"Space Mono", ui-monospace, monospace; --heading:"Doto", ui-monospace, monospace; } /* Navbar type. The case-study nav was rendering in Space Mono (via --mono/--sans), which set it apart from the theme's signature dot-matrix face — the Doto used on the home-screen clock and every case-study title. Put the top bar in that same display face so it reads as part of the theme, not a separate mono UI strip. This file is the last stylesheet on every case study, so it wins the cascade. */ .nav { font-family: var(--heading); font-weight: 700; letter-spacing: 0.16em; } .nav a { font-family: inherit; font-weight: inherit; } /* ===== Unified light / dark / red theming ===== The case studies were authored with different natural bases: some are light (iomovo, mylo), some are dark (mcdonalds, nxne, roots, tesla, toronto). A plain desaturate kept each page's own base, so "light" left the dark pages dark and "dark" left the light pages light — pages disagreed with each other. Fix: every page declares its natural base on — `base-light` or `base-dark`. The overlay always desaturates, and INVERTS a page's luminance only when the chosen theme doesn't match that page's base. So a dark-authored page flips to light under the light theme, a light page flips to dark under the dark theme, and every page ends up looking the same. Inversion flips ALL of a page's colours at once — including hardcoded panels, gradients and mockups a variable swap could never reach — which is why the pages finally agree. */ /* Base overlay: grayscale, no inversion (matches the page's own base). */ body::after { content:""; position:fixed; inset:0; z-index:2147483647; pointer-events:none; -webkit-backdrop-filter:grayscale(1) contrast(1.02); backdrop-filter:grayscale(1) contrast(1.02); } /* Invert when the theme disagrees with the page's base: light theme over a dark page, or dark theme over a light page. */ html.base-dark:not(.dark):not(.theme-red) body::after, html.dark:not(.base-dark):not(.theme-red) body::after { -webkit-backdrop-filter:grayscale(1) invert(1) contrast(1.02); backdrop-filter:grayscale(1) invert(1) contrast(1.02); } /* Pre-invert media wherever the overlay inverts, so photos stay positive (just greyscale) instead of turning into negatives. */ html.base-dark:not(.dark):not(.theme-red) :is(img,svg,video,canvas,picture,iframe), html.dark:not(.base-dark):not(.theme-red) :is(img,svg,video,canvas,picture,iframe) { filter:invert(1); } /* Red & black version — typing 6111 maps the greyscale onto a red duotone, unified to red-on-black on every page (light-based pages invert first). */ html.theme-red body::after { -webkit-backdrop-filter:grayscale(1) sepia(1) saturate(6) hue-rotate(-28deg) contrast(1.05); backdrop-filter:grayscale(1) sepia(1) saturate(6) hue-rotate(-28deg) contrast(1.05); } html.theme-red:not(.base-dark) body::after { -webkit-backdrop-filter:grayscale(1) invert(1) sepia(1) saturate(6) hue-rotate(-28deg) contrast(1.05); backdrop-filter:grayscale(1) invert(1) sepia(1) saturate(6) hue-rotate(-28deg) contrast(1.05); } html.theme-red:not(.base-dark) :is(img,svg,video,canvas,picture,iframe) { filter:invert(1); } /* Tidy up mobile: the case studies keep 80–140px of vertical padding per section on phones, which reads as a lot of empty space. Tighten the shared layout blocks so content sits closer together. */ @media (max-width: 640px) { .case-hero { padding: 92px 20px 40px !important; } .case-section { padding: 42px 20px !important; } .case-section-header { margin-bottom: 26px !important; gap: 16px !important; } .next-project { padding: 56px 20px !important; } .footer { padding: 26px 20px !important; } .text-block { gap: 20px !important; } }