/* ============================================================ MERIDIAN GLASS — re-theme tokens & primitives for avto CRM ------------------------------------------------------------ Light glassmorphism: translucent "glass" cards over a soft aurora gradient backdrop, teal accent, gradient diagrams, 3-color table rows. Adapted from the "Meridian Admin" design handoff (Plus Jakarta Sans / JetBrains Mono, oklch palette). The Catppuccin `ctp-*` utility colors used across templates are remapped to these same values in templates/base.html — this file supplies what plain Tailwind utilities can't: the aurora, backdrop blur, 3-row table rule and gradients. ============================================================ */ :root { /* Accent — teal */ --primary: oklch(0.62 0.09 195); --primary-deep: oklch(0.48 0.09 195); --primary-soft: oklch(0.95 0.025 195); /* Surface & ink */ --bg: #F4F6F8; --surface: rgba(255,255,255,0.62); --surface-solid: #FFFFFF; --ink-900:#0E1620; --ink-700:#2B3540; --ink-500:#5C6773; --ink-300:#97A1AC; /* Lines (translucent — let the surface bleed through) */ --line: rgba(13,32,49,0.08); --line-soft: rgba(13,32,49,0.05); /* Status */ --good: oklch(0.68 0.13 155); --good-soft: oklch(0.96 0.04 155); --bad: oklch(0.66 0.16 25); --bad-soft: oklch(0.97 0.03 25); --warn: oklch(0.78 0.13 75); --warn-soft: oklch(0.97 0.04 75); /* Shape */ --radius: 18px; --radius-sm: 12px; --shadow-sm: 0 1px 2px rgba(13,32,49,.04), 0 1px 0 rgba(13,32,49,.02); --shadow-md: 0 4px 14px rgba(13,32,49,.05), 0 1px 0 rgba(13,32,49,.02); --blur: 22px; } body.dark { --bg: #0B1117; --surface: rgba(19,26,34,0.55); --surface-solid: #131A22; --ink-900:#F2F5F8; --ink-700:#C8D0D9; --ink-500:#8A95A2; --ink-300:#5A6573; --line: rgba(255,255,255,0.07); --line-soft: rgba(255,255,255,0.04); --primary-soft: oklch(0.28 0.05 195); --shadow-sm: 0 1px 0 rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.35); } /* ── Base type & aurora backdrop ───────────────────────────── The aurora paints on body::before (fixed, z-index 0). Every direct child of is lifted to z-index 1 so it sits above the aurora rather than being painted over by it; glass surfaces (translucent) then let the aurora bleed through, blurred via backdrop-filter — the 3rd "mandatory condition" from STYLE.md, without which the blur has nothing to show. ── */ body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-feature-settings: "ss01" on, "cv11" on; -webkit-font-smoothing: antialiased; position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .85; background: radial-gradient(60vw 50vw at 8% 6%, var(--primary-soft) 0%, transparent 55%), radial-gradient(40vw 40vw at 95% 18%, oklch(0.93 0.05 30) 0%, transparent 60%), radial-gradient(45vw 45vw at 80% 90%, oklch(0.93 0.05 270) 0%, transparent 60%), radial-gradient(50vw 50vw at 15% 95%, oklch(0.94 0.04 130) 0%, transparent 60%); } body.dark::before { opacity: .55; background: radial-gradient(60vw 50vw at 8% 6%, oklch(0.30 0.06 195) 0%, transparent 55%), radial-gradient(40vw 40vw at 95% 18%, oklch(0.26 0.08 30) 0%, transparent 60%), radial-gradient(45vw 45vw at 80% 90%, oklch(0.26 0.08 270) 0%, transparent 60%), radial-gradient(50vw 50vw at 15% 95%, oklch(0.26 0.06 130) 0%, transparent 60%); } body > *:not(script):not(style) { position: relative; z-index: 1; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum" on; } /* ── Glass surfaces ────────────────────────────────────────── ctp-base / ctp-surface0 already resolve to translucent white (see tailwind.config in base.html) — add the blur+saturate that turns them into frosted glass over the aurora. Scoped to the large structural surfaces (sidebar, topbar, page cards), not small chips/badges, where blur just looks muddy. ── */ #sidebar, header, [class*="bg-ctp-surface0"] { backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); } #notif-dropdown, #branch-dropdown, .user-menu { backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); } #notif-dropdown { background: rgba(255,255,255,0.96) !important; color: var(--ink-900); box-shadow: 0 18px 45px rgba(13,32,49,0.16); } #notif-dropdown #notif-list a { background: rgba(255,255,255,0.72); } #notif-dropdown #notif-list a:hover { background: rgba(13,32,49,0.06); } body.dark #notif-dropdown { background: rgba(19,26,34,0.96) !important; color: var(--ink-900); } body.dark #notif-dropdown #notif-list a { background: rgba(19,26,34,0.76); } body.dark #notif-dropdown #notif-list a:hover { background: rgba(255,255,255,0.07); } /* `text-ctp-base` is used throughout as contrast text on bright accent chips/badges/avatars (bg-ctp-blue text-ctp-base, etc). ctp-base now resolves to a translucent glass value (so bg-ctp-base on the sidebar reads as glass) — force it back to dark ink wherever it's the foreground/text color instead. */ .text-ctp-base { color: var(--ink-900) !important; } /* ── Tables — 3-color row rule ─────────────────────────────── Odd / even rows get two translucent tints, hover/active rows get the accent tint. Scoped to
content tables so the POS screens (their own layout, no
) stay untouched. ── */ main table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.28); } main table tbody tr:nth-child(even) td { background: rgba(13,32,49,0.025); } main table tbody tr:hover td { background: var(--primary-soft) !important; } /* ── Status pills (Meridian-style markup) ───────────────────── */ .status { display:inline-flex; align-items:center; gap:6px; font:700 11.5px/1 'Plus Jakarta Sans', sans-serif; padding:4px 9px; border-radius:6px; } .status .pd { width: 6px; height: 6px; border-radius: 50%; } .status.live { background: var(--good-soft); color: var(--good); } .status.live .pd { background: var(--good); } .status.pending { background: var(--warn-soft); color: oklch(0.55 0.13 60); } .status.pending .pd { background: var(--warn); } .status.draft { background: var(--line-soft); color: var(--ink-500); } .status.draft .pd { background: var(--ink-500); } /* ── Glass card / button primitives (Meridian-style markup) ── */ .card { background: var(--surface); backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .btn { height: 40px; padding: 0 16px; border-radius: 10px; font: 600 13.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-900); display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s, transform .05s; } .btn:hover { background: rgba(255,255,255,0.8); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--ink-900); color: #fff; border-color: var(--ink-900); } /* ── KPI / delta / progress helpers (gradient diagrams per STYLE.md §3) ── */ .kpi-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-deep); display: grid; place-items: center; } .delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 3px 7px; border-radius: 6px; } .delta.up { background: var(--good-soft); color: var(--good); } .delta.down { background: var(--bad-soft); color: var(--bad); } .bar-track { width: 100%; height: 8px; background: rgba(13,32,49,0.06); border-radius: 999px; overflow: hidden; position: relative; } .bar-fill { height: 100%; border-radius: 999px; position: relative; background: linear-gradient(90deg, var(--primary), oklch(0.72 0.13 145), oklch(0.78 0.13 90)); box-shadow: 0 0 8px oklch(0.62 0.09 195 / .4); } .bar-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 50%); } /* Slim glass-friendly scrollbars on every scroll area */ .overflow-y-auto::-webkit-scrollbar { width: 8px; height: 8px; } .overflow-y-auto::-webkit-scrollbar-track { background: transparent; } .overflow-y-auto::-webkit-scrollbar-thumb { background: rgba(13,32,49,0.15); border-radius: 999px; } .overflow-y-auto::-webkit-scrollbar-thumb:hover { background: rgba(13,32,49,0.25); } body.dark .overflow-y-auto::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }