diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 61ff6fe059..bab0c0f69b 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,19 +1,28 @@ +.cards-container .cards-wrapper { + margin-top: var(--spacing-xbig); +} + +.cards-card-body strong { + font: var(--type-condensed-font-family); + font-weight: bolder; +} + .cards > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(257px, 1fr)); - grid-gap: 24px; + grid-gap: var(--spacing-medium); } .cards > ul > li { - border: 1px solid var(--color-neutral-500); + border: var(--shape-border-width-1) solid var(--color-neutral-500); background-color: var(--background-color); } .cards .cards-card-body { - margin: 16px; + margin: var(--spacing-small); } .cards .cards-card-image { diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 974eaf2260..89b8a2a971 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -34,4 +34,4 @@ .hero { padding: 40px 32px; } -} \ No newline at end of file +} diff --git a/fonts/AdobeClean-BoldCond.otf b/fonts/AdobeClean-BoldCond.otf new file mode 100644 index 0000000000..64280da760 Binary files /dev/null and b/fonts/AdobeClean-BoldCond.otf differ diff --git a/fonts/AdobeClean-Light.otf b/fonts/AdobeClean-Light.otf new file mode 100644 index 0000000000..01fd8e5a1c Binary files /dev/null and b/fonts/AdobeClean-Light.otf differ diff --git a/fonts/AdobeClean-Regular.otf b/fonts/AdobeClean-Regular.otf new file mode 100644 index 0000000000..a6e789d7b7 Binary files /dev/null and b/fonts/AdobeClean-Regular.otf differ diff --git a/styles/fonts.css b/styles/fonts.css index 319c400ae7..d91cf5df6b 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,4 +1,31 @@ /* stylelint-disable max-line-length */ +@font-face { + font-family: adobe-clean; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/AdobeClean-Light.otf') format('opentype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: adobe-clean; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/AdobeClean-Regular.otf') format('opentype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: adobe-clean-condensed; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/AdobeClean-BoldCond.otf') format('opentype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + @font-face { font-family: roboto-condensed; font-style: normal; diff --git a/styles/styles.css b/styles/styles.css index 66d9b52ea3..da26a1c36b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -90,8 +90,8 @@ --spacing-huge: 120px; --spacing-xhuge: 144px; --spacing-xxhuge: 192px; - --type-base-font-family: roboto, roboto-fallback; - --type-condensed-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif; + --type-base-font-family: adobe-clean, roboto, roboto-fallback; + --type-condensed-font-family: adobe-clean-condensed, roboto-condensed, roboto-condensed-fallback, sans-serif; --type-display-1-font: normal normal 300 6.0rem/7.2rem var(--type-base-font-family); --type-display-1-letter-spacing: 0.04em; --type-display-2-font: normal normal 300 4.8rem/5.6rem @@ -141,7 +141,7 @@ --type-details-overline-letter-spacing: 0.16em; /* Additional tokens */ - --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', + --type-fixed-font-family: adobe-clean, 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace; --background-color: var(--color-neutral-50); --nav-height: 6.4rem; @@ -149,15 +149,30 @@ /* fallback fonts */ @font-face { - font-family: roboto-condensed-fallback; - size-adjust: 88.82%; - src: local('Arial'); + font-family: adobe-clean; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/AdobeClean-Light.otf') format('opentype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: roboto-fallback; - size-adjust: 99.529%; - src: local('Arial'); + font-family: adobe-clean; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/AdobeClean-Regular.otf') format('opentype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: adobe-clean-condensed; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../fonts/AdobeClean-BoldCond.otf') format('opentype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html, body { @@ -172,7 +187,7 @@ body { font: var(--type-body-1-default-font); letter-spacing: var(--type-body-1-default-letter-spacing); margin: 0; - color: var(--color-brand-700); + color: var(--color-neutral-800); background-color: var(--background-color); display: grid; grid-template-rows: auto 1fr auto; @@ -404,6 +419,10 @@ main > .section { margin: var(--spacing-xbig) 0; } +.section:empty { + display: none; +} + main > .section > div { max-width: 1200px; margin: auto; @@ -423,7 +442,7 @@ main > .section:first-of-type { /* section metadata */ main .section.light, main .section.highlight { - background-color: var(--color-neutral-500); + background-color: var(--color-neutral-100); margin: 0; padding: var(--spacing-xbig) 0; }