From 25da4eb441142e88a2352d41716e639b5c966ea0 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Fri, 24 Jul 2026 18:06:23 +0200 Subject: [PATCH] Homepage: align each block to the live design From a measured block-by-block comparison against the live page (with its promo modal and cookie banner dismissed). - hero: H1 42px, not 56px. Dark-hero links white. - dark sections: stop forcing button text white (a global link rule was overriding .button color, so Learn More was white; live is black). - category tiles: full-bleed edge to edge, heading 30px/400. - confidence band: real coverage icons restored, badge at hero size, heading letter-spacing, larger subcopy. - store-locator: More Locations / Online Retailers side by side, smaller heading, distance 40px, uppercase store name and address. - news band: three cards fill the row (auto-fit), underlined headlines, full-opacity dividers. - promo bar: sentence case, plus glyph, slim height, 12px. - perfect-fit: 12px, wider icons. - TerrainContact: narrower text column via a columns feature variant. Interactive parity left out for now: the promo accordion, the TerrainContact carousel, the tire-finder modal. Verified against the clean live homepage at 1440px. --- blocks/cards/cards.css | 66 ++++++++++++++++---------- blocks/columns/columns.css | 13 +++++ blocks/hero/hero.css | 10 ++-- blocks/perfect-fit/perfect-fit.css | 12 ++--- blocks/promo-bar/promo-bar.css | 19 ++++++-- blocks/store-locator/store-locator.css | 27 ++++++++++- icons/limited-warranty.svg | 1 + icons/mileage-warranty.svg | 1 + icons/road-hazard.svg | 1 + icons/roadside-assistance.svg | 1 + icons/satisfaction-trial.svg | 1 + icons/trip-interruption.svg | 1 + styles/styles.css | 4 +- 13 files changed, 113 insertions(+), 44 deletions(-) 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/trip-interruption.svg diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 472644a..ac7b2ee 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -76,8 +76,8 @@ main .section.cards-container { /* ---- news: article/news teaser cards ---- */ .cards.news > ul { - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; } .cards.news > ul > li img { @@ -157,6 +157,14 @@ main .section.cards-container { } /* ---- category: tire/product category tiles ---- */ + +/* full-bleed: this section's tiles span the viewport edge to edge on live, + opting out of the generic 1200px section container */ +main .section.cards-container:has(.cards.category) > div { + max-width: none; + padding: 0; +} + .cards.category > ul { grid-template-columns: 1fr; gap: 0; @@ -198,7 +206,8 @@ main .section.cards-container { .cards.category .cards-card-body :is(h1, h2, h3, h4, h5, h6) { display: inline; - font-size: var(--heading-font-size-s); + font-size: var(--heading-font-size-l); + font-weight: 400; background-color: var(--conti-white); box-decoration-break: clone; } @@ -247,7 +256,7 @@ main .section.cards-container { font-family: var(--heading-font-family); font-size: var(--body-font-size-xs); font-weight: bold; - letter-spacing: 0.05em; + letter-spacing: 0.14em; text-transform: uppercase; } @@ -256,8 +265,8 @@ main .section.cards-container { } .cards.coverage .cards-card-body .icon { - width: 40px; - height: 40px; + width: 56px; + height: 56px; } .cards.category > ul > li:hover, @@ -276,8 +285,28 @@ main .section.cards-container { transform: translateY(-6px); } -.cards.coverage .cards-card-body .icon img { - filter: invert(1); +/* 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: 126px; + height: 148px; +} + +main .section.dark.cards-container .default-content-wrapper h2 { + letter-spacing: 6px; +} + +main .section.dark.cards-container .default-content-wrapper p { + font-size: 24px; + font-weight: 300; +} + +main .section.dark.cards-container .cards-wrapper { + margin-top: 32px; } /* ---- news inside a dark/black band: plain text teasers, no card chrome ---- */ @@ -299,7 +328,7 @@ main .section.black .cards.news .cards-card-body :is(h1, h2, h3, h4, h5, h6) { main .section.dark .cards.news .cards-card-body a, main .section.black .cards.news .cards-card-body a { - text-decoration: none; + text-decoration: underline; } main .section.dark .cards.news .cards-card-body a:hover, @@ -310,22 +339,7 @@ main .section.black .cards.news .cards-card-body a:hover { @media (width >= 600px) { main .section.dark .cards.news > ul > li:not(:first-child), main .section.black .cards.news > ul > li:not(:first-child) { - border-inline-start: 1px solid rgb(255 255 255 / 25%); - padding-inline-start: 24px; + border-inline-start: 1px solid var(--conti-white); + padding-inline-start: 20px; } } - -/* 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/columns/columns.css b/blocks/columns/columns.css index 1262a95..8392cf0 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -36,4 +36,17 @@ main .section.columns-container { flex: 1; order: unset; } + + .columns.feature > div > div:not(.columns-img-col) { + flex: 0 1 340px; + } +} + +.columns.feature h2 { + font-size: var(--heading-font-size-l); + font-weight: 400; +} + +.columns.feature p { + font-size: var(--body-font-size-s); } diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index b7bb861..59eb74f 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -62,10 +62,14 @@ main .section.hero-container { .hero-content :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: inherit; - font-size: var(--heading-font-size-xxl); + font-size: var(--heading-font-size-xl); letter-spacing: 1px; } +.hero a:any-link { + color: currentcolor; +} + .hero-content em { color: var(--conti-yellow); font-style: normal; @@ -119,7 +123,7 @@ main .section.hero-container { .hero.left .hero-content > p:first-child { margin-top: 0; - font-size: var(--body-font-size-s); + font-size: var(--heading-font-size-xs); font-weight: 400; } @@ -175,7 +179,7 @@ main .section.hero-container { } .hero.left .hero-content p { - font-size: var(--body-font-size-m); + font-size: 20px; } .hero.left .hero-content p:has(> a:only-child) { diff --git a/blocks/perfect-fit/perfect-fit.css b/blocks/perfect-fit/perfect-fit.css index 173aa13..ec71c78 100644 --- a/blocks/perfect-fit/perfect-fit.css +++ b/blocks/perfect-fit/perfect-fit.css @@ -16,9 +16,9 @@ main .section.perfect-fit-container { .perfect-fit-label { margin: 0; font-family: var(--heading-font-family); - font-size: var(--body-font-size-xs); + font-size: 12px; font-weight: 700; - letter-spacing: 1.25px; + letter-spacing: 2px; text-transform: uppercase; } @@ -38,15 +38,15 @@ main .section.perfect-fit-container { gap: 8px; margin: 0; font-family: var(--heading-font-family); - font-size: var(--body-font-size-xs); + font-size: 12px; font-weight: 700; - letter-spacing: 1.25px; + letter-spacing: 2px; text-transform: uppercase; } .perfect-fit-items .icon { - width: 20px; - height: 20px; + height: 17px; + width: auto; } .perfect-fit-items .icon img { diff --git a/blocks/promo-bar/promo-bar.css b/blocks/promo-bar/promo-bar.css index c4569f6..90b5681 100644 --- a/blocks/promo-bar/promo-bar.css +++ b/blocks/promo-bar/promo-bar.css @@ -15,12 +15,21 @@ main .section.promo-bar-container { .promo-bar > div > div { margin: 0; - padding: 14px 24px; - font-family: var(--heading-font-family); - font-size: var(--body-font-size-xs); + padding: 4px 24px; + font-family: var(--body-font-family); + font-size: 12px; + font-weight: 700; +} + +.promo-bar p { + margin: 0; +} + +.promo-bar p::before { + content: '+'; + display: inline-block; + margin-inline-end: 8px; font-weight: bold; - letter-spacing: 0.05em; - text-transform: uppercase; } .promo-bar a:any-link { diff --git a/blocks/store-locator/store-locator.css b/blocks/store-locator/store-locator.css index 9af3587..610771b 100644 --- a/blocks/store-locator/store-locator.css +++ b/blocks/store-locator/store-locator.css @@ -13,6 +13,7 @@ .store-locator-search h6 { margin: 0 0 24px; color: inherit; + font-size: 30px; } .store-locator-field { @@ -66,14 +67,32 @@ grid-row: span 5; align-self: center; color: var(--conti-yellow); - font-size: var(--heading-font-size-l); + font-size: 40px; line-height: 1; text-align: center; } .store-locator-result p:first-child strong { display: block; - font-weight: 300; + font-weight: 400; +} + +.store-locator-result p:nth-child(2) strong { + font-size: 14px; + letter-spacing: 0.25px; + text-transform: uppercase; +} + +.store-locator-result p:nth-child(3) { + font-size: 14px; + text-transform: uppercase; +} + +.store-locator-result a { + font-size: 12px; + font-weight: 700; + letter-spacing: 1.25px; + text-transform: uppercase; } .store-locator-result .icon { @@ -90,6 +109,10 @@ margin: 0; } +.store-locator-ctas > div { + display: contents; +} + .store-locator .button.secondary { border-color: var(--conti-white); color: var(--conti-white); diff --git a/icons/limited-warranty.svg b/icons/limited-warranty.svg new file mode 100644 index 0000000..d3ef75a --- /dev/null +++ b/icons/limited-warranty.svg @@ -0,0 +1 @@ + diff --git a/icons/mileage-warranty.svg b/icons/mileage-warranty.svg new file mode 100644 index 0000000..c74e1dd --- /dev/null +++ b/icons/mileage-warranty.svg @@ -0,0 +1 @@ + diff --git a/icons/road-hazard.svg b/icons/road-hazard.svg new file mode 100644 index 0000000..aa0cdfa --- /dev/null +++ b/icons/road-hazard.svg @@ -0,0 +1 @@ + diff --git a/icons/roadside-assistance.svg b/icons/roadside-assistance.svg new file mode 100644 index 0000000..0712940 --- /dev/null +++ b/icons/roadside-assistance.svg @@ -0,0 +1 @@ + diff --git a/icons/satisfaction-trial.svg b/icons/satisfaction-trial.svg new file mode 100644 index 0000000..3cd94f9 --- /dev/null +++ b/icons/satisfaction-trial.svg @@ -0,0 +1 @@ + diff --git a/icons/trip-interruption.svg b/icons/trip-interruption.svg new file mode 100644 index 0000000..ed05812 --- /dev/null +++ b/icons/trip-interruption.svg @@ -0,0 +1 @@ + diff --git a/styles/styles.css b/styles/styles.css index 790cfbc..100fea0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -354,8 +354,8 @@ main .section.black { padding: 56px 0; } -main .section.dark a:any-link, -main .section.black a:any-link { +main .section.dark a:any-link:not(.button), +main .section.black a:any-link:not(.button) { color: var(--conti-white); }