Files
web/apps/scandic-web/app/globals.css
Erik Tiekstra 4c10989e8e Feat/BOOK-424 campaign banner
Approved-by: Bianca Widstam
2025-10-29 12:47:40 +00:00

108 lines
2.6 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 */
--campaign-banner-height: 0px; /* Will be overridden when a campaign banner is visible */
--alert-and-banner-height: calc(
var(--sitewide-alert-height) + var(--campaign-banner-height)
);
--main-menu-mobile-height: 73px;
--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;
--chatbot-z-index: 149;
--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;
}
/* 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;
}
#kindly-chat-api {
z-index: var(--chatbot-z-index);
}
/* Hide chat widget when booking widget is open */
body:has([data-booking-widget-open="true"]) #kindly-chat-api {
z-index: -1 !important;
}
@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);
}
}