/* * components.css — Bespoke component layer for the Shieldpay portal * * Loaded after semtx.css. Single file covering both the customer-facing * portal shell (public/index.html) and the Shieldpay Ledger admin shell * (public/manage/index.html), plus shared error page styling. * * Scoping convention: rules that apply to a single shell live under a * body-class scope (.portal, .admin). Shared rules — design tokens, * htmx helpers, flash banners, error pages — sit at the top level * with no scope. * * → loads .portal scope * → loads .admin scope * → loads only top-level rules (.error*) * * STARBASE-013 supersedes the earlier split into shell-components.css * (portal) and manage-components.css (admin). */ /* ═══════════════════════════════════════════════════════════════ 1. Design Tokens ═══════════════════════════════════════════════════════════════ */ :root { /* Radius */ --radius: 0.65rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Colour tokens (oklch) */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --color-selection: var(--primary); --color-selection-foreground: var(--primary-foreground); /* Typography */ --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Greys */ --gray-50: #f7f8fa; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #cdd1d9; --gray-500: #6b7280; --gray-700: #374151; --gray-900: #353c4a; /* Admin shell specific */ --sidebar-bg: #353c4a; --sidebar-hover: #2d333f; --sidebar-width-open: 12rem; --sidebar-width-collapsed: 3.5rem; --topbar-height: 3.5rem; --transition-duration: 300ms; /* Accents */ --indigo-600: #4f46e5; --red-500: #ef4444; --blue-100: #dbeafe; --green-100: #dcfce7; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); } /* ═══════════════════════════════════════════════════════════════ 2. Base / Shared ═══════════════════════════════════════════════════════════════ */ :root { font-family: var(--font); color: #0b1221; background: #f8fafc; } body { margin: 0; padding: 0; background-color: var(--background); color: var(--foreground); } * { border-color: var(--border); } main { max-width: 960px; margin: 0 auto; padding: 2rem; } button { padding: 0.5rem 1rem; border: none; border-radius: 6px; background: #111827; color: #fff; cursor: pointer; } button:disabled { opacity: 0.6; cursor: not-allowed; } /* HTMX swap transitions */ .htmx-swapping { opacity: 0.25; transform: translateY(-6px); } .htmx-settling { transition-property: opacity, transform; transition-duration: 200ms; transition-timing-function: ease-out; } /* Alpine cloak */ [x-cloak] { display: none !important; } /* Flash banners (forms, status messages) */ .flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; } .flash--error { background: #fee2e2; color: #b91c1c; } .flash--notice { background: #dcfce7; color: #166534; } #upload-log { font-size: 0.85rem; margin-top: 1rem; min-height: 1rem; } /* Error fallback (HTMX OOB error handler injects this; 403/500 pages use it directly) */ .error { display: flex; align-items: center; justify-content: center; min-height: 40vh; } .error-body { text-align: center; } .error-body > * + * { margin-top: 0.75rem; } .error-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--gray-700); } .error-detail { font-size: 0.875rem; line-height: 1.25rem; color: var(--gray-500); } /* ═══════════════════════════════════════════════════════════════ 3. Portal shell — Customer-facing shell with login (aurora + glass card) and dashboard (CSS grid template-areas) modes. Mode toggling via #shell.login / #shell.dashboard handled by inline