/* ============================================================ components.css — компоненты, используемые в 1-й очереди: .btn · .site-header (+nav, drawer) · .mega-menu · .search-bar · .site-footer ПРАВИЛО: ни одного захардкоженного hex — только var() из tokens/themes. Компоненты нейтральны и красятся исключительно через контракт темы. ============================================================ */ /* ============================================================ .btn — 3 варианта × 3 размера (п.1.5) ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:var(--fw-semi); line-height:1; white-space:nowrap; border:1px solid transparent; border-radius:var(--r-sm); transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:hover{transform:translateY(-1px);} .btn:active{transform:translateY(0);} /* размеры */ .btn--sm{height:36px;padding-inline:var(--s-4);font-size:var(--fs-sm);} .btn--md{height:44px;padding-inline:var(--s-5);} .btn--lg{height:52px;padding-inline:var(--s-6);font-size:var(--fs-md);} /* варианты */ .btn--primary{ background:var(--th-accent); color:var(--th-on-accent); border-color:var(--th-accent); } .btn--primary:hover{background:var(--th-accent-dark);border-color:var(--th-accent-dark);} .btn--ghost{ background:transparent; color:inherit; border-color:currentColor; } .btn--ghost:hover{background:color-mix(in srgb,currentColor 14%,transparent);} .btn--text{ height:auto; padding:0; background:transparent; border-color:transparent; color:var(--th-accent); } .btn--text .btn__arrow{transition:transform var(--t-fast) var(--ease);} .btn--text:hover{transform:none;} .btn--text:hover .btn__arrow{transform:translateX(3px);} /* ============================================================ .site-header — скин: прозрачная поверх hero → белая при скролле Флип цвета через две локальные переменные, наследует тему . ============================================================ */ .site-header{ --hd-fg:var(--c-white); /* текст поверх hero */ --hd-bg:transparent; background:var(--hd-bg); color:var(--hd-fg); } .site-header.is-scrolled{ --hd-fg:var(--c-ink-800); --hd-bg:var(--c-white); box-shadow:var(--sh-header); } .site-header__logo{color:var(--hd-fg);display:inline-flex;align-items:center;} /* ——— Логотип-вордмарк (символ #ic-logo, источник assets/img/logo.svg): монохромный, fill=currentColor → наследует цвет контекста (белый поверх hero, тёмный при скролле, светлый в футере). ——— */ .logo{ display:block; height:40px; aspect-ratio:88 / 40; fill:currentColor; transition:height var(--t-base) var(--ease); } .site-header.is-scrolled .logo{height:32px;} /* синхронно с ужатием шапки */ .logo--drawer{height:32px;} .logo--footer{height:46px;color:var(--c-white);} .site-nav__link{color:var(--hd-fg);transition:color var(--t-fast) var(--ease);} .site-nav__link:hover, .site-nav__link[aria-expanded="true"]{color:var(--th-deco);} .site-nav__link .ic--chev{transition:transform var(--t-fast) var(--ease);} .site-nav__link[aria-expanded="true"] .ic--chev{transform:rotate(180deg);} .site-header__phone{color:var(--hd-fg);} .site-header__phone:hover{color:var(--th-deco);} /* Сервисные ссылки шапки («Войти», «Забронировать») — один стиль, разные иконки */ .site-header__act{color:var(--hd-fg);} .site-header__act:hover{color:var(--th-deco);} .burger{color:var(--hd-fg);} .lang-switch{color:var(--hd-fg);} .lang-switch__opt{color:inherit;font-weight:var(--fw-semi);} .lang-switch__opt.is-active{color:var(--hd-fg);} .lang-switch__opt.is-muted{opacity:.5;} /* EN приглушён (заглушка) */ .lang-switch__sep{opacity:.4;} /* ============================================================ .mega-menu — скин ============================================================ */ .mega-menu__panel{ background:var(--c-white); border-radius:var(--r-lg); box-shadow:var(--sh-hover); padding:var(--s-8); } .mega-menu__col-title{ font-family:var(--font-ui); font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--th-accent); /* колонка красится своей data-theme */ } .mega-menu__link{color:var(--c-ink-700);transition:color var(--t-fast) var(--ease);} .mega-menu__link:hover{color:var(--th-accent);} .mega-menu__name{font-weight:var(--fw-med);} .mega-menu__city{color:var(--c-ink-400);font-weight:var(--fw-reg);} .mega-menu__footer{border-top:1px solid var(--c-ink-200);} .mega-menu__all{color:var(--th-deco);font-weight:var(--fw-semi);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:var(--s-2);} /* ============================================================ Мобильная шторка — скин (часть nav-компонента) ============================================================ */ .drawer{background:var(--c-white);color:var(--c-ink-800);} .drawer__head{border-bottom:1px solid var(--th-accent-line);} .drawer__logo{font-family:var(--font-display);font-weight:var(--fw-med);letter-spacing:.08em;} .drawer__close{width:44px;height:44px;color:var(--c-ink-600);} .acc__link{color:var(--c-ink-600);} .acc__link:hover{color:var(--th-accent);} .acc__city{color:var(--c-ink-400);} .drawer__simple a{color:var(--c-ink-800);border-bottom:1px solid var(--th-accent-line);} .drawer__foot{border-top:1px solid var(--th-accent-line);} /* ============================================================ .search-bar — белая карточка-заглушка с дропдаунами ============================================================ */ .search-bar{ position:relative; background:var(--c-white); border-radius:var(--r-lg); box-shadow:var(--sh-hover); } .search-bar__grid{ display:grid; grid-template-columns:1fr; align-items:stretch; padding:var(--s-3); gap:var(--s-2); } .search-bar__field{ display:flex; flex-direction:column; gap:2px; text-align:left; padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); transition:background-color var(--t-fast) var(--ease); } .search-bar__field:hover, .search-bar__field[aria-expanded="true"]{background:var(--th-accent-soft);} .search-bar__label{ font-size:var(--fs-2xs); font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--c-ink-500); } .search-bar__value{font-size:var(--fs-md);font-weight:var(--fw-med);color:var(--c-ink-800);} .search-bar__submit{width:100%;} /* Дропдаун-макеты */ .search-drop{ position:absolute; left:var(--s-3);right:var(--s-3); top:calc(100% + var(--s-2)); z-index:var(--z-dropdown); background:var(--c-white); border:1px solid var(--th-accent-line); border-radius:var(--r-md); box-shadow:var(--sh-hover); padding:var(--s-4); } .search-drop[hidden]{display:none;} .search-drop__title{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-ink-500);margin-bottom:var(--s-3);} /* — направление: список городов — */ .dd-cities{display:grid;grid-template-columns:1fr;gap:var(--s-1);} .dd-cities__item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);color:var(--c-ink-700);font-size:var(--fs-sm);text-align:left;width:100%;} .dd-cities__item:hover{background:var(--th-accent-soft);color:var(--th-accent);} .dd-cities__item .ic{color:var(--th-deco);flex:0 0 auto;} .dd-cities__count{margin-left:auto;color:var(--c-ink-400);font-size:var(--fs-xs);} /* — даты: макет двух месяцев — */ .dd-cal{display:grid;grid-template-columns:1fr;gap:var(--s-5);} .dd-cal__month-name{font-weight:var(--fw-semi);font-size:var(--fs-sm);margin-bottom:var(--s-3);text-align:center;color:var(--c-ink-700);} .dd-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;} .dd-cal__dow{font-size:var(--fs-2xs);font-weight:var(--fw-semi);text-transform:uppercase;color:var(--c-ink-400);text-align:center;padding-block:var(--s-1);} .dd-cal__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--c-ink-700);border-radius:var(--r-sm);} .dd-cal__day:hover{background:var(--th-accent-soft);color:var(--th-accent);} .dd-cal__day.is-muted{color:var(--c-ink-300);} .dd-cal__day.is-empty{visibility:hidden;} /* — гости: степперы — */ .dd-guests{display:flex;flex-direction:column;gap:var(--s-4);} .dd-guests__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);} .dd-guests__label b{display:block;font-weight:var(--fw-semi);color:var(--c-ink-800);} .dd-guests__label span{font-size:var(--fs-xs);color:var(--c-ink-400);} .stepper{display:flex;align-items:center;gap:var(--s-3);} .stepper__btn{ width:32px;height:32px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--th-accent-line); border-radius:var(--r-pill); color:var(--th-accent); } .stepper__btn:hover{background:var(--th-accent-soft);} .stepper__val{min-width:1.5rem;text-align:center;font-weight:var(--fw-semi);color:var(--c-ink-800);} /* — промокод — */ .dd-promo{display:flex;gap:var(--s-2);} .dd-promo__input{ flex:1 1 auto; min-width:0; /* иначе поле не сжимается и кнопка «Применить» вылезает за подложку */ height:44px; padding-inline:var(--s-4); border:1px solid var(--th-accent-line); border-radius:var(--r-sm); background:var(--c-white); color:var(--c-ink-800); font-size:var(--fs-md); } .dd-promo__input::placeholder{color:var(--c-ink-400);} .dd-promo__input:focus{outline:none;border-color:var(--th-accent);} /* ——— .search-bar: адаптив ——— */ /* Планшет: 2×2 сегмента + кнопка на всю ширину — на 768 ряд из пяти колонок зажимается и значения полей переносятся. */ @media (min-width:768px){ .search-bar__grid{grid-template-columns:1fr 1fr;} .search-bar__submit{grid-column:1 / -1;} .dd-cal{grid-template-columns:1fr 1fr;} .dd-cities{grid-template-columns:1fr 1fr;} } /* Ноутбук и выше: один ряд с вертикальными разделителями (п. hero) */ @media (min-width:1024px){ .search-bar__grid{ grid-template-columns:1.4fr 1.2fr 1fr 1fr auto; align-items:center; padding:var(--s-2); gap:0; } .search-bar__field + .search-bar__field{ border-left:1px solid var(--th-accent-line); border-radius:0; } .search-bar__submit{grid-column:auto;width:auto;margin-left:var(--s-3);} } @media (min-width:1024px){ .search-drop--dest,.search-drop--dates{max-width:520px;} .search-drop--dest{right:auto;} .search-drop--guests{left:auto;max-width:360px;} /* шире: поле ввода + «Применить» должны помещаться в подложку */ .search-drop--promo{left:auto;max-width:400px;} } /* ——— .search-bar--glass: панель в hero — таблица 2×2 на полупрозрачном затемнении с тонкими белыми линиями. Идёт после медиазапросов, чтобы перекрыть раскладку базового компонента. ——— */ .search-bar--glass{ --glass-line:color-mix(in srgb, var(--c-white) 38%, transparent); width:100%; max-width:640px; /* без overflow:hidden — иначе панель обрезает выпадающие макеты полей */ background:color-mix(in srgb, var(--c-ink-900) 55%, transparent); border:1px solid var(--glass-line); border-radius:var(--r-md); box-shadow:none; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .search-bar--glass .search-bar__grid{ /* minmax(0,1fr) — иначе длинное значение («Заезд — выезд») раздувает свою колонку и столбцы перестают быть равными */ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0; gap:0; } .search-bar--glass .search-bar__value{overflow-wrap:anywhere;} /* ячейки таблицы */ .search-bar--glass .search-bar__field{ border:0; border-radius:0; padding:var(--s-4) var(--s-5); border-right:1px solid var(--glass-line); border-bottom:1px solid var(--glass-line); } .search-bar--glass .search-bar__field:nth-child(2n){border-right:0;} .search-bar--glass .search-bar__field:nth-child(n+3){border-bottom:0;} /* скругления — на самих ячейках, раз панель без overflow:hidden */ .search-bar--glass .search-bar__field:nth-child(1){border-top-left-radius:var(--r-md);} .search-bar--glass .search-bar__field:nth-child(2){border-top-right-radius:var(--r-md);} .search-bar--glass .search-bar__field:hover, .search-bar--glass .search-bar__field[aria-expanded="true"]{ background:color-mix(in srgb, var(--c-white) 12%, transparent); } .search-bar--glass .search-bar__label{color:color-mix(in srgb, var(--c-white) 72%, transparent);} .search-bar--glass .search-bar__value{color:var(--c-white);} /* кнопка — отдельной строкой под таблицей */ .search-bar--glass .search-bar__submit{ grid-column:1 / -1; width:100%; margin:0; border-radius:0 0 var(--r-md) var(--r-md); border-top:1px solid var(--glass-line); } /* ============================================================ Слайдер: стрелки и точки (используется в hero) ============================================================ */ /* Компонент нейтрален: цвет наследуется от контекста (currentColor), поэтому одинаково читается и поверх фото, и на светлой подложке. */ .slider-btn{ width:36px;height:36px; display:inline-flex;align-items:center;justify-content:center; border:1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius:var(--r-pill); color:inherit; transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .slider-btn:hover{ background:color-mix(in srgb, currentColor 10%, transparent); border-color:currentColor; color:var(--th-accent); } .slider-btn__prev{transform:rotate(180deg);} .slider-dots{display:inline-flex;align-items:center;gap:var(--s-2);} .slider-dots__dot{ width:8px;height:8px; border-radius:var(--r-pill); background:color-mix(in srgb, currentColor 35%, transparent); transition:background-color var(--t-fast) var(--ease), width var(--t-fast) var(--ease); } .slider-dots__dot:hover{background:color-mix(in srgb, currentColor 65%, transparent);} .slider-dots__dot.is-active{width:22px;background:var(--th-accent);} /* ============================================================ .segmented — переключатель «Все / Море / Горы» (п.1.5) ============================================================ */ .segmented{ display:inline-flex; align-items:center; gap:var(--s-1); flex:0 0 auto; padding:var(--s-1); background:var(--c-ink-100); border-radius:var(--r-pill); } .segmented__btn{ min-height:36px; padding-inline:var(--s-5); border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:var(--fw-semi); line-height:1; color:var(--c-ink-600); white-space:nowrap; transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .segmented__btn:hover{color:var(--th-accent);} .segmented__btn.is-active{ background:var(--c-white); color:var(--th-accent); box-shadow:var(--sh-card); } /* Компактный вариант с иконками — плотность сетки. На мобильном скрыт: там карточки всегда в одну колонку. */ .segmented--cols{display:none;} .segmented--cols .segmented__btn{ min-width:44px; padding-inline:var(--s-3); display:inline-flex; align-items:center; justify-content:center; } @media (min-width:768px){ .segmented--cols{display:inline-flex;} } /* ============================================================ .banner — плитка направления: фото + вуаль темы + контент ============================================================ */ .banner{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(220px,20vw,320px); padding:var(--s-6); border-radius:var(--r-xl); overflow:hidden; isolation:isolate; background:var(--c-ink-700); /* цвет-плейсхолдер, чтобы макет не прыгал без фото */ color:var(--c-white); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .banner:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);} .banner__img{ position:absolute;inset:0;z-index:0; width:100%;height:100%; object-fit:cover; color:transparent; /* пока фото не подставлено — alt не показывается поверх плитки */ transition:transform var(--t-slow) var(--ease); } .banner:hover .banner__img{transform:scale(1.04);} /* вуаль темы + нейтральный скрим снизу: на светлых кадрах (песок, море) подписи иначе теряют контраст */ .banner__veil{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--c-ink-900) 45%, transparent) 62%, color-mix(in srgb, var(--c-ink-900) 82%, transparent) 100%), var(--th-hero-veil); } .banner__body{position:relative;z-index:2;} .banner__slogan{ font-size:var(--fs-lg); line-height:var(--lh-snug); color:var(--c-ink-100); margin-bottom:var(--s-2); } .banner__title{ font-family:var(--font-display); font-size:var(--fs-d3); font-weight:var(--fw-med); line-height:var(--lh-snug); color:var(--c-white); } .banner__meta{ margin-top:var(--s-1); font-size:var(--fs-sm); font-weight:var(--fw-med); color:var(--c-ink-200); } .banner__link{ display:inline-flex; align-items:center; gap:var(--s-2); margin-top:var(--s-4); font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--c-white); } .banner__link .ic{transition:transform var(--t-fast) var(--ease);} .banner:hover .banner__link .ic{transform:translateX(3px);} .banner--wide{min-height:clamp(260px,24vw,360px);} /* мягкое исчезновение при фильтрации */ .banner{opacity:1;transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);} /* ============================================================ .chip — пилюля (суб-бренд, питание, фишка) — п.1.5 ============================================================ */ .chip{ display:inline-flex; align-items:center; height:26px; padding-inline:var(--s-3); border-radius:var(--r-pill); background:var(--th-accent-soft); color:var(--th-accent); font-size:var(--fs-xs); font-weight:var(--fw-semi); line-height:1; white-space:nowrap; } /* приглушённый чип — портфель в развитии, без ссылки */ .chip--muted{ background:var(--c-ink-200); color:var(--c-ink-500); font-weight:var(--fw-med); } /* ============================================================ .brand-card — крупная карточка суб-бренда (п.1.5). Тема задаётся на корне: вуаль и акценты — брендовые. ============================================================ */ .brand-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(340px,30vw,460px); padding:var(--s-8); border-radius:var(--r-xl); overflow:hidden; isolation:isolate; background:var(--c-ink-700); /* плейсхолдер, чтобы макет не прыгал */ color:var(--c-white); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .brand-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);} .brand-card__img{ position:absolute;inset:0;z-index:0; width:100%;height:100%; object-fit:cover; color:transparent; transition:transform var(--t-slow) var(--ease); } .brand-card:hover .brand-card__img{transform:scale(1.04);} /* вуаль суб-бренда + скрим снизу под текст */ .brand-card__veil{ position:absolute;inset:0;z-index:1; background: /* верхний скрим — под логотип суб-бренда */ linear-gradient(180deg, color-mix(in srgb, var(--c-ink-900) 45%, transparent) 0%, transparent 30%), linear-gradient(180deg, transparent 8%, color-mix(in srgb, var(--c-ink-900) 35%, transparent) 38%, color-mix(in srgb, var(--c-ink-900) 68%, transparent) 62%, color-mix(in srgb, var(--c-ink-900) 90%, transparent) 100%), var(--th-hero-veil); } .brand-card__body{position:relative;z-index:2;} /* логотип суб-бренда — правый верхний угол, вдвое крупнее, без прозрачности. Тень нужна, чтобы белый леттеринг читался на светлых участках кадра. */ .brand-card__logo{ position:absolute; z-index:2; top:var(--s-6); right:var(--s-6); /* Нормализованные копии из assets/img/brands (плотный viewBox, без внутренних полей), поэтому равная высота даёт равный оптический размер, а верхняя и правая кромки совпадают у всех трёх. */ height:clamp(56px,5vw,72px); width:auto; opacity:1; filter:drop-shadow(0 2px 10px color-mix(in srgb, var(--c-ink-900) 55%, transparent)); } .brand-card__slogan{ font-family:var(--font-display); font-size:var(--fs-d3); font-weight:var(--fw-med); line-height:var(--lh-snug); color:var(--c-white); } .brand-card__desc{ margin-top:var(--s-2); font-size:var(--fs-sm); color:var(--c-ink-200); } .brand-card__count{ display:inline-flex; align-items:center; height:26px; margin-top:var(--s-4); padding-inline:var(--s-3); border-radius:var(--r-pill); background:var(--th-accent); color:var(--th-on-accent); font-size:var(--fs-xs); font-weight:var(--fw-semi); line-height:1; } .brand-card__link{ display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-5); font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--c-white); } .brand-card__link .ic{transition:transform var(--t-fast) var(--ease);} .brand-card:hover .brand-card__link .ic{transform:translateX(3px);} /* широкий вариант карточки — во всю ширину страницы */ .brand-card--wide{min-height:clamp(300px,26vw,400px);} @media (min-width:1024px){ .brand-card--wide .brand-card__body{max-width:52%;} /* текст не растягивается на всю ширину */ } .brands__pipeline{color:var(--c-ink-500);} .brands__pipeline-note{color:var(--c-ink-400);} /* ============================================================ .stars — рейтинг, цвет --c-star ============================================================ */ .stars{color:var(--c-star);font-size:var(--fs-sm);letter-spacing:.06em;} /* ============================================================ .hotel-card — атом системы. Тема задаётся на корне карточки. ============================================================ */ .hotel-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg); background:var(--c-white); box-shadow:var(--sh-card); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .hotel-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);} .hotel-card__media{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--c-ink-200); /* плейсхолдер, чтобы макет не прыгал */ } .hotel-card__img{ width:100%;height:100%; object-fit:cover; color:transparent; transition:transform var(--t-slow) var(--ease); } .hotel-card:hover .hotel-card__img{transform:scale(1.04);} .hotel-card__badge{ position:absolute; top:var(--s-3);left:var(--s-3); background:var(--th-accent); color:var(--th-on-accent); } .hotel-card__body{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); } .hotel-card__meta{ display:flex;align-items:center;gap:var(--s-2); font-size:var(--fs-sm); font-weight:var(--fw-med); color:var(--c-ink-500); } .hotel-card__title{ font-family:var(--font-display); font-size:var(--fs-d3); font-weight:var(--fw-med); line-height:var(--lh-snug); color:var(--c-ink-900); } .hotel-card__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);} .hotel-card__price{ margin-top:var(--s-2); font-size:var(--fs-h4); font-weight:var(--fw-bold); line-height:1.2; color:var(--c-ink-900); } .hotel-card__price span{ font-size:var(--fs-sm); font-weight:var(--fw-med); color:var(--c-ink-500); } .hotel-card__actions{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-3); } /* ============================================================ .site-footer — скин (тёмная подложка, светлый текст, деко-разделители) ============================================================ */ .site-footer{ background:var(--c-ink-800); color:var(--c-ink-300); } .site-footer a{color:var(--c-ink-300);transition:color var(--t-fast) var(--ease);} .site-footer a:hover{color:var(--c-white);} .site-footer__col-title{ font-family:var(--font-ui); font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--th-deco); /* золотой/акцентный разделитель темы */ } .site-footer__list a{font-size:var(--fs-sm);} .site-footer__phone{color:var(--c-white);} .site-footer__phone:hover{color:var(--th-deco);} .site-footer__email{color:var(--c-ink-200);font-weight:var(--fw-med);} .site-footer__addr{font-size:var(--fs-sm);color:var(--c-ink-400);line-height:var(--lh-base);} .site-footer__soc{ width:40px;height:40px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--c-ink-600); border-radius:var(--r-pill); color:var(--c-ink-300); } .site-footer__soc:hover{border-color:var(--th-deco);color:var(--th-deco);} .site-footer__brand{border-bottom:1px solid var(--c-ink-700);} .site-footer__top{border-bottom:1px solid var(--c-ink-700);} .site-footer__bottom{color:var(--c-ink-400);font-size:var(--fs-xs);} .site-footer__legal a{font-size:var(--fs-xs);} .site-footer__note{color:var(--c-ink-500);} .site-footer__credit{color:var(--c-ink-400);font-size:var(--fs-xs);white-space:nowrap;} .site-footer__credit:hover{color:var(--c-white);} .site-footer__credit-logo{ height:22px; width:auto; opacity:.75; transition:opacity var(--t-fast) var(--ease); } .site-footer__credit:hover .site-footer__credit-logo{opacity:1;}