/* HHM Homepage V2 — scroll journey styles (Phase 2: real media + USP copy) */
/* Every selector below is nested under .hhm-home (the body class this
template sets). This isn't just naming-convention scoping — it's a
deliberate specificity floor so that once this page becomes the site's
front page (via Settings > Reading, later), the sitewide Additional CSS's
`body.home ...` rules can't out-rank anything here just by both matching
the same . Re-verified on the Phase 2 pass: still no class-name
overlap with the existing Additional CSS or with HivePress's own output. */
.hhm-home {
--hhm-bg: #0e1013;
--hhm-fg: #f2f0ea;
/* T1: --hhm-gold-bright matches the logo's own gold outline (sampled from
entrance-logo.png ≈ #eaca64 / #f8d870) — used for "brand statement"
moments: the marquee, the Perfect Match ring, the closing tagline.
--hhm-accent stays the darker warm tan for ambient/secondary use
(chip borders, eyebrows, hover states, etc.). */
--hhm-gold-bright: #e8c15a;
--hhm-accent: #d99a5b;
background: var(--hhm-bg);
color: var(--hhm-fg);
}
/* ---------- Journey (pinned, scroll-scrubbed) ---------- */
.hhm-home .hhm-journey {
position: relative;
/* The theme sets body { display: flex; flex-direction: column; } for its
sticky-footer layout, which makes body a definite-height flex container.
Without this, this element's default flex-shrink: 1 lets that container
crush its JS-assigned scroll-track height (TOTAL_VH, ~1200vh) down to
one viewport, collapsing the entire scrubbed journey to a single screen. */
flex-shrink: 0;
}
.hhm-home .hhm-journey__pin {
/* This is the actual pin — without position:sticky it was just a normal
100vh box at the top of .hhm-journey's 1200vh height, so it scrolled
fully out of view within the first ~10% of the journey and stayed
off-screen for the rest. Sticky only breaks if an ancestor between here
and the scroll container has its own overflow:hidden/scroll/auto —
.hhm-journey (the direct parent) has neither, and this element's own
overflow:hidden doesn't affect its own stickiness, only its children's
clipping (needed so Ken Burns scale doesn't spill past the edges). */
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.hhm-home .hhm-stage {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
will-change: opacity, transform;
}
.hhm-home .hhm-stage:first-child {
opacity: 1;
}
.hhm-home .hhm-stage__block {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--hhm-bg);
}
/* ---------- Shots (one or more per stage, cross-fade in place) ---------- */
.hhm-home .hhm-shot {
position: absolute;
inset: 0;
opacity: 0;
overflow: hidden;
will-change: opacity;
}
.hhm-home .hhm-shot:first-child {
opacity: 1;
}
.hhm-home .hhm-shot__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center center;
/* No blanket will-change here on purpose — with 11 shots across 6 stages,
permanently promoting every one of them to its own compositing layer
(most of which are never Ken-Burns-animated at all) was the main driver
of the Layerize/Commit cost. hhm-homepage-v2.js now toggles will-change
inline, only on the shot actually mid-transform, for exactly its active
window. */
}
.hhm-home video.hhm-shot__media {
background: var(--hhm-bg);
}
/* Poster-only ![]()
that stands in for a video shot in static/reduced-motion
mode, so that mode never has to request the video file at all. */
.hhm-home .hhm-shot__static-fallback {
display: none;
}
/* Logo shot (Entrance) isn't a full-bleed cover image — it's a centered mark
on the page's own background. */
.hhm-home .hhm-shot__logo {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.hhm-home .hhm-shot__logo .hhm-shot__media {
position: static;
width: min(60vw, 420px);
height: auto;
object-fit: contain;
/* Entrance -> Zoom In push-in (hhm-homepage-v2.js, buildEntranceZoomTransition)
scales this image toward the lens glass, not its own box center. Measured
directly off entrance-logo.png (900x815): the flag-fill circle's pixel
bounding box is X 265-617, Y 221-561, center (441, 391) = 49% / 48% of the
image. Since this element has no letterboxing (height:auto matches the
image's own aspect ratio 1:1 with its box), that percentage maps directly
to a CSS transform-origin. Re-measure this if entrance-logo.png/webp is
ever replaced with different art. */
transform-origin: 49% 48%;
}
/* Small signature-style flourish tucked under the wordmark — echoes the
flag's blue/red without competing with the mark's gold grading, so it
sits close (negative margin) and stays deliberately small. */
.hhm-home .hhm-shot__logo-accent {
margin-top: clamp(0.1rem, 0.5vw, 0.5rem);
font-family: 'Alex Brush', 'Brush Script MT', cursive;
font-size: clamp(1.15rem, 3vw, 1.7rem);
line-height: 1;
color: #eaf4ff;
-webkit-text-stroke: 1px #c8102e;
text-stroke: 1px #c8102e;
paint-order: stroke fill;
text-shadow:
0 0 4px #4da3ff,
0 0 10px #1e6fff,
0 0 18px #0043ce,
0 0 30px rgba(0, 92, 255, 0.55);
pointer-events: none;
user-select: none;
}
/* Dark gradient so USP copy stays legible over busy video/photo content. */
.hhm-home .hhm-stage__block::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(14, 16, 19, 0.75) 0%, rgba(14, 16, 19, 0.15) 35%, rgba(14, 16, 19, 0.15) 65%, rgba(14, 16, 19, 0.55) 100%);
pointer-events: none;
z-index: 1;
}
.hhm-home .hhm-stage[data-stage="1"] .hhm-stage__block::after {
background: none;
}
/* The trust stage carries three stacked-in-place text beats — including beat 3
which now has no solid block behind it (Part L). Deepen its scrim further so
the blue-glow text stays legible over the condo-view shot. */
.hhm-home .hhm-stage[data-has-beats="1"] .hhm-stage__block::after {
background: linear-gradient(to top, rgba(14, 16, 19, 0.88) 0%, rgba(14, 16, 19, 0.6) 40%, rgba(14, 16, 19, 0.6) 62%, rgba(14, 16, 19, 0.78) 100%);
}
/* ---------- USP copy (timed reveal, own crossfade independent of shots) ---------- */
.hhm-home .hhm-stage__usp {
position: absolute;
left: 50%;
bottom: 12%;
z-index: 2;
/* Base offset is the "rolled-down" start position the GSAP timeline
animates up from (bigger than the old 0.5rem so the reveal reads as a
roll-in, not a nudge — see B2 in hhm-homepage-v2.js). */
transform: translate(-50%, 2rem);
max-width: 42rem;
width: min(90vw, 42rem);
margin: 0;
padding: 0 1.5rem;
text-align: center;
font-size: clamp(1rem, 2.2vw, 1.4rem);
line-height: 1.4;
color: var(--hhm-fg);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
opacity: 0;
/* No CSS transition here on purpose — opacity/transform are driven by the
scrubbed GSAP timeline in hhm-homepage-v2.js for exact 1:1 scroll sync.
A CSS transition layered on top would introduce lag against the scrub. */
}
.hhm-home .hhm-stage[data-stage="1"] .hhm-stage__usp {
position: static;
transform: none;
margin-top: 1.5rem;
font-size: clamp(0.95rem, 1.8vw, 1.15rem);
opacity: 0.85;
letter-spacing: 0.02em;
}
.hhm-home .hhm-stage__usp.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* V1: scoring-explainer heading + body. Bottom-centred overlay like the USP;
sits clear of the left-side ring reveal. Revealed on the scrub timeline. */
.hhm-home .hhm-stage__explain {
position: absolute;
left: 50%;
bottom: 11%;
z-index: 2;
transform: translate(-50%, 2rem);
width: min(90vw, 40rem);
/* leave the left third clear for the rings on wide screens */
margin-left: clamp(0rem, 6vw, 4rem);
text-align: center;
opacity: 0;
}
.hhm-home .hhm-stage__explain.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.hhm-home .hhm-stage__explain-heading {
margin: 0 0 0.6rem;
font-size: clamp(1.35rem, 3.4vw, 2.1rem);
line-height: 1.15;
font-weight: 700;
color: var(--hhm-fg);
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.hhm-home .hhm-stage__explain-body {
margin: 0;
font-size: clamp(0.95rem, 2vw, 1.2rem);
line-height: 1.45;
color: rgba(242, 240, 234, 0.94);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
/* ---------- "Search Smarter, Live Better." ---------- */
/* M1/M2: ONE instance travels across, exits fully off the left, then holds
off-screen (a clean gap) before the next pass. 0-62% travel, 62-100% parked.
M3: the band is a fixed height and the item is vertically centred inside it
(flex), so no glyph is clipped by the band edge or the header area. */
@keyframes hhm-marquee-across {
0% { transform: translateX(100vw); }
62% { transform: translateX(calc(-100% - 3rem)); }
100% { transform: translateX(calc(-100% - 3rem)); }
}
.hhm-home .hhm-marquee {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 41;
height: 3rem;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(to bottom, rgba(14, 16, 19, 0.78) 40%, rgba(14, 16, 19, 0));
pointer-events: none;
opacity: 1;
transition: opacity 0.5s ease;
}
/* M5: hidden once the scoring stage (and the static sections after it) are on
screen — toggled from the JS (updateMarquee). */
.hhm-home .hhm-marquee.is-hidden {
opacity: 0;
}
.hhm-home .hhm-marquee__item {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
white-space: nowrap;
font-weight: 700;
font-size: clamp(0.95rem, 1.9vw, 1.3rem);
letter-spacing: 0.34em;
text-transform: uppercase;
/* M4 / T2: the bright brand gold that matches the logo outline. */
color: var(--hhm-gold-bright);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
animation: hhm-marquee-across 15s linear infinite;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.hhm-home .hhm-marquee {
justify-content: center;
}
.hhm-home .hhm-marquee__item {
position: static;
animation: none;
letter-spacing: 0.2em;
}
}
/* Slow gold glow, still used on the end bookend instance. */
@keyframes hhm-tagline-glow {
0%, 100% {
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 0 rgba(217, 154, 91, 0);
letter-spacing: 0.02em;
}
50% {
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 30px rgba(217, 154, 91, 0.6);
letter-spacing: 0.05em;
}
}
.hhm-home .hhm-tagline {
opacity: 1;
color: var(--hhm-accent);
font-weight: 700;
animation: hhm-tagline-glow 4.8s ease-in-out infinite;
will-change: text-shadow;
}
.hhm-home .hhm-bookend.hhm-tagline {
color: var(--hhm-gold-bright);
}
@media (prefers-reduced-motion: reduce) {
.hhm-home .hhm-tagline {
animation: none;
}
}
.hhm-home.hhm-mode-static .hhm-marquee {
position: static;
height: auto;
justify-content: center;
background: rgba(14, 16, 19, 0.9);
padding: 0.7rem 1rem;
}
.hhm-home.hhm-mode-static .hhm-marquee__item {
position: static;
animation: none;
letter-spacing: 0.18em;
}
/* ---------- Descend (trust) stage — three positive beats ---------- */
/* Three lines that roll up into place one after another on the same scrubbed
GSAP timeline as everything else (hhm-homepage-v2.js -> buildTrustOverlays):
1) the international audience, 2) the match promise, 3) the verification
promise. Beat 3 gets the bright-blue brand block + the HomeHunter mark so it
lands as the payoff. All three sit in the same spot as the USP line. */
.hhm-home .hhm-stage__beats {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.hhm-home .hhm-stage__beat {
position: absolute;
left: 50%;
bottom: 14%;
transform: translate(-50%, 2rem);
width: min(92vw, 44rem);
margin: 0;
text-align: center;
opacity: 0;
/* Opacity/transform driven by the scrubbed GSAP timeline — no CSS
transition, same 1:1-with-scroll rule as .hhm-stage__usp. */
}
.hhm-home .hhm-stage__beat-text {
display: block;
padding: 0 1.5rem;
font-size: clamp(1.15rem, 2.8vw, 1.7rem);
line-height: 1.35;
font-weight: 600;
color: var(--hhm-fg);
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
/* Beat 3 (verify) + the City Life privacy beat: no block, glow text over the
image, a trust badge on the RIGHT sized to balance the text on the left —
a two-column row, not centred text. Part N (verify) / Part U (privacy). */
.hhm-home .hhm-stage__beat--verify,
.hhm-home .hhm-stage__beat--privacy,
.hhm-home .hhm-stage__beat--save {
bottom: 11%;
left: 50%;
width: min(94vw, 48rem);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1rem, 3.5vw, 2.5rem);
text-align: left;
}
.hhm-home .hhm-stage__beat--verify .hhm-stage__beat-text,
.hhm-home .hhm-stage__beat--privacy .hhm-stage__beat-text,
.hhm-home .hhm-stage__beat--save .hhm-stage__beat-text {
flex: 1 1 auto;
max-width: 30rem;
padding: 0;
color: #ffffff;
font-weight: 700;
font-size: clamp(1.05rem, 2.4vw, 1.5rem);
/* blue glow — a dark base holds legibility, the blue halo reads brand. */
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.9),
0 0 4px rgba(0, 0, 0, 0.95),
0 0 16px rgba(30, 111, 255, 0.95),
0 0 34px rgba(30, 111, 255, 0.75),
0 0 60px rgba(30, 111, 255, 0.5);
}
/* The save beat leans on the gold star, so its glow is gold rather than blue. */
.hhm-home .hhm-stage__beat--save .hhm-stage__beat-text {
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.9),
0 0 4px rgba(0, 0, 0, 0.95),
0 0 16px rgba(232, 193, 90, 0.9),
0 0 34px rgba(232, 193, 90, 0.6),
0 0 60px rgba(232, 193, 90, 0.4);
}
/* Trust badges — the "Agent Verified" and "Data Protected" pair. Same blue
shield family, matched sizing (U3), sized as a companion to the statement. */
.hhm-home .hhm-vbadge {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
width: clamp(9rem, 22vw, 14rem);
}
.hhm-home .hhm-vbadge svg {
width: 100%;
height: auto;
filter: drop-shadow( 0 6px 18px rgba(0, 0, 0, 0.55) ) drop-shadow( 0 0 22px rgba(30, 111, 255, 0.55) );
}
.hhm-home .hhm-vbadge__shield {
fill: #1e6fff;
stroke: #ffffff;
stroke-width: 4;
}
.hhm-home .hhm-vbadge__check {
stroke: #ffffff;
}
/* Part U — Data Protected: the real HHM logo as a crown over the shield, a
gold accent ring, a white padlock. */
.hhm-home .hhm-vbadge--data .hhm-vbadge__ring {
stroke: var(--hhm-gold-bright);
}
.hhm-home .hhm-vbadge--data .hhm-vbadge__lock rect,
.hhm-home .hhm-vbadge--data .hhm-vbadge__lock path {
fill: #ffffff;
stroke: #ffffff;
}
.hhm-home .hhm-vbadge--data .hhm-vbadge__lock-hole {
fill: #1e6fff;
stroke: none;
}
.hhm-home .hhm-vbadge--data image {
filter: drop-shadow( 0 3px 8px rgba(0, 0, 0, 0.5) );
}
/* Part 4 — "Save & Email Search": an envelope+star icon (not a shield), so the
three marks read as a family by size/weight/colour without being identical.
Slightly narrower than the shields since the artwork is squarer. */
.hhm-home .hhm-vbadge--save {
width: clamp(7.5rem, 18vw, 11rem);
}
.hhm-home .hhm-vbadge--save img {
width: 100%;
height: auto;
filter: drop-shadow( 0 6px 18px rgba(0, 0, 0, 0.55) )
drop-shadow( 0 0 20px rgba(232, 193, 90, 0.5) );
}
.hhm-home .hhm-vbadge__label {
font-size: clamp(0.68rem, 1.4vw, 0.82rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
/* .is-visible is only a no-JS fallback; when the GSAP timeline runs it drives
opacity/transform directly. */
.hhm-home .hhm-stage__beat.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---------- Match rings on the scoring stage (Part I) ---------- */
/* Part I: down the LEFT of the panel, revealed ONE AT A TIME (Perfect -> Good
-> Fair) across the stage's scroll duration — each .hhm-ring is absolutely
stacked in the same spot and the JS fades them in/out in turn. */
.hhm-home .hhm-stage__rings {
position: absolute;
left: clamp(1.5rem, 6vw, 5rem);
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: clamp(9rem, 22vw, 13rem);
height: clamp(9rem, 22vw, 13rem);
}
.hhm-home .hhm-ring {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.55rem;
opacity: 0;
transform: translateY(1.5rem);
/* opacity/transform driven by the scrub timeline (buildStageRings) */
}
.hhm-home .hhm-ring.is-visible {
opacity: 1;
transform: translateY(0);
}
/* The single end-slide ring is a normal flow item, not stacked/hidden. */
.hhm-home .hhm-launcher__closer .hhm-ring {
position: static;
inset: auto;
opacity: 1;
transform: none;
}
/* I4: tier colours brightened, and every ring gets a hard drop-shadow +
bright white percentage so it stays legible over any slide behind it. */
.hhm-home .hhm-ring--perfect { color: var(--hhm-gold-bright); } /* brand gold, matches the logo (T2) */
.hhm-home .hhm-ring--good { color: #e6ebf1; } /* bright silver */
.hhm-home .hhm-ring--fair { color: #e0a06a; } /* bright bronze */
.hhm-home .hhm-ring svg {
width: clamp(96px, 14vw, 128px);
height: auto;
filter: drop-shadow( 0 3px 10px rgba(0, 0, 0, 0.85) );
}
.hhm-home .hhm-ring__arc {
filter: drop-shadow( 0 0 6px currentColor );
}
.hhm-home .hhm-ring__pct {
fill: #ffffff;
font-size: 27px;
font-weight: 800;
paint-order: stroke;
stroke: rgba(0, 0, 0, 0.55);
stroke-width: 3px;
}
.hhm-home .hhm-ring__label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: currentColor;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9);
}
/* Part 2 (this pass): "See the match, not just the listing." pairs with the
FIRST Perfect Match ring only. It's a child of that .hhm-ring, so it fades
in and out on the exact same scrub window as the ring (no separate JS). Sits
to the right of the small ring column, vertically centred on it. */
.hhm-home .hhm-ring__note {
position: absolute;
left: calc(100% + clamp(1rem, 3vw, 2.25rem));
top: 50%;
transform: translateY(-50%);
width: max-content;
max-width: min(52vw, 20rem);
margin: 0;
text-align: left;
font-weight: 700;
font-size: clamp(1.05rem, 2.6vw, 1.6rem);
line-height: 1.3;
color: #ffffff;
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.9),
0 0 4px rgba(0, 0, 0, 0.95),
0 0 20px rgba(232, 193, 90, 0.55),
0 0 44px rgba(232, 193, 90, 0.35);
}
/* D2/D3: gentle pulse on the end-slide Perfect ring. Only scale + arc-glow
move; opacity is never touched, so a frozen animation still shows the ring. */
@keyframes hhm-ring-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045); }
}
.hhm-home .hhm-ring--pulse {
opacity: 1;
}
.hhm-home .hhm-ring--pulse svg {
animation: hhm-ring-pulse 3.2s ease-in-out infinite;
transform-origin: center 42%;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.hhm-home .hhm-ring--pulse svg {
animation: none;
}
}
/* ---------- Reduced-motion / mobile static fallback ---------- */
/* When JS enhancement doesn't run (or is deliberately skipped), stages sit in
normal document flow instead of being pinned/absolutely-positioned, so the
page is just a plain scrolling page — no motion, no pin, no scrub. Only the
payoff shot per stage renders; earlier shots and Ken Burns motion are
dropped entirely rather than hidden-but-loaded. */
.hhm-home.hhm-mode-static .hhm-journey__pin {
/* Reset the sticky pin back to normal flow — with height:auto here it'd be
taller than one viewport, and a sticky element taller than the viewport
partially sticks/unsticks in a janky way. Static mode has no pinned
journey at all, so it shouldn't stick either. */
position: static;
height: auto;
overflow: visible;
}
.hhm-home.hhm-mode-static .hhm-stage {
position: relative;
opacity: 1;
min-height: 70vh;
}
.hhm-home.hhm-mode-static .hhm-journey {
height: auto !important;
}
.hhm-home.hhm-mode-static .hhm-shot {
display: none;
opacity: 1;
position: relative;
min-height: 70vh;
}
.hhm-home.hhm-mode-static .hhm-shot--payoff {
display: block;
}
.hhm-home.hhm-mode-static .hhm-shot__media {
transform: none !important;
}
.hhm-home.hhm-mode-static video.hhm-shot__media {
display: none;
}
.hhm-home.hhm-mode-static .hhm-shot__static-fallback {
display: block;
width: 100%;
height: 100%;
min-height: 70vh;
object-fit: cover;
}
.hhm-home.hhm-mode-static .hhm-stage__usp {
position: static;
transform: none;
opacity: 1;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
}
/* Static mode: the trust-stage beats can't roll in on a timeline, so render
them as a normal stacked block under that stage's image. */
.hhm-home.hhm-mode-static .hhm-stage__beats {
position: static;
inset: auto;
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
max-width: 44rem;
margin: 1.75rem auto 0;
padding: 0 1.5rem;
}
.hhm-home.hhm-mode-static .hhm-stage__beat {
position: static;
left: auto;
top: auto;
bottom: auto;
transform: none;
opacity: 1;
width: auto;
}
.hhm-home.hhm-mode-static .hhm-stage__beat--verify,
.hhm-home.hhm-mode-static .hhm-stage__beat--privacy,
.hhm-home.hhm-mode-static .hhm-stage__beat--save {
width: 100%;
flex-direction: column;
text-align: center;
}
/* Static mode: the V1 heading/body block flows normally under the stage image. */
.hhm-home.hhm-mode-static .hhm-stage__explain {
position: static;
transform: none;
opacity: 1;
width: auto;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
}
/* Static mode: the scoring-stage rings sit as a normal centred row under the
stage image, all three visible at once (no one-by-one timeline). */
.hhm-home.hhm-mode-static .hhm-stage__rings {
position: static;
left: auto;
top: auto;
transform: none;
width: auto;
height: auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: clamp(1rem, 4vw, 2.5rem);
margin: 1.5rem auto 0;
}
.hhm-home.hhm-mode-static .hhm-stage__rings .hhm-ring {
position: static;
inset: auto;
opacity: 1;
transform: none;
}
/* 23 Sept 2026 (portrait layout fix): in static mode (phones/tablets) the
scoring stage's heading+body repeated the "Suitability Score" section that
follows it, verbatim, and the rings row overflowed the screen (the note
sat inside ring 1 and stretched it, pushing the Good ring off-screen).
Static mode now shows one clean pair of rings (the desktop close-out third
ring is a repeat of the first) and lets the Suitability section below carry
the single copy of the heading/body. */
.hhm-home.hhm-mode-static .hhm-stage__explain,
.hhm-home.hhm-mode-static .hhm-stage__rings .hhm-ring:nth-child(3),
.hhm-home.hhm-mode-static .hhm-stage__rings .hhm-ring__note {
display: none;
}
.hhm-home.hhm-mode-static .hhm-stage__rings {
max-width: 100%;
flex-wrap: nowrap;
}
.hhm-home.hhm-mode-static .hhm-ring__note {
position: static;
transform: none;
max-width: 22rem;
margin: 0.5rem auto 0;
text-align: center;
font-size: 1rem;
}
/* ---------- Cloud info-bubble menu ---------- */
.hhm-home .hhm-cloud-menu {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 40;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.hhm-home .hhm-cloud-menu.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hhm-home.hhm-mode-static .hhm-cloud-menu {
opacity: 1;
transform: none;
pointer-events: auto;
position: sticky;
top: 1rem;
right: auto;
bottom: auto;
align-self: flex-end;
margin: 1rem;
}
.hhm-home .hhm-cloud-menu__toggle {
width: 3.25rem;
height: 3.25rem;
border-radius: 999px;
background: rgba(242, 240, 234, 0.1);
backdrop-filter: blur(6px);
border: 1px solid rgba(242, 240, 234, 0.25);
color: var(--hhm-fg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
}
.hhm-home .hhm-cloud-menu__bubbles {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
}
/* ---------- Unified pill language ---------- */
/* C4: Buy / Rent / Resources / Explore use one dark-pill class everywhere they
appear — the floating cloud menu and the end-slide route row render identically.
B3: this dark pill is deliberately the opposite of the white Search pill. */
.hhm-home .hhm-pill-dark {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(14, 16, 19, 0.8);
border: 1px solid rgba(242, 240, 234, 0.22);
backdrop-filter: blur(6px);
color: var(--hhm-fg);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.02em;
padding: 0.6rem 1.1rem;
border-radius: 999px;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hhm-home .hhm-pill-dark:hover,
.hhm-home .hhm-pill-dark:focus-visible {
background: rgba(217, 154, 91, 0.22);
border-color: var(--hhm-accent);
color: var(--hhm-fg);
}
/* R4: colour-coded outline + matching glow per destination, so the four
pills read as distinct routes rather than one neutral block. --c is the
pill's accent colour; the dark fill stays. */
.hhm-home .hhm-pill--buy { --c: #45b783; } /* green (swapped with Resources) */
.hhm-home .hhm-pill--rent { --c: #4f8ff7; } /* blue */
.hhm-home .hhm-pill--resources { --c: #a97bff; } /* violet (swapped with Buy) */
.hhm-home .hhm-pill--explore { --c: #e8c15a; } /* gold */
/* Outreach Readiness Phase 3, Section 3a: the dashboard-teaser's own
Agent Sign In CTA reuses the shared gold accent already used for
Explore Malaysia — this is an agent-facing route, not a buyer one. */
.hhm-home .hhm-pill--agents { --c: #e8c15a; } /* gold, same as Explore */
.hhm-home .hhm-pill--buy,
.hhm-home .hhm-pill--rent,
.hhm-home .hhm-pill--resources,
.hhm-home .hhm-pill--explore,
.hhm-home .hhm-pill--agents {
border-color: color-mix( in srgb, var(--c) 70%, transparent );
box-shadow: 0 0 0 1px color-mix( in srgb, var(--c) 25%, transparent ),
0 6px 20px color-mix( in srgb, var(--c) 28%, transparent );
}
.hhm-home .hhm-pill--buy:hover, .hhm-home .hhm-pill--buy:focus-visible,
.hhm-home .hhm-pill--rent:hover, .hhm-home .hhm-pill--rent:focus-visible,
.hhm-home .hhm-pill--resources:hover, .hhm-home .hhm-pill--resources:focus-visible,
.hhm-home .hhm-pill--explore:hover, .hhm-home .hhm-pill--explore:focus-visible,
.hhm-home .hhm-pill--agents:hover, .hhm-home .hhm-pill--agents:focus-visible {
background: color-mix( in srgb, var(--c) 22%, rgba(14, 16, 19, 0.8) );
border-color: var(--c);
box-shadow: 0 0 0 1px var(--c),
0 8px 26px color-mix( in srgb, var(--c) 45%, transparent );
}
/* The cloud-menu bubble is now just a layout hook — visuals come from .hhm-pill-dark. */
.hhm-home .hhm-cloud-menu__bubble {
text-decoration: none;
}
/* ---------- Unified white Search pill (B1/B2/B4) ---------- */
/* One treatment for every Search CTA: white pill, the full-colour logo mark
reading against the white, black text. Larger and cleaner than the old gold
version. Two sizes: --menu (in the cloud menu), --lg (the end slide). */
.hhm-home .hhm-search-pill {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: #ffffff;
color: #14110c;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.015em;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hhm-home .hhm-search-pill:hover,
.hhm-home .hhm-search-pill:focus-visible {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
color: #14110c;
}
.hhm-home .hhm-search-pill img {
object-fit: contain;
flex: 0 0 auto;
}
.hhm-home .hhm-search-pill--menu {
padding: 0.62rem 1.15rem;
font-size: 0.95rem;
}
.hhm-home .hhm-search-pill--menu img {
width: 1.6rem;
height: 1.28rem;
}
/* R3: the end-slide Search pill is wide, with the logo mark scaled up so it
genuinely fills the pill's height — a real brand button, not a small icon in
a long empty bar. Tight vertical padding so the mark defines the pill height. */
.hhm-home .hhm-search-pill--lg {
/* 23 Sept 2026: was min(90vw,24rem) -- wider than the launcher's own content box (100vw minus its side padding), which forced the whole page wider than a phone in portrait. Subtract the padding. */
width: min(calc(100vw - 3rem), 24rem);
max-width: 100%;
justify-content: center;
gap: 0.9rem;
padding: 0.6rem 1.8rem;
font-size: clamp(1.2rem, 2.8vw, 1.5rem);
}
.hhm-home .hhm-search-pill--lg img {
width: 3.6rem;
height: 2.8rem;
}
/* ---------- S1: top-right cluster — Agent Sign In, then Skip below it ---------- */
.hhm-home .hhm-topright {
position: fixed;
top: 3.5rem; /* clears the 3rem marquee band */
right: 1rem;
z-index: 42;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.55rem;
}
/* S2: deliberately low-key vs the gold/white buyer CTAs — a small cool-grey
outline pill so agents can find it without it competing for attention. */
.hhm-home .hhm-agent-signin {
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(242, 240, 234, 0.72);
background: rgba(14, 16, 19, 0.5);
border: 1px solid rgba(242, 240, 234, 0.28);
border-radius: 999px;
padding: 0.42rem 0.9rem;
text-decoration: none;
backdrop-filter: blur(6px);
transition: color 0.2s ease, border-color 0.2s ease;
}
.hhm-home .hhm-agent-signin:hover,
.hhm-home .hhm-agent-signin:focus-visible {
color: var(--hhm-fg);
border-color: rgba(242, 240, 234, 0.55);
}
/* ---------- Skip button (now a child of .hhm-topright, sits below Agent Sign In) ---------- */
.hhm-home .hhm-skip {
z-index: 40;
font-size: 0.75rem;
letter-spacing: 0.03em;
color: rgba(242, 240, 234, 0.7);
background: rgba(14, 16, 19, 0.6);
border: 1px solid rgba(242, 240, 234, 0.2);
border-radius: 999px;
padding: 0.4rem 0.85rem;
cursor: pointer;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.hhm-home .hhm-skip.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Static mode has no scroll journey to skip — hide Skip, keep Agent Sign In. */
.hhm-home.hhm-mode-static .hhm-skip {
display: none;
}
.hhm-home.hhm-mode-static .hhm-topright {
position: absolute;
top: 3.2rem;
}
/* ---------- Bookend + Suitability explainer + search launcher (static, normal flow, all modes) ---------- */
.hhm-home .hhm-bookend {
max-width: 40rem;
margin: 0 auto;
padding: 3.5rem 1.5rem 0;
text-align: center;
font-weight: 700;
font-size: clamp(1.5rem, 4vw, 2.25rem);
letter-spacing: 0.01em;
color: var(--hhm-fg);
}
/* The Suitability Score, given its own dedicated block as the headline buyer
USP — not just a badge glimpsed on a card during the scroll. Buyer-framed
("how well a home fits what YOU want"); the agent-side benefit lives in the
agent onboarding flow, not here. */
.hhm-home .hhm-suitability {
max-width: 46rem;
margin: 0 auto;
padding: 2.75rem 1.5rem 0.5rem;
text-align: center;
}
.hhm-home .hhm-suitability__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hhm-accent);
}
.hhm-home .hhm-suitability__heading {
margin: 0 0 0.9rem;
font-size: clamp(1.35rem, 3.5vw, 2rem);
line-height: 1.2;
color: var(--hhm-fg);
}
.hhm-home .hhm-suitability__body {
margin: 0 auto;
max-width: 40rem;
font-size: clamp(0.98rem, 1.9vw, 1.12rem);
line-height: 1.55;
color: rgba(242, 240, 234, 0.88);
}
/* D1: the ring badges moved off this section onto the scoring stage — this
section now leads with the chips alone. */
.hhm-home .hhm-suitability__chips {
list-style: none;
margin: 1.5rem auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
max-width: 26rem;
}
.hhm-home .hhm-suitability__chip {
font-size: 0.82rem;
letter-spacing: 0.02em;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: rgba(242, 240, 234, 0.06);
border: 1px solid rgba(217, 154, 91, 0.35);
color: var(--hhm-fg);
}
/* Chips are visible by default. The pre-pop hidden state applies ONLY when JS
has added .hhm-can-pop to the root — then popTiles() adds .is-popped to each
in turn. Any failure path leaves the chips plainly visible. */
.hhm-home.hhm-can-pop .hhm-suitability__chip {
opacity: 0;
transform: scale(0.6);
}
.hhm-home.hhm-can-pop .hhm-suitability__chip.is-popped {
opacity: 1;
transform: scale(1);
transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
.hhm-home.hhm-can-pop .hhm-suitability__chip {
opacity: 1;
transform: none;
}
}
/* ---------- End slide (search launcher) ---------- */
.hhm-home .hhm-launcher {
padding: 2.5rem 1.5rem 3rem;
max-width: 40rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.3rem;
}
/* C4: the route row uses the shared .hhm-pill-dark visuals; this class only
sets the row layout + a comfortable min width so the three sit evenly. */
.hhm-home .hhm-launcher__routes {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.hhm-home .hhm-launcher__route {
min-width: 7rem;
}
/* D2: the single Perfect-Match ring as the closer, sitting just above the
sign-off wordmark. */
.hhm-home .hhm-launcher__closer {
margin-top: 0.5rem;
display: flex;
justify-content: center;
}
.hhm-home .hhm-launcher__closer .hhm-ring svg {
width: clamp(96px, 14vw, 128px);
}
/* Two small, low-key links under the CTAs — the agent nod (C1/C2: single
instance, "less wasted time" removed) and the G3 "get notified" micro-CTA. */
.hhm-home .hhm-launcher__minor {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.4rem 1.4rem;
margin-top: 0.3rem;
}
.hhm-home .hhm-launcher__agents,
.hhm-home .hhm-launcher__notify {
font-size: 0.85rem;
color: rgba(242, 240, 234, 0.58);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.hhm-home .hhm-launcher__agents:hover,
.hhm-home .hhm-launcher__agents:focus-visible,
.hhm-home .hhm-launcher__notify:hover,
.hhm-home .hhm-launcher__notify:focus-visible {
color: rgba(242, 240, 234, 0.92);
border-bottom-color: rgba(242, 240, 234, 0.4);
}
/* ---------- Part P: closing brand sign-off — logo mark only ---------- */
/* P1: no wordmark text. P2: the full-colour logo mark, enlarged, is the sole
closing visual. Held slightly muted so it reads as a quiet closing note
rather than a CTA. */
.hhm-home .hhm-signoff {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem 4.5rem;
}
.hhm-home .hhm-signoff img {
width: clamp(9rem, 34vw, 20rem);
height: auto;
opacity: 0.78;
}
/* ---------- Outreach Readiness Phase 3, Section 3a (16 Sept 2026):
Firm Dashboard teaser video section — the real host for the