/* ============================================================================ Plate&Plan stylesheet ---------------------------------------------------------------------------- Three layers, in cascade order. Keep them in this order and in this file: 1. TOKENS — the only place raw values are allowed to appear. 2. BASE — element defaults + accessibility guarantees. 3. COMPONENTS — one class per repeated UI pattern. Conventions ----------- * Loaded via in index.html, so the dc runtime hoists it into once. Plain CSS — no build step, no preprocessor, no dependency. * Naming is block__element--variant (BEM-ish). Flat, one level of nesting max. * Inline `style=` is reserved for values that are *data*: a person's chosen colour, a meal's tint, a computed offset. Pass those in as custom properties (`style="--chip-tint:{{ g.tint }}"`) and let the class own every structural declaration. Anything static belongs in here. * Adding a raw hex, px radius, or font stack below the TOKENS section is a bug. test_a11y.py enforces the parts of this that are machine-checkable. ========================================================================== */ /* ============================================================================ 1. TOKENS ========================================================================== */ :root { /* --- Type ------------------------------------------------------------ */ --font-display: 'Ribeye', Georgia, serif; --font-body: 'Poppins', system-ui, -apple-system, sans-serif; /* Ramp floor is 11px deliberately: below that, small-print UI copy stops being readable at arm's length on a phone. test_a11y.py holds the floor. */ --fs-2xs: 11px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 14.5px; --fs-xl: 17px; --fs-2xl: 19px; --fs-3xl: 24px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-caps: 0.05em; /* --- Colour: surfaces ------------------------------------------------ */ --surface: #fff; /* cards, menus, modals */ --surface-warm: #FFFDF7; /* note cards — "paper" */ --surface-sunken: #faebe6; /* page background, inputs, quiet pills */ --surface-muted: #F1EEE6; /* side rows, filter panel, small chips */ --surface-track: #EFEAE0; /* segmented-control troughs */ /* --- Colour: borders (light → heavy) --------------------------------- */ --border-faint: #EFEAE0; /* hairline dividers, card edges */ --border-soft: #E8E2D6; /* inputs at rest, date nav */ --border: #E2DCD0; /* menus, primary input borders */ --border-strong: #D3CCBE; /* dashed affordances, drag handles */ /* --- Colour: text ---------------------------------------------------- Every value here clears WCAG 2.1 AA (4.5:1) on --surface AND --surface-sunken, except --text-faint, which is documented below and is verified against the 3:1 non-text threshold instead. The old palette had six greys between #9a948a and #cfc8ba used for real copy at 1.4:1–3.0:1; they all collapse onto --text-muted. See CSS-ARCHITECTURE.md. */ --text: #0d2504; /* headings, primary copy 14.1:1 */ --text-body: #4a463f; /* long-form body copy 8.1:1 */ --text-muted: #6b655c; /* meta, labels, secondary 5.0:1 */ /* NON-TEXT ONLY. 3.2:1 on cream — clears 1.4.11 for icon glyphs and control boundaries, does NOT clear 1.4.3 for text. If you are about to put a word in this colour, use --text-muted. */ --text-faint: #8a847a; --text-inverse: #fff; /* --- Colour: semantic ----------------------------------------------- */ --success: #2FA862; /* switch-on fill (non-text) */ --success-text: #1E7A46; /* "✓ saved" copy 5.6:1 */ --danger: #C0392B; /* destructive label 4.7:1 */ --danger-border: #E6B4AD; --warning: #F2960C; --warning-surface: #FFF3E0; --warning-text: #9A5800; /* on --warning-surface 5.0:1 */ /* Accent is user-configurable (props + per-person colour pickers), so it arrives from the logic script; this is the fallback only. Every accent option is dark enough to clear 4.5:1 against white, which is one condition doing two jobs: the accent is used as a button/badge *fill* with white text on it, and as the active tab's *text* colour on a white card. Both directions measure the same accent-vs-white contrast, so an accent light enough to look bright fails both at once. The whole swatch set sits at ~5.05:1. test_a11y.py holds the line. */ --accent: #e00000; /* --- Radius --------------------------------------------------------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 18px; --r-pill: 20px; --r-round: 50%; /* --- Space ---------------------------------------------------------- */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 11px; --sp-5: 14px; --sp-xl: 16px; /* out of numeric sequence: the form/modal gutter, which the design uses at 16px and nowhere else on the 4/6/8 ramp */ --sp-6: 18px; --sp-7: 22px; /* --- Elevation ------------------------------------------------------ */ --shadow-card: 0 1px 2px rgba(0, 0, 0, .03); --shadow-raised: 0 1px 2px rgba(0, 0, 0, .08); --shadow-menu: 0 4px 16px rgba(0, 0, 0, .10); --shadow-modal: 0 24px 60px rgba(0, 0, 0, .25); --shadow-knob: 0 1px 2px rgba(0, 0, 0, .25); --shadow-fab: 0 6px 16px rgba(0, 0, 0, .24); /* Cast sideways by a sticky column onto the content sliding under it. */ --shadow-pinned: 6px 0 8px -6px rgba(0, 0, 0, .18); --scrim: rgba(40, 38, 34, .45); /* --- Motion --------------------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .15s; --dur-base: .25s; /* --- Accessibility -------------------------------------------------- */ --focus-ring: #0d2504; --focus-ring-offset: 2px; --tap-min: 44px; /* WCAG 2.5.8 target size (minimum) is 24px; 44px is the Apple/Material guidance we aim for on primary controls. */ } /* ============================================================================ 2. BASE ========================================================================== */ * { box-sizing: border-box; } /* The one horizontal scroll this app wants is `.planner__grid`, which owns a week that genuinely does not fit. Anything else reaching past the viewport is a bug, and on a phone it is an invisible one — you find it by the page drifting sideways under your thumb, not by seeing what caused it. Clipping at the root turns those into a layout mistake you can see instead of a scroll you cannot explain. `overflow-x` alone keeps the viewport as the scroll container, so `position: sticky` still resolves against it. */ html { overflow-x: hidden; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--surface-sunken); color: var(--text); } textarea, input, select, button { font-family: inherit; } /* --- Focus ----------------------------------------------------------------- The `!important` is a guard rail, not a fix for anything currently broken. The template used to carry inline `outline:none` on ~15 inputs; those are all gone now, but an inline declaration outranks any selector, so a single reintroduced `outline:none` would silently make the app unusable by keyboard. `!important` is the only thing that beats inline, so it stays. test_a11y.py asserts both halves: that this rule keeps its !important, and that no inline `outline:none` comes back. */ :focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: var(--focus-ring-offset) !important; } /* Elements the template makes clickable with onClick but which are not natively focusable get the same ring once they are given tabindex. */ [role="button"]:focus-visible, [role="switch"]:focus-visible, [role="checkbox"]:focus-visible, [role="tab"]:focus-visible { border-radius: var(--r-xs); } /* --- Motion ---------------------------------------------------------------- Respect the OS "reduce motion" setting. The drawer slide, the schedule day-in animation, and the switch knob all become instant rather than disappearing, so nothing loses its state cue. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- Screen-reader-only text --------------------------------------------- For accessible names on icon-only controls: Close Stays in the accessibility tree; takes no visual space. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Scrollbars ----------------------------------------------------------- */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-sm); } ::-webkit-scrollbar-track { background: transparent; } /* --- Print ---------------------------------------------------------------- */ @media print { @page { margin: 12mm; size: landscape; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .drawer, .drawer-backdrop { display: none; } .app-footer { display: none; } } /* ============================================================================ 3. COMPONENTS ========================================================================== */ /* --- Surfaces ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .card--note { background: var(--surface-warm); border-color: var(--border-faint); border-radius: var(--r-lg); box-shadow: none; } .panel { background: var(--surface-muted); border: 1px solid var(--border-faint); border-radius: var(--r-lg); padding: var(--sp-4); } /* Scroll regions. Height comes from --scroll-max at the call site because it differs per pane; the gutter compensation does not. */ .scroll-y { max-height: var(--scroll-max, 560px); overflow: auto; padding-right: 3px; margin-right: -3px; } /* --- Labels and rules ----------------------------------------------------- */ /* The small uppercase section label. Was 17 near-identical inline copies. */ .eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); white-space: nowrap; } .eyebrow--block { display: block; margin: 0 0 var(--sp-2); } /* Horizontal hairline that fills the gap in a section header row. */ .rule { flex: 1; height: 1px; background: var(--border-faint); border: 0; } .divider { height: 1px; background: var(--border-faint); margin: var(--sp-1) 0; } .section-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-md); line-height: 1; padding: var(--sp-3) var(--sp-5); border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; } .btn--primary { background: var(--btn-bg, var(--text)); color: var(--text-inverse); border-color: transparent; } .btn--secondary { background: var(--surface); color: var(--text-muted); border-color: var(--border); } .btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); } .btn--dashed { background: var(--surface-sunken); color: var(--text-muted); border: 1px dashed var(--border-strong); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); } .btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .6; } /* Square icon-only control. Always needs an accessible name — either aria-label or a .sr-only child. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-faint); font-size: var(--fs-xl); line-height: 1; cursor: pointer; } .icon-btn--boxed { border: 1px solid var(--border); background: var(--surface-sunken); border-radius: 7px; } .icon-btn--tinted { background: var(--surface-muted); width: 22px; height: 22px; border-radius: var(--r-xs); } .icon-btn--sm { width: 22px; height: 22px; font-size: var(--fs-lg); } /* --- Pills / tags --------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-4); background: var(--pill-bg, var(--surface-sunken)); color: var(--pill-fg, var(--text-muted)); border: 1px solid var(--pill-bd, var(--border-soft)); white-space: nowrap; } /* Selectable filter pill — same shell, but it is a control. */ .pill--action { cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-medium); } .pill--tag { font-size: var(--fs-2xs); padding: 2px var(--sp-3); border-color: var(--border-faint); } .pill--plain { background: var(--surface-muted); border-color: transparent; } /* Small colour swatch inside a pill or list row. */ .dot { width: var(--dot-size, 8px); height: var(--dot-size, 8px); border-radius: var(--r-round); background: var(--dot-color, var(--text-faint)); flex: none; } .dot--sm { --dot-size: 6px; } .dot--lg { --dot-size: 7px; } /* Count badge (e.g. active filter count). */ .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 var(--sp-1); border-radius: 9px; background: var(--badge-bg, var(--accent)); color: var(--badge-fg, var(--text-inverse)); font-size: var(--fs-2xs); } .avatar { display: flex; align-items: center; justify-content: center; flex: none; width: var(--avatar-size, 26px); height: var(--avatar-size, 26px); border-radius: var(--r-round); background: var(--avatar-bg, var(--border-soft)); color: var(--avatar-fg, var(--text-inverse)); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); line-height: 1; } .avatar--sm { --avatar-size: 18px; } .avatar--md { --avatar-size: 20px; } .avatar--lg { --avatar-size: 34px; font-size: var(--fs-lg); } /* --- Form fields ---------------------------------------------------------- */ /* Every text input, number input, select and textarea. Note: no `outline:none` — the base focus rule needs somewhere to land. */ .field { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 9px var(--sp-4); font-size: var(--fs-md); color: var(--text); } .field--sunken { background: var(--surface-sunken); border-color: var(--border-soft); } .field--sm { padding: var(--sp-3) 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); } .field--bare { border: 0; background: transparent; padding: 0; } .field--numeric { text-align: right; } .field::placeholder, .field--bare::placeholder { color: var(--text-muted); opacity: 1; } textarea.field { resize: vertical; line-height: var(--lh-normal); } /* --- Switch (the pill toggle in the view menus) --------------------------- */ .switch { position: relative; display: inline-block; flex: none; width: 30px; height: 17px; border-radius: 9px; border: 0; padding: 0; cursor: pointer; background: var(--border-strong); transition: background var(--dur-fast); } .switch[aria-checked="true"] { background: var(--success); } .switch__knob { position: absolute; top: 1px; left: 2px; width: 15px; height: 15px; border-radius: var(--r-round); background: var(--surface); box-shadow: var(--shadow-knob); transition: left var(--dur-fast); } .switch[aria-checked="true"] .switch__knob { left: 17px; } /* Row that wraps a label + switch in the dropdown menus. */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: 7px var(--sp-4); border: 0; border-radius: 7px; background: transparent; font-size: var(--fs-md); color: var(--text); text-align: left; cursor: pointer; } /* --- Segmented control (week count, card style, shopping mode) ------------ */ .segmented { display: flex; gap: 2px; background: var(--surface-track); border-radius: 9px; padding: 3px; } .segmented__opt { flex: 1; text-align: center; padding: var(--sp-1) var(--sp-3); border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; } .segmented__opt[aria-pressed="true"], .segmented__opt[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised); } /* Dark-fill variant used by the shopping/inventory switcher. */ .segmented--solid { background: var(--surface-muted); gap: 2px; padding: 2px; } .segmented--solid .segmented__opt { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm); border-radius: var(--r-xs); } .segmented--solid .segmented__opt[aria-pressed="true"] { background: var(--text); color: var(--text-inverse); } /* --- Menus / popovers ----------------------------------------------------- */ .menu { position: absolute; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-menu); padding: var(--sp-2); z-index: 200; } .menu--wide { min-width: 230px; border-radius: var(--r-lg); padding: var(--sp-3); } /* Each popover hangs below its own trigger, so the offset is per-menu. */ .menu--profile { top: 40px; } .menu--view { top: 38px; min-width: 180px; } .menu--list { top: 34px; min-width: 170px; } .menu__item { display: block; width: 100%; padding: 7px var(--sp-4); border: 0; border-radius: 7px; background: transparent; font-size: var(--fs-md); color: var(--text); text-align: left; cursor: pointer; } .menu__item:hover { background: var(--surface-sunken); } .menu__row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; cursor: pointer; } .menu__row:hover { background: var(--surface-sunken); } /* --- Tabs (sidebar) ------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-6); margin-bottom: 13px; border-bottom: 2px solid var(--border-faint); padding-bottom: var(--sp-3); } .tab { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 1; color: var(--text-muted); transition: color var(--dur-fast); } .tab[aria-selected="true"] { color: var(--tab-active, var(--accent)); } /* --- Date navigator ------------------------------------------------------- */ .date-nav { display: flex; align-items: center; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 3px var(--sp-2); } .date-nav__step { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: var(--fs-xl); line-height: 1; cursor: pointer; } .date-nav__input { border: 0; background: transparent; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-md); color: var(--text); cursor: pointer; } /* --- Meal chip (schedule + planner) -------------------------------------- Driven by three custom properties set inline from the meal's own palette: --chip-tint (background), --chip-accent (left rule), --chip-text. */ .chip { display: flex; flex-direction: column; gap: var(--sp-1); padding: 7px 9px; border-radius: 9px; background: var(--chip-tint, var(--surface-muted)); border-left: 3px solid var(--chip-accent, var(--border)); color: var(--chip-text, var(--text)); cursor: grab; text-align: left; width: 100%; border-top: 0; border-right: 0; border-bottom: 0; } .chip--grid { flex: 1; min-height: 96px; justify-content: space-between; padding: var(--sp-3) 9px; } .chip__title { font-family: var(--font-body); font-weight: var(--fw-heavy); font-size: var(--fs-md); line-height: var(--lh-tight); color: inherit; } .chip__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); width: 100%; } /* The card wrapper stays clickable for mouse/drag, but the title is a real button so the slot is reachable and activatable by keyboard. Nesting a