/* ========================================================================== CAPISCI? brand tokens (Iris, approved by the user at gate G-S2, 2026-09-26) Source of truth: the CAPISCI? design system (Iris). Every value here is defined there, with its purpose and its contrast check. Change it there first, then here; tests/unit/brand-contrast.test.js re-verifies every pair, and tests/unit/brand.test.js keeps colours out of every other file. Served at /brand/brand.css; every page links it. Rules for anyone using this file: - No colour, font or spacing value outside this file. Use the tokens. - Components use the SEMANTIC tokens (--color-*, --space-*, --text-*), never the raw brand palette (--cap-*), except the logo and decoration. - Tomato red (--cap-tomato) is never used for text on green. - Fonts are served from our own origin. No CDN, no Google request. ========================================================================== */ /* ---------- Fonts (self-hosted; files + licences live next to them) ------ */ @font-face { font-family: "Anton"; src: url("/brand/fonts/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/brand/fonts/AtkinsonHyperlegibleNext-Variable.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/brand/fonts/AtkinsonHyperlegibleNext-Italic-Variable.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: swap; } :root { /* NAMING NOTE (final gate): the tokens called --cap-green, --cap-green-deep, --cap-green-raised, --cap-green-hover and --cap-green-tint HOLD INK AND CREAM-SHADES NOW, not green. They kept their old names on purpose: renaming touches every page, three tests and the staff-app tokens in apps.css (which already has its own --cap-ink set), for no visible gain. Read "green" as "the dark surface colour". There is no green brand colour any more; the only greens left are the success tokens (--cap-basil*), kept as the semantic "done" colour. */ /* ---------- Raw brand palette: the FINAL logo (marble statue, 2026-10-05) ---- Disc red #D23824, ink #141210, cream #F6EDE0, small red text #C0261A (3-brand-kit/colori/colori.csv); the other steps are derived from them (Iris, apps-design-spec D1). Names kept from the first palette so no component changes; the values are the final ones. -------------------- */ --cap-green: #141210; /* the ink: the final logo's line work, text and dark surfaces */ --cap-green-deep: #141210; /* the ink again: the deepest surface */ --cap-cream: #F6EDE0; /* the lettering */ --cap-mozzarella: #FBF6EC; /* the mozzarella; lightest surface */ --cap-tomato: #D23824; /* the tomato; accent and danger fill only */ --cap-crust: #E9A84E; /* the crust highlight; CTA and highlight */ --cap-crust-shade: #7A4208; /* crust shadow; decoration only, never text */ --cap-basil: #3F8F1F; /* the basil; decoration only, never text */ /* ---------- Derived colours (Iris, computed to pass WCAG) --------------- */ --cap-green-raised: #211D1A; /* card on green */ --cap-green-hover: #211D1A; /* hover on green; dividers on green */ --cap-parchment: #EADFCD; /* sunken area on cream (table header, well) */ --cap-sage-ink: #5A5047; /* muted text on cream */ --cap-sage-line: #5A5047; /* input borders on cream (3:1+) */ --cap-sand-line: #CBBFAC; /* decorative dividers on cream */ --cap-sage-mist: #D9CDBB; /* muted text on green */ --cap-sage-edge: #D9CDBB; /* input borders on green (3:1+) */ --cap-tomato-ink: #C0261A; /* danger text on cream */ --cap-tomato-glow: #FF8A7A; /* danger text / chip on green */ --cap-tomato-tint: #F9E6E0; /* danger chip background on cream */ --cap-basil-ink: #2F6B12; /* success text on cream */ --cap-basil-glow: #8FD15C; /* success text / chip / Done button on green */ --cap-basil-tint: #E3EBD3; /* success chip background on cream */ --cap-crust-ink: #7A4208; /* warning text on cream */ --cap-crust-tint: #F6E3C2; /* warning chip background on cream */ --cap-crust-hover: #E9A84E; /* CTA hover */ --cap-green-tint: #EADFCD; /* "new" chip background on cream */ --cap-white: #FFFFFF; /* text on tomato fill only */ /* ---------- Semantic colours: LIGHT theme (default) --------------------- */ --color-bg: var(--cap-cream); --color-surface: var(--cap-mozzarella); --color-surface-sunken: var(--cap-parchment); --color-text: var(--cap-green); --color-text-muted: var(--cap-sage-ink); --color-border: var(--cap-sand-line); /* decorative only */ --color-border-strong: var(--cap-green); /* inputs, table outline: ink */ --color-focus: var(--cap-tomato-ink); --color-link: var(--cap-tomato-ink); --color-primary-bg: var(--cap-green); --color-primary-bg-hover:var(--cap-green-hover); --color-primary-text: var(--cap-cream); --color-cta-bg: var(--cap-tomato-ink); --color-cta-bg-hover: var(--cap-green); --color-cta-text: var(--cap-cream); --color-cta-border: var(--cap-tomato-ink); --color-danger-bg: var(--cap-tomato); --color-danger-text-on: var(--cap-white); --color-danger-text: var(--cap-tomato-ink); --color-success-text: var(--cap-basil-ink); --color-warning-text: var(--cap-crust-ink); /* status chips (text + background pairs) */ --chip-new-bg: var(--cap-green-tint); --chip-new-text: var(--cap-green); --chip-progress-bg: var(--cap-crust-tint); --chip-progress-text: var(--cap-crust-ink); --chip-ready-bg: var(--cap-basil-tint); --chip-ready-text: var(--cap-basil-ink); --chip-problem-bg: var(--cap-tomato-tint); --chip-problem-text: var(--cap-tomato-ink); --chip-neutral-bg: var(--cap-parchment); --chip-neutral-text: var(--cap-sage-ink); /* brand surfaces (header, hero, footer) are always ink */ --color-brand-bg: var(--cap-green); --color-brand-text: var(--cap-cream); /* ---------- Type ---------------------------------------------------------- */ --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif; --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Order numbers, codes, links to copy (S12 L2, the user's yes 2026-09-26). System fonts only: nothing to download, no CDN. Use with font-variant-numeric: tabular-nums (the .num-code class) so digits line up. */ --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* EXPRESSIVE scale (customer site), ratio 1.25, base 16px */ --text-xs: 0.8125rem; /* 13px legal, footnotes */ --text-sm: 0.875rem; /* 14px captions, allergen tags */ --text-base: 1rem; /* 16px body */ --text-lg: 1.25rem; /* 20px lead, item names */ --text-xl: 1.5625rem; /* 25px section titles (UI face) */ --text-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); /* 28-40px display h2 */ --text-3xl: clamp(2.25rem, 1.2rem + 4.5vw, 4rem); /* 36-64px display h1 */ --text-price: 1.25rem; --leading-tight: 1.1; --leading-body: 1.55; --weight-regular: 400; --weight-medium: 550; --weight-bold: 700; --tracking-display: 0.02em; /* ---------- Space (4px grid) --------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --page-gutter: var(--space-4); --page-max: 72rem; --tap-min: 44px; --tap-done: 72px; /* the one "done" button: kitchen Done, tablet Place order / New order (S12 H4, the user's yes 2026-09-26) */ /* ---------- Radius --------------------------------------------------------- */ --radius-sm: 6px; /* inputs, table cells */ --radius-md: 12px; /* cards, panels */ --radius-lg: 20px; /* hero panels */ --radius-pill: 999px; /* chips, pill buttons */ /* hand-cut corners echoing the uneven lettering (customer cards only) */ --radius-card-expressive: 14px 10px 16px 12px; /* ---------- Borders & shadows ------------------------------------------- */ --border-width: 1px; --border-width-bold: 2px; --focus-ring: 0 0 0 3px var(--color-focus); --focus-offset: 2px; --shadow-sticker: 4px 4px 0 var(--cap-green-deep); /* expressive, on cream */ --shadow-sticker-press: 1px 1px 0 var(--cap-green-deep); --shadow-soft: 0 1px 2px rgb(20 18 16 / 0.12), 0 2px 8px rgb(20 18 16 / 0.08); --shadow-raised: 0 4px 16px rgb(20 18 16 / 0.16); /* ---------- Motion --------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 180ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ---------- DARK theme: ink surfaces (kitchen, customer brand bands) ---- */ [data-theme="dark"] { --color-bg: var(--cap-green); --color-surface: var(--cap-green-raised); --color-surface-sunken: var(--cap-green-deep); --color-text: var(--cap-cream); --color-text-muted: var(--cap-sage-mist); --color-border: var(--cap-green-hover); /* decorative only */ --color-border-strong: var(--cap-sage-edge); --color-focus: var(--cap-cream); --color-link: var(--cap-cream); --color-primary-bg: var(--cap-cream); --color-primary-bg-hover:var(--cap-mozzarella); --color-primary-text: var(--cap-green-deep); --color-cta-bg: var(--cap-tomato-ink); --color-cta-bg-hover: var(--cap-green-raised); --color-cta-text: var(--cap-cream); --color-cta-border: var(--cap-tomato-ink); --color-danger-text: var(--cap-tomato-glow); --color-success-text: var(--cap-basil-glow); --color-warning-text: var(--cap-crust); --chip-new-bg: var(--cap-cream); --chip-new-text: var(--cap-green-deep); --chip-progress-bg: var(--cap-crust); --chip-progress-text: var(--cap-green-deep); --chip-ready-bg: var(--cap-basil-glow); --chip-ready-text: var(--cap-green-deep); --chip-problem-bg: var(--cap-tomato-glow); --chip-problem-text: var(--cap-green-deep); --chip-neutral-bg: var(--cap-sage-mist); --chip-neutral-text: var(--cap-green-deep); } /* A dark band paints its own surface: data-theme="dark" switches the tokens, and without this a hero or band on a cream page showed cream text on cream (the dark-band bug of the audit, fixed here for the whole site). */ [data-theme="dark"] { background: var(--color-bg); color: var(--color-text); } /* ---------- CALM density: staff screens (tablet, accounting, staff-admin) -- One size ramp, bigger base, fewer steps, no display face in the UI. */ [data-density="calm"] { --text-xs: 0.9375rem; /* 15px never smaller than this on staff screens */ --text-sm: 1rem; /* 16px secondary */ --text-base: 1.125rem; /* 18px body, table cells */ --text-lg: 1.375rem; /* 22px card titles, totals */ --text-xl: 1.75rem; /* 28px page title */ --text-2xl: 2rem; /* 32px key figures */ --text-3xl: 2.5rem; /* 40px one headline number per screen */ --text-price: 1.125rem; --leading-body: 1.45; --tap-min: 48px; --radius-card-expressive: var(--radius-md); --shadow-sticker: var(--shadow-soft); --shadow-sticker-press: var(--shadow-soft); } /* ---------- Kitchen step on top of calm: read at arm's length ------------ */ [data-density="calm"][data-screen="kitchen"] { --text-sm: 1.125rem; /* 18px age, notes */ --text-base: 1.375rem; /* 22px order lines */ --text-lg: 1.75rem; /* 28px item emphasis */ --text-xl: 2.25rem; /* 36px order number */ --text-2xl: 2.75rem; /* 44px */ --tap-min: 56px; /* the Done button uses --tap-done (72px), see design-system.md */ } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } } /* ---------- Additions (Pippo, S4, 2026-09-26; for Iris's S12 audit) ------- Built only from palette colours above; each pair is in the contrast test. - brand-text-muted / brand-border: secondary text and outlines on the green header bar of staff pages (same values as the dark theme's muted text and input border). - overlay: the dimmed backdrop behind modals (was plain black). - chip-channel-*: the kitchen's order-channel badges. They always carry a word ("Online takeaway", ...); colour is never the only signal. */ :root { --color-brand-text-muted: var(--cap-sage-mist); --color-brand-border: var(--cap-sage-edge); --color-overlay: rgb(20 18 16 / 0.6); --chip-channel-text: var(--cap-green-deep); --chip-channel-online-takeaway: var(--cap-cream); --chip-channel-online-delivery: var(--cap-tomato-glow); --chip-channel-dine-in: var(--cap-basil-glow); --chip-channel-in-store-takeaway: var(--cap-crust); --chip-channel-unknown: var(--cap-sage-mist); } /* ---------- Logo in headers (sizes from the design system, section 7) ---- */ .brand-logo { display: block; height: auto; } .brand-logo--site { width: 160px; } /* customer header: 160-240 px */ .brand-logo--staff { width: 120px; } /* staff header: 120-140 px */ .brand-logo--hero { width: min(420px, 80vw); margin: 0 auto; } .brand-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); } /* S12 L1: clear space, was space-3 */ /* ---------- Order numbers and codes (S12 L2): monospace, digits equal width */ .num-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- Language switcher (EN / NL / IT), drawn by /i18n/i18n.js into every
. Works on light and dark surfaces: it inherits the text colour and marks the chosen language with a filled pill in the primary pair (tested in brand-contrast.test.js). */ .lang-switcher { display: inline-flex; gap: var(--space-1); align-items: center; } .lang-btn { min-height: max(var(--tap-min), 3rem); /* 48 px, Pax S15 */ min-width: max(var(--tap-min), 3rem); padding: 0 var(--space-2); border: var(--border-width) solid currentColor; border-radius: var(--radius-pill); background: transparent; color: inherit; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; } .lang-btn[aria-pressed="true"] { background: var(--color-primary-bg); color: var(--color-primary-text); border-color: var(--color-primary-bg); } /* ---------- Focus states (S12 M1): one shared ring, every page deletes its own "outline: none" and relies on this instead. Green on cream 10.46:1, orange on green 5.83:1; both already in tests/unit/brand-contrast.test.js. */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--focus-offset); } /* ---------- Disabled controls (S12 M2): fade, never swap to a different, near-invisible fill. Works on both themes since it dims whatever colour the button already has. */ button:disabled, .btn:disabled, [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* ---------- Inline confirm (S12 staff-admin): a destructive action's confirm step lives in the page, never a browser confirm() dialog. Swaps the triggering button for a short prompt with its own Cancel/confirm pair; brand.test.js checks no page calls window.confirm for staff-admin's destructive actions. */ .inline-confirm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .inline-confirm-text { font-size: var(--text-sm); color: var(--color-text); } /* ---------- Missing-fact marker (Pippo, S5, 2026-09-26) ------------------- Every fact the user has not supplied yet (story, address, hours, phone, legal details) is shown as a visible marker chip, never invented. scripts/check-to-fill.js fails while any marker is left in src/; run it before every push (docs/DEPLOYMENT.md). Uses the tested "problem" chip pair on both light and dark surfaces. */ .to-fill { display: inline-block; background: var(--chip-problem-bg); color: var(--chip-problem-text); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); /* S12: vertical padding so stacked chips do not touch */ margin-block: var(--space-1); font-weight: var(--weight-bold); font-style: normal; } /* ========================================================================== FINAL LOGO (the marble statue, chosen 2026-10-05; the user ordered the whole website to use its colours on 2026-10-07). Pack: 03 WiP/Projects/Restaurant Business/2026-10-05-logo-final-statua-marmo/final/. The palette is the one above for EVERY page (public site, tablet, staff apps); the old green palette and Luckiest Guy are gone. What stays scoped to the coming-soon site is only its larger type and spacing scale. Small red text uses --cap-tomato-ink (5.12:1 on cream); the disc red is for shapes and large display text only. Every pair is in brand-contrast.test.js. ========================================================================== */ :root { --cap-red: #D23824; /* the disc: shapes, large display text */ --cap-red-text: #C0261A; /* small text and button fill on cream */ --cap-ink: #141210; /* the line work; text; dark surfaces */ --cap-ink-raised: #211D1A; /* card on ink */ --cap-cream-b3: #F6EDE0; /* the paper */ --cap-paper-card: #FBF6EC; /* card on cream */ --cap-ink-muted: #5A5047; /* muted text on cream */ --cap-cream-muted:#D9CDBB; /* muted text on ink */ --cap-ink-line: #CBBFAC; /* decorative lines on cream */ --color-brand-text-muted: var(--cap-cream-muted); --color-brand-border: var(--cap-cream-muted); --accent-display: var(--cap-red); --radius-card-expressive: var(--radius-md); --shadow-soft: none; } body[data-coming-soon] { /* the coming-soon type scale (Pax brief 2026-10-03), mobile first; 8 px grid */ --text-base: 1.0625rem; /* 17 */ --text-lg: 1.25rem; /* 20 */ --text-item: 1.5rem; /* 24 item name */ --text-2xl: 1.75rem; /* 28 H2 */ --text-3xl: 2.25rem; /* 36 H1 */ --leading-body: 1.6; --page-gutter: 1.25rem; /* 20 */ --page-max: 68.75rem; /* 1100 */ } @media (min-width: 860px) { body[data-coming-soon] { --text-base: 1.125rem; /* 18 */ --text-item: 1.75rem; /* 28 */ --text-2xl: 2.5rem; /* 40 */ --text-3xl: 4rem; /* 64 */ --page-gutter: 3rem; /* 48 */ } }