/* Datum+Grain — the parent/internal-business brand theme (formerly named
"Nocturne" after its dark visual mood — renamed once there were two
real brands to name theme files after instead, see webapp/static/
default.css's own header comment for the base/theme split this is
part of). Scoped under [data-brand="datum-grain"] (set once,
server-side, on in webapp/templates/base.html — see
webapp/app.py's brand_for_path()) so it never has to be remembered per
-template. Applies to the configurator workspace and every pricing-
admin page — see brand_for_path()'s own prefix table for the exact
routing; NOT role-based (an admin previewing as trade/client, or a
client-role session opening /configurator directly, still gets this
theme — only the header's own text, fm.header_brand(), varies by role).
Tokens ported from the design handoff's own UXUI_improvements_assets/
19 sept - Datum+Grain Cabinet Configurator Redesign/design_handoff_
configurator_workspace/nocturne-styles.css, redefined under the SAME
custom-property names default.css declares so every shared component
that already consumes those tokens via var() picks up this palette for
free. Load order is load-bearing: this file's must come after
default.css's own (see base.html) — :root and [data-brand="..."] both
target the same element with identical (0,1,0) specificity, so
whichever loads last wins the tie for any token both declare. */
[data-brand="datum-grain"] {
/* Ground / surface / text */
--color-bg: #161826;
--color-bg-panel: #232532;
--color-bg-raised: #2b2e40;
--color-text: #e9e9ed;
--color-text-muted: #cfd3e5;
--color-text-faint: #9397ab;
--color-border: color-mix(in srgb, #e9e9ed 16%, transparent);
--color-border-strong: #595d6c;
/* Accent — this theme's single blurple accent */
--color-accent: #9184d9;
--color-accent-soft: color-mix(in srgb, #9184d9 14%, transparent);
--color-accent-ink: #d2cefd;
/* Status colors, re-tuned to stay readable on a dark ground */
--color-positive: #8fbb6f;
--color-negative: #e0836a;
--color-negative-bg: color-mix(in srgb, #e0836a 16%, transparent);
/* This theme's own tonal ramps */
--color-neutral-100: #f3f5fe;
--color-neutral-200: #e4e7f5;
--color-neutral-300: #cfd3e5;
--color-neutral-400: #b2b6ca;
--color-neutral-500: #9397ab;
--color-neutral-600: #75798c;
--color-neutral-700: #595d6c;
--color-neutral-800: #3f424d;
--color-neutral-900: #292b31;
--color-accent-100: #f5f4ff;
--color-accent-200: #e7e5fe;
--color-accent-300: #d2cefd;
--color-accent-400: #b5abfc;
--color-accent-500: #968ae0;
--color-accent-600: #796cbf;
--color-accent-700: #5d5294;
--color-accent-800: #423a6a;
--color-accent-900: #2b2741;
/* Real value, sourced from this theme's own origin handoff
(UXUI_improvements_assets/Pricing Admin Overhaul/design_handoff_
pricing_admin/_ds/styles.css) rather than invented — currently only
consumed by pricing-admin's quote builder (always this theme).
Requires the matching Inter in base.html; falls back to
system-ui if that ever goes missing. */
--font-heading: "Inter", system-ui, sans-serif;
/* Spacing scale — this theme's own 0.7x-density scale (2.8px base),
replacing default.css's 4px-base scale within this theme only. All 8
steps are defined (including 5/7, which the origin handoff skips)
since existing components reference every one of --space-1..8. */
--space-1: 2.8px;
--space-2: 5.6px;
--space-3: 8.4px;
--space-4: 11.2px;
--space-5: 14px;
--space-6: 16.8px;
--space-7: 19.6px;
--space-8: 22.4px;
/* --radius/--radius-lg already coincide with this theme's own
--radius-md/--radius-lg values (8px/14px) and --radius-sm is now
shared in default.css, so no override of any of the three is
needed here. */
/* Shadows — hairline edge + ambient darkness, tuned for this dark
ground (a light ground wants a different technique — see
theme-kora-kitchens.css's own comment). */
--shadow-sm: 0 0 0 1px var(--color-neutral-800);
--shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 0 0 1px var(--color-neutral-500), 0 16px 40px rgba(0, 0, 0, 0.65);
}
/* --- Structural overrides -------------------------------------------
A handful of shared components differ from this theme's spec in box
model, not just color, so a token override alone doesn't reproduce
them: .field/.input are boxed here vs. underline-style in Kora's
theme, and .btn is a rounded rect here vs. fully pill-shaped there.
Everything else rides the token overrides above for free (or lives
unscoped in default.css — see that file's own header comment for what
moved there during this theme's split from the old, brand-agnostic
"nocturne.css"). */
[data-brand="datum-grain"] .field input[type="text"],
[data-brand="datum-grain"] .field input[type="password"],
[data-brand="datum-grain"] .field input[type="number"],
[data-brand="datum-grain"] .field select {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg-panel);
padding: 6px 10px;
min-height: 36px;
transition: border-color 0.15s ease;
}
[data-brand="datum-grain"] .field input:hover,
[data-brand="datum-grain"] .field select:hover {
border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
[data-brand="datum-grain"] .field input:focus,
[data-brand="datum-grain"] .field select:focus {
border-color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
[data-brand="datum-grain"] .btn {
border-radius: var(--radius);
}
/* Icon rail (64px) + canvas (flexible) + pricing column — no more
--panel-left-width track now the old always-open rail is gone; flyout
panels are position:absolute (see default.css), so they never occupy a
grid track of their own. The pricing column collapses to a slim strip
(holding just its own toggle button) rather than vanishing entirely,
so it's always one click to bring back. */
[data-brand="datum-grain"] .app-shell {
grid-template-columns: 64px 1fr var(--panel-right-width);
/* One row that is exactly the shell's height — the default auto row grew
to fit the (now taller) icon rail, pushing it past the dark page area
on a short window. */
grid-template-rows: minmax(0, 1fr);
position: relative;
transition: grid-template-columns 0.15s ease;
}
[data-brand="datum-grain"] .app-shell:has(.panel-right-collapsed) {
grid-template-columns: 64px 1fr 36px;
}
/* Function view still collapses the CENTRE panel's own inner padding
(panel-center-fullscreen), but the icon rail and pricing column both
stay visible/reachable (confirmed with the user), so default.css's own
.app-shell:has(.panel-center-fullscreen) 1-column collapse must NOT
apply here; these two rules (higher specificity via the extra
[data-brand] ancestor, so they always win over that base rule
regardless of source order) restore the normal rail+canvas+pricing
grid, including its own collapsed-pricing-column variant. */
[data-brand="datum-grain"] .app-shell:has(.panel-center-fullscreen) {
grid-template-columns: 64px 1fr var(--panel-right-width);
}
[data-brand="datum-grain"] .app-shell:has(.panel-center-fullscreen):has(.panel-right-collapsed) {
grid-template-columns: 64px 1fr 36px;
}
/* Denser field/group sizing throughout every flyout, layered on top of
whichever box-model override (above) is active — same density
complaint the rest of this theme's flyout tweaks address (see
default.css's own .flyout-panel rules for the brand-agnostic ones). */
[data-brand="datum-grain"] .flyout-panel .field input[type="text"],
[data-brand="datum-grain"] .flyout-panel .field input[type="password"],
[data-brand="datum-grain"] .flyout-panel .field input[type="number"],
[data-brand="datum-grain"] .flyout-panel .field select {
min-height: 30px;
padding: 4px 8px;
}
/* --- Special-selections rows: toggle-switch pill, not a checkbox --------
Reuses fm.option_row()'s existing markup/logic entirely unchanged (see
webapp/templates/partials/_macros.html) — only .wizard-option-
checkbox's visual is restyled here, from a small checkbox square into
a 34x20px pill with a sliding thumb (::after), matching the origin
design handoff's own toggle-switch spec, without touching the macro
itself. The macro's own checkmark SVG is hidden (opacity:0) since a
toggle switch has no checkmark, just thumb position. */
[data-brand="datum-grain"] .wizard-option-row {
background: var(--color-bg-panel);
border-radius: var(--radius);
}
[data-brand="datum-grain"] .wizard-option-checkbox {
width: 34px;
height: 20px;
border-radius: 999px;
border: 1px solid var(--color-border-strong);
background: var(--color-neutral-800);
position: relative;
transition: background 0.15s ease, border-color 0.15s ease;
}
[data-brand="datum-grain"] .wizard-option-checkbox svg {
opacity: 0;
}
[data-brand="datum-grain"] .wizard-option-checkbox::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-neutral-400);
transition: left 0.15s ease, background 0.15s ease;
}
[data-brand="datum-grain"] .wizard-option-row input[type="checkbox"]:checked + .wizard-option-checkbox {
background: var(--color-accent-700);
border-color: var(--color-accent);
color: transparent;
}
[data-brand="datum-grain"] .wizard-option-row input[type="checkbox"]:checked + .wizard-option-checkbox::after {
left: 17px;
background: var(--color-accent);
}
/* --- 3D preview dialog ---------------------------------------------------
.preview3d-panel already rides existing tokens (--color-bg-raised,
--color-border-strong, --radius-lg) for free; only the backdrop tint
(hardcoded for the light theme) needs a scoped override to match this
theme's own .dialog-backdrop spec. */
[data-brand="datum-grain"] .preview3d-overlay {
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
[data-brand="datum-grain"] .preview3d-panel {
box-shadow: var(--shadow-lg);
}
/* --- Elevation SVG cabinet outlines --------------------------------------
webapp/svg_render.py draws every cabinet's plinth/carcass/front panels
(and a gap's dashed placeholder box) with a hardcoded OUTLINE_COLOR
(#3A332C, a dark brown) as both their inline fill and stroke — tuned
for a light background, where it reads clearly. Against this theme's
dark ground it's nearly invisible, so only the selected cabinet's own
separately-CSS-styled accent outline (.cabinet-selection-outline,
unaffected by this) stood out. These attribute selectors override that
literal color wherever it appears in the elevation SVG, without
touching svg_render.py itself — SVG presentation attributes like
fill="..."/stroke="..." always lose to an actual CSS rule regardless
of specificity, so this is a safe, purely visual override. */
[data-brand="datum-grain"] .elevation-svg [stroke="#3A332C"] {
stroke: var(--color-border-strong);
}
[data-brand="datum-grain"] .elevation-svg [fill="#3A332C"] {
fill: var(--color-border-strong);
}