:root { --font-primary: 'Merienda', cursive; --font-secondary: 'Kaushan Script', cursive; --font-tertiary: 'Dancing Script', cursive; --color-white: #ffffff; --color-white-100: #f1f1f1; --color-gray: #898989; --color-black: #101010; --border-radius: 0.25rem; --header-shadow: 0rem 0.25rem 1rem -0.125rem rgb(0 0 0 / 30%); --shadow-inset: inset 0 0 0.5rem var(--color-gray); --shadow-outset: 0 0 0.5rem var(--color-gray); } body { margin: 0; overflow: overlay; font-family: var(--font-primary); background: var(--color-white-100); height: 100vh; } body.noscroll { overflow-y: hidden; } body svg { overflow: visible; } br { display: none; } ::-webkit-scrollbar { width: 0.5rem; } /* ::-webkit-scrollbar-track { background: var(--color-white); } */ ::-webkit-scrollbar-thumb { border: 0.125rem solid rgba(0, 0, 0, 0); background-clip: padding-box; border-radius: 5rem; background-color: var(--color-black); } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-gray); } .close { display: none; position: absolute; top: -0.1875rem; right: -0.1875rem; padding: 0.5rem; cursor: pointer; } .close:hover svg{ fill: var(--color-gray); } .close--preview { display: block; top: 0.25rem; right: 0.25rem; } .loader { position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; transform: translate(-50%,-50%); } .loader div { position: absolute; top: 2rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-gray); animation-timing-function: cubic-bezier(0, 1, 1, 0); } .loader div:nth-child(1) { left: 0.5rem; animation: loader-one 0.6s infinite; } .loader div:nth-child(2) { left: 0.5rem; animation: loader-two 0.6s infinite; } .loader div:nth-child(3) { left: 2rem; animation: loader-two 0.6s infinite; } .loader div:nth-child(4) { left: 3.5rem; animation: loader-three 0.6s infinite; } @keyframes loader-one {0% {transform: scale(0);}100% {transform: scale(1);}} @keyframes loader-two {0% {transform: translate(0, 0);}100% {transform: translate(1.5rem, 0);}} @keyframes loader-three {0%{transform: scale(1);}100%{transform: scale(0);}} .container { max-width: 80rem; margin-inline: auto; } .section { position: relative; } .section--block { width: 100vw; height: calc(100% - 5rem); overflow: hidden; } .section__intro { position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh - 5rem); display: flex; flex-direction: column-reverse; background: var(--color-white-100); transition: left 1.25s ease-in-out; } .section__picture { width: 100vw; max-height: 18.75rem; height: auto; object-fit: cover; } .section__content { overflow-y: auto; margin-block: 0 0.75rem; } .section__footer { display: flex; justify-content: space-between; width: 100%; font-size: 0.875rem; gap: 1rem; } .section__footer iframe{ max-width: 100%; height: auto; aspect-ratio: 16/9; box-shadow: var(--shadow-outset); } .section__footer p { display: none; margin: auto 0; text-align: justify; } .section__footer div:last-child { display: flex; flex-direction: column; } .section__welcome { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; padding: 2rem; } .section__welcome, .section__left, .section__right { box-shadow: var(--shadow-inset); } .section__welcome .title { font-size: 2rem; text-decoration: underline; margin-block: 0; } .section--badges { display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -0.5rem 0.75rem #c9c9c9; border-top: 0.0625rem solid #aaaaaa; } .section__badges { text-align: center; background: var(--color-white); border-radius: 0.25rem; padding: 3rem 2rem; margin: 2rem; box-shadow: 0.0625rem 0.0625rem 0.5rem rgba(0, 0, 0, 0.2), 0.0625rem 0.125rem 0.25rem rgba(0, 0, 0, 0.4); } .section__badges .title { font-size: 0.875rem; margin-block: 0.25rem; } .section__badges p { font-size: 0.875rem; margin-block: 0; } .section__badges div + div { margin-top: 2rem; } .section__header { display: flex; align-items: start; justify-content: space-between; width: 100%; font-size: 2rem; line-height: 1.15; } .section__header .title { margin-block: 0 0.75rem; } .section__links { display: flex; align-items: center; flex-direction: column; gap: 1.25rem; } .section__links .button { width: 10rem; justify-content: center; } .section__left, .section__right { position: absolute; top: 0; left: 100%; display: flex; flex-direction: column; padding: 1.5rem; width: calc(100vw - 3rem); height: calc(100% - 3rem); background: var(--color-white-100); transition: all 1.25s ease-in-out; border-left: 0.0625rem solid var(--color-gray); } .section__right .list{ font-size: 0.875rem; } .section__right .list + .list{ margin-top: 0.75rem; } .section__right li+li{ margin-top: 0.125rem; } .section__left { left: -100%; } .section__gallery { position: absolute; top: 50%; left: 50%; display: none; align-items: center; justify-content: center; width: 8rem; height: 8rem; background-color: var(--color-white); box-shadow: var(--shadow-outset); transform: translate(-50%,-50%); z-index: 1; transition: all 1.25s ease; scrollbar-width: none; -ms-overflow-style: none; } .section__gallery::-webkit-scrollbar { display: none; } .section__gallery.is-open { display: flex; } .section__gallery.loaded { width: 95%; height: 95%; } .section__gallery.loaded .loader{ opacity: 0; } .section__gallery.loaded .close{ display: block; } .section__gallery.loaded .gallery{ filter: blur(0); } .section--preview { position: fixed; display: none; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-white-100); z-index: 10; } /* .section--preview.horizontal .close--preview { left: 0.25rem; right: unset; } .section--preview.horizontal img { width: 90vh; height: 90vw; transform: rotate(-90deg); } .section--preview.horizontal .preview { left: calc(50% - 3.25rem); transform: rotate(-90deg); } .section--preview.horizontal .preview--prev { top: unset; bottom: 0; } .section--preview.horizontal .preview--next { top: 0; right: unset; } */ .section--preview.is-open { display: flex; } .section--preview img { width: 90%; max-width: 100rem; height: 90%; max-height: 56.25rem; object-fit: cover; box-shadow: var(--shadow-outset); } .section--switch .section__intro{ flex-direction: column; } .section--switch .section__left { left: -100%; } .section--switch .section__right { left: 100%; } .section__control { display: flex; flex-direction: column; gap: 1rem; } .section__price { overflow-y: auto; margin-bottom: 0.625rem; } .header { position: sticky; top: 0; left: 0; width: 100%; height: 5rem; background-color: var(--color-white); box-shadow: var(--header-shadow),var(--shadow-inset); margin-bottom: -5rem; z-index: 10; } .header.is-open { box-shadow: unset; } .header.is-open .header__mobile { display: block; position: fixed; } .header__section { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; } .header__mobile { display: none; width: 100%; height: calc(100% - 4.75rem); background-color: var(--color-white); z-index: 20; } .header__button { position: relative; border: 0; background: transparent; padding: 2rem 2rem; } .header__button > span{ display: block; position: absolute; height: 0.125rem; width: 1.625rem; background: var(--color-black); opacity: 1; left: calc(50% - 0.8125rem); border-radius: 10rem; transform: rotate(0deg); transition: all 0.3s ease; } .header__button > span:nth-child(1) { top: calc(50% - 0.4375rem); } .header__button > span:nth-child(2) { top: calc(50% - 0.0625rem); } .header__button > span:nth-child(3) { top: calc(50% - 0.0625rem); } .header__button > span:nth-child(4) { top: calc(50% + 0.3125rem); } .header__button.is-active > span:nth-child(1), .header__button.is-active > span:nth-child(4) { width: 0%; left: 50%; } .header__button.is-active > span:nth-child(2) { transform: rotate(45deg); } .header__button.is-active > span:nth-child(3) { transform: rotate(-45deg); } .footer { display: flex; justify-content: center; padding-block: 2rem 5rem; background: var(--color-white); } .footer__content .title { text-decoration: underline; } .footer__content .link { display: block; } .footer__content ul + ul { margin-top: 1.5rem; } .link { color: var(--color-black); display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; } .link--underline { text-decoration: underline; } .link--underline:hover { text-decoration: none; } .link--logo { font-size: clamp(1rem,2.5vw,2rem); gap: 1.25rem; } .link--logo img { padding: 0.5rem 0 0.5rem 0.75rem; } .list--dropdown .link { justify-content: center; width: calc(100% - 0.75rem); font-size: 1.25rem; padding: 0.375rem; } .list--dropdown .link:hover { opacity: 0.6; } .link--socials { margin-right: 1rem; border-radius: 1rem; box-shadow: var(--shadow-outset); } .link--socials:hover { scale: 0.95; } .button { position: relative; display: flex; align-items: center; background: var(--color-white); border-radius: var(--border-radius); font-size: 1.25rem; color: var(--color-black); padding: 0.25rem 0.75rem; border: 0.0625rem solid var(--color-gray); font-family: var(--font-primary); text-decoration: none; box-shadow: 0.0625rem 0.0625rem 0.5rem rgba(0, 0, 0, 0.2), 0.0625rem 0.125rem 0.25rem rgba(0, 0, 0, 0.4); z-index: 0; cursor: pointer; user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .button::before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-size: 220% auto; background-image: linear-gradient(to right, #ffffff 0%, #eeeded 60%, #ffffff 100%); border-radius: var(--border-radius); -o-border-radius: var(--border-radius); -ms-border-radius: var(--border-radius); -moz-border-radius: var(--border-radius); -webkit-border-radius: var(--border-radius); transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .button:hover { border: 0.0625rem solid var(--color-gray); box-shadow: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4); } .button:hover::before { background-position: right center; } .button:active { box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.4); } .button--icon, .button--back, .button--gallery { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .button--back { padding: 0.375rem 0.875rem; gap: 0.25rem; } .button--gallery { margin: 0 0 0 auto; padding: 0.25rem 0.875rem; gap: 0.375rem; } .button--gallery svg { margin-left: -0.25rem; } .list { list-style: none; padding: 0; margin: 0; } .list--menu { display: none; font-size: 1.5rem; } .list--menu > li { position: relative; display: flex; width: 8.75rem; height: 5rem; } .list--menu > li:hover .header__dropdown { height: 9.375rem; } .list--menu .header__dropdown { position: absolute; top: 4rem; width: 8.75rem; height: 0; background: var(--color-white); transition: .3s ease; border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: 0rem 0.75rem 0.75rem -0.125rem rgb(0 0 0 / 30%); overflow: hidden; } .list--menu > li + li { margin-left: 0.5rem; } .list--menu > li > a { position: relative; justify-content: center; width: 100%; height: 100%; } .list--menu > li > a::after { content: ''; position: absolute; left: 0; bottom: 1rem; width: 100%; height: 0.625rem; background: no-repeat 50% 70%; background-image: url("../../img/underline.webp"); background-size: 65% 0.4375rem; transition: opacity 0.15s; opacity: 0; } .list--menu li:hover > a::after{ opacity: 1; } .list--dropdown { padding-top: 1rem; } .list--object { font-size: 0.875rem; } .list--object li+li { margin-top: 1rem; } .section__right .list--dot { list-style-type: circle; margin-left: 1.375rem; font-size: 0.6875rem; } .list--mobile { text-align: center; font-size: 1.375rem; border-top: 0.0625rem solid var(--color-black); padding-top: 0.75rem; } .list--mobile .link { padding-inline: 3rem; } .list--mobile li + li { margin-top: 0.375rem; } .link--title { font-size: 1.75rem; font-weight: bold; text-decoration: underline; } .swiper { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .swiper__image { width: 100vw; height: 100%; object-fit: cover; object-position: 33% 0%; } .swiper__content { position: absolute; bottom: 0; z-index: 1; left: 0; right: 0; background: var(--color-white); padding: 1rem 0 2rem; font-size: 2rem; } .swiper__content .title{ display: flex; align-items: center; justify-content: center; text-align: center; height: 4.5rem; font-size: 2.25rem; line-height: 1; margin-block: 0 1rem; } .swiper__links { display: flex; justify-content: center; gap: 1rem; } .swiper__slide { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; transition: left 1.25s ease-in-out; } .swiper__slide:first-child { left: 0; } .swiper__slide:last-child { left: -100%; } .gallery { display: grid; grid-template-columns: 1fr; gap: 0.375rem; filter: blur(3rem); width: calc(100% - 3rem); height: calc(100% - 3rem); overflow-x: hidden; overflow-y: scroll; transition: 0.625s filter linear, 0.625s -webkit-filter linear; -o-transition: 0.625s -o-filter linear; -ms-transition: 0.625s -ms-filter linear; -moz-transition: 0.625s -moz-filter linear; -moz-transition: 0.625s filter linear; -webkit-transition: 0.625s -webkit-filter linear; } .gallery__item img { width: 100%; object-fit: cover; aspect-ratio: 16/9; cursor: pointer; } .preview { position: absolute; top: calc(50% - 2rem); background: var(--color-white); box-shadow: var(--shadow-outset); cursor: pointer; } .preview:hover { background: var(--color-white-100); } .preview--prev { left: 0; padding: 1.25rem 1rem 1.25rem 1.5rem; border-radius: 0 var(--border-radius) var(--border-radius) 0; } .preview--next { right: 0; padding: 1.25rem 1.5rem 1.25rem 1rem; border-radius: var(--border-radius) 0 0 var(--border-radius); } .show-medium { display: none; } @media screen and (min-width: 40.0625rem) { br { display: block; } .section__links { align-items: start; flex-direction: row; justify-content: space-between; gap: 0; width: 100%; } .section__links--events { justify-content: start; gap: 1.5rem; } .section__links button { width: unset; } .section__links .button { width: unset; } } @media screen and (min-width: 50.0625rem) { .show-medium { display: block; } .swiper__content { left: unset; right: 10%; bottom: 10%; padding: 1rem 1.5rem; border-radius: var(--border-radius); box-shadow: -0.375rem -0.375rem 0.625rem rgba(0, 0, 0, 0.4), 0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.4); } .swiper__content .title{ height: unset; font-size: 3rem; } .gallery { grid-template-columns: 1fr 1fr; } .swiper__image { object-position: 20% 0%; } .section__badges { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; max-width: 81.25rem; } .section__badges div + div { margin-top: 0; } .section--badges { height: 30rem; } .list--menu { display: flex; } .header__button { display: none; } .footer__content { display: flex; justify-content: space-between; min-width: 40rem; } } @media screen and (min-width: 75.0625rem) { .section--switch .section__intro { flex-direction: row; } .close--preview { top: 2rem; right: 1rem; } .section--block { height: 40rem; max-height: calc(100vh - 5rem); } .section__intro { height: 100%; flex-direction: row; } .section__left, .section__right { position: absolute; top: 0; left: 50%; width: calc(50% - 6.5rem); height: calc(100% - 6.5rem); padding: 3.25rem; } .section__right .list{ font-size: 1rem; } .section__right .list + .list{ margin-top: 1.25rem; } .section__left { left: -50%; } .section--switch .section__left { left: 0%; } .section__picture { width: 50vw; height: 100%; max-height: 100%; z-index: 1; } .section__welcome { min-height: 25rem; } .gallery { grid-template-columns: 1fr 1fr 1fr 1fr; } .footer__content { min-width: 50rem; } } @media screen and (min-width: 91.375rem) { .hide-text { display: none; } .section__footer p { display: block; } .section__footer iframe { max-width: unset; } } @media screen and (min-width: 100.0625rem) { .close--preview { right: 2.5%; } .swiper__content { bottom: 20%; } }