/* ========================================================= ELARA brand theme (card #60) Palette: "ELARA Brand Colours" (Duane, 6 Sep 2026). Font: Poppins. Pages pick a token set with . Page CSS uses only the semantic tokens below, never raw colours, so switching themes (#61) is a change of attribute, not of CSS. Contrast (WCAG 2.1), checked for #61 on bg, surface, panel, panel-2 and lavender tints: every text token (text, muted, muted2, *-ink, ok, warn, danger) is at least 4.6:1 in both themes; the tightest pairs are on panel-2. on-accent on marine is 7.3:1. --accent, --accent-2 and --highlight are for fills, borders and glows; use the *-ink tokens when the colour carries text. ========================================================= */ /* Poppins, served locally (SIL OFL 1.1, see static/fonts/poppins/OFL.txt) so the brand font never depends on a third-party request. Latin + Latin Extended. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins/poppins-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins/poppins-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand palette ("Japanese garden") */ --elara-marine: #6fc8cc; --elara-purple: #58527b; --elara-dark-accent: #302546; --elara-light-bg: #f5f0fd; --elara-dark-bg: #2f2847; --elara-pink: #e91f64; /* rgba(233, 31, 100, 1) */ /* Text on surfaces that stay dark in either theme (sidebars, purple buttons). White on --elara-purple 7.2:1, on --elara-dark-accent 14.2:1; muted on dark accent 9.2:1. */ --on-dark: #ffffff; --on-dark-muted: rgb(255 255 255 / 0.78); --on-dark-rgb: 255 255 255; --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } :root, :root[data-theme="dark"] { color-scheme: dark; --bg: var(--elara-dark-bg); --bg-rgb: 47 40 71; --surface: #3a3354; --panel: rgb(255 255 255 / 0.06); --panel-2: rgb(255 255 255 / 0.09); --border: rgb(255 255 255 / 0.10); --border-strong: rgb(255 255 255 / 0.18); /* Neutral tint for hovers, dividers and scrims: rgb(var(--tint-rgb) / ) */ --tint-rgb: 255 255 255; --text: rgb(255 255 255 / 0.92); --muted: rgb(255 255 255 / 0.72); --muted2: rgb(255 255 255 / 0.66); --accent: var(--elara-marine); --accent-rgb: 111 200 204; --accent-ink: var(--elara-marine); --on-accent: var(--elara-dark-accent); --accent-2: var(--elara-purple); --accent-2-rgb: 88 82 123; --accent-2-ink: #c4bee6; --highlight: var(--elara-pink); --highlight-rgb: 233 31 100; --highlight-ink: #ffa6c4; --danger: #ffa6c4; --danger-rgb: 233 31 100; --ok: #7bd88f; --ok-rgb: 123 216 143; --warn: #f2c26b; --warn-rgb: 242 194 107; --glow-1: rgb(var(--accent-rgb) / 0.18); --glow-2: rgb(var(--highlight-rgb) / 0.12); --shadow: 0 14px 34px rgb(0 0 0 / 0.28); --scrim: rgb(20 16 34 / 0.62); --well: rgb(0 0 0 / 0.20); --shadow-rgb: 0 0 0; /* Data series (charts): distinct hues, brand first */ --series-1: #b3acd9; --series-2: var(--elara-marine); --series-3: #ff8fb4; --series-4: #f2c26b; } :root[data-theme="light"] { color-scheme: light; --bg: var(--elara-light-bg); --bg-rgb: 245 240 253; --surface: #ffffff; --panel: rgb(48 37 70 / 0.04); --panel-2: rgb(48 37 70 / 0.07); --border: rgb(48 37 70 / 0.12); --border-strong: rgb(48 37 70 / 0.22); --tint-rgb: 48 37 70; --text: var(--elara-dark-accent); --muted: #4a4468; --muted2: var(--elara-purple); --accent: var(--elara-marine); --accent-rgb: 111 200 204; --accent-ink: #22676b; --on-accent: var(--elara-dark-accent); --accent-2: var(--elara-purple); --accent-2-rgb: 88 82 123; --accent-2-ink: var(--elara-purple); --highlight: var(--elara-pink); --highlight-rgb: 233 31 100; --highlight-ink: #b3104a; --danger: #b3104a; --danger-rgb: 233 31 100; --ok: #19692f; --ok-rgb: 31 122 61; --warn: #8a5a00; --warn-rgb: 138 90 0; --glow-1: rgb(var(--accent-rgb) / 0.22); --glow-2: rgb(var(--highlight-rgb) / 0.08); --shadow: 0 14px 34px rgb(48 37 70 / 0.10); --scrim: rgb(48 37 70 / 0.45); --well: rgb(48 37 70 / 0.05); --shadow-rgb: 48 37 70; --series-1: var(--elara-purple); --series-2: #3fa9ae; --series-3: var(--elara-pink); --series-4: #e2a336; } html, body { font-family: var(--font-sans); } /* Form controls don't inherit fonts by default (the composer showed monospace). */ button, input, select, textarea { font-family: inherit; } /* Page glows are painted once; past them the page colour continues instead of the gradient tile repeating as a visible band on long pages. */ html { background-color: var(--bg); } body { background-repeat: no-repeat; } /* Logos: templates carry both variants; the theme shows the right one. */ :root[data-theme="light"] .only-dark, :root:not([data-theme="light"]) .only-light { display: none !important; } /* Maker credit (APT) */ .apt-credit { display: inline-flex; align-items: center; gap: 10px; color: var(--muted2); font-size: 12px; text-decoration: none; } .apt-credit img { height: 40px; width: auto; } /* Dark / light switch (#61) */ .themeToggle { position: fixed; right: 18px; bottom: 18px; z-index: 1000; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .themeToggle:hover { border-color: var(--accent); } .themeToggle:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }