/* ================================================================== * iTech Valet — ABOUT (/about/) * * Loaded ONLY on the about page. See functions.php. * * !! EVERY PAGE ON THIS SITE IS CUSTOM. Nothing here is expected to be * reused, and nothing here may be promoted into main.css because it * "looks generic" - the next page measures differently. * * Every number below was read off the LIVE page through the DOM on * 2026-08-24 at 375, 599, 600, 744, 768, 769, 900, 992, 993, 1100, 1201, * 1280 and 1512 - both sides of every step the original takes. The CSS * export in migration/ was used only to find which artwork belongs to * which band and which explicit widths the photographs carry. * * ASSET PATHS ARE ../../img/ - two levels, because this file sits in * assets/css/pages/. One level silently killed six homepage backgrounds * once; the bands rendered their fallback colours and nothing errored. * * SPECIFICITY. main.css sets `h2.section-title { ... }` and `p { ... }`. * Every override here is written at (0,2,0) or better - `.abt-band * .abt-title`, not `.abt-title`. A plain single-class rule LOSES, * silently, and the markup looks correct the whole time. That is the bug * that painted the homepage hero paragraph white on a white card. * * AND A :hover RULE NEEDS ONE MORE STEP AGAIN. main.css's * `a:not(.cta-button):not(.to-top):hover` is (0,3,1), so an inline-link * rule at (0,2,0) or (0,2,1) governs the resting state and loses the * hover. See section 01. That cost this page two invisible links. * * FOUR PLACES WHERE ORDER DECIDES, NOT SPECIFICITY. Audited 2026-08-24 * by resolving every declaration against every element in .site-main. * No bug found - all four are the modifier-after-base idiom and all four * are correct as written - but each one breaks silently if the file is * ever reordered, so they are listed rather than left to be rediscovered: * * .abt-title--center over .abt-title text-align (4 headings) * .abt-say--sm over .abt-say font-size (3 lines) * .abt-close__title over .abt-title line-height, letter-spacing * .abt-dark over .abt-band color (4 bands) * * Everything else the audit flagged is a base rule overridden by its own * min-width query, which is this theme's documented idiom and is meant to * be decided by order. * * MARGINS DO NOT COLLAPSE HERE, AND THAT IS DELIBERATE. * Beaver Builder wraps every module in its own div, and its measured gaps * are the two margins ADDED, never collapsed - 20 under a heading meeting * 20 over a paragraph is 40px of air on the live page. Real siblings * collapse that to 20 and the band comes out 20px short per join, which * is invisible in isolation and worth hundreds of pixels over a page this * long. So every band's stack is `display: grid`: grid item margins never * collapse, with each other or with the container, which lets the * original's per-module margins be transcribed literally. * * TWO SETS OF BREAKPOINTS, and they are not the same numbers. * * TYPE 599 / 600 ... 992 / 993 the settled site-wide model * LAYOUT 768 / 769 the original's own, 9 bands * 992 / 993 the HERO, which stacks later * * The hero holding its stack to 992 is measured, not assumed: at 992 the * headline still runs the full band with the photograph centred under it, * and only at 993 do the two become columns. * * WHERE THIS PAGE DELIBERATELY DIVERGES FROM LIVE, and why. * The original steps its type FOUR times - at 768, 992 and 1200 - and * holds 20px body copy all the way to 1200, where the homepage and * /services/ both reach 22 at 993. Following it literally would set this * one page two points lighter than the rest of the site across the whole * laptop range, and would put 40px section titles on an iPad mini, which * is the exact complaint that produced the 600px step in main.css. So the * page uses the SETTLED MODEL: phone values below 600, desktop values * from 600 up, section titles taking the original's own 60 -> 50 middle * step. Consequences, measured rather than assumed: * * <= 599 identical to live * 600 - 992 body 22 against live's 20, headline 70 against 50 * 993 - 1200 body 22 against 20, titles 60 against 58, headline 70 * against 60 - the hero band runs about 20px taller * >= 1201 identical to live * * Two further departures, both recorded so nobody later "fixes" them back * thinking they are drift: * * The team photograph carries `margin-top: 350px` between 769 and 992 * on the live page, which bottom-aligns it against a 20px-copy column. * With 22px copy that offset overshoots, and a 350px hole above a * photograph is a builder artefact rather than a design. It keeps its * desktop 60px at every laid-out width here. * * Inline links follow the SITE rule in main.css section 02b - --c-link, * no underline, orange on hover - on band 6, and band 10 opts out with * `links-inherit` because --c-link measures 1.40:1 on the globe behind * it. The original paints every link the same colour as the sentence * around it, removes the underline, and - because a (0,4,0) builder rule * outranks its own `a:hover` - does not change them on hover either, * which leaves a link with no affordance at all. Not transcribed. * * NEVER WRITE A BARE CLAMP FOR A FONT SIZE. Every clamp in this theme was * exact at 1280 and 375 and wrong at every width between, because a clamp * ramps where the original steps. The pattern is the phone value in the * base rule, followed by a min-width override. * * 01 BAND FRAME AND SHARED TYPE * 02 DARK BANDS AND ARTWORK * 03 HERO * 04 I'VE BEEN BUILDING THINGS MY ENTIRE LIFE * 05 I'VE BUILT OVER 100 SITES (the chain) * 06 THE MOMENT EVERYTHING SHIFTED * 07 I BUILT THE SYSTEM BACKWARDS * 08 MOST PEOPLE SKIP THE HARD PART * 09 YOU THINK YOU CAN FIGURE THIS OUT YOURSELF? * 10 IT'S NOT JUST ME * 11 WHAT I ACTUALLY BELIEVE * 12 FIND OUT WHAT AI SAYS * 13 TABLET AND DESKTOP TYPE (>= 600) * 14 LAID OUT (>= 769) * 15 FULL DESKTOP (>= 993) * 16 THE 400px PHONE CAP (<= 599) * 17 RESTING CARD SHADOW * ================================================================== */ /* ================================================================== * 01 BAND FRAME AND SHARED TYPE * * The base rules are the PHONE values, so a browser that matches none of * the queries below still reads correctly. * ================================================================== */ .abt-band { /* #ff7d86. Page-specific and deliberately not promoted to a token - nothing else on the site uses it. It carries "You don't exist." and the four zeros, which are the same sentence said twice. */ --abt-coral: #ff7d86; /* The module inset. Measured: the band runs 40 -> 1240 at a 1280 viewport and its copy runs 60 -> 1220. That 20px is Beaver Builder's module margin and it sits on the module, not the container - the white zero strip is flush at 40 and 1240 while text is inset. */ --abt-inset: 20px; color: var(--c-navy); } /* THE GUTTER IS ZERO WHILE STACKED. Measured: the live row padding goes from `20px 20px` to `20px 0`, so the module inset becomes the whole margin and copy lands at 20 inside a 375 viewport - where the original's does. main.css puts 20px on every .section, so this has to take it off again rather than never adding it. */ .section.abt-band { padding-inline: 0; } /* Every band's stack is a grid, so the module margins below add rather than collapse. `align-content: start` keeps each row its own height when a sibling column makes the band taller. */ .abt-band > .container, .abt-hero__text, .abt-hero__media, .abt-story__text, .abt-backwards__text, .abt-diy__text, .abt-diy__aside, .abt-team__text, .abt-skip__grid, .abt-skip__col, .abt-steps, .abt-step, .abt-trio, .abt-zeros, .abt-zero { display: grid; align-content: start; } /* Body copy. Measured 22px on a 24.2px line at 1280 and 20 on 22 at 375 - a 1.1 line-height, much tighter than the 1.45 the rest of the site runs. That is this page's own rhythm rather than an error: the copy is short lines of first-person narrative, not paragraphs of prose. WEIGHT 300, AND IT HAS TO BE READ OFF THE TEXT NODES. getComputedStyle reports 300 on the live

and 400 on a Google-Docs inside it, and the live page requests Lexend 300 and 700 only - so that 400 resolves back down to the 300 face that is actually loaded. Confirmed by measuring a rendered string rather than by reading the cascade: the same sentence is identical in width at 100, 300, 400 and 500 on the live page, and only 700 is a different face. */ .abt-band p, .abt-band li { font-size: var(--t-lead); font-weight: 300; line-height: 1.1; } /* Measured: 10px between paragraphs and nothing after the last one, so a band's tail is its own margin and not the margin plus a stray 10. SCOPED TO THE COPY BLOCKS, not to `.abt-band p`. Written that way it is (0,2,1) and outranks every single-class rule in this file - it silently deleted the 100px tail under "In that order. Nothing gets built on assumptions.", which is the last

in its band. */ .abt-copy p:last-child, .abt-skip__body p:last-child, .abt-trio__text p:last-child, .abt-close__note p:last-child { margin-bottom: 0; } /* Section titles. main.css supplies Bebas, uppercase and the 40/50/60 --t-h2 scale. Three things are this page's own: the leading is solid rather than 1.1, the tracking is -1px, and every title is centred until the page reaches its full desktop layout - including the four that are left-aligned there. All three measured at 992 and 993. */ .abt-band .abt-title { margin: 40px var(--abt-inset) 20px; font-size: var(--t-h2); line-height: 1; letter-spacing: -1px; text-align: center; } /* INLINE LINKS ARE NOT STYLED HERE ANY MORE. Section 02b of main.css * carries one rule for the whole site - --c-link, no underline, orange * on hover, which is what the articles do - and this page opts a single * band out of it with `links-inherit` in the template. * * BAND 10, the closing band on the globe, is the opt-out. Measured on * the artwork actually behind its two links, worst pixel, at 1280 and * again at 375: * * | link | ground | --c-link | white | --c-blue-pale | * | "AI Authority Engine"| rgb(41,81,128) | 1.40 | 6.36 | 5.02 | * | "the homepage" | rgb(24,57,91) | 2.24 | 10.15 | 7.91 | * * --c-link is unreadable there. --c-blue-pale reads well on the artwork * and then measures 1.26:1 against the WHITE COPY around it, so a reader * cannot tell it is a link once the underline is gone. No colour clears * both bars on this ground - see the arithmetic in 02b - so the band * keeps the copy colour and the underline, and hover thickens it. * * That replaces the --c-blue-pale hover this file used to carry. It was * a correct fix for the invisible navy hover (1.36:1) and it is now one * of three different answers to the same problem across six pages; the * underline is the one that works on every ground. */ /* The statements. Lexend 26/700 laid out, 20 on a phone. They are the page's punctuation and they are set in the BODY face, not the display one. Navy by default; bands 5, 6 and 8 measure black and say so. */ .abt-band .abt-say { margin: 20px var(--abt-inset); font-size: 20px; line-height: 1.1; } .abt-band .abt-say--sm { font-size: 20px; } .abt-band .abt-say--ink { color: var(--c-ink); } .abt-band .abt-say--center { text-align: center; } .abt-copy--center { text-align: center; } /* ================================================================== * 02 DARK BANDS AND ARTWORK * * Bands 1, 4, 8 and 10 sit on dark photographs and set everything white. * Bands 6 and 9 share the `about-system` artwork, which is LIGHT - their * type stays navy, which is why they are not .abt-dark even though the * layout stylesheet lists them alongside the others. * ================================================================== */ .abt-dark, .abt-dark h1, .abt-dark h2, .abt-dark h3, .abt-dark p, .abt-dark li { color: var(--c-white); } .bg-about-hero, .bg-about-story, .bg-about-system, .bg-about-cta, .bg-about-globe { background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-about-hero { background-image: url("../../img/bg/about-hero.webp"); } .bg-about-story { background-image: url("../../img/bg/about-story.webp"); } .bg-about-system { background-image: url("../../img/bg/about-system.webp"); } .bg-about-cta { background-image: url("../../img/bg/about-cta.webp"); } .bg-about-globe { background-image: url("../../img/bg/home-dark-globe.webp"); } /* ================================================================== * 03 HERO * * The only band that runs to 1400 rather than 1200 - main.css gives that * width to .section--hero - and the only one that holds a single column * all the way to 992. * ================================================================== */ .abt-hero { padding-block: 100px 0; } .abt-hero .abt-hero__headline { margin: 0 var(--abt-inset) 20px; font-size: 50px; /* measured floor; steps in section 13 */ line-height: 1; letter-spacing: -1px; text-align: center; } .abt-hero .abt-hero__summary { margin: 20px var(--abt-inset); font-size: var(--t-lead); line-height: 1.1; } /* 300px on a phone, 350 while the band is still stacked, and the whole column once it is two columns. Both caps are LAYOUT decisions - the photograph would otherwise be the full width of a stacked band - so they follow the layout breakpoints rather than the type ones. */ .abt-hero__media { padding-top: 20px; } .abt-hero__img { width: 300px; margin-inline: auto; } /* ================================================================== * 04 I'VE BEEN BUILDING THINGS MY ENTIRE LIFE * * The original ships the map TWICE - once in the left column and once at * the foot of the copy, with the first hidden below 769. One image here, * moved by grid order, so the file is fetched once. * ================================================================== */ .abt-story__media { padding: 20px var(--abt-inset); } .abt-story__img { width: 250px; margin-inline: auto; } .abt-story .abt-copy { margin: 20px var(--abt-inset); } /* ================================================================== * 05 I'VE BUILT OVER 100 SITES (the chain) * * Five navy pills, an arrow between each, then the turn. * ================================================================== */ .abt-chain { padding-block: 20px 100px; } /* 60px Bebas like a section title, but it is a sentence rather than a heading and the original marks it up as one, so it stays a

. */ .abt-chain .abt-chain__intro { margin: 20px; font-family: var(--f-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; letter-spacing: -1px; text-transform: uppercase; text-align: center; } /* THE PILL IS THE ARTWORK, not a CSS shape. It is a 1386x109 image sized `contain` inside its column, so the painted height tracks the COLUMN WIDTH rather than the text inside it - 56.6px tall at 1280 and 29.5 at 375, both measured. A border-radius and a fill would need that arithmetic written out by hand at every width; the file is 16KB. */ /* justify-self, NOT margin-inline: auto. An auto margin on a grid item absorbs the free space instead of stretching it, so `margin: 0 auto` would have shrunk the pill to the width of its label the moment the band stacked - which is where the pill is supposed to run edge to edge. */ .abt-chain .abt-chain__pill { justify-self: center; width: 100%; /* main.css gives every

a 10px tail. Five pills made the band 50px taller than the original before this line existed. */ margin: 0; padding: 20px; background: url("../../img/bg/about-column.webp") center / contain no-repeat; color: var(--c-white); text-align: center; } .abt-chain__arrow { width: 30px; margin: 10px auto; } /* [!] Then AI changed everything. [!] A CORAL-OUTLINED BOX, and it took a second pass to find: a 4px #ff7d86 border with a 20px radius on the column itself. The first cut measured background-color and background-image on every element and read this one as empty, because it has neither. It is the same coral as "You don't exist." six hundred pixels below, which is the point - the page marks its two turns in the same colour. Measured 4 + 20 + a line + 20 + 4 = 72.2px tall, and the border is there at 375 as well as at 1512. THE ICONS ARE ABSOLUTE, not flex items. They are 40px tall against a 24.2px line, so as flex children they would have driven the box to 88 and buried the proportion. In the original they are not in this column at all - they are the two flanking columns, dragged inside with a -60px margin. Absolute positioning is the same result without the two empty columns. */ .abt-chain__end { position: relative; justify-self: center; width: 100%; padding: 20px; border: 4px solid var(--abt-coral); border-radius: 20px; } .abt-chain__end p { margin: 0; font-size: 18px; /* measured floor; steps in section 13 */ text-align: center; } /* 16px inside the border, which puts the icon's edge 20px inside the box - measured at 300 and 980 against a box running 280 to 1000. */ .abt-chain__bang { position: absolute; top: 50%; width: 40px; transform: translateY(-50%); display: none; } .abt-chain__bang:first-child { left: 16px; } .abt-chain__bang:last-child { right: 16px; } /* ================================================================== * 06 THE MOMENT EVERYTHING SHIFTED * ================================================================== */ .abt-shift .abt-copy { margin: 20px var(--abt-inset); } .abt-shift .abt-shift__coral { margin: 20px var(--abt-inset); color: var(--abt-coral); text-align: center; } /* Four zeros on one white strip. Continuous when laid out - the four columns touch and only the outer corners are rounded - and four separate rounded cards when it stacks, which is the original's own behaviour at 768. */ .abt-zero { background: var(--c-white); margin: 10px; border-radius: 25px; } .abt-zeros .abt-zero__num { margin: 0 20px; font-family: var(--f-display); font-weight: 400; font-size: 100px; line-height: 145px; color: var(--abt-coral); text-align: center; } /* --- the four zeros arrive one at a time ----------------------------- * Gerek asked for movement here, and this is the one place on the page * where the content IS an absence, so it earns some. * * WHAT IT IS: each card is its own reveal target, so main.js's existing * per-parent stagger lands them 70ms apart. Response-only, once, never * looping, and inert under prefers-reduced-motion - the shared reveal * carries all three guarantees, so no new rule is introduced and no page * selector goes into main.js. The stagger caps at four, which is exactly * the number here. * * WHAT IT DELIBERATELY IS NOT: a count-up. main.js already has one, for * the homepage's "20+" and "100+", and it is the wrong tool here. There * is no honest number to count from - spinning down from 47 would assert * that 47 of something was measured, on a page whose whole argument is * that the engines returned nothing. The page must not invent the figure * it is complaining about. * * 14px of travel against the site's usual 8: four small cards moving in * sequence read as static at 8. This is the one dial and it is a custom * property, so changing it is one number in one place. * ------------------------------------------------------------------- */ .abt-zeros { --abt-zero-lift: 14px; } .js-reveal .abt-zero { transform: translateY(var(--abt-zero-lift)); } .js-reveal .abt-zero.is-in { transform: none; } /* -20px, measured. The zero's line box carries about 22px of half-leading under it and the negative margin pulls the label back into that space, so the two read as one object. Reproduced rather than tidied away because the 145px line-height it compensates for is reproduced too. */ .abt-zeros .abt-zero__label { margin: -20px 20px 20px; color: var(--c-navy); text-align: center; } /* ================================================================== * 07 I BUILT THE SYSTEM BACKWARDS * ================================================================== */ .abt-backwards { padding-block: 20px; } .abt-backwards .abt-copy, .abt-backwards .abt-say { margin: 20px var(--abt-inset); } .abt-backwards__media { padding: 20px var(--abt-inset); } .abt-backwards__img { width: 250px; margin-inline: auto; } /* ================================================================== * 08 MOST PEOPLE SKIP THE HARD PART * * The tallest band on the page. * ================================================================== */ .abt-skip .abt-skip__standfirst { margin: 20px var(--abt-inset); text-align: center; } /* BOTH COLUMNS ARE CARDS, and the second one is outlined. A 25px radius and a soft `0 0 25px #c7c7c7` glow on each, plus a 3px #2494e0 border on the one that shows the system working - the page marks the right answer rather than leaving the two illustrations to argue it out. Neither carries a background colour, which is why the first pass missed them: a sweep for background-color and background-image found nothing on either column and the pair rendered as bare illustrations. THE 3px BORDER IS LOAD-BEARING, not decoration. It takes 6px off the second column's inner width - 494 against the first column's 500 - and at 1201 that is the difference between the last paragraph running five lines and six. Built without it, band 6 came out 31px short there and 7px short at 1280, and nothing about the page looked wrong. The inset is PADDING on the column, not a margin on each child: the image is 350px wide capped by its module box, and a margin would have sized it against the column instead - 350 where the original has 315 at a 375 viewport. */ .abt-skip__col { margin: 10px; padding-inline: 20px; border-radius: 25px; box-shadow: 0 0 25px #c7c7c7; } .abt-skip__col--outlined { border: 3px solid var(--c-blue); } .abt-skip__img { width: 350px; margin: 20px auto; } .abt-skip__body { margin: -20px 0 20px; text-align: center; } .abt-skip .abt-skip__closer { margin: 60px var(--abt-inset) 20px; } .abt-skip .abt-skip__today { margin: 20px var(--abt-inset); } .abt-skip .abt-skip__order { margin: 60px var(--abt-inset) 20px; } .abt-steps { position: relative; } .abt-step__img { width: 150px; margin: 20px auto; } .abt-step p { margin: 0 20px 20px; text-align: center; } /* THE ARROWS ARE POSITIONED, NOT LAID OUT. In the original they are two extra Beaver Builder columns dragged up 150px and sideways with asymmetric margins - a structure this rebuild does not have, and whose pixel offsets would not survive being copied into a real grid. What is transcribed is their measured CENTRES, 30.4% and 67.9% of the band, which hold at 993, 1100, 1280 and 1512 alike. 80px is the measured top of the icon inside the steps row. The step image is a fixed 126.4px tall everywhere the arrows are visible, so a fixed offset here is exact rather than approximate. */ .abt-steps__arrow { position: absolute; top: 80px; width: 40px; transform: translateX(-50%); display: none; } .abt-steps__arrow--a { left: 30.4%; } .abt-steps__arrow--b { left: 67.9%; } /* ================================================================== * 09 YOU THINK YOU CAN FIGURE THIS OUT YOURSELF? * * The one heading on the page that is not Bebas. * ================================================================== */ .abt-diy { padding-block: 40px; } .abt-diy .abt-diy__title { margin: 40px var(--abt-inset) 20px; font-family: var(--f-body); font-weight: 700; font-size: 20px; /* measured floor; steps in section 13 */ line-height: 1; letter-spacing: -1px; color: var(--c-navy); text-transform: none; } .abt-diy__text > p { margin: 0 var(--abt-inset) 20px; } .abt-diy .abt-diy__text > .abt-say { margin: 20px var(--abt-inset); } /* The navy card. 25px radius, measured. The original splits its padding 20 above and 10 below and then puts another 10 on the paragraph inside; this is the same 20/20 of air without shipping the extra rule. */ .abt-diy .abt-callout { margin: 20px; padding: 20px 0; border-radius: 25px; background: var(--c-navy); color: var(--c-white); font-size: 20px; /* measured floor; steps in section 13 */ line-height: var(--lh-lead); text-align: center; } .abt-diy__img { width: 150px; margin: 20px auto; } /* ================================================================== * 10 IT'S NOT JUST ME * ================================================================== */ .abt-team { padding-block: 20px 0; } .abt-team__media { padding: 20px var(--abt-inset) 0; } .abt-team__img { width: 300px; } .abt-team .abt-copy { margin: 20px var(--abt-inset); } /* ================================================================== * 11 WHAT I ACTUALLY BELIEVE * ================================================================== */ .abt-believe { padding-block: 20px 100px; } .abt-believe .abt-copy { margin: 20px var(--abt-inset); } /* The two closing lines are ONE module in the original, 10px apart, so they are one block here rather than two statements with their own air */ .abt-believe .abt-believe__close .abt-say { margin: 0 0 10px; } .abt-believe .abt-believe__close .abt-say:last-child { margin-bottom: 0; } .abt-believe .abt-believe__close { margin: 20px var(--abt-inset); } /* ================================================================== * 12 FIND OUT WHAT AI SAYS * * The same closing band as the homepage and /services/, with this page's * own note under it - set in 30px Bebas rather than the body face. * ================================================================== */ /* The one title on the page whose leading is 1.1 rather than solid, and the one with no negative tracking. Both measured, both per-node in the original, and both kept. */ .abt-close .abt-close__title { margin: 20px var(--abt-inset); line-height: 1.1; letter-spacing: normal; } /* PADDING for the inset, not margin. The 400px phone cap below sets `margin-inline: auto` on this element, which quietly replaced the 20px inset with zero - the copy ran the full 375 while every other block on the page sat at 20, and band 10 came out 66px short. Anything the cap touches has to carry its inset as padding. */ .abt-trio__text { margin-block: 20px; padding-inline: var(--abt-inset); text-align: center; } .abt-trio__media { padding: 20px; } .abt-trio__img { width: 200px; margin-inline: auto; } .abt-cta { margin: 20px var(--abt-inset) 30px; text-align: center; } /* Measured 22px on an 18px line with 20/40 of padding - this page's button is smaller and heavier than the homepage hero's 26px at 400. 17px on a phone, where the label would otherwise wrap. */ .abt-close .abt-cta__button { padding: 20px 40px; font-size: 17px; /* measured floor; steps in section 13 */ line-height: 1.2; } .abt-close .abt-close__note { margin: 20px var(--abt-inset); text-align: center; } .abt-close .abt-close__note p { font-family: var(--f-display); font-weight: 400; font-size: 24px; /* measured floor; steps in section 13 */ line-height: 1.1; text-transform: uppercase; } /* ================================================================== * 13 TABLET AND DESKTOP TYPE (>= 600) * * TABLET READS AS DESKTOP. Gerek's rule, and on this page it overrides * the original across most of the range, since the original holds its * phone-adjacent sizes all the way to 1200. See the header. * ================================================================== */ @media (min-width: 600px) { .abt-hero .abt-hero__headline { font-size: 70px; } .abt-chain__end p { font-size: var(--t-lead); } .abt-band .abt-say { font-size: 26px; } .abt-band .abt-say--sm { font-size: 24px; } .abt-diy .abt-diy__title { font-size: 26px; } .abt-diy .abt-callout { font-size: 22px; } .abt-close .abt-close__note p { font-size: 30px; } /* The desktop label size rather than the original's 20px middle step - the same call /services/ makes. A 17px pill under a 50px heading reads undersized on a tablet. */ .abt-close .abt-cta__button { font-size: 22px; line-height: 18px; } /* Artwork whose size is a type decision rather than a stacking one. */ .abt-step__img { width: 200px; } .abt-diy__img { width: 200px; } .abt-trio__img { width: 250px; } .abt-team__img { width: 550px; } } /* ================================================================== * 14 LAID OUT (>= 769) * * The original's own layout breakpoint, and where nine of the ten bands * become columns. Everything in here is geometry: column tracks, the * band padding that only makes sense side by side, and the module * margins the original grows when it has the room. * ================================================================== */ @media (min-width: 769px) { /* The gutter comes back. main.css already puts it on .section; this only stops section 01 from taking it away again. */ .section.abt-band { padding-inline: var(--gutter); } /* --- column tracks. Measured proportions, in fr so nothing can overflow the way a fixed-pixel track does. EVERY TRACK IS minmax(0, Nfr), NOT Nfr. A bare `fr` floors at min-content, so a track whose longest unbreakable word is wider than its share simply takes more - the four zeros came out 194.8 / 178 / 178 / 178 instead of four equal 182s, because "Not recommended." is the longest of the four labels. The row still fitted, so nothing overflowed and nothing looked broken; it was just no longer the original's grid. ------------------- */ .abt-story__grid { grid-template-columns: minmax(0, 419fr) minmax(0, 781fr); } .abt-backwards__grid { grid-template-columns: minmax(0, 720fr) minmax(0, 480fr); } .abt-diy__grid { grid-template-columns: minmax(0, 720fr) minmax(0, 480fr); } .abt-skip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .abt-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .abt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .abt-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } .abt-zeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* One continuous white strip, rounded at the two outer corners only */ .abt-zero { margin: 0; border-radius: 0; } .abt-zero:first-child { border-radius: 25px 0 0 25px; } .abt-zero:last-child { border-radius: 0 25px 25px 0; } .abt-steps__arrow { display: block; } .abt-chain__bang { display: block; } /* --- band padding, measured per band. NOT one value: applying one row's padding to every row has left this site's bands visibly lopsided three separate times. ------------------------------- */ .abt-backwards { padding-bottom: 100px; } .abt-diy { padding-block: 100px; } /* --- band 2 ------------------------------------------------------ */ .abt-story__media { padding: 60px var(--abt-inset) 20px; } .abt-story__img { width: 100%; margin-inline: 0; } /* --- band 3. The pills are 60% of the band with the two empty columns the original leaves either side. --------------------- */ .abt-chain .abt-chain__pill, .abt-chain__end { width: 60%; } /* --- band 4 ------------------------------------------------------ */ /* Order matters and both are (0,2,0): the lead block has to come after the shared rule to beat it, and `.abt-shift__close` after that. A same-specificity override placed earlier loses silently. */ .abt-shift .abt-copy { margin-bottom: 100px; } .abt-shift .abt-shift__lead { margin-bottom: 20px; } .abt-shift .abt-shift__close { margin: 40px var(--abt-inset) 60px; } /* --- band 5. 260px of air above the illustration, measured. It is NOT a stacking compensation - the columns are side by side either way - it is where the drawing starts, level with the second paragraph of the copy beside it. --------------------- */ .abt-backwards__media { padding: 260px var(--abt-inset) 20px; } .abt-backwards__img { width: 100%; margin-inline: 0; } /* --- band 6 ------------------------------------------------------ */ .abt-skip .abt-skip__standfirst { margin-bottom: 60px; } .abt-skip__col { margin-inline: 30px; } .abt-skip__body { margin-bottom: 40px; } .abt-skip .abt-skip__closer { margin: 60px 100px 40px; } .abt-skip .abt-skip__today { margin-bottom: 60px; } .abt-skip .abt-skip__order { margin-bottom: 100px; } .abt-step p { margin-bottom: 40px; } /* --- band 7 ------------------------------------------------------ */ .abt-diy .abt-diy__title { margin-top: 20px; } .abt-diy .abt-diy__text > .abt-say { margin-top: 40px; } /* --- band 8 ------------------------------------------------------ */ .abt-team__media { padding: 60px var(--abt-inset) 0; } /* --- band 9 ------------------------------------------------------ */ .abt-believe > .container > .abt-say { margin-top: 40px; } .abt-believe .abt-believe__close { margin-top: 40px; } /* --- band 10 ------------------------------------------------------ */ .abt-close .abt-close__title { margin-top: 60px; } .abt-trio__text { margin-top: 100px; } .abt-cta { margin-bottom: 60px; } .abt-close .abt-close__note { margin: 100px var(--abt-inset) 60px; } } /* ================================================================== * 15 FULL DESKTOP (>= 993) * * The hero's own layout breakpoint, the width at which the section titles * take their per-band alignment back, and the heading lead-ins. * ================================================================== */ @media (min-width: 993px) { .abt-band .abt-title { text-align: left; } .abt-band .abt-title--center { text-align: center; } /* Measured per band: 100px above four of the titles, 60 above the other two. */ .abt-story .abt-title, .abt-backwards .abt-title, .abt-skip .abt-title, .abt-believe .abt-title { margin-top: 100px; } .abt-shift .abt-title { margin-top: 60px; } /* --- the hero becomes two columns -------------------------------- */ .abt-hero__grid { grid-template-columns: 55% 45%; } .abt-hero__text { margin-left: 100px; } .abt-hero .abt-hero__headline { margin-top: 100px; text-align: left; } .abt-hero__media { margin-right: 100px; padding-top: 40px; } /* 100%, NOT auto. An whose width and height come from attributes has no box until the file loads unless one axis is definite - all three of the images that fill their column measured 0x0 in the render harness before this, and would have shifted the layout on a real page. */ .abt-hero__img { width: 100%; margin-inline: 0; } /* --- band 8's opening line gains real leading here: 87px on 60px type, measured, against a solid line below 993. It is the only display line on the page that does. ------------------------- */ .abt-chain .abt-chain__intro { line-height: 1.45; } /* Measured 20px, against 40 while stacked and 100 on the six titles above. Per-node in the original and kept - the band's height is set by the photograph beside it either way, so this shows only as where the heading sits. */ .abt-team .abt-title { margin-top: 20px; } /* --- band 10 ------------------------------------------------------ */ .abt-team { padding-top: 100px; } } /* ================================================================== * 16 THE 400px PHONE CAP (<= 599) * * Below 769 the original caps every narrow stacked column at 400px and * centres it. IT IS A PHONE TREATMENT, so it stops where the phone scale * stops. Held to the original's 768 it would put 22px desktop copy in a * 360px column on an iPad mini with half the screen empty either side, * which is worse than either choice on its own. Same call as /services/. * Below 600 it is the original's, exactly. * * A CAP THAT DOES NOTHING AT YOUR TEST WIDTH IS NOT A CAP YOU HAVE * TESTED: at 375 every one of these is already under 400 and the rule * changes nothing. It binds between about 420 and 599. * ================================================================== */ @media (max-width: 599px) { /* BOTH columns of "it's not just me" are capped, not just the one holding the photograph. Capping the picture and leaving the copy full width made that band 154px short at 599 and looked, at a glance, like a 300px photograph next to nothing in particular. */ .abt-step, .abt-team__media, .abt-team__text, .abt-diy__aside, .abt-trio__text, .abt-trio__media { width: min(100%, 400px); margin-inline: auto; } /* 380, not 400. THE ORIGINAL'S CAP IS ON THE COLUMN and these two are cards sitting 10px inside one, so the cap they inherit is 20px narrower. Capped at 400 the two "most people skip" illustrations came out 350 where the original runs them at 340, which is enough to change where the copy under them wraps. */ .abt-zero, .abt-skip__col { width: min(100% - 20px, 380px); margin-inline: auto; } } /* ================================================================== * 17 TOUCH SCREENS — nothing to add here, and that is the finding * * The homepage and /services/ both add a resting card shadow below 993, * because a touch screen never gets the hover lift that makes a grid read * as objects. This page needs none: * * the two "most people skip the hard part" columns already carry the * original's own `0 0 25px #c7c7c7` glow at every width, and one of * them is outlined in blue on top of that; * * the four zeros are a white strip on a dark photograph and separate * completely on their own - and the shared --shadow-card is navy, which * is invisible on dark artwork anyway. That is the same reason the * homepage's credential boxes use a white-tinted shadow instead; * * everything else is a photograph, a pill made of artwork, or copy * sitting directly on a background. * * Adding one anyway would have put a second, weaker shadow under cards * that already have a stronger one. * ================================================================== */ @media (max-width: 992px) { /* The hero photograph while its band is still one column. A layout cap, not a type one, so it follows the layout breakpoint. */ .abt-hero__img { width: 350px; } } @media (max-width: 768px) { .abt-hero__img { width: 300px; } /* GAPS BETWEEN STACKED BLOCKS, both measured and both invisible until the band heights were compared. The FIRST of the two "most people skip" cards puts 20px above its copy where the second puts -20. It is a per-node value in the original, not a rounding artefact, and it is only ever seen stacked - side by side the two cards use -20 alike. The second and third steps take 40px above their icon rather than 20, which is the air that stops three stacked steps reading as one list. Together these two were 80px of band 6. */ .abt-skip__grid > :first-child .abt-skip__body { margin-top: 20px; } .abt-step + .abt-step .abt-step__img { margin-top: 40px; } /* STACKING ORDER. Both of these bands lead with a photograph and introduce it with a heading that sits beside it - so when they stack, the heading has to come first or it reads as a caption for the picture above rather than a title for the copy below. The original's own behaviour, verified at 375. */ .abt-story__media, .abt-team__media { order: 2; } }