/* ========================================================================== GOOGLE ADS — HERO (applied from /gads-hero-own-p3 V01 "Ledger Rule") ========================================================================== One line of headline across the whole lane, then the three-step journey as cells divided by hairlines, edge to edge. The hero deliberately stops 183px short of the fold on a desktop and 130px on a phone. That is the height of #q7 — the Success Stories rail rz.js builds — so the section the page ALREADY HAS is what clears the fold, whole. No second Success Stories is built anywhere; change --h3-show and the reveal changes with it. Loaded after site/ds.css, which is the order the lab was verified in. Every class is prefixed h3-; the page's own .hero and .hp-* rules were deleted with the markup that used them. ========================================================================== */ /* ========================================================================== HERO KIT — gads-hero-own-p3 -------------------------------------------------------------------------- Ten heroes for google-ads.html, built on what the four shortlisted pages had in common: a centred axis, a headline allowed to use the whole lane, a wide lede rather than a narrow column, generous air around the title, one band along the bottom, and the second half of the promise in brand blue. NO SUCCESS STORIES ARE BUILT HERE. The page already has that section — #q7, titled "Success Stories", the client rail built by gads-clients/rz.js, 183px tall on a 1440x900 screen and 130px on a phone. The hero's only job is to stop short of the fold by a chosen amount so that the section the page already has is what shows through it. Nothing is duplicated, nothing is invented, and there is only ever one Success Stories on the page. --h3-show how many pixels of #q7 clear the fold on a desktop --h3-show-m the same on a phone, where #q7 is shorter Everything is prefixed h3-. The page's own .hero and .hp-* rules are left in place and go unused — .hp- is already taken twice over, by this page's old journey band and by ds.css's .pg .hp-h. ========================================================================== */ .h3{ position: relative; background: var(--paper); --h3-show: 0px; --h3-show-m: 0px; } /* The hero owns the first screen MINUS whatever it lends to the section under it. One variable per version decides the whole reveal; no clipping, no overlays, no JS — #q7 simply starts higher up the screen. */ .h3-shell{ position: relative; z-index: 1; display: flex; flex-direction: column; min-height: calc(100svh - var(--barh) - var(--h3-show)); } .h3-say{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(24px, 4vh, 54px); } .h3-tex{ position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--gridline) 1px, transparent 1px), linear-gradient(to bottom, var(--gridline) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 74% at 50% 20%, #000 22%, transparent 80%); mask-image: radial-gradient(120% 74% at 50% 20%, #000 22%, transparent 80%); } /* the lane the sections below actually use: .sv sets --maxw:1400px, so this is 1325px from x=58 on a 1440 screen — measured, not assumed */ .h3-lane{ width: min(1400px, 100% - (2 * var(--pad))); margin-inline: auto; } /* ---------- type ---------- */ .h3-eye{ margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); font-weight: 500; } .h3-h1{ margin: 0; font-weight: 800; line-height: 1.0; letter-spacing: -.05em; color: var(--ink); text-wrap: balance; font-size: clamp(31px, min(4.3vw, 7.2vh), 62px); } /* the shortlist's own device: the second half of the promise in brand blue */ .h3-h1 em{ font-style: normal; color: var(--brand); } .h3-h1 i{ font-style: normal; color: var(--accent); } .h3-lede{ margin: 0; color: var(--ink-2); line-height: 1.55; font-size: clamp(15.5px, min(1.28vw, 2.15vh), 18.5px); } /* ---------- actions ---------- */ .h3-cta{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .h3 .h3-cta .btn{ height: clamp(46px, 6vh, 54px); padding: 0 28px; border-radius: 12px; font-size: 15.4px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 10px 24px -12px var(--g-blue); } .h3 .h3-cta .btn.link{ height: auto; padding: 0; box-shadow: none; gap: 8px; font-weight: 700; } .h3 .h3-cta .btn.link::after{ content: ""; width: 15px; height: 15px; flex: none; background: currentColor; transition: transform .2s cubic-bezier(.4,0,.2,1); -webkit-mask: var(--arrow) center/contain no-repeat; mask: var(--arrow) center/contain no-repeat; } .h3 .h3-cta .btn.link:hover{ text-decoration: none; } .h3 .h3-cta .btn.link:hover::after{ transform: translateX(4px); } /* ---------- the company's own totals, in their quiet voice ---------- */ .h3-micro{ margin: 0; font-size: 13px; color: var(--ink-3); } .h3-micro b{ color: var(--g-green); font-weight: 700; } .h3-micro i{ font-style: normal; color: var(--ink-4); padding: 0 .55em; } /* ---------- the three totals, as a pair of stacked lines ---------- Trimming the kit dropped these with the story card that used to sit beside them, which left V04, V07 and V10 rendering "250+businesses advertised" as one run-on line. */ .h3-stats{ display: flex; align-items: baseline; gap: clamp(20px, 2.6vw, 46px); } .h3-stat{ min-width: 0; } .h3-stat b{ display: block; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-size: clamp(21px, min(2vw, 3.2vh), 29px); } .h3-stat span{ display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); } .h3-lab{ margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; } /* ---------- phones: one gutter, one column, nothing to swipe ---------- */ @media (max-width: 760px){ .h3-shell{ min-height: calc(100svh - var(--barh) - var(--h3-show-m)); } .h3-say{ padding-block: 22px 18px; } .h3-h1{ font-size: clamp(28px, 7.9vw, 35px); } .h3-lede{ font-size: 15.2px; } .h3-cta{ flex-direction: column; align-items: stretch; gap: 14px; } .h3-cta .btn{ width: 100%; } .h3-cta .btn.link{ justify-content: center; } .h3-lede{ line-height: 1.5; } /* 11.6px is what keeps the three totals on ONE line at 390px — a second line costs the reveal 18 of its pixels */ .h3-micro{ font-size: 11.6px; } } /* ========================================================================= V01 · LEDGER RULE — #q7 shows 100% One line of headline across the lane, then the journey as three cells divided by hairlines, edge to edge. ========================================================================= */ .h301 .h3-say{ text-align: center; align-items: center; } .h301 .h3-h1{ margin-top: clamp(14px, 2.2vh, 22px); max-width: none; } .h301 .h3-lede{ margin-top: clamp(13px, 2vh, 19px); max-width: 80ch; } .h301 .h3-cta{ margin-top: clamp(20px, 3vh, 30px); justify-content: center; } .h301 .h3-micro{ margin-top: clamp(13px, 2vh, 18px); } /* white, not --mist: #q7 directly below is --ground (#F4F7FC) and the two greys were merging into one undifferentiated block */ /* -------------------------------------------------------------------------- The reveal, LAST. The kit declares `.h3{ --h3-show: 0px }` as its own default, so this has to come after it or the default wins on order and the hero silently takes the whole screen back — which is exactly what happened on the first apply. -------------------------------------------------------------------------- */ .h3{ --h3-show: 183px; --h3-show-m: 130px; }