web/apps/partner-sas/globals.css

:root {
  --current-max-width: 113.5rem;

  --max-width: 94.5rem;
  --max-width-content: min(calc(100dvw - var(--max-width-spacing)), 74.75rem);
  --max-width-text-block: 49.5rem;
  --current-mobile-site-header-height: 52.41px;
  --max-width-navigation: 89.5rem;

  --max-width-single-spacing: var(--Layout-Mobile-Margin-Margin-min);
  --max-width-spacing: calc(var(--Space-x2) * 2);
  --max-width-page: min(
    calc(100dvw - var(--max-width-spacing)),
    var(--max-width-navigation)
  );

  --sitewide-alert-height: 0px; /* Will be overridden when a sitewide alert is visible */
  --sitewide-alert-sticky-height: 0px; /* Will be overridden when a sticky sitewide alert is visible */
  --alert-and-banner-height: calc(var(--sitewide-alert-height));
  --main-menu-mobile-height: 103px;
  --main-menu-desktop-height: 125px;
  --booking-widget-mobile-height: 75px;
  --booking-widget-tablet-height: 150px;
  --booking-widget-desktop-height: 77px;
  --hotel-page-map-desktop-width: 23.75rem;

  /* Z-INDEX */
  --header-z-index: 11;
  --menu-overlay-z-index: 11;
  --booking-widget-z-index: 10;
  --booking-widget-open-z-index: 100;
  --dialog-z-index: 9;
  --back-to-top-button: 80;
  --language-switcher-z-index: 85;
  --sidepeek-z-index: 100;
  --lightbox-z-index: 150;
  --default-modal-overlay-z-index: 100;
  --default-modal-z-index: 101;

  --modal-box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  --popup-box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);

  @supports (interpolate-size: allow-keywords) {
    interpolate-size: allow-keywords;
  }
}

html,
body {
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  color: var(--Text-Default);
}

body.overflow-hidden {
  overflow: hidden;
}

body.partner-sas {
  /* Over-ride variables according to SAS theme / color scheme */
  --SAS-Default: #009;
  --SAS-20: #00175c;
  --SAS-40: #0030c2;
  --SAS-50: #003df5;
  --SAS-90: #f0faff;
  --SAS-Gray-20: #333;
  --SAS-Gray-40: #666;
  --SAS-Gray-50: #808080;
  --SAS-Gray-90: #e5e5e5;
  --SAS-Gray-100: #f5f5f5;

  --Background-Primary: var(--SAS-Gray-100);
  --Base-Border-Normal: var(--SAS-Gray-40);
  --Base-Border-Hover: var(--SAS-Gray-40);
  --Base-Border-Subtle: var(--SAS-Gray-90);
  --Base-Button-Primary-Fill-Normal: var(--SAS-50);
  --Base-Button-Primary-Fill-Hover: var(--SAS-50);
  --Base-Button-Tertiary-Fill-Normal: var(--SAS-50);
  --Base-Button-Tertiary-Fill-Hover: var(--SAS-50);
  --Base-Button-Secondary-On-Fill-Normal: var(--SAS-50);
  --Base-Button-Secondary-Fill-Normal: var(--SAS-50);
  --Base-Button-Secondary-Border-Normal: var(--SAS-50);
  --Base-Button-Text-On-Fill-Normal: var(--SAS-40);
  --Base-Button-Text-On-Fill-Hover: var(--SAS-40);
  --Base-Surface-Subtle-Normal: var(--SAS-90);
  --Base-Surface-Secondary-light-Normal: var(--SAS-Gray-100);
  --Base-Surface-Secondary-light-Hover: var(--SAS-90);
  --Base-Text-Accent: var(--SAS-50);
  --Base-Text-Medium-contrast: var(--SAS-Gray-50);

  --Border-Divider-Default: var(--SAS-Gray-90);
  --Border-Divider-Subtle: var(--SAS-Gray-90);
  --Border-Strong: var(--SAS-Gray-40);
  --Border-Interactive-Selected: var(--SAS-Gray-40);
  --Border-Interactive-Default: var(--SAS-Gray-40);

  --Component-Button-Brand-Primary-Fill-Default: var(--SAS-50);
  --Component-Button-Brand-Primary-Fill-Hover: var(--SAS-50);
  --Component-Button-Brand-Secondary-Border-Default: var(--SAS-40);
  --Component-Button-Brand-Tertiary-Fill-Default: var(--SAS-50);
  --Component-Button-Brand-Tertiary-Fill-Hover: var(--SAS-50);
  --Component-Button-Inverted-On-fill-Default: var(--SAS-50);
  --Component-Button-Inverted-On-fill-Hover: var(--SAS-50);
  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(--SAS-50);
  --Component-Button-Brand-Secondary-On-fill-Default: var(--SAS-40);
  --Component-Button-Brand-Secondary-On-fill-Hover: var(--SAS-40);
  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
    --SAS-Gray-100
  );

  --Icon-Interactive-Default: var(--SAS-20);
  --Primary-Dark-Surface-Normal: var(--SAS-Default);
  --Primary-Light-On-Surface-Accent: var(--SAS-50);
  --Primary-Light-On-Surface-Divider-subtle: var(--SAS-Gray-90);
  --Primary-Light-Surface-Normal: var(--SAS-90);
  --Surface-Brand-Primary-1-OnSurface-Default: var(--SAS-40);
  --Surface-Brand-Primary-2-Default: var(--SAS-Default);
  --Surface-Primary-Hover: var(--SAS-Gray-90);
  --Surface-Primary-Hover-Accent: var(--SAS-90);
  --Surface-Secondary-Default: var(--Base-Surface-Subtle-Normal);
  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Active: var(--SAS-20);
  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Disabled: var(--Neutral-15);

  --Scandic-Brand-Warm-White: var(--Background-Primary);
  --Text-Accent-Primary: var(--SAS-20);
  --Text-Brand-OnAccent-Accent-Secondary: var(--SAS-Gray-40);
  --Text-Heading: var(--SAS-Gray-20);
  --Text-Interactive-Default: var(--SAS-20);
  --Text-Interactive-Hover: var(--SAS-40);
  --Text-Interactive-Secondary: var(--SAS-40);
  --UI-Input-Controls-Border-Normal: var(--SAS-Gray-40);
  --UI-Input-Controls-Surface-Hover: var(--SAS-Gray-90);

  --Scandic-Brand-Burgundy: var(--Text-Default);
  --Scandic-Peach-80: var(--SAS-Gray-40);
  --Scandic-Grey-00: var(--SAS-Gray-100);
  --Scandic-Grey-10: var(--SAS-Gray-90);
  --Scandic-Beige-40: var(--SAS-Gray-40);
}

/* From Tailwind */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media screen and (min-width: 768px) {
  :root {
    --max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min);
    --max-width-spacing: calc(var(--Space-x3) * 2);
  }

  body.overflow-hidden {
    overflow: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 1367px) {
  :root {
    --max-width-single-spacing: var(--Layout-Desktop-Margin-Margin-min);
    --max-width-spacing: calc(var(--Space-x5) * 2);
  }
}