/* ================================================================= QR MENU ยท base.css (Stage 5) Design tokens, reset, and primitives shared by the admin panel and the customer menu. Direction: a warm old-style serif (Fraunces) for display, set against a cool pastel palette. Structure is carried by hairlines and weight, not by drop-shadows or a single rounded-card kit. Shadows appear only under things that genuinely float (modals, menus). The five --*-color properties are written into from the `settings` table, so the whole system re-themes from the admin panel. ================================================================= */ :root { /* themeable โ€” overridden inline per request from Settings::themeStyleBlock() */ --primary-color: #6EB8E1; --secondary-color: #C8ABE6; --background-color: #EEF5FB; --text-color: #1B2A38; --card-color: #FFFFFF; /* -------------------------------------------------------------- Derived tokens. Everything is mixed toward --text-color ("strong", higher contrast) or toward --card-color / --background-color ("tint", lower contrast) โ€” never toward a hard-coded white/black โ€” so an arbitrary theme (incl. dark) stays coherent. Static fallbacks first for very old engines; color-mix wins elsewhere. -------------------------------------------------------------- */ --primary-strong: #2E8BC7; --primary-strong: color-mix(in srgb, var(--primary-color) 62%, var(--text-color)); --primary-tint: #DDEEF9; --primary-tint: color-mix(in srgb, var(--primary-color) 20%, var(--card-color)); --primary-line: color-mix(in srgb, var(--primary-color) 42%, var(--background-color)); --secondary-strong: #7B54B0; --secondary-strong: color-mix(in srgb, var(--secondary-color) 55%, var(--text-color)); --secondary-tint: #EFE6F8; --secondary-tint: color-mix(in srgb, var(--secondary-color) 24%, var(--card-color)); --ink: var(--text-color); --ink-soft: #5A6B7A; --ink-soft: color-mix(in srgb, var(--text-color) 62%, var(--background-color)); --ink-faint: color-mix(in srgb, var(--text-color) 40%, var(--background-color)); --line: #DCE6EF; --line: color-mix(in srgb, var(--text-color) 14%, var(--background-color)); --surface: var(--card-color); --surface-sunk: color-mix(in srgb, var(--card-color) 88%, var(--text-color)); --danger: #C0453B; --danger-tint: color-mix(in srgb, #C0453B 16%, var(--card-color)); --ok: #2F8F6B; --ok-tint: color-mix(in srgb, #2F8F6B 16%, var(--card-color)); --warn: #B9762A; /* text colour that sits on a --primary-strong / --danger fill: it is the surface side of the theme, always opposite --text-color */ --on-fill: var(--card-color); /* deliberately three radii, matched to element scale */ --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --shadow-pop: 0 18px 48px -16px rgba(20, 38, 56, .34); --shadow-rise: 0 8px 24px -14px rgba(20, 38, 56, .30); --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --tap: 44px; /* minimum comfortable touch target */ --page-max: 1200px; } /* ---- reset ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--background-color); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: var(--primary-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--secondary-strong); } :where(h1, h2, h3, h4) { font-weight: 600; line-height: 1.2; text-wrap: balance; } ::selection { background: var(--secondary-tint); } :focus-visible { outline: 2px solid var(--secondary-strong); outline-offset: 2px; border-radius: 3px; } /* ---- typography primitives --------------------------------- */ .display { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 560; letter-spacing: -0.01em; line-height: 1.12; } .text-soft { color: var(--ink-soft); } .text-faint { color: var(--ink-faint); } .nums { font-variant-numeric: tabular-nums; } /* ---- buttons ---------------------------------------------- */ .btn { --_bg: var(--primary-strong); --_fg: var(--on-fill); --_bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: .62rem 1.15rem; border-radius: var(--r-sm); border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); font-weight: 600; font-size: .95rem; line-height: 1; transition: filter .14s ease, background-color .14s ease, border-color .14s ease; white-space: nowrap; } .btn:hover { filter: brightness(1.06); } .btn:active { filter: brightness(.96); } .btn:disabled { opacity: .5; cursor: not-allowed; filter: none; } .btn--ghost { --_bg: transparent; --_fg: var(--primary-strong); --_bd: var(--line); } .btn--ghost:hover { --_bg: var(--surface-sunk); filter: none; } .btn--quiet { --_bg: transparent; --_fg: var(--ink-soft); --_bd: transparent; min-height: auto; padding: .4rem .6rem; } .btn--quiet:hover { --_fg: var(--ink); --_bg: var(--surface-sunk); filter: none; } .btn--danger { --_bg: var(--danger); --_fg: var(--on-fill); } .btn--danger.btn--ghost { --_bg: transparent; --_fg: var(--danger); --_bd: color-mix(in srgb, var(--danger) 35%, var(--card-color)); } .btn--sm { min-height: 34px; padding: .4rem .8rem; font-size: .85rem; } .btn--block { width: 100%; } /* ---- form controls -------------------------------------- */ .field { display: grid; gap: .4rem; margin-bottom: 1.1rem; } .field > label { font-weight: 600; font-size: .88rem; color: var(--ink); } .field .hint { font-size: .8rem; color: var(--ink-soft); } .field .hint--error { color: var(--danger); font-weight: 600; } .input, .textarea, .select { width: 100%; min-height: var(--tap); padding: .6rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); transition: border-color .14s ease, box-shadow .14s ease; } .textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--primary-strong); box-shadow: 0 0 0 3px var(--primary-tint); } .input::placeholder, .textarea::placeholder { color: var(--ink-faint); } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); } .check { display: flex; align-items: center; gap: .55rem; font-size: .92rem; cursor: pointer; } .check input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary-strong); } /* ---- badges / pills ----------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: var(--r-xs); font-size: .76rem; font-weight: 600; background: var(--surface-sunk); color: var(--ink-soft); border: 1px solid var(--line); } .badge--on { background: var(--ok-tint); color: var(--ok); border-color: transparent; } .badge--off { background: var(--surface-sunk);color: var(--ink-faint); } .badge--accent { background: var(--secondary-tint); color: var(--secondary-strong); border-color: transparent; } .badge--sale { background: var(--danger-tint); color: var(--danger); border-color: transparent; } /* ---- flash messages --------------------------------- */ .flashes { display: grid; gap: .6rem; margin-bottom: 1.25rem; } .flash { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: .9rem; } .flash::before { content: ""; flex: none; width: 4px; align-self: stretch; border-radius: 2px; background: var(--ink-faint); } .flash--success::before { background: var(--ok); } .flash--error::before { background: var(--danger); } .flash--info::before { background: var(--primary-strong); } /* ---- utilities ------------------------------------- */ .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; } .stack { display: grid; gap: 1rem; } .cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .grow { flex: 1 1 auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }