.center{ text-align: center; } /* Eyebrow + lede */ .eyebrow{ text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--color-text-mid); margin: 0 0 var(--spacing-3); } /* Hero split */ .ln-hero{ margin-top: var(--spacing-3); background: var(--color-bg); color: var(--color-text); } .ln-hero__copy{ } .ln-hero__frame{ display:flex; justify-content:center; } .frame{ width: min(560px, 40vw); border-radius: 14px; background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg-light) 80%, var(--color-bg)), var(--color-bg)); overflow: hidden; } /* Split layout for features */ .ln-split{ display: grid; gap: var(--gutter); grid-template-columns: 280px 1fr; align-items: start; } .ln-split__aside{ position: sticky; top: var(--spacing-4); align-self: start; } .ln-split__body .measure{ max-width: 70ch; } .cta-row{ margin-top: var(--spacing-2); } /* Section palettes (alternating) */ .ln-section--search{ background: var(--color-accent-300); } .ln-section--newsstand{ background: color-mix(in oklab, var(--color-primary) 18%, var(--color-bg)); } .ln-section--reader{ background: var(--color-bg-light); } .ln-section--editor{ background: var(--color-teal-400); } .ln-section--newsroom{ background: color-mix(in oklab, var(--color-bg-light) 82%, var(--color-bg)); } .ln-section--marketplace{ background: color-mix(in oklab, var(--color-primary) 18%, var(--color-bg)); } .ln-section--unfold{ background: color-mix(in oklab, var(--color-accent-warm) 60%, var(--color-bg)); } /* Motion */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }