From 88f1898af6f4c27b6f184a0e009f751115f31646 Mon Sep 17 00:00:00 2001 From: Lamont Crook Date: Wed, 8 Jul 2026 10:00:37 -0600 Subject: [PATCH 1/3] Style find-your-cruise columns block as HAL promo banner Add a find-your-cruise section variant that renders the columns block on /en/us as the "Around the World" promotional banner from hollandamerica.com/en/us: full-bleed navy section with a centered serif heading, image-left / light-panel-right banner, navy copy, and an orange pill CTA. Responsive (stacks on mobile) and scoped to the section so other columns blocks are unaffected. Co-Authored-By: Claude Opus 4.8 --- blocks/columns/columns.css | 90 ++++++++++++++++++++++++++++++++++++++ styles/styles.css | 26 +++++++++++ 2 files changed, 116 insertions(+) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index f2b203e..0cdeae0 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -31,3 +31,93 @@ order: unset; } } + +/* + * find-your-cruise variant: renders the columns block as a horizontal promo + * banner — image on one side, a light content panel with a pill CTA on the + * other — matching the "Around the World" banner on hollandamerica.com/en/us. + */ +.find-your-cruise .columns > div { + gap: 0; + overflow: hidden; + background-color: #eaeef4; +} + +.find-your-cruise .columns .columns-img-col { + position: relative; +} + +.find-your-cruise .columns .columns-img-col::after { + content: ""; + position: absolute; + inset: 0; + background-color: rgb(2 38 88 / 15%); + pointer-events: none; +} + +.find-your-cruise .columns .columns-img-col img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +/* text/content column (the one that is not the image) */ +.find-your-cruise .columns > div > div:not(.columns-img-col) { + display: flex; + flex-direction: column; + gap: 12px; + padding: 24px; + color: var(--brand-navy); +} + +.find-your-cruise .columns > div > div:not(.columns-img-col) h3 { + margin: 0; + color: var(--brand-navy); + font-size: var(--heading-font-size-m); + font-weight: 700; +} + +.find-your-cruise .columns > div > div:not(.columns-img-col) p { + margin: 0; + color: var(--brand-navy); + font-size: var(--body-font-size-s); + line-height: 1.5; +} + +/* CTA styled as an accent pill even without authored button formatting */ +.find-your-cruise .columns > div > div:not(.columns-img-col) a:not(.button) { + display: inline-flex; + align-items: center; + justify-content: center; + width: fit-content; + margin-top: 4px; + border-radius: 2.4em; + padding: 0.6em 1.4em; + background-color: var(--cta-color); + color: #fff; + font-weight: 700; + text-decoration: none; +} + +.find-your-cruise .columns > div > div:not(.columns-img-col) a:not(.button):hover, +.find-your-cruise .columns > div > div:not(.columns-img-col) a:not(.button):focus-visible { + background-color: var(--cta-hover-color); +} + +@media (width >= 900px) { + .find-your-cruise .columns > div { + align-items: stretch; + min-height: 220px; + } + + .find-your-cruise .columns .columns-img-col { + flex: 3; + } + + .find-your-cruise .columns > div > div:not(.columns-img-col) { + flex: 2; + justify-content: center; + padding: 32px 40px; + } +} diff --git a/styles/styles.css b/styles/styles.css index be27e45..c5fb968 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -377,3 +377,29 @@ main .section.dark a:not(.button) { color: #fff; text-decoration: underline; } + +/* find-your-cruise: navy promo section with a banner-style columns block */ +main .section.find-your-cruise { + background-color: var(--brand-navy); + color: #fff; + margin: 0; + padding: 40px 0; +} + +main .section.find-your-cruise .default-content-wrapper h2 { + margin: 0 0 24px; + color: #fff; + font-family: var(--display-font-family); + font-weight: 400; + text-align: center; +} + +@media (width >= 900px) { + main .section.find-your-cruise { + padding: 56px 0; + } + + main .section.find-your-cruise .default-content-wrapper h2 { + margin-bottom: 32px; + } +} From ec1ffb1d748e29228d889d61e6c403c806862a20 Mon Sep 17 00:00:00 2001 From: Lamont Crook Date: Wed, 8 Jul 2026 10:19:56 -0600 Subject: [PATCH 2/3] Exclude aem-edge-functions from root eslint aem-edge-functions is a self-contained Fastly Compute subproject with its own package.json, lockfile, and test runner. The root airbnb-base/browser eslint config is inappropriate for its server-side ESM code (fastly:* imports, addEventListener, mocha globals), which broke `npm run lint` and the build check for the whole repo. Ignore it here, mirroring the existing helix-importer-ui exclusion; it can be linted by its own toolchain. Co-Authored-By: Claude Opus 4.8 --- .eslintignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintignore b/.eslintignore index 894e662..d171ad6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ helix-importer-ui -*.min.js \ No newline at end of file +*.min.js +aem-edge-functions \ No newline at end of file From 60b417b37563606438524237451d76e5508623f9 Mon Sep 17 00:00:00 2001 From: Lamont Crook Date: Wed, 8 Jul 2026 10:22:15 -0600 Subject: [PATCH 3/3] Fix mobile CLS in find-your-cruise banner image Applied object-fit:cover with height:100% unconditionally, but on mobile the column has no definite height so the image couldn't reserve its aspect ratio, causing layout shift (PSI mobile CLS 0.238). Keep the natural aspect ratio on mobile and only fill/crop at >=900px, where the row has a fixed min-height. Co-Authored-By: Claude Opus 4.8 --- blocks/columns/columns.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 0cdeae0..c5c9c10 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -55,11 +55,11 @@ pointer-events: none; } +/* mobile: keep the image's natural aspect ratio to avoid layout shift */ .find-your-cruise .columns .columns-img-col img { display: block; width: 100%; - height: 100%; - object-fit: cover; + height: auto; } /* text/content column (the one that is not the image) */ @@ -115,6 +115,12 @@ flex: 3; } + /* desktop: the row has a definite height, so fill it and crop */ + .find-your-cruise .columns .columns-img-col img { + height: 100%; + object-fit: cover; + } + .find-your-cruise .columns > div > div:not(.columns-img-col) { flex: 2; justify-content: center;