/* ========================================================================= WARFRONT GENERALS — 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, HUD scanlines), and card/border treatments — re-themed to Warfront Generals' navy/near-black sci-fi military HUD palette, with faction accent colors (USA blue, China red, GRA yellow) layered on top. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: #0b0f1a; } /* -------------------------------------------------------------------- */ /* Scrollbar — amber/yellow, matching the brand accent */ /* -------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0b0f1a; } ::-webkit-scrollbar-thumb { background: rgba(250, 204, 21, 0.45); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(250, 204, 21, 0.7); } /* -------------------------------------------------------------------- */ /* Gradient text */ /* -------------------------------------------------------------------- */ .text-command-gradient { background: linear-gradient(135deg, #fde047 0%, #facc15 45%, #ca8a04 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-glow-command { text-shadow: 0 0 10px rgba(250, 204, 21, 0.45), 0 0 20px rgba(250, 204, 21, 0.25), 0 0 40px rgba(250, 204, 21, 0.15); } /* -------------------------------------------------------------------- */ /* 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(5, 8, 15, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, 0.08); } .logo-font { font-family: 'Orbitron', sans-serif; } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #facc15; transition: width 0.3s; } .nav-link:hover::after { width: 100%; } /* -------------------------------------------------------------------- */ /* HERO — cinematic frame-sequence scroll engine */ /* -------------------------------------------------------------------- */ #hero { background-color: #05070d; } #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.jpg') center center / cover no-repeat; } #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); } } /* HUD scanline sweep across the hero — decorative sci-fi motif */ .hud-scanline { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(250, 204, 21, 0.5), transparent); animation: scanSweep 8s linear infinite; pointer-events: none; } @keyframes scanSweep { 0% { top: 0%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } } /* -------------------------------------------------------------------- */ /* 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; } } /* -------------------------------------------------------------------- */ /* Decorative motifs */ /* -------------------------------------------------------------------- */ .divider-line { height: 1px; width: 60px; } .divider-line.left { background: linear-gradient(to right, transparent, rgba(250, 204, 21, 0.6)); } .divider-line.right { background: linear-gradient(to left, transparent, rgba(250, 204, 21, 0.6)); } .divider-diamond { width: 8px; height: 8px; border: 1px solid rgba(250, 204, 21, 0.6); transform: rotate(45deg); } .glow-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; animation: pulseGlow 6s ease-in-out infinite; } .glow-command { background: rgba(250, 204, 21, 0.1); } .glow-blue { background: rgba(96, 165, 250, 0.1); } .glow-red { background: rgba(248, 113, 113, 0.08); } @keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* -------------------------------------------------------------------- */ /* Cards */ /* -------------------------------------------------------------------- */ .feature-card { position: relative; background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .feature-card:hover { transform: translateY(-6px); border-color: rgba(250, 204, 21, 0.5); box-shadow: 0 0 30px rgba(250, 204, 21, 0.12); } .feature-card .feature-icon { transition: transform 0.4s ease; } .feature-card:hover .feature-icon { transform: scale(1.12); } /* Faction cards — image + accent-colored border on hover, keyed per faction */ .faction-card { position: relative; background: #0b0f1a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.5rem; overflow: hidden; transition: border-color 0.4s ease, box-shadow 0.4s ease; } .faction-card .faction-image { transition: transform 0.6s ease; } .faction-card:hover .faction-image { transform: scale(1.06); } .faction-card.faction-usa:hover { border-color: rgba(96, 165, 250, 0.7); box-shadow: 0 0 30px rgba(96, 165, 250, 0.15); } .faction-card.faction-china:hover { border-color: rgba(248, 113, 113, 0.7); box-shadow: 0 0 30px rgba(248, 113, 113, 0.15); } .faction-card.faction-gra:hover { border-color: rgba(250, 204, 21, 0.7); box-shadow: 0 0 30px rgba(250, 204, 21, 0.15); } /* Superweapon cards — full-bleed image, bottom-anchored caption overlay */ .weapon-card { position: relative; overflow: hidden; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.4s ease; } .weapon-card .weapon-image { transition: transform 0.7s ease; } .weapon-card:hover .weapon-image { transform: scale(1.1); } .weapon-card .weapon-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } /* -------------------------------------------------------------------- */ /* Buttons */ /* -------------------------------------------------------------------- */ .btn-hero { background: #facc15; color: #05070d; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .btn-hero:hover { background: #fde047; transform: scale(1.05); box-shadow: 0 0 30px rgba(250, 204, 21, 0.35); } .btn-hero-outline { background: transparent; color: #e5e7eb; border: 1px solid rgba(156, 163, 175, 0.6); transition: background 0.3s ease, border-color 0.3s ease; } .btn-hero-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: #facc15; color: #facc15; } /* -------------------------------------------------------------------- */ /* 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; }