@layer properties {
@supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*,:before,:after,::backdrop {
--tw-rotate-x:initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial
}
}
}
@layer theme {
:root,:host {
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: .25rem;
--radius-md: .375rem;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono)
}
}
@layer base {
*,:after,:before,::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
h1,h2,h3,h4,h5,h6 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit
}
b,strong {
font-weight: bolder
}
code,kbd,samp,pre {
font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings,normal);
font-variation-settings: var(--default-mono-font-variation-settings,normal);
font-size: 1em
}
small {
font-size: 80%
}
sub,sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
progress {
vertical-align: baseline
}
summary {
display: list-item
}
ol,ul,menu {
list-style: none
}
img,svg,video,canvas,audio,iframe,embed,object {
vertical-align: middle;
display: block
}
img,video {
max-width: 100%;
height: auto
}
:where() optgroup {
font-weight: bolder
}
:where() optgroup option {
padding-inline-start: 20px
}
::file-selector-button {
margin-inline-end:4px}
::placeholder {
opacity: 1
}
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder {
color:currentColor
}
@supports (color: color-mix(in lab, red, red)) {
::placeholder {
color:color-mix(currentcolor, transparent)
}
}
}
textarea {
resize: vertical
}
::-webkit-search-decoration {
appearance: none
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit
}
::-webkit-datetime-edit {
display: inline-flex
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0
}
::-webkit-datetime-edit {
padding-block:0}
::-webkit-datetime-edit-year-field {
padding-block:0}
::-webkit-datetime-edit-month-field {
padding-block:0}
::-webkit-datetime-edit-day-field {
padding-block:0}
::-webkit-datetime-edit-hour-field {
padding-block:0}
::-webkit-datetime-edit-minute-field {
padding-block:0}
::-webkit-datetime-edit-second-field {
padding-block:0}
::-webkit-datetime-edit-millisecond-field {
padding-block:0}
::-webkit-datetime-edit-meridiem-field {
padding-block:0}
::-webkit-calendar-picker-indicator {
line-height: 1
}
::-webkit-inner-spin-button {
height: auto
}
::-webkit-outer-spin-button {
height: auto
}
}
@layer components;@layer utilities {
.relative {
position: relative
}
.start {
inset-inline-start: var(--spacing)
}
.table {
display: table
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
}
}
@font-face {
font-family: Lab Grotesque;
src: url(/assets/fonts/LabGrotesque-Regular.woff2)format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Lab Grotesque;
src: url(/assets/fonts/LabGrotesque-Medium.woff2)format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Lab Grotesque;
src: url(/assets/fonts/LabGrotesque-Bold.woff2)format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Lab Grotesque;
src: url(/assets/fonts/LabGrotesque-Black.woff2)format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap
}
/* Oswald вариативный: одна загрузка на весь диапазон насыщенности. */
@font-face {
font-family: Oswald;
src: url(/assets/fonts/Oswald-Variable.woff2)format("woff2-variations");
font-weight: 200 700;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Tecla;
src: url(/assets/fonts/Tecla-Thin.woff2)format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Tecla;
src: url(/assets/fonts/Tecla-Light.woff2)format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Tecla;
src: url(/assets/fonts/Tecla-Regular.woff2)format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Tecla;
src: url(/assets/fonts/Tecla-Bold.woff2)format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Tecla;
src: url(/assets/fonts/Tecla-Black.woff2)format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap
}
/* Гарнитуры Google Fonts: только кириллица и латиница — остальные
подмножества сайту не нужны и весили бы втрое больше. Файлы лежат
локально, чтобы страница не ходила на сторонний CDN. */
@font-face {
font-family: "Inter";
src: url(/assets/fonts/google/inter-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Inter";
src: url(/assets/fonts/google/inter-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Montserrat";
src: url(/assets/fonts/google/montserrat-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Montserrat";
src: url(/assets/fonts/google/montserrat-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Golos Text";
src: url(/assets/fonts/google/golos-text-cyrillic.woff2)format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Golos Text";
src: url(/assets/fonts/google/golos-text-latin.woff2)format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Manrope";
src: url(/assets/fonts/google/manrope-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Manrope";
src: url(/assets/fonts/google/manrope-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Playfair Display";
src: url(/assets/fonts/google/playfair-display-cyrillic.woff2)format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Playfair Display";
src: url(/assets/fonts/google/playfair-display-latin.woff2)format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Unbounded";
src: url(/assets/fonts/google/unbounded-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Unbounded";
src: url(/assets/fonts/google/unbounded-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Roboto";
src: url(/assets/fonts/google/roboto-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Roboto";
src: url(/assets/fonts/google/roboto-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Open Sans";
src: url(/assets/fonts/google/open-sans-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Open Sans";
src: url(/assets/fonts/google/open-sans-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Noto Sans";
src: url(/assets/fonts/google/noto-sans-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Noto Sans";
src: url(/assets/fonts/google/noto-sans-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Rubik";
src: url(/assets/fonts/google/rubik-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Rubik";
src: url(/assets/fonts/google/rubik-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
font-family: "Nunito";
src: url(/assets/fonts/google/nunito-cyrillic.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family: "Nunito";
src: url(/assets/fonts/google/nunito-latin.woff2)format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
:root {
--font-ui: "Unbounded", Arial, sans-serif;
--milk: #f2f0eb;
--paper: #fbfaf7;
--ink: #171a1d;
--muted: #6f7273;
--line: #171a1d24;
/* Акцент вынесен в токены: панель настроек переключает набор целиком,
поэтому в правилах не должно оставаться коралловых литералов. */
--accent: #ff6b4b;
--accent-alt: #ff654b;
--accent-soft: #ff6f61;
--accent-deep: #c8442c;
--accent-ink: #e94f31;
--aqua: var(--accent);
--aqua-strong: var(--accent);
--aqua-deep: var(--accent-deep);
--coral: var(--accent-soft);
--graphite: #202529;
--radius-lg: 34px;
--radius-md: 24px;
--shadow: 0 24px 70px #141e211f;
--page-max: 1440px;
--page-gutter: 32px;
--page-width: min(100% - var(--page-gutter) * 2, var(--page-max));
--page-pad: max(var(--page-gutter), (100% - var(--page-max)) / 2)
}
/* Вторая строка шапки с меню. На узких экранах её нет — меню уезжает в бургер,
поэтому все отбивки под фиксированную шапку считаются через эту переменную. */
:root {
--header-navbar-height: 52px
}
@media (width<=1180px) {
:root {
--header-navbar-height: 0px
}
}
@media (width>=1920px) {
: root {
--page-max:1600px;
--page-gutter: 48px
}
}
@media (width>=901px) and (width<=1180px) {
: root {
--page-gutter:28px
}
}
@media (width>=361px) and (width<=600px) {
: root {
--page-gutter:18px
}
}
@media (width<=360px) {
: root {
--page-gutter:14px
}
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scrollbar-gutter: stable
}
body {
color: var(--ink);
-webkit-font-smoothing: antialiased;
margin: 0;
font-family: var(--font-ui);
font-size: 18px;
line-height: 1.45
}
button,input,textarea {
font: inherit
}
button,a {
-webkit-tap-highlight-color: transparent
}
button {
color: inherit
}
a {
color: inherit;
text-decoration: none
}
img {
max-width: 100%;
display: block
}
::selection {
background: var(--aqua);
color: var(--ink)
}
.quick-catalog {
z-index: 3;
color: #15191b;
background: #fff;
padding: clamp(18px,1.8vw,26px) 0;
position: relative;
overflow: hidden
}
.quick-catalog__inner {
width: var(--page-width);
margin: 0 auto
}
.quick-catalog__grid {
grid-template-columns: repeat(5,minmax(0,170px)) minmax(250px,300px);
justify-content: center;
gap: 12px;
display: grid
}
.quick-catalog__card {
isolation: isolate;
color: #fff;
border: 1px solid #15191b33;
border-radius: 20px;
transition: border-color .22s,box-shadow .22s,transform .22s;
position: relative;
overflow: hidden
}
.quick-catalog__card:hover {
border-color: #15191b8f;
transform: translateY(-2px);
box-shadow: тщ;
}
.quick-catalog__photo-card {
aspect-ratio: 1;
background: #ffffffdb;
padding: 5px
}
.quick-catalog__photo-card:after {
z-index: -1;
content: "";
background: linear-gradient(#0b0e0f0a 28%,#0b0e0fe0 100%);
border-radius: 15px;
position: absolute;
inset: 5px
}
.quick-catalog__card-image {
z-index: -2;
object-fit: cover;
border-radius: 15px;
width: calc(100% - 10px);
height: calc(100% - 10px);
transition: transform .52s cubic-bezier(.2,.78,.18,1);
position: absolute;
inset: 5px
}
.quick-catalog__photo-card:hover .quick-catalog__card-image {
transform: scale(1.045)
}
.quick-catalog__card-title {
letter-spacing: -.035em;
max-width: 150px;
font-size: clamp(18px,1.35vw,22px);
font-weight: 600;
line-height: .98;
position: absolute;
bottom: 17px;
left: 18px;
right: 18px
}
.quick-catalog__all-card {
isolation: isolate;
color: #15191b;
background-size: 28px 28px,28px 28px,auto,auto;
border: 1px solid #15191b2e;
border-radius: 20px;
flex-direction: column;
justify-content: flex-end;
height: 170px;
padding: 20px;
transition: border-color .22s,box-shadow .22s,transform .22s;
display: flex;
position: relative;
overflow: hidden
}
.quick-catalog__all-card:hover {
border-color: #15191b8f;
transform: translateY(-5px);
box-shadow: 0 18px 42px #15191b24
}
.quick-catalog__all-card-eyebrow {
color: #15191b85;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 7px;
font-size: 10px
}
.quick-catalog__all-card-title {
color: var(--accent);
letter-spacing: -.045em;
max-width: 150px;
font-size: clamp(22px,1.7vw,28px);
font-weight: 500;
line-height: .94
}
.quick-catalog__all-card-arrow {
font-size: 26px;
transition: transform .22s;
position: absolute;
top: 15px;
right: 15px
}
.quick-catalog__all-card:hover .quick-catalog__all-card-arrow {
transform: translate(3px,-3px)
}
@media (width<=1300px) {
.quick-catalog__grid {
grid-template-columns: repeat(5,minmax(0,140px)) minmax(220px,260px)
}
.quick-catalog__all-card {
height: 140px
}
}
@media (width<=1080px) {
.quick-catalog__grid {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.quick-catalog__all-card {
grid-column: 1/-1;
height: 132px
}
}
@media (width<=600px) {
.quick-catalog {
padding: 16px 0 20px
}
.quick-catalog__grid {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px
}
.quick-catalog__all-card {
height: 124px
}
}
@media (prefers-reduced-motion:reduce) {
.quick-catalog__card,.quick-catalog__card-image,.quick-catalog__all-card,.quick-catalog__all-card-arrow {
transition: none
}
}
/* Быстрый каталог поднят над героем: теперь он первый блок страницы, поэтому
сам отбивает фиксированную шапку (78 + 34 топбара), а герой лишается своего
верхнего отступа и получает скругление сверху — иначе стык с белым фоном
выглядит обрезанным. */
.quick-catalog--lead {
padding-top: calc(107px + var(--header-navbar-height) + clamp(14px,1.6vw,26px));
padding-bottom: 12px;
}
/* Над героем это навигация, а не витрина: плашки мельче, лежат в одну строку
на всю ширину экрана и листаются протягом. */
.quick-catalog--lead .quick-catalog__inner {
width: 100%
}
.quick-catalog--lead .quick-catalog__grid {
cursor: grab;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--page-gutter);
overscroll-behavior-x: contain;
touch-action: pan-y pinch-zoom;
-webkit-user-select: none;
user-select: none;
scrollbar-width: none;
grid-auto-flow: column;
grid-auto-columns: 150px;
grid-template-columns: none;
justify-content: start;
gap: 10px;
/* Запас сверху и снизу — под подъём плашки на наведении и её тень. */
padding: 8px var(--page-gutter) 16px;
overflow-x: auto;
overflow-y: hidden
}
.quick-catalog--lead .quick-catalog__grid::-webkit-scrollbar {
display: none
}
/* Полоса уходит за край экрана: растворяем ту сторону, где ещё есть карточки
(сторону считает tracks.js), иначе непонятно, что дорожку можно листать. */
.quick-catalog--lead .quick-catalog__grid[data-fade~=start] {
-webkit-mask-image: linear-gradient(90deg,#0000,#000 72px);
mask-image: linear-gradient(90deg,#0000,#000 72px)
}
.quick-catalog--lead .quick-catalog__grid[data-fade~=end] {
-webkit-mask-image: linear-gradient(270deg,#0000,#000 72px);
mask-image: linear-gradient(270deg,#0000,#000 72px)
}
.quick-catalog--lead .quick-catalog__grid[data-fade="start end"] {
-webkit-mask-image: linear-gradient(90deg,#0000,#000 72px,#000 calc(100% - 72px),#0000);
mask-image: linear-gradient(90deg,#0000,#000 72px,#000 calc(100% - 72px),#0000)
}
.quick-catalog--lead .quick-catalog__grid--dragging {
scroll-snap-type: none;
cursor: grabbing
}
.quick-catalog--lead .quick-catalog__grid--dragging .quick-catalog__card,.quick-catalog--lead .quick-catalog__grid--dragging .quick-catalog__all-card {
pointer-events: none
}
.quick-catalog--lead .quick-catalog__card,.quick-catalog--lead .quick-catalog__all-card {
scroll-snap-align: start
}
.quick-catalog--lead .quick-catalog__all-card {
grid-column: span 2;
height: 150px;
padding: 16px
}
.quick-catalog--lead .quick-catalog__card-title {
max-width: 126px;
font-size: clamp(14px,1.05vw,17px);
bottom: 14px;
left: 14px;
right: 14px
}
.quick-catalog--lead .quick-catalog__all-card-title {
max-width: 140px;
font-size: clamp(19px,1.4vw,23px)
}
.quick-catalog--lead .quick-catalog__all-card-arrow {
font-size: 22px;
top: 12px;
right: 12px
}
.quick-catalog--lead + .hero--reference {
padding-top: clamp(20px,2.4vw,40px)
}
/* Части категорий досталась не фотография, а вырезанный объект: такой плашке
нужен светлый фон и тёмная подпись, иначе объект тонет в затемнении. */
.quick-catalog__photo-card--object {
background: #e3e6ea
}
.quick-catalog__photo-card--object:after {
background: linear-gradient(#e3e6ea00 34%,#e3e6eae6 78%,#e3e6ea)
}
.quick-catalog__photo-card--object .quick-catalog__card-image {
object-fit: contain;
inset: 10px 10px 26px
}
.quick-catalog__photo-card--object .quick-catalog__card-title {
color: #15191b
}
@media (width>=1920px) {
.quick-catalog--lead .quick-catalog__grid {
grid-auto-columns: 168px;
gap: 12px
}
.quick-catalog--lead .quick-catalog__all-card {
height: 168px
}
}
@media (width<=1300px) {
.quick-catalog--lead .quick-catalog__grid {
grid-auto-columns: 140px
}
.quick-catalog--lead .quick-catalog__all-card {
height: 140px
}
}
@media (width<=900px) {
.quick-catalog--lead {
padding-top: 122px
}
.quick-catalog--lead .quick-catalog__grid {
grid-auto-columns: 132px
}
.quick-catalog--lead .quick-catalog__all-card {
height: 132px
}
.quick-catalog--lead + .hero--reference {
border-radius: 44px
}
}
@media (width<=600px) {
.quick-catalog--lead {
padding-top: 72px
}
.quick-catalog--lead .quick-catalog__grid {
grid-auto-columns: 122px;
gap: 8px
}
.quick-catalog--lead .quick-catalog__all-card {
height: 122px
}
.quick-catalog--lead + .hero--reference {
border-radius: 32px
}
}
@media (prefers-reduced-motion:reduce) {
.quick-catalog--lead .quick-catalog__grid {
scroll-behavior: auto
}
}
.page .site-header {
animation: .72s cubic-bezier(.2,.78,.18,1) both header-enter
}
.site-loader {
z-index: 300;
isolation: isolate;
color: #171a1d;
background: #f2f4f7;
place-items: center;
display: grid;
position: fixed;
inset: 0;
overflow: hidden
}
.site-loader__content {
z-index: 2;
flex-direction: column;
align-items: center;
width: min(100% - 48px,260px);
animation: .52s cubic-bezier(.2,.74,.2,1) both site-loader-content-in;
display: flex;
position: relative
}
.site-loader__emblem {
background: var(--accent);
border-radius: 5px;
place-items: center;
width: 18px;
height: 18px;
animation: .62s cubic-bezier(.2,.8,.2,1) both site-loader-emblem-in;
display: grid;
position: relative;
transform: rotate(45deg);
box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 24%, transparent)
}
.site-loader__emblem:after {
content: "";
border: 1.5px solid #171a1d;
border-radius: 1px;
width: 6px;
height: 6px;
position: absolute
}
.site-loader__logo {
width: clamp(76px,8vw,96px);
height: auto;
margin-top: 30px
}
.site-loader__brand-name,.site-footer__brand-name {
color: var(--accent);
letter-spacing: .17em;
text-transform: uppercase;
white-space: nowrap;
font-size: 12px;
font-weight: 650;
line-height: 1;
display: block
}
.site-loader__brand-name {
margin-top: 12px;
font-size: 14px
}
.site-footer__brand-link {
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: max-content;
display: inline-flex
}
html.loader-seen .site-loader {
display: none
}
.site-loader__progress {
background: #171a1d1a;
border-radius: 999px;
width: 132px;
height: 6px;
margin-top: 26px;
position: relative;
overflow: hidden
}
.site-loader__progress-bar {
border-radius: inherit;
transform-origin: 0;
background: var(--accent);
animation: .9s cubic-bezier(.65,0,.35,1) both site-loader-progress;
position: absolute;
inset: 0;
transform: scaleX(0)
}
.site-loader--leaving {
pointer-events: none;
animation: .32s cubic-bezier(.4,0,.2,1) both site-loader-out
}
.site-loader--leaving .site-loader__content {
animation: .18s both site-loader-content-out
}
@keyframes site-loader-content-in {
0% {
opacity: 0;
transform: translateY(8px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes site-loader-content-out {
to {
opacity: 0;
transform: translateY(-5px)
}
}
@keyframes site-loader-emblem-in {
0% {
opacity: 0;
transform: rotate(45deg)scale(.55)
}
to {
opacity: 1;
transform: rotate(45deg)scale(1)
}
}
@keyframes site-loader-progress {
to {
transform: scaleX(1)
}
}
@keyframes site-loader-out {
to {
opacity: 0;
visibility: hidden
}
}
@media (width<=640px) {
.site-loader__content {
width: min(100% - 40px,240px)
}
.site-loader__logo {
width: 74px;
margin-top: 28px
}
}
.page .hero__copy {
animation: .9s cubic-bezier(.2,.78,.18,1) .14s both hero-copy-enter
}
.page .hero__stage {
animation: .96s cubic-bezier(.2,.78,.18,1) 80ms both hero-stage-enter
}
/* Ветки доворачиваются каждая в свою сторону — как раскрывающийся венок:
левая по часовой стрелке, правая против. */
.page .hero__laurel--left {
animation: 1.05s cubic-bezier(.2,.78,.18,1) .12s both hero-laurel-enter-left
}
.page .hero__laurel--right {
animation: 1.05s cubic-bezier(.2,.78,.18,1) .12s both hero-laurel-enter-right
}
@keyframes hero-laurel-enter-left {
0% {
opacity: 0;
transform: rotate(-22deg)
}
to {
opacity: .6;
transform: rotate(0)
}
}
@keyframes hero-laurel-enter-right {
0% {
opacity: 0;
transform: rotate(22deg)
}
to {
opacity: .6;
transform: rotate(0)
}
}
.page--motion-ready [data-motion] {
opacity: 1;
transform: none
}
.page--motion-ready [data-motion]>* {
opacity: 0;
will-change: opacity, transform;
transition: opacity .72s cubic-bezier(.2,.72,.2,1),transform .72s cubic-bezier(.2,.72,.2,1);
transform: translateY(26px)
}
.page--motion-ready [data-motion].page__reveal--visible>* {
opacity: 1;
transform: translateY(0)
}
@keyframes header-enter {
0% {
opacity: 0;
transform: translateY(-18px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes hero-copy-enter {
0% {
opacity: 0;
transform: translateY(22px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes hero-stage-enter {
0% {
opacity: 0;
transform: translateY(18px)scale(.985)
}
to {
opacity: 1;
transform: translateY(0)scale(1)
}
}
@media (hover: hover) and (pointer:fine) {
.page .catalog__card,.page .process__step {
transition:transform .32s cubic-bezier(.2,.72,.2,1),box-shadow .32s,background-color .32s
}
.page .catalog__card:hover,.page .process__step:hover {
transform: translateY(-6px)
}
.page .catalog__card:hover {
box-shadow: 0 22px 54px #0e15171f
}
.page .process__icon {
transition: transform .32s cubic-bezier(.2,.72,.2,1)
}
.page .process__step:hover .process__icon {
transform: rotate(7deg)scale(1.04)
}
}
.site-header {
--header-main-height: 78px;
--topbar-height: 34px;
--topbar-current-height: var(--topbar-height);
z-index: 80;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
background: #fff;
border: 0;
/* Под шапкой сразу белые плашки каталога: без тонкой линии край шапки
теряется, пока страница не проскроллена и тень ещё не появилась. */
border-bottom: 1px solid #e8e8e8;
border-radius: 0;
width: 100%;
transition: background .32s cubic-bezier(.2,.72,.2,1),box-shadow .26s,border-color .26s;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0 0 #141e2100
}
.site-header--scrolled {
--topbar-current-height: 0px;
/* Прокрученная шапка отбивается тенью — линия поверх неё читалась бы
вторым краем. */
border-bottom-color: #0000;
box-shadow: 0 7px 22px #141e2114,0 1px #141e210e
}
.site-header__topbar {
height: var(--topbar-current-height);
color: var(--ink);
opacity: 1;
background: #f6f7f7;
border-bottom: 1px solid #171a1d14;
transition: height .3s cubic-bezier(.2,.72,.2,1),opacity .18s,transform .3s cubic-bezier(.2,.72,.2,1);
overflow: hidden;
transform: translateY(0)
}
.site-header--scrolled .site-header__topbar {
opacity: 0;
pointer-events: none;
transform: translateY(-6px)
}
.site-header__topbar-inner {
width: calc(100% - var(--page-gutter) * 2);
height: var(--topbar-height);
white-space: nowrap;
justify-content: flex-end;
align-items: center;
gap: 24px;
margin: 0 auto;
font-size: 12px;
line-height: 1;
display: flex
}
.site-header__topbar-phone {
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 500;
transition: color .18s;
display: inline-flex
}
.site-header__topbar-phone:hover {
color: var(--aqua-strong)
}
.site-header__topbar-phone-icon {
color: var(--accent);
flex: none;
width: 15px;
height: 15px
}
.site-header__topbar-hours {
color: #171a1d94;
font-size: 14px
}
.site-header__topbar-label {
color: var(--ink);
font-weight: 500
}
.site-search-backdrop {
z-index: 75;
opacity: 0;
visibility: hidden;
pointer-events: none;
cursor: default;
-webkit-backdrop-filter: blur(11px)saturate(.82);
backdrop-filter: blur(11px)saturate(.82);
background: #0e121433;
border: 0;
width: 100%;
height: 100%;
padding: 0;
transition: opacity .32s cubic-bezier(.2,.72,.2,1),visibility .32s;
position: fixed;
inset: 0
}
.site-search-backdrop--visible {
opacity: 1;
visibility: visible;
pointer-events: auto
}
.site-catalog-backdrop {
z-index: 75;
opacity: 0;
visibility: hidden;
pointer-events: none;
cursor: default;
background: #0c0f1180;
border: 0;
width: 100%;
height: 100%;
padding: 0;
transition: opacity .32s,visibility .32s;
position: fixed;
inset: 0
}
.site-catalog-backdrop--visible {
opacity: 1;
visibility: visible;
pointer-events: auto
}
.site-header__inner {
/* Без потолка --page-max: под шапкой полоса каталога идёт от края до края,
и логотип должен вставать по левому краю первой плашки. */
width: calc(100% - var(--page-gutter) * 2);
grid-template-columns: auto auto minmax(0,1fr) auto;
align-items: center;
gap: clamp(14px,1.4vw,22px);
min-height: 78px;
margin: 0 auto;
padding: 9px 0;
display: grid;
position: relative
}
.site-header__brand {
align-items: center;
gap: 11px;
width: max-content;
transition: opacity .26s;
display: inline-flex
}
.site-header__brand-name {
color: var(--accent);
text-transform: uppercase;
white-space: nowrap;
font-size: 28px;
font-weight: 650;
line-height: 1
}
.brand-mark,.floating-ai-mark,.ai__avatar {
background: var(--aqua);
border-radius: 10px;
flex: none;
place-items: center;
width: 36px;
height: 36px;
display: inline-grid;
position: relative
}
.brand-mark__glyph,.floating-ai-mark__glyph,.ai__avatar-glyph {
border: 2px solid var(--ink);
width: 15px;
height: 15px;
transform: rotate(45deg)
}
.site-header__logo {
flex: none;
width: clamp(40px,3.2vw,46px);
height: auto;
display: block
}
.brand {
align-items: center;
gap: 10px;
width: max-content;
display: inline-flex
}
.brand-logo {
flex: none;
height: auto;
display: block
}
.site-footer__logo {
width: 62px
}
.brand-name {
letter-spacing: -.045em;
font-size: 24px;
font-weight: 900
}
/* Вторая строка шапки: меню слева, целевая кнопка прижата к правому краю. */
.site-header__navbar {
width: calc(100% - var(--page-gutter) * 2);
height: var(--header-navbar-height);
margin: 0 auto;
position: relative
}
.site-header__nav {
justify-content: center;
align-items: center;
gap: clamp(14px,1.5vw,26px);
font-size: 18px;
transition: opacity .26s;
display: flex
}
/* Вторая строка есть только на широких экранах: ниже 1181px меню открывается
бургером, и растягивать его по нулевой высоте строки нельзя. */
@media (width>=1181px) {
.site-header__nav {
width: 100%;
height: 100%
}
}
.site-header--search-open .site-header__brand,.site-header--search-open .site-header__catalog,.site-header--search-open .site-header__nav,.site-header--search-open .site-header__tools {
pointer-events: none
}
.site-header__nav-link {
white-space: nowrap;
align-items: center;
min-height: 44px;
padding: 11px 0;
font-weight: 500;
line-height: 1;
display: inline-flex;
position: relative
}
.site-header__nav-link:after {
background: var(--ink);
content: "";
transform-origin: 100%;
height: 1px;
transition: transform .3s;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
transform: scaleX(0)
}
.site-header__nav-link:hover:after,.site-header__nav-link[aria-current=page]:after {
transform-origin: 0;
transform: scaleX(1)
}
.site-header__nav-item {
align-items: center;
display: flex;
position: relative
}
.site-header__nav .site-header__nav-mobile-phone {
display: none
}
.site-header__nav-trigger {
color: inherit;
cursor: pointer;
background: 0 0;
border: 0;
align-items: center;
gap: 8px;
display: inline-flex
}
.site-header__nav-trigger-chevron {
border-bottom: 1.5px solid;
border-right: 1.5px solid;
width: 7px;
height: 7px;
transition: transform .18s;
display: block;
transform: translateY(-2px)rotate(45deg)
}
.site-header__nav-item--open .site-header__nav-trigger-chevron {
transform: translateY(2px)rotate(225deg)
}
@media (width>=1181px) {
.site-header__nav-item--series:after {
z-index:29;
content: "";
pointer-events: none;
width: min(560px,100vw - 32px);
height: 18px;
position: absolute;
top: 100%;
left: -18px
}
.site-header__nav-item--series.site-header__nav-item--open:after {
pointer-events: auto
}
}
.site-header__series-menu {
z-index: 30;
width: min(560px,100vw - 32px);
max-height: calc(100dvh - var(--header-main-height) - var(--topbar-current-height) - var(--header-navbar-height) - 16px);
overscroll-behavior-y: contain;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: #fffffffa;
border: 1px solid #171a1d17;
border-radius: 18px;
padding: 8px;
transition: opacity .16s,visibility .16s,transform .2s cubic-bezier(.2,.72,.2,1);
position: absolute;
top: calc(100% + 18px);
left: -18px;
overflow-y: auto;
transform: translateY(-6px);
box-shadow: 0 24px 54px #171a1d26
}
.site-header__series-menu:before {
display: none
}
.site-header__series-menu--open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0)
}
.site-header__series-menu-all {
min-height: 52px;
color: var(--ink);
border-bottom: 1px solid #171a1d17;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 0 12px;
transition: color .16s;
display: flex
}
.site-header__series-menu-all strong {
font-size: 18px;
font-weight: 560
}
.site-header__series-menu-count {
color: #171a1d61;
font-variant-numeric: tabular-nums;
font-size: 11px;
font-weight: 500
}
.site-header__series-menu-list {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 0 8px;
padding: 6px 0;
display: grid
}
/* Меню «О компании»: те же пункты, но их три — вторая колонка и широкая
панель под каталог серий здесь были бы пустым местом. */
.site-header__series-menu--compact {
width: min(260px,100vw - 32px);
padding: 6px;
overflow-y: visible
}
.site-header__series-menu-list--single {
grid-template-columns: minmax(0,1fr);
padding: 0
}
.site-header__series-menu--compact .site-header__series-menu-link {
grid-template-columns: minmax(0,1fr);
min-height: 44px
}
.site-header__series-menu-link {
border-radius: 9px;
grid-template-columns: 28px minmax(0,1fr);
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 10px;
transition: color .16s,background .16s;
display: grid
}
.site-header__series-menu-index {
color: #171a1d5c;
font-variant-numeric: tabular-nums;
font-size: 16px;
font-weight: 500
}
.site-header__series-menu-link strong {
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 500;
overflow: hidden
}
.site-header__series-menu-custom {
min-height: 48px;
color: var(--ink);
border-top: 1px solid #171a1d14;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
display: flex
}
.site-header__series-menu-all:hover {
color: var(--accent)
}
.site-header__series-menu-link:hover {
color: #171a1d;
background: #f2f4f7
}
/* Открытый раздел виден и без наведения. */
.site-header__series-menu-link.is-active {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent)
}
.site-header__series-menu-link:hover .site-header__series-menu-index,.site-header__series-menu-custom:hover {
color: var(--accent)
}
.site-header__series-menu-all:focus-visible,.site-header__series-menu-link:focus-visible,.site-header__series-menu-custom:focus-visible,.site-header__nav-trigger:focus-visible {
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent)
}
.site-header__catalog {
grid-area: 1/2;
align-items: center;
display: flex;
position: relative
}
.site-header__catalog-toggle {
background: var(--aqua-strong);
color: #fff;
white-space: nowrap;
cursor: pointer;
border: 0;
border-radius: 12px;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px 0 12px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1;
transition: background .18s,box-shadow .18s,transform .18s;
display: inline-flex
}
.site-header__catalog-toggle:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent)
}
/* Вторичное дейÑтвие: контур, а не заливка — иначе Ñпорит Ñ Â«ÐšÐ°Ñ‚Ð°Ð»Ð¾Ð³Ð¾Ð¼Â». */
.site-header__cta {
color: var(--ink);
white-space: nowrap;
cursor: pointer;
background: 0 0;
border: 1px solid #171a1d29;
border-radius: 12px;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 15px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1;
transition: color .18s,background .18s,border-color .18s;
display: inline-flex
}
.site-header__cta:hover {
color: #fff;
background: var(--aqua-strong);
border-color: var(--aqua-strong)
}
.site-header__cta:focus-visible {
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent)
}
/* Кнопка живёт в верхней строке; в меню остаётся только её мобильная копия. */
.site-header__cta--header {
grid-area: 1/4;
justify-self: end;
/* В одну линию с поиском — и по высоте тоже. */
min-height: 50px;
border-radius: 14px
}
.site-header__cta--menu {
display: none
}
/* Соцсети во второй строке шапки. На широком экране их место — под целевой
кнопкой у правого края, поэтому вынимаем из потока: центрированный ряд
пунктов меню иначе сместился бы влево. В бургере идут обычной строкой. */
.site-header__socials {
align-items: center;
gap: 10px;
display: flex
}
@media (width>=1181px) {
.site-header__socials {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%)
}
}
.site-header__social {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 10px;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
transition: color .18s, background-color .18s;
display: inline-flex
}
.site-header__social:hover {
color: #fff;
background: var(--accent)
}
@media (width<=1180px) {
.site-header__cta--header {
display: none
}
.site-header__cta--menu {
display: inline-flex
}
}
.site-header__catalog-toggle--open {
background: color-mix(in srgb, var(--aqua-strong) 94%, #000)
}
.site-header__catalog-toggle-icon {
flex: none;
width: 18px;
height: 14px;
display: inline-block;
position: relative
}
.site-header__catalog-toggle-line {
transform-origin: 50%;
background: currentColor;
border-radius: 999px;
width: 18px;
height: 1.5px;
transition: top .32s cubic-bezier(.2,.72,.2,1),opacity .18s,transform .32s cubic-bezier(.2,.72,.2,1);
position: absolute;
left: 0
}
.site-header__catalog-toggle-line:first-child {
top: 0
}
.site-header__catalog-toggle-line:nth-child(2) {
top: 6px
}
.site-header__catalog-toggle-line:nth-child(3) {
top: 12px
}
.site-header__catalog-toggle--open .site-header__catalog-toggle-line:first-child {
top: 6px;
transform: rotate(45deg)
}
.site-header__catalog-toggle--open .site-header__catalog-toggle-line:nth-child(2) {
opacity: 0;
transform: scaleX(.35)
}
.site-header__catalog-toggle--open .site-header__catalog-toggle-line:nth-child(3) {
top: 6px;
transform: rotate(-45deg)
}
.site-header__catalog-dropdown {
z-index: 20;
top: calc(var(--header-main-height) + var(--topbar-current-height) + var(--header-navbar-height));
width: 100%;
max-height: calc(100dvh - var(--header-main-height) - var(--topbar-current-height) - var(--header-navbar-height));
overscroll-behavior-y: contain;
scrollbar-gutter: stable;
opacity: 0;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 0 100%);
transform-origin: top;
background: #fff;
border: 0;
border-top: 1px solid #171a1d1a;
border-image: ;
border-radius: 0;
transition: clip-path .42s cubic-bezier(.2,.72,.2,1),opacity .22s,visibility .42s,transform .42s cubic-bezier(.2,.72,.2,1);
display: block;
position: fixed;
left: 0;
right: 0;
overflow: hidden auto;
transform: translateY(-10px);
box-shadow: 0 24px 50px #0e121429
}
.site-header__catalog-dropdown-clip {
min-height: 0;
overflow: visible
}
.site-header__catalog-dropdown-inner {
width: var(--page-width);
grid-template-columns: minmax(190px,310px) minmax(0,1fr);
align-items: stretch;
gap: clamp(20px,2.2vw,34px);
margin: 0 auto;
padding: 28px 0 32px;
display: grid
}
.site-header__catalog-dropdown--open {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transform: translateY(0)
}
.site-header__catalog:has(.site-header__catalog-dropdown--open) {
z-index: 25
}
.site-header__catalog-rail {
background: #f2f4f7;
border-radius: 20px;
flex-direction: column;
min-width: 0;
padding: 18px;
display: flex
}
.site-header__catalog-eyebrow {
color: #171a1d75;
letter-spacing: .13em;
text-transform: uppercase;
font-size: 9px;
font-weight: 700;
line-height: 1
}
.site-header__catalog-rail-links {
gap: 4px;
margin-top: 12px;
display: grid
}
.site-header__catalog-rail-link {
color: #171a1dbd;
width: 100%;
min-height: 46px;
font-style: inherit;
font-variant: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
text-align: left;
cursor: pointer;
background: 0 0;
border: 0;
border-radius: 12px;
grid-template-columns: 30px minmax(0,1fr) 16px;
align-items: center;
gap: 9px;
padding: 6px 8px;
font-family: inherit;
font-size: 17px;
font-weight: 500;
transition: color .18s,background .18s,transform .18s;
display: grid
}
.site-header__catalog-rail-link:hover,.site-header__catalog-rail-link--active {
color: var(--ink);
background: #fff
}
.site-header__catalog-rail-link:focus-visible {
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent)
}
.site-header__catalog-rail-link:hover {
transform: translate(2px)
}
.site-header__catalog-rail-arrow {
color: #171a1d57;
font-size: 15px;
transition: color .18s,transform .18s
}
.site-header__catalog-rail-link:hover .site-header__catalog-rail-arrow,.site-header__catalog-rail-link--active .site-header__catalog-rail-arrow {
color: var(--accent);
transform: translate(2px)
}
.site-header__catalog-custom {
min-height: 74px;
color: var(--ink);
background: #ffffffb8;
border: 1px solid #171a1d17;
border-radius: 14px;
grid-template-columns: minmax(0,1fr) 32px;
align-items: center;
gap: 12px;
margin-top: auto;
padding: 14px;
transition: border-color .18s,background .18s,box-shadow .18s,transform .18s;
display: grid;
position: relative;
overflow: hidden
}
.site-header__catalog-custom:before {
content: "";
background: var(--accent);
border-radius: 0 999px 999px 0;
width: 3px;
position: absolute;
top: 14px;
bottom: 14px;
left: 0
}
.site-header__catalog-custom:hover {
background: #fff;
border-color: color-mix(in srgb, var(--accent) 22%, transparent);
transform: translateY(-1px);
box-shadow: 0 10px 22px #171a1d12
}
.site-header__catalog-custom:focus-visible {
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent)
}
.site-header__catalog-custom-copy {
gap: 4px;
min-width: 0;
display: grid
}
.site-header__catalog-custom-title {
letter-spacing: -.015em;
font-size: 13px;
font-weight: 650
}
.site-header__catalog-custom-caption {
color: #171a1d75;
font-size: 10px;
font-weight: 450
}
.site-header__catalog-custom-arrow {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: 10px;
place-items: center;
width: 32px;
height: 32px;
font-size: 15px;
transition: color .18s,background .18s,transform .18s;
display: grid
}
.site-header__catalog-custom:hover .site-header__catalog-custom-arrow {
color: #fff;
background: var(--accent);
transform: translate(1px,-1px)
}
.site-header__catalog-main {
grid-template-rows: repeat(3,auto);
gap: 18px;
min-width: 0;
display: grid
}
.site-header__catalog-heading {
justify-content: flex-end;
align-items: center;
gap: 20px;
min-height: 24px;
display: flex
}
.site-header__catalog-heading-copy {
gap: 7px;
display: grid
}
.site-header__catalog-heading-title {
letter-spacing: -.025em;
font-size: 22px;
font-weight: 500
}
.site-header__catalog-heading-link {
color: #171a1d85;
white-space: nowrap;
padding-top: 0;
font-size: 16px;
font-weight: 600;
transition: color .18s
}
.site-header__catalog-heading-link:hover {
color: var(--accent)
}
.site-header__catalog-highlights {
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 10px;
display: grid
}
.site-header__catalog-highlight {
background: #f2f4f7;
border-radius: 16px;
min-width: 0;
min-height: 126px;
padding: 16px;
transition: background .18s,transform .18s;
position: relative;
overflow: hidden
}
.site-header__catalog-highlight:hover {
background: #f0f0ed;
transform: translateY(-2px)
}
.site-header__catalog-highlight-copy {
z-index: 1;
gap: 4px;
display: grid;
position: relative
}
.site-header__catalog-highlight-title {
font-size: 18px;
font-weight: 500
}
.site-header__catalog-highlight-caption {
color: #171a1d75;
font-size: 15px
}
.site-header__catalog-highlight-image {
object-fit: contain;
object-position: right bottom;
mix-blend-mode: multiply;
width: 76%;
height: 88%;
transition: transform .26s cubic-bezier(.2,.72,.2,1);
position: absolute;
bottom: -18%;
right: -4%
}
.site-header__catalog-highlight:hover .site-header__catalog-highlight-image {
transform: translateY(-3px)scale(1.04)
}
.site-header__catalog-groups {
grid-template-columns: 1.15fr .95fr .8fr;
gap: clamp(18px,2.4vw,34px);
min-height: 220px;
display: grid
}
.site-header__catalog-group {
min-width: 0
}
.site-header__catalog-group-title {
color: var(--ink);
margin-bottom: 10px;
font-size: 17px;
font-weight: 500;
display: block
}
.site-header__catalog-group-links {
gap: 2px;
display: grid
}
.site-header__catalog-link {
color: #171a1d9e;
min-height: 0;
padding: 4px 0;
font-size: 16px;
line-height: 1.35;
transition: color .16s,transform .16s
}
.site-header__catalog-icon {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
border-radius: 9px;
flex: none;
place-items: center;
width: 30px;
height: 30px;
transition: color .16s,background .16s;
display: grid
}
.site-header__catalog-icon-svg {
width: 17px;
height: 17px
}
.site-header__catalog-link:after {
display: none!important
}
.site-header__catalog-link:hover {
color: var(--accent);
transform: translate(2px)
}
.site-header__catalog-promos {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px;
min-width: 0;
display: grid
}
.site-header__catalog-promo {
color: #fff;
border-radius: 18px;
min-height: 108px;
padding: 16px 18px;
transition: transform .2s,box-shadow .2s;
position: relative;
overflow: hidden
}
.site-header__catalog-promo:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px #171a1d29
}
.site-header__catalog-promo--coral {
background: var(--accent)
}
.site-header__catalog-promo--dark {
background: #171a1d
}
.site-header__catalog-promo-copy {
z-index: 1;
flex-direction: column;
align-items: flex-start;
width: 72%;
height: 100%;
display: flex;
position: relative
}
.site-header__catalog-promo-eyebrow {
color: #ffffffad;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 11px;
font-weight: 650
}
.site-header__catalog-promo-title {
letter-spacing: -.035em;
margin-top: 6px;
font-family: Georgia,Times New Roman,serif;
font-size: clamp(16px,1.25vw,20px);
font-style: italic;
font-weight: 400;
line-height: 1.02
}
.site-header__catalog-promo-action {
margin-top: auto;
padding-top: 10px;
font-size: 15px;
font-weight: 650
}
.site-header__catalog-promo-image {
object-fit: contain;
object-position: right bottom;
opacity: .82;
filter: drop-shadow(0 14px 12px #0000002e);
width: 42%;
height: 125%;
transition: transform .26s cubic-bezier(.2,.72,.2,1);
position: absolute;
bottom: -28%;
right: -5%
}
.site-header__catalog-promo:hover .site-header__catalog-promo-image {
transform: translateY(-4px)rotate(1deg)
}
@media (width<=1200px) {
.site-header__catalog-dropdown-inner {
grid-template-columns: minmax(180px,200px) minmax(0,1fr)
}
}
.site-header__tools {
justify-content: flex-end;
align-items: center;
gap: 12px;
transition: opacity .26s;
display: none;
position: relative
}
.site-header__search {
grid-area: 1/3;
width: 100%;
min-width: 0;
position: relative
}
.site-header__search--open {
z-index: 1
}
.site-header__search-icon {
color: currentColor;
flex: none;
width: 18px;
height: 18px;
display: block
}
.site-header__search-panel {
z-index: 10;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform-origin: 0 0;
background: #fff;
border: 1px solid #ffffffbf;
border-radius: 22px;
width: min(520px,100vw - 36px);
padding: 14px;
transition: opacity .16s,visibility .16s,transform .2s cubic-bezier(.2,.72,.2,1);
position: absolute;
top: calc(100% + 12px);
left: 0;
transform: translateY(8px)scale(.985);
box-shadow: 0 24px 70px #141e2129
}
.site-header__search-panel--open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0)scale(1)
}
.site-header__search-form {
border: 1px solid var(--line);
background: #ffffffb8;
border-radius: 14px;
grid-template-columns: 22px minmax(0,1fr) auto;
align-items: center;
gap: 8px;
width: 100%;
min-height: 50px;
padding: 0 13px;
transition: border-color .18s,background .18s,box-shadow .18s;
display: grid
}
.site-header__search:focus-within .site-header__search-form,.site-header__search--open .site-header__search-form {
border-color: var(--aqua-strong);
background: #fff;
box-shadow: 0 8px 24px #141e2112
}
.site-header__search-input {
width: 100%;
min-width: 0;
color: var(--ink);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
background: 0 0;
border: 0;
outline: 0;
padding: 0;
font-family: inherit;
font-size: 15px
}
.site-header__search-input::placeholder {
color: #858888
}
.site-header__search-input::-webkit-search-cancel-button {
display: none
}
.site-header__search .site-header__search-input:focus,.site-header__search .site-header__search-input:focus-visible {
outline-offset: 0px!important;
box-shadow: none!important;
outline: none!important
}
.site-header__search-clear {
background: var(--milk);
width: 32px;
height: 32px;
color: var(--muted);
cursor: pointer;
border: 0;
border-radius: 9px;
font-size: 22px;
line-height: 1
}
.site-header__search-meta {
color: var(--muted);
text-transform: uppercase;
letter-spacing: .11em;
justify-content: space-between;
align-items: center;
padding: 15px 4px 9px;
font-size: 11px;
font-weight: 500;
display: flex
}
.site-header__search-meta-key {
border: 1px solid var(--line);
font: inherit;
letter-spacing: .04em;
background: #ffffffa6;
border-radius: 6px;
padding: 3px 6px
}
.site-header__search-results {
max-height: min(430px,100vh - 210px);
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto
}
.site-header__search-result+.site-header__search-result {
border-top: 1px solid var(--line)
}
.site-header__search-result-link {
justify-content: space-between;
align-items: center;
gap: 18px;
min-height: 62px;
padding: 10px 5px;
display: flex
}
.site-header__search-result-text {
flex-direction: column;
min-width: 0;
display: flex
}
.site-header__search-result-title {
font-size: 17px;
font-weight: 500;
line-height: 1.2
}
.site-header__search-result-category {
color: var(--muted);
margin-top: 4px;
font-size: 13px
}
.site-header__search-result-icon {
background: var(--milk);
width: 32px;
height: 32px;
color: var(--muted);
border-radius: 50%;
flex: none;
place-items: center;
font-size: 13px;
font-style: normal;
transition: background .16s,color .16s,transform .16s;
display: grid
}
.site-header__search-result-link:hover .site-header__search-result-icon {
background: var(--aqua);
color: #fff;
transform: rotate(12deg)
}
.site-header__search-empty {
flex-direction: column;
align-items: flex-start;
padding: 22px 5px 8px;
display: flex
}
.site-header__search-empty-title {
font-size: 18px;
font-weight: 500
}
.site-header__search-empty-text {
max-width: 360px;
color: var(--muted);
margin-top: 6px;
font-size: 13px
}
.site-header__search-empty-action {
color: var(--aqua-deep);
font-style: inherit;
font-variant: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
cursor: pointer;
background: 0 0;
border: 0;
margin-top: 18px;
padding: 0;
font-family: inherit;
font-size: 14px;
font-weight: 500
}
.site-header__menu-button {
display: none
}
.button {
cursor: pointer;
border: 1px solid #0000;
border-radius: 14px;
justify-content: center;
align-items: center;
gap: 22px;
min-height: 56px;
padding: 0 24px;
font-size: 16px;
font-weight: 500;
transition: transform .25s,box-shadow .25s,background .25s;
display: inline-flex
}
.button:hover {
transform: translateY(-2px)
}
.button:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
outline-offset: 3px;
outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent)
}
.button--small {
min-height: 50px;
padding: 0 20px;
font-size: 17px
}
.button--ink {
background: var(--ink);
color: #fff
}
.button--ink:hover {
box-shadow: 0 12px 26px #171a1d33
}
.button--ghost {
border-color: var(--line);
background: #ffffff8c
}
.button--aqua {
background: var(--aqua);
color: #fff
}
.button--light {
color: var(--ink);
background: #f8f8f4
}
.hero {
background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 29%), radial-gradient(circle at 67% 75%, color-mix(in srgb, var(--accent-soft) 11%, transparent), transparent 27%), var(--milk);
flex-direction: column;
align-items: stretch;
gap: clamp(14px,2svh,22px);
min-height: 100svh;
padding: clamp(112px,13svh,148px) max(32px,50vw - 720px) clamp(20px,2.5svh,30px);
display: flex;
position: relative;
overflow: hidden
}
.hero__copy .eyebrow {
justify-content: center;
margin-bottom: clamp(8px,1svh,12px)
}
.eyebrow {
color: #4c5152;
text-transform: uppercase;
letter-spacing: .12em;
align-items: center;
gap: 10px;
margin-bottom: 22px;
font-size: 13px;
font-weight: 500;
display: flex
}
.eyebrow__mark {
background: var(--aqua-strong);
width: 9px;
height: 9px;
transform: rotate(45deg)
}
.eyebrow--light {
color: #fff9
}
.hero__title--legacy {
letter-spacing: -.067em;
max-width: 1180px;
margin: 0 auto;
font-size: clamp(46px,min(5vw,6.4svh),74px);
font-weight: 500;
line-height: .91
}
.hero__lead {
color: #515657;
max-width: 1120px;
margin: clamp(8px,1.2svh,14px) auto 0;
font-size: 18px;
line-height: 1.35
}
.hero__buttons {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: clamp(10px,1.3svh,14px);
display: flex
}
.hero__buttons .button {
min-height: 46px;
font-size: 18px
}
.hero__carousel {
z-index: 2;
width: 100%;
min-width: 0;
max-width: 1380px;
margin: 0 auto;
position: relative
}
.hero__heading-panel {
text-align: center;
justify-content: center;
align-items: center;
min-height: 0;
padding: 0 108px clamp(6px,1svh,10px);
display: flex;
position: relative
}
.hero__heading-panel-title {
letter-spacing: -.045em;
max-width: 720px;
margin: 0;
font-size: clamp(28px,min(2.6vw,4svh),40px);
font-weight: 500;
line-height: .98
}
.hero__arrows {
gap: 8px;
display: flex;
position: absolute;
bottom: clamp(6px,1svh,10px);
right: 0
}
.hero__arrow {
width: 42px;
height: 42px;
color: var(--ink);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
cursor: pointer;
background: #ffffffb8;
border: 1px solid #171a1d24;
border-radius: 50%;
font-family: inherit;
font-size: 22px;
transition: color .18s,background .18s,transform .18s
}
.hero__arrow:hover {
background: var(--ink);
color: #fff;
transform: translateY(-2px)
}
.hero__viewport {
perspective: 1100px;
isolation: isolate;
background: radial-gradient(at 50% 88%,color-mix(in srgb, var(--accent) 24%, transparent),#0000 28%);
height: clamp(300px,36svh,460px);
min-height: 0;
position: relative;
overflow: hidden
}
.hero__viewport:before {
aspect-ratio: 1;
z-index: 0;
content: "";
border: 1px solid #171a1d1f;
border-radius: 50%;
width: min(58vw,700px);
position: absolute;
top: 8%;
left: 50%;
transform: translate(-50%)
}
.hero__viewport:after {
z-index: 1;
filter: blur(20px);
content: "";
background: #141e2124;
border-radius: 50%;
width: min(34vw,430px);
height: 54px;
position: absolute;
bottom: 18px;
left: 50%;
transform: translate(-50%)
}
.hero__glow {
z-index: 1;
filter: blur(54px);
background: color-mix(in srgb, var(--accent) 20%, transparent);
border-radius: 50%;
width: 40%;
height: 34%;
position: absolute;
bottom: 0;
left: 30%
}
.hero__award {
z-index: 2;
opacity: 0;
pointer-events: none;
will-change: transform, opacity;
width: min(50vw,620px);
margin: 0;
transition: transform .72s cubic-bezier(.2,.76,.2,1),opacity .42s,filter .42s;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translate(-50%)scale(.78)
}
.hero__award-image {
object-fit: contain;
filter: drop-shadow(0 30px 24px #14191a33);
width: 100%;
height: 100%;
transform: scale(var(--award-image-scale,1.2));
transition: none
}
.hero__award:first-of-type {
--award-image-scale: 1.34
}
.hero__award:nth-of-type(2) {
--award-image-scale: 1.22
}
.hero__award:nth-of-type(3) {
--award-image-scale: 1.16
}
.hero__award--active {
z-index: 5;
opacity: 1;
transform: translate(-50%)scale(1.06)
}
.hero__award--active .hero__award-image {
transform: scale(var(--image-scale,1))
}
.hero__award--previous {
z-index: 3;
opacity: .34;
filter: saturate(.68);
transform: translate(-145%)scale(.64)rotateY(10deg)
}
.hero__award--next {
z-index: 3;
opacity: .34;
filter: saturate(.68);
transform: translate(45%)scale(.64)rotateY(-10deg)
}
.hero__award--hidden {
transform: translate(-50%)scale(.66)
}
.hero__footer {
justify-content: center;
align-items: center;
min-height: 24px;
padding: 7px 4px 0;
display: flex
}
.hero__dots {
align-items: center;
gap: 8px;
display: flex
}
.smart-search {
z-index: 8;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
background: #ffffffc7;
border: 1px solid #ffffffb8;
border-radius: 22px;
grid-template-columns: 40px 1fr 58px;
align-items: center;
gap: 16px;
width: 100%;
max-width: 1180px;
min-height: 76px;
margin: 0 auto;
padding: 9px 10px 9px 20px;
display: grid;
position: relative;
bottom: auto;
left: auto;
right: auto;
box-shadow: 0 16px 48px #141e2117
}
.search-diamond {
border: 2px solid var(--aqua-deep);
width: 24px;
height: 24px;
transform: rotate(45deg)
}
.smart-search__label {
flex-direction: column;
min-width: 0;
display: flex
}
.smart-search__label-text {
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: .12em;
font-size: 12px;
font-weight: 500
}
.smart-search__input {
width: 100%;
color: var(--ink);
background: 0 0;
border: 0;
outline: 0;
padding: 4px 0 0;
font-size: 19px
}
.smart-search__input::placeholder {
color: #737879
}
.smart-search__button {
background: var(--ink);
color: #fff;
cursor: pointer;
border: 0;
border-radius: 16px;
width: 54px;
height: 54px;
font-size: 26px
}
.trust-strip {
min-height: 142px;
padding: 0px var(--page-pad);
grid-template-columns: repeat(4,1fr);
align-items: center;
display: grid
}
.trust-strip__item {
border-right: 1px solid var(--line);
grid-template-columns: 48px minmax(0,1fr);
align-items: center;
gap: 23px;
min-height: 70px;
padding: 0 32px;
display: grid
}
.trust-strip__item:first-child {
padding-left: 0
}
.trust-strip__item:last-child {
border-right: 0
}
.trust-strip__icon {
color: var(--accent);
background: #f7f7f7;
border: 0;
border-radius: 11px;
place-items: center;
width: 52px;
height: 52px;
margin: 0;
display: grid
}
.trust-strip__icon-svg {
stroke-width: 1.25px;
width: 30px;
height: 31px
}
.trust-strip__text {
flex-direction: column;
min-width: 0;
display: flex
}
.trust-strip__value {
letter-spacing: -.04em;
font-size: 28px;
font-weight: 500;
line-height: 1
}
.trust-strip__label {
color: #5e5e5e;
margin-top: 5px;
font-size: 17px;
line-height: 1
}
.section {
padding: 30px var(--page-pad) 85px var(--page-pad);
}
.section--catalog {
background: #fff
}
.section__head {
grid-template-columns: 1.35fr .65fr;
align-items: end;
gap: 60px;
margin-bottom: 58px;
display: grid
}
.section__title,.ai__title,.production__title,.contact__title,.faq__heading {
letter-spacing: -.06em;
margin: 0;
font-size: clamp(48px,5vw,78px);
font-weight: 500;
line-height: .98
}
.contact__title {
font-size: clamp(46px,4.2vw,60px)
}
.section__lead {
max-width: 480px;
color: var(--muted);
margin: 0 0 8px auto;
font-size: 18px
}
.catalog__mosaic {
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 385px;
gap: 16px;
display: grid
}
.catalog__card {
border-radius: var(--radius-md);
text-align: left;
cursor: pointer;
background: #e9ebea;
border: 0;
padding: 24px;
position: relative;
overflow: hidden
}
.catalog__card--wide {
grid-column: span 2
}
.catalog__card--dark {
color: #fff;
background: #e8e6e0
}
.catalog__card--coral {
background: color-mix(in srgb, var(--accent-soft) 26%, #fff)
}
.catalog__card--ink {
background: #202529
}
.catalog__card:after {
content: "";
background: linear-gradient(#0000 44%,#0c11138c);
position: absolute;
inset: 0
}
.catalog__card-image {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
position: absolute;
inset: 0
}
.catalog__card--object .catalog__card-image {
object-fit: contain;
object-position: right bottom;
filter: drop-shadow(0 20px 22px #0f12183d);
width: 72%;
height: 92%;
padding: 16px;
inset: auto 2% 0 auto
}
.catalog__card:hover .catalog__card-image {
transform: scale(1.05)
}
.catalog__copy {
z-index: 2;
color: #fff;
flex-direction: column;
display: flex;
position: absolute;
bottom: 22px;
left: 24px;
right: 24px
}
.catalog__title {
letter-spacing: -.035em;
font-size: 25px;
font-weight: 500
}
.catalog__arrow {
z-index: 3;
width: 42px;
height: 42px;
color: var(--ink);
background: #ffffffd6;
border-radius: 50%;
place-items: center;
display: grid;
position: absolute;
top: 20px;
right: 20px
}
.thematic-catalog {
background: #f2f4f7;
padding: clamp(78px,7vw,112px) 0;
position: relative;
overflow: hidden
}
.thematic-catalog--blanks {
background: #fff
}
.thematic-catalog__inner {
width: var(--page-width);
margin: 0 auto
}
.thematic-catalog__head {
grid-template-columns: 1.2fr .8fr;
align-items: end;
gap: clamp(36px,5vw,72px);
margin-bottom: 46px;
display: grid
}
.thematic-catalog__title {
letter-spacing: -.06em;
max-width: 850px;
margin: 0;
font-size: clamp(48px,5vw,76px);
font-weight: 500;
line-height: .98
}
.thematic-catalog__lead {
max-width: 520px;
color: var(--muted);
margin: 0 0 8px auto;
font-size: 18px
}
.thematic-catalog__track {
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-color: #171a1d38 transparent;
scrollbar-width: thin;
cursor: grab;
touch-action: pan-y pinch-zoom;
-webkit-user-select: none;
user-select: none;
grid-auto-columns: clamp(245px,21vw,300px);
grid-auto-flow: column;
gap: 14px;
padding: 0 0 16px;
display: grid;
overflow-x: auto
}
.thematic-catalog__track--dragging {
scroll-snap-type: none;
cursor: grabbing
}
.thematic-catalog__track--dragging .thematic-catalog__card {
pointer-events: none
}
.thematic-catalog__track::-webkit-scrollbar {
height: 5px
}
.thematic-catalog__track::-webkit-scrollbar-track {
background: 0 0
}
.thematic-catalog__track::-webkit-scrollbar-thumb {
background: #171a1d33;
border-radius: 999px
}
.thematic-catalog__card {
isolation: isolate;
scroll-snap-align: start;
text-align: left;
cursor: pointer;
background: #ffffffd6;
border: 1px solid #171a1d1a;
border-radius: 22px;
min-height: 270px;
padding: 22px;
transition: border-color .26s,background .26s,box-shadow .26s,transform .32s cubic-bezier(.2,.72,.2,1);
position: relative;
overflow: hidden
}
.thematic-catalog--blanks .thematic-catalog__card {
background: #f2f4f7
}
.thematic-catalog__card:before {
z-index: -1;
content: "";
background: radial-gradient(circle,color-mix(in srgb, var(--accent) 14%, transparent),color-mix(in srgb, var(--accent) 0%, transparent) 70%);
border-radius: 50%;
width: 230px;
height: 230px;
position: absolute;
bottom: -100px;
right: -80px
}
.thematic-catalog__card-kicker {
z-index: 2;
color: var(--accent);
letter-spacing: .1em;
text-transform: uppercase;
font-size: 10px;
font-weight: 650;
display: block;
position: relative
}
.thematic-catalog__card-title {
z-index: 2;
letter-spacing: -.04em;
max-width: 68%;
margin-top: 10px;
font-size: clamp(24px,2vw,30px);
font-weight: 500;
line-height: 1;
display: block;
position: relative
}
.thematic-catalog__card-image {
z-index: 1;
object-fit: contain;
filter: drop-shadow(0 18px 16px #1116182e);
-webkit-user-drag: none;
width: 66%;
height: 72%;
transition: transform .46s cubic-bezier(.2,.72,.2,1);
position: absolute;
bottom: -8%;
right: -5%
}
.thematic-catalog__card-arrow {
z-index: 3;
background: #171a1d12;
border-radius: 50%;
place-items: center;
width: 38px;
height: 38px;
font-size: 14px;
transition: color .18s,background .18s,transform .18s;
display: grid;
position: absolute;
bottom: 18px;
left: 18px
}
.thematic-catalog__card:focus-visible {
outline-offset: 3px;
outline: 2px solid color-mix(in srgb, var(--accent) 64%, transparent)
}
@media (hover: hover) and (pointer:fine) {
.thematic-catalog__card:hover {
background:#fff;
border-color: color-mix(in srgb, var(--accent) 34%, transparent);
transform: translateY(-5px);
box-shadow: 0 22px 46px #171a1d1a
}
.thematic-catalog--blanks .thematic-catalog__card:hover {
background: #f8f9fa
}
.thematic-catalog__card:hover .thematic-catalog__card-image {
transform: translateY(-5px)rotate(2deg)scale(1.04)
}
.thematic-catalog__card:hover .thematic-catalog__card-arrow {
color: #fff;
background: var(--accent);
transform: translate(1px,-1px)
}
}
@media (width<=900px) {
.thematic-catalog__head {
grid-template-columns: 1fr;
align-items: start;
gap: 22px;
margin-bottom: 36px
}
.thematic-catalog__lead {
max-width: 620px;
margin: 0
}
.thematic-catalog__track {
grid-auto-columns: clamp(230px,42vw,285px)
}
}
@media (width<=600px) {
.thematic-catalog {
padding: 68px 0
}
.thematic-catalog__title {
font-size: clamp(38px,11vw,48px)
}
.thematic-catalog__lead {
font-size: 16px
}
.thematic-catalog__track {
grid-auto-columns: min(78vw,278px);
gap: 11px
}
.thematic-catalog__card {
border-radius: 19px;
min-height: 248px;
padding: 18px
}
.thematic-catalog__card-title {
font-size: 25px
}
}
@media (width<=360px) {
.thematic-catalog__track {
grid-auto-columns: 82vw
}
}
.ai {
min-height: 662px;
padding: 80px var(--page-pad);
color: var(--ink);
background: #f2f4f7;
grid-template-columns: .9fr 1.1fr;
align-items: center;
gap: 100px;
display: grid;
position: relative;
overflow: hidden
}
.ai:before,.production:before {
opacity: .7;
content: "";
pointer-events: none;
background-image: linear-gradient(#171a1d0b 1px,#0000 1px),linear-gradient(90deg,#171a1d0b 1px,#0000 1px);
background-size: 60px 60px;
position: absolute;
inset: 0
}
.ai__copy,.ai__panel {
z-index: 1;
position: relative
}
.ai__text {
max-width: 630px;
color: var(--muted);
margin: 30px 0;
font-size: 20px
}
.ai__note {
color: #171a1d80;
margin-left: 18px
}
.ai__panel {
border: 1px solid var(--line);
max-width: 650px;
color: var(--ink);
background: #fff;
border-radius: 32px;
padding: 24px;
transform: rotate(1.5deg);
box-shadow: 0 40px 90px #141e2121
}
.ai__panel-head {
border-bottom: 1px solid var(--line);
align-items: center;
gap: 12px;
padding-bottom: 18px;
display: flex
}
.ai__avatar {
width: 44px;
height: 44px
}
.ai__panel-title {
flex-direction: column;
display: flex
}
.ai__panel-name {
font-size: 15px
}
.ai__panel-status {
color: #6b7273;
font-size: 14px
}
.ai__panel-head .ai__dots {
color: var(--ink);
letter-spacing: 3px;
margin-left: auto
}
.ai__message {
border-radius: 18px;
max-width: 82%;
margin-top: 24px;
padding: 16px 18px;
font-size: 15px;
line-height: 1.45
}
.ai__message--bot {
background: #f2f4f7;
border-bottom-left-radius: 4px
}
.ai__message--user {
background: var(--aqua);
color: #fff;
border-bottom-right-radius: 4px;
margin-left: auto
}
.ai__typing {
background: #f2f4f7;
border-radius: 14px;
gap: 4px;
width: max-content;
margin-top: 14px;
padding: 10px 14px;
display: flex
}
.ai__typing-dot {
background: #8a8f8f;
border-radius: 50%;
width: 5px;
height: 5px;
animation: 1.1s ease-in-out infinite typing
}
.ai__typing-dot:nth-child(2) {
animation-delay: .15s
}
.ai__typing-dot:nth-child(3) {
animation-delay: .3s
}
@keyframes typing {
0%,60%,to {
transform: translateY(0)
}
30% {
transform: translateY(-3px)
}
}
.ai__chips {
flex-wrap: wrap;
gap: 7px;
margin: 20px 0;
display: flex
}
.ai__chip {
border: 1px solid var(--line);
color: #5d6263;
border-radius: 100px;
padding: 8px 12px;
font-size: 11px
}
.ai__input {
border: 1px solid var(--line);
color: #898e8f;
cursor: text;
background: #fff;
border-radius: 16px;
align-items: center;
width: 100%;
min-height: 60px;
padding: 8px 9px 8px 18px;
font-size: 14px;
display: flex
}
.ai__input-submit {
background: var(--ink);
color: #fff;
border-radius: 12px;
place-items: center;
width: 42px;
height: 42px;
margin-left: auto;
font-size: 20px;
display: grid
}
.section__head--products {
grid-template-columns: 1fr auto
}
#projects {
background: #fff
}
.link--text {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid var(--ink);
cursor: pointer;
background: 0 0;
border-image: ;
gap: 0 10px;
padding: 10px 0;
font-size: 20px;
display: flex
}
.products__grid {
grid-template-columns: repeat(4,1fr);
gap: 16px;
display: grid
}
/* Подборка листается: карточки в одну строку, шаг — стрелками или протягом.
Ширина колонки считается из числа видимых карточек, чтобы ряд всегда
заканчивался ровно по краю, а не половиной карточки. */
.section .products__grid--slider {
--track-visible: 4;
--track-gap: 16px;
/* Ширина «задымления» тянется за шириной экрана и за зумом: на узком экране
64 px съедали бы половину карточки, на широком — терялись бы. */
--track-fade: clamp(24px,3.2vw,72px);
--track-fade-start: 0px;
--track-fade-end: 0px;
-webkit-mask-image: linear-gradient(90deg,#0000 0,#000 var(--track-fade-start),#000 calc(100% - var(--track-fade-end)),#0000 100%);
mask-image: linear-gradient(90deg,#0000 0,#000 var(--track-fade-start),#000 calc(100% - var(--track-fade-end)),#0000 100%);
cursor: grab;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
touch-action: pan-y pinch-zoom;
-webkit-user-select: none;
user-select: none;
scrollbar-width: none;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--track-visible) - 1) * var(--track-gap)) / var(--track-visible));
grid-template-columns: none;
gap: var(--track-gap);
padding-bottom: 6px;
overflow-x: auto;
overflow-y: hidden
}
.section .products__grid--slider::-webkit-scrollbar {
display: none
}
.products__grid--slider .products__card {
scroll-snap-align: start
}
/* Сторону, где ещё есть карточки, считает tracks.js: растворять край, за
которым ничего нет, нельзя — обрежется первая или последняя карточка. */
.products__grid--slider[data-fade~=start] {
--track-fade-start: var(--track-fade)
}
.products__grid--slider[data-fade~=end] {
--track-fade-end: var(--track-fade)
}
.products__grid--dragging {
scroll-snap-type: none;
cursor: grabbing
}
.products__grid--dragging .products__card {
pointer-events: none
}
@media (width<=1180px) {
.section .products__grid--slider {
--track-visible: 3
}
}
@media (width<=900px) {
.section .products__grid--slider {
--track-visible: 2
}
}
@media (width<=600px) {
.section .products__grid--slider {
--track-visible: 1.25;
--track-gap: 12px
}
}
/* Стрелки лежат по краям дорожки, на уровне фотографии карточки. */
.products__slider {
position: relative
}
.track-arrow--side {
z-index: 3;
background: #fffffff2;
box-shadow: 0 10px 30px #141e2124;
position: absolute;
top: 34%;
transform: translateY(-50%)
}
.track-arrow--previous {
left: calc((var(--page-gutter) - 8px) * -1)
}
.track-arrow--next {
right: calc((var(--page-gutter) - 8px) * -1)
}
.track-arrow {
color: var(--ink);
cursor: pointer;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
transition: color .18s,background .18s,border-color .18s,opacity .18s;
display: grid
}
.track-arrow:hover:not(:disabled) {
color: #fff;
background: var(--aqua-strong);
border-color: var(--aqua-strong)
}
.track-arrow:disabled {
opacity: .32;
cursor: default
}
.track-arrow:focus-visible {
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent)
}
@media (width<=600px) {
/* На узком экране подборку листают пальцем, а кнопки только закрывали бы
карточку. */
.track-arrow--side {
display: none
}
}
.products__card {
flex-direction: column;
min-width: 0;
height: 100%;
display: flex
}
.products__photo {
aspect-ratio: .89;
background: #e7e8e8;
border-radius: 22px;
position: relative;
overflow: hidden
}
.products__photo-image {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .5s
}
.products__card:hover .products__photo-image {
transform: scale(1.035)
}
.products__tag {
z-index: 2;
text-transform: uppercase;
letter-spacing: .08em;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: #ffffffdb;
border-radius: 8px;
padding: 7px 10px;
font-size: 10px;
font-weight: 500;
position: absolute;
top: 14px;
left: 14px
}
.products__action {
z-index: 2;
background: var(--ink);
color: #fff;
cursor: pointer;
border: 0;
border-radius: 50%;
place-items: center;
width: 48px;
height: 48px;
font-size: 19px;
transition: background .25s,transform .25s;
display: grid;
position: absolute;
bottom: 14px;
right: 14px
}
.products__action:hover {
background: var(--aqua-deep);
transform: rotate(8deg)
}
/* Заголовки разной длины разъезжали цену по высоте: подвал карточки прижат
к низу, а карточки в ряду и так одинаковой высоты. */
.products__info {
flex-direction: column;
flex: 1;
padding: 18px 4px 0;
display: flex
}
.products__title {
letter-spacing: -.03em;
margin: 0;
font-size: 21px;
font-weight: 500;
line-height: 1.15
}
.products__meta {
min-height: 40px;
color: var(--muted);
margin: 5px 0 16px;
font-size: 13px
}
.products__footer {
border-top: 1px solid var(--line);
margin-top: auto;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 14px;
display: flex
}
.products__price {
font-size: 19px;
font-weight: 500
}
.products__lead {
color: var(--muted);
font-size: 15px
}
.live-feed {
background: #f2f4f7;
padding: clamp(78px,7vw,112px) 0
}
.live-feed__inner {
width: var(--page-width);
margin: 0 auto
}
.live-feed__head {
grid-template-columns: 1.2fr .8fr;
align-items: end;
gap: clamp(36px,5vw,72px);
margin-bottom: 46px;
display: grid
}
.live-feed__title {
letter-spacing: -.06em;
margin: 0;
font-size: clamp(48px,5vw,76px);
font-weight: 500;
line-height: .98
}
.live-feed__lead {
color: var(--muted);
margin: 0 0 8px auto;
font-size: 18px;
}
.live-feed__grid {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
display: grid
}
.live-feed__card {
background: #fff;
border: 1px solid #171a1d1a;
border-radius: 24px;
min-width: 0;
transition: border-color .26s,box-shadow .26s,transform .32s cubic-bezier(.2,.72,.2,1);
overflow: hidden
}
.live-feed__media {
background: #e8ebed;
height: clamp(260px,23vw,330px);
position: relative;
overflow: hidden
}
.live-feed__image {
object-fit: contain;
filter: drop-shadow(0 20px 18px #1116182e);
width: 100%;
height: 100%;
padding: 24px;
transition: transform .46s cubic-bezier(.2,.72,.2,1)
}
.live-feed__body {
min-height: 174px;
padding: 22px
}
.live-feed__category {
color: var(--accent);
letter-spacing: .1em;
text-transform: uppercase;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 650;
display: inline-flex
}
.live-feed__category i {
background: currentColor;
border-radius: 50%;
width: 6px;
height: 6px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent)
}
.live-feed__card-title {
letter-spacing: -.04em;
margin: 12px 0 8px;
font-size: clamp(24px,2vw,30px);
font-weight: 500;
line-height: 1.05
}
.live-feed__description {
color: var(--muted);
margin: 0;
font-size: 18px;
}
@media (hover: hover) and (pointer:fine) {
.live-feed__card:hover {
border-color:color-mix(in srgb, var(--accent) 30%, transparent);
transform: translateY(-5px);
box-shadow: 0 22px 46px #171a1d1a
}
.live-feed__card:hover .live-feed__image {
transform: translateY(-5px)rotate(1.5deg)scale(1.035)
}
}
@media (width<=900px) {
.live-feed__head {
grid-template-columns: 1fr;
align-items: start;
gap: 22px;
margin-bottom: 36px
}
.live-feed__lead {
max-width: 620px;
margin: 0
}
.live-feed__grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.live-feed__card:last-child {
grid-column: 1/-1
}
}
@media (width<=600px) {
.live-feed {
padding: 68px 0
}
.live-feed__title {
font-size: clamp(38px,11vw,48px)
}
.live-feed__lead {
font-size: 16px
}
.live-feed__grid {
grid-template-columns: 1fr
}
.live-feed__card:last-child {
grid-column: auto
}
.live-feed__media {
height: 280px
}
.live-feed__body {
min-height: 0
}
}
@media (width<=360px) {
.live-feed__media {
height: 250px
}
}
.live-feed+.pricing {
padding-top: clamp(68px,7vw,90px)
}
.pricing {
background: #fff;
padding-top: 20px
}
.pricing__grid {
grid-template-columns: repeat(3,1fr);
gap: 16px;
display: grid
}
.pricing__card {
background: #f2f4f7;
border: 1px solid #171a1d0a;
border-radius: 26px;
flex-direction: column;
min-height: 430px;
padding: 28px;
transition: transform .3s;
display: flex
}
.pricing__card:hover {
transform: translateY(-5px)
}
.pricing__symbol {
background: var(--ink);
color: #fff;
border-radius: 10px;
align-items: center;
gap: 2px;
width: max-content;
padding: 10px 14px;
display: inline-flex
}
.pricing__symbol-icon {
stroke-width: 1.8px;
width: 17px;
height: 17px
}
.pricing__body {
margin-top: auto
}
.pricing__title {
letter-spacing: -.05em;
margin: 0;
font-size: 34px;
font-weight: 500;
line-height: 1.04
}
.pricing__text {
color: var(--muted);
margin: 16px 0 28px
}
.pricing__action {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid var(--line);
cursor: pointer;
background: 0 0;
border-image: ;
justify-content: space-between;
width: 100%;
padding: 16px 0 0;
font-size: 19px;
display: flex
}
.pricing__grid .pricing__card--blue {
background: var(--aqua);
color: #fff;
border-color: #0000
}
.pricing__card--blue .pricing__title,.pricing__card--blue .pricing__text,.pricing__card--blue .pricing__action,.pricing__card--blue .pricing__action-arrow {
color: #fff
}
.pricing__card--blue .pricing__action {
border-color: #ffffff75
}
.pricing__grid .pricing__card--dark {
color: var(--ink);
background: #f2f4f7
}
.pricing__card--dark .pricing__symbol {
color: #fff;
background: var(--accent)
}
.pricing__card--dark .pricing__text {
color: var(--muted)
}
.pricing__card--dark .pricing__action {
border-color: var(--line);
color: var(--ink)
}
.production {
color: var(--ink);
padding: 81px var(--page-pad) 75px;
background: #f2f4f7;
grid-template-columns: 1fr 1fr;
display: grid;
position: relative;
overflow: clip
}
.production__media,.production__copy {
z-index: 1;
position: relative
}
.production__media {
border-radius: 26px;
align-self: start;
height: clamp(420px,56svh,560px);
margin: 0;
position: sticky;
top: clamp(96px,11svh,132px);
overflow: hidden
}
.production__media:after {
z-index: 1;
content: "";
background: linear-gradient(#0000 50%,#0a0d0f75);
position: absolute;
inset: 0
}
.production__image {
object-fit: cover;
opacity: 0;
filter: saturate(.82)contrast(1.04);
will-change: transform, opacity;
width: 100%;
height: 100%;
transition: opacity .62s,transform .9s cubic-bezier(.2,.72,.2,1);
position: absolute;
inset: 0;
transform: scale(1.08)translateY(24px)
}
.production__image--active {
z-index: 1;
opacity: 1;
transform: scale(1.04)translateY(0)
}
.production__stamp {
z-index: 2;
background: var(--aqua);
width: 150px;
height: 150px;
color: var(--ink);
border-radius: 50%;
flex-direction: column;
justify-content: center;
padding: 22px;
display: flex;
position: absolute;
bottom: 28px;
right: 28px;
transform: rotate(-8deg)
}
.production__stamp-label {
text-transform: uppercase;
letter-spacing: .12em;
color: #fff;
font-size: 10px
}
.production__stamp-title {
color: #fff;
margin-top: 5px;
font-family: Georgia;
font-size: 17px;
font-style: italic;
line-height: 1.05
}
.production__copy {
padding: 0 0 0 clamp(48px,5vw,80px)
}
.production__title {
font-size: clamp(46px,4.2vw,60px)
}
.production__text {
max-width: 680px;
color: var(--muted);
margin: 28px 0 36px;
font-size: 19px
}
.production__steps {
margin: 0 0 36px;
padding: 0;
list-style: none
}
.production__step {
border-top: 1px solid var(--line);
grid-template-columns: minmax(75px,max-content) minmax(0,1fr);
gap: 16px;
padding: 12px 0;
transition: opacity .36s;
display: grid
}
@media (width>=901px) {
.production__step {
opacity: .38;
align-items: center;
min-height: clamp(180px,26svh,280px)
}
.production__step.production__step--active {
opacity: 1
}
}
.production__step-number {
color: var(--aqua);
font-size: 61px
}
.production__step-content {
flex-direction: column;
display: flex
}
.production__step-title {
font-size: 20px;
font-weight: 500
}
.production__step-text {
color: #767676;
margin-top: 3px;
font-size: 19px
}
.process__grid {
grid-template-columns: repeat(4,1fr);
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
display: grid
}
.section--process {
background: #fff
}
.process__step {
background: #f2f4f7;
border-top: 2px solid var(--accent);
border-radius: 25px;
flex-direction: column;
min-height: 370px;
padding: 22px;
display: flex
}
.process__step-number {
color: #949494;
font-size: 28px
}
.process__icon {
color: var(--accent);
place-items: center;
width: 56px;
height: 56px;
margin: 44px 0 auto;
display: grid
}
.process__icon-svg {
stroke-width: 1.35px;
width: 46px;
height: 46px
}
.process__title {
letter-spacing: -.035em;
margin: 0 0 8px;
font-size: 22px;
font-weight: 500
}
.process__text {
color: var(--muted);
margin: 0;
font-size: 18px
}
.clients {
padding: clamp(92px, 9vw, 80px) var(--page-pad);
color: var(--ink);
background: #f2f4f7;
overflow: hidden
}
.clients__heading {
grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr);
align-items: end;
gap: 19px;
margin-bottom: clamp(48px,5vw,72px);
display: grid
}
.clients__heading .eyebrow {
margin-bottom: 20px
}
.clients__title {
letter-spacing: -.06em;
max-width: 880px;
margin: 0;
font-size: clamp(48px,5.4vw,76px);
font-weight: 500;
line-height: .94
}
.clients__lead {
max-width: 460px;
color: var(--muted);
margin: 0 0 5px auto;
font-size: 19px;
line-height: 1.55
}
.clients__logos {
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 22px;
grid-template-columns: repeat(7,minmax(0,1fr));
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
overflow: hidden
}
.clients__logo-item {
background: #fff;
place-items: center;
min-width: 0;
min-height: 118px;
display: grid;
overflow: hidden
}
.clients__logo-image {
aspect-ratio: 5/3;
object-fit: cover;
filter: grayscale()contrast(.92);
mix-blend-mode: multiply;
opacity: .68;
width: 120%;
max-width: none;
height: auto;
transition: filter .28s,opacity .28s,transform .28s;
display: block;
transform: scale(1.03)
}
@media (hover: hover) {
.clients__logo-item:hover .clients__logo-image {
filter:grayscale(0)contrast();
opacity: 1;
transform: scale(1.08)
}
}
.faq {
background: #fff;
grid-template-columns: .8fr 1.2fr;
gap: 100px;
display: grid
}
.faq__title {
align-self: start;
position: sticky;
top: clamp(96px,11svh,132px)
}
.faq__lead {
max-width: 460px;
color: var(--muted);
margin: 28px 0 0;
font-size: 22px
}
.faq__list {
border-top: 1px solid var(--accent)
}
.faq__item {
border-bottom: 1px solid var(--line)
}
.faq__question {
cursor: pointer;
grid-template-columns: minmax(44px,max-content) minmax(0,1fr) 30px;
align-items: center;
gap: 16px;
min-height: 92px;
font-size: 22px;
font-weight: 500;
list-style: none;
display: grid
}
.faq__question::-webkit-details-marker {
display: none
}
.faq__index {
color: var(--muted);
font-size: 28px;
font-weight: 700
}
.faq__toggle {
transform-origin: 50%;
will-change: transform;
justify-self: center;
width: 24px;
height: 24px;
font-size: 0;
font-style: normal;
font-weight: 400;
line-height: 0;
transition: transform .28s cubic-bezier(.2,.72,.2,1);
display: block;
position: relative;
transform: rotate(0)
}
.faq__toggle:before,.faq__toggle:after {
content: "";
background: currentColor;
border-radius: 999px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.faq__toggle:before {
width: 18px;
height: 2px
}
.faq__toggle:after {
width: 2px;
height: 18px
}
.faq__item[open] .faq__toggle {
transform: rotate(45deg)
}
.faq__answer {
max-width: 700px;
color: var(--muted);
margin: -8px 40px 32px 60px;
font-size: 19px
}
.contact {
padding: 100px max(var(--page-gutter), (100% - var(--page-max)) / 2 - 22px);
background: radial-gradient(circle at 15% 10%, #ffffffb3, transparent 26%), var(--aqua);
border-radius: 34px;
grid-template-columns: .9fr 1.1fr;
gap: 100px;
margin: 0 22px 68px;
display: grid
}
.contact__copy,.contact__copy .eyebrow,.contact__title,.contact__text,.contact__direct-link {
color: #fff
}
.contact__copy .eyebrow__mark {
background: #fff
}
.contact__text {
max-width: 550px;
margin: 28px 0;
font-size: 18px
}
.contact__direct {
flex-direction: column;
align-items: flex-start;
gap: 10px;
display: flex
}
.contact__direct-link {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: #ffffff21;
border-radius: 14px;
align-items: center;
gap: 11px;
width: max-content;
min-height: 48px;
padding: 8px 16px 8px 9px;
font-size: 16px;
font-weight: 600;
transition: background .18s,transform .18s;
display: inline-flex
}
.contact__direct-icon {
stroke-width: 1.8px;
background: #ffffff29;
border-radius: 9px;
flex: none;
width: 31px;
height: 31px;
padding: 7px
}
.contact__direct-link:hover {
background: #ffffff36;
transform: translate(3px)
}
.contact__form {
background: #fffffff7;
border-radius: 26px;
min-height: 470px;
padding: 34px;
box-shadow: 0 30px 70px #1c484e1f
}
.contact__form .form__field,.modal__form .form__field,.form__row .form__field {
color: #5b6061;
text-transform: uppercase;
letter-spacing: .08em;
flex-direction: column;
gap: 8px;
font-size: 12px;
display: flex
}
.form__row {
grid-template-columns: 1fr 1fr;
gap: 16px;
display: grid
}
.form__input,.form__textarea,.modal__input,.modal__textarea {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid var(--line);
width: 100%;
color: var(--ink);
text-transform: none;
letter-spacing: 0;
resize: vertical;
background: 0 0;
border-image: ;
outline: 0;
padding: 14px 0;
font-size: 17px
}
.contact__form .form__field--message {
margin-top: 24px
}
.form__bottom {
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: 26px;
display: flex
}
.form__file-label {
cursor: pointer;
border: 2px dashed #ababab;
border-radius: 12px;
align-items: center;
gap: 8px;
padding: 6px 18px 6px 13px;
font-size: 17px;
display: flex
}
.form__file-input {
opacity: 0;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden
}
.form__file-icon {
font-size: 26px
}
.form__file-clear,.company-contact-form__file-clear,.product-detail-form__file-clear {
cursor: pointer;
color: inherit;
background: #0000000f;
border-radius: 50%;
place-items: center;
width: 22px;
height: 22px;
font-size: 15px;
line-height: 1;
transition: background .18s,color .18s;
display: grid
}
.form__file-clear[hidden],.company-contact-form__file-clear[hidden],.product-detail-form__file-clear[hidden] {
display: none
}
.form__file-clear:hover,.company-contact-form__file-clear:hover,.product-detail-form__file-clear:hover {
color: #fff;
background: var(--accent-alt)
}
.product-detail-form__file-clear {
z-index: 1;
position: absolute;
top: 10px;
right: 10px
}
.form__disclaimer {
color: #828687;
margin-top: 18px;
font-size: 12px;
display: block
}
.form__success,.modal__success {
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 390px;
display: flex
}
.form__success-mark {
background: var(--aqua);
border-radius: 50%;
place-items: center;
width: 66px;
height: 66px;
font-size: 28px;
display: grid
}
.form__title,.modal__success .modal__title {
letter-spacing: -.04em;
margin: 20px 0 8px;
font-size: 36px;
font-weight: 500
}
.form__text,.modal__text {
max-width: 440px;
color: var(--muted);
margin: 0;
font-size: 15px
}
.form__reset {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid var(--ink);
cursor: pointer;
background: 0 0;
border-image: ;
margin-top: 24px;
padding: 0 0 5px;
font-size: 13px
}
.site-footer {
padding: 80px var(--page-pad) 26px;
color: var(--ink);
background: #f2f4f7;
border-radius: 30px 30px 0 0;
grid-template-columns: 1.4fr .7fr 1fr .8fr;
gap: 56px;
display: grid;
position: relative;
overflow: hidden
}
.site-footer__brand-link .brand-mark {
background: var(--aqua)
}
.site-footer__tagline {
color: #171a1d94;
margin: 24px 0 0;
font-size: 17px
}
.site-footer>.site-footer__nav,.site-footer>.site-footer__contacts {
flex-direction: column;
gap: 8px;
display: flex
}
.site-footer__nav-title,.site-footer__contacts-title {
color: #202020;
margin-bottom: 12px;
font-size: 19px;
font-weight: 500
}
.site-footer__nav-link,.site-footer__top-link,.site-footer__contact-item .site-footer__contact-text {
color: #171a1dc7;
font-size: 19px
}
.site-footer__nav-link {
width: max-content;
transition: color .3s;
position: relative
}
.site-footer__nav-link:after {
background: var(--aqua-strong);
content: "";
transform-origin: 100%;
height: 1px;
transition: transform .3s;
position: absolute;
bottom: -4px;
left: 0;
right: 0;
transform: scaleX(0)
}
.site-footer__nav-link:hover {
color: var(--aqua-strong)
}
.site-footer__nav-link:hover:after {
transform-origin: 0;
transform: scaleX(1)
}
.site-footer__contact-link,.site-footer__contact-item {
align-items: center;
gap: 10px;
font-size: 19px;
display: inline-flex
}
a.site-footer__contact-link {
color: var(--aqua-strong);
font-weight: 700
}
.site-footer__contact-item {
color: #171a1dc7
}
.site-footer__contact-link .site-footer__contact-text {
color: inherit;
font-weight: inherit
}
.site-footer__contact-icon {
flex: none;
width: 18px;
height: 18px
}
.site-footer__contact-link .site-footer__contact-icon {
color: var(--aqua-strong)
}
.site-footer__contact-item .site-footer__contact-icon {
color: var(--aqua)
}
.site-footer__contact-link:hover,.site-footer__contact-link:hover .site-footer__contact-icon {
color: var(--aqua-deep)
}
.site-footer__socials {
align-items: center;
gap: 10px;
margin-top: 14px;
display: flex
}
.site-footer__social {
color: #5b6166;
background: #171a1d0a;
border-radius: 50%;
place-items: center;
width: 40px;
height: 40px;
transition: color .18s,background .18s;
display: grid
}
.site-footer__social:hover {
color: #fff;
background: var(--accent-alt)
}
.site-footer__social:focus-visible {
outline-offset: 2px;
outline: 2px solid var(--accent-alt)
}
html[data-theme=dark] .site-footer__social {
color: #f5f7f8b8;
background: #ffffff14
}
.site-footer__action {
--footer-action-background: var(--aqua);
--footer-action-text: white;
--footer-action-hours: #171a1d85
}
.site-footer__action-button {
background: var(--footer-action-background);
cursor: pointer;
min-height: 58px;
color: var(--footer-action-text);
border: 0;
border-radius: 14px;
justify-content: space-between;
align-items: center;
gap: 0 20px;
margin-bottom: 10px;
padding: 0 18px;
font-size: 17px;
font-weight: 600;
transition: background .18s,box-shadow .18s,transform .18s;
display: flex
}
.site-footer__action-button:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent)
}
.site-footer__action-button .site-footer__action-arrow {
color: var(--footer-action-text);
font-size: 19px
}
.site-footer__action-hours {
color: var(--footer-action-hours);
font-size: 17px
}
.site-footer__wordmark {
color: color-mix(in srgb, var(--accent) 9%, transparent);
text-align: center;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
transform-origin: bottom;
pointer-events: none;
grid-column: 1/-1;
width: 100%;
height: 100%;
margin: clamp(24px,3.2vw,50px) 0 -200px;
font-family: Georgia;
font-size: clamp(112px,21.5vw,330px);
font-style: italic;
font-weight: 500;
line-height: .72;
position: absolute;
bottom: 0;
right: 0;
transform: scaleX(1.04)
}
.site-footer__bottom {
border-top: 1px solid var(--line);
grid-column: 1/-1;
justify-content: space-between;
margin-top: 18px;
padding-top: 22px;
display: flex
}
.site-footer__copyright,.site-footer__top-link {
color: #171a1d75;
font-size: 14px
}
.floating-ai {
z-index: 70;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
cursor: pointer;
background: #f9f9f6e6;
border: 1px solid #ffffffb3;
border-radius: 18px;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
display: flex;
position: fixed;
bottom: 24px;
right: 24px;
box-shadow: 0 12px 40px #141e2124
}
.floating-ai-mark {
width: 40px;
height: 40px
}
.floating-ai__copy {
text-align: left;
flex-direction: column;
line-height: 1.15;
display: flex
}
.floating-ai__title {
font-size: 13px
}
.floating-ai__caption {
color: var(--muted);
font-size: 10px
}
.modal {
z-index: 120;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #12161894;
place-items: center;
padding: 24px;
animation: .3s both modal-backdrop-in;
display: grid;
position: fixed;
inset: 0
}
.modal__dialog {
transform-origin: 50%;
will-change: opacity, transform;
background: #fff;
border-radius: 28px;
width: min(680px,100%);
max-height: calc(100vh - 48px);
padding: 46px;
animation: .34s cubic-bezier(.2,.72,.2,1) both modal-dialog-in;
position: relative;
overflow-y: auto;
box-shadow: 0 40px 120px #0000004d
}
.modal--closing {
pointer-events: none;
animation: .22s both modal-backdrop-out
}
.modal--closing .modal__dialog {
animation: .22s cubic-bezier(.4,0,1,1) both modal-dialog-out
}
@keyframes modal-backdrop-in {
0% {
-webkit-backdrop-filter: blur();
backdrop-filter: blur();
background: #12161800
}
to {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #12161894
}
}
@keyframes modal-backdrop-out {
0% {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #12161894
}
to {
-webkit-backdrop-filter: blur();
backdrop-filter: blur();
background: #12161800
}
}
@keyframes modal-dialog-in {
0% {
opacity: 0;
transform: translateY(12px)scale(.985)
}
to {
opacity: 1;
transform: translateY(0)scale(1)
}
}
@keyframes modal-dialog-out {
0% {
opacity: 1;
transform: translateY(0)scale(1)
}
to {
opacity: 0;
transform: translateY(8px)scale(.988)
}
}
.modal__close {
border: 1px solid var(--line);
cursor: pointer;
background: 0 0;
border-radius: 50%;
width: 42px;
height: 42px;
font-size: 25px;
position: absolute;
top: 18px;
right: 18px
}
.modal__title {
letter-spacing: -.055em;
max-width: 560px;
margin: 0;
font-size: 48px;
font-weight: 500;
line-height: .98
}
.modal__text {
color: var(--muted);
margin: 18px 0 28px;
font-size: 16px
}
.modal__form .form__field {
margin-bottom: 20px
}
.modal__textarea {
background: #f7f8f8;
border: 1px solid #d2d6d6;
border-radius: 14px;
min-height: 132px;
padding: 16px 18px;
line-height: 1.45;
transition: border-color .18s,background .18s,box-shadow .18s
}
.modal__textarea::placeholder {
color: #84898a;
opacity: 1
}
.modal__textarea:hover {
border-color: #acb2b2
}
.modal__textarea:focus,.modal__textarea:focus-visible {
border-color: var(--aqua-strong);
background: #fff;
outline: 0;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)
}
.modal__form .button {
width: 100%;
margin-top: 26px
}
.modal__success .button {
margin-top: 28px
}
@media (width<=1180px) {
.site-header__inner {
grid-template-columns: auto auto minmax(180px,220px) minmax(0,1fr) auto
}
.site-header__nav {
gap: 12px;
font-size: 13px
}
.hero {
grid-template-columns: .95fr 1.05fr
}
.hero__title--legacy {
font-size: clamp(58px,7vw,82px)
}
.catalog__mosaic {
grid-template-columns: repeat(2,1fr)
}
.products__grid {
grid-template-columns: repeat(2,1fr);
row-gap: 42px
}
.ai {
gap: 56px
}
.production__copy {
padding-left: 5vw
}
.clients__logos {
grid-template-columns: repeat(4,minmax(0,1fr))
}
}
@media (width>=901px) and (width<=1040px) {
.site-header__inner {
grid-template-columns: auto auto minmax(110px,140px) minmax(0,1fr) auto;
gap: 10px
}
.site-header__search-form {
padding: 0 10px
}
}
@media (width>=901px) and (height<=820px) {
.hero {
gap: 8px;
padding-top: 88px;
padding-bottom: 12px
}
.hero__copy .eyebrow {
display: none
}
.hero__title--legacy {
font-size: clamp(42px,min(4.2vw,6.5svh),50px)
}
.hero__lead {
max-width: 1100px;
margin-top: 8px;
font-size: 18px;
line-height: 1.3
}
.hero__buttons {
margin-top: 8px
}
.hero__buttons .button {
min-height: 44px
}
.hero__kicker {
display: none
}
.hero__heading-panel {
padding-bottom: 8px
}
.hero__heading-panel-title {
font-size: 28px
}
.hero__arrows {
bottom: 8px
}
.hero__arrow {
width: 40px;
height: 40px
}
.hero__viewport {
height: clamp(250px,34svh,300px)
}
.hero__footer {
min-height: 24px;
padding-top: 4px
}
.hero__caption-text {
display: none
}
.smart-search {
min-height: 64px;
padding-top: 6px;
padding-bottom: 6px
}
}
@media (width>=901px) and (height<=740px) {
.hero__lead {
display: none
}
}
@media (width<=900px) {
.site-header {
--topbar-height: 30px
}
.site-header__inner {
grid-template-columns: auto auto minmax(96px,1fr) auto;
gap: 12px
}
.site-header__nav {
gap: 0;
font-size: 16px;
display: none
}
.site-header__tools {
grid-area: 1/4;
gap: 6px;
display: flex
}
.site-header__search-form {
min-height: 48px;
padding: 0 12px
}
.site-header--search-open .site-header__search {
grid-column: 1/-1
}
.site-header--search-open .site-header__brand,.site-header--search-open .site-header__catalog,.site-header--search-open .site-header__nav,.site-header--search-open .site-header__tools {
opacity: 0
}
.site-header__search-panel {
top: calc(var(--header-main-height) + var(--topbar-current-height));
transform-origin: top;
width: auto;
position: fixed;
left: 10px;
right: 10px
}
.site-header__nav--open {
top: calc(var(--header-main-height) + var(--topbar-current-height) + 8px);
background: #f8f8f5f7;
border-radius: 18px;
flex-direction: column;
align-items: stretch;
gap: 0;
width: auto;
padding: 18px;
display: flex;
position: fixed;
left: 10px;
right: 10px;
box-shadow: 0 18px 44px #141e2121
}
.site-header__nav--open .site-header__nav-link {
border-bottom: 1px solid var(--line);
padding: 14px 5px
}
.site-header__nav--open>.site-header__nav-link:last-child {
border-bottom: 0
}
.site-header__nav--open .site-header__cta {
justify-content: center;
width: 100%;
margin-top: 14px
}
.site-header__catalog {
width: auto;
display: flex
}
.site-header__catalog-toggle {
justify-content: center;
width: 48px;
min-height: 48px;
margin-bottom: 0;
padding: 0
}
.site-header__catalog-toggle-label {
display: none
}
.site-header__catalog-dropdown {
top: calc(var(--header-main-height) + var(--topbar-current-height));
width: 100%;
max-height: calc(100dvh - var(--header-main-height) - var(--topbar-current-height));
-webkit-backdrop-filter: none;
backdrop-filter: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 0 100%);
background: #fff;
border-top: 1px solid #171a1d1a;
border-radius: 0;
padding: 0;
transition: clip-path .42s cubic-bezier(.2,.72,.2,1),opacity .22s,visibility .42s,transform .42s cubic-bezier(.2,.72,.2,1);
position: fixed;
left: 0;
right: 0;
overflow: hidden auto;
transform: translateY(-10px);
box-shadow: 0 24px 50px #0e121429
}
.site-header__catalog-dropdown-inner {
grid-template-columns: 1fr;
gap: 22px;
padding: 26px 0 32px
}
.site-header__catalog-dropdown--open {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transform: translateY(0)
}
.site-header__catalog-rail {
padding: 14px
}
.site-header__catalog-rail-links {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.site-header__catalog-custom {
margin-top: 14px
}
.site-header__catalog-highlights {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.site-header__catalog-highlight {
min-height: 120px
}
.site-header__catalog-groups {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 24px
}
.site-header__catalog-group:first-child {
grid-row: span 2
}
.site-header__catalog-group-title {
margin-bottom: 8px
}
.site-header__catalog-link {
min-height: 0;
font-size: 12px;
border: 0!important;
padding: 5px 0!important
}
.site-header__menu-button {
background: var(--ink);
border: 0;
border-radius: 13px;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 48px;
height: 48px;
padding: 0 13px;
display: flex
}
.site-header__menu-button-line {
background: #fff;
width: 100%;
height: 1px
}
.hero {
gap: 24px;
min-height: 100svh;
padding-top: 118px;
padding-bottom: 32px
}
.hero__carousel {
width: 100%
}
.hero__viewport {
height: 240px;
min-height: 0
}
.smart-search {
bottom: auto
}
.trust-strip {
grid-template-columns: repeat(2,1fr);
gap: 22px 0;
padding-top: 24px;
padding-bottom: 24px
}
.trust-strip__item:nth-child(2) {
border-right: 0
}
.section__head,.ai,.production,.faq,.contact {
grid-template-columns: 1fr
}
.section__head {
gap: 28px
}
.section__lead {
margin-left: 0
}
.ai {
gap: 80px
}
.ai__panel {
margin: 0 auto
}
.pricing__grid {
grid-template-columns: 1fr
}
.pricing__card {
min-height: 330px
}
.production__media {
min-height: 600px;
margin: 34px 0;
position: relative;
top: auto
}
.production__image {
opacity: 0;
will-change: auto;
transition: none;
display: none;
transform: none
}
.production__image:first-of-type {
opacity: 1;
display: block
}
.production__copy {
padding: 90px 0
}
.process__grid {
grid-template-columns: repeat(2,1fr)
}
.clients__heading {
grid-template-columns: 1fr;
gap: 28px
}
.clients__lead {
margin-left: 0
}
.faq {
gap: 56px
}
.faq__title {
position: static
}
.contact {
gap: 60px
}
.site-footer {
grid-template-columns: 1.4fr 1fr
}
}
@media (width<=600px) {
.site-header {
--header-main-height: 60px;
--topbar-height: 0px
}
.site-header__topbar {
display: none
}
.site-header__topbar-inner {
gap: 12px;
font-size: 10.5px;
display: none
}
.site-header__nav--open .site-header__nav-mobile-phone {
border-top: 1px solid var(--line);
color: var(--accent-alt);
gap: 10px;
margin-top: 10px;
padding-top: 15px;
font-size: 18px;
font-weight: 600;
display: flex
}
body {
font-size: 18px
}
.site-header__inner {
grid-template-columns: auto auto minmax(0,1fr) auto;
gap: 8px;
min-height: 60px;
padding: 6px 0
}
.site-header__catalog-toggle {
width: 42px;
min-height: 42px
}
.site-header__catalog-dropdown {
top: calc(var(--header-main-height) + var(--topbar-current-height));
max-height: calc(100dvh - var(--header-main-height) - var(--topbar-current-height))
}
.site-header__catalog-rail-links,.site-header__catalog-groups {
grid-template-columns: 1fr
}
.site-header__catalog-group:first-child {
grid-row: auto
}
.site-header__catalog-heading-title {
font-size: 18px
}
.site-header__catalog-main {
gap: 15px
}
.site-header__catalog-heading-link {
font-size: 10px
}
.site-header__catalog-highlight {
min-height: 112px;
padding: 13px
}
.site-header__catalog-highlight-title {
font-size: 13px
}
.site-header__catalog-highlight-copy {
max-width: 62%
}
.site-header__catalog-highlight-caption {
display: none
}
.site-header__catalog-highlight-image {
width: 60%;
height: 78%;
bottom: -8%;
right: -2%
}
.site-header__catalog-promos {
overscroll-behavior-x: contain;
scrollbar-width: none;
grid-template-columns: repeat(2,minmax(250px,1fr));
overflow-x: auto
}
.site-header__catalog-promos::-webkit-scrollbar {
display: none
}
.site-header__catalog-promo {
min-height: 104px
}
.site-header__search-form {
grid-template-columns: 18px minmax(0,1fr) auto;
gap: 6px;
min-height: 46px;
padding: 0 10px
}
.site-header__search-input {
font-size: 14px
}
.site-header__search-clear {
width: 28px;
height: 28px
}
.site-header__logo {
width: 42px
}
.site-footer__logo {
width: 54px
}
.brand-name {
font-size: 21px
}
.brand-mark {
width: 32px;
height: 32px
}
.hero {
gap: 18px;
padding: 92px 18px 20px
}
.hero__title--legacy {
font-size: 38px
}
.hero__lead {
display: none
}
.hero__buttons {
grid-template-columns: 1fr;
margin-top: 16px;
display: grid
}
.hero__carousel {
width: 100%
}
.hero__heading-panel {
flex-direction: column;
align-items: center;
gap: 10px;
min-height: 0;
padding: 2px 0 10px
}
.hero__heading-panel-title {
font-size: 30px
}
.hero__kicker {
display: none
}
.hero__arrow {
width: 42px;
height: 42px
}
.hero__arrows {
justify-content: center;
position: static
}
.hero__viewport {
height: 280px;
min-height: 0
}
.hero__award {
width: 84%;
top: 0;
bottom: 0
}
.hero__award--previous,.hero__award--next {
opacity: .13
}
.hero__award--previous {
transform: translate(-116%)scale(.56)
}
.hero__award--next {
transform: translate(16%)scale(.56)
}
.hero__footer {
grid-template-columns: 1fr auto;
gap: 12px;
min-height: 28px;
padding-top: 6px
}
.hero__caption {
text-align: center;
grid-column: 1/-1;
align-items: center
}
.hero__caption-title {
font-size: 22px
}
.hero__copy .eyebrow {
display: none
}
.smart-search {
grid-template-columns: 1fr 52px;
width: 100%;
min-height: 88px;
padding-left: 16px;
bottom: auto;
left: auto;
right: auto
}
.search-diamond {
display: none
}
.smart-search__input {
font-size: 18px
}
.smart-search__button {
width: 52px;
height: 52px
}
.hero__count-value {
font-size: 18px
}
.trust-strip__item {
grid-template-columns: 42px minmax(0,1fr);
gap: 10px;
padding: 0 12px
}
.trust-strip__icon {
border-radius: 13px;
width: 42px;
height: 42px
}
.trust-strip__icon-svg {
width: 20px;
height: 20px
}
.trust-strip__value {
font-size: 22px
}
.trust-strip__label {
font-size: 12px;
line-height: 1.25
}
.section,.ai {
padding-top: 88px;
padding-bottom: 88px
}
.section__title,.ai__title,.production__title,.contact__title,.faq__heading {
font-size: 44px
}
.catalog__mosaic {
grid-template-columns: 1fr;
grid-auto-rows: 330px
}
.catalog__card--wide {
grid-column: auto
}
.ai {
gap: 60px
}
.ai__note {
margin: 12px 0 0;
display: block
}
.ai__panel {
border-radius: 22px;
padding: 15px;
transform: none
}
.ai__message {
max-width: 92%;
font-size: 13px
}
.products__grid {
grid-template-columns: 1fr
}
.pricing {
padding-top: 72px
}
.production__media {
min-height: 420px;
margin: 18px 0
}
.production__copy {
padding: 70px 0 88px
}
.process__grid {
grid-template-columns: 1fr
}
.process__step {
min-height: 300px
}
.clients {
padding: 80px 18px
}
.clients__heading {
margin-bottom: 42px
}
.clients__title {
font-size: 42px;
line-height: .96
}
.clients__lead {
font-size: 15px
}
.clients__logos {
border-radius: 18px;
grid-template-columns: repeat(2,minmax(0,1fr))
}
.clients__logo-item {
min-height: 102px
}
.faq__question {
grid-template-columns: minmax(30px,max-content) minmax(0,1fr) 22px;
gap: 10px;
min-height: 82px;
font-size: 17px
}
.faq__answer {
margin-left: 40px;
font-size: 14px
}
.contact {
border-radius: 24px;
margin: 0 10px 10px;
padding: 72px 18px
}
.contact__form {
min-height: 0;
padding: 22px
}
.form__row {
grid-template-columns: 1fr
}
.form__bottom {
flex-direction: column;
align-items: stretch
}
.site-footer {
grid-template-columns: 1fr;
padding: 70px 18px 0
}
.site-footer__wordmark {
order: 2;
align-self: end;
width: 100%;
height: auto;
margin: 0;
font-size: 24.5vw;
line-height: .76;
position: static;
transform: none
}
.site-footer__bottom {
flex-direction: column;
order: 1;
gap: 10px
}
.floating-ai {
bottom: 12px;
right: 12px
}
.modal {
padding: 10px
}
.modal__dialog {
border-radius: 22px;
max-height: calc(100vh - 20px);
padding: 34px 20px 24px
}
.modal__title {
padding-right: 28px;
font-size: 38px
}
.modal__close {
top: 12px;
right: 12px
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
.modal,.modal__dialog,.modal--closing,.modal--closing .modal__dialog,.site-loader,.site-loader__content,.site-loader__emblem,.site-loader__progress-bar,.site-loader--leaving .site-loader__content {
animation: auto;
animation-timeline: none
}
.site-header__catalog-dropdown,.site-header__topbar {
transition: none
}
.page .site-header,.page .hero__copy,.page .hero__stage {
animation: auto;
animation-timeline: none
}
.page--motion-ready [data-motion],.page--motion-ready [data-motion]>*,.page--motion-ready [data-motion].page__reveal--visible>* {
opacity: 1;
transition: none;
transform: none
}
*,:before,:after {
scroll-behavior: auto!important;
transition-duration: .01ms!important;
animation-duration: .01ms!important;
animation-iteration-count: 1!important
}
}
.hero {
--orbit-radius: clamp(620px, 55vw, 840px);
--hero-center-y: clamp(250px, 29svh, 320px);
background: radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%), radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 25%), var(--milk);
min-height: max(100svh,800px);
color: var(--ink);
grid-template-rows: auto minmax(510px,1fr);
align-items: stretch;
gap: 0;
padding: clamp(120px,14svh,152px) max(32px,50vw - 780px) 0;
display: grid;
position: relative;
overflow: hidden
}
.hero__copy {
z-index: 12;
text-align: center;
width: 100%;
max-width: 1280px;
margin: 0 auto;
position: relative
}
.hero__copy .eyebrow {
color: var(--muted);
justify-content: center;
margin-bottom: clamp(14px,1.8svh,22px)
}
.hero__copy .eyebrow__mark {
background: var(--aqua);
box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 42%, transparent)
}
.hero__title--legacy {
max-width: 1280px;
color: var(--ink);
letter-spacing: -.01em;
margin: 0 auto;
font-size: clamp(58px,min(7.2vw,10svh),112px);
font-weight: 500;
line-height: .84
}
.hero__slogan {
color: var(--aqua);
font-family: Georgia;
font-style: italic;
display: block
}
.hero__carousel {
z-index: 2;
outline: none;
width: 100%;
min-width: 0;
max-width: none;
margin: 0 auto;
position: relative
}
.hero__carousel:focus-visible {
outline-offset: -6px;
outline: 1px solid color-mix(in srgb, var(--accent) 72%, transparent)
}
.hero__stage {
isolation: isolate;
touch-action: pan-y;
width: 100%;
height: 100%;
min-height: 510px;
position: relative;
overflow: hidden
}
.hero__glow {
z-index: 0;
filter: blur(66px);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: 50%;
width: min(54vw,760px);
height: min(42vw,560px);
position: absolute;
top: 17%;
left: 50%;
transform: translate(-50%)
}
.hero__arc {
z-index: 2;
top: calc(var(--hero-center-y) + var(--orbit-radius) + clamp(220px, 25svh, 285px));
width: calc(var(--orbit-radius) * 2);
height: calc(var(--orbit-radius) * 2);
pointer-events: none;
border: 1px solid #171a1d2e;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 -1px 30px color-mix(in srgb, var(--accent) 10%, transparent)
}
.hero__arc:before,.hero__arc:after {
background: var(--aqua);
content: "";
border-radius: 50%;
width: 7px;
height: 7px;
position: absolute;
top: -4px;
box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 46%, transparent)
}
.hero__arc:before {
left: 31%
}
.hero__arc:after {
right: 31%
}
.hero__orbit {
z-index: 4;
top: calc(var(--hero-center-y) + var(--orbit-radius));
width: calc(var(--orbit-radius) * 2);
height: calc(var(--orbit-radius) * 2);
transform: translate(-50%, -50%) rotate(var(--orbit-rotation));
transform-origin: 50%;
will-change: transform;
transition: transform 1s cubic-bezier(.2,.78,.18,1);
position: absolute;
left: 50%
}
.hero__award {
--award-scale: 0;
--award-opacity: 0;
opacity: 1;
width: clamp(410px,43vw,640px);
height: clamp(440px,53svh,610px);
transform: translate(-50%, -50%) rotate(var(--item-angle)) translateY(calc(var(--orbit-radius) * -1));
transform-origin: 50%;
pointer-events: none;
margin: 0;
position: absolute;
top: 50%;
left: 50%
}
.hero__award-upright {
width: 100%;
height: 100%;
opacity: var(--award-opacity);
transform: rotate(var(--counter-angle)) scale(var(--award-scale));
transform-origin: 50%;
will-change: transform, opacity;
transition: transform 1s cubic-bezier(.2,.78,.18,1),opacity .52s,filter .7s;
display: block
}
.hero__award-image {
object-fit: contain;
filter: drop-shadow(0 32px 24px #141e2138);
width: 100%;
height: 100%;
transform: scale(var(--image-scale,1))
}
.hero__award:nth-child(3n+1) {
--image-scale: 1.13
}
.hero__award:nth-child(3n+2) {
--image-scale: 1.04
}
.hero__award:nth-child(3n) {
--image-scale: .96
}
.hero__award--active {
--award-scale: 1;
--award-opacity: 1;
z-index: 8
}
.hero__award--near {
--award-scale: .56;
--award-opacity: .48;
z-index: 5
}
.hero__award--near .hero__award-upright {
filter: saturate(.76)brightness(.9)
}
.hero__award--far {
--award-scale: .28;
--award-opacity: .09;
z-index: 3
}
.hero__award--far .hero__award-upright,.hero__award--hidden .hero__award-upright {
filter: saturate(.5)brightness(.82)
}
.hero__caption {
z-index: 12;
grid-template-columns: 52px 1fr;
align-items: start;
gap: 16px;
max-width: 360px;
display: grid;
position: absolute;
bottom: 30px;
left: 0
}
.hero__count {
color: var(--aqua);
letter-spacing: .04em;
padding-top: 2px;
font-size: 13px;
font-weight: 600
}
.hero__count i {
color: #171a1d57;
font-style: normal;
font-weight: 400
}
.hero__caption-copy {
flex-direction: column;
gap: 5px;
display: flex
}
.hero__caption-title {
font-size: 16px;
font-weight: 500;
line-height: 1.15
}
.hero__caption-text {
color: var(--muted);
font-size: 11px;
line-height: 1.4
}
.hero__footer {
z-index: 12;
justify-content: flex-end;
align-items: center;
gap: 22px;
min-height: 0;
padding: 0;
display: flex;
position: absolute;
bottom: 26px;
right: 0
}
.hero__footer-link {
border-bottom: 1px solid var(--line);
color: #171a1db8;
text-transform: uppercase;
letter-spacing: .08em;
padding-bottom: 4px;
font-size: 12px
}
.hero__footer-link-icon {
color: var(--aqua);
margin-left: 8px
}
.hero__arrows {
gap: 8px;
display: flex;
position: static
}
.hero__arrow {
border: 1px solid var(--line);
width: 48px;
height: 48px;
color: var(--ink);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
cursor: pointer;
background: #ffffff8f;
border-radius: 50%;
font-family: inherit;
font-size: 20px;
transition: color .18s,background .18s,border-color .18s,transform .18s
}
.hero__arrow:hover {
border-color: var(--aqua);
background: var(--aqua);
color: var(--ink);
transform: translateY(-2px)
}
.hero__dots {
z-index: 13;
border: 1px solid var(--line);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: #ffffff9e;
border-radius: 999px;
align-items: center;
gap: 8px;
padding: 8px 10px;
display: flex;
position: absolute;
bottom: 37px;
right: 50%;
transform: translate(50%)
}
.hero__dot {
cursor: pointer;
background: #171a1d3d;
border: 0;
border-radius: 999px;
width: 6px;
height: 6px;
padding: 0;
transition: width .28s,background .28s
}
.hero__dots-button--active {
background: var(--aqua);
width: 25px
}
@media (width>=901px) and (height<=820px) {
.hero {
--hero-center-y: 225px;
grid-template-rows: auto minmax(500px,1fr);
min-height: 760px;
padding-top: 108px
}
.hero__copy .eyebrow {
margin-bottom: 10px
}
.hero__title--legacy {
font-size: clamp(54px,6.4vw,82px)
}
.hero__award {
height: 470px
}
}
@media (width<=900px) {
.hero {
--orbit-radius: clamp(470px, 76vw, 610px);
--hero-center-y: 225px;
grid-template-rows: auto minmax(480px,1fr);
min-height: max(100svh,740px);
padding: 108px 24px 0
}
.hero__title--legacy {
font-size: clamp(52px,10.5vw,78px)
}
.hero__stage {
min-height: 480px
}
.hero__award {
width: clamp(360px,72vw,500px);
height: clamp(400px,51svh,520px)
}
.hero__arc {
top: calc(var(--hero-center-y) + var(--orbit-radius) + 225px)
}
.hero__footer-link {
display: none
}
}
@media (width<=600px) {
.hero {
--orbit-radius: 420px;
--hero-center-y: 172px;
grid-template-rows: auto minmax(440px,1fr);
min-height: max(100svh,690px);
padding: 92px 14px 0
}
.hero__copy .eyebrow {
letter-spacing: .1em;
margin-bottom: 12px;
font-size: 10px
}
.hero__title--legacy {
font-size: clamp(43px,13vw,61px);
line-height: .88
}
.hero__stage {
min-height: 440px
}
.hero__award {
width: 330px;
height: 350px
}
.hero__award--near {
--award-scale: .5;
--award-opacity: .36
}
.hero__award--far {
--award-opacity: 0
}
.hero__arc {
top: calc(var(--hero-center-y) + var(--orbit-radius) + 168px)
}
.hero__caption {
grid-template-columns: 40px 1fr;
gap: 9px;
max-width: none;
bottom: 18px;
left: 4px;
right: 82px
}
.hero__caption-title {
font-size: 13px
}
.hero__caption-text {
display: none
}
.hero__footer {
bottom: 14px;
right: 2px
}
.hero__arrow {
width: 42px;
height: 42px
}
.hero__arrow:first-child {
display: none
}
.hero__dots {
top: 12px;
bottom: auto;
right: 12px;
transform: none
}
}
.hero {
--carousel-side-x: clamp(300px, 33vw, 500px);
--carousel-side-y: clamp(49px, calc(9.9svh - 27px), 81px)
}
.hero__arc {
width: min(150vw,1840px);
height: 500px;
top: auto;
bottom: -420px;
left: 50%;
transform: translate(-50%)
}
.hero__awards {
z-index: 4;
will-change: transform;
transition: transform .24s cubic-bezier(.2,.78,.18,1);
position: absolute;
inset: 0 0 72px
}
.hero__carousel {
cursor: grab;
-webkit-user-select: none;
user-select: none
}
.hero__carousel--dragging {
cursor: grabbing
}
.hero__carousel--dragging .hero__awards {
transition: none
}
.hero__carousel .hero__award-image {
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none
}
.hero__award {
opacity: .42;
filter: saturate(.68)brightness(.72);
transform-origin: 50% 100%;
pointer-events: none;
will-change: transform, opacity;
background: 0 0;
border: 0;
width: clamp(410px,43vw,640px);
height: clamp(440px,53svh,610px);
margin: 0;
padding: 0;
transition: transform .76s cubic-bezier(.2,.78,.18,1),opacity .64s cubic-bezier(.2,.78,.18,1),filter .64s cubic-bezier(.2,.78,.18,1),visibility .64s cubic-bezier(.2,.78,.18,1);
position: absolute;
top: 0;
bottom: auto;
left: 50%
}
.hero__award-upright {
opacity: 1;
filter: none;
width: 100%;
height: 100%;
transition: none;
display: block;
transform: none
}
.hero__award--active {
z-index: 8;
opacity: 1;
filter: none;
transform: translate(-50%,-6px)scale(1)
}
.hero__award--active,.hero__award--left,.hero__award--right {
pointer-events: auto;
cursor: pointer
}
.hero__award:focus-visible {
outline: none
}
.hero__award:focus-visible .hero__award-upright {
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 38%, transparent))
}
.hero__award--left {
z-index: 5;
transform: translate(calc(-50% - var(--carousel-side-x)), var(--carousel-side-y)) scale(.56) rotate(-5deg)
}
.hero__award--right {
z-index: 5;
transform: translate(calc(-50% + var(--carousel-side-x)), var(--carousel-side-y)) scale(.56) rotate(5deg)
}
@media (width>=901px) and (height<=820px) {
.hero__award {
height: 470px
}
}
@media (width<=900px) {
.hero {
--carousel-side-x: clamp(220px, 40vw, 340px);
--carousel-side-y: 59px
}
.hero__award {
width: clamp(360px,72vw,500px);
height: clamp(400px,51svh,520px)
}
}
@media (width<=600px) {
.hero {
--carousel-side-x: 47vw;
--carousel-side-y: 40px
}
.hero__awards {
inset: 0 0 64px
}
.hero__arc {
width: 185vw;
bottom: -405px
}
.hero__award {
width: 330px;
height: 350px
}
.hero__award--left {
opacity: .3;
transform: translate(calc(-50% - var(--carousel-side-x)), var(--carousel-side-y)) scale(.48) rotate(-5deg)
}
.hero__award--right {
opacity: .3;
transform: translate(calc(-50% + var(--carousel-side-x)), var(--carousel-side-y)) scale(.48) rotate(5deg)
}
}
.hero--reference {
--carousel-side-y: clamp(24px, calc(9.9svh - 52px), 56px);
box-shadow: none;
color: #172022;
isolation: isolate;
background: radial-gradient(circle at 50% 82%,color-mix(in srgb, var(--accent) 12%, transparent),#0000 30%),radial-gradient(circle at 84% 20%,color-mix(in srgb, var(--accent-soft) 8%, transparent),#0000 25%),#f2f4f7;
border-bottom: 0;
grid-template-rows: minmax(0,1fr)!important;
grid-template-columns: minmax(0,1fr)!important;
min-height: clamp(680px,100svh - 142px,940px)!important;
padding-bottom: clamp(38px,3.4vw,52px)!important
}
.hero--reference:after {
pointer-events: none;
z-index: 0;
content: "";
/* Размер в процентах превращал свет в гигантский эллипс с чёткой кромкой на
широком экране: держим его в пределах композиции и гасим постепенно. */
background: radial-gradient(clamp(420px,52%,860px) 100% at 50% 100%,#ffffffd6,#ffffff85 42%,#0000 82%);
height: clamp(220px,46%,420px);
position: absolute;
inset: auto 0 0
}
.hero--reference:before {
pointer-events: none;
z-index: 0;
content: "";
opacity: .045;
background-image: url("data:image/svg+xml,");
background-size: 160px 160px;
position: absolute;
inset: 0
}
.hero--reference .hero__composition {
z-index: 1;
position: relative
}
.hero__composition {
opacity: 1;
transform-origin: 50% 12%;
will-change: transform, opacity;
grid-row: 1;
grid-template-rows: auto minmax(430px,1fr);
min-width: 0;
min-height: 0;
display: grid;
transform: none
}
@supports (animation-timeline:view()) {
.hero__composition {
animation-name: hero-composition-exit;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: view();
animation-range: exit exit 72%
}
}
@keyframes hero-composition-exit {
0% {
opacity: 1;
transform: none
}
to {
opacity: .18;
transform: translateY(-86px)scale(.935)
}
}
.hero__copy {
z-index: 10;
grid-row: 1;
align-self: start;
max-width: 1500px;
margin: 0 0 -14px;
padding: 0 24px
}
.hero__heading {
/* Колонка заголовка по ширине самой строки: ветки стоят вплотную к тексту,
а не по краям сетки — и при этом не налезают на него. */
grid-template-columns: clamp(64px,5vw,82px) minmax(0,max-content) clamp(64px,5vw,82px);
justify-content: center;
align-items: end;
gap: clamp(12px,1.6vw,28px);
/* Ветки стоят по краям заголовка: на узкой сетке длинная строка вылезала из
своей колонки и налезала на них. */
width: 100%;
margin: 0 auto;
padding-top: 0;
display: grid
}
.hero__copy .hero__title {
color: #172022;
text-wrap: nowrap;
min-width: 0;
max-width: 1200px;
font-size: min(calc(5.5vw - 14px),68px);
line-height: .86
}
.hero__title-line {
white-space: nowrap;
display: block
}
.hero__copy .hero__slogan {
letter-spacing: -.04em;
white-space: nowrap;
font-size: .82em;
animation: .52s cubic-bezier(.2,.78,.18,1) both hero-slogan-reveal;
color: var(--accent)!important
}
@keyframes hero-slogan-reveal {
0% {
opacity: .2;
transform: translateY(.08em)scale(.98)
}
to {
opacity: 1;
transform: translateY(0)scale(1)
}
}
.hero__laurel {
object-fit: contain;
transform-origin: 50% 100%;
opacity: .6;
filter: none;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
width: clamp(64px,5vw,82px);
height: auto;
max-height: clamp(116px,8.6vw,146px);
display: block
}
.hero__laurel--left {
justify-self: end
}
.hero__laurel--right {
justify-self: start
}
.hero__carousel {
/* Вид боковых слайдов в покое живёт только в этих переменных. Кейфреймы
перелёта заканчиваются ровно этими же значениями: когда hero.js через
700мс снимает классы движения, анимация исчезает без перехода, и любое
расхождение с покоем даёт прыжок. Раньше телефон и сцены stage
переписывали opacity/filter/rotate литералами прямо в правиле покоя, а
кейфреймы про это не знали — боковые слайды в конце гасли одним кадром.
Меняете вид сбоку — меняйте переменную, а не правило. */
--hero-side-scale: .61;
--hero-side-opacity: 1;
--hero-side-filter: saturate(.38) brightness(1) blur(.8px);
--hero-side-tilt: 5deg;
--hero-active-scale: 1.14;
--hero-active-y: -8px;
--hero-drag-preview-shift: clamp(54px, 8vw, 112px);
/* Бокс награды. Подошвы стоят на его низе, от него же считает круг-подиум
кольца — поэтому размеры в переменных, а не литералами в @media.
Высота ещё и упирается в сцену: на ноутбуке 1366×768 подошвы уходили
на 50px ниже сцены и срезались краем героя, в обеих раскладках.
Проценты здесь — от .hero__awards (абсолютный, inset снизу
--hero-awards-inset), у него высота определена всегда; 100cqh от сцены
на низком экране Chrome отдавал нулём. Переменная работает и в top у
круга-подиума: там проценты тоже от высоты .hero__awards. */
--hero-awards-inset: 72px;
--hero-award-top: clamp(46px, 5.4svh, 62px);
--hero-award-height: min(clamp(410px, 46svh, 530px), calc(100% + var(--hero-awards-inset) - var(--hero-award-top) - 10px));
/* Свет и пол. Светлая сцена: серая мягкая тень, матовый пол. Тёмные сцены
stage/stage2 переопределяют: софит сверху даёт чёрную плотную тень
контакта и отражение на глянце. */
--hero-shadow-ink: #1b2426;
--hero-shadow-alpha: 14%;
--hero-floor-alpha: 30%;
--hero-reflection: 0;
--hero-rim: #1b24261f;
/* Глубина резкости в кольце: соседи чуть мягче, дальние заметно. */
--hero-depth1-filter: saturate(.82) brightness(.9) blur(.5px);
--hero-depth2-filter: saturate(.62) brightness(.72) blur(1.4px);
grid-row: 2;
min-height: 0
}
.hero__carousel:focus-visible {
outline: none
}
.hero__carousel .hero__glow {
display: none
}
.hero__carousel .hero__stage {
min-height: clamp(430px,48svh,520px);
overflow: visible
}
.hero__carousel .hero__award {
width: clamp(390px,40vw,580px);
height: var(--hero-award-height);
top: var(--hero-award-top);
/* Уходящий слайд получал opacity:0 и visibility:hidden без перехода и
поэтому пропадал рывком. Гасим за то же время, что длится перелёт
соседей. visibility в списке нарочно: как дискретное свойство она
переключится в конце перехода, а не в начале, и кадр не мигнёт.
transform здесь для крайних слайдов: они не участвуют в кейфреймах
и иначе просто возникали бы на месте, пока соседи летят. У тех, кто
в кейфреймах, анимация всё равно старше перехода и он им не мешает.
Кривые разные нарочно. Резвая cubic-bezier(.2,.78,.18,1) хороша для
перелёта, но для гашения она слишком «передняя»: за первые 15% времени
проходило больше 40% изменения, и уход читался рывком. Прозрачности и
фильтру даём симметричную кривую — слайд гаснет ровно и успевает стать
незаметным раньше, чем уедет далеко. */
transition: opacity .52s cubic-bezier(.45,0,.55,1),visibility .52s cubic-bezier(.45,0,.55,1),filter .52s cubic-bezier(.45,0,.55,1),transform .64s cubic-bezier(.2,.78,.18,1)
}
.hero__carousel .hero__award:nth-child(3n+1) {
--image-scale: 1.18
}
.hero__carousel .hero__award:nth-child(3n+2) {
--image-scale: 1.1
}
.hero__carousel .hero__award:nth-child(3n) {
--image-scale: 1.03
}
.hero__carousel .hero__award--active {
--hero-floor-opacity: 1;
--hero-floor-scale: 1;
transform: translate(-50%, var(--hero-active-y)) scale(var(--hero-active-scale)) rotate(0)
}
/* Контейнер картинки повторяет её пропорции (--hero-aspect со слайда), поэтому
проценты внутри — проценты самого фото: где подошва (--hero-foot), где и
какой ширины основание (--hero-base-x, --hero-base). Масштаб «на глаз»
(--image-scale) раньше стоял на ![]()
и рос от центра — подошвы разных фото
расходились по высоте на десятки пикселей. Теперь растём от подошвы, а её
ещё и опускаем на величину прозрачного поля: все награды стоят на одной
линии — низе бокса. */
.hero__carousel .hero__award-upright {
aspect-ratio: var(--hero-aspect, 9 / 10);
width: auto;
max-width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform-origin: 50% 100%;
translate: -50% calc(var(--hero-foot, 0%) * var(--image-scale, 1));
transform: scale(var(--image-scale, 1))
}
.hero__carousel .hero__award-image {
object-position: 50% 100%;
transform: none;
filter: drop-shadow(0 18px 14px color-mix(in srgb, var(--hero-shadow-ink) var(--hero-shadow-alpha), transparent))
}
/* Отражение на глянцевом полу: та же картинка, перевёрнутая от линии подошвы
и растворяющаяся вниз. Маска задана в локальных координатах, до переворота,
поэтому её плотный край — низ, он же после scaleY(-1) оказывается сверху,
у подошвы. По умолчанию пол матовый (--hero-reflection: 0), включают
тёмные сцены. */
.hero__carousel .hero__award-upright:before {
content: "";
z-index: -2;
pointer-events: none;
position: absolute;
left: 0;
right: 0;
height: 100%;
top: calc(100% - 2 * var(--hero-foot, 0%));
background: var(--hero-award-image) 50% 100% / contain no-repeat;
transform: scaleY(-1);
opacity: var(--hero-reflection, 0);
filter: blur(3px) saturate(.8);
-webkit-mask-image: linear-gradient(0deg, #000, #0000 36%);
mask-image: linear-gradient(0deg, #000, #0000 36%)
}
/* Тень контакта: эллипс под основанием, центр чуть выше переднего края
подошвы — большая часть тени уходит под предмет, наружу выходит мягкая
кромка. Ширина и сдвиг — от основания конкретной награды. Состояние
(активная/боковая/скрытая) приходит переменными со слайда и анимируется
собственным переходом той же длины, что перелёт слайда. */
.hero__carousel .hero__award-upright:after {
content: "";
z-index: -1;
pointer-events: none;
position: absolute;
left: var(--hero-base-x, 50%);
bottom: calc(var(--hero-foot, 0%) + 1%);
width: calc(var(--hero-base, 40%) * 1.22);
aspect-ratio: 3.4 / 1;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--hero-shadow-ink) var(--hero-floor-alpha), transparent), color-mix(in srgb, var(--hero-shadow-ink) calc(var(--hero-floor-alpha) * .45), transparent) 46%, transparent);
translate: -50% 50%;
transform: scale(var(--hero-floor-scale, 1));
opacity: var(--hero-floor-opacity, 1);
transition: opacity .64s cubic-bezier(.2,.78,.18,1),transform .64s cubic-bezier(.2,.78,.18,1)
}
.hero__carousel--dragging .hero__award-upright:after {
transition: none
}
.hero__carousel .hero__award:focus-visible .hero__award-upright {
filter: drop-shadow(0 10px 14px #1b2d2f33)
}
.hero__carousel--moving-next .hero__award--active {
animation: .64s cubic-bezier(.2,.78,.18,1) both hero-award-activate-from-right
}
.hero__carousel--moving-previous .hero__award--active {
animation: .64s cubic-bezier(.2,.78,.18,1) both hero-award-activate-from-left
}
.hero__carousel--moving-next .hero__award--left:not(.hero__award--wrapping) {
animation: .64s cubic-bezier(.2,.78,.18,1) both hero-award-deactivate-to-left
}
.hero__carousel--moving-previous .hero__award--right:not(.hero__award--wrapping) {
animation: .64s cubic-bezier(.2,.78,.18,1) both hero-award-deactivate-to-right
}
.hero__carousel .hero__award--left {
--hero-floor-opacity: .72;
--hero-floor-scale: .94;
opacity: var(--hero-side-opacity);
filter: var(--hero-side-filter);
transform: translate(calc(-50% - var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(calc(-1 * var(--hero-side-tilt)))
}
.hero__carousel .hero__award--right {
--hero-floor-opacity: .72;
--hero-floor-scale: .94;
opacity: var(--hero-side-opacity);
filter: var(--hero-side-filter);
transform: translate(calc(-50% + var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(var(--hero-side-tilt))
}
.hero__carousel .hero__award--hidden {
--hero-floor-opacity: 0;
--hero-floor-scale: .8;
opacity: 0;
visibility: hidden;
filter: saturate(.38) brightness(.62) blur(2px);
transform: translate(-50%, calc(var(--carousel-side-y) + 40px)) scale(calc(var(--hero-side-scale) * .72))
}
.hero__carousel--dragging .hero__award--active,.hero__carousel--dragging .hero__award--left,.hero__carousel--dragging .hero__award--right {
transition: none!important;
animation: auto!important;
animation-timeline: none!important
}
.hero__carousel--dragging-next .hero__award--active {
filter: saturate(.83)brightness(.84);
transform: translate(calc(-50% - var(--hero-drag-preview-shift)), calc(var(--hero-active-y) + 16px)) scale(.99) rotate(-1.4deg)
}
.hero__carousel--dragging-next .hero__award--left {
opacity: .82;
filter: saturate(.34)brightness(.39);
transform: translate(calc(-50% - var(--carousel-side-x) - var(--hero-drag-preview-shift)), calc(var(--carousel-side-y) + 5px)) scale(.57) rotate(-5.8deg)
}
.hero__carousel--dragging-next .hero__award--right {
opacity: 1;
filter: saturate(.55)brightness(.58);
transform: translate(calc(-50% + var(--carousel-side-x) - var(--hero-drag-preview-shift)), calc(var(--carousel-side-y) - 16px)) scale(.76) rotate(3.6deg)
}
.hero__carousel--dragging-previous .hero__award--active {
filter: saturate(.83)brightness(.84);
transform: translate(calc(-50% + var(--hero-drag-preview-shift)), calc(var(--hero-active-y) + 16px)) scale(.99) rotate(1.4deg)
}
.hero__carousel--dragging-previous .hero__award--left {
opacity: 1;
filter: saturate(.55)brightness(.58);
transform: translate(calc(-50% - var(--carousel-side-x) + var(--hero-drag-preview-shift)), calc(var(--carousel-side-y) - 16px)) scale(.76) rotate(-3.6deg)
}
.hero__carousel--dragging-previous .hero__award--right {
opacity: .82;
filter: saturate(.34)brightness(.39);
transform: translate(calc(-50% + var(--carousel-side-x) + var(--hero-drag-preview-shift)), calc(var(--carousel-side-y) + 5px)) scale(.57) rotate(5.8deg)
}
.hero__carousel--drag-committing .hero__award--active,.hero__carousel--drag-committing .hero__award--left:not(.hero__award--wrapping),.hero__carousel--drag-committing .hero__award--right:not(.hero__award--wrapping) {
transition: transform .64s cubic-bezier(.2,.78,.18,1),opacity .64s cubic-bezier(.2,.78,.18,1),filter .64s cubic-bezier(.2,.78,.18,1),visibility .64s cubic-bezier(.2,.78,.18,1)!important;
animation: auto!important;
animation-timeline: none!important
}
.hero__carousel .hero__award--wrapping {
transition: none
}
/* Закольцованный слайд въезжает с дальнего края. Кривая симметричная, а не
резвая: с прежней прозрачность за первые 70мс подскакивала до половины —
слайд будто вспыхивал, а не проявлялся. Это повторялось каждый шаг, потому
что закольцовывается на каждом шаге ровно один слайд. */
.hero__carousel .hero__award--right.hero__award--wrapping {
animation: .58s cubic-bezier(.45,0,.55,1) both hero-award-enter-right
}
.hero__carousel .hero__award--left.hero__award--wrapping {
animation: .58s cubic-bezier(.45,0,.55,1) both hero-award-enter-left
}
@keyframes hero-award-enter-right {
0% {
opacity: 0;
filter: saturate(.22)brightness(.3);
transform: translate(calc(-50% + var(--carousel-side-x) + 110px), calc(var(--carousel-side-y) + 18px)) scale(.46) rotate(8deg)
}
to {
opacity: var(--hero-side-opacity);
filter: var(--hero-side-filter);
transform: translate(calc(-50% + var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(var(--hero-side-tilt))
}
}
@keyframes hero-award-enter-left {
0% {
opacity: 0;
filter: saturate(.22)brightness(.3);
transform: translate(calc(-50% - var(--carousel-side-x) - 110px), calc(var(--carousel-side-y) + 18px)) scale(.46) rotate(-8deg)
}
to {
opacity: var(--hero-side-opacity);
filter: var(--hero-side-filter);
transform: translate(calc(-50% - var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(calc(-1 * var(--hero-side-tilt)))
}
}
@keyframes hero-award-activate-from-right {
0% {
filter: var(--hero-side-filter);
transform: translate(calc(-50% + var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(var(--hero-side-tilt))
}
to {
filter: none;
transform: translate(-50%, var(--hero-active-y)) scale(var(--hero-active-scale)) rotate(0)
}
}
@keyframes hero-award-activate-from-left {
0% {
filter: var(--hero-side-filter);
transform: translate(calc(-50% - var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(calc(-1 * var(--hero-side-tilt)))
}
to {
filter: none;
transform: translate(-50%, var(--hero-active-y)) scale(var(--hero-active-scale)) rotate(0)
}
}
@keyframes hero-award-deactivate-to-left {
0% {
filter: none;
transform: translate(-50%, var(--hero-active-y)) scale(var(--hero-active-scale)) rotate(0)
}
to {
filter: var(--hero-side-filter);
transform: translate(calc(-50% - var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(calc(-1 * var(--hero-side-tilt)))
}
}
@keyframes hero-award-deactivate-to-right {
0% {
filter: none;
transform: translate(-50%, var(--hero-active-y)) scale(var(--hero-active-scale)) rotate(0)
}
to {
filter: var(--hero-side-filter);
transform: translate(calc(-50% + var(--carousel-side-x)), var(--carousel-side-y)) scale(var(--hero-side-scale)) rotate(var(--hero-side-tilt))
}
}
.hero__carousel .hero__arc {
z-index: 2;
clip-path: inset(0 0 78%);
box-shadow: none;
border-color: color-mix(in srgb, var(--accent) 24%, transparent);
bottom: -420px;
-webkit-mask-image: linear-gradient(90deg,#0000 0,#000 8% 92%,#0000 100%);
mask-image: linear-gradient(90deg,#0000 0,#000 8% 92%,#0000 100%)
}
.hero__carousel .hero__arc:before,.hero__carousel .hero__arc:after {
box-shadow: none;
background: var(--accent)
}
.hero__carousel .hero__arc-progress {
border-radius: inherit;
clip-path: inset(0 100% 78% 0);
filter: none;
border: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
animation: 3s linear both hero-arc-countdown;
position: absolute;
inset: -1px
}
.hero__carousel--paused .hero__arc-progress,.hero__carousel--dragging .hero__arc-progress {
animation-play-state: paused
}
@keyframes hero-arc-countdown {
to {
clip-path: inset(0 0 78%)
}
}
@media (width>=901px) and (height<=820px) {
.hero__carousel {
--hero-side-scale: .57;
--hero-active-scale: 1.08;
--hero-active-y: -6px
}
.hero--reference {
grid-template-rows: minmax(0,1fr)!important;
min-height: clamp(650px,100svh - 142px,900px)!important;
padding-bottom: 28px!important
}
.hero__composition {
grid-template-rows: auto minmax(400px,1fr)
}
.hero__copy {
margin-bottom: -10px
}
.hero__copy .hero__title {
font-size: min(calc(5.1vw - 13px),62px)
}
.hero__carousel .hero__stage {
min-height: 400px
}
}
@media (width<=900px) {
.hero__carousel {
--hero-active-scale: 1.14;
--hero-active-y: -8px;
--hero-award-top: 44px;
--hero-award-height: min(clamp(380px, 48svh, 480px), calc(100% + var(--hero-awards-inset) - 54px))
}
.hero--reference {
grid-template-rows: minmax(0,1fr)!important;
min-height: clamp(720px,100svh,900px)!important;
padding-bottom: 40px!important
}
.hero__composition {
grid-template-rows: auto minmax(450px,1fr)
}
.hero__copy {
margin-bottom: -8px;
padding: 0 12px
}
.hero__copy .hero__title {
font-size: clamp(46px,9vw,68px)
}
.hero__heading {
width: 100%;
display: block
}
/* Длинная первая строка в одну линию на узком экране не помещается, а
ужимать её до размера слогана — терять акцент: переносим по словам. */
.hero__title-line {
white-space: normal;
text-wrap: balance
}
.hero__laurel {
display: none
}
.hero__carousel .hero__stage {
min-height: 450px
}
.hero__carousel .hero__award {
width: clamp(340px,68vw,470px)
}
}
@media (width<=600px) {
.hero {
--carousel-side-x: clamp(142px, 44vw, 180px);
--carousel-side-y: 32px
}
.hero__carousel {
--hero-side-scale: .48;
--hero-side-opacity: .58;
--hero-side-filter: saturate(.28) brightness(.94) blur(.6px);
--hero-side-tilt: 4deg;
--hero-active-scale: 1.06;
--hero-active-y: -3px;
/* .hero__awards на телефоне поднят на 64px, а не на 72px. */
--hero-awards-inset: 64px;
--hero-award-top: 18px;
--hero-award-height: min(clamp(250px, 34svh, 290px), calc(100% + var(--hero-awards-inset) - 24px));
--hero-drag-preview-shift: clamp(44px, 15vw, 66px);
overscroll-behavior-x: contain
}
.hero--reference {
grid-template-rows: minmax(0,1fr)!important;
min-height: clamp(570px,76svh,640px)!important;
padding-bottom: 24px!important
}
.hero__composition {
grid-template-rows: auto clamp(310px,40svh,340px);
align-content: start
}
.hero__copy {
margin-bottom: 0;
padding: 0 4px
}
.hero__copy .hero__title {
font-size: clamp(38px,11.8vw,52px);
line-height: .88
}
.hero__copy .hero__slogan {
font-size: clamp(27px,7.2vw,38px)
}
.hero__carousel .hero__stage {
height: clamp(310px,40svh,340px);
min-height: 0
}
.hero__carousel .hero__award {
width: clamp(240px,72vw,285px)
}
.hero__carousel .hero__arc {
clip-path: inset(0 0 80%);
bottom: -388px
}
.hero__carousel .hero__callout {
bottom: 26px
}
}
@media (width<=600px) and (height<=700px) {
.hero--reference {
min-height: 560px!important;
padding-bottom: 20px!important
}
.hero__composition {
grid-template-rows: auto 300px
}
.hero__carousel .hero__stage {
height: 300px
}
.hero__carousel {
--hero-award-top: 14px;
--hero-award-height: min(250px, calc(100% + var(--hero-awards-inset) - 20px))
}
.hero__carousel .hero__callout {
bottom: 20px
}
}
@media (prefers-reduced-motion:reduce) {
.production__image {
will-change: auto;
transition: none;
transform: scale(1.04)
}
.hero__composition {
opacity: 1;
animation: auto;
animation-timeline: none;
transform: none
}
.hero__laurel,.hero__slogan,.hero__carousel .hero__arc-progress,.hero__carousel .hero__award--wrapping,.hero__carousel--moving-next .hero__award--active,.hero__carousel--moving-previous .hero__award--active,.hero__carousel--moving-next .hero__award--left:not(.hero__award--wrapping),.hero__carousel--moving-previous .hero__award--right:not(.hero__award--wrapping) {
animation: auto;
animation-timeline: none
}
}
.hero__callout {
--callout-elbow: clamp(58px, 4.6vw, 74px);
z-index: 20;
width: clamp(240px,19vw,340px);
padding: 0px 0px 10px var(--callout-elbow);
color: #172022;
pointer-events: auto;
margin: 0;
position: absolute;
top: clamp(203px,58px + 19svh,248px);
left: clamp(132px,11vw,205px);
transform: translateY(-100%)
}
.hero__callout:after,.hero__callout:before {
content: "";
background: color-mix(in srgb, var(--accent) 44%, transparent);
height: 1px;
position: absolute;
bottom: 0
}
.hero__callout:after {
right: 0;
left: var(--callout-elbow);
background: linear-gradient(90deg,color-mix(in srgb, var(--accent) 54%, transparent),color-mix(in srgb, var(--accent) 14%, transparent))
}
.hero__callout:before {
width: var(--callout-elbow);
transform-origin: 100%;
left: 0;
transform: rotate(48deg)
}
.hero__callout-content {
gap: 5px;
animation: .46s cubic-bezier(.2,.78,.18,1) both hero-callout-enter;
display: grid
}
.hero__callout-meta {
align-items: baseline;
gap: 12px;
display: flex
}
.hero__callout-count {
color: var(--accent-ink);
letter-spacing: .08em;
text-transform: uppercase;
flex: none;
font-size: 13px;
font-weight: 700
}
.hero__callout-material {
color: #17202280;
letter-spacing: .035em;
text-transform: none;
flex: 1;
min-width: 0;
font-size: clamp(12px,.85vw,15px);
font-weight: 500;
line-height: 1.25;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.hero__callout-title {
color: #172022f0;
letter-spacing: -.025em;
text-transform: none;
font-family: Georgia,Times New Roman,serif;
font-size: clamp(23px,1.78vw,30px);
font-style: italic;
font-weight: 400;
line-height: 1.05
}
@keyframes hero-callout-enter {
0% {
opacity: 0;
transform: translate(-12px)
}
to {
opacity: 1;
transform: translate(0)
}
}
@media (width<=900px) {
.hero__callout {
--callout-elbow: 52px;
width: clamp(220px,32vw,276px);
top: clamp(200px,58px + 20svh,234px);
left: 24px
}
.hero__callout-material {
max-width: 150px
}
}
@media (width<=600px) {
.hero__callout {
text-align: center;
width: calc(100% - 32px);
padding: 0;
top: auto;
bottom: 58px;
left: 50%;
transform: translate(-50%)
}
.hero__callout:after,.hero__callout:before {
display: none
}
.hero__callout-content {
gap: 2px
}
.hero__callout-meta {
justify-content: center
}
.hero__callout-material {
display: none
}
.hero__callout-title {
font-size: 20px
}
}
@media (prefers-reduced-motion:reduce) {
.hero__callout-content {
animation: auto;
animation-timeline: none
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false
}
@property --tw-rotate-y {
syntax: "*";
inherits: false
}
@property --tw-rotate-z {
syntax: "*";
inherits: false
}
@property --tw-skew-x {
syntax: "*";
inherits: false
}
@property --tw-skew-y {
syntax: "*";
inherits: false
}
.page {
min-width: 0;
overflow-x: clip
}
.page section,.page footer,.page header,.page main {
min-width: 0
}
.section__title,.ai__title,.production__title,.contact__title,.faq__heading,.clients__title,.products__title,.pricing__title,.process__title {
overflow-wrap: anywhere
}
@media (width>=1920px) {
body {
font-size: 19px
}
.hero--reference {
padding-right: var(--page-pad);
padding-left: var(--page-pad)
}
.section {
padding-top: 104px;
padding-bottom: 104px
}
.quick-catalog__grid {
grid-template-columns: repeat(5,minmax(0,188px)) minmax(280px,320px);
gap: 16px
}
.quick-catalog__all-card {
height: 188px
}
.trust-strip {
min-height: 158px
}
.catalog__mosaic {
grid-auto-rows: 420px;
gap: 20px
}
.products__grid,.pricing__grid {
gap: 20px
}
.ai {
gap: 120px;
min-height: 720px
}
.ai__panel {
max-width: 720px
}
.production__media {
height: 590px
}
.process__grid {
gap: 18px
}
.process__step {
min-height: 400px
}
.clients__logo-item {
min-height: 132px
}
.faq,.contact {
gap: 120px
}
.site-footer {
gap: 72px
}
}
@media (width>=1181px) and (width<=1440px) {
.site-header__inner {
grid-template-columns: auto auto minmax(0,1fr) auto;
gap: 12px
}
.site-header__nav {
gap: 16px;
font-size: 17px
}
.site-header__catalog-toggle {
padding-left: 10px;
padding-right: 12px;
font-size: 14px
}
.section {
padding-top: 76px;
padding-bottom: 76px
}
.section__head {
gap: 42px;
margin-bottom: 46px
}
.trust-strip__item {
gap: 16px;
padding-left: 22px;
padding-right: 22px
}
.ai,.faq,.contact {
gap: 64px
}
.production__copy {
padding-left: 44px
}
.pricing__card {
min-height: 390px
}
.process__step {
min-height: 340px
}
.site-footer {
grid-template-columns: 1.2fr .65fr 1fr .8fr;
gap: 32px
}
.site-footer__nav-link,.site-footer__top-link,.site-footer__contact-item .site-footer__contact-text,.site-footer__contact-link,.site-footer__contact-item {
font-size: 16px
}
}
@media (width>=901px) and (width<=1180px) {
.site-header__inner {
grid-template-columns: auto auto minmax(220px,1fr) auto;
gap: 16px
}
.site-header__nav {
display: none
}
.site-header__tools {
grid-area: 1/4;
display: flex
}
.site-header__nav--open {
background: #f8f8f5fa;
border-radius: 18px;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 18px;
font-size: 16px;
display: flex;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
box-shadow: 0 18px 44px #141e2121
}
.site-header__nav--open .site-header__nav-link {
border-bottom: 1px solid var(--line);
padding: 14px 5px
}
.site-header__catalog {
width: auto;
display: flex
}
.site-header__catalog-toggle {
justify-content: center;
width: auto;
min-height: 48px;
margin-bottom: 0
}
.site-header__menu-button {
background: var(--ink);
border: 0;
border-radius: 13px;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 48px;
height: 48px;
padding: 0 13px;
display: flex
}
.site-header__menu-button-line {
background: #fff;
width: 100%;
height: 1px
}
.section {
padding-top: 70px;
padding-bottom: 70px
}
.section__head {
gap: 36px;
margin-bottom: 44px
}
.trust-strip__item {
gap: 14px;
padding-left: 18px;
padding-right: 18px
}
.trust-strip__label {
font-size: 14px;
line-height: 1.2
}
.ai,.faq,.contact {
gap: 44px
}
.ai__panel {
max-width: none
}
.production__copy {
padding-left: 36px
}
.faq {
grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr)
}
.faq__lead {
font-size: 18px
}
.contact {
grid-template-columns: minmax(0,.82fr) minmax(420px,1.18fr);
padding-top: 72px;
padding-bottom: 72px
}
.site-footer {
grid-template-columns: 1fr 1fr;
gap: 44px 56px
}
}
@media (width>=901px) and (width<=1100px) {
.trust-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 20px 0;
padding-top: 24px;
padding-bottom: 24px
}
.trust-strip__item:nth-child(2) {
border-right: 0
}
.process__grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.process__step {
min-height: 310px
}
.contact {
grid-template-columns: 1fr
}
.contact__copy {
max-width: 720px
}
}
@media (width>=601px) and (width<=900px) {
.section,.ai,.clients {
padding-top: 72px;
padding-bottom: 72px
}
.section__head,.clients__heading {
margin-bottom: 42px
}
.catalog__mosaic {
grid-auto-rows: 340px
}
.ai {
gap: 48px;
min-height: 0
}
.ai__copy {
max-width: 680px
}
.ai__panel {
width: min(100%,680px);
transform: none
}
.pricing__grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.pricing__card:last-child {
grid-column: 1/-1
}
.production__media {
height: clamp(400px,58vw,520px);
min-height: 0;
margin: 24px 0
}
.production__copy {
padding: 56px 0 72px
}
.clients__logos {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.contact {
padding-top: 72px;
padding-bottom: 72px
}
.site-footer {
gap: 48px
}
}
@media (width>=361px) and (width<=600px) {
.section,.ai,.clients {
padding-top: 68px;
padding-bottom: 68px
}
.section__head {
gap: 20px;
margin-bottom: 36px
}
.section__title,.ai__title,.production__title,.contact__title,.faq__heading {
font-size: clamp(38px,11vw,44px)
}
.section__lead,.ai__text,.production__text,.contact__text,.faq__lead {
font-size: 16px
}
.catalog__mosaic {
grid-auto-rows: clamp(290px,88vw,340px)
}
.products__grid {
row-gap: 34px
}
.pricing__card {
min-height: 290px;
padding: 22px
}
.pricing__title {
font-size: 30px
}
.production__media {
height: clamp(340px,100vw,420px);
min-height: 0
}
.production__copy {
padding-top: 52px;
padding-bottom: 68px
}
.process__step {
min-height: 270px
}
.process__icon {
margin-top: 28px
}
.contact__direct-link {
width: 100%
}
.contact__form .button,.form__file-label {
justify-content: center;
width: 100%
}
.modal__textarea {
min-height: 116px
}
}
@media (width<=360px) {
body {
font-size: 16px
}
.site-header__inner {
grid-template-columns: auto auto minmax(0,1fr) auto;
gap: 6px
}
.site-header__topbar-inner {
gap: 8px;
font-size: 10px
}
.site-header__topbar-label {
display: none
}
.site-header__logo {
width: 36px
}
.site-header__menu-button {
width: 42px;
height: 42px;
padding-left: 11px;
padding-right: 11px
}
.site-header__search-form {
min-height: 42px;
padding-left: 8px;
padding-right: 8px
}
.site-header__search-input {
font-size: 12px
}
.hero {
padding-left: 14px;
padding-right: 14px
}
.section,.ai,.clients {
padding-top: 58px;
padding-bottom: 58px
}
.quick-catalog__card-title {
font-size: 16px;
bottom: 12px;
left: 12px;
right: 12px
}
.section__title,.ai__title,.production__title,.contact__title,.faq__heading,.clients__title {
font-size: 36px
}
.catalog__mosaic {
grid-auto-rows: 270px
}
.catalog__card {
padding: 18px
}
.catalog__copy {
bottom: 18px;
left: 18px;
right: 18px
}
.trust-strip__item {
padding-left: 8px;
padding-right: 8px
}
.ai__panel {
padding: 12px
}
.products__title,.process__title {
font-size: 20px
}
.pricing__card {
min-height: 270px;
padding: 20px
}
.production__media {
height: 320px;
min-height: 0
}
.production__stamp {
width: 116px;
height: 116px;
padding: 16px;
bottom: 16px;
right: 16px
}
.contact {
margin-left: 6px;
margin-right: 6px;
padding: 54px 14px
}
.contact__form {
padding: 18px
}
.floating-ai {
border-radius: 14px;
padding: 6px
}
.floating-ai__copy {
display: none
}
.modal__dialog {
padding-left: 16px;
padding-right: 16px
}
.modal__title {
font-size: 32px
}
.modal__textarea {
min-height: 106px
}
}
@media (width<=1180px) {
.site-header__nav--open {
max-height: calc(100dvh - var(--header-main-height) - var(--topbar-current-height) - 16px);
overscroll-behavior-y: contain;
overflow-y: auto
}
.site-header__nav--open .site-header__nav-item {
width: 100%;
display: block
}
.site-header__nav--open .site-header__nav-trigger {
justify-content: space-between;
width: 100%
}
.site-header__nav--open .site-header__nav-trigger:after {
display: none
}
.site-header__series-menu {
width: 100%;
max-height: 0;
box-shadow: none;
opacity: 1;
pointer-events: none;
background: 0 0;
border: 0;
border-radius: 0;
padding: 0 5px;
transition: max-height .22s,padding .22s;
position: static;
overflow: hidden;
transform: none
}
.site-header__series-menu:before {
display: none
}
.site-header__series-menu--open {
pointer-events: auto;
max-height: 1100px;
padding: 8px 5px 14px
}
.site-header__series-menu-list {
grid-template-columns: 1fr
}
.site-header__series-menu-all {
min-height: 52px
}
.site-header__series-menu-custom {
align-items: center
}
}
@media (width<=600px) {
.site-header__series-menu-link {
min-height: 46px
}
}
.company-page {
color: #1b1f22;
background: #fff;
min-width: 320px;
min-height: 100vh;
font-family: var(--font-ui)
}
.company-page :focus-visible {
outline-offset: 4px;
outline: 2px solid var(--accent-alt)
}
.company-shell {
width: var(--page-width);
margin-left: auto;
margin-right: auto
}
.company-header {
z-index: 100;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
background: #fffffff0;
border-bottom: 1px solid #1b1f221a;
position: sticky;
top: 0;
box-shadow: 0 8px 28px #14181b0b
}
.company-header__topbar {
background: #f2f4f7
}
.company-header__topbar-inner {
color: #5b6166;
letter-spacing: .03em;
justify-content: flex-end;
align-items: center;
gap: 20px;
min-height: 30px;
font-size: 12px;
display: flex
}
.company-header__topbar-inner a {
color: #1b1f22;
font-weight: 600
}
.company-header__main {
grid-template-columns: 178px minmax(0,1fr) auto;
align-items: center;
gap: 32px;
min-height: 82px;
display: grid
}
.company-header__logo-link {
width: 154px;
display: inline-flex
}
.company-header__logo {
width: 100%;
height: auto
}
.company-header__nav {
justify-content: center;
align-items: center;
gap: clamp(18px,2vw,38px);
display: flex
}
.company-header__nav-link {
white-space: nowrap;
padding: 31px 0 28px;
font-size: 15px;
position: relative
}
.company-header__nav-link:after {
content: "";
opacity: 0;
background: var(--accent-alt);
height: 2px;
transition: opacity .18s,transform .18s;
position: absolute;
bottom: 21px;
left: 0;
right: 0;
transform: scaleX(.45)
}
.company-header__nav-link:hover:after,.company-header__nav-link[aria-current=page]:after {
opacity: 1;
transform: scaleX(1)
}
.company-header__cta {
color: #fff;
background: #1b1f22;
border-radius: 12px;
justify-content: center;
align-items: center;
gap: 26px;
min-height: 48px;
padding: 0 22px;
font-size: 14px;
font-weight: 600;
transition: background .18s,transform .18s;
display: inline-flex
}
.company-header__cta:hover {
background: var(--accent-alt);
transform: translateY(-1px)
}
.company-header__mobile-menu {
display: none
}
.company-hero {
background: #f2f4f7;
overflow: hidden
}
.company-hero__grid {
grid-template-columns: minmax(0,.96fr) minmax(460px,1.04fr);
align-items: stretch;
gap: clamp(36px,6vw,110px);
min-height: 610px;
padding-top: clamp(54px,7vw,104px);
display: grid
}
.company-hero__copy {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-bottom: 80px;
display: flex
}
.company-kicker {
color: #5b6166;
letter-spacing: .12em;
text-transform: uppercase;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
display: inline-flex
}
.company-kicker__icon {
background: var(--accent-alt);
width: 9px;
height: 9px;
display: block;
transform: rotate(45deg)
}
.company-hero__title,.contact-hero__title {
letter-spacing: -.058em;
max-width: 890px;
margin-top: 28px;
font-size: clamp(52px,5.3vw,92px);
font-weight: 500;
line-height: .92
}
.company-hero__title .heading-accent,.contact-hero__title .heading-accent,.company-section__title .heading-accent,.company-cta__title .heading-accent,.contact-brief__title .heading-accent,.contact-location__title .heading-accent {
color: var(--accent-alt);
letter-spacing: -.055em;
display: block
}
.company-hero__text {
color: #5b6166;
max-width: 620px;
margin-top: 34px;
font-size: clamp(18px,1.35vw,22px);
line-height: 1.5
}
.company-hero__actions {
align-items: center;
gap: 28px;
margin-top: 40px;
display: flex
}
.company-button {
cursor: pointer;
border-radius: 13px;
justify-content: space-between;
align-items: center;
gap: 42px;
min-height: 58px;
padding: 0 24px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
transition: transform .18s,box-shadow .18s,background .18s;
display: inline-flex
}
.company-button:hover {
transform: translateY(-2px)
}
.company-button--coral {
color: #fff;
background: var(--accent-alt);
box-shadow: 0 14px 32px color-mix(in srgb, var(--accent-alt) 20%, transparent)
}
.company-button--ink {
color: #fff;
background: #1b1f22
}
.company-button--light {
color: #1b1f22;
background: #fff
}
.company-text-link {
border-bottom: 1px solid #1b1f2240;
padding-bottom: 5px;
font-size: 16px;
font-weight: 600;
transition: border-color .18s,color .18s
}
.company-text-link:hover {
color: var(--accent-alt);
border-color: var(--accent-alt)
}
.company-hero__art {
background: #dee1e5;
border-radius: 36px 36px 0 0;
min-height: 550px;
position: relative;
overflow: hidden
}
.company-hero__art:before {
aspect-ratio: 1;
content: "";
background: var(--accent-alt);
border-radius: 50%;
width: 72%;
position: absolute;
bottom: -20%;
right: -12%
}
.company-hero__art-label,.company-hero__art-note {
z-index: 4;
letter-spacing: .11em;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
position: absolute
}
.company-hero__art-label {
top: 32px;
left: 34px
}
.company-hero__art-note {
color: #fff;
bottom: 28px;
right: 32px
}
.company-hero__art-orbit {
aspect-ratio: 1;
border: 1px solid #1b1f2229;
border-radius: 50%;
width: 58%;
position: absolute;
top: 15%;
left: 10%
}
.company-hero__award {
z-index: 2;
object-fit: contain;
filter: drop-shadow(0 28px 28px #11141638);
position: absolute
}
.company-hero__award--back {
opacity: .78;
width: 42%;
height: 68%;
top: 14%;
left: 2%;
transform: rotate(-8deg)
}
.company-hero__award--front {
width: 62%;
height: 92%;
bottom: -1%;
right: 4%
}
.company-stats {
z-index: 3;
background: #fff;
border-top: 1px solid #1b1f221f;
grid-template-columns: repeat(4,1fr);
display: grid;
position: relative
}
.company-stats__item {
border-right: 1px solid #1b1f221f;
min-height: 142px;
padding: 26px 30px
}
.company-stats__item:last-child {
border-right: 0
}
.company-stats__value {
font-family: inherit;
font-size: clamp(34px,3vw,52px);
font-weight: 400;
line-height: 1;
display: block
}
.company-stats__label {
color: #70767b;
max-width: 180px;
margin-top: 14px;
font-size: 15px;
line-height: 1.4;
display: block
}
.company-section {
padding: clamp(82px,9vw,148px) 0
}
.company-section--white {
background: #fff
}
.company-section--gray {
background: #f2f4f7
}
.company-manifesto {
grid-template-columns: minmax(0,1.08fr) minmax(380px,.72fr);
align-items: center;
gap: clamp(60px,10vw,180px);
display: grid
}
.company-section__title,.contact-brief__title,.contact-location__title {
letter-spacing: -.055em;
margin-top: 28px;
font-size: clamp(44px,5vw,80px);
font-weight: 500;
line-height: .98
}
.company-manifesto__copy {
color: #5b6166;
padding-bottom: 6px;
font-size: 17px;
line-height: 1.58
}
.company-manifesto__lead+.company-manifesto__text {
margin-top: 26px
}
.company-manifesto__copy .company-manifesto__lead {
color: #1b1f22;
font-size: clamp(20px,1.6vw,26px);
line-height: 1.38
}
.company-section__heading {
justify-content: space-between;
align-items: flex-end;
gap: 40px;
display: flex
}
.company-section__heading .company-section__title {
max-width: 940px
}
.company-expertise {
border-top: 1px solid #1b1f2224;
border-left: 1px solid #1b1f2224;
grid-template-columns: repeat(4,minmax(0,1fr));
margin-top: 64px;
display: grid
}
.company-expertise__card {
background: #fff;
border-bottom: 1px solid #1b1f2224;
border-right: 1px solid #1b1f2224;
min-height: 360px;
padding: 28px;
transition: color .22s,background .22s;
position: relative
}
.company-expertise__index {
color: var(--accent-alt);
letter-spacing: .04em;
font-size: clamp(28px,2.4vw,40px);
font-weight: 500
}
.company-expertise__title {
letter-spacing: -.035em;
max-width: 250px;
margin-top: 80px;
font-size: clamp(23px,1.7vw,30px);
font-weight: 500;
line-height: 1.08
}
.company-expertise__text {
color: #70767b;
margin-top: 18px;
font-size: 17px;
line-height: 1.55
}
.company-expertise__icon {
opacity: .35;
font-style: normal;
position: absolute;
top: 26px;
right: 28px
}
.company-expertise__card:hover {
color: #fff;
background: #1b1f22
}
.company-expertise__card:hover .company-expertise__text {
color: #ffffffa6
}
.company-route {
grid-template-columns: minmax(380px,.85fr) minmax(520px,1fr);
gap: clamp(70px,10vw,170px);
display: grid
}
.company-route__intro {
align-self: start;
position: sticky;
top: 150px
}
.company-route__intro-text {
color: #5b6166;
max-width: 560px;
margin-top: 30px;
font-size: clamp(18px,1.35vw,22px);
line-height: 1.5
}
.company-route__list {
border-top: 1px solid #1b1f2229
}
.company-route__item {
border-bottom: 1px solid #1b1f2229;
grid-template-columns: minmax(64px,max-content) minmax(0,1fr);
align-items: start;
gap: 32px;
min-height: 170px;
padding: 34px 0;
display: grid
}
.company-route__step {
color: var(--accent-alt);
letter-spacing: .04em;
font-size: clamp(28px,2.4vw,40px);
font-weight: 500
}
.company-route__item-title {
letter-spacing: -.035em;
font-size: clamp(25px,2vw,32px);
font-weight: 500
}
.company-route__item-text {
color: #70767b;
margin-top: 12px;
font-size: 17px;
line-height: 1.5
}
.company-cta {
color: #fff;
background: #1f2428;
padding: clamp(84px,9vw,140px) 0
}
.company-cta__inner {
position: relative
}
.company-kicker--light {
color: #ffffff9e
}
.company-cta__title {
letter-spacing: -.06em;
max-width: 1120px;
margin-top: 28px;
font-size: clamp(48px,6.3vw,102px);
font-weight: 500;
line-height: .93
}
.company-cta__title .heading-accent {
color: var(--accent-alt)
}
.company-cta .company-button {
position: absolute;
bottom: 8px;
right: 0
}
.company-footer {
color: #fff;
background: #15181a;
padding: 68px 0 22px
}
.company-footer__grid {
grid-template-columns: 1.1fr .62fr .9fr .85fr;
gap: 54px;
display: grid
}
.company-footer__logo-link {
filter: brightness(0)invert();
width: 150px;
display: block
}
.company-footer__logo {
width: 100%
}
.company-footer__grid>div:first-child p {
color: #ffffff85;
margin-top: 24px;
font-size: 14px;
line-height: 1.55
}
.company-footer__links,.company-footer__contacts {
color: #ffffffb8;
flex-direction: column;
align-items: flex-start;
gap: 12px;
font-size: 14px;
display: flex
}
.company-footer__links strong,.company-footer__contacts strong {
color: #fff;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 12px
}
.company-footer__links a:hover,.company-footer__contacts a:hover {
color: var(--accent-alt)
}
.company-footer__project {
color: #1b1f22;
background: var(--accent-alt);
border-radius: 18px;
flex-direction: column;
justify-content: flex-end;
min-height: 154px;
padding: 22px;
display: flex;
position: relative
}
.company-footer__project span {
text-transform: uppercase;
font-size: 12px
}
.company-footer__project strong {
max-width: 210px;
margin-top: 8px;
font-size: 21px;
line-height: 1.1
}
.company-footer__project i {
font-style: normal;
position: absolute;
top: 20px;
right: 22px
}
.company-footer__bottom {
color: #ffffff6b;
border-top: 1px solid #ffffff21;
justify-content: space-between;
margin-top: 56px;
padding-top: 18px;
font-size: 12px;
display: flex
}
.contact-hero {
background: #f2f4f7;
padding: clamp(78px,9vw,142px) 0 clamp(68px,8vw,122px)
}
.contact-hero__grid {
grid-template-columns: minmax(0,1.25fr) minmax(360px,.55fr);
align-items: end;
gap: clamp(60px,10vw,170px);
display: grid
}
.contact-hero__title {
max-width: 980px
}
.contact-hero__lead {
padding-bottom: 6px
}
.contact-hero__text {
color: #4c5257;
font-size: clamp(18px,1.5vw,23px);
line-height: 1.5
}
.contact-hero__link {
border-bottom: 1px solid #1b1f223d;
align-items: center;
gap: 24px;
margin-top: 30px;
padding-bottom: 7px;
font-size: 18px;
font-weight: 600;
display: inline-flex
}
.company-section--contact-cards {
padding-top: 28px;
padding-bottom: clamp(82px,9vw,140px)
}
.contact-cards {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 18px;
display: grid
}
.contact-card {
background: #fff;
border: 1px solid #1b1f2221;
border-radius: 22px;
min-height: 270px;
padding: 28px;
transition: color .22s,background .22s,transform .22s;
position: relative
}
.contact-card__index {
color: var(--accent-alt);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 14px;
place-items: center;
width: 52px;
height: 52px;
display: grid
}
.contact-card__label {
color: #70767b;
letter-spacing: .08em;
text-transform: uppercase;
margin-top: 52px;
font-size: 13px;
display: block
}
.contact-card__value {
letter-spacing: -.035em;
max-width: 360px;
margin-top: 9px;
font-size: clamp(21px,1.6vw,28px);
font-weight: 500;
line-height: 1.1;
display: block
}
.contact-card__note {
color: #70767b;
margin-top: 18px;
font-size: 15px
}
.contact-card__icon {
font-style: normal;
position: absolute;
top: 26px;
right: 28px
}
.contact-card:hover {
color: #fff;
background: #1f2428;
transform: translateY(-4px)
}
.contact-card:hover .contact-card__label,.contact-card:hover .contact-card__note {
color: #ffffff94
}
.contact-brief {
background: #f2f4f7;
padding: clamp(82px,9vw,148px) 0;
scroll-margin-top: calc(118px + var(--header-navbar-height))
}
.contact-brief__grid {
grid-template-columns: minmax(390px,.75fr) minmax(520px,1fr);
align-items: start;
gap: clamp(60px,9vw,150px);
display: grid
}
.contact-brief__intro {
/* Левая колонка держится на экране, пока листают форму: так вводные видны
на любом поле. Отступ считаем от шапки со второй строкой меню. */
align-self: start;
position: sticky;
top: calc(132px + var(--header-navbar-height))
}
.contact-brief__text {
color: #5b6166;
max-width: 570px;
margin-top: 30px;
font-size: 18px;
line-height: 1.55
}
.contact-brief__hint {
color: #5b6166;
border-top: 1px solid #1b1f2224;
gap: 14px;
max-width: 570px;
margin-top: 34px;
padding-top: 22px;
font-size: 14px;
line-height: 1.45;
display: flex
}
.contact-brief__hint-icon {
border: 1px solid #1b1f223d;
border-radius: 50%;
flex: 0 0 24px;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-family: Georgia,serif;
display: flex
}
.company-contact-form {
background: #fff;
border-radius: 28px;
min-height: 590px;
padding: clamp(24px,3vw,48px);
box-shadow: 0 24px 70px #171b1e0f
}
.company-contact-form__row {
grid-template-columns: 1fr 1fr;
gap: 18px;
display: grid
}
.company-contact-form__field {
color: #5b6166;
letter-spacing: .09em;
text-transform: uppercase;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
font-size: 13px;
font-weight: 600;
display: flex
}
.company-contact-form__input,.company-contact-form__textarea {
color: #1b1f22;
width: 100%;
font-style: inherit;
font-variant: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
letter-spacing: normal;
text-transform: none;
background: #f8f9fa;
border: 1px solid #1b1f2229;
border-radius: 12px;
outline: none;
font-family: inherit;
font-size: 15px;
font-weight: 400;
transition: border-color .18s,box-shadow .18s,background .18s
}
.company-contact-form__input {
height: 56px;
padding: 0 16px
}
.company-contact-form__textarea {
resize: vertical;
min-height: 166px;
padding: 16px
}
.company-contact-form__input:focus,.company-contact-form__textarea:focus {
background: #fff;
border-color: var(--accent-alt);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-alt) 10%, transparent)
}
.company-contact-form__bottom {
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 8px;
display: flex
}
/* Имя файла бывает длиннее самой формы: обрезаем его, а кнопку отправки не
даём сжимать — иначе подпись на ней ломается на две строки. */
.company-contact-form__bottom .company-button {
flex: none
}
.company-contact-form__file {
flex: 0 1 auto;
min-width: 0
}
.company-contact-form__file [data-file-name] {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden
}
/* Плюс и крестик не участвуют в сжатии: место отнимает только имя файла. */
.company-contact-form__file-icon,
.company-contact-form__file-clear {
flex: none
}
.company-contact-form__file {
/* Как на главной: пунктирная кнопка, а не строчка текста — иначе вложение
читается подписью под формой и его не замечают. */
color: #4c5257;
cursor: pointer;
border: 2px dashed #ababab;
border-radius: 12px;
align-items: center;
gap: 9px;
min-height: 48px;
padding: 6px 18px 6px 13px;
font-size: 15px;
transition: border-color .18s,color .18s;
display: inline-flex
}
.company-contact-form__file:hover {
color: var(--ink);
border-color: var(--accent-alt)
}
.company-contact-form__file:focus-within {
border-color: var(--accent-alt);
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent-alt) 45%, transparent)
}
.company-contact-form__file-input {
opacity: 0;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden
}
.company-contact-form__file-icon {
font-size: 24px
}
.company-contact-form__disclaimer {
color: #84898d;
margin-top: 20px;
font-size: 13px;
display: block
}
.company-contact-form__success {
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 490px;
display: flex
}
.company-contact-form__success-mark {
color: #fff;
background: var(--accent-alt);
border-radius: 50%;
justify-content: center;
align-items: center;
width: 56px;
height: 56px;
font-size: 22px;
display: flex
}
.company-contact-form__success-title {
letter-spacing: -.04em;
margin-top: 28px;
font-size: clamp(28px,2.5vw,42px);
font-weight: 500
}
.company-contact-form__success-text {
color: #5b6166;
max-width: 470px;
margin-top: 16px;
font-size: 17px;
line-height: 1.55
}
.company-contact-form__success-reset {
font: inherit;
cursor: pointer;
background: 0 0;
border-bottom: 1px solid #1b1f2240;
margin-top: 30px;
padding-bottom: 5px
}
.contact-location {
grid-template-columns: minmax(520px,1.05fr) minmax(380px,.75fr);
align-items: center;
gap: clamp(60px,9vw,150px);
display: grid
}
.contact-location__map {
background-color: #e7e9ec;
border-radius: 30px;
min-height: 500px;
position: relative;
overflow: hidden
}
.contact-location__frame {
border: 0;
width: 100%;
height: 100%;
min-height: 500px;
display: block
}
.contact-location__text {
color: #5b6166;
max-width: 520px;
margin-top: 28px;
font-size: 18px;
line-height: 1.55
}
.contact-location__copy .company-text-link {
margin-top: 30px;
display: inline-block
}
@media (width<=1280px) {
.company-header__main {
grid-template-columns: 154px minmax(0,1fr) auto;
gap: 20px
}
.company-header__logo-link {
width: 138px
}
.company-header__nav {
gap: 18px
}
.company-header__nav-link {
font-size: 14px
}
.company-header__cta {
gap: 16px;
padding: 0 17px
}
.company-expertise {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.company-expertise__card {
min-height: 330px
}
}
@media (width<=1040px) {
.company-header__main {
grid-template-columns: 1fr auto
}
.company-header__nav,.company-header__cta {
display: none
}
.company-header__mobile-menu {
display: block;
position: relative
}
.company-header__mobile-menu summary {
cursor: pointer;
border: 1px solid #1b1f2224;
border-radius: 12px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
width: 48px;
height: 48px;
list-style: none;
display: flex
}
.company-header__mobile-menu summary::-webkit-details-marker {
display: none
}
.company-header__mobile-menu summary span {
background: #1b1f22;
width: 19px;
height: 1.5px;
transition: transform .18s;
display: block
}
.company-header__mobile-menu[open] summary span:first-child {
transform: translateY(4.25px)rotate(45deg)
}
.company-header__mobile-menu[open] summary span:last-child {
transform: translateY(-4.25px)rotate(-45deg)
}
.company-header__mobile-menu nav {
background: #fff;
border: 1px solid #1b1f221f;
border-radius: 18px;
flex-direction: column;
width: min(340px,100vw - 40px);
padding: 12px;
display: flex;
position: absolute;
top: calc(100% + 10px);
right: 0;
box-shadow: 0 22px 55px #14181b26
}
.company-header__mobile-menu nav a {
border-bottom: 1px solid #1b1f2217;
justify-content: space-between;
align-items: center;
min-height: 51px;
padding: 0 12px;
font-size: 15px;
display: flex
}
.company-header__mobile-menu nav a:last-child {
border-bottom: 0
}
.company-header__mobile-menu nav a[aria-current=page] {
color: var(--accent-alt)
}
.company-hero__grid,.company-manifesto,.company-route,.contact-hero__grid,.contact-brief__grid,.contact-location {
grid-template-columns: 1fr
}
.company-hero__copy {
min-height: 520px;
padding-bottom: 20px
}
.company-hero__art {
min-height: 620px
}
.company-stats {
grid-template-columns: repeat(2,1fr)
}
.company-stats__item:nth-child(2) {
border-right: 0
}
.company-stats__item:nth-child(-n+2) {
border-bottom: 1px solid #1b1f221f
}
.company-manifesto,.company-route,.contact-brief__grid,.contact-location {
gap: 64px
}
.company-route__intro,
.contact-brief__intro {
position: static
}
.company-cta .company-button {
margin-top: 40px;
position: static
}
.company-footer__grid {
grid-template-columns: 1fr 1fr
}
.contact-hero__grid {
gap: 44px
}
.contact-hero__lead {
max-width: 650px
}
.contact-cards {
grid-template-columns: 1fr
}
.contact-card {
min-height: 220px
}
.contact-card__label {
margin-top: 32px
}
.contact-location__map,
.contact-location__frame {
min-height: 440px
}
}
@media (width<=620px) {
.company-shell {
width: calc(100% - 28px)
}
.company-header__topbar-inner {
justify-content: space-between;
gap: 8px;
font-size: 10px
}
.company-header__main {
min-height: 68px
}
.company-header__logo-link {
width: 124px
}
.company-header__mobile-menu summary {
width: 44px;
height: 44px
}
.company-hero__grid {
gap: 22px;
padding-top: 28px
}
.company-hero__copy {
min-height: 470px
}
.company-hero__title,.contact-hero__title {
margin-top: 20px;
font-size: clamp(43px,12.5vw,62px);
line-height: .96
}
.company-hero__text {
margin-top: 24px;
font-size: 17px
}
.company-hero__actions {
flex-direction: column;
align-items: stretch;
gap: 18px;
width: 100%;
margin-top: 30px
}
.company-button {
width: 100%
}
.company-hero__actions .company-text-link {
align-self: flex-start
}
.company-hero__art {
border-radius: 24px 24px 0 0;
min-height: 470px
}
.company-hero__art-label {
top: 22px;
left: 22px
}
.company-hero__art-note {
bottom: 18px;
right: 20px
}
.company-hero__award--back {
width: 45%
}
.company-hero__award--front {
width: 70%;
right: -4%
}
.company-stats {
width: 100%
}
.company-stats__item {
min-height: 126px;
padding: 20px 16px
}
.company-stats__value {
font-size: 32px
}
.company-stats__label {
font-size: 13px
}
.company-section {
padding: 74px 0
}
.company-section__title,.contact-brief__title,.contact-location__title {
margin-top: 20px;
font-size: clamp(39px,11vw,54px);
line-height: 1
}
.company-manifesto,.company-route,.contact-brief__grid,.contact-location {
gap: 46px
}
.company-manifesto__copy {
font-size: 16px
}
.company-expertise {
grid-template-columns: 1fr;
margin-top: 42px
}
.company-expertise__card {
min-height: 290px;
padding: 22px
}
.company-expertise__title {
margin-top: 58px
}
.company-route__item {
grid-template-columns: minmax(40px,max-content) minmax(0,1fr);
gap: 14px;
min-height: 0;
padding: 26px 0
}
.company-cta {
padding: 76px 0
}
.company-cta__title {
font-size: clamp(42px,12vw,58px)
}
.company-footer {
padding-top: 52px
}
.company-footer__grid {
grid-template-columns: 1fr;
gap: 42px
}
.company-footer__project {
min-height: 140px
}
.company-footer__bottom {
gap: 24px;
font-size: 10px
}
.contact-hero {
padding: 64px 0 72px
}
.company-section--contact-cards {
padding-top: 14px
}
.contact-card {
border-radius: 18px;
min-height: 210px;
padding: 22px
}
.contact-card__icon {
top: 21px;
right: 22px
}
.contact-brief {
padding: 74px 0
}
.company-contact-form {
border-radius: 20px;
min-height: 0;
padding: 18px
}
.company-contact-form__row {
grid-template-columns: 1fr;
gap: 0
}
.company-contact-form__textarea {
min-height: 190px
}
.company-contact-form__bottom {
flex-direction: column;
align-items: stretch
}
.company-contact-form__file {
min-height: 42px
}
.company-contact-form__success {
min-height: 440px
}
.contact-location__map {
border-radius: 22px
}
.contact-location__map,
.contact-location__frame {
min-height: 330px
}
}
.company-page .contact-hero {
padding-top: calc(112px + var(--header-navbar-height) + clamp(78px,9vw,142px))
}
.factory-hero {
background: #f2f4f7;
padding: calc(112px + var(--header-navbar-height) + clamp(54px,6vw,96px)) 0 32px;
overflow: hidden
}
.factory-hero__head {
grid-template-columns: minmax(0,1.2fr) minmax(320px,.55fr);
align-items: end;
gap: 60px;
margin-bottom: clamp(42px,5vw,74px);
display: grid
}
.factory-hero__title {
letter-spacing: -.075em;
margin-top: 20px;
font-size: clamp(74px,10.2vw,164px);
font-weight: 500;
line-height: .8
}
.factory-hero__lead {
letter-spacing: -.045em;
padding-bottom: 4px;
font-size: clamp(25px,2.4vw,40px);
font-weight: 500;
line-height: 1.03
}
.factory-hero__lead-accent {
color: var(--accent-alt)
}
.factory-hero__media {
background: #dcdfe2;
border-radius: 32px;
height: clamp(440px,50vw,690px);
position: relative;
overflow: hidden
}
.factory-hero__image {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
transform: scale(1.015)
}
.factory-hero__media-shade {
background: linear-gradient(#13171a14,#0000 45%,#13171a85);
position: absolute;
inset: 0
}
.factory-hero__media-label,.factory-hero__media-index {
color: #fff;
letter-spacing: .1em;
text-transform: uppercase;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #15191c2e;
border: 1px solid #ffffff6b;
border-radius: 9px;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
position: absolute;
top: 26px
}
.factory-hero__media-label {
left: 26px
}
.factory-hero__media-index {
right: 26px
}
.factory-hero__media-note {
color: #fff;
justify-content: space-between;
align-items: flex-end;
gap: 28px;
display: flex;
position: absolute;
bottom: 28px;
left: 28px;
right: 28px
}
.factory-hero__media-note-label {
color: #ffffffb8;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 13px
}
.factory-hero__media-note-text {
letter-spacing: -.035em;
text-align: right;
max-width: 520px;
font-size: clamp(21px,2vw,32px);
font-weight: 500
}
.factory-process {
background: #fff;
padding: clamp(88px,9vw,150px) 0
}
.factory-process__head {
grid-template-columns: minmax(0,1.18fr) minmax(360px,.55fr);
align-items: end;
gap: clamp(60px,10vw,170px);
display: grid
}
.factory-process__title,.factory-inside__title,.factory-quality__title,.factory-cta__title {
letter-spacing: -.06em;
margin-top: 28px;
font-size: clamp(48px,5.6vw,88px);
font-weight: 500;
line-height: .94
}
.factory-process__title .heading-accent,.factory-inside__title .heading-accent,.factory-quality__title .heading-accent,.factory-cta__title .heading-accent {
color: var(--accent-alt);
display: block
}
.factory-process__lead {
color: #5b6166;
padding-bottom: 7px;
font-size: clamp(18px,1.5vw,23px);
line-height: 1.5
}
.factory-steps {
border-top: 1px solid #1b1f2229;
border-left: 1px solid #1b1f2229;
grid-template-columns: repeat(5,minmax(0,1fr));
margin-top: clamp(52px,6vw,86px);
display: grid
}
.factory-step {
background: #fff;
border-bottom: 1px solid #1b1f2229;
border-right: 1px solid #1b1f2229;
/* Номер, пружина, подпись. Пружина отдельной строкой держит заголовки всех
карточек на одной линии: раньше подпись из двух строк поднимала
«Производство» выше соседей. */
grid-template-rows: auto minmax(18px,1fr) auto;
min-height: 340px;
padding: 26px;
transition: background .22s,transform .22s;
display: grid;
position: relative
}
.factory-step__body {
/* Подпись прижата к низу карточки, пружина — над ней. */
grid-row: 3
}
.factory-step:before {
content: "";
background: var(--accent-alt);
width: 46px;
height: 2px;
position: absolute;
top: -1px;
left: -1px
}
.factory-step__number {
color: var(--accent-alt);
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
font-size: clamp(28px,2.4vw,40px);
font-weight: 500
}
.factory-step__title {
letter-spacing: -.04em;
font-size: clamp(24px,2vw,32px);
font-weight: 500
}
.factory-step__text {
color: #696f74;
max-width: 220px;
/* Две строки резервируем всегда: иначе однострочные подписи поднимали бы
свой заголовок относительно соседних карточек. */
min-height: 2.92em;
margin-top: 14px;
font-size: 15px;
line-height: 1.46
}
.factory-step__arrow {
color: #1b1f2247;
font-size: 15px;
position: absolute;
top: 23px;
right: 24px
}
.factory-step:hover {
background: #f2f4f7;
transform: translateY(-4px)
}
.factory-inside {
background: #f2f4f7;
padding: clamp(88px,9vw,150px) 0
}
.factory-inside__grid {
grid-template-columns: minmax(420px,.9fr) minmax(520px,1fr);
align-items: start;
gap: clamp(64px,9vw,150px);
display: grid
}
.factory-inside__visual {
background: #dcdfe2;
border-radius: 30px;
min-height: 690px;
position: sticky;
top: 110px;
overflow: hidden
}
.factory-inside__visual:after {
aspect-ratio: 1;
content: "";
background: var(--accent-alt);
border-radius: 50%;
width: 54%;
position: absolute;
bottom: -14%;
right: -12%
}
.factory-inside__visual--photo:after {
z-index: 2
}
.factory-inside__photo {
z-index: 1;
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
inset: 0
}
/* Значок стоит в видимой части кораллового круга, а не в его геометрическом
центре: круг частью уходит за угол карточки. Место и размер считаются от
карточки — иначе на другой ширине лампочка уезжает на срез. */
.factory-inside__idea {
z-index: 3;
color: #fff;
pointer-events: none;
place-items: center;
aspect-ratio: 1;
width: clamp(96px,10vw,132px);
display: grid;
position: absolute;
bottom: 6%;
right: 6%
}
.factory-inside__idea-icon {
width: 92%;
height: 72%;
stroke-width: 1.4px
}
.factory-inside__visual-grid {
background-image: linear-gradient(#1b1f220f 1px,#0000 1px),linear-gradient(90deg,#1b1f220f 1px,#0000 1px);
background-size: 56px 56px;
position: absolute;
inset: 0
}
.factory-inside__award {
z-index: 2;
object-fit: contain;
filter: drop-shadow(0 30px 28px #1114163d);
position: absolute
}
.factory-inside__award--main {
width: 68%;
height: 90%;
bottom: -2%;
right: -2%
}
.factory-inside__award--secondary {
opacity: .76;
width: 45%;
height: 58%;
top: 13%;
left: -4%;
transform: rotate(-7deg)
}
.factory-inside__visual-caption {
z-index: 4;
color: #fff;
background: #111416b8;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 999px;
padding: 9px 12px;
letter-spacing: .11em;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
position: absolute;
top: 24px;
left: 26px
}
.factory-inside__text {
color: #5b6166;
max-width: 690px;
margin-top: 30px;
font-size: 18px;
line-height: 1.55
}
.factory-capabilities {
border-top: 1px solid #1b1f2229;
margin-top: 50px
}
.factory-capability {
border-bottom: 1px solid #1b1f2229;
grid-template-columns: minmax(54px,max-content) minmax(0,1fr);
gap: 22px;
padding: 26px 0;
display: grid
}
.factory-capability__number {
color: var(--accent-alt);
letter-spacing: .04em;
padding-top: 4px;
font-size: clamp(28px,2.4vw,40px);
font-weight: 500
}
.factory-capability__title {
letter-spacing: -.035em;
font-size: clamp(22px,1.8vw,29px);
font-weight: 500
}
.factory-capability__text {
color: #696f74;
max-width: 570px;
margin-top: 9px;
font-size: 15px;
line-height: 1.48
}
.factory-quality {
background: #fff;
padding: clamp(88px,9vw,150px) 0
}
.factory-quality__grid {
grid-template-columns: minmax(420px,.72fr) minmax(570px,1fr);
align-items: start;
gap: clamp(64px,9vw,150px);
display: grid
}
.factory-quality__copy {
position: sticky;
top: calc(112px + var(--header-navbar-height))
}
.factory-quality__text {
color: #5b6166;
max-width: 630px;
margin-top: 30px;
font-size: 18px;
line-height: 1.55
}
.factory-quality__list {
border-top: 1px solid #1b1f2229;
margin-top: 38px
}
.factory-quality__item {
border-bottom: 1px solid #1b1f2229;
/* Номер стал крупным, и в колонке 42px он уже не помещался, а подпись
висела по верхнему краю: равняем их по общей средней линии. */
grid-template-columns: 34px minmax(0,1fr);
align-items: center;
gap: 14px;
padding: 17px 0;
font-size: 18px;
display: grid
}
.factory-quality__mark {
color: var(--accent-alt);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 10px;
place-items: center;
width: 34px;
height: 34px;
display: grid
}
.factory-quality__gallery {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 16px;
display: grid
}
.factory-quality__photo {
background: #e8eaec;
border-radius: 22px;
min-height: 310px;
position: relative;
overflow: hidden
}
.factory-quality__photo--large {
grid-column: 1/-1;
min-height: 520px
}
.factory-quality__image {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(.2,.72,.2,1)
}
.factory-quality__photo:after {
content: "";
background: linear-gradient(#0000,#1216188a);
position: absolute;
inset: 55% 0 0
}
.factory-quality__caption {
z-index: 2;
color: #fff;
font-size: 18px;
font-weight: 500;
position: absolute;
bottom: 18px;
left: 20px;
right: 20px
}
.factory-quality__photo:hover .factory-quality__image {
transform: scale(1.035)
}
.factory-cta {
color: #fff;
background: #1f2428;
padding: clamp(86px,9vw,145px) 0
}
.factory-cta__inner {
position: relative
}
.factory-cta__title {
max-width: 1210px
}
.factory-cta__link {
width: auto;
position: absolute;
bottom: 4px;
right: 0
}
@media (width<=1180px) {
.factory-steps {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.factory-step {
min-height: 290px
}
.factory-inside__grid,.factory-quality__grid {
grid-template-columns: 1fr
}
.factory-inside__visual,.factory-quality__copy {
position: relative;
top: auto
}
.factory-inside__visual {
min-height: 640px
}
}
@media (width<=820px) {
.factory-hero__head,.factory-process__head {
grid-template-columns: 1fr;
gap: 32px
}
.factory-hero__title {
font-size: clamp(68px,18vw,118px)
}
.factory-hero__lead {
max-width: 470px
}
.factory-steps {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.factory-cta__link {
margin-top: 38px;
position: static
}
}
@media (width<=620px) {
.company-page .company-hero {
padding-top: 128px
}
.company-page .contact-hero {
padding-top: 152px
}
.factory-hero {
padding-top: 132px;
padding-bottom: 14px
}
.factory-hero__head {
margin-bottom: 34px
}
.factory-hero__title {
margin-top: 14px;
font-size: clamp(44px,13.5vw,58px);
line-height: .9
}
.factory-hero__head>* {
min-width: 0
}
.factory-hero__lead {
font-size: 27px
}
.factory-hero__media {
border-radius: 22px;
width: calc(100% - 12px);
height: 470px
}
.factory-hero__image {
object-position: 45% center
}
.factory-hero__media-label,.factory-hero__media-index {
padding: 7px 9px;
font-size: 12px;
top: 16px
}
.factory-hero__media-label {
left: 16px
}
.factory-hero__media-index {
right: 16px
}
.factory-hero__media-note {
flex-direction: column;
align-items: flex-start;
gap: 8px;
bottom: 16px;
left: 16px;
right: 16px
}
.factory-hero__media-note-text {
text-align: left;
font-size: 20px
}
.factory-process,.factory-inside,.factory-quality {
padding: 74px 0
}
.factory-process__title,.factory-inside__title,.factory-quality__title,.factory-cta__title {
margin-top: 20px;
font-size: clamp(34px,10.5vw,54px);
line-height: .98
}
.factory-process__head>* {
min-width: 0
}
.factory-process__lead,.factory-inside__text,.factory-quality__text {
font-size: 16px
}
.factory-steps {
grid-template-columns: 1fr;
margin-top: 42px
}
.factory-step {
min-height: 210px;
padding: 22px
}
.factory-step__arrow {
top: 20px;
right: 20px;
transform: rotate(90deg)
}
.factory-inside__grid,.factory-quality__grid {
gap: 48px
}
.factory-inside__visual {
border-radius: 22px;
min-height: 470px
}
.factory-inside__award--main {
width: 80%;
right: -10%
}
.factory-inside__award--secondary {
width: 54%;
left: -12%
}
.factory-capabilities {
margin-top: 36px
}
.factory-capability {
grid-template-columns: minmax(36px,max-content) minmax(0,1fr);
gap: 12px;
padding: 22px 0
}
.factory-quality__gallery {
grid-template-columns: 1fr
}
.factory-quality__photo,.factory-quality__photo--large {
grid-column: auto;
min-height: 360px
}
.factory-cta {
padding: 76px 0
}
.factory-cta__link {
width: 100%
}
}
.reviews-hero {
background: #f2f4f7;
padding: calc(var(--header-navbar-height) + clamp(150px,12vw,190px)) 0 clamp(72px,8vw,122px);
overflow: hidden
}
.reviews-hero__grid {
grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr);
align-items: center;
gap: clamp(52px,7vw,124px);
min-height: 650px;
display: grid
}
.reviews-hero__title,.reviews-section-head__title,.reviews-projects__title,.reviews-cta__title {
letter-spacing: -.06em;
margin-top: 28px;
font-size: clamp(52px,5.4vw,90px);
font-weight: 500;
line-height: .94
}
.reviews-hero__title .heading-accent,.reviews-section-head__title .heading-accent,.reviews-projects__title .heading-accent,.reviews-cta__title .heading-accent {
color: var(--accent-alt)
}
.reviews-hero__title .heading-accent {
max-width: 820px;
display: inline-block
}
.reviews-hero__lead {
color: #5b6166;
max-width: 650px;
margin-top: 36px;
font-size: clamp(18px,1.4vw,22px);
line-height: 1.52
}
.reviews-text-link {
border-bottom: 1px solid #1b1f2247;
align-items: center;
gap: 42px;
margin-top: 42px;
padding-bottom: 7px;
font-size: 15px;
font-weight: 600;
transition: color .18s,border-color .18s;
display: inline-flex
}
.reviews-text-link:hover {
color: var(--accent-alt);
border-color: var(--accent-alt)
}
.reviews-hero__visual {
min-height: 650px;
position: relative
}
.reviews-hero__visual:before {
aspect-ratio: 1;
content: "";
background: #e1e4e8;
border-radius: 50%;
width: 74%;
position: absolute;
top: 8%;
right: -10%
}
.reviews-hero__card {
z-index: 1;
background: #fff;
border-radius: 28px;
margin: 0;
position: absolute;
overflow: hidden;
box-shadow: 0 28px 70px #1a1e211a
}
.reviews-hero__image {
object-fit: cover;
width: 100%;
height: 100%
}
.reviews-hero__card--main {
width: 67%;
height: 72%;
top: 0;
right: 0
}
.reviews-hero__card--main:after {
content: "";
background: linear-gradient(#0000,#14181ba6);
position: absolute;
inset: 52% 0 0
}
.reviews-hero__caption {
z-index: 2;
color: #fff;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
display: flex;
position: absolute;
bottom: 24px;
left: 26px;
right: 26px
}
.reviews-hero__caption-tag {
letter-spacing: .12em;
text-transform: uppercase;
font-size: 12px;
font-weight: 600
}
.reviews-hero__caption-text {
letter-spacing: -.03em;
text-align: right;
max-width: 190px;
font-size: 20px;
font-weight: 500
}
.reviews-hero__card--side {
width: 40%;
height: 43%;
box-shadow: none;
border: 7px solid #f2f4f7;
bottom: 0;
left: 0
}
.reviews-hero__note {
z-index: 3;
color: #fff;
background: #1f2428;
border-radius: 22px;
flex-direction: column;
justify-content: space-between;
width: 54%;
min-height: 154px;
padding: 22px 24px;
display: flex;
position: absolute;
bottom: 0;
right: 0;
box-shadow: 0 22px 54px #191d2024
}
.reviews-hero__note-label {
color: #ffffff94;
letter-spacing: .12em;
text-transform: uppercase;
font-size: 13px;
font-weight: 600
}
.reviews-hero__note-text {
letter-spacing: -.035em;
max-width: 360px;
font-size: clamp(28px,2.4vw,40px);
font-weight: 500;
line-height: 1.18
}
.reviews-testimonials,.reviews-feedback,.reviews-clients {
padding: clamp(88px,9vw,148px) 0
}
.reviews-testimonials,.reviews-projects {
background: #fff
}
.reviews-feedback,.reviews-clients {
background: #f2f4f7
}
.reviews-section-head {
grid-template-columns: minmax(0,1.2fr) minmax(340px,.58fr);
align-items: end;
gap: clamp(60px,10vw,170px);
display: grid
}
.reviews-section-head__title .heading-accent,.reviews-projects__title .heading-accent,.reviews-cta__title .heading-accent {
display: block
}
.reviews-section-head__lead {
color: #5b6166;
padding-bottom: 7px;
font-size: clamp(18px,1.45vw,23px);
line-height: 1.5
}
.reviews-testimonials__head {
margin-bottom: clamp(52px,6vw,84px)
}
.reviews-testimonials__grid {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
display: grid
}
.reviews-testimonial {
background: #f2f4f7;
border: 1px solid #1b1f2217;
border-radius: 26px;
flex-direction: column;
justify-content: space-between;
min-height: 390px;
padding: 28px;
transition: transform .26s cubic-bezier(.2,.72,.2,1),box-shadow .26s;
display: flex;
position: relative
}
.reviews-testimonial--featured {
color: #fff;
background: #1f2428;
grid-column: span 2
}
.reviews-testimonial__top {
justify-content: space-between;
align-items: center;
gap: 18px;
display: flex
}
.reviews-testimonial__index {
color: var(--accent-alt);
letter-spacing: .11em;
text-transform: uppercase;
font-size: clamp(28px,2.4vw,40px);
font-weight: 600
}
.reviews-testimonial__project {
color: #666c71;
letter-spacing: .1em;
text-align: right;
text-transform: uppercase;
font-size: 13px;
font-weight: 600
}
.reviews-testimonial--featured .reviews-testimonial__project {
color: #ffffff8a
}
.reviews-testimonial__quote {
letter-spacing: -.035em;
max-width: 520px;
margin: 48px 0;
font-size: clamp(22px,1.8vw,30px);
font-weight: 500;
line-height: 1.22
}
.reviews-testimonial--featured .reviews-testimonial__quote {
max-width: 930px;
font-size: clamp(27px,2.6vw,44px);
line-height: 1.12
}
.reviews-testimonial__author {
border-top: 1px solid #1b1f221f;
align-items: center;
gap: 14px;
padding-top: 20px;
display: flex
}
.reviews-testimonial--featured .reviews-testimonial__author {
border-color: #ffffff29
}
.reviews-testimonial__mark {
color: #fff;
background: var(--accent-alt);
border-radius: 50%;
flex: none;
place-items: center;
width: 44px;
height: 44px;
font-family: Georgia,Times New Roman,serif;
font-size: 30px;
line-height: 1;
display: grid
}
/* Открывающая кавычка рисуется у верхней границы строки: по замеру её чернила
сидят на .36em выше середины. Смещаем сам глиф, а не круг, иначе поехала бы
вся плашка вместе с фоном. */
.reviews-testimonial__mark i {
font-style: normal;
transform: translateY(.36em);
display: block
}
.reviews-testimonial__author-body {
flex-direction: column;
gap: 3px;
min-width: 0;
display: flex
}
.reviews-testimonial__role {
font-size: 14px;
font-weight: 600
}
.reviews-testimonial__company {
color: #686e73;
font-size: 13px
}
.reviews-testimonial--featured .reviews-testimonial__company {
color: #ffffff8a
}
@media (hover: hover) and (pointer:fine) {
.reviews-testimonial:hover {
transform:translateY(-4px);
box-shadow: 0 24px 54px #1a1e211a
}
}
.reviews-feedback__grid {
border-top: 1px solid #1b1f2226;
border-left: 1px solid #1b1f2226;
grid-template-columns: repeat(4,minmax(0,1fr));
margin-top: clamp(52px,6vw,84px);
list-style: none;
display: grid
}
.reviews-feedback__card {
background: #fff;
border-bottom: 1px solid #1b1f2226;
border-right: 1px solid #1b1f2226;
flex-direction: column;
justify-content: space-between;
min-height: 400px;
padding: 26px;
transition: color .22s,background .22s;
display: flex;
position: relative
}
.reviews-feedback__card:before {
content: "";
background: var(--accent-alt);
width: 52px;
height: 2px;
position: absolute;
top: -1px;
left: -1px
}
.reviews-feedback__card-top {
justify-content: space-between;
align-items: center;
gap: 16px;
display: flex
}
.reviews-feedback__card-eyebrow {
color: #7c8287;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 13px;
font-weight: 600
}
.reviews-feedback__card-title {
letter-spacing: -.045em;
font-size: clamp(26px,2vw,34px);
font-weight: 500
}
.reviews-feedback__card-text {
color: #656b70;
max-width: 330px;
margin-top: 18px;
font-size: 16px;
line-height: 1.5
}
.reviews-feedback__card:hover {
color: #fff;
background: #1f2428
}
.reviews-feedback__card:hover .reviews-feedback__card-text,.reviews-feedback__card:hover .reviews-feedback__card-eyebrow {
color: #ffffffa3
}
.reviews-projects {
background: #fff;
padding: clamp(88px,9vw,148px) 0
}
.reviews-projects__head {
margin-bottom: clamp(48px,6vw,80px)
}
.reviews-projects__grid {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
display: grid
}
.reviews-project {
background: #f2f4f7;
border-radius: 26px;
overflow: hidden
}
.reviews-project__media {
aspect-ratio: 1.18;
background: #e5e8eb;
position: relative;
overflow: hidden
}
.reviews-project__image {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(.2,.72,.2,1)
}
.reviews-project__tag {
color: #fff;
letter-spacing: .11em;
text-transform: uppercase;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: #1a1e213d;
border: 1px solid #ffffff8f;
border-radius: 9px;
padding: 8px 11px;
font-size: 12px;
font-weight: 600;
position: absolute;
top: 18px;
left: 18px
}
.reviews-project:hover .reviews-project__image {
transform: scale(1.035)
}
.reviews-project__copy {
min-height: 325px;
padding: 28px;
position: relative
}
.reviews-project__title {
letter-spacing: -.045em;
max-width: calc(100% - 46px);
font-size: clamp(25px,2vw,34px);
font-weight: 500;
line-height: 1.06
}
.reviews-project__text {
color: #5e6469;
max-width: 390px;
margin-top: 22px;
font-size: 16px;
line-height: 1.5
}
.reviews-project__result {
border-top: 1px solid #1b1f2221;
padding-top: 18px;
font-size: 13px;
font-weight: 600;
position: absolute;
bottom: 28px;
left: 28px;
right: 28px
}
.reviews-section-head--clients {
margin-bottom: clamp(52px,6vw,84px)
}
.reviews-clients__grid {
border-top: 1px solid #1b1f221f;
border-left: 1px solid #1b1f221f;
grid-template-columns: repeat(7,minmax(0,1fr));
list-style: none;
display: grid
}
.reviews-clients__item {
background: #fff;
border-bottom: 1px solid #1b1f221f;
border-right: 1px solid #1b1f221f;
justify-content: center;
align-items: center;
min-height: 154px;
padding: 20px;
display: flex
}
.reviews-clients__image {
mix-blend-mode: multiply;
filter: grayscale();
opacity: .64;
width: min(100%,150px);
height: auto;
transition: filter .18s,opacity .18s,transform .18s
}
.reviews-clients__item:hover .reviews-clients__image {
filter: grayscale(0);
opacity: 1;
transform: translateY(-2px)
}
.reviews-cta {
color: #fff;
background: #1f2428;
padding: clamp(84px,9vw,145px) 0
}
.reviews-cta__inner {
grid-template-columns: minmax(0,1.2fr) minmax(340px,.52fr);
align-items: end;
gap: clamp(60px,10vw,170px);
display: grid
}
.reviews-cta__text {
color: #ffffff9e;
font-size: 17px;
line-height: 1.5
}
.reviews-cta__link {
width: 100%;
margin-top: 32px
}
@media (width<=1180px) {
.reviews-hero__grid {
grid-template-columns: minmax(0,.9fr) minmax(450px,1.1fr);
gap: 42px;
min-height: 590px
}
.reviews-hero__visual {
min-height: 590px
}
.reviews-feedback__grid,.reviews-testimonials__grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.reviews-feedback__card {
min-height: 330px
}
.reviews-clients__grid {
grid-template-columns: repeat(5,minmax(0,1fr))
}
}
@media (width<=900px) {
.reviews-hero__grid,.reviews-section-head,.reviews-cta__inner {
grid-template-columns: 1fr
}
.reviews-hero__grid {
gap: 58px
}
.reviews-hero__copy {
max-width: 760px
}
.reviews-hero__visual {
width: min(100%,720px);
min-height: 620px;
margin-left: auto
}
.reviews-section-head,.reviews-cta__inner {
gap: 34px
}
.reviews-section-head__lead,.reviews-cta__action {
max-width: 650px
}
.reviews-projects__grid {
grid-template-columns: 1fr;
gap: 18px
}
.reviews-project {
grid-template-columns: minmax(300px,.86fr) minmax(0,1.14fr);
display: grid
}
.reviews-project__media {
aspect-ratio: auto;
height: 100%
}
.reviews-clients__grid {
grid-template-columns: repeat(4,minmax(0,1fr))
}
}
@media (width<=620px) {
.reviews-hero {
padding-top: 146px;
padding-bottom: 74px
}
.reviews-hero__grid {
gap: 44px
}
.reviews-hero__title,.reviews-section-head__title,.reviews-projects__title,.reviews-cta__title {
margin-top: 20px;
font-size: clamp(40px,12vw,58px);
line-height: .98
}
.reviews-hero__lead,.reviews-section-head__lead {
font-size: 16px
}
.reviews-text-link {
margin-top: 30px
}
.reviews-hero__visual {
min-height: 490px
}
.reviews-hero__card {
border-radius: 20px
}
.reviews-hero__card--main {
width: 78%;
height: 67%
}
.reviews-hero__card--side {
border-width: 5px;
width: 44%;
height: 38%
}
.reviews-hero__caption {
bottom: 16px;
left: 16px;
right: 16px
}
.reviews-hero__caption-tag {
display: none
}
.reviews-hero__caption-text {
margin-left: auto;
font-size: 16px
}
.reviews-hero__note {
border-radius: 18px;
width: 66%;
min-height: 138px;
padding: 18px
}
.reviews-feedback,.reviews-testimonials,.reviews-projects,.reviews-clients,.reviews-cta {
padding-top: 74px;
padding-bottom: 74px
}
.reviews-feedback__grid {
grid-template-columns: 1fr;
margin-top: 42px
}
.reviews-testimonials__grid {
grid-template-columns: 1fr
}
.reviews-testimonial,.reviews-testimonial--featured {
border-radius: 22px;
grid-column: auto;
min-height: 340px;
padding: 22px
}
.reviews-testimonial__quote,.reviews-testimonial--featured .reviews-testimonial__quote {
margin: 38px 0;
font-size: clamp(23px,7vw,31px);
line-height: 1.16
}
.reviews-feedback__card {
min-height: 270px;
padding: 22px
}
.reviews-project {
display: block
}
.reviews-project__media {
aspect-ratio: 1.05;
height: auto
}
.reviews-project__copy {
min-height: 315px;
padding: 22px
}
.reviews-project__result {
bottom: 22px;
left: 22px;
right: 22px
}
.reviews-clients__grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.reviews-clients__item {
min-height: 122px;
padding: 14px
}
.reviews-cta__link {
min-height: 56px
}
}
@media (width<=380px) {
.reviews-hero__visual {
min-height: 440px
}
.reviews-hero__note {
width: 70%;
min-height: 128px
}
.reviews-hero__note-text {
font-size: 16px
}
}
@media (hover: none) {
.quick-catalog__card:hover,.quick-catalog__all-card:hover,.pricing__card:hover,.button:hover,.catalog__card:hover .catalog__card-image,.products__card:hover .products__photo-image {
transform:none
}
.reviews-feedback__card:hover {
color: inherit;
background: #fff
}
.reviews-feedback__card:hover .reviews-feedback__card-text,.reviews-feedback__card:hover .reviews-feedback__card-eyebrow {
color: #656b70
}
.reviews-project:hover .reviews-project__image,.reviews-clients__item:hover .reviews-clients__image {
transform: none
}
}
.catalog-page {
color: #171a1d;
background: #fff;
min-width: 320px;
min-height: 100vh;
font-family: var(--font-ui)
}
.catalog-page :focus-visible {
outline-offset: 4px;
outline: 2px solid var(--accent)
}
.catalog-shell {
width: var(--page-width);
margin-left: auto;
margin-right: auto
}
.catalog-hero {
padding-top: calc(var(--header-main-height,78px) + var(--topbar-current-height,34px) + var(--header-navbar-height) + clamp(18px,1.8vw,28px));
background: #f2f4f7
}
.catalog-hero__inner {
grid-template-columns: minmax(0,.92fr) minmax(460px,.78fr);
align-items: center;
gap: clamp(40px,6vw,110px);
min-height: 0;
padding: clamp(42px,4.5vw,68px) 0 clamp(36px,4vw,58px);
display: grid
}
.catalog-hero__copy {
z-index: 2;
position: relative
}
.catalog-eyebrow {
color: #171a1d80;
letter-spacing: .12em;
text-transform: uppercase;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 700;
display: inline-flex
}
.catalog-eyebrow__mark {
background: var(--accent);
border-radius: 50%;
width: 7px;
height: 7px
}
.catalog-hero__title {
letter-spacing: -.052em;
max-width: 780px;
margin-top: 24px;
font-size: clamp(44px,4.4vw,74px);
font-weight: 500;
line-height: .96
}
.catalog-hero__title .heading-accent,.catalog-section__title .heading-accent,.catalog-cta__title .heading-accent {
color: var(--accent);
font-style: normal
}
.catalog-hero__text {
color: #171a1d9e;
max-width: 670px;
margin-top: 24px;
font-size: clamp(17px,1.45vw,22px);
line-height: 1.48
}
.catalog-hero__down {
border: 1px solid #171a1d26;
border-radius: 999px;
align-items: center;
gap: 12px;
width: fit-content;
margin-top: 24px;
padding: 14px 18px;
font-size: 18px;
font-weight: 600;
transition: color .18s,border-color .18s,background .18s;
display: inline-flex
}
.catalog-hero__down:hover {
color: #fff;
background: #171a1d;
border-color: #171a1d
}
.catalog-hero__stage {
isolation: isolate;
background: radial-gradient(circle at 74% 24%,#ffffffd9,#0000 24%),linear-gradient(145deg,color-mix(in srgb, var(--accent-soft) 30%, #fff),color-mix(in srgb, var(--accent) 78%, #fff) 64%,var(--accent-deep));
border-radius: 32px;
min-height: clamp(340px,31vw,460px);
position: relative;
overflow: hidden
}
.catalog-hero__stage:after {
aspect-ratio: 1;
content: "";
border: 1px solid #ffffff6b;
border-radius: 50%;
width: 72%;
position: absolute;
bottom: -31%;
right: -12%
}
.catalog-hero__stage-index {
z-index: 4;
color: #171a1d7a;
letter-spacing: .14em;
font-size: 11px;
font-weight: 700;
position: absolute;
top: 25px;
left: 28px
}
.catalog-hero__orb {
z-index: -1;
aspect-ratio: 1;
filter: blur(1px);
background: color-mix(in srgb, var(--accent-soft) 12%, #fff);
border-radius: 50%;
width: 58%;
position: absolute;
top: 19%;
left: 18%
}
.catalog-hero__award {
z-index: 2;
object-fit: contain;
filter: drop-shadow(0 28px 24px #521d1230);
position: absolute
}
.catalog-hero__award--main {
width: 56%;
height: 98%;
bottom: -7%;
right: 10%
}
.catalog-hero__award--glass {
mix-blend-mode: multiply;
width: 57%;
bottom: 4%;
left: -10%;
transform: rotate(-7deg)
}
.catalog-hero__award--medal {
width: 31%;
height: 54%;
top: 4%;
right: -8%;
transform: rotate(8deg)
}
.catalog-hero__stage-note {
z-index: 4;
color: #171a1d94;
letter-spacing: .11em;
text-align: right;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
line-height: 1.5;
position: absolute;
bottom: 25px;
right: 28px
}
.catalog-jump {
border-top: 1px solid #171a1d1f;
grid-template-columns: repeat(3,1fr);
display: grid
}
.catalog-jump__link {
border-right: 1px solid #171a1d1f;
align-items: center;
gap: 18px;
min-height: 66px;
padding: 0 24px;
font-size: 17px;
font-weight: 600;
transition: color .18s,background .18s;
display: flex
}
.catalog-jump__link:last-child {
border-right: 0
}
.catalog-jump__link:hover {
color: var(--accent);
background: #ffffffa3
}
.catalog-jump__index {
color: #171a1d5c;
letter-spacing: .12em;
font-size: 17px
}
.catalog-section {
padding: clamp(68px,6vw,104px) 0;
scroll-margin-top: calc(78px + var(--header-navbar-height))
}
.catalog-section__heading {
grid-template-columns: minmax(0,1.15fr) minmax(320px,.52fr);
align-items: end;
gap: 60px;
margin-bottom: clamp(36px,3.8vw,56px);
display: grid
}
.catalog-section__title {
letter-spacing: -.058em;
max-width: 980px;
margin-top: 20px;
font-size: clamp(48px,5vw,82px);
font-weight: 500;
line-height: .95
}
.catalog-section__text {
color: #171a1d94;
font-size: 17px;
line-height: 1.55
}
.catalog-category-grid {
grid-auto-flow: dense;
grid-template-columns: repeat(4,minmax(0,1fr));
grid-auto-rows: minmax(290px,21vw);
gap: 14px;
display: grid
}
.catalog-category-card {
isolation: isolate;
background: #f2f4f7;
border-radius: 22px;
min-width: 0;
padding: clamp(20px,2vw,30px);
position: relative;
overflow: hidden
}
.catalog-category-card:before {
z-index: -1;
content: "";
background: linear-gradient(#ffffff7a,#0000 52%);
position: absolute;
inset: 0
}
.catalog-category-card--feature {
grid-area: span 2/span 2
}
.catalog-category-card--wide {
grid-column: span 2
}
.catalog-category-card--mint {
background: #d6ede4
}
.catalog-category-card--ice {
background: #e0eff2
}
.catalog-category-card--sky {
background: #dae5f4
}
.catalog-category-card--sand {
background: #ece2cf
}
.catalog-category-card--lilac {
background: #e6dded
}
.catalog-category-card--warm {
background: #efddcf
}
.catalog-category-card--pearl {
background: #e8eae8
}
.catalog-category-card--coral {
background: color-mix(in srgb, var(--accent-soft) 30%, #fff)
}
.catalog-category-card--salmon {
background: #fcbdac
}
.catalog-category-card--graphite,.catalog-category-card--night {
color: #fff;
background: #1d2225
}
.catalog-category-card__head {
z-index: 3;
color: #171a1d6e;
letter-spacing: .12em;
justify-content: space-between;
align-items: center;
font-size: 10px;
font-weight: 700;
display: flex;
position: relative
}
.catalog-category-card--graphite .catalog-category-card__head,.catalog-category-card--night .catalog-category-card__head {
color: #ffffff7a
}
.catalog-category-card__icon {
opacity: 0;
transition: opacity .18s,transform .22s;
transform: translate(-5px,5px)
}
.catalog-category-card__copy {
z-index: 3;
max-width: 72%;
position: absolute;
bottom: clamp(20px,2vw,30px);
left: clamp(20px,2vw,30px);
right: clamp(20px,2vw,30px)
}
.catalog-category-card__title {
letter-spacing: -.04em;
font-size: clamp(23px,2vw,34px);
font-weight: 500;
line-height: 1.02
}
.catalog-category-card__text {
color: #171a1d8c;
max-width: 480px;
margin-top: 10px;
font-size: 14px;
line-height: 1.4
}
.catalog-category-card--graphite .catalog-category-card__text,.catalog-category-card--night .catalog-category-card__text {
color: #ffffff8f
}
.catalog-category-card__image {
z-index: 1;
object-fit: contain;
object-position: right center;
mix-blend-mode: multiply;
width: 74%;
height: 72%;
transition: transform .45s cubic-bezier(.2,.72,.2,1);
position: absolute;
top: 8%;
right: -7%
}
.catalog-category-card--feature .catalog-category-card__image {
width: 89%;
height: 72%;
top: 7%;
right: -3%
}
.catalog-category-card--wide .catalog-category-card__image {
width: 52%;
height: 94%;
top: 2%;
right: -1%
}
.catalog-category-card--graphite .catalog-category-card__image,.catalog-category-card--night .catalog-category-card__image {
mix-blend-mode: normal
}
.catalog-category-card:hover .catalog-category-card__image {
transform: translateY(-7px)scale(1.035)
}
.catalog-category-card:hover .catalog-category-card__icon {
opacity: 1;
transform: translate(0)
}
/* Карточки категорий сведены к одному классическому серому: цветные тона
остаются в разметке и в админке, но на витрине не различаются — иначе плитка
рассыпается на разноцветные пятна. Тёмные тона заодно возвращают тёмный текст. */
.catalog-category-card,.catalog-category-card--mint,.catalog-category-card--ice,.catalog-category-card--sky,.catalog-category-card--sand,.catalog-category-card--lilac,.catalog-category-card--warm,.catalog-category-card--pearl,.catalog-category-card--coral,.catalog-category-card--salmon,.catalog-category-card--graphite,.catalog-category-card--night {
color: var(--ink);
background: #e8eaec
}
.catalog-category-card--graphite .catalog-category-card__head,.catalog-category-card--night .catalog-category-card__head {
color: #171a1d6e
}
.catalog-category-card--graphite .catalog-category-card__text,.catalog-category-card--night .catalog-category-card__text {
color: #171a1d8c
}
.catalog-category-card--graphite .catalog-category-card__image,.catalog-category-card--night .catalog-category-card__image {
mix-blend-mode: multiply
}
.catalog-section--themes {
color: #fff;
background: #181d20
}
.catalog-eyebrow--light {
color: #ffffff80
}
.catalog-section__heading--light .catalog-section__text {
color: #ffffff85
}
.catalog-theme-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
grid-auto-rows: minmax(300px,22vw);
gap: 12px;
display: grid
}
.catalog-theme-card {
background: #ffffff0b;
border: 1px solid #ffffff1a;
border-radius: 20px;
padding: 24px;
position: relative;
overflow: hidden
}
.catalog-theme-card--lead {
grid-column: span 2
}
.catalog-theme-card__index {
z-index: 2;
color: #ffffff61;
letter-spacing: .12em;
font-size: 10px;
position: relative
}
.catalog-theme-card__image {
object-fit: contain;
width: 86%;
height: 80%;
transition: transform .42s cubic-bezier(.2,.72,.2,1);
position: absolute;
top: 5%;
right: -8%
}
.catalog-theme-card--lead .catalog-theme-card__image {
width: 68%;
right: -1%
}
.catalog-theme-card__title {
z-index: 2;
letter-spacing: -.04em;
font-size: clamp(25px,2.1vw,36px);
font-weight: 500;
position: absolute;
bottom: 23px;
left: 24px;
right: 24px
}
.catalog-theme-card__arrow {
z-index: 3;
color: var(--accent);
opacity: 0;
transition: opacity .18s,transform .22s;
position: absolute;
bottom: 25px;
right: 24px;
transform: translate(-5px,5px)
}
.catalog-theme-card:hover {
border-color: color-mix(in srgb, var(--accent) 42%, transparent)
}
.catalog-theme-card:hover .catalog-theme-card__image {
transform: translateY(-5px)scale(1.035)
}
.catalog-theme-card:hover .catalog-theme-card__arrow {
opacity: 1;
transform: translate(0)
}
.catalog-section--blanks {
background: #f6f7f7
}
.catalog-blank-grid {
border-top: 1px solid #171a1d24;
border-left: 1px solid #171a1d24;
grid-template-columns: repeat(3,minmax(0,1fr));
display: grid
}
.catalog-blank-card {
background: #ffffff52;
border-bottom: 1px solid #171a1d24;
border-right: 1px solid #171a1d24;
min-height: 230px;
padding: 22px;
transition: background .18s;
position: relative;
overflow: hidden
}
.catalog-blank-card:hover {
background: #fff
}
.catalog-blank-card__index {
color: #171a1d59;
letter-spacing: .12em;
font-size: 25px
}
.catalog-blank-card__image {
object-fit: contain;
mix-blend-mode: multiply;
width: 52%;
height: 78%;
transition: transform .34s;
position: absolute;
top: 4%;
right: 3%
}
.catalog-blank-card:hover .catalog-blank-card__image {
transform: translateY(-4px)scale(1.035)
}
.catalog-blank-card__title {
letter-spacing: -.035em;
max-width: 56%;
font-size: clamp(21px,1.7vw,29px);
font-weight: 500;
line-height: 1.05;
position: absolute;
bottom: 22px;
left: 22px;
right: 22px
}
.catalog-cta {
color: #fff;
background: var(--accent);
padding: clamp(68px,6vw,104px) 0
}
.catalog-cta__inner {
grid-template-columns: minmax(0,1fr) auto;
align-items: end;
gap: 60px;
display: grid
}
.catalog-cta .catalog-eyebrow--light {
color: #ffffffad
}
.catalog-cta .catalog-eyebrow__mark {
background: #fff
}
.catalog-cta__title {
letter-spacing: -.06em;
max-width: 1160px;
margin-top: 24px;
font-size: clamp(48px,6vw,96px);
font-weight: 500;
line-height: .93
}
.catalog-cta__title .heading-accent {
color: #171a1d
}
.catalog-cta__link {
color: #fff;
white-space: nowrap;
background: #171a1d;
border-radius: 999px;
align-items: center;
gap: 15px;
min-height: 58px;
padding: 0 22px;
font-size: 15px;
font-weight: 650;
transition: color .18s,background .18s,transform .18s;
display: inline-flex
}
.catalog-cta__link:hover {
color: #171a1d;
background: #fff;
transform: translateY(-2px)
}
@media (width<=1180px) {
.catalog-hero__inner {
grid-template-columns: minmax(0,1fr) minmax(380px,.78fr)
}
.catalog-category-grid,.catalog-theme-grid {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.catalog-category-card--feature {
grid-column: span 2
}
}
@media (width<=860px) {
.catalog-hero__inner {
grid-template-columns: 1fr;
min-height: auto
}
.catalog-hero__stage {
min-height: 410px
}
.catalog-section__heading,.catalog-cta__inner {
grid-template-columns: 1fr;
align-items: start;
gap: 28px
}
.catalog-section__text {
max-width: 660px
}
.catalog-category-grid,.catalog-theme-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
grid-auto-rows: 300px
}
.catalog-blank-grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media (width<=600px) {
.catalog-hero__inner {
gap: 34px;
padding-top: 48px
}
.catalog-hero__title {
font-size: clamp(40px,11vw,54px)
}
.catalog-hero__stage {
border-radius: 22px;
min-height: 300px
}
.catalog-jump {
grid-template-columns: 1fr
}
.catalog-jump__link {
border-bottom: 1px solid #171a1d1f;
border-right: 0;
min-height: 60px;
padding: 0 8px
}
.catalog-jump__link:last-child {
border-bottom: 0
}
.catalog-section__title,.catalog-cta__title {
font-size: clamp(42px,13vw,60px)
}
.catalog-section {
padding: 58px 0
}
.catalog-section__heading {
margin-bottom: 36px
}
.catalog-cta {
padding: 64px 0
}
.catalog-category-grid,.catalog-theme-grid,.catalog-blank-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
display: grid
}
.catalog-category-card,.catalog-category-card--feature,.catalog-category-card--wide,.catalog-theme-card,.catalog-theme-card--lead {
grid-area: auto;
min-height: 360px
}
.catalog-category-card__copy {
max-width: 86%
}
.catalog-category-card__image,.catalog-category-card--feature .catalog-category-card__image,.catalog-category-card--wide .catalog-category-card__image {
width: 78%;
height: 74%;
top: 3%;
right: -5%
}
.catalog-theme-card--lead .catalog-theme-card__image {
width: 88%
}
.catalog-blank-card {
min-height: 210px
}
}
html[data-theme=dark] .catalog-page {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] .catalog-hero,html[data-theme=dark] .catalog-section--blanks {
background: #1f2528
}
html[data-theme=dark] :where(.catalog-eyebrow,.catalog-hero__text,.catalog-section__text) {
color: var(--muted)
}
html[data-theme=dark] .catalog-jump,html[data-theme=dark] .catalog-jump__link,html[data-theme=dark] .catalog-blank-grid,html[data-theme=dark] .catalog-blank-card {
border-color: #ffffff21
}
html[data-theme=dark] .catalog-jump__link:hover,html[data-theme=dark] .catalog-blank-card:hover {
background: #ffffff0f
}
html[data-theme=dark] .catalog-jump__index,html[data-theme=dark] .catalog-blank-card__index {
color: #ffffff61
}
html[data-theme=dark] .catalog-blank-card {
background: #ffffff06
}
html[data-theme=dark] .catalog-blank-card__image {
mix-blend-mode: normal
}
@media (prefers-reduced-motion:reduce) {
.catalog-page *,.catalog-page :before,.catalog-page :after {
scroll-behavior: auto!important;
transition-duration: .01ms!important
}
}
.company-page {
--inner-section-space: clamp(68px, 6vw, 104px);
--inner-heading-gap: clamp(36px, 3.8vw, 56px)
}
.company-page :is(.company-section,.company-cta,.contact-brief,.factory-process,.factory-inside,.factory-quality,.factory-cta,.reviews-testimonials,.reviews-feedback,.reviews-projects,.reviews-clients,.reviews-cta,.feed-archive) {
padding-top: var(--inner-section-space);
padding-bottom: var(--inner-section-space)
}
.company-page :is(.company-expertise,.factory-steps,.reviews-feedback__grid) {
margin-top: var(--inner-heading-gap)
}
.company-page :is(.reviews-testimonials__head,.reviews-projects__head,.reviews-section-head--clients) {
margin-bottom: var(--inner-heading-gap)
}
.company-page .company-section--contact-cards {
padding-top: 36px
}
.company-page .company-hero {
/* Отбивка шапки плюс воздух: без него крошки прилипали к её нижнему краю. */
padding-top: calc(112px + var(--header-navbar-height) + clamp(18px,1.8vw,28px))
}
.company-page .company-hero__grid {
min-height: 0;
padding-top: clamp(42px,4.5vw,68px)
}
.company-page .company-hero__copy {
min-height: 0;
padding-bottom: clamp(42px,4vw,60px)
}
.company-page .company-hero__title,.company-page .contact-hero__title,.company-page .factory-hero__title,.company-page .reviews-hero__title,.company-page .feed-page-hero__title {
letter-spacing: -.052em;
font-size: clamp(44px,4.4vw,74px);
line-height: .96
}
.company-page .company-hero__art {
min-height: clamp(360px,34vw,480px)
}
.company-page .company-stats__item {
min-height: 118px;
padding-top: 22px;
padding-bottom: 22px
}
.company-page .contact-hero {
padding: calc(112px + var(--header-navbar-height) + clamp(42px,4.5vw,68px)) 0 clamp(48px,5vw,76px)
}
.company-page .factory-hero {
padding: calc(112px + var(--header-navbar-height) + clamp(42px,4.5vw,68px)) 0 28px
}
.company-page .factory-hero__head {
margin-bottom: var(--inner-heading-gap)
}
.company-page .factory-hero__media {
height: clamp(340px,34vw,460px)
}
.company-page .reviews-hero {
padding: calc(112px + var(--header-navbar-height) + clamp(42px,4.5vw,68px)) 0 clamp(48px,5vw,76px)
}
.company-page .reviews-hero__grid {
min-height: 0
}
.company-page .reviews-hero__visual {
min-height: clamp(380px,36vw,480px)
}
.company-page .feed-page-hero {
padding: calc(112px + var(--header-navbar-height) + clamp(42px,4.5vw,68px)) 0 clamp(48px,5vw,76px)
}
.company-page :is(.company-section__title,.company-cta__title,.contact-brief__title,.contact-location__title,.factory-process__title,.factory-inside__title,.factory-quality__title,.factory-cta__title,.reviews-section-head__title,.reviews-projects__title,.reviews-cta__title,.feed-page-cta__title) {
font-size: clamp(42px,4.8vw,78px);
line-height: .97
}
@media (width<=620px) {
.company-page {
--inner-section-space: 58px;
--inner-heading-gap: 36px
}
.company-page .company-hero,.company-page .contact-hero,.company-page .factory-hero,.company-page .reviews-hero,.company-page .feed-page-hero {
padding-top: 132px
}
.company-page .company-hero__grid {
padding-top: 34px
}
.company-page .company-hero__title,.company-page .contact-hero__title,.company-page .factory-hero__title,.company-page .reviews-hero__title,.company-page .feed-page-hero__title {
font-size: clamp(40px,11vw,54px);
line-height: .98
}
.company-page .company-hero__art,.company-page .factory-hero__media,.company-page .reviews-hero__visual {
height: 340px;
min-height: 340px
}
.company-page .reviews-hero__grid {
gap: 36px
}
.company-page :is(.company-section__title,.company-cta__title,.contact-brief__title,.contact-location__title,.factory-process__title,.factory-inside__title,.factory-quality__title,.factory-cta__title,.reviews-section-head__title,.reviews-projects__title,.reviews-cta__title,.feed-page-cta__title) {
font-size: clamp(36px,10.5vw,52px);
line-height: 1
}
}
.site-header__theme-toggle {
color: #171a1d6b;
cursor: pointer;
background: 0 0;
border: 0;
justify-content: center;
align-items: center;
gap: 5px;
min-width: 64px;
height: 24px;
padding: 0;
display: inline-flex
}
.site-header__theme-track {
background: #171a1d12;
border: 1px solid #171a1d33;
border-radius: 999px;
flex: none;
width: 30px;
height: 17px;
transition: border-color .22s,background .22s;
display: block;
position: relative
}
.site-header__theme-track i {
background: var(--accent);
border-radius: 50%;
width: 11px;
height: 11px;
transition: transform .26s cubic-bezier(.2,.72,.2,1),background .22s;
position: absolute;
top: 2px;
left: 2px;
box-shadow: 0 2px 7px #171a1d33
}
.site-header__theme-icon {
flex: none;
width: 16px;
height: 16px;
transition: color .18s,opacity .18s
}
.site-header__theme-icon--sun {
color: var(--accent);
opacity: 1;
width: 16px;
height: 16px
}
.site-header__theme-icon--moon {
opacity: .48
}
.site-header__theme-toggle:focus-visible {
outline-offset: 3px;
border-radius: 999px;
outline: 2px solid var(--accent)
}
.site-header__theme-toggle:disabled {
cursor: wait
}
html:after {
z-index: 1000;
content: "";
opacity: 0;
visibility: hidden;
pointer-events: none;
background: #f2f4f7;
position: fixed;
inset: 0
}
html.theme-to-dark:after {
background: #15191b
}
html.theme-to-light:after {
background: #f2f4f7
}
html.theme-switching:after {
visibility: visible;
animation: .36s cubic-bezier(.4,0,.2,1) both theme-screen-crossfade
}
html.theme-switching body,html.theme-switching body *,html.theme-switching body :before,html.theme-switching body :after {
transition: none!important
}
@keyframes theme-screen-crossfade {
0% {
opacity: 0
}
37%,58% {
opacity: 1
}
to {
opacity: 0
}
}
:root[data-theme=dark] {
--milk: #15191b;
--paper: #202529;
--ink: #f5f7f8;
--muted: #9ca3a6;
--line: #ffffff24;
--aqua: #8fe7ef;
--aqua-strong: #52d5e2;
--aqua-deep: #8fe7ef;
--coral: var(--accent-soft);
--graphite: #101416;
--shadow: 0 24px 70px #00000057;
--lightningcss-light: ;
--lightningcss-dark: initial;
color-scheme: dark
}
html[data-theme=dark] body,html[data-theme=dark] .page,html[data-theme=dark] .company-page {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] ::selection {
color: #111719;
background: var(--aqua)
}
html[data-theme=dark] .site-header {
color: var(--ink);
background: #15191bf5;
border-bottom-color: #ffffff14;
box-shadow: 0 1px #ffffff14
}
html[data-theme=dark] .site-header--scrolled {
border-bottom-color: #0000;
box-shadow: 0 9px 28px #00000052,0 1px #ffffff14
}
html[data-theme=dark] .site-header__topbar {
color: var(--ink);
background: #101416;
border-color: #ffffff14
}
html[data-theme=dark] .site-header__topbar-hours,html[data-theme=dark] .site-header__series-menu-count,html[data-theme=dark] .site-header__series-menu-index,html[data-theme=dark] .site-header__catalog-eyebrow,html[data-theme=dark] .site-header__catalog-highlight-caption,html[data-theme=dark] .site-header__search-meta-label,html[data-theme=dark] .site-header__search-result-category {
color: #f5f7f885
}
html[data-theme=dark] .site-header__topbar-label,html[data-theme=dark] .site-header__search-input,html[data-theme=dark] .site-header__search-result-title,html[data-theme=dark] .site-header__series-menu-all,html[data-theme=dark] .site-header__series-menu-custom {
color: var(--ink)
}
html[data-theme=dark] .site-header__theme-toggle {
color: #f5f7f875
}
html[data-theme=dark] .site-header__theme-track {
background: #8fe7ef21;
border-color: #8fe7ef6b
}
html[data-theme=dark] .site-header__theme-track i {
background: var(--aqua);
transform: translate(13px)
}
html[data-theme=dark] .site-header__theme-icon--sun {
color: inherit;
opacity: .42
}
html[data-theme=dark] .site-header__theme-icon--moon {
color: var(--aqua);
opacity: 1
}
html[data-theme=dark] .site-header__theme-toggle:focus-visible {
outline-color: var(--aqua)
}
html[data-theme=dark] .site-header__search-form,html[data-theme=dark] .site-header__search-panel,html[data-theme=dark] .site-header__series-menu,html[data-theme=dark] .site-header__catalog-dropdown,html[data-theme=dark] .site-header__catalog-main,html[data-theme=dark] .site-header__nav--open {
color: var(--ink);
background: #202529;
border-color: #ffffff1c
}
html[data-theme=dark] .site-header__catalog-rail {
background: #181d1f
}
html[data-theme=dark] .site-header__catalog-rail-link {
color: #f5f7f8b3
}
html[data-theme=dark] .site-header__catalog-rail-link:hover,html[data-theme=dark] .site-header__catalog-rail-link--active,html[data-theme=dark] .site-header__series-menu-link:hover,html[data-theme=dark] .site-header__search-result-link:hover {
color: var(--ink);
background: #2a3033
}
html[data-theme=dark] .site-header__catalog-highlight,html[data-theme=dark] .site-header__catalog-icon,html[data-theme=dark] .site-header__search-meta-key,html[data-theme=dark] .site-header__search-result-icon {
color: var(--ink);
background: #292f32;
border-color: #ffffff1a
}
html[data-theme=dark] .site-header__catalog-group-title,html[data-theme=dark] .site-header__catalog-link,html[data-theme=dark] .site-header__catalog-heading-link,html[data-theme=dark] .site-header__catalog-highlight-title {
color: var(--ink)
}
html[data-theme=dark] .site-header__catalog-link,html[data-theme=dark] .site-header__series-menu-all,html[data-theme=dark] .site-header__series-menu-custom {
border-color: #ffffff1a
}
html[data-theme=dark] .site-header__cta {
border-color: #ffffff33
}
html[data-theme=dark] .site-header__catalog-toggle {
color: #101719;
background: var(--aqua-strong)
}
html[data-theme=dark] .site-header__catalog-toggle:hover {
box-shadow: 0 10px 26px #52d5e238
}
html[data-theme=dark] .site-header__nav-link:after,html[data-theme=dark] .site-footer__nav-link:after {
background: var(--aqua)
}
html[data-theme=dark] .site-search-backdrop {
background: #04070880
}
html[data-theme=dark] .site-loader {
color: #171a1d;
background: #f2f4f7
}
.sr-only {
clip: rect(0px, 0px, 0px, 0px);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden
}
.live-feed__head {
align-items: start
}
.live-feed__head-aside {
flex-direction: column;
align-items: flex-end;
}
.live-feed__all-link {
width: max-content;
color: var(--ink);
border-bottom: 1px solid #171a1d38;
align-items: center;
gap: 12px;
margin-top: 18px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 650;
transition: color .18s,border-color .18s;
display: inline-flex
}
.live-feed__all-link:hover {
color: var(--accent-alt);
border-color: currentColor
}
.feed-page-hero {
color: #1b1f22;
background: #f2f4f7;
padding: clamp(54px,6vw,92px) 0 clamp(56px,6vw,88px)
}
.feed-page-hero__edition {
color: #5b6166;
font-size: 13px
}
.feed-page-hero__grid {
grid-template-columns: minmax(0,.45fr) minmax(300px,.55fr);
align-items: start;
gap: clamp(48px,7vw,120px);
display: grid
}
.feed-page-hero__title {
letter-spacing: -.06em;
margin: 0;
font-size: clamp(56px,6vw,104px);
font-weight: 500;
line-height: .92
}
.feed-page-hero__title .heading-accent {
color: var(--accent-alt)
}
.feed-page-hero__intro {
max-width: 560px
}
.feed-page-hero__text {
color: #4a5054;
margin: 0;
font-size: clamp(18px,1.42vw,23px);
line-height: 1.48
}
.feed-page-hero__link {
border-bottom: 1px solid #1b1f224d;
align-items: center;
gap: 14px;
margin-top: 34px;
padding-bottom: 6px;
font-size: 14px;
font-weight: 650;
display: inline-flex
}
.feed-archive {
background: #fff;
padding: clamp(72px,7vw,112px) 0 clamp(92px,9vw,148px)
}
/* Страница публикации: одна колонка, обложка обычной картинкой, а не плиткой. */
/* Заглушка карточки ленты на время смены категории. */
.feed-story--skeleton .feed-story__media,
.feed-story__skeleton-line {
background: linear-gradient(90deg,#f4f5f7 0%,#fafbfc 50%,#f4f5f7 100%);
background-size: 200% 100%;
animation: product-tile-skeleton 1.4s ease-in-out infinite
}
.feed-story--skeleton .feed-story__media {
aspect-ratio: 3/2;
border-radius: 20px
}
.feed-story__skeleton-line {
border-radius: 6px;
height: 13px;
display: block
}
.feed-story__skeleton-line--meta {
width: 42%
}
.feed-story__skeleton-line--title {
margin-top: 12px;
height: 22px;
width: 82%
}
.feed-story__skeleton-line--text {
margin-top: 12px;
height: 34px
}
html[data-theme=dark] .feed-story--skeleton .feed-story__media,
html[data-theme=dark] .feed-story__skeleton-line {
background-image: linear-gradient(90deg,#ffffff0a 0%,#ffffff16 50%,#ffffff0a 100%)
}
@media (prefers-reduced-motion: reduce) {
.feed-story--skeleton .feed-story__media,
.feed-story__skeleton-line {
animation: none
}
}
.feed-post {
max-width: 820px;
margin: 0 auto
}
.feed-post__cover {
border-radius: 24px;
margin: 0 0 clamp(28px,3vw,44px);
overflow: hidden
}
.feed-post__cover img {
object-fit: cover;
width: 100%;
max-height: 460px;
display: block
}
.feed-post__body {
color: #3f4448;
font-size: 18px;
line-height: 1.62
}
.feed-post__body p {
margin: 0 0 18px
}
.feed-post__body p:last-child {
margin-bottom: 0
}
.feed-post__heading {
color: var(--ink);
letter-spacing: -.03em;
margin: 34px 0 14px;
font-size: clamp(22px,2.2vw,30px);
font-weight: 500;
line-height: 1.15
}
.feed-post__list {
margin: 0 0 18px;
padding-left: 22px;
list-style: disc
}
.feed-post__list li {
margin-bottom: 8px
}
.feed-post__footer {
border-top: 1px solid #1b1f2214;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-top: clamp(34px,4vw,52px);
padding-top: 22px;
display: flex
}
.feed-post__tags {
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
display: flex
}
.feed-post__tag {
color: #404549;
border: 1px solid #1b1f221f;
border-radius: 999px;
padding: 7px 14px;
font-size: 14px
}
.feed-post__back {
margin-top: 0
}
html[data-theme=dark] .feed-post__body {
color: #f5f7f8bd
}
html[data-theme=dark] .feed-post__tag {
color: #f5f7f8bd;
border-color: #ffffff26
}
html[data-theme=dark] .feed-post__footer {
border-color: #ffffff1f
}
.feed-controls {
background: #f2f4f7;
border-radius: 28px;
padding: 26px
}
.feed-controls__header {
grid-template-columns: minmax(260px,1fr) minmax(320px,.72fr);
align-items: end;
gap: 48px;
display: grid
}
.feed-controls__summary {
align-items: center;
gap: 18px;
display: flex
}
.feed-controls__label {
letter-spacing: -.035em;
font-size: clamp(25px,2vw,34px);
font-weight: 550
}
.feed-controls__count {
color: #6f7477;
letter-spacing: .06em;
text-transform: uppercase;
font-size: 13px;
font-weight: 600
}
.feed-search {
color: #5b6166;
background: #fff;
border: 1px solid #1b1f221c;
border-radius: 15px;
grid-template-columns: auto minmax(0,1fr) auto;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 0 18px;
transition: border-color .18s,box-shadow .18s;
display: grid
}
.feed-search:focus-within {
border-color: color-mix(in srgb, var(--accent-alt) 70%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-alt) 9%, transparent)
}
.feed-search__input {
color: #1b1f22;
background: 0 0;
border: 0;
outline: 0;
width: 100%;
min-width: 0
}
.feed-search__input::placeholder {
color: #83888b
}
.feed-search__clear {
color: #5b6166;
cursor: pointer;
background: #f2f4f7;
border: 0;
border-radius: 50%;
place-items: center;
width: 30px;
height: 30px;
display: grid
}
.feed-filters {
scrollbar-width: none;
align-items: center;
gap: 8px;
margin-top: 24px;
display: flex;
overflow-x: auto
}
.feed-filters::-webkit-scrollbar {
display: none
}
.feed-filter {
color: #404549;
cursor: pointer;
background: 0 0;
border: 1px solid #1b1f221f;
border-radius: 999px;
flex: none;
min-height: 40px;
padding: 0 17px;
font-size: 16px;
transition: color .18s,border-color .18s,background .18s
}
.feed-filter:hover,.feed-filter--active {
color: #fff;
background: #1b1f22;
border-color: #1b1f22
}
.feed-results {
margin-top: 28px
}
.feed-featured {
background: #f2f4f7;
border-radius: 32px;
grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr);
min-height: 540px;
display: grid;
position: relative;
overflow: hidden
}
.feed-featured__media {
background: #e5e9ec;
min-height: 540px;
position: relative;
overflow: hidden
}
.feed-featured__image {
object-fit: contain;
filter: drop-shadow(0 28px 24px #12191c2e);
width: 100%;
height: 100%;
padding: clamp(28px,4vw,64px);
transition: transform .5s cubic-bezier(.2,.72,.2,1)
}
.feed-featured__badge {
color: #fff;
letter-spacing: .08em;
text-transform: uppercase;
background: #1b1f22;
border-radius: 9px;
padding: 8px 11px;
font-size: 12px;
font-weight: 650;
position: absolute;
top: 22px;
left: 22px
}
.feed-featured__copy {
flex-direction: column;
justify-content: space-between;
gap: 48px;
padding: clamp(34px,4vw,66px);
display: flex
}
.feed-story__meta {
justify-content: space-between;
align-items: center;
gap: 24px;
display: flex
}
.feed-story__category {
color: var(--accent-alt);
letter-spacing: .1em;
text-transform: uppercase;
font-size: 13px;
font-weight: 650
}
.feed-story__date {
color: #6f7477;
white-space: nowrap;
font-size: 13px
}
.feed-featured__title {
letter-spacing: -.058em;
max-width: 650px;
margin: 0 0 22px;
font-size: clamp(42px,4vw,70px);
font-weight: 500;
line-height: .98
}
.feed-featured__text {
color: #5b6166;
max-width: 620px;
margin: 0;
font-size: clamp(16px,1.22vw,20px)
}
.feed-featured__link,.feed-story__link {
border-bottom: 1px solid #1b1f2240;
align-items: center;
gap: 12px;
width: max-content;
padding-bottom: 5px;
font-size: 14px;
font-weight: 650;
transition: color .18s,border-color .18s;
display: inline-flex
}
.feed-featured__link:hover,.feed-story__link:hover {
color: var(--accent-alt);
border-color: currentColor
}
.feed-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px;
margin-top: 18px;
display: grid
}
.feed-story {
background: #f2f4f7;
border-radius: 28px;
grid-template-columns: minmax(190px,.72fr) minmax(0,1.28fr);
min-height: 390px;
display: grid;
position: relative;
overflow: hidden
}
/* Кликабельна вся карточка: ссылка-подложка накрывает её целиком, а настоящие
ссылки — заголовок и «читать публикацию» — поднимаются над ней. Так поиск
по-прежнему видит осмысленные ссылки, с клавиатуры ходят по ним же, а клик по
пустому месту всё равно открывает публикацию. */
.feed-card__overlay-link {
z-index: 3;
border-radius: inherit;
position: absolute;
inset: 0
}
.feed-story__title a,.feed-story__link,.feed-featured__title a,.feed-featured__link {
z-index: 4;
position: relative
}
.feed-story,.feed-featured {
cursor: pointer
}
.feed-story__media {
background: #e7eaed;
min-height: 100%;
position: relative;
overflow: hidden
}
.feed-story__image {
object-fit: contain;
width: 100%;
height: 100%;
padding: 22px;
transition: transform .45s cubic-bezier(.2,.72,.2,1)
}
.feed-story__copy {
flex-direction: column;
min-width: 0;
padding: 28px;
display: flex
}
.feed-story__title {
letter-spacing: -.045em;
margin: auto 0 14px;
font-size: clamp(28px,2.15vw,40px);
font-weight: 500;
line-height: 1.04
}
.feed-story__text {
color: #5b6166;
margin: 0 0 30px;
font-size: 17px;
line-height: 1.5
}
.feed-story__link {
margin-top: auto
}
.feed-empty {
text-align: center;
background: #f2f4f7;
border-radius: 30px;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 420px;
margin-top: 28px;
padding: 52px 24px;
display: flex
}
.feed-empty__label {
color: var(--accent-alt);
letter-spacing: .1em;
text-transform: uppercase;
font-size: 11px;
font-weight: 650
}
.feed-empty__title {
letter-spacing: -.05em;
max-width: 680px;
margin: 20px auto 30px;
font-size: clamp(32px,3.4vw,54px);
font-weight: 500;
line-height: 1.05
}
.feed-empty__reset {
color: #fff;
cursor: pointer;
background: #1b1f22;
border: 0;
border-radius: 12px;
min-height: 50px;
padding: 0 20px;
font-size: 14px;
font-weight: 650
}
.feed-page-cta {
color: #fff;
background: var(--accent-alt);
border-radius: 34px;
margin: 0 24px 24px;
padding: clamp(56px,6vw,88px) 0
}
/* На странице публикации внутри блока просто три элемента подряд: без
заданных промежутков они слипались, а секция набирала лишнюю высоту. */
.feed-page-cta > .company-shell {
flex-direction: column;
align-items: flex-start;
gap: 18px;
display: flex
}
.feed-page-cta > .company-shell .feed-page-cta__title {
margin: 0
}
.feed-page-cta > .company-shell .company-button {
margin-top: 6px
}
.feed-page-cta__inner {
grid-template-columns: minmax(180px,.44fr) minmax(420px,.92fr) minmax(320px,.64fr);
align-items: end;
gap: clamp(36px,6vw,96px);
display: grid
}
.feed-page-cta__title {
letter-spacing: -.062em;
margin: 0;
font-size: clamp(52px,5.5vw,92px);
font-weight: 500;
line-height: .9
}
.feed-page-cta__title .heading-accent {
color: #fff
}
.feed-page-cta__text {
color: #ffffffc7;
margin: 0 0 30px;
font-size: 17px
}
@media (hover: hover) and (pointer:fine) {
.feed-featured:hover .feed-featured__image,.feed-story:hover .feed-story__image {
transform:scale(1.035)rotate(.6deg)
}
}
@media (width<=1200px) {
.feed-page-hero__title {
font-size: clamp(82px,12vw,142px)
}
.feed-featured {
grid-template-columns: minmax(0,1fr) minmax(360px,.86fr)
}
.feed-story {
grid-template-columns: 1fr
}
.feed-story__media {
min-height: 290px
}
.feed-story__copy {
min-height: 340px
}
.feed-page-cta__inner {
grid-template-columns: .38fr 1fr
}
.feed-page-cta__action {
grid-column: 2
}
}
@media (width<=900px) {
.live-feed__head-aside {
align-items: flex-start
}
.live-feed__all-link {
margin-top: -4px
}
.feed-page-hero__edition {
text-align: right;
max-width: 260px
}
.feed-page-hero__grid {
grid-template-columns: 1fr;
align-items: start;
gap: 48px
}
.feed-page-hero__title {
font-size: clamp(84px,18vw,150px)
}
.feed-controls__header {
grid-template-columns: 1fr;
gap: 22px
}
.feed-featured {
grid-template-columns: 1fr
}
.feed-featured__media {
min-height: 440px
}
.feed-grid {
grid-template-columns: 1fr
}
.feed-story {
grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr)
}
.feed-story__media {
min-height: 100%
}
.feed-story__copy {
min-height: 380px
}
.feed-page-cta__inner {
grid-template-columns: 1fr;
align-items: start
}
.feed-page-cta__action {
grid-column: auto;
max-width: 580px
}
}
@media (width<=600px) {
.feed-page-hero {
padding: 34px 0 72px
}
.feed-page-hero__edition {
text-align: left;
max-width: none;
margin-top: 14px;
display: block
}
.feed-page-hero__grid {
gap: 36px;
padding-top: 48px
}
.feed-page-hero__title {
font-size: clamp(68px,24vw,104px);
line-height: .78
}
.feed-page-hero__text {
font-size: 17px
}
.feed-archive {
padding: 62px 0 84px
}
.feed-controls {
border-radius: 22px;
padding: 18px
}
.feed-controls__summary {
display: block
}
.feed-controls__count {
margin-top: 5px;
display: block
}
.feed-filters {
width: calc(100% + 36px);
margin-left: -18px;
margin-right: -18px;
padding: 0 18px
}
.feed-featured {
border-radius: 24px;
min-height: 0
}
.feed-featured__media {
min-height: 330px
}
.feed-featured__copy {
gap: 36px;
padding: 28px 22px 30px
}
.feed-story__meta {
align-items: flex-start
}
.feed-featured__title {
font-size: clamp(36px,11vw,48px)
}
.feed-story {
border-radius: 24px;
grid-template-columns: 1fr
}
.feed-story__media {
min-height: 270px
}
.feed-story__copy {
min-height: 330px;
padding: 24px 22px
}
.feed-story__title {
font-size: 31px
}
.feed-page-cta {
border-radius: 26px;
margin: 0 12px 12px;
padding: 68px 0
}
.feed-page-cta__title {
font-size: clamp(46px,14vw,64px)
}
}
html[data-theme=dark] .live-feed__all-link {
color: var(--ink);
border-color: #f5f7f83d
}
html[data-theme=dark] :where(.feed-page-hero,.feed-controls,.feed-featured,.feed-story,.feed-empty) {
color: var(--ink);
background: #1b2023
}
html[data-theme=dark] .feed-archive {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] :where(.feed-page-hero__edition,.feed-page-hero__text,.feed-controls__count,.feed-featured__text,.feed-story__text,.feed-story__date) {
color: var(--muted)
}
html[data-theme=dark] .feed-page-hero__title .heading-accent,html[data-theme=dark] .feed-story__category {
color: var(--aqua)
}
html[data-theme=dark] .feed-page-hero__link,html[data-theme=dark] .feed-featured__link,html[data-theme=dark] .feed-story__link {
color: var(--ink);
border-color: #f5f7f83d
}
html[data-theme=dark] .feed-search {
color: var(--muted);
background: #252b2e;
border-color: #ffffff1f
}
html[data-theme=dark] .feed-search:focus-within {
border-color: #8fe7efa8;
box-shadow: 0 0 0 4px #8fe7ef14
}
html[data-theme=dark] .feed-search__input {
color: var(--ink)
}
html[data-theme=dark] .feed-search__clear {
color: var(--muted);
background: #30373a
}
html[data-theme=dark] .feed-filter {
color: #f5f7f8b8;
border-color: #ffffff29
}
html[data-theme=dark] .feed-filter:hover,html[data-theme=dark] .feed-filter--active {
border-color: var(--aqua);
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] :where(.feed-featured__media,.feed-story__media) {
background: #252b2e
}
html[data-theme=dark] .feed-featured__badge {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .feed-empty__label {
color: var(--aqua)
}
html[data-theme=dark] .feed-empty__reset {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .feed-page-cta {
color: var(--ink);
background: #101416
}
html[data-theme=dark] .feed-page-cta__title .heading-accent {
color: var(--aqua)
}
html[data-theme=dark] .feed-page-cta__text {
color: var(--muted)
}
html[data-theme=dark] .pricing__grid .pricing__card--blue {
color: var(--ink);
background: linear-gradient(145deg,color-mix(in srgb, var(--accent-soft) 9%, transparent),#0000 42%),#2a3033;
border-color: color-mix(in srgb, var(--accent-soft) 34%, transparent);
box-shadow: inset 0 3px color-mix(in srgb, var(--accent-soft) 82%, transparent),0 20px 52px #0000001f
}
html[data-theme=dark] .pricing__card--blue :where(.pricing__title,.pricing__action,.pricing__action-arrow) {
color: var(--ink)
}
html[data-theme=dark] .pricing__card--blue .pricing__text {
color: var(--muted)
}
html[data-theme=dark] .pricing__card--blue .pricing__symbol {
color: #fff;
background: var(--coral)
}
html[data-theme=dark] .pricing__card--blue .pricing__action {
border-color: #ffffff24
}
html[data-theme=dark] .ai .eyebrow__mark,html[data-theme=dark] .ai__avatar,html[data-theme=dark] .ai__message--user,html[data-theme=dark] .ai .button--aqua,html[data-theme=dark] .ai__input-submit {
color: #fff;
background: var(--coral)
}
html[data-theme=dark] .ai__avatar-glyph,html[data-theme=dark] .ai__avatar i {
border-color: #fff
}
html[data-theme=dark] .ai__panel {
box-shadow: 0 36px 84px #0000003d,0 0 0 1px color-mix(in srgb, var(--accent-soft) 4%, transparent)
}
html[data-theme=dark] .site-footer .site-footer__contact-item,html[data-theme=dark] .site-footer .site-footer__contact-item .site-footer__contact-text {
color: #f5f7f8ad
}
html[data-theme=dark] .contact-card__value {
color: var(--ink)
}
html[data-theme=dark] .site-loader__progress {
background: #171a1d1a
}
html[data-theme=dark] .site-loader__progress-bar,html[data-theme=dark] .site-loader__emblem {
background: var(--accent)
}
html[data-theme=dark] .site-loader__logo {
filter: none
}
html[data-theme=dark] .hero--reference {
color: var(--ink);
background: radial-gradient(circle at 50% 82%,#8fe7ef33,#0000 28%),radial-gradient(circle at 84% 20%,color-mix(in srgb, var(--accent-soft) 14%, transparent),#0000 24%),#15191b
}
html[data-theme=dark] .hero--reference:after {
background: radial-gradient(60% 100% at 50% 100%,#8fe7ef1f,#0000 70%)
}
html[data-theme=dark] .hero--reference:before {
opacity: .07
}
html[data-theme=dark] .hero__copy .hero__title {
color: #fff
}
html[data-theme=dark] .hero__copy .hero__slogan {
color: var(--aqua)!important
}
html[data-theme=dark] .hero__laurel {
filter: invert();
opacity: .72
}
html[data-theme=dark] .hero__callout,html[data-theme=dark] .hero__callout-meta,html[data-theme=dark] .hero__callout-material,html[data-theme=dark] .hero__callout-title {
color: var(--ink)
}
html[data-theme=dark] .hero__callout:before,html[data-theme=dark] .hero__callout:after,html[data-theme=dark] .hero__callout-line {
border-color: #ffffff57
}
html[data-theme=dark] .hero__arc {
border-color: #8fe7ef52
}
html[data-theme=dark] :where(.quick-catalog,.section--catalog,#projects,.pricing,.thematic-catalog--blanks,.clients,.faq),html[data-theme=dark] #projects {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] #projects :where(.section__title,.products__title,.products__price,.link--text) {
color: var(--ink)
}
html[data-theme=dark] #projects .link--text {
border-color: #ffffff57
}
html[data-theme=dark] :where(.trust-strip,.thematic-catalog:not(.thematic-catalog--blanks),.ai,.live-feed,.production,.section--process) {
color: var(--ink);
background: #1b2023
}
html[data-theme=dark] .ai {
background: radial-gradient(circle at 86% 14%,#52d5e230,#0000 23%),radial-gradient(circle at 15% 90%,color-mix(in srgb, var(--accent-soft) 10%, transparent),#0000 26%),#202529
}
html[data-theme=dark] .ai:before,html[data-theme=dark] .production:before {
background-image: linear-gradient(#ffffff0b 1px,#0000 1px),linear-gradient(90deg,#ffffff0b 1px,#0000 1px)
}
html[data-theme=dark] :where(.quick-catalog__all-card,.trust-strip__icon,.thematic-catalog__card,.ai__panel,.live-feed__card,.pricing__card,.process__step) {
color: var(--ink);
background: #252b2e;
border-color: #ffffff1a
}
html[data-theme=dark] .thematic-catalog--blanks .thematic-catalog__card,html[data-theme=dark] .thematic-catalog__card:hover,html[data-theme=dark] .thematic-catalog--blanks .thematic-catalog__card:hover,html[data-theme=dark] .catalog__card,html[data-theme=dark] .products__photo,html[data-theme=dark] .live-feed__media {
color: var(--ink);
background: #252b2e
}
html[data-theme=dark] .track-arrow {
color: var(--ink);
background: #ffffff0f;
border-color: #ffffff26
}
html[data-theme=dark] .quick-catalog__photo-card {
background: #ffffff14;
border-color: #ffffff1f
}
/* Вырезанный объект в тёмной теме остаётся на своей светлой подложке: на
тёмной он теряется, а подпись поверх него всё равно тёмная. */
html[data-theme=dark] .quick-catalog__photo-card--object {
background: #d9dde2
}
html[data-theme=dark] .quick-catalog__all-card-eyebrow,html[data-theme=dark] .trust-strip__label,html[data-theme=dark] .ai__note,html[data-theme=dark] .ai__panel-status,html[data-theme=dark] .ai__chip,html[data-theme=dark] .ai__input,html[data-theme=dark] .products__meta,html[data-theme=dark] .products__lead,html[data-theme=dark] .live-feed__description,html[data-theme=dark] .pricing__text,html[data-theme=dark] .production__text,html[data-theme=dark] .process__text,html[data-theme=dark] .clients__lead,html[data-theme=dark] .faq__lead,html[data-theme=dark] .faq__answer {
color: var(--muted)
}
html[data-theme=dark] .eyebrow,html[data-theme=dark] .section__lead,html[data-theme=dark] .thematic-catalog__lead,html[data-theme=dark] .live-feed__lead {
color: #f5f7f894
}
html[data-theme=dark] :where(.eyebrow__mark,.live-feed__category i,.company-kicker__icon),html[data-theme=dark] .reviews-feedback__card:before {
background: var(--aqua)
}
html[data-theme=dark] :where(.thematic-catalog__card-kicker,.live-feed__category) {
color: var(--aqua)
}
html[data-theme=dark] .ai__message--bot,html[data-theme=dark] .ai__typing,html[data-theme=dark] .ai__input {
color: var(--ink);
background: #30373a;
border-color: #ffffff1c
}
html[data-theme=dark] .ai__message--user,html[data-theme=dark] .pricing__grid .pricing__card--blue,html[data-theme=dark] .button--aqua {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .pricing__card--blue :where(.pricing__title,.pricing__text,.pricing__action,.pricing__action-arrow) {
color: #101719
}
html[data-theme=dark] .pricing__grid .pricing__card--dark {
color: var(--ink);
background: #252b2e
}
html[data-theme=dark] .pricing__card--dark .pricing__action {
color: var(--ink)
}
html[data-theme=dark] .products__tag {
color: var(--ink);
background: #15191bd1
}
html[data-theme=dark] .clients__logo-item {
background: #eef0f1;
border-color: #ffffff1f
}
html[data-theme=dark] .faq__item,html[data-theme=dark] .faq__question,html[data-theme=dark] .products__footer,html[data-theme=dark] .pricing__action,html[data-theme=dark] .process__step,html[data-theme=dark] .production__step {
border-color: #ffffff24
}
html[data-theme=dark] .contact__form,html[data-theme=dark] .modal__dialog {
color: var(--ink);
background: #202529
}
html[data-theme=dark] .contact {
color: var(--ink);
background: radial-gradient(circle at 12% 8%,#8fe7ef1f,#0000 28%),radial-gradient(circle at 88% 92%,color-mix(in srgb, var(--accent-soft) 7%, transparent),#0000 24%),#1b2023;
border: 1px solid #ffffff14
}
html[data-theme=dark] :where(.contact__copy,.contact__copy .eyebrow,.contact__title,.contact__direct-link) {
color: var(--ink)
}
html[data-theme=dark] .contact__copy .eyebrow {
color: #f5f7f894
}
html[data-theme=dark] .contact__copy .eyebrow__mark {
background: var(--aqua)
}
html[data-theme=dark] .contact__text {
color: #f5f7f8ad
}
html[data-theme=dark] .contact__direct-link {
background: #ffffff0e;
border: 1px solid #ffffff1a
}
html[data-theme=dark] .contact__direct-icon {
color: var(--aqua);
background: #8fe7ef1c
}
html[data-theme=dark] .contact__direct-link:hover {
background: #8fe7ef1a;
border-color: #8fe7ef4d
}
html[data-theme=dark] .contact__form {
border: 1px solid #ffffff1a;
box-shadow: 0 30px 76px #00000038
}
html[data-theme=dark] .contact__form .form__field {
color: #f5f7f87a;
background: 0 0
}
html[data-theme=dark] .contact__form :where(.form__input,.form__textarea) {
color: var(--ink);
border-color: #ffffff29
}
html[data-theme=dark] .contact__form .form__file-label {
color: #f5f7f8d6;
border-color: #f5f7f87a
}
html[data-theme=dark] .contact__form .form__disclaimer {
color: #f5f7f86b
}
html[data-theme=dark] .contact__form .button--ink {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .contact__form .button--ink:hover {
background: var(--aqua-strong)
}
html[data-theme=dark] :where(.contact__form .form__field,.modal__form .form__field,.form__row .form__field,.modal__textarea) {
color: var(--ink);
background: #252b2e;
border-color: #ffffff24
}
html[data-theme=dark] :where(.form__input,.form__textarea,.modal__input,.modal__textarea)::placeholder {
color: #f5f7f86b
}
html[data-theme=dark] .modal {
background: #040708a3
}
html[data-theme=dark] .site-footer {
color: var(--ink);
background: #101416
}
html[data-theme=dark] :where(.site-footer__tagline,.site-footer__nav-link,.site-footer__contact-item,.site-footer__contact-item .site-footer__contact-text,.site-footer__copyright,.site-footer__top-link,.site-footer__action-hours) {
color: #f5f7f894
}
html[data-theme=dark] :where(.site-footer__nav-title,.site-footer__contacts-title) {
color: var(--ink)
}
html[data-theme=dark] .site-footer__action {
--footer-action-background: var(--aqua);
--footer-action-text: #101719;
--footer-action-hours: #f5f7f87a
}
html[data-theme=dark] .site-footer__wordmark {
color: #8fe7ef0f
}
html[data-theme=dark] :where(.company-hero,.contact-hero,.company-section--gray,.contact-brief,.factory-hero,.factory-inside,.reviews-hero,.reviews-feedback,.reviews-clients) {
color: var(--ink);
background: #1b2023
}
html[data-theme=dark] :where(.company-section--white,.factory-process,.factory-quality,.reviews-testimonials,.reviews-projects) {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] :where(.company-hero__text,.company-manifesto__copy,.company-expertise__text,.company-route__intro-text,.company-route__item-text,.contact-hero__text,.contact-brief__text,.contact-location__text,.factory-process__lead,.factory-inside__text,.factory-quality__text,.reviews-hero__lead,.reviews-section-head__lead,.reviews-project__text,.reviews-cta__text) {
color: var(--muted)
}
html[data-theme=dark] :where(.company-expertise__card,.contact-card,.company-contact-form,.factory-step,.reviews-testimonial,.reviews-feedback__card,.reviews-project) {
color: var(--ink);
background: #242a2d;
border-color: #ffffff21
}
html[data-theme=dark] .reviews-testimonial--featured {
color: #fff;
background: #101416
}
html[data-theme=dark] .reviews-testimonial__index,html[data-theme=dark] .reviews-testimonial__mark {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .reviews-testimonial__index {
color: var(--aqua);
background: 0 0
}
html[data-theme=dark] .reviews-testimonial__project,html[data-theme=dark] .reviews-testimonial__company {
color: var(--muted)
}
html[data-theme=dark] .reviews-testimonial__author,html[data-theme=dark] :where(.company-stats,.company-route__list,.factory-steps,.reviews-feedback__grid,.reviews-clients__grid),html[data-theme=dark] :where(.company-stats__item,.company-route__item,.factory-step,.factory-capability,.factory-quality__item,.reviews-feedback__card,.reviews-project__result) {
border-color: #ffffff24
}
html[data-theme=dark] .company-hero__art {
background: #252b2e
}
html[data-theme=dark] .company-hero__art:before {
background: #8fe7ef33
}
html[data-theme=dark] .company-button--coral {
color: #101719;
background: var(--aqua);
box-shadow: 0 14px 32px #52d5e229
}
html[data-theme=dark] .company-button--ink {
color: var(--ink);
background: #2a3033
}
html[data-theme=dark] .company-button--light {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] :where(.company-hero__title .heading-accent,.contact-hero__title .heading-accent,.company-section__title .heading-accent,.company-cta__title .heading-accent,.contact-brief__title .heading-accent,.contact-location__title .heading-accent,.factory-process__title .heading-accent,.factory-inside__title .heading-accent,.factory-quality__title .heading-accent,.factory-cta__title .heading-accent,.reviews-hero__title .heading-accent,.reviews-section-head__title .heading-accent,.reviews-projects__title .heading-accent,.reviews-cta__title .heading-accent) {
color: var(--aqua)
}
html[data-theme=dark] :where(.company-contact-form__input,.company-contact-form__textarea) {
color: var(--ink);
background: #242a2d;
border-color: #ffffff29
}
html[data-theme=dark] :where(.company-contact-form__input,.company-contact-form__textarea)::placeholder {
color: #f5f7f86b
}
html[data-theme=dark] .factory-inside__visual {
background: #242a2d;
border-color: #ffffff1a
}
html[data-theme=dark] .reviews-hero__visual:before {
background: #2a3033
}
html[data-theme=dark] .reviews-hero__card--side {
border-color: #1b2023
}
html[data-theme=dark] .reviews-hero__note,html[data-theme=dark] .reviews-cta,html[data-theme=dark] .factory-cta,html[data-theme=dark] .company-cta {
background: #101416
}
html[data-theme=dark] .reviews-clients__item {
background: #eef0f1;
border-color: #ffffff1f
}
html[data-theme=dark] .reviews-feedback__card:hover {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .reviews-feedback__card:hover .reviews-feedback__card-text,html[data-theme=dark] .reviews-feedback__card:hover .reviews-feedback__card-eyebrow {
color: #101719a3
}
@media (width<=600px) {
.site-header__theme-toggle {
gap: 4px;
min-width: 56px
}
}
@media (width<=360px) {
.site-header__topbar-inner {
gap: 6px
}
.site-header__theme-toggle {
min-width: 50px
}
.site-header__theme-icon {
display: none
}
}
@media (hover: none) {
html[data-theme=dark] .reviews-feedback__card:hover {
color:var(--ink);
background: #242a2d
}
html[data-theme=dark] .reviews-feedback__card:hover .reviews-feedback__card-text,html[data-theme=dark] .reviews-feedback__card:hover .reviews-feedback__card-eyebrow {
color: var(--muted)
}
}
.site-menu-backdrop {
z-index: 75;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: #0c0f116b;
border: 0;
width: 100%;
height: 100%;
padding: 0;
transition: opacity .22s,visibility .22s;
position: fixed;
inset: 0
}
.site-menu-backdrop--visible {
opacity: 1;
visibility: visible;
pointer-events: auto
}
.site-header__nav-catalog-trigger {
display: none
}
@media (width<=1180px) {
.site-header__inner {
grid-template-columns: auto minmax(150px,1fr) auto
}
.site-header__brand {
grid-area: 1/1
}
.site-header__search {
grid-area: 1/2
}
.site-header__catalog {
display: contents
}
.site-header__catalog-toggle {
display: none
}
.site-header__tools {
grid-area: 1/3
}
.site-header__nav-catalog-trigger {
width: 100%;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
background: 0 0;
border: 0;
justify-content: space-between;
align-items: center;
display: flex
}
.site-header__nav-catalog-trigger>span:last-child {
color: var(--accent-alt);
font-size: 20px
}
}
@media (width<=900px) {
html,body {
max-width: 100%;
overflow-x: clip
}
.page,.company-page,.catalog-page {
min-width: 0;
overflow-x: clip
}
.site-header__nav--open {
z-index: 2;
max-height: calc(100dvh - var(--header-main-height) - var(--topbar-current-height) - 20px);
overscroll-behavior-y: contain;
touch-action: pan-y;
background: #fffffffa;
border: 1px solid #171a1d14;
padding: 10px 18px;
overflow: hidden auto;
box-shadow: 0 24px 60px #0e12142e
}
.site-header__nav--open>* {
flex: none
}
.site-header__nav--open .site-header__nav-link {
align-items: center;
min-height: 54px;
padding: 0 4px;
display: flex
}
.site-header__nav--open .site-header__nav-link:after {
display: none
}
.site-header__nav--open .site-header__nav-trigger {
min-height: 54px
}
.site-header__menu-button-line {
transform-origin: 50%;
transition: transform .18s,opacity .18s
}
.site-header__menu-button--open .site-header__menu-button-line:first-child {
transform: translateY(3.5px)rotate(45deg)
}
.site-header__menu-button--open .site-header__menu-button-line:last-child {
transform: translateY(-3.5px)rotate(-45deg)
}
.company-page :is(.company-hero__title,.contact-hero__title,.factory-hero__title,.reviews-hero__title,.feed-page-hero__title,.company-section__title,.company-cta__title,.contact-brief__title,.contact-location__title,.company-expertise__title,.company-route__item-title,.factory-process__title,.factory-step__title,.factory-inside__title,.factory-capability__title,.factory-quality__title,.factory-cta__title,.reviews-section-head__title,.reviews-feedback__card-title,.reviews-project__title,.reviews-projects__title,.reviews-cta__title,.feed-page-cta__title,.feed-empty__title,.feed-featured__title,.feed-story__title),.catalog-page :is(.catalog-hero__title,.catalog-section__title,.catalog-category-card__title,.catalog-theme-card__title,.catalog-blank-card__title,.catalog-cta__title) {
overflow-wrap: break-word
}
.company-button,.catalog-cta__link {
min-height: 52px
}
.page .hero {
min-height: 0
}
}
@media (width<=600px) {
.site-header__topbar-inner {
justify-content: space-between
}
.site-header__topbar-hours {
display: none
}
.site-header__inner {
grid-template-columns: auto minmax(0,1fr) auto;
gap: 8px
}
.site-header__logo {
width: 38px
}
.site-header__search-form {
min-height: 42px
}
.site-header__menu-button {
width: 42px;
height: 42px;
padding-left: 11px;
padding-right: 11px
}
.site-header__nav--open {
border-radius: 16px;
padding: 8px 16px;
left: 8px;
right: 8px
}
.site-header__series-menu--open {
padding-bottom: 10px
}
.site-header__series-menu-link,.site-header__series-menu-all {
min-height: 48px
}
.company-page .company-hero__copy,.company-page .reviews-hero__copy {
min-height: 0
}
.company-page .company-hero__actions,.company-page .reviews-hero__actions {
width: 100%
}
.company-page :is(.company-section,.company-cta,.contact-brief,.factory-process,.factory-inside,.factory-quality,.factory-cta,.reviews-testimonials,.reviews-feedback,.reviews-projects,.reviews-clients,.reviews-cta,.feed-archive),.catalog-page .catalog-section {
padding-top: 58px;
padding-bottom: 58px
}
.factory-inside__visual,.contact-location__map,.contact-location__frame {
min-height: 340px
}
.reviews-project,.feed-story {
grid-template-columns: 1fr
}
.feed-story__copy {
min-height: 0
}
.feed-page-cta,.reviews-cta {
margin-left: 10px;
margin-right: 10px
}
}
@media (width<=420px) {
.site-header__logo {
width: 36px
}
.site-header__search {
justify-self: end;
width: 42px
}
.site-header__search-form {
place-items: center;
width: 42px;
padding: 0;
display: grid;
position: relative
}
.site-header__search-input {
opacity: 0;
cursor: pointer;
width: 42px;
position: absolute;
inset: 0
}
.site-header--search-open .site-header__search {
width: 100%
}
.site-header--search-open .site-header__search-form {
justify-items: initial;
grid-template-columns: 18px minmax(0,1fr) auto;
align-items: center;
width: 100%;
padding: 0 10px;
display: grid
}
.site-header--search-open .site-header__search-input {
opacity: 1;
cursor: text;
width: 100%;
position: static
}
.company-page .company-stats__item {
min-height: 110px;
padding: 16px 12px
}
.catalog-category-card,.catalog-category-card--feature,.catalog-category-card--wide,.catalog-theme-card,.catalog-theme-card--lead {
min-height: 330px
}
}
.product-category-page {
color: #1b1f22;
background: #fff;
min-width: 0;
min-height: 100vh;
font-family: var(--font-ui);
overflow-x: clip
}
.product-category-shell {
width: var(--page-width);
margin-left: auto;
margin-right: auto
}
.product-category-hero {
background: #f2f4f7;
padding: calc(88px + var(--header-navbar-height) + clamp(44px,4.8vw,72px)) 0 clamp(47px,5.5vw,27px);
}
.site-breadcrumbs {
color: #6f7477;
/* Было clamp(36px,4vw,17px): нижняя граница больше верхней, значение
всегда упиралось в 36px и правило вело себя не как задумано. */
margin: 0 0 clamp(20px,2.4vw,34px);
font-size: 14px;
line-height: 1.25
}
.site-breadcrumbs__list {
flex-wrap: wrap;
align-items: center;
list-style: none;
display: flex
}
.site-breadcrumbs__item {
align-items: center;
min-width: 0;
display: inline-flex
}
.site-breadcrumbs__item+.site-breadcrumbs__item:before {
color: #6f74777a;
content: "/";
margin: 0 10px
}
.site-breadcrumbs__link {
transition: color .16s
}
.site-breadcrumbs__link:hover {
color: var(--accent-alt)
}
.site-breadcrumbs__link:focus-visible {
outline-offset: 3px;
outline: 2px solid var(--accent-alt)
}
.site-breadcrumbs__current {
color: #1b1f22;
text-overflow: ellipsis;
white-space: nowrap;
max-width: min(420px,42vw);
font-weight: 500;
overflow: hidden
}
.product-category-hero__grid {
grid-template-columns: minmax(0,1.2fr) minmax(300px,.62fr);
align-items: end;
gap: clamp(48px,8vw,132px);
margin-top: 0;
display: grid
}
.product-category-eyebrow {
color: #5b6166;
letter-spacing: .12em;
text-transform: uppercase;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 650;
display: inline-flex
}
.product-category-eyebrow__mark {
background: var(--accent-alt);
width: 8px;
height: 8px;
transform: rotate(45deg)
}
.product-category-hero__title {
letter-spacing: -.065em;
max-width: 980px;
margin: 18px 0 0;
font-size: clamp(52px,6vw,92px);
font-weight: 500;
line-height: .92
}
.product-category-hero__title .heading-accent,.product-category-cta__title .heading-accent {
color: var(--accent-alt)
}
.product-category-hero__intro {
padding-bottom: 4px
}
.product-category-hero__text {
color: #4a5054;
margin: 0;
font-size: clamp(17px,1.4vw,22px);
line-height: 1.5
}
.product-category-hero__meta {
color: #6f7477;
letter-spacing: .08em;
text-transform: uppercase;
margin-top: 24px;
font-size: 11px;
font-weight: 650;
display: block
}
.product-category-listing {
padding: 0 0 clamp(82px,8vw,132px)
}
.product-category-toolbar {
z-index: 2;
background: #fff;
border-top: 1px solid #1b1f221f;
border-bottom: 1px solid #1b1f221f;
justify-content: space-between;
align-items: center;
gap: 28px;
min-height: 72px;
margin-top: -1px;
display: flex;
position: relative
}
.product-category-toolbar__scroll {
flex: auto;
align-items: center;
min-width: 0;
display: flex
}
.product-category-filter-group {
align-items: center;
gap: 4px;
display: flex
}
.product-category-filter-group__chip {
color: #5b6166;
min-height: 38px;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
cursor: pointer;
background: 0 0;
border: 0;
border-radius: 999px;
padding: 0 14px;
font-family: inherit;
font-size: 18px;
transition: color .16s,background .16s
}
.product-category-filter-group__chip:hover,.product-category-filter-group__chip--active {
color: #fff;
background: #1b1f22
}
.product-category-toolbar__divider {
background: #1b1f221f;
flex: none;
width: 1px;
height: 24px
}
.product-category-toolbar__controls {
flex: none;
align-items: center;
gap: 18px;
display: flex
}
.catalog-select {
color: #4a5054;
position: relative
}
.catalog-select__trigger {
color: #33383b;
min-height: 44px;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
cursor: pointer;
background: #f2f4f7;
border: 1px solid #1b1f2214;
border-radius: 999px;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 0 13px 0 16px;
font-family: inherit;
font-size: 16px;
transition: color .18s,background .18s,border-color .18s,box-shadow .18s;
display: inline-flex
}
.catalog-select__trigger-icon {
flex: none;
transition: transform .18s
}
.catalog-select__trigger:hover {
background: #eceff2;
border-color: #1b1f222e
}
.catalog-select__trigger:focus-visible {
outline-offset: 3px;
outline: 2px solid var(--accent-alt)
}
.catalog-select.is-open .catalog-select__trigger {
color: #fff;
background: #1b1f22;
border-color: #1b1f22;
box-shadow: 0 8px 18px #1b1f221f
}
.catalog-select.is-open .catalog-select__trigger-icon {
transform: rotate(180deg)
}
.catalog-select__menu {
z-index: 20;
color: #33383b;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
transform-origin: 0 0;
background: #fffffff7;
border: 1px solid #1b1f221a;
border-radius: 18px;
width: max-content;
min-width: 238px;
padding: 8px;
animation: .16s cubic-bezier(.2,.72,.2,1) catalog-select-in;
position: absolute;
top: calc(100% + 10px);
left: 0;
box-shadow: 0 18px 50px #1b1f2229
}
.catalog-select--sort .catalog-select__menu {
transform-origin: 100% 0;
left: auto;
right: 0
}
.catalog-select__menu-label {
color: #83888b;
letter-spacing: .1em;
text-transform: uppercase;
padding: 8px 11px 7px;
font-size: 10px;
font-weight: 650;
display: block
}
.catalog-select__option {
width: 100%;
min-height: 44px;
color: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
text-align: left;
cursor: pointer;
background: 0 0;
border: 0;
border-radius: 12px;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 0 11px;
font-family: inherit;
font-size: 15px;
transition: color .15s,background .15s;
display: flex
}
.catalog-select__option:hover,.catalog-select__option:focus-visible {
background: #f2f4f7;
outline: 0
}
.catalog-select__option--selected {
color: #fff;
background: #1b1f22
}
.catalog-select__option-icon {
color: var(--accent-alt);
opacity: 0;
flex: none
}
.catalog-select__option--selected .catalog-select__option-icon {
opacity: 1
}
@keyframes catalog-select-in {
0% {
opacity: 0;
transform: translateY(-5px)scale(.98)
}
to {
opacity: 1;
transform: translateY(0)scale(1)
}
}
.product-category-sort {
flex: none;
align-items: center;
gap: 8px;
display: inline-flex
}
.product-category-sort__label {
color: #83888b;
font-size: 18px
}
.product-category-result-head {
justify-content: space-between;
align-items: end;
gap: 32px;
padding: clamp(56px,6vw,88px) 0 32px;
display: flex
}
.product-category-result-head__title {
letter-spacing: -.052em;
margin: 0;
font-size: clamp(32px,3.4vw,54px);
font-weight: 500;
line-height: 1
}
.product-category-result-head__count {
color: #6f7477;
font-size: 18px
}
.product-category-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 42px 14px;
display: grid
}
.product-tile {
min-width: 0
}
.product-tile__link {
display: block
}
.product-tile__media {
aspect-ratio: .9;
background: #f2f4f7;
border-radius: 22px;
position: relative;
overflow: hidden
}
.product-tile__media--mint {
background: #daefe9
}
.product-tile__media--ice {
background: #e0edf3
}
.product-tile__media--coral {
background: color-mix(in srgb, var(--accent-soft) 22%, #fff)
}
.product-tile__media--sky {
background: #dcebf7
}
.product-tile__media--sand {
background: #ede2cf
}
.product-tile__media--warm {
background: #f0dcc6
}
.product-tile__media--pearl {
background: #ebece8
}
.product-tile__media--lilac {
background: #e8e1f0
}
.product-tile__media--graphite {
background: #242a2d
}
.product-tile__media--navy {
background: #d3dde8
}
.product-tile__media--rose {
background: #f2ddde
}
.product-tile__media--berry {
background: #ecd5da
}
.product-tile__image {
object-fit: cover;
mix-blend-mode: multiply;
filter: drop-shadow(0 22px 18px #151c1e2e);
width: 100%;
height: 100%;
transition: transform .36s cubic-bezier(.2,.72,.2,1)
}
.product-tile__media--graphite .product-tile__image {
mix-blend-mode: normal
}
.product-tile__label {
z-index: 2;
color: #1b1f22;
letter-spacing: .04em;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: #ffffffd1;
border-radius: 999px;
max-width: calc(100% - 64px);
padding: 7px 10px;
font-size: 12px;
font-weight: 650;
position: absolute;
top: 14px;
left: 14px
}
.product-tile__copy {
padding: 16px 4px 0
}
.product-tile__sku {
color: #83888b;
letter-spacing: .08em;
font-size: 13px
}
.product-tile__title {
letter-spacing: -.025em;
margin: 7px 0 0;
font-size: clamp(19px,1.45vw,24px);
font-weight: 500;
line-height: 1.08
}
.product-tile__text {
color: #5b6166;
min-height: 40px;
margin: 9px 0 0;
font-size: 16px;
line-height: 1.45
}
.product-tile__price {
border-top: 1px solid #1b1f221a;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
display: flex
}
.product-tile__price-value {
font-size: 20px;
font-weight: 600
}
.product-tile__price-unit {
color: #83888b;
font-size: 15px
}
.product-category-grid:has(.product-tile--skeleton) {
animation: product-tile-skeleton-in .2s ease-out
}
.product-tile--skeleton .product-tile__media,
.product-tile__skeleton-line {
background: linear-gradient(90deg, #f4f5f7 0%, #fafbfc 50%, #f4f5f7 100%);
background-size: 200% 100%;
animation: product-tile-skeleton 1.4s ease-in-out infinite
}
.product-tile__skeleton-line {
border-radius: 6px;
height: 13px;
display: block
}
.product-tile__skeleton-line--sku {
width: 38%
}
.product-tile__skeleton-line--title {
margin-top: 11px;
height: 22px;
width: 76%
}
.product-tile__skeleton-line--text {
margin-top: 12px;
height: 34px;
width: 100%
}
.product-tile__skeleton-line--price {
margin-top: 22px;
height: 20px;
width: 46%
}
@keyframes product-tile-skeleton {
0% { background-position: 200% 0 }
100% { background-position: -200% 0 }
}
@keyframes product-tile-skeleton-in {
from { opacity: 0 }
to { opacity: 1 }
}
html[data-theme=dark] .product-tile--skeleton .product-tile__media,
html[data-theme=dark] .product-tile__skeleton-line {
background-image: linear-gradient(90deg, #ffffff0a 0%, #ffffff16 50%, #ffffff0a 100%)
}
@media (prefers-reduced-motion: reduce) {
.product-category-grid:has(.product-tile--skeleton),
.product-tile--skeleton .product-tile__media,
.product-tile__skeleton-line {
animation: none
}
}
@media (hover: hover) and (pointer:fine) {
.product-tile:hover .product-tile__image {
transform:translateY(-5px)scale(1.035)
}
}
/* ТекÑÑ‚ раздела под каталогом: ÑƒÐ·ÐºÐ°Ñ ÐºÐ¾Ð»Ð¾Ð½ÐºÐ°, иначе Ñтроки нечитаемо длинные. */
.product-category-about {
padding: 8px 0 64px
}
.product-category-about__title {
letter-spacing: -.03em;
margin: 0 0 18px;
font-size: clamp(22px,2vw,28px);
font-weight: 500
}
.product-category-about__text {
color: #5b6166;
max-width: 76ch;
font-size: 16px;
line-height: 1.62
}
.product-category-about__text p {
margin: 0 0 14px
}
.product-category-about__text p:last-child {
margin-bottom: 0
}
html[data-theme=dark] .product-category-about__text {
color: #f5f7f894
}
.product-category-empty {
text-align: center;
background: #f2f4f7;
border-radius: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 300px;
padding: 32px;
display: flex
}
.product-category-empty__title {
font-size: 28px;
font-weight: 500
}
.product-category-empty__text {
color: #5b6166;
margin: 10px 0 22px;
font-size: 14px
}
.product-category-empty__reset {
color: #fff;
cursor: pointer;
background: #1b1f22;
border: 0;
border-radius: 12px;
min-height: 44px;
padding: 0 18px
}
.product-category-cta {
color: #fff;
background: #1b1f22;
border-radius: 32px;
margin: 0 24px 24px;
padding: clamp(72px,8vw,124px) 0
}
.product-category-cta__inner {
position: relative
}
.product-category-eyebrow--light {
color: #ffffff94
}
.product-category-cta__title {
letter-spacing: -.06em;
max-width: min(1050px,100% - 300px);
margin: 24px 0 0;
font-size: clamp(48px,5.4vw,86px);
font-weight: 500;
line-height: .94
}
.product-category-cta__link {
color: #1b1f22;
background: #fff;
border-radius: 13px;
align-items: center;
gap: 24px;
min-height: 52px;
padding: 0 20px;
font-size: 14px;
font-weight: 650;
display: inline-flex;
position: absolute;
bottom: 4px;
right: 0
}
.catalog-category-card__overlay-link {
z-index: 4;
border-radius: inherit;
position: absolute;
inset: 0
}
.catalog-category-card__overlay-link:focus-visible {
outline-offset: 4px;
outline: 3px solid var(--accent-alt)
}
html[data-theme=dark] .product-category-page,html[data-theme=dark] .product-category-toolbar {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] .product-category-hero,html[data-theme=dark] .product-category-empty {
background: #1f2528
}
html[data-theme=dark] :is(.product-category-hero__text,.product-category-hero__meta,.product-category-result-head__count,.product-tile__text,.product-tile__price-unit,.product-category-sort__label) {
color: var(--muted)
}
html[data-theme=dark] :is(.catalog-select,.product-category-sort) {
color: var(--ink)
}
html[data-theme=dark] .site-breadcrumbs {
color: var(--muted)
}
html[data-theme=dark] .site-breadcrumbs__item+.site-breadcrumbs__item:before {
color: #ffffff47
}
html[data-theme=dark] .site-breadcrumbs__current {
color: var(--ink)
}
html[data-theme=dark] :is(.product-category-toolbar,.product-tile__price) {
border-color: #ffffff21
}
html[data-theme=dark] .product-category-filter-group__chip {
color: var(--muted)
}
html[data-theme=dark] .product-category-filter-group__chip:hover,html[data-theme=dark] .product-category-filter-group__chip--active {
color: #101719;
background: var(--aqua)
}
html[data-theme=dark] .catalog-select__trigger {
color: var(--ink);
background: #1f2528;
border-color: #ffffff1a
}
html[data-theme=dark] .catalog-select__trigger:hover {
background: #252c30;
border-color: #ffffff2e
}
html[data-theme=dark] .catalog-select.is-open .catalog-select__trigger {
color: #101719;
border-color: var(--aqua);
background: var(--aqua)
}
html[data-theme=dark] .catalog-select__menu {
color: var(--ink);
background: #1f2528f7;
border-color: #ffffff1a;
box-shadow: 0 18px 50px #00000059
}
html[data-theme=dark] .catalog-select__option:hover,html[data-theme=dark] .catalog-select__option:focus-visible {
background: #2a3135
}
html[data-theme=dark] .catalog-select__option--selected {
color: #101719;
background: var(--aqua)
}
@media (width<=1180px) {
.product-category-grid {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.product-category-cta__link {
margin-top: 36px;
position: static
}
.product-category-cta__title {
max-width: 900px
}
}
@media (width<=820px) {
.product-category-hero__grid {
grid-template-columns: 1fr;
gap: 32px
}
.product-category-hero__intro {
max-width: 650px
}
.product-category-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 8px;
min-height: 0;
padding: 12px 0
}
.product-category-toolbar__scroll {
scrollbar-width: none;
width: calc(100% + 36px);
margin-left: -18px;
margin-right: -18px;
padding: 0 18px;
overflow-x: auto
}
.product-category-toolbar__scroll::-webkit-scrollbar {
display: none
}
.product-category-filter-group {
flex: none
}
.product-category-toolbar__controls {
justify-content: space-between;
width: 100%
}
.product-category-toolbar__divider,.product-category-sort__label {
display: none
}
.product-category-grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media (width<=600px) {
.product-category-hero {
padding-top: 126px;
padding-bottom: 46px
}
.site-breadcrumbs {
margin-bottom: 28px;
font-size: 13px
}
.site-breadcrumbs__list {
flex-wrap: nowrap
}
.site-breadcrumbs__item+.site-breadcrumbs__item:before {
margin: 0 7px
}
.site-breadcrumbs__item:not(:first-child):not(:nth-last-child(-n+2)) {
display: none
}
.site-breadcrumbs__current {
max-width: 46vw
}
.product-category-hero__title {
font-size: clamp(42px,13vw,56px)
}
.product-category-hero__text {
font-size: 16px
}
.product-category-toolbar__scroll {
width: calc(100% + 28px);
margin-left: -14px;
margin-right: -14px;
padding: 0 14px
}
.product-category-filter-group__chip {
min-height: 36px;
padding: 0 12px;
font-size: 12px
}
.product-category-toolbar__controls {
gap: 10px
}
.catalog-select__trigger {
gap: 14px;
min-height: 42px;
padding: 0 12px 0 14px;
font-size: 14px
}
.catalog-select__menu {
min-width: min(238px,100vw - 28px)
}
.product-category-result-head {
padding-top: 46px;
padding-bottom: 24px
}
.product-category-result-head__title {
max-width: 260px;
font-size: 32px
}
.product-category-grid {
gap: 32px 10px
}
.product-tile__media {
border-radius: 16px
}
.product-tile__image {
padding: 20px
}
.product-tile__label {
text-overflow: ellipsis;
white-space: nowrap;
max-width: calc(100% - 50px);
padding: 5px 7px;
font-size: 8px;
top: 9px;
left: 9px;
overflow: hidden
}
.product-tile__copy {
padding: 12px 2px 0
}
.product-tile__title {
font-size: 17px
}
.product-tile__text {
min-height: 0;
font-size: 11px
}
.product-tile__price {
flex-direction: column;
align-items: flex-start;
gap: 3px;
margin-top: 12px;
padding-top: 11px
}
.product-tile__price-value {
font-size: 14px
}
.product-tile__skeleton-line {
height: 10px
}
.product-tile__skeleton-line--title {
margin-top: 8px;
height: 17px
}
.product-tile__skeleton-line--text {
margin-top: 9px;
height: 15px
}
.product-tile__skeleton-line--price {
margin-top: 16px;
height: 15px
}
.product-category-cta {
border-radius: 24px;
margin: 0 10px 10px;
padding: 62px 0
}
.product-category-cta__title {
font-size: clamp(40px,12vw,54px)
}
}
.product-detail-page {
color: #101719;
background: #fff;
min-height: 100vh;
font-family: var(--font-ui)
}
.product-detail-page main {
overflow-x: clip
}
.product-detail-shell {
width: var(--page-width);
margin: 0 auto
}
.product-detail-hero {
padding: calc(142px + var(--header-navbar-height)) 0 70px
}
.product-detail-hero__grid {
grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr);
align-items: stretch;
gap: clamp(48px,7vw,116px);
display: grid
}
.product-detail-gallery {
--gallery-height: 500px;
grid-template-columns: 92px minmax(0,1fr);
align-self: start;
gap: 12px;
min-width: 0;
display: grid;
position: sticky;
top: calc(var(--header-main-height, 78px) + var(--header-navbar-height) + 16px)
}
.product-detail-gallery:not(:has(.product-detail-gallery__thumbs)) {
grid-template-columns: minmax(0,1fr)
}
.product-detail-gallery:not(:has(.product-detail-gallery__thumbs)) .product-detail-visual {
grid-area: auto
}
.product-detail-visual {
background: radial-gradient(circle at 70% 24%,#ffffffe0,#0000 31%),linear-gradient(145deg,#ddf3eb,#cbe4dc);
border-radius: 30px;
grid-area: 1/2;
justify-content: center;
align-items: center;
height: var(--gallery-height);
display: flex;
position: relative;
overflow: hidden
}
.product-detail-visual:after {
filter: blur(24px);
content: "";
background: #43706624;
border-radius: 50%;
width: 66%;
height: 12%;
position: absolute;
bottom: 11%;
left: 17%
}
.product-detail-gallery__stage {
z-index: 1;
color: #101719;
cursor: zoom-in;
background: 0 0;
border: 0;
place-items: center;
width: 100%;
height: 100%;
display: grid;
position: absolute;
inset: 0;
overflow: hidden
}
.product-detail-gallery__stage:focus-visible {
outline-offset: -5px;
outline: 3px solid var(--accent-alt)
}
.product-detail-gallery__image {
z-index: 1;
object-fit: contain;
filter: drop-shadow(0 28px 35px #294e4633);
width: 100%;
height: 100%;
transition: transform .42s cubic-bezier(.2,.72,.2,1);
position: relative
}
.product-detail-gallery__zoom {
z-index: 3;
color: #101719;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #ffffffb8;
align-items: center;
display: inline-flex;
position: absolute
}
.product-detail-gallery__zoom {
border-radius: 99px;
gap: 8px;
min-height: 38px;
padding: 0 13px;
font-size: 11px;
font-weight: 500;
top: 24px;
right: 24px
}
.product-detail-gallery__thumbs {
/* Системная полоса со стрелками рядом с миниатюрами выглядела деталью
браузера, а не галереи: листаем колесом и перетаскиванием. */
scrollbar-width: none;
grid-area: 1/1;
align-content: start;
gap: 10px;
max-height: var(--gallery-height);
display: grid;
overflow-y: auto
}
.product-detail-gallery__thumbs::-webkit-scrollbar {
width: 0;
display: none
}
.product-detail-gallery__thumb {
color: #616765;
min-width: 0;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
text-align: center;
cursor: pointer;
background: #f7f7f3;
border: 1px solid #1017191a;
border-radius: 15px;
gap: 7px;
padding: 5px 5px 8px;
font-family: inherit;
font-size: 9px;
line-height: 1.15;
transition: color .18s,border-color .18s,background .18s,transform .18s;
display: grid
}
.product-detail-gallery__thumb:hover {
transform: translateY(-2px)
}
.product-detail-gallery__thumb.is-active {
color: #101719;
background: #fff;
border-color: var(--accent-alt)
}
.product-detail-gallery__thumb:focus-visible {
outline-offset: 2px;
outline: 2px solid var(--accent-alt)
}
.product-detail-gallery__thumb-media {
aspect-ratio: 1;
background: linear-gradient(145deg,#ddf3eb,#cbe4dc);
border-radius: 10px;
place-items: center;
display: grid;
overflow: hidden
}
.product-detail-gallery__thumb-image {
object-fit: contain;
filter: drop-shadow(0 8px 7px #294e4629);
width: 88%;
height: 88%
}
.product-detail-visual__badge {
z-index: 2;
letter-spacing: .08em;
text-transform: uppercase;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
pointer-events: none;
background: #ffffff94;
border: 1px solid #1017191f;
border-radius: 99px;
padding: 10px 13px;
font-size: 10px;
position: absolute;
top: 24px;
left: 24px
}
.product-detail-summary {
align-self: center;
padding: 18px 0
}
.product-detail-eyebrow {
color: #495352;
letter-spacing: .13em;
text-transform: uppercase;
align-items: center;
gap: 10px;
font-size: 13px;
display: inline-flex
}
.product-detail-eyebrow__mark {
background: var(--accent-alt);
border-radius: 50%;
width: 7px;
height: 7px
}
.product-detail-summary__title {
letter-spacing: -.055em;
max-width: 690px;
margin-top: 20px;
font-family: var(--font-ui);
font-size: clamp(34px,3.2vw,46px);
font-weight: 400;
line-height: 1.04
}
.product-detail-lead {
color: #59605e;
max-width: 620px;
margin-top: 27px;
font-size: 18px;
line-height: 1.55
}
.product-detail-estimate {
border-top: 1px solid #10171924;
border-bottom: 1px solid #10171924;
grid-template-columns: 1fr auto;
align-items: end;
gap: 7px 24px;
margin-top: 34px;
padding: 21px 0;
display: grid
}
.product-detail-estimate__label {
color: #666c6a;
letter-spacing: .05em;
text-transform: uppercase;
font-size: 14px
}
.product-detail-estimate__value {
letter-spacing: -.035em;
grid-area: 1/2/span 2;
font-size: clamp(25px,2.2vw,34px);
font-weight: 500
}
.product-detail-estimate__note {
color: #777c7a;
font-size: 14px;
line-height: 1.35
}
.product-detail-actions {
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 28px;
display: flex
}
.product-detail-primary,.product-detail-secondary {
border-radius: 99px;
justify-content: center;
align-items: center;
min-height: 52px;
font-size: 17px;
font-weight: 500;
transition: transform .18s,background .18s,border-color .18s;
display: inline-flex
}
.product-detail-primary {
color: #fff;
font: inherit;
cursor: pointer;
background: var(--accent-alt);
border: 0;
gap: 12px;
padding: 0 24px
}
.product-detail-secondary {
border: 1px solid #10171929;
gap: 10px;
padding: 0 22px
}
.product-detail-primary:hover,.product-detail-secondary:hover {
transform: translateY(-2px)
}
.product-detail-secondary:hover {
border-color: #1017196b
}
.product-detail-primary:focus-visible,.product-detail-secondary:focus-visible {
outline-offset: 3px;
outline: 2px solid var(--accent-alt)
}
.product-detail-specs {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px 28px;
margin-top: 36px;
display: grid
}
.product-detail-specs__item {
border-top: 1px solid #1017191c;
padding-top: 13px
}
.product-detail-specs__term {
color: #7b807e;
letter-spacing: .07em;
text-transform: uppercase;
font-size: 12px
}
.product-detail-specs__value {
margin-top: 7px;
font-size: 16px;
line-height: 1.35
}
.product-detail-personalization {
background: #fff;
padding: 90px 0 118px
}
.product-detail-section-head {
grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
align-items: end;
gap: 24px 80px;
display: grid
}
.product-detail-section-head .product-detail-eyebrow {
grid-column: 1/-1
}
.product-detail-section-head__title,.product-detail-process__title,.product-detail-order__title {
letter-spacing: -.055em;
font-size: clamp(46px,5.1vw,72px);
font-weight: 400;
line-height: .98
}
.product-detail-section-head__title .heading-accent,.product-detail-process__title .heading-accent,.product-detail-order__title .heading-accent {
color: var(--accent-alt);
font-family: var(--font-ui);
font-style: normal
}
.product-detail-section-head__text {
color: #5b6260;
padding-bottom: 5px;
font-size: 18px;
line-height: 1.55
}
.product-detail-options {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 14px;
margin-top: 60px;
display: grid
}
.product-detail-options__item {
background: #f7f7f3;
border: 1px solid #1017191a;
border-radius: 22px;
min-height: 260px;
padding: 27px
}
.product-detail-options__number {
color: var(--accent-alt);
background: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 46px;
height: 46px;
font-size: 22px;
display: inline-flex
}
.product-detail-options__title {
letter-spacing: -.025em;
margin-top: 72px;
font-size: 22px;
font-weight: 500
}
.product-detail-options__text {
color: #616765;
max-width: 340px;
margin-top: 11px;
font-size: 17px;
line-height: 1.5
}
.product-detail-process {
color: #fff;
background: #11191b;
border-radius: 30px;
margin: 16px;
padding: 112px 0
}
.product-detail-process__grid {
grid-template-columns: minmax(0,.86fr) minmax(440px,1.14fr);
gap: clamp(70px,10vw,170px);
display: grid
}
.product-detail-eyebrow--light {
color: #ffffffa3
}
.product-detail-process__title {
max-width: 660px;
margin-top: 24px
}
.product-detail-process__text {
color: #ffffff94;
margin-top: 28px;
font-size: 18px;
line-height: 1.58
}
.product-detail-process__list {
border-top: 1px solid #ffffff29
}
.product-detail-process__step {
border-bottom: 1px solid #ffffff29;
grid-template-columns: minmax(48px,max-content) minmax(0,1fr);
gap: 28px;
padding: 25px 0 27px;
display: grid
}
.product-detail-process__step-index {
color: var(--accent-alt);
letter-spacing: .08em;
font-size: 30px
}
.product-detail-process__step-title {
font-size: 23px;
font-weight: 500
}
.product-detail-process__step-text {
color: #ffffff91;
margin-top: 8px;
font-size: 18px;
line-height: 1.5
}
.product-detail-order {
padding: 120px 0 126px
}
.product-detail-order__grid {
grid-template-columns: minmax(320px,.72fr) minmax(540px,1.28fr);
gap: clamp(70px,10vw,168px);
display: grid
}
.product-detail-order__title {
margin-top: 23px
}
.product-detail-order__intro-text {
color: #5a615f;
max-width: 420px;
margin-top: 25px;
font-size: 16px;
line-height: 1.55
}
.product-detail-contacts {
gap: 12px;
margin-top: 38px;
display: grid
}
.product-detail-contacts__link {
align-items: center;
gap: 11px;
width: fit-content;
font-size: 15px;
display: inline-flex
}
.product-detail-contacts__icon {
color: var(--accent-alt)
}
.product-detail-order__form-wrap {
background: #fff;
border: 1px solid #10171917;
border-radius: 28px;
min-height: 520px;
padding: clamp(26px,3vw,44px);
box-shadow: 0 20px 70px #27343112
}
.product-detail-form,.product-detail-form__field {
display: grid
}
.product-detail-form {
gap: 21px
}
.product-detail-form__row {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 16px;
display: grid
}
.product-detail-form__field {
gap: 9px
}
.product-detail-form__caption {
letter-spacing: .05em;
text-transform: uppercase;
font-size: 11px
}
.product-detail-form__input,.product-detail-form__textarea {
color: #101719;
width: 100%;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
background: #f9f9f6;
border: 1px solid #10171921;
border-radius: 12px;
outline: none;
font-family: inherit;
font-size: 14px;
transition: border-color .18s,box-shadow .18s
}
.product-detail-form__input {
height: 50px;
padding: 0 15px
}
.product-detail-form__textarea {
min-height: 112px;
padding: 14px 15px
}
.product-detail-form__input:focus,.product-detail-form__textarea:focus {
border-color: var(--accent-alt);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-alt) 12%, transparent)
}
.product-detail-form__input::placeholder,.product-detail-form__textarea::placeholder {
color: #8f9492
}
.product-detail-form__file {
cursor: pointer;
border: 1px dashed #10171933;
border-radius: 12px;
grid-template-columns: auto 1fr;
align-items: center;
min-height: 72px;
padding: 13px 16px;
position: relative;
overflow: hidden;
gap: 13px!important
}
.product-detail-form__file-icon {
color: var(--accent-alt)
}
.product-detail-form__file-copy {
gap: 4px;
display: grid;
letter-spacing: 0!important;
text-transform: none!important
}
.product-detail-form__file-title {
font-size: 13px;
font-weight: 500
}
.product-detail-form__file-hint {
color: #7b807e;
font-size: 10px
}
.product-detail-form__file-input {
cursor: pointer;
opacity: 0;
position: absolute;
inset: 0
}
.product-detail-form__footer {
justify-content: space-between;
align-items: center;
gap: 24px;
display: flex
}
.product-detail-form__disclaimer {
color: #7e8381;
max-width: 300px;
font-size: 10px;
line-height: 1.4
}
.product-detail-form__submit {
color: #fff;
min-height: 52px;
font-style: inherit;
font-variant: inherit;
font-stretch: inherit;
line-height: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
cursor: pointer;
background: var(--accent-alt);
border-radius: 99px;
flex: none;
justify-content: center;
align-items: center;
gap: 10px;
padding: 0 22px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
transition: transform .18s;
display: inline-flex
}
.product-detail-form__submit:hover {
transform: translateY(-2px)
}
.product-detail-success {
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 430px;
display: flex
}
.product-detail-success__mark {
color: #fff;
background: var(--accent-alt);
border-radius: 50%;
justify-content: center;
align-items: center;
width: 52px;
height: 52px;
display: inline-flex
}
.product-detail-success__title {
letter-spacing: -.045em;
margin-top: 26px;
font-size: clamp(30px,3vw,44px);
font-weight: 400
}
.product-detail-success__text {
color: #5b6260;
max-width: 500px;
margin-top: 14px;
font-size: 15px;
line-height: 1.55
}
.product-detail-success__reset {
color: #101719;
font: inherit;
cursor: pointer;
background: 0 0;
border-bottom: 1px solid;
margin-top: 30px
}
.product-order-modal {
z-index: 900;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #0a0f10ad;
place-items: center;
padding: 24px;
animation: .18s ease-out product-order-modal-fade;
display: grid;
position: fixed;
inset: 0
}
.product-order-modal__dialog {
color: #101719;
background: #fff;
border: 1px solid #ffffff2e;
border-radius: 30px;
grid-template-columns: minmax(300px,.74fr) minmax(0,1.26fr);
width: min(1120px,100%);
max-height: calc(100dvh - 48px);
animation: .24s cubic-bezier(.2,.72,.2,1) product-order-modal-enter;
display: grid;
position: relative;
overflow: hidden;
box-shadow: 0 34px 100px #00000047
}
.product-order-modal__close {
z-index: 3;
color: #101719;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: #ffffffe6;
border: 1px solid #1017191a;
border-radius: 50%;
place-items: center;
width: 42px;
height: 42px;
transition: color .18s,background .18s,transform .18s;
display: grid;
position: absolute;
top: 18px;
right: 18px
}
.product-order-modal__close:hover {
color: #fff;
background: var(--accent-alt);
transform: rotate(5deg)
}
.product-order-modal__close:focus-visible {
outline-offset: 3px;
outline: 2px solid var(--accent-alt)
}
.product-order-modal__intro {
background: #f2f4f7;
flex-direction: column;
min-width: 0;
padding: 48px 38px 42px;
display: flex
}
.product-order-modal__title {
letter-spacing: -.06em;
margin-top: 25px;
font-size: clamp(44px,4vw,62px);
font-weight: 400;
line-height: .94
}
.product-order-modal__title-accent {
color: var(--accent-alt);
display: block
}
.product-order-modal__intro-text {
color: #5a615f;
margin-top: 24px;
font-size: 16px;
line-height: 1.52
}
.product-order-modal__product {
border-bottom: 1px solid #1017191f;
gap: 8px;
margin-top: auto;
padding: 27px 0 22px;
display: grid
}
.product-order-modal__product-label {
color: #666c6a;
letter-spacing: .07em;
text-transform: uppercase;
font-size: 11px;
font-weight: 500
}
.product-order-modal__product-price {
letter-spacing: -.035em;
font-size: 28px;
font-weight: 500
}
.product-order-modal__form-wrap {
overscroll-behavior: contain;
min-width: 0;
padding: 46px 48px;
overflow-y: auto
}
.product-order-modal__form-wrap .product-detail-success {
min-height: 500px
}
@keyframes product-order-modal-fade {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes product-order-modal-enter {
0% {
opacity: 0;
transform: translateY(18px)scale(.985)
}
to {
opacity: 1;
transform: translateY(0)scale(1)
}
}
@media (prefers-reduced-motion:reduce) {.product-order-modal,.product-order-modal__dialog{
animation: auto;
animation-timeline: none
}.product-detail-gallery__image{
transition: none
}
}
html[data-theme=dark] .product-detail-page,html[data-theme=dark] .product-detail-order {
color: var(--ink);
background: #15191b
}
html[data-theme=dark] .product-detail-personalization,html[data-theme=dark] .product-detail-order__form-wrap {
color: var(--ink);
background: #1d2325
}
html[data-theme=dark] .product-detail-options__item,html[data-theme=dark] .product-detail-form__input,html[data-theme=dark] .product-detail-form__textarea {
color: var(--ink);
background: #161b1d
}
html[data-theme=dark] .product-detail-options__number {
background: #242b2d
}
html[data-theme=dark] .product-detail-gallery__thumb {
color: var(--muted);
background: #1d2325;
border-color: #ffffff1f
}
html[data-theme=dark] .product-detail-gallery__thumb.is-active {
color: var(--ink);
border-color: var(--aqua);
background: #242b2d
}
html[data-theme=dark] .product-detail-gallery__zoom {
color: var(--ink);
background: #1d2325c7
}html[data-theme=dark] :is(.product-detail-lead,.product-detail-estimate__label,.product-detail-estimate__note,.product-detail-specs__term,.product-detail-section-head__text,.product-detail-options__text,.product-detail-order__intro-text,.product-detail-form__disclaimer,.product-detail-success__text){
color: var(--muted)
}
html[data-theme=dark] :is(.product-detail-form__input,.product-detail-form__textarea,.product-detail-success__reset) {
color: var(--ink)
}
html[data-theme=dark] :is(.product-detail-estimate,.product-detail-specs__item,.product-detail-options__item,.product-detail-order__form-wrap,.product-detail-form__input,.product-detail-form__textarea,.product-detail-form__file,.product-detail-secondary) {
border-color: #ffffff21
}
html[data-theme=dark] .product-order-modal__dialog,html[data-theme=dark] .product-order-modal__form-wrap {
color: var(--ink);
background: #1d2325
}
html[data-theme=dark] .product-order-modal__intro {
background: #161b1d
}
html[data-theme=dark] .product-order-modal__intro-text,html[data-theme=dark] .product-order-modal__product-label {
color: var(--muted)
}
html[data-theme=dark] .product-order-modal__product {
border-color: #ffffff21
}
html[data-theme=dark] .product-order-modal__close {
color: var(--ink);
background: #242a2deb;
border-color: #ffffff21
}
@media (width<=1080px) {
.product-detail-hero__grid {
grid-template-columns: minmax(0,1fr) minmax(360px,.9fr);
gap: 48px
}
.product-detail-gallery {
--gallery-height: 440px
}
.product-detail-gallery {
grid-template-columns: 78px minmax(0,1fr)
}
.product-detail-process__grid,.product-detail-order__grid {
gap: 70px
}
}
@media (width<=820px) {
.product-detail-hero {
padding-top: 126px;
padding-bottom: 74px
}
.product-detail-hero__grid,.product-detail-process__grid,.product-detail-order__grid {
grid-template-columns: 1fr
}
.product-detail-gallery {
position: static
}
.product-detail-gallery {
--gallery-height: 470px
}
.product-detail-gallery {
grid-template-columns: 1fr
}
.product-detail-visual {
grid-area: 1/1
}
.product-detail-gallery__thumbs {
scrollbar-width: none;
grid-area: 2/1;
max-height: none;
padding: 2px;
display: flex;
overflow-x: auto;
overflow-y: hidden
}
.product-detail-gallery__thumbs::-webkit-scrollbar {
display: none
}
.product-detail-gallery__thumb {
flex: none;
width: 108px
}
.product-detail-summary {
padding-top: 0
}
.product-detail-section-head {
grid-template-columns: 1fr
}
.product-detail-section-head .product-detail-eyebrow {
grid-column: auto
}
.product-detail-section-head__text {
padding-bottom: 0
}
.product-detail-options {
grid-template-columns: 1fr
}
.product-detail-options__item {
min-height: 220px
}
.product-detail-options__title {
margin-top: 48px
}
.product-detail-process {
padding: 84px 0
}
.product-detail-order__grid {
gap: 54px
}
.product-order-modal__dialog {
grid-template-columns: 1fr;
max-width: 680px;
overflow-y: auto
}
.product-order-modal__intro {
padding: 36px 34px 30px
}
.product-order-modal__title-accent {
display: inline
}
.product-order-modal__product {
margin-top: 30px
}
.product-order-modal__form-wrap {
padding: 34px;
overflow: visible
}
.product-order-modal__form-wrap .product-detail-success {
min-height: 390px
}
}
@media (width<=600px) {
.product-detail-hero {
padding-top: 116px;
padding-bottom: 62px
}
.product-detail-hero__grid {
gap: 38px
}
.product-detail-gallery {
--gallery-height: 390px
}
.product-detail-visual {
border-radius: 22px
}
.product-detail-gallery__image {
width: 82%;
max-height: 280px
}
.product-detail-gallery__zoom {
justify-content: center;
gap: 0;
width: 38px;
padding: 0;
font-size: 0;
top: 14px;
right: 14px
}
.product-detail-gallery__thumb {
border-radius: 13px;
width: 88px;
font-size: 8px
}
.product-detail-visual__badge {
padding: 8px 10px;
font-size: 8px;
top: 14px;
left: 14px
}
.product-detail-summary__title {
font-size: clamp(28px,8vw,36px)
}
.product-detail-lead {
margin-top: 20px;
font-size: 15px
}
.product-detail-estimate {
grid-template-columns: 1fr
}
.product-detail-estimate__value {
grid-area: auto;
margin-top: 3px
}
.product-detail-actions {
flex-direction: column;
align-items: stretch
}
.product-detail-primary,.product-detail-secondary {
width: 100%
}
.product-detail-specs {
gap: 16px 18px
}
.product-detail-personalization {
padding: 78px 0 82px
}
.product-detail-section-head__title,.product-detail-process__title,.product-detail-order__title {
font-size: clamp(40px,12vw,52px)
}
.product-detail-options {
margin-top: 40px
}
.product-detail-options__item {
border-radius: 18px;
min-height: 205px;
padding: 22px
}
.product-detail-process {
border-radius: 23px;
margin: 10px;
padding: 68px 0
}
.product-detail-process__grid {
gap: 48px
}
.product-detail-process__step {
grid-template-columns: minmax(36px,max-content) minmax(0,1fr);
gap: 14px
}
.product-detail-order {
padding: 80px 0 88px
}
.product-detail-order__form-wrap {
border-radius: 20px;
min-height: 0;
padding: 22px 16px
}
.product-detail-form__row {
grid-template-columns: 1fr
}
.product-detail-form__footer {
flex-direction: column;
align-items: stretch
}
.product-detail-form__submit {
width: 100%
}
.product-detail-success {
min-height: 360px
}
.product-order-modal {
padding: 8px
}
.product-order-modal__dialog {
border-radius: 22px;
max-height: calc(100dvh - 16px)
}
.product-order-modal__close {
width: 38px;
height: 38px;
top: 12px;
right: 12px
}
.product-order-modal__intro {
padding: 28px 20px 24px
}
.product-order-modal__title {
max-width: calc(100% - 42px);
margin-top: 20px;
font-size: 42px
}
.product-order-modal__intro-text {
margin-top: 18px;
font-size: 14px
}
.product-order-modal__product {
margin-top: 22px;
padding: 20px 0 17px
}
.product-order-modal__product-price {
font-size: 24px
}
.product-order-modal__intro .product-detail-contacts {
margin-top: 22px
}
.product-order-modal__form-wrap {
padding: 24px 16px
}
.product-order-modal__form-wrap .product-detail-success {
min-height: 340px
}
}
/* Сцены героя переключаются в настройках (боковая панель, вкладка «Фон») и
живут на атрибуте html[data-hero-scene]. Правила идут в конце файла, потому
что должны перебивать и базовый герой, и тёмную тему: селекторы у них одной
специфичности, решает порядок. */
html[data-hero-scene=stage] .hero--reference {
color: #fff;
background:
linear-gradient(180deg,#0b0806cc,#0b080633 38%,#0b080699),
url("/assets/images/hero-stage.jpg") 50% 62% / cover no-repeat,
#0b0806
}
/* Вторая тёмная сцена — тот же зал, но с наградами на колоннах по краям. */
html[data-hero-scene=stage2] .hero--reference {
color: #fff;
background:
linear-gradient(180deg,#0b0806cc,#0b080633 38%,#0b080699),
url("/assets/images/hero-stage-2.jpg") 50% 62% / cover no-repeat,
#0b0806
}
/* Фон компании 1 — зал с подиумом и наградами на тумбах. Кадр прижат к верху
(50% 0%) и увеличен до 110%: при cover подиум уходил под первый экран, а так
он попадает в кадр целиком. */
html[data-hero-scene=company1] .hero--reference {
color: #fff;
background:
linear-gradient(180deg,#0b0806cc,#0b080633 38%,#0b080699),
url("/assets/images/hero-stage-company-1.jpg") 50% 0% / 110% no-repeat,
#0b0806
}
html[data-hero-scene=stage] .hero--reference:after,
html[data-hero-scene=stage2] .hero--reference:after,
html[data-hero-scene=company1] .hero--reference:after {
/* Свет снизу на светлой сцене был белым — на тёмной он выбеливал подиум. */
background: radial-gradient(clamp(420px,52%,860px) 100% at 50% 100%,#ffb26b26,#ff8a3d14 45%,#0000 82%)
}
html[data-hero-scene=stage] .hero--reference:before,
html[data-hero-scene=stage2] .hero--reference:before,
html[data-hero-scene=company1] .hero--reference:before {
opacity: .06
}
html[data-hero-scene=stage] .hero__copy .hero__title,
html[data-hero-scene=stage] .hero__callout,
html[data-hero-scene=stage] .hero__callout-title,
html[data-hero-scene=stage2] .hero__copy .hero__title,
html[data-hero-scene=stage2] .hero__callout,
html[data-hero-scene=stage2] .hero__callout-title,
html[data-hero-scene=company1] .hero__copy .hero__title,
html[data-hero-scene=company1] .hero__callout,
html[data-hero-scene=company1] .hero__callout-title {
color: #fff
}
html[data-hero-scene=stage] .hero__callout-material,
html[data-hero-scene=stage2] .hero__callout-material,
html[data-hero-scene=company1] .hero__callout-material {
color: #ffffffb8
}
html[data-hero-scene=stage] .hero__lead,
html[data-hero-scene=stage2] .hero__lead,
html[data-hero-scene=company1] .hero__lead {
color: #ffffffc4
}
html[data-hero-scene=stage] .hero__laurel,
html[data-hero-scene=stage2] .hero__laurel,
html[data-hero-scene=company1] .hero__laurel {
opacity: .8
}
/* Боковые награды на тёмной сцене темнее. Не через .hero__award: такое
правило перебивает покой, но не кейфреймы, и слайд темнел бы рывком в конце
перелёта. */
html[data-hero-scene=stage] .hero__carousel,
html[data-hero-scene=stage2] .hero__carousel,
html[data-hero-scene=company1] .hero__carousel {
--hero-side-filter: saturate(.72) brightness(.6) blur(.8px);
/* Софит сверху: тень под предметом чёрная и плотная, пол глянцевый. */
--hero-shadow-ink: #000;
--hero-shadow-alpha: 46%;
--hero-floor-alpha: 72%;
--hero-reflection: .26;
--hero-rim: #ffffff24;
--hero-depth1-filter: saturate(.86) brightness(.66) blur(.5px);
--hero-depth2-filter: saturate(.72) brightness(.44) blur(1.4px)
}
@media (width<=900px) {
html[data-hero-scene=stage] .hero--reference {
background:
linear-gradient(180deg,#0b0806cc,#0b080633 38%,#0b080699),
url("/assets/images/hero-stage-mobile.jpg") 50% 62% / cover no-repeat,
#0b0806
}
html[data-hero-scene=stage2] .hero--reference {
background:
linear-gradient(180deg,#0b0806cc,#0b080633 38%,#0b080699),
url("/assets/images/hero-stage-2-mobile.jpg") 50% 62% / cover no-repeat,
#0b0806
}
/* На узком экране 110% по ширине оставляли бы нижнюю половину героя
залитой #0b0806: кадр 16:9 такой высоты не набирает. Здесь cover. */
html[data-hero-scene=company1] .hero--reference {
background:
linear-gradient(180deg,#0b0806cc,#0b080633 38%,#0b080699),
url("/assets/images/hero-stage-company-1-mobile.jpg") 50% 30% / cover no-repeat,
#0b0806
}
}
/* Серая неоморфная сцена — светлая, поэтому текст героя остаётся тёмным:
перекрашивать нечего, хватает лёгкой засветки под заголовком. */
html[data-hero-scene=neo] .hero--reference {
background:
linear-gradient(180deg,#ffffffbf,#ffffff36 42%,#f4f5f7cc),
url("/assets/images/hero-stage-neo.jpg") 50% 62% / cover no-repeat,
#eef0f2
}
html[data-hero-scene=neo] .hero--reference:after {
background: radial-gradient(clamp(420px,52%,860px) 100% at 50% 100%,#ffffffe6,#ffffff9c 44%,#0000 84%)
}
@media (width<=900px) {
html[data-hero-scene=neo] .hero--reference {
background:
linear-gradient(180deg,#ffffffbf,#ffffff36 42%,#f4f5f7cc),
url("/assets/images/hero-stage-neo-mobile.jpg") 50% 62% / cover no-repeat,
#eef0f2
}
}
/* Стеклянная сцена — самая светлая: под заголовком нужен заметный вымыв, иначе
тёмный текст ложится на блики и рассыпается. */
html[data-hero-scene=glass] .hero--reference {
background:
linear-gradient(180deg,#ffffffd9,#ffffff4d 44%,#eef1f6cc),
url("/assets/images/hero-stage-glass.jpg") 50% 58% / cover no-repeat,
#eef1f6
}
html[data-hero-scene=glass] .hero--reference:after {
background: radial-gradient(clamp(420px,52%,860px) 100% at 50% 100%,#fffffff2,#ffffffa8 44%,#0000 84%)
}
@media (width<=900px) {
html[data-hero-scene=glass] .hero--reference {
background:
linear-gradient(180deg,#ffffffd9,#ffffff4d 44%,#eef1f6cc),
url("/assets/images/hero-stage-glass-mobile.jpg") 50% 58% / cover no-repeat,
#eef1f6
}
}
/* Экспериментальная сцена — временная заглушка под будущий вариант: тот же
свет и та же геометрия, но собранные градиентами, без фотографии. */
html[data-hero-scene=lab] .hero--reference {
color: #101416;
background:
radial-gradient(120% 90% at 50% 108%,#ffd9c880,#0000 62%),
radial-gradient(70% 55% at 18% 8%,#8fe7ef4d,#0000 70%),
radial-gradient(70% 55% at 84% 4%,color-mix(in srgb, var(--accent) 25%, transparent),#0000 70%),
linear-gradient(180deg,#fdfcfb,#eef1f5)
}
html[data-hero-scene=lab] .hero--reference:after {
background: radial-gradient(clamp(420px,52%,860px) 100% at 50% 100%,#fff0,#ffffff8f 42%,#0000 84%)
}
/* Бирюзовый акцент из подборки заказчика. Растровые ассеты (знак и лавровые
ветки) нарисованы коралловыми — им докручиваем оттенок фильтром, иначе они
останутся единственным оранжевым пятном на странице. */
html[data-accent=teal] {
--accent: #17a2a8;
--accent-alt: #14989e;
--accent-soft: #3bbfc2;
--accent-deep: #0d6f74;
--accent-ink: #0f8b90
}
html[data-accent=teal] .hero__laurel {
filter: hue-rotate(172deg) saturate(.86)
}
html[data-accent=teal] .page .hero__laurel--left,
html[data-accent=teal] .page .hero__laurel--right {
/* Фильтр не должен слетать на время анимации появления. */
filter: hue-rotate(172deg) saturate(.86)
}
/* Плитка раздела в мегаменю: фотография категории и подпись. Заменила текстовые
столбцы — в них 27 ссылок читались как оглавление, а не как каталог. */
.site-header__catalog-cards {
grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
align-content: start;
gap: 10px;
display: grid
}
.site-header__catalog-card {
color: var(--ink);
background: #fff;
border: 1px solid #171a1d14;
border-radius: 16px;
align-items: center;
gap: 12px;
min-width: 0;
padding: 9px 14px 9px 9px;
transition: border-color .18s,box-shadow .18s,transform .18s;
display: flex
}
.site-header__catalog-card:hover {
border-color: color-mix(in srgb, var(--accent) 42%, transparent);
transform: translateY(-2px);
box-shadow: 0 12px 26px #141e2114
}
.site-header__catalog-card:focus-visible {
outline-offset: 2px;
outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent)
}
.site-header__catalog-card-media {
background: #f2f4f7;
border-radius: 11px;
flex: none;
width: 46px;
height: 46px;
display: block;
overflow: hidden
}
.site-header__catalog-card-image {
object-fit: cover;
width: 100%;
height: 100%;
display: block
}
.site-header__catalog-card-label {
letter-spacing: -.01em;
min-width: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.2
}
@media (width<=1180px) {
.site-header__catalog-cards {
grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
gap: 8px
}
.site-header__catalog-card {
padding: 8px 12px 8px 8px
}
.site-header__catalog-card-media {
width: 40px;
height: 40px;
border-radius: 10px
}
.site-header__catalog-card-label {
font-size: 14px
}
}
html[data-theme=dark] .site-header__catalog-card {
color: var(--ink);
background: #ffffff0a;
border-color: #ffffff1f
}
html[data-theme=dark] .site-header__catalog-card-media {
background: #ffffff14
}
/* ─────────────────────────────────────────────────────────────────────────
Подгонка под основную гарнитуру
Unbounded примерно на пятую часть шире Lab Grotesque, под который были
подобраны кегли и ширины коробок. Правила ниже не меняют вид макета на
привычных строках, а страхуют длинные слова: заголовок переносится по
слогам вместо того, чтобы выехать за карточку. Держим их в конце файла,
чтобы они перекрывали одноимённые правила выше при равной специфичности.
───────────────────────────────────────────────────────────────────────── */
:is(.heading-accent,
.company-hero__title, .company-section__title, .company-cta__title,
.company-expertise__title, .company-route__item-title,
.contact-hero__title, .contact-brief__title, .contact-location__title,
.factory-hero__title, .factory-capability__title, .factory-capability__text,
.factory-process__title, .factory-step__title, .factory-quality__title,
.catalog-hero__title, .catalog-section__title, .catalog-category-card__title,
.catalog-theme-card__title, .catalog-blank-card__title,
.product-category-hero__title, .product-tile__title,
.product-detail-process__step-title,
.quick-catalog__card-title, .thematic-catalog__card-title,
.production__step-title, .production__step-text,
.reviews-hero__title, .reviews-project__title, .feed-page-hero__title,
.live-feed__lead) {
overflow-wrap: break-word;
hyphens: auto;
}
/* Логотип в шапке набран без переносов, а рядом с ним в одну строку живут
поиск и бургер. Фиксированные 28px новой гарнитурой наезжали на кнопки:
до 600px кегль тянется за шириной окна и в самый узкий экран укладывается. */
@media (width<=600px) {
.site-header__brand-name {
font-size: clamp(13px,4vw,24px)
}
}
/* Полоса преимуществ: на узких экранах на текст оставалось около 70px, и
«Гарантия» новой гарнитурой обрезалась на середине слова. Ставим значок
над подписью — колонка отдаёт тексту всю свою ширину. */
@media (width<=600px) {
.trust-strip__item {
grid-template-columns: minmax(0,1fr);
align-items: start;
justify-items: start;
gap: 10px
}
}
/* Шапка «живой ленты» на узких экранах оставалась двухколоночной: правило с
одной колонкой перебивалось более поздним, и лид уезжал за край. */
@media (width<=900px) {
.live-feed__head {
grid-template-columns: minmax(0,1fr)
}
}
/* Заголовок раздела и подпись к нему на мобильном не помещались в одну
строку flex-ряда — ставим их друг под другом. */
@media (width<=600px) {
.company-section__heading {
flex-direction: column;
align-items: stretch;
gap: 18px
}
}
/* Похожие награды на карточке товара. Сетка повторяет каталожную, чтобы
плитки в обоих местах ломались на одних и тех же ширинах. */
.product-detail-similar {
background: var(--milk);
padding: 90px 0 104px
}
.product-detail-similar__grid {
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 42px 14px;
margin-top: 44px;
display: grid
}
.product-detail-similar__all {
color: var(--ink);
border-bottom: 1px solid #171a1d38;
align-items: center;
flex-wrap: wrap;
gap: 4px 10px;
max-width: 100%;
margin-top: 44px;
padding-bottom: 5px;
transition: color .2s, border-color .2s;
display: inline-flex
}
.product-detail-similar__all:hover {
color: var(--accent);
border-color: var(--accent)
}
@media (width<=1180px) {
.product-detail-similar__grid {
grid-template-columns: repeat(3,minmax(0,1fr))
}
}
@media (width<=820px) {
.product-detail-similar__grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media (width<=600px) {
.product-detail-similar {
padding: 64px 0 72px
}
.product-detail-similar__grid {
gap: 32px 10px;
margin-top: 32px
}
}
/* ── Раскладка знака в шапке ────────────────────────────────────────────────
Горизонтальная — по умолчанию, без атрибута: знак слева, надпись и подпись
колонкой справа. Вертикальная включается из панели настроек и ставит их
друг под другом. Подпись общая для обоих режимов. */
.site-header__brand-copy {
display: grid;
gap: 2px;
min-width: 0
}
.site-header__brand-tagline {
color: var(--muted);
letter-spacing: .02em;
text-transform: uppercase;
font-size: clamp(8px,.62vw,10px);
font-weight: 600;
line-height: 1.15;
white-space: nowrap
}
/* Вертикальный знак стоит слева от обеих строк шапки и делит с ними высоту.
Вынимаем его из сетки первой строки: сама сетка расставляет детей по явным
grid-area, поэтому исчезновение знака из потока их не сдвигает. Опорой
служит сама шапка (она fixed), значит на время режима снимаем relative с
первой строки — выпадающий каталог fixed, а панель поиска якорится к своему
полю, так что им это безразлично. */
html[data-logo=vertical] .site-header {
--brand-column: clamp(168px,17vw,236px)
}
html[data-logo=vertical] .site-header__inner {
position: static
}
html[data-logo=vertical] .site-header__brand {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: var(--brand-column);
position: absolute;
top: var(--topbar-current-height);
bottom: 0;
left: var(--page-gutter);
/* Знак лежит поперёк обеих строк шапки, а вторая строка (.site-header__navbar)
идёт следом в потоке и тоже позиционирована. Без z-index она выигрывала по
порядку документа и накрывала нижнюю половину знака: там не срабатывали ни
ссылка на главную, ни ховер. */
z-index: 2
}
html[data-logo=vertical] .site-header__brand-copy {
justify-items: center;
text-align: center
}
html[data-logo=vertical] .site-header__brand-tagline {
white-space: normal
}
/* Первая строка уступает знаку колонку слева. */
html[data-logo=vertical] .site-header__inner {
padding-left: calc(var(--brand-column) + clamp(14px,1.4vw,22px))
}
/* Меню остаётся по центру страницы, как и в горизонтальной раскладке: отступ
зеркальный, поэтому середина ряда не смещается, а слева остаётся зазор, за
который пункты не заходят под знак. Отступ на самом ряду, а не на строке:
соцсети прижаты к её правому краю абсолютом и уехали бы вместе с ним. */
html[data-logo=vertical] .site-header__nav {
padding-inline: calc(var(--brand-column) + clamp(14px,1.4vw,22px))
}
/* От 1181 до 1400 ряд меню шире, чем остаток строки с зеркальными отступами,
и пункты полезли бы под знак. Там убираем правый отступ: меню чуть правее
середины, зато не наезжает. Ниже 1181 меню и так уходит в бургер. */
@media (width>=1181px) and (width<=1400px) {
html[data-logo=vertical] .site-header__nav {
padding-right: 0
}
}
/* На узких экранах знак возвращается в строку: колонка слева там съела бы
всё место у поиска и бургера. */
@media (width<=900px) {
html[data-logo=vertical] .site-header__inner {
position: relative
}
html[data-logo=vertical] .site-header__brand {
width: max-content;
position: static
}
html[data-logo=vertical] .site-header__inner {
padding-left: 0
}
html[data-logo=vertical] .site-header__nav {
padding-inline: 0
}
}
/* На узких экранах знак делит строку с поиском и бургером: подпись там не
помещается ни в одну из раскладок и только выталкивала кнопки за экран. */
@media (width<=600px) {
.site-header__brand-tagline {
display: none
}
html[data-logo=vertical] .site-header__brand {
gap: 2px
}
}
/* ── Карусель наград: кольцо ────────────────────────────────────────────────
Второй вид первого экрана: награды стоят по кругу и поворачиваются вместе
с ним. В отличие от дуги не пропадает ни одна — уходящая уезжает вглубь и
возвращается с другой стороны.
Только от 901px: кольцу нужна ширина, а на узком экране выноска и награды
налезали друг на друга. Ниже остаётся раскладка по дуге — она и рассчитана
на один экран в ширину.
Место каждой награды задаёт --ring-step, угловой сдвиг от активной, его
проставляет hero.js: из классов active/left/right/hidden его не вывести,
дальние слайды в них неразличимы. Шаг знаковый, слайд едет коротким путём,
а при чётном числе наград дальняя точка (+половина круга) совпадает с минус
половиной — переход через заднюю точку проходит без скачка.
Кольцо отодвинуто назад ровно на радиус: иначе translateZ придвигал бы
переднюю награду к зрителю, перспектива её увеличивала и она вылезала за
сцену. Кейфреймы дуги сняты — они двигали бы слайд параллельно повороту. */
@media (width>=901px) {
html[data-hero-carousel-mode=ring] .hero__carousel .hero__stage {
--ring-radius: clamp(320px,31vw,520px);
perspective: 1500px;
perspective-origin: 50% 46%
}
/* Нижний отступ .hero__awards нужен только дуге (проценты высоты бокса
считаются от него); в кольце убираем, чтобы круг-подиум на сцене и
награды внутри .hero__awards считали высоту от одной величины. */
html[data-hero-carousel-mode=ring] .hero__carousel {
--hero-awards-inset: 0px
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__awards {
inset: 0;
transform-style: preserve-3d;
transform: translateZ(calc(var(--ring-radius, 400px) * -1))
}
/* Круг-подиум: лежит в полу на уровне подошв (низ бокса награды), центром
совпадает с центром кольца — отодвинут на радиус так же, как
.hero__awards. Перспектива сцены сама сплющивает его в эллипс, по кромке
которого стоят награды; он шире кольца на вылет теней. Рисунок мягкий:
затемнение к центру и тонкая кромка, без второго пьедестала.
Живёт на сцене, а не внутри .hero__awards: в общем 3D-контексте Chrome
делит слои наград по плоскости круга, и боковую награду на 1366×768
срезало вертикальной полосой. Здесь он просто под наградами. */
html[data-hero-carousel-mode=ring] .hero__carousel .hero__stage:before {
content: "";
z-index: 1;
pointer-events: none;
position: absolute;
left: 50%;
top: calc(var(--hero-award-top) + var(--hero-award-height) + 2px);
width: calc(var(--ring-radius) * 2 + clamp(140px, 14vw, 240px));
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--hero-shadow-ink) calc(var(--hero-floor-alpha) * .34), transparent), color-mix(in srgb, var(--hero-shadow-ink) calc(var(--hero-floor-alpha) * .2), transparent) 52%, transparent 76%);
box-shadow: inset 0 0 0 1px var(--hero-rim);
transform: translate(-50%, -50%) translateZ(calc(var(--ring-radius) * -1)) rotateX(90deg)
}
/* Награда едет по кольцу (rotateY на угол шага, translateZ на радиус) и
разворачивается обратно к зрителю: фото награды — плоский вырез, и,
повёрнутый на 60°, он читался картонкой, а не предметом. --ring-nudge —
подача в долях шага, пока кольцо тянут: hero.js ставит её инлайном на
карусель по смещению указателя, и кольцо идёт за пальцем. */
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award {
--ring-angle: 60deg;
--hero-active-y: 0px;
--hero-floor-opacity: 1;
--hero-floor-scale: 1;
opacity: 1;
visibility: visible;
filter: none;
animation: none;
transform-style: preserve-3d;
transform:
translate(-50%, var(--hero-active-y))
rotateY(calc((var(--ring-step, 0) + var(--ring-nudge, 0)) * var(--ring-angle)))
translateZ(var(--ring-radius))
rotateY(calc(-1 * (var(--ring-step, 0) + var(--ring-nudge, 0)) * var(--ring-angle)));
transition: transform .72s cubic-bezier(.32,.78,.28,1)
}
/* Пока тянут — без перехода, иначе кольцо отстаёт от пальца. Дуга снимает
переходы с !important на активном и боковых, кольцу нужно то же на всех
слайдах: у него нет скрытых. */
html[data-hero-carousel-mode=ring] .hero__carousel--dragging .hero__award {
transition: none!important
}
/* Колесо шагает порциями: без перехода кольцо дёргалось бы на 10-15° за
щелчок, а с обычными .72с отставало бы от прокрутки. */
html[data-hero-carousel-mode=ring] .hero__carousel--wheeling .hero__award {
transition: transform .22s cubic-bezier(.2,.78,.18,1)
}
/* Иерархия по глубине: активная в полный размер и резкая, соседи чуть
мельче и мягче, задняя половина — заметно. Масштаб от подошвы, чтобы
награда не отрывалась от круга. Всё на upright, а не на кнопке: filter
и opacity сплющивают 3D-контекст, и кольцо перестало бы сортироваться
по глубине. */
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award-upright {
--award-scale: .88;
--award-opacity: .96;
transform-origin: 50% 100%;
transform: scale(calc(var(--image-scale, 1) * var(--award-scale)));
opacity: var(--award-opacity);
filter: var(--hero-depth1-filter);
transition: transform .72s cubic-bezier(.32,.78,.28,1),opacity .72s,filter .72s
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award[data-ring-depth="1"] .hero__award-upright {
filter: var(--hero-depth1-filter)
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award[data-ring-depth="2"] .hero__award-upright,
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award[data-ring-depth="3"] .hero__award-upright {
--award-scale: .78;
--award-opacity: .82;
filter: var(--hero-depth2-filter)
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award--active .hero__award-upright {
--award-scale: 1;
--award-opacity: 1;
filter: none
}
/* Дуга под наградами принадлежит другой раскладке. */
html[data-hero-carousel-mode=ring] .hero__carousel .hero__arc {
opacity: 0
}
/* Кольцо занимает всю середину сцены, поэтому выноска активной награды
уходит из нижнего угла в верхний: там свободно, и она остаётся слева,
а не посередине. Отступ отмерен по свободной полосе между заголовком и
верхом наград — иначе выноска прилипала к строке слогана. Поводок к дуге
не нужен: дуги здесь нет. */
html[data-hero-carousel-mode=ring] .hero__carousel .hero__callout {
--callout-elbow: 0px;
z-index: 30;
top: clamp(38px,5.2svh,60px);
bottom: auto;
padding-left: 0;
transform: none
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__callout:before,
html[data-hero-carousel-mode=ring] .hero__carousel .hero__callout:after {
display: none
}
}
/* На низком экране сцена короче, и кольцо упиралось в её нижний край. */
@media (width>=901px) and (height<=820px) {
html[data-hero-carousel-mode=ring] .hero__carousel .hero__stage {
--ring-radius: clamp(260px,26vw,400px)
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award-upright {
--award-scale: .76
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award[data-ring-depth="2"] .hero__award-upright,
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award[data-ring-depth="3"] .hero__award-upright {
--award-scale: .66
}
html[data-hero-carousel-mode=ring] .hero__carousel .hero__award--active .hero__award-upright {
--award-scale: .86
}
}