/* ============================================================
Cups & Grams — design system
Futuristic but approachable: soft shadows, big radii, bold color
============================================================ */
/* Self-hosted theme fonts — docs/superpowers/specs/2026-05-28-appearance-themes-design.md */
@font-face{font-family:"DM Serif Display";src:url("/fonts/dm-serif-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("/fonts/dm-serif-display-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"InterTheme";src:url("/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"InterTheme";src:url("/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"InterTheme";src:url("/fonts/inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root {
/* Bold brand palette */
--grad: linear-gradient(135deg, #FF6B4A 0%, #FF3D77 55%, #C03DF6 100%);
--grad-soft: linear-gradient(135deg, #FFE7DF 0%, #FFE2EC 100%);
--coral: #FF5A52;
--pink: #FF3D77;
/* Darker pink that passes WCAG 2.1 AA 4.5:1 contrast on white / --bg.
Use for pink TEXT on light backgrounds (links, small accent labels, etc.).
Keep --pink for backgrounds, dots, and large headings (≥ 24px or 18.66px bold)
where the 3:1 large-text threshold suffices. */
--pink-accessible: #C92A60;
--violet: #6C4DF6;
--ink: #1B1430;
--ink-soft: #514A66;
--line: #ECE8F4;
--surface: #FFFFFF;
--bg: #F7F5FC;
--bg-tint: #FBF8FF;
--ok: #1FA971;
/* Safety / substitution colours (themed per appearance; defaults = original) */
--safety-bg: #FCEEEC; --safety-line: #C0392B; --safety-line-soft: #F0D6D2; --safety-fg: #DC2626;
--badge-bg: #FFF8EC; --badge-line: #E0A040; --badge-fg: #8B5E16;
/* Table header (themed). Defaults = the original dark-ink bar + white text,
which the light themes keep as-is. Dark Kitchen overrides these: its --ink
is near-white, so #fff text on a var(--ink) bar is ~1.2:1 — invisible
(WCAG 1.4.3). */
--th-bg: var(--ink); --th-fg: #fff;
/* Theme-overridable tokens — defaults below = the Classic look; the
html[data-theme="…"] blocks (added in Task 3) override these. Classic
stays pixel-identical because every default equals its old literal. */
--header-bg: rgba(247, 245, 252, 0.82);
--hero-glow-1: rgba(192, 61, 246, 0.14);
--hero-glow-2: rgba(255, 90, 82, 0.14);
--highlight: #FFF1F4;
--ring: rgba(108, 77, 246, 0.25);
--ring-soft: rgba(108, 77, 246, 0.14);
--footer-bg: var(--ink);
--footer-fg: #C9C3DC;
--footer-line: #332B4A;
--footer-note: #8E87A6;
--result-bg: var(--grad-soft);
--result-fg: var(--ink);
--container: var(--surface);
--font-display: var(--font);
--font-ui: var(--font);
--font-body: var(--font);
/* Soft, layered shadows */
--shadow-sm: 0 2px 8px rgba(27, 20, 48, 0.06);
--shadow: 0 10px 30px rgba(27, 20, 48, 0.08), 0 2px 8px rgba(27, 20, 48, 0.05);
--shadow-lg: 0 24px 60px rgba(108, 77, 246, 0.16), 0 8px 24px rgba(27, 20, 48, 0.08);
--shadow-brand: 0 14px 34px rgba(255, 61, 119, 0.34);
--r-sm: 12px;
--r: 18px;
--r-lg: 26px;
--r-xl: 34px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Apple Color Emoji", sans-serif;
--maxw: 1280px;
}
/* ============================================================
THEME BLOCKS — override the Classic tokens above. The switcher writes
data-theme on ; the pre-paint script applies it before paint.
============================================================ */
html[data-theme="artisanal"] {
--bg: #EFE6D2; --bg-tint: #FBF6E9; --surface: #FBF6E9; --line: #D4BFA0;
--ink: #3B2616; --ink-soft: #6E4423;
--pink: #C58B5E; --coral: #C58B5E; --violet: #C58B5E; --pink-accessible: #8A4F23;
--grad: linear-gradient(135deg, #C58B5E 0%, #E6B469 100%);
--grad-soft: linear-gradient(135deg, #F6E8D2 0%, #FBF1DF 100%);
--result-bg: #3B2616; --result-fg: #F3E6CC;
--hero-glow-1: rgba(197, 139, 94, 0.16); --hero-glow-2: rgba(230, 180, 105, 0.12);
--highlight: #F3E9D5; --ring: rgba(197, 139, 94, 0.30); --ring-soft: rgba(197, 139, 94, 0.18);
--header-bg: rgba(239, 230, 210, 0.85);
--footer-bg: #3B2616; --footer-fg: #E6D4B0; --footer-line: #5A4326; --footer-note: #B79B6E;
--shadow-brand: 0 18px 40px rgba(59, 38, 22, 0.22);
--shadow-lg: 0 24px 60px rgba(59, 38, 22, 0.13), 0 8px 24px rgba(59, 38, 22, 0.08);
--r-sm: 14px; --r: 16px; --r-lg: 20px; --r-xl: 24px;
--font-display: "DM Serif Display", Georgia, serif;
--font-ui: "InterTheme", system-ui, sans-serif;
--font-body: "InterTheme", system-ui, sans-serif;
}
html[data-theme="engineering"] {
--bg: #F4F5F0; --bg-tint: #E7E9E1; --surface: #FFFFFF; --line: #D7DCD3;
--ink: #131816; --ink-soft: #4A554E;
--pink: #38E27D; --coral: #38E27D; --violet: #2A6A45; --pink-accessible: #2A6A45;
--grad: linear-gradient(135deg, #38E27D 0%, #2A6A45 100%);
--grad-soft: linear-gradient(135deg, #E3F2E8 0%, #EFF6EE 100%);
--result-bg: #0B0E0C; --result-fg: #E7F0EA; --container: #131816;
--hero-glow-1: rgba(56, 226, 125, 0.10); --hero-glow-2: rgba(56, 226, 125, 0.05);
--highlight: #E3F2E8; --ring: rgba(56, 226, 125, 0.35); --ring-soft: rgba(56, 226, 125, 0.20);
--header-bg: #131816;
--footer-bg: #131816; --footer-fg: #C7CFC9; --footer-line: #2A332E; --footer-note: #8A988F;
--shadow-brand: 0 8px 22px rgba(19, 24, 22, 0.12);
--shadow-lg: 0 2px 12px rgba(19, 24, 22, 0.10);
--r-sm: 4px; --r: 4px; --r-lg: 6px; --r-xl: 8px;
--font-display: "InterTheme", system-ui, sans-serif;
--font-ui: "JetBrains Mono", ui-monospace, monospace;
--font-body: "JetBrains Mono", ui-monospace, monospace;
}
/* Engineering header is a dark strip on a light page → its text must go light. */
html[data-theme="engineering"] .brand { color: #E7F0EA; }
html[data-theme="engineering"] .nav a { color: #A9B4AD; }
html[data-theme="engineering"] .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark-kitchen"] {
--bg: #0B0D10; --bg-tint: #0F1318; --surface: #141A21; --line: #1A1F26;
--ink: #E8EBF0; --ink-soft: #A8B0BD;
--pink: #E63946; --coral: #FF8B5E; --violet: #E63946; --pink-accessible: #FF8B5E;
--grad: linear-gradient(135deg, #E63946 0%, #FF8B5E 55%, #FFC36E 100%);
--grad-soft: linear-gradient(135deg, #201016 0%, #14181F 100%);
--result-bg: #14181F; --result-fg: #E8EBF0;
--th-bg: #222A33; --th-fg: var(--ink); /* elevated slate header; #E8EBF0 text = 12.1:1 (AA) */
--hero-glow-1: rgba(230, 57, 70, 0.22); --hero-glow-2: rgba(255, 139, 94, 0.10);
--highlight: #1A222B; --ring: rgba(230, 57, 70, 0.40); --ring-soft: rgba(230, 57, 70, 0.22);
--header-bg: rgba(11, 13, 16, 0.85);
--footer-bg: #0B0D10; --footer-fg: #A8B0BD; --footer-line: #1A1F26; --footer-note: #6E7682;
--shadow-brand: 0 14px 40px rgba(230, 57, 70, 0.35);
--shadow-lg: 0 22px 60px rgba(230, 57, 70, 0.28), 0 8px 24px rgba(0, 0, 0, 0.55);
--r-sm: 8px; --r: 10px; --r-lg: 12px; --r-xl: 14px;
--font-display: "InterTheme", system-ui, sans-serif;
--font-ui: "JetBrains Mono", ui-monospace, monospace;
--font-body: "InterTheme", system-ui, sans-serif;
}
/* Techy themes use a heavy grotesk display weight (matches the mockups). */
html[data-theme="engineering"] h1,
html[data-theme="dark-kitchen"] h1 { font-weight: 800; letter-spacing: -0.02em; }
/* ---- Theme component refinements (Design briefs) ---- */
/* Recolour the caret + magnifier icons per theme (base SVG is brand violet). */
html[data-theme="artisanal"] select { background-image: url("data:image/svg+xml;utf8,"); }
html[data-theme="engineering"] select { background-image: url("data:image/svg+xml;utf8,"); }
html[data-theme="dark-kitchen"] select { background-image: url("data:image/svg+xml;utf8,"); }
html[data-theme="artisanal"] .combobox-input { background-image: url("data:image/svg+xml;utf8,"); }
html[data-theme="engineering"] .combobox-input { background-image: url("data:image/svg+xml;utf8,"); }
html[data-theme="dark-kitchen"] .combobox-input { background-image: url("data:image/svg+xml;utf8,"); }
/* Blurb (feature) cards get a surface card on themed pages — visually distinct
from the interactive tool tiles, which lift on hover and show a -> arrow. */
html[data-theme] .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 24px; }
html[data-theme="dark-kitchen"] .feature { border-top: 2px solid var(--pink); }
html[data-theme] .tile { position: relative; }
html[data-theme] .tile::after { content: "\2192"; position: absolute; top: 16px; right: 18px; color: var(--pink-accessible); font-weight: 700; }
/* Engineering: dark converter card on the light page (brief). Dark Kitchen's
converter is already dark via its surface tokens. */
html[data-theme="engineering"] .tool { background: #131816; box-shadow: none; border: 1px solid #2A332E; }
html[data-theme="engineering"] .tool .field label { color: #8A988F; }
html[data-theme="engineering"] .tool input,
html[data-theme="engineering"] .tool select,
html[data-theme="engineering"] .tool .combobox-input { background-color: #0F1318; color: #E7F0EA; border-color: #2A332E; }
html[data-theme="engineering"] .tool .combobox-panel { background: #131816; border-color: #2A332E; }
/* Converter header bar — "Convert anything" by default; a terminal-style
"./CONVERTER --live" tag with lit LED dots on the techy themes. */
.tool-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tool-tag { font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); }
.tool-tag::before { content: "Convert anything"; }
.tool-dots { display: inline-flex; gap: 6px; }
.tool-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
html[data-theme="engineering"] .tool-tag,
html[data-theme="dark-kitchen"] .tool-tag { color: var(--pink); text-transform: uppercase; letter-spacing: 0.04em; }
html[data-theme="engineering"] .tool-tag::before,
html[data-theme="dark-kitchen"] .tool-tag::before { content: "./CONVERTER --live"; }
html[data-theme="engineering"] .tool-dots i:nth-child(-n+2),
html[data-theme="dark-kitchen"] .tool-dots i:nth-child(-n+2) { background: var(--pink); }
/* ---- Theme switcher (header) ----
The button is a FIXED white tile with FIXED diagonal bg/accent squares — it
never themes, so it stays a constant landmark. The popover themes (uses
--surface/--ink) so the menu dresses in the active appearance. */
.site-header .brand { margin-right: auto; }
.theme-switch-wrap { position: relative; display: inline-flex; }
.theme-switch {
width: 38px; height: 38px; border-radius: 11px;
background: #fff; border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 3px; padding: 5px; cursor: pointer;
}
.theme-switch:hover { box-shadow: var(--shadow); }
.ts-sq { border-radius: 3px; }
/* diagonal split: theme background (top-left) over theme accent (bottom-right) */
.ts-classic { background: linear-gradient(135deg, #F7F5FC 0 50%, #FF3D77 50% 100%); }
.ts-artisanal { background: linear-gradient(135deg, #EFE6D2 0 50%, #C58B5E 50% 100%); }
.ts-engineering { background: linear-gradient(135deg, #F4F5F0 0 50%, #38E27D 50% 100%); }
.ts-dark { background: linear-gradient(135deg, #0B0D10 0 50%, #E63946 50% 100%); }
.theme-pop {
position: absolute; top: 48px; right: 0; z-index: 60;
background: var(--surface);
border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow); padding: 8px;
display: flex; gap: 8px;
}
.theme-pop[hidden] { display: none; }
/* Swatch-only options (no text labels) — bigger color icons. */
.theme-opt {
padding: 4px; border: 0; background: none;
border-radius: 11px; cursor: pointer; line-height: 0;
}
.theme-opt:hover { background: var(--bg); }
.theme-opt[aria-checked="true"] .ts-sw {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pink-accessible);
}
.ts-sw { width: 42px; height: 42px; border-radius: 10px; display: block; }
/* Dark Kitchen converter result: red radial glow on near-black. The unit-
equivalent chips are shown and restyled to read as distinct cards on the
glow — the default chip's dark surface otherwise blends into the near-black. */
html[data-theme="dark-kitchen"] .result {
background: radial-gradient(95% 95% at 50% 50%, rgba(230, 57, 70, 0.30), #0B0D10 70%);
}
html[data-theme="dark-kitchen"] .result-extra .chip {
background: rgba(11, 13, 16, 0.55);
border-color: rgba(242, 85, 96, 0.42);
box-shadow: none;
}
/* Dark Kitchen safety colours — dark-tinted boxes (the light tints glared as
bright islands on the near-black bg). Soft reds/ambers, all WCAG AA on the
dark surfaces without max-contrast "neon on black". */
html[data-theme="dark-kitchen"] {
--safety-bg: #2A1519; --safety-line: #F25560; --safety-line-soft: #3A2228; --safety-fg: #F2A0A0;
--badge-bg: #26200F; --badge-line: #C8923A; --badge-fg: #E8C074;
}
html[data-theme="dark-kitchen"] .subs-badge-link { background: rgba(255, 255, 255, 0.07); }
html[data-theme="dark-kitchen"] .subs-badge-link:hover { background: rgba(255, 255, 255, 0.13); }
/* Artisanal: warm brick-red danger + tan/amber badge, tuned to the parchment palette. */
html[data-theme="artisanal"] {
--safety-bg: #F4E2D8; --safety-line: #B5482E; --safety-line-soft: #E6CBBA; --safety-fg: #9E3520;
--badge-bg: #F6EAD2; --badge-line: #9E6B3A; --badge-fg: #7A4A1E;
}
/* Engineering: clean instrument-red (the mockup's strike-red) + amber badge on the cool grey. */
html[data-theme="engineering"] {
--safety-bg: #FBE3E1; --safety-line: #D14545; --safety-line-soft: #F0D2D0; --safety-fg: #B5302A;
--badge-bg: #FBF1DA; --badge-line: #A8761A; --badge-fg: #8A5A14;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
line-height: 1.65;
font-size: 17px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Theme typography application (Task 2): headings → --font-display, the UI
elements (inputs/buttons/tabs) → --font-ui. Both default to the system font,
so Classic is unchanged; [data-theme] blocks swap in DM Serif / mono / Inter. */
h1, h2, h3, h4, .brand, .section-title { font-family: var(--font-display); }
.eyebrow, .field label, .nav a { font-family: var(--font-ui); }
img { max-width: 100%; height: auto; }
a { color: var(--pink-accessible); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
/* Prose blocks are uniformly constrained to a comfortable reading width so
long-form text on every page (intro paragraphs, article bodies, legal
pages, ingredient reverse-text, the 404) wraps at the same line length.
Without this, some pages used .prose.narrow and others left .prose
unconstrained — visibly different widths on what should look the same. */
.prose { max-width: 760px; }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--header-bg);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
}
.site-header .wrap {
display: flex; align-items: center; gap: 16px;
height: 70px;
}
.brand {
display: flex; align-items: center; gap: 10px;
font-weight: 800; font-size: 1.2rem; color: var(--ink);
letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
width: 38px; height: 38px; border-radius: 12px;
background: var(--grad); box-shadow: var(--shadow-brand);
display: grid; place-items: center;
overflow: hidden;
}
.brand-mark .brand-cup { width: 100%; height: 100%; display: block; }
.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
color: var(--ink-soft); font-weight: 600; font-size: 0.95rem;
padding: 8px 14px; border-radius: 999px;
}
.nav a:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.nav-toggle { display: none; }
/* ---------- Hero ---------- */
.hero {
position: relative; overflow: hidden;
padding: 64px 0 40px;
}
.hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(60% 70% at 80% 0%, var(--hero-glow-1), transparent 70%),
radial-gradient(50% 60% at 5% 20%, var(--hero-glow-2), transparent 70%);
pointer-events: none;
}
.hero .wrap { position: relative; }
.eyebrow {
display: inline-block; font-weight: 700; font-size: 0.82rem;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--violet);
background: var(--surface); border: 1px solid var(--line);
padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
h1 {
font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.08; letter-spacing: -0.03em; font-weight: 800;
margin: 18px 0 14px;
}
.hero h1 .grad {
background: var(--grad); -webkit-background-clip: text;
background-clip: text; color: transparent;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 620px; }
/* Hero stat strip — presentational scope indicator (Ingredients · Units ·
Categories · Substitutions) from real build-time counts. Themed only through
tokens (--ink numerals / --ink-soft labels, --font-display / --font-ui) so it
reskins per appearance with no per-theme rules. */
.hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 14px; margin: 22px 0 4px; max-width: 560px;
}
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats b {
font-family: var(--font-display); font-size: 1.6rem;
line-height: 1; color: var(--ink);
}
.hero-stats span {
font-family: var(--font-ui); font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink-soft); margin-top: 4px;
}
/* Phones / high zoom: a 4-up cell can't hold a 13-char label
("Substitutions") without an ugly mid-word wrap, so drop to 2×2 below the
site's 520px breakpoint. Also satisfies WCAG 1.4.10 reflow at 200–400% zoom. */
@media (max-width: 520px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; max-width: 340px; }
}
/* ---------- Cards & sections ---------- */
.card {
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: 26px;
}
.card-pad { padding: 30px; }
section { padding: 34px 0; }
.section-title {
font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800;
letter-spacing: -0.02em; margin-bottom: 6px;
}
.section-sub { color: var(--ink-soft); margin-bottom: 22px; }
/* ---------- Converter widget ---------- */
.tool {
background: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
padding: 28px;
margin-top: 26px;
}
.tool-grid {
display: grid; gap: 14px;
grid-template-columns: 1fr 1fr;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
font-weight: 700; font-size: 0.82rem; color: var(--ink-soft);
text-transform: uppercase; letter-spacing: 0.03em;
}
input, select, textarea {
font-family: var(--font-ui); font-size: 1.05rem; color: var(--ink);
background: var(--bg-tint);
border: 2px solid var(--line);
border-radius: var(--r); padding: 14px 16px;
width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--violet);
box-shadow: 0 0 0 4px var(--ring-soft);
}
select { appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center;
padding-right: 42px; cursor: pointer;
}
/* When the searchable combobox has taken over, hide the native select but
keep it accessible/focusable-by-id for our own scripts. */
select.is-enhanced {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
/* ---------- Searchable combobox ----------
Structure:
.combobox
└── .combobox-input
└── .combobox-panel
└── .combobox-scope (height-capped scroll area)
└── ul.combobox-list (grouped options)
Clicking the input opens the panel with every ingredient grouped by
category; typing filters by substring on the name. One section, one
scrollable list. */
.combobox { position: relative; }
.combobox-input {
/* Inherits the global input styling; add a magnifier icon + bigger touch. */
min-height: 52px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 46px;
}
.combobox-panel {
margin: 6px 0 0; padding: 6px;
position: absolute; left: 0; right: 0; top: 100%;
z-index: 30;
background: var(--surface);
border: 2px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-lg);
/* Total panel height is capped so the dropdown can't grow past the bottom
of its containing card (avoids overlap with the AdSense slot below). */
display: flex; flex-direction: column;
max-height: 360px; min-height: 0;
}
.combobox-panel[hidden] { display: none; }
/* Compact panel for tighter contexts (scaler menu rows). The scaler is
close enough to the AdSense slot that the standard 360px overlaps. */
.combobox.combobox-compact .combobox-panel { max-height: 220px; }
/* Mini combobox — used by the scaler's whole/fraction/unit slots. Drops
the magnifier icon (it's for ingredient-style search, not numeric
pickers) and uses less right padding so short labels like "Qty" fit. */
.combobox.combobox-mini .combobox-input {
background-image: none;
padding-right: 12px;
}
.combobox.combobox-mini .combobox-panel { max-height: 240px; }
/* Optional input-bar wrapper — used when a combobox has a slash button.
The bar replaces the bare input as the direct child of .combobox so
input + button visually merge with shared borders. */
.combobox-input-bar {
display: flex;
align-items: stretch;
}
.combobox-input-bar > .combobox-input {
flex: 1 1 auto;
min-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
/* The slash button sits to the right; the input no longer needs space
for the magnifier icon either. */
background-image: none;
padding-right: 10px;
}
.combobox-slash {
flex: 0 0 30px;
appearance: none;
background: var(--bg-tint);
border: 1px solid var(--line);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-size: 1rem;
font-weight: 700;
color: var(--ink);
cursor: pointer;
}
.combobox-slash:hover,
.combobox-slash:active,
.combobox-slash:focus-visible {
background: var(--line);
outline: none;
}
.combobox-scope {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* Explicit horizontal lock — without this, touch drags on the panel
can side-pan, especially with -webkit-overflow-scrolling: touch
extending momentum scroll to both axes. */
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 2px;
}
.combobox-list {
list-style: none; margin: 0; padding: 0;
}
.combobox-group {
padding: 10px 12px 6px;
font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--violet);
}
.combobox-group:first-child { padding-top: 4px; }
.combobox-option {
padding: 12px 14px; min-height: 44px;
border-radius: var(--r-sm); cursor: pointer;
color: var(--ink); font-size: 1rem; line-height: 1.3;
display: flex; align-items: center;
}
.combobox-option.is-active,
.combobox-option:hover {
background: var(--bg-tint); color: var(--ink);
}
.combobox-option.is-active {
box-shadow: inset 0 0 0 2px var(--violet);
}
.combobox-empty {
padding: 14px; color: var(--ink-soft); font-size: 0.95rem;
text-align: center;
}
/* Phone-class viewport — either portrait (narrow width) or landscape
(short height with landscape orientation). The second condition
catches landscape phones (~812×393) that the bare max-width: 520
would miss, so a phone rotation doesn't suddenly leave the user
with a tall dropdown that runs off the visible viewport. */
@media (max-width: 520px),
(max-height: 500px) and (orientation: landscape) {
.combobox-panel { max-height: 320px; }
.combobox.combobox-compact .combobox-panel { max-height: 200px; }
.combobox-option { padding: 14px 14px; }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem;
color: #fff; background: var(--grad);
border: none; border-radius: var(--r);
padding: 15px 28px; cursor: pointer;
box-shadow: var(--shadow-brand);
transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none;
box-shadow: var(--shadow-brand); }
.btn:active { transform: translateY(0); }
.btn-ghost {
background: var(--surface); color: var(--ink);
border: 2px solid var(--line); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { box-shadow: var(--shadow); }
.btn-block { width: 100%; }
.result {
margin-top: 18px; border-radius: var(--r-lg);
background: var(--result-bg); color: var(--result-fg);
padding: 24px; text-align: center;
}
.result .big {
font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800;
letter-spacing: -0.02em; line-height: 1.1;
}
.result .big b {
background: var(--grad); -webkit-background-clip: text;
background-clip: text; color: transparent;
}
.result .sub {
color: var(--result-fg); opacity: 0.72; font-size: 0.98rem; font-weight: 500;
margin-bottom: 8px;
}
.result-extra {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
margin-top: 14px;
}
.chip {
background: var(--surface); border: 1px solid var(--line);
border-radius: 999px; padding: 7px 14px;
font-size: 0.9rem; font-weight: 600; color: var(--ink-soft);
box-shadow: var(--shadow-sm);
}
.chip b { color: var(--ink); }
/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
caption { caption-side: top; text-align: left; font-weight: 700;
padding: 16px 18px 0; font-size: 1.05rem; }
th, td { padding: 13px 16px; text-align: left; font-variant-numeric: tabular-nums; }
thead th {
background: var(--th-bg); color: var(--th-fg); font-size: 0.82rem;
text-transform: uppercase; letter-spacing: 0.04em;
}
tbody tr { border-top: 1px solid var(--line); }
tbody tr:nth-child(even) { background: var(--bg-tint); }
tbody tr:hover { background: var(--highlight); }
td:first-child, th:first-child { font-weight: 700; }
/* ---------- Grids ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.tile {
display: block; background: var(--surface);
border-radius: var(--r); padding: 18px 18px;
box-shadow: var(--shadow-sm); border: 1px solid var(--line);
transition: transform .12s ease, box-shadow .12s ease;
color: var(--ink);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow);
text-decoration: none; border-color: transparent; }
.tile .t-name { font-weight: 700; }
.tile .t-meta { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }
.cat-card {
background: var(--surface); border-radius: var(--r-lg);
box-shadow: var(--shadow); padding: 22px; min-height: 300px;
}
.cat-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.cat-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 4px;
background: var(--grad); margin-right: 8px; vertical-align: middle;
}
.linklist { list-style: none; margin-top: 10px; }
.linklist li { padding: 5px 0; border-top: 1px solid var(--line); }
.linklist li:first-child { border-top: none; }
/* ---------- Feature row ---------- */
.feature { text-align: left; }
.feature .ico {
width: 46px; height: 46px; border-radius: 13px;
background: var(--grad-soft); display: grid; place-items: center;
font-size: 1.4rem; margin-bottom: 10px;
}
.feature h3 { font-size: 1.08rem; }
.feature p { color: var(--ink-soft); font-size: 0.96rem; }
/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 0.9rem; color: var(--ink-soft); padding: 22px 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs span { margin: 0 6px; }
/* ---------- Article / prose ---------- */
.prose { font-size: 1.06rem; }
.prose h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
margin: 30px 0 10px; }
.prose h3 { font-size: 1.18rem; font-weight: 700; margin: 22px 0 8px; }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { margin: 12px 0 12px 22px; }
.prose li { margin: 6px 0; }
.prose strong { font-weight: 700; }
.prose .callout {
background: var(--bg-tint); border-left: 4px solid var(--violet);
border-radius: var(--r-sm); padding: 14px 18px; margin: 18px 0;
}
/* Standalone (non-prose) .callout — used on /substitutions/ above the category
list. Same visual style as the in-prose variant. Inner margins are
tightened so the safety bullets stay compact. */
.callout {
background: var(--bg-tint);
border-left: 4px solid var(--violet);
border-radius: var(--r-sm);
padding: 14px 18px;
margin: 18px 0;
max-width: 760px;
}
.callout p { margin: 8px 0; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout-list {
margin: 8px 0 8px 24px;
padding: 0;
}
.callout-list li { margin: 6px 0; line-height: 1.5; }
/* Italic note line below the bullets — same colour and size as body text,
only italicized so it reads as an aside without losing legibility. */
.callout-note {
font-style: italic;
}
.callout-note em { font-style: italic; }
/* ---------- Substitutions badge (yellow note bar below the converter) -------
Single-line warm-amber bar containing: status icon (green ✓ / red ✗ /
yellow ⚠), status label, "Details" link. The BAR colour stays consistent
regardless of status — only the icon inside changes shape + colour to
communicate the status, so the page has one unified "substitution info"
visual unit rather than three differently-coloured banners. Distinct icon
shapes (square check, square X, triangle warn) keep the at-a-glance read
accessible for colour-blind users. */
.subs-badge {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
margin: 16px 0 20px;
padding: 12px 16px;
border-radius: var(--r-sm);
border: 1.5px solid var(--badge-line);
background: var(--badge-bg);
font-size: 0.95rem;
line-height: 1.4;
}
.subs-badge-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.subs-badge-label {
flex: 1;
min-width: 0;
font-weight: 700;
letter-spacing: 0.1px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subs-badge-link {
flex-shrink: 0;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--badge-fg);
color: var(--badge-fg);
font-size: 0.88rem;
}
.subs-badge-link:hover { background: rgba(255, 255, 255, 0.95); }
/* ---------- Substitutions hub page (/substitutions/) -----------------------
One per ingredient, grouped inside the
collapsible .catblock category sections (same pattern as /conversions/).
Each section has: status badge, optional ingredient-level note + safety,
substitute entries (or unverified message), and a back-link to the
ingredient's converter page. */
.subs-cat-body {
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 8px;
}
.subs-section {
padding: 20px 22px;
background: var(--surface);
border: 1px solid var(--line);
/* Was: border-radius: var(--r-md) — that token is undefined, which
collapses to 0 and gives the cards sharp corners. The site's
rounded + soft-shadow aesthetic uses --r (18px) for medium cards. */
border-radius: var(--r);
box-shadow: var(--shadow-sm);
/* overflow:hidden so the .subs-safety-box's bottom-fill respects
the card's rounded corners. */
overflow: hidden;
scroll-margin-top: 72px; /* keeps anchored sections clear of the sticky header */
}
.subs-section-title {
margin: 0 0 4px;
font-size: 1.2rem;
font-weight: 800;
color: var(--ink);
}
/* Section head wraps the title + primary back-link with a dashed bottom
border that visually matches the dividers between sub entries below, so
the head reads as a "0th entry" sharing the same rhythm. */
.subs-section-head {
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px dashed var(--line);
}
.subs-primary-back {
margin: 4px 0 0;
font-size: 0.85rem;
text-align: left;
}
.subs-primary-back a {
color: var(--violet);
font-weight: 600;
text-decoration: none;
}
.subs-primary-back a:hover { text-decoration: underline; }
.subs-section-note {
margin: 4px 0 12px;
font-size: 0.95rem;
color: var(--ink-soft);
font-style: italic;
line-height: 1.5;
}
.subs-unverified-msg,
.subs-donot-msg {
margin: 8px 0 12px;
padding: 12px 16px;
background: var(--bg-tint);
border-radius: var(--r-sm);
color: var(--ink);
line-height: 1.5;
}
/* Per-entry back-link rendered at the bottom of each substitution entry's
description (and at the bottom of unverified / do-not message boxes).
Compact size + left-aligned so it reads as a natural continuation of the
entry text, not a floating action. */
.subs-entry-back {
margin: 10px 0 0;
font-size: 0.85rem;
text-align: left;
}
.subs-entry-back a {
color: var(--violet);
font-weight: 600;
text-decoration: none;
}
.subs-entry-back a:hover { text-decoration: underline; }
/* ---------- Shared substitute-list pieces (used on /substitutions/) ---------
These render inside .subs-section for status: 'ok' entries. Kept neutral
(no warm-amber background) since the section card already provides the
container — these are the inner list items. */
.subs-list { margin: 0; padding: 0; list-style: none; }
.subs-item {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--line);
}
.subs-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.subs-source {
font-style: italic;
color: var(--ink-soft);
font-size: 0.88rem;
font-weight: 400;
}
.subs-source-link {
color: var(--violet);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.subs-source-link:hover { text-decoration-thickness: 2px; }
.subs-detail {
margin-top: 6px;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.5;
}
/* ---------- Safety markers + consolidated callout ----------
A subs-section can have multiple safety notes: one on the subbed
ingredient itself plus zero-or-more on individual swap entries.
Each note gets a letter label (a, b, …) rendered as a small inline
superscript next to its source's name; the full notes appear in a
single .subs-safety-box anchored to the bottom of the card (peach
fill, extending to the card edges via negative margins so the
parent's rounded corners clip the bottom corners). One legend at
the top of /substitutions/ explains what the markers mean — the
per-section box has no "Safety" title for that reason. */
.subs-safety-marker {
font-size: 0.58em; /* was 0.72em — Lou's 20% reduction pass */
font-weight: 600; /* was 800 — Lou wanted bolding dropped */
/* #DC2626 — brighter red than the prior #C0392B, ~4.82:1 contrast on
white (passes WCAG AA), and visually distinct in hue/saturation from
the dark var(--ink) text that follows (which made the prior darker
red look like a connected word, e.g. "A Pineapple" merging visually). */
color: var(--safety-fg);
vertical-align: super;
line-height: 1;
margin-left: 2px;
letter-spacing: 0.02em;
/* No background, no padding — a thin inline letter, not a chip. */
}
.subs-safety-marker-legend {
/* In the box-list legend, the marker is also superscripted to match
the inline markers. Slightly larger than inline for box readability.
font-size stays 0.85em — the parent .subs-safety-box now sets a
smaller font-size, so this scales down proportionally with it. */
vertical-align: super;
margin-left: 0;
margin-right: 3px; /* was 8px — Lou wanted the ingredient text closer to the marker */
font-size: 0.85em;
}
/* The per-section safety box. Negative margins break it out of the
.subs-section's internal padding so its peach background runs flush
to the card's outer edges; the parent's overflow:hidden + rounded
corners clip the bottom of the box, producing the "card with a
colored footer fill" effect. */
.subs-safety-box {
/* 20% size reduction pass: top margin 18→14, vertical padding 14→11,
font-size 0.92→0.74rem. Horizontal margin (-22px) and horizontal
padding (22px) are geometry-locked to the parent card edge so they
stay fixed; only vertical sizes shrink. */
margin: 14px -22px -20px;
padding: 11px 22px;
background: var(--safety-bg);
border-top: 1px solid var(--safety-line-soft);
/* Left-side accent stripe matches the .subs-safety-legend at the top of
/substitutions/, so the per-card footer reads as the same "safety"
visual language. The parent .subs-section's overflow:hidden + rounded
corners clip the bottom-left of this stripe to the card's curve. */
border-left: 4px solid var(--safety-line);
font-size: 0.74rem;
line-height: 1.5;
}
.subs-safety-box-title { display: none; /* the page-top legend explains this */ }
.subs-safety-box-list { list-style: none; padding: 0; margin: 0; }
.subs-safety-box-list li { padding: 2px 0; /* was 3px — part of the 20% box reduction */ }
/* "Who" prefix colour matches the marker so the marker + who + note read
as a single colour-coded safety unit (was #A23B27, the duller red). */
.subs-safety-box-list strong { color: var(--safety-fg); }
/* Page-top safety legend on /substitutions/ — explains the marker
convention once so the per-section boxes don't need to repeat it. */
.subs-safety-legend {
margin: 14px 0 18px;
padding: 12px 16px;
background: var(--safety-bg);
border-left: 4px solid var(--safety-line);
border-radius: var(--r-sm);
font-size: 0.95rem;
line-height: 1.5;
}
.subs-safety-legend strong {
/* Matches marker colour so "Safety" in the top callout uses the same
visual language as the per-section markers (Lou: "If marker, change
Safety at the top to match"). */
color: var(--safety-fg);
font-weight: 800;
}
.subs-safety {
margin-top: 10px;
padding: 10px 14px;
background: var(--safety-bg);
border-left: 3px solid var(--safety-line);
border-radius: 4px;
font-size: 0.92rem;
color: var(--ink);
line-height: 1.5;
}
.subs-safety strong { color: var(--safety-fg); }
/* ---------- Answer card (quantity pages) ---------- */
.answer-card {
margin: 18px 0 22px; padding: 18px 22px;
background: var(--bg-tint); border-left: 4px solid var(--pink);
border-radius: var(--r-sm); font-size: 1.25rem; line-height: 1.4;
}
tr.row-hi { background: var(--bg-tint); }
tr.row-hi td { font-weight: 700; }
/* ---------- Recipe scaler tabs + menu rows ---------- */
.sc-tabs {
display: inline-flex; gap: 4px; margin: 20px 0 14px;
padding: 4px; border-radius: 999px;
background: var(--bg-tint); border: 1px solid var(--line);
}
.sc-tab {
appearance: none; border: 0; background: transparent;
font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem;
color: var(--ink-soft); padding: 8px 18px; min-height: 36px;
border-radius: 999px; cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
}
.sc-tab:hover { color: var(--ink); }
.sc-tab.is-active {
background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
}
.sc-tab:focus-visible {
outline: none; box-shadow: 0 0 0 3px var(--ring);
}
.sc-panel[hidden] { display: none; }
.sc-rows {
display: flex; flex-direction: column; gap: 10px;
}
.sc-row {
display: grid;
/* Four narrow slots + ingredient + remove. The first three (whole/frac/
unit) replace the prior qty+unit pair so users get tap-and-pick
dropdowns instead of a single hybrid text+slash input. Widths chosen
so the placeholders ("Qty", "1/2", "Unit") never clip. */
grid-template-columns: 90px 100px 130px 1fr auto;
gap: 8px;
align-items: start;
}
.sc-row > .sc-row-whole-slot,
.sc-row > .sc-row-frac-slot,
.sc-row > .sc-row-unit-slot {
min-height: 52px;
}
.sc-row > .sc-row-ing-slot {
min-width: 0; /* allow shrinking inside grid */
}
.sc-row-remove {
appearance: none; border: 1px solid var(--line); background: var(--bg-tint);
color: var(--ink-soft); font-size: 1.4rem; font-weight: 700;
width: 44px; height: 52px; border-radius: var(--r);
cursor: pointer; align-self: start;
transition: background .15s, color .15s, border-color .15s;
}
.sc-row-remove:hover {
background: var(--surface); color: var(--pink); border-color: var(--pink);
}
.sc-add {
appearance: none; margin-top: 12px;
font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem;
color: var(--violet); background: var(--bg-tint);
border: 1px dashed var(--violet); border-radius: var(--r);
padding: 10px 18px; min-height: 44px;
cursor: pointer; transition: background .15s, color .15s;
}
.sc-add:hover:not(:disabled) {
background: var(--surface);
}
.sc-add:disabled {
opacity: 0.55; cursor: not-allowed; color: var(--ink-soft); border-color: var(--line);
}
/* Submit area: explicit vertical spacing from the inputs above. */
.sc-submit {
margin-top: 24px;
}
.sc-help {
margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-soft);
text-align: center; min-height: 1.2em;
}
#sc-go:disabled {
opacity: 0.55; cursor: not-allowed; background: var(--bg-tint);
color: var(--ink-soft); box-shadow: none;
}
/* Phone-class viewport — same mobile scaler layout for portrait AND
landscape phones. The second media condition catches landscape
phones (~812×393 typical) that max-width:600 alone would miss.
Lou's rule: rotating a phone shouldn't reorganize the fields, just
widen them. */
@media (max-width: 600px),
(max-height: 500px) and (orientation: landscape) {
.sc-row {
grid-template-columns: 1fr 1fr 1fr auto;
grid-template-areas:
"whole frac unit remove"
"ing ing ing ing";
}
.sc-row > .sc-row-whole-slot { grid-area: whole; }
.sc-row > .sc-row-frac-slot { grid-area: frac; }
.sc-row > .sc-row-unit-slot { grid-area: unit; }
.sc-row > .sc-row-remove { grid-area: remove; }
.sc-row > .sc-row-ing-slot { grid-area: ing; }
}
/* ---------- High-altitude adjuster ---------- */
.alt-advice { margin-top: 14px; text-align: left; max-width: 540px; margin-left: auto; margin-right: auto; }
.alt-advice p { margin: 6px 0 8px; font-size: 0.98rem; color: var(--ink); }
.alt-advice ul { margin: 0 0 0 20px; padding: 0; }
.alt-advice li { margin: 4px 0; font-size: 0.95rem; line-height: 1.5; }
/* ---------- Pinterest-pin infographic figure ---------- */
.infographic {
margin: 28px auto;
max-width: 400px;
text-align: center;
}
.infographic picture { display: block; }
.infographic img {
display: block; width: 100%; height: auto;
border-radius: var(--r); box-shadow: var(--shadow);
background: var(--bg-tint);
}
.infographic figcaption {
margin-top: 12px;
font-size: 0.92rem; color: var(--ink-soft);
line-height: 1.5;
}
.infographic .pin-link {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 8px;
padding: 4px 10px; border-radius: 999px;
background: var(--bg-tint); border: 1px solid var(--line);
color: var(--pink-accessible); font-weight: 700; font-size: 0.85rem;
transition: background .15s, border-color .15s;
}
.infographic .pin-link:hover {
background: var(--surface); border-color: var(--pink); text-decoration: none;
}
@media (max-width: 520px) {
.infographic { max-width: 320px; }
}
/* ---------- "Embed this infographic" control ----------
sits inside .infographic so it inherits the
center alignment. Collapsed by default; expands to reveal a read-only