/* RFQ Portal Theme */ /* Smooth transitions for dark mode */ html.dark { color-scheme: dark; } /* Animation for toasts */ @keyframes slide-up { from { transform: translateY(1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .animate-slide-up { animation: slide-up 0.2s ease-out; } /* Table sticky header */ thead.sticky th { position: sticky; top: 0; z-index: 10; } /* Focus styles — brand-tinted, driven by the --brand-* custom properties */ input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px rgb(var(--brand-500) / 0.5); } /* Keyboard-only focus ring for interactive elements */ a:focus-visible, button:focus-visible, [role="option"]:focus-visible { outline: 2px solid rgb(var(--brand-500)); outline-offset: 2px; } /* x-cloak rule is inlined in for immediate effect */ /* Loading skeleton */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { border-radius: 0.375rem; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .dark .skeleton { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); background-size: 200% 100%; } /* Pulsating hint for clickable cells — guides first-time users */ @keyframes hint-pulse { 0%, 100% { box-shadow: inset 0 0 0 3px rgb(var(--brand-500) / 0), 0 0 0 0 rgb(var(--brand-500) / 0); background-color: rgb(var(--brand-500) / 0); } 50% { box-shadow: inset 0 0 0 3px rgb(var(--brand-500) / 0.6), 0 0 12px 4px rgb(var(--brand-500) / 0.3); background-color: rgb(var(--brand-500) / 0.08); } } .hint-pulse { animation: hint-pulse 1.5s ease-in-out infinite; position: relative; } /* Respect reduced-motion preferences: stop decorative movement */ @media (prefers-reduced-motion: reduce) { .animate-slide-up, .hint-pulse { animation: none; } .skeleton { animation: none; background: #e5e7eb; } .dark .skeleton { background: #374151; } *, ::before, ::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Print styles */ @media print { nav, button, .no-print { display: none !important; } body { background: white !important; color: black !important; } table { font-size: 10pt; } } /* Scrollbar styling for dark mode — neutral tokens, so the greys stay in step with the rest of the dark palette. */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: rgb(var(--surface)); } .dark ::-webkit-scrollbar-thumb { background: rgb(var(--border-strong)); border-radius: var(--radius-sm); } .dark ::-webkit-scrollbar-thumb:hover { background: rgb(var(--text-muted)); }