Ivan Fontosh
2bce0027ad
Embed VK Video demo between audience and benefits blocks, with RU/EN copy and a fallback link. Reduce vertical padding by 30% between hero, audience, and video sections. Co-authored-by: Cursor <cursoragent@cursor.com>
105 lines
1.6 KiB
CSS
105 lines
1.6 KiB
CSS
.hero {
|
|
padding: 48px 24px calc(80px * 0.7);
|
|
}
|
|
|
|
.inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
align-items: center;
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content {
|
|
max-width: 520px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
.spark {
|
|
color: var(--color-purple-bright);
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 8px;
|
|
font-size: clamp(40px, 6vw, 56px);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.03em;
|
|
background: linear-gradient(135deg, #fff 0%, #d4cce8 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.tagline {
|
|
margin-bottom: 20px;
|
|
font-size: clamp(20px, 3vw, 26px);
|
|
font-weight: 600;
|
|
color: var(--color-purple-bright);
|
|
}
|
|
|
|
.description {
|
|
margin-bottom: 28px;
|
|
font-size: 17px;
|
|
line-height: 1.65;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.cta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.platforms {
|
|
margin-bottom: 32px;
|
|
font-size: 13px;
|
|
color: var(--color-text-dim);
|
|
}
|
|
|
|
.highlights {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.highlight {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-bg-card);
|
|
}
|
|
|
|
.highlight strong {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.highlight span {
|
|
font-size: 13px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.content {
|
|
max-width: none;
|
|
}
|
|
}
|