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 diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index f2b203e..c5c9c10 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -31,3 +31,99 @@ 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; +} + +/* 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: auto; +} + +/* 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; + } + + /* 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; + 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; + } +}