diff --git a/index.html b/index.html index 720921a..001df5c 100644 --- a/index.html +++ b/index.html @@ -3,208 +3,183 @@ - 7XL – חווית הימורים ברמה אחרת - - - + 7XL - חווית הימורים ברמה אחרת + + + - + - + - - -
-
-
+
-
-
- +
- הפלטפורמה המובילה בישראל -

7XL – חווית הימורים ברמה אחרת

-

הימורי ספורט חי, קזינו אונליין פרימיום, ובונוסים שלא תמצאו בשום מקום אחר. הצטרפו לאלפי שחקנים שכבר נהנים מחוויית המשחק המתקדמת ביותר.

+
+ + פלטפורמה מובילה בישראל +
+

+ 7XL + חווית הימורים ברמה אחרת +

+

הימורי ספורט חי, קזינו אונליין מתקדם, בונוסים בלעדיים ואפליקציה מהירה במיוחד. הצטרפו לאלפי שחקנים שכבר נהנים.

- - הורד עכשיו - קבל בונוס -
- 50,000+ + 50K+ שחקנים פעילים
- 24/7 + 24/7 תמיכה בעברית
- 100+ - משחקים + 100% + אבטחה מלאה
-
+
-
+
למה 7XL?

יתרונות הפלטפורמה

-
+
-
-
-

הימורי ספורט חי

-

הימורים בזמן אמת על אלפי משחקים מכל רחבי העולם. אודסים תחרותיים ושווקים מגוונים.

+

עקבו אחר המשחקים בזמן אמת והמרו על תוצאות משתנות. אודס דינמיים ועדכונים מיידיים.

-
-
-
פופולרי
+ -
-

קזינו אונליין

-

מאות משחקי קזינו פרימיום — רולטה, בלאקג'ק, סלוטים ופוקר עם דילרים חיים.

-
+

קזינו אונליין

+

מגוון ענק של משחקים: רולטה, בלאקג'ק, סלוטים ופוקר. דילרים חיים 24/7.

-
-
-

בונוסים שווים

-

בונוס הצטרפות נדיב, הטבות יומיות והחזרי כספים. ככל שמשחקים יותר — מקבלים יותר.

+

בונוס הצטרפות עד 100%, בונוסים יומיים, מבצעים מיוחדים והחזרים על הפסדים.

-
-
-

אפליקציה מהירה

-

אפליקציה מותאמת לכל מכשיר עם ביצועים מעולים וממשק אינטואיטיבי בעברית.

+

אפליקציה מותאמת לכל מכשיר עם ממשק נוח בעברית וביצועים מהירים במיוחד.

@@ -213,85 +188,126 @@
-
+
ספורט חי -

הימורי ספורט

-

אלפי משחקים מכל רחבי העולם, כולל ליגות מובילות ואירועים בינלאומיים

-
-
-
-
- -
-

כדורגל

-

פרמייר ליג, לה ליגה, סריה A, בונדסליגה ועוד

- 500+ - משחקים יומיים -
-
-
- -
-

כדורסל

-

NBA, יורוליג, ליגת העל ועוד

- 200+ - משחקים יומיים -
-
-
- -
-

טניס

-

גרנד סלאם, ATP, WTA

- 150+ - משחקים יומיים -
-
-
- -
-

ענפים נוספים

-

הוקי, אמריקאי, MMA, משחקי וידאו ועוד

- 50+ - ענפי ספורט -
+

המרו על הענפים האהובים

-
-
- -

משחקים חיים עכשיו

+
+
+ + + +
-
-
- 67' - ליברפול 2-1 מנצ'סטר יונייטד - 1.35 -
-
- Q3 - לייקרס 78-82 סלטיקס - 2.10 -
-
- SET2 - ג'וקוביץ' נגד נדאל - 1.65 +
+
+
+ + + LIVE + + 67' +
+
+
+ + מכבי תל אביב +
+
+ 2 + : + 1 +
+
+ + הפועל באר שבע +
+
+
+ + + +
@@ -300,72 +316,110 @@
-
-
+
קזינו אונליין -

משחקי קזינו פרימיום

-

חוויית קזינו אמיתית עם דילרים חיים ומשחקים מהמובילים בעולם

-
+

משחקים שאוהבים

+

דילרים חיים, גרפיקה מדהימה ופרסים ענקיים

+
-
-
-

רולטה

-

רולטה אירופאית ואמריקאית עם דילרים חיים

+

רולטה אירופאית וצרפתית עם דילרים חיים

+ שחק עכשיו
-
-
-
- - - -
+ +
+

בלאקג'ק

-

שולחנות VIP ושולחנות למתחילים

+

השג 21 ונצח את הדילר במשחק הקלפים הקלאסי

+ שחק עכשיו
-
-
- + +
+

סלוטים

-

מאות מכונות מזל עם ג'קפוטים ענקיים

+

מאות מכונות מזל עם ג'קפוטים ענקיים

+ שחק עכשיו
-
-
- + +
+

פוקר

-

טקסס הולדם, אומהה וטורנירים יומיים

+

טקסס הולדם, אומהה וטורנירים בינלאומיים

+ שחק עכשיו
@@ -375,70 +429,54 @@
-
- הטבות מיוחדות -

בונוסים שווים

-
-
-
-
LIMITED OFFER
-
- 100% - בונוס הפקדה ראשונה -
-

הפקד עד ₪1,000 וקבל כפול! בונוס הצטרפות בלעדי לשחקנים חדשים.

-
- diff --git a/script.js b/script.js index fa9811a..66568a8 100644 --- a/script.js +++ b/script.js @@ -1,132 +1,262 @@ -/** - * 7XL – Interactive Features - * Clean, accessible, respects user preferences - */ - (function() { 'use strict'; + // Check for reduced motion preference const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; - /** - * Header scroll behavior - */ - function initHeader() { - const header = document.querySelector('.site-header'); - if (!header) return; - - let ticking = false; - - function handleScroll() { - if (!ticking) { - requestAnimationFrame(() => { - if (window.pageYOffset > 40) { - header.classList.add('scrolled'); - } else { - header.classList.remove('scrolled'); - } - ticking = false; - }); - ticking = true; - } - } - - window.addEventListener('scroll', handleScroll, { passive: true }); - handleScroll(); - } - - /** - * Mobile menu toggle - */ - function initMobileMenu() { - const toggle = document.querySelector('.mobile-toggle'); - const mobileNav = document.querySelector('.mobile-nav'); - - if (!toggle || !mobileNav) return; - - toggle.addEventListener('click', () => { - const isExpanded = toggle.getAttribute('aria-expanded') === 'true'; - toggle.setAttribute('aria-expanded', !isExpanded); - mobileNav.hidden = isExpanded; - - if (!isExpanded) { - const firstLink = mobileNav.querySelector('a'); - if (firstLink) firstLink.focus(); - } - }); - - // Close on link click - mobileNav.querySelectorAll('a').forEach(link => { - link.addEventListener('click', () => { - toggle.setAttribute('aria-expanded', 'false'); - mobileNav.hidden = true; - }); - }); - - // Close on escape - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape' && !mobileNav.hidden) { - toggle.setAttribute('aria-expanded', 'false'); - mobileNav.hidden = true; - toggle.focus(); - } - }); - } - - /** - * Scroll reveal animations - */ + // ======================================== + // SCROLL REVEAL ANIMATIONS + // ======================================== function initScrollReveal() { if (prefersReducedMotion) return; const revealElements = document.querySelectorAll( - '.feature-card, .sport-card, .casino-game, .bonus-card, .bonus-main, .section-header' + '.feature-card, .sport-item, .game-card, .bonus-card, .download-btn, .section-header' ); - if (!revealElements.length) return; + revealElements.forEach(el => { + el.classList.add('reveal'); + }); - revealElements.forEach(el => el.classList.add('reveal')); + const observerOptions = { + root: null, + rootMargin: '0px 0px -100px 0px', + threshold: 0.1 + }; - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - entry.target.classList.add('visible'); - observer.unobserve(entry.target); - } - }); - }, - { - threshold: 0.15, - rootMargin: '0px 0px -40px 0px' - } - ); + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('active'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); - revealElements.forEach(el => observer.observe(el)); + revealElements.forEach(el => { + observer.observe(el); + }); } - /** - * Smooth scroll for anchor links - */ + // ======================================== + // HEADER SCROLL EFFECT + // ======================================== + function initHeaderScroll() { + const header = document.querySelector('.site-header'); + if (!header) return; + + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.background = 'rgba(10, 22, 40, 0.95)'; + } else { + header.style.background = 'rgba(10, 22, 40, 0.8)'; + } + }, { passive: true }); + } + + // ======================================== + // SPORTS TABS INTERACTION WITH KEYBOARD SUPPORT + // ======================================== + function initSportsTabs() { + const sportItems = document.querySelectorAll('.sport-item'); + const sportsList = document.querySelector('.sports-list'); + + if (!sportsList || sportItems.length === 0) return; + + // Click handler + sportItems.forEach(item => { + item.addEventListener('click', () => { + activateTab(item, sportItems); + }); + }); + + // Keyboard navigation + sportsList.addEventListener('keydown', (e) => { + const currentTab = document.activeElement; + if (!currentTab.classList.contains('sport-item')) return; + + const tabs = Array.from(sportItems); + const currentIndex = tabs.indexOf(currentTab); + let newIndex; + + switch(e.key) { + case 'ArrowDown': + case 'ArrowLeft': // RTL: left is next + e.preventDefault(); + newIndex = (currentIndex + 1) % tabs.length; + break; + case 'ArrowUp': + case 'ArrowRight': // RTL: right is previous + e.preventDefault(); + newIndex = (currentIndex - 1 + tabs.length) % tabs.length; + break; + case 'Home': + e.preventDefault(); + newIndex = 0; + break; + case 'End': + e.preventDefault(); + newIndex = tabs.length - 1; + break; + default: + return; + } + + tabs[newIndex].focus(); + activateTab(tabs[newIndex], sportItems); + }); + + function activateTab(selectedTab, allTabs) { + allTabs.forEach(t => { + t.classList.remove('active'); + t.setAttribute('aria-selected', 'false'); + t.setAttribute('tabindex', '-1'); + }); + selectedTab.classList.add('active'); + selectedTab.setAttribute('aria-selected', 'true'); + selectedTab.setAttribute('tabindex', '0'); + } + } + + // ======================================== + // ODDS BUTTON INTERACTION + // ======================================== + function initOddsButtons() { + const oddBtns = document.querySelectorAll('.odd-btn'); + + oddBtns.forEach(btn => { + btn.addEventListener('click', () => { + oddBtns.forEach(b => b.classList.remove('highlighted')); + btn.classList.add('highlighted'); + }); + }); + } + + // ======================================== + // MOBILE MENU + // ======================================== + function initMobileMenu() { + const menuBtn = document.querySelector('.mobile-menu-btn'); + const navLinks = document.querySelector('.nav-links'); + + if (!menuBtn || !navLinks) return; + + let mobileNav = null; + + menuBtn.addEventListener('click', () => { + const isOpen = menuBtn.classList.toggle('open'); + menuBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + + if (isOpen) { + // Create mobile menu + mobileNav = document.createElement('nav'); + mobileNav.className = 'mobile-nav'; + mobileNav.id = 'mobile-nav'; + mobileNav.setAttribute('aria-label', 'תפריט ניווט ראשי'); + mobileNav.innerHTML = ``; + mobileNav.style.cssText = ` + position: fixed; + top: 70px; + inset-inline: 0; + background: rgba(10, 22, 40, 0.98); + backdrop-filter: blur(20px); + padding: 2rem; + border-bottom: 1px solid rgba(255,255,255,0.1); + z-index: 999; + `; + + const links = mobileNav.querySelectorAll('a'); + links.forEach((link, i) => { + link.style.cssText = ` + display: block; + padding: 1rem 0; + font-size: 1.125rem; + border-bottom: 1px solid rgba(255,255,255,0.05); + opacity: 0; + animation: mobileSlideIn 0.3s ease ${i * 0.05}s forwards; + `; + }); + + // Add animation keyframes + if (!document.querySelector('#mobile-menu-styles')) { + const style = document.createElement('style'); + style.id = 'mobile-menu-styles'; + style.textContent = ` + @keyframes mobileSlideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + `; + document.head.appendChild(style); + } + + document.body.appendChild(mobileNav); + + // Close on link click + links.forEach(link => { + link.addEventListener('click', () => { + menuBtn.classList.remove('open'); + menuBtn.setAttribute('aria-expanded', 'false'); + if (mobileNav) { + mobileNav.remove(); + mobileNav = null; + } + }); + }); + + // Focus first link + if (links.length > 0) { + links[0].focus(); + } + } else { + if (mobileNav) { + mobileNav.remove(); + mobileNav = null; + } + } + }); + + // Close menu on escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && mobileNav) { + menuBtn.classList.remove('open'); + menuBtn.setAttribute('aria-expanded', 'false'); + mobileNav.remove(); + mobileNav = null; + menuBtn.focus(); + } + }); + } + + // ======================================== + // SMOOTH SCROLL FOR ANCHOR LINKS + // ======================================== function initSmoothScroll() { document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { - const targetId = this.getAttribute('href'); - if (targetId === '#') return; + const href = this.getAttribute('href'); + if (href === '#') return; - const target = document.querySelector(targetId); + const target = document.querySelector(href); if (target) { e.preventDefault(); - const header = document.querySelector('.site-header'); - const offset = header ? header.offsetHeight + 16 : 80; - const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset; + const headerHeight = header ? header.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; window.scrollTo({ top: targetPosition, behavior: prefersReducedMotion ? 'auto' : 'smooth' }); - + // Set focus for accessibility target.setAttribute('tabindex', '-1'); target.focus({ preventScroll: true }); @@ -135,132 +265,154 @@ }); } - /** - * Pause animations when not in view (performance) - */ - function initAnimationPausing() { + // ======================================== + // PARALLAX EFFECTS + // ======================================== + function initParallax() { if (prefersReducedMotion) return; - const roulette = document.querySelector('.roulette-wheel'); - if (!roulette) return; - - // Add animation via JS so it only runs when visible - const style = document.createElement('style'); - style.textContent = ` - .roulette-wheel.animate { - animation: spin 15s linear infinite; - } - @keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } - } - `; - document.head.appendChild(style); - - const observer = new IntersectionObserver( - (entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - roulette.classList.add('animate'); - } else { - roulette.classList.remove('animate'); - } - }); - }, - { threshold: 0.3 } - ); - observer.observe(roulette); - } - - /** - * Floating cards animation (CSS-only when visible) - */ - function initFloatingCards() { - if (prefersReducedMotion) return; - - const style = document.createElement('style'); - style.textContent = ` - @keyframes float { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-12px); } - } - .floating-card.animate { - animation: float 5s ease-in-out infinite; - } - .floating-card.card-2.animate { - animation-delay: 1.5s; - } - .floating-card.card-3.animate { - animation-delay: 3s; - } - `; - document.head.appendChild(style); - - const cards = document.querySelectorAll('.floating-card'); - if (!cards.length) return; - - const observer = new IntersectionObserver( - (entries) => { - entries.forEach(entry => { - cards.forEach(card => { - if (entry.isIntersecting) { - card.classList.add('animate'); - } else { - card.classList.remove('animate'); - } + const glows = document.querySelectorAll('.glow'); + + let ticking = false; + window.addEventListener('scroll', () => { + if (!ticking) { + window.requestAnimationFrame(() => { + const scrollY = window.pageYOffset; + + glows.forEach((glow, index) => { + const speed = 0.05 + (index * 0.02); + glow.style.transform = `translateY(${scrollY * speed}px)`; }); + + ticking = false; }); - }, - { threshold: 0.2 } - ); - - const heroVisual = document.querySelector('.hero-visual'); - if (heroVisual) observer.observe(heroVisual); + ticking = true; + } + }, { passive: true }); } - /** - * Live pulse animation - */ - function initLivePulse() { + // ======================================== + // LIVE ELEMENTS ANIMATION + // ======================================== + function initLiveElements() { if (prefersReducedMotion) return; - const style = document.createElement('style'); - style.textContent = ` - @keyframes pulse { - 0%, 100% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.4); opacity: 0.6; } - } - .live-pulse { - animation: pulse 1.5s ease-in-out infinite; - } - .live-indicator { - animation: blink 1.2s ease-in-out infinite; - } - @keyframes blink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } - } - `; - document.head.appendChild(style); + // Only animate when elements are visible + const liveMatchCard = document.querySelector('.live-match-card'); + if (!liveMatchCard) return; + + let animationInterval = null; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Start animations + animationInterval = setInterval(() => { + // Simulate odds changes + const oddValues = document.querySelectorAll('.odd-value'); + const randomOdd = oddValues[Math.floor(Math.random() * oddValues.length)]; + if (randomOdd) { + const currentValue = parseFloat(randomOdd.textContent); + if (!isNaN(currentValue)) { + const change = (Math.random() - 0.5) * 0.1; + const newValue = Math.max(1.01, currentValue + change).toFixed(2); + + randomOdd.style.transition = 'color 0.3s ease'; + randomOdd.style.color = change > 0 ? '#22c55e' : '#ef4444'; + randomOdd.textContent = newValue; + + setTimeout(() => { + randomOdd.style.color = ''; + }, 1000); + } + } + }, 4000); + } else { + // Stop animations when not visible + if (animationInterval) { + clearInterval(animationInterval); + animationInterval = null; + } + } + }); + }, { threshold: 0.1 }); + + observer.observe(liveMatchCard); } - /** - * Initialize all features - */ + // ======================================== + // BUTTON RIPPLE EFFECT + // ======================================== + function initRippleEffect() { + if (prefersReducedMotion) return; + + // Add ripple animation styles once + if (!document.querySelector('#ripple-styles')) { + const style = document.createElement('style'); + style.id = 'ripple-styles'; + style.textContent = ` + @keyframes ripple { + to { + transform: scale(4); + opacity: 0; + } + } + .btn, .download-btn, .support-btn { + position: relative; + overflow: hidden; + } + `; + document.head.appendChild(style); + } + + const buttons = document.querySelectorAll('.btn, .download-btn, .support-btn'); + + buttons.forEach(btn => { + btn.addEventListener('click', function(e) { + const rect = this.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const ripple = document.createElement('span'); + ripple.style.cssText = ` + position: absolute; + background: rgba(255,255,255,0.3); + border-radius: 50%; + width: 100px; + height: 100px; + left: ${x - 50}px; + top: ${y - 50}px; + transform: scale(0); + animation: ripple 0.6s ease-out; + pointer-events: none; + `; + + this.appendChild(ripple); + + setTimeout(() => ripple.remove(), 600); + }); + }); + } + + // ======================================== + // INITIALIZE ALL + // ======================================== function init() { - initHeader(); - initMobileMenu(); initScrollReveal(); + initHeaderScroll(); + initSportsTabs(); + initOddsButtons(); + initMobileMenu(); initSmoothScroll(); - initAnimationPausing(); - initFloatingCards(); - initLivePulse(); + initParallax(); + initLiveElements(); + initRippleEffect(); } + // Run on DOM ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } - })(); diff --git a/style.css b/style.css index 9b15412..6a123bb 100644 --- a/style.css +++ b/style.css @@ -1,34 +1,40 @@ -/* ================================ - 7XL – Premium Gaming Aesthetic - ================================ */ - :root { - /* Core Palette */ + /* Base colors */ --navy-deep: #0a1628; --purple-deep: #1a0a2e; + --purple-mid: #2d1b4e; + + /* Accent colors */ --gold: #d4af37; + --gold-light: #e8c547; --orange: #ff6b35; + --orange-light: #ff8c5a; + + /* Neutral */ --white: #ffffff; - --white-soft: rgba(255, 255, 255, 0.9); - --white-muted: rgba(255, 255, 255, 0.75); - --white-faint: rgba(255, 255, 255, 0.12); + --white-90: rgba(255, 255, 255, 0.9); + --white-70: rgba(255, 255, 255, 0.7); + --white-60: rgba(255, 255, 255, 0.6); + --white-50: rgba(255, 255, 255, 0.5); + --white-20: rgba(255, 255, 255, 0.2); + --white-10: rgba(255, 255, 255, 0.1); + --white-05: rgba(255, 255, 255, 0.05); /* Gradients */ - --gradient-bg: linear-gradient(135deg, var(--navy-deep) 0%, var(--purple-deep) 50%, var(--navy-deep) 100%); - --gradient-accent: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%); - --gradient-glow: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(255, 107, 53, 0.2) 100%); + --gradient-main: linear-gradient(135deg, var(--navy-deep) 0%, var(--purple-deep) 100%); + --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); + --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); + --gradient-orange: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); - /* Glass */ - --glass-bg: rgba(255, 255, 255, 0.04); - --glass-border: rgba(255, 255, 255, 0.08); - --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + /* Glass effect */ + --glass-bg: rgba(255, 255, 255, 0.05); + --glass-border: rgba(255, 255, 255, 0.1); - /* Typography */ - --font-hebrew: 'Heebo', system-ui, sans-serif; - --font-display: 'Inter', var(--font-hebrew); + /* Typography — Hebrew max weight is 600 */ + --font-primary: 'Heebo', 'Rubik', sans-serif; + --font-display: 'Rubik', 'Heebo', sans-serif; - /* Spacing Scale */ - --space-2xs: 0.25rem; + /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; @@ -37,14 +43,18 @@ --space-2xl: 4rem; --space-3xl: 6rem; - /* Transitions */ - --ease-out: cubic-bezier(0.16, 1, 0.3, 1); - --transition-fast: 0.15s var(--ease-out); - --transition-medium: 0.3s var(--ease-out); - --transition-slow: 0.5s var(--ease-out); + /* Misc */ + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 20px; + --radius-xl: 32px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --shadow-glow: 0 0 40px rgba(212, 175, 55, 0.3); + + /* Focus ring — made more prominent */ + --focus-ring: 0 0 0 4px rgba(212, 175, 55, 0.6); } -/* Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; @@ -53,220 +63,138 @@ html { scroll-behavior: smooth; - font-size: clamp(15px, 1vw + 12px, 18px); } body { - font-family: var(--font-hebrew); - background: var(--gradient-bg); + font-family: var(--font-primary); + background: var(--gradient-main); color: var(--white); line-height: 1.6; - overflow-x: hidden; min-height: 100vh; + overflow-x: hidden; } -/* Skip Link */ -.skip-link { - position: absolute; - top: -100%; - inset-inline-start: var(--space-sm); - background: var(--gold); - color: var(--navy-deep); - padding: var(--space-xs) var(--space-sm); - border-radius: 4px; - font-weight: 500; - z-index: 9999; - transition: top var(--transition-fast); -} - -.skip-link:focus { - top: var(--space-sm); -} - -/* Typography — Hebrew capped at 600, enforced globally */ -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-hebrew); - font-weight: 600; - line-height: 1.2; -} - -h1 { - font-size: clamp(2rem, 5vw, 3.5rem); - letter-spacing: -0.01em; -} - -h2 { - font-size: clamp(1.75rem, 3.5vw, 2.5rem); -} - -h3 { - font-size: clamp(1.125rem, 2vw, 1.375rem); -} - -h4 { - font-size: 1rem; - font-weight: 500; -} - -p { - font-weight: 400; - color: var(--white-soft); - max-width: 60ch; -} - -a { - color: inherit; - text-decoration: none; - transition: color var(--transition-fast); -} - -/* Utility */ -.container { - width: 100%; - max-width: 1200px; - margin: 0 auto; - padding-inline: var(--space-md); -} - -.gold-text { - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.glass { - background: var(--glass-bg); - border: 1px solid var(--glass-border); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border-radius: 16px; -} - -/* Buttons */ -.btn { - display: inline-flex; - align-items: center; - gap: var(--space-xs); - padding: var(--space-sm) var(--space-lg); - border-radius: 50px; - font-family: var(--font-hebrew); - font-weight: 500; - font-size: 1rem; - cursor: pointer; - transition: all var(--transition-medium); - border: none; - position: relative; - overflow: hidden; -} - -.btn svg { - width: 18px; - height: 18px; - flex-shrink: 0; -} - -.btn-primary { - background: var(--gradient-accent); - color: var(--navy-deep); -} - -.btn-primary:hover, -.btn-primary:focus-visible { - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35); -} - -.btn-primary.glow { - box-shadow: 0 0 16px rgba(212, 175, 55, 0.25); -} - -.btn-secondary { - background: transparent; - color: var(--white); - border: 2px solid var(--white-faint); -} - -.btn-secondary:hover, -.btn-secondary:focus-visible { - border-color: var(--gold); - color: var(--gold); -} - -/* Focus states */ -a:focus-visible, -button:focus-visible { +/* Focus styles for accessibility — more prominent */ +:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } -/* ================================ - HEADER - ================================ */ +a:focus-visible, +button:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 3px; + border-radius: var(--radius-sm); +} + +/* ======================================== + TYPOGRAPHY — Hebrew capped at weight 600 +======================================== */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; +} + +h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); } +h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); } +h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } +h4 { font-size: 1.125rem; font-weight: 500; } + +p { + color: var(--white-70); + font-weight: 400; + max-width: 65ch; +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition); +} + +ul { + list-style: none; +} + +/* ======================================== + LAYOUT +======================================== */ +.container { + width: 100%; + max-width: 1280px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* ======================================== + HEADER / NAV +======================================== */ .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 1000; padding: var(--space-sm) 0; - transition: all var(--transition-medium); -} - -.site-header.scrolled { - background: rgba(10, 22, 40, 0.95); - backdrop-filter: blur(16px); - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); + background: rgba(10, 22, 40, 0.8); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--glass-border); } .nav-container { - max-width: 1200px; - margin: 0 auto; - padding-inline: var(--space-md); display: flex; align-items: center; justify-content: space-between; - gap: var(--space-lg); + max-width: 1280px; + margin-inline: auto; + padding-inline: var(--space-md); } .logo { display: flex; - align-items: center; -} - -.logo-text { + align-items: baseline; + gap: 0.125rem; font-family: var(--font-display); font-size: 1.75rem; - font-weight: 700; - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-weight: 600; +} + +.logo-7 { + color: var(--gold); + font-size: 2rem; +} + +.logo-xl { + color: var(--white); } .nav-links { display: flex; - list-style: none; gap: var(--space-lg); } .nav-links a { - font-size: 0.9rem; + color: var(--white-70); + font-size: 0.9375rem; font-weight: 400; - color: var(--white-soft); position: relative; - padding-block: var(--space-xs); + padding: 0.25rem 0; } .nav-links a::after { content: ''; position: absolute; - bottom: 0; + bottom: -2px; inset-inline: 0; height: 2px; - background: var(--gradient-accent); + background: var(--gradient-gold); transform: scaleX(0); - transform-origin: center; - transition: transform var(--transition-fast); + transition: var(--transition); +} + +.nav-links a:hover, +.nav-links a:focus-visible { + color: var(--white); } .nav-links a:hover::after, @@ -275,200 +203,306 @@ button:focus-visible { } .nav-cta { - background: var(--gradient-accent); - color: var(--navy-deep); - padding: var(--space-xs) var(--space-md); - border-radius: 50px; + background: var(--gradient-orange); + color: var(--white); + padding: 0.625rem 1.5rem; + border-radius: var(--radius-sm); font-weight: 500; - font-size: 0.875rem; - transition: all var(--transition-fast); + font-size: 0.9375rem; + box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); } .nav-cta:hover, .nav-cta:focus-visible { - transform: scale(1.03); - box-shadow: 0 0 16px rgba(212, 175, 55, 0.4); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); } -.mobile-toggle { +.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; - padding: var(--space-xs); + padding: 8px; + border-radius: var(--radius-sm); } -.mobile-toggle span { +.mobile-menu-btn span { width: 24px; height: 2px; background: var(--white); - transition: all var(--transition-fast); - transform-origin: center; + transition: var(--transition); } -.mobile-toggle[aria-expanded="true"] span:nth-child(1) { - transform: rotate(45deg) translateY(7px); +.mobile-menu-btn.open span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); } -.mobile-toggle[aria-expanded="true"] span:nth-child(2) { +.mobile-menu-btn.open span:nth-child(2) { opacity: 0; } -.mobile-toggle[aria-expanded="true"] span:nth-child(3) { - transform: rotate(-45deg) translateY(-7px); +.mobile-menu-btn.open span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); } -.mobile-nav { - position: absolute; - top: 100%; - inset-inline: 0; - background: rgba(10, 22, 40, 0.98); - backdrop-filter: blur(16px); - padding: var(--space-md); - border-top: 1px solid var(--glass-border); -} - -.mobile-nav[hidden] { - display: none; -} - -.mobile-nav ul { - list-style: none; - display: flex; - flex-direction: column; - gap: var(--space-sm); -} - -.mobile-nav a { - display: block; - padding: var(--space-sm); - font-size: 1.1rem; - color: var(--white-soft); - border-radius: 8px; - transition: background var(--transition-fast); -} - -.mobile-nav a:hover, -.mobile-nav a:focus-visible { - background: var(--glass-bg); -} - -.mobile-cta { - background: var(--gradient-accent); - color: var(--navy-deep) !important; - text-align: center; +/* ======================================== + BUTTONS +======================================== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + border-radius: var(--radius-md); + font-family: var(--font-primary); font-weight: 500; + font-size: 1rem; + border: none; + cursor: pointer; + transition: var(--transition); } -/* ================================ +.btn-icon { + width: 20px; + height: 20px; +} + +.btn-icon-arrow { + width: 18px; + height: 18px; + transition: var(--transition); +} + +.btn-primary { + background: var(--gradient-orange); + color: var(--white); + box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); +} + +.btn-primary:hover, +.btn-primary:focus-visible { + transform: translateY(-3px); + box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5); +} + +.btn-glow { + position: relative; + overflow: visible; +} + +.btn-glow::before { + content: ''; + position: absolute; + inset: -3px; + background: var(--gradient-orange); + border-radius: inherit; + filter: blur(15px); + opacity: 0.5; + z-index: -1; + transition: var(--transition); +} + +.btn-glow:hover::before, +.btn-glow:focus-visible::before { + opacity: 0.7; + filter: blur(20px); +} + +.btn-secondary { + background: var(--glass-bg); + color: var(--white); + border: 1px solid var(--glass-border); + backdrop-filter: blur(10px); +} + +.btn-secondary:hover, +.btn-secondary:focus-visible { + background: var(--white-10); + border-color: var(--gold); +} + +/* RTL-aware arrow animation — single arrow, transform handles direction */ +.btn-icon-arrow { + transform: scaleX(-1); /* flip for RTL by default */ +} + +[dir="ltr"] .btn-icon-arrow { + transform: scaleX(1); +} + +.btn-secondary:hover .btn-icon-arrow, +.btn-secondary:focus-visible .btn-icon-arrow { + transform: scaleX(-1) translateX(-4px); +} + +[dir="ltr"] .btn-secondary:hover .btn-icon-arrow, +[dir="ltr"] .btn-secondary:focus-visible .btn-icon-arrow { + transform: scaleX(1) translateX(4px); +} + +.btn-large { + padding: 1.25rem 2.5rem; + font-size: 1.125rem; +} + +/* ======================================== HERO SECTION - ================================ */ +======================================== */ .hero { + position: relative; min-height: 100vh; - min-height: 100dvh; display: flex; align-items: center; - position: relative; - padding-top: 80px; - padding-bottom: var(--space-2xl); + padding-top: 100px; overflow: hidden; } -.hero-bg { +.hero-bg-effects { position: absolute; inset: 0; - z-index: -1; + pointer-events: none; } -.hero-gradient { +.glow { position: absolute; - inset: 0; - background: - radial-gradient(ellipse 70% 50% at 20% 40%, rgba(26, 10, 46, 0.7) 0%, transparent 50%), - radial-gradient(ellipse 50% 40% at 80% 60%, rgba(212, 175, 55, 0.08) 0%, transparent 40%); + border-radius: 50%; + filter: blur(100px); + opacity: 0.5; } -.hero-particles { - position: absolute; - inset: 0; - background-image: - radial-gradient(1.5px 1.5px at 20% 30%, rgba(212, 175, 55, 0.4), transparent), - radial-gradient(1.5px 1.5px at 40% 70%, rgba(255, 107, 53, 0.25), transparent), - radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.35), transparent), - radial-gradient(1.5px 1.5px at 80% 50%, rgba(212, 175, 55, 0.25), transparent); - background-size: 400px 400px; +.glow-1 { + width: 600px; + height: 600px; + background: var(--purple-mid); + top: -200px; + inset-inline-end: -100px; +} + +.glow-2 { + width: 400px; + height: 400px; + background: rgba(212, 175, 55, 0.2); + bottom: -100px; + inset-inline-start: -100px; +} + +.glow-3 { + width: 300px; + height: 300px; + background: rgba(255, 107, 53, 0.15); + top: 50%; + inset-inline-start: 30%; } .hero-content { - max-width: 1200px; - margin: 0 auto; - padding-inline: var(--space-md); + position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; + width: 100%; + max-width: 1280px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +.hero-text { + max-width: 560px; } .hero-badge { - display: inline-block; + display: inline-flex; + align-items: center; + gap: 0.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); - padding: var(--space-xs) var(--space-sm); - border-radius: 50px; - font-size: 0.8rem; - font-weight: 500; - color: var(--gold); - margin-bottom: var(--space-sm); + padding: 0.5rem 1rem; + border-radius: 100px; + font-size: 0.875rem; + color: var(--white-70); + margin-bottom: var(--space-md); + backdrop-filter: blur(10px); } -.hero-text h1 { - margin-bottom: var(--space-md); +.badge-dot { + width: 8px; + height: 8px; + background: #22c55e; + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.8); } +} + +.hero-7xl { + display: block; + font-size: clamp(4rem, 12vw, 7rem); + font-weight: 600; + background: var(--gradient-gold); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; + letter-spacing: -0.02em; +} + +.hero-tagline { + display: block; + font-weight: 500; + color: var(--white); + margin-top: var(--space-xs); } .hero-desc { - font-size: 1.1rem; - margin-bottom: var(--space-lg); - max-width: 48ch; + font-size: 1.125rem; + margin-top: var(--space-md); + max-width: 44ch; } .hero-ctas { display: flex; - flex-wrap: wrap; gap: var(--space-sm); - margin-bottom: var(--space-xl); + margin-top: var(--space-lg); + flex-wrap: wrap; } .hero-stats { display: flex; gap: var(--space-xl); + margin-top: var(--space-2xl); + padding-top: var(--space-lg); + border-top: 1px solid var(--glass-border); } .stat { - text-align: center; + display: flex; + flex-direction: column; } .stat-number { - display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--gold); - line-height: 1.1; } .stat-label { - font-size: 0.85rem; - color: var(--white-muted); - font-weight: 400; + font-size: 0.875rem; + color: var(--white-70); /* bumped from 60 to 70 for AA contrast */ } /* Phone Mockup */ -.hero-visual { - position: relative; +.hero-phone { display: flex; justify-content: center; + align-items: center; } .phone-mockup { @@ -476,253 +510,197 @@ button:focus-visible { } .phone-frame { - width: 260px; - height: 520px; - background: linear-gradient(145deg, #1a1a2e 0%, #0a0a15 100%); - border-radius: 36px; - padding: 10px; - box-shadow: - 0 40px 80px rgba(0, 0, 0, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.08); position: relative; + width: 280px; + height: 560px; + background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%); + border-radius: 40px; + padding: 12px; + box-shadow: + 0 50px 100px rgba(0, 0, 0, 0.5), + inset 0 0 0 2px rgba(255, 255, 255, 0.1); } .phone-notch { - width: 90px; - height: 22px; - background: #0a0a15; - border-radius: 0 0 16px 16px; position: absolute; - top: 10px; + top: 12px; inset-inline-start: 50%; - transform: translateX(calc(-50% * var(--rtl-flip, 1))); + transform: translateX(50%); + width: 100px; + height: 28px; + background: #000; + border-radius: 0 0 16px 16px; + z-index: 10; } -[dir="rtl"] .phone-notch { - --rtl-flip: -1; +[dir="ltr"] .phone-notch { + transform: translateX(-50%); } .phone-screen { width: 100%; height: 100%; - background: linear-gradient(180deg, var(--navy-deep) 0%, var(--purple-deep) 100%); - border-radius: 28px; + background: var(--gradient-main); + border-radius: 32px; overflow: hidden; - padding: var(--space-sm); - padding-top: 36px; + padding: var(--space-md); + display: flex; + flex-direction: column; + gap: var(--space-md); } -.app-header { +.screen-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: var(--space-sm); + padding-top: var(--space-lg); } -.app-logo { +.screen-logo { font-family: var(--font-display); - font-size: 1rem; - font-weight: 700; - color: var(--gold); -} - -.app-balance { - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + font-size: 1.25rem; font-weight: 600; - font-size: 0.85rem; -} - -.app-nav { - display: flex; - gap: var(--space-xs); - margin-bottom: var(--space-sm); -} - -.app-nav-item { - flex: 1; - text-align: center; - padding: var(--space-xs); - font-size: 0.7rem; - font-weight: 400; - color: var(--white-muted); - border-radius: 6px; - transition: all var(--transition-fast); -} - -.app-nav-item.active { - background: var(--glass-bg); color: var(--gold); } -.app-content { - display: flex; - flex-direction: column; - gap: var(--space-xs); +.screen-balance { + background: var(--glass-bg); + padding: 0.5rem 0.75rem; + border-radius: var(--radius-sm); + font-size: 0.875rem; + font-weight: 500; + border: 1px solid var(--glass-border); } -.match-card { +.screen-live-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(239, 68, 68, 0.2); + color: #ef4444; + padding: 0.375rem 0.75rem; + border-radius: var(--radius-sm); + font-size: 0.75rem; + font-weight: 600; + align-self: flex-start; +} + +.live-dot { + width: 6px; + height: 6px; + background: #ef4444; + border-radius: 50%; + animation: pulse 1.5s infinite; +} + +.screen-match { background: var(--glass-bg); border: 1px solid var(--glass-border); - border-radius: 10px; - padding: var(--space-xs) var(--space-sm); -} - -.match-card.live { - border-color: rgba(255, 107, 53, 0.5); -} - -.live-indicator { - color: var(--orange); - font-size: 0.6rem; - font-weight: 600; -} - -.match-league { - font-size: 0.6rem; - color: var(--white-muted); - margin-bottom: 2px; + border-radius: var(--radius-md); + padding: var(--space-sm); } .match-teams { display: flex; justify-content: space-between; align-items: center; - font-size: 0.75rem; + font-size: 0.8125rem; font-weight: 500; margin-bottom: var(--space-xs); } -.match-vs, .match-score { - color: var(--gold); - font-size: 0.65rem; +.match-score { + font-size: 1.125rem; font-weight: 600; + color: var(--gold); } .match-odds { display: flex; - gap: var(--space-xs); + gap: 0.5rem; } .odd { flex: 1; text-align: center; - background: rgba(212, 175, 55, 0.1); - border: 1px solid rgba(212, 175, 55, 0.25); - border-radius: 5px; - padding: 3px; - font-size: 0.7rem; - font-weight: 600; - color: var(--gold); + padding: 0.5rem; + background: var(--white-05); + border-radius: var(--radius-sm); + font-size: 0.875rem; + font-weight: 500; +} + +.odd.active { + background: var(--gradient-orange); +} + +.screen-games { + display: flex; + justify-content: center; + gap: var(--space-sm); + margin-top: auto; +} + +.game-icon { + width: 48px; + height: 48px; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; +} + +.game-icon svg { + width: 32px; + height: 32px; } .phone-glow { position: absolute; - inset: -15%; - background: radial-gradient(circle at center, rgba(212, 175, 55, 0.12) 0%, transparent 60%); + inset: -50px; + background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, transparent 70%); + pointer-events: none; z-index: -1; } -/* Floating Cards */ -.floating-cards { - position: absolute; - inset: 0; - pointer-events: none; +/* ======================================== + SECTIONS COMMON +======================================== */ +section { + padding: var(--space-3xl) 0; } -.floating-card { - position: absolute; - width: 44px; - height: 44px; -} - -.floating-card svg { - width: 100%; - height: 100%; -} - -.card-1 { - top: 15%; - inset-inline-start: -8%; -} - -.card-2 { - bottom: 25%; - inset-inline-end: -3%; -} - -.card-3 { - top: 65%; - inset-inline-start: -12%; -} - -.hero-scroll-indicator { - position: absolute; - bottom: var(--space-lg); - inset-inline-start: 50%; - transform: translateX(calc(-50% * var(--rtl-flip, 1))); -} - -[dir="rtl"] .hero-scroll-indicator { - --rtl-flip: -1; -} - -.hero-scroll-indicator svg { - width: 28px; - height: 28px; - stroke: var(--white-muted); - opacity: 0.6; -} - -/* ================================ - SECTION HEADERS - ================================ */ .section-header { - text-align: center; margin-bottom: var(--space-2xl); } +.section-header.centered { + text-align: center; +} + +.section-header.centered p { + max-width: 500px; + margin-inline: auto; + margin-top: var(--space-sm); +} + .section-tag { display: inline-block; - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - font-size: 0.85rem; - font-weight: 500; + color: var(--gold); + font-size: 0.875rem; + font-weight: 600; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.1em; margin-bottom: var(--space-xs); } -.section-header h2 { - margin-bottom: var(--space-xs); -} - -.section-header p { - margin: 0 auto; -} - -.section-header.light .section-tag { - -webkit-text-fill-color: var(--gold); -} - -/* ================================ +/* ======================================== FEATURES SECTION - ================================ */ +======================================== */ .features { - padding: var(--space-3xl) 0; - position: relative; -} - -.features::before { - content: ''; - position: absolute; - top: 0; - inset-inline: 0; - height: 1px; - background: linear-gradient(90deg, transparent, var(--glass-border), transparent); + background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 46, 0.3) 100%); } .features-grid { @@ -731,554 +709,762 @@ button:focus-visible { gap: var(--space-md); } -.feature-card { - padding: var(--space-lg); - text-align: center; - transition: all var(--transition-medium); - position: relative; - overflow: hidden; +@media (min-width: 900px) { + .features-grid { + grid-template-columns: repeat(4, 1fr); + } } -.feature-card::before { - content: ''; - position: absolute; - inset: 0; - background: var(--gradient-glow); - opacity: 0; - transition: opacity var(--transition-medium); +.feature-card { + position: relative; + background: var(--gradient-card); + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + padding: var(--space-lg); + backdrop-filter: blur(10px); + transition: var(--transition); } .feature-card:hover, .feature-card:focus-within { - transform: translateY(-4px); - border-color: rgba(212, 175, 55, 0.25); -} - -.feature-card:hover::before { - opacity: 1; + transform: translateY(-8px); + border-color: var(--gold); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .feature-card.featured { - grid-column: span 2; - display: grid; - grid-template-columns: auto 1fr; - text-align: start; - gap: var(--space-md); - align-items: center; + background: linear-gradient(145deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.02) 100%); + border-color: rgba(212, 175, 55, 0.3); } -.feature-card.featured .feature-icon { - margin: 0; +.feature-badge { + position: absolute; + top: -10px; + inset-inline-end: var(--space-md); + background: var(--gradient-gold); + color: var(--navy-deep); + padding: 0.25rem 0.75rem; + border-radius: 100px; + font-size: 0.75rem; + font-weight: 600; } .feature-icon { - width: 64px; - height: 64px; - margin: 0 auto var(--space-sm); - position: relative; - z-index: 1; + width: 56px; + height: 56px; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--space-md); + color: var(--gold); } .feature-icon svg { - width: 100%; - height: 100%; + width: 28px; + height: 28px; } .feature-card h3 { margin-bottom: var(--space-xs); - position: relative; - z-index: 1; + font-weight: 500; } .feature-card p { - font-size: 0.9rem; - position: relative; - z-index: 1; - max-width: 100%; + font-size: 0.9375rem; } -/* ================================ +/* ======================================== SPORTS SECTION - ================================ */ +======================================== */ .sports { - padding: var(--space-3xl) 0; - background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 46, 0.25) 50%, transparent 100%); + position: relative; } -.sports-grid { +.sports-showcase { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: 1fr 1.2fr; + gap: var(--space-xl); + align-items: start; +} + +.sports-list { + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.sport-item { + display: flex; + align-items: center; gap: var(--space-md); - margin-bottom: var(--space-2xl); -} - -.sport-card { - padding: var(--space-lg) var(--space-md); - text-align: center; - transition: all var(--transition-medium); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: var(--space-md); cursor: pointer; + transition: var(--transition); + width: 100%; + text-align: inherit; + font: inherit; + color: inherit; } -.sport-card:hover, -.sport-card:focus-within { +.sport-item:hover, +.sport-item:focus-visible, +.sport-item.active { + background: var(--white-10); border-color: var(--gold); - transform: translateY(-4px); +} + +.sport-item.active { + box-shadow: 0 0 30px rgba(212, 175, 55, 0.2); } .sport-icon { - width: 64px; - height: 64px; - margin: 0 auto var(--space-sm); + width: 48px; + height: 48px; + background: var(--gradient-gold); + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + color: var(--navy-deep); + flex-shrink: 0; } .sport-icon svg { - width: 100%; - height: 100%; + width: 28px; + height: 28px; } -.sport-card h3 { - margin-bottom: var(--space-2xs); -} - -.sport-card p { - font-size: 0.85rem; - margin-bottom: var(--space-xs); - max-width: 100%; -} - -.sport-count { - display: block; - font-family: var(--font-display); - font-size: 1.5rem; - font-weight: 600; - color: var(--gold); - line-height: 1; -} - -.sport-count-label { - font-size: 0.8rem; - color: var(--white-muted); -} - -/* Live Matches Ticker */ -.live-matches { - background: var(--glass-bg); - border: 1px solid var(--glass-border); - border-radius: 12px; - padding: var(--space-md); - overflow: hidden; -} - -.live-header { +.sport-info { + flex-grow: 1; display: flex; + flex-direction: column; + align-items: flex-start; +} + +.sport-title { + font-weight: 500; + font-size: 1rem; +} + +.sport-subtitle { + font-size: 0.875rem; + color: var(--white-70); /* bumped from 60 to 70 for AA contrast */ +} + +.sport-arrow { + color: var(--white-70); + transition: var(--transition); +} + +.sport-arrow svg { + width: 20px; + height: 20px; +} + +.sport-item:hover .sport-arrow, +.sport-item:focus-visible .sport-arrow, +.sport-item.active .sport-arrow { + color: var(--gold); + transform: translateX(-4px); +} + +[dir="ltr"] .sport-item:hover .sport-arrow, +[dir="ltr"] .sport-item:focus-visible .sport-arrow, +[dir="ltr"] .sport-item.active .sport-arrow { + transform: translateX(4px); +} + +/* Live Match Card */ +.sports-display { + position: sticky; + top: 120px; +} + +.live-match-card { + background: var(--gradient-card); + border: 1px solid var(--glass-border); + border-radius: var(--radius-xl); + padding: var(--space-lg); + backdrop-filter: blur(20px); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); +} + +.match-header { + display: flex; + justify-content: space-between; align-items: center; - gap: var(--space-sm); - margin-bottom: var(--space-sm); + margin-bottom: var(--space-lg); +} + +.live-indicator { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(239, 68, 68, 0.15); + color: #ef4444; + padding: 0.5rem 1rem; + border-radius: 100px; + font-size: 0.875rem; + font-weight: 600; } .live-pulse { width: 8px; height: 8px; - background: var(--orange); + background: #ef4444; border-radius: 50%; -} - -.live-header h4 { - color: var(--gold); - font-size: 0.9rem; -} - -.matches-ticker { - display: flex; - gap: var(--space-md); - overflow-x: auto; - padding-bottom: var(--space-xs); - scrollbar-width: thin; - scrollbar-color: var(--gold) transparent; -} - -.matches-ticker::-webkit-scrollbar { - height: 4px; -} - -.matches-ticker::-webkit-scrollbar-thumb { - background: var(--gold); - border-radius: 2px; -} - -.match-item { - display: flex; - align-items: center; - gap: var(--space-sm); - white-space: nowrap; - padding: var(--space-xs) var(--space-sm); - background: rgba(255, 255, 255, 0.03); - border-radius: 6px; - flex-shrink: 0; + animation: pulse 1.5s infinite; } .match-time { - color: var(--orange); - font-weight: 600; - font-size: 0.8rem; + color: var(--white-70); + font-size: 1.25rem; + font-weight: 500; } -.match-info { - font-size: 0.85rem; +.match-content { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-md); + margin-bottom: var(--space-lg); } -.match-odds-small { - font-family: var(--font-display); +.team { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + flex: 1; +} + +.team-badge { + width: 64px; + height: 64px; +} + +.team-badge svg { + width: 100%; + height: 100%; +} + +.team-name { + font-size: 0.9375rem; + font-weight: 500; + text-align: center; +} + +.score-box { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.score { + font-size: 3rem; font-weight: 600; color: var(--gold); + font-family: var(--font-display); } -/* ================================ +.score-divider { + font-size: 2rem; + color: var(--white-70); +} + +.match-odds-row { + display: flex; + gap: var(--space-sm); +} + +.odd-btn { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: var(--space-sm); + cursor: pointer; + transition: var(--transition); + font: inherit; + color: inherit; +} + +.odd-btn:hover, +.odd-btn:focus-visible { + border-color: var(--gold); + background: var(--white-10); +} + +.odd-btn.highlighted { + background: var(--gradient-orange); + border-color: var(--orange); +} + +.odd-label { + font-size: 0.75rem; + color: var(--white-70); + font-weight: 500; +} + +.odd-btn.highlighted .odd-label { + color: var(--white-70); +} + +.odd-value { + font-size: 1.25rem; + font-weight: 600; + color: var(--white); +} + +/* ======================================== CASINO SECTION - ================================ */ +======================================== */ .casino { - padding: var(--space-3xl) 0; - position: relative; - overflow: hidden; -} - -.casino-bg { - position: absolute; - inset: 0; - background: - radial-gradient(ellipse 40% 60% at 80% 20%, rgba(212, 175, 55, 0.06) 0%, transparent 50%), - radial-gradient(ellipse 50% 50% at 20% 80%, rgba(255, 107, 53, 0.05) 0%, transparent 50%); - z-index: -1; + background: linear-gradient(180deg, rgba(26, 10, 46, 0.3) 0%, transparent 50%, rgba(26, 10, 46, 0.3) 100%); } .casino-games { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } -.casino-game { - background: var(--glass-bg); - border: 1px solid var(--glass-border); - border-radius: 16px; - overflow: hidden; - transition: all var(--transition-medium); +@media (min-width: 900px) { + .casino-games { + grid-template-columns: repeat(4, 1fr); + } } -.casino-game:hover, -.casino-game:focus-within { - transform: translateY(-4px); +.game-card { + background: var(--gradient-card); + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + overflow: hidden; + transition: var(--transition); +} + +.game-card:hover, +.game-card:focus-within { + transform: translateY(-10px); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); border-color: var(--gold); - box-shadow: 0 16px 32px rgba(212, 175, 55, 0.1); } .game-visual { - height: 140px; + height: 160px; display: flex; align-items: center; justify-content: center; - background: linear-gradient(180deg, rgba(26, 10, 46, 0.4) 0%, transparent 100%); + background: linear-gradient(180deg, var(--purple-mid) 0%, var(--purple-deep) 100%); position: relative; overflow: hidden; } -/* Roulette */ +.game-visual::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%); +} + +.game-visual svg { + transition: var(--transition); +} + +.game-card:hover .game-visual svg, +.game-card:focus-within .game-visual svg { + transform: scale(1.1); +} + +/* Roulette wheel animation — controlled by class, respects reduced motion */ .roulette-wheel { - width: 100px; - height: 100px; + transform-origin: center; } -/* Blackjack Cards */ -.cards-stack { - display: flex; - position: relative; +.game-card:hover .roulette-wheel, +.game-card:focus-within .roulette-wheel { + animation: spin 3s linear infinite; } -.playing-card { - width: 50px; - height: 70px; - background: var(--white); - border-radius: 6px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-family: var(--font-display); - font-weight: 700; - font-size: 1.25rem; - color: var(--navy-deep); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); - position: relative; -} - -.playing-card span:last-child { - font-size: 0.9rem; -} - -.card-back { - background: linear-gradient(135deg, var(--purple-deep) 0%, var(--navy-deep) 100%); - transform: translateX(16px) rotate(-8deg); - z-index: 1; -} - -.card-ace { - color: #1d3557; - transform: translateX(0) rotate(0deg); - z-index: 2; -} - -.card-king { - color: #e63946; - transform: translateX(-16px) rotate(8deg); - z-index: 3; -} - -/* Slots */ -.slot-machine { - display: flex; - gap: 6px; - background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%); - padding: 12px; - border-radius: 10px; - border: 2px solid var(--gold); -} - -.slot-reel { - width: 40px; - height: 48px; - background: var(--white); - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - font-family: var(--font-display); - font-weight: 700; - font-size: 1.5rem; - color: var(--orange); -} - -/* Poker Chips */ -.poker-chips { - display: flex; - position: relative; -} - -.chip { - width: 40px; - height: 40px; - border-radius: 50%; - border: 3px dashed; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -.chip-gold { - background: var(--gold); - border-color: #c4a030; - transform: translateX(16px); - z-index: 1; -} - -.chip-orange { - background: var(--orange); - border-color: #e55a2b; - z-index: 2; -} - -.chip-purple { - background: var(--purple-deep); - border-color: #2a1a4e; - transform: translateX(-16px); - z-index: 1; +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } .game-info { - padding: var(--space-sm) var(--space-md); - text-align: center; + padding: var(--space-md); } .game-info h3 { - margin-bottom: var(--space-2xs); + margin-bottom: var(--space-xs); + font-weight: 500; } .game-info p { - font-size: 0.85rem; - max-width: 100%; + font-size: 0.875rem; + margin-bottom: var(--space-sm); } -/* ================================ +.game-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--gold); + font-weight: 500; + font-size: 0.9375rem; +} + +/* Single arrow, direction handled by transform */ +.game-link::after { + content: '←'; + transition: var(--transition); + display: inline-block; +} + +[dir="ltr"] .game-link::after { + content: '→'; +} + +.game-link:hover::after, +.game-link:focus-visible::after { + transform: translateX(-4px); +} + +[dir="ltr"] .game-link:hover::after, +[dir="ltr"] .game-link:focus-visible::after { + transform: translateX(4px); +} + +/* ======================================== BONUSES SECTION - ================================ */ +======================================== */ .bonuses { - padding: var(--space-3xl) 0; -} - -.bonus-showcase { - display: grid; - grid-template-columns: 1.2fr 1fr; - gap: var(--space-xl); - align-items: start; -} - -.bonus-main { - padding: var(--space-xl); position: relative; overflow: hidden; } -.bonus-main::before { +.bonuses::before { content: ''; position: absolute; - top: 0; - inset-inline: 0; - height: 3px; - background: var(--gradient-accent); + inset: 0; + background: radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 60%); + pointer-events: none; } -.bonus-badge { - display: inline-block; - background: var(--orange); - color: var(--white); - padding: var(--space-2xs) var(--space-sm); - border-radius: 4px; - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; +.bonuses-wrapper { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: var(--space-xl); + align-items: center; +} + +.bonuses-content { + position: relative; +} + +.bonuses-content h2 { margin-bottom: var(--space-md); } -.bonus-amount { - margin-bottom: var(--space-md); +.bonuses-content h2 .highlight { + color: var(--orange); } -.bonus-percent { - display: block; - font-family: var(--font-display); - font-size: clamp(3rem, 8vw, 4.5rem); - font-weight: 700; - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - line-height: 1; -} - -.bonus-text { - display: block; - font-size: 1.1rem; - color: var(--white-soft); - font-weight: 500; -} - -.bonus-main > p { - margin-bottom: var(--space-md); +.bonuses-content > p { + font-size: 1.125rem; + max-width: 44ch; } .bonus-features { - list-style: none; - margin-bottom: var(--space-lg); + margin-top: var(--space-lg); + margin-bottom: var(--space-xl); + display: flex; + flex-direction: column; + gap: var(--space-sm); } .bonus-features li { display: flex; align-items: center; - gap: var(--space-xs); - margin-bottom: var(--space-xs); - color: var(--white-soft); - font-size: 0.95rem; + gap: var(--space-sm); + font-size: 1rem; + color: var(--white-90); } .bonus-features svg { - width: 18px; - height: 18px; + width: 20px; + height: 20px; + color: #22c55e; flex-shrink: 0; } -.bonus-extras { +/* Bonus Cards Visual — improved positioning */ +.bonuses-visual { + display: flex; + justify-content: center; + padding: var(--space-lg); +} + +.bonus-card-stack { + position: relative; + width: 280px; + height: 340px; +} + +.bonus-card { + position: absolute; + width: 220px; + height: 130px; + background: var(--gradient-card); + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + backdrop-filter: blur(20px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: var(--transition); +} + +.bc-1 { + top: 0; + inset-inline-start: 0; + background: linear-gradient(145deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 107, 53, 0.05) 100%); + border-color: rgba(255, 107, 53, 0.3); + z-index: 3; +} + +.bc-2 { + top: 80px; + inset-inline-start: 30px; + background: linear-gradient(145deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%); + border-color: rgba(212, 175, 55, 0.3); + z-index: 2; +} + +.bc-3 { + top: 160px; + inset-inline-start: 60px; + background: linear-gradient(145deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.05) 100%); + border-color: rgba(139, 92, 246, 0.3); + z-index: 1; +} + +.bonus-card:hover { + transform: translateY(-10px) rotate(-2deg); +} + +.bc-amount { + font-family: var(--font-display); + font-size: 2rem; + font-weight: 600; + color: var(--white); + margin-bottom: 0.25rem; +} + +.bc-1 .bc-amount { color: var(--orange); } +.bc-2 .bc-amount { color: var(--gold); } +.bc-3 .bc-amount { color: #a78bfa; } + +.bc-label { + font-size: 0.9375rem; + color: var(--white-70); +} + +/* ======================================== + DOWNLOAD SECTION +======================================== */ +.download { + background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 46, 0.5) 100%); +} + +.download-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + align-items: center; +} + +.download-visual { + position: relative; +} + +.download-phones { + position: relative; + height: 500px; + display: flex; + justify-content: center; +} + +.download-phone { + position: absolute; + width: 200px; + height: 400px; + background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%); + border-radius: 32px; + padding: 8px; + box-shadow: 0 40px 80px rgba(0,0,0,0.4); +} + +.phone-1 { + inset-inline-end: 40%; + top: 50px; + transform: rotate(-5deg); + z-index: 1; +} + +.phone-2 { + inset-inline-start: 40%; + top: 0; + transform: rotate(5deg); + z-index: 2; +} + +.dp-screen { + width: 100%; + height: 100%; + background: var(--gradient-main); + border-radius: 26px; + padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); } -.bonus-card { - padding: var(--space-md); - display: flex; - align-items: center; - gap: var(--space-md); - transition: all var(--transition-medium); +.dp-header { + padding-top: var(--space-md); + text-align: center; } -.bonus-card:hover, -.bonus-card:focus-within { - border-color: var(--gold); -} - -.bonus-icon { - width: 44px; - height: 44px; - flex-shrink: 0; -} - -.bonus-icon svg { - width: 100%; - height: 100%; -} - -.bonus-card h4 { - margin-bottom: 2px; +.dp-logo { + font-family: var(--font-display); + font-size: 1rem; + font-weight: 600; color: var(--gold); } -.bonus-card p { - font-size: 0.85rem; - max-width: 100%; +.dp-content { + display: flex; + flex-direction: column; + gap: 0.5rem; } -/* ================================ - DOWNLOAD SECTION - ================================ */ -.download { - padding: var(--space-3xl) 0; - position: relative; - overflow: hidden; +.dp-menu-item { + display: flex; + align-items: center; + gap: 0.5rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + padding: 0.75rem; + font-size: 0.75rem; } -.download-bg { - position: absolute; - inset: 0; - background: - radial-gradient(ellipse 60% 50% at 50% 100%, rgba(26, 10, 46, 0.6) 0%, transparent 60%), - radial-gradient(ellipse 40% 40% at 0% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 50%); - z-index: -1; +.dp-menu-item.active { + background: var(--gradient-orange); + border-color: var(--orange); +} + +.dp-menu-item svg { + width: 14px; + height: 14px; +} + +.dp-live { + display: inline-flex; + align-items: center; + gap: 0.375rem; + background: rgba(239, 68, 68, 0.2); + color: #ef4444; + padding: 0.375rem 0.625rem; + border-radius: var(--radius-sm); + font-size: 0.625rem; + font-weight: 600; + align-self: flex-start; + margin-top: var(--space-md); +} + +.dp-live-dot { + width: 5px; + height: 5px; + background: #ef4444; + border-radius: 50%; + animation: pulse 1.5s infinite; +} + +.dp-game { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +/* Roulette wheel in download section — animation controlled, respects reduced motion via CSS */ +.dp-roulette-wheel { + width: 100px; + height: 100px; + background: conic-gradient( + #c41e3a 0deg 20deg, + #1a1a1a 20deg 40deg, + #c41e3a 40deg 60deg, + #1a1a1a 60deg 80deg, + #c41e3a 80deg 100deg, + #1a1a1a 100deg 120deg, + #c41e3a 120deg 140deg, + #1a1a1a 140deg 160deg, + #c41e3a 160deg 180deg, + #1a1a1a 180deg 200deg, + #c41e3a 200deg 220deg, + #1a1a1a 220deg 240deg, + #c41e3a 240deg 260deg, + #1a1a1a 260deg 280deg, + #c41e3a 280deg 300deg, + #1a1a1a 300deg 320deg, + #c41e3a 320deg 340deg, + #1a1a1a 340deg 360deg + ); + border-radius: 50%; + border: 4px solid var(--gold); + animation: spin 8s linear infinite; +} + +.dp-bet-amount { + text-align: center; + font-size: 1rem; + font-weight: 600; + color: var(--gold); + background: var(--glass-bg); + padding: 0.5rem; + border-radius: var(--radius-sm); } .download-content { - display: grid; - grid-template-columns: 1.4fr 1fr; - gap: var(--space-2xl); - align-items: center; + max-width: 480px; } -.download-text .section-tag { - display: block; - text-align: start; - margin-bottom: var(--space-xs); -} - -.download-text h2 { - text-align: start; +.download-content h2 { margin-bottom: var(--space-md); } -.download-text > p { +.download-content > p { + font-size: 1.125rem; margin-bottom: var(--space-lg); } .download-buttons { display: flex; - flex-wrap: wrap; + flex-direction: column; gap: var(--space-sm); - margin-bottom: var(--space-lg); } .download-btn { @@ -1287,268 +1473,309 @@ button:focus-visible { gap: var(--space-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); + border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); - border-radius: 10px; - transition: all var(--transition-medium); + transition: var(--transition); } .download-btn:hover, .download-btn:focus-visible { + background: var(--white-10); border-color: var(--gold); - background: rgba(212, 175, 55, 0.08); + transform: translateX(-4px); } -.download-btn svg { - width: 28px; - height: 28px; - flex-shrink: 0; +[dir="ltr"] .download-btn:hover, +[dir="ltr"] .download-btn:focus-visible { + transform: translateX(4px); } -.download-btn-text { +.store-icon { + width: 32px; + height: 32px; + color: var(--white); +} + +.btn-text { display: flex; flex-direction: column; - align-items: flex-start; } -.download-btn-text .small { - font-size: 0.65rem; - color: var(--white-muted); - line-height: 1.2; +.btn-text .small { + font-size: 0.75rem; + color: var(--white-70); } -.download-btn-text .big { - font-size: 0.95rem; +.btn-text .large { + font-size: 1rem; font-weight: 500; - line-height: 1.2; } -.download-support { +.download-features { display: flex; - align-items: center; - gap: var(--space-xs); - color: var(--white-muted); - font-size: 0.9rem; -} - -.download-support svg { - width: 22px; - height: 22px; -} - -.download-visual { - display: flex; - justify-content: center; -} - -.qr-container { - padding: var(--space-lg); - text-align: center; -} - -.qr-code { - width: 140px; - height: 140px; - margin: 0 auto var(--space-sm); - border-radius: 10px; - overflow: hidden; -} - -.qr-svg { - width: 100%; - height: 100%; -} - -.qr-container p { - font-size: 0.85rem; -} - -/* ================================ - FOOTER - ================================ */ -.site-footer { - background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%); - padding: var(--space-2xl) 0 var(--space-md); + gap: var(--space-lg); + margin-top: var(--space-lg); + padding-top: var(--space-lg); border-top: 1px solid var(--glass-border); } -.footer-main { +.df-item { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--white-70); + font-size: 0.875rem; +} + +.df-item svg { + width: 18px; + height: 18px; + color: var(--gold); +} + +/* ======================================== + SUPPORT SECTION +======================================== */ +.support { + padding: var(--space-2xl) 0; +} + +.support-card { + background: var(--gradient-card); + border: 1px solid var(--glass-border); + border-radius: var(--radius-xl); + padding: var(--space-xl); + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-lg); + backdrop-filter: blur(20px); +} + +.support-content h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + font-weight: 500; +} + +.support-channels { + display: flex; + gap: var(--space-sm); +} + +.support-btn { + display: flex; + align-items: center; + gap: 0.5rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: 0.75rem 1.25rem; + font-weight: 500; + transition: var(--transition); +} + +.support-btn svg { + width: 20px; + height: 20px; +} + +.support-btn:hover, +.support-btn:focus-visible { + background: var(--white-10); +} + +.support-btn.whatsapp:hover, +.support-btn.whatsapp:focus-visible { + background: rgba(37, 211, 102, 0.2); + border-color: #25d366; +} + +.support-btn.telegram:hover, +.support-btn.telegram:focus-visible { + background: rgba(0, 136, 204, 0.2); + border-color: #0088cc; +} + +.support-btn.chat:hover, +.support-btn.chat:focus-visible { + border-color: var(--gold); +} + +/* ======================================== + FOOTER +======================================== */ +.site-footer { + background: rgba(10, 22, 40, 0.9); + border-top: 1px solid var(--glass-border); + padding: var(--space-2xl) 0 var(--space-lg); +} + +.footer-top { display: grid; - grid-template-columns: 1fr 1.5fr; + grid-template-columns: 1fr 2fr; gap: var(--space-2xl); - margin-bottom: var(--space-xl); + padding-bottom: var(--space-xl); + border-bottom: 1px solid var(--glass-border); +} + +.footer-brand { + max-width: 280px; } .footer-logo { - display: block; + display: inline-flex; + align-items: baseline; + gap: 0.125rem; font-family: var(--font-display); - font-size: 2rem; - font-weight: 700; - background: var(--gradient-accent); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-size: 1.5rem; + font-weight: 600; margin-bottom: var(--space-sm); } .footer-brand p { - font-size: 0.9rem; - margin-bottom: var(--space-md); - max-width: 280px; + font-size: 0.9375rem; } -.footer-contact { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-md); -} - -.footer-contact a { - color: var(--white-muted); - font-size: 0.9rem; - transition: color var(--transition-fast); -} - -.footer-contact a:hover, -.footer-contact a:focus-visible { - color: var(--gold); -} - -.footer-social { - display: flex; - gap: var(--space-xs); -} - -.footer-social a { - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - background: var(--glass-bg); - border: 1px solid var(--glass-border); - border-radius: 50%; - transition: all var(--transition-fast); -} - -.footer-social a:hover, -.footer-social a:focus-visible { - border-color: var(--gold); - background: rgba(212, 175, 55, 0.1); - color: var(--gold); -} - -.footer-social svg { - width: 18px; - height: 18px; -} - -.footer-nav { +.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .footer-col h4 { - color: var(--gold); + color: var(--white); margin-bottom: var(--space-sm); - font-size: 0.9rem; + font-weight: 500; } .footer-col ul { - list-style: none; -} - -.footer-col li { - margin-bottom: var(--space-xs); + display: flex; + flex-direction: column; + gap: 0.5rem; } .footer-col a { - color: var(--white-muted); - font-size: 0.85rem; - transition: color var(--transition-fast); + color: var(--white-70); + font-size: 0.9375rem; } .footer-col a:hover, .footer-col a:focus-visible { - color: var(--white); + color: var(--gold); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; - padding-top: var(--space-md); - border-top: 1px solid var(--glass-border); + padding-top: var(--space-lg); + gap: var(--space-lg); } -.footer-bottom p { - font-size: 0.8rem; - color: var(--white-muted); +.footer-legal p { + font-size: 0.875rem; + color: var(--white-70); } -.age-warning { +.footer-legal .disclaimer { + font-size: 0.8125rem; + color: var(--white-60); + margin-top: 0.25rem; +} + +.footer-badges { display: flex; align-items: center; - gap: var(--space-xs); - color: var(--orange) !important; + gap: var(--space-sm); } -.age-warning svg { +.badge-18 { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: rgba(239, 68, 68, 0.2); + border: 2px solid #ef4444; + border-radius: 50%; + color: #ef4444; + font-weight: 600; + font-size: 0.875rem; +} + +.badge-secure { + display: flex; + align-items: center; + gap: 0.375rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + padding: 0.5rem 0.75rem; + border-radius: var(--radius-sm); + font-size: 0.8125rem; + color: var(--white-70); +} + +.badge-secure svg { width: 16px; height: 16px; - flex-shrink: 0; + color: #22c55e; } -/* ================================ - ANIMATIONS & REVEAL - ================================ */ +/* ======================================== + ANIMATIONS +======================================== */ .reveal { opacity: 0; - transform: translateY(20px); - transition: opacity var(--transition-slow), transform var(--transition-slow); + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; } -.reveal.visible { +.reveal.active { opacity: 1; transform: translateY(0); } -/* Reduced motion */ -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; +/* ======================================== + RESPONSIVE +======================================== */ +@media (max-width: 1024px) { + .sports-showcase { + grid-template-columns: 1fr; + gap: var(--space-xl); } - html { - scroll-behavior: auto; - } - - .reveal { - opacity: 1; - transform: none; - } - - .hero-particles { - display: none; - } - - .floating-cards { - display: none; + .sports-display { + position: static; } } -/* ================================ - RESPONSIVE - ================================ */ -@media (max-width: 1024px) { +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .nav-cta { + display: none; + } + + .mobile-menu-btn { + display: flex; + } + .hero-content { grid-template-columns: 1fr; text-align: center; } + .hero-text { + max-width: 100%; + } + + .hero-badge { + justify-content: center; + } + .hero-desc { margin-inline: auto; } @@ -1561,8 +1788,9 @@ button:focus-visible { justify-content: center; } - .hero-visual { - margin-top: var(--space-lg); + .hero-phone { + order: -1; + margin-bottom: var(--space-lg); } .phone-frame { @@ -1571,160 +1799,147 @@ button:focus-visible { } .features-grid { - grid-template-columns: 1fr 1fr; - } - - .feature-card.featured { - grid-column: span 2; - } - - .sports-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: 1fr; } .casino-games { + grid-template-columns: 1fr; + } + + .bonuses-wrapper { + grid-template-columns: 1fr; + } + + .bonuses-visual { + order: -1; + } + + .bonus-card-stack { + height: 260px; + width: 100%; + max-width: 280px; + margin-inline: auto; + } + + .bonus-card { + width: 180px; + height: 100px; + } + + .bc-1 { top: 0; inset-inline-start: 0; } + .bc-2 { top: 60px; inset-inline-start: 25px; } + .bc-3 { top: 120px; inset-inline-start: 50px; } + + .bc-amount { + font-size: 1.5rem; + } + + .bc-label { + font-size: 0.8125rem; + } + + .download-wrapper { + grid-template-columns: 1fr; + } + + .download-visual { + order: -1; + } + + .download-phones { + height: 350px; + } + + .download-phone { + width: 150px; + height: 300px; + } + + .footer-top { + grid-template-columns: 1fr; + gap: var(--space-xl); + } + + .footer-links { grid-template-columns: repeat(2, 1fr); } - .bonus-showcase { - grid-template-columns: 1fr; - } - - .download-content { - grid-template-columns: 1fr; - text-align: center; - } - - .download-text .section-tag, - .download-text h2 { - text-align: center; - } - - .download-buttons { - justify-content: center; - } - - .download-support { - justify-content: center; - } - - .footer-main { - grid-template-columns: 1fr; - } - - .footer-nav { - grid-template-columns: repeat(3, 1fr); - } -} - -@media (max-width: 768px) { - :root { - --space-2xl: 3rem; - --space-3xl: 4rem; - } - - .nav-links { - display: none; - } - - .nav-cta { - display: none; - } - - .mobile-toggle { - display: flex; - } - - .hero { - min-height: auto; - padding: 100px 0 var(--space-2xl); - } - - .hero-visual { - display: none; - } - - .hero-stats { - flex-wrap: wrap; - gap: var(--space-lg); - } - - .stat { - flex: 1 1 100px; - } - - .features-grid { - grid-template-columns: 1fr; - } - - .feature-card.featured { - grid-column: auto; - display: block; - text-align: center; - } - - .feature-card.featured .feature-icon { - margin: 0 auto var(--space-sm); - } - - .sports-grid { - grid-template-columns: 1fr 1fr; - } - - .casino-games { - grid-template-columns: 1fr 1fr; - } - - .bonus-percent { - font-size: 3.5rem; - } - - .footer-nav { - grid-template-columns: 1fr 1fr; - gap: var(--space-md); - } - .footer-bottom { flex-direction: column; - gap: var(--space-sm); text-align: center; } + + .support-card { + flex-direction: column; + text-align: center; + } + + .support-channels { + flex-wrap: wrap; + justify-content: center; + } } @media (max-width: 480px) { - .btn { - width: 100%; - justify-content: center; + :root { + --space-2xl: 2.5rem; + --space-3xl: 4rem; } - .hero-ctas { + .hero-7xl { + font-size: 3.5rem; + } + + .hero-stats { flex-direction: column; - width: 100%; + gap: var(--space-md); + align-items: center; } - .sports-grid { - grid-template-columns: 1fr; - max-width: 300px; - margin-inline: auto; - } - - .casino-games { - grid-template-columns: 1fr; - max-width: 320px; - margin-inline: auto; - } - - .download-buttons { + .match-content { flex-direction: column; - align-items: stretch; + gap: var(--space-sm); } - .download-btn { - justify-content: center; + .team { + flex-direction: row; + width: 100%; + justify-content: space-between; } - .footer-nav { + .score-box { + margin: var(--space-sm) 0; + } + + .footer-links { grid-template-columns: 1fr; text-align: center; } + + .download-features { + flex-direction: column; + align-items: center; + } +} + +/* Reduced Motion — disable all animations at CSS level */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + html { + scroll-behavior: auto; + } + + .dp-roulette-wheel, + .roulette-wheel, + .badge-dot, + .live-dot, + .live-pulse, + .dp-live-dot { + animation: none !important; + } }