/* ================================================================== * iTech Valet — AI VISIBILITY CHECK (/ai-visibility-check/) * * Loaded ONLY on this 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 confirm which artwork belongs to * which band. * * 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 - `.avc-band * .avc-title`, not `.avc-title`. A plain single-class rule LOSES, * silently, and the markup looks correct the whole time. * * 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. Real siblings collapse that * and the band comes out short per join. 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. Carried over from /about/, where it is why band * after band came out exact on the first measurement. * * TWO SETS OF BREAKPOINTS, and they are not the same numbers. * * TYPE 599 / 600 ... 992 / 993 the settled site-wide model * LAYOUT 768 / 769 six of the seven bands * 992 / 993 the hero, the grey pill, and * band 4's copy/photograph pair * 1200 / 1201 the hero's column split changes * from 82/18 to 80/20 and the * mascot starts bleeding out of it * * WHERE THIS PAGE DELIBERATELY DIVERGES FROM LIVE, and why. * The original steps its type at 768 and again at 992: 40/50/60 section * titles, 20/22 body, a 46/50/70 hero headline. The settled model steps * at 600 and 993 instead, because 768 puts an iPad mini on the phone * scale. Consequences, measured rather than assumed: * * <= 599 identical to live * 600 - 768 titles 50 against 40, body 22 against 20, headline 70 * against 46, accent 50 against 40 * 769 - 992 headline 70 against 50, accent 50 against 40, and the one * line of band 7 at 22 against the original's 26 * >= 993 identical to live * * That last row is worth saying out loud: from 993 up this page and the * original run the SAME type at every width, which is a better fit than * /about/ managed - that page holds 20px copy to 1200 and only agrees * above 1201. * * Two further departures, both recorded so nobody later "fixes" them back * thinking they are drift: * * Band 7's line is 26px between 769 and 992 on the live page and 22 * above and below it - a bump in the middle of the range rather than a * step. Tablet reads as desktop here, so it takes the desktop 22. * * Inline links follow the SITE rule in main.css section 02b, and this * is the one page where every link-carrying band opts out of it. Four * reasons, all measured - navy copy, --c-blue copy, dark artwork and a * light grey card sitting on a dark band. The table is in section 01. * The original paints links the same colour as the sentence AND removes * the underline, which leaves a link with no affordance at all; the * underline is kept here for that reason and not transcribed away. * * 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 (headline, calendar, mascot, summary card) * 04 HERE'S WHAT YOU GET * 05 WHAT'S IN THE REPORT (four cards, and the card AI made someone up in) * 06 15 MINUTES. ZOOM. FREE. (the grey pill) * 07 WHY WE ASK THOSE QUESTIONS * 08 WHAT THIS ISN'T / NOT FOR TIRE KICKERS * 09 BOOK THE CALL * 10 TABLET AND DESKTOP TYPE (>= 600) * 11 LAID OUT (>= 769) * 12 FULL DESKTOP (>= 993) * 13 THE WIDE HERO (>= 1201) * 14 THE 400px PHONE CAP (<= 599) * 15 TOUCH SCREENS — nothing to add, and that is the finding * ================================================================== */ /* ================================================================== * 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. * ================================================================== */ .avc-band { /* #ff7d86. The same coral /about/ uses and, as there, page-specific and deliberately not promoted to a token - it carries the three "not a..." headings and the three "not for you" lines, which are the same sentence said twice. */ --avc-coral: #ff7d86; /* The grey pill behind "15 Minutes. Zoom. Free." - the original's own body grey, which this site does not use anywhere else (--c-page is pure white on Gerek's call). Its shadow is opaque #3d3d3d, offset right and down, which is the original's button shadow rather than this theme's --shadow-cta. Both measured. */ --avc-pill: #f2f2f2; --avc-pill-shadow: 3px 2px 5px rgb(61, 61, 61); /* 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. */ --avc-inset: 20px; color: var(--c-navy); } /* THE GUTTER IS ZERO WHILE STACKED. Measured: the live row padding goes from `20px 20px` to `20px 0` below 769, 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.avc-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. */ .avc-band > .container, .avc-hero__book, .avc-hero__media, .avc-hero__summary, .avc-get__text, .avc-get__media, .avc-report__grid, .avc-report__item, .avc-invented, .avc-when__pill, .avc-when__grid, .avc-when__media, .avc-why__text, .avc-why__media, .avc-isnt__grid, .avc-isnt__card, .avc-dq, .avc-dq__item, .avc-book__grid, .avc-book__media, .avc-book__text { 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, and the same rhythm /about/ uses. Band 4 is the exception and says so in section 06. WEIGHT 300, AND IT HAS TO BE READ OFF THE TEXT NODES. getComputedStyle reports 300 on the live

and 400 on the Google-Docs inside it. The live page requests Lexend 100, 300 and 700 only, so that 400 resolves back down to the 300 face. Confirmed by measuring a rendered string rather than by reading the cascade: "You don't exist. The quick brown fox" at Lexend 22px is 370.39px wide at 100... no: 351.85 at 100 and 370.39 at 300, 400 AND 500 alike, 406.97 at 600 and 700. Only two faces are loaded, and the body copy is the lighter one. */ .avc-band p, .avc-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. main.css already supplies the 10px. SCOPED TO THE COPY BLOCKS, not to `.avc-band p`. Written that way it is (0,2,1) and outranks every single-class rule in this file - on /about/ the same shortcut silently deleted a 100px tail. */ .avc-copy p:last-child, .avc-isnt__body p:last-child, .avc-invented__text p:last-child { margin-bottom: 0; } /* Section titles. main.css supplies Bebas, uppercase and the 40/50/60 --t-h2 scale. Two things are this page's own: every title is centred until the bands become columns at 769 - including the three that are left-aligned there - and the leading is 1.1 rather than main.css's own 1.1, which is the same, so only the alignment and the margins are restated. Tracking is `normal` here, unlike /about/'s -1px; measured. */ .avc-band .avc-title { margin: 20px var(--avc-inset); font-size: var(--t-h2); line-height: 1.1; letter-spacing: normal; text-align: center; } /* INLINE LINKS ARE NOT STYLED HERE ANY MORE. One site rule, main.css * section 02b: --c-link, no underline, --c-orange on hover. * * THIS PAGE OPTS OUT OF IT ON EVERY BAND THAT CARRIES A LINK, and it is * the only page on the site where that is true. Seven links, four * separate reasons, measured on the real artwork at 375 and 1280 - * worst pixel, and `--c-link` against the copy each one sits in: * * | band | link | ground | on gnd | vs copy | * | avc-get | "iTech Valet" | white | 4.53 | 2.53 | * | avc-report | "authority signals" | white | 4.53 | 1.38 | * | avc-report | "machine readabil." | white | 4.53 | 1.38 | * | avc-report | "authority infra." | white | 4.53 | 2.53 | * | avc-when | "authority infra." | rgb(44,129,192) | 1.00 | 4.53 | * | avc-isnt | "keyword rankings" | rgb(236,236,236)| 3.80 | 4.64 | * | avc-isnt | "guaranteed outcome"| rgb(6,34,53) | 3.57 | 1.84 | * * avc-get and one avc-report link sit in --c-navy copy: 2.53:1, under * the 3:1 the missing underline needs, and no colour clears both bars * against navy - see the arithmetic in main.css 02b. * * Two avc-report links sit in --c-blue copy: 1.38:1. Invisible. * * avc-when is the worst ground on the site. --c-link is 1.00:1 there. * * The first avc-isnt link is on the LIGHT GREY CARD that sits on the * dark band - `.avc-card` artwork, rgb(236,236,236) - where --c-link * is 3.80:1 and misses 4.5 outright. A band-level dark/light switch * would have got this one wrong in the other direction. * * The second is inside the coral emphasis run, 1.84:1 against it. * * All four dark bands carry `links-inherit` in the template, including * the hero, which holds no link today. */ /* ================================================================== * 02 DARK BANDS AND ARTWORK * * Bands 1, 4 and 6 sit on dark photographs and set everything white. * Bands 2, 3, 5 and 7 have no artwork at all and sit on the page white. * * THREE THINGS INSIDE THE DARK BANDS ARE NOT WHITE, and each one is * restated at higher specificity where it lives: the hero's summary card * (black on white), the grey pill's heading (navy on grey), and band 6's * card bodies (black on the grey card artwork) and disqualifier lines * (coral). A sweep that only asked "is this band dark?" would have * painted all four of them white on white. * ================================================================== */ .avc-dark, .avc-dark h1, .avc-dark h2, .avc-dark h3, .avc-dark p, .avc-dark li { color: var(--c-white); } .bg-avc-hero, .bg-avc-report, .bg-avc-cta { background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-avc-hero { background-image: url("../../img/bg/avc-hero.webp"); } .bg-avc-report { background-image: url("../../img/bg/avc-report.webp"); } .bg-avc-cta { background-image: url("../../img/bg/avc-cta.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 whose columns arrive at 993 * and then CHANGE again at 1201. * ================================================================== */ /* 50/100 stacked, 100/100 laid out. Measured, and not one value: the original opens tighter on a phone than it does on a desktop. */ .avc-hero { padding-block: 50px 100px; } /* CLIP, AND IT IS LOAD-BEARING. From 1201 the mascot carries a -50px margin on each side so it leans out of its 20% column, and between 1201 and about 1440 the band is only as wide as the viewport - so the drawing's right edge lands 30px past it. Measured 962 to 1310 at a 1280 viewport, on live and here alike. The live site absorbs that with `overflow-x: hidden` on BOTH and , which is a page-wide rule paid for by one image: it makes position:sticky impossible anywhere on the site and it hides every future overflow bug along with this one. Clipping the band that actually bleeds is the same result with none of that, and `clip` rather than `hidden` so the element never becomes a scroll container and the vertical axis stays visible. Verified: document.scrollWidth equals clientWidth at all thirteen measured widths - as it does on live, by the other route. */ .avc-hero { overflow-x: clip; } .avc-hero .avc-hero__headline { margin: 0 var(--avc-inset) 20px; font-size: 46px; /* measured floor; steps in section 10 */ line-height: 1; letter-spacing: -1px; /* the one negative track on the page */ text-align: center; } /* Chewy, the handwritten accent - the same face the homepage hero uses. --t-accent is the homepage's 60/100/110 scale and is deliberately not used: this line is 40 then 50. */ .avc-hero .avc-hero__accent { margin: 0 var(--avc-inset) 20px; font-family: var(--f-accent); font-weight: 400; font-size: 40px; /* measured floor; steps in section 10 */ line-height: 1; color: var(--c-blue-pale); text-align: center; } /* The booking calendar. 900px tall at every width because the vendor's own inline style says so, which is what makes this band's height predictable: it is the one block on the page that does not move with the type scale. */ .avc-hero__widget { margin: var(--avc-inset); } /* 200px on a phone, 300 while the band is still one column, and the whole column once it is two. All three are LAYOUT decisions - the drawing would otherwise be the full width of a stacked band - so they follow the layout breakpoints rather than the type ones. */ .avc-hero__img { width: 200px; margin: 20px auto 0; } /* The answer-engine summary, on a white card. 18px at EVERY width - the one piece of copy on the page that never steps, measured at 375 and at 1512 alike. */ .avc-hero__summary { margin: 10px; background: var(--c-white); border-radius: 25px; } .avc-hero .avc-hero__summary p { margin: var(--avc-inset); font-size: 18px; line-height: 1.1; color: var(--c-ink); text-align: center; } /* ================================================================== * 04 HERE'S WHAT YOU GET * ================================================================== */ .avc-get .avc-title { margin: 20px var(--avc-inset); } .avc-get .avc-copy { margin: 20px var(--avc-inset); } /* The inset is PADDING on the column, not a margin on the image, because the photograph is centred inside what is left and a margin would size it against the column instead. */ .avc-get__media { padding-inline: var(--avc-inset); } .avc-get__img { width: 250px; margin: 20px auto; } /* ================================================================== * 05 WHAT'S IN THE REPORT * * Four cards in the site blue, then the turn: the page stops describing * the report and tells the story of the founder AI made up. * ================================================================== */ .avc-report { padding-block: 60px; } .avc-report .avc-title { margin: 0 var(--avc-inset) 20px; } /* Blue, not navy - measured rgb(36, 148, 224) on all four cards, label and body alike, against navy everywhere else in the band. */ .avc-report__item p { margin: 0 var(--avc-inset) 10px; color: var(--c-blue); } .avc-report__item p:first-child { margin-top: var(--avc-inset); } .avc-report__item p:last-child { margin-bottom: var(--avc-inset); } .avc-report .avc-report__hits { margin: 100px var(--avc-inset) 20px; } .avc-report .avc-report__tail { margin: 20px var(--avc-inset); } /* THE NAVY CARD HAS A 10px BLUE RULE UNDER IT, AND ONLY UNDER IT. `border-bottom: 10px solid #2494e0` with the 25px radius still on all four corners. A sweep that reads borderTopWidth - which is the obvious way to write one - finds 0px and moves on, and the band comes out ten pixels short with nothing on screen to say why. Check all four edges. The card also has no background COLOUR problem to find it by: it does have one (navy), but the rule is the part that is easy to lose. */ .avc-invented { background: var(--c-navy); border-radius: 25px; border-bottom: 10px solid var(--c-blue); margin: 10px; } .avc-invented__icon { width: 40px; margin: var(--avc-inset) auto; } .avc-invented__text { margin: var(--avc-inset); } .avc-invented .avc-invented__text p { color: var(--c-white); } /* ================================================================== * 06 15 MINUTES. ZOOM. FREE. * * The one place on this site where a section title has a fill of its own. * ================================================================== */ .avc-when { padding-block: 80px 20px; } .avc-when__pill { margin: 10px; background: var(--avc-pill); border-radius: 100px; box-shadow: var(--avc-pill-shadow); } /* 38px, not the 40 the rest of the page's titles take on a phone. It is a per-node value in the original, not a rounding artefact, and it is what keeps "15 MINUTES. ZOOM. FREE." on one line inside a 315px pill. */ .avc-when .avc-when__title { margin: 20px 20px 10px; font-size: 38px; /* measured floor; steps in section 10 */ line-height: 1; color: var(--c-navy); } /* 1.45, against 1.1 everywhere else on the page. Measured 31.9px on 22px type and 29 on 20 - this is the one band whose copy is set as prose rather than as short declarative lines. */ .avc-when .avc-when__text { margin: 20px var(--avc-inset); } .avc-when .avc-when__text p { line-height: var(--lh-lead); } .avc-when__media { padding-inline: var(--avc-inset); } .avc-when__img { width: min(100%, 500px); margin: 0 auto 20px; } /* ================================================================== * 07 WHY WE ASK THOSE QUESTIONS * ================================================================== */ .avc-why__media { padding-inline: var(--avc-inset); } .avc-why__img { width: 250px; margin: 20px auto; } .avc-why .avc-title { margin: 20px var(--avc-inset) 10px; } .avc-why .avc-copy { margin: 20px var(--avc-inset); } /* ================================================================== * 08 WHAT THIS ISN'T / NOT FOR TIRE KICKERS * * The tallest band, and the only one carrying two headings. * ================================================================== */ .avc-isnt { padding-block: 60px; } .avc-isnt .avc-title { margin: 20px var(--avc-inset); } /* 100px above the second heading at every width, measured. It is the one piece of air on the page that does not change when the bands stack - it is what separates two arguments rather than two modules. */ .avc-isnt .avc-isnt__second { margin: 100px var(--avc-inset) 0; } /* THE CARD FILL IS A PHOTOGRAPH, AND IT IS NOT `cover`. Measured `background-size: auto` centred, so a 1092x684 grey texture is drawn at 1:1 and the card shows whatever lands in the middle of it. Reproducing that is why avc-card.webp keeps the original's dimensions instead of being resized down to the box it appears in. */ .avc-isnt__card { margin: 10px; background: url("../../img/bg/avc-card.webp") center no-repeat; border-radius: 25px; } .avc-isnt .avc-isnt__label { margin: var(--avc-inset); color: var(--avc-coral); text-align: center; } /* Black on the grey card, inside a band that paints everything white. */ .avc-isnt__body { margin: 0 var(--avc-inset) 20px; text-align: center; } .avc-isnt .avc-isnt__body p { color: var(--c-ink); } .avc-isnt .avc-isnt__one { margin: 20px var(--avc-inset); text-align: center; } .avc-isnt .avc-isnt__lead { margin: 20px var(--avc-inset) 0; text-align: center; } .avc-isnt .avc-isnt__tail { margin: 0 var(--avc-inset) 20px; text-align: center; } /* THE ICON BOX IS 33.3px TALL, NOT 30. In the original the cross is an inline-block glyph sitting on a 30px text line, so the line box carries the font's descender underneath it - the drawing is 30 and the box it occupies is 33.3, measured at every width. Reproduced as an uneven margin rather than by centring a 33.3px box, because the extra space is genuinely below the mark and not around it. Three items, so getting this wrong is 10px of band. */ .avc-dq__icon { display: block; width: 30px; height: 30px; margin: 10px auto 13.3px; color: var(--avc-coral); } .avc-dq .avc-dq__item p { margin: 0 var(--avc-inset) 20px; color: var(--avc-coral); text-align: center; } /* ================================================================== * 09 BOOK THE CALL * ================================================================== */ .avc-book__media { padding-inline: var(--avc-inset); } .avc-book__img { width: 200px; margin: 20px auto; } .avc-book .avc-book__text p { margin: 20px var(--avc-inset); color: var(--c-ink); text-align: center; } /* ================================================================== * 10 TABLET AND DESKTOP TYPE (>= 600) * * TABLET READS AS DESKTOP. Gerek's rule, and on this page it overrides * the original between 600 and 768, where the original is still on its * phone scale. main.css moves --t-h2 to 50 and --t-lead to 22 here on its * own; what is below is the type this page sets for itself. * ================================================================== */ @media (min-width: 600px) { .avc-hero .avc-hero__headline { font-size: 70px; } /* 1.45, measured - the accent gains real leading the moment it has room for it, where the headline above it stays solid. */ .avc-hero .avc-hero__accent { font-size: 50px; line-height: var(--lh-lead); } .avc-when .avc-when__title { font-size: var(--t-h2); line-height: 1.1; } } /* ================================================================== * 11 LAID OUT (>= 769) * * The original's own layout breakpoint, and where six of the seven 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.avc-band { padding-inline: var(--gutter); } /* 100/100, against 50/100 stacked. Measured per band - applying one row's padding to every row has left this site's bands visibly lopsided three separate times. */ .avc-hero { padding-block: 100px; } /* 100px of air above the summary card, against 10px all round while stacked - and it arrives HERE, at the layout breakpoint, not at 993 with the hero's columns. Measured on both sides of 769. Put in the 993 block by mistake first time and the band came out 80px short at every width from 769 to 992, which is the range nothing else on the page changes in. */ .avc-hero__summary { margin: 100px 0 0; } /* Titles take their per-band alignment back at the width the bands become columns - which is this page's own answer and not /about/'s, where it happens at 993. Measured on both. */ .avc-band .avc-title { text-align: left; } .avc-band .avc-title--center { text-align: center; } /* --- 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 row still fits and nothing looks broken, it is just no longer the original's grid. On /about/ that turned four equal columns into 195/178/178/178 and there was no symptom to notice. ------------------------- */ .avc-get__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avc-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avc-book__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avc-report__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avc-isnt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .avc-dq { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* --- band 3's three closing blocks each sit in a column of their own measured width with an EMPTY column beside it - 70, 69.92 and 67.67 per cent of the band, three different numbers that look like one. The empty columns are not reproduced; their effect is, which is where the copy stops. justify-self, because a grid item with a definite width would otherwise be centred by any stray auto margin. --------------- */ .avc-report .avc-report__hits, .avc-report .avc-report__tail, .avc-invented { justify-self: start; } /* The percentage is the COLUMN's, and the copy sits 20px inside it - so the inset comes out of the width rather than being added to it. Written as a plain `width: 70%` the block ends 40px wider than the original's column, which is invisible at 1280 and moves where the sentence wraps at three other widths. */ .avc-report .avc-report__hits { width: calc(70% - var(--avc-inset) * 2); margin: 60px var(--avc-inset) 20px; } .avc-report .avc-report__tail { width: calc(67.67% - var(--avc-inset) * 2); margin: 60px var(--avc-inset) 20px; } /* --- band 3's navy card. The icon sits top-left and the copy is dragged up beside it with a -70px top margin, which is the original's own overlap and survives being moved into a grid because grid rows size to the margin box: 30+35.2+20 above, -70+106.8+20 below, 142 of content plus the 10px rule. ------ */ .avc-invented { width: 69.92%; margin: 20px 0 0; } .avc-invented__icon { margin: 30px 20px 20px 30px; } .avc-invented__text { margin: -70px 20px 20px 100px; } /* --- band 2 ------------------------------------------------------ */ .avc-get .avc-title { margin-top: 60px; } /* 400px is the photograph's own cap, not the column's - measured 400 at 992 where the column has 436 to give it. */ .avc-get__img { width: min(100%, 400px); margin: 60px auto 20px; } /* --- band 4 ------------------------------------------------------ */ /* 5 top and left, 10 right - the pill is a hair off centre in the original and it is per-node, not a rounding artefact. */ .avc-when__pill { margin: 5px 10px 5px 5px; } .avc-when .avc-when__text { margin-bottom: 60px; } /* --- band 5 ------------------------------------------------------ */ .avc-why .avc-title { margin-top: 60px; } .avc-why .avc-copy { margin-bottom: 60px; } .avc-why__img { width: min(100%, 400px); margin: 100px auto 20px; } /* --- band 6 ------------------------------------------------------ */ /* ORDER MATTERS AND BOTH ARE (0,2,0). "Not For Tire Kickers" carries .avc-title too, so the 40px tail above lands on it as well and has to be taken off again HERE - a same-specificity override written earlier in the file loses silently, and the band came out exactly 40px tall the first time this was measured. */ .avc-isnt .avc-title { margin-bottom: 40px; } .avc-isnt .avc-isnt__second { margin-bottom: 0; } .avc-isnt .avc-isnt__label { margin: 40px var(--avc-inset) 20px; } .avc-isnt__body { margin-bottom: 40px; } .avc-isnt .avc-isnt__one { margin: 40px var(--avc-inset); } .avc-isnt .avc-isnt__tail { margin-bottom: 40px; } .avc-dq__item { margin: 15px; } .avc-dq__icon { margin: 20px auto 23.3px; } /* --- band 7. The photograph is right-aligned against the copy beside it, and 200px wide at every width on the page. ------- */ .avc-book__img { margin: 40px 0 40px auto; } .avc-book .avc-book__text p { margin: 100px var(--avc-inset) 40px; text-align: left; } } /* ================================================================== * 12 FULL DESKTOP (>= 993) * * Three things arrive here and nowhere else: the hero becomes two * columns, the grey pill stops running the full band, and band 4's copy * and photograph split. Everything else on the page settled at 769. * * Measured, not inferred: at 992 the calendar is still the full width of * the hero with the mascot centred under it, and band 4's photograph is * still capped at 500px in a 952px band. * ================================================================== */ @media (min-width: 993px) { .avc-hero .avc-hero__headline { margin-top: 20px; } /* 82/18, and it changes again at 1201 - see section 13. */ .avc-hero__book { grid-template-columns: minmax(0, 82fr) minmax(0, 18fr); } /* 100%, NOT auto. An whose width and height come from attributes has no box until the file loads unless one axis is definite - on /about/ three images that fill their column measured 0x0 in the render harness and would have shifted the layout under the reader on a real page. */ .avc-hero__img { width: 100%; margin: 100px 0 20px; } /* Four across, from two. */ .avc-report__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* --- band 4 ------------------------------------------------------ */ /* Same arithmetic as band 3's two blocks: 47.17% is the column, and the pill's own 5+10 of side margin comes out of it. */ .avc-when__pill { width: calc(47.17% - 15px); justify-self: start; } .avc-when__grid { grid-template-columns: minmax(0, 49.92fr) minmax(0, 50.08fr); } /* The 500px cap comes off - measured 541 at 1201 and 561 at 1280. */ .avc-when__img { width: 100%; margin: 60px 0 20px; } } /* ================================================================== * 13 THE WIDE HERO (>= 1201) * * Beaver Builder's large breakpoint, and the only thing on this page that * uses it. Two changes, both in the hero and both measured on either * side: the calendar/mascot split moves from 82/18 to 80/20, and the * mascot starts leaning out of its column by 50px on each side. * ================================================================== */ @media (min-width: 1201px) { /* 80.02/19.98, not 80/20 - measured 992.2 of 1240 at 1280 and 1120.3 of 1400 at 1512. The original's column was set in pixels and the percentage is what fell out of it. */ .avc-hero__book { grid-template-columns: minmax(0, 80.02fr) minmax(0, 19.98fr); } /* The bleed. calc + negative margins rather than a transform, because the drawing has to actually occupy the wider box - a transform would scale it and leave the layout where it was. The band clips the overflow; see section 03. */ /* max-width: none is load-bearing. main.css puts `max-width: 100%` on every img, which silently clamps the calc back to the column and leaves the drawing exactly where it was - the bleed simply would not happen, and nothing would error. */ .avc-hero__img { max-width: none; width: calc(100% + 100px); margin: 100px -50px 20px; } } /* ================================================================== * 14 THE 400px PHONE CAP (<= 599) * * Below 769 the original caps its narrow stacked columns at 400px and * centres them. 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. Same call as /services/ and /about/. * * 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. * * NOT EVERY COLUMN IS CAPPED, and which ones are was measured rather than * derived from Beaver Builder's own rule. Band 3 keeps all four report * cards, both closing blocks and the navy card at full width, and so do * band 4's copy and photograph - a 500px photograph inside a 400px column * is the version of this that looks like a bug. * ================================================================== */ @media (max-width: 599px) { .avc-get__text, .avc-get__media, .avc-why__media, .avc-why__text, .avc-book__media, .avc-book__text, .avc-dq__item { 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. On /about/ the same two-cards-in-a-capped-column case came out 10px wide at 599 and moved where the copy wrapped. */ .avc-when__pill, .avc-isnt__card { width: min(100% - 20px, 380px); margin-inline: auto; } /* The three titles whose leading is solid rather than 1.1 on a phone. Per-node in the original, only ever visible where a title wraps - and "Why We Ask Those Questions" wraps at every phone width. */ .avc-when .avc-when__title, .avc-why .avc-title, .avc-isnt .avc-title { line-height: 1; } } /* ================================================================== * 15 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, for four separate reasons: * * the grey pill already carries the original's own opaque 3px 2px 5px * shadow at every width, and it is heavier than --shadow-card; * * the three "what this isn't" cards are a light grey texture on dark * artwork - they separate on contrast alone, and --shadow-card is navy, * which is invisible on a dark band anyway; * * the navy "Michael Walen" card is dark-on-white with a 10px blue rule * under it, which is already a stronger edge than a shadow; * * the four report cards are not cards. They have no fill, no border and * no radius - they are four columns of blue copy, and putting a shadow * under them would invent an object the original does not have. * * The one thing this page does add for touch is the hover underline in * section 01, which is not a shadow decision: it exists because a colour * hover is invisible on the three dark bands, on a mouse or otherwise. * ================================================================== */ @media (max-width: 992px) { /* The mascot while its band is still one column. A layout cap, not a type one, so it follows the layout breakpoint. */ .avc-hero__img { width: 300px; margin: 0 auto; } } @media (max-width: 768px) { .avc-hero__img { width: 200px; margin: 20px auto 0; } /* STACKING ORDER. This band leads with a photograph and introduces 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 `responsive-reversed` behaviour, verified at 375. */ .avc-why__media { order: 2; } }