/* UseIntelly — custom styles. * * Tailwind utility classes cover most of the UI. This file is for things * Tailwind can't express cleanly: font face, motion keyframes, print * styles, and accessibility polish. */ /* --- Typography: prefer Inter, fall back to system stack --- */ html { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-feature-settings: "ss01", "cv11"; /* Inter humanist alternates when available */ } /* --- Accessibility: stronger focus ring everywhere, regardless of mouse vs keyboard --- */ :focus-visible { outline: 2px solid #059669; /* emerald-600 */ outline-offset: 2px; border-radius: 0.25rem; } /* --- Smooth in-page scroll for anchor links (e.g. record_detail #report) --- */ html { scroll-behavior: smooth; } /* --- Subtle site-wide background. * * Two soft, brand-tinted radial gradients fixed to the viewport: an emerald * wash near the top-left and a warm amber wash near the bottom-right. The * Tailwind `bg-slate-50` on stays as the base color; we layer the * gradients on top via background-image so they don't override the color. * `background-attachment: fixed` gives a faint parallax as you scroll. */ body { background-image: radial-gradient(at 8% -10%, rgba(16, 185, 129, 0.10), transparent 45%), radial-gradient(at 92% 110%, rgba(245, 158, 11, 0.10), transparent 45%); background-attachment: fixed; background-repeat: no-repeat; } /* --- Decorative dot pattern used as a subtle hero background overlay --- */ .bg-dot-pattern { background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 18px 18px; } /* --- Gradient text used on hero headlines --- */ .gradient-text { background-image: linear-gradient(120deg, #059669 0%, #0d9488 40%, #b45309 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Tasteful entrance animations. Honors prefers-reduced-motion. --- */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.45; } } @keyframes draw-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .animate-fade-up { animation: fade-up 0.45s ease-out both; } .animate-fade-in { animation: fade-in 0.6s ease-out both; } .animate-pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; } .animate-draw-check { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-check 0.6s ease-out 0.15s forwards; } @keyframes scroll-top-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes scroll-top-pulse { 0% { transform: scale(0.82); opacity: 0.42; } 70%, 100% { transform: scale(1.55); opacity: 0; } } .intelly-scroll-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(5.5rem, env(safe-area-inset-bottom)); z-index: 60; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(16, 185, 129, 0.42); border-radius: 999px; background: #059669; color: #ffffff; box-shadow: 0 18px 35px rgba(15, 23, 42, 0.20), 0 8px 18px rgba(5, 150, 105, 0.24); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(14px) scale(0.94); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .intelly-scroll-top[hidden] { display: grid; } .intelly-scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .intelly-scroll-top:hover { background: #047857; box-shadow: 0 20px 42px rgba(15, 23, 42, 0.24), 0 10px 24px rgba(5, 150, 105, 0.30); } .intelly-scroll-top__pulse { position: absolute; inset: 0; border-radius: inherit; background: rgba(16, 185, 129, 0.28); animation: scroll-top-pulse 1.8s ease-out infinite; } .intelly-scroll-top__icon { position: relative; z-index: 1; display: grid; place-items: center; animation: scroll-top-float 1.7s ease-in-out infinite; } .intelly-scroll-top__icon svg { stroke-width: 2.5; } /* Stagger helpers — apply with `style="animation-delay: 80ms"` if needed, * but these classes cover the common cases without inline styles. */ .delay-1 { animation-delay: 60ms; } .delay-2 { animation-delay: 120ms; } .delay-3 { animation-delay: 180ms; } .delay-4 { animation-delay: 240ms; } .delay-5 { animation-delay: 300ms; } /* --- Scroll-triggered reveals. * * Gated behind `.js` on so users without JS see content immediately * (no FOUC, no hidden-forever bug). The reveal.js script flips * `` → `` before paint. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger children inside a .reveal-group up to 12 items. After that, * children settle in together — perceptually fine. */ .js .reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; } .js .reveal-group > .reveal:nth-child(2) { transition-delay: 60ms; } .js .reveal-group > .reveal:nth-child(3) { transition-delay: 120ms; } .js .reveal-group > .reveal:nth-child(4) { transition-delay: 180ms; } .js .reveal-group > .reveal:nth-child(5) { transition-delay: 240ms; } .js .reveal-group > .reveal:nth-child(6) { transition-delay: 300ms; } .js .reveal-group > .reveal:nth-child(7) { transition-delay: 340ms; } .js .reveal-group > .reveal:nth-child(8) { transition-delay: 380ms; } .js .reveal-group > .reveal:nth-child(9) { transition-delay: 420ms; } .js .reveal-group > .reveal:nth-child(10) { transition-delay: 460ms; } .js .reveal-group > .reveal:nth-child(11) { transition-delay: 500ms; } .js .reveal-group > .reveal:nth-child(12) { transition-delay: 540ms; } /* Respect the user's reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- Print: hide chrome, keep content --- */ @media print { header, footer, nav[aria-label="Breadcrumb"], [aria-hidden="true"], form, aside, .border-dashed { display: none !important; } body { background: #fff !important; color: #000; } main, article, section { max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: none !important; background: transparent !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; word-break: break-all; } h1, h2, h3 { page-break-after: avoid; } } /* ------------------------------------------------------------------------- Searchable select (public filters) — progressive enhancement for