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);
}