/* ========================================================================== home-industries/ind-fix.css · INDUSTRIES WE SERVE — UI correction Written 2026-09-20. Linked LAST in the of index.html, after site/scroll-quiet.css. Appearance and layout only; no markup, no script. THE BRIEF --------- 1. the small blue corner marker on the chosen audience key goes 2. no slider line under the right-hand content; the active indicator belongs directly under the two top tabs instead 3. the category list shows TWO rows at a time and scrolls vertically 4. clean and aligned on desktop and on a phone WHY A SEPARATE FILE, AND WHY SEVEN IDS -------------------------------------- Three layers already paint this section, in this order: home-industries/ind-launcher.css html body #indwork x4 + !important home-system/home.css html body #indwork x6 + !important site/scroll-quiet.css html body #indwork x4 + !important The blue corner dot is NOT ind-launcher's 7px ::after (that one is transparent until a sheet fills it) — it is painted into the BACKGROUND by home.css's n4q-tabs-v1-fill block: radial-gradient(3.5px at calc(100% - 9px) 9px, #1F8FEA 0, #1F8FEA 3.5px, transparent 3.6px), #C6D9F4 at six ids. That block is shared with All Work, Our Services, Client Proof and About, so it must not be edited — every rule here is scoped to #indwork and carries SEVEN ids so it settles the whole stack without touching any other tab set on the page. The "slider line under the content" is .ixr-track, the deck's scrollbar substitute (ind-launcher.js builds it, scroll-quiet.css already hides it). It is hidden here too, unconditionally, and the 16px the deck used to reserve for it is given back to the chips. UNDO: delete the one line that loads this file from index.html. ========================================================================== */ /* ========================================================================== 0 · TOKENS Every size the two-row rule depends on is declared once, here, so the row height stays exactly "half of what is left" if any of them is retuned. rail height = card height - its own two borders - the tab strip rail viewport = rail height - the rail's top and bottom padding row height = (rail viewport - two gaps - the peek) / 2 so the rail holds exactly two whole rows and 16px of the third. The peek is deliberate and it is the only thing that says the list goes on: this machine's Chrome draws an OVERLAY scrollbar here (styling ::-webkit-scrollbar no longer forces a classic one once scrollbar-width is set anywhere, and site/uifinish.css sets it on *), so at rest there is no bar to see, and the site carries no edge fades. 16px shows the top edge of the next row's tiles and nothing of their contents, so it reads as "more below", not as a third row. ========================================================================== */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card{ --ind-gut: 16px; /* the strip's and the rail's side inset */ --ind-tabh: 50px; /* one tab's height = the tab strip's height */ --ind-railpad: 12px; /* the rail's top and bottom padding */ --ind-gap: 10px; /* between tiles, both axes */ --ind-peek: 16px; /* how much of row three shows (see section 5)*/ --ind-bord: 1px; /* the card's own border, top and bottom */ --ind-cardh: 430px; /* desktop only; the phone card is auto */ --ind-line: #DDE5F0; /* every hairline in the card */ --ind-tile: #DFE6F0; /* a tile's own hairline */ --ind-ink: #41506A; --ind-ink-on: #004594; --ind-act: #1F8FEA; } /* ========================================================================== 1 · THE CORNER MARKER GOES background-image, not background: the fill colour behind the dot is set in the same shorthand, and the states below re-declare it anyway. ::before and ::after are shut off too — ind-launcher.css keeps a 7px ::after on every key for exactly this kind of dot, and .v03-seg::after (section 2) is a different element, so nothing here can bring it back. ========================================================================== */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb:hover, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb.is-on, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb.is-on:hover, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row.is-on .iw2-icn, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row:hover .iw2-icn{ background-image: none !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb::before, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb::after, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row::before, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row::after{ content: none !important; display: none !important; } /* ========================================================================== 2 · THE TAB STRIP · the active indicator sits under the two tabs One bar across the top of the chooser: two equal keys, a hairline running under both of them, and a 3px blue indicator on that hairline under the key you are on. It slides because it is ONE element — .v03-seg::after, half the strip's inner width — moved by exactly its own width. The state it reads, data-ixq7-mode on the card, is written by ind-launcher.js (sync()) on load and on every switch, so no script had to change. The keys are plain words now: no box, no ring, no fill. The only marks of the chosen key are its colour and the indicator under it, which is the whole point of moving the indicator here. ========================================================================== */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-top, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-body{ display: contents !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-seg{ position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 var(--ind-gut) !important; background: #FFFFFF !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 -1px 0 var(--ind-line) !important; overflow: visible !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb{ position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: auto !important; min-width: 0 !important; height: var(--ind-tabh) !important; min-height: var(--ind-tabh) !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #5B6778 !important; font-size: 14.5px !important; font-weight: 650 !important; letter-spacing: 0 !important; white-space: nowrap !important; transition: color .16s cubic-bezier(.4, 0, .2, 1) !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on):hover, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb:not(.is-on):active{ background: transparent !important; box-shadow: none !important; color: #0E1E35 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb.is-on, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb.is-on:hover{ background: transparent !important; box-shadow: none !important; color: var(--ind-ink-on) !important; font-weight: 700 !important; cursor: default !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: -3px !important; } /* the key's mark: a plain 18px glyph that takes the key's own colour, so the chosen key is one colour from glyph to indicator */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .ix3-aicn{ display: grid !important; place-items: center !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; transition: none !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb.is-on .ix3-aicn{ background: transparent !important; color: inherit !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .ix3-aicn :is(svg, svg *){ stroke: currentColor !important; } /* the indicator itself */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-seg::after{ content: "" !important; position: absolute !important; left: var(--ind-gut) !important; bottom: 0 !important; z-index: 1 !important; width: calc((100% - 2 * var(--ind-gut)) / 2) !important; height: 3px !important; margin: 0 !important; padding: 0 !important; background: var(--ind-act) !important; border-radius: 0 !important; transform: translateX(0) !important; transition: transform .26s cubic-bezier(.4, 0, .2, 1) !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card[data-ixq7-mode="b2b"] .v03-seg::after{ transform: translateX(100%) !important; } /* ========================================================================== 3 · NO SLIDER UNDER THE CONTENT .ixr-track is display:none rather than transparent on purpose: its own ::before widens it to a 20px pointer target, and a track nobody can see would still jump the deck when clicked. ind-launcher.js already hides it itself when the deck does not scroll (`tr.hidden = !on`), so this is a state it is built to be in; the deck keeps its own pointer drag, its touch swipe and the wheel. .ixr-vtrack is its vertical twin and never shows. ========================================================================== */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .ixr-track, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .ixr-vtrack{ display: none !important; } /* ========================================================================== 4 · THE TILE Shared by both layouts: a real bounded tile — white face, hairline edge, glyph over a two-line name — so the chosen one can be marked by its own surface instead of by a dot in its corner. ========================================================================== */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row{ position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 10px 7px !important; background: #FFFFFF !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--ind-tile) !important; color: var(--ind-ink) !important; text-align: center !important; scroll-snap-align: start !important; transition: background-color .14s cubic-bezier(.4, 0, .2, 1), box-shadow .14s cubic-bezier(.4, 0, .2, 1), color .14s cubic-bezier(.4, 0, .2, 1) !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn{ display: grid !important; place-items: center !important; flex: 0 0 auto !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #5E6B7C !important; transition: color .14s cubic-bezier(.4, 0, .2, 1) !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn svg{ width: 25px !important; height: 25px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn :is(svg, svg *){ stroke: currentColor !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row > span:last-child{ flex: 0 0 auto !important; width: 100% !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .v03-nm{ display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; white-space: normal !important; color: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.24 !important; letter-spacing: -.012em !important; /* two lines' worth whether the name needs one or two: without it a tile whose name fits on one line centres a shorter stack and its glyph sits lower than its neighbours' — visible as a wavy row of icons */ min-height: 2.48em !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on):hover{ background: #F5F9FF !important; box-shadow: inset 0 0 0 1px #B7CDEA !important; color: #0E1E35 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on):hover .iw2-icn{ background: transparent !important; box-shadow: none !important; color: #0E1E35 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row:not(.is-on):active{ background: #EDF3FC !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row.is-on, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row.is-on:hover{ background: #E8F1FE !important; box-shadow: inset 0 0 0 2px var(--ind-act) !important; color: var(--ind-ink-on) !important; cursor: default !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row.is-on .iw2-icn{ background: transparent !important; box-shadow: none !important; color: var(--ind-ink-on) !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row.is-on .v03-nm{ color: var(--ind-ink-on) !important; font-weight: 700 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row:focus-visible{ outline: 2px solid #0760C6 !important; outline-offset: -3px !important; } /* the rail's bar: slim, quiet, and on for good. Chrome switches a scroller from an overlay bar to a classic one as soon as ::-webkit-scrollbar is styled, which is what makes "there is more below" visible at rest on a Mac. Only the VERTICAL bar is asked for; site/scroll-quiet.css kills every horizontal one site-wide and that is left alone. */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail{ scrollbar-width: thin !important; scrollbar-color: #C2CFE0 transparent !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail::-webkit-scrollbar{ width: 6px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail::-webkit-scrollbar-track{ background: transparent !important; border: 0 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail::-webkit-scrollbar-thumb{ background: #C2CFE0 !important; border: 0 !important; border-radius: 999px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail::-webkit-scrollbar-thumb:hover{ background: #A2B3C9 !important; } /* ========================================================================== 5 · DESKTOP (>= 960px) The card is one grid: [tab strip][chooser] down the left, the sheet down the right. The chooser is four tiles across and exactly TWO DEEP — the row height is computed from the card's own height, so the third row starts on the rail's bottom edge and the list scrolls to it. Four across, not the six it was: the rail has a fixed height to divide in two, so a row is ~170px tall whatever is in it. Six across made that row 87px wide — a tile two and a half times taller than it is wide. Four keeps the tile roughly 3:4 and still shows eight of the eighteen at once. ========================================================================== */ @media (min-width: 960px){ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card{ --ind-gut: 18px; --ind-tabh: 54px; --ind-railpad: 14px; --ind-cardh: clamp(410px, 32vw, 450px); --L: clamp(500px, 46%, 560px); --ind-rowh: calc((var(--ind-cardh) - 2 * var(--ind-bord) - var(--ind-tabh) - 2 * var(--ind-railpad) - 2 * var(--ind-gap) - var(--ind-peek)) / 2); position: relative !important; display: grid !important; grid-template-columns: var(--L) minmax(0, 1fr) !important; grid-template-rows: var(--ind-tabh) minmax(0, 1fr) !important; height: var(--ind-cardh) !important; padding: 0 !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #D3DAE6 !important; border-radius: 0 !important; box-shadow: none !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-seg{ grid-column: 1 !important; grid-row: 1 !important; } /* the chooser */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail{ grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: var(--ind-rowh) !important; grid-auto-columns: auto !important; grid-auto-flow: row !important; align-content: start !important; gap: var(--ind-gap) !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: var(--ind-railpad) var(--ind-gut) !important; background: #F6F9FD !important; border: 0 !important; box-shadow: none !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable !important; scroll-snap-type: y proximity !important; /* the snapport, not the scrollport: with the default scroll-padding of 0 the first tile snaps its top edge to the rail's top BORDER and the 14px of padding above it is scrolled away on load */ scroll-padding: var(--ind-railpad) 0 !important; scroll-behavior: smooth !important; overscroll-behavior-y: auto !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail::-webkit-scrollbar{ display: block !important; } /* the sheet — it runs the full height of the card, tab strip included, so the two columns read as one object rather than as a header over both */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-panel{ grid-column: 2 !important; grid-row: 1 / -1 !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; border: 0 !important; box-shadow: inset 1px 0 0 #D3DAE6 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-head{ grid-template-columns: 46px minmax(0, 1fr) !important; column-gap: 14px !important; padding: 22px 28px 0 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-head > .iw2-icn{ width: 46px !important; height: 46px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-head > .iw2-icn svg{ width: 23px !important; height: 23px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-name{ font-size: 26px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-desc{ margin: 9px 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-label{ margin: 20px -28px 0 !important; padding: 13px 28px 0 !important; } /* no padding-bottom: the 16px under the well was the slider's lane */ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-deckwrap{ flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; margin: 10px 28px 14px !important; padding: 0 !important; overflow: hidden !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card[data-ixq7-deck="wrap"] .v03-deckwrap{ height: auto !important; padding-bottom: 0 !important; } } /* ========================================================================== 6 · PHONE AND TABLET (<= 959px) The same tab strip, full width, with the same indicator under it. The chooser keeps its two rows — it is already two deep here — and keeps sliding sideways rather than becoming a second vertical scroller inside a page that already scrolls vertically under a thumb. A tile is cut in half at the right edge, not a word, which is what the tile surface buys. ========================================================================== */ @media (max-width: 959px){ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card{ --ind-gut: 14px; --ind-tabh: 50px; --ind-railpad: 12px; --ind-gap: 8px; position: relative !important; display: block !important; height: auto !important; padding: 0 !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #D3DAE6 !important; border-radius: 0 !important; box-shadow: none !important; container-type: inline-size !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail{ display: grid !important; grid-auto-flow: column !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; grid-template-columns: none !important; grid-auto-columns: clamp(92px, calc((100cqw - 2 * var(--ind-gut) - 3 * var(--ind-gap)) / 3.5), 124px) !important; gap: var(--ind-gap) !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: var(--ind-railpad) var(--ind-gut) !important; background: #F6F9FD !important; border: 0 !important; box-shadow: inset 0 -1px 0 var(--ind-line) !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scroll-padding: 0 var(--ind-gut) !important; scroll-behavior: smooth !important; overscroll-behavior-x: contain !important; scrollbar-width: none !important; --ixq4-nopeek: 1 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail::-webkit-scrollbar{ display: none !important; width: 0 !important; height: 0 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row{ padding: 9px 6px !important; gap: 7px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn{ width: 34px !important; height: 34px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn svg{ width: 22px !important; height: 22px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .v03-nm{ font-size: 11.5px !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-panel{ display: flex !important; flex-direction: column !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; border: 0 !important; box-shadow: none !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-head{ grid-template-columns: 38px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 14px var(--ind-gut) 0 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-label{ margin: 13px calc(-1 * var(--ind-gut)) 0 !important; padding: 11px var(--ind-gut) 0 !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-deckwrap{ flex: none !important; height: 168px !important; min-height: 0 !important; margin: 8px var(--ind-gut) 14px !important; padding: 0 !important; overflow: hidden !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card[data-ixq7-deck="wrap"] .v03-deckwrap{ height: 168px !important; padding-bottom: 0 !important; } } @media (max-width: 400px){ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb{ gap: 7px !important; padding: 0 4px !important; font-size: 13px !important; } } /* ========================================================================== 7 · REDUCED MOTION — the indicator appears under the chosen key instead of travelling to it; everything else in the card is already covered by ind-launcher.css's own reduced-motion block. ========================================================================== */ @media (prefers-reduced-motion: reduce){ body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-seg::after, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-segb, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row, body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-row .iw2-icn{ transition-duration: .01ms !important; } body #indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-rail{ scroll-behavior: auto !important; } }