/* IRA Whiskey brand tokens for the nodewatch dashboard. * * Every color, font, spacing step and radius used by style.css and app.js lives here. * app.js reads the chart colors from these custom properties, so tuning a value below * changes cards and charts together. See brand-tokens.md for where each value came from. */ /* ---- self-hosted type (no runtime requests off the box) ---- */ @font-face { font-family: "Platypi"; font-weight: 300 800; font-style: normal; font-display: swap; src: url("/fonts/Platypi-variable.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-weight: 100 1000; font-style: normal; font-display: swap; src: url("/fonts/DMSans-variable.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/DMMono-400.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/DMMono-500.woff2") format("woff2"); } :root { /* ---- brand palette (irawhiskey.com Squarespace tokens, converted to hex) ---- */ --ira-navy: #131f2c; /* --darkAccent-hsl 211.2 39.68% 12.35% */ --ira-cream: #f7f4ee; /* --white-hsl 40 36% 95.1% */ --ira-yellow: #ffe44d; /* --accent-hsl 50.9 100% 65.1% */ --ira-mustard: #d8ac0e; /* --lightAccent-hsl 46.93 87.83% 45.1% */ --ira-white: #ffffff; /* logotype on dark backgrounds */ --ira-seal: #1e2a41; /* navy sampled from the circular seal (assets/brand) */ /* ---- type ---- */ --font-display: "Platypi", Georgia, "Times New Roman", serif; /* site heading face */ --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* site body face */ --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* site meta face */ --tracking-caps: 0.08em; --tracking-caps-wide: 0.22em; /* 1rem: ~17px in a laptop window, ~33px at 2560x1440, ~47px at 3840x2160. */ font-size: clamp(14px, 0.82vw + 4px, 36px); /* ---- rhythm ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.9rem; --space-4: 1.4rem; --space-5: 2.2rem; --page-x: 2.4vw; --page-y: 1.8vh; --radius: 0.65rem; /* cards, chart boxes, banner */ --radius-sm: 0.35rem; /* stamps: flags, active range button */ --hairline: 1px; --rule: 3px; /* accent rule on card tops */ --focus-offset: 2px; --logo-h: 8rem; /* seal height; phones and the 4K TV override in style.css */ /* ---- semantic: dark "warehouse" theme (default) ---- */ color-scheme: dark; --bg: var(--ira-navy); --surface: color-mix(in oklab, var(--ira-navy), var(--ira-cream) 3%); /* cards: ~3% lift */ --surface-2: color-mix(in oklab, var(--ira-navy), var(--ira-cream) 7%); /* tooltips, hover */ --line: color-mix(in oklab, var(--ira-cream) 10%, transparent); /* 1px hairlines */ --grid: color-mix(in oklab, var(--ira-cream) 7%, transparent); /* chart gridlines */ --ink: var(--ira-cream); --ink-2: color-mix(in oklab, var(--ira-cream) 60%, transparent); /* labels */ --ink-3: color-mix(in oklab, var(--ira-cream) 52%, transparent); /* footnotes, ticks */ --accent: #d9be76; --accent-ink: var(--ira-navy); /* text on an accent stamp */ --label-ink: var(--ink-2); /* section and row labels */ --logo-ink: var(--ira-white); --dim: 0.45; /* stale readings */ /* Chart series: nine steps derived from the brand, not a rainbow. * Four corner hues in OKLCH at equal lightness (L 0.80, C 0.12): the two cool hues sit * either side of the brand navy (hue ~250°), the two warm/green hues are their * complements. "Low" is the same hue at 55% chroma. Outside is the accent yellow. */ --series-nw-high: #a7b7ff; --series-nw-low: #b1bbe9; --series-ne-high: #60ccfc; --series-ne-low: #92c6e0; --series-sw-high: #ffa282; --series-sw-low: #e4b09e; --series-se-high: #71d6a3; --series-se-low: #99cbaf; --series-outside: var(--ira-yellow); --series-other: var(--ink-2); /* nodes that do not follow the NE/NW/SE/SW High/Low naming */ --series-width: 0.12rem; } /* ---- light "paper" theme: ?theme=light, or the OS preference when no ?theme is given ---- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: var(--ira-cream); --surface: color-mix(in oklab, var(--ira-cream), var(--ira-white) 60%); --surface-2: color-mix(in oklab, var(--ira-cream), var(--ira-navy) 6%); --line: color-mix(in oklab, var(--ira-navy) 14%, transparent); --grid: color-mix(in oklab, var(--ira-navy) 9%, transparent); --ink: var(--ira-navy); --ink-2: color-mix(in oklab, var(--ira-navy) 62%, transparent); --ink-3: color-mix(in oklab, var(--ira-navy) 55%, transparent); --accent: #947024; --accent-ink: var(--ira-navy); --label-ink: var(--ink-2); --logo-ink: var(--ira-seal); --series-nw-high: #5c69bc; --series-nw-low: #656e9c; --series-ne-high: #007dae; --series-ne-low: #427993; --series-sw-high: #af5331; --series-sw-low: #966352; --series-se-high: #008856; --series-se-low: #4a7f63; --series-outside: var(--ira-mustard); } } :root[data-theme="light"] { color-scheme: light; --bg: var(--ira-cream); --surface: color-mix(in oklab, var(--ira-cream), var(--ira-white) 60%); --surface-2: color-mix(in oklab, var(--ira-cream), var(--ira-navy) 6%); --line: color-mix(in oklab, var(--ira-navy) 14%, transparent); --grid: color-mix(in oklab, var(--ira-navy) 9%, transparent); --ink: var(--ira-navy); --ink-2: color-mix(in oklab, var(--ira-navy) 62%, transparent); --ink-3: color-mix(in oklab, var(--ira-navy) 55%, transparent); --accent: #947024; --accent-ink: var(--ira-navy); --label-ink: var(--ink-2); --logo-ink: var(--ira-seal); --series-nw-high: #5c69bc; --series-nw-low: #656e9c; --series-ne-high: #007dae; --series-ne-low: #427993; --series-sw-high: #af5331; --series-sw-low: #966352; --series-se-high: #008856; --series-se-low: #4a7f63; --series-outside: var(--ira-mustard); } /* Operations dashboard additions: derived presentation tokens. */ :root { --positive: #90c7b5; --metric-size: 2.6rem; --panel-padding: 1rem; --card-columns: 3.4rem minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --positive: #287359; } } :root[data-theme="light"] { --positive: #287359; } :root { --chart-font-size: 0.74rem; }