@@ -407,13 +408,13 @@
500
+ 500
diff --git a/style.css b/style.css
index 5afe34d..cdd1979 100644
--- a/style.css
+++ b/style.css
@@ -1,46 +1,52 @@
:root {
- /* Base colors - Gaming inspired dark theme */
+ /* New color palette - gaming modern style */
--bg-deep: #0a0e17;
- --bg-dark: #0d1117;
- --bg-card: #161b22;
- --bg-elevated: #1c2128;
+ --bg-card: #0d1320;
+ --bg-elevated: #131a2b;
+
+ /* Primary accent - purple-blue glow */
+ --primary: #6366f1;
+ --primary-light: #818cf8;
+ --primary-dark: #4f46e5;
+
+ /* Secondary accent - cyan/turquoise */
+ --secondary: #22d3ee;
+ --secondary-light: #67e8f9;
+ --secondary-dark: #06b6d4;
/* Accent colors */
- --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;
+ --gold: #fbbf24;
+ --gold-light: #fcd34d;
+ --orange: #f97316;
+ --red: #ef4444;
+ --green: #22c55e;
/* Neutral */
--white: #ffffff;
+ --white-95: rgba(255, 255, 255, 0.95);
--white-90: rgba(255, 255, 255, 0.9);
+ --white-80: rgba(255, 255, 255, 0.8);
--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-30: rgba(255, 255, 255, 0.3);
--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-main: linear-gradient(135deg, var(--bg-deep) 0%, #0f1624 50%, var(--bg-deep) 100%);
+ --gradient-main: linear-gradient(135deg, var(--bg-deep) 0%, #0f1629 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%);
+ --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ --gradient-primary-reverse: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
+ --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(34, 211, 238, 0.5) 100%);
+ --gradient-text: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 50%, var(--primary-light) 100%);
/* Glass effect */
--glass-bg: rgba(255, 255, 255, 0.03);
- --glass-bg-hover: rgba(255, 255, 255, 0.08);
+ --glass-bg-strong: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.08);
- --glass-border-hover: rgba(99, 102, 241, 0.5);
+ --glass-border-glow: rgba(99, 102, 241, 0.3);
/* Typography — Hebrew max weight is 600 */
--font-primary: 'Heebo', 'Rubik', sans-serif;
@@ -61,11 +67,13 @@
--radius-lg: 20px;
--radius-xl: 32px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
- --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, 0.3);
+ --shadow-glow-strong: 0 0 60px rgba(99, 102, 241, 0.5);
+ --shadow-cyan: 0 0 40px rgba(34, 211, 238, 0.3);
/* Focus ring */
- --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.5);
+ --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.6);
}
*, *::before, *::after {
@@ -82,36 +90,33 @@ body {
font-family: var(--font-primary);
background: var(--bg-deep);
color: var(--white);
- line-height: 1.6;
+ line-height: 1.7;
min-height: 100vh;
overflow-x: hidden;
}
-/* Decorative background elements */
+/* Background pattern */
body::before {
content: '';
position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ inset: 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%);
+ radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+ radial-gradient(ellipse at 80% 80%, rgba(34, 211, 238, 0.06) 0%, transparent 50%),
+ radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Focus styles for accessibility */
:focus-visible {
- outline: 2px solid var(--purple);
+ outline: 2px solid var(--primary);
outline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
- outline: 2px solid var(--purple);
+ outline: 2px solid var(--primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
@@ -125,8 +130,8 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
-h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
-h2 { font-size: clamp(2rem, 4vw, 3rem); }
+h1 { font-size: clamp(2.75rem, 7vw, 5rem); }
+h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; font-weight: 500; }
@@ -150,12 +155,12 @@ ul {
LAYOUT
======================================== */
.container {
+ position: relative;
+ z-index: 1;
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--space-md);
- position: relative;
- z-index: 1;
}
/* ========================================
@@ -191,7 +196,7 @@ ul {
}
.logo-7 {
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -221,7 +226,7 @@ ul {
bottom: -2px;
inset-inline: 0;
height: 2px;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
transform: scaleX(0);
transition: var(--transition);
}
@@ -237,13 +242,13 @@ ul {
}
.nav-cta {
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
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(99, 102, 241, 0.3);
+ box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
position: relative;
overflow: hidden;
}
@@ -252,7 +257,7 @@ ul {
content: '';
position: absolute;
inset: 0;
- background: var(--gradient-accent-reverse);
+ background: var(--gradient-primary-reverse);
opacity: 0;
transition: var(--transition);
}
@@ -260,10 +265,11 @@ ul {
.nav-cta:hover,
.nav-cta:focus-visible {
transform: translateY(-2px);
- box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
+ box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}
-.nav-cta:hover::before {
+.nav-cta:hover::before,
+.nav-cta:focus-visible::before {
opacity: 1;
}
@@ -329,16 +335,16 @@ ul {
}
.btn-primary {
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
color: var(--white);
- box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+ box-shadow: 0 4px 25px rgba(99, 102, 241, 0.4);
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
- background: var(--gradient-accent-reverse);
+ background: var(--gradient-primary-reverse);
opacity: 0;
transition: var(--transition);
}
@@ -346,10 +352,11 @@ ul {
.btn-primary:hover,
.btn-primary:focus-visible {
transform: translateY(-3px);
- box-shadow: 0 8px 35px rgba(99, 102, 241, 0.6);
+ box-shadow: 0 8px 40px rgba(99, 102, 241, 0.6);
}
-.btn-primary:hover::before {
+.btn-primary:hover::before,
+.btn-primary:focus-visible::before {
opacity: 1;
}
@@ -361,23 +368,23 @@ ul {
.btn-glow::after {
content: '';
position: absolute;
- inset: -3px;
- background: var(--gradient-accent);
+ inset: -4px;
+ background: var(--gradient-primary);
border-radius: inherit;
filter: blur(20px);
- opacity: 0.5;
+ opacity: 0.4;
z-index: -1;
transition: var(--transition);
}
.btn-glow:hover::after,
.btn-glow:focus-visible::after {
- opacity: 0.8;
+ opacity: 0.7;
filter: blur(25px);
}
.btn-secondary {
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
color: var(--white);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
@@ -385,12 +392,11 @@ ul {
.btn-secondary:hover,
.btn-secondary:focus-visible {
- background: var(--glass-bg-hover);
- border-color: var(--purple);
- box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
+ background: var(--white-10);
+ border-color: var(--primary);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
-/* RTL-aware arrow animation */
.btn-icon-arrow {
transform: scaleX(-1);
}
@@ -430,6 +436,7 @@ ul {
position: absolute;
inset: 0;
pointer-events: none;
+ overflow: hidden;
}
.glow {
@@ -442,56 +449,68 @@ ul {
.glow-1 {
width: 700px;
height: 700px;
- background: rgba(99, 102, 241, 0.15);
+ background: rgba(99, 102, 241, 0.3);
top: -300px;
inset-inline-end: -200px;
+ animation: float 8s ease-in-out infinite;
}
.glow-2 {
width: 500px;
height: 500px;
- background: rgba(34, 211, 238, 0.12);
+ background: rgba(34, 211, 238, 0.2);
bottom: -150px;
inset-inline-start: -150px;
+ animation: float 10s ease-in-out infinite reverse;
}
.glow-3 {
width: 400px;
height: 400px;
- background: rgba(99, 102, 241, 0.1);
+ background: rgba(139, 92, 246, 0.15);
top: 40%;
- inset-inline-start: 20%;
+ inset-inline-start: 40%;
+ animation: float 12s ease-in-out infinite;
}
-/* Decorative geometric shapes */
-.hero::before {
+@keyframes float {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 50% { transform: translate(30px, -30px) scale(1.1); }
+}
+
+/* Geometric shapes */
+.hero-bg-effects::before {
content: '';
position: absolute;
- top: 20%;
- inset-inline-end: 10%;
width: 300px;
height: 300px;
- border: 1px solid var(--glass-border);
+ border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 50%;
- opacity: 0.3;
- pointer-events: none;
+ top: 20%;
+ inset-inline-end: 10%;
+ animation: rotate 30s linear infinite;
}
-.hero::after {
+.hero-bg-effects::after {
content: '';
position: absolute;
- bottom: 15%;
- inset-inline-start: 5%;
width: 200px;
height: 200px;
- border: 1px solid rgba(34, 211, 238, 0.2);
+ border: 1px solid rgba(34, 211, 238, 0.15);
+ top: 60%;
+ inset-inline-start: 5%;
transform: rotate(45deg);
- opacity: 0.3;
- pointer-events: none;
+ animation: rotate 25s linear infinite reverse;
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
}
.hero-content {
position: relative;
+ z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
@@ -500,7 +519,6 @@ ul {
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--space-md);
- z-index: 1;
}
.hero-text {
@@ -511,12 +529,12 @@ ul {
display: inline-flex;
align-items: center;
gap: 0.5rem;
- background: var(--glass-bg);
- border: 1px solid var(--glass-border);
+ background: var(--glass-bg-strong);
+ border: 1px solid var(--glass-border-glow);
padding: 0.5rem 1rem;
border-radius: 100px;
font-size: 0.875rem;
- color: var(--white-70);
+ color: var(--white-80);
margin-bottom: var(--space-md);
backdrop-filter: blur(10px);
}
@@ -524,10 +542,10 @@ ul {
.badge-dot {
width: 8px;
height: 8px;
- background: var(--cyan);
+ background: var(--green);
border-radius: 50%;
animation: pulse 2s infinite;
- box-shadow: 0 0 10px var(--cyan);
+ box-shadow: 0 0 10px var(--green);
}
@keyframes pulse {
@@ -539,20 +557,26 @@ ul {
display: block;
font-size: clamp(4.5rem, 14vw, 8rem);
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-text);
+ background-size: 200% auto;
-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);
+ animation: shimmer 3s linear infinite;
+}
+
+@keyframes shimmer {
+ from { background-position: 200% center; }
+ to { background-position: -200% center; }
}
.hero-tagline {
display: block;
font-weight: 500;
- color: var(--white);
- margin-top: var(--space-sm);
+ color: var(--white-95);
+ margin-top: var(--space-xs);
font-size: clamp(1.5rem, 3vw, 2rem);
}
@@ -560,14 +584,14 @@ ul {
font-size: 1.125rem;
margin-top: var(--space-md);
max-width: 48ch;
- color: var(--white-60);
+ color: var(--white-70);
line-height: 1.8;
}
.hero-ctas {
display: flex;
gap: var(--space-sm);
- margin-top: var(--space-xl);
+ margin-top: var(--space-lg);
flex-wrap: wrap;
}
@@ -588,7 +612,7 @@ ul {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -596,7 +620,7 @@ ul {
.stat-label {
font-size: 0.875rem;
- color: var(--white-60);
+ color: var(--white-70);
}
/* Phone Mockup */
@@ -614,13 +638,13 @@ ul {
position: relative;
width: 300px;
height: 600px;
- background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
+ background: linear-gradient(145deg, #1a1f35 0%, #0d1020 100%);
border-radius: 44px;
padding: 12px;
box-shadow:
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);
+ 0 0 0 1px rgba(255, 255, 255, 0.1),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.phone-notch {
@@ -642,13 +666,14 @@ ul {
.phone-screen {
width: 100%;
height: 100%;
- background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
+ background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
border-radius: 36px;
overflow: hidden;
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-md);
+ border: 1px solid var(--glass-border);
}
.screen-header {
@@ -662,20 +687,20 @@ ul {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.screen-balance {
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--glass-border);
- color: var(--cyan);
+ color: var(--secondary);
}
.screen-live-badge {
@@ -689,6 +714,7 @@ ul {
font-size: 0.75rem;
font-weight: 600;
align-self: flex-start;
+ border: 1px solid rgba(239, 68, 68, 0.3);
}
.live-dot {
@@ -697,11 +723,12 @@ ul {
background: #ef4444;
border-radius: 50%;
animation: pulse 1.5s infinite;
+ box-shadow: 0 0 8px #ef4444;
}
.screen-match {
- background: var(--glass-bg);
- border: 1px solid var(--glass-border);
+ background: var(--glass-bg-strong);
+ border: 1px solid var(--glass-border-glow);
border-radius: var(--radius-md);
padding: var(--space-sm);
}
@@ -718,7 +745,7 @@ ul {
.match-score {
font-size: 1.125rem;
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -737,10 +764,14 @@ ul {
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
+ border: 1px solid transparent;
+ transition: var(--transition);
}
.odd.active {
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
+ border-color: var(--primary);
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
.screen-games {
@@ -753,7 +784,7 @@ ul {
.game-icon {
width: 52px;
height: 52px;
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
display: flex;
@@ -763,8 +794,8 @@ ul {
}
.game-icon:hover {
- border-color: var(--purple);
- box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
+ border-color: var(--primary);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.game-icon svg {
@@ -774,7 +805,7 @@ ul {
.phone-glow {
position: absolute;
- inset: -80px;
+ inset: -60px;
background: radial-gradient(circle at center, rgba(99, 102, 241, 0.2) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
@@ -784,8 +815,9 @@ ul {
SECTIONS COMMON
======================================== */
section {
- padding: var(--space-3xl) 0;
position: relative;
+ padding: var(--space-3xl) 0;
+ z-index: 1;
}
.section-header {
@@ -797,44 +829,40 @@ section {
}
.section-header.centered p {
- max-width: 500px;
+ max-width: 550px;
margin-inline: auto;
margin-top: var(--space-sm);
}
.section-tag {
display: inline-block;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
- letter-spacing: 0.1em;
+ letter-spacing: 0.15em;
margin-bottom: var(--space-xs);
}
-/* Decorative line under section headers */
+/* Decorative line */
.section-header h2 {
position: relative;
display: inline-block;
}
-.section-header h2::after {
+.section-header.centered 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 {
+ bottom: -12px;
inset-inline-start: 50%;
transform: translateX(50%);
+ width: 60px;
+ height: 3px;
+ background: var(--gradient-primary);
+ border-radius: 2px;
}
[dir="ltr"] .section-header.centered h2::after {
@@ -846,18 +874,13 @@ section {
======================================== */
.features {
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%);
+ inset: 0;
+ background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
pointer-events: none;
}
@@ -888,7 +911,7 @@ section {
content: '';
position: absolute;
inset: 0;
- background: var(--gradient-accent);
+ background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
opacity: 0;
transition: var(--transition);
}
@@ -896,18 +919,17 @@ section {
.feature-card:hover,
.feature-card:focus-within {
transform: translateY(-8px);
- border-color: var(--purple);
- box-shadow:
- 0 20px 40px rgba(0, 0, 0, 0.3),
- 0 0 30px rgba(99, 102, 241, 0.15);
+ border-color: var(--primary);
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);
}
-.feature-card:hover::before {
- opacity: 0.03;
+.feature-card:hover::before,
+.feature-card:focus-within::before {
+ opacity: 1;
}
.feature-card.featured {
- background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.02) 100%);
+ background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%);
border-color: rgba(99, 102, 241, 0.3);
}
@@ -915,7 +937,7 @@ section {
position: absolute;
top: -10px;
inset-inline-end: var(--space-md);
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: 100px;
@@ -925,23 +947,23 @@ section {
}
.feature-icon {
- position: relative;
width: 60px;
height: 60px;
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
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(--cyan);
+ color: var(--secondary);
transition: var(--transition);
}
-.feature-card:hover .feature-icon {
- border-color: var(--cyan);
- box-shadow: 0 0 25px rgba(34, 211, 238, 0.3);
+.feature-card:hover .feature-icon,
+.feature-card:focus-within .feature-icon {
+ border-color: var(--secondary);
+ box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}
.feature-icon svg {
@@ -950,14 +972,15 @@ section {
}
.feature-card h3 {
- position: relative;
margin-bottom: var(--space-xs);
font-weight: 500;
+ color: var(--white-95);
}
.feature-card p {
- position: relative;
font-size: 0.9375rem;
+ position: relative;
+ z-index: 1;
}
/* ========================================
@@ -970,11 +993,12 @@ section {
.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%);
+ inset-inline-end: 0;
+ top: 50%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
+ transform: translateY(-50%);
pointer-events: none;
}
@@ -1010,24 +1034,25 @@ section {
.sport-item:hover,
.sport-item:focus-visible,
.sport-item.active {
- background: var(--glass-bg-hover);
- border-color: var(--purple);
+ background: var(--glass-bg-strong);
+ border-color: var(--primary);
}
.sport-item.active {
- box-shadow: 0 0 35px rgba(99, 102, 241, 0.2);
+ box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}
.sport-icon {
width: 52px;
height: 52px;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
flex-shrink: 0;
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.sport-icon svg {
@@ -1045,6 +1070,7 @@ section {
.sport-title {
font-weight: 500;
font-size: 1rem;
+ color: var(--white-95);
}
.sport-subtitle {
@@ -1065,7 +1091,7 @@ section {
.sport-item:hover .sport-arrow,
.sport-item:focus-visible .sport-arrow,
.sport-item.active .sport-arrow {
- color: var(--cyan);
+ color: var(--secondary);
transform: translateX(-4px);
}
@@ -1083,13 +1109,11 @@ section {
.live-match-card {
background: var(--glass-bg);
- border: 1px solid var(--glass-border);
+ border: 1px solid var(--glass-border-glow);
border-radius: var(--radius-xl);
padding: var(--space-lg);
- backdrop-filter: blur(20px);
- box-shadow:
- 0 30px 60px rgba(0, 0, 0, 0.4),
- 0 0 40px rgba(99, 102, 241, 0.1);
+ backdrop-filter: blur(30px);
+ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.1);
}
.match-header {
@@ -1109,6 +1133,7 @@ section {
border-radius: 100px;
font-size: 0.875rem;
font-weight: 600;
+ border: 1px solid rgba(239, 68, 68, 0.3);
}
.live-pulse {
@@ -1117,10 +1142,11 @@ section {
background: #ef4444;
border-radius: 50%;
animation: pulse 1.5s infinite;
+ box-shadow: 0 0 10px #ef4444;
}
.match-time {
- color: var(--white-60);
+ color: var(--white-70);
font-size: 1.25rem;
font-weight: 500;
}
@@ -1142,8 +1168,8 @@ section {
}
.team-badge {
- width: 64px;
- height: 64px;
+ width: 68px;
+ height: 68px;
}
.team-badge svg {
@@ -1155,6 +1181,7 @@ section {
font-size: 0.9375rem;
font-weight: 500;
text-align: center;
+ color: var(--white-90);
}
.score-box {
@@ -1166,7 +1193,7 @@ section {
.score {
font-size: 3.5rem;
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1189,7 +1216,7 @@ section {
flex-direction: column;
align-items: center;
gap: 0.25rem;
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-sm);
@@ -1201,14 +1228,15 @@ section {
.odd-btn:hover,
.odd-btn:focus-visible {
- border-color: var(--purple);
- background: var(--glass-bg-hover);
- box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
+ border-color: var(--primary);
+ background: var(--white-10);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.odd-btn.highlighted {
- background: var(--gradient-accent);
- border-color: var(--purple);
+ background: var(--gradient-primary);
+ border-color: var(--primary);
+ box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
}
.odd-label {
@@ -1218,7 +1246,7 @@ section {
}
.odd-btn.highlighted .odd-label {
- color: var(--white-70);
+ color: var(--white-80);
}
.odd-value {
@@ -1237,12 +1265,9 @@ section {
.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%);
+ inset: 0;
+ background: radial-gradient(ellipse at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+ radial-gradient(ellipse at 70% 80%, rgba(34, 211, 238, 0.06) 0%, transparent 40%);
pointer-events: none;
}
@@ -1264,23 +1289,37 @@ section {
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
+ position: relative;
+}
+
+.game-card::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
+ opacity: 0;
+ transition: var(--transition);
+ pointer-events: none;
}
.game-card:hover,
.game-card:focus-within {
transform: translateY(-10px);
- box-shadow:
- 0 30px 60px rgba(0, 0, 0, 0.4),
- 0 0 40px rgba(99, 102, 241, 0.15);
- border-color: var(--purple);
+ box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.2);
+ border-color: var(--primary);
+}
+
+.game-card:hover::before,
+.game-card:focus-within::before {
+ opacity: 1;
}
.game-visual {
- height: 160px;
+ height: 180px;
display: flex;
align-items: center;
justify-content: center;
- background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
+ background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
position: relative;
overflow: hidden;
}
@@ -1289,11 +1328,13 @@ section {
content: '';
position: absolute;
inset: 0;
- background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+ background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
}
.game-visual svg {
transition: var(--transition);
+ position: relative;
+ z-index: 1;
}
.game-card:hover .game-visual svg,
@@ -1317,11 +1358,14 @@ section {
.game-info {
padding: var(--space-md);
+ position: relative;
+ z-index: 1;
}
.game-info h3 {
margin-bottom: var(--space-xs);
font-weight: 500;
+ color: var(--white-95);
}
.game-info p {
@@ -1333,7 +1377,7 @@ section {
display: inline-flex;
align-items: center;
gap: 0.5rem;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1345,8 +1389,7 @@ section {
content: '←';
transition: var(--transition);
display: inline-block;
- -webkit-background-clip: text;
- background-clip: text;
+ -webkit-text-fill-color: var(--secondary);
}
[dir="ltr"] .game-link::after {
@@ -1375,7 +1418,8 @@ section {
content: '';
position: absolute;
inset: 0;
- background: radial-gradient(ellipse at 30% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 60%);
+ background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+ radial-gradient(ellipse at 80% 30%, rgba(34, 211, 238, 0.1) 0%, transparent 40%);
pointer-events: none;
}
@@ -1395,7 +1439,7 @@ section {
}
.bonuses-content h2 .highlight {
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1403,7 +1447,8 @@ section {
.bonuses-content > p {
font-size: 1.125rem;
- max-width: 44ch;
+ max-width: 48ch;
+ line-height: 1.8;
}
.bonus-features {
@@ -1425,7 +1470,7 @@ section {
.bonus-features svg {
width: 22px;
height: 22px;
- color: var(--cyan);
+ color: var(--secondary);
flex-shrink: 0;
}
@@ -1449,7 +1494,7 @@ section {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
- backdrop-filter: blur(20px);
+ backdrop-filter: blur(30px);
display: flex;
flex-direction: column;
align-items: center;
@@ -1460,30 +1505,32 @@ section {
.bc-1 {
top: 0;
inset-inline-start: 0;
- 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);
+ background: linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
+ border-color: rgba(99, 102, 241, 0.3);
z-index: 3;
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(99, 102, 241, 0.2);
}
.bc-2 {
top: 90px;
inset-inline-start: 30px;
- 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);
+ background: linear-gradient(145deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
+ border-color: rgba(34, 211, 238, 0.3);
z-index: 2;
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(34, 211, 238, 0.2);
}
.bc-3 {
top: 180px;
inset-inline-start: 60px;
- 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);
+ background: linear-gradient(145deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
+ border-color: rgba(251, 191, 36, 0.3);
z-index: 1;
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(251, 191, 36, 0.15);
}
.bonus-card:hover {
transform: translateY(-10px) rotate(-2deg);
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.bc-amount {
@@ -1495,17 +1542,17 @@ section {
}
.bc-1 .bc-amount {
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-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-2 .bc-amount { color: var(--secondary); }
+.bc-3 .bc-amount { color: var(--gold); }
.bc-label {
font-size: 0.9375rem;
- color: var(--white-60);
+ color: var(--white-70);
}
/* ========================================
@@ -1518,10 +1565,8 @@ section {
.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%);
+ inset: 0;
+ background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
pointer-events: none;
}
@@ -1545,39 +1590,38 @@ section {
.download-phone {
position: absolute;
- width: 220px;
- height: 440px;
- background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
- border-radius: 36px;
+ width: 200px;
+ height: 400px;
+ background: linear-gradient(145deg, #1a1f35 0%, #0d1020 100%);
+ border-radius: 32px;
padding: 8px;
- box-shadow:
- 0 50px 100px rgba(0,0,0,0.5),
- 0 0 40px rgba(99, 102, 241, 0.1);
+ box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}
.phone-1 {
- inset-inline-end: 45%;
+ inset-inline-end: 40%;
top: 60px;
- transform: rotate(-8deg);
+ transform: rotate(-5deg);
z-index: 1;
}
.phone-2 {
- inset-inline-start: 45%;
- top: 0;
- transform: rotate(8deg);
+ inset-inline-start: 40%;
+ top: 10px;
+ transform: rotate(5deg);
z-index: 2;
}
.dp-screen {
width: 100%;
height: 100%;
- background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
- border-radius: 30px;
+ background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
+ border-radius: 26px;
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-sm);
+ border: 1px solid var(--glass-border);
}
.dp-header {
@@ -1589,7 +1633,7 @@ section {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1610,11 +1654,14 @@ section {
border-radius: var(--radius-sm);
padding: 0.75rem;
font-size: 0.75rem;
+ color: var(--white-80);
+ transition: var(--transition);
}
.dp-menu-item.active {
- background: var(--gradient-accent);
- border-color: var(--purple);
+ background: var(--gradient-primary);
+ border-color: var(--primary);
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
.dp-menu-item svg {
@@ -1634,6 +1681,7 @@ section {
font-weight: 600;
align-self: flex-start;
margin-top: var(--space-md);
+ border: 1px solid rgba(239, 68, 68, 0.3);
}
.dp-live-dot {
@@ -1642,6 +1690,7 @@ section {
background: #ef4444;
border-radius: 50%;
animation: pulse 1.5s infinite;
+ box-shadow: 0 0 6px #ef4444;
}
.dp-game {
@@ -1652,39 +1701,39 @@ section {
}
.dp-roulette-wheel {
- width: 110px;
- height: 110px;
+ width: 100px;
+ height: 100px;
background: conic-gradient(
#6366f1 0deg 20deg,
- #1a1a2e 20deg 40deg,
+ #1a1a1a 20deg 40deg,
#22d3ee 40deg 60deg,
- #1a1a2e 60deg 80deg,
+ #1a1a1a 60deg 80deg,
#6366f1 80deg 100deg,
- #1a1a2e 100deg 120deg,
+ #1a1a1a 100deg 120deg,
#22d3ee 120deg 140deg,
- #1a1a2e 140deg 160deg,
+ #1a1a1a 140deg 160deg,
#6366f1 160deg 180deg,
- #1a1a2e 180deg 200deg,
+ #1a1a1a 180deg 200deg,
#22d3ee 200deg 220deg,
- #1a1a2e 220deg 240deg,
+ #1a1a1a 220deg 240deg,
#6366f1 240deg 260deg,
- #1a1a2e 260deg 280deg,
+ #1a1a1a 260deg 280deg,
#22d3ee 280deg 300deg,
- #1a1a2e 300deg 320deg,
+ #1a1a1a 300deg 320deg,
#6366f1 320deg 340deg,
- #1a1a2e 340deg 360deg
+ #1a1a1a 340deg 360deg
);
border-radius: 50%;
- border: 4px solid var(--purple);
- box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
+ border: 4px solid var(--secondary);
animation: spin 8s linear infinite;
+ box-shadow: 0 0 30px rgba(34, 211, 238, 0.3);
}
.dp-bet-amount {
text-align: center;
- font-size: 1.125rem;
+ font-size: 1rem;
font-weight: 600;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1705,6 +1754,7 @@ section {
.download-content > p {
font-size: 1.125rem;
margin-bottom: var(--space-lg);
+ line-height: 1.8;
}
.download-buttons {
@@ -1726,10 +1776,10 @@ section {
.download-btn:hover,
.download-btn:focus-visible {
- background: var(--glass-bg-hover);
- border-color: var(--purple);
+ background: var(--glass-bg-strong);
+ border-color: var(--primary);
transform: translateX(-4px);
- box-shadow: 0 0 25px rgba(99, 102, 241, 0.2);
+ box-shadow: 0 0 25px rgba(99, 102, 241, 0.3);
}
[dir="ltr"] .download-btn:hover,
@@ -1738,9 +1788,9 @@ section {
}
.store-icon {
- width: 32px;
- height: 32px;
- color: var(--white);
+ width: 36px;
+ height: 36px;
+ color: var(--secondary);
}
.btn-text {
@@ -1756,6 +1806,7 @@ section {
.btn-text .large {
font-size: 1rem;
font-weight: 500;
+ color: var(--white-95);
}
.download-features {
@@ -1770,14 +1821,14 @@ section {
display: flex;
align-items: center;
gap: 0.5rem;
- color: var(--white-60);
+ color: var(--white-70);
font-size: 0.875rem;
}
.df-item svg {
- width: 18px;
- height: 18px;
- color: var(--cyan);
+ width: 20px;
+ height: 20px;
+ color: var(--secondary);
}
/* ========================================
@@ -1789,40 +1840,25 @@ section {
.support-card {
background: var(--glass-bg);
- border: 1px solid var(--glass-border);
+ border: 1px solid var(--glass-border-glow);
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);
- position: relative;
- overflow: hidden;
-}
-
-.support-card::before {
- content: '';
- position: absolute;
- inset: 0;
- background: var(--gradient-accent);
- opacity: 0.03;
- pointer-events: none;
+ backdrop-filter: blur(30px);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(99, 102, 241, 0.1);
}
.support-content h3 {
- position: relative;
font-size: 1.5rem;
margin-bottom: 0.5rem;
font-weight: 500;
-}
-
-.support-content p {
- position: relative;
+ color: var(--white-95);
}
.support-channels {
- position: relative;
display: flex;
gap: var(--space-sm);
}
@@ -1831,12 +1867,13 @@ section {
display: flex;
align-items: center;
gap: 0.5rem;
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 0.75rem 1.25rem;
font-weight: 500;
transition: var(--transition);
+ color: var(--white-90);
}
.support-btn svg {
@@ -1846,34 +1883,34 @@ section {
.support-btn:hover,
.support-btn:focus-visible {
- background: var(--glass-bg-hover);
+ background: var(--white-10);
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.support-btn.whatsapp:hover,
.support-btn.whatsapp:focus-visible {
background: rgba(37, 211, 102, 0.15);
border-color: #25d366;
- box-shadow: 0 0 20px rgba(37, 211, 102, 0.2);
+ box-shadow: 0 0 20px rgba(37, 211, 102, 0.3);
}
.support-btn.telegram:hover,
.support-btn.telegram:focus-visible {
background: rgba(0, 136, 204, 0.15);
border-color: #0088cc;
- box-shadow: 0 0 20px rgba(0, 136, 204, 0.2);
+ box-shadow: 0 0 20px rgba(0, 136, 204, 0.3);
}
.support-btn.chat:hover,
.support-btn.chat:focus-visible {
- border-color: var(--purple);
- box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
+ border-color: var(--primary);
}
/* ========================================
FOOTER
======================================== */
.site-footer {
- background: rgba(8, 10, 15, 0.95);
+ background: rgba(5, 8, 15, 0.95);
border-top: 1px solid var(--glass-border);
padding: var(--space-2xl) 0 var(--space-lg);
position: relative;
@@ -1885,7 +1922,7 @@ section {
top: 0;
inset-inline: 0;
height: 1px;
- background: var(--gradient-accent);
+ background: var(--gradient-primary);
opacity: 0.5;
}
@@ -1898,7 +1935,7 @@ section {
}
.footer-brand {
- max-width: 280px;
+ max-width: 300px;
}
.footer-logo {
@@ -1911,15 +1948,9 @@ 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;
+ line-height: 1.7;
}
.footer-links {
@@ -1929,7 +1960,7 @@ section {
}
.footer-col h4 {
- color: var(--white);
+ color: var(--white-95);
margin-bottom: var(--space-sm);
font-weight: 500;
}
@@ -1948,7 +1979,7 @@ section {
.footer-col a:hover,
.footer-col a:focus-visible {
- color: var(--cyan);
+ color: var(--secondary);
}
.footer-bottom {
@@ -1980,32 +2011,33 @@ section {
display: flex;
align-items: center;
justify-content: center;
- width: 38px;
- height: 38px;
+ width: 40px;
+ height: 40px;
background: rgba(239, 68, 68, 0.15);
border: 2px solid #ef4444;
border-radius: 50%;
color: #ef4444;
font-weight: 600;
font-size: 0.875rem;
+ box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.badge-secure {
display: flex;
align-items: center;
gap: 0.375rem;
- background: var(--glass-bg);
+ background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
- color: var(--white-60);
+ color: var(--white-70);
}
.badge-secure svg {
- width: 16px;
- height: 16px;
- color: var(--cyan);
+ width: 18px;
+ height: 18px;
+ color: var(--green);
}
/* ========================================
@@ -2164,10 +2196,6 @@ section {
flex-wrap: wrap;
justify-content: center;
}
-
- .section-header.centered h2::after {
- display: none;
- }
}
@media (max-width: 480px) {
@@ -2180,6 +2208,10 @@ section {
font-size: 4rem;
}
+ .hero-tagline {
+ font-size: 1.25rem;
+ }
+
.hero-stats {
flex-direction: column;
gap: var(--space-md);
@@ -2229,7 +2261,11 @@ section {
.badge-dot,
.live-dot,
.live-pulse,
- .dp-live-dot {
+ .dp-live-dot,
+ .glow,
+ .hero-7xl,
+ .hero-bg-effects::before,
+ .hero-bg-effects::after {
animation: none !important;
}
}