/* * smartercredit-base — responsive * * components.css was derived by sampling production at ONE viewport (1440px), * so it has essentially no responsive layer: 1440px matched production within * 2% (4473 vs 4394 docHeight) while 780px diverged by +16% (5692 vs 6633). * * This file is the fix — production sampled at FIVE widths (1440, 1200, 980, * 780, 480) via CDP getComputedStyle, per archetype, across three pages * (business-loan, business-details-form, contact-us; home 302-redirects to * business-loan in production so it is not a distinct sample). Method: * `tools/measure-responsive-width.py --width --out ` (run * sequentially, one width per process — the CDP browser on :9224 is shared * with concurrent agents, so a single long multi-width run is unreliable * under contention). Raw output for all five widths, plus the image-swap and * per-instance section-padding follow-up probes, is in `tools/measured/`. * * THE BREAKPOINT: every archetype measured — h1/h2/h4 type, section padding, * hero padding, the 4-up icon row, and the desktop/mobile logo swap — changes * value at EXACTLY 980px and NOT AGAIN at any narrower width down to 480px. * 1200px matches 1440px in every property tested; 980/780/480 are identical * to each other in every property tested. So there is exactly ONE real * breakpoint here, not two: `max-width: 980px`. * * IMPORTANT — this corrects two guessed values already in components.css's * existing `@media (max-width: 768px)` block (lines ~789-805), which this * file's measurements show fired at the wrong width with the wrong value: * - --sc-fs-h1/--sc-lh-h1 and --sc-fs-h2/--sc-lh-h2 were guessed as * 36px/44px and 30px/38px at 768px. Measured: 38px/48px and 32px/42px, * and the real change is already in effect by 980px, not 768px. * - .sc-col--1-4 was guessed to go full-width (`flex: 1 1 100%`) at 768px. * Measured: the 4-up icon row (Group-70/Group-72/icon-hand/statement.png) * goes from 4-up to 2-up at 980px and STAYS 2-up through 480px — it never * goes 1-up at any width tested. 2-up is exactly --sc-col-1-2 (48.5%). * For these two to take effect, `responsive.css` must be enqueued AFTER * components.css — later source order wins at equal specificity, so this * file's `max-width: 980px` declarations override components.css's * `max-width: 768px` guesses across their whole shared range (768px down to 0) * even though this file's media condition is nominally wider. See the enqueue * note in the session report; functions.php is NOT touched by this file per * the task's hard stop. * * WHAT DID NOT CHANGE (measured, not assumed — no media query emitted for * these; emitting one that restates the desktop value is exactly the trap * this file exists to avoid): * - Body copy (.sc-text p, .sc-blurb text): 18px/24px at every width 1440 * through 480. Divi's mobile font bump does not apply to paragraph copy. * - .sc-button padding (both the nav "Apply now" button and the hero card's * "Check your rate" button): 12px/24px and 10px/80px respectively, fixed * at every width. Earlier consensus output looked like padding changed at * 980px, but per-instance inspection showed that was two DIFFERENT * buttons being modally averaged, not one button changing — the "Check * your rate" button visually widens at 980px because its flex PARENT * goes full-row-width, not because its own padding changed. * - .sc-row / .sc-column / .sc-section width: all percentage-based already, * so they scale fluidly with viewport with no breakpoint-specific * override. (1440's ratio looks different only because production's * max-width: 1224px cap binds at that width, not because the percentage * itself changes.) * * SECONDARY, UNRESOLVED SIGNAL: a small icon (vuesax-bulk-lock.svg, likely a * "secure" badge near a form) is hidden at 1440/1200/980/780 and shown only * at 480 — evidence of a second, narrower breakpoint somewhere in (480, 780] * that this sweep did not pin down (no sample was taken between 780 and 480). * Not acted on here: it is a single decorative icon, not one of the seven * archetypes in scope, and asserting an exact px value without a sample in * that range would be exactly the kind of unverified guess this file exists * to replace. */ @media (max-width: 980px) { /* ========================================================================== Type scale — h1/h2/h4 step down together at 980px, not at 768px. Body copy, h5 font-size, and blurb text are UNCHANGED (omitted). ========================================================================== */ /* components.css sets h1/h2/h4 off these tokens (`h1 { font-size: var(--sc-fs-h1) }` etc., and .sc-blurb__title off --sc-fs-h4/--sc-lh-h4 too) — redeclaring the tokens here is equivalent to and simpler than overriding every consuming selector individually. Section-rhythm tokens are declared in this same block below, one :root per media query. */ :root { --sc-fs-h1: 38px; /* measured; was 54px above 980px */ --sc-lh-h1: 48px; --sc-fs-h2: 32px; /* measured; was 42px above 980px */ --sc-lh-h2: 42px; /* h4 is the one heading whose SIZE steps down, not just its neighbors' line-height — measured 24px -> 18px, collapsing to the same size as body copy on mobile (matches --sc-fs-base exactly). */ --sc-fs-h4: 18px; /* measured; was 24px above 980px */ --sc-lh-h4: 24px; /* measured; was 29px above 980px */ --sc-space-section: 50px; /* measured; was 70px above 980px — see the Section rhythm comment block below */ /* --sc-space-band deliberately NOT redeclared: measured 60px/60px at every width including 480px (the band section carrying the "Refinance multiple debts" photographic background never changes padding). components.css's 768px block sets it to 40px; if that guess is ever revisited, the measured value is 60px unconditionally, not a responsive step. */ } /* h5 (badge/eyebrow-style heading — .sc-blurb__title siblings use h4, this is a distinct smaller instance, e.g. a numbered-step label): the LEFT padding collapses from 50px to 34px, right stays 50px. Asymmetric in production at every sample; not a rounding artifact — measured identically at 980/780/480. */ h5 { padding-left: 34px; } /* ========================================================================== Section rhythm — plain sections settle at 50px vertical padding (token declared above), not components.css's guessed 48px. The hero section's padding-top actually INCREASES (40px -> 60px) rather than shrinking, because the hero content stacks and needs more breathing room above the reflowed heading. ========================================================================== */ .sc-section--hero { padding-top: 60px; } /* measured; was 40px above 980px */ /* ========================================================================== 4-up icon row — corrects components.css's `.sc-col--1-4 { flex: 1 1 100% }` at 768px. Measured on the "how it works" row (Group-70.jpg / Group-72.jpg / icon-hand.jpg / statement.png): 4-up (22.75%, --sc-col-1-4) above 980px, 2-up (48.5%, --sc-col-1-2) at 980px AND at 780px AND at 480px. It never reaches 1-up at any measured width. ========================================================================== */ .sc-col--1-4 { flex: 0 1 var(--sc-col-1-2); } }