/*
* patterns/home-hero-banner.css — "Home Hero Banner"
* Markup: wp-content/themes/fcs/patterns/home-hero-banner.php
* Root: .fcs-home-hero
*
* Figma: desktop 9904:10602, mobile 10060:7803.
*
* Small/Medium 600px tall. Copy stacked, bottom-aligned, 32px from the
* bottom edge, 20px side gutters. Heading 36px/40px.
* Large 1000px tall. Heading (703px) and body (371px) side by side
* with an 80px gap, body vertically centred against the
* heading, container capped at 1240px. Heading 96px/96px.
*
* The dark scrim over the photograph's lower portion is part of the asset, so
* this file adds no gradient and the cover block's dim ratio is 0.
*
* TWO background images, desktop and mobile — see the "Mobile background"
* section at the foot of this file.
*/
/* Section -------------------------------------------------------------- */
/*
* Core's cover block centres its inner container. The copy belongs at the
* bottom, over the scrim, at every size.
*
* Section padding is NOT declared here for Medium and Large — the editor owns
* those from the sidebar's Dimensions panel, and it writes them as an inline
* style on this element. Mobile is pinned below. See CLAUDE.md
* § "Section padding".
*/
.fcs-home-hero.wp-block-cover {
align-items: flex-end;
justify-content: flex-end;
min-height: 600px;
}
/*
* Faces sit in the upper half of the photograph; a tall viewport centre-cropped
* would cut them. Bias the crop upward. The editor can still override this per
* image with the cover block's focal-point picker, which writes its own
* object-position inline.
*/
.fcs-home-hero .wp-block-cover__image-background {
object-position: center 35%;
}
/* Copy ----------------------------------------------------------------- */
.fcs-home-hero .wp-block-cover__inner-container {
width: 100%;
}
.fcs-home-hero__inner {
display: flex;
flex-direction: column;
/* 20px between heading and body on Small, per the mobile frame. */
gap: 20px;
margin-inline: auto;
max-width: var( --fcs-wide );
}
.fcs-home-hero__heading {
margin-block: 0;
/*
* 36px at the 390px mobile frame, 80px at the 1240px content cap, linear
* between, pinned at both ends. A clamp rather than two fixed values so the
* 768–1023 band — which has no design — scales smoothly instead of jumping
* at the breakpoint.
*
* Figma's desktop size is 96px, but that was set in Faustina; Outfit is
* wider and heavier-looking at the same size, so the cap is 80px.
*
* The vw coefficient is solved through the two endpoints, not guessed:
* slope = (80 − 36) / (1240 − 390) = 0.0518px per px of viewport, hence
* 5.18vw with a 0.988rem intercept. It caps at 80px rather than tracking
* to 1920 because the content column stops growing at 1240.
*/
font-size: clamp( 2.25rem, 0.988rem + 5.18vw, 5rem );
line-height: 1.111;
letter-spacing: -0.2px;
}
.fcs-home-hero__text {
margin-block: 0;
font-size: var( --wp--preset--font-size--medium );
line-height: 1.5;
}
/* Large ---------------------------------------------------------------- */
@media ( min-width: 1024px ) {
/* Padding is in the block attributes, not here — see the note up top. */
.fcs-home-hero.wp-block-cover {
min-height: 1000px;
}
/*
* Heading and body side by side. Figma widths are 703px and 371px with an
* 80px gap inside a 1154px row — 60.9% and 32.1% of it. flex-basis in px
* with shrink enabled keeps that ratio and still degrades below 1240px.
*/
.fcs-home-hero__inner {
flex-direction: row;
/* Body is vertically centred against the heading, not baseline-aligned. */
align-items: center;
gap: 80px;
}
.fcs-home-hero__heading {
flex: 0 1 703px;
line-height: 1;
}
.fcs-home-hero__text {
flex: 0 1 371px;
}
}
/* Mobile background ---------------------------------------------------- */
/*
* A second, phone-specific photograph below 768px.
*
* The editor picks it in the cover block's "Mobile background" panel, which
* fcs-core adds (plugins/fcs-core/src/cover-mobile-image.js). Its PHP half
* (inc/cover-mobile-image.php) puts the file on this element as
* --fcs-cover-bg-mobile and adds .has-fcs-mobile-background, so everything below
* applies ONLY to a hero that actually has a mobile image set. With the slot
* empty the block behaves like any other cover: one image at every size.
*
* WHY THE IMAGE IS SWAPPED RATHER THAN RE-CROPPED
* The desktop asset is a wide three-panel montage. Cropping it to a 390px-wide
* frame — whatever the object-position — leaves an unreadable sliver, so the
* mobile Figma frame (10060:7803) supplies different artwork rather than a
* different crop of the same artwork.
*
* KNOWN COST — both files download on mobile.
* core/cover paints its background as a real . An is fetched on the strength of its src attribute alone;
* `display: none` hides it but does not cancel the request. So on a phone the
* browser pulls the desktop composite it will never show, plus the mobile file.
*
* Accepted deliberately, because the alternative is worse: suppressing the
* download needs with a media-qualified , and core does not
* emit one — we would have to rewrite the cover block's inner markup on every
* render and re-check it against every WordPress update, which is exactly the
* fragility this approach was chosen to avoid.
*
* If the hero's LCP ever becomes a real problem on mobile, the fix is to make
* the desktop asset smaller rather than to fight core's markup. Revisit if
* WordPress gives cover a native responsive-image control.
*
* WRITTEN MOBILE-FIRST
* Per CLAUDE.md § Responsive: the mobile image is the base state and Medium
* restores the desktop , rather than a max-width query overriding a desktop
* base — so the cascade runs the same direction as the rest of this file.
*
* The mobile file is painted on the cover's own background layer, so it sits
* under the scrim span and the inner container exactly where the would
* have been. `center 35%` matches the crop bias used for the desktop image above.
*/
.fcs-home-hero.has-fcs-mobile-background {
background-image: var( --fcs-cover-bg-mobile );
background-repeat: no-repeat;
background-position: center 35%;
background-size: cover;
}
.fcs-home-hero.has-fcs-mobile-background .wp-block-cover__image-background {
display: none;
}
@media ( min-width: 768px ) {
/* Back to the cover block's own image, and drop the mobile paint. */
.fcs-home-hero.has-fcs-mobile-background {
background-image: none;
}
.fcs-home-hero.has-fcs-mobile-background .wp-block-cover__image-background {
display: block;
}
}