/* styles.css Small set of hand-written styles to complement Tailwind utility classes (loaded via CDN in ). Kept intentionally minimal — most layout and color work happens with Tailwind classes directly in the HTML/JS. */ :root { --clearity-teal: #0d9488; --clearity-amber: #f59e0b; } /* Functional fallback in case the Tailwind CDN is unreachable (e.g. behind a strict firewall) — show/hide logic in dashboard.js and admin.js relies on toggling this class, so it must always work even if Tailwind's own utility CSS fails to load. Tailwind's identical rule (once loaded) simply overrides this harmlessly. */ .hidden { display: none; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background-color: #f8fafc; } /* Shared input styling used by forms.js-rendered fields */ .clearity-input { display: block; width: 100%; border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.55rem 0.75rem; font-size: 0.875rem; color: #1e293b; background-color: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .clearity-input:focus { outline: none; border-color: var(--clearity-teal); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15); } /* Scrollbar polish for horizontally-scrolling stepper on small screens */ #clearity-stepper ol::-webkit-scrollbar { height: 6px; } #clearity-stepper ol::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 999px; } /* Admin dropzone */ .clearity-dropzone { border: 2px dashed #cbd5e1; border-radius: 0.75rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .clearity-dropzone.drag-over { border-color: var(--clearity-teal); background-color: rgba(13, 148, 136, 0.06); } /* Simple fade-in for panels rendered by JS */ .clearity-fade-in { animation: clearityFadeIn 0.25s ease; } @keyframes clearityFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }