/* ========================================================================== EVPS-1000X — Critical CSS (above-the-fold only) -------------------------------------------------------------------------- Inlined or preloaded before main stylesheet to eliminate render-blocking. Scope: html/body resets, app shell grid, sidebar base, topbar base, content min-height, skip link, and the two hard-default data attrs written into at server render time (data-theme="dark", data-density="comfortable"). HARD RULES: - NO component styles (buttons, cards, badges, etc.) - NO widget styles (AI bubble, command palette, toasts) - NO order-form styles - All values MUST use var(--evps-*) tokens — tokens are loaded first - Target: < 8 KB uncompressed ========================================================================== */ /* ── Box model reset ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── html / body ─────────────────────────────────────────────────────────── */ html, body { margin: 0; padding: 0; } body { font-family: var(--evps-font-sans, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: var(--evps-fs-base, 14px); color: var(--evps-text, #e8ecf5); background: var(--evps-bg, #0a0c12); line-height: var(--evps-lh-normal, 1.5); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Bare element resets (prevent FOUC) ──────────────────────────────────── */ a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* ── App shell — outermost grid ──────────────────────────────────────────── */ .evps-app { display: grid; grid-template-columns: var(--evps-sidebar-w, 240px) 1fr; min-height: 100vh; } /* Collapsed sidebar state (set by server via data-sidebar attr) */ .evps-app[data-sidebar="collapsed"] { grid-template-columns: var(--evps-sidebar-w-sm, 64px) 1fr; } /* Mobile: single column — sidebar becomes off-canvas */ @media (max-width: 767px) { .evps-app { grid-template-columns: 1fr !important; } } /* ── Sidebar base (just enough to prevent layout shift) ─────────────────── */ .evps-sidebar { background: var(--evps-surface, #111520); border-right: 1px solid var(--evps-border, #1e2433); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } /* Mobile off-canvas default */ @media (max-width: 767px) { .evps-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--evps-sidebar-w, 240px) !important; z-index: var(--evps-z-drawer, 300); transform: translateX(-100%); } } /* ── Main pane ───────────────────────────────────────────────────────────── */ .evps-main { display: flex; flex-direction: column; min-width: 0; } /* ── Topbar base ─────────────────────────────────────────────────────────── */ .evps-topbar { height: var(--evps-topbar-h, 56px); border-bottom: 1px solid var(--evps-border, #1e2433); background: var(--evps-bg, #0a0c12); display: flex; align-items: center; gap: var(--evps-space-3, 12px); padding: 0 var(--evps-space-6, 24px); position: sticky; top: 0; z-index: var(--evps-z-sticky, 100); } /* ── Content area — prevents collapse before content loads ──────────────── */ .evps-content { flex: 1; min-height: calc(100vh - var(--evps-topbar-h, 56px)); outline: none; /* tabindex="-1" receives programmatic focus */ } /* ── Body class variants applied before JS boots ────────────────────────── */ /* Collapsed sidebar via JS class (mirrors data-attr approach) */ body.evps-sidebar-collapsed .evps-app { grid-template-columns: var(--evps-sidebar-w-sm, 64px) 1fr; } /* ── Skip link ───────────────────────────────────────────────────────────── */ .evps-skip-link { position: absolute; top: -100%; left: var(--evps-space-4, 16px); z-index: var(--evps-z-cmdk, 500); background: var(--evps-primary, #3b6cf6); color: white; padding: var(--evps-space-2, 8px) var(--evps-space-4, 16px); border-radius: var(--evps-radius-md, 8px); font-size: 13px; font-weight: 600; text-decoration: none; } .evps-skip-link:focus-visible { top: var(--evps-space-4, 16px); outline: 2px solid white; outline-offset: 2px; } /* ── Mobile sidebar scrim (hidden by default) ────────────────────────────── */ .evps-sidebar-scrim { display: none; } @media (max-width: 767px) { .evps-sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: calc(var(--evps-z-drawer, 300) - 1); opacity: 0; pointer-events: none; } body.evps-sidebar-open .evps-sidebar-scrim { opacity: 1; pointer-events: auto; } } /* ── Hamburger button (visible only on mobile) ───────────────────────────── */ .evps-topbar__hamburger { display: none; } @media (max-width: 767px) { .evps-topbar__hamburger { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--evps-radius-md, 8px); border: 1px solid transparent; background: transparent; color: var(--evps-text-muted, #7a85a0); cursor: pointer; flex-shrink: 0; } } /* ── Topbar logo (mobile only) ───────────────────────────────────────────── */ .evps-topbar__logo { display: none; } @media (max-width: 767px) { .evps-topbar__logo { display: flex; align-items: center; } } /* ── Sidebar brand logo mark ─────────────────────────────────────────────── */ .evps-sidebar__logo { width: 28px; height: 28px; border-radius: var(--evps-radius-sm, 6px); background: linear-gradient(135deg, var(--evps-primary, #3b6cf6), var(--evps-accent, #8b5cf6)); display: grid; place-items: center; color: white; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; flex-shrink: 0; }