/* ============================================================ ZONE14 — World Cup 2026 Jerseys Design tokens, base, components, sections ============================================================ */ /* Bohemian Typewriter — primary brand font, self-hosted to kill FOUT. Same-origin .woff is preloaded in so it lands before first paint. font-display:block holds text for up to 3s rather than flashing the fallback then swapping — with preload, the font is already cached so there's no wait. */ @font-face { font-family: 'Bohemian Typewriter'; src: local('Bohemian Typewriter'), url('fonts/BohemianTypewriter.woff') format('woff'), url('https://fonts.cdnfonts.com/s/63708/Bohemian%20Typewriter.woff') format('woff'); font-weight: 400; font-style: normal; font-display: block; } :root { /* Theme derived from Zone14 logos: - fav.PNG: neon cyan ring on smoky black-blue - main.png: heritage green crest, cream "14", wine-red crown */ --bg: #060a0e; --bg-2: #0c1217; --bg-3: #11181f; --surface: rgba(255, 255, 255, 0.04); --surface-hi: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.08); --border-hi: rgba(94, 233, 227, 0.3); /* Brand palette */ --neon: #5ee9e3; /* cyan glow from fav logo (primary accent) */ --neon-deep: #2bc9c2; --heritage: #1d6b3a; /* deep heritage green from crest */ --heritage-dark: #0f4524; --cream: #f5e9c8; /* cream from "14" text in crest */ --wine: #7a1f2b; /* wine red from crown */ --gold: #ffd700; --blue: #00d4ff; --red: #ff3b5c; --text: #f5f5f5; --text-dim: #b0b0b0; --text-mute: #6e6e6e; --grad-dark: linear-gradient(180deg, #060a0e 0%, #0a1410 100%); --grad-neon: linear-gradient(135deg, #5ee9e3 0%, #00d4ff 100%); --grad-heritage: linear-gradient(135deg, #1d6b3a 0%, #0f4524 100%); --grad-gold: linear-gradient(135deg, #ffd700 0%, #ff9d00 100%); --grad-hero: radial-gradient(1200px 600px at 50% 0%, rgba(94, 233, 227, 0.18) 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(29, 107, 58, 0.18) 0%, transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(122, 31, 43, 0.12) 0%, transparent 60%), linear-gradient(180deg, #050a0e 0%, #060a0e 100%); --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-neon: 0 0 30px rgba(94, 233, 227, 0.4), 0 0 60px rgba(94, 233, 227, 0.18); --shadow-heritage: 0 0 30px rgba(29, 107, 58, 0.4); --shadow-gold: 0 0 30px rgba(255, 215, 0, 0.35); --container: 1240px; --nav-h: 72px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ============ RESET ============ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } a { color: inherit; text-decoration: none; } ul { list-style: none; } input, select, textarea { font: inherit; } ::selection { background: var(--neon); color: #000; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--neon); } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ============ TYPOGRAPHY ============ */ /* Primary brand font: Bohemian Typewriter (typewriterfonts.net). Loaded via cdnfonts.com CDN AND a local @font-face fallback pointing to fonts/BohemianTypewriter.ttf — whichever exists wins. If both fail, the chain falls back to Courier Prime (similar typewriter look) and finally Bebas Neue, so the layout never breaks. */ h1, h2, h3, .display { font-family: 'Bohemian Typewriter', 'Courier Prime', 'Bebas Neue', 'Oswald', monospace; font-weight: 700; letter-spacing: -0.01em; } .hero-title, .section-title, .qv-country, .td-ref { letter-spacing: -0.03em; } .accent { color: var(--neon); } .bn { font-family: 'Inter', sans-serif; color: var(--text-dim); font-weight: 400; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; transition: all 0.3s var(--ease); white-space: nowrap; position: relative; overflow: hidden; } .btn-lg { padding: 16px 32px; font-size: 16px; } .btn-primary { background: var(--grad-neon); color: #000; font-weight: 700; box-shadow: 0 8px 24px -8px rgba(94, 233, 227, 0.5); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(94, 233, 227, 0.7), 0 0 0 1px rgba(94, 233, 227, 0.4); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: var(--neon); color: var(--neon); background: rgba(94, 233, 227, 0.05); transform: translateY(-2px); } .btn-whatsapp { background: #25d366; color: #fff; font-weight: 600; box-shadow: 0 4px 14px -4px rgba(37, 211, 102, 0.6); } .btn-whatsapp:hover { background: #1ebe5d; transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.8); } /* ============ NAVBAR ============ */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; transition: all 0.4s var(--ease); background: transparent; } .navbar.scrolled { background: #05070a; /* solid black once past the hero */ border-bottom: 1px solid var(--border); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.55); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .logo { display: flex; align-items: center; text-decoration: none; } /* Transparent crest in the navbar — no backplate, sits clean on the dark nav. Subtle cyan drop-shadow ties it to the brand glow. */ .logo-mark { height: 116px; width: auto; display: block; filter: drop-shadow(0 0 14px rgba(94, 233, 227, 0.45)); transition: transform 0.4s var(--ease), filter 0.4s var(--ease); } .logo:hover .logo-mark { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(94, 233, 227, 0.7)); } /* Bump the navbar height for the bigger crest — :root --nav-h cascades to scroll-padding, the off-canvas mobile menu top offset, etc. */ :root { --nav-h: 128px; } @media (max-width: 768px) { :root { --nav-h: 96px; } } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-dim); position: relative; padding: 8px 0; transition: color 0.3s var(--ease); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--grad-neon); transition: width 0.3s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 12px; } .hamburger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 8px; } .hamburger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s var(--ease); } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============ HERO ============ */ .hero { position: sticky; /* pins the hero in place while the page scrolls over it */ top: 0; z-index: -1; /* sits BEHIND the opaque sections so they slide up over it */ min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--grad-hero); padding: calc(var(--nav-h) + 16px) 0 56px; isolation: isolate; /* keeps the video layered correctly */ } /* Short / laptop viewports: compress (zoom out) the hero so ALL of it — title, countdown AND the Shop Now CTA + stats — fits one screen. The next section then starts right after the fold, so the reveal begins immediately (no dead scroll). */ @media (min-width: 700px) and (max-height: 980px) { .hero { padding: calc(var(--nav-h) - 4px) 0 22px; } .hero-badge { margin-bottom: 10px; } .hero-title { font-size: clamp(34px, 5vw, 64px); margin-bottom: 10px; line-height: 1.02; } .hero-sub { font-size: clamp(13px, 1.3vw, 16px); margin-bottom: 14px; } .countdown { padding: 9px 14px; margin-bottom: 8px; gap: 6px; } .cd-num { font-size: clamp(20px, 2.5vw, 28px); } .cd-lbl { font-size: 9px; } .cd-sep { font-size: clamp(18px, 2vw, 24px); } .cd-caption { font-size: 12px; margin-bottom: 12px; } .hero-cta { margin-bottom: 16px; gap: 12px; } .hero-cta .btn-lg { padding: 12px 22px; } .hero-stats { gap: 34px; } .hero-stats strong { font-size: 28px; } } /* Mobile keeps the SAME pinned-hero reveal as desktop — the hero stays still and the 2nd section rises over it. The cross-fade is now driven by a continuous rAF loop (reads scroll position every frame), so it stays smooth on touch and the banner opacity tracks scroll instead of stepping on throttled events. */ /* Very short laptops (≈768px tall and under): squeeze further still. */ @media (min-width: 700px) and (max-height: 780px) { .hero { padding: calc(var(--nav-h) - 12px) 0 16px; } .hero-badge { margin-bottom: 8px; } .hero-title { font-size: clamp(30px, 4.2vw, 52px); margin-bottom: 8px; } .hero-sub { margin-bottom: 10px; } .countdown { padding: 7px 12px; margin-bottom: 6px; } .cd-num { font-size: clamp(18px, 2.1vw, 24px); } .cd-caption { margin-bottom: 9px; } .hero-cta { margin-bottom: 12px; } .hero-stats { gap: 28px; } .hero-stats strong { font-size: 24px; } } /* Brand poster — visible until the video has buffered and starts playing. Same filter as the video so the cross-fade is imperceptible. `.dimming` darkens it just before the video appears so the eye registers a subtle "lighting change" instead of a hard cut — masks the swap entirely. */ .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: calc(50% - 1.1%) center; z-index: 0; filter: saturate(0.95) brightness(0.7); transition: filter 0.5s ease, opacity 1.2s ease; pointer-events: none; } .hero-poster.dimming { filter: saturate(0.85) brightness(0.45); } .hero-poster.fade-out { opacity: 0; } /* Cinematic background video — sits above the poster, fades in once ready */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; /* Slight desaturation + dim so the brand colors still pop on top */ filter: saturate(0.95) brightness(0.7); opacity: 0; transition: opacity 1.2s ease; } .hero-video.is-ready { opacity: 1; } /* Dark gradient vignette so the headline stays crisp over the video */ .hero-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 80% 60% at 50% 45%, transparent 0%, rgba(6,10,14,0.35) 65%, rgba(6,10,14,0.85) 100%), linear-gradient(180deg, rgba(6,10,14,0.45) 0%, transparent 25%, transparent 60%, rgba(6,10,14,0.9) 100%); pointer-events: none; } /* Mobile: hero video stays visible. Browsers require muted+playsinline to autoplay on phones (both already set in the markup). */ /* ==================================================== PREMIUM AMBIENT LAYER — aurora orbs + twinkling stars No JS, no canvas, GPU-only animations. ==================================================== */ .hero-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 2; /* above video + vignette */ overflow: hidden; mix-blend-mode: screen; opacity: 0.55; } .aurora-blob { position: absolute; width: 60vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); will-change: transform; } .aurora-blob.a1 { background: radial-gradient(circle, rgba(94, 233, 227, 0.7) 0%, transparent 65%); top: -20%; left: -16%; opacity: 0.45; animation: auroraDrift1 26s ease-in-out infinite alternate; } .aurora-blob.a2 { background: radial-gradient(circle, rgba(29, 107, 58, 0.85) 0%, transparent 65%); bottom: -24%; right: -16%; opacity: 0.42; animation: auroraDrift2 32s ease-in-out infinite alternate; } .aurora-blob.a3 { background: radial-gradient(circle, rgba(0, 212, 255, 0.55) 0%, transparent 65%); top: 28%; right: 8%; width: 45vw; max-width: 540px; opacity: 0.25; animation: auroraDrift3 28s ease-in-out infinite alternate; } .aurora-blob.a4 { background: radial-gradient(circle, rgba(122, 31, 43, 0.6) 0%, transparent 65%); bottom: 14%; left: 20%; width: 38vw; max-width: 460px; opacity: 0.18; animation: auroraDrift4 34s ease-in-out infinite alternate; } @keyframes auroraDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(140px, 110px, 0) scale(1.25); } } @keyframes auroraDrift2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-130px, -90px, 0) scale(1.18); } } @keyframes auroraDrift3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-170px, 130px, 0) scale(0.85); } } @keyframes auroraDrift4 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(120px, -140px, 0) scale(1.15); } } /* Subtle twinkling stars — like reflective specs in spotlight haze */ .hero-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 4; /* topmost ambient layer, above content's siblings */ } .hero-sparkles span { position: absolute; left: var(--x); top: var(--y); width: var(--s, 2px); height: var(--s, 2px); background: #f5e9c8; border-radius: 50%; box-shadow: 0 0 6px 1px rgba(94, 233, 227, 0.7), 0 0 14px 3px rgba(94, 233, 227, 0.25); opacity: 0.2; animation: twinkle 5s ease-in-out infinite; animation-delay: var(--d, 0s); will-change: opacity, transform; } @keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.4); } } .pitch-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(94, 233, 227, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 233, 227, 0.05) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); z-index: 2; /* above video, below content */ animation: gridPan 30s linear infinite; opacity: 0.5; } @keyframes gridPan { from { background-position: 0 0; } to { background-position: 60px 60px; } } .hero-glow { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(94, 233, 227, 0.15) 0%, transparent 60%); filter: blur(60px); z-index: 2; /* above video, below content */ animation: glowPulse 6s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } } .hero-inner { position: relative; z-index: 5; /* always above video + every ambient layer */ text-align: center; will-change: transform, opacity; /* scroll-driven recede stays GPU-smooth */ } /* Hero watermark — main.png as a bold-but-restrained backdrop crest. Radial mask softens the center where the headline sits so the type stays crisp; the edges of the shield stay clearly present. */ .hero-watermark { position: absolute; top: 50%; left: 50%; width: min(120vw, 1700px); max-width: none; /* override global img{max-width:100%} so 120vw+ works on mobile */ height: auto; transform: translate(calc(-50% - 1.1%), -50%); opacity: 0.14; z-index: 3; /* sits above video + vignette, below content */ pointer-events: none; user-select: none; filter: drop-shadow(0 0 100px rgba(94, 233, 227, 0.55)) drop-shadow(0 0 50px rgba(29, 107, 58, 0.45)); animation: watermarkBreath 8s ease-in-out infinite; mask-image: radial-gradient(ellipse 55% 35% at center, transparent 0%, rgba(0,0,0,0.5) 55%, #000 100%); -webkit-mask-image: radial-gradient(ellipse 55% 35% at center, transparent 0%, rgba(0,0,0,0.5) 55%, #000 100%); } @keyframes watermarkBreath { 0%, 100% { opacity: 0.12; transform: translate(calc(-50% - 1.1%), -50%) scale(1); } 50% { opacity: 0.18; transform: translate(calc(-50% - 1.1%), -50%) scale(1.02); } } /* Mobile variant — bigger leftward nudge to visually centre the crest */ @keyframes watermarkBreathMobile { 0%, 100% { opacity: 0.12; transform: translate(calc(-50% - 5%), -50%) scale(1); } 50% { opacity: 0.18; transform: translate(calc(-50% - 5%), -50%) scale(1.02); } } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; background: rgba(94, 233, 227, 0.08); border: 1px solid rgba(94, 233, 227, 0.25); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--neon); margin-bottom: 28px; backdrop-filter: blur(8px); animation: fadeInUp 0.8s var(--ease-out) both; } .pulse-dot { width: 8px; height: 8px; background: var(--neon); border-radius: 50%; box-shadow: 0 0 0 0 rgba(94, 233, 227, 0.7); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 233, 227, 0.7); } 70% { box-shadow: 0 0 0 12px rgba(94, 233, 227, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 233, 227, 0); } } .hero-title { font-family: 'Bohemian Typewriter', sans-serif; font-size: clamp(48px, 9vw, 128px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 24px; animation: fadeInUp 1s var(--ease-out) 0.1s both; } .title-row { display: block; background: linear-gradient(180deg, #f5e9c8 0%, #b8a570 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .title-glitch { background: linear-gradient(135deg, #5ee9e3 0%, #00d4ff 50%, #5ee9e3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; /* Subtle glow via filter so letter edges stay crisp instead of bloomed */ filter: drop-shadow(0 0 24px rgba(94, 233, 227, 0.35)); } /* Glitch ghost copies removed — they doubled the typewriter glyphs and produced a broken/garbled look. The cyan gradient + soft glow alone now. */ .title-glitch::before, .title-glitch::after { display: none; } .hero-sub { font-size: clamp(15px, 1.6vw, 18px); color: var(--text-dim); margin-bottom: 40px; max-width: 640px; margin-left: auto; margin-right: auto; animation: fadeInUp 1s var(--ease-out) 0.2s both; } /* Countdown */ .countdown { display: inline-flex; align-items: center; gap: 8px; padding: 20px 28px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); margin-bottom: 14px; box-shadow: var(--shadow-card); animation: fadeInUp 1s var(--ease-out) 0.3s both; } .cd-box { display: flex; flex-direction: column; align-items: center; min-width: 60px; } .cd-num { font-family: 'Bohemian Typewriter', sans-serif; font-size: clamp(28px, 4vw, 44px); line-height: 1; background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .cd-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; color: var(--text-mute); margin-top: 4px; text-transform: uppercase; } .cd-sep { font-family: 'Bohemian Typewriter', sans-serif; font-size: clamp(24px, 3.5vw, 36px); color: var(--text-mute); margin-top: -10px; } .cd-caption { font-size: 13px; color: var(--text-mute); margin-bottom: 36px; animation: fadeInUp 1s var(--ease-out) 0.4s both; } .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; animation: fadeInUp 1s var(--ease-out) 0.5s both; } .hero-stats { display: flex; gap: 56px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s var(--ease-out) 0.6s both; } .hero-stats > div { display: flex; flex-direction: column; align-items: center; } .hero-stats strong { font-family: 'Bohemian Typewriter', sans-serif; font-size: 36px; color: var(--text); line-height: 1; } .hero-stats span { font-size: 12px; letter-spacing: 0.15em; color: var(--text-mute); text-transform: uppercase; margin-top: 6px; } .scroll-indicator { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-mute); } .scroll-indicator span { width: 22px; height: 36px; border: 2px solid var(--text-mute); border-radius: 12px; position: relative; } .scroll-indicator span::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: var(--neon); border-radius: 2px; animation: scrollDot 1.8s infinite; } @keyframes scrollDot { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 14px); } } .scroll-indicator p { font-size: 10px; letter-spacing: 0.3em; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ STAR-PLAYERS CINEMATIC BANNER — full-bleed scroll moment between hero and Featured Jerseys ============================================================ */ .hero-banner { position: relative; width: 100%; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, #0a1a2e 50%, var(--bg) 100%); aspect-ratio: 21 / 9; max-height: 78vh; will-change: opacity; /* scroll-driven cross-fade as it rises over the hero */ } .hero-banner-art { position: absolute; inset: 0; display: grid; place-items: center; } .hero-banner-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; /* Slow ken-burns pan to bring the artwork to life */ animation: heroBannerPan 22s ease-in-out infinite alternate; } @keyframes heroBannerPan { 0% { transform: scale(1.06) translateX(0); } 100% { transform: scale(1.10) translateX(-1.5%); } } /* Edge fades — blend banner into surrounding sections; bottom band stays denser so the CTA pill remains readable. */ .hero-banner::before, .hero-banner::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; } .hero-banner::before { top: 0; height: 28%; background: linear-gradient(180deg, var(--bg) 0%, transparent 100%); } .hero-banner::after { bottom: 0; height: 50%; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 65%, var(--bg) 100%); } .hero-banner-overlay { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .hero-banner-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cream); padding: 6px 16px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); border: 1px solid rgba(94, 233, 227, 0.3); border-radius: 999px; } .hero-banner-overlay .btn { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(94, 233, 227, 0.3); } @media (max-width: 768px) { /* Show the WHOLE banner image (including 'ZONEFORTEEN' text) instead of cropping. Tall aspect + object-fit:contain preserves every player and the brand wordmark. Black letterbox blends with the surrounding hero background. */ .hero-banner { aspect-ratio: 16 / 11; max-height: none; background: #050a0e; } .hero-banner-art img { object-fit: contain; } .hero-banner-tag { font-size: 10px; letter-spacing: 0.15em; padding: 5px 12px; } .hero-banner-overlay { bottom: 4%; gap: 10px; } } @media (max-width: 480px) { .hero-banner { aspect-ratio: 16 / 13; } .hero-banner-overlay .btn { padding: 12px 22px; font-size: 13px; } } /* ============ SECTIONS ============ */ .section { padding: 120px 0; position: relative; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.25em; color: var(--neon); margin-bottom: 16px; text-transform: uppercase; position: relative; padding: 4px 14px; background: rgba(94, 233, 227, 0.08); border-radius: 999px; } .section-title { font-family: 'Bohemian Typewriter', sans-serif; font-size: clamp(36px, 5.5vw, 68px); line-height: 1; letter-spacing: 0.02em; margin-bottom: 16px; } .section-sub { color: var(--text-dim); font-size: clamp(14px, 1.2vw, 16px); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* Lenis smooth (momentum) scrolling — only active once JS attaches .lenis */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ============ JERSEYS ============ */ .section-jerseys { background: linear-gradient(180deg, var(--bg) 0%, #0c0c0c 100%); } .jersey-filter { display: flex; justify-content: center; gap: 10px; margin-bottom: 48px; flex-wrap: wrap; } .chip { padding: 10px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: all 0.3s var(--ease); } .chip:hover { color: var(--text); border-color: rgba(94, 233, 227, 0.4); } .chip.active { background: var(--grad-neon); color: #000; border-color: transparent; box-shadow: 0 4px 16px -4px rgba(94, 233, 227, 0.5); } .jersey-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; } .jersey-card { position: relative; background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.5s var(--ease-out); perspective: 1000px; display: flex; flex-direction: column; } .jersey-card.hide { display: none; } .jersey-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; background: linear-gradient(135deg, rgba(94, 233, 227, 0) 0%, rgba(94, 233, 227, 0.5) 50%, rgba(0, 212, 255, 0) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .jersey-card:hover { transform: translateY(-8px); border-color: rgba(94, 233, 227, 0.3); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(94, 233, 227, 0.2); } .jersey-card:hover::before { opacity: 1; } .jersey-card:hover .jersey-img-wrap { transform: scale(1.05) rotateY(8deg); } .jersey-card:hover .jersey-shine { transform: translateX(100%); } .jersey-img-wrap { position: relative; aspect-ratio: 1 / 1.05; background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%); display: grid; place-items: center; overflow: hidden; transition: transform 0.6s var(--ease-out); transform-style: preserve-3d; } .jersey-img-wrap svg { width: 80%; height: 80%; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); } .jersey-tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; z-index: 2; } .jersey-tag.home { color: var(--neon); border-color: rgba(94, 233, 227, 0.3); } .jersey-tag.away { color: var(--blue); border-color: rgba(0, 212, 255, 0.3); } .jersey-tag.retro { color: var(--gold); border-color: rgba(255, 215, 0, 0.3); } /* Stock badge — top-right of the image area */ .stock-badge { position: absolute; top: 14px; right: 14px; padding: 5px 10px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; z-index: 2; display: inline-flex; align-items: center; gap: 5px; } .stock-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .stock-badge.ok { color: #5ee9e3; border: 1px solid rgba(94, 233, 227, 0.35); } .stock-badge.low { color: #ffb547; border: 1px solid rgba(255, 181, 71, 0.35); animation: pulseBadge 1.6s infinite; } .stock-badge.oos { color: #ff6b6b; border: 1px solid rgba(255, 107, 107, 0.4); } .stock-badge.soon { color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.45); background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(94, 233, 227, 0.08)); } /* Coming-soon card has a subtle gold border + slight image desaturation */ .jersey-card.coming-soon { border-color: rgba(255, 215, 0, 0.25); } .jersey-card.coming-soon .jersey-img-wrap svg { filter: saturate(0.85) brightness(0.92); } @keyframes pulseBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Out of stock — desaturate the kit, stamp the diagonal banner */ .jersey-card.out-of-stock .jersey-img-wrap svg { filter: grayscale(0.7) brightness(0.65); } .oos-stamp { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg); padding: 8px 22px; background: rgba(122, 31, 43, 0.92); color: #fff; font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.2em; border: 2px solid #fff; border-radius: 4px; text-transform: uppercase; z-index: 3; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); white-space: nowrap; pointer-events: none; } .jersey-card.out-of-stock .size-btn { opacity: 0.4; pointer-events: none; } .jersey-card.out-of-stock:hover .jersey-img-wrap { transform: none; } .jersey-order.notify { background: linear-gradient(135deg, #2a2f3a 0%, #1a1f28 100%); color: var(--text); border: 1px solid rgba(94, 233, 227, 0.25); } .jersey-order.notify:hover { background: linear-gradient(135deg, #3a4150 0%, #1a1f28 100%); border-color: rgba(94, 233, 227, 0.5); box-shadow: 0 8px 20px -6px rgba(94, 233, 227, 0.3); } .jersey-shine { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.8s var(--ease-out); pointer-events: none; z-index: 1; } .jersey-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .jersey-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .jersey-country { font-family: 'Bohemian Typewriter', sans-serif; font-size: 26px; line-height: 1; letter-spacing: 0.02em; } .jersey-price { font-family: 'Bohemian Typewriter', sans-serif; font-size: 24px; color: var(--neon); white-space: nowrap; } .size-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } /* Country-name text painted with the country's flag gradient. IMPORTANT: never use text-shadow on background-clip:text elements — on mobile browsers (iOS Safari, Android Chrome) the shadow renders the original letter shapes in solid color OVER the gradient, masking the colors. Use filter:drop-shadow instead (applies to the actual rendered pixels, not the underlying text). */ .flag-text { background-clip: text; -webkit-background-clip: text; color: transparent; /* spec-correct */ -webkit-text-fill-color: transparent; /* Safari fallback */ background-color: var(--text); /* fallback if background-clip unsupported */ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); letter-spacing: 0.03em; } .size-btn { height: 34px; padding: 0 2px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); color: var(--text-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; transition: all 0.2s var(--ease); } .size-btn:hover { border-color: var(--neon); color: var(--text); } .size-btn.active { background: var(--grad-neon); color: #000; border-color: transparent; box-shadow: 0 4px 12px -4px rgba(94, 233, 227, 0.5); } .jersey-order { margin-top: auto; width: 100%; padding: 12px; background: #25d366; color: #fff; font-weight: 700; border-radius: 10px; font-size: 13px; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s var(--ease); text-transform: uppercase; } .jersey-order:hover { background: #1ebe5d; box-shadow: 0 8px 20px -6px rgba(37, 211, 102, 0.5); } .jersey-order svg { flex-shrink: 0; } /* ============ TRUST GRID ============ */ .section-why { background: linear-gradient(180deg, #0c0c0c 0%, var(--bg) 100%); } .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .trust-card { padding: 32px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.4s var(--ease); position: relative; overflow: hidden; } .trust-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(94, 233, 227, 0.08), transparent 70%); opacity: 0; transition: opacity 0.4s var(--ease); } .trust-card:hover { transform: translateY(-6px); border-color: rgba(94, 233, 227, 0.25); background: rgba(94, 233, 227, 0.02); } .trust-card:hover::after { opacity: 1; } .trust-ico { font-size: 36px; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(94, 233, 227, 0.3)); } .trust-card h3 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.03em; margin-bottom: 8px; } .trust-card p { color: var(--text-dim); font-size: 14px; line-height: 1.6; } /* ============ OFFERS ============ */ .section-offers { background: var(--bg); position: relative; overflow: hidden; } .section-offers::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgba(255, 215, 0, 0.08), transparent 60%); filter: blur(60px); pointer-events: none; } .offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; position: relative; } .offer-card { padding: 36px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; text-align: center; transition: all 0.4s var(--ease); display: flex; flex-direction: column; gap: 14px; } .offer-card:hover { transform: translateY(-6px); border-color: rgba(94, 233, 227, 0.3); } .offer-featured { background: linear-gradient(135deg, rgba(94, 233, 227, 0.06), rgba(0, 212, 255, 0.04)); border-color: rgba(94, 233, 227, 0.25); box-shadow: 0 0 40px -10px rgba(94, 233, 227, 0.3); } .offer-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; background: var(--grad-neon); color: #000; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; border-radius: 999px; text-transform: uppercase; } .offer-card h3 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 32px; letter-spacing: 0.02em; margin-top: 8px; } .offer-card p { color: var(--text-dim); font-size: 14px; min-height: 42px; } .offer-price { font-family: 'Bohemian Typewriter', sans-serif; font-size: 26px; color: var(--neon); margin: 6px 0 14px; } .offer-price .strike { color: var(--text-mute); text-decoration: line-through; font-size: 18px; margin-right: 8px; } .offer-card .btn { width: 100%; margin-top: auto; } /* ============================================================ MATCH HUB ============================================================ */ .section-matches { background: linear-gradient(180deg, var(--bg) 0%, #080d12 100%); position: relative; overflow: hidden; } .section-matches::before { content: ''; position: absolute; top: 10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(94, 233, 227, 0.06), transparent 60%); filter: blur(60px); pointer-events: none; } /* Featured next match — big card */ .match-featured { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 36px 40px; margin-bottom: 36px; background: radial-gradient(ellipse at center, rgba(94, 233, 227, 0.06) 0%, transparent 70%), linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(94, 233, 227, 0.25); border-radius: var(--radius-lg); backdrop-filter: blur(20px); box-shadow: 0 0 60px -20px rgba(94, 233, 227, 0.4); overflow: hidden; } .match-featured::before { content: 'NEXT KICK-OFF'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: var(--grad-neon); color: #052424; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; border-radius: 999px; } .mf-team { display: flex; flex-direction: column; align-items: center; gap: 12px; } .mf-team.away { align-items: center; } .mf-flag { width: 110px; height: 76px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; background: #0c1217; } .mf-flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .mf-flag::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 50%); pointer-events: none; z-index: 1; } .mf-name { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.04em; } .mf-center { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; } .mf-vs { font-family: 'Bohemian Typewriter', sans-serif; font-size: 36px; color: var(--text-mute); line-height: 1; } .mf-countdown { display: flex; gap: 6px; padding: 12px 16px; background: rgba(5, 10, 14, 0.7); border: 1px solid var(--border); border-radius: 12px; } .mf-cd-box { display: flex; flex-direction: column; align-items: center; min-width: 42px; } .mf-cd-num { font-family: 'Bohemian Typewriter', sans-serif; font-size: 24px; line-height: 1; color: var(--neon); font-variant-numeric: tabular-nums; } .mf-cd-lbl { font-size: 8px; letter-spacing: 0.15em; color: var(--text-mute); margin-top: 4px; text-transform: uppercase; } .mf-cd-sep { color: var(--text-mute); font-size: 18px; line-height: 24px; margin: 0 -2px; } .mf-meta { font-size: 11px; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } .mf-meta strong { color: var(--text); font-weight: 600; } .mf-actions { display: flex; gap: 8px; margin-top: 4px; } .mf-actions .btn { padding: 8px 14px; font-size: 12px; } /* Tabs */ .match-tabs { display: flex; gap: 6px; padding: 6px; margin: 0 auto 36px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: blur(20px); max-width: max-content; } .match-tab { padding: 10px 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); border-radius: 999px; transition: all 0.3s var(--ease); } .match-tab:hover { color: var(--text); } .match-tab.active { background: var(--grad-neon); color: #052424; box-shadow: 0 4px 14px -4px rgba(94, 233, 227, 0.5); } .match-panel { animation: fadeInUp 0.5s var(--ease-out); } /* Fixture grid */ .match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; } .match-card { position: relative; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 16px; transition: all 0.3s var(--ease); } .match-card:hover { transform: translateY(-4px); border-color: rgba(94, 233, 227, 0.3); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6); } .match-card.has-jersey { border-color: rgba(94, 233, 227, 0.2); } .mc-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; } .mc-head .mc-stage { color: var(--neon); font-weight: 700; } .mc-head .mc-date { color: var(--text-dim); } .mc-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .mc-team { display: flex; flex-direction: column; align-items: center; gap: 8px; } .mc-flag { width: 68px; height: 46px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; background: #0c1217; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .mc-flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .mc-flag::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 60%); z-index: 1; } /* Never-blank fallback: colored country-code chip when no flag image exists. Fills whatever flag container it sits in (.mf-flag / .mc-flag / mini-flag). */ .flag-code { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Bohemian Typewriter', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; line-height: 1; } .group-table .team-mini-flag .flag-code { font-size: 9px; } .mc-team-name { font-family: 'Bohemian Typewriter', sans-serif; font-size: 14px; letter-spacing: 0.04em; text-align: center; } .mc-vs { font-family: 'Bohemian Typewriter', sans-serif; color: var(--text-mute); font-size: 18px; } .mc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--border); } .mc-venue { font-size: 11px; color: var(--text-mute); line-height: 1.4; flex: 1; } .mc-venue strong { color: var(--text-dim); display: block; font-weight: 600; font-size: 12px; } .mc-countdown-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: rgba(94, 233, 227, 0.08); color: var(--neon); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: 1px solid rgba(94, 233, 227, 0.25); white-space: nowrap; } .mc-actions { display: flex; gap: 8px; } .mc-ico-btn { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); transition: all 0.2s var(--ease); } .mc-ico-btn:hover { background: var(--grad-neon); color: #052424; border-color: transparent; transform: translateY(-1px); } /* Group standings */ .groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .group-card { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); } .group-card h3 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.06em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .group-card h3 .grp-badge { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--grad-neon); color: #052424; border-radius: 8px; font-size: 16px; font-weight: 800; } .group-table { width: 100%; border-collapse: collapse; font-size: 13px; } .group-table th { padding: 8px 6px; text-align: center; font-size: 10px; letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; border-bottom: 1px solid var(--border); } .group-table th:first-child { text-align: left; padding-left: 4px; } .group-table td { padding: 10px 6px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .group-table tr:last-child td { border-bottom: none; } .group-table td:first-child { text-align: left; padding-left: 4px; } .group-table .team-cell { display: flex; align-items: center; gap: 8px; } .group-table .team-mini-flag { width: 28px; height: 20px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.14); overflow: hidden; flex-shrink: 0; } .group-table .team-mini-flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .group-table .team-name { font-weight: 600; font-size: 13px; } .group-table tr.team-highlight td { background: rgba(94, 233, 227, 0.04); } .group-table tr.team-highlight .team-name { color: var(--neon); } .group-table td.pts { font-family: 'Bohemian Typewriter', sans-serif; font-size: 16px; color: var(--neon); } /* Venues */ .venues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .venue-card { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); transition: all 0.3s var(--ease); position: relative; overflow: hidden; } .venue-card:hover { transform: translateY(-4px); border-color: rgba(94, 233, 227, 0.3); } .venue-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(94, 233, 227, 0.08), transparent 70%); pointer-events: none; } .venue-host-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border); border-radius: 999px; font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 14px; } .venue-host-pill .vp-flag { width: 20px; height: 14px; border-radius: 2px; display: inline-block; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); } .venue-host-pill .vp-flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .venue-card h3 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.04em; margin-bottom: 4px; line-height: 1.1; } .venue-card .v-city { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; } .venue-card .v-cap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mute); letter-spacing: 0.05em; } .venue-card .v-cap strong { font-family: 'Bohemian Typewriter', sans-serif; font-size: 16px; color: var(--neon); letter-spacing: 0.04em; } /* Match-day flash strip (top of page) */ .matchday-strip { position: relative; z-index: 99; padding: 10px 16px; background: linear-gradient(90deg, #1d6b3a, #0f4524 50%, #1d6b3a); color: var(--cream); font-size: 13px; text-align: center; font-weight: 600; letter-spacing: 0.02em; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(94, 233, 227, 0.25); animation: stripShine 6s linear infinite; background-size: 200% 100%; } .matchday-strip[hidden] { display: none; } .matchday-strip strong { color: var(--neon); } .matchday-strip a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(94, 233, 227, 0.4); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--neon); letter-spacing: 0.05em; } .matchday-strip a:hover { background: rgba(94, 233, 227, 0.2); } @keyframes stripShine { from { background-position: 0% 0; } to { background-position: 200% 0; } } @media (max-width: 768px) { .match-featured { grid-template-columns: 1fr; text-align: center; padding: 32px 22px 26px; } .match-featured::before { top: 10px; } .mf-flag { width: 72px; height: 72px; font-size: 26px; } .mf-vs { display: none; } .mf-center { order: -1; } .match-tab { padding: 8px 14px; font-size: 12px; } } /* ============ REVIEWS ============ */ .section-reviews { background: linear-gradient(180deg, var(--bg) 0%, #0c0c0c 100%); } .reviews-wrap { position: relative; display: flex; align-items: center; gap: 16px; } .reviews-viewport { flex: 1; overflow: hidden; } .reviews-track { display: flex; gap: 24px; transition: transform 0.6s var(--ease-out); } /* Floating marquee mode — cards drift right→left continuously. JS clones the card list once so the loop seams perfectly (the second set starts exactly where the first ended). Hovering pauses for readability. Manual arrow clicks also pause autoplay. */ .reviews-track.is-floating { animation: reviews-float var(--marquee-duration, 60s) linear infinite; transition: none; will-change: transform; } .reviews-track.is-floating:hover, .reviews-track.is-floating.is-paused { animation-play-state: paused; } @keyframes reviews-float { from { transform: translateX(0); } to { transform: translateX(-50%); } /* exactly the first half (= 1 clone) */ } @media (prefers-reduced-motion: reduce) { .reviews-track.is-floating { animation: none; } } .review-card { flex: 0 0 calc(33.333% - 16px); padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 14px; min-height: 220px; } .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; } .review-card p { color: var(--text-dim); font-size: 14px; line-height: 1.7; flex: 1; font-style: italic; } .review-card footer { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding-top: 14px; } .review-card strong { font-family: 'Bohemian Typewriter', sans-serif; font-size: 18px; letter-spacing: 0.04em; } .review-card span { font-size: 12px; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; } /* Real-review polish: avatars, verified badges, purchase + location footer */ .rv-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; } .rv-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-family: 'Bohemian Typewriter', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.05em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); } .rv-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rv-meta strong { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--text); } .rv-sub { font-size: 11px; color: var(--text-mute); letter-spacing: 0.02em; text-transform: none; } .rv-verified { color: #51e0a4; font-weight: 600; } .rv-head .stars { font-size: 14px; letter-spacing: 1px; color: var(--gold); align-self: center; } .rv-body { color: var(--text-dim); font-size: 14px; line-height: 1.65; flex: 1; font-style: normal !important; /* override italic from generic p rule above */ margin-bottom: 12px; } .rv-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--border); padding-top: 12px; } .rv-foot .rv-buy { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--neon); text-transform: uppercase; } .rv-foot .rv-loc { font-size: 11px; color: var(--text-mute); letter-spacing: 0; text-transform: none; } .review-nav { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 22px; display: grid; place-items: center; transition: all 0.3s var(--ease); flex-shrink: 0; z-index: 2; } .review-nav:hover { background: var(--grad-neon); color: #000; border-color: transparent; transform: scale(1.1); } /* ============ SIZE GUIDE ============ */ .section-size { background: var(--bg); } .size-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; max-width: 960px; margin: 0 auto; padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); } /* 3D Jersey Viewer */ .size-3d { display: flex; flex-direction: column; gap: 16px; } .size-3d-stage { position: relative; aspect-ratio: 4 / 5; width: 100%; background: radial-gradient(ellipse at center 40%, rgba(94, 233, 227, 0.08) 0%, transparent 60%), linear-gradient(180deg, #0a1218 0%, #050a0e 100%); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; } .size-3d-stage.dragging { cursor: grabbing; } .size-3d-stage.loaded .size-3d-loading, .size-3d-stage.loaded .size-3d-fallback { display: none; } .size-3d-stage.fallback canvas, .size-3d-stage.fallback .size-3d-hud, .size-3d-stage.fallback .size-3d-hint, .size-3d-stage.fallback .size-3d-loading { display: none; } .size-3d-stage.fallback .size-3d-fallback { display: block; } .size-3d-stage canvas { display: block; width: 100% !important; height: 100% !important; } .size-3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; } .size-3d-loading span { width: 10px; height: 10px; border-radius: 50%; background: var(--neon); animation: dotPulse 1.2s infinite ease-in-out; } .size-3d-loading span:nth-child(2) { animation-delay: 0.15s; } .size-3d-loading span:nth-child(3) { animation-delay: 0.30s; } @keyframes dotPulse { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .size-3d-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 18px; } /* Floating HUD with size / chest / length */ .size-3d-hud { position: absolute; top: 12px; left: 12px; padding: 10px 12px; background: rgba(5, 10, 14, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 10px; font-size: 11px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: 2; min-width: 100px; } .hud-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .hud-lbl { color: var(--text-mute); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .hud-val { color: var(--neon); font-family: 'Bohemian Typewriter', sans-serif; font-size: 14px; letter-spacing: 0.04em; } /* Drag hint */ .size-3d-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(5, 10, 14, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); pointer-events: none; z-index: 2; transition: opacity 0.6s var(--ease); } .size-3d-stage.interacted .size-3d-hint { opacity: 0; } /* Size chips for the 3D viewer */ .size-3d-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .size-3d-chip { padding: 10px 0; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; transition: all 0.2s var(--ease); } .size-3d-chip:hover { border-color: rgba(94, 233, 227, 0.45); color: var(--text); } .size-3d-chip.active { background: var(--grad-neon); color: #052424; border-color: transparent; box-shadow: 0 4px 14px -4px rgba(94, 233, 227, 0.5); } /* Highlight the row in the size table that matches the selected 3D size */ .size-table tr.size-active td { background: rgba(94, 233, 227, 0.08); color: var(--text); } .size-table tr.size-active td:first-child strong { color: var(--neon); } .size-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .size-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; } .size-table th, .size-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .size-table th { font-family: 'Bohemian Typewriter', sans-serif; font-size: 13px; letter-spacing: 0.15em; color: var(--neon); text-transform: uppercase; border-bottom: 2px solid rgba(94, 233, 227, 0.3); } .size-table tr:hover td { background: rgba(94, 233, 227, 0.04); } .size-table td:first-child strong { font-family: 'Bohemian Typewriter', sans-serif; font-size: 18px; color: var(--text); } .size-note { margin-top: 14px; font-size: 13px; color: var(--text-mute); font-style: italic; } /* ============ HOW TO ORDER ============ */ .section-how { background: linear-gradient(180deg, var(--bg) 0%, #0c0c0c 100%); position: relative; } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; position: relative; } .step-card { padding: 36px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-align: center; position: relative; transition: all 0.4s var(--ease); } .step-card:hover { transform: translateY(-6px); border-color: rgba(94, 233, 227, 0.3); } .step-num { position: absolute; top: 16px; right: 24px; font-family: 'Bohemian Typewriter', sans-serif; font-size: 64px; color: rgba(94, 233, 227, 0.08); line-height: 1; } .step-ico { font-size: 48px; margin-bottom: 16px; } .step-card h3 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.04em; margin-bottom: 10px; } .step-card p { color: var(--text-dim); font-size: 14px; } /* ============ FAQ ============ */ .section-faq { background: var(--bg); } .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.3s var(--ease); backdrop-filter: blur(20px); } .faq-item[open] { border-color: rgba(94, 233, 227, 0.3); background: rgba(94, 233, 227, 0.02); } .faq-item summary { padding: 20px 24px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color 0.3s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--neon); } .faq-icon { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(94, 233, 227, 0.1); color: var(--neon); border-radius: 50%; font-weight: 700; font-size: 18px; flex-shrink: 0; transition: transform 0.3s var(--ease); } .faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--grad-neon); color: #000; } .faq-body { padding: 0 24px 22px; color: var(--text-dim); font-size: 14px; line-height: 1.7; animation: fadeInUp 0.4s var(--ease-out); } /* ============ FOOTER ============ */ .footer { background: #050505; border-top: 1px solid var(--border); padding-top: 80px; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; padding-bottom: 60px; } .footer-col h4 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 18px; letter-spacing: 0.15em; color: var(--neon); margin-bottom: 18px; text-transform: uppercase; } .footer-col a { display: block; font-size: 14px; color: var(--text-dim); padding: 5px 0; transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--neon); } .footer-col p { font-size: 14px; color: var(--text-dim); margin-bottom: 8px; } .footer-brand .logo { margin-bottom: 18px; } .footer-crest { display: inline-block; margin-bottom: 22px; filter: drop-shadow(0 0 14px rgba(94, 233, 227, 0.25)); transition: transform 0.4s var(--ease), filter 0.4s var(--ease); } .footer-crest:hover { transform: translateY(-3px); filter: drop-shadow(0 0 22px rgba(94, 233, 227, 0.55)); } .footer-crest img { display: block; width: 130px; height: auto; } .footer-brand > p { color: var(--text-dim); font-size: 14px; max-width: 360px; margin-bottom: 20px; } .socials { display: flex; gap: 12px; } .socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); padding: 0; transition: all 0.3s var(--ease); } .socials a:hover { background: var(--grad-neon); color: #000; border-color: transparent; transform: translateY(-3px); } .footer-bottom { border-top: 1px solid var(--border); padding: 24px 0; text-align: center; } .footer-bottom p { font-size: 13px; color: var(--text-mute); } .footer-bottom .dot { margin: 0 10px; color: var(--neon); } /* ============ FLOATING BUTTONS ============ */ .float-whatsapp, .float-messenger, .float-instagram { position: fixed; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 50; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: transform 0.3s var(--ease); } .float-whatsapp { bottom: 24px; right: 24px; background: #25d366; } .float-messenger { bottom: 92px; right: 24px; background: linear-gradient(135deg, #0084ff, #00c6ff); } .float-instagram { bottom: 160px; right: 24px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .float-whatsapp:hover, .float-messenger:hover, .float-instagram:hover { transform: scale(1.1) rotate(-8deg); } .wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25d366; animation: waPulse 2s infinite; z-index: -1; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } } /* Floating cart pill */ .cart-pill { position: fixed; bottom: 298px; right: 24px; height: 48px; min-width: 48px; padding: 0 14px 0 12px; display: none; align-items: center; gap: 8px; background: var(--grad-neon); color: #052424; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(94, 233, 227, 0.6); z-index: 50; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); font-weight: 700; } .cart-pill.show { display: inline-flex; animation: cartPop 0.4s var(--ease-out); } .cart-pill:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px -8px rgba(94, 233, 227, 0.8); } .cart-count { font-family: 'Bohemian Typewriter', sans-serif; font-size: 18px; line-height: 1; } @keyframes cartPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } /* Newsletter */ .section-newsletter { padding: 100px 0 60px; background: linear-gradient(180deg, var(--bg) 0%, #050a0e 100%); position: relative; overflow: hidden; } .section-newsletter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 20% 50%, rgba(94, 233, 227, 0.08), transparent 60%), radial-gradient(600px 300px at 80% 50%, rgba(29, 107, 58, 0.08), transparent 60%); pointer-events: none; } .newsletter-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 56px 48px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); box-shadow: 0 0 60px -20px rgba(94, 233, 227, 0.25); } .nl-text .section-title { text-align: left; margin-bottom: 16px; } .nl-text .section-sub { text-align: left; } .nl-text .eyebrow { margin-bottom: 12px; } .nl-form { width: 100%; } .nl-row { display: flex; gap: 10px; background: rgba(0, 0, 0, 0.4); padding: 8px; border-radius: 999px; border: 1px solid var(--border); } .nl-row input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); padding: 0 18px; font-size: 15px; } .nl-row input::placeholder { color: var(--text-mute); } .nl-row .btn { flex-shrink: 0; } .nl-note { font-size: 12px; color: var(--text-mute); margin-top: 12px; text-align: center; } .nl-success { display: none; font-size: 14px; color: var(--neon); margin-top: 12px; text-align: center; font-weight: 600; } .nl-success.show { display: block; animation: fadeInUp 0.4s var(--ease-out); } @media (max-width: 768px) { .newsletter-wrap { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; } .nl-row { flex-direction: column; padding: 12px; border-radius: 18px; } .nl-row input { padding: 12px 6px; text-align: center; } .nl-row .btn { width: 100%; } .cart-pill { bottom: 220px; } } .back-to-top { position: fixed; bottom: 228px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(20px); color: var(--neon); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(20px); transition: all 0.3s var(--ease); z-index: 50; } .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--grad-neon); color: #000; border-color: transparent; } /* ============ RESPONSIVE ============ */ @media (max-width: 968px) { .footer-inner { grid-template-columns: 1fr 1fr; } .review-card { flex: 0 0 calc(50% - 12px); } .size-wrap { grid-template-columns: 1fr; padding: 28px; gap: 28px; } .size-3d { max-width: 320px; margin: 0 auto; width: 100%; } } @media (max-width: 768px) { .section { padding: 80px 0; } .section-head { margin-bottom: 40px; } /* Mobile navbar — logo centered, hamburger floats right */ .nav-inner { justify-content: center; position: relative; } .logo { margin: 0 auto; } .nav-cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); gap: 0; } .nav-cta .btn-whatsapp { display: none; } .hamburger { display: flex; } .nav-links { position: fixed; top: var(--nav-h); right: 0; width: 80%; max-width: 320px; height: calc(100vh - var(--nav-h)); background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; padding: 40px 28px; gap: 8px; transform: translateX(100%); transition: transform 0.4s var(--ease-out); border-left: 1px solid var(--border); } .nav-links.active { transform: translateX(0); } .nav-links a { width: 100%; padding: 16px 0; font-size: 18px; border-bottom: 1px solid var(--border); } .nav-links a::after { display: none; } .hero { padding: 100px 0 80px; } .hero-title { font-size: clamp(40px, 12vw, 80px); } /* Centred logo splash on phones only (desktop keeps the full-cover poster). */ .hero-poster { inset: auto; top: 44%; left: 50%; transform: translate(-50%, -50%); width: min(86vw, 460px); height: auto; object-fit: contain; object-position: center; opacity: 0.82; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.5)); transition: opacity 1s ease, transform 1s ease; } .hero-poster.dimming { opacity: 0.6; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.5)); } .hero-poster.fade-out { opacity: 0; transform: translate(-50%, -50%) scale(1.04); } /* Watermark: bigger leftward nudge on mobile — the logo in the image is inherently right-of-centre, so we push harder than desktop's 1.1%. */ .hero-watermark { width: 145vw; opacity: 0.26; transform: translate(calc(-50% - 5%), -50%); animation-name: watermarkBreathMobile; } .logo-mark { height: 80px; } .countdown { padding: 14px 18px; gap: 4px; } .cd-box { min-width: 48px; } .cd-num { font-size: 28px; } .cd-sep { font-size: 20px; } .hero-stats { gap: 32px; } .hero-stats strong { font-size: 28px; } .jersey-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .review-card { flex: 0 0 100%; } .footer-inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; } .float-whatsapp, .float-messenger { width: 52px; height: 52px; } .float-messenger { bottom: 88px; } .back-to-top { bottom: 152px; width: 44px; height: 44px; } } @media (max-width: 480px) { .container { padding: 0 18px; } .hero-cta { flex-direction: column; width: 100%; } .hero-cta .btn { width: 100%; } .jersey-grid { grid-template-columns: 1fr; } .countdown { transform: scale(0.9); } } /* ============================================================ ORDER / CHECKOUT PAGE ============================================================ */ .page-order { background: radial-gradient(800px 600px at 50% -10%, rgba(94, 233, 227, 0.08), transparent 60%), var(--bg); min-height: 100vh; } .order-nav { background: rgba(10, 14, 18, 0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); height: 84px; } .order-nav .nav-inner { justify-content: space-between; } .order-nav .logo-mark { height: 76px; } .order-nav .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 14px; font-weight: 600; transition: color 0.2s var(--ease); } .order-nav .back-link:hover { color: var(--neon); } .checkout { padding: 124px 0 80px; } .checkout-head { margin-bottom: 32px; } .checkout-head .section-title { font-size: clamp(36px, 4.5vw, 56px); text-align: left; } .breadcrumb { list-style: none; display: flex; gap: 8px; font-size: 12px; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 12px; } .breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 8px; color: var(--text-mute); } .breadcrumb a { color: var(--text-dim); transition: color 0.2s var(--ease); } .breadcrumb a:hover { color: var(--neon); } .breadcrumb li:last-child { color: var(--neon); font-weight: 600; } .checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: flex-start; } /* Form */ .checkout-form { display: flex; flex-direction: column; gap: 24px; } .form-block { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); } .block-title { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.06em; margin-bottom: 22px; display: flex; align-items: center; gap: 14px; text-transform: uppercase; } .step-pill { display: grid; place-items: center; width: 32px; height: 32px; background: var(--grad-neon); color: #052424; border-radius: 50%; font-size: 14px; font-weight: 800; font-family: 'Inter', sans-serif; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .form-row.full { grid-template-columns: 1fr; } .form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; } .form-row .req { color: #ff6b6b; margin-left: 3px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 12px 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; letter-spacing: 0; font-family: inherit; font-weight: 400; transition: all 0.2s var(--ease); } .form-row textarea { resize: vertical; min-height: 80px; } .form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-mute); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--neon); background: rgba(94, 233, 227, 0.04); box-shadow: 0 0 0 3px rgba(94, 233, 227, 0.15); } .form-row select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235ee9e3' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; } .form-row select option { background: #0c1217; color: var(--text); } .form-row .hint { font-size: 11px; color: var(--text-mute); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 4px; } /* Delivery options */ .delivery-options, .payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .payment-options { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* Mobile-banking instructions block (bKash / Nagad / Rocket) */ .pay-instructions { margin-top: 18px; padding: 16px; background: rgba(94, 233, 227, 0.06); border: 1px dashed rgba(94, 233, 227, 0.35); border-radius: 12px; } .pay-num-card { display: flex; flex-direction: column; gap: 6px; } .pay-num-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; } .pay-num-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pay-num { font-family: 'Courier Prime', 'Courier New', monospace; font-size: 22px; letter-spacing: 0.08em; color: var(--neon); text-shadow: 0 0 12px rgba(94, 233, 227, 0.35); } .copy-btn { padding: 6px 14px; background: rgba(94, 233, 227, 0.15); border: 1px solid rgba(94, 233, 227, 0.4); border-radius: 8px; color: var(--neon); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s var(--ease); } .copy-btn:hover { background: rgba(94, 233, 227, 0.25); } .pay-num-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; } .pay-num-hint strong { color: var(--text); font-weight: 700; } /* Bank Transfer details grid */ .bank-grid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; } .bank-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(0, 0, 0, 0.25); border-radius: 8px; font-size: 13px; } .bank-row > span { color: var(--text-mute); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .bank-row > strong { font-family: 'Courier Prime', 'Courier New', monospace; color: var(--text); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .bank-row { grid-template-columns: 1fr auto; } .bank-row > span { grid-column: 1 / -1; padding-bottom: 0; } } .opt-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s var(--ease); font-size: 13px; font-weight: 600; } .opt-card input { position: absolute; opacity: 0; pointer-events: none; } .opt-card .opt-ico { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border-radius: 8px; font-size: 18px; flex-shrink: 0; } .opt-card .opt-text { display: flex; flex-direction: column; gap: 2px; } .opt-card .opt-sub { font-size: 11px; color: var(--text-mute); font-weight: 400; letter-spacing: 0; } .opt-card:hover { border-color: rgba(94, 233, 227, 0.4); } .opt-card:has(input:checked) { border-color: var(--neon); background: rgba(94, 233, 227, 0.06); box-shadow: 0 0 0 2px rgba(94, 233, 227, 0.25); } .opt-card:has(input:checked) .opt-ico { background: var(--grad-neon); color: #052424; } /* Summary */ .order-summary { position: sticky; top: 96px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 18px; } .summary-title { font-family: 'Bohemian Typewriter', sans-serif; font-size: 22px; letter-spacing: 0.06em; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; } .summary-title .sum-count { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; } .cart-items { display: flex; flex-direction: column; gap: 12px; max-height: 380px; overflow-y: auto; padding-right: 4px; } .cart-empty { padding: 32px 12px; text-align: center; color: var(--text-mute); font-size: 14px; } .cart-empty a { color: var(--neon); font-weight: 600; } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: 12px; align-items: center; } .cart-item-img { width: 64px; height: 64px; background: #0a0f14; border-radius: 8px; display: grid; place-items: center; overflow: hidden; } .cart-item-img svg { width: 90%; height: 90%; } .cart-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cart-item-name { font-weight: 700; font-size: 13px; line-height: 1.2; } .cart-item-meta { font-size: 11px; color: var(--text-mute); letter-spacing: 0.05em; text-transform: uppercase; } .cart-item-controls { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .qty-btn { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer; transition: all 0.2s var(--ease); } .qty-btn:hover { border-color: var(--neon); color: var(--neon); } .qty-display { min-width: 24px; text-align: center; font-weight: 700; font-size: 13px; } .cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .cart-item-price { font-family: 'Bohemian Typewriter', sans-serif; font-size: 16px; color: var(--neon); } .cart-item-remove { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-mute); border-radius: 6px; transition: all 0.2s var(--ease); } .cart-item-remove:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.1); } /* Free shipping progress */ .ship-progress { padding: 14px; background: rgba(94, 233, 227, 0.04); border: 1px solid rgba(94, 233, 227, 0.2); border-radius: 10px; font-size: 12px; } .ship-progress.complete { background: rgba(29, 107, 58, 0.15); border-color: rgba(29, 107, 58, 0.4); } .ship-progress p { margin-bottom: 8px; color: var(--text-dim); } .ship-progress strong { color: var(--neon); } .ship-progress.complete strong { color: #51e0a4; } .ship-bar { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 999px; overflow: hidden; } .ship-bar-fill { height: 100%; background: var(--grad-neon); border-radius: 999px; transition: width 0.5s var(--ease-out); width: 0%; } /* Promo */ .promo-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .promo-row input { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .promo-row input::placeholder { color: var(--text-mute); letter-spacing: 0; text-transform: none; } .promo-row input:focus { outline: none; border-color: var(--neon); background: rgba(94, 233, 227, 0.04); } .promo-row button { padding: 0 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.2s var(--ease); } .promo-row button:hover { background: var(--grad-neon); color: #052424; border-color: transparent; } .promo-feedback { font-size: 12px; margin-top: -4px; min-height: 16px; } .promo-feedback.ok { color: #51e0a4; } .promo-feedback.bad { color: #ff6b6b; } /* Totals */ .totals { border-top: 1px dashed var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .totals-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); } .totals-row.discount { color: #51e0a4; } .totals-row.grand { font-family: 'Bohemian Typewriter', sans-serif; font-size: 28px; color: var(--text); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; letter-spacing: 0.04em; } .totals-row.grand span:last-child { color: var(--neon); } .place-order-btn { width: 100%; padding: 18px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--grad-neon); color: #052424; border-radius: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 10px 30px -10px rgba(94, 233, 227, 0.6); transition: all 0.3s var(--ease); } .place-order-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(94, 233, 227, 0.8); } .place-order-btn:disabled { opacity: 0.4; cursor: not-allowed; } .trust-row { display: flex; justify-content: space-around; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--border); } .trust-row > div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--text-mute); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; } .trust-row span { font-size: 18px; } .promo-hint { margin-top: 6px; font-size: 11px; color: var(--text-mute); } .promo-hint code { display: inline-block; padding: 2px 8px; background: rgba(94, 233, 227, 0.1); color: var(--neon); border-radius: 4px; font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.1em; margin: 0 2px; font-weight: 700; cursor: pointer; transition: background 0.2s; } .promo-hint code:hover { background: rgba(94, 233, 227, 0.2); } /* Order success modal */ .order-success { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 24px; animation: fadeInUp 0.3s var(--ease-out); } .order-success.show { display: flex; } .order-success-card { max-width: 460px; width: 100%; padding: 40px 32px; background: linear-gradient(180deg, #11181f 0%, #0a0f14 100%); border: 1px solid rgba(94, 233, 227, 0.3); border-radius: var(--radius); text-align: center; box-shadow: 0 30px 80px -20px rgba(94, 233, 227, 0.3); } .order-success-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--grad-neon); display: grid; place-items: center; color: #052424; font-size: 36px; box-shadow: 0 0 40px rgba(94, 233, 227, 0.5); } .order-success h3 { font-family: 'Bohemian Typewriter', sans-serif; font-size: 32px; letter-spacing: 0.04em; margin-bottom: 10px; } .order-success p { color: var(--text-dim); margin-bottom: 22px; font-size: 14px; line-height: 1.6; } .order-success .order-ref { display: inline-block; padding: 6px 14px; background: rgba(94, 233, 227, 0.1); color: var(--neon); border-radius: 8px; font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 20px; } /* ============================================================ PROMOTIONAL SALE — strikethrough prices, card flash, popup ============================================================ */ /* On-sale price on jersey cards: old price struck, new price in gold */ .jersey-price.on-sale { display: inline-flex; align-items: baseline; gap: 8px; } .jersey-price .price-was { font-size: 16px; color: var(--text-mute); text-decoration: line-through; text-decoration-thickness: 2px; } .jersey-price .price-now { color: var(--gold); } /* Quick-view price strikethrough */ .qv-price .price-was { color: var(--text-mute); text-decoration: line-through; text-decoration-thickness: 2px; margin-right: 8px; font-size: 0.7em; } .qv-price .price-now { color: var(--gold); } /* Cart-line struck original price (order page) */ .cart-item-price .ci-was { color: var(--text-mute); text-decoration: line-through; font-size: 0.82em; margin-right: 4px; } /* Corner "SALE −৳X" flash on cards */ .sale-flash { position: absolute; top: 12px; left: 12px; z-index: 4; padding: 5px 10px; background: var(--grad-gold); color: #2a1c00; font-family: 'Bebas Neue', 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; border-radius: 8px; box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35); animation: salePulse 2.4s ease-in-out infinite; } @keyframes salePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* ---- Sale popup overlay ---- */ .sale-popup { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 24px; } .sale-popup.show { display: flex; animation: fadeInUp 0.3s var(--ease-out); } .sale-popup-card { position: relative; max-width: 440px; width: 100%; padding: 40px 32px 28px; text-align: center; background: radial-gradient(600px 300px at 50% 0%, rgba(255, 215, 0, 0.16) 0%, transparent 65%), linear-gradient(180deg, #14110a 0%, #0a0f14 100%); border: 1px solid rgba(255, 215, 0, 0.35); border-radius: var(--radius-lg); box-shadow: 0 30px 90px -20px rgba(255, 215, 0, 0.3); animation: popIn 0.4s var(--ease-out); } @keyframes popIn { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .sale-popup-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .sale-popup-close:hover { color: var(--text); background: var(--surface-hi); transform: rotate(90deg); } .sale-popup-badge { display: inline-block; padding: 6px 14px; margin-bottom: 16px; background: var(--grad-gold); color: #2a1c00; font-family: 'Bebas Neue', 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; border-radius: 999px; } .sale-popup-title { font-family: 'Bohemian Typewriter', 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1.05; letter-spacing: 0.02em; margin-bottom: 12px; color: var(--gold); } .sale-popup-sub { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; } .sale-popup-timer { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; } .sale-popup-timer .sp-unit { min-width: 54px; padding: 10px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-mute); letter-spacing: 0.05em; } .sale-popup-timer .sp-unit b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 26px; line-height: 1; color: var(--text); margin-bottom: 3px; } .sale-popup-cta { width: 100%; } .sale-popup-dismiss { display: block; width: 100%; margin-top: 12px; background: none; border: none; color: var(--text-mute); font-size: 13px; cursor: pointer; transition: color 0.2s ease; } .sale-popup-dismiss:hover { color: var(--text-dim); } @media (max-width: 480px) { .sale-popup-card { padding: 34px 22px 24px; } .sale-popup-title { font-size: 28px; } .sale-popup-timer .sp-unit { min-width: 46px; } .sale-popup-timer .sp-unit b { font-size: 22px; } } /* ============================================================ HERO VIDEO BAND — caption-free autoplay strip under the hero ============================================================ */ .hero-video-band { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; } .hvb-viewport { max-width: 300px; margin: 0 auto; overflow: hidden; touch-action: pan-y; /* vertical page scroll still works; we handle horizontal */ border-radius: var(--radius-sm); } .hero-video-track { display: flex; transition: transform 0.55s var(--ease-out); /* smooth swap between videos */ will-change: transform; } .hero-video-slide { flex: 0 0 100%; display: flex; justify-content: center; } .hvb-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .hvb-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--surface-hi); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; } .hvb-dot.active { width: 20px; border-radius: 999px; background: var(--neon); } .hero-video-tile { position: relative; flex: 0 0 auto; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); box-shadow: var(--shadow-card); cursor: pointer; transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease; } .hero-video-tile:hover { transform: translateY(-4px) scale(1.02); border-color: var(--border-hi); box-shadow: var(--shadow-neon); } .hero-video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; /* clicks go to the button, not the