/** * Custom CSS * Minimal styles that Tailwind utility classes cannot handle. * Keep this file as small as possible — prefer Tailwind classes. */ /* ── Smooth Scroll Behavior ─────────────────────────────────── */ html { scroll-behavior: smooth; } /* ── Focus Styles for Accessibility ─────────────────────────── */ /* Amber-400 (#f59e0b) reads clearly against the dark charcoal ground. */ *:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; } /* ── Scroll-reveal (progressive enhancement) ────────────────── */ /* Elements only start hidden when JS is present (html.js set inline in the ). Without JS the content renders immediately — never hidden. */ html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } html.js [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ── Form Input Transitions ─────────────────────────────────── */ input, textarea, select { transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* ── Image Hover Zoom (for gallery) ─────────────────────────── */ .img-zoom { overflow: hidden; position: relative; } .img-zoom img { transition: transform 0.5s ease; } .img-zoom:hover img { transform: scale(1.05); } /* ── Gallery Lightbox Viewer ────────────────────────────────── */ /* Zoom/pan transform + fade-in on image swap. While actively panning we drop the transform transition so dragging tracks the pointer 1:1. */ #lb-img { transition: transform 0.28s ease, opacity 0.2s ease; will-change: transform; cursor: zoom-in; } #lb-img.is-zoomed { cursor: grab; } #lb-img.is-panning { transition: opacity 0.2s ease; cursor: grabbing; } /* Loading spinner shown until the full-resolution image decodes. */ .lb-spinner-ring { width: 44px; height: 44px; border-radius: 9999px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #ffffff; animation: lb-spin 0.8s linear infinite; } @keyframes lb-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #lb-img { transition: opacity 0.2s ease; } .lb-spinner-ring { animation-duration: 1.6s; } } /* ── Mobile Menu Transition ─────────────────────────────────── */ #mobile-menu { transition: max-height 0.3s ease-out; } /* ── Print Styles ───────────────────────────────────────────── */ @media print { header, footer, #mobile-menu, .no-print { display: none !important; } main { padding: 0 !important; } a[href]:after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } }