/* ============================================================================= VaporCraft — shared design system ============================================================================= One file, imported by every page. Two themes: LOUNGE (default, dark) and APOTHECARY (toggle, light). Set data-theme="apothecary" on . TABLE OF CONTENTS 1. Tokens (both themes) 2. Reset + base 3. Vapor field (ambient background) 4. Layout shell — sidebar, topbar, content 5. Mobile bottom navigation 6. Topbar mobile controls 7. Typography helpers 8. Buttons 9. Forms 10. Cards, glass panels, stat tiles 11. Badges / tags / pills / role chip 12. Tables 13. Safety banners + safety panel 14. Modal / dialog 15. Toast notifications 16. Utility classes 17. Print styles 18. Accessibility (focus, motion, scrollbars) 19. Address lookup combobox 20. Ratio split control 21. PIN pad 22. Charts (SVG) 23. Invoice / receipt document ============================================================================= */ /* ---------- 1. Tokens -------------------------------------------------------- */ :root { --bg: #0a0c16; --bg-deep: #05060c; --surface: #12162a; --surface-2: #191f38; --surface-glass: rgba(18, 22, 42, .64); --line: rgba(167, 139, 250, .16); --line-strong: rgba(167, 139, 250, .34); --ink: #eef0f8; --muted: #8b93ac; --faint: #5c637c; --mist: #4dd8c4; --mist-ink: #06211d; --mist-wash: rgba(77, 216, 196, .14); --ember: #a78bfa; --ember-ink: #1c1330; --ember-wash: rgba(167, 139, 250, .14); --good: #34d399; --good-wash: rgba(52, 211, 153, .14); --warn: #f5b942; --warn-wash: rgba(245, 185, 66, .14); --bad: #f2607a; --bad-wash: rgba(242, 96, 122, .14); --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 12px 32px rgba(3,4,10,.45); --shadow-glow: 0 0 40px rgba(77,216,196,.14); --radius-lg: 20px; --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --font-display: 'Space Grotesk','Inter',sans-serif; --font-body: 'Inter',system-ui,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,monospace; /* Mobile bottom nav height — used in .main padding-bottom. Includes safe-area-inset-bottom so notched iPhones get proper clearance. */ --nav-h: 66px; color-scheme: dark; } [data-theme="apothecary"] { --bg: #f1efe7; --bg-deep: #e7e3d7; --surface: #ffffff; --surface-2: #f8f6f0; --surface-glass: rgba(255,255,255,.68); --line: rgba(14,128,116,.16); --line-strong: rgba(14,128,116,.34); --ink: #1b1e27; --muted: #5b6072; --faint: #8a8f9e; --mist: #0e8074; --mist-ink: #ffffff; --mist-wash: rgba(14,128,116,.10); --ember: #7c3aed; --ember-ink: #ffffff; --ember-wash: rgba(124,58,237,.10); --good: #0d8a5f; --good-wash: rgba(13,138,95,.10); --warn: #a6690f; --warn-wash: rgba(166,105,15,.12); --bad: #c22a4e; --bad-wash: rgba(194,42,78,.10); --shadow-1: 0 1px 2px rgba(30,25,10,.06); --shadow-2: 0 12px 28px rgba(30,25,10,.08); --shadow-glow: 0 0 40px rgba(14,128,116,.10); color-scheme: light; } /* ---------- 2. Reset + base -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.2; } h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); } h2 { font-size: clamp(1.1rem, 2.2vw, 1.4rem); } h3 { font-size: 1rem; } p { margin: 0 0 12px; color: var(--muted); } a { color: var(--mist); } small { color: var(--faint); font-size: .8rem; } code, .mono { font-family: var(--font-mono); } hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; } /* ---------- 3. Vapor field (ambient background) ------------------------------ */ .vapor-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); } .vapor-field::before, .vapor-field::after { content: ''; position: absolute; width: 56vw; height: 56vw; min-width: 380px; min-height: 380px; border-radius: 50%; filter: blur(90px); opacity: .28; will-change: transform; } .vapor-field::before { background: var(--mist); top: -18%; left: -12%; animation: vc-drift-a 42s ease-in-out infinite alternate; } .vapor-field::after { background: var(--ember); bottom: -22%; right: -14%; animation: vc-drift-b 48s ease-in-out infinite alternate; } [data-theme="apothecary"] .vapor-field::before, [data-theme="apothecary"] .vapor-field::after { opacity: .13; } @keyframes vc-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,5vh) scale(1.14); } } @keyframes vc-drift-b { from { transform: translate(0,0) scale(1); } to { transform: translate(-5vw,-6vh) scale(1.1); } } /* ---------- 4. Layout shell -------------------------------------------------- */ .app-shell { position: relative; z-index: 1; min-height: 100dvh; display: flex; } /* DESKTOP sidebar */ .sidebar { width: 224px; flex-shrink: 0; padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); /* Sticky so it stays on screen while content scrolls */ position: sticky; top: 0; height: 100dvh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 20px; text-decoration: none; color: var(--ink); } .brand-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--mist), var(--ember)); flex-shrink: 0; box-shadow: var(--shadow-glow); } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background .15s, color .15s; position: relative; min-height: 44px; /* WCAG touch target */ } .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .15s ease; } .nav-link:hover { background: var(--surface-2); color: var(--ink); } .nav-link:hover svg { transform: translateX(1px); } .nav-link.active { background: linear-gradient(135deg, var(--mist-wash), var(--ember-wash)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); } .nav-link .badge { margin-left: auto; } /* Small uppercase divider above a group of related sidebar links (e.g. Sales / Stock / Admin) — the sidebar was previously one flat list with no grouping at all. */ .nav-section-label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 12px 12px 4px; } .nav-section-label:first-child { padding-top: 0; } .nav-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } /* Role chip in the sidebar footer */ .role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600; letter-spacing: .02em; margin: 4px 2px 8px; border: 1px solid var(--line); color: var(--muted); } .role-chip.admin { border-color: var(--mist); color: var(--mist); background: var(--mist-wash); } .role-chip.staff { border-color: var(--ember); color: var(--ember); background: var(--ember-wash); } .role-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Main content area */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { min-height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; } .topbar-left { display: flex; align-items: center; gap: 10px; } .topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .topbar-right { display: flex; align-items: center; gap: 8px; } .content { flex: 1; padding: 20px; max-width: 1400px; width: 100%; margin: 0 auto; } @media (min-width: 1600px) { .sidebar { width: 256px; padding: 28px 16px; } .content { padding: 30px; max-width: 1560px; } } /* ---------- 5. Mobile bottom navigation -------------------------------------- */ @media (max-width: 860px) { /* Hide the desktop sidebar entirely on mobile */ .sidebar { display: none; } /* Bottom nav bar */ .mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; text-decoration: none; color: var(--muted); font-size: .6rem; font-weight: 600; letter-spacing: .01em; border-radius: var(--radius-sm); transition: color .15s, background .15s; min-height: 52px; position: relative; } .mobile-nav-item svg { width: 20px; height: 20px; } .mobile-nav-item.active { color: var(--mist); } .mobile-nav-item .badge { position: absolute; top: 2px; right: calc(50% - 18px); min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem; line-height: 16px; } .mobile-nav-item .badge-dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; background: var(--warn); } /* Offset content so it's not hidden behind the nav bar */ .main { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } .content { padding: 14px; } .topbar { padding: 10px 14px; min-height: 54px; } /* Toast stack clears the bottom nav */ .toast-stack { bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); } } /* Desktop: hide mobile nav */ @media (min-width: 861px) { .mobile-nav { display: none; } } /* ---------- 6. More sheet (mobile secondary nav — Ingredients, Calculator, Reports, Reset PIN, theme, sign out; see nav.js's openMoreSheet) --------- */ .more-sheet-links { display: flex; flex-direction: column; gap: 2px; } .more-sheet-link { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; background: none; border: none; width: 100%; text-align: left; cursor: pointer; min-height: 48px; } .more-sheet-link:hover { background: var(--surface-2); } .more-sheet-link svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); } .more-sheet-divider { height: 1px; background: var(--line); margin: 8px 4px; } /* ---------- 7. Typography helpers ------------------------------------------- */ .eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .figure-lg { font-family: var(--font-mono); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 500; } /* Receipt-style label/value row — a running total or spec sheet (the Calculator's recipe breakdown, Billing's cart summary). Promoted here from a copy that used to live only in calculator.html's own