/* hawaagri build 124 */ /* ========================================================================== Home sections: hero slider, logo carousels, Google reviews ========================================================================== */ /* --- Hero ---------------------------------------------------------------- */ .hax-hero{position:relative;width:100%;height:100vh;min-height:640px;max-height:900px; padding:0;margin:0;box-sizing:border-box;overflow:hidden;background:#164333} .hax-hero__viewport{position:absolute;inset:0} .hax-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease} .hax-hero__slide.is-active{opacity:1;visibility:visible;z-index:1} .hax-hero__media{position:absolute;inset:0;display:block} .hax-hero__media img{width:100%;height:100%;object-fit:cover;display:block} .hax-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.05) 100%)} .hax-hero__inner{position:relative;height:100%;max-width:1230px;margin:0 auto;padding:0 20px; display:flex;align-items:center;box-sizing:border-box} .hax-hero__content{max-width:520px;padding-bottom:120px} /* Measured off the reference screenshot at 1904px wide: the headline is UPPERCASE and sits ABOVE the eyebrow line (build 73 had this inverted), the cap height works out to roughly a 40px face, and the tracking is open rather than tight. The eyebrow is narrower than build 73 had it, so it breaks after "agriculture" exactly as the reference does. */ .hax-hero__title{font-family:"DM Sans",Ubuntu,sans-serif;font-size:45px;font-weight:700; line-height:1.12;letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0 0 26px} .hax-hero__text{font-family:Ubuntu,sans-serif;font-size:18px;font-weight:400;line-height:30px; color:#fff;margin:0 0 34px;max-width:380px} /* Measured off the reference recording: 228x43 CSS, radius 10. Hover is NOT a colour fade — a dark-green panel with a curved leading edge sweeps down over the button in roughly .3s and retreats upward on leave. ::before is that panel: parked directly above the button, its rounded bottom corners are what draw the curve as it passes through. */ .hax-hero__btn{position:relative;z-index:0;overflow:hidden;display:inline-block; min-width:228px;text-align:center;background:#8BC53F;color:#fff; font-family:Ubuntu,sans-serif;font-size:15px;font-weight:600;line-height:1; text-decoration:none;padding:14px 26px;border-radius:10px; transition:color .2s ease} .hax-hero__btn::before{content:"";position:absolute;z-index:-1;left:-8%;width:116%; top:0;height:150%;background:#2C6E35;border-radius:0 0 50% 50% / 0 0 34% 34%; transform:translateY(-101%); transition:transform .34s cubic-bezier(.42,0,.24,1)} .hax-hero__btn:hover::before, .hax-hero__btn:focus-visible::before{transform:translateY(0)} .hax-hero__btn:hover,.hax-hero__btn:focus{color:#fff} /* Headline leads, eyebrow follows, button lands last — the reference order. The headline sweeps in from the left out of a mask; the other two rise. */ .hax-hero__slide.is-active .hax-hero__text, .hax-hero__slide.is-active .hax-hero__btn{animation:hax-hero-in .7s cubic-bezier(.22,.61,.36,1) both} .hax-hero__slide.is-active .hax-hero__text{animation-delay:.34s} .hax-hero__slide.is-active .hax-hero__btn{animation-delay:.52s} .hax-hero__title{overflow:hidden} .hax-hero__title > span{display:block} .hax-hero__slide.is-active .hax-hero__title > span{ animation:hax-hero-sweep .9s cubic-bezier(.16,.84,.44,1) both} @keyframes hax-hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes hax-hero-sweep{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:none}} /* ========================================================================== The right-hand rails — pagination dots + social icons. -------------------------------------------------------------------------- HOW THIS KEPT BREAKING The dots and the icons used to be two separate absolutely-positioned rails. The dots were anchored to the 1230px content column, `right:calc((100% - 1230px)/2 + 22px)`, and the icons to the viewport edge, `right:clamp(24px,5vw,96px)`. Those two anchors converge as the viewport narrows, and somewhere around 14" they cross — which is the overlap. Builds 80, 81 and 82 each tried to fix it by keeping the two rails apart arithmetically, and each time the reported screenshot came back with the dots still sitting on the icons. Measuring the last one explains why. From the screenshot: the icon rail sits 68.2px in from the right edge, and 5vw of a 1361px viewport is 68.1px — so the viewport is 1361px, confirmed to within a tenth of a pixel. The icons render 36.6px across, which is the base 34px plus two 1.5px borders, so the `max-width:1440px` step-down to 31px is NOT applying at 1361px. And the dots sit 87.6px in, which is exactly `(1361 - 1230)/2 + 22` — the rule inside `@media (min-width:1501px)`, which IS applying at 1361px. So on that browser a min-width:1501 query matches at 1361px while a max-width:1440 query does not. Media queries in this stylesheet are being evaluated against something much wider than the actual layout, in both directions. Every previous fix was written on the assumption that a breakpoint would be judged correctly, and that assumption does not hold here — which is why the base-rule fix in build 82 still lost: the min-width:1501 rule came after it and won regardless of viewport. THE FIX Stop expressing the gap as a number, and stop having two rails. The dots and the icons are now children of one flex container. The space between them is a flex `gap` — laid out by the box model, not computed from two offsets that have to agree. There is no arithmetic to fall out of step, no second anchor to converge on the first, and no breakpoint that has to be evaluated correctly for the two to stay apart. If every media query in this file misfires, the rails still cannot touch: they are siblings in a row. The `min-width:1501px` rule is deleted rather than corrected. It was the declaration actually landing on the icons, and its only purpose was cosmetic — pulling the dots in to the content column on wide screens. ========================================================================== */ .hax-hero__rails{position:absolute;top:50%;right:clamp(14px, 5vw, 96px); transform:translateY(-50%);z-index:5; display:flex;flex-direction:row;align-items:center;gap:26px} /* Inside the rails the two groups are ordinary flex items. `position:static` is load-bearing: it makes any stray `right`/`top` from an older rule — or from a cached copy of this stylesheet — inert rather than repositioning. */ .hax-hero__rails .hax-hero__dots, .hax-hero__rails .hax-social{position:static;transform:none; top:auto;right:auto;bottom:auto;left:auto} /* The dots' own base rule is the fallback for a page cache still serving HTML from before the wrapper existed. In that case there is no flex row to sit in, so rather than guess an offset that has to clear the icon rail — the exact guess that kept failing — the dots go to the bottom of the hero as a horizontal row. The icon rail is vertically centred at the right edge, so the two cannot meet there whatever the viewport. As soon as the cached page expires and the wrapper appears, the rules above take over. */ .hax-hero__dots{position:absolute;bottom:26px;right:clamp(14px, 5vw, 96px); z-index:4;display:flex;flex-direction:row;gap:11px} .hax-hero__rails .hax-hero__dots{flex-direction:column;bottom:auto} .hax-hero__dot{width:13px;height:13px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.62);transition:background .2s ease,transform .2s ease} .hax-hero__dot.is-active{background:#A6C665;transform:scale(1.08)} /* Social rail. Inside `.hax-hero__rails` this is a flex item and the positioning below is inert; it is kept as the same kind of fallback the dots have, for a cached page whose markup predates the wrapper. The circles were 48px, which read as oversized next to the hero copy. They are 34px, and that size is stated once, in the base rule — there is no breakpoint variant, because this file has now demonstrated twice that its breakpoints cannot be trusted to be evaluated against the real viewport. */ .hax-social{position:absolute;right:clamp(14px, 5vw, 96px);top:50%; transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:16px} .hax-social__link{width:34px;height:34px; border:1.5px solid rgba(255,255,255,.9);border-radius:50%; display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease} .hax-social__link svg{width:15px;height:15px;fill:currentColor} .hax-social__link:hover{background:#8BC53F;border-color:#8BC53F;color:#fff} /* The 1440px step-down that used to live here is gone. It was measured as not applying at 1361px while a min-width:1501px rule was, so it was carrying a second icon size that never arrived where it was aimed. One size, stated once, is both simpler and immune to that. */ @media (max-width:1024px){ .hax-hero{height:auto;min-height:560px;max-height:none} .hax-hero__title{font-size:38px;letter-spacing:1.8px} .hax-hero__content{padding:110px 0 150px} /* With the icons hidden the rails hold only the dots, and the flex row collapses to them — no offset to restore. */ .hax-social{display:none} } @media (max-width:767.98px){ .hax-hero{min-height:480px} .hax-hero__inner{padding:0 20px} .hax-hero__content{max-width:100%;padding:90px 0 130px} .hax-hero__title{font-size:28px;letter-spacing:1.2px;margin-bottom:18px} .hax-hero__text{font-size:15px;line-height:26px;margin-bottom:26px} .hax-hero__btn{min-width:0;padding:14px 26px} .hax-hero__dots{gap:9px} .hax-hero__dot{width:10px;height:10px} .hax-hero__overlay{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.5) 100%)} } @media (prefers-reduced-motion:reduce){ .hax-hero__slide{transition:none} .hax-hero__btn::before,.hax-member__photo{transition:none} .hax-hero__slide.is-active .hax-hero__title > span, .hax-hero__slide.is-active .hax-hero__text, .hax-hero__slide.is-active .hax-hero__btn{animation:none} } /* --- Logo carousels (white card, arrows) --------------------------------- */ .hax-logos{position:relative;max-width:1360px;margin:0 auto;padding:0 20px;box-sizing:border-box} .hax-logos__title{font-family:Ubuntu,sans-serif;font-size:16px;font-weight:500;color:#fff; margin:0 0 14px;padding-left:2px} .hax-logos__card{position:relative;background:#fff;border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.10);padding:30px 62px;overflow:hidden} .hax-logos__viewport{overflow:hidden} .hax-logos__track{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none; transition:transform .5s cubic-bezier(.4,0,.2,1)} .hax-logos__item{flex:0 0 16.6667%;display:flex;align-items:center;justify-content:center; padding:6px 20px;box-sizing:border-box} .hax-logos__img{display:block;max-height:44px;width:auto;max-width:100%;object-fit:contain; transition:transform .25s ease,opacity .25s ease;opacity:.92} .hax-logos__item:hover .hax-logos__img{opacity:1;transform:scale(1.07)} .hax-logos__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:34px;height:34px;border:0;background:none;cursor:pointer;color:#2C6E35; display:flex;align-items:center;justify-content:center;transition:color .2s ease} .hax-logos__nav:hover{color:#8BC53F} .hax-logos__nav svg{width:22px;height:22px} .hax-logos__nav--prev{left:14px} .hax-logos__nav--next{right:14px} /* Default: an arrow with nothing to page to is hidden, which is what the inline style used to do. Individual carousels can opt out below. */ .hax-logos__nav--off{display:none} /* Partners sits over the bottom of the hero */ .hax-logos--partners{margin-top:-118px;position:relative;z-index:3} .hax-logos--brands{margin-top:56px;margin-bottom:56px} .hax-logos--brands .hax-logos__title{color:#164333;font-family:"Mriya Grotesk",Ubuntu,sans-serif; font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.04em} @media (max-width:1024px){ .hax-logos__item{flex:0 0 25%} } @media (max-width:767.98px){ .hax-logos--partners{margin-top:-96px;margin-bottom:0;padding-bottom:0} .hax-logos__card{padding:18px 44px} .hax-logos__item{flex:0 0 50%;padding:6px 12px} .hax-logos__img{max-height:34px} .hax-logos__nav{width:28px;height:28px} .hax-logos__nav--prev{left:8px} .hax-logos__nav--next{right:8px} } /* Clients: over a photo background */ .hax-logos--clients{margin:0 auto;padding:64px 20px} .hax-logos--clients .hax-logos__title{color:#fff;font-family:"Mriya Grotesk",Ubuntu,sans-serif; font-size:30px;font-weight:900;text-align:center;margin:0 0 30px;text-transform:none;letter-spacing:0} /* Clients now uses the same white panel as Our Partners rather than a transparent strip of individual white tiles, so the two logo carousels read as one component. Only the section heading and background differ. */ .hax-logos--clients .hax-logos__card{background:#fff;border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.10);padding:26px 62px} .hax-logos--clients .hax-logos__item{padding:6px 20px} .hax-logos--clients .hax-logos__img{max-height:56px;background:none;padding:0; border-radius:0;opacity:.92} .hax-logos--clients .hax-logos__item:hover .hax-logos__img{opacity:1} /* Four across, not five. With five client logos, five slots meant a single page, so `syncNav()` disabled both arrows and they sat on screen doing nothing. Four gives two pages and the arrows work. Logo size is unchanged — the cap is `max-height`, so the cells only get more room. */ .hax-logos--clients .hax-logos__item{flex:0 0 25%} .hax-logos--clients .hax-logos__nav{color:#2C6E35} /* Clients keeps its arrows on screen at all times so the section reads the same as Our Partners. They dim and stop responding while everything fits on one page, and become active as soon as there are more logos than fit. */ .hax-logos--clients .hax-logos__nav--off{display:flex;opacity:.32;cursor:default} .hax-logos--clients .hax-logos__nav--off:hover{color:#2C6E35} .hax-logos--clients .hax-logos__nav:hover{color:#8BC53F} /* Tablet: four across rather than five. `.hax-logos--clients .hax-logos__item{flex:0 0 20%}` above sits outside any media query, and it is written after the `max-width:1024px` block near the top of this file, so at equal specificity it won and the client strip stayed five-across on tablet. With five logos in five slots the carousel only ever had one page, `syncNav()` disabled both arrows, and the clients opt-out below kept them on screen at .32 opacity — visible arrows that did nothing. Four across gives the five logos two pages, so the arrows work. This block is placed after the 20% rule so it actually applies. Desktop is untouched. Mobile already goes two-across further down and was already working. */ @media (max-width:1024px){ .hax-logos--clients .hax-logos__item{flex:0 0 25%} } /* --- Google reviews ------------------------------------------------------ */ .hax-reviews{max-width:1360px;margin:0 auto;padding:64px 20px;box-sizing:border-box} .hax-reviews__bar{display:flex;align-items:flex-start;justify-content:space-between; gap:24px;flex-wrap:wrap;margin:0 0 34px} .hax-reviews__title{font-family:Ubuntu,sans-serif;font-size:22px;font-weight:400;color:#333;margin:0 0 6px} .hax-reviews__summary{display:flex;align-items:center;gap:8px;margin:0; font-family:Ubuntu,sans-serif;font-size:15px;color:#797F7D} .hax-reviews__cta{background:#8BC53F;color:#fff;font-family:Ubuntu,sans-serif;font-size:16px; font-weight:500;text-decoration:none;padding:15px 34px;border-radius:4px;transition:background .2s ease} .hax-reviews__cta:hover{background:#164333;color:#fff} .hax-reviews__card{position:relative;padding:0 54px} .hax-reviews__track{align-items:stretch} .hax-review{flex:0 0 25%;box-sizing:border-box;padding:0 10px;display:flex;flex-direction:column; align-items:center;text-align:center;list-style:none} .hax-review::before{content:"";display:none} .hax-review > *{position:relative} .hax-review{background:none} .hax-review__google{display:block;margin:0 0 10px} .hax-review__google svg{width:26px;height:26px} .hax-review__stars{display:inline-flex;gap:3px;line-height:0;margin:0 0 16px} .hax-review__star{width:16px;height:16px;fill:#d8dbe0} .hax-review__star.is-on{fill:#F5A623} .hax-review__text{font-family:Ubuntu,sans-serif;font-size:15px;line-height:26px;color:#555;margin:0 0 18px} .hax-review__author{font-family:Ubuntu,sans-serif;font-size:15px;font-weight:700;color:#333;margin:0 0 12px} .hax-review__avatar{border-radius:50%;width:52px;height:52px;object-fit:cover;margin:auto 0 0} /* the visible white panel behind each review */ .hax-reviews__track .hax-review{position:relative} .hax-reviews__track .hax-review::after{content:"";position:absolute;inset:0 10px; background:#fff;border:1px solid #ececec;border-radius:6px;z-index:-1} @media (max-width:1024px){ .hax-review{flex:0 0 33.3333%} } @media (max-width:767.98px){ .hax-reviews{padding:44px 15px} .hax-reviews__bar{margin-bottom:24px} .hax-reviews__card{padding:0 34px} .hax-review{flex:0 0 100%} .hax-reviews__cta{padding:13px 26px;font-size:15px} } /* --- Our Team ------------------------------------------------------------ */ .hax-team{background:#909F7C;position:relative;overflow:hidden} .hax-team__inner{max-width:1360px;margin:0 auto;padding:64px 20px 72px;box-sizing:border-box;position:relative;z-index:1} .hax-team__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px; flex-wrap:wrap;margin:0 0 40px} .hax-team__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:40px;font-weight:900; color:#fff;margin:0 0 10px} .hax-team__sub{font-family:Ubuntu,sans-serif;font-size:16px;line-height:1.6;color:#fff; margin:0;max-width:620px} .hax-team__cta{background:#fff;color:#4C8C2B;font-family:Ubuntu,sans-serif;font-size:16px; font-weight:500;text-decoration:none;padding:16px 34px;border-radius:6px;white-space:nowrap; transition:background .2s ease,color .2s ease} .hax-team__cta:hover{background:#164333;color:#fff} /* Live gives every member their own white card rather than seating the whole carousel inside one panel, and drops the arrows below the row on the left as two outlined circles. The carousel plumbing (viewport / track / nav) is still the shared component; only the chrome differs. */ .hax-team__card{background:none;border-radius:0;box-shadow:none; padding:0 0 78px;overflow:visible} .hax-team__card .hax-logos__viewport{overflow:hidden;padding:4px 0 10px} .hax-team__track{align-items:stretch} .hax-team__track .hax-member{flex:0 0 25%;flex-direction:column;align-items:center; justify-content:flex-start;text-align:center;padding:0;background:none; border-radius:0;box-shadow:none} /* The card is an inner wrapper so the flex item can keep carrying the gutter. */ .hax-team__track .hax-member{box-sizing:border-box;padding:0 7px} .hax-member__inner{width:100%;flex:1 1 auto;box-sizing:border-box;background:#fff; border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.10);padding:26px 18px 30px; display:flex;flex-direction:column;align-items:center; transition:transform .25s ease,box-shadow .25s ease} /* The reference does NOT lift the card, add an overlay, or reveal social icons on hover. Frame-by-frame, the only thing that changes is the portrait: it scales about 1.08 from its top edge over roughly a third of a second, so the head stays put and the crop grows downward. */ .hax-team__track .hax-member:hover .hax-member__inner{box-shadow:0 8px 26px rgba(0,0,0,.10)} /* A fixed box with object-fit:contain so any upload size renders at consistent dimensions and cannot break the row. */ /* THE CIRCLE. The reference masks each portrait with a shape that is square-sided at the top and a clean semicircle at the bottom, so the head reads normally while the shoulders are cut away on an arc. Staging was showing the raw cut-out, shoulders and all — that missing arc is the "circular element". Measured off the reference (its recording is at 125% zoom, so device px are divided by 1.25): the mask is 112 x 170 CSS on a 293px card, i.e. ~38% of the card width, and its bottom radius is exactly half its width. With aspect-ratio locked at 112/170, a vertical radius of 33% always equals half the width (0.5 x 112/170 = 32.9%), so the arc stays a true semicircle at every size. */ .hax-member__media{width:150px;max-width:50%;aspect-ratio:1 / 1; margin:0 auto 18px;overflow:hidden; border-radius:0 0 50% 50% / 0 0 50% 50%} /* Measured frame by frame off the reference recording (20fps): rest portrait ink 140 x 213, top edge at y=30 hovered portrait ink 146 x 223, top edge at y=20 The BOTTOM edge is identical in both (243) — the portrait grows upward out of its baseline, so the origin is the bottom, not the top. Scale is 1.045 (146/140 and 223/213 agree), not the 1.08 build 75 used. Enter and leave are not the same length: entering reaches 98% in ~0.30s and settles by ~0.40s; leaving is back to rest in ~0.22s. The base rule is the leave, the :hover rule is the enter. */ /* contain, not cover: nothing is scaled past the box, so no part of anyone is cut away by the fit. The whole portrait is inside the frame and the arc only trims the bottom corners — the shoulders — which is the shape the reference has. The box is square so a contained portrait fills it by height and does not leave a well of empty space above the head. The hover origin stays at the bottom; fit and transform origin are separate things. */ .hax-member__photo{width:100%;height:100%;display:block; object-fit:contain;object-position:50% 100%; transform-origin:50% 100%; transition:transform .22s cubic-bezier(.4,0,.6,1)} .hax-team__track .hax-member:hover .hax-member__photo, .hax-team__track .hax-member:focus-within .hax-member__photo{ transform:scale(1.045); transition:transform .4s cubic-bezier(.16,.84,.44,1)} .hax-member__name{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:19px;font-weight:700; color:#333;margin:0 0 8px} .hax-member__role{font-family:Ubuntu,sans-serif;font-size:15px;color:#6FA82F;margin:0} /* Arrows: outlined white circles, below the row, left aligned. */ .hax-team__card .hax-logos__nav{top:auto;bottom:0;transform:none; width:38px;height:38px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%; background:none;color:#fff;transition:background .2s ease,color .2s ease,border-color .2s ease} .hax-team__card .hax-logos__nav svg{width:18px;height:18px} .hax-team__card .hax-logos__nav--prev{left:11px;right:auto} .hax-team__card .hax-logos__nav--next{left:60px;right:auto} .hax-team__card .hax-logos__nav:hover{background:#fff;color:#4C8C2B;border-color:#fff} /* Keep both arrows visible even when everything fits, as live does. */ .hax-team__card .hax-logos__nav--off{display:flex;opacity:.4;cursor:default} .hax-team__card .hax-logos__nav--off:hover{background:none;color:#fff; border-color:rgba(255,255,255,.85)} @media (max-width:1024px){ .hax-team__card{padding:0 0 72px} .hax-team__track .hax-member{flex:0 0 33.3333%;padding:0 9px} .hax-member__inner{padding:22px 14px 26px} .hax-member__media{width:138px} } @media (max-width:767.98px){ .hax-team__inner{padding:44px 20px 50px} .hax-team__title{font-size:28px} .hax-team__cta{padding:13px 26px} .hax-team__card{padding:0 0 64px} .hax-team__track .hax-member{flex:0 0 50%;padding:0 7px} .hax-member__inner{padding:18px 12px 22px;border-radius:8px} .hax-member__media{width:122px;margin-bottom:12px} .hax-member__name{font-size:16px;line-height:22px} .hax-member__role{font-size:13px} .hax-team__card .hax-logos__nav{width:34px;height:34px} .hax-team__card .hax-logos__nav--prev{left:7px} .hax-team__card .hax-logos__nav--next{left:50px} } /* ========================================================================== Home page bands — mirrors the live site section-for-section. The live page alternates a subtle photo texture behind the advantages, products and blog bands, a photo behind Our Team, and a vector behind Our Clients. Widths follow the live 1150px content column. ========================================================================== */ .ha-band{position:relative;box-sizing:border-box;padding-inline:20px} /* The inner content is capped at 1200px and centred, so this gutter only engages below roughly 1240px. Desktop is unaffected. */ .ha-band > *{position:relative;z-index:1} /* Shared texture used by advantages / products / blog on the live site. The flat colour is a deliberate fallback: if the texture file is missing from this environment's uploads the band still reads as an alternating section instead of collapsing to white. */ .ha-band--texture{background-color:#F7F8F6; background-image:url(/wp-content/uploads/2024/07/shutterstock_1384887293-2.png); background-repeat:no-repeat;background-position:center;background-size:cover} .ha-band--advantages{padding:150px 20px 95px} .ha-band--categories{padding:28px 20px 90px} .ha-band--products{padding:57px 20px 108px} .ha-band--reviews{padding:28px 20px 85px} .ha-band--clients{padding:28px 20px 45px;background-color:#164333; background-image:url(/wp-content/uploads/2024/07/Vector.jpg); background-repeat:no-repeat;background-position:center;background-size:cover} .ha-band.ha-blog{padding:28px 20px 104px} /* Section headings ------------------------------------------------------- */ .ha-band__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:40px;line-height:52px; font-weight:900;color:#333;margin:0 0 10px} .ha-band__lead{font-family:Ubuntu,sans-serif;font-size:16px;line-height:26px;color:#797F7D; max-width:520px;margin:0 auto 26px} .ha-band__eyebrow{font-family:Ubuntu,sans-serif;font-size:20px;line-height:26px;font-weight:400; color:#333;margin:0 0 46px;max-width:520px} .ha-band__eyebrow strong{font-weight:700} .ha-band__cta{margin:0 0 34px} .ha-band__cta--after{margin:40px 0 0;position:relative;z-index:1} .ha-band .ha-btn-outline .wp-block-button__link{font-family:Ubuntu,sans-serif;font-size:16px; font-weight:500;line-height:1;padding:16px 34px;border-radius:6px; border:1px solid #8BC53F;background:transparent;color:#4C8C2B; transition:background .2s ease,color .2s ease,border-color .2s ease} .ha-band .ha-btn-outline .wp-block-button__link:hover, .ha-band .ha-btn-outline .wp-block-button__link:focus{background:#8BC53F;border-color:#8BC53F;color:#fff} /* Advantages ------------------------------------------------------------- */ .ha-band--advantages .ha-advantages{display:grid;grid-template-columns:repeat(4,1fr); gap:0 40px;margin:0} .ha-band--advantages .ha-advantage{text-align:left;padding:0} .ha-band--advantages .ha-advantage__icon{margin:0 0 22px} .ha-band--advantages .ha-advantage__icon img{width:70px;height:70px;object-fit:contain} .ha-band--advantages .ha-advantage__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif; font-size:20px;line-height:26px;font-weight:900;color:#333;margin:0 0 12px} .ha-band--advantages .ha-advantage__text{font-family:Ubuntu,sans-serif;font-size:14px; line-height:22px;color:#9AA1A9;margin:0} /* Our Categories --------------------------------------------------------- */ .hax-cats{position:relative;padding:0 54px} .hax-cats__track{align-items:stretch} .hax-cat{flex:0 0 25%;box-sizing:border-box;padding:0 10px;list-style:none;display:flex} .hax-cat__link{position:relative;display:block;width:100%;height:478px;overflow:hidden; border-radius:10px;text-decoration:none;isolation:isolate} .hax-cat__bg{position:absolute;inset:0;background-size:cover;background-position:center; transition:transform .6s cubic-bezier(.2,.6,.2,1)} .hax-cat__veil{position:absolute;inset:0;background-size:cover;background-position:center bottom; background-repeat:no-repeat} /* Live keeps an even scrim over the whole tile rather than a bottom gradient, and washes the tile green on hover. ::after is the resting scrim, ::before is the green wash that fades in over it. */ .hax-cat__link::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.34) 100%)} .hax-cat__link::before{content:"";position:absolute;inset:0;z-index:2; background:#8BC53F;opacity:0;transition:opacity .35s ease} .hax-cat__link:hover::before, .hax-cat__link:focus-visible::before{opacity:.72} /* Title is centred on both axes inside the tile, not pinned to the bottom. */ .hax-cat__title{position:absolute;inset:0;z-index:3;display:flex;align-items:center; justify-content:center;text-align:center;padding:0 24px;box-sizing:border-box; font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:24px;line-height:30px;font-weight:900; color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.28)} .hax-cat__link:hover .hax-cat__bg, .hax-cat__link:focus-visible .hax-cat__bg{transform:scale(1.07)} .hax-cat__link:focus-visible{outline:2px solid #8BC53F;outline-offset:3px} /* Featured Products ------------------------------------------------------ */ /* Live splits this band into a 36% intro column and a 64% carousel column, with the carousel arrows sitting below the cards on the left. */ .ha-prodsplit{display:grid;grid-template-columns:36% minmax(0,1fr);gap:32px;align-items:start} .ha-prodsplit__carousel{min-width:0} .ha-prodsplit__intro .ha-band__title{text-align:left;margin:0 0 14px} .ha-prodsplit__intro .ha-band__lead{text-align:left;margin:0 0 26px;max-width:none; font-size:16px;line-height:25px;color:#9AA1A9} .ha-prodsplit__intro .ha-band__cta{margin:0;justify-content:flex-start} .hax-prods{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:0;min-width:0} .hax-prods > .hax-logos__viewport{order:-1;flex:0 0 100%;width:100%;min-width:0;max-width:100%; margin:0 -14px 22px} .hax-prods .hax-logos__nav{position:static;transform:none;width:38px;height:38px; border:1px solid #333;border-radius:50%;background:transparent;color:#8BC53F; transition:background .2s ease,border-color .2s ease,color .2s ease} .hax-prods .hax-logos__nav:hover{background:#8BC53F;border-color:#8BC53F;color:#fff} .hax-prods .hax-logos__nav svg{width:18px;height:18px} .hax-prods__track{align-items:stretch} .hax-prods__track .hax-prod{flex:0 0 48%;box-sizing:border-box;padding:0 14px; list-style:none;display:flex} /* The inner .wp-block-post keeps the shop card styling from shop.css. */ .hax-prods__track .hax-prod > .wp-block-post{width:100%} /* Solid green button, as used by both "View All" links on the live page. */ .ha-band .ha-btn-solid .wp-block-button__link{font-family:Ubuntu,sans-serif;font-size:16px; font-weight:500;line-height:1;padding:13px 46px;border-radius:10px;border:0; background:#8BC53F;color:#fff;transition:background .2s ease} .ha-band .ha-btn-solid .wp-block-button__link:hover, .ha-band .ha-btn-solid .wp-block-button__link:focus{background:#164333;color:#fff} /* Blog ------------------------------------------------------------------- */ /* One large feature on the left, three compact items stacked on the right. */ .hax-blog{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;margin:0} .hax-blog__feature{background:#fff;border-radius:8px;overflow:hidden; box-shadow:0 10px 30px rgba(0,14,40,.06);display:flex;flex-direction:column} .hax-blog__feature .hax-blog__thumb{display:block} .hax-blog__feature .hax-blog__thumb img{width:100%;aspect-ratio:580/254;object-fit:cover;display:block} .hax-blog__feature .hax-blog__body{padding:26px 28px 30px} .hax-blog__list{display:flex;flex-direction:column;gap:30px;margin:0;padding:0;list-style:none} .hax-blog__item{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:stretch; background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,14,40,.06)} .hax-blog__item .hax-blog__thumb{display:block;position:relative;min-height:140px;align-self:stretch} .hax-blog__item .hax-blog__thumb img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .hax-blog__item .hax-blog__body{padding:22px 24px;display:flex;flex-direction:column; justify-content:center;gap:14px} .hax-blog__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:26px;line-height:34px; font-weight:900;color:#333;margin:0 0 16px} .hax-blog__title--sm{font-size:20px;line-height:27px;margin:0} .hax-blog__title a{color:inherit;text-decoration:none;transition:color .2s ease} .hax-blog__title a:hover{color:#8BC53F} .hax-blog__excerpt{font-family:Ubuntu,sans-serif;font-size:15px;line-height:25px;color:#9AA1A9; margin:0 0 18px} .hax-blog__more{font-family:Ubuntu,sans-serif;font-size:15px;font-weight:500;color:#4C8C2B; text-decoration:underline;text-underline-offset:3px;align-self:flex-start} .hax-blog__more:hover{color:#8BC53F} /* Our Team background matches the live photo. */ .hax-team{background-color:#909F7C; background-image:url(/wp-content/uploads/2024/09/Our-Team-BG.jpg); background-size:cover;background-position:center} .hax-team__inner{padding-top:28px;padding-bottom:126px} /* Clients sit on the band background, so drop the duplicate padding. */ .ha-band--clients .hax-logos--clients{padding-top:0;padding-bottom:0} /* Responsive ------------------------------------------------------------- */ @media (max-width:1200px){ .hax-cat{flex:0 0 33.3333%} } @media (max-width:1024px){ .ha-band--advantages{padding:110px 20px 64px} .ha-band--products{padding:44px 20px 72px} .ha-band--advantages .ha-advantages{grid-template-columns:repeat(2,1fr);gap:40px} .ha-band__title{font-size:32px;line-height:42px} .ha-band__eyebrow{margin-bottom:34px} .hax-cat{flex:0 0 50%} .hax-cat__link{height:400px} .hax-prods__track .hax-prod{flex:0 0 50%} .ha-blog .ha-blog__grid{grid-template-columns:repeat(2,1fr)!important} } @media (max-width:767.98px){ .ha-band--advantages{padding:74px 20px 48px} .ha-band--categories{padding:24px 20px 56px} .ha-band--products{padding:36px 20px 56px} .ha-band--reviews{padding:24px 20px 48px} .ha-band.ha-blog{padding:24px 20px 72px} .ha-band--clients{padding:56px 20px 32px} .ha-band__title{font-size:26px;line-height:34px} .ha-band__lead{font-size:15px;line-height:24px} .ha-band__eyebrow{font-size:17px;line-height:24px;margin-bottom:28px} .ha-band--advantages .ha-advantages{grid-template-columns:1fr;gap:32px} .hax-cats,.hax-prods{padding:0 34px} .hax-cat{flex:0 0 100%} .hax-cat__link{height:340px} .hax-cat__title{font-size:20px;line-height:26px;padding:0 18px} .hax-prods__track .hax-prod{flex:0 0 100%} .ha-blog .ha-blog__grid{grid-template-columns:1fr!important;gap:20px} .hax-team__inner{padding-top:24px;padding-bottom:56px} } /* Reviews bar — live values ---------------------------------------------- */ /* Live's content column is 1230px; the home components were still on the old 1360px value, which pushed every band wider than the header/footer. */ .hax-hero__inner, .hax-logos, .hax-reviews, .hax-team__inner{max-width:1230px} .hax-reviews{padding-top:0;padding-bottom:0} .ha-band--clients .hax-logos--clients{padding-left:20px;padding-right:20px} .hax-reviews__title{font-family:Ubuntu,sans-serif;font-size:20px;line-height:26px; font-weight:700;color:#333;margin:0 0 10px} .hax-reviews__bar{align-items:center} .hax-reviews__summary{gap:10px} .hax-reviews__cta{display:inline-flex;align-items:center;justify-content:center; padding:13px 60px;border-radius:10px;font-size:16px;font-weight:500;line-height:1; white-space:nowrap;text-align:center} /* Products / blog responsive --------------------------------------------- */ @media (max-width:1024px){ .ha-prodsplit{grid-template-columns:1fr;gap:26px} .ha-prodsplit__intro .ha-band__title, .ha-prodsplit__intro .ha-band__lead{text-align:center} .ha-prodsplit__intro .ha-band__lead{margin-left:auto;margin-right:auto;max-width:520px} .ha-prodsplit__intro .ha-band__cta{justify-content:center} .hax-prods{justify-content:center} .hax-blog{grid-template-columns:1fr;gap:24px} } @media (max-width:767.98px){ .hax-prods__track .hax-prod{flex:0 0 100%} .hax-blog__title{font-size:22px;line-height:30px} .hax-blog__title--sm{font-size:18px;line-height:25px} .hax-blog__item{grid-template-columns:120px 1fr} .hax-blog__item .hax-blog__thumb img{width:120px;min-height:110px} .hax-blog__feature .hax-blog__body{padding:22px 20px 24px} .hax-reviews__bar{align-items:flex-start} .hax-reviews__cta{padding:13px 34px} } /* ========================================================================== Corrections from the mobile walkthrough at 390px, measured against live. ========================================================================== */ /* The Team CTA is an inline ; without a block-level box the anchor splits across two line boxes and renders as a stepped shape rather than a button. Same reason the reviews CTA needed it. */ .hax-team__cta{display:inline-flex;align-items:center;justify-content:center; text-align:center;white-space:nowrap} @media (max-width:767.98px){ .hax-team__cta{white-space:normal} /* Category tiles: live is 322x478 at this width, ours was 283x340. */ .hax-cats{padding:0 24px} .hax-cat__link{height:478px} /* Product cards: live shows ~1.35 cards (252 wide), ours filled the width. */ .hax-prods__track .hax-prod{flex:0 0 72%} /* The generic 26px logo cap was also hitting the client strip, shrinking those logos to 36px tall against live's much larger cards. */ .hax-logos--clients .hax-logos__img{max-height:40px;padding:0} .hax-logos--clients .hax-logos__card{padding:14px 44px} .hax-logos--clients .hax-logos__item{flex:0 0 50%} } /* The partners section's own bottom padding sat on the page background, producing a white strip between the logo card and the textured band below. The band's top padding now carries that separation instead, so the background runs straight through. Desktop and mobile both. */ .hax-logos--partners{padding-bottom:0} /* ========================================================================== Homepage alignment corrections. ========================================================================== */ /* "Growing Excellence" advantages. Core's default block gap puts `margin-top:24px` on every sibling after the first, so columns 2-4 started 24px lower than column 1 — the icons and headings stepped down across the row. The columns are grid cells laid out side by side, not stacked, so that vertical margin has no business here. `align-items:start` keeps them locked to a common top edge even when one column's copy runs a line longer. */ .ha-band--advantages .ha-advantages { align-items: start; } .ha-band--advantages .ha-advantage, .ha-band--advantages .ha-advantage + .ha-advantage { margin-top: 0; } /* Keep the icon row itself even when a heading wraps to two lines: the headings share a minimum height so every column's body copy starts on the same baseline. */ .ha-band--advantages .ha-advantage__title { min-height: 52px; } /* "Our Categories" heading pair. Title and lead are both centred, but the lead sat tight under a 52px heading and then a long way from the carousel. Evening out the two gaps makes them read as one block introducing the cards below. */ .ha-band--categories .ha-band__title { margin-bottom: 6px; } .ha-band--categories .ha-band__lead { max-width: 560px; margin-bottom: 38px; } /* "Featured Blog" heading. The band opened with only 28px above the title while closing with 104px, so the heading sat jammed under the team strip above it. */ .ha-band.ha-blog { padding-top: 64px; } .ha-band.ha-blog .ha-band__title { margin-bottom: 38px; } @media (max-width: 781px) { .ha-band--advantages .ha-advantage__title { min-height: 0; } .ha-band--categories .ha-band__lead { margin-bottom: 28px; } .ha-band.ha-blog { padding-top: 40px; } .ha-band.ha-blog .ha-band__title { margin-bottom: 26px; } } /* ========================================================================== Logo carousels — logos must never be cropped. -------------------------------------------------------------------------- Two things were clipping them, and both are base-rule problems rather than breakpoint problems: 1. `.hax-logos__viewport` is `overflow:hidden` with no vertical padding, so the hover `scale(1.07)` on a logo pushed it past the viewport's edge and the overflow rule sliced the top and bottom off. The same logo sitting at the left or right edge of a page got sliced vertically down its side. 2. The image was sized by `max-height` alone against an auto-height cell, so a tall or square logo set the row height and a wide one had nothing capping its width but the cell it happened to land in. The cell is now a fixed box and the logo is capped on BOTH axes against that box, so `object-fit:contain` has a definite frame to fit inside. The hover scale is dropped in favour of the opacity lift alone — with a fixed cell there is nowhere for a scaled logo to grow into that is not the neighbour's space or the clipped edge. Scoped to the three logo sections by modifier: `.hax-logos__item` and `.hax-logos__viewport` are shared with the team, category, product and review carousels, which size their own cells. ========================================================================== */ .hax-logos--partners .hax-logos__viewport, .hax-logos--brands .hax-logos__viewport, .hax-logos--clients .hax-logos__viewport{padding:4px 0} .hax-logos--partners .hax-logos__item, .hax-logos--brands .hax-logos__item, .hax-logos--clients .hax-logos__item{ height:86px;min-width:0;padding:8px 18px;box-sizing:border-box} /* The caps are absolute, not percentages. A percentage max-height has to resolve against a definite parent height, and inside the flex chain (item > optional link > img) it does not reliably do so — a tall logo just overflowed the cell it was supposed to fit inside. These values are smaller than the cell's content box at every breakpoint, so the fit is guaranteed without depending on how the percentage resolves. */ .hax-logos--partners .hax-logos__img, .hax-logos--brands .hax-logos__img, .hax-logos--clients .hax-logos__img{ max-height:60px;max-width:100%;width:auto;height:auto; object-fit:contain;opacity:.92} .hax-logos--partners .hax-logos__item:hover .hax-logos__img, .hax-logos--brands .hax-logos__item:hover .hax-logos__img, .hax-logos--clients .hax-logos__item:hover .hax-logos__img{ opacity:1;transform:none} /* Clients sits on a photo band and carries the taller card, so its cell and its cap are both a step larger than the partners strip. */ .hax-logos--clients .hax-logos__item{height:96px;padding:8px 22px} .hax-logos--clients .hax-logos__img{max-height:68px} /* A link wrapper around a logo must not become the sizing box: it centres the logo and passes the cell's constraints straight through to it. */ .hax-logos--partners .hax-logos__item > a, .hax-logos--brands .hax-logos__item > a, .hax-logos--clients .hax-logos__item > a{ display:flex;align-items:center;justify-content:center; width:100%;max-width:100%;min-width:0;line-height:0} @media (max-width:767.98px){ .hax-logos--partners .hax-logos__item, .hax-logos--brands .hax-logos__item{height:64px;padding:6px 12px} .hax-logos--clients .hax-logos__item{height:70px;padding:6px 14px} .hax-logos--partners .hax-logos__img, .hax-logos--brands .hax-logos__img{max-height:44px} .hax-logos--clients .hax-logos__img{max-height:50px} } /* ========================================================================== BLOG CARDS — live-measured sizing, build 91 -------------------------------------------------------------------------- These values were measured off the live blog page in build 89 and were scoped to that page. The client now reports the homepage band as crowded too, and live uses the same card design in both places, so they belong to the component. One copy, both pages, no drift. Method (full working in BUILD-89.md): the live screenshot's top rows are pure white and the feature photograph starts at row 30, so the card's own top edge is in frame. Absolute pixels cannot be read off a capture of unknown scale, but ratios within one image can — so each value was taken as a proportion of live's 706px feature card and re-expressed against ours at 600px. Type sizes come from the ratio of each string's INKED width to the card width. Colours were sampled from the darkest 4% of each glyph run. Verified by putting our own render through the identical pixel analysis: photo aspect 1.852 vs 1.853, side padding 40 vs 39, photo-to-title 50 vs 50, title ink 424 vs 426, title-to-excerpt 82 vs 82, excerpt-to-link 31 vs 33, link ink 111 vs 114. List cards: height 198 vs 198, thumb 186x146 exact, top-to-title 50 vs 50, title-to-link 85 vs 82, link-to-bottom 26 vs 26. What was crowding the cards: the type was roughly a third too small at every level (title 26 against 35, list title 20 against 24, link 15 against 23), and the gaps between title, excerpt and link were a fraction of live's. ========================================================================== */ /* --- Feature card --- */ /* Live's feature photograph is much taller than the value this component shipped: 706x381 = 1.853, against 580x254 = 2.283. */ .hax-blog__feature .hax-blog__thumb img { aspect-ratio: 706 / 381; } .hax-blog__feature .hax-blog__body { padding: 40px 39px 44px; } .hax-blog__feature .hax-blog__title { font-size: 35px; line-height: 42px; margin: 0 0 70px; } /* `.ha-page p` sets 18px/30px on any page carrying `.ha-page`, and it outranks a single-class selector, so the excerpt needs the extra specificity of its own parent to land on the blog archive as well as the homepage. */ .hax-blog__feature .hax-blog__excerpt, .ha-page .hax-blog__feature .hax-blog__excerpt { font-size: 20px; line-height: 32px; margin: 0 0 22px; } /* --- List cards --- */ /* The thumbnail does NOT stretch to the card's height on live: it is 218x171 inside a card about 232 tall, so white sits below it and the link drops past its bottom edge. This component stretched it, which is what made these cards read short and letterboxed. */ .hax-blog__item { grid-template-columns: 186px minmax(0, 1fr); min-height: 198px; } .hax-blog__item .hax-blog__thumb { align-self: start; height: 146px; min-height: 0; } .hax-blog__item .hax-blog__body { padding: 42px 22px 20px 19px; justify-content: space-between; gap: 10px; } .hax-blog__title--sm { font-size: 24px; line-height: 30px; } /* --- Read More --- Sampled from the glyph cores: #8BC53F, the light brand green, in both the feature and the list cards. This component shipped #4C8C2B, which is why the links read darker than live's. Title #333333 and excerpt #9AA1A9 were already correct. */ .hax-blog__more { color: #8BC53F; font-size: 23px; } .hax-blog__more:hover { color: #4C8C2B; } /* --- Narrow screens --- NOTE: not measured — there is no mobile capture of the live page. These step the measured desktop values down in the proportions this component already used at this breakpoint. */ @media (max-width: 781px) { .hax-blog__feature .hax-blog__body { padding: 22px 20px 24px; } .hax-blog__feature .hax-blog__title { font-size: 24px; line-height: 31px; margin: 0 0 22px; } .hax-blog__feature .hax-blog__excerpt, .ha-page .hax-blog__feature .hax-blog__excerpt { font-size: 16px; line-height: 26px; margin: 0 0 16px; } .hax-blog__more { font-size: 17px; } .hax-blog__item { grid-template-columns: 120px minmax(0, 1fr); min-height: 0; } .hax-blog__item .hax-blog__thumb { align-self: stretch; height: auto; min-height: 110px; } .hax-blog__item .hax-blog__body { padding: 18px 16px; } .hax-blog__title--sm { font-size: 18px; line-height: 25px; } } /* ========================================================================== OUR CLIENTS — larger marks, and the whole cell is the link. Build 91. -------------------------------------------------------------------------- The client marks are wordmarks, so "the client names are too small" is about how much room each logo gets. Build 83 capped them at 68px tall inside a 96px cell with 22px of side padding, and the carousel card itself carried 62px side padding. For a wide wordmark the binding constraint was never the height cap — it was the width left in the cell, about 169px of a 1230px band. Raising the height cap alone would have changed nothing for exactly the logos that read smallest. So the space is widened first and the cap raised second: card side padding 62 -> 40 (band content 1066 -> 1110) cell side padding 22 -> 10 (usable width 169 -> 202, +20%) height cap 68 -> 96 (+41% for tall or square marks) Five logos still sit across one row, as live does — the cells are not re-flowed, only given more of the room that was being spent on padding. ========================================================================== */ .hax-logos--clients .hax-logos__card { padding: 26px 40px; } .hax-logos--clients .hax-logos__item { height: 132px; padding: 8px 10px; } .hax-logos--clients .hax-logos__img { max-height: 96px; } /* Every mark is a link when its URL is set in Brands & Partners -> the logo's "Link URL" field. The anchor fills the whole cell so the click target is the cell rather than just the inked part of the logo, which is the difference between "clickable" and "clickable if you hit it". */ .hax-logos--clients .hax-logos__link, .hax-logos--partners .hax-logos__link, .hax-logos--brands .hax-logos__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; line-height: 0; cursor: pointer; } /* A logo with no link must not pretend to be one. */ .hax-logos__item > .hax-logos__img { cursor: default; } .hax-logos--clients .hax-logos__link:focus-visible { outline: 2px solid #8BC53F; outline-offset: 4px; border-radius: 4px; } @media (max-width: 767.98px) { .hax-logos--clients .hax-logos__item { height: 92px; padding: 6px 10px; } .hax-logos--clients .hax-logos__img { max-height: 66px; } .hax-logos--clients .hax-logos__card { padding: 18px 34px; } } /* ========================================================================== OUR CLIENTS — bigger marks, SAME white card. Build 93. -------------------------------------------------------------------------- Build 92 got this wrong. It raised the cell height 132 -> 148, and since the white card's height is just its own padding plus the cell, the card grew with it. The brief was the logo, not the box. The card's height is rebuilt from the parts that make it: card padding-top 26 + viewport padding 4 + cell height + viewport padding 4 + card padding-bottom 26 Build 83 shipped a 96px cell, so the card stood 156px tall. Builds 91 and 92 pushed the cell to 132 then 148, taking the card to 192 then 208. The cell is back to 96 and the card is back to 156 — the height it has always been. The size now comes from inside the cell instead. The cell was spending 8px of its 96 on vertical padding and capping the logo at 68, so 20px of it was never usable by anything. Padding drops to 2px and the cap rises to 92: cell height 96 unchanged -> card height 156, unchanged cell padding 8px -> 0 logo height cap 68px -> 96px (fills the cell exactly) MEASURED ON THE LIVE SITE, build 94: this is now at its ceiling. Each logo file is a 1280x1061 canvas with the artwork floating in the middle, and the artwork occupies only part of it — 29% of the height for arcenciel, 42% for World Vision, 51% for RMF, 68% for Fair Trade, 87% for AVSI. CSS scales the canvas, not the artwork, so most of what the cap controls is empty space. The cap now equals the cell height; there is nothing left to give without making the white card taller. See BUILD-94.md for the trim that fixes it. Horizontal room is left as build 91 set it (card 40px, cell 10px), because that is what makes the wide wordmarks bigger and it changes no height at all — the card is full-bleed either way. ========================================================================== */ .hax-logos--clients .hax-logos__card { padding: 26px 40px; } .hax-logos--clients .hax-logos__item { height: 96px; padding: 0 10px; } .hax-logos--clients .hax-logos__img { max-height: 96px; } @media (max-width: 767.98px) { .hax-logos--clients .hax-logos__card { padding: 18px 34px; } .hax-logos--clients .hax-logos__item { height: 70px; padding: 2px 10px; } .hax-logos--clients .hax-logos__img { max-height: 66px; } } /* ========================================================================== LOGO CARDS — the 39px that was never meant to be there. Build 95. -------------------------------------------------------------------------- Measured in the live page. The Our Clients card stands 195px tall, but its parts only account for 156: card padding 26 + 26 + viewport 104 (4 + track 96 + 4) = 156 The missing 39px is two EMPTY `

` elements, one either side of the carousel, each carrying `margin: 19.34px 0`. They have no height and no content — they are what `wpautop` leaves behind when it runs over the newlines around a shortcode. Both match `:empty`, so they can be removed precisely without touching anything that holds content. This is why the card looked tall no matter what the logo did, and why my last three attempts to fix it by resizing the cell were chasing the wrong number. Nothing about the intended layout changes here — 39px of accidental whitespace comes out of it: Our Clients card 195 -> 156 cell 96 unchanged, cap 96 unchanged Our Partners card 185 -> 146 cell 86 unchanged, cap 60 unchanged The logo is not resized. It simply stops sharing the card with a gap that nothing put there on purpose, so it occupies 62% of the card's height instead of 49%. ========================================================================== */ .hax-logos__card > p:empty { display: none; } /* Build 96: `:empty` caught only one of the two. The second paragraph is not empty — `wpautop` wrapped the carousel's NEXT ARROW inside it, so it holds a