/* Start:/assets/libs/swiper/swiper-bundle.min.css?174763543418456*/ /** * Swiper 11.2.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 31, 2025 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /* End */ /* Start:/assets/css/style.css?1779275356112090*/ :root{ --color-primary: #151B21; --color-light: #ffffff; --color-additional :#353B42; --color-additional2: #676D75; --color-additional3: #969FAB; --color-accent: #242424; --color-accent-2: #EF736F; --color-accent-light: #626262; --color-modal-overflow: #00000061; --gap: 16px; --mainXPadding: 16px; --header-height: 80px; } @media ( max-width: 991.95px ){ :root{ --gap: 8px; --header-height: 70px; } } /* Inter */ @font-face { font-family: "Inter"; src: url("../../../../../../assets/fonts/inter/Inter_18pt-Light.ttf"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../../../../../../assets/fonts/inter/Inter_18pt-Regular.ttf"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../../../../../../assets/fonts/inter/Inter_18pt-Medium.ttf"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../../../../../../assets/fonts/inter/Inter_18pt-Bold.ttf"); font-weight: 700; font-style: normal; font-display: swap; } html{ scrollbar-gutter: stable; } body{ margin: 0; color: var(--color-primary); font-family: "Inter", sans-serif; font-weight: 400; } .noScroll{ overflow: hidden; } @media (min-width: 1025px){ ::-webkit-scrollbar { width: .3em; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); } ::-webkit-scrollbar-thumb { background-color: darkgrey; } } *{ box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; } input{ font-family: "Inter", sans-serif; } h1, h2, h3, h4, h5, h6{ font-family: "Inter", sans-serif; font-weight: 500; font-size: 20px; } img{ display: block; } /* CONTAINERS */ .container { width: 100%; max-width: calc( 1440px - var(--mainXPadding) / 2 ); margin-left: auto; margin-right: auto; padding-left: var(--mainXPadding); padding-right: var(--mainXPadding); } .pageContent{ padding-top: 44px; padding-bottom: 44px; } /* UI */ /* btns */ .btn, a.btn, button.btn{ --elSize: 60px; --elBG: var(--color-accent); --elBGHover: var(--color-accent-2); --elColor: white; height: var(--elSize); line-height: var(--elSize); background: var(--elBG); color: var(--elColor); padding: 0 12px; text-align: center; font-size: clamp(14px, 2vw, 16px); text-decoration: none; border: none; white-space: nowrap; cursor: pointer; transition: color .1s, background .1s, border .1s, opacity .1s; &:active{ opacity: .8; filter: contrast(1.5); } } .btn_long{ --elSize: 40px; padding: 0 32px; font-size: clamp(12px, 2vw, 14px); } .btn_small{ --elSize: 40px; font-size: clamp(12px, 2vw, 14px); } .btn_outline, a.btn_outline, button.btn_outline{ --elBG: transparent; --elColor: var(--color-primary); border: 1px solid currentColor; &:active{ --elColor: var(--color-accent); opacity: .5; } } @media ( hover: hover ) { .btn, a.btn, button.btn{ &:hover{ opacity: .8; } } .btn_outline, a.btn_outline, button.btn_outline{ &:hover{ opacity: .5; } } } /* icon btn */ .iconBtn{ --elSize: 24px; width: var(--elSize); height: var(--elSize); padding: 0; border: none; background-color: transparent; cursor: pointer; svg{ display: block; width: 100%; height: auto; } & svg path{ stroke: currentColor; transition: stroke .025s; } &:active svg path{ stroke: var(--color-accent-light); } } @media ( hover: hover ) { .iconBtn{ &:hover svg path{ stroke: var(--color-accent-light); } } } @media ( max-width: 991.95px ){ .iconBtn{ --elSize: 20px; } } /* arrow */ .arrow{ --elSize: 30px; width: var(--elSize); height: var(--elSize); background-position: center; background-repeat: no-repeat; background-size: 90%; background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25 15H22.5' stroke='%23353B42' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M15 6.25L23.75 15L15 23.75' stroke='%23353B42' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E%0A"); } /* section header */ .sectionHeader{ --elMargin: clamp(15px, 5vw, 30px); } .sectionHeader__title{ font-size: clamp(24px, 4vw, 48px); border-bottom: 1px solid var(--color-additional2); margin: 0 0 var(--elMargin); padding-bottom: 12px; } .sectionHeader__descWrapper{ font-size: clamp(14px, 2vw, 18px); border-bottom: 1px solid var(--color-additional2); margin: 0 0 var(--elMargin); padding-bottom: var(--elMargin); & p { margin: 0; } & p + p { margin-top: .8em; } } .sectionDesc__descContent{ max-width: 620px; } /* page title */ .pageTitle{ font-size: clamp(24px, 4vw, 36px); margin-top: 0; margin-bottom: 0; } /* section pt */ .sectionPTXL{ padding-top: clamp(44px, 4vw, 44px); } .sectionPTXXL{ padding-top: clamp(104px, 12vw, 160px); } .article{ font-size: 16px; & p{ margin: 0; } & p + p{ margin-top: 1em; } & h2, h3, h4, h5, h6{ margin: 1em 0 .5em 0; } & h2{ font-size: 24px; } & h3{ font-size: 20px; } & h4{ font-size: 18px; } & h5{ font-size: 16px; } & ul{ list-style: disc; list-style-position: inside; padding-left: .5em; } } /* select ui */ .selectUI{ position: relative; width: fit-content; } .selectUI__btn{ display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 6px 8px; border-radius: 5px; font-size: 16px; cursor: pointer; } .selectUI__icon{ --elSize: .8em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--elSize); height: var(--elSize); & svg{ display: block; width: 100%; height: auto; } } .selectUI__btn.opened{ color: var(--color-accent-light); & .selectUI__icon{ transform: rotate(180deg); } & .selectUI__icon svg path{ stroke: var(--color-accent-light); } } .selectUI__content{ display: none; position: absolute; top: 100%; left: 0; min-width: 100%; width: fit-content; background: #ffffff; max-height: 238px; overflow: auto; box-shadow: 0 8px 12px 0 rgba(0, 0, 0, .16); z-index: 999; &.show{ display: block; } &::-webkit-scrollbar { width: 3px; } &::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgb(224 58 58 / 0%); background-color: #d7d7d7; } &::-webkit-scrollbar-thumb { background-color: darkgrey; } } .selectUI__options{ list-style-type: none; margin: 0; padding: 0; } .selectUI__option{ border: 1px solid #EDF0F3; &:not(:last-child){ margin-bottom: -1px; } & label{ display: block; } & input[type=radio]{ display: none; } } .selectUI__optionVal{ display: flex; align-items: center; justify-content: space-between; column-gap: 5px; padding: 15px 10px; font-size: 14px; cursor: pointer; color: var(--color-primary); } input[type=radio]:checked + .selectUI__optionVal:after{ --elSize: 1em; content: ''; flex-shrink: 0; display: block; width: var(--elSize); height: var(--elSize); background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 3.5L5.25 10.5L1.75 6.84091' stroke='%23EF736F' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E%0A"); background-position: center; background-repeat: no-repeat; background-size: 100%; } @media ( hover: hover ) { .selectUI__optionVal:hover{ color: var(--color-additional3); } .selectUI__btn:not(.opened):hover{ color: var(--color-additional3); & svg path{ stroke: var(--color-additional3); } } } /* SEARCH MODAL */ .searchModal{ display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 999999; } .searchModal__search{ height: var(--header-height); border-bottom: 1px solid var(--color-additional3); } .searchModal__row{ display: flex; align-items: center; width: 100%; height: 100%; } .searchModal__form{ display: flex; align-items: center; column-gap: 10px; flex: 1; height: 100%; } .searchModal__icon{ flex-shrink: 0; } .searchModal__input{ width: 100%; border: none; background: transparent; font-size: 16px; color: var(--color-primary); &:focus{ outline: none; } &::placeholder{ color: var(--color-additional3); } &::-webkit-search-cancel-button{ display: none; } } .searchModal__result{ --elMarginVertical: 32px; margin-top: var(--elMarginVertical); height: calc( 100% - var(--header-height) - var(--elMarginVertical) ); overflow: auto; padding-bottom: var(--elMarginVertical); } .searchModal__resultCount{ color: var(--color-additional2); font-size: 14px; margin-bottom: 16px; } .searchModal__products{ display: grid; grid-template-columns: repeat(12, 1fr); list-style-type: none; margin: 0; padding: 0; & .productItem{ grid-column: span 3; } } @media ( max-width: 1024px ){ .searchModal__products{ & .productItem{ grid-column: span 4; } } } @media ( max-width: 768px ){ .searchModal__products{ & .productItem{ grid-column: span 6; } } } @media ( max-width: 600px ){ .searchModal__products{ & .productItem{ grid-column: span 12; } } } /* BANNER */ .banner{ position: relative; height: 500px; padding: 5px 0; overflow: hidden; } .banner__wrapper{ width: 100%; height: 100%; } .banner__bg{ width: 100%; height: 100%; & img{ display: block; width: 100%; height: 100%; object-fit: cover; } } .banner__content{ display: flex; justify-content: center; flex-direction: column; position: absolute; top: 0; left: -70px; width: 100%; max-width: 760px; height: 100%; padding: 0 10%; text-decoration: none; color: var(--color-primary); } .banner__subtitle{ display: flex; align-items: center; column-gap: .5em; text-transform: uppercase; font-size: 12px; &:before{ content: ''; display: block; flex-shrink: 0; width: 2em; height: 1px; background: currentColor; } } .banner__title{ font-size: clamp(30px, 5vw, 64px); } .banner__desc{ margin-top: 5px; font-size: clamp(14px, 5vw, 16px); } @media ( max-width: 1024px ) or ( orientation: portrait ){ .banner{ height: 500px; } } /* CATEGORY CARDS */ /* category card */ .categoryCard__wrapper{ display: block; height: 100%; position: relative; } .categoryCard__bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; & img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } } .categoryCard__content{ position: absolute; top: 0; left: 0; padding: clamp(16px, 5vw, 24px) 20px; width: 100%; color: var(--color-additional); } .categoryCard__title{ display: flex; flex-wrap: wrap; justify-content: space-around; gap: 5px 10px; font-size: clamp(20px, 2vw, 28px); line-height: 90%; font-weight: 400; & span { flex: 1; } } .categoryCard__icon{ flex-shrink: 0; transition: transform .3s; } .categoryCard__wrapper:active{ & .categoryCard__bg img{ transform: scale(1.1); } & .categoryCard__icon{ transform: rotate(45deg); } } @media ( hover: hover ) { .categoryCard__wrapper:hover{ & .categoryCard__bg img{ transform: scale(1.1); } & .categoryCard__icon{ transform: rotate(45deg); } } } /* list grid */ .categoryBanners__list{ display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--gap); list-style-type: none; margin: 0; padding: calc( var(--gap) / 2 ) 0; height: 500px; } .categoryBanners__item{ color: white; } .categoryBanners__item:first-child{ grid-column-start: span 4; grid-row: 1 / 3; } .categoryBanners__item:not(:first-child){ grid-row-start: span 1; } .categoryBanners__item:nth-child(2){ grid-column-start: span 5; } .categoryBanners__item:nth-child(3){ grid-column-start: span 3; } .categoryBanners__item:nth-child(4){ grid-column-start: span 5; } .categoryBanners__item:nth-child(5){ grid-column-start: span 3; } /* card in banners */ .categoryBanners__item .categoryCard{ height: 100%; } @media ( max-width: 1024px ){ .categoryBanners__list{ height: 350px; } } @media ( max-width: 991.95px ){ .categoryBanners{ overflow: auto; scrollbar-width: none; margin-right: calc( var(--mainXPadding) * -1 ); } .categoryBanners__list{ aspect-ratio: 3.5; padding-right: var(--mainXPadding); } } @media ( max-width: 768px ) { .categoryCardList__list{ height: 320px; } .categoryBanners__list{ aspect-ratio: 2.2; } } /* CATEGORY LIST */ .categoryList__list{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gap); list-style-type: none; margin: 0; padding: 0; } .categoryList__item{ display: flex; flex-direction: column; justify-content: flex-end; grid-column-start: span 3; height: auto; & img{ display: block; width: 100%; height: auto; } } .categoryList__cover img{ display: block; width: 100%; height: auto; border: 1px solid var(--color-additional); } .categoryList__title{ position: relative; font-size: clamp(14px, 2vw, 20px); font-weight: 500; &:after{ content: ''; display: block; min-width: 100%; height: 1px; background: var(--color-additional); margin-top: clamp(8px, 2vw, 16px); margin-bottom: clamp(8px, 2vw, 16px); } } @media ( min-width: 992px ){ .categoryList__item:nth-child(n + 3){ & .categoryList__title:after{ margin-left: calc( var(--gap) * -1 ); } } .categoryList__item:nth-child(4n + 5){ & .categoryList__title:after{ margin-left: 0; } } } @media ( max-width: 991.95px ){ .categoryList__item{ grid-column-start: span 6; } .categoryList__item:nth-child(2n+4){ & .categoryList__title:after{ margin-left: calc( var(--gap) * -1 ); } } } /* CATEGORY THUMP */ .categoryThumb img{ display: block; } /* ========== HOME PRODUCTION SECTION ========== */ .homeProduction__separator{ height: 1px; background: var(--color-additional); margin: 32px 0; } .homeProduction__hero{ display: grid; grid-template-columns: 49.4% 1fr; gap: 0; align-items: start; } .homeProduction__heroImg{ overflow: hidden; height: 386px; } .homeProduction__heroImg img{ display: block; width: 100%; height: 100%; object-fit: cover; } .homeProduction__heroText{ display: flex; flex-direction: column; justify-content: space-between; padding-left: 9.5%; min-height: 100%; } .homeProduction__heroText p{ font-size: 18px; line-height: 24px; color: var(--color-additional); margin: 0 0 32px; max-width: 435px; } .homeProduction__heroBtn{ align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; min-width: 221px; height: 60px; font-size: 16px; font-weight: 500; } .homeProduction__servicesIntro{ font-size: 18px; line-height: 24px; color: var(--color-additional); margin: 0 0 32px; max-width: 684px; } .homeProduction__servicesGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .homeProduction__serviceCard{ background: #f3f6fa; overflow: hidden; } .homeProduction__serviceImg{ overflow: hidden; height: 198px; margin: 24px 24px 0; } .homeProduction__serviceImg img{ display: block; width: 100%; height: 100%; object-fit: cover; } .homeProduction__serviceBody{ padding: 24px; display: flex; flex-direction: column; align-items: flex-start; } .homeProduction__serviceTitle{ font-size: 24px; font-weight: 600; line-height: 30px; color: var(--color-additional); margin: 0 0 16px; } .homeProduction__serviceDesc{ font-size: 16px; line-height: 22px; color: var(--color-additional); margin: 0 0 24px; } .homeProduction__serviceBtn{ display: inline-flex; align-items: center; justify-content: center; width: 131px; height: 40px; border: 1px solid var(--color-additional); font-size: 14px; font-weight: 500; color: var(--color-additional); text-decoration: none; transition: background .2s, color .2s; align-self: flex-end; } .homeProduction__serviceBtn:hover{ background: var(--color-additional); color: #fff; } @media(max-width: 991px){ .homeProduction__hero{ grid-template-columns: 1fr; } .homeProduction__heroImg{ height: 280px; } .homeProduction__heroText{ padding-left: 0; margin-top: 24px; } .homeProduction__servicesGrid{ grid-template-columns: 1fr; } .homeProduction__heroBtn{ align-self: flex-start; } } @media(max-width: 767px){ .homeProduction__serviceImg{ height: 160px; } .homeProduction__serviceTitle{ font-size: 20px; } } /* PRODUCT ITEM */ .productItem{ height: auto; border: 1px solid var(--color-additional3); margin: -1px -1px 0 0; } .productCard{ display: flex; flex-direction: column; height: 100%; padding: 24px 16px; text-decoration: none; color: var(--color-primary); } /* title */ .productCard__title{ font-size: 20px; line-height: 110%; font-weight: 500; margin-top: 12px; margin-bottom: 12px; } /* param */ .productCard__characteristics{ list-style-type: none; margin: 0 0 8px 0; padding: 0; } .productCard__characteristic{ display: flex; justify-content: space-between; font-size: 14px; padding: 10px; &:not(:last-child){ border-bottom: 1px solid var(--color-additional3); } } .productCard__characteristicName{ font-weight: 300; color: var(--color-additional); } .productCard__characteristicVal{ text-align: right; } /* img */ .productCard__img{ height: 235px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .productCard__img img{ display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* action */ .productCard__action{ margin-top: auto; } /* price */ .productCard__buy{ display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .productCard__price{ font-size: clamp(16px, 2vw, 18px); font-weight: 400; } .productCard__unit{ color: var(--color-additional3); font-size: clamp(14px, 2vw, 16px); } /* add to cart */ .productCard__addToCart{ margin-top: 16px; width: 100%; } /* short */ .productCard_short .productCard__title{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; padding-right: 12px; } /* PRODUCT SLIDER */ .productSlider{ padding: 2px; overflow: hidden; & ul.swiper-wrapper{ list-style-type: none; margin: 0; padding: 0; align-items: stretch; } & .swiper-slide{ height: auto; } } /* PRODUCT TILE */ .categoryTile__list{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); list-style-type: none; margin: 0; padding: 0; } .categoryTile__item{ grid-column: span 3; position: relative; & img{ display: block; width: 100%; height: auto; } } .categoryTile__content{ display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding-bottom: clamp(30px, 5vw, 90px); position: absolute; top: 0; left: 0; color: var(--color-primary); } .categoryTile__title{ font-size: clamp(18px, 3vw, 34px); padding-right: 20px; } .categoryTile__img { height: 300px; } .categoryTile__img img { height: 100%; object-fit: cover; } .categoryTile__desc{ font-size: clamp(14px, 2vw, 20px); padding-right: 20px; max-width: 100%; line-height: 110%; } @media ( max-width: 991.95px ){ .categoryTile__item{ grid-column: span 6; } .categoryTile__item:nth-child(3){ order: -1; } } /* CONSULTATION BLOCK */ .consultationBlock{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 64px var(--gap); padding: 10px 0 clamp(100px, 5vw, 116px); } .consultationBlock__desc{ grid-column: span 6; font-size: clamp(16px, 2vw, 20px); } .consultationBlock__action{ grid-column: 9 / 12; } @media ( max-width: 991.95px ){ .consultationBlock__desc{ grid-column: span 12; } .consultationBlock__action{ grid-column: span 12; } } /* MODAL */ .modal{ display: none; opacity: 0; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; background: var(--color-modal-overflow); overflow: auto; z-index: 999999; } .modal__close{ --elSize: 25px; width: var(--elSize); height: var(--elSize); margin-left: auto; cursor: pointer; background-position: center; background-repeat: no-repeat; background-size: 80%; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.5L4.5 19.5' stroke='%23353B42' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M4.5 4.5L19.5 19.5' stroke='%23353B42' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .modal__window{ display: flex; flex-direction: column; margin: auto; padding: 18px; background: white; opacity: 0; } .modal__content{ margin-top: 10px; padding: 20px 25px 40px; height: 100%; overflow: auto; } @media ( max-width: 991.95px ){ .modal__content{ padding: 0 0 30px; } .modal__close{ --elSize: 20px; } } /* MODAL FORM */ .modalForm{ max-width: 500px; } .modalForm__title{ font-size: clamp( 22px, 5vw, 28px ); line-height: 100%; } .modalForm__subtitle{ color: var(--color-additional3); font-size: clamp(14px, 2vw, 18px); margin-top: clamp(15px, 5vw, 20px); } .modalForm__desc{ margin-top: clamp(16px, 5vw, 32px); font-size: clamp(14px, 2vw, 18px); color: var(--color-additional); } .modalForm__form{ max-width: 520px; margin-top: clamp(15px, 5vw, 20px); } .form__submit button{ width: 100%; } .modalForm__message{ max-width: 500px; text-align: center; } .modalForm__messageTitle{ font-size: clamp(20px, 5vw, 26px); } .modalForm__messageDesc{ margin-top: clamp(20px, 2vw, 32px); } /* FORM */ .form__row { margin-bottom: clamp(12px, 2vw, 22px); } /* text input */ .textInput{ display: flex; flex-direction: column; justify-content: flex-end; position: relative; height: 52px; padding-bottom: 0; border-bottom: 1px solid var(--color-additional); & input{ height: 34px; border: none; background: transparent; color: var(--color-primary); font-size: clamp(16px, 2vw, 18px); } & input::placeholder{ color: var(--color-additional3); font-size: 0; } & input:active, & input:focus, & input:focus-visible{ outline: none; } & legend{ position: absolute; top: calc( 100% - 6px ); transform: translateY(-100%); color: var(--color-additional3); font-size: clamp(16px, 2vw, 18px); transition: all .1s ease-in-out; z-index: 0; pointer-events: none; } & .just-validate-error-label{ position: absolute; top: calc(100% + 1px); left: 0; font-size: 12px; } &:has(.just-validate-error-field){ border-color: var(--color-accent); } } .textInput input:focus-visible + legend, .textInput input:not(:placeholder-shown) + legend{ top: 0; transform: translateY(0); color: var(--color-additional2); font-size: clamp(12px, 2vw, 14px); } @media ( max-width: 768px ){ .just-validate-error-label{ display: none; } } /* checkbox */ .checkboxInput{ --elSize: 16px; --elUIColor: var(--color-additional); display: inline-block; position: relative; padding-left: calc( var(--elSize) + 10px ); &:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: var(--elSize); height: var(--elSize); border: 1px solid var(--elUIColor); } & input{ position: absolute; height: 0; width: 0; opacity: 0; z-index: -1; } } .checkboxInput input:checked + :after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: calc( var(--elSize) / 3.3 ); height: calc( var(--elSize) / 2 ); border-bottom: 2px solid var(--elUIColor); border-right: 2px solid var(--elUIColor); transform: rotate(45deg) translate(93%, -20%); } .checkboxInput + .just-validate-error-label{ margin-top: 5px; } .checkboxInput:has(.just-validate-error-field){ --elUIColor: var(--color-accent); } /* agree */ .form_agree{ font-size: clamp(12px, 2vw, 14px); a{ color: var(--color-accent); text-decoration: none; } } /* file */ .fileInput{ --elSize: 45px; display: flex; align-items: center; justify-content: center; column-gap: 12px; position: relative; padding: 0 16px; width: 100%; max-width: 200px; height: var(--elSize); line-height: var(--elSize); border: 1px solid currentColor; cursor: pointer; transition: .1s; & input{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; opacity: 0; z-index: -1; } &:active{ color: var(--color-accent-light); } } .fileInput__icon{ flex-shrink: 0; display: flex; align-items: center; & svg path{ stroke: currentColor; } } .fileInput__name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media ( hover: hover ){ .fileInput:hover{ color: var(--color-accent-light); } } /* HEADER */ .header{ position: sticky; top: 0; width: 100%; height: var(--header-height); background: white; border-bottom: 1px solid var(--color-additional3); z-index: 99999; } .header__row{ display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); height: 100%; } /* Protect header grid from Bootstrap .container clearfix pseudo-elements */ .header .header__row.container::before, .header .header__row.container::after{ display: none; } .header__nav{ grid-column-start: span 4; } .header__logo{ grid-column-start: span 3; display: flex; align-items: center; justify-content: center; } .header__actions{ display: flex; column-gap: 40px; grid-column-start: span 5; display: flex; justify-content: flex-end; align-items: center; & a{ color: var(--color-primary); text-decoration: none; } } .header__navbar{ display: flex; column-gap: 20px; align-items: center; justify-content: center; } .cartBtn{ display: block; position: relative; } .cartBtn__count{ --elSize: 20px; display: flex; align-items: center; justify-content: center; width: var(--elSize); height: var(--elSize); position: absolute; top: -8px; right: -8px; background: var(--color-accent); font-size: 8px; line-height: var(--elSize); color: white; border: 2px solid white; border-radius: 100%; } /* menu */ .headerNav { height: 100%; &>ul{ display: flex; list-style-type: none; margin: 0; padding: 0; } &>ul>li>a{ display: block; position: relative; color: var(--color-primary); text-decoration: none; height: var(--header-height); line-height: var(--header-height); padding: 0 16px; z-index: 1; &:after{ content: ''; display: block; width: 100%; height: 2px; margin-top: -2px; background: transparent; } } } /* Services mega-menu — compact variant */ .megaMenu--services{ height: auto; max-height: none; padding-top: 0; padding-bottom: 0; } .megaMenu--services .megaMenu__rootList{ max-width: 320px; } .megaMenu--services .megaMenu__rootItem{ display: block; } .header__navBtn{ display: none; } .header__tel { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-primary); transition: color 0.2s; } .header__tel:hover { color: var(--color-accent); } .header__tel:hover .header__telIcon svg path { stroke: var(--color-accent); } .header__telText { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; white-space: nowrap; } @media ( hover: hover ) { .headerNav>ul>li>a:hover{ color: var(--color-accent-light); } .headerNav>ul>li>a:hover:after{ background: var(--color-accent-light); } .headerNav [mega-menu-trigger]{ &.focused:after{ background: var(--color-accent-light); } } } @media (max-width: 1360px){ .header__telText{ display: none; } .header__formTrigger--outline{ display: none; } } @media (max-width: 1200px){ .headerNav{ &>ul>li>a{ padding: 0 8px; } } } @media (max-width: 1024px){ .header__formTrigger{ display: none; } .header__logo{ grid-column-start: span 6; } .header__actions{ grid-column-start: span 6; } } /* @media ( max-width: 480px ){ .header__logo{ & img{ max-width: 110px; } } } */ /* mobile menu */ @media (max-width: 1024px){ .headerNav{ &>ul>li>a{ padding: 0 16px; } } /* btn */ .header__navBtn{ display: block; } .navBtn{ --elSize: 20px; display: flex; align-items: center; justify-content: center; width: var(--elSize); height: var(--elSize); & svg{ display: block; width: 100%; } &:active svg path{ stroke: var(--color-accent-light); } } .navBtn__open, .navBtn__close{ display: flex; align-items: center; justify-content: center; } .navBtn__close{ display: none; } .navBtn.navBtn_opened{ & .navBtn__open{ display: none; } & .navBtn__close{ display: block; } } /* menu */ .header__nav{ position: absolute; top: 0; left: 0; width: 100%; } .headerNav{ display: none; opacity: 0; position: absolute; top: var(--header-height); left: 0; width: 100%; height: calc( 100vh - var(--header-height) ); background: white; overflow: hidden; z-index: 9999; } .headerNav>ul{ flex-direction: column; } .headerNav>ul>li>a{ border-bottom: 1px solid var(--color-additional3); } } /* MEGA MENU */ .megaMenu{ display: none; position: absolute; top: calc( 100% + 1px ); left: 0; width: 100%; height: calc( 75vh - var(--header-height) ); max-height: 550px; padding-top: 30px; padding-bottom: 30px; background: white; overflow: auto; z-index: 999; &.showed{ display: block; } } .megaMenuEl__overview{ display: none; opacity: 0; position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc( 100vh - var(--header-height) ); background: #00000027; } .megaMenu__link{ display: block; font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-primary); width: 100%; text-decoration: none; color: var(--color-primary); } /* root */ .megaMenu__rootList{ position: relative; display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0; } .megaMenu__rootItem{ width: 100%; } @media ( min-width: 1025px ){ .megaMenu__rootItem{ display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); } } .megaMenu__rootItem:has(.megaMenu__submenuList) .megaMenu__rootTitle{ display: flex; justify-content: space-between; align-items: center; &:after{ --elSize: 20px; content: ''; display: block; flex-shrink: 0; width: var(--elSize); height: var(--elSize); background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 15.75L12.375 9L5.625 2.25' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E%0A"); background-position: center; background-repeat: no-repeat; background-size: 80%; } } .megaMenu__rootTitle{ grid-column-start: span 3; } /* submenu */ .megaMenu__submenu{ display: none; grid-column-start: span 9; } @media ( min-width: 1025px ){ .megaMenu__submenuContent{ position: absolute; top: 0; display: grid; grid-template-columns: repeat(9, 1fr); column-gap: var(--gap); } } .megaMenu__submenuList{ grid-column: 1 / 5; display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0 0 0 var(--gap); } .megaMenu__submenuImg{ grid-column: 6 / 9; & img{ display: block; width: 100%; height: auto; } } /* submenu show */ @media ( min-width: 1025px ){ .megaMenu__rootItem.blur .megaMenu__rootTitle{ opacity: .5; } } .megaMenu__rootItem.showed .megaMenu__submenu{ display: block; } @media (max-width: 1024px){ .megaMenu{ display: none; top: 0; left: 100vw; height: calc( 100vh - var(--header-height) ); max-height: 100%; } .megaMenuEl__header{ margin-bottom: 20px; } .megaMenu__submenu{ display: none; height: 0; overflow: hidden; } .megaMenu__submenuImg{ display: none; } .megaMenu__submenuContent{ display: block; position: relative; } .megaMenuEl__title{ font-size: 24px; font-weight: 500; margin-top: 15px; } .megaMenuEl__close{ --elSize: 18px; width: var(--elSize); height: var(--elSize); } /* root menu */ .megaMenu__rootItem:has(.megaMenu__submenuList) .megaMenu__rootTitle{ &:after{ background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 2.25V15.75' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square'/%3E%3Cpath d='M2.25 9H15.75' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E%0A"); } } .megaMenu__rootItem.showed .megaMenu__rootTitle{ &:after{ background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 9H15.75' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } } /* submenu */ .megaMenu__submenuList{ padding: 0 0 0 15px; & .megaMenu__link{ color: #535A61; } } } /* BREADCRUMBS */ .breadCrumbs{ margin-bottom: 24px; } .breadCrumbs__list{ display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; font-size: 14px; } .breadCrumbs__item{ --elGap: 6px; display: flex; align-items: center; column-gap: var(--elGap); &:not(:last-child):after{ content: '—'; margin-right: var(--elGap); color: var(--color-additional2); } } .breadCrumbs__item{ & a{ text-decoration: none; color: var(--color-additional); font-weight: 500; } & a:hover{ color: var(--color-accent-light); } & span{ color: var(--color-additional2); } } /* PRODUCT */ /* grid */ .productPage__grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px var(--gap); } .productPage__mediaContent{ grid-column-start: span 6; } .productPage__infoContent{ display: flex; flex-direction: column; grid-column-start: span 6; padding: 0 16px; } .productPage__descriptionBlock{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px var(--gap); margin-top: clamp(30px, 5vw, 60px); } .productPage__description{ grid-column-start: span 6; } .productPage__details{ grid-column-start: span 6; padding-left: 16px; } /* galleries */ .productPage__galleries{ position: sticky; top: calc( var(--header-height) + 40px ); } /* product main gallery */ .productPageGallery{ position: relative; } .productPageGallery__slider{ border: 1px solid #969FAB; overflow: hidden; & ul{ list-style-type: none; margin: 0; padding: 0; } & img{ display: block; width: 100%; height: auto; } } .productPageGallery__navigation{ display: flex; align-items: center; justify-content: center; column-gap: 12px; margin-top: 24px; } .productPageGallery__pagination{ width: 40px; text-align: center; font-size: 16px; line-height: 100%; font-weight: 500; } .productPageGallery__prev, .productPageGallery__next{ --elSize: 20px; display: flex; align-items: center; justify-content: center; width: var(--elSize); height: var(--elSize); cursor: pointer; & svg{ display: block; width: 100%; } &:active svg path{ stroke: var(--color-accent-light); } } @media ( hover: hover ) { .productPageGallery__prev, .productPageGallery__next{ &:hover svg path{ stroke: var(--color-accent-light); } } } /* additional gallery */ .productPage__additionalGallery{ margin-top: 30px; } .productPageAdditionalGallery{ overflow: hidden; & ul{ list-style-type: none; margin: 0; padding: 0; } & img{ width: 100%; height: auto; } } .productPageAdditionalGallery .swiper-slide{ border: 1px solid var(--color-additional3); } .productPageAdditionalGallery .swiper-slide-thumb-active{ border-color: var(--color-additional); } /* characteristics */ .productPage__characteristics{ display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0; } .productPage__characteristic{ --el-marginX: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; padding: 10px var(--el-marginX); margin-left: calc( var(--el-marginX) * -1 ); margin-right: calc( var(--el-marginX) * -1 ); font-size: 14px; color: var(--color-additional); &:not(:last-child){ border-bottom: 1px solid var(--color-additional3); } } .productPage__characteristicName{ font-weight: 500; } .productPage__characteristicVal{ font-weight: 300; } /* desc */ .productPage__descriptionTitle{ font-size: 18px; font-weight: 500; margin: 0 0 8px 0; } .productPage__descriptionText{ font-size: 16px; & p{ margin: 0; } & p + p{ margin-top: 1em; } & h2, h3, h4, h5, h6{ margin: 1em 0 .5em 0; } & h2{ font-size: 18px; } & h3{ font-size: 18px; } & h4{ font-size: 16px; } & h5{ font-size: 16px; } & ul{ list-style: disc; list-style-position: inside; padding-left: .5em; } } /* title */ .productPage__title{ margin: 0; font-size: clamp(24px, 2vw, 36px); line-height: 120%; font-weight: 500; } .productPage__mobileTitle{ display: none; } /* form */ .productPage__form{ height: 100%; } /* parameters */ .productPage__parameter{ margin-top: clamp(36px, 2vw, 40px); } .productPage__parameterTitle{ font-size: 18px; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--color-additional); } /* material */ .productPageMaterial__label{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 5px 10px; margin-bottom: 16px; font-size: 14px; color: var(--color-additional2); font-weight: 500; } .productPageMaterial__price{ --elHeight: 32px; width: fit-content; padding: 0 12px; height: var(--elHeight); line-height: var(--elHeight); font-size: 14px; color: white; background: var(--color-additional); } @media ( min-width: 991.95px ){ .productPageMaterial__price{ position: absolute; bottom: 18px; right: 16px; } } .productPageMaterial__name{ font-size: clamp(18px, 5vw, 20px); font-weight: 500; } .productPageMaterial__desc{ margin-top: 4px; font-size: 14px; color: var(--color-additional); } .productPageMaterial__advantages{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px 30px; max-width: calc( 100% - 100px); list-style-type: none; margin: 26px 0 0 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--color-additional); } /* material select */ .productPageMaterial__select{ margin-top: 24px; } .productPageMaterial__trigger{ position: relative; display: flex; align-items: center; justify-content: space-between; column-gap: 10px; padding: 12px 18px; font-size: 18px; border: 1px solid var(--color-additional); cursor: pointer; } .productPageMaterial__trigger_opened{ & .productPageMaterial__triggerIcon{ transform: rotate(180deg); } } @media ( hover: hover ) { .productPageMaterial__trigger:hover{ color: var(--color-accent-light); border-color: var(--color-accent-light); & svg path{ stroke: var(--color-accent-light); } } } .productPageMaterial__options{ display: none; list-style-type: none; margin: 0; padding: 0; height: 0; overflow: hidden; max-height: 310px; overflow-y: auto; border: 1px solid var(--color-additional); border-top: none; scrollbar-width: none; position: relative; } .productPageMaterial__option{ position: relative; &:not(:first-child){ border-top: 1px solid var(--color-additional); } } .productPageMaterial__choose{ display: block; position: relative; padding: 16px 18px; transition: opacity .2s; cursor: pointer; & input{ position: absolute; width: 0; height: 0; opacity: 0; z-index: -1; } &:active{ opacity: .8; box-shadow: inset 0px 0px 0px 1px var(--color-additional); } } @media ( hover: hover ){ .productPageMaterial__choose:hover{ opacity: .8; box-shadow: inset 0px 0px 0px 1px var(--color-additional); } } /* color */ .productPageColors{ display: flex; flex-wrap: wrap; gap: 8px; list-style-type: none; margin: 0; padding: 0; } .btnChooseColor{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; & input{ position: absolute; width: 0; height: 0; opacity: 0; z-index: -1; } } .btnChooseColor__img{ --elSize: 46px; display: block; width: var(--elSize); height: var(--elSize); border-radius: 100%; padding: 5px; overflow: hidden; border: 1px solid transparent; & img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 100%; } } .btnChooseColor__val{ margin-top: 2px; font-size: 9px; color: var(--color-additional); } .btnChooseColor:has(input:checked){ pointer-events: none; & .btnChooseColor__img{ background: #F4F6F8; border-color: var(--color-additional); } } @media ( hover : hover ){ .btnChooseColor__img:hover{ background: #F4F6F8; border-color: var(--color-accent-light); } } /* params */ .productPageParams{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; list-style-type: none; margin: 0; padding: 0; } .btnChooseParam{ --elHeight: 40px; display: block; position: relative; width: fit-content; padding: 0 12px; height: var(--elHeight); line-height: var(--elHeight); background: transparent; color: var(--color-additional); border: 1px solid; border-color: #969FAB; cursor: pointer; input{ position: absolute; width: 0; height: 0; opacity: 0; z-index: -1; } &:active{ color: var(--color-accent-light); border-color: var(--color-accent-light); } } .btnChooseParam:has(input:checked){ background: var(--color-accent-2); color: white; border-color: transparent; pointer-events: none; } @media ( hover : hover ) { .btnChooseParam:hover{ color: var(--color-accent-light); border-color: var(--color-accent-light); } } /* order */ .productPage__order{ margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--color-additional); } /* price */ .productPage__cost{ display: flex; flex-wrap: wrap; align-items: center; gap: 24px 76px; } .productPage__priceWrapper{ .productPage__quickOrder{ display: none; } } .productPage__price{ font-size: 24px; font-weight: 500; } .productPrice__unit{ font-size: 16px; color: var(--color-additional3); } .productPage__qntyWrapper{ display: flex; align-items: center; column-gap: var(--gap); } .productPage__total{ font-size: 20px; } /* add to cart */ .productPage__makeOrder{ display: flex; flex-wrap: wrap; gap: 5px var(--gap); margin-top: clamp(24px, 5vw, 48px); } .productPage__addToCart{ flex: 1; } .productPage__makeOrder .productPage__quickOrder{ flex: 1; } /* PLUS / MINUS QNTY */ .productQnty{ display: flex; width: fit-content; height: 35px; border: 1px solid var(--color-additional); } .productQnty__amount{ width: 40px; text-align: center; font-size: 16px; border: none; padding: 0 2px; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; } } .productQnty__control{ display: flex; align-items: center; justify-content: center; width: 30px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; & svg{ display: block; width: 14px; height: auto; } &:active{ svg path{ stroke: var(--color-accent-light); } } } @media ( hover: hover ){ .productQnty__control:hover{ svg path{ stroke: var(--color-accent-light); } } } @media ( max-width: 768px ){ .productPage__mediaContent, .productPage__infoContent{ grid-column: span 12; } .productPage__description{ grid-column-start: span 12; order: 2; } .productPage__details{ grid-column-start: span 12; order: 1; padding-left: 0; } .productPage__infoContent{ padding: 0; } .productPage__cost{ flex-direction: column; align-items: flex-start; } .productPage__quickOrder{ display: none; } .productPage__priceWrapper{ display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-end; justify-content: space-between; width: 100%; .productPage__quickOrder{ display: block; width: fit-content; } } .jjjggjg{ margin-top: 40px; } .banner__content{ display: flex; justify-content: center; flex-direction: column; position: absolute; top: 160px; left: -30px; width: 100%; max-width: 700px; height: 100%; padding: 0 10%; text-decoration: none; color: var(--color-primary); } } /* ACCORDION */ .accordion__list{ display: flex; flex-direction: column; row-gap: 12px; list-style-type: none; margin: 0; padding: 0; } .accordion__title{ display: flex; align-items: center; justify-content: space-between; column-gap: 10px; padding: 12px 18px; font-size: 18px; user-select: none; border: 1px solid var(--color-additional); cursor: pointer; } .accordion__icon{ --elSize: 20px; flex-shrink: 0; width: var(--elSize); height: var(--elSize); & svg{ display: block; width: 100%; } } .accordion__iconClose{ display: none; } .accordion__content{ height: 0; padding: 5px 20px; box-sizing: content-box; overflow: hidden; transition: .2s; } @media ( hover: hover ) { .accordion__item:not(.accordion__item_showed) .accordion__title:hover{ color: var(--color-accent-light); border-color: var(--color-accent-light); & .accordion__icon svg path{ stroke: var(--color-accent-light); } } } .accordion__title:active{ color: var(--color-accent-light); border-color: var(--color-accent-light); & .accordion__icon svg path{ stroke: var(--color-accent-light); } } .accordion__item_showed{ border: 1px solid var(--color-additional); & .accordion__title{ border: none; border-bottom: 1px solid var(--color-additional); } & .accordion__content{ padding: 5px 20px; } & .accordion__iconOpen{ display: none; } & .accordion__iconClose{ display: block; } } /* MORE PRODUCTS */ .moreProducts{ margin-top: clamp(64px, 12vw, 104px); } .moreProductsTitle{ margin-bottom: clamp(32px, 5vw, 40px); font-size: clamp(24px, 5vw, 36px); font-weight: 400; } /* CATALOG */ /* tags */ .catalog__tags{ overflow: hidden; } .catalog__tags{ margin-top: 32px; } .catalogTags{ --elLinkSize: 40px; } .catalogTags__slider{ width: 100%; overflow: visible; clip-path: inset(-100vw -100vw -100vw 0); & ul{ list-style-type: none; margin: 0; padding: 0; } & li.swiper-slide{ width: auto; } & li.swiper-slide:not(:last-child){ margin-right: 16px; } } .catalogTags__list{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); list-style-type: none; margin: 0; padding: 0; } .catalogTags__link{ display: block; padding: 0 12px; width: fit-content; height: var(--elLinkSize); line-height: var(--elLinkSize); font-size: 14px; color: var(--color-additional); border: 1px solid var(--color-additional3); text-decoration: none; &:active{ color: var(--color-primary); border-color: var(--color-additional); } } .catalogTags__link_active{ background: var(--color-accent-2); border-color: var(--color-accent-2); color: white; pointer-events: none; } @media ( hover: hover ) { .catalogTags__link:hover{ color: var(--color-primary); border-color: var(--color-additional); } } .catalogTags__btnMore{ width: fit-content; height: var(--elLinkSize); line-height: var(--elLinkSize); color: var(--color-accent); text-decoration: none; font-size: 14px; cursor: pointer; &:active{ color: var(--color-accent-light); } } @media ( hover: hover ) { .catalogTags__btnMore:hover{ color: var(--color-accent-light); } } /* modal tags */ .catalogTags__moreContent{ max-width: 1320px; } @media ( max-width: 991.95px ){ .catalogTags__moreContent{ padding-right: 10px; } .catalogTags__slider{ & li.swiper-slide:not(:last-child){ margin-right: 8px; } } .catalogTags__list{ gap: 4px; } .catalogTags__link, .catalogTags__btnMore{ font-size: 12px; } } @media ( max-width: 400px ){ .catalogTags__link{ max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* active filters */ .catalog__reviewFilters{ margin-top: clamp(12px, 5vw, 24px); overflow: hidden; } .catalog__reviewFiltersWrapper{ display: flex; align-items: center; gap: 5px clamp(12px, 5vw, 16px); } .resetFilter{ --elSize: 40px; display: block; width: fit-content; height: var(--elSize); line-height: var(--elSize); padding: 0 12px; background: #EDF0F3; color: var(--color-primary); font-size: clamp(12px, 5vw, 14px); white-space: nowrap; text-decoration: none; cursor: pointer; &:active{ background: #dfdfdf; } } @media ( hover : hover ){ .resetFilter:hover{ background: #dfdfdf; } } .activeFilters{ width: 100%; overflow: visible; clip-path: inset(-100vw -100vw -100vw 0); & ul{ list-style-type: none; margin: 0; padding: 0; } & li.swiper-slide{ width: auto; } & li.swiper-slide:not(:last-child){ margin-right: 8px; } } .activeFilter{ --elSize: 40px; --elPaddingX: 12px; display: flex; align-items: center; justify-content: space-between; width: fit-content; height: var(--elSize); line-height: var(--elSize); padding-left: var(--elPaddingX); color: var(--color-primary); font-size: clamp(12px, 5vw, 14px); text-decoration: none; border: 1px solid var(--color-additional3); border-radius: 100px; white-space: nowrap; cursor: default; } .activeFilter__remove{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 100%; padding-right: var(--elPaddingX); padding-left: 8px; cursor: pointer; & svg{ display: block; width: 100%; } } @media ( hover : hover ){ .activeFilter__remove:hover{ & svg path{ stroke: var(--color-primary); } } } /* nav */ .catalogProducts__nav{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .catalogProducts__amount{ font-size: clamp(14px, 5vw, 16px); color: var(--color-additional2); } .catalogProducts__filterBtn{ display: none; } .catalogProducts__sort .selectUI__btn{ font-size: clamp(14px, 5vw, 16px); } /* products */ .catalog__grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: clamp(16px, 5vw, 32px); } .catalog__filtersCol{ grid-column-start: span 3; } .catalog__productsCol{ grid-column-start: span 9; border-top: 1px solid var(--color-additional3); } .catalogProducts__list{ display: grid; grid-template-columns: repeat(9, 1fr); list-style-type: none; margin: clamp(16px, 5vw, 32px) 0 0 0; padding: 0; & .productItem{ grid-column-start: span 3; } } /* filters */ .filters{ display: flex; flex-direction: column; } .filters__header{ display: none; } @media ( max-width: 1024px ){ /* filters */ .catalog__filtersCol{ display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-modal-overflow); z-index: 99999; } .filters{ width: 100%; height: 100%; transform: translateX(-100%); padding: 16px 18px 0; background: white; overflow: hidden; } .filters__header{ display: block; padding-bottom: 20px; } .filters__close{ --elSize: 24px; width: var(--elSize); height: var(--elSize); margin-left: auto; &:active svg path{ stroke: var(--color-accent-light); } } .filters__title{ font-size: 24px; font-weight: 500; color: var(--color-primary); } .filters__content{ overflow: auto; padding-bottom: 20px; } /* products */ .catalog__productsCol{ border: none; } .catalogProducts__nav{ margin-top: 0; row-gap: 24px; } .catalogProducts__amount{ order: 3; width: 100%; padding-top: 12px; border-top: 1px solid var(--color-additional3); } .catalogProducts__filterBtn{ display: block; } .filterBtn{ --elSize: 45px; display: flex; align-items: center; column-gap: 12px; width: fit-content; height: var(--elSize); line-height: var(--elSize); color: var(--color-additional); cursor: pointer; border: 1px solid currentColor; padding: 0 20px; & svg{ display: block; width: 20px; } & svg path{ stroke: currentColor; } &:active{ color: var(--color-accent-light); } } .catalog__productsCol{ grid-column-start: span 12; } .catalogProducts__list{ grid-template-columns: repeat(12, 1fr); & .productItem{ grid-column-start: span 4; } } } @media ( max-width: 768px ){ .catalogProducts__list{ grid-template-columns: repeat(12, 1fr); & .productItem{ grid-column-start: span 6; } } } @media ( max-width: 600px ){ .catalogProducts__list{ grid-template-columns: repeat(12, 1fr); & .productItem{ grid-column-start: span 12; } } } /* CART */ /* grid */ .cartPage__grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .cartPage__productsBlock{ grid-column-start: span 9; } .cartPage__totalBlock{ grid-column-start: span 3; } /* products */ .cartPage__products{ margin-top: 24px; } .cartProducts__list{ display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0; } /* products grid */ .cartProducts__item{ display: grid; grid-template-columns: repeat(9, 1fr); column-gap: var(--gap); align-items: center; position: relative; padding: 16px; &:not(:last-child){ border-bottom: 1px solid var(--color-additional3); } } .cartProducts__img{ grid-column-start: span 1; } .cartProducts__title{ grid-column-start: span 3; } .cartProducts__price{ grid-column-start: span 2; } .cartProducts__qnty{ grid-column-start: span 1; } .cartProducts__priceTotal{ grid-column-start: span 1; } /* info */ .cartProducts__img{ display: block; width: 100%; max-width: 100px; img{ display: block; width: 100%; } } .cartProducts__title{ font-size: clamp(16px, 5vw, 14px); line-height: 110%; font-weight: 500; text-decoration: none; color: var(--color-primary); } /* price */ .cartProducts__price{ font-size: clamp(16px, 5vw, 18px); justify-self: end; } .cartProducts__priceUnit{ color: var(--color-additional3); } /* qnty */ .cartProducts__qnty{ display: flex; align-items: center; justify-content: center; } /* price total */ .cartProducts__priceTotal{ justify-self: end; } /* remove */ .cartProducts__removeBtn{ --elSize: 16px; position: absolute; top: 50%; right: var(--gap); transform: translateY(-50%); width: var(--elSize); height: var(--elSize); justify-self: end; cursor: pointer; &:active svg path{ stroke: var(--color-accent-light); } } @media ( hover : hover ) { .cartProducts__removeBtn:hover{ & svg path{ stroke: var(--color-accent-light); } } } /* total */ .cartTotal{ position: sticky; top: calc( 40px + var(--header-height) ); border-left: 1px solid var(--color-additional3); width: 100%; max-width: 500px; padding: 0 15px; } .cartTotal__title{ font-size: clamp(18px, 5vw, 24px); font-weight: 500; margin-bottom: 44px; } .cartTotal__products{ display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: space-between; padding-bottom: 15px; font-size: 18px; font-weight: 500; color: var(--color-additional); } .cartTotal__cost{ padding-top: 15px; border-top: 1px solid var(--color-additional3); font-size: 18px; font-weight: 500; color: var(--color-primary); } .cartTotal__actions{ margin-top: clamp(12px, 5vw, 24px); } /* empty */ .cartPage__empty{ margin: 32px 0; padding: 32px 16px; background: var(--color-accent-2); color: white; } @media( max-width: 1200px ){ .cartPage__productsBlock{ grid-column-start: span 12; } .cartPage__totalBlock{ grid-column-start: span 12; justify-items: end; } } @media( max-width: 991px ){ .cartPage__productsBlock{ grid-column-start: span 12; } .cartPage__totalBlock{ grid-column-start: span 12; justify-items: end; } .cartProducts__item{ align-items: start; grid-template-rows: repeat(3, 1fr); } .cartProducts__img{ grid-column-start: span 2; } .cartProducts__title{ grid-column-start: span 6; font-weight: 400; font-size: 14px; } .cartProducts__price{ justify-self: start; grid-column: 3 / 8; } .cartProducts__qnty{ grid-column-start: span 5; align-self: end; justify-content: start; margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--color-additional3); width: 100%; height: 100%; } .cartProducts__price{ margin-top: 16px; margin-bottom: 16px; } .cartProducts__priceTotal{ display: flex; justify-content: flex-end; align-items: flex-end; grid-column-start: span 4; align-self: end; margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--color-additional3); width: calc( 100% + var(--gap) ); height: 100%; margin-left: calc( var(--gap) * -1 ); padding-left: var(--gap); } .cartProducts__removeBtn{ top: 16px; } .cartTotal{ position: fixed; top: unset; bottom: 0; left: 0; width: 100%; max-width: 100%; padding: 25px var(--mainXPadding); border: none; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1); background: #fff; z-index: 9999; } .cartTotal__title{ display: none; } } /* CONTACT */ .pageContact__content{ margin-top: clamp(32px, 5vw, 40px); } /* grid */ .contactGrid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 80px var(--gap); } .contactGrid__contacts{ grid-column-start: span 3; } .contactGrid__address{ grid-column: 5 / -1; } .contactAddress__item{ grid-column-start: span 4; } .contactAddress__item{ display: flex; flex-direction: column; height: 100%; } /* contact block */ .contactsBlock{ display: flex; flex-direction: column; row-gap: clamp(32px, 5vw, 45px); padding: clamp(0px, 4vw, 24px) clamp(0px, 4vw, 16px) 0; height: 100%; } .contactsBlock__contacts{ display: flex; flex-direction: column; row-gap: 16px; color: var(--color-primary); font-size: 20px; a{ text-decoration: none; color: var(--color-primary); } } .contactsBlock__timeWork{ font-size: 16px; font-weight: 300; color: var(--color-additional); & span{ font-size: 18px; font-weight: 400; color: var(--color-primary); } } .contactsBlock__action{ margin-top: auto; display: flex; flex-direction: column; row-gap: 48px; } .contactsBlock__desc{ color: var(--color-additional); } /* address */ .contactAddress{ display: grid; gap: 66px var(--gap); height: 100%; list-style-type: none; margin: 0; padding: 0; } .contactAddress__title{ font-size: 18px; font-weight: 300; color: var(--color-additional); margin-bottom: 16px; } .contactAddress__address{ font-size: 20px; line-height: 110%; margin-bottom: clamp(30px, 5vw, 56px); } .contactAddress__map{ margin-top: auto; & iframe{ display: block; width: 100%; height: 100%; aspect-ratio: 3.2 / 2; } } .contactAddress__mapContainer{ background: #f3f3f3; } .contactAddress__mapContainer [class*="ymaps-"]{ border-radius: 12px; } @media ( max-width: 1024px ){ .contactGrid__contacts{ grid-column-start: span 6; } .contactGrid__address{ grid-column: 1 / -1; } .contactsBlock{ padding: 0; } } @media ( max-width: 991.95px ){ .contactGrid__contacts{ grid-column-start: span 12; } .contactAddress{ grid-template-columns: repeat(12, 1fr); } .contactAddress__item{ grid-column-start: span 12; } } /* FILTERS */ .filters .bx-filter .bx-filter-section{ padding: 16px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; } .filters .bx-filter .bx-filter-parameters-box{ margin-bottom: clamp(40px, 5vw, 30px); } .filters .row.bx-filter-parameters-box-container{ display: flex; flex-wrap: wrap; & .col-xs-12{ width: 100%; } & .col-xs-6{ width: 50%; } } /* filter title */ .filters .bx-filter .bx-filter-title{ display: none; } .filters .bx-filter .bx-filter-parameters-box-title{ display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px 0; font-size: 14px; font-weight: 600; border-bottom: 1px solid #E5E7EB; cursor: pointer; } .filters .bx-filter-parameters-box .bx-filter-parameters-box-title:after{ --elSize: 18px; content: ''; display: block; width: var(--elSize); height: var(--elSize); background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 2.25V15.75' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square'/%3E%3Cpath d='M2.25 9H15.75' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E%0A"); background-position: center; background-repeat: no-repeat; background-size: 80%; } .filters .bx-filter-parameters-box.bx-active .bx-filter-parameters-box-title:after{ background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 9H15.75' stroke='%23353B42' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .filters .bx-filter .bx-filter-parameters-box-title span{ color: var(--color-primary); &:hover{ color: var(--color-primary); } } /* filter block */ .filters .bx-filter-block{ margin-top: 10px; padding-left: 12px; } /* checkbox */ .filters .bx-filter-parameters-box-container{ padding: 0; } .filters .bx-filter-parameters-box-container .checkbox{ &:not(:last-child){ border-bottom: 1px solid var(--color-additional3); } } .filters .bx-filter-input-checkbox{ display: flex; column-gap: 5px; padding: 10px 0; & input[type=checkbox]{ appearance: none; position: relative; border: 1px solid var(--color-additional); width: 18px; height: 18px; cursor: pointer; } & input[type=checkbox]:checked{ background: var(--color-accent); border-color: var(--color-accent); } & input[type=checkbox]:checked:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: calc(14px / 3.3); height: calc(14px / 2); border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translate(93%, -20%); } } /* color */ .filters .bx-filter-param-btn.bx-color-sl{ display: flex; align-items: center; justify-content: center; border-radius: 100%; border: 2px solid; border-color: transparent; width: 28px; height: 28px; padding: 2px; transition: box-shadow .2s, border-color .2s; &:hover{ border-color: var(--color-additional3); } } .filters .bx-filter-btn-color-icon{ border-radius: 100%; width: 20px; height: 20px; aspect-ratio: 1; flex-shrink: 0; } .filters .bx-filter .bx-filter-param-label.bx-active .bx-filter-param-btn.bx-color-sl{ border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(250,81,73,.3); } .filters .bx-filter-param-btn-inline:has(.bx-color-sl){ position: relative; & input[type=checkbox]{ display: block !important; position: absolute; transform: scale(0); } } /* price */ .filters .bx-filter .bx-ui-slider-track-container{ width: 100%; padding: 25px 0; } .filters .bx-filter .bx-ui-slider-track{ height: 3px; } .filters .bx-filter .bx-ui-slider-pricebar-vn{ background: var(--color-additional3); } .filters .bx-filter .bx-ui-slider-pricebar-v{ background: var(--color-accent); } .filters .bx-ui-slider-part{ display: none; } .filters .bx-ui-slider-range{ z-index: 80; } .filters .bx-filter .bx-ui-slider-handle.left, .filters .bx-filter .bx-ui-slider-handle.right{ background: #fff; width: 14px; height: 14px; border: 2px solid var(--color-accent); border-radius: 50%; top: 50%; transform: translateY(-50%); &:hover{ box-shadow: 0 0 0 3px rgba(250,81,73,.2); } &:active{ box-shadow: 0 0 0 3px rgba(250,81,73,.3); } } .filters .bx-filter .bx-ui-slider-handle.left{ margin-left: 0; } .filters .bx-filter .bx-ui-slider-handle.right{ margin-right: 0; } .filters .row.bx-filter-parameters-box-container:has(.min-price, .max-price){ column-gap: 15px; align-items: center; & .bx-ft-sub{ display: none !important; } & .bx-filter-parameters-box-container-block{ flex: 1; } & .bx-filter-parameters-box-container-block.bx-left{ order: 1; } & .bx-filter-parameters-box-container-block.bx-right{ order: 3; } &:after{ content: ''; display: block; width: 16px; height: 1px; background: var(--color-additional); order: 2; } } .filters input.min-price, .filters input.max-price{ border: none; border-bottom: 1px solid var(--color-additional); border-radius: 0; } .filters .bx-filter-button-box{ display: flex; gap: 8px; padding: 0; margin-top: 8px; } .filters .bx-filter-button-box .bx-filter-block{ width: 100%; } .filters .bx-filter-button-box .bx-filter-parameters-box-container{ } .filters .bx-filter-button-box input.btn-link{ background: transparent; border: none; font-size: 14px; color: var(--color-additional2); cursor: pointer; padding: 0 12px; } /* btn */ .filters .bx-filter .bx-filter-popup-result{ --el-bg: var(--color-accent); right: unset; left: 100%; padding: 12px; border: none; height: 50px; background: var(--el-bg); color: white; transform: translateY(-30%); box-shadow: 0 0 3px 0px rgb(0 0 0 / 52%); cursor: pointer; & a{ color: white; text-decoration: none; margin-top: 4px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-accent); display: flex; align-items: center; justify-content: center; margin: 0; font-size: 16px; } &:before{ content:''; display: block; width: 12px; height: 12px; background: var(--el-bg); position: absolute; left: 0px; top: 50%; transform: translate(-50%, -50%) rotate(45deg); } } @media ( max-width: 1024px ){ .filters .bx-filter .bx-filter-popup-result{ transform: translateY(0); } } /* ========== PRODUCTION PAGE ========== */ .production__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 48px; } .production__heroContent { padding-top: 180px; } .production__heroContent h2 { font-size: 48px; font-weight: 500; line-height: 1; color: var(--color-primary); margin: 0 0 16px; } .production__heroContent p { font-size: 16px; line-height: 1.4; color: var(--color-additional); margin: 0; max-width: 423px; } .production__heroImage { overflow: hidden; max-height: 666px; } .production__heroImage img { display: block; width: 100%; height: 100%; max-height: 666px; object-fit: cover; } .production__about { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--color-additional2); } .production__about p { font-size: 14px; line-height: 18px; color: var(--color-additional); margin: 0 0 12px; max-width: 458px; } .production__about p:last-child { margin-bottom: 0; } .production__aboutNote { font-weight: 500; color: var(--color-additional) !important; margin-top: 24px !important; } .production__capabilities { margin-bottom: 48px; } .production__capGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .production__capCard { background: #F3F6FA; border-radius: 0; overflow: hidden; } .production__capImg { height: 200px; overflow: hidden; } .production__capImg img { display: block; width: 100%; height: 100%; object-fit: cover; }.production__capInfo { padding: 24px; } .production__capInfo h3 { font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--color-additional); margin: 0 0 12px; } .production__capInfo p { font-size: 18px; line-height: 1.4; color: #535A61; margin: 0 0 16px; } .production__capBtn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--color-additional); background: transparent; color: var(--color-additional); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .production__capBtn:hover { background: var(--color-additional); color: #fff; } .production__service { margin-bottom: 48px; } .production__service h2, .production__team h2, .production__wholesale h2, .production__partners h2, .production__cta h2 { font-size: 36px; font-weight: 500; line-height: 1.1; color: var(--color-primary); margin: 0 0 24px; } .production__serviceGrid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; } .production__serviceDesc p { font-size: 14px; line-height: 1.5; color: var(--color-additional); margin: 0; } .production__serviceItem { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-additional2); } .production__serviceItem:first-child { border-top: 1px solid var(--color-additional2); } .production__serviceItemTitle { font-size: 18px; font-weight: 600; color: var(--color-additional); } .production__serviceItemDesc { font-size: 14px; line-height: 1.4; color: var(--color-additional); } .production__team { margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--color-additional2); } .production__teamContent { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .production__teamText p { font-size: 14px; line-height: 1.5; color: var(--color-additional); margin: 0; } .production__teamImage { overflow: hidden; } .production__teamImage img { display: block; width: 100%; height: 340px; object-fit: cover; } .production__wholesale { margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--color-additional2); } .production__wholesaleIntro { font-size: 14px; line-height: 18px; color: var(--color-additional); margin: 0 0 32px; max-width: 579px; } .production__wholesaleGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .production__wholesaleCards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .production__wCard { border: 1px solid #535A61; padding: 24px; min-height: 176px; } .production__wCardTitle { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-primary); margin-bottom: 8px; } .production__wCard p { font-size: 14px; line-height: 18px; color: var(--color-additional); margin: 0; } .production__wholesaleStepsTitle { font-size: 18px; font-weight: 600; color: var(--color-additional); margin-bottom: 16px; } .production__step { display: flex; gap: 16px; align-items: center; background: #F3F6FA; height: 64px; padding: 0 24px; margin-bottom: 16px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-additional); } .production__stepNum { font-size: 32px; font-weight: 500; color: #AAA; flex-shrink: 0; } .production__partners { margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--color-additional2); } .production__partnersList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .production__partner { display: flex; align-items: center; justify-content: center; height: 126px; border: 1px solid #E5E7EB; overflow: hidden; } .production__partner img { max-width: 80%; max-height: 80%; object-fit: contain; } .production__cta { margin-bottom: 48px; padding-top: 32px; } .production__ctaContent { display: flex; justify-content: space-between; align-items: center; gap: 32px; } .production__ctaContent p { font-size: 14px; font-weight: 500; color: var(--color-primary); margin: 0; max-width: 720px; } .production__ctaContent .btn { flex-shrink: 0; background: var(--color-accent); color: #fff; height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; cursor: pointer; } /* Documents section */ .production__docs { margin-bottom: 48px; padding-top: 48px; border-top: 1px solid var(--color-additional2); } .production__docs h2 { font-size: 36px; font-weight: 500; line-height: 1.1; color: var(--color-primary); margin: 0 0 8px; } .production__docsSubtitle { font-size: 14px; font-weight: 500; color: var(--color-additional); margin: 0 0 24px; } .production__docsList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .production__docItem { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--color-primary); transition: opacity 0.2s; } .production__docItem:hover { opacity: 0.75; } .production__docThumb { background: #D9D9D9; height: 126px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .production__docThumb img { width: 48px; height: 48px; object-fit: contain; opacity: 0.4; } .production__docName { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-primary); } /* Production page mobile */ @media (max-width: 991px) { .production__hero { grid-template-columns: 1fr; gap: 24px; } .production__heroContent { padding-top: 0; } .production__heroContent h2 { font-size: 32px; } .production__heroImage { max-height: 400px; } .production__heroImage img { max-height: 400px; } .production__service h2, .production__team h2, .production__wholesale h2, .production__partners h2, .production__cta h2 { font-size: 28px; } .production__capGrid { grid-template-columns: 1fr; } .production__serviceGrid { grid-template-columns: 1fr; } .production__serviceItem { grid-template-columns: 1fr; gap: 8px; } .production__teamContent { grid-template-columns: 1fr; } .production__wholesaleGrid { grid-template-columns: 1fr; } .production__wholesaleCards { grid-template-columns: 1fr; } .production__partnersList { grid-template-columns: repeat(2, 1fr); } .production__ctaContent { flex-direction: column; align-items: flex-start; } .production__docs h2 { font-size: 28px; } .production__docsList { grid-template-columns: repeat(2, 1fr); } } /* ========== PRODUCTION HOME BLOCK ========== */ .productionHome__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .productionHome__cell { border-radius: 12px; overflow: hidden; min-height: 200px; } .productionHome__cell--image { background: #F3F3F3; } .productionHome__cell--image .productionHome__imgLink { display: block; width: 100%; height: 100%; } .productionHome__cell--image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .productionHome__cell--image:hover img { transform: scale(1.03); } .productionHome__cell--text { background: var(--color-primary); } .productionHome__textLink { display: flex; align-items: center; padding: 24px; height: 100%; text-decoration: none; color: #fff; transition: background 0.2s; } .productionHome__cell--text:hover { background: var(--color-additional); } .productionHome__textTitle { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; margin-bottom: 8px; } .productionHome__textDesc { font-size: 14px; line-height: 1.5; color: var(--color-additional3); margin: 0; } .productionHome__more { margin-top: 24px; text-align: center; } .productionHome__moreLink { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; color: var(--color-accent); text-decoration: none; transition: color 0.2s; } .productionHome__moreLink:hover { color: var(--color-accent-2); } @media (max-width: 991px) { .productionHome__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .productionHome__grid { grid-template-columns: 1fr; } .productionHome__cell { min-height: 160px; } } /* ========== CATALOG CATEGORIES GRID ========== */ .catalogCategories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; } .catalogCategories__card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid #E5E7EB; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .catalogCategories__card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .catalogCategories__img { height: 280px; overflow: hidden; background: #F3F3F3; } .catalogCategories__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .catalogCategories__card:hover .catalogCategories__img img { transform: scale(1.05); } .catalogCategories__placeholder { width: 100%; height: 100%; background: #E5E7EB; } .catalogCategories__info { padding: 16px; } .catalogCategories__info h3 { font-size: 18px; font-weight: 600; color: var(--color-primary); margin: 0 0 6px; line-height: 1.3; } .catalogCategories__count { font-size: 14px; color: var(--color-additional2); } @media (max-width: 991px) { .catalogCategories { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .catalogCategories { grid-template-columns: 1fr; } .catalogCategories__img { height: 200px; } } /* ========== SEO TEXT ========== */ .seoText { font-size: 14px; color: var(--color-additional2); line-height: 1.6; max-width: 720px; } .seoText--top { margin-top: 16px; margin-bottom: 8px; } .seoText--bottom { margin-top: 32px; margin-bottom: 24px; } .seoText h2 { font-size: 20px; font-weight: 600; color: var(--color-primary); margin: 0 0 12px; } .seoText p { margin: 0 0 10px; } .seoText p:last-child { margin-bottom: 0; } /* ========== FOOTER ========== */ .footer { background: var(--color-additional); color: #fff; margin-top: 80px; } .footer__inner { padding-top: 48px; padding-bottom: 24px; } .footer__top { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr; gap: 24px; align-items: start; } .footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .footer__menu li a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; line-height: 18px; color: #fff; text-decoration: none; transition: color 0.2s; } .footer__menu li a:hover { color: var(--color-accent); } .footer__socials { display: flex; gap: 12px; margin-top: 24px; } .footer__socialIcon { display: block; width: 32px; height: 32px; flex-shrink: 0; transition: opacity 0.2s; } .footer__socialIcon:hover { opacity: 0.8; } .footer__socialIcon svg { display: block; width: 32px; height: 32px; } .footer__contacts { display: flex; flex-direction: column; gap: 16px; } .footer__phone, .footer__email { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; line-height: 18px; color: #fff; text-decoration: none; transition: color 0.2s; } .footer__phone:hover, .footer__email:hover { color: var(--color-accent); } .footer__address { padding-top: 4px; } .footer__addressText { display: flex; gap: 8px; align-items: flex-start; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; line-height: 22px; color: #fff; } .footer__mapPin { flex-shrink: 0; margin-top: 3px; } .footer__cta { display: flex; align-items: flex-start; justify-content: flex-end; } .footer__ctaBtn { background: var(--color-accent); color: #fff; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; line-height: 18px; height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 0; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .footer__ctaBtn:hover { background: var(--color-accent-2); } .footer__divider { height: 1px; background: #535A61; margin: 32px 0 24px; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; } .footer__copy { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; line-height: 18px; color: var(--color-additional2); } .footer__privacy { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; color: #fff; text-decoration: none; transition: color 0.2s; } .footer__privacy:hover { color: var(--color-accent); } /* Footer mobile */ @media (max-width: 991px) { .footer { margin-top: 48px; } .footer__inner { padding-top: 32px; } .footer__top { grid-template-columns: 1fr; gap: 32px; } .footer__menu { gap: 12px; } .footer__socials { margin-top: 20px; } .footer__cta { justify-content: flex-start; } .footer__ctaBtn { width: auto; } .footer__bottom { flex-direction: column-reverse; gap: 12px; align-items: flex-start; } } /* Toast */ .toast{ display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; border-radius: 12px; padding: 14px 20px; z-index: 200; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 24px rgba(0,0,0,.2); white-space: nowrap; } .toast__link{ color: var(--color-accent); text-decoration: none; font-weight: 600; &:hover{ text-decoration: underline; } } /* Format tabs */ .productPageFormatTabs{ display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; } .productPageFormatTabs__item .btnChooseParam__val{ font-size: 14px; } /* Format tabs with prices (P10) */ .productPageFormatTabs_priced{ gap: 12px; } .productPageFormatTabs_priced .productPageFormatTabs__item{ flex: 1; min-width: 0; } .btnChooseFormat{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border: 2px solid var(--color-additional2); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; text-align: center; position: relative; } .btnChooseFormat input{ position: absolute; opacity: 0; pointer-events: none; } .btnChooseFormat:hover{ border-color: var(--color-additional); } .btnChooseFormat:has(input:checked){ border-color: var(--color-primary); background: var(--color-bg); } .btnChooseFormat__name{ font-size: 14px; font-weight: 500; color: var(--color-primary); line-height: 18px; } .btnChooseFormat__price{ font-size: 18px; font-weight: 600; color: var(--color-accent-2); line-height: 22px; } .btnChooseFormat:has(input:checked) .btnChooseFormat__name{ font-weight: 600; } @media (max-width: 991px){ .productPageFormatTabs_priced{ gap: 8px; } .btnChooseFormat{ padding: 10px 8px; } .btnChooseFormat__price{ font-size: 16px; } } .productCard__priceFrom{ font-size: 12px; color: var(--color-additional3); font-weight: 400; } /* ========== STICKY HEADER ========== */ .header { transition: transform 0.3s ease; } .header--sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .header--hidden { transform: translateY(-100%); } body.has-sticky-header { padding-top: var(--header-height); } /* ========== SCROLL TO TOP ========== */ .scrollTop { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 90; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .scrollTop--visible { opacity: 1; pointer-events: auto; } .scrollTop:hover { background: var(--color-additional); } /* Category tabs */ .categoryTabs{ display: flex; gap: 8px; margin: 16px 0 0; flex-wrap: wrap; } .categoryTabs__item{ display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500; border: 1px solid #D1D5DB; color: var(--color-additional); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .categoryTabs__item.active{ background: var(--color-accent); color: #fff; border-color: var(--color-accent); } @media (hover: hover){ .categoryTabs__item:not(.active):hover{ border-color: var(--color-accent); color: var(--color-accent); } } @media (max-width: 768px){ .categoryTabs{ overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; &::-webkit-scrollbar{ display: none; } } .categoryTabs__item{ scroll-snap-align: start; flex-shrink: 0; } .header__logo{ justify-content: start; } } /* ========== SERVICE PAGE (резка, гибка, правка, плёнка) ========== */ .servicePage { padding-bottom: 64px; } /* Hero */ .servicePage__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; margin-bottom: 0; position: relative; } .servicePage__heroContent { padding: 200px 0 0 103px; } .servicePage__heroContent h1 { font-size: 48px; font-weight: 500; line-height: 1; color: var(--color-primary); margin: 0 0 24px; max-width: 481px; } .servicePage__heroContent p { font-size: 16px; line-height: 1.375; color: var(--color-additional); margin: 0 0 40px; max-width: 455px; } .servicePage__heroImage { overflow: hidden; height: 666px; margin-top: 8px; } .servicePage__heroImage img { display: block; width: 100%; height: 100%; object-fit: cover; } .servicePage__heroImage .servicePage__placeholder { width: 100%; height: 100%; background: #D9D9D9; } .servicePage__heroBtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; background: var(--color-accent); color: #fff; font-size: 14px; font-weight: 500; line-height: 16px; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s; } .servicePage__heroBtn:hover { opacity: 0.8; } /* Breadcrumb override in service pages */ .servicePage__breadcrumb { padding: 40px 0 0 16px; position: absolute; top: 0; left: 0; z-index: 2; } /* Divider */ .servicePage__divider { height: 1px; background: var(--color-additional2); margin: 0 16px; } /* Features 2x2 grid */ .servicePage__features { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; padding: 32px 0; margin: 0 16px; position: relative; } .servicePage__features::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--color-additional2); } .servicePage__featVertDivider { background: var(--color-additional2); width: 1px; } .servicePage__featItem { display: flex; gap: 20px; padding: 24px 30px; align-items: flex-start; } .servicePage__featIcon { width: 50px; height: 50px; flex-shrink: 0; } .servicePage__featIcon svg { width: 50px; height: 50px; stroke: var(--color-additional); stroke-width: 1.5; fill: none; } .servicePage__featTitle { font-size: 18px; font-weight: 600; line-height: 24px; color: var(--color-additional); text-transform: uppercase; margin-bottom: 8px; } .servicePage__featDesc { font-size: 14px; font-weight: 400; line-height: 18px; color: var(--color-additional); } /* Section heading */ .servicePage__sectionTitle { font-size: 36px; font-weight: 500; line-height: 40px; color: var(--color-primary); margin: 0 0 16px; } .servicePage__sectionSubtext { font-size: 14px; font-weight: 400; line-height: 18px; color: var(--color-additional); margin: 0 0 24px; max-width: 420px; } /* Products section */ .servicePage__products { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0; padding: 48px 16px; } .servicePage__productsInfo { max-width: 356px; padding-right: 32px; } .servicePage__productCard { background: #F3F6FA; padding: 16px; display: flex; flex-direction: column; } .servicePage__productCard + .servicePage__productCard { margin-left: 16px; } .servicePage__productImg { width: 100%; height: 296px; overflow: hidden; margin-bottom: 16px; } .servicePage__productImg img { display: block; width: 100%; height: 100%; object-fit: cover; } .servicePage__productImg .servicePage__placeholder { width: 100%; height: 100%; background: #D9D9D9; } .servicePage__productName { font-size: 24px; font-weight: 600; line-height: 30px; color: var(--color-additional); margin-bottom: 12px; } .servicePage__productDesc { font-size: 14px; font-weight: 400; line-height: 18px; color: var(--color-additional); } /* Divider between products and next section */ .servicePage__productsDivider { width: 1px; background: var(--color-additional2); margin: 0 16px; align-self: stretch; } /* Tech params */ .servicePage__techParams { padding: 48px 16px; } .servicePage__techGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .servicePage__techColumn {} .servicePage__techColumnTitle { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-additional); margin-bottom: 8px; } .servicePage__techRow { display: flex; justify-content: space-between; align-items: center; height: 34px; border-bottom: 1px solid var(--color-additional3); padding: 0 7px; } .servicePage__techLabel { font-size: 14px; font-weight: 300; line-height: 16px; color: var(--color-additional); } .servicePage__techValue { font-size: 14px; font-weight: 500; line-height: 16px; color: var(--color-additional); text-align: right; } /* Gallery / slider section */ .servicePage__gallery { padding: 48px 16px; } .servicePage__galleryHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .servicePage__galleryNav { display: flex; gap: 32px; } .servicePage__galleryNav button { width: 24px; height: 24px; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .servicePage__galleryNav svg { width: 24px; height: 24px; stroke: var(--color-primary); stroke-width: 2; fill: none; } .servicePage__galleryGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .servicePage__galleryItem { height: 262px; overflow: hidden; } .servicePage__galleryItem img { display: block; width: 100%; height: 100%; object-fit: cover; } .servicePage__placeholder { width: 100%; height: 100%; background: #D9D9D9; } /* Work stages */ .servicePage__stages { padding: 48px 16px; } .servicePage__stagesGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } .servicePage__stage { border: 1px solid var(--color-additional); padding: 24px; min-height: 213px; display: flex; flex-direction: column; } .servicePage__stageNum { font-size: 96px; font-weight: 500; line-height: 1; color: #EDF0F3; margin-bottom: 16px; } .servicePage__stageDesc { font-size: 14px; font-weight: 400; line-height: 18px; color: var(--color-additional); } /* Calculator form */ .servicePage__calcForm { background: #F3F6FA; padding: 48px 0; margin: 48px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; } .servicePage__calcInfo { padding: 0 0 0 119px; } .servicePage__calcInfo h3 { font-size: 24px; font-weight: 600; line-height: 40px; color: var(--color-primary); text-transform: uppercase; margin: 0 0 24px; } .servicePage__calcInfo p { font-size: 14px; font-weight: 400; line-height: 18px; color: var(--color-additional); margin: 0 0 16px; max-width: 347px; } .servicePage__calcDownload { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-additional); text-decoration: underline; margin-top: 24px; } .servicePage__calcDownload svg { width: 24px; height: 24px; stroke: var(--color-additional); stroke-width: 2; fill: none; } .servicePage__calcFormBox { background: #fff; padding: 40px; box-shadow: 0 0 40px 1px rgba(0,0,0,0.05); margin-right: 40px; } .servicePage__calcInputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-bottom: 32px; } .servicePage__calcInput { position: relative; height: 60px; border-bottom: 1px solid var(--color-additional); } .servicePage__calcInput input { width: 100%; height: 100%; border: none; outline: none; font-size: 18px; font-family: 'Inter', sans-serif; color: var(--color-primary); background: transparent; padding: 20px 0 0; } .servicePage__calcInput label { position: absolute; left: 0; bottom: 10px; font-size: 18px; color: var(--color-additional3); pointer-events: none; transition: all 0.2s; } .servicePage__calcInput input:focus + label, .servicePage__calcInput input:not(:placeholder-shown) + label { font-size: 12px; bottom: 38px; } .servicePage__calcActions { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .servicePage__calcAttach { display: inline-flex; align-items: center; gap: 16px; height: 50px; padding: 0 24px 0 16px; border: 1px solid var(--color-additional); background: none; font-size: 16px; font-weight: 500; font-family: 'Inter', sans-serif; color: var(--color-additional); cursor: pointer; transition: opacity 0.2s; } .servicePage__calcAttach:hover { opacity: 0.7; } .servicePage__calcAttach svg { width: 18px; height: 18px; stroke: var(--color-additional); stroke-width: 2; fill: none; } .servicePage__calcSubmit { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; background: var(--color-accent); color: #fff; font-size: 16px; font-weight: 500; font-family: 'Inter', sans-serif; border: none; cursor: pointer; transition: opacity 0.2s; min-width: 234px; } .servicePage__calcSubmit:hover { opacity: 0.8; } .servicePage__calcDisclaimer { font-size: 12px; line-height: 16px; color: var(--color-additional); margin-top: 16px; } .servicePage__calcDisclaimer a { color: #FF402C; text-decoration: underline; } .servicePage__calcSuccess { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 200px; padding: 40px 24px; } .servicePage__calcSuccessTitle { font-size: 24px; font-weight: 600; color: var(--color-primary); margin-bottom: 12px; } .servicePage__calcSuccess p { font-size: 16px; color: var(--color-additional); line-height: 1.5; } .servicePage__calcSubmit:disabled { opacity: 0.6; cursor: not-allowed; } /* Partners */ .servicePage__partners { padding: 48px 16px; border-bottom: 1px solid var(--color-additional2); } .servicePage__partnersList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; border-top: 1px solid var(--color-additional2); padding-top: 24px; } .servicePage__partner { display: flex; align-items: center; justify-content: center; height: 126px; overflow: hidden; } .servicePage__partner img { max-width: 80%; max-height: 80%; object-fit: contain; } /* FAQ */ .servicePage__faq { padding: 48px 16px; } .servicePage__faqItem { border-top: 1px solid var(--color-additional2); position: relative; } .servicePage__faqItem:last-child { border-bottom: 1px solid var(--color-additional2); } .servicePage__faqQuestion { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; user-select: none; } .servicePage__faqQuestion h4 { font-size: 20px; font-weight: 600; line-height: 30px; color: var(--color-additional); margin: 0; flex: 1; } .servicePage__faqToggle { width: 44px; height: 44px; border: 1px solid var(--color-additional3); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 16px; transition: transform 0.3s; } .servicePage__faqToggle svg { width: 24px; height: 24px; stroke: var(--color-additional); stroke-width: 2; fill: none; } .servicePage__faqAnswer { display: none; padding: 0 16px 16px; } .servicePage__faqAnswer p { font-size: 16px; line-height: 1.5; color: var(--color-additional); margin: 0; max-width: 978px; } .servicePage__faqItem.active .servicePage__faqAnswer { display: block; } .servicePage__faqItem.active .servicePage__faqToggle { transform: rotate(45deg); } /* Other services */ .servicePage__otherServices { padding: 48px 16px; } .servicePage__otherGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .servicePage__otherCard { border: 1px solid var(--color-additional); padding: 36px 24px 32px; display: flex; flex-direction: column; min-height: 479px; } .servicePage__otherCard h4 { font-size: 24px; font-weight: 600; line-height: 28px; color: var(--color-additional); margin: 0 0 16px; } .servicePage__otherCardImg { width: calc(100% - 0px); height: 267px; overflow: hidden; margin-bottom: auto; } .servicePage__otherCardImg img { display: block; width: 100%; height: 100%; object-fit: cover; } .servicePage__otherCardImg .servicePage__placeholder { width: 100%; height: 100%; background: #D9D9D9; } .servicePage__otherCardBtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1px solid var(--color-additional); background: none; color: var(--color-additional); font-size: 14px; font-weight: 500; text-decoration: none; align-self: flex-end; margin-top: 16px; transition: opacity 0.2s; } .servicePage__otherCardBtn:hover { opacity: 0.6; } /* Service page mobile */ @media (max-width: 991px) { .servicePage__hero { grid-template-columns: 1fr; } .servicePage__heroContent { padding: 120px 16px 24px; } .servicePage__heroContent h1 { font-size: 32px; } .servicePage__heroImage { height: 400px; } .servicePage__features { grid-template-columns: 1fr; gap: 0; } .servicePage__features::before { display: none; } .servicePage__featVertDivider { display: none; } .servicePage__featItem { border-bottom: 1px solid var(--color-additional2); } .servicePage__products { grid-template-columns: 1fr; gap: 24px; } .servicePage__productsInfo { max-width: none; padding-right: 0; } .servicePage__productCard + .servicePage__productCard { margin-left: 0; } .servicePage__productsDivider { display: none; } .servicePage__techGrid { grid-template-columns: 1fr; gap: 24px; } .servicePage__galleryGrid { grid-template-columns: 1fr 1fr; } .servicePage__stagesGrid { grid-template-columns: 1fr 1fr; } .servicePage__calcForm { grid-template-columns: 1fr; padding: 32px 16px; } .servicePage__calcInfo { padding: 0; margin-bottom: 32px; } .servicePage__calcFormBox { margin-right: 0; } .servicePage__calcInputs { grid-template-columns: 1fr; } .servicePage__calcActions { flex-direction: column; align-items: stretch; } .servicePage__partnersList { grid-template-columns: 1fr 1fr; } .servicePage__otherGrid { grid-template-columns: 1fr; } .servicePage__sectionTitle { font-size: 28px; line-height: 32px; } } @media (max-width: 575px) { .servicePage__galleryGrid { grid-template-columns: 1fr; } .servicePage__stagesGrid { grid-template-columns: 1fr; } .servicePage__stageNum { font-size: 64px; } } /* End */ /* Start:/assets/css/additional.css?174763543455*/ body>.tablebodytext { display:none !important; } /* End */ /* /assets/libs/swiper/swiper-bundle.min.css?174763543418456 */ /* /assets/css/style.css?1779275356112090 */ /* /assets/css/additional.css?174763543455 */ @media (max-width: 768px) { .categoryTile__img { height: 180px; } }