/* ========================================================================== OUR SYSTEM + WHY CHOOSE US — the settled composition 2026-09-20 -------------------------------------------------------------------------- SCOPE. Part 1 (the interior rhythm) dresses BOTH sections, because Our System and Why Choose Us are literally the same component and the client asked for the same UI on each. Parts 2-4 (the close) are #w8-system only: #wcu-ga's .w8-wrap has exactly two children, .w8-head and .w8-area — it has no closing row and no CTA, and none is added. Everything is written at 3-0-0 (the id three times, or a triple :is() pair for the shared half) so it settles above gads-system-live-f5's 2-1-0 pair without !important. Appearance only: no markup, no script, no words, and no horizontal alignment — every inset is read from the section's own --w8-pad / --pad, so the left-right correction being made elsewhere carries straight through. TO UNDO: delete the single to this file in google-ads.html. WHAT WAS WRONG (measured at 1440 before this file) 996.9 tall = 68.8 pad + head 131.8 + gap 40.3 + module 494.3 + gap 18 + close 186.7 + 57 pad. · The close row was 204.7px — 41% of the module it closes. A saturated #C6D9F4 card 910 x 187 sat beside a 49px line of text, so the page carried TWO heavy blue blocks (the tab band and the CTA) bracketing the white cards: the eye read two sections, not one, and the CTA won. · A card was 349 tall on 410 wide and 221 of that was the checklist foot — six ONE-LINE rows (longest 265px of a 357px box, measured) opened out on an 11px gap inside 20/24 padding. Nothing there needed the height. · 40px above the module, 32px of panel padding and an 81px dock stretched what is only ever a three-card stage. WHAT THIS DOES — proportion, not shrinking. Every word and control is kept and nothing a reader reads gets smaller: the checklist rows stay 14.8px, the card sentence stays 15px, the CTA paragraph stays 15px. Only the CTA's own heading steps down (20 -> 17px), because it is a supporting action and was set one size off the card titles it sits under. 1 · the heading sits 28px above the module, not 40 2 · the dock gives back 6px, the panel 8 top and bottom 3 · the card's rhythm tightens 36px — 26/8/22 + 20/11/24 becomes 21/6/15 + 15/9/17. 9px between one-line rows is air, not density. 4 · THE CLOSE BECOMES THE MODULE'S TWO BOTTOM DRAWERS. It is welded on (margin-top 0) and carries the same 2px #C6D9F4 edge, so the frame that starts at the tab band now ends under the CTA: +--------------------------------------+ | #### tab band #### | | three cards | |--------------------------------------| seam | Every account ... audit -> | | white |--------------------------------------| seam | Already running ... [ key ] | #F2F6FC +--------------------------------------+ A CTA cannot read as a separate section while it is a drawer of the section above it. It goes from a 187px saturated card to a ~103px pale strip on the same tint as the card feet, and the closing sentence stops being a stranded 380px column beside it — it spans the module and puts its audit link out on the right, where a foot row's action belongs. MEASURED, Our System at 1440: 996.9 -> 879.3 (-12%); the CTA from 18.7% of the section to 11.8%; one blue band on the screen instead of two. Hierarchy reads module > closing line > CTA in that order, in colour weight and in mass. WHY CHOOSE US (added the same day, at the client's request: "same UI apply and do not keep there CTA"). It takes part 1 and nothing else — it has no closing row to weld and none was invented for it, so its module simply ends on its own bottom edge while Our System's ends on two drawers. That is the only difference between them now, and it is the right one: one section carries the page's action, the other does not. MEASURED, Why Choose Us at 1440: 868.2 -> 803.7 (-7.4%), module 586.3 -> 533.3, card 441 -> 410. Shorter at every width from 1920 to 861; the phone is untouched by design. The long third tab name still holds one row at 1180/1100/1024/960/900/861. Page 6906 -> 6723. Outside these two sections exactly ONE element differs at any width — #top, by the height they gave back. ========================================================================== */ /* ========================================================================== 1 · THE VERTICAL RHYTHM, SHARED BY BOTH SECTIONS -------------------------------------------------------------------------- #w8-system and #wcu-ga are one component wearing one skin, so one set of numbers keeps them reading as a pair — which is the whole point of putting them one under the other. Desktop and tablet only: the phone was tuned in gads-system-live-f5 (its .wcs label/detail rows especially) and is left exactly as approved. Why Choose Us measured before this file, at 1440: 868.2 tall = head 131.8 + gap 40.3 + module 586.3, and the module is five cards at 441 — a 26/8/22 + 20/11/24 rhythm around a name that runs to two lines and a sentence that runs to three. It takes the same four numbers as Our System. ========================================================================== */ @media (min-width: 861px){ /* the heading and the module are one unit, not two blocks. .w8-head's own 40px bottom margin and .w8-area's 40.32px top margin COLLAPSE into each other, so both have to move or nothing does. */ :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-head{ margin-bottom: 0; } :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-area{ margin-top: clamp(24px, 2vw, 30px); } /* ---- the dock --------------------------------------------------------- Block padding only. The inline padding is the tab-row gutter that lines the first tab up with the first card (gads-system-final-f5x) — untouched. */ :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-dock{ padding-top: 8px; } :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-tab{ padding-top: 13px; padding-bottom: 15px; } /* ---- the stage -------------------------------------------------------- .w8-panel's padding is the shorthand `var(--w8-pad)`, which also sets the inline inset the cards and the dock share. Only the block half moves. */ :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-panel{ padding-block: 24px; } /* ---- inside a card ---------------------------------------------------- The card is a subgrid of three rows — name, sentence, foot — so these are the only four numbers that decide its height. */ :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-step{ padding-top: 21px; } :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-sl{ margin-top: 6px; } :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga) .w8-li{ margin-top: 15px; padding-top: 15px; padding-bottom: 17px; gap: 9px; } /* ---- the one number the two sections do NOT share --------------------- Our System's checklist rows are single lines, so 9px reads as air between them. Why Choose Us's are two-line blocks — a 14.8px label with a 13.4px detail 3px under it — and at 9px the 3:1 between the gap outside an item and the gap inside it gets too close to call, so the detail starts drifting toward the label below it. 10px keeps the pairs obviously paired, and costs 5px on the tallest list in the section. */ :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).wcs .w8-li{ gap: 10px; } } /* ========================================================================== 2 · THE CLOSE — welded to the module, and stacked -------------------------------------------------------------------------- gads-spec-panel/gss-in-close.css put the sentence and the CTA side by side in a [380px][1fr] grid, centred against each other. That is what made the CTA a block: half a row is 910px wide, so it had to be a card to fill it. One column instead, and each row can be as tall as it actually needs. ========================================================================== */ #w8-system#w8-system#w8-system .w8-close{ display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; margin-top: 0; /* welded: the module's bottom edge is the seam */ padding: 0; border: 0; border-radius: 0; background: #FFFFFF; /* the module's 2px edge, carried down the sides and closed underneath */ box-shadow: inset 2px 0 0 var(--b10), inset -2px 0 0 var(--b10), inset 0 -2px 0 var(--b10); } /* ---- drawer one: the closing line, with the audit key on the right ------- */ #w8-system#w8-system#w8-system .w8-close-say{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; padding: 14px var(--w8-pad) 15px; } #w8-system#w8-system#w8-system .w8-close-say p{ margin: 0; } #w8-system#w8-system#w8-system .w8-go{ flex: none; } /* ---- drawer two: the CTA, a strip on the card feet' own tint ------------- */ #w8-system#w8-system#w8-system .gss-in-close{ min-width: 0; container: gssrow / inline-size; padding: 16px var(--w8-pad) 17px; background: var(--b10-foot); box-shadow: inset 0 2px 0 var(--b10); /* the seam above it */ } /* the band was the card; it is now just the strip's row */ #w8-system#w8-system#w8-system .gss-band{ display: flex; flex-direction: row; align-items: center; gap: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #w8-system#w8-system#w8-system .gss-band-t{ flex: 1 1 0%; min-width: 0; } /* 20px was a card title's size, sitting under 20px card titles. 17px says supporting, and still sets the question on one line to ~940px of strip. */ #w8-system#w8-system#w8-system .gss-band-t b{ font-size: 17px; line-height: 1.3; letter-spacing: -.02em; } /* the paragraph keeps the 15px it renders at today; the cap goes, because the strip is now wide enough to set it in two lines instead of three */ #w8-system#w8-system#w8-system .gss-band-t p{ margin-top: 5px; max-width: none; font-size: 15px; line-height: 1.5; } #w8-system#w8-system#w8-system .gss-band-a{ flex: none; width: auto; display: flex; flex-direction: column; align-items: stretch; gap: 7px; } /* smaller key, same label, same colour system (site/align.css owns its fill) */ #w8-system#w8-system#w8-system .gss-btn{ height: 44px; min-height: 0; padding: 0 22px; font-size: 14.6px; border-radius: 6px; } #w8-system#w8-system#w8-system .gss-note{ font-size: 12.4px; } /* ========================================================================== 3 · THE CTA STRIP AS IT NARROWS -------------------------------------------------------------------------- The strip is a @container, so what decides its form is its own width, not the window's — it is full-module-width now, so it stays a row far longer than the half-row card could. Re-declared here because these rules have to out-rank part 2; a container query adds no specificity of its own. Crossover measured, not guessed: at 700px of strip the row costs 136px and the stack 154, and below that the row loses. ========================================================================== */ @container gssrow (max-width: 700px){ #w8-system#w8-system#w8-system .gss-band{ flex-direction: column; align-items: stretch; gap: 14px; } #w8-system#w8-system#w8-system .gss-band-a{ width: 100%; align-items: flex-start; } #w8-system#w8-system#w8-system .gss-note{ text-align: left; } } /* a strip this narrow is a phone: the key becomes the row */ @container gssrow (max-width: 430px){ #w8-system#w8-system#w8-system .gss-band-a{ align-items: stretch; } #w8-system#w8-system#w8-system .gss-note{ text-align: center; } #w8-system#w8-system#w8-system .gss-btn{ width: 100%; height: auto; min-height: 46px; padding: 12px 18px; white-space: normal; text-align: center; line-height: 1.25; } } /* ========================================================================== 4 · THE PHONE -------------------------------------------------------------------------- The cards, the dock and the swipe rail stay exactly as approved. Only the close changes, and it changes the same way: two welded drawers. The module has no side edges on a phone (gads-system-live-f5 drops them and leaves a bottom rule), so the drawers take that same single rule, and their inset is the page gutter the dock already uses. ========================================================================== */ @media (max-width: 860px){ #w8-system#w8-system#w8-system .w8-close{ margin-top: 0; gap: 0; box-shadow: inset 0 -2px 0 var(--b10); } #w8-system#w8-system#w8-system .w8-close-say{ padding: 13px var(--pad) 14px; gap: 6px 20px; } #w8-system#w8-system#w8-system .gss-in-close{ padding: 15px var(--pad) 17px; } /* 18px sat a shade under the 19px card names next to it; 17px keeps the CTA clearly the supporting voice on a phone too */ #w8-system#w8-system#w8-system .gss-band-t b{ font-size: 17px !important; } /* the 15px in part 2 is a DESKTOP number — it buys the paragraph two lines on a 900px strip. On a 294px one it bought five, and the phone section grew 23px. gads-system-live-f5's own 14px is the right phone size and this rule has to hand it back, because 3-1-1 out-ranks its 2-1-1. */ #w8-system#w8-system#w8-system .gss-band-t p{ font-size: 14px; margin-top: 6px; } #w8-system#w8-system#w8-system .gss-btn{ min-height: 46px; } }