/* ========================================================================== site/scroll-quiet.css · NO HORIZONTAL SCROLL LINE ANYWHERE Written 2026-09-20. Linked LAST in the of all six live pages, after site/grid.css. The brief: every visible horizontal scrollbar and scroll-TRACK line goes; the scrolling itself — wheel, swipe, drag, keyboard and the arrow buttons — stays exactly as it is. Nothing is removed from the markup and no script is touched. --------------------------------------------------------------------------- WHAT WAS ACTUALLY SHOWING — audited, not guessed --------------------------------------------------------------------------- Every horizontal rail on the site was already quiet: .mp-row, .kids, #gsvc-six, .w8-rail, .hp-rail, .c7-rail, .ss-rail, .s3-track, .s3-tabs, .s3-catrail, .v03-rail, .ab-ftabs, .pr-row, .hr-list, .w3-rail, .px-rev-track, .gfaq-scroll and the rest all set `scrollbar-width: none` plus `::-webkit-scrollbar{display:none}` in their own sheets. Measured across 6 pages × 5 viewports: ZERO native horizontal bars painting. The lines the eye was catching are not scrollbars at all. They are two hand-built scroll indicators, both on the homepage: span.c7-bar > i #hp1 Client Proof — the pager between the < and > buttons. Track #C9D3E0, fill #1F8FEA. THIS is the blue/grey line under the Client Proof cards. div.ixr-track > i #indwork the All Work deck — track #E3E9F1, thumb #A3B4CA, sitting on the deck's bottom edge. Nothing on google-ads, about-us, our-management, legal-documents or contact-us draws one. Those five needed no change and get none; they load this file only so the rule below travels with the site. UNDO: delete the one line that loads this file from each page. ========================================================================== */ /* ========================================================================== 1 · NO NATIVE HORIZONTAL BAR, ON ANY SCROLLER, EVER Insurance, not a repair. site/uifinish.css is the site's scrollbar system and paints a styled bar on every scroller that does not opt out — `*{scrollbar-width:thin}` plus a styled ::-webkit-scrollbar. Each rail opts out by hand today, so a rail added tomorrow, or one that only overflows at a width nobody tested, would start drawing a line again. `:horizontal` is the whole point: it takes the horizontal bar and leaves every vertical one alone, so the page's own scrollbar, the FAQ answer well (.gfaq-scroll), the Client Proof list (.c7-list), the drawer (.gfc-body) and the contact form's textarea all keep the bar they need. Five scrollers on the site have overflow-x:auto only because `overflow:auto` sets both axes; none of them overflows sideways, and this rule means none of them ever can show a line if one day it does. Firefox is already covered and is deliberately NOT given `scrollbar-width:none` here: that property has no per-axis form, so setting it would take those five scrollers' VERTICAL bars away too. Every element that genuinely scrolls sideways already declares it in its own sheet. ========================================================================== */ ::-webkit-scrollbar:horizontal{ display: none !important; height: 0 !important; } /* ========================================================================== 2 · CLIENT PROOF · the blue/grey line under the cards #hp1's pager is `[ < ][=== bar ===][ > ]`, and .c7-bar is the flex:1 item that holds the two buttons apart. So it is made INVISIBLE, not display:none — dropping it out of flow would collapse the arrows together and change an approved layout. Transparent leaves the pager's geometry to the pixel and takes only the line. Safe against the script: home-proof/client-proof.js treats .c7-bar purely as a readout. paint() measures the RAIL (r.clientWidth / r.scrollWidth) and writes `width` and `left` onto the ; it never reads the bar's own box, and the element carries aria-hidden="true", so nothing is announced either. Both arrows, their disabled states, wheel, swipe, drag and the arrow keys are untouched. !important because home-system/home.css paints this at (0,4 ids,…) in two places (the base .c7-bar and the .c7home skin) — but WITHOUT !important, so one flag here settles both without having to restate their selectors. ========================================================================== */ html body #hp1 .c7-bar, html body #hp1 .c7-bar > i{ background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; } /* ========================================================================== 3 · ALL WORK · the deck's track #indwork's .ixr-track is a real scrollbar substitute, not just a readout: home-industries/ind-launcher.js gives it click-to-jump and thumb-drag. It is `position:absolute; left:0; right:0; bottom:2px`, so removing it from flow shifts nothing. display:none rather than transparent, on purpose. Left visible-to-the-mouse but invisible to the eye, its 4px strip — widened to 20px by its own ::before — would stay clickable, and a click would jump the deck from a control nobody can see. Hiding a scrollbar means giving up dragging that scrollbar; it does not touch the deck itself, which has its own pointer drag handler (ind-launcher.js, `deck.addEventListener('pointerdown', …)`), touch swipe, the wheel, and the launcher's own controls. Safe against the script: track() only writes styles onto the thumb, and the pointer handlers are bound to an element that can no longer receive events, so getBoundingClientRect() is never called on a zero box. The script already hides this element itself (`tr.hidden = !on`), so display:none is a state it is built to be in. The matching selector weight is ind-launcher.css's own — it paints the track with !important at four ids. ========================================================================== */ html body #indwork#indwork#indwork#indwork .ixr-track{ display: none !important; }