feat: Enhance pricing section layout with responsive design and improved header structure
This commit is contained in:
@@ -1948,14 +1948,36 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
/* ── 9. Pricing ────────────────────────────────────────────── */
|
||||
.section-header--track {
|
||||
text-align: left;
|
||||
margin-inline: 0;
|
||||
max-width: none;
|
||||
.pricing-track-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
.section-header--track .section-label {
|
||||
font-size: 1rem;
|
||||
letter-spacing: .04em;
|
||||
.pricing-track-header {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
}
|
||||
.pricing-track-header .section-label {
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: .02em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.pricing-track-header h2 {
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.pricing-track-header .lead {
|
||||
font-size: .95rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.pricing-track-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.pricing-track-header {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-grid {
|
||||
|
||||
Reference in New Issue
Block a user