/* ===========================================================================
* HOME HERO — the pictures, and one fixed height for both slides
*
* Loaded after home.css and after style.css. It adds three things and repeats
* none of them:
*
* 1. the backdrop photograph, one scene per slide;
* 2. the product picture on the display stand, one per slide;
* 3. ONE fixed box shared by both slides, so moving between the two product
* lines can never change the height of the band.
*
* ---------------------------------------------------------------------------
* WHY THE BAND USED TO JUMP BETWEEN SLIDES
*
* Two things set the height of the band, and both used to change with the
* slide:
*
* - the words. “Space Capsules” fits on one line, “Container Prefab
* Houses” runs onto two, and the description of the second slide is a
* line longer than the first. The band grew to fit whichever was taller.
* - the pictures. Each product was drawn at its natural height, so the
* taller picture made the band taller.
*
* Both are pinned below. The product now draws inside one box of fixed
* height (object-fit: contain, never cropped), and the slide that is not
* showing is kept in the layout — it is merely invisible — so the copy
* column is always as tall as the taller of the two slides. That means the
* band, the controls and the buttons under them hold still.
*
* ---------------------------------------------------------------------------
* THE PRODUCT PICTURES — where they are and what they need to be
*
* Each slide carries two pictures, set in front-page.php in the $samgo_slides
* array near the top of the file. Both are MODARVEN's own studio
* photographs, uploaded through the Media Library:
*
* 'scene' the backdrop, a wide landscape photograph, about 1600 × 1000.
* 'image' the product itself — the capsule studio shot for the capsule
* line and the container module for the container line.
*
* SHOOTING THE NEXT ONE — what the slot wants
*
* The box the product is drawn in is 7:5 (about 1400 × 1000) and the picture
* is fitted inside it with object-fit: contain, so nothing is ever cropped
* and nothing is ever stretched. For the product to fill that box rather
* than float in the middle of it, photograph it as follows:
*
* - landscape, roughly 7:5, not square — a square file leaves empty space
* either side inside a 7:5 frame, which is why the unit reads small;
* - the same three-quarter angle from the left for both lines, so neither
* product looks larger or more important than the other;
* - the subject running close to the edges of the frame, not surrounded by
* margin, so the drawing fills the box;
* - trimmed to the subject with a transparent background, if you can. That
* is what the display stand is designed around, and it is the one thing
* section 6 below is working around: a white background has to be lifted
* off in the browser instead, which is close but not perfect.
*
* Supply any new shot at those proportions and swap the two addresses per
* slide. Nothing else needs to change.
* ======================================================================== */
/* ---------------------------------------------------------------------------
* 0. The one shared height
*
* Declared here so this whole change stays in one file. Both slides read the
* same two values: the box the product draws in, and the floor it stands on.
* ------------------------------------------------------------------------ */
:root {
--hero-product-box: clamp(18rem, 26vw, 24rem);
--hero-product-box-sm: 15rem;
}
/* ---------------------------------------------------------------------------
* 1. The backdrop photograph
*
* The scene is an inside its own .hero-back panel,
* one per slide. The panel crossfades on its own clock (home.css); here it
* is only made to fill the band and to stay a background.
* ------------------------------------------------------------------------ */
.hero-scene {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
/* The scene is faded back and washed towards the paper colour, so the
product stays the one solid thing on the band and the words stay legible.
The wash runs left-to-right on a wide screen, because the words sit on the
left, and top-to-bottom on a phone, because there the words sit above.
*
* The wash stays pale rather than heavy, because the product picture is
* multiplied onto whatever is behind it (section 6). Multiply blends towards
* the backdrop, so the paler and calmer the wash, the cleaner the product
* sits on it. */
.hero-back::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
var(--paper) 0%,
rgba(247, 248, 246, 0.92) 34%,
rgba(247, 248, 246, 0.84) 62%,
rgba(247, 248, 246, 0.76) 100%
);
}
@media ( max-width: 899px ) {
.hero-back::after {
background: linear-gradient(
to bottom,
var(--paper) 0%,
rgba(247, 248, 246, 0.95) 40%,
rgba(247, 248, 246, 0.88) 100%
);
}
}
/* ---------------------------------------------------------------------------
* 2. The product box — one height for both slides
*
* The product fills a box of fixed height and is fitted inside it with
* object-fit: contain, so neither picture is ever cropped and neither can
* make the band taller than the other.
* ------------------------------------------------------------------------ */
.hero-products {
align-items: stretch;
height: var(--hero-product-box);
min-height: 0;
}
.hero-shot {
width: 100%;
height: var(--hero-product-box);
max-width: 40rem;
aspect-ratio: auto;
object-fit: contain;
object-position: center center;
}
/* A note naming the file to supply, sitting inside the box the real cut-out
will occupy. Kept on the floor of the box rather than below it, so it can
never add height. */
.hero-product__note {
bottom: 0;
}
@media ( max-width: 899px ) {
.hero-products,
.hero-shot {
height: var(--hero-product-box-sm);
}
.hero-shot {
max-width: 100%;
}
}
/* ---------------------------------------------------------------------------
* 3. Keep both text groups in the layout, so the taller one sets the height
*
* The slide that is not showing is normally taken out of the flow with the
* hidden attribute. Left that way, the band is as tall as the slide on
* screen and the buttons move when the longer slide arrives. Keeping the
* hidden slide in place — invisible and untouchable, but still occupying its
* space — makes the column the height of the taller slide, always.
*
* Both groups already share one grid cell (grid-area: 1 / 1 in home.css), so
* they overlap and the taller one wins.
* ------------------------------------------------------------------------ */
.hero-slide[hidden] {
display: block;
visibility: hidden;
pointer-events: none;
}
/* ---------------------------------------------------------------------------
* 4. The floor shadow, which belongs to the product and not to the words
* ------------------------------------------------------------------------ */
.hero-product__shadow {
left: 10%;
right: 10%;
bottom: 1%;
height: 2.5rem;
background: radial-gradient(50% 50% at 50% 50%, rgba(23, 43, 43, 0.3) 0%, transparent 70%);
}
/* ---------------------------------------------------------------------------
* 5. Less movement when the visitor asks for less motion
* ------------------------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
.hero-scene {
transition: none;
}
}
/* ---------------------------------------------------------------------------
* 6. The studio photographs — lifting the white background off
*
* MODARVEN's two product pictures are shot in a studio on flat white, which
* is exactly right for a catalogue and wrong for this band. The band is a
* display stand: a landscape photograph behind, a faint outline and a soft
* shadow on the floor, and the product standing between them. A square of
* pure white carried in on top of that reads as a white box floating over
* the scene, which is what a visitor sees first and remembers.
*
* The proper fix is a cut-out with a transparent background, and section 6b
* is how to switch to one when the shots exist. Until then the background is
* taken off in the browser with one declaration:
*
* mix-blend-mode: multiply
*
* WHY THAT WORKS, AND WHY IT IS SAFE HERE
*
* Multiply treats the picture as ink printed on clear film. Every pixel of
* the picture is multiplied with whatever is behind it:
*
* white (255) × backdrop = backdrop → white disappears
* grey (150) × backdrop = darker tone → the building stays
*
* So the white sweep around the building falls away into the backdrop, and
* the grey of the capsule or the cabin is kept, only very slightly deepened
* by the pale wash underneath. Nothing is threshold-ed, nothing is mask-keyed
* and no edge is invented — which is why the earlier attempt at a luminance
* mask did not work: these are opaque files with no alpha channel, so there
* was nothing for a mask to cut against.
*
* It also settles the part that would otherwise need hand retouching: the
* lit underside of the building, where white bounce light makes the subject
* itself almost white, blends into the backdrop instead of leaving a halo.
*
* ---------------------------------------------------------------------------
* WHY THE BLEND IS ON THE FRAME AND NOT ON THE IMAGE
*
* This is the one subtlety in the file, and getting it wrong is what leaves
* a white box on screen while the stylesheet looks perfectly correct.
*
* mix-blend-mode blends an element with what is painted *behind it inside
* the same stacking context*. The moment the element itself starts a new
* stacking context, there is nothing behind it to blend with, and the effect
* quietly does nothing — the picture paints exactly as it was shot.
*
* An element starts a new stacking context as soon as it is given an opacity
* below 1, and the carousel fades its product in with an opacity animation
* (`.hero-product.is-current .hero-shot` → `animation: hero-rise`, in
* home.css). Putting the blend on that same image therefore cancelled it:
* the image faded correctly and the white stayed.
*
* The blend is put on the instead. The figure is never given an
* opacity of its own — the fade still happens on the image inside it — so
* the figure is free to blend with the band, and the faded image blends
* along with it. The two rules do not interfere.
*
* `isolation: isolate` is deliberately NOT set on .hero-product: it would
* create exactly the sealed group that breaks the blend.
* ------------------------------------------------------------------------ */
.hero-product {
mix-blend-mode: multiply;
}
/* The image itself carries no blend mode, and no background of its own, so
it never has the chance to paint a white plate. */
.hero-shot {
background-color: transparent;
}
/* ---------------------------------------------------------------------------
* 6b. When a cut-out with a transparent background arrives
*
* Add a 'cutout' => true key to a slide in front-page.php (see the note at
* the top of this file) and the picture is drawn exactly as shot, with the
* multiply switched off — there is no longer a background to remove, and
* blending a cut-out would only darken it for no reason.
* ------------------------------------------------------------------------ */
.hero-product[data-cutout="true"] {
mix-blend-mode: normal;
}
/* ---------------------------------------------------------------------------
* 7. The line under the three information points
*
* Each slide ends with one short line that answers “what is it, roughly” —
* “Guest accommodation” for the capsule, and the same kind of phrase for the
* container. It is deliberately NOT part of the bulleted list above it: the
* three points are features, this is a category, and giving it a fourth
* bullet would say the opposite.
*
* It needs its own styling all the same. With none, it rendered as loose
* body text immediately below a list of bullets — which reads as a list item
* whose marker went missing, which is exactly how it looked.
*
* So it is set apart on purpose: a hairline above it, a small mono label, and
* letter-spacing, so it reads as a caption for the block rather than as a
* stray fourth point. The colour stays quiet; this is a label, not a claim.
* ------------------------------------------------------------------------ */
.hero-figure {
display: flex;
align-items: center;
gap: var(--space-2xs);
margin: var(--space-sm) 0 0;
padding-top: var(--space-xs);
max-width: var(--wrap-narrow);
border-top: 1px solid var(--line);
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: 0.08em;
line-height: var(--lh-label);
text-transform: uppercase;
}
/* A short rule before the words, so the line is anchored rather than
floating. Decorative only — the words carry the meaning. */
.hero-figure::before {
content: "";
flex: 0 0 auto;
width: 1.25rem;
height: 2px;
background: var(--accent);
}
.hero-figure__num {
display: inline-block;
}
/* ---------------------------------------------------------------------------
* 8. The product cards on the range grid
*
* The card slot is 16:10 and the photograph is square, so `object-fit: cover`
* — which is right for a landscape photograph — takes an equal bite off the
* top and the bottom of a square one and can cut into the building. The two
* product photographs sit close to the middle of their frames, so the crop
* is tilted rather than removed: `center 62%` takes the crop from nearer the
* top of the file, which is where the roofline is, and keeps the building
* whole. A landscape photograph on the same card is unaffected — there is
* nothing to tilt.
*
* The white studio background stays on the card. A catalogue-style white
* plate is the convention for a product tile, and the tile already has its
* own pale background, so the two agree.
* ------------------------------------------------------------------------ */
.card-media img {
object-position: center 62%;
}