/* ============================================================ THE EMPOWERED WORLD — Custom Stylesheet Palette is derived directly from the logo: crimson, ink, cream. No colour outside this family is used anywhere on the site. ============================================================ */ /* iOS Safari paints the background (not ) during the overscroll rubber-band bounce. Without this, that bounce flashes white above the fixed dark nav bar. */ html { background-color: #1A1A1A; } h1, h2, h3, h4, .font-heading, .nav-link, button, .price-val { font-family: 'Sedan SC', serif !important; letter-spacing: 0.05em; } /* ---------- Page switcher ---------- */ .page-content { display: none; } .page-content.active { display: block; animation: fadeIn 0.4s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Page-to-page transition overlay ---------- Full-screen, plays a ~6s clip on every nav click before the destination page appears. See js/main.js for the logic and public/videos/README.txt for exactly which files are expected. */ #transition-overlay { position: fixed; inset: 0; z-index: 200; background: #1A1A1A; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } #transition-overlay.active { opacity: 1; pointer-events: all; } #transition-overlay video { width: 100%; height: 100%; object-fit: cover; } /* ---------- Nav links ---------- Active page link stays gold even on hover; only inactive links switch to crimson on hover. */ .nav-link.text-brand-gold:hover { color: #D4A94F; } /* ---------- Misc ---------- */ .tier-group-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; letter-spacing: 0.15em; text-transform: uppercase; color: #AA1945; margin-top: 1.1rem; margin-bottom: 0.4rem; font-weight: 600; } .tier-group-label:first-child { margin-top: 0; } #whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 150; width: 56px; height: 56px; border-radius: 999px; background: #AA1945; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: transform 0.2s ease; } #whatsapp-float:hover { transform: scale(1.06); }