/* ========================================================================== Lake Mead Admin — Design Tokens -------------------------------------------------------------------------- The ONLY file in this project permitted to contain literal color values. Every other stylesheet consumes these custom properties, which is what makes day/night switching a single attribute flip on . Palette source: an earlier portfolio project (surfaces, accents, shadows) Type + easing source: ty1er.com/cheatsheet-libraries Theming model, ported from that same project: html[data-theme] -> "day" | "night" (the RESOLVED appearance) html[data-theme-mode] -> "auto" | "day" | "night" (the USER's choice) In auto mode, theme.js resolves day/night from local sunrise/sunset. ========================================================================== */ /* `.force-day` and `.force-night` apply a palette to a subtree instead of the whole document. They are appended to the same rules as the document-level selectors below, so there is exactly one copy of each palette and the two can never drift apart. Custom properties resolve per element, so a `.force-day` subtree keeps the day palette even inside a night document — ancestor specificity is irrelevant, because the declaration is on the element itself. Used by the before/after comparison on ui/effects.html. */ :root, .force-day { /* --- Brand constants -------------------------------------------------- */ /* These do not change between day and night; they are the identity. */ --aqua: #7ef0d5; /* primary action, positive trend */ --aqua-deep: #4fd8b8; /* aqua hover / on-light text-safe variant */ --blue: #348eee; /* secondary action, info, links */ --blue-deep: #2472c9; --sun: #f2a93c; /* warning */ --sky: #d9f2ff; /* soft info wash */ --rose: #f2546b; /* danger — added for admin status states */ --violet: #8b7ff0; /* extra chart series */ --white: #ffffff; /* --- Illustration constants ------------------------------------------- */ /* Skin, hair, eyes and sand are depiction, not chrome. They must NOT invert with the theme — a person whose skin flips to navy at night is a bug, for the same reason the airmail ribbon is left out of the email substitution map. Used only by the Floating Diver scene on ui/svg-motion.html. */ --skin: #e0a077; --skin-shade: #c98a60; --illus-dark: #1c1b22; /* hair and eyes */ --sand: #f0dcae; /* --- Surfaces (DAY) --------------------------------------------------- */ --paper: #f3f5f0; /* app background */ --paper-warm: #ebece6; /* recessed / alt rows / rail */ --surface: #ffffff; /* raised card */ --surface-alt: #f8f9f5; /* card subheader, table head */ /* --- Text (DAY) ------------------------------------------------------- */ --ink: #0a1b2b; /* primary text */ --ink-soft: #18364c; /* secondary text */ /* DARKENED FROM THE UPSTREAM THEME's #617180, which did not meet WCAG AA. It is used for 60+ pieces of small text per page — section labels, device dimensions, captions, help lines — almost all of it at 10.5-13px, so the 4.5:1 bar for normal text applies to essentially all of it. Measured against every background it actually lands on: #617180 (was) #54626f (now) --paper-warm 4.23 FAIL 5.27 sidebar, rails, alt rows --paper 4.57 pass 5.70 page background --surface-alt 4.75 pass 5.92 table heads, subheaders --surface 5.02 pass 6.26 cards The sidebar was the real failure and the easiest to miss, because it is the one surface darker than --paper: every device dimension and group label in the nav sat under the line. 4.57 on --paper was no better than a rounding error above it either. #54626f is the same hue scaled to 87% luminance, so the blue-grey cast is unchanged and it stays clearly lighter than --ink-soft (0.118 vs 0.034 relative luminance) — the three-step text hierarchy still reads as three steps. Night's #9fb3c0 measures 7.25:1 at its worst and is untouched. */ --muted: #54626f; /* tertiary / labels */ --on-accent: #0a1b2b; /* text on aqua — aqua is light, so ink reads */ /* --- Lines + elevation (DAY) ------------------------------------------ */ --line: rgba(10, 27, 43, .15); --line-soft: rgba(10, 27, 43, .08); --shadow-sm: 0 1px 2px rgba(10, 27, 43, .06); --shadow-md: 0 6px 20px rgba(10, 27, 43, .09); --shadow-lg: 0 24px 70px rgba(10, 27, 43, .14); /* hero/modal only */ /* Accent washes — tinted backgrounds for badges, soft buttons, icon pills */ /* Derived from --aqua, NOT a literal of it. The brand switcher rewrites --aqua, --aqua-deep and --on-accent at runtime; a hardcoded rgba here stayed mint while everything around it changed color, so every tint in the theme quietly stopped following the picker. color-mix keeps the 31 rules that use this in step with one line, and needs no JS. */ --aqua-soft: color-mix(in srgb, var(--aqua) 22%, transparent); --blue-soft: rgba( 52, 142, 238, .12); --sun-soft: rgba(242, 169, 60, .16); --rose-soft: rgba(242, 84, 107, .12); --violet-soft: rgba(139, 127, 240, .14); /* On-tint text. The -soft tints sit at 12-18% opacity, so the full-strength hue printed on its own tint lands at 1.8-2.9:1 — orange on cream is the worst of them and is genuinely unreadable. These are the text-safe partners: each clears 5:1 on its matching -soft background in this theme. Redeclared under NIGHT, where the tint is dark and the safe partner is a light tint of the hue rather than a deep one. */ --blue-ink: #1a5fae; --sun-ink: #8a5200; --rose-ink: #b31229; --violet-ink: #5b4bd6; /* Sidebar — tracks the page surface rather than being permanently dark, so the night theme reads as one continuous surface. */ --sidebar-bg: var(--paper-warm); --sidebar-text: var(--ink-soft); --sidebar-hover: rgba(10, 27, 43, .05); --sidebar-active: var(--ink); /* Topbar is translucent + blurred, matching both source sites' headers. */ --topbar-bg: rgba(243, 245, 240, .82); /* --- Typography ------------------------------------------------------- */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* Two display serifs, chosen by size rather than by taste. Playfair Display is a high-contrast Didone: superb large, spindly small. Lora is lower-contrast and built to hold together at text sizes. --font-display 34px and up hero titles, the 404 code, pricing headers --font-accent 17-28px subheads, pull quotes, editorial titles Below 17px use --font-body; a serif at admin density costs legibility. NOTE: Lora is a variable font with a 400-700 range. Asking for 800 does not fail loudly — the browser silently clamps it to 700, and adding `wght@800` to the Google Fonts URL makes the whole request 400 and drops every font on the page. Never exceed 700 here. */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-accent: 'Lora', Georgia, 'Times New Roman', serif; /* Type scale — admin density, so it starts small and climbs steeply. */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 27px; --fs-3xl: 34px; --fs-4xl: 44px; /* The portfolio's signature: heavy weight + tight negative tracking. */ --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800; --track-tight: -.038em; /* display headings */ --track-snug: -.02em; /* card titles, stat values */ /* --- Spacing (4px base) ----------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; /* --- Radii ------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 9px; --radius-card: 14px; /* from the cheatsheet site — right at widget density */ --radius-shell:22px; /* portfolio hero radius; banners + shell only */ --radius-pill: 999px; /* all buttons, per portfolio */ /* --- Layout metrics --------------------------------------------------- */ /* shell.js and shell.css both depend on these; change in one place only. */ --sidebar-w: 260px; --sidebar-w-collapsed: 76px; --topbar-h: 64px; /* How much sticky chrome sits above a sticky element — what a toolbar must clear to park below the topbar. It is the topbar's height only while the topbar is actually sticky; the customizer's static and hidden navbar modes drop it to zero (customizer.css), and every sticky toolbar in the theme offsets from this rather than from --topbar-h so they all follow. */ --sticky-top: var(--topbar-h); --content-max: 1440px; --bp-mobile: 960px; /* mirrored in shell.js MOBILE_MAX */ /* --- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(.25, 1, .5, 1); /* cheatsheet site */ --ease-reveal: cubic-bezier(.2, .75, .2, 1); /* portfolio reveals */ --t-fast: .15s; --t-base: .2s; --t-slow: .7s; /* --- Z-index ladder --------------------------------------------------- CHANGED FROM THE UPSTREAM THEME: --z-backdrop was 45, which put it ABOVE --z-sidebar. The backdrop's only job is dimming the page behind the mobile drawer (shell.css: `body.is-open .backdrop`), so sitting above the drawer meant it dimmed and blurred the drawer itself — and because that rule also sets `pointer-events: auto`, the backdrop swallowed every tap meant for a nav item. The drawer opened, looked greyed out, and could not be used. Reported on an iPhone 16; it affects every viewport under 960px, which is where the drawer exists at all. 35 puts it between the page content and the drawer, which is what a backdrop is for. Keep it below --z-sidebar if this is ever re-synced with the upstream theme. */ --z-sidebar: 40; --z-backdrop: 35; --z-topbar: 50; --z-dropdown: 60; --z-modal: 70; --z-toast: 80; } /* ========================================================================== NIGHT Only the values that actually change are redeclared. Brand constants, type, spacing, radii, and metrics all inherit from :root above. ========================================================================== */ html[data-theme="night"], .force-night, /* Semi-dark keeps the sidebar on the night palette while the page stays light. Listed here rather than restated in customizer.css so there is still exactly one copy of the night palette. */ html[data-semi-dark="true"][data-theme="day"] .sidebar { --paper: #07131e; --paper-warm: #0c1c29; --surface: #0c1c29; --surface-alt: #102534; --ink: #eaf4fa; --ink-soft: #c4d5df; --muted: #9fb3c0; --on-accent: #0a1b2b; /* aqua stays light, so ink text still wins */ --line: rgba(231, 244, 252, .15); --line-soft: rgba(231, 244, 252, .08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow-md: 0 6px 20px rgba(0, 0, 0, .32); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .34); --aqua-soft: color-mix(in srgb, var(--aqua) 14%, transparent); --blue-soft: rgba( 52, 142, 238, .18); --sun-soft: rgba(242, 169, 60, .16); --rose-soft: rgba(242, 84, 107, .18); --violet-soft: rgba(139, 127, 240, .18); --blue-ink: #8fc2ff; --sun-ink: #f5c978; --rose-ink: #ff9aab; --violet-ink: #bab2ff; --sidebar-bg: #0a1725; --sidebar-hover: rgba(255, 255, 255, .06); --sidebar-active: var(--ink); --topbar-bg: rgba(7, 19, 30, .82); /* Night surfaces sit on dark ground, so hairlines carry more of the separation than shadows do. */ color-scheme: dark; } html[data-theme="day"] { color-scheme: light; } /* A scoped palette has to paint its own background and text — otherwise the subtree inherits the document's, and only the accents would change. */ .force-day, .force-night { background: var(--paper); color: var(--ink); }