/** * BIG CTA * * Full-bleed photograph, dark gradient over it, everything centred. * * Measured from the 1440 frame (band is 1440x780): 129 top padding, eyebrow, * 33, heading, 33, body, 44, buttons, 35, note, 131 bottom padding. */ @layer components { /* * data-theme="dark" on the section remaps the tokens, but `color` still has * to be re-declared here: it inherits as a computed value, so descendants * would keep the black they inherited from and never re-resolve * --clr-text. Same reason .lounge-feature declares it. */ .big-cta { position: relative; isolation: isolate; /* keeps the z-indexes below local to the band */ overflow: hidden; background-color: var(--clr-bg-deep); /* shows through until the photo loads */ color: var(--clr-text); text-align: center; } /* ---- Photograph + gradient ----------------------------------------- */ .big-cta__media { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; } /* * Measured from the design: 24% black at the top falling to solid black at * 97%. Heavier at the foot than a flat scrim would be, which is what keeps * the note and the buttons legible over a busy crowd while the top of the * photograph stays open. */ .big-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient( to bottom, rgb(0 0 0 / 0.24) 0%, var(--clr-bg-deep) 97% ); pointer-events: none; } /* ---- Content ------------------------------------------------------- */ .big-cta__inner { display: flex; flex-direction: column; align-items: center; } /* * Not the .eyebrow utility: this one has no "///" prefix and runs wider — * 14px at 0.15em against the utility's 12px at 0.1em. */ .big-cta__eyebrow { margin: 0; font-family: var(--font-text); font-size: var(--fs-ui); font-weight: var(--weight-semibold); line-height: var(--lh-ui); letter-spacing: 0.15em; text-transform: uppercase; } .big-cta__title { /* Measured 33px under the eyebrow. */ margin-block: clamp(var(--space-m), 2.3vw, 2.0625rem) 0; font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: var(--track-display-2); font-weight: var(--weight-bold); text-wrap: initial; /* the line break is authored in the field */ } .big-cta__text { /* Measured 33px under the heading, paragraph 688px wide. */ margin-block: clamp(var(--space-m), 2.3vw, 2.0625rem) 0; max-inline-size: 43rem; font-size: var(--fs-body); line-height: var(--lh-body); } .big-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; /* 10px, measured */ /* Measured 44px under the paragraph. */ margin-block-start: clamp(var(--space-l), 3.05vw, 2.75rem); } .big-cta__note { /* Measured 35px under the buttons. */ margin-block: clamp(var(--space-l), 2.45vw, 2.1875rem) 0; font-size: var(--fs-ui); line-height: var(--lh-body); letter-spacing: 0.01em; } .big-cta__note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font; } .big-cta__note a:hover, .big-cta__note a:focus-visible { color: var(--clr-accent); } /* ---- Mobile -------------------------------------------------------- */ @media (max-width: 47.999rem) { /* * Stacked and full width. Two pill buttons side by side at this size * would each be too narrow for their label, and min-inline-size on * .btn--lg would push the pair wider than the screen. */ .big-cta__actions { flex-direction: column; align-self: stretch; } .big-cta__actions .btn { inline-size: 100%; min-inline-size: 0; } } }