/* ========================================================= enhance.css — Modern UI layer for ISSO LA Temple Glassmorphism • 3D dropdowns • smooth animations Loaded globally after Tailwind (Play CDN). Safe to layer: it only adds new classes, it does not restyle existing ones. ========================================================= */ :root { --maroon: #9c0505; --maroon-700: #7a0404; --maroon-dark: #4f0101; --maroon-deep: #3a0000; --gold: #ffcc00; --gold-soft: #ffd94d; --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } /* Prefer Poppins where loaded, graceful fallback everywhere else */ .font-display, .nav-bar, .mobile-menu, .site-footer { font-family: "Poppins", "Segoe UI", system-ui, Arial, sans-serif; } /* ---------- Reusable animations ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes popIn { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 100% { opacity: 1; transform: none; } } @keyframes sheen { 0% { left: -60%; } 100% { left: 130%; } } .anim-fade-up { animation: fadeUp .6s var(--ease-spring) both; } .anim-float { animation: floatY 5s ease-in-out infinite; } /* Reveal-on-scroll (only active when enhance.js adds .js-reveal to , so the page is never hidden if JS is off) */ .js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease-spring); } .js-reveal .reveal.in { opacity: 1; transform: none; } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .anim-fade-up, .anim-float { animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none; } * { scroll-behavior: auto !important; } } /* ---------- Glass surface ---------- */ .glass { background: rgba(255, 255, 255, .08); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, .14); } /* ---------- Gold CTA button (Donate etc.) ---------- */ .btn-gold { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--gold) 0%, #ffb800 100%); color: #3a0000 !important; font-weight: 700; border-radius: 9999px; box-shadow: 0 6px 18px -6px rgba(255, 204, 0, .7); transition: transform .25s var(--ease-spring), box-shadow .25s ease; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(255, 204, 0, .85); } .btn-gold::after { /* moving sheen */ content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); } .btn-gold:hover::after { animation: sheen .8s ease forwards; } /* ========================================================= Utility: 3D card lift (used by homepage sections / gallery) ========================================================= */ .card-3d { transition: transform .4s var(--ease-spring), box-shadow .4s ease; transform-style: preserve-3d; will-change: transform; } .card-3d:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: 0 24px 48px -20px rgba(58, 0, 0, .45); }