diff --git a/index.html b/index.html new file mode 100644 index 0000000..720921a --- /dev/null +++ b/index.html @@ -0,0 +1,597 @@ + + + + + + 7XL – חווית הימורים ברמה אחרת + + + + + + + + + + + + + + +
+ + +
+ +
+ +
+
+
+ +
+
+
+ הפלטפורמה המובילה בישראל +

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

+

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

+
+ + הורד עכשיו + + + + קבל בונוס + + +
+
+
+ 50,000+ + שחקנים פעילים +
+
+ 24/7 + תמיכה בעברית +
+
+ 100+ + משחקים +
+
+
+
+
+
+
+
+
+ +
₪12,450
+
+
+
ספורט
+
קזינו
+
לייב
+
+
+
+
פרמייר ליג
+
+ ליברפול + VS + מנצ'סטר סיטי +
+
+
1.85
+
3.40
+
4.20
+
+
+
+
● LIVE
+
לה ליגה
+
+ ריאל מדריד + 2 - 1 + ברצלונה +
+
+
+
+
+ +
+ +
+
+ +
+ + +
+
+
+ למה 7XL? +

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

+
+
+
+
+ +
+

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

+

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

+
+
+
+ +
+
+

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

+

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

+
+
+
+
+ +
+

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

+

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

+
+
+
+ +
+

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

+

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

+
+
+
+
+ + +
+
+
+ ספורט חי +

הימורי ספורט

+

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

+
+
+
+
+ +
+

כדורגל

+

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

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

כדורסל

+

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

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

טניס

+

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

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

ענפים נוספים

+

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

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

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

+
+
+
+ 67' + ליברפול 2-1 מנצ'סטר יונייטד + 1.35 +
+
+ Q3 + לייקרס 78-82 סלטיקס + 2.10 +
+
+ SET2 + ג'וקוביץ' נגד נדאל + 1.65 +
+
+
+
+
+ + +
+ +
+
+ קזינו אונליין +

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

+

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

+
+
+
+
+ +
+
+

רולטה

+

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

+
+
+
+
+
+ + + +
+
+
+

בלאקג'ק

+

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

+
+
+
+
+ +
+
+

סלוטים

+

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

+
+
+
+
+ +
+
+

פוקר

+

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

+
+
+
+
+
+ + +
+
+
+ הטבות מיוחדות +

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

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

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

+
    +
  • + + ללא דרישת הימור מינימלית +
    • +
  • + + משיכה מיידית +
    • +
  • + + תקף לכל המשחקים +
    • +
+ הצטרף וקבל בונוס +
+
+
+ +
+

בונוס יומי

+

היכנס כל יום וקבל בונוס הפתעה

+
+
+
+ +
+

תוכנית VIP

+

החזרים של עד 20% לשחקני פרימיום

+
+
+
+ +
+

בונוס הפקדה

+

10% על כל הפקדה — ללא הגבלה

+
+
+
+
+
+
+ + +
+ +
+
+
+ הורד עכשיו +

התחל לשחק תוך דקות

+

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

+
+ + +
+ הורד ל + App Store +
+ + + +
+ הורד ל + Android +
+ + + +
+ הורד ל + Windows +
+ +
+
+ + תמיכה טכנית 24/7 בעברית +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + 7XL + +
+

סרוק להורדה מהירה

+
+
+
+
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..fa9811a --- /dev/null +++ b/script.js @@ -0,0 +1,266 @@ +/** + * 7XL – Interactive Features + * Clean, accessible, respects user preferences + */ + +(function() { + 'use strict'; + + 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 + */ + function initScrollReveal() { + if (prefersReducedMotion) return; + + const revealElements = document.querySelectorAll( + '.feature-card, .sport-card, .casino-game, .bonus-card, .bonus-main, .section-header' + ); + + if (!revealElements.length) return; + + revealElements.forEach(el => el.classList.add('reveal')); + + 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' + } + ); + + revealElements.forEach(el => observer.observe(el)); + } + + /** + * 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 target = document.querySelector(targetId); + 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; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + + // Set focus for accessibility + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + } + + /** + * Pause animations when not in view (performance) + */ + function initAnimationPausing() { + 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'); + } + }); + }); + }, + { threshold: 0.2 } + ); + + const heroVisual = document.querySelector('.hero-visual'); + if (heroVisual) observer.observe(heroVisual); + } + + /** + * Live pulse animation + */ + function initLivePulse() { + 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); + } + + /** + * Initialize all features + */ + function init() { + initHeader(); + initMobileMenu(); + initScrollReveal(); + initSmoothScroll(); + initAnimationPausing(); + initFloatingCards(); + initLivePulse(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9b15412 --- /dev/null +++ b/style.css @@ -0,0 +1,1730 @@ +/* ================================ + 7XL – Premium Gaming Aesthetic + ================================ */ + +:root { + /* Core Palette */ + --navy-deep: #0a1628; + --purple-deep: #1a0a2e; + --gold: #d4af37; + --orange: #ff6b35; + --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); + + /* 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%); + + /* 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); + + /* Typography */ + --font-hebrew: 'Heebo', system-ui, sans-serif; + --font-display: 'Inter', var(--font-hebrew); + + /* Spacing Scale */ + --space-2xs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2rem; + --space-xl: 3rem; + --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); +} + +/* Reset & Base */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: clamp(15px, 1vw + 12px, 18px); +} + +body { + font-family: var(--font-hebrew); + background: var(--gradient-bg); + color: var(--white); + line-height: 1.6; + overflow-x: hidden; + min-height: 100vh; +} + +/* 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 { + outline: 2px solid var(--gold); + outline-offset: 3px; +} + +/* ================================ + HEADER + ================================ */ +.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); +} + +.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); +} + +.logo { + display: flex; + align-items: center; +} + +.logo-text { + 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; +} + +.nav-links { + display: flex; + list-style: none; + gap: var(--space-lg); +} + +.nav-links a { + font-size: 0.9rem; + font-weight: 400; + color: var(--white-soft); + position: relative; + padding-block: var(--space-xs); +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline: 0; + height: 2px; + background: var(--gradient-accent); + transform: scaleX(0); + transform-origin: center; + transition: transform var(--transition-fast); +} + +.nav-links a:hover::after, +.nav-links a:focus-visible::after { + transform: scaleX(1); +} + +.nav-cta { + background: var(--gradient-accent); + color: var(--navy-deep); + padding: var(--space-xs) var(--space-md); + border-radius: 50px; + font-weight: 500; + font-size: 0.875rem; + transition: all var(--transition-fast); +} + +.nav-cta:hover, +.nav-cta:focus-visible { + transform: scale(1.03); + box-shadow: 0 0 16px rgba(212, 175, 55, 0.4); +} + +.mobile-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: var(--space-xs); +} + +.mobile-toggle span { + width: 24px; + height: 2px; + background: var(--white); + transition: all var(--transition-fast); + transform-origin: center; +} + +.mobile-toggle[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translateY(7px); +} + +.mobile-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.mobile-toggle[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translateY(-7px); +} + +.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; + font-weight: 500; +} + +/* ================================ + HERO SECTION + ================================ */ +.hero { + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + position: relative; + padding-top: 80px; + padding-bottom: var(--space-2xl); + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: -1; +} + +.hero-gradient { + 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%); +} + +.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; +} + +.hero-content { + max-width: 1200px; + margin: 0 auto; + padding-inline: var(--space-md); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-2xl); + align-items: center; +} + +.hero-badge { + display: inline-block; + 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); +} + +.hero-text h1 { + margin-bottom: var(--space-md); +} + +.hero-desc { + font-size: 1.1rem; + margin-bottom: var(--space-lg); + max-width: 48ch; +} + +.hero-ctas { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + margin-bottom: var(--space-xl); +} + +.hero-stats { + display: flex; + gap: var(--space-xl); +} + +.stat { + text-align: center; +} + +.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; +} + +/* Phone Mockup */ +.hero-visual { + position: relative; + display: flex; + justify-content: center; +} + +.phone-mockup { + position: relative; +} + +.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; +} + +.phone-notch { + width: 90px; + height: 22px; + background: #0a0a15; + border-radius: 0 0 16px 16px; + position: absolute; + top: 10px; + inset-inline-start: 50%; + transform: translateX(calc(-50% * var(--rtl-flip, 1))); +} + +[dir="rtl"] .phone-notch { + --rtl-flip: -1; +} + +.phone-screen { + width: 100%; + height: 100%; + background: linear-gradient(180deg, var(--navy-deep) 0%, var(--purple-deep) 100%); + border-radius: 28px; + overflow: hidden; + padding: var(--space-sm); + padding-top: 36px; +} + +.app-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-sm); +} + +.app-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-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); +} + +.match-card { + 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; +} + +.match-teams { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.75rem; + font-weight: 500; + margin-bottom: var(--space-xs); +} + +.match-vs, .match-score { + color: var(--gold); + font-size: 0.65rem; + font-weight: 600; +} + +.match-odds { + display: flex; + gap: var(--space-xs); +} + +.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); +} + +.phone-glow { + position: absolute; + inset: -15%; + background: radial-gradient(circle at center, rgba(212, 175, 55, 0.12) 0%, transparent 60%); + z-index: -1; +} + +/* Floating Cards */ +.floating-cards { + position: absolute; + inset: 0; + pointer-events: none; +} + +.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-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; + text-transform: uppercase; + letter-spacing: 0.08em; + 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); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); +} + +.feature-card { + padding: var(--space-lg); + text-align: center; + transition: all var(--transition-medium); + position: relative; + overflow: hidden; +} + +.feature-card::before { + content: ''; + position: absolute; + inset: 0; + background: var(--gradient-glow); + opacity: 0; + transition: opacity var(--transition-medium); +} + +.feature-card:hover, +.feature-card:focus-within { + transform: translateY(-4px); + border-color: rgba(212, 175, 55, 0.25); +} + +.feature-card:hover::before { + opacity: 1; +} + +.feature-card.featured { + grid-column: span 2; + display: grid; + grid-template-columns: auto 1fr; + text-align: start; + gap: var(--space-md); + align-items: center; +} + +.feature-card.featured .feature-icon { + margin: 0; +} + +.feature-icon { + width: 64px; + height: 64px; + margin: 0 auto var(--space-sm); + position: relative; + z-index: 1; +} + +.feature-icon svg { + width: 100%; + height: 100%; +} + +.feature-card h3 { + margin-bottom: var(--space-xs); + position: relative; + z-index: 1; +} + +.feature-card p { + font-size: 0.9rem; + position: relative; + z-index: 1; + max-width: 100%; +} + +/* ================================ + SPORTS SECTION + ================================ */ +.sports { + padding: var(--space-3xl) 0; + background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 46, 0.25) 50%, transparent 100%); +} + +.sports-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + 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); + cursor: pointer; +} + +.sport-card:hover, +.sport-card:focus-within { + border-color: var(--gold); + transform: translateY(-4px); +} + +.sport-icon { + width: 64px; + height: 64px; + margin: 0 auto var(--space-sm); +} + +.sport-icon svg { + width: 100%; + height: 100%; +} + +.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 { + display: flex; + align-items: center; + gap: var(--space-sm); + margin-bottom: var(--space-sm); +} + +.live-pulse { + width: 8px; + height: 8px; + background: var(--orange); + 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; +} + +.match-time { + color: var(--orange); + font-weight: 600; + font-size: 0.8rem; +} + +.match-info { + font-size: 0.85rem; +} + +.match-odds-small { + font-family: var(--font-display); + font-weight: 600; + color: var(--gold); +} + +/* ================================ + 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; +} + +.casino-games { + display: grid; + grid-template-columns: repeat(4, 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); +} + +.casino-game:hover, +.casino-game:focus-within { + transform: translateY(-4px); + border-color: var(--gold); + box-shadow: 0 16px 32px rgba(212, 175, 55, 0.1); +} + +.game-visual { + height: 140px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(180deg, rgba(26, 10, 46, 0.4) 0%, transparent 100%); + position: relative; + overflow: hidden; +} + +/* Roulette */ +.roulette-wheel { + width: 100px; + height: 100px; +} + +/* Blackjack Cards */ +.cards-stack { + display: flex; + position: relative; +} + +.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; +} + +.game-info { + padding: var(--space-sm) var(--space-md); + text-align: center; +} + +.game-info h3 { + margin-bottom: var(--space-2xs); +} + +.game-info p { + font-size: 0.85rem; + max-width: 100%; +} + +/* ================================ + 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 { + content: ''; + position: absolute; + top: 0; + inset-inline: 0; + height: 3px; + background: var(--gradient-accent); +} + +.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; + margin-bottom: var(--space-md); +} + +.bonus-amount { + margin-bottom: var(--space-md); +} + +.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); +} + +.bonus-features { + list-style: none; + margin-bottom: var(--space-lg); +} + +.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; +} + +.bonus-features svg { + width: 18px; + height: 18px; + flex-shrink: 0; +} + +.bonus-extras { + 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); +} + +.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; + color: var(--gold); +} + +.bonus-card p { + font-size: 0.85rem; + max-width: 100%; +} + +/* ================================ + DOWNLOAD SECTION + ================================ */ +.download { + padding: var(--space-3xl) 0; + position: relative; + overflow: hidden; +} + +.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; +} + +.download-content { + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: var(--space-2xl); + align-items: center; +} + +.download-text .section-tag { + display: block; + text-align: start; + margin-bottom: var(--space-xs); +} + +.download-text h2 { + text-align: start; + margin-bottom: var(--space-md); +} + +.download-text > p { + margin-bottom: var(--space-lg); +} + +.download-buttons { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + margin-bottom: var(--space-lg); +} + +.download-btn { + display: flex; + align-items: center; + gap: var(--space-sm); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + padding: var(--space-sm) var(--space-md); + border-radius: 10px; + transition: all var(--transition-medium); +} + +.download-btn:hover, +.download-btn:focus-visible { + border-color: var(--gold); + background: rgba(212, 175, 55, 0.08); +} + +.download-btn svg { + width: 28px; + height: 28px; + flex-shrink: 0; +} + +.download-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; +} + +.download-btn-text .big { + font-size: 0.95rem; + font-weight: 500; + line-height: 1.2; +} + +.download-support { + 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); + border-top: 1px solid var(--glass-border); +} + +.footer-main { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: var(--space-2xl); + margin-bottom: var(--space-xl); +} + +.footer-logo { + display: block; + 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; + margin-bottom: var(--space-sm); +} + +.footer-brand p { + font-size: 0.9rem; + margin-bottom: var(--space-md); + max-width: 280px; +} + +.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 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-lg); +} + +.footer-col h4 { + color: var(--gold); + margin-bottom: var(--space-sm); + font-size: 0.9rem; +} + +.footer-col ul { + list-style: none; +} + +.footer-col li { + margin-bottom: var(--space-xs); +} + +.footer-col a { + color: var(--white-muted); + font-size: 0.85rem; + transition: color var(--transition-fast); +} + +.footer-col a:hover, +.footer-col a:focus-visible { + color: var(--white); +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--space-md); + border-top: 1px solid var(--glass-border); +} + +.footer-bottom p { + font-size: 0.8rem; + color: var(--white-muted); +} + +.age-warning { + display: flex; + align-items: center; + gap: var(--space-xs); + color: var(--orange) !important; +} + +.age-warning svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +/* ================================ + ANIMATIONS & REVEAL + ================================ */ +.reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity var(--transition-slow), transform var(--transition-slow); +} + +.reveal.visible { + 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; + } + + html { + scroll-behavior: auto; + } + + .reveal { + opacity: 1; + transform: none; + } + + .hero-particles { + display: none; + } + + .floating-cards { + display: none; + } +} + +/* ================================ + RESPONSIVE + ================================ */ +@media (max-width: 1024px) { + .hero-content { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-desc { + margin-inline: auto; + } + + .hero-ctas { + justify-content: center; + } + + .hero-stats { + justify-content: center; + } + + .hero-visual { + margin-top: var(--space-lg); + } + + .phone-frame { + width: 220px; + height: 440px; + } + + .features-grid { + grid-template-columns: 1fr 1fr; + } + + .feature-card.featured { + grid-column: span 2; + } + + .sports-grid { + grid-template-columns: repeat(2, 1fr); + } + + .casino-games { + 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; + } +} + +@media (max-width: 480px) { + .btn { + width: 100%; + justify-content: center; + } + + .hero-ctas { + flex-direction: column; + width: 100%; + } + + .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 { + flex-direction: column; + align-items: stretch; + } + + .download-btn { + justify-content: center; + } + + .footer-nav { + grid-template-columns: 1fr; + text-align: center; + } +}