/* ===== NON-CRITICAL STYLES ===== */ /* Critical CSS is inlined in for LCP. This file loads async. */ /* ===== BASE ===== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Strong focus styles for keyboard + TV remote navigation */ :focus-visible { outline: 3px solid var(--orange-bright); outline-offset: 3px; } .btn:focus-visible, .social-card:focus-visible, .host-links a:focus-visible, .nav-links a:focus-visible { outline: 3px solid var(--orange-bright); outline-offset: 3px; } /* ===== NAV ===== */ .nav-links a { transition: color 0.2s ease; min-height: 44px; display: inline-flex; align-items: center; padding: 0.25rem 0.15rem; } .nav-links a:hover { color: var(--orange-bright); } /* ===== HERO ===== */ .hero-overlay { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; } .btn { min-height: 48px; min-width: 48px; touch-action: manipulation; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(255, 107, 0, 0.5); } .btn-secondary:hover { border-color: var(--orange); color: var(--orange-bright); } /* ===== SECTIONS ===== */ .section { padding: 5rem 0; content-visibility: auto; contain-intrinsic-size: auto 500px; } .section-dark { background: var(--bg-dark); } .section-title { font-family: 'Orbitron', system-ui, sans-serif; font-size: clamp(1.6rem, 5vw, 2.4rem); text-align: center; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; padding: 0 0.5rem; } .section-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 2.5rem; font-size: clamp(0.95rem, 2.5vw, 1.1rem); padding: 0 1rem; } /* ===== HIGHLIGHTS ===== */ .highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .highlight-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; position: relative; transition: transform 0.2s ease, border-color 0.2s ease; min-height: 160px; } .highlight-card:hover { transform: translateY(-4px); border-color: var(--orange); } .card-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; padding: 0.3rem 0.65rem; border-radius: 4px; background: #e74c3c; color: white; margin-bottom: 0.9rem; text-transform: uppercase; } .card-badge.orange { background: var(--orange); } .card-badge.blue { background: var(--blue); } .highlight-card h3 { font-family: 'Orbitron', system-ui, sans-serif; font-size: 1.2rem; margin-bottom: 0.5rem; line-height: 1.3; } .highlight-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; } /* ===== HOSTS ===== */ .hosts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 800px; margin: 0 auto; } .host-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; transition: transform 0.2s ease; min-height: 320px; } .host-card:hover { transform: translateY(-4px); } .host-avatar { width: 100px; height: 100px; margin: 0 auto 1.1rem; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--gold)); display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 1.6rem; color: #111; flex-shrink: 0; } .avatar-placeholder.gold { background: linear-gradient(135deg, var(--gold), #ff8c00); } .host-card h3 { font-family: 'Orbitron', system-ui, sans-serif; font-size: 1.4rem; margin-bottom: 0.3rem; } .host-role { color: var(--orange-bright); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.75rem; } .host-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.2rem; line-height: 1.5; } .host-links { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .host-links a { color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.55rem 1rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; transition: border-color 0.2s ease, color 0.2s ease; min-height: 44px; display: inline-flex; align-items: center; } .host-links a:hover { border-color: var(--orange); color: var(--orange-bright); } /* ===== SOCIALS ===== */ .social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .social-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.35rem 0.75rem; text-align: center; text-decoration: none; color: var(--text); transition: transform 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-height: 110px; min-width: 44px; touch-action: manipulation; } .social-card:hover { transform: translateY(-3px); border-color: var(--orange); } .social-icon { font-size: 1.5rem; margin-bottom: 0.2rem; } .social-card span { font-weight: 600; font-size: 0.95rem; } .social-card small { color: var(--text-muted); font-size: 0.78rem; } .social-card.twitch:hover { border-color: #9146ff; } .social-card.youtube:hover { border-color: #ff0000; } .social-card.tiktok:hover { border-color: #00f2ea; } .social-card.discord:hover { border-color: #5865f2; } .social-card.instagram:hover { border-color: #e1306c; } /* ===== ABOUT ===== */ .about-content { text-align: center; max-width: 700px; padding: 0 0.5rem; } .about-text { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1.2rem; line-height: 1.6; } .about-text strong { color: var(--orange-bright); } .about-text.secondary { font-size: 0.95rem; opacity: 0.8; } .wbp-badge { display: inline-block; margin-top: 1.5rem; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 2px; padding: 0.7rem 1.4rem; border: 2px solid var(--gold); color: var(--gold); border-radius: 4px; } /* ===== FOOTER ===== */ .footer { padding: 2.5rem 1rem; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.06); background: #06060a; } .footer p { color: var(--text-muted); font-size: 0.9rem; } .footer-tag { margin-top: 0.4rem; font-size: 0.8rem !important; opacity: 0.7; } /* ========================================= TABLETS ========================================= */ @media (max-width: 1024px) { .section { padding: 4rem 0; } } @media (max-width: 768px) { .section { padding: 3.5rem 0; } .section-subtitle { margin-bottom: 2rem; } .highlights-grid { grid-template-columns: 1fr; gap: 1rem; } .hosts-grid { grid-template-columns: 1fr; gap: 1.25rem; } .host-card { min-height: auto; padding: 1.75rem 1.25rem; } .social-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; } } /* ========================================= PHONES ========================================= */ @media (max-width: 480px) { .nav { height: 60px; } .nav-inner { height: 60px; } .logo-main { font-size: 0.8rem; letter-spacing: 0.5px; } .logo-sub { font-size: 0.65rem; } .hero { padding-top: 60px; min-height: 100svh; padding-left: 1rem; padding-right: 1rem; } .eyebrow { font-size: 0.75rem; letter-spacing: 2px; margin-bottom: 0.75rem; } .hero h1 { font-size: clamp(2.1rem, 11vw, 2.8rem); margin-bottom: 1rem; } .hero-tagline { font-size: 0.95rem; margin-bottom: 1.75rem; padding: 0 0.5rem; } .hero-cta { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; max-width: 320px; margin: 0 auto; } .btn { width: 100%; padding: 0.95rem 1.25rem; font-size: 0.95rem; } .section { padding: 3rem 0; } .section-title { font-size: 1.45rem; letter-spacing: 0.5px; } .highlight-card { padding: 1.35rem; min-height: auto; } .highlight-card h3 { font-size: 1.1rem; } .host-avatar { width: 90px; height: 90px; font-size: 1.4rem; } .host-card h3 { font-size: 1.3rem; } .social-grid { grid-template-columns: 1fr 1fr; } .social-card { padding: 1.2rem 0.5rem; min-height: 100px; } .wbp-badge { font-size: 0.75rem; padding: 0.6rem 1.1rem; letter-spacing: 1.5px; } .footer { padding: 2rem 1rem; } } @media (max-width: 360px) { .hero h1 { font-size: 1.9rem; } .logo-main { font-size: 0.72rem; } .social-grid { grid-template-columns: 1fr; } .section-title { font-size: 1.3rem; } } /* Landscape phones */ @media (max-height: 500px) and (orientation: landscape) { .hero { min-height: auto; padding: 80px 0 40px; } .hero h1 { font-size: 2rem; } .hero-tagline { margin-bottom: 1.25rem; } } /* ========================================= LARGE DESKTOPS ========================================= */ @media (min-width: 1400px) { .container { width: min(1200px, 90%); } .section { padding: 6rem 0; } .section-title { font-size: 2.6rem; } .hero h1 { font-size: 5.5rem; } .hero-tagline { font-size: 1.25rem; } .btn { padding: 1rem 2.1rem; font-size: 1.05rem; } } /* ========================================= TV / 10-FOOT UI (big screens viewed from distance) ========================================= */ @media (min-width: 1800px) { .container { width: min(1400px, 88%); } .nav { height: 84px; } .nav-inner { height: 84px; } .logo-main { font-size: 1.15rem; } .logo-sub { font-size: 0.85rem; } .nav-links { gap: 2.5rem; } .nav-links a { font-size: 1.15rem; min-height: 52px; } .hero { padding-top: 84px; } .eyebrow { font-size: 1.1rem; letter-spacing: 4px; margin-bottom: 1.4rem; } .hero h1 { font-size: clamp(4rem, 7vw, 6.5rem); margin-bottom: 1.5rem; } .hero-tagline { font-size: 1.45rem; max-width: 700px; margin-bottom: 2.5rem; } .btn { min-height: 60px; padding: 1.15rem 2.4rem; font-size: 1.2rem; border-radius: 8px; } .section { padding: 7rem 0; } .section-title { font-size: 3rem; margin-bottom: 0.75rem; } .section-subtitle { font-size: 1.35rem; margin-bottom: 3.5rem; } .highlights-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .highlight-card { padding: 2.2rem; min-height: 220px; border-radius: 16px; } .highlight-card h3 { font-size: 1.5rem; } .highlight-card p { font-size: 1.15rem; } .card-badge { font-size: 0.85rem; padding: 0.4rem 0.85rem; } .hosts-grid { max-width: 1000px; gap: 2.5rem; } .host-card { padding: 2.8rem 2rem; min-height: 400px; border-radius: 20px; } .host-avatar { width: 130px; height: 130px; font-size: 2.1rem; margin-bottom: 1.4rem; } .host-card h3 { font-size: 1.8rem; } .host-role { font-size: 1.1rem; } .host-card p { font-size: 1.15rem; } .host-links a { font-size: 1.05rem; padding: 0.75rem 1.3rem; min-height: 52px; } .social-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } .social-card { padding: 2rem 1rem; min-height: 150px; border-radius: 16px; } .social-icon { font-size: 2rem; } .social-card span { font-size: 1.2rem; } .social-card small { font-size: 0.95rem; } .about-text { font-size: 1.3rem; } .about-text.secondary { font-size: 1.15rem; } .wbp-badge { font-size: 1.05rem; padding: 0.9rem 1.8rem; } .footer { padding: 3.5rem 1rem; } .footer p { font-size: 1.1rem; } .footer-tag { font-size: 1rem !important; } } /* Extra-large TVs / 4K */ @media (min-width: 2400px) { .container { width: min(1600px, 85%); } .hero h1 { font-size: 7rem; } .section-title { font-size: 3.4rem; } .btn { min-height: 68px; font-size: 1.3rem; padding: 1.25rem 2.8rem; } } /* Coarse pointer (remotes, touch) – bigger targets */ @media (pointer: coarse) { .btn { min-height: 52px; } .nav-links a, .host-links a, .social-card { min-height: 52px; } } /* Touch devices – reduce hover motion */ @media (hover: none) { .highlight-card:hover, .host-card:hover, .social-card:hover, .btn-primary:hover { transform: none; } .btn-primary:active { transform: scale(0.98); } } /* Safe area for notched phones */ @supports (padding: max(0px)) { .nav { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } .footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); } .hero { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .highlight-card, .host-card, .social-card, .btn { transition: none; } .highlight-card:hover, .host-card:hover, .social-card:hover, .btn-primary:hover { transform: none; } }