@@ -404,15 +404,15 @@
diff --git a/style.css b/style.css
index 6a123bb..5afe34d 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,23 @@
:root {
- /* Base colors */
- --navy-deep: #0a1628;
- --purple-deep: #1a0a2e;
- --purple-mid: #2d1b4e;
+ /* Base colors - Gaming inspired dark theme */
+ --bg-deep: #0a0e17;
+ --bg-dark: #0d1117;
+ --bg-card: #161b22;
+ --bg-elevated: #1c2128;
/* Accent colors */
- --gold: #d4af37;
- --gold-light: #e8c547;
- --orange: #ff6b35;
- --orange-light: #ff8c5a;
+ --purple: #6366f1;
+ --purple-light: #818cf8;
+ --purple-dark: #4f46e5;
+ --cyan: #22d3ee;
+ --cyan-light: #67e8f9;
+ --cyan-dark: #06b6d4;
+
+ /* Legacy gold for compatibility */
+ --gold: #6366f1;
+ --gold-light: #818cf8;
+ --orange: #22d3ee;
+ --orange-light: #67e8f9;
/* Neutral */
--white: #ffffff;
@@ -21,14 +30,17 @@
--white-05: rgba(255, 255, 255, 0.05);
/* Gradients */
- --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%);
+ --gradient-main: linear-gradient(135deg, var(--bg-deep) 0%, #0f1624 50%, var(--bg-deep) 100%);
+ --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+ --gradient-accent: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
+ --gradient-accent-reverse: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
+ --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(34, 211, 238, 0.4) 100%);
/* Glass effect */
- --glass-bg: rgba(255, 255, 255, 0.05);
- --glass-border: rgba(255, 255, 255, 0.1);
+ --glass-bg: rgba(255, 255, 255, 0.03);
+ --glass-bg-hover: rgba(255, 255, 255, 0.08);
+ --glass-border: rgba(255, 255, 255, 0.08);
+ --glass-border-hover: rgba(99, 102, 241, 0.5);
/* Typography — Hebrew max weight is 600 */
--font-primary: 'Heebo', 'Rubik', sans-serif;
@@ -49,10 +61,11 @@
--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);
+ --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
+ --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, 0.3);
- /* Focus ring — made more prominent */
- --focus-ring: 0 0 0 4px rgba(212, 175, 55, 0.6);
+ /* Focus ring */
+ --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.5);
}
*, *::before, *::after {
@@ -67,22 +80,38 @@ html {
body {
font-family: var(--font-primary);
- background: var(--gradient-main);
+ background: var(--bg-deep);
color: var(--white);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
}
-/* Focus styles for accessibility — more prominent */
+/* Decorative background elements */
+body::before {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+ radial-gradient(ellipse 60% 40% at 80% 60%, rgba(34, 211, 238, 0.06) 0%, transparent 50%),
+ radial-gradient(ellipse 100% 80% at 50% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
+ pointer-events: none;
+ z-index: 0;
+}
+
+/* Focus styles for accessibility */
:focus-visible {
- outline: 2px solid var(--gold);
+ outline: 2px solid var(--purple);
outline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
- outline: 2px solid var(--gold);
+ outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
@@ -96,8 +125,8 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
-h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
-h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
+h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
+h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; font-weight: 500; }
@@ -125,6 +154,8 @@ ul {
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--space-md);
+ position: relative;
+ z-index: 1;
}
/* ========================================
@@ -136,7 +167,7 @@ ul {
inset-inline: 0;
z-index: 1000;
padding: var(--space-sm) 0;
- background: rgba(10, 22, 40, 0.8);
+ background: rgba(10, 14, 23, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
}
@@ -160,7 +191,10 @@ ul {
}
.logo-7 {
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
font-size: 2rem;
}
@@ -187,7 +221,7 @@ ul {
bottom: -2px;
inset-inline: 0;
height: 2px;
- background: var(--gradient-gold);
+ background: var(--gradient-accent);
transform: scaleX(0);
transition: var(--transition);
}
@@ -203,19 +237,34 @@ ul {
}
.nav-cta {
- background: var(--gradient-orange);
+ background: var(--gradient-accent);
color: var(--white);
padding: 0.625rem 1.5rem;
border-radius: var(--radius-sm);
font-weight: 500;
font-size: 0.9375rem;
- box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+ position: relative;
+ overflow: hidden;
+}
+
+.nav-cta::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--gradient-accent-reverse);
+ opacity: 0;
+ transition: var(--transition);
}
.nav-cta:hover,
.nav-cta:focus-visible {
transform: translateY(-2px);
- box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
+ box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
+}
+
+.nav-cta:hover::before {
+ opacity: 1;
}
.mobile-menu-btn {
@@ -264,6 +313,8 @@ ul {
border: none;
cursor: pointer;
transition: var(--transition);
+ position: relative;
+ overflow: hidden;
}
.btn-icon {
@@ -278,15 +329,28 @@ ul {
}
.btn-primary {
- background: var(--gradient-orange);
+ background: var(--gradient-accent);
color: var(--white);
- box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
+ box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--gradient-accent-reverse);
+ opacity: 0;
+ transition: var(--transition);
}
.btn-primary:hover,
.btn-primary:focus-visible {
transform: translateY(-3px);
- box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5);
+ box-shadow: 0 8px 35px rgba(99, 102, 241, 0.6);
+}
+
+.btn-primary:hover::before {
+ opacity: 1;
}
.btn-glow {
@@ -294,22 +358,22 @@ ul {
overflow: visible;
}
-.btn-glow::before {
+.btn-glow::after {
content: '';
position: absolute;
inset: -3px;
- background: var(--gradient-orange);
+ background: var(--gradient-accent);
border-radius: inherit;
- filter: blur(15px);
+ filter: blur(20px);
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-glow:hover::after,
+.btn-glow:focus-visible::after {
+ opacity: 0.8;
+ filter: blur(25px);
}
.btn-secondary {
@@ -321,13 +385,14 @@ ul {
.btn-secondary:hover,
.btn-secondary:focus-visible {
- background: var(--white-10);
- border-color: var(--gold);
+ background: var(--glass-bg-hover);
+ border-color: var(--purple);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
-/* RTL-aware arrow animation — single arrow, transform handles direction */
+/* RTL-aware arrow animation */
.btn-icon-arrow {
- transform: scaleX(-1); /* flip for RTL by default */
+ transform: scaleX(-1);
}
[dir="ltr"] .btn-icon-arrow {
@@ -370,32 +435,59 @@ ul {
.glow {
position: absolute;
border-radius: 50%;
- filter: blur(100px);
- opacity: 0.5;
+ filter: blur(120px);
+ opacity: 0.6;
}
.glow-1 {
- width: 600px;
- height: 600px;
- background: var(--purple-mid);
- top: -200px;
- inset-inline-end: -100px;
+ width: 700px;
+ height: 700px;
+ background: rgba(99, 102, 241, 0.15);
+ top: -300px;
+ inset-inline-end: -200px;
}
.glow-2 {
- width: 400px;
- height: 400px;
- background: rgba(212, 175, 55, 0.2);
- bottom: -100px;
- inset-inline-start: -100px;
+ width: 500px;
+ height: 500px;
+ background: rgba(34, 211, 238, 0.12);
+ bottom: -150px;
+ inset-inline-start: -150px;
}
.glow-3 {
+ width: 400px;
+ height: 400px;
+ background: rgba(99, 102, 241, 0.1);
+ top: 40%;
+ inset-inline-start: 20%;
+}
+
+/* Decorative geometric shapes */
+.hero::before {
+ content: '';
+ position: absolute;
+ top: 20%;
+ inset-inline-end: 10%;
width: 300px;
height: 300px;
- background: rgba(255, 107, 53, 0.15);
- top: 50%;
- inset-inline-start: 30%;
+ border: 1px solid var(--glass-border);
+ border-radius: 50%;
+ opacity: 0.3;
+ pointer-events: none;
+}
+
+.hero::after {
+ content: '';
+ position: absolute;
+ bottom: 15%;
+ inset-inline-start: 5%;
+ width: 200px;
+ height: 200px;
+ border: 1px solid rgba(34, 211, 238, 0.2);
+ transform: rotate(45deg);
+ opacity: 0.3;
+ pointer-events: none;
}
.hero-content {
@@ -408,10 +500,11 @@ ul {
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--space-md);
+ z-index: 1;
}
.hero-text {
- max-width: 560px;
+ max-width: 600px;
}
.hero-badge {
@@ -431,9 +524,10 @@ ul {
.badge-dot {
width: 8px;
height: 8px;
- background: #22c55e;
+ background: var(--cyan);
border-radius: 50%;
animation: pulse 2s infinite;
+ box-shadow: 0 0 10px var(--cyan);
}
@keyframes pulse {
@@ -443,33 +537,37 @@ ul {
.hero-7xl {
display: block;
- font-size: clamp(4rem, 12vw, 7rem);
+ font-size: clamp(4.5rem, 14vw, 8rem);
font-weight: 600;
- background: var(--gradient-gold);
+ background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
letter-spacing: -0.02em;
+ text-shadow: 0 0 80px rgba(99, 102, 241, 0.5);
}
.hero-tagline {
display: block;
font-weight: 500;
color: var(--white);
- margin-top: var(--space-xs);
+ margin-top: var(--space-sm);
+ font-size: clamp(1.5rem, 3vw, 2rem);
}
.hero-desc {
font-size: 1.125rem;
margin-top: var(--space-md);
- max-width: 44ch;
+ max-width: 48ch;
+ color: var(--white-60);
+ line-height: 1.8;
}
.hero-ctas {
display: flex;
gap: var(--space-sm);
- margin-top: var(--space-lg);
+ margin-top: var(--space-xl);
flex-wrap: wrap;
}
@@ -488,14 +586,17 @@ ul {
.stat-number {
font-family: var(--font-display);
- font-size: 1.75rem;
+ font-size: 2rem;
font-weight: 600;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.stat-label {
font-size: 0.875rem;
- color: var(--white-70); /* bumped from 60 to 70 for AA contrast */
+ color: var(--white-60);
}
/* Phone Mockup */
@@ -511,14 +612,15 @@ ul {
.phone-frame {
position: relative;
- width: 280px;
- height: 560px;
- background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
- border-radius: 40px;
+ width: 300px;
+ height: 600px;
+ background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
+ border-radius: 44px;
padding: 12px;
box-shadow:
- 0 50px 100px rgba(0, 0, 0, 0.5),
- inset 0 0 0 2px rgba(255, 255, 255, 0.1);
+ 0 60px 120px rgba(0, 0, 0, 0.6),
+ 0 0 60px rgba(99, 102, 241, 0.15),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.phone-notch {
@@ -540,8 +642,8 @@ ul {
.phone-screen {
width: 100%;
height: 100%;
- background: var(--gradient-main);
- border-radius: 32px;
+ background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
+ border-radius: 36px;
overflow: hidden;
padding: var(--space-md);
display: flex;
@@ -560,7 +662,10 @@ ul {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.screen-balance {
@@ -570,13 +675,14 @@ ul {
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--glass-border);
+ color: var(--cyan);
}
.screen-live-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
- background: rgba(239, 68, 68, 0.2);
+ background: rgba(239, 68, 68, 0.15);
color: #ef4444;
padding: 0.375rem 0.75rem;
border-radius: var(--radius-sm);
@@ -612,7 +718,10 @@ ul {
.match-score {
font-size: 1.125rem;
font-weight: 600;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.match-odds {
@@ -631,7 +740,7 @@ ul {
}
.odd.active {
- background: var(--gradient-orange);
+ background: var(--gradient-accent);
}
.screen-games {
@@ -642,14 +751,20 @@ ul {
}
.game-icon {
- width: 48px;
- height: 48px;
+ width: 52px;
+ height: 52px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
+ transition: var(--transition);
+}
+
+.game-icon:hover {
+ border-color: var(--purple);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
.game-icon svg {
@@ -659,8 +774,8 @@ ul {
.phone-glow {
position: absolute;
- inset: -50px;
- background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
+ inset: -80px;
+ background: radial-gradient(circle at center, rgba(99, 102, 241, 0.2) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
@@ -670,6 +785,7 @@ ul {
======================================== */
section {
padding: var(--space-3xl) 0;
+ position: relative;
}
.section-header {
@@ -688,7 +804,10 @@ section {
.section-tag {
display: inline-block;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
@@ -696,11 +815,50 @@ section {
margin-bottom: var(--space-xs);
}
+/* Decorative line under section headers */
+.section-header h2 {
+ position: relative;
+ display: inline-block;
+}
+
+.section-header h2::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ inset-inline-start: 0;
+ width: 60px;
+ height: 3px;
+ background: var(--gradient-accent);
+ border-radius: 2px;
+}
+
+.section-header.centered h2::after {
+ inset-inline-start: 50%;
+ transform: translateX(50%);
+}
+
+[dir="ltr"] .section-header.centered h2::after {
+ transform: translateX(-50%);
+}
+
/* ========================================
FEATURES SECTION
======================================== */
.features {
- background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 46, 0.3) 100%);
+ background: transparent;
+ position: relative;
+}
+
+.features::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 800px;
+ height: 800px;
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
+ pointer-events: none;
}
.features-grid {
@@ -717,41 +875,59 @@ section {
.feature-card {
position: relative;
- background: var(--gradient-card);
+ background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
- backdrop-filter: blur(10px);
+ backdrop-filter: blur(20px);
+ transition: var(--transition);
+ overflow: hidden;
+}
+
+.feature-card::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--gradient-accent);
+ opacity: 0;
transition: var(--transition);
}
.feature-card:hover,
.feature-card:focus-within {
transform: translateY(-8px);
- border-color: var(--gold);
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+ border-color: var(--purple);
+ box-shadow:
+ 0 20px 40px rgba(0, 0, 0, 0.3),
+ 0 0 30px rgba(99, 102, 241, 0.15);
+}
+
+.feature-card:hover::before {
+ opacity: 0.03;
}
.feature-card.featured {
- 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);
+ background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.02) 100%);
+ border-color: rgba(99, 102, 241, 0.3);
}
.feature-badge {
position: absolute;
top: -10px;
inset-inline-end: var(--space-md);
- background: var(--gradient-gold);
- color: var(--navy-deep);
+ background: var(--gradient-accent);
+ color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.feature-icon {
- width: 56px;
- height: 56px;
+ position: relative;
+ width: 60px;
+ height: 60px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
@@ -759,7 +935,13 @@ section {
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
- color: var(--gold);
+ color: var(--cyan);
+ transition: var(--transition);
+}
+
+.feature-card:hover .feature-icon {
+ border-color: var(--cyan);
+ box-shadow: 0 0 25px rgba(34, 211, 238, 0.3);
}
.feature-icon svg {
@@ -768,11 +950,13 @@ section {
}
.feature-card h3 {
+ position: relative;
margin-bottom: var(--space-xs);
font-weight: 500;
}
.feature-card p {
+ position: relative;
font-size: 0.9375rem;
}
@@ -783,6 +967,17 @@ section {
position: relative;
}
+.sports::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(ellipse at 0% 50%, rgba(34, 211, 238, 0.06) 0%, transparent 50%);
+ pointer-events: none;
+}
+
.sports-showcase {
display: grid;
grid-template-columns: 1fr 1.2fr;
@@ -815,23 +1010,23 @@ section {
.sport-item:hover,
.sport-item:focus-visible,
.sport-item.active {
- background: var(--white-10);
- border-color: var(--gold);
+ background: var(--glass-bg-hover);
+ border-color: var(--purple);
}
.sport-item.active {
- box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
+ box-shadow: 0 0 35px rgba(99, 102, 241, 0.2);
}
.sport-icon {
- width: 48px;
- height: 48px;
- background: var(--gradient-gold);
+ width: 52px;
+ height: 52px;
+ background: var(--gradient-accent);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
- color: var(--navy-deep);
+ color: var(--white);
flex-shrink: 0;
}
@@ -854,11 +1049,11 @@ section {
.sport-subtitle {
font-size: 0.875rem;
- color: var(--white-70); /* bumped from 60 to 70 for AA contrast */
+ color: var(--white-60);
}
.sport-arrow {
- color: var(--white-70);
+ color: var(--white-50);
transition: var(--transition);
}
@@ -870,7 +1065,7 @@ section {
.sport-item:hover .sport-arrow,
.sport-item:focus-visible .sport-arrow,
.sport-item.active .sport-arrow {
- color: var(--gold);
+ color: var(--cyan);
transform: translateX(-4px);
}
@@ -887,12 +1082,14 @@ section {
}
.live-match-card {
- background: var(--gradient-card);
+ background: var(--glass-bg);
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);
+ box-shadow:
+ 0 30px 60px rgba(0, 0, 0, 0.4),
+ 0 0 40px rgba(99, 102, 241, 0.1);
}
.match-header {
@@ -923,7 +1120,7 @@ section {
}
.match-time {
- color: var(--white-70);
+ color: var(--white-60);
font-size: 1.25rem;
font-weight: 500;
}
@@ -967,15 +1164,18 @@ section {
}
.score {
- font-size: 3rem;
+ font-size: 3.5rem;
font-weight: 600;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
font-family: var(--font-display);
}
.score-divider {
font-size: 2rem;
- color: var(--white-70);
+ color: var(--white-50);
}
.match-odds-row {
@@ -1001,18 +1201,19 @@ section {
.odd-btn:hover,
.odd-btn:focus-visible {
- border-color: var(--gold);
- background: var(--white-10);
+ border-color: var(--purple);
+ background: var(--glass-bg-hover);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
.odd-btn.highlighted {
- background: var(--gradient-orange);
- border-color: var(--orange);
+ background: var(--gradient-accent);
+ border-color: var(--purple);
}
.odd-label {
font-size: 0.75rem;
- color: var(--white-70);
+ color: var(--white-60);
font-weight: 500;
}
@@ -1030,7 +1231,19 @@ section {
CASINO SECTION
======================================== */
.casino {
- background: linear-gradient(180deg, rgba(26, 10, 46, 0.3) 0%, transparent 50%, rgba(26, 10, 46, 0.3) 100%);
+ position: relative;
+}
+
+.casino::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ inset-inline-end: 0;
+ transform: translateY(-50%);
+ width: 600px;
+ height: 600px;
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
+ pointer-events: none;
}
.casino-games {
@@ -1046,7 +1259,7 @@ section {
}
.game-card {
- background: var(--gradient-card);
+ background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
@@ -1056,8 +1269,10 @@ section {
.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 30px 60px rgba(0, 0, 0, 0.4),
+ 0 0 40px rgba(99, 102, 241, 0.15);
+ border-color: var(--purple);
}
.game-visual {
@@ -1065,7 +1280,7 @@ section {
display: flex;
align-items: center;
justify-content: center;
- background: linear-gradient(180deg, var(--purple-mid) 0%, var(--purple-deep) 100%);
+ background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
position: relative;
overflow: hidden;
}
@@ -1074,7 +1289,7 @@ section {
content: '';
position: absolute;
inset: 0;
- background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
+ background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
}
.game-visual svg {
@@ -1086,7 +1301,6 @@ section {
transform: scale(1.1);
}
-/* Roulette wheel animation — controlled by class, respects reduced motion */
.roulette-wheel {
transform-origin: center;
}
@@ -1119,16 +1333,20 @@ section {
display: inline-flex;
align-items: center;
gap: 0.5rem;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
font-weight: 500;
font-size: 0.9375rem;
}
-/* Single arrow, direction handled by transform */
.game-link::after {
content: '←';
transition: var(--transition);
display: inline-block;
+ -webkit-background-clip: text;
+ background-clip: text;
}
[dir="ltr"] .game-link::after {
@@ -1157,7 +1375,7 @@ section {
content: '';
position: absolute;
inset: 0;
- background: radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 60%);
+ background: radial-gradient(ellipse at 30% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 60%);
pointer-events: none;
}
@@ -1177,7 +1395,10 @@ section {
}
.bonuses-content h2 .highlight {
- color: var(--orange);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.bonuses-content > p {
@@ -1202,13 +1423,13 @@ section {
}
.bonus-features svg {
- width: 20px;
- height: 20px;
- color: #22c55e;
+ width: 22px;
+ height: 22px;
+ color: var(--cyan);
flex-shrink: 0;
}
-/* Bonus Cards Visual — improved positioning */
+/* Bonus Cards Visual */
.bonuses-visual {
display: flex;
justify-content: center;
@@ -1217,15 +1438,15 @@ section {
.bonus-card-stack {
position: relative;
- width: 280px;
- height: 340px;
+ width: 300px;
+ height: 360px;
}
.bonus-card {
position: absolute;
- width: 220px;
- height: 130px;
- background: var(--gradient-card);
+ width: 240px;
+ height: 140px;
+ background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
backdrop-filter: blur(20px);
@@ -1239,53 +1460,69 @@ section {
.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);
+ background: linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.02) 100%);
+ border-color: rgba(99, 102, 241, 0.4);
z-index: 3;
}
.bc-2 {
- top: 80px;
+ top: 90px;
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);
+ background: linear-gradient(145deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.02) 100%);
+ border-color: rgba(34, 211, 238, 0.4);
z-index: 2;
}
.bc-3 {
- top: 160px;
+ top: 180px;
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);
+ background: linear-gradient(145deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.02) 100%);
+ border-color: rgba(139, 92, 246, 0.4);
z-index: 1;
}
.bonus-card:hover {
transform: translateY(-10px) rotate(-2deg);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.bc-amount {
font-family: var(--font-display);
- font-size: 2rem;
+ font-size: 2.25rem;
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-1 .bc-amount {
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+.bc-2 .bc-amount { color: var(--cyan); }
.bc-3 .bc-amount { color: #a78bfa; }
.bc-label {
font-size: 0.9375rem;
- color: var(--white-70);
+ color: var(--white-60);
}
/* ========================================
DOWNLOAD SECTION
======================================== */
.download {
- background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 46, 0.5) 100%);
+ position: relative;
+}
+
+.download::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ inset-inline: 0;
+ height: 60%;
+ background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 100%);
+ pointer-events: none;
}
.download-wrapper {
@@ -1301,40 +1538,42 @@ section {
.download-phones {
position: relative;
- height: 500px;
+ height: 520px;
display: flex;
justify-content: center;
}
.download-phone {
position: absolute;
- width: 200px;
- height: 400px;
- background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
- border-radius: 32px;
+ width: 220px;
+ height: 440px;
+ background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
+ border-radius: 36px;
padding: 8px;
- box-shadow: 0 40px 80px rgba(0,0,0,0.4);
+ box-shadow:
+ 0 50px 100px rgba(0,0,0,0.5),
+ 0 0 40px rgba(99, 102, 241, 0.1);
}
.phone-1 {
- inset-inline-end: 40%;
- top: 50px;
- transform: rotate(-5deg);
+ inset-inline-end: 45%;
+ top: 60px;
+ transform: rotate(-8deg);
z-index: 1;
}
.phone-2 {
- inset-inline-start: 40%;
+ inset-inline-start: 45%;
top: 0;
- transform: rotate(5deg);
+ transform: rotate(8deg);
z-index: 2;
}
.dp-screen {
width: 100%;
height: 100%;
- background: var(--gradient-main);
- border-radius: 26px;
+ background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
+ border-radius: 30px;
padding: var(--space-sm);
display: flex;
flex-direction: column;
@@ -1350,7 +1589,10 @@ section {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
- color: var(--gold);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.dp-content {
@@ -1371,8 +1613,8 @@ section {
}
.dp-menu-item.active {
- background: var(--gradient-orange);
- border-color: var(--orange);
+ background: var(--gradient-accent);
+ border-color: var(--purple);
}
.dp-menu-item svg {
@@ -1384,7 +1626,7 @@ section {
display: inline-flex;
align-items: center;
gap: 0.375rem;
- background: rgba(239, 68, 68, 0.2);
+ background: rgba(239, 68, 68, 0.15);
color: #ef4444;
padding: 0.375rem 0.625rem;
border-radius: var(--radius-sm);
@@ -1409,47 +1651,51 @@ section {
justify-content: center;
}
-/* Roulette wheel in download section — animation controlled, respects reduced motion via CSS */
.dp-roulette-wheel {
- width: 100px;
- height: 100px;
+ width: 110px;
+ height: 110px;
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
+ #6366f1 0deg 20deg,
+ #1a1a2e 20deg 40deg,
+ #22d3ee 40deg 60deg,
+ #1a1a2e 60deg 80deg,
+ #6366f1 80deg 100deg,
+ #1a1a2e 100deg 120deg,
+ #22d3ee 120deg 140deg,
+ #1a1a2e 140deg 160deg,
+ #6366f1 160deg 180deg,
+ #1a1a2e 180deg 200deg,
+ #22d3ee 200deg 220deg,
+ #1a1a2e 220deg 240deg,
+ #6366f1 240deg 260deg,
+ #1a1a2e 260deg 280deg,
+ #22d3ee 280deg 300deg,
+ #1a1a2e 300deg 320deg,
+ #6366f1 320deg 340deg,
+ #1a1a2e 340deg 360deg
);
border-radius: 50%;
- border: 4px solid var(--gold);
+ border: 4px solid var(--purple);
+ box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
animation: spin 8s linear infinite;
}
.dp-bet-amount {
text-align: center;
- font-size: 1rem;
+ font-size: 1.125rem;
font-weight: 600;
- color: var(--gold);
- background: var(--glass-bg);
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ background-color: var(--glass-bg);
padding: 0.5rem;
border-radius: var(--radius-sm);
+ border: 1px solid var(--glass-border);
}
.download-content {
- max-width: 480px;
+ max-width: 500px;
}
.download-content h2 {
@@ -1480,9 +1726,10 @@ section {
.download-btn:hover,
.download-btn:focus-visible {
- background: var(--white-10);
- border-color: var(--gold);
+ background: var(--glass-bg-hover);
+ border-color: var(--purple);
transform: translateX(-4px);
+ box-shadow: 0 0 25px rgba(99, 102, 241, 0.2);
}
[dir="ltr"] .download-btn:hover,
@@ -1503,7 +1750,7 @@ section {
.btn-text .small {
font-size: 0.75rem;
- color: var(--white-70);
+ color: var(--white-60);
}
.btn-text .large {
@@ -1523,14 +1770,14 @@ section {
display: flex;
align-items: center;
gap: 0.5rem;
- color: var(--white-70);
+ color: var(--white-60);
font-size: 0.875rem;
}
.df-item svg {
width: 18px;
height: 18px;
- color: var(--gold);
+ color: var(--cyan);
}
/* ========================================
@@ -1541,7 +1788,7 @@ section {
}
.support-card {
- background: var(--gradient-card);
+ background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: var(--space-xl);
@@ -1550,15 +1797,32 @@ section {
align-items: center;
gap: var(--space-lg);
backdrop-filter: blur(20px);
+ position: relative;
+ overflow: hidden;
+}
+
+.support-card::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--gradient-accent);
+ opacity: 0.03;
+ pointer-events: none;
}
.support-content h3 {
+ position: relative;
font-size: 1.5rem;
margin-bottom: 0.5rem;
font-weight: 500;
}
+.support-content p {
+ position: relative;
+}
+
.support-channels {
+ position: relative;
display: flex;
gap: var(--space-sm);
}
@@ -1582,33 +1846,47 @@ section {
.support-btn:hover,
.support-btn:focus-visible {
- background: var(--white-10);
+ background: var(--glass-bg-hover);
}
.support-btn.whatsapp:hover,
.support-btn.whatsapp:focus-visible {
- background: rgba(37, 211, 102, 0.2);
+ background: rgba(37, 211, 102, 0.15);
border-color: #25d366;
+ box-shadow: 0 0 20px rgba(37, 211, 102, 0.2);
}
.support-btn.telegram:hover,
.support-btn.telegram:focus-visible {
- background: rgba(0, 136, 204, 0.2);
+ background: rgba(0, 136, 204, 0.15);
border-color: #0088cc;
+ box-shadow: 0 0 20px rgba(0, 136, 204, 0.2);
}
.support-btn.chat:hover,
.support-btn.chat:focus-visible {
- border-color: var(--gold);
+ border-color: var(--purple);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
/* ========================================
FOOTER
======================================== */
.site-footer {
- background: rgba(10, 22, 40, 0.9);
+ background: rgba(8, 10, 15, 0.95);
border-top: 1px solid var(--glass-border);
padding: var(--space-2xl) 0 var(--space-lg);
+ position: relative;
+}
+
+.site-footer::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ inset-inline: 0;
+ height: 1px;
+ background: var(--gradient-accent);
+ opacity: 0.5;
}
.footer-top {
@@ -1633,6 +1911,13 @@ section {
margin-bottom: var(--space-sm);
}
+.footer-logo .logo-7 {
+ background: var(--gradient-accent);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
.footer-brand p {
font-size: 0.9375rem;
}
@@ -1656,13 +1941,14 @@ section {
}
.footer-col a {
- color: var(--white-70);
+ color: var(--white-60);
font-size: 0.9375rem;
+ transition: var(--transition);
}
.footer-col a:hover,
.footer-col a:focus-visible {
- color: var(--gold);
+ color: var(--cyan);
}
.footer-bottom {
@@ -1675,12 +1961,12 @@ section {
.footer-legal p {
font-size: 0.875rem;
- color: var(--white-70);
+ color: var(--white-60);
}
.footer-legal .disclaimer {
font-size: 0.8125rem;
- color: var(--white-60);
+ color: var(--white-50);
margin-top: 0.25rem;
}
@@ -1694,9 +1980,9 @@ section {
display: flex;
align-items: center;
justify-content: center;
- width: 36px;
- height: 36px;
- background: rgba(239, 68, 68, 0.2);
+ width: 38px;
+ height: 38px;
+ background: rgba(239, 68, 68, 0.15);
border: 2px solid #ef4444;
border-radius: 50%;
color: #ef4444;
@@ -1713,13 +1999,13 @@ section {
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
- color: var(--white-70);
+ color: var(--white-60);
}
.badge-secure svg {
width: 16px;
height: 16px;
- color: #22c55e;
+ color: var(--cyan);
}
/* ========================================
@@ -1794,8 +2080,8 @@ section {
}
.phone-frame {
- width: 220px;
- height: 440px;
+ width: 240px;
+ height: 480px;
}
.features-grid {
@@ -1815,23 +2101,23 @@ section {
}
.bonus-card-stack {
- height: 260px;
+ height: 280px;
width: 100%;
- max-width: 280px;
+ max-width: 300px;
margin-inline: auto;
}
.bonus-card {
- width: 180px;
- height: 100px;
+ width: 200px;
+ height: 110px;
}
.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-2 { top: 70px; inset-inline-start: 25px; }
+ .bc-3 { top: 140px; inset-inline-start: 50px; }
.bc-amount {
- font-size: 1.5rem;
+ font-size: 1.75rem;
}
.bc-label {
@@ -1847,12 +2133,12 @@ section {
}
.download-phones {
- height: 350px;
+ height: 380px;
}
.download-phone {
- width: 150px;
- height: 300px;
+ width: 160px;
+ height: 320px;
}
.footer-top {
@@ -1878,6 +2164,10 @@ section {
flex-wrap: wrap;
justify-content: center;
}
+
+ .section-header.centered h2::after {
+ display: none;
+ }
}
@media (max-width: 480px) {
@@ -1887,7 +2177,7 @@ section {
}
.hero-7xl {
- font-size: 3.5rem;
+ font-size: 4rem;
}
.hero-stats {
@@ -1922,7 +2212,7 @@ section {
}
}
-/* Reduced Motion — disable all animations at CSS level */
+/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;