/* Webpolice Custom Stylesheet */ /* * Requirement: Smooth Expand/Collapse using CSS Grid (0fr -> 1fr). * Strictly NO display:none and NO fixed max-height! */ .card-accordion { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .card-accordion.is-expanded { grid-template-rows: 1fr; } .card-accordion-content { overflow: hidden; min-height: 0; } /* Rotate indicator icon */ .accordion-chevron { transition: transform 0.3s ease; } .card-accordion.is-expanded + button .accordion-chevron, button.is-active .accordion-chevron { transform: rotate(180deg); } /* Card hover animation */ .offender-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .offender-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.1); } /* Lightbox Modal styles */ .lightbox-modal { display: flex; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .lightbox-modal.active { opacity: 1; pointer-events: auto; } /* Custom Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ============================================================ Mobile (Android / iOS) support ============================================================ */ /* iOS Safari auto-zooms into any input with font-size < 16px on focus. Force 16px on small screens so the page never jumps/zooms. */ @media (max-width: 640px) { input[type="text"], input[type="date"], input[type="password"], input[type="number"], input[type="search"], input:not([type]), select, textarea { font-size: 16px !important; } /* Touch targets: pagination + small action buttons at least 40px tall */ #paginationContainer button { min-width: 40px; min-height: 40px; } /* Card action buttons a bit taller for thumbs */ .offender-card button, .offender-card a[class*="rounded-lg"] { min-height: 38px; } } /* iPhone notch / home indicator: keep content inside safe areas */ @supports (padding: env(safe-area-inset-bottom)) { nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } nav div.md\:hidden, nav div[class*="md:hidden"] { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); } main { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } } /* Kill horizontal page scroll on narrow screens without breaking position:sticky (overflow-x:clip does NOT create a scroll container; hidden on is safe because it propagates to the viewport). */ @media (max-width: 640px) { html { overflow-x: hidden; } body { overflow-x: clip; } /* Long URLs / raw text (audit JSON, addresses) must wrap instead of overflow */ pre, code { overflow-wrap: anywhere; white-space: pre-wrap; } }