/* ========================================================================== supertran — color theme previews Each theme rearranges the same five colors (blue, lime, ink, gray and white) by setting the color roles documented at the top of style.css. The picker (assets/js/theme-picker.js) sets data-theme on . No theme selected = the current design. To make a theme permanent, copy its variables into :root in style.css. To remove the previews, delete this file, theme-picker.js, and the two lines that load them in each page's . ========================================================================== */ /* Shared: hero overlays, focus rings and table hover follow each theme's colors */ [data-theme] { --hero-shade: linear-gradient( 90deg, color-mix(in srgb, var(--hero) 90%, transparent) 0%, color-mix(in srgb, var(--hero) 78%, transparent) 40%, color-mix(in srgb, var(--hero) 35%, transparent) 60%, transparent 78% ), linear-gradient(0deg, color-mix(in srgb, var(--hero) 70%, transparent) 0%, transparent 30%); --hero-shade-mobile: linear-gradient( 90deg, color-mix(in srgb, var(--hero) 90%, transparent), color-mix(in srgb, var(--hero) 50%, transparent) ), linear-gradient(0deg, color-mix(in srgb, var(--hero) 80%, transparent) 0%, transparent 40%); --hero-card: color-mix(in srgb, var(--hero) 72%, transparent); --banner-shade: linear-gradient(0deg, color-mix(in srgb, var(--hero) 90%, transparent), transparent); --accent-ring: color-mix(in srgb, var(--accent, var(--blue)) 50%, transparent); --accent-ring-soft: color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent); --table-hover: color-mix(in srgb, var(--surface-alt, #f1f2f6) 60%, transparent); } /* 1. Lime Forward — lime and blue swap jobs: lime buttons and banners, blue highlights */ [data-theme="lime-forward"] { --hero: var(--ink); --primary: var(--lime); --on-primary: var(--ink); --highlight: var(--blue); --on-highlight: #fff; --on-highlight-muted: color-mix(in srgb, #fff 78%, var(--blue)); --band: var(--lime); --on-band: var(--ink); --on-band-muted: color-mix(in srgb, var(--ink) 80%, var(--lime)); --band-glow: var(--blue); --band-line: color-mix(in srgb, var(--ink) 22%, transparent); --band-button: var(--ink); --on-band-button: #fff; } /* 2. Midnight — dark mode: ink pages, white text, lime links, blue buttons and banners */ [data-theme="midnight"] { color-scheme: dark; --hero: var(--ink); --page-bg: var(--ink); --text: #fff; --text-muted: color-mix(in srgb, #fff 68%, var(--ink)); --text-subtle: color-mix(in srgb, #fff 45%, var(--ink)); --eyebrow: color-mix(in srgb, #fff 58%, var(--ink)); --line: color-mix(in srgb, #fff 16%, var(--ink)); --surface-alt: color-mix(in srgb, #fff 5%, var(--ink)); --surface-alt-strong: color-mix(in srgb, #fff 11%, var(--ink)); --surface-soft: color-mix(in srgb, #fff 3%, var(--ink)); --card: color-mix(in srgb, #fff 7%, var(--ink)); --utility-bg: color-mix(in srgb, #fff 6%, var(--ink)); --utility-text: color-mix(in srgb, #fff 80%, var(--ink)); --header-bg: var(--ink); --header-logo: brightness(0) invert(1); --footer-bg: color-mix(in srgb, #fff 4%, var(--ink)); --footer-logo: brightness(0) invert(1); --primary: var(--blue); --on-primary: #fff; --accent: var(--lime); --highlight: var(--lime); --on-highlight: var(--ink); --on-highlight-muted: color-mix(in srgb, var(--ink) 72%, var(--lime)); --band: var(--blue); --on-band: #fff; --on-band-muted: color-mix(in srgb, #fff 82%, var(--blue)); --band-glow: var(--lime); --dark: color-mix(in srgb, #fff 7%, var(--ink)); --on-dark: #fff; --on-dark-muted: color-mix(in srgb, #fff 70%, var(--ink)); --dark-glow: var(--lime); --dark-raised: color-mix(in srgb, #fff 12%, var(--ink)); --dark-line: color-mix(in srgb, #fff 14%, transparent); --note-bg: color-mix(in srgb, var(--blue) 24%, var(--ink)); --note-text: #fff; } /* 3. Blueprint — blue hero and feature sections, ink buttons and banners, blue-tinted grays */ [data-theme="blueprint"] { --hero: var(--blue); --utility-bg: var(--blue); --utility-text: #fff; --eyebrow: var(--blue); --line: color-mix(in srgb, var(--blue) 18%, #fff); --surface-alt: color-mix(in srgb, var(--blue) 6%, #fff); --surface-alt-strong: color-mix(in srgb, var(--blue) 13%, #fff); --surface-soft: color-mix(in srgb, var(--blue) 4%, #fff); --footer-bg: color-mix(in srgb, var(--blue) 6%, #fff); --primary: var(--ink); --on-primary: #fff; --accent: var(--blue); --highlight: var(--lime); --on-highlight: var(--ink); --band: var(--ink); --on-band: #fff; --on-band-muted: color-mix(in srgb, #fff 72%, var(--ink)); --band-glow: var(--lime); --band-line: color-mix(in srgb, #fff 20%, transparent); --dark: var(--blue); --on-dark: #fff; --on-dark-muted: color-mix(in srgb, #fff 84%, var(--blue)); --dark-glow: var(--lime); --dark-raised: color-mix(in srgb, var(--ink) 28%, var(--blue)); --dark-line: color-mix(in srgb, #fff 22%, transparent); --note-bg: color-mix(in srgb, var(--blue) 10%, #fff); --note-text: var(--ink); } /* 4. Monochrome — ink and white, with lime as the only color */ [data-theme="monochrome"] { --hero: var(--ink); --text-muted: color-mix(in srgb, var(--ink) 66%, #fff); --eyebrow: color-mix(in srgb, var(--ink) 72%, #fff); --line: var(--border); --surface-alt: color-mix(in srgb, var(--border) 40%, #fff); --surface-alt-strong: color-mix(in srgb, var(--border) 80%, #fff); --surface-soft: color-mix(in srgb, var(--border) 25%, #fff); --footer-bg: var(--ink); --footer-logo: brightness(0) invert(1); --primary: var(--ink); --on-primary: #fff; --accent: var(--ink); --highlight: var(--lime); --on-highlight: var(--ink); --on-highlight-muted: color-mix(in srgb, var(--ink) 72%, var(--lime)); --band: var(--ink); --on-band: #fff; --on-band-muted: color-mix(in srgb, #fff 72%, var(--ink)); --band-glow: var(--lime); --band-line: color-mix(in srgb, #fff 20%, transparent); --dark: var(--ink); --dark-glow: var(--lime); --note-bg: color-mix(in srgb, var(--border) 40%, #fff); --note-text: var(--ink); } /* 5. Electric — lime top bar, ink header and footer, blue hero and banners, lime buttons */ [data-theme="electric"] { --hero: var(--blue); --utility-bg: var(--lime); --utility-text: var(--ink); --header-bg: var(--ink); --header-logo: brightness(0) invert(1); --footer-bg: var(--ink); --footer-logo: brightness(0) invert(1); --primary: var(--lime); --on-primary: var(--ink); --accent: var(--blue); --highlight: var(--lime); --on-highlight: var(--ink); --band: var(--blue); --on-band: #fff; --band-glow: var(--lime); --dark: var(--ink); --dark-glow: var(--lime); } /* Dark header or footer on an otherwise light page */ [data-theme="electric"] .header, [data-theme="electric"] .footer, [data-theme="monochrome"] .footer { --text: #fff; --text-muted: color-mix(in srgb, #fff 65%, var(--ink)); --eyebrow: color-mix(in srgb, #fff 55%, var(--ink)); --line: color-mix(in srgb, #fff 18%, var(--ink)); --accent: var(--lime); } /* ========================================================================== Theme picker (preview tool). Uses fixed colors so it looks the same in every theme. ========================================================================== */ .theme-picker { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: Telegraf, Arial, sans-serif; color: #1f1f1f; letter-spacing: normal; } .theme-picker-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #ffffff33; background: #1f1f1f; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 24px #1f1f1f40; cursor: pointer; } .theme-picker-toggle:focus-visible, .theme-picker-option input:focus-visible + span { outline: 3px solid #0366fd; outline-offset: 3px; } .theme-picker-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 330px; max-height: calc(100vh - 110px); overflow: auto; padding: 20px; background: #fff; border: 1px solid #d6d9e5; box-shadow: 0 18px 48px #1f1f1f33; } .theme-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .theme-picker-head strong { font-size: 16px; font-weight: 700; } .theme-picker-close { padding: 4px; border: 0; background: none; color: #1f1f1f; cursor: pointer; } .theme-picker fieldset { display: grid; gap: 8px; } .theme-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .theme-picker-option { position: relative; display: block; cursor: pointer; } .theme-picker-option input { position: absolute; opacity: 0; } .theme-picker-option > span { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px; border: 1px solid #d6d9e5; transition: border-color 0.15s; } .theme-picker-option:hover > span { border-color: #8a919b; } .theme-picker-option input:checked + span { border-color: #0366fd; box-shadow: inset 0 0 0 1px #0366fd; } .theme-picker-name { font-size: 15px; font-weight: 700; } .theme-picker-desc { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: #66707e; } .theme-picker-swatches { display: flex; gap: 3px; } .theme-picker-swatches i { width: 16px; height: 16px; border: 1px solid #1f1f1f26; } .theme-picker-note { margin-top: 14px; font-size: 11px; line-height: 1.5; color: #66707e; } @media (max-width: 760px) { .theme-picker { right: 12px; bottom: 12px; } .theme-picker-panel { width: calc(100vw - 24px); } } @media print { .theme-picker { display: none; } }