/* =========================================== [GLOBAL STYLESHEET: main.css] =========================================== Role: Establishes Tailwind custom rendering utilities and core stylistic overrides (e.g. Animations, Base resets). Dependencies: - Mounted explicitly inside the of EVERY standalone .html page natively. - Supports structural classes like `.dropdown` mapped inside `components/navbar.html`. */ /* main.css - Core Styling & Utilities */ :root { --transition-speed: 0.3s; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dropdown visibility utility */ .dropdown-menu { visibility: hidden; opacity: 0; transform: translateY(-0.5rem); transition: all var(--transition-speed) ease; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); } /* Glassmorphism Classes for modern aesthetics */ .glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); } .glass-dark { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Smooth Image Hover scaling */ .img-hover-zoom { overflow: hidden; } .img-hover-zoom img { transition: transform var(--transition-speed) ease; } .img-hover-zoom:hover img { transform: scale(1.05); } /* Micro animations */ .btn-hover { transition: all 0.2s ease-in-out; } .btn-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Navbar Slide Down Animation */ @keyframes navSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nav-animate { animation: navSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }