/** * Highlight Text on Scroll — ported 1:1 from the stellae resource * (highlight-text.md). The GSAP/SplitText mechanics are untouched; this file * only covers section layout, which isn't part of the resource itself. */ .highlight-text { padding: 8rem 0; } .highlight-text-container { text-align: center; width: 100%; max-width: 50em; margin-left: auto; margin-right: auto; } /* REQUESTED ADDITION: logo glyph shown above the title. */ .highlight-text__glyph { width: 3em; height: 3em; display: block; margin: 0 auto 1.5em; } .highlight-text__title { font-family: Spectral, serif; font-size: 3.75em; line-height: 1.2; font-weight: 600; margin-bottom: 0.5em; } .highlight-text__text { font-family: Spectral, serif; font-size: 2em; font-weight: 500; line-height: 1.15; } .highlight-text__cta-wrap { margin-top: 3.5em; display: flex; justify-content: center; } /* btn-bubble-arrow.css's own .btn-group defaults to font-size:2em, sized for a normal-text context — next to this section's much larger headline/body text it read as oversized. Scoped down here rather than editing the component's own (otherwise untouched 1:1) stylesheet. em, not rem: this site's fluid scaling (scaling-system.css) only sets font-size on , not — rem is always relative to the root, so a rem value here would stay visually fixed while the headline/body text around it (both in em) keep scaling with viewport width. em inherits the same fluid context and tracks proportionally at every breakpoint. */ .highlight-text__cta-wrap .btn-group { font-size: 1.5em; } /* Initial hidden state is set by highlight-text.js via gsap.set() before the scroll timeline runs (autoAlpha + y offset), matching this site's existing JS-driven-initial-state convention (logo-wall.js, underlay-nav.js) rather than duplicating the same values here in CSS. */ @media screen and (max-width: 767px) { .highlight-text__title { font-size: 2.25em; } .highlight-text__text { font-size: 1.75em; } }