@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800;900&family=League+Spartan:wght@500;600;700;800;900&family=Sacramento&display=swap");

:root {
  --nb-font-body: "Barlow", Arial, sans-serif;
  --nb-font-heading: "League Spartan", "Barlow", Arial, sans-serif;
  --nb-font-script: "Sacramento", cursive;
  --nb-title-gradient: linear-gradient(128deg, #10385c 0%, #075e77 58%, #08a0ac 145%);
  --nb-title-ink: #ffffff;
  --nb-title-muted: #d4f2f5;
  --nb-title-accent: #8ee8f5;
}

html,
body {
  font-family: var(--nb-font-body) !important;
  font-weight: 500;
}

button,
input,
select,
textarea,
option,
a {
  font-family: var(--nb-font-body) !important;
}

p,
li,
dd,
dt,
td,
label,
input,
select,
textarea {
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend,
th,
.page-title,
.section-title,
.modal-title,
.card-title,
.panel-title,
.drawer-title,
.title-text {
  font-family: var(--nb-font-heading) !important;
}

h1 em,
h2 em,
h3 em,
.script-title,
.brand-script,
.hero-script,
.display-script {
  font-family: var(--nb-font-script) !important;
  font-style: normal;
  font-weight: 400 !important;
}

/* One recognisable title surface across every Now Boarding workspace and portal. */
:is(
  .workspace-command-hero,
  .catalogue-page-intro,
  .store-command-hero,
  .sales-admin-command,
  .branch-command-hero,
  .events-shell > .hero,
  .leaderboard-hero,
  .history-hero,
  .purchase-head,
  .reservation-head,
  .public-timer-shell > header,
  #social-app .page-head,
  body.user-facing .page-header > .hero,
  body.admin-facing .page-header > .hero,
  body.user-facing .lb-hero,
  body.admin-facing .lb-hero,
  #appMain > .view > .hero,
  #appMain .page-head
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.15rem, 3vw, 2.25rem) !important;
  border: 0 !important;
  border-radius: clamp(1rem, 2.4vw, 1.75rem) !important;
  background: var(--nb-title-gradient) !important;
  color: var(--nb-title-ink) !important;
  box-shadow: 0 18px 44px rgba(16, 56, 92, 0.18) !important;
}

:is(
  .workspace-command-hero,
  .catalogue-page-intro,
  .store-command-hero,
  .sales-admin-command,
  .branch-command-hero,
  .events-shell > .hero,
  .leaderboard-hero,
  .history-hero,
  .purchase-head,
  .reservation-head,
  .public-timer-shell > header,
  #social-app .page-head,
  body.user-facing .page-header > .hero,
  body.admin-facing .page-header > .hero,
  body.user-facing .lb-hero,
  body.admin-facing .lb-hero,
  #appMain > .view > .hero,
  #appMain .page-head
)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(12rem, 26vw, 23rem);
  aspect-ratio: 1;
  top: -70%;
  right: -7%;
  border: clamp(1.5rem, 4vw, 3rem) solid rgba(255, 255, 255, 0.075);
  border-radius: 50%;
  pointer-events: none;
}

:is(
  .workspace-command-hero,
  .catalogue-page-intro,
  .store-command-hero,
  .sales-admin-command,
  .branch-command-hero,
  .events-shell > .hero,
  .leaderboard-hero,
  .history-hero,
  .purchase-head,
  .reservation-head,
  .public-timer-shell > header,
  #social-app .page-head,
  body.user-facing .page-header > .hero,
  body.admin-facing .page-header > .hero,
  body.user-facing .lb-hero,
  body.admin-facing .lb-hero,
  #appMain > .view > .hero,
  #appMain .page-head
) :is(h1, h2, h3, strong) {
  color: var(--nb-title-ink) !important;
}

:is(
  .workspace-command-hero,
  .catalogue-page-intro,
  .store-command-hero,
  .sales-admin-command,
  .branch-command-hero,
  .events-shell > .hero,
  .leaderboard-hero,
  .history-hero,
  .purchase-head,
  .reservation-head,
  .public-timer-shell > header,
  #social-app .page-head,
  body.user-facing .page-header > .hero,
  body.admin-facing .page-header > .hero,
  body.user-facing .lb-hero,
  body.admin-facing .lb-hero,
  #appMain > .view > .hero,
  #appMain .page-head
) :is(p, .lb-subtitle) {
  color: var(--nb-title-muted) !important;
}

:is(
  .workspace-command-hero,
  .catalogue-page-intro,
  .store-command-hero,
  .sales-admin-command,
  .branch-command-hero,
  .events-shell > .hero,
  .leaderboard-hero,
  .history-hero,
  .purchase-head,
  .reservation-head,
  .public-timer-shell > header,
  #social-app .page-head,
  body.user-facing .page-header > .hero,
  body.admin-facing .page-header > .hero,
  body.user-facing .lb-hero,
  body.admin-facing .lb-hero,
  #appMain > .view > .hero,
  #appMain .page-head
) :is(.eyebrow, em, .script-title, .brand-script, .hero-script, .display-script) {
  color: var(--nb-title-accent) !important;
}

strong,
b {
  font-family: inherit;
}

:is(.inventory-command-hero, .table-timer-web-app .board-head, .table-timer-web-app .history-head) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: clamp(1.15rem, 3vw, 2.25rem) !important;
  border: 0 !important;
  border-radius: clamp(1rem, 2.4vw, 1.75rem) !important;
  background: var(--nb-title-gradient) !important;
  color: var(--nb-title-ink) !important;
  box-shadow: 0 18px 44px rgba(16, 56, 92, 0.18) !important;
}

:is(.inventory-command-hero, .table-timer-web-app .board-head, .table-timer-web-app .history-head)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(12rem, 26vw, 23rem);
  aspect-ratio: 1;
  top: -70%;
  right: -7%;
  border: clamp(1.5rem, 4vw, 3rem) solid rgba(255, 255, 255, 0.075);
  border-radius: 50%;
}

:is(.inventory-command-hero, .table-timer-web-app .board-head, .table-timer-web-app .history-head) :is(h1, p, .section-title) {
  color: var(--nb-title-ink) !important;
}

:is(.inventory-command-hero, .table-timer-web-app .board-head, .table-timer-web-app .history-head) em {
  color: var(--nb-title-accent) !important;
}