/* ============================================================================= VITAMIC One — theme layer ----------------------------------------------------------------------------- THE ONLY FILE IN THIS PROJECT THAT CONTAINS A COLOUR. app.css reads these tokens and declares none of its own. If you find yourself typing a hex value anywhere else, it belongs here instead. (One deliberate exception is annotated in app.css: the accent picker's colour-wheel swatch, where the hues are the content rather than the theme.) v1.1 — DARK UI. The previous theme was a light app wearing dark chrome; this one is dark throughout: dark grey ground, light grey type and surfaces, orange as a sparse accent only. Orange now appears on roughly a dozen elements in the whole interface — the active nav item, the primary button, the focus ring, a small number of counts — and nowhere else. If you find yourself reaching for it a thirteenth time, use a grey. ⚠ CUSTOM PROPERTIES ONLY IN THIS FILE. theme.css loads BEFORE app.css, so a regular declaration here loses the cascade to any same-specificity rule there and silently does nothing. Component rules belong in app.css. ========================================================================== */ /* --- Inter ----------------------------------------------------------------- Self-hosted: no CDN request, no third-party dependency, no GDPR question. Variable font, one file per subset — latin covers DE/ES diacritics. -------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-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; } :root{ /* --- Grounds ------------------------------------------------------------- Four steps of dark grey, each a visible tick apart. Warm-biased by a hair so the orange accent sits on them rather than fighting them — a pure neutral grey next to #EA9A00 reads faintly blue. */ --bg-app: #1C1D1F; /* the page itself */ --bg-surface: #232528; /* cards, panels, the sidebar and topbar */ --bg-sunken: #191A1C; /* wells, table stripes, inset areas */ --bg-raised: #2A2D31; /* menus and anything floating above a surface */ /* --- Interaction --------------------------------------------------------- The fix for the invisible top-bar hover. The old theme reused --bg-app as the hover colour, which is invisible the moment a control sits on a surface of a similar tone. Hover is now its own token, defined as a step LIGHTER than any ground it can appear on, and it is what every hover rule in app.css reads. */ --hover: #303338; /* default hover on any surface */ --hover-strong: #3A3E44; /* pressed, or hover on an already-raised element */ --selected: #2F3237; /* current row / open menu item */ /* --- Type ---------------------------------------------------------------- */ --text: #E7E9EC; /* primary */ --text-2: #C2C6CC; /* secondary body */ --text-muted: #95999F; /* labels, metadata — still AA on --bg-surface */ --text-faint: #6E7278; /* placeholders, disabled */ --on-solid: #14151600;/* overridden below; see --on-accent */ --on-accent: #1C1D1F; /* text ON the orange — dark, not white */ /* --- Lines ---------------------------------------------------------------- */ --border: #34373C; /* the normal divider */ --border-2: #2B2E32; /* a quieter one, inside cards */ --border-firm: #43474D; /* inputs, anything that must read as an edge */ /* --- Accent --------------------------------------------------------------- Sampled from vitamic.com (Elementor global "accent"). Used sparingly: the active nav item, primary buttons, focus rings, a handful of counts. */ --accent: #EA9A00; --accent-hover: #FFB01F; /* brighter on hover — on dark, lighter reads as raised */ --accent-deep: #C77F00; /* pressed */ --accent-wash: #3A2E12; /* a dark amber tint for active rows */ --accent-line: #5C4715; /* border on an accent-washed element */ --gold: #E2C76F; /* --- Status --------------------------------------------------------------- Re-tuned for a dark ground: the light-theme versions were too dark to read here. Each has a wash (a dark tint of itself) and an ink (a light text). */ --ok: #4CAF7D; --ok-ink: #8FDCB4; --ok-wash: #16281F; --ok-line: #274434; --warn: #E0A106; --warn-ink: #F2C75B; --warn-wash: #2C2413; --danger: #E5695C; --danger-ink: #F2A49B; --danger-wash: #2E1A18; --danger-wash-2: #40211E; --danger-line: #563029; /* --- Chrome --------------------------------------------------------------- Kept as tokens because app.css and the share pages reference them, but on a dark UI the chrome is simply the surface tone rather than a contrast. */ --chrome: #232528; --chrome-deep: #191A1C; --chrome-soft: #2A2D31; --chrome-line: #34373C; --text-on-dark: #E7E9EC; --text-on-dark-2: #C2C6CC; --text-on-dark-faint: #95999F; /* --- Effects --------------------------------------------------------------- Shadows do very little on a dark ground; borders carry the separation, so these are deliberately restrained rather than removed. */ --scrim: rgba(0,0,0,.62); --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 6px 16px -4px rgba(0,0,0,.45); --shadow-lg: 0 20px 44px -12px rgba(0,0,0,.60); /* Tints for controls sitting ON a solid light fill — the bulk-action bar (background: --text) and the notice strip (the accent gradient). Both set colour to --on-solid, which is dark, so the fill must darken, not lighten. The old white tints were inherited from the light theme and were invisible once those bars became light themselves. */ --on-solid-tint: rgba(0,0,0,.10); --on-solid-tint-hover: rgba(0,0,0,.18); /* --- Type family ---------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --- Metrics --------------------------------------------------------------- */ --r: 8px; --sidebar-w: 248px; --sidebar-w-collapsed: 72px; --topbar-h: 60px; --brand-logo-h: 34px; } /* White text on a solid accent is wrong at this accent's lightness — #EA9A00 against white is about 2.1:1. Dark-on-orange is ~8:1 and is what the shopfront does too. `--on-solid` is what app.css reads for text on a filled button, so it points at the dark value. */ :root{ --on-solid: var(--on-accent); } /* ============================================================================= Scoped tokens ----------------------------------------------------------------------------- The old theme had the sidebar and topbar redefine half the palette, because they were dark islands in a light app. The whole app is dark now, so they inherit and only need their own ground. ========================================================================== */ .sidebar, .topbar{ --bg-surface: var(--chrome); --border: var(--chrome-line); } /* ============================================================================= Utilities ========================================================================== */ /* Show/hide. BOTH forms, deliberately: FFP shipped only [hidden], so any JS toggling a .hidden class failed silently. Brief §2 gotcha — keep both. !important means specificity is irrelevant, so this rule is safe here. */ .hidden, [hidden]{ display: none !important; }