diff --git a/docs/Museum.af668e6f.css b/docs/Museum.af668e6f.css new file mode 100644 index 000000000..308a7bcf8 --- /dev/null +++ b/docs/Museum.af668e6f.css @@ -0,0 +1,2 @@ +h1{font-family:Roboto,sans-serif;font-weight:400}.text-inner{opacity:0;transition:transform .6s .6s,opacity 1s .6s;display:block;transform:translateY(100%)}.text-line{display:block;overflow:hidden}.text-inner.is-visible{opacity:1;transform:translateY(0)}.nav{pointer-events:none;z-index:1;overscroll-behavior-y:contain;opacity:0;transition:opacity .2s;position:fixed;overflow-y:auto}.nav:target{pointer-events:all;opacity:1}.nav:has(.nav__shadow) .nav__background{z-index:2;background:rgba(0,0,0,.5);width:100%;height:100vh;position:fixed;top:0;left:0}.nav__shadow{z-index:3;background-color:#1a5a4c;width:100%;height:225px;position:fixed;top:0}.nav__data{margin-left:20px;margin-right:20px}@media (min-width:640px){.nav__data{margin-left:35px;margin-right:35px}}@media (min-width:1280px){.nav__data{margin-left:55px;margin-right:55px}}.nav__data{gap:100px;margin-top:40px;display:-ms-flexbox;display:flex}.nav__exit{z-index:4;aspect-ratio:1;background-image:url(ri-close-fill.99137aa5.png);background-position:50%;background-repeat:no-repeat;background-size:cover;height:24px;transition:transform .3s}.nav__exit:hover{transform:rotate(90deg)}.nav__schedule{-ms-flex-direction:column;flex-direction:column;gap:20px;max-width:360px;display:-ms-flexbox;display:flex}.nav__schedule-container{gap:30px;display:-ms-flexbox;display:flex}.nav__schedule *{color:#fff;font-size:14px;line-height:150%}.nav__schedule-time{white-space:nowrap}.nav__links{--column:2;grid-template-columns:repeat(var(--column), 1fr);column-gap:20px;display:grid}@media (min-width:640px){.nav__links{--column:6;column-gap:30px}}@media (min-width:1280px){.nav__links{--column:12}}.nav__links{gap:20px;display:-ms-flexbox;display:flex}.nav__links-container{-ms-flex-direction:column;flex-direction:column;gap:20px;display:-ms-flexbox;display:flex}.nav__link{color:#fff;font-size:16px;font-weight:500;line-height:100%;text-decoration:none;transition:opacity .3s}.nav__line-conatiner{background-color:#fff;-ms-flex-item-align:stretch;align-self:stretch;width:1px;display:-ms-flexbox;display:flex}.to-top{z-index:3;aspect-ratio:1;height:50px;position:fixed;bottom:20px;right:20px}@media (min-width:640px){.to-top{display:none}}.title{font-size:36px}@media (min-width:640px){.title{font-size:48px}}@media (min-width:1280px){.title{font-size:48px}}.header{--column:2;grid-template-columns:repeat(var(--column), 1fr);column-gap:20px;display:grid}@media (min-width:640px){.header{--column:6;column-gap:30px}}@media (min-width:1280px){.header{--column:12}}.header{margin-left:20px;margin-right:20px}@media (min-width:640px){.header{margin-left:35px;margin-right:35px}}@media (min-width:1280px){.header{margin-left:55px;margin-right:55px}}.header{grid-auto-flow:dense}.header__burger{cursor:pointer;z-index:1;background-image:url(baseline-menu-24px.682dae2c.svg);background-repeat:no-repeat;width:24px;height:24px;transition:transform .3s;position:absolute;top:30px;left:20px}.header__burger:hover{transform:scale(1.05)}@media (min-width:640px){.header__burger{top:40px;left:35px}}@media (min-width:1280px){.header__burger{left:55px}}.header__top{grid-column:1/-1;margin-left:-20px;margin-right:-20px;position:relative}@media (min-width:640px){.header__top{grid-column:4/-1;margin-left:0;margin-right:0}}@media (min-width:1280px){.header__top{grid-column:6/-1;margin-right:-55px}}.header__img{object-fit:cover;width:100%;height:auto;display:block}@media (min-width:640px){.header__img{height:100vh}}.header__logo{z-index:1;margin:0;font-weight:700;display:block;position:absolute;top:15px;left:calc(50% - 20px)}@media (min-width:640px){.header__logo{-ms-flex-pack:center;justify-content:center;width:220px;display:-ms-flexbox;display:flex;left:0}}@media (min-width:1280px){.header__logo{width:170px}}.header__content{-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;position:relative}@media (min-width:640px){.header__content{grid-column:1/4}}@media (min-width:1280px){.header__content{grid-column:1/6}}.header__title{text-align:center;letter-spacing:0%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:20px 0 0;padding-top:20px;padding-bottom:20px;font-size:45px;font-weight:700;line-height:100%;display:-ms-flexbox;display:flex}@media (min-width:640px){.header__title{text-align:left;justify-content:left;margin-top:50px;padding-top:38px;padding-bottom:38px}}@media (min-width:1280px){.header__title{padding-top:90px;padding-bottom:90px}}.header__ticket{height:50px;transition:transform .3s;display:-ms-flexbox;display:flex}.header__ticket:hover{transform:scale(1.05)}@media (min-width:640px){.header__ticket{width:270px;height:70px}}@media (min-width:1280px){.header__ticket{-ms-flex-item-align:end;align-self:flex-end}}.header__ticket-arrov{aspect-ratio:1;color:#d7dde3;background-color:#1a5a4c;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:100%;font-weight:700;text-decoration:none;display:-ms-flexbox;display:flex}.header__ticket-text{box-sizing:border-box;color:#0f0e08;border:1px solid #1a5a4c;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;text-decoration:none;display:-ms-flexbox;display:flex}.header__event{writing-mode:vertical-rl;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;display:none;position:absolute;bottom:0;transform:rotate(180deg)}@media (min-width:1280px){.header__event{display:-ms-flexbox;display:flex}}.header__event-text{color:#687480;text-transform:uppercase;margin:0;padding:0;font-size:14px;font-weight:700;text-decoration:none}.header__event-line{background-color:#1a5a4c;width:1px;height:70px;margin-bottom:20px;display:block}.actuals{--column:2;grid-template-columns:repeat(var(--column), 1fr);column-gap:20px;display:grid}@media (min-width:640px){.actuals{--column:6;column-gap:30px}}@media (min-width:1280px){.actuals{--column:12}}.actuals{margin-left:20px;margin-right:20px}@media (min-width:640px){.actuals{margin-left:35px;margin-right:35px}}@media (min-width:1280px){.actuals{margin-left:55px;margin-right:55px}}.actuals{grid-auto-flow:dense}.actuals *{margin:0;padding:0}.actuals__title{grid-column:1/-1;margin-top:70px}@media (min-width:640px){.actuals__title{margin-top:90px}}@media (min-width:1280px){.actuals__title{margin-top:200px}}.actuals__title{margin-bottom:40px}@media (min-width:640px){.actuals__title{margin-bottom:50px}}@media (min-width:1280px){.actuals__title{margin-bottom:60px}}.actuals__event{--column:2;grid-template-columns:repeat(var(--column), 1fr);column-gap:20px;display:grid}@media (min-width:640px){.actuals__event{--column:6;column-gap:30px}}@media (min-width:1280px){.actuals__event{--column:12}}.actuals__event{margin-bottom:40px}@media (min-width:640px){.actuals__event{margin-bottom:50px}}@media (min-width:1280px){.actuals__event{margin-bottom:60px}}.actuals__event{grid-column:1/-1;position:relative}.actuals__event:last-child{margin-bottom:180px}@media (min-width:640px){.actuals__event:last-child{margin-bottom:200px}}@media (min-width:1280px){.actuals__event:last-child{margin-bottom:300px}}.actuals__img-container{z-index:1;object-fit:cover;grid-column:1/-1;-ms-flex-pack:center;justify-content:center;width:100%;transition:width 2s;display:-ms-flexbox;display:flex;overflow:hidden}@media (min-width:1280px){.actuals__img-container{grid-column:1/8;width:175%}.actuals__img-container.element-visible{width:100%}}.actuals__img{width:100%;height:210px}@media (min-width:640px){.actuals__img{height:520px}}@media (min-width:1280px){.actuals__img{height:520px}}.actuals__img{object-fit:cover;object-position:center}.actuals__content{grid-template-columns:subgrid;grid-column:1/-1;-ms-flex-line-pack:center;align-content:center;display:grid}@media (min-width:640px){.actuals__content{grid-column:1/5}}@media (min-width:1280px){.actuals__content{grid-column:9/-1}}.actuals__date-container{grid-column:1/-1;grid-template-columns:subgrid;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-top:20px;margin-bottom:10px;display:grid}@media (min-width:640px){.actuals__date-container{-ms-flex-pack:start;justify-content:flex-start;gap:30px}}.actuals__type{font-size:16px}@media (min-width:640px){.actuals__type{font-size:14px}}@media (min-width:1280px){.actuals__type{font-size:14px}}.actuals__type{color:#687480;text-transform:uppercase;grid-column:1;font-weight:500}.actuals__date{font-size:16px}@media (min-width:640px){.actuals__date{font-size:14px}}@media (min-width:1280px){.actuals__date{font-size:14px}}.actuals__date{color:#1a5a4c;text-align:left;grid-column:2/-1;font-weight:700}.actuals__name{color:#0f0e08;-ms-flex-direction:row;flex-direction:row;grid-column:1/-1;-ms-flex-align:center;align-items:center;margin-bottom:10px;font-size:28px;font-weight:400;display:-ms-flexbox;display:flex}@media (min-width:640px){.actuals__name{margin-bottom:15px;font-size:36px}}.actuals__name:after{content:"";background-color:#f14a27;height:10px;margin-left:10px}@media (min-width:640px){.actuals__name:after{height:15px}}@media (min-width:1280px){.actuals__name:after{height:15px}}.actuals__name:after{width:10px}@media (min-width:640px){.actuals__name:after{width:15px}}@media (min-width:1280px){.actuals__name:after{width:15px}}.actuals__desc{color:#4e4e4e;grid-column:1/-1;font-size:16px;font-weight:300;line-height:150%}.actuals__lection-content{width:280px}@media (min-width:640px){.actuals__lection-content{width:570px}}@media (min-width:1280px){.actuals__lection-content{width:570px}}.actuals__lection-content{height:140px}@media (min-width:640px){.actuals__lection-content{height:205px}}@media (min-width:1280px){.actuals__lection-content{height:205px}}.actuals__lection-content{padding-left:0;padding-right:0}@media (min-width:640px){.actuals__lection-content{padding-left:55px;padding-right:55px}}@media (min-width:1280px){.actuals__lection-content{padding-left:100px;padding-right:100px}}.actuals__lection-content{bottom:-80px}@media (min-width:640px){.actuals__lection-content{bottom:-120px}}@media (min-width:1280px){.actuals__lection-content{bottom:-100px}}.actuals__lection-content{box-sizing:border-box;background-color:#fff;border-bottom:2px solid rgba(26,90,76,.25);-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;transition:transform .3s;display:-ms-flexbox;display:flex;position:absolute;left:50%;transform:translate(-50%)}.actuals__lection-content:hover{transform:translate(-50%)scale(1.05)}.actuals__lection-date-container{-ms-flex-pack:justify;justify-content:space-between;margin-left:20px;margin-right:20px;display:-ms-flexbox;display:flex}@media (min-width:640px){.actuals__lection-date-container{margin-left:0;margin-right:0}}.actuals__lection-name{font-size:28px}@media (min-width:640px){.actuals__lection-name{font-size:36px}}@media (min-width:1280px){.actuals__lection-name{font-size:36px}}.actuals__lection-name{color:#0f0e08;text-align:center;font-weight:400}.actuals__lection-img-container{grid-column:1/-1;-ms-flex-pack:end;justify-content:end;width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;display:-ms-flexbox;display:flex}@media (min-width:640px){.actuals__lection-img-container{width:calc(100% + 70px);margin-left:-35px;margin-right:-35px}}@media (min-width:1280px){.actuals__lection-img-container{width:calc(100% + 110px);margin-left:-55px;margin-right:-55px}}.actuals__lection-img-container{height:210px}@media (min-width:640px){.actuals__lection-img-container{height:390px}}@media (min-width:1280px){.actuals__lection-img-container{height:550px}}.actuals__lection-img{object-fit:cover;object-position:bottom;width:100%}.galery{--column:2;grid-template-columns:repeat(var(--column), 1fr);column-gap:20px;display:grid}@media (min-width:640px){.galery{--column:6;column-gap:30px}}@media (min-width:1280px){.galery{--column:12}}.galery{margin-left:20px;margin-right:20px}@media (min-width:640px){.galery{margin-left:35px;margin-right:35px}}@media (min-width:1280px){.galery{margin-left:55px;margin-right:55px}}.galery{margin-bottom:100px}.galery__title{grid-column:1/-1;margin-bottom:50px}.galery__slider{grid-column:1/-1;grid-template-columns:subgrid;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:100%;display:grid}.galery__images{scroll-snap-type:x mandatory;grid-column:1/-1;height:100%;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden}@media (min-width:640px){.galery__images{gap:20px}}.galery__images::-webkit-scrollbar{display:none}@media (min-width:1280px){.galery__images{grid-template-columns:subgrid;display:grid;overflow:visible}}.galery__wrapper{scroll-snap-align:center;-ms-flex:0 0 100%;flex:0 0 100%;height:410px;position:relative}@media (min-width:640px){.galery__wrapper{scroll-snap-align:start;-ms-flex:0 0 calc(50% - 10px);flex:0 0 calc(50% - 10px);height:540px}}@media (min-width:1280px){.galery__wrapper{transition:transform .3s}.galery__wrapper:hover{transform:scale(1.05)}.galery__wrapper{grid-column:span 8;height:600px;transition:opacity .3s,transform .3s}.galery__wrapper:nth-child(n+5){display:none}.galery__wrapper--heightS{height:360px}}.galery__wrapper--small{grid-column:span 4}.galery__img{object-fit:cover;width:100%;height:100%;display:block}.galery__bottom-slider{z-index:1;grid-column:1/-1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:22px;margin-top:20px;display:-ms-flexbox;display:flex}@media (min-width:1280px){.galery__bottom-slider{display:none}}.galery__button{cursor:pointer;aspect-ratio:1;background-color:#d7dde3;border:0;border-radius:50%;height:9px;padding:0;text-decoration:none;display:block}.galery .active{background-color:#1a5a4c}.subscriptions{height:380px}@media (min-width:1280px){.subscriptions{height:550px}}.subscriptions__bg{background-image:url(subscr.87441af8.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;position:relative}.subscriptions__bg:before{content:"";background:rgba(0,0,0,.75);position:absolute;top:0;bottom:0;left:0;right:0}.subscriptions__grid{z-index:1;--column:2;grid-template-columns:repeat(var(--column), 1fr);-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;column-gap:20px;height:100%;display:grid;position:relative}@media (min-width:640px){.subscriptions__grid{--column:6;column-gap:30px}}@media (min-width:1280px){.subscriptions__grid{--column:12}}.subscriptions__grid{margin-left:20px;margin-right:20px}@media (min-width:640px){.subscriptions__grid{margin-left:35px;margin-right:35px}}@media (min-width:1280px){.subscriptions__grid{margin-left:55px;margin-right:55px}}.subscriptions__content{-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}@media (min-width:1280px){.subscriptions__content{grid-column:4/10}}.subscriptions__text-container{color:#fff;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:16px;margin-bottom:50px;display:-ms-flexbox;display:flex}@media (min-width:640px){.subscriptions__text-container{gap:16px;margin-bottom:60px}}@media (min-width:1280px){.subscriptions__text-container{margin-bottom:70px}}.subscriptions__title{font-size:36px;font-weight:700}@media (min-width:640px){.subscriptions__title{font-size:48px}}@media (min-width:1280px){.subscriptions__title{font-size:48px}}.subscriptions__text{text-align:center;font-size:18px;font-weight:400}.subscriptions__form{-ms-flex-pack:justify;justify-content:space-between;width:100%;height:50px;display:-ms-flexbox;display:flex}@media (min-width:640px){.subscriptions__form{height:70px}}.subscriptions__input{all:unset;background-color:#fff;width:100%;font-size:14px}.subscriptions__input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left;padding-left:36px}.subscriptions__input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right;padding-right:36px}.subscriptions__input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.subscriptions__form-button{all:unset;cursor:pointer;aspect-ratio:1;background-color:#f14a27;background-image:url(baseline-keyboard_arrow_right-24px.cb2c3a19.png);background-position:50%;background-repeat:no-repeat;height:100%;margin-left:0;transition:background-color .3s}@media (min-width:640px){.subscriptions__form-button{margin-left:16px}}@media (min-width:1280px){.subscriptions__form-button{margin-left:30px}}.subscriptions__form-button:hover{background-color:#ff4e2b}.subscriptions__form-button:active{background-color:#1a5a4c}.footer{max-width:1440px;margin-left:auto;margin-right:auto}.footer__inline-center{--column:2;grid-template-columns:repeat(var(--column), 1fr);column-gap:20px;display:grid}@media (min-width:640px){.footer__inline-center{--column:6;column-gap:30px}}@media (min-width:1280px){.footer__inline-center{--column:12}}.footer__inline-center{margin-left:20px;margin-right:20px}@media (min-width:640px){.footer__inline-center{margin-left:35px;margin-right:35px}}@media (min-width:1280px){.footer__inline-center{margin-left:55px;margin-right:55px}}.footer__inline-center{margin-top:50px}.footer__logo{color:#000;width:100%;margin:0;font-size:36px;font-weight:700;text-decoration:none}@media (min-width:640px){.footer__logo{-ms-flex-direction:column;flex-direction:column;grid-column:1;margin-bottom:60px}}.footer__icons{grid-column:1/-1;-ms-flex-align:center;align-items:center;margin-bottom:40px;display:-ms-flexbox;display:flex}@media (min-width:640px){.footer__icons{-ms-flex-direction:column;flex-direction:column;grid-column:1}}.footer__social-media{gap:20px;display:-ms-flexbox;display:flex}@media (min-width:640px){.footer__social-media{gap:32px}}@media (min-width:1280px){.footer__social-media{gap:22px}}.footer__icon{transition:transform .3s}.footer__icon:hover{transform:scale(1.05)}.footer__icon{aspect-ratio:1;background-position:50%;background-repeat:no-repeat;background-size:cover;-ms-flex-pack:end;justify-content:end;height:24px;display:block}.footer__icon--facebook{background-image:url(facebook-letter-logo.952c99a1.png)}.footer__icon--instagram{background-image:url("instagram (3).50e529f9.png")}.footer__detail{grid-column:1/-1;grid-template-columns:subgrid;margin-bottom:70px;display:grid}@media (min-width:640px){.footer__detail{grid-column:2/-2}}@media (min-width:1280px){.footer__detail{grid-column:3/7}}.footer__schedule{grid-column:1}@media (min-width:640px){.footer__schedule{grid-column:span 2}}.footer__contacts{grid-column:2}@media (min-width:640px){.footer__contacts{grid-column:span 2}}.footer__text{font-size:14px}.footer__text--header{margin-bottom:20px}.footer__line-container{grid-column:1/-1;margin-bottom:40px;display:-ms-flexbox;display:flex}@media (min-width:640px){.footer__line-container{grid-column:2/-2;margin-bottom:70px}}@media (min-width:1280px){.footer__line-container{-ms-flex-direction:column;flex-direction:column;grid-column:7;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}}.footer__line{background-color:rgba(26,90,76,.5);width:100%;height:1px}@media (min-width:1280px){.footer__line{width:1px;height:260px}}.footer__link-container{grid-column:1/-1;grid-template-columns:subgrid;display:grid}@media (min-width:640px){.footer__link-container{grid-column:2/-2}}@media (min-width:1280px){.footer__link-container{grid-column:8/span 4}}.footer__link-separator{-ms-flex-direction:column;flex-direction:column;grid-column:span 1;gap:20px;display:-ms-flexbox;display:flex}@media (min-width:640px){.footer__link-separator{grid-column:span 2}}.footer__link{color:#000;text-decoration:none;transition:opacity .3s}.footer__contact{color:#000;text-decoration:none}.footer__designer{-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:10px;margin-top:80px;margin-bottom:40px;display:-ms-flexbox;display:flex}@media (min-width:640px){.footer__designer{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;margin-top:120px}}@media (min-width:1280px){.footer__designer{margin-top:90px}}.navigation{box-sizing:border-box}html{scroll-behavior:smooth;font-family:IBM Plex Sans,serif}h1,h2,h3{margin:0;font-family:Montserrat,serif}p{margin:0}body{margin:0;padding:0}body:has(.nav:target){overflow:hidden}main{max-width:1440px;margin:0 auto} +/*# sourceMappingURL=Museum.af668e6f.css.map */ diff --git a/docs/Museum.af668e6f.css.map b/docs/Museum.af668e6f.css.map new file mode 100644 index 000000000..a34f48e9d --- /dev/null +++ b/docs/Museum.af668e6f.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,iDCAA,2GAWA,yCAMA,yDCjBA,iIAaE,yCAKA,gIAcA,6FAWA,8CCnCA,yBDmCA,+CC7BA,0BD6BA,+CAAA,sEAUA,qNCnDA,yCDkEA,yHAOA,mEAKA,4DAMA,uCAIA,qGClFA,yBDkFA,wCC5EA,0BD4EA,yBAAA,sDAOA,gHAMA,kHAWA,qIElHF,mFDQE,yBCRF,sBAcA,sBDNE,yBCMF,uBDAE,0BCAF,uBCdA,iGFQE,yBERF,oCFcE,0BEdF,qBAAA,2CFQE,yBERF,4CFcE,0BEdF,4CAAA,6BAME,iOFJA,4CAMA,yBEFA,oCFQA,0BERA,2BA2BA,qFFzBA,yBEyBA,4DFnBA,0BEmBA,kDAiBA,mEF1CA,yBE0CA,2BAWA,gHFrDA,yBEqDA,+GF/CA,0BE+CA,2BAwBA,iLF7EA,yBE6EA,kCFvEA,0BEuEA,kCAiBA,8QF9FA,yBE8FA,0GFxFA,0BEwFA,qDA8BA,sFFlIA,4CAMA,yBE4HA,yCFtHA,0BEsHA,6DAiBE,qRAkBA,oPAkBF,iMF3KA,0BE2KA,iDAgBE,kIAWA,oGCpNJ,kGHQE,yBGRF,qCHcE,0BGdF,sBAAA,4CHQE,yBGRF,6CHcE,0BGdF,6CAAA,8BAME,8BAKA,iDHHA,yBGGA,iCHGA,0BGHA,kCAAA,mCHHA,yBGGA,oCHGA,0BGHA,oCAOA,yGHVA,yBGUA,4CHJA,0BGIA,6BAAA,mCHVA,yBGUA,oCHJA,0BGIA,oCAAA,mDAOE,+CHjBF,yBGiBE,gDHXF,0BGWE,gDAKF,gMHhBA,0BGgBA,mDAkBI,oDAMJ,sCH9CA,yBG8CA,4BHxCA,0BGwCA,4BAAA,sDASA,6HHvDA,yBGuDA,mCHjDA,0BGiDA,oCAgBA,qNHvEA,yBGuEA,kFAgBA,8BHvFA,yBGuFA,+BHjFA,0BGiFA,+BAAA,oFASA,8BHhGA,yBGgGA,+BH1FA,0BG0FA,+BAAA,8EASA,oNHzGA,yBGyGA,kDAiBE,sFH1HF,yBG0HE,kCHpHF,0BGoHE,kCAAA,gCH1HF,yBG0HE,iCHpHF,0BGoHE,iCAkBF,8FASA,sCHrJA,yBGqJA,uCH/IA,0BG+IA,uCAAA,uCHrJA,yBGqJA,wCH/IA,0BG+IA,wCAAA,yDHrJA,yBGqJA,gEH/IA,0BG+IA,kEAAA,uCHrJA,yBGqJA,yCH/IA,0BG+IA,yCAAA,4TH3JA,qEGiLA,yJH3KA,yBG2KA,+DAUA,sCHrLA,yBGqLA,uCH/KA,0BG+KA,uCAAA,uEAYA,qLHjMA,yBGiMA,8FH3LA,0BG2LA,+FAAA,6CHjMA,yBGiMA,8CH3LA,0BG2LA,8CASA,yEClNF,iGJQE,yBIRF,oCJcE,0BIdF,qBAAA,2CJQE,yBIRF,4CJcE,0BIdF,4CAAA,4BAME,mDAKA,4NAWA,6IJdA,yBIcA,0BJmEE,gDA3EF,0BIQA,6EAgBA,yGJ9BA,yBI8BA,+GJxBA,0BIwBA,0CJpCA,6CIoCA,sFAqBI,6CAIA,wCAKF,2CAOF,mEAQA,iMJrEA,0BIqEA,qCAgBA,0JAkBA,yCCrHF,4BLcE,0BKdF,6BAQE,sLAUE,gHAQF,2OLlBA,yBKkBA,iDLZA,0BKYA,kCAAA,wDLlBA,yBKkBA,yDLZA,0BKYA,yDAaA,mKLzBA,0BKyBA,0CAWA,4OL1CA,yBK0CA,4DLpCA,0BKoCA,mDAqBA,qDL/DA,yBK+DA,sCLzDA,0BKyDA,sCAMA,sEAMA,iIL3EA,yBK2EA,kCAWA,gFAAA,wQAAA,oQAWE,kFAOF,kSLxGA,yBKwGA,8CLlGA,0BKkGA,8CAkBE,2DAIA,4DCtIJ,4DAIE,gHNIA,yBMJA,mDNUA,0BMVA,oCAAA,0DNIA,yBMJA,2DNUA,0BMVA,2DAAA,uCASA,iGNLA,yBMKA,gGAiBA,6HNtBA,yBMsBA,8EAaA,gENnCA,yBMmCA,gCN7BA,0BM6BA,gCAOA,uCNhDA,0CMgDA,uKAaE,iGAIA,6FAOF,+FNlEA,yBMkEA,kCN5DA,0BM4DA,iCAeA,gCNjFA,yBMiFA,sCAQA,gCNzFA,yBMyFA,sCAQA,6BAGE,yCAKF,6FNzGA,yBMyGA,6DNnGA,0BMmGA,4KAkBA,uENrHA,0BMqHA,sCAaA,oFNxIA,yBMwIA,0CNlIA,0BMkIA,8CAcA,qINtJA,yBMsJA,4CAWA,qEAMA,iDAMA,qPN7KA,yBM6KA,kINvKA,0BMuKA,mCCrLF,kCCYA,4DAKA,+CAOA,WAIA,wBAIE,sCAKF","sources":["Museum.af668e6f.css","src/styles/utils/_extends.scss","src/styles/utils/_animation.scss","src/styles/blocks/nav.scss","src/styles/utils/_mixins.scss","src/styles/blocks/body.scss","src/styles/blocks/header.scss","src/styles/blocks/actuals.scss","src/styles/blocks/galeryjs.scss","src/styles/blocks/subscriptions.scss","src/styles/blocks/footer.scss","src/styles/blocks/navigation.scss","src/styles/main.scss"],"sourcesContent":["h1 {\n font-family: Roboto, sans-serif;\n font-weight: 400;\n}\n\n.text-inner {\n opacity: 0;\n transition: transform .6s .6s, opacity 1s .6s;\n display: block;\n transform: translateY(100%);\n}\n\n.text-line {\n display: block;\n overflow: hidden;\n}\n\n.text-inner.is-visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.nav {\n pointer-events: none;\n z-index: 1;\n overscroll-behavior-y: contain;\n opacity: 0;\n transition: opacity .2s;\n position: fixed;\n overflow-y: auto;\n}\n\n.nav:target {\n pointer-events: all;\n opacity: 1;\n}\n\n.nav:has(.nav__shadow) .nav__background {\n z-index: 2;\n background: #00000080;\n width: 100%;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.nav__shadow {\n z-index: 3;\n background-color: #1a5a4c;\n width: 100%;\n height: 225px;\n position: fixed;\n top: 0;\n}\n\n.nav__data {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n@media (width >= 640px) {\n .nav__data {\n margin-left: 35px;\n margin-right: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .nav__data {\n margin-left: 55px;\n margin-right: 55px;\n }\n}\n\n.nav__data {\n gap: 100px;\n margin-top: 40px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__exit {\n z-index: 4;\n aspect-ratio: 1;\n background-image: url(\"ri-close-fill.99137aa5.png\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n height: 24px;\n transition: transform .3s;\n}\n\n.nav__exit:hover {\n transform: rotate(90deg);\n}\n\n.nav__schedule {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 20px;\n max-width: 360px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__schedule-container {\n gap: 30px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__schedule * {\n color: #fff;\n font-size: 14px;\n line-height: 150%;\n}\n\n.nav__schedule-time {\n white-space: nowrap;\n}\n\n.nav__links {\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .nav__links {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .nav__links {\n --column: 12;\n }\n}\n\n.nav__links {\n gap: 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__links-container {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__link {\n color: #fff;\n font-size: 16px;\n font-weight: 500;\n line-height: 100%;\n text-decoration: none;\n transition: opacity .3s;\n}\n\n.nav__line-conatiner {\n background-color: #fff;\n align-self: stretch;\n width: 1px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.to-top {\n z-index: 3;\n aspect-ratio: 1;\n height: 50px;\n position: fixed;\n bottom: 20px;\n right: 20px;\n}\n\n@media (width >= 640px) {\n .to-top {\n display: none;\n }\n}\n\n.title {\n font-size: 36px;\n}\n\n@media (width >= 640px) {\n .title {\n font-size: 48px;\n }\n}\n\n@media (width >= 1280px) {\n .title {\n font-size: 48px;\n }\n}\n\n.header {\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .header {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .header {\n --column: 12;\n }\n}\n\n.header {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n@media (width >= 640px) {\n .header {\n margin-left: 35px;\n margin-right: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .header {\n margin-left: 55px;\n margin-right: 55px;\n }\n}\n\n.header {\n grid-auto-flow: dense;\n}\n\n.header__burger {\n cursor: pointer;\n z-index: 1;\n background-image: url(\"baseline-menu-24px.682dae2c.svg\");\n background-repeat: no-repeat;\n width: 24px;\n height: 24px;\n transition: transform .3s;\n position: absolute;\n top: 30px;\n left: 20px;\n}\n\n.header__burger:hover {\n transform: scale(1.05);\n}\n\n@media (width >= 640px) {\n .header__burger {\n top: 40px;\n left: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .header__burger {\n left: 55px;\n }\n}\n\n.header__top {\n grid-column: 1 / -1;\n margin-left: -20px;\n margin-right: -20px;\n position: relative;\n}\n\n@media (width >= 640px) {\n .header__top {\n grid-column: 4 / -1;\n margin-left: 0;\n margin-right: 0;\n }\n}\n\n@media (width >= 1280px) {\n .header__top {\n grid-column: 6 / -1;\n margin-right: -55px;\n }\n}\n\n.header__img {\n object-fit: cover;\n width: 100%;\n height: auto;\n display: block;\n}\n\n@media (width >= 640px) {\n .header__img {\n height: 100vh;\n }\n}\n\n.header__logo {\n z-index: 1;\n margin: 0;\n font-weight: 700;\n display: block;\n position: absolute;\n top: 15px;\n left: calc(50% - 20px);\n}\n\n@media (width >= 640px) {\n .header__logo {\n justify-content: center;\n width: 220px;\n display: -ms-flexbox;\n display: flex;\n left: 0;\n }\n}\n\n@media (width >= 1280px) {\n .header__logo {\n width: 170px;\n }\n}\n\n.header__content {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1 / -1;\n justify-content: center;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n@media (width >= 640px) {\n .header__content {\n grid-column: 1 / 4;\n }\n}\n\n@media (width >= 1280px) {\n .header__content {\n grid-column: 1 / 6;\n }\n}\n\n.header__title {\n text-align: center;\n letter-spacing: 0%;\n justify-content: center;\n align-items: center;\n margin: 20px 0 0;\n padding-top: 20px;\n padding-bottom: 20px;\n font-size: 45px;\n font-weight: 700;\n line-height: 100%;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .header__title {\n text-align: left;\n justify-content: left;\n margin-top: 50px;\n padding-top: 38px;\n padding-bottom: 38px;\n }\n}\n\n@media (width >= 1280px) {\n .header__title {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n}\n\n.header__ticket {\n height: 50px;\n transition: transform .3s;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__ticket:hover {\n transform: scale(1.05);\n}\n\n@media (width >= 640px) {\n .header__ticket {\n width: 270px;\n height: 70px;\n }\n}\n\n@media (width >= 1280px) {\n .header__ticket {\n align-self: flex-end;\n }\n}\n\n.header__ticket-arrov {\n aspect-ratio: 1;\n color: #d7dde3;\n background-color: #1a5a4c;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n height: 100%;\n font-weight: 700;\n text-decoration: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__ticket-text {\n box-sizing: border-box;\n color: #0f0e08;\n border: 1px solid #1a5a4c;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__event {\n writing-mode: vertical-rl;\n justify-content: flex-start;\n align-items: center;\n display: none;\n position: absolute;\n bottom: 0;\n transform: rotate(180deg);\n}\n\n@media (width >= 1280px) {\n .header__event {\n display: -ms-flexbox;\n display: flex;\n }\n}\n\n.header__event-text {\n color: #687480;\n text-transform: uppercase;\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 700;\n text-decoration: none;\n}\n\n.header__event-line {\n background-color: #1a5a4c;\n width: 1px;\n height: 70px;\n margin-bottom: 20px;\n display: block;\n}\n\n.actuals {\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .actuals {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals {\n --column: 12;\n }\n}\n\n.actuals {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n@media (width >= 640px) {\n .actuals {\n margin-left: 35px;\n margin-right: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals {\n margin-left: 55px;\n margin-right: 55px;\n }\n}\n\n.actuals {\n grid-auto-flow: dense;\n}\n\n.actuals * {\n margin: 0;\n padding: 0;\n}\n\n.actuals__title {\n grid-column: 1 / -1;\n margin-top: 70px;\n}\n\n@media (width >= 640px) {\n .actuals__title {\n margin-top: 90px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__title {\n margin-top: 200px;\n }\n}\n\n.actuals__title {\n margin-bottom: 40px;\n}\n\n@media (width >= 640px) {\n .actuals__title {\n margin-bottom: 50px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__title {\n margin-bottom: 60px;\n }\n}\n\n.actuals__event {\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .actuals__event {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__event {\n --column: 12;\n }\n}\n\n.actuals__event {\n margin-bottom: 40px;\n}\n\n@media (width >= 640px) {\n .actuals__event {\n margin-bottom: 50px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__event {\n margin-bottom: 60px;\n }\n}\n\n.actuals__event {\n grid-column: 1 / -1;\n position: relative;\n}\n\n.actuals__event:last-child {\n margin-bottom: 180px;\n}\n\n@media (width >= 640px) {\n .actuals__event:last-child {\n margin-bottom: 200px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__event:last-child {\n margin-bottom: 300px;\n }\n}\n\n.actuals__img-container {\n z-index: 1;\n object-fit: cover;\n grid-column: 1 / -1;\n justify-content: center;\n width: 100%;\n transition: width 2s;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden;\n}\n\n@media (width >= 1280px) {\n .actuals__img-container {\n grid-column: 1 / 8;\n width: 175%;\n }\n\n .actuals__img-container.element-visible {\n width: 100%;\n }\n}\n\n.actuals__img {\n width: 100%;\n height: 210px;\n}\n\n@media (width >= 640px) {\n .actuals__img {\n height: 520px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__img {\n height: 520px;\n }\n}\n\n.actuals__img {\n object-fit: cover;\n object-position: center;\n}\n\n.actuals__content {\n grid-template-columns: subgrid;\n grid-column: 1 / -1;\n align-content: center;\n display: grid;\n}\n\n@media (width >= 640px) {\n .actuals__content {\n grid-column: 1 / 5;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__content {\n grid-column: 9 / -1;\n }\n}\n\n.actuals__date-container {\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n justify-content: space-between;\n align-items: center;\n margin-top: 20px;\n margin-bottom: 10px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .actuals__date-container {\n justify-content: flex-start;\n gap: 30px;\n }\n}\n\n.actuals__type {\n font-size: 16px;\n}\n\n@media (width >= 640px) {\n .actuals__type {\n font-size: 14px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__type {\n font-size: 14px;\n }\n}\n\n.actuals__type {\n color: #687480;\n text-transform: uppercase;\n grid-column: 1;\n font-weight: 500;\n}\n\n.actuals__date {\n font-size: 16px;\n}\n\n@media (width >= 640px) {\n .actuals__date {\n font-size: 14px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__date {\n font-size: 14px;\n }\n}\n\n.actuals__date {\n color: #1a5a4c;\n text-align: left;\n grid-column: 2 / -1;\n font-weight: 700;\n}\n\n.actuals__name {\n color: #0f0e08;\n -ms-flex-direction: row;\n flex-direction: row;\n grid-column: 1 / -1;\n align-items: center;\n margin-bottom: 10px;\n font-size: 28px;\n font-weight: 400;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .actuals__name {\n margin-bottom: 15px;\n font-size: 36px;\n }\n}\n\n.actuals__name:after {\n content: \"\";\n background-color: #f14a27;\n height: 10px;\n margin-left: 10px;\n}\n\n@media (width >= 640px) {\n .actuals__name:after {\n height: 15px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__name:after {\n height: 15px;\n }\n}\n\n.actuals__name:after {\n width: 10px;\n}\n\n@media (width >= 640px) {\n .actuals__name:after {\n width: 15px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__name:after {\n width: 15px;\n }\n}\n\n.actuals__desc {\n color: #4e4e4e;\n grid-column: 1 / -1;\n font-size: 16px;\n font-weight: 300;\n line-height: 150%;\n}\n\n.actuals__lection-content {\n width: 280px;\n}\n\n@media (width >= 640px) {\n .actuals__lection-content {\n width: 570px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-content {\n width: 570px;\n }\n}\n\n.actuals__lection-content {\n height: 140px;\n}\n\n@media (width >= 640px) {\n .actuals__lection-content {\n height: 205px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-content {\n height: 205px;\n }\n}\n\n.actuals__lection-content {\n padding-left: 0;\n padding-right: 0;\n}\n\n@media (width >= 640px) {\n .actuals__lection-content {\n padding-left: 55px;\n padding-right: 55px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-content {\n padding-left: 100px;\n padding-right: 100px;\n }\n}\n\n.actuals__lection-content {\n bottom: -80px;\n}\n\n@media (width >= 640px) {\n .actuals__lection-content {\n bottom: -120px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-content {\n bottom: -100px;\n }\n}\n\n.actuals__lection-content {\n box-sizing: border-box;\n background-color: #fff;\n border-bottom: 2px solid #1a5a4c40;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: center;\n transition: transform .3s;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.actuals__lection-content:hover {\n transform: translateX(-50%) scale(1.05);\n}\n\n.actuals__lection-date-container {\n justify-content: space-between;\n margin-left: 20px;\n margin-right: 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .actuals__lection-date-container {\n margin-left: 0;\n margin-right: 0;\n }\n}\n\n.actuals__lection-name {\n font-size: 28px;\n}\n\n@media (width >= 640px) {\n .actuals__lection-name {\n font-size: 36px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-name {\n font-size: 36px;\n }\n}\n\n.actuals__lection-name {\n color: #0f0e08;\n text-align: center;\n font-weight: 400;\n}\n\n.actuals__lection-img-container {\n grid-column: 1 / -1;\n justify-content: end;\n width: calc(100% + 40px);\n margin-left: -20px;\n margin-right: -20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .actuals__lection-img-container {\n width: calc(100% + 70px);\n margin-left: -35px;\n margin-right: -35px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-img-container {\n width: calc(100% + 110px);\n margin-left: -55px;\n margin-right: -55px;\n }\n}\n\n.actuals__lection-img-container {\n height: 210px;\n}\n\n@media (width >= 640px) {\n .actuals__lection-img-container {\n height: 390px;\n }\n}\n\n@media (width >= 1280px) {\n .actuals__lection-img-container {\n height: 550px;\n }\n}\n\n.actuals__lection-img {\n object-fit: cover;\n object-position: bottom;\n width: 100%;\n}\n\n.galery {\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .galery {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .galery {\n --column: 12;\n }\n}\n\n.galery {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n@media (width >= 640px) {\n .galery {\n margin-left: 35px;\n margin-right: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .galery {\n margin-left: 55px;\n margin-right: 55px;\n }\n}\n\n.galery {\n margin-bottom: 100px;\n}\n\n.galery__title {\n grid-column: 1 / -1;\n margin-bottom: 50px;\n}\n\n.galery__slider {\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n display: grid;\n}\n\n.galery__images {\n scroll-snap-type: x mandatory;\n grid-column: 1 / -1;\n height: 100%;\n display: -ms-flexbox;\n display: flex;\n overflow: auto hidden;\n}\n\n@media (width >= 640px) {\n .galery__images {\n gap: 20px;\n }\n}\n\n.galery__images::-webkit-scrollbar {\n display: none;\n}\n\n@media (width >= 1280px) {\n .galery__images {\n grid-template-columns: subgrid;\n display: grid;\n overflow: visible;\n }\n}\n\n.galery__wrapper {\n scroll-snap-align: center;\n -ms-flex: 0 0 100%;\n flex: 0 0 100%;\n height: 410px;\n position: relative;\n}\n\n@media (width >= 640px) {\n .galery__wrapper {\n scroll-snap-align: start;\n -ms-flex: 0 0 calc(50% - 10px);\n flex: 0 0 calc(50% - 10px);\n height: 540px;\n }\n}\n\n@media (width >= 1280px) {\n .galery__wrapper {\n transition: transform .3s;\n }\n\n .galery__wrapper:hover {\n transform: scale(1.05);\n }\n\n .galery__wrapper {\n grid-column: span 8;\n height: 600px;\n transition: opacity .3s, transform .3s;\n }\n\n .galery__wrapper:nth-child(n+5) {\n display: none;\n }\n\n .galery__wrapper--heightS {\n height: 360px;\n }\n}\n\n.galery__wrapper--small {\n grid-column: span 4;\n}\n\n.galery__img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.galery__bottom-slider {\n z-index: 1;\n grid-column: 1 / -1;\n justify-content: center;\n align-items: center;\n gap: 22px;\n margin-top: 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 1280px) {\n .galery__bottom-slider {\n display: none;\n }\n}\n\n.galery__button {\n cursor: pointer;\n aspect-ratio: 1;\n background-color: #d7dde3;\n border: 0;\n border-radius: 50%;\n height: 9px;\n padding: 0;\n text-decoration: none;\n display: block;\n}\n\n.galery .active {\n background-color: #1a5a4c;\n}\n\n.subscriptions {\n height: 380px;\n}\n\n@media (width >= 1280px) {\n .subscriptions {\n height: 550px;\n }\n}\n\n.subscriptions__bg {\n background-image: url(\"subscr.87441af8.jpg\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n height: 100%;\n position: relative;\n}\n\n.subscriptions__bg:before {\n content: \"\";\n background: #000000bf;\n position: absolute;\n inset: 0;\n}\n\n.subscriptions__grid {\n z-index: 1;\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n justify-content: center;\n align-items: center;\n column-gap: 20px;\n height: 100%;\n display: grid;\n position: relative;\n}\n\n@media (width >= 640px) {\n .subscriptions__grid {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .subscriptions__grid {\n --column: 12;\n }\n}\n\n.subscriptions__grid {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n@media (width >= 640px) {\n .subscriptions__grid {\n margin-left: 35px;\n margin-right: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .subscriptions__grid {\n margin-left: 55px;\n margin-right: 55px;\n }\n}\n\n.subscriptions__content {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1 / -1;\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 1280px) {\n .subscriptions__content {\n grid-column: 4 / 10;\n }\n}\n\n.subscriptions__text-container {\n color: #fff;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 16px;\n margin-bottom: 50px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .subscriptions__text-container {\n gap: 16px;\n margin-bottom: 60px;\n }\n}\n\n@media (width >= 1280px) {\n .subscriptions__text-container {\n margin-bottom: 70px;\n }\n}\n\n.subscriptions__title {\n font-size: 36px;\n font-weight: 700;\n}\n\n@media (width >= 640px) {\n .subscriptions__title {\n font-size: 48px;\n }\n}\n\n@media (width >= 1280px) {\n .subscriptions__title {\n font-size: 48px;\n }\n}\n\n.subscriptions__text {\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n}\n\n.subscriptions__form {\n justify-content: space-between;\n width: 100%;\n height: 50px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .subscriptions__form {\n height: 70px;\n }\n}\n\n.subscriptions__input {\n all: unset;\n background-color: #fff;\n width: 100%;\n font-size: 14px;\n}\n\n.subscriptions__input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {\n text-align: left;\n padding-left: 36px;\n}\n\n.subscriptions__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {\n text-align: right;\n padding-right: 36px;\n}\n\n.subscriptions__input:-webkit-autofill {\n -webkit-box-shadow: inset 0 0 0 1000px #fff;\n}\n\n.subscriptions__form-button {\n all: unset;\n cursor: pointer;\n aspect-ratio: 1;\n background-color: #f14a27;\n background-image: url(\"baseline-keyboard_arrow_right-24px.cb2c3a19.png\");\n background-position: center;\n background-repeat: no-repeat;\n height: 100%;\n margin-left: 0;\n transition: background-color .3s;\n}\n\n@media (width >= 640px) {\n .subscriptions__form-button {\n margin-left: 16px;\n }\n}\n\n@media (width >= 1280px) {\n .subscriptions__form-button {\n margin-left: 30px;\n }\n}\n\n.subscriptions__form-button:hover {\n background-color: #ff4e2b;\n}\n\n.subscriptions__form-button:active {\n background-color: #1a5a4c;\n}\n\n.footer {\n max-width: 1440px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.footer__inline-center {\n --column: 2;\n grid-template-columns: repeat(var(--column), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .footer__inline-center {\n --column: 6;\n column-gap: 30px;\n }\n}\n\n@media (width >= 1280px) {\n .footer__inline-center {\n --column: 12;\n }\n}\n\n.footer__inline-center {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n@media (width >= 640px) {\n .footer__inline-center {\n margin-left: 35px;\n margin-right: 35px;\n }\n}\n\n@media (width >= 1280px) {\n .footer__inline-center {\n margin-left: 55px;\n margin-right: 55px;\n }\n}\n\n.footer__inline-center {\n margin-top: 50px;\n}\n\n.footer__logo {\n color: #000;\n width: 100%;\n margin: 0;\n font-size: 36px;\n font-weight: 700;\n text-decoration: none;\n}\n\n@media (width >= 640px) {\n .footer__logo {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1;\n margin-bottom: 60px;\n }\n}\n\n.footer__icons {\n grid-column: 1 / -1;\n align-items: center;\n margin-bottom: 40px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .footer__icons {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1;\n }\n}\n\n.footer__social-media {\n gap: 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .footer__social-media {\n gap: 32px;\n }\n}\n\n@media (width >= 1280px) {\n .footer__social-media {\n gap: 22px;\n }\n}\n\n.footer__icon {\n transition: transform .3s;\n}\n\n.footer__icon:hover {\n transform: scale(1.05);\n}\n\n.footer__icon {\n aspect-ratio: 1;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n justify-content: end;\n height: 24px;\n display: block;\n}\n\n.footer__icon--facebook {\n background-image: url(\"facebook-letter-logo.952c99a1.png\");\n}\n\n.footer__icon--instagram {\n background-image: url(\"instagram (3).50e529f9.png\");\n}\n\n.footer__detail {\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n margin-bottom: 70px;\n display: grid;\n}\n\n@media (width >= 640px) {\n .footer__detail {\n grid-column: 2 / -2;\n }\n}\n\n@media (width >= 1280px) {\n .footer__detail {\n grid-column: 3 / 7;\n }\n}\n\n.footer__schedule {\n grid-column: 1;\n}\n\n@media (width >= 640px) {\n .footer__schedule {\n grid-column: span 2;\n }\n}\n\n.footer__contacts {\n grid-column: 2;\n}\n\n@media (width >= 640px) {\n .footer__contacts {\n grid-column: span 2;\n }\n}\n\n.footer__text {\n font-size: 14px;\n}\n\n.footer__text--header {\n margin-bottom: 20px;\n}\n\n.footer__line-container {\n grid-column: 1 / -1;\n margin-bottom: 40px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .footer__line-container {\n grid-column: 2 / -2;\n margin-bottom: 70px;\n }\n}\n\n@media (width >= 1280px) {\n .footer__line-container {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 7;\n justify-content: center;\n align-items: center;\n }\n}\n\n.footer__line {\n background-color: #1a5a4c80;\n width: 100%;\n height: 1px;\n}\n\n@media (width >= 1280px) {\n .footer__line {\n width: 1px;\n height: 260px;\n }\n}\n\n.footer__link-container {\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n display: grid;\n}\n\n@media (width >= 640px) {\n .footer__link-container {\n grid-column: 2 / -2;\n }\n}\n\n@media (width >= 1280px) {\n .footer__link-container {\n grid-column: 8 / span 4;\n }\n}\n\n.footer__link-separator {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: span 1;\n gap: 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .footer__link-separator {\n grid-column: span 2;\n }\n}\n\n.footer__link {\n color: #000;\n text-decoration: none;\n transition: opacity .3s;\n}\n\n.footer__contact {\n color: #000;\n text-decoration: none;\n}\n\n.footer__designer {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1 / -1;\n justify-content: center;\n align-items: center;\n gap: 10px;\n margin-top: 80px;\n margin-bottom: 40px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 640px) {\n .footer__designer {\n -ms-flex-direction: row;\n flex-direction: row;\n justify-content: space-between;\n margin-top: 120px;\n }\n}\n\n@media (width >= 1280px) {\n .footer__designer {\n margin-top: 90px;\n }\n}\n\n.navigation {\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n font-family: IBM Plex Sans, serif;\n}\n\nh1, h2, h3 {\n margin: 0;\n font-family: Montserrat, serif;\n}\n\np {\n margin: 0;\n}\n\nbody {\n margin: 0;\n padding: 0;\n}\n\nbody:has(.nav:target) {\n overflow: hidden;\n}\n\nmain {\n max-width: 1440px;\n margin: 0 auto;\n}\n/*# sourceMappingURL=Museum.af668e6f.css.map */\n","%h1 {\r\n font-family: Roboto, sans-serif;\r\n font-weight: 400;\r\n}\r\n",".text-inner {\n transform: translateY(100%);\n\n display: block;\n\n opacity: 0;\n\n transition: transform 0.6s ease, opacity 1s ease;\n transition-delay: 0.6s;\n}\n\n.text-line {\n overflow: hidden; // 🔥 головне\n display: block;\n\n}\n\n.text-inner.is-visible {\n transform: translateY(0);\n opacity: 1;\n}\n",".nav {\n pointer-events: none;\n\n position: fixed;\n z-index: 1;\n\n overflow-y: auto;\n overscroll-behavior-y: contain;\n\n opacity: 0;\n\n transition: opacity 200ms;\n\n &:target {\n pointer-events: all;\n opacity: 1;\n }\n\n &:has(.nav__shadow)\n &__background {\n position: fixed;\n z-index: 2;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100vh;\n\n background: rgba(0,0,0,0.5);\n\n }\n\n &__shadow {\n position: fixed;\n z-index: 3;\n top: 0;\n\n width: 100%;\n height: 225px;\n\n background-color: $museum-green;\n }\n\n &__data {\n @include container;\n\n display: flex;\n\n // justify-content: space-between;\n gap: 100px;\n margin-top: 40px;\n }\n\n &__exit {\n z-index: 4;\n\n aspect-ratio: 1/1;\n height: 24px;\n\n background-image: url(../images/ri-close-fill.png);\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n\n @include hover (transform, rotate(90deg));\n\n }\n\n &__schedule {\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 360px;\n }\n\n &__schedule-container {\n display: flex;\n gap: 30px;\n }\n\n &__schedule * {\n font-size: 14px;\n line-height: 150%;\n color: $museum-white;\n }\n\n &__schedule-time {\n white-space: nowrap;\n }\n\n &__links {\n @include grid-template;\n\n display: flex;\n gap: 20px;\n }\n\n &__links-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n &__link {\n font-size: 16px;\n font-weight: 500;\n line-height: 100%;\n color: $museum-white;\n text-decoration: none;\n\n transition: opacity $fast-transition;\n }\n\n\n &__line-conatiner {\n display: flex;\n align-self: stretch;\n width: 1px;\n background-color: $museum-white;\n }\n\n}\n","@mixin hover($_property, $_toValue) {\r\n transition: #{$_property} 0.3s;\r\n &:hover {\r\n #{$_property}: $_toValue;\r\n }\r\n}\r\n\r\n@mixin on-tablet {\r\n @media (min-width: $screen-medium) {\r\n @content;\r\n }\r\n}\r\n\r\n@mixin on-desktop {\r\n @media (min-width: $screen-large) {\r\n @content;\r\n }\r\n}\r\n\r\n@mixin grid-template {\r\n --column: #{$grid-columns-mobile};\r\n\r\n display: grid;\r\n grid-template-columns: repeat(var(--column), 1fr);\r\n column-gap: 20px;\r\n\r\n @include on-tablet {\r\n --column: #{$grid-columns-tablet};\r\n\r\n column-gap: 30px;\r\n }\r\n\r\n @include on-desktop {\r\n --column: #{$grid-columns-desktop};\r\n }\r\n}\r\n\r\n@mixin container {\r\n margin-inline: $margin-mobile;\r\n\r\n @include on-tablet {\r\n margin-inline: $margin-tablet;\r\n }\r\n\r\n @include on-desktop {\r\n margin-inline: $margin-desktop;\r\n }\r\n}\r\n\r\n@mixin width-fulscreen {\r\n width: calc(100% + #{$margin-mobile * 2});\r\n margin-inline: -#{$margin-mobile};\r\n\r\n @include on-tablet {\r\n width: calc(100% + #{$margin-tablet * 2});\r\n margin-inline: -#{$margin-tablet};\r\n }\r\n\r\n @include on-desktop {\r\n width: calc(100% + #{$margin-desktop * 2});\r\n margin-inline: -#{$margin-desktop};\r\n }\r\n}\r\n\r\n@mixin property-multiscreen($property, $mobile, $tablet, $desktop: null) {\r\n #{$property}: $mobile;\r\n\r\n @include on-tablet {\r\n #{$property}: $tablet;\r\n }\r\n\r\n @include on-desktop {\r\n @if $desktop {\r\n #{$property}: $desktop;\r\n } @else { /* stylelint-disable-line at-rule-empty-line-before */\r\n #{$property}: $tablet;\r\n }\r\n }\r\n}\r\n\r\n@mixin slider-container($enable: true) {\r\n @if $enable {\r\n scroll-snap-type: x mandatory;\r\n overflow: auto hidden;\r\n display: flex;\r\n\r\n @include on-tablet {\r\n gap: 20px;\r\n }\r\n &::-webkit-scrollbar {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@mixin link-cleaner {\r\n color: black;\r\n text-decoration: none;\r\n}\r\n",".to-top {\n position: fixed;\n z-index: 3;\n right: $margin-mobile;\n bottom: $margin-mobile;\n\n aspect-ratio: 1/1;\n height: 50px;\n\n @include on-tablet {\n display: none;\n }\n}\n\n.title {\n @include property-multiscreen(font-size, 36px, 48px);\n}\n",".header {\n @include grid-template;\n @include container;\n\n grid-auto-flow: dense;\n\n &__burger {\n cursor: pointer;\n\n position: absolute;\n z-index: 1;\n top: 30px;\n left: $margin-mobile;\n\n width: 24px;\n height: 24px;\n\n background-image: url(\"../images/icons/baseline-menu-24px.svg\");\n background-repeat: no-repeat;\n\n @include hover(transform, scale($scale));\n\n @include on-tablet {\n top: 40px;\n left: $margin-tablet;\n }\n\n @include on-desktop {\n left: $margin-desktop;\n }\n\n }\n\n &__top {\n position: relative;\n grid-column: 1 / -1;\n margin-inline: -#{$margin-mobile};\n\n @include on-tablet {\n grid-column: 4 / -1;\n margin-right: -#{$margin-tablet};\n margin-inline: 0;\n }\n\n @include on-desktop {\n grid-column: 6 / -1;\n margin-right: -#{$margin-desktop};\n }\n }\n\n &__img {\n display: block;\n width: 100%;\n height: auto;\n object-fit: cover;\n\n @include on-tablet {\n height: 100vh;\n }\n }\n\n &__logo {\n position: absolute;\n z-index: 1;\n top: 15px;\n left: calc(50% - $margin-mobile);\n\n display: block;\n\n margin: 0;\n\n font-weight: $font-bold;\n\n @include on-tablet {\n left: 0;\n display: flex;\n justify-content: center;\n width: 220px;\n }\n\n @include on-desktop {\n width: 170px;\n }\n }\n\n &__content {\n position: relative;\n\n display: flex;\n grid-column: 1 / -1;\n flex-direction: column;\n justify-content: center;\n\n @include on-tablet {\n grid-column: 1 / 4;\n }\n\n @include on-desktop {\n grid-column: 1 / 6;\n }\n }\n\n &__title {\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin: 0;\n margin-top: 20px;\n padding-block: 20px;\n\n font-size: 45px;\n font-weight: $font-bold;\n line-height: 100%;\n text-align: center;\n letter-spacing: 0%;\n\n @include on-tablet {\n justify-content: left;\n margin-top: $ticket-button-heigh;\n padding-block: 38px;\n text-align: left;\n }\n\n @include on-desktop {\n padding-block: 90px;\n }\n\n }\n\n\n\n &__ticket {\n display: flex;\n\n // align-items: end;\n height: 50px;\n\n @include hover(transform, scale($scale));\n\n @include on-tablet {\n width: 270px;\n height: 70px;\n }\n\n @include on-desktop {\n align-self: flex-end;\n }\n\n &-arrov {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n aspect-ratio: 1/1;\n\n // width: 100%;\n height: 100%;\n\n font-weight: $font-bold;\n color: $museum-gray;\n text-decoration: none;\n\n background-color: $museum-green;\n }\n\n &-text {\n display: flex;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 1px solid $museum-green;\n\n color: $museum-black;\n text-decoration: none;\n\n\n }\n }\n\n\n &__event {\n position: absolute;\n bottom: 0;\n transform: rotate(180deg);\n\n display: none;\n align-items: center;\n justify-content: flex-start;\n\n writing-mode: vertical-rl;\n\n @include on-desktop {\n display: flex;\n }\n\n\n &-text {\n margin: 0;\n padding: 0;\n\n font-size: 14px;\n font-weight: $font-bold;\n color: $museum-event;\n text-decoration: none;\n text-transform: uppercase;\n }\n\n &-line {\n display: block;\n\n width: 1px;\n height: 70px;\n margin-bottom: 20px;\n\n background-color: $museum-green;\n }\n }\n}\n\n",".actuals {\n @include grid-template;\n @include container;\n\n grid-auto-flow: dense;\n\n & * {\n margin: 0;\n padding: 0;\n }\n\n &__title {\n grid-column: 1 / -1;\n\n @include property-multiscreen(margin-top, 70px, 90px, 200px);\n @include property-multiscreen(margin-bottom, 40px, 50px, 60px);\n }\n\n &__event {\n @include grid-template;\n @include property-multiscreen(margin-bottom, 40px, 50px, 60px);\n\n position: relative;\n grid-column: 1 / -1;\n\n &:last-child {\n @include property-multiscreen(margin-bottom, 180px, 200px, 300px);\n }\n }\n\n &__img-container {\n z-index: 1;\n\n overflow: hidden;\n display: flex;\n justify-content: center;\n grid-column: 1 / -1;\n\n width: 100%;\n\n object-fit: cover;\n\n transition: width 2s;\n\n @include on-desktop {\n width: 175%;\n grid-column: 1/8;\n\n &.element-visible {\n width: 100%;\n }\n }\n }\n\n &__img {\n width: 100%;\n\n @include property-multiscreen(height, 210px, 520px);\n\n object-fit: cover;\n object-position: center;\n }\n\n &__content {\n display: grid;\n grid-template-columns: subgrid;\n grid-column: 1 / -1;\n align-content: center;\n\n @include on-tablet {\n grid-column: 1 / 5;\n }\n\n @include on-desktop {\n grid-column: 9 / -1;\n }\n\n }\n\n &__date-container {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-items: center;\n justify-content: space-between;\n\n margin-top: 20px;\n margin-bottom: 10px;\n\n @include on-tablet {\n gap: 30px;\n justify-content: flex-start;\n }\n }\n\n &__type {\n @include property-multiscreen(font-size, 16px, 14px);\n\n grid-column: 1;\n font-weight: 500;\n color: $museum-event;\n text-transform: uppercase;\n }\n\n &__date {\n @include property-multiscreen(font-size, 16px, 14px);\n\n grid-column: 2 / -1;\n font-weight: 700;\n color: $museum-green;\n text-align: left;\n }\n\n &__name {\n font-size: $font-size-event-name-s;\n margin-bottom: 10px;\n grid-column: 1 / -1;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-weight: 400;\n color: $museum-black;\n\n @include on-tablet {\n font-size: $font-size-event-name-l;\n margin-bottom: 15px;\n }\n\n\n &::after {\n content: '';\n margin-left: 10px;\n background-color: $museum-block;\n\n @include property-multiscreen(\n height,\n $event-name-block-small,\n $event-name-block-large\n );\n @include property-multiscreen(\n width,\n $event-name-block-small,\n $event-name-block-large\n );\n }\n }\n\n &__desc {\n grid-column: 1 / -1;\n\n font-size: 16px;\n font-weight: 300;\n line-height: 150%;\n color: #4e4e4e;\n }\n\n &__lection-content {\n @include property-multiscreen(width, 280px, 570px);\n @include property-multiscreen(height, 140px, 205px);\n @include property-multiscreen(padding-inline, 0, 55px, 100px);\n @include property-multiscreen(bottom, -80px, -120px, -100px);\n\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n box-sizing: border-box;\n border-bottom: 2px solid #1a5a4c40;\n\n background-color: white;\n\n @include hover(transform, translateX(-50%) scale($scale));\n }\n\n &__lection-date-container {\n display: flex;\n justify-content: space-between;\n margin-inline: 20px;\n\n @include on-tablet {\n margin-inline: 0;\n }\n }\n\n &__lection-name {\n @include property-multiscreen(\n font-size,\n $font-size-event-name-s,\n $font-size-event-name-l\n );\n\n font-weight: 400;\n color: $museum-black;\n text-align: center;\n }\n\n &__lection-img-container {\n display: flex;\n grid-column: 1 / -1;\n justify-content: end;\n\n @include width-fulscreen;\n @include property-multiscreen(height, 210px, 390px, 550px);\n }\n\n &__lection-img {\n width: 100%;\n object-fit: cover;\n object-position: bottom;\n }\n}\n",".galery {\n @include grid-template;\n @include container;\n\n margin-bottom: 100px;\n\n &__title {\n grid-column: 1/-1;\n margin-bottom: 50px;\n }\n\n &__slider {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n }\n\n &__images {\n display: flex;\n grid-column: 1/-1;\n height: 100%;\n\n @include slider-container;\n\n @include on-desktop {\n @include slider-container(false);\n\n overflow: visible;\n display: grid;\n grid-template-columns: subgrid;\n }\n }\n\n &__wrapper {\n scroll-snap-align: center;\n position: relative;\n flex: 0 0 calc(100%);\n height: 410px;\n\n\n\n @include on-tablet {\n scroll-snap-align: start;\n flex: 0 0 calc(50% - 10px);\n height: 540px;\n }\n\n @include on-desktop {\n @include hover(transform, scale($scale));\n\n grid-column: span 8;\n height: 600px;\n transition: opacity $fast-transition, transform $fast-transition;\n\n &:nth-child(n+5) {\n display: none;\n }\n\n &--heightS {\n height: 360px;\n }\n }\n\n &--small {\n grid-column: span 4;\n }\n\n\n }\n\n &__img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n }\n\n &__bottom-slider {\n z-index: 1;\n\n display: flex;\n grid-column: 1/-1;\n gap: 22px;\n align-items: center;\n justify-content: center;\n\n margin-top: 20px;\n\n @include on-desktop {\n display: none;\n }\n }\n\n &__button {\n cursor: pointer;\n\n display: block;\n\n aspect-ratio: 1/1;\n height: 9px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n\n text-decoration: none;\n\n background-color: $museum-gray;\n\n\n }\n\n .active {\n background-color: $museum-green;\n }\n}\n",".subscriptions {\n // margin-top: 2000px;\n height: 380px;\n\n @include on-desktop {\n height: 550px;\n }\n\n &__bg {\n position: relative;\n\n height: 100%;\n\n background-image: url(../images/subscr.jpg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.75);\n }\n }\n\n &__grid {\n position: relative;\n z-index: 1;\n\n align-items: center;\n justify-content: center;\n\n height: 100%;\n\n @include grid-template;\n @include container;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n grid-column: 1 / -1;\n\n @include on-desktop {\n grid-column: 4 / 10;\n }\n }\n\n &__text-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: center;\n justify-content: center;\n\n margin-bottom: 50px;\n\n color: white;\n\n @include on-tablet {\n gap: 16px;\n margin-bottom: 60px;\n }\n\n @include on-desktop {\n margin-bottom: 70px;\n }\n }\n\n &__title {\n font-weight: 700;\n\n @include property-multiscreen(font-size, 36px, 48px);\n }\n\n &__text {\n font-size: 18px;\n font-weight: 400;\n text-align: center;\n }\n\n &__form {\n display: flex;\n justify-content: space-between;\n width: 100%;\n height: 50px;\n\n @include on-tablet {\n height: 70px;\n }\n }\n\n &__input {\n all: unset;\n\n width: 100%;\n padding-inline-start: 36px;\n\n font-size: 14px;\n text-align: start;\n\n background-color: $museum-white;\n\n &:-webkit-autofill {\n -webkit-box-shadow: 0 0 0 1000px $museum-white inset;\n\n // border-radius: $boder-radius;\n }\n }\n\n &__form-button {\n all: unset;\n\n cursor: pointer;\n\n aspect-ratio: 1/1;\n height: 100%;\n margin-left: 30px;\n\n background-color: #f14a27;\n background-image: url(../images/baseline-keyboard_arrow_right-24px.png);\n background-repeat: no-repeat;\n background-position: center;\n\n transition: background-color $fast-transition;\n\n @include property-multiscreen(margin-left, 0, 16px, 30px);\n\n &:hover {\n background-color: #ff4e2b;\n }\n\n &:active {\n background-color: $museum-green;\n }\n }\n}\n",".footer {\n max-width: $max-width;\n margin-inline: auto;\n\n &__inline-center {\n @include grid-template;\n @include container;\n\n margin-top: 50px;\n\n }\n\n\n &__logo {\n width: 100%;\n margin: 0;\n\n font-size: 36px;\n font-weight: 700;\n color: black;\n text-decoration: none;\n\n @include on-tablet {\n grid-column: 1;\n flex-direction: column;\n margin-bottom: 60px;\n }\n\n }\n\n &__icons {\n display: flex;\n grid-column: 1 / -1;\n align-items: center;\n margin-bottom: 40px;\n\n @include on-tablet {\n grid-column: 1;\n flex-direction: column;\n }\n\n }\n\n &__social-media {\n display: flex;\n gap: 20px;\n\n @include property-multiscreen(gap, 20px, 32px, 22px)\n }\n\n &__icon {\n @include hover(transform,scale($scale));\n\n display: block;\n justify-content: end;\n\n aspect-ratio: 1/1;\n height: 24px;\n\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n\n &--facebook {\n background-image: url(../images/icons/facebook-letter-logo.png);\n }\n\n &--instagram {\n background-image: url(../images/icons/instagram\\ \\(3\\).png);\n }\n }\n\n // --------------------------------------------------------------------------------------------------------\n\n &__detail {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n margin-bottom: 70px;\n\n @include on-tablet {\n grid-column: 2 / -2;\n }\n\n @include on-desktop {\n grid-column: 3 / 7;\n }\n }\n\n &__schedule {\n grid-column: 1;\n\n @include on-tablet {\n grid-column: span 2;\n }\n }\n\n &__contacts {\n grid-column: 2;\n\n @include on-tablet {\n grid-column: span 2;\n }\n }\n\n &__text {\n font-size: 14px;\n\n &--header {\n margin-bottom: 20px;\n }\n }\n\n &__line-container {\n display: flex;\n grid-column: 1 / -1;\n margin-bottom: 40px;\n\n @include on-tablet {\n grid-column: 2 / -2;\n margin-bottom: 70px;\n }\n\n @include on-desktop {\n grid-column: 7;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n }\n\n &__line {\n width: 100%;\n height: 1px;\n background-color: #1A5A4C80;\n\n @include on-desktop {\n width: 1px;\n height: 260px;\n }\n }\n\n // -------------------------------------------------------------------------------------------\n\n &__link-container {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n\n @include on-tablet {\n grid-column: 2 / -2;\n }\n\n @include on-desktop {\n grid-column: 8 / span 4;\n }\n }\n\n &__link-separator {\n display: flex;\n grid-column: span 1;\n flex-direction: column;\n gap: 20px;\n\n @include on-tablet {\n grid-column: span 2;\n }\n }\n\n &__link {\n transition: opacity $fast-transition;\n\n @include link-cleaner;\n }\n\n &__contact {\n @include link-cleaner;\n }\n\n // ---------------------------------------------------------------------------------------------\n\n &__designer {\n display: flex;\n grid-column: 1 / -1;\n flex-direction: column;\n gap: 10px;\n align-items: center;\n justify-content: center;\n\n margin-top: 80px;\n margin-bottom: 40px;\n\n @include on-tablet {\n flex-direction: row;\n justify-content: space-between;\n margin-top: 120px;\n }\n\n @include on-desktop {\n margin-top: 90px;\n }\n }\n}\n",".navigation {\n box-sizing: border-box;\n}\n","// @import 'fonts';\n@import 'utils';\n@import 'typography';\n@import 'blocks/nav';\n@import 'blocks/body';\n@import 'blocks/header';\n@import 'blocks/actuals';\n@import 'blocks/galeryjs';\n@import 'blocks/subscriptions';\n@import 'blocks/footer';\n@import 'blocks/navigation';\n\nhtml {\n scroll-behavior: smooth;\n font-family: 'IBM Plex Sans', serif;\n}\n\nh1,\nh2,\nh3 {\n margin: 0;\n font-family: Montserrat, serif;\n}\n\np {\n margin: 0;\n}\n\nbody {\n margin: 0;\n padding: 0;\n\n &:has(.nav:target) {\n overflow: hidden;\n }\n}\n\nmain {\n max-width: $max-width;\n margin: 0 auto;\n}\n"],"names":[],"version":3,"file":"Museum.af668e6f.css.map"} \ No newline at end of file diff --git a/docs/Museum.da5980a6.js b/docs/Museum.da5980a6.js new file mode 100644 index 000000000..cfec1e122 --- /dev/null +++ b/docs/Museum.da5980a6.js @@ -0,0 +1,2 @@ +"use strict";var indexElemet,img=document.querySelectorAll(".galery__wrapper"),scrollContainer=document.querySelector(".galery__images"),bottomSlider=document.querySelector(".galery__bottom-slider"),desktop=document.documentElement.clientWidth>=1280?1:2,currentIndex=0,widthScroll=img[0].clientWidth+0,phoneOrTablet=1;document.documentElement.clientWidth>=640&&(widthScroll=img[0].offsetWidth+20,phoneOrTablet=2);for(var countButton=0;countButton","src/scripts/main.js"],"sourcesContent":["'use strict';\nvar img = document.querySelectorAll('.galery__wrapper');\nvar scrollContainer = document.querySelector('.galery__images');\nvar bottomSlider = document.querySelector('.galery__bottom-slider');\nvar desktop = document.documentElement.clientWidth >= 1280 ? 1 : 2;\nvar currentIndex = 0;\nvar widthScroll = img[0].clientWidth + 0;\nvar phoneOrTablet = 1;\nvar indexElemet;\nif (document.documentElement.clientWidth >= 640) {\n widthScroll = img[0].offsetWidth + 20;\n phoneOrTablet = 2;\n}\nfor(var countButton = 0; countButton < img.length - phoneOrTablet; countButton++){\n var newElement = document.createElement('button');\n newElement.classList.add('galery__button');\n bottomSlider.appendChild(newElement);\n}\nvar swipe = function() {\n scrollContainer.scrollTo({\n left: widthScroll * currentIndex,\n behavior: 'smooth'\n });\n};\nvar button = document.querySelectorAll('.galery__button');\nscrollContainer.addEventListener('scroll', function() {\n indexElemet = Math.round(scrollContainer.scrollLeft / widthScroll);\n button.forEach(function(b) {\n return b.classList.remove('active');\n });\n button[indexElemet].classList.add('active');\n});\nfunction opacityHover(className) {\n if (desktop === 1) {\n var selectorList = document.querySelectorAll(className);\n selectorList.forEach(function(element) {\n element.addEventListener('mouseover', function() {\n selectorList.forEach(function(i) {\n i.style.opacity = 0.5;\n i.style.zIndex = 1;\n });\n element.style.opacity = 1;\n element.style.zIndex = 3;\n // console.log(element);\n });\n element.addEventListener('mouseleave', function() {\n selectorList.forEach(function(i) {\n return i.style.opacity = 1;\n });\n });\n });\n }\n}\nopacityHover('.galery__wrapper');\nopacityHover('.nav__link');\nopacityHover('.footer__link');\nbutton.forEach(function(btn, index) {\n btn.addEventListener('click', function() {\n currentIndex = index;\n swipe();\n });\n});\nvar form = document.querySelector('.subscriptions__form');\nform.addEventListener('submit', function(e) {\n form.reset();\n});\n\n//# sourceMappingURL=Museum.da5980a6.js.map\n","'use strict';\n\nconst img = document.querySelectorAll('.galery__wrapper');\nconst scrollContainer = document.querySelector('.galery__images');\nconst bottomSlider = document.querySelector('.galery__bottom-slider');\n\nconst desktop = document.documentElement.clientWidth >= 1280 ? 1 : 2;\nlet currentIndex = 0;\nlet widthScroll = img[0].clientWidth + 0;\nlet phoneOrTablet = 1;\nlet indexElemet;\n\nif (document.documentElement.clientWidth >= 640) {\n widthScroll = img[0].offsetWidth + 20;\n phoneOrTablet = 2;\n}\n\nfor (\n let countButton = 0;\n countButton < img.length - phoneOrTablet;\n countButton++\n) {\n const newElement = document.createElement('button');\n\n newElement.classList.add('galery__button');\n bottomSlider.appendChild(newElement);\n}\n\nconst swipe = () => {\n scrollContainer.scrollTo({\n left: widthScroll * currentIndex,\n behavior: 'smooth',\n });\n};\nconst button = document.querySelectorAll('.galery__button');\n\nscrollContainer.addEventListener('scroll', () => {\n indexElemet = Math.round(scrollContainer.scrollLeft / widthScroll);\n button.forEach((b) => b.classList.remove('active'));\n button[indexElemet].classList.add('active');\n});\n\nfunction opacityHover(className) {\n if (desktop === 1) {\n const selectorList = document.querySelectorAll(className);\n\n selectorList.forEach((element) => {\n element.addEventListener('mouseover', () => {\n selectorList.forEach((i) => {\n i.style.opacity = 0.5;\n i.style.zIndex = 1;\n });\n element.style.opacity = 1;\n element.style.zIndex = 3;\n // console.log(element);\n });\n\n element.addEventListener('mouseleave', () => {\n selectorList.forEach((i) => (i.style.opacity = 1));\n });\n });\n }\n}\nopacityHover('.galery__wrapper');\nopacityHover('.nav__link');\nopacityHover('.footer__link');\n\nbutton.forEach((btn, index) => {\n btn.addEventListener('click', () => {\n currentIndex = index;\n swipe();\n });\n});\n\nconst form = document.querySelector('.subscriptions__form');\n\nform.addEventListener('submit', (e) => {\n form.reset();\n});\n"],"names":["indexElemet","img","document","querySelectorAll","scrollContainer","querySelector","bottomSlider","desktop","documentElement","clientWidth","currentIndex","widthScroll","phoneOrTablet","offsetWidth","countButton","length","newElement","createElement","classList","add","appendChild","swipe","scrollTo","left","behavior","button","opacityHover","className","selectorList","forEach","element","addEventListener","i","style","opacity","zIndex","Math","round","scrollLeft","b","remove","btn","index","form","e","reset"],"version":3,"file":"Museum.da5980a6.js.map"} \ No newline at end of file diff --git a/docs/Museum.f22eb568.js b/docs/Museum.f22eb568.js new file mode 100644 index 000000000..373f948e1 --- /dev/null +++ b/docs/Museum.f22eb568.js @@ -0,0 +1,2 @@ +"use strict";function getLinesDom(n){document.querySelectorAll(n).forEach(function(n){var e=n.innerHTML.split(" ");n.innerHTML=e.map(function(n){return"".concat(n,"")}).join(" ");var t=n.querySelectorAll("span"),r=[[]],o=0,i=null;t.forEach(function(n){var e=n.getBoundingClientRect();null===i&&(i=e.top),2>Math.abs(e.top-i)||(r.push([]),o++,i=e.top),r[o].push(n.innerHTML)}),n.innerHTML=r.map(function(n){return''.concat(n.join(" "),"")}).join(" ")})}function animateOnScrollText(n,e){var t=new IntersectionObserver(function(n){n.forEach(function(n){n.isIntersecting&&(n.target.querySelector(e).classList.add("is-visible"),t.unobserve(n.target))})},{root:null,threshold:0,rootMargin:"-30% 0px"});document.querySelectorAll(n).forEach(function(n){return t.observe(n)})}function animateOnScrollElement(n){var e=new IntersectionObserver(function(n){n.forEach(function(n){n.isIntersecting&&n.target.classList.add("element-visible")})},{root:null,threshold:0,rootMargin:"-50% 0px"});document.querySelectorAll(n).forEach(function(n){return e.observe(n)})}animateOnScrollElement(".actuals__img-container"),getLinesDom(".spli-text-with-mask"),animateOnScrollText(".text-line",".text-inner"); +//# sourceMappingURL=Museum.f22eb568.js.map diff --git a/docs/Museum.f22eb568.js.map b/docs/Museum.f22eb568.js.map new file mode 100644 index 000000000..903ca7c28 --- /dev/null +++ b/docs/Museum.f22eb568.js.map @@ -0,0 +1 @@ +{"mappings":"ACAA,aAEA,SAAS,YAAY,CAAQ,EAG3B,AAFc,SAAS,gBAAgB,CAAC,GAElC,OAAO,CAAC,SAAC,CAAf,EACE,IAAM,EAAQ,EAAK,SAAS,CAAC,KAAK,CAAC,IAEnC,CAAA,EAAK,SAAS,CAAG,EAAM,GAAG,CAAC,SAAC,CAA5B,EAAqC,MAAC,SAAa,MAAA,CAAL,EAAK,UAAU,GAAA,IAAI,CAAC,KAElE,IAAM,EAAO,EAAK,gBAAgB,CAAC,QAE/B,EAAQ,CAAC,EAAE,CAAC,CACZ,EAAU,EACV,EAAkB,KAEtB,EAAK,OAAO,CAAC,SAAC,CAAd,EACE,IAAM,EAAO,EAAG,qBAAqB,EAEjC,AAAoB,QAApB,GACF,CAAA,EAAkB,EAAK,GAAG,AAAH,EAGkB,EAAvC,KAAK,GAAG,CAAC,EAAK,GAAG,CAAG,KAGtB,EAAM,IAAI,CAAC,EAAE,EACb,IACA,EAAkB,EAAK,GAAG,EAJ1B,CAAK,CAAC,EAAQ,CAAC,IAAI,CAAC,EAAG,SAAS,CAOpC,GAEA,EAAK,SAAS,CAAG,EACd,GAAG,CACF,SAAC,CAFL,EAGM,MAAC,oDAAkE,MAAA,CAAf,EAAK,IAAI,CAAC,KAAK,iBAEtE,GAAA,IAAI,CAAC,IACV,EACF,CAEA,SAAS,oBAAoB,CAAQ,CAAE,CAAiB,EACtD,IAAM,EAAW,IAAI,qBACnB,SAAC,CADH,EAEI,EAAQ,OAAO,CAAC,SAAC,CAAjB,EACM,EAAM,cAAc,GAEtB,AADc,EAAM,MAAM,CAAC,aAAa,CAAC,GACnC,SAAS,CAAC,GAAG,CAAC,cACpB,EAAS,SAAS,CAAC,EAAM,MAAM,EAEnC,EACF,EACA,CACE,KAAM,KACN,UAAW,EACX,WAAY,UACd,GAIF,AADiB,SAAS,gBAAgB,CAAC,GAClC,OAAO,CAAC,SAAC,CAAlB,EAAyB,OAAA,EAAS,OAAO,CAAC,E,EAC5C,CAEA,SAAS,uBAAuB,CAAQ,EAEtC,IAAM,EAAW,IAAI,qBACnB,SAAC,CADH,EAEI,EAAQ,OAAO,CAAC,SAAC,CAAjB,EACM,EAAM,cAAc,EACtB,EAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,kBAE/B,EACF,EACA,CACE,KAAM,KACN,UAAW,EACX,WAAY,UACd,GAGF,AADiB,SAAS,gBAAgB,CAAC,GAClC,OAAO,CAAC,SAAC,CAAlB,EAAyB,OAAA,EAAS,OAAO,CAAC,E,EAC5C,CACA,uBAAuB,2BACvB,YAAY,wBACZ,oBAAoB,aAAc","sources":["","src/scripts/animation.js"],"sourcesContent":["'use strict';\nfunction getLinesDom(selector) {\n var texts = document.querySelectorAll(selector);\n texts.forEach(function(text) {\n var words = text.innerHTML.split(' ');\n text.innerHTML = words.map(function(word) {\n return \"\".concat(word, \"\");\n }).join(' ');\n var span = text.querySelectorAll('span');\n var lines = [\n []\n ];\n var counter = 0;\n var lastTopPosition = null;\n span.forEach(function(el) {\n var rect = el.getBoundingClientRect();\n if (lastTopPosition === null) lastTopPosition = rect.top;\n if (Math.abs(rect.top - lastTopPosition) < 2) lines[counter].push(el.innerHTML);\n else {\n lines.push([]);\n counter++;\n lastTopPosition = rect.top;\n lines[counter].push(el.innerHTML);\n }\n });\n text.innerHTML = lines.map(function(line) {\n return ''.concat(line.join(' '), \"\");\n }).join(' ');\n });\n}\nfunction animateOnScrollText(selector, elementForAnimate) {\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n var inner = entry.target.querySelector(elementForAnimate);\n inner.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, {\n root: null,\n threshold: 0,\n rootMargin: '-30% 0px'\n });\n var elements = document.querySelectorAll(selector);\n elements.forEach(function(el) {\n return observer.observe(el);\n });\n}\nfunction animateOnScrollElement(selector) {\n // element-visible\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) entry.target.classList.add('element-visible');\n });\n }, {\n root: null,\n threshold: 0,\n rootMargin: '-50% 0px'\n });\n var elements = document.querySelectorAll(selector);\n elements.forEach(function(el) {\n return observer.observe(el);\n });\n}\nanimateOnScrollElement('.actuals__img-container');\ngetLinesDom('.spli-text-with-mask');\nanimateOnScrollText('.text-line', '.text-inner');\n\n//# sourceMappingURL=Museum.f22eb568.js.map\n","'use strict';\n\nfunction getLinesDom(selector) {\n const texts = document.querySelectorAll(selector);\n\n texts.forEach((text) => {\n const words = text.innerHTML.split(' ');\n\n text.innerHTML = words.map((word) => `${word}`).join(' ');\n\n const span = text.querySelectorAll('span');\n\n let lines = [[]];\n let counter = 0;\n let lastTopPosition = null;\n\n span.forEach((el) => {\n const rect = el.getBoundingClientRect();\n\n if (lastTopPosition === null) {\n lastTopPosition = rect.top;\n }\n\n if (Math.abs(rect.top - lastTopPosition) < 2) {\n lines[counter].push(el.innerHTML);\n } else {\n lines.push([]);\n counter++;\n lastTopPosition = rect.top;\n lines[counter].push(el.innerHTML);\n }\n });\n\n text.innerHTML = lines\n .map(\n (line) =>\n `${line.join(' ')}`,\n )\n .join(' ');\n });\n}\n\nfunction animateOnScrollText(selector, elementForAnimate) {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const inner = entry.target.querySelector(elementForAnimate);\n inner.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n },\n {\n root: null,\n threshold: 0,\n rootMargin: '-30% 0px',\n },\n );\n\n const elements = document.querySelectorAll(selector);\n elements.forEach((el) => observer.observe(el));\n}\n\nfunction animateOnScrollElement(selector) {\n // element-visible\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add('element-visible');\n }\n });\n },\n {\n root: null,\n threshold: 0,\n rootMargin: '-50% 0px',\n },\n );\n const elements = document.querySelectorAll(selector);\n elements.forEach((el) => observer.observe(el));\n}\nanimateOnScrollElement('.actuals__img-container');\ngetLinesDom('.spli-text-with-mask');\nanimateOnScrollText('.text-line', '.text-inner');\n"],"names":["getLinesDom","selector","texts","document","querySelectorAll","forEach","text","words","innerHTML","split","map","word","concat","join","span","lines","counter","lastTopPosition","el","rect","getBoundingClientRect","top","Math","abs","push","line","animateOnScrollText","elementForAnimate","observer","IntersectionObserver","entries","entry","isIntersecting","inner","target","querySelector","classList","add","unobserve","root","threshold","rootMargin","elements","observe","animateOnScrollElement"],"version":3,"file":"Museum.f22eb568.js.map"} \ No newline at end of file diff --git a/docs/NAMU.2f8f0cbb.png b/docs/NAMU.2f8f0cbb.png new file mode 100644 index 000000000..d1b352f5c Binary files /dev/null and b/docs/NAMU.2f8f0cbb.png differ diff --git a/docs/arrow-up.ca02b405.png b/docs/arrow-up.ca02b405.png new file mode 100644 index 000000000..82f1e970e Binary files /dev/null and b/docs/arrow-up.ca02b405.png differ diff --git a/docs/baseline-keyboard_arrow_right-24px.cb2c3a19.png b/docs/baseline-keyboard_arrow_right-24px.cb2c3a19.png new file mode 100644 index 000000000..f623cd028 Binary files /dev/null and b/docs/baseline-keyboard_arrow_right-24px.cb2c3a19.png differ diff --git a/docs/baseline-menu-24px.682dae2c.svg b/docs/baseline-menu-24px.682dae2c.svg new file mode 100644 index 000000000..f8b169fb6 --- /dev/null +++ b/docs/baseline-menu-24px.682dae2c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/dream-tablet.fe372968.jpg b/docs/dream-tablet.fe372968.jpg new file mode 100644 index 000000000..0541ce37c Binary files /dev/null and b/docs/dream-tablet.fe372968.jpg differ diff --git a/docs/facebook-letter-logo.952c99a1.png b/docs/facebook-letter-logo.952c99a1.png new file mode 100644 index 000000000..c1842f8b8 Binary files /dev/null and b/docs/facebook-letter-logo.952c99a1.png differ diff --git a/docs/girl.d4248c3e.jpg b/docs/girl.d4248c3e.jpg new file mode 100644 index 000000000..3c10aea83 Binary files /dev/null and b/docs/girl.d4248c3e.jpg differ diff --git a/docs/gusi.0a696436.jpg b/docs/gusi.0a696436.jpg new file mode 100644 index 000000000..4592d9fa3 Binary files /dev/null and b/docs/gusi.0a696436.jpg differ diff --git a/docs/header_image_large.2de1383a.png b/docs/header_image_large.2de1383a.png new file mode 100644 index 000000000..b078a1332 Binary files /dev/null and b/docs/header_image_large.2de1383a.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 000000000..8e413a602 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,282 @@ +NationalMuseum + + to top + +
+ +
+ Museum + +
+
+

+ ХУДОЖНІЙ +
+ МУЗЕЙ +

+
+ + КВИТКИ + + + > + +
+
+ + + події + +
+
+
+ +
+
+

Актуальні події

+ + + +
+ +
+
+
+
+
+

Підписка

+

+ Бути в курсі всіх актуальних подій та останніх новин. +

+
+
+ + +
+
+
+
+
+
+ + + + + + diff --git a/docs/instagram (3).50e529f9.png b/docs/instagram (3).50e529f9.png new file mode 100644 index 000000000..ca3ceb2a1 Binary files /dev/null and b/docs/instagram (3).50e529f9.png differ diff --git a/docs/lection.aae74a9c.jpg b/docs/lection.aae74a9c.jpg new file mode 100644 index 000000000..7aefa97e1 Binary files /dev/null and b/docs/lection.aae74a9c.jpg differ diff --git a/docs/lev.ea6cc3d8.jpg b/docs/lev.ea6cc3d8.jpg new file mode 100644 index 000000000..8d5d57c0e Binary files /dev/null and b/docs/lev.ea6cc3d8.jpg differ diff --git a/docs/ri-close-fill.99137aa5.png b/docs/ri-close-fill.99137aa5.png new file mode 100644 index 000000000..f4831ef5f Binary files /dev/null and b/docs/ri-close-fill.99137aa5.png differ diff --git a/docs/run-tablet.46806c7b.jpg b/docs/run-tablet.46806c7b.jpg new file mode 100644 index 000000000..c73fc4142 Binary files /dev/null and b/docs/run-tablet.46806c7b.jpg differ diff --git a/docs/subscr.87441af8.jpg b/docs/subscr.87441af8.jpg new file mode 100644 index 000000000..0572b3f15 Binary files /dev/null and b/docs/subscr.87441af8.jpg differ diff --git a/docs/summer.23040e59.jpg b/docs/summer.23040e59.jpg new file mode 100644 index 000000000..60135581b Binary files /dev/null and b/docs/summer.23040e59.jpg differ diff --git a/docs/weeding.77ec3f95.jpg b/docs/weeding.77ec3f95.jpg new file mode 100644 index 000000000..59047504a Binary files /dev/null and b/docs/weeding.77ec3f95.jpg differ diff --git a/src/images/NAMU.png b/src/images/NAMU.png new file mode 100644 index 000000000..abcaf7616 Binary files /dev/null and b/src/images/NAMU.png differ diff --git a/src/images/baseline-keyboard_arrow_right-24px.png b/src/images/baseline-keyboard_arrow_right-24px.png new file mode 100644 index 000000000..8e724ffd1 Binary files /dev/null and b/src/images/baseline-keyboard_arrow_right-24px.png differ diff --git a/src/images/dream-mobile.png b/src/images/dream-mobile.png new file mode 100644 index 000000000..47f22882d Binary files /dev/null and b/src/images/dream-mobile.png differ diff --git a/src/images/dream-tablet.jpg b/src/images/dream-tablet.jpg new file mode 100644 index 000000000..988421da3 Binary files /dev/null and b/src/images/dream-tablet.jpg differ diff --git a/src/images/gallery/girl.jpg b/src/images/gallery/girl.jpg new file mode 100644 index 000000000..1b497b632 Binary files /dev/null and b/src/images/gallery/girl.jpg differ diff --git a/src/images/gallery/gusi.jpg b/src/images/gallery/gusi.jpg new file mode 100644 index 000000000..795c19ee2 Binary files /dev/null and b/src/images/gallery/gusi.jpg differ diff --git a/src/images/gallery/lev.jpg b/src/images/gallery/lev.jpg new file mode 100644 index 000000000..2882f4e36 Binary files /dev/null and b/src/images/gallery/lev.jpg differ diff --git a/src/images/gallery/summer.jpg b/src/images/gallery/summer.jpg new file mode 100644 index 000000000..e928d603a Binary files /dev/null and b/src/images/gallery/summer.jpg differ diff --git a/src/images/gallery/weeding.jpg b/src/images/gallery/weeding.jpg new file mode 100644 index 000000000..0f68e92b1 Binary files /dev/null and b/src/images/gallery/weeding.jpg differ diff --git a/src/images/header_image_large.png b/src/images/header_image_large.png new file mode 100644 index 000000000..a7eddff20 Binary files /dev/null and b/src/images/header_image_large.png differ diff --git a/src/images/header_image_medium.png b/src/images/header_image_medium.png new file mode 100644 index 000000000..9222c7245 Binary files /dev/null and b/src/images/header_image_medium.png differ diff --git a/src/images/icons/arrow-up.png b/src/images/icons/arrow-up.png new file mode 100644 index 000000000..f039ba7a0 Binary files /dev/null and b/src/images/icons/arrow-up.png differ diff --git a/src/images/icons/baseline-menu-24px.svg b/src/images/icons/baseline-menu-24px.svg new file mode 100644 index 000000000..f08cc7c6a --- /dev/null +++ b/src/images/icons/baseline-menu-24px.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/facebook-letter-logo.png b/src/images/icons/facebook-letter-logo.png new file mode 100644 index 000000000..58d8b881f Binary files /dev/null and b/src/images/icons/facebook-letter-logo.png differ diff --git a/src/images/icons/instagram (3).png b/src/images/icons/instagram (3).png new file mode 100644 index 000000000..cc238656b Binary files /dev/null and b/src/images/icons/instagram (3).png differ diff --git a/src/images/lection.jpg b/src/images/lection.jpg new file mode 100644 index 000000000..69bd1536b Binary files /dev/null and b/src/images/lection.jpg differ diff --git a/src/images/ri-close-fill.png b/src/images/ri-close-fill.png new file mode 100644 index 000000000..c01374b47 Binary files /dev/null and b/src/images/ri-close-fill.png differ diff --git a/src/images/run-mobile.png b/src/images/run-mobile.png new file mode 100644 index 000000000..a8b247f2c Binary files /dev/null and b/src/images/run-mobile.png differ diff --git a/src/images/run-tablet.jpg b/src/images/run-tablet.jpg new file mode 100644 index 000000000..8d6eacb16 Binary files /dev/null and b/src/images/run-tablet.jpg differ diff --git a/src/images/subscr.jpg b/src/images/subscr.jpg new file mode 100644 index 000000000..d69bacb81 Binary files /dev/null and b/src/images/subscr.jpg differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 000000000..dcbc30e7c --- /dev/null +++ b/src/index.html @@ -0,0 +1,451 @@ + + + + + + NationalMuseum + + + + + + + + + + + to top + +
+ +
+ Museum + +
+
+

+ ХУДОЖНІЙ +
+ МУЗЕЙ +

+
+ + КВИТКИ + + + > + +
+
+ + + події + +
+
+
+ +
+
+

Актуальні події

+ + + +
+ +
+
+
+
+
+

Підписка

+

+ Бути в курсі всіх актуальних подій та останніх новин. +

+
+
+ + +
+
+
+
+
+
+ + + + + + diff --git a/src/scripts/animation.js b/src/scripts/animation.js new file mode 100644 index 000000000..e2f4ef946 --- /dev/null +++ b/src/scripts/animation.js @@ -0,0 +1,86 @@ +'use strict'; + +function getLinesDom(selector) { + const texts = document.querySelectorAll(selector); + + texts.forEach((text) => { + const words = text.innerHTML.split(' '); + + text.innerHTML = words.map((word) => `${word}`).join(' '); + + const span = text.querySelectorAll('span'); + + let lines = [[]]; + let counter = 0; + let lastTopPosition = null; + + span.forEach((el) => { + const rect = el.getBoundingClientRect(); + + if (lastTopPosition === null) { + lastTopPosition = rect.top; + } + + if (Math.abs(rect.top - lastTopPosition) < 2) { + lines[counter].push(el.innerHTML); + } else { + lines.push([]); + counter++; + lastTopPosition = rect.top; + lines[counter].push(el.innerHTML); + } + }); + + text.innerHTML = lines + .map( + (line) => + `${line.join(' ')}`, + ) + .join(' '); + }); +} + +function animateOnScrollText(selector, elementForAnimate) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const inner = entry.target.querySelector(elementForAnimate); + inner.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, + { + root: null, + threshold: 0, + rootMargin: '-30% 0px', + }, + ); + + const elements = document.querySelectorAll(selector); + elements.forEach((el) => observer.observe(el)); +} + +function animateOnScrollElement(selector) { + // element-visible + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('element-visible'); + } + }); + }, + { + root: null, + threshold: 0, + rootMargin: '-50% 0px', + }, + ); + const elements = document.querySelectorAll(selector); + elements.forEach((el) => observer.observe(el)); +} +animateOnScrollElement('.actuals__img-container'); +getLinesDom('.spli-text-with-mask'); +animateOnScrollText('.text-line', '.text-inner'); diff --git a/src/scripts/galery.js b/src/scripts/galery.js new file mode 100644 index 000000000..486077814 --- /dev/null +++ b/src/scripts/galery.js @@ -0,0 +1,79 @@ +'use strict'; + +const img = document.querySelectorAll('.galery__wrapper'); +const scrollContainer = document.querySelector('.galery__images'); +const bottomSlider = document.querySelector('.galery__bottom-slider'); +const button = document.querySelectorAll('.galery__button'); + +const desktop = document.documentElement.clientWidth >= 1280 ? 1 : 2; +let currentIndex = 0; +let widthScroll = img[0].clientWidth + 0; +let phoneOrTablet = 1; +let indexElemet; + +if (document.documentElement.clientWidth >= 640) { + widthScroll = img[0].offsetWidth + 20; + phoneOrTablet = 2; +} + +for ( + let countButton = 0; + countButton < img.length - phoneOrTablet; + countButton++ +) { + const newElement = document.createElement('button'); + + newElement.classList.add('galery__button'); + bottomSlider.appendChild(newElement); +} + +const swipe = () => { + scrollContainer.scrollTo({ + left: widthScroll * currentIndex, + behavior: 'smooth', + }); +}; + +scrollContainer.addEventListener('scroll', () => { + indexElemet = Math.round(scrollContainer.scrollLeft / widthScroll); + button.forEach((b) => b.classList.remove('active')); + button[indexElemet].classList.add('active'); +}); + +function opacityHover(className) { + if (desktop === 1) { + const selectorList = document.querySelectorAll(className); + + selectorList.forEach((element) => { + element.addEventListener('mouseover', () => { + selectorList.forEach((i) => { + i.style.opacity = 0.5; + i.style.zIndex = 1; + }); + element.style.opacity = 1; + element.style.zIndex = 3; + // console.log(element); + }); + + element.addEventListener('mouseleave', () => { + selectorList.forEach((i) => (i.style.opacity = 1)); + }); + }); + } +} +opacityHover('.galery__wrapper'); +opacityHover('.nav__link'); +opacityHover('.footer__link'); + +button.forEach((btn, index) => { + btn.addEventListener('click', () => { + currentIndex = index; + swipe(); + }); +}); + +const form = document.querySelector('.subscriptions__form'); + +form.addEventListener('submit', (e) => { + form.reset(); +}); diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..8741fe175 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,79 @@ 'use strict'; + +const img = document.querySelectorAll('.galery__wrapper'); +const scrollContainer = document.querySelector('.galery__images'); +const bottomSlider = document.querySelector('.galery__bottom-slider'); + +const desktop = document.documentElement.clientWidth >= 1280 ? 1 : 2; +let currentIndex = 0; +let widthScroll = img[0].clientWidth + 0; +let phoneOrTablet = 1; +let indexElemet; + +if (document.documentElement.clientWidth >= 640) { + widthScroll = img[0].offsetWidth + 20; + phoneOrTablet = 2; +} + +for ( + let countButton = 0; + countButton < img.length - phoneOrTablet; + countButton++ +) { + const newElement = document.createElement('button'); + + newElement.classList.add('galery__button'); + bottomSlider.appendChild(newElement); +} + +const swipe = () => { + scrollContainer.scrollTo({ + left: widthScroll * currentIndex, + behavior: 'smooth', + }); +}; +const button = document.querySelectorAll('.galery__button'); + +scrollContainer.addEventListener('scroll', () => { + indexElemet = Math.round(scrollContainer.scrollLeft / widthScroll); + button.forEach((b) => b.classList.remove('active')); + button[indexElemet].classList.add('active'); +}); + +function opacityHover(className) { + if (desktop === 1) { + const selectorList = document.querySelectorAll(className); + + selectorList.forEach((element) => { + element.addEventListener('mouseover', () => { + selectorList.forEach((i) => { + i.style.opacity = 0.5; + i.style.zIndex = 1; + }); + element.style.opacity = 1; + element.style.zIndex = 3; + // console.log(element); + }); + + element.addEventListener('mouseleave', () => { + selectorList.forEach((i) => (i.style.opacity = 1)); + }); + }); + } +} +opacityHover('.galery__wrapper'); +opacityHover('.nav__link'); +opacityHover('.footer__link'); + +button.forEach((btn, index) => { + btn.addEventListener('click', () => { + currentIndex = index; + swipe(); + }); +}); + +const form = document.querySelector('.subscriptions__form'); + +form.addEventListener('submit', (e) => { + form.reset(); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..21642b6db 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,15 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; + font-family: 'IBM Plex Sans'; + font-weight: 400; + src: + url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'), + url('../fonts/IBMPlexSans-Regular.woff') format('woff'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 700; + src: + url('../fonts/IBMPlexSans-Bold.woff2') format('woff2'), + url('../fonts/IBMPlexSans-Bold.woff') format('woff'); } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..50eacb918 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'utils/animation'; diff --git a/src/styles/blocks/actuals.scss b/src/styles/blocks/actuals.scss new file mode 100644 index 000000000..dca0c00db --- /dev/null +++ b/src/styles/blocks/actuals.scss @@ -0,0 +1,214 @@ +.actuals { + @include grid-template; + @include container; + + grid-auto-flow: dense; + + & * { + margin: 0; + padding: 0; + } + + &__title { + grid-column: 1 / -1; + + @include property-multiscreen(margin-top, 70px, 90px, 200px); + @include property-multiscreen(margin-bottom, 40px, 50px, 60px); + } + + &__event { + @include grid-template; + @include property-multiscreen(margin-bottom, 40px, 50px, 60px); + + position: relative; + grid-column: 1 / -1; + + &:last-child { + @include property-multiscreen(margin-bottom, 180px, 200px, 300px); + } + } + + &__img-container { + z-index: 1; + + overflow: hidden; + display: flex; + justify-content: center; + grid-column: 1 / -1; + + width: 100%; + + object-fit: cover; + + transition: width 2s; + + @include on-desktop { + width: 175%; + grid-column: 1/8; + + &.element-visible { + width: 100%; + } + } + } + + &__img { + width: 100%; + + @include property-multiscreen(height, 210px, 520px); + + object-fit: cover; + object-position: center; + } + + &__content { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; + align-content: center; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__date-container { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; + justify-content: space-between; + + margin-top: 20px; + margin-bottom: 10px; + + @include on-tablet { + gap: 30px; + justify-content: flex-start; + } + } + + &__type { + @include property-multiscreen(font-size, 16px, 14px); + + grid-column: 1; + font-weight: 500; + color: $museum-event; + text-transform: uppercase; + } + + &__date { + @include property-multiscreen(font-size, 16px, 14px); + + grid-column: 2 / -1; + font-weight: 700; + color: $museum-green; + text-align: left; + } + + &__name { + font-size: $font-size-event-name-s; + margin-bottom: 10px; + grid-column: 1 / -1; + display: flex; + flex-direction: row; + align-items: center; + + font-weight: 400; + color: $museum-black; + + @include on-tablet { + font-size: $font-size-event-name-l; + margin-bottom: 15px; + } + + &::after { + content: ''; + margin-left: 10px; + background-color: $museum-block; + + @include property-multiscreen( + height, + $event-name-block-small, + $event-name-block-large + ); + @include property-multiscreen( + width, + $event-name-block-small, + $event-name-block-large + ); + } + } + + &__desc { + grid-column: 1 / -1; + + font-size: 16px; + font-weight: 300; + line-height: 150%; + color: #4e4e4e; + } + + &__lection-content { + @include property-multiscreen(width, 280px, 570px); + @include property-multiscreen(height, 140px, 205px); + @include property-multiscreen(padding-inline, 0, 55px, 100px); + @include property-multiscreen(bottom, -80px, -120px, -100px); + + position: absolute; + left: 50%; + transform: translateX(-50%); + + display: flex; + flex-direction: column; + justify-content: center; + + box-sizing: border-box; + border-bottom: 2px solid #1a5a4c40; + + background-color: white; + + @include hover(transform, translateX(-50%) scale($scale)); + } + + &__lection-date-container { + display: flex; + justify-content: space-between; + margin-inline: 20px; + + @include on-tablet { + margin-inline: 0; + } + } + + &__lection-name { + @include property-multiscreen( + font-size, + $font-size-event-name-s, + $font-size-event-name-l + ); + + font-weight: 400; + color: $museum-black; + text-align: center; + } + + &__lection-img-container { + display: flex; + grid-column: 1 / -1; + justify-content: end; + + @include width-fulscreen; + @include property-multiscreen(height, 210px, 390px, 550px); + } + + &__lection-img { + width: 100%; + object-fit: cover; + object-position: bottom; + } +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 000000000..5f1d36b82 --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,17 @@ +.to-top { + position: fixed; + z-index: 3; + right: $margin-mobile; + bottom: $margin-mobile; + + aspect-ratio: 1/1; + height: 50px; + + @include on-tablet { + display: none; + } +} + +.title { + @include property-multiscreen(font-size, 36px, 48px); +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..85d3d62b2 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,199 @@ +.footer { + max-width: $max-width; + margin-inline: auto; + + &__inline-center { + @include grid-template; + @include container; + + margin-top: 50px; + } + + &__logo { + width: 100%; + margin: 0; + + font-size: 36px; + font-weight: 700; + color: black; + text-decoration: none; + + @include on-tablet { + grid-column: 1; + flex-direction: column; + margin-bottom: 60px; + } + } + + &__icons { + display: flex; + grid-column: 1 / -1; + align-items: center; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1; + flex-direction: column; + } + } + + &__social-media { + display: flex; + gap: 20px; + + @include property-multiscreen(gap, 20px, 32px, 22px); + } + + &__icon { + @include hover(transform, scale($scale)); + + display: block; + justify-content: end; + + aspect-ratio: 1/1; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + &--facebook { + background-image: url(../images/icons/facebook-letter-logo.png); + } + + &--instagram { + background-image: url(../images/icons/instagram\ \(3\).png); + } + } + + // -------------------------------------------------------------------------------------------------------- + + &__detail { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + margin-bottom: 70px; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 3 / 7; + } + } + + &__schedule { + grid-column: 1; + + @include on-tablet { + grid-column: span 2; + } + } + + &__contacts { + grid-column: 2; + + @include on-tablet { + grid-column: span 2; + } + } + + &__text { + font-size: 14px; + + &--header { + margin-bottom: 20px; + } + } + + &__line-container { + display: flex; + grid-column: 1 / -1; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 2 / -2; + margin-bottom: 70px; + } + + @include on-desktop { + grid-column: 7; + flex-direction: column; + align-items: center; + justify-content: center; + } + } + + &__line { + width: 100%; + height: 1px; + background-color: #1a5a4c80; + + @include on-desktop { + width: 1px; + height: 260px; + } + } + + // ------------------------------------------------------------------------------------------- + + &__link-container { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 8 / span 4; + } + } + + &__link-separator { + display: flex; + grid-column: span 1; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: span 2; + } + } + + &__link { + transition: opacity $fast-transition; + + @include link-cleaner; + } + + &__contact { + @include link-cleaner; + } + + // --------------------------------------------------------------------------------------------- + + &__designer { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + align-items: center; + justify-content: center; + + margin-top: 80px; + margin-bottom: 40px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + margin-top: 120px; + } + + @include on-desktop { + margin-top: 90px; + } + } +} diff --git a/src/styles/blocks/galery.scss b/src/styles/blocks/galery.scss new file mode 100644 index 000000000..eb94ca3b6 --- /dev/null +++ b/src/styles/blocks/galery.scss @@ -0,0 +1,106 @@ +.galery { + @include grid-template; + @include container; + + position: relative; + + // height: 100%; + @include property-multiscreen(margin-bottom, 130px, 130px, 200px); + + &__title { + grid-column: 1 / -1; + margin-bottom: 56px; + } + + &__slider { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + } + + &__images { + display: grid; + + // grid-template-rows: 1fr; + // gap: 20px; + grid-column: 1 / -1; + grid-template-columns: subgrid; + + width: 100%; + height: auto; + + @include on-desktop { + grid-template-columns: subgrid; + } + } + + &__wrapper { + grid-area: 1/1; + grid-column: 1/-1; + + width: 100%; + height: 410px; + + opacity: 1; + object-fit: cover; + + // transform: translate(-100px); + transition: + transform $fast-transition, + opacity $fast-transition ease-in-out; + + @include on-tablet { + grid-column: span 3; + height: 540px; + } + + @include on-desktop { + height: 600px; + + &:nth-child(n + 3) { + height: 360px; + } + } + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__bottom-slider { + position: absolute; + bottom: -20px; + left: 50%; + transform: translateX(-50%); + + display: flex; + gap: 20px; + + & span { + cursor: pointer; + + display: block; + + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: gray; + + &:hover { + background-color: #1a5a4c; + } + } + + @include on-tablet { + bottom: -30px; + } + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/galeryflex.scss b/src/styles/blocks/galeryflex.scss new file mode 100644 index 000000000..d24855bc3 --- /dev/null +++ b/src/styles/blocks/galeryflex.scss @@ -0,0 +1,113 @@ +.galery { + @include grid-template; + @include container; + @include property-multiscreen(margin-bottom, 40px, 50px, 60px); + + // overflow: hidden; + + &__title { + @include property-multiscreen(margin-bottom, 40px, 50px, 60px); + + grid-column: 1/-1; + } + + &__slider { + position: relative; + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; + } + + &__images { + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + overflow: auto hidden; + display: flex; + grid-column: 1/-1; + gap: 20px; + + width: 100%; + height: 540px; + + scroll-marker-group: after; + + &::scroll-marker-group { + display: flex; + grid-column: 1/-1; + gap: 20px; + justify-content: center; + } + + &::-webkit-scrollbar { + display: none; + } + } + + &__wrapper { + scroll-snap-align: start; + scroll-snap-stop: always; + flex: 0 0 100%; + height: 100%; + + @include on-tablet { + flex: 0 0 50%; + } + + &::scroll-marker { + content: ''; + + aspect-ratio: 1/1; + height: 10px; + border-radius: 50%; + + background-color: $museum-gray; + + /* stylelint-disable-next-line selector-pseudo-class-no-unknown */ + &:target-current { + background-color: $museum-green; + } + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + + &__bottom-slider { + position: absolute; + bottom: -20px; + left: 50%; + transform: translateX(-50%); + + display: flex; + gap: 20px; + + & span { + cursor: pointer; + + display: block; + + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: gray; + + &:hover { + background-color: #1a5a4c; + } + } + + @include on-tablet { + bottom: -30px; + } + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/galeryjs.scss b/src/styles/blocks/galeryjs.scss new file mode 100644 index 000000000..fa2a48d4a --- /dev/null +++ b/src/styles/blocks/galeryjs.scss @@ -0,0 +1,116 @@ +.galery { + @include grid-template; + @include container; + + margin-bottom: 100px; + + &__title { + grid-column: 1/-1; + margin-bottom: 50px; + } + + &__slider { + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + } + + &__images { + display: flex; + grid-column: 1/-1; + height: 100%; + + @include slider-container; + + @include on-desktop { + @include slider-container(false); + + overflow: visible; + display: grid; + grid-template-columns: subgrid; + } + } + + &__wrapper { + scroll-snap-align: center; + position: relative; + flex: 0 0 calc(100%); + height: 410px; + + @include on-tablet { + scroll-snap-align: start; + flex: 0 0 calc(50% - 10px); + height: 540px; + } + + @include on-desktop { + @include hover(transform, scale($scale)); + + grid-column: span 8; + height: 600px; + transition: + opacity $fast-transition, + transform $fast-transition; + + &:nth-child(n + 5) { + display: none; + } + + &--heightS { + height: 360px; + } + } + + &--small { + grid-column: span 4; + } + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__bottom-slider { + z-index: 1; + + display: flex; + grid-column: 1/-1; + gap: 22px; + align-items: center; + justify-content: center; + + margin-top: 20px; + + @include on-desktop { + display: none; + } + } + + &__button { + cursor: pointer; + + display: block; + + aspect-ratio: 1/1; + height: 9px; + padding: 0; + border: 0; + border-radius: 50%; + + text-decoration: none; + + background-color: $museum-gray; + } + + .active { + background-color: $museum-green; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..285f7360b --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,215 @@ +.header { + @include grid-template; + @include container; + + grid-auto-flow: dense; + + &__burger { + cursor: pointer; + + position: absolute; + z-index: 1; + top: 30px; + left: $margin-mobile; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/baseline-menu-24px.svg'); + background-repeat: no-repeat; + + @include hover(transform, scale($scale)); + + @include on-tablet { + top: 40px; + left: $margin-tablet; + } + + @include on-desktop { + left: $margin-desktop; + } + } + + &__top { + position: relative; + grid-column: 1 / -1; + margin-inline: -#{$margin-mobile}; + + @include on-tablet { + grid-column: 4 / -1; + margin-right: -#{$margin-tablet}; + margin-inline: 0; + } + + @include on-desktop { + grid-column: 6 / -1; + margin-right: -#{$margin-desktop}; + } + } + + &__img { + display: block; + width: 100%; + height: auto; + object-fit: cover; + + @include on-tablet { + height: 100vh; + } + } + + &__logo { + position: absolute; + z-index: 1; + top: 15px; + left: calc(50% - $margin-mobile); + + display: block; + + margin: 0; + + font-weight: $font-bold; + + @include on-tablet { + left: 0; + display: flex; + justify-content: center; + width: 220px; + } + + @include on-desktop { + width: 170px; + } + } + + &__content { + position: relative; + + display: flex; + grid-column: 1 / -1; + flex-direction: column; + justify-content: center; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__title { + display: flex; + align-items: center; + justify-content: center; + + margin: 0; + margin-top: 20px; + padding-block: 20px; + + font-size: 45px; + font-weight: $font-bold; + line-height: 100%; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + justify-content: left; + margin-top: $ticket-button-heigh; + padding-block: 38px; + text-align: left; + } + + @include on-desktop { + padding-block: 90px; + } + } + + &__ticket { + display: flex; + + // align-items: end; + height: 50px; + + @include hover(transform, scale($scale)); + + @include on-tablet { + width: 270px; + height: 70px; + } + + @include on-desktop { + align-self: flex-end; + } + + &-arrov { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + aspect-ratio: 1/1; + + // width: 100%; + height: 100%; + + font-weight: $font-bold; + color: $museum-gray; + text-decoration: none; + + background-color: $museum-green; + } + + &-text { + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + width: 100%; + height: 100%; + border: 1px solid $museum-green; + + color: $museum-black; + text-decoration: none; + } + } + + &__event { + position: absolute; + bottom: 0; + transform: rotate(180deg); + + display: none; + align-items: center; + justify-content: flex-start; + + writing-mode: vertical-rl; + + @include on-desktop { + display: flex; + } + + &-text { + margin: 0; + padding: 0; + + font-size: 14px; + font-weight: $font-bold; + color: $museum-event; + text-decoration: none; + text-transform: uppercase; + } + + &-line { + display: block; + + width: 1px; + height: 70px; + margin-bottom: 20px; + + background-color: $museum-green; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..d17ac185c --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,117 @@ +.nav { + pointer-events: none; + + position: fixed; + z-index: 1; + + overflow-y: auto; + overscroll-behavior-y: contain; + + opacity: 0; + + transition: opacity 200ms; + + &:target { + pointer-events: all; + opacity: 1; + } + + &:has(.nav__shadow) &__background { + position: fixed; + z-index: 2; + top: 0; + left: 0; + + width: 100%; + height: 100vh; + + background: rgba(0, 0, 0, 0.5); + } + + &__shadow { + position: fixed; + z-index: 3; + top: 0; + + width: 100%; + height: 225px; + + background-color: $museum-green; + } + + &__data { + @include container; + + display: flex; + + // justify-content: space-between; + gap: 100px; + margin-top: 40px; + } + + &__exit { + z-index: 4; + + aspect-ratio: 1/1; + height: 24px; + + background-image: url(../images/ri-close-fill.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include hover(transform, rotate(90deg)); + } + + &__schedule { + display: flex; + flex-direction: column; + gap: 20px; + max-width: 360px; + } + + &__schedule-container { + display: flex; + gap: 30px; + } + + &__schedule * { + font-size: 14px; + line-height: 150%; + color: $museum-white; + } + + &__schedule-time { + white-space: nowrap; + } + + &__links { + @include grid-template; + + display: flex; + gap: 20px; + } + + &__links-container { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $museum-white; + text-decoration: none; + + transition: opacity $fast-transition; + } + + &__line-conatiner { + display: flex; + align-self: stretch; + width: 1px; + background-color: $museum-white; + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 000000000..9a282add1 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,3 @@ +.navigation { + box-sizing: border-box; +} diff --git a/src/styles/blocks/subscriptions.scss b/src/styles/blocks/subscriptions.scss new file mode 100644 index 000000000..486398880 --- /dev/null +++ b/src/styles/blocks/subscriptions.scss @@ -0,0 +1,139 @@ +.subscriptions { + // margin-top: 2000px; + height: 380px; + + @include on-desktop { + height: 550px; + } + + &__bg { + position: relative; + + height: 100%; + + background-image: url(../images/subscr.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.75); + } + } + + &__grid { + position: relative; + z-index: 1; + + align-items: center; + justify-content: center; + + height: 100%; + + @include grid-template; + @include container; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 4 / 10; + } + } + + &__text-container { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + justify-content: center; + + margin-bottom: 50px; + + color: white; + + @include on-tablet { + gap: 16px; + margin-bottom: 60px; + } + + @include on-desktop { + margin-bottom: 70px; + } + } + + &__title { + font-weight: 700; + + @include property-multiscreen(font-size, 36px, 48px); + } + + &__text { + font-size: 18px; + font-weight: 400; + text-align: center; + } + + &__form { + display: flex; + justify-content: space-between; + width: 100%; + height: 50px; + + @include on-tablet { + height: 70px; + } + } + + &__input { + all: unset; + + width: 100%; + padding-inline-start: 36px; + + font-size: 14px; + text-align: start; + + background-color: $museum-white; + + &:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px $museum-white inset; + + // border-radius: $boder-radius; + } + } + + &__form-button { + all: unset; + + cursor: pointer; + + aspect-ratio: 1/1; + height: 100%; + margin-left: 30px; + + background-color: #f14a27; + background-image: url(../images/baseline-keyboard_arrow_right-24px.png); + background-repeat: no-repeat; + background-position: center; + + transition: background-color $fast-transition; + + @include property-multiscreen(margin-left, 0, 16px, 30px); + + &:hover { + background-color: #ff4e2b; + } + + &:active { + background-color: $museum-green; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..ed64564f6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,41 @@ +// @import 'fonts'; @import 'utils'; -@import 'fonts'; @import 'typography'; +@import 'blocks/nav'; +@import 'blocks/body'; +@import 'blocks/header'; +@import 'blocks/actuals'; +@import 'blocks/galeryjs'; +@import 'blocks/subscriptions'; +@import 'blocks/footer'; +@import 'blocks/navigation'; + +html { + scroll-behavior: smooth; + font-family: 'IBM Plex Sans', serif; +} + +h1, +h2, +h3 { + margin: 0; + font-family: Montserrat, serif; +} + +p { + margin: 0; +} body { - background: $c-gray; + margin: 0; + padding: 0; + + &:has(.nav:target) { + overflow: hidden; + } +} + +main { + max-width: $max-width; + margin: 0 auto; } diff --git a/src/styles/utils/_animation.scss b/src/styles/utils/_animation.scss new file mode 100644 index 000000000..c5733643d --- /dev/null +++ b/src/styles/utils/_animation.scss @@ -0,0 +1,22 @@ +.text-inner { + transform: translateY(100%); + + display: block; + + opacity: 0; + + transition: + transform 0.6s ease, + opacity 1s ease; + transition-delay: 0.6s; +} + +.text-line { + overflow: hidden; // 🔥 головне + display: block; +} + +.text-inner.is-visible { + transform: translateY(0); + opacity: 1; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..ca21139bc 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,98 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $screen-medium) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $screen-large) { + @content; + } +} + +@mixin grid-template { + --column: #{$grid-columns-mobile}; + + display: grid; + grid-template-columns: repeat(var(--column), 1fr); + column-gap: 20px; + + @include on-tablet { + --column: #{$grid-columns-tablet}; + + column-gap: 30px; + } + + @include on-desktop { + --column: #{$grid-columns-desktop}; + } +} + +@mixin container { + margin-inline: $margin-mobile; + + @include on-tablet { + margin-inline: $margin-tablet; + } + + @include on-desktop { + margin-inline: $margin-desktop; + } +} + +@mixin width-fulscreen { + width: calc(100% + #{$margin-mobile * 2}); + margin-inline: -#{$margin-mobile}; + + @include on-tablet { + width: calc(100% + #{$margin-tablet * 2}); + margin-inline: -#{$margin-tablet}; + } + + @include on-desktop { + width: calc(100% + #{$margin-desktop * 2}); + margin-inline: -#{$margin-desktop}; + } +} + +@mixin property-multiscreen($property, $mobile, $tablet, $desktop: null) { + #{$property}: $mobile; + + @include on-tablet { + #{$property}: $tablet; + } + + @include on-desktop { + + @if $desktop { + #{$property}: $desktop; + } @else { + /* stylelint-disable-line at-rule-empty-line-before */ + #{$property}: $tablet; + } + } +} + +@mixin slider-container($enable: true) { + @if $enable { + scroll-snap-type: x mandatory; + overflow: auto hidden; + display: flex; + + @include on-tablet { + gap: 20px; + } + &::-webkit-scrollbar { + display: none; + } + } +} + +@mixin link-cleaner { + color: black; + text-decoration: none; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..147c85362 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,46 @@ -$c-gray: #eee; +// colors +$museum-black: #0f0e08; +$museum-totalblack: black; +$museum-white: #fff; +$museum-gray: #d7dde3; +$museum-green: #1a5a4c; +$museum-border: #1a5a4c40; +$museum-event: #687480; +$museum-block: #f14a27; + +// screen +$screen-medium: 640px; +$screen-large: 1280px; +$max-width: 1440px; + +// font size +$font-size-event-name-s: 28px; +$font-size-event-name-l: 36px; + +// font weight +$font-bold: 700; + +// grid +$grid-columns-mobile: 2; +$grid-columns-tablet: 6; +$grid-columns-desktop: 12; +$grid-gap-mobile: 20px; +$grid-gap-tablet: 30px; + +// margin +$margin-mobile: 20px; +$margin-tablet: 35px; +$margin-desktop: 55px; + +// ticket +$ticket-button-heigh: 50px; + +// other + +$event-name-block-small: 10px; +$event-name-block-large: 15px; + +// transition + +$fast-transition: 300ms; +$scale: 1.05;