/* ============================================================================ CrutionResto Design System v3 "Jade & Saffron" — dependency-free CSS ---------------------------------------------------------------------------- Theming: every visual constant lives in a token on :root (light) with a [data-theme="dark"] override set. A tiny inline script in each layout stamps data-theme on before first paint (localStorage → system preference), so there is never a flash of the wrong theme. Pages must never hardcode hex. v3 design language: jade primary + saffron accent on warm stone neutrals, pill-shaped controls, tonal (soft-tint) secondary variants, glassy shell surfaces, and soft diffuse elevation instead of hard material shadows. Solid buttons read their text colour from --c-on-primary so dark mode can run a bright jade fill with dark ink, the way current design systems do. Layered: 1) tokens 2) base 3) theme toggle 4) app shell 5) primitives (buttons, forms, cards, tables, badges, tabs, chips) 6) states & feedback 7) overlays (modal, toast) 8) auth 9) error screens 10) POS / KDS / charts 11) marketing site 12) public layout 13) guest QR menu 14) misc + responsive + accessibility. ========================================================================== */ /* ------------------------------------------------------------- 1. tokens --- */ :root { color-scheme: light; /* brand — jade primary, saffron accent */ --c-primary: #0f766e; /* links, icons, accents on surfaces */ --c-primary-strong: #0b5d56; /* hovered accent text */ --c-accent: #f59e0b; /* saffron — gradients, highlights */ --c-blue: #2563eb; --c-on-primary: #ffffff; /* text on a solid primary fill */ /* brand gradients (jade core, jade→saffron spectrum) */ --grad-brand: linear-gradient(135deg, #0d9488 0%, #0f766e 60%, #0b5d56 100%); --grad-spectrum: linear-gradient(120deg, #0d9488, #2dd4bf 45%, #f59e0b); /* semantic */ --c-success: #059669; --c-warning: #d97706; --c-danger: #e11d48; --c-info: #2563eb; /* neutrals — warm stone, never pure gray */ --c-ink: #1c1917; --c-muted: #57534e; --c-faint: #a29e97; --c-line: #eae7e2; --c-line-strong: #d9d4cd; --c-bg: #f6f4f0; --c-card: #ffffff; --c-field: #faf9f6; --c-inset: #f0eee9; /* wells: tab tracks, code, bar tracks */ --c-hover: #f3f1ec; /* sidebar */ --sb-bg: rgba(255, 255, 255, 0.86); --sb-line: #eae7e2; --sb-ink: #57534e; --sb-ink-strong: #1c1917; --sb-hover: #f3f1ec; --sb-section: #a29e97; /* elevation — soft key + ambient pairs, no hard material edges */ --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 2px 10px -2px rgba(28, 25, 23, 0.07); --shadow: 0 2px 4px rgba(28, 25, 23, 0.05), 0 14px 32px -14px rgba(28, 25, 23, 0.16); --shadow-lg: 0 4px 10px rgba(28, 25, 23, 0.06), 0 28px 56px -18px rgba(28, 25, 23, 0.24); --glow-primary: 0 10px 26px -10px color-mix(in srgb, var(--c-primary) 55%, transparent); /* geometry — rounder than v2; interactive controls are pills */ --radius-lg: 24px; --radius: 18px; --radius-sm: 12px; --radius-xs: 9px; --radius-pill: 999px; /* type & spacing */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 22px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; /* motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 0.15s; --t-med: 0.3s; --sidebar-w: 256px; --topbar-h: 62px; /* one control height per row — every field, select and button in a row container resolves to these, so nothing sits 6px shorter than its neighbour */ --control-h: 42px; --control-h-sm: 34px; /* widths for narrow, single-purpose panes */ --pane-narrow: 640px; --pane-tight: 420px; /* ambient background strength — high enough to see in the gutters, low enough that it never competes with a card or its text */ --fx-1: 13%; --fx-2: 9%; --fx-3: 11%; } :root[data-theme="dark"] { color-scheme: dark; /* brand — bright jade fill carries dark ink in dark mode */ --c-primary: #2dd4bf; --c-primary-strong: #5eead4; --c-accent: #fbbf24; --c-blue: #60a5fa; --c-on-primary: #062622; --grad-brand: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%); --grad-spectrum: linear-gradient(120deg, #14b8a6, #2dd4bf 45%, #fbbf24); --c-success: #34d399; --c-warning: #fbbf24; --c-danger: #fb7185; --c-info: #60a5fa; /* neutrals — warm charcoal, never pure black */ --c-ink: #f5f4f1; --c-muted: #b8b3ab; --c-faint: #7d786f; --c-line: #2a2723; --c-line-strong: #3a352f; --c-bg: #12100e; --c-card: #1b1917; --c-field: #201d1a; --c-inset: #262220; --c-hover: #262220; /* sidebar — warm glass */ --sb-bg: rgba(20, 18, 16, 0.86); --sb-line: rgba(58, 53, 47, 0.6); --sb-ink: #b8b3ab; --sb-ink-strong: #f5f4f1; --sb-hover: rgba(38, 34, 32, 0.9); --sb-section: #7d786f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px -2px rgba(0, 0, 0, 0.40); --shadow: 0 2px 4px rgba(0, 0, 0, 0.40), 0 14px 32px -14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 28px 56px -18px rgba(0, 0, 0, 0.65); --glow-primary: 0 10px 26px -10px color-mix(in srgb, var(--c-primary) 45%, transparent); --fx-1: 16%; --fx-2: 11%; --fx-3: 13%; } /* --------------------------------------------------------------- 2. base --- */ * { box-sizing: border-box; } /* Ambient aurora — two fixed, blur-free gradient layers drifting very slowly in opposite directions behind every page. Cards are opaque, so this only ever colours the gutters: text contrast and hit targets are untouched. Motion is transform-only on a composited layer (no repaint), the cycles are ~1 minute so nothing pulls the eye during service, prefers-reduced-motion freezes it (global rule below) and print never sees it. */ .bg-fx { position: fixed; inset: -25%; z-index: 0; pointer-events: none; background: radial-gradient(38% 44% at 14% 16%, color-mix(in srgb, var(--c-primary) var(--fx-1), transparent), transparent 68%), radial-gradient(34% 40% at 88% 10%, color-mix(in srgb, var(--c-accent) var(--fx-2), transparent), transparent 64%), radial-gradient(46% 52% at 62% 94%, color-mix(in srgb, var(--c-blue) var(--fx-3), transparent), transparent 66%); animation: bg-drift 56s ease-in-out infinite alternate; will-change: transform; } .bg-fx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(30% 36% at 74% 44%, color-mix(in srgb, var(--c-primary) var(--fx-2), transparent), transparent 62%), radial-gradient(28% 32% at 22% 72%, color-mix(in srgb, var(--c-accent) var(--fx-3), transparent), transparent 60%); animation: bg-drift-alt 74s ease-in-out infinite alternate; will-change: transform; } @keyframes bg-drift { from { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1); } to { transform: translate3d(3%, 3%, 0) rotate(3deg) scale(1.14); } } @keyframes bg-drift-alt { from { transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.1); } to { transform: translate3d(-4%, -3%, 0) rotate(-3deg) scale(1); } } @media print { .bg-fx { display: none !important; } } html, body, #root { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; font-size: var(--fs-md); transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease); } h1, h2, h3, label { font-weight: 600; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; } code { background: var(--c-inset); padding: 1px 6px; border-radius: 5px; font-size: 0.85em; } a { color: var(--c-primary); } ::selection { background: color-mix(in srgb, var(--c-primary) 24%, transparent); } :is(button, input, select, textarea):focus-visible, a:focus-visible, label:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c-faint) 55%, transparent) transparent; } /* ------------------------------------- 3. icon buttons & theme toggle ----- */ .theme-toggle, .icon-btn { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--c-muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .theme-toggle:hover, .icon-btn:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); color: var(--c-primary-strong); } .theme-toggle:active, .icon-btn:active { transform: scale(0.94); } .theme-toggle svg, .icon-btn svg { width: 18px; height: 18px; } /* show the CURRENT theme icon */ :root[data-theme="light"] .tt-moon { display: none; } :root[data-theme="dark"] .tt-sun { display: none; } html:not([data-theme]) .theme-toggle { display: none; } /* no JS → no toggle */ .theme-toggle-float { position: fixed; top: 18px; right: 18px; z-index: 50; background: var(--c-card); } /* ---------------------------------------------------------- 4. app shell --- */ .layout { display: flex; min-height: 100vh; position: relative; z-index: 1; } .app-shell { display: flex; min-height: 100vh; } .nav-open-box { display: none; } .scrim { display: none; } .sidebar { width: var(--sidebar-w); background: var(--sb-bg); border-right: 1px solid var(--sb-line); color: var(--sb-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; transition: transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease); } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.4px; color: var(--sb-ink-strong); border-bottom: 1px solid var(--sb-line); } .brand-mark { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--grad-spectrum); color: #fff; font-size: 15px; font-weight: 800; display: inline-grid; place-items: center; box-shadow: var(--glow-primary); } .sidebar-brand .brand-c { color: var(--sb-ink-strong); } .sidebar-brand .brand-r, .brand-r { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-scroll { overflow-y: auto; flex: 1; padding-bottom: var(--sp-3); } .nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sb-section); padding: 16px 20px 6px; font-weight: 700; margin-top: 2px; } .nav { display: flex; flex-direction: column; gap: 1px; padding: 0 10px 6px; } .nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-pill); color: var(--sb-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); } .nav-ico { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; color: var(--c-faint); transition: color var(--t-fast); } .nav-ico svg { width: 18px; height: 18px; } .nav-item:hover { background: var(--sb-hover); color: var(--sb-ink-strong); } .nav-item:hover .nav-ico { color: var(--sb-ink-strong); } /* the active page is a filled pill, not a tinted row with an edge bar */ .nav-item.active { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary-strong); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 22%, transparent); } .nav-item.active .nav-ico { color: var(--c-primary); } .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; } .topbar { height: var(--topbar-h); background: color-mix(in srgb, var(--c-card) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6); position: sticky; top: 0; z-index: 5; gap: var(--sp-3); } .topbar h1 { font-size: var(--fs-lg); margin: 0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .topbar-actions .btn { white-space: nowrap; } .menu-toggle { display: none; cursor: pointer; font-size: 20px; } /* account dropdown (details/summary — works without JS; JS adds outside-click close) */ .user-menu { position: relative; } .user-menu summary { list-style: none; } .user-menu summary::-webkit-details-marker { display: none; } .user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-radius: 999px; cursor: pointer; border: 1px solid var(--c-line-strong); background: transparent; transition: background var(--t-fast), border-color var(--t-fast); } .user-chip:hover, .user-menu[open] .user-chip { background: var(--c-hover); } /* outlet picker — same pill language as the account chip, so the two read as one row of shell controls rather than a form dropped into the header */ .outlet-picker { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: transparent; transition: background var(--t-fast), border-color var(--t-fast); } .outlet-picker:hover, .outlet-picker:focus-within { background: var(--c-hover); } .outlet-picker-icon { width: 15px; height: 15px; color: var(--c-faint); flex: none; } .outlet-picker select { border: 0; background: transparent; color: var(--c-ink); font-weight: 600; font-size: var(--fs-sm); font-family: inherit; padding: 3px 2px; cursor: pointer; max-width: 170px; } .outlet-picker select:focus { outline: none; } .outlet-picker:focus-within { border-color: var(--c-primary); } /* The native menu paints with the OS palette, so force the surface in dark. */ .outlet-picker select option { background: var(--c-card); color: var(--c-ink); } /* share-of-group bar in the Outlets report — ranking is a comparison, and a length is comparable at a glance in a way a column of percentages is not */ .share-bar { display: inline-block; vertical-align: middle; width: 54px; height: 6px; margin-right: 6px; border-radius: 999px; background: var(--c-line); overflow: hidden; } .share-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--c-primary); transition: width var(--t-med); } .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; } .user-chip .avatar { width: 27px; height: 27px; font-size: 11px; } .user-chip-name { font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip-caret { width: 14px; height: 14px; color: var(--c-faint); transition: transform var(--t-fast); } .user-menu[open] .user-chip-caret { transform: rotate(180deg); } .user-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 236px; z-index: 45; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; animation: modal-in 0.18s var(--ease); } .user-pop-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; } .user-pop-head .avatar { width: 34px; height: 34px; } .user-pop-head .who { min-width: 0; } .user-pop-head b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-pop-head span { font-size: var(--fs-xs); color: var(--c-muted); } .user-pop form { margin: 0; } .user-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; cursor: pointer; border: none; background: none; text-decoration: none; text-align: left; font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); transition: background var(--t-fast); } .user-pop-item svg { width: 16px; height: 16px; flex: none; color: var(--c-faint); } .user-pop-item:hover { background: var(--c-hover); } .user-pop-item.danger { color: var(--c-danger); } .user-pop-item.danger svg { color: inherit; } .user-pop-sep { height: 1px; background: var(--c-line); margin: 6px 4px; } @media (max-width: 560px) { .user-chip-name, .user-chip-caret { display: none; } } .content-body { padding: var(--sp-6); width: 100%; max-width: none; margin: 0; } /* Deliberately NOT animated. This is a server-rendered app: selecting a tab, a page or a filter is a full page load, so fading the whole content area in from opacity 0 made every click flicker — most visibly on Reports and Expenses, where the tab strip invites repeated clicks. view-in is kept for things that genuinely appear (flash messages, field errors, error cards). */ /* a lead paragraph is a block like any other: the browser's 1em margin left a 14px gap where every other block sits 16px apart */ .content-body > p { margin: 0 0 var(--sp-4); } @keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } } /* ---------------------------------------------------------- page header --- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-5); gap: var(--sp-4); flex-wrap: wrap; } .page-head h2 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 700; } .page-head p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); } .page-head-actions { display: flex; gap: var(--sp-2); } /* ------------------------------------------------------- 5a. buttons ------ */ /* Pill buttons. One solid primary per view; everything else is tonal — a soft tint of its own colour — or quiet. Focus is a visible offset ring. */ .btn { font-family: inherit; font-weight: 600; font-size: var(--fs-md); cursor: pointer; border: none; border-radius: var(--radius-pill); padding: 10px 18px; background: var(--grad-brand); color: var(--c-on-primary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Align on the box middle, not a text baseline: an and a