/* ========================================================================= THE RAJPUTS — styles.css Hand-written rules that sit ON TOP of Tailwind (loaded via CDN in on every page). Tailwind utilities cover layout/spacing/color; this file covers the things utilities can't express cleanly: the cinematic hero canvas/preloader mechanics, the scroll-reveal system (ported verbatim from thejinn.world / thejinnstudios.com), gradient text, decorative motifs (glow orbs, dividers, embers), and card/border treatments — re-themed to The Rajputs' gold-on-near-black palette with crimson accents for antagonist/betrayal characters. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: #14100b; } /* -------------------------------------------------------------------- */ /* Scrollbar — gold, matching the brand accent */ /* -------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #14100b; } ::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.7); } /* -------------------------------------------------------------------- */ /* Gradient text — gold (brand) and crimson (betrayal/conflict) variants */ /* -------------------------------------------------------------------- */ .text-gold-gradient { background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-crimson-gradient { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 50%, #7f1d1d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-glow-gold { text-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.2); } /* -------------------------------------------------------------------- */ /* Navigation — transparent over the hero, blurred solid once scrolled */ /* -------------------------------------------------------------------- */ #site-nav { background: transparent; border-bottom: 1px solid transparent; } #site-nav.site-nav--solid { background: rgba(20, 16, 11, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(212, 175, 55, 0.15); } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #d4af37; transition: width 0.3s; } .nav-link:hover::after { width: 100%; } /* -------------------------------------------------------------------- */ /* HERO — cinematic frame-sequence scroll engine */ /* -------------------------------------------------------------------- */ #hero { background-color: #0d0a06; } #hero-canvas { display: block; } /* Reduced-motion / no-JS / frame-0-failure fallback: canvas is hidden and this class paints a single strong frame as a plain CSS background. */ .hero-static-fallback { background: url('../images/hero-bg.jpg') center center / cover no-repeat; } .hero-badge span { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Floating embers drifting over the hero — decorative only. */ .ember { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 87, 0.9), rgba(212, 175, 55, 0)); pointer-events: none; animation: emberFloat 7s ease-in-out infinite; } @keyframes emberFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; } 50% { transform: translateY(-30px) scale(1.15); opacity: 0.9; } } #scroll-indicator { animation: scrollFloat 3s ease-in-out infinite; transition: opacity 0.3s ease; } @keyframes scrollFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* -------------------------------------------------------------------- */ /* Preloader */ /* -------------------------------------------------------------------- */ #preloader { transition: opacity 0.4s ease; } /* -------------------------------------------------------------------- */ /* Scroll-reveal system — fade + rise on first intersection */ /* Ported verbatim from thejinn.world / thejinnstudios.com — the same */ /* "animation on scroll" system referenced for reuse. */ /* -------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-48px); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal-left.is-visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(48px); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal-right.is-visible { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal-scale.is-visible { opacity: 1; transform: scale(1); } /* Staggered entrance for grid/list children */ .reveal-group > .reveal:nth-child(1), .reveal-group > .reveal-scale:nth-child(1) { transition-delay: 0ms; } .reveal-group > .reveal:nth-child(2), .reveal-group > .reveal-scale:nth-child(2) { transition-delay: 100ms; } .reveal-group > .reveal:nth-child(3), .reveal-group > .reveal-scale:nth-child(3) { transition-delay: 200ms; } .reveal-group > .reveal:nth-child(4), .reveal-group > .reveal-scale:nth-child(4) { transition-delay: 300ms; } .reveal-group > .reveal:nth-child(n + 5), .reveal-group > .reveal-scale:nth-child(n + 5) { transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } } /* -------------------------------------------------------------------- */ /* Section dividers / decorative motifs */ /* -------------------------------------------------------------------- */ .divider-line { height: 1px; width: 60px; } .divider-line.left { background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.6)); } .divider-line.right { background: linear-gradient(to left, transparent, rgba(212, 175, 55, 0.6)); } .divider-diamond { width: 8px; height: 8px; border: 1px solid rgba(212, 175, 55, 0.6); transform: rotate(45deg); } .divider-square { width: 10px; height: 10px; background: rgba(212, 175, 55, 0.4); transform: rotate(45deg); } .section-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.3), transparent); } .glow-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; animation: pulseGlow 6s ease-in-out infinite; } .glow-gold { background: rgba(212, 175, 55, 0.14); } .glow-crimson { background: rgba(139, 0, 0, 0.14); } @keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* -------------------------------------------------------------------- */ /* Cards — gradient-border treatment (double-background border trick) */ /* -------------------------------------------------------------------- */ .character-card { position: relative; background: linear-gradient(#1c1712, #1c1712) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.55), rgba(139, 0, 0, 0.25), rgba(212, 175, 55, 0.3)) border-box; border: 1px solid transparent; border-radius: 0.75rem; transition: transform 0.5s ease, box-shadow 0.5s ease; } .character-card:hover { transform: scale(1.02); box-shadow: 0 0 40px rgba(212, 175, 55, 0.25); } .character-card .character-image { transition: transform 0.7s ease; } .character-card:hover .character-image { transform: scale(1.08); } .character-card .character-overlay { background: linear-gradient(to top, #14100b 0%, rgba(20, 16, 11, 0.65) 45%, transparent 100%); } .feature-card { position: relative; background: linear-gradient(145deg, #1c1712 0%, #241c14 100%); border-radius: 0.75rem; transition: transform 0.5s ease, box-shadow 0.5s ease; } .feature-card::before { content: ''; position: absolute; inset: 0; border-radius: 0.75rem; padding: 1px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.55), rgba(139, 0, 0, 0.15), rgba(212, 175, 55, 0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 0 40px rgba(212, 175, 55, 0.18); } .feature-card .feature-icon { transition: color 0.5s ease, transform 0.5s ease, filter 0.5s ease; } .feature-card:hover .feature-icon { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)); } .feature-card .feature-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, #b8860b, #ffd700, #b8860b); opacity: 0; transition: opacity 0.5s ease; border-radius: 0 0 0.75rem 0.75rem; } .feature-card:hover .feature-glow { opacity: 1; } /* Power cards — square art + copy, with an "ultimate" variant for Shahadat */ .power-card { position: relative; background: linear-gradient(145deg, #1c1712 0%, #100d09 100%); border: 2px solid rgba(212, 175, 55, 0.2); border-radius: 0.75rem; overflow: hidden; transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.3s ease; } .power-card:hover { transform: scale(1.03); border-color: rgba(212, 175, 55, 0.7); box-shadow: 0 0 40px rgba(212, 175, 55, 0.25); } .power-card .power-image { transition: transform 0.6s ease; } .power-card:hover .power-image { transform: scale(1.1); } .power-card.power-ultimate { border-color: #d4af37; background: linear-gradient(145deg, #1c1712 0%, #2a0f0f 100%); } .power-card.power-ultimate:hover { box-shadow: 0 0 50px rgba(212, 175, 55, 0.4); } .gallery-item { position: relative; overflow: hidden; border-radius: 0.75rem; transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; } .gallery-item img { transition: transform 0.7s ease; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item:hover { border-color: rgba(212, 175, 55, 0.5); box-shadow: 0 0 30px rgba(212, 175, 55, 0.2); transform: scale(1.01); } .gallery-overlay { opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } /* -------------------------------------------------------------------- */ /* Buttons */ /* -------------------------------------------------------------------- */ .btn-hero { background: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #b8860b 100%); color: #14100b; border: 1px solid rgba(212, 175, 55, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .btn-hero:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(212, 175, 55, 0.4); } .btn-hero-outline { background: transparent; color: #d4af37; border: 2px solid rgba(212, 175, 55, 0.6); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .btn-hero-outline:hover { background: rgba(212, 175, 55, 0.1); border-color: #d4af37; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); } /* -------------------------------------------------------------------- */ /* Gallery lightbox */ /* -------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 8, 5, 0.95); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .lightbox.is-visible { display: flex; opacity: 1; } .lightbox-content { animation: scaleIn 0.4s ease; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .lightbox-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 245, 220, 0.3); border: none; transition: all 0.3s ease; cursor: pointer; } .lightbox-dot:hover { background: rgba(245, 245, 220, 0.5); } .lightbox-dot.active { width: 28px; border-radius: 4px; background: #d4af37; } /* -------------------------------------------------------------------- */ /* Email signup — success/error state */ /* -------------------------------------------------------------------- */ .form-message { transition: opacity 0.4s ease, transform 0.4s ease; } /* -------------------------------------------------------------------- */ /* Utility */ /* -------------------------------------------------------------------- */ .container-page { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }