/* ============================================================ Meridian — Café & Cocktail Bar Shared stylesheet. Day = warm artisan café · Night = brass speakeasy. The customer page (index.html) toggles data-mode on . The admin page inherits the Day palette + Meridian components. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Archivo:wght@400;500;600;700&display=swap'); :root, html[data-mode="day"] { --font-display: 'Fraunces', Georgia, serif; --font-body: 'Archivo', system-ui, sans-serif; --ease: cubic-bezier(.4,0,.2,1); --bg: #F4ECDF; --surface: #FBF5EB; --surface-2: #F3E8D6; --ink: #2A1C12; --ink-soft: #6B5746; --ink-faint: #9A8773; --line: #E0D2BC; --line-strong: #D2BFA2; --accent: #B8642E; --accent-dark: #8A4620; --accent-ink: #8A4620; --on-accent: #FBF5EB; --ok: #2E7D4F; --danger: #B94A3B; --glow: rgba(184,100,46,.16); --vessel-a: #F0E4D0; --vessel-b: #E4D2B6; --shadow: 0 1px 2px rgba(80,50,20,.05), 0 8px 24px rgba(120,80,40,.08); --grain-opacity: .5; --grain-blend: overlay; } html[data-mode="night"] { --bg: #14110E; --surface: #201A14; --surface-2: #2A2218; --ink: #F0E6D6; --ink-soft: #B7A88F; --ink-faint: #7E715C; --line: #332A1F; --line-strong: #463A2A; --accent: #C8A04A; --accent-dark: #E0BC68; --accent-ink: #E0BC68; --on-accent: #1A140C; --ok: #6FB98C; --danger: #D9806F; --glow: rgba(200,160,74,.18); --vessel-a: #241B12; --vessel-b: #16110B; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4); --grain-opacity: .35; --grain-blend: soft-light; } /* ------------------------------------------------------------ Theme packs — selectable skins layered on top of day/night. Each pack re-tints the accent. The base (no-mode) block also covers the admin page, which renders in the Day palette. Kept in sync with THEMES in functions/api/[[path]].js. ------------------------------------------------------------ */ html[data-theme="holiday"] { --accent: #C1121F; --accent-dark: #9E1019; --accent-ink: #9E1019; --glow: rgba(193,18,31,.16); } html[data-theme="holiday"][data-mode="night"] { --accent: #E14B54; --accent-dark: #F0A0A6; --accent-ink: #F0A0A6; --glow: rgba(225,75,84,.20); } html[data-theme="spooky"] { --accent: #E8731C; --accent-dark: #A84E0C; --accent-ink: #A84E0C; --glow: rgba(232,115,28,.16); } html[data-theme="spooky"][data-mode="night"] { --accent: #F2922E; --accent-dark: #F2A567; --accent-ink: #F2A567; --glow: rgba(242,146,46,.20); } html[data-theme="valentine"] { --accent: #D6447A; --accent-dark: #A82F5C; --accent-ink: #A82F5C; --glow: rgba(214,68,122,.16); } html[data-theme="valentine"][data-mode="night"] { --accent: #E66B9B; --accent-dark: #F0A0BE; --accent-ink: #F0A0BE; --glow: rgba(230,107,155,.20); } html[data-theme="gameday"] { --accent: #1D6FB8; --accent-dark: #14528A; --accent-ink: #14528A; --glow: rgba(29,111,184,.16); } html[data-theme="gameday"][data-mode="night"] { --accent: #4E96D6; --accent-dark: #79B4E6; --accent-ink: #79B4E6; --glow: rgba(78,150,214,.20); } html[data-theme="spring"] { --accent: #3FA34D; --accent-dark: #2C7A38; --accent-ink: #2C7A38; --glow: rgba(63,163,77,.16); } html[data-theme="spring"][data-mode="night"] { --accent: #5FBF6D; --accent-dark: #86C98F; --accent-ink: #86C98F; --glow: rgba(95,191,109,.20); } html[data-theme="patriotic"] { --accent: #B22234; --accent-dark: #8A1A26; --accent-ink: #8A1A26; --glow: rgba(178,34,52,.16); } html[data-theme="patriotic"][data-mode="night"] { --accent: #4472C4; --accent-dark: #7A9FD8; --accent-ink: #7A9FD8; --glow: rgba(68,114,196,.20); } /* ============================================================ THEME STRIP — decorative banner that changes with the theme. Hidden for the default theme; each pack sets ::before content. ============================================================ */ .m-theme-strip { display: none; text-align: center; font-size: 1.05rem; letter-spacing: 0.35em; padding: 5px 0 4px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); transition: background .7s var(--ease), border-color .7s var(--ease); } html[data-theme="holiday"] .m-theme-strip { display: block; } html[data-theme="spooky"] .m-theme-strip { display: block; } html[data-theme="valentine"] .m-theme-strip { display: block; } html[data-theme="gameday"] .m-theme-strip { display: block; } html[data-theme="spring"] .m-theme-strip { display: block; } html[data-theme="patriotic"] .m-theme-strip { display: block; } html[data-theme="holiday"] .m-theme-strip::before { content: '🎄 ❄️ 🎁 ❄️ 🎄'; } html[data-theme="spooky"] .m-theme-strip::before { content: '🎃 🕷️ 🦇 🕷️ 🎃'; } html[data-theme="valentine"] .m-theme-strip::before { content: '💕 🌹 💌 🌹 💕'; } html[data-theme="gameday"] .m-theme-strip::before { content: '🏈 ⭐ 🏆 ⭐ 🏈'; } html[data-theme="spring"] .m-theme-strip::before { content: '🌸 🌿 🌷 🌿 🌸'; } html[data-theme="patriotic"] .m-theme-strip::before { content: '🇺🇸 ⭐ 🎆 ⭐ 🇺🇸'; } /* Limited-drop badge on the customer menu. */ .limited-badge { display: inline-block; margin-top: 8px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); padding: 3px 9px; border-radius: 999px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); background: radial-gradient(120% 80% at 50% -8%, var(--glow), transparent 55%), var(--bg); color: var(--ink); line-height: 1.5; min-height: 100vh; transition: background .7s var(--ease), color .7s var(--ease); } /* film grain */ body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:var(--grain-opacity); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); mix-blend-mode:var(--grain-blend); } main { max-width: 720px; margin: 0 auto; padding: 0 clamp(16px,4vw,28px) 80px; position: relative; z-index: 2; } /* ============================================================ LEGACY HEADER (admin page). Customer page uses .m-topbar. ============================================================ */ header { background: transparent; color: var(--ink); padding: 26px 16px 14px; text-align: center; position: relative; z-index: 2; } header h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; letter-spacing: -.01em; } header p { margin: 6px 0 0; color: var(--ink-faint); font-size: .9rem; letter-spacing: .02em; } /* ============================================================ CUSTOMER TOP BAR ============================================================ */ .m-topbar{ position: sticky; top: 0; z-index: 30; display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 16px clamp(16px,4vw,28px); max-width: 720px; margin: 0 auto; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); transition: background .7s var(--ease), border-color .7s var(--ease); } .m-brand{ display:flex; align-items:baseline; gap:10px; min-width:0; } .m-brand-emoji{ font-size:20px; line-height:1; align-self:center; } .m-brand-mark{ font-family:var(--font-display); font-weight:600; font-size:23px; letter-spacing:-.02em; } .m-topbar .m-brand-mark{ white-space:nowrap; } .m-brand-mark .dot{ color:var(--accent); } .m-brand-tag{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); } .m-topbar-right{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:none; } .m-topbar-right .m-brand-tag{ text-align:center; } .admin-gear{ display:flex; align-items:center; color:var(--ink-faint); text-decoration:none; opacity:.55; transition:opacity .2s; } .admin-gear:hover{ opacity:1; } /* mode toggle */ .m-mode{ border:none; background:transparent; cursor:pointer; padding:0; flex:none; } .m-mode-track{ position:relative; display:flex; align-items:center; justify-content:space-between; width:60px; height:30px; border-radius:999px; padding:0 7px; background:var(--surface-2); border:1px solid var(--line-strong); transition:all .5s var(--ease); } .m-mode-icon{ display:grid; place-items:center; z-index:2; transition:opacity .4s; } .m-sun{ color:#C77A2E; } .m-moon{ color:#9A8DB8; } html[data-mode="day"] .m-moon{ opacity:.3; } html[data-mode="night"] .m-sun{ opacity:.3; } .m-mode-thumb{ position:absolute; top:50%; left:3px; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; z-index:1; background:radial-gradient(circle at 35% 30%, #fff, #E8C98A); box-shadow:0 2px 6px rgba(0,0,0,.25); transition:all .5s var(--ease); } html[data-mode="night"] .m-mode-thumb{ left:calc(100% - 27px); background:radial-gradient(circle at 35% 30%, #E8E0F0, #8E80B0); } /* ============================================================ HERO ============================================================ */ .m-hero{ padding: clamp(26px,5vw,46px) 0 clamp(14px,2vw,22px); } .m-hero-kicker{ display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:16px; } .m-hero-kicker::before{ content:''; width:26px; height:1px; background:var(--accent); } .m-hero-sub{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:48ch; margin:18px 0 0; } /* ============================================================ CARDS / INPUTS (shared with admin) ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); transition: background .7s var(--ease), border-color .7s var(--ease); position: relative; z-index: 2; } label { display:block; font-weight:600; margin:10px 0 6px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } label:first-child { margin-top:0; } input[type="text"], textarea, select { width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px; font-size:1rem; font-family:var(--font-body); background:var(--surface); color:var(--ink); transition: border-color .25s, background .7s var(--ease); } input[type="text"]:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); } input[type="text"]::placeholder, textarea::placeholder { color:var(--ink-faint); } textarea { resize:vertical; min-height:60px; } button { font-family:var(--font-body); font-size:.98rem; font-weight:600; letter-spacing:.01em; border:none; border-radius:999px; padding:13px 22px; cursor:pointer; background:var(--accent); color:var(--on-accent); box-shadow: 0 6px 18px var(--glow); transition: transform .3s var(--ease), background .3s, box-shadow .3s, filter .3s; } button:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 26px var(--glow); } button.secondary { background:var(--surface-2); color:var(--ink); box-shadow:none; border:1px solid var(--line-strong); } button.secondary:hover:not(:disabled){ border-color:var(--accent); filter:none; } button.danger { background:var(--danger); color:#fff; box-shadow:none; } button:disabled { opacity:.5; cursor:not-allowed; transform:none; } /* big primary submit */ .m-submit{ width:100%; padding:16px; font-size:1.05rem; } /* ============================================================ MENU ITEMS (customer) ============================================================ */ #menu { display:flex; flex-direction:column; gap:14px; } .menu-item { border:1px solid var(--line); border-radius:16px; padding:0; margin:0; cursor:pointer; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), background .7s var(--ease); } .menu-item:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 16px 38px rgba(0,0,0,.14); } .menu-item.selected { border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent), var(--shadow); } .mi-main{ display:flex; gap:16px; align-items:center; padding:16px 18px; } .mi-vessel{ flex:none; width:74px; height:88px; display:grid; place-items:center; border-radius:12px; background:radial-gradient(70% 85% at 50% 28%, var(--vessel-a), var(--vessel-b)); } .mi-vessel svg{ display:block; } .mi-body{ flex:1; min-width:0; } .mi-titlerow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .menu-item h3 { margin:0; font-family:var(--font-display); font-weight:500; font-size:1.18rem; letter-spacing:-.01em; line-height:1.15; } .mi-pick{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); transition:all .25s var(--ease); display:grid; place-items:center; } .menu-item.selected .mi-pick{ border-color:var(--accent); background:var(--accent); } .menu-item.selected .mi-pick::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--on-accent); } .mi-desc { color:var(--ink-soft); font-size:.9rem; margin-top:4px; line-height:1.45; } /* options drawer */ .mi-options{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); } .menu-item.selected .mi-options{ grid-template-rows:1fr; } .mi-options-inner{ overflow:hidden; } .mi-options-pad{ padding:2px 18px 18px; border-top:1px solid var(--line); margin-top:2px; } .opt-group{ margin-top:14px; } .opt-group:first-child{ margin-top:6px; } .opt-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:8px; } .opt-hint{ letter-spacing:.04em; text-transform:none; color:var(--ink-faint); font-weight:400; } .chips{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ font-family:var(--font-body); font-size:.86rem; font-weight:500; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); padding:7px 14px; border-radius:999px; cursor:pointer; transition:all .2s var(--ease); display:inline-flex; align-items:center; gap:5px; } .chip svg { flex:none; } .chip:hover{ border-color:var(--accent); color:var(--ink); } .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; } /* Theme emoji picker — a searchable, tabbed tap-to-pick grid in the Branding card. */ #emoji-search{ margin:4px 0 8px; } .emoji-tabs{ margin:4px 0 8px; gap:6px; } .emoji-tabs .chip{ font-size:.76rem; padding:5px 11px; } /* Cap the height so the larger (All / category) sets scroll instead of pushing the rest of the card down. */ .emoji-grid{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; max-height:208px; overflow-y:auto; } .emoji-chip{ width:42px; height:42px; padding:0; font-size:1.4rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--ink); cursor:pointer; box-shadow:none; transition:border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); } .emoji-chip:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-2px); filter:none; box-shadow:none; } .emoji-chip[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent); } .emoji-chip-default{ width:auto; padding:0 14px; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .emoji-chip-default[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:none; } /* Live theme preview — a miniature guest brand bar in the admin Menu tab. It reuses the guest .m-brand* classes for a true-to-life look. Accent vars are set inline by admin.js per the selected theme/accent; the night palette is scoped here so the Day/Night toggle works without touching the rest of the (always-day) admin page. */ .tp-modes{ display:flex; gap:8px; margin-bottom:10px; } .theme-preview{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px; color:var(--ink); transition:background .2s var(--ease), border-color .2s var(--ease); } /* A sample card + accent button so surface, muted text, accent and on-accent colors are all visible in the preview (not just the brand bar). */ .tp-sample{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line); } .tp-sample-text{ font-size:.85rem; color:var(--ink-soft); } .tp-sample-btn{ font-family:var(--font-body); font-size:.8rem; font-weight:600; cursor:default; border:none; border-radius:999px; padding:6px 14px; background:var(--accent); color:var(--on-accent); } /* Night palette — keep in sync with html[data-mode="night"] above. */ .theme-preview[data-mode="night"]{ --bg: #14110E; --surface: #201A14; --surface-2: #2A2218; --ink: #F0E6D6; --ink-soft: #B7A88F; --ink-faint: #7E715C; --line: #332A1F; --line-strong: #463A2A; --on-accent: #1A140C; } /* Custom palette — when active, the 4 core colors (--bg/--surface/--ink/--accent) are set inline (on for guests, on #theme-preview for the admin preview) and the subtler shades are derived here via color-mix. Placed after the day/night blocks so it wins at equal specificity by source order. */ html[data-palette="custom"], .theme-preview[data-palette="custom"]{ --surface-2: color-mix(in srgb, var(--surface) 92%, var(--ink)); --ink-soft: color-mix(in srgb, var(--ink) 70%, var(--bg)); --ink-faint: color-mix(in srgb, var(--ink) 48%, var(--bg)); --line: color-mix(in srgb, var(--surface) 86%, var(--ink)); --line-strong: color-mix(in srgb, var(--surface) 76%, var(--ink)); --accent-dark: var(--accent); --accent-ink: var(--accent); --glow: color-mix(in srgb, var(--accent) 16%, transparent); } /* Custom palette editor — a 4-row grid of color swatches in the admin Menu tab. */ .palette-grid{ display:flex; flex-direction:column; gap:10px; margin-top:12px; } .palette-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .palette-row label{ margin:0; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); } .palette-row input[type="color"]{ width:54px; height:34px; padding:0; flex:none; } /* Flavor/strength sliders — a friendlier way to dial "extra sweet" / "make it a double" than free text. The current label rides next to the option name. */ .opt-slider .slider-val{ color:var(--accent-ink); font-weight:600; } .opt-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:4px 0 2px; background:var(--line-strong); border-radius:999px; outline:none; cursor:pointer; } .opt-range:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } .opt-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:var(--shadow); cursor:pointer; transition:transform .15s var(--ease); } .opt-range::-webkit-slider-thumb:active{ transform:scale(1.15); } .opt-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:var(--shadow); cursor:pointer; } .slider-ends{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-faint); margin-top:2px; } /* ============================================================ WELCOME / CONFIRM / MISC ============================================================ */ .welcome { background: var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:12px 16px; margin-bottom:14px; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--ink); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:12px; } .welcome-edit { flex:none; font-family:var(--font-body); font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--accent-ink); border:1px solid var(--accent); border-radius:999px; padding:4px 12px; box-shadow:none; } .welcome-edit:hover:not(:disabled) { background:var(--accent); color:var(--on-accent); transform:none; filter:none; box-shadow:none; } .welcome-history { flex:none; font-family:var(--font-body); font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; padding:4px 10px; } .welcome-history:hover { color:var(--accent-ink); } .confirm { text-align:center; padding:36px 16px; } .confirm .big { font-size:1px; height:120px; display:grid; place-items:center; margin-bottom:8px; } .confirm h2 { font-family:var(--font-display); font-weight:500; font-size:1.8rem; margin:6px 0; letter-spacing:-.01em; } .confirm .muted { font-size:1rem; } .order-row { border:1px solid var(--line); border-left:3px solid var(--accent); padding:14px 16px; margin-bottom:10px; background:var(--surface); border-radius:0 12px 12px 0; box-shadow:var(--shadow); } .order-row.is-new { animation: flash 1.6s ease; } @keyframes flash { from { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } to { background: var(--surface); } } .order-row .who { font-weight:700; font-size:1.02rem; } .order-row .what { margin:2px 0; font-family:var(--font-display); font-size:1.05rem; } .order-row .meta { color:var(--ink-faint); font-size:.82rem; } .order-row .opts { font-size:.88rem; color:var(--ink-soft); } .order-row .notes { font-size:.92rem; font-style:italic; color:var(--accent-ink); margin-top:2px; } .row { display:flex; gap:8px; align-items:center; } .row.between { justify-content:space-between; } .muted { color:var(--ink-faint); } .ok { color:var(--ok); font-weight:600; } .center { text-align:center; } .hidden { display:none !important; } code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; background:var(--surface-2); padding:1px 5px; border-radius:5px; } .toggle { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.85rem; } .admin-alerts { display:flex; align-items:center; gap:10px; } .admin-notify-btn { appearance:none; cursor:pointer; padding:4px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface-2); font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--ink); transition:background .15s, border-color .15s, color .15s; } .admin-notify-btn.armed { background:var(--accent); border-color:var(--accent); color:#fff; } /* ============================================================ KANBAN BOARD (Orders tab) ============================================================ */ .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .kanban-col { flex: 1; min-width: 240px; max-width: 360px; display: flex; flex-direction: column; background: var(--surface-2); border-radius: 16px; padding: 12px; scroll-snap-align: start; transition: background .15s, outline-color .15s; min-height: 180px; border-top: 3px solid transparent; } .kanban-col[data-status="pending"] { border-top-color: var(--accent); } .kanban-col[data-status="in_progress"] { border-top-color: #C8A04A; } .kanban-col[data-status="fulfilled"] { border-top-color: var(--ok); } .kanban-col-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); } /* Status dot before each column label */ .kanban-col-label { display: inline-flex; align-items: center; gap: 7px; } .kanban-col-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .kanban-col[data-status="pending"] .kanban-col-label::before { background: var(--accent); } .kanban-col[data-status="in_progress"] .kanban-col-label::before { background: #C8A04A; } .kanban-col[data-status="fulfilled"] .kanban-col-label::before { background: var(--ok); } .kanban-count { background: var(--accent); color: var(--on-accent, #fff); border-radius: 99px; padding: 1px 7px; font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .kanban-col[data-status="in_progress"] .kanban-count { background: #C8A04A; color: #1A140C; } .kanban-col-body { flex: 1; min-height: 80px; } .kanban-col.drag-target { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); outline: 2px dashed var(--accent); outline-offset: -2px; } /* Fulfilled cards — slightly muted to signal completion */ .kanban-col[data-status="fulfilled"] .order-row { opacity: 0.72; border-left-color: var(--ok); } /* Show-more / history link at the bottom of the Done column */ .kanban-done-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); text-align: center; } .kanban-done-foot a { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; } .kanban-done-foot a:hover { color: var(--accent-ink); text-decoration: underline; } /* Drag handle on order cards */ .order-meta-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .kanban-drag-handle { cursor: grab; touch-action: none; user-select: none; color: var(--ink-faint); font-size: 1.1rem; line-height: 1; padding: 2px 2px 2px 4px; border-radius: 5px; transition: color .15s, background .15s; } .kanban-drag-handle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); } .kanban-drag-handle:active { cursor: grabbing; } .pill { font-size:.7rem; padding:2px 9px; border-radius:999px; letter-spacing:.04em; margin-left:6px; } .pill.on { background: color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); } .pill.off { background:var(--surface-2); color:var(--ink-faint); } .pill.cat { background: color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-ink); } .tabs { display:flex; gap:8px; margin-bottom:16px; } .tabs button { flex:1; } /* Bottom tab bar (admin dashboard) — a fixed, app-style nav that controls which section is visible. */ .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 4px; width: 100%; max-width: 720px; margin: 0 auto; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px color-mix(in srgb, var(--ink) 8%, transparent); /* Promote to its own compositing layer so the translucent (backdrop-filter) fixed bar paints on initial load, not only after a scroll repaint — a known WebKit/Chromium bug with backdrop-filter on position:fixed elements. */ transform: translateZ(0); will-change: transform; } .tab-bar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; color: var(--ink-faint); border: none; box-shadow: none; border-radius: 12px; padding: 7px 2px; font-size: .7rem; font-weight: 600; letter-spacing: .01em; transition: color .2s, background .2s; } .tab-bar-btn .tab-ico { font-size: 1.3rem; line-height: 1; } .tab-bar-btn:hover:not(:disabled) { color: var(--ink); transform: none; filter: none; } .tab-bar-btn.is-active { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); } /* Keep the footer + last cards clear of the fixed bar. */ #dash { padding-bottom: 84px; } @media (max-width: 520px) { .tab-bar-btn { font-size: .66rem; } .tab-bar-btn .tab-ico { font-size: 1.2rem; } } /* ============================================================ ENTRANCE (never leaves content hidden) ============================================================ */ @keyframes m-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .m-stagger > * { opacity:1; } @media (prefers-reduced-motion:no-preference){ html[data-animate="1"] .m-stagger > * { animation:m-rise .5s var(--ease) both; } .m-stagger > *:nth-child(1){ animation-delay:.03s; } .m-stagger > *:nth-child(2){ animation-delay:.07s; } .m-stagger > *:nth-child(3){ animation-delay:.11s; } .m-stagger > *:nth-child(4){ animation-delay:.15s; } .m-stagger > *:nth-child(5){ animation-delay:.19s; } .m-stagger > *:nth-child(6){ animation-delay:.23s; } } /* ============================================================ MENU LOADER — animated coffee mug (day) / cocktail shaker (night). The wrapper holds both variants; CSS shows only the one matching the current data-mode on . ============================================================ */ .menu-loader{ display:flex; align-items:center; justify-content:center; padding:32px 0 24px; } .menu-loader-coffee, .menu-loader-shaker{ display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--ink-soft); font-family:var(--font-display); font-style:italic; font-size:1.02rem; letter-spacing:.005em; } .menu-loader-svg{ width:96px; height:96px; overflow:visible; } html[data-mode="day"] .menu-loader-shaker{ display:none; } html[data-mode="night"] .menu-loader-coffee{ display:none; } /* ---- Coffee mug ---- */ .cg-mug{ fill:var(--surface-2); stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round; } .cg-handle{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; } .cg-saucer{ fill:var(--accent); opacity:.22; } .cg-liquid{ fill:var(--accent); transform:translateY(50px); animation:cg-fill 3.4s var(--ease) infinite; } .cg-steam path{ fill:none; stroke:var(--ink-faint); stroke-width:2; stroke-linecap:round; opacity:0; animation:cg-steam 2.6s ease-in-out infinite; } .cg-steam path:nth-child(2){ animation-delay:.55s; } .cg-steam path:nth-child(3){ animation-delay:1.15s; } @keyframes cg-fill{ 0% { transform:translateY(50px); } 55% { transform:translateY(2px); } 85% { transform:translateY(2px); } 100% { transform:translateY(50px); } } @keyframes cg-steam{ 0% { opacity:0; transform:translateY(6px); } 35% { opacity:.55; } 100% { opacity:0; transform:translateY(-14px); } } /* ---- Cocktail shaker ---- */ .cg-shaker-body{ transform-origin:60px 80px; animation:cg-shake .55s ease-in-out infinite; } .cg-shaker-cap, .cg-shaker-neck, .cg-shaker-tin{ fill:var(--accent); stroke:var(--accent-dark); stroke-width:1; stroke-linejoin:round; } .cg-shaker-stripe{ fill:var(--surface); opacity:.28; } .cg-shaker-shine{ fill:var(--surface); opacity:.35; } .cg-drop{ fill:var(--accent); opacity:0; } .cg-drop-l { animation:cg-drop-l 1.1s ease-out infinite; } .cg-drop-r { animation:cg-drop-r 1.1s ease-out infinite .15s; } .cg-drop-l2 { animation:cg-drop-l 1.3s ease-out infinite .3s; } .cg-drop-r2 { animation:cg-drop-r 1.3s ease-out infinite .45s; } @keyframes cg-shake{ 0% { transform:rotate(0deg) translate(0,0); } 15% { transform:rotate(-10deg) translate(-2px,-3px); } 30% { transform:rotate(9deg) translate(2px,0); } 45% { transform:rotate(-9deg) translate(-2px,-3px); } 60% { transform:rotate(10deg) translate(2px,0); } 80% { transform:rotate(-6deg) translate(0,-1px); } 100% { transform:rotate(0deg) translate(0,0); } } @keyframes cg-drop-l{ 0% { opacity:0; transform:translate(0,0) scale(.5); } 25% { opacity:.85; } 100% { opacity:0; transform:translate(-14px,14px) scale(.2); } } @keyframes cg-drop-r{ 0% { opacity:0; transform:translate(0,0) scale(.5); } 25% { opacity:.85; } 100% { opacity:0; transform:translate(14px,14px) scale(.2); } } @media (prefers-reduced-motion:reduce){ .cg-liquid, .cg-steam path, .cg-shaker-body, .cg-drop{ animation:none; } .cg-liquid{ transform:translateY(2px); } } .welcome { background: #fbf6f0; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-weight: 600; color: var(--accent-dark); box-shadow: var(--shadow); } /* ============================================================ LAST ORDER CARD + TRACK BUTTON ============================================================ */ .last-order-card { border-left: 3px solid var(--accent); display: flex; flex-direction: column; align-items: flex-start; } .last-order-label { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 4px; } .last-order-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; } .track-order-btn { display: inline-block; background: var(--accent); color: var(--on-accent, #fff); padding: 9px 20px; border-radius: 99px; font-size: .9rem; font-weight: 700; text-decoration: none; letter-spacing: .01em; transition: filter .15s; } .track-order-btn:hover { filter: brightness(1.1); } /* ============================================================ MY USUAL CARD ============================================================ */ .usual-card { border-left: 3px solid var(--accent); } .usual-label { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 4px; } .usual-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); } .usual-opts { font-size: .88rem; margin-top: 2px; } .usual-btn { width: 100%; margin-top: 12px; } /* ============================================================ ORDER STATUS PAGE ============================================================ */ .status-steps { display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px,4vw,40px) 0 24px; } .status-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 80px; } .step-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); transition: all .4s var(--ease); } .status-step.done .step-dot { background: var(--accent); border-color: var(--accent); } .status-step.active .step-dot { border-color: var(--accent); background: var(--surface); animation: step-pulse 2s ease-in-out infinite; } .status-step.done.active .step-dot { background: var(--accent); } .step-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; text-align: center; transition: color .4s var(--ease); } .status-step.active .step-label, .status-step.done .step-label { color: var(--accent-ink); } .status-connector { flex: 1; height: 2px; background: var(--line-strong); margin-top: 9px; transition: background .4s var(--ease); min-width: 24px; } .status-connector.done { background: var(--accent); } @keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--glow); } 50% { box-shadow: 0 0 0 7px var(--glow); } } /* Order-status actions: alert toggle + "order again" link */ .status-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 18px; } .notify-btn { appearance: none; cursor: pointer; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-family: var(--font-body); font-size: .98rem; font-weight: 600; transition: transform .15s var(--ease), opacity .2s var(--ease), background .2s var(--ease); } .notify-btn:hover { transform: translateY(-1px); } .notify-btn:active { transform: translateY(0); } .notify-btn.armed { background: var(--surface-2); color: var(--accent-ink); border-color: var(--line-strong); cursor: default; } .notify-btn.armed:hover { transform: none; } .status-link { display: inline-block; text-decoration: none; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-body); font-size: .98rem; font-weight: 600; color: var(--ink); background: var(--surface-2); } /* ============================================================ INGREDIENTS MODAL ============================================================ */ /* Subtle text-link trigger that opens the drink-request modal. */ .request-trigger { display: block; margin: 18px auto 0; background: none; border: none; box-shadow: none; padding: 6px 10px; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--ink-faint); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .request-trigger:hover:not(:disabled) { color: var(--accent-ink); transform: none; filter: none; box-shadow: none; } .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; } .modal-card { position: relative; max-width: 420px; width: 100%; max-height: 82vh; overflow-y: auto; border-radius: 20px; padding: 28px 24px 24px; } .modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); font-size: 1rem; line-height: 1; border: 1px solid var(--line-strong); box-shadow: none; } .modal-close:hover:not(:disabled) { transform: none; filter: none; background: var(--line-strong); } /* Onboarding wizard (shared onboard.js) — reuses .modal-overlay / .modal-card. */ .wiz-card { max-width: 460px; } .wiz-dots { display: flex; gap: 6px; margin: 2px 0 14px; } .wiz-dot { width: 22px; height: 4px; border-radius: 999px; background: var(--line-strong); } .wiz-dot.on { background: var(--accent); } .wiz-title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -.015em; margin: 0 28px 4px 0; } .wiz-sub { margin: 0 0 14px; } .wiz-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); } .wiz-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; } .wiz-foot button:last-child { margin-left: auto; } .wiz-err { color: var(--danger); margin: 8px 0 0; min-height: 1em; } .wiz-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; } .wiz-themes { gap: 8px; } .wiz-menu { display: flex; flex-direction: column; gap: 8px; } .wiz-opt-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; } .wiz-opt-row:hover:not(:disabled) { transform: none; filter: none; border-color: var(--accent); } .wiz-opt-row.on { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); } .wiz-opt-label { font-weight: 600; } .wiz-opt-hint { font-size: .82rem; } .modal-drink-name { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.015em; line-height: 1.15; color: var(--ink); padding-right: 28px; } .modal-for { margin-top: 4px; font-size: .9rem; color: var(--ink-soft); } .modal-opts { margin-top: 6px; font-size: .85rem; color: var(--accent-ink); font-weight: 500; } .modal-divider { border: none; border-top: 1px solid var(--line); margin: 16px 0; } .modal-section-label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 10px; } .modal-ingredients { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .modal-ingredients li { display: flex; align-items: baseline; gap: 10px; font-size: .98rem; color: var(--ink); } .modal-ingredients li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 1px; } .modal-ingredients li.muted::before { background: var(--ink-faint); } /* In-progress rows are clickable */ .order-row.clickable { cursor: pointer; } .order-row.clickable:hover { border-color: var(--accent); } .ingredients-hint { display: block; margin-top: 6px; font-size: .78rem; color: var(--accent-ink); letter-spacing: .04em; } /* ============================================================ ORDER HISTORY PAGE ============================================================ */ .history-entry { margin-bottom: 10px; } .history-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; color: var(--ink); } .history-opts { font-size: .86rem; margin-top: 3px; } .history-notes { font-size: .9rem; font-style: italic; color: var(--accent-ink); margin-top: 3px; } .history-meta { font-size: .78rem; color: var(--ink-faint); margin-top: 6px; } /* ============================================================ ANALYTICS / STATS ============================================================ */ .stat-card { margin-bottom: 14px; } .stat-headline { font-size: 1rem; color: var(--ink-soft); } .stat-big { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; color: var(--ink); line-height: 1; } .stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .stat-label { font-size: .85rem; flex: 0 0 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .stat-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .stat-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s var(--ease); } .stat-val { flex: none; font-size: .82rem; font-weight: 600; color: var(--ink-soft); min-width: 24px; text-align: right; } .hour-grid { display: flex; align-items: flex-end; gap: 3px; height: 80px; padding-bottom: 18px; position: relative; } .hour-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .hour-fill { width: 100%; min-height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; transition: height .3s var(--ease); } .hour-label { font-size: .6rem; color: var(--ink-faint); margin-top: 4px; position: absolute; bottom: 0; } /* ============================================================ FEATURED / DRINK OF THE DAY ============================================================ */ .featured-card { border-left: 3px solid var(--accent); margin-bottom: 14px; } .featured-kicker { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 10px; } .featured-body { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .featured-vessel { flex: none; width: 70px; height: 84px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(70% 85% at 50% 28%, var(--vessel-a), var(--vessel-b)); } .featured-info { flex: 1; min-width: 0; } .featured-name { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); } .featured-desc { font-size: .88rem; margin-top: 4px; line-height: 1.45; } .featured-order-btn { width: 100%; } .featured-badge { font-size: .8rem; vertical-align: middle; margin-left: 4px; } /* ============================================================ GROUP ORDER CART ============================================================ */ .cart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cart-title { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); } .cart-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cart-item-drink { font-weight: 600; font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-item-who { font-size: .78rem; color: var(--ink-soft); } .cart-item-opts { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-remove { flex: none; background: none; border: none; padding: 2px 6px; font-size: 1rem; color: var(--ink-faint); cursor: pointer; border-radius: 4px; line-height: 1; } .cart-remove:hover { color: var(--danger); background: rgba(185,74,59,.08); } /* ============================================================ SUBCATEGORY TILES ============================================================ */ .subcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .subcat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 22px 10px 18px; box-shadow: var(--shadow); min-height: 100px; font-size: .82rem; letter-spacing: .04em; } .subcat-tile:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 28px var(--glow); filter: none; } .subcat-emoji { font-size: 2rem; line-height: 1.2; display: block; } .subcat-label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; } .subcat-back { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; font-size: .85rem; margin-bottom: 6px; } /* ============================================================ SETUP PAGE (house management) ============================================================ */ .setup-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .setup-url { flex: 1; font-size: .78rem; color: var(--ink-soft); word-break: break-all; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; font-family: monospace; } .setup-pass-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .setup-pass-row .pass-field { flex: 1; padding: 8px 12px; font-size: .9rem; } .change-pass-form { margin-top: 8px; } .change-pass-form .new-pass-input { margin-bottom: 0; } /* ============================================================ QR CODE ============================================================ */ .qr-card { margin-bottom: 14px; } .qr-output { display: flex; justify-content: center; align-items: center; min-height: 220px; } .qr-url { font-size: .78rem; color: var(--ink-faint); text-align: center; word-break: break-all; margin: 8px 0 0; } /* ============================================================ ORDER-AHEAD (scheduling) ============================================================ */ .sched-chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; } #sched-time input, #sched-time { font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:8px 12px; } .status-sched { margin:8px 0 0; font-weight:600; font-size:.92rem; color:var(--accent-ink); } .sched-badge { display:inline-block; margin:4px 0 2px; font-size:.82rem; font-weight:600; color:var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius:999px; padding:2px 10px; } .sched-badge.due { color:var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } /* ============================================================ LIVE QUEUE (order status) ============================================================ */ .queue-card { display:flex; align-items:center; gap:14px; margin:14px auto 0; max-width:320px; padding:12px 16px; text-align:left; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; } .queue-num { flex:none; min-width:46px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:1.7rem; color:var(--accent-ink); } .queue-text { display:flex; flex-direction:column; gap:2px; } .queue-pos-label { font-size:.92rem; color:var(--ink); font-weight:600; } .queue-wait { font-size:.84rem; color:var(--ink-soft); } /* ============================================================ MENU DRAG-TO-REORDER (admin) ============================================================ */ .drag-hint { font-size:.82rem; margin:0 0 10px; } /* Grouped admin menu sections (by category type) */ .menu-group-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 6px; padding-bottom:6px; border-bottom:2px solid var(--line); font-weight:700; font-size:1.05rem; letter-spacing:.01em; } .menu-group-header:first-child { margin-top:4px; } .menu-group-count { font-size:.78rem; font-weight:600; color:var(--ink-faint); background:var(--surface-2); border-radius:999px; padding:1px 9px; } .menu-subgroup-header { margin:12px 0 8px; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); } .menu-subgroup-header .muted { text-transform:none; letter-spacing:0; } .menu-section { display:block; } .menu-card-head { display:flex; align-items:flex-start; gap:10px; } .menu-card-info { flex:1; min-width:0; } .drag-handle { flex:none; cursor:grab; touch-action:none; user-select:none; color:var(--ink-faint); font-size:1.15rem; line-height:1.2; padding:2px 4px; margin:-2px -2px 0; border-radius:6px; transition:color .15s, background .15s; } .drag-handle:hover { color:var(--accent); background:var(--surface-2); } .drag-handle:active { cursor:grabbing; } .menu-admin-card.dragging { opacity:1; border-color:var(--accent); box-shadow:0 18px 40px rgba(0,0,0,.28); cursor:grabbing; } .drag-placeholder { border-radius:16px; margin-bottom:14px; border:2px dashed var(--line); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); } /* ============================================================ INVENTORY / 86 (sold out) ============================================================ */ .pill.soldout { background: color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); } .soldout-badge { display:inline-block; vertical-align:middle; font-family:var(--font-body); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-radius:999px; padding:2px 8px; margin-left:6px; } .menu-item.sold-out { opacity:.55; } .menu-item.sold-out:hover { transform:none; border-color:var(--line); box-shadow:var(--shadow); cursor:default; } .menu-item.sold-out .mi-main { cursor:default; } .menu-item.sold-out .mi-vessel { filter:grayscale(.7); } .featured-card.sold-out, .usual-card.sold-out { opacity:.6; } .featured-order-btn:disabled, .usual-btn:disabled { background:var(--surface-2); color:var(--ink-faint); box-shadow:none; cursor:default; } /* Party Recap card (admin Stats tab). */ .recap-head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; } .recap-periods { margin:0; } .recap-custom { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; } .recap-custom input[type="date"] { width:auto; flex:1 1 130px; } .recap-period-label { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-top:14px; } .recap-big { font-family:var(--font-display); font-size:2rem; line-height:1.1; margin:4px 0 4px; color:var(--ink); } .recap-sub { color:var(--ink-soft); font-style:italic; margin-bottom:6px; } .recap-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-top:14px; } .recap-tile { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; } .recap-tile-val { font-family:var(--font-display); font-size:1.15rem; font-weight:500; color:var(--accent-ink); line-height:1.25; word-break:break-word; } .recap-tile-label { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; } /* Low-stock nudge on the customer menu. */ .stock-badge { display: inline-block; margin-top: 8px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 34%, transparent); padding: 3px 9px; border-radius: 999px; } /* Rail (batch) view — grouped identical pending drinks in the admin queue. */ .rail-group .rail-count { font-family:var(--font-display); font-weight:600; color:var(--accent-ink); } .rail-names { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:8px; } .rail-name { font-size:.9rem; color:var(--ink-soft); } .rail-name em { color:var(--accent-ink); font-style:italic; } .rail-name:not(:last-child)::after { content:"·"; margin-left:10px; color:var(--ink-faint); } /* Inline recipe card on order tickets. */ .recipe { margin-top: 8px; } .recipe > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink); user-select: none; } .recipe > summary::-webkit-details-marker { display: none; } .recipe[open] > summary { margin-bottom: 6px; } .recipe-list { margin: 0; padding: 8px 8px 8px 26px; border-left: 2px solid var(--line-strong); background: var(--surface-2); border-radius: 8px; } .recipe-list li { font-size: .92rem; color: var(--ink-soft); margin: 3px 0; line-height: 1.4; } /* Low-stock banner on the admin orders panel. */ .low-stock-banner { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.4; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent); } .low-stock-banner strong { font-weight: 600; } .bar-closed-banner { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.5; color: #7a3800; background: color-mix(in srgb, #e07000 12%, transparent); border: 1px solid color-mix(in srgb, #e07000 32%, transparent); } .bar-closed-banner strong { font-weight: 600; } /* Order-page footer with an unobtrusive admin link. */ .m-foot { text-align: center; padding: 8px 16px 40px; position: relative; z-index: 2; } .m-foot-link { color: var(--ink-faint); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color .2s, border-color .2s; } .m-foot-link:hover { color: var(--accent-ink); border-bottom-color: currentColor; } /* Shopping list (admin Menu tab). */ .shop-sec { margin-top: 14px; } .shop-h { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; } .shop-list { margin: 0; padding-left: 20px; } .shop-list li { margin: 4px 0; font-size: .92rem; color: var(--ink); } .shop-out { color: var(--danger); font-weight: 600; } .shop-low { color: var(--accent-ink); font-weight: 600; } .shop-ing { list-style: none; padding-left: 0; } .shop-ing li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .shop-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .shop-for { font-size: .8rem; } .shop-instock { font-size: .76rem; font-weight: 600; color: var(--ok, #3a7d44); } /* ---------------------------------------------------------------- Pantry — ingredient stock ---------------------------------------------------------------- */ .pantry-add { display: flex; flex-direction: column; gap: 8px; } .pantry-add input { margin: 0; } .pantry-add-nums { display: flex; gap: 8px; } .pantry-add-nums input { margin: 0; min-width: 0; } .pantry-add-nums #ing-qty { flex: 0 0 84px; } .pantry-add-nums #ing-low { flex: 0 0 96px; } .pantry-add-nums #ing-unit { flex: 1 1 auto; } .ing-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); } .ing-row:last-child { border-bottom: none; } .ing-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .ing-thresh { font-size: .78rem; } .ing-row.ing-low strong { color: var(--accent-ink); } .ing-row.ing-out strong { color: var(--danger); } .ing-controls { display: flex; align-items: center; gap: 6px; } .ing-controls button { padding: 6px 10px; margin: 0; line-height: 1; } .ing-qty-input { width: 64px; margin: 0; padding: 6px 8px; text-align: center; } .ing-unit { font-size: .82rem; color: var(--ink-soft); min-width: 0; } .ing-del { font-size: .9rem; } /* Stock-up prompt (guided pantry setup) */ .stock-grp { margin-bottom: 16px; } .stock-grp:last-child { margin-bottom: 0; } .stock-grp-h { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; } .stock-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; flex-wrap: wrap; } .stock-item input[type="checkbox"] { flex: 0 0 auto; cursor: pointer; } .stock-item-name { flex: 1 1 auto; min-width: 0; font-size: .94rem; } .stock-item.is-tracked { cursor: default; color: var(--ink-soft); } .stock-item .stock-qty { flex: 0 0 64px; margin: 0; padding: 5px 7px; text-align: center; } .stock-item .stock-unit { flex: 0 0 72px; margin: 0; padding: 5px 7px; } /* "Drinks you can make" suggestion rows (Menu tab) */ .suggest-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; color: inherit; } .suggest-row:hover { border-color: var(--accent); } .suggest-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .suggest-name { font-weight: 600; } .suggest-sub { font-size: .82rem; } /* ---------------------------------------------------------------- Pre-order for an event ---------------------------------------------------------------- */ /* Customer-facing banner shown when ordering from an event link. */ .event-banner { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; background: color-mix(in srgb, var(--accent) 12%, var(--surface, var(--bg))); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); position: relative; z-index: 2; } .event-banner strong { font-size: 1.02rem; color: var(--accent-ink); } .event-banner span { font-size: .9rem; color: var(--ink-soft, var(--ink)); } .event-banner .event-note { font-style: italic; } .event-banner-closed { background: var(--surface-2); border-color: var(--line); } .event-banner-closed strong { color: var(--ink); } /* Admin Events tab. */ .event-card { margin-top: 14px; } .event-link-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .event-link { flex: 1 1 200px; min-width: 0; font-size: .82rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-soft, var(--ink)); } .event-card .ev-qr-out canvas { display: block; } .event-preorders .ev-prep-list { list-style: none; margin: 0; padding: 0; } .event-preorders .ev-prep-list li { margin: 4px 0; font-size: .92rem; color: var(--ink); } .event-preorders .ev-count { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--accent-ink); } /* Admin menu-card actions: compact, wrapping buttons so a card's button row never overflows / distorts the page on narrow screens. */ .menu-admin-card .row { flex-wrap: wrap; row-gap: 8px; } .menu-admin-card .row button { flex: 0 1 auto; padding: 8px 14px; font-size: .82rem; } /* Single "Manage" CTA on each menu card — opens the actions modal so the card stays uncluttered. Sits at the top-right of the card head. */ .menu-admin-card .manage-btn { flex: none; align-self: flex-start; padding: 7px 14px; font-size: .82rem; white-space: nowrap; } /* Menu actions modal: status pills row + action buttons. */ #mam-pills { display: flex; flex-wrap: wrap; gap: 6px; } #mam-pills:empty { display: none; } .mam-actions { flex-wrap: wrap; row-gap: 8px; } .mam-actions button { flex: 1 1 auto; padding: 9px 14px; font-size: .85rem; } .mam-edit { font-size: .92rem; } /* ============================================================ DRINK OPTION / INGREDIENT BUILDERS (admin Add & Edit forms) Tap-to-build editors that replace the old free-text textareas. All rules scoped under .builder so they never touch the guest page's own .opt-group / .opt-label styles. ============================================================ */ .builder { margin-bottom: 4px; } .builder-empty { font-size: .85rem; margin: 2px 0 8px; } .builder-note { font-size: .78rem; margin: 8px 0 0; } .builder-add { width: 100%; margin-top: 8px; font-size: .9rem; } .builder-x { flex: none; border: none; background: transparent; cursor: pointer; color: var(--ink-faint); font-size: .9rem; line-height: 1; padding: 4px 7px; border-radius: 8px; box-shadow: none; } .builder-x:hover:not(:disabled) { color: var(--danger); background: var(--surface-2); transform: none; filter: none; box-shadow: none; } /* Option groups */ .builder .opt-group { border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px; margin: 0 0 10px; background: var(--surface-2); } .builder .opt-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .opt-type-chips { gap: 6px; } .opt-type-chips .chip { font-size: .76rem; padding: 5px 11px; } .builder .opt-name { margin-top: 10px; } .opt-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .opt-choices:empty { display: none; } .choice-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .86rem; color: var(--ink); } .choice-chip.is-default { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .choice-lbl { line-height: 1.2; } .choice-x, .choice-star { border: none; background: transparent; cursor: pointer; padding: 0 2px; line-height: 1; box-shadow: none; color: var(--ink-faint); } .choice-x:hover:not(:disabled), .choice-star:hover:not(:disabled) { transform: none; filter: none; box-shadow: none; } .choice-x { font-size: .8rem; } .choice-x:hover { color: var(--danger); } .choice-star { font-size: 1rem; color: var(--accent); } .opt-add-row { display: flex; gap: 8px; margin-top: 10px; } .opt-add-row .opt-choice-input { flex: 1; } .opt-add-choice { flex: none; padding: 11px 18px; font-size: .9rem; } /* Ingredient rows */ .ing-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ing-num { flex: none; width: 20px; text-align: right; color: var(--ink-faint); font-size: .85rem; } .ing-input { flex: 1; }