/* ============================================================ * Home page - sourced from Figma node 145:537 * ============================================================ */ .pc-home { display: block; position: relative; background: transparent; } /* Front page only - solid orange band on behind a fixed-height hero, body transparent so it bleeds full viewport including scrollbar gutter. */ body.home { background: transparent !important; } html:has(body.home) { background: #fff; scrollbar-color: rgba(28, 28, 25, 0.25) transparent; overflow-x: clip; } body.home { overflow-x: clip; } html:has(body.home)::-webkit-scrollbar { background: transparent; width: 12px; } html:has(body.home)::-webkit-scrollbar-track { background: transparent; } html:has(body.home)::-webkit-scrollbar-thumb { background: rgba(28, 28, 25, 0.3); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } html:has(body.home)::-webkit-scrollbar-thumb:hover { background: rgba(28, 28, 25, 0.5); background-clip: content-box; } /* Reveal pre-hide for HOME-only sections. * Hero excluded: it is always above the fold and is the LCP candidate. * Pre-hiding it pushes Lighthouse LCP by 3-4s. * Footer + newsletter pre-hide lives in base.css (apply on all pages). */ .pc-js .pc-stories__title, .pc-js .pc-stories__carousel, .pc-js .pc-stories__cta > *, .pc-js .pc-quiz__copy > *, .pc-js .pc-quiz__visual > *, .pc-js .pc-features__title, .pc-js .pc-features__row > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(.2,.7,.2,1) var(--pc-reveal-delay, 0ms), transform 0.6s cubic-bezier(.2,.7,.2,1) var(--pc-reveal-delay, 0ms); will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .pc-js .pc-stories__title, .pc-js .pc-stories__carousel, .pc-js .pc-stories__cta > *, .pc-js .pc-quiz__copy > *, .pc-js .pc-quiz__visual > *, .pc-js .pc-features__title, .pc-js .pc-features__row > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========== Hero ========== */ /* Figma 822:3097 - gradient frame is 622px tall extending from y=84 to y=706. * Hero content is only y=84 to y=382, so gradient overlaps stories top ~324px. * Solution: backdrop layer on .pc-home that holds both CSS gradient + WebGL canvas, * positioned at top, height 622px, behind all sections. */ .pc-home__band { position: relative; /* Bleed across the scrollbar gutter so the right edge has no white strip. */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(0px, calc(50vw - 50%)); padding-right: max(0px, calc(50vw - 50%)); } .pc-home__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient( 180deg, #ff6a00 0%, #ff8a3a 15%, #ffb585 30%, #ffd9bf 40%, #fff0e3 47%, #ffffff 55%, #ffffff 100% ); } .pc-home__backdrop::after { display: none; } @keyframes pc-hero-breathe { 0% { transform: translate(-1%, -1%) scale(1); opacity: 1; } 100% { transform: translate(2%, 1.5%) scale(1.05); opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .pc-home__backdrop::after { animation: none; } } .pc-home__backdrop > .pc-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pc-hero__grid { position: absolute; inset: 0; pointer-events: none; color: rgba(255, 255, 255, 0.85); } .pc-hero__grid-base, .pc-hero__grid-bright { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pc-hero__grid-base { opacity: 0.025; } .pc-hero__grid-bright { opacity: 0.18; } .pc-hero { position: relative; z-index: 1; background: transparent; } .pc-hero__inner { position: relative; z-index: 1; max-width: var(--pc-container-max); margin-inline: auto; padding: 80px var(--pc-container-pad) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; } .pc-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pc-font); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--pc-white); margin: 0; } .pc-hero__title { font-family: var(--pc-font); font-weight: 700; font-size: 48px; line-height: 56px; color: var(--pc-white); margin: 8px 0 0; } .pc-hero__sub { font-family: var(--pc-font); font-weight: 600; font-style: italic; font-size: 18px; line-height: 26px; color: var(--pc-white); margin: 16px 0 0; } .pc-hero__stats { display: flex; gap: 0; margin: 64px 0 0; padding: 0; list-style: none; align-items: center; } .pc-hero__stats li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 64px; position: relative; } .pc-hero__stats li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50px; background: rgba(28, 28, 25, 0.18); } .pc-hero__stats strong { font-family: var(--pc-font); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--pc-heading); } .pc-hero__stats span { font-family: var(--pc-font); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--pc-heading); text-transform: uppercase; } /* ========== Stories ========== */ .pc-stories { padding: 80px 0; background: transparent; display: flex; flex-direction: column; gap: 40px; align-items: center; position: relative; z-index: 1; } .pc-stories__head { max-width: var(--pc-container-max); width: 100%; margin: 0 auto; padding: 0 var(--pc-container-pad); text-align: center; } .pc-stories__title { font-family: var(--pc-font); font-weight: 700; font-size: 40px; line-height: 48px; color: var(--pc-heading); margin: 0; } /* Stories carousel - scroll-snap, archive-card style. * Strategy: viewport horizontal padding gives first/last card shadow breathing room. * Vertical shadow handled via padding-block + neg margin-block trick. */ .pc-stories__carousel { position: relative; width: 100%; max-width: var(--pc-container-max); margin-inline: auto; padding: 0 var(--pc-container-pad); } .pc-stories__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-block: 32px; margin-block: -32px; min-width: 0; } .pc-stories__viewport::-webkit-scrollbar { display: none; } .pc-stories__viewport:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 4px; border-radius: 12px; } .pc-stories__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; margin: 0; padding: 0; list-style: none; } .pc-stories__slide { scroll-snap-align: start; min-width: 0; } .pc-stories__slide .pc-archive__card { width: 100%; } .pc-stories__slide .pc-archive__card-meta { width: 100%; min-width: 0; } .pc-stories__slide .pc-archive__card-name { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nav arrows - same fill-sweep + lift treatment as CTA buttons */ .pc-stories__nav { position: absolute; top: calc(50% - 40px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--pc-r); background: var(--pc-white); border: 1.5px solid var(--pc-primary); color: var(--pc-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: 0 4px 16px rgba(255, 106, 0, 0.18); transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), transform .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease; z-index: 2; } .pc-stories__nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pc-primary); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1); } .pc-stories__nav:not(:hover)::before { transform-origin: right center; } .pc-stories__nav:hover:not([disabled]) { color: var(--pc-white); transform: translateY(-50%) translateY(-3px); box-shadow: 0 12px 28px rgba(255, 106, 0, 0.32); } .pc-stories__nav:hover:not([disabled])::before { transform: scaleX(1); transform-origin: left center; } .pc-stories__nav:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; } .pc-stories__nav[disabled] { opacity: 0.35; cursor: not-allowed; } .pc-stories__nav--prev { left: 64px; } .pc-stories__nav--next { right: 64px; } @media (min-width: 1281px) { .pc-stories__nav--prev { left: 76px; } .pc-stories__nav--next { right: 76px; } } /* Pagination dots */ .pc-stories__dots { display: flex; justify-content: center; gap: 4px; margin-top: 16px; } /* WCAG 2.5.5: each interactive control needs >= 24x24px hit area. The dot is * styled visually as an 8px pill via the inner ::before pseudo, while the *