d3368e9b85
feat(SW-2782): Updated header as per design, added language switcher and user menu * feat(SW-2782): Updated header as per design, added language switcher and user menu * feat(SW-2782): Updated UI as per design * feat(SW-2782): Optimised code with use of Popover and modal from RAC Approved-by: Anton Gunnarsson
99 lines
2.3 KiB
CSS
99 lines
2.3 KiB
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 */
|
|
--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);
|
|
|
|
--TEMP-sas-default: #000099;
|
|
--TEMP-sas-20: #00175c;
|
|
--TEMP-sas-40: #0030c2;
|
|
--Text-sas-20: #333;
|
|
|
|
@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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|