// VariationDenseMobile — true mobile composition (≤480px) for the article. // Adapted from /tmp/gcd-news-article-v2/design_handoff_v3_dense/article-mobile.jsx. // Hero-bottom-driven docked masthead promo; top hairline reading-progress bar. const cdMobileH2 = { fontFamily: "var(--headline-font)", fontWeight: 700, fontSize: 26, lineHeight: 1.18, margin: "1.4em 0 0.5em", letterSpacing: -0.4, }; function CDMobileProgressBar() { const [pct, setPct] = cdUseState(0); cdUseEffect(() => { let raf = null; const update = () => { raf = null; const article = document.getElementById('cd-article-mobile'); if (!article) return; const articleTop = article.getBoundingClientRect().top + window.scrollY; const articleHeight = article.offsetHeight; const vh = window.innerHeight; const denom = Math.max(1, articleHeight - vh); const raw = (window.scrollY - articleTop) / denom; const clamped = Math.max(0, Math.min(1, raw)); setPct(clamped); }; const onScroll = () => { if (raf == null) raf = window.requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); update(); return () => { window.removeEventListener('scroll', onScroll); if (raf != null) window.cancelAnimationFrame(raf); }; }, []); return (
); } function VariationDenseMobile({ topic, mostRead, bodySize = 17 }) { const PADX = 16; const heroRef = cdUseRef(null); const [scrolled, setScrolled] = cdUseState(false); // Switch utility-row state when hero photo bottom passes the masthead line. // Use IntersectionObserver with rootMargin to trigger when the hero leaves // the viewport's top region. cdUseEffect(() => { if (!heroRef.current || typeof IntersectionObserver === 'undefined') return; const obs = new IntersectionObserver( (entries) => { entries.forEach((entry) => { // When the hero is no longer intersecting (scrolled past), switch. // Trigger when 0% of hero is visible (i.e. scrolled below it). setScrolled(!entry.isIntersecting && entry.boundingClientRect.bottom < 0); }); }, { threshold: [0, 0.1], rootMargin: "0px 0px 0px 0px" } ); obs.observe(heroRef.current); return () => obs.disconnect(); }, []); return (
{/* (1) Top progress hairline */} {/* Masthead — sticky */}
{/* (4) Utility row morph */} {scrolled ? (
Free contract review · book in 90 sec
) : (
Mon, May 4 · Vol. XII, No. 124 Subscribe
)} {/* Wordmark + hamburger */}
ConstructionDaily.com
{/* Horizontal scroll nav */}
{["Roofing", "Concrete", "Framing", "Trades", "Permits & Code", "Contracts", "Investigations", "Tools"].map((n) => ( {n} ))}
{/* Article header */}
{topic.section} | {topic.eyebrow}

{topic.headline}

{topic.dek}

By {topic.author} · {topic.authorTitle}
{topic.date} · {topic.readTime} · Share
{/* (3) Inline collapsible TOC */}
4 In this article {topic.readTime}  ⌄
    {[topic.h2_1, topic.h2_2, topic.h2_3, topic.h2_4].map((s, i) => (
  1. {String(i + 1).padStart(2, "0")} { e.preventDefault(); const el = document.getElementById(`h2-${i + 1}`); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} style={{ fontWeight: 500, color: "#000", textDecoration: "none" }} > {s}
    2. ))}
{/* Hero photo */}
A residential Australian kitchen mid-renovation, with exposed timber framing and dust sheets visible. Editorial illustration.
Photograph ConstructionDaily / Investigative photography. Image illustrative — no specific contract or homeowner pictured.
{/* Body */}

{topic.location} —

{topic.intro.charAt(0)} {topic.intro.slice(1)}

{topic.intro2}

{topic.h2_1}

{topic.p1}

{topic.p2}

{/* (5) Pull quote — left-rail bar + hanging quote mark */} {/* Body cont. */}

{topic.h2_2}

{topic.p3}

{topic.list_intro}

    {topic.list.map((item, i) => (
  1. {item[0]}{item[1]}
    2. ))}
{/* (8) Inline promo — full-bleed */} {/* Body tail */}

{topic.h2_3}

{topic.p4}

{topic.p5}

{topic.h2_4}

{topic.p6}

{topic.p7}

{topic.p8}

{topic.kicker}

{/* (9) Closing CTA card */}
Sponsored · ConstructionDaily Verified

Don't sign anything until a builder you trust has read it.

A free 30-minute consultation. Verified local builder. No sales pitch.

{/* TODO: CEO_CONFIRM exact figures */}
QBCC licensed · 150+ renovations · 0 surprise variations
); } function CDMobileMostRead({ mostRead, padX = 16 }) { return (
Most read this week swipe →
{mostRead.map((t, i) => (
{i + 1}
{t}
5 min read
))}
); } function CDMobileFooter({ padX = 16 }) { return ( ); } window.CDVariationDenseMobile = VariationDenseMobile; window.CDMobileMostRead = CDMobileMostRead; window.CDMobileFooter = CDMobileFooter;