/* ============================================================
VILLA IMPERIAL — ACCENT PALETTES + THEME SWITCHER WIDGET
------------------------------------------------------------
Load AFTER theme.css:
HOW IT WORKS
------------
js/theme-switcher.js puts two attributes on :
data-theme="light" | "dark"
data-accent="brass" | "emerald" | "ocean" | "indigo" | "rose" | "slate"
theme.css owns the neutrals (page background, text, borders) for
light and dark. This file owns the ACCENT only — the one colour
used for primary buttons, links, active nav, focus rings and
highlights — and swaps it independently of light/dark.
So the two choices are genuinely independent:
any of 6 accents x either mode = 12 combinations.
LOAD ORDER IS MANDATORY (why this works without editing theme.css)
------------------------------------------------------------------
`:root` is a pseudo-class, so it scores in the class column:
theme.css :root -> (0,1,0)
this file [data-accent="x"] -> (0,1,0)
theme.css :root[data-theme="dark"] -> (0,2,0)
this file [data-theme="dark"][data-accent=x] -> (0,2,0)
Each pair TIES on specificity. This file wins purely because it
is loaded second — so it MUST come after theme.css in the .
Swap the two tags and the accent picker silently stops
working while everything else still looks fine, which is a
miserable thing to debug. Keep the order.
With no JS and no attributes set, theme.css's own brass values
apply and dark still follows the OS via prefers-color-scheme.
Nothing breaks; you just don't get the picker.
TO ADD YOUR OWN COLOUR
----------------------
1. Copy one light block and one dark block below, rename the
value in [data-accent="..."].
2. Add the same name to ACCENTS in js/theme-switcher.js.
That is all — the bridge rule picks it up automatically.
============================================================ */
/* ============================================================
1. BRIDGE
Maps the accent tokens onto every name the rest of the system
already uses, so a palette only has to declare six values.
Listed once for all accents, in both modes.
============================================================ */
[data-accent="brass"],
[data-accent="emerald"],
[data-accent="ocean"],
[data-accent="indigo"],
[data-accent="rose"],
[data-accent="slate"],
[data-theme="dark"][data-accent="brass"],
[data-theme="dark"][data-accent="emerald"],
[data-theme="dark"][data-accent="ocean"],
[data-theme="dark"][data-accent="indigo"],
[data-theme="dark"][data-accent="rose"],
[data-theme="dark"][data-accent="slate"] {
/* internal names used by theme.css components */
--vi-brass: var(--vi-accent);
--vi-brass-hover: var(--vi-accent-hover);
--vi-brass-active: var(--vi-accent-active);
--vi-brass-soft: var(--vi-accent-soft);
--vi-brass-ring: rgba(var(--vi-accent-rgb), 0.30);
--vi-on-accent: var(--vi-accent-on);
/* Bootstrap 5.3 bridge */
--bs-primary: var(--vi-accent);
--bs-primary-rgb: var(--vi-accent-rgb);
--bs-link-color: var(--vi-accent-hover);
--bs-link-color-rgb: var(--vi-accent-rgb);
--bs-link-hover-color: var(--vi-accent-active);
/* legacy aliases referenced inline by index.php / pages */
--primary-main: var(--vi-accent);
--primary-dark: var(--vi-accent-active);
--primary-light: var(--vi-accent-hover);
--primary-lighter: var(--vi-accent-soft);
--primary-color: var(--vi-accent);
--gradient-primary: linear-gradient(135deg,
var(--vi-accent) 0%,
var(--vi-accent-active) 100%);
}
/* ============================================================
2. PALETTES — LIGHT
Every base below clears WCAG AA (>= 4.5:1) against white, so
button labels stay readable. The old #b08344 brass sat at
about 3.2:1, which was too light for text at normal weight.
============================================================ */
[data-accent="brass"] {
--vi-accent: #8c6630;
--vi-accent-rgb: 140, 102, 48;
--vi-accent-hover: #7a5a2a;
--vi-accent-active: #674c23;
--vi-accent-soft: #f6efe3;
--vi-accent-on: #ffffff;
}
[data-accent="emerald"] {
--vi-accent: #2f7d5a;
--vi-accent-rgb: 47, 125, 90;
--vi-accent-hover: #276a4c;
--vi-accent-active: #1f573e;
--vi-accent-soft: #e6f3ec;
--vi-accent-on: #ffffff;
}
[data-accent="ocean"] {
--vi-accent: #2f6f9f;
--vi-accent-rgb: 47, 111, 159;
--vi-accent-hover: #275e88;
--vi-accent-active: #204e71;
--vi-accent-soft: #e6f0f7;
--vi-accent-on: #ffffff;
}
[data-accent="indigo"] {
--vi-accent: #5a53c9;
--vi-accent-rgb: 90, 83, 201;
--vi-accent-hover: #4c46ac;
--vi-accent-active: #3f3a90;
--vi-accent-soft: #ecebfa;
--vi-accent-on: #ffffff;
}
[data-accent="rose"] {
--vi-accent: #b4436b;
--vi-accent-rgb: 180, 67, 107;
--vi-accent-hover: #9b3a5c;
--vi-accent-active: #82304d;
--vi-accent-soft: #fbeaf0;
--vi-accent-on: #ffffff;
}
[data-accent="slate"] {
--vi-accent: #4a5a6a;
--vi-accent-rgb: 74, 90, 106;
--vi-accent-hover: #3e4c59;
--vi-accent-active: #333e49;
--vi-accent-soft: #eceff2;
--vi-accent-on: #ffffff;
}
/* ============================================================
3. PALETTES — DARK
Lightened so they carry against the dark ground, with a dark
--vi-accent-on for text sitting on top of the accent.
============================================================ */
[data-theme="dark"][data-accent="brass"] {
--vi-accent: #cda05e;
--vi-accent-rgb: 205, 160, 94;
--vi-accent-hover: #dbb075;
--vi-accent-active: #e3bd8a;
--vi-accent-soft: #3a2f1e;
--vi-accent-on: #17140f;
}
[data-theme="dark"][data-accent="emerald"] {
--vi-accent: #6cc79a;
--vi-accent-rgb: 108, 199, 154;
--vi-accent-hover: #85d3ab;
--vi-accent-active: #9adcbb;
--vi-accent-soft: #163023;
--vi-accent-on: #0d1a13;
}
[data-theme="dark"][data-accent="ocean"] {
--vi-accent: #74b3e0;
--vi-accent-rgb: 116, 179, 224;
--vi-accent-hover: #8fc3e8;
--vi-accent-active: #a7d0ee;
--vi-accent-soft: #12293a;
--vi-accent-on: #0b1721;
}
[data-theme="dark"][data-accent="indigo"] {
--vi-accent: #9d97ee;
--vi-accent-rgb: 157, 151, 238;
--vi-accent-hover: #b0abf2;
--vi-accent-active: #c2bef6;
--vi-accent-soft: #232046;
--vi-accent-on: #12102b;
}
[data-theme="dark"][data-accent="rose"] {
--vi-accent: #ef8fae;
--vi-accent-rgb: 239, 143, 174;
--vi-accent-hover: #f3a4bd;
--vi-accent-active: #f7b9cc;
--vi-accent-soft: #3d1f2b;
--vi-accent-on: #24101a;
}
[data-theme="dark"][data-accent="slate"] {
--vi-accent: #9db1c4;
--vi-accent-rgb: 157, 177, 196;
--vi-accent-hover: #b0c1d1;
--vi-accent-active: #c3d0dd;
--vi-accent-soft: #1e2831;
--vi-accent-on: #10171d;
}
/* ============================================================
4. THEME SWITCHER WIDGET
Built by js/theme-switcher.js. Fixed bottom-right so it needs
no markup changes on any page.
============================================================ */
.vi-theme-fab {
position: fixed;
right: 18px;
bottom: 18px;
/* Bootstrap's scale: dropdown 1000, sticky 1020, fixed 1030,
modal-backdrop 1050, modal 1055, popover 1070, tooltip 1080.
1030 keeps the button above ordinary page content but BELOW
modals, so it does not float on top of an open dialog. */
z-index: 1030;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--vi-line);
border-radius: var(--vi-r-pill);
background: var(--vi-surface);
color: var(--vi-accent, var(--vi-brass));
box-shadow: var(--vi-shadow-md);
cursor: pointer;
padding: 0;
transition: background-color var(--vi-t-fast),
border-color var(--vi-t-fast),
box-shadow var(--vi-t-fast);
}
.vi-theme-fab:hover {
background: var(--vi-sunken);
border-color: var(--vi-accent, var(--vi-brass));
box-shadow: var(--vi-shadow-lg);
}
.vi-theme-fab svg { width: 19px; height: 19px; display: block; }
.vi-theme-panel {
position: fixed;
right: 18px;
bottom: 68px;
z-index: 1031; /* one above the button, still below modals */
width: 232px;
padding: 14px;
background: var(--vi-surface);
border: 1px solid var(--vi-line);
border-radius: var(--vi-r-lg);
box-shadow: var(--vi-shadow-xl);
font-family: var(--bs-font-sans-serif);
font-size: 13px;
color: var(--vi-text);
animation: viPanelIn 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes viPanelIn {
from { opacity: 0; transform: translateY(6px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.vi-theme-panel[hidden] { display: none !important; }
.vi-theme-label {
display: block;
font-size: 10px;
font-weight: 640;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--vi-text-dim);
margin: 0 0 7px;
}
.vi-theme-label + .vi-theme-label { margin-top: 15px; }
/* --- mode segmented control --- */
.vi-theme-modes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 3px;
background: var(--vi-sunken);
border-radius: var(--vi-r-md);
}
.vi-theme-mode {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 7px 2px;
border: none;
border-radius: var(--vi-r-sm);
background: transparent;
color: var(--vi-text-mid);
font-size: 10.5px;
font-weight: 560;
font-family: inherit;
cursor: pointer;
transition: background-color var(--vi-t-fast), color var(--vi-t-fast);
}
.vi-theme-mode svg { width: 15px; height: 15px; }
.vi-theme-mode:hover { background: var(--vi-line-soft); color: var(--vi-text); }
.vi-theme-mode[aria-checked="true"] {
background: var(--vi-surface);
color: var(--vi-accent, var(--vi-brass));
box-shadow: var(--vi-shadow-xs);
font-weight: 640;
}
/* --- accent swatches --- */
.vi-theme-accents {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.vi-theme-accent {
position: relative;
aspect-ratio: 1;
min-height: 26px;
border: 2px solid transparent;
border-radius: var(--vi-r-pill);
background: var(--vi-swatch);
cursor: pointer;
padding: 0;
transition: transform var(--vi-t-fast), box-shadow var(--vi-t-fast);
}
.vi-theme-accent:hover { transform: scale(1.12); }
.vi-theme-accent[aria-checked="true"] {
border-color: var(--vi-text);
box-shadow: 0 0 0 2px var(--vi-surface) inset;
}
/* Swatch colours track the CURRENT mode so the preview is honest. */
.vi-theme-accent[data-value="brass"] { --vi-swatch: #9a7038; }
.vi-theme-accent[data-value="emerald"] { --vi-swatch: #2f7d5a; }
.vi-theme-accent[data-value="ocean"] { --vi-swatch: #2f6f9f; }
.vi-theme-accent[data-value="indigo"] { --vi-swatch: #5a53c9; }
.vi-theme-accent[data-value="rose"] { --vi-swatch: #b4436b; }
.vi-theme-accent[data-value="slate"] { --vi-swatch: #4a5a6a; }
[data-theme="dark"] .vi-theme-accent[data-value="brass"] { --vi-swatch: #cda05e; }
[data-theme="dark"] .vi-theme-accent[data-value="emerald"] { --vi-swatch: #6cc79a; }
[data-theme="dark"] .vi-theme-accent[data-value="ocean"] { --vi-swatch: #74b3e0; }
[data-theme="dark"] .vi-theme-accent[data-value="indigo"] { --vi-swatch: #9d97ee; }
[data-theme="dark"] .vi-theme-accent[data-value="rose"] { --vi-swatch: #ef8fae; }
[data-theme="dark"] .vi-theme-accent[data-value="slate"] { --vi-swatch: #9db1c4; }
/* Keep it off printed reports and out of the way on small screens. */
@media print {
.vi-theme-fab, .vi-theme-panel { display: none !important; }
}
@media (max-width: 576px) {
.vi-theme-fab { right: 12px; bottom: 12px; width: 38px; height: 38px; }
.vi-theme-panel { right: 12px; bottom: 58px; width: calc(100vw - 24px); max-width: 262px; }
}