/* client_custom.css — 2026-10-06 Loaded AFTER m-and-g-pools-global.css on every page. Post-launch tweaks go HERE, never in global.css, which is regenerated from the approved stylesheet every time Phase 6A runs. Anything added here is outside the client-approved design and carries a dated one-line reason. */ /* ── slider slide ratio — operator, 2026-10-06, scoped 2026-10-07 ────────── The approved sheet sets .slider__slide img to aspect-ratio 16/9. Operator asked for 16/7 - a wider, shallower slide - while reviewing the six service hubs. Overridden here rather than in global.css so that file stays byte-verifiable against the approved r13 stylesheet. SCOPED to body.hub (operator, 2026-10-07). Unscoped it reached all fifteen pages that carry a slider, including the two APPROVED pages that already have one - /services/pool-safety-covers/ and /pool-safety-cover-buying-guide/ - and silently restyled them. Only the six service hubs carry body.hub, which is exactly where the change was asked for. Consequence, deliberate: the other nine revert to the approved 16/9 - the two approved pages above, and the seven resource guides. */ body.hub .slider__slide img{aspect-ratio:16/7} /* ── numbered steps: an incomplete last row CENTRES — operator, 2026-10-06 ── Already the build's own standard for card grids; the approved sheet says so on .donot: "flex rather than grid so the incomplete last row CENTRES, which is the build's standard for card grids." .steps--media is a GRID, so its orphans sat hard left — 05 and 06 under 01 and 02. A grid cannot centre an orphan row on whole columns when the remainder is even, so the tracks are DOUBLED and every item spans two; an orphan row can then start on a half-column and sit centred. Column count, gaps and badge positions are unchanged, so the .steps--rail connector still meets the outer badges. SCOPED to .steps--centre, which only the six service hubs carry. 21 of the carried-over LSP pages also have an incomplete steps row, and they are approved as they stand — this was asked for on the hubs only. */ .steps--media.steps--centre{grid-template-columns:repeat(8, 1fr)} .steps--media.steps--centre > .steps__item{grid-column:span 2} .steps--media.steps--centre.steps--3{grid-template-columns:repeat(6, 1fr)} /* four columns / eight tracks: two orphans start at track 3, one at track 4 */ .steps--media.steps--centre:not(.steps--3) > .steps__item:nth-child(4n+1):nth-last-child(2){grid-column:3 / span 2} .steps--media.steps--centre:not(.steps--3) > .steps__item:nth-child(4n+1):nth-last-child(1){grid-column:4 / span 2} /* three columns / six tracks: two orphans start at track 2, one at track 3 */ .steps--media.steps--centre.steps--3 > .steps__item:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2} .steps--media.steps--centre.steps--3 > .steps__item:nth-child(3n+1):nth-last-child(1){grid-column:3 / span 2} /* stacked: one item per row, so there is no orphan row to centre. This has to restate the single column because the rules above raised the track count. */ @media (max-width:760px){ .steps--media.steps--centre, .steps--media.steps--centre.steps--3{grid-template-columns:1fr} .steps--media.steps--centre > .steps__item{grid-column:auto} } /* -- sticky media column: unblock it -- operator, 2026-10-06 ----------------- The approved sheet sets body{overflow-x:hidden}. That makes the body a SCROLL CONTAINER, and position:sticky then resolves against it rather than the viewport - so .mediasplit--sticky has never actually stuck, on the hub pages or on the two approved pages that already use it (/services/safety-cover-installation/ and /twinsburg-oh/). overflow-x:clip clips exactly the same way but does NOT create a scroll container, so sticky works. Scoped to body.hub rather than applied to body, so it reaches only the pages sticky was actually asked for and the approved pages are left exactly as they are. Carried by the six service hubs, and (operator, 2026-10-06) by /moreland-hills-oh/ and /orange-village-oh/, where the map pins beside a very long text column. The other fourteen location hubs keep a plain . */ body.hub{overflow-x:clip} /* -- the thank-you page's closing band, on white -- operator, 2026-10-07 --- .cta-band is var(--navy-deep) with a photograph and a scrim over it. On /thank-you/ that put a second dark band between a dark hero and the dark footer, so the operator asked for this one white. #FFFFFF is the Brand Guide white, so no colour outside the palette is introduced. Scoped to body.thanks, which only /thank-you/ carries, so every other cta-band on the site is untouched. The photo and scrim come off rather than being covered, and the two on-dark treatments flip: the heading colour, and .btn--ghost-dark, whose white border and white label would otherwise vanish. It becomes the same outline button the light bands already use. */ body.thanks .cta-band{background:#FFFFFF} body.thanks .cta-band__bg,body.thanks .cta-band__scrim{display:none} body.thanks .cta-band .eyebrow{color:var(--ink-strong)} body.thanks .cta-band .btn--ghost-dark{ background:transparent;color:var(--primary);border-color:var(--primary)} body.thanks .cta-band .btn--ghost-dark:hover{ background:var(--primary);color:var(--white);border-color:var(--primary)} /* Centred, because .cta-band__in is a 760px block pinned left and with no heading in it the eyebrow and the two buttons sat in the left third of a white band. Same three declarations the sheet already uses to centre a section head - .sechead--center and its wavemark rule - so this is the design's own centring, not a new one. .btn-row is display:flex, so the buttons take justify-content rather than text-align. */ body.thanks .cta-band__in{margin-inline:auto;text-align:center} body.thanks .cta-band .wavemark{margin-inline:auto} body.thanks .cta-band .btn-row{justify-content:center} /* -- chat widget and the mobile bar -- operator, 2026-10-07 -------------- REVERTED. A transform on was used to lift the bubble clear of .mobilebar, by making the host the containing block for the widget's own position:fixed descendants. It moved the bubble correctly (655-713, clear of the bar's 733 top edge) but it re-based the OPEN chat panel too: the host was 0x0, so the panel had no area to lay out in and the widget vanished on tap. A chat widget that will not open is worse than one that overlaps, so the rule is gone and the widget is back on its own positioning. The overlap it was solving is real and still there on mobile: the bubble is fixed at bottom:20px (an INLINE style inside the widget's shadow root, which no stylesheet here can reach) and lands at 734-792, while .mobilebar occupies 733-812 - and at z-index 99999999 against the bar's 9999 it covers the Call/Specials buttons. SOLVED FROM OUR SIDE INSTEAD. The widget cannot be moved, so the bar gets out of its way: .mobilebar reserves the strip the bubble occupies, and its two buttons stop short of it. 86px = the bubble's own footprint: 58px wide, sitting 20px off the right edge, plus 8px of breathing room. Measured at 375px - "Call Us" ran 192-366 under a bubble at 297-355, and now runs 154-289, clear by 8px. Both buttons keep their full labels (136x59, nothing clipped) and stay well above the 44px tap target. This touches only our own component. No shadow DOM, no containing-block trick, nothing that can reach the chat panel - which is what broke the previous attempt. The bubble still sits over the BAR, but over its background rather than over a button, which reads as deliberate. If the client would rather it sat above the bar entirely, that is a widget setting: raise the chat widget's bottom spacing to ~100px in the GoHighLevel dashboard, and this padding can then come back out. (A second attempt, padding .mobilebar to reserve the strip, was reverted too: squeezing the bar into 75% of the width wrapped "Request a Quote" onto two lines and read as broken.) WHAT ACTUALLY WORKS. The host carries data-active, "false" closed and "true" open, so it can be sized differently in each state - which is what the first attempt got wrong. It used one 0x0 host for both, and the open panel had no area to lay out in, so the widget vanished on tap. closed a 78x78 box parked one bar-height off the bottom. The bubble is 58px with the widget's own 20px inset, so that is exactly its footprint. It lands at 655-713, clear of the bar at 745. open the full viewport MINUS the bar, so the panel lays out at its natural size and simply stops above the bar instead of under it. Measured: host 375x733, panel renders complete - greeting, name, phone, message, consent, Send. pointer-events is deliberately NOT used to stop the open host covering the page: it inherits through the shadow boundary and disabled the bubble outright (hit-testing returned the page element behind it). It is not needed either - when the panel is open it covers the screen anyway, and when closed the host is only 78px square. z-index 9997 keeps it under the bar (9999) and the nav drawer (9998), so an open drawer covers it, as it should. Mobile only, on the same 768px breakpoint the bar uses; above that .mobilebar is display:none and the widget is left entirely alone. 79px = .mobilebar's height. If that bar is re-sized, this moves with it. */ /* -- trust strip: let a long chip wrap -- operator, 2026-10-07 ----------- 56 pages ran their trust-strip text off the right edge at phone width, and `body{overflow-x:hidden}` clipped it, so the copy was CUT OFF mid-sentence rather than merely overflowing. 10 pages did it at 1440 too. Worst case /waite-hill-oh/: the item was 526px wide with its right edge at 571 on a 390 viewport. The markup is `Family-owned since 2012; 30+ years in the trade, 50+ years combined` and the `` inherits `white-space: nowrap`. That is RIGHT for what the approved design puts there - r13's own trustline carries short chips: "30+ / 50+", "Years in the trade", "7", "Field technicians" - and wrong for a sentence. 6B put sentence-length copy into a chip slot. So the nowrap is relaxed only where it cannot be honoured. A chip that fits still renders on one line, because normal wrapping never breaks a line that has room - the approved short chips are untouched. Measured on /waite-hill-oh/ at 390px: item width 526 -> 301, right edge 571 -> 346, 0 still overflowing. COST, accepted deliberately: the band grows 59px taller on mobile (105 -> 164) where a chip wraps to three lines. The alternative was rewriting the copy on 56 pages, which is a content decision, not a build one. */ .trustline b{white-space:normal} /* -- inline link inside a tile -- operator, 2026-10-07 -------------------- An inline .tlink in a tile's prose rendered as a FULL-WIDTH WHITE CARD in the middle of its sentence: "...it belongs to the close — see [ cover-on timing in Solon ] for how the correct band is set." Not a markup bug. The anchor is a plain inline inside a

inside a .tile. The approved sheet styles the tile-as-link pattern with a DESCENDANT selector — .nexttiles a{display:block;border:1px solid var(--hair); border-top:3px solid var(--aqua);border-radius:var(--r); padding:22px 24px;background:rgba(255,255,255,.035)} — so it paints every anywhere inside a .nexttiles, including one nested in a tile's prose. .tlink sets display:inline-flex but loses the cascade: .tlink is (0,1,0) and .nexttiles a is (0,1,1). This is Cortex L-047 exactly: a container rule written for layout repainting something nested inside it. The sheet's own author knew tiles were not tiles-as-links — the comment on .nexttiles .tile says they "cannot just reuse the .nexttiles a rule" — but nothing guarded an INSIDE a tile, because r13 never produces that shape: it has zero .tlink inside a .tile. 6B introduced it, legitimately, by linking out of tile prose. Specificity, deliberately exact: the strongest competing rule is .theme-light :is(.band-navy,.band-deep):not(.band--keepdark) .nexttiles a at (0,4,1). The doubled .tlink below is also (0,4,1), and client_custom loads after the global sheet, so it wins on source order rather than by escalating — which is what L-047 prescribes ("make the guard the literal last rule"). No !important. Every value restored is .tlink's own, read off the approved sheet; the transparent bottom border is what its :hover underline animates. */ .nexttiles .tile a.tlink.tlink{ display:inline-flex;padding:0;border:0;border-radius:0; border-bottom:2px solid transparent;background:transparent } /* -- wrappers for the WebP fallback -- operator, 2026-10-07 ----- The image pass built a WebP sibling for all 95 AVIFs, but every one of the site's 164 references was a plain - no anywhere - so no browser could ever request a sibling. They are now wrapped (picture_wrap.py), which is what makes the fallback real. A wrapper changes one thing: the image is no longer a direct child of the element it used to be a child of. Three rules in the approved sheet depend on exactly that, and would otherwise break: .cta-band__bg{position:absolute;inset:0} 95 images .mediasplit--fill .mediasplit__media img{flex:1} 8 images, a flex ITEM .trust__grid > .trustmedia > img 14 images, direct CHILD display:contents removes the box from the box tree altogether, so the is laid out exactly as if the wrapper were not there - it is once more the flex item of .mediasplit__media and the absolutely positioned child of .cta-band. That restores the first two with no per-component rules at all. This is the whole reason the wrapper is safe; without it the fill-variant media columns collapse. display:contents does NOT change selector matching, so the third one - the only direct-child selector in the sheet that targets an image - is restated below for the wrapped shape. Both declarations are copied verbatim from m-and-g-pools-global.css, including the 900px breakpoint; nothing here is a new design decision, it is the approved rule reaching the element it was written for. */ picture{display:contents} .trust__grid > .trustmedia > picture > img{ position:absolute;inset:0;width:100%;height:100%; aspect-ratio:auto;object-fit:cover} @media (max-width:900px){ .trust__grid > .trustmedia > picture > img{ position:static;width:100%;height:auto;aspect-ratio:4/3} } @media (max-width:768px){ chat-widget[data-active="false"]{ display:block;position:fixed;right:0;bottom:79px;width:78px;height:78px; transform:translateZ(0);z-index:9997 } chat-widget[data-active="true"]{ display:block;position:fixed;top:0;left:0;right:0;bottom:79px; transform:translateZ(0);z-index:9997 } } /* Mobile bar - "Request a Quote" must hold one line on every phone. Operator request 2026-10-07. The label is NOT changed; this is spacing. The bar gives each button `flex:1 1 0`, so each gets exactly half the viewport minus the bar's padding and gap. At 320px that left 118.5px of content box for a label whose single line measures 146.4px at the approved 15px/700 Open Sans - a 28px shortfall, which is more than the button's own padding can return. Hence two steps: 1. <=768px tighten the bar's gap 9->6, its padding 9->6 and each button's padding-inline 12->6, and set white-space:nowrap. That buys 23px/button and holds the approved 15px down to ~352px. 2. <=359px tighten once more (4px) AND step the label to .875rem. Below ~352px no amount of spacing fits 15px, so the type gives. nowrap alone is NOT the fix and was rejected: the buttons are centered flex, so an overlong label overflows both edges silently without growing scrollWidth - it reports one line while visibly spilling. The measured test is content-box width minus rendered text width. Verified Chromium + WebKit at 320/344/350/359/360/375/384/390/393/412/ 414/430: one line everywhere, slack +5.4px at worst (WebKit 320), 48px height retained at every width. "Call Us" is unaffected (+80px slack). */ @media (max-width:768px){ .mobilebar{gap:6px;padding-inline:6px} .mobilebar a.btn{padding-inline:6px;white-space:nowrap} } @media (max-width:359px){ .mobilebar{gap:4px;padding-inline:4px} .mobilebar a.btn{padding-inline:4px;font-size:.875rem} } /* Hero eyebrow - the accent rule sits on the FIRST line when the text wraps. Operator request 2026-10-07. `.hero__eyebrow` is an inline-flex with `align-items:center`, so its `::before` rule is centred against the whole text block. On one line that is correct and on two it floats into the gap between them, which is what the phone screenshot showed. Fixed on the pseudo-element alone via `align-self`, so the container's `align-items:center` is left as the approved sheet wrote it, and the wrapped text keeps its indent under the first line (a `display:block` + inline-block rule would also solve the alignment, but it would pull line two back under the rule and change the wrap shape, which was not asked for). Offset = half the line box, less half the rule: (1lh - 3px)/2. The `em` value is the same arithmetic against the inherited line-height of 1.65 (13px x 1.65 = 21.45px -> 9.225px) and carries browsers without the `lh` unit; where `lh` is supported it takes over and self-corrects if the type scale ever moves. One line is unaffected by construction: centring and first-line alignment are the same position when there is only one line. Measured, not assumed - rule centre vs first line-box centre is within 0.01px at 320/375/390/430/ 768/1280, before and after, in Chromium and WebKit. */ .hero__eyebrow::before{align-self:flex-start;margin-top:calc((1.65em - 3px)/2)} @supports (margin-top:1lh){ .hero__eyebrow::before{margin-top:calc((1lh - 3px)/2)} } /* Trust band chips flow as text on mobile - operator, 2026-10-07. Desktop (>900px) is deliberately untouched. `.trustline > span` is `display:flex`, so every `` AND every run of plain text between them becomes its own flex item. Wide enough, the items sit on one row and the chip reads as a sentence, which is the desktop appearance. Narrow, each item wraps INSIDE ITS OWN COLUMN, and the chip turns into a ragged grid - "Family-owned since 2012" over one column, "30+ years" over the next, "in the trade," over the next. That is the phone screenshot. `display:block` returns the chip to normal inline flow: the `` run inline, the text between them inline, and the whole chip wraps as one paragraph the way it reads on desktop. The markup already carries the real spacing ("; ", " in the trade, "), so the flex `gap:.45em` that stood in for those spaces is not needed once the items are inline again - and `align-items:baseline` is replaced by the inline baseline alignment that mixed 13px/18px text gets for free. 900px is this sheet's own breakpoint for the band - the one that collapses `.trust__grid` to a single column (25 uses, the dominant breakpoint in the file), so the chips switch exactly where the band itself goes to its stacked form. Measured on /aurora-oh/, the worst case (two chips, one a full sentence): inner column breaks 4 -> 1 at 320/390/430/560, and the one that remains is the long bold phrase wrapping as ordinary text, which is correct. The band also gets SHORTER - 189 -> 139px at 390px - recovering most of the 59px the `white-space:normal` note above booked as a cost. Unchanged at 901, 1024 and 1280. */ @media (max-width:900px){ .trustline > span{display:block} } /* 1. Hairline under the NON-STICKY header only - operator, 2026-10-07. The stuck header is explicitly out of scope: it keeps the 2px Sunshine border the approved sheet gives it, and `:not(.is-stuck)` is what keeps this rule off it. Desktop and mobile alike. The header is `position:absolute;left:0;right:0`, so the line runs the full viewport width over the hero. It adds 1px to the header's own box (102 -> 103px) and moves nothing inside it: `.header-inner` is a separate box, so the logo, nav and burger do not shift, and `.mega` anchors to `.header-inner` rather than to the header, so the panel is unaffected. */ .header:not(.is-stuck){border-bottom:1px solid rgba(255,255,255,.15)} /* 2. Mobile menu opens BELOW the header, which stays put - operator, 2026-10-07. Measured first, because the complaint and the cause are different things: the real header never moved. `.header` reads top=31px closed AND open, and top=0 when stuck, in both states. What moves is that `.drawer` is `position:fixed;inset:0` - a full-screen panel that COVERS the header and paints its own logo at a different size and offset (22px/56px, against the header's 49px/66px, or 10px/54px when stuck). The eye reads the duplicate as the header having jumped. It had not. So the panel is moved down to start exactly at the header's bottom edge, and the duplicate logo is dropped - the real one is now visible directly above it. The two offsets are the header's own geometry, written out so they stay readable: 31 + 18 + 66 + 18 + 1 = 134px, and when stuck 10 + 54 + 10 + 2 = 76px. `.drawer` is a SIBLING that follows `.header`, which is what makes `.header.is-stuck ~ .drawer` able to switch the offset with the state. `.drawer__top` KEEPS its close button. The burger only ever opens the drawer - `b.addEventListener('click',function(){set(true)})` - so the close button, a link tap, or Escape are the only ways out. Hiding that row wholesale would trap the menu open. Only the `` goes, and the row is pushed right so the button keeps its corner. The `:has()` rule covers the one scroll position where this would otherwise leave a gap: between 1 and 90px the header is still `absolute` and has scrolled partly off-screen, while the drawer is fixed. Pinning it for the duration of the open menu makes the two meet at every scroll position. It changes nothing at rest, since `absolute` at top:31px and `fixed` at top:31px are the same place when the page is at the top - and the script sets `documentElement.overflow:hidden` while open, so the page cannot scroll underneath it either way. Verified at 390px, header top / logo top / logo height identical open and closed, scrolled and not: 31/49/66 unstuck, 0/10/54 stuck, and the drawer meets the header edge with a 0px gap in all four. */ @media (max-width:900px){ body:has(.drawer[data-open="true"]) .header{position:fixed} .drawer{top:calc(0px + 18px + 66px + 18px + 1px)} /* header top is 0 since the ribbon went */ .header.is-stuck ~ .drawer{top:calc(10px + 54px + 10px + 2px)} .drawer__top{display:none} } /* 3. The burger IS the close control - operator, 2026-10-07, sitewide. Supersedes the "KEEPS its close button" note above. That constraint was real while the burger could only open: removing the drawer's own button would have trapped the menu. The markup change below removes that constraint rather than working around it, so `.drawer__top` is now hidden outright - which also closes the empty-panel-band item that change left open. Markup/script, applied to all 135 built pages by `burger_toggle.py`: - the listener toggles on `data-open` instead of always opening - `set()` writes `aria-label` (Open menu / Close menu) beside the `aria-expanded` it already wrote - `