/* ═══════════════════════════════════════════════════════════════════════ DVC Points Planner — theme layer Drop-in for the existing vanilla HTML/CSS/JS app. Load order: 1. _ds/nocturne.../styles.css (Nocturne tokens + component classes) 2. this file (Daytime override, mono figures, motion) Theme switching: set data-theme on . → Fireworks night (Nocturne as authored) → Daytime with no attribute → Auto (follows prefers-color-scheme) Every value below is a Nocturne ramp step. Nothing is invented. ═══════════════════════════════════════════════════════════════════════ */ /* JetBrains Mono is self-hosted via fonts.css (linked before this sheet) — no CDN import. */ :root { /* Numeric point values render in a monospaced face with tabular figures. */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Daytime ───────────────────────────────────────────────────────────── The ramps are unchanged; only the roles that read off them are re-pointed. Surfaces come from the light end of --color-neutral-*, text from the dark end, and the accent steps one darker (accent-700) so paragraph-size accent text still clears contrast on a light ground. The tag ramp steps are swapped so .tag-accent / .tag-neutral keep working untouched. */ html[data-theme="daytime"] { --color-bg: #eceef9; /* between neutral-100 and neutral-200 */ --color-surface: #f8f9fe; /* just above neutral-100 */ --color-text: #23253a; /* neutral-900, warmed to the bg hue */ --color-accent: #5d5294; /* accent-700 */ --color-divider: color-mix(in srgb, #23253a 14%, transparent); --shadow-sm: 0 0 0 1px #dde1f1; --shadow-md: 0 0 0 1px #dde1f1, 0 6px 18px rgba(35, 37, 58, .10); --shadow-lg: 0 0 0 1px #b2b6ca, 0 16px 40px rgba(35, 37, 58, .16); /* tag ramps invert so light-on-dark chips become dark-on-light chips */ --color-neutral-800: #dfe3f2; --color-neutral-100: #3f424d; --color-neutral-700: #b2b6ca; /* the "used points" meter segment */ --color-accent-800: #e0dcfb; --color-accent-100: #423a6a; --color-accent-300: #5d5294; /* accent-tinted body text */ } @media (prefers-color-scheme: light) { html:not([data-theme]) { --color-bg: #eceef9; --color-surface: #f8f9fe; --color-text: #23253a; --color-accent: #5d5294; --color-divider: color-mix(in srgb, #23253a 14%, transparent); --shadow-sm: 0 0 0 1px #dde1f1; --shadow-md: 0 0 0 1px #dde1f1, 0 6px 18px rgba(35, 37, 58, .10); --shadow-lg: 0 0 0 1px #b2b6ca, 0 16px 40px rgba(35, 37, 58, .16); --color-neutral-800: #dfe3f2; --color-neutral-100: #3f424d; --color-neutral-700: #b2b6ca; --color-accent-800: #e0dcfb; --color-accent-100: #423a6a; --color-accent-300: #5d5294; } } /* ── Figures ───────────────────────────────────────────────────────────── Any number that is a point value, a date or an ID gets .m. Never body copy. */ .m { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* A balance headline: 42px on desktop cards, 44px on mobile, 56–62px on the calculator result. Weight stays 500 — Nocturne never bolds past 500. */ .balance-figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 42px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; } .mu { color: color-mix(in srgb, var(--color-text) 55%, transparent); } .kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 45%, transparent); } /* ── Points meter ────────────────────────────────────────────────────────
*/ .ix-bar { display: flex; height: 9px; gap: 2px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--color-text) 10%, transparent); } .seg-used { background: var(--color-neutral-700); } .seg-available { background: var(--color-accent); } .seg-banked { background: repeating-linear-gradient(135deg, var(--color-accent-500) 0 3px, var(--color-accent-700) 3px 6px); } /* ── Alert strip ───────────────────────────────────────────────────────── .alert neutral, informational (resale restriction) .alert.is-urgent accent-tinted (banking deadline) */ .alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 3px 0 0 var(--color-neutral-600); } .alert.is-urgent { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--color-accent); } .alert-title { font-size: 13.5px; font-weight: 500; } .alert-body { font-size: 12.5px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } /* ── Cards ─────────────────────────────────────────────────────────────── .ix-card contract card, plan card, feature card, trip row .ix-reco the recommended funding plan (accent ring instead of hairline) */ .ix-card, .ix-reco { background: var(--color-surface); border-radius: 14px; transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s cubic-bezier(.22, 1, .36, 1); } .ix-card { box-shadow: var(--shadow-sm); } .ix-reco { box-shadow: 0 0 0 1px var(--color-accent), 0 10px 28px rgba(0, 0, 0, .4); } .ix-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--color-accent-600), 0 14px 34px rgba(0, 0, 0, .34); } .ix-reco:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--color-accent), 0 20px 46px rgba(0, 0, 0, .5); } /* ── Photograph tiles ──────────────────────────────────────────────────── Every content photograph goes through Nocturne's .lighten wrapper. */ .ix-tile { border-radius: 12px; overflow: hidden; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; } .ix-tile:hover { transform: scale(1.035); box-shadow: 0 0 0 1px var(--color-accent-600); } /* ── Micro-interactions ────────────────────────────────────────────────── All motion is 0.12–0.9s, eased on cubic-bezier(.22,1,.36,1) or plain ease. Colour changes come from the accent ramp only. */ .btn { transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .18s ease, transform .12s ease; } .btn:not(:disabled):active { transform: scale(.96); } .btn-primary:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent); } .tag, .input, .seg-opt { transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } a { transition: color .15s ease; } nav a { transition: color .16s ease, box-shadow .24s cubic-bezier(.22, 1, .36, 1); } nav a:hover { color: var(--color-accent); } .table tbody tr { transition: transform .18s cubic-bezier(.22, 1, .36, 1); } .table tbody tr:hover { transform: translateX(3px); } /* Meter fill — segments start collapsed and wipe out when scrolled into view. Add data-ix="in" on the .ix-bar from an IntersectionObserver. */ .ix-bar > * { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22, 1, .36, 1); } .ix-bar > *:nth-child(2) { transition-delay: .14s; } .ix-bar[data-ix="in"] > * { transform: none; } /* Audience toggle / any swapped copy */ .ix-swap { animation: ixswap .36s cubic-bezier(.22, 1, .36, 1); } @keyframes ixswap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Segmented audience toggle on the landing page */ .aud { cursor: pointer; background: transparent; border: 0; padding: 9px 18px; border-radius: var(--radius-md); font: 500 14px/1.2 var(--font-heading); color: color-mix(in srgb, var(--color-text) 60%, transparent); transition: color .18s ease, background .18s ease, box-shadow .24s cubic-bezier(.22, 1, .36, 1); } .aud:hover { color: var(--color-accent); } .aud[aria-pressed="true"] { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; transition-duration: .001s !important; } }