/**
* Vaadhan — Shared Polish Layer
*
* Drop-in micro-interactions, loading skeletons, and a11y refinements
* that apply to every protected page. Include with:
*
*
* Design rules:
* - Never override page-specific styles. Only *add* polish on top.
* - Respect prefers-reduced-motion at every animation boundary.
* - All transitions ≤ 250ms — feel responsive, not laggy.
* - Use design tokens already defined in pages (--gold, --navy, etc.).
*/
/* ═══════════════════════════════════════════════════════════════════
0. THEME SYSTEM — light / dark, shared across all app pages.
Each page hardcodes its tokens inline at :root (specificity 0,1,0).
These html[data-theme="…"] rules (specificity 0,1,1) WIN, so the whole
app re-themes from this one file. Accent is the landing's indigo in
BOTH themes (replaces the old judicial gold) for brand cohesion.
Default theme is set on by auth-guard.js (persisted in localStorage).
═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
--void:#08080C; --abyss:#0A0A0F; --surface:#14141C; --raised:#1B1B25; --card:#1B1B25;
--border:rgba(255,255,255,0.10); --border-hi:rgba(255,255,255,0.20);
/* navy family: --navy is used as TEXT (headings) → light; --navy-deep/mid are
structural backgrounds (sidebar / wells) → dark. */
--navy:#E7E7F2; --navy-deep:#0A0A0F; --navy-mid:#20202C;
/* gold family → electric indigo accent */
--gold:#8B8AF8; --gold-lit:#A5A3FA; --gold-bright:#BCBBFC; --gold-dim:#6361D4;
/* status — brightened for dark legibility */
--crimson:#F87171; --jade:#34D399; --amber:#FBBF24;
/* ink → light text ramp */
--ink:#ECECF2; --ink-mid:rgba(236,236,242,0.66); --ink-dim:rgba(236,236,242,0.44); --ink-ghost:rgba(236,236,242,0.26);
--shadow-soft:0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.40);
--shadow-card:0 8px 36px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.45);
--shadow-hover:0 16px 56px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.45);
color-scheme:dark;
}
html[data-theme="light"]{
--void:#F7F4EE; --abyss:#F3F1EA; --surface:#FFFFFF; --raised:#F7F4EE; --card:#FCFAF4;
--border:rgba(20,19,16,0.12); --border-hi:rgba(20,19,16,0.20);
/* navy family → near-black structural surfaces (modern, not judicial navy) */
--navy:#16151F; --navy-deep:#0E0D14; --navy-mid:#2A2937;
/* gold family → indigo accent (matches dark) */
--gold:#5957C9; --gold-lit:#6361D4; --gold-bright:#7D7BF6; --gold-dim:#4A48A8;
--crimson:#C0392B; --jade:#1A8C52; --amber:#9A6300;
--ink:#15140F; --ink-mid:#4A453B; --ink-dim:#857E70; --ink-ghost:#B8AE98;
--shadow-soft:0 2px 20px rgba(26,20,16,.08), 0 1px 4px rgba(26,20,16,.05);
--shadow-card:0 8px 40px rgba(26,20,16,.10), 0 2px 8px rgba(26,20,16,.06);
--shadow-hover:0 16px 64px rgba(99,97,212,.14), 0 4px 16px rgba(99,97,212,.08);
color-scheme:light;
}
/* Theme toggle button (injected into the topbar by auth-guard.js) */
.vh-theme-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:9px;cursor:pointer;
background:var(--raised);border:1px solid var(--border);color:var(--ink-mid);
transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.vh-theme-toggle:hover{color:var(--ink);border-color:var(--gold);transform:translateY(-1px)}
.vh-theme-toggle svg{width:17px;height:17px;display:block}
.vh-theme-toggle .vh-sun{display:none}
.vh-theme-toggle .vh-moon{display:block}
html[data-theme="dark"] .vh-theme-toggle .vh-sun{display:block}
html[data-theme="dark"] .vh-theme-toggle .vh-moon{display:none}
/* ─── Dark-theme overrides for HARDCODED structural chrome (not token-driven).
These selectors out-specify the pages' inline rules. Grow as needed. ─── */
html[data-theme="dark"] .topbar{
background:rgba(13,13,19,0.92);
border-bottom-color:var(--border);
box-shadow:0 1px 0 rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body::before{ opacity:0.5; mix-blend-mode:screen; }
/* Primary CTA buttons that hardcode the old gold gradient inline → indigo accent
in BOTH themes (!important beats the non-important inline style). */
.share-btn, .dp-btn.primary{
background:linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 100%) !important;
color:#fff !important;
border-color:transparent !important;
}
/* Shared sidebar bits + billing's add button: neutralise leftover gold tints. */
html[data-theme="dark"] .sb-item.active{ background:rgba(125,123,246,0.15); }
html[data-theme="light"] .sb-item.active{ background:rgba(125,123,246,0.12); }
.sb-avatar{ box-shadow:0 2px 10px rgba(125,123,246,0.35) !important; }
.sb-avatar:hover{ box-shadow:0 4px 18px rgba(125,123,246,0.50) !important; }
html[data-theme="dark"] .btn-add{ background:rgba(125,123,246,0.15) !important; border-color:rgba(125,123,246,0.30) !important; }
html[data-theme="light"] .btn-add{ background:rgba(125,123,246,0.12) !important; border-color:rgba(125,123,246,0.28) !important; }
/* Primary action buttons used a navy→navy-deep gradient; --navy is now light
(it's heading text) so that gradient went grey. Repoint to the indigo accent. */
html[data-theme="dark"] .btn-verify, html[data-theme="dark"] .btn-calc{
background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%) !important;
}
/* TEXT elements across pages set color:var(--navy-deep) — fine in light mode,
but --navy-deep is near-black (#0A0A0F) in dark mode → invisible on the dark
body. Remap these heading/label TEXT selectors to --ink in dark mode only.
(Background/badge uses of navy-deep — .period-btn.active, .heat-5, .plan-cta,
.sb nav etc. — are intentionally NOT included; they stay navy.) */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-h,
html[data-theme="dark"] .judge-name,
html[data-theme="dark"] .donut-center-n,
html[data-theme="dark"] .counter-head,
html[data-theme="dark"] .cite-name,
html[data-theme="dark"] .watch-name,
html[data-theme="dark"] .tpl-item-name,
html[data-theme="dark"] .res-date,
html[data-theme="dark"] .rc-label,
html[data-theme="dark"] .entry-case,
html[data-theme="dark"] .entry-dur,
html[data-theme="dark"] .footer-val,
html[data-theme="dark"] .vp,
html[data-theme="dark"] .av-warn b,
html[data-theme="dark"] .desk-case-title,
html[data-theme="dark"] .desk-tab.active,
html[data-theme="dark"] .desk-tl-event{
color:var(--ink) !important;
}
/* Sidebar sign-out / profile menu: pages center it on the 32px-wide avatar
(left:50%; translateX(-50%)) — but the sidebar hugs the left edge, so a
~140px menu overflows OFF-SCREEN to the left (clipping the name + buttons).
Anchor it to the sidebar's left and open rightward into the page instead. */
.signout-menu{
left:10px !important;
right:auto !important;
transform:none !important;
}
/* ─────────────────────────────────────────────────────────────────
1. PAGE ENTRANCE — subtle fade-up on first paint of
─────────────────────────────────────────────────────────────── */
main.content {
animation: vh-page-in .35s ease-out both;
}
@keyframes vh-page-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─────────────────────────────────────────────────────────────────
2. CARDS — gentle hover lift across the app
─────────────────────────────────────────────────────────────── */
.card,
.pcard,
.case-card,
.matter-card,
.stat-card,
.disposal-row,
.judge-row {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,
.stat-card:hover {
transform: translateY(-1px);
box-shadow: 0 12px 36px rgba(26,20,16,.12), 0 4px 12px rgba(26,20,16,.08);
}
/* ─────────────────────────────────────────────────────────────────
3. BUTTONS — clearer hover/active states + focus rings
─────────────────────────────────────────────────────────────── */
button,
.btn,
.auth-submit,
.signout-btn,
.timer-btn,
.share-btn {
transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
button:active,
.btn:active,
.auth-submit:active,
.signout-btn:active {
transform: translateY(1px);
}
/* Stronger keyboard-focus ring (overrides any default outline:none) */
*:focus-visible {
outline: 2px solid var(--gold-bright, #e8b84b);
outline-offset: 2px;
border-radius: 3px;
}
/* ─────────────────────────────────────────────────────────────────
4. SKELETON LOADING — for use when fetching from Firestore
Usage:
─────────────────────────────────────────────────────────────── */
.vh-skeleton {
display: block;
background: linear-gradient(90deg,
rgba(26,20,16,.06) 0%,
rgba(26,20,16,.12) 50%,
rgba(26,20,16,.06) 100%);
background-size: 200% 100%;
animation: vh-shimmer 1.4s ease-in-out infinite;
border-radius: 3px;
}
.vh-skeleton + .vh-skeleton { margin-top: 8px; }
@keyframes vh-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ─────────────────────────────────────────────────────────────────
5. EMPTY STATES — consistent look across pages
Usage:
─────────────────────────────────────────────────────────────── */
.vh-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 56px 24px;
color: var(--ink-mid, #4a3e2c);
}
.vh-empty .vh-empty-icon {
width: 64px;
height: 64px;
margin-bottom: 16px;
opacity: .35;
color: var(--navy, #1a2744);
}
.vh-empty .vh-empty-title {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 600;
color: var(--ink);
margin-bottom: 6px;
line-height: 1.2;
}
.vh-empty .vh-empty-body {
font-size: 12px;
line-height: 1.7;
max-width: 380px;
color: var(--ink-mid, #4a3e2c);
}
.vh-empty .vh-empty-cta {
margin-top: 18px;
padding: 10px 20px;
background: var(--navy, #1a2744);
color: #fff;
border: none;
border-radius: 3px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.vh-empty .vh-empty-cta:hover {
background: var(--navy-mid, #243255);
}
/* ─────────────────────────────────────────────────────────────────
6. TOAST — consistent notification styling
─────────────────────────────────────────────────────────────── */
.toast,
.vh-toast {
transition: opacity .25s ease, transform .25s ease;
font-family: 'JetBrains Mono', monospace;
}
/* ─────────────────────────────────────────────────────────────────
7. CRITICAL ALERT PULSE — for limitation chips ≤7 days
Usage: add class .vh-pulse-crimson to any element
─────────────────────────────────────────────────────────────── */
.vh-pulse-crimson {
animation: vh-pulse-crimson 2.4s ease-in-out infinite;
}
@keyframes vh-pulse-crimson {
0%, 100% { box-shadow: 0 0 0 0 rgba(168, 50, 40, 0); }
50% { box-shadow: 0 0 0 4px rgba(168, 50, 40, .15); }
}
/* ─────────────────────────────────────────────────────────────────
8. SIDEBAR — active-item pulse on hover
─────────────────────────────────────────────────────────────── */
.sb-item {
transition: background .18s ease, color .18s ease, border-left-color .18s ease;
}
.sb-item.active {
position: relative;
}
.sb-item.active::before {
content: '';
position: absolute;
left: -1px;
top: 50%;
width: 3px;
height: 18px;
background: var(--gold-bright, #e8b84b);
border-radius: 0 2px 2px 0;
transform: translateY(-50%);
}
/* ─────────────────────────────────────────────────────────────────
9. SCROLLBAR — subtle, on-brand
─────────────────────────────────────────────────────────────── */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: var(--raised, #f5f1e8);
}
*::-webkit-scrollbar-thumb {
background: var(--border-hi, #c4b898);
border-radius: 6px;
border: 2px solid var(--raised, #f5f1e8);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--gold, #9a6f1a);
}
/* ─────────────────────────────────────────────────────────────────
10. REDUCED MOTION
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
main.content { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════
COLLAPSIBLE SIDEBAR (desktop) — toggle reveals module-name labels.
mobile-nav.js injects a .sb-toggle button and toggles html.sb-open
(persisted in localStorage). Bumping --sb-w when open widens the rail
AND shifts every content offset that reads var(--sb-w) — sidebar
width, .topbar left, .content margin-left — across all 17 pages at
once. Scoped to ≥901px so it never fights the ≤900px mobile bottom-nav.
Inline labels reuse each .sb-item's existing data-tip (the hover
tooltip ::after) re-styled as a static label.
══════════════════════════════════════════════════════════════════ */
.sidebar { transition: width .22s cubic-bezier(.4,0,.2,1); }
.topbar { transition: left .22s cubic-bezier(.4,0,.2,1); }
.content { transition: margin-left .22s cubic-bezier(.4,0,.2,1); }
.sb-toggle { color: rgba(255,255,255,.45); margin-bottom: 4px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.sb-toggle:hover { color: rgba(255,255,255,.85); }
/* Sidebar nav scrolls (collapsed AND expanded) when the items exceed the
viewport height — the page CSS pins it to overflow:hidden, which clips
the lower items (Settings, etc.) on short screens. Scrollbar hidden so
the narrow rail stays clean; the brand (top) and avatar (.sb-foot,
bottom) stay pinned while the middle list scrolls. */
.sb-nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sb-nav::-webkit-scrollbar { width: 0; height: 0; }
@media (min-width: 901px) {
html.sb-open { --sb-w: 208px; }
html.sb-open .sidebar { align-items: stretch; }
html.sb-open .sb-nav { align-items: stretch; padding: 12px 12px; gap: 3px; }
html.sb-open .sb-item {
width: auto; height: 40px;
justify-content: flex-start; gap: 13px; padding: 0 12px; margin-left: 0;
}
html.sb-open .sb-item > svg { flex-shrink: 0; }
/* floating hover tooltip → static inline label */
html.sb-open .sb-item::after {
position: static; transform: none; opacity: 1; pointer-events: none;
left: auto; top: auto; background: none; border: none; box-shadow: none;
padding: 0; color: inherit; font-size: 10px; letter-spacing: .06em; white-space: nowrap;
}
html.sb-open .sb-item:hover::after { transform: none; }
/* brand wordmark when open */
html.sb-open .sb-brand { justify-content: flex-start; padding-left: 18px; gap: 12px; }
html.sb-open .sb-brand::after {
content: 'Vaadhan'; font-family: 'Cormorant Garamond', serif;
font-size: 19px; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: .02em;
}
}