/* Start:/local/templates/contwell/assets/css/swiper-bundle.min.css?177703016318436*/ /** * Swiper 11.0.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 22, 2023 */ @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-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-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-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /* End */ /* Start:/local/templates/contwell/assets/css/style.css?1789636197238386*/ @font-face { font-family: 'Instrument Sans'; src: url('/local/templates/contwell/assets/css/../fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/local/templates/contwell/assets/css/../fonts/InstrumentSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/local/templates/contwell/assets/css/../fonts/InstrumentSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/local/templates/contwell/assets/css/../fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { --color-primary: #fd8064; --color-primary-hover: #fc896f; --color-primary-light: rgba(253, 128, 100, 0.1); --color-primary-alt: #f05449; --color-secondary: #004156; --color-secondary-hover: #003345; --color-secondary-dark: #162840; --color-secondary-medium: #1C334E; --color-secondary-light: rgba(28, 51, 78, 0.92); --color-teal: #1C4E5E; --color-teal-hover: #163d4a; --color-neutral-100: #ffffff; --color-neutral-200: #f3f3f3; --color-neutral-250: #f5f6f8; --color-neutral-300: #d9d9d9; --color-neutral-400: #bdbdbd; --color-neutral-500: #a9a6a6; --color-neutral-600: #787878; --color-neutral-650: #787878; --color-neutral-700: #555555; --color-neutral-800: #333333; --color-neutral-900: #000000; --color-white: var(--color-neutral-100); --color-text: var(--color-neutral-800); --color-text-muted: var(--color-neutral-700); --color-text-light: #999999; --color-bg-light: var(--color-neutral-250); --color-orange: var(--color-primary-hover); --color-orange-hover: #EB7A5E; --color-dark: var(--color-secondary-dark); --font-family-base: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-size-xs: calc(14 / 1920 * 100vw); --font-size-sm: calc(16 / 1920 * 100vw); --font-size-base: calc(20 / 1920 * 100vw); --font-size-lg: calc(24 / 1920 * 100vw); --font-size-xl: calc(32 / 1920 * 100vw); --font-size-2xl: calc(48 / 1920 * 100vw); --font-size-3xl: calc(80 / 1920 * 100vw); --font-size-4xl: calc(100 / 1920 * 100vw); --font-size-5xl: calc(116 / 1920 * 100vw); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-none: 1; --line-height-tight: 1.1; --line-height-snug: 1.2; --line-height-normal: 1.4; --line-height-relaxed: 1.5; --space-xs: calc(8 / 1920 * 100vw); --space-sm: calc(12 / 1920 * 100vw); --space-md: calc(20 / 1920 * 100vw); --space-lg: calc(26 / 1920 * 100vw); --space-xl: calc(40 / 1920 * 100vw); --space-2xl: calc(60 / 1920 * 100vw); --space-3xl: calc(100 / 1920 * 100vw); --radius-xs: calc(5 / 1920 * 100vw); --radius-sm: calc(8 / 1920 * 100vw); --radius-md: calc(20 / 1920 * 100vw); --radius-lg: calc(40 / 1920 * 100vw); --radius-full: calc(100 / 1920 * 100vw); --radius-round: 50%; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 0 20px 0 rgba(241, 241, 241, 1); --shadow-drawer: -4px 0 20px rgba(0, 0, 0, 0.1); --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --hero-card-bg: rgba(255, 255, 255, 0.04); --hero-card-border: rgba(150, 150, 150, 0.24); --hero-title-accent: #fc896f; --hero-accent-bg: #fd8064; } html { box-sizing: border-box; -webkit-text-size-adjust: 100%; font-size: var(--font-size-sm); scroll-behavior: smooth; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: 1.5; color: var(--color-text); background-color: var(--color-white); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text); } h1 { font-size: calc(32 / 1920 * 100vw); } h2 { font-size: calc(28 / 1920 * 100vw); } h3 { font-size: calc(24 / 1920 * 100vw); } h4 { font-size: calc(20 / 1920 * 100vw); } h5 { font-size: calc(18 / 1920 * 100vw); } h6 { font-size: calc(16 / 1920 * 100vw); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1em; padding-left: calc(24 / 1920 * 100vw); } ul { list-style: disc; } ol { list-style: decimal; } li { margin-bottom: calc(4 / 1920 * 100vw); } a { color: var(--color-dark); text-decoration: none; } a:hover { text-decoration: underline; } img, picture, video, canvas, svg { max-width: 100%; height: auto; display: block; } img { vertical-align: middle; } input, button, textarea, select { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } button { cursor: pointer; padding: 0; border: none; background: none; } button:disabled { cursor: not-allowed; opacity: 0.6; } input, textarea, select { margin: 0; } input::placeholder, textarea::placeholder { color: var(--color-text-muted); } table { border-collapse: collapse; border-spacing: 0; width: 100%; } fieldset { margin: 0; padding: 0; border: none; } .visually-hidden { position: absolute; width: calc(1 / 1920 * 100vw); height: calc(1 / 1920 * 100vw); margin: calc(-1 / 1920 * 100vw); padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .btn { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); border: none; cursor: pointer; transition: var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; } .btn--primary { background: var(--color-primary); color: var(--color-neutral-100); font-size: var(--font-size-lg); line-height: var(--line-height-none); padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); border-radius: var(--radius-full); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--secondary { background: var(--color-secondary); color: var(--color-neutral-100); font-size: var(--font-size-lg); line-height: var(--line-height-none); padding: calc(20 / 1920 * 100vw) calc(80 / 1920 * 100vw); border-radius: var(--radius-full); } .btn--secondary:hover { background: var(--color-secondary-hover); } .btn--outline { background: transparent; color: var(--color-neutral-100); border: 1px solid var(--color-neutral-100); font-size: var(--font-size-base); line-height: var(--line-height-none); padding: calc(16 / 1920 * 100vw) calc(32 / 1920 * 100vw); border-radius: var(--radius-md); } .btn--outline:hover { background: rgba(255, 255, 255, 0.1); } .btn--wide { padding-left: calc(100 / 1920 * 100vw); padding-right: calc(100 / 1920 * 100vw); } .heading { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); margin: 0; color: var(--color-neutral-800); } .heading--3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-none); } .heading--2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-snug); } .heading--xl { font-size: var(--font-size-xl); line-height: var(--line-height-tight); } .heading--lg { font-size: var(--font-size-lg); line-height: var(--line-height-snug); } .card { background: var(--color-neutral-100); transition: var(--transition-fast); box-sizing: border-box; } .card__image { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-300); position: relative; } .card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: var(--line-height-tight); color: var(--color-neutral-900); margin: 0; } .card__desc { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-neutral-500); margin: 0; } .form-input { font-family: var(--font-family-base); font-size: var(--font-size-base); padding: calc(16 / 1920 * 100vw) calc(20 / 1920 * 100vw); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-xs); background: var(--color-neutral-100); transition: var(--transition-fast); box-sizing: border-box; width: 100%; } .form-input:focus { outline: none; border-color: var(--color-primary); } .form-select { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); color: var(--color-secondary); padding: calc(16 / 1920 * 100vw) calc(56 / 1920 * 100vw) calc(16 / 1920 * 100vw) calc(20 / 1920 * 100vw); border: none; border-radius: var(--radius-md); background: var(--color-neutral-200); cursor: pointer; appearance: none; box-sizing: border-box; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } .gap-3xl { gap: var(--space-3xl); } .text-center { text-align: center; } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .header { position: absolute; top: 0; left: 0; right: 0; background-color: transparent; width: 100%; padding: 0; border-bottom: 1px solid var(--color-secondary); z-index: 1000; box-sizing: border-box; } .header .container, .header .header__container { width: 100%; max-width: calc(1920 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding: calc(6 / 1920 * 100vw) calc(174 / 1920 * 100vw); display: flex; align-items: center; justify-content: space-between; gap: calc(40 / 1920 * 100vw); min-height: calc(95 / 1920 * 100vw); box-sizing: border-box; } .header__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; box-sizing: border-box; } .header .logo__img--dark { display: none; } .header .logo__img--light { display: block; height: calc(83 / 1920 * 100vw); width: auto; max-height: calc(83 / 1920 * 100vw); object-fit: contain; } .header--light .logo__img--dark { display: block; height: calc(83 / 1920 * 100vw); width: auto; max-height: calc(83 / 1920 * 100vw); object-fit: contain; } .header--light .logo__img--light { display: none; } .header__nav { flex: 1; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .header .nav__list { display: flex; align-items: center; flex-wrap: nowrap; gap: 0 calc(60 / 1920 * 100vw); list-style: none; margin: 0; padding: 0; box-sizing: border-box; } .header .nav__list>li { margin: 0; padding: 0; box-sizing: border-box; } .header .nav__list>li>a { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; color: var(--color-white); text-decoration: none; padding: calc(5 / 1920 * 100vw) 0; display: inline-block; transition: color 0.2s; box-sizing: border-box; } .header .nav__list>li>a:hover { color: var(--color-orange); } .header--light .nav__list>li>a { color: var(--color-secondary); } .header--light .nav__list>li>a:hover { color: var(--color-orange); } .header .nav__list .menu-item-has-children { position: relative; } .header .nav__list .menu-item-has-children>a { display: inline-flex; align-items: center; gap: calc(10 / 1920 * 100vw); } .header .nav__list .menu-item-has-children>a::after { content: ''; display: inline-block; width: calc(26 / 1920 * 100vw); height: calc(30 / 1920 * 100vw); background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.2s; box-sizing: border-box; } .header--light .nav__list .menu-item-has-children>a::after { background-image: url('data:image/svg+xml;utf8,'); } .header .nav__list .menu-item-has-children:hover>a::after { transform: rotate(180deg); } @media (min-width: 769px) { .header .nav__list .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(10 / 1920 * 100vw); min-width: calc(280 / 1920 * 100vw); padding: calc(30 / 1920 * 100vw); list-style: none; background-color: var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); display: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; z-index: 100; box-sizing: border-box; } .header .nav__list .sub-menu::before { content: ''; position: absolute; top: calc(-10 / 1920 * 100vw); left: 0; right: 0; height: calc(10 / 1920 * 100vw); background: transparent; } .header .nav__list .menu-item-has-children:hover .sub-menu, .header .nav__list .menu-item-has-children.is-open .sub-menu { display: block; opacity: 1; visibility: visible; } } .header .nav__list .sub-menu li { margin: 0; padding: 0; } .header .nav__list .sub-menu li:not(:last-child) { margin-bottom: calc(20 / 1920 * 100vw); } .header .nav__list .sub-menu a { display: block; padding: 0; font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; color: var(--color-text); text-decoration: none; transition: color 0.2s; box-sizing: border-box; } .header .nav__list .sub-menu a:hover { color: var(--color-orange); } .header__actions { display: flex; align-items: center; gap: calc(60 / 1920 * 100vw); flex-shrink: 0; box-sizing: border-box; } .header .cart-btn { position: relative; width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); display: flex; align-items: center; justify-content: center; background-color: var(--color-primary); border: none; border-radius: calc(66.667 / 1920 * 100vw); color: var(--color-white); cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; box-sizing: border-box; } .header .cart-btn:hover { background-color: var(--color-orange-hover); color: var(--color-white); } .header .cart-btn__icon, .header .phone-btn-icon { width: calc(26 / 1920 * 100vw); height: calc(31 / 1920 * 100vw); display: block; } .header .cart-btn__badge { position: absolute; top: calc(-3.5 / 1920 * 100vw); left: calc(43 / 1920 * 100vw); min-width: calc(30 / 1920 * 100vw); height: calc(30 / 1920 * 100vw); padding: calc(1 / 1920 * 100vw) calc(6 / 1920 * 100vw); display: flex; align-items: center; justify-content: center; font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; color: var(--color-primary); background-color: var(--color-white); border: 1px solid var(--color-primary); border-radius: calc(15 / 1920 * 100vw); box-sizing: border-box; } .header .actions__btn.btn--orange { display: inline-flex; align-items: center; justify-content: center; padding: calc(16 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: 1; letter-spacing: 0; color: var(--color-white); background-color: var(--color-primary); border: none; border-radius: var(--radius-md); text-decoration: none; text-transform: none; transition: background-color 0.2s; box-sizing: border-box; } .header .actions__btn.btn--orange:hover { background-color: var(--color-orange-hover); color: var(--color-white); } .header__burger { display: none; } .header__mobile-nav, .header__mobile-overlay { display: none; } .header--light { border-bottom-color: #bdbdbd; } @media (max-width: 768px) { .header .container, .header .header__container { padding: 0 calc(16 / 430 * 100vw); min-height: calc(95 / 430 * 100vw); gap: 0; position: relative; z-index: 1001; } .header .logo__img--light, .header--light .logo__img--dark { height: calc(83 / 430 * 100vw); max-height: calc(83 / 430 * 100vw); } .header__nav { display: none; } .header .actions__btn.btn--orange { display: none; } .header__actions { gap: calc(20 / 430 * 100vw); margin-left: auto; } .header .cart-btn { width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); } .header .cart-btn__icon, .header .phone-btn-icon { width: calc(26 / 430 * 100vw); height: calc(31 / 430 * 100vw); } .header .cart-btn__badge { top: calc(-3.5 / 430 * 100vw); left: calc(43 / 430 * 100vw); min-width: calc(30 / 430 * 100vw); height: calc(30 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); padding: calc(1 / 430 * 100vw) calc(6 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .header__burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(5 / 430 * 100vw); width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); background-color: var(--color-white); border: none; border-radius: calc(66.667 / 430 * 100vw); padding: 0; cursor: pointer; flex-shrink: 0; box-sizing: border-box; transition: background-color 0.2s; } .header--light .header__burger { background-color: var(--color-secondary); } .header__burger:hover { background-color: #f0f0f0; } .header--light .header__burger:hover { background-color: var(--color-secondary); } .burger__line { display: block; width: calc(26 / 430 * 100vw); height: calc(2 / 430 * 100vw); background-color: var(--color-secondary); border-radius: calc(2 / 430 * 100vw); transition: transform 0.25s ease, opacity 0.25s ease; transform-origin: center; } .header--light .burger__line { background-color: var(--color-white); } .header.is-menu-open .burger__line--1 { transform: translateY(7px) rotate(45deg); } .header.is-menu-open .burger__line--2 { opacity: 0; transform: scaleX(0); } .header.is-menu-open .burger__line--3 { transform: translateY(-7px) rotate(-45deg); } .header__mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: calc(430 / 430 * 100vw); background-color: var(--color-secondary-dark); z-index: 999; display: flex; flex-direction: column; padding: calc(155 / 430 * 100vw) 0 calc(40 / 430 * 100vw) calc(8.33% + calc(14.17 / 430 * 100vw)); box-sizing: border-box; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2); } .header.is-menu-open .header__mobile-nav { transform: translateX(0); } .header__mobile-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .header.is-menu-open .header__mobile-overlay { opacity: 1; visibility: visible; } .header__mobile-nav .nav__list { display: flex; flex-direction: column; align-items: flex-start; gap: calc(40 / 430 * 100vw); list-style: none; margin: 0; padding: 0; } .header__mobile-nav .nav__list>li { border-bottom: none; margin: 0; padding: calc(5 / 430 * 100vw) 0; } .header__mobile-nav .nav__list>li>a { display: flex; align-items: center; justify-content: space-between; padding: 0; font-family: var(--font-family-base); font-size: calc(24 / 430 * 100vw); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); text-decoration: none; transition: color 0.2s; } .header__mobile-nav .nav__list>li>a:hover { color: var(--color-primary); } .header__mobile-nav .nav__list .menu-item-has-children>a::after { content: ''; display: inline-block; width: calc(20 / 430 * 100vw); height: calc(20 / 430 * 100vw); background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.25s ease; flex-shrink: 0; } .header__mobile-nav .nav__list .menu-item-has-children.is-open>a::after { transform: rotate(180deg); } .header__mobile-nav .nav__list .sub-menu { position: static; top: auto; left: auto; transform: none; margin: calc(20 / 430 * 100vw) 0 0 0; min-width: 0; padding: 0 0 0 calc(20 / 430 * 100vw); list-style: none; background-color: transparent; border-radius: 0; box-shadow: none; display: none; opacity: 1; visibility: visible; z-index: auto; } .header__mobile-nav .nav__list .menu-item-has-children.is-open .sub-menu { display: flex; flex-direction: column; gap: calc(40 / 430 * 100vw); } .header__mobile-nav .nav__list .sub-menu li { border-bottom: none; margin: 0; padding: 0; } .header__mobile-nav .nav__list .sub-menu li:last-child { border-bottom: none; } .header__mobile-nav .nav__list .sub-menu li:not(:last-child) { margin-bottom: 0; } .header__mobile-nav .nav__list .sub-menu a { display: block; padding: 0; font-family: var(--font-family-base); font-size: calc(20 / 430 * 100vw); font-weight: var(--font-weight-normal); line-height: 1; color: var(--color-white); text-decoration: none; transition: color 0.2s; } .header__mobile-nav .nav__list .sub-menu a:hover { color: var(--color-primary); } .header__mobile-nav .header__mobile-phone { display: inline-flex; align-items: center; justify-content: center; margin-top: calc(40 / 430 * 100vw); padding: calc(16 / 430 * 100vw) calc(32 / 430 * 100vw); font-family: var(--font-family-base); font-size: calc(18 / 430 * 100vw); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); background-color: var(--color-primary); border: none; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.2s; width: calc(100% - calc(8.33% + calc(14.17 / 430 * 100vw))); margin-right: calc(16 / 430 * 100vw); text-align: center; box-sizing: border-box; } .header__mobile-nav .header__mobile-phone:hover { background-color: var(--color-primary-hover); color: var(--color-white); } } .footer { background-color: var(--color-neutral-200); width: 100%; padding: calc(100 / 1920 * 100vw) calc(174 / 1920 * 100vw); box-sizing: border-box; } .footer .container, .footer .footer__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; gap: calc(132 / 1920 * 100vw); flex-wrap: nowrap; box-sizing: border-box; } .footer__left { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0; flex-shrink: 0; align-self: stretch; box-sizing: border-box; } .footer__branding { box-sizing: border-box; } .footer__logo { display: block; text-decoration: none; box-sizing: border-box; } .footer__logo img { width: calc(224 / 1920 * 100vw); height: calc(109 / 1920 * 100vw); max-width: calc(224 / 1920 * 100vw); max-height: calc(109 / 1920 * 100vw); object-fit: contain; display: block; } .footer__socials { display: flex; align-items: center; gap: calc(5 / 1920 * 100vw); flex-wrap: nowrap; box-sizing: border-box; } .footer .social-icons__link { display: flex; align-items: center; justify-content: center; width: calc(40 / 1920 * 100vw); height: calc(40 / 1920 * 100vw); padding: calc(8 / 1920 * 100vw); border-radius: calc(285.6 / 1920 * 100vw); background-color: var(--color-white); color: var(--color-teal); transition: background-color 0.2s, color 0.2s; box-sizing: border-box; } .footer .social-icons__link:hover { background-color: var(--color-teal); color: var(--color-white); } .footer .social-icons__link img { width: calc(24 / 1920 * 100vw); height: calc(24 / 1920 * 100vw); object-fit: contain; display: block; } .footer__bottom { margin-top: 0; box-sizing: border-box; } .footer__copy { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; color: var(--color-neutral-600); margin: 0; box-sizing: border-box; } .footer__nav { display: flex; align-items: flex-start; gap: calc(150 / 1920 * 100vw); flex-shrink: 0; width: calc(1188 / 1920 * 100vw); flex-wrap: nowrap; box-sizing: border-box; } .footer__col { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; box-sizing: border-box; } .footer__title { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1; letter-spacing: 0; color: var(--color-secondary); margin: 0 0 calc(38 / 1920 * 100vw); padding: calc(5 / 1920 * 100vw) 0; box-sizing: border-box; } .footer__list { display: flex; flex-direction: column; gap: calc(28 / 1920 * 100vw); list-style: none; margin: 0; padding: 0; box-sizing: border-box; } .footer__list li { margin: 0; padding: 0; box-sizing: border-box; } .footer__list a { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; color: var(--color-text); text-decoration: none; transition: color 0.2s; box-sizing: border-box; } .footer__list a:hover { color: var(--color-orange); } @media (max-width: 768px) { .footer { padding: calc(70 / 430 * 100vw) calc(16 / 430 * 100vw); } .footer .container, .footer .footer__container { flex-direction: column; gap: calc(49 / 430 * 100vw); position: relative; padding-bottom: calc(226 / 430 * 100vw); } .footer__left { width: 100%; flex-direction: column; align-items: flex-start; gap: 0; align-self: auto; } .footer__logo img { width: calc(224 / 430 * 100vw); height: calc(109 / 430 * 100vw); max-width: calc(224 / 430 * 100vw); max-height: calc(109 / 430 * 100vw); } .footer__socials { gap: calc(5 / 430 * 100vw); position: absolute; left: 0; bottom: calc(137 / 430 * 100vw); } .footer .social-icons__link { width: calc(40 / 430 * 100vw); height: calc(40 / 430 * 100vw); } .footer .social-icons__link img { width: calc(24 / 430 * 100vw); height: calc(24 / 430 * 100vw); } .footer__copy { font-size: calc(18 / 430 * 100vw); position: absolute; left: 0; bottom: calc(70 / 430 * 100vw); } .footer__nav { width: 100%; flex-direction: column; gap: calc(60 / 430 * 100vw); } .footer__col { width: 100%; } .footer__title { font-size: calc(24 / 430 * 100vw); margin: 0 0 calc(20 / 430 * 100vw); padding: calc(5 / 430 * 100vw) 0; } .footer__list { gap: calc(16 / 430 * 100vw); } .footer__list a { font-size: calc(18 / 430 * 100vw); } } .main .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .main .section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0 0 calc(24 / 1920 * 100vw); line-height: 1.2; } .main .section-padding { padding-top: calc(64 / 1920 * 100vw); padding-bottom: calc(64 / 1920 * 100vw); } .main .hero { background-color: var(--color-dark); background-size: cover; background-position: right center; background-repeat: no-repeat; min-height: calc(1068 / 1920 * 100vw); padding-top: calc(275 / 1920 * 100vw); padding-bottom: calc(60 / 1920 * 100vw); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; } .main .hero .hero__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: flex-start; gap: calc(169 / 1920 * 100vw); box-sizing: border-box; } .main .hero .hero__content { max-width: calc(600 / 1920 * 100vw); box-sizing: border-box; } .main .hero__title { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-style: normal; font-size: var(--font-size-4xl); line-height: 1; letter-spacing: 0; color: var(--color-white); margin: 0; box-sizing: border-box; } .main .hero__title span { color: var(--hero-title-accent); } .main .hero .advantages { width: 100%; overflow: hidden; box-sizing: border-box; padding-bottom: 0 !important; } .main .hero .advantages__wrapper { display: flex; gap: calc(12 / 1920 * 100vw); list-style: none; margin: 0 !important; padding: 0; align-items: stretch; box-sizing: border-box; } .main .hero .advantages__item { flex: 1 1 0; min-width: 0; display: flex; box-sizing: border-box; height: auto; width: auto !important; margin-right: 0 !important; } .main .hero .advantages__inner { height: 100%; min-height: 100%; padding: calc(40 / 1920 * 100vw); border-radius: var(--radius-lg); border: 1px solid rgba(150, 150, 150, 0.24); display: flex; flex-direction: column; gap: calc(40 / 1920 * 100vw); background-color: var(--hero-card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-white); box-sizing: border-box; } .main .hero .advantages__item--accent .advantages__inner { background-color: var(--hero-accent-bg); border: 1px solid rgba(150, 150, 150, 0.24); backdrop-filter: none; -webkit-backdrop-filter: none; } .main .hero .advantages__header { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(40 / 1920 * 100vw); margin-bottom: 0; box-sizing: border-box; } .main .hero .advantages__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(40 / 1920 * 100vw); line-height: 1.1; letter-spacing: 0; margin: 0; color: inherit; box-sizing: border-box; } .main .hero .advantages__icon { flex-shrink: 0; width: calc(80 / 1920 * 100vw); height: calc(80 / 1920 * 100vw); box-sizing: border-box; } .main .hero .advantages__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .main .hero .advantages__body { display: flex; flex-direction: column; box-sizing: border-box; } .main .hero .advantages__text { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: var(--font-size-base); line-height: 1.3; max-width: calc(406 / 1920 * 100vw); margin: 0; color: inherit; box-sizing: border-box; } .main .hero .advantages__footer { margin-top: auto; box-sizing: border-box; } .main .hero .advantages__link.btn-outline { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: 1; color: var(--color-white); background: rgba(255, 255, 255, 0.1); border: 1px solid var(--color-white); padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); border-radius: var(--radius-md); text-decoration: none; box-sizing: border-box; } .main .hero .advantages__item--accent .advantages__link.btn-outline:hover { background: var(--color-white); color: var(--hero-accent-bg); border-color: var(--color-white); } .main .hero .advantages__link.btn-outline:hover { background: var(--color-white); color: var(--color-dark); border-color: var(--color-white); } .main .promo-trust { background-color: var(--color-neutral-200); padding-top: calc(153 / 1920 * 100vw); padding-bottom: calc(82 / 1920 * 100vw); box-sizing: border-box; } .main .promo-trust__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; gap: calc(32 / 1920 * 100vw); box-sizing: border-box; } .main .promo-trust__content { width: 100%; box-sizing: border-box; } .main .promo-trust__title { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-5xl); line-height: 1; letter-spacing: 0; color: var(--color-text); text-align: center; margin: 0; box-sizing: border-box; } .main .promo-trust__title span { color: var(--color-primary); } .main .promo-trust__image-wrapper { width: 100%; max-width: calc(1189 / 1920 * 100vw); margin-top: calc(-417 / 1920 * 100vw); margin-bottom: calc(-200 / 1920 * 100vw); box-sizing: border-box; } .main .promo-trust__img { width: 100%; height: auto; display: block; vertical-align: middle; box-sizing: border-box; } .main .catalog { background-color: transparent; padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .catalog__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .main .catalog .catalog__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-3xl); line-height: 1; color: var(--color-text); margin: calc(85 / 1920 * 100vw) 0 calc(60 / 1920 * 100vw); letter-spacing: 0; box-sizing: border-box; } .main .catalog .info { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: calc(12 / 1920 * 100vw); margin-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .info-card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: calc(40 / 1920 * 100vw); position: relative; overflow: visible; box-shadow: 0 0 20px 0 #f1f1f1; display: flex; flex-direction: column; box-sizing: border-box; } .main .catalog .info-card--large { grid-column: 1; grid-row: 1 / -1; } .main .catalog .info-card__tags { display: flex; flex-wrap: wrap; gap: calc(10 / 1920 * 100vw); margin-bottom: calc(40 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .info-tag { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.1; color: var(--color-text); background: var(--color-neutral-200); padding: calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw); border-radius: var(--radius-full); box-sizing: border-box; } .main .catalog .info-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(40 / 1920 * 100vw); line-height: 1.1; color: var(--color-text); margin: 0 0 calc(20 / 1920 * 100vw); letter-spacing: 0; box-sizing: border-box; } .main .catalog .info-card__text { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-text); margin: 0 0 calc(40 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .info-card__btn { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: var(--color-white); background-color: #004156; padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); border-radius: var(--radius-md); text-decoration: none; border: none; transition: background-color 0.2s; box-sizing: border-box; width: max-content; } .main .catalog .info-card__btn:hover { background-color: #005570; color: var(--color-white); } .main .catalog .info-card__img { margin-top: auto; width: 100%; max-height: none; height: auto; object-fit: contain; border-radius: 0; display: block; box-sizing: border-box; } .main .catalog .products__tabs { display: flex; flex-wrap: wrap; gap: calc(26 / 1920 * 100vw); list-style: none; margin: 0 0 calc(100 / 1920 * 100vw); padding: 0; box-sizing: border-box; justify-content: center; } .main .catalog .tabs-list__item { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); color: var(--color-neutral-400); padding: calc(10 / 1920 * 100vw) calc(12 / 1920 * 100vw); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: calc(-3 / 1920 * 100vw); transition: color 0.2s; box-sizing: border-box; } .main .catalog .tabs-list__item:hover, .main .catalog .tabs-list__item.is-active { color: var(--color-orange); font-weight: var(--font-weight-medium); } .main .catalog .tabs-list__item.is-active { border-bottom-color: var(--color-orange); } .main .catalog .products__content { position: relative; box-sizing: border-box; } .main .catalog .tab-content { display: none; } .main .catalog .tab-content.is-active { display: block; } .main .catalog .products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 / 1920 * 100vw); margin-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .product-item { font-family: var(--font-family-base); background-color: transparent; border-radius: 0; overflow: visible; box-shadow: none; transition: box-shadow 0.2s; box-sizing: border-box; } .main .catalog .product-item:hover { box-shadow: none; } .main .catalog .product-item__image { display: block; position: relative; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; background: #d9d9d9; margin-bottom: calc(60 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .product-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); overflow: hidden; } .main .catalog .product-item__add-cart { position: absolute; bottom: calc(-40 / 1920 * 100vw); right: calc(40 / 1920 * 100vw); width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw); background-color: var(--color-orange); border: none; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; box-sizing: border-box; } .main .catalog .product-item__add-cart svg { width: calc(26 / 1920 * 100vw); height: calc(31 / 1920 * 100vw); } .main .catalog .product-item__add-cart:hover { background-color: var(--color-orange-hover); } .main .catalog .product-item__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; margin: 0 0 calc(20 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .product-item__title a { color: var(--color-text); text-decoration: none; } .main .catalog .product-item__title a:hover { color: var(--color-orange); } .main .catalog .product-item__desc { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0 0 calc(20 / 1920 * 100vw); box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .main .catalog .product-item__price { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); line-height: 1.1; padding: 0; display: flex; align-items: baseline; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .product-item__price .price-current { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .main .catalog .product-item__price .price-old { text-decoration: line-through; color: var(--color-neutral-400); font-weight: var(--font-weight-normal); font-size: var(--font-size-xl); } .main .catalog .products__footer { display: flex; justify-content: center; align-items: center; margin-top: calc(60 / 1920 * 100vw); box-sizing: border-box; } .main .catalog .catalog__more { display: inline-flex; align-items: center; justify-content: center; gap: calc(16 / 1920 * 100vw); padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: var(--color-white); background-color: var(--color-primary-hover); border: none; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.2s, transform 0.2s; box-sizing: border-box; } .main .catalog .catalog__more svg { width: calc(40 / 1920 * 100vw); height: calc(40 / 1920 * 100vw); flex-shrink: 0; } .main .catalog .catalog__more:hover { background-color: #fd9b82; color: var(--color-white); transform: translateY(-2px); } .main .faq { background-color: var(--color-neutral-200); padding-top: calc(140 / 1920 * 100vw); padding-bottom: calc(140 / 1920 * 100vw); box-sizing: border-box; } .main .faq .faq__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; box-sizing: border-box; } .main .faq .faq__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-3xl); line-height: 1; letter-spacing: 0; color: var(--color-text); text-align: left; margin: 0 0 calc(60 / 1920 * 100vw); box-sizing: border-box; } .main .faq .faq__list { display: flex; flex-direction: column; gap: calc(32 / 1920 * 100vw); box-sizing: border-box; } .main .faq .faq__item { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; box-sizing: border-box; } .main .faq .faq__question { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(40 / 1920 * 100vw); padding: calc(60 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(40 / 1920 * 100vw); line-height: 1.1; color: var(--color-text); text-align: left; background: none; border: none; cursor: pointer; transition: color 0.2s; box-sizing: border-box; } .main .faq .faq__question:hover { color: var(--color-orange); } .main .faq .faq__item.is-open .faq__question { color: var(--color-orange); } .main .faq .faq__icon { flex-shrink: 0; width: calc(40 / 1920 * 100vw); height: calc(44 / 1920 * 100vw); transition: transform 0.2s; color: currentColor; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .main .faq .faq__item.is-open .faq__icon { transform: rotate(180deg); } .main .faq .faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; box-sizing: border-box; } .main .faq .faq__item.is-open .faq__answer { max-height: calc(1000 / 1920 * 100vw); } .main .faq .faq__answer-content { padding: 0 calc(60 / 1920 * 100vw) calc(60 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-text); margin: 0; box-sizing: border-box; } .main .faq .faq__answer-content p { margin: 0; } .main .faq .faq__answer-content p:last-child { margin-bottom: 0; } .feedback { background-color: var(--color-dark); background-image: linear-gradient(rgba(22, 40, 64, 0.75), rgba(22, 40, 64, 0.75)); background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: calc(106 / 1920 * 100vw); padding-bottom: calc(109 / 1920 * 100vw); box-sizing: border-box; } .feedback .feedback__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; } .feedback .feedback-form { width: 100%; max-width: calc(912 / 1920 * 100vw); margin: 0; padding: calc(80 / 1920 * 100vw) calc(60 / 1920 * 100vw); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(150, 150, 150, 0.24); border-radius: var(--radius-lg); box-sizing: border-box; } .feedback .feedback-form__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(40 / 1920 * 100vw); line-height: 1.1; letter-spacing: 0; color: var(--color-white); margin: 0 0 calc(20 / 1920 * 100vw); text-align: center; box-sizing: border-box; } .feedback .feedback-form__subtitle { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; letter-spacing: 0; color: var(--color-white); margin: 0 0 calc(60 / 1920 * 100vw); text-align: center; box-sizing: border-box; } .feedback .feedback-form__fields form, .feedback .feedback-form__fields .wpcf7-form { display: flex; flex-direction: column; gap: calc(18 / 1920 * 100vw); box-sizing: border-box; position: relative; } .feedback .feedback-form__row { display: flex; gap: calc(18 / 1920 * 100vw); box-sizing: border-box; } .feedback .feedback-form__row--half { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 / 1920 * 100vw); } .feedback .feedback-form__row .wpcf7-form-control-wrap { flex: 1; box-sizing: border-box; } .feedback .feedback-form__select-wrapper { flex: 1; box-sizing: border-box; } .feedback .feedback-form__submit-wrapper { display: flex; justify-content: center; align-items: center; box-sizing: border-box; margin-top: calc(42 / 1920 * 100vw); } .feedback .feedback-form__input, .feedback .feedback-form__select { width: 100%; padding: calc(20 / 1920 * 100vw) calc(24 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; letter-spacing: 0; color: var(--color-white); background: rgba(243, 243, 243, 0.1); border: 1px solid rgba(150, 150, 150, 0.24); border-radius: var(--radius-md); margin: 0; box-sizing: border-box; } .feedback .feedback-form__input::placeholder { color: rgba(255, 255, 255, 0.6); } .feedback .feedback-form__select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; 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='M6 9L12 15L18 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; background-size: 24px; padding-right: calc(54 / 1920 * 100vw); } .feedback .feedback-form__select option { background: var(--color-dark); color: var(--color-white); } .feedback .feedback-form__input.wpcf7-not-valid, .feedback .feedback-form__select.wpcf7-not-valid { border-color: #dc3232; } .feedback .feedback-form__input.wpcf7-not-valid::placeholder, .feedback .feedback-form__select.wpcf7-not-valid::placeholder { color: #dc3232; } .feedback .wpcf7-not-valid-tip { display: none; } .feedback .feedback-form__submit-wrapper .wpcf7-submit, .feedback .feedback-form__submit-wrapper .btn-orange { display: inline-block; padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; letter-spacing: 0; color: var(--color-white); background-color: var(--color-primary); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s; box-shadow: none; box-sizing: border-box; } .feedback .feedback-form__submit-wrapper .wpcf7-submit:hover, .feedback .feedback-form__submit-wrapper .btn-orange:hover { background-color: #fd9b82; color: var(--color-white); } .feedback .feedback-form__submit-wrapper .wpcf7-spinner { display: none; } .feedback .wpcf7 form .wpcf7-response-output { margin: 0; padding: calc(20 / 1920 * 100vw) calc(24 / 1920 * 100vw); border: none; border-radius: var(--radius-md); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; letter-spacing: 0; text-align: center; /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ width: 100%; height: auto; color: var(--color-neutral-900); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* animation: fade 4s cubic-bezier(1, 0, 1, 1) forwards; */ } /* @keyframes fade { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } */ .feedback .wpcf7 form.sent .wpcf7-response-output { background: #46b44f; /* animation: fade 10s cubic-bezier(1, 0, 1, 1) forwards; */ } .feedback .wpcf7 form.failed .wpcf7-response-output, .feedback .wpcf7 form.aborted .wpcf7-response-output { background: #dc3232; /* animation: fade 5s cubic-bezier(1, 0, 1, 1) forwards; */ } .feedback .wpcf7 form.spam .wpcf7-response-output { background: #f56e28; /* animation: fade 5s cubic-bezier(1, 0, 1, 1) forwards; */ } .feedback .wpcf7 form.invalid .wpcf7-response-output, .feedback .wpcf7 form.unaccepted .wpcf7-response-output, .feedback .wpcf7 form.payment-required .wpcf7-response-output { background: #ffb900; /* animation: fade 5s cubic-bezier(1, 0, 1, 1) forwards; */ } .main .promo-geo { background-color: var(--color-white); padding-top: calc(64 / 1920 * 100vw); padding-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; overflow: hidden; } .main .promo-geo .promo-geo__container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; gap: calc(32 / 1920 * 100vw); box-sizing: border-box; } .main .promo-geo .promo-geo__content { width: 80%; box-sizing: border-box; z-index: 1; } .main .promo-geo .promo-geo__title { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-5xl); line-height: 1; color: var(--color-text); text-align: center; margin: 0; letter-spacing: 0; box-sizing: border-box; } .main .promo-geo .promo-geo__title span { color: var(--color-primary); } .main .promo-geo .promo-geo__map-wrapper { position: relative; width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-top: calc(-300 / 1920 * 100vw); box-sizing: border-box; } .main .promo-geo .promo-geo__map-bg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); vertical-align: middle; box-sizing: border-box; } .main .promo-geo .promo-geo__main-container { position: relative; display: flex; justify-content: center; align-items: center; margin-top: calc(16 / 1920 * 100vw); width: 100%; max-width: calc(1562 / 1920 * 100vw); margin-top: calc(-1100 / 1920 * 100vw); box-sizing: border-box; z-index: 1; } .main .promo-geo .promo-geo__main-container img { max-width: 100%; height: auto; display: block; box-sizing: border-box; } .main .promo-geo .promo-geo__rope { display: none; } .news-page .hero.hero--small { min-height: calc(415 / 1920 * 100vw); padding-top: 0; padding-bottom: 0; position: relative; box-sizing: border-box; } .news-page .hero.hero.hero--small.hero--news, .services-page .hero.hero.hero--small.hero--services, .catalog-page .hero.hero.hero--small.hero--catalog, .about-page .hero.hero.hero--small.hero--about { background-size: cover; background-position: 70% 50%; background-repeat: no-repeat; } .news-page .hero.hero--news .container { padding-left: 0; padding-right: 0; position: relative; } .news-page .hero.hero--news .hero__title { position: absolute; left: 50%; top: calc(215 / 1920 * 100vw); transform: translateX(-50%); font-family: var(--font-family-base); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); margin: 0; white-space: nowrap; box-sizing: border-box; } .news-page .news { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .news-page .news .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: calc(100 / 1920 * 100vw); box-sizing: border-box; } .news-page .news__top-bar { margin-bottom: 0; box-sizing: border-box; } .news-page .news__tabs.tabs-list { display: flex; flex-wrap: nowrap; gap: calc(26 / 1920 * 100vw); list-style: none; margin: 0; padding: 0; border-bottom: none; box-sizing: border-box; } .news-page .news__tabs .tabs-list__item { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: var(--font-size-lg); line-height: 1; color: var(--color-neutral-400); padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: 0; transition: color 0.2s, border-color 0.2s; box-sizing: border-box; } .news-page .news__tabs .tabs-list__item:hover { color: var(--color-primary); } .news-page .news__tabs .tabs-list__item.is-active { font-weight: var(--font-weight-medium); color: var(--color-primary); border-bottom-color: var(--color-primary); } .news-page .news__grid { display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ gap: calc(100 / 1920 * 100vw) calc(36 / 1920 * 100vw); margin-bottom: 0; box-sizing: border-box; } .news-page .news-card { background-color: transparent; border-radius: 0; overflow: visible; box-shadow: none; transition: none; display: flex; flex-direction: column; gap: calc(40 / 1920 * 100vw); width: calc(500 / 1920 * 100vw); flex-shrink: 0; box-sizing: border-box; } .news-page .news-card:hover { box-shadow: none; } .news-page .news-card__image { display: block; border-radius: var(--radius-lg); overflow: hidden; height: calc(376 / 1920 * 100vw); background: #e2e8f0; box-sizing: border-box; } .news-page .news-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-page .news-card__image .placeholder-img { width: 100%; height: 100%; background-color: #e2e8f0; display: flex; align-items: center; justify-content: center; } .news-page .news-card__content { padding: 0; display: flex; flex-direction: column; gap: calc(20 / 1920 * 100vw); flex: 0; box-sizing: border-box; } .news-page .news-card__date-badge { background-color: var(--color-neutral-200); display: inline-flex; align-items: center; padding: calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw); border-radius: var(--radius-full); margin: 0; align-self: flex-start; box-sizing: border-box; } .news-page .news-card__date { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.1; color: var(--color-neutral-900); box-sizing: border-box; } .news-page .news-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; height: calc(110 / 1920 * 100vw); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; box-sizing: border-box; } .news-page .news-card__title a { color: inherit; text-decoration: none; } .news-page .news-card__title a:hover { color: var(--color-primary); } .news-page .news-card__excerpt { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0; height: calc(103 / 1920 * 100vw); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; box-sizing: border-box; } .news-page .news__empty { width: 100%; text-align: center; padding: calc(60 / 1920 * 100vw) calc(32 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0; box-sizing: border-box; } .services-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .services-page .hero.hero--small { min-height: calc(415 / 1920 * 100vw); padding-top: 0; padding-bottom: 0; position: relative; box-sizing: border-box; } .services-page .hero.hero--services .container { padding-left: 0; padding-right: 0; position: relative; } .services-page .hero.hero--services .hero__title { position: absolute; left: 50%; top: calc(215 / 1920 * 100vw); transform: translateX(-50%); font-family: var(--font-family-base); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); margin: 0; white-space: nowrap; box-sizing: border-box; } .services-page .services-grid { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .services-page .services-grid .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .services-page .services-grid__wrapper { display: flex; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .services-page .service-card { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); width: calc(510.667 / 1920 * 100vw); height: calc(300 / 1920 * 100vw); flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; transition: box-shadow 0.2s; box-sizing: border-box; } .services-page .service-card:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .services-page .service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(30 / 1920 * 100vw); width: 100%; margin-bottom: 0; box-sizing: border-box; } .services-page .service-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; flex: 1 1 0; min-width: 0; box-sizing: border-box; } .services-page .service-card__icon { flex-shrink: 0; width: calc(80 / 1920 * 100vw); height: auto; max-height: calc(80 / 1920 * 100vw); object-fit: contain; display: block; box-sizing: border-box; } .services-page .service-card__more { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1; color: var(--color-primary-hover); text-decoration: none; margin-top: 0; transition: color 0.2s; box-sizing: border-box; } .services-page .service-card__more:hover { color: var(--color-primary); } .services-page .service-card__more span { display: inline-block; font-size: var(--font-size-base); } .service-detail { background-color: var(--color-white); padding-bottom: 0; box-sizing: border-box; } .service-detail .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .service-detail .container--narrow { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: calc(156 / 1920 * 100vw); box-sizing: border-box; } .service-detail .container--narrow.section-padding { padding-top: 0; padding-bottom: calc(156 / 1920 * 100vw); } .service-detail .hero.hero--small { min-height: auto; padding-top: calc(185 / 1920 * 100vw); padding-bottom: 0; background-color: var(--color-white); background-image: none; box-sizing: border-box; } .service-detail .hero.hero--service .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .service-detail .hero .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: calc(26 / 1920 * 100vw); margin: 0 0 calc(80 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1; color: var(--color-neutral-400); box-sizing: border-box; } .service-detail .hero .breadcrumbs a, .service-detail .hero .breadcrumbs span { padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); white-space: nowrap; box-sizing: border-box; } .service-detail .hero .breadcrumbs__link { color: var(--color-neutral-400); text-decoration: none; } .service-detail .hero .breadcrumbs__link:hover { color: var(--color-primary); text-decoration: none; } .service-detail .hero .breadcrumbs__separator { color: var(--color-neutral-400); } .service-detail .hero .breadcrumbs__current { color: var(--color-primary); font-weight: var(--font-weight-medium); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .service-detail .hero .hero__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; letter-spacing: 0; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); box-sizing: border-box; margin-right: calc(133 / 1920 * 100vw); } .service-detail .hero .hero__text { border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; padding: calc(40 / 1920 * 100vw) 0; margin: 0; font-family: var(--font-family-base); font-size: calc(28 / 1920 * 100vw); font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--color-neutral-900); box-sizing: border-box; margin-right: calc(133 / 1920 * 100vw); } .service-detail .hero .hero__text p { margin: 0; } .service-detail .hero .hero__text p:last-child { margin-bottom: 0; } .service-detail .service-article { padding-top: calc(80 / 1920 * 100vw); max-width: calc(1572 / 1920 * 100vw); margin-left: 0; margin-right: auto; box-sizing: border-box; } .service-detail .service-article__section { display: flex; flex-direction: column; gap: calc(30 / 1920 * 100vw); margin-bottom: calc(80 / 1920 * 100vw); padding-right: calc(133 / 1920 * 100vw); box-sizing: border-box; } .service-detail .service-article__section:last-child { margin-bottom: 0; } .service-detail .service-article__section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .service-detail .service-article__section-content, .service-detail .service-article__content, .service-detail .service-article .entry-content { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.5; color: var(--color-neutral-900); box-sizing: border-box; } .service-detail .service-article__section-content p, .service-detail .service-article__content p, .service-detail .service-article .entry-content p { margin: 0 0 calc(40 / 1920 * 100vw); } .service-detail .service-article__section-content p:last-child, .service-detail .service-article__content p:last-child, .service-detail .service-article .entry-content p:last-child { margin-bottom: 0; } .service-detail .service-article__section-content ul, .service-detail .service-article__content ul, .service-detail .service-article .entry-content ul { margin: 0 0 calc(40 / 1920 * 100vw); padding-left: 0; list-style: disc; } .service-detail .service-article__section-content li, .service-detail .service-article__content li, .service-detail .service-article .entry-content li { margin-bottom: 0; margin-left: calc(36 / 1920 * 100vw); } .service-detail .service-article__section-image { margin: calc(32 / 1920 * 100vw) 0; border-radius: var(--radius-sm); overflow: hidden; box-sizing: border-box; } .service-detail .service-article__section-image img { width: 100%; height: auto; display: block; } .service-detail .service-steps { margin-top: calc(80 / 1920 * 100vw); max-width: calc(1572 / 1920 * 100vw); margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } .service-detail .service-steps__main-title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .service-detail .service-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .service-detail .step-card { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); display: flex; flex-direction: column; gap: calc(20 / 1920 * 100vw); flex: 1 1 0; min-width: 0; height: 100%; transition: box-shadow 0.2s; box-sizing: border-box; } .service-detail .step-card:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .service-detail .step-card__number { display: flex; align-items: center; justify-content: center; width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw); background-color: var(--color-primary); color: var(--color-white); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; text-align: center; flex-shrink: 0; box-sizing: border-box; } .service-detail .step-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .service-detail .step-card__text { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .service-detail .step-card__text p { margin: 0; } .service-detail .step-card__text p:last-child { margin-bottom: 0; } .service-detail .service-note { display: flex; align-items: flex-start; gap: calc(30 / 1920 * 100vw); margin: calc(80 / 1920 * 100vw) 0 0; padding: 0; max-width: calc(1572 / 1920 * 100vw); padding-right: calc(133 / 1920 * 100vw); background-color: transparent; border: none; border-radius: 0; font-family: var(--font-family-base); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--color-neutral-900); box-sizing: border-box; } .service-detail .service-note::before { content: '"'; flex-shrink: 0; width: calc(89 / 1920 * 100vw); height: calc(149 / 1920 * 100vw); overflow: hidden; font-size: calc(200 / 1920 * 100vw); line-height: 0.76; color: #f3f3f3; } .service-detail .service-note p { margin: 0; flex: 1 1 0; min-width: 0; } .service-detail .related-services { background-color: var(--color-white); padding-top: calc(156 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .service-detail .related-services .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .service-detail .related-services .section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(60 / 1920 * 100vw); box-sizing: border-box; } .service-detail .related-services .services-grid__wrapper { display: flex; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .service-detail .related-services .service-card, .service-detail .related-services .service-card--small { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); width: calc(510.667 / 1920 * 100vw); height: calc(300 / 1920 * 100vw); flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; transition: box-shadow 0.2s; box-sizing: border-box; } .service-detail .related-services .service-card:hover, .service-detail .related-services .service-card--small:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .service-detail .related-services .service-card__top, .service-detail .related-services .service-card--small .service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(30 / 1920 * 100vw); width: 100%; margin-bottom: 0; box-sizing: border-box; } .service-detail .related-services .service-card__title, .service-detail .related-services .service-card--small .service-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; flex: 1 1 0; min-width: 0; box-sizing: border-box; } .service-detail .related-services .service-card__icon { flex-shrink: 0; width: calc(80 / 1920 * 100vw); height: auto; max-height: calc(80 / 1920 * 100vw); object-fit: contain; display: block; box-sizing: border-box; } .service-detail .related-services .service-card__more, .service-detail .related-services .service-card--small .service-card__more { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1; color: var(--color-primary-hover); text-decoration: none; margin-top: 0; transition: color 0.2s; box-sizing: border-box; } .service-detail .related-services .service-card__more:hover, .service-detail .related-services .service-card--small .service-card__more:hover { color: var(--color-primary); } .service-detail .related-services .service-card__more span { display: inline-block; font-size: var(--font-size-base); } .about-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .about-page .container--narrow { max-width: calc(900 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .about-page .hero.hero--small { min-height: calc(415 / 1920 * 100vw); padding-top: 0; padding-bottom: 0; position: relative; box-sizing: border-box; } .about-page .hero.hero--about .container { padding-left: 0; padding-right: 0; position: relative; } .about-page .hero.hero--about .hero__title { position: absolute; left: 50%; top: calc(215 / 1920 * 100vw); transform: translateX(-50%); font-family: var(--font-family-base); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); margin: 0; white-space: nowrap; box-sizing: border-box; } .about-page .about-tabs-nav { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); box-sizing: border-box; } .about-page .about-tabs-nav .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .about-page .about-tabs-nav .tabs-list { display: flex; flex-wrap: wrap; gap: calc(26 / 1920 * 100vw); list-style: none; margin: 0; padding: 0; box-sizing: border-box; } .about-page .about-tabs-nav .tabs-list__item { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: var(--font-size-lg); line-height: 1; color: var(--color-neutral-400); padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); border-bottom: 3px solid transparent; transition: color 0.2s, border-bottom-color 0.2s; box-sizing: border-box; } .about-page .about-tabs-nav .tabs-list__item a { color: inherit; text-decoration: none; } .about-page .about-tabs-nav .tabs-list__item:hover { color: var(--color-primary); } .about-page .about-tabs-nav .tabs-list__item.is-active { font-weight: var(--font-weight-medium); color: var(--color-primary); border-bottom-color: var(--color-primary); } .about-page .about-tab-content { background-color: var(--color-white); padding-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; } .about-page .about-tab-content .section-padding { padding-top: 0; padding-bottom: 0; } .about-page .about-tab-content .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding-top: calc(80 / 1920 * 100vw); } .about-page .about-tab-content .container--narrow { padding-left: 0; padding-right: calc(133 / 1920 * 100vw); } .about-page .about-title-large { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); box-sizing: border-box; } .about-page .about-intro .entry-content, .about-page .about-intro .about-subtitle+.entry-content, .about-page .clients-description.entry-content, .about-page .coop-text.entry-content { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.5; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .about-page .about-intro .entry-content p, .about-page .clients-description.entry-content p, .about-page .coop-text.entry-content p { margin: 0 0 calc(40 / 1920 * 100vw); } .about-page .about-intro .entry-content p:last-child, .about-page .clients-description.entry-content p:last-child, .about-page .coop-text.entry-content p:last-child { margin-bottom: 0; } .about-page .about-main-img { width: 100%; height: auto; display: block; margin: calc(32 / 1920 * 100vw) 0; border-radius: var(--radius-sm); } .about-page .about-subtitle { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1.2; color: var(--color-text); margin: calc(32 / 1920 * 100vw) 0 calc(24 / 1920 * 100vw); box-sizing: border-box; } .about-page .about-features .container { padding-top: calc(80 / 1920 * 100vw); } .about-page .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 / 1920 * 100vw); box-sizing: border-box; } .about-page .feature-card { background-color: var(--color-white); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: calc(24 / 1920 * 100vw); box-sizing: border-box; } .about-page .feature-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.3; color: var(--color-text); margin: 0 0 calc(12 / 1920 * 100vw); box-sizing: border-box; } .about-page .feature-card__text { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-text-muted); margin: 0; box-sizing: border-box; } .about-page .feature-card__text p { margin: 0 0 calc(8 / 1920 * 100vw); } .about-page .feature-card__text p:last-child { margin-bottom: 0; } .about-page .team-section { padding-top: calc(80 / 1920 * 100vw); box-sizing: border-box; } .about-page .team-section .section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(60 / 1920 * 100vw); box-sizing: border-box; } .about-page .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(100 / 1920 * 100vw) calc(12 / 1920 * 100vw); box-sizing: border-box; } .about-page .team-card { display: flex; flex-direction: column; background-color: transparent; border-radius: 0; box-shadow: none; overflow: visible; text-align: left; padding: 0; box-sizing: border-box; } .about-page .team-card__img { width: 100%; height: calc(376 / 1920 * 100vw); overflow: hidden; border-radius: var(--radius-lg); background: #e2e8f0; flex-shrink: 0; margin-bottom: calc(40 / 1920 * 100vw); } .about-page .team-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-page .team-card__name { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(20 / 1920 * 100vw) 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .about-page .team-card__pos { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0 0 calc(20 / 1920 * 100vw) 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .about-page .team-card__socials { display: flex; align-items: center; justify-content: flex-start; gap: calc(10 / 1920 * 100vw); flex-wrap: wrap; box-sizing: border-box; } .about-page .team-card__socials a { display: flex; align-items: center; justify-content: center; width: calc(40 / 1920 * 100vw); height: calc(40 / 1920 * 100vw); border-radius: calc(285.6 / 1920 * 100vw); background-color: var(--color-primary-hover); color: var(--color-white); text-decoration: none; transition: background-color 0.2s; flex-shrink: 0; box-sizing: border-box; } .about-page .team-card__socials a:hover { background-color: #fd9b82; } .about-page .team-card__socials a svg { width: calc(20 / 1920 * 100vw); height: calc(20 / 1920 * 100vw); flex-shrink: 0; } .about-page .team-card__socials a[aria-label="Telegram"] svg { width: calc(24 / 1920 * 100vw); height: calc(24 / 1920 * 100vw); } .about-page .team-card__socials a i { font-size: var(--font-size-base); color: var(--color-white); } .about-page .requisites-section { padding-top: calc(80 / 1920 * 100vw); box-sizing: border-box; } .about-page .requisites-section .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .about-page .requisites-section .section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(60 / 1920 * 100vw); box-sizing: border-box; } .about-page .req-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(20 / 1920 * 100vw); margin-bottom: calc(40 / 1920 * 100vw); box-sizing: border-box; } .about-page .req-card { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); display: flex; flex-direction: column; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .about-page .req-card:nth-child(1), .about-page .req-card:nth-child(2) { grid-column: span 2; } .about-page .req-card:nth-child(3), .about-page .req-card:nth-child(4) { grid-column: span 1; } .about-page .req-card:nth-child(5), .about-page .req-card:nth-child(6) { grid-column: span 2; } .about-page .req-card:nth-child(7) { grid-column: span 2; } .about-page .req-card__label { font-family: var(--font-family-base); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: 1.1; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .about-page .req-card__val { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .about-page .req-footer { display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; } .about-page .req-footer .btn-orange { display: inline-flex; align-items: center; justify-content: center; gap: calc(16 / 1920 * 100vw); padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: var(--color-white); background-color: var(--color-primary-hover); border: none; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.2s; box-sizing: border-box; } .about-page .req-footer .btn-orange:hover { background-color: #fd9b82; color: var(--color-white); } .about-page .btn-orange.btn-wide { display: inline-flex; align-items: center; justify-content: center; gap: calc(16 / 1920 * 100vw); padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: var(--color-white); background-color: var(--color-primary-hover); border: none; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.2s; box-sizing: border-box; } .about-page .btn-orange.btn-wide:hover { background-color: #fd9b82; color: var(--color-white); } .about-page .clients-intro { display: flex; flex-direction: column; gap: calc(30 / 1920 * 100vw); margin-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; } .about-page .clients-intro .about-title-large { margin-bottom: 0; } .about-page .clients-logos { border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; padding: calc(5 / 1920 * 100vw) 0; margin: calc(80 / 1920 * 100vw) 0; box-sizing: border-box; } .about-page .clients-logos .swiper-wrapper { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .about-page .client-logo-item { display: flex; align-items: center; justify-content: center; height: calc(202 / 1920 * 100vw); padding: 0; background-color: transparent; border-radius: 0; box-shadow: none; min-height: auto; box-sizing: border-box; } .about-page .client-logo-item img { max-width: 100%; max-height: calc(202 / 1920 * 100vw); width: auto; height: auto; object-fit: contain; } .about-page .bottom-services { background-color: var(--color-white); padding-top: calc(80 / 1920 * 100vw); padding-bottom: 0; box-sizing: border-box; } .about-page .bottom-services .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .about-page .bottom-services .services-grid__wrapper { display: flex; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .about-page .bottom-services .service-card, .about-page .bottom-services .service-card--small { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); width: calc(510.667 / 1920 * 100vw); height: calc(300 / 1920 * 100vw); flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; transition: box-shadow 0.2s; box-sizing: border-box; } .about-page .bottom-services .service-card:hover, .about-page .bottom-services .service-card--small:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .about-page .bottom-services .service-card__top, .about-page .bottom-services .service-card--small .service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(30 / 1920 * 100vw); width: 100%; margin-bottom: 0; box-sizing: border-box; } .about-page .bottom-services .service-card__title, .about-page .bottom-services .service-card--small .service-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; flex: 1 1 0; min-width: 0; box-sizing: border-box; } .about-page .bottom-services .service-card__icon { flex-shrink: 0; width: calc(80 / 1920 * 100vw); height: auto; max-height: calc(80 / 1920 * 100vw); object-fit: contain; display: block; box-sizing: border-box; } .about-page .bottom-services .service-card__more { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1; color: var(--color-primary-hover); text-decoration: none; margin-top: 0; transition: color 0.2s; box-sizing: border-box; } .about-page .bottom-services .service-card__more:hover { color: var(--color-primary); } .about-page .bottom-services .service-card__more span { display: inline-block; font-size: var(--font-size-base); } .about-page .coop-content { display: flex; flex-direction: column; gap: calc(40 / 1920 * 100vw); box-sizing: border-box; } .about-page .coop-content .about-title-large { margin-bottom: 0; } .about-page .coop-text.entry-content { margin: 0; } .about-page .coop-actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .about-page .coop-actions .btn-orange { display: inline-flex; align-items: center; justify-content: center; padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: var(--color-white); background-color: var(--color-primary-hover); border: none; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.2s; box-sizing: border-box; } .about-page .coop-actions .btn-orange:hover { background-color: #fd9b82; color: var(--color-white); } .about-page .coop-actions .btn-dark-blue { display: inline-flex; align-items: center; justify-content: center; padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: var(--color-white); background-color: #004156; border: none; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.2s; box-sizing: border-box; } .about-page .coop-actions .btn-dark-blue:hover { background-color: #005570; color: var(--color-white); } .delivery-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .delivery-page .container--narrow { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: calc(133 / 1920 * 100vw); padding-top: calc(80 / 1920 * 100vw); padding-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .hero.hero--small { min-height: auto; padding-top: calc(185 / 1920 * 100vw); padding-bottom: 0; background-color: var(--color-white); background-image: none; } .delivery-page .hero.hero--delivery .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .delivery-page .hero .hero__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .hero .hero__text { font-family: var(--font-family-base); font-size: calc(28 / 1920 * 100vw); font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--color-neutral-900); margin: 0; border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; padding: calc(40 / 1920 * 100vw) 0; box-sizing: border-box; } .delivery-page .hero .hero__text p { margin: 0; } .delivery-page .hero .hero__text p:last-child { margin-bottom: 0; } .delivery-page .delivery-steps-section { margin-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .delivery-subtitle { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(20 / 1920 * 100vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .delivery-page .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20 / 1920 * 100vw); width: calc(1572 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .delivery-steps-section .step-card { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); display: flex; flex-direction: column; transition: box-shadow 0.2s; box-sizing: border-box; } .delivery-page .delivery-steps-section .step-card>* { margin: 0; } .delivery-page .delivery-steps-section .step-card>*:not(:last-child) { margin-bottom: calc(20 / 1920 * 100vw); } .delivery-page .delivery-steps-section .step-card:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .delivery-page .delivery-steps-section .step-card__number { display: flex; align-items: center; justify-content: center; width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw); background-color: var(--color-primary); color: var(--color-white); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; flex-shrink: 0; box-sizing: border-box; } .delivery-page .delivery-steps-section .step-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .delivery-page .delivery-steps-section .step-card__text { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .delivery-page .delivery-steps-section .step-card__text p { margin: 0; } .delivery-page .delivery-info-blocks { display: flex; flex-direction: column; gap: calc(80 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .info-block { box-sizing: border-box; } .delivery-page .info-block__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .info-block__content.entry-content { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.5; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .delivery-page .info-block__content p { margin: 0 0 calc(40 / 1920 * 100vw); } .delivery-page .info-block__content p:last-child { margin-bottom: 0; } .delivery-page .info-block__content ul { margin: 0 0 calc(40 / 1920 * 100vw); padding-left: 0; list-style: none; } .delivery-page .info-block__content li { margin-bottom: 0; margin-left: calc(36 / 1920 * 100vw); position: relative; } .delivery-page .info-block__content li::before { content: '•'; position: absolute; left: calc(-20 / 1920 * 100vw); color: var(--color-neutral-900); } .delivery-page .info-block__content h4, .delivery-page .info-block__content strong { font-weight: var(--font-weight-semibold); color: var(--color-neutral-900); } .delivery-page .related-services { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .related-services .container { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; } .delivery-page .related-services .services-grid__wrapper { display: flex; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .delivery-page .related-services .service-card, .delivery-page .related-services .service-card--small { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); width: calc(510.667 / 1920 * 100vw); height: calc(300 / 1920 * 100vw); flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; transition: box-shadow 0.2s; box-sizing: border-box; } .delivery-page .related-services .service-card:hover, .delivery-page .related-services .service-card--small:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .delivery-page .related-services .service-card__top, .delivery-page .related-services .service-card--small .service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(30 / 1920 * 100vw); width: 100%; margin-bottom: 0; box-sizing: border-box; } .delivery-page .related-services .service-card__title, .delivery-page .related-services .service-card--small .service-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; flex: 1 1 0; min-width: 0; box-sizing: border-box; } .delivery-page .related-services .service-card__icon { flex-shrink: 0; width: calc(80 / 1920 * 100vw); height: auto; max-height: calc(80 / 1920 * 100vw); object-fit: contain; display: block; box-sizing: border-box; } .delivery-page .related-services .service-card__more { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1; color: var(--color-primary-hover); text-decoration: none; margin-top: 0; transition: color 0.2s; box-sizing: border-box; } .delivery-page .related-services .service-card__more:hover { color: var(--color-primary); } .delivery-page .related-services .service-card__more span { display: inline-block; font-size: var(--font-size-base); } .catalog-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .catalog-page .hero.hero--small { min-height: calc(415 / 1920 * 100vw); padding-top: 0; padding-bottom: 0; position: relative; box-sizing: border-box; } .catalog-page .hero.hero--catalog .container { padding-left: 0; padding-right: 0; position: relative; } .catalog-page .hero.hero--catalog .hero__title { position: absolute; left: 50%; top: calc(215 / 1920 * 100vw); transform: translateX(-50%); font-family: var(--font-family-base); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); margin: 0; white-space: nowrap; box-sizing: border-box; } .catalog-page .catalog { background-color: var(--color-white); padding-top: calc(64 / 1920 * 100vw); padding-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; } .catalog-page .catalog__top-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(16 / 1920 * 100vw); margin-bottom: calc(100 / 1920 * 100vw); padding-bottom: 0; border-bottom: none; box-sizing: border-box; } .catalog-page .catalog__tabs.tabs-list { display: flex; flex-wrap: wrap; gap: calc(26 / 1920 * 100vw); list-style: none; margin: 0; padding: 0; border-bottom: none; box-sizing: border-box; } .catalog-page .catalog__tabs .tabs-list__item, .products__tabs .tabs-list__item, .news__tabs .tabs-list__item { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: var(--font-size-lg); line-height: 1; color: var(--color-neutral-400); padding: calc(10 / 1920 * 100vw) calc(12 / 1920 * 100vw) calc(12 / 1920 * 100vw); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: 0; transition: color 0.2s; box-sizing: border-box; } .catalog-page .catalog__tabs .tabs-list__item a, .products__tabs .tabs-list__item a, .news__tabs .tabs-list__item a { color: inherit; text-decoration: none; } .catalog-page .catalog__tabs .tabs-list__item:hover, .products__tabs .tabs-list__item:hover, .news__tabs .tabs-list__item:hover { color: var(--color-primary); } .catalog-page .catalog__tabs .tabs-list__item.is-active, .products__tabs .tabs-list__item.is-active, .news__tabs .tabs-list__item.is-active { color: var(--color-primary); font-weight: var(--font-weight-medium); border-bottom-color: var(--color-primary); } .catalog-page .catalog__controls { display: flex; align-items: center; gap: calc(12 / 1920 * 100vw); flex-shrink: 0; box-sizing: border-box; } .catalog-page .catalog__city.select-custom { position: relative; } .catalog-page .catalog__city select { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-secondary); background-color: var(--color-neutral-200); border: none; border-radius: var(--radius-md); padding: calc(16 / 1920 * 100vw) calc(56 / 1920 * 100vw) calc(16 / 1920 * 100vw) calc(20 / 1920 * 100vw); height: calc(62 / 1920 * 100vw); width: calc(383 / 1920 * 100vw); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30' fill='none'%3E%3Cpath d='M13 20L7 14L19 14L13 20Z' fill='%23004156'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; box-sizing: border-box; } .catalog-page .catalog__filter-trigger { position: relative; width: calc(62 / 1920 * 100vw); height: calc(62 / 1920 * 100vw); display: flex; align-items: center; justify-content: center; background-color: var(--color-neutral-200); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s; box-sizing: border-box; } .catalog-page .catalog__filter-trigger:hover { background-color: #e5e5e5; } .catalog-page .catalog__filter-icon { width: calc(30 / 1920 * 100vw); height: calc(30 / 1920 * 100vw); display: block; } .catalog-page .filter-badge { position: absolute; top: calc(-10 / 1920 * 100vw); right: calc(-10 / 1920 * 100vw); min-width: calc(30 / 1920 * 100vw); height: calc(30 / 1920 * 100vw); padding: calc(1 / 1920 * 100vw) calc(6 / 1920 * 100vw); display: flex; align-items: center; justify-content: center; font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-white); background-color: var(--color-secondary); border-radius: var(--radius-md); box-sizing: border-box; } .catalog-page .catalog__grid { display: grid; grid-template-columns: repeat(3, calc(500 / 1920 * 100vw)); gap: calc(100 / 1920 * 100vw) calc(36 / 1920 * 100vw); justify-content: space-between; box-sizing: border-box; } .catalog-page .catalog__grid .product-item { font-family: var(--font-family-base); display: flex; flex-direction: column; background-color: transparent; border-radius: 0; overflow: visible; box-shadow: none; transition: none; box-sizing: border-box; } .catalog-page .catalog__grid .product-item__image { display: block; position: relative; width: calc(500 / 1920 * 100vw); height: calc(376 / 1920 * 100vw); border-radius: var(--radius-lg); background: #d9d9d9; flex-shrink: 0; box-sizing: border-box; margin-bottom: calc(60 / 1920 * 100vw); } .catalog-page .catalog__grid .product-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); overflow: hidden; } .catalog-page .catalog__grid .product-item__add-cart { position: absolute; bottom: calc(-40 / 1920 * 100vw); right: calc(40 / 1920 * 100vw); width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw); background-color: var(--color-orange); border: none; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; box-sizing: border-box; } .catalog-page .catalog__grid .product-item__add-cart svg { width: calc(26 / 1920 * 100vw); height: calc(31 / 1920 * 100vw); } .catalog-page .catalog__grid .product-item__add-cart:hover { background-color: var(--color-orange-hover); } .catalog-page .catalog__grid .product-item__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(20 / 1920 * 100vw); height: calc(70 / 1920 * 100vw); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; box-sizing: border-box; } .catalog-page .catalog__grid .product-item__title a { color: inherit; text-decoration: none; } .catalog-page .catalog__grid .product-item__title a:hover { color: var(--color-orange); } .catalog-page .catalog__grid .product-item__desc { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0 0 calc(20 / 1920 * 100vw); height: calc(55 / 1920 * 100vw); box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .catalog-page .catalog__grid .product-item__price { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); line-height: 1.1; display: flex; align-items: baseline; gap: calc(20 / 1920 * 100vw); margin: 0; padding: 0; box-sizing: border-box; } .catalog-page .catalog__grid .product-item__price .price-current { color: #fd8064; font-weight: var(--font-weight-semibold); } .catalog-page .catalog__grid .product-item__price .price-old { text-decoration: line-through; color: #bdbdbd; font-weight: var(--font-weight-normal); font-size: var(--font-size-xl); } .catalog-page .catalog__empty { grid-column: 1 / -1; text-align: center; padding: calc(48 / 1920 * 100vw) calc(24 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; box-sizing: border-box; } .catalog-page .filter-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: calc(640 / 1920 * 100vw); height: 100vh; background-color: var(--color-white); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1); z-index: 1000; overflow-y: auto; transition: right 0.3s ease; box-sizing: border-box; padding: calc(100 / 1920 * 100vw) calc(174 / 1920 * 100vw) 0 calc(83 / 1920 * 100vw); } .catalog-page .filter-drawer.is-open { right: 0; } .catalog-page .filter-drawer__header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: calc(40 / 1920 * 100vw); } .catalog-page .filter-drawer__title { font-family: 'Instrument Sans', sans-serif; font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.2; color: var(--color-neutral-900); margin: 0; } .catalog-page .filter-drawer__close { width: calc(40 / 1920 * 100vw); height: calc(40 / 1920 * 100vw); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; color: var(--color-neutral-900); } .catalog-page .filter-drawer__close:hover { color: var(--color-orange); } .catalog-page .filter-drawer__form { display: flex; flex-direction: column; /*gap: calc(40 / 1920 * 100vw);*/ } .catalog-page .filter-group { display: flex; flex-direction: column; gap: calc(40 / 1920 * 100vw); border-top: 1px solid #F3F3F3; padding: calc(40 / 1920 * 100vw) 0; } .catalog-page .filter-group:first-child { border-top: none; padding: calc(20 / 1920 * 100vw) 0 calc(40 / 1920 * 100vw) 0; } .catalog-page .filter-group__header { display: flex; align-items: center; justify-content: space-between; } .catalog-page .filter-group__title { font-family: 'Instrument Sans', sans-serif; font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); line-height: 1.2; color: var(--color-neutral-900); margin: 0; } .catalog-page .filter-group__reset { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-neutral-500); background: none; border: none; cursor: pointer; padding: 0; } .catalog-page .filter-group__reset:hover { color: var(--color-orange); } .catalog-page .filter-buttons { display: flex; flex-wrap: wrap; gap: calc(12 / 1920 * 100vw); } .catalog-page .filter-button { position: relative; display: inline-flex; padding: calc(12 / 1920 * 100vw) calc(24 / 1920 * 100vw); background: var(--color-neutral-200); border: 2px solid transparent; border-radius: var(--radius-full); cursor: pointer; transition: all 0.2s; } .catalog-page .filter-button:hover { border: 2px solid var(--color-secondary); } .catalog-page .filter-button__input { position: absolute; opacity: 0; width: 0; height: 0; } .catalog-page .filter-button__label { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-neutral-900); } .catalog-page .filter-button:has(.filter-button__input:checked) { background: rgba(253, 128, 100, 0.1); border-color: var(--color-orange); } .catalog-page .filter-button:has(.filter-button__input:checked) .filter-button__label { color: var(--color-orange); } .catalog-page .filter-checkboxes { display: flex; flex-direction: column; gap: calc(16 / 1920 * 100vw); } .catalog-page .filter-checkbox { position: relative; display: flex; align-items: center; gap: calc(12 / 1920 * 100vw); cursor: pointer; } .catalog-page .filter-checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; } .catalog-page .filter-checkbox__checkmark { width: calc(20 / 1920 * 100vw); height: calc(20 / 1920 * 100vw); border: 1px solid #a9a6a6; border-radius: var(--radius-xs); background: var(--color-white); flex-shrink: 0; transition: all 0.2s; position: relative; } .catalog-page .filter-checkbox:hover .filter-checkbox__checkmark { border: 1px solid var(--color-secondary); } .catalog-page .filter-checkbox__input:checked~.filter-checkbox__checkmark { background: var(--color-orange); border-color: var(--color-orange); } .catalog-page .filter-checkbox__input:checked~.filter-checkbox__checkmark::after { content: ''; display: block; position: absolute; left: calc(6 / 1920 * 100vw); top: calc(2 / 1920 * 100vw); width: calc(5 / 1920 * 100vw); height: calc(10 / 1920 * 100vw); border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .catalog-page .filter-checkbox__label { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.2; color: var(--color-neutral-900); } .catalog-page .filter-drawer__actions { margin-top: calc(60 / 1920 * 100vw); display: flex; justify-content: center; } .catalog-page .filter-drawer__actions .btn-primary { font-family: 'Instrument Sans', sans-serif; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-white); background: #004156; border: none; border-radius: var(--radius-md); padding: calc(20 / 1920 * 100vw) calc(80 / 1920 * 100vw); cursor: pointer; transition: background 0.2s; width: 100%; } .catalog-page .filter-drawer__actions .btn-primary:hover { background: #003345; } .product-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .product-page .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: calc(26 / 1920 * 100vw); margin: 0 0 calc(80 / 1920 * 100vw); padding-top: calc(185 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1; color: var(--color-neutral-400); box-sizing: border-box; } .product-page .breadcrumbs__link { color: var(--color-neutral-400); text-decoration: none; padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); } .product-page .breadcrumbs__link:hover { color: var(--color-primary); } .product-page .breadcrumbs__separator { color: var(--color-neutral-400); padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); } .product-page .breadcrumbs__current { color: var(--color-primary); font-weight: var(--font-weight-medium); padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); } .product-page .product-main { padding-top: 0; padding-bottom: 0; margin-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .product-page .product-main__grid { display: flex; gap: calc(71 / 1920 * 100vw); align-items: start; max-width: calc(1410 / 1920 * 100vw); box-sizing: border-box; } .product-page .product-main__gallery { position: relative; width: calc(648 / 1920 * 100vw); height: calc(463 / 1920 * 100vw); border-radius: var(--radius-lg); overflow: visible; background: #d9d9d9; flex-shrink: 0; box-sizing: border-box; } .product-page .product-slider { width: calc(100% + calc(60 / 1920 * 100vw)); height: 100%; overflow: hidden; padding: 0 calc(30 / 1920 * 100vw); margin: 0 calc(-30 / 1920 * 100vw); } .product-page .product-slider .swiper-wrapper { border-radius: var(--radius-lg); overflow: hidden; } .product-page .product-slider .swiper-wrapper, .product-page .product-slider .swiper-slide { width: 100%; height: 100%; } .product-page .product-slider img, .product-page .product-slider .img-responsive { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); } .product-page .product-slider .placeholder-img { width: 100%; height: 100%; background: #d9d9d9; } .product-page .product-slider .swiper-button-next, .product-page .product-slider .swiper-button-prev { width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); margin-top: calc(-30 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw); background-color: var(--color-primary-hover); color: var(--color-neutral-100); transition: background-color 0.2s; box-sizing: border-box; } .product-page .product-slider .swiper-button-next::after, .product-page .product-slider .swiper-button-prev::after { font-size: var(--font-size-sm); font-weight: 900; } .product-page .product-slider .swiper-button-next:hover, .product-page .product-slider .swiper-button-prev:hover { background-color: #fd7854; } .product-page .product-slider .swiper-button-next { right: 0; } .product-page .product-slider .swiper-button-prev { left: 0; } .product-page .product-main__info { display: flex; flex-direction: column; width: calc(691 / 1920 * 100vw); padding: calc(20 / 1920 * 100vw) 0; justify-content: space-between; box-sizing: border-box; } .product-page .product-main__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw) 0; box-sizing: border-box; } .product-page .product-main__excerpt { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0 0 calc(76 / 1920 * 100vw) 0; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .product-page .product-main__excerpt p { margin: 0; } .product-page .product-main__excerpt p:last-child { margin-bottom: 0; } .product-page .product-main__price-block { display: flex; align-items: baseline; gap: calc(20 / 1920 * 100vw); flex-wrap: wrap; margin-bottom: calc(40 / 1920 * 100vw); line-height: 1.1; box-sizing: border-box; } .product-page .product-main__price-block .price-current { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-primary-hover); box-sizing: border-box; } .product-page .product-main__price-block .price-old { font-family: var(--font-family-base); font-size: var(--font-size-xl); font-weight: var(--font-weight-normal); line-height: 1.1; color: var(--color-neutral-400); text-decoration: line-through; text-decoration-skip-ink: none; box-sizing: border-box; } .product-page .btn-orange.btn-large { display: inline-flex; align-items: center; justify-content: center; padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1; color: #ffffff; background-color: var(--color-primary-hover); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s; box-sizing: border-box; width: max-content; } .product-page .btn-orange.btn-large:hover { background-color: #fd7854; color: #ffffff; } .product-page .product-tabs { padding-top: 0; padding-bottom: 0; margin-bottom: calc(50 / 1920 * 100vw); box-sizing: border-box; } .product-page .tabs-header { display: flex; flex-wrap: wrap; gap: calc(26 / 1920 * 100vw); margin: 0 0 calc(50 / 1920 * 100vw); padding: 0; list-style: none; box-sizing: border-box; } .product-page .tabs-header__btn { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: var(--font-size-lg); line-height: 1; color: var(--color-neutral-400); padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.2s, border-bottom-color 0.2s; box-sizing: border-box; } .product-page .tabs-header__btn:hover, .product-page .tabs-header__btn.is-active { color: var(--color-primary); } .product-page .tabs-header__btn.is-active { border-bottom-color: var(--color-primary); font-weight: var(--font-weight-medium); } .product-page .tabs-content__item { display: none; box-sizing: border-box; } .product-page .tabs-content__item.is-active { display: block; } .product-page .specs-list { list-style: none; margin: 0; padding: 0; box-sizing: border-box; } .product-page .specs-list__item { display: flex; flex-wrap: wrap; gap: calc(10 / 1920 * 100vw); padding: calc(10 / 1920 * 100vw) 0; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.3; box-sizing: border-box; } .product-page .specs-list__item:last-child { border-bottom: none; } .product-page .specs-list__label { font-weight: var(--font-weight-medium); color: var(--color-neutral-900); flex-shrink: 0; box-sizing: border-box; } .product-page .specs-list__value { font-weight: var(--font-weight-normal); color: var(--color-neutral-600); box-sizing: border-box; } .product-page .specs-list__empty { font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--color-text-muted); margin: 0; box-sizing: border-box; } .product-page .tabs-content__item .entry-content { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-muted); box-sizing: border-box; } .product-page .tabs-content__item .entry-content p { margin: 0 0 calc(12 / 1920 * 100vw); } .product-page .tabs-content__item .entry-content p:last-child { margin-bottom: 0; } .product-page .related-products { padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(150 / 1920 * 100vw); box-sizing: border-box; } .product-page .related-products .section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); text-align: left; margin: 0 0 calc(50 / 1920 * 100vw); box-sizing: border-box; } .product-page .related-products .catalog__grid { display: grid; grid-template-columns: repeat(3, calc(500 / 1920 * 100vw)); gap: calc(100 / 1920 * 100vw) calc(36 / 1920 * 100vw); justify-content: space-between; box-sizing: border-box; } .product-page .related-products .product-item { font-family: var(--font-family-base); display: flex; flex-direction: column; background-color: transparent; border-radius: 0; overflow: visible; box-shadow: none; transition: none; box-sizing: border-box; } .product-page .related-products .product-item__image { display: block; position: relative; width: calc(500 / 1920 * 100vw); height: calc(376 / 1920 * 100vw); border-radius: var(--radius-lg); background: #d9d9d9; flex-shrink: 0; box-sizing: border-box; margin-bottom: calc(60 / 1920 * 100vw); } .product-page .related-products .product-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); overflow: hidden; } .product-page .related-products .product-item__add-cart { position: absolute; bottom: calc(-40 / 1920 * 100vw); right: calc(40 / 1920 * 100vw); width: calc(60 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw); background-color: var(--color-orange); border: none; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; box-sizing: border-box; } .product-page .related-products .product-item__add-cart svg { width: calc(26 / 1920 * 100vw); height: calc(31 / 1920 * 100vw); } .product-page .related-products .product-item__add-cart:hover { background-color: var(--color-orange-hover); } .product-page .related-products .product-item__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(20 / 1920 * 100vw); height: calc(70 / 1920 * 100vw); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; box-sizing: border-box; } .product-page .related-products .product-item__title a { color: inherit; text-decoration: none; } .product-page .related-products .product-item__title a:hover { color: var(--color-orange); } .product-page .related-products .product-item__desc { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0 0 calc(20 / 1920 * 100vw); height: calc(55 / 1920 * 100vw); box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .product-page .related-products .product-item__price { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); line-height: 1.1; display: flex; align-items: baseline; gap: calc(20 / 1920 * 100vw); margin: 0; padding: 0; box-sizing: border-box; } .product-page .related-products .product-item__price .price-current { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .product-page .related-products .product-item__price .price-old { text-decoration: line-through; color: var(--color-neutral-400); font-weight: var(--font-weight-normal); font-size: var(--font-size-xl); } .product-page .related-products__empty { grid-column: 1 / -1; text-align: center; padding: calc(48 / 1920 * 100vw) calc(24 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; box-sizing: border-box; } .post-single-page { background-color: var(--color-white); padding-top: calc(185 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .post-single-page .container--narrow { max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: calc(133 / 1920 * 100vw); box-sizing: border-box; } .post-single-page .breadcrumbs { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin: 0 0 calc(80 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1; color: var(--color-neutral-400); box-sizing: border-box; } .post-single-page .breadcrumbs__link { padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); color: var(--color-neutral-400); text-decoration: none; white-space: nowrap; } .post-single-page .breadcrumbs__link:hover { color: var(--color-primary); } .post-single-page .breadcrumbs__separator { padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); color: var(--color-neutral-400); } .post-single-page .breadcrumbs__current { flex: 1 1 0; min-width: 0; padding: calc(12 / 1920 * 100vw) calc(10 / 1920 * 100vw); color: var(--color-primary); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-single-page .post-single__header { display: flex; flex-direction: column; gap: calc(30 / 1920 * 100vw); margin-bottom: calc(80 / 1920 * 100vw); box-sizing: border-box; } .post-single-page .post-single__meta { display: flex; align-items: center; gap: calc(16 / 1920 * 100vw); margin-bottom: 0; box-sizing: border-box; } .post-single-page .post-single__date-badge, .post-single-page .post-single__category-badge { background-color: var(--color-neutral-200); padding: calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw); border-radius: var(--radius-full); margin: 0; box-sizing: border-box; } .post-single-page .post-single__date, .post-single-page .post-single__category { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.1; color: var(--color-neutral-900); box-sizing: border-box; } .post-single-page .post-single__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; letter-spacing: 0; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .post-single-page .post-single__lead { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-neutral-600); margin: 0; box-sizing: border-box; } .post-single-page .post-single__quote--top { border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; padding: calc(40 / 1920 * 100vw) 0; margin: 0; } .post-single-page .post-single__quote { display: flex; align-items: center; gap: calc(30 / 1920 * 100vw); margin: 0; padding: 0; border: none; background: none; box-sizing: border-box; } .post-single-page .post-single__quote-mark { flex-shrink: 0; font-family: var(--font-family-base); font-size: calc(200 / 1920 * 100vw); font-weight: var(--font-weight-medium); line-height: 0.76; color: #f3f3f3; width: calc(89 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); overflow: hidden; margin: 0; box-sizing: border-box; } .post-single-page .post-single__quote--middle .post-single__quote-mark { height: calc(149 / 1920 * 100vw); } .post-single-page .post-single__quote-text { flex: 1 1 0; min-width: 0; font-family: var(--font-family-base); font-size: calc(28 / 1920 * 100vw); font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .post-single-page .post-single__quote--middle .post-single__quote-text { font-size: var(--font-size-xl); } .post-single-page .post-single__main-image, .post-single-page .post-single__main-video { margin-top: 0; margin-bottom: calc(80 / 1920 * 100vw); border-radius: var(--radius-md); overflow: hidden; height: calc(830 / 1920 * 100vw); box-sizing: border-box; } .post-single-page .post-single__main-image img, .post-single-page .post-single__main-image .img-responsive, .post-single-page .post-single__main-video iframe { width: 100%; height: 100%; object-fit: cover; display: block; } .post-single-page .post-single__main-image .placeholder-img { width: 100%; height: 100%; background: #e2e8f0; } .post-single-page .post-single__body { display: flex; flex-direction: column; gap: calc(80 / 1920 * 100vw); margin-top: 0; box-sizing: border-box; } .post-single-page .post-single__section { display: flex; flex-direction: column; gap: calc(30 / 1920 * 100vw); margin-bottom: 0; box-sizing: border-box; } .post-single-page .post-single__section-title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .post-single-page .post-single__section-content, .post-single-page .post-single__content, .post-single-page .post-single__section-content.entry-content, .post-single-page .post-single__content.entry-content, .post-single-page .post-single__final-text.entry-content { font-family: var(--font-family-base); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.5; color: var(--color-neutral-900); box-sizing: border-box; } .post-single-page .post-single__section-content p, .post-single-page .post-single__content p, .post-single-page .entry-content p, .post-single-page .post-single__final-text p { margin: 0 0 calc(40 / 1920 * 100vw); } .post-single-page .post-single__section-content p:last-child, .post-single-page .post-single__content p:last-child, .post-single-page .entry-content p:last-child, .post-single-page .post-single__final-text p:last-child { margin-bottom: 0; } .post-single-page .post-single__section-images { display: flex; justify-content: space-between; gap: calc(36 / 1920 * 100vw); margin: 0; box-sizing: border-box; } .post-single-page .post-single__section-images--multi { display: flex; flex-direction: column; gap: calc(36 / 1920 * 100vw); } .post-single-page .post-single__section-images-row { display: flex; gap: calc(36 / 1920 * 100vw); height: calc(557 / 1920 * 100vw); box-sizing: border-box; } .post-single-page .post-single__section-images .post-single__section-image { flex: 1 1 0; min-width: 0; } .post-single-page .post-single__section-images-row .post-single__section-image--1 { flex: 0 0 871px; width: calc(871 / 1920 * 100vw); } .post-single-page .post-single__section-images-row .post-single__section-image--2 { flex: 1 1 0; min-width: 0; } .post-single-page .post-single__section-images .post-single__section-image--full { width: 100%; height: calc(830 / 1920 * 100vw); flex: none; } .post-single-page .post-single__section-images .post-single__section-image:only-child { flex: none; width: 100%; } .post-single-page .post-single__section-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-md); } .post-single-page .post-single__quote--middle { margin: 0; } .post-single-page .post-single__final-text { margin: 0; } .main .img-responsive { max-width: 100%; height: auto; display: block; } .main .placeholder-img { width: 100%; aspect-ratio: 4 / 3; background: #e2e8f0; border-radius: calc(4 / 1920 * 100vw); } @media (max-width: 768px) { .main .container {} .main .hero { min-height: auto; padding-top: calc(115 / 430 * 100vw); padding-bottom: calc(200 / 430 * 100vw); background-position: center center; } .main .hero .hero__container { gap: calc(40 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .main .hero .hero__content { max-width: 100%; } .main .hero__title { font-size: calc(60 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1; } .main .hero .advantages { overflow: hidden !important; position: relative; } .main .hero .advantages__wrapper { transform: unset; width: unset; margin: unset !important; gap: 0; } .main .hero .advantages__item { width: calc(100vw - calc(32 / 430 * 100vw)) !important; max-width: calc(398 / 430 * 100vw); flex: none; height: auto; margin-right: 0 !important; } .main .hero .advantages__inner { padding: calc(26 / 430 * 100vw); gap: calc(40 / 430 * 100vw); border-radius: calc(30 / 430 * 100vw); } .main .hero .advantages__title { font-size: calc(34 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1.1; } .main .hero .advantages__icon { width: calc(80 / 430 * 100vw); height: calc(80 / 430 * 100vw); } .main .hero .advantages__text { font-size: calc(18 / 430 * 100vw); font-weight: var(--font-weight-normal); line-height: 1.3; max-width: 100%; } .main .hero .advantages__link.btn-outline { font-size: calc(20 / 430 * 100vw); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); gap: calc(16 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .main .promo-trust { padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(40 / 430 * 100vw); } .main .promo-trust__container { gap: calc(24 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .main .promo-trust__title { font-size: calc(34 / 430 * 100vw); font-weight: var(--font-weight-medium); line-height: 1.1; text-align: center; } .main .promo-trust__image-wrapper { max-width: 100%; margin-top: calc(-160 / 430 * 100vw); margin-bottom: 0; } .main .catalog { padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(40 / 430 * 100vw); } .main .catalog .catalog__container { max-width: calc(398 / 430 * 100vw); } .main .catalog .catalog__title { font-size: calc(40 / 430 * 100vw); font-weight: var(--font-weight-semibold); text-align: center; margin: 0 0 calc(40 / 430 * 100vw); line-height: 1; } .main .catalog .info { grid-template-columns: 1fr; grid-template-rows: auto; gap: calc(20 / 430 * 100vw); margin-bottom: calc(60 / 430 * 100vw); } .main .catalog .info-card--large { grid-column: 1; grid-row: auto; } .main .catalog .info-card { padding: calc(24 / 430 * 100vw) calc(26 / 430 * 100vw); border-radius: var(--radius-lg); box-shadow: 0 0 20px 0 var(--color-neutral-200); } .main .catalog .info-card__tags { margin-bottom: calc(30 / 430 * 100vw); gap: calc(8 / 430 * 100vw) 0; justify-content: space-between; } .main .catalog .info-tag { font-size: calc(16 / 430 * 100vw); font-weight: var(--font-weight-medium); padding: calc(10 / 430 * 100vw) calc(20 / 430 * 100vw); border-radius: var(--radius-full); } .main .catalog .info-card__title { font-size: calc(30 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1.1; margin: 0 0 calc(20 / 430 * 100vw); } .main .catalog .info-card__text { font-size: calc(18 / 430 * 100vw); font-weight: var(--font-weight-normal); line-height: 1.3; margin: 0 0 calc(30 / 430 * 100vw); } .main .catalog .info-card__btn { font-size: calc(20 / 430 * 100vw); font-weight: var(--font-weight-medium); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); gap: calc(16 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); background-color: var(--color-secondary); } .main .catalog .info-card__img { margin-top: calc(30 / 430 * 100vw); } .main .catalog .products__tabs { gap: 0; margin: 0 0 calc(40 / 430 * 100vw); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: calc(4 / 430 * 100vw); justify-content: flex-start; } .main .catalog .products__tabs::-webkit-scrollbar { display: none; } .main .catalog .tabs-list__item { font-size: calc(18 / 430 * 100vw); font-weight: var(--font-weight-medium); white-space: nowrap; flex-shrink: 0; padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); border-bottom: 3px solid transparent; margin-bottom: calc(-3 / 430 * 100vw); } .main .catalog .tabs-list__item.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); } .main .catalog .products__grid { grid-template-columns: 1fr; gap: calc(60 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); } .main .catalog .product-item__image { aspect-ratio: auto; height: calc(300 / 430 * 100vw); margin-bottom: calc(45 / 430 * 100vw); border-radius: calc(30 / 430 * 100vw); } .main .catalog .product-item__image img { border-radius: calc(30 / 430 * 100vw); } .main .catalog .product-item__add-cart { bottom: calc(-34 / 430 * 100vw); right: calc(24 / 430 * 100vw); width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); } .main .catalog .product-item__add-cart svg { width: calc(26 / 430 * 100vw); height: calc(31 / 430 * 100vw); } .main .catalog .product-item__title { font-size: calc(24 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1.1; margin: 0 0 calc(14 / 430 * 100vw); } .main .catalog .product-item__desc { font-size: calc(16 / 430 * 100vw); font-weight: var(--font-weight-normal); color: var(--color-neutral-600); line-height: 1.3; margin: 0 0 calc(14 / 430 * 100vw); } .main .catalog .product-item__price { font-size: calc(24 / 430 * 100vw); line-height: 1.1; gap: calc(16 / 430 * 100vw); } .main .catalog .product-item__price .price-current { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .main .catalog .product-item__price .price-old { color: var(--color-neutral-400); font-size: calc(24 / 430 * 100vw); font-weight: var(--font-weight-normal); text-decoration: line-through; text-decoration-color: var(--color-neutral-400); } .main .catalog .products__footer { margin-top: 0; } .main .catalog .catalog__more { font-size: calc(20 / 430 * 100vw); font-weight: var(--font-weight-medium); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); gap: calc(16 / 430 * 100vw); border-radius: var(--radius-md); } .main .catalog .catalog__more svg { width: calc(40 / 430 * 100vw); height: calc(40 / 430 * 100vw); } .main .faq { padding-top: calc(70 / 430 * 100vw); padding-bottom: calc(70 / 430 * 100vw); } .main .faq .faq__container { max-width: calc(398 / 430 * 100vw); } .main .faq .faq__title { font-size: calc(40 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1; text-align: center; margin: 0 0 calc(40 / 430 * 100vw); } .main .faq .faq__list { gap: calc(20 / 430 * 100vw); } .main .faq .faq__item { border-radius: calc(30 / 430 * 100vw); } .main .faq .faq__question { padding: calc(26 / 430 * 100vw); font-size: calc(24 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1.1; gap: calc(40 / 430 * 100vw); } .main .faq .faq__item.is-open .faq__answer { max-height: calc(1000 / 430 * 100vw); } .main .faq .faq__icon { width: calc(40 / 430 * 100vw); height: calc(44 / 430 * 100vw); flex-shrink: 0; } .main .faq .faq__answer-content { padding: 0 calc(26 / 430 * 100vw) calc(26 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); font-weight: var(--font-weight-normal); line-height: 1.3; } .feedback { padding-top: calc(70 / 430 * 100vw); padding-bottom: calc(70 / 430 * 100vw); } .feedback .feedback__container { max-width: calc(398 / 430 * 100vw); } .feedback .feedback-form { max-width: 100%; padding: calc(40 / 430 * 100vw) calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .feedback .feedback-form__title { font-size: calc(40 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1.1; text-align: center; margin: 0 0 calc(20 / 430 * 100vw); } .feedback .feedback-form__subtitle { font-size: calc(20 / 430 * 100vw); font-weight: var(--font-weight-normal); line-height: 1.3; text-align: center; margin: 0 0 calc(40 / 430 * 100vw); } .feedback .feedback-form__fields form, .feedback .feedback-form__fields .wpcf7-form { gap: calc(12 / 430 * 100vw); } .feedback .feedback-form__row--half { grid-template-columns: 1fr; gap: calc(12 / 430 * 100vw); } .feedback .feedback-form__input, .feedback .feedback-form__select { padding: calc(20 / 430 * 100vw) calc(24 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .feedback .feedback-form__submit-wrapper { margin-top: calc(12 / 430 * 100vw); text-align: center; } .feedback .feedback-form__submit-wrapper .wpcf7-submit, .feedback .feedback-form__submit-wrapper .btn-orange { font-size: calc(20 / 430 * 100vw); font-weight: var(--font-weight-medium); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); background-color: var(--color-primary); width: auto; } .feedback .wpcf7 form .wpcf7-response-output { padding: calc(20 / 430 * 100vw) calc(24 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); font-size: calc(16 / 430 * 100vw); width: 100%; } .main .promo-geo { padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(40 / 430 * 100vw); } .main .promo-geo .promo-geo__container { gap: calc(20 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .main .promo-geo .promo-geo__content { width: 100%; } .main .promo-geo .promo-geo__title { font-size: calc(34 / 430 * 100vw); font-weight: var(--font-weight-medium); line-height: 1.1; text-align: center; } .main .promo-geo .promo-geo__map-wrapper { margin-top: calc(-100 / 430 * 100vw); max-width: 100%; } .main .promo-geo .promo-geo__main-container { margin-top: calc(-310 / 430 * 100vw); max-width: 100%; } .catalog-page .container { max-width: calc(398 / 430 * 100vw); } .catalog-page .hero.hero--small { min-height: calc(390 / 430 * 100vw); } .catalog-page .hero.hero--catalog .hero__title { font-size: calc(60 / 430 * 100vw); top: calc(185 / 430 * 100vw); left: 50%; transform: translateX(-50%); white-space: normal; text-align: center; width: calc(100% - calc(32 / 430 * 100vw)); padding-left: 0; padding-right: 0; box-sizing: border-box; word-wrap: break-word; } .catalog-page .catalog { padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .catalog-page .catalog__top-bar { flex-direction: column; align-items: flex-start; gap: calc(20 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); } .catalog-page .catalog__tabs.tabs-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; width: 100%; padding-bottom: 0; } .catalog-page .catalog__tabs.tabs-list::-webkit-scrollbar { display: none; } .catalog-page .catalog__tabs .tabs-list__item { font-size: calc(18 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); } .catalog-page .catalog__controls { width: 100%; gap: calc(8 / 430 * 100vw); } .catalog-page .catalog__city.select-custom { flex: 1; } .catalog-page .catalog__city select { width: 100%; height: calc(62 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); padding: calc(16 / 430 * 100vw) calc(52 / 430 * 100vw) calc(16 / 430 * 100vw) calc(20 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .catalog-page .catalog__filter-trigger { width: calc(62 / 430 * 100vw); height: calc(62 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); flex-shrink: 0; } .catalog-page .catalog__filter-icon { width: calc(30 / 430 * 100vw); height: calc(30 / 430 * 100vw); } .catalog-page .filter-badge { top: calc(-10 / 430 * 100vw); right: calc(-10 / 430 * 100vw); min-width: calc(30 / 430 * 100vw); height: calc(30 / 430 * 100vw); padding: calc(1 / 430 * 100vw) calc(6 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); } .catalog-page .catalog__grid { grid-template-columns: 1fr; gap: calc(60 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__image { width: 100%; height: calc(300 / 430 * 100vw); border-radius: calc(30 / 430 * 100vw); margin-bottom: calc(45 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__image img { border-radius: calc(30 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__add-cart { bottom: calc(-34 / 430 * 100vw); right: calc(24 / 430 * 100vw); width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__add-cart svg { width: calc(26 / 430 * 100vw); height: calc(31 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__title { font-size: calc(24 / 430 * 100vw); max-height: calc(55 / 430 * 100vw); height: max-content; margin: 0 0 calc(14 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__desc { font-size: calc(16 / 430 * 100vw); height: calc(45 / 430 * 100vw); margin: 0 0 calc(14 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__price { font-size: calc(24 / 430 * 100vw); gap: calc(16 / 430 * 100vw); } .catalog-page .catalog__grid .product-item__price .price-current { color: #fd8064; font-weight: 600; } .catalog-page .catalog__grid .product-item__price .price-old { font-size: calc(24 / 430 * 100vw); color: #bdbdbd; } .catalog-page .catalog__empty { padding: calc(48 / 430 * 100vw) calc(24 / 430 * 100vw); font-size: calc(16 / 430 * 100vw); } .catalog-page .filter-drawer { top: 0; bottom: auto; right: auto; left: 0; width: 100%; max-width: 100%; height: 100vh; max-height: none; border-radius: 0; padding: calc(27 / 430 * 100vw) calc(16 / 430 * 100vw) calc(100 / 430 * 100vw); box-shadow: none; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } .catalog-page .filter-drawer.is-open { right: auto; bottom: auto; transform: translateX(0); } .catalog-page .filter-drawer__header { justify-content: flex-end; margin-bottom: calc(40 / 430 * 100vw); } .catalog-page .filter-drawer__close { width: calc(40 / 430 * 100vw); height: calc(40 / 430 * 100vw); } .catalog-page .filter-drawer__title { display: none; } .catalog-page .filter-drawer__form { gap: calc(20 / 430 * 100vw); } .catalog-page .filter-group { gap: calc(40 / 430 * 100vw); padding: calc(20 / 430 * 100vw); border-radius: calc(10 / 430 * 100vw); background: #ffffff; } .catalog-page .filter-group:first-child { padding: calc(20 / 430 * 100vw); } .catalog-page .filter-group__title { font-size: calc(24 / 430 * 100vw); font-weight: 500; } .catalog-page .filter-group__reset { font-size: calc(14 / 430 * 100vw); color: #a9a6a6; text-decoration: none; } .catalog-page .filter-buttons { gap: calc(10 / 430 * 100vw); flex-wrap: wrap; } .catalog-page .filter-button { padding: calc(10 / 430 * 100vw) calc(20 / 430 * 100vw); border-radius: calc(100 / 430 * 100vw); border: 1px solid transparent; } .catalog-page .filter-button:hover { border: 1px solid transparent; } /* .catalog-page .filter-button:has(.filter-button__input:checked) { border-color: #004156; background: #f3f3f3; } .catalog-page .filter-button:has(.filter-button__input:checked) .filter-button__label { color: #000000; } */ .catalog-page .filter-button__label { font-size: calc(20 / 430 * 100vw); } .catalog-page .filter-checkboxes { /*display: grid; grid-template-columns: 1fr 1fr;*/ gap: calc(24 / 430 * 100vw) calc(36 / 430 * 100vw); } .catalog-page .filter-checkbox { gap: calc(12 / 430 * 100vw); } .catalog-page .filter-checkbox__checkmark { width: calc(30 / 430 * 100vw); height: calc(30 / 430 * 100vw); border-radius: calc(5 / 430 * 100vw); flex-shrink: 0; } .catalog-page .filter-checkbox__input:checked~.filter-checkbox__checkmark { background: #49509c; border-color: #49509c; } .catalog-page .filter-checkbox__input:checked~.filter-checkbox__checkmark::after { left: calc(9 / 430 * 100vw); top: calc(4 / 430 * 100vw); width: calc(8 / 430 * 100vw); height: calc(14 / 430 * 100vw); } .catalog-page .filter-checkbox__label { font-size: calc(20 / 430 * 100vw); font-weight: 500; line-height: 1.3; } .catalog-page .filter-drawer__actions { /* position: fixed; bottom: 0; left: 0; right: 0; */ margin: 0; padding: calc(10 / 430 * 100vw) calc(16 / 430 * 100vw); /* z-index: 10; */ } .catalog-page .filter-drawer__actions .btn-primary { width: 100%; padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); font-weight: 500; border-radius: calc(20 / 430 * 100vw); text-align: center; } .product-page .container { max-width: calc(398 / 430 * 100vw); } .product-page .breadcrumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; margin: 0 0 calc(26 / 430 * 100vw); padding-top: calc(145 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); } .product-page .breadcrumbs::-webkit-scrollbar { display: none; } .product-page .breadcrumbs__link { padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .product-page .breadcrumbs__separator { padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .product-page .breadcrumbs__current { padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .product-page .product-main { margin-bottom: calc(60 / 430 * 100vw); } .product-page .product-main__grid { flex-direction: column; gap: calc(30 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .product-page .product-main__gallery { width: 100%; height: calc(300 / 430 * 100vw); border-radius: calc(30 / 430 * 100vw); } .product-page .product-slider { width: 100%; padding: 0; margin: 0; } .product-page .product-slider .swiper-slide img { border-radius: calc(30 / 430 * 100vw); } .product-page .product-slider .swiper-button-next, .product-page .product-slider .swiper-button-prev { display: none; } .product-page .product-main__info { width: 100%; padding: 0; } .product-page .product-main__title { font-size: calc(28 / 430 * 100vw); line-height: 1.1; margin: 0 0 calc(14 / 430 * 100vw); } .product-page .product-main__excerpt { font-size: calc(16 / 430 * 100vw); line-height: 1.3; margin: 0 0 calc(14 / 430 * 100vw); height: calc(62 / 430 * 100vw); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } .product-page .product-main__price-block { gap: calc(16 / 430 * 100vw); margin-bottom: calc(26 / 430 * 100vw); font-size: calc(24 / 430 * 100vw); line-height: 1.1; } .product-page .product-main__price-block .price-current { font-size: calc(24 / 430 * 100vw); line-height: 1.1; } .product-page .product-main__price-block .price-old { font-size: calc(24 / 430 * 100vw); line-height: 1.1; } .product-page .btn-orange.btn-large { width: 100%; height: calc(68 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .product-page .product-tabs { margin-bottom: calc(60 / 430 * 100vw); } .product-page .tabs-header { gap: calc(26 / 430 * 100vw); margin: 0 0 calc(40 / 430 * 100vw); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0; } .product-page .tabs-header::-webkit-scrollbar { display: none; } .product-page .tabs-header__btn { font-size: calc(18 / 430 * 100vw); padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .product-page .specs-list__item { flex-direction: column; gap: calc(10 / 430 * 100vw); padding: calc(10 / 430 * 100vw) 0; font-size: calc(18 / 430 * 100vw); line-height: 1.3; } .product-page .specs-list__label { font-size: calc(18 / 430 * 100vw); font-weight: var(--font-weight-medium); } .product-page .specs-list__value { font-size: calc(18 / 430 * 100vw); } .product-page .specs-list__empty { font-size: calc(16 / 430 * 100vw); } .product-page .tabs-content__item .entry-content { font-size: calc(16 / 430 * 100vw); } .product-page .related-products { padding-top: 0; padding-bottom: calc(60 / 430 * 100vw); } .product-page .related-products .section-title { font-size: calc(40 / 430 * 100vw); font-weight: var(--font-weight-semibold); line-height: 1; text-align: center; margin: 0 0 calc(40 / 430 * 100vw); } .product-page .related-products .catalog__grid { grid-template-columns: 1fr; gap: calc(60 / 430 * 100vw) 0; } .product-page .related-products .product-item__image { width: 100%; height: calc(300 / 430 * 100vw); border-radius: calc(30 / 430 * 100vw); margin-bottom: calc(45 / 430 * 100vw); } .product-page .related-products .product-item__image img { border-radius: calc(30 / 430 * 100vw); } .product-page .related-products .product-item__add-cart { bottom: calc(-34 / 430 * 100vw); right: calc(24 / 430 * 100vw); width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); } .product-page .related-products .product-item__add-cart svg { width: calc(26 / 430 * 100vw); height: calc(31 / 430 * 100vw); } .product-page .related-products .product-item__title { font-size: calc(24 / 430 * 100vw); line-height: 1.1; max-height: calc(55 / 430 * 100vw); height: max-content; margin: 0 0 calc(14 / 430 * 100vw); } .product-page .related-products .product-item__desc { font-size: calc(16 / 430 * 100vw); line-height: 1.3; height: calc(45 / 430 * 100vw); margin: 0 0 calc(14 / 430 * 100vw); } .product-page .related-products .product-item__price { font-size: calc(24 / 430 * 100vw); line-height: 1.1; gap: calc(16 / 430 * 100vw); } .product-page .related-products .product-item__price .price-current { font-size: calc(24 / 430 * 100vw); color: var(--color-primary-hover); } .product-page .related-products .product-item__price .price-old { font-size: calc(24 / 430 * 100vw); color: var(--color-neutral-400); font-weight: var(--font-weight-normal); } .product-page .related-products__empty { padding: calc(48 / 430 * 100vw) calc(24 / 430 * 100vw); font-size: calc(16 / 430 * 100vw); } .news-page .hero.hero--small { min-height: calc(390 / 430 * 100vw); } .news-page .hero.hero--news .hero__title { top: calc(185 / 430 * 100vw); font-size: calc(60 / 430 * 100vw); white-space: pre-wrap; text-align: center; width: calc(398 / 430 * 100vw); left: 50%; transform: translateX(-50%); } .news-page .news { padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .news-page .news .container { max-width: 100%; gap: calc(40 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .news-page .news__tabs.tabs-list { gap: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0; } .news-page .news__tabs.tabs-list::-webkit-scrollbar { display: none; } .news-page .news__tabs .tabs-list__item { font-size: calc(18 / 430 * 100vw); padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .news-page .news__tabs .tabs-list__item.is-active { font-size: calc(18 / 430 * 100vw); } .news-page .news__grid { flex-direction: column; gap: calc(60 / 430 * 100vw); align-items: stretch; } .news-page .news-card { width: 100%; gap: calc(20 / 430 * 100vw); } .news-page .news-card__image { height: calc(300 / 430 * 100vw); border-radius: calc(30 / 430 * 100vw); } .news-page .news-card__content { gap: calc(14 / 430 * 100vw); } .news-page .news-card__date-badge { padding: calc(10 / 430 * 100vw) calc(20 / 430 * 100vw); } .news-page .news-card__date { font-size: calc(18 / 430 * 100vw); } .news-page .news-card__title { font-size: calc(24 / 430 * 100vw); max-height: calc(81 / 430 * 100vw); height: max-content; -webkit-line-clamp: 3; } .news-page .news-card__excerpt { font-size: calc(16 / 430 * 100vw); height: calc(85 / 430 * 100vw); -webkit-line-clamp: 4; } .news-page .news__empty, .news__empty-filter { padding: calc(60 / 430 * 100vw) calc(32 / 430 * 100vw); font-size: calc(16 / 430 * 100vw); } .post-single-page { padding-top: calc(145 / 430 * 100vw); padding-bottom: calc(70 / 430 * 100vw); } .post-single-page .container--narrow { max-width: calc(398 / 430 * 100vw); padding-right: 0; } .post-single-page .breadcrumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 0 calc(40 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); } .post-single-page .breadcrumbs::-webkit-scrollbar { display: none; } .post-single-page .breadcrumbs__link { white-space: nowrap; flex-shrink: 0; padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); } .post-single-page .breadcrumbs__separator { white-space: nowrap; flex-shrink: 0; padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); } .post-single-page .breadcrumbs__current { flex: none; white-space: nowrap; flex-shrink: 0; padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); } .post-single-page .post-single__header { gap: calc(30 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); } .post-single-page .post-single__date-badge, .post-single-page .post-single__category-badge { padding: calc(10 / 430 * 100vw) calc(20 / 430 * 100vw); border-radius: calc(100 / 430 * 100vw); } .post-single-page .post-single__date, .post-single-page .post-single__category { font-size: calc(18 / 430 * 100vw); line-height: 1.1; } .post-single-page .post-single__title { font-size: calc(32 / 430 * 100vw); line-height: 1.1; } .post-single-page .post-single__lead { font-size: calc(18 / 430 * 100vw); line-height: 1.3; } .post-single-page .post-single__quote--top { padding: calc(40 / 430 * 100vw) 0; } .post-single-page .post-single__quote { gap: calc(12 / 430 * 100vw); } .post-single-page .post-single__quote-mark { font-size: calc(89 / 430 * 100vw); width: calc(40 / 430 * 100vw); height: calc(27 / 430 * 100vw); } .post-single-page .post-single__quote--middle .post-single__quote-mark { height: calc(67 / 430 * 100vw); } .post-single-page .post-single__quote-text { font-size: calc(20 / 430 * 100vw); line-height: 1.3; } .post-single-page .post-single__quote--middle .post-single__quote-text { font-size: calc(20 / 430 * 100vw); } .post-single-page .post-single__main-image, .post-single-page .post-single__main-video { height: calc(262 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); } .post-single-page .post-single__body { gap: calc(40 / 430 * 100vw); } .post-single-page .post-single__section { gap: calc(30 / 430 * 100vw); } .post-single-page .post-single__section-title { font-size: calc(28 / 430 * 100vw); line-height: 1.1; white-space: normal; overflow: visible; text-overflow: clip; } .post-single-page .post-single__section-content, .post-single-page .post-single__content, .post-single-page .post-single__section-content.entry-content, .post-single-page .post-single__content.entry-content, .post-single-page .post-single__final-text.entry-content { font-size: calc(18 / 430 * 100vw); line-height: 1.5; } .post-single-page .post-single__section-content p, .post-single-page .post-single__content p, .post-single-page .entry-content p, .post-single-page .post-single__final-text p { margin: 0 0 calc(20 / 430 * 100vw); } .post-single-page .post-single__section-images { flex-direction: column; gap: calc(12 / 430 * 100vw); } .post-single-page .post-single__section-images--multi { gap: calc(12 / 430 * 100vw); } .post-single-page .post-single__section-images-row { flex-direction: column; height: auto; gap: calc(12 / 430 * 100vw); } .post-single-page .post-single__section-images-row .post-single__section-image--1 { flex: none; width: 100%; height: calc(262 / 430 * 100vw); } .post-single-page .post-single__section-images-row .post-single__section-image--2 { flex: none; width: 100%; height: calc(262 / 430 * 100vw); } .post-single-page .post-single__section-images .post-single__section-image { flex: none; width: 100%; height: calc(262 / 430 * 100vw); } .post-single-page .post-single__section-images .post-single__section-image--full { width: 100%; height: calc(262 / 430 * 100vw); } .post-single-page .post-single__section-image img { border-radius: calc(20 / 430 * 100vw); } .services-page .container { max-width: calc(398 / 430 * 100vw); } .services-page .services-grid .container { max-width: calc(398 / 430 * 100vw); } .services-page .hero.hero--small { min-height: calc(390 / 430 * 100vw); } .services-page .hero.hero--services .hero__title { font-size: calc(60 / 430 * 100vw); top: calc(185 / 430 * 100vw); left: 50%; transform: translateX(-50%); white-space: normal; text-align: center; width: calc(398 / 430 * 100vw); } .services-page .services-grid { padding-top: calc(32 / 430 * 100vw); padding-bottom: calc(32 / 430 * 100vw); } .services-page .services-grid__wrapper { flex-direction: column; gap: calc(30 / 430 * 100vw); } .services-page .service-card { width: 100%; height: calc(210 / 430 * 100vw); padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .services-page .service-card__top { gap: calc(30 / 430 * 100vw); } .services-page .service-card__title { font-size: calc(28 / 430 * 100vw); } .services-page .service-card__icon { width: calc(68 / 430 * 100vw); max-height: calc(68 / 430 * 100vw); } .services-page .service-card__more { font-size: calc(20 / 430 * 100vw); gap: calc(16 / 430 * 100vw); } .services-page .service-card__more span { font-size: calc(20 / 430 * 100vw); } .services-page .feedback { padding-top: calc(70 / 430 * 100vw); padding-bottom: calc(70 / 430 * 100vw); } .services-page .feedback .feedback__container { justify-content: center; max-width: calc(398 / 430 * 100vw); } .services-page .feedback .feedback-form { max-width: calc(398 / 430 * 100vw); padding: calc(40 / 430 * 100vw) calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .services-page .feedback .feedback-form__title { font-size: calc(40 / 430 * 100vw); line-height: 1.1; margin: 0 0 calc(20 / 430 * 100vw); } .services-page .feedback .feedback-form__subtitle { font-size: calc(20 / 430 * 100vw); margin: 0 0 calc(40 / 430 * 100vw); } .services-page .feedback .feedback-form__fields form, .services-page .feedback .feedback-form__fields .wpcf7-form { gap: calc(12 / 430 * 100vw); } .services-page .feedback .feedback-form__input, .services-page .feedback .feedback-form__select { font-size: calc(20 / 430 * 100vw); padding: calc(24 / 430 * 100vw) calc(20 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .services-page .feedback .feedback-form__row--half { grid-template-columns: 1fr; gap: calc(12 / 430 * 100vw); } .services-page .feedback .feedback-form__submit-wrapper { margin-top: calc(40 / 430 * 100vw); justify-content: center; } .services-page .feedback .feedback-form__submit-wrapper .wpcf7-submit, .services-page .feedback .feedback-form__submit-wrapper .btn-orange { font-size: calc(20 / 430 * 100vw); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); width: auto; } .service-detail .container { max-width: calc(398 / 430 * 100vw); } .service-detail .container--narrow { padding-bottom: calc(60 / 430 * 100vw); } .service-detail .container--narrow.section-padding { padding-bottom: calc(60 / 430 * 100vw); } .service-detail .hero.hero--small { padding-top: calc(145 / 430 * 100vw); } .service-detail .hero.hero--service .container { max-width: calc(398 / 430 * 100vw); } .service-detail .hero .breadcrumbs { gap: 0; margin: 0 0 calc(30 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .service-detail .hero .breadcrumbs::-webkit-scrollbar { display: none; } .service-detail .hero .breadcrumbs a, .service-detail .hero .breadcrumbs span { padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .service-detail .hero .breadcrumbs__current { white-space: nowrap; flex: none; } .service-detail .hero .hero__title { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(30 / 430 * 100vw); margin-right: 0; } .service-detail .hero .hero__text { font-size: calc(20 / 430 * 100vw); margin-right: 0; padding: calc(40 / 430 * 100vw) 0; } .service-detail .service-article { padding-top: calc(40 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .service-detail .service-article__section { gap: calc(30 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); padding-right: 0; } .service-detail .service-article__section-title { font-size: calc(28 / 430 * 100vw); white-space: normal; text-overflow: unset; overflow: visible; } .service-detail .service-article__section-content, .service-detail .service-article__content, .service-detail .service-article .entry-content { font-size: calc(18 / 430 * 100vw); } .service-detail .service-article__section-content p, .service-detail .service-article__content p, .service-detail .service-article .entry-content p { margin: 0 0 calc(20 / 430 * 100vw); } .service-detail .service-article__section-content ul, .service-detail .service-article__content ul, .service-detail .service-article .entry-content ul { margin: 0 0 calc(20 / 430 * 100vw); } .service-detail .service-article__section-content li, .service-detail .service-article__content li, .service-detail .service-article .entry-content li { margin-left: calc(20 / 430 * 100vw); margin-bottom: calc(10 / 430 * 100vw); } .service-detail .service-steps { margin-top: calc(40 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .service-detail .service-steps__main-title { font-size: calc(28 / 430 * 100vw); white-space: normal; text-overflow: unset; overflow: visible; margin: 0 0 calc(20 / 430 * 100vw); } .service-detail .service-steps__grid { grid-template-columns: 1fr; gap: calc(20 / 430 * 100vw); } .service-detail .step-card { padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); gap: calc(20 / 430 * 100vw); height: auto; } .service-detail .step-card__number { width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); font-size: calc(32 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); } .service-detail .step-card__title { font-size: calc(28 / 430 * 100vw); } .service-detail .step-card__text { font-size: calc(18 / 430 * 100vw); line-height: 1.5; } .service-detail .service-note { gap: calc(12 / 430 * 100vw); margin: calc(40 / 430 * 100vw) 0 0; padding-right: 0; font-size: calc(20 / 430 * 100vw); border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(40 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .service-detail .service-note::before { width: calc(40 / 430 * 100vw); height: calc(27 / 430 * 100vw); font-size: calc(89.888 / 430 * 100vw); line-height: 0.76; overflow: hidden; flex-shrink: 0; } .service-detail .related-services { padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .service-detail .related-services .container { max-width: calc(398 / 430 * 100vw); } .service-detail .related-services .section-title { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(40 / 430 * 100vw); } .service-detail .related-services .services-grid__wrapper { flex-direction: column; gap: calc(30 / 430 * 100vw); } .service-detail .related-services .service-card, .service-detail .related-services .service-card--small { width: 100%; height: calc(210 / 430 * 100vw); padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .service-detail .related-services .service-card__top, .service-detail .related-services .service-card--small .service-card__top { gap: calc(30 / 430 * 100vw); } .service-detail .related-services .service-card__title, .service-detail .related-services .service-card--small .service-card__title { font-size: calc(28 / 430 * 100vw); } .service-detail .related-services .service-card__icon { width: calc(68 / 430 * 100vw); max-height: calc(68 / 430 * 100vw); } .service-detail .related-services .service-card__more, .service-detail .related-services .service-card--small .service-card__more { font-size: calc(20 / 430 * 100vw); gap: calc(16 / 430 * 100vw); } .about-page .container { max-width: calc(398 / 430 * 100vw); } .about-page .container--narrow { max-width: calc(398 / 430 * 100vw); } .about-page .hero.hero--small { min-height: calc(390 / 430 * 100vw); } .about-page .hero.hero--about .container { max-width: calc(398 / 430 * 100vw); } .about-page .hero.hero--about .hero__title { top: calc(162 / 430 * 100vw); font-size: calc(60 / 430 * 100vw); width: calc(398 / 430 * 100vw); white-space: pre-wrap; text-align: center; } .about-page .about-tabs-nav { padding-top: calc(40 / 430 * 100vw); } .about-page .about-tabs-nav .container { max-width: calc(398 / 430 * 100vw); } .about-page .about-tabs-nav .tabs-list { gap: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .about-page .about-tabs-nav .tabs-list::-webkit-scrollbar { display: none; } .about-page .about-tabs-nav .tabs-list__item { font-size: calc(18 / 430 * 100vw); padding: calc(12 / 430 * 100vw) calc(10 / 430 * 100vw); white-space: nowrap; flex-shrink: 0; } .about-page .about-tab-content { padding-bottom: calc(60 / 430 * 100vw); } .about-page .about-tab-content .container { padding-top: calc(40 / 430 * 100vw); max-width: calc(398 / 430 * 100vw); } .about-page .about-tab-content .container--narrow { max-width: calc(398 / 430 * 100vw); padding-right: 0; } .about-page .about-title-large { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(20 / 430 * 100vw); } .about-page .about-intro .entry-content, .about-page .about-intro .about-subtitle+.entry-content, .about-page .clients-description.entry-content, .about-page .coop-text.entry-content { font-size: calc(18 / 430 * 100vw); } .about-page .about-intro .entry-content p, .about-page .clients-description.entry-content p, .about-page .coop-text.entry-content p { margin: 0 0 calc(20 / 430 * 100vw); } .about-page .about-main-img { margin: calc(24 / 430 * 100vw) 0; border-radius: calc(20 / 430 * 100vw); } .about-page .about-subtitle { font-size: calc(20 / 430 * 100vw); margin: calc(20 / 430 * 100vw) 0 calc(16 / 430 * 100vw); } .about-page .about-features .container { padding-top: calc(40 / 430 * 100vw); } .about-page .features-grid { grid-template-columns: 1fr; gap: calc(20 / 430 * 100vw); } .about-page .feature-card { padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .about-page .feature-card__title { font-size: calc(28 / 430 * 100vw); margin: 0 0 calc(20 / 430 * 100vw); } .about-page .feature-card__text { font-size: calc(18 / 430 * 100vw); } .about-page .team-section { padding-top: calc(40 / 430 * 100vw); } .about-page .team-section .section-title { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(40 / 430 * 100vw); } .about-page .team-grid { grid-template-columns: repeat(1, 1fr); gap: calc(40 / 430 * 100vw) calc(16 / 430 * 100vw); } .about-page .team-card__img { height: calc(376 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .about-page .team-card__name { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(20 / 430 * 100vw); white-space: normal; } .about-page .team-card__pos { font-size: calc(20 / 430 * 100vw); margin: 0 0 calc(20 / 430 * 100vw); white-space: normal; } .about-page .team-card__socials { gap: calc(10 / 430 * 100vw); } .about-page .team-card__socials a { width: calc(40 / 430 * 100vw); height: calc(40 / 430 * 100vw); } .about-page .team-card__socials a svg { width: calc(20 / 430 * 100vw); height: calc(20 / 430 * 100vw); } .about-page .requisites-section { padding-top: calc(40 / 430 * 100vw); } .about-page .requisites-section .section-title { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(30 / 430 * 100vw); } .about-page .req-grid { grid-template-columns: 1fr; gap: calc(12 / 430 * 100vw); margin-bottom: calc(30 / 430 * 100vw); } .about-page .req-card:nth-child(1), .about-page .req-card:nth-child(2), .about-page .req-card:nth-child(3), .about-page .req-card:nth-child(4), .about-page .req-card:nth-child(5), .about-page .req-card:nth-child(6), .about-page .req-card:nth-child(7) { grid-column: span 1; } .about-page .req-card { padding: calc(20 / 430 * 100vw); gap: calc(12 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .about-page .req-card__label { font-size: calc(18 / 430 * 100vw); } .about-page .req-card__val { font-size: calc(16 / 430 * 100vw); } .about-page .req-footer .btn-orange, .about-page .btn-orange.btn-wide { font-size: calc(20 / 430 * 100vw); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); width: 100%; justify-content: center; } .about-page .clients-intro { gap: calc(20 / 430 * 100vw); margin-bottom: calc(40 / 430 * 100vw); } .about-page .clients-logos { margin: calc(20 / 430 * 100vw) 0; padding: calc(20 / 430 * 100vw) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .about-page .clients-logos::-webkit-scrollbar { display: none; } .about-page .clients-logos .swiper-wrapper { flex-wrap: nowrap; justify-content: flex-start; gap: calc(16 / 430 * 100vw); } .about-page .client-logo-item { height: calc(80 / 430 * 100vw); min-width: calc(128 / 430 * 100vw); flex-shrink: 0; } .about-page .client-logo-item img { max-height: calc(80 / 430 * 100vw); } .about-page .bottom-services { padding-top: calc(40 / 430 * 100vw); } .about-page .bottom-services .container { max-width: calc(398 / 430 * 100vw); } .about-page .bottom-services .services-grid__wrapper { flex-direction: column; gap: calc(30 / 430 * 100vw); } .about-page .bottom-services .service-card, .about-page .bottom-services .service-card--small { width: 100%; height: calc(210 / 430 * 100vw); padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .about-page .bottom-services .service-card__top, .about-page .bottom-services .service-card--small .service-card__top { gap: calc(30 / 430 * 100vw); } .about-page .bottom-services .service-card__title, .about-page .bottom-services .service-card--small .service-card__title { font-size: calc(28 / 430 * 100vw); } .about-page .bottom-services .service-card__icon { width: calc(68 / 430 * 100vw); max-height: calc(68 / 430 * 100vw); } .about-page .bottom-services .service-card__more { font-size: calc(20 / 430 * 100vw); gap: calc(16 / 430 * 100vw); } .about-page .coop-content { gap: calc(20 / 430 * 100vw); } .about-page .coop-text.entry-content { font-size: calc(18 / 430 * 100vw); } .about-page .coop-actions { flex-direction: column; align-items: stretch; gap: calc(12 / 430 * 100vw); } .about-page .coop-actions .btn-orange { font-size: calc(20 / 430 * 100vw); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); width: 100%; justify-content: center; } .about-page .coop-actions .btn-dark-blue { font-size: calc(20 / 430 * 100vw); padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); width: 100%; justify-content: center; } .delivery-page .container { max-width: calc(398 / 430 * 100vw); } .delivery-page .container--narrow { max-width: 100%; max-width: calc(398 / 430 * 100vw); padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); padding-right: 0; } .delivery-page .hero.hero--small { padding-top: calc(145 / 430 * 100vw); padding-bottom: 0; } .delivery-page .hero.hero--delivery .container { max-width: calc(398 / 430 * 100vw); } .delivery-page .hero .hero__title { font-size: calc(32 / 430 * 100vw); line-height: 1.1; margin-bottom: calc(30 / 430 * 100vw); } .delivery-page .hero .hero__text { font-size: calc(20 / 430 * 100vw); line-height: 1.3; padding: calc(40 / 430 * 100vw) 0; } .delivery-page .delivery-steps-section { margin-bottom: calc(60 / 430 * 100vw); } .delivery-page .delivery-subtitle { font-size: calc(28 / 430 * 100vw); white-space: normal; margin-bottom: calc(30 / 430 * 100vw); } .delivery-page .steps-grid { grid-template-columns: 1fr; gap: calc(20 / 430 * 100vw); width: 100%; } .delivery-page .delivery-steps-section .step-card { padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .delivery-page .delivery-steps-section .step-card__number { width: calc(60 / 430 * 100vw); height: calc(60 / 430 * 100vw); font-size: calc(32 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); margin-bottom: calc(20 / 430 * 100vw); } .delivery-page .delivery-steps-section .step-card>*:not(:last-child) { margin-bottom: calc(20 / 430 * 100vw); } .delivery-page .delivery-steps-section .step-card__title { font-size: calc(28 / 430 * 100vw); line-height: 1.1; } .delivery-page .delivery-steps-section .step-card>*:not(:last-child) { margin-bottom: calc(20 / 430 * 100vw); } .delivery-page .delivery-steps-section .step-card__text { font-size: calc(18 / 430 * 100vw); line-height: 1.3; } .delivery-page .delivery-info-blocks { gap: calc(60 / 430 * 100vw); } .delivery-page .info-block__title { font-size: calc(28 / 430 * 100vw); line-height: 1.1; margin-bottom: calc(30 / 430 * 100vw); } .delivery-page .info-block__content.entry-content { font-size: calc(18 / 430 * 100vw); line-height: 1.3; } .delivery-page .info-block__content p { margin-bottom: calc(20 / 430 * 100vw); } .delivery-page .info-block__content ul { margin-bottom: calc(20 / 430 * 100vw); } .delivery-page .info-block__content li { margin-bottom: calc(10 / 430 * 100vw); } .delivery-page .related-services { padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .delivery-page .related-services .container { max-width: 100%; max-width: calc(398 / 430 * 100vw); } .delivery-page .related-services .services-grid__wrapper { flex-direction: column; gap: calc(30 / 430 * 100vw); } .delivery-page .related-services .service-card, .delivery-page .related-services .service-card--small { width: 100%; height: calc(210 / 430 * 100vw); padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .delivery-page .related-services .service-card__top, .delivery-page .related-services .service-card--small .service-card__top { gap: calc(30 / 430 * 100vw); } .delivery-page .related-services .service-card__title, .delivery-page .related-services .service-card--small .service-card__title { font-size: calc(28 / 430 * 100vw); line-height: 1.1; } .delivery-page .related-services .service-card__icon { width: calc(68 / 430 * 100vw); height: calc(68 / 430 * 100vw); max-height: calc(68 / 430 * 100vw); } .delivery-page .related-services .service-card__more { font-size: calc(20 / 430 * 100vw); gap: calc(16 / 430 * 100vw); } } .product-item__add-cart--in-cart { width: auto !important; min-width: calc(120 / 1920 * 100vw); border-radius: calc(66.667 / 1920 * 100vw) !important; padding: 0 calc(10 / 1920 * 100vw); gap: calc(8 / 1920 * 100vw); } .product-item__cart-minus, .product-item__cart-plus { display: flex; align-items: center; justify-content: center; width: calc(28 / 1920 * 100vw); height: calc(28 / 1920 * 100vw); font-size: calc(20 / 1920 * 100vw); font-weight: var(--font-weight-medium); line-height: 1; cursor: pointer; border-radius: 50%; transition: background-color 0.15s; flex-shrink: 0; } .product-item__cart-minus:hover, .product-item__cart-plus:hover { background-color: rgba(255, 255, 255, 0.2); } .product-item__cart-qty { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(18 / 1920 * 100vw); line-height: 1; min-width: calc(20 / 1920 * 100vw); text-align: center; } .product-page .btn-orange.btn-large.js-add-to-cart--in-cart { cursor: default; } .js-add-to-cart__counter { display: none; align-items: center; justify-content: center; gap: calc(16 / 1920 * 100vw); } .js-add-to-cart__minus, .js-add-to-cart__plus { display: flex; align-items: center; justify-content: center; width: calc(36 / 1920 * 100vw); height: calc(36 / 1920 * 100vw); font-size: calc(24 / 1920 * 100vw); font-weight: var(--font-weight-medium); line-height: 1; cursor: pointer; border-radius: 50%; transition: background-color 0.15s; flex-shrink: 0; } .js-add-to-cart__minus:hover, .js-add-to-cart__plus:hover { background-color: rgba(255, 255, 255, 0.2); } .js-add-to-cart__qty { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(22 / 1920 * 100vw); line-height: 1; min-width: calc(24 / 1920 * 100vw); text-align: center; } .cart-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .cart-modal.is-open { visibility: visible; opacity: 1; } .cart-modal__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.55); cursor: pointer; } .cart-modal__inner { position: relative; z-index: 1; display: flex; flex-direction: column; background-color: var(--color-white); border-radius: calc(40 / 1920 * 100vw); padding: calc(80 / 1920 * 100vw) 0; width: calc(1480 / 1920 * 100vw); max-width: 94vw; max-height: 92vh; overflow: hidden; transform: translateY(calc(-20 / 1920 * 100vw)); transition: transform 0.3s; box-sizing: border-box; } .cart-modal__scroll { flex: 1; min-height: 0; padding: 0 calc(100 / 1920 * 100vw); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-orange) transparent; } .cart-modal.is-open .cart-modal__inner { transform: translateY(0); } .cart-modal__close { position: absolute; top: calc(50 / 1920 * 100vw); right: calc(50 / 1920 * 100vw); width: calc(30 / 1920 * 100vw); height: calc(30 / 1920 * 100vw); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-primary); padding: 0; transition: opacity 0.2s; } .cart-modal__close:hover { opacity: 0.6; } .cart-modal__close svg { width: calc(30 / 1920 * 100vw); height: calc(30 / 1920 * 100vw); } .cart-modal__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); color: #000000; text-align: center; margin: 0 0 calc(30 / 1920 * 100vw); line-height: 1; } .cart-modal__subtitle { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: calc(20 / 1920 * 100vw); color: #000000; text-align: center; margin: 0 0 calc(100 / 1920 * 100vw); line-height: 1.3; } .cart-modal__items { display: flex; flex-direction: column; } .cart-modal__empty { text-align: center; color: var(--color-primary); font-size: calc(20 / 1920 * 100vw); padding: calc(40 / 1920 * 100vw) 0 calc(100 / 1920 * 100vw); } .cart-item { display: flex; align-items: center; justify-content: space-between; gap: calc(10 / 1920 * 100vw); padding: calc(40 / 1920 * 100vw) 0; border-bottom: 1px solid #bdbdbd; } .cart-item__remove { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; /* color: var(--color-primary); */ opacity: 0.5; padding: 0; flex-shrink: 0; width: calc(40 / 1920 * 100vw); height: calc(42 / 1920 * 100vw); transition: opacity 0.2s; } .cart-item__remove:hover { opacity: 1; } .cart-item__remove svg { width: calc(22 / 1920 * 100vw); height: calc(22 / 1920 * 100vw); } .cart-item__media-info { display: flex; align-items: center; gap: calc(30 / 1920 * 100vw); flex: 1 1 0; min-width: 0; } .cart-item__img { width: calc(106 / 1920 * 100vw); height: calc(106 / 1920 * 100vw); object-fit: cover; border-radius: calc(20 / 1920 * 100vw); flex-shrink: 0; } .cart-item__img-placeholder { width: calc(106 / 1920 * 100vw); height: calc(106 / 1920 * 100vw); background-color: rgba(0, 65, 86, 0.08); border-radius: calc(20 / 1920 * 100vw); flex-shrink: 0; } .cart-item__text { display: flex; flex-direction: column; gap: calc(14 / 1920 * 100vw); flex: 1 1 0; min-width: 0; } .cart-item__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(32 / 1920 * 100vw); color: #000000; margin: 0; line-height: 1.1; } .cart-item__controls { display: flex; align-items: center; justify-content: center; height: calc(60 / 1920 * 100vw); padding: calc(10 / 1920 * 100vw) calc(16 / 1920 * 100vw); gap: calc(30 / 1920 * 100vw); border: 1px solid #9696963D; border-radius: calc(66.667 / 1920 * 100vw); flex-shrink: 0; } .cart-item__minus, .cart-item__plus { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; font-family: var(--font-family-base); font-size: calc(22 / 1920 * 100vw); font-weight: var(--font-weight-medium); color: var(--color-orange); line-height: 1; padding: 0; flex-shrink: 0; transition: opacity 0.15s; } .cart-item__minus:hover, .cart-item__plus:hover { opacity: 0.7; } .cart-item__qty { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); color: var(--color-orange); line-height: 1; min-width: calc(20 / 1920 * 100vw); text-align: center; } .cart-item__price-row { display: flex; align-items: center; gap: calc(20 / 1920 * 100vw); flex-shrink: 0; } .cart-item__price { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(32 / 1920 * 100vw); color: #000000; line-height: 1.1; } .cart-item__old-price { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: calc(32 / 1920 * 100vw); color: #bdbdbd; text-decoration: line-through; line-height: 1.1; } .cart-item__price-row--mobile { display: none; } .cart-item__price-row--desktop { display: flex; } .cart-modal__total { display: flex; justify-content: flex-end; align-items: center; gap: calc(14 / 1920 * 100vw); padding: calc(40 / 1920 * 100vw) 0 calc(100 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(32 / 1920 * 100vw); color: #fc896f; line-height: 1.1; } .cart-modal__total-sum { font-weight: var(--font-weight-semibold); font-size: calc(32 / 1920 * 100vw); color: #fc896f; } .cart-modal__form .wpcf7-form { display: flex; flex-direction: row; flex-wrap: wrap; gap: calc(18 / 1920 * 100vw); align-items: stretch; position: relative; } .cart-modal__form .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; } .cart-modal__form .wpcf7-form-control-wrap input, .cart-modal__form .wpcf7-form-control-wrap select { width: 100%; padding: calc(24 / 1920 * 100vw) calc(20 / 1920 * 100vw); font-family: var(--font-family-base); font-size: calc(20 / 1920 * 100vw); font-weight: var(--font-weight-regular); color: #787878; background-color: rgba(243, 243, 243, 0.1); border: 1px solid rgba(150, 150, 150, 0.24); border-radius: calc(20 / 1920 * 100vw); outline: none; transition: border-color 0.2s; box-sizing: border-box; appearance: none; -webkit-appearance: none; line-height: 1.3; } .cart-modal__form .wpcf7-form-control-wrap input:focus, .cart-modal__form .wpcf7-form-control-wrap select:focus { border-color: var(--color-orange); } .cart-modal__form .wpcf7-form-control-wrap input::placeholder, .cart-modal__form .wpcf7-form-control-wrap select::placeholder { color: #787878; } .cart-modal__form .wpcf7-form-control-wrap input.wpcf7-not-valid, .cart-modal__form .wpcf7-form-control-wrap select.wpcf7-not-valid { border-color: #dc3232; } .cart-modal__form .wpcf7-form-control-wrap input.wpcf7-not-valid::placeholder, .cart-modal__form .wpcf7-form-control-wrap select.wpcf7-not-valid::placeholder { color: #dc3232; } .cart-modal__form .wpcf7-not-valid-tip { display: none; } .cart-modal__form .wpcf7-submit { padding: calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); color: var(--color-white); background-color: var(--color-orange); border: none; border-radius: calc(20 / 1920 * 100vw); cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; white-space: nowrap; align-self: stretch; line-height: 1; } .cart-modal__form .wpcf7-submit:hover { background-color: var(--color-orange-hover); } .cart-modal__form .wpcf7-spinner { display: none; } .cart-modal__form .wpcf7 form .wpcf7-response-output { margin: 0; padding: calc(20 / 1920 * 100vw) calc(24 / 1920 * 100vw); border: none; border-radius: var(--radius-md); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; letter-spacing: 0; text-align: center; /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ width: 100%; height: auto; color: var(--color-neutral-900); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* animation: fade 4s cubic-bezier(1, 0, 1, 1) forwards; */ } .cart-modal__form .wpcf7 form.sent .wpcf7-response-output { background: #46b44f; /* animation: fade 10s cubic-bezier(1, 0, 1, 1) forwards; */ } .cart-modal__form .wpcf7 form.failed .wpcf7-response-output, .cart-modal__form .wpcf7 form.aborted .wpcf7-response-output { background: #dc3232; /* animation: fade 5s cubic-bezier(1, 0, 1, 1) forwards; */ } .cart-modal__form .wpcf7 form.spam .wpcf7-response-output { background: #f56e28; /* animation: fade 5s cubic-bezier(1, 0, 1, 1) forwards; */ } .cart-modal__form .wpcf7 form.invalid .wpcf7-response-output, .cart-modal__form .wpcf7 form.unaccepted .wpcf7-response-output, .cart-modal__form .wpcf7 form.payment-required .wpcf7-response-output { background: #ffb900; /* animation: fade 5s cubic-bezier(1, 0, 1, 1) forwards; */ } body.cart-modal-open { overflow: hidden; } .transportation-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .transportation-page .hero.hero--small { min-height: calc(415 / 1920 * 100vw); padding-top: 0; padding-bottom: 0; position: relative; box-sizing: border-box; } .transportation-page .hero.hero--small.hero--transportation { background-size: cover; background-position: 70% 50%; background-repeat: no-repeat; } .transportation-page .hero.hero--transportation .container { padding-left: 0; padding-right: 0; position: relative; } .transportation-page .hero.hero--transportation .hero__title { position: absolute; left: 50%; top: calc(215 / 1920 * 100vw); transform: translateX(-50%); font-family: var(--font-family-base); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); margin: 0; white-space: nowrap; box-sizing: border-box; } .transportation-intro { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .transportation-intro .container { display: flex; flex-direction: column; gap: calc(80 / 1920 * 100vw); box-sizing: border-box; } .transportation-intro__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); box-sizing: border-box; } .transportation-intro__description { border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); padding-top: calc(40 / 1920 * 100vw); padding-bottom: calc(40 / 1920 * 100vw); margin-top: calc(-80 / 1920 * 100vw); box-sizing: border-box; } .transportation-intro__description p { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1.3; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .transportation-intro__subtitle { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .transportation-intro__grid { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } .transportation-page .service-card { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0px 0px 20px 0px #f1f1f1; padding: calc(36 / 1920 * 100vw); width: calc(510.667 / 1920 * 100vw); height: calc(300 / 1920 * 100vw); flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; transition: box-shadow 0.2s; box-sizing: border-box; } .transportation-page .service-card:hover { box-shadow: 0px 0px 30px 0px rgba(241, 241, 241, 0.8); } .transportation-page .service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(30 / 1920 * 100vw); width: 100%; box-sizing: border-box; } .transportation-page .service-card__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; flex: 1 1 0; min-width: 0; box-sizing: border-box; } .transportation-page .service-card__icon { flex-shrink: 0; width: calc(80 / 1920 * 100vw); height: auto; max-height: calc(80 / 1920 * 100vw); object-fit: contain; display: block; box-sizing: border-box; } .transportation-page .service-card__more { display: inline-flex; align-items: center; gap: calc(16 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1; color: var(--color-primary-hover); text-decoration: none; transition: color 0.2s; box-sizing: border-box; } .transportation-page .service-card__more:hover { color: var(--color-primary); } .transportation-page .service-card__more span { display: inline-block; font-size: var(--font-size-base); } .transportation-promo { position: relative; min-height: calc(900 / 1920 * 100vw); box-sizing: border-box; margin: calc(25 / 1920 * 100vw) 0 calc(170 / 1920 * 100vw); background: #F3F3F3; } .transportation-promo .container { position: relative; z-index: 1; } .transportation-promo__content { padding-top: calc(100 / 1920 * 100vw); box-sizing: border-box; } .transportation-promo__title { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-5xl); line-height: 1; color: #000000; margin: 0; box-sizing: border-box; text-align: center; } .transportation-promo__title .transportation-promo__accent { color: var(--color-primary); } .transportation-promo__image-wrapper { position: absolute; left: calc(20 / 1920 * 100vw); top: calc(185 / 1920 * 100vw); width: calc(1323 / 1920 * 100vw); height: calc(1000 / 1920 * 100vw); box-sizing: border-box; } .transportation-promo__img { width: 100%; height: 100%; object-fit: contain; box-sizing: border-box; } .transportation-advantages { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); box-sizing: border-box; } .transportation-advantages .container { display: flex; flex-direction: column; gap: calc(60 / 1920 * 100vw); box-sizing: border-box; } .transportation-advantages__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .transportation-advantages__content { display: flex; flex-direction: column; gap: calc(30 / 1920 * 100vw); box-sizing: border-box; } .transportation-advantages__content p { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: calc(24 / 1920 * 100vw); line-height: 1.5; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .transportation-advantages__content h3, .transportation-advantages__content h4 { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(24 / 1920 * 100vw); line-height: 1.5; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .transportation-advantages__content ul, .transportation-advantages__content ol { margin: 0; padding-left: calc(36 / 1920 * 100vw); display: flex; flex-direction: column; gap: calc(10 / 1920 * 100vw); box-sizing: border-box; } .transportation-advantages__content li { font-family: var(--font-family-base); font-weight: var(--font-weight-normal); font-size: calc(24 / 1920 * 100vw); line-height: 1.5; color: var(--color-neutral-900); box-sizing: border-box; } .transportation-advantages__content li strong, .transportation-advantages__content li b { font-weight: var(--font-weight-semibold); } .transportation-bottom-services { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .transportation-bottom-services .services-grid__wrapper { display: flex; flex-wrap: wrap; gap: calc(20 / 1920 * 100vw); box-sizing: border-box; } @media (max-width: 768px) { .product-item__add-cart--in-cart { min-width: calc(120 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw) !important; padding: 0 calc(10 / 430 * 100vw); gap: calc(6 / 430 * 100vw); } .product-item__cart-minus, .product-item__cart-plus { width: calc(28 / 430 * 100vw); height: calc(28 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); } .product-item__cart-qty { font-size: calc(16 / 430 * 100vw); min-width: calc(16 / 430 * 100vw); } .js-add-to-cart__counter { gap: calc(16 / 430 * 100vw); } .js-add-to-cart__minus, .js-add-to-cart__plus { width: calc(36 / 430 * 100vw); height: calc(36 / 430 * 100vw); font-size: calc(22 / 430 * 100vw); } .js-add-to-cart__qty { font-size: calc(20 / 430 * 100vw); min-width: calc(20 / 430 * 100vw); } .cart-modal { align-items: flex-start; } .cart-modal__inner { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; padding: calc(100 / 430 * 100vw) 0 calc(40 / 430 * 100vw); overflow: hidden; transform: translateY(calc(-30 / 430 * 100vw)); } .cart-modal__scroll { padding: 0 calc(16 / 430 * 100vw); } .cart-modal.is-open .cart-modal__inner { transform: translateY(0); } .cart-modal__close { top: calc(20 / 430 * 100vw); right: calc(20 / 430 * 100vw); width: calc(30 / 430 * 100vw); height: calc(30 / 430 * 100vw); } .cart-modal__close svg { width: calc(30 / 430 * 100vw); height: calc(30 / 430 * 100vw); } .cart-modal__title { font-size: calc(40 / 430 * 100vw); margin-bottom: calc(20 / 430 * 100vw); } .cart-modal__subtitle { font-size: calc(20 / 430 * 100vw); margin-bottom: calc(70 / 430 * 100vw); } .cart-item { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: calc(20 / 430 * 100vw); padding: calc(40 / 430 * 100vw) 0; } .cart-item__media-info { flex: 1 1 100%; gap: calc(20 / 430 * 100vw); width: 100%; } .cart-item__price-row--mobile { display: flex; } .cart-item__price-row--desktop { display: none; } .cart-item__remove { order: 3; } .cart-item__controls { order: 4; } .cart-item__media-info { order: 1; flex: 1 1 100%; } .cart-item__img, .cart-item__img-placeholder { width: calc(106 / 430 * 100vw); height: calc(106 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .cart-item__text { gap: calc(30 / 430 * 100vw); } .cart-item__title { font-size: calc(24 / 430 * 100vw); } .cart-item__price { font-size: calc(24 / 430 * 100vw); } .cart-item__old-price { font-size: calc(24 / 430 * 100vw); } .cart-item__price-row { gap: calc(20 / 430 * 100vw); } .cart-item__remove { width: calc(40 / 430 * 100vw); height: calc(42 / 430 * 100vw); } .cart-item__remove svg { width: calc(22 / 430 * 100vw); height: calc(22 / 430 * 100vw); } .cart-item__controls { height: calc(60 / 430 * 100vw); padding: 0 calc(16 / 430 * 100vw); margin-left: calc(67 / 430 * 100vw); gap: calc(30 / 430 * 100vw); border-radius: calc(66.667 / 430 * 100vw); border: 1px solid #9696963D; } .cart-item__minus, .cart-item__plus { font-size: calc(22 / 430 * 100vw); } .cart-item__qty { font-size: calc(28 / 430 * 100vw); min-width: calc(20 / 430 * 100vw); } .cart-modal__total { font-size: calc(24 / 430 * 100vw); padding: calc(40 / 430 * 100vw) 0 calc(70 / 430 * 100vw); gap: calc(14 / 430 * 100vw); } .cart-modal__total-sum { font-size: calc(24 / 430 * 100vw); } .cart-modal__form .wpcf7-form { flex-direction: column; gap: calc(18 / 430 * 100vw); } .cart-modal__form .wpcf7-form-control-wrap { flex: unset; width: 100%; } .cart-modal__form .wpcf7-form-control-wrap input, .cart-modal__form .wpcf7-form-control-wrap select { font-size: calc(20 / 430 * 100vw); padding: calc(24 / 430 * 100vw) calc(20 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .cart-modal__form .wpcf7-submit { width: auto; align-self: center; padding: calc(20 / 430 * 100vw) calc(40 / 430 * 100vw); font-size: calc(20 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); } .cart-modal__form .wpcf7 form .wpcf7-response-output { padding: calc(20 / 430 * 100vw) calc(24 / 430 * 100vw); border-radius: calc(20 / 430 * 100vw); font-size: calc(16 / 430 * 100vw); width: 100%; } .cart-modal__empty { font-size: calc(20 / 430 * 100vw); padding: calc(40 / 430 * 100vw) 0 calc(70 / 430 * 100vw); } .transportation-page .container { max-width: calc(398 / 430 * 100vw); } .transportation-page .hero.hero--small { min-height: calc(390 / 430 * 100vw); } .transportation-page .hero.hero--transportation .hero__title { font-size: calc(48 / 430 * 100vw); top: calc(185 / 430 * 100vw); left: 50%; transform: translateX(-50%); white-space: normal; text-align: center; width: calc(398 / 430 * 100vw); } .transportation-intro { padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .transportation-intro .container { gap: calc(40 / 430 * 100vw); } .transportation-intro__title { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(40 / 430 * 100vw); } .transportation-intro__description { padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(40 / 430 * 100vw); margin-top: calc(-40 / 430 * 100vw); } .transportation-intro__description p { font-size: calc(20 / 430 * 100vw); } .transportation-intro__subtitle { font-size: calc(28 / 430 * 100vw); } .transportation-page .services-grid__wrapper { flex-direction: column; gap: calc(30 / 430 * 100vw); } .transportation-page .service-card { width: 100%; height: calc(210 / 430 * 100vw); padding: calc(26 / 430 * 100vw); border-radius: calc(40 / 430 * 100vw); } .transportation-page .service-card__top { gap: calc(20 / 430 * 100vw); } .transportation-page .service-card__title { font-size: calc(28 / 430 * 100vw); } .transportation-page .service-card__icon { width: calc(68 / 430 * 100vw); max-height: calc(68 / 430 * 100vw); } .transportation-page .service-card__more { font-size: calc(20 / 430 * 100vw); gap: calc(12 / 430 * 100vw); } .transportation-promo { min-height: calc(329 / 430 * 100vw); align-items: flex-start; margin: calc(60 / 430 * 100vw) 0 calc(66 / 430 * 100vw); } .transportation-promo__content { padding-top: calc(26 / 430 * 100vw); } .transportation-promo__title { font-size: calc(38 / 430 * 100vw); text-align: center; } .transportation-promo__image-wrapper { left: calc(-45 / 430 * 100vw); top: calc(85 / 430 * 100vw); width: calc(408 / 430 * 100vw); height: calc(318 / 430 * 100vw); } .transportation-advantages { padding-top: calc(60 / 430 * 100vw); } .transportation-advantages .container { gap: calc(40 / 430 * 100vw); } .transportation-advantages__title { font-size: calc(28 / 430 * 100vw); } .transportation-advantages__content { gap: calc(20 / 430 * 100vw); } .transportation-advantages__content p, .transportation-advantages__content h3, .transportation-advantages__content h4, .transportation-advantages__content li { font-size: calc(20 / 430 * 100vw); } .transportation-advantages__content ul, .transportation-advantages__content ol { padding-left: calc(24 / 430 * 100vw); gap: calc(8 / 430 * 100vw); } .transportation-bottom-services { padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .transportation-bottom-services .services-grid__wrapper { flex-direction: column; gap: calc(30 / 430 * 100vw); } } .geo-page .hero.hero--small { min-height: calc(415 / 1920 * 100vw); padding-top: 0; padding-bottom: 0; position: relative; box-sizing: border-box; } .geo-page .hero.hero--small.hero--geo { background-size: cover; background-position: 70% 50%; background-repeat: no-repeat; } .geo-page .container { width: 100%; max-width: calc(1572 / 1920 * 100vw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .geo-page .hero.hero--geo .container { padding-left: 0; padding-right: 0; position: relative; } .geo-page .hero.hero--geo .hero__title { position: absolute; left: 50%; top: calc(215 / 1920 * 100vw); transform: translateX(-50%); font-family: var(--font-family-base); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); margin: 0; white-space: nowrap; box-sizing: border-box; } .geo-cities { background-color: var(--color-white); padding-top: calc(100 / 1920 * 100vw); padding-bottom: calc(100 / 1920 * 100vw); box-sizing: border-box; } .geo-cities__container { display: flex; flex-direction: column; gap: calc(80 / 1920 * 100vw); box-sizing: border-box; } .geo-cities__title { font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(60 / 1920 * 100vw); line-height: 1.1; color: var(--color-neutral-900); margin: 0 0 calc(30 / 1920 * 100vw); box-sizing: border-box; } .geo-cities>.container>.geo-cities__description, .geo-cities__container>.geo-cities__description { border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); padding-top: calc(40 / 1920 * 100vw); padding-bottom: calc(40 / 1920 * 100vw); margin-top: calc(-80 / 1920 * 100vw); box-sizing: border-box; } .geo-cities>.container>.geo-cities__description p, .geo-cities__container>.geo-cities__description p { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: calc(28 / 1920 * 100vw); line-height: 1.3; color: var(--color-neutral-900); margin: 0; box-sizing: border-box; } .geo-cities__list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 / 1920 * 100vw); box-sizing: border-box; } .geo-cities__col { flex: 1; display: flex; flex-direction: column; gap: calc(32 / 1920 * 100vw); } .geo-cities__item { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; box-sizing: border-box; height: max-content; } .geo-cities__button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(40 / 1920 * 100vw); padding: calc(60 / 1920 * 100vw); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); font-size: calc(40 / 1920 * 100vw); line-height: 1.1; color: var(--color-text); text-align: left; background: var(--color-neutral-200); border: none; cursor: pointer; transition: color 0.2s; box-sizing: border-box; } .geo-cities__button:hover { color: var(--color-orange); } .geo-cities__item.is-open .geo-cities__button { color: var(--color-orange); } .geo-cities__icon { flex-shrink: 0; width: calc(40 / 1920 * 100vw); height: calc(44 / 1920 * 100vw); transition: transform 0.2s; color: currentColor; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .geo-cities__item.is-open .geo-cities__icon { transform: rotate(180deg); } .geo-cities__item .geo-cities__description { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; box-sizing: border-box; border-top: none; border-bottom: none; padding-top: 0; padding-bottom: 0; margin-top: 0; background: var(--color-neutral-200); } .geo-cities__item.is-open .geo-cities__description { max-height: calc(2000 / 1920 * 100vw); } .geo-cities__description-text { padding: 0 calc(60 / 1920 * 100vw) calc(60 / 1920 * 100vw); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.3; color: var(--color-text); margin: 0; box-sizing: border-box; } .geo-cities__description-text p { margin: 0; } .geo-cities__description-text p:last-child { margin-bottom: 0; } .geo-cities__map { width: 100%; height: 600px; border-radius: 30px; overflow: hidden; box-sizing: border-box; } .geo-cities__map iframe, .geo-cities__map>div { width: 100%; height: 100%; display: block; } @media (max-width: 768px) { .geo-page .container { max-width: calc(398 / 430 * 100vw); } .geo-page .hero.hero--small { min-height: calc(390 / 430 * 100vw); } .geo-page .hero.hero--geo .hero__title { font-size: calc(48 / 430 * 100vw); top: calc(185 / 430 * 100vw); left: 50%; transform: translateX(-50%); white-space: normal; text-align: center; width: calc(398 / 430 * 100vw); } .geo-cities { padding-top: calc(60 / 430 * 100vw); padding-bottom: calc(60 / 430 * 100vw); } .geo-cities__container { gap: calc(40 / 430 * 100vw); } .geo-cities__title { font-size: calc(32 / 430 * 100vw); margin: 0 0 calc(40 / 430 * 100vw); } .geo-cities>.container>.geo-cities__description, .geo-cities__container>.geo-cities__description { padding-top: calc(40 / 430 * 100vw); padding-bottom: calc(40 / 430 * 100vw); margin-top: calc(-40 / 430 * 100vw); } .geo-cities>.container>.geo-cities__description p, .geo-cities__container>.geo-cities__description p { font-size: calc(20 / 430 * 100vw); } .geo-cities__list { grid-template-columns: 1fr; gap: calc(20 / 430 * 100vw); } .geo-cities__col { gap: calc(20 / 430 * 100vw); } .geo-cities__item { border-radius: calc(30 / 430 * 100vw); } .geo-cities__button { padding: calc(26 / 430 * 100vw); font-size: calc(24 / 430 * 100vw); gap: calc(40 / 430 * 100vw); } .geo-cities__icon { width: calc(40 / 430 * 100vw); height: calc(44 / 430 * 100vw); flex-shrink: 0; } .geo-cities__item.is-open .geo-cities__description { max-height: calc(3000 / 430 * 100vw); } .geo-cities__description-text { padding: 0 calc(26 / 430 * 100vw) calc(26 / 430 * 100vw); font-size: calc(18 / 430 * 100vw); } .geo-cities__map { height: 300px; border-radius: 30px; } } /* Custom UI Improvements */ .header__contacts { display: none; } .actions__phone { display: flex; align-items: center; justify-content: center; color: #fff; margin-right: 15px; transition: opacity 0.3s ease; } .actions__phone:hover { opacity: 0.8; } .header--light .actions__phone { color: var(--color-secondary); } @media (min-width: 992px) { .header__contacts { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; margin-right: 24px; } .header__contact { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.2; transition: opacity 0.3s ease; } .header__contact:hover { opacity: 0.8; } .header--light .header__contact { color: var(--color-secondary); } .actions__phone { display: none !important; } } @media (max-width: 991px) { .header__actions.actions { gap: 10px; } .actions__cart, .actions__phone, .burger { transform: scale(0.9); transform-origin: right center; } } /* Feedback Form Error Positioning Fix */ .feedback-form { position: relative; } .feedback-form__fields { position: relative; } .feedback-form__errors { position: absolute; bottom: -15px; left: 0; width: 100%; transform: translateY(100%); z-index: 10; } .catalog__section-description { margin-top: 40px; line-height: 1.6; } .product-page .product-slider { width: 100%; padding: 0; margin: 0; border-radius: inherit; } .product-page .product-slider .product-gallery-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; font-size: 32px; line-height: 1; cursor: pointer; } .product-page .product-slider .product-gallery-arrow::after { display: none; } .product-page .product-slider .swiper-button-prev { left: 12px; } .product-page .product-slider .swiper-button-next { right: 12px; } .product-page .product-bottom-grid--gallery { display: grid; grid-template-columns: calc(648 / 1920 * 100vw) minmax(0, 1fr); gap: calc(71 / 1920 * 100vw); max-width: calc(1410 / 1920 * 100vw); align-items: start; } .product-page .product-bottom-grid > * { min-width: 0; } .product-page .product-photos__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .product-page .product-photos__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #f5f6f7; cursor: pointer; } .product-page .product-photos__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .product-page .product-photos__thumb.is-active { border-color: #ff7854; } .product-page .product-photos__thumb:focus-visible, .product-page .product-gallery-arrow:focus-visible { outline: 3px solid #004156; outline-offset: 3px; } @media (max-width: 768px) { .product-page .product-bottom-grid--gallery { grid-template-columns: minmax(0, 1fr); max-width: 100%; gap: 24px; } .product-page .product-photos { order: -1; } } /* Центрируем кнопки относительно высоты фотографии */ .product-page .product-slider .product-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; border: 0; width: 44px; height: 44px; box-sizing: border-box; display: grid; place-items: center; } .product-page .product-slider .product-gallery-arrow > span, .product-page .product-slider .product-gallery-arrow::after { display: none; } .product-page .product-slider .product-gallery-arrow::before { content: ""; display: block; width: 10px; height: 16px; background: currentColor; clip-path: polygon( 0 0, 30% 0, 100% 50%, 30% 100%, 0 100%, 70% 50% ); } .product-page .product-slider .swiper-button-prev::before { transform: rotate(180deg); } /* End */ /* Start:/local/templates/contwell/components/bitrix/form.result.new/contwell-cart/style.css?17850610546791*/ .contwell-cart-form-container { padding: 20px 0; } /* Empty cart state */ .cart-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 20px; text-align: center; } .cart-empty-state__icon { opacity: 0.6; } .cart-empty-state__text { font-size: 18px; font-weight: 500; color: #888; margin: 0; } .cart-empty-state__btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 32px; font-size: 15px; font-weight: 500; color: #fff; background-color: #ff8c73; border: none; border-radius: 12px; text-decoration: none; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .cart-empty-state__btn:hover { background-color: #ff7a5c; } .cart-empty-state__btn:active { transform: translateY(1px); } .contwell-form__fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .contwell-form-control-wrap { flex: 1 1 200px; min-width: 150px; } .contwell-form-control { width: 100%; height: 56px; padding: 0 24px; font-family: inherit; font-size: 16px; line-height: 1; color: #333; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 16px; appearance: none; outline: none; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; } .contwell-form-control::placeholder { color: #999; } .contwell-form-control:focus { border-color: #ff8c73; box-shadow: 0 0 0 4px rgba(255, 140, 115, 0.1); } /* Select specific */ .contwell-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 24px center; padding-right: 48px; } /* Submit button */ .contwell-submit { flex: 0 0 auto; width: auto; min-width: 160px; background-color: #ff8c73; color: #fff; font-weight: 500; border: none; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .contwell-submit:hover { background-color: #ff7a5c; } .contwell-submit:active { transform: translateY(1px); } .contwell-submit:disabled { opacity: .7; cursor: wait; } .contwell-submit.is-loading { position: relative; color: transparent !important; pointer-events: none; } .contwell-submit.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: contwell-spin 0.8s linear infinite; } @keyframes contwell-spin { to { transform: rotate(360deg); } } /* Captcha */ .contwell-form__captcha-wrapper { margin-top: 15px; width: 100%; } .feedback-form__captcha { display: flex; gap: 12px; align-items: center; } .feedback-form__captcha-img-wrap { flex: 0 0 150px; height: 56px; border-radius: 16px; overflow: hidden; border: 1px solid #e0e0e0; background: #fff; display: flex; align-items: center; justify-content: center; } .feedback-form__captcha-img-wrap img { max-width: 100%; max-height: 100%; cursor: pointer; transition: opacity 0.2s; } .feedback-form__captcha-img-wrap img:hover { opacity: 0.8; } .feedback-form__input { flex: 1; } /* Response messages */ .contwell-response-output { margin-bottom: 20px; padding: 15px 20px; border-radius: 16px; font-size: 15px; line-height: 1.4; } .contwell-response-output--error { background-color: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; } .contwell-response-output--success { background-color: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; } /* Response block inside form */ .js-form-response { margin-top: 12px; } /* Responsive */ @media (max-width: 768px) { .contwell-form__fields { flex-direction: column; } .contwell-form-control-wrap, .contwell-submit { width: 100%; flex: 1 1 auto; } .feedback-form__captcha { flex-direction: column; align-items: stretch; } .feedback-form__captcha-img-wrap { flex: 0 0 56px; width: 100%; } } /* ── Toast notifications ── */ .cw-toast-container { position: fixed; top: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 380px; width: 100%; } .cw-toast { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.4; font-family: inherit; pointer-events: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateX(100%); transition: none; } .cw-toast.is-visible { animation: cwToastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cw-toast.is-hiding { animation: cwToastOut 0.25s ease-in forwards; } .cw-toast--success { background: rgba(240, 253, 244, 0.95); color: #15803d; border: 1px solid #bbf7d0; } .cw-toast--error { background: rgba(254, 242, 242, 0.95); color: #b91c1c; border: 1px solid #fecaca; } .cw-toast svg { flex-shrink: 0; } .cw-toast span { flex: 1; } .cw-toast__close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: inherit; font-size: 18px; cursor: pointer; border-radius: 6px; opacity: 0.5; transition: opacity 0.2s, background-color 0.2s; padding: 0; line-height: 1; } .cw-toast__close:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } @keyframes cwToastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes cwToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } @media (max-width: 480px) { .cw-toast-container { top: 12px; right: 12px; left: 12px; max-width: none; } } /* End */ /* Start:/local/templates/contwell/components/bitrix/form.result.new/contwell-feedback/style.css?17850620385911*/ .contwell-cart-form-container { padding: 20px 0; } .contwell-form__fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .contwell-form-control-wrap { flex: 1 1 200px; min-width: 150px; } .contwell-form-control { width: 100%; height: 56px; padding: 0 24px; font-family: inherit; font-size: 16px; line-height: 1; color: #333; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 16px; appearance: none; outline: none; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; } .contwell-form-control::placeholder { color: #999; } .contwell-form-control:focus { border-color: #ff8c73; box-shadow: 0 0 0 4px rgba(255, 140, 115, 0.1); } /* Select specific */ .contwell-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 24px center; padding-right: 48px; } /* Submit button */ .contwell-submit { flex: 0 0 auto; width: auto; min-width: 160px; background-color: #ff8c73; color: #fff; font-weight: 500; border: none; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .contwell-submit:hover { background-color: #ff7a5c; } .contwell-submit:active { transform: translateY(1px); } .btn-orange:disabled { opacity: .7; cursor: wait; } .contwell-submit.is-loading { position: relative; color: transparent !important; pointer-events: none; } .contwell-submit.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: contwell-spin 0.8s linear infinite; } @keyframes contwell-spin { to { transform: rotate(360deg); } } /* Captcha */ .contwell-form__captcha-wrapper { margin-top: 15px; width: 100%; } .feedback-form__captcha { display: flex; gap: 12px; align-items: center; } .feedback-form__captcha-img-wrap { flex: 0 0 150px; height: 56px; border-radius: 16px; overflow: hidden; border: 1px solid #e0e0e0; background: #fff; display: flex; align-items: center; justify-content: center; } .feedback-form__captcha-img-wrap img { max-width: 100%; max-height: 100%; cursor: pointer; transition: opacity 0.2s; } .feedback-form__captcha-img-wrap img:hover { opacity: 0.8; } .feedback-form__input { flex: 1; } /* Response messages */ .contwell-response-output { margin-bottom: 20px; padding: 15px 20px; border-radius: 16px; font-size: 15px; line-height: 1.4; } .contwell-response-output--error { background-color: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; } .contwell-response-output--success { background-color: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; } /* Response block inside form */ .js-form-response { margin-top: 12px; } /* Responsive */ @media (max-width: 768px) { .contwell-form__fields { flex-direction: column; } .contwell-form-control-wrap, .contwell-submit { width: 100%; flex: 1 1 auto; } .feedback-form__captcha { flex-direction: column; align-items: stretch; } .feedback-form__captcha-img-wrap { flex: 0 0 56px; width: 100%; } } /* ── Toast notifications ── */ .cw-toast-container { position: fixed; top: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 380px; width: 100%; } .cw-toast { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.4; font-family: inherit; pointer-events: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateX(100%); transition: none; } .cw-toast.is-visible { animation: cwToastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cw-toast.is-hiding { animation: cwToastOut 0.25s ease-in forwards; } .cw-toast--success { background: rgba(240, 253, 244, 0.95); color: #15803d; border: 1px solid #bbf7d0; } .cw-toast--error { background: rgba(254, 242, 242, 0.95); color: #b91c1c; border: 1px solid #fecaca; } .cw-toast svg { flex-shrink: 0; } .cw-toast span { flex: 1; } .cw-toast__close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: inherit; font-size: 18px; cursor: pointer; border-radius: 6px; opacity: 0.5; transition: opacity 0.2s, background-color 0.2s; padding: 0; line-height: 1; } .cw-toast__close:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } @keyframes cwToastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes cwToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } @media (max-width: 480px) { .cw-toast-container { top: 12px; right: 12px; left: 12px; max-width: none; } } /* End */ /* Start:/bitrix/components/ktoto/message/templates/.default/style.css?17774568832421*/ .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 1050; opacity: 0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; pointer-events: none; margin: 0; padding: 0; } .modal:target { opacity: 1; pointer-events: auto; overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; top: 50%; transform: translate(0, -50%)!important; max-width: 600px; margin: 30px auto; padding: 0px 20px 0px 20px; } .modal-content { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; width: 100%; } .modal-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eceeef; } .modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; font-weight: 500; } .close { float: right; font-family: sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; text-decoration: none; } .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; opacity: .75; } .modal-body { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px; overflow: auto; } #messageModal.show{ display: block; opacity: 1; } .closeModalButton { display: inline-flex; align-items: center; justify-content: center; background-color: #39434e; border: none; color: #ededed; text-decoration: none; padding: 5px 40px; white-space: nowrap; cursor: pointer; border-radius: 4px; max-width: 100%; transition: all .1s linear; } /* End */ /* /local/templates/contwell/assets/css/swiper-bundle.min.css?177703016318436 */ /* /local/templates/contwell/assets/css/style.css?1789636197238386 */ /* /local/templates/contwell/components/bitrix/form.result.new/contwell-cart/style.css?17850610546791 */ /* /local/templates/contwell/components/bitrix/form.result.new/contwell-feedback/style.css?17850620385911 */ /* /bitrix/components/ktoto/message/templates/.default/style.css?17774568832421 */