/* SFH2026 jumbotron band — full-bleed like the board finder, content capped at 1280 */ .sfh-jumbo { position: relative; overflow: hidden; background: #0c0c0c; color: #fff; display: flex; margin: 0; } .sfh-jumbo-full { min-height: 92vh; } .sfh-jumbo-large { min-height: clamp(440px, 62vh, 585px); } .sfh-jumbo-medium { min-height: clamp(330px, 44vh, 480px); } .sfh-jumbo-small { min-height: clamp(220px, 30vh, 340px); } .sfh-jumbo-media { position: absolute; inset: 0; background-position: center; background-size: cover; } .sfh-jumbo-shade { position: absolute; inset: 0; background: rgba(0,0,0,var(--sfh-shade, .3)); } /* left-aligned band (Figma custom-order CTA): shade fades from dark left to light right */ .sfh-jumbo-align-left .sfh-jumbo-shade { background: linear-gradient(90deg, rgba(0,0,0,calc(var(--sfh-shade, .3) + .25)) 0%, rgba(0,0,0,calc(var(--sfh-shade, .3) * .5)) 75%); } .sfh-jumbo-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: 100%; /* 1320 = 1280 content + 2×20 gutter, so text lands exactly on the .sfh-container edge */ max-width: calc(var(--cms2-max-width, 1280px) + 40px); margin: 0 auto; padding: clamp(28px, 5vw, 72px) 20px; } .sfh-jumbo-align-left .sfh-jumbo-inner { align-items: flex-start; text-align: left; } .sfh-jumbo-align-center .sfh-jumbo-inner { align-items: center; text-align: center; } .sfh-jumbo-align-right .sfh-jumbo-inner { align-items: flex-end; text-align: right; } .sfh-eyebrow-light { color: #F55A67 !important; opacity: .85; } .sfh-jumbo-heading { margin: 0 0 12px; font-size: clamp(38px, 7vw, 72px); font-weight: 800; line-height: 1; text-transform: uppercase; display: flex; flex-direction: column; } .sfh-jumbo-align-center .sfh-jumbo-heading { align-items: center; } .sfh-jumbo-heading-white { color: #fff; } .sfh-jumbo-heading-red { background: radial-gradient(circle at top left, #F55A67 0%, #BE202E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sfh-jumbo-desc { font-size: 17px; line-height: 1.6; max-width: 640px; color: rgba(255,255,255,.88); } /* Flex, so a second button sits beside the first instead of being separated by whatever whitespace the markup happens to carry between two inline s. `flex-wrap` rather than a media query: the pair wraps when the band is narrow or the labels are long, which is the same condition, and it needs no breakpoint to be kept in step with the text sizes above. */ .sfh-jumbo-actions { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 12px; } .sfh-jumbo-align-center .sfh-jumbo-actions { justify-content: center; } .sfh-jumbo-align-right .sfh-jumbo-actions { justify-content: flex-end; } /* Trim the dead space under the LAST heading line. * * The gap here measured only 12px in the box model, yet read far larger: the * heading is all caps, so nothing ever descends below the baseline, but the * line box still reserves the font's full descender (~0.21em in Poppins) plus * its half-leading. That reserved band sits between the red line and the * paragraph and belongs to neither. * * Negative margin in `em`, on the last line only: it scales with the clamp, so * the correction is the same optical amount at 38px as at 100px, and the gap * BETWEEN the two heading lines is untouched -- that one is deliberate. */ .sfh-jumbo-heading > span:last-child { margin-bottom: -0.14em; } /* Phones: let the content set the height. * * The four size classes above are viewport-height fractions, which is a desktop * idea — on a 390x844 phone `full` resolves to 92vh = 776px for a block whose * eyebrow, heading, paragraph and button together need about 320px. The result * was a near-full-screen band of mostly empty photo, and Figma's mobile frame * is roughly 0.85 wide-to-tall where ours was 0.50. * * Dropping the floor and letting the padding do the work lands about 460px at * 390 wide, matching that proportion, and it keeps working when the copy is * longer or shorter rather than pinning a number that only suits this section. * Only .sfh-jumbo-* is touched: the panel layout carries its own .sfh-jpanel-* * heights, and this stylesheet loads only where the sfh2026 jumbotron is used. */ @media (max-width: 760px) { .sfh-jumbo-full, .sfh-jumbo-large, .sfh-jumbo-medium, .sfh-jumbo-small { min-height: 0; } .sfh-jumbo-inner { padding-block: clamp(48px, 14vw, 72px); } } /* Photo for this section, and the mobile one when it has been supplied. * * cms2_bg_style() emits --cms2-bg (always) and --cms2-bg-m (only when the * "Image (mobile)" slot is filled), and nothing else — no inline * `background-image`, because an inline style would outrank the media query * below and the swap would silently never happen. * * The swap is CSS rather than PHP because one cached HTML file serves every * visitor: the server must not pick a photo per device. The fallback chain means * a section with no mobile image keeps the desktop one. */ .sfh-jumbo-media { background-image: var(--cms2-bg); } @media (max-width: 760px) { .sfh-jumbo-media { background-image: var(--cms2-bg-m, var(--cms2-bg)); } } /* SFH button (shared by sfh layouts) — SECOND COPY, see below. * * The canonical one is modules/hero/layouts/sfh2026.css:75. These rules are * byte-identical to it on purpose: cms2 emits a layout's stylesheet only when * that layout is on the page, so until now the jumbotron's red pill was styled * only because the homepage happens to carry a hero as well. A jumbotron on any * other page rendered an unstyled link, and the second button added here — whose * whole appearance IS .sfh-btn-ghost — would have made that visible rather than * merely latent. * * So this is the same hazard CLAUDE.md records for .sfh-heading-xl, which has * three definitions that drift silently. EDIT BOTH COPIES TOGETHER. The real fix * is a shared sfh stylesheet that every layout in the theme can pull in, which * does not exist yet and is more than this change should invent. */ .sfh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 23px; /* boardfinder is the only sfh layout that puts this class on a