diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index ac7b2ee..c11bc33 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -85,7 +85,9 @@ main .section.cards-container { } .cards.news .cards-card-body :is(h1, h2, h3, h4, h5, h6) { - font-size: var(--heading-font-size-xs); + font-size: var(--body-font-size-xs); + font-weight: 700; + letter-spacing: 0.5px; } .cards.news .cards-card-body p { @@ -208,6 +210,7 @@ main .section.cards-container:has(.cards.category) > div { display: inline; font-size: var(--heading-font-size-l); font-weight: 400; + letter-spacing: 0.25px; background-color: var(--conti-white); box-decoration-break: clone; } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index efa3153..7b7c57f 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -34,6 +34,12 @@ footer .footer-cta { gap: 12px; } +/* footer pills sit a notch larger than body CTAs on live (14px, not 12px) */ +footer .footer-cta .button { + font-size: 14px; + letter-spacing: 0.5px; +} + footer .footer-links-group h3 { margin: 0 0 13px; color: var(--conti-black); diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 59eb74f..d8ab85d 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -63,7 +63,7 @@ main .section.hero-container { margin: 0; color: inherit; font-size: var(--heading-font-size-xl); - letter-spacing: 1px; + line-height: 1.14; } .hero a:any-link { diff --git a/styles/article.css b/styles/article.css index 052b943..c1347df 100644 --- a/styles/article.css +++ b/styles/article.css @@ -1,24 +1,21 @@ /* - * Article template. - * - * Reproduces Continental's "news-article" layout: a centered title, - * a constrained-width body column with a hero image, and a sidebar - * for the share block. + * Article template. Matches Continental's news-article type scale: a + * full-width centered 42px title, a featured image, then a narrow reading + * column at ~15px, measured from the live continentaltire.com /learn pages. * * Activated by page-metadata "Template: Article", which - * decorateTemplateAndTheme() (scripts/aem.js) turns into an "article" - * class on -- no block or script changes needed for that part. - * Loading this stylesheet still needs a small scripts.js hook; see - * sharedChangesNeeded in the delivery report. + * decorateTemplateAndTheme() (scripts/aem.js) turns into an "article" class + * on ; scripts.js then loads this stylesheet. + * + * The live layout puts a share sidebar to the right of the body. That + * feature is not built here, so the reading column is centered rather than + * leaving an empty sidebar gap. */ body.article main .section { - display: grid; - grid-template-columns: 1fr; - row-gap: 38px; - max-width: 1200px; + max-width: 640px; margin: 0 auto; - padding: 0 24px 40px; + padding: 0 24px; } body.article main .section > div { @@ -27,8 +24,13 @@ body.article main .section > div { padding: 0; } -body.article main .section h1 { - max-width: 35ch; +/* title section spans wider than the reading column, centered like live */ +body.article main .section:first-of-type { + max-width: 940px; + padding-bottom: 8px; +} + +body.article main .section:first-of-type h1 { margin: 0 auto; font-family: var(--body-font-family); font-weight: 300; @@ -36,31 +38,37 @@ body.article main .section h1 { } body.article main .section .default-content-wrapper { - max-width: 79ch; + font-size: 15px; + line-height: 1.48; } body.article main .section .default-content-wrapper > * + * { margin-top: 1.4em; } -body.article main .section .default-content-wrapper picture { +body.article main .section .default-content-wrapper ul li::marker { + color: var(--conti-yellow); +} + +/* body subheads read smaller than the title, light like the live article */ +body.article main .section .default-content-wrapper :is(h2, h3, h4) { + font-family: var(--body-font-family); + font-weight: 300; +} + +body.article main .section .default-content-wrapper h2 { font-size: 26px; } +body.article main .section .default-content-wrapper h3 { font-size: 20px; } +body.article main .section .default-content-wrapper h4 { font-size: 17px; } + +body.article main .section picture { display: block; - margin: 24px 0; + margin: 8px 0 24px; border-radius: 12px; overflow: hidden; } -body.article main .section .default-content-wrapper picture img { +body.article main .section picture img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } - -@media (width >= 900px) { - body.article main .section { - grid-template-columns: minmax(0, 755px) 300px; - column-gap: 45px; - align-items: start; - padding: 0 32px 40px; - } -} diff --git a/styles/styles.css b/styles/styles.css index 100fea0..90d920b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -39,7 +39,7 @@ /* fonts (Stag Sans with Arial/Helvetica fallback, matching the live theme) */ --body-font-family: 'Stag Sans', arial, helvetica, sans-serif; - --heading-font-family: 'Stag Sans Bold', arial, helvetica, sans-serif; + --heading-font-family: 'Stag Sans', arial, helvetica, sans-serif; /* body sizes */ --body-font-size-m: 18px; @@ -65,10 +65,10 @@ --body-font-size-s: 16px; --body-font-size-xs: 14px; - /* heading sizes */ - --heading-font-size-xxl: 56px; + /* heading sizes (live never exceeds 42px, so xxl caps there too) */ + --heading-font-size-xxl: 42px; --heading-font-size-xl: 42px; - --heading-font-size-l: 32px; + --heading-font-size-l: 30px; --heading-font-size-m: 26px; --heading-font-size-s: 22px; --heading-font-size-xs: 18px; @@ -187,7 +187,7 @@ button.button { border-radius: 26px; padding: 12px 26px; font-family: var(--heading-font-family); - font-size: var(--body-font-size-xs); + font-size: 12px; font-weight: bold; line-height: 1.4; letter-spacing: 1.25px;