/* 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 . ---------------------------------------------------------------- */ /* ============ oxblood: the original atelier-warm design ============ The launch palette, retained as a preview against the menagerie base. Warm cream paper, deep oxblood brand, camel accent, Fraunces serif display. Fraunces is declared in styles.css and is still fetched on demand only when this theme activates and starts rendering it. Reference companies: Aesop, Loro Piana, private-bank atelier. */ [data-theme="oxblood"] { --brand: #6B1F2A; --brand-hover: #4E1620; --brand-warm: #A87B4B; --ink: #1B1917; --muted: #6B5F52; --paper: #EEE7D9; --paper-raised: #FFFEF9; --paper-accent: #E5DDCB; --border: #DCD3C1; --bg-page: #12100E; --bg-nav: #1E1B18; --bg-nav-hover: #251F1B; --status-limit: #9a6b00; --font-display: "Fraunces", "GT Sectra", Georgia, "Times New Roman", serif; } /* Fraunces wants tighter tracking than Syne, and no uppercase treatment on slogans — italic Fraunces was the original hero voice. */ [data-theme="oxblood"] h1, [data-theme="oxblood"] h2, [data-theme="oxblood"] h3, [data-theme="oxblood"] h4, [data-theme="oxblood"] .section-title, [data-theme="oxblood"] #blog h3, [data-theme="oxblood"] #latest h3, [data-theme="oxblood"] #quotPan h3 {letter-spacing:-0.005em; font-weight:600} [data-theme="oxblood"] .page-hero-title {text-transform:none; font-weight:600; letter-spacing:-0.01em; color:var(--paper)} [data-theme="oxblood"] .page-hero-dateline {color:var(--brand-warm)} [data-theme="oxblood"] .page-hero-cta a:hover {color:var(--paper)} [data-theme="oxblood"] .page-hero-eyebrow a:hover {color:var(--paper)} [data-theme="oxblood"] #slider .slide-caption {font-style:italic; font-weight:600; text-transform:none; letter-spacing:-0.01em; text-shadow:0 0 18px rgba(0,0,0,0.9), 0 0 36px rgba(0,0,0,0.6)} /* Strip menagerie's neon-glow drop-shadow from the logo marks. */ [data-theme="oxblood"] h1.logo img, [data-theme="oxblood"] h1.logo svg, [data-theme="oxblood"] .foot-logo img, [data-theme="oxblood"] .foot-logo svg {filter:none} /* ----------------------------------------------------------------------- Menagerie-literal sweep. Non-tokenized colors baked into styles.css that would otherwise leak Raw Carbon / Silk White / Orchid onto oxblood. Mapping used consistently below (menagerie base -> oxblood): #7A8098 -> #8A8175 secondary gray #9098B0 -> #B8AE9A mid secondary gray #E1E3EE -> #D9D0BF inverted-body text on dark #6A7088 -> #7A7264 placeholder #1F2029 -> #1E1B18 nav dark base #2A2B36 -> #251F1B nav dark hover / footer border #3B3D4E -> #3A342E dark border/hover rgba(217,70,239,x) -> rgba(168,123,75,x) orchid -> camel warm rgba(217,70,239,x) -> rgba(107,31,42,x) orchid -> oxblood (gradients) rgba(243,244,246,x) -> rgba(238,231,217,x) silk white -> cream rgba(13,13,17,x) -> rgba(18,16,14,x) obsidian -> warm dark ---------------------------------------------------------------- */ /* header: search input, submit button, results dropdown */ [data-theme="oxblood"] #head ul li {color:#8A8175} [data-theme="oxblood"] #head p.search {color:#8A8175} [data-theme="oxblood"] #head p.search input.txt {color:#D9D0BF; background:#1E1B18; box-shadow:inset 0 0 0 1px #3A342E} [data-theme="oxblood"] #head p.search input.btn {color:#D9D0BF; background:#2A241F; box-shadow:inset 0 0 0 1px #3A342E} [data-theme="oxblood"] #head p.search input.btn:hover {background:#3A342E} [data-theme="oxblood"] #head .search-results {background:#1E1B18; border-color:#3A342E; color:#D9D0BF} [data-theme="oxblood"] #head .search-results li {color:#D9D0BF} [data-theme="oxblood"] #head .search-results li a, [data-theme="oxblood"] #head .search-results li a.active {color:#D9D0BF} [data-theme="oxblood"] #head .search-results li.active a {color:var(--paper); background:#251F1B} [data-theme="oxblood"] #head .search-results .sr-title {color:var(--paper)} [data-theme="oxblood"] #head .search-results .sr-desc {color:#8A8175} /* content-top strip: return to dark ink background */ [data-theme="oxblood"] #ct_pan {background:var(--ink); color:#D9D0BF} [data-theme="oxblood"] #ct_pan p a:hover {color:var(--paper)} /* slider caption color + arrow color */ [data-theme="oxblood"] #slider .slide-caption {color:var(--paper)} [data-theme="oxblood"] #slider .slider-prev, [data-theme="oxblood"] #slider .slider-next {color:var(--paper)} /* quotPan: warm gradient with oxblood radial glows */ [data-theme="oxblood"] #quotPan {color:#E5DDCB; background:radial-gradient(140% 100% at 100% 0%, rgba(107,31,42,0.28) 0%, rgba(107,31,42,0) 55%), radial-gradient(90% 90% at 0% 100%, rgba(107,31,42,0.14) 0%, rgba(107,31,42,0) 60%), linear-gradient(180deg, #1F1B18 0%, #12100E 100%); box-shadow:inset 0 0 0 1px rgba(238,231,217,0.05)} [data-theme="oxblood"] #quotPan::before {background:linear-gradient(90deg, rgba(168,123,75,0) 0%, var(--brand-warm) 50%, rgba(168,123,75,0) 100%)} [data-theme="oxblood"] #quotPan h3 {color:var(--paper)} [data-theme="oxblood"] #quotPan .quot-lede {color:#B8AE9A} [data-theme="oxblood"] #quotPan .quot-benefits li {color:#D9D0BF} [data-theme="oxblood"] #quotPan .quot-benefits li::before {background:rgba(168,123,75,0.18); box-shadow:inset 0 0 0 1px rgba(168,123,75,0.5)} [data-theme="oxblood"] #quotPan .quot-field label {color:#B8AE9A} [data-theme="oxblood"] #quotPan input.txt {color:var(--paper); border:1px solid rgba(238,231,217,0.14); background:rgba(238,231,217,0.04)} [data-theme="oxblood"] #quotPan input.txt::placeholder {color:#7A7264} [data-theme="oxblood"] #quotPan input.txt:hover {background:rgba(238,231,217,0.06); border-color:rgba(238,231,217,0.22)} [data-theme="oxblood"] #quotPan input.txt:focus {background:rgba(238,231,217,0.07); box-shadow:0 0 0 3px rgba(168,123,75,0.18)} [data-theme="oxblood"] #quotPan .quot-fineprint {color:#8A8175} /* contact form: back to the ink button, orchid hover replaced by oxblood */ [data-theme="oxblood"] .rgtWrap input.btn {background:var(--ink); color:var(--paper)} [data-theme="oxblood"] .rgtWrap input.btn:hover {background:var(--brand)} /* footer */ [data-theme="oxblood"] #foot {color:#8A8175} [data-theme="oxblood"] .foot-tagline {color:#B8AE9A} [data-theme="oxblood"] .foot-est {border-color:#2E2822; color:#D9D0BF} [data-theme="oxblood"] .foot-nav .foot-heading {color:#D9D0BF} [data-theme="oxblood"] .foot-nav ul li a {color:#B8AE9A} [data-theme="oxblood"] .foot-bottom {border-top-color:#2E2822} [data-theme="oxblood"] .foot-copy {color:#8A8175} /* bio dialog backdrop — warm-dark instead of obsidian */ [data-theme="oxblood"] dialog.bio-modal::backdrop {background:rgba(18,16,14,0.72)} /* pr-nav hover + assessment selected states: warm cream fill */ [data-theme="oxblood"] .pr-nav-item:hover {background:#F3ECDC} [data-theme="oxblood"] .assessment-option:has(input:checked) {background:#F3ECDC} [data-theme="oxblood"] .assessment-likert-point:has(input:checked) {background:#F3ECDC} [data-theme="oxblood"] .assessment-btn-back:hover {background:#F3ECDC} /* assessment invalid-pulse — keyframes can't be overridden per-scope, so remap animation-name to a warm-tinted keyframe */ @keyframes assessment-invalid-pulse-oxblood { 0%,100% {background-color:transparent} 50% {background-color:rgba(168,123,75,0.10)} } [data-theme="oxblood"] .assessment-question.is-invalid {animation-name:assessment-invalid-pulse-oxblood} /* assessment-submit-bar — warm rgba */ [data-theme="oxblood"] .assessment-submit-bar {background:rgba(107,31,42,0.14)} /* assessment-banner is-deferred: back to dark neutral ink banner */ [data-theme="oxblood"] .assessment-banner.is-deferred {background:var(--ink)} [data-theme="oxblood"] .assessment-banner.is-deferred .assessment-banner-text {color:var(--paper)} /* ============ 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 Syne (aggressive display sans) 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; --status-limit: #9a6b00; --font-display: "IBM Plex Sans", var(--font-body); } /* IBM Plex Sans has less thick/thin contrast than Syne / 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"] .section-title {letter-spacing:-0.015em} /* Undo menagerie's aggressive slogan treatment (uppercase + 800 + wide tracking) — clinical wants an institutional, understated hero. */ [data-theme="clinical"] .page-hero-title {text-transform:none; font-weight:600; letter-spacing:-0.015em; color:var(--paper)} [data-theme="clinical"] #slider .slide-caption {font-weight:600; text-transform:none; letter-spacing:-0.01em; color:var(--paper); text-shadow:0 0 18px rgba(0,0,0,0.9), 0 0 36px rgba(0,0,0,0.6)} /* Strip menagerie's orchid neon-glow drop-shadow from logo marks. */ [data-theme="clinical"] h1.logo img, [data-theme="clinical"] h1.logo svg, [data-theme="clinical"] .foot-logo img, [data-theme="clinical"] .foot-logo svg {filter:none} /* quotPan: replace menagerie's orchid radial + Raw Carbon linear with a navy radial + graphite-navy linear. */ [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 h3 {color:var(--paper)} [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 {color:var(--paper); 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} /* ----------------------------------------------------------------------- Menagerie-literal sweep. Cool-mapping used consistently below (menagerie base -> clinical): #7A8098 -> #7A828E secondary gray #9098B0 -> #94A0AF mid secondary gray #E1E3EE -> #C7CDD4 inverted-body text (on dark) #6A7088 -> #6B7684 placeholder #1F2029 -> #16202C nav dark base (matches --bg-nav) #2A2B36 -> #1B2735 nav dark hover (matches --bg-nav-hover) #3B3D4E -> #2A3341 dark border/hover rgba(217,70,239,x) -> rgba(91,143,168,x) orchid -> steel-blue rgba(243,244,246,x) -> rgba(216,219,224,x) silk white -> cool white rgba(13,13,17,x) -> rgba(15,20,25,x) obsidian -> graphite-navy ---------------------------------------------------------------- */ /* header */ [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 {color:var(--paper); background:#1B2735} [data-theme="clinical"] #head .search-results .sr-title {color:var(--paper)} [data-theme="clinical"] #head .search-results .sr-desc {color:#7A828E} /* content-top strip: base flipped from ink-bg to paper-raised-bg for the menagerie flip. In clinical --paper-raised is near-white, which would render #ct_pan as a bright block. Force it back to --ink (dark cool). */ [data-theme="clinical"] #ct_pan {background:var(--ink); color:#C7CDD4} [data-theme="clinical"] #ct_pan p a:hover {color:var(--paper)} /* slider arrows */ [data-theme="clinical"] #slider .slider-prev, [data-theme="clinical"] #slider .slider-next {color:var(--paper)} /* contact form: menagerie sets bg:var(--brand) — clinical's --brand is dark navy, so no explicit reset needed; page-hero-cta hovers back to paper on dark. */ [data-theme="clinical"] .page-hero-cta a:hover {color:var(--paper)} [data-theme="clinical"] .page-hero-eyebrow a:hover {color:var(--paper)} /* 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} /* bio dialog backdrop — cool graphite instead of orchid-obsidian */ [data-theme="clinical"] dialog.bio-modal::backdrop {background:rgba(15,20,25,0.72)} /* Cool-tint the orchid rgba() washes baked into the menagerie base */ [data-theme="clinical"] .pr-nav-item:hover {background:rgba(91,143,168,0.10)} [data-theme="clinical"] .assessment-option:has(input:checked) {background:rgba(91,143,168,0.10)} [data-theme="clinical"] .assessment-likert-point:has(input:checked) {background:rgba(91,143,168,0.10)} [data-theme="clinical"] .assessment-btn-back:hover {background:rgba(91,143,168,0.10)} [data-theme="clinical"] .assessment-submit-bar {background:rgba(91,143,168,0.14)} /* assessment invalid-pulse — keyframes can't be overridden per-scope, so remap animation-name to a clinical-tinted keyframe */ @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(13,13,17,0.92); color:#F3F4F6; border:1px solid rgba(243,244,246,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:#D946EF; 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:#D946EF; margin:0} .theme-picker-close {position:absolute; top:2px; right:4px; padding:2px 6px; background:transparent; border:0; color:#7A8098; font-family:inherit; font-size:14px; line-height:1; cursor:pointer} .theme-picker-close:hover {color:#F3F4F6}