@coopdigital/styles 0.1.0 → 0.3.0

package/dist/reset.css

@@ -10,19 +10,6 @@ html {
   text-size-adjust: none;
 }
 
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin-block-end: 0;
-}
-
 html,
 body {
   font-family: "Avenir Next", sans-serif;
@@ -40,6 +27,32 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+p,
+address {
+  margin-top: 0;
+}
+
 input,
 button,
 textarea,

package/dist/typography.css

@@ -0,0 +1,226 @@
+/* ===================================
+ * Fonts - Co-op Front-end Foundations
+ * =================================== */
+@import "https://cdn.fonts.net/t/1.css?apiType=css&projectid=d984f56e-f9bd-4c14-bb29-2558d7ff893e";
+@font-face {
+  font-family: "Avenir-Next";
+  font-weight: normal;
+  font-display: swap;
+  src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextRegular_normal_normal.woff") format("woff");
+}
+@font-face {
+  font-family: "Avenir-Next";
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextMedium_normal_normal.woff") format("woff");
+}
+@font-face {
+  font-family: "Avenir-Next";
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/AvenirNext/AvenirNextDemi_normal_normal.woff") format("woff");
+}
+@font-face {
+  font-family: "Co-opHeadline";
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff2") format("woff2"), url("https://coop-fonts.s3.eu-west-1.amazonaws.com/Co-opHeadline/Co-opHeadline-Bold.woff") format("woff");
+}
+a,
+.coop-link {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+a:hover,
+.coop-link:hover {
+  color: var(--color-link-hover);
+}
+a:active, a:focus,
+.coop-link:active,
+.coop-link:focus {
+  transition: none;
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 3px;
+}
+
+button.coop-link {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  text-align: inherit;
+}
+
+.coop-link-white {
+  color: var(--color-white);
+  text-decoration: underline;
+}
+.coop-link-white:hover {
+  color: currentcolor;
+}
+
+.coop-link-black {
+  color: var(--color-black);
+}
+.coop-link-black:hover {
+  color: currentcolor;
+}
+
+p + *,
+ul + *,
+ol + * {
+  padding-top: var(--spacing-16);
+}
+@media (min-width: 48em) {
+  p + *,
+  ul + *,
+  ol + * {
+    padding-top: var(--spacing-32);
+  }
+}
+
+p {
+  margin-bottom: var(--spacing-16);
+}
+
+ul,
+ol {
+  padding-left: var(--spacing-24);
+  /*
+  margin-bottom: var(--spacing-8);
+
+  @media (min-width: $mq-medium) {
+    margin-bottom: var(--spacing-16);
+  }
+    */
+}
+
+h1.coop-t-mega {
+  font-size: var(--type-size-48);
+  margin-bottom: var(--spacing-8);
+}
+@media (min-width: 48em) {
+  h1.coop-t-mega {
+    font-size: var(--type-size-56);
+    margin-bottom: var(--spacing-16);
+  }
+}
+
+h1 {
+  font-size: var(--type-size-30);
+  margin-bottom: var(--spacing-8);
+}
+@media (min-width: 48em) {
+  h1 {
+    font-size: var(--type-size-46);
+    margin-bottom: var(--spacing-16);
+  }
+}
+
+h2 {
+  font-size: var(--type-size-26);
+  margin-bottom: var(--spacing-8);
+}
+@media (min-width: 48em) {
+  h2 {
+    font-size: var(--type-size-32);
+    margin-bottom: var(--spacing-16);
+  }
+}
+
+h3 {
+  font-size: var(--type-size-26);
+  margin-bottom: var(--spacing-8);
+}
+@media (min-width: 48em) {
+  h3 {
+    font-size: var(--type-size-26);
+    margin-bottom: var(--spacing-16);
+  }
+}
+
+h4,
+h5,
+h6 {
+  font-size: var(--type-size-18);
+  margin-bottom: var(--spacing-8);
+}
+@media (min-width: 48em) {
+  h4,
+  h5,
+  h6 {
+    font-size: var(--type-size-22);
+    margin-bottom: var(--spacing-16);
+  }
+}
+
+.coop-t-headline {
+  font-family: var(--font-family-headline);
+  line-height: 105%;
+}
+
+.coop-t-headline-upper {
+  font-family: var(--font-family-headline);
+  text-transform: uppercase;
+  line-height: 100%;
+}
+
+h1.coop-t-headline-mega {
+  font-family: var(--font-family-headline);
+  color: var(--color-brand-coop);
+  font-size: var(--type-size-48);
+}
+@media (min-width: 37.5em) {
+  h1.coop-t-headline-mega {
+    font-size: var(--type-size-64);
+  }
+}
+@media (min-width: 48em) {
+  h1.coop-t-headline-mega {
+    font-size: var(--type-size-82);
+  }
+}
+
+h1.coop-t-headline {
+  color: var(--color-brand-coop);
+  font-size: var(--type-size-40);
+}
+@media (min-width: 37.5em) {
+  h1.coop-t-headline {
+    font-size: var(--type-size-48);
+  }
+}
+@media (min-width: 48em) {
+  h1.coop-t-headline {
+    font-size: var(--type-size-64);
+  }
+}
+
+.coop-t-lead-p {
+  font-size: var(--type-size-22);
+  margin-bottom: var(--spacing-16);
+}
+@media (min-width: 48em) {
+  .coop-t-lead-p {
+    font-size: var(--type-size-26);
+  }
+}
+
+hr {
+  display: block;
+  border-style: solid;
+  border-color: var(--color-grey-mid);
+  border-width: 0 0 1px 0;
+  height: 0;
+  color: var(--color-grey-mid);
+  margin: var(--spacing-16) 0;
+}
+@media (min-width: 48em) {
+  hr {
+    margin: var(--spacing-32) 0;
+  }
+}

package/dist/vars-legacy.css

@@ -0,0 +1,391 @@
+:root {
+  /* Spacing: Base */
+  --spacing-base: var(--spacing-32);
+  --spacing-base--3-4: var(--spacing-24);
+  --spacing-base--1-2: var(--spacing-16);
+  --spacing-base--1-4: var(--spacing-8);
+  --spacing-base--1-8: var(--spacing-2);
+  /* Spacing: Medium */
+  --spacing-medium: var(--spacing-64);
+  --spacing-medium--3-4: var(--spacing-48);
+  --spacing-medium--1-2: var(--spacing-32);
+  --spacing-medium--1-4: var(--spacing-16);
+  --spacing-medium--1-8: var(--spacing-8);
+}
+
+:root {
+  --color-brand-cls-blue-dark: #114d94;
+  --color-brand-cls-blue-mid: #0761c2;
+  --color-brand-cls-blue-light: #287cdf;
+  /* Bereavement Advice Centre */
+  --color-brand-bac-purple: #674170;
+}
+
+:root {
+  /* Core brands */
+  --color-brand-coop: #00a1cc;
+  --color-brand-deals: #d12430;
+  /* Core brands (backwards compatibility) */
+  --color-brand: var(--color-brand-coop);
+  --color-deal-red: var(--color-brand-deals);
+  /* Colours */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  /* Text greys */
+  --color-text: #282828;
+  --color-text-alt: #595959;
+  /* Tints */
+  --color-tint-purple: #fef2ff;
+  --color-tint-pink: #ffeaf2;
+  --color-tint-green: #f9fbdd;
+  --color-tint-orange: #ffede0;
+  --color-tint-red: #ffe8e9;
+  --color-tint-yellow: #fff6da;
+  --color-tint-lilac: #f2f2ff;
+  --color-tint-blue: #e6f6fa;
+  /* Grey backgrounds */
+  --color-grey-mid-light: #d8d8d8;
+  --color-grey-mid: #c4c4c4;
+  --color-grey-dark: #6e6e6e;
+  /* Neutral backgrounds */
+  --color-grey-neutral-light: #f3f3f3;
+  --color-grey-light: var(--color-grey-neutral-light);
+  --color-grey-neutral-warm: #f5f5f0;
+  --color-grey-neutral-cool: #dde9ed;
+  --color-grey-neutral-cool-light: #f2f4f7;
+  /* Links */
+  --color-link: #00729a;
+  --color-link-hover: #00394e;
+  --color-link-focus: #8d44d8;
+  --color-link-active: #002c3d;
+  --color-link-visited: var(--color-link-active);
+  /* Phasing out the '--' for modifiers as it causes issues with design token processing (EG lodash) */
+  --color-link--hover: var(--color-link-hover);
+  --color-link--focus: var(--color-link-focus);
+  --color-link--active: var(--color-link-active);
+  --color-link--visited: var(--color-link-active);
+  /* Buttons */
+  /* Primary green */
+  --color-button-green-primary: #0f8482;
+  --color-button-green-primary-hover: #1c6b6a;
+  --color-button-green-primary-active: #124948;
+  --color-button-primary: var(--color-button-green-primary);
+  --color-button-primary--hover: var(--color-button-green-primary-hover);
+  --color-button-primary--active: var(--color-button-green-primary-active);
+  /* Blue button */
+  --color-button-blue: #005878;
+  --color-button-blue-hover: #003e55;
+  --color-button-blue-active: #001f2b;
+  --color-button-dark: var(--color-button-blue);
+  --color-button-dark--hover: var(--color-button-blue-hover);
+  --color-button-dark--active: var(--color-button-blue-active);
+  /* Grey button */
+  --color-button-grey: #efefef;
+  --color-button-grey-hover: var(--color-grey-mid-light);
+  --color-button-grey-active: var(--color-grey-mid);
+  /* White button */
+  --color-button-white: var(--color-white);
+  --color-button-white-hover: var(--color-button-grey);
+  --color-button-white-active: var(--color-grey-mid-light);
+  /* default button */
+  --color-button: var(--color-button-blue);
+  --color-button--hover: var(--color-button-blue-hover);
+  --color-button--active: var(--color-button-blue-active);
+  /* Notifications */
+  --color-red-error: #e20f14;
+  --color-red-error-text: #d12430;
+  --color-red-error-light: #fcf1f1;
+  --color-orange-alert: #f8d156;
+  --color-orange-alert-light: #f8eec7;
+  --color-green-success: #50811b;
+  --color-green-success-light: #d7e3c6;
+  --color-blue-inform: #0761c2;
+  --color-blue-inform-light: #eef3fc;
+  --color-blue-notification: var(--color-blue-inform);
+  --color-blue-notification-light: var(--color-blue-inform-light);
+  /* The numeric value at the end tallies to the lightness value of the colours in HSL to give some granularity to the system */
+  /* Reds */
+  --color-red-dark-4: #ba2327;
+  --color-red-mid-5: var(--color-red-error);
+  --color-red-light-7: #ff6a6d;
+  --color-red-light-8: #ffc1c3;
+  --color-red-light-9: #ffdbdb;
+  --color-red-light-10: #fcf1f1;
+  --color-red-dark: var(--color-red-dark-4);
+  --color-red-mid: var(--color-red-mid-5);
+  /* Oranges */
+  --color-orange-dark-4: #be4015;
+  --color-orange-mid-5: #fc5724;
+  --color-orange-mid-6: #fd7b3b;
+  --color-orange-mid-7: #fd9c59;
+  --color-orange-light-8: #fdb979;
+  --color-orange-light-9: #fee7c1;
+  --color-orange-light-10: #fff8e7;
+  --color-orange-mid: var(--color-orange-mid-5);
+  /* Yellows */
+  --color-yellow-dark-4: #cfb214;
+  --color-yellow-mid-5: #ffd309;
+  --color-yellow-mid-6: #ffe53b;
+  --color-yellow-mid-7: #fff372;
+  --color-yellow-light-8: #fffca9;
+  --color-yellow-light-9: #fffbcd;
+  --color-yellow-light-10: #fcf9ee;
+  --color-yellow-mid: var(--color-yellow-mid-5);
+  --color-yellow-light: var(--color-yellow-mid-7);
+  --color-yellow-bright: var(--color-yellow-mid-6);
+  /* Greens */
+  --color-green-dark-2: #3a6002;
+  --color-green-mid-3: #4f820d;
+  --color-green-mid-4: #72aa24;
+  --color-green-mid-5: #96cb48;
+  --color-green-light-6: #b9e277;
+  --color-green-light-8: #e7f7cb;
+  --color-green-light-10: #f6fce9;
+  --color-green-dark: var(--color-green-dark-2);
+  --color-green-mid: var(--color-green-mid-3);
+  --color-green-light: var(--color-green-mid-5);
+  --color-green-bright: var(--color-green-light-6);
+  /* Teals */
+  --color-teal-dark-2: #046062;
+  --color-teal-mid-3: #0f8482;
+  --color-teal-mid-4: #27aaab;
+  --color-teal-mid-6: #4bc7cc;
+  --color-teal-light-7: #79dce3;
+  --color-teal-light-9: #ccf2f7;
+  --color-teal-light-10: #e9fafc;
+  --color-turquoise-dark: var(--color-teal-dark-2);
+  --color-turquoise-mid: var(--color-teal-mid-3);
+  --color-turquoise-light: var(--color-teal-light-7);
+  --color-turquoise-bright: var(--color-teal-light-7);
+  /* Blues */
+  --color-blue-dark-3: #114d94;
+  --color-blue-mid-4: #0761c2;
+  --color-blue-mid-6: #519af5;
+  --color-blue-light-8: #80b7ff;
+  --color-blue-light-9: #cfe3ff;
+  --color-blue-light-10: #eef3fc;
+  --color-blue-dark: var(--color-blue-dark-3);
+  --color-blue-bright: var(--color-blue-mid-6);
+  --color-blue-light: var(--color-blue-light-9);
+  --color-blue-mid: var(--color-blue-mid-4);
+  /* Indigos */
+  --color-indigo-dark-4: #3b427f;
+  --color-indigo-mid-5: #4f52a8;
+  --color-indigo-mid-7: #8d9ae4;
+  --color-indigo-light-8: #afbdf5;
+  --color-indigo-light-9: #cfdbfe;
+  --color-indigo-light-10: #eff3fa;
+  /* Purples */
+  --color-purple-dark-3: #51178c;
+  --color-purple-mid-4: #6727b9;
+  --color-purple-mid-6: #8d44d8;
+  --color-purple-light-8: #d395fe;
+  --color-purple-light-9: #edc3ff;
+  --color-purple-light-10: #f9edfc;
+  --color-purple-dark: var(--color-purple-dark-3);
+  /* Magentas */
+  --color-magenta-dark-3: #812373;
+  --color-magenta-mid-4: #ab278d;
+  --color-magenta-mid-7: #f690f1;
+  --color-magenta-light-8: #feb8ff;
+  --color-magenta-light-9: #fad1fe;
+  --color-magenta-light-10: #faeafc;
+  --color-purple-mid: var(--color-magenta-mid-4);
+  --color-pink-light: var(--color-magenta-mid-7);
+  --color-pink-bright: var(--color-magenta-light-9);
+  /* Reintroducing Co-op branding colours */
+  --color-navy: #003057;
+  --color-light-purple: #f8beff;
+  --color-light-pink: #ff94bf;
+  --color-light-green: #e1ec54;
+  --color-light-orange: #ffa465;
+  --color-light-red: #ff8c90;
+  --color-light-yellow: #ffd245;
+  --color-light-lilac: #bfbffd;
+  --color-light-blue: #bfe7f2;
+  --color-dark-purple: #c164c9;
+  --color-dark-pink: #f85792;
+  --color-dark-green: #819c00;
+  --color-dark-orange: #e85a00;
+  --color-dark-red: #f14f57;
+  --color-dark-yellow: #c08a00;
+  --color-dark-lilac: #6762f9;
+  --color-brand-ric-color-navy: var(--color-navy);
+  --color-brand-ric-color-light-purple: var(--color-light-purple);
+  --color-brand-ric-color-light-pink: var(--color-light-pink);
+  --color-brand-ric-color-light-green: var(--color-light-green);
+  --color-brand-ric-color-light-orange: var(--color-light-orange);
+  --color-brand-ric-color-light-red: var(--color-light-red);
+  --color-brand-ric-color-light-yellow: var(--color-light-yellow);
+  --color-brand-ric-color-light-lilac: var(--color-light-lilac);
+  --color-brand-ric-color-light-blue: var(--color-light-blue);
+  --color-brand-ric-color-dark-purple: var(--color-dark-purple);
+  --color-brand-ric-color-dark-pink: var(--color-dark-pink);
+  --color-brand-ric-color-dark-green: var(--color-dark-green);
+  --color-brand-ric-color-dark-orange: var(--color-dark-orange);
+  --color-brand-ric-color-dark-red: var(--color-dark-red);
+  --color-brand-ric-color-dark-yellow: var(--color-dark-yellow);
+  --color-brand-ric-color-dark-lilac: var(--color-dark-lilac);
+}
+
+:root {
+  /* Membership (Purple) */
+  --color-brand-membership-purple-dark-1: #483965;
+  --color-brand-membership-purple-dark-2: #635385;
+  --color-brand-membership-purple-dark-3: #776ca7;
+  --color-brand-membership-purple-mid-5: #8e88ba; /* core */
+  --color-brand-membership-purple-mid-6: #847db5; /* screen */
+  --color-brand-membership-purple-light-8: #b2aece;
+  --color-brand-membership-purple-light-9: #d3d1e4;
+  --color-brand-membership-purple-light-10: #eae8f4;
+  --color-brand-membership-purple-dark: var(--color-brand-membership-purple-dark-3);
+  --color-brand-membership-purple-mid: var(--color-brand-membership-purple-mid-5);
+  --color-brand-membership-purple-bright: var(--color-brand-membership-purple-mid-6);
+  --color-brand-membership-purple-light: var(--color-brand-membership-purple-light-8);
+  --color-brand-membership-purple-lighter: var(--color-brand-membership-purple-light-9);
+  --color-brand-membership-purple-lightest: var(--color-brand-membership-purple-light-10);
+  /* Membership (Lilac) */
+  --color-brand-membership-lilac-dark-1: #52355e;
+  --color-brand-membership-lilac-dark-2: #715287;
+  --color-brand-membership-lilac-dark-3: #806697;
+  --color-brand-membership-lilac-mid-5: #9976a8; /* core */
+  --color-brand-membership-lilac-mid-6: #a976bb; /* screen */
+  --color-brand-membership-lilac-light-8: #bba2c6;
+  --color-brand-membership-lilac-light-9: #ccbad4;
+  --color-brand-membership-lilac-light-10: #e6dde9;
+  --color-brand-membership-lilac-dark: var(--color-brand-membership-lilac-dark-3);
+  --color-brand-membership-lilac-mid: var(--color-brand-membership-lilac-mid-5);
+  --color-brand-membership-lilac-bright: var(--color-brand-membership-lilac-mid-6);
+  --color-brand-membership-lilac-light: var(--color-brand-membership-lilac-light-8);
+  --color-brand-membership-lilac-lighter: var(--color-brand-membership-lilac-light-9);
+  --color-brand-membership-lilac-lightest: var(--color-brand-membership-lilac-light-10);
+  /* Membership (Pink) */
+  --color-brand-membership-pink-dark-1: #6c3e53;
+  --color-brand-membership-pink-dark-2: #864e68;
+  --color-brand-membership-pink-dark-3: #9d5b7b;
+  --color-brand-membership-pink-mid-5: #bc7190; /* core */
+  --color-brand-membership-pink-mid-6: #d15c8c; /* screen */
+  --color-brand-membership-pink-light-8: #d19fb4;
+  --color-brand-membership-pink-light-9: #e3cbd4;
+  --color-brand-membership-pink-light-10: #f0e5eb;
+  --color-brand-membership-pink-dark: var(--color-brand-membership-pink-dark-3);
+  --color-brand-membership-pink-mid: var(--color-brand-membership-pink-mid-5);
+  --color-brand-membership-pink-bright: var(--color-brand-membership-pink-mid-6);
+  --color-brand-membership-pink-light: var(--color-brand-membership-pink-light-8);
+  --color-brand-membership-pink-lighter: var(--color-brand-membership-pink-light-9);
+  --color-brand-membership-pink-lightest: var(--color-brand-membership-pink-light-10);
+  /* Membership (Orange) */
+  --color-brand-membership-orange-dark-1: #783620;
+  --color-brand-membership-orange-dark-2: #9b462b;
+  --color-brand-membership-orange-dark-3: #b45d2b;
+  --color-brand-membership-orange-mid-5: #e69c39; /* core */
+  --color-brand-membership-orange-mid-6: #f5a74b; /* screen */
+  --color-brand-membership-orange-light-8: #e6bb8f;
+  --color-brand-membership-orange-light-9: #f0ddd1;
+  --color-brand-membership-orange-light-10: #f7eeeb;
+  --color-brand-membership-orange-dark: var(--color-brand-membership-orange-dark-3);
+  --color-brand-membership-orange-mid: var(--color-brand-membership-orange-mid-5);
+  --color-brand-membership-orange-bright: var(--color-brand-membership-orange-mid-6);
+  --color-brand-membership-orange-light: var(--color-brand-membership-orange-light-8);
+  --color-brand-membership-orange-lighter: var(--color-brand-membership-orange-light-9);
+  --color-brand-membership-orange-lightest: var(--color-brand-membership-orange-light-10);
+  /* Membership (Yellow) */
+  --color-brand-membership-yellow-dark-1: #704e24;
+  --color-brand-membership-yellow-dark-2: #916b3a;
+  --color-brand-membership-yellow-dark-3: #bf843e;
+  --color-brand-membership-yellow-mid-5: #ecd16d; /* core */
+  --color-brand-membership-yellow-mid-6: #f8da6d; /* screen */
+  --color-brand-membership-yellow-light-8: #edd273;
+  --color-brand-membership-yellow-light-9: #f3e2a4;
+  --color-brand-membership-yellow-light-10: #f9f1d1;
+  --color-brand-membership-yellow-dark: var(--color-brand-membership-yellow-dark-3);
+  --color-brand-membership-yellow-mid: var(--color-brand-membership-yellow-mid-5);
+  --color-brand-membership-yellow-bright: var(--color-brand-membership-yellow-mid-6);
+  --color-brand-membership-yellow-light: var(--color-brand-membership-yellow-light-8);
+  --color-brand-membership-yellow-lighter: var(--color-brand-membership-yellow-light-9);
+  --color-brand-membership-yellow-lightest: var(--color-brand-membership-yellow-light-10);
+  /* Membership (Green) */
+  --color-brand-membership-green-dark-1: #3b3f25;
+  --color-brand-membership-green-dark-2: #565734;
+  --color-brand-membership-green-dark-3: #6a7345;
+  --color-brand-membership-green-mid-5: #c6c978; /* core */
+  --color-brand-membership-green-mid-6: #b3ce7b; /* screen */
+  --color-brand-membership-green-light-8: #d1d4a5;
+  --color-brand-membership-green-light-9: #e4e5c6;
+  --color-brand-membership-green-light-10: #f6f6eb;
+  --color-brand-membership-green-dark: var(--color-brand-membership-green-dark-3);
+  --color-brand-membership-green-mid: var(--color-brand-membership-green-mid-5);
+  --color-brand-membership-green-bright: var(--color-brand-membership-green-mid-6);
+  --color-brand-membership-green-light: var(--color-brand-membership-green-light-8);
+  --color-brand-membership-green-lighter: var(--color-brand-membership-green-light-9);
+  --color-brand-membership-green-lightest: var(--color-brand-membership-green-light-10);
+  /* Membership (Turquoise) */
+  --color-brand-membership-turquoise-dark-1: #2b4946;
+  --color-brand-membership-turquoise-dark-2: #39615f;
+  --color-brand-membership-turquoise-dark-3: #487d7b;
+  --color-brand-membership-turquoise-mid-5: #81b8b8; /* core */
+  --color-brand-membership-turquoise-mid-6: #87cdcd; /* screen */
+  --color-brand-membership-turquoise-light-8: #b9dad9;
+  --color-brand-membership-turquoise-light-9: #d3e7e5;
+  --color-brand-membership-turquoise-light-10: #ecf5f7;
+  --color-brand-membership-turquoise-dark: var(--color-brand-membership-turquoise-dark-3);
+  --color-brand-membership-turquoise-mid: var(--color-brand-membership-turquoise-mid-5);
+  --color-brand-membership-turquoise-bright: var(--color-brand-membership-turquoise-mid-6);
+  --color-brand-membership-turquoise-light: var(--color-brand-membership-turquoise-light-8);
+  --color-brand-membership-turquoise-lighter: var(--color-brand-membership-turquoise-light-9);
+  --color-brand-membership-turquoise-lightest: var(--color-brand-membership-turquoise-light-10);
+  /* Membership (Blue) */
+  --color-brand-membership-blue-dark-1: #2c4258;
+  --color-brand-membership-blue-dark-2: #456588;
+  --color-brand-membership-blue-dark-3: #5177a3;
+  --color-brand-membership-blue-mid-5: #8bb5e0; /* core */
+  --color-brand-membership-blue-mid-6: #8fbae6; /* screen */
+  --color-brand-membership-blue-light-8: #c1d7ee;
+  --color-brand-membership-blue-light-9: #d8e6f4;
+  --color-brand-membership-blue-light-10: #f0f6fd;
+  --color-brand-membership-blue-dark: var(--color-brand-membership-blue-dark-3);
+  --color-brand-membership-blue-mid: var(--color-brand-membership-blue-mid-5);
+  --color-brand-membership-blue-bright: var(--color-brand-membership-blue-mid-6);
+  --color-brand-membership-blue-light: var(--color-brand-membership-blue-light-8);
+  --color-brand-membership-blue-lighter: var(--color-brand-membership-blue-light-9);
+  --color-brand-membership-blue-lightest: var(--color-brand-membership-blue-light-10);
+}
+
+:root {
+  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
+  /* Typography */
+  --type-headline-mega-m: 5.125rem; /* 82px */
+  --type-headline-mega-s: 4rem; /* 64px */
+  --type-headline-mega-xs: 3rem; /* 48px */
+  --type-headline-h1-m: 4rem; /* 64px */
+  --type-headline-h1-s: 3rem; /* 48px */
+  --type-headline-h1-xs: 2.5rem; /* 40px */
+  --type-body-l: 1.25rem; /* 20px */
+  --type-body-s: 1.125rem; /* 18px */
+  --type-line-height: 1.5; /* 32px */
+  --type-h1-mega-l: 3.5rem; /* 56px */
+  --type-h1-mega-s: 3rem; /* 48px */
+  --type-h1-l: 2.875rem; /* 46px */
+  --type-h1-s: 1.875rem; /* 30px */
+  --type-h2-l: 2rem; /* 32px */
+  --type-h2-s: 1.625rem; /* 26px */
+  --type-h3-l: 1.625rem; /* 26px */
+  --type-h3-s: 1.375rem; /* 22px */
+  --type-h456-l: 1.375rem; /* 22px */
+  --type-h456-s: 1.125rem; /* 18px */
+  --type-blockquote: 1.25rem; /* 18px */
+  --type-lp-l: 1.625rem; /* 26px */
+  --type-lp-s: 1.375rem; /* 22px */
+  --type-sp-l: 1.25rem; /* 18px */
+  --type-sp-s: 1rem; /* 16px */
+}
+
+:root {
+  --ui-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
+  --ui-shadow-hover: 0 2px 10px 0 rgb(0 0 0 / 25%);
+  --ui-shadow--hover: var(--ui-shadow-hover); /* stylelint-disable-line */
+  --ui-border-radius: 8px;
+  --ui-transition-hover: 0.15s ease-in-out;
+  --ui-transition-hover-property: background-color, color;
+}