/* ========================================================================== SPORTCAST.PRO — REDESIGN V2 CORE STYLES (ORIGINAL DNA + CHAMPIONS FOR GOOD XXL) ========================================================================== */ /* Note: Google Fonts Inter & JetBrains Mono loaded asynchronously via in HTML */ @font-face { font-family: 'Agency FB'; src: url('/fonts/agency-fb.woff2') format('woff2'), url('/fonts/agency-fb.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Druk Wide Cyr'; src: url('/fonts/DrukWideCyr-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; } :root { /* Dynamic Active Theme Tokens */ --theme-bg: #141417; --theme-surface: #1A1A1E; --theme-surface-hover: #242429; --theme-card: #1A1A1E; --theme-header: #09090B; --theme-accent: #3B82F6; --theme-accent-hover: #2563EB; --theme-accent-glow: rgba(59, 130, 246, 0.25); --theme-cyan: #06B6D4; --theme-text-primary: #F4F4F5; --theme-text-secondary: #A1A1AA; --theme-text-muted: #71717A; --theme-border: #27272A; --theme-border-light: #3F3F46; --danger: #EF4444; --success: #10B981; --warning: #F59E0B; /* Sport Themes */ --bg-home: #141417; --accent-home: #3B82F6; --bg-football: #031e17; --accent-football: #10B981; --bg-hockey: #051626; --accent-hockey: #38bdf8; --bg-basketball: #1c0f04; --accent-basketball: #F59E0B; --bg-tennis: #1d0726; --accent-tennis: #8B5CF6; --bg-nfl: #1f0609; --accent-nfl: #EF4444; --bg-f1: #180414; --accent-f1: #EC4899; --bg-wrestling: #1b0b02; --accent-wrestling: #F97316; /* Fonts */ --font-inter: 'Inter', system-ui, sans-serif; --font-jetbrains: 'JetBrains Mono', monospace; --font-agency: 'Agency FB', sans-serif; --font-druk: 'Druk Condensed', 'Agency FB', sans-serif; --font-druk-wide: 'Druk Wide Cyr', sans-serif; } /* Theme Attributes */ body[data-sport-theme="home"] { --theme-bg: var(--bg-home); --theme-accent: var(--accent-home); --theme-accent-glow: rgba(59, 130, 246, 0.25); } body[data-sport-theme="football"] { --theme-bg: var(--bg-football); --theme-accent: var(--accent-football); --theme-accent-glow: rgba(16, 185, 129, 0.25); } body[data-sport-theme="hockey"] { --theme-bg: var(--bg-hockey); --theme-accent: var(--accent-hockey); --theme-accent-glow: rgba(56, 189, 248, 0.25); } body[data-sport-theme="basketball"] { --theme-bg: var(--bg-basketball); --theme-accent: var(--accent-basketball); --theme-accent-glow: rgba(245, 158, 11, 0.25); } body[data-sport-theme="tennis"] { --theme-bg: var(--bg-tennis); --theme-accent: var(--accent-tennis); --theme-accent-glow: rgba(139, 92, 246, 0.25); } body[data-sport-theme="nfl"] { --theme-bg: var(--bg-nfl); --theme-accent: var(--accent-nfl); --theme-accent-glow: rgba(239, 68, 68, 0.25); } body[data-sport-theme="f1"] { --theme-bg: var(--bg-f1); --theme-accent: var(--accent-f1); --theme-accent-glow: rgba(236, 72, 153, 0.25); } body[data-sport-theme="wrestling"] { --theme-bg: var(--bg-wrestling); --theme-accent: var(--accent-wrestling); --theme-accent-glow: rgba(249, 115, 22, 0.25); } /* ========================================================================== BASE & RESET (WEBKIT VIEWPORT COMPATIBLE) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background-color: #09090b; color: var(--theme-text-primary); width: 100%; min-height: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; } body { background-color: #09090b; color: var(--theme-text-primary); font-family: var(--font-inter); width: 100%; min-height: 100%; position: relative; margin: 0; padding: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; } .container-custom { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } @keyframes pulse-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .live-pulse { animation: pulse-live 1.5s ease-in-out infinite; } /* ========================================================================== ORIGINAL SPORTCAST FLOATING HEADER ========================================================================== */ .header-wrapper { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; padding: 0 1rem; z-index: 1000; transition: all 0.3s ease; box-sizing: border-box; } .header-container { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; border-radius: 0.75rem; background: rgba(9, 9, 11, 0.60); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; position: relative; box-sizing: border-box; } .header-wrapper.scrolled .header-container { background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } /* Text Logo with white base + dynamic theme hover glow */ .header-logo { display: inline-flex; align-items: center; justify-self: start; position: relative; text-decoration: none; cursor: pointer; flex-shrink: 0; } .header-logo-text { font-family: var(--font-agency); font-size: 2.625rem; /* 42px matching original Header.tsx text-[42px] */ font-weight: 900; line-height: 1; color: #ffffff; text-transform: uppercase; letter-spacing: 0; -webkit-text-stroke: 1px #ffffff; transition: text-shadow 0.3s ease; position: relative; } .header-logo-glow { position: absolute; inset: 0; font-family: var(--font-agency); font-size: 2.625rem; font-weight: 900; line-height: 1; color: var(--theme-accent); filter: blur(8px); opacity: 0; pointer-events: none; z-index: -1; transition: opacity 0.3s ease, color 0.4s ease; } .header-logo:hover .header-logo-glow { opacity: 0.7; } .header-logo:hover .header-logo-text { text-shadow: 0 0 16px var(--theme-accent-glow); } /* Header Navigation Tabs (Desktop only - Strictly Horizontally Centered) */ .header-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 2.5rem; z-index: 10; pointer-events: auto; } @media (max-width: 1024px) { .header-nav { display: none; /* Hide on tablets and mobile, move to Menu popup */ } } .header-nav-item { position: relative; font-family: var(--font-agency); font-size: 1.125rem; /* 18px matching original Header.tsx text-lg */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(244, 244, 245, 0.7); padding: 0.5rem 0; transition: color 0.2s ease, text-shadow 0.3s ease; display: inline-flex; align-items: center; } .header-nav-item:hover, .header-nav-item.active { color: #ffffff; text-shadow: 0 0 12px var(--theme-accent-glow); } /* Underline strictly aligned with text (compensates letter-spacing) */ .header-nav-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0.1em; height: 2px; background: var(--theme-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease, background-color 0.4s ease; } .header-nav-item:hover::after, .header-nav-item.active::after { transform: scaleX(1); } /* Header Right: Clock, Socials, Menu Button */ .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; /* 24px matching original Header.tsx gap-6 */ justify-self: end; flex-shrink: 0; } .header-clock { display: flex; align-items: center; gap: 0.6rem; } .header-time { font-family: var(--font-agency); font-size: 1.5rem; /* 24px matching original Header.tsx text-2xl */ font-weight: 700; letter-spacing: 0.05em; color: var(--theme-text-primary); } .header-date-stack { display: flex; flex-direction: column; font-family: var(--font-agency); font-size: 0.75rem; /* 12px matching original Header.tsx text-xs */ line-height: 1; letter-spacing: 0.1em; color: var(--theme-text-secondary); gap: 2px; } .header-socials-wrapper { display: flex; align-items: center; gap: 0.75rem; /* 12px matching original Header.tsx gap-3 */ } .header-social-link { display: inline-flex; align-items: center; justify-content: center; color: rgba(244, 244, 245, 0.6); transition: color 0.2s ease, filter 0.3s ease, transform 0.2s ease; } .header-social-link svg { width: 22px; height: 22px; } .header-social-link:hover { color: #ffffff; filter: drop-shadow(0 0 8px var(--theme-accent)); transform: scale(1.08); } /* Menu Burger Button (3 Horizontal Lines) */ .header-menu-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px; background: none; border: none; cursor: pointer; position: relative; flex-shrink: 0; color: #ffffff; transition: transform 0.2s ease, filter 0.2s ease; } .header-menu-btn:hover { transform: scale(1.08); } .header-menu-btn .menu-burger-icon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 22px; height: 16px; flex-shrink: 0; } .header-menu-btn .menu-burger-icon span { display: block; width: 100%; height: 2px; background: #ffffff; border-radius: 1px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .header-menu-btn:hover .menu-burger-icon span { background: var(--theme-accent); box-shadow: 0 0 8px var(--theme-accent); } /* Mobile Header Overrides (Exact 64px Height & Original sportcast.pro Proportions) */ @media (max-width: 768px) { .header-wrapper { top: max(1rem, env(safe-area-inset-top, 0px)); left: 0; right: 0; transform: none; padding: 0 1rem; /* 16px exact match with Header.tsx px-4 */ width: 100%; max-width: 100vw; box-sizing: border-box; } .header-container { height: 64px; /* 64px exact match with Header.tsx h-16 */ padding: 0 1.25rem; /* 20px exact match with Header.tsx px-5 */ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 100%; border-radius: 0.75rem; box-sizing: border-box; } .header-logo { flex-shrink: 0; } .header-logo-text { font-size: 1.875rem; /* 30px exact match with Header.tsx text-3xl */ } .header-logo-glow { font-size: 1.875rem; } .header-right { display: flex; align-items: center; gap: 0.35rem; margin: 0; flex-shrink: 0; } /* Live Clock hidden on mobile per user directive */ .header-clock, .header-date-stack, .header-time { display: none !important; } .header-socials-wrapper { display: flex !important; align-items: center; gap: 0.25rem; flex-shrink: 0; } .header-social-link { min-width: 34px; width: 34px; height: 34px; min-height: 34px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0; } .header-social-link svg { width: 20px; /* 20px exact match w-5 h-5 */ height: 20px; } .header-menu-btn { min-width: 36px; width: 36px; height: 36px; min-height: 36px; display: flex !important; align-items: center; justify-content: center; padding: 0; margin-left: 0; flex-shrink: 0; } .header-menu-btn .menu-burger-icon { width: 20px !important; /* 20px exact match w-5 */ height: 16px !important; gap: 5px !important; /* 5px exact match gap-[5px] */ } .header-menu-btn .menu-burger-icon span { width: 20px !important; height: 2px !important; } } /* ========================================================================== HERO MATCH & AMBIENT VIDEO SLIDER (FULL VIEWPORT & SAFE-AREA SCALING) ========================================================================== */ .hero-slider-section { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 540px; max-height: 880px; /* On large screens caps to avoid over-zoom */ display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 0; } .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 1; } .hero-slide.active { opacity: 1; pointer-events: auto; z-index: 2; } /* ========================================================================== HERO SLIDER & VIDEO ========================================================================== */ .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .hero-video-gradient, .hero-protective-gradient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient( 180deg, var(--theme-bg) 0%, rgba(20, 20, 23, 0.65) 4%, rgba(20, 20, 23, 0.15) 8%, transparent 14%, transparent 86%, rgba(20, 20, 23, 0.15) 92%, rgba(20, 20, 23, 0.65) 96%, var(--theme-bg) 100% ); z-index: 5; transition: background 0.4s ease; } .mobile-viewport-wrapper { position: relative; width: 100%; min-height: 100%; } @media (max-width: 768px) { /* Default Mobile (Chrome on iOS, Android, Firefox, etc.) */ html, body { width: 100%; min-height: 100%; overflow-x: hidden; background: #000000; } .hero-slider-section { position: relative; width: 100vw; max-width: 100vw; height: var(--hero-static-height, 100dvh) !important; min-height: var(--hero-static-height, 100dvh) !important; max-height: var(--hero-static-height, 100dvh) !important; margin: 0; padding: 0; overflow: hidden; background: transparent; } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; } .hero-slide .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: translateZ(0); -webkit-transform: translateZ(0); } .hero-slide.hero-match-slide { background: var(--theme-bg); } /* Centered match layout between header bottom and address bar top */ .hero-match-inner { padding-top: calc(64px + max(1rem, env(safe-area-inset-top, 0px)) + 0.5rem) !important; padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem)) !important; padding-left: 1rem !important; padding-right: 1rem !important; height: var(--hero-static-height, 100svh) !important; min-height: var(--hero-static-height, 100svh) !important; max-height: var(--hero-static-height, 100svh) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; } .hero-content-center { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: auto 0 !important; } .hero-badges-row { margin-bottom: 1.25rem !important; } .hero-teams-layout { margin-bottom: 1.5rem !important; gap: 1.5rem !important; } /* iOS Safari Native Specific Overrides (Full-Bleed under Status Bar & Address Bar) */ html.is-ios-safari { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; background: #09090b !important; background-color: #09090b !important; } html.is-ios-safari body:has(.mobile-viewport-wrapper) { margin: 0 !important; padding: 0 !important; width: 100% !important; height: calc(100% + 300px) !important; min-height: calc(100% + 300px) !important; overflow: visible !important; touch-action: none !important; overscroll-behavior-y: none !important; background: #09090b !important; background-color: #09090b !important; } html.is-ios-safari .mobile-viewport-wrapper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; height: calc(100% + 300px) !important; min-height: calc(100% + 300px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; z-index: 10 !important; background: transparent !important; } html.is-ios-safari .hero-slider-section { position: relative !important; width: 100vw !important; max-width: 100vw !important; height: calc(100lvh + 200px) !important; min-height: calc(100lvh + 200px) !important; max-height: calc(100lvh + 200px) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; } html.is-ios-safari .hero-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: transparent !important; } html.is-ios-safari .hero-slide .hero-video-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center top !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } html.is-ios-safari .hero-slide.hero-match-slide { background: var(--theme-bg) !important; } html.is-ios-safari .hero-match-inner { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; overflow: hidden !important; box-sizing: border-box !important; } html.is-ios-safari .hero-content-center { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; overflow: hidden !important; box-sizing: border-box !important; } html.is-ios-safari #sports-hub { position: relative !important; width: 100vw !important; max-width: 100vw !important; height: calc(100lvh + 200px) !important; min-height: calc(100lvh + 200px) !important; max-height: calc(100lvh + 200px) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: var(--hub-bg-color, #FFFFFF) !important; transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } html.is-ios-safari #sports-hub .mobile-hub-stage { position: absolute !important; top: 80px !important; left: 0 !important; width: 100% !important; height: var(--hero-static-height, 100svh) !important; background: transparent !important; box-sizing: border-box !important; } /* ========================================================================== HERO SLIDE: MOBILE DIAGONAL POSTER CLASH LAYOUT (TEAM SPORTS ONLY) Slides: Football (2), Hockey (3), Basketball (4), NFL (5) ========================================================================== */ .hero-slide-team-match .hero-match-inner, .hero-slide-event-single .hero-match-inner { position: relative !important; padding: 0 !important; width: 100% !important; height: var(--hero-static-height, 100svh) !important; min-height: var(--hero-static-height, 100svh) !important; max-height: var(--hero-static-height, 100svh) !important; overflow: hidden !important; display: block !important; box-sizing: border-box !important; } .hero-slide-team-match .hero-content-center, .hero-slide-event-single .hero-content-center { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; display: block !important; overflow: hidden !important; } /* 1. Mobile Hero Badges (Pure Agency FB Typography, No Plate/Blur) */ .hero-slide-team-match .hero-badges-bar, .hero-slide-event-single .hero-badges-bar { position: absolute !important; top: calc(76px + max(1rem, env(safe-area-inset-top, 0px)) + 20px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100vw - 32px) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; z-index: 25 !important; pointer-events: none !important; } html.is-ios-safari .hero-slide-team-match .hero-badges-bar, html.is-ios-safari .hero-slide-event-single .hero-badges-bar { top: calc(80px + 76px + max(1rem, env(safe-area-inset-top, 0px)) + 20px) !important; } .hero-slide-team-match .hero-badge-pill, .hero-slide-event-single .hero-badge-pill { background: transparent !important; border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; font-family: var(--font-agency) !important; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1 !important; } .hero-slide-team-match .hero-badge-pill.hero-badge-tournament, .hero-slide-event-single .hero-badge-pill.hero-badge-tournament { color: #ffffff !important; } .hero-slide-team-match .hero-badge-pill.hero-badge-stage, .hero-slide-event-single .hero-badge-pill.hero-badge-stage { color: var(--slide-accent, var(--theme-accent)) !important; } .hero-slide-team-match .badge-short, .hero-slide-event-single .badge-short { display: none !important; } .hero-slide-team-match .badge-full, .hero-slide-event-single .badge-full { display: inline !important; } .hero-slide-team-match .hero-badge-slash, .hero-slide-event-single .hero-badge-slash { display: inline-flex !important; align-items: center !important; font-family: var(--font-agency) !important; font-size: 1.35rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.35) !important; line-height: 1 !important; user-select: none !important; margin: 0 !important; padding: 0 !important; } /* 2. Clash Stage & Hidden Center VS */ .hero-slide-team-match .hero-clash-row { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; gap: 0 !important; display: block !important; pointer-events: none !important; z-index: 10 !important; } .hero-slide-team-match .hero-clash-center { display: none !important; } .hero-slide-team-match .hero-team-column { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; pointer-events: none !important; padding: 0 !important; gap: 0 !important; } /* 3. Team Logos (City Benchmark ~360px / 300% in 25%/75% Quadrants, tilted 30deg, brightness 30%, opacity 60%) */ .hero-slide-team-match .hero-team-home .hero-team-logo-box { position: absolute !important; left: 25% !important; top: 25% !important; transform: translate(-50%, -50%) !important; width: 360px !important; height: 360px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; pointer-events: none !important; } .hero-slide-team-match .hero-team-away .hero-team-logo-box { position: absolute !important; left: 75% !important; top: 75% !important; transform: translate(-50%, -50%) !important; width: 360px !important; height: 360px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; pointer-events: none !important; } .hero-slide-team-match .hero-team-logo-box img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; opacity: 0.6 !important; filter: brightness(30%) drop-shadow(0 14px 32px rgba(0, 0, 0, 0.7)) !important; transform: scale(var(--logo-ratio, 1)) rotate(30deg) !important; transform-origin: center center !important; } /* 4. Team Titles (Druk Wide Cyr: Single Line, Home left: 16px above midline, Away right: 16px below midline) */ .hero-slide-team-match .hero-clash-title { position: absolute !important; font-family: var(--font-druk-wide) !important; font-size: var(--hero-team-font-size, 2.2rem) !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #ffffff !important; white-space: nowrap !important; line-height: 1 !important; z-index: 15 !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 1) !important; max-width: none !important; word-break: normal !important; pointer-events: auto !important; margin: 0 !important; } .hero-slide-team-match .hero-team-home .hero-clash-title { left: 16px !important; right: auto !important; bottom: calc(50% + 7px - (0.14 * var(--hero-team-font-size, 2.7rem))) !important; top: auto !important; text-align: left !important; } .hero-slide-team-match .hero-team-away .hero-clash-title { right: 16px !important; left: auto !important; top: calc(50% + 7px - (0.14 * var(--hero-team-font-size, 2.7rem))) !important; bottom: auto !important; text-align: right !important; } /* Tennis / Individual Player Titles: hide flags next to names (background flags used instead) */ .hero-slide-tennis .hero-player-flag { display: none !important; } .hero-slide-tennis .hero-clash-title { display: inline-flex !important; align-items: center !important; gap: 0 !important; } /* Archetype 3: Events without teams (Single Event Title - Centered across screen width) */ .hero-slide-event-single .hero-event-center { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; pointer-events: none !important; z-index: 15 !important; margin: 0 !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; } .hero-slide-event-single .hero-event-title { font-family: var(--font-druk-wide) !important; font-size: var(--hero-event-font-size, 2.2rem) !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #ffffff !important; white-space: normal !important; line-height: 1.08 !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 1) !important; text-align: center !important; max-width: 100% !important; pointer-events: auto !important; margin: 0 !important; word-break: normal !important; } .hero-slide-event-single .hero-event-subtitle { display: block !important; font-family: var(--font-druk-wide) !important; font-size: 0.52em !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: rgba(255, 255, 255, 0.82) !important; margin-top: 0.45rem !important; line-height: 1.15 !important; white-space: nowrap !important; } /* 5. Bottom Actions Row: Status on left, CTA on right (Unified Mobile for Match Slides) */ .hero-slide-team-match .hero-bottom-actions, .hero-slide-event-single .hero-bottom-actions { position: absolute !important; left: 16px !important; right: 16px !important; bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 64px + 0.75rem + 40px + 0.75rem) !important; top: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; z-index: 26 !important; pointer-events: auto !important; margin: 0 !important; width: auto !important; } html.is-ios-safari .hero-slide-team-match .hero-bottom-actions, html.is-ios-safari .hero-slide-event-single .hero-bottom-actions { top: calc(80px + var(--hero-static-height, 100svh) - max(1.25rem, env(safe-area-inset-bottom, 0px) + 0.85rem) - 64px - 12px - 40px - 52px) !important; bottom: auto !important; } .hero-slide-team-match .hero-mobile-status, .hero-slide-event-single .hero-mobile-status { display: flex !important; align-items: center !important; } .hero-slide-team-match .hero-status-live-text, .hero-slide-event-single .hero-status-live-text { font-family: var(--font-agency) !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ef4444 !important; white-space: nowrap !important; line-height: 1 !important; text-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important; } .hero-slide-team-match .hero-status-timer-prefix, .hero-slide-event-single .hero-status-timer-prefix { font-family: var(--font-agency) !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.65) !important; white-space: nowrap !important; line-height: 1 !important; margin-right: 6px !important; } .hero-slide-team-match .hero-status-timer-digits, .hero-slide-event-single .hero-status-timer-digits { font-family: var(--font-agency) !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ef4444 !important; white-space: nowrap !important; line-height: 1 !important; text-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important; } .hero-slide-team-match .hero-cta-wrap, .hero-slide-event-single .hero-cta-wrap { display: flex !important; align-items: center !important; } .hero-slide-team-match .hero-cta-btn, .hero-slide-event-single .hero-cta-btn { padding: 0.68rem 1.05rem !important; font-size: 1.35rem !important; letter-spacing: 0.06em !important; border-radius: 8px !important; gap: 7px !important; } .sports-xxl-section { position: relative; z-index: 20; background: var(--theme-bg); width: 100%; max-width: 100vw; overflow-x: hidden; } /* iOS Safari Native: Clean isolation for event-page (Hardware 120Hz scrolling & Team background) */ html.is-ios-safari:has(body.event-page) { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background-color: #0b0c0e !important; background-image: radial-gradient(ellipse 100% 650px at 50% -50px, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.22) 0%, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.05) 55%, transparent 100%), radial-gradient(circle 600px at 15% 150px, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.12) 0%, transparent 70%), radial-gradient(circle 600px at 85% 180px, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.09) 0%, transparent 70%) !important; background-repeat: no-repeat !important; background-position: top center !important; } html.is-ios-safari body.event-page { margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; min-height: 100dvh !important; overflow-y: auto !important; touch-action: auto !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch !important; } } /* Protective Contrast Scrim across the video hero (avoids washout on white ice/stadium lights) */ .hero-video-scrim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(8, 8, 12, 0.72) 0%, rgba(8, 8, 12, 0.2) 16%, transparent 32%), radial-gradient(ellipse 95% 65% at 50% 50%, rgba(6, 6, 10, 0.48) 0%, rgba(6, 6, 10, 0.22) 65%, transparent 100%), linear-gradient(0deg, rgba(6, 6, 10, 0.88) 0%, rgba(6, 6, 10, 0.45) 20%, transparent 40%); } /* Video Slide Overlay Content (Druk Wide Cyr + Agency FB) */ .hero-video-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: none; } .hero-video-overlay-inner { width: 100%; max-width: 1400px; padding: 0 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 0; box-sizing: border-box; } .hero-video-title { font-family: var(--font-druk-wide), sans-serif; font-size: clamp(2rem, 4.2vw, 3.8rem); font-weight: 700; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: #ffffff; margin: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.75); } .hero-video-subtitle { font-family: var(--font-agency), sans-serif; font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; margin: 0.75rem 0 0 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 3px 14px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.85); max-width: 600px; line-height: 1.25; } /* Video Slide Centered Action: Single 'К МАТЧАМ' Button Directly Under Subtitle */ .hero-video-actions { display: flex; align-items: center; justify-content: center; margin-top: clamp(1.4rem, 3.2vh, 2.2rem); width: 100%; pointer-events: auto; z-index: 20; } .hero-video-cta-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; padding: 0.85rem 2.25rem !important; background: var(--theme-accent) !important; color: #ffffff !important; font-family: var(--font-agency), sans-serif !important; font-size: 1.25rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 0.5rem !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.45) !important; transition: all 0.25s ease !important; pointer-events: auto !important; text-decoration: none !important; } .hero-video-cta-btn:hover { background: var(--theme-accent-hover) !important; box-shadow: 0 0 28px rgba(59, 130, 246, 0.7) !important; transform: translateY(-2px) !important; } .hero-video-cta-btn:active { transform: scale(0.98) !important; } @media (max-width: 768px) { .hero-video-overlay-inner { padding: 0 1.25rem; align-items: center; text-align: center; margin-top: 0; } html.is-ios-safari .hero-video-overlay { position: absolute !important; top: 80px !important; left: 0 !important; width: 100% !important; height: var(--hero-static-height, 100svh) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; pointer-events: none !important; } html.is-ios-safari .hero-video-overlay-inner { margin-top: 0 !important; } .hero-video-title { font-size: clamp(1.45rem, 6.2vw, 2.2rem); line-height: 1.08; text-align: center; max-width: none !important; width: 100% !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 20px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.85); } .hero-video-subtitle { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.08em; max-width: 340px; text-align: center; margin-top: 0.65rem; color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 3px 14px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.9); } .hero-video-actions { display: flex !important; justify-content: center !important; align-items: center !important; margin-top: clamp(1.2rem, 3vh, 1.65rem) !important; width: 100% !important; pointer-events: auto !important; z-index: 25 !important; } .hero-video-cta-btn { padding: 0.72rem 1.85rem !important; font-size: 1.2rem !important; letter-spacing: 0.08em !important; border-radius: 8px !important; pointer-events: auto !important; } } /* Match Slides Content (Strictly bounded between Header and Pagination) */ .hero-match-inner { position: relative; z-index: 10; width: 100%; max-width: 1400px; padding: max(88px, 5.5rem) 1.5rem max(60px, 4rem); display: flex; align-items: center; justify-content: center; box-sizing: border-box; } @media (max-width: 768px) { .hero-match-inner { padding-top: calc(80px + 0.5rem) !important; padding-bottom: calc(max(3rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem)) + 1.25rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; } } /* Hero Arrows Container (Locked within 1400px + 16px padding matching Header & Vertically Centered on Desktop) */ .hero-arrows-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1400px; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 25; box-sizing: border-box; } .hero-arrow-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(26, 26, 30, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--theme-text-muted); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; pointer-events: auto; cursor: pointer; } .hero-arrow-btn:hover { color: #fff; background: rgba(36, 36, 41, 0.95); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.08); box-shadow: 0 0 16px var(--theme-accent-glow); } @media (max-width: 768px) { .hero-arrows-container { position: absolute !important; bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 64px + 0.75rem) !important; top: auto !important; left: 0 !important; right: 0 !important; height: 40px !important; transform: none !important; width: 100% !important; max-width: 100vw !important; padding: 0 1rem !important; box-sizing: border-box !important; display: flex !important; justify-content: space-between !important; align-items: center !important; pointer-events: none !important; z-index: 25 !important; } html.is-ios-safari .hero-arrows-container { top: calc(80px + var(--hero-static-height, 100svh) - max(1.25rem, env(safe-area-inset-bottom, 0px) + 0.85rem) - 64px - 12px - 40px) !important; bottom: auto !important; transform: none !important; } .hero-arrow-btn { width: 40px; height: 40px; background: transparent !important; border: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: rgba(255, 255, 255, 0.7) !important; display: flex !important; padding: 0; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)); } .hero-arrow-btn svg { width: 28px; height: 28px; } .hero-arrow-btn:hover, .hero-arrow-btn:active { color: #ffffff !important; transform: scale(1.15); box-shadow: none !important; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 1)); } } .hero-content-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; } /* ========================================================================== HERO MATCH CARDS — CANONICAL MULTI-SPORT ARCHITECTURE ========================================================================== */ /* 1. TOP BADGES BAR (3 Slots, Agency FB) */ .hero-badges-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1rem, 2.8vh, 1.8rem); z-index: 5; } .hero-badge-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 6px; font-family: var(--font-agency); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--theme-text-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .hero-badge-pill.hero-badge-tournament { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #ffffff; } .hero-badge-pill.hero-badge-live { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.35); color: #ef4444; } .hero-badge-pill.hero-badge-stage { color: var(--slide-accent, var(--theme-accent)); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); } .hero-badge-pill.hero-badge-channel { color: var(--slide-accent, var(--theme-accent)); border-color: rgba(255, 255, 255, 0.08); } .badge-full { display: none; } /* Hero Slide "СОБЫТИЕ ДНЯ" Tag */ .hero-featured-tag { display: inline-flex; align-items: center; justify-content: center; position: relative; width: max-content; font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #F59E0B; text-decoration: none; line-height: 1; margin: 0; z-index: 20; white-space: nowrap; pointer-events: none; } .hero-featured-tag::after { content: ''; position: absolute; left: 1px; right: 1.5px; bottom: -4px; height: 1.5px; background-color: #F59E0B; border-radius: 1px; } @media (max-width: 991px) { .hero-slide-team-match .hero-featured-tag { position: absolute !important; top: calc(76px + max(1rem, env(safe-area-inset-top, 0px)) + 20px + 36px) !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; width: max-content !important; margin: 0 !important; z-index: 25 !important; pointer-events: none !important; } html.is-ios-safari .hero-slide-team-match .hero-featured-tag { top: calc(80px + 76px + max(1rem, env(safe-area-inset-top, 0px)) + 20px + 36px) !important; } } .hero-badge-slash { display: none; } /* 2. CLASH ROW (Archetypes 1 & 2: Teams & Players) */ .hero-clash-row { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3.5vw, 3.5rem); width: 100%; max-width: 960px; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); z-index: 5; } .hero-team-column { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; flex: 1; text-align: center; min-width: 0; } .hero-team-logo-box { width: clamp(75px, 12vw, 130px); height: clamp(75px, 12vw, 130px); display: flex; align-items: center; justify-content: center; } .hero-team-logo-box img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(var(--logo-ratio, 1)); transform-origin: center center; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65)); } .hero-flag-box { width: clamp(65px, 10vw, 100px); height: clamp(45px, 7vw, 70px); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; background: #000; } .hero-flag-box img { width: 100%; height: 100%; object-fit: cover; } /* User Rule: Названия команд, имена теннисистов, названия событий — DRUK WIDE CYR на русском */ .hero-clash-title { font-family: var(--font-druk-wide); font-size: clamp(0.95rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #ffffff; line-height: 1.15; white-space: nowrap; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } /* Base: full team name subtitle is hidden on mobile */ .hero-team-full-name { display: none !important; } @media (max-width: 768px) { .hero-clash-title { font-size: clamp(0.75rem, 3.2vw, 1.15rem); white-space: normal; max-width: 120px; word-break: normal; } } /* Individual Sport Player Flags (Tennis, etc.) — height strictly matches font cap-height (0.74em), proportional 3:2 width (1.11em) */ .hero-player-flag { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; position: relative !important; top: 0.03em !important; height: 0.74em !important; width: 1.11em !important; aspect-ratio: 3 / 2 !important; border-radius: 3px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: none !important; flex-shrink: 0 !important; vertical-align: middle !important; background: #000000 !important; } .hero-player-flag img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .hero-slide-tennis .hero-player-flag { display: none !important; } .hero-slide-tennis .hero-clash-title { display: inline-flex; align-items: center; gap: 0; } .hero-clash-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; flex-shrink: 0; padding: 0 0.5rem; } .hero-vs-text { font-family: var(--font-agency); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: 0.08em; color: var(--slide-accent, #ffffff); text-shadow: 0 0 24px var(--slide-accent-glow, rgba(255, 255, 255, 0.25)); } /* User Rule: Отсчет времени или 'идет трансляция' — шрифт Agency FB */ .hero-status-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-agency); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; white-space: nowrap; } .hero-status-tag.is-live { color: #ef4444; } .hero-status-tag .status-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; } .hero-countdown-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-agency); font-size: clamp(1.1rem, 2vw, 1.4rem); text-transform: uppercase; white-space: nowrap; } .hero-countdown-prefix { color: rgba(255, 255, 255, 0.65); font-weight: 800; letter-spacing: 0.08em; } .hero-countdown-digits { color: #ef4444; font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 0 12px rgba(239, 68, 68, 0.4); } /* User Rule: Кнопки 'Смотреть' / 'Подробнее' — шрифт Agency FB, неоновая подсветка без поднятия */ .hero-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.75rem 2.4rem; border-radius: 8px; background: var(--slide-accent, var(--theme-accent)); color: #000000; font-family: var(--font-agency); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, border-color 0.25s ease; box-shadow: 0 4px 20px var(--slide-accent-glow, rgba(0,0,0,0.4)); text-decoration: none; cursor: pointer; z-index: 5; position: relative; } .hero-cta-btn svg { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Primary CTA ('СМОТРЕТЬ'): Сочная неоновая подсветка и мягкий вылет стрелочки без прыжка (без filter, сохраняет чистые контуры букв) */ .hero-cta-btn:hover { transform: none; color: #000000; box-shadow: 0 0 28px var(--slide-accent-glow, rgba(16, 185, 129, 0.75)), 0 0 52px var(--slide-accent-glow, rgba(16, 185, 129, 0.45)); } .hero-cta-btn:hover svg { transform: translateX(4px); } .hero-cta-btn:active { transform: scale(0.98); } /* Secondary CTA ('ПОДРОБНЕЕ'): Стеклянное сияние граней без прыжка */ .hero-cta-btn.hero-cta-secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .hero-cta-btn.hero-cta-secondary:hover { transform: none; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); color: #ffffff; box-shadow: 0 0 24px rgba(255, 255, 255, 0.25), 0 0 40px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(255, 255, 255, 0.15); } .hero-cta-btn.hero-cta-secondary:hover svg { transform: translateX(4px); } .hero-cta-btn.hero-cta-secondary:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.22); } .hero-bottom-actions { display: flex; align-items: center; justify-content: center; width: 100%; z-index: 5; } .hero-mobile-status { display: none; } /* 3. ARCHETYPE 3: EVENTS WITHOUT TEAMS (F1 & Wrestling) */ .hero-event-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); z-index: 5; } .hero-event-title { font-family: var(--font-druk-wide), sans-serif; font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; margin: 0; line-height: 1.08; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 1); } .hero-event-subtitle { display: block; font-family: var(--font-druk-wide), sans-serif; font-size: 0.52em; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.82); margin-top: 0.5rem; line-height: 1.15; } .hero-event-showcase { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 820px; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); z-index: 5; } .hero-event-heading { font-family: var(--font-druk-wide); font-size: clamp(1.3rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; margin-top: 0.75rem; margin-bottom: 0.4rem; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); } .hero-event-detail { font-family: var(--font-agency); font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slide-accent); margin-bottom: 0.35rem; } .hero-wrestling-clash { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.6rem 0; } .hero-wrestler-name { font-family: var(--font-druk-wide); font-size: clamp(0.85rem, 1.8vw, 1.35rem); font-weight: 700; color: #ffffff; text-transform: uppercase; } .hero-vs-pill { font-family: var(--font-agency); font-size: 1.4rem; font-weight: 900; color: var(--slide-accent); padding: 0 0.5rem; } /* 4. SPORT THEMES: BACKGROUNDS & ACCENTS */ .hero-slide-football { --slide-accent: #10B981; --slide-accent-glow: rgba(16, 185, 129, 0.35); background: radial-gradient(circle at 50% 45%, rgba(16,185,129,0.22), #031e17 75%), #031e17 !important; } .hero-slide-hockey { --slide-accent: #38bdf8; --slide-accent-glow: rgba(56, 189, 248, 0.35); background: radial-gradient(circle at 50% 45%, rgba(56,189,248,0.22), #051626 75%), #051626 !important; } .hero-slide-basketball { --slide-accent: #f59e0b; --slide-accent-glow: rgba(245, 158, 11, 0.35); background: radial-gradient(circle at 50% 45%, rgba(245,158,11,0.22), #1c0f04 75%), #1c0f04 !important; } .hero-slide-nfl { --slide-accent: #ef4444; --slide-accent-glow: rgba(239, 68, 68, 0.35); background: radial-gradient(circle at 50% 45%, rgba(239,68,68,0.22), #1f0609 75%), #1f0609 !important; } /* ========================================================================== TENNIS BACKGROUND: HORIZONTAL COUNTRY FLAGS SPLIT (50/50 TOP/BOTTOM) ========================================================================== */ .hero-slide-tennis { --slide-accent: #ccff00; --slide-accent-glow: rgba(204, 255, 0, 0.4); background: #14031d !important; } .tennis-bg-h-split { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; background: #12021a; } /* Top Half (Home Player) & Bottom Half (Away Player) */ .flag-h-half { position: absolute; left: 0; right: 0; overflow: hidden; } .flag-h-top { top: 0; height: calc(50% + 1px); } .flag-h-bottom { top: 50%; height: 50%; } /* Full-bleed Flag Image occupying half, tilted 30deg to the right, fully visible and readable */ .flag-h-img { position: absolute; top: 50%; left: 50%; width: 175%; height: 175%; min-width: 680px; min-height: 680px; opacity: 0.42; filter: saturate(1.22) brightness(0.80) contrast(1.08); transform: translate(-50%, -50%) rotate(30deg); transform-origin: center center; pointer-events: none; } .flag-h-top .flag-h-img { object-fit: fill; object-position: center center; } .flag-h-bottom .flag-h-img { object-fit: cover; object-position: 45% center; } /* Atmospheric Dark Vignette across both halves — soft edge shading so flag colors shine through */ .flag-h-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(18, 2, 28, 0.05) 0%, rgba(18, 2, 28, 0.38) 65%, rgba(10, 1, 16, 0.8) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.58) 100% ); pointer-events: none; z-index: 2; } /* Desktop Country Flags Vertical Split 50/50 (Rotated 30deg) */ .tennis-bg-v-split { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; background: #12021a; } .flag-v-half { position: absolute; top: 0; bottom: 0; overflow: hidden; } .flag-v-left { left: 0; width: calc(50% + 2px); } .flag-v-right { left: 50%; width: 50%; } .flag-v-img { position: absolute; top: 50%; left: 50%; width: 175%; height: 175%; min-width: 1100px; min-height: 950px; opacity: 0.55; filter: saturate(1.35) brightness(0.92) contrast(1.10); transform: translate(-50%, -50%) rotate(30deg); transform-origin: center center; pointer-events: none; } .flag-v-left .flag-v-img { object-fit: fill; object-position: center center; } .flag-v-right .flag-v-img { object-fit: cover; object-position: 45% center; } .flag-v-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(18, 2, 28, 0.05) 0%, rgba(18, 2, 28, 0.28) 65%, rgba(10, 1, 16, 0.70) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.55) 100% ); pointer-events: none; z-index: 2; } /* Time Badge in Hero Badges Bar */ .hero-badge-time-group { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .hero-badge-pill.hero-badge-time { color: rgba(255, 255, 255, 0.72) !important; } .hero-slide-f1 { --slide-accent: #ec4899; --slide-accent-glow: rgba(236, 72, 153, 0.35); background: radial-gradient(circle at 50% 45%, rgba(236,72,153,0.22), #180414 75%), #180414 !important; } .hero-slide-wrestling { --slide-accent: #f97316; --slide-accent-glow: rgba(249, 115, 22, 0.35); background: radial-gradient(circle at 50% 45%, rgba(249,115,22,0.22), #1b0b02 75%), #1b0b02 !important; } /* F1 Atmospheric Background (Mobile & Desktop) */ .f1-mobile-bg-layer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; } .f1-desktop-bg-img { display: none; } @media (max-width: 768px) { .f1-mobile-bg-img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 65% !important; opacity: 0.36 !important; filter: brightness(0.55) contrast(1.22) saturate(1.15) !important; } .f1-desktop-bg-img { display: none !important; } .f1-mobile-bg-scrim { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(14, 4, 12, 0.88) 0%, rgba(14, 4, 12, 0.25) 22%, rgba(14, 4, 12, 0.35) 68%, rgba(14, 4, 12, 0.95) 100%), radial-gradient(ellipse 95% 65% at 50% 50%, rgba(14, 4, 12, 0.65) 0%, rgba(14, 4, 12, 0.25) 65%, transparent 100%) !important; } } @media (min-width: 769px) { .f1-mobile-bg-img { display: none !important; } .f1-desktop-bg-img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; opacity: 0.42 !important; filter: brightness(0.70) contrast(1.18) saturate(1.15) !important; } .f1-mobile-bg-scrim { position: absolute !important; inset: 0 !important; background: radial-gradient(circle at 50% 50%, rgba(18, 4, 20, 0.15) 0%, rgba(18, 4, 20, 0.55) 65%, rgba(10, 2, 12, 0.92) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.85) 100%) !important; } } /* Wrestling Monogram Pattern Background */ .wrestling-monogram-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; } .wrestling-monogram-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .wrestling-monogram-scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(27, 11, 2, 0.35) 0%, rgba(27, 11, 2, 0.82) 80%, #1b0b02 100%), linear-gradient(180deg, rgba(27, 11, 2, 0.72) 0%, transparent 22%, transparent 78%, rgba(27, 11, 2, 0.88) 100%); } /* ========================================================================== HERO FLOATING SYMMETRICAL SPONSOR BANNER (MIRRORS HEADER) ========================================================================== */ .hero-sponsor-wrapper { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; padding: 0 1rem; z-index: 24; box-sizing: border-box; pointer-events: auto; } .hero-sponsor-container { height: 64px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 0.75rem; background: #e70023; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 24px rgba(231, 0, 35, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5); box-sizing: border-box; overflow: hidden; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .hero-sponsor-container:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(231, 0, 35, 0.4), 0 6px 16px rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.35); } .hero-sponsor-picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .hero-sponsor-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; } .hero-sponsor-placeholder { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; height: 100%; } .hero-sponsor-badge { font-family: var(--font-agency), sans-serif; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } .hero-sponsor-title { font-family: var(--font-agency), sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; } /* Pagination Dots (Lifted above Sponsor Banner with 2rem clearance) */ .hero-pagination { position: absolute; bottom: calc(1rem + 64px + 2rem); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 25; } @media (max-width: 768px) { .hero-sponsor-wrapper { position: absolute !important; bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important; left: 0 !important; right: 0 !important; transform: none !important; padding: 0 1rem !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; z-index: 24 !important; } .hero-sponsor-container { height: 64px !important; padding: 0 0.5rem !important; border-radius: 0.75rem !important; background: #0f1013 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; } .hero-sponsor-picture { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .hero-sponsor-img { width: 100% !important; height: auto !important; max-height: 52px !important; object-fit: contain !important; display: block !important; } .hero-pagination { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 64px + 0.75rem) !important; top: auto !important; height: 40px !important; display: flex !important; align-items: center !important; gap: 8px !important; pointer-events: none !important; z-index: 25 !important; } html.is-ios-safari .hero-sponsor-wrapper { top: calc(80px + var(--hero-static-height, 100svh) - max(1.25rem, env(safe-area-inset-bottom, 0px) + 0.85rem) - 64px) !important; bottom: auto !important; } html.is-ios-safari .hero-pagination { top: calc(80px + var(--hero-static-height, 100svh) - max(1.25rem, env(safe-area-inset-bottom, 0px) + 0.85rem) - 64px - 12px - 40px) !important; bottom: auto !important; } .hero-dot { pointer-events: auto !important; } } .hero-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: all 0.3s ease; cursor: pointer; } .hero-dot::before { content: ''; position: absolute; inset: -16px -8px; } .hero-dot.active { width: 24px; border-radius: 4px; background: var(--theme-accent); } .hero-slider-section[data-active-sport="football"] .hero-dot.active { background: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); } .hero-slider-section[data-active-sport="hockey"] .hero-dot.active { background: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, 0.6); } .hero-slider-section[data-active-sport="basketball"] .hero-dot.active { background: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); } .hero-slider-section[data-active-sport="nfl"] .hero-dot.active { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); } .hero-slider-section[data-active-sport="tennis"] .hero-dot.active { background: #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); } .hero-slider-section[data-active-sport="f1"] .hero-dot.active { background: #ec4899; box-shadow: 0 0 10px rgba(236, 72, 153, 0.6); } .hero-slider-section[data-active-sport="wrestling"] .hero-dot.active { background: #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.6); } /* ========================================================================== BACKGROUND: DENSE CLUB DNA TICKER RIBBONS (DESKTOP TEAM SPORTS) ========================================================================== */ .dna-bg-wrapper { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; contain: strict; will-change: transform; backface-visibility: hidden; transform: translateZ(0); } .dna-bg-container { position: absolute; top: -85%; left: -85%; width: 270%; height: 270%; display: flex; flex-direction: column; justify-content: center; gap: var(--dna-gap, 6px); transform: rotate(-30deg); transform-origin: center center; transition: transform 0.4s ease, opacity 0.3s ease; opacity: var(--dna-opacity, 0.14); pointer-events: none; } .dna-row { display: flex; white-space: nowrap; user-select: none; line-height: 0.9; } .dna-track { display: flex; flex-shrink: 0; align-items: center; will-change: transform; } /* ANIMATED MODE (Physical velocity normalized via --row-duration) */ .dna-bg-animated .dna-row-left .dna-track { animation: dnaScrollLeft var(--row-duration, var(--dna-speed, 70s)) linear infinite; } .dna-bg-animated .dna-row-right .dna-track { animation: dnaScrollRight var(--row-duration, var(--dna-speed, 70s)) linear infinite; } /* ZERO-CPU IDLE & INACTIVE SLIDE PAUSE */ .dna-idle-paused .dna-track, .hero-slide:not(.active) .dna-track { animation-play-state: paused !important; } @keyframes dnaScrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes dnaScrollRight { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } /* CENTER-STAGGER NATURAL TICKER (Без искусственных дыр: плотный поток с зазором ~24px) */ .dna-bg-container.dna-mode-center-stagger .dna-unit { width: auto !important; display: inline-flex !important; align-items: center !important; gap: 0 !important; flex-shrink: 0 !important; } .dna-bg-container.dna-mode-center-stagger .dna-name-wrap { flex: none !important; padding: 0 0.8rem !important; } .dna-bg-container.dna-mode-center-stagger .dna-row { justify-content: center !important; } .dna-bg-container.dna-mode-center-stagger .dna-track { position: relative !important; justify-content: center !important; } .dna-bg-container.dna-mode-center-stagger:not(.dna-bg-animated) .dna-track { transform: none !important; } .dna-unit { display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0; white-space: nowrap !important; word-break: keep-all !important; box-sizing: border-box; font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: var(--dna-font-size, 2.1rem); letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; } .dna-unit.outline { color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.85); } .dna-name-wrap { flex: 1; display: flex; justify-content: center; align-items: center; padding: 0 1.2rem; white-space: nowrap; } .dna-star { color: var(--row-color, #10b981); font-size: 0.6em; opacity: 0.85; display: inline-block; line-height: 1; } /* Central Vignette Mask */ .dna-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: background 0.4s; } /* ========================================================================== DNA BACKGROUND SYSTEM (DESKTOP TEXT RIBBONS & MOBILE CHESSBOARD LOGOS / TENNIS TICKER) ========================================================================== */ .hero-slide-team-match .dna-bg-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; } /* Desktop: show text ribbons (.dna-mode-center-stagger), hide mobile chess (.dna-mode-logos) and tennis mobile ticker */ @media (min-width: 769px) { .hero-slide-team-match:not(.hero-slide-tennis) .dna-bg-wrapper { display: block !important; } .hero-slide-tennis .dna-bg-wrapper { display: none !important; } .dna-bg-container.dna-mode-center-stagger { display: flex !important; } .dna-bg-container.dna-mode-logos, .dna-bg-container.dna-mode-tennis { display: none !important; } .hero-slide-tennis .tennis-bg-v-split { display: block !important; } .hero-slide-tennis .tennis-bg-h-split { display: none !important; } } /* Mobile: show chess logos (.dna-mode-logos) and tennis running ticker (.dna-mode-tennis), hide text ribbons (.dna-mode-center-stagger), hide static tennis flag splits, and completely hide the old 360px tilted watermark logos (.hero-team-logo-box) */ @media (max-width: 768px) { .hero-slide-team-match .dna-bg-wrapper { display: block !important; } .dna-bg-container.dna-mode-center-stagger { display: none !important; } .dna-bg-container.dna-mode-logos { display: flex !important; } .dna-bg-container.dna-mode-tennis { display: flex !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-logo-box, .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-home .hero-team-logo-box, .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-away .hero-team-logo-box { display: none !important; } .hero-slide-tennis .tennis-bg-v-split, .hero-slide-tennis .tennis-bg-h-split { display: none !important; } } /* Mobile Chessboard Logo Background Styles (120px / 10px / 10px / -30deg) Zero CPU/GPU drain: pure static layout, contain: strict, no continuous repaint. */ .dna-bg-container.dna-mode-logos { position: absolute; top: -85%; left: -85%; width: 270%; height: 270%; display: flex; flex-direction: column; justify-content: center; gap: var(--dna-gap, 10px); transform: rotate(-30deg); transform-origin: center center; opacity: var(--dna-opacity, 0.22); pointer-events: none; contain: strict; backface-visibility: hidden; transform-style: flat; } .dna-bg-container.dna-mode-logos .dna-row { display: flex; white-space: nowrap; user-select: none; justify-content: center; line-height: 0.9; } .dna-bg-container.dna-mode-logos .dna-row + .dna-row { margin-top: var(--dna-row-margin-top, 0px) !important; } .dna-bg-container.dna-mode-logos .dna-track { display: flex; flex-shrink: 0; align-items: center; justify-content: center; } .dna-logo-cell { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: var(--bg-logo-height, 120px); width: auto !important; box-sizing: border-box; padding: 0 10px !important; overflow: visible; } .dna-logo-cell img { height: var(--bg-logo-height, 120px) !important; width: auto !important; max-width: none !important; max-height: none !important; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.75)); pointer-events: none; } /* Mobile Tennis Running Ticker Background (Player Name + Flag, -30deg Counter-Motion) */ .dna-bg-container.dna-mode-tennis { position: absolute; top: -85%; left: -85%; width: 270%; height: 270%; display: flex; flex-direction: column; justify-content: center; gap: var(--dna-gap, 10px); transform: rotate(-30deg); transform-origin: center center; opacity: var(--dna-opacity, 0.22); pointer-events: none; contain: strict; backface-visibility: hidden; transform-style: flat; } .dna-bg-container.dna-mode-tennis .dna-row { display: flex; white-space: nowrap; user-select: none; justify-content: center; line-height: 0.9; } .dna-bg-container.dna-mode-tennis .dna-row + .dna-row { margin-top: var(--dna-row-margin-top, 0px) !important; } .dna-bg-container.dna-mode-tennis .dna-track { display: flex; flex-shrink: 0; align-items: center; justify-content: center; } .dna-bg-container.dna-mode-tennis .dna-unit { width: auto !important; display: inline-flex !important; align-items: center !important; gap: var(--dna-elem-gap, 0.42rem) !important; margin-right: var(--dna-elem-gap, 0.42rem) !important; flex-shrink: 0 !important; font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: var(--dna-font-size, 1.65rem); letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; padding: 0 !important; box-sizing: border-box; } .dna-bg-container.dna-mode-tennis .dna-unit.outline { color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.85); } .dna-bg-container.dna-mode-tennis .dna-name-wrap { flex: none; white-space: nowrap; margin: 0 !important; padding: 0 !important; } .dna-bg-container.dna-mode-tennis .dna-flag-wrap { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; flex-shrink: 0; vertical-align: middle; } .dna-bg-container.dna-mode-tennis .dna-flag-wrap img { height: 0.74em; width: auto; max-width: 1.4em; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); display: block; } .dna-bg-container.dna-mode-tennis .dna-star { color: var(--row-color, #10b981); font-size: 0.58em; opacity: 0.85; display: inline-flex; align-items: center; justify-content: center; line-height: 1; margin: 0 !important; padding: 0 !important; } /* Inactive Slide Optimization: freeze any background animations on hidden slides */ .hero-slide:not(.active) .dna-track { animation-play-state: paused !important; } /* ========================================================================== FOREGROUND: CENTERED TLA STACK LOCKUP (DNA LAB ARCHETYPE) ========================================================================== */ .foreground-tla-stage { display: none; position: relative; z-index: 10; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; --logo-height: clamp(4.4rem, 5.8vw, 6.2rem); --logo-offset-y: clamp(4px, 0.6vw, 8px); --logo-cell-w: clamp(6.8rem, 8.8vw, 9.6rem); } .tla-lockup-grid { display: grid; grid-template-columns: max-content max-content; column-gap: clamp(1.8rem, 2.8vw, 3.2rem); row-gap: clamp(0.4rem, 0.7vw, 0.8rem); align-items: center; margin: 0 auto; position: relative; } .tla-code-cell { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: clamp(5.6rem, 7.8vw, 8.8rem); line-height: 0.82; color: #ffffff; letter-spacing: -0.02em; text-transform: uppercase; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: flex-start; position: relative; } .tla-logo-cell { height: var(--logo-height, 6.2rem); display: flex; align-items: center; justify-content: center; width: var(--logo-cell-w, 9.6rem); transform: translateY(var(--logo-offset-y, 8px)); filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.88)); position: relative; } .tla-logo-cell img { height: 100%; width: auto; max-height: 100%; object-fit: contain; } /* ========================================================================== HERO DESKTOP CLASH POSTER ARCHITECTURE (TEAM SPORTS: FOOTBALL, HOCKEY, BASKETBALL, NFL) Strictly bounded between slider arrows horizontally, and between header and dots vertically. ========================================================================== */ @media (min-width: 769px) { /* ========================================================================== PROMO VIDEO SLIDE (SLIDE 1) — OPTION 1: UNIFIED CENTERED CLUSTER Title + subtitle + action buttons grouped in vertical center; bottom area over pagination is clean. ========================================================================== */ .hero-slide-promo-video { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .hero-slide-promo-video .hero-video-overlay { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; pointer-events: auto !important; } .hero-slide-promo-video .hero-video-overlay-inner { width: 100% !important; max-width: min(880px, calc(100% - 180px)) !important; padding: 0 1rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .hero-slide-promo-video .hero-video-title { font-family: var(--font-druk-wide), sans-serif !important; font-size: clamp(2rem, 3.6vw, 3.4rem) !important; line-height: 1.05 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #ffffff !important; text-align: center !important; max-width: 100% !important; white-space: normal !important; margin: 0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.75) !important; } .hero-slide-promo-video .hero-video-subtitle { font-family: var(--font-agency), sans-serif !important; font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ffffff !important; text-align: center !important; max-width: 680px !important; margin: 0.85rem 0 0 0 !important; line-height: 1.25 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 3px 14px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.85) !important; } .hero-slide-promo-video .hero-video-actions { display: flex !important; justify-content: center !important; align-items: center !important; margin-top: clamp(1.6rem, 3.2vh, 2.4rem) !important; width: 100% !important; z-index: 20 !important; pointer-events: auto !important; } .hero-slide-promo-video .hero-video-cta-btn { padding: 0.85rem 2.25rem !important; font-size: 1.35rem !important; letter-spacing: 0.08em !important; border-radius: 8px !important; } @media (max-height: 720px) { .hero-slide-promo-video .hero-video-title { font-size: clamp(1.85rem, 3vw, 2.6rem) !important; } .hero-slide-promo-video .hero-video-subtitle { font-size: 1.15rem !important; margin-top: 0.55rem !important; } .hero-slide-promo-video .hero-video-actions { margin-top: clamp(1rem, 2vh, 1.35rem) !important; } } /* ========================================================================== TEAM SPORTS MATCH SLIDES (FOOTBALL, HOCKEY, BASKETBALL, NFL) Coordinate Space: Full Bleed Absolute Box inside .hero-slide ========================================================================== */ .hero-slide-team-match .hero-match-inner { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; box-sizing: border-box !important; pointer-events: none !important; } .hero-slide-team-match .hero-content-center { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; display: block !important; pointer-events: none !important; } /* 1. Full Editorial Typography Badges Bar (Agency FB, uppercase, text with slash) */ .hero-slide-team-match .hero-badges-bar, .hero-slide-event-single .hero-badges-bar { position: absolute !important; top: clamp(84px, 12.5vh, 116px) !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; z-index: 20 !important; margin: 0 !important; pointer-events: none !important; } .hero-slide-team-match .badge-full, .hero-slide-event-single .badge-full { display: inline !important; } .hero-slide-team-match .badge-short, .hero-slide-event-single .badge-short { display: none !important; } .hero-slide-team-match .hero-badge-slash, .hero-slide-event-single .hero-badge-slash { display: inline-flex !important; align-items: center !important; color: rgba(255, 255, 255, 0.38) !important; font-family: var(--font-agency) !important; font-size: 1.35rem !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; } .hero-slide-team-match .hero-badge-time-group, .hero-slide-event-single .hero-badge-time-group { display: inline-flex !important; align-items: center !important; gap: 10px !important; } .hero-slide-team-match .hero-badge-pill, .hero-slide-event-single .hero-badge-pill { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; height: auto !important; font-family: var(--font-agency) !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: rgba(255, 255, 255, 0.85) !important; } .hero-slide-team-match .hero-badge-pill.hero-badge-tournament, .hero-slide-event-single .hero-badge-pill.hero-badge-tournament { color: #ffffff !important; } .hero-slide-team-match .hero-badge-pill.hero-badge-stage, .hero-slide-event-single .hero-badge-pill.hero-badge-stage { color: var(--slide-accent, var(--theme-accent)) !important; } .hero-slide-team-match .hero-badge-pill.hero-badge-time, .hero-slide-event-single .hero-badge-pill.hero-badge-time { color: rgba(255, 255, 255, 0.72) !important; } /* Hero "СОБЫТИЕ ДНЯ" Tag on Desktop: placed directly below badges bar */ .hero-slide-team-match .hero-featured-tag { position: absolute !important; top: calc(clamp(84px, 12.5vh, 116px) + 36px) !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; width: max-content !important; margin: 0 !important; z-index: 20 !important; pointer-events: none !important; } /* 2. Clash Row: Centered between slider arrows horizontally and vertically */ .hero-slide-team-match .hero-clash-row { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; max-width: 1400px !important; gap: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; z-index: 15 !important; margin: 0 !important; box-sizing: border-box !important; pointer-events: none !important; } /* Desktop Team Matches with Club DNA: Hide old horizontal clash row and remove giant background watermark logos */ .hero-slide-team-match:not(.hero-slide-tennis) .hero-clash-row { display: none !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-logo-box { display: none !important; } /* Display centered TLA Stack (Initials + Logos) from DNA Lab */ .hero-slide-team-match:not(.hero-slide-tennis) .foreground-tla-stage { display: flex !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 15 !important; pointer-events: none !important; margin: 0 !important; } /* Switch tennis background to vertical split on desktop */ .hero-slide-tennis .tennis-bg-h-split { display: none !important; } .hero-slide-tennis .tennis-bg-v-split { display: block !important; } /* Desktop Tennis Typography: Surnames only (no VS, no full names), staggered layout */ .hero-slide-tennis.hero-slide-team-match .hero-clash-row { display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100% !important; max-width: 1400px !important; height: 100% !important; pointer-events: none !important; z-index: 15 !important; } .hero-slide-tennis.hero-slide-team-match .hero-team-home, .hero-slide-tennis.hero-slide-team-match .hero-team-away { position: static !important; display: block !important; flex: none !important; width: auto !important; height: auto !important; } .hero-slide-tennis.hero-slide-team-match .hero-team-home .hero-clash-title { position: absolute !important; left: clamp(36px, 5vw, 84px) !important; bottom: calc(50% + clamp(2px, 0.3vh, 5px)) !important; top: auto !important; right: auto !important; text-align: left !important; font-family: var(--font-druk-wide) !important; font-size: clamp(4.4rem, 6.2vw, 7.8rem) !important; font-weight: 700 !important; line-height: 0.85 !important; letter-spacing: -0.01em !important; color: #ffffff !important; text-transform: uppercase !important; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9) !important; white-space: nowrap !important; pointer-events: auto !important; margin: 0 !important; z-index: 20 !important; } .hero-slide-tennis.hero-slide-team-match .hero-team-away .hero-clash-title { position: absolute !important; right: clamp(36px, 5vw, 84px) !important; top: calc(50% + clamp(2px, 0.3vh, 5px)) !important; bottom: auto !important; left: auto !important; text-align: right !important; font-family: var(--font-druk-wide) !important; font-size: clamp(4.4rem, 6.2vw, 7.8rem) !important; font-weight: 700 !important; line-height: 0.85 !important; letter-spacing: -0.01em !important; color: #ffffff !important; text-transform: uppercase !important; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9) !important; white-space: nowrap !important; pointer-events: auto !important; margin: 0 !important; z-index: 20 !important; } .hero-slide-tennis.hero-slide-team-match .hero-clash-center, .hero-slide-tennis.hero-slide-team-match .hero-team-full-name, .hero-slide-tennis.hero-slide-team-match .hero-player-flag, .hero-slide-tennis.hero-slide-team-match .hero-team-logo-box { display: none !important; } /* Desktop Archetype 3: Single Event Cards (F1 & Wrestling) */ .hero-slide-event-single .hero-match-inner { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; } .hero-slide-event-single .hero-content-center { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; } .hero-slide-event-single .hero-event-center { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; max-width: min(1200px, calc(100% - 160px)) !important; text-align: center !important; z-index: 15 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; } .hero-slide-event-single .hero-event-title { font-family: var(--font-druk-wide) !important; font-size: clamp(3.2rem, 4.6vw, 5.6rem) !important; line-height: 0.95 !important; letter-spacing: -0.01em !important; color: #ffffff !important; text-transform: uppercase !important; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9) !important; margin: 0 !important; } .hero-slide-event-single .hero-event-subtitle { display: block !important; font-family: var(--font-agency) !important; font-size: clamp(1.4rem, 2vw, 2.2rem) !important; font-weight: 700 !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.55) !important; margin-top: clamp(8px, 1.2vh, 16px) !important; text-transform: uppercase !important; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9) !important; } /* Desktop Background Team Logos: Symmetrically anchored, monumental scale, zero central crossing */ .hero-slide-team-match .hero-team-logo-box { display: flex !important; position: absolute !important; top: 50% !important; width: clamp(580px, 54vw, 750px) !important; height: clamp(620px, 86vh, 820px) !important; align-items: center !important; justify-content: center !important; z-index: 1 !important; pointer-events: none !important; } .hero-slide-team-match .hero-team-home .hero-team-logo-box { left: calc(50% - clamp(314px, 29vw, 400px)) !important; transform: translate(-50%, -50%) !important; } .hero-slide-team-match .hero-team-away .hero-team-logo-box { left: calc(50% + clamp(314px, 29vw, 400px)) !important; transform: translate(-50%, -50%) !important; } .hero-slide-team-match .hero-team-home .hero-team-logo-box img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; opacity: 0.32 !important; filter: brightness(32%) drop-shadow(0 14px 32px rgba(0, 0, 0, 0.75)) !important; transform-origin: right center !important; transform: scale(var(--hero-bg-logo-scale, 1)) rotate(0deg) !important; } .hero-slide-team-match .hero-team-away .hero-team-logo-box img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; opacity: 0.32 !important; filter: brightness(32%) drop-shadow(0 14px 32px rgba(0, 0, 0, 0.75)) !important; transform-origin: left center !important; transform: scale(var(--hero-bg-logo-scale, 1)) rotate(0deg) !important; } /* Home Team (Left): Flex 1, column layout, pushed to right (adjacent to VS), centered vertically */ .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-home { position: static !important; flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-end !important; gap: 0 !important; min-width: 0 !important; pointer-events: auto !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-home .hero-clash-title { position: relative !important; z-index: 16 !important; text-align: right !important; white-space: nowrap !important; font-family: var(--font-druk-wide) !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #ffffff !important; font-size: var(--hero-team-font-size, 5.5rem) !important; line-height: 1 !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 1) !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } /* Center: VS in exact center, accent color with symmetric 28px gap */ .hero-slide-team-match:not(.hero-slide-tennis) .hero-clash-center { position: relative !important; z-index: 16 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 28px !important; box-sizing: border-box !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-clash-center .hero-vs-text { font-family: var(--font-druk-wide) !important; font-size: var(--hero-vs-font-size, var(--hero-team-font-size, 5.5rem)) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.03em !important; color: var(--slide-accent) !important; text-shadow: 0 0 24px var(--slide-accent-glow, rgba(255, 255, 255, 0.25)) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; transform: translateY(var(--hero-vs-offset-y, 0px)) !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-clash-center .hero-status-tag, .hero-slide-team-match:not(.hero-slide-tennis) .hero-clash-center .hero-countdown-tag { display: none !important; } /* Away Team (Right): Flex 1, column layout, pushed to left (adjacent to VS), centered vertically */ .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-away { position: static !important; flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 0 !important; min-width: 0 !important; pointer-events: auto !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-away .hero-clash-title { position: relative !important; z-index: 16 !important; text-align: left !important; white-space: nowrap !important; font-family: var(--font-druk-wide) !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #ffffff !important; font-size: var(--hero-team-font-size, 5.5rem) !important; line-height: 1 !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 1) !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } /* Full Team Names: Positioned in-flow below short titles, aligned to the same vertical boundary */ .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-full-name { display: block !important; position: relative !important; top: auto !important; margin-top: 0 !important; font-family: var(--font-agency) !important; font-size: var(--hero-full-name-font-size, 2.4rem) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.82) !important; line-height: 1 !important; white-space: nowrap !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 1) !important; padding: 0 !important; pointer-events: auto !important; z-index: 16 !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-home .hero-team-full-name { align-self: flex-end !important; text-align: right !important; } .hero-slide-team-match:not(.hero-slide-tennis) .hero-team-away .hero-team-full-name { align-self: flex-start !important; text-align: left !important; } /* 3. Bottom Actions: Centered Horizontal Cluster for All Sports (Live / Countdown + Button) */ .hero-slide-team-match .hero-bottom-actions, .hero-slide-event-single .hero-bottom-actions { position: absolute !important; bottom: calc(1rem + 64px + 2rem + 44px) !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; max-width: none !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(1.2rem, 2vw, 1.8rem) !important; z-index: 20 !important; box-sizing: border-box !important; pointer-events: auto !important; } .hero-slide-team-match .hero-mobile-status, .hero-slide-event-single .hero-mobile-status { display: flex !important; align-items: center !important; } .hero-slide-team-match .hero-status-live-text, .hero-slide-event-single .hero-status-live-text { font-family: var(--font-agency) !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ef4444 !important; white-space: nowrap !important; line-height: 1 !important; text-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important; } .hero-slide-team-match .hero-status-timer-prefix, .hero-slide-event-single .hero-status-timer-prefix { font-family: var(--font-agency) !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.65) !important; white-space: nowrap !important; line-height: 1 !important; margin-right: 6px !important; } .hero-slide-team-match .hero-status-timer-digits, .hero-slide-event-single .hero-status-timer-digits { font-family: var(--font-agency) !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ef4444 !important; white-space: nowrap !important; line-height: 1 !important; text-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important; } } /* ========================================================================== SCREEN 2: SPORTS HUB (INTERACTIVE DESKTOP STACK + MOBILE 100DVH DRUM) ========================================================================== */ .sports-hub-section { position: relative; width: 100%; background-color: #FFFFFF; transition: background-color 0.38s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; overflow: hidden; } /* ── Desktop View Container (min-width: 992px) ── */ @media (min-width: 992px) { .sports-hub-mobile-wrapper { display: none !important; } .sports-hub-desktop-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; height: 100dvh; min-height: 560px; max-height: 880px; position: relative; } } /* ── Mobile View Container (max-width: 991px) ── */ @media (max-width: 991px) { #sports-hub { height: var(--hero-static-height, 100dvh) !important; min-height: var(--hero-static-height, 100dvh) !important; max-height: var(--hero-static-height, 100dvh) !important; overflow: hidden; } html.is-ios-safari #sports-hub { height: calc(100lvh + 200px) !important; min-height: calc(100lvh + 200px) !important; max-height: calc(100lvh + 200px) !important; } .sports-hub-desktop-wrapper { display: none !important; } .sports-hub-mobile-wrapper { display: flex; width: 100%; height: 100%; position: relative; } } /* ── DESKTOP SPORTS STACK ── */ .desktop-sports-stack { --sport-font-size: clamp(3.4rem, 5.2vw, 4.8rem); --row-shift: clamp(14px, 1.7vw, 20px); display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; z-index: 10; } .d-sport-row { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; text-decoration: none; cursor: pointer; font-size: var(--sport-font-size); line-height: 0.94; margin: 3px 0; z-index: 5; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease; will-change: transform; } /* Push-apart shifts */ .d-sport-row.is-shifted-up { transform: translateY(calc(-1 * var(--row-shift))); } .d-sport-row.is-shifted-down { transform: translateY(var(--row-shift)); } .d-sport-row:hover, .d-sport-row.is-active { z-index: 20; transform: translateY(0) !important; } /* The Solid Black Ribbon */ .d-sport-row::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 0.06em)) scaleY(0.85); width: 100vw; height: 1.38em; background: #000000; opacity: 0; z-index: 1; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .d-sport-row:hover::before, .d-sport-row.is-active::before { opacity: 1; transform: translate(-50%, calc(-50% + 0.06em)) scaleY(1); } /* Desktop Sports Hub Chevrons (Крупные жирные галки по краям) */ .d-sport-chevrons-track { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; padding: 0 clamp(20px, 3.2vw, 48px); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 10; } .d-sport-chevron { display: inline-flex; align-items: center; justify-content: center; height: 0.68em; /* Точно по высоте заглавных букв видов спорта (без учета черточки у буквы Й) */ width: auto; color: var(--item-accent); filter: drop-shadow(0 0 18px rgba(var(--item-accent-rgb), 0.6)); opacity: 0; pointer-events: none; user-select: none; margin-top: 0.08em; /* Идеальная калибровка: нижняя грань шеврона на базовой линии текста */ transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .d-sport-chevron svg { display: block; height: 100%; width: auto; fill: currentColor; } .d-sport-row:hover .d-sport-chevron, .d-sport-row.is-active .d-sport-chevron { opacity: 1; } .d-sport-chevron-left { animation: dChevronDriftRight 1.8s ease-in-out infinite; } .d-sport-chevron-right { animation: dChevronDriftLeft 1.8s ease-in-out infinite; } @keyframes dChevronDriftRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @keyframes dChevronDriftLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } } @media (prefers-reduced-motion: reduce) { .d-sport-chevron-left, .d-sport-chevron-right { animation: none; } } .d-sport-content { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .d-sport-text { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 1em; font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; color: #000000; padding: 0; transition: color 0.25s ease; text-align: center; display: inline-block; line-height: 0.92; white-space: nowrap; } .d-sport-row:hover .d-sport-text, .d-sport-row.is-active .d-sport-text { color: var(--item-accent) !important; text-shadow: 0 0 35px rgba(var(--item-accent-rgb), 0.45); } /* Desktop Event Meta Stack (Agency FB) */ .d-sport-meta { display: flex; flex-direction: column; height: 0.84em; box-sizing: border-box; max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; pointer-events: none; transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.32s cubic-bezier(0.16, 1, 0.3, 1); text-align: left; flex-shrink: 0; transform: translateY(0.06em); } .d-sport-row:hover .d-sport-meta, .d-sport-row.is-active .d-sport-meta { max-width: 520px; opacity: 1; margin-left: clamp(16px, 1.8vw, 24px); pointer-events: auto; overflow: visible; } .d-sport-meta.meta-count-3 { justify-content: space-between; } .d-sport-meta.meta-count-3 .meta-line { font-size: 0.225em; line-height: 1; } .d-sport-meta.meta-count-2 { justify-content: space-between; } .d-sport-meta.meta-count-2 .meta-line { font-size: 0.34em; line-height: 1; } .d-sport-meta.meta-count-1 { justify-content: center; } .d-sport-meta.meta-count-1 .meta-line { font-size: 0.34em; line-height: 1; } .meta-line { font-family: var(--font-agency); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; white-space: nowrap; display: flex; align-items: center; gap: 0.35em; } .meta-line.meta-live, .m-sub-item.meta-live { color: #FF4444; text-shadow: 0 0 14px rgba(255, 68, 68, 0.5); } .meta-line.meta-soon, .m-sub-item.meta-soon { color: #FFFFFF; } .meta-line.meta-done, .m-sub-item.meta-done { color: #A1A1AA; } .meta-num { font-weight: 900; font-feature-settings: 'tnum'; } /* Info Icon 'i' in Circle */ .meta-info-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 0.82em; height: 0.82em; margin-left: 0.28em; color: #A1A1AA; vertical-align: -0.05em; cursor: help; transition: color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .meta-info-icon svg { width: 100%; height: 100%; display: block; } .meta-info-icon:hover, .meta-info-icon:focus-visible { color: #FFFFFF; transform: scale(1.15); } .star-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #18181B; border: 1px solid rgba(255, 255, 255, 0.15); color: #FFFFFF; font-family: var(--font-inter), sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); z-index: 50; } .star-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #18181B; } .meta-info-icon:hover .star-tooltip, .meta-info-icon:focus-visible .star-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ── MOBILE 100DVH DRUM STAGE ── */ .mobile-hub-stage { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; touch-action: none; background-color: #FFFFFF; transition: background-color 0.38s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 640px) and (max-width: 991px) { .mobile-hub-stage { max-width: 480px; margin: 0 auto; } } /* Solid Black Stripe - Fixed Center Lens */ .mobile-black-stripe { position: absolute; top: 50%; left: 0; transform: translateY(-50%) scaleY(0.85); width: 100%; height: 64px; background: #000000; z-index: 2; pointer-events: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-hub-stage.is-active .mobile-black-stripe { opacity: 1; transform: translateY(-50%) scaleY(1); } .mobile-drum-track { position: absolute; inset: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; z-index: 10; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%); } .m-drum-list { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(calc(-32px + var(--drum-y, 0px))); will-change: transform; display: flex; flex-direction: column; align-items: center; } .m-drum-item { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; position: relative; transition: opacity 0.25s ease, height 0.22s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; -webkit-user-select: none; flex-shrink: 0; } .m-drum-item.is-centered { height: 64px; } .m-drum-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 16px; position: relative; z-index: 6; } .m-drum-text { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: var(--m-sport-font-size, clamp(1.4rem, 6.4vw, 1.85rem)); font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; color: #000000; opacity: 0.35; transform: translateY(-2px) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease; text-align: center; white-space: nowrap; line-height: 1; } .m-drum-item.is-centered .m-drum-text { opacity: 1; transform: translateY(-5px) scale(1); color: var(--item-accent) !important; text-shadow: 0 0 25px rgba(var(--item-accent-rgb), 0.45); } /* Neutral state when stage is not active */ .mobile-hub-stage:not(.is-active) .m-drum-item.is-centered .m-drum-text, .mobile-hub-stage:not(.is-active) .m-drum-item .m-drum-text { color: #000000 !important; text-shadow: none !important; opacity: 0.35 !important; transform: translateY(-2px) scale(0.96) !important; } .m-drum-subline { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; font-family: var(--font-agency); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; gap: 6px; align-items: center; display: flex; } .m-drum-item.is-centered .m-drum-subline { opacity: 1; transform: translateX(-50%) translateY(0); } .mobile-hub-stage:not(.is-active) .m-drum-item.is-centered .m-drum-subline { opacity: 0 !important; visibility: hidden !important; } .m-sub-item { display: inline-flex; align-items: center; gap: 3px; } .m-sub-dot { color: #52525B; font-size: 0.6rem; } /* ── Mobile Drum Directional Hints (ВЫБЕРИ ВИД СПОРТА ↓ / ↑) ── */ .m-drum-hint { position: absolute; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; user-select: none; -webkit-user-select: none; font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: clamp(1.4rem, 5.8vw, 2.05rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.08; color: #000000; opacity: 1; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease; z-index: 5; } /* Passive neutral state (white background): high contrast solid black */ .mobile-hub-stage:not(.is-active):not(.is-swiping) .m-drum-hint { color: #000000 !important; opacity: 1 !important; } /* When selecting / active sport: same opacity as non-selected sports */ .mobile-hub-stage.is-active .m-drum-hint, .mobile-hub-stage.is-swiping .m-drum-hint { color: #000000 !important; opacity: 0.35 !important; } /* Centered in the empty space between Header and first sport (Football) */ .m-drum-hint-top { top: calc(-1 * (var(--hero-static-height, 100svh) / 4 - 25px)); transform: translateY(-50%); } /* Centered in the empty space between last sport (Wrestling) and bottom of screen */ .m-drum-hint-bottom { top: calc(280px + (var(--hero-static-height, 100svh) / 4 - 25px)); transform: translateY(-50%); } .m-hint-text { display: flex; flex-direction: column; align-items: center; justify-content: center; } .m-hint-line { display: block; white-space: nowrap; } .m-hint-arrow { display: inline-flex; align-items: center; justify-content: center; color: currentColor; flex-shrink: 0; } .m-drum-hint-top .m-hint-arrow { margin-top: 12px; margin-bottom: 0; } .m-drum-hint-bottom .m-hint-arrow { margin-bottom: 12px; margin-top: 0; } .m-hint-arrow svg { display: block; width: 26px; height: 26px; } .m-hint-arrow-down { animation: hintBounceDown 1.8s ease-in-out infinite; } .m-hint-arrow-up { animation: hintBounceUp 1.8s ease-in-out infinite; } @keyframes hintBounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes hintBounceUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .m-hint-arrow-down, .m-hint-arrow-up { animation: none; } } /* ========================================================================== SCHEDULE SECTION & ORIGINAL EVENT CARD ========================================================================== */ .schedule-section { padding: 4rem 0 6rem; position: relative; } .section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .section-title { font-family: var(--font-agency); font-size: 2.2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; } .event-card { background: rgba(9, 9, 11, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; transition: all 0.2s ease; position: relative; } .event-card:hover { background: var(--theme-surface-hover); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .event-card-live-bar { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--danger); } .event-teams-col { display: flex; flex-direction: column; gap: 6px; flex: 1; max-width: 400px; } .event-team-row { display: flex; align-items: center; gap: 10px; } .event-team-logo { width: 22px; height: 22px; object-fit: contain; } .event-team-name { font-size: 0.95rem; font-weight: 600; color: #fff; } .event-score-box { font-family: var(--font-agency); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; min-width: 60px; text-align: center; } .event-meta-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .event-time-text { font-family: var(--font-jetbrains); font-size: 0.9rem; font-weight: 600; color: var(--theme-text-primary); } .event-comm-text { font-size: 0.8rem; color: var(--theme-text-muted); } /* ========================================================================== VIDEOBLOG & COMMENTATORS ========================================================================== */ .videoblog-section, .commentators-section { padding: 3rem 0 5rem; } .commentators-slider-wrap { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; } .commentators-slider-wrap::-webkit-scrollbar { display: none; } .commentator-card { min-width: 240px; background: rgba(9, 9, 11, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s ease, border-color 0.2s ease; } .commentator-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); } .commentator-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 2px solid rgba(255, 255, 255, 0.1); } .commentator-name { font-family: var(--font-agency); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; margin-bottom: 2px; } .commentator-sport { font-size: 0.8rem; color: var(--theme-text-muted); } /* ========================================================================== FOOTER (ORIGINAL SPORTCAST DNA) ========================================================================== */ .footer-section { padding: 4rem 0 3rem; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 4rem; } .footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; flex-wrap: wrap; margin-bottom: 3rem; } @media (min-width: 640px) and (max-width: 991px) { .footer-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } .footer-nav-col { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col-header { font-family: var(--font-agency); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--theme-text-muted); margin-bottom: 0.5rem; } .footer-link { font-size: 0.95rem; color: var(--theme-text-secondary); transition: color 0.2s ease; } .footer-link:hover { color: #fff; } /* ========================================================================== 3-RING EXPANDING RIPPLE TRANSITION ========================================================================== */ .sc-transition-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; display: none; overflow: hidden; } .sc-ring { position: absolute; top: 0; left: 0; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; border-radius: 50%; pointer-events: none; will-change: transform, opacity; transform-origin: center center; } .sc-ring-1 { z-index: 1; /* Hardware scaled base radius (calibrated from 130vmax) */ } .sc-ring-2 { z-index: 2; } .sc-ring-3 { z-index: 3; } /* ========================================================================== FULLSCREEN MENU POPUP V2 (AWWWARDS / CHAMPIONS FOR GOOD EDITORIAL AESTHETIC) ========================================================================== */ .menu-popup-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 2000; background: rgba(9, 9, 11, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: none; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 0 2.5rem; box-sizing: border-box; } .menu-popup-overlay.open { display: flex; } /* Mirrored Header Wrapper: Logo matches default header down to the exact pixel */ .menu-popup-header-wrapper { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; flex-shrink: 0; } .menu-popup-header-container { height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; border-radius: 0.75rem; background: rgba(9, 9, 11, 0.60); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); box-sizing: border-box; } /* Close button matching SPORTCAST text logo styling (Agency FB, bold, white, theme glow) */ .menu-popup-close-btn { position: relative; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: flex-end; text-decoration: none; padding: 0; min-width: 44px; min-height: 44px; transition: transform 0.2s ease; } .menu-popup-close-btn:hover { transform: scale(1.04); } .menu-popup-close-text { font-family: var(--font-agency); font-size: 2.625rem; font-weight: 900; line-height: 1; color: #ffffff; text-transform: uppercase; letter-spacing: 0; -webkit-text-stroke: 1px #ffffff; transition: text-shadow 0.3s ease; position: relative; } .menu-popup-close-glow { position: absolute; inset: 0; font-family: var(--font-agency); font-size: 2.625rem; font-weight: 900; line-height: 1; color: var(--theme-accent); filter: blur(8px); opacity: 0; pointer-events: none; z-index: -1; transition: opacity 0.3s ease, color 0.4s ease; } .menu-popup-close-btn:hover .menu-popup-close-glow { opacity: 0.7; } .menu-popup-close-btn:hover .menu-popup-close-text { text-shadow: 0 0 16px var(--theme-accent-glow); } /* Clean Editorial Navigation Content (Strictly fitted within screen without overflow) */ .menu-popup-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: clamp(2rem, 5vh, 4rem) 2rem clamp(1.5rem, 4vh, 3rem); box-sizing: border-box; } .menu-popup-nav { display: flex; flex-direction: column; gap: clamp(0.75rem, 2.2vh, 1.75rem); } .menu-popup-link { font-family: var(--font-agency); font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; color: #ffffff; text-decoration: none; width: fit-content; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease, text-shadow 0.25s ease; position: relative; display: inline-flex; align-items: center; } .menu-popup-link:hover { color: var(--theme-accent); transform: translateX(12px); text-shadow: 0 0 24px var(--theme-accent-glow); } .menu-popup-link:active { transform: translateX(8px) scale(0.98); } /* Socials row */ .menu-popup-socials { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .menu-popup-social-label { font-family: var(--font-agency); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--theme-text-muted); } .menu-popup-social-links { display: flex; align-items: center; gap: 1rem; } .menu-popup-social-link { font-family: var(--font-agency); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--theme-text-secondary); transition: all 0.2s ease; min-height: 44px; display: inline-flex; align-items: center; } .menu-popup-social-link.tg-link:hover { color: #0088cc; text-shadow: 0 0 16px rgba(0, 136, 204, 0.5); } .menu-popup-social-link.vk-link:hover { color: #0077ff; text-shadow: 0 0 16px rgba(0, 119, 255, 0.5); } .menu-popup-social-divider { font-family: var(--font-agency); font-size: 1.2rem; color: rgba(255, 255, 255, 0.2); } /* Mobile Safari & iOS Full-Bleed Overrides */ @media (max-width: 768px) { .menu-popup-overlay { padding: max(1rem, env(safe-area-inset-top, 0px)) 0 max(1.5rem, env(safe-area-inset-bottom, 0px)); } .menu-popup-header-wrapper { padding: 0 1rem; } .menu-popup-header-container { height: 64px; padding: 0 1.25rem; } .menu-popup-close-text, .menu-popup-close-glow { font-size: 1.875rem; /* 30px exact match with Header.tsx text-3xl on mobile */ } .menu-popup-content { padding: clamp(1.5rem, 3vh, 2.5rem) 1.5rem clamp(1rem, 2vh, 2rem); } .menu-popup-link { font-size: clamp(2.1rem, 7.5vw, 3rem); } } /* ========================================================================== EVENT PAGE — ОРИГИНАЛЬНАЯ КОМПОНОВКА СОБЫТИЯ (SPORTCAST.ONLINE / .PRO) ========================================================================== */ .event-main-wrapper { padding-top: clamp(5.5rem, 8vw, 8rem); padding-bottom: 4rem; min-height: 100vh; } .event-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; } /* Sub-header Bar (Back link + Date/Time) */ .event-sub-header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: clamp(1rem, 2vw, 2rem); } .event-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-agency); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-muted); text-decoration: none; background: none; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color 0.2s; } .event-back-btn:hover { color: #ffffff; } .event-back-btn svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; transition: transform 0.2s; } .event-back-btn:hover svg { transform: translateX(-4px); } .event-divider-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2); margin: 0 1.5rem; min-width: 10px; } .event-datetime-label { font-family: var(--font-agency); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-muted); white-space: nowrap; flex-shrink: 0; } /* Top Section: Player + Info Block */ .event-top-grid { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.5vw, 3rem); align-items: stretch; } /* Base Mobile Orders */ .event-info-col { width: 100%; display: flex; flex-direction: column; order: 1; transition: all 0.3s ease; } .event-player-col { width: 100%; display: flex; flex-direction: column; order: 2; transition: all 0.3s ease; } :root { --event-player-width: 60%; } @media (min-width: 1024px) { .event-main-wrapper { min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; /* Top offset: Header top (24px) + Header height (64px) + tight air below header (18px) = 106px */ padding-top: calc(1.5rem + 64px + 18px) !important; /* Bottom offset: Strictly 24px (1.5rem) matching top distance from viewport top to header */ padding-bottom: 1.5rem !important; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; } @media (max-height: 740px) { .event-main-wrapper { height: auto !important; min-height: 100vh !important; overflow-y: auto !important; } } .event-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem !important; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; justify-content: space-between; /* Subheader at top, Player+Info centered in middle, Commentators at bottom */ min-height: 0; } .event-sub-header { margin-top: 0 !important; margin-bottom: clamp(0.65rem, 1.2vh, 1rem) !important; flex-shrink: 0; } .event-top-grid { flex-direction: row; align-items: stretch; /* Player and Info block share identical 16:9 vertical height */ justify-content: space-between; min-height: 0; max-height: none; gap: 20px !important; /* Strict 20px gap as requested */ margin: auto 0; /* Vertically centered between subheader and commentators */ transition: all 0.3s ease; width: 100%; } .event-player-col { width: var(--event-player-width, 60%) !important; max-width: var(--event-player-width, 60%) !important; flex: 0 0 var(--event-player-width, 60%) !important; order: 1 !important; /* Player strictly on LEFT on desktop */ display: flex; flex-direction: column; justify-content: center; } .event-info-col { width: calc(100% - var(--event-player-width, 60%) - 20px) !important; max-width: calc(100% - var(--event-player-width, 60%) - 20px) !important; flex: 1 1 0% !important; min-width: 0 !important; order: 2 !important; /* Info strictly on RIGHT on desktop */ display: flex; flex-direction: column; justify-content: center; } .event-commentators-section { margin-top: clamp(0.65rem, 1.2vh, 1rem) !important; margin-bottom: 0 !important; flex-shrink: 0; } } @media (min-width: 1280px) { .event-player-col { width: var(--event-player-width, 60%) !important; max-width: var(--event-player-width, 60%) !important; flex: 0 0 var(--event-player-width, 60%) !important; order: 1 !important; } .event-info-col { width: calc(100% - var(--event-player-width, 60%) - 20px) !important; max-width: calc(100% - var(--event-player-width, 60%) - 20px) !important; flex: 1 1 0% !important; min-width: 0 !important; order: 2 !important; } } /* Video Player Card (Flat Tile Architecture - Shadow Removed) */ .event-player-card { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: #000000; border: none !important; box-shadow: none !important; } .event-player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .event-player-slider-controls { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.3s ease; } .event-player-card:hover .event-player-slider-controls { opacity: 1; } .event-player-control-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: all 0.2s; } .event-player-control-btn:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.1); } .event-player-control-btn:disabled { opacity: 0; pointer-events: none; } /* Player: Countdown State */ .event-player-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; background: rgba(9, 9, 11, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); position: relative; } .event-placeholder-title { font-family: var(--font-agency); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-text-muted); margin-bottom: 1.5rem; position: relative; z-index: 2; } .event-countdown-grid { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); position: relative; z-index: 2; } .event-countdown-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: clamp(54px, 7vw, 84px); padding: clamp(0.5rem, 1vw, 0.85rem); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; } .event-countdown-num { font-family: var(--font-agency); font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 900; color: #ffffff; line-height: 1; } .event-countdown-lbl { font-family: var(--font-agency); font-size: clamp(0.7rem, 0.9vw, 0.85rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-muted); margin-top: 0.25rem; } .event-countdown-dots { font-family: var(--font-agency); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 900; color: rgba(255, 255, 255, 0.3); margin-bottom: 1rem; } /* Match Info Block (Frameless Flat Architecture) */ .event-info-card { position: relative; width: 100%; height: 100%; min-height: 100%; max-height: 100%; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.4rem, 2.6vh, 2.4rem); /* More breathing room between TLA, tabs, and buttons */ } /* 1. TLA Stack (Full-width monumental lockup with shared vertical logo axis) */ .event-tla-stack { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.4vh, 1.25rem); width: 100% !important; max-width: 100% !important; } .event-tla-row { display: flex; align-items: baseline; /* Mathematical baseline lock: bottom of slot binds to font baseline */ justify-content: space-between; width: 100% !important; max-width: 100% !important; position: relative; } .event-tla-code { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: var(--tla-font-size, clamp(3.8rem, 5.8vw, 7.5rem)); line-height: 0.88; /* Optimal line-height giving full vertical breathing room for Druk Wide Cyr */ color: #ffffff; letter-spacing: -0.02em; text-transform: uppercase; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); white-space: nowrap; } .event-tla-slot { display: flex; align-items: center; justify-content: center; width: var(--max-logo-w, clamp(3.8rem, 5.5vw, 5.2rem)); min-width: var(--max-logo-w, clamp(3.8rem, 5.5vw, 5.2rem)); height: var(--tla-logo-h, clamp(2.6rem, 4vw, 3.8rem)); flex-shrink: 0; position: relative; transform: none; /* Exact cap-height height + baseline alignment binds logo visual bounds 1:1 with glyphs */ } .event-tla-logo { max-height: 100%; max-width: 100%; width: auto; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.85)); } .event-tla-score { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: var(--tla-font-size, clamp(3.4rem, 5.2vw, 5.2rem)); line-height: 0.84; color: #ffffff; letter-spacing: -0.02em; text-align: center; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); } .event-tla-flag { border-radius: 4px; object-fit: cover !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); } /* ========================================================================== EVENT SINGLE / NON-TEAM STAGE (F1, WWE) ========================================================================== */ .event-nonteam-stage { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden; gap: clamp(0.4rem, 0.9vh, 0.75rem); padding: 0.35rem 0; } .event-nonteam-title { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: var(--nonteam-title-size, clamp(1.6rem, 3.2vw, 2.8rem)); font-weight: 900; line-height: 1.05; color: #ffffff; text-transform: uppercase; letter-spacing: -0.02em; margin: 0; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); max-width: 100% !important; overflow-wrap: break-word; } .event-nonteam-subtitle { font-family: var(--font-agency); font-size: var(--nonteam-sub-size, clamp(1.15rem, 1.5vw, 1.45rem)); font-weight: 700; color: #a1a1aa; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; max-width: 100% !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 2. Text Badges Bar (Tournament Stage Tabs — Centered & Fit in Single Line) */ .event-badges-bar { display: flex; align-items: center; justify-content: center; /* Centered across info block width */ flex-wrap: nowrap; gap: clamp(0.5rem, 0.8vw, 0.85rem); width: 100%; max-width: 100%; margin: 0; text-align: center; overflow: hidden; } .event-badge-pill { font-family: var(--font-agency); font-size: var(--tournament-badge-font-size, clamp(1.25rem, 1.6vw, 1.55rem)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-text-muted); white-space: nowrap; line-height: 1; } .event-badge-slash { color: rgba(255, 255, 255, 0.3); font-family: var(--font-agency); font-weight: 700; font-size: var(--tournament-badge-font-size, clamp(1.25rem, 1.6vw, 1.55rem)); line-height: 1; } /* 3. Action Buttons Row (Accent Ratio 65% / 35%) */ .event-actions-stack { display: flex; flex-direction: row; align-items: stretch; gap: 0.6rem; width: 100%; max-width: 100%; margin-top: 0.25rem; } .event-btn-bonus { flex: 0 0 calc(65% - 0.3rem); width: calc(65% - 0.3rem); display: flex !important; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.8rem 0.85rem !important; font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important; border-radius: 8px !important; text-decoration: none; border: none; cursor: pointer; box-sizing: border-box; white-space: nowrap; } .event-btn-chat { flex: 0 0 calc(35% - 0.3rem); width: calc(35% - 0.3rem); display: flex !important; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.8rem 0.6rem !important; font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important; border-radius: 8px !important; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.22) !important; cursor: pointer; box-sizing: border-box; white-space: nowrap; } .event-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .sport-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; font-family: var(--font-agency); font-size: clamp(0.85rem, 1.1vw, 1.05rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .sport-badge-dark { background: rgba(255, 255, 255, 0.05); color: var(--theme-text-secondary); border: 1px solid rgba(255, 255, 255, 0.06); } .sport-badge-live { background: var(--danger); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); } .event-chat-toggle-btn { flex-shrink: 0; font-family: var(--font-agency); font-size: clamp(0.9rem, 1.1vw, 1.05rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: var(--theme-text-muted); cursor: pointer; transition: all 0.2s ease; } .event-chat-toggle-btn.active { background: var(--theme-accent); border-color: var(--theme-accent); color: #ffffff; box-shadow: 0 0 14px var(--theme-accent-glow); } .event-chat-toggle-btn:hover:not(.active) { border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } /* Clash Row (Home vs Away) */ .event-clash-row { display: flex; align-items: stretch; justify-content: space-between; width: 100%; margin: auto 0; position: relative; z-index: 5; } .event-team-box { display: flex; flex-direction: column; align-items: center; width: 42%; text-align: center; gap: 0.5rem; transition: opacity 0.5s ease, filter 0.5s ease; } .event-team-box.loser { opacity: 0.4 !important; filter: grayscale(100%) !important; } .event-team-logo { width: clamp(3.5rem, 5.5vw, 5.5rem); height: clamp(3.5rem, 5.5vw, 5.5rem); object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7)); } .event-team-short { font-family: var(--font-agency); font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #ffffff; line-height: 1.1; } .event-team-full { font-family: var(--font-inter); font-size: clamp(0.7rem, 0.9vw, 0.85rem); color: var(--theme-text-muted); line-height: 1.2; } .event-vs-text { display: flex; align-items: center; justify-content: center; width: 16%; font-family: var(--font-agency); font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 900; color: #ffffff; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); padding-bottom: 1rem; } /* Score / Spoiler Block */ .event-score-container { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 10; } .event-score-spoiler-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .event-score-spoiler-btn:hover { transform: scale(1.05); } .event-score-val { font-family: var(--font-agency); font-size: clamp(2.5rem, 4.5vw, 3.75rem); letter-spacing: 0.12em; color: #ffffff; font-weight: 700; text-shadow: 0 0 20px rgba(255, 255, 255, 0.35); transition: filter 0.3s ease, opacity 0.3s ease; } .event-score-val.blurred { filter: blur(10px); opacity: 0.7; } .event-score-ot { margin-left: 0.5rem; font-family: var(--font-agency); font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--theme-accent); font-weight: 700; align-self: flex-start; margin-top: 0.25rem; } /* Alt Stream Switcher */ .event-alt-stream-bar { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); width: 100%; position: relative; z-index: 10; } .event-alt-stream-btn { font-family: var(--font-agency); font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 700; letter-spacing: 0.1em; color: var(--theme-text-secondary); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s; } .event-alt-stream-btn:hover { color: #ffffff; } .event-alt-stream-btn svg { color: var(--theme-accent); } /* Inline Chat Panel */ .event-chat-panel { position: absolute; inset: 0; z-index: 25; background: #09090B; border-radius: 1rem; display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.25s ease; } .event-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .event-chat-user-badge { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-inter); font-size: 0.85rem; font-weight: 600; color: #ffffff; } .event-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; } .event-chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .event-chat-pin { background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--theme-accent); padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.8rem; color: var(--theme-text-secondary); line-height: 1.35; } .event-chat-msg { display: flex; flex-direction: column; gap: 2px; } .event-chat-msg-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; } .event-chat-msg-author { font-weight: 700; } .event-chat-provider { font-size: 0.65rem; padding: 1px 5px; border-radius: 2px; background: #4680C2; color: #fff; font-weight: 700; } .event-chat-time { color: var(--theme-text-muted); margin-left: auto; font-size: 0.7rem; } .event-chat-text { font-size: 0.85rem; color: #ffffff; line-height: 1.35; } .event-chat-input-bar { padding: 0.75rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: 0.5rem; flex-shrink: 0; background: #09090B; } .event-chat-input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0.5rem 0.75rem; color: #ffffff; font-family: var(--font-inter); font-size: 0.85rem; outline: none; } .event-chat-input:focus { border-color: var(--theme-accent); } .event-chat-send-btn { background: var(--theme-accent); color: #ffffff; border: none; border-radius: 6px; padding: 0 1rem; font-family: var(--font-agency); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; transition: opacity 0.2s; } .event-chat-send-btn:hover { opacity: 0.9; } /* Middle Section: Text Broadcast Block */ .event-text-broadcast-section { margin-top: clamp(2rem, 3vw, 3rem); } .event-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .event-section-title { font-family: var(--font-agency); font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; display: inline-flex; align-items: center; white-space: nowrap; } .event-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-accent); margin-left: 0.75rem; animation: scPulse 1.5s infinite; } .event-toggle-expand-btn { font-family: var(--font-agency); font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-text-muted); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s; white-space: nowrap; } .event-toggle-expand-btn:hover { color: #ffffff; } .event-timeline-container { background: rgba(9, 9, 11, 0.65); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; } .event-timeline-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: clamp(0.75rem, 1.2vw, 1rem) clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.2s; } .event-timeline-row:last-child { border-bottom: none; } .event-timeline-row.highlight { background: rgba(255, 255, 255, 0.03); } .event-timeline-time { flex-shrink: 0; width: 48px; text-align: right; font-family: var(--font-agency); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; color: var(--theme-accent); } .event-timeline-icon { flex-shrink: 0; width: 24px; text-align: center; font-size: 1rem; margin-top: 1px; } .event-timeline-text { flex: 1; font-size: 0.9rem; line-height: 1.45; color: var(--theme-text-secondary); } .event-timeline-row.highlight .event-timeline-text { color: #ffffff; font-weight: 600; } /* Event Videos Section */ .event-videos-section { margin-top: clamp(2rem, 3.5vw, 3.5rem); } .event-videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } @media (min-width: 1024px) { .event-videos-grid { grid-template-columns: repeat(3, 1fr); } } .event-video-card { background: #1A1A1E; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; cursor: pointer; transition: border-color 0.2s, transform 0.2s; } .event-video-card:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); } .event-video-thumb-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000000; overflow: hidden; } .event-video-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .event-video-card:hover .event-video-thumb { transform: scale(1.04); } .event-video-duration { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; font-family: var(--font-agency); font-size: 0.85rem; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; gap: 4px; } .event-video-badges { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5; display: flex; gap: 0.35rem; } .event-video-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.2s ease; } .event-video-card:hover .event-video-play-btn { opacity: 1; } .event-video-play-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; color: #ffffff; } .event-video-meta-box { padding: 1rem; display: flex; flex-direction: column; flex: 1; } .event-video-title { font-size: 0.95rem; font-weight: 600; color: #ffffff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .event-video-subline { font-size: 0.8rem; color: var(--theme-text-muted); margin-top: 0.5rem; } /* Commentators Section */ .event-commentators-section { margin-top: clamp(2rem, 3.5vw, 3.5rem); margin-bottom: 2rem; } .event-commentators-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 1024px) { .event-commentators-grid { grid-template-columns: repeat(2, 1fr); } } .event-commentator-card { background: var(--theme-surface); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1rem; padding: clamp(1rem, 1.8vw, 1.5rem); display: flex; align-items: center; justify-content: space-between; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .event-commentator-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.15); } .event-commentator-info { display: flex; flex-direction: column; gap: 0.35rem; } .event-commentator-name { font-family: var(--font-agency); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; transition: color 0.2s; } .event-commentator-card:hover .event-commentator-name { color: var(--theme-accent); } .event-commentator-arrow { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: var(--theme-text-muted); transition: all 0.2s; flex-shrink: 0; } .event-commentator-card:hover .event-commentator-arrow { background: var(--theme-accent); color: #ffffff; transform: rotate(-45deg); } /* Fullscreen Video Modal */ .event-modal-overlay { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; background: rgba(9, 9, 11, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 1rem; } .event-modal-close-btn { position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background 0.2s; } .event-modal-close-btn:hover { background: rgba(255, 255, 255, 0.25); } .event-modal-content { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; background: #000000; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9); } /* ========================================================================== EVENT PAGE SPORT-SPECIFIC THEMES & ATMOSPHERIC BACKGROUNDS Colors matching sports.json: - Football: #10B981 (16, 185, 129) - Hockey: #3B82F6 (59, 130, 246) - Basketball: #F59E0B (245, 158, 11) - Tennis: #8B5CF6 (139, 92, 246) - NFL: #EF4444 (239, 68, 68) - F1: #EC4899 (236, 72, 153) - Wrestling: #F97316 (249, 115, 22) ========================================================================== */ body.event-page { background-color: #0b0c0e !important; background-image: radial-gradient(ellipse 100% 650px at 50% -50px, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.22) 0%, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.05) 55%, transparent 100%), radial-gradient(circle 600px at 15% 150px, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.12) 0%, transparent 70%), radial-gradient(circle 600px at 85% 180px, rgba(var(--sport-accent-rgb, 16, 185, 129), 0.09) 0%, transparent 70%) !important; background-repeat: no-repeat !important; background-attachment: scroll !important; background-position: top center !important; min-height: 100vh; } /* Default & Football */ :root:has(body.event-page[data-sport="football"]), body.event-page, body.event-page[data-sport="football"], body.event-page[data-sport-theme="football"], body.event-page.sport-football { --sport-accent: #10B981; --sport-accent-rgb: 16, 185, 129; --theme-accent: #10B981; --theme-accent-glow: rgba(16, 185, 129, 0.25); } /* Hockey */ :root:has(body.event-page[data-sport="hockey"]), body.event-page[data-sport="hockey"], body.event-page[data-sport-theme="hockey"], body.event-page.sport-hockey { --sport-accent: #3B82F6; --sport-accent-rgb: 59, 130, 246; --theme-accent: #3B82F6; --theme-accent-glow: rgba(59, 130, 246, 0.25); } /* Basketball */ :root:has(body.event-page[data-sport="basketball"]), body.event-page[data-sport="basketball"], body.event-page[data-sport-theme="basketball"], body.event-page.sport-basketball { --sport-accent: #F59E0B; --sport-accent-rgb: 245, 158, 11; --theme-accent: #F59E0B; --theme-accent-glow: rgba(245, 158, 11, 0.25); } /* Tennis */ :root:has(body.event-page[data-sport="tennis"]), body.event-page[data-sport="tennis"], body.event-page[data-sport-theme="tennis"], body.event-page.sport-tennis { --sport-accent: #8B5CF6; --sport-accent-rgb: 139, 92, 246; --theme-accent: #8B5CF6; --theme-accent-glow: rgba(139, 92, 246, 0.25); } /* NFL */ :root:has(body.event-page[data-sport="nfl"]), body.event-page[data-sport="nfl"], body.event-page[data-sport-theme="nfl"], body.event-page.sport-nfl { --sport-accent: #EF4444; --sport-accent-rgb: 239, 68, 68; --theme-accent: #EF4444; --theme-accent-glow: rgba(239, 68, 68, 0.25); } /* Formula 1 */ :root:has(body.event-page[data-sport="f1"]), body.event-page[data-sport="f1"], body.event-page[data-sport-theme="f1"], body.event-page.sport-f1 { --sport-accent: #EC4899; --sport-accent-rgb: 236, 72, 153; --theme-accent: #EC4899; --theme-accent-glow: rgba(236, 72, 153, 0.25); } /* Wrestling */ :root:has(body.event-page[data-sport="wrestling"]), body.event-page[data-sport="wrestling"], body.event-page[data-sport-theme="wrestling"], body.event-page.sport-wrestling { --sport-accent: #F97316; --sport-accent-rgb: 249, 115, 22; --theme-accent: #F97316; --theme-accent-glow: rgba(249, 115, 22, 0.25); } /* Default label visibility (Desktop base) */ .sc-desktop-label { display: inline !important; } .sc-mobile-label { display: none !important; } /* Strict Responsive Helpers for Event Page (640px breakpoint matching Next.js sm:) */ @media (min-width: 640px) { .sc-desktop-only { display: flex !important; } .sc-desktop-block { display: block !important; } .sc-desktop-inline, .sc-desktop-label { display: inline !important; } .sc-mobile-only, .sc-mobile-block, .sc-mobile-inline, .sc-mobile-label { display: none !important; } } @media (max-width: 639.98px) { .sc-desktop-only, .sc-desktop-block, .sc-desktop-inline, .sc-desktop-label { display: none !important; } .sc-mobile-only { display: flex !important; } .sc-mobile-block { display: block !important; } .sc-mobile-inline, .sc-mobile-label { display: inline !important; } .event-main-wrapper { padding-top: calc(env(safe-area-inset-top, 0px) + 64px + 1.75rem) !important; padding-bottom: 2rem !important; } .event-sub-header { margin-bottom: 0.75rem; } .event-back-btn { font-size: 1.25rem !important; gap: 0.35rem; } .event-back-btn svg { width: 1.2rem !important; height: 1.2rem !important; } .event-datetime-label { font-size: 1.25rem !important; } .event-divider-line { margin: 0 0.5rem; min-width: 10px; } /* Balanced Mobile 100dvh Layout (Header + Subheader + Info Card + Player on First Screen) */ .event-top-grid { display: flex !important; flex-direction: column !important; height: calc(var(--hero-static-height, 100dvh) - 10.25rem) !important; min-height: calc(var(--hero-static-height, 100dvh) - 10.25rem) !important; max-height: calc(var(--hero-static-height, 100dvh) - 10.25rem) !important; justify-content: space-between !important; gap: clamp(0.75rem, 1.8vh, 1.25rem) !important; margin-bottom: 1.5rem !important; } .event-info-col { order: 1 !important; flex: 1 1 0% !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; } .event-info-card { flex: 1 1 0% !important; min-height: 0 !important; height: 100% !important; width: 100% !important; position: relative !important; display: flex !important; flex-direction: column !important; } .event-player-col { order: 2 !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .event-tla-stack { gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .event-tla-row { width: 100% !important; max-width: 100% !important; align-items: baseline !important; justify-content: space-between !important; } .event-tla-code { font-size: var(--tla-font-size, clamp(2.8rem, 11vw, 3.8rem)) !important; line-height: 0.88 !important; } .event-tla-slot { width: var(--max-logo-w, clamp(3.2rem, 12vw, 4.2rem)) !important; min-width: var(--max-logo-w, clamp(3.2rem, 12vw, 4.2rem)) !important; height: var(--tla-logo-h, clamp(2.2rem, 8vw, 2.9rem)) !important; transform: none !important; } .event-nonteam-stage { padding: 0.2rem 0 !important; gap: 0.4rem !important; } .event-nonteam-title { font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important; line-height: 1.08 !important; } .event-nonteam-subtitle { font-size: 1.15rem !important; } .event-actions-stack { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0.5rem !important; width: 100% !important; } .event-btn-bonus { flex: 0 0 calc(65% - 0.25rem) !important; width: calc(65% - 0.25rem) !important; padding: 0.65rem 0.5rem !important; font-size: clamp(0.92rem, 3.1vw, 1.1rem) !important; } .event-btn-chat { flex: 0 0 calc(35% - 0.25rem) !important; width: calc(35% - 0.25rem) !important; padding: 0.65rem 0.4rem !important; font-size: clamp(0.92rem, 3.1vw, 1.1rem) !important; } .event-player-placeholder { padding: 0.75rem 0.5rem !important; } .event-placeholder-title { font-size: clamp(0.95rem, 3.2vw, 1.3rem) !important; margin-bottom: 0.5rem !important; } .event-countdown-grid { gap: 0.35rem !important; } .event-countdown-box { min-width: 44px !important; padding: 0.35rem 0.3rem !important; } .event-countdown-num { font-size: 1.35rem !important; } .event-countdown-lbl { font-size: 0.6rem !important; margin-top: 0.15rem !important; } .event-countdown-dots { font-size: 1.15rem !important; margin-bottom: 0.35rem !important; } /* Hide commentator sport badges on mobile exactly like original */ .event-commentator-info .sport-badge { display: none !important; } } /* Event Videos Header Link (Arrow points LEFT before text) */ .event-videos-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-agency); font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-muted); text-decoration: none; transition: color 0.2s ease; } .event-videos-link:hover { color: #ffffff; } .event-videos-link svg { width: clamp(1.1rem, 1.6vw, 1.4rem); height: clamp(1.1rem, 1.6vw, 1.4rem); transition: transform 0.2s ease; } .event-videos-link:hover svg { transform: translateX(-4px); } /* Load More Button between dividers */ .event-load-more-btn { margin: 0 1.5rem; font-family: var(--font-agency); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-muted); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s ease; white-space: nowrap; } .event-load-more-btn:hover { color: #ffffff; } .event-load-more-btn svg { width: 1.25rem; height: 1.25rem; transition: transform 0.2s ease; } .event-load-more-btn:hover svg { transform: translateY(2px); } /* Production Footer Layout */ .sc-prod-footer { margin-top: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 3rem 0; position: relative; z-index: 5; } .sc-footer-logo-text { font-family: var(--font-agency); font-size: clamp(3rem, 5vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: 0.04em; color: #ffffff; position: relative; display: inline-block; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8); } .sc-footer-logo-glow { position: absolute; inset: 0; color: var(--theme-accent); filter: blur(10px); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } a.group:hover .sc-footer-logo-glow, .sc-footer-logo-text:hover .sc-footer-logo-glow { opacity: 0.6; } .sc-footer-col-title { font-family: var(--font-agency); font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--theme-text-muted); margin-bottom: 0.75rem; font-weight: 700; } .sc-footer-col-nav { display: flex; flex-direction: column; gap: 0.5rem; } .sc-footer-col-link { font-size: 0.95rem; font-weight: 500; color: var(--theme-text-secondary); transition: color 0.2s ease; text-decoration: none; } .sc-footer-col-link:hover { color: #ffffff; } /* Fallback helper classes */ .hidden { display: none !important; } /* ========================================================================== SPORTCAST ORIGINAL SCHEDULE & EVENTCARD STYLES (1:1 DIRECT TRANSFER) Exact reproduction of Schedule.tsx and EventCard.tsx from original site ========================================================================== */ :root { --sc-bg-primary: #141417; --sc-bg-surface: #1A1A1E; --sc-bg-surface-hover: #242429; --sc-bg-card: #1A1A1E; --sc-bg-header: #09090B; --sc-accent: #3B82F6; --sc-accent-hover: #2563EB; --sc-accent-glow: rgba(59, 130, 246, 0.15); --sc-text-primary: #F4F4F5; --sc-text-secondary: #A1A1AA; --sc-text-muted: #71717A; --sc-border: #27272A; --sc-border-light: #3F3F46; --sc-danger: #EF4444; --sc-success: #10B981; --sc-warning: #F59E0B; } /* Base section container */ .schedule-orig-section { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; padding-top: calc(64px + 1rem + 2.5rem); /* ~120px on desktop: clean 40px offset below 80px floating header */ padding-bottom: 3.5rem; background: transparent; box-sizing: border-box; } /* Mobile Header Offset: Position title cleanly below the floating header with safe-area spacing */ @media (max-width: 768px) { .schedule-orig-section { padding-top: calc(64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem) !important; } } /* Safari iOS: Includes +80px scroll-runway compensation (from window.scrollTo(0, 80)) */ html.is-ios-safari .schedule-orig-section { padding-top: calc(80px + 64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem) !important; } /* Header layout */ .schedule-header-desktop { display: none; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .schedule-header-mobile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } @media (min-width: 640px) { .schedule-header-desktop { display: flex; } .schedule-header-mobile { display: none; } } .schedule-title-desktop { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; /* text-3xl */ line-height: 2.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-primary); margin: 0; white-space: nowrap; } .schedule-title-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.5rem; /* text-2xl */ line-height: 2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-primary); margin: 0; white-space: nowrap; } .schedule-divider-line { flex: 1 1 0%; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin-left: 1.5rem; margin-right: 1.5rem; } .schedule-divider-line-mobile { flex: 1 1 0%; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin-left: 0.75rem; margin-right: 0.75rem; } .schedule-count-desktop { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; /* text-3xl */ line-height: 2.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-muted); white-space: nowrap; } .schedule-count-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.5rem; /* text-2xl */ line-height: 2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-muted); white-space: nowrap; } .schedule-bell-btn { padding: 0.5rem; border-radius: 0.5rem; color: var(--sc-text-muted); background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .schedule-bell-btn:hover { color: var(--sc-warning); background-color: rgba(245, 158, 11, 0.1); } .schedule-bell-btn.active { color: var(--sc-warning); background-color: rgba(245, 158, 11, 0.15); } /* Date Group Headings */ .schedule-group-title { text-align: center; font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; /* text-3xl */ line-height: 2.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-muted); margin-top: 0.5rem; margin-bottom: 0.5rem; } @media (max-width: 639.98px) { .schedule-group-title { font-size: 1.5rem; line-height: 2rem; } } .schedule-cards-stack { display: flex; flex-direction: column; gap: 0.75rem; /* Increased vertical spacing (12px) for cards breathing room and unclipped glow */ width: 100%; box-sizing: border-box; } /* ========================================================================== EVENT CARD (EXACT ORIGINAL STYLING FROM EventCard.tsx) ========================================================================== */ .orig-event-card { background-color: rgba(9, 9, 11, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); border-radius: 0.75rem; /* rounded-xl */ transition: all 0.2s ease; position: relative; width: 100%; box-sizing: border-box; } .orig-event-card:hover { background-color: var(--sc-bg-surface-hover); border-color: rgba(255, 255, 255, 0.12); } /* LIVE Card: Refined neon sport-colored border and softer ambient glow */ .orig-event-card.is-live { border-width: 1.5px !important; border-style: solid !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .orig-event-card.is-live[data-sport="football"], .orig-event-card.is-live.sport-football { border-color: rgba(16, 185, 129, 0.85) !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.38), 0 0 20px rgba(16, 185, 129, 0.16), inset 0 0 10px rgba(16, 185, 129, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } .orig-event-card.is-live[data-sport="hockey"], .orig-event-card.is-live.sport-hockey { border-color: rgba(56, 189, 248, 0.85) !important; box-shadow: 0 0 8px rgba(56, 189, 248, 0.38), 0 0 20px rgba(56, 189, 248, 0.16), inset 0 0 10px rgba(56, 189, 248, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } .orig-event-card.is-live[data-sport="basketball"], .orig-event-card.is-live.sport-basketball { border-color: rgba(245, 158, 11, 0.85) !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.38), 0 0 20px rgba(245, 158, 11, 0.16), inset 0 0 10px rgba(245, 158, 11, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } .orig-event-card.is-live[data-sport="tennis"], .orig-event-card.is-live.sport-tennis { border-color: rgba(168, 85, 247, 0.85) !important; box-shadow: 0 0 8px rgba(168, 85, 247, 0.38), 0 0 20px rgba(168, 85, 247, 0.16), inset 0 0 10px rgba(168, 85, 247, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } .orig-event-card.is-live[data-sport="nfl"], .orig-event-card.is-live[data-sport="american_football"], .orig-event-card.is-live.sport-nfl { border-color: rgba(239, 68, 68, 0.85) !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.38), 0 0 20px rgba(239, 68, 68, 0.16), inset 0 0 10px rgba(239, 68, 68, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } .orig-event-card.is-live[data-sport="f1"], .orig-event-card.is-live.sport-f1 { border-color: rgba(236, 72, 153, 0.85) !important; box-shadow: 0 0 8px rgba(236, 72, 153, 0.38), 0 0 20px rgba(236, 72, 153, 0.16), inset 0 0 10px rgba(236, 72, 153, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } .orig-event-card.is-live[data-sport="wrestling"], .orig-event-card.is-live.sport-wrestling { border-color: rgba(249, 115, 22, 0.85) !important; box-shadow: 0 0 8px rgba(249, 115, 22, 0.38), 0 0 20px rgba(249, 115, 22, 0.16), inset 0 0 10px rgba(249, 115, 22, 0.06), 0 10px 30px rgba(0, 0, 0, 0.6) !important; } /* Card Mobile Layout (< 640px) */ .orig-card-mobile { display: flex; align-items: center; width: 100%; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; position: relative; box-sizing: border-box; } @media (min-width: 640px) { .orig-card-mobile { display: none !important; } } /* Card Desktop Layout (>= 640px) */ .orig-card-desktop { display: none; align-items: center; width: 100%; padding-top: 1rem; padding-bottom: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; position: relative; box-sizing: border-box; } @media (min-width: 640px) { .orig-card-desktop { display: flex; } } /* 3-Column System: Left, Center, Right */ .orig-col-left { flex: 1 1 0%; display: flex; align-items: center; justify-content: space-between; min-width: 0; } .orig-col-center { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .orig-col-center { padding-left: 1.5rem; padding-right: 1.5rem; } } .orig-col-right { flex: 1 1 0%; display: flex; align-items: center; justify-content: space-between; min-width: 0; } /* Sport Badge */ .orig-sport-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; box-sizing: border-box; } .orig-sport-badge-mobile { font-size: 13px; padding-left: 0.5rem; padding-right: 0.5rem; height: 28px; border-radius: 4px; } .orig-sport-badge-desktop { font-size: 1rem; /* text-base */ padding-left: 0.6rem; padding-right: 0.6rem; height: 30px; border-radius: 4px; } .orig-match-type-badge { display: inline-flex; align-items: center; font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1rem; padding-left: 0.6rem; padding-right: 0.6rem; height: 30px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.05); color: var(--sc-text-secondary); flex-shrink: 0; } /* Team Rows and Logos */ .orig-team-name-left { font-size: 0.875rem; /* text-sm */ font-weight: 600; color: var(--sc-text-primary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orig-team-name-right { font-size: 0.875rem; /* text-sm */ font-weight: 600; color: var(--sc-text-primary); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Desktop Team Names Typography (Agency FB) */ @media (min-width: 640px) { .orig-team-name-left, .orig-team-name-right { font-family: var(--font-agency), 'Agency FB', sans-serif !important; font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; line-height: 1.1 !important; } .orig-non-team-title { font-family: var(--font-agency), 'Agency FB', sans-serif !important; font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; line-height: 1.1 !important; } } /* Mobile Non-Team Event Titles (Formula 1, WWE Wrestling) in Agency FB */ .orig-non-team-title-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--sc-text-primary) !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 155px !important; } .orig-logo-sm { width: 1.75rem; /* w-7 = 28px */ height: 1.75rem; object-fit: contain; flex-shrink: 0; } /* Mobile Tennis Player TLA (Three-Letter Abbreviations) in Agency FB */ .orig-player-tla-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif !important; font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; user-select: none; } .orig-logo-md { width: 2rem; /* w-8 = 32px */ height: 2rem; object-fit: contain; flex-shrink: 0; } /* Score / Time Center Block */ .orig-score-text { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; font-weight: 700; white-space: nowrap; display: flex; align-items: center; justify-content: center; line-height: 1; } .orig-score-text-desktop { font-size: 1.875rem; /* text-3xl */ margin-bottom: -4px; } .orig-score-text-mobile { font-size: 1.25rem; /* text-xl */ } /* Score Spoiler (Click to reveal) */ .orig-score-spoiler { filter: blur(8px); opacity: 0.7; cursor: pointer; user-select: none; -webkit-user-select: none; transition: filter 0.3s ease, opacity 0.3s ease; } .orig-score-spoiler.revealed { filter: none; opacity: 1; cursor: default; } .orig-score-winner { color: #ffffff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); } .orig-score-loser { color: rgba(255, 255, 255, 0.4); } .orig-score-colon { color: rgba(255, 255, 255, 0.4); margin-left: 2px; margin-right: 2px; } .orig-time-live { font-family: var(--font-agency), 'Agency FB', sans-serif; color: var(--sc-danger); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1; padding-top: 0.125rem; text-transform: uppercase; } @media (min-width: 640px) { .orig-time-live { font-size: 1.5rem; } } .orig-time-upcoming { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em; color: var(--sc-text-primary); line-height: 1; } @media (min-width: 640px) { .orig-time-upcoming { font-size: 1.5rem; } } .orig-status-done { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; color: var(--sc-text-muted); font-size: 1.25rem; font-weight: 700; margin-top: 2px; } @media (min-width: 640px) { .orig-status-done { font-size: 1.5rem; } } /* Action Buttons */ .orig-play-btn-mobile { padding: 0.5rem; border-radius: 0.5rem; background-color: rgba(59, 130, 246, 0.1); color: var(--sc-accent); border: 1px solid rgba(59, 130, 246, 0.2); transition: all 0.2s ease; flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .orig-play-btn-mobile:hover { background-color: var(--sc-accent); color: #ffffff; border-color: var(--sc-accent); } .orig-watch-btn-desktop { display: inline-flex; align-items: center; justify-content: center; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0.5rem; background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: var(--sc-accent); font-family: var(--font-agency), 'Agency FB', sans-serif; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: all 0.2s ease; } .orig-watch-btn-desktop:hover { background-color: var(--sc-accent); color: #ffffff; border-color: var(--sc-accent); } .orig-reminder-btn { padding: 0.5rem; border-radius: 0.5rem; background-color: var(--sc-bg-surface); border: 1px solid var(--sc-border); color: var(--sc-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .orig-reminder-btn:hover { color: var(--sc-warning); background-color: rgba(245, 158, 11, 0.1); } .orig-reminder-btn.active { background-color: rgba(245, 158, 11, 0.15); color: var(--sc-warning); border-color: rgba(245, 158, 11, 0.3); } /* Bottom Header links */ .schedule-bottom-desktop { display: none; align-items: center; justify-content: space-between; margin-top: 2rem; margin-bottom: 2rem; } .schedule-bottom-mobile { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .schedule-bottom-desktop { display: flex; } .schedule-bottom-mobile { display: none; } } .schedule-bottom-link { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s ease; } .schedule-bottom-link:hover { color: #ffffff; } .schedule-bottom-link-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; transition: color 0.2s ease; } .schedule-bottom-link-mobile:hover { color: #ffffff; } .schedule-bottom-link svg { transition: transform 0.2s ease; } .schedule-bottom-link:hover .arrow-right { transform: translateX(4px); } .schedule-bottom-link:hover .arrow-left { transform: translateX(-4px); } /* ========================================================================== SPORTCAST ORIGINAL COMMENTATORS STYLES (1:1 DIRECT TRANSFER) Exact reproduction of Commentators slider section from HomeClient.tsx ========================================================================== */ :root { --comm-bg-surface: #1A1A1E; --comm-border: #27272A; --comm-text-muted: #71717A; --comm-accent: #3B82F6; } /* Base Section Container */ .commentators-orig-section { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; padding-top: 2rem; padding-bottom: 3rem; margin-bottom: 3rem; position: relative; box-sizing: border-box; font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Desktop Header */ .commentators-header-desktop { display: none; align-items: center; justify-content: space-between; margin-bottom: 2rem; } @media (min-width: 640px) { .commentators-header-desktop { display: flex; } } .commentators-title-desktop { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; /* text-3xl */ font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #ffffff; display: flex; align-items: center; gap: 0.75rem; margin: 0; line-height: 1; } .commentators-divider-line { flex: 1; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin-left: 1.5rem; margin-right: 1.5rem; } .commentators-nav-btns { display: flex; align-items: center; gap: 0.75rem; } .commentators-nav-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; /* w-10 */ height: 2.5rem; /* h-10 */ border-radius: 9999px; background-color: var(--comm-bg-surface); border: 1px solid var(--comm-border); color: var(--comm-text-muted); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; outline: none; padding: 0; } .commentators-nav-btn:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); } .commentators-nav-btn:active { transform: scale(0.95); } /* Mobile Header */ .commentators-header-mobile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } @media (min-width: 640px) { .commentators-header-mobile { display: none; } } .commentators-title-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; /* text-xl/2xl */ font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #ffffff; display: flex; align-items: center; gap: 0.5rem; margin: 0; line-height: 1; } .commentators-divider-line-mobile { flex: 1; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin-left: 0.75rem; margin-right: 0.75rem; } .commentators-nav-btns-mobile { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .commentators-nav-btn-mobile { display: flex; align-items: center; justify-content: center; width: 2rem; /* w-8 */ height: 2rem; /* h-8 */ border-radius: 9999px; background-color: var(--comm-bg-surface); border: 1px solid var(--comm-border); color: var(--comm-text-muted); cursor: pointer; transition: color 0.2s ease, transform 0.15s ease; outline: none; padding: 0; } .commentators-nav-btn-mobile:hover { color: #ffffff; } .commentators-nav-btn-mobile:active { transform: scale(0.95); } /* Slider Track */ .commentators-slider-track { display: flex; overflow-x: auto; overflow-y: hidden; gap: 1rem; scroll-snap-type: x mandatory; padding-bottom: 1rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } @media (min-width: 640px) { .commentators-slider-track { gap: 1.5rem; } } .commentators-slider-track::-webkit-scrollbar { display: none; } /* Card Item */ .commentators-card-item { scroll-snap-align: start; flex-shrink: 0; width: 240px; } @media (min-width: 640px) { .commentators-card-item { width: 280px; } } .commentators-card-link { display: flex; flex-direction: column; height: 100%; background-color: var(--comm-bg-surface); border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); text-decoration: none; transition: border-color 0.2s ease; } .commentators-card-link:hover { border-color: rgba(255, 255, 255, 0.1); } /* Photo Wrap (aspect 3/4) */ .commentators-photo-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; background-color: #000000; overflow: hidden; flex-shrink: 0; } .commentators-photo-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .commentators-card-link:hover .commentators-photo-img { transform: scale(1.05); } /* Badges on preview (top-right) */ .commentators-badges-wrap { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 30; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; pointer-events: none; } .commentators-sport-badge { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.875rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 0.375rem; color: #ffffff; line-height: 1.2; } /* Info Box */ .commentators-info-box { padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex: 1; min-height: 60px; } @media (min-width: 640px) { .commentators-info-box { min-height: 70px; } } .commentators-name { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.125rem; /* 18px */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.2; color: #ffffff; transition: color 0.2s ease; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } @media (min-width: 640px) { .commentators-name { font-size: 1.25rem; } } .commentators-card-link:hover .commentators-name { color: var(--comm-accent); } .commentators-arrow-circle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.05); color: var(--comm-text-muted); flex-shrink: 0; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .commentators-card-link:hover .commentators-arrow-circle { background-color: var(--comm-accent); color: #ffffff; transform: rotate(-45deg); } /* ========================================================================== SPORTCAST.PRO — EVENT CHAT MODULE (V2 REDESIGN OBSIDIAN GLASS) Modular chat stylesheet matching EventChat.tsx in V2 dimensions ========================================================================== */ /* ── Chat Overlay Container (Frosted Obsidian Glass) ────────────────────── */ .event-chat-overlay-layer { position: absolute; inset: 0; z-index: 30; border-radius: 1rem; /* rounded-2xl */ overflow: hidden; background: rgba(12, 13, 16, 0.94) !important; backdrop-filter: blur(28px) saturate(140%) !important; -webkit-backdrop-filter: blur(28px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px var(--theme-accent-glow, rgba(16, 185, 129, 0.15)) !important; display: flex; flex-direction: column; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .event-match-info-layer { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center !important; gap: clamp(1.4rem, 2.6vh, 2.4rem) !important; transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1); } .layer-hidden { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; transform: scale(0.98) !important; } .event-match-info-layer.layer-hidden { transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s 0.12s !important; } .event-chat-overlay-layer.layer-hidden { transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s 0.16s !important; } /* ── Screen Containers ──────────────────────────────────────────────────── */ .chat-ready-container { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; position: relative; overflow: hidden; } /* ── Messages Stream ────────────────────────────────────────────────────── */ .chat-orig-messages-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.85rem 0.75rem 0.4rem 0.75rem; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .chat-orig-messages-list::-webkit-scrollbar { width: 4px; } .chat-orig-messages-list::-webkit-scrollbar-track { background: transparent; } .chat-orig-messages-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } .chat-orig-messages-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* ── Message Card / Substrate ───────────────────────────────────────────── */ .chat-msg-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.5rem; /* 8px */ padding: 7px 11px 8px 11px; display: flex; flex-direction: column; gap: 3px; transition: background 0.18s ease, border-color 0.18s ease; word-break: break-word; position: relative; } .chat-msg-card:hover { border-color: rgba(255, 255, 255, 0.16); } .chat-msg-card.is-own { border-color: rgba(var(--theme-accent-rgb, 16, 185, 129), 0.35); background: rgba(var(--theme-accent-rgb, 16, 185, 129), 0.10); } .chat-msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .chat-msg-author-name { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 0.75rem; /* 12px */ font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-msg-time { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 0.625rem; /* 10px */ font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.4); line-height: 1; white-space: nowrap; flex-shrink: 0; } .chat-msg-text { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.875rem; /* 14px */ line-height: 1.38; color: #F4F4F5; margin: 0; padding: 0; } /* ── Bottom Input Bar: 2-Row Agent Chat Box ─────────────────────────────── */ .chat-agent-bar { flex-shrink: 0; padding: 0.35rem 0.75rem 0.65rem 0.75rem; background: transparent; border-top: none; position: relative; z-index: 10; } .chat-agent-box { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; /* 8px matching message cards */ padding: 8px 12px 7px 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 12px rgba(0, 0, 0, 0.25); } .chat-agent-box:focus-within { border-color: rgba(var(--theme-accent-rgb, 16, 185, 129), 0.5); box-shadow: 0 0 16px var(--theme-accent-glow, rgba(16, 185, 129, 0.2)), inset 0 1px 0 rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); } /* Row 1: Multiline Textarea auto-expanding from 1 to 3 rows */ .chat-agent-textarea { width: 100%; box-sizing: border-box; resize: none; border: none; outline: none; background: transparent; color: #F4F4F5; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 20px; height: 20px; /* 1 line default */ max-height: 62px; /* 3 lines maximum */ padding: 0; margin: 0; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; touch-action: manipulation; -webkit-text-size-adjust: 100%; } .chat-agent-textarea::placeholder { color: #71717A; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; } /* Row 2: Bottom row with Exit (X) Button, Author Nick, Countdown & Send Button */ .chat-agent-bottom-row { display: flex; align-items: center; justify-content: space-between; min-height: 24px; gap: 8px; } /* Left: Circular Exit (X) Button + Author Nick in Druk Wide Cyr */ .chat-agent-left-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } /* Circular Exit (X) Button - Identical dimensions and round shape to send button */ .chat-agent-close-btn { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0; transition: all 0.2s ease; } .chat-agent-close-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); color: #FFFFFF; transform: scale(1.08); } .chat-agent-close-btn:active { transform: scale(0.95); } /* Nickname in Druk Wide Cyr with 16-char overflow safety */ .chat-agent-nick { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 0.8125rem; /* ~13px */ font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--theme-accent, #10B981); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; line-height: 1; display: inline-flex; align-items: center; user-select: none; transition: color 0.2s ease; } /* Right: Actions wrap (Countdown + Circular Send Button) */ .chat-agent-right-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Countdown Counter (240 -> 0) - EXACT SAME FONT AND SIZE AS NICK */ .chat-agent-countdown { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 0.8125rem; /* Exactly matches .chat-agent-nick */ font-weight: 700; letter-spacing: 0.04em; line-height: 1; display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.45); transition: color 0.2s ease, text-shadow 0.2s ease; user-select: none; text-align: right; } .chat-agent-countdown.is-near-limit { color: #F59E0B; } .chat-agent-countdown.is-limit { color: #EF4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); } /* Circular Send Button */ .chat-agent-send-btn { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.2s ease; padding: 0; } .chat-agent-send-btn:disabled { opacity: 0.35; cursor: not-allowed; } .chat-agent-send-btn:not(:disabled) { background: var(--theme-accent, #10B981); color: #050608; border-color: transparent; box-shadow: 0 0 12px var(--theme-accent-glow, rgba(16, 185, 129, 0.25)); } .chat-agent-send-btn:not(:disabled):hover { transform: scale(1.08); box-shadow: 0 0 16px var(--theme-accent-glow, rgba(16, 185, 129, 0.4)); } .chat-agent-send-btn:not(:disabled):active { transform: scale(0.95); } /* ── Scroll To Bottom Floating Button with Unread Badge ──────────────────── */ .chat-scroll-down-btn { position: absolute; bottom: calc(100% + 8px); right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(18, 18, 22, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer; z-index: 25; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px var(--theme-accent-glow, rgba(16, 185, 129, 0.25)); transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; animation: scrollBtnPop 0.25s cubic-bezier(0.16, 1, 0.3, 1); padding: 0; } .chat-scroll-down-btn:hover { background: rgba(28, 28, 36, 0.98); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-2px); } .chat-scroll-down-btn:active { transform: translateY(0) scale(0.95); } .chat-scroll-down-badge { position: absolute; top: -4px; right: -4px; background: var(--theme-accent, #10B981); color: #050608; font-family: var(--font-agency); font-size: 0.75rem; font-weight: 800; line-height: 1; padding: 2px 5px; min-width: 16px; text-align: center; border-radius: 9999px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } @keyframes scrollBtnPop { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Auth Screen (Compact Anon Nickname + Color Selector) ────────────────── */ .chat-auth-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 1.25rem 1rem; text-align: center; background: transparent; } .chat-auth-close-btn { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #A1A1AA; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; padding: 0; } .chat-auth-close-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.25); transform: scale(1.06); } .chat-auth-title { font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 2px; } .chat-auth-subtitle { font-size: 0.8rem; color: #71717A; margin-bottom: 0.85rem; } .chat-auth-form { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 10px; } .chat-auth-input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 7px 12px; color: #FFFFFF; font-family: var(--font-druk-wide), 'Druk Wide Cyr', sans-serif; font-size: 0.8rem; text-transform: uppercase; text-align: center; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .chat-auth-input:focus { border-color: var(--theme-accent, #10B981); box-shadow: 0 0 10px var(--theme-accent-glow, rgba(16, 185, 129, 0.25)); } .chat-auth-swatches { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .swatch-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; padding: 0; } .swatch-btn:hover { transform: scale(1.15); } .swatch-btn.is-active { border-color: #FFFFFF; transform: scale(1.2); box-shadow: 0 0 8px rgba(255, 255, 255, 0.4); } .chat-auth-preview-wrap { background: rgba(0, 0, 0, 0.35); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 8px; text-align: left; } .chat-auth-preview-label { font-size: 0.7rem; color: #71717A; display: block; margin-bottom: 5px; font-family: var(--font-agency); letter-spacing: 0.06em; text-transform: uppercase; } .chat-auth-submit-btn { width: 100%; background: var(--theme-accent, #10B981); color: #050608; border: none; border-radius: 6px; padding: 8px 14px; font-family: var(--font-agency); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 14px var(--theme-accent-glow, rgba(16, 185, 129, 0.25)); transition: transform 0.15s ease, opacity 0.15s ease; } .chat-auth-submit-btn:hover { transform: scale(1.02); } .chat-auth-submit-btn:active { transform: scale(0.98); } /* ── Mobile Viewports (< 1024px) ────────────────────────────────────────── */ @media (max-width: 1023px) { /* Height is strictly stable and inherited from .event-info-col: NO RESIZE JUMPS! */ .event-info-card { transition: none !important; } .event-info-card.chat-active { min-height: 0 !important; height: 100% !important; } .event-match-info-layer { justify-content: center !important; gap: clamp(1.2rem, 2.4vh, 1.8rem) !important; } .event-chat-overlay-layer { border-radius: 0.75rem; } .chat-agent-nick, .chat-agent-countdown { font-size: 0.75rem; /* 12px */ } .chat-agent-nick { max-width: 155px; } .chat-agent-close-btn, .chat-agent-send-btn { width: 22px; height: 22px; } } /* ========================================================================== SPORTCAST ORIGINAL VIDEOBLOG STYLES (1:1 DIRECT TRANSFER) Exact reproduction of VideoBlog.tsx and VideoCard.tsx from original site ========================================================================== */ :root { --vb-accent: #3B82F6; --vb-accent-hover: #2563EB; --vb-accent-glow: rgba(59, 130, 246, 0.15); --vb-bg-surface: #1A1A1E; --vb-bg-surface-hover: #242429; --vb-text-primary: #F4F4F5; --vb-text-secondary: #A1A1AA; --vb-text-muted: #71717A; --vb-border: #27272A; --vb-border-light: #3F3F46; --font-manrope: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Base Section Container */ .videoblog-orig-section { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; padding-top: 2rem; padding-bottom: 2rem; margin-top: 2rem; margin-bottom: 2rem; font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; } /* Desktop Header */ .videoblog-header-desktop { display: none; align-items: center; justify-content: space-between; margin-bottom: 2rem; } @media (min-width: 640px) { .videoblog-header-desktop { display: flex; } } .videoblog-title-desktop { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; /* text-3xl */ font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 0.75rem; margin: 0; line-height: 1; } .videoblog-title-icon { color: var(--vb-accent); width: 0.85em; height: 0.85em; margin-top: -2px; display: inline-block; vertical-align: middle; } .videoblog-divider-line { flex: 1; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin-left: 1.5rem; margin-right: 1.5rem; } .videoblog-more-link-desktop { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vb-text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; transition: color 0.2s; line-height: 1; } .videoblog-more-link-desktop:hover { color: #ffffff; } .videoblog-more-link-desktop svg { width: 1.75rem; height: 1.75rem; transition: transform 0.2s ease-out; } .videoblog-more-link-desktop:hover svg { transform: translateX(-4px); } /* Mobile Header */ .videoblog-header-mobile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } @media (min-width: 640px) { .videoblog-header-mobile { display: none; } } .videoblog-title-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; /* text-xl/2xl */ font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 0.5rem; margin: 0; line-height: 1; } .videoblog-divider-line-mobile { flex: 1; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin-left: 0.75rem; margin-right: 0.75rem; } .videoblog-more-link-mobile { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vb-text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; transition: color 0.2s; line-height: 1; } .videoblog-more-link-mobile:hover { color: #ffffff; } .videoblog-more-link-mobile svg { width: 1.25rem; height: 1.25rem; transition: transform 0.2s ease-out; } .videoblog-more-link-mobile:hover svg { transform: translateX(-4px); } /* Filters Container */ .videoblog-filters-wrap { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; } .videoblog-filter-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; row-gap: 0.75rem; } /* Filter Tab Button */ .videoblog-tab-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; position: relative; outline: none; background: none; border: none; padding: 0; cursor: pointer; color: var(--vb-text-secondary); transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.2; } @media (min-width: 640px) { .videoblog-tab-btn { font-size: 1.5rem; /* text-2xl */ } } .videoblog-tab-btn:hover { color: #ffffff; } .videoblog-tab-btn.is-active { color: var(--vb-accent) !important; } /* Active Underline */ .videoblog-tab-btn::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 2px; width: 0; background-color: #ffffff; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s; } .videoblog-tab-btn:hover::after { width: 100%; } .videoblog-tab-btn.is-active::after { width: 100% !important; background-color: var(--vb-accent) !important; } .videoblog-tab-icon { margin-top: -2px; opacity: 0.8; transition: opacity 0.2s; display: inline-flex; align-items: center; } .videoblog-tab-btn:hover .videoblog-tab-icon, .videoblog-tab-btn.is-active .videoblog-tab-icon { opacity: 1; } /* Video Grid */ .videoblog-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .videoblog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .videoblog-grid { grid-template-columns: repeat(3, 1fr); } } /* Video Card (bg-[#1A1A1E] rounded-xl border border-white/5 hover:border-white/10) */ .videoblog-card { background: var(--vb-bg-surface); border-radius: 0.75rem; /* rounded-xl */ overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; transition: border-color 0.2s ease, transform 0.2s ease; position: relative; } .videoblog-card:hover { border-color: rgba(255, 255, 255, 0.1); } /* On mobile, cards 4-6 are hidden, matching original `idx >= 3 ? "hidden md:flex" : "flex"` */ .videoblog-card.mobile-hidden { display: none; } @media (min-width: 768px) { .videoblog-card.mobile-hidden { display: flex; } } /* Video Preview Wrapper (aspect 16/9, bg-black) */ .videoblog-preview-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000000; overflow: hidden; flex-shrink: 0; cursor: pointer; } /* Duration badge on top-left */ .videoblog-duration-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 30; pointer-events: none; } .videoblog-duration-inner { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; font-size: 0.875rem; /* text-sm */ padding: 0.125rem 0.625rem; border-radius: 0.25rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 0.375rem; line-height: 1.2; } .videoblog-duration-inner svg { margin-top: -1px; } /* Badges on top-right */ .videoblog-badges-wrap { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 30; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; pointer-events: none; } .videoblog-sport-badge { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.875rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); display: flex; align-items: center; gap: 0.375rem; color: #ffffff; line-height: 1.2; } .videoblog-league-badge { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.875rem; padding: 0.125rem 0.625rem; border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.7); color: #ffffff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); line-height: 1.2; } .videoblog-matchtype-badge { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.875rem; padding: 0.125rem 0.625rem; border-radius: 0.25rem; background-color: rgba(255, 255, 255, 0.2); color: #ffffff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); line-height: 1.2; } /* Thumbnail image */ .videoblog-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; } .videoblog-card:hover .videoblog-thumb-img { transform: scale(1.05); } /* Play button overlay */ .videoblog-play-overlay { position: absolute; inset: 0; z-index: 20; cursor: pointer; background-color: rgba(0, 0, 0, 0); transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; border: none; outline: none; padding: 0; } .videoblog-card:hover .videoblog-play-overlay { background-color: rgba(0, 0, 0, 0.3); } .videoblog-play-circle { width: 3.5rem; /* w-14 */ height: 3.5rem; /* h-14 */ border-radius: 50%; background-color: rgba(59, 130, 246, 0.9); /* bg-accent/90 */ display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .videoblog-play-overlay:hover .videoblog-play-circle, .videoblog-card:hover .videoblog-play-circle { opacity: 1; transform: scale(1.05); } .videoblog-play-icon { width: 1.5rem; height: 1.5rem; fill: #ffffff; margin-left: 0.25rem; } /* Compact Text Info */ .videoblog-card-info { padding: 0.875rem; /* p-3.5 */ display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 0.5rem; } .videoblog-card-title-wrap { min-height: 40px; display: flex; align-items: center; } @media (min-width: 640px) { .videoblog-card-title-wrap { min-height: 44px; } } .videoblog-card-title { font-family: var(--font-manrope), 'Manrope', sans-serif; font-size: 1rem; /* text-[16px] */ font-weight: 700; line-height: 1.35; color: #ffffff; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; width: 100%; } @media (min-width: 640px) { .videoblog-card-title { font-size: 1.0625rem; /* text-[17px] */ } } .videoblog-card:hover .videoblog-card-title { color: var(--vb-accent); } /* Card Bottom Metadata */ .videoblog-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 500; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: auto; } .videoblog-card-cat { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.875rem; color: rgba(161, 161, 170, 0.8); /* text-text-muted/80 */ } .videoblog-card-right-meta { display: flex; align-items: center; gap: 0.75rem; } .videoblog-card-duration { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; font-size: 0.875rem; color: var(--vb-text-muted); display: flex; align-items: center; gap: 0.25rem; } .videoblog-card-duration svg { opacity: 0.6; } .videoblog-card-date { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; font-size: 0.875rem; color: var(--vb-text-secondary); } /* Empty State */ .videoblog-empty-state { grid-column: 1 / -1; padding: 4rem 1rem; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 0.75rem; border: 1px dashed rgba(255, 255, 255, 0.1); } .videoblog-empty-state.is-visible { display: flex; } .videoblog-empty-icon { width: 3rem; height: 3rem; color: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; } .videoblog-empty-title { font-size: 1.125rem; font-weight: 700; color: #ffffff; margin: 0 0 0.25rem 0; } .videoblog-empty-desc { font-size: 0.875rem; color: var(--vb-text-secondary); margin: 0; } /* Video Modal */ .videoblog-modal-overlay { position: fixed; inset: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 1rem; } .videoblog-modal-overlay.is-open { display: flex; } .videoblog-modal-container { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; position: relative; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); background-color: #000000; } .videoblog-modal-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .videoblog-modal-close-btn { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); border: none; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } .videoblog-modal-close-btn:hover { background-color: rgba(0, 0, 0, 0.9); } /* ========================================================================== FULL SCHEDULE PAGE STYLES (FROM events.html) ========================================================================== */ /* Full Schedule Page Specific Styling */ .schedule-full-page { max-width: 1400px; margin: 0 auto; padding: calc(80px + 2rem) 1rem 4rem; min-height: 85vh; font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif; } @media (max-width: 768px) { .schedule-full-page { padding-top: calc(64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem); } } /* Sport Filters Row (Text tabs with Agency FB & blue underline matching videoblog) */ .schedule-sport-tabs-bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.75rem; row-gap: 0.85rem; padding-bottom: 0.75rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .schedule-sport-tabs-bar::-webkit-scrollbar { display: none; } .schedule-sport-tab-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; position: relative; outline: none; background: none; border: none; padding: 0.25rem 0; cursor: pointer; color: #71717A; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1.2; white-space: nowrap; text-decoration: none; box-shadow: none; } @media (min-width: 640px) { .schedule-sport-tab-btn { font-size: 1.5rem; } } .schedule-sport-tab-btn:hover { color: #ffffff; background: none; border-color: transparent; } .schedule-sport-tab-btn.is-active { color: #ffffff !important; background: none; border-color: transparent; box-shadow: none; } /* Active Underline matching Videoblog tab underline */ .schedule-sport-tab-btn::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 2px; width: 0; background-color: #3B82F6; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s; } .schedule-sport-tab-btn:hover::after { width: 100%; background-color: rgba(255, 255, 255, 0.6); } .schedule-sport-tab-btn.is-active::after { width: 100% !important; background-color: #3B82F6 !important; } /* Header Tabs: Upcoming vs Past */ .schedule-tabs-header-desktop { display: none; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .schedule-tabs-header-mobile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } @media (min-width: 640px) { .schedule-tabs-header-desktop { display: flex; } .schedule-tabs-header-mobile { display: none; } } .schedule-header-tab-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: clamp(1.4rem, 2.75vw, 1.875rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; transition: color 0.2s ease; white-space: nowrap; flex-shrink: 0; } .schedule-header-tab-btn.is-active { color: #ffffff; } .schedule-header-tab-btn.is-inactive { color: #71717A; } .schedule-header-tab-btn.is-inactive:hover { color: #ffffff; } .schedule-header-divider-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2); margin: 0 1.5rem; } @media (max-width: 640px) { .schedule-header-divider-line { margin: 0 0.75rem; } } /* Date Timeline */ .schedule-timeline-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; position: relative; } .schedule-timeline-arrow { width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #71717A; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; } .schedule-timeline-arrow:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); } .schedule-timeline-track { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .schedule-timeline-track::-webkit-scrollbar { display: none; } .schedule-timeline-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; background: none; border: none; cursor: pointer; color: #71717A; padding: 0.25rem 0.6rem; white-space: nowrap; transition: color 0.2s ease; position: relative; } .schedule-timeline-btn:hover { color: #ffffff; } .schedule-timeline-btn.is-active { color: #ffffff; } .schedule-timeline-btn.is-active::after { content: ''; position: absolute; bottom: -2px; left: 0.6rem; right: 0.6rem; height: 2px; background: #3B82F6; border-radius: 1px; } .schedule-timeline-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.18); margin: 0 0.4rem; flex-shrink: 0; } /* Event Groups */ .schedule-group-wrap { margin-bottom: 2.5rem; } .schedule-group-title { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #71717A; margin: 0 0 1rem 0; } .schedule-cards-list { display: flex; flex-direction: column; gap: 0.75rem; } /* Load more button row */ .schedule-load-more-row { display: flex; align-items: center; justify-content: center; margin-top: 3rem; width: 100%; } .schedule-load-more-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #71717A; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem; transition: color 0.2s ease; white-space: nowrap; } .schedule-load-more-btn:hover { color: #ffffff; } .schedule-load-more-btn svg { transition: transform 0.2s ease; } .schedule-load-more-btn:hover svg { transform: translateY(3px); } /* Empty state */ .schedule-empty-state { padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 1rem; margin-top: 1rem; } .schedule-empty-icon { width: 3rem; height: 3rem; color: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; } .schedule-empty-title { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; color: #ffffff; margin: 0 0 0.5rem 0; } .schedule-empty-desc { color: #71717A; font-size: 0.95rem; margin: 0; } /* ========================================================================== COMMENTATOR PROFILE PAGE STYLES (FROM commentator.html) ========================================================================== */ /* Custom Profile Page Styles */ .comm-profile-section { max-width: 1400px; margin: 0 auto; padding: calc(80px + 2rem) 1rem 4rem; min-height: 85vh; font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } @media (max-width: 768px) { .comm-profile-section { padding-top: calc(64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem); } } html.is-ios-safari .comm-profile-section { padding-top: calc(80px + 64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem) !important; } .comm-breadcrumb-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; } .comm-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; color: #71717A; font-size: 0.95rem; font-weight: 600; text-decoration: none; text-transform: uppercase; font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.1em; transition: color 0.2s ease, transform 0.2s ease; background: rgba(255, 255, 255, 0.03); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.08); } .comm-back-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); transform: translateX(-2px); } .comm-header-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; } @media (max-width: 640px) { .comm-header-bar { flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .comm-header-line { display: none; } .comm-title-name { font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important; line-height: 1.1; } .comm-scroll-btn { font-size: 1.15rem !important; } } .comm-title-name { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin: 0; line-height: 1; } .comm-header-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15); margin: 0 1.5rem; } .comm-scroll-btn { display: inline-flex; align-items: center; gap: 0.5rem; color: #71717A; font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: none; cursor: pointer; padding: 0; transition: color 0.2s ease; flex-shrink: 0; } .comm-scroll-btn:hover { color: #ffffff; } .comm-scroll-btn svg { transition: transform 0.2s ease; } .comm-scroll-btn:hover svg { transform: translateY(3px); } /* Profile Main Grid */ .comm-profile-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; } @media (min-width: 768px) { .comm-profile-grid { grid-template-columns: 340px 1fr; gap: 2rem; } } @media (min-width: 1024px) { .comm-profile-grid { grid-template-columns: 380px 1fr; gap: 2.5rem; } } /* Photo Wrap */ .comm-photo-container { width: 100%; aspect-ratio: 3 / 4; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background-color: #141417; position: relative; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6); } .comm-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; } .comm-photo-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #141417; color: rgba(255, 255, 255, 0.2); } /* Bio Card */ .comm-bio-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 1.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(12px); } @media (min-width: 640px) { .comm-bio-card { padding: 2rem 2.25rem; } } .comm-bio-glow { position: absolute; top: 0; right: 0; width: 16rem; height: 16rem; background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 70%); pointer-events: none; z-index: 0; } /* Top Metadata Bar */ .comm-meta-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; position: relative; z-index: 1; flex-wrap: wrap; } .comm-sports-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; } .comm-sport-pill { font-family: var(--font-agency), 'Agency FB', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; padding: 0.35rem 0.85rem; border-radius: 0.5rem; background-color: #1A1A1E; border: 1px solid rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); line-height: 1; } .comm-sport-pill span.emoji { font-size: 1rem; line-height: 1; } .comm-sport-pill span.label { color: #ffffff; margin-top: 2px; } /* Social Icons */ .comm-socials-list { display: flex; align-items: center; gap: 0.625rem; } .comm-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #71717A; text-decoration: none; transition: all 0.2s ease; } .comm-social-btn:hover { color: #ffffff; transform: translateY(-2px); } .comm-social-btn.tg:hover { background: rgba(44, 165, 224, 0.2); border-color: #2CA5E0; color: #2CA5E0; box-shadow: 0 0 15px rgba(44, 165, 224, 0.4); } .comm-social-btn.vk:hover { background: rgba(0, 119, 255, 0.2); border-color: #0077FF; color: #0077FF; box-shadow: 0 0 15px rgba(0, 119, 255, 0.4); } .comm-social-btn.yt:hover { background: rgba(255, 0, 0, 0.2); border-color: #FF0000; color: #FF0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.4); } /* Biography */ .comm-bio-title { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; } .comm-bio-title svg { color: #3B82F6; } .comm-bio-text { color: #D4D4D8; font-size: 1rem; line-height: 1.7; white-space: pre-line; flex: 1; position: relative; z-index: 1; margin: 0; } .comm-bio-empty { color: #71717A; font-style: italic; } /* Events Section */ .comm-events-section { padding-top: 1rem; scroll-margin-top: 6rem; } .comm-tabs-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem; } .comm-tab-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: none; color: #71717A; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; transition: color 0.2s ease, background-color 0.2s ease; } .comm-tab-btn:hover { color: #ffffff; } .comm-tab-btn.active { color: #ffffff; background: rgba(255, 255, 255, 0.05); } .comm-tab-divider { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 0 1rem; } /* Event Cards List */ .comm-events-list { display: flex; flex-direction: column; gap: 0.875rem; } .comm-events-list .orig-event-card { margin-bottom: 0.75rem; } /* Empty state */ .comm-empty-state { padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 1rem; } .comm-empty-icon { width: 3rem; height: 3rem; color: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; } .comm-empty-title { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; color: #ffffff; margin: 0 0 0.5rem 0; } .comm-empty-desc { color: #71717A; font-size: 0.95rem; margin: 0; } /* ========================================================================== FULL VIDEOBLOG PAGE STYLES (FROM videoblog.html) ========================================================================== */ /* Full Videoblog Page Specific Styles */ .vb-page-container { max-width: 1400px; margin: 0 auto; padding: calc(80px + 2rem) 1rem 4rem; min-height: 85vh; font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif; } @media (max-width: 768px) { .vb-page-container { padding-top: calc(64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem); } } html.is-ios-safari .vb-page-container { padding-top: calc(80px + 64px + max(1rem, env(safe-area-inset-top, 0px)) + 1.5rem) !important; } .vb-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; } .vb-page-title { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin: 0; display: flex; align-items: center; gap: 0.75rem; line-height: 1; } .vb-page-title svg { color: #3B82F6; width: 0.8em; height: 0.8em; margin-top: -2px; } /* Filters Section */ .vb-filters-wrapper { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; } .vb-filter-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.4rem; } .vb-filter-row::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .vb-filter-row { flex-wrap: wrap; gap: 0.5rem 1.75rem; overflow-x: visible; } } .vb-tab-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #71717A; background: none; border: none; cursor: pointer; padding: 0.25rem 0; position: relative; transition: color 0.2s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; } .vb-tab-btn:hover { color: #ffffff; } .vb-tab-btn.is-active { color: #ffffff; } .vb-tab-btn.is-active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #3B82F6; border-radius: 1px; } /* Video Grid */ .vb-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 640px) { .vb-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (min-width: 1024px) { .vb-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } /* Load more button row */ .vb-load-more-row { display: flex; align-items: center; justify-content: center; margin-top: 2rem; width: 100%; } .vb-divider-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15); } .vb-load-more-btn { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #71717A; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem; transition: color 0.2s ease; white-space: nowrap; } .vb-load-more-btn:hover { color: #ffffff; } .vb-load-more-btn svg { transition: transform 0.2s ease; } .vb-load-more-btn:hover svg { transform: translateY(3px); } /* Empty state */ .vb-empty-state { grid-column: 1 / -1; padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 1rem; } .vb-empty-icon { width: 3rem; height: 3rem; color: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; } .vb-empty-title { font-family: var(--font-agency), 'Agency FB', sans-serif; font-size: 1.35rem; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; color: #ffffff; margin: 0 0 0.5rem 0; } .vb-empty-desc { color: #71717A; font-size: 0.95rem; margin: 0; }