From 74f57a25951d5073124333d263f3b3b2615326d2 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Fri, 24 Jul 2026 16:32:07 +0200 Subject: [PATCH] Align homepage and header to the live design Address side-by-side review feedback against continentaltire.com. - fonts: headings are Stag Sans light (weight 300) to match live, not bold. - header: nav items vertically centered in the bar (an intermediate wrapper had no height, so they sat at the top). - category tiles: no borders, fill three across full width, larger tire image. - perfect-fit bar: new black bar under the hero with By Vehicle, By Tire Size, By Plate. - Confidence on the Road: rebuilt centered on the dark band with a shield badge, six icon-over-label coverage items, and a centered Learn More button. - footer: CTA pills stacked as a left column next to the link groups, and icons added to the Search for Tire links. New block: perfect-fit. New icons for the coverage and search items. Icons are simple placeholders; real Continental artwork can replace them. Verified side by side against the live homepage at desktop. --- blocks/cards/cards.css | 52 ++++++++++++++++++++---- blocks/footer/footer.css | 13 +++++- blocks/header/header.css | 6 +++ blocks/perfect-fit/perfect-fit.css | 63 ++++++++++++++++++++++++++++++ blocks/perfect-fit/perfect-fit.js | 24 ++++++++++++ icons/license-plate.svg | 6 +++ icons/limited-warranty.svg | 6 +++ icons/mileage-warranty.svg | 8 ++++ icons/road-hazard.svg | 5 +++ icons/roadside-assistance.svg | 5 +++ icons/satisfaction-trial.svg | 6 +++ icons/tcp-badge.svg | 6 +++ icons/tire-size.svg | 9 +++++ icons/trip-interruption.svg | 5 +++ icons/vehicle.svg | 6 +++ styles/styles.css | 6 +-- 16 files changed, 215 insertions(+), 11 deletions(-) create mode 100644 blocks/perfect-fit/perfect-fit.css create mode 100644 blocks/perfect-fit/perfect-fit.js create mode 100644 icons/license-plate.svg create mode 100644 icons/limited-warranty.svg create mode 100644 icons/mileage-warranty.svg create mode 100644 icons/road-hazard.svg create mode 100644 icons/roadside-assistance.svg create mode 100644 icons/satisfaction-trial.svg create mode 100644 icons/tcp-badge.svg create mode 100644 icons/tire-size.svg create mode 100644 icons/trip-interruption.svg create mode 100644 icons/vehicle.svg diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 096e302..472644a 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -158,15 +158,21 @@ main .section.cards-container { /* ---- category: tire/product category tiles ---- */ .cards.category > ul { - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 16px; + grid-template-columns: 1fr; + gap: 0; +} + +@media (width >= 900px) { + .cards.category > ul { + grid-template-columns: repeat(3, 1fr); + } } .cards.category > ul > li { - border: 1px solid var(--conti-grey); + border: 0; border-radius: 0; box-shadow: none; - min-height: 176px; + min-height: 200px; transition: background-color 0.3s ease, color 0.3s ease; } @@ -174,8 +180,8 @@ main .section.cards-container { position: absolute; z-index: 0; inset-block-end: 0; - inset-inline-end: -8px; - width: 130px; + inset-inline-end: 0; + width: 210px; } .cards.category > ul > li img { @@ -218,7 +224,7 @@ main .section.cards-container { } } -/* ---- coverage: plain icon-less items on a dark band (warranty coverage row) ---- */ +/* ---- coverage: icon-over-label items on a dark band (warranty coverage row) ---- */ .cards.coverage > ul { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; @@ -232,6 +238,10 @@ main .section.cards-container { } .cards.coverage .cards-card-body { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; margin: 0; color: inherit; font-family: var(--heading-font-family); @@ -241,6 +251,15 @@ main .section.cards-container { text-transform: uppercase; } +.cards.coverage .cards-card-body p { + margin: 0; +} + +.cards.coverage .cards-card-body .icon { + width: 40px; + height: 40px; +} + .cards.category > ul > li:hover, .cards.category > ul > li:focus-within { background-color: var(--conti-dark-black); @@ -257,6 +276,10 @@ main .section.cards-container { transform: translateY(-6px); } +.cards.coverage .cards-card-body .icon img { + filter: invert(1); +} + /* ---- news inside a dark/black band: plain text teasers, no card chrome ---- */ main .section.dark .cards.news > ul > li, main .section.black .cards.news > ul > li { @@ -291,3 +314,18 @@ main .section.black .cards.news .cards-card-body a:hover { padding-inline-start: 24px; } } + +/* the confidence band wraps a badge image, heading, copy, the coverage + cards and a Learn More button - all centered, matching the live page */ +main .section.dark.cards-container { + text-align: center; +} + +main .section.dark.cards-container .default-content-wrapper .icon { + width: 100px; + height: 120px; +} + +main .section.dark.cards-container .cards-wrapper { + margin-top: 32px; +} diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 27cbd81..efa3153 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -52,6 +52,9 @@ footer .footer-links-group ul { } footer .footer-links-group a { + display: flex; + align-items: center; + gap: 8px; color: var(--conti-black); font-size: 14px; font-weight: bold; @@ -59,6 +62,12 @@ footer .footer-links-group a { letter-spacing: 0.5px; } +footer .footer-links-group a .icon { + width: 16px; + height: 16px; + flex-shrink: 0; +} + /* social icon row: dark bar, icons only, text kept for screen readers */ footer .footer-links-group.footer-social { order: 99; @@ -152,7 +161,9 @@ footer .footer-bottom a:focus-visible { } footer .footer-cta { - flex: 1 1 100%; + flex: 0 1 160px; + flex-direction: column; + align-items: flex-start; } footer .footer-links-group.footer-social { diff --git a/blocks/header/header.css b/blocks/header/header.css index 221ab96..5351a42 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -434,9 +434,15 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul > li > a { align-self: unset; } + header nav .nav-sections .default-content-wrapper { + height: 100%; + } + header nav .nav-sections .default-content-wrapper > ul { display: flex; + align-items: center; height: 100%; + margin: 0; } header nav .nav-sections .default-content-wrapper > ul > li { diff --git a/blocks/perfect-fit/perfect-fit.css b/blocks/perfect-fit/perfect-fit.css new file mode 100644 index 0000000..173aa13 --- /dev/null +++ b/blocks/perfect-fit/perfect-fit.css @@ -0,0 +1,63 @@ +/* slim black bar under the hero: "Find your perfect fit:" plus three + icon+label shortcuts, matching the live continentaltire.com homepage */ +main .section.perfect-fit-container { + padding: 0; +} + +.perfect-fit { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 16px 24px; + text-align: center; +} + +.perfect-fit-label { + margin: 0; + font-family: var(--heading-font-family); + font-size: var(--body-font-size-xs); + font-weight: 700; + letter-spacing: 1.25px; + text-transform: uppercase; +} + +.perfect-fit-items { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px 32px; + list-style: none; + margin: 0; + padding: 0; +} + +.perfect-fit-items p { + display: flex; + align-items: center; + gap: 8px; + margin: 0; + font-family: var(--heading-font-family); + font-size: var(--body-font-size-xs); + font-weight: 700; + letter-spacing: 1.25px; + text-transform: uppercase; +} + +.perfect-fit-items .icon { + width: 20px; + height: 20px; +} + +.perfect-fit-items .icon img { + filter: invert(1); +} + +@media (width >= 700px) { + .perfect-fit { + flex-direction: row; + justify-content: center; + gap: 24px; + padding: 14px 32px; + } +} diff --git a/blocks/perfect-fit/perfect-fit.js b/blocks/perfect-fit/perfect-fit.js new file mode 100644 index 0000000..13d8382 --- /dev/null +++ b/blocks/perfect-fit/perfect-fit.js @@ -0,0 +1,24 @@ +/** + * "Find your perfect fit:" bar: a label followed by a row of icon+label + * shortcut links. The first authored row is the label, the second row's + * cells are the items. + * @param {Element} block the perfect-fit block + */ +export default function decorate(block) { + const [labelRow, itemsRow] = [...block.children]; + + const label = labelRow ? labelRow.querySelector('p') : null; + if (label) label.className = 'perfect-fit-label'; + + const list = document.createElement('ul'); + list.className = 'perfect-fit-items'; + const cells = itemsRow ? [...itemsRow.children] : []; + cells.forEach((cell) => { + const li = document.createElement('li'); + while (cell.firstElementChild) li.append(cell.firstElementChild); + list.append(li); + }); + + const children = label ? [label, list] : [list]; + block.replaceChildren(...children); +} diff --git a/icons/license-plate.svg b/icons/license-plate.svg new file mode 100644 index 0000000..15173a6 --- /dev/null +++ b/icons/license-plate.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/icons/limited-warranty.svg b/icons/limited-warranty.svg new file mode 100644 index 0000000..7acb0e8 --- /dev/null +++ b/icons/limited-warranty.svg @@ -0,0 +1,6 @@ + + + + diff --git a/icons/mileage-warranty.svg b/icons/mileage-warranty.svg new file mode 100644 index 0000000..40fdbf6 --- /dev/null +++ b/icons/mileage-warranty.svg @@ -0,0 +1,8 @@ + + + + diff --git a/icons/road-hazard.svg b/icons/road-hazard.svg new file mode 100644 index 0000000..6014dca --- /dev/null +++ b/icons/road-hazard.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/roadside-assistance.svg b/icons/roadside-assistance.svg new file mode 100644 index 0000000..95b67c8 --- /dev/null +++ b/icons/roadside-assistance.svg @@ -0,0 +1,5 @@ + + + diff --git a/icons/satisfaction-trial.svg b/icons/satisfaction-trial.svg new file mode 100644 index 0000000..972aab9 --- /dev/null +++ b/icons/satisfaction-trial.svg @@ -0,0 +1,6 @@ + + + + diff --git a/icons/tcp-badge.svg b/icons/tcp-badge.svg new file mode 100644 index 0000000..2f6f7d7 --- /dev/null +++ b/icons/tcp-badge.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/tire-size.svg b/icons/tire-size.svg new file mode 100644 index 0000000..9adcfe0 --- /dev/null +++ b/icons/tire-size.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/icons/trip-interruption.svg b/icons/trip-interruption.svg new file mode 100644 index 0000000..e99e332 --- /dev/null +++ b/icons/trip-interruption.svg @@ -0,0 +1,5 @@ + + + + diff --git a/icons/vehicle.svg b/icons/vehicle.svg new file mode 100644 index 0000000..a3891bf --- /dev/null +++ b/icons/vehicle.svg @@ -0,0 +1,6 @@ + + + diff --git a/styles/styles.css b/styles/styles.css index 5acd6bc..65638a0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -111,9 +111,9 @@ h5, h6 { margin-top: 0.8em; margin-bottom: 0.25em; - font-family: var(--heading-font-family); - font-weight: 600; - line-height: 1.25; + font-family: var(--body-font-family); + font-weight: 300; + line-height: 1.2; scroll-margin: 40px; }