diff --git a/Icon-burger.af250253.png b/Icon-burger.af250253.png new file mode 100644 index 0000000000..d59cc8a8e4 Binary files /dev/null and b/Icon-burger.af250253.png differ diff --git a/Icon-close.79ba3314.png b/Icon-close.79ba3314.png new file mode 100644 index 0000000000..7ecf45fbc0 Binary files /dev/null and b/Icon-close.79ba3314.png differ diff --git a/Image2.deeba9aa.png b/Image2.deeba9aa.png new file mode 100644 index 0000000000..376ce7b975 Binary files /dev/null and b/Image2.deeba9aa.png differ diff --git a/Image3.330428c5.png b/Image3.330428c5.png new file mode 100644 index 0000000000..dfe991330b Binary files /dev/null and b/Image3.330428c5.png differ diff --git a/Image4.e3bd05ec.png b/Image4.e3bd05ec.png new file mode 100644 index 0000000000..5c934c4a92 Binary files /dev/null and b/Image4.e3bd05ec.png differ diff --git a/Image5.aa1a4c71.png b/Image5.aa1a4c71.png new file mode 100644 index 0000000000..5f0d4dc84a Binary files /dev/null and b/Image5.aa1a4c71.png differ diff --git a/Image6.9a3df495.png b/Image6.9a3df495.png new file mode 100644 index 0000000000..35cfbf763e Binary files /dev/null and b/Image6.9a3df495.png differ diff --git a/bg-photo.86078057.png b/bg-photo.86078057.png new file mode 100644 index 0000000000..5a37f6d0d1 Binary files /dev/null and b/bg-photo.86078057.png differ diff --git a/favicon.11e8a72b.png b/favicon.11e8a72b.png new file mode 100644 index 0000000000..3db905ae01 Binary files /dev/null and b/favicon.11e8a72b.png differ diff --git a/header-bg-mobile.58013bc9.png b/header-bg-mobile.58013bc9.png new file mode 100644 index 0000000000..fe12b2c2ef Binary files /dev/null and b/header-bg-mobile.58013bc9.png differ diff --git a/icon-burger-hover.b8d0dd41.png b/icon-burger-hover.b8d0dd41.png new file mode 100644 index 0000000000..ea3e7735bc Binary files /dev/null and b/icon-burger-hover.b8d0dd41.png differ diff --git a/icon-phone.a1b2c69e.png b/icon-phone.a1b2c69e.png new file mode 100644 index 0000000000..f686b0ad67 Binary files /dev/null and b/icon-phone.a1b2c69e.png differ diff --git a/image1.7d0fc2aa.png b/image1.7d0fc2aa.png new file mode 100644 index 0000000000..68c2689801 Binary files /dev/null and b/image1.7d0fc2aa.png differ diff --git a/index.cabb280d.js b/index.cabb280d.js new file mode 100644 index 0000000000..e43077fff5 --- /dev/null +++ b/index.cabb280d.js @@ -0,0 +1,2 @@ + +//# sourceMappingURL=index.cabb280d.js.map diff --git a/index.cabb280d.js.map b/index.cabb280d.js.map new file mode 100644 index 0000000000..9d54ef7950 --- /dev/null +++ b/index.cabb280d.js.map @@ -0,0 +1 @@ +{"mappings":"","sources":["src/scripts/main.js"],"sourcesContent":["'use strict';\n"],"names":[],"version":3,"file":"index.cabb280d.js.map"} \ No newline at end of file diff --git a/index.df2553e8.css b/index.df2553e8.css new file mode 100644 index 0000000000..05bedaa122 --- /dev/null +++ b/index.df2553e8.css @@ -0,0 +1,2 @@ +.container{padding-left:20px;padding-right:20px}@media (min-width:576px){.container{padding-left:72px;padding-right:72px}}@media (min-width:1024px){.container{max-width:1020px;margin-left:auto;margin-right:auto;padding-left:120px;padding-right:120px}}.image-section{background-image:url(bg-photo.86078057.png);background-position:50%;background-size:cover;width:100%;height:200px}@media (min-width:576px){.image-section{height:400px}}@media (min-width:1024px){.image-section{height:460px}}.header{background-image:url(header-bg-mobile.58013bc9.png);background-position:50%;background-size:cover;font-family:Space Grotesk,sans-serif}.header__content{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;height:100vh;display:-ms-flexbox;display:flex}.header__title{font-size:36px;font-weight:700;line-height:100%}@media (min-width:576px){.header__title{font-size:40px}}@media (min-width:1024px){.header__title{font-size:56px}}.header__bottom{padding-bottom:40px}@media (min-width:576px){.header__bottom{padding-bottom:64px}}@media (min-width:1024px){.header__bottom{padding-bottom:92px}}.icon{background-position:50%;background-size:cover;width:24px;height:24px;transition:transform .3s;display:block;position:relative}.icon:hover{transform:scale(1.2)}@media (min-width:576px){.icon{width:32px;height:32px}}.icon--phone{background-image:url(icon-phone.a1b2c69e.png)}.icon--menu{background-image:url(Icon-burger.af250253.png)}.icon--menu:hover{background-image:url(icon-burger-hover.b8d0dd41.png);transform:scale(1.2)}.icon--close{background-image:url(Icon-close.79ba3314.png)}.icon__phone-number{letter-spacing:2px;font-size:12px;font-weight:700;line-height:16px;display:none;position:absolute;top:30px;transform:translate(-100%)}.icon--phone:hover+.icon__phone-number,.icon__phone-number:hover{display:inline-block}body{overflow:auto}body:target{overflow:hidden}.menu{box-sizing:border-box;text-transform:uppercase;z-index:1000;background-color:#e5e6e8;width:100%;height:100vh;font-weight:700;position:fixed;top:0;left:0;overflow:hidden}.menu__phone-number{color:inherit;margin-bottom:16px;font-size:16px;line-height:22px;text-decoration:none;display:block}.menu__call-to-order{color:inherit;letter-spacing:2px;border-bottom:1px solid #292929;width:-moz-fit-content;width:fit-content;padding-bottom:7px;font-size:16px;line-height:22px;text-decoration:none;display:block}.menu__nav{margin-bottom:48px}.menu__top{padding-bottom:32px}@media (min-width:576px){.menu__top{margin-bottom:0}}#menu:target~body{overflow:hidden}.nav__link{color:inherit;letter-spacing:2px;font-family:Space Grotesk;font-size:22px;line-height:22px;text-decoration:none;position:relative}.nav__link:after{content:"";transform-origin:0;background-color:#292929;width:100%;height:1px;transition:transform .3s;display:block;position:absolute;bottom:-8px;transform:scale(0)}.nav__link:hover:after{transform:scale(1)}.nav__list{-ms-flex-direction:column;flex-direction:column;gap:32px;margin:0 0 48px;padding:0;list-style:none;display:-ms-flexbox;display:flex}.page{color:#292929;scroll-behavior:smooth;font-family:Space Mono,monospace;font-size:16px}.page__body{min-width:320px;margin:0}.page__menu{opacity:0;pointer-events:none;transition:all .3s;position:fixed;top:0;left:0;right:0;transform:translate(-100%)}.page__menu:target{opacity:1;pointer-events:all;transform:translate(0)}.top-bar{-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding-top:24px;padding-bottom:24px;display:-ms-flexbox;display:flex}@media (min-width:576px){.top-bar{padding-top:64px;padding-bottom:64px}}@media (min-width:1024px){.top-bar{padding-top:64px;padding-bottom:64px}}.top-bar__icons{gap:24px;display:-ms-flexbox;display:flex}.top-bar__logo-link{display:-ms-flexbox;display:flex}.top-bar__logo{height:16px;transition:transform .3s}@media (min-width:576px){.top-bar__logo{height:24px}}@media (min-width:1024px){.top-bar__logo{height:24px}}.top-bar__logo:hover{transform:scale(1.2)}.recommended{margin:0}.recommended__products{--columns:2;grid-template-columns:repeat(var(--columns),1fr);gap:40px 20px;display:grid}@media (min-width:576px){.recommended__products{--columns:6;column-gap:24px}}@media (min-width:1024px){.recommended__products{--columns:12;column-gap:24px}}.recommended__product{grid-column:1/-1}@media (min-width:576px){.recommended__product{grid-column:2/-2}}@media (min-width:1024px){.recommended__product{grid-column:span 4}}.product{transition:transform .3s}.product:hover{transform:scale(1.1)}@media (min-width:1024px){.product__category{width:280px;height:80px}}.product__photo{width:100%}.product__price{font-weight:700}.mobile-and-tablet-text{display:block}@media (min-width:1024px){.mobile-and-tablet-text{display:none}}.desktop-text{display:none}@media (min-width:1024px){.desktop-text{display:block}}.section-title{text-align:left;margin:0 0 48px;font-family:Space Grotesk;font-size:32px;font-weight:700;line-height:32px}@media (min-width:576px){.section-title{margin-bottom:64px;font-size:40px}}@media (min-width:1024px){.section-title{font-size:48px}}.main{background-color:fff}.main__content{row-gap:96px;padding-top:96px;padding-bottom:96px;display:grid}@media (min-width:576px){.main__content{row-gap:120px;padding-top:120px;padding-bottom:120px}}.login__container{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px){.login__container{--columns:6;column-gap:24px}}@media (min-width:1024px){.login__container{--columns:12;column-gap:24px}}.login__title{grid-column:1/-1}@media (min-width:576px){.login__title{grid-column:1/4}}@media (min-width:1024px){.login__title{grid-column:span 5}}.login__content{grid-column:1/-1}@media (min-width:576px){.login__content{grid-column:4/7}}@media (min-width:1024px){.login__content{grid-column:7/13}}.store__container{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px){.store__container{--columns:6;column-gap:24px}}@media (min-width:1024px){.store__container{--columns:12;column-gap:24px}}.store__title{grid-column:1/-1}.store__button{cursor:pointer;color:#fff;background-color:#292929;border:2px solid;border-radius:8px;grid-column:1/-1;width:100%;height:56px;font-size:16px;font-weight:700;transition:border-color .3s}@media (min-width:1024px){.store__button{grid-column:span 4}}.store__button:hover{color:#292929;background-color:#f8f8fa;border-color:#f0f1f4}.store__button:active{color:#fff;background-color:#111}.store__wrapper{grid-column:1/-1;row-gap:40px;padding-bottom:40px;display:grid}@media (min-width:576px){.store__wrapper{row-gap:64px;padding-bottom:56px}}input,textarea{box-sizing:border-box;background-color:#f8f8fa;border:none;border-radius:8px;width:100%;padding:14px 16px;font-family:Space Mono,monospace;font-size:14px;position:relative}input:focus,textarea:focus{border:1px solid #d5d7de;outline:none}input::placeholder{color:#7e7e83}input::placeholder{color:#7e7e83}textarea::placeholder{color:#7e7e83}textarea::placeholder{color:#7e7e83}input:-webkit-autofill{-webkit-text-fill-color:#000;border:none;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}input:-webkit-autofill:hover{-webkit-text-fill-color:#000;border:none;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}input:-webkit-autofill:focus{-webkit-text-fill-color:#000;border:none;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}textarea:-webkit-autofill{-webkit-text-fill-color:#000;border:none;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}textarea:-webkit-autofill:hover{-webkit-text-fill-color:#000;border:none;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}textarea:-webkit-autofill:focus{-webkit-text-fill-color:#000;border:none;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}input:focus,textarea:focus{outline:none}textarea.cart-input__field--height{height:148px}.cart__container{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px){.cart__container{--columns:6;column-gap:24px}}@media (min-width:1024px){.cart__container{--columns:12;column-gap:24px}}.cart__title{grid-column:1/-1}.cart-input{grid-column:span 2;padding-bottom:48px}@media (min-width:576px){.cart-input{grid-column:span 6}}@media (min-width:1024px){.cart-input{grid-column:span 5}}.cart-input__container{padding-bottom:10px}.cart-input__field{box-sizing:border-box;background-color:#f8f8fa;border:none;border-radius:8px;width:100%;height:48px;padding:14px 16px;font-family:Space Mono,monospace;font-size:14px;transition:border-color .3s;position:relative}.cart-input__field:hover{border:1px #d5d7de}.cart-input__field--height{height:148px}.cart-input__field::placeholder{color:#7e7e83;position:absolute;top:14px;left:16px}.cart-input__field::placeholder{color:#7e7e83;position:absolute;top:14px;left:16px}.cart-input__button{cursor:pointer;color:#fff;background-color:#292929;border:2px solid;border-radius:8px;width:100%;height:56px;margin-top:16px;font-size:16px;font-weight:700;transition:border-color .3s}.cart-input__button:hover{color:#292929;background-color:#f8f8fa;border-color:#f0f1f4}.cart-input__button:active{color:#fff;background-color:#111}.cart-contacts{grid-column:span 2}@media (min-width:576px){.cart-contacts{grid-column:span 6}}@media (min-width:1024px){.cart-contacts{grid-column:7/13}}.cart-contacts__container{-ms-flex-direction:column;flex-direction:column;gap:8px;padding-bottom:24px;display:-ms-flexbox;display:flex}.cart-contacts__title{color:#9393a3;margin:0;font-family:Space Grotesk;font-size:14px}.cart-contacts__content{color:#191919;margin:0;font-family:Space Mono;font-size:16px;text-decoration:none;transition:transform .3s}.cart-contacts__content:hover{transform:scale(1.05)}.category{grid-column:1/-1}.category__photos{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;margin-bottom:16px;display:grid}@media (min-width:576px){.category__photos{--columns:6;column-gap:24px}}@media (min-width:1024px){.category__photos{--columns:12;grid-template-columns:repeat(12,1fr);column-gap:24px}}.category__link{position:relative}@media (min-width:576px){.category__link--wide{grid-column:span 4}}@media (min-width:1024px){.category__link--wide{grid-column:span 8}}.category__link--square{height:0;padding-bottom:100%}@media (min-width:576px){.category__link--square{grid-column:span 2}}@media (min-width:1024px){.category__link--square{grid-column:span 4}}.category__photo{object-fit:cover;width:100%;height:100%;transition:transform .3s;position:absolute}.category__photo:hover{transform:scale(1.05)}.category__title{margin:0;font-size:24px;font-weight:700;line-height:140%} +/*# sourceMappingURL=index.df2553e8.css.map */ diff --git a/index.df2553e8.css.map b/index.df2553e8.css.map new file mode 100644 index 0000000000..7dd312110c --- /dev/null +++ b/index.df2553e8.css.map @@ -0,0 +1 @@ +{"mappings":"AC2BA,gDA1BE,yBA0BF,iDApBE,0BAoBF,uGC3BA,kJDCE,yBCDF,6BDOE,0BCPF,6BCAA,gKAQE,mKAQA,+DFfA,yBEeA,+BFTA,0BESA,+BAcA,oCF7BA,yBE6BA,qCFvBA,0BEuBA,qCC5BF,oIH+BE,iCAhCA,yBGCF,8BAeE,4EAKA,4EAGE,6GAMF,4EAKF,0JAWA,sFC/CA,mBAKA,4BAKA,+KAaE,wHASA,qNAYA,8BAIA,+BJ/CA,yBI+CA,4BASF,kCCxDE,6IASE,sLAaA,0CAKF,+IC3BF,2FAME,qCAKA,4HAYA,uECxBF,4KPCE,yBODF,+CPOE,0BOPF,+CAcE,0DAKA,qDAIA,oDPtBA,yBOsBA,4BPhBA,0BOgBA,4BPUA,0CQjCF,sBAIE,+GRHA,yBQGA,oDRGA,0BQHA,qDAMA,uCRTA,yBQSA,wCRHA,0BQGA,0CCVF,kCTiCE,oCA1BA,0BSJF,4CASE,2BAIA,gCAKF,sCTdE,0BScF,sCASA,2BTvBE,0BSuBF,6BC9BA,yHVCE,yBUDF,kDVOE,0BUPF,+BCAA,2BAGE,8EXFA,yBWEA,qECFA,4GZAA,yBYAA,+CZMA,0BYNA,gDAIA,+BZJA,yBYIA,+BZEA,0BYFA,kCAYA,iCZhBA,yBYgBA,iCZVA,0BYUA,kCChBA,4GbAA,yBaAA,+CbMA,0BaNA,gDAIA,+BAIA,wMbFA,0BaEA,mCbwBA,iFaDE,uDAQF,+EbvCA,yBauCA,kDCvCF,2LAYE,iEAKA,iCAAA,iCAAA,oCAAA,oCAMF,4JAAA,kKAAA,kKAAA,+JAAA,qKAAA,qKAaA,wCAiCA,gDAME,2Gd3EA,yBc2EA,8CdrEA,0BcqEA,+CAIA,8BAIA,mDdnFA,yBcmFA,gCd7EA,0Bc6EA,gCAYE,2CAIA,uOdnEF,4CckFI,wCAIA,mFAAA,mFAQF,4Md9FF,sFcgHI,4DAOJ,kCdvJA,yBcuJA,mCdjJA,0BciJA,iCAWE,uIAOA,sFAOA,mIdhJF,oDejCF,2BAGE,+HfFA,yBeEA,+CfIA,0BeJA,qFASA,kCfXA,yBecE,0CfRF,0BeQE,0CASA,qDfvBF,yBeuBE,4CfjBF,0BeiBE,4CAaF,oGfJA,6CeYA","sources":["index.df2553e8.css","src/styles/utills/mixins.scss","src/styles/blocks/image.scss","src/styles/blocks/header.scss","src/styles/blocks/icon.scss","src/styles/blocks/menu.scss","src/styles/blocks/nav.scss","src/styles/blocks/page.scss","src/styles/blocks/topbar.scss","src/styles/blocks/recommended.scss","src/styles/blocks/product.scss","src/styles/blocks/section-title.scss","src/styles/blocks/main.scss","src/styles/blocks/login.scss","src/styles/blocks/store.scss","src/styles/blocks/cart.scss","src/styles/blocks/category.scss"],"sourcesContent":[".container {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n@media (width >= 576px) {\n .container {\n padding-left: 72px;\n padding-right: 72px;\n }\n}\n\n@media (width >= 1024px) {\n .container {\n max-width: 1020px;\n margin-left: auto;\n margin-right: auto;\n padding-left: 120px;\n padding-right: 120px;\n }\n}\n\n.image-section {\n background-image: url(\"bg-photo.86078057.png\");\n background-position: center;\n background-size: cover;\n width: 100%;\n height: 200px;\n}\n\n@media (width >= 576px) {\n .image-section {\n height: 400px;\n }\n}\n\n@media (width >= 1024px) {\n .image-section {\n height: 460px;\n }\n}\n\n.header {\n background-image: url(\"header-bg-mobile.58013bc9.png\");\n background-position: center;\n background-size: cover;\n font-family: Space Grotesk, sans-serif;\n}\n\n.header__content {\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__title {\n font-size: 36px;\n font-weight: 700;\n line-height: 100%;\n}\n\n@media (width >= 576px) {\n .header__title {\n font-size: 40px;\n }\n}\n\n@media (width >= 1024px) {\n .header__title {\n font-size: 56px;\n }\n}\n\n.header__bottom {\n padding-bottom: 40px;\n}\n\n@media (width >= 576px) {\n .header__bottom {\n padding-bottom: 64px;\n }\n}\n\n@media (width >= 1024px) {\n .header__bottom {\n padding-bottom: 92px;\n }\n}\n\n.icon {\n background-position: center;\n background-size: cover;\n width: 24px;\n height: 24px;\n transition: transform .3s;\n display: block;\n position: relative;\n}\n\n.icon:hover {\n transform: scale(1.2);\n}\n\n@media (width >= 576px) {\n .icon {\n width: 32px;\n height: 32px;\n }\n}\n\n.icon--phone {\n background-image: url(\"icon-phone.a1b2c69e.png\");\n}\n\n.icon--menu {\n background-image: url(\"Icon-burger.af250253.png\");\n}\n\n.icon--menu:hover {\n background-image: url(\"icon-burger-hover.b8d0dd41.png\");\n transform: scale(1.2);\n}\n\n.icon--close {\n background-image: url(\"Icon-close.79ba3314.png\");\n}\n\n.icon__phone-number {\n letter-spacing: 2px;\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n display: none;\n position: absolute;\n top: 30px;\n transform: translateX(-100%);\n}\n\n.icon--phone:hover + .icon__phone-number, .icon__phone-number:hover {\n display: inline-block;\n}\n\nbody {\n overflow: auto;\n}\n\nbody:target {\n overflow: hidden;\n}\n\n.menu {\n box-sizing: border-box;\n text-transform: uppercase;\n z-index: 1000;\n background-color: #e5e6e8;\n width: 100%;\n height: 100vh;\n font-weight: 700;\n position: fixed;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n\n.menu__phone-number {\n color: inherit;\n margin-bottom: 16px;\n font-size: 16px;\n line-height: 22px;\n text-decoration: none;\n display: block;\n}\n\n.menu__call-to-order {\n color: inherit;\n letter-spacing: 2px;\n border-bottom: 1px solid #292929;\n width: fit-content;\n padding-bottom: 7px;\n font-size: 16px;\n line-height: 22px;\n text-decoration: none;\n display: block;\n}\n\n.menu__nav {\n margin-bottom: 48px;\n}\n\n.menu__top {\n padding-bottom: 32px;\n}\n\n@media (width >= 576px) {\n .menu__top {\n margin-bottom: 0;\n }\n}\n\n#menu:target ~ body {\n overflow: hidden;\n}\n\n.nav__link {\n color: inherit;\n letter-spacing: 2px;\n font-family: Space Grotesk;\n font-size: 22px;\n line-height: 22px;\n text-decoration: none;\n position: relative;\n}\n\n.nav__link:after {\n content: \"\";\n transform-origin: 0;\n background-color: #292929;\n width: 100%;\n height: 1px;\n transition: transform .3s;\n display: block;\n position: absolute;\n bottom: -8px;\n transform: scale(0);\n}\n\n.nav__link:hover:after {\n transform: scale(1);\n}\n\n.nav__list {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 32px;\n margin: 0 0 48px;\n padding: 0;\n list-style: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.page {\n color: #292929;\n scroll-behavior: smooth;\n font-family: Space Mono, monospace;\n font-size: 16px;\n}\n\n.page__body {\n min-width: 320px;\n margin: 0;\n}\n\n.page__menu {\n opacity: 0;\n pointer-events: none;\n transition: all .3s;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n transform: translateX(-100%);\n}\n\n.page__menu:target {\n opacity: 1;\n pointer-events: all;\n transform: translateX(0);\n}\n\n.top-bar {\n justify-content: space-between;\n align-items: center;\n padding-top: 24px;\n padding-bottom: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 576px) {\n .top-bar {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n}\n\n@media (width >= 1024px) {\n .top-bar {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n}\n\n.top-bar__icons {\n gap: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.top-bar__logo-link {\n display: -ms-flexbox;\n display: flex;\n}\n\n.top-bar__logo {\n height: 16px;\n transition: transform .3s;\n}\n\n@media (width >= 576px) {\n .top-bar__logo {\n height: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .top-bar__logo {\n height: 24px;\n }\n}\n\n.top-bar__logo:hover {\n transform: scale(1.2);\n}\n\n.recommended {\n margin: 0;\n}\n\n.recommended__products {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n gap: 40px 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .recommended__products {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .recommended__products {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.recommended__product {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .recommended__product {\n grid-column: 2 / -2;\n }\n}\n\n@media (width >= 1024px) {\n .recommended__product {\n grid-column: span 4;\n }\n}\n\n.product {\n transition: transform .3s;\n}\n\n.product:hover {\n transform: scale(1.1);\n}\n\n@media (width >= 1024px) {\n .product__category {\n width: 280px;\n height: 80px;\n }\n}\n\n.product__photo {\n width: 100%;\n}\n\n.product__price {\n font-weight: bold;\n}\n\n.mobile-and-tablet-text {\n display: block;\n}\n\n@media (width >= 1024px) {\n .mobile-and-tablet-text {\n display: none;\n }\n}\n\n.desktop-text {\n display: none;\n}\n\n@media (width >= 1024px) {\n .desktop-text {\n display: block;\n }\n}\n\n.section-title {\n text-align: left;\n margin: 0 0 48px;\n font-family: Space Grotesk;\n font-size: 32px;\n font-weight: 700;\n line-height: 32px;\n}\n\n@media (width >= 576px) {\n .section-title {\n margin-bottom: 64px;\n font-size: 40px;\n }\n}\n\n@media (width >= 1024px) {\n .section-title {\n font-size: 48px;\n }\n}\n\n.main {\n background-color: fff;\n}\n\n.main__content {\n row-gap: 96px;\n padding-top: 96px;\n padding-bottom: 96px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .main__content {\n row-gap: 120px;\n padding-top: 120px;\n padding-bottom: 120px;\n }\n}\n\n.login__container {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .login__container {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .login__container {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.login__title {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .login__title {\n grid-column: 1 / 4;\n }\n}\n\n@media (width >= 1024px) {\n .login__title {\n grid-column: span 5;\n }\n}\n\n.login__content {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .login__content {\n grid-column: 4 / 7;\n }\n}\n\n@media (width >= 1024px) {\n .login__content {\n grid-column: 7 / 13;\n }\n}\n\n.store__container {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .store__container {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .store__container {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.store__title {\n grid-column: 1 / -1;\n}\n\n.store__button {\n cursor: pointer;\n color: #fff;\n background-color: #292929;\n border: 2px solid;\n border-radius: 8px;\n grid-column: 1 / -1;\n width: 100%;\n height: 56px;\n font-size: 16px;\n font-weight: 700;\n transition: border-color .3s;\n}\n\n@media (width >= 1024px) {\n .store__button {\n grid-column: span 4;\n }\n}\n\n.store__button:hover {\n color: #292929;\n background-color: #f8f8fa;\n border-color: #f0f1f4;\n}\n\n.store__button:active {\n color: #fff;\n background-color: #111;\n}\n\n.store__wrapper {\n grid-column: 1 / -1;\n row-gap: 40px;\n padding-bottom: 40px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .store__wrapper {\n row-gap: 64px;\n padding-bottom: 56px;\n }\n}\n\ninput, textarea {\n box-sizing: border-box;\n background-color: #f8f8fa;\n border: none;\n border-radius: 8px;\n width: 100%;\n padding: 14px 16px;\n font-family: Space Mono, monospace;\n font-size: 14px;\n position: relative;\n}\n\ninput:focus, textarea:focus {\n border: 1px solid #d5d7de;\n outline: none;\n}\n\ninput::-moz-placeholder {\n color: #7e7e83;\n}\n\ninput::placeholder {\n color: #7e7e83;\n}\n\ntextarea::-moz-placeholder {\n color: #7e7e83;\n}\n\ntextarea::placeholder {\n color: #7e7e83;\n}\n\ninput:-webkit-autofill {\n -webkit-text-fill-color: #000;\n border: none;\n transition: background-color 5000s ease-in-out;\n -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\ninput:-webkit-autofill:hover {\n -webkit-text-fill-color: #000;\n border: none;\n transition: background-color 5000s ease-in-out;\n -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\ninput:-webkit-autofill:focus {\n -webkit-text-fill-color: #000;\n border: none;\n transition: background-color 5000s ease-in-out;\n -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\ntextarea:-webkit-autofill {\n -webkit-text-fill-color: #000;\n border: none;\n transition: background-color 5000s ease-in-out;\n -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\ntextarea:-webkit-autofill:hover {\n -webkit-text-fill-color: #000;\n border: none;\n transition: background-color 5000s ease-in-out;\n -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\ntextarea:-webkit-autofill:focus {\n -webkit-text-fill-color: #000;\n border: none;\n transition: background-color 5000s ease-in-out;\n -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\ninput:focus, textarea:focus {\n outline: none;\n}\n\ntextarea.cart-input__field--height {\n height: 148px;\n}\n\n.cart__container {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .cart__container {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .cart__container {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.cart__title {\n grid-column: 1 / -1;\n}\n\n.cart-input {\n grid-column: span 2;\n padding-bottom: 48px;\n}\n\n@media (width >= 576px) {\n .cart-input {\n grid-column: span 6;\n }\n}\n\n@media (width >= 1024px) {\n .cart-input {\n grid-column: span 5;\n }\n}\n\n.cart-input__container {\n padding-bottom: 10px;\n}\n\n.cart-input__field {\n box-sizing: border-box;\n background-color: #f8f8fa;\n border: none;\n border-radius: 8px;\n width: 100%;\n height: 48px;\n padding: 14px 16px;\n font-family: Space Mono, monospace;\n font-size: 14px;\n transition: border-color .3s;\n position: relative;\n}\n\n.cart-input__field:hover {\n border: 1px #d5d7de;\n}\n\n.cart-input__field--height {\n height: 148px;\n}\n\n.cart-input__field::-moz-placeholder {\n color: #7e7e83;\n position: absolute;\n top: 14px;\n left: 16px;\n}\n\n.cart-input__field::placeholder {\n color: #7e7e83;\n position: absolute;\n top: 14px;\n left: 16px;\n}\n\n.cart-input__button {\n cursor: pointer;\n color: #fff;\n background-color: #292929;\n border: 2px solid;\n border-radius: 8px;\n width: 100%;\n height: 56px;\n margin-top: 16px;\n font-size: 16px;\n font-weight: 700;\n transition: border-color .3s;\n}\n\n.cart-input__button:hover {\n color: #292929;\n background-color: #f8f8fa;\n border-color: #f0f1f4;\n}\n\n.cart-input__button:active {\n color: #fff;\n background-color: #111;\n}\n\n.cart-contacts {\n grid-column: span 2;\n}\n\n@media (width >= 576px) {\n .cart-contacts {\n grid-column: span 6;\n }\n}\n\n@media (width >= 1024px) {\n .cart-contacts {\n grid-column: 7 / 13;\n }\n}\n\n.cart-contacts__container {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 8px;\n padding-bottom: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.cart-contacts__title {\n color: #9393a3;\n margin: 0;\n font-family: Space Grotesk;\n font-size: 14px;\n}\n\n.cart-contacts__content {\n color: #191919;\n margin: 0;\n font-family: Space Mono;\n font-size: 16px;\n text-decoration: none;\n transition: transform .3s;\n}\n\n.cart-contacts__content:hover {\n transform: scale(1.05);\n}\n\n.category {\n grid-column: 1 / -1;\n}\n\n.category__photos {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n margin-bottom: 16px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .category__photos {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .category__photos {\n --columns: 12;\n grid-template-columns: repeat(12, 1fr);\n column-gap: 24px;\n }\n}\n\n.category__link {\n position: relative;\n}\n\n@media (width >= 576px) {\n .category__link--wide {\n grid-column: span 4;\n }\n}\n\n@media (width >= 1024px) {\n .category__link--wide {\n grid-column: span 8;\n }\n}\n\n.category__link--square {\n height: 0;\n padding-bottom: 100%;\n}\n\n@media (width >= 576px) {\n .category__link--square {\n grid-column: span 2;\n }\n}\n\n@media (width >= 1024px) {\n .category__link--square {\n grid-column: span 4;\n }\n}\n\n.category__photo {\n object-fit: cover;\n width: 100%;\n height: 100%;\n transition: transform .3s;\n position: absolute;\n}\n\n.category__photo:hover {\n transform: scale(1.05);\n}\n\n.category__title {\n margin: 0;\n font-size: 24px;\n font-weight: 700;\n line-height: 140%;\n}\n/*# sourceMappingURL=index.df2553e8.css.map */\n","@mixin onTablet {\r\n @media (min-width: $tablet-min-width) {\r\n @content;\r\n }\r\n}\r\n\r\n@mixin onDesktop {\r\n @media (min-width: $desktop-min-width) {\r\n @content;\r\n }\r\n}\r\n\r\n\r\n@mixin constentPaddingInline() {\r\n padding-inline: 20px;\r\n\r\n @include onTablet {\r\n padding-inline: 72px;\r\n }\r\n\r\n @include onDesktop {\r\n max-width: 1020px;\r\n margin-inline: auto;\r\n padding-inline: 120px;\r\n }\r\n}\r\n\r\n.container {\r\n @include constentPaddingInline;\r\n}\r\n\r\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 pageGrid {\r\n --columns: 2;\r\n display: grid;\r\n column-gap: 20px;\r\n grid-template-columns: repeat(var(--columns), 1fr);\r\n\r\n @include onTablet {\r\n --columns: 6;\r\n column-gap: 24px;\r\n }\r\n\r\n @include onDesktop {\r\n --columns: 12;\r\n column-gap: 24px;\r\n }\r\n}",".image-section {\r\n width: 100%; \r\n background-image: url(/src/images/bg-photo.png);\r\n height: 200px;\r\n background-size: cover;\r\n background-position: center;\r\n\r\n @include onTablet {\r\n height: 400px;\r\n }\r\n\r\n @include onDesktop {\r\n height: 460px;\r\n }\r\n}\r\n\r\n\r\n",".header {\r\n\r\n background-image: url(../images/header-bg-mobile.png);\r\n background-size: cover;\r\n background-position: center;\r\n\r\n font-family: \"Space Grotesk\", sans-serif;\r\n \r\n &__content {\r\n \r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n\r\n &__title {\r\n font-size: 36px;\r\n font-weight: 700;\r\n line-height: 100%;\r\n\r\n @include onTablet {\r\n font-size: 40px;\r\n }\r\n\r\n @include onDesktop {\r\n font-size: 56px;\r\n }\r\n }\r\n\r\n &__bottom {\r\n padding-bottom: 40px;\r\n \r\n\r\n @include onTablet {\r\n padding-bottom: 64px;\r\n }\r\n\r\n @include onDesktop {\r\n padding-bottom: 92px;\r\n }\r\n }\r\n}","\r\n\r\n.icon {\r\n display: block;\r\n height: 24px;\r\n width: 24px;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n \r\n @include hover(transform, scale(1.2));\r\n\r\n @include onTablet {\r\n height: 32px;\r\n width: 32px;\r\n }\r\n\r\n &--phone {\r\n \r\n background-image: url(/src/images/icons/icon-phone.png);\r\n }\r\n\r\n &--menu {\r\n background-image: url(/src/images/icons/Icon-burger.png);\r\n\r\n &:hover {\r\n transform: scale(1.2);\r\n background-image: url(/src/images/icons/icon-burger-hover.png);\r\n }\r\n }\r\n\r\n &--close {\r\n background-image: url(../images/icons/Icon-close.png);\r\n }\r\n}\r\n\r\n.icon__phone-number {\r\n position: absolute;\r\n display: none;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 16px;\r\n letter-spacing: 2px;\r\n transform: translateX(-100%);\r\n top: 30px;\r\n}\r\n\r\n.icon--phone:hover + .icon__phone-number,\r\n.icon__phone-number:hover {\r\n display: inline-block;\r\n}","body {\r\n /* Встановлюємо стандартний стан прокрутки */\r\n overflow: auto;\r\n}\r\n\r\nbody:target {\r\n /* Відключаємо прокрутку, коли таргетуємо меню */\r\n overflow: hidden;\r\n}\r\n\r\n.menu {\r\n box-sizing: border-box;\r\n height: 100vh;\r\n background-color: #E5E6E8;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n z-index: 1000;\r\n \r\n &__phone-number {\r\n color: inherit;\r\n text-decoration: none;\r\n font-size: 16px;\r\n line-height: 22px;\r\n display: block;\r\n margin-bottom: 16px;\r\n }\r\n\r\n &__call-to-order {\r\n display: block;\r\n color: inherit;\r\n text-decoration: none;\r\n font-size: 16px;\r\n line-height: 22px;\r\n letter-spacing: 2px;\r\n padding-bottom: 7px;\r\n border-bottom: 1px solid $main-text-color;\r\n width: fit-content;\r\n }\r\n\r\n &__nav {\r\n margin-bottom: 48px;\r\n }\r\n\r\n &__top {\r\n padding-bottom: 32px;\r\n\r\n @include onTablet {\r\n margin-bottom: 0;\r\n }\r\n }\r\n}\r\n\r\n#menu:target ~ body {\r\n overflow: hidden;\r\n}\r\n",".nav{\r\n &__link {\r\n position: relative;\r\n color: inherit;\r\n text-decoration:none;\r\n font-family: Space Grotesk;\r\n font-size: 22px;\r\n line-height: 22px;\r\n letter-spacing: 2px;\r\n\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n display: block;\r\n width: 100%;\r\n bottom: -8px;\r\n height: 1px;\r\n background-color: $main-text-color;\r\n transition: transform 0.3s;\r\n transform: scale(0);\r\n transform-origin: left;\r\n }\r\n \r\n &:hover::after {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n &__list {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 32px;\r\n margin-bottom: 48px;\r\n }\r\n}\r\n"," \n.page {\n font-family: \"Space Mono\", monospace;\n font-size: 16px;\n color: $main-text-color;\n scroll-behavior: smooth;\n\n &__body {\n margin: 0;\n min-width: 320px;\n }\n\n &__menu {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n\n opacity: 0;\n transition: all 0.3s;\n transform: translateX(-100%);\n pointer-events: none;\n }\n\n &__menu:target {\n opacity: 1;\n transform: translateX(0);\n pointer-events: all;\n }\n}\n\n\n\n\n",".top-bar {\r\n padding-block: 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n @include onTablet {\r\n padding-block: 64px;\r\n }\r\n\r\n @include onDesktop {\r\n padding-block: 64px;\r\n }\r\n\r\n &__icons {\r\n display: flex;\r\n gap: 24px;\r\n }\r\n\r\n &__logo-link {\r\n display: flex;\r\n }\r\n\r\n &__logo {\r\n height: 16px;\r\n transition: transform 0.3s;\r\n\r\n @include onTablet {\r\n height: 24px;\r\n }\r\n\r\n @include onDesktop {\r\n height: 24px;\r\n }\r\n\r\n @include hover(transform, scale(1.2));\r\n }\r\n}\r\n",".recommended {\r\n margin: 0;\r\n \r\n\r\n &__products {\r\n \r\n @include pageGrid;\r\n row-gap: 40px;\r\n }\r\n\r\n &__product {\r\n grid-column: 1 / -1;\r\n\r\n @include onTablet {\r\n grid-column: 2 / -2;\r\n }\r\n\r\n @include onDesktop {\r\n grid-column: span 4;\r\n }\r\n }\r\n}",".product {\r\n @include hover(transform, scale(1.1));\r\n\r\n&__category {\r\n \r\n\r\n @include onDesktop {\r\n height: 80px;\r\n width: 280px;\r\n }\r\n}\r\n\r\n &__photo {\r\n width: 100%;\r\n }\r\n\r\n &__price {\r\n font-weight: bold;\r\n }\r\n}\r\n\r\n.mobile-and-tablet-text {\r\n display: block;\r\n\r\n @include onDesktop {\r\n display: none;\r\n }\r\n}\r\n\r\n// Клас для тексту, який показується тільки на десктопі\r\n.desktop-text {\r\n display: none;\r\n\r\n @include onDesktop {\r\n display: block;\r\n }\r\n}",".section-title {\r\n margin: 0;\r\n margin-bottom: 48px;\r\n \r\n\r\n font-family: 'Space Grotesk';\r\n font-size: 32px;\r\n font-weight: 700;\r\n line-height: 32px;\r\n text-align: left;\r\n \r\n \r\n\r\n @include onTablet {\r\n font-size: 40px;\r\n margin-bottom: 64px;\r\n }\r\n\r\n @include onDesktop {\r\n font-size: 48px;\r\n }\r\n}",".main {\r\nbackground-color: fff;\r\n\r\n &__content {\r\n display: grid;\r\n row-gap: 96px;\r\n padding-block: 96px;\r\n \r\n @include onTablet {\r\n padding-block: 120px;\r\n row-gap: 120px;\r\n } \r\n }\r\n}",".login {\r\n &__container {\r\n @include pageGrid;\r\n }\r\n\r\n &__title {\r\n grid-column: 1 / -1;\r\n\r\n @include onTablet {\r\n grid-column: 1 / 4;\r\n }\r\n\r\n @include onDesktop {\r\n grid-column: span 5;\r\n }\r\n }\r\n\r\n &__content {\r\n grid-column: 1 / -1;\r\n\r\n @include onTablet {\r\n grid-column: 4 / 7;\r\n }\r\n\r\n @include onDesktop {\r\n grid-column: 7 / 13;\r\n }\r\n }\r\n\r\n \r\n}\r\n\r\n",".store {\r\n &__container {\r\n @include pageGrid;\r\n }\r\n\r\n &__title {\r\n grid-column: 1 / -1;\r\n }\r\n\r\n &__button { \r\n width: 100%;\r\n height: 56px;\r\n border: 2px solid;\r\n border-radius: 8px;\r\n background-color: transparent;\r\n font-size: 16px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n background-color: #292929;\r\n color: white;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n grid-column: 1 / -1;\r\n \r\n\r\n @include onDesktop {\r\n grid-column: span 4;\r\n }\r\n\r\n @include hover(background-color, #F8F8FA);\r\n @include hover(color, #292929);\r\n @include hover(border-color, #F0F1F4);\r\n \r\n &:active {\r\n background-color: #111111;\r\n color: white;\r\n }\r\n \r\n \r\n }\r\n\r\n &__wrapper {\r\n grid-column: 1 / -1;\r\n display: grid;\r\n row-gap: 40px;\r\n padding-bottom: 40px;\r\n \r\n\r\n @include onTablet {\r\n padding-bottom: 56px;\r\n }\r\n\r\n @include onTablet {\r\n row-gap: 64px;\r\n }\r\n }\r\n}\r\n\r\n","/* Загальні стилі для полів форми */\r\ninput,\r\ntextarea {\r\n position: relative;\r\n border: none;\r\n background-color: #F8F8FA;\r\n width: 100%;\r\n border-radius: 8px;\r\n box-sizing: border-box;\r\n font-size: 14px;\r\n font-family: 'Space Mono', monospace;\r\n padding: 14px 16px;\r\n\r\n &:focus {\r\n outline: none;\r\n border: 1px solid #D5D7DE; /* Сіра рамка при фокусі */\r\n }\r\n\r\n &::placeholder {\r\n color: #7E7E83;\r\n }\r\n}\r\n\r\n/* Стилі для автозаповнення */\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ntextarea:-webkit-autofill,\r\ntextarea:-webkit-autofill:hover,\r\ntextarea:-webkit-autofill:focus {\r\n border: none;\r\n -webkit-text-fill-color: #000; /* Колір тексту при автозаповненні */\r\n -webkit-box-shadow: 0 0 0px 1000px #F8F8FA inset; /* Фон при автозаповненні */\r\n transition: background-color 5000s ease-in-out 0s;\r\n}\r\n\r\n/* Видалення синьої рамки в браузері Chrome */\r\ninput:focus,\r\ntextarea:focus {\r\n outline: none;\r\n}\r\n\r\n/* Стилі для кнопки */\r\n.cart-input__button {\r\n width: 100%;\r\n height: 56px;\r\n border: 2px solid;\r\n border-radius: 8px;\r\n background-color: transparent;\r\n font-size: 16px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n background-color: #292929;\r\n color: white;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n margin-top: 16px;\r\n\r\n &:hover {\r\n background-color: #F8F8FA;\r\n color: #292929;\r\n border-color: #F0F1F4;\r\n }\r\n\r\n &:active {\r\n background-color: #111111;\r\n color: white;\r\n }\r\n}\r\n\r\n/* Стилі для textarea */\r\ntextarea.cart-input__field--height {\r\n height: 148px;\r\n}\r\n\r\n/* Grid стилі для секції \"Contact us\" */\r\n.cart {\r\n &__container {\r\n @include pageGrid;\r\n }\r\n\r\n &__title {\r\n grid-column: 1 / -1;\r\n }\r\n\r\n &-input {\r\n padding-bottom: 48px;\r\n grid-column: span 2;\r\n\r\n @include onTablet {\r\n grid-column: span 6;\r\n }\r\n\r\n @include onDesktop {\r\n grid-column: span 5;\r\n }\r\n \r\n &__container {\r\n padding-bottom: 10px;\r\n }\r\n \r\n &__field {\r\n position: relative; \r\n border: none;\r\n background-color: #F8F8FA;\r\n width: 100%;\r\n height: 48px;\r\n border-radius: 8px;\r\n box-sizing: border-box;\r\n font-size: 14px;\r\n font-family: 'Space Mono', monospace;\r\n padding: 14px 16px; \r\n \r\n @include hover(border, 1px);\r\n @include hover(border-color, #D5D7DE); \r\n \r\n &--height {\r\n height: 148px;\r\n }\r\n \r\n &::placeholder {\r\n position: absolute;\r\n left: 16px;\r\n top: 14px;\r\n color: #7E7E83;\r\n }\r\n }\r\n \r\n &__button {\r\n width: 100%;\r\n height: 56px;\r\n border: 2px solid;\r\n border-radius: 8px;\r\n background-color: transparent;\r\n font-size: 16px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n background-color: #292929;\r\n color: white;\r\n transition: background-color 0.3s ease, color 0.3s ease; /* Плавні зміни для анімації */\r\n margin-top: 16px;\r\n \r\n @include hover(background-color, #F8F8FA);\r\n @include hover(color, #292929);\r\n @include hover(border-color, #F0F1F4);\r\n \r\n &:active {\r\n background-color: #111111;\r\n color: white;\r\n }\r\n }\r\n }\r\n \r\n &-contacts {\r\n grid-column: span 2;\r\n\r\n @include onTablet {\r\n grid-column: span 6;\r\n }\r\n\r\n @include onDesktop {\r\n grid-column: 7 / 13;\r\n }\r\n \r\n &__container {\r\n padding-bottom: 24px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n \r\n &__title {\r\n margin: 0;\r\n font-family: 'Space Grotesk';\r\n font-size: 14px;\r\n color: #9393A3;\r\n }\r\n \r\n &__content {\r\n margin: 0;\r\n font-family: 'Space Mono';\r\n font-size: 16px;\r\n color: #191919;\r\n text-decoration: none;\r\n\r\n @include hover(transform, scale(1.05));\r\n }\r\n }\r\n}\r\n",".category {\r\n grid-column: 1 / -1;\r\n \r\n &__photos {\r\n @include pageGrid;\r\n margin-bottom: 16px;\r\n \r\n @include onDesktop {\r\n grid-template-columns: repeat(12, 1fr); // На десктопі встановлюємо дві колонки\r\n }\r\n }\r\n\r\n &__link {\r\n position: relative;\r\n\r\n &--wide {\r\n @include onTablet {\r\n grid-column: span 4;\r\n }\r\n @include onDesktop {\r\n grid-column: span 8;\r\n }\r\n }\r\n\r\n &--square {\r\n height: 0;\r\n padding-bottom: 100%;\r\n\r\n @include onTablet {\r\n grid-column: span 2;\r\n }\r\n @include onDesktop {\r\n grid-column: span 4;\r\n }\r\n }\r\n }\r\n\r\n &__photo {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n @include hover(transform, scale(1.05));\r\n }\r\n\r\n &__title {\r\n margin: 0;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 140%;\r\n }\r\n}"],"names":[],"version":3,"file":"index.df2553e8.css.map"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000000..6e338eab45 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +bose
+1 234 5555-55-55

Bring joy back to the everyday

Recommended

Phone(1)

Phone (1)

Designed with instinct, to bring joy back to the everyday. Through the Glyph Interface, a perfected OS and exceptional dual camera. All startlingly fast.>This text is visible on mobile devices only.

Through the Glyph Interface, a perfected OS and exceptional dual camera. All startlingly fast.

$ 499.00

Ear (2)

Ear (2)

Perfecting the path from artist to ear. So that music sounds just as it was intended.

$ 149.00

Ear (stick)

Ear (stick)

Tech you can`t feel. Leaving just space for sound to come to life. Powered by custom sound technology.

$ 119.00

Browse Nothing products by category

All products All products

All products

Accessories Accessories

Accessories

Contact us

Phone

+1 234 5555-55-55

Email

hello@nothing.com

Address

400 first ave.
suite 700
Minneapolis, MN 55401
\ No newline at end of file diff --git a/logo.e3f0b3cf.png b/logo.e3f0b3cf.png new file mode 100644 index 0000000000..568b8caa10 Binary files /dev/null and b/logo.e3f0b3cf.png differ diff --git a/product-1.b4dcebe0.png b/product-1.b4dcebe0.png new file mode 100644 index 0000000000..1f84703b87 Binary files /dev/null and b/product-1.b4dcebe0.png differ diff --git a/product-2.63d7ce62.png b/product-2.63d7ce62.png new file mode 100644 index 0000000000..8124dd9739 Binary files /dev/null and b/product-2.63d7ce62.png differ diff --git a/product-3.e8cba25c.png b/product-3.e8cba25c.png new file mode 100644 index 0000000000..f4e8728329 Binary files /dev/null and b/product-3.e8cba25c.png differ