diff --git a/assets/css/app.css b/assets/css/app.css index 047d9db..8e250d8 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,1016 +1,12 @@ -: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; - - z-index: 99999999; -} - -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%; - } - } - \ No newline at end of file +@import "core.css"; +@import "layout.css"; +@import "header.css"; +@import "footer.css"; + +@import "links.css"; +@import "buttons.css"; +@import "lists.css"; +@import "swiper.css"; +@import "components.css"; +@import "utility.css"; +@import "media.css"; diff --git a/assets/css/appt.css b/assets/css/appt.css deleted file mode 100644 index 8e250d8..0000000 --- a/assets/css/appt.css +++ /dev/null @@ -1,12 +0,0 @@ -@import "core.css"; -@import "layout.css"; -@import "header.css"; -@import "footer.css"; - -@import "links.css"; -@import "buttons.css"; -@import "lists.css"; -@import "swiper.css"; -@import "components.css"; -@import "utility.css"; -@import "media.css"; diff --git a/assets/css/header.css b/assets/css/header.css index 2a97c53..e7e9fad 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -8,8 +8,6 @@ box-shadow: var(--header-shadow),var(--shadow-inset); margin-bottom: -5rem; z-index: 10; - - /* z-index: 10; fixme */ } .header.is-open { diff --git a/assets/css/layout.css b/assets/css/layout.css index b0c92b1..c25415b 100644 --- a/assets/css/layout.css +++ b/assets/css/layout.css @@ -8,7 +8,6 @@ } .section--block { - width: 100vw; height: calc(100% - 5rem); overflow: hidden; } diff --git a/assets/css/swiper.css b/assets/css/swiper.css index f525917..7782811 100644 --- a/assets/css/swiper.css +++ b/assets/css/swiper.css @@ -6,7 +6,7 @@ } .swiper__image { - width: 100vw; + width: 100%; height: 100%; object-fit: cover; object-position: 33% 0%;