/* ════════════════════════════════════════════════════════════════════════════ FLAT UI OVERRIDE LAYER — 2026-08-13 (requested by Tanveer) ════════════════════════════════════════════════════════════════════════════ Loaded LAST on every page (templates/base.html, templates/auth/_shell.html — which every signed-out page extends). Every flat-redesign rule lives in THIS one file so the change is trivially reversible — the underlying design layers (shell / prototype / v1 / vibe-soft / theme / responsive) are untouched. TO REVERT: delete this file's from the three templates above and set TILT_ENABLED = true in static/js/app.js. Full notes + rationale in docs/flat-ui-override-2026-08-13.md. v2 (2026-08-13, tuned via /static/design-lab.html): - background #F4F4F2 → #F2F3F6 - ORIGINAL shadows restored (v1's universal box-shadow kill is gone) - frosted-glass blur removed from cards - the cursor-tracking radial glow + cyan hover shadow replaced with a calm static hover: soft slate ring + top sheen, no movement - rail stays solid #17171A; card tilt stays disabled ──────────────────────────────────────────────────────────────────────── */ /* ── 1. Solid page background ──────────────────────────────────────────── */ body { background: #F2F3F6 !important; } .vibe-soft { background: #F2F3F6 !important; } /* kills the radial mesh */ .theme-dark body, .theme-dark .vibe-soft { background: #0A0D17 !important; } /* The login page paints its own little mesh (inline .login-shell style). */ .login-shell { background: #F2F3F6 !important; } /* ── 2. Solid sidebar rail ─────────────────────────────────────────────── */ /* !important beats the higher-specificity .vibe-mode/.theme-dark rail rules in vibe-soft.css + v1.css (none of which are !important). Covers the mobile bottom-nav form of the rail too (same .rail element ≤900px). */ .rail { background: #17171A !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ── 3. No frosted-glass blur on cards ─────────────────────────────────── */ /* Cards keep their translucent surface + shadows; over the solid page background the blur only cost GPU without adding anything visible. */ .vibe-soft .vc, .vibe-soft .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ── 4. Card hover — calm ring + sheen (replaces the cursor-glow) ──────── */ /* Old behavior (theme.css): a white radial glow chased the cursor across the card (mix-blend ::before fed by JS vars) and hover swapped the shadow for a heavy cyan-tinted one. New behavior: a static top-down sheen fades in (the ::before is restyled, so it inherits theme.css's opacity 0→1 transition and overlay blend), plus a soft slate ring and a slightly deeper NEUTRAL shadow. Nothing tracks the pointer; nothing moves. The insets below reproduce the glass "lens" edge from vibe-soft.css so card edges don't flicker on hover. Note ::before only ever renders on .tilt-card surfaces — theme.css's tilt scoping block display:none's it everywhere else — so the sheen lands on the interactive (clickable) cards, which is where hover feedback belongs. */ .tilt-card::before, .vc:not([data-no-tilt])::before, .kpi.soft-kpi::before, .cx-kpi::before, .tier-card::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.0) 55%) !important; } .theme-dark .tilt-card::before, .theme-dark .vc:not([data-no-tilt])::before, .theme-dark .kpi.soft-kpi::before, .theme-dark .cx-kpi::before, .theme-dark .tier-card::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.0) 55%) !important; } .tilt-card:hover, .vc:not([data-no-tilt]):hover, .kpi.soft-kpi:hover, .cx-kpi:hover, .tier-card:hover { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.40), inset 1px 0 0 rgba(255, 255, 255, 0.60), inset -1px 0 0 rgba(255, 255, 255, 0.40), 0 0 0 1px var(--brand-line, rgba(61, 106, 140, 0.30)), 0 2px 6px rgba(15, 23, 42, 0.05), 0 14px 36px rgba(15, 23, 42, 0.10) !important; } .theme-dark .tilt-card:hover, .theme-dark .vc:not([data-no-tilt]):hover, .theme-dark .kpi.soft-kpi:hover, .theme-dark .cx-kpi:hover, .theme-dark .tier-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--brand-line, rgba(108, 160, 196, 0.36)), 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.45) !important; } /* ── 5. Workday ring + presence dot on the rail avatar ─────────────────── */ /* v1.css draws the workday ring black (#000) — invisible on the new near-black #17171A rail. Redrawn here: a white arc over a faint white track. The original used HARD gradient stops (conic arc + radial mask), which don't anti-alias — fine for black-on-light, jagged for light-on-dark. Both edges get a ~1px feather: the mask's inner edge ramps over 1px, and the arc's leading edge ramps over 0.6% of the turn. Outer edge is the element's own border-radius (browser-antialiased). */ .rail .rail-avatar::before { inset: -3px; background: conic-gradient( rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) calc(var(--pct) * 1% - 0.3%), rgba(255, 255, 255, 0.14) calc(var(--pct) * 1% + 0.3%), rgba(255, 255, 255, 0.14) 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.25px), #000 calc(100% - 2.25px)); mask: radial-gradient(closest-side, transparent calc(100% - 3.25px), #000 calc(100% - 2.25px)); } /* The presence dot's cutout border was the old rail colours (#0E1620 / #07101A) — match the new rail so the dot sits flush again. */ .rail .rail-avatar::after, .theme-dark .rail .rail-avatar::after { border-color: #17171A; } /* ── 6. No pointer-follow motion ───────────────────────────────────────── */ /* app.js no longer tags cards `.is-tilting` (TILT_ENABLED = false), but keep the CSS kill as belt-and-braces: even if the flag is flipped back without removing this file, the transform stays inert. */ .is-tilting { transform: none !important; }