/* =================================================== GameTwist Online — style.css Brand: Electric Blue #00B4E3 · Navy #04111F · Gold #FFD700 =================================================== */ /* Google Fonts loaded via in HTML for better performance */ /* @import removed — see in HTML */ /* === VARIABLES === */ :root { --blue: #00B4E3; --blue-bright: #00D4FF; --blue-dark: #0071BC; --blue-glow: rgba(0,180,227,0.18); --navy: #04111F; --navy-2: #081828; --navy-3: #0D2540; --navy-4: #122E50; --gold: #FFD700; --gold-2: #FFA500; --gold-glow: rgba(255,215,0,0.18); --red: #FF4D6A; --green: #00C853; --white: #FFFFFF; --text: #D8E8F4; --text-muted: #6A8EAA; --border: rgba(0,180,227,0.2); --radius: 14px; --radius-sm: 8px; --radius-xl: 24px; --shadow: 0 8px 40px rgba(0,0,0,0.5); --glow-blue: 0 0 30px rgba(0,180,227,0.3); --glow-gold: 0 0 30px rgba(255,215,0,0.25); --transition: 0.3s cubic-bezier(0.4,0,0.2,1); --font-h: 'Exo 2', sans-serif; --font-b: 'Inter', sans-serif; --max-w: 1240px; --header-h: 72px; } /* === RESET === */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; font-size:16px; } body { font-family: var(--font-b); background: var(--navy); color: var(--text); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img,svg { display:block; max-width:100%; height:auto; } a { color: var(--blue); text-decoration:none; transition:color var(--transition); } a:hover { color: var(--blue-bright); } ul { list-style:none; } button { cursor:pointer; border:none; background:none; font-family:var(--font-b); } input,select,textarea { font-family:var(--font-b); } /* === ACCESSIBILITY === */ .skip-nav { position:absolute; top:-100px; left:20px; z-index:9999; background:var(--blue); color:var(--navy); padding:10px 20px; border-radius:var(--radius-sm); font-weight:700; font-size:.875rem; transition:top .2s; } .skip-nav:focus { top:10px; } :focus-visible { outline:3px solid var(--blue-bright); outline-offset:3px; border-radius:3px; } :focus:not(:focus-visible) { outline:none; } /* === SCROLL PROGRESS === */ #scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--blue),var(--gold)); z-index:9999; transition:width .1s linear; } /* === CONTAINER === */ .container { max-width:var(--max-w); margin:0 auto; padding:0 24px; } .container-sm { max-width:760px; margin:0 auto; padding:0 24px; } .container-wide { max-width:1440px; margin:0 auto; padding:0 24px; } /* =================================================== HEADER & NAVIGATION =================================================== */ .site-header { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--header-h); background:rgba(4,17,31,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); transition:background var(--transition), box-shadow var(--transition); } .site-header.scrolled { background:rgba(4,17,31,0.98); box-shadow:var(--shadow); } .header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; } .logo img { height:44px; width:auto; } .logo a { display:flex; align-items:center; } /* Tracker link (desktop) */ .tracker-link { display:flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:white !important; padding:8px 18px; border-radius:50px; font-size:.8rem; font-weight:700; letter-spacing:.8px; transition:transform var(--transition), box-shadow var(--transition); white-space:nowrap; } .tracker-link:hover { transform:translateY(-2px); box-shadow:var(--glow-blue); color:white !important; } /* Desktop nav */ .nav-main { display:flex; align-items:center; gap:4px; } .nav-main a { color:var(--text-muted); font-size:.875rem; font-weight:500; padding:8px 14px; border-radius:10px; min-height:44px; display:flex; align-items:center; transition:color var(--transition), background var(--transition); white-space:nowrap; } .nav-main a:hover, .nav-main a.active { color:var(--blue-bright); background:var(--blue-glow); } .nav-main a.active { font-weight:600; } /* Auth buttons */ .nav-auth { display:flex; align-items:center; gap:8px; } .btn-login { color:var(--text); border:1px solid var(--border); padding:7px 16px; border-radius:10px; font-size:.8rem; font-weight:600; transition:border-color var(--transition), color var(--transition); } .btn-login:hover { border-color:var(--blue); color:var(--blue); } .btn-register { background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:white !important; padding:8px 18px; border-radius:10px; font-size:.8rem; font-weight:700; letter-spacing:.5px; transition:transform var(--transition), box-shadow var(--transition); } .btn-register:hover { transform:translateY(-2px); box-shadow:var(--glow-blue); } /* Hamburger */ .hamburger { display:none; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; border-radius:var(--radius-sm); transition:background var(--transition); } .hamburger:hover { background:var(--blue-glow); } .hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--transition), opacity var(--transition); } .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); } .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:rgba(4,17,31,0.98); backdrop-filter:blur(20px); padding:24px; overflow-y:auto; z-index:999; flex-direction:column; gap:8px; } .mobile-nav.open { display:flex; } .mobile-nav a { color:var(--text); font-size:1.1rem; font-weight:500; padding:14px 18px; border-radius:var(--radius-sm); border:1px solid transparent; transition:all var(--transition); display:block; } .mobile-nav a:hover, .mobile-nav a.active { color:var(--blue-bright); background:var(--blue-glow); border-color:var(--border); } .mobile-nav .tracker-mobile { margin-top:16px; padding:14px 18px; background:linear-gradient(135deg,var(--navy-3),var(--navy-4)); border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--blue-bright) !important; font-weight:700; display:block; text-align:center; } .mobile-nav .nav-divider { height:1px; background:var(--border); margin:8px 0; } .mobile-nav .mobile-auth { display:flex; gap:10px; margin-top:8px; } .mobile-nav .mobile-auth a { flex:1; text-align:center; } /* =================================================== HERO SECTIONS =================================================== */ .hero { position:relative; overflow:hidden; min-height:600px; display:flex; align-items:center; padding-top:calc(var(--header-h) + 40px); padding-bottom:60px; } .hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(4,17,31,.96) 0%, rgba(8,24,40,.85) 60%, rgba(4,17,31,.9) 100%); z-index:1; } .hero-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; } .hero-content { position:relative; z-index:2; } .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--blue-glow); border:1px solid var(--border); padding:6px 16px; border-radius:50px; font-size:.78rem; font-weight:600; color:var(--blue-bright); letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; } .hero h1 { font-family:var(--font-h); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; line-height:1.12; margin-bottom:20px; letter-spacing:-.5px; color:white; } .hero h1 span.gradient { background:linear-gradient(135deg,var(--blue-bright),var(--blue-dark)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero h1 span.gold { background:linear-gradient(135deg,var(--gold),var(--gold-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero p.lead { font-size:clamp(1rem,1.8vw,1.15rem); color:var(--text-muted); max-width:600px; margin-bottom:32px; } .hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } /* Page hero (non-homepage) */ .page-hero { position:relative; overflow:hidden; padding:calc(var(--header-h) + 56px) 0 56px; background:linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%); } .page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(to bottom, transparent, var(--navy)); z-index:1; pointer-events:none; } .page-hero-image { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.4; } .page-hero-content { position:relative; z-index:2; } .page-hero h1 { font-family:var(--font-h); font-size:clamp(1.9rem,4vw,3rem); font-weight:800; line-height:1.15; color:white; margin-bottom:14px; } .page-hero p { font-size:1.05rem; color:var(--text-muted); max-width:580px; } /* =================================================== BUTTONS =================================================== */ .btn { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:12px 28px; border-radius:12px; font-family:var(--font-h); font-size:.9rem; font-weight:700; letter-spacing:.5px; transition:all var(--transition); cursor:pointer; text-decoration:none; } .btn-primary { background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:white; box-shadow:0 4px 20px rgba(0,180,227,0.3); } .btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,180,227,.45); color:white; } .btn-gold { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:var(--navy); box-shadow:0 4px 20px rgba(255,215,0,.25); } .btn-gold:hover { transform:translateY(-3px); box-shadow:var(--glow-gold); color:var(--navy); } .btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border); padding:11px 26px; } .btn-outline:hover { border-color:var(--blue); color:var(--blue-bright); background:var(--blue-glow); } .btn-lg { padding:16px 38px; font-size:1rem; border-radius:14px; } .btn-sm { padding:8px 18px; font-size:.8rem; border-radius:8px; } /* =================================================== CARDS & PANELS =================================================== */ .card { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card:hover { transform:translateY(-4px); box-shadow:var(--glow-blue); border-color:rgba(0,180,227,.4); } .card-glass { background:rgba(8,24,40,0.7); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius); } .card-gold { border-color:rgba(255,215,0,.3); } .card-gold:hover { box-shadow:var(--glow-gold); border-color:rgba(255,215,0,.6); } /* Icon card */ .icon-card { text-align:center; } .icon-card .icon-wrap { width:64px; height:64px; border-radius:16px; background:var(--blue-glow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.8rem; transition:transform var(--transition), box-shadow var(--transition); } .icon-card:hover .icon-wrap { transform:scale(1.1) rotate(-5deg); box-shadow:var(--glow-blue); } .icon-card h3 { font-family:var(--font-h); font-size:1.05rem; font-weight:700; margin-bottom:8px; color:white; } /* Game cards */ .game-card { border-radius:var(--radius); overflow:hidden; background:var(--navy-2); border:1px solid var(--border); transition:transform var(--transition), box-shadow var(--transition); cursor:pointer; } .game-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--glow-blue); } .game-card-img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } .game-card-body { padding:14px 16px; } .game-card-title { font-family:var(--font-h); font-size:.9rem; font-weight:700; color:white; margin-bottom:4px; } .game-card-meta { font-size:.78rem; color:var(--text-muted); display:flex; gap:8px; align-items:center; } .badge-rtp { background:var(--blue-glow); color:var(--blue-bright); border:1px solid var(--border); padding:2px 8px; border-radius:50px; font-size:.72rem; font-weight:600; } .badge-new { background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:white; padding:2px 8px; border-radius:50px; font-size:.72rem; font-weight:700; } .badge-hot { background:linear-gradient(135deg,#FF4D1C,#FF8C00); color:white; padding:2px 8px; border-radius:50px; font-size:.72rem; font-weight:700; } /* =================================================== SECTIONS =================================================== */ section { padding:80px 0; } .section-sm { padding:48px 0; } .section-dark { background:var(--navy-2); } .section-alt { background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); } .section-header { text-align:center; margin-bottom:52px; } .section-header h2 { font-family:var(--font-h); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:white; margin-bottom:14px; line-height:1.2; } .section-header p { font-size:1rem; color:var(--text-muted); max-width:560px; margin:0 auto; } .section-eyebrow { display:inline-block; color:var(--blue-bright); font-size:.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; } .gradient-text { background:linear-gradient(135deg,var(--blue-bright),var(--blue-dark)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .gold-text { background:linear-gradient(135deg,var(--gold),var(--gold-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .divider { width:60px; height:3px; margin:16px auto 0; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); border-radius:2px; } /* =================================================== GRIDS =================================================== */ .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; } .grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; } .grid-games { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; } .flex { display:flex; } .flex-center { display:flex; align-items:center; justify-content:center; } .flex-between { display:flex; align-items:center; justify-content:space-between; } .gap-16 { gap:16px; } .gap-24 { gap:24px; } .gap-32 { gap:32px; } .flex-wrap { flex-wrap:wrap; } /* =================================================== STATS COUNTERS =================================================== */ .stats-banner { background:linear-gradient(135deg, var(--navy-3), var(--navy-4)); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; } .stat-item {} .stat-number { font-family:var(--font-h); font-size:2.4rem; font-weight:900; color:var(--blue-bright); display:block; line-height:1; } .stat-number.gold { color:var(--gold); } .stat-label { font-size:.82rem; color:var(--text-muted); margin-top:6px; } /* =================================================== CHARTS — PURE CSS/SVG =================================================== */ /* Horizontal bar chart */ .bar-chart { display:flex; flex-direction:column; gap:14px; } .bar-row { display:flex; align-items:center; gap:14px; } .bar-label { width:140px; font-size:.82rem; color:var(--text-muted); flex-shrink:0; } .bar-track { flex:1; height:12px; background:var(--navy-3); border-radius:6px; overflow:hidden; } .bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,var(--blue-dark),var(--blue-bright)); transition:width 1.2s cubic-bezier(.4,0,.2,1); } .bar-fill.gold { background:linear-gradient(90deg,var(--gold-2),var(--gold)); } .bar-fill.green { background:linear-gradient(90deg,#00A040,#00C853); } .bar-fill.red { background:linear-gradient(90deg,#CC1010,#FF4D6A); } .bar-value { width:48px; font-size:.82rem; font-weight:700; color:white; text-align:right; flex-shrink:0; } /* Donut chart (SVG-based) */ .donut-wrap { display:flex; align-items:center; gap:32px; flex-wrap:wrap; } .donut-chart { flex-shrink:0; } .donut-legend { display:flex; flex-direction:column; gap:10px; } .legend-item { display:flex; align-items:center; gap:10px; font-size:.85rem; } .legend-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; } /* Stacked bar chart */ .stacked-chart { display:flex; flex-direction:column; gap:12px; } .stacked-row { display:flex; align-items:center; gap:14px; } .stacked-label { width:120px; font-size:.82rem; color:var(--text-muted); flex-shrink:0; } .stacked-bar { flex:1; display:flex; height:24px; border-radius:6px; overflow:hidden; gap:2px; } .stacked-seg { transition:flex .8s ease; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:600; color:rgba(255,255,255,.8); } .stacked-total { width:48px; font-size:.8rem; font-weight:600; color:var(--text-muted); text-align:right; } /* Vertical column chart */ .col-chart { display:flex; align-items:flex-end; gap:12px; height:180px; } .col-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; } .col-bar { width:100%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--blue-bright),var(--blue-dark)); transition:height .8s ease; min-height:4px; } .col-bar.gold { background:linear-gradient(180deg,var(--gold),var(--gold-2)); } .col-bar.green { background:linear-gradient(180deg,#00C853,#009A3E); } .col-label { font-size:.72rem; color:var(--text-muted); text-align:center; } .col-value { font-size:.78rem; font-weight:700; color:var(--blue-bright); } /* Progress circles (SVG) */ .progress-circle-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; } .progress-circle text { font-family:var(--font-h); font-weight:700; } /* Steps / Process diagram */ .steps { display:flex; gap:0; position:relative; } .steps::before { content:''; position:absolute; top:28px; left:40px; right:40px; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-bright),var(--gold)); z-index:0; } .step { flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; z-index:1; text-align:center; } .step-num { width:56px; height:56px; border-radius:50%; background:var(--navy-3); border:2px solid var(--blue); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.1rem; font-weight:800; color:var(--blue-bright); transition:all var(--transition); } .step:hover .step-num { background:var(--blue); color:white; box-shadow:var(--glow-blue); } .step-title { font-size:.85rem; font-weight:700; color:white; } .step-desc { font-size:.78rem; color:var(--text-muted); max-width:120px; } /* Radar chart (CSS pentagon) */ .radar-wrap { position:relative; width:220px; height:220px; margin:0 auto; } .radar-polygon, .radar-bg { position:absolute; inset:0; } /* =================================================== TABLES =================================================== */ .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); } .data-table { width:100%; min-width:560px; border-collapse:separate; border-spacing:0; } .data-table thead tr { background:var(--navy-3); } .data-table th { padding:14px 18px; text-align:left; font-family:var(--font-h); font-size:.8rem; font-weight:700; color:var(--blue-bright); text-transform:uppercase; letter-spacing:1px; border-bottom:2px solid var(--border); white-space:nowrap; } .data-table th:first-child { border-radius:var(--radius-sm) 0 0 0; } .data-table th:last-child { border-radius:0 var(--radius-sm) 0 0; } .data-table td { padding:13px 18px; font-size:.88rem; color:var(--text); border-bottom:1px solid rgba(0,180,227,.08); vertical-align:middle; } .data-table tr:last-child td { border-bottom:none; } .data-table tbody tr { transition:background var(--transition); } .data-table tbody tr:hover { background:var(--blue-glow); } .data-table tbody tr:nth-child(even) { background:rgba(8,24,40,.4); } .data-table .highlight td { background:rgba(0,180,227,.06); border-left:3px solid var(--blue); } .data-table .check { color:var(--green); font-size:1rem; } .data-table .cross { color:var(--red); font-size:1rem; } .data-table .stars { color:var(--gold); } /* Comparison table */ .compare-table th { text-align:center; } .compare-table td { text-align:center; } .compare-table td:first-child { text-align:left; font-weight:500; } .col-highlight { background:rgba(0,180,227,.05) !important; border-top:2px solid var(--blue) !important; } .col-highlight th { color:white !important; } /* =================================================== TIMELINE =================================================== */ .timeline { position:relative; padding-left:30px; } .timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--blue),var(--blue-bright),var(--gold)); } .timeline-item { position:relative; padding:0 0 36px 28px; } .timeline-item::before { content:''; position:absolute; left:-5px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--blue-bright); border:2px solid var(--navy-2); box-shadow:var(--glow-blue); } .timeline-dot-gold::before { background:var(--gold); box-shadow:var(--glow-gold); } .timeline-date { font-size:.78rem; color:var(--blue-bright); font-weight:700; letter-spacing:1px; margin-bottom:4px; text-transform:uppercase; } .timeline-title { font-family:var(--font-h); font-size:1rem; font-weight:700; color:white; margin-bottom:4px; } .timeline-desc { font-size:.85rem; color:var(--text-muted); } /* Horizontal timeline */ .timeline-h { display:flex; position:relative; overflow-x:auto; gap:0; padding-bottom:16px; } .timeline-h::before { content:''; position:absolute; top:24px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-bright),var(--gold)); z-index:0; } .timeline-h-item { flex:1 0 160px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; z-index:1; padding:0 8px; } .timeline-h-dot { width:24px; height:24px; border-radius:50%; background:var(--blue); border:3px solid var(--navy-2); box-shadow:var(--glow-blue); } .timeline-h-dot.gold { background:var(--gold); box-shadow:var(--glow-gold); } .timeline-h-year { font-family:var(--font-h); font-size:.9rem; font-weight:800; color:var(--blue-bright); } .timeline-h-text { font-size:.78rem; color:var(--text-muted); text-align:center; } /* =================================================== FAQ ACCORDION =================================================== */ .faq-list { display:flex; flex-direction:column; gap:10px; } .faq-item { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:border-color var(--transition); } .faq-item:hover { border-color:rgba(0,180,227,.35); } .faq-item.open { border-color:rgba(0,180,227,.5); } .faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:transparent; font-family:var(--font-h); font-size:.95rem; font-weight:600; color:white; text-align:left; transition:color var(--transition); } .faq-btn:hover { color:var(--blue-bright); } .faq-icon { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--blue-glow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; transition:transform var(--transition), background var(--transition); } .faq-item.open .faq-icon { transform:rotate(45deg); background:var(--blue); } .faq-body { max-height:0; overflow:hidden; transition:max-height var(--transition); } .faq-body-inner { padding:0 22px 18px; font-size:.88rem; color:var(--text-muted); line-height:1.7; } /* =================================================== TABS =================================================== */ .tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px; } .tab-btn { padding:8px 18px; border-radius:50px; font-size:.82rem; font-weight:600; color:var(--text-muted); border:1px solid var(--border); background:transparent; transition:all var(--transition); } .tab-btn:hover { border-color:var(--blue); color:var(--blue-bright); } .tab-btn.active { background:var(--blue); color:white; border-color:var(--blue); } .tab-panel { display:none; } .tab-panel.active { display:grid; } /* =================================================== FORMS =================================================== */ .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; } .form-label { font-size:.85rem; font-weight:600; color:var(--text); } .form-input, .form-select, .form-textarea { background:var(--navy-3); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; color:var(--text); font-size:.9rem; font-family:var(--font-b); transition:border-color var(--transition), box-shadow var(--transition); width:100%; min-height:44px; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,180,227,.15); outline:none; } .form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted); } .form-error { font-size:.78rem; color:var(--red); } .form-help { font-size:.78rem; color:var(--text-muted); } /* Auth forms */ .auth-card { max-width:440px; margin:0 auto; background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; } .auth-logo { text-align:center; margin-bottom:28px; } .auth-title { font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:white; text-align:center; margin-bottom:6px; } .auth-subtitle { font-size:.85rem; color:var(--text-muted); text-align:center; margin-bottom:28px; } .auth-switch { text-align:center; margin-top:20px; font-size:.85rem; color:var(--text-muted); } .auth-switch a { color:var(--blue-bright); font-weight:600; } .input-icon { position:relative; } .input-icon .form-input { padding-left:44px; } .input-icon .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:1rem; opacity:.6; } .password-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.6; font-size:.9rem; } .password-toggle:hover { opacity:1; } /* =================================================== AUTHOR SECTION =================================================== */ .author-card { display:flex; gap:28px; align-items:flex-start; background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:32px; } .author-photo { width:100px; height:100px; border-radius:50%; flex-shrink:0; object-fit:cover; border:2px solid var(--blue); } .author-name { font-family:var(--font-h); font-size:1rem; font-weight:700; color:white; margin-bottom:4px; } .author-title { font-size:.8rem; color:var(--blue-bright); font-weight:600; margin-bottom:10px; } .author-bio { font-size:.85rem; color:var(--text-muted); line-height:1.6; } /* =================================================== SEO TEXT SECTION =================================================== */ .seo-section { padding:72px 0; } .seo-content h2 { font-family:var(--font-h); font-size:1.5rem; font-weight:700; color:white; margin:28px 0 12px; } .seo-content h3 { font-family:var(--font-h); font-size:1.15rem; font-weight:600; color:var(--blue-bright); margin:22px 0 10px; } .seo-content p { font-size:.92rem; color:var(--text-muted); line-height:1.8; margin-bottom:14px; } .seo-content ul { list-style:none; margin-bottom:16px; } .seo-content ul li { padding-left:22px; position:relative; font-size:.9rem; color:var(--text-muted); margin-bottom:6px; } .seo-content ul li::before { content:'▸'; position:absolute; left:0; color:var(--blue-bright); font-size:.8rem; top:2px; } .seo-content a { color:var(--blue); font-weight:500; } .seo-content a:hover { color:var(--blue-bright); text-decoration:underline; } /* =================================================== TRUST BADGES =================================================== */ .trust-row { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:center; } .trust-badge { background:var(--navy-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 20px; display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--text-muted); } .trust-badge .badge-icon { font-size:1.1rem; } /* =================================================== COOKIE CONSENT & DISCLAIMER =================================================== */ .gambling-disclaimer { background:var(--navy-3); padding:12px 0; border-top:2px solid rgba(255,77,106,.3); font-size:.78rem; color:var(--text-muted); text-align:center; } .gambling-disclaimer .container { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; } .age-pill { background:var(--red); color:white; padding:3px 10px; border-radius:50px; font-size:.75rem; font-weight:800; letter-spacing:.5px; flex-shrink:0; } .gambling-disclaimer a { color:var(--blue); } .cookie-consent { position:fixed; bottom:0; left:0; right:0; z-index:8888; display:none; background:rgba(8,24,40,.97); backdrop-filter:blur(16px); border-top:2px solid var(--border); padding:18px 0; } .cookie-consent.visible { display:block; } .cookie-inner { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; } .cookie-text { font-size:.84rem; color:var(--text-muted); flex:1 1 300px; } .cookie-text strong { color:var(--text); } .cookie-actions { display:flex; gap:10px; flex-shrink:0; } .cookie-btn { padding:9px 20px; border-radius:8px; font-size:.82rem; font-weight:700; cursor:pointer; transition:all var(--transition); } .cookie-btn--accept { background:var(--blue); color:white; border:none; } .cookie-btn--accept:hover { background:var(--blue-bright); } .cookie-btn--reject { background:transparent; color:var(--text-muted); border:1px solid var(--border); } .cookie-btn--reject:hover { border-color:var(--blue); color:var(--blue-bright); } /* =================================================== FOOTER =================================================== */ .site-footer { background:var(--navy-2); border-top:1px solid var(--border); padding:60px 0 30px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; } .footer-about .logo { margin-bottom:14px; } .footer-desc { font-size:.84rem; color:var(--text-muted); line-height:1.7; margin-bottom:18px; } .footer-social { display:flex; gap:10px; } .social-btn { width:38px; height:38px; border-radius:10px; background:var(--navy-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--text-muted); transition:all var(--transition); } .social-btn:hover { background:var(--blue); border-color:var(--blue); color:white; transform:translateY(-2px); } .footer-col h4 { font-family:var(--font-h); font-size:.85rem; font-weight:700; color:white; letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px; } .footer-col ul { display:flex; flex-direction:column; gap:8px; } .footer-col ul li a { font-size:.84rem; color:var(--text-muted); transition:color var(--transition); display:inline-flex; align-items:center; min-height:44px; padding:4px 0; } .footer-col ul li a:hover { color:var(--blue-bright); } .footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; } .footer-copy { font-size:.78rem; color:var(--text-muted); } .footer-legal { display:flex; gap:16px; flex-wrap:wrap; } .footer-legal a { font-size:.78rem; color:var(--text-muted); transition:color var(--transition); } .footer-legal a:hover { color:var(--blue-bright); } .footer-age { background:var(--red); color:white; font-size:.72rem; font-weight:800; padding:3px 8px; border-radius:4px; } /* =================================================== PAGE-SPECIFIC — HOMEPAGE =================================================== */ .hero-home { min-height:640px; } .hero-bg-home { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 50%, var(--navy) 100%); } .hero-image-home { position:absolute; right:0; top:0; height:100%; width:55%; object-fit:cover; opacity:.5; } .hero-home .hero-content { max-width:580px; } .features-grid { grid-template-columns:repeat(3,1fr); } .game-showcase { padding:72px 0; background:var(--navy-2); } .how-it-works { background:var(--navy-3); border-radius:var(--radius-xl); padding:48px; } .testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .testimonial-card { padding:24px; } .testimonial-text { font-size:.9rem; color:var(--text-muted); line-height:1.7; margin-bottom:16px; font-style:italic; } .testimonial-text::before { content:'"'; font-size:2rem; color:var(--blue); line-height:.5; display:block; margin-bottom:8px; } .testimonial-user { display:flex; align-items:center; gap:10px; } .avatar { width:36px; height:36px; border-radius:50%; background:var(--blue-glow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; } .reviewer-name { font-size:.85rem; font-weight:600; color:white; } .reviewer-meta { font-size:.75rem; color:var(--text-muted); } .stars-row { color:var(--gold); font-size:.85rem; margin-bottom:8px; } /* =================================================== PAGE-SPECIFIC — SPIELAUTOMATEN =================================================== */ .slots-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; } .quick-stat { background:var(--navy-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; text-align:center; } .quick-stat .num { font-family:var(--font-h); font-size:1.8rem; font-weight:900; color:var(--blue-bright); } .quick-stat .lbl { font-size:.78rem; color:var(--text-muted); margin-top:4px; } .provider-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; } .provider-chip { background:var(--navy-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 16px; font-size:.8rem; color:var(--text-muted); transition:all var(--transition); cursor:pointer; } .provider-chip:hover, .provider-chip.active { background:var(--blue); border-color:var(--blue); color:white; } /* =================================================== PAGE-SPECIFIC — BONUSANGEBOTE =================================================== */ .bonus-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; } .bonus-tier-card { background:var(--navy-2); border:2px solid var(--border); border-radius:var(--radius-xl); padding:32px 24px; text-align:center; position:relative; transition:all var(--transition); } .bonus-tier-card.featured { border-color:var(--blue); box-shadow:var(--glow-blue); } .bonus-tier-card.premium { border-color:var(--gold); box-shadow:var(--glow-gold); } .bonus-tier-card:hover { transform:translateY(-6px); } .tier-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:white; font-size:.75rem; font-weight:700; padding:4px 16px; border-radius:50px; white-space:nowrap; } .tier-badge.gold-badge { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:var(--navy); } .tier-amount { font-family:var(--font-h); font-size:3rem; font-weight:900; color:var(--gold); line-height:1; } .tier-unit { font-size:.9rem; color:var(--text-muted); margin-bottom:16px; } .tier-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin:16px 0 24px; text-align:left; } .tier-list li { display:flex; gap:8px; font-size:.85rem; color:var(--text-muted); align-items:center; } .tier-list li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; } /* Bonus progress indicator */ .bonus-progress-track { background:var(--navy-3); border-radius:var(--radius); padding:28px; margin-bottom:32px; } .bonus-levels { display:flex; align-items:center; gap:0; } .level-node { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; } .level-node::after { content:''; position:absolute; top:18px; left:50%; right:-50%; height:3px; background:var(--navy-4); z-index:0; } .level-node:last-child::after { display:none; } .level-node.done::after { background:linear-gradient(90deg,var(--blue),var(--blue-bright)); } .level-circle { width:36px; height:36px; border-radius:50%; background:var(--navy-4); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:var(--text-muted); z-index:1; position:relative; } .level-node.done .level-circle { background:var(--blue); border-color:var(--blue); color:white; } .level-node.current .level-circle { background:var(--navy-3); border-color:var(--blue-bright); color:var(--blue-bright); box-shadow:var(--glow-blue); } .level-name { font-size:.72rem; color:var(--text-muted); } .level-node.done .level-name { color:var(--blue-bright); } /* =================================================== PAGE-SPECIFIC — NEUE SPIELE =================================================== */ .new-games-filters { margin-bottom:32px; } .release-badge { background:linear-gradient(135deg,#FF4D1C,#FF8C00); color:white; padding:3px 9px; border-radius:50px; font-size:.7rem; font-weight:700; } .provider-stat-row { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .provider-stat { text-align:center; background:var(--navy-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 10px; transition:all var(--transition); } .provider-stat:hover { border-color:var(--blue); } .provider-stat .logo-name { font-family:var(--font-h); font-size:.8rem; font-weight:700; color:var(--blue-bright); margin-bottom:4px; } .provider-stat .game-count { font-size:1.4rem; font-weight:900; color:white; font-family:var(--font-h); } .provider-stat .new-label { font-size:.7rem; color:var(--text-muted); } /* =================================================== PAGE-SPECIFIC — MOBILE APP =================================================== */ .app-hero { min-height:580px; align-items:center; } .app-phone-mockup { max-width:280px; margin:0 auto; } .app-phone-mockup img { width:100%; height:auto; } .platform-tabs { display:flex; gap:12px; margin-bottom:24px; } .platform-tab { flex:1; padding:14px; text-align:center; background:var(--navy-3); border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all var(--transition); } .platform-tab.active { border-color:var(--blue); background:var(--blue-glow); } .platform-tab .platform-icon { font-size:1.8rem; margin-bottom:6px; } .platform-tab .platform-name { font-size:.85rem; font-weight:700; color:white; } .platform-tab .platform-store { font-size:.75rem; color:var(--text-muted); } .app-rating-row { display:flex; align-items:center; gap:8px; } .rating-num { font-family:var(--font-h); font-size:2rem; font-weight:900; color:var(--gold); } .rating-stars { color:var(--gold); font-size:.9rem; } .rating-reviews { font-size:.78rem; color:var(--text-muted); } .download-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; } .download-steps::before { content:''; position:absolute; top:28px; left:15%; right:15%; height:2px; background:linear-gradient(90deg,var(--blue),var(--gold)); } .dl-step { text-align:center; position:relative; z-index:1; } .dl-step .num { width:56px; height:56px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--blue-dark),var(--blue)); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.3rem; font-weight:900; color:white; box-shadow:var(--glow-blue); } .dl-step h4 { font-family:var(--font-h); font-size:.9rem; font-weight:700; color:white; margin-bottom:4px; } .dl-step p { font-size:.78rem; color:var(--text-muted); } /* =================================================== PAGE-SPECIFIC — ÜBER UNS =================================================== */ .mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px; } .mission-card { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; } .mission-icon { font-size:2.4rem; margin-bottom:14px; } .mission-card h3 { font-family:var(--font-h); font-size:1.05rem; font-weight:700; color:white; margin-bottom:10px; } .mission-card p { font-size:.85rem; color:var(--text-muted); line-height:1.7; } .values-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .value-item { text-align:center; padding:24px 16px; background:var(--navy-3); border-radius:var(--radius); border:1px solid var(--border); } .value-icon { font-size:2rem; margin-bottom:10px; } .value-label { font-size:.85rem; font-weight:600; color:var(--blue-bright); } .team-section { padding:64px 0; } .team-author-card { display:grid; grid-template-columns:280px 1fr; gap:40px; background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px; } .author-imgs img { width:100%; border-radius:var(--radius); border:2px solid var(--blue); } .author-details {} .author-details h3 { font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:white; margin-bottom:4px; } .author-details .job-title { color:var(--blue-bright); font-size:.9rem; font-weight:600; margin-bottom:14px; } .author-skills { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .skill-tag { background:var(--blue-glow); border:1px solid var(--border); color:var(--blue-bright); font-size:.75rem; padding:4px 12px; border-radius:50px; font-weight:600; } .achievement-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px; } .achievement-item { display:flex; gap:10px; align-items:flex-start; background:var(--navy-3); border-radius:var(--radius-sm); padding:12px; } .achievement-icon { font-size:1.2rem; flex-shrink:0; } .achievement-text { font-size:.82rem; color:var(--text-muted); } /* =================================================== LEGAL PAGES (datenschutz, impressum, sitemap) =================================================== */ .legal-content { max-width:820px; margin:0 auto; padding:calc(var(--header-h) + 48px) 24px 64px; } .legal-content h1 { font-family:var(--font-h); font-size:2.2rem; font-weight:800; color:white; margin-bottom:28px; } .legal-content h2 { font-family:var(--font-h); font-size:1.2rem; font-weight:700; color:var(--blue-bright); margin:28px 0 10px; } .legal-content p { font-size:.9rem; color:var(--text-muted); line-height:1.8; margin-bottom:12px; } .legal-content a { color:var(--blue); } .legal-content ul { padding-left:20px; margin-bottom:14px; } .legal-content ul li { font-size:.9rem; color:var(--text-muted); margin-bottom:6px; } .sitemap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .sitemap-cat h3 { font-family:var(--font-h); font-weight:700; color:var(--blue-bright); margin-bottom:12px; font-size:.9rem; text-transform:uppercase; letter-spacing:1px; } .sitemap-cat ul { list-style:none; display:flex; flex-direction:column; gap:6px; } .sitemap-cat ul li a { font-size:.88rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; } .sitemap-cat ul li a:hover { color:var(--blue-bright); } .sitemap-cat ul li a::before { content:'→'; color:var(--blue); font-size:.75rem; } /* Scroll to top */ .scroll-top { position:fixed; bottom:24px; right:24px; z-index:888; width:44px; height:44px; border-radius:50%; background:var(--navy-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:1.1rem; opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition), background var(--transition); } .scroll-top.visible { opacity:1; pointer-events:auto; } .scroll-top:hover { background:var(--blue); color:white; transform:translateY(-4px); } /* =================================================== ANIMATIONS =================================================== */ @keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} } .fade-in-up { animation:fadeInUp .6s ease both; } .fade-in { animation:fadeIn .4s ease both; } .float-anim { animation:float 4s ease-in-out infinite; } .reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; } .reveal.visible{ opacity:1; transform:translateY(0); } .delay-1 { animation-delay:.1s; } .delay-2 { animation-delay:.2s; } .delay-3 { animation-delay:.3s; } .delay-4 { animation-delay:.4s; } .delay-5 { animation-delay:.5s; } /* Glow ring pulse */ .glow-ring { position:relative; } .glow-ring::after { content:''; position:absolute; inset:-4px; border-radius:inherit; border:2px solid var(--blue); opacity:0; animation:pulse 2s ease-in-out infinite; } /* =================================================== UTILITIES =================================================== */ .text-center { text-align:center; } .text-right { text-align:right; } .text-blue { color:var(--blue-bright); } .text-gold { color:var(--gold); } .text-muted { color:var(--text-muted); } .text-white { color:white; } .text-red { color:var(--red); } .text-green { color:var(--green); } .text-sm { font-size:.82rem; } .text-xs { font-size:.75rem; } .fw-700 { font-weight:700; } .fw-800 { font-weight:800; } .mt-0 { margin-top:0; } .mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-32 { margin-top:32px; } .mt-48 { margin-top:48px; } .mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; } .mb-32 { margin-bottom:32px; } .mb-48 { margin-bottom:48px; } .hidden { display:none; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* =================================================== PREFERS REDUCED MOTION =================================================== */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } html { scroll-behavior:auto; } } /* =================================================== HIGH CONTRAST =================================================== */ @media (prefers-contrast: high) { :root { --border:rgba(0,212,255,.6); } .card, .game-card { border-width:2px; } .nav-main a:hover { background:var(--blue); color:white; } } /* =================================================== NO-JS FAQ FALLBACK (details/summary) =================================================== */ .faq-item details { border:none; background:none; } .faq-item details > summary { list-style:none; cursor:pointer; } .faq-item details > summary::-webkit-details-marker { display:none; } /* When JS is present the .faq-btn handles interaction; details/summary provides a native fallback when JS is absent. */ /* =================================================== COOKIE SETTINGS LINK =================================================== */ .cookie-reopen-link { cursor:pointer; color:var(--blue); font-size:.78rem; } .cookie-reopen-link:hover { color:var(--blue-bright); text-decoration:underline; } /* =================================================== PRINT =================================================== */ @media print { .site-header,.hamburger,.mobile-nav,.scroll-top,.cookie-consent,#scroll-progress, .tracker-link,.btn,.hero-cta { display:none !important; } body { background:white; color:black; } a { color:black; } a[href]::after { content:" (" attr(href) ")"; font-size:.75rem; } .container { max-width:100%; padding:0; } section { padding:20px 0; } } /* =================================================== RESPONSIVE — 1024px =================================================== */ @media (max-width:1024px) { :root { --max-w:100%; } .footer-grid { grid-template-columns:1fr 1fr; gap:28px; } .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-6 { grid-template-columns:repeat(3,1fr); } .stats-banner { grid-template-columns:repeat(2,1fr); } .download-steps { grid-template-columns:repeat(2,1fr); } .download-steps::before { display:none; } .provider-stat-row { grid-template-columns:repeat(3,1fr); } .values-row { grid-template-columns:repeat(2,1fr); } .hero h1 { font-size:3rem; } } /* =================================================== RESPONSIVE — 768px =================================================== */ @media (max-width:768px) { .hamburger { display:flex; } .nav-main, .nav-auth, .tracker-link { display:none; } .footer-grid { grid-template-columns:1fr; gap:24px; } .grid-2, .grid-3, .features-grid, .mission-grid { grid-template-columns:1fr; } .grid-4 { grid-template-columns:1fr 1fr; } .grid-6 { grid-template-columns:repeat(2,1fr); } .stats-banner { grid-template-columns:repeat(2,1fr); padding:24px; } .bonus-tiers { grid-template-columns:1fr; } .team-author-card { grid-template-columns:1fr; } .team-author-card img { max-width:200px; } .testimonials { grid-template-columns:1fr; } .steps { flex-direction:column; align-items:flex-start; } .steps::before { display:none; } .step { align-items:flex-start; flex-direction:row; gap:16px; } .step-num { flex-shrink:0; } .download-steps { grid-template-columns:1fr 1fr; } .sitemap-grid { grid-template-columns:1fr; } .slots-stats-row { grid-template-columns:repeat(2,1fr); } .provider-stat-row { grid-template-columns:repeat(2,1fr); } .values-row { grid-template-columns:repeat(2,1fr); } .donut-wrap { flex-direction:column; } .bar-label { width:100px; font-size:.76rem; } .author-card { flex-direction:column; align-items:center; text-align:center; } .hero { min-height:520px; } .hero h1 { font-size:2.2rem; } .page-hero { padding: calc(var(--header-h) + 36px) 0 40px; } .bonus-levels { flex-wrap:wrap; gap:8px; } .level-node::after { display:none; } input, select, textarea, .form-input, .form-select { font-size:16px !important; } } /* =================================================== RESPONSIVE — 480px =================================================== */ @media (max-width:480px) { .container { padding:0 16px; } section { padding:52px 0; } .grid-4 { grid-template-columns:1fr; } .grid-6 { grid-template-columns:repeat(2,1fr); } .stats-banner { grid-template-columns:1fr 1fr; padding:18px; gap:12px; } .stat-number { font-size:1.8rem; } .hero h1 { font-size:1.75rem; } .hero p.lead { font-size:.95rem; } .hero-cta { flex-direction:column; align-items:stretch; } .hero-cta .btn { text-align:center; justify-content:center; } .btn-lg { padding:13px 24px; font-size:.9rem; } .section-header h2 { font-size:1.6rem; } .data-table th, .data-table td { padding:10px 12px; font-size:.8rem; } .tabs { gap:4px; } .tab-btn { padding:7px 12px; font-size:.78rem; } .auth-card { padding:24px 18px; } .footer-social { justify-content:center; } .provider-stat-row { grid-template-columns:1fr 1fr; } .download-steps { grid-template-columns:1fr; } .values-row { grid-template-columns:1fr 1fr; } .cookie-inner { flex-direction:column; align-items:stretch; } .cookie-actions { flex-wrap:wrap; } } /* =================================================== LEGAL PAGES & UTILITIES =================================================== */ .container-sm { max-width:820px; margin:0 auto; padding:0 24px; } /* Breadcrumb */ .breadcrumb { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; font-size:.85rem; color:rgba(255,255,255,.5); } .breadcrumb li + li::before { content:"/"; margin-right:6px; opacity:.4; } .breadcrumb a { color:var(--blue-bright); text-decoration:none; } .breadcrumb a:hover { text-decoration:underline; } /* Legal content */ .legal-content h1 { font-size:2rem; margin-bottom:8px; } .legal-content h2 { font-size:1.25rem; margin:40px 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--blue-bright); } .legal-content h3 { font-size:1rem; margin:20px 0 8px; color:rgba(255,255,255,.85); font-weight:600; } .legal-content p { margin-bottom:16px; line-height:1.75; color:rgba(255,255,255,.75); } .legal-content address { font-style:normal; line-height:1.9; color:rgba(255,255,255,.75); margin-bottom:16px; } .legal-content a { color:var(--blue-bright); } .legal-content code { background:rgba(255,255,255,.08); padding:2px 6px; border-radius:4px; font-size:.85em; } /* Sitemap extras (overrides inline) */ @media(max-width:480px){ .container-sm { padding:0 16px; } .legal-content h1 { font-size:1.5rem; } .legal-content h2 { font-size:1.1rem; } }