/* Athletic Sportzey Home Page Design - Clean & Modern */
/* Global scrolling improvements */
html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Performance optimizations for smooth scrolling */
* {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
/* Global Hero Title Override - Force Black Color */
.hero-title {
color: #000000 !important;
text-shadow: none !important;
-webkit-text-fill-color: #000000 !important;
}
/* Specific Override for "Where Sportzey Enters" */
.sportzey-enters-title {
color: #000000 !important;
font-weight: 900 !important;
text-shadow: none !important;
}
/* Before Image Styling */
.before-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.2));
}
/* After Image Styling */
.after-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.2));
}
/* Global Background */
body {
background-color: var(--sportzey-beige);
background-size: cover;
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;
/* Improve scrolling performance */
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* Container Alignment */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
/* Mobile Container Optimization */
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 0.75rem;
}
}
/* Hero Section */
.hero {
background: url('../images/Hero.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 6rem 0 2rem 0;
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* Mobile Hero Optimization */
@media (max-width: 768px) {
.hero {
padding: 4rem 0 1.5rem 0;
min-height: 60vh;
background-size: cover;
background-position: center center;
}
}
@media (max-width: 480px) {
.hero {
padding: 3rem 0 1rem 0;
min-height: 50vh;
background-attachment: scroll; /* Better performance on mobile */
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(245, 245, 220, 0.8) 0%, rgba(232, 232, 208, 0.8) 100%);
z-index: 1;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
z-index: 1;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Mobile Hero Content */
@media (max-width: 768px) {
.hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
padding: 0 1rem;
}
.hero-text {
text-align: center;
}
.logo-hero {
width: 120px;
height: 120px;
}
}
@media (max-width: 480px) {
.hero-content {
gap: 1.5rem;
padding: 0 0.75rem;
}
.logo-hero {
width: 100px;
height: 100px;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.hero-description {
font-size: 1rem;
margin-bottom: 1rem;
}
.hero-highlight {
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
}
.hero-logo {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.logo-hero {
width: 180px;
height: 180px;
object-fit: contain;
filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.3));
animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.hero-text {
text-align: left;
}
/* Force Hero Title to Pure Black - No Effects */
.hero .hero-text .hero-title,
.hero-title,
h1.hero-title {
color: #000000 !important;
text-shadow: none !important;
-webkit-text-fill-color: #000000 !important;
filter: none !important;
background: none !important;
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--sportzey-black);
margin-bottom: 1.5rem;
line-height: 1.4;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.hero-description {
font-size: 1.2rem;
color: var(--sportzey-black);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.hero-highlight {
font-size: 1.4rem;
color: var(--sportzey-black);
font-weight: 700;
font-style: italic;
margin-bottom: 2.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Hero Buttons Section - Seamlessly Integrated */
.hero-buttons {
background: var(--sportzey-beige);
padding: 4rem 0 5rem 0;
text-align: center;
position: relative;
margin: 0;
border-top: 1px solid rgba(26, 26, 26, 0.1);
/* Ensure perfect alignment with hero text above and mission header below */
}
.hero-buttons::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.hero-buttons-content {
display: flex;
gap: 2.5rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
/* Mobile Hero Buttons */
@media (max-width: 768px) {
.hero-buttons {
padding: 3rem 0 4rem 0;
}
.hero-buttons-content {
flex-direction: column;
gap: 1.5rem;
padding: 0 1rem;
}
.hero-buttons .btn {
width: 100%;
max-width: 300px;
padding: 1.2rem 2rem;
font-size: 1rem;
min-height: 48px;
}
}
@media (max-width: 480px) {
.hero-buttons {
padding: 2rem 0 3rem 0;
}
.hero-buttons-content {
gap: 1rem;
padding: 0 0.75rem;
}
.hero-buttons .btn {
max-width: 280px;
padding: 1rem 1.5rem;
font-size: 0.95rem;
}
}
.hero-buttons .btn {
min-width: 220px !important;
font-size: 1.1rem !important;
padding: 1.4rem 3rem !important;
border-radius: 60px !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.3) !important;
border: 3px solid transparent !important;
backdrop-filter: blur(10px) !important;
margin: 0 auto !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 60px !important;
cursor: pointer !important;
background: transparent !important;
}
.hero-buttons .btn-primary {
background: var(--sportzey-black) !important;
color: var(--white) !important;
border-color: var(--sportzey-black) !important;
}
.hero-buttons .btn-primary:hover {
transform: translateY(-5px) !important;
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.4) !important;
background: var(--sportzey-black-light) !important;
border-color: var(--sportzey-black-light) !important;
}
.hero-buttons .btn-secondary {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--sportzey-black) !important;
border-color: var(--sportzey-black) !important;
}
.hero-buttons .btn-secondary:hover {
background: var(--sportzey-black) !important;
color: var(--white) !important;
transform: translateY(-5px) !important;
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.35) !important;
border-color: var(--sportzey-black-light) !important;
}
/* Mission Section */
.mission {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 4rem 0 6rem 0;
text-align: center;
position: relative;
margin-top: 0;
/* Seamless flow from hero-buttons section */
}
.mission::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.mission-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 2rem;
}
.section-title {
font-size: 3.5rem;
color: var(--sportzey-black);
margin-bottom: 2rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
text-align: center;
}
.mission-text {
font-size: 1.6rem;
color: var(--sportzey-black);
margin-bottom: 1.5rem;
line-height: 1.4;
font-weight: 600;
text-align: center;
}
.mission-description {
font-size: 1.2rem;
color: var(--sportzey-black);
line-height: 1.7;
text-align: center;
}
/* Why Sportzey Section - Integrated with Website Design */
.why-sportzey {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 6rem 0;
position: relative;
overflow: hidden;
margin-top: 0;
/* Seamless flow from mission section */
}
.why-sportzey::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.why-sportzey .container {
position: relative;
z-index: 1;
}
.why-sportzey .section-title {
text-align: center;
margin-bottom: 4rem;
font-size: 3.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
color: var(--sportzey-black);
text-shadow: 0 4px 20px rgba(26, 26, 26, 0.2);
/* Consistent with mission section title */
}
.why-sportzey .section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--sportzey-black) !important;
border-radius: 2px;
}
/* Problem Narrative - Integrated Design */
.problem-narrative {
margin-bottom: 6rem;
text-align: center;
background: var(--sportzey-beige);
padding: 4rem;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.problem-narrative::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
}
.narrative-header {
margin-bottom: 4rem;
text-align: center;
}
.narrative-icon {
width: 120px;
height: 120px;
margin: 0 auto 2rem auto;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInScale 1s ease-out both;
}
.narrative-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 25px rgba(26, 26, 26, 0.2));
transition: all 0.3s ease;
}
.narrative-image:hover {
transform: scale(1.05);
filter: drop-shadow(0 12px 35px rgba(26, 26, 26, 0.3));
}
.narrative-title {
font-size: 2.8rem;
color: var(--sportzey-black);
margin-bottom: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1.2;
text-align: center;
/* Consistent with section titles */
}
.narrative-subtitle {
font-size: 1.3rem;
color: var(--sportzey-black);
font-weight: 500;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
text-align: center;
}
/* Enhanced Data Visualization */
.data-visualization {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 3rem;
margin-bottom: 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
justify-items: center;
}
.data-point {
background: rgba(245, 245, 220, 0.95);
padding: 4rem 2.5rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInUp 1s ease-out both;
}
.data-point:nth-child(1) { animation-delay: 0.9s; }
.data-point:nth-child(2) { animation-delay: 1.0s; }
.data-point:nth-child(3) { animation-delay: 1.1s; }
.data-point:nth-child(4) { animation-delay: 1.2s; }
.data-point::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
transition: all 0.3s ease;
}
.data-point.primary {
border-left: 4px solid var(--sportzey-black);
}
.data-point.secondary {
border-left: 4px solid var(--sportzey-black);
}
.data-point:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(26, 26, 26, 0.2);
border-color: var(--sportzey-black);
background: rgba(232, 232, 208, 0.98);
animation: pulseGlow 2s ease-in-out infinite;
}
.data-point:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.data-visual {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
width: 100%;
text-align: center;
}
.data-circle {
width: 140px;
height: 140px;
background: var(--sportzey-black) !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(26, 26, 26, 0.2);
position: relative;
overflow: hidden;
flex-shrink: 0;
transition: all 0.4s ease;
}
.data-circle:hover {
transform: scale(1.1);
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.3);
animation: dataPulse 1s ease-in-out infinite;
}
.data-circle::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: gradientFlow 3s ease-in-out infinite;
}
.data-number {
font-size: 2.8rem;
font-weight: 900;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
line-height: 1;
text-align: center;
transition: all 0.3s ease;
}
.data-circle:hover .data-number {
transform: scale(1.1);
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.data-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--sportzey-black);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.4;
margin-bottom: 0.5rem;
max-width: 100%;
word-wrap: break-word;
text-align: center;
transition: all 0.3s ease;
}
.data-point:hover .data-label {
color: var(--sportzey-black-light);
transform: translateY(-2px);
}
.data-source {
font-size: 0.9rem;
color: var(--sportzey-black);
font-style: italic;
opacity: 0.8;
margin-top: 0.5rem;
text-align: center;
transition: all 0.3s ease;
}
.data-point:hover .data-source {
opacity: 1;
color: var(--sportzey-black);
}
.narrative-conclusion {
background: var(--sportzey-black) !important;
padding: 2rem 3rem;
border-radius: 50px;
display: inline-block;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.2);
transform: rotate(-0.5deg);
position: relative;
overflow: hidden;
text-align: center;
margin: 0 auto;
animation: fadeInScale 1s ease-out 1.3s both;
transition: all 0.4s ease;
}
.narrative-conclusion:hover {
transform: rotate(0deg) scale(1.05);
box-shadow: 0 25px 50px rgba(26, 26, 26, 0.3);
}
.narrative-conclusion p {
font-size: 1.4rem;
color: white;
font-weight: 700;
font-style: italic;
text-align: center;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
/* Enhanced Solution Narrative */
.solution-narrative {
margin-bottom: 6rem;
text-align: center;
background: var(--sportzey-beige);
padding: 4rem;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
animation: fadeInUp 1s ease-out 0.4s both;
}
.solution-narrative::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
animation: slideInRight 1s ease-out 0.5s both;
}
.benefits-infographic {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
justify-items: center;
}
.benefit-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
width: 100%;
}
.benefit-item {
background: rgba(245, 245, 220, 0.95);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInUp 1s ease-out both;
}
.benefit-item:nth-child(1) { animation-delay: 0.9s; }
.benefit-item:nth-child(2) { animation-delay: 1.0s; }
.benefit-item:nth-child(3) { animation-delay: 1.1s; }
.benefit-item:nth-child(4) { animation-delay: 1.2s; }
.benefit-item:nth-child(5) { animation-delay: 1.3s; }
.benefit-item:nth-child(6) { animation-delay: 1.4s; }
.benefit-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(26, 26, 26, 0.2);
border-color: var(--sportzey-black);
background: rgba(232, 232, 208, 0.98);
animation: pulseGlow 2s ease-in-out infinite;
}
.benefit-item:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.benefit-visual {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
width: 100%;
text-align: center;
}
.benefit-icon {
width: 80px;
height: 80px;
margin-right: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
animation: iconFloat 3s ease-in-out infinite;
}
.benefit-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 15px rgba(26, 26, 26, 0.2));
transition: all 0.3s ease;
}
.benefit-image:hover {
transform: scale(1.1);
filter: drop-shadow(0 8px 25px rgba(26, 26, 26, 0.3));
}
.benefit-data {
text-align: left;
flex: 1;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-data {
transform: translateX(5px);
}
.benefit-number {
font-size: 2.2rem;
font-weight: 900;
color: var(--sportzey-black);
line-height: 1;
margin-bottom: 0.5rem;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-number {
color: var(--sportzey-black-light);
transform: scale(1.1);
}
.benefit-metric {
font-size: 0.9rem;
font-weight: 700;
color: var(--sportzey-black);
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-metric {
opacity: 1;
color: var(--sportzey-black);
}
.benefit-content {
text-align: left;
width: 100%;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-content {
transform: translateY(-3px);
}
.benefit-content p {
font-size: 1rem;
color: var(--sportzey-black);
line-height: 1.6;
margin-bottom: 0.5rem;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-content p {
color: var(--sportzey-black);
}
.source {
font-size: 0.85rem;
color: var(--sportzey-black);
font-style: italic;
opacity: 0.7;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .source {
opacity: 1;
color: var(--sportzey-black);
}
/* Data Icons - Enhanced */
.data-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15));
}
/* Why Grid */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
position: relative;
z-index: 1;
align-items: stretch;
}
.why-card {
background: rgba(255, 255, 255, 0.9);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.why-card:hover {
transform: translateY(-15px) scale(1.05);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.95);
}
.why-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
animation: iconPulse 2s ease-in-out infinite;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.why-card h3 {
color: var(--sportzey-black);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.why-card p {
color: var(--sportzey-black);
line-height: 1.7;
font-size: 1.1rem;
flex-grow: 1;
}
/* What Offers Section */
.what-offers {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 6rem 0;
position: relative;
}
.what-offers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.what-offers .container {
position: relative;
z-index: 1;
}
.what-offers .section-title {
text-align: center;
margin-bottom: 1rem;
}
.section-subtitle {
text-align: center;
color: var(--sportzey-black);
font-size: 1.4rem;
margin-bottom: 4rem;
font-style: italic;
position: relative;
z-index: 1;
font-weight: 600;
}
/* Comprehensive Flow - How Sportzey Helps Users */
.comprehensive-flow {
max-width: 1200px;
margin: 4rem auto 5rem auto;
position: relative;
z-index: 1;
}
.flow-title {
text-align: center;
color: var(--sportzey-black);
font-size: 2.5rem;
margin-bottom: 4rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1.2;
font-family: 'Jersey25', 'Inter', sans-serif;
animation: fadeInUp 1s ease-out 1.3s both;
}
.flow-item {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 3rem;
padding: 3rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 2px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
animation: fadeInUp 1s ease-out both;
}
.flow-item:nth-child(2) { animation-delay: 0.4s; }
.flow-item:nth-child(4) { animation-delay: 0.6s; }
.flow-item:nth-child(6) { animation-delay: 0.8s; }
.flow-item:nth-child(8) { animation-delay: 1.0s; }
.flow-item:nth-child(10) { animation-delay: 1.2s; }
.flow-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
transition: all 0.3s ease;
}
.flow-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
}
.flow-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 1);
border-color: var(--sportzey-black);
}
.flow-item:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black-light), var(--sportzey-black));
}
.flow-icon {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sportzey-black) !important;
color: var(--white);
border-radius: 50%;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.4);
animation: iconFloat 3s ease-in-out infinite;
flex-shrink: 0;
transition: all 0.3s ease;
}
.flow-item:hover .flow-icon {
transform: scale(1.1);
box-shadow: 0 20px 45px rgba(26, 26, 26, 0.5);
}
.flow-content {
flex: 1;
}
.flow-content h3 {
color: var(--sportzey-black);
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1.2;
transition: all 0.3s ease;
}
.flow-item:hover .flow-content h3 {
color: var(--sportzey-black-light);
transform: translateX(5px);
}
.flow-content p {
color: var(--sportzey-black);
line-height: 1.7;
font-size: 1.2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.flow-item:hover .flow-content p {
color: var(--sportzey-black);
}
/* Feature Tags */
.feature-tags {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-start;
}
.flow-item:nth-child(even) .feature-tags {
justify-content: flex-end;
}
.feature-tag {
background: rgba(26, 26, 26, 0.1);
color: var(--sportzey-black);
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid rgba(26, 26, 26, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
transition: all 0.3s ease;
}
.feature-tag:hover {
background: var(--sportzey-black) !important;
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(26, 26, 26, 0.3);
}
.flow-connector {
width: 6px;
height: 80px;
background: linear-gradient(to bottom, var(--sportzey-black), var(--sportzey-black-light));
margin: 0 auto 3rem auto;
border-radius: 3px;
position: relative;
animation: fadeInScale 1s ease-out both;
}
.flow-connector::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: var(--sportzey-black) !important;
border-radius: 50%;
box-shadow: 0 0 25px rgba(26, 26, 26, 0.6);
animation: pulseGlow 2s ease-in-out infinite;
}
/* Features Summary */
.features-summary {
margin-top: 5rem;
}
.summary-title {
text-align: center;
color: var(--sportzey-black);
font-size: 2.5rem;
margin-bottom: 3rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.9);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.feature-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 1);
border-color: var(--sportzey-black);
}
.feature-card .feature-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
display: block;
animation: iconPulse 2s ease-in-out infinite;
}
.feature-card h4 {
color: var(--sportzey-black);
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-card p {
color: var(--sportzey-black);
line-height: 1.6;
font-size: 1rem;
margin: 0;
}
/* Sports Section */
.sports-section {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 6rem 0;
position: relative;
}
.sports-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.sports-section .container {
position: relative;
z-index: 1;
}
.sports-section .section-title {
text-align: center;
margin-bottom: 1rem;
}
.sports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 1;
align-items: stretch;
}
.sport-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.sport-card:hover {
transform: translateY(-15px) scale(1.03);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.sport-header {
position: relative;
height: 250px;
overflow: hidden;
background: var(--sportzey-black) !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sport-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
max-width: 70%;
max-height: 70%;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: brightness(0) invert(1);
}
.sport-card:hover .sport-image {
transform: scale(1.15) rotate(2deg);
}
.sport-badge {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.sport-body {
padding: 2.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.sport-body h3 {
color: var(--sportzey-black);
font-size: 2rem;
margin-bottom: 1.5rem;
text-align: center;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.sport-body p {
color: var(--sportzey-black);
line-height: 1.7;
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.1rem;
flex-grow: 0;
}
.sport-features {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 1.5rem;
justify-content: center;
flex-shrink: 0;
}
.feature {
background: rgba(26, 26, 26, 0.1);
color: var(--sportzey-black);
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid rgba(26, 26, 26, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sport-description {
margin-bottom: 2rem;
flex-grow: 1;
}
.sport-description p {
color: var(--sportzey-black);
line-height: 1.6;
font-size: 1rem;
text-align: center;
margin: 0;
font-style: italic;
}
.sport-btn {
width: 100%;
background: var(--sportzey-black) !important;
color: var(--white);
border: none;
padding: 1.2rem 2rem;
border-radius: 25px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 25px rgba(26, 26, 26, 0.3);
margin-top: auto;
flex-shrink: 0;
}
.sport-btn:hover {
background: var(--sportzey-black-light);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 30px rgba(26, 26, 26, 0.4);
}
/* CTA Section */
.cta-section {
background: var(--sportzey-black) !important;
color: var(--white);
padding: 6rem 0;
text-align: center;
position: relative;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.cta-content h2 {
color: var(--sportzey-black) !important;
font-size: 3.5rem;
margin-bottom: 1.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
text-shadow: none !important;
}
.cta-content p {
color: var(--sportzey-beige) !important;
text-shadow: none !important;
font-size: 1.4rem;
margin-bottom: 3rem;
font-weight: 600;
}
.cta-actions {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.cta-btn {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 1.5rem 3rem;
border-radius: 50px;
font-size: 1.3rem;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
border: 3px solid var(--sportzey-beige);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 70px;
min-width: 250px;
}
.cta-btn:hover {
background: transparent;
color: var(--sportzey-beige);
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
border-color: var(--sportzey-beige);
}
.btn-large {
padding: 1.2rem 3rem;
font-size: 1.2rem;
font-weight: 800;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 1.5rem;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
padding: 0 1.5rem;
}
.hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2.5rem;
}
.hero-buttons {
padding: 2rem 0 4rem 0;
}
.hero-buttons-content {
gap: 1.5rem;
flex-direction: column;
align-items: center;
padding: 0 1rem;
}
.hero-buttons .btn {
min-width: 280px;
padding: 1.3rem 2.5rem;
font-size: 1rem;
}
.sports-grid {
grid-template-columns: 1fr;
}
.why-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.data-visualization {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.data-point {
padding: 3rem 2rem;
}
.data-circle {
width: 110px;
height: 110px;
}
.data-number {
font-size: 2.2rem;
}
.data-label {
font-size: 1rem;
}
.data-source {
font-size: 0.85rem;
}
.benefit-row {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.solution-infographic {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.transformation-showcase {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.transformation-item {
padding: 2rem 1.5rem;
}
.before-after {
gap: 1.5rem;
}
.before-icon, .after-icon {
width: 50px;
height: 50px;
}
.sportzey-cta {
padding: 2rem;
}
.cta-content h4 {
font-size: 1.6rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.cta-btn {
min-width: 200px;
}
.narrative-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.why-sportzey .section-title {
font-size: 3rem;
}
.why-sportzey {
padding: 4rem 0;
border-radius: 20px;
margin: 0.5rem 0;
}
.problem-narrative, .solution-narrative {
padding: 2rem 1rem;
margin-bottom: 4rem;
border-radius: 20px;
}
.narrative-title {
font-size: 2.5rem;
}
.narrative-subtitle {
font-size: 1.1rem;
}
.narrative-icon {
width: 70px;
height: 70px;
margin-bottom: 2rem;
}
.data-visualization {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.data-point {
padding: 2rem 1rem;
border-radius: 20px;
}
.data-circle {
width: 80px;
height: 80px;
}
.data-number {
font-size: 1.8rem;
}
.data-label {
font-size: 1rem;
}
.benefits-infographic {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefit-item {
padding: 2rem 1rem;
border-radius: 20px;
}
.benefit-icon {
width: 60px;
height: 60px;
}
.benefit-number {
font-size: 1.8rem;
}
.narrative-conclusion {
padding: 1.5rem 2rem;
border-radius: 30px;
transform: none;
}
.narrative-conclusion p {
font-size: 1.2rem;
}
.data-circle {
width: 80px;
height: 80px;
}
.data-number {
font-size: 1.8rem;
}
/* Old crisis sections removed - replaced with new narrative design above */
/* Old story sections removed - replaced with new dynamic design above */
/* Old corporate sections removed - replaced with athletic story-driven design above */
.hero {
padding: 4rem 0;
min-height: 70vh;
}
.mission, .why-sportzey, .what-offers, .sports-section, .cta-section {
padding: 4rem 0;
}
.mission {
margin-top: -1rem;
}
.mission-content, .cta-content {
padding: 0 1.5rem;
}
.flow-item {
flex-direction: column !important;
text-align: center !important;
gap: 2rem;
padding: 2rem;
}
.flow-icon {
width: 100px;
height: 100px;
}
.flow-content h3 {
font-size: 1.6rem;
}
.flow-content p {
font-size: 1.1rem;
}
.feature-tags {
justify-content: center !important;
}
.features-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.summary-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.comprehensive-flow {
margin-bottom: 3rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.hero-content {
padding: 0 1rem;
}
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.sport-header {
height: 200px;
}
.sport-body {
padding: 2rem;
}
.why-card {
padding: 2rem 1.5rem;
}
.data-visualization {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.data-point {
padding: 2.5rem 1.5rem;
}
.data-circle {
width: 90px;
height: 90px;
}
.data-number {
font-size: 2rem;
max-width: 70px;
}
.data-label {
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.data-source {
font-size: 0.8rem;
margin-top: 0.3rem;
}
.benefit-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.solution-infographic {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.narrative-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.why-sportzey .section-title {
font-size: 2.5rem;
}
.data-point, .benefit-item, .solution-item {
padding: 1.5rem 1rem;
}
.narrative-conclusion {
padding: 1rem 1.5rem;
transform: none;
}
.narrative-conclusion p {
font-size: 1.1rem;
}
.data-visual {
flex-direction: column;
gap: 1rem;
}
.data-circle {
width: 70px;
height: 70px;
}
.data-number {
font-size: 1.5rem;
}
.benefit-visual {
flex-direction: column;
gap: 1rem;
}
.benefit-data {
text-align: center;
}
.crisis-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefit-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.bridge-features {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.crisis-title, .solution-title, .bridge-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.why-sportzey .section-title {
font-size: 2.5rem;
}
/* Old crisis and story sections removed - replaced with new narrative design above */
/* Old story sections removed - replaced with new dynamic design above */
/* Old corporate sections removed - replaced with athletic story-driven design above */
.logo-hero {
width: 150px;
height: 150px;
}
.mission-content, .cta-content {
padding: 0 1rem;
}
.hero-buttons {
padding: 1.5rem 0 3rem 0;
}
.hero-buttons .btn {
min-width: 260px;
padding: 1.2rem 2rem;
font-size: 0.95rem;
letter-spacing: 1px;
}
.transformation-showcase {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.transformation-item {
padding: 1.5rem 1rem;
}
.before-after {
flex-direction: column;
gap: 1rem;
}
.arrow {
transform: rotate(90deg);
font-size: 1.5rem;
}
.before-icon, .after-icon {
width: 45px;
height: 45px;
}
.sportzey-cta {
padding: 1.5rem;
margin: 0 1rem;
}
.cta-content h4 {
font-size: 1.4rem;
}
.cta-content p {
font-size: 1rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cta-btn {
min-width: 180px;
padding: 1rem 2rem;
font-size: 0.9rem;
}
}
/* Enhanced Animations for Modern, Sleek & Athletic Experience */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes floatUp {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.08);
}
50% {
box-shadow: 0 20px 45px rgba(26, 26, 26, 0.15);
}
}
@keyframes borderGlow {
0%, 100% {
border-color: rgba(26, 26, 26, 0.1);
}
50% {
border-color: var(--sportzey-black);
}
}
@keyframes iconRotate {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.1);
}
}
@keyframes dataPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes gradientFlow {
0%, 100% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
50% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
@keyframes iconFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes iconBounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-12px);
}
60% {
transform: translateY(-6px);
}
}
@keyframes arrowPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
/* Enhanced Section Title Animation */
.why-sportzey .section-title {
text-align: center;
margin-bottom: 4rem;
font-size: 3.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
color: var(--sportzey-black);
text-shadow: 0 4px 20px rgba(26, 26, 26, 0.2);
animation: fadeInUp 1s ease-out;
/* Consistent with mission section title */
}
.why-sportzey .section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--sportzey-black) !important;
border-radius: 2px;
animation: fadeInScale 1.2s ease-out 0.3s both;
}
/* Enhanced Problem Narrative */
.problem-narrative {
margin-bottom: 6rem;
text-align: center;
background: var(--sportzey-beige);
padding: 4rem;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
animation: fadeInUp 1s ease-out 0.2s both;
}
.problem-narrative::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
animation: slideInLeft 1s ease-out 0.5s both;
}
.narrative-header {
margin-bottom: 4rem;
text-align: center;
animation: fadeInUp 1s ease-out 0.4s both;
}
.narrative-icon {
width: 120px;
height: 120px;
margin: 0 auto 2rem auto;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInScale 1s ease-out both;
}
.narrative-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 25px rgba(26, 26, 26, 0.2));
transition: all 0.3s ease;
}
.narrative-image:hover {
transform: scale(1.05);
filter: drop-shadow(0 12px 35px rgba(26, 26, 26, 0.3));
}
.narrative-title {
font-size: 2.8rem;
color: var(--sportzey-black);
margin-bottom: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1.2;
text-align: center;
animation: fadeInUp 1s ease-out 0.7s both;
}
.narrative-subtitle {
font-size: 1.3rem;
color: var(--sportzey-black);
font-weight: 500;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
text-align: center;
animation: fadeInUp 1s ease-out 0.8s both;
}
/* Enhanced Data Visualization */
.data-visualization {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 3rem;
margin-bottom: 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
justify-items: center;
}
.data-point {
background: rgba(245, 245, 220, 0.95);
padding: 4rem 2.5rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInUp 1s ease-out both;
}
.data-point:nth-child(1) { animation-delay: 0.9s; }
.data-point:nth-child(2) { animation-delay: 1.0s; }
.data-point:nth-child(3) { animation-delay: 1.1s; }
.data-point:nth-child(4) { animation-delay: 1.2s; }
.data-point::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
transition: all 0.3s ease;
}
.data-point.primary {
border-left: 4px solid var(--sportzey-black);
}
.data-point.secondary {
border-left: 4px solid var(--sportzey-black);
}
.data-point:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(26, 26, 26, 0.2);
border-color: var(--sportzey-black);
background: rgba(232, 232, 208, 0.98);
animation: pulseGlow 2s ease-in-out infinite;
}
.data-point:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.data-visual {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
width: 100%;
text-align: center;
}
.data-circle {
width: 140px;
height: 140px;
background: var(--sportzey-black) !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(26, 26, 26, 0.2);
position: relative;
overflow: hidden;
flex-shrink: 0;
transition: all 0.4s ease;
}
.data-circle:hover {
transform: scale(1.1);
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.3);
animation: dataPulse 1s ease-in-out infinite;
}
.data-circle::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: gradientFlow 3s ease-in-out infinite;
}
.data-number {
font-size: 2.8rem;
font-weight: 900;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
line-height: 1;
text-align: center;
transition: all 0.3s ease;
}
.data-circle:hover .data-number {
transform: scale(1.1);
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.data-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--sportzey-black);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.4;
margin-bottom: 0.5rem;
max-width: 100%;
word-wrap: break-word;
text-align: center;
transition: all 0.3s ease;
}
.data-point:hover .data-label {
color: var(--sportzey-black-light);
transform: translateY(-2px);
}
.data-source {
font-size: 0.9rem;
color: var(--sportzey-black);
font-style: italic;
opacity: 0.8;
margin-top: 0.5rem;
text-align: center;
transition: all 0.3s ease;
}
.data-point:hover .data-source {
opacity: 1;
color: var(--sportzey-black);
}
.narrative-conclusion {
background: var(--sportzey-black) !important;
padding: 2rem 3rem;
border-radius: 50px;
display: inline-block;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.2);
transform: rotate(-0.5deg);
position: relative;
overflow: hidden;
text-align: center;
margin: 0 auto;
animation: fadeInScale 1s ease-out 1.3s both;
transition: all 0.4s ease;
}
.narrative-conclusion:hover {
transform: rotate(0deg) scale(1.05);
box-shadow: 0 25px 50px rgba(26, 26, 26, 0.3);
}
.narrative-conclusion p {
font-size: 1.4rem;
color: white;
font-weight: 700;
font-style: italic;
text-align: center;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
/* Enhanced Solution Narrative */
.solution-narrative {
margin-bottom: 6rem;
text-align: center;
background: var(--sportzey-beige);
padding: 4rem;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
animation: fadeInUp 1s ease-out 0.4s both;
}
.solution-narrative::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
animation: slideInRight 1s ease-out 0.5s both;
}
.benefits-infographic {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
justify-items: center;
}
.benefit-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
width: 100%;
}
.benefit-item {
background: rgba(245, 245, 220, 0.95);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInUp 1s ease-out both;
}
.benefit-item:nth-child(1) { animation-delay: 0.9s; }
.benefit-item:nth-child(2) { animation-delay: 1.0s; }
.benefit-item:nth-child(3) { animation-delay: 1.1s; }
.benefit-item:nth-child(4) { animation-delay: 1.2s; }
.benefit-item:nth-child(5) { animation-delay: 1.3s; }
.benefit-item:nth-child(6) { animation-delay: 1.4s; }
.benefit-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(26, 26, 26, 0.2);
border-color: var(--sportzey-black);
background: rgba(232, 232, 208, 0.98);
animation: pulseGlow 2s ease-in-out infinite;
}
.benefit-item:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.benefit-visual {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
width: 100%;
text-align: center;
}
.benefit-icon {
width: 80px;
height: 80px;
margin-right: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
animation: iconFloat 3s ease-in-out infinite;
}
.benefit-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 15px rgba(26, 26, 26, 0.2));
transition: all 0.3s ease;
}
.benefit-image:hover {
transform: scale(1.1);
filter: drop-shadow(0 8px 25px rgba(26, 26, 26, 0.3));
}
.benefit-data {
text-align: left;
flex: 1;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-data {
transform: translateX(5px);
}
.benefit-number {
font-size: 2.2rem;
font-weight: 900;
color: var(--sportzey-black);
line-height: 1;
margin-bottom: 0.5rem;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-number {
color: var(--sportzey-black-light);
transform: scale(1.1);
}
.benefit-metric {
font-size: 0.9rem;
font-weight: 700;
color: var(--sportzey-black);
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-metric {
opacity: 1;
color: var(--sportzey-black);
}
.benefit-content {
text-align: left;
width: 100%;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-content {
transform: translateY(-3px);
}
.benefit-content p {
font-size: 1rem;
color: var(--sportzey-black);
line-height: 1.6;
margin-bottom: 0.5rem;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-content p {
color: var(--sportzey-black);
}
.source {
font-size: 0.85rem;
color: var(--sportzey-black);
font-style: italic;
opacity: 0.7;
text-align: left;
transition: all 0.3s ease;
}
.benefit-item:hover .source {
opacity: 1;
color: var(--sportzey-black);
}
/* Data Icons - Enhanced */
.data-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15));
}
/* Why Grid */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
position: relative;
z-index: 1;
align-items: stretch;
}
.why-card {
background: rgba(255, 255, 255, 0.9);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.why-card:hover {
transform: translateY(-15px) scale(1.05);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.95);
}
.why-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
animation: iconPulse 2s ease-in-out infinite;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.why-card h3 {
color: var(--sportzey-black);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.why-card p {
color: var(--sportzey-black);
line-height: 1.7;
font-size: 1.1rem;
flex-grow: 1;
}
/* What Offers Section */
.what-offers {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 6rem 0;
position: relative;
}
.what-offers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.what-offers .container {
position: relative;
z-index: 1;
}
.what-offers .section-title {
text-align: center;
margin-bottom: 1rem;
}
.section-subtitle {
text-align: center;
color: var(--sportzey-black);
font-size: 1.4rem;
margin-bottom: 4rem;
font-style: italic;
position: relative;
z-index: 1;
font-weight: 600;
}
/* Comprehensive Flow - How Sportzey Helps Users */
.comprehensive-flow {
max-width: 1200px;
margin: 0 auto 5rem auto;
position: relative;
z-index: 1;
}
.flow-title {
text-align: center;
color: var(--sportzey-black);
font-size: 2.5rem;
margin-bottom: 4rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1.2;
font-family: 'Jersey25', 'Inter', sans-serif;
animation: fadeInUp 1s ease-out 1.3s both;
}
.flow-item {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 3rem;
padding: 3rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 2px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
animation: fadeInUp 1s ease-out both;
}
.flow-item:nth-child(2) { animation-delay: 0.4s; }
.flow-item:nth-child(4) { animation-delay: 0.6s; }
.flow-item:nth-child(6) { animation-delay: 0.8s; }
.flow-item:nth-child(8) { animation-delay: 1.0s; }
.flow-item:nth-child(10) { animation-delay: 1.2s; }
.flow-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
transition: all 0.3s ease;
}
.flow-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
}
.flow-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 1);
border-color: var(--sportzey-black);
}
.flow-item:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black-light), var(--sportzey-black));
}
.flow-icon {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sportzey-black) !important;
color: var(--white);
border-radius: 50%;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.4);
animation: iconFloat 3s ease-in-out infinite;
flex-shrink: 0;
transition: all 0.3s ease;
}
.flow-item:hover .flow-icon {
transform: scale(1.1);
box-shadow: 0 20px 45px rgba(26, 26, 26, 0.5);
}
.flow-content {
flex: 1;
}
.flow-content h3 {
color: var(--sportzey-black);
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1.2;
transition: all 0.3s ease;
}
.flow-item:hover .flow-content h3 {
color: var(--sportzey-black-light);
transform: translateX(5px);
}
.flow-content p {
color: var(--sportzey-black);
line-height: 1.7;
font-size: 1.2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.flow-item:hover .flow-content p {
color: var(--sportzey-black);
}
/* Feature Tags */
.feature-tags {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-start;
}
.flow-item:nth-child(even) .feature-tags {
justify-content: flex-end;
}
.feature-tag {
background: rgba(26, 26, 26, 0.1);
color: var(--sportzey-black);
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid rgba(26, 26, 26, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
transition: all 0.3s ease;
}
.feature-tag:hover {
background: var(--sportzey-black) !important;
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(26, 26, 26, 0.3);
}
.flow-connector {
width: 6px;
height: 80px;
background: linear-gradient(to bottom, var(--sportzey-black), var(--sportzey-black-light));
margin: 0 auto 3rem auto;
border-radius: 3px;
position: relative;
animation: fadeInScale 1s ease-out both;
}
.flow-connector::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: var(--sportzey-black) !important;
border-radius: 50%;
box-shadow: 0 0 25px rgba(26, 26, 26, 0.6);
animation: pulseGlow 2s ease-in-out infinite;
}
/* Features Summary */
.features-summary {
margin-top: 5rem;
}
.summary-title {
text-align: center;
color: var(--sportzey-black);
font-size: 2.5rem;
margin-bottom: 3rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.9);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.feature-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 1);
border-color: var(--sportzey-black);
}
.feature-card .feature-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
display: block;
animation: iconPulse 2s ease-in-out infinite;
}
.feature-card h4 {
color: var(--sportzey-black);
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-card p {
color: var(--sportzey-black);
line-height: 1.6;
font-size: 1rem;
margin: 0;
}
/* Sports Section */
.sports-section {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 6rem 0;
position: relative;
}
.sports-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.sports-section .container {
position: relative;
z-index: 1;
}
.sports-section .section-title {
text-align: center;
margin-bottom: 1rem;
}
.sports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 1;
align-items: stretch;
}
.sport-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.sport-card:hover {
transform: translateY(-15px) scale(1.03);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.sport-header {
position: relative;
height: 250px;
overflow: hidden;
background: var(--sportzey-black) !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sport-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
max-width: 70%;
max-height: 70%;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: brightness(0) invert(1);
}
.sport-card:hover .sport-image {
transform: scale(1.15) rotate(2deg);
}
.sport-badge {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.sport-body {
padding: 2.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.sport-body h3 {
color: var(--sportzey-black);
font-size: 2rem;
margin-bottom: 1.5rem;
text-align: center;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.sport-body p {
color: var(--sportzey-black);
line-height: 1.7;
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.1rem;
flex-grow: 0;
}
.sport-features {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 1.5rem;
justify-content: center;
flex-shrink: 0;
}
.feature {
background: rgba(26, 26, 26, 0.1);
color: var(--sportzey-black);
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid rgba(26, 26, 26, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sport-description {
margin-bottom: 2rem;
flex-grow: 1;
}
.sport-description p {
color: var(--sportzey-black);
line-height: 1.6;
font-size: 1rem;
text-align: center;
margin: 0;
font-style: italic;
}
.sport-btn {
width: 100%;
background: var(--sportzey-black) !important;
color: var(--white);
border: none;
padding: 1.2rem 2rem;
border-radius: 25px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 25px rgba(26, 26, 26, 0.3);
margin-top: auto;
flex-shrink: 0;
}
.sport-btn:hover {
background: var(--sportzey-black-light);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 30px rgba(26, 26, 26, 0.4);
}
/* CTA Section */
.cta-section {
background: var(--sportzey-black) !important;
color: var(--white);
padding: 6rem 0;
text-align: center;
position: relative;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.cta-content h2 {
color: var(--sportzey-black) !important;
font-size: 3.5rem;
margin-bottom: 1.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
text-shadow: none !important;
}
.cta-content p {
color: var(--sportzey-beige) !important;
text-shadow: none !important;
font-size: 1.4rem;
margin-bottom: 3rem;
font-weight: 600;
}
.cta-actions {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.cta-btn {
background: var(--sportzey-beige);
color: var(--sportzey-black);
padding: 1.5rem 3rem;
border-radius: 50px;
font-size: 1.3rem;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
border: 3px solid var(--sportzey-beige);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 70px;
min-width: 250px;
}
.cta-btn:hover {
background: transparent;
color: var(--sportzey-beige);
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
border-color: var(--sportzey-beige);
}
.btn-large {
padding: 1.2rem 3rem;
font-size: 1.2rem;
font-weight: 800;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 1.5rem;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
padding: 0 1.5rem;
}
.hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2.5rem;
}
.hero-buttons {
padding: 2rem 0 4rem 0;
}
.hero-buttons-content {
gap: 1.5rem;
flex-direction: column;
align-items: center;
padding: 0 1rem;
}
.hero-buttons .btn {
min-width: 280px;
padding: 1.3rem 2.5rem;
font-size: 1rem;
}
.sports-grid {
grid-template-columns: 1fr;
}
.why-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.data-visualization {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.data-point {
padding: 3rem 2rem;
}
.data-circle {
width: 110px;
height: 110px;
}
.data-number {
font-size: 2.2rem;
}
.data-label {
font-size: 1rem;
}
.data-source {
font-size: 0.85rem;
}
.benefit-row {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.solution-infographic {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.transformation-showcase {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.transformation-item {
padding: 2rem 1.5rem;
}
.before-after {
gap: 1.5rem;
}
.before-icon, .after-icon {
width: 50px;
height: 50px;
}
.sportzey-cta {
padding: 2rem;
}
.cta-content h4 {
font-size: 1.6rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.cta-btn {
min-width: 200px;
}
.narrative-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.why-sportzey .section-title {
font-size: 3rem;
}
.why-sportzey {
padding: 4rem 0;
border-radius: 20px;
margin: 0.5rem 0;
}
.problem-narrative, .solution-narrative {
padding: 2rem 1rem;
margin-bottom: 4rem;
border-radius: 20px;
}
.narrative-title {
font-size: 2.5rem;
}
.narrative-subtitle {
font-size: 1.1rem;
}
.narrative-icon {
width: 70px;
height: 70px;
margin-bottom: 2rem;
}
.data-visualization {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.data-point {
padding: 2rem 1rem;
border-radius: 20px;
}
.data-circle {
width: 80px;
height: 80px;
}
.data-number {
font-size: 1.8rem;
}
.data-label {
font-size: 1rem;
}
.benefits-infographic {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefit-item {
padding: 2rem 1rem;
border-radius: 20px;
}
.benefit-icon {
width: 60px;
height: 60px;
}
.benefit-number {
font-size: 1.8rem;
}
.narrative-conclusion {
padding: 1.5rem 2rem;
border-radius: 30px;
transform: none;
}
.narrative-conclusion p {
font-size: 1.2rem;
}
.data-circle {
width: 80px;
height: 80px;
}
.data-number {
font-size: 1.8rem;
}
/* Old crisis sections removed - replaced with new narrative design above */
/* Old story sections removed - replaced with new dynamic design above */
/* Old corporate sections removed - replaced with athletic story-driven design above */
.hero {
padding: 4rem 0;
min-height: 70vh;
}
.mission, .why-sportzey, .what-offers, .sports-section, .cta-section {
padding: 4rem 0;
}
.mission {
margin-top: -1rem;
}
.mission-content, .cta-content {
padding: 0 1.5rem;
}
.flow-item {
flex-direction: column !important;
text-align: center !important;
gap: 2rem;
padding: 2rem;
}
.flow-icon {
width: 100px;
height: 100px;
}
.flow-content h3 {
font-size: 1.6rem;
}
.flow-content p {
font-size: 1.1rem;
}
.feature-tags {
justify-content: center !important;
}
.features-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.summary-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.comprehensive-flow {
margin-bottom: 3rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.hero-content {
padding: 0 1rem;
}
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.sport-header {
height: 200px;
}
.sport-body {
padding: 2rem;
}
.why-card {
padding: 2rem 1.5rem;
}
.data-visualization {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.data-point {
padding: 2.5rem 1.5rem;
}
.data-circle {
width: 90px;
height: 90px;
}
.data-number {
font-size: 2rem;
max-width: 70px;
}
.data-label {
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.data-source {
font-size: 0.8rem;
margin-top: 0.3rem;
}
.benefit-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.solution-infographic {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.narrative-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.why-sportzey .section-title {
font-size: 2.5rem;
}
.data-point, .benefit-item, .solution-item {
padding: 1.5rem 1rem;
}
.narrative-conclusion {
padding: 1rem 1.5rem;
transform: none;
}
.narrative-conclusion p {
font-size: 1.1rem;
}
.data-visual {
flex-direction: column;
gap: 1rem;
}
.data-circle {
width: 70px;
height: 70px;
}
.data-number {
font-size: 1.5rem;
}
.benefit-visual {
flex-direction: column;
gap: 1rem;
}
.benefit-data {
text-align: center;
}
.crisis-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefit-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.bridge-features {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.crisis-title, .solution-title, .bridge-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.why-sportzey .section-title {
font-size: 2.5rem;
}
/* Old crisis and story sections removed - replaced with new narrative design above */
/* Old story sections removed - replaced with new dynamic design above */
/* Old corporate sections removed - replaced with athletic story-driven design above */
.logo-hero {
width: 150px;
height: 150px;
}
.mission-content, .cta-content {
padding: 0 1rem;
}
.hero-buttons {
padding: 1.5rem 0 3rem 0;
}
.hero-buttons .btn {
min-width: 260px;
padding: 1.2rem 2rem;
font-size: 0.95rem;
letter-spacing: 1px;
}
.transformation-showcase {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.transformation-item {
padding: 1.5rem 1rem;
}
.before-after {
flex-direction: column;
gap: 1rem;
}
.arrow {
transform: rotate(90deg);
font-size: 1.5rem;
}
.before-icon, .after-icon {
width: 45px;
height: 45px;
}
.sportzey-cta {
padding: 1.5rem;
margin: 0 1rem;
}
.cta-content h4 {
font-size: 1.4rem;
}
.cta-content p {
font-size: 1rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cta-btn {
min-width: 180px;
padding: 1rem 2rem;
font-size: 0.9rem;
}
}
/* Old slide-in animations removed - replaced with new dynamic design above */
/* Enhanced Mobile Sports Grid Optimization */
@media (max-width: 768px) {
.sports-grid {
grid-template-columns: 1fr !important;
gap: 2rem;
padding: 0 1rem;
}
.sport-card {
margin: 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.sport-header {
height: 180px;
}
.sport-body {
padding: 1.5rem;
}
.sport-body h3 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
}
.sport-body p {
font-size: 1rem;
line-height: 1.4;
margin-bottom: 1rem;
}
.sport-features {
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1rem;
}
.feature {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
border-radius: 12px;
}
.sport-description p {
font-size: 0.9rem;
line-height: 1.5;
}
.sport-btn {
width: 100%;
max-width: 280px;
padding: 1rem 1.5rem;
font-size: 1rem;
margin: 0 auto;
display: block;
}
}
@media (max-width: 480px) {
.sports-grid {
gap: 1.5rem;
padding: 0 0.5rem;
}
.sport-header {
height: 150px;
}
.sport-body {
padding: 1.2rem;
}
.sport-body h3 {
font-size: 1.2rem;
}
.sport-body p {
font-size: 0.9rem;
}
.sport-description p {
font-size: 0.85rem;
line-height: 1.4;
}
.sport-btn {
padding: 0.8rem 1.2rem;
font-size: 0.9rem;
}
.feature {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}
/* Animations */
@keyframes iconBounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-12px);
}
60% {
transform: translateY(-6px);
}
}
/* Sportzey Hero Section - Integrated with Website Design */
.sportzey-hero {
text-align: center;
background: var(--sportzey-beige);
padding: 4rem 0;
margin: 0;
position: relative;
overflow: hidden;
animation: fadeInUp 1s ease-out 0.6s both;
/* Seamless flow from solution narrative */
}
.sportzey-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sportzey-beige);
z-index: -1;
}
.sportzey-hero .container {
position: relative;
z-index: 1;
}
.hero-narrative {
margin-bottom: 4rem;
text-align: center;
animation: fadeInUp 1s ease-out 0.8s both;
}
.hero-icon {
width: 80px;
height: 80px;
margin: 0 auto 2rem;
color: var(--sportzey-black);
opacity: 0.9;
animation: iconFloat 3s ease-in-out infinite, fadeInScale 1s ease-out 1.0s both;
display: flex;
align-items: center;
justify-content: center;
}
.hero-title {
font-size: 2.8rem;
color: var(--sportzey-black);
margin-bottom: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1.2;
text-align: center;
animation: fadeInUp 1s ease-out 1.1s both;
/* Consistent with narrative titles */
}
.hero-subtitle {
font-size: 1.3rem;
color: var(--sportzey-black);
font-weight: 500;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.4;
text-align: center;
animation: fadeInUp 1s ease-out 1.2s both;
}
.transformation-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
justify-items: center;
}
.transformation-item {
background: rgba(245, 245, 220, 0.95);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 1px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInUp 1s ease-out both;
}
.transformation-item:nth-child(1) { animation-delay: 1.3s; }
.transformation-item:nth-child(2) { animation-delay: 1.4s; }
.transformation-item:nth-child(3) { animation-delay: 1.5s; }
.transformation-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--sportzey-black) !important;
border-radius: 2px 2px 0 0;
transition: all 0.3s ease;
}
.transformation-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(26, 26, 26, 0.2);
border-color: var(--sportzey-black);
background: rgba(232, 232, 208, 0.98);
animation: pulseGlow 2s ease-in-out infinite;
}
.transformation-item:hover::before {
height: 6px;
background: linear-gradient(90deg, var(--sportzey-black), var(--sportzey-black-light));
}
.transformation-visual {
margin-bottom: 2.5rem;
width: 100%;
text-align: center;
transition: all 0.3s ease;
}
.transformation-item:hover .transformation-visual {
transform: translateY(-5px);
}
.before-after {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
width: 100%;
}
.before, .after {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
transition: all 0.3s ease;
}
.before-icon, .after-icon {
width: 60px;
height: 60px;
color: var(--sportzey-black);
opacity: 0.7;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.after-icon {
color: var(--sportzey-black);
opacity: 1;
transform: scale(1.1);
}
.transformation-item:hover .before-icon {
transform: scale(0.9);
opacity: 0.5;
}
.transformation-item:hover .after-icon {
transform: scale(1.2);
animation: iconBounce 1s ease-in-out infinite;
}
.before-label, .after-label {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--sportzey-black);
text-align: center;
transition: all 0.3s ease;
}
.after-label {
color: var(--sportzey-black);
font-weight: 700;
}
.transformation-item:hover .before-label {
opacity: 0.6;
}
.transformation-item:hover .after-label {
color: var(--sportzey-black-light);
transform: scale(1.1);
}
.arrow {
font-size: 2rem;
color: var(--sportzey-black);
font-weight: 700;
animation: arrowPulse 2s ease-in-out infinite;
text-align: center;
transition: all 0.3s ease;
}
.transformation-item:hover .arrow {
transform: scale(1.3);
color: var(--sportzey-black-light);
}
.transformation-content {
width: 100%;
text-align: center;
transition: all 0.3s ease;
}
.transformation-item:hover .transformation-content {
transform: translateY(-3px);
}
.transformation-content h4 {
color: var(--sportzey-black);
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
text-align: center;
transition: all 0.3s ease;
}
.transformation-item:hover .transformation-content h4 {
color: var(--sportzey-black-light);
transform: scale(1.05);
}
.transformation-content p {
color: var(--sportzey-black);
line-height: 1.6;
font-size: 1.1rem;
opacity: 0.9;
text-align: center;
transition: all 0.3s ease;
}
.transformation-item:hover .transformation-content p {
opacity: 1;
color: var(--sportzey-black);
}
.sportzey-cta {
background: var(--sportzey-black) !important;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.2);
position: relative;
overflow: hidden;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
animation: fadeInScale 1s ease-out 1.6s both;
transition: all 0.4s ease;
}
.sportzey-cta:hover {
transform: scale(1.02);
box-shadow: 0 25px 50px rgba(26, 26, 26, 0.3);
}
.cta-content {
position: relative;
z-index: 1;
text-align: center;
}
.cta-content h4 {
color: white;
margin-bottom: 1rem;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
text-align: center;
transition: all 0.3s ease;
}
.sportzey-cta:hover .cta-content h4 {
transform: scale(1.05);
}
.cta-content p {
color: rgba(255, 255, 255, 1);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
font-size: 1.2rem;
margin-bottom: 2rem;
line-height: 1.5;
text-align: center;
transition: all 0.3s ease;
}
.sportzey-cta:hover .cta-content p {
color: white;
}
.cta-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.cta-btn {
padding: 1.2rem 2.5rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 2px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.cta-btn:hover::before {
left: 100%;
}
.cta-btn.primary {
background: white;
color: var(--sportzey-black);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.cta-btn.primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
background: var(--sportzey-beige);
color: var(--sportzey-black);
}
.cta-btn.secondary {
background: transparent;
color: var(--sportzey-black);
border-color: rgba(255, 255, 255, 0.3);
}
.cta-btn.secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
color: white;
}
/* Athletic Icons */
.athletic-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}
/* Animations */
@keyframes arrowPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
@keyframes iconFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Features Showcase - Sports Team Lineup Style */
.features-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2.5rem;
margin-bottom: 5rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.feature-card {
background: rgba(255, 255, 255, 0.95);
padding: 3rem 2.5rem;
border-radius: 25px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(20px);
border: 2px solid rgba(26, 26, 26, 0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 320px;
animation: fadeInUp 1s ease-out both;
}
.feature-card:nth-child(1) { animation-delay: 0.3s; }
.feature-card:nth-child(2) { animation-delay: 0.4s; }
.feature-card:nth-child(3) { animation-delay: 0.5s; }
.feature-card:nth-child(4) { animation-delay: 0.6s; }
.feature-card:nth-child(5) { animation-delay: 0.7s; }
.feature-card:nth-child(6) { animation-delay: 0.8s; }
.feature-card.primary {
border-left: 4px solid var(--sportzey-black);
}
.feature-card.secondary {
border-left: 4px solid var(--sportzey-black-light);
}
.feature-card:hover {
transform: translateY(-15px) rotateX(5deg) rotateY(2deg);
box-shadow: 0 35px 70px rgba(26, 26, 26, 0.2);
border-color: var(--sportzey-black);
background: rgba(255, 255, 255, 0.98);
}
/* Feature Icon Wrapper with Sketch Background */
.feature-icon-wrapper {
position: relative;
width: 100px;
height: 100px;
margin-bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.sketch-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
border-radius: 50%;
opacity: 0.8;
transition: all 0.3s ease;
}
.feature-card:hover .sketch-background {
opacity: 1;
transform: scale(1.1);
}
.feature-icon {
position: relative;
z-index: 1;
width: 80px;
height: 80px;
color: var(--sportzey-black);
opacity: 0.9;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
color: var(--sportzey-black-light);
}
.sport-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15));
}
/* Feature Content */
.feature-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.feature-title {
color: var(--sportzey-black);
margin-bottom: 1rem;
font-size: 2.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1.2;
font-family: 'Jersey25', 'Inter', sans-serif;
transition: all 0.3s ease;
}
.feature-card:hover .feature-title {
color: var(--sportzey-black-light);
transform: scale(1.05);
}
.feature-description {
color: var(--sportzey-black);
line-height: 1.6;
font-size: 1.1rem;
margin: 0;
max-width: 280px;
transition: all 0.3s ease;
}
.feature-card:hover .feature-description {
color: var(--sportzey-black);
}
.feature-description strong {
color: var(--sportzey-black);
font-weight: 700;
}
/* Feature Badge */
.feature-badge {
background: var(--sportzey-black) !important;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(26, 26, 26, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card:hover .feature-badge {
background: var(--sportzey-black-light);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(26, 26, 26, 0.3);
}
/* Section Divider - Chalk-like Field Markings */
.section-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 4rem 0;
position: relative;
z-index: 1;
}
.chalk-line {
width: 80px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--sportzey-black), transparent);
border-radius: 2px;
opacity: 0.6;
animation: fadeInScale 1s ease-out 1.0s both;
}
.chalk-dot {
width: 12px;
height: 12px;
background: var(--sportzey-black) !important;
border-radius: 50%;
opacity: 0.8;
animation: fadeInScale 1s ease-out 1.1s both;
}
/* Features CTA */
.features-cta {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
animation: fadeInUp 1s ease-out 1.2s both;
}
.cta-title {
color: var(--sportzey-black);
font-size: 2.5rem;
margin-bottom: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1.2;
font-family: 'Jersey25', 'Inter', sans-serif;
text-shadow: none !important;
}
.cta-subtitle {
color: var(--sportzey-black);
font-size: 1.3rem;
margin-bottom: 2.5rem;
line-height: 1.5;
font-weight: 500;
}
.cta-actions {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
/* Style buttons in features-cta to match hero buttons */
.features-cta .btn {
min-width: 220px !important;
font-size: 1.1rem !important;
padding: 1.4rem 3rem !important;
border-radius: 60px !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.3) !important;
border: 3px solid transparent !important;
backdrop-filter: blur(10px) !important;
margin: 0 auto !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 60px !important;
cursor: pointer !important;
}
.features-cta .btn-primary {
background: var(--sportzey-black) !important;
color: var(--white) !important;
border-color: var(--sportzey-black) !important;
}
.features-cta .btn-primary:hover {
transform: translateY(-5px) !important;
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.4) !important;
background: var(--sportzey-black-light) !important;
border-color: var(--sportzey-black-light) !important;
}
.features-cta .btn-secondary {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--sportzey-black) !important;
border-color: var(--sportzey-black) !important;
}
.features-cta .btn-secondary:hover {
background: var(--sportzey-black) !important;
color: var(--white) !important;
transform: translateY(-5px) !important;
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.35) !important;
border-color: var(--sportzey-black-light) !important;
}
/* Gym Card Special Styling */
.sport-card.gym {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 220, 0.9) 100%);
border: 2px solid var(--sportzey-black);
}
.sport-card.gym .sport-header {
background: linear-gradient(135deg, var(--sportzey-black) 0%, #2a2a2a 100%);
}
.sport-card.gym .sport-badge {
background: var(--sportzey-beige);
color: var(--sportzey-black);
font-weight: 800;
border: 2px solid var(--sportzey-black);
}
.sport-card.gym:hover {
transform: translateY(-20px) scale(1.05);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.25);
}
/* Highlights Icon - Larger Size */
.highlights-card .highlights-icon {
width: 120% !important;
height: 120% !important;
transform: scale(1.2);
}
/* New City Icon - Make it visible and properly sized */
.flow-item .flow-icon img.sport-icon {
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) invert(1); /* Make black icons white */
}
/* Specific styling for new_city icon */
.flow-item:first-child .flow-icon img.sport-icon {
filter: none; /* Keep original colors for new_city.png */
max-width: 80%;
max-height: 80%;
}
/* ===================================
MOBILE RESPONSIVENESS FOR "WHY SPORTS CHANGE EVERYTHING" SECTION
=================================== */
@media (max-width: 768px) {
/* Solution Narrative Mobile Adjustments */
.solution-narrative {
padding: 2.5rem 1.5rem;
margin-bottom: 4rem;
border-radius: 16px;
}
.solution-narrative .narrative-header {
text-align: center;
margin-bottom: 2rem;
}
.solution-narrative .narrative-title {
font-size: clamp(1.8rem, 5vw, 2.2rem);
line-height: 1.3;
margin-bottom: 1rem;
text-align: center;
}
.solution-narrative .narrative-subtitle {
font-size: clamp(1rem, 3.5vw, 1.1rem);
text-align: center;
margin-bottom: 2rem;
line-height: 1.5;
}
/* Benefits Infographic Mobile Layout */
.benefits-infographic {
gap: 2rem;
margin-bottom: 3rem;
}
.benefit-row {
grid-template-columns: 1fr;
gap: 2rem;
width: 100%;
}
.benefit-item {
padding: 2rem 1.5rem;
border-radius: 16px;
max-width: 100%;
width: 100%;
text-align: center;
margin: 0 auto;
}
/* Benefit Visual Mobile Adjustments */
.benefit-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.benefit-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.benefit-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.athletic-icon {
width: 60px;
height: 60px;
}
/* Benefit Data Mobile Adjustments */
.benefit-data {
text-align: center;
margin-bottom: 1rem;
}
.benefit-number {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 800;
margin-bottom: 0.5rem;
text-align: center;
}
.benefit-metric {
font-size: clamp(0.8rem, 2.5vw, 1rem);
font-weight: 700;
text-align: center;
line-height: 1.3;
max-width: 100%;
word-wrap: break-word;
}
/* Benefit Content Mobile Adjustments */
.benefit-content {
text-align: center;
width: 100%;
}
.benefit-content p {
font-size: clamp(0.9rem, 3vw, 1rem);
line-height: 1.5;
margin-bottom: 0.75rem;
text-align: center;
}
.benefit-content .source {
font-size: clamp(0.75rem, 2.5vw, 0.85rem);
text-align: center;
opacity: 0.8;
}
/* Narrative Conclusion Mobile Adjustments */
.solution-narrative .narrative-conclusion {
margin-top: 2rem;
padding: 1.5rem 1rem;
border-radius: 12px;
}
.solution-narrative .narrative-conclusion p {
font-size: clamp(1rem, 3.5vw, 1.2rem);
text-align: center;
line-height: 1.4;
margin: 0;
}
}
@media (max-width: 480px) {
/* Extra Small Mobile Adjustments */
.solution-narrative {
padding: 2rem 1rem;
margin-bottom: 3rem;
}
.solution-narrative .narrative-title {
font-size: clamp(1.6rem, 6vw, 1.8rem);
}
.solution-narrative .narrative-subtitle {
font-size: clamp(0.95rem, 3vw, 1rem);
}
/* Benefits Infographic Extra Small Adjustments */
.benefits-infographic {
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.benefit-row {
gap: 1.5rem;
}
.benefit-item {
padding: 1.75rem 1.25rem;
border-radius: 14px;
}
/* Benefit Visual Extra Small Adjustments */
.benefit-icon {
width: 55px;
height: 55px;
}
.athletic-icon {
width: 55px;
height: 55px;
}
/* Benefit Data Extra Small Adjustments */
.benefit-number {
font-size: clamp(1.4rem, 4.5vw, 1.8rem);
}
.benefit-metric {
font-size: clamp(0.75rem, 2.2vw, 0.9rem);
}
/* Benefit Content Extra Small Adjustments */
.benefit-content p {
font-size: clamp(0.85rem, 2.8vw, 0.95rem);
}
.benefit-content .source {
font-size: clamp(0.7rem, 2.2vw, 0.8rem);
}
/* Narrative Conclusion Extra Small Adjustments */
.solution-narrative .narrative-conclusion {
margin-top: 1.75rem;
padding: 1.25rem 0.75rem;
}
.solution-narrative .narrative-conclusion p {
font-size: clamp(0.95rem, 3vw, 1.1rem);
}
}