.page-hero {
padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
background: linear-gradient(180deg, var(--color-primary-bg) 0%, var(--color-bg) 100%);
text-align: center;
}
.page-hero-title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-text);
margin-bottom: var(--space-md);
}
.page-hero-desc {
font-size: 1.1rem;
color: var(--color-text-secondary);
max-width: 640px;
margin: 0 auto;
line-height: 1.6;
}
.team-photo img{
border-radius: var(--radius-lg);
transition: all var(--transition-base);
}
.about-story {
padding: var(--space-2xl) 0;
background: var(--color-bg);
}
.story-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
align-items: center;
}
.story-title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
color: var(--color-text);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.story-text p {
font-size: 0.95rem;
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.story-text p:last-child {
margin-bottom: 0;
}
.story-text strong {
color: var(--color-primary);
font-weight: 600;
}
.story-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.stat-card {
background: var(--color-primary-bg);
border: 1px solid var(--color-primary-light);
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-lg);
text-align: center;
transition: all var(--transition-base);
}
.stat-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.stat-number {
display: block;
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: var(--color-primary);
line-height: 1.1;
margin-bottom: 0.3rem;
}
.stat-label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.about-values {
padding: var(--space-2xl) 0;
background: var(--color-bg-alt);
}
.values-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.value-card {
background: var(--color-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: all var(--transition-base);
}
.value-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.value-card::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: var(--color-primary);
border-radius: 2px;
margin-bottom: var(--space-md);
}
.value-title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.value-card p {
font-size: 0.88rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.about-ops {
padding: var(--space-2xl) 0;
background: var(--color-bg);
}
.ops-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.section-label--dark {
color: var(--color-primary);
}
.ops-title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
color: var(--color-text);
margin-bottom: var(--space-sm);
line-height: 1.2;
}
.ops-subtitle {
font-size: 1rem;
color: var(--color-text-secondary);
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
.ops-gallery {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
max-width: var(--container-max);
margin: 0 auto;
}
@media (min-width: 768px) {
.ops-gallery {
grid-template-columns: repeat(3, 1fr);
}
}
.ops-photo {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 3 / 4;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
height: 450px;
width: 100%;
}
.ops-photo:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.ops-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.ops-photo:hover img {
transform: scale(1.05);
}
.ops-photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient( to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.47) 40%, transparent 60% );
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-lg);
transition: background var(--transition-base);
}
.ops-photo:hover .ops-photo-overlay {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.25) 50%,
transparent 70%
);
}
.ops-photo-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 800;
color: #fff;
margin-bottom: 0.15rem;
line-height: 1.3;
}
.ops-photo-desc {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
max-width: 90%;
}
.about-process {
padding: var(--space-2xl) 0;
background: var(--color-bg-alt);
}
.about-steps {
display: flex;
flex-direction: column;
gap: var(--space-xl);
max-width: 800px;
margin: 0 auto;
}
.about-step {
text-align: center;
background: var(--color-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: all var(--transition-base);
}
.about-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 800;
margin-bottom: var(--space-md);
}
.about-step-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.about-step p {
font-size: 0.9rem;
color: var(--color-text-secondary);
line-height: 1.6;
max-width: 360px;
margin: 0 auto;
}
.about-step-divider {
display: none;
}
.about-cta {
padding: var(--space-2xl) 0 var(--space-3xl);
background: var(--color-bg);
}
.about-cta-card {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-xl);
text-align: center;
box-shadow: var(--shadow-xl);
}
.about-cta-title {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
color: #fff;
line-height: 1.25;
margin-bottom: var(--space-md);
}
.about-cta-title .text-accent {
color: #60A5FA;
}
.about-cta-desc {
font-size: 1.05rem;
color: rgba(255,255,255,0.8);
max-width: 520px;
margin: 0 auto var(--space-lg);
line-height: 1.6;
}
.about-cta-actions {
display: flex;
flex-direction: column;
gap: var(--space-md);
justify-content: center;
align-items: center;
}
.about-cta-actions .btn-outline {
color: #fff;
border-color: rgba(255,255,255,0.5);
}
.about-cta-actions .btn-outline:hover {
background: #fff;
color: var(--color-primary);
border-color: #fff;
}
.nav-link.active,
.mobile-nav-link.active {
color: var(--color-primary);
}
@media (min-width: 768px) {
.story-layout {
grid-template-columns: 1.2fr 0.8fr;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-steps {
flex-direction: row;
align-items: flex-start;
gap: 0;
}
.about-step {
flex: 1 1 0;
min-width: 0;
}
.about-step-divider {
display: block;
width: 40px;
height: 2px;
background: var(--color-border);
margin-top: 27px;
flex-shrink: 0;
}
.about-cta-actions {
flex-direction: row;
}
}
@media (min-width: 1024px) {
.values-grid {
grid-template-columns: repeat(3, 1fr);
}
.story-stats {
grid-template-columns: repeat(2, 1fr);
}
.about-steps {
max-width: 1200px;
}
}
@media (max-width: 767px) {
.about-step {
padding: var(--space-md);
}
}
@media (max-width: 360px) {
.about-cta-card {
padding: var(--space-xl) var(--space-lg);
}
}