From daa665f44689d4f68c8d15c2b6c7212e2a0dd0e2 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Fri, 24 Jul 2026 17:07:05 +0200 Subject: [PATCH] Use real Continental assets, not redrawn placeholders Replace the placeholder icons and badge with the real Continental artwork, extracted from the site's own SVG symbol sprite, and restore real content that was wrongly stripped. - icons: extract the real tcp-logo badge, vehicle/tire/license perfect-fit icons, pin and phone, and the social icons from the nextcontinental sprite, so authored :icon: tokens render the real artwork. The badge is 20KB, under the pipeline SVG cap, so no rehost or rasterize step is needed. - Confidence on the Road: real Total Confidence Plan badge at hero size. Drop the six invented coverage icons, since the live homepage band is text-only. - store-locator: show the real example store the live page renders (distance, name, address, Directions, phone) with real pin and phone icons, instead of a bare shell. It is illustrative static content, no live geolocation. Verified against the live homepage. --- blocks/store-locator/store-locator.css | 77 ++++++++++++++++++++------ blocks/store-locator/store-locator.js | 46 +++++++-------- icons/chat.svg | 5 +- icons/facebook.svg | 4 +- icons/help-outline.svg | 7 +-- icons/instagram.svg | 1 + icons/license-plate.svg | 7 +-- icons/limited-warranty.svg | 6 -- icons/mileage-warranty.svg | 8 --- icons/phone.svg | 1 + icons/pin.svg | 1 + icons/road-hazard.svg | 5 -- icons/roadside-assistance.svg | 5 -- icons/satisfaction-trial.svg | 6 -- icons/search.svg | 7 +-- icons/tcp-badge.svg | 7 +-- icons/tire-size.svg | 10 +--- icons/trip-interruption.svg | 5 -- icons/vehicle.svg | 7 +-- icons/x.svg | 4 +- icons/youtube.svg | 1 + styles/styles.css | 6 ++ 22 files changed, 102 insertions(+), 124 deletions(-) create mode 100644 icons/instagram.svg delete mode 100644 icons/limited-warranty.svg delete mode 100644 icons/mileage-warranty.svg create mode 100644 icons/phone.svg create mode 100644 icons/pin.svg delete mode 100644 icons/road-hazard.svg delete mode 100644 icons/roadside-assistance.svg delete mode 100644 icons/satisfaction-trial.svg delete mode 100644 icons/trip-interruption.svg create mode 100644 icons/youtube.svg diff --git a/blocks/store-locator/store-locator.css b/blocks/store-locator/store-locator.css index 31bf26b..9af3587 100644 --- a/blocks/store-locator/store-locator.css +++ b/blocks/store-locator/store-locator.css @@ -1,7 +1,8 @@ .store-locator { - display: flex; - flex-direction: column; - gap: 24px; + display: grid; + grid-template-columns: 1fr; + gap: 24px 48px; + align-items: start; } .store-locator-search h1, @@ -10,7 +11,7 @@ .store-locator-search h4, .store-locator-search h5, .store-locator-search h6 { - margin: 0 0 16px; + margin: 0 0 24px; color: inherit; } @@ -22,31 +23,70 @@ .store-locator-field input { box-sizing: border-box; width: 100%; - border: 1px solid var(--conti-darkest-grey); - border-radius: 4px; + border: 0; + border-bottom: 1px solid var(--conti-white); + border-radius: 0; background-color: transparent; - padding: 12px 16px; + padding: 8px 24px 8px 0; color: var(--conti-white); font-family: var(--body-font-family); font-size: var(--body-font-size-s); } .store-locator-field input::placeholder { - color: var(--conti-dark-grey); + color: var(--conti-white); + text-transform: uppercase; + letter-spacing: 0.05em; } .store-locator-field input:disabled { - cursor: not-allowed; - opacity: 0.7; + cursor: default; +} + +.store-locator-search p { + margin: 12px 0 0; + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: var(--body-font-size-xs); +} + +/* example store result */ +.store-locator-result { + display: grid; + grid-template-columns: auto 1fr; + gap: 4px 24px; + align-items: start; +} + +.store-locator-result p { + margin: 0 0 6px; +} + +.store-locator-result p:first-child { + grid-row: span 5; + align-self: center; + color: var(--conti-yellow); + font-size: var(--heading-font-size-l); + line-height: 1; + text-align: center; +} + +.store-locator-result p:first-child strong { + display: block; + font-weight: 300; +} + +.store-locator-result .icon { + width: 18px; + height: 18px; + vertical-align: middle; + margin-inline-end: 6px; } .store-locator-ctas { display: flex; flex-wrap: wrap; gap: 16px; -} - -.store-locator-ctas p { margin: 0; } @@ -62,10 +102,13 @@ color: var(--conti-black); } -@media (width >= 700px) { +@media (width >= 900px) { .store-locator { - flex-direction: row; - align-items: center; - justify-content: space-between; + grid-template-columns: 1fr 1fr; + } + + .store-locator-ctas { + grid-column: 2; + justify-content: flex-end; } } diff --git a/blocks/store-locator/store-locator.js b/blocks/store-locator/store-locator.js index 6b775ee..28e9dc9 100644 --- a/blocks/store-locator/store-locator.js +++ b/blocks/store-locator/store-locator.js @@ -1,30 +1,30 @@ /** - * Static shell for the live store locator: a heading, a disabled location - * input (no live geolocation/search in this demo) and CTA links. The input - * is built in JS because it has no default-content representation. + * Static representation of the live "Stores near" module: a search column + * (heading + disabled location input + use-current-location link) and an + * example nearest-store result with distance, address, directions and phone, + * plus CTA links. No live geolocation/search in this demo; the store result + * is illustrative content authored on the page, matching what the live site + * renders by default. * @param {Element} block the store-locator block */ export default function decorate(block) { - const heading = block.querySelector('h1, h2, h3, h4, h5, h6'); - const ctaWrappers = [...block.querySelectorAll('p.button-wrapper')]; + const [search, result, ctas] = [...block.children]; - const search = document.createElement('div'); - search.className = 'store-locator-search'; - if (heading) search.append(heading); + if (search) { + search.className = 'store-locator-search'; + const field = document.createElement('div'); + field.className = 'store-locator-field'; + const input = document.createElement('input'); + input.type = 'text'; + input.placeholder = 'Enter city, state or zip'; + input.setAttribute('aria-label', 'Enter city, state or zip'); + input.disabled = true; + field.append(input); + const heading = search.querySelector('h1, h2, h3, h4, h5, h6'); + if (heading) heading.after(field); + else search.prepend(field); + } - const field = document.createElement('div'); - field.className = 'store-locator-field'; - const input = document.createElement('input'); - input.type = 'text'; - input.placeholder = 'Enter city, state or zip'; - input.setAttribute('aria-label', 'Enter city, state or zip'); - input.disabled = true; - field.append(input); - search.append(field); - - const ctas = document.createElement('div'); - ctas.className = 'store-locator-ctas'; - ctaWrappers.forEach((p) => ctas.append(p)); - - block.replaceChildren(search, ctas); + if (result) result.className = 'store-locator-result'; + if (ctas) ctas.className = 'store-locator-ctas'; } diff --git a/icons/chat.svg b/icons/chat.svg index ffa6cdc..e7f6359 100644 --- a/icons/chat.svg +++ b/icons/chat.svg @@ -1,4 +1 @@ - - - + diff --git a/icons/facebook.svg b/icons/facebook.svg index 6f75636..505d85f 100644 --- a/icons/facebook.svg +++ b/icons/facebook.svg @@ -1,3 +1 @@ - - - + diff --git a/icons/help-outline.svg b/icons/help-outline.svg index e0d754c..631229f 100644 --- a/icons/help-outline.svg +++ b/icons/help-outline.svg @@ -1,6 +1 @@ - - - + diff --git a/icons/instagram.svg b/icons/instagram.svg new file mode 100644 index 0000000..6229df7 --- /dev/null +++ b/icons/instagram.svg @@ -0,0 +1 @@ + diff --git a/icons/license-plate.svg b/icons/license-plate.svg index 15173a6..e118eae 100644 --- a/icons/license-plate.svg +++ b/icons/license-plate.svg @@ -1,6 +1 @@ - - - - - + diff --git a/icons/limited-warranty.svg b/icons/limited-warranty.svg deleted file mode 100644 index 7acb0e8..0000000 --- a/icons/limited-warranty.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/icons/mileage-warranty.svg b/icons/mileage-warranty.svg deleted file mode 100644 index 40fdbf6..0000000 --- a/icons/mileage-warranty.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - diff --git a/icons/phone.svg b/icons/phone.svg new file mode 100644 index 0000000..586edfe --- /dev/null +++ b/icons/phone.svg @@ -0,0 +1 @@ + diff --git a/icons/pin.svg b/icons/pin.svg new file mode 100644 index 0000000..0c30a27 --- /dev/null +++ b/icons/pin.svg @@ -0,0 +1 @@ + diff --git a/icons/road-hazard.svg b/icons/road-hazard.svg deleted file mode 100644 index 6014dca..0000000 --- a/icons/road-hazard.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/icons/roadside-assistance.svg b/icons/roadside-assistance.svg deleted file mode 100644 index 95b67c8..0000000 --- a/icons/roadside-assistance.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/icons/satisfaction-trial.svg b/icons/satisfaction-trial.svg deleted file mode 100644 index 972aab9..0000000 --- a/icons/satisfaction-trial.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/icons/search.svg b/icons/search.svg index 637c677..1c88718 100644 --- a/icons/search.svg +++ b/icons/search.svg @@ -1,6 +1 @@ - - - + diff --git a/icons/tcp-badge.svg b/icons/tcp-badge.svg index 2f6f7d7..d4395fa 100644 --- a/icons/tcp-badge.svg +++ b/icons/tcp-badge.svg @@ -1,6 +1 @@ - - - - - - + diff --git a/icons/tire-size.svg b/icons/tire-size.svg index 9adcfe0..c7c8d2b 100644 --- a/icons/tire-size.svg +++ b/icons/tire-size.svg @@ -1,9 +1 @@ - - - - - - - + diff --git a/icons/trip-interruption.svg b/icons/trip-interruption.svg deleted file mode 100644 index e99e332..0000000 --- a/icons/trip-interruption.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - diff --git a/icons/vehicle.svg b/icons/vehicle.svg index a3891bf..885d791 100644 --- a/icons/vehicle.svg +++ b/icons/vehicle.svg @@ -1,6 +1 @@ - - - + diff --git a/icons/x.svg b/icons/x.svg index f9284f1..8f05391 100644 --- a/icons/x.svg +++ b/icons/x.svg @@ -1,3 +1 @@ - - - + diff --git a/icons/youtube.svg b/icons/youtube.svg new file mode 100644 index 0000000..4900cf6 --- /dev/null +++ b/icons/youtube.svg @@ -0,0 +1 @@ + diff --git a/styles/styles.css b/styles/styles.css index 65638a0..790cfbc 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -304,6 +304,12 @@ main img { width: 100%; } +/* Total Confidence Plan badge renders at hero size, not as a small icon */ +.icon.icon-tcp-badge { + width: 110px; + height: 128px; +} + /* sections */ main > .section { margin: 40px 0;