diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index a7eb435..71bc1b3 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -451,6 +451,91 @@ test("mobile contact card render remains stable", async ({ page }) => { ); }); +test("mobile Our Work contains both reference images", async ({ page }) => { + await page.goto(homepage); + + const block = await getBox(page.locator(".our-work")); + const left = await getBox(page.locator(".our-work__media--left")); + const bottom = await getBox(page.locator(".our-work__media--bottom")); + const vector = await getBox(page.locator(".our-work__vector img")); + + expectNear(block.height, 888, 12); + expectNear(left.width, 189, 5); + expect(bottom.width).toBeGreaterThanOrEqual(335); + expect(bottom.x).toBeGreaterThanOrEqual(60); + expect(bottom.x + bottom.width).toBeLessThanOrEqual(402); + expectNear(vector.width, 474, 4); + expectNear(vector.y - block.y, 160, 3); +}); + +test("mobile Our Work follows the reference content and overlap order", async ({ + page, +}) => { + await page.goto(homepage); + + const block = await getBox(page.locator(".our-work")); + const content = await getBox(page.locator(".our-work__content")); + const left = await getBox(page.locator(".our-work__media--left")); + const bottom = await getBox(page.locator(".our-work__media--bottom")); + const paragraph = page.locator(".our-work__content p"); + const paragraphBox = await getBox(paragraph); + const buttons = page.locator(".our-work .button"); + const primary = await getBox(buttons.nth(0)); + const secondary = await getBox(buttons.nth(1)); + + expectNear(content.x - block.x, 32, 3); + expectNear(content.y - block.y, 68, 8); + expectNear(paragraphBox.y - block.y, 146, 4); + expect(content.y).toBeLessThan(left.y); + expectNear(left.y - block.y, 428, 12); + expectNear(bottom.y - block.y, 595, 12); + expectNear(primary.y, secondary.y, 2); + expectNear(primary.y - block.y, 321, 4); + expectNear(primary.height, 44, 2); + expectNear(secondary.height, 44, 2); + await expect(paragraph).toHaveCSS("text-wrap", "wrap"); +}); + +test("mobile Our Work remains contained at responsive endpoints", async ({ + page, +}) => { + for (const width of [320, 767]) { + await page.setViewportSize({ width, height: 900 }); + await page.goto(homepage); + + const block = await getBox(page.locator(".our-work")); + const left = await getBox(page.locator(".our-work__media--left")); + const bottom = await getBox(page.locator(".our-work__media--bottom")); + const buttons = page.locator(".our-work .button"); + const primary = await getBox(buttons.nth(0)); + const secondary = await getBox(buttons.nth(1)); + + for (const item of [left, bottom, primary, secondary]) { + expect(item.x).toBeGreaterThanOrEqual(block.x); + expect(item.x + item.width).toBeLessThanOrEqual( + block.x + block.width, + ); + } + + expectNear(primary.y, secondary.y, 2); + expect(left.y).toBeLessThan(bottom.y); + } +}); + +test("Our Work restores its tablet layout at 768px", async ({ page }) => { + await page.setViewportSize({ width: 768, height: 900 }); + await page.goto(homepage); + + const block = page.locator(".our-work"); + const inner = block.locator(".our-work__inner"); + const vector = block.locator(".our-work__vector img"); + + await expect(block).toHaveCSS("min-height", "0px"); + await expect(block).toHaveCSS("padding-top", "64px"); + await expect(inner).toHaveCSS("padding-left", "38.4px"); + await expect(vector).toHaveCSS("width", "768px"); +}); + test("mobile recent posts exposes previous and next controls", async ({ page, }) => { diff --git a/views/blocks/our-work/our-work.css b/views/blocks/our-work/our-work.css index 98b2781..81a80a2 100644 --- a/views/blocks/our-work/our-work.css +++ b/views/blocks/our-work/our-work.css @@ -1,13 +1,12 @@ /* Our Work block styles */ .our-work { - background: - linear-gradient( - 90deg, - var(--color-cwc-blue-01) 0%, - var(--color-cwc-blue-02) 52%, - var(--color-cwc-blue-02) 100% - ); + background: linear-gradient( + 90deg, + var(--color-cwc-blue-01) 0%, + var(--color-cwc-blue-02) 52%, + var(--color-cwc-blue-02) 100% + ); border-bottom: 16px solid var(--color-secondary); color: var(--color-white); /* margin-bottom: clamp(4rem, 7vw, 5.5rem); */ @@ -56,7 +55,7 @@ .our-work__content { grid-area: content; - margin-lefT: 4rem; + margin-left: 4rem; max-width: 46.75rem; } @@ -190,23 +189,35 @@ } } -@media (max-width: 640px) { +@media (max-width: 767px) { .our-work { margin-bottom: 2rem; - padding-top: 3.25rem; + min-height: clamp(44rem, 220.9vw, 55.5rem); + padding-top: 4.25rem; + } + + .our-work__vector img { + height: 118%; + max-width: none; + object-fit: cover; + object-position: 85% center; + transform: translateY(clamp(8rem, 39.8vw, 10rem)); + width: 118%; } .our-work__inner { - gap: 1.4rem; + gap: 0; + padding-inline: 2rem !important; } .our-work__content { - max-width: 20rem; + margin-inline: 0; + max-width: 21rem; text-align: left; } .our-work__content .acf-innerblocks-container { - gap: 1rem; + gap: 2.125rem; } .our-work__content h1, @@ -215,43 +226,59 @@ .our-work__content h4, .our-work__content h5, .our-work__content h6 { - font-size: clamp(2rem, 9vw, 2.45rem); + font-size: clamp(2.5rem, 11vw, 2.75rem); } .our-work__content p { - font-size: var(--text-14px); - line-height: 1.35; + font-size: var(--text-16px); + line-height: 1.45; + text-wrap: wrap; } .our-work__content .wp-block-acf-buttons > div { - gap: 0.75rem; + flex-wrap: nowrap; + gap: 2rem; justify-content: flex-start; } + .our-work__content x-button { + flex: 1 1 0; + min-width: 0; + } + .our-work__content .button { - font-size: var(--text-14px); - min-height: 2.25rem; - min-width: 6.35rem; - padding: 0.5rem 0.8rem; + font-size: var(--text-18px); + min-height: 2.75rem; + min-width: 0; + padding: 0.65rem 1rem; + white-space: nowrap; + width: 100%; } .our-work__media--left { justify-self: start; - margin: 0 0 -3.25rem; - max-width: 9.5rem; + margin: 4rem 0 0; + max-width: 11.8125rem; position: relative; + width: 55.9%; z-index: 2; } .our-work__media--bottom { justify-self: end; - margin-bottom: -2.35rem; - max-width: 20.5rem; - width: calc(100% - 2.25rem); + margin: -3.5rem 0 0; + max-width: none; + position: relative; + transform: translateX(2rem); + width: 100%; + z-index: 1; } .our-work:not(.has-left-image) .our-work__media--bottom { - justify-self: center; width: 100%; } + + .our-work__image { + object-fit: contain; + } }