/* * theme.css -- design tokens for light/dark, plus the theme switch component. * * Loaded on every page, after Bootstrap and before style.css, so the component * layer can consume these tokens. static/js/theme.js sets data-theme on * before first paint. */ /* ------------------------------------------------------------------ */ /* Tokens: light (default) */ /* ------------------------------------------------------------------ */ :root, [data-theme="light"] { color-scheme: light; /* Page canvas */ --app-bg: #f8fafc; --app-glow-1: rgba(66, 133, 244, 0.10); --app-glow-2: rgba(52, 168, 83, 0.05); /* Surfaces */ --surface: #ffffff; --surface-muted: #f7fafc; --surface-sunken: #f1f3f4; --surface-track: #eef1f5; --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(255, 255, 255, 0.4); /* Lines */ --border: #edf2f7; --border-strong: #dee2e6; --border-stronger: #ced4da; --border-dashed: #dadce0; --divider: rgba(0, 0, 0, 0.05); /* Type */ --heading: #2d3748; --text: #1a202c; --text-subtle: #4a5568; --text-muted: #718096; --text-faint: #6c757d; /* Brand */ --google-blue: #4285F4; --google-red: #EA4335; --google-yellow: #FBBC05; --google-green: #34A853; --link: #4285F4; --link-hover: #2b6cb0; --brand-gradient: linear-gradient(135deg, #4285F4, #34A853); --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-text: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335); --hairline-gradient: linear-gradient(135deg, #e0e0e0, #f5f5f5); --hairline-gradient-hover: linear-gradient(135deg, #4285F4, #34A853); /* Shadows */ --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.05); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.06); --shadow-xl: 0 25px 60px rgba(31, 38, 135, 0.18); --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); --hero-shadow: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.12)); /* Semantic: success */ --success-surface: #f0fff4; --success-border: #c6f6d5; --success-text: #155724; --success-strong: #2f855a; --success-pill-bg: #ffffff; --success-pill-border: #badbcc; --success-pill-text: #0f5132; /* Semantic: danger */ --danger-surface: #fff5f5; --danger-border: #fed7d7; --danger-border-strong: #feb2b2; --danger-accent: #e53e3e; --danger-text: #c53030; --danger-meta-bg: #ffffff; /* Overlay */ --overlay-bg: rgba(255, 255, 255, 0.85); /* Focus */ --focus-ring: rgba(0, 123, 255, 0.5); --input-border: #ccc; --input-border-hover: #80bdff; --input-border-focus: #007bff; /* Brand marks sit on their own artwork; no plate needed in light. */ --logo-plate: transparent; --logo-plate-pad: 0; --logo-plate-ring: transparent; --raster-art-filter: brightness(1); /* Solid accent fill that carries text on top of it. Kept distinct from --google-blue, which is tuned for text/icons on the page background. */ --accent-solid: #4285F4; --on-accent: #ffffff; --accent-glow: rgba(66, 133, 244, 0.30); --accent-glow-strong: rgba(66, 133, 244, 0.40); --shadow-accent: 0 20px 40px rgba(66, 133, 244, 0.15); --pulse-ring: rgba(66, 133, 244, 0.35); --pulse-ring-fade: rgba(66, 133, 244, 0); --brand-gradient-h: linear-gradient(90deg, #4285F4, #34A853); --template-hover-bg: #ebf8ff; --template-hover-border: #bee3f8; --valid-border: #198754; --valid-glow: rgba(25, 135, 84, 0.40); --invalid-border: #dc3545; --invalid-glow: rgba(220, 53, 69, 0.40); /* High-contrast solid button (near-black chip in light, near-white in dark). */ --btn-solid-bg: #1a1a1a; --btn-solid-bg-hover: #333333; --btn-solid-fg: #ffffff; /* Soft focus halo for custom controls, distinct from the stronger --focus-ring used on Bootstrap inputs. */ --focus-halo: rgba(0, 113, 227, 0.12); /* Theme switch */ --switch-bg: rgba(255, 255, 255, 0.72); --switch-border: rgba(15, 23, 42, 0.10); --switch-thumb: #ffffff; --switch-thumb-shadow: 0 2px 6px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04); --switch-shadow: 0 6px 20px rgba(15, 23, 42, 0.10); --switch-icon: #64748b; --switch-icon-hover: #1a202c; --switch-icon-active: #1a202c; } /* ------------------------------------------------------------------ */ /* Tokens: dark */ /* ------------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; --app-bg: #0e131a; --app-glow-1: rgba(66, 133, 244, 0.16); --app-glow-2: rgba(52, 168, 83, 0.09); --surface: #161c26; --surface-muted: #1c2431; --surface-sunken: #212b38; --surface-track: #232d3b; --glass-bg: rgba(22, 28, 38, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --border: #26303d; --border-strong: #33404f; --border-stronger: #3d4b5c; --border-dashed: #3a4756; --divider: rgba(255, 255, 255, 0.07); --heading: #e6edf5; --text: #e6edf5; --text-subtle: #b3c0d0; --text-muted: #93a1b3; --text-faint: #8493a6; /* Brand hues lifted for contrast against the dark canvas. */ --google-blue: #7cb0ff; --google-red: #ff8a80; --google-yellow: #ffd452; --google-green: #5cd685; --link: #7cb0ff; --link-hover: #a9caff; --brand-gradient: linear-gradient(135deg, #4c8dfb, #35b566); --primary-gradient: linear-gradient(135deg, #7b8ff5 0%, #9a6fc4 100%); --gradient-text: linear-gradient(135deg, #7cb0ff, #5cd685, #ffd452, #ff8a80); --hairline-gradient: linear-gradient(135deg, #2b3542, #1d2733); --hairline-gradient-hover: linear-gradient(135deg, #7cb0ff, #5cd685); --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.62); --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.55); --hero-shadow: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.55)); --success-surface: rgba(52, 168, 83, 0.13); --success-border: rgba(92, 214, 133, 0.30); --success-text: #7ee2a0; --success-strong: #7ee2a0; --success-pill-bg: rgba(92, 214, 133, 0.14); --success-pill-border: rgba(92, 214, 133, 0.34); --success-pill-text: #9dedb8; --danger-surface: rgba(234, 67, 53, 0.12); --danger-border: rgba(255, 138, 128, 0.28); --danger-border-strong: rgba(255, 138, 128, 0.42); --danger-accent: #ff7a6e; --danger-text: #ff9b91; --danger-meta-bg: rgba(255, 138, 128, 0.10); --overlay-bg: rgba(8, 11, 16, 0.85); --focus-ring: rgba(124, 176, 255, 0.45); --input-border: #3d4b5c; --input-border-hover: #4d6a90; --input-border-focus: #7cb0ff; /* Brand logos are dark artwork on transparency -- they need a light plate rather than a filter, which would wreck the brand colours. */ --logo-plate: #f4f6f9; --logo-plate-pad: 10px 16px; --logo-plate-ring: rgba(255, 255, 255, 0.10); /* Opaque raster art carries its own light background; take the edge off. */ --raster-art-filter: brightness(0.92) contrast(1.02); /* Deeper than --google-blue so white text on the fill still clears 4.5:1. */ --accent-solid: #2f6fd0; --on-accent: #ffffff; --accent-glow: rgba(76, 141, 251, 0.32); --accent-glow-strong: rgba(76, 141, 251, 0.45); --shadow-accent: 0 20px 40px rgba(76, 141, 251, 0.18); --pulse-ring: rgba(124, 176, 255, 0.35); --pulse-ring-fade: rgba(124, 176, 255, 0); --brand-gradient-h: linear-gradient(90deg, #4c8dfb, #35b566); --template-hover-bg: rgba(124, 176, 255, 0.12); --template-hover-border: rgba(124, 176, 255, 0.32); --valid-border: #40c07f; --valid-glow: rgba(64, 192, 127, 0.35); --invalid-border: #ff7a6e; --invalid-glow: rgba(255, 122, 110, 0.35); --btn-solid-bg: #e6edf5; --btn-solid-bg-hover: #ffffff; --btn-solid-fg: #111820; --focus-halo: rgba(124, 176, 255, 0.22); /* --- Bootstrap 5.3 bridge ------------------------------------- Bootstrap's dark theme re-themes body/border/subtle colours but leaves --bs-*-rgb at their light-mode values, so .text-primary, .text-success and friends stay tuned for a white page and go muddy here. Lift them, and pull Bootstrap's neutrals onto our cooler slate so its form controls match the surrounding cards. Only .text-* utilities use these RGBs in this app -- no solid .bg-* -- so raising them is safe. */ --bs-body-bg: #161c26; --bs-body-bg-rgb: 22, 28, 38; --bs-body-color: #e6edf5; --bs-body-color-rgb: 230, 237, 245; --bs-secondary-bg: #1c2431; --bs-secondary-bg-rgb: 28, 36, 49; --bs-tertiary-bg: #212b38; --bs-tertiary-bg-rgb: 33, 43, 56; --bs-border-color: #33404f; --bs-primary-rgb: 124, 176, 255; --bs-secondary-rgb: 154, 166, 181; --bs-success-rgb: 92, 214, 133; --bs-danger-rgb: 255, 138, 128; --bs-warning-rgb: 255, 212, 82; --bs-info-rgb: 106, 205, 232; --switch-bg: rgba(28, 36, 49, 0.72); --switch-border: rgba(255, 255, 255, 0.12); --switch-thumb: #313d4e; --switch-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07); --switch-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); --switch-icon: #8b9bb0; --switch-icon-hover: #e6edf5; --switch-icon-active: #ffffff; } /* Hardcoded in Bootstrap's class body, so the --bs-primary-rgb lift above does not reach it. */ [data-theme="dark"] .btn-outline-primary { --bs-btn-color: #7cb0ff; --bs-btn-border-color: rgba(124, 176, 255, 0.55); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #2f6fd0; --bs-btn-hover-border-color: #2f6fd0; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #2f6fd0; --bs-btn-active-border-color: #2f6fd0; --bs-btn-disabled-color: rgba(124, 176, 255, 0.55); --bs-btn-disabled-border-color: rgba(124, 176, 255, 0.30); } /* ------------------------------------------------------------------ */ /* Shared page canvas */ /* ------------------------------------------------------------------ */ body { background: radial-gradient(circle at top right, var(--app-glow-1), transparent 50%), radial-gradient(circle at top left, var(--app-glow-2), transparent 50%), var(--app-bg); background-attachment: fixed; color: var(--text); } /* Pages hosting the fixed switch need headroom on narrow screens, or top-centred content slides underneath the floating control. */ @media (max-width: 575.98px) { .page-top-safe { margin-top: 4.5rem !important; } } /* Theme-aware stand-in for Bootstrap's fixed .bg-white utility. */ .bg-surface { background-color: var(--surface) !important; } /* Brand marks that are dark-on-transparent get a light plate in dark mode. */ .brand-logo { background: var(--logo-plate); padding: var(--logo-plate-pad); border-radius: 12px; box-sizing: content-box; box-shadow: inset 0 0 0 1px var(--logo-plate-ring); transition: background 0.3s ease, padding 0.3s ease; } /* ------------------------------------------------------------------ */ /* Theme switch */ /* ------------------------------------------------------------------ */ .theme-switch { --ts-option: 34px; --ts-height: 30px; --ts-pad: 4px; position: fixed; top: 1rem; right: 1.25rem; z-index: 1080; display: inline-flex; align-items: center; padding: var(--ts-pad); border-radius: 999px; background: var(--switch-bg); border: 1px solid var(--switch-border); box-shadow: var(--switch-shadow); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); /* Isolate from page transforms/animations that would drag it along. */ isolation: isolate; } /* For pages that already have something anchored top-right. */ .theme-switch--inline { position: static; flex: 0 0 auto; } .theme-switch__thumb { position: absolute; top: var(--ts-pad); left: var(--ts-pad); width: var(--ts-option); height: var(--ts-height); border-radius: 999px; background: var(--switch-thumb); box-shadow: var(--switch-thumb-shadow); transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1); pointer-events: none; } .theme-switch[data-active="light"] .theme-switch__thumb { transform: translateX(0); } .theme-switch[data-active="system"] .theme-switch__thumb { transform: translateX(var(--ts-option)); } .theme-switch[data-active="dark"] .theme-switch__thumb { transform: translateX(calc(var(--ts-option) * 2)); } .theme-switch__option { position: relative; z-index: 1; width: var(--ts-option); height: var(--ts-height); display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none; background: none; color: var(--switch-icon); cursor: pointer; border-radius: 999px; transition: color 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } .theme-switch__option:hover { color: var(--switch-icon-hover); } .theme-switch__option:active { transform: scale(0.92); } .theme-switch__option[aria-checked="true"] { color: var(--switch-icon-active); } .theme-switch__option:focus-visible { outline: 2px solid var(--google-blue); outline-offset: 2px; } .theme-switch__option svg { width: 16px; height: 16px; display: block; } @media (prefers-reduced-motion: reduce) { .theme-switch__thumb, .theme-switch__option, .brand-logo { transition: none; } }