/* ============================================= CLUB SIREN — main.css Reset, CSS variables, typography, base layout ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; height: auto; } :root { /* Tell the browser (and Android system UI) this is a dark-themed page. Without this, Android Chrome keeps the system navigation bar white even when theme-color is dark. */ color-scheme: dark; /* Palette */ --cyan: #00d4ff; --cyan-dim: #0099cc; --blue: #0066ff; --blue-deep: #023e8a; --navy: #000820; --magenta: #ff00aa; --coral-pink: #ff6b6b; --white: #e8f4ff; /* Depth system (updated by JS) */ --depth: 0; /* Typography */ --font-display: 'Orbitron', 'Exo 2', sans-serif; --font-body: 'Rajdhani', 'Exo 2', sans-serif; /* Spacing */ --section-padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem); --max-width: 1100px; /* Neon glow effects */ --glow-cyan: 0 0 8px #00d4ff, 0 0 24px rgba(0,212,255,0.5), 0 0 48px rgba(0,212,255,0.2); --glow-blue: 0 0 8px #0066ff, 0 0 24px rgba(0,102,255,0.4); --glow-magenta: 0 0 8px #ff00aa, 0 0 24px rgba(255,0,170,0.4); } html { font-size: 16px; scroll-behavior: auto; /* Prevent horizontal overflow. Two declarations for progressive enhancement: - overflow-x: hidden is the universal fallback (Safari < 16, old Android) - overflow-x: clip is preferred on modern browsers — it clips visually without making a scroll container, which is the root cause of the Chrome/Edge bug where the native scrollbar handle sticks or stops tracking the mouse. Browsers that support clip use it; others silently fall back to hidden. */ overflow-x: hidden; overflow-x: clip; } /* Restore smooth anchor-link scrolling on desktop pointer devices that haven't asked for reduced motion. Scoping to (hover: hover) excludes iOS/Android touch browsers — they handle scroll via native momentum and don't need this. */ @media (prefers-reduced-motion: no-preference) and (hover: hover) { html { scroll-behavior: smooth; } } body { font-family: var(--font-body); color: var(--white); overflow-x: hidden; /* fallback for Safari < 16 */ overflow-x: clip; /* same as html — prevents forced overflow-y:auto second scrollbar */ background: var(--navy); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #000820; } ::-webkit-scrollbar-thumb { background: var(--cyan-dim); border-radius: 3px; } /* ---- Typography ---- */ h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.1; } h1 { font-size: clamp(2.4rem, 6vw, 5rem); } h2 { font-size: clamp(1.8rem, 4vw, 3rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); } p { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; color: rgba(232, 244, 255, 0.85); } a { color: var(--cyan); text-decoration: none; } /* ---- Neon text utility ---- */ .neon-text { color: var(--cyan); text-shadow: var(--glow-cyan); } .neon-text-magenta { color: var(--magenta); text-shadow: var(--glow-magenta); } /* ---- Neon button ---- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85em 2.2em; font-family: var(--font-display); font-size: clamp(0.85rem, 1.5vw, 1rem); text-transform: uppercase; letter-spacing: 0.18em; border-radius: 50px; border: 2px solid var(--cyan); color: var(--cyan); background: transparent; cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s; text-decoration: none; } .btn:hover, .btn:focus { background: var(--cyan); color: var(--navy); box-shadow: var(--glow-cyan); outline: none; } .btn--magenta { border-color: var(--magenta); color: var(--magenta); } .btn--magenta:hover { background: var(--magenta); color: var(--navy); box-shadow: var(--glow-magenta); } /* ---- Section wrapper ---- */ .section-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--section-padding); } /* ---- Section heading accent ---- */ .section-tag { display: block; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.35em; color: var(--cyan); text-transform: uppercase; margin-bottom: 0.6rem; opacity: 0.8; } /* ---- Divider ---- */ .neon-divider { width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); margin: 1.5rem auto; border: none; } /* ---- Scroll indicator (hero) ---- */ .scroll-indicator { position: absolute; bottom: 8rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; opacity: 1; animation: bounce 2s ease-in-out infinite; } .scroll-indicator--left { left: 18rem; } .scroll-indicator--right { right: 18rem; } .scroll-indicator span { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.3em; color: rgba(130, 80, 185, 0.90); text-shadow: 0 0 10px rgba(100, 30, 160, 0.55), 0 0 24px rgba(70, 10, 120, 0.30); } .scroll-indicator svg { width: 32px; height: 32px; stroke: rgba(120, 70, 175, 0.88); filter: drop-shadow(0 0 7px rgba(90, 20, 150, 0.60)) drop-shadow(0 0 18px rgba(60, 5, 110, 0.30)); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Tablet — pull indicators in from the far-edge 18rem desktop position */ @media (max-width: 900px) { .scroll-indicator--left { left: 5rem; } .scroll-indicator--right { right: 5rem; } } /* Small phones — hug the edges and scale down */ @media (max-width: 600px) { .scroll-indicator--left { left: 1rem; } .scroll-indicator--right { right: 1rem; } .scroll-indicator { bottom: 5rem; } .scroll-indicator span { font-size: 0.65rem; letter-spacing: 0.2em; } .scroll-indicator svg { width: 20px; height: 20px; } } /* overscroll-behavior-y: none was here to prevent Android rubber-band. Removed — the snap was fixed at the root (position:fixed #depth-bg eliminated, body gradient used instead, hero uses 100svh not 100dvh). Keeping it blocks pull-to-refresh on Android and it is no longer needed. */ /* Mobile scroll smoothness */ @media (max-width: 600px) { html, body { /* Tell the browser upfront that only vertical panning is needed — it can start scrolling immediately without waiting for JS touch handlers. */ touch-action: pan-y; /* Prevent the browser adjusting scroll position when content above the viewport changes size (e.g. stat counters counting up, bar animations). Without this, layout changes above the fold produce a visible "snap". */ overflow-anchor: none; } /* Replace the position:fixed #depth-bg compositor layer with a plain body gradient on mobile. A body background requires no separate GPU layer — it's composited as part of the normal scroll operation, eliminating the main source of compositor desync on Android (the "blue cut off at bottom"). The gradient naturally darkens with scroll depth: surface blue at the top of the page, deep navy at the bottom — same visual as the JS depth system. */ body { background: linear-gradient( to bottom, rgb(20, 120, 200) 0%, rgb(5, 60, 150) 35%, rgb(0, 35, 100) 60%, rgb(0, 10, 45) 82%, rgb(0, 4, 20) 100% ); /* background-size 100% 100% stretches the gradient across the full body height so each scroll position maps to a unique depth colour. */ background-size: 100% 100%; background-repeat: no-repeat; } }