/* Gustia base stylesheet — vanilla CSS, OKLCH design tokens, @layer cascade. Linked via `stylesheet_link_tag :app`. Split into multiple files later if it grows; keep the @layer order declaration first wherever it lives. */ @layer reset, base, components, utilities; /* ─── Design tokens (fresh white & green palette) ───────────────────────── Crisp white surfaces, a vivid leafy-green primary, deep-green + soft-lime accents, chunky rounded type and big soft shadows — bright and fresh. Light/dark values are paired via light-dark(); which side renders is driven by `color-scheme` on :root — `light dark` follows the OS, and the theme toggle pins it to `light` or `dark` (persisted in localStorage; applied pre-paint in the ). No prefers-color-scheme media query needed. */ :root { color-scheme: light dark; /* Brand */ --color-canvas: light-dark(oklch(98.5% 0.008 150), oklch(22% 0.02 155)); --color-surface: light-dark(oklch(100% 0 0), oklch(26% 0.022 155)); --color-ink: light-dark(oklch(26% 0.03 155), oklch(95% 0.02 150)); --color-ink-soft: light-dark(oklch(50% 0.025 155), oklch(80% 0.02 150)); --color-copper: light-dark(oklch(62% 0.16 150), oklch(72% 0.16 150)); /* primary — green */ --color-copper-strong: light-dark(oklch(53% 0.17 150), oklch(80% 0.15 150)); --color-brown: light-dark(oklch(40% 0.09 155), oklch(70% 0.13 150)); /* secondary — deep green */ --color-sun: light-dark(oklch(85% 0.15 128), oklch(82% 0.14 128)); /* soft lime accent */ --color-line: light-dark(oklch(92% 0.012 150), oklch(36% 0.02 155)); --color-heart: oklch(60% 0.15 150); /* soft accent (tagline) */ --color-on-accent: light-dark(oklch(99.5% 0.005 150), oklch(18% 0.02 155)); /* Status hues (badges) — identical in both themes */ --color-status-pending: oklch(78% 0.13 85); --color-status-confirmed: oklch(65% 0.13 230); --color-status-ready: oklch(68% 0.14 280); --color-status-delivered: oklch(66% 0.15 150); --color-status-cancelled: oklch(62% 0.13 25); /* Typography — rounded, friendly (Google Fonts, with rounded system fallbacks) */ --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-sm: 0.85rem; --text-base: 1.02rem; --text-lg: 1.3rem; --text-xl: 1.9rem; --text-display: clamp(2.4rem, 6vw, 4rem); /* Spacing / shape — generous rounding */ --space: 1rem; --space-half: 0.5rem; --space-2: 2rem; --radius: 1.1rem; --radius-lg: 1.75rem; --radius-pill: 99rem; --shadow-card: 0 2px 6px light-dark(oklch(40% 0.03 150 / 0.07), oklch(0% 0 0 / 0.45)), 0 14px 34px light-dark(oklch(45% 0.08 150 / 0.10), oklch(0% 0 0 / 0.35)); /* Tinted glow follows the active scheme's primary via color-mix. */ --shadow-pop: 0 10px 24px light-dark(color-mix(in oklch, var(--color-copper) 30%, transparent), oklch(0% 0 0 / 0.5)); /* Layering */ --z-nav: 30; --z-flash: 40; --z-modal: 50; } /* ─── Color schemes ─────────────────────────────────────────────────────── Admin-selectable palettes. Each block redefines only the brand tokens (status hues, type, spacing and shadows stay shared), keeping its own light-dark() pairs so every scheme automatically has a light and a dark variant. Applied via `data-scheme` on (server-rendered from RestaurantSetting). "green" is also the :root default, but it still needs its own block below: the Settings swatches wrap each option in [data-scheme] to preview that palette, so without a green block the green option would inherit whatever scheme is currently active. Attribute-scoped (not html-scoped) on purpose so those previews work. Keep in sync with RestaurantSetting::COLOR_SCHEMES. */ [data-scheme="green"] { --color-canvas: light-dark(oklch(98.5% 0.008 150), oklch(22% 0.02 155)); --color-surface: light-dark(oklch(100% 0 0), oklch(26% 0.022 155)); --color-ink: light-dark(oklch(26% 0.03 155), oklch(95% 0.02 150)); --color-ink-soft: light-dark(oklch(50% 0.025 155), oklch(80% 0.02 150)); --color-copper: light-dark(oklch(62% 0.16 150), oklch(72% 0.16 150)); --color-copper-strong: light-dark(oklch(53% 0.17 150), oklch(80% 0.15 150)); --color-brown: light-dark(oklch(40% 0.09 155), oklch(70% 0.13 150)); --color-sun: light-dark(oklch(85% 0.15 128), oklch(82% 0.14 128)); --color-line: light-dark(oklch(92% 0.012 150), oklch(36% 0.02 155)); --color-heart: oklch(60% 0.15 150); --color-on-accent: light-dark(oklch(99.5% 0.005 150), oklch(18% 0.02 155)); } [data-scheme="ocean"] { --color-canvas: light-dark(oklch(98% 0.012 240), oklch(22% 0.025 250)); --color-surface: light-dark(oklch(100% 0 0), oklch(26% 0.03 250)); --color-ink: light-dark(oklch(26% 0.04 250), oklch(95% 0.02 240)); --color-ink-soft: light-dark(oklch(50% 0.03 250), oklch(80% 0.02 240)); --color-copper: light-dark(oklch(58% 0.15 245), oklch(72% 0.15 245)); --color-copper-strong: light-dark(oklch(50% 0.16 245), oklch(80% 0.14 245)); --color-brown: light-dark(oklch(42% 0.10 255), oklch(70% 0.12 245)); --color-sun: light-dark(oklch(82% 0.13 200), oklch(80% 0.12 200)); --color-line: light-dark(oklch(92% 0.014 240), oklch(36% 0.025 250)); --color-heart: oklch(60% 0.15 245); --color-on-accent: light-dark(oklch(99% 0.005 240), oklch(18% 0.02 250)); } /* Vivid, punchy red-orange — kept distinct from the softer amber "copper". */ [data-scheme="sunset"] { --color-canvas: light-dark(oklch(98% 0.014 45), oklch(22% 0.03 33)); --color-surface: light-dark(oklch(100% 0 0), oklch(26% 0.035 33)); --color-ink: light-dark(oklch(28% 0.06 33), oklch(95% 0.02 50)); --color-ink-soft: light-dark(oklch(50% 0.05 33), oklch(80% 0.02 50)); --color-copper: light-dark(oklch(64% 0.19 38), oklch(73% 0.18 42)); --color-copper-strong: light-dark(oklch(56% 0.21 33), oklch(80% 0.16 42)); --color-brown: light-dark(oklch(46% 0.15 28), oklch(73% 0.15 40)); --color-sun: light-dark(oklch(82% 0.16 68), oklch(80% 0.15 68)); --color-line: light-dark(oklch(92% 0.02 45), oklch(36% 0.03 33)); --color-heart: oklch(62% 0.20 26); --color-on-accent: light-dark(oklch(99% 0.006 50), oklch(18% 0.025 33)); } [data-scheme="berry"] { --color-canvas: light-dark(oklch(98% 0.012 330), oklch(22% 0.03 320)); --color-surface: light-dark(oklch(100% 0 0), oklch(26% 0.035 320)); --color-ink: light-dark(oklch(28% 0.05 330), oklch(95% 0.02 330)); --color-ink-soft: light-dark(oklch(50% 0.04 330), oklch(80% 0.02 330)); --color-copper: light-dark(oklch(56% 0.18 330), oklch(72% 0.16 330)); --color-copper-strong: light-dark(oklch(48% 0.20 330), oklch(80% 0.15 330)); --color-brown: light-dark(oklch(45% 0.14 310), oklch(72% 0.13 330)); --color-sun: light-dark(oklch(82% 0.13 350), oklch(80% 0.12 350)); --color-line: light-dark(oklch(92% 0.016 330), oklch(36% 0.03 320)); --color-heart: oklch(62% 0.19 340); --color-on-accent: light-dark(oklch(99% 0.005 330), oklch(18% 0.02 320)); } [data-scheme="charcoal"] { --color-canvas: light-dark(oklch(97% 0.003 250), oklch(20% 0.006 250)); --color-surface: light-dark(oklch(100% 0 0), oklch(25% 0.008 250)); --color-ink: light-dark(oklch(25% 0.01 250), oklch(94% 0.005 250)); --color-ink-soft: light-dark(oklch(48% 0.008 250), oklch(78% 0.006 250)); --color-copper: light-dark(oklch(42% 0.03 250), oklch(82% 0.02 250)); --color-copper-strong: light-dark(oklch(32% 0.03 250), oklch(90% 0.02 250)); --color-brown: light-dark(oklch(40% 0.02 250), oklch(72% 0.015 250)); --color-sun: light-dark(oklch(80% 0.02 250), oklch(78% 0.015 250)); --color-line: light-dark(oklch(90% 0.004 250), oklch(34% 0.008 250)); --color-heart: oklch(55% 0.02 250); --color-on-accent: light-dark(oklch(99% 0 0), oklch(16% 0.006 250)); } /* The original Rafatouille menu look: cream canvas, espresso ink, a soft golden copper/bronze accent — muted and yellower than sunset's fiery orange, so the two warm palettes read distinctly. The palette these token names were born from. */ [data-scheme="copper"] { --color-canvas: light-dark(oklch(95% 0.02 80), oklch(24% 0.018 65)); --color-surface: light-dark(oklch(99% 0.01 80), oklch(29% 0.02 65)); --color-ink: light-dark(oklch(28% 0.035 65), oklch(93% 0.018 80)); --color-ink-soft: light-dark(oklch(45% 0.03 65), oklch(78% 0.018 75)); --color-copper: light-dark(oklch(61% 0.10 68), oklch(73% 0.11 72)); --color-copper-strong: light-dark(oklch(53% 0.11 66), oklch(80% 0.10 72)); --color-brown: light-dark(oklch(43% 0.06 62), oklch(70% 0.08 68)); --color-sun: light-dark(oklch(82% 0.11 90), oklch(80% 0.11 90)); --color-line: light-dark(oklch(88% 0.022 80), oklch(38% 0.022 65)); --color-heart: oklch(60% 0.11 62); --color-on-accent: light-dark(oklch(99% 0.01 80), oklch(20% 0.018 65)); } /* ─── Reset ───────────────────────────────────────────────────────────── */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } img, picture, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } } /* ─── Base ────────────────────────────────────────────────────────────── */ @layer base { body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--color-ink); background: var(--color-canvas); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-xl); } a { text-decoration: none; } a:hover { color: var(--color-copper-strong); } } /* ─── Components ──────────────────────────────────────────────────────── */ @layer components { .container { width: min(72rem, 100% - 2 * var(--space)); margin-inline: auto; } .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space); } /* Playful sticker-style section label */ .pill-header { display: inline-block; background: var(--color-copper); color: var(--color-on-accent); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4em 1.2em; border-radius: var(--radius-pill); font-size: var(--text-sm); box-shadow: var(--shadow-pop); } .btn { --btn-bg: var(--color-surface); --btn-color: var(--color-ink); --btn-border: var(--color-line); display: inline-flex; align-items: center; gap: var(--space-half); padding: 0.7em 1.4em; border: 2px solid var(--btn-border); border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-color); font-family: var(--font-display); font-weight: 700; transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; } .btn:hover { transform: translateY(-2px); filter: brightness(1.02); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; } .btn--primary { --btn-bg: var(--color-copper); --btn-color: var(--color-on-accent); --btn-border: transparent; box-shadow: var(--shadow-pop); } .btn--primary:hover { box-shadow: 0 14px 30px color-mix(in oklch, var(--color-copper) 40%, transparent); } .btn--plain { --btn-bg: transparent; --btn-border: transparent; padding-inline: 0.4em; box-shadow: none; } .btn--plain:hover { transform: none; color: var(--color-copper-strong); } .btn--danger { --btn-bg: transparent; --btn-color: var(--color-status-cancelled); --btn-border: var(--color-status-cancelled); box-shadow: none; } .btn--danger:hover { --btn-bg: color-mix(in oklch, var(--color-status-cancelled) 12%, transparent); } .field { display: flex; flex-direction: column; gap: 0.35em; } .field--inline { flex-direction: row; align-items: center; gap: var(--space-half); flex-wrap: wrap; } .field > label { font-size: var(--text-sm); color: var(--color-ink-soft); } .input { width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); } .input:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 1px; } .input[readonly] { background: color-mix(in oklch, var(--color-ink) 6%, var(--color-surface)); color: var(--color-ink-soft); cursor: not-allowed; } .input--invalid { border-color: var(--color-status-cancelled); background: color-mix(in oklch, var(--color-status-cancelled) 8%, var(--color-surface)); } .input--invalid:focus-visible { outline-color: var(--color-status-cancelled); } .grams-control { display: inline-flex; flex-direction: column; gap: 0.2em; } .grams-error { color: var(--color-status-cancelled); font-size: var(--text-sm); font-weight: 700; } .field-error { color: var(--color-status-cancelled); font-size: var(--text-sm); font-weight: 700; margin: 0; } /* Status badges — color driven by --badge-hue set per status modifier */ .badge { --badge-hue: var(--color-ink-soft); display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0.4em; padding: 0.2em 0.7em; border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--badge-hue); background: color-mix(in oklch, var(--badge-hue) 16%, var(--color-surface)); border: 1px solid color-mix(in oklch, var(--badge-hue) 35%, transparent); } .badge--pending { --badge-hue: var(--color-status-pending); } .badge--confirmed { --badge-hue: var(--color-status-confirmed); } .badge--ready { --badge-hue: var(--color-status-ready); } .badge--delivered { --badge-hue: var(--color-status-delivered); } .badge--cancelled { --badge-hue: var(--color-status-cancelled); } } /* ─── Utilities ───────────────────────────────────────────────────────── */ @layer utilities { .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .gap { gap: var(--space); } .gap-half { gap: var(--space-half); } .stack > * + * { margin-block-start: var(--space); } .muted { color: var(--color-ink-soft); } .text-center { text-align: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ─── Layout & feature components ─────────────────────────────────────── */ @layer components { .flash { padding: 0.7em 1em; border-radius: var(--radius); border: 1px solid color-mix(in oklch, var(--flash-hue) 35%, transparent); background: color-mix(in oklch, var(--flash-hue) 14%, var(--color-surface)); color: var(--flash-hue); } .flash--notice { --flash-hue: var(--color-status-delivered); } .flash--alert { --flash-hue: var(--color-status-cancelled); } /* Public (sign-in / landing) centered panel */ .public { min-height: 100dvh; display: grid; place-items: center; padding: var(--space); } .public__panel { width: min(28rem, 100%); padding: var(--space-2); } .public__panel .field { text-align: start; } /* Admin top bar */ .admin-bar { height: 3.25rem; background: var(--color-surface); border-block-end: 1px solid var(--color-line); position: sticky; top: 0; z-index: var(--z-nav); } .admin-bar__brand { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; } /* Pill light/dark switch: sun · sliding knob track · moon */ .theme-switch { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem; background: none; border: 0; cursor: pointer; line-height: 0; } .theme-switch__icon { width: 1.25rem; height: 1.25rem; color: var(--color-ink-soft); transition: color 0.2s; } .theme-switch[aria-checked="false"] .theme-switch__icon--sun, .theme-switch[aria-checked="true"] .theme-switch__icon--moon { color: var(--color-copper); } .theme-switch__track { position: relative; width: 3.1rem; height: 1.7rem; border-radius: 999px; background: var(--color-surface-sunken, var(--color-surface)); border: 1px solid var(--color-line); box-shadow: inset 0 1px 3px color-mix(in oklch, var(--color-ink) 18%, transparent); transition: background 0.2s; } .theme-switch__knob { position: absolute; top: 50%; left: 0.18rem; transform: translateY(-50%); width: 1.3rem; height: 1.3rem; border-radius: 50%; background: light-dark(oklch(99% 0 0), oklch(80% 0.02 250)); box-shadow: 0 1px 3px color-mix(in oklch, var(--color-ink) 35%, transparent), 0 1px 1px color-mix(in oklch, var(--color-ink) 20%, transparent); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .theme-switch[aria-checked="true"] .theme-switch__knob { transform: translate(1.4rem, -50%); } .theme-fab { position: fixed; top: var(--space); right: var(--space); z-index: var(--z-nav); } .locale-toggle { display: inline-flex; gap: 0.4em; font-size: var(--text-sm); } .locale-toggle a { color: var(--color-ink-soft); } .locale-toggle a.is-active { color: var(--color-copper); font-weight: 700; } /* Filter bar */ .filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space); align-items: end; margin-block-end: var(--space-2); } .filters > * { min-width: 0; } @media (max-width: 50rem) { .filters { grid-template-columns: 1fr 1fr; } } @media (max-width: 34rem) { .filters { grid-template-columns: 1fr; } } .menu-search { margin-block-end: var(--space-2); max-width: 22rem; } /* Orders table */ .orders-table { width: 100%; border-collapse: collapse; } .orders-table th, .orders-table td { text-align: start; padding: 0.6em 0.7em; border-block-end: 1px solid var(--color-line); } .orders-table th { font-size: var(--text-sm); color: var(--color-ink-soft); font-weight: 600; } .orders-table tbody tr:hover { background: color-mix(in oklch, var(--color-copper) 6%, transparent); } .pager { padding-block-start: var(--space); } /* Menu admin */ .thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-line); } .thumb--placeholder { display: grid; place-items: center; background: color-mix(in oklch, var(--color-ink) 7%, var(--color-surface)); font-size: 1.4rem; } .menu-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space); } .menu-section { display: block; } .menu-section:hover { border-color: var(--color-copper); } .translated-field { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-half) var(--space); } .translated-field legend { padding-inline: 0.4em; color: var(--color-ink-soft); font-size: var(--text-sm); } /* Drag-to-reorder */ [data-sortable-item] { cursor: grab; } [data-sortable-item].is-dragging { opacity: 0.5; background: color-mix(in oklch, var(--color-copper) 12%, transparent); } .drag-handle { color: var(--color-ink-soft); user-select: none; text-align: center; } } /* ─── Storefront ──────────────────────────────────────────────────────── */ @layer components { .store-bar { min-height: 3.5rem; background: var(--color-surface); border-block-end: 1px solid var(--color-line); position: sticky; top: 0; z-index: var(--z-nav); } /* Restaurant wordmark: keep the display font/colour, but let a long name wrap to a new line rather than overflow or collide with the nav. */ .store-bar__brand { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--color-copper); line-height: 1.15; overflow-wrap: break-word; min-width: 0; padding-block: 0.35rem; } .store-bar__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space); min-height: 3.5rem; } .store-bar__nav { display: flex; align-items: center; gap: var(--space); } .store-bar__secondary { display: flex; align-items: center; gap: var(--space); } /* .store-bar__toggle inherits .nav-toggle's display:none — shown only on mobile. */ /* "Built on Gustia" footnote on client views + the platform landing page. */ .store-foot { text-align: center; padding-block: var(--space-2); } .store-foot a { color: var(--color-ink-soft); font-size: var(--text-sm); } .store-foot a:hover { color: var(--color-copper); } .landing__brand { font-family: var(--font-display); font-weight: 800; color: var(--color-copper); font-size: 2.4rem; line-height: 1.1; } .cart-link { text-decoration: none; } .cart-count { font-variant-numeric: tabular-nums; } .cart-icon { width: 1.2em; height: 1.2em; flex: none; } .icon { width: 1.2em; height: 1.2em; flex: none; } .row-gear .icon { width: 1.4rem; height: 1.4rem; } .thumb--placeholder { color: var(--color-copper); } .thumb--placeholder .icon { width: 2.1rem; height: 2.1rem; } /* Playful hero on the storefront landing */ .hero { text-align: center; padding-block: var(--space-2) var(--space); } .hero__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: 1.02; margin-block: 0.3em 0.2em; } .hero__title em { color: var(--color-copper); font-style: normal; } .hero__tagline { font-size: var(--text-lg); color: var(--color-ink-soft); } .options { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-half); margin-block: var(--space-half) var(--space); } .option { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.7em; border: 1px solid var(--color-line); border-radius: var(--radius); cursor: pointer; } .option:has(:checked) { border-color: var(--color-copper); background: color-mix(in oklch, var(--color-copper) 8%, transparent); } .option:has(:disabled) { opacity: 0.5; cursor: not-allowed; } .option__name { flex: 1; } .option__price { color: var(--color-ink-soft); font-size: var(--text-sm); } .input--grams { width: 5rem; } .input--qty { width: 4.5rem; } .builder-total { font-size: var(--text-lg); } .builder-footer { flex-wrap: wrap; } /* Stepped builder — one step expanded at a time, the rest collapsed */ .step { /*
defaults to min-width: min-content, which refuses to shrink below its content — that let the step header (and the selection pill) overflow instead of truncating. Reset it so children can be constrained. */ min-width: 0; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 0.8em 1em; transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease; } .step + .step { margin-block-start: var(--space-half); } .step__head { display: flex; align-items: center; gap: var(--space-half); justify-content: space-between; } .step__title { font-family: var(--font-display); font-weight: 700; flex: none; white-space: nowrap; } .step__summary { flex: 1; text-align: end; } .step__edit { flex: none; white-space: nowrap; } /* A made selection lights up as the beacon pill (.pill-header). A long name is truncated with an ellipsis so it never wraps the row or shoves "Alterar" off. */ .step__summary.is-selected { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-start: auto; background: var(--color-copper); color: #fff; -webkit-text-fill-color: #fff; -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.45); paint-order: stroke fill; font-family: var(--font-display); font-weight: 700; padding: 0.3em 1em; border-radius: var(--radius-pill); font-size: var(--text-sm); box-shadow: var(--shadow-pop); } .step__body { margin-block-start: var(--space); } /* Collapsed / upcoming visuals only apply once the controller engages (.is-stepped) */ .step__summary, .step__edit { display: none; } .is-stepped .step:not(.is-active) > .step__body { display: none; } .is-stepped .step.is-active { border-color: var(--color-copper); box-shadow: var(--shadow-card); } .is-stepped .step.is-done .step__summary { display: block; } .is-stepped .step.is-done .step__edit { display: inline-flex; } .is-stepped .step.is-upcoming { opacity: 0.5; } /* Sticky order bar on the menu */ .order-bar { position: sticky; bottom: var(--space); z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--space); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); padding: 0.55em 0.8em 0.55em 1.3em; margin-block-start: var(--space); } .order-bar.is-empty { justify-content: center; box-shadow: none; opacity: 0.8; } .order-bar__summary { font-size: var(--text-lg); } /* Toasts */ .toasts { position: fixed; inset-block-start: 4.5rem; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-half); z-index: var(--z-flash); pointer-events: none; } .toast { background: var(--color-copper); color: var(--color-on-accent); font-weight: 700; padding: 0.6em 1.2em; border-radius: var(--radius-pill); box-shadow: var(--shadow-pop); animation: toast-in 180ms ease-out; } .toast--alert { background: var(--color-status-cancelled); } @keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } } /* Custom confirmation modal (replaces window.confirm) */ .confirm { margin: auto; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 0; width: min(26rem, calc(100% - 2rem)); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-pop); } .confirm::backdrop { background: oklch(0% 0 0 / 0.45); backdrop-filter: blur(2px); } .confirm[open] { animation: toast-in 160ms ease-out; } .confirm__box { padding: var(--space-2); } .confirm__message { font-size: var(--text-lg); margin: 0; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space); } .menu-card { display: flex; flex-direction: column; text-align: center; align-items: center; transition: transform 150ms ease, box-shadow 150ms ease; } .menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card), var(--shadow-pop); } .menu-card--recent { border-color: transparent; box-shadow: var(--shadow-card), 0 0 0 3px var(--color-sun); } .account-order { color: inherit; text-decoration: none; transition: transform 150ms ease, box-shadow 150ms ease; } .account-order:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), var(--shadow-pop); } .cart-line { display: flex; align-items: center; gap: var(--space); justify-content: space-between; flex-wrap: wrap; } .cart-line__info { flex: 1 1 11rem; min-width: 0; } .cart-line__actions { display: flex; align-items: center; gap: var(--space); } .cart-line__price { white-space: nowrap; } .cart-line__remove { padding-inline: 0.4em; } /* Quantity stepper on cart lines */ .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-pill); overflow: hidden; flex: none; } .qty-stepper form { margin: 0; } .qty-stepper__btn { border: 0; background: var(--color-surface); color: var(--color-ink); font-size: 1.1rem; font-weight: 700; line-height: 1; width: 2rem; height: 2rem; cursor: pointer; } .qty-stepper__btn:hover:not(:disabled) { background: color-mix(in oklch, var(--color-copper) 12%, var(--color-surface)); } .qty-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; } .qty-stepper__count { min-width: 2rem; text-align: center; font-weight: 700; } .price-was { text-decoration: line-through; font-size: var(--text-sm); } .discount-amount { color: var(--color-copper); } .combo-info { background: var(--color-copper); color: var(--color-on-accent); border: none; } .combo-tiers { margin: 0; padding-inline-start: 1.1rem; font-size: var(--text-sm); opacity: 0.9; } .combo-nudge { margin: 0; font-weight: 700; color: var(--color-on-accent); } .checkout-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space); align-items: start; } .checkout-grid > * { min-width: 0; } @media (max-width: 48rem) { .checkout-grid { grid-template-columns: 1fr; } } /* Wide tables scroll horizontally rather than overflow the viewport */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ─── Mobile ──────────────────────────────────────────────────────── */ @media (max-width: 40rem) { :root { --space-2: 1.25rem; } /* Compact top bar: keep brand + cart + hamburger; collapse the theme toggle and sign-in into a dropdown behind the hamburger. */ .store-bar__bar { padding-block: 0.5rem; } .store-bar__brand { font-size: var(--text-lg); } .store-bar__nav { gap: 0.6rem; } .store-bar__toggle { display: inline-flex; } .store-bar__secondary { display: none; position: absolute; top: 100%; right: var(--space); flex-direction: column; align-items: flex-start; gap: 0.85rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space); box-shadow: var(--shadow-card); min-width: 11rem; z-index: var(--z-nav); } .store-bar.is-open .store-bar__secondary { display: flex; } /* Stack split rows; keep buttons tappable */ .cart-line { gap: 0.6rem; } .cart-line__actions { width: 100%; justify-content: space-between; gap: 0.5rem; } .order-bar { flex-wrap: wrap; justify-content: center; gap: 0.5rem; text-align: center; } .builder-footer { gap: 0.6rem; } .btn { padding: 0.65em 1.1em; } /* Side/protein option rows: name + control stay readable */ .options { grid-template-columns: 1fr; } /* Full-width primary actions read better on a phone */ .public__panel { padding: var(--space); } } } /* ─── Admin shell (left sidebar) ──────────────────────────────────────── */ @layer components { .admin-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100dvh; } .admin-main { min-width: 0; padding-inline-start: var(--space-2); } /* gap from sidebar; let wide tables shrink/scroll instead of overflowing */ /* Page header: title + a "New …" action. Wraps the action below the title on narrow screens so the row never overflows the viewport. */ .admin-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-half) var(--space); margin-block-end: var(--space); } .admin-head > h1 { min-width: 0; overflow-wrap: break-word; } .sidebar { display: flex; flex-direction: column; gap: 0.4rem; background: var(--color-surface); border-inline-end: 1px solid var(--color-line); padding: var(--space); position: sticky; top: 0; height: 100dvh; } .sidebar__top { display: flex; align-items: center; justify-content: space-between; } .sidebar__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-copper); margin-block-end: var(--space); line-height: 1.15; overflow-wrap: break-word; min-width: 0; } /* Hamburger — hidden on desktop, shown when the sidebar collapses on mobile. */ .nav-toggle { display: none; flex-direction: column; gap: 4px; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius); cursor: pointer; } .nav-toggle__bar { display: block; width: 1.2rem; height: 2px; background: var(--color-ink); border-radius: 2px; } .sidebar__nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; } .sidebar__label { font-size: var(--text-sm); color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-block-start: var(--space); } .sidebar__item { display: block; padding: 0.5em 0.75em; border-radius: var(--radius); color: var(--color-ink); } .sidebar__item:hover { background: color-mix(in oklch, var(--color-copper) 8%, transparent); } .sidebar__item.is-active { background: color-mix(in oklch, var(--color-copper) 16%, transparent); color: var(--color-copper-strong); font-weight: 700; } .sidebar__footer { border-block-start: 1px solid var(--color-line); padding-block-start: var(--space); } /* Order list: whole row navigates to the order */ .order-row { cursor: pointer; } /* Flush the table edges with the page title / count above it */ .orders-table th:first-child, .orders-table td:first-child { padding-inline-start: 0; } .orders-table th:last-child, .orders-table td:last-child { padding-inline-end: 0; } /* Gear that opens a row's edit page */ .row-gear { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; font-size: 1.5rem; line-height: 1; border-radius: var(--radius); color: var(--color-ink-soft); } .row-gear:hover { background: color-mix(in oklch, var(--color-copper) 12%, transparent); color: var(--color-copper-strong); } .delete-zone { margin-block-start: var(--space); } /* Analytics dashboard */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space); } .stat { display: flex; flex-direction: column; gap: 0.25rem; } .stat__value { font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat__label { font-size: var(--text-sm); color: var(--color-ink-soft); } .status-breakdown { list-style: none; margin: var(--space) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space); } .status-breakdown li { display: inline-flex; align-items: center; gap: 0.4rem; } .field--submit { justify-content: end; } @media (max-width: 48rem) { .admin-shell { grid-template-columns: 1fr; } .admin-main { padding-inline: var(--space); } /* breathing room from the screen edges */ /* Sidebar becomes a slim sticky top bar; nav collapses behind the hamburger. */ .sidebar { position: sticky; top: 0; z-index: var(--z-nav); height: auto; gap: 0; padding: 0.5rem var(--space); border-inline-end: none; border-block-end: 1px solid var(--color-line); } .sidebar__brand { margin-block-end: 0; } .nav-toggle { display: inline-flex; } .sidebar__nav, .sidebar__footer { display: none; } .sidebar.is-open .sidebar__nav { display: flex; flex-direction: column; padding-block-start: 0.5rem; } .sidebar.is-open .sidebar__footer { display: flex; margin-block-start: 0.5rem; } .sidebar__label { margin-block-start: 0.6rem; } } } /* ─── Color-scheme picker (admin settings) ──────────────────────────────── Each option is scoped to its own [data-scheme] (see the view), so the swatch inside it renders that palette's real tokens. */ @layer components { .scheme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-half); border: 0; padding: 0; margin: 0; } .scheme-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 2px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .scheme-option:has(input:checked) { border-color: var(--color-copper); box-shadow: var(--shadow-card); } .scheme-option:focus-within { outline: 2px solid var(--color-copper); outline-offset: 2px; } .scheme-swatch { display: inline-flex; flex: none; box-shadow: var(--shadow-card); border-radius: 0.4rem; } .scheme-swatch__dot { width: 1rem; height: 1.5rem; } .scheme-swatch__dot:first-child { border-radius: 0.4rem 0 0 0.4rem; } .scheme-swatch__dot:last-child { border-radius: 0 0.4rem 0.4rem 0; } .scheme-option__name { font-weight: 700; } }