/* ================================================================== * CASE STUDIES — /case-studies/ * * Seven content bands. The last page of the rebuild. * * MEASURED, NOT EYEBALLED. Every number here was read off the live page * through the DOM at THIRTEEN widths - 375, 599, 600, 744, 768, 769, * 900, 992, 993, 1100, 1201, 1280 and 1512 - resizing and then * RELOADING before each read, because a resize alone leaves media * queries half-applied and has cost two wrong readings on this build. * * THE LIVE PAGE 404s ON A QUERY STRING. `/case-studies/?v=375` returns * "Page not found", so the cache-busting trick recorded elsewhere in * BUILD-PLAN works on staging and NOT on live. Navigate to the bare URL * again instead; it is a full reload either way. * * ---- THE RESPONSIVE MODEL -------------------------------------- * * Two breakpoints, and neither is the original's: * * TYPE phone <= 599 | 600 and up * LAYOUT stacked <= 768 | 769 and up * * The original steps type at 768 AND at 992 AND at 1200. Its middle * step is the tablet scale, and the settled model says tablet reads as * desktop, so the >= 993 value ships from 600 up: * * | | live <=768 | live 769-992 | live >=993 | ships | * | h1 | 50/50 | 60/60 | 70/70 | 50 <=599, 70 >=600 | * | h2 | 40/40 | 50/50 | 60/60 | 50 <=599, 60 >=600 | * | h3 (turn) | 24/24 | 26/26 | 26/26 | 24 <=599, 26 >=600 | * | body | 20/22 | 22/24.2 | 22/24.2 | 20 <=599, 22 >=600 | * * The section title's phone value is the original's own middle step, * 50 - not its 40. Same call every other page in this rebuild made. * * NEVER WRITE A BARE CLAMP FOR A FONT SIZE. Phone value in the base * rule, desktop value in a min-width override. Additive, so the phone * value cannot move. * * ---- BAND FRAME ------------------------------------------------ * * EVERY band is 1200, including the hero. This is the only page in the * rebuild whose hero is not 1400 - measured, twice. * * Band padding, measured on the live page: * * 1 hero 100 / 100 5 faint 60 / 60 * 2 diag 40 / 40 phone 6 log 60 / 60 * 100 / 100 >=769 * 3 tech 100 / 100 7 line 20 / 20 * 4 doing 60 / 60 * * Band 2 is the only one whose padding changes with width. * * 01 BAND FRAME AND SHARED TYPE * 02 BAND COLOUR AND ARTWORK * 03 HERO * 04 THE DIAGNOSTIC RESULTS * 05 THE TECHNICAL BREAKDOWN * 06 WHAT WE'RE DOING ABOUT IT * 07 THIS ISN'T FOR THE FAINT OF HEART * 08 THE TRANSFORMATION LOG * 09 THE LINE IN THE SAND * 10 THE TWO TABLES * 11 RESPONSIVE STEPS * ================================================================== */ /* ================================================================== * 01 BAND FRAME AND SHARED TYPE * ================================================================== */ .cs-band > .container { max-width: var(--container-band); } /* THE MODULE INSET IS ZERO, AND THAT IS NOT THE SAME AS THERE BEING NO INSET. main.css's `.container` already applies `padding-inline: var(--gutter)` = 20, which is exactly the module margin live's builder emits - measured x20-355 at 375 and x176-1336 at 1512 on both. Adding another 20 here narrowed the h1's measure by 40 and wrapped it to four lines where live has three. The variable is kept because three blocks read it and a future band may need a real inset of its own. */ .cs-band { --cs-inset: 0px; } .cs-band .cs-copy { margin-inline: var(--cs-inset); } /* Bebas, and the weight is 400 on live rather than the 700 main.css sets for headings. (0,2,0), AND THE FONT SIZE HAS TO LIVE HERE. main.css writes `h2.section-title { font-size: var(--t-h2); line-height: 1.1 }` at (0,1,1). A per-band `.cs-diag__title { font-size: 50px }` is (0,1,0) and LOSES to it - the five section titles on this page silently took main.css's clamp instead of the measured value, at every width, and nothing about the page looked broken. The per-band rules below carry alignment only. Fourth time this class of bug has been recorded on this build. The rule is the same every time: count the element selector. */ .cs-band .cs-title { /* 20 above, 40 below, measured on all five section titles. No inline margin - the container's gutter is the inset. The hero and the closing band override this; see their sections. */ margin: 20px 0 40px; font-family: var(--f-display); font-weight: 400; /* 40 ON A PHONE, NOT 50. Live's own <=768 value, and the floor every other page in this rebuild uses - `--t-h2` clamps to 40 and faqs.css writes the literal. A 50 here wraps four of the five section titles to two lines at 375 and puts the page 60px over live on every one of those bands. */ font-size: 40px; line-height: 1; letter-spacing: normal; } /* Body copy. 20/22 on a phone, 22/24.2 from 600 - and the line height is 1.1, not the 1.7 main.css uses. Measured on every band. TEN INSIDE A BLOCK, FORTY BETWEEN BLOCKS, and that distinction is the whole rhythm of this page. Live's paragraphs sit 10px apart WITHIN one rich-text module and 40px apart across two - measured on every band, and it is the difference between the four hero lines (10, 10, 10) and the diagnostic band's accents (10, then 40). A flat gap gets one of the two wrong everywhere. The 10 is the paragraph's own bottom margin; the 40s are on the blocks. */ .cs-band p { margin: 0 0 10px; font-size: 20px; line-height: 22px; font-weight: 300; } /* NO `p:last-child { margin-bottom: 0 }`. It is the obvious tidy-up and it is wrong here: live's last paragraph in a block KEEPS its 10, and zeroing it left every band 10-20px short with every element inside it on live's exact pixel. Bands 1, 4 and 5 all landed short for this one reason. */ /* The two Chewy accents in band 2 and the note card in band 3. Live runs them at 26 and 28; both take the larger value from 600 up. */ /* 40 UNDER EACH ACCENT, 10 above it. Measured: "We asked" -> the question is 10, the question -> "Unanimous answer." is 40, and "NO" -> the stat block is 40 again. The accent closes a block. */ .cs-band .cs-accent { margin-bottom: 40px; font-family: var(--f-accent); font-weight: 400; color: var(--c-blue); font-size: 26px; line-height: 28.6px; } /* The disqualifier turns. Lexend 700 in --c-blue, NOT Bebas - the only headings on the page that are not the display face. */ /* 20 above and below, measured - and the SECOND turn in a band takes 60 on top instead, which is what separates the two disqualifiers. --c-blue-deep, AND THE TOKEN COMMENT SAYS NOT TO. main.css writes "use --c-blue and --c-orange everywhere the type is large enough", and 26px at 700 is large by any definition. It still does not clear: on cs-glow-03 --c-blue measures 2.76:1 worst pixel against the 3:1 large-text floor, because that artwork carries regions LIGHTER than the white the token was checked against. --c-blue-deep is 5.2 there. The rule is right; its assumption - that "large enough" settles it - only holds on a flat ground. This was the last element on the page below floor. */ .cs-band .cs-turn { margin: 20px 0; font-family: var(--f-body); font-weight: 700; color: var(--c-blue-deep); font-size: 24px; line-height: 24px; letter-spacing: normal; } /* ================================================================== * 02 BAND COLOUR AND ARTWORK * * Four of the six row backgrounds are this page's own, one is the * homepage's globe and the sixth belongs to the global footer and is * not this file's business. * * MEASURED BRIGHTNESS, because "glow" says nothing about which way the * type goes and two of the four are dark: * * cs-glow-01 rgb(244,250,254) navy 10.91:1 band 1 * cs-glow-02 rgb(32,105,159) white 5.86:1 band 3 * cs-glow-03 rgb(239,239,239) navy 9.98:1 band 5 * cs-glow-04 rgb(13,31,42) white 16.85:1 band 6 * ================================================================== */ .bg-cs-glow-01, .bg-cs-glow-02, .bg-cs-glow-03, .bg-cs-glow-04, .bg-cs-globe { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg-cs-glow-01 { background-image: url("../../img/bg/cs-glow-01.webp"); } /* A 35% SCRIM OVER THIS ONE, AND ONLY THIS ONE. cs-glow-02 is a mid-blue that runs to rgb(59,161,233) at its brightest, where white body copy measures 3.12:1 - the last thing on this page below floor after the diagnosis cards took the table copy onto their own fill. Three lines still sit loose on it: the two intro lines and the band's payoff. A flat overlay rather than six more boxes. 35% takes the worst ground to rgb(40,113,166), where white is 5.25:1, and the artwork's motif still reads through - measured both, rather than picking a number that looked about right. The other three glows are left alone: 01 and 03 are near-white and carry navy type, 04 is already 16.8:1 for white. */ .bg-cs-glow-02 { background-image: linear-gradient(rgba(4, 24, 40, 0.35), rgba(4, 24, 40, 0.35)), url("../../img/bg/cs-glow-02.webp"); } .bg-cs-glow-03 { background-image: url("../../img/bg/cs-glow-03.webp"); } .bg-cs-glow-04 { background-image: url("../../img/bg/cs-glow-04.webp"); } .bg-cs-globe { background-image: url("../../img/bg/home-dark-globe.webp"); } /* Navy is the default on this page; the two dark bands and the closing band opt in to white. Written at (0,2,0) to clear main.css's own heading and paragraph rules. */ .cs-band .cs-title, .cs-band p, .cs-band li { color: var(--c-navy); } .cs-dark .cs-title, .cs-dark p, .cs-dark li, .cs-dark th, .cs-dark td { color: var(--c-white); } /* ================================================================== * 03 HERO * ================================================================== */ .cs-hero { padding-block: 100px; } /* The h1 is 50 on a phone and 70 from 600 - its own value at both ends, because .cs-title's 40 is the section-title floor and the headline does not take it. NO BOTTOM MARGIN, unlike every other title on the page: measured `20px 20px 0`. The 60 under it is the copy block's own. */ .cs-band .cs-hero__title { margin-bottom: 0; font-size: 50px; text-align: center; } .cs-hero__lead, .cs-hero__turn { text-align: center; } /* 60 under the h1, then the four hero lines run as ONE block at 10 - measured y320 / 403 / 461 / 495, so the paragraph after the lead is 10 below it and not 40. The two divs are a structural convenience, not a spacing boundary, which is what the 10 below says. */ .cs-hero__lead { margin-top: 60px; } .cs-hero__turn { margin-top: 10px; } /* Live leaves 20 under the last hero line before the band's own 100. Measured: content ends y519, band 639.4, padding 100 both ends. */ .cs-hero__turn { margin-bottom: 20px; } /* ================================================================== * 04 THE DIAGNOSTIC RESULTS * ================================================================== */ .cs-diag { padding-block: 40px; } .cs-diag__grid { display: grid; gap: 0; } .cs-diag__title { text-align: left; } /* The stat block. Live wraps its non-bold runs in `font-weight: 400` spans against the 300 the band sets, and bolds the two numbers to 700 - so there are three weights in one paragraph. Transcribed. */ /* (0,2,0). `.cs-band p` sets weight 300 at (0,2,0); a bare `.cs-stat` is (0,1,0) and the 400 never landed. Found by a contrast sweep that reported this paragraph at w300, not by reading the file. */ .cs-band .cs-stat { font-weight: 400; } .cs-stat strong { font-weight: 700; } .cs-diag__media { margin: 20px var(--cs-inset) 0; } /* THE THREE ILLUSTRATIONS ARE CAPPED, NOT LEFT TO THEIR NATURAL SIZE. Measured on live at 375 / 599 / 769 / 1280: ai-engines 335 / 360 / 325 / 450 = 100% of its column, max 450 mascot magnifying 200 / 200 / 300 / 300 = max 200 phone, 300 desktop mascot results 200 / 200 / 203 / 250 = 100% of its column, max 250 Two of the three are column-filling with a ceiling, which is why their widths do not step cleanly - 325 at 769 is the narrow column, not a breakpoint. */ .cs-diag__img { width: 100%; max-width: 450px; margin-inline: auto; } /* THE ONE 25px RADIUS ON THE PAGE, and it carries a GLOW rather than a drop shadow: no offset, 50px blur, opaque grey. Measured `rgb(199,199,199) 0px 0px 50px 0px` - not an alpha shadow, which is why it reads as a halo on white rather than as a lifted card. The value is raw because it is the original's and there is no token for a shadow of this shape; --shadow-card is a two-layer navy tint and would be a different object. */ /* 30, not 40 - the stat paragraph above already carries its own 10. Measured: the card's first line lands on live's y651. */ .cs-card { margin: 30px var(--cs-inset) 0; padding: 40px 20px; border-radius: 25px; box-shadow: 0 0 50px rgb(199, 199, 199); text-align: center; } /* The label is its own block: 40 under it, then the three lines at 10. Measured y651 / 715 / 798 / 832. */ .cs-card p:first-child { margin-bottom: 40px; } /* The card is the one place the last paragraph DOES lose its 10 - live's "That's the baseline." computes margin 0, and the card's own 40 of padding is the whole gap under it. */ .cs-card p:last-child { margin-bottom: 0; } /* ================================================================== * 05 THE TECHNICAL BREAKDOWN * ================================================================== */ .cs-tech { padding-block: 100px; } .cs-tech__title { text-align: center; } .cs-tech__lead, .cs-tech__close { text-align: center; } /* THE PAYOFF LINE, AND IT WAS A PARAGRAPH. "Every signal was wrong. Not some of them. All of them." is what the whole band is building to and it was set at body size in the middle of a lot of white space. Bebas at 40 makes it land, and it is the same display face the section titles use so the band closes in its own voice. */ .cs-tech__close { margin-top: 50px; } .cs-band .cs-tech__close p { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: normal; color: var(--c-white); } /* The --c-blue filled card that closes the band. Chewy, white, centred, 15px radius - the same radius the table panels use, which is what ties the two together. */ /* 80 above it and 40 of padding inside - measured y1150-1291 on live, which is 142 tall around two lines of 28/30.8 Chewy. */ .cs-note { margin: 80px var(--cs-inset) 0; padding: 40px 20px; border-radius: 15px; background: var(--c-blue); text-align: center; } /* (0,2,1), AND THE MEDIA QUERY IS WHY. `.cs-note p` is (0,1,1) and so is `.cs-band p` - a tie this file wins on source order at the base. But section 11's `@media (min-width: 600px) { .cs-band p { font-size: 22px } }` is the SAME (0,1,1) and sits later in the file, so from 600 up the note silently dropped from 28 to 22. A tie that holds at one width and breaks at another is worse than losing outright. */ .cs-band .cs-note p { font-family: var(--f-accent); font-weight: 400; color: var(--c-white); font-size: 28px; line-height: 30.8px; } /* ================================================================== * 06 WHAT WE'RE DOING ABOUT IT * ================================================================== */ .cs-doing { padding-block: 60px; } .cs-doing__grid { display: grid; gap: 0; } .cs-doing__title { text-align: left; } .cs-doing__media { margin: 20px var(--cs-inset) 0; } .cs-doing__img { width: 100%; max-width: 200px; margin-inline: auto; } /* ================================================================== * 07 THIS ISN'T FOR THE FAINT OF HEART * ================================================================== */ .cs-faint { padding-block: 60px; } .cs-faint__title { text-align: center; } /* `flow-root`, AND IT IS LOAD-BEARING. Without it the turn's 20px top margin collapses through the block and then against the title's 40px bottom margin, the larger wins, and the first turn lands 20px high - at y180 against live's y200. Nothing looks wrong; the band is just short. Same class of thing as the specificity traps above: a value that is in the file and is not what renders. */ .cs-faint__block { display: flow-root; text-align: center; } /* 60 above the second turn - measured y433 against a previous paragraph bottom of 363, which is 60 plus the 10 the paragraph above carries. The blocks are flow-roots, so nothing collapses. */ .cs-faint__block + .cs-faint__block .cs-turn { margin-top: 60px; } /* 10 under the last block, which live leaves and no paragraph supplies. Band 5 is exactly 10 short without it. */ .cs-faint__block:last-of-type { margin-bottom: 10px; } /* ================================================================== * 08 THE TRANSFORMATION LOG * ================================================================== */ .cs-log { padding-block: 60px; } .cs-log__title { text-align: left; } .cs-log__intro { margin-inline: var(--cs-inset); } /* --c-blue-pale, NOT --c-blue. Live sets these two lines in #2494e0 and it measures ~5:1 on this artwork - a pass, and Gerek reads it as hard work anyway: a saturated mid-blue on dark navy has far less apparent separation than its ratio suggests, because hue and lightness are moving together rather than against each other. #cfe8fc is 12.85 on the same pixels and is this theme's established colour for type on dark artwork. Not transcribed, on purpose. */ .cs-log__intro p { color: var(--c-blue-pale); } /* The two intro lines are one block: 10 apart, measured y180/y238. */ /* --- THE TIMELINE ------------------------------------------------ * Five steps on a spine, left to right at >= 993 and top to bottom * below it. See the template for why this shape and not the snake. * * ONE PIECE OF GEOMETRY DOES BOTH ORIENTATIONS: the spine is a BORDER * on each step - top edge when the steps sit in a row, left edge when * they stack - and the node is one absolutely positioned dot that * moves with it. No duplicated markup, and nothing to keep in sync. * ---------------------------------------------------------------- */ .cs-log__track { margin: 40px var(--cs-inset) 0; padding: 0; list-style: none; } /* `list-style: none` on an
    and the order still matters: the browser's own numbering would restate the "Month 1, Month 2" cadence these steps deliberately drop, but the element stays an
      because the sequence IS the content - for a screen reader and for anything parsing the page. */ .cs-log__step { position: relative; padding-left: 26px; border-left: 2px solid var(--c-blue-pale); } .cs-log__step + .cs-log__step { margin-top: 36px; } /* THE NODE. 14px, centred on the 2px spine - so it is offset by half its own width plus half the border: (14 - 2) / 2 = 6, hence -8. */ .cs-log__step::before { content: ""; position: absolute; top: 0; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-blue-pale); } /* THE DOTS RUN COLD TO HOT, AND THE RAMP IS THE STORY RATHER THAN DECORATION. Gerek: "maybe the five dots are in different colors as well, because it just feels too white and blue." Five arbitrary colours would read as confetti. Five that warm up along the line read as the thing warming up, which is what the timeline is about - and it means the order is legible even at a glance, before a single word is read. The SPINE stays pale blue. It is the thread, not a step; colouring it too would leave nothing for the dots to sit against. */ .cs-log__step:nth-child(1)::before { background: var(--c-blue-pale); } .cs-log__step:nth-child(2)::before { background: var(--c-blue); } .cs-log__step:nth-child(3)::before { background: var(--c-amber); } .cs-log__step:nth-child(4)::before { background: var(--c-orange); } /* THE LAST STEP IS THE ONE THE READER IS STANDING ON, so it is ringed rather than given a sixth colour - and the ring is what an August entry inherits when it becomes the last one. A halo, not a border: a border would change the dot's box and shift it off the spine. */ .cs-log__step:last-child::before { background: var(--c-orange); box-shadow: 0 0 0 5px rgba(221, 107, 0, 0.28); } /* The date. Bebas at body scale - the one place on the page the display face is used below heading size. */ .cs-band .cs-log__when { margin-bottom: 10px; font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-blue-pale); } /* THE FIGURE IS THE WHOLE POINT OF THE REBUILD. The first version was five paragraphs of prose and read as five paragraphs of prose. A number this size is what a reader takes in before deciding whether to read anything, and it is what carries the win. ORANGE, AND IT IS THE ONLY WARM THING ON THE BAND ABOVE 16px. Gerek: "It's too much of the same, we need some color contrast here... the numbers go orange just to make them pop." He is right - white figures on white headings on a navy ground gave the timeline one value and no accent, and the eye had nothing to land on. --c-orange rather than --c-orange-deep: the deep step exists for 14px type on the grey card and is explicitly not a general-purpose colour. At 70px this is large text against a 3:1 floor and measures 4.96:1 on this artwork, so it clears the BODY floor with room. */ .cs-band .cs-log__figure { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 70px; line-height: 0.9; letter-spacing: normal; color: var(--c-orange); } /* The unit under the figure. Small, pale, and it does the work the figure cannot - "5" means nothing until it says "of our pages". */ .cs-band .cs-log__unit { margin: 6px 0 22px; font-size: 16px; line-height: 1.25; font-weight: 400; color: var(--c-blue-pale); } .cs-band .cs-log__what { margin: 0 0 8px; font-family: var(--f-body); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: normal; color: var(--c-white); } .cs-band .cs-log__body { font-size: 17px; line-height: 1.45; color: var(--c-white); } /* THE COLD-QUESTION BLOCK. It was a one-line footnote and it is now the closing argument of the band, because Gerek's framing turned it from a disclaimer into the strongest thing on the page: the zero is on the hardest test in the category, and the reader's own version of that test is far easier. Given real presence for that reason - a rule above it, a heading, and body copy at 19 rather than the footnote's 18. It is not a card: a filled panel here would make it look like an aside, which is precisely what it is not. */ .cs-log__cold { margin: 60px var(--cs-inset) 0; padding-top: 30px; border-top: 1px solid rgba(207, 232, 252, 0.35); max-width: 900px; } .cs-band .cs-log__cold-title { margin: 0 0 16px; font-family: var(--f-body); font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: normal; color: var(--c-white); } .cs-band .cs-log__cold p { font-size: 19px; line-height: 1.5; color: var(--c-blue-pale); } .cs-band .cs-log__cold p + p { margin-top: 14px; } /* The turn. White and 700 - it is the sentence the reader is meant to take away, and it is about THEM rather than about us. (0,3,0). `.cs-band .cs-log__cold p` above is (0,2,1) and a two-class rule LOSES to it on the element selector - the turn rendered pale blue with the white sitting unused in the file. Sixth time on this page; found by the contrast sweep reporting the wrong colour, not by reading. */ .cs-band .cs-log__cold .cs-log__cold-turn { color: var(--c-white); font-weight: 700; } /* ================================================================== * 09 THE LINE IN THE SAND * ================================================================== */ .cs-line { padding-block: 20px; } /* The only heading on the page with a 1.1 leading rather than 1.0, and the only one live sets `text-transform: uppercase` on. Bebas draws its lowercase as the uppercase forms, so the transform changes nothing on screen and everything for a screen reader - it is transcribed because removing it would be a silent design change, and the leading is why it is not folded into .cs-title. */ /* (0,2,0) for the same reason as the hero title above, and here it is the LEADING that would have been lost: `.cs-band .cs-title` sets line-height 1 at (0,2,0). */ /* 60 ABOVE, 20 BELOW - the only title on the page that is not 20/20/40, and the band's own padding is only 20, so the 60 is what gives the closing band its air. */ .cs-band .cs-line__title { margin: 60px 0 20px; line-height: 1.1; text-align: center; text-transform: uppercase; } /* 40 under the h2 before the columns start - measured y186 for the image against a title bottom of 146. */ .cs-line__grid { display: grid; gap: 0; margin-top: 40px; } .cs-line__col { text-align: center; } .cs-line__media { margin: 20px var(--cs-inset); } .cs-line__img { width: 100%; max-width: 250px; margin-inline: auto; } /* 40 above the button - measured y589 against a column-group bottom of 549. */ .cs-line__close { margin: 40px var(--cs-inset) 0; text-align: center; } /* Live's button: --c-blue-mid fill, a 3px WHITE border and a 100px pill, with an opaque grey shadow of the same family as the card above. main.css's .cta-button carries the fill, the pill and the label; the border and this shadow are this page's own. */ /* 160 UNDER THE BUTTON, and it is the largest single gap on the page: measured y813 for the first closing line against a button bottom of 653. It is the beat before the sign-off and the reason the closing band is a thousand pixels tall. */ .cs-line__button { margin-bottom: 160px; /* 64 tall on live against main.css's 52 - the original's button carries more vertical padding than this theme's default, and on a band whose whole job is the click it is worth the 6px. */ padding-block: 18px; border: 3px solid var(--c-white); box-shadow: var(--shadow-card-hard); } /* The three closing lines. 700 and uppercase - and here the transform IS visible, because these are Lexend. (0,2,0), for the same reason as .cs-stat above. */ .cs-band .cs-line__shout { font-weight: 700; text-transform: uppercase; } /* 20 UNDER THE LAST LINE, ON TOP OF THE BAND'S OWN 20. Gerek, looking at the deployed page: "I need a little bit more space from that sentence to the bottom of the section." He is right and it is the band's padding that makes it read tight: every other band on this page pays 60 or 100 at the bottom and this one pays 20 - measured off live, where it is the closing band and sits directly above the footer. The sign-off wants air under it rather than the footer's edge. Not transcribed; live is tight here too, and this is the one place on the page that reads worse for it. */ .cs-band .cs-line__shout:last-child { margin-bottom: 20px; } /* NOTE: `:first-of-type` was tried here and is wrong - the ask is also a

      , so it matched that instead and the 100 landed in the wrong place. The gap belongs to the button, above. */ /* ================================================================== * 10 THE DIAGNOSIS CARDS * * Six cards where live has a six-row table - twice, in two versions * that disagree. See the template for the three faults this fixes; * the short one is that the findings were the quiet part of a band * whose whole job is to land them. * * THE FILL IS THE ACCESSIBILITY FIX AS WELL AS THE DESIGN ONE. White * copy directly on cs-glow-02 measures 2.55:1 at the artwork's * brightest - the last thing on this page below floor. A card puts * the copy on a ground this stylesheet controls, and the number stops * depending on which part of a photograph a paragraph happens to * land on. * ================================================================== */ .cs-tech { /* Local, not a global token: this is the one band that needs it, and the alpha is the point - the artwork's texture still reads through at 12%, so the cards sit ON the photograph rather than punching six holes in it. */ --cs-card-dark: rgba(4, 24, 40, 0.88); } .cs-diag-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 40px var(--cs-inset) 0; padding: 0; list-style: none; } .cs-dcard { padding: 26px 24px 28px; border-radius: 15px; background: var(--cs-card-dark); } /* The signal is a LABEL, not a heading: small, letterspaced, pale. It names the row; the finding is what the reader is here for. */ .cs-band .cs-dcard__signal { margin: 0 0 12px; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue-pale); } /* THE FINDING, AND IT IS THE POINT OF THE REBUILD. Bebas because it is condensed - "Zero verified" and "Minimal LinkedIn" have to sit on one line in a 360px card, and Lexend at this size would wrap both. Orange to tie the band to the timeline in band 6: two bands leading with an orange figure is the page having a voice. */ .cs-band .cs-dcard__finding { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: normal; color: var(--c-orange); } /* The rest of the finding, kept verbatim. Splitting at the natural break promotes the punch without cutting a word - "78" leads and "across the site" stays. */ .cs-band .cs-dcard__detail { margin: 8px 0 0; font-size: 16px; line-height: 1.3; color: var(--c-blue-pale); } .cs-band .cs-dcard__why { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(207, 232, 252, 0.22); font-size: 17px; line-height: 1.45; color: var(--c-white); } /* ================================================================== * 11 RESPONSIVE STEPS * * TYPE AT 600, LAYOUT AT 769. The two are deliberately different: the * settled model puts every small tablet on the desktop type scale from * 600 up, and the original does not lay these bands out in columns * until 769. Measured on both sides of each. * ================================================================== */ /* ---- TYPE: 600 and up -------------------------------------------- */ @media (min-width: 600px) { .cs-band p { font-size: 22px; line-height: 24.2px; } .cs-band .cs-title { font-size: 60px; } /* The h1 is the one title that does not take the h2's 60. (0,2,0) so it clears .cs-title in the same block. */ .cs-band .cs-hero__title { font-size: 70px; } .cs-band .cs-turn { font-size: 26px; line-height: 26px; } /* The one illustration with a real step. Live moves it at 768; the settled model moves it at 600 with everything else. */ .cs-doing__img { max-width: 300px; } } /* ---- LAYOUT: 769 and up ------------------------------------------ */ @media (min-width: 769px) { /* Band 2 is the only band whose padding moves. */ .cs-diag { padding-block: 100px; } /* Two across between 769 and 992 - three at that width gives each card 236px, which is narrower than the 44px finding needs. */ .cs-diag-grid { grid-template-columns: repeat(2, 1fr); } /* Two equal columns: copy left, illustration right. */ .cs-diag__grid, .cs-doing__grid { grid-template-columns: 1fr 1fr; align-items: center; } .cs-diag__media, .cs-doing__media { margin-top: 0; } /* Three equal columns, mascot in the middle - and they are TOP aligned, not centred. Measured: the image runs y186-549 and BOTH copy columns start at y266, which no centring produces. The 80 is the copy modules' own top offset against the image. */ .cs-line__grid { grid-template-columns: 1fr 1fr 1fr; align-items: start; } .cs-line__col { margin-top: 80px; } .cs-line__media { margin-block: 0; } /* The log intro stops at 60% of the band - measured 720 of 1200 on live, and kept. The TIMELINE does not: it needs the full 1200 to put five steps in a row, which is the whole point of it. */ .cs-log__intro { max-width: 60%; } /* 60 under the cards' intro, measured y338 on live against an intro bottom of 278. */ .cs-diag-grid { margin-top: 60px; } } /* ---- THREE DIAGNOSIS CARDS ACROSS: 993 and up ------------------- * * THIS BELONGS IN ITS OWN BLOCK AND WAS BRIEFLY IN THE 769 ONE, where * it sat AFTER the two-across rule and beat it on source order - so * 769 to 992 rendered three cards at 273px each instead of two. The * page looked fine at 375 and at 1280 and was wrong only in the 224px * between, which is the same shape of bug the AEO page recorded when * its closing band came out 405px tall at 900. * * Two blocks, two breakpoints, no source-order dependency. * ------------------------------------------------------------------ */ @media (min-width: 993px) { .cs-diag-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- THE 400px COLUMN CAP: 599 and down -------------------------- * * Beaver Builder caps its narrow stacked columns at 400 and centres * them below 769, and this build holds that to 599 where the phone * scale stops - the same call /services/, /about/, * /ai-visibility-check/ and /aeo-content-writing/ all made. * * CAPPED, measured per column at 599 rather than assumed: the two * picture bands' copy-plus-image pairs, and the closing band's three * columns. Live puts them at x120-480 in a 599 viewport. * * NOT CAPPED, also measured: the hero, the disqualifier band, both * tables, and the diagnostic card - all of which run x20-579. * * THE CAP GOES ON THE GRID, NOT ON THE BLOCKS INSIDE IT. 360 rather * than 400 because `.container`'s 20px gutter is already the module * inset the original's 400 column contains: 360 + 20 + 20 = the 400. * At 375 the cap is wider than the available width and does nothing, * which is right - live is full-bleed there. * ------------------------------------------------------------------ */ @media (max-width: 599px) { .cs-diag__grid, .cs-doing__grid, .cs-line__grid { max-width: 360px; margin-inline: auto; } } /* ---- THE TIMELINE TURNS HORIZONTAL: 993 and up ------------------- * * Five steps in a row on one spine. 993 rather than 769 because five * columns out of a 769 band is 154px each, which is narrower than the * figure it has to hold - measured, not assumed. * * `gap: 0` and the air taken as padding-right INSIDE each step, so the * top borders butt against each other and the spine is continuous. A * grid gap would break it into five dashes. * ------------------------------------------------------------------ */ @media (min-width: 993px) { .cs-log__track { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto auto auto auto; gap: 0; margin-top: 60px; } /* SUBGRID, AND IT FIXES THE THING THAT MADE THIS LOOK LOOSE. Each step's five parts sat in their own flow, so a one-line unit ("broken links cleared") put its headline 20px higher than a two-line one ("of our pages now quoted by AI"). Measured: three headlines at y5013 and two at y4993, and five body blocks ending at five different heights across a 45px spread. Nothing about it looks broken - it just reads as slightly untidy, which is exactly the kind of thing that is easier to measure than to see. Subgrid hands every column the same five row lines, so dates, figures, units, headlines and bodies each sit on one baseline across the whole timeline. No @supports fallback: a browser without subgrid gets the auto-row behaviour that was there before, which is the current state rather than a broken one. */ .cs-log__step { display: grid; grid-template-rows: subgrid; grid-row: span 5; padding: 30px 20px 0 0; border-left: 0; border-top: 2px solid var(--c-blue-pale); } .cs-log__step + .cs-log__step { margin-top: 0; } /* The node moves from the left edge to the top edge with the spine. Same -8: (14 - 2) / 2 = 6 above the border's own 2. */ .cs-log__step::before { top: -8px; left: 0; } /* The last step's rule stops with its own column rather than running on to the band edge, which would read as a timeline that had been cut off rather than one that has caught up. */ .cs-log__step:last-child { padding-right: 0; } } /* ---- STACKED: 768 and down --------------------------------------- */ @media (max-width: 768px) { /* ---- THE STACKED STATE HAS ITS OWN SPACING, AND IT IS NOT THE DESKTOP SPACING WITH THE COLUMNS REMOVED. Measured on live at 375, band by band. Every title loses its top margin entirely - the band's own padding is the whole gap above it - and its bottom margin halves from 40 to 20. Every large desktop gap collapses: the 160 under the closing button becomes 40, the 80 offset on the closing columns becomes 40, the 60 above the second disqualifier becomes 40. This is the fifth thing on the settled model's touch-screen list - "when a two-column band stacks, the padding that balanced it side by side does not balance it vertically" - and it is worth more than a note: without this block the page is 100 to 240px taller than live on EVERY band at 375, which is a whole extra screen across the page. ---------------------------------------------- */ .cs-band .cs-title { margin: 0 0 20px; } .cs-hero__lead { margin-top: 20px; } .cs-band .cs-line__title { margin: 20px 0 40px; } .cs-faint__block + .cs-faint__block .cs-turn { margin-top: 40px; } .cs-card { margin-top: 20px; padding: 20px; } .cs-note { margin-top: 40px; padding: 30px 20px; } .cs-line__grid { margin-top: 0; } .cs-line__close { margin-top: 40px; } .cs-line__button { margin-bottom: 40px; } /* The cards go to one column and the finding comes down from 44: at 375 a 44px Bebas line and a 50px section title in the same band are close enough to compete. */ .cs-diag-grid { grid-template-columns: 1fr; } .cs-band .cs-dcard__finding { font-size: 38px; } .cs-band .cs-tech__close p { font-size: 32px; } .cs-dcard { padding: 22px 20px 24px; } /* The spine tightens on a phone - 26px of indent on a 335px column is most of a word. */ .cs-log__step { padding-left: 20px; } .cs-log__track { margin-top: 20px; } /* The figure comes down from 70: at 375 a 70px numeral next to a 50px section title makes the timeline shout louder than the band it sits in. */ .cs-band .cs-log__figure { font-size: 56px; } .cs-log__cold { margin-top: 40px; } .cs-band .cs-log__cold-title { font-size: 22px; } .cs-band .cs-log__cold p { font-size: 18px; } /* A RESTING SHADOW ON THE ONE CARD THAT HAS ONE. A touch screen never sends the hover that a desktop reader gets, and the glow is most of what makes this block read as a card. It is already at rest here - nothing to add - but the note is kept so nobody later "optimises" it into a hover. */ /* Balanced band padding when the columns stack: the air above the first element and below the last is the band's, not the column's, so both stay at the measured value. */ .cs-line__media { margin-block: 20px; } }