/* * With Propshaft, assets are served efficiently without preprocessing steps. * Keep global CSS minimal; prefer Tailwind utility classes in views. */ :root { --campaign-accent: #fbbf24; /* amber-400 */ } /* * Theme mode toggle * * Default behavior (no stored user preference): follow OS preference * via `prefers-color-scheme`. * * If the user toggles a theme, we add `.theme-light` or `.theme-dark` * to and persist to localStorage. */ .theme-dark { color-scheme: dark; } /* Amber pill appearance in dark mode - more visible yellow */ .theme-dark .bg-amber-400\/10 { background-color: rgb(251 191 36 / 0.20) !important; } .theme-dark .border-amber-400\/30 { border-color: rgb(251 191 36 / 0.40) !important; } .theme-dark .bg-amber-400\/15 { background-color: rgb(251 191 36 / 0.25) !important; } .theme-light { color-scheme: light; } .theme-light .bg-slate-950 { background-color: rgb(248 250 252) !important; } .theme-light .bg-slate-950\/80 { background-color: rgb(248 250 252 / 0.8) !important; } .theme-light .bg-slate-900 { background-color: rgb(241 245 249) !important; } .theme-light .bg-slate-900\/20 { background-color: rgb(15 23 42 / 0.04) !important; } .theme-light .bg-slate-900\/30 { background-color: rgb(15 23 42 / 0.06) !important; } .theme-light .bg-slate-900\/40 { background-color: rgb(15 23 42 / 0.08) !important; } .theme-light .bg-slate-800 { background-color: rgb(226 232 240) !important; } .theme-light .bg-slate-700 { background-color: rgb(203 213 225) !important; } /* Hover background utilities need explicit overrides too (Tailwind encodes `:` in class names). */ .theme-light .hover\:bg-slate-900:hover { background-color: rgb(15 23 42 / 0.06) !important; } .theme-light .hover\:bg-slate-700:hover { background-color: rgb(15 23 42 / 0.10) !important; } .theme-light .border-slate-800 { border-color: rgb(226 232 240) !important; } .theme-light .border-slate-700 { border-color: rgb(203 213 225) !important; } .theme-light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(226 232 240) !important; } .theme-light .text-white { color: rgb(15 23 42) !important; } .theme-light .hover\:text-white:hover { color: rgb(15 23 42) !important; } .theme-light .text-slate-50 { color: rgb(15 23 42) !important; } .theme-light .text-slate-100 { color: rgb(15 23 42) !important; } .theme-light .text-slate-200 { color: rgb(30 41 59) !important; } .theme-light .text-slate-300 { color: rgb(51 65 85) !important; } .theme-light .text-slate-400 { color: rgb(71 85 105) !important; } .theme-light .text-slate-500 { color: rgb(100 116 139) !important; } .theme-light .bg-emerald-950\/30 { background-color: rgb(16 185 129 / 0.12) !important; } .theme-light .border-emerald-700\/40 { border-color: rgb(16 185 129 / 0.25) !important; } .theme-light .text-emerald-100 { color: rgb(15 23 42) !important; } .theme-light .bg-rose-950\/30 { background-color: rgb(244 63 94 / 0.10) !important; } .theme-light .border-rose-700\/40 { border-color: rgb(244 63 94 / 0.25) !important; } .theme-light .text-rose-100 { color: rgb(15 23 42) !important; } /* Amber color overrides for cohesive appearance in light mode */ .theme-light .text-amber-200 { color: rgb(161 98 7) !important; /* yellow-800 - darker yellow matching button family */ } .theme-light .text-amber-300 { color: rgb(217 119 6) !important; /* amber-600 - cohesive with amber-400 buttons */ } .theme-light .hover\:text-amber-200:hover { color: rgb(133 77 14) !important; /* yellow-900 on hover */ } .theme-light .hover\:text-amber-300:hover { color: rgb(180 83 9) !important; /* amber-700 on hover */ } .theme-light .bg-amber-400\/10 { background-color: rgb(251 191 36 / 0.25) !important; /* amber-400 based - more visible yellow */ } .theme-light .border-amber-400\/30 { border-color: rgb(251 191 36 / 0.5) !important; /* amber-400 based - stronger border */ } .theme-light .bg-amber-400\/15 { background-color: rgb(251 191 36 / 0.30) !important; /* amber-400 based - more visible yellow */ } @media (prefers-color-scheme: light) { :root:not(.theme-dark):not(.theme-light) { color-scheme: light; } :root:not(.theme-dark):not(.theme-light) .bg-slate-950 { background-color: rgb(248 250 252) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-950\/80 { background-color: rgb(248 250 252 / 0.8) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-900 { background-color: rgb(241 245 249) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-900\/20 { background-color: rgb(15 23 42 / 0.04) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-900\/30 { background-color: rgb(15 23 42 / 0.06) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-900\/40 { background-color: rgb(15 23 42 / 0.08) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-800 { background-color: rgb(226 232 240) !important; } :root:not(.theme-dark):not(.theme-light) .bg-slate-700 { background-color: rgb(203 213 225) !important; } :root:not(.theme-dark):not(.theme-light) .hover\:bg-slate-900:hover { background-color: rgb(15 23 42 / 0.06) !important; } :root:not(.theme-dark):not(.theme-light) .hover\:bg-slate-700:hover { background-color: rgb(15 23 42 / 0.10) !important; } :root:not(.theme-dark):not(.theme-light) .border-slate-800 { border-color: rgb(226 232 240) !important; } :root:not(.theme-dark):not(.theme-light) .border-slate-700 { border-color: rgb(203 213 225) !important; } :root:not(.theme-dark):not(.theme-light) .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(226 232 240) !important; } :root:not(.theme-dark):not(.theme-light) .text-white { color: rgb(15 23 42) !important; } :root:not(.theme-dark):not(.theme-light) .hover\:text-white:hover { color: rgb(15 23 42) !important; } :root:not(.theme-dark):not(.theme-light) .text-slate-50 { color: rgb(15 23 42) !important; } :root:not(.theme-dark):not(.theme-light) .text-slate-100 { color: rgb(15 23 42) !important; } :root:not(.theme-dark):not(.theme-light) .text-slate-200 { color: rgb(30 41 59) !important; } :root:not(.theme-dark):not(.theme-light) .text-slate-300 { color: rgb(51 65 85) !important; } :root:not(.theme-dark):not(.theme-light) .text-slate-400 { color: rgb(71 85 105) !important; } :root:not(.theme-dark):not(.theme-light) .text-slate-500 { color: rgb(100 116 139) !important; } :root:not(.theme-dark):not(.theme-light) .bg-emerald-950\/30 { background-color: rgb(16 185 129 / 0.12) !important; } :root:not(.theme-dark):not(.theme-light) .border-emerald-700\/40 { border-color: rgb(16 185 129 / 0.25) !important; } :root:not(.theme-dark):not(.theme-light) .text-emerald-100 { color: rgb(15 23 42) !important; } :root:not(.theme-dark):not(.theme-light) .bg-rose-950\/30 { background-color: rgb(244 63 94 / 0.10) !important; } :root:not(.theme-dark):not(.theme-light) .border-rose-700\/40 { border-color: rgb(244 63 94 / 0.25) !important; } :root:not(.theme-dark):not(.theme-light) .text-rose-100 { color: rgb(15 23 42) !important; } /* Amber color overrides for cohesive appearance in light mode */ :root:not(.theme-dark):not(.theme-light) .text-amber-200 { color: rgb(161 98 7) !important; /* yellow-800 - darker yellow matching button family */ } :root:not(.theme-dark):not(.theme-light) .text-amber-300 { color: rgb(217 119 6) !important; /* amber-600 - cohesive with amber-400 buttons */ } :root:not(.theme-dark):not(.theme-light) .hover\:text-amber-200:hover { color: rgb(133 77 14) !important; /* yellow-900 on hover */ } :root:not(.theme-dark):not(.theme-light) .hover\:text-amber-300:hover { color: rgb(180 83 9) !important; /* amber-700 on hover */ } :root:not(.theme-dark):not(.theme-light) .bg-amber-400\/10 { background-color: rgb(251 191 36 / 0.25) !important; /* amber-400 based - more visible yellow */ } :root:not(.theme-dark):not(.theme-light) .border-amber-400\/30 { border-color: rgb(251 191 36 / 0.5) !important; /* amber-400 based - stronger border */ } :root:not(.theme-dark):not(.theme-light) .bg-amber-400\/15 { background-color: rgb(251 191 36 / 0.30) !important; /* amber-400 based - more visible yellow */ } :root:not(.theme-dark):not(.theme-light) .rich-text { color: rgb(30 41 59); } :root:not(.theme-dark):not(.theme-light) .rich-text h2 { color: rgb(15 23 42); } } @media (prefers-color-scheme: dark) { /* Amber pill appearance in dark mode - more visible yellow */ :root:not(.theme-dark):not(.theme-light) .bg-amber-400\/10 { background-color: rgb(251 191 36 / 0.20) !important; } :root:not(.theme-dark):not(.theme-light) .border-amber-400\/30 { border-color: rgb(251 191 36 / 0.40) !important; } :root:not(.theme-dark):not(.theme-light) .bg-amber-400\/15 { background-color: rgb(251 191 36 / 0.25) !important; } } /* Better defaults for rich text (ActionText / Trix output) */ .rich-text { color: rgb(226 232 240); } .rich-text a { color: var(--campaign-accent); text-decoration: underline; text-underline-offset: 3px; } .rich-text h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: white; } .theme-light .rich-text { color: rgb(30 41 59); } .theme-light .rich-text h2 { color: rgb(15 23 42); } .rich-text p { margin: 1rem 0; } .rich-text ul { margin: 1rem 0; padding-left: 1.25rem; list-style: disc; } .rich-text li { margin: 0.25rem 0; } /* * Theme toggle button: show correct icon and label based on current theme * This prevents flickering on page load by using CSS instead of waiting for JS * Uses Tailwind's hidden/block classes with CSS overrides for theme switching */ /* Default (dark mode): label shows "Dark" */ .theme-toggle-label::before { content: "Dark"; } /* Light mode: swap icon visibility and label text */ .theme-light .theme-toggle-dark-icon { display: none !important; } .theme-light .theme-toggle-light-icon { display: block !important; } .theme-light .theme-toggle-label::before { content: "Light"; } /* For users without stored preference, follow OS preference */ @media (prefers-color-scheme: light) { :root:not(.theme-dark):not(.theme-light) .theme-toggle-dark-icon { display: none !important; } :root:not(.theme-dark):not(.theme-light) .theme-toggle-light-icon { display: block !important; } :root:not(.theme-dark):not(.theme-light) .theme-toggle-label::before { content: "Light"; } }