/* spatial-shell.css — parte din creator-portal-spatial.css (liniile 110-252). Panourile de sticlă partajate, sidebar-ul flotant, topbar-ul, interioarele stat/verif/panel și pill-urile de filtru. MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare a bucăților contează (cascada) — vezi src/components/styles/. */ /* ---------- 4 · SHARED GLASS PANELS ---------- */ /* one consistent frosted treatment for every floating surface */ body.cp-spatial .cp-stat, body.cp-spatial .cp-panel, body.cp-spatial .cp-brief, body.cp-spatial .cp-brief-card, body.cp-spatial .cp-card-form, body.cp-spatial .cp-table, body.cp-spatial .cp-verif, body.cp-spatial .cp-pub-stat, body.cp-spatial .cp-rate-pub, body.cp-spatial .cm-budget-row > div, body.cp-spatial .cr-consents { background: var(--glass-tint); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid oklch(1 0 0 / .16); border-radius: var(--radius-lg); box-shadow: var(--glass-edge), var(--glass-shadow); } body.cp-spatial .cp-brief:hover, body.cp-spatial .cp-brief-card:hover { border-color: oklch(1 0 0 / .34); box-shadow: var(--glass-edge), 0 36px 70px -28px oklch(0 0 0 / .7); transform: translateY(-2px); } body.cp-spatial .cp-stat:hover, body.cp-spatial .cp-pub-stat:hover { border-color: oklch(1 0 0 / .26); } /* ---------- 5 · APP SHELL: floating sidebar ---------- */ body.cp-spatial .cp-shell { background: transparent; } body.cp-spatial .cp-side { margin: var(--chrome-inset) 0 var(--chrome-inset) var(--chrome-inset); /* sticky `top` inherits the base --chrome-inset so it anchors to the exact same vertical level as the topbar (both read --chrome-inset). */ height: calc(100vh - var(--chrome-inset) * 2); border-radius: var(--radius-lg); border: 1px solid oklch(1 0 0 / .16); background: var(--glass-tint-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); } body.cp-spatial .cp-side-brand .mark { background: oklch(1 0 0 / .95); color: oklch(0.18 0.02 265); } body.cp-spatial .cp-nav a { color: var(--ink-2); } body.cp-spatial .cp-nav a:hover { background: oklch(1 0 0 / .08); color: #fff; } body.cp-spatial .cp-nav a.active { background: oklch(1 0 0 / .16); color: #fff; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .22); } body.cp-spatial .cp-nav a.active .ic { color: #fff; } body.cp-spatial .cp-nav a .badge { background: var(--signal); color: oklch(0.16 0.04 162); } body.cp-spatial .cp-nav a.active .badge { background: #fff; color: oklch(0.2 0.02 265); } body.cp-spatial .cp-side-card { border-color: oklch(1 0 0 / .14); background: oklch(1 0 0 / .06); border-radius: var(--radius-md); } /* ---------- 6 · TOPBAR (floating frosted bar) ---------- */ body.cp-spatial .cp-top { margin: var(--chrome-inset) var(--chrome-inset) 0; border: 1px solid oklch(1 0 0 / .16); border-radius: var(--radius-md); background: oklch(0.18 0.018 265 / .5); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 20px 44px -28px oklch(0 0 0 / .6); } body.cp-spatial .cp-icon-btn { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .16); color: var(--ink-2); } /* Theme toggle is hidden inside the spatial portal/admin chrome. The spatial skin is intentionally dark-only — the [data-theme] token blocks at the top of this file resolve light & dark to the same glass palette, so a light/dark toggle here is a promise the UI can't keep: clicking it flips the attribute but produces no visible change, which reads as a broken button. Hide it at the source on every cp-spatial surface (portal /app/* + admin /admin/*). The landing site keeps its own working toggle (.theme-btn / .mm-theme in style.css) — different selectors, untouched. */ body.cp-spatial .js-theme-toggle { display: none; } /* Theme-toggle surface nuance — retained but inert while the toggle is hidden above. Only the button surface (.cp-icon-btn) is tinted; glass tokens intact. */ body.cp-spatial[data-theme="light"] .cp-icon-btn { background: oklch(1 0 0 / .14); border-color: oklch(1 0 0 / .22); } body.cp-spatial[data-theme="dark"] .cp-icon-btn { background: oklch(1 0 0 / .05); border-color: oklch(1 0 0 / .13); } body.cp-spatial .cp-icon-btn:hover { background: oklch(1 0 0 / .16); border-color: oklch(1 0 0 / .3); color: #fff; } body.cp-spatial .cp-icon-btn .dot { border-color: transparent; } /* mobile sub-tabs */ body.cp-spatial .cp-mob-tabs button, body.cp-spatial .cp-mob-tabs a { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .16); color: var(--ink-2); } body.cp-spatial .cp-mob-tabs button.active, body.cp-spatial .cp-mob-tabs a.active { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); border-color: transparent; } /* ---------- 7 · STAT / VERIF / PANELS internals ---------- */ body.cp-spatial .cp-verif.ok { background: oklch(0.6 0.12 162 / .18); border-color: oklch(0.7 0.12 162 / .4); } body.cp-spatial .cp-verif.pend { background: oklch(0.7 0.1 80 / .16); border-color: oklch(0.78 0.12 80 / .4); } body.cp-spatial .cp-verif .vic { background: oklch(1 0 0 / .1); } body.cp-spatial .cp-progress { background: oklch(1 0 0 / .1); } body.cp-spatial .cp-payrow, body.cp-spatial .cp-toggle, body.cp-spatial .cp-tr, body.cp-spatial .cp-review-row, body.cp-spatial .cp-login-alt, body.cp-spatial .cm-stepper li, body.cp-spatial .cp-check li { border-color: oklch(1 0 0 / .1); } body.cp-spatial .cp-tr.head { background: oklch(1 0 0 / .05); } body.cp-spatial .cp-review-row:hover, body.cp-spatial .cp-tr:not(.head):hover { background: oklch(1 0 0 / .05); } body.cp-spatial .cp-check .box { border-color: oklch(1 0 0 / .22); } body.cp-spatial .cp-brief .blogo, body.cp-spatial .cm-logo, body.cp-spatial .ni-ic { background: oklch(1 0 0 / .1); border-color: oklch(1 0 0 / .16); color: #fff; } /* ---------- 8 · TABS / FILTER PILLS ---------- */ body.cp-spatial .cp-tabs { background: oklch(1 0 0 / .06); border-color: oklch(1 0 0 / .14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } body.cp-spatial .cp-tabs button { color: var(--ink-2); } body.cp-spatial .cp-tabs button:hover { color: #fff; } body.cp-spatial .cp-tabs button.active { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); box-shadow: 0 2px 10px -4px oklch(0 0 0 / .5); }