barbican-reset 2.60.0 → 3.1.0

package/patterns/static/styles.css

@@ -1,12 +1,11 @@
-@media only screen and (max-width: 415px) {
+@media only screen and (max-width: 99px) {
   .br-alert {
     font-size: 0.875rem;
   }
 }
 .br-alert .title {
-  font-family: Supreme-Black, "Helvetica", "Arial", sans-serif;
-  font-weight: 400;
   margin-bottom: 0.25rem;
+  font-weight: bold;
 }
 .br-alert .flex {
   justify-content: space-between;
@@ -142,7 +141,8 @@
   fill: hsl(205deg, 100%, 37%);
 }
 @media (hover: hover) {
-  .br-alert .wrap .btn.btn-link:hover, .br-alert .wrap a:hover {
+  .br-alert .wrap .btn.btn-link:hover,
+  .br-alert .wrap a:hover {
     position: relative;
     outline: none;
     z-index: 2;
@@ -151,7 +151,8 @@
     color: hsl(205deg, 100%, 95%);
   }
 }
-.br-alert .wrap .btn.btn-link:active, .br-alert .wrap a:active {
+.br-alert .wrap .btn.btn-link:active,
+.br-alert .wrap a:active {
   position: relative;
   outline: none;
   z-index: 2;
@@ -159,7 +160,8 @@
   background-color: hsl(205deg, 100%, 37%);
   color: hsl(205deg, 100%, 95%);
 }
-.br-alert .wrap .btn.btn-link[data-focus-visible-added], .br-alert .wrap a[data-focus-visible-added] {
+.br-alert .wrap .btn.btn-link[data-focus-visible-added],
+.br-alert .wrap a[data-focus-visible-added] {
   position: relative;
   outline: none;
   z-index: 2;
@@ -176,7 +178,8 @@
   fill: hsl(0deg, 45%, 37%);
 }
 @media (hover: hover) {
-  .br-alert .wrap.error .btn.btn-link:hover, .br-alert .wrap.error a:hover {
+  .br-alert .wrap.error .btn.btn-link:hover,
+  .br-alert .wrap.error a:hover {
     position: relative;
     outline: none;
     z-index: 2;
@@ -185,7 +188,8 @@
     color: hsl(0deg, 45%, 95%);
   }
 }
-.br-alert .wrap.error .btn.btn-link:active, .br-alert .wrap.error a:active {
+.br-alert .wrap.error .btn.btn-link:active,
+.br-alert .wrap.error a:active {
   position: relative;
   outline: none;
   z-index: 2;
@@ -193,7 +197,8 @@
   background-color: hsl(0deg, 45%, 37%);
   color: hsl(0deg, 45%, 95%);
 }
-.br-alert .wrap.error .btn.btn-link[data-focus-visible-added], .br-alert .wrap.error a[data-focus-visible-added] {
+.br-alert .wrap.error .btn.btn-link[data-focus-visible-added],
+.br-alert .wrap.error a[data-focus-visible-added] {
   position: relative;
   outline: none;
   z-index: 2;
@@ -210,7 +215,8 @@
   fill: hsl(120deg, 30%, 37%);
 }
 @media (hover: hover) {
-  .br-alert .wrap.success .btn.btn-link:hover, .br-alert .wrap.success a:hover {
+  .br-alert .wrap.success .btn.btn-link:hover,
+  .br-alert .wrap.success a:hover {
     position: relative;
     outline: none;
     z-index: 2;
@@ -219,7 +225,8 @@
     color: hsl(120deg, 30%, 95%);
   }
 }
-.br-alert .wrap.success .btn.btn-link:active, .br-alert .wrap.success a:active {
+.br-alert .wrap.success .btn.btn-link:active,
+.br-alert .wrap.success a:active {
   position: relative;
   outline: none;
   z-index: 2;
@@ -227,7 +234,8 @@
   background-color: hsl(120deg, 30%, 37%);
   color: hsl(120deg, 30%, 95%);
 }
-.br-alert .wrap.success .btn.btn-link[data-focus-visible-added], .br-alert .wrap.success a[data-focus-visible-added] {
+.br-alert .wrap.success .btn.btn-link[data-focus-visible-added],
+.br-alert .wrap.success a[data-focus-visible-added] {
   position: relative;
   outline: none;
   z-index: 2;
@@ -256,13 +264,14 @@
 }
 
 .btn {
-  font-family: Supreme-Black, "Helvetica", "Arial", sans-serif;
-  font-weight: 400;
   border-radius: 0.375rem;
   padding: 1rem;
   text-decoration: none;
+  font-family: inherit;
   font-size: 1.0625rem;
+  display: inline-grid;
   text-align: center;
+  font-weight: bold;
   transition: none;
   cursor: pointer;
   line-height: 1;
@@ -282,88 +291,78 @@
 .btn:disabled, .btn.disabled {
   opacity: 1;
 }
+
 .btn.btn-primary {
   border: 1px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
   color: white;
   min-width: 8rem;
 }
-.btn.btn-primary path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-primary:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
     border: 1px solid hsl(21deg, 100%, 41%);
+    outline: 2px solid hsl(21deg, 100%, 41%);
     background-color: hsl(21deg, 100%, 41%);
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-primary:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
   border: 1px solid hsl(21deg, 100%, 41%);
+  outline: 2px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-primary[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
   border: 1px solid hsl(21deg, 100%, 41%);
+  outline: 2px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-primary path {
+  fill: currentColor;
+}
 .btn.btn-primary.hide {
   visibility: hidden;
 }
 .btn.btn-primary[disabled=disabled] {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   cursor: not-allowed;
 }
-.btn.btn-primary[disabled=disabled] path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-primary[disabled=disabled]:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-primary[disabled=disabled]:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-primary[disabled=disabled][data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-primary[disabled=disabled] path {
+  fill: currentColor;
+}
 .btn.btn-primary[disabled=disabled].hide {
   visibility: hidden;
 }
+
 .btn.btn-outline-primary {
   background-color: white;
   border: 1px solid hsl(21deg, 100%, 41%);
@@ -436,6 +435,7 @@
 .btn.btn-outline-primary[data-focus-visible-added] path {
   fill: white;
 }
+
 .btn.btn-outline-header {
   background-color: hsl(21deg, 100%, 41%);
   border: 0.125rem solid white;
@@ -479,46 +479,42 @@
 .btn.btn-outline-header[data-focus-visible-added] path {
   fill: hsl(21deg, 100%, 41%);
 }
+
 .btn.btn-info {
   border: 1px solid hsl(205deg, 100%, 37%);
   background-color: hsl(205deg, 100%, 37%);
   color: white;
 }
-.btn.btn-info path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-info:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(205deg, 100%, 37%);
     border: 1px solid hsl(205deg, 100%, 37%);
+    outline: 2px solid hsl(205deg, 100%, 37%);
     background-color: hsl(205deg, 100%, 37%);
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-info:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(205deg, 100%, 37%);
   border: 1px solid hsl(205deg, 100%, 37%);
+  outline: 2px solid hsl(205deg, 100%, 37%);
   background-color: hsl(205deg, 100%, 37%);
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-info[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(205deg, 100%, 37%);
   border: 1px solid hsl(205deg, 100%, 37%);
+  outline: 2px solid hsl(205deg, 100%, 37%);
   background-color: hsl(205deg, 100%, 37%);
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-info path {
+  fill: currentColor;
+}
 .btn.btn-info.hide {
   visibility: hidden;
 }
+
 .btn.btn-outline-info {
   background-color: white;
   border: 1px solid hsl(205deg, 100%, 37%);
@@ -559,57 +555,53 @@
 .btn.btn-outline-info[data-focus-visible-added] path {
   fill: white;
 }
+
 .btn.btn-secondary {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
 }
-.btn.btn-secondary path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-secondary:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-secondary:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-secondary[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-secondary path {
+  fill: currentColor;
+}
 .btn.btn-secondary.hide {
   visibility: hidden;
 }
+
 .btn.btn-outline-secondary {
   background-color: white;
-  border: 1px solid hsl(0deg, 0%, 20%);
-  color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  color: #333333;
 }
 .btn.btn-outline-secondary path {
-  fill: hsl(0deg, 0%, 20%);
+  fill: #333333;
 }
 @media (hover: hover) {
   .btn.btn-outline-secondary:hover {
-    background-color: hsl(0deg, 0%, 20%);
+    background-color: #333333;
     color: white;
     box-shadow: none;
     border: 1px solid 1px;
@@ -620,7 +612,7 @@
   }
 }
 .btn.btn-outline-secondary:active {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -630,7 +622,7 @@
   fill: white;
 }
 .btn.btn-outline-secondary[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -639,22 +631,23 @@
 .btn.btn-outline-secondary[data-focus-visible-added] path {
   fill: white;
 }
+
 .btn.btn-input-edit {
   background-color: white;
-  border: 1px solid hsl(0deg, 0%, 35%);
-  color: hsl(0deg, 0%, 35%);
-  background-color: hsl(0deg, 0%, 85%);
+  border: 1px solid #595959;
+  color: #595959;
+  background-color: #d9d9d9;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-color: hsl(0deg, 0%, 65%);
+  border-color: #a6a6a6;
   padding: 0.625rem 0.75rem;
 }
 .btn.btn-input-edit path {
-  fill: hsl(0deg, 0%, 35%);
+  fill: #595959;
 }
 @media (hover: hover) {
   .btn.btn-input-edit:hover {
-    background-color: hsl(0deg, 0%, 35%);
+    background-color: #595959;
     color: white;
     box-shadow: none;
     border: 1px solid 1px;
@@ -665,7 +658,7 @@
   }
 }
 .btn.btn-input-edit:active {
-  background-color: hsl(0deg, 0%, 35%);
+  background-color: #595959;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -675,7 +668,7 @@
   fill: white;
 }
 .btn.btn-input-edit[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 35%);
+  background-color: #595959;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -684,55 +677,51 @@
 .btn.btn-input-edit[data-focus-visible-added] path {
   fill: white;
 }
+
 .btn.btn-remove {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   line-height: 1.375;
   padding: 0.625em;
 }
-.btn.btn-remove path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-remove:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-remove:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-remove[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-remove path {
+  fill: currentColor;
+}
 .btn.btn-remove.hide {
   visibility: hidden;
 }
+
 .btn.btn-link {
   background-color: transparent;
   text-decoration: underline;
   vertical-align: baseline;
   padding: 0;
   border-radius: 0;
-  font-weight: 400;
+  font-weight: normal;
   text-align: left;
   color: inherit;
   border: none;
@@ -743,65 +732,63 @@
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
 .btn.btn-link:active {
   position: relative;
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
-  border-radius: 0;
-  color: #fff;
+  box-shadow: 0 0 0 0.25rem #333333;
+  background-color: #333333;
+  color: white;
 }
 .btn.btn-link[data-focus-visible-added] {
   position: relative;
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
-  border-radius: 0;
-  color: #fff;
+  box-shadow: 0 0 0 0.25rem #333333;
+  background-color: #333333;
+  color: white;
 }
+
 .btn.btn-video-help {
-  background-color: hsl(0deg, 0%, 95%);
+  background-color: #f2f2f2;
   text-decoration: underline;
   vertical-align: baseline;
   padding: 1.25em;
   border-radius: 0;
-  font-weight: 400;
+  font-weight: normal;
   text-align: left;
   color: inherit;
   border: none;
-  font-family: Supreme-Black, "Helvetica", "Arial", sans-serif;
-  font-weight: 400;
+  font-weight: bold;
   width: 100%;
 }
 @media (hover: hover) {
   .btn.btn-video-help:hover {
-    background-color: hsl(0deg, 0%, 35%);
+    background-color: #595959;
     color: white;
   }
 }
 .btn.btn-video-help:active {
-  background-color: hsl(0deg, 0%, 35%);
+  background-color: #595959;
   color: white;
 }
 .btn.btn-video-help[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 35%);
+  background-color: #595959;
   color: white;
 }
+
 .btn.btn-exit {
   background-color: transparent;
   text-decoration: underline;
   vertical-align: baseline;
   padding: 0;
   border-radius: 0;
-  font-weight: 400;
+  font-weight: normal;
   text-align: left;
   color: inherit;
   border: none;
@@ -850,150 +837,141 @@
 .btn.btn-exit[data-focus-visible-added] path.tint {
   fill: currentColor;
 }
-@media only screen and (max-width: 519px) {
+
+@media only screen and (max-width: 575px) {
   .btn.btn-remove-ticket {
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    background-color: #333333;
     color: white;
     line-height: 1.375;
     padding: 0.625em;
     width: 100%;
   }
-  .btn.btn-remove-ticket path {
-    fill: currentColor;
-  }
 }
-@media only screen and (max-width: 519px) and (hover: hover) {
+@media only screen and (max-width: 575px) and (hover: hover) {
   .btn.btn-remove-ticket:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
-@media only screen and (max-width: 519px) {
+@media only screen and (max-width: 575px) {
   .btn.btn-remove-ticket:active {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
-@media only screen and (max-width: 519px) {
+@media only screen and (max-width: 575px) {
   .btn.btn-remove-ticket[data-focus-visible-added] {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
-@media only screen and (max-width: 519px) {
+@media only screen and (max-width: 575px) {
+  .btn.btn-remove-ticket path {
+    fill: currentColor;
+  }
+}
+@media only screen and (max-width: 575px) {
   .btn.btn-remove-ticket.hide {
     visibility: hidden;
   }
 }
-@media only screen and (min-width: 520px) {
+@media only screen and (min-width: 576px) {
   .btn.btn-remove-ticket {
     background-color: transparent;
     text-decoration: underline;
     vertical-align: baseline;
     padding: 0;
     border-radius: 0;
-    font-weight: 400;
+    font-weight: normal;
     text-align: left;
     color: inherit;
     border: none;
     line-height: 1.3;
   }
 }
-@media only screen and (min-width: 520px) and (hover: hover) {
+@media only screen and (min-width: 576px) and (hover: hover) {
   .btn.btn-remove-ticket:hover {
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
-@media only screen and (min-width: 520px) {
+@media only screen and (min-width: 576px) {
   .btn.btn-remove-ticket:active {
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
-@media only screen and (min-width: 520px) {
+@media only screen and (min-width: 576px) {
   .btn.btn-remove-ticket[data-focus-visible-added] {
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
+
 @media only screen and (max-width: 1199px) {
   .btn.btn-remove-gift {
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    background-color: #333333;
     color: white;
     line-height: 1.375;
     padding: 0.625em;
     width: 100%;
   }
-  .btn.btn-remove-gift path {
-    fill: currentColor;
-  }
 }
 @media only screen and (max-width: 1199px) and (hover: hover) {
   .btn.btn-remove-gift:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 @media only screen and (max-width: 1199px) {
   .btn.btn-remove-gift:active {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 @media only screen and (max-width: 1199px) {
   .btn.btn-remove-gift[data-focus-visible-added] {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
+@media only screen and (max-width: 1199px) {
+  .btn.btn-remove-gift path {
+    fill: currentColor;
+  }
+}
 @media only screen and (max-width: 1199px) {
   .btn.btn-remove-gift.hide {
     visibility: hidden;
@@ -1006,7 +984,7 @@
     vertical-align: baseline;
     padding: 0;
     border-radius: 0;
-    font-weight: 400;
+    font-weight: normal;
     text-align: left;
     color: inherit;
     border: none;
@@ -1018,10 +996,9 @@
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
 @media only screen and (min-width: 1200px) {
@@ -1029,10 +1006,9 @@
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
 @media only screen and (min-width: 1200px) {
@@ -1040,12 +1016,12 @@
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
-    border-radius: 0;
-    color: #fff;
+    box-shadow: 0 0 0 0.25rem #333333;
+    background-color: #333333;
+    color: white;
   }
 }
+
 .btn.btn-membership-card {
   background-color: transparent;
   border: 1px solid white;
@@ -1106,93 +1082,82 @@
 .btn.btn-membership-card[data-focus-visible-added].member-plus {
   color: hsl(223deg, 87%, 21%);
 }
+
 .btn.btn-video-login {
   border: 1px solid white;
   background-color: white;
   color: #0a0a0a;
 }
-.btn.btn-video-login path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-video-login:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem #0a0a0a, 0 0 0 0.4rem white;
     border: 1px solid white;
+    outline: 2px solid white;
     background-color: white;
+    outline-offset: 3px;
     color: #0a0a0a;
   }
 }
 .btn.btn-video-login:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem #0a0a0a, 0 0 0 0.4rem white;
   border: 1px solid white;
+  outline: 2px solid white;
   background-color: white;
+  outline-offset: 3px;
   color: #0a0a0a;
 }
 .btn.btn-video-login[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem #0a0a0a, 0 0 0 0.4rem white;
   border: 1px solid white;
+  outline: 2px solid white;
   background-color: white;
+  outline-offset: 3px;
   color: #0a0a0a;
 }
+.btn.btn-video-login path {
+  fill: currentColor;
+}
 .btn.btn-video-login.hide {
   visibility: hidden;
 }
 .btn.btn-cta {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   display: inline-flex;
   align-items: center;
   gap: 1rem;
   fill: white;
 }
-.btn.btn-cta path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-cta:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-cta:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-cta[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-cta path {
+  fill: currentColor;
+}
 .btn.btn-cta.hide {
   visibility: hidden;
 }
 .btn.btn-carousel {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   position: relative;
   outline: none;
@@ -1202,49 +1167,43 @@
   font-size: 0;
   fill: white;
 }
-.btn.btn-carousel path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-carousel:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-carousel:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-carousel[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-carousel path {
+  fill: currentColor;
+}
 .btn.btn-carousel.hide {
   visibility: hidden;
 }
-@media only screen and (max-width: 959px) {
+@media only screen and (max-width: 991px) {
   .btn.btn-carousel {
     padding: 0.75rem;
   }
 }
 .btn.btn-carousel:disabled {
-  background-color: hsl(0deg, 0%, 85%);
-  border-color: hsl(0deg, 0%, 85%);
+  background-color: #d9d9d9;
+  border-color: #d9d9d9;
   opacity: 1;
 }
 .btn.btn-carousel label {
@@ -1259,6 +1218,7 @@
 }
 .btn.btn-invisible {
   color: inherit;
+  border: none;
   padding: 0;
 }
 @media (hover: hover) {
@@ -1279,52 +1239,46 @@
   padding: 0.75em;
   white-space: nowrap;
 }
-.btn.btn-returns path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-returns:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
     border: 1px solid hsl(21deg, 100%, 41%);
+    outline: 2px solid hsl(21deg, 100%, 41%);
     background-color: hsl(21deg, 100%, 41%);
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-returns:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
   border: 1px solid hsl(21deg, 100%, 41%);
+  outline: 2px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-returns[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
   border: 1px solid hsl(21deg, 100%, 41%);
+  outline: 2px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-returns path {
+  fill: currentColor;
+}
 .btn.btn-returns.hide {
   visibility: hidden;
 }
 .btn.btn-returns:disabled, .btn.btn-returns.disabled {
   background-color: white;
-  border: 1px solid hsl(0deg, 0%, 20%);
-  color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  color: #333333;
 }
 .btn.btn-returns:disabled path, .btn.btn-returns.disabled path {
-  fill: hsl(0deg, 0%, 20%);
+  fill: #333333;
 }
 @media (hover: hover) {
   .btn.btn-returns:disabled:hover, .btn.btn-returns.disabled:hover {
-    background-color: hsl(0deg, 0%, 20%);
+    background-color: #333333;
     color: white;
     box-shadow: none;
     border: 1px solid 1px;
@@ -1335,7 +1289,7 @@
   }
 }
 .btn.btn-returns:disabled:active, .btn.btn-returns.disabled:active {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -1345,7 +1299,7 @@
   fill: white;
 }
 .btn.btn-returns:disabled[data-focus-visible-added], .btn.btn-returns.disabled[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -1355,43 +1309,37 @@
   fill: white;
 }
 .btn.btn-cancel-returns {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   padding: 0.75em;
 }
-.btn.btn-cancel-returns path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-cancel-returns:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-cancel-returns:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-cancel-returns[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-cancel-returns path {
+  fill: currentColor;
+}
 .btn.btn-cancel-returns.hide {
   visibility: hidden;
 }
@@ -1440,7 +1388,7 @@
 .btn.btn-radio {
   border: 1px solid hsl(0deg, 0%, 65%);
   padding: 0.75rem 0.75rem 0.625rem;
-  font-weight: 400;
+  font-weight: normal;
   margin: 0.25rem;
 }
 @media (hover: hover) {
@@ -1448,26 +1396,26 @@
     position: relative;
     outline: none;
     z-index: 2;
-    box-shadow: 0 0 0 0.0625rem hsl(0deg, 0%, 35%);
-    border: 1px solid hsl(0deg, 0%, 35%);
-    background-color: hsl(0deg, 0%, 95%);
+    box-shadow: 0 0 0 0.0625rem #595959;
+    border: 1px solid #595959;
+    background-color: #f2f2f2;
   }
 }
 .btn.btn-radio:active {
   position: relative;
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 0.0625rem hsl(0deg, 0%, 35%);
-  border: 1px solid hsl(0deg, 0%, 35%);
-  background-color: hsl(0deg, 0%, 95%);
+  box-shadow: 0 0 0 0.0625rem #595959;
+  border: 1px solid #595959;
+  background-color: #f2f2f2;
 }
 .btn.btn-radio[data-focus-visible-added] {
   position: relative;
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 0.0625rem hsl(0deg, 0%, 35%);
-  border: 1px solid hsl(0deg, 0%, 35%);
-  background-color: hsl(0deg, 0%, 95%);
+  box-shadow: 0 0 0 0.0625rem #595959;
+  border: 1px solid #595959;
+  background-color: #f2f2f2;
 }
 .btn.btn-menu {
   background-color: hsl(21deg, 100%, 41%);
@@ -1560,38 +1508,32 @@
   vertical-align: middle;
   min-height: 2.5rem;
 }
-.btn.btn-basket path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-basket:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem hsl(21deg, 100%, 41%), 0 0 0 0.4rem white;
     border: 1px solid white;
+    outline: 2px solid white;
     background-color: white;
+    outline-offset: 3px;
     color: hsl(21deg, 100%, 41%);
   }
 }
 .btn.btn-basket:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem hsl(21deg, 100%, 41%), 0 0 0 0.4rem white;
   border: 1px solid white;
+  outline: 2px solid white;
   background-color: white;
+  outline-offset: 3px;
   color: hsl(21deg, 100%, 41%);
 }
 .btn.btn-basket[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem hsl(21deg, 100%, 41%), 0 0 0 0.4rem white;
   border: 1px solid white;
+  outline: 2px solid white;
   background-color: white;
+  outline-offset: 3px;
   color: hsl(21deg, 100%, 41%);
 }
+.btn.btn-basket path {
+  fill: currentColor;
+}
 .btn.btn-basket.hide {
   visibility: hidden;
 }
@@ -1626,7 +1568,7 @@
   fill: currentColor;
 }
 .btn.btn-discover {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
   border: 1px solid white;
   color: white;
   display: inline-flex;
@@ -1639,34 +1581,34 @@
 @media (hover: hover) {
   .btn.btn-discover:hover {
     background-color: white;
-    color: hsl(0deg, 0%, 20%);
+    color: #333333;
     box-shadow: none;
     border: 1px solid 1px;
     outline: none;
   }
   .btn.btn-discover:hover path {
-    fill: hsl(0deg, 0%, 20%);
+    fill: #333333;
   }
 }
 .btn.btn-discover:active {
   background-color: white;
-  color: hsl(0deg, 0%, 20%);
+  color: #333333;
   box-shadow: none;
   border: 1px solid 1px;
   outline: none;
 }
 .btn.btn-discover:active path {
-  fill: hsl(0deg, 0%, 20%);
+  fill: #333333;
 }
 .btn.btn-discover[data-focus-visible-added] {
   background-color: white;
-  color: hsl(0deg, 0%, 20%);
+  color: #333333;
   box-shadow: none;
   border: 1px solid 1px;
   outline: none;
 }
 .btn.btn-discover[data-focus-visible-added] path {
-  fill: hsl(0deg, 0%, 20%);
+  fill: #333333;
 }
 .btn.btn-discover span {
   position: relative;
@@ -1674,15 +1616,15 @@
 }
 .btn.btn-membership-pill {
   background-color: white;
-  border: 1px solid hsl(0deg, 0%, 10%);
-  color: hsl(0deg, 0%, 10%);
+  border: 1px solid #1a1a1a;
+  color: #1a1a1a;
 }
 .btn.btn-membership-pill path {
-  fill: hsl(0deg, 0%, 10%);
+  fill: #1a1a1a;
 }
 @media (hover: hover) {
   .btn.btn-membership-pill:hover {
-    background-color: hsl(0deg, 0%, 10%);
+    background-color: #1a1a1a;
     color: white;
     box-shadow: none;
     border: 1px solid 1px;
@@ -1693,7 +1635,7 @@
   }
 }
 .btn.btn-membership-pill:active {
-  background-color: hsl(0deg, 0%, 10%);
+  background-color: #1a1a1a;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -1703,7 +1645,7 @@
   fill: white;
 }
 .btn.btn-membership-pill[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 10%);
+  background-color: #1a1a1a;
   color: white;
   box-shadow: none;
   border: 1px solid 1px;
@@ -1713,31 +1655,31 @@
   fill: white;
 }
 .btn.btn-membership-pill:hover {
-  background-color: hsl(0deg, 0%, 85%);
-  color: hsl(0deg, 0%, 10%);
+  background-color: #d9d9d9;
+  color: #1a1a1a;
   box-shadow: none;
-  border: 1px solid hsl(0deg, 0%, 10%);
+  border: 1px solid #1a1a1a;
   outline: none;
 }
 .btn.btn-membership-pill:hover path {
-  fill: hsl(0deg, 0%, 10%);
+  fill: #1a1a1a;
 }
 .btn.btn-membership-pill[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 85%);
-  color: hsl(0deg, 0%, 10%);
+  background-color: #d9d9d9;
+  color: #1a1a1a;
   box-shadow: none;
-  border: 1px solid hsl(0deg, 0%, 10%);
+  border: 1px solid #1a1a1a;
   outline: none;
-  outline: 1px solid hsl(0deg, 0%, 10%);
+  outline: 1px solid #1a1a1a;
 }
 .btn.btn-membership-pill[data-focus-visible-added] path {
-  fill: hsl(0deg, 0%, 10%);
+  fill: #1a1a1a;
 }
 .btn.btn-membership-pill[data-status=active] {
-  background-color: hsl(0deg, 0%, 10%);
+  background-color: #1a1a1a;
   color: white;
   box-shadow: none;
-  border: 1px solid hsl(0deg, 0%, 10%);
+  border: 1px solid #1a1a1a;
   outline: none;
 }
 .btn.btn-membership-pill[data-status=active] path {
@@ -1745,16 +1687,16 @@
 }
 @media (hover: hover) {
   .btn.btn-membership-pill[data-status=active]:hover {
-    outline: 2px solid hsl(0deg, 0%, 10%);
+    outline: 2px solid #1a1a1a;
     outline-offset: 0.125rem;
   }
 }
 .btn.btn-membership-pill[data-status=active]:active {
-  outline: 2px solid hsl(0deg, 0%, 10%);
+  outline: 2px solid #1a1a1a;
   outline-offset: 0.125rem;
 }
 .btn.btn-membership-pill[data-status=active][data-focus-visible-added] {
-  outline: 2px solid hsl(0deg, 0%, 10%);
+  outline: 2px solid #1a1a1a;
   outline-offset: 0.125rem;
 }
 .btn.btn-priority-row {
@@ -1840,94 +1782,74 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  justify-content: center;
-  min-width: initial;
-}
-.btn.btn-login-to-book path {
-  fill: currentColor;
 }
 @media (hover: hover) {
   .btn.btn-login-to-book:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
     border: 1px solid hsl(21deg, 100%, 41%);
+    outline: 2px solid hsl(21deg, 100%, 41%);
     background-color: hsl(21deg, 100%, 41%);
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-login-to-book:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
   border: 1px solid hsl(21deg, 100%, 41%);
+  outline: 2px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-login-to-book[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
   border: 1px solid hsl(21deg, 100%, 41%);
+  outline: 2px solid hsl(21deg, 100%, 41%);
   background-color: hsl(21deg, 100%, 41%);
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-login-to-book path {
+  fill: currentColor;
+}
 .btn.btn-login-to-book.hide {
   visibility: hidden;
 }
 .btn.btn-login-to-book[disabled=disabled] {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   cursor: not-allowed;
 }
-.btn.btn-login-to-book[disabled=disabled] path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-login-to-book[disabled=disabled]:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-login-to-book[disabled=disabled]:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-login-to-book[disabled=disabled][data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-login-to-book[disabled=disabled] path {
+  fill: currentColor;
+}
 .btn.btn-login-to-book[disabled=disabled].hide {
   visibility: hidden;
 }
-@media only screen and (max-width: 767px) {
-  .btn.btn-login-to-book {
-    margin-top: 1rem;
-    width: 100%;
-  }
-}
 .btn.btn-sold-out {
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  background-color: #333333;
   color: white;
   display: inline-flex;
   align-items: center;
@@ -1935,38 +1857,32 @@
   pointer-events: none;
   min-width: initial;
 }
-.btn.btn-sold-out path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-sold-out:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-    border: 1px solid hsl(0deg, 0%, 20%);
-    background-color: hsl(0deg, 0%, 20%);
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-sold-out:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-sold-out[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
-  border: 1px solid hsl(0deg, 0%, 20%);
-  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-sold-out path {
+  fill: currentColor;
+}
 .btn.btn-sold-out.hide {
   visibility: hidden;
 }
@@ -1978,38 +1894,32 @@
   align-items: center;
   gap: 0.5rem;
 }
-.btn.btn-add-membership-to-basket path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-add-membership-to-basket:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(217deg, 72%, 53%);
     border: 1px solid hsl(217deg, 72%, 53%);
+    outline: 2px solid hsl(217deg, 72%, 53%);
     background-color: hsl(217deg, 72%, 53%);
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-add-membership-to-basket:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(217deg, 72%, 53%);
   border: 1px solid hsl(217deg, 72%, 53%);
+  outline: 2px solid hsl(217deg, 72%, 53%);
   background-color: hsl(217deg, 72%, 53%);
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-add-membership-to-basket[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(217deg, 72%, 53%);
   border: 1px solid hsl(217deg, 72%, 53%);
+  outline: 2px solid hsl(217deg, 72%, 53%);
   background-color: hsl(217deg, 72%, 53%);
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-add-membership-to-basket path {
+  fill: currentColor;
+}
 .btn.btn-add-membership-to-basket.hide {
   visibility: hidden;
 }
@@ -2021,38 +1931,32 @@
   align-items: center;
   gap: 0.5rem;
 }
-.btn.btn-remove-membership-from-basket path {
-  fill: currentColor;
-}
 @media (hover: hover) {
   .btn.btn-remove-membership-from-basket:hover {
-    position: relative;
-    outline: none;
-    z-index: 2;
-    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 45%, 37%);
     border: 1px solid hsl(0deg, 45%, 37%);
+    outline: 2px solid hsl(0deg, 45%, 37%);
     background-color: hsl(0deg, 45%, 37%);
+    outline-offset: 3px;
     color: white;
   }
 }
 .btn.btn-remove-membership-from-basket:active {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 45%, 37%);
   border: 1px solid hsl(0deg, 45%, 37%);
+  outline: 2px solid hsl(0deg, 45%, 37%);
   background-color: hsl(0deg, 45%, 37%);
+  outline-offset: 3px;
   color: white;
 }
 .btn.btn-remove-membership-from-basket[data-focus-visible-added] {
-  position: relative;
-  outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 45%, 37%);
   border: 1px solid hsl(0deg, 45%, 37%);
+  outline: 2px solid hsl(0deg, 45%, 37%);
   background-color: hsl(0deg, 45%, 37%);
+  outline-offset: 3px;
   color: white;
 }
+.btn.btn-remove-membership-from-basket path {
+  fill: currentColor;
+}
 .btn.btn-remove-membership-from-basket.hide {
   visibility: hidden;
 }
@@ -2131,6 +2035,42 @@
 .btn.btn-additional-information[data-focus-visible-added] path {
   fill: white;
 }
+.btn.btn-toggle-password {
+  border: 1px solid #333333;
+  background-color: #333333;
+  color: white;
+  place-items: center;
+  padding: 0;
+}
+@media (hover: hover) {
+  .btn.btn-toggle-password:hover {
+    border: 1px solid #333333;
+    outline: 2px solid #333333;
+    background-color: #333333;
+    outline-offset: 3px;
+    color: white;
+  }
+}
+.btn.btn-toggle-password:active {
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
+  color: white;
+}
+.btn.btn-toggle-password[data-focus-visible-added] {
+  border: 1px solid #333333;
+  outline: 2px solid #333333;
+  background-color: #333333;
+  outline-offset: 3px;
+  color: white;
+}
+.btn.btn-toggle-password path {
+  fill: currentColor;
+}
+.btn.btn-toggle-password.hide {
+  visibility: hidden;
+}
 .btn.expand {
   display: block;
 }
@@ -2156,7 +2096,7 @@
   padding-bottom: 1.5rem;
   padding-top: 1.5rem;
 }
-@media only screen and (min-width: 520px) {
+@media only screen and (min-width: 576px) {
   .br-container--inner:not(.footer) {
     padding-bottom: 2.5rem;
     padding-top: 2.5rem;
@@ -2169,7 +2109,7 @@
 .br-container--inner.thin {
   max-width: 50rem;
 }
-@media only screen and (min-width: 520px) {
+@media only screen and (min-width: 576px) {
   .br-container--inner.masthead {
     padding-bottom: 3rem;
     padding-top: 3rem;
@@ -2180,12 +2120,11 @@
 }
 
 body {
-  font-family: Supreme-Light, "Helvetica", "Arial", sans-serif;
-  font-weight: 400;
+  font-family: Supreme, Arial, Helvetica, sans-serif;
+  background-color: #f2f2f2;
   line-height: 1.35;
-  color: hsl(0deg, 0%, 20%);
+  color: #333333;
   margin: 0;
-  background-color: hsl(0deg, 0%, 95%);
 }
 
 .topbar {
@@ -2209,14 +2148,14 @@ body {
 }
 @media (hover: hover) {
   .topbar .sections a:hover {
-    background-color: hsl(0deg, 0%, 95%);
+    background-color: #f2f2f2;
   }
 }
 .topbar .sections a:active {
-  background-color: hsl(0deg, 0%, 95%);
+  background-color: #f2f2f2;
 }
 .topbar .sections a[data-focus-visible-added] {
-  background-color: hsl(0deg, 0%, 95%);
+  background-color: #f2f2f2;
 }
 
 .page {
@@ -2267,8 +2206,8 @@ body {
 .list.list-palette.brand-contemporary-music .item.item-palette.tint-70 {
   background-color: #c6c1d7;
 }
-.list.list-palette.brand-contemporary-music .item.item-palette.tint-85 {
-  background-color: #e2e0eb;
+.list.list-palette.brand-contemporary-music .item.item-palette.tint-88 {
+  background-color: #e8e6ef;
 }
 .list.list-palette.brand-contemporary-music .item.item-palette.tint-95 {
   background-color: #f5f5f8;
@@ -2291,8 +2230,8 @@ body {
 .list.list-palette.brand-membership--support .item.item-palette.tint-70 {
   background-color: #c1d5f5;
 }
-.list.list-palette.brand-membership--support .item.item-palette.tint-85 {
-  background-color: #e0eafa;
+.list.list-palette.brand-membership--support .item.item-palette.tint-88 {
+  background-color: #e6eefb;
 }
 .list.list-palette.brand-membership--support .item.item-palette.tint-95 {
   background-color: #f5f8fd;
@@ -2315,8 +2254,8 @@ body {
 .list.list-palette.brand-tours--public-spaces .item.item-palette.tint-70 {
   background-color: #f1c8b3;
 }
-.list.list-palette.brand-tours--public-spaces .item.item-palette.tint-85 {
-  background-color: #f8e4d9;
+.list.list-palette.brand-tours--public-spaces .item.item-palette.tint-88 {
+  background-color: #f9e9e0;
 }
 .list.list-palette.brand-tours--public-spaces .item.item-palette.tint-95 {
   background-color: #fdf6f2;
@@ -2339,8 +2278,8 @@ body {
 .list.list-palette.brand-classical-music .item.item-palette.tint-70 {
   background-color: #dfd4c0;
 }
-.list.list-palette.brand-classical-music .item.item-palette.tint-85 {
-  background-color: #efe9e0;
+.list.list-palette.brand-classical-music .item.item-palette.tint-88 {
+  background-color: #f2eee6;
 }
 .list.list-palette.brand-classical-music .item.item-palette.tint-95 {
   background-color: #faf8f5;
@@ -2363,8 +2302,8 @@ body {
 .list.list-palette.brand-talks--workshops .item.item-palette.tint-70 {
   background-color: #cdd7e3;
 }
-.list.list-palette.brand-talks--workshops .item.item-palette.tint-85 {
-  background-color: #e6ebf1;
+.list.list-palette.brand-talks--workshops .item.item-palette.tint-88 {
+  background-color: #ebeff4;
 }
 .list.list-palette.brand-talks--workshops .item.item-palette.tint-95 {
   background-color: #f7f8fa;
@@ -2387,8 +2326,8 @@ body {
 .list.list-palette.brand-theatre--dance .item.item-palette.tint-70 {
   background-color: #b3d8e2;
 }
-.list.list-palette.brand-theatre--dance .item.item-palette.tint-85 {
-  background-color: #d9ecf0;
+.list.list-palette.brand-theatre--dance .item.item-palette.tint-88 {
+  background-color: #e1f0f3;
 }
 .list.list-palette.brand-theatre--dance .item.item-palette.tint-95 {
   background-color: #f2f9fa;
@@ -2411,8 +2350,8 @@ body {
 .list.list-palette.brand-talks--events .item.item-palette.tint-70 {
   background-color: #cdd7e3;
 }
-.list.list-palette.brand-talks--events .item.item-palette.tint-85 {
-  background-color: #e6ebf1;
+.list.list-palette.brand-talks--events .item.item-palette.tint-88 {
+  background-color: #ebeff4;
 }
 .list.list-palette.brand-talks--events .item.item-palette.tint-95 {
   background-color: #f7f8fa;
@@ -2435,8 +2374,8 @@ body {
 .list.list-palette.brand-art--design .item.item-palette.tint-70 {
   background-color: #f8b3d6;
 }
-.list.list-palette.brand-art--design .item.item-palette.tint-85 {
-  background-color: #fbd9eb;
+.list.list-palette.brand-art--design .item.item-palette.tint-88 {
+  background-color: #fce0ef;
 }
 .list.list-palette.brand-art--design .item.item-palette.tint-95 {
   background-color: #fef2f8;
@@ -2459,8 +2398,8 @@ body {
 .list.list-palette.brand-generic .item.item-palette.tint-70 {
   background-color: #f1c8b3;
 }
-.list.list-palette.brand-generic .item.item-palette.tint-85 {
-  background-color: #f8e4d9;
+.list.list-palette.brand-generic .item.item-palette.tint-88 {
+  background-color: #f9e9e0;
 }
 .list.list-palette.brand-generic .item.item-palette.tint-95 {
   background-color: #fdf6f2;
@@ -2483,8 +2422,8 @@ body {
 .list.list-palette.brand-library .item.item-palette.tint-70 {
   background-color: #f1c8b3;
 }
-.list.list-palette.brand-library .item.item-palette.tint-85 {
-  background-color: #f8e4d9;
+.list.list-palette.brand-library .item.item-palette.tint-88 {
+  background-color: #f9e9e0;
 }
 .list.list-palette.brand-library .item.item-palette.tint-95 {
   background-color: #fdf6f2;
@@ -2507,8 +2446,8 @@ body {
 .list.list-palette.brand-cinema .item.item-palette.tint-70 {
   background-color: #bcdbbf;
 }
-.list.list-palette.brand-cinema .item.item-palette.tint-85 {
-  background-color: #deeddf;
+.list.list-palette.brand-cinema .item.item-palette.tint-88 {
+  background-color: #e4f1e5;
 }
 .list.list-palette.brand-cinema .item.item-palette.tint-95 {
   background-color: #f4f9f4;
@@ -2531,14 +2470,14 @@ body {
 .list.list-palette.brand-hire .item.item-palette.tint-70 {
   background-color: #f1c8b3;
 }
-.list.list-palette.brand-hire .item.item-palette.tint-85 {
-  background-color: #f8e4d9;
+.list.list-palette.brand-hire .item.item-palette.tint-88 {
+  background-color: #f9e9e0;
 }
 .list.list-palette.brand-hire .item.item-palette.tint-95 {
   background-color: #fdf6f2;
 }
 .list.list-palette.brand-programme .item.item-palette {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
 }
 .list.list-palette.brand-programme .item.item-palette.shade-65 {
   background-color: #121212;
@@ -2555,8 +2494,8 @@ body {
 .list.list-palette.brand-programme .item.item-palette.tint-70 {
   background-color: #c2c2c2;
 }
-.list.list-palette.brand-programme .item.item-palette.tint-85 {
-  background-color: #e0e0e0;
+.list.list-palette.brand-programme .item.item-palette.tint-88 {
+  background-color: #e7e7e7;
 }
 .list.list-palette.brand-programme .item.item-palette.tint-95 {
   background-color: whitesmoke;
@@ -2579,8 +2518,8 @@ body {
 .list.list-palette.brand-shop .item.item-palette.tint-70 {
   background-color: #b8dbd4;
 }
-.list.list-palette.brand-shop .item.item-palette.tint-85 {
-  background-color: #dcede9;
+.list.list-palette.brand-shop .item.item-palette.tint-88 {
+  background-color: #e3f0ee;
 }
 .list.list-palette.brand-shop .item.item-palette.tint-95 {
   background-color: #f3f9f8;
@@ -2591,22 +2530,22 @@ body {
 }
 
 .list.list-palette.grey .item.item-palette.l11 {
-  background-color: hsl(0deg, 0%, 10%);
+  background-color: #1a1a1a;
 }
 .list.list-palette.grey .item.item-palette.l21 {
-  background-color: hsl(0deg, 0%, 20%);
+  background-color: #333333;
 }
 .list.list-palette.grey .item.item-palette.l44 {
-  background-color: hsl(0deg, 0%, 35%);
+  background-color: #595959;
 }
 .list.list-palette.grey .item.item-palette.l65 {
-  background-color: hsl(0deg, 0%, 65%);
+  background-color: #a6a6a6;
 }
 .list.list-palette.grey .item.item-palette.l87 {
-  background-color: hsl(0deg, 0%, 85%);
+  background-color: #d9d9d9;
 }
 .list.list-palette.grey .item.item-palette.l96 {
-  background-color: hsl(0deg, 0%, 95%);
+  background-color: #f2f2f2;
 }
 
 .list.list-palette.sample .item.item-palette {