Update fonts

package.json

@@ -45,6 +45,7 @@
 		"@eslint-community/eslint-plugin-eslint-comments": "^4.3.0",
 		"@eslint/js": "^9.2.0",
 		"@fontsource-variable/josefin-sans": "^5.0.21",
+		"@fontsource/urbanist": "^5.0.20",
 		"@release-it/conventional-changelog": "^8.0.1",
 		"@types/eslint-plugin-markdown": "^2.0.2",
 		"accessible-astro-components": "^2.3.6",

src/components/Bio.astro

@@ -48,7 +48,7 @@ const {
 
 	.bio-medium {
 		--imageSize: clamp(3.5rem, 10vw, 6rem);
-		--fontSize: var(--fontSizeBodySmall);
+		--fontSize: var(--fontSizeBodySmaller);
 	}
 
 	.bio-large {
@@ -68,7 +68,7 @@ const {
 	}
 
 	.position {
-		font-size: var(--fontSizeBodySmall);
+		font-size: var(--fontSizeBodySmaller);
 		font-weight: var(--fontWeightLight);
 	}
 </style>

src/components/BioPlaceholder.astro

@@ -37,7 +37,7 @@ const name = indexNames.get(Astro.props.index) ?? "To Be Announced";
 	}
 
 	.name {
-		font-size: var(--fontSizeBodySmall);
+		font-size: var(--fontSizeBodySmaller);
 		font-weight: var(--fontWeightLight);
 	}
 </style>

src/components/BodyText.astro

@@ -23,11 +23,13 @@ const { as: As = "div", class: className, size, width, ...rest } = Astro.props;
 
 <style>
 	.body-text {
+		color: var(--colorForegroundBody);
 		font-family: var(--fontFamilyBody);
 		font-weight: var(--fontWeightBody);
 		line-height: var(--lineHeightBody);
 		text-align: center;
 		padding: 0 var(--widthBodyPadding);
+		transition: var(--transitionMedium) line-height;
 	}
 
 	.body-text-medium {

src/components/FAQs.astro

@@ -178,7 +178,7 @@ Once you're in Boston, see <a href="https://www.neaq.org/visit/directions-and-pa
 
 	details {
 		font-family: var(--fontFamilyBody);
-		font-size: var(--fontSizeBody);
+		font-size: var(--fontSizeBodySmall);
 		font-weight: var(--fontWeightLight);
 		line-height: var(--lineHeightBody);
 		margin-bottom: 1rem;

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import "@fontsource-variable/josefin-sans";
+import "@fontsource/urbanist";
 import { SkipLinks } from "accessible-astro-components";
 
 import Head from "~/components/Head.astro";

src/layouts/base.css

@@ -8,30 +8,32 @@
 		--colorEmphasizedBackground: #085e7a;
 		--colorInverted: #edebe4;
 		--colorInvertedMild: #78c1d9;
-		--colorForeground: #203238;
+		--colorForeground: #1f3840;
+		--colorForegroundBody: #203238;
 		--colorOffWhite: #eaeaff;
 		--colorSubtle: #a5e2fc;
 		--colorHeroShadow: #002547;
 		--colorTextShadow: rgba(35, 49, 70, 0.75);
 
-		--fontFamilyBody: var(--fontFamilyHeading);
+		--fontFamilyBody: "Urbanist";
 		--fontFamilyHeading: "Josefin Sans Variable";
 
 		--fontSizeBody: 1.35rem;
 		--fontSizeBodyLarge: 1.5rem;
-		--fontSizeBodySmall: 1rem;
+		--fontSizeBodySmall: 1.1rem;
+		--fontSizeBodySmaller: 1rem;
 		--fontSizeHero: clamp(4rem, 15vw, 6rem);
 		--fontSizeH2: clamp(1.75rem, 5vw, 2rem);
 		--fontSizeH3: clamp(1.5rem, 3.5vw, 1.75rem);
-		--fontSizeH4: clamp(1.25rem, 2.75vw, 1.5rem);
+		--fontSizeH4: clamp(1.15rem, 2.5vw, 1.35rem);
 
 		--fontWeightLight: 300;
-		--fontWeightBody: 400;
+		--fontWeightBody: 300;
 		--fontWeightSemibold: 500;
 
 		--letterSpacingHeading: -0.04em;
 
-		--lineHeightBody: 1.2;
+		--lineHeightBody: 1.4;
 
 		--transitionFast: 117ms;
 		--transitionMedium: 280ms;
@@ -48,9 +50,12 @@
 		--colorBackdropDark: var(--colorSubtle);
 		--colorBackdropLight: var(--colorInverted);
 		--colorEmphasized: #0685af;
-		--colorForeground: rgb(168, 213, 228);
+		--colorForeground: rgb(203, 228, 235);
+		--colorForegroundBody: rgb(216, 230, 234);
 		--colorInverted: #10141b;
 		--colorSubtle: #062430;
+
+		--lineHeightBody: 1.5;
 	}
 
 	@media (prefers-reduced-motion: no-preference) {