/* * HTA Simulation Webapp - Design System (Loon Brand) * * Learning Notes: * - Colors follow Loon brand guidelines: Loon Red #c0011d, Light Pink #f9eaea, Gray #666666 * - Typography: Helvetica Now Display (headings/body), MuseoModerno (brand name "Loon") * - CSS relative color syntax (oklch(from ...)) used for dynamic opacity/lightness variants * - Theme is controlled via .light/.dark classes on for user preference * - Sidebar layout for authenticated app pages * - Lucide icons for consistent iconography * - Card border-radius minimum 16px per brand guidelines */ /* ======================================================================== CSS Custom Properties (Design Tokens) — Loon Brand ======================================================================== */ :root { /* Typography — Loon Brand Stack */ --font-sans: 'Helvetica Now Display', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --font-mono: 'SF Mono', ui-monospace, 'Menlo', 'Monaco', 'Consolas', monospace; --font-brand: 'MuseoModerno', 'Montserrat', sans-serif; /* Loon Brand Colors (reference) */ --loon-red: #c0011d; --loon-light-pink: #f9eaea; --loon-black: #000000; --loon-white: #ffffff; --loon-gray: #666666; --loon-red-hover: #a0001a; /* Dark mode defaults (applied when .dark class or no class) */ --background: #111111; --foreground: #f5f5f5; --card: #1a1a1a; --card-foreground: #f5f5f5; --popover: #1a1a1a; --popover-foreground: #f5f5f5; --primary: #c0011d; --primary-foreground: #ffffff; --secondary: #262626; --secondary-foreground: #f5f5f5; --muted: #262626; --muted-foreground: #999999; --accent: #2a2020; --accent-foreground: #f5f5f5; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #333333; --input: #282828; --ring: #c0011d; /* Surfaces */ --surface-1: #141414; --surface-2: #1c1c1c; --surface-3: #242424; /* Prediction Colors — functional, not brand */ --color-r: oklch(0.70 0.18 145); --color-rwc: oklch(0.78 0.15 85); --color-dnr: oklch(0.62 0.22 25); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25); --shadow-md: 0 6px 12px -2px rgb(0 0 0 / 0.3), 0 4px 8px -4px rgb(0 0 0 / 0.35); --shadow-lg: 0 16px 30px -8px rgb(0 0 0 / 0.5), 0 8px 16px -10px rgb(0 0 0 / 0.6); /* Border Radius — Loon brand: min 16px for cards, pill buttons */ --radius: 0.625rem; --radius-sm: 0.5rem; --radius-lg: 1.125rem; --radius-xl: 1.5rem; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* Sidebar dimensions */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --sidebar-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* Light Mode - Applied via .light class on */ .light { --background: #fafafa; --foreground: #1a1a1a; --card: #ffffff; --card-foreground: #1a1a1a; --popover: #ffffff; --popover-foreground: #1a1a1a; --primary: #c0011d; --primary-foreground: #ffffff; --secondary: #f5f5f5; --secondary-foreground: #262626; --muted: #f5f5f5; --muted-foreground: #666666; --accent: #f9eaea; --accent-foreground: #1a1a1a; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #e5e5e5; --input: #eeeeee; --ring: #c0011d; --surface-1: #ffffff; --surface-2: #fafafa; --surface-3: #f5f5f5; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* ======================================================================== Base Styles ======================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background-color: var(--background); background-image: radial-gradient(1200px 500px at 15% -10%, oklch(from var(--primary) l c h / 0.12), transparent 60%), radial-gradient(900px 500px at 90% 0%, oklch(0.4 0.02 25 / 0.12), transparent 55%), linear-gradient(180deg, oklch(from var(--background) l c h / 0.98), oklch(from var(--background) calc(l - 0.03) c h)); color: var(--foreground); line-height: 1.6; margin: 0; padding: 0; min-height: 100vh; } /* Light mode adjusts the gradient intensity */ .light body { background-image: radial-gradient(1200px 500px at 15% -10%, oklch(from var(--primary) l c h / 0.06), transparent 60%), radial-gradient(900px 500px at 90% 0%, oklch(0.85 0.02 25 / 0.05), transparent 55%), linear-gradient(180deg, var(--background), oklch(from var(--background) calc(l - 0.02) c h)); } /* ======================================================================== Typography ======================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; margin: 0 0 0.5em; } h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } p { margin: 0 0 1em; } a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { text-decoration: underline; } .text-muted { color: var(--muted-foreground); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .font-mono { font-family: var(--font-mono); } /* ======================================================================== Layout ======================================================================== */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } /* App Layout - Sidebar + Main Content */ .app-layout { display: flex; min-height: 100vh; } .app-main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); transition: margin-left var(--sidebar-transition); } .sidebar-collapsed ~ .app-main, .app-layout:has(.sidebar-collapsed) .app-main { margin-left: var(--sidebar-width-collapsed); } @media (max-width: 1023px) { .app-main { margin-left: 0; } } .app-content { padding: 1.5rem; max-width: 1400px; } @media (min-width: 768px) { .app-content { padding: 2rem; } } /* Flexbox utilities */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } /* Gap utilities */ .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } /* Grid */ .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:block { display: block; } } /* Spacing */ .p-0 { padding: 0; } .p-2 { padding: 0.5rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } /* ======================================================================== Sidebar Navigation ======================================================================== */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: oklch(from var(--card) l c h / 0.95); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 40; transition: width var(--sidebar-transition), transform var(--sidebar-transition); } .sidebar-collapsed { width: var(--sidebar-width-collapsed); } /* Mobile sidebar */ @media (max-width: 1023px) { .sidebar { transform: translateX(-100%); } .sidebar-mobile-open { transform: translateX(0); } } .sidebar-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); z-index: 35; } @media (min-width: 1024px) { .sidebar-overlay { display: none; } } .sidebar-mobile-toggle { position: fixed; top: 1rem; left: 1rem; z-index: 30; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: oklch(from var(--card) l c h / 0.9); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--foreground); cursor: pointer; transition: all var(--transition-fast); } .sidebar-mobile-toggle:hover { background: var(--accent); } @media (min-width: 1024px) { .sidebar-mobile-toggle { display: none; } } /* Sidebar Header */ .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--border); min-height: 4rem; } .sidebar-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--foreground); font-weight: 600; overflow: hidden; } .sidebar-brand:hover { text-decoration: none; } .sidebar-brand-icon { flex-shrink: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; } .sidebar-brand-icon img { width: 100%; height: 100%; object-fit: contain; } .sidebar-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-brand); font-weight: 900; color: var(--primary); font-size: 1.25rem; letter-spacing: -0.01em; } .sidebar-collapse-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: all var(--transition-fast); } .sidebar-collapse-btn:hover { background: var(--accent); color: var(--foreground); } @media (max-width: 1023px) { .sidebar-collapse-btn { display: none; } } /* Sidebar collapsed state - hide text elements */ .sidebar-collapsed .sidebar-brand-text, .sidebar-collapsed .sidebar-item-text, .sidebar-collapsed .sidebar-item-chevron { display: none; } .sidebar-collapsed .sidebar-header { justify-content: center; padding: 1rem 0.5rem; } .sidebar-collapsed .sidebar-collapse-btn { position: absolute; right: -0.875rem; background: var(--card); border: 1px solid var(--border); } /* Sidebar Navigation */ .sidebar-nav { flex: 1; overflow-y: auto; padding: 0.75rem 0; } .sidebar-section { padding: 0 0.75rem; } .sidebar-collapsed .sidebar-section { padding: 0 0.5rem; } .sidebar-divider { height: 1px; background: var(--border); margin: 0.75rem 1rem; } .sidebar-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius); color: var(--muted-foreground); text-decoration: none; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; background: transparent; text-align: left; transition: all var(--transition-fast); } .sidebar-item:hover { background: var(--accent); color: var(--foreground); text-decoration: none; } .sidebar-item.active { background: oklch(from var(--primary) l c h / 0.15); color: var(--primary); } .sidebar-collapsed .sidebar-item { justify-content: center; padding: 0.625rem; } .sidebar-item-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; } .sidebar-item-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-item-chevron { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--muted-foreground); } /* Sidebar Footer / User Section */ .sidebar-footer { border-top: 1px solid var(--border); padding: 0.75rem; } .sidebar-collapsed .sidebar-footer { padding: 0.75rem 0.5rem; } .sidebar-user { position: relative; } .sidebar-user-avatar { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; } .sidebar-user-menu { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 0.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50; } .sidebar-collapsed .sidebar-user-menu { left: 100%; right: auto; bottom: 0; margin-bottom: 0; margin-left: 0.5rem; min-width: 160px; } .sidebar-user-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; color: var(--foreground); text-decoration: none; cursor: pointer; border: none; background: transparent; transition: background var(--transition-fast); } .sidebar-user-menu-item:hover { background: var(--accent); text-decoration: none; } .sidebar-user-menu-divider { border: none; border-top: 1px solid var(--border); margin: 0.25rem 0; } /* ======================================================================== Page Header Component ======================================================================== */ .page-header { margin-bottom: 2rem; } .page-header-back { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 0.75rem; transition: color var(--transition-fast); } .page-header-back:hover { color: var(--foreground); text-decoration: none; } .page-header-back svg { width: 1rem; height: 1rem; } .page-header-main { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .page-header-main { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .page-header-content { flex: 1; min-width: 0; } .page-header-title { font-size: 1.75rem; font-weight: 700; margin: 0; letter-spacing: -0.025em; } .page-header-description { color: var(--muted-foreground); margin: 0.25rem 0 0; font-size: 0.9375rem; } .page-header-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } /* Breadcrumbs */ .breadcrumbs { margin-bottom: 0.75rem; } .breadcrumbs-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; } .breadcrumbs-item { display: flex; align-items: center; gap: 0.25rem; } .breadcrumbs-link { color: var(--muted-foreground); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbs-link:hover { color: var(--foreground); text-decoration: none; } .breadcrumbs-current { color: var(--foreground); font-weight: 500; } .breadcrumbs-separator { width: 1rem; height: 1rem; color: var(--muted-foreground); } /* ======================================================================== Components ======================================================================== */ /* Card */ .card { background: linear-gradient(180deg, oklch(from var(--card) calc(l + 0.02) c h / 0.95), var(--card)); border: 1px solid oklch(from var(--border) l c h / 0.85); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .card-glass { background: oklch(from var(--card) l c h / 0.75); backdrop-filter: blur(14px); border: 1px solid oklch(from var(--border) l c h / 0.6); box-shadow: var(--shadow-md); } .card-hover:hover { transform: translateY(-2px); border-color: oklch(from var(--primary) l c h / 0.6); box-shadow: var(--shadow-md); } /* Card accent variants - left border emphasis */ .card-accent { border-left: 4px solid var(--primary); } .card-accent-success { border-left: 4px solid var(--color-r); } .card-accent-warning { border-left: 4px solid var(--color-rwc); } .card-accent-danger { border-left: 4px solid var(--color-dnr); } /* Card with icon header */ .card-header-with-icon { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .card-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; } .card-icon.bg-primary\/10 { background: oklch(from var(--primary) l c h / 0.1); color: var(--primary); } .card-title { font-size: 1rem; font-weight: 600; margin: 0; } .card-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0.125rem 0 0; } /* Button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 9999px; border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.4); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 4px 14px -4px oklch(from var(--primary) l c h / 0.5); } .btn-primary:hover:not(:disabled) { background: var(--loon-red-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -6px oklch(from var(--primary) l c h / 0.6); } .btn-secondary { background: oklch(from var(--secondary) l c h / 0.6); color: var(--secondary-foreground); border-color: oklch(from var(--border) l c h / 0.8); backdrop-filter: blur(6px); } .btn-secondary:hover:not(:disabled) { background: oklch(from var(--secondary) calc(l - 0.03) c h); } .btn-outline { background: transparent; border: 1px solid oklch(from var(--border) l c h / 0.9); color: var(--foreground); } .btn-outline:hover:not(:disabled) { background: var(--accent); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover:not(:disabled) { background: var(--accent); } .btn-destructive { background: var(--destructive); color: var(--destructive-foreground); } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; } .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.75rem; } /* Scope Toggle — segmented control for filtering views */ .scope-toggle { display: inline-flex; padding: 3px; background: var(--muted); border-radius: var(--radius); gap: 2px; } .scope-toggle-btn { padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; font-family: var(--font-sans); color: var(--muted-foreground); background: transparent; border: none; border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; line-height: 1.4; } .scope-toggle-btn:hover:not(.active) { color: var(--foreground); } .scope-toggle-btn.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); } /* Input */ .input { width: 100%; padding: 0.625rem 0.875rem; font-family: var(--font-sans); font-size: 0.875rem; background: oklch(from var(--background) l c h / 0.6); border: 1px solid oklch(from var(--input) l c h / 0.9); border-radius: var(--radius); color: var(--foreground); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.2); } .input::placeholder { color: var(--muted-foreground); } .input-glass { background: oklch(from var(--background) l c h / 0.5); backdrop-filter: blur(8px); border-color: oklch(from var(--input) l c h / 0.5); } /* Input validation states */ .input[aria-invalid="true"], .input.input-error { border-color: var(--destructive); box-shadow: 0 0 0 3px oklch(from var(--destructive) l c h / 0.15); } .input[data-valid="true"], .input.input-success { border-color: var(--color-r); } .form-message { font-size: 0.75rem; margin-top: 0.375rem; } .form-message.error { color: var(--destructive); } .form-message.success { color: var(--color-r); } /* Textarea */ .textarea { min-height: 100px; resize: vertical; } /* Label */ .label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--foreground); } /* Select */ .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; } /* Badge */ .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; background: var(--secondary); color: var(--secondary-foreground); } .badge-primary { background: var(--primary); color: var(--primary-foreground); } .badge-success { background: var(--color-r); color: white; } .badge-warning { background: var(--color-rwc); color: oklch(0.2 0 0); } .badge-error { background: var(--color-dnr); color: white; } /* ======================================================================== Toast Notifications ======================================================================== */ .toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column-reverse; gap: 0.5rem; max-width: 24rem; pointer-events: none; } @media (min-width: 640px) { .toast-container { bottom: 1.5rem; right: 1.5rem; } } .toast { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-slide-in 0.3s ease-out; } .toast-leaving { animation: toast-slide-out 0.25s ease-in forwards; } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } .toast-icon { flex-shrink: 0; margin-top: 0.125rem; } .toast-success .toast-icon { color: var(--color-r); } .toast-error .toast-icon { color: var(--destructive); } .toast-warning .toast-icon { color: var(--color-rwc); } .toast-info .toast-icon { color: var(--primary); } .toast-message { flex: 1; font-size: 0.875rem; line-height: 1.4; color: var(--foreground); } .toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin: -0.25rem -0.25rem -0.25rem 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: pointer; transition: all var(--transition-fast); } .toast-close:hover { background: var(--accent); color: var(--foreground); } /* ======================================================================== Empty State Component ======================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; } .empty-state-icon { width: 4rem; height: 4rem; border-radius: 9999px; background: var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); margin-bottom: 1.25rem; } .empty-state-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--foreground); } .empty-state-description { font-size: 0.9375rem; color: var(--muted-foreground); margin: 0 0 1.5rem; max-width: 24rem; } .empty-state-cta { margin-top: 0; } /* ======================================================================== Skeleton Loader ======================================================================== */ .skeleton { background: linear-gradient( 90deg, var(--muted) 25%, oklch(from var(--muted) calc(l + 0.05) c h) 50%, var(--muted) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 1rem; margin-bottom: 0.5rem; } .skeleton-text:last-child { width: 60%; } .skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; } .skeleton-card { height: 8rem; } /* ======================================================================== Lucide Icon Utilities ======================================================================== */ [data-lucide] { width: 1em; height: 1em; stroke-width: 2; } .icon-xs { font-size: 0.75rem; } .icon-sm { font-size: 1rem; } .icon-md { font-size: 1.25rem; } .icon-lg { font-size: 1.5rem; } .icon-xl { font-size: 2rem; } /* ======================================================================== Prediction-specific Styles ======================================================================== */ .prediction-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.5rem; font-size: 1.125rem; font-weight: 700; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; } .prediction-R { background: var(--color-r); color: white; } .prediction-RWC { background: var(--color-rwc); color: oklch(0.2 0 0); } .prediction-DNR { background: var(--color-dnr); color: white; } /* Probability Bar */ .prob-bar { height: 1.5rem; background: var(--muted); border-radius: var(--radius-sm); overflow: hidden; display: flex; } .prob-bar-segment { height: 100%; transition: width var(--transition-normal); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: white; /* min-width controlled via inline :style to conditionally hide 0% segments */ } .prob-bar-R { background: var(--color-r); } .prob-bar-RWC { background: var(--color-rwc); color: oklch(0.2 0 0); } .prob-bar-DNR { background: var(--color-dnr); } .prob-bar-fill { height: 100%; border-radius: var(--radius-sm); } /* ======================================================================== Panelist Card ======================================================================== */ .panelist-card { position: relative; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: all var(--transition-normal); } .panelist-card.voting { animation: pulse 1s infinite; } .panelist-card.voted { animation: card-flash 400ms ease-out; } .panelist-card.voted-R { border-color: var(--color-r); } .panelist-card.voted-RWC { border-color: var(--color-rwc); } .panelist-card.voted-DNR { border-color: var(--color-dnr); } .panelist-avatar { width: 3rem; height: 3rem; border-radius: 9999px; background: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .panelist-type { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ======================================================================== Navigation (Legacy - for marketing pages) ======================================================================== */ .navbar { position: sticky; top: 0; z-index: 50; background: oklch(from var(--background) l c h / 0.7); backdrop-filter: blur(14px); border-bottom: 1px solid oklch(from var(--border) l c h / 0.7); } .navbar-content { display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0 1rem; } .navbar-brand { display: flex; align-items: center; gap: 0.75rem; font-size: 1.125rem; font-weight: 700; color: var(--foreground); text-decoration: none; } .navbar-brand:hover { text-decoration: none; } .navbar-nav { display: flex; align-items: center; gap: 1rem; } /* Theme toggle button for navbar */ .navbar-theme-toggle { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); cursor: pointer; transition: all var(--transition-fast); } .navbar-theme-toggle:hover { background: var(--accent); color: var(--foreground); } /* ======================================================================== Progress Indicator ======================================================================== */ .progress-ring { position: relative; width: 120px; height: 120px; } .progress-ring-circle { transform: rotate(-90deg); transform-origin: 50% 50%; } .progress-ring-bg { fill: none; stroke: var(--muted); stroke-width: 8; } .progress-ring-progress { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1); } .progress-ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } /* ======================================================================== Page Styling ======================================================================== */ .page { padding: 2.5rem 0; } .page-enter { animation: page-fade-in 200ms ease-out; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hero { position: relative; padding: 2.5rem; border-radius: var(--radius-xl); background: radial-gradient(600px 240px at 20% -20%, oklch(from var(--primary) l c h / 0.35), transparent 70%), linear-gradient(160deg, oklch(from var(--card) calc(l + 0.03) c h / 0.95), var(--card)); border: 1px solid oklch(from var(--border) l c h / 0.8); box-shadow: var(--shadow-md); } .section-title { font-size: 1.75rem; font-weight: 700; text-align: center; margin-bottom: 2rem; } .stat-card { text-align: center; padding: 1.5rem; border-radius: var(--radius-lg); background: oklch(from var(--surface-2) l c h / 0.9); border: 1px solid oklch(from var(--border) l c h / 0.7); } /* Dashboard stat icon — small circle with icon */ .stat-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: oklch(from var(--primary) l c h / 0.12); color: var(--primary); } .stat-icon-success { background: oklch(from var(--color-r) l c h / 0.12); color: var(--color-r); } .stat-icon-active { background: oklch(from var(--color-rwc) l c h / 0.15); color: var(--color-rwc); } /* Run Card — delete button (hidden by default, fades in on card hover) */ .run-card-delete { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .run-card:hover .run-card-delete, .run-card-delete:focus-visible, .run-card-delete.always-visible { opacity: 0.5; } .run-card-delete.always-visible { opacity: 1; color: var(--destructive); background: oklch(from var(--destructive) l c h / 0.08); } .run-card:hover .run-card-delete:hover, .run-card-delete.always-visible:hover { opacity: 1; color: var(--destructive); background: oklch(from var(--destructive) l c h / 0.1); } .icon-badge { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: oklch(from var(--primary) l c h / 0.12); color: var(--primary); margin-bottom: 1rem; } .accent-card { border-left: 4px solid var(--border); } /* ======================================================================== Modal / Dialog ======================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 28rem; width: 100%; max-height: calc(100vh - 2rem); overflow-y: auto; } .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } .modal-title { font-size: 1.125rem; font-weight: 600; margin: 0; } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.75rem; } /* ======================================================================== Animations ======================================================================== */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .animate-fade-in { animation: fade-in var(--transition-normal) ease-out; } .animate-slide-up { animation: slide-up var(--transition-normal) ease-out; } .animate-slide-in-right { animation: slide-in-right var(--transition-normal) ease-out; } /* Vote Pop — badge scale animation on reveal */ @keyframes vote-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .vote-pop { animation: vote-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Card Flash — subtle background pulse when panelist votes */ @keyframes card-flash { 0% { background: oklch(from var(--foreground) l c h / 0.08); } 100% { background: var(--card); } } /* Round Transition Banner */ .round-transition-banner { text-align: center; padding: 0.75rem 1rem; border-radius: var(--radius); background: oklch(from var(--card) calc(l + 0.04) c h / 0.95); border: 1px solid oklch(from var(--border) l c h / 0.6); font-weight: 600; font-size: 0.875rem; } /* Alpine enter/leave transitions for round banner */ .banner-enter { transition: all 200ms ease-out; } .banner-enter-start { opacity: 0; transform: translateY(-8px); } .banner-enter-end { opacity: 1; transform: translateY(0); } .banner-leave { transition: all 200ms ease-in; } .banner-leave-start { opacity: 1; transform: translateY(0); } .banner-leave-end { opacity: 0; transform: translateY(-8px); } /* Final Result — multi-stage dramatic reveal */ @keyframes result-card-enter { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes result-reveal { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 75% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } @keyframes glow-pulse-colored { 0% { box-shadow: 0 0 0 0 var(--glow-color); } 50% { box-shadow: 0 0 20px 8px var(--glow-color); } 100% { box-shadow: 0 0 0 0 var(--glow-color); } } .result-card-animated { animation: result-card-enter 500ms ease-out both; } .result-badge-animated { animation: result-reveal 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both; } .result-glow { display: inline-block; border-radius: 9999px; animation: glow-pulse-colored 1.5s ease-in-out 600ms both; } .result-glow-R { --glow-color: oklch(from var(--color-r) l c h / 0.4); } .result-glow-RWC { --glow-color: oklch(from var(--color-rwc) l c h / 0.4); } .result-glow-DNR { --glow-color: oklch(from var(--color-dnr) l c h / 0.4); } /* Panelist Vote Trend Grid Learning Notes: - Layout uses inline styles in the template for reliability (no cache issues) - Colors use getVoteColor() with inline :style bindings - These classes are kept for any future use or fallback styling */ /* ======================================================================== Utility Classes ======================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } [x-cloak] { display: none !important; } .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .w-full { width: 100%; } .w-3 { width: 0.75rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-48 { width: 12rem; } .h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-full { height: 100%; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: 9999px; } .shadow { box-shadow: var(--shadow); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .border { border: 1px solid var(--border); } .border-l-4 { border-left: 4px solid var(--border); } .border-t { border-top: 1px solid var(--border); } .border-b { border-bottom: 1px solid var(--border); } .bg-muted { background: var(--muted); } .bg-muted\/50 { background: oklch(from var(--muted) l c h / 0.5); } .bg-black\/50 { background: rgb(0 0 0 / 0.5); } .bg-primary { background: var(--primary); } .bg-destructive\/10 { background: oklch(from var(--destructive) l c h / 0.1); } .bg-card { background: var(--card); } .bg-color-r { background: var(--color-r); } .bg-color-rwc { background: var(--color-rwc); } .bg-color-dnr { background: var(--color-dnr); } .border-color-r { border-color: var(--color-r); } .border-color-rwc { border-color: var(--color-rwc); } .border-color-dnr { border-color: var(--color-dnr); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-white { color: white; } .text-primary { color: var(--primary); } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-6xl { font-size: 3.5rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-hidden { overflow: hidden; } .min-h-screen { min-height: 100vh; } .min-w-0 { min-width: 0; } .whitespace-pre-wrap { white-space: pre-wrap; } .cursor-pointer { cursor: pointer; } .appearance-none { appearance: none; } .transition-shadow { transition: box-shadow var(--transition-fast); } .transition-all { transition: all var(--transition-fast); } .duration-300 { transition-duration: 300ms; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mr-1 { margin-right: 0.25rem; } .ml-1 { margin-left: 0.25rem; } .mt-1 { margin-top: 0.25rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .p-3 { padding: 0.75rem; } .absolute { position: absolute; } .relative { position: relative; } .fixed { position: fixed; } .right-0 { right: 0; } .inset-0 { inset: 0; } .z-50 { z-index: 50; } .hover\:bg-accent:hover { background: var(--accent); } .hover\:shadow-md:hover { box-shadow: var(--shadow-md); } .hover\:text-foreground:hover { color: var(--foreground); } .hover\:underline:hover { text-decoration: underline; } .border-border { border-color: var(--border); } .text-destructive { color: var(--destructive); } .flex-1 { flex: 1 1 0%; } .justify-end { justify-content: flex-end; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .h-12 { height: 3rem; } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media print { .print\:hidden { display: none !important; } .page-break { page-break-after: always; } .avoid-break { break-inside: avoid; } .cover-page { min-height: 100vh; } } /* ======================================================================== HTMX Loading Indicators ======================================================================== */ .htmx-indicator { opacity: 0; transition: opacity var(--transition-fast); } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } /* ======================================================================== Admin Panel Styles ======================================================================== */ /* Data Table — Clean table for admin list views */ .data-table-wrapper { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: 0.625rem 1rem; border-bottom: 1px solid oklch(from var(--border) l c h / 0.5); vertical-align: middle; } .data-table tbody tr:hover { background: oklch(from var(--accent) l c h / 0.5); } .data-table tbody tr:last-child td { border-bottom: none; } /* Right-align numeric columns */ .data-table .text-right { text-align: right; } /* Status Dot — Small colored indicator */ .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--muted-foreground); } .status-dot-success { background: var(--color-r); } .status-dot-error { background: var(--destructive); } /* Admin Filter Bar */ .admin-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* Admin Search Input */ .admin-search { width: 220px; } /* Provider Status Indicator */ .provider-status { display: flex; align-items: center; gap: 0.5rem; } /* Engagement Bar — Horizontal bar for section analytics */ .engagement-bar { height: 100%; background: var(--primary); border-radius: 4px; min-width: 2px; transition: width var(--transition-normal); } /* Sidebar Section Label */ .sidebar-section-label { display: block; padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); } /* ======================================================================== HTMX Loading Indicators ======================================================================== */ /* Loading spinner */ .spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--muted); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }