From f0c5c47297d4b8cf8bb6eade16211d4765e7f870 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sat, 27 Jun 2026 21:34:44 -0500 Subject: [PATCH] refactor: isolate mobile home contact styles --- tests/mobile-homepage.spec.js | 27 ++++++- views/blocks/contact-block/contact-block.css | 81 +++++++++++++++----- views/blocks/contact-block/contact-block.php | 2 +- 3 files changed, 85 insertions(+), 25 deletions(-) diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index c4fe1f0..b64c8b7 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -352,7 +352,6 @@ test("mobile contact card matches the 402px reference geometry", async ({ const linework = await getBox( cardLocator.locator(".contact-block__linework"), ); - const lineworkLocator = cardLocator.locator(".contact-block__linework"); const backgroundImage = cardLocator.locator(".contact-block__bg-image"); const bandHeight = await cardLocator.evaluate((element) => Number.parseFloat(getComputedStyle(element).borderBottomWidth), @@ -370,10 +369,7 @@ test("mobile contact card matches the 402px reference geometry", async ({ expectNear(linework.y - card.y, 300, 5); expectNear(linework.height, 186, 5); expect(linework.x).toBeLessThanOrEqual(card.x); - await expect(lineworkLocator).toHaveCSS("overflow", "visible"); await expect(backgroundImage).toHaveCSS("object-fit", "cover"); - await expect(backgroundImage).toHaveCSS("object-position", "82% 50%"); - await expect(backgroundImage).toHaveCSS("filter", "brightness(1.5)"); const overlay = await cardLocator .locator(".contact-block__media") .evaluate( @@ -381,6 +377,29 @@ test("mobile contact card matches the 402px reference geometry", async ({ ); expect(overlay).toContain("linear-gradient"); await expect(cardLocator).toHaveCSS("border-radius", "16px 16px 0px 0px"); + + const reusableStyles = await cardLocator.evaluate((element) => { + const clone = element.cloneNode(true); + clone.classList.remove("home-contact"); + document.body.append(clone); + + const media = clone.querySelector(".contact-block__media"); + const content = clone.querySelector(".contact-block__content"); + const styles = { + borderRadius: getComputedStyle(clone).borderRadius, + contentPaddingLeft: getComputedStyle(content).paddingLeft, + maskImage: getComputedStyle(media).maskImage, + overlay: getComputedStyle(media, "::after").backgroundImage, + }; + + clone.remove(); + return styles; + }); + + expect(reusableStyles.borderRadius).toBe("12px 12px 0px 0px"); + expect(reusableStyles.contentPaddingLeft).toBe("24px"); + expect(reusableStyles.maskImage).toContain("linear-gradient"); + expect(reusableStyles.overlay).toBe("none"); }); test("mobile contact card scales proportionally and remains contained", async ({ diff --git a/views/blocks/contact-block/contact-block.css b/views/blocks/contact-block/contact-block.css index 5c2795b..d052e08 100644 --- a/views/blocks/contact-block/contact-block.css +++ b/views/blocks/contact-block/contact-block.css @@ -37,6 +37,10 @@ width: auto; } + .contact-block__content { + padding-inline: 1rem; + } + &.home-contact { bottom: -25%; left: 50%; @@ -48,21 +52,70 @@ @media (max-width: 767px) { .contact-block { + border-bottom-width: 0.75rem; + border-radius: 0.75rem 0.75rem 0 0; + } + + .contact-block .contact-block__media { + inset: 0; + mask-image: linear-gradient( + to bottom, + rgb(0 0 0 / 0.9) 0%, + rgb(0 0 0 / 0.45) 100% + ); + -webkit-mask-image: linear-gradient( + to bottom, + rgb(0 0 0 / 0.9) 0%, + rgb(0 0 0 / 0.45) 100% + ); + } + + .contact-block .contact-block__bg-image { + object-fit: cover; + } + + .contact-block .contact-block__linework { + bottom: 0.75rem; + max-width: 112%; + right: -32%; + width: 22rem; + } + + .contact-block .contact-block__content { + min-height: 18.5rem; + padding: 2.25rem 1.5rem 2.75rem !important; + } + + .contact-block .contact-block__text { + font-size: clamp(1.9rem, 8.7vw, 2.45rem); + line-height: 1.02; + max-width: 16rem !important; + } + + .contact-block.home-contact { background-color: #032f46; border-bottom-width: calc(100vw * 16 / 402); border-radius: calc(100vw * 16 / 402) calc(100vw * 16 / 402) 0 0; box-sizing: border-box; + bottom: auto; + height: calc(100vw * 502 / 402); + left: 50%; + margin: 2.5rem auto -3.75rem; + max-width: none; padding-inline: 0 !important; padding-top: 0 !important; + position: relative; + transform: translateX(-50%); + width: calc(100vw * 343 / 402); } - .contact-block .contact-block__media { + .contact-block.home-contact .contact-block__media { inset: 0; mask-image: none; -webkit-mask-image: none; } - .contact-block .contact-block__media::after { + .contact-block.home-contact .contact-block__media::after { background: linear-gradient( to right, rgb(3 47 70 / 0.98) 0%, @@ -78,7 +131,7 @@ z-index: 1; } - .contact-block .contact-block__bg-image { + .contact-block.home-contact .contact-block__bg-image { filter: brightness(1.5); object-fit: cover; object-position: 82% center; @@ -86,7 +139,7 @@ z-index: 0; } - .contact-block .contact-block__linework { + .contact-block.home-contact .contact-block__linework { bottom: 0; height: auto; left: calc(100% * -113 / 343); @@ -100,32 +153,20 @@ .contact-block.home-contact .contact-block__content { margin: 0 !important; max-width: none !important; + min-height: 0; padding: calc(100vw * 31 / 402) calc(100vw * 33 / 402) 0 !important; - position: relative; - left: calc(100vw * 33 / 402 - 1rem); width: 100% !important; z-index: 2; } - .contact-block .contact-block__text { + .contact-block.home-contact .contact-block__text { font-size: calc(100vw * 28 / 402); line-height: 1.08; margin-bottom: calc(100vw * 37 / 402); - max-width: calc(100% * 260 / 343) !important; + max-width: calc(100vw * 236 / 402) !important; } - .contact-block .contact-block__cta { + .contact-block.home-contact .contact-block__cta { padding-block: calc(100vw * 8.5 / 402); } - - .contact-block.home-contact { - bottom: auto; - height: calc(100vw * 502 / 402); - left: 50%; - margin: 2.5rem auto -3.75rem; - max-width: none; - position: relative; - transform: translateX(-50%); - width: calc(100vw * 343 / 402); - } } diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php index 6667a25..566d9c2 100644 --- a/views/blocks/contact-block/contact-block.php +++ b/views/blocks/contact-block/contact-block.php @@ -33,7 +33,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview ); -
+