Fix/sw-1127 image fixes for lightbox * fix(SW-1127): move back to top button behind lightbox * fix(SW-1127): don't loop lightbox thumbnails * fix(SW-1127): nicer animation in the gallery This both fixes a bug in the gallery where the animation in the carousel didn't work so good and also animates the images different directions depending on if the user go left or right. Approved-by: Matilda Landström
175 lines
3.7 KiB
CSS
175 lines
3.7 KiB
CSS
@font-face {
|
|
font-display: fallback;
|
|
font-family: "biro script plus";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(/_static/fonts/biro-script-plus/regular.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "brandon text";
|
|
font-weight: 700;
|
|
src:
|
|
url(/_static/fonts/brandon-text/bold.woff2) format("woff2"),
|
|
url(/_static/fonts/brandon-text/bold.woff) format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "brandon text";
|
|
font-weight: 900;
|
|
src:
|
|
url(/_static/fonts/brandon-text/black.woff2) format("woff2"),
|
|
url(/_static/fonts/brandon-text/black.woff) format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira mono";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(/_static/fonts/fira-mono/regular.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira mono";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url(/_static/fonts/fira-mono/medium.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira mono";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url(/_static/fonts/fira-mono/bold.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira sans";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url(/_static/fonts/fira-sans/light.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira sans";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(/_static/fonts/fira-sans/regular.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira sans";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url(/_static/fonts/fira-sans/medium.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira sans";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url(/_static/fonts/fira-sans/semibold.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira sans";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url(/_static/fonts/fira-sans/bold.woff2) format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: fallback;
|
|
font-family: "fira sans";
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: url(/_static/fonts/fira-sans/black.woff2) format("woff2");
|
|
}
|
|
|
|
:root {
|
|
--current-max-width: 113.5rem;
|
|
|
|
--max-width: 94.5rem;
|
|
--max-width-content: 74.75rem;
|
|
--max-width-text-block: 49.5rem;
|
|
--current-mobile-site-header-height: 52.41px;
|
|
--max-width-navigation: 89.5rem;
|
|
|
|
--max-width-spacing: calc(var(--Layout-Mobile-Margin-Margin-min) * 2);
|
|
--max-width-page: min(
|
|
calc(100dvw - var(--max-width-spacing)),
|
|
var(--max-width-navigation)
|
|
);
|
|
|
|
--main-menu-mobile-height: 75px;
|
|
--main-menu-desktop-height: 125px;
|
|
--booking-widget-mobile-height: 75px;
|
|
--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;
|
|
--sidepeek-z-index: 100;
|
|
--lightbox-z-index: 150;
|
|
--default-modal-overlay-z-index: 100;
|
|
--default-modal-z-index: 101;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
ul {
|
|
padding-inline-start: 0;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
:root {
|
|
--max-width-spacing: calc(var(--Layout-Tablet-Margin-Margin-min) * 2);
|
|
}
|
|
|
|
body.overflow-hidden {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
:root {
|
|
--max-width-spacing: calc(var(--Layout-Desktop-Margin-Margin-min) * 2);
|
|
}
|
|
}
|