/** * PUBLIC WEBSITE THEME BRIDGE * ----------------------------------------- * The saved Site Settings > Frontend theme value is written to * by public_layout.php. * * Every public component consumes these variables through public.css, so the * selected theme updates buttons, icons, panels, borders, tinted surfaces, * hero accents, bubbles, shadows and footer shades together. */ /* Safe fallback while settings load or for an unknown legacy value. */ :root { --site-accent: #0f766e; --site-accent-strong: #115e59; --site-accent-bright: #14b8a6; --site-accent-rgb: 15, 118, 110; --site-accent-contrast: #ffffff; --site-page: #f1f7f5; --site-panel: #ffffff; --site-panel-soft: #e8f4f1; --site-border: #cce2dc; --site-text: #172126; --site-muted: #5f7076; --site-hero-copy: #ffffff; --site-hero-text: #172126; --site-hero-muted: #5f7076; --site-footer: #101c1a; --site-footer-panel: #142824; --site-footer-border: #285049; --site-footer-text: #eef8f6; --site-footer-muted: #a3bbb5; --site-footer-faint: #78958e; --site-shadow-rgb: 15, 23, 42; --site-success: #15803d; --site-success-strong: #166534; --site-danger: #b42318; --site-danger-strong: #991b1b; --site-highlight: rgba(255, 255, 255, .82); --site-highlight-soft: rgba(255, 255, 255, .22); --site-bubble-opacity: .42; --site-bubble-blur: 0px; --site-bubble-1: color-mix(in srgb, var(--site-accent) 30%, transparent); --site-bubble-2: color-mix(in srgb, var(--site-accent-bright) 23%, transparent); --site-bubble-3: color-mix(in srgb, var(--site-panel) 82%, transparent); } /* Lime Noir */ :root[data-public-theme="lime-noir"] { --site-accent: #4d7c0f; --site-accent-strong: #3f6212; --site-accent-bright: #a3e635; --site-accent-rgb: 77, 124, 15; --site-accent-contrast: #ffffff; --site-page: #f4f8ed; --site-panel: #ffffff; --site-panel-soft: #ebf4dc; --site-border: #d0e1b6; --site-text: #192117; --site-muted: #64705f; --site-hero-copy: #ffffff; --site-hero-text: #192117; --site-hero-muted: #64705f; --site-footer: #11170d; --site-footer-panel: #1a2511; --site-footer-border: #3c5428; --site-footer-text: #f4f8ed; --site-footer-muted: #b3c2a5; --site-footer-faint: #829474; --site-bubble-opacity: .48; } /* Emerald */ :root[data-public-theme="emerald"] { --site-accent: #047857; --site-accent-strong: #065f46; --site-accent-bright: #34d399; --site-accent-rgb: 4, 120, 87; --site-accent-contrast: #ffffff; --site-page: #eef8f4; --site-panel: #ffffff; --site-panel-soft: #e2f4ed; --site-border: #c2e3d5; --site-text: #14231e; --site-muted: #5c7169; --site-hero-copy: #ffffff; --site-hero-text: #14231e; --site-hero-muted: #5c7169; --site-footer: #0b1813; --site-footer-panel: #10271e; --site-footer-border: #285444; --site-footer-text: #effaf6; --site-footer-muted: #a2bdb3; --site-footer-faint: #75968a; --site-bubble-opacity: .46; } /* Ocean Blue */ :root[data-public-theme="ocean"] { --site-accent: #2563eb; --site-accent-strong: #1d4ed8; --site-accent-bright: #38bdf8; --site-accent-rgb: 37, 99, 235; --site-accent-contrast: #ffffff; --site-page: #eef4fb; --site-panel: #ffffff; --site-panel-soft: #e3edfa; --site-border: #c5d7ee; --site-text: #15202e; --site-muted: #5d6d80; --site-hero-copy: #ffffff; --site-hero-text: #15202e; --site-hero-muted: #5d6d80; --site-footer: #0b1420; --site-footer-panel: #101f31; --site-footer-border: #294768; --site-footer-text: #f0f6ff; --site-footer-muted: #a5b7cc; --site-footer-faint: #788fa9; --site-bubble-opacity: .45; } /* Crimson */ :root[data-public-theme="crimson"] { --site-accent: #dc2626; --site-accent-strong: #b91c1c; --site-accent-bright: #fb7185; --site-accent-rgb: 220, 38, 38; --site-accent-contrast: #ffffff; --site-page: #fbf1f1; --site-panel: #ffffff; --site-panel-soft: #fae5e5; --site-border: #edc8c8; --site-text: #261718; --site-muted: #786263; --site-hero-copy: #ffffff; --site-hero-text: #261718; --site-hero-muted: #786263; --site-footer: #1c0d0f; --site-footer-panel: #2c1216; --site-footer-border: #633039; --site-footer-text: #fff2f3; --site-footer-muted: #c6a5a8; --site-footer-faint: #9b777c; --site-bubble-opacity: .44; } /* Amber */ :root[data-public-theme="amber"] { --site-accent: #b45309; --site-accent-strong: #92400e; --site-accent-bright: #fbbf24; --site-accent-rgb: 180, 83, 9; --site-accent-contrast: #ffffff; --site-page: #fbf6ec; --site-panel: #ffffff; --site-panel-soft: #f8ecd4; --site-border: #ead4aa; --site-text: #271f14; --site-muted: #776b58; --site-hero-copy: #ffffff; --site-hero-text: #271f14; --site-hero-muted: #776b58; --site-footer: #1b1408; --site-footer-panel: #2a210e; --site-footer-border: #635029; --site-footer-text: #fff8e9; --site-footer-muted: #c8b99a; --site-footer-faint: #9c8966; --site-bubble-opacity: .46; } /* Royal Violet */ :root[data-public-theme="violet"] { --site-accent: #7c3aed; --site-accent-strong: #6d28d9; --site-accent-bright: #a78bfa; --site-accent-rgb: 124, 58, 237; --site-accent-contrast: #ffffff; --site-page: #f5f1fb; --site-panel: #ffffff; --site-panel-soft: #eee6fa; --site-border: #d9c9ef; --site-text: #21192b; --site-muted: #70647d; --site-hero-copy: #ffffff; --site-hero-text: #21192b; --site-hero-muted: #70647d; --site-footer: #150d1e; --site-footer-panel: #22142f; --site-footer-border: #503563; --site-footer-text: #f8f1ff; --site-footer-muted: #bba8c9; --site-footer-faint: #9079a1; --site-bubble-opacity: .45; } /* Dark-mode surfaces still retain the selected public accent. */ :root[data-bs-theme="dark"] { color-scheme: dark; --site-page: #0b1216; --site-panel: #111a20; --site-panel-soft: #142127; --site-border: #27343b; --site-text: #eef5f6; --site-muted: #9aabb2; --site-hero-copy: #111a20; --site-hero-text: #eef5f6; --site-hero-muted: #9aabb2; --site-footer: #080d10; --site-footer-panel: #111a20; --site-footer-border: #27343b; --site-footer-text: #eef5f6; --site-footer-muted: #9aabb2; --site-footer-faint: #74868e; --site-shadow-rgb: 0, 0, 0; --site-success: #4ade80; --site-success-strong: #22c55e; --site-danger: #f87171; --site-danger-strong: #ef4444; --site-highlight: rgba(255, 255, 255, .24); --site-highlight-soft: rgba(255, 255, 255, .13); --site-bubble-opacity: .46; --site-bubble-1: rgba(255, 255, 255, .055); --site-bubble-2: rgba(255, 255, 255, .12); --site-bubble-3: rgba(255, 255, 255, .28); } :root[data-bs-theme="dark"][data-public-theme="lime-noir"] { --site-accent: #84cc16; --site-accent-strong: #65a30d; --site-accent-bright: #bef264; --site-accent-rgb: 132, 204, 22; --site-accent-contrast: #14200a; --site-page: #091007; --site-panel: #111a0d; --site-panel-soft: #182411; --site-border: #334526; } :root[data-bs-theme="dark"][data-public-theme="emerald"] { --site-accent: #10b981; --site-accent-strong: #0ea875; --site-accent-bright: #6ee7b7; --site-accent-rgb: 16, 185, 129; --site-accent-contrast: #06241a; --site-page: #07110d; --site-panel: #0d1c16; --site-panel-soft: #12271e; --site-border: #285043; } :root[data-bs-theme="dark"][data-public-theme="ocean"] { --site-accent: #60a5fa; --site-accent-strong: #3b82f6; --site-accent-bright: #7dd3fc; --site-accent-rgb: 96, 165, 250; --site-accent-contrast: #081729; --site-page: #07101a; --site-panel: #0d1928; --site-panel-soft: #122238; --site-border: #294766; } :root[data-bs-theme="dark"][data-public-theme="crimson"] { --site-accent: #fb7185; --site-accent-strong: #ef4444; --site-accent-bright: #fda4af; --site-accent-rgb: 251, 113, 133; --site-accent-contrast: #2b0a10; --site-page: #13090b; --site-panel: #201013; --site-panel-soft: #2b151a; --site-border: #5d3037; } :root[data-bs-theme="dark"][data-public-theme="amber"] { --site-accent: #fbbf24; --site-accent-strong: #f59e0b; --site-accent-bright: #fde68a; --site-accent-rgb: 251, 191, 36; --site-accent-contrast: #2a1903; --site-page: #120e06; --site-panel: #1e170a; --site-panel-soft: #2a210e; --site-border: #5d4b27; } :root[data-bs-theme="dark"][data-public-theme="violet"] { --site-accent: #a78bfa; --site-accent-strong: #956ff7; --site-accent-bright: #c4b5fd; --site-accent-rgb: 167, 139, 250; --site-accent-contrast: #180c2d; --site-page: #0e0914; --site-panel: #181020; --site-panel-soft: #22162e; --site-border: #4b355d; } /* * DASHBOARD LIGHT/DARK PARITY * ------------------------------------------------------------ * Public appearance now uses the same neutral surface system as the dashboard. * Accent selection remains independent, but mode changes no longer recolour * every panel. This mirrors app.css: white/soft-grey in light mode and * #111a20/#0b1216 surfaces in dark mode. */ :root[data-bs-theme="light"][data-public-theme] { color-scheme: light; --site-page: #f3f6f8; --site-panel: #ffffff; --site-panel-soft: #f3f6f8; --site-border: #dfe5e8; --site-text: #172126; --site-muted: #65737b; --site-hero-copy: #ffffff; --site-hero-text: #172126; --site-hero-muted: #65737b; --site-footer: #111a20; --site-footer-panel: #142127; --site-footer-border: #27343b; --site-footer-text: #eef5f6; --site-footer-muted: #9aabb2; --site-footer-faint: #74868e; --site-shadow-rgb: 15, 23, 42; --site-success: #15803d; --site-success-strong: #166534; --site-danger: #b42318; --site-danger-strong: #991b1b; --site-highlight: rgba(255, 255, 255, .82); --site-highlight-soft: rgba(255, 255, 255, .22); --site-bubble-opacity: .38; } :root[data-bs-theme="dark"][data-public-theme] { color-scheme: dark; --site-page: #0b1216; --site-panel: #111a20; --site-panel-soft: #142127; --site-border: #27343b; --site-text: #eef5f6; --site-muted: #9aabb2; --site-hero-copy: #111a20; --site-hero-text: #eef5f6; --site-hero-muted: #9aabb2; --site-footer: #0b1216; --site-footer-panel: #111a20; --site-footer-border: #27343b; --site-footer-text: #eef5f6; --site-footer-muted: #9aabb2; --site-footer-faint: #74868e; --site-shadow-rgb: 0, 0, 0; --site-success: #4ade80; --site-success-strong: #22c55e; --site-danger: #f87171; --site-danger-strong: #ef4444; --site-highlight: rgba(255, 255, 255, .22); --site-highlight-soft: rgba(255, 255, 255, .10); --site-bubble-opacity: .48; --site-bubble-1: rgba(255, 255, 255, .055); --site-bubble-2: rgba(255, 255, 255, .12); --site-bubble-3: rgba(255, 255, 255, .26); } /* The dashboard keeps the selected accent unchanged when brightness changes. */ :root[data-bs-theme][data-public-theme="lime-noir"] { --site-accent: #4d7c0f; --site-accent-strong: #3f6212; --site-accent-bright: #a3e635; --site-accent-rgb: 77, 124, 15; --site-accent-contrast: #ffffff; } :root[data-bs-theme][data-public-theme="emerald"] { --site-accent: #047857; --site-accent-strong: #065f46; --site-accent-bright: #34d399; --site-accent-rgb: 4, 120, 87; --site-accent-contrast: #ffffff; } :root[data-bs-theme][data-public-theme="ocean"] { --site-accent: #2563eb; --site-accent-strong: #1d4ed8; --site-accent-bright: #38bdf8; --site-accent-rgb: 37, 99, 235; --site-accent-contrast: #ffffff; } :root[data-bs-theme][data-public-theme="crimson"] { --site-accent: #dc2626; --site-accent-strong: #b91c1c; --site-accent-bright: #fb7185; --site-accent-rgb: 220, 38, 38; --site-accent-contrast: #ffffff; } :root[data-bs-theme][data-public-theme="amber"] { --site-accent: #b45309; --site-accent-strong: #92400e; --site-accent-bright: #fbbf24; --site-accent-rgb: 180, 83, 9; --site-accent-contrast: #ffffff; } :root[data-bs-theme][data-public-theme="violet"] { --site-accent: #7c3aed; --site-accent-strong: #6d28d9; --site-accent-bright: #a78bfa; --site-accent-rgb: 124, 58, 237; --site-accent-contrast: #ffffff; }