/* --- Reset --- */ /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* --- Variables --- */ :root { /* spacing */ --base-padding: 1rem; --section-padding: calc(var(--base-padding) * 5) 0; /* typography */ --base-lh: 1.25em; --typo-base-spacing: 3.4rem; /* Colors */ --white: #fff; --black: #000; --brand: #52877F; --highlight: #59A89C; --text-color: #323E44; --bg-mustard: #BF8D2DCC; --bg-brand-dark: #323E44CC; --bg-footer: var(--text-color); --bg-page: #DBEFF6; /* nav */ --offside-width: calc(300 / 16 *1rem); --logo-width: calc(200 / 16 * 1rem); /* misc */ --global-radius: 3rem; } /* --- Base --- */ html { scroll-behavior: smooth; } body { background-color: var(--bg-page); color: var(--text-color); } main { -webkit-perspective: 2px; perspective: 2px; } a { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: color .25s ease-in-out, -webkit-transform .25s ease-in-out; transition: color .25s ease-in-out, -webkit-transform .25s ease-in-out; -o-transition: transform .25s ease-in-out, color .25s ease-in-out; transition: transform .25s ease-in-out, color .25s ease-in-out; transition: transform .25s ease-in-out, color .25s ease-in-out, -webkit-transform .25s ease-in-out; } a:hover { -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); -webkit-transition: color .25s ease-in-out, -webkit-transform .25s ease-in-out; transition: color .25s ease-in-out, -webkit-transform .25s ease-in-out; -o-transition: transform .25s ease-in-out, color .25s ease-in-out; transition: transform .25s ease-in-out, color .25s ease-in-out; transition: transform .25s ease-in-out, color .25s ease-in-out, -webkit-transform .25s ease-in-out; } a.no-anim:hover { -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; -o-transition: none; transition: none; } /* --- Modifiers --- */ .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex--wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex--main-centered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex--cross-centered { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex--main-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (max-width: 739px) { .flex--cross-end-mobile { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .flex--main-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex--cross-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .flex--column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex--align-self-end { -ms-flex-item-align: end; align-self: flex-end; } @media screen and (max-width: 739px) { .flex--column-revers-mobile { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .relative { position: relative; } .top-margin { margin-top: var(--typo-base-spacing); } .top-margin--half { margin-top: calc(var(--typo-base-spacing) / 2); } .bottom-margin { margin-bottom: var(--typo-base-spacing); } .bottom-margin--half { margin-bottom: calc(var(--typo-base-spacing) / 2); } @media screen and (max-width: 739px) { .top-margin { margin-top: calc(var(--typo-base-spacing) / 2); } .top-margin--half { margin-top: calc(var(--typo-base-spacing) / 4); } .bottom-margin { margin-bottom: calc(var(--typo-base-spacing) / 2); } .bottom-margin--half { margin-bottom: calc(var(--typo-base-spacing) / 4); } } .no-margin { margin: 0 !important; } .no-botom-padding { padding-bottom: 0 !important; } .width-100p { width: 100%; } .overflow { overflow: hidden; } /* --- Grid --- */ .row { width: 100%; max-width: calc(1200 / 16 * 1rem); margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row--reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .row--column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .row--big-grid { max-width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; } .narrow { max-width: calc(800 / 16 * 1rem); } .col { padding-right: var(--base-padding); padding-left: var(--base-padding); } @media screen and (max-width: 739px) { .col { padding-bottom: var(--base-padding); } } .col--half { width: 50%; } @media screen and (max-width: 739px) { .col--half { width: 100%; } } .col--one-third { width: calc(100 / 3 * 1%); } @media screen and (max-width: 739px) { .col--one-third { width: 100%!important; } .col--one-third.mobile-preserve-grid { width: calc(100 / 3 * 1%)!important; } } .col--two-third { width: calc(100 / 3 * 2 * 1%); } @media screen and (max-width: 739px) { .col--two-third { width: 100%; } .col--two-third.mobile-preserve-grid { width: calc(100 / 3 *2 * 1%)!important; } } .col--three-quarter { width: calc(100 / 4 * 3 * 1%); } @media screen and (max-width: 739px) { .col--three-quarter { width: 100%; } } .col--quarter { width: 25%; } @media screen and (max-width: 739px) { .col--quarter { width: 100%; } } .col--full { width: 100%; } .col--only-one { max-width: calc(800 / 16 * 1rem); width: 100%; margin: 0 auto; } /* --- Typography --- */ h1, h2, h3, p, .big-cta, .list { font-size: var(--min); font-size: clamp(var(--min), var(--val), var(--max)); line-height: var(--base-lh); } h1, h2 { --min: 2rem; --val: 1.8rem + 1vw; --max: 3rem; } .big-cta { --min: 1rem; --val: 0.6rem + 2vw; --max: 3rem; } h3, p { --min: 1.5rem; --val: 1.064rem + 0.93vw; --max: 2.18rem; } h3, p, .list { font-weight: 300; } .link { text-decoration: underline; } .list { --min: 1rem; --val: 0.90rem + 0.45vw; --max: 1.25rem; } /* Fonts */ body { font-family: 'Noto Sans', sans-serif; } /* Modifiers */ .light-font { font-weight: 300; } .bold-font { font-weight: 700; } .text--centered { text-align: center; } .text--right { text-align: right; } .text--left { text-align: left; } .text--small { font-size: calc(14 / 16 * 1rem); } .text--white { color: var(--white) } .italic { font-style: italic; } /* --- Colors --- */ .bg-footer { background-color: var(--bg-footer); } .bg-mustard { background-color: var(--bg-mustard); } .bg-brand-dark { background-color: var(--bg-brand-dark); } .bg-white { background-color: var(--white); } /* --- Offside --- */ /* offside-js 1.4.0 26-03-2018 * Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation * https://github.com/toomuchdesign/offside.git * * by Andrea Carraro * Available under the MIT license */ /* Off-canvas element CSS */ .offside { position: fixed; /* Does not play well with some old browsers (see: README) */ width: var(--offside-width); height: 100%; top: 0; z-index: 9999; overflow: auto; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } /* Left off-canvas elements default status: out of the page */ /*.offside, .offside--left { left: var(--offside-width); }*/ /* Right off-canvas elements default status: out of the page */ .offside--right { left: auto; right: calc(var(--offside-width) * -1); } /* * Left off-canvas element is open: * - off-canvas element slides in * - container elements slides out */ /*.offside--left.is-open, .offside-js--is-left .offside-sliding-element { -webkit-transform: translate3d($offside-width, 0, 0); -moz-transform: translate3d($offside-width, 0, 0); -ms-transform: translate3d($offside-width, 0, 0); -o-transform: translate3d($offside-width, 0, 0); transform: translate3d($offside-width, 0, 0); }*/ /* * Right off-canvas element is open: * - off-canvas element slides in * - container elements slides out */ .offside--right.is-open, .offside-js--is-right .offside-sliding-element { -webkit-transform: translate3d(calc(var(--offside-width) * -1), 0, 0); transform: translate3d(calc(var(--offside-width) * -1), 0, 0); } /* Elements Transitions */ .offside-js--interact .offside, .offside-js--interact .offside-sliding-element { -webkit-transition: -webkit-transform .3s cubic-bezier(.16, .68, .43, .99); transition: -webkit-transform .3s cubic-bezier(.16, .68, .43, .99); -o-transition: transform .3s cubic-bezier(.16, .68, .43, .99); transition: transform .3s cubic-bezier(.16, .68, .43, .99); transition: transform .3s cubic-bezier(.16, .68, .43, .99), -webkit-transform .3s cubic-bezier(.16, .68, .43, .99); /* improves performance issues on mobile*/ -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } /* Body overflow */ .offside-js--init { overflow-x: hidden; } /* Fallback movements for browser not supporting CSS 3d Transitions ----------------------------------------------- */ /* Modernizr false negative csstransforms3d fix, reset CSS 3d Transitions */ /*.no-csstransforms3d .offside { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .no-csstransforms3d .offside-sliding-element { overflow-x: hidden; position: relative; }*/ /* Element is open: off-canvas element slides in */ /*.no-csstransforms3d .offside--left.is-open { left: 0; } .no-csstransforms3d .offside--right.is-open { right: 0; }*/ /* Element is open: container elements slide out */ /*.no-csstransforms3d > .offside-js--is-left .offside-sliding-element { right: var(--offside-width); } .no-csstransforms3d > .offside-js--is-right .offside-sliding-element { left: var(--offside-width); }*/ /* Offside menu custom */ .offside-open { opacity: 1; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .offside-open.is-hidden { opacity: 0; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .offside-menu { -webkit-box-shadow: .5rem 0 1rem rgba(var(--black), .5); box-shadow: .5rem 0 1rem rgba(var(--black), .5); padding: 0 1rem 1rem 1rem; background: var(--white); } .overlay { z-index: 11; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--black); visibility: hidden; opacity: 0; cursor: pointer; -webkit-transition: visibility 0s ease, opacity .3s ease; -o-transition: visibility 0s ease, opacity .3s ease; transition: visibility 0s ease, opacity .3s ease; } .overlay.menu-opened { visibility: visible; opacity: .65; } /* --- Nav --- */ .main-menu, .main-menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .main-menu { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .main-menu ul { padding-right: 1.5rem; } .main-menu__container { width: 100vw; padding: .5rem 0; background: transparent; z-index: 10; } .main-menu__container nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .logo-container { padding: 0 1.5rem; display: block; } @media screen and (max-width: 739px) { .main-menu.desktop { display: none; } } .main-menu.mobile { display: none; } @media screen and (max-width: 739px) { .main-menu.mobile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 .75rem; } } .burger, .times { position: relative; cursor: pointer; display: inline-block; height: 1.125rem; width: 1.125rem; margin-left: .5rem; } .times span, .burger span { display: block; height: .125rem; left: 0; position: absolute; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; width: 18px; -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease; transition: background 0.3s ease, -webkit-transform 0.3s ease; -o-transition: background 0.3s ease, transform 0.3s ease; transition: background 0.3s ease, transform 0.3s ease; transition: background 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; } .burger span { background-color: var(--text-color); } .burger span:nth-child(1) { top: .125rem; } .burger span:nth-child(2) { top: .5rem; } .burger span:nth-child(3) { top: .875rem; } .times span { background-color: var(--text-color); } .times span:nth-child(1) { top: .5rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .times span:nth-child(2) { top: .5rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); width: calc(19 / 16 * 1rem); } .main-menu .offside-open, .main-menu .offside-close { cursor: pointer; line-height: 1; font-size: .875rem; padding: .5rem; margin: .375rem .5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; text-decoration: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .main-menu .offside-open { margin-right: 1.5rem; color: var(--text-color); border: 1px solid var(--text-color); } .main-menu .offside-close { border: 1px solid var(--text-color); } .offside-menu .menu li:first-child { -ms-flex-item-align: end; align-self: flex-end; } .main-menu a, .main-menu a:visited, .main-menu .dropdown span { text-decoration: none; color: var(--text-color); font-size: 1.125rem; padding: .75rem 1.5rem; } .main-menu a:hover, .main-menu a:active { text-decoration: underline; } .main-menu li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .morph-menu { position: fixed; top: 0; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; -webkit-transition: padding 0.3s ease, background-color 0.3s ease, -webkit-box-shadow 0.3s ease; transition: padding 0.3s ease, background-color 0.3s ease, -webkit-box-shadow 0.3s ease; -o-transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; } .logo { width: var(--logo-width); -webkit-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; } .morph-menu--morphed { background-color: rgb(255,255,255,.80); -webkit-box-shadow: 0 9px 10px rgba(0,0,0,.25); box-shadow: 0 9px 10px rgba(0,0,0,.25); padding: 0; -webkit-transition: padding 0.3s ease, background-color 0.3s ease, -webkit-box-shadow 0.3s ease; transition: padding 0.3s ease, background-color 0.3s ease, -webkit-box-shadow 0.3s ease; -o-transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; } .morph-menu--morphed .logo { width: calc(var(--logo-width) * .8); -webkit-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; } .main-menu.menu--vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .main-menu.menu--vertical li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .main-menu.menu--vertical a { color: var(--text-color); } .main-menu.menu--vertical a:visited { color: var(--text-color); } .dropdown { position: relative; cursor: pointer; } .dropdown-content{ background-color: var(--white); display: none; position: absolute; top: -.5rem; left: 0; padding: 4.875rem .5rem .5rem .5rem; width: 100%; z-index: -1; } .dropdown-content a { display: block; padding: .5em .5rem .5rem 1rem; font-size: .85; } .dropdown:hover .dropdown-content { display: block; border-radius: 0 0 .5rem .5rem; box-shadow: 0 9px 10px rgba(0,0,0,.25); } .morph-menu .dropdown-content { -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease; -o-transition: padding 0.3s ease; transition: padding 0.3s ease; } .morph-menu--morphed .dropdown-content { padding: 4rem .5rem .5rem .5rem; } .submenu { padding-left: .5rem; } .submenu a { display: block; } /* --- Hero --- */ .hero { width: 100vw; } .hero__content { max-width: calc(680 / 16 *1rem); padding-top: calc(200 / 16 * 1rem); padding-bottom: calc(200 / 16 * 1rem); } /* --- Rounded Box --- */ .rounded-box { border-radius: var(--global-radius); padding: calc(var(--base-padding) * 2); } .rounded-box--thick { padding: calc(var(--base-padding) * 4); } @media screen and (max-width: 739px) { .rounded-box--thick { padding: calc(var(--base-padding) * 2); } } /* --- Thick Box --- */ .thick-box { padding: calc(var(--base-padding) * 4); } .thick-box--bottom { padding-bottom: calc(var(--base-padding) * 4); } @media screen and (max-width: 739px) { .thick-box { padding: calc(var(--base-padding) * 2); } .thick-box--bottom { padding-bottom: calc(var(--base-padding) * 2); } } /* --- Misc --- */ .section-base { padding: var(--section-padding); } .anchor { position: absolute; top: calc(76 / 16 * -1rem); } .partners img { max-width: calc(260 / 16 * 1rem); max-height: calc(106 / 16 *1rem); -o-object-fit: contain; object-fit: contain; } .partners-logo-container { padding: 3rem 0; } .noiz { position: absolute; top: 0; right: 0; height: 100%; width: 100%; overflow: hidden; } [data-parallax-noiz] { width: 100%; height: 100%; background-image: url(/images/noiz.png); background-position: 50%; background-repeat: repeat; } .overflow-img { position: absolute; max-inline-size: none; max-block-size: none; z-index: -1; width: 900px; } [data-parallax-layer-1] { top: 6rem; right: 0; } [data-parallax-layer-2] { bottom: 0; left: 0; } [data-parallax-layer-3] { top: 6rem; right: 50%; } [data-parallax-layer-4] { top: 0; left: 0; width: 600px; } [data-parallax-layer-5] { top: 0; right: 0; width: 800px; } @media screen and (max-width: 739px) { .overflow-img { width: 600px; } [data-parallax-layer-1] { right: 50%; } [data-parallax-layer-2] { left: 50%; padding-bottom: 100%; } .offside-sliding-element { overflow: hidden; } } .top-element { margin-top: 6rem; } .underline { text-decoration: underline; } .gallery-img-container { padding-top: calc(1500 / 2000 * 100%); width: 100%; position: relative; } .gallery-img-container a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1rem 0; } .gallery-img-container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* --- Button --- */ .btn { padding: 0.75rem 2rem; color: var(--white); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border-radius: var(--global-radius); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .btn--primary { background-color: var(--brand); -webkit-transition: background-color .25s ease-in-out , -webkit-transform .25s ease-in-out; transition: background-color .25s ease-in-out , -webkit-transform .25s ease-in-out; -o-transition: background-color .25s ease-in-out , transform .25s ease-in-out; transition: background-color .25s ease-in-out , transform .25s ease-in-out; transition: background-color .25s ease-in-out , transform .25s ease-in-out , -webkit-transform .25s ease-in-out; } .btn--primary:hover { background-color: var(--highlight); -webkit-transition: background-color .25s ease-in-out , -webkit-transform .25s ease-in-out; transition: background-color .25s ease-in-out , -webkit-transform .25s ease-in-out; -o-transition: background-color .25s ease-in-out , transform .25s ease-in-out; transition: background-color .25s ease-in-out , transform .25s ease-in-out; transition: background-color .25s ease-in-out , transform .25s ease-in-out , -webkit-transform .25s ease-in-out; } .btn--centered { margin: 0 auto; } .btn-extended { width: 100%; padding: var(--typo-base-spacing) 0 ; } @media screen and (max-width: 739px) { .btn-extended { padding: calc(var(--typo-base-spacing) / 2) 0 ; } } /* --- Read more badge --- */ .read-more-badge { width: 70%; min-width: 120px; margin: 0 auto; } .read-more-badge a { width: 100%; display: inline-block; padding: var(--base-padding); text-align: center; background-color: var(--brand); border-radius: 0 0 1rem 1rem; color: var(--white); } .read-more-badge a:hover { background-color: var(--highlight); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* --- Timeline --- */ .timeline-row { margin-bottom: calc(320 / 16 * 1rem); opacity: 0; } .timeline-row.visible { -webkit-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; opacity: 1; } @media screen and (max-width: 739px) { .timeline-row { margin-bottom: calc(60 / 16 * 1rem); } } .timeline--content h2 { font-family: 'Noto Serif', sans-serif; font-size: calc( 60 / 16 * 1rem); } .timeline--content p { font-size: calc( 24 / 16 * 1rem); font-weight: 700; line-height: calc( 28 / 16 * 1rem); text-align: right; } .timeline--content.blur p { -webkit-animation: blur-anim .3s linear forwards; animation: blur-anim .3s linear forwards; } @-webkit-keyframes blur-anim { 100% { -webkit-filter: blur(2px); filter: blur(2px); opacity: .5}; } @media screen and (max-width: 739px) { .timeline { margin-top: calc(var(--base-padding) * 3 * -1); } .timeline--content h2 { font-size: calc( 30 / 16 * 1rem); } .timeline--content p { font-size: calc( 14 / 16 * 1rem); } } /*.timeline--small { margin-bottom: 8rem; }*/ .timeline--small .timeline-row { margin-bottom: calc(320 / 64 * 1rem); } /* --- Lightbox + Gallery --- */ .pswp { --pswp-bg: #000; --pswp-placeholder-bg: #222; --pswp-root-z-index: 100000; --pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); /* defined via js: --pswp-transition-duration: 333ms; */ --pswp-icon-color: #fff; --pswp-icon-color-secondary: #4f4f4f; --pswp-icon-stroke-color: #4f4f4f; --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--pswp-icon-color); } /* Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) */ .pswp { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--pswp-root-z-index); display: none; -ms-touch-action: none; touch-action: none; outline: 0; opacity: 0.003; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Prevents focus outline on the root element, (it may be focused initially) */ .pswp:focus { outline: 0; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; max-inline-size: none; max-block-size: none; } .pswp--open { display: block; } .pswp, .pswp__bg { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: opacity; } .pswp__bg { opacity: 0.005; background: var(--pswp-bg); } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: zoom-in; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: move; cursor: -webkit-grab; cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: -webkit-grabbing; cursor: grabbing; } /* :active to override grabbing cursor */ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor: -webkit-zoom-out; cursor: zoom-out; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__item { /* z-index for fade transition */ z-index: 1; overflow: hidden; } .pswp__hidden { display: none !important; } /* Allow to click through pswp__content element, but not its children */ .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } /* PhotoSwipe UI */ /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg-container { display: grid; } .pswp__error-msg { margin: auto; font-size: 1em; line-height: 1; color: var(--pswp-error-text-color); } /* class pswp__hide-on-close is applied to elements that should hide (for example fade out) when PhotoSwipe is closed and show (for example fade in) when PhotoSwipe is opened */ .pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; -webkit-transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); -o-transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10; /* always overlap slide content */ pointer-events: none; /* hidden elements should not be clickable */ } /* class pswp--ui-visible is added when opening or closing transition starts */ .pswp--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto; } /*