refactor: isolate mobile home contact styles

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 ({

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);
-    }
 }

views/blocks/contact-block/contact-block.php

@@ -33,7 +33,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
         <?php get_template_part( '/views/blocks/contact-block/linework' ); ?>
 	</div>
 
-	<div class="contact-block__content container px-4! pt-12 pb-16 relative z-10">
+	<div class="contact-block__content container pt-12 pb-16 relative z-10">
 		<?php if ( $text ) : ?>
 			<h2 class="contact-block__text font-quincy font-normal leading-none text-white max-w-4/5 mb-8">
 				<?php echo wp_kses_post( $text ); ?>