187 lines
3.5 KiB
SCSS
187 lines
3.5 KiB
SCSS
@use 'globals';
|
|
@use 'variables' as *;
|
|
@use 'mixins' as *;
|
|
|
|
// Hero-specific button extensions
|
|
%hero-button-base {
|
|
@extend %button-base;
|
|
padding: $spacing-sm $spacing-xl;
|
|
font-size: $spacing-md;
|
|
line-height: 1.5;
|
|
border-radius: $border-radius-sm;
|
|
gap: $spacing-xs;
|
|
box-sizing: border-box;
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 3px var(--box-shadow-hover);
|
|
}
|
|
}
|
|
|
|
.hero-section {
|
|
@include flex-center;
|
|
background: var(--hero-background);
|
|
|
|
&__container {
|
|
max-width: 800px;
|
|
width: 100%;
|
|
text-align: center;
|
|
@include flex-center;
|
|
flex-direction: column;
|
|
gap: $spacing-xl;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
@include gradient-text(var(--gradient-text));
|
|
}
|
|
|
|
&__description {
|
|
font-size: 1.2rem;
|
|
line-height: 1.6;
|
|
color: var(--color-text-muted);
|
|
max-width: 600px;
|
|
margin: 0;
|
|
}
|
|
|
|
&__buttons {
|
|
@include flex-center;
|
|
gap: $spacing-lg;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&__button {
|
|
@extend %hero-button-base;
|
|
|
|
&--primary {
|
|
background: var(--gradient-primary);
|
|
color: var(--color-background);
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--box-shadow-sm);
|
|
filter: brightness(1.1);
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
border: 2px solid $color-primary;
|
|
padding: calc(#{$spacing-sm} - 2px) $spacing-xl;
|
|
|
|
&:hover {
|
|
background: $color-primary;
|
|
color: var(--color-background);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--box-shadow-sm);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__button-icon {
|
|
width: $spacing-md;
|
|
height: $spacing-md;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: $spacing-xl;
|
|
margin-top: $spacing-3xl;
|
|
|
|
@include globals.desktop-only {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
&__stat-item {
|
|
text-align: center;
|
|
padding: $spacing-md;
|
|
border-radius: $border-radius-md;
|
|
|
|
&--1 {
|
|
background: var(--stat-primary-bg);
|
|
|
|
.hero-section__stat-value {
|
|
color: var(--stat-primary-value);
|
|
}
|
|
.hero-section__stat-label {
|
|
color: var(--stat-primary-label);
|
|
}
|
|
}
|
|
|
|
&--2 {
|
|
background: var(--stat-secondary-bg);
|
|
|
|
.hero-section__stat-value {
|
|
color: var(--stat-secondary-value);
|
|
}
|
|
.hero-section__stat-label {
|
|
color: var(--stat-secondary-label);
|
|
}
|
|
}
|
|
|
|
&--3 {
|
|
background: var(--stat-tertiary-bg);
|
|
|
|
.hero-section__stat-value {
|
|
color: var(--stat-tertiary-value);
|
|
}
|
|
.hero-section__stat-label {
|
|
color: var(--stat-tertiary-label);
|
|
}
|
|
}
|
|
|
|
&--4 {
|
|
background: var(--stat-quaternary-bg);
|
|
|
|
.hero-section__stat-value {
|
|
color: var(--stat-quaternary-value);
|
|
}
|
|
.hero-section__stat-label {
|
|
color: var(--stat-quaternary-label);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__stat-value {
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.25rem;
|
|
display: block;
|
|
}
|
|
|
|
&__stat-label {
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
// Mobile responsiveness
|
|
@include globals.mobile-only {
|
|
.hero-section {
|
|
&__title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
&__description {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
&__buttons {
|
|
flex-direction: column;
|
|
gap: $spacing-md;
|
|
}
|
|
|
|
&__button {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
}
|