barbican-reset 3.17.0 → 3.18.0

package/README.md

@@ -51,7 +51,7 @@ You can reference any of the following components:
 | -------------------- | ------------------- | -------------------- | ---------------- | ------------- |
 | `<br-alert>`         | BrAlert.vue         | .br-alert            | br-alert--setup  | -             |
 | `<br-anchor>`        | BrAnchor.vue        | .btn                 | setup-button     | -             |
-| `<br-button>`        | BrButton.vue        | .br-checkbox         | br-checkbox      | -             |
+| `<br-button>`        | BrButton.vue        | .br-form-checkbox         | br-form-checkbox      | -             |
 | `<br-confirm-done>`  | BrConfirmDone.vue   | -                    | -                | -             |
 | `<br-confirm-email>` | BrConfirmEmail.vue  | -                    | -                | -             |
 | `<br-container>`     | BrContainer.vue     | .br-container--outer | -                | -             |

package/components/BrAlert.vue

@@ -19,7 +19,7 @@
 
 `
 <script>
-import CloseIcon from "#icons/stream/close.vue";
+import CloseIcon from "#icons/close.vue";
 import BrButton from "#components/BrButton.vue";
 
 export default {

package/components/BrButton.vue

@@ -1,6 +1,6 @@
-<template>
-  <!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
+<!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
 
+<template>
   <button
     :class="printClassNames"
     @click="$emit('click')"

package/components/BrCardTitle.vue

@@ -1,3 +1,3 @@
 <template>
-  <h4 class="card-title"><slot /></h4>
+  <div class="card-title"><slot /></div>
 </template>

package/components/BrFormCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-checkbox">
+  <div class="br-form-checkbox">
     <BrFormInput v-bind="$attrs" type="checkbox">
       <slot />
     </BrFormInput>

package/components/BrFormLabel.vue

@@ -1,8 +1,6 @@
 <template>
   <component :is="!disabled ? 'label' : 'div'" :for="!disabled ? id : null" class="br-form-label">
-    <strong>
-      <slot />
-    </strong>
+    <slot />
     <span v-if="required"> (required)</span>
     <span v-if="optional"> (optional)</span>
   </component>

package/components/BrFormToggle.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="generateClasses">
+    <BrFormLabel>
+      <span>
+        <slot />
+      </span>
+      <BrFormInput v-bind="$attrs" type="checkbox" />
+    </BrFormLabel>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import BrFormLabel from '#components/BrFormLabel.vue'
+import BrFormInput from '#components/BrFormInput.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  class: String
+})
+
+const generateClasses = computed(() => {
+  let result = ['br-form-toggle']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+</script>

package/components/BrNavCard.vue

@@ -1,33 +1,33 @@
 <template>
-  <a v-if="to.slice(0, 4) == 'http'" :href="to" class="link-navcard external">
-    <br-card class="navcard external">
-      <div class="wrap-navcard-content">
-        <div class="wrap-navcard-icon">
+  <a v-if="to.startsWith('http')" :href="to" :class="generateClasses">
+    <br-card class="navcard">
+      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
+        <div v-if="$slots.icon" class="wrap-navcard-icon">
           <slot name="icon" />
         </div>
         <div>
-          <br-card-title>
+          <br-card-title v-if="$slots.title">
             <slot name="title" />
           </br-card-title>
-          <br-card-text>
-            <slot name="copy" />
+          <br-card-text v-if="$slots.text">
+            <slot name="text" />
           </br-card-text>
         </div>
       </div>
     </br-card>
   </a>
-  <router-link v-else class="link-navcard" :to="{ name: to }">
+    <router-link v-else class="link-navcard" :to="{ name: to }">
     <br-card class="navcard">
-      <div class="wrap-navcard-content">
-        <div class="wrap-navcard-icon">
+      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
+        <div v-if="$slots.icon" class="wrap-navcard-icon">
           <slot name="icon" />
         </div>
         <div>
-          <br-card-title>
+          <br-card-title v-if="$slots.title">
             <slot name="title" />
           </br-card-title>
-          <br-card-text>
-            <slot name="copy" />
+          <br-card-text v-if="$slots.text">
+            <slot name="text" />
           </br-card-text>
         </div>
       </div>
@@ -36,10 +36,21 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
+const generateClasses = computed(() => {
+  let result = ['link-navcard']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+
 const props = defineProps({
   to: {
     type: String,
     required: true,
   },
+  class: String
 })
 </script>

package/components/BrNavCardWrap.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="br-nav-card-wrap">
+    <slot />
+  </div>
+</template>

package/components/BrOverlay.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="br-overlay-wrap">
+    <div class="br-overlay-content">
+      <slot />
+    </div>
+    <br-button variant="exit-overlay" @click="emit('closeOverlay')">
+      <close-icon class="close-icon" />
+    </br-button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import BrButton from "#components/BrButton.vue";
+import CloseIcon from "#icons/close.vue";
+
+const emit = defineEmits(["closeOverlay"]);
+
+function listenForKeys({ key }) {
+  if (key == 'Escape') {
+    emit('closeOverlay')    
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', listenForKeys)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', listenForKeys)
+})
+</script>
+

package/components/SeeInside.vue

@@ -44,7 +44,7 @@
 
 <script>
 import BrButton from '#components/BrButton.vue'
-import CloseIcon from '#icons/stream/close.vue'
+import CloseIcon from '#icons/close.vue'
 
 export default {
   components: {

package/icons/back_arrow.vue

@@ -1,10 +1,3 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z" fill="currentColor" /></svg>
 </template>

package/icons/close.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="28" height="28" viewBox="0 0 20 20">
+    <path class="tint" fill="#ffffff" d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4.1,9-9S14.9,1,10,1z"/>
+    <path class="cross" fill="currentColor" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8	s8,3.6,8,8S14.4,18,10,18z M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z"/>
+  </svg>
+</template>
+

package/icons/index.js

@@ -1,23 +1,19 @@
-import ArrowBack from "#icons/arrow_back.vue";
-import ArrowIcon from "#icons/arrow.vue";
-import ArrowForward from "#icons/arrow_forward.vue";
 import BackArrow from "#icons/back_arrow.vue";
 import BarbicanLogo from "#icons/barbican.vue";
 import CartIcon from "#icons/cart.vue";
 import CityOfLondonLogo from "#icons/city_of_london.vue";
 import CityOfLondonLockup from "#icons/city_of_london_lockup.vue";
+import CloseIcon from "#icons/close.vue";
 import InformationIcon from "#icons/information.vue";
-
-import PersonIcon from "#icons/person.vue";
+import QrCode from "#icons/qr_code.vue";
 
 export {
-  ArrowBack,
-  ArrowIcon,
-  ArrowForward,
   BackArrow,
   BarbicanLogo,
   CartIcon,
   CityOfLondonLogo,
   CityOfLondonLockup,
+  CloseIcon,
   InformationIcon,
+  QrCode,
 };

package/icons/qr_code.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M55.3902 99.7024V88.6243H66.4683V99.7024H55.3902ZM44.3122 88.6243V60.9292H55.3902V88.6243H44.3122ZM88.6243 72.0073V49.8512H99.7024V72.0073H88.6243ZM77.5463 49.8512V38.7731H88.6243V49.8512H77.5463ZM11.078 60.9292V49.8512H22.1561V60.9292H11.078ZM0 49.8512V38.7731H11.078V49.8512H0ZM49.8512 11.078V0H60.9292V11.078H49.8512ZM8.30853 24.9256H24.9256V8.30853H8.30853V24.9256ZM0 33.2341V0H33.2341V33.2341H0ZM8.30853 91.3938H24.9256V74.7768H8.30853V91.3938ZM0 99.7024V66.4683H33.2341V99.7024H0ZM74.7768 24.9256H91.3938V8.30853H74.7768V24.9256ZM66.4683 33.2341V0H99.7024V33.2341H66.4683ZM77.5463 99.7024V83.0853H66.4683V72.0073H88.6243V88.6243H99.7024V99.7024H77.5463ZM55.3902 60.9292V49.8512H77.5463V60.9292H55.3902ZM33.2341 60.9292V49.8512H22.1561V38.7731H55.3902V49.8512H44.3122V60.9292H33.2341ZM38.7731 33.2341V11.078H49.8512V22.1561H60.9292V33.2341H38.7731ZM12.4628 20.7713V12.4628H20.7713V20.7713H12.4628ZM12.4628 87.2396V78.931H20.7713V87.2396H12.4628ZM78.931 20.7713V12.4628H87.2396V20.7713H78.931Z" fill="currentColor" />
+  </svg>
+</template>

package/icons/stream/index.js

@@ -4,11 +4,9 @@ import ChatIcon from "#icons/stream/chat.vue";
 import CogIcon from "#icons/stream/cog.vue";
 import VolumeIcon from "#icons/stream/volume.vue";
 import LiveIcon from "#icons/stream/live.vue";
-import CloseIcon from "#icons/stream/close.vue";
 
 export {
   AirplayIcon,
-  CloseIcon,
   CastIcon,
   ChatIcon,
   CogIcon,

package/index.js

@@ -32,12 +32,16 @@ import BrFormRadioGroup from '#components/BrFormRadioGroup.vue'
 import BrFormRow from '#components/BrFormRow.vue'
 import BrFormTel from '#components/BrFormTel.vue'
 import BrFormTextarea from '#components/BrFormTextarea.vue'
+import BrFormToggle from '#components/BrFormToggle.vue'
 import BrFormUpdate from '#components/BrFormUpdate.vue'
 import BrFormVisible from '#components/BrFormVisible.vue'
 
-import BrLoader from '#components/BrLoader.vue'
 import BrNavCard from '#components/BrNavCard.vue'
+import BrNavCardWrap from '#components/BrNavCardWrap.vue'
 import BrNavLink from '#components/BrNavLink.vue'
+import BrOverlay from '#components/BrOverlay.vue'
+
+import BrLoader from '#components/BrLoader.vue'
 import BrSkiplink from '#components/BrSkiplink.vue'
 import BrStatusBars from '#components/BrStatusBars.vue'
 import BrWrap from '#components/BrWrap.vue'
@@ -78,11 +82,14 @@ export {
   BrFormRow,
   BrFormTel,
   BrFormTextarea,
+  BrFormToggle,
   BrFormUpdate,
   BrFormVisible,
   BrLoader,
   BrNavCard,
+  BrNavCardWrap,
   BrNavLink,
+  BrOverlay,
   BrSkiplink,
   BrStatusBars,
   BrWrap,

package/package.json

@@ -137,5 +137,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.17.0"
+  "version": "3.18.0"
 }

package/scss/_br-button.scss

@@ -113,8 +113,15 @@
 /// Membership card button.
 /// Used for membership renewals.
 /// @group Buttons
-.btn.btn-membership-card {
-  @include btn-membership-card;
+.btn.btn-renew-membership {
+  @include btn-renew-membership;
+}
+
+/// Overlay exit button.
+/// Used for closing the overlay.
+/// @group Buttons
+.btn.btn-exit-overlay {
+  @include btn-exit-overlay;
 }
 
 .btn {

package/scss/{_br-checkbox.scss → _br-form-checkbox.scss}

@@ -3,11 +3,10 @@
 @use "mixins/input" as *;
 @use "mixins/focus" as *;
 
-// deprecate custom-checkbox class. br-checkbox is more descriptive
+/// @deprecated custom-checkbox class. br-form-checkbox is more descriptive
 
-.br-checkbox,
-.custom-checkbox {
-  @include br-checkbox; // formerly checkbox-input
+.br-form-checkbox {
+  @include br-form-checkbox; // formerly checkbox-input
 
   input[table][type='checkbox'] {
     @include inset;

package/scss/_br-form-toggle.scss

@@ -0,0 +1,71 @@
+@use "mixins/input/generic" as *;
+@use "mixins/breakpoints" as *;
+
+.br-form-toggle label {
+  @include generic-input-label;
+
+  @include small-up {
+    max-width: var(--width-layout-xs);
+  }
+
+  & {
+    grid-template-columns: auto 3.25rem;
+    padding-left: var(--padding-md);
+    display: inline-grid;
+    align-items: center;
+    font-weight: normal;
+    height: initial;
+    cursor: pointer;
+    width: 100%;
+    gap: 0.5em;
+  }
+}
+
+.br-form-toggle input[type=checkbox] {
+  background-color: var(--color-black-50-lighten);
+  transition-property: background-color;
+  transition-duration: 200ms;
+  border-radius: 1.125em;
+  position: relative;
+  appearance: none;
+  height: 1.875rem;
+  cursor: inherit;
+  width: 3.25rem;
+  color: white;
+  padding: 0;
+  margin: 0;
+
+  &:focus {
+    outline-color: var(--color-black-50-lighten);
+    outline-offset: var(--border-width-lg);
+    outline-width: var(--border-width-lg);
+    outline-style: solid;
+  }
+}
+
+.br-form-toggle input[type=checkbox]:before {
+  transition-property: transform;
+  transition-duration: 200ms;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  height: 1.65em;
+  bottom: 0.3em;
+  width: 1.65em;
+  left: 0.3em;
+  content: '';
+}
+
+.br-form-toggle input[type=checkbox]:checked:before {
+  -webkit-transform: translateX(1.65em);
+  -ms-transform: translateX(1.65em);
+  transform: translateX(1.65em);
+}
+
+.br-form-toggle input[type=checkbox]:checked {
+  background-color: var(--color-status-success);
+
+  &:focus {
+    outline-color: var(--color-status-success);
+  }
+}

package/scss/_br-nav-card-wrap.scss

@@ -0,0 +1,11 @@
+@use "mixins/breakpoints" as *;
+
+.br-nav-card-wrap {
+  gap: var(--gap-md);
+  display: grid;
+
+  @include medium-up {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--gap-lg);
+  }
+}

package/scss/_br-navlink.scss

@@ -1,5 +1,5 @@
 .br-navlink {
-  border-color: var(--color-black-10-lighten);
+  border-color: var(--color-black-25-lighten);
   border-bottom-width: var(--border-width-sm);
   border-right-width: var(--border-width-sm);
   border-left-width: var(--border-width-sm);
@@ -10,9 +10,11 @@
   background-color: white;
   text-decoration: none;
   border-top-width: 0;
+  align-items: center;
   border-style: solid;
+  gap: var(--gap-xs);
   font-weight: bold;
-  display: block;
+  display: flex;
 }
 
 .br-navlink:first-child {

package/scss/_br-overlay.scss

@@ -0,0 +1,26 @@
+@use "./mixins/core" as *;
+
+.br-overlay-wrap {
+  @include inset;
+
+  & {
+    background-color: var(--color-brand-generic-5-lighten);
+    color: var(--color-black-60-lighten);
+    padding: var(--padding-xxl);
+    align-items: center;
+    overflow: scroll;
+    position: fixed;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    z-index: 5;
+  }
+}
+
+.br-overlay-content {
+  justify-content: center;
+  position: relative;
+  display: flex;
+  width: 100%;
+  z-index: 2;
+}

package/scss/card/_login.scss

@@ -1,12 +1,11 @@
 .card[login] {
+  max-width: 100%;
+  width: 800px;
 
   .card-header {
-    justify-content: space-between;
+    grid-template-columns: auto 28px;
+    column-gap: var(--gap-sm);
     align-items: center;
-    display: flex;
-  }
-
-  .card-title {
-    font-size: var(--font-size-h1);
+    display: grid;
   }
 }

package/scss/card/_membership-new.scss

@@ -0,0 +1,45 @@
+@use "../mixins/breakpoints" as *;
+
+$colors: (
+  "member": var(--color-brand-membership),
+  "member-plus": var(--color-brand-membership-35-darken),
+  "patron": var(--color-donor-patron),
+  "premier-patron": var(--color-donor-patron),
+  "principal-patron": var(--color-donor-principle),
+  "directors-circle": var(--color-donor-principle),
+  "young-barbican": var(--color-youngbarbican-1),
+);
+
+$gradients: (
+  "member-plus": linear-gradient(120deg, var(--color-brand-membership-35-darken) 20%, var(--color-brand-membership) 100%),
+  "patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
+  "premier-patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
+  "principal-patron": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
+  "directors-circle": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
+  "young-barbican": linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%),
+);
+
+.card.membership-new {
+  background-color: var(--color-black-60-lighten);
+  border-width: 0;
+  color: white;
+  width: 196px;
+}
+
+.card.membership-new + .card.membership-new {
+  @include small-up {
+    margin-top: 0;
+  }
+}
+
+@each $name, $value in $colors {
+  .card.membership-new.#{$name} {
+    background-color: #{$value};
+  }
+}
+
+@each $name, $value in $gradients {
+  .card.membership-new.#{$name} {
+    background-image: #{$value};
+  }
+}

package/scss/card/_membership.scss

@@ -1,51 +1,52 @@
-@use "../mixins/breakpoints";
-
-.card[membership] {
-  box-shadow: 0 0 0.375rem rgba(var(--color-black-50-lighten), 0.5);
-  background: var(--color-black-60-lighten);
-  width: calc(100% - 1rem);
-  display: inline-block;
-  margin: var(--margin-sm);
+@use "../mixins/breakpoints" as *;
+
+$colors: (
+  "member": var(--color-brand-membership),
+  "member-plus": var(--color-brand-membership-35-darken),
+  "patron": var(--color-donor-patron),
+  "premier-patron": var(--color-donor-patron),
+  "principal-patron": var(--color-donor-principle),
+  "directors-circle": var(--color-donor-principle),
+  "young-barbican": var(--color-youngbarbican-1),
+);
+
+$gradients: (
+  "member-plus": linear-gradient(120deg, var(--color-brand-membership-35-darken) 20%, var(--color-brand-membership) 100%),
+  "patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
+  "premier-patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
+  "principal-patron": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
+  "directors-circle": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
+  "young-barbican": linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%),
+);
+
+.card.membership {
+  background-color: var(--color-black-60-lighten);
+  min-height: 12.75rem;
+  border-width: 0;
   color: white;
-  border: none;
-
-  @include breakpoints.small-up {
-    width: var(--width-layout-xs);
-  }
-
-  >.card-body {
-    align-items: flex-start;
-    row-gap: var(--gap-sm);
-    display: grid;
-
-    @include breakpoints.small-up {
-      row-gap: var(--gap-xl);
-    }
-  }
-
-  &.member {
-    background-color: var(--color-brand-membership);
-  }
 
-  &.member-plus {
-    background-color: var(--color-brand-membership-35-darken);
-    background-image: linear-gradient(120deg, var(--color-brand-membership-35-darken) 20%, var(--color-brand-membership) 100%);
+  @include small-up {
+    max-width: var(--width-layout-xs);
+    margin: var(--margin-xs);
+    display: inline-block;
+    width: 100%;
   }
+}
 
-  &.patron,
-  &.premier-patron {
-    background-color: var(--color-donor-patron);
-    background-image: linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%);
+.card.membership + .card.membership {
+  @include small-up {
+    margin-top: 0;
   }
+}
 
-  &.principle-patron,
-  &.directors-circle {
-    background-color: var(--color-donor-principle);
-    background-image: linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%);
+@each $name, $value in $colors {
+  .card.membership.#{$name} {
+    background-color: #{$value};
   }
+}
 
-  &.young-barbican {
-    background-color: var(--color-youngbarbican-1);
-    background-image: linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%);
+@each $name, $value in $gradients {
+  .card.membership.#{$name} {
+    background-image: #{$value};
   }
 }

package/scss/card/_navcard.scss

@@ -1,47 +1,17 @@
 @use "../mixins/breakpoints" as *;
 
-.card.navcard {
-  background-color: transparent;
-  border-width: 0;
-}
-
-.card.navcard .card-body {
-  @include large-up {
-    padding: var(--padding-card-lg);
-  }
-
-  @include small-down {
-    padding: var(--padding-card-sm);
-  }
-}
-
-.card.navcard.external .card-body {
+.link-navcard.inline .card.navcard .card-body {
   @include medium-down {
     padding: 0;
   }
 }
 
-.card.navcard .card-title {
-  line-height: var(--line-height-sm);
-  font-size: var(--font-size-h2);
-
-  @include small-down {
-    font-size: var(--font-size-h4);
-  }
-}
-
-.card.navcard .card-title+.card-text {
-  margin-top: var(--margin-md);
-}
-
-.card.navcard .card-text {
-  @include small-down {
-    display: none;
-  }
+.link-navcard.benefits .card.navcard .card-title {
+  font-size: var(--font-size-h4);
 }
 
 @include medium-down {
-  .link-navcard.external {
+  .link-navcard.inline {
     background-color: transparent;
     margin-top: var(--margin-md);
     margin-right: auto;
@@ -49,20 +19,20 @@
     border-width: 0;
   }
 
-  .link-navcard.external .wrap-navcard-content {
+  .link-navcard.inline .wrap-navcard-content {
     display: block;
   }
 
-  .link-navcard.external .wrap-navcard-icon {
+  .link-navcard.inline .wrap-navcard-icon {
     display: none;
   }
 
-  .link-navcard.external .card-text {
+  .link-navcard.inline .card-text {
     display: none;
   }
 
-  .link-navcard.external:hover,
-  .link-navcard.external:focus {
+  .link-navcard.inline:hover,
+  .link-navcard.inline:focus {
     background-color: var(--color-black-80-lighten);
     outline-color: var(--color-black-80-lighten);
     outline-width: 0.25rem;
@@ -72,7 +42,7 @@
 }
 
 @include small-down {
-  .link-navcard.external {
+  .link-navcard.inline {
     margin-top: var(--margin-sm);
   }
 }
@@ -104,6 +74,40 @@
   transform: scale(0.98);
 }
 
+.card.navcard {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.card.navcard .card-body {
+  @include large-up {
+    padding: var(--padding-card-lg);
+  }
+
+  @include small-down {
+    padding: var(--padding-card-sm);
+  }
+}
+
+.card.navcard .card-title {
+  line-height: var(--line-height-sm);
+  font-size: var(--font-size-h2);
+
+  @include small-down {
+    font-size: var(--font-size-h4);
+  }
+}
+
+.card.navcard .card-title+.card-text {
+  margin-top: var(--margin-md);
+}
+
+.card.navcard .card-text {
+  @include small-down {
+    display: none;
+  }
+}
+
 .wrap-navcard-icon {
   @include small-up {
     margin-top: var(--margin-sm);
@@ -114,7 +118,7 @@
   display: block;
 }
 
-.wrap-navcard-content {
+.wrap-navcard-content.has-icon {
   grid-template-columns: 2.1875rem auto;
   gap: var(--gap-md);
   display: grid;
@@ -122,4 +126,8 @@
   @include small-down {
     align-items: center;
   }
+}
+
+.wrap-navcard-content:not(.has-icon) {
+  text-align: center;
 }

package/scss/card/index.scss

@@ -4,6 +4,7 @@
 @use "confirm";
 @use "login";
 @use "membership";
+@use "membership-new";
 @use "navcard";
 @use "password";
 @use "related";

package/scss/index.scss

@@ -10,18 +10,21 @@
 
 @use "br-alert";
 @use "br-button";
-@use "br-checkbox";
 @use "br-container";
 @use "br-footer";
 
+@use "br-form-checkbox";
 @use "br-form-edit";
-@use "br-form-visible";
 @use "br-form-row";
 @use "br-form-textarea";
+@use "br-form-toggle";
 @use "br-form-update";
+@use "br-form-visible";
 
 @use "br-loader";
+@use "br-nav-card-wrap";
 @use "br-navlink";
+@use "br-overlay";
 @use "br-promo";
 @use "br-radio";
 @use "br-select";
@@ -199,6 +202,7 @@
   --margin-xxxl: 2.5rem;
   --margin-wrap-sm: calc(var(--margin-xs) * -1);
   --margin-wrap-md: calc(var(--margin-sm) * -1);
+  --margin-wrap-lg: calc(var(--margin-md) * -1);
   --min-height-button: 2.5rem;
   --padding-xs: 0.25rem;
   --padding-sm: 0.5rem;
@@ -215,7 +219,7 @@
   --padding-layout-lg: 10%;
   --width-icon: 10rem;
   --width-title: 20rem;
-  --width-layout-xs: 25rem;
+  --width-layout-xs: 24rem;
   --width-layout-sm: 50rem;
   --width-layout-md: 60rem;
   --width-layout-lg: 75rem;

package/scss/mixins/_br-card.scss

@@ -6,6 +6,8 @@
   border-width: var(--border-width-sm);
   background-color: white;
   border-style: solid;
+  overflow: hidden;
+  width: 100%;
 
   +.card {
     margin-top: var(--margin-lg);
@@ -23,6 +25,7 @@
 
 @mixin br-card-title {
   font-size: var(--font-size-h1);
+  font-weight: bold;
   margin: 0;
 }
 

package/scss/mixins/_focus.scss

@@ -120,4 +120,19 @@
   &:focus {
     @content;
   }
+}
+
+@mixin close-icon-focus {
+  outline-width: var(--border-width-lg);
+  outline-color: currentColor;
+  outline-style: solid;
+  border-radius: 50%;      
+
+  path.cross {
+    fill: white;
+  }
+
+  path.tint {
+    fill: currentColor;
+  }
 }

package/scss/mixins/buttons/_custom.scss

@@ -6,6 +6,9 @@
 @use "../../mixins/buttons/setup" as *;
 @use "../../functions" as *;
 
+@forward "custom/renew-membership";
+@forward "custom/exit-overlay";
+
 @mixin link-button($color: inherit,
   $background: transparent,
   $padding: 0,
@@ -143,17 +146,7 @@
   }
 
   @include focus {
-    @include single-box(currentColor,
-      0.1875rem); // @BUG: safari outline + border-radius
-    border-radius: 50%;
-
-    path.cross {
-      fill: white;
-    }
-
-    path.tint {
-      fill: currentColor;
-    }
+    @include close-icon-focus;
   }
 }
 
@@ -179,20 +172,6 @@
   }
 }
 
-@mixin btn-membership-card {
-  @include outline-button($color: white, $background: transparent);
-
-  @include focus {
-    &.member {
-      color: var(--color-brand-membership);
-    }
-
-    &.member-plus {
-      color: var(--color-brand-membership-35-darken);
-    }
-  }
-}
-
 @mixin btn-video-login {
   @include solid-button($background: white, $color: #0a0a0a);
 }

package/scss/mixins/buttons/_outline.scss

@@ -1,15 +1,15 @@
-@use "../../mixins/focus";
+@use "../../mixins/focus" as *;
 
 @mixin outline-button($color: var(--color-brand-generic),
   $background: white,
-  $border-width: var(--border-width-sm),
+  $border-width: var(--border-width-lg),
   $padding: false,
   $margin: false,
   $line-height: false,
   $font-size: false,
   ) {
-  border-width: $border-width;
   background-color: $background;
+  border-width: $border-width;
   border-color: $color;
   border-style: solid;
   color: $color;
@@ -34,7 +34,7 @@
     fill: $color;
   }
 
-  @include focus.focus {
+  @include focus {
     @include outline-button-focus($color, $background)
   }
 }

package/scss/mixins/buttons/custom/_exit-overlay.scss

@@ -0,0 +1,31 @@
+@use "../../../mixins/core" as *;
+@use "../../../mixins/focus" as *;
+
+@mixin btn-exit-overlay {
+  // @include invisible-button; causing a module loop
+  @include inset;
+
+  & {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+
+    border-radius: 0;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    z-index: 1;    
+  }
+
+  &:hover, &:focus {
+    .close-icon {
+      @include close-icon-focus;
+    }
+  }
+
+  .close-icon {
+    right: var(--padding-xxl);
+    top: var(--padding-xxl);
+    position: fixed;
+  }
+}

package/scss/mixins/buttons/custom/_renew-membership.scss

@@ -0,0 +1,27 @@
+@use "../../../mixins/buttons/outline" as *;
+
+$iterations: (
+  "member": var(--color-brand-membership),
+  "member-plus": var(--color-brand-membership-35-darken),
+  "patron": var(--color-donor-patron),
+  "premier-patron": var(--color-donor-patron),
+  "principal-patron": var(--color-donor-principle),
+  "directors-circle": var(--color-donor-principle),
+  "young-barbican": var(--color-youngbarbican-1),
+);
+
+@mixin btn-renew-membership {
+  @include outline-button($color: white, $background: transparent);
+
+  &:focus, &:hover {
+    @each $name, $value in $iterations {
+      &.#{$name} {
+        color: #{$value};
+      }
+    }
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}

package/scss/mixins/input/_checkbox.scss

@@ -1,12 +1,12 @@
 @use "generic" as *;
 
-@mixin br-checkbox($state: neutral) {
+@mixin br-form-checkbox($state: neutral) {
   @include generic-input($state, checkbox);
   display: block;
 }
 
 @mixin br-spx-checkbox($state: neutral) {
-  @include br-checkbox($state);
+  @include br-form-checkbox($state);
 
   input:focus {
     @include generic-input-target-focus;

package/scss/mixins/input/_generic.scss

@@ -58,13 +58,15 @@
 }
 
 @mixin generic-input-label($state: neutral) {
-  border: var(--border-width-sm) solid var(--color-black-25-lighten);
-  padding-left: var(--padding-xxxl);
+  border-color: var(--color-black-25-lighten);
   border-radius: var(--border-radius-lg);
+  border-width: var(--border-width-sm);
   padding-bottom: var(--padding-md);
+  padding-left: var(--padding-xxxl);
   padding-right: var(--padding-md);
   padding-top: var(--padding-md);
   background-color: white;
+  border-style: solid;
   font-weight: normal;
   display: block;
 

package/scss/typography.scss

@@ -1,31 +1,37 @@
 h1,
 .h1 {
   font-size: var(--font-size-h1);
+  margin: 0;
 }
 
 h2,
 .h2 {
   font-size: var(--font-size-h2);
+  margin: 0;
 }
 
 h3,
 .h3 {
   font-size: var(--font-size-h3);
+  margin: 0;
 }
 
 h4,
 .h4 {
   font-size: var(--font-size-h4);
+  margin: 0;
 }
 
 h5,
 .h5 {
   font-size: var(--font-size-h5);
+  margin: 0;
 }
 
 h6,
 .h6 {
   font-size: var(--font-size-h6);
+  margin: 0;
 }
 
 a,

package/icons/arrow.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.2 80.9" height="12" width="12">
-    <path fill="white" d="M42.8.4L31.9 11.2l23.7 22.2H0V48h55.6l-24 21.6 11.2 11.3 40.4-40.7z"></path>
-  </svg>
-</template>

package/icons/arrow_back.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-  >
-    <path
-      d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"
-    />
-  </svg>
-</template>

package/icons/arrow_forward.vue

@@ -1,10 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-  >
-    <polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12" />
-  </svg>
-</template>

package/icons/stream/close.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg width="28" height="28" viewBox="0 0 20 20">
-    <path class="tint" fill="#ffffff" d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4.1,9-9S14.9,1,10,1z"/>
-    <path class="cross" fill="#353535" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8	s8,3.6,8,8S14.4,18,10,18z M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z"/>
-  </svg>
-</template>
-