diff --git a/.stylelintrc b/.stylelintrc
index e49ea7b543..f92969fa42 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -34,7 +34,7 @@
     } ],
     "font-family-no-duplicate-names": true,
     "font-family-no-missing-generic-family-keyword": true,
-    "function-comma-space-after": [ "always", {
+    "function-comma-space-after": [ "always-single-line", {
       "severity": "warning"
     } ],
     "function-max-empty-lines": 0,
diff --git a/src/app/components/Footer/ContactDialog.tsx b/src/app/components/Footer/ContactDialog.tsx
new file mode 100644
index 0000000000..b044e2d8c2
--- /dev/null
+++ b/src/app/components/Footer/ContactDialog.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import classNames from 'classnames';
+import { MessageEvent } from '@openstax/types/lib.dom';
+import { useModalFocusManagement } from '../../content/hooks/useModalFocusManagement';
+import Modal from '../Modal';
+
+export function ContactDialog({
+  isOpen,
+  close,
+  contactFormParams,
+  className,
+}: {
+  isOpen: boolean;
+  close: () => void;
+  contactFormParams?: { key: string; value: string }[];
+  className?: string;
+}) {
+  const contactFormUrl = React.useMemo(() => {
+    const formUrl = '/embedded/contact';
+
+    if (contactFormParams !== undefined) {
+      const params = contactFormParams
+        .map(({ key, value }) => encodeURIComponent(`${key}=${value}`))
+        .map((p) => `body=${p}`)
+        .join('&');
+
+      return `${formUrl}?${params}`;
+    }
+
+    return formUrl;
+  }, [contactFormParams]);
+  const { closeButtonRef } = useModalFocusManagement({ modalId: 'contactdialog', isOpen });
+
+  return !isOpen ? null : (
+    <Modal
+      className={classNames('footer-contact-dialog', className)}
+      onModalClose={close}
+      heading='i18n:footer:column1:contact-us'
+      closeButtonRef={closeButtonRef}
+    >
+      <iframe id='contact-us' title='contact-us' src={contactFormUrl} />
+    </Modal>
+  );
+}
+
+export function useContactDialog() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const open = React.useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = React.useCallback(() => setIsOpen(false), [setIsOpen]);
+
+  React.useEffect(
+    () => {
+      const win = window;
+
+      const closeOnSubmit = ({ data }: MessageEvent) => {
+        if (data === 'CONTACT_FORM_SUBMITTED') {
+          close();
+        }
+      };
+
+      win?.addEventListener('message', closeOnSubmit);
+      return () => win?.removeEventListener('message', closeOnSubmit);
+    },
+    [close]
+  );
+
+  return { isOpen, open, close };
+}
diff --git a/src/app/components/Footer/Footer.css b/src/app/components/Footer/Footer.css
new file mode 100644
index 0000000000..6b69f5eec5
--- /dev/null
+++ b/src/app/components/Footer/Footer.css
@@ -0,0 +1,465 @@
+/* Footer Component Styles */
+
+/* Base footer styles */
+.footer-wrapper {
+  z-index: 0;
+  opacity: 1;
+  transition: opacity 0.2s;
+  font-size: 1.6rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 2.5rem;
+  color: #d5d5d5;
+}
+
+/* Hide footer when printing */
+@media print {
+  .footer-wrapper {
+    display: none;
+  }
+}
+
+/* Vertical nav toolbar styling when nav is closed
+ * IMPORTANT: These breakpoint values are derived from constants.ts and theme.ts:
+ *
+ * 75.0625em = theme.breakpoints.desktopBreak (1201px)
+ * 90em = remsToEms(contentWrapperMaxWidth + verticalNavbarMaxWidth * 2)
+ *      = remsToEms(128 + 8 * 2) = remsToEms(144) = 144 * 10/16 = 90em
+ *      (exported as contentWrapperAndNavWidthBreakpoint)
+ *
+ * If constants.ts or theme.ts values change, these breakpoints MUST be updated accordingly.
+ * The conversion formula is: rems * 10 / 16 = ems (because 1rem = 10px, 1em = 16px in media queries)
+ */
+@media (min-width: 75.0625em) and (max-width: 90em) {
+  .footer-wrapper--vertical-nav-toolbar {
+    padding-left: clamp(0rem, calc(8rem - (100vw - 128rem) / 2), 8rem);
+  }
+}
+
+.footer-inner {
+  color: #d5d5d5;
+  display: grid;
+}
+
+/* Top section */
+.footer-top {
+  background-color: #424242;
+}
+
+/* Top section responsive padding */
+@media (min-width: 60.1em) {
+  .footer-top {
+    padding: 7rem 0;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .footer-top {
+    padding: 2rem 0;
+  }
+}
+
+@media (max-width: 60.1em) and (min-width: 37.6em) {
+  .footer-top {
+    padding: 4rem 0;
+  }
+}
+
+/* Top boxed layout - complex grid */
+.footer-top-boxed {
+  max-width: calc(128rem + 1.5rem * 2);
+  align-items: center;
+  display: grid;
+  margin: 0 auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  width: 100%;
+  grid-row-gap: 2rem;
+  overflow: visible;
+}
+
+@media (min-width: 37.6em) {
+  .footer-top-boxed {
+    align-items: start;
+    grid-column-gap: 4rem;
+    grid-template:
+      "headline col1 col2 col3" "mission col1 col2 col3" / minmax(auto, 50rem)
+      auto auto auto;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .footer-top-boxed {
+    grid-template: "headline" "mission" "col1" "col2" "col3";
+  }
+}
+
+@media (min-width: 60.1em) {
+  .footer-top-boxed {
+    grid-column-gap: 8rem;
+  }
+}
+
+/* Heading */
+.footer-heading {
+  grid-area: headline;
+  margin: 0;
+}
+
+@media (min-width: 37.6em) {
+  .footer-heading {
+    font-size: 2.4rem;
+    font-weight: bold;
+    letter-spacing: -0.096rem;
+    line-height: normal;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .footer-heading {
+    font-size: 2rem;
+    font-weight: bold;
+    letter-spacing: -0.08rem;
+    line-height: normal;
+  }
+}
+
+/* Mission section */
+.footer-mission {
+  grid-area: mission;
+}
+
+@media (min-width: 37.6em) {
+  .footer-mission {
+    font-size: 1.8rem;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-height: 3rem;
+  }
+}
+
+/* Copyrights */
+.footer-copyrights {
+  display: grid;
+  grid-gap: 1rem;
+  overflow: visible;
+}
+
+.footer-copyrights [data-html="copyright"] {
+  overflow: visible;
+}
+
+.footer-copyrights a {
+  color: #d5d5d5;
+  overflow: visible;
+}
+
+.footer-copyrights sup {
+  font-size: 66%;
+  margin-left: 0.1rem;
+  position: relative;
+  top: -0.25em;
+  vertical-align: top;
+}
+
+.footer-mission a {
+  color: #d5d5d5;
+  font-weight: bold;
+  text-underline-position: under;
+}
+
+/* Pseudo-class selectors for links - must come after base link selectors */
+.footer-copyrights a:hover,
+.footer-copyrights a:active,
+.footer-copyrights a:focus {
+  color: inherit;
+}
+
+.footer-mission a:hover,
+.footer-mission a:active,
+.footer-mission a:focus {
+  color: inherit;
+}
+
+/* Column base styles */
+.footer-column {
+  display: grid;
+  grid-gap: 0.5rem;
+  overflow: visible;
+}
+
+.footer-column-1 {
+  grid-area: col1;
+}
+
+.footer-column-2 {
+  grid-area: col2;
+}
+
+.footer-column-3 {
+  grid-area: col3;
+}
+
+.footer-column-heading {
+  font-size: 1.8rem;
+  font-weight: bold;
+  letter-spacing: -0.072rem;
+  line-height: normal;
+  margin: 0;
+}
+
+@media (max-width: 37.5em) {
+  .footer-column-heading {
+    line-height: 4.5rem;
+  }
+}
+
+/* Footer links */
+.footer-link {
+  color: #d5d5d5;
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  text-decoration: underline;
+}
+
+.footer-link:hover,
+.footer-link:active,
+.footer-link:focus {
+  color: inherit;
+}
+
+@media (max-width: 37.5em) {
+  .footer-link {
+    line-height: 4.5rem;
+  }
+}
+
+/* Footer button (styled as link) */
+.footer-button {
+  font-size: 1.6rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 2.5rem;
+  color: #d5d5d5;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.footer-button:hover {
+  text-decoration: underline;
+}
+
+.footer-button:hover,
+.footer-button:active,
+.footer-button:focus {
+  color: inherit;
+}
+
+@media (max-width: 37.5em) {
+  .footer-button {
+    line-height: 4.5rem;
+  }
+}
+
+/* Manage cookies link - special override for ui-components */
+.footer-manage-cookies-link.footer-manage-cookies-link {
+  font-size: 1.6rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 2.5rem;
+  color: #d5d5d5;
+  text-decoration: none;
+  text-align: left;
+}
+
+.footer-manage-cookies-link.footer-manage-cookies-link:hover {
+  text-decoration: underline;
+}
+
+.footer-manage-cookies-link.footer-manage-cookies-link:hover,
+.footer-manage-cookies-link.footer-manage-cookies-link:active,
+.footer-manage-cookies-link.footer-manage-cookies-link:focus {
+  color: inherit;
+}
+
+@media (max-width: 37.5em) {
+  .footer-manage-cookies-link.footer-manage-cookies-link {
+    line-height: 4.5rem;
+  }
+}
+
+/* Flex manage cookies link - doubled selector for specificity to override ui-components defaults */
+.footer-manage-cookies-flex-link.footer-manage-cookies-flex-link {
+  font-size: 1.6rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 2.5rem;
+  color: #d5d5d5;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.footer-manage-cookies-flex-link.footer-manage-cookies-flex-link:hover {
+  text-decoration: underline;
+}
+
+.footer-manage-cookies-flex-link.footer-manage-cookies-flex-link:hover,
+.footer-manage-cookies-flex-link.footer-manage-cookies-flex-link:active,
+.footer-manage-cookies-flex-link.footer-manage-cookies-flex-link:focus {
+  color: inherit;
+}
+
+/* Link list wrapper */
+.footer-link-list-wrapper {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+}
+
+/* Bottom link */
+.footer-bottom-link {
+  color: #d5d5d5;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-column-gap: 0.7rem;
+  overflow: hidden;
+}
+
+.footer-bottom-link:hover,
+.footer-bottom-link:active,
+.footer-bottom-link:focus {
+  color: inherit;
+}
+
+/* Bottom section */
+.footer-bottom {
+  font-size: 1.2rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  background-color: #3b3b3b;
+}
+
+@media (min-width: 37.6em) {
+  .footer-bottom {
+    padding: 2.5rem 0;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .footer-bottom {
+    padding: 1.5rem;
+  }
+}
+
+/* Bottom boxed layout */
+.footer-bottom-boxed {
+  max-width: calc(128rem + 1.5rem * 2);
+  align-items: center;
+  display: grid;
+  margin: 0 auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  width: 100%;
+  grid-gap: 1.5rem 4rem;
+  overflow: visible;
+}
+
+@media (min-width: 37.6em) {
+  .footer-bottom-boxed {
+    grid-auto-flow: column;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .footer-bottom-boxed {
+    padding: 0;
+  }
+}
+
+/* Portal bottom boxed layout */
+.footer-portal-bottom-boxed {
+  max-width: calc(128rem + 1.5rem * 2);
+  align-items: start;
+  display: grid;
+  margin: 0 auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  width: 100%;
+  grid-gap: 1.5rem 4rem;
+  overflow: visible;
+}
+
+@media (min-width: 37.6em) {
+  .footer-portal-bottom-boxed {
+    grid-template: "col1 col2 col3" / minmax(auto, 70rem) auto auto;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .footer-portal-bottom-boxed {
+    padding: 0;
+    grid-template:
+      "col1"
+      "col2"
+      "col3";
+  }
+}
+
+/* Social menu */
+.footer-social {
+  align-items: center;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 1rem;
+  justify-content: end;
+  list-style: none;
+  overflow: visible;
+}
+
+/* Social icon */
+.footer-social-icon {
+  font-size: 1.6rem;
+  background-color: var(--footer-social-icon-bg, #767676);
+  color: var(--footer-social-icon-color, #fff);
+  align-content: center;
+  border-radius: 50%;
+  display: grid;
+  height: 3rem;
+  justify-content: center;
+  overflow: hidden;
+  width: 3rem;
+}
+
+/* Footer logo */
+.footer-logo {
+  height: 4.7rem;
+  transform: translateY(0.2rem);
+}
+
+/* Contact dialog */
+.footer-contact-dialog > div > div {
+  width: 75vw;
+  height: 75vh;
+}
+
+.footer-contact-dialog > div > div > header {
+  margin-bottom: 0;
+}
+
+.footer-contact-dialog > div > div > iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/app/components/Footer/Footer.spec.tsx b/src/app/components/Footer/Footer.spec.tsx
index ec545d44d1..cbfda33aee 100644
--- a/src/app/components/Footer/Footer.spec.tsx
+++ b/src/app/components/Footer/Footer.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import * as redux from 'react-redux';
-import Footer, { ContactDialog, useContactDialog } from '.';
+import Footer, { ContactDialog, useContactDialog, getSafeRelAttribute } from '.';
 import TestContainer from '../../../test/TestContainer';
 import createTestStore from '../../../test/createTestStore';
 import { openKeyboardShortcutsMenu } from '../../content/keyboardShortcuts/actions';
@@ -12,6 +12,54 @@ import * as focusManager from '../../content/utils/focusManager';
 
 jest.mock('../../content/utils/focusManager');
 
+describe('getSafeRelAttribute', () => {
+  it('returns empty string when both target and rel are undefined', () => {
+    expect(getSafeRelAttribute(undefined, undefined)).toBe('');
+  });
+
+  it('returns rel as-is when target is not _blank', () => {
+    expect(getSafeRelAttribute('_self', 'external')).toBe('external');
+    expect(getSafeRelAttribute('_parent', 'nofollow')).toBe('nofollow');
+  });
+
+  it('adds noopener and noreferrer for target="_blank" with no rel', () => {
+    const result = getSafeRelAttribute('_blank', undefined);
+    const tokens = result.split(/\s+/).sort();
+    expect(tokens).toEqual(['noopener', 'noreferrer']);
+  });
+
+  it('adds noopener and noreferrer for target="_blank" with empty rel', () => {
+    const result = getSafeRelAttribute('_blank', '');
+    const tokens = result.split(/\s+/).sort();
+    expect(tokens).toEqual(['noopener', 'noreferrer']);
+  });
+
+  it('preserves existing rel tokens and adds noopener/noreferrer for target="_blank"', () => {
+    const result = getSafeRelAttribute('_blank', 'external nofollow');
+    const tokens = result.split(/\s+/).sort();
+    expect(tokens).toEqual(['external', 'nofollow', 'noopener', 'noreferrer']);
+  });
+
+  it('does not duplicate noopener/noreferrer if already present', () => {
+    const result = getSafeRelAttribute('_blank', 'noopener noreferrer external');
+    const tokens = result.split(/\s+/).sort();
+    expect(tokens).toEqual(['external', 'noopener', 'noreferrer']);
+  });
+
+  it('handles whitespace in rel attribute correctly', () => {
+    const result = getSafeRelAttribute('_blank', '  external   nofollow  ');
+    const tokens = result.split(/\s+/).sort();
+    expect(tokens).toEqual(['external', 'nofollow', 'noopener', 'noreferrer']);
+  });
+
+  it('ensures both noopener and noreferrer even when caller passes custom rel', () => {
+    const result = getSafeRelAttribute('_blank', 'external');
+    expect(result).toContain('noopener');
+    expect(result).toContain('noreferrer');
+    expect(result).toContain('external');
+  });
+});
+
 describe('Footer', () => {
   it('uses normal footer', () => {
     const state = {} as unknown as AppState;
@@ -50,8 +98,8 @@ describe('Footer', () => {
       <Footer />
     </TestContainer>);
 
-    const contactUsButton = component.root.findAllByType(require('./styled').FooterButton)
-      .find(button => button.props.children.props.id === 'i18n:footer:column1:contact-us')!;
+    // Find portal footer Contact Us button by data-testid
+    const contactUsButton = component.root.findByProps({ 'data-testid': 'portal-footer-contact-button' });
 
     renderer.act(() => {
       contactUsButton.props.onClick();
diff --git a/src/app/components/Footer/SocialIcons.tsx b/src/app/components/Footer/SocialIcons.tsx
new file mode 100644
index 0000000000..adc0ebb038
--- /dev/null
+++ b/src/app/components/Footer/SocialIcons.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components/macro';
+import RiceWhiteLogo from '../../../assets/rice-logo-white.png';
+import theme from '../../theme';
+
+// Constants
+export const fbUrl = 'https://www.facebook.com/openstax';
+export const twitterUrl = 'https://twitter.com/openstax';
+export const instagramUrl = 'https://www.instagram.com/openstax/';
+export const linkedInUrl = 'https://www.linkedin.com/company/openstax';
+export const riceUrl = 'http://www.rice.edu';
+
+// Icon components
+// These icons were migrated from styled-components in styled.tsx.
+// They remain as local SVG components so this module can apply consistent
+// inline sizing/styling via className and SVG attributes during the migration.
+// They are not exported for external styled-components component selector usage.
+// See PLAIN_CSS_MIGRATION_LEARNINGS.md for more details on the migration pattern.
+interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+  className?: string;
+}
+
+/**
+ * Facebook icon for social media links.
+ * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
+ */
+function FacebookIconBase({ className, ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 320 512"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
+      />
+    </svg>
+  );
+}
+
+const FBIcon = styled(FacebookIconBase)`
+  height: 1em;
+`;
+
+/**
+ * X (Twitter) icon for social media links.
+ * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
+ */
+function XTwitterBase({ className, ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      aria-hidden='true'
+      focusable='false'
+      data-prefix='fab'
+      data-icon='x-twitter'
+      role='img'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 512 512'
+      height='1em'
+      {...props}
+    >
+      <path
+        fill='currentColor'
+        d={
+          'M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5' +
+          ' 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'
+        }
+      ></path>
+    </svg>
+  );
+}
+
+const TwitterIcon = styled(XTwitterBase)`
+  height: 1em;
+`;
+
+/**
+ * Instagram icon for social media links.
+ * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
+ *
+ * Note: Wrapped with styled() to enable styled-components styling
+ */
+function InstagramIconBase({ className, ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 448 512"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+      />
+    </svg>
+  );
+}
+
+const IGIcon = styled(InstagramIconBase)`
+  height: 1em;
+`;
+
+/**
+ * LinkedIn icon for social media links.
+ * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
+ *
+ * Note: Wrapped with styled() to enable styled-components styling
+ */
+function LinkedInIconBase({ className, ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 448 512"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
+      />
+    </svg>
+  );
+}
+
+ const LinkedInIcon = styled(LinkedInIconBase)`
+  height: 1em;
+`;
+
+const SocialIconMessage: React.FunctionComponent<{
+  id: string;
+  href: string;
+  Icon: React.ComponentType;
+}> = ({ id, href, Icon }) => (
+  <li>
+    <a
+      className="footer-social-icon"
+      style={{
+        '--footer-social-icon-bg': theme.color.primary.gray.light,
+        '--footer-social-icon-color': '#fff',
+      } as React.CSSProperties}
+      aria-label={`OpenStax on ${useIntl().formatMessage({ id })}`}
+      href={href}
+      target='_blank'
+      rel="noopener noreferrer"
+    >
+      <Icon />
+    </a>
+  </li>
+);
+
+export const SocialDirectory = () => (
+  <menu className="footer-social">
+    <SocialIconMessage
+      id='i18n:footer:social:fb:alt'
+      href={fbUrl}
+      Icon={FBIcon}
+    />
+    <SocialIconMessage
+      id='i18n:footer:social:tw:alt'
+      href={twitterUrl}
+      Icon={TwitterIcon}
+    />
+    <SocialIconMessage
+      id='i18n:footer:social:in:alt'
+      href={linkedInUrl}
+      Icon={LinkedInIcon}
+    />
+    <SocialIconMessage
+      id='i18n:footer:social:ig:alt'
+      href={instagramUrl}
+      Icon={IGIcon}
+    />
+    <li>
+      <a className="footer-bottom-link" href={riceUrl} target='_blank' rel="noopener noreferrer">
+        <img
+          className="footer-logo"
+          src={RiceWhiteLogo}
+          alt={useIntl().formatMessage({
+            id: 'i18n:footer:social:rice-logo:alt',
+          })}
+        />
+      </a>
+    </li>
+  </menu>
+);
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index a0744fa90a..50dcd3516a 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -1,39 +1,60 @@
 import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
 import { useAnalyticsEvent } from '../../../helpers/analytics';
 import { openKeyboardShortcutsMenu as openKeyboardShortcutsMenuAction } from '../../content/keyboardShortcuts/actions';
-import RiceWhiteLogo from '../../../assets/rice-logo-white.png';
 import htmlMessage from '../../components/htmlMessage';
 import { isVerticalNavOpenConnector } from '../../content/components/utils/sidebar';
 import { State } from '../../content/types';
 import * as selectNavigation from '../../navigation/selectors';
 import * as guards from '../../guards';
-import * as Styled from './styled';
-import { MessageEvent } from '@openstax/types/lib.dom';
-import { useSelector } from 'react-redux';
 import { captureOpeningElement } from '../../content/utils/focusManager';
-import { useModalFocusManagement } from '../../content/hooks/useModalFocusManagement';
+import { ManageCookiesLink as RawCookiesLink } from '@openstax/ui-components';
+import { SocialDirectory } from './SocialIcons';
+import { ContactDialog, useContactDialog } from './ContactDialog';
+import { assertWindow } from '../../utils';
+import './Footer.css';
 
-const fbUrl = 'https://www.facebook.com/openstax';
-const twitterUrl = 'https://twitter.com/openstax';
-const instagramUrl = 'https://www.instagram.com/openstax/';
-const linkedInUrl = 'https://www.linkedin.com/company/openstax';
-const riceUrl = 'http://www.rice.edu';
+// Constants
 const copyrightLink = 'https://creativecommons.org/licenses/by/4.0/';
 export const supportCenterLink = 'https://help.openstax.org/s/';
 const systemStatusLink = 'https://status.openstax.org/';
 const newsletterLink = 'http://www2.openstax.org/l/218812/2016-10-04/lvk';
 
-const Mission = htmlMessage(
-  'i18n:footer:copyright:mission-text',
-  Styled.Mission
+/**
+ * Helper function to safely construct rel attribute for links.
+ * Ensures noopener and noreferrer are present for target="_blank" links
+ * to prevent reverse-tabnabbing and referrer leakage.
+ *
+ * @param target - The target attribute value
+ * @param rel - Optional existing rel attribute value
+ * @returns Normalized rel attribute string
+ */
+export function getSafeRelAttribute(target: string | undefined, rel: string | undefined): string {
+  // Normalize rel tokens and ensure safe defaults for links opened in a new tab
+  const relTokens = new Set((rel || '').split(/\s+/).filter(Boolean));
+
+  if (target === '_blank') {
+    relTokens.add('noopener');
+    relTokens.add('noreferrer');
+  }
+
+  return Array.from(relTokens).join(' ');
+}
+
+// Plain div wrappers for htmlMessage
+const MissionDiv = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={classNames('footer-mission', className)} {...props}>{children}</div>
 );
-const Copyrights = htmlMessage(
-  'i18n:footer:copyright:bottom-text',
-  Styled.Copyrights
+
+const CopyrightsDiv = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={classNames('footer-copyrights', className)} {...props}>{children}</div>
 );
 
+const Mission = htmlMessage('i18n:footer:copyright:mission-text', MissionDiv);
+const Copyrights = htmlMessage('i18n:footer:copyright:bottom-text', CopyrightsDiv);
+
 const BareMessage: React.FunctionComponent<{ id: string }> = ({ id }) => (
   <FormattedMessage id={id}>{msg => msg}</FormattedMessage>
 );
@@ -41,9 +62,9 @@ const BareMessage: React.FunctionComponent<{ id: string }> = ({ id }) => (
 const ColumnHeadingMessage: React.FunctionComponent<{ id: string }> = ({
   id,
 }) => (
-  <Styled.ColumnHeading>
+  <h3 className="footer-column-heading">
     <BareMessage id={id} />
-  </Styled.ColumnHeading>
+  </h3>
 );
 
 const FooterLinkMessage: React.FunctionComponent<{
@@ -51,36 +72,26 @@ const FooterLinkMessage: React.FunctionComponent<{
   href: string;
   target?: string;
   rel?: string;
-}> = ({ id, href, target, rel }) => (
-  <Styled.FooterLink
-    href={href}
-    target={target ? target : '_self'}
-    rel={rel ? rel : ''}
-  >
-    <BareMessage id={id} />
-  </Styled.FooterLink>
-);
+}> = ({ id, href, target, rel }) => {
+  const safeRel = getSafeRelAttribute(target, rel);
 
-const SocialIconMessage: React.FunctionComponent<{
-  id: string;
-  href: string;
-  Icon: React.ComponentType;
-}> = ({ id, href, Icon }) => (
-  <Styled.SocialIcon
-    aria-label={`OpenStax on ${useIntl().formatMessage({ id })}`}
-    href={href}
-    target='_blank'
-    rel='noopener'
-  >
-    <Icon />
-  </Styled.SocialIcon>
-);
+  return (
+    <a
+      className="footer-link"
+      href={href}
+      target={target || '_self'}
+      rel={safeRel}
+    >
+      <BareMessage id={id} />
+    </a>
+  );
+};
 
 function LinkList({ children }: React.PropsWithChildren<{}>) {
   return (
-    <Styled.LinkListWrapper>
+    <menu className="footer-link-list-wrapper">
       {React.Children.toArray(children).map((c, i) => <li key={i}>{c}</li>)}
-    </Styled.LinkListWrapper>
+    </menu>
   );
 }
 
@@ -88,8 +99,7 @@ const OpenKeyboardShortcutsLink = () => {
   const dispatch = useDispatch();
   const trackOpenCloseKS = useAnalyticsEvent('openCloseKeyboardShortcuts');
 
-  const openKeyboardShortcutsMenu = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  const openKeyboardShortcutsMenu = () => {
     captureOpeningElement('keyboardshortcuts');
     dispatch(openKeyboardShortcutsMenuAction());
     trackOpenCloseKS();
@@ -98,20 +108,21 @@ const OpenKeyboardShortcutsLink = () => {
   return (
     <FormattedMessage id='i18n:a11y:keyboard-shortcuts:heading'>
       {(txt) => (
-        <Styled.FooterButton
+        <button
+          className="footer-button"
           type="button"
           onClick={openKeyboardShortcutsMenu}
           data-testid="shortcut-link"
         >
           {txt}
-        </Styled.FooterButton>
+        </button>
       )}
     </FormattedMessage>
   );
 };
 
 const Column1 = () => (
-  <Styled.Column1>
+  <div className="footer-column footer-column-1">
     <ColumnHeadingMessage id='i18n:footer:column1:help' />
     <LinkList>
       <FooterLinkMessage href='/contact' id='i18n:footer:column1:contact-us' />
@@ -130,11 +141,11 @@ const Column1 = () => (
       />
       <OpenKeyboardShortcutsLink />
     </LinkList>
-  </Styled.Column1>
+  </div>
 );
 
 const Column2 = () => (
-  <Styled.Column2>
+  <div className="footer-column footer-column-2">
     <ColumnHeadingMessage id='i18n:footer:column2:openstax' />
     <LinkList>
       <FooterLinkMessage href='/press' id='i18n:footer:column2:press' />
@@ -146,11 +157,11 @@ const Column2 = () => (
       />
       <FooterLinkMessage href='/careers' id='i18n:footer:column2:careers' />
     </LinkList>
-  </Styled.Column2>
+  </div>
 );
 
 const Column3 = () => (
-  <Styled.Column3>
+  <div className="footer-column footer-column-3">
     <ColumnHeadingMessage id='i18n:footer:column3:policies' />
     <LinkList>
       <FooterLinkMessage
@@ -163,44 +174,11 @@ const Column3 = () => (
         href='/privacy-policy'
         id='i18n:footer:column3:privacy-policy'
       />
-      <Styled.ManageCookiesLink>
+      <RawCookiesLink className="footer-manage-cookies-link">
         <BareMessage id='i18n:footer:column3:manage-cookies' />
-      </Styled.ManageCookiesLink>
+      </RawCookiesLink>
     </LinkList>
-  </Styled.Column3>
-);
-
-const SocialDirectory = () => (
-  <Styled.Social>
-    <SocialIconMessage
-      id='i18n:footer:social:fb:alt'
-      href={fbUrl}
-      Icon={Styled.FBIcon}
-    />
-    <SocialIconMessage
-      id='i18n:footer:social:tw:alt'
-      href={twitterUrl}
-      Icon={Styled.TwitterIcon}
-    />
-    <SocialIconMessage
-      id='i18n:footer:social:in:alt'
-      href={linkedInUrl}
-      Icon={Styled.LinkedInIcon}
-    />
-    <SocialIconMessage
-      id='i18n:footer:social:ig:alt'
-      href={instagramUrl}
-      Icon={Styled.IGIcon}
-    />
-    <Styled.BottomLink href={riceUrl} target='_blank' rel='noopener'>
-      <Styled.FooterLogo
-        src={RiceWhiteLogo}
-        alt={useIntl().formatMessage({
-          id: 'i18n:footer:social:rice-logo:alt',
-        })}
-      />
-    </Styled.BottomLink>
-  </Styled.Social>
+  </div>
 );
 
 function getValues() {
@@ -215,137 +193,80 @@ const NormalFooter = ({
 }: {
   isVerticalNavOpen: State['tocOpen'];
 }) => (
-  <Styled.FooterWrapper
+  <footer
+    className={classNames('footer-wrapper', {
+      'footer-wrapper--vertical-nav-toolbar': isVerticalNavOpen === false,
+    })}
     data-analytics-region='footer'
-    isVerticalNavOpen={isVerticalNavOpen}
   >
-    <Styled.InnerFooter>
-      <Styled.FooterTop>
-        <Styled.TopBoxed>
-          <Styled.Heading>
+    <div className="footer-inner">
+      <div className="footer-top">
+        <div className="footer-top-boxed">
+          <h2 className="footer-heading">
             <BareMessage id='i18n:footer:heading' />
-          </Styled.Heading>
+          </h2>
           <Mission />
           <Column1 />
           <Column2 />
           <Column3 />
-        </Styled.TopBoxed>
-      </Styled.FooterTop>
-      <Styled.FooterBottom>
-        <Styled.BottomBoxed>
+        </div>
+      </div>
+      <div className="footer-bottom">
+        <div className="footer-bottom-boxed">
           <Copyrights values={getValues()} />
           <SocialDirectory />
-        </Styled.BottomBoxed>
-      </Styled.FooterBottom>
-    </Styled.InnerFooter>
-  </Styled.FooterWrapper>
+        </div>
+      </div>
+    </div>
+  </footer>
 );
 
 const PortalColumn1 = () => (
-  <Styled.Column1>
+  <div className="footer-column footer-column-1">
     <Copyrights values={getValues()} />
-  </Styled.Column1>
+  </div>
 );
 
-export function ContactDialog({
-  isOpen,
-  close,
-  contactFormParams,
-  className,
-}: {
-  isOpen: boolean;
-  close: () => void;
-  contactFormParams?: { key: string; value: string }[];
-  className?: string;
-}) {
-  const contactFormUrl = React.useMemo(() => {
-    const formUrl = '/embedded/contact';
-
-    if (contactFormParams !== undefined) {
-      const params = contactFormParams
-        .map(({ key, value }) => encodeURIComponent(`${key}=${value}`))
-        .map((p) => `body=${p}`)
-        .join('&');
-
-      return `${formUrl}?${params}`;
-    }
-
-    return formUrl;
-  }, [contactFormParams]);
-  const { closeButtonRef } = useModalFocusManagement({ modalId: 'contactdialog', isOpen });
-
-  return !isOpen ? null : (
-    <Styled.ContactDialog
-      className={className}
-      onModalClose={close}
-      heading='i18n:footer:column1:contact-us'
-      closeButtonRef={closeButtonRef}
-    >
-      <iframe id='contact-us' title='contact-us' src={contactFormUrl} />
-    </Styled.ContactDialog>
-  );
-}
-
-export function useContactDialog() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const open = React.useCallback(() => setIsOpen(true), [setIsOpen]);
-  const close = React.useCallback(() => setIsOpen(false), [setIsOpen]);
-
-  React.useEffect(
-    () => {
-      const win = window;
-
-      const closeOnSubmit = ({ data }: MessageEvent) => {
-        if (data === 'CONTACT_FORM_SUBMITTED') {
-          close();
-        }
-      };
-
-      win?.addEventListener('message', closeOnSubmit);
-      return () => win?.removeEventListener('message', closeOnSubmit);
-    },
-    [close]
-  );
-
-  return { isOpen, open, close };
-}
-
 const PortalColumn2 = ({ portalName }: { portalName: string }) => {
   const { isOpen, open, close } = useContactDialog();
   const contactFormParams = [
-    { key: 'source_url', value: window?.location.href },
+    { key: 'source_url', value: assertWindow('Footer is browser-only').location.href },
   ].filter((p): p is { key: string; value: string } => !!p.value);
 
   return (
-    <Styled.Column2>
+    <div className="footer-column footer-column-2">
       <LinkList>
-        <Styled.FooterButton onClick={() => {
-          captureOpeningElement('contactdialog');
-          open();
-        }}>
+        <button
+          className="footer-button"
+          data-testid="portal-footer-contact-button"
+          onClick={() => {
+            captureOpeningElement('contactdialog');
+            open();
+          }}
+        >
           <BareMessage id='i18n:footer:column1:contact-us' />
-        </Styled.FooterButton>
+        </button>
         <FooterLinkMessage href={`/${portalName}/tos`} id='i18n:footer:column3:terms' />
         <FooterLinkMessage href={`/${portalName}/privacy-policy`} id='i18n:footer:column3:privacy-policy' />
       </LinkList>
       <ContactDialog isOpen={isOpen} contactFormParams={contactFormParams} close={close} />
-    </Styled.Column2>
+    </div>
   );
 };
 
 const PortalColumn3 = ({ portalName }: { portalName: string }) => (
-  <Styled.Column3>
+  <div className="footer-column footer-column-3">
     <LinkList>
       <FooterLinkMessage
         href={`/${portalName}/accessibility-statement`}
         id='i18n:footer:column3:accessibility'
       />
       <FooterLinkMessage href={`/${portalName}/license`} id='i18n:footer:column3:license' />
-      <Styled.ManageCookiesFlexLink>
+      <RawCookiesLink className="footer-manage-cookies-flex-link">
         <BareMessage id='i18n:footer:column3:manage-cookies' />
-      </Styled.ManageCookiesFlexLink>
+      </RawCookiesLink>
     </LinkList>
-  </Styled.Column3>
+  </div>
 );
 
 const PortalFooter = ({
@@ -356,21 +277,23 @@ const PortalFooter = ({
   portalName: string;
 }) => {
   return (
-    <Styled.FooterWrapper
+    <footer
+      className={classNames('footer-wrapper', {
+        'footer-wrapper--vertical-nav-toolbar': isVerticalNavOpen === false,
+      })}
       data-analytics-region='footer'
       data-testid='portal-footer'
-      isVerticalNavOpen={isVerticalNavOpen}
     >
-      <Styled.InnerFooter>
-        <Styled.FooterBottom>
-          <Styled.PortalBottomBoxed>
+      <div className="footer-inner">
+        <div className="footer-bottom">
+          <div className="footer-portal-bottom-boxed">
             <PortalColumn1 />
             <PortalColumn2 portalName={portalName} />
             <PortalColumn3 portalName={portalName} />
-          </Styled.PortalBottomBoxed>
-        </Styled.FooterBottom>
-      </Styled.InnerFooter>
-    </Styled.FooterWrapper>
+          </div>
+        </div>
+      </div>
+    </footer>
   );
 };
 
@@ -388,3 +311,6 @@ const Footer = ({
 };
 
 export default isVerticalNavOpenConnector(Footer);
+
+// Re-export for backward compatibility with existing tests
+export { ContactDialog, useContactDialog };
diff --git a/src/app/components/Footer/styled.tsx b/src/app/components/Footer/styled.tsx
deleted file mode 100644
index 781a52b811..0000000000
--- a/src/app/components/Footer/styled.tsx
+++ /dev/null
@@ -1,492 +0,0 @@
-import { ManageCookiesLink as RawCookiesLink } from '@openstax/ui-components';
-import React from 'react';
-import styled, { css } from 'styled-components/macro';
-import { textRegularSize, textRegularStyle } from '../../components/Typography';
-import {
-  contentWrapperMaxWidth,
-  toolbarWidth,
-  verticalNavbarMaxWidth,
-} from '../../content/components/constants';
-import { disablePrint } from '../../content/components/utils/disablePrint';
-import theme from '../../theme';
-import { remsToEms } from '../../utils';
-import Modal from '../Modal';
-
-const desktopMinWidth = '37.6';
-const mobileMaxWidth = '60.1';
-const mobileMinWidth = '37.5';
-const textColor = '#d5d5d5';
-
-const columnLink = css`
-  color: ${textColor};
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: inherit;
-  }
-`;
-
-export const iconStyles = css`
-  height: 1em;
-`;
-
-interface IconProps extends React.SVGAttributes<SVGSVGElement> {
-  className?: string;
-}
-
-/**
- * Facebook icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components styling
- */
-function FacebookIconBase({ className, ...props }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 320 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
-      />
-    </svg>
-  );
-}
-
-export const FBIcon = styled(FacebookIconBase)`
-  ${iconStyles}
-`;
-
-/**
- * X (Twitter) icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- */
-function XTwitter() {
-  return (
-    <svg
-      aria-hidden='true'
-      focusable='false'
-      data-prefix='fab'
-      data-icon='x-twitter'
-      role='img'
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 512 512'
-      className='svg-inline--fa fa-x-twitter'
-      height='1em'
-    >
-      <path
-        fill='currentColor'
-        d={
-          'M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5' +
-          ' 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'
-        }
-      ></path>
-    </svg>
-  );
-}
-
-export const TwitterIcon = XTwitter;
-
-/**
- * Instagram icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components styling
- */
-function InstagramIconBase({ className, ...props }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 448 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-      />
-    </svg>
-  );
-}
-
-export const IGIcon = styled(InstagramIconBase)`
-  ${iconStyles}
-`;
-
-/**
- * LinkedIn icon for social media links.
- * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components styling
- */
-function LinkedInIconBase({ className, ...props }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 448 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
-      />
-    </svg>
-  );
-}
-
-export const LinkedInIcon = styled(LinkedInIconBase)`
-  ${iconStyles}
-`;
-
-const boxedMargin = 1.5;
-export const boxed = css`
-  max-width: ${contentWrapperMaxWidth + boxedMargin * 2}rem;
-  align-items: center;
-  display: flex;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: ${boxedMargin}rem;
-  padding-right: ${boxedMargin}rem;
-  width: 100%;
-`;
-
-const contentWrapperAndNavWidthBreakpoint = `(max-width: ${remsToEms(
-  contentWrapperMaxWidth + verticalNavbarMaxWidth * 2
-)}em)`;
-
-const verticalNavToolbarStyling = css`
-  @media (min-width: ${theme.breakpoints.desktopBreak}em) and ${contentWrapperAndNavWidthBreakpoint} {
-    padding-left:
-      clamp(
-        0rem,
-        calc(${toolbarWidth}rem - (100vw - ${contentWrapperMaxWidth}rem) / 2),
-        ${toolbarWidth}rem
-      );
-  }
-`;
-
-export const FooterWrapper = styled.footer`
-  ${textRegularStyle}
-  z-index: 0;
-  opacity: 1;
-  transition: opacity 0.2s;
-  ${disablePrint}
-  ${props =>
-    props.isVerticalNavOpen === false ? verticalNavToolbarStyling : ''}
-`;
-
-export const InnerFooter = styled.div`
-  color: ${textColor};
-  display: grid;
-`;
-
-export const FooterTop = styled.div`
-  background-color: #424242;
-
-  @media (min-width: ${mobileMaxWidth}em) {
-    padding: 7rem 0;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    padding: 2rem 0;
-  }
-
-  @media (max-width: ${mobileMaxWidth}em) and (min-width: ${desktopMinWidth}em) {
-    padding: 4rem 0;
-  }
-`;
-
-export const TopBoxed = styled.div`
-  ${boxed}
-  display: grid;
-  grid-row-gap: 2rem;
-  overflow: visible;
-
-  @media (min-width: ${desktopMinWidth}em) {
-    align-items: start;
-    grid-column-gap: 4rem;
-    grid-template:
-      "headline col1 col2 col3" "mission col1 col2 col3" / minmax(auto, 50rem)
-      auto auto auto;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    grid-template: "headline" "mission" "col1" "col2" "col3";
-  }
-
-  @media (min-width: ${mobileMaxWidth}em) {
-    grid-column-gap: 8rem;
-  }
-`;
-
-export const Heading = styled.h2`
-  grid-area: headline;
-  margin: 0;
-
-  @media (min-width: ${desktopMinWidth}em) {
-    font-size: 2.4rem;
-    font-weight: bold;
-    letter-spacing: -0.096rem;
-    line-height: normal;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    font-size: 2rem;
-    font-weight: bold;
-    letter-spacing: -0.08rem;
-    line-height: normal;
-  }
-`;
-
-const DonateLink = css`
-  ${columnLink}
-  font-weight: bold;
-  text-underline-position: under;
-`;
-
-export const Mission = styled.div`
-  grid-area: mission;
-
-  @media (min-width: ${desktopMinWidth}em) {
-    font-size: 1.8rem;
-    font-weight: normal;
-    letter-spacing: normal;
-    line-height: 3rem;
-  }
-
-  a {
-    ${DonateLink}
-  }
-`;
-
-export const footerLinkStyle = css`
-  ${columnLink}
-  text-decoration: none;
-
-  :hover {
-    text-decoration: underline;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    line-height: 4.5rem;
-  }
-`;
-
-export const FooterLink = styled.a`
-  ${footerLinkStyle}
-`;
-
-export const ManageCookiesLink = styled(RawCookiesLink)`
-  && {
-    ${textRegularStyle}
-    ${footerLinkStyle}
-    text-align: left;
-  }
-`;
-
-const flexFooterLinkStyle = css`
-  ${footerLinkStyle}
-  font-size: inherit;
-  cursor: pointer;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-`;
-
-export const FooterButton = styled.button`
-  ${flexFooterLinkStyle}
-`;
-
-export const ManageCookiesFlexLink = styled(RawCookiesLink)`
-  ${flexFooterLinkStyle}
-`;
-
-export const ContactDialog = styled(Modal)`
-  & > div > div {
-    width: 75vw;
-    height: 75vh;
-
-    & > header {
-      margin-bottom: 0;
-    }
-
-    & > iframe {
-      border: none;
-      width: 100%;
-      height: 100%;
-    }
-  }
-`;
-
-const InnerBottomLink = styled.a`
-  ${columnLink}
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-column-gap: 0.7rem;
-  overflow: hidden;
-`;
-
-export function BottomLink(props: React.AnchorHTMLAttributes<unknown>) {
-  return (
-    <li>
-      <InnerBottomLink {...props} />
-    </li>
-  );
-}
-
-export const column = css`
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-`;
-
-export const Column1 = styled.div`
-  ${column}
-  grid-area: col1;
-`;
-
-export const Column2 = styled.div`
-  ${column}
-  grid-area: col2;
-`;
-
-export const Column3 = styled.div`
-  ${column}
-  grid-area: col3;
-`;
-
-export const ColumnHeading = styled.h3`
-  font-size: 1.8rem;
-  font-weight: bold;
-  letter-spacing: -0.072rem;
-  line-height: normal;
-  margin: 0;
-
-  @media (max-width: ${mobileMinWidth}em) {
-    line-height: 4.5rem;
-  }
-`;
-
-export const FooterBottom = styled.div`
-  font-size: 1.2rem;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  background-color: #3b3b3b;
-
-  @media (min-width: ${desktopMinWidth}em) {
-    padding: 2.5rem 0;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    padding: 1.5rem;
-  }
-`;
-
-export const BottomBoxed = styled.div`
-  ${boxed}
-  display: grid;
-  grid-gap: 1.5rem 4rem;
-  overflow: visible;
-
-  @media (min-width: ${desktopMinWidth}em) {
-    grid-auto-flow: column;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    padding: 0;
-  }
-`;
-
-export const PortalBottomBoxed = styled.div`
-  ${boxed}
-  display: grid;
-  grid-gap: 1.5rem 4rem;
-  overflow: visible;
-  align-items: start;
-
-  @media (min-width: ${desktopMinWidth}em) {
-    grid-template: "col1 col2 col3" / minmax(auto, 70rem) auto auto;
-  }
-
-  @media (max-width: ${mobileMinWidth}em) {
-    padding: 0;
-    grid-template:
-      "col1"
-      "col2"
-      "col3";
-  }
-`;
-
-export const Copyrights = styled.div`
-  display: grid;
-  grid-gap: 1rem;
-  overflow: visible;
-
-  [data-html="copyright"] {
-    overflow: visible;
-  }
-
-  a {
-    ${columnLink}
-    overflow: visible;
-  }
-
-  sup {
-    font-size: 66%;
-    margin-left: 0.1rem;
-    position: relative;
-    top: -0.25em;
-    vertical-align: top;
-  }
-`;
-
-export const Social = styled.menu`
-  align-items: center;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 1rem;
-  justify-content: end;
-  list-style: none;
-  overflow: visible;
-`;
-
-export const LinkListWrapper = styled.menu`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style: none;
-`;
-
-const InnerSocialIcon = styled.a`
-  ${textRegularSize}
-  background-color: ${theme.color.primary.gray.light};
-  color: #fff;
-  align-content: center;
-  border-radius: 50%;
-  display: grid;
-  height: 3rem;
-  justify-content: center;
-  overflow: hidden;
-  width: 3rem;
-`;
-
-export function SocialIcon(props: React.AnchorHTMLAttributes<unknown>) {
-  return (
-    <li>
-      <InnerSocialIcon {...props} />
-    </li>
-  );
-}
-
-export const FooterLogo = styled.img`
-  height: 4.7rem;
-  transform: translateY(0.2rem);
-`;
diff --git a/src/app/components/NavBar/NavBar.css b/src/app/components/NavBar/NavBar.css
new file mode 100644
index 0000000000..8775efc2ae
--- /dev/null
+++ b/src/app/components/NavBar/NavBar.css
@@ -0,0 +1,232 @@
+/* NavBar Component Styles - Migrated from styled-components to plain CSS */
+
+/* Keyframe animations */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* BarWrapper - Main navbar container */
+.navbar-bar-wrapper {
+  overflow: visible;
+  z-index: var(--navbar-z-index, 30);
+  background: var(--navbar-bg, #fff);
+  position: relative;
+  padding: 0 var(--navbar-padding-desktop, 3.2rem);
+  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+
+@media print {
+  .navbar-bar-wrapper {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 75em) {
+  .navbar-bar-wrapper {
+    padding: 0 var(--navbar-padding-mobile, 1.6rem);
+  }
+}
+
+/* TopBar - Inner navbar container with flex layout */
+.navbar-topbar {
+  overflow: visible;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--navbar-desktop-height, 6rem);
+  max-width: var(--navbar-max-width, 128rem);
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 75em) {
+  .navbar-topbar {
+    height: var(--navbar-mobile-height, 5.2rem);
+  }
+}
+
+@media print {
+  .navbar-topbar {
+    display: none;
+  }
+}
+
+/* HeaderImage - Logo image */
+.navbar-header-image {
+  display: block;
+  width: auto;
+  height: 3.5rem;
+}
+
+@media screen and (max-width: 75em) {
+  .navbar-header-image {
+    height: 2.8rem;
+  }
+}
+
+/* Link - Login/nav links */
+.navbar-link {
+  display: block;
+  letter-spacing: -0.072rem;
+  font-size: 1.8rem;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 1rem 0 0.6rem 0;
+  color: var(--nav-text-color, #5e6062);
+  animation: 100ms fadeIn ease-out;
+  border-bottom: 0.4rem solid transparent;
+}
+
+.navbar-link:hover,
+.navbar-link:active,
+.navbar-link:focus {
+  color: var(--nav-text-hover, #424242);
+  border-bottom-color: var(--nav-border-color, #63a524);
+}
+
+@media screen and (max-width: 75em) {
+  .navbar-link {
+    font-size: 1.4rem;
+    letter-spacing: 0.02rem;
+    padding: 0.7rem 0;
+    border-bottom-color: transparent;
+  }
+
+  .navbar-link:hover,
+  .navbar-link:active,
+  .navbar-link:focus {
+    border-bottom-color: transparent;
+  }
+}
+
+/* DropdownContainer - User profile dropdown container */
+.navbar-dropdown-container {
+  animation: 100ms fadeIn ease-out;
+  overflow: visible;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+@media screen and (max-width: 75em) {
+  .navbar-dropdown-container {
+    height: auto;
+  }
+}
+
+/* Mobile Menu Overlay */
+.navbar-mobile-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--mobile-overlay-bg, rgba(255, 255, 255, 0.98));
+  z-index: var(--mobile-overlay-z-index, 31);
+}
+
+/* Mobile Menu Modal */
+.navbar-mobile-menu-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  outline: none;
+}
+
+.navbar-mobile-menu-modal [role="dialog"] {
+  outline: none;
+}
+
+/* Dropdown Overlay - Mobile menu content */
+.navbar-dropdown-overlay {
+  padding-top: calc(20vh + 5vw);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: visible;
+}
+
+.navbar-dropdown-overlay > div {
+  width: min-content;
+  overflow: visible;
+}
+
+/* Overlay Logo */
+.navbar-overlay-logo {
+  width: auto;
+  height: 2.8rem;
+  position: absolute;
+  left: 1.6rem;
+  top: 1.2rem; /* (navMobileHeight - headerImageMobileHeight) / 2 = (5.2 - 2.8) / 2 = 1.2rem */
+}
+
+/* Overlay Heading */
+.navbar-overlay-heading {
+  font-size: 1.8rem;
+  font-weight: bold;
+  letter-spacing: -0.072rem;
+  line-height: 3rem;
+  color: var(--nav-text-color, #5f6163);
+  padding-bottom: 0;
+  margin: 0;
+}
+
+/* Dropdown List - Menu items */
+.navbar-dropdown-list {
+  margin: 0;
+  padding: 0.6rem 0;
+  background: none;
+}
+
+.navbar-dropdown-list > li {
+  overflow: visible;
+  display: block;
+}
+
+.navbar-dropdown-list > li a {
+  overflow: visible;
+  white-space: nowrap;
+  display: block;
+  padding: 0 1rem;
+  font-size: 1.6rem;
+  font-weight: normal;
+  letter-spacing: -0.032rem;
+  line-height: 2.4rem;
+  color: var(--nav-text-color, #5f6163);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.navbar-dropdown-list > li a:hover {
+  color: var(--link-hover, #0064a0);
+}
+
+.navbar-dropdown-list > li a:focus-visible {
+  outline: 0.2rem solid var(--focus-outline-color, #007297);
+  outline-offset: 0.2rem;
+}
+
+/* TimesIcon - Close button for mobile menu */
+.navbar-times-icon {
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  background: none;
+  position: absolute;
+  height: 5.2rem;
+  width: 5.2rem;
+  top: 0;
+  right: 0;
+  color: var(--nav-text-color, #5f6163);
+}
diff --git a/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap b/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap
index 7b8b452227..e384cb09a5 100644
--- a/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap
+++ b/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`content in browser assignable user renders 1`] = `
-.c4 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,22 +25,22 @@ exports[`content in browser assignable user renders 1`] = `
   cursor: pointer;
 }
 
-.c4:hover {
+.c0:hover {
   box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
-.c4[data-focused],
-.c4[data-focus-visible] {
+.c0[data-focused],
+.c0[data-focus-visible] {
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   outline-offset: 0.2rem;
 }
 
-.c4 svg {
+.c0 svg {
   width: 1.5rem;
 }
 
-.c4 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64,245 +64,38 @@ exports[`content in browser assignable user renders 1`] = `
   cursor: pointer;
 }
 
-.c4:hover {
+.c0:hover {
   box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
-.c4[data-focused],
-.c4[data-focus-visible] {
+.c0[data-focused],
+.c0[data-focus-visible] {
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   outline-offset: 0.2rem;
 }
 
-.c4 svg {
+.c0 svg {
   width: 1.5rem;
 }
 
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c3 {
-  -webkit-animation: 100ms bcCCNc ease-out;
-  animation: 100ms bcCCNc ease-out;
-  overflow: visible;
-  position: relative;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 {
-  -webkit-animation: 100ms bcCCNc ease-out;
-  animation: 100ms bcCCNc ease-out;
-  overflow: visible;
-  position: relative;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c3 {
-    height: auto;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c3 {
-    height: auto;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
 <div
-  className="c0"
+  className="navbar-bar-wrapper"
   data-analytics-region="openstax-navbar"
+  style={
+    Object {
+      "--navbar-bg": "#fff",
+      "--navbar-desktop-height": "6rem",
+      "--navbar-max-width": "128rem",
+      "--navbar-mobile-height": "5.2rem",
+      "--navbar-padding-desktop": "3.2rem",
+      "--navbar-padding-mobile": "1.6rem",
+      "--navbar-z-index": 70,
+    }
+  }
 >
   <div
-    className="c1"
+    className="navbar-topbar"
     data-testid="navbar"
   >
     <a
@@ -311,20 +104,19 @@ exports[`content in browser assignable user renders 1`] = `
     >
       <img
         alt="OpenStax Logo"
-        className="c2"
-        role="img"
+        className="navbar-header-image"
         src="logo.svg"
       />
     </a>
     <div
-      className="c3"
+      className="navbar-dropdown-container"
       data-testid="user-nav"
     >
       <button
         aria-expanded={false}
         aria-haspopup={true}
         aria-label="Account actions"
-        className="c4"
+        className="c0"
         data-rac=""
         data-react-aria-pressable={true}
         data-testid="user-nav-toggle"
@@ -363,1047 +155,145 @@ exports[`content in browser assignable user renders 1`] = `
 `;
 
 exports[`content in browser matches snapshot for logged out 1`] = `
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
+<div
+  className="navbar-bar-wrapper"
+  data-analytics-region="openstax-navbar"
+  style={
+    Object {
+      "--navbar-bg": "#fff",
+      "--navbar-desktop-height": "6rem",
+      "--navbar-max-width": "128rem",
+      "--navbar-mobile-height": "5.2rem",
+      "--navbar-padding-desktop": "3.2rem",
+      "--navbar-padding-mobile": "1.6rem",
+      "--navbar-z-index": 70,
+    }
+  }
+>
+  <div
+    className="navbar-topbar"
+    data-testid="navbar"
+  >
+    <a
+      href="/"
+      onClick={[Function]}
+    >
+      <img
+        alt="OpenStax Logo"
+        className="navbar-header-image"
+        src="logo.svg"
+      />
+    </a>
+    <a
+      className="navbar-link"
+      data-analytics-label="login"
+      data-testid="nav-login"
+      href="/accounts/login?r=/"
+      style={
+        Object {
+          "--nav-border-color": "#63a524",
+          "--nav-text-color": "#5e6062",
+          "--nav-text-hover": "#424242",
+        }
+      }
+    >
+      Log in
+    </a>
+  </div>
+</div>
+`;
 
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
+exports[`content in browser matches snapshot for null state 1`] = `
+<div
+  className="navbar-bar-wrapper"
+  data-analytics-region="openstax-navbar"
+  style={
+    Object {
+      "--navbar-bg": "#fff",
+      "--navbar-desktop-height": "6rem",
+      "--navbar-max-width": "128rem",
+      "--navbar-mobile-height": "5.2rem",
+      "--navbar-padding-desktop": "3.2rem",
+      "--navbar-padding-mobile": "1.6rem",
+      "--navbar-z-index": 70,
+    }
+  }
+>
+  <div
+    className="navbar-topbar"
+    data-testid="navbar"
+  >
+    <a
+      href="/"
+      onClick={[Function]}
+    >
+      <img
+        alt="OpenStax Logo"
+        className="navbar-header-image"
+        src="logo.svg"
+      />
+    </a>
+  </div>
+</div>
+`;
 
-.c1 {
-  overflow: visible;
+exports[`content in browser when logged in matches snapshot 1`] = `
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  border: none;
+  line-height: 1.6rem;
+  font-size: 1.4rem;
+  color: #ffffff;
+  background-color: #007297;
+  cursor: pointer;
 }
 
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
+.c0:hover {
+  box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
 }
 
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
+.c0[data-focused],
+.c0[data-focus-visible] {
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  outline-offset: 0.2rem;
 }
 
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c3 {
-  -webkit-animation: 100ms bcCCNc ease-out;
-  animation: 100ms bcCCNc ease-out;
-  display: block;
-  -webkit-letter-spacing: -0.072rem;
-  -moz-letter-spacing: -0.072rem;
-  -ms-letter-spacing: -0.072rem;
-  letter-spacing: -0.072rem;
-  font-size: 1.8rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-weight: bold;
-  padding: 1rem 0;
-  color: #5e6062;
-}
-
-.c3:hover,
-.c3:active,
-.c3:focus {
-  padding-bottom: 0.6rem;
-  border-bottom: 0.4rem solid #63a524;
-}
-
-.c3:hover {
-  color: #424242;
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c3 {
-    font-size: 1.4rem;
-    -webkit-letter-spacing: 0.02rem;
-    -moz-letter-spacing: 0.02rem;
-    -ms-letter-spacing: 0.02rem;
-    letter-spacing: 0.02rem;
-    padding: 0.7rem 0;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c3:hover,
-  .c3:active,
-  .c3:focus {
-    padding: 0.7rem 0;
-    border-bottom: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
+.c0 svg {
+  width: 1.5rem;
 }
 
 <div
-  className="c0"
+  className="navbar-bar-wrapper"
   data-analytics-region="openstax-navbar"
->
-  <div
-    className="c1"
-    data-testid="navbar"
-  >
-    <a
-      href="/"
-      onClick={[Function]}
-    >
-      <img
-        alt="OpenStax Logo"
-        className="c2"
-        role="img"
-        src="logo.svg"
-      />
-    </a>
-    <a
-      className="c3"
-      data-analytics-label="login"
-      data-testid="nav-login"
-      href="/accounts/login?r=/"
-    >
-       
-      Log in
-    </a>
-  </div>
-</div>
-`;
-
-exports[`content in browser matches snapshot for null state 1`] = `
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
+  style={
+    Object {
+      "--navbar-bg": "#fff",
+      "--navbar-desktop-height": "6rem",
+      "--navbar-max-width": "128rem",
+      "--navbar-mobile-height": "5.2rem",
+      "--navbar-padding-desktop": "3.2rem",
+      "--navbar-padding-mobile": "1.6rem",
+      "--navbar-z-index": 70,
+    }
   }
-}
-
-<div
-  className="c0"
-  data-analytics-region="openstax-navbar"
->
-  <div
-    className="c1"
-    data-testid="navbar"
-  >
-    <a
-      href="/"
-      onClick={[Function]}
-    >
-      <img
-        alt="OpenStax Logo"
-        className="c2"
-        role="img"
-        src="logo.svg"
-      />
-    </a>
-  </div>
-</div>
-`;
-
-exports[`content in browser when logged in matches snapshot 1`] = `
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  border-radius: 50%;
-  border: none;
-  line-height: 1.6rem;
-  font-size: 1.4rem;
-  color: #ffffff;
-  background-color: #007297;
-  cursor: pointer;
-}
-
-.c4:hover {
-  box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3);
-}
-
-.c4[data-focused],
-.c4[data-focus-visible] {
-  outline: 0.2rem auto Highlight;
-  outline: 0.2rem auto -webkit-focus-ring-color;
-  outline-offset: 0.2rem;
-}
-
-.c4 svg {
-  width: 1.5rem;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c3 {
-  -webkit-animation: 100ms bcCCNc ease-out;
-  animation: 100ms bcCCNc ease-out;
-  overflow: visible;
-  position: relative;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c3 {
-    height: auto;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-<div
-  className="c0"
-  data-analytics-region="openstax-navbar"
 >
   <div
-    className="c1"
+    className="navbar-topbar"
     data-testid="navbar"
   >
     <a
@@ -1412,20 +302,19 @@ exports[`content in browser when logged in matches snapshot 1`] = `
     >
       <img
         alt="OpenStax Logo"
-        className="c2"
-        role="img"
+        className="navbar-header-image"
         src="logo.svg"
       />
     </a>
     <div
-      className="c3"
+      className="navbar-dropdown-container"
       data-testid="user-nav"
     >
       <button
         aria-expanded={false}
         aria-haspopup={true}
         aria-label="Account actions"
-        className="c4"
+        className="c0"
         data-rac=""
         data-react-aria-pressable={true}
         data-testid="user-nav-toggle"
diff --git a/src/app/components/NavBar/constants.ts b/src/app/components/NavBar/constants.ts
new file mode 100644
index 0000000000..07e84f696f
--- /dev/null
+++ b/src/app/components/NavBar/constants.ts
@@ -0,0 +1,5 @@
+import { contentWrapperMaxWidth } from '../../content/components/constants';
+
+export const maxNavWidth = contentWrapperMaxWidth;
+export const navDesktopHeight = 6.0;
+export const navMobileHeight = 5.2;
diff --git a/src/app/components/NavBar/index.tsx b/src/app/components/NavBar/index.tsx
index 9d7892935e..515334230c 100644
--- a/src/app/components/NavBar/index.tsx
+++ b/src/app/components/NavBar/index.tsx
@@ -1,22 +1,27 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Dialog } from 'react-aria-components';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Dialog, ModalOverlay, Modal } from 'react-aria-components';
 import { ProfileMenu, ProfileMenuButton, ProfileMenuItem, UserIcon } from '@openstax/ui-components';
+import Color from 'color';
 import openstaxLogo from '../../../assets/logo.svg';
 import * as authSelect from '../../auth/selectors';
 import * as selectHighlights from '../../content/highlights/selectors';
 import { User } from '../../auth/types';
 import * as selectNavigation from '../../navigation/selectors';
 import { AppState } from '../../types';
-import * as Styled from './styled';
 import * as guards from '../../guards';
 import showConfirmation from '../../content/highlights/components/utils/showConfirmation';
 import { useServices } from '../../context/Services';
 import { assertWindow } from '../../utils';
 import { useMatchMobileQuery } from '../../reactUtils';
+import theme from '../../theme';
+import Times from '../Times';
+import { linkHover, linkFocusOutline } from '../Typography/Links.constants';
+import { maxNavWidth, navDesktopHeight, navMobileHeight } from './constants';
+import './NavBar.css';
 
-export { maxNavWidth, navDesktopHeight, navMobileHeight } from './styled';
+export { maxNavWidth, navDesktopHeight, navMobileHeight };
 
 if (typeof(window) !== 'undefined') {
   import(/* webpackChunkName: "focus-within-polyfill" */ 'focus-within-polyfill');
@@ -44,27 +49,56 @@ export const MobileDropdown: FunctionComponent<{
   onAction: (key: React.Key) => void
 }> = ({user, currentPath, isOpen, onOpenChange, onAction}) => {
   const intl = useIntl();
+  const mobileOverlayBg = Color(theme.color.neutral.base).alpha(0.98).string();
 
   return (
-    <Styled.MobileMenuOverlay isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Styled.MobileMenuModal>
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      className="navbar-mobile-menu-overlay"
+      style={{
+        '--mobile-overlay-bg': mobileOverlayBg,
+        '--mobile-overlay-z-index': theme.zIndex.navbar + 1,
+      } as React.CSSProperties}
+    >
+      <Modal className="navbar-mobile-menu-modal">
         <Dialog aria-label={intl.formatMessage({ id: 'i18n:nav:hello:text' }, { name: user.firstName })}>
-          <Styled.DropdownOverlay data-testid='nav-overlay'>
+          <div
+            className="navbar-dropdown-overlay"
+            data-testid='nav-overlay'
+            style={{
+              '--nav-text-color': theme.color.primary.gray.base,
+              '--link-hover': linkHover,
+              '--focus-outline-color': linkFocusOutline,
+            } as React.CSSProperties}
+          >
             <a aria-hidden='true' tabIndex={-1} href='/'>
-              <Styled.OverlayLogo
+              <img
                 src={openstaxLogo}
                 alt={intl.formatMessage({ id: 'i18n:nav:logo:alt' })}
+                className="navbar-overlay-logo"
               />
             </a>
-            <Styled.TimesIcon onClick={() => onOpenChange(false)} />
+            <button
+              type="button"
+              aria-label='close menu'
+              onClick={() => onOpenChange(false)}
+              className="navbar-times-icon"
+            >
+              <Times />
+            </button>
             <div>
               <FormattedMessage
                 id='i18n:nav:hello:text'
                 values={{ name: user.firstName }}
               >
-                {msg => <Styled.OverlayHeading>{msg}</Styled.OverlayHeading>}
+                {msg => <h4 className="navbar-overlay-heading">{msg}</h4>}
               </FormattedMessage>
-              <Styled.DropdownList id='dropdown-menu' role='menu'>
+              <menu
+                id='dropdown-menu'
+                role='menu'
+                className="navbar-dropdown-list"
+              >
                 <li role='presentation'>
                   <FormattedMessage id='i18n:nav:profile:text'>
                     {msg => (
@@ -99,12 +133,12 @@ export const MobileDropdown: FunctionComponent<{
                     )}
                   </FormattedMessage>
                 </li>
-              </Styled.DropdownList>
+              </menu>
             </div>
-          </Styled.DropdownOverlay>
+          </div>
         </Dialog>
-      </Styled.MobileMenuModal>
-    </Styled.MobileMenuOverlay>
+      </Modal>
+    </ModalOverlay>
   );
 };
 
@@ -155,7 +189,7 @@ const LoggedInState: FunctionComponent<{
   // On desktop, render ProfileMenu with its popover
   if (isMobile) {
     return (
-      <Styled.DropdownContainer data-testid='user-nav'>
+      <div className="navbar-dropdown-container" data-testid='user-nav'>
         <ProfileMenuButton
           onPress={() => setOverlayOpen(true)}
           data-testid='user-nav-toggle'
@@ -174,12 +208,12 @@ const LoggedInState: FunctionComponent<{
           onOpenChange={setOverlayOpen}
           onAction={handleAction}
         />
-      </Styled.DropdownContainer>
+      </div>
     );
   }
 
   return (
-    <Styled.DropdownContainer data-testid='user-nav'>
+    <div className="navbar-dropdown-container" data-testid='user-nav'>
       <ProfileMenu
         user={user}
         onAction={handleAction}
@@ -192,21 +226,30 @@ const LoggedInState: FunctionComponent<{
           {intl.formatMessage({ id: 'i18n:nav:logout:text' })}
         </ProfileMenuItem>
       </ProfileMenu>
-    </Styled.DropdownContainer>
+    </div>
   );
 };
 
 const LoggedOutState: FunctionComponent<{currentPath: string}> = ({currentPath}) => <FormattedMessage id='i18n:nav:login:text'>
-  {(msg) => <Styled.Link href={'/accounts/login?r=' + currentPath}
-    data-testid='nav-login' data-analytics-label='login'> {msg}
-  </Styled.Link>}
+  {(msg) => <a
+    href={'/accounts/login?r=' + currentPath}
+    data-testid='nav-login'
+    data-analytics-label='login'
+    className="navbar-link"
+    style={{
+      '--nav-text-color': theme.color.primary.gray.base,
+      '--nav-text-hover': theme.color.primary.gray.darker,
+      '--nav-border-color': theme.color.primary.green.base,
+    } as React.CSSProperties}
+  >
+    {msg}
+  </a>}
 </FormattedMessage>;
 
-export const ConnectedLoginButton = connect(
-  (state: AppState) => ({
-    currentPath: selectNavigation.pathname(state),
-  })
-)(LoggedOutState);
+export const ConnectedLoginButton = () => {
+  const currentPath = useSelector((state: AppState) => selectNavigation.pathname(state));
+  return <LoggedOutState currentPath={currentPath} />;
+};
 
 interface NavigationBarProps {
   user?: User;
@@ -215,6 +258,7 @@ interface NavigationBarProps {
   params: unknown;
   hasUnsavedHighlight: boolean;
 }
+
 const NavigationBar = ({user, loggedOut, currentPath, hasUnsavedHighlight, params}: NavigationBarProps) => {
   const logoUrl = guards.isPortaled(params) ? `/${params.portalName}/` : '/';
   const unsavedHighlightsHandler = useUnsavedHighlightsValidator(hasUnsavedHighlight);
@@ -222,31 +266,62 @@ const NavigationBar = ({user, loggedOut, currentPath, hasUnsavedHighlight, param
 
 
   return (
-    <Styled.BarWrapper data-analytics-region='openstax-navbar'>
-      <Styled.TopBar data-testid='navbar'>
+    <div
+      className="navbar-bar-wrapper"
+      data-analytics-region='openstax-navbar'
+      style={{
+        '--navbar-z-index': theme.zIndex.navbar,
+        '--navbar-bg': theme.color.neutral.base,
+        '--navbar-padding-desktop': `${theme.padding.page.desktop}rem`,
+        '--navbar-padding-mobile': `${theme.padding.page.mobile}rem`,
+        '--navbar-max-width': `${maxNavWidth}rem`,
+        '--navbar-desktop-height': `${navDesktopHeight}rem`,
+        '--navbar-mobile-height': `${navMobileHeight}rem`,
+      } as React.CSSProperties}
+    >
+      <div
+        className="navbar-topbar"
+        data-testid='navbar'
+      >
         <a
           href={logoUrl}
           onClick={(e) => unsavedHighlightsHandler(e, logoUrl)}
         >
-          <Styled.HeaderImage
-            role='img'
+          <img
             src={openstaxLogo}
             alt={intl.formatMessage({id: 'i18n:nav:logo:alt'})}
+            className="navbar-header-image"
           />
         </a>
         {loggedOut && <LoggedOutState currentPath={currentPath} />}
         {user && <LoggedInState user={user} currentPath={currentPath} hasUnsavedHighlight={hasUnsavedHighlight} />}
-      </Styled.TopBar>
-    </Styled.BarWrapper>
+      </div>
+    </div>
+  );
+};
+
+const ConnectedNavigationBar = () => {
+  // Combine selectors to reduce re-render churn
+  const navState = useSelector(
+    (state: AppState) => ({
+      currentPath: selectNavigation.pathname(state),
+      params: selectNavigation.params(state),
+      loggedOut: authSelect.loggedOut(state),
+      user: authSelect.user(state),
+      hasUnsavedHighlight: selectHighlights.hasUnsavedHighlight(state),
+    }),
+    shallowEqual
+  );
+
+  return (
+    <NavigationBar
+      currentPath={navState.currentPath}
+      params={navState.params}
+      loggedOut={navState.loggedOut}
+      user={navState.user}
+      hasUnsavedHighlight={navState.hasUnsavedHighlight}
+    />
   );
 };
 
-export default connect(
-  (state: AppState) => ({
-    currentPath: selectNavigation.pathname(state),
-    params: selectNavigation.params(state),
-    loggedOut: authSelect.loggedOut(state),
-    user: authSelect.user(state),
-    hasUnsavedHighlight: selectHighlights.hasUnsavedHighlight(state),
-  })
-)(NavigationBar);
+export default ConnectedNavigationBar;
diff --git a/src/app/components/NavBar/styled.tsx b/src/app/components/NavBar/styled.tsx
deleted file mode 100644
index 1ce2e151b2..0000000000
--- a/src/app/components/NavBar/styled.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React from 'react';
-import styled, { css, keyframes } from 'styled-components/macro';
-import { ModalOverlay, Modal } from 'react-aria-components';
-import Color from 'color';
-import { contentWrapperMaxWidth } from '../../content/components/constants';
-import { disablePrint } from '../../content/components/utils/disablePrint';
-import theme from '../../theme';
-import Times from '../Times';
-import { h4DesktopStyle, linkHover, textRegularStyle } from '../Typography';
-import { defaultFocusOutline } from '../../theme';
-
-export const maxNavWidth = contentWrapperMaxWidth;
-export const navDesktopHeight = 6.0;
-export const navMobileHeight = 5.2;
-const headerImageDesktopHeight = 3.5;
-const headerImageMobileHeight = 2.8;
-
-const fadeIn = keyframes`
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`;
-
-const fadeInAnimation = css`
-  animation: ${100}ms ${fadeIn} ease-out;
-`;
-
-export const TopBar = styled.div`
-  overflow: visible;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: ${navDesktopHeight}rem;
-  max-width: ${maxNavWidth}rem;
-  margin: 0 auto;
-  ${theme.breakpoints.mobile(css`
-    height: ${navMobileHeight}rem;
-  `)}
-  ${disablePrint}
-`;
-
-export const HeaderImage = styled.img`
-  display: block;
-  width: auto;
-  height: ${headerImageDesktopHeight}rem;
-  ${theme.breakpoints.mobile(css`
-    height: ${headerImageMobileHeight}rem;
-  `)}
-`;
-
-export const DropdownContainer = styled.div`
-  ${fadeInAnimation}
-  overflow: visible;
-  position: relative;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  ${theme.breakpoints.mobile(css`
-    height: auto;
-  `)}
-`;
-
-export const OverlayLogo = styled.img`
-  width: auto;
-  height: ${headerImageMobileHeight}rem;
-  position: absolute;
-  left: 1.6rem;
-  top: ${(navMobileHeight - headerImageMobileHeight) / 2}rem;
-`;
-
-export const navElementStyle = css`
-  display: block;
-  letter-spacing: -0.072rem;
-  font-size: 1.8rem;
-  text-decoration: none;
-  font-weight: bold;
-  padding: 1rem 0;
-  color: ${theme.color.primary.gray.base};
-
-  :hover {
-    color: ${theme.color.primary.gray.darker};
-  }
-
-  ${theme.breakpoints.mobile(css`
-    font-size: 1.4rem;
-    letter-spacing: 0.02rem;
-    padding: 0.7rem 0;
-  `)}
-`;
-
-export const Link = styled.a`
-  :hover,
-  :active,
-  :focus {
-    padding-bottom: 0.6rem;
-    border-bottom: 0.4rem solid ${theme.color.primary.green.base};
-  }
-
-  ${fadeInAnimation}
-  ${navElementStyle}
-  ${theme.breakpoints.mobile(css`
-    :hover,
-    :active,
-    :focus {
-      padding: 0.7rem 0;
-      border-bottom: none;
-    }
-  `)}
-`;
-
-
-export const OverlayHeading = styled.h4`
-  ${h4DesktopStyle}
-  padding-bottom: 0;
-`;
-
-export const DropdownList = styled.menu`
-  margin: 0;
-  padding: 0.6rem 0;
-  background: none;
-
-  > li {
-    overflow: visible;
-    display: block;
-
-    a {
-      overflow: visible;
-      white-space: nowrap;
-      display: block;
-      padding: 0 1rem;
-      ${textRegularStyle}
-      cursor: pointer;
-      text-decoration: none;
-
-      :hover {
-        color: ${linkHover};
-      }
-
-      :focus-visible {
-        ${defaultFocusOutline}
-      }
-    }
-  }
-`;
-
-export const MobileMenuOverlay = styled(ModalOverlay)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${Color(theme.color.neutral.base).alpha(0.98).string()};
-  z-index: ${theme.zIndex.navbar + 1};
-`;
-
-export const MobileMenuModal = styled(Modal)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  outline: none;
-
-  [role="dialog"] {
-    outline: none;
-  }
-`;
-
-export const DropdownOverlay = styled.div`
-  padding-top: calc(20vh + 5vw);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: visible;
-
-  > div {
-    width: min-content;
-    overflow: visible;
-  }
-`;
-
-export const TimesIcon = styled((
-  { theme: _theme, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { theme?: unknown }
-) =>
-  <button type="button" aria-label='close menu' {...props}><Times /></button>
-)`
-  cursor: pointer;
-  border: none;
-  padding: 0;
-  background: none;
-  position: absolute;
-  height: ${navMobileHeight}rem;
-  width: ${navMobileHeight}rem;
-  top: 0;
-  right: 0;
-  color: ${theme.color.primary.gray.base};
-`;
-
-export const BarWrapper = styled.div`
-  overflow: visible;
-  z-index: ${theme.zIndex.navbar}; /* above book nav */
-  background: ${theme.color.neutral.base};
-  position: relative; /* drop shadow above notifications */
-  padding: 0 ${theme.padding.page.desktop}rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
-  ${theme.breakpoints.mobile(css`
-    padding: 0 ${theme.padding.page.mobile}rem;
-  `)}
-`;
diff --git a/src/app/components/Typography/Links.constants.ts b/src/app/components/Typography/Links.constants.ts
index 74da4d54a7..eb8d17b4c4 100644
--- a/src/app/components/Typography/Links.constants.ts
+++ b/src/app/components/Typography/Links.constants.ts
@@ -5,9 +5,11 @@
  * These constants are:
  * - Imported by Button.tsx (ButtonLink component) and bound as CSS variables
  * - Imported by Typography.legacy.ts for styled-components css fragments
+ * - Imported by NavBar/index.tsx for focus outline color
  *
  * This module has no side effects (no React, no CSS imports).
  */
 
 export const linkColor = '#027EB5';
 export const linkHover = '#0064A0';
+export const linkFocusOutline = '#007297';
diff --git a/src/app/content/components/Page/MinPageHeight.tsx b/src/app/content/components/Page/MinPageHeight.tsx
index d34c7c630b..f2615ee2e7 100644
--- a/src/app/content/components/Page/MinPageHeight.tsx
+++ b/src/app/content/components/Page/MinPageHeight.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components/macro';
-import { navDesktopHeight, navMobileHeight } from '../../../components/NavBar/styled';
+import { navDesktopHeight, navMobileHeight } from '../../../components/NavBar/constants';
 import theme from '../../../theme';
 import { desktopAttributionHeight, mobileAttributionHeight } from '../Attribution';
 import {
diff --git a/src/app/content/components/Toolbar/styled.tsx b/src/app/content/components/Toolbar/styled.tsx
index 324b5c8954..2436a11d04 100644
--- a/src/app/content/components/Toolbar/styled.tsx
+++ b/src/app/content/components/Toolbar/styled.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled, { css, keyframes } from 'styled-components/macro';
-import { maxNavWidth } from '../../../components/NavBar/styled';
+import { maxNavWidth } from '../../../components/NavBar/constants';
 import Times from '../../../components/Times';
 import {
   textRegularSize,
diff --git a/src/app/developer/components/__snapshots__/Home.spec.tsx.snap b/src/app/developer/components/__snapshots__/Home.spec.tsx.snap
index daac420728..192f163e29 100644
--- a/src/app/developer/components/__snapshots__/Home.spec.tsx.snap
+++ b/src/app/developer/components/__snapshots__/Home.spec.tsx.snap
@@ -40,70 +40,23 @@ Array [
   >
     Keyboard shortcuts menu
   </button>,
-  .c1 {
-  overflow: visible;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 6rem;
-  max-width: 128rem;
-  margin: 0 auto;
-}
-
-.c2 {
-  display: block;
-  width: auto;
-  height: 3.5rem;
-}
-
-.c0 {
-  overflow: visible;
-  z-index: 70;
-  background: #fff;
-  position: relative;
-  padding: 0 3.2rem;
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
-}
-
-@media screen and (max-width:75em) {
-  .c1 {
-    height: 5.2rem;
-  }
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c2 {
-    height: 2.8rem;
-  }
-}
-
-@media screen and (max-width:75em) {
-  .c0 {
-    padding: 0 1.6rem;
-  }
-}
-
-<div
-    className="c0"
+  <div
+    className="navbar-bar-wrapper"
     data-analytics-region="openstax-navbar"
+    style={
+      Object {
+        "--navbar-bg": "#fff",
+        "--navbar-desktop-height": "6rem",
+        "--navbar-max-width": "128rem",
+        "--navbar-mobile-height": "5.2rem",
+        "--navbar-padding-desktop": "3.2rem",
+        "--navbar-padding-mobile": "1.6rem",
+        "--navbar-z-index": 70,
+      }
+    }
   >
     <div
-      className="c1"
+      className="navbar-topbar"
       data-testid="navbar"
     >
       <a
@@ -112,8 +65,7 @@ Array [
       >
         <img
           alt="OpenStax Logo"
-          className="c2"
-          role="img"
+          className="navbar-header-image"
           src="logo.svg"
         />
       </a>
@@ -688,428 +640,42 @@ Array [
       </div>
     </div>
   </div>,
-  .c18 {
+  .c0 {
   height: 1em;
 }
 
-.c20 {
+.c1 {
   height: 1em;
 }
 
-.c19 {
+.c3 {
   height: 1em;
 }
 
-.c0 {
-  color: #424242;
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  z-index: 0;
-  opacity: 1;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1 {
-  color: #d5d5d5;
-  display: grid;
-}
-
 .c2 {
-  background-color: #424242;
-}
-
-.c3 {
-  max-width: 131rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: 100%;
-  display: grid;
-  grid-row-gap: 2rem;
-  overflow: visible;
-}
-
-.c4 {
-  grid-area: headline;
-  margin: 0;
-}
-
-.c5 {
-  grid-area: mission;
-}
-
-.c5 a {
-  color: #d5d5d5;
-  font-weight: bold;
-  text-underline-position: under;
-}
-
-.c5 a:hover,
-.c5 a:active,
-.c5 a:focus {
-  color: inherit;
-}
-
-.c9 {
-  color: #d5d5d5;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c9:hover,
-.c9:active,
-.c9:focus {
-  color: inherit;
-}
-
-.c9:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c10 {
-  color: #d5d5d5;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: inherit;
-  cursor: pointer;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-.c10:hover,
-.c10:active,
-.c10:focus {
-  color: inherit;
-}
-
-.c10:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c21 {
-  color: #d5d5d5;
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-column-gap: 0.7rem;
-  overflow: hidden;
-}
-
-.c21:hover,
-.c21:active,
-.c21:focus {
-  color: inherit;
-}
-
-.c6 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col1;
-}
-
-.c11 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col2;
-}
-
-.c12 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col3;
-}
-
-.c7 {
-  font-size: 1.8rem;
-  font-weight: bold;
-  -webkit-letter-spacing: -0.072rem;
-  -moz-letter-spacing: -0.072rem;
-  -ms-letter-spacing: -0.072rem;
-  letter-spacing: -0.072rem;
-  line-height: normal;
-  margin: 0;
-}
-
-.c13 {
-  font-size: 1.2rem;
-  font-weight: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  background-color: #3b3b3b;
-}
-
-.c14 {
-  max-width: 131rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: 100%;
-  display: grid;
-  grid-gap: 1.5rem 4rem;
-  overflow: visible;
-}
-
-.c15 {
-  display: grid;
-  grid-gap: 1rem;
-  overflow: visible;
-}
-
-.c15 [data-html="copyright"] {
-  overflow: visible;
-}
-
-.c15 a {
-  color: #d5d5d5;
-  overflow: visible;
-}
-
-.c15 a:hover,
-.c15 a:active,
-.c15 a:focus {
-  color: inherit;
-}
-
-.c15 sup {
-  font-size: 66%;
-  margin-left: 0.1rem;
-  position: relative;
-  top: -0.25em;
-  vertical-align: top;
-}
-
-.c16 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 1rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: end;
-  -ms-flex-pack: end;
-  justify-content: end;
-  list-style: none;
-  overflow: visible;
-}
-
-.c8 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style: none;
-}
-
-.c17 {
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  background-color: #767676;
-  color: #fff;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  border-radius: 50%;
-  display: grid;
-  height: 3rem;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  overflow: hidden;
-  width: 3rem;
-}
-
-.c22 {
-  height: 4.7rem;
-  -webkit-transform: translateY(0.2rem);
-  -ms-transform: translateY(0.2rem);
-  transform: translateY(0.2rem);
-}
-
-@media print {
-  .c0 {
-    display: none;
-  }
-}
-
-@media (min-width:60.1em) {
-  .c2 {
-    padding: 7rem 0;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c2 {
-    padding: 2rem 0;
-  }
-}
-
-@media (max-width:60.1em) and (min-width:37.6em) {
-  .c2 {
-    padding: 4rem 0;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c3 {
-    -webkit-align-items: start;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: start;
-    grid-column-gap: 4rem;
-    grid-template: "headline col1 col2 col3" "mission col1 col2 col3" / minmax(auto,50rem) auto auto auto;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c3 {
-    grid-template: "headline" "mission" "col1" "col2" "col3";
-  }
-}
-
-@media (min-width:60.1em) {
-  .c3 {
-    grid-column-gap: 8rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c4 {
-    font-size: 2.4rem;
-    font-weight: bold;
-    -webkit-letter-spacing: -0.096rem;
-    -moz-letter-spacing: -0.096rem;
-    -ms-letter-spacing: -0.096rem;
-    letter-spacing: -0.096rem;
-    line-height: normal;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c4 {
-    font-size: 2rem;
-    font-weight: bold;
-    -webkit-letter-spacing: -0.08rem;
-    -moz-letter-spacing: -0.08rem;
-    -ms-letter-spacing: -0.08rem;
-    letter-spacing: -0.08rem;
-    line-height: normal;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c5 {
-    font-size: 1.8rem;
-    font-weight: normal;
-    -webkit-letter-spacing: normal;
-    -moz-letter-spacing: normal;
-    -ms-letter-spacing: normal;
-    letter-spacing: normal;
-    line-height: 3rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c9 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c10 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c7 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c13 {
-    padding: 2.5rem 0;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c13 {
-    padding: 1.5rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c14 {
-    grid-auto-flow: column;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c14 {
-    padding: 0;
-  }
+  height: 1em;
 }
 
 <footer
-    className="c0"
+    className="footer-wrapper"
     data-analytics-region="footer"
   >
     <div
-      className="c1"
+      className="footer-inner"
     >
       <div
-        className="c2"
+        className="footer-top"
       >
         <div
-          className="c3"
+          className="footer-top-boxed"
         >
           <h2
-            className="c4"
+            className="footer-heading"
           >
             OpenStax’s mission is to make an amazing education accessible for all.
           </h2>
           <div
-            className="c5"
+            className="footer-mission"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "
@@ -1120,19 +686,19 @@ Array [
             }
           />
           <div
-            className="c6"
+            className="footer-column footer-column-1"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               Help
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/contact"
                   rel=""
                   target="_self"
@@ -1142,9 +708,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="https://help.openstax.org/s/"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   Support Center
@@ -1152,7 +718,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/faq"
                   rel=""
                   target="_self"
@@ -1162,9 +728,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="https://status.openstax.org/"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   System Status
@@ -1172,7 +738,7 @@ Array [
               </li>
               <li>
                 <button
-                  className="c10"
+                  className="footer-button"
                   data-testid="shortcut-link"
                   onClick={[Function]}
                   type="button"
@@ -1183,19 +749,19 @@ Array [
             </menu>
           </div>
           <div
-            className="c11"
+            className="footer-column footer-column-2"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               OpenStax
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/press"
                   rel=""
                   target="_self"
@@ -1205,9 +771,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="http://www2.openstax.org/l/218812/2016-10-04/lvk"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   Newsletter
@@ -1215,7 +781,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/careers"
                   rel=""
                   target="_self"
@@ -1226,19 +792,19 @@ Array [
             </menu>
           </div>
           <div
-            className="c12"
+            className="footer-column footer-column-3"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               Policies
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/accessibility-statement"
                   rel=""
                   target="_self"
@@ -1248,7 +814,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/tos"
                   rel=""
                   target="_self"
@@ -1258,7 +824,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/license"
                   rel=""
                   target="_self"
@@ -1268,7 +834,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/privacy-policy"
                   rel=""
                   target="_self"
@@ -1282,13 +848,13 @@ Array [
         </div>
       </div>
       <div
-        className="c13"
+        className="footer-bottom"
       >
         <div
-          className="c14"
+          className="footer-bottom-boxed"
         >
           <div
-            className="c15"
+            className="footer-copyrights"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "
@@ -1306,19 +872,25 @@ Array [
             }
           />
           <menu
-            className="c16"
+            className="footer-social"
           >
             <li>
               <a
                 aria-label="OpenStax on Facebook"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.facebook.com/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c18"
+                  className="c0"
                   viewBox="0 0 320 512"
                 >
                   <path
@@ -1331,14 +903,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on X"
-                className="c17"
+                className="footer-social-icon"
                 href="https://twitter.com/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="svg-inline--fa fa-x-twitter"
+                  className="c1"
                   data-icon="x-twitter"
                   data-prefix="fab"
                   focusable="false"
@@ -1357,14 +935,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on LinkedIn"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.linkedin.com/company/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c19"
+                  className="c2"
                   viewBox="0 0 448 512"
                 >
                   <path
@@ -1377,14 +961,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on Instagram"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.instagram.com/openstax/"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c20"
+                  className="c3"
                   viewBox="0 0 448 512"
                 >
                   <path
@@ -1396,14 +986,14 @@ Array [
             </li>
             <li>
               <a
-                className="c21"
+                className="footer-bottom-link"
                 href="http://www.rice.edu"
-                rel="noopener"
+                rel="noopener noreferrer"
                 target="_blank"
               >
                 <img
                   alt="Rice University logo"
-                  className="c22"
+                  className="footer-logo"
                   src="rice-logo-white.png"
                 />
               </a>
diff --git a/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap b/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap
index d1d307c726..cb59a26142 100644
--- a/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap
+++ b/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap
@@ -31,428 +31,42 @@ Array [
       }
     />
   </div>,
-  .c18 {
+  .c0 {
   height: 1em;
 }
 
-.c20 {
+.c1 {
   height: 1em;
 }
 
-.c19 {
+.c3 {
   height: 1em;
 }
 
-.c0 {
-  color: #424242;
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  z-index: 0;
-  opacity: 1;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1 {
-  color: #d5d5d5;
-  display: grid;
-}
-
 .c2 {
-  background-color: #424242;
-}
-
-.c3 {
-  max-width: 131rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: 100%;
-  display: grid;
-  grid-row-gap: 2rem;
-  overflow: visible;
-}
-
-.c4 {
-  grid-area: headline;
-  margin: 0;
-}
-
-.c5 {
-  grid-area: mission;
-}
-
-.c5 a {
-  color: #d5d5d5;
-  font-weight: bold;
-  text-underline-position: under;
-}
-
-.c5 a:hover,
-.c5 a:active,
-.c5 a:focus {
-  color: inherit;
-}
-
-.c9 {
-  color: #d5d5d5;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c9:hover,
-.c9:active,
-.c9:focus {
-  color: inherit;
-}
-
-.c9:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c10 {
-  color: #d5d5d5;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: inherit;
-  cursor: pointer;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-.c10:hover,
-.c10:active,
-.c10:focus {
-  color: inherit;
-}
-
-.c10:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c21 {
-  color: #d5d5d5;
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-column-gap: 0.7rem;
-  overflow: hidden;
-}
-
-.c21:hover,
-.c21:active,
-.c21:focus {
-  color: inherit;
-}
-
-.c6 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col1;
-}
-
-.c11 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col2;
-}
-
-.c12 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col3;
-}
-
-.c7 {
-  font-size: 1.8rem;
-  font-weight: bold;
-  -webkit-letter-spacing: -0.072rem;
-  -moz-letter-spacing: -0.072rem;
-  -ms-letter-spacing: -0.072rem;
-  letter-spacing: -0.072rem;
-  line-height: normal;
-  margin: 0;
-}
-
-.c13 {
-  font-size: 1.2rem;
-  font-weight: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  background-color: #3b3b3b;
-}
-
-.c14 {
-  max-width: 131rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: 100%;
-  display: grid;
-  grid-gap: 1.5rem 4rem;
-  overflow: visible;
-}
-
-.c15 {
-  display: grid;
-  grid-gap: 1rem;
-  overflow: visible;
-}
-
-.c15 [data-html="copyright"] {
-  overflow: visible;
-}
-
-.c15 a {
-  color: #d5d5d5;
-  overflow: visible;
-}
-
-.c15 a:hover,
-.c15 a:active,
-.c15 a:focus {
-  color: inherit;
-}
-
-.c15 sup {
-  font-size: 66%;
-  margin-left: 0.1rem;
-  position: relative;
-  top: -0.25em;
-  vertical-align: top;
-}
-
-.c16 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 1rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: end;
-  -ms-flex-pack: end;
-  justify-content: end;
-  list-style: none;
-  overflow: visible;
-}
-
-.c8 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style: none;
-}
-
-.c17 {
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  background-color: #767676;
-  color: #fff;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  border-radius: 50%;
-  display: grid;
-  height: 3rem;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  overflow: hidden;
-  width: 3rem;
-}
-
-.c22 {
-  height: 4.7rem;
-  -webkit-transform: translateY(0.2rem);
-  -ms-transform: translateY(0.2rem);
-  transform: translateY(0.2rem);
-}
-
-@media print {
-  .c0 {
-    display: none;
-  }
-}
-
-@media (min-width:60.1em) {
-  .c2 {
-    padding: 7rem 0;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c2 {
-    padding: 2rem 0;
-  }
-}
-
-@media (max-width:60.1em) and (min-width:37.6em) {
-  .c2 {
-    padding: 4rem 0;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c3 {
-    -webkit-align-items: start;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: start;
-    grid-column-gap: 4rem;
-    grid-template: "headline col1 col2 col3" "mission col1 col2 col3" / minmax(auto,50rem) auto auto auto;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c3 {
-    grid-template: "headline" "mission" "col1" "col2" "col3";
-  }
-}
-
-@media (min-width:60.1em) {
-  .c3 {
-    grid-column-gap: 8rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c4 {
-    font-size: 2.4rem;
-    font-weight: bold;
-    -webkit-letter-spacing: -0.096rem;
-    -moz-letter-spacing: -0.096rem;
-    -ms-letter-spacing: -0.096rem;
-    letter-spacing: -0.096rem;
-    line-height: normal;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c4 {
-    font-size: 2rem;
-    font-weight: bold;
-    -webkit-letter-spacing: -0.08rem;
-    -moz-letter-spacing: -0.08rem;
-    -ms-letter-spacing: -0.08rem;
-    letter-spacing: -0.08rem;
-    line-height: normal;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c5 {
-    font-size: 1.8rem;
-    font-weight: normal;
-    -webkit-letter-spacing: normal;
-    -moz-letter-spacing: normal;
-    -ms-letter-spacing: normal;
-    letter-spacing: normal;
-    line-height: 3rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c9 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c10 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c7 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c13 {
-    padding: 2.5rem 0;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c13 {
-    padding: 1.5rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c14 {
-    grid-auto-flow: column;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c14 {
-    padding: 0;
-  }
+  height: 1em;
 }
 
 <footer
-    className="c0"
+    className="footer-wrapper"
     data-analytics-region="footer"
   >
     <div
-      className="c1"
+      className="footer-inner"
     >
       <div
-        className="c2"
+        className="footer-top"
       >
         <div
-          className="c3"
+          className="footer-top-boxed"
         >
           <h2
-            className="c4"
+            className="footer-heading"
           >
             OpenStax’s mission is to make an amazing education accessible for all.
           </h2>
           <div
-            className="c5"
+            className="footer-mission"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "
@@ -463,19 +77,19 @@ Array [
             }
           />
           <div
-            className="c6"
+            className="footer-column footer-column-1"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               Help
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/contact"
                   rel=""
                   target="_self"
@@ -485,9 +99,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="https://help.openstax.org/s/"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   Support Center
@@ -495,7 +109,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/faq"
                   rel=""
                   target="_self"
@@ -505,9 +119,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="https://status.openstax.org/"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   System Status
@@ -515,7 +129,7 @@ Array [
               </li>
               <li>
                 <button
-                  className="c10"
+                  className="footer-button"
                   data-testid="shortcut-link"
                   onClick={[Function]}
                   type="button"
@@ -526,19 +140,19 @@ Array [
             </menu>
           </div>
           <div
-            className="c11"
+            className="footer-column footer-column-2"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               OpenStax
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/press"
                   rel=""
                   target="_self"
@@ -548,9 +162,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="http://www2.openstax.org/l/218812/2016-10-04/lvk"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   Newsletter
@@ -558,7 +172,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/careers"
                   rel=""
                   target="_self"
@@ -569,19 +183,19 @@ Array [
             </menu>
           </div>
           <div
-            className="c12"
+            className="footer-column footer-column-3"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               Policies
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/accessibility-statement"
                   rel=""
                   target="_self"
@@ -591,7 +205,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/tos"
                   rel=""
                   target="_self"
@@ -601,7 +215,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/license"
                   rel=""
                   target="_self"
@@ -611,7 +225,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/privacy-policy"
                   rel=""
                   target="_self"
@@ -625,13 +239,13 @@ Array [
         </div>
       </div>
       <div
-        className="c13"
+        className="footer-bottom"
       >
         <div
-          className="c14"
+          className="footer-bottom-boxed"
         >
           <div
-            className="c15"
+            className="footer-copyrights"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "
@@ -649,19 +263,25 @@ Array [
             }
           />
           <menu
-            className="c16"
+            className="footer-social"
           >
             <li>
               <a
                 aria-label="OpenStax on Facebook"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.facebook.com/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c18"
+                  className="c0"
                   viewBox="0 0 320 512"
                 >
                   <path
@@ -674,14 +294,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on X"
-                className="c17"
+                className="footer-social-icon"
                 href="https://twitter.com/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="svg-inline--fa fa-x-twitter"
+                  className="c1"
                   data-icon="x-twitter"
                   data-prefix="fab"
                   focusable="false"
@@ -700,14 +326,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on LinkedIn"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.linkedin.com/company/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c19"
+                  className="c2"
                   viewBox="0 0 448 512"
                 >
                   <path
@@ -720,14 +352,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on Instagram"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.instagram.com/openstax/"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c20"
+                  className="c3"
                   viewBox="0 0 448 512"
                 >
                   <path
@@ -739,14 +377,14 @@ Array [
             </li>
             <li>
               <a
-                className="c21"
+                className="footer-bottom-link"
                 href="http://www.rice.edu"
-                rel="noopener"
+                rel="noopener noreferrer"
                 target="_blank"
               >
                 <img
                   alt="Rice University logo"
-                  className="c22"
+                  className="footer-logo"
                   src="rice-logo-white.png"
                 />
               </a>
@@ -790,428 +428,42 @@ Array [
       }
     />
   </div>,
-  .c18 {
+  .c0 {
   height: 1em;
 }
 
-.c20 {
+.c1 {
   height: 1em;
 }
 
-.c19 {
+.c3 {
   height: 1em;
 }
 
-.c0 {
-  color: #424242;
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  z-index: 0;
-  opacity: 1;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1 {
-  color: #d5d5d5;
-  display: grid;
-}
-
 .c2 {
-  background-color: #424242;
-}
-
-.c3 {
-  max-width: 131rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: 100%;
-  display: grid;
-  grid-row-gap: 2rem;
-  overflow: visible;
-}
-
-.c4 {
-  grid-area: headline;
-  margin: 0;
-}
-
-.c5 {
-  grid-area: mission;
-}
-
-.c5 a {
-  color: #d5d5d5;
-  font-weight: bold;
-  text-underline-position: under;
-}
-
-.c5 a:hover,
-.c5 a:active,
-.c5 a:focus {
-  color: inherit;
-}
-
-.c9 {
-  color: #d5d5d5;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c9:hover,
-.c9:active,
-.c9:focus {
-  color: inherit;
-}
-
-.c9:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c10 {
-  color: #d5d5d5;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: inherit;
-  cursor: pointer;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-.c10:hover,
-.c10:active,
-.c10:focus {
-  color: inherit;
-}
-
-.c10:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c21 {
-  color: #d5d5d5;
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-column-gap: 0.7rem;
-  overflow: hidden;
-}
-
-.c21:hover,
-.c21:active,
-.c21:focus {
-  color: inherit;
-}
-
-.c6 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col1;
-}
-
-.c11 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col2;
-}
-
-.c12 {
-  display: grid;
-  grid-gap: 0.5rem;
-  overflow: visible;
-  grid-area: col3;
-}
-
-.c7 {
-  font-size: 1.8rem;
-  font-weight: bold;
-  -webkit-letter-spacing: -0.072rem;
-  -moz-letter-spacing: -0.072rem;
-  -ms-letter-spacing: -0.072rem;
-  letter-spacing: -0.072rem;
-  line-height: normal;
-  margin: 0;
-}
-
-.c13 {
-  font-size: 1.2rem;
-  font-weight: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  background-color: #3b3b3b;
-}
-
-.c14 {
-  max-width: 131rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  margin: 0 auto;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: 100%;
-  display: grid;
-  grid-gap: 1.5rem 4rem;
-  overflow: visible;
-}
-
-.c15 {
-  display: grid;
-  grid-gap: 1rem;
-  overflow: visible;
-}
-
-.c15 [data-html="copyright"] {
-  overflow: visible;
-}
-
-.c15 a {
-  color: #d5d5d5;
-  overflow: visible;
-}
-
-.c15 a:hover,
-.c15 a:active,
-.c15 a:focus {
-  color: inherit;
-}
-
-.c15 sup {
-  font-size: 66%;
-  margin-left: 0.1rem;
-  position: relative;
-  top: -0.25em;
-  vertical-align: top;
-}
-
-.c16 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 1rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: end;
-  -ms-flex-pack: end;
-  justify-content: end;
-  list-style: none;
-  overflow: visible;
-}
-
-.c8 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style: none;
-}
-
-.c17 {
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  background-color: #767676;
-  color: #fff;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  border-radius: 50%;
-  display: grid;
-  height: 3rem;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  overflow: hidden;
-  width: 3rem;
-}
-
-.c22 {
-  height: 4.7rem;
-  -webkit-transform: translateY(0.2rem);
-  -ms-transform: translateY(0.2rem);
-  transform: translateY(0.2rem);
-}
-
-@media print {
-  .c0 {
-    display: none;
-  }
-}
-
-@media (min-width:60.1em) {
-  .c2 {
-    padding: 7rem 0;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c2 {
-    padding: 2rem 0;
-  }
-}
-
-@media (max-width:60.1em) and (min-width:37.6em) {
-  .c2 {
-    padding: 4rem 0;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c3 {
-    -webkit-align-items: start;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: start;
-    grid-column-gap: 4rem;
-    grid-template: "headline col1 col2 col3" "mission col1 col2 col3" / minmax(auto,50rem) auto auto auto;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c3 {
-    grid-template: "headline" "mission" "col1" "col2" "col3";
-  }
-}
-
-@media (min-width:60.1em) {
-  .c3 {
-    grid-column-gap: 8rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c4 {
-    font-size: 2.4rem;
-    font-weight: bold;
-    -webkit-letter-spacing: -0.096rem;
-    -moz-letter-spacing: -0.096rem;
-    -ms-letter-spacing: -0.096rem;
-    letter-spacing: -0.096rem;
-    line-height: normal;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c4 {
-    font-size: 2rem;
-    font-weight: bold;
-    -webkit-letter-spacing: -0.08rem;
-    -moz-letter-spacing: -0.08rem;
-    -ms-letter-spacing: -0.08rem;
-    letter-spacing: -0.08rem;
-    line-height: normal;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c5 {
-    font-size: 1.8rem;
-    font-weight: normal;
-    -webkit-letter-spacing: normal;
-    -moz-letter-spacing: normal;
-    -ms-letter-spacing: normal;
-    letter-spacing: normal;
-    line-height: 3rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c9 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c10 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c7 {
-    line-height: 4.5rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c13 {
-    padding: 2.5rem 0;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c13 {
-    padding: 1.5rem;
-  }
-}
-
-@media (min-width:37.6em) {
-  .c14 {
-    grid-auto-flow: column;
-  }
-}
-
-@media (max-width:37.5em) {
-  .c14 {
-    padding: 0;
-  }
+  height: 1em;
 }
 
 <footer
-    className="c0"
+    className="footer-wrapper"
     data-analytics-region="footer"
   >
     <div
-      className="c1"
+      className="footer-inner"
     >
       <div
-        className="c2"
+        className="footer-top"
       >
         <div
-          className="c3"
+          className="footer-top-boxed"
         >
           <h2
-            className="c4"
+            className="footer-heading"
           >
             OpenStax’s mission is to make an amazing education accessible for all.
           </h2>
           <div
-            className="c5"
+            className="footer-mission"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "
@@ -1222,19 +474,19 @@ Array [
             }
           />
           <div
-            className="c6"
+            className="footer-column footer-column-1"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               Help
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/contact"
                   rel=""
                   target="_self"
@@ -1244,9 +496,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="https://help.openstax.org/s/"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   Support Center
@@ -1254,7 +506,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/faq"
                   rel=""
                   target="_self"
@@ -1264,9 +516,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="https://status.openstax.org/"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   System Status
@@ -1274,7 +526,7 @@ Array [
               </li>
               <li>
                 <button
-                  className="c10"
+                  className="footer-button"
                   data-testid="shortcut-link"
                   onClick={[Function]}
                   type="button"
@@ -1285,19 +537,19 @@ Array [
             </menu>
           </div>
           <div
-            className="c11"
+            className="footer-column footer-column-2"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               OpenStax
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/press"
                   rel=""
                   target="_self"
@@ -1307,9 +559,9 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="http://www2.openstax.org/l/218812/2016-10-04/lvk"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   target="_blank"
                 >
                   Newsletter
@@ -1317,7 +569,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/careers"
                   rel=""
                   target="_self"
@@ -1328,19 +580,19 @@ Array [
             </menu>
           </div>
           <div
-            className="c12"
+            className="footer-column footer-column-3"
           >
             <h3
-              className="c7"
+              className="footer-column-heading"
             >
               Policies
             </h3>
             <menu
-              className="c8"
+              className="footer-link-list-wrapper"
             >
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/accessibility-statement"
                   rel=""
                   target="_self"
@@ -1350,7 +602,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/tos"
                   rel=""
                   target="_self"
@@ -1360,7 +612,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/license"
                   rel=""
                   target="_self"
@@ -1370,7 +622,7 @@ Array [
               </li>
               <li>
                 <a
-                  className="c9"
+                  className="footer-link"
                   href="/privacy-policy"
                   rel=""
                   target="_self"
@@ -1384,13 +636,13 @@ Array [
         </div>
       </div>
       <div
-        className="c13"
+        className="footer-bottom"
       >
         <div
-          className="c14"
+          className="footer-bottom-boxed"
         >
           <div
-            className="c15"
+            className="footer-copyrights"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "
@@ -1408,19 +660,25 @@ Array [
             }
           />
           <menu
-            className="c16"
+            className="footer-social"
           >
             <li>
               <a
                 aria-label="OpenStax on Facebook"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.facebook.com/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c18"
+                  className="c0"
                   viewBox="0 0 320 512"
                 >
                   <path
@@ -1433,14 +691,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on X"
-                className="c17"
+                className="footer-social-icon"
                 href="https://twitter.com/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="svg-inline--fa fa-x-twitter"
+                  className="c1"
                   data-icon="x-twitter"
                   data-prefix="fab"
                   focusable="false"
@@ -1459,14 +723,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on LinkedIn"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.linkedin.com/company/openstax"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c19"
+                  className="c2"
                   viewBox="0 0 448 512"
                 >
                   <path
@@ -1479,14 +749,20 @@ Array [
             <li>
               <a
                 aria-label="OpenStax on Instagram"
-                className="c17"
+                className="footer-social-icon"
                 href="https://www.instagram.com/openstax/"
-                rel="noopener"
+                rel="noopener noreferrer"
+                style={
+                  Object {
+                    "--footer-social-icon-bg": "#767676",
+                    "--footer-social-icon-color": "#fff",
+                  }
+                }
                 target="_blank"
               >
                 <svg
                   aria-hidden="true"
-                  className="c20"
+                  className="c3"
                   viewBox="0 0 448 512"
                 >
                   <path
@@ -1498,14 +774,14 @@ Array [
             </li>
             <li>
               <a
-                className="c21"
+                className="footer-bottom-link"
                 href="http://www.rice.edu"
-                rel="noopener"
+                rel="noopener noreferrer"
                 target="_blank"
               >
                 <img
                   alt="Rice University logo"
-                  className="c22"
+                  className="footer-logo"
                   src="rice-logo-white.png"
                 />
               </a>