@font-face { font-family: "GT-America"; src: url(/fonts/GT-America-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Publico-Headline"; src: url(/fonts/PublicoHeadline-CondensedRoman.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } body { font-family: var(--font-body), Arial, Helvetica, sans-serif; font-size: var(--paragraph-300-size); line-height: var(--paragraph-300-line); font-weight: regular; color: #000000; letter-spacing: 1px; text-transform: none; } body a { color: #000000; } body a:hover { color: #000000; } body a:visited { color: #000000; } h1 { font-family: var(--font-heading), Arial, Helvetica, sans-serif; font-size: var(--title-50-size); line-height: var(--title-50-line); font-weight: 600; color: var(--color-primary-500); letter-spacing: 1px; text-transform: uppercase; } h1 a { color: var(--color-primary-500); } h1 a:hover { color: var(--color-primary-500); } h1 a:visited { color: var(--color-primary-500); } h2 { font-family: var(--font-heading), Arial, Helvetica, sans-serif; font-size: var(--title-100-size); line-height: var(--title-100-line); font-weight: 600; color: var(--color-secondary-500); letter-spacing: 1px; text-transform: uppercase; } h2 a { color: var(--color-secondary-500); } h2 a:hover { color: var(--color-secondary-500); } h2 a:visited { color: var(--color-secondary-500); } h3 { font-family: var(--font-heading), Arial, Helvetica, sans-serif; font-size: var(--title-200-size); line-height: var(--title-200-line); font-weight: 600; color: var(--color-gray-500); letter-spacing: 1px; text-transform: uppercase; } h3 a { color: var(--color-gray-500); } h3 a:hover { color: var(--color-gray-500); } h3 a:visited { color: var(--color-gray-500); } h4 { font-family: var(--font-heading), Arial, Helvetica, sans-serif; font-size: var(--title-300-size); line-height: var(--title-300-line); font-weight: 600; color: var(--color-gray-500); letter-spacing: 1px; text-transform: uppercase; } h4 a { color: var(--color-gray-500); } h4 a:hover { color: var(--color-gray-500); } h4 a:visited { color: var(--color-gray-500); } h5 { font-family: var(--font-heading), Arial, Helvetica, sans-serif; font-size: var(--title-400-size); line-height: var(--title-400-line); font-weight: 600; color: var(--color-gray-500); letter-spacing: 1px; text-transform: uppercase; } h5 a { color: var(--color-gray-500); } h5 a:hover { color: var(--color-gray-500); } h5 a:visited { color: var(--color-gray-500); } h6 { font-family: var(--font-heading), Arial, Helvetica, sans-serif; font-size: var(--title-500-size); line-height: var(--title-500-line); font-weight: 600; color: var(--color-gray-500); letter-spacing: 1px; text-transform: uppercase; } h6 a { color: var(--color-gray-500); } h6 a:hover { color: var(--color-gray-500); } h6 a:visited { color: var(--color-gray-500); } nav { font-family: var(--font-body), Arial, Helvetica, sans-serif; font-size: var(--paragraph-400-size); line-height: var(--paragraph-400-line); font-weight: 600; color: var(--color-gray-500); letter-spacing: 1px; text-transform: uppercase; } nav a { color: var(--color-gray-500); } nav a:hover { color: var(--color-gray-500); } nav a:visited { color: var(--color-gray-500); } footer { font-family: var(--font-body), Arial, Helvetica, sans-serif; font-size: var(--paragraph-500-size); line-height: var(--paragraph-500-line); font-weight: regular; color: var(--color-gray-500); letter-spacing: 1px; text-transform: none; } footer a { color: var(--color-gray-500); } footer a:hover { color: var(--color-gray-500); } footer a:visited { color: var(--color-gray-500); } :root { --color-primary-100: #F8D4D3; --color-primary-200: #F6CAC9; --color-primary-300: #F1A9A8; --color-primary-400: #E76966; --color-primary-500: #DC2925; --color-primary-600: #C62521; --color-primary-700: #A51F1C; --color-primary-800: #841916; --color-primary-900: #6C1412; --color-secondary-100: #80a4e1; --color-secondary-200: #5f8ad1; --color-secondary-300: #3e70c1; --color-secondary-400: #2b5aa9; --color-secondary-500: #1a448f; --color-secondary-600: #0f2e75; --color-secondary-700: #0a1c5b; --color-secondary-800: #050f41; --color-secondary-900: #020721; --color-gray-100: #e9e9e9; --color-gray-200: #dcd9d5; --color-gray-300: #817f7c; --color-gray-400: #737373; --color-gray-500: #252525; --color-gray-600: #090909; --color-gray-700: #000000; --color-gray-800: #000000; --color-gray-900: #000000; --color-bg: #FFFFFF; --color-error: #b53c39; --color-success: #009B71; --color-warning: #FF8C00; --font-body: GT-America; --font-heading: Publico-Headline; --color-text: #000000; --color-heading: var(--color-primary-500); } body { background: var(--color-bg); font-family: var(--font-body); } .button-primary { background-color: var(--color-primary-500); color: #FFFFFF; padding: ; border: 1px solid var(--color-primary-500); border-radius: 4px; text-transform: uppercase; &:hover { background-color: var(--color-primary-600); color: #FFFFFF; border-color: var(--color-primary-600); } } .button-secondary { background-color: #FFFFFF; color: var(--color-gray-500); padding: ; border: 1px solid var(--color-gray-400); border-radius: 4px; &:hover { background-color: var(--color-gray-100); color: var(--color-gray-500); border-color: var(--color-gray-400); } }