/* themes.css — experimental design directions layered on top of styles.css. Activate a theme by visiting the site with ?theme= in the URL (see js/theme.js). The choice persists in localStorage; clear with ?theme= (empty value). ?debug=1 shows a floating theme picker. Each theme block overrides :root custom properties from styles.css. Only override the tokens that need to change; anything left alone inherits from the base design. If a theme needs to change something that isn't tokenized (e.g. a specific letter-spacing on h2), add a selector inside the same [data-theme="..."] block rather than editing styles.css. Keep experiments scoped here so the base design stays clean. To promote an experiment to the base design: copy its overrides into styles.css's :root, delete the [data-theme] block, and remove the themes.css include from every page's . ---------------------------------------------------------------- */ /* ============ Fonts for experimental themes ============ */ /* Browsers only fetch @font-face files when a matching character is rendered, so declaring these here costs zero bytes for visitors who don't have a theme active. */ @font-face {font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2")} @font-face {font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2")} @font-face {font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2")} @font-face {font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/ibm-plex-sans-latin-700.woff2") format("woff2")} /* ============ clinical: biotech / medical-device ============ Palette: near-white paper, deep clinical navy brand, steel-blue warm accent, graphite text on cool graphite-navy header/footer. Display type shifts from Fraunces (warm serif) to IBM Plex Sans (institutional sans, coherent with the existing Plex Mono eyebrow labels). Reference companies: Verily, Illumina, Ginkgo Bioworks, Moderna. */ [data-theme="clinical"] { --brand: #0B3D5C; --brand-hover: #072A40; --brand-warm: #5B8FA8; --ink: #0F1419; --muted: #4A5568; --paper: #F5F5F2; --paper-raised: #FCFCFB; --paper-accent: #DDE2E8; --border: #D8DBE0; --bg-page: #0F1419; --bg-nav: #16202C; --bg-nav-hover: #1B2735; --font-display: "IBM Plex Sans", var(--font-body); } /* IBM Plex Sans has less thick/thin contrast than Fraunces, so tight negative tracking on headings reads uncomfortably. Loosen it. */ [data-theme="clinical"] h1, [data-theme="clinical"] h2, [data-theme="clinical"] h3, [data-theme="clinical"] h4, [data-theme="clinical"] .page-hero-title, [data-theme="clinical"] .section-title {letter-spacing:-0.015em} /* quotPan bakes oxblood into hardcoded rgba() gradients and warm-gray text colors (styles.css:181–203) that aren't routed through tokens. Each override below replaces one warm literal with its clinical counterpart; leaving anything out means a warm value leaks through. */ [data-theme="clinical"] #quotPan {color:#E4E7EB; background:radial-gradient(140% 100% at 100% 0%, rgba(91,143,168,0.24) 0%, rgba(91,143,168,0) 55%), radial-gradient(90% 90% at 0% 100%, rgba(11,61,92,0.28) 0%, rgba(11,61,92,0) 60%), linear-gradient(180deg, #1B2735 0%, #0F1419 100%); box-shadow:inset 0 0 0 1px rgba(216,219,224,0.06)} [data-theme="clinical"] #quotPan::before {background:linear-gradient(90deg, rgba(91,143,168,0) 0%, var(--brand-warm) 50%, rgba(91,143,168,0) 100%)} [data-theme="clinical"] #quotPan .quot-lede {color:#94A0AF} [data-theme="clinical"] #quotPan .quot-benefits li {color:#B8C0CC} [data-theme="clinical"] #quotPan .quot-benefits li::before {background:rgba(91,143,168,0.18); box-shadow:inset 0 0 0 1px rgba(91,143,168,0.5)} [data-theme="clinical"] #quotPan .quot-field label {color:#94A0AF} [data-theme="clinical"] #quotPan input.txt {border-color:rgba(216,219,224,0.14); background:rgba(216,219,224,0.04)} [data-theme="clinical"] #quotPan input.txt::placeholder {color:#6B7684} [data-theme="clinical"] #quotPan input.txt:hover {background:rgba(216,219,224,0.06); border-color:rgba(216,219,224,0.22)} [data-theme="clinical"] #quotPan input.txt:focus {background:rgba(216,219,224,0.07); box-shadow:0 0 0 3px rgba(91,143,168,0.20)} [data-theme="clinical"] #quotPan .quot-fineprint {color:#7A828E} /* ----------------------------------------------------------------------- Warm-literal sweep. Additional non-tokenized warm colors baked into styles.css that would otherwise leak through on the clinical page. Cool-mapping used consistently below (warm -> cool): #8A8175 -> #7A828E light secondary gray #B8AE9A -> #94A0AF mid secondary gray #D9D0BF -> #C7CDD4 inverted-body text (on dark) #E5DDCB -> #DDE2E8 cream accent panel #FFFEF9 -> #FCFCFB near-white card on paper #7A7264 -> #6B7684 placeholder #1E1B18 -> #16202C nav dark base (matches --bg-nav) #251F1B -> #1B2735 nav dark hover (matches --bg-nav-hover) #2A241F -> #1F2A38 dark button/panel #3A342E -> #2A3341 dark border/hover #2E2822 -> #1F2A38 footer border rgba(168,123,75,x) -> rgba(91,143,168,x) camel warm accent ---------------------------------------------------------------- */ /* header: search input, submit button, results dropdown */ [data-theme="clinical"] #head ul li {color:#7A828E} [data-theme="clinical"] #head p.search {color:#7A828E} [data-theme="clinical"] #head p.search input.txt {color:#C7CDD4; background:#16202C; box-shadow:inset 0 0 0 1px #2A3341} [data-theme="clinical"] #head p.search input.btn {color:#C7CDD4; background:#1F2A38; box-shadow:inset 0 0 0 1px #2A3341} [data-theme="clinical"] #head p.search input.btn:hover {background:#2A3341} [data-theme="clinical"] #head .search-results {background:#16202C; border-color:#2A3341; color:#C7CDD4} [data-theme="clinical"] #head .search-results li {color:#C7CDD4} [data-theme="clinical"] #head .search-results li a, [data-theme="clinical"] #head .search-results li a.active {color:#C7CDD4} [data-theme="clinical"] #head .search-results li.active a {background:#1B2735} [data-theme="clinical"] #head .search-results .sr-desc {color:#7A828E} /* content-top strip (#ct_pan sits on --ink) */ [data-theme="clinical"] #ct_pan {color:#C7CDD4} /* card / panel backgrounds, portrait circles, and cream accent panels now flow through --paper-raised / --paper-accent (redefined in the clinical block above); no per-selector overrides needed here. */ /* footer */ [data-theme="clinical"] #foot {color:#7A828E} [data-theme="clinical"] .foot-tagline {color:#94A0AF} [data-theme="clinical"] .foot-est {border-color:#1F2A38; color:#C7CDD4} [data-theme="clinical"] .foot-nav .foot-heading {color:#C7CDD4} [data-theme="clinical"] .foot-nav ul li a {color:#94A0AF} [data-theme="clinical"] .foot-bottom {border-top-color:#1F2A38} [data-theme="clinical"] .foot-copy {color:#7A828E} /* assessment invalid-pulse (keyframes can't be overridden per-scope, so remap the animation-name to a clinical-tinted keyframe instead) */ @keyframes assessment-invalid-pulse-clinical { 0%,100% {background-color:transparent} 50% {background-color:rgba(91,143,168,0.10)} } [data-theme="clinical"] .assessment-question.is-invalid {animation-name:assessment-invalid-pulse-clinical} /* ============ theme picker (dev-only, gated by ?debug=1) ============ */ .theme-picker {position:fixed; top:12px; right:12px; z-index:9999; padding:12px 30px 12px 14px; display:flex; flex-direction:column; gap:6px; background:rgba(18,16,14,0.92); color:#EEE7D9; border:1px solid rgba(238,231,217,0.22); border-radius:4px; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:11px; box-shadow:0 8px 24px rgba(0,0,0,0.45); backdrop-filter:blur(6px)} .theme-picker strong {font-weight:600; color:#A87B4B; text-transform:uppercase; letter-spacing:0.14em; font-size:10px} .theme-picker label {display:flex; align-items:center; gap:6px; cursor:pointer; letter-spacing:0.02em; text-transform:none} .theme-picker input[type=radio] {accent-color:#A87B4B; margin:0} .theme-picker-close {position:absolute; top:2px; right:4px; padding:2px 6px; background:transparent; border:0; color:#8A8175; font-family:inherit; font-size:14px; line-height:1; cursor:pointer} .theme-picker-close:hover {color:#EEE7D9}