/* Start:/dist/css/normalize.css?17876873276810*/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1; -webkit-text-size-adjust: 100%; /* 2 */ } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1, h2, h3, h4, h5, h6 { margin: 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /* Paragraph Lowest Specificity */ :where(p) { margin-top: 0; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { /*font-weight: bolder;*/ font-weight: normal; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ figure { margin: 0; } img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; /*line-height:1;*/ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none !important; } ul, menu, ul li, menu li, ul ul li { margin: 0; padding: 0; text-indent: 0; list-style-type: none; } i, em { font-style: normal; } u { text-decoration: none; } b { font-weight: normal; } button { appearance: none; -webkit-appearance: none; border: none; margin: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; outline: none; } /*# sourceMappingURL=normalize.css.map */ /* End */ /* Start:/dist/css/core.css?1787687326332127*/ @charset "UTF-8"; /* ╭╮ ╭╮ № │ ▀─▀┌╯ ╰┬─┬─╯ ██████ ██ ██ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ █████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██████ ██████ ███████ Рекомендации, нейминг и конвенции ╭──╮ ╭─┴─╮│╮ ╭───────────────────┬╮│▄▒▀│╰┴───────────────────────╮ │ ╰│╰─┬─╯ │ │ ╰──╯ │ │ │ │ SCSS-driven семантический фреймворк │ │ с одним шаблоном и любым визуалом, │ │ для быстрой разработки вау-сайтов │ │ │ │ Особенности │ │ • работа преимущественно в SCSS │ │ • минимум правок компонентов в CRM │ │ • легковестный html без строгости │ │ • приветствуются анимации и webgl │ │ │ │ Семантика у всех сайтов примерно одна: │ │ menu, hero, slider, catalog, news итд │ │ это используем для ускорения разработки │ │ │ │ Распределение задач │ │ 70% Стили, анимация и контент │ │ 20% Компановка │ │ 10% Новые компоненты │ │ │ │ │ ╰─┬───────╮ ╭──●──╮ ╭───────┬─╯ ╰───────▶──────────╮│╭─┼─╮│╭────────────◀───────╯ ╰───────────╯│╮│╭│╰─────────────╯ ╰┬╯ ▼ ╭─────────╮ │ Файлы ╰──────────────────────────────────────────────────────╮ │ │ │ _size.scss единый источник размеров │ │ _root.scss единый источник цветов │ │ _type.scss подключение и работа со шрифтами │ ╰────────────────────────────────────────────────────────────────╯ ╭────────────╮ │ Сокращения ╰───────────────────────────────────────────────────╮ │ │ │ scaff позиционирование без оформления │ │ combs комбинирование, допустим кнопки внутри блока услуг други │ ╰────────────────────────────────────────────────────────────────╯ ■ TODOFRAMEWORK • link-pr можно для всех ссылок по-умолчанию применить это быстрей чем везде применять • Исправить конфликт head head,body,foot слишком хорошая группа чтобы размазывать head, она отлично описывает структуру в том числе всяких карточек верх середина низ, хорошо работает значит head надо менять → lead,name,title, pic → pic media pic head → ★name title tit(key) cap (caption) lead desc → text(copy) value txt meta → meta sub(met) subordinate subtitle below → tool(acts) tools Далее desc имеет «вкус» описания короткого и оно часто ломается name хорошо для услуг, людей, плохо для промо, баннер Вариант 3-буквенный (Решил что нет) pic sup tit(ttl,cap) txt sub met act ⚠ cue удобная штука куда-то можно пристроить • NOTIFICATION Область ответственности сообщения Error message Рядом с полем, инлайн «Введите корректный email» под инпутом Notification / Toast В углу экрана, временное «Сообщение отправлено» Dialog / Alert Поверх контента, модальное «Вы уверены, что хотите удалить?» Toast Всплывает и исчезает автоматически. success saved copied deleted Dialog / Modal Delete? Discard changes? Retry payment? • Popups AlertDialog предупредить о важном и остановить ConfirmDialog подтвердить намерение перед действием FormDialog форма для ввода данных Toast кратко уведомить без блокировки Popover с носиком anchor Drawer открыть боковую рабочую панель MARK: Deploy • Найти все //prod // prod комментарии и исправить/включить MARK: a11y
Основной уникальный контент страницы. Должен быть только один на странице. MARK: Миксины Миксину добавляет префикс make- если он селектор .class {...} MARK: Ссылки Хорошо через псевдоэлемент растянуть :before/:after на весь блок inset:0; Плохо оборачивать весь блок ссылкой • seo растекание веса ссылки • проблема с вложенными интерактивными элементами: button, details • нарушение фокуса и интерактивности • screen readers будут читать всё содержимое блока как одну ссылку // MARK: Dictionary 3 ask cue pic > img потому что icon+img визуально разницы меньше 4 ui tray rail prev/next help hint note clue mark sign omen icon shot view face logo draw unit feed post fuel dial 5 error voice pager update ← updates 6 prompt dialog speech Пары lead trail // MARK: Нейминг ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ПРАВИЛА ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ЧТО ХОЧУ ■ Домен-ориентированный нейминг по сущностям doctors > doctor services > service Исключения для кнопок, форм и простых ui ■ Контейнер и элементы обезличены .doctors > .doctor 1 контейнер не назван по сетке grid/list 2 контейнер управляет внешнем видом элементов doctors>doctor{extend card} 3 смена вида radios._doctors > radio через модификаторы Почему? Полный контроль через scss без правки компонентов, не нравится карточки, сделал список. 80% случаях внутри контейнера однотипные данные с одним набором полей: услуги, люди. Плюс что оперируем конкретными сущностями, для понимания проще. Пример «Как поменять отображение с вертикального списка элементов на грид с карточками» При правильной композиции это выглядит так: .container-list > .item > item-doctor .container-grid > .card > card-doctor В нашем случае компоненты не изменяются .doctors > .doctor, меняется только scss (а это цель фреймворка) .doctors{ .doctors{ @extent .list; @extent .grid; .doctor{@extent .item-doctor} .doctor{@extent .card-doctor} } } ■ Элементы не знают о внешнем виде, это родитель задает ■ Защита от протечки стилей doctor > doctor-name при вложении компонента в компонент, лучше работает чем doctor > name ■ ЗАПРЕЩЕНО • Tailwind-подход: кол-во колонок в контейнере, gap,padding в классах СЛОИ Layout — композиция всегда останется head/body/foot/sidebar на мобиле сайдбар будет «врать» он не будет сбоку, поэтому поэтому не желательно, но можно контейнерам описывать вид отображения &-grid &-list &-tile &-claster &-thumbs 1) Присмотреться к hstack vstack — в css есть такой нейминг hline vline у clip-path UI-ориентированный нейминг (универсальный фреймворк, list, grid) • описывается плотность контента list tile chip в его десктоп версии (на мобиле может изменяться Домен-ориентированный нейминг (Продуктовые компоненты doctors, appointment) • Если завтра вместо врача подставить тариф или филиал, компонент останется тем же самым? • Если имя компонента описывает компоновку table/grid оно врет на мобильной где это список • Лучшее имя то, без которого компонент «ломается», например schedule-week, в самой разметке через гриды жестко зашивается 7 дней Примеры • radio-people возможно спорное, но четкая привязка фото, имя, должность, описание • radio-list описывает компоновку, но на пк и мобиле имеет один вид Еще вариант нейминга разделение на 2 оси по компановке и внешнему виду Контейнер по компановке/layout, отвечает на вопрос «Как расположены элементы?» radio-list radio-grid radio-sect Элемент по виду, отвечает на вопрос «Как выглядят элементы?» radio-item radio-card + doctor/service radio-chip ФИНАЛ от GPT Domain Specific Language это “язык описания интерфейса”, где ты не описываешь компоненты, а описываешь что и как должно быть собрано LAYOUT: list radio-list VIEW: card radio-card VARIANT: doctor radio-card _doctor визуальный вариант LAYOUT WRAPPER → radio-list / grid / chips ITEM → radio-card VARIANT → _doctor / _service / _slot DATA → PHP массивы (doctors/services/slots) .radio > .radio-name конфликт - radio-* начинает владеть ВСЕМ UI внутри себя Убирает дублирование, если визуально это однотипно radio-name doctor-name service-name • suggest-friendly допустим есть иконки врача и юзера, удобней назвать: user и user-doctor Разметка bar хлебные крошки сверху pane, фильтры rail боковая часть pane основная область, может быть нескольк как пример pane список писем, справа pane письмо детально Детализация list → item → page → article.post list → item → detail Анатомическая тройка head body foot дополнительно head hair face neck body hand tail foot Любой компонент pic ★name lead text meta tool Уникальные indicator → mark/dots любые индикаторы в навигации // MARK: Статусы f statuses Начинаются с is- плюсы: • парсинг глазами, мгновенно понятно что это js-состояние • поиск всех состояний в коде через is- • sticky и .is-sticky нет путаницы, первый sticky всегда стики, а второй это временно Назначение is- has- is- временное состояние элемента: is-active сейчас активен has- «у меня внутри есть это», родитель содержит что-то: has-error, has-dropdown Утвреждено .is-filtered .is-hidden .is-active .is-inactive Form .is-valid .is-invalid .was-validated .is-dirty Schedule has-slots has-no-slots Time is-past is-today is-future Progress is-done is-undone (вместо completed uncomplited) Не утвреждено .is-touched .has-error Контекстные (has — когда модифицируется родитель) .has-dropdown .has-tooltip .is-selected, .is-open, .is-collapsed (как в Bootstrap) // MARK: Заметки @media (hover: none) {нет ховера} @media (hover: hover){} $fs-base : $sizefont * 1px; //todo must have заменить не семантичное

Frankenstein

Or: The Modern Prometheus

buttons>button fieldset>input+button https://oat.ink/components/ // ■ MARK:⠀Фото ОБЩИЕ ПРАВИЛА Одежда • избегать мелкого паттерна: клеток, полосок и мелкого принта ФОТО ЛЮДЕЙ ИНДИВИДУАЛЬНОЕ Например список врачей • Главное правило соблюдать для всех фото одинаковый поворот тела, головы, один кадр (по грудь, пояс итд) • Относительно модели если она повернута немного вправо, то и все остальные модели повернуты также, один угол ГРУПОВОЕ ФОТО Кратко Выстроить положение людей чтобы головы примерно образовали плавную волну или прямую, но внутри этой волны не было строгой закономерности с чередованием м-ж, низкий-высокий. Корпуса крайних чаще смотрят в центр, больше естественности. Общие рекомендации • избегать одинаковых поз, выражений лиц и положений рук • избегать шумного фона (линии, столбы, ветки за головами) • избегать пересвета, тёмных помещений, резкого фронтального света • делать снимки еще и после «Снято!» когда лица расслабились и естественны • добавить тактильности: рука на плече соседа, обнимашки, легкие наклоны голов друг к другу Не рекомендуется • лесенка по росту (слева низкие → справа высокие) • паттерн «пила» (высокий-низкий + мальчик-девочка) • широкоугольник с близкого расстояния Рекомендуется • вариативность поз, поворотов, наклонов, рук: объятия, руки на плечах • однорядная группа: арка - по бокам низкие, в центре высокие чаша - по бокам высокие, в центре низкие • в центре — главный по ситуации • для больших групп 2–3 ряда (сидя/на корточках + стоя) • полезно немного нарушать паттерны выше // ■ MARK:⠀Время Что не автоматизируется • подбор фото • ии-ретуш нужен набор промптов для обработки • // ■ MARK:⠀Компоненты ■ Что совать в классические компоненты, а что мясом на ружу. Вижу такие группы: 1 Редко-меняющиеся скучные элементы вроде breadcrumbs, которые на любом сайте nav>ul.breadcrumbs>li>a сделал раз и забыл. Это 100% делаем через классические компоненты, примеры: • пейджинг, хлебные крошки, • список контактов, список соцсетей • список инфокарт/сниппетов/файлов • режим работы (несколько шаблонов вывода, либо настройка includeComponent на вывод компактной версии) Особенности: • похеру где лежат какой длины путь, нам пофиг все равно менять не будем никогда • важно только гибкость чтобы includeComponent был гибким для прокидки изменений 2 Средней уникальности элементы, чаще более комплексные блоки, чаще однотипные от сайта к сайту. Но все же больше риск что меняться будет → тоже через классическими компонентами, примеры: • список услуг/новостей/вакансий/людей (список врачей) • список новостей, фото, видео • карточки: инфокарты/сниппеты • слайдер-карусель большой он же Промо, слайдер боковой (как для врачей на главной) • вопросы и ответы • формы во всех разновидностях (в целом редко меняются) Особенности: • желательно в близкой доступности: не news, а news.list (без врапперов), без лишних прокладок • мега, скорее всего эту сложную штуку лишний раз не менять чтобы не сломать 3 Чаще всего уникальные, делаем фаршем наружу, прямо services/index.php никаких template и враперов сложных Через хитрый компонент сверху arResult единожды получили, кеш поддерживается, размазываем прямо D7, foreach на странице, вообще пофиг, единственно аккуратно разложить, очистить от htmlspeci... Короче пока кеш, сео и прочее работает, нас не волнует что это не классический компонент. • Услуга детально • Врач детально • Комплексная услуга как с лазерной коррекцией • Витрина услуг на главной • Возможно контакты, за вычетом компонентов что в группе 1 и 2 • Блок фильтров, допустим для врачей где куча кнопок радио чекбоксов 4 Статика — по-хорошему чем больше загоним в обычный main.include тем лучше, в шаблоне сайта под него место, если есть в папке подтягивает рекурсивно из папки, не ясно только как из динамических страниц это делать вроде услуг • фокальные линзы • Карточки вроде ОМС/ДМС на /services/   Карточка анализов Не определился: • Карты если подумать они обычно в двух видах и редкие по идее просятся компоненты обычные чтобы было общее представление и одни и те же js работали Визуальные редактор Не получится спрятать все компоненты из визуального редактора как со страницей файлов для пациента не будем их совать далее в шаблон сайта, неизбежное зло. */ /* ┌─▄▄▄▄▄▄▄▄─┐ │ █▄██████ │ Файл с универсальными чистыми функциями │ ╭──╮ │ • работа с числами │ ╰──╯ │ • строками └▀─────────┘ ╭───────────────╮ │ MARK: color │ ╰───────────────╯*/ /* ╭────────────────╮ │ MARK: number │ ╰────────────────╯*/ /* ╭────────────────╮ │ MARK: string │ ╰────────────────╯*/ /* ╭────────╮ │ Config ╰──────────────╮ │ • сглаживание шрифтов │ │ • enable-списки │ │ • дебаг │ ╰───────────────────────╯*/ /* ┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐ │ │ │ │ │ │ │ │ │ │ │ │ │ 1 2 3 4 5 6 7 8 9 10 │ │ │ │ Размеры │ │ Можга │ ╰─▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄5▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄─╯ ■ Панель управления размером всего Правила клуба 1 Это файл единственный источник размеров 2 Используется свой unit, вместо px или rem 3 Размеры транслируются в css-переменные 4 Используются желательно только css-переменные Что это дает 1 Скорость настройки размеров в одном файле 2 Свои размеры считаются через 1 глобальный коэффициент, изменяя который управляем «плотностью воздуха» на всех страницах 3 Без css-переменных не получится менять размеры на мобильном и fluid-типографика Свои единицы измерения • абсолютные $s1–$s99 px • относительные $p1–$p99 rem Что храним в файле • Размеры button,input и прочих control • Радиусы • Размер шрифта • Разметка layout • Тайминги анимации Необычное храним • Круглая или квадратная кнопка или инпут (для удобства) */ /* ╭───────────────────────────────────────────────────────────────────╮ │ MARK: absolute │ │ size in px — в фреймворке не используется px в чистом виде │ ╰───────────────────────────────────────────────────────────────────╯*/ .mb-n10 { margin-bottom: -20px; } .mb-n20 { margin-bottom: -40px; } .mb-n30 { margin-bottom: -60px; } .mb-n1 { margin-bottom: -2px; } .mb-n11 { margin-bottom: -22px; } .mb-n21 { margin-bottom: -42px; } .mb-n31 { margin-bottom: -62px; } .mb-n2 { margin-bottom: -4px; } .mb-n12 { margin-bottom: -24px; } .mb-n22 { margin-bottom: -44px; } .mb-n32 { margin-bottom: -64px; } .mb-n3 { margin-bottom: -6px; } .mb-n13 { margin-bottom: -26px; } .mb-n23 { margin-bottom: -46px; } .mb-n33 { margin-bottom: -66px; } .mb-n4 { margin-bottom: -8px; } .mb-n14 { margin-bottom: -28px; } .mb-n24 { margin-bottom: -48px; } .mb-n34 { margin-bottom: -68px; } .mb-n5 { margin-bottom: -10px; } .mb-n15 { margin-bottom: -30px; } .mb-n25 { margin-bottom: -50px; } .mb-n35 { margin-bottom: -70px; } .mb-n6 { margin-bottom: -12px; } .mb-n16 { margin-bottom: -32px; } .mb-n26 { margin-bottom: -52px; } .mb-n36 { margin-bottom: -72px; } .mb-n7 { margin-bottom: -14px; } .mb-n17 { margin-bottom: -34px; } .mb-n27 { margin-bottom: -54px; } .mb-n37 { margin-bottom: -74px; } .mb-n8 { margin-bottom: -16px; } .mb-n18 { margin-bottom: -36px; } .mb-n28 { margin-bottom: -56px; } .mb-n38 { margin-bottom: -76px; } .mb-n9 { margin-bottom: -18px; } .mb-n19 { margin-bottom: -38px; } .mb-n29 { margin-bottom: -58px; } .mb-n39 { margin-bottom: -78px; } /* ╭───────────────────────────────────╮ │ MARK: relative │ │ $s1–99 но хранятся в rem │ ╰───────────────────────────────────╯*/ /* ╭───────────────────────────────╮ │ Spacing — сердце отступов │ │ │ │ Самые частые margin на сайте │ │ 80% используют или наследуют │ ╰───────────────────────────────╯*/ :root { --body-width-available: calc(100% - 16px * 2); } /* ╭────────────────╮ ╭────────────────╮ │ MARK: Help ╰────────────────────────────────╮ │ Bootstrap ╰──────────╮ │ │ │ │ │ ■ Кнопки и инпута из-за схожести имеют │ │ Для понимания аналогий │ │ общего родителя control, для нас │ │ xxl → hg huge │ │ удобно править из одного места. │ │ xl → bg big │ │ │ │ lg → lg large │ │ • Быстро правится │ │ → md │ │ • Одна точка правды │ │ → df default │ │ • Консистентность из коробки │ │ sm → sm small │ │ │ │ xs → tn tiny │ │ ■ Желательно наружу в компоненты тянуть │ │ xxs → mn mini │ │ простые переменные не input-height-df │ ╰───────────────────────────╯ │ а input-height, предпочтительно │ │ │ │ • Кнопки чаще нескольких размеров │ │ • Инпуты чаще одного размера │ │ Фактор круглой кнопки │ │ │ │ ■ Визуально круглым кнопкам и инпутам │ │ нужно больше отступа чтобы текст не сжимало │ │ как шакала │ │ │ │ 1. Выставляем отступ на квадратных настройках │ │ 2. Включаем скругление контролов │ │ 2. Настраиваем round-x-factor │ ╰─────────────────────────────────────────────────╯*/ /* Справочные размеры удобные для деления /2/3 /2/4/8 Good /2/3/4/6 Best /2/3/4/8 6 8 12 24 12 16 24 48 18 24 36 72 24 32 48 96 30 40 60 120 36 48 72 144 42 56 84 168 48 64 96 192 54 72 108 216 60 80 120• 240 66 88 132 264 72 96 144• 288 78 104 156 312 84 112 168• 336 90 120• 180 360 96 128 192• 384 102 136 204 408 108 144• 216• 432 114 152 228 456 120• 160 240• 480 126 168• 252 504 132 176 264• 138 184 276 144• 192• 288• 150 200 300 156 208 312• 162 216• 324 168• 224 336• 174 232 348 180 240• 360• 186 248 372 192• 256 384• 198 264• 396 204 272 408• 210 280 420 216• 288• 432 222 296 444 228 304 456 234 312• 468 240• 320 480 246 328 492 252 336• 504 258 344 264• 352 270 360• 276 368 282 376 288• 384• 294 392 300 400 306 408• 312• 416 318 424 324 432• 330 440 336• 448 342 456• 348 464 354 472 360• 480• 366 488 372 496 378 504• 384• 390 396 402 408• 414 420 426 432• 438 444 450 456• 462 468 474 480• 486 492 498 504• 510 504, 540, 576, 612, 648, 684, 720, 756, 792, 828, 864, 900, 936, 972, 1008, 1044, 1080, 1116, 1152, 1188, 1224, 1260, 1296, 1332, 1368, 1404, 1440, 1476, 1512, 1548, 1584, 1620, 1656, 1692, 1728, 1764, 1800 504, 510, 516, 522, 528, 534, 540, 546, 552, 558, 564, 570, 576, 582, 588, 594, 600, 606, 612, 618, 624, 630, 636, 642, 648, 654, 660, 666, 672, 678, 684, 690, 696, 702, 708, 714, 720, 726, 732, 738, 744, 750, 756, 762, 768, 774, 780, 786, 792, 798, 804, 810, 816, 822, 828, 834, 840, 846, 852, 858, 864, 870, 876, 882, 888, 894, 900, 906, 912, 918, 924, 930, 936, 942, 948, 954, 960, 966, 972, 978, 984, 990, 996, 1002, 1008, 1014, 1020, 1026, 1032, 1038, 1044, 1050, 1056, 1062, 1068, 1074, 1080, 1086, 1092, 1098, 1104, 1110, 1116, 1122, 1128, 1134, 1140, 1146, 1152, 1158, 1164, 1170, 1176, 1182, 1188, 1194, 1200, 1206, 1212, 1218, 1224, 1230, 1236, 1242, 1248, 1254, 1260, 1266, 1272, 1278, 1284, 1290, 1296, 1302, 1308, 1314, 1320, 1326, 1332, 1338, 1344, 1350, 1356, 1362, 1368, 1374, 1380, 1386, 1392, 1398, 1404, 1410, 1416, 1422, 1428, 1434, 1440, 1446, 1452, 1458, 1464, 1470, 1476, 1482, 1488, 1494, 1500, 1506, 1512, 1518, 1524, 1530, 1536, 1542, 1548, 1554, 1560, 1566, 1572, 1578, 1584, 1590, 1596, 1602, 1608, 1614, 1620, 1626, 1632, 1638, 1644, 1650, 1656, 1662, 1668, 1674, 1680, 1686, 1692, 1698, 1704, 1710, 1716, 1722, 1728, 1734, 1740, 1746, 1752, 1758, 1764, 1770, 1776, 1782, 1788, 1794, 1800 */ /* Этот файл парсится из build-theme.js и создает • theme.light • theme.dark • theme.contrast (еще нет) Переменные scss и css Логика — управление восприятием через контрасты цветов. Например заголовки темней, основной текст светлей. Можно все 3 цвета вручную задать, а можно задать максимальный контраст для заголовков и ниже для текста. Второй вариант полу-автоматический, в этом весь смысл. Используя цветовую модель HCT, задаем тон, подмешиваем фоновый цвет и так далее. */ :root { --background: #ffffff; --surface-0: #fafafa; --surface-1: #f5f5f5; --background-tinted: #f3f4f8; --text-hero: #5d5b56; --text-heading: #3b3a35; --text-body: #5d5b56; --text-caption: #7a7872; --text-button-sc: #989690; --button-void-bg: #000000; --button-void-fg: #ffffff; --button-void-hover-bg: #1b1b1b; --button-void-hover-fg: #ffffff; --button-void-active-bg: #262626; --button-void-active-fg: #ffffff; --button-void-focus-bg: #181818; --button-void-focus-fg: #ffffff; --button-void-selected-bg: #000000; --button-void-selected-fg: #ffffff; --button-void-disabled-bg: #474747; --button-void-disabled-fg: #ffffff; --button-void-disabled-opacity: 0.38; --button-ghost-bg: transparent; --button-ghost-fg: #000000; --button-primary-bg: #1083E5; --button-primary-fg: #ffffff; --button-primary-hover-bg: #0069bc; --button-primary-hover-fg: #ffffff; --button-primary-active-bg: #005da7; --button-primary-active-fg: #ffffff; --button-primary-focus-bg: #006ec5; --button-primary-focus-fg: #ffffff; --button-primary-selected-bg: #5c9eee; --button-primary-selected-fg: #ffffff; --button-primary-disabled-bg: #2d3a4d; --button-primary-disabled-fg: #ffffff; --button-primary-disabled-opacity: 0.38; --button-secondary-bg: #d1e1ea; --button-secondary-fg: #4a494a; --button-secondary-hover-bg: #b7c6ce; --button-secondary-hover-fg: #3f3f40; --button-secondary-active-bg: #abb8c0; --button-secondary-active-fg: #393a3a; --button-secondary-focus-bg: #bcccd4; --button-secondary-focus-fg: #404141; --button-secondary-selected-bg: #fafcff; --button-secondary-selected-fg: #666565; --button-secondary-disabled-bg: #8c8e90; --button-secondary-disabled-fg: #000000; --button-secondary-disabled-opacity: 0.38; --button-danger-bg: #dc2626; --button-danger-fg: #ffff00; --button-danger-hover-bg: #fd4840; --button-danger-hover-fg: #ffff00; --button-danger-active-bg: #ff665b; --button-danger-active-fg: #ffff00; --button-danger-focus-bg: #fa3d38; --button-danger-focus-fg: #ffff00; --button-danger-selected-bg: #ae1f1d; --button-danger-selected-fg: #ffff00; --button-danger-disabled-bg: #f5b0a8; --button-danger-disabled-fg: #ffff00; --button-danger-disabled-opacity: 0.38; --link-ac-fg: #ffffff; --link-ac-hover-fg: #ffffff; --link-ac-active-fg: #ffffff; --link-ac-focus-fg: #ffffff; --link-ac-selected-fg: #e6e5e5; --link-pr-fg: #353535; --link-pr-hover-fg: #585757; --link-pr-active-fg: #686868; --link-pr-focus-fg: #505050; --link-pr-selected-fg: #333434; --link-sc-fg: #5D5D5D; --link-sc-hover-fg: #7e7d7d; --link-sc-active-fg: #8f8e8e; --link-sc-focus-fg: #777676; --link-sc-selected-fg: #545454; --link-tr-fg: #828181; --link-tr-hover-fg: #a3a2a2; --link-tr-active-fg: #b3b1b1; --link-tr-focus-fg: #9c9c9b; --link-tr-selected-fg: #767575; --link-br-fg: #007aff; --link-br-hover-fg: #6f9ff9; --link-br-active-fg: #8aaff9; --link-br-focus-fg: #6198fa; --link-br-selected-fg: #3f71c7; --separator-primary: #e5e7eb; --separator-subtle: #f3f4f6; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-theme=light]):not([data-theme=high-contrast]) { --background: #121212; --surface-0: #1a1a1a; --surface-1: #1e1e1e; --background-tinted: #191a1d; --text-hero: #9e9b95; --text-heading: #cac8c1; --text-body: #9e9b95; --text-caption: #7b7973; --button-primary-bg: #D7E77B; --button-primary-fg: #4a4b42; --button-primary-hover-bg: #bac967; --button-primary-hover-fg: #3d3e34; --button-primary-active-bg: #adbb60; --button-primary-active-fg: #37382d; --button-primary-focus-bg: #bfcf66; --button-primary-focus-fg: #3f3f37; --button-primary-selected-bg: #f7ffbe; --button-primary-selected-fg: #63635a; --button-primary-disabled-bg: #8b8e73; --button-primary-disabled-fg: #000000; --button-primary-disabled-opacity: 0.38; --link-primary-color: #60a5fa; --link-primary-hover-color: #8bb1e6; --link-primary-active-color: #99b3db; --link-primary-focus-color: #84afec; --link-primary-selected-color: #547eb6; --link-subtle-color: #94a3b8; --link-subtle-hover-color: #a1adbf; --link-subtle-active-color: #a6b0c1; --link-subtle-focus-color: #9eacc0; --link-subtle-selected-color: #717b89; --separator-primary: #374151; --separator-subtle: #1f2937; color-scheme: dark; } } [data-theme=dark] { --background: #121212; --surface-0: #1a1a1a; --surface-1: #1e1e1e; --background-tinted: #191a1d; --text-hero: #9e9b95; --text-heading: #cac8c1; --text-body: #9e9b95; --text-caption: #7b7973; --button-primary-bg: #D7E77B; --button-primary-fg: #4a4b42; --button-primary-hover-bg: #bac967; --button-primary-hover-fg: #3d3e34; --button-primary-active-bg: #adbb60; --button-primary-active-fg: #37382d; --button-primary-focus-bg: #bfcf66; --button-primary-focus-fg: #3f3f37; --button-primary-selected-bg: #f7ffbe; --button-primary-selected-fg: #63635a; --button-primary-disabled-bg: #8b8e73; --button-primary-disabled-fg: #000000; --button-primary-disabled-opacity: 0.38; --link-primary-color: #60a5fa; --link-primary-hover-color: #8bb1e6; --link-primary-active-color: #99b3db; --link-primary-focus-color: #84afec; --link-primary-selected-color: #547eb6; --link-subtle-color: #94a3b8; --link-subtle-hover-color: #a1adbf; --link-subtle-active-color: #a6b0c1; --link-subtle-focus-color: #9eacc0; --link-subtle-selected-color: #717b89; --separator-primary: #374151; --separator-subtle: #1f2937; color-scheme: dark; } /* ╭─────────╮ │ Path ╰─────────────╮ │ │ │ Глобальные пути для │ │ • шрифтов │ │ • медиа-контента │ ╰───────────────────────╯*/ /* ╭──────────╮ │ ├╮ │ Layer │├╮ │ ││├────────────────────────────────────╮ ╰┬─────────╯││ │ ╰┬─────────╯│ Z-INDEX авто-распределение │ ╰─┬────────╯ ручное для вендоров │ │ │ │ Преимущества │ │ • Невозможно ошибиться числом │ │ • Защита от перезаписи стилями вендоров │ │ • Чистый :root │ │ │ ╰─────────────────────────────────────────────╯*/ /* ╭────────────────────────────────╮ │ Font │ │ Подключение уникальных шрифтов │ │ • вариативных │ │ • статичных │ │ • fluid-typography │ ╰────────────────────────────────╯*/ /* ╭────────────────╮ │ MARK: Static │ ╰────────────────╯*/ /* ╭──────────────────╮ │ MARK: Variable │ ╰──────────────────╯*/ /* ╭────────────────────╮ │ MARK: Fluid font │ ╰────────────────────╯*/ /* ╭────────────────────────────────╮ │ Font │ │ Подключение уникальных шрифтов │ │ • вариативных │ │ • статичных │ │ • fluid-typography │ ╰────────────────────────────────╯*/ /* ╭────────────────╮ │ MARK: Static │ ╰────────────────╯*/ /* ╭──────────────────╮ │ MARK: Variable │ ╰──────────────────╯*/ /* ╭────────────────────╮ │ MARK: Fluid font │ ╰────────────────────╯*/ /* ╭────────────────────────────────────────╮ │ Типографика │ │ • настройки типографики и шрифтов │ │ • больше extended чем конечные стили │ ╰────────────────────────────────────────╯ ╭────────────────────────────────────────────────────────────────────────────────────────────────╮ │ В этом файле │ │ 1 Настройка и подлючения веб-шрифтов, генерация font face │ │ 2 Переменные fallback шрифтов %font%, Arial, Helvetica Neue, Helvetica, sans-serif !default │ │ 3 Метрики компенсации отступа в кнопках │ ╰────────────────────────────────────────────────────────────────────────────────────────────────╯ ╭────────────────────────────────────────────────────────────────────────────────────────────╮ │ Как подключаются статичные и динамические шрифты │ │ Допустим мы решили на сайте сделать всего два вида отображения текста, │ │ для заголовков жирный Inter Bold и для остального текст обычный Inter │ │ │ │ Можно подключить локальный шрифт @font-face Inter, а потом в css │ │ h1,h2,h3{font-family:'Inter'; font-weight:bold} │ │ p{font-family:'Inter'; font-family:'regular'} │ │ │ │ Однако шрифты часто поставляются по одному файлу на каждое начертание жирности: │ │ - Inter-Bold.woff │ │ - Inter-Regular.woff │ │ Поэтому в итоге создаем два @font-face │ │ - @font-face Inter Bold │ │ - @font-face Inter │ │ Имеем │ │ h1,h2,h3{font-family:'Inter Bold'} │ │ p{font-family:'Inter Regular'} │ │ │ │ Идем дальше, зачем упоминание Inter если на другом сайте будет другое? │ │ Универсальнее так: │ │ h1,h2,h3{font-family:'header'} │ │ p{font-family:'regular'} │ │ А Inter будет в самом @font-face │ │ │ │ В итоге все это описывается в мапе. где правится только второй параметр - название │ │ $map-static-font: ( │ │ ('header', 'Inter', '#-Bold', (woff), null), │ │ ('regular','Inter', '#-Regular',(woff), null), │ │ а остальной код уже использует эти шрифты header, regular │ │ │ │ С вариативными шрифтами примерно также │ │ make-variable-font │ ╰────────────────────────────────────────────────────────────────────────────────────────────╯ Полезное word-break: break-all разрывает вообще всё без разбора всегда overflow-wrap: anywhere только когда слово реально не помещается, предпочитая перенос по пробелам/дефисам */ /* пример подключения вариативного шрифта $map-variable-font: ( ('t5', 'Inter-VariableFont_opsz,wght.woff2',''), ('r', 'RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf',''), ); @include font.make-variable-font($map-variable-font); */ @font-face { font-family: "r"; src: url("/dist/css/../font/variable/InterVariable.woff2") format("woff2 supports variations"), url("/dist/css/../font/variable/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 125 150; font-style: normal; font-display: fallback; } /* Пример подключения без мапы отдельных шрифтов @include font.font-variable('j', 'JetBrainsMono[wght].ttf', $path-font-variable, $wght, $opsz); @include font.font-variable('t1','JetBrainsMono[wght].ttf', $path-font-variable, '100 900', '125% 250%'); @include font.font-variable('t2','Finder-Variable.ttf', $path-font-variable, '300 700', '0% 150%'); @include font.font-variable('t3','HONORSansVF-Condensed-Regular.ttf', $path-font-variable, '100 900', '100% 900%'); @include font.font-variable('t4','RobotoFlex[slnt,wdth,wght,opsz].ttf', $path-font-variable, '100 1000', '25% 151%');*/ /* ■ MARK:⠀⠀static Подключение статичных шрифтов Допустимые название в шаблоне, хардкод Roboto-Regular италик паар образуется автоматически Roboto-RegularItalic (Roboto-Regular+Italic) */ /* ╭─────────────────────╮ │ ▓ ▓ │ │ ▜████▛ MARK: API │ │ ▝▜▛▘ │ ╰─────────────────────╯*/ /* ┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐ │ │ │ │ │ │ │ │ │ │ │ │ │ 1 2 3 4 5 6 7 8 9 10 │ │ │ │ Размеры │ │ Можга │ ╰─▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄─╯ ■ MARK: metrics Header line-height and compensation offset Текст нельзя ровно выровнять по вертикали например внутри кнопки, потому что у шрифта есть content-area, область «заливки» сверху она дает дополнительный отступ который визуально не оправдан вот это компенсация через отрицательный маргин. чтобы найти е, нужно 1) найти высоту прописаной буквы 2) и разделить ее на зазор между ней верхним краем залитой строки */ /* ╓──────┬──────╖ ║ ▔▔ │ ░░░░ ║ ⚠ Комфортое чтение ║ ░░░░ │ ░░░░ ║ в диапазоне 50–75 символов на строку, ║ ░░░░ │ ░░░░ ║ clamp(45,66,80) — не выше и не ниже ╚══════╧══════╝ */ .font-body, body { line-height: 1.25; font-weight: 400; font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14; } .font-semibold, .doctor-detail .doctor-name + span .pil1, .split-sect strong, .reel-desc, .find-head, fieldset legend, .callout-head, .dialog-head, .test-head, .case-tab .case-tab-inner, .cost-head, .compare-head, .mega .post-link, .mega-rail .mega-tab, .side .nav-head, .text h3, .text h4, .text h5 { line-height: 1.25; font-weight: 510; font-variation-settings: "wght" 510, "wdth" 100, "opsz" 14; } .font-bold, .compare-body .compare-cell:first-child { line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } .font-head { line-height: 1.05; font-weight: 730; font-variation-settings: "wght" 730, "wdth" 116, "opsz" 23; } .font-button { line-height: 1; font-weight: 500; font-variation-settings: "wght" 500, "wdth" 110, "opsz" 18; } body { font-family: "r"; } h1, h2, h3, h4, h5, h6, .h1, .showcase-head, .split-sect h2, .promo-head, .feedback-head, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head, .h3, .doctor-detail .doctor .cost, .pricegroup-head, .case-link, .compare-head, .faq-question, .mega-sect:has(.mega-menu.is-visible) .mega-head, .h4, .h5, .h6, .slide-head, .sub-head { line-height: 1.05; font-weight: 730; font-variation-settings: "wght" 730, "wdth" 116, "opsz" 23; } .b, .nav-x .nav-item { line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } html { font-size: 22px; } .h0, .schedule-head { font-size: var(--h0); } h1 { font-size: var(--h1); } .h1, .showcase-head, .split-sect h2, .promo-head, .feedback-head { font-size: var(--h1) !important; } h2 { font-size: var(--h2); } .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head { font-size: var(--h2) !important; } h3 { font-size: var(--h3); } .h3, .doctor-detail .doctor .cost, .pricegroup-head, .case-link, .compare-head, .faq-question, .mega-sect:has(.mega-menu.is-visible) .mega-head { font-size: var(--h3) !important; } h4 { font-size: var(--h4); } .h4 { font-size: var(--h4) !important; } .text.ergo { font-size: var(--fs-lg); } .sub-head { text-transform: uppercase; color: var(--tr); } @counter-style do { system: cyclic; symbols: "✓"; suffix: " "; } @counter-style dont { system: cyclic; symbols: "✗"; suffix: " "; } ul:is(.do, .dont) { padding-left: 0.4rem; } ul:is(.do, .dont) li { margin-left: 1.24rem; list-style-position: outside; } ul.do li { list-style-type: do; } ul.dont li { list-style-type: dont; } ul.do li::marker { color: var(--indicator-bg-valid); } ul.dont li::marker { color: var(--indicator-bg-invalid); } @counter-style thumbs { system: cyclic; symbols: "✓"; suffix: " "; } .text h1, .text .h1, .text .showcase-head, .text .promo-head, .text .feedback-head, .text h2, .text .h2, .text .medias.lenses .media-head, .medias.lenses .text .media-head, .text .patient .split-head, .patient .text .split-head, .text .service-tmp-name, .text .service-head, .text .placeholder-head, .text .files-head { color: var(--pr); } .text h3, .text .h3, .text .doctor-detail .doctor .cost, .doctor-detail .doctor .text .cost, .text .pricegroup-head, .text .case-link, .text .compare-head, .text .faq-question, .text .mega-sect:has(.mega-menu.is-visible) .mega-head, .mega-sect:has(.mega-menu.is-visible) .text .mega-head, .text h4, .text .h4, .text h5, .text .h5 { color: var(--pr); } .text p { line-height: 1.25; } .text h1 { font-size: var(--h1); } .text h2 { font-size: var(--h2); } .text h3 { font-size: var(--h3); } .text h4 { font-size: var(--h4); } .text h5 { font-size: var(--h4); } .text h1, .text h2 { margin-top: var(--spacing-hg); } .text h3 { margin-top: var(--spacing-bg); } .text :is(h1, h2, p) + h4 { margin-top: var(--spacing-lg); } .text > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; } .text b, .text strong { line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } .text i, .text em, .text blockquote { font-variation-settings: "slnt" -10; } .text blockquote { margin-left: 0; padding-left: var(--spacing-df); border-left: 3px solid var(--separator-pr); } .text { /* ╭─┬──┬────╮ ├─┼──┴──┬─┤ │ │Table│ │ ├─┴─────┴─┤ ╰─────────╯ */ } .text table { font-size: 20px; text-align: left; } .text table, .text td, .text th { border: none; } .text table { border: 2px solid transparent; } .text thead :is(td, th), .text table:not(:has(thead)) tr:first-child :is(td, th), .text tfoot td { color: var(--pr); line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } .text td, .text th { color: var(--sc); } .text tr:hover :is(td, th) { background-color: var(--qt); } .text table { border-color: var(--separator-pr); } .text tr :is(td, th) { border-top: 2px solid var(--separator-sc); } .text *:first-child > tr:first-child :is(td, th) { border: none; } .text table { border-radius: var(--radius-df); } .text *:first-child > tr:first-child > *:first-child { border-top-left-radius: var(--radius-df); } .text *:first-child > tr:first-child > *:last-child { border-top-right-radius: var(--radius-df); } .text *:last-child > tr:last-child > *:first-child { border-bottom-left-radius: var(--radius-df); } .text *:last-child > tr:last-child > *:last-child { border-bottom-right-radius: var(--radius-df); } .text td, .text th { padding: var(--spacing-table-cell); } .text table { width: 100%; border-collapse: separate; border-spacing: 0; } .text *:first-child > tr:first-child :is(td, th) { position: sticky; top: -2px; z-index: 600; background-color: var(--bg); } .text p { color: var(--sc); } .text a:link { color: var(--sc); text-decoration-color: var(--qt); } .text a:is(:hover, :focus) { color: var(--ac); text-decoration: none; } .text p, .text table { margin-top: var(--spacing-df); margin-bottom: var(--spacing-df); } .text > p:first-child { margin-top: 0; } .text > p:last-child { margin-bottom: 0; } .text :is(h2, h3, h4) + :is(p, ul, ol, video), .text li > :is(ul, ol) { margin-top: var(--spacing-sm); } .text hr { margin-top: 3rem; margin-bottom: 3rem; } .text img, .text video { max-width: 100%; } .text img { border-radius: 0.3em; } .text a [title] { border-bottom: none; } .text [title] { border-bottom: 1px dotted #555; cursor: help; } /* font settings example font-variation-settings:'wght'550,'wdth'50,'opsz'0,'YTLC'480;line-height:1.3; Temp & Help RobotoFlex w100-1000 wd25-151 o8-144 ytlc 416-570 h1,h2,h3,h4,h5,h6{font-variation-settings:'wght'700,'wdth'50,'opsz'0,'YTLC'480;line-height:1.3;}*/ /* variable font mixins @mixin font-body( $line-height: 1.25, $weight: 400, $optical-size: 14, $width: 100 ) { line-height: $line-height; font-weight: $weight; font-variation-settings: 'wght' $weight, 'wdth' $width, 'opsz' $optical-size; } @mixin font-bold( $line-height: 1.25, $weight: 550, $optical-size: 14, $width: 100 ) { line-height: $line-height; font-weight: $weight; font-variation-settings: 'wght' $weight, 'wdth' $width, 'opsz' $optical-size; } @mixin font-semibold( $line-height: 1.25, $weight: 510, $optical-size: 14, $width: 100 ) { line-height: $line-height; font-weight: $weight; font-variation-settings: 'wght' $weight, 'wdth' $width, 'opsz' $optical-size; } //настройки шрифта заголовков h1,h2,h3 (без размера) @mixin font-head( $line-height: 1.05, $weight: 700, $optical-size: 17, $width: 116 ) { line-height: $line-height; font-weight: $weight; font-variation-settings: 'wght' $weight, 'wdth' $width, 'opsz' $optical-size; } //настройки шрифта для кнопок (без размера) @mixin font-button( $line-height: 1.0, $weight: 500, $optical-size: 18, $width: 110 ) { line-height: $line-height; font-weight: $weight; font-variation-settings: 'wght' $weight, 'wdth' $width, 'opsz' $optical-size; } */ /* static @mixin font-body( $line-height: 1.25, $weight: 400, $optical-size: 14, $width: 100 ) { font-family: $font-family-body-regular; line-height: $line-height; font-weight: $weight; } @mixin font-bold( $line-height: 1.25, $weight: 550, $optical-size: 14, $width: 100 ) { font-family: $font-family-body-bold; line-height: $line-height; font-weight: $weight; } @mixin font-semibold( $line-height: 1.25, $weight: 600, $optical-size: 14, $width: 100 ) { font-family: $font-family-body-medium; line-height: $line-height; font-weight: $weight; } //настройки шрифта заголовков h1,h2,h3 (без размера) @mixin font-head( $line-height: 1.05, $weight: 700, $optical-size: 17, $width: 116 ) { font-family: $font-family-body-bold; line-height: $line-height; font-weight: $weight; } //настройки шрифта для кнопок (без размера) @mixin font-button( $line-height: 1.0, $weight: 600, $optical-size: 18, $width: 110 ) { font-family: $font-family-body-medium; line-height: $line-height; font-weight: $weight; } */ /*╭─────────────────────────────────────────────╮ │ Миксины │ │ Которым не нашлось более логичного места. │ │ Например миксины шрифтов лежат в шрифтх │ ╰─────────────────────────────────────────────╯*/ :root { --scrollbar-thumb: rgba(0, 0, 0, 0.125); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.125); --scrollbar-track: transparent; --scrollbar-track-hover: rgba(0, 0, 0, 0); --scrollbar-corner: transparent; --scrollbar-size: 8px; --scrollbar-radius: 0px; } .etalon { color: #ffff00; background-color: #fff; } .etalon-gray { color: #ffffff; background-color: #888; } .a { width: 400px; height: 90px; display: inline-block; display: flex; align-items: center; justify-content: center; } :root { --text-1: rgb(73, 73, 73); --text-2: rgb(103, 103, 103); --text-3: rgb(77, 77, 77); --text-4: rgb(172, 172, 172); --text-5: rgb(91, 91, 91); --text-6: rgb(255, 255, 255); --text-7: rgb(255, 255, 255); --text-8: rgb(28, 28, 28); --text-9: rgb(184, 184, 184); --text-10: rgb(72, 72, 72); --text-11: rgb(98, 98, 98); --text-12: rgb(51, 51, 51); --text-13: rgb(50, 50, 50); --text-14: rgb(150, 150, 150); --text-15: rgb(78, 78, 78); --text-16: rgb(100, 100, 100); --text-18: rgb(100, 100, 100); --text-19: rgb(255, 255, 255); --text-20: rgb(49, 49, 49); --text-17: rgb(43, 43, 43); --bg-1: #777777; --bg-2: #1a1a2e; --bg-3: #fff8e7; --bg-4: #16213e; --bg-5: #e8f5e9; --bg-6: #2471f1; --bg-7: #2d3748; --bg-8: #8b8b8b; --bg-9: #0f172a; --bg-10: #d9ff00; --bg-11: #f2d7d5; --bg-12: #7c8798; --bg-13: #00ffd5; --bg-14: #111827; --bg-15: #ede9fe; --bg-16: #d6d3d1; --bg-18: #d6d3d1; --bg-19: #6b7280; --bg-20: #ecffa5; --bg-17: #888888; } .a1 { color: var(--text-1); background: var(--bg-1); } .a2 { color: var(--text-2); background: var(--bg-2); } .a3 { color: var(--text-3); background: var(--bg-3); } .a4 { color: var(--text-4); background: var(--bg-4); } .a5 { color: var(--text-5); background: var(--bg-5); } .a6 { color: var(--text-6); background: var(--bg-6); } .a7 { color: var(--text-7); background: var(--bg-7); } .a8 { color: var(--text-8); background: var(--bg-8); } .a9 { color: var(--text-9); background: var(--bg-9); } .a10 { color: var(--text-10); background: var(--bg-10); } .a11 { color: var(--text-11); background: var(--bg-11); } .a12 { color: var(--text-12); background: var(--bg-12); } .a13 { color: var(--text-13); background: var(--bg-13); } .a14 { color: var(--text-14); background: var(--bg-14); } .a15 { color: var(--text-15); background: var(--bg-15); } .a16 { color: var(--text-16); background: var(--bg-16); } .a17 { color: var(--text-17); background: var(--bg-17); } .a18 { color: var(--text-18); background: var(--bg-18); } .a19 { color: var(--text-19); background: var(--bg-19); } .a20 { color: var(--text-20); background: var(--bg-20); } .block-width-height-100, .doctor-detail .doctor-pic-inner .play-circle::after, .doctor-detail .doctor-pic-inner::before, .checkbox [type=checkbox] + i::after, .radios label.radio [type=radio] + i::after, .slider .gradient-webgl, .cta .gradient-webgl, .snippet-pic:after, .arrows, .cardmedia:hover:not(:disabled)::before, .score:hover:not(:disabled)::before, .card:has(.card-link):hover:not(:disabled)::before, .file:hover:not(:disabled)::before, .faq:hover:not(:disabled)::before, .service:hover:not(:disabled)::before, .nav-item:hover:not(:disabled)::before, .b::after { display: block; width: 100%; height: 100%; } ._loading { --bg: var(--br); --loading-color: #fff; --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } ._snake::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid rgb(0, 0, 0); border-radius: 6px; animation: clippath 3.5s infinite linear reverse; z-index: -1; z-index: 1500; } @property --rotate-angle { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes rotate360 { 0% { --rotate-angle:1deg ; } 100% { --rotate-angle:359deg; } } @keyframes rotate { 100% { transform: rotate(1turn); } } @keyframes clippath { 0%, 100% { clip-path: inset(0 0 95% 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(95% 0 0 0); } 75% { clip-path: inset(0 0 0 95%); } } details *::selection { background: rgba(0, 0, 0, 0.075); } .details-summary-after-button summary::marker, .price summary::marker { font-size: 0; } .details-summary-after-button summary:after, .price summary:after { color: var(--tsc); background-color: var(--button-lo); } .details-summary-after-button summary:hover:after, .price summary:hover:after { color: var(--tsc); background-color: var(--button-pr); } .details-summary-after-button summary, .price summary { cursor: alias; } .details-summary-after-button summary:after, .price summary:after { display: inline-block; } .details-summary-after-button details:has(summary:only-child) summary, .price details:has(summary:only-child) summary { cursor: unset; } .details-summary-after-button details:has(summary:only-child) summary::after, .price details:has(summary:only-child) summary::after { display: none; } .details-summary-after-button summary:after, .price summary:after { margin-left: 0.25em; padding: 4px 16px; vertical-align: middle; text-align: center; font-size: 12px; line-height: 12px; content: "▼"; border-radius: 8px; } .details-summary-after-button details[open] > summary:after, .price details[open] > summary:after { transform: scaleY(-1); } .details-summary-after-button summary + *, .price summary + * { margin-top: var(--spacing-df); } .folder-tabs { --tab-radius:30px; --tab-height:60px; --bg1:#fff; --bg2:#eee; display: flex; height: var(--tab-height); position: absolute; top: 0; left: 0; margin-top: calc(-1 * var(--tab-height)); } .folder-tab .breadcrumbs { border-color: transparent; } .folder-tab .folder-tab-inner { height: 60px; padding: 0 var(--spacing-df, 16px); display: flex; align-items: center; position: relative; --bg: var(--ab); background: var(--bg); border-radius: 18px 30px 0 0; } .folder-tab .folder-tab-inner::after { content: ""; position: absolute; top: 9px; right: -42px; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 51px 51px 51px; border-color: transparent transparent var(--bg) transparent; z-index: -1; } .align-hcs { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; } .align-hcc { display: flex; flex-direction: row; align-items: center; justify-content: center; } .align-hce { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; } .align-vcs, .showcase2-cont, .device-cont { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .align-vcc { display: flex; flex-direction: column; align-items: center; justify-content: center; } .align-vce { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .align-center, .promo-pic, .thumb { display: flex; align-items: center; justify-content: center; } /* MARK: Responsive ╭──────────────────────╮ │ Зоны ответственности │ │ WIP │ │ │ │ Fluid │ │ ├─ typography │ │ ├─ hero spacing │ │ ├─ section spacing │ │ ╰─ step overrides │ │ │ │ Fluid Stepped │ │ ├─ controls │ │ ├─ forms │ │ ├─ cards │ │ ├─ dashboards │ │ ╰─ enterprise UI │ ╰──────────────────────╯ Fluid подход --spacing-df: fluid(16px, 32px); плавней и чищей css, сложнее отладка Fluid stepped @include breakpoint-stepped-token(--spacing-df, 16px, 32px); значения округлены и отладить легче, производительней MARK: Func MARK: fluid-clamp ╭───────────────────────────────────────────────────────────────╮ │ Адаптивные размеры │ │ │ │ --spacing-df: fluid-clamp(36px, 48px); │ │ Результат clamp(36px, 1.1538461538vw + 31.8461538462px, 48px) │ │ │ │ Изменить размер от 36 → 48px в диапазоне phone → desktop │ │ • Возвращает clamp() выражение │ │ • Использует мапу $breakpoints и ширину вьюпорта vw │ │ │ │ Вместо каждого брейкпоинта, задаем минимальную и максимальную │ │ величину для phone и desktop и интерполируем │ │ между ними, используя текущую ширину viewport. │ │ │ │ Например делаем стандартный отступ для мобилы │ │ размер экрана выбрали 320px, под него подошел отступ 32px │ │ ПК версия у нас выбрана 1200px, поигрались и 48px подошло. │ │ Все промежуточные значения считаем по сути remap диапазонов. │ │ │ ╰───────────────────────────────────────────────────────────────╯*/ /* MARK: MQ ↓↑ ╭─────────────────────────────────────────────────╮ │ Брейкпоинт-центричный подход │ │ │ │ Например при определенном размере │ │ нужно сделать перенос layout, изменить │ │ размер шрифта, что-то убрать итд │ │ │ │ Логичней делать в одном месте, чем в каждом │ │ компоненте менять свойства, это оно. │ │ breakpoint-scoped подход, а не component-scoped │ │ │ │ Мнемоника названия │ │ mq-up(400) = Media Query 400px and UP │ ╰─────────────────────────────────────────────────╯*/ /* MARK: Mixin ╭───────────────────────────────────────────╮ │ Ручная обертка брейкпоинта │ │ внутрь можно поместить несколько классов │ │ │ │ Оборачивает контент для выбранного экрана │ │ • на входе имя из $breakpoints │ │ • на выходе media query обертка │ ╰───────────────────────────────────────────╯*/ /* MARK: Breakpoint-map ╭──────────────────────────────────────────────╮ │ Миксин для генерации media queries │ │ на основе map breakpoints. │ │ @include breakpoint(tablet) {display: flex;} │ ╰──────────────────────────────────────────────╯*/ /* MARK: Stepped val ╭─────────────────────────────────────────────────────────────────────────╮ │ Ступенчатый адаптив │ │ │ │ По сути Fluid подход но без реал-тайм интерполяции, │ │ зашиваем значения в каждый брейкпоинт, получаем css-variable-overrides │ │ │ │ ⚠ Внутри селектора путь будет кривой .selector :root{ │ │ │ │ Чем stepped лучше: │ │ • предсказуемо │ │ • проще debug │ │ • pixel-perfect │ ╰─────────────────────────────────────────────────────────────────────────╯ ╭───────────╮ │ root.scss ╰───────────────────────────────────────────────────────────────────────╮ │ Пример генерации @include breakpoint-stepped-token(--space-lg,24px,64px); │ │ │ │ :root { --space-lg: 64px; } │ │ @media (max-width: 359.98px) {:root {--space-lg: 24px; } } │ │ @media (min-width: 360px) and (max-width: 575.98px) {:root {--space-lg: 32px; } } │ │ @media (min-width: 576px) and (max-width: 767.98px) {:root {--space-lg: 40px; } } │ │ @media (min-width: 1400px) {:root {--space-lg: 64px; } } │ ╰───────────────────────────────────────────────────────────────────────────────────╯*/ u + u { display: none; } @media (min-width: 1400px) { u { display: none; } u + u { display: unset; } } /*╭──────────────────────────────────────╮ │ MARK:⠀breakpoint │ │ │ │ Выводи слева снизу экрана: │ │ • название текущего брейкпоинта │ │ │ │ body { │ │ @include debug-breakpoint-full; │ │ } │ ╰──────────────────────────────────────╯*/ /*╭────────────────────────────────╮ │ Дебаг и разработка │ │ • вывод текущего брейкпоинта │ │ • подсветка элементов │ ╰────────────────────────────────╯*/ .vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; /* Современная замена clip */ white-space: nowrap !important; border: 0 !important; } .dn, .■dn { display: none !important; } .sep { flex-grow: 1; } .tac { text-align: center; } .df { display: flex; align-items: center; } /*╭─────────────╮ │ MARK: WIP │ ╰─────────────╯*/ .debug-wip, .wip { position: relative; } .debug-wip:before, .wip:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: "⚠ Ведутся работы"; color: var(--tr); } .debug-wip, .wip { background: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.062745098), rgba(0, 0, 0, 0.062745098) 60px, rgba(0, 0, 0, 0.031372549) 60px, rgba(0, 0, 0, 0.031372549) 120px); padding: var(--spacing-df); border-radius: var(--radius-df); } /*╭───────────────────────────────────────╮ │ MARK: Debug подсветка элементов │ │ │ │
← first child bg 1 │ │ ← second child bg 2 │ ╰───────────────────────────────────────╯*/ .debug-color-children > :nth-child(1) { --cell-bg:#ffeae3; } .debug-color-children > :nth-child(2) { --cell-bg:#e3f0ff; } .debug-color-children > :nth-child(3) { --cell-bg:#e8f3e8; } .debug-color-children > :nth-child(4) { --cell-bg:#fff1d6; } .debug-color-children > :nth-child(5) { --cell-bg:#f3e8fe; } .debug-color-children > :nth-child(6) { --cell-bg:#ffe6f0; } .debug-color-children > :nth-child(7) { --cell-bg:#e0f2e6; } .debug-color-children > :nth-child(8) { --cell-bg:#fff4e4; } .debug-color-children > :nth-child(9) { --cell-bg:#e8eeff; } .debug-color-children > :nth-child(10) { --cell-bg:#fde6e6; } .debug-color-children > :nth-child(11) { --cell-bg:#e6f3ff; } .debug-color-children > :nth-child(12) { --cell-bg:#f9f0d8; } .debug-number-children > * { position: relative; background: #4a90d9; border-radius: 8px; min-height: 100px; counter-increment: item; } .debug-number-children > *::before { content: counter(item); display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: white; } /* ╭───────────────────────────────────────────────────────╮ │ MARK: Func │ │ Геттеры для получения данных из мап в size.scss │ ╰───────────────────────────────────────────────────────╯*/ /* ╭─────────────────────────────────────────────────────╮ │ MARK: Alias Зачем плоские переменные? │ │ │ │ • подсказки IDE │ │ • понятные имена .button{height:$button-height-df} │ │ • $button-height-df проще get-control-height(df) │ ╰─────────────────────────────────────────────────────╯*/ /* MARK: Mixin ╭─────────────────────────────────────────────────────╮ │ Кнопки и инпуты сильно отличаются │ │ в одно не запихнуть, но можно развести плюс-минус │ │ │ │ Общее │ │ • размеры │ │ • паддинги │ │ • радиусы │ │ │ │ Частное │ │ • html │ │ • focus │ │ • children │ │ • wrapper │ │ • native input reset │ ╰─────────────────────────────────────────────────────╯*/ /* ╭───────────────────────────────────────────╮ │ MARK: States │ │ │ │ Общие состояния для кнопок и ссылок │ ╰───────────────────────────────────────────╯*/ /* MARK: API ╭──────────╮ │ ▓ ▓ │ Применяет цвет фон бордюр для всех состояний │ ▜████▛ │ создает для всего переменные (fg+bg+border) * hover,active... │ ▝▜▛▘ │ вводим type допустим link-pr дописывает до link-pr-hover... ╰──────────╯*/ /* ╭────────────────────╮ ╭────────────────────╮ │ │ │ ┳ │ │ Button │ │ ┃ Input │ │ │ │ ┻ │ ╰─▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄─╯ ╰─▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄─╯ ■ Создание кнопки • высоту и радиус получаем из map в size.scss • отступ сбоку получается из двух компонент: 1 процент от высоты 2 процента от формы (круглым нужно больше отступа) ■ TODO • доделать до переменных, это нужно на мобиле • • ▓ ▓ ▜████▛ MARK: API ▝▜▛▘ ╭───────────────────╮ │ MARK:⠀button │ │ Кнопки + Иконки │ ╰───────────────────╯*/ .b { border: 2px solid transparent; position: relative; overflow: hidden; } .b::after { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .b:hover::after, .b:focus::after { opacity: 1; animation: shine-animation 0.7s ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .b { gap: 12px; display: inline-flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; z-index: 500; position: relative; transform: none; text-decoration: none; user-select: none; cursor: pointer; overflow: hidden; white-space: nowrap; } .blg { height: 72px; padding-left: 35px; padding-right: 35px; border-radius: 36px; min-width: 72px; font-size: var(--button-lg-fs); } .bdf { height: 56px; padding-left: 25px; padding-right: 25px; border-radius: 28px; min-width: 56px; font-size: var(--button-df-fs); } .bsm { height: 48px; padding-left: 23px; padding-right: 23px; border-radius: 24px; min-width: 48px; font-size: var(--button-sm-fs); } .btn { height: 42px; padding-left: 20px; padding-right: 20px; border-radius: 21px; min-width: 42px; font-size: var(--button-tn-fs); } .bsm svg { margin-bottom: -2px; } .bc, .bs { width: 0; } .bda { color: var(--button-danger-fg); } .bda:hover { color: var(--button-danger-hover-fg); } .bda:active { color: var(--button-danger-active-fg); } .bda:focus-visible { color: var(--button-danger-focus-fg); } .bda._sel, .bda.is-active { color: var(--button-danger-selected-fg); } .bda:disabled { color: var(--button-danger-disabled-fg); } .bda { color: var(--button-danger-fg); background-color: var(--button-danger-bg); border-color: var(--button-danger-border, var(--button-danger-bg)); } .bda:hover { color: var(--button-danger-hover-fg); background-color: var(--button-danger-hover-bg); border-color: var(--button-danger-hover-border, var(--button-danger-hover-bg)); } .bda:active { color: var(--button-danger-active-fg); background-color: var(--button-danger-active-bg); border-color: var(--button-danger-active-border, var(--button-danger-active-bg)); } .bda.is-loading { color: var(--button-danger-selected-fg); background-color: var(--button-danger-active-bg); animation: clippath 3.5s infinite linear reverse; --bg: var(--button-danger-bg); --loading-color: var(--br-pale); --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } .bda:focus-visible { color: var(--button-danger-focus-fg); background-color: var(--button-danger-focus-bg, var(--button-danger-bg)); outline: 2px solid currentColor; outline-offset: 2px; } .bda._sel, .bda.is-active { color: var(--button-danger-selected-fg); background-color: var(--button-danger-selected-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .bda:disabled { color: var(--button-danger-disabled-fg); background-color: var(--button-danger-disabled-bg); opacity: var(--button-danger-disabled-opacity, 0.6); cursor: not-allowed; transform: none; } .bda { cursor: pointer; user-select: none; border-style: solid; } .bgh { color: var(--button-ghost-fg); } .bgh:hover { color: var(--button-ghost-hover-fg); } .bgh:active { color: var(--button-ghost-active-fg); } .bgh:focus-visible { color: var(--button-ghost-focus-fg); } .bgh._sel, .bgh.is-active { color: var(--button-ghost-selected-fg); } .bgh:disabled { color: var(--button-ghost-disabled-fg); } .bgh { color: var(--button-ghost-fg); background-color: var(--button-ghost-bg); border-color: var(--button-ghost-border, var(--button-ghost-bg)); } .bgh:hover { color: var(--button-ghost-hover-fg); background-color: var(--button-ghost-hover-bg); border-color: var(--button-ghost-hover-border, var(--button-ghost-hover-bg)); } .bgh:active { color: var(--button-ghost-active-fg); background-color: var(--button-ghost-active-bg); border-color: var(--button-ghost-active-border, var(--button-ghost-active-bg)); } .bgh.is-loading { color: var(--button-ghost-selected-fg); background-color: var(--button-ghost-active-bg); animation: clippath 3.5s infinite linear reverse; --bg: var(--button-ghost-bg); --loading-color: var(--br-pale); --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } .bgh:focus-visible { color: var(--button-ghost-focus-fg); background-color: var(--button-ghost-focus-bg, var(--button-ghost-bg)); outline: 2px solid currentColor; outline-offset: 2px; } .bgh._sel, .bgh.is-active { color: var(--button-ghost-selected-fg); background-color: var(--button-ghost-selected-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .bgh:disabled { color: var(--button-ghost-disabled-fg); background-color: var(--button-ghost-disabled-bg); opacity: var(--button-ghost-disabled-opacity, 0.6); cursor: not-allowed; transform: none; } .bgh { cursor: pointer; user-select: none; border-style: solid; } .bvo { color: var(--button-void-fg); } .bvo:hover { color: var(--button-void-hover-fg); } .bvo:active { color: var(--button-void-active-fg); } .bvo:focus-visible { color: var(--button-void-focus-fg); } .bvo._sel, .bvo.is-active { color: var(--button-void-selected-fg); } .bvo:disabled { color: var(--button-void-disabled-fg); } .bvo { color: var(--button-void-fg); background-color: var(--button-void-bg); border-color: var(--button-void-border, var(--button-void-bg)); } .bvo:hover { color: var(--button-void-hover-fg); background-color: var(--button-void-hover-bg); border-color: var(--button-void-hover-border, var(--button-void-hover-bg)); } .bvo:active { color: var(--button-void-active-fg); background-color: var(--button-void-active-bg); border-color: var(--button-void-active-border, var(--button-void-active-bg)); } .bvo.is-loading { color: var(--button-void-selected-fg); background-color: var(--button-void-active-bg); animation: clippath 3.5s infinite linear reverse; --bg: var(--button-void-bg); --loading-color: var(--br-pale); --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } .bvo:focus-visible { color: var(--button-void-focus-fg); background-color: var(--button-void-focus-bg, var(--button-void-bg)); outline: 2px solid currentColor; outline-offset: 2px; } .bvo._sel, .bvo.is-active { color: var(--button-void-selected-fg); background-color: var(--button-void-selected-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .bvo:disabled { color: var(--button-void-disabled-fg); background-color: var(--button-void-disabled-bg); opacity: var(--button-void-disabled-opacity, 0.6); cursor: not-allowed; transform: none; } .bvo { cursor: pointer; user-select: none; border-style: solid; } .bpr { color: var(--button-primary-fg); } .bpr:hover { color: var(--button-primary-hover-fg); } .bpr:active { color: var(--button-primary-active-fg); } .bpr:focus-visible { color: var(--button-primary-focus-fg); } .bpr._sel, .bpr.is-active { color: var(--button-primary-selected-fg); } .bpr:disabled { color: var(--button-primary-disabled-fg); } .bpr { color: var(--button-primary-fg); background-color: var(--button-primary-bg); border-color: var(--button-primary-border, var(--button-primary-bg)); } .bpr:hover { color: var(--button-primary-hover-fg); background-color: var(--button-primary-hover-bg); border-color: var(--button-primary-hover-border, var(--button-primary-hover-bg)); } .bpr:active { color: var(--button-primary-active-fg); background-color: var(--button-primary-active-bg); border-color: var(--button-primary-active-border, var(--button-primary-active-bg)); } .bpr.is-loading { color: var(--button-primary-selected-fg); background-color: var(--button-primary-active-bg); animation: clippath 3.5s infinite linear reverse; --bg: var(--button-primary-bg); --loading-color: var(--br-pale); --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } .bpr:focus-visible { color: var(--button-primary-focus-fg); background-color: var(--button-primary-focus-bg, var(--button-primary-bg)); outline: 2px solid currentColor; outline-offset: 2px; } .bpr._sel, .bpr.is-active { color: var(--button-primary-selected-fg); background-color: var(--button-primary-selected-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .bpr:disabled { color: var(--button-primary-disabled-fg); background-color: var(--button-primary-disabled-bg); opacity: var(--button-primary-disabled-opacity, 0.6); cursor: not-allowed; transform: none; } .bpr { cursor: pointer; user-select: none; border-style: solid; } .bsc { color: var(--button-secondary-fg); } .bsc:hover { color: var(--button-secondary-hover-fg); } .bsc:active { color: var(--button-secondary-active-fg); } .bsc:focus-visible { color: var(--button-secondary-focus-fg); } .bsc._sel, .bsc.is-active { color: var(--button-secondary-selected-fg); } .bsc:disabled { color: var(--button-secondary-disabled-fg); } .bsc { color: var(--button-secondary-fg); background-color: var(--button-secondary-bg); border-color: var(--button-secondary-border, var(--button-secondary-bg)); } .bsc:hover { color: var(--button-secondary-hover-fg); background-color: var(--button-secondary-hover-bg); border-color: var(--button-secondary-hover-border, var(--button-secondary-hover-bg)); } .bsc:active { color: var(--button-secondary-active-fg); background-color: var(--button-secondary-active-bg); border-color: var(--button-secondary-active-border, var(--button-secondary-active-bg)); } .bsc.is-loading { color: var(--button-secondary-selected-fg); background-color: var(--button-secondary-active-bg); animation: clippath 3.5s infinite linear reverse; --bg: var(--button-secondary-bg); --loading-color: var(--br-pale); --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } .bsc:focus-visible { color: var(--button-secondary-focus-fg); background-color: var(--button-secondary-focus-bg, var(--button-secondary-bg)); outline: 2px solid currentColor; outline-offset: 2px; } .bsc._sel, .bsc.is-active { color: var(--button-secondary-selected-fg); background-color: var(--button-secondary-selected-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .bsc:disabled { color: var(--button-secondary-disabled-fg); background-color: var(--button-secondary-disabled-bg); opacity: var(--button-secondary-disabled-opacity, 0.6); cursor: not-allowed; transform: none; } .bsc { cursor: pointer; user-select: none; border-style: solid; } .bosc { color: var(--button-osc-fg); } .bosc:hover { color: var(--button-osc-hover-fg); } .bosc:active { color: var(--button-osc-active-fg); } .bosc:focus-visible { color: var(--button-osc-focus-fg); } .bosc._sel, .bosc.is-active { color: var(--button-osc-selected-fg); } .bosc:disabled { color: var(--button-osc-disabled-fg); } .bosc { color: var(--button-osc-fg); background-color: var(--button-osc-bg); border-color: var(--button-osc-border, var(--button-osc-bg)); } .bosc:hover { color: var(--button-osc-hover-fg); background-color: var(--button-osc-hover-bg); border-color: var(--button-osc-hover-border, var(--button-osc-hover-bg)); } .bosc:active { color: var(--button-osc-active-fg); background-color: var(--button-osc-active-bg); border-color: var(--button-osc-active-border, var(--button-osc-active-bg)); } .bosc.is-loading { color: var(--button-osc-selected-fg); background-color: var(--button-osc-active-bg); animation: clippath 3.5s infinite linear reverse; --bg: var(--button-osc-bg); --loading-color: var(--br-pale); --gradient-size: 100%; --rotate-angle: 0deg; background: linear-gradient(var(--rotate-angle), var(--bg) calc((100% - var(--gradient-size)) / 2), var(--loading-color), var(--bg) calc(100% - (100% - var(--gradient-size)) / 2)); animation: rotate360 5s linear infinite; } .bosc:focus-visible { color: var(--button-osc-focus-fg); background-color: var(--button-osc-focus-bg, var(--button-osc-bg)); outline: 2px solid currentColor; outline-offset: 2px; } .bosc._sel, .bosc.is-active { color: var(--button-osc-selected-fg); background-color: var(--button-osc-selected-bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .bosc:disabled { color: var(--button-osc-disabled-fg); background-color: var(--button-osc-disabled-bg); opacity: var(--button-osc-disabled-opacity, 0.6); cursor: not-allowed; transform: none; } .bosc { cursor: pointer; user-select: none; border-style: solid; } .bgh { color: var(--sc); fill: var(--sc); --button-ghost-hover-border:var(--separator-sc); --button-ghost-active-border:var(--separator-pr); } .bpr svg { color: var(--ab); } .b.ips::before, .b.ipe::before, .b.ipc::before { font-size: 24px; width: 24px; height: 24px; content: ""; background-repeat: no-repeat; background-size: cover; } .ipc { padding-left: 0; padding-right: 0; } .b.ips, .b.ipe, .b.ipc { vertical-align: middle; } .b.btn.ips, .btn .b.ips { padding-left: var(--button-tn); } .b.btn.ipe, .btn .b.ipe { padding-right: var(--button-tn); } .b.bsm.ips, .bsm .b.ips { padding-left: var(--button-sm); } .b.bsm.ipe, .bsm .b.ipe { padding-right: var(--button-sm); } .b.bdf.ips, .bdf .b.ips { padding-left: var(--button-df); } .b.bdf.ipe, .bdf .b.ipe { padding-right: var(--button-df); } .b.blg.ips, .blg .b.ips { padding-left: var(--button-lg); } .b.blg.ipe, .blg .b.ipe { padding-right: var(--button-lg); } .b.ips::before, .b.ipe::before { position: absolute; } .b.btn.ips::before, .btn .b.ips::before { left: calc((var(--button-tn) - 1rem) / 2); } .b.btn.ipe::before, .btn .b.ipe::before { right: calc((var(--button-tn) - 1rem) / 2); } .b.bsm.ips::before, .bsm .b.ips::before { left: calc((var(--button-sm) - 1rem) / 2); } .b.bsm.ipe::before, .bsm .b.ipe::before { right: calc((var(--button-sm) - 1rem) / 2); } .b.bdf.ips::before, .bdf .b.ips::before { left: calc((var(--button-df) - 1rem) / 2); } .b.bdf.ipe::before, .bdf .b.ipe::before { right: calc((var(--button-df) - 1rem) / 2); } .b.blg.ips::before, .blg .b.ips::before { left: calc((var(--button-lg) - 1rem) / 2); } .b.blg.ipe::before, .blg .b.ipe::before { right: calc((var(--button-lg) - 1rem) / 2); } .b.ips:focus::before, .b.ipe:focus::before, .b.ipc:focus::before { opacity: 0.7; } .b.ips:hover::before, .b.ipe:hover::before, .b.ipc:hover::before { opacity: 0.85; } .b.ips:active::before, .b.ipe:active::before, .b.ipc:active::before { opacity: 1; } .b > .I + .I { margin-left: 0.5em; } /* ╭────────────╮ │ MARK:⠀link │ ╰────────────╯*/ .link-ac, .card-ac .card-link { color: var(--link-ac-fg); } .link-ac:hover, .card-ac .card-link:hover { color: var(--link-ac-hover-fg); } .link-ac:active, .card-ac .card-link:active { color: var(--link-ac-active-fg); } .link-ac:focus-visible, .card-ac .card-link:focus-visible { color: var(--link-ac-focus-fg); } .link-ac._sel, .card-ac ._sel.card-link, .link-ac.is-active, .card-ac .is-active.card-link { color: var(--link-ac-selected-fg); } .link-ac:disabled, .card-ac .card-link:disabled { color: var(--link-ac-disabled-fg); } .link-ac, .card-ac .card-link { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .link-ac:hover, .card-ac .card-link:hover { text-decoration-thickness: 2px; } .link-pr, .cardmedia-head a, .scroll-item .doctor-link, .sect.doctors .doctor-link, .doctor-link, .split-sect a:not(.b), .service-link, .placeholder-desc a, .case-link, .file-link, .mega .post-link, .mega-menu .mega-link, .mega-rail .mega-tab, .mega-rail .mega-link, .side .nav-link, .head .nav-item, .foot .nav-item, .snippet-link, .card-benefits .card-head .card-link, .card-benefits .feature-head .card-link, .card-intercity .card-head .card-link, .card-intercity .feature-head .card-link, .card-patient-docs .card-head .card-link, .card-patient-docs .feature-head .card-link, .card-vacancy .card-head .card-link, .card-vacancy .feature-head .card-link, .card-pr .card-link, .feature .card-link, .schedule .doc-link { color: var(--link-pr-fg); } .link-pr:hover, .cardmedia-head a:hover, .sect.doctors .doctor-link:hover, .doctor-link:hover, .split-sect a:hover:not(.b), .service-link:hover, .placeholder-desc a:hover, .case-link:hover, .file-link:hover, .mega .post-link:hover, .mega-menu .mega-link:hover, .mega-rail .mega-tab:hover, .mega-rail .mega-link:hover, .side .nav-link:hover, .head .nav-item:hover, .foot .nav-item:hover, .snippet-link:hover, .card-benefits .card-head .card-link:hover, .card-benefits .feature-head .card-link:hover, .card-intercity .card-head .card-link:hover, .card-intercity .feature-head .card-link:hover, .card-patient-docs .card-head .card-link:hover, .card-patient-docs .feature-head .card-link:hover, .card-vacancy .card-head .card-link:hover, .card-vacancy .feature-head .card-link:hover, .card-pr .card-link:hover, .feature .card-link:hover, .schedule .doc-link:hover { color: var(--link-pr-hover-fg); } .link-pr:active, .cardmedia-head a:active, .sect.doctors .doctor-link:active, .doctor-link:active, .split-sect a:active:not(.b), .service-link:active, .placeholder-desc a:active, .case-link:active, .file-link:active, .mega .post-link:active, .mega-menu .mega-link:active, .mega-rail .mega-tab:active, .mega-rail .mega-link:active, .side .nav-link:active, .head .nav-item:active, .foot .nav-item:active, .snippet-link:active, .card-benefits .card-head .card-link:active, .card-benefits .feature-head .card-link:active, .card-intercity .card-head .card-link:active, .card-intercity .feature-head .card-link:active, .card-patient-docs .card-head .card-link:active, .card-patient-docs .feature-head .card-link:active, .card-vacancy .card-head .card-link:active, .card-vacancy .feature-head .card-link:active, .card-pr .card-link:active, .feature .card-link:active, .schedule .doc-link:active { color: var(--link-pr-active-fg); } .link-pr:focus-visible, .cardmedia-head a:focus-visible, .sect.doctors .doctor-link:focus-visible, .doctor-link:focus-visible, .split-sect a:focus-visible:not(.b), .service-link:focus-visible, .placeholder-desc a:focus-visible, .case-link:focus-visible, .file-link:focus-visible, .mega .post-link:focus-visible, .mega-menu .mega-link:focus-visible, .mega-rail .mega-tab:focus-visible, .mega-rail .mega-link:focus-visible, .side .nav-link:focus-visible, .head .nav-item:focus-visible, .foot .nav-item:focus-visible, .snippet-link:focus-visible, .card-benefits .card-head .card-link:focus-visible, .card-benefits .feature-head .card-link:focus-visible, .card-intercity .card-head .card-link:focus-visible, .card-intercity .feature-head .card-link:focus-visible, .card-patient-docs .card-head .card-link:focus-visible, .card-patient-docs .feature-head .card-link:focus-visible, .card-vacancy .card-head .card-link:focus-visible, .card-vacancy .feature-head .card-link:focus-visible, .card-pr .card-link:focus-visible, .feature .card-link:focus-visible, .schedule .doc-link:focus-visible { color: var(--link-pr-focus-fg); } .link-pr._sel, .cardmedia-head a._sel, .sect.doctors ._sel.doctor-link, ._sel.doctor-link, .split-sect a._sel:not(.b), ._sel.service-link, .placeholder-desc a._sel, ._sel.case-link, ._sel.file-link, .mega ._sel.post-link, .mega-menu ._sel.mega-link, .mega-rail ._sel.mega-tab, .mega-rail ._sel.mega-link, .side ._sel.nav-link, .head ._sel.nav-item, .foot ._sel.nav-item, ._sel.snippet-link, .card-benefits .card-head ._sel.card-link, .card-benefits .feature-head ._sel.card-link, .card-intercity .card-head ._sel.card-link, .card-intercity .feature-head ._sel.card-link, .card-patient-docs .card-head ._sel.card-link, .card-patient-docs .feature-head ._sel.card-link, .card-vacancy .card-head ._sel.card-link, .card-vacancy .feature-head ._sel.card-link, .card-pr ._sel.card-link, .feature ._sel.card-link, .schedule ._sel.doc-link, .link-pr.is-active, .cardmedia-head a.is-active, .sect.doctors .is-active.doctor-link, .is-active.doctor-link, .split-sect a.is-active:not(.b), .is-active.service-link, .placeholder-desc a.is-active, .is-active.case-link, .is-active.file-link, .mega .is-active.post-link, .mega-menu .is-active.mega-link, .mega-rail .is-active.mega-tab, .mega-rail .is-active.mega-link, .side .is-active.nav-link, .head .is-active.nav-item, .foot .is-active.nav-item, .is-active.snippet-link, .card-benefits .card-head .is-active.card-link, .card-benefits .feature-head .is-active.card-link, .card-intercity .card-head .is-active.card-link, .card-intercity .feature-head .is-active.card-link, .card-patient-docs .card-head .is-active.card-link, .card-patient-docs .feature-head .is-active.card-link, .card-vacancy .card-head .is-active.card-link, .card-vacancy .feature-head .is-active.card-link, .card-pr .is-active.card-link, .feature .is-active.card-link, .schedule .is-active.doc-link { color: var(--link-pr-selected-fg); } .link-pr:disabled, .cardmedia-head a:disabled, .sect.doctors .doctor-link:disabled, .doctor-link:disabled, .split-sect a:disabled:not(.b), .service-link:disabled, .placeholder-desc a:disabled, .case-link:disabled, .file-link:disabled, .mega .post-link:disabled, .mega-menu .mega-link:disabled, .mega-rail .mega-tab:disabled, .mega-rail .mega-link:disabled, .side .nav-link:disabled, .head .nav-item:disabled, .foot .nav-item:disabled, .snippet-link:disabled, .card-benefits .card-head .card-link:disabled, .card-benefits .feature-head .card-link:disabled, .card-intercity .card-head .card-link:disabled, .card-intercity .feature-head .card-link:disabled, .card-patient-docs .card-head .card-link:disabled, .card-patient-docs .feature-head .card-link:disabled, .card-vacancy .card-head .card-link:disabled, .card-vacancy .feature-head .card-link:disabled, .card-pr .card-link:disabled, .feature .card-link:disabled, .schedule .doc-link:disabled { color: var(--link-pr-disabled-fg); } .link-pr, .cardmedia-head a, .scroll-item .doctor-link, .sect.doctors .doctor-link, .doctor-link, .split-sect a:not(.b), .service-link, .placeholder-desc a, .case-link, .file-link, .mega .post-link, .mega-menu .mega-link, .mega-rail .mega-tab, .mega-rail .mega-link, .side .nav-link, .head .nav-item, .foot .nav-item, .snippet-link, .card-benefits .card-head .card-link, .card-benefits .feature-head .card-link, .card-intercity .card-head .card-link, .card-intercity .feature-head .card-link, .card-patient-docs .card-head .card-link, .card-patient-docs .feature-head .card-link, .card-vacancy .card-head .card-link, .card-vacancy .feature-head .card-link, .card-pr .card-link, .feature .card-link, .schedule .doc-link { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .link-pr:hover, .cardmedia-head a:hover, .sect.doctors .doctor-link:hover, .doctor-link:hover, .split-sect a:hover:not(.b), .service-link:hover, .placeholder-desc a:hover, .case-link:hover, .file-link:hover, .mega .post-link:hover, .mega-menu .mega-link:hover, .mega-rail .mega-tab:hover, .mega-rail .mega-link:hover, .side .nav-link:hover, .head .nav-item:hover, .foot .nav-item:hover, .snippet-link:hover, .card-benefits .card-head .card-link:hover, .card-benefits .feature-head .card-link:hover, .card-intercity .card-head .card-link:hover, .card-intercity .feature-head .card-link:hover, .card-patient-docs .card-head .card-link:hover, .card-patient-docs .feature-head .card-link:hover, .card-vacancy .card-head .card-link:hover, .card-vacancy .feature-head .card-link:hover, .card-pr .card-link:hover, .feature .card-link:hover, .schedule .doc-link:hover { text-decoration-thickness: 2px; } .link-sc, a.pil { color: var(--link-sc-fg); } .link-sc:hover, a.pil:hover { color: var(--link-sc-hover-fg); } .link-sc:active, a.pil:active { color: var(--link-sc-active-fg); } .link-sc:focus-visible, a.pil:focus-visible { color: var(--link-sc-focus-fg); } .link-sc._sel, a._sel.pil, .link-sc.is-active, a.is-active.pil { color: var(--link-sc-selected-fg); } .link-sc:disabled, a.pil:disabled { color: var(--link-sc-disabled-fg); } .link-sc, a.pil { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .link-sc:hover, a.pil:hover { text-decoration-thickness: 2px; } .link-tr, .mega-foot .contact a { color: var(--link-tr-fg); } .link-tr:hover, .mega-foot .contact a:hover { color: var(--link-tr-hover-fg); } .link-tr:active, .mega-foot .contact a:active { color: var(--link-tr-active-fg); } .link-tr:focus-visible, .mega-foot .contact a:focus-visible { color: var(--link-tr-focus-fg); } .link-tr._sel, .mega-foot .contact a._sel, .link-tr.is-active, .mega-foot .contact a.is-active { color: var(--link-tr-selected-fg); } .link-tr:disabled, .mega-foot .contact a:disabled { color: var(--link-tr-disabled-fg); } .link-tr, .mega-foot .contact a { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .link-tr:hover, .mega-foot .contact a:hover { text-decoration-thickness: 2px; } .link-br, .map-balloon-link, .mega-rail .mega-link, .head .nav-item.is-active, .foot .nav-item.is-active, .feature :is(.contact-phone, .contact-email) { color: var(--link-br-fg); } .link-br:hover, .map-balloon-link:hover, .mega-rail .mega-link:hover, .head .nav-item.is-active:hover, .foot .nav-item.is-active:hover, .feature :hover:is(.contact-phone, .contact-email) { color: var(--link-br-hover-fg); } .link-br:active, .map-balloon-link:active, .mega-rail .mega-link:active, .head .nav-item.is-active:active, .foot .nav-item.is-active:active, .feature :active:is(.contact-phone, .contact-email) { color: var(--link-br-active-fg); } .link-br:focus-visible, .map-balloon-link:focus-visible, .mega-rail .mega-link:focus-visible, .head .nav-item.is-active:focus-visible, .foot .nav-item.is-active:focus-visible, .feature :focus-visible:is(.contact-phone, .contact-email) { color: var(--link-br-focus-fg); } .link-br._sel, ._sel.map-balloon-link, .mega-rail ._sel.mega-link, .feature ._sel:is(.contact-phone, .contact-email), .link-br.is-active, .is-active.map-balloon-link, .mega-rail .is-active.mega-link, .head .is-active.nav-item, .foot .is-active.nav-item, .feature .is-active:is(.contact-phone, .contact-email) { color: var(--link-br-selected-fg); } .link-br:disabled, .map-balloon-link:disabled, .mega-rail .mega-link:disabled, .head .nav-item.is-active:disabled, .foot .nav-item.is-active:disabled, .feature :disabled:is(.contact-phone, .contact-email) { color: var(--link-br-disabled-fg); } .link-br, .map-balloon-link, .mega-rail .mega-link, .head .nav-item.is-active, .foot .nav-item.is-active, .feature :is(.contact-phone, .contact-email) { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .link-br:hover, .map-balloon-link:hover, .mega-rail .mega-link:hover, .head .nav-item.is-active:hover, .foot .nav-item.is-active:hover, .feature :hover:is(.contact-phone, .contact-email) { text-decoration-thickness: 2px; } .link-underline, .placeholder-desc a { text-decoration: underline; } .link-underline-bold, .split-sect a:not(.b) { text-decoration: underline; text-decoration-color: var(--separator-pr); text-underline-offset: 8%; text-decoration-thickness: 12%; } /* ╭───────────────────╮ │ MARK: interaction │ ╰───────────────────╯*/ .nav-item:hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .nav-item:hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .nav-item:hover:not(:disabled):hover::before, .nav-item:hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .service:hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .service:hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .service:hover:not(:disabled):hover::before, .service:hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .faq:hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .faq:hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .faq:hover:not(:disabled):hover::before, .faq:hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .file:hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .file:hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .file:hover:not(:disabled):hover::before, .file:hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .card:has(.card-link):hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .card:has(.card-link):hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .card:has(.card-link):hover:not(:disabled):hover::before, .card:has(.card-link):hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .score:hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .score:hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .score:hover:not(:disabled):hover::before, .score:hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .cardmedia:hover:not(:disabled) { transform: translateY(1px); position: relative; overflow: hidden; } .cardmedia:hover:not(:disabled)::before { content: ""; position: absolute; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 200ms; } .cardmedia:hover:not(:disabled):hover::before, .cardmedia:hover:not(:disabled):focus::before { opacity: 1; animation: shine-animation 300ms ease-out forwards; } @keyframes shine-animation { 0% { left: -100%; } 100% { left: 100%; } } .file:active:not(:disabled) { transform: translateY(2px); } .card:has(.card-link):active:not(:disabled) { transform: translateY(2px); } .case:active:not(:disabled) { transform: translateY(2px); } .doctor-link { user-select: none; user-drag: none; -webkit-user-drag: none; } .doctor-link::before { user-select: none; user-drag: none; -webkit-user-drag: none; } :root { /* ╭────────────────╮ │ ▟███▙ │ ⚠ ВАЖНО ДЛЯ ЗРЕНИЯ │ █▛ ▜█ │ Безопасный диапазон контраста 4.5-12 │ ▐█ │ │ █▙ ▟█ │ ⚠ Черный на белом это 21:1 │ ▜███▛ │ Повышенная усталость + гало-эффект ╰─▄▄▄▄▄▄▄▄▄▄▄▄▄▄─╯ После настройки проверить через веб-инспектор весь текст на контрастность: 1 Ctrl+Shift+I 2 В тултипе снизу секция Accessibility: Contrast Web Content Accessibility Guidelines Хорошо 7:1 Минимальный 4.5:1 Подумать над --{space|radius|color|font}-{role|size}-{variant} primitive → semantic → component ╭──────────────────────────────────────────────────────────────╮ │ MARK: Colors │ │ ac|pr|sc|tr|qt Монохромная палитра преимущественно шрифтов │ │ ab|vo|br|ex Черно-белая и Акцентная брендовая палитры │ ╰──────────────────────────────────────────────────────────────╯*/ --ab: #ffffff; --vo: #000000; --br: #007aff; --br-soft:#5aa9ff; --br-pale: oklch(from var(--br) calc(l + 0.25) calc(c * 1.0) h); --br2-rich:#fbb000; --br2-pure:#ffc53d; --br2-soft:#f9cf6d; --br2-pale:#fadc95; --ex: #0b7eaf; --test: #ffff00; --ac: #000000; --pr: #48465c; --sc: #828098; --tr: #9a98ad; /* // MARK: Think Нейминг отступов --card-inset-x inset = внутренний отступ (четко назначение ясно) x/y = оси, почему не h/v, h ~ height залезает на эту ассоциацию --card-spacing-x более абстрактный Нейминг цветов void loud агрессивно кричащий bold без агрессии ( ⚠ конфликт с жирностью) pure • без примесей черного и серого rich легкая примесь темных deep темный calm переход в фон низкая насыщенность, средний тон soft • пастельный mute добавляется серость pale блёклый dust dull землистый hazy дымка airy сливается с белым фоном Выбор void deep loud pure calm soft pale airy pure calm soft pale pure soft pale 6 subtle,washed, silent 5 vivid, dense, solid muted, ghost, quiet, faint 4 loud,calm, bold,pure,deep,rich soft,pale,airy,dull,mute 3 dim */ --base: #39383E; --base: #111111; --pr: oklch(from var(--base) calc(l + 0.15) calc(c * 1.0) h); --sc: oklch(from var(--base) calc(l + 0.30) calc(c * 1.0) h); --tr: oklch(from var(--base) calc(l + 0.40) calc(c * 0.4) h); --qt: #ddd8e3; --ph:#00000012; --focus:#ff0; --transparent:transparent; --asc: #00000033; --tone-up:white; --tone-down:black; /*╭────────────╮ │ MARK:⠀bg │ ╰────────────╯*/ --bg:hsl(200, 33.0%, 95.0%); --bl: #000; --backdrop-color:rgba(0, 0, 0, 0.25); --button-pr:#1083e5; --text-on-pr:#ffffff; --button-sc:#deebf3; --text-on-sc:#000000; --button-lo:#00000011; --text-on-lo:#000000; --button-osc:#00000010; --text-on-osc:#000000; --pastel-apricot: #f7e2c0; --pastel-aqua: #d9f2f4; --pastel-blush: #f3d9d9; --pastel-butter: #fff4e4; --pastel-cream: #f7f3e5; --pastel-lavender: #e1d9f0; --pastel-mint: #e8f0db; --pastel-oat: #f0e5d6; --pastel-peach: #ffe8d9; --pastel-rose: #ffeae3; --pastel-sky: #d2ddec; --pastel-vanilla: #fff1d6; --pastel-apricot-soft: #faebd0; --pastel-aqua-soft:#f6fafb; --pastel-blush-soft: #f9e6e6; --pastel-butter-soft: #fff7eb; --pastel-cream-soft: #faf7e9; --pastel-lavender-soft: #ece6f5; --pastel-mint-soft: #f0f5e6; --pastel-oat-soft: #f5ecdf; --pastel-peach-soft: #ffece0; --pastel-rose-soft: #ffeee9; --pastel-sky-soft: #e8eef5; --pastel-vanilla-soft: #fff4df; --pastel-apricot-bold: #f5c999; --pastel-aqua-bold: #8fd9e0; --pastel-blush-bold: #e6b5b5; --pastel-butter-bold: #ffe8c9; --pastel-cream-bold: #efe5cc; --pastel-lavender-bold: #b7a6e0; --pastel-mint-bold: #b8d6a3; --pastel-oat-bold: #e0c9b2; --pastel-peach-bold: #ffcfb3; --pastel-rose-bold: #ffc7b8; --pastel-sky-bold:rgb(185, 202, 230); --pastel-vanilla-bold: #ffe2b0; --pallete-amber: #ffc107; --pallete-yellow-pure:#ffeb3b; --pallete-yellow-rich:#ffcc00; --pallete-orange-deep:#ff5722; --pallete-lime:#cfdc39; --pallete-indigo:#5856d6; --pallete-orange:#ff9800; --pallete-blue-pure:#007aff; --pallete-blue-calm:#03a9f4; --pallete-cyan:#41b7e5; --pallete-blue-gray:#607d8b; --pallete-green:#8bc34a; --pallete-green-calm:#4cd964; --pallete-red:#fc553c; --gradient-dawn: linear-gradient(135deg, #ffe3e8, #ffcdc0, #ead2ff); --gradient-mint: linear-gradient(145deg, #c2e6e6, #94d2d2, #b8d6f0); --gradient-warm: linear-gradient(120deg, #faf5e8, #f2dfc2, #eccabe); --gradient-lavender: linear-gradient(100deg, #decff0, #c4d0e8, #d2c6ec); --gradient-spring: linear-gradient(125deg, #dbe8c2, #f2e8d8, #f5e2db); --gradient-dawn-soft: linear-gradient(135deg, #fff1f3, #ffe3db, #f5eaff); --gradient-mint-soft: linear-gradient(145deg, #ddf2f2, #bce3e3, #d4e6f5); --gradient-warm-soft: linear-gradient(120deg, #fdf9ef, #f7ecd6, #f5e2d9); --gradient-lavender-soft: linear-gradient(100deg, #eee4fa, #dde3f2, #e8dcf5); --gradient-spring-soft: linear-gradient(125deg, #eaf0da, #f8f0e2, #f9ede8); --gradient-header-pr:linear-gradient(173deg,#0996e8 50%,#00e1a1); --indicator-bg-active: #628cff; --indicator-bg-valid: #4cd964; --indicator-bg-invalid: #fc553c; --input-border-init-color:#d9d9e3; --input-border-active-color:var(--indicator-bg-active); --input-border-invalid-color:var(--indicator-bg-invalid); --input-focus-color:rgba(13, 15, 183, 0.06); --input-error-color:#fc553c88; --separator-ac:rgba(0, 0, 0, .4); --separator-ac-shadow: 0 0 1px 1px var(--separator-ac); --separator-pr:rgba(0, 0, 0, .2); --separator-pr-shadow: 0 0 1px 1px var(--separator-pr); --separator-sc:rgba(0, 0, 0, .08); --separator-sc-shadow: 0 0 1px 1px var(--separator-sc); --separator-tr:rgba(0, 0, 0, .04); --separator-tr-shadow: 0 0 1px 1px var(--separator-tr); --switch-bg-shadow: 0 1px rgba(0,0,45,.095), inset 0 .125rem .25rem -3px rgba(0,0,45,0.4); --switch-button-shadow:0 1px 1px rgba(0, 0, 45, .095); --shadow-border-top:0 -1px 1px rgba(0, 0, 45, .1); --shadow-border-left:-1px 0 1px rgba(0, 0, 45, .1); --shadow-border-bottom:0 1px 1px rgba(0, 0, 45, .1); --pil-pr:rgba(0,0,0,.04); /* ╭────────────────────────────────────────────────────────────────╮ │ MARK: Primitive │ ╰────────────────────────────────────────────────────────────────╯*/ --fs-hg:clamp(36px, 1.1688311688vw + 31.7922077922px, 54px); --fs-bg:clamp(28px, 0.5194805195vw + 26.1298701299px, 36px); --fs-lg:clamp(24px, 0.2597402597vw + 23.0649350649px, 28px); --fs-md:clamp(22px, 0.1298701299vw + 21.5324675325px, 24px); --fs-df:clamp(20px, 0.1298701299vw + 19.5324675325px, 22px); --fs-sm:clamp(18px, 0.1298701299vw + 17.5324675325px, 20px); --fs-tn:clamp(16px, 0.1298701299vw + 15.5324675325px, 18px); --fs-mn:16px; --h0:clamp(36px, 3.5064935065vw + 23.3766233766px, 90px); --h1:clamp(42px, 1.4285714286vw + 36.8571428571px, 64px); --h2:clamp(34px, 0.5194805195vw + 32.1298701299px, 42px); --h3:clamp(24px, 0.6493506494vw + 21.6623376623px, 34px); --h4:24px; --spacing-hg: clamp(60px, 0.7792207792vw + 57.1948051948px, 72px); --spacing-bg: clamp(48px, 0.7792207792vw + 45.1948051948px, 60px); --spacing-lg: clamp(28px, 1.2987012987vw + 23.3246753247px, 48px); --spacing-md: clamp(28px, 0.5194805195vw + 26.1298701299px, 36px); --spacing-df: clamp(20px, 0.5194805195vw + 18.1298701299px, 28px); --spacing-sm: clamp(12px, 0.5194805195vw + 10.1298701299px, 20px); --spacing-tn: clamp(6px, 0.3896103896vw + 4.5974025974px, 12px); --spacing-mn: clamp(6px, 0vw + 6px, 6px); --spacing-no: 0; --spacing-table-cell: 16px 20px; --radius-md:24px; --radius-df:16px; --radius-sm:8px; --radius-no:0; /* ╭────────────────────────────────────────────────────────────────╮ │ MARK: Component │ ╰────────────────────────────────────────────────────────────────╯*/ --mark-pr: rgba(240, 240, 0, .5); /* MARK:⠀layout ╭────────────────────────────────────────────────────────────────╮ │ ⚠ READ-ONLY │ │ Абсолютные размеры с пояснением менять только в size.scss │ │ Однако связь css-переменных с css-переменными можно │ ╰────────────────────────────────────────────────────────────────╯*/ --sticky-top-offset:40px; --layout-spacing: 20px; --layout-gap: clamp(60px, 2.8571428571vw + 49.7142857143px, 104px); --layout-column-gap: 48px; --sect-gap: clamp(48px, 2.5974025974vw + 38.6493506494px, 88px); --sect-center-width: 42rem; --body-col-gap: var(--spacing-lg); --head-top-gap: 32px; --head-bot-gap: var(--spacing-md); --head-bot-spacing: var(--spacing-sm); --head-radius: var(--radius-df); --logo-width: clamp(120px, 7.7922077922vw + 91.9480519481px, 240px); --mega-radius: var(--head-radius); --mega-rail-width: 220px; --mega-side-width: 240px; --mega-spacing-df: var(--spacing-df); --mega-spacing-lg: var(--spacing-lg); --mega-cards-col-gap: var(--spacing-tn); --mega-cards-row-gap: var(--spacing-tn); --side-width: 300px; --foot-spacing: var(--spacing-lg); --foot-border: rgba(0,0,0,.1); --foot-nav-gap: var(--spacing-df); --foot-gap: var(--spacing-lg); --foot-radius: var(--head-radius); --sect-header-spacing: var(--spacing-bg); --sect-header-gap: var(--spacing-sm); --sect-header-breadcrumbs-spacing: var(--spacing-bg); --nav-radius: var(--radius-df); --nav-pr-init: var(--pr); --nav-pr-active: var(--br); --nav-pr-selected-fg: var(--nav-pr-active); --nav-pr-hover: var(--br); --nav-dot-size: 16px; --breadcrumbs-item-width-max: 13ch; --steps-gap:var(--spacing-sm); --steps-x:var(--spacing-df); --steps-height: 80px; --steps-mark-height: 10px; --steps-fg-active: var(--vo); --steps-bg-active: var(--indicator-bg-active); --steps-fg-done: var(--vo); --steps-bg-done: var(--br2-rich); --steps-bg-undone: var(--separator-tr); --scrollbar-bg-active: var(--button-pr); --scrollbar-bg-idle: var(--button-sc); --doctor-col-width: 340px; --grid-col-size: 14.0rem; --grid-col-size-3: 16.5rem; --grid-col-gap: var(--spacing-sm); --grid-row-gap: var(--spacing-sm); --grid-row-min: 0; --grid-row-max: 28rem; --arrow-play-size:60px; --icon-snippet:clamp(44px, 1.2987012987vw + 39.3246753247px, 64px); --icon-hg:48px; --icon-bg:40px; --icon-lg:36px; --icon-df:24px; --icon-sm:16px; --control-gap-df: 12px; --control-gap-sm: 8px; --button-gap: var(--control-gap-df); --button-lg: 72px; --button-df: 56px; --button-sm: 48px; --button-tn: 42px; --button-lg-fs: clamp(26px, 0.2597402597vw + 25.0649350649px, 30px); --button-df-fs: clamp(22px, 0.2597402597vw + 21.0649350649px, 26px); --button-sm-fs: clamp(18px, 0.2597402597vw + 17.0649350649px, 22px); --button-tn-fs: 18px; --checkbox-inner-shadow: 0 1px rgba(0,0,45,.095), inset 0 .125rem .25rem -3px rgba(0,0,45,0.4); --checkbox-bg:linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.03)); --radio-list-bg:var(--ab); /*╭──────────────────────╮ │ MARK: Comps │ │ │ │ • Уникальные блоки │ │ • Частные случаи │ ╰──────────────────────╯*/ --viewport-safe-height: 90dvh; --promo-media-size: 432px; --dialog-radius: var(--spacing-df); --callout-gap: var(--spacing-sm); --callout-padding: var(--spacing-sm); --callout-cont-gap: var(--spacing-mn); --callout-radius: var(--radius-df); --callout-icon-size: var(--icon-hg); --callout-bg: var(--surface-0); --callout-border: var(--separator-primary); --callout-icon-bg: var(--br2-pale); --callout-icon-warning-bg: var(--br); --callout-head-fg: var(--vo); --callout-desc-fg: var(--sc); --callout-fontsize: var(--fs-sm); --dart-size:12px; --reel-height:600px; --gallery-mini-height:600px; --card-padding-bg: var(--spacing-bg); --card-padding-lg: var(--spacing-lg); --card-padding-df: var(--spacing-df); --card-padding-sm: var(--spacing-sm); --card-radius-bg: var(--radius-md); --card-radius-lg: var(--radius-md); --card-radius-df: var(--radius-md); --card-radius-sm: var(--radius-sm); --card-gap: 6px; --card-gap-lg: 28px; --card-gap-df: 20px; --card-gap-sm: 8px; --card-border: transparent; --card-shadow: 0 .6em 1em rgba(140, 140, 150, .1); --card-shadow-hover: 0 .6em 3em rgba(140, 140, 150, .2); --card-bg: #fff; --card-bg-dim: oklch(from var(--card-bg) calc(l - 0.0125) calc(c * 1.0) h); --card-transition:all 0.2s ease-in-out; --folder-shadow: 0 .8rem .5rem rgba(140, 140, 150, .06); --map-shadow: 0 .4em 1em rgba(140, 140, 150, .2); --prices-padding: 2rem 0; --snippet-padding: var(--spacing-df) var(--spacing-df) var(--spacing-df) 120px; --snippet-gap: var(--card-gap-sm); --slider-max-height: 600px; --slider-aspect-ratio: 6/2; --slider-bg: #ffffff; --slider-head: var(--ac); --slider-desc: var(--ac); --slider-radius: var(--radius-md); --slider-text-max-width: 60ch; --slider-dot-size: var(--nav-dot-size); --slider-dot-bottom: 16px; --slider-dot-gap: 10px; --slider-dot-init: rgba(0,0,0,.2); --slider-dot-active: rgba(0,0,0,.5); --slider-arrow-size: 120px; --slider-arrow-init: linear-gradient(45deg, #000000 0%, #00000000 100%); --slider-arrow-hover: var(--br); --slider-arrow-offset-ratio-x: -0.5; --service-pic-radius:var(--radius-df); } /* ╭─────────╮ │ Base ╰───────────────────────────╮ │ │ │ Глобальные правила документа, │ │ все что наследуется всеми │ │ элементами без классов │ │ │ │ • reset, normalize │ │ • body, html, a │ │ • типографика базовая │ │ • глобальные браузерные фиксы │ │ • :selection │ │ │ ╰─────────────────────────────────────╯*/ /* think возможно не нужен этот файл, пока конкурирует с ui и typo ╭───────────────────────────────────────────────────────────────────╮ │ MARK: QOL │ │ Читаемость — сглаживание шрифтов, лигатуры, кернинг │ │ 100% высоты на мобилках — учитывая высоту адресной строки │ ╰───────────────────────────────────────────────────────────────────╯*/ html { height: -webkit-fill-available; } body { min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; } mark { background-color: var(--mark-pr); } *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } * { scroll-margin-top: 10vh; } a[href^="https://"] { cursor: alias; } :focus { outline-offset: 6px; } .br { color: var(--br); } .ac { color: var(--ac); } .pr { color: var(--pr); } .sc { color: var(--sc); } .tr { color: var(--tr); } .qt { color: var(--qt); } body { color: var(--pr); background-color: var(--bg); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } /* ╭───────────────────────────────────────────────────────╮ │ Grid system │ │ │ │ Типовая колоночная разметка: │ │ • колонки, миксины и extends │ │ • это не разметка для header, sidebar, main, footer │ ╰───────────────────────────────────────────────────────╯ ╭───────────────────────────────────────────────────────────────────────────────────────╮ │ MARK: template │ │ Генерация шаблона разметки грида на основе имени класса │ │ .grid-mam → grid-template-columns: min-content auto min-content; │ │ Аббревиатура «mam» шифруется поведение трех колонок: минимальная, авто, минимальная │ │ из доступных │ │ [m|a|x|f|1-5] → min-content|auto|max-content|fit-content(100%)|1fr-5fr │ ╰───────────────────────────────────────────────────────────────────────────────────────╯*/ /*╭─────────────────────────────────────────────────────────╮ │ Парсит паттерн 'mam' → 'min-content auto min-content' │ │ Парсер используется для обоих миксинов снизу │ ╰─────────────────────────────────────────────────────────╯*/ /*╭─────────────────────────────────────────────────────────────╮ │ Создает классы вида .grid-mam{} для tailwind-like верстки │ ╰─────────────────────────────────────────────────────────────╯*/ /*╭─────────────────────────────────────────────────────────────────────────╮ │ Пример │ │ │ │ минимальная колонка │ │ эта будет максимальной │ │ минимальная колонка │ │ │ │ .panel{ │ │ @include grid-col-pattern('mam'); │ │ // Результат: grid-template-columns: min-content auto min-content; │ │ } │ ╰─────────────────────────────────────────────────────────────────────────╯*/ /* ╭────────────────────────────────────────────────────────────────────────╮ │ MARK: painter │ │ │ │ Раскрасить любую ячейку с начала или конца │ │ Создает классы вида sc1n - цвет sc присвоить первому столбцу с коцна │ │ .pr1 c:nth-child(1) {color:var(--pr)} │ │ .sc1n c:nth-last-child(1) {color:var(--sc)} │ ╰────────────────────────────────────────────────────────────────────────╯*/ /* ╭────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ MARK: Grid │ │ │ │ Примеры │ │ @include grid(3); │ │ @include grid($cols: 2, $col-template: 250px 1fr); // первая колонка 250px, вторая занимает остаток │ │ @include grid($cols: 4, $row-template: minmax(100px, auto), $auto-flow: row dense); │ │ @include grid($cols: 3, $aspect-ratio: 4/3 ); │ ╰────────────────────────────────────────────────────────────────────────────────────────────────────────╯*/ /* ╭────────────────────────────────────────────────────╮ │ MARK: Responsive grid │ │ │ │ • Авторазбивка на несколько колонок через minmax │ │ • Подстраиваются под ширину, переносятся красиво │ │ • Ручная с шрифтами и отступами лучше этой │ ╰────────────────────────────────────────────────────╯*/ /* ╭──────────────────────────────────────────────────────────────────╮ │ ⚠ Extend-only │ │ • Нельзя использовать в html вида
:nth-child(1) { grid-area: ac1; } .grid-services > :nth-child(2) { grid-area: ac2; } .grid-services > :nth-child(3) { grid-area: pr1; } .grid-services > :nth-child(4) { grid-area: pr2; } .grid-services > :nth-child(5) { grid-area: pr3; } .grid-services > :nth-child(1) { --cell-bg:#ffeae3; } .grid-services > :nth-child(2) { --cell-bg:#e3f0ff; } .grid-services > :nth-child(3) { --cell-bg:#e8f3e8; } .grid-services > :nth-child(4) { --cell-bg:#fff1d6; } .grid-services > :nth-child(5) { --cell-bg:#f3e8fe; } .grid-services > :nth-child(6) { --cell-bg:#ffe6f0; } .grid-services > :nth-child(7) { --cell-bg:#e0f2e6; } .grid-services > :nth-child(8) { --cell-bg:#fff4e4; } .grid-services > :nth-child(9) { --cell-bg:#e8eeff; } .grid-services > :nth-child(10) { --cell-bg:#fde6e6; } .grid-services > :nth-child(11) { --cell-bg:#e6f3ff; } .grid-services > :nth-child(12) { --cell-bg:#f9f0d8; } .grid-services-y { --header-h: 220px; --subheader-h: 30px; --gap:32px; --sb-width:8px; --sb-thumb-bg:rgba(0,0,0,0.5); --sb-thumb-hover:rgba(0,0,0,0.7); --sb-track-bg:transparent; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: var(--subheader-h) repeat(3, 1fr); grid-template-areas: "subhead1 subhead2 subhead3" "accent primary1 secondary" "accent primary2 secondary" "accent primary3 secondary"; gap: var(--gap); height: 100dvh; height: auto; } .grid-services-y > :nth-child(1) { grid-area: subhead1; } .grid-services-y > :nth-child(2) { grid-area: subhead2; } .grid-services-y > :nth-child(3) { grid-area: subhead3; } .grid-services-y > :nth-child(4) { grid-area: accent; } .grid-services-y > :nth-child(5) { grid-area: primary1; } .grid-services-y > :nth-child(6) { grid-area: primary2; } .grid-services-y > :nth-child(7) { grid-area: primary3; } .grid-services-y > :nth-child(8) { grid-area: secondary; } .grid-services-y > :nth-child(9) { grid-area: secondary; } :root { --schedule-day-height: 78px; } @media (max-width: 575.98px) { :root { --schedule-day-height: 78px; } } @media (min-width: 576px) and (max-width: 767.98px) { :root { --schedule-day-height: 81px; } } @media (min-width: 768px) and (max-width: 991.98px) { :root { --schedule-day-height: 84px; } } @media (min-width: 992px) and (max-width: 1199.98px) { :root { --schedule-day-height: 87px; } } @media (min-width: 1200px) and (max-width: 1899.98px) { :root { --schedule-day-height: 90px; } } @media (min-width: 1900px) { :root { --schedule-day-height: 100px; } } .schedule-sect { display: grid; align-items: center; gap: var(--spacing-lg); } @media (max-width: 1399.98px) { .schedule-sect { grid-template: "head" "table" "nav"; } } @media (min-width: 1400px) { .schedule-sect { grid-template: "head nav" "table table"; grid-template-columns: 1fr min-content; } } @media (max-width: 575.98px) { .schedule-sect .schedule-nav { justify-content: center; } } .schedule { grid-area: table; } .schedule-head { grid-area: head; } .schedule-nav { grid-area: nav; } .schedule { display: grid; overflow-x: auto; } .schedule-subhead, .schedule-item { display: contents; } @media (max-width: 1399.98px) { .schedule { grid-template-rows: auto repeat(6, auto); grid-template-columns: min-content; grid-auto-flow: column; grid-auto-columns: 1fr; } .schedule-subhead * { position: sticky; left: 0; } } @media (min-width: 1400px) { .schedule { grid-template-columns: auto repeat(6, 1fr); } } .schedule-item .doc { position: relative; } .schedule-subhead > * { z-index: 300; } .schedule-subhead > * { background: linear-gradient(to right, var(--bg) 50%, transparent); } .schedule .doc { display: flex; align-items: center; } .schedule .doc, .schedule .day { padding: var(--spacing-sm); } .schedule-item :is(.doc, .day), .schedule .has-slots { border-radius: var(--radius-df); } .schedule .has-slots .day-name { color: var(--sc); } .schedule { gap: var(--spacing-tn); --doc-width: 300px; } .schedule-subhead { margin-bottom: var(--spacing-tn); } .schedule-item { margin-bottom: var(--spacing-tn); } .schedule .slot { display: block; white-space: nowrap; } .schedule .doc { width: 100%; gap: var(--spacing-mn); } .schedule .doc-pic { border-radius: 9999px; overflow: hidden; width: var(--icon-hg); height: var(--icon-hg); } .schedule .doc-pic img { width: 100%; height: 100%; object-fit: contain; } .schedule .doc-pic { margin: 0; flex-shrink: 0; } .schedule .doc-cont { display: flex; flex-direction: column; gap: 2px; } .schedule .doc-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .schedule .day { justify-content: center; } @media (min-width: 1180px) { .schedule .day.has-slots .day-name { color: var(--tr); } } .schedule .day .slots { display: flex; flex-direction: column; } .schedule .day.has-no-slots { display: flex; align-items: center; justify-content: center; } .schedule-item .day { display: flex; flex-flow: column nowrap; gap: var(--spacing-tn); min-height: var(--schedule-day-height); } .schedule .schedule-subhead .day.is-today { color: var(--br); } .schedule .schedule-subhead .day.is-today::after { display: inline-block; margin-left: var(--spacing-tn); } .schedule .is-past .slots { display: none; } .schedule-item .day-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schedule .slots { font-size: var(--fs-sm); } .schedule .doc-text, .schedule .day-name { font-size: var(--fs-tn); } .schedule .schedule-subhead, .schedule .doc-name { line-height: 1.25; font-weight: 510; font-variation-settings: "wght" 510, "wdth" 100, "opsz" 14; } .schedule-item .doc { background-color: var(--background); } .schedule .doc-text { color: var(--tr); } .schedule .has-slots { background-color: var(--background); border: none; cursor: pointer; } .schedule .has-no-slots { border: 1px solid var(--separator-sc); } .schedule .has-no-slots, .schedule .is-past { color: var(--tr); } .schedule.is-loading .schedule-item :is(.day, .doc) { background: linear-gradient(45deg, var(--separator-sc) 0%, var(--ab) 20%, var(--ab) 30%, var(--separator-sc) 100%); background-size: 300% 300%; animation: gradientShift 3s ease-in-out infinite; border: transparent; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .schedule-slots { display: flex; flex-flow: column nowrap; gap: var(--spacing-bg); } .schedule-slots .day { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .schedule-slots .day-name { line-height: 1.25; font-weight: 510; font-variation-settings: "wght" 510, "wdth" 100, "opsz" 14; } .schedule-slots .day-name { color: var(--br); } .schedule-slots .day svg { color: var(--br); fill: var(--br); vertical-align: -0.125em; } /*╭────────────────────╮ │ Карточки │ │ • feature │ │ • spots │ │ • snippets │ │ • миксины │ │ • extends классы │ ╰────────────────────╯*/ /*╭────────────────────────────────────────╮ │ MARK: Visual │ │ │ │ Пример │ │ @include card-visual( │ │ card,df, │ │ $padding:var(--head-bot-spacing), │ │ $radius: var(--head-bot-radius) │ │ ); │ ╰────────────────────────────────────────╯*/ /*╭──────────────────────────────╮ │ MARK:⠀Layout │ │ │ │ Каркас и позиционирование. │ │ Колонки гор-е, сниппеты. │ ╰──────────────────────────────╯*/ /*╭────────────────╮ │ MARK: Extend │ ╰────────────────╯*/ .card-pic, .feature-pic { line-height: 0; } .card-desc, .vacancies .vacancy-desc, .feature-desc { flex-grow: 1; } .card-link { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .card-ac { display: flex; flex-flow: column nowrap; justify-content: space-between; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-lg, var(--card-radius-lg)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-lg, var(--card-padding-lg)); gap: var(--card-gap-lg, var(--card-gap-lg)); } .card-ac .card-head, .card-ac .feature-head { font-size: var(--h1); } .card-pr, .feature { display: flex; flex-flow: column nowrap; justify-content: space-between; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--card-gap-df, var(--card-gap-df)); } .card-pr .card-head, .card-pr .feature-head, .feature .card-head, .feature .feature-head { font-size: var(--h2); } .card-pr .card-pic .i, .card-pr .feature-pic .i, .feature .card-pic .i, .feature .feature-pic .i { width: 36px; height: 36px; } .card-ac svg { color: var(--ab); fill: var(--ab); } .card-pr svg, .feature svg { color: var(--br2-rich); fill: var(--br2-rich); } .grid-services .card { position: relative; } .grid-services .card-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .grid-services .card-ac .cost { color: var(--ab); } .grid-services .card-ac { background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 40%), url("/dist/css/../media/img/services/laser.webp") no-repeat 50% 50%; background-size: cover; } .grid-services .card-ac .card-head, .grid-services .card-ac .feature-head, .grid-services .card-ac .card-desc, .grid-services .card-ac .vacancies .vacancy-desc, .vacancies .grid-services .card-ac .vacancy-desc, .grid-services .card-ac .feature-desc, .grid-services .card-ac .card-cost { color: var(--ab); } .grid-services .card-ac svg { color: var(--ab); fill: var(--ab); } .grid-services .card-ac + .card-ac { background: linear-gradient(0deg, #5F80EB 20%, rgba(95, 128, 235, 0)), url("/dist/css/../media/img/services/diag.webp") no-repeat 50% 50%; background-size: cover; } /*╭─────────────────╮ │ MARK: cards │ │ ⚠ Extend-only │ ╰─────────────────╯*/ .cards-2 .card:nth-child(1) { border-bottom-right-radius: var(--radius-sm); } .cards-2 .card:nth-child(2) { border-bottom-left-radius: var(--radius-sm); } /*╭───────────────╮ │ MARK: comps │ ╰───────────────╯*/ .card-benefits, .card-intercity, .card-patient-docs, .card-vacancy { position: relative; background-color: var(--pastel-sky); } .card-benefits .card-head .card-link::before, .card-benefits .feature-head .card-link::before, .card-intercity .card-head .card-link::before, .card-intercity .feature-head .card-link::before, .card-patient-docs .card-head .card-link::before, .card-patient-docs .feature-head .card-link::before, .card-vacancy .card-head .card-link::before, .card-vacancy .feature-head .card-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .card-intercity { position: relative; } .card-intercity::after { content: ""; position: absolute; inset: 0; background-image: url("/dist/css/../media/svg/map_russia_outline.svg"); background-size: 60%; background-position: 110% 50%; background-repeat: no-repeat; opacity: 0.18; mix-blend-mode: multiply; pointer-events: none; } .card-y-large, .place-info, .doctor-detail .doctor .folder, .vacancies .vacancy, .tests, .prices, .events.card { display: flex; flex-flow: column nowrap; justify-content: space-between; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-lg, var(--card-radius-lg)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-lg, var(--card-padding-lg)); gap: var(--card-gap-lg, var(--card-gap-lg)); } .card-y-large .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .place-info .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .doctor-detail .doctor .folder .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .card-y-large .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .place-info .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .doctor-detail .doctor .folder .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .vacancies .vacancy .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .vacancies .vacancy .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .tests .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .tests .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .prices .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .prices .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .events.card .tool-x :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head), .events.card .service-meta :is(h2, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head) { margin-bottom: var(--spacing-df); } .slider + .snippets { margin-top: calc(-0.5 * var(--layout-gap)); } .snippets { display: grid; justify-content: space-between; align-content: end; column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-size), 1fr)); } .snippet { display: grid; position: relative; grid-template-columns: auto minmax(0, 1fr); position: relative; } .snippet { position: relative; } .snippet-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .snippet-head, .snippet-desc { align-content: center; } .snippet-pic { display: flex; align-items: center; justify-content: center; } .snippet:has(> :only-child) { grid-template-areas: "cont"; grid-template-columns: 1fr; } .snippet-pic { grid-area: pic; } .snippet { grid-template-areas: "pic cont"; } .snippet:has(.snippet-pic):has(.snippet-head):has(.snippet-desc) .snippet-head { align-self: end; } .snippet:has(.snippet-pic):has(.snippet-head):has(.snippet-desc) .snippet-desc { align-self: start; } .snippet:has(.snippet-pic):has(.snippet-head):has(.snippet-desc) { grid-template-areas: "pic head" "pic desc"; } .snippet:has(> .snippet-pic) { column-gap: calc(3 * var(--snippet-gap)); } .snippet:has(> :only-child) { gap: unset; } .snippet-head { font-size: var(--fs-lg); line-height: 1; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } .snippet-pic { position: relative; } .snippet-pic:after { position: absolute; bottom: 0; left: 0; content: ""; background: linear-gradient(135deg, #ddf -10%, #000 80%); z-index: 300; mix-blend-mode: screen; } .snippet { background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--snippet-gap); padding: var(--spacing-md); border-top-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .snippet-head, .snippet-desc:only-child { color: var(--vo); } .snippet-desc { color: var(--sc); } .snippet svg[data-icon] { width: var(--icon-snippet); height: var(--icon-snippet); } .snippet:nth-child(1) .snippet-pic svg { color: var(--pallete-blue-pure); fill: var(--pallete-blue-pure); } .snippet:nth-child(2) .snippet-pic svg { color: var(--vo); fill: var(--vo); } .snippet:nth-child(3) .snippet-pic svg { color: var(--pallete-green-calm); fill: var(--pallete-green-calm); } .snippet .i { --icon-size: 60px; background-color: var(--ph); width: var(--icon-size); height: var(--icon-size); border-radius: calc(var(--icon-size) / 2); display: block; } /* ╭─────────────────────────────╮ │ MARK: features │ │ основные-карточка │ ╰─────────────────────────────╯*/ .promo + .features, .promo + .spots, .spots + .promo, .body > .spots:first-child { margin-top: calc(-1 * var(--sect-gap) / 2); } .feature { position: relative; } .feature-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .feature-link { color: var(--link-pr-fg); } .feature-link:hover { color: var(--link-pr-hover-fg); } .feature-link:active { color: var(--link-pr-active-fg); } .feature-link:focus-visible { color: var(--link-pr-focus-fg); } .feature-link._sel, .feature-link.is-active { color: var(--link-pr-selected-fg); } .feature-link:disabled { color: var(--link-pr-disabled-fg); } .feature-link { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .feature-link:hover { text-decoration-thickness: 2px; } .feature-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; margin-top: var(--spacing-sm); } .feature-pic + .feature-head { margin-top: unset; } .feature-desc { overflow-wrap: break-word; word-break: break-word; hyphens: auto; color: var(--tr); } .feature-hint { position: absolute; right: var(--spacing-df); top: var(--spacing-df); } .feature .social-text { margin-left: var(--spacing-tn); } .feature:has(.folder-tab) { border-top-left-radius: unset; } .features + .spots { margin-top: calc(-1 * var(--sect-gap) / 2); } /* ╭─────────────────────────────╮ │ MARK: spot │ │ мини-карточка │ ╰─────────────────────────────╯*/ .spots { display: flex; flex-flow: row wrap; gap: var(--spacing-df) var(--spacing-df); } @media (max-width: 575.98px) { .spots { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 100%; } .spots .spot { width: unset; } } .docs .spot { min-width: 16rem; } .spot { width: 168px; font-size: var(--fs-sm); text-decoration: none; color: var(--sc); } .spot-meta { color: var(--qt); } .spot { background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-sm, var(--card-radius-sm)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-sm, var(--card-padding-sm)); gap: var(--card-gap-sm, var(--card-gap-sm)); background: radial-gradient(circle at 12% 12%, #fff 0%, var(--card-bg-dim) 100%); display: flex; flex-flow: column nowrap; justify-content: space-between; flex-grow: 1; } .spot-pic { flex-shrink: 0; } /* ╭─────────────────────────────╮ │ MARK: hero │ │ большая форма │ ╰─────────────────────────────╯*/ .feedback { display: flex; flex-flow: column nowrap; } @media (min-width: 1200px) { .feedback { flex-direction: row; } .feedback > * { flex-basis: 50%; } .feedback-form { max-width: min(100%, 500px); } } .feedback-cont { display: grid; justify-items: center; align-items: center; } .feedback-form { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } @media (max-width: 575.98px) { .feedback-form { align-items: center; } } .feedback-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; margin-bottom: var(--spacing-df); } .feedback { gap: var(--spacing-hg); } .feedback-wrap { max-width: min(100%, 500px); } @media (max-width: 575.98px) { .feedback { padding: var(--spacing-lg); padding-top: calc(var(--spacing-hg) * 2); } } @media (min-width: 576px) { .feedback { padding: calc(var(--spacing-hg) * 2) var(--spacing-hg); } } .feedback { border-radius: var(--radius-md); background-color: var(--ab); box-shadow: var(--card-shadow); } .feedback-pic { position: relative; } .feedback-pic svg[data-icon] { position: absolute; top: 0; left: 0; margin-top: -100px; margin-left: -20px; width: 100px; height: 100px; color: var(--br2-soft); fill: var(--br2-soft); } /* ╭─◆─╮ ▁▁ ╭────╮ ╰───╰── ▒▒ █ │ Layout = Head + Body + Foot ▃█████▛▘ │ • храним шаблон сайта █ ████ │ • навигацию и меню ╭────╯ ▓▓▓▓ │ • пейджинг │ ▓ ▓ │ • хлебные крошки │ ▓ ▓ │ • grid, container, wrapper, section ╰────────────────╯ Зачем neck и tail Чтобы появились два места на всю ширину когда на странице есть сайдбар и не хочется застрять в 2-колоночной разметке. А названия поддерживают исходную метафору: header+body+footer */ .head { grid-area: head; } .neck { grid-area: neck; } .body { grid-area: body; } .side { grid-area: side; } .tail { grid-area: tail; } .foot { grid-area: foot; } .over { grid-area: over; } body { display: grid; } @media (max-width: 991.98px) { body { grid-template-areas: "head" "neck" "body" "side" "tail" "foot" "over"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto auto auto; } } @media (min-width: 992px) { body { grid-template-areas: "head head" "neck neck" "body side" "tail tail" "foot foot" "over over"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto auto auto; } } body { width: 100%; width: var(--body-width-available); } @media (min-width: 576px) { body { width: 90vw; } } body { margin-bottom: var(--layout-spacing); margin-left: auto; margin-right: auto; } body body:has(.side) { column-gap: var(--body-col-gap); } body:has(.side) { column-gap: var(--layout-column-gap); } .head + :is(.neck, .body), .head + .body + .side, :is(.body, .side) + .tail, :is(.body, .tail, .side) + .foot { margin-top: var(--layout-gap); } .neck + .body, .neck + .body + .side { margin-top: var(--layout-gap); } .neck, .body, .tail { display: flex; flex-flow: column nowrap; gap: var(--sect-gap); } @media (min-width: 768px) { .side { width: var(--side-width); } } body:has(.side) .body { max-width: min(78ch, 100vw); } @media (min-width: 992px) { body:has(.side) .body { min-width: 48vw; } } body:has(.side) .body { margin-left: auto; margin-right: auto; } @media (min-width: 800px) { .head { display: block; } } .head.is-sticky { position: sticky; top: 0; z-index: 1000; } .head-top { margin: var(--layout-spacing) 0; gap: var(--head-top-gap); display: flex; flex-flow: row nowrap; gap: var(--spacing-df) var(--spacing-df); } .head-top > * { display: flex; align-items: center; justify-content: center; } .head-top .contact { gap: 16px; flex-grow: 1; } .head-top .social { gap: 8px; } .head-bot { background: linear-gradient(to bottom, var(--background) 20%, var(--surface-0) 100%); border-radius: var(--radius-md); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--head-radius); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--head-bot-spacing); gap: var(--card-gap-df, var(--card-gap-df)); gap: var(--head-bot-gap); } .contact-phone, .contact-email { color: var(--link-pr-fg); } .contact-phone:hover, .contact-email:hover { color: var(--link-pr-hover-fg); } .contact-phone:active, .contact-email:active { color: var(--link-pr-active-fg); } .contact-phone:focus-visible, .contact-email:focus-visible { color: var(--link-pr-focus-fg); } .contact-phone._sel, .contact-phone.is-active, .contact-email._sel, .contact-email.is-active { color: var(--link-pr-selected-fg); } .contact-phone:disabled, .contact-email:disabled { color: var(--link-pr-disabled-fg); } .contact-phone, .contact-email { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .contact-phone:hover, .contact-email:hover { text-decoration-thickness: 2px; } .head .nav { font-size: var(--fs-md); } .head .search { padding: 0 var(--spacing-df); color: var(--tr); fill: var(--tr); } .head s { display: none; } @media (max-width: 889.98px) { .head .contact-email { display: none; } } @media (max-width: 699.98px) { .head .search { display: none; } } @media (max-width: 599.98px) { .head .social { display: none; } .head .head-top > * { justify-content: flex-end; } } @media (max-width: 499.98px) { .head .workhours { display: none; } .head .contact { justify-content: center; } .head .head-bot s { display: none; } .head .head-bot .nav-item:first-child { width: 56px; } } @media (max-width: 1049.98px) { .head .nav { order: 2; } .head .logo u:first-child { display: block; width: 42px; height: 42px; } .head .nav-item:not(:first-child) { display: none; } .head .head-bot { gap: var(--spacing-tn); align-items: center; } .head s { display: block; flex-grow: 1; } } .foot .social-icon i { width: var(--icon-lg); height: var(--icon-lg); } .foot-top { display: grid; } .foot-top .foot-card { grid-column: 1/-1; display: flex; flex-flow: column nowrap; gap: var(--spacing-sm); } @media (max-width: 575.98px) { .foot-top .foot-card { grid-row: 5/6; } } @media (min-width: 576px) { .foot-top { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto) min-content; } .foot-top .foot-card { grid-row: 3/4; } } @media (min-width: 360.02px) and (max-width: 767.98px) { .foot-top .foot-card { align-self: center; text-align: center; } } @media (min-width: 768px) { .foot-top .tool-y { display: flex; flex-flow: row nowrap; gap: var(--spacing-tn); } } @media (min-width: 992px) { .foot-top .foot-card { display: flex; flex-flow: row nowrap; gap: var(--spacing-df) var(--spacing-df); justify-content: space-between; align-items: center; } .foot-top .foot-card h2 { flex-grow: 1; } } @media (min-width: 1200px) { .foot-top { grid-template-columns: repeat(5, auto); grid-template-rows: min-content; } .foot-top .foot-card, .foot-top .tool-y { flex-direction: column; } .foot-top .foot-card { grid-column: unset; grid-row: unset; align-items: start; justify-content: start; } .foot-top .foot-card h2 { flex-grow: 0; } .foot-top .foot-card { padding-right: var(--spacing-lg); } } .foot-top { gap: var(--foot-gap); column-gap: var(--foot-nav-gap); row-gap: calc(2 * var(--foot-nav-gap)); padding: var(--foot-spacing); margin-bottom: var(--spacing-hg); } .foot-top .tool-y { gap: var(--spacing-tn); } .foot-top .tool-y > :where(.b) { width: 100%; } .foot-top { border: 2px solid var(--foot-border); border-radius: var(--foot-radius); } .foot-top .nav-link { color: var(--link-pr-fg); } .foot-top .nav-link:hover { color: var(--link-pr-hover-fg); } .foot-top .nav-link:active { color: var(--link-pr-active-fg); } .foot-top .nav-link:focus-visible { color: var(--link-pr-focus-fg); } .foot-top .nav-link._sel, .foot-top .nav-link.is-active { color: var(--link-pr-selected-fg); } .foot-top .nav-link:disabled { color: var(--link-pr-disabled-fg); } .foot-top .nav-link { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .foot-top .nav-link:hover { text-decoration-thickness: 2px; } .foot-top .nav-item { color: var(--link-sc-fg); } .foot-top .nav-item:hover { color: var(--link-sc-hover-fg); } .foot-top .nav-item:active { color: var(--link-sc-active-fg); } .foot-top .nav-item:focus-visible { color: var(--link-sc-focus-fg); } .foot-top .nav-item._sel, .foot-top .nav-item.is-active { color: var(--link-sc-selected-fg); } .foot-top .nav-item:disabled { color: var(--link-sc-disabled-fg); } .foot-top .nav-item { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .foot-top .nav-item:hover { text-decoration-thickness: 2px; } /* // MARK: Foot .foot { //theme border : $separator-border-width solid var(--foot-border); border-radius: var(--foot-radius); //size width: 100%; gap: var(--foot-gap); padding: var(--foot-spacing); //scaff display : flex; flex-wrap : wrap; align-items : flex-start; justify-content: space-between; margin: 0 auto; margin-bottom: var(--spacing-hg); //child .nav-item{@include link('link-sc')} //mq .bg>:where(.b){width: 100%;} //кнопки на всю ширину лучше .logo{display: none;} // лого лишнее на мобиле } .foot-top{ .nav-link{@extend .link-pr;} @include flex-col(var(--foot-nav-gap)); row-gap:calc(2 * var(--foot-nav-gap)); justify-content: space-between; width: 100%; } .foot-card{ @extend .border-right-tr; @include mq-down($breakpoint_laptop) {border:none!important;} @include flex-col(var(--spacing-md)); @include mq-up($breakpoint_tabletx) { padding-right:var(--spacing-lg); } justify-content: center; //comb .tool-y{ gap:var(--spacing-tn); } .b{width: 100%;} .social-icon i { width: var(--icon-lg); height:var(--icon-lg); } } // MARK:⠀mq @include mq-up(820px){ .foot{ .bg>.b{width: max-content;} //todo не изящно что-то придумать возможно изнутри компонента кнопки } .foot-top{ display: grid; @include grid-col-pattern('11'); // гор2 колонки } .foot-bot,.foot-bot .bg{ flex-direction: row; align-items: center; } } @include mq-up(1048px){ .foot-top{@include grid-col-pattern('111');} // гор 3 колонки .foot{ .logo{display: unset;} } // лого показать } @include mq-up(1260px){ .foot-top{ @include flex-row(); } // гор ВСЕ колонки } */ .sect.header { gap: var(--sect-header-gap); display: flex; align-items: center; } .sect.header :is(h1, h2, h3, h4, h5, .h0, .schedule-head, .h1, .showcase-head, .split-sect h2, .promo-head, .feedback-head, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head, .h3, .doctor-detail .doctor .cost, .pricegroup-head, .case-link, .compare-head, .faq-question, .mega-sect:has(.mega-menu.is-visible) .mega-head, .h4, .h5) + s { flex-grow: 1; } .sect.header h1, .sect.header h2, .sect.header h3, .sect.header h4, .sect.header h5, .sect.header h6, .sect.header .h1, .sect.header .showcase-head, .sect.header .promo-head, .sect.header .feedback-head, .sect.header .h2, .sect.header .medias.lenses .media-head, .medias.lenses .sect.header .media-head, .sect.header .patient .split-head, .patient .sect.header .split-head, .sect.header .service-tmp-name, .sect.header .service-head, .sect.header .placeholder-head, .sect.header .files-head, .sect.header .h3, .sect.header .doctor-detail .doctor .cost, .doctor-detail .doctor .sect.header .cost, .sect.header .pricegroup-head, .sect.header .case-link, .sect.header .compare-head, .sect.header .faq-question, .sect.header .mega-sect:has(.mega-menu.is-visible) .mega-head, .mega-sect:has(.mega-menu.is-visible) .sect.header .mega-head, .sect.header .h4, .sect.header .h5, .sect.header .h6 { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } @media (max-width: 575.98px) { .sect.header h1, .sect.header h2, .sect.header h3, .sect.header h4, .sect.header h5, .sect.header .h0, .sect.header .schedule-head, .sect.header .h1, .sect.header .showcase-head, .sect.header .promo-head, .sect.header .feedback-head, .sect.header .h2, .sect.header .medias.lenses .media-head, .medias.lenses .sect.header .media-head, .sect.header .patient .split-head, .patient .sect.header .split-head, .sect.header .service-tmp-name, .sect.header .service-head, .sect.header .placeholder-head, .sect.header .files-head, .sect.header .h3, .sect.header .doctor-detail .doctor .cost, .doctor-detail .doctor .sect.header .cost, .sect.header .pricegroup-head, .sect.header .case-link, .sect.header .compare-head, .sect.header .faq-question, .sect.header .mega-sect:has(.mega-menu.is-visible) .mega-head, .mega-sect:has(.mega-menu.is-visible) .sect.header .mega-head, .sect.header .h4, .sect.header .h5 { width: 100%; } .sect.header .b { width: 100%; } } :is(.neck, .body) > .sect.header:not(:first-child) { margin-top: var(--sect-header-spacing); } .sect.header:has(.breadcrumbs) { position: relative; padding-top: var(--sect-header-breadcrumbs-spacing); } .sect.header:has(.breadcrumbs) .breadcrumbs { position: absolute; top: 0; left: 0; } .sect.center { width: 100%; max-width: var(--sect-center-width); align-self: center; } .breadcrumbs { z-index: 900; } .breadcrumbs > i { display: inline-block; vertical-align: middle; } .breadcrumbs > i a { display: block; padding: var(--spacing-mn) var(--spacing-sm); gap: var(--spacing-mn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 575.98px) { .breadcrumbs > i a { max-width: var(--breadcrumbs-item-width-max); } } .breadcrumbs { font-size: var(--fs-sm); border: 1px solid var(--qt); border-radius: var(--radius-df); color: var(--qt); } .breadcrumbs a { text-decoration: none; color: var(--tr); } .breadcrumbs a:hover { color: var(--vo); } .breadcrumbs svg[data-icon] { margin-right: 4px; } .breadcrumbs svg[data-icon] { color: var(--asc); fill: var(--asc); } .breadcrumbs a:hover svg[data-icon] { color: var(--br2-pure); fill: var(--br2-pure); } .steps { /* табы в виде шагов с пометкой у шага выполнен/не выполнен */ display: flex; flex-flow: row nowrap; gap: var(--steps-gap); justify-content: space-between; padding-left: var(--steps-x); padding-right: var(--steps-x); font-size: var(--fs-sm); } .steps .step { height: var(--steps-height); padding-bottom: var(--steps-mark-height); display: block; position: relative; flex: 1 1 0px; min-width: 0; display: flex; align-items: center; justify-content: center; line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; text-decoration: none; } .steps .step { color: var(--tr); } .steps .step:hover { color: var(--vo); } .steps .step svg { opacity: 0; position: absolute; top: 0.8em; left: 50%; transform: translate(-50%, -50%); color: var(--vo); color: var(--steps-bg-done); fill: var(--steps-bg-done); } .steps .step.is-done svg { opacity: 1; } .steps .step::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: var(--steps-mark-height); border-radius: 9999px; } .steps .step::after { background-color: var(--steps-bg-undone); } .steps .step.is-active::after { background-color: var(--steps-bg-active); } .steps .step.is-active { color: var(--steps-fg-active); } .head .nav, .foot .nav { display: flex; position: relative; max-width: 100%; user-select: none; } .head .nav-x, .foot .nav-x { flex-flow: row wrap; } .head .nav-y, .foot .nav-y { flex-flow: column nowrap; } .head .nav-item, .foot .nav-item { z-index: 1; } .head .nav-head, .foot .nav-head { margin-bottom: var(--spacing-df); } .head .nav-x .nav-item:not(:has(.b)), .foot .nav-x .nav-item:not(:has(.b)) { padding: var(--spacing-mn) var(--spacing-tn); } .head .nav-x .nav-item:has(.b), .foot .nav-x .nav-item:has(.b) { padding-right: var(--spacing-tn); } .head .nav-item, .foot .nav-item { margin: 4px 0; } .head .logo img { max-height: 42px; } .head .nav-item { vertical-align: middle; display: flex; align-items: center; justify-content: center; } .pager { display: grid; grid-template-columns: 1fr 1fr; } .pager-prev, .pager-next { display: flex; align-items: center; justify-content: center; width: 100%; } .pager-prev { grid-column: 1; justify-self: start; } .pager-next { grid-column: 2; justify-self: end; } .pager-prev:only-child { grid-column: 1; justify-self: start; width: 100%; } .pager-next:only-child { grid-column: 2; justify-self: end; width: 100%; } .pager { gap: var(--spacing-tn); } .pager-prev, .pager-next { padding: var(--spacing-df); } .pager-prev svg[data-icon], .pager-next svg[data-icon] { width: var(--icon-bg); height: var(--icon-bg); } .pager-prev, .pager-next { border: 2px solid var(--separator-sc); } .pager-prev, .pager-next { color: var(--sc); fill: var(--sc); } .pager-prev:hover, .pager-next:hover { color: var(--br); fill: var(--br); } .pager-prev, .pager-next { border-radius: var(--radius-sm); } .pager-prev { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .pager-next { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .pager u { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; /* Современная замена clip */ white-space: nowrap !important; border: 0 !important; } .cta + .pager { margin-top: calc(-1 * var(--sect-gap) + var(--spacing-df)); } .side .nav { /* • Если внутри nav есть хоть одна pic то у всех item выравнивание не прыгает, если нет ни одной pic - место не занимает • если нет desc то ровняется по вертикали • pic,desc,meta опциональны */ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; user-select: none; position: sticky; top: var(--sticky-top-offset); background-color: var(--card-bg-dim); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--card-gap-sm); padding: var(--spacing-sm); border-radius: var(--radius-df); background-color: var(--ab); } .side .nav-desc { font-size: var(--fs-sm); color: var(--tr); } .side .nav-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .side .nav-item.is-active { background-color: var(--br2-pale); } .side .nav-item { padding-top: var(--spacing-tn); padding-bottom: var(--spacing-tn); padding-left: var(--spacing-tn); padding-right: var(--spacing-tn); column-gap: var(--spacing-tn); border-radius: var(--radius-sm); position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1/-1; align-items: center; grid-template-areas: "pic head meta" "pic desc meta"; } .side .nav-item:not(:has(.nav-desc)) { grid-template-areas: "pic head meta"; } .side .nav:not(:has(.nav-pic)) { grid-template-columns: minmax(0, 1fr) auto; } .side .nav:not(:has(.nav-pic)) .nav-item { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); grid-template-columns: subgrid; grid-template-areas: "head meta" "desc meta"; } .side .nav:not(:has(.nav-pic)) .nav-item:not(:has(.nav-desc)) { grid-template-areas: "head meta"; } .side .nav-pic { grid-area: pic; display: flex; align-items: center; justify-content: center; } .side .nav-head { grid-area: head; min-width: 0; } .side .nav-desc { grid-area: desc; min-width: 0; } .side .nav-meta { grid-area: meta; display: flex; align-items: center; justify-content: flex-end; } .side .nav-link { display: block; } .pagenav { user-select: none; position: sticky; top: var(--sticky-top-offset); z-index: 800; background-color: var(--card-bg-dim); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--card-gap-sm); display: flex; flex-flow: column nowrap; } @media (max-width: 991.98px) { .pagenav { display: none; } } .pagenav a { display: inline-block; position: relative; text-decoration: none; padding: 6px 14px; } .pagenav a::after { color: var(--br); content: "⚑"; text-replace: auto; nsition: all 0.4s ease-in-out; opacity: 0; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .pagenav a:link { color: var(--sc); } .pagenav a:visited { color: var(--sc); } .pagenav a:hover, .pagenav a.active { color: var(--pr); } .pagenav a:hover::after, .pagenav a.active::after { opacity: 1; margin-left: -10px; } .backdrop { position: fixed; inset: 0; overflow: hidden; z-index: 1200; display: flex; align-items: center; justify-content: center; background-color: var(--backdrop-color); animation: backdropFadeIn 300ms ease; } @keyframes backdropFadeIn { from { opacity: 0; } to { opacity: 1; } } .disclaimer { font-size: var(--fs-bg); text-align: center; text-transform: uppercase; margin-bottom: var(--spacing-hg); color: var(--tr); } .city-picker { display: none; } /* mega menu большое меню по сути вся навигация в одной кнопке выводится на весь экран или под меню в попапе с колонками, фильтрами, табами Устоявшееся обозначение для sitemap/explorer/flyout sheet */ .mega { --left:300px; --top: 60px; width: min(100% - 16px * 2, 1200px); min-height: 500px; max-height: 90dvh; position: absolute; } @media (min-width: 1200px) { .mega { top: var(--top); } } .mega { z-index: 1300; display: grid; grid-template-rows: 1fr auto; } .mega-rail { grid-area: rail; } .mega-body { grid-area: body; } .mega-side { grid-area: side; } .mega-foot { grid-area: foot; } .mega { grid-template-columns: var(--mega-rail-width) 1fr var(--mega-side-width); grid-template-areas: "rail body side" "foot foot foot"; } @media (max-width: 991.98px) { .mega { grid-template-columns: var(--mega-rail-width) 1fr; grid-template-areas: "rail body" "foot foot"; } .mega-side { display: none; } } .mega { overflow: hidden; border-radius: var(--mega-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } .mega-body { padding: var(--spacing-lg); } .mega-side { padding: var(--spacing-lg) var(--spacing-df); } .mega-foot { padding: var(--spacing-sm) var(--spacing-df); gap: var(--spacing-tn); } .mega-foot .contact { display: flex; gap: var(--spacing-sm); } .mega-sect:has(.mega-menu.is-visible) .mega-head, .mega-side > :is(h1, h2, h3, h4, .h1, .showcase-head, .split-sect h2, .promo-head, .feedback-head, .h2, .medias.lenses .media-head, .patient .split-head, .service-tmp-name, .service-head, .placeholder-head, .files-head, .h3, .doctor-detail .doctor .cost, .pricegroup-head, .case-link, .compare-head, .faq-question, .mega-sect:has(.mega-menu.is-visible) .mega-head, .h4) { margin-bottom: var(--spacing-lg); } .mega .b:has(svg[data-icon=close]) { position: absolute; right: 16px; top: 12px; } .mega-foot { display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; } .mega-rail { display: flex; flex-direction: column; padding-top: var(--mega-radius); padding-left: var(--spacing-tn); padding-right: var(--spacing-tn); } .mega-rail .mega-tab, .mega-rail .mega-link { height: 56px; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; transition: background 200ms, color 200ms; border-radius: var(--radius-sm); } .mega-rail .mega-tab.is-active, .mega-rail .mega-link.is-active { color: var(--vo); background: var(--br2-pale); } .mega-menu-inner { display: grid; column-gap: var(--mega-cards-col-gap); row-gap: var(--mega-cards-row-gap); grid-template-columns: 1fr; } @media (min-width: 1200px) { .mega-menu-inner { grid-template-columns: 1fr 1fr; } } .mega-body { overflow-y: auto; /* Firefox */ /* Chromium */ } .mega-body::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } .mega-body:hover::-webkit-scrollbar { width: calc(var(--scrollbar-size) * 1); height: calc(var(--scrollbar-size) * 1); } .mega-body::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--scrollbar-radius); } .mega-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); background-clip: padding-box; } .mega-body:hover::-webkit-scrollbar-track { background: var(--scrollbar-track-hover); } .mega-body:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } .mega-body::-webkit-scrollbar-corner { background: transparent; } .mega-body::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .mega-body { display: flex; flex-flow: column nowrap; gap: var(--spacing-no); } .mega-sect { display: contents; } .mega-head { display: none; } .mega-sect:has(.mega-menu.is-visible) .mega-head { display: block !important; text-decoration: none; color: var(--pr); } .mega-menu { display: none; flex-direction: column; gap: 2px; } .mega-menu.is-visible { display: flex; } .mega-menu .mega-link { display: flex; flex-flow: row nowrap; gap: var(--spacing-df) var(--spacing-df); padding: var(--card-padding-sm); align-items: center; transition: background 200ms, transform 200ms; } .mega-menu .mega-link:hover { background: #f5f5f5; transform: translateX(2px); } .mega-menu .mega-link span { flex: 1; } .mega-menu .mega-link figure { display: flex; align-items: center; justify-content: center; transition: opacity 200ms, transform 200ms; } .mega-menu .mega-link figure .i, .mega-menu .mega-link figure svg[data-icon] { color: var(--br-soft); fill: var(--br-soft); width: var(--icon-lg); height: var(--icon-lg); } .mega-menu .mega-link figure:has(img) img { width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-sm); } .mega-menu .mega-link figure::after { content: ""; display: block; } .mega { background-color: var(--surface-0); } .mega-menu .mega-link { box-shadow: var(--shadow-border-bottom); border-radius: var(--card-radius-sm); background-color: var(--background); } @media (max-width: 768px) { .mega-menu .mega-link { font-size: var(--fs-sm); } .mega-menu .mega-link figure .i, .mega-menu .mega-link figure svg[data-icon] { color: var(--br-soft); fill: var(--br-soft); width: var(--icon-df); height: var(--icon-df); } .mega { border-radius: 0; grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: "body" "foot"; max-width: 500px; min-height: auto; min-height: 100dvh; max-width: 80%; width: 80%; left: 0; } .mega-rail, .mega-side { display: none; } .mega-body { margin-top: var(--spacing-lg); } .mega-sect { display: block; } .mega-foot { padding-bottom: var(--spacing-df); } .mega-foot .contact { flex-direction: column; align-items: center; } .mega-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; text-decoration: none; color: #333; font-weight: 500; line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; cursor: pointer; user-select: none; transition: color 200ms; } .mega-head.is-open { color: var(--br); } .mega-head::after { content: ""; display: block; width: 20px; height: 20px; position: relative; flex-shrink: 0; transition: transform 300ms ease; } .mega-head::after { background: linear-gradient(to right, var(--br), var(--br)) no-repeat center/12px 2px, linear-gradient(to bottom, var(--br), var(--br)) no-repeat center/2px 12px; } .mega-head.is-open::after { transform: rotate(45deg); background: linear-gradient(to right, var(--br), var(--br)) no-repeat center/12px 2px, linear-gradient(to bottom, var(--br), var(--br)) no-repeat center/2px 12px; } .mega-link { opacity: 0; } .mega-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; overflow: hidden; max-height: 100dvh; } .mega-menu.is-open { overflow-y: auto; /* Firefox */ /* Chromium */ } .mega-menu.is-open::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } .mega-menu.is-open:hover::-webkit-scrollbar { width: calc(var(--scrollbar-size) * 1); height: calc(var(--scrollbar-size) * 1); } .mega-menu.is-open::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--scrollbar-radius); } .mega-menu.is-open::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); background-clip: padding-box; } .mega-menu.is-open:hover::-webkit-scrollbar-track { background: var(--scrollbar-track-hover); } .mega-menu.is-open:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } .mega-menu.is-open::-webkit-scrollbar-corner { background: transparent; } .mega-menu.is-open::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .mega-menu.is-open { max-height: 50dvh; } .mega-menu.is-open .mega-link { opacity: 1; } .mega-menu.is-open { grid-template-rows: 1fr; } .mega-menu-inner { min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--spacing-sm); } .mega-link figure svg[data-icon] { width: var(--icon-df); height: var(--icon-df); } .mega-link { padding: var(--spacing-tn) var(--spacing-sm); } .mega-side { border-left: none; } } @media (max-width: 400px) { .mega { max-width: 100%; } .mega-menu .mega-link figure { display: none; } } .mega .posts { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .mega .post { gap: var(--spacing-sm); padding: var(--spacing-sm); } .mega .post { position: relative; } .mega .post-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .mega .post { background-color: var(--ab); background: linear-gradient(42deg, #fff 60%, #EDF9FA 100%); border-top: 1px solid var(--ab); border-radius: var(--radius-df); } .mega .post-meta { font-size: var(--fs-tn); margin-top: var(--spacing-tn); color: var(--br2-rich); } .mega .post-meta svg { color: var(--br2-rich); fill: var(--br2-rich); width: var(--icon-sm); height: var(--icon-sm); } .mega .post-link { font-size: var(--fs-sm); } /* ╭───────────────────────────╮ │ UI-повторяемые элементы │ — Reusable UI ╰───────────────────────────╯ buttons cards modal components */ .input-focus-outline, .input:focus-within, input:is([type=text], [type=tel], [type=email], [type=password], [type=number], [type=search], [type=url], [type=date], [type=datetime-local], [type=time], [type=month], [type=week]):focus, textarea:focus, .callout:target { box-shadow: 0 0 0 12px var(--input-focus-color); } .input-error-outline { box-shadow: 0 0 0 12px var(--input-error-color); } .pils { display: flex; flex-flow: row wrap; gap: var(--spacing-tn); } .pil, .pil-outline { background-color: var(--pil-pr); gap: 0.2rem; padding-left: 0.7rem; padding-right: 0.7rem; padding-top: 0.35rem; padding-bottom: 0.25rem; border-radius: 9999px; display: flex; flex-direction: row; align-items: center; justify-content: center; display: inline-flex; } a.pil { text-decoration: none; font-size: var(--fs-sm); } .pil-outline { background-color: unset; border: 1px solid var(--separator-sc); } /* ╭─────────────────╮ │ MARK:⠀workhours │ ╰─────────────────╯*/ .workhours { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-no) var(--spacing-df); } .workhours .workhour { display: contents; } .workhours .workhour.is-inactive { color: var(--tr); } .workhours .workhour.is-active { color: var(--ac); } .workhours .workhour.is-today { color: var(--br); } /* ╭──────────────╮ │ MARK: List │ ╰──────────────╯*/ .ul { margin-left: 1rem; margin-bottom: 1rem; } .ul li { list-style-type: disc; list-style-position: outside; color: var(--sc); } .ul li::marker { color: var(--qt); } .ol, .finds { margin-left: 1rem; margin-bottom: 1rem; } .ol li, .finds li { list-style-type: decimal; list-style-position: outside; color: var(--sc); } .ol li::marker, .finds li::marker { color: var(--qt); } .text ul, .test ul, .vacancy ul { margin-left: 1rem; margin-bottom: 1rem; } .text ul li, .test ul li, .vacancy ul li { list-style-type: disc; list-style-position: outside; color: var(--sc); } .text ul li::marker, .test ul li::marker, .vacancy ul li::marker { color: var(--qt); } .text ol, .test ol, .vacancy ol { margin-left: 1rem; margin-bottom: 1rem; } .text ol li, .test ol li, .vacancy ol li { list-style-type: decimal; list-style-position: outside; color: var(--sc); } .text ol li::marker, .test ol li::marker, .vacancy ol li::marker { color: var(--qt); } .lines { display: flex; flex-flow: column nowrap; gap: var(--spacing-df); } .lines .social-icon i { width: var(--icon-lg); height: var(--icon-lg); } .line-head { line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } .line-desc { margin-left: var(--spacing-tn); } @media (max-width: 575.98px) { .line-desc { display: block; } } .line a { text-decoration: underline; text-decoration-color: var(--separator-pr); text-underline-offset: 8%; text-decoration-thickness: 12%; } /* ╭──────────────╮ │ MARK: Link │ ╰──────────────╯*/ /* ╭─────────────╮ │ MARK: Arrow │ ╰─────────────╯*/ /* ╭──────────────╮ │ MARK: Cut │ — Скрываемый кат ╰──────────────╯*/ [data-cut^=df] { position: relative; overflow: hidden; } [data-cut^=df]:after { content: ""; display: block; width: 100%; height: 140px; position: absolute; bottom: 0; left: 0; background-color: var(--sc); background: linear-gradient(to top, white 30%, rgba(255, 255, 255, 0) 100%); } /* ╭──────────────╮ │ MARK: Tool │ горизонтальная строка обычно с кнопками и текстом ╰──────────────╯*/ .tool, .promo-tool, .sect.header, .tool-x, .service-meta, .tool-y { flex-wrap: wrap; justify-content: center; } .tool s, .promo-tool s, .sect.header s, .tool-x s, .service-meta s, .tool-y s { flex-grow: 1; } @media (min-width: 576px) { .tool, .promo-tool, .sect.header, .tool-x, .service-meta, .tool-y { justify-content: flex-start; flex-wrap: nowrap; } } .tool, .promo-tool, .sect.header { gap: var(--sect-header-gap); display: flex; align-items: center; } .tool-x, .service-meta, .tool-y { display: flex; justify-content: space-between; align-items: center; } .tool-x, .service-meta { flex-direction: row; } .tool-y { flex-direction: column; } .tool-x, .service-meta { gap: var(--sect-header-gap); } @media (max-width: 575.98px) { .tool-x h1, .service-meta h1, .tool-x h2, .service-meta h2, .tool-x h3, .service-meta h3, .tool-x h4, .service-meta h4, .tool-x h5, .service-meta h5, .tool-x .h0, .service-meta .h0, .tool-x .schedule-head, .service-meta .schedule-head, .tool-x .h1, .tool-x .showcase-head, .service-meta .h1, .service-meta .showcase-head, .tool-x .promo-head, .service-meta .promo-head, .tool-x .feedback-head, .service-meta .feedback-head, .tool-x .h2, .tool-x .medias.lenses .media-head, .medias.lenses .tool-x .media-head, .tool-x .patient .split-head, .patient .tool-x .split-head, .tool-x .service-tmp-name, .service-meta .h2, .service-meta .medias.lenses .media-head, .medias.lenses .service-meta .media-head, .service-meta .patient .split-head, .patient .service-meta .split-head, .service-meta .service-tmp-name, .tool-x .service-head, .service-meta .service-head, .tool-x .placeholder-head, .service-meta .placeholder-head, .tool-x .files-head, .service-meta .files-head, .tool-x .h3, .tool-x .doctor-detail .doctor .cost, .doctor-detail .doctor .tool-x .cost, .service-meta .h3, .service-meta .doctor-detail .doctor .cost, .doctor-detail .doctor .service-meta .cost, .tool-x .pricegroup-head, .service-meta .pricegroup-head, .tool-x .case-link, .service-meta .case-link, .tool-x .compare-head, .service-meta .compare-head, .tool-x .faq-question, .service-meta .faq-question, .tool-x .mega-sect:has(.mega-menu.is-visible) .mega-head, .service-meta .mega-sect:has(.mega-menu.is-visible) .mega-head, .mega-sect:has(.mega-menu.is-visible) .tool-x .mega-head, .mega-sect:has(.mega-menu.is-visible) .service-meta .mega-head, .tool-x .h4, .service-meta .h4, .tool-x .h5, .service-meta .h5 { width: 100%; } .tool-x .b, .service-meta .b { width: 100%; } } /* ╭──────────────╮ │ MARK: group │ склейка всякого ╰──────────────╯*/ .group, .schedule-nav { display: flex; } .group:not(:has(> :not(.b))):has(> .b:nth-child(2)) .b:not(:first-child, :last-child), .schedule-nav:not(:has(> :not(.b))):has(> .b:nth-child(2)) .b:not(:first-child, :last-child) { border-radius: 0; } .group:not(:has(> :not(.b))):has(> .b:nth-child(2)) .b:first-child, .schedule-nav:not(:has(> :not(.b))):has(> .b:nth-child(2)) .b:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .group:not(:has(> :not(.b))):has(> .b:nth-child(2)) .b:last-child, .schedule-nav:not(:has(> :not(.b))):has(> .b:nth-child(2)) .b:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .group:not(:has(> :not(.b))):has(> .b:nth-child(2)) .bpr + .bpr, .schedule-nav:not(:has(> :not(.b))):has(> .b:nth-child(2)) .bpr + .bpr { border-left-color: var(--button-primary-hover-bg); } /* ╭───────────────────╮ │ MARK: Scrollbar │ ╰───────────────────╯*/ .scrollbar-sm::-webkit-scrollbar, .scroll-y-sm::-webkit-scrollbar, .dropdown-inner::-webkit-scrollbar { width: 6px; height: auto; } .scrollbar-sm::-webkit-scrollbar-track, .scroll-y-sm::-webkit-scrollbar-track, .dropdown-inner::-webkit-scrollbar-track { background: transparent; } .scrollbar-sm::-webkit-scrollbar-thumb, .scroll-y-sm::-webkit-scrollbar-thumb, .dropdown-inner::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid transparent; background-color: var(--scrollbar-bg-idle); background-clip: padding-box; transition: all 1.3s ease-in-out; } .scrollbar-sm:hover::-webkit-scrollbar-thumb, .scroll-y-sm:hover::-webkit-scrollbar-thumb, .dropdown-inner:hover::-webkit-scrollbar-thumb, .scrollbar-sm:active::-webkit-scrollbar-thumb, .scroll-y-sm:active::-webkit-scrollbar-thumb, .dropdown-inner:active::-webkit-scrollbar-thumb { border: 2px solid transparent var(--scrollbar-bg-active); background: var(--scrollbar-bg-active); } .scroll-y-sm, .dropdown-inner { max-height: 80dvh; overflow-y: auto; overflow-x: hidden; } /* ╭───────────────────╮ │ MARK: Separator │ ╰───────────────────╯*/ .border-top-ac { border-top: 2px solid var(--separator-ac); } .border-top-pr { border-top: 2px solid var(--separator-pr); } .border-top-sc, .compare-row:not(:first-child) { border-top: 2px solid var(--separator-sc); } .border-top-tr { border-top: 2px solid var(--separator-tr); } .border-bottom-ac { border-bottom: 2px solid var(--separator-ac); } .border-bottom-pr { border-bottom: 2px solid var(--separator-pr); } .border-bottom-sc, .file, .mega .post { border-bottom: 2px solid var(--separator-sc); } .border-bottom-tr { border-bottom: 2px solid var(--separator-tr); } .border-left-ac { border-left: 2px solid var(--separator-ac); } .border-left-pr { border-left: 2px solid var(--separator-pr); } .border-left-sc { border-left: 2px solid var(--separator-sc); } .border-left-tr { border-left: 2px solid var(--separator-tr); } .border-right-ac { border-right: 2px solid var(--separator-ac); } .border-right-pr { border-right: 2px solid var(--separator-pr); } .border-right-sc { border-right: 2px solid var(--separator-sc); } .border-right-tr { border-right: 2px solid var(--separator-tr); } .border-pr-gradient-center, hr, .border-top-pr-gradient-center, .medias .media + .media, .dialog-act, .tests-warning { border-image: linear-gradient(to right, transparent, var(--separator-pr), transparent) 1; } .border-pr-gradient-left, .border-top-pr-gradient-left, .split-sect:not(:first-child) { border-image: linear-gradient(to right, var(--separator-pr), transparent) 1; } .border-pr-gradient-right, .border-top-pr-gradient-right { border-image: linear-gradient(to right, transparent, var(--separator-pr)) 1; } .border-top-pr-gradient-center, .medias .media + .media, .dialog-act, .tests-warning { border-top: 2px solid; } .border-top-pr-gradient-left, .split-sect:not(:first-child) { border-top: 2px solid; } .border-top-pr-gradient-right { border-top: 2px solid; } .events { --border:var(--qt); --line:var(--qt); position: relative; padding: 40px 40px 0; margin-left: 0.5rem; font-size: var(--flg); border-image-slice: 1; border-image-source: linear-gradient(to bottom, transparent 2%, var(--line), transparent 98%); border-left: 4px solid var(--line); border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .events .event + .event { margin-top: var(--spacing-md); } .events .event { position: relative; } .events .event-head { display: block; line-height: 1.25; font-weight: 510; font-variation-settings: "wght" 510, "wdth" 100, "opsz" 14; font-size: var(--h4); color: var(--link-pr-fg); } .events .event-head:hover { color: var(--link-pr-hover-fg); } .events .event-head:active { color: var(--link-pr-active-fg); } .events .event-head:focus-visible { color: var(--link-pr-focus-fg); } .events .event-head._sel, .events .event-head.is-active { color: var(--link-pr-selected-fg); } .events .event-head:disabled { color: var(--link-pr-disabled-fg); } .events .event-head { cursor: pointer; text-decoration: none; text-underline-offset: 0.2em; } .events .event-head:hover { text-decoration-thickness: 2px; } .events .event-desc { color: var(--sc); } .events .event-desc { font-size: var(--fs-sm); } .events .event-desc { margin-top: var(--spacing-mn); } .events .event:last-of-type { padding-bottom: 0; margin-bottom: 0; border: none; } .events .event:before, .events .event:after { position: absolute; display: block; top: 0; } .events .event:after { content: ""; display: block; width: 11px; height: 11px; top: 8px; left: -47.85px; box-shadow: 0 0 0 4px var(--border); background: var(--bg); border-radius: 50%; } .events .event ul, .events .event ol { margin-top: unset; } .pics { display: grid; gap: var(--spacing-tn); } .pics figure { display: grid; grid-template-rows: 1fr auto; } .pics figure img { width: 100%; height: 100%; object-fit: cover; min-height: 0; } .pics figure figcaption { margin-top: var(--spacing-sm); font-size: var(--fs-sm); color: var(--tr); } @media (max-width: 767.98px) { .pics { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scroll-behavior: smooth; scroll-behavior: auto; scroll-snap-type: x mandatory; -webkit-scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; user-select: none; } .pics figure { padding-bottom: var(--spacing-sm); } .pics figure img { height: 50dvh; } } @media (min-width: 768px) { .pics:has(> :first-child:nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pics:has(> :first-child:nth-last-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .gallery-3 figure img { width: 100%; height: 100%; object-fit: cover; } .gallery-3 { gap: var(--spacing-tn); display: grid; } @media (max-width: 575.98px) { .gallery-3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } .gallery-3 figure:nth-child(1) { grid-column: span 2; grid-row: span 2; } } @media (min-width: 576px) { .gallery-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } /* ╭─────────────────────────────╮ │ MARK: gallery-mini │ │ блок на 3 картинки │ ╰─────────────────────────────╯*/ .gallery-mini { display: grid; grid-template-areas: "big top" "big bot"; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--spacing-tn); height: var(--gallery-mini-height); max-height: var(--viewport-safe-height); } .gallery-mini a { display: block; } .gallery-mini img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-sm); } .gallery-mini a:nth-child(1) { grid-area: big; } .gallery-mini a:nth-child(2) { grid-area: top; } .gallery-mini a:nth-child(3) { grid-area: bot; } /* ╭─────────────────────────────╮ │ MARK: thumb │ │ что-то вроде иконок │ ╰─────────────────────────────╯*/ .thumbs { display: flex; flex-wrap: wrap; gap: var(--grid-col-gap); margin-top: var(--spacing-df); margin-bottom: var(--spacing-df); } @media (max-width: 575.98px) { .thumbs { justify-content: center; } } .thumb { width: 220px; height: 220px; border-radius: var(--card-radius-df); border: 2px solid var(--separator-sc); position: relative; overflow: hidden; } .thumb > img:first-child { width: 100%; height: 100%; object-fit: cover; } .thumb-pic + .thumb-head { bottom: 0.4rem; } .thumb-head { position: absolute; z-index: 5; text-align: center; padding-left: var(--spacing-tn); padding-right: var(--spacing-tn); } /* ╭─────────────────╮ │ MARK: CTA │ ╰─────────────────╯*/ .cta { position: relative; display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); display: flex; align-items: center; justify-content: center; padding: var(--spacing-hg) var(--spacing-df); border-radius: var(--radius-md); overflow: hidden; } .cta .gradient-webgl { position: absolute; top: 0; left: 0; pointer-events: none; z-index: -1; } /* ╭─────────────────╮ │ MARK: files │ ╰─────────────────╯*/ .files { overflow: hidden; display: flex; flex-wrap: wrap; } @media (max-width: 767.98px) { .files { justify-content: center; } } .files { gap: var(--spacing-df); } .files-head { width: 100%; } .file { --file-width:14rem; flex: 0 1 var(--file-width); gap: var(--spacing-sm); padding: var(--spacing-sm); } @media (max-width: 767.98px) { .file { flex-grow: 1; } } .file { background-color: var(--ab); background: linear-gradient(42deg, #fff 60%, #EDF9FA 100%); border-top: 1px solid var(--ab); border-radius: var(--radius-df); } .file-pic, .file-meta { transition: all 200ms ease-in-out; } .file-pic { color: var(--br); fill: var(--br); } .file-meta { color: var(--asc); fill: var(--asc); } .file-meta { text-transform: uppercase; } .file { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: min-content 1fr; grid-template-areas: "p m" "h h"; } .file-head { grid-area: h; align-self: end; } .file-pic { grid-area: p; } .file-meta { grid-area: m; justify-self: end; } .file { position: relative; } .file-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .file:hover .file-pic { color: var(--vo); fill: var(--vo); } .file:hover { z-index: 700; } /* НЕ УДАЛЯТЬ создание карточки внутри которой файлы, карточка заполняет пустоту, 1px border у всех карточек через gap 1px заголовки создают группировку .files{ overflow : hidden; display : flex; flex-wrap: wrap; //theme gap: 1px; border-radius: var(--radius-md); background: #dcdcdc; & > *{background-color: var(--ab);} box-shadow: var(--card-shadow); //child &-head{ width: 100%; padding: var(--spacing-tn) var(--spacing-df); @extend .font-semibold; // padding: var(--spacing-md) var(--spacing-df); // text-align: center; } } .file { //spacing --file-width:14rem; flex: 1 1 var(--file-width); //grow shrink basis gap : var(--spacing-sm); padding: var(--spacing-sm); //theme &-pic,&-meta{ transition: all $animation-duration-sm ease-in-out; } &-pic {@include fill(var(--br));} &-meta{@include fill(var(--asc));} &-meta{text-transform: uppercase;} //scaff display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: min-content 1fr; grid-template-areas:'p m''h h'; &-head {grid-area:h;align-self: end;} &-pic {grid-area:p} &-meta {grid-area:m;justify-self: end;} @include link-cover-parent(); //states &:hover { .file-pic{@include fill(var(--vo));} // box-shadow:var(--card-shadow); z-index: get-z-index(control-active); // background: var(--gradient-spring); } // background: var(--gradient-spring); // box-shadow:var(--separator-pr-shadow); // &:hover {background-color: var(--br2-pale);} //child &-link { @extend .link-pr; } } */ /* ╭─────────────────╮ │ MARK: faq │ ╰─────────────────╯*/ .faqs { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .faq-form { display: flex; justify-content: center; } .faq { --faq-dart-size: var(--dart-size); --faq-hspacing-df:var(--spacing-df); --faq-hspacing-lg:var(--spacing-lg); --faq-vspacing: var(--spacing-df); } .faq > summary { list-style: none; } .faq > summary::-webkit-details-marker { display: none; } .faq > summary::before { content: ""; display: inline-block; width: var(--faq-dart-size); height: var(--faq-dart-size); border-width: 0 3px 3px 0; border-style: solid; border-color: var(--separator-pr); transform: translate(calc(-1 * var(--spacing-sm)), calc(calc(var(--faq-dart-size) / -2) + var(--faq-dart-size) * 0.2071)) rotate(-45deg); transition: transform 200ms; } .faq[open] > summary::before { content: ""; display: inline-block; width: var(--faq-dart-size); height: var(--faq-dart-size); border-width: 0 3px 3px 0; border-style: solid; border-color: var(--separator-pr); transform: translate(calc(-1 * var(--spacing-sm)), calc(calc(var(--faq-dart-size) / -2) + var(--faq-dart-size) * 0.2071)) rotate(45deg); border-color: var(--br); } .faq { background-color: var(--surface-0); border-radius: var(--radius-df); } .faq-question { cursor: pointer !important; } .faq-question, .faq-answer { padding-right: var(--faq-hspacing-df); } .faq-question { padding-left: var(--faq-hspacing-lg); padding-right: var(--faq-hspacing-df); padding-top: var(--faq-vspacing); padding-bottom: var(--faq-vspacing); } .faq-answer { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); padding-left: calc(var(--faq-hspacing-lg) + var(--faq-dart-size) * 1.4142135624); } /* ╭──────────────────╮ │ MARK: table │ │ compare │ ╰──────────────────╯*/ .sect.compare { display: block; /* Firefox */ /* Chromium */ } .sect.compare::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } .sect.compare:hover::-webkit-scrollbar { width: calc(var(--scrollbar-size) * 1); height: calc(var(--scrollbar-size) * 1); } .sect.compare::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--scrollbar-radius); } .sect.compare::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); background-clip: padding-box; } .sect.compare:hover::-webkit-scrollbar-track { background: var(--scrollbar-track-hover); } .sect.compare:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } .sect.compare::-webkit-scrollbar-corner { background: transparent; } .sect.compare::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .sect.compare { overflow-y: auto; padding: 2px; } .compare { width: 100%; display: table; border-collapse: collapse; } .compare-head { display: table-header-group; } .compare-body { display: table-row-group; } .compare-foot { display: table-footer-group; } .compare-row { display: table-row; } .compare-cell { display: table-cell; padding: var(--spacing-sm) var(--spacing-df); vertical-align: top; } .compare-head .compare-cell { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .compare-head { background: var(--gradient-header-pr); background-clip: text; color: transparent; } @-moz-document url-prefix() { .compare-head { color: transparent; } } .compare.laser { border-radius: var(--radius-df); box-shadow: var(--separator-pr-shadow); } .compare.laser svg[data-icon] { fill: var(--br); color: var(--br); } /* ╭────────╮ │ sort │ ╰────────╯*/ .cost, .service-meta .cost { font-size: var(--h3); color: var(--ex); } .visually-hidden, .checkbox [type=checkbox], .radios label.radio [type=radio], .clip { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; /* Современная замена clip */ white-space: nowrap !important; border: 0 !important; } .radius-df { border-radius: var(--radius-df); } .cases { display: grid; justify-content: space-between; align-content: end; column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-size), 1fr)); } .case { --case-bg: #fff; --case-tab-active: var(--case-bg); --case-tab-hover: #fefefe; --case-tab-inactive: var(--surface-0); position: relative; } .case:before { content: ""; display: block; height: 60px; } .case-tabs { display: flex; flex-direction: row; column-gap: var(--spacing-tn); position: absolute; top: 0; left: 0; height: 84px; } .case-tab { --case-tab-bg1: var(--case-tab-inactive); --case-tab-bg2: oklch( from var(--case-tab-bg1) calc(l - 0.1) calc(c * 1) h ); } .case-tab:first-child { --case-tab-bg2: var(--case-tab-bg1); } .case-tab.is-active { --case-tab-bg1: var(--case-tab-active); --case-tab-bg2: var(--case-tab-active); z-index: 700 !important; } .case-tab:hover { --case-tab-bg1: var(--case-tab-hover); } .case-tab .case-tab-inner { --case-spine-touch: calc(24px * 0.7071); --case-spine-cutoff: calc(24px - var(--case-spine-touch)); --case-spine-height: calc(84px - var(--case-spine-cutoff)); --case-spine-side: calc(var(--case-spine-height) - var(--case-spine-cutoff)); --case-spine-top: var(--case-spine-cutoff); position: relative; height: 84px; min-width: 84px; padding-top: calc((60px - 1em) / 2); padding-left: var(--spacing-df); padding-right: var(--spacing-df); background: linear-gradient(45deg, var(--case-tab-bg2) 0.4rem, var(--case-tab-bg1) 2.8rem); border-radius: 19.2px 24px 0 0; } .case-tab .case-tab-inner::before { content: ""; display: block; width: 0; height: 0; position: absolute; top: var(--case-spine-top); right: calc(-1 * var(--case-spine-side)); border-style: solid; border-width: 0 var(--case-spine-height) var(--case-spine-height) var(--case-spine-height); border-color: transparent transparent var(--case-tab-bg1) transparent; z-index: -1; pointer-events: none; user-select: none; } .case-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .case-cont { position: relative; z-index: 710; background-color: var(--case-bg); border-radius: 24px; box-shadow: var(--folder-shadow); padding: var(--spacing-df); padding-left: var(--spacing-df); padding-right: var(--spacing-df); } .case:has(.case-tab.is-active:first-child) .case-cont { border-top-left-radius: 0; } .case .case-tab:nth-child(1) { z-index: 599; } .case .case-tab:nth-child(2) { z-index: 598; } .case .case-tab:nth-child(3) { z-index: 597; } .case .case-tab:nth-child(4) { z-index: 596; } .case .case-tab:nth-child(5) { z-index: 595; } .case .case-tab:nth-child(6) { z-index: 594; } .case .case-tab:nth-child(7) { z-index: 593; } .case .case-tab:nth-child(8) { z-index: 592; } .case .case-tab:nth-child(9) { z-index: 591; } .case .case-tab:nth-child(10) { z-index: 590; } .case .case-tab:nth-child(11) { z-index: 589; } .case .case-tab:nth-child(12) { z-index: 588; } .case .case-tab:nth-child(13) { z-index: 587; } .case .case-tab:nth-child(14) { z-index: 586; } .case .case-tab:nth-child(15) { z-index: 585; } .case .case-tab:nth-child(16) { z-index: 584; } .case { --case-bg: #fff; --case-tab-active: #fff; --case-tab-hover: #fefefe; --case-tab-inactive: var(--surface-0); } .case { position: relative; } .case-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .case-link { display: block; min-height: 120px; } @media (min-width: 576px) { .case-link { min-height: 200px; } } .case-link { display: flex; align-items: center; justify-content: center; text-align: center; } .case.patient { --case-bg: var(--pastel-vanilla-bold); --case-tab-active: var(--pastel-vanilla-bold); --case-tab-hover: var(--pastel-vanilla-bold); } /* ╭──────────────────╮ │ MARK: Группа цен │ ╰──────────────────╯*/ .pricegroup:not(:first-child) .pricegroup-head { border-top: 2px solid var(--separator-sc); } .pricegroup > summary { list-style: none; } .pricegroup > summary::-webkit-details-marker { display: none; } .pricegroup > summary::before { content: ""; display: inline-block; width: var(--dart-size); height: var(--dart-size); border-width: 0 3px 3px 0; border-style: solid; border-color: var(--separator-pr); transform: translate(calc(-1 * var(--spacing-sm)), calc(calc(var(--dart-size) / -2) + var(--dart-size) * 0.2071)) rotate(-45deg); transition: transform 200ms; } .pricegroup[open] > summary::before { content: ""; display: inline-block; width: var(--dart-size); height: var(--dart-size); border-width: 0 3px 3px 0; border-style: solid; border-color: var(--separator-pr); transform: translate(calc(-1 * var(--spacing-sm)), calc(calc(var(--dart-size) / -2) + var(--dart-size) * 0.2071)) rotate(45deg); border-color: var(--br); } .pricegroup-head { cursor: pointer !important; padding: var(--spacing-df) var(--card-padding-lg); margin-left: calc(-1 * var(--card-padding-lg)); margin-right: calc(-1 * var(--card-padding-lg)); } .pricegroup .price:last-child { margin-bottom: var(--spacing-lg); } /* ╭────────────╮ │ MARK:⠀Цены │ ╰────────────╯*/ .prices { max-width: 1200px; } .prices .tool-x > h2, .prices .service-meta > h2 { margin-bottom: 0 !important; } .prices .price + .price { margin-top: var(--spacing-sm); } .price { display: flex; flex-flow: row nowrap; gap: var(--grid-col-gap); align-items: stretch; justify-content: space-between; } @media (max-width: 575.98px) { .price { font-size: var(--fs-sm); } } .price-id { grid-area: id; } .price-meta { grid-area: meta; } .price-sale { grid-area: sale; } .price-cont { grid-area: cont; } .price-sale { order: 1; text-align: right; } .price-sale + .price-meta { text-decoration: line-through; } .price-sale, .price-sale + .price-meta { display: flex; justify-content: flex-end; } @media (max-width: 575.98px) { .price-sale, .price-sale + .price-meta { align-items: center; } } .price + .price :before { display: none; } @media (max-width: 575.98px) { .price + .price { display: grid; grid-template: "cont cont" "meta sale"; } } .price + .price { grid-template-columns: 1fr auto; row-gap: var(--spacing-mn); padding-top: var(--spacing-sm); } .price + .price .price-meta { color: var(--br); text-align: right; } .price-id { color: var(--qt); } .price:hover .price-id { color: var(--pr); } @media (max-width: 575.98px) { .price-id { display: none; } } .price-cont { flex: 1 1 auto; overflow: hidden; } .price-desc { background-color: var(--card-bg-dim); border-radius: var(--radius-df); padding: var(--spacing-df); } .price-desc :is(ul, ol):last-child { margin-bottom: unset; } .price-head { position: relative; display: inline-block; max-width: 100%; } .price-head { padding-right: var(--spacing-tn); } .price-head::before { position: absolute; bottom: 0.4em; left: 100%; content: ""; width: 1000px; border-top: 2px solid var(--separator-sc); pointer-events: none; z-index: 0; } .price:hover .price-head::before { border-top: 2px solid var(--separator-ac); } .price-meta, .price-sale { white-space: nowrap; position: relative; z-index: 1; } /* ╭───────────────╮ │ MARK: Анализы │ ╰───────────────╯*/ .test-table { display: grid; gap: var(--grid-col-gap); grid-template-columns: fit-content(100%) auto; } .test-meta { user-select: none; } .test-meta, .test-desc { color: var(--tr); } .test { display: contents; } .test-meta, .test-desc { color: var(--tr); } .test-desc { font-size: var(--fs-sm); } @media (max-width: 575.98px) { .test { font-size: var(--fs-sm); } } .tests-warning { padding-top: var(--spacing-md); } /* ╭─────────╮ │ Слайдер ╰─────────────────────╮ │ │ │ Компонент листания картинок │ │ • не компоненты │ ╰───────────────────────────────╯*/ .slider { --padding-scale-x:3.8; --padding-scale-y:3.8; } @media (max-width: 575.98px) { .slider { --padding-scale-x:1; --padding-scale-y:2; --slider-max-height:90dvh; } } .slider { max-height: var(--slider-max-height); position: relative; } .slider .gradient-webgl { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; } .slider .arrow-left, .slider .arrow-right { position: absolute; top: 50%; transform: translateY(-50%); z-index: 600; } .slider .arrow-left { left: 0; margin-left: calc(var(--slider-arrow-size) * var(--slider-arrow-offset-ratio-x)); } .slider .arrow-right { right: 0; margin-right: calc(var(--slider-arrow-size) * var(--slider-arrow-offset-ratio-x)); } .slider { box-shadow: var(--card-shadow); } .arrow-left, .arrow-right { position: relative; width: var(--slider-arrow-size); height: var(--slider-arrow-size); cursor: pointer; } @media (max-width: 767.98px) { .arrow-left, .arrow-right { display: none; } } .arrow-left::before, .arrow-right::before { content: ""; display: block; width: var(--slider-arrow-size); height: var(--slider-arrow-size); transition: clip-path 300ms ease, background-color 200ms ease; } .arrow-right::before { clip-path: polygon(0 0, 20% 50%, 0 100%, 80% 50%); } .arrow-right:hover::before { clip-path: polygon(0 0, 0% 50%, 0 100%, 80% 50%); } .arrow-right::before { background: linear-gradient(-135deg, #000000 50%, rgba(0, 0, 0, 0) 100%); } .arrow-right:hover::before { background: linear-gradient(-135deg, #000000 50%, black 100%); } .arrow-left::before { clip-path: polygon(100% 0, 80% 50%, 100% 100%, 20% 50%); } .arrow-left:hover::before { clip-path: polygon(100% 0, 100% 50%, 100% 100%, 20% 50%); } .arrow-left::before { background: linear-gradient(45deg, #000000 50%, rgba(0, 0, 0, 0) 100%); } .arrow-left:hover::before { background: linear-gradient(45deg, #000000 50%, black 100%); } .slide { position: relative; display: grid; grid-template-columns: 3fr 5fr; } .slide:not(:has(.slide-pic)), .slide:not(:has(.slide-cont)) { grid-template-columns: auto; justify-content: center; align-items: center; } @media (max-width: 767.98px) { .slide { grid-template-columns: auto; justify-content: center; align-items: center; } } .slide-cont { display: flex; flex-flow: column nowrap; gap: var(--spacing-df); justify-content: center; max-width: var(--slider-text-max-width); padding: calc(var(--padding-scale-y) * var(--slider-dot-bottom) + var(--slider-dot-size)) calc(var(--padding-scale-x) * var(--slider-dot-bottom) + var(--slider-dot-size)); } .slide-pic { position: relative; display: flex; align-items: center; justify-content: center; } .slide-pic img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; height: 80%; max-width: 80%; } @media (max-width: 767.98px) { .slide-pic { display: none; } } @media (max-width: 575.98px) { .slide-cont :is(.b, button) { align-self: center; } } .slide-head, .slide-desc { user-select: none; } .slide-head { font-size: var(--h1); overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .slide-desc { font-size: var(--fs-lg); } .slide-head { color: var(--slider-head); } .slide-desc { color: var(--slider-desc); } .dots { gap: var(--slider-dot-gap); bottom: var(--slider-dot-bottom); position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; justify-content: space-between; } .dot { display: block; width: var(--nav-dot-size); height: var(--nav-dot-size); } .dot { border-radius: calc(var(--nav-dot-size) / 2); box-shadow: var(--switch-bg-shadow); } .dot { background-color: var(--slider-dot-init); } .dot.is-active { background-color: var(--slider-dot-active); } @media (hover: hover) { .slider .arrow-left, .slider .arrow-right { opacity: 0; transition: opacity 0.6s ease; } .slider:hover :is(.arrow-left, .arrow-right) { opacity: 1; } } .slider, .slide, .slider .gradient-webgl { border-radius: var(--slider-radius); } ._text-white .slide-head, ._text-white .slide-desc { z-index: 5; color: var(--ab); } ._bg-flat._bg-yellow { background-color: #F8EF98; } ._bg-flat._bg-orange { background-color: #fbe498; } ._bg-flat._bg-green { background-color: #7BF1A8; } ._bg-flat._bg-blue { background-color: #D4EBF8; } ._bg-flat._bg-pink { background-color: #FCCEE8; } ._bg-flat._bg-rose { background-color: #f8dddf; } ._bg-flat._bg-gray { background-color: #efefef; } ._bg-flat._bg-white { background-color: #ffffff; } /* ╭──────────╮ │ Alert ├╮ │ Dialog │├╮ │ Toast │││ ╰┬─────────╯││ ╰┬─────────╯│ ╰──────────╯ */ .dialog { max-width: calc(100vw - 32px); } @media (max-width: 376px) { .dialog.appointment { max-width: 100vw; } } .dialog { padding: 0; max-height: 96dvh; overflow-y: auto; /* Firefox */ /* Chromium */ } .dialog::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } .dialog:hover::-webkit-scrollbar { width: calc(var(--scrollbar-size) * 1); height: calc(var(--scrollbar-size) * 1); } .dialog::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--scrollbar-radius); } .dialog::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); background-clip: padding-box; } .dialog:hover::-webkit-scrollbar-track { background: var(--scrollbar-track-hover); } .dialog:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } .dialog::-webkit-scrollbar-corner { background: transparent; } .dialog::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .dialog { width: min(22rem, 100%); z-index: 1600; border: none; border-radius: var(--dialog-radius); box-shadow: var(--card-shadow); } .dialog::backdrop { background: var(--backdrop-color); } .dialog .decor { display: none; } .dialog h3, .dialog .h3, .dialog .doctor-detail .doctor .cost, .doctor-detail .doctor .dialog .cost, .dialog .mega-sect:has(.mega-menu.is-visible) .mega-head, .mega-sect:has(.mega-menu.is-visible) .dialog .mega-head, .dialog .faq-question, .dialog .compare-head, .dialog .case-link, .dialog .pricegroup-head { padding-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .dialog h3:first-child, .dialog .h3:first-child, .dialog .doctor-detail .doctor .cost:first-child, .doctor-detail .doctor .dialog .cost:first-child, .dialog .mega-sect:has(.mega-menu.is-visible) .mega-head:first-child, .mega-sect:has(.mega-menu.is-visible) .dialog .mega-head:first-child, .dialog .faq-question:first-child, .dialog .compare-head:first-child, .dialog .case-link:first-child, .dialog .pricegroup-head:first-child { padding-top: var(--spacing-tn); } .dialog h4:first-child { margin-top: 0; } .dialog-slider { display: flex; flex-flow: row nowrap; gap: var(--spacing-df) var(--spacing-df); height: auto; } .dialog-cont { position: relative; align-items: center; margin: var(--spacing-md); font-size: var(--fs-md); } .dialog-cont .input:has(svg[data-icon=find]) { margin-bottom: var(--spacing-df); } .dialog-cont:has(.dialog-pic) { padding-left: calc(var(--icon-hg) + var(--spacing-df)); } .dialog-pic { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .dialog-pic svg[data-icon] { width: var(--icon-hg); height: var(--icon-hg); } .dialog-pic svg[data-icon=status-alert] { color: var(--pallete-red); fill: var(--pallete-red); } .dialog-pic svg[data-icon=status-success] { color: var(--pallete-green-calm); fill: var(--pallete-green-calm); } .dialog-pic svg[data-icon=cookie] { color: var(--pallete-yellow-rich); fill: var(--pallete-yellow-rich); } .dialog-head { font-size: var(--fs-lg); } .dialog-head + .dialog-desc { color: var(--sc); } .dialog-act { display: flex; border-top: 2px solid var(--separator-sc); border-top: 1px solid var(--bl); } .dialog-act .b { width: 100%; } .dialog-act .b + .b { border-left: 2px solid var(--separator-sc); } .dialog-act .b { height: 56px; padding-left: 20px; padding-right: 20px; } .dialog.appointment { display: flex; flex-flow: column nowrap; gap: var(--spacing-no); justify-content: space-between; width: min(800px, 100%); } @media (max-width: 376px) { .dialog.appointment { height: 100dvh; min-height: 100dvh; border-radius: var(--radius-no); } } .dialog.appointment { background-color: var(--surface-0); } @media (max-width: 376px) { .dialog.appointment .dialog-cont { margin: var(--spacing-df); } .dialog.appointment fieldset { padding: 0; border: none; } .dialog.appointment fieldset legend { padding-left: 0; } .dialog.appointment fieldset .do, .dialog.appointment fieldset .dont { padding-left: 0; } } @media (max-width: 575.98px) { .dialog.appointment .line-head { margin-top: var(--spacing-sm); } .dialog.appointment .line-desc { margin-left: 0; } } .dialog.appointment .callout { margin-top: var(--spacing-df); margin-bottom: var(--spacing-df); } .dialog.appointment .steps, .dialog.appointment .dialog-act { position: sticky; z-index: 1000; background-color: var(--surface-0); } .dialog.appointment .steps { top: 0; } .dialog.appointment .dialog-act { bottom: 0; } .dialog.appointment .form { margin-bottom: var(--spacing-bg); } .dialog .lines { display: flex; flex-flow: column nowrap; gap: var(--spacing-sm); } @media (min-width: 576px) { .dialog .lines { display: grid; grid-template-columns: auto 1fr; column-gap: var(--spacing-tn); row-gap: var(--spacing-sm); } } .dialog .line { display: contents; } .dialog .line-desc { color: var(--sc); } .dialog-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .dialog-slider::-webkit-scrollbar { width: 0; height: 0; background: transparent; } .dialog-slider { scrollbar-width: none; -ms-overflow-style: none; flex-grow: 1; } .dialog-track { display: flex; align-items: flex-start; transition: transform 300ms ease; min-width: 0; } .dialog-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; } .callout { display: flex; flex-flow: row nowrap; gap: var(--callout-gap); align-items: center; padding: var(--callout-padding); } .callout-cont { display: flex; flex-flow: column nowrap; gap: var(--callout-cont-gap); } .callout { background-color: var(--callout-bg); border: 2px solid var(--callout-border); border-radius: var(--callout-radius); font-size: var(--callout-fontsize); } .callout-pic svg[data-icon] { width: var(--callout-icon-size); height: var(--callout-icon-size); } .callout-head { color: var(--callout-head-fg); } .callout-desc { color: var(--callout-desc-fg); } .callout a { text-decoration: none; } @media (max-width: 575.98px) { .callout-pic { display: none; } } .callout .callout-pic svg[data-icon] { color: var(--callout-icon-bg); fill: var(--callout-icon-bg); } .callout._warning .callout-pic svg[data-icon] { color: var(--callout-icon-warning-bg); fill: var(--callout-icon-warning-bg); } .callout .callout-pic svg[data-icon] { color: var(--vo); fill: var(--vo); } /* ╭───────────────────╮ │ Name │ ├───────────────────┤ │ email │ ├───────────────────┤ │ phone │ ├───────────────────┤ │╭─────────────────╮│ ││ Submit ││ │╰─────────────────╯│ ╰───────────────────╯*/ .outline-invalid, .checkbox.is-invalid i, .radios label.radio.is-invalid i, .input.is-invalid { box-shadow: 0 0 0 12px var(--input-error-color) !important; } fieldset { min-width: 0; box-sizing: border-box; } fieldset legend { padding-left: var(--spacing-tn); padding-right: var(--spacing-tn); } fieldset + fieldset { margin-top: var(--spacing-tn); } fieldset:is(.do, .dont) { border-radius: var(--radius-sm); border: 2px solid var(--separator-sc); } fieldset.dont legend, fieldset.dont svg[data-icon] { color: var(--indicator-bg-invalid); fill: var(--indicator-bg-invalid); } /*╭────────────────────────────────────────────────────╮ │ У инпута есть prefix/suffix: │ │ • для иконок, преписок или единиц измерения │ │ • неограниченное кол-во кнопок │ │ │ │ Floating label │ │ Улетающий при фокусе, чтобы не забыли что правят │ │ решение не без минусов │ │ │ │ HTML │ │ • Можно использовать голые нативные │ │ • Можно просто с floating label │ │ • Можно полную комплектацию с prefix/suffix │ ╰────────────────────────────────────────────────────╯
USD
*/ input:is([type=text], [type=tel], [type=email], [type=password], [type=number], [type=search], [type=url], [type=date], [type=datetime-local], [type=time], [type=month], [type=week]), textarea { appearance: none; -webkit-appearance: none; outline: 0; border: 2px solid var(--input-border-init-color); border-radius: 8px; background: #fff; transition: 0.16s ease; padding: 0px 20px 0px; width: 100%; min-width: 0; box-sizing: border-box; font: inherit; line-height: 1.35; } input:is([type=text], [type=tel], [type=email], [type=password], [type=number], [type=search], [type=url], [type=date], [type=datetime-local], [type=time], [type=month], [type=week]):focus, textarea:focus { border-color: var(--input-border-active-color); } textarea { padding-top: 20px; --h:1.7em; } textarea[cols="1"] { height: calc(var(--h) * 1); } textarea[cols="2"] { height: calc(var(--h) * 2); } textarea[cols="3"] { height: calc(var(--h) * 3); } textarea[cols="4"] { height: calc(var(--h) * 4); } textarea[cols="5"] { height: calc(var(--h) * 5); } textarea[cols="6"] { height: calc(var(--h) * 6); } textarea[cols="7"] { height: calc(var(--h) * 7); } .input { min-height: 56px; } input:is([type=text], [type=tel], [type=email], [type=password], [type=number], [type=search], [type=url], [type=date], [type=datetime-local], [type=time], [type=month], [type=week]) { height: 56px; outline-style: none; } textarea { min-height: 88px; resize: vertical; } .input { border: 2px solid var(--input-border-init-color); background: #fff; transition: 0.16s ease; position: relative; border-radius: 8px; box-sizing: border-box; display: flex; align-items: center; max-width: 100%; } .input.is-invalid { border-color: var(--input-border-invalid-color); } .input.is-invalid svg[data-icon] { color: var(--input-border-invalid-color); fill: var(--input-border-invalid-color); } .input:focus-within { border-color: var(--input-border-active-color); z-index: 700; } .input input:is([type=text], [type=tel], [type=email], [type=password], [type=number], [type=search], [type=url], [type=date], [type=datetime-local], [type=time], [type=month], [type=week]):focus { border-color: none; box-shadow: none; } .input > input, .input > textarea { border: 0; box-shadow: none; width: 100%; background: transparent; } .input svg[data-icon] { color: var(--qt); fill: var(--qt); } .input:focus-within svg[data-icon] { color: var(--br); fill: var(--br); } .input .b { height: 44px; padding-left: 19px; padding-right: 19px; border-radius: 8px; } .prefix, .suffix { color: var(--tr); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; } .prefix { padding-left: 6px; } .suffix { padding-right: 6px; } label.float { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transform-origin: left top; pointer-events: none; padding: 0 2px; color: var(--sc); line-height: 1; transition: 0.16s ease; } .input:has(.prefix) label.float { left: calc(20px + 28px); } .input.is-filled > label.float, .input:focus-within > label.float, .input input:not(:placeholder-shown) + .float, .input textarea:not(:placeholder-shown) + .float, .input input:not(:placeholder-shown) + .suffix + .float, .input textarea:not(:placeholder-shown) + .suffix + .float { top: 2px; transform: translateY(0) scale(0.5); color: #5d74ff; } .radios label.radio [type=radio] + i { margin-top: 1px; width: 24px; height: 24px; display: inline-block; flex-shrink: 0; overflow: hidden; border-radius: 50%; background-image: var(--checkbox-bg); box-shadow: var(--checkbox-inner-shadow); border: 2px solid var(--checkbox-bg); } .radios label.radio [type=radio] + i::after { content: ""; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } .radios label.radio [type=radio]:checked + i::after { background-color: var(--vo); } .radios label.radio [type=radio] + *:nth-child(2)::after { margin-left: 6px; margin-top: 6px; width: 12px; height: 12px; border-radius: 50%; } .radios label.radio + .radios label.radio { margin-left: var(--spacing-sm); } .radios label.radio.is-invalid i { border-color: var(--input-border-invalid-color) !important; } .radios label.radio { user-select: none; cursor: pointer; } .radios label.radio:has(input[type=radio]:checked) { background-color: var(--br2-pale); } .radios .radio-pic img { user-select: none; user-drag: none; -webkit-user-drag: none; } .radios .radio-name { display: block; line-height: 1.25; font-weight: 510; font-variation-settings: "wght" 510, "wdth" 100, "opsz" 14; } .radios .radio-desc { font-size: var(--fs-sm); color: var(--tr); } .radios h3, .radios h4 { color: var(--br2-rich); margin-bottom: var(--spacing-sm); } .radios :is(h3, h4):not(:first-child) { margin-top: var(--spacing-bg); } .schedule-slots.is-loading .radio, .schedule-slots.is-loading .day-name { min-height: 48px; border-radius: var(--radius-df); background: linear-gradient(45deg, var(--separator-sc) 0%, var(--ab) 20%, var(--ab) 30%, var(--separator-sc) 100%); background-size: 300% 300%; animation: gradientShift 3s ease-in-out infinite; border: transparent; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } ._radio-grid, .radios._doctors { --radio-col-size:210px; } ._radio-slots, .radios._slots { --radio-col-size:90px; } ._radio-card-visual, ._radio-slots .radio, .radios._slots .radio, ._radio-grid .radio, .radios._doctors .radio { padding: var(--spacing-sm); border-radius: var(--radius-df); box-shadow: var(--shadow-border-bottom); border-radius: var(--card-radius-lg); background-color: var(--radio-list-bg); } ._radio-grid, .radios._doctors, ._radio-slots, .radios._slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--radio-col-size), 1fr)); gap: var(--spacing-sm); } ._radio-grid .radio, .radios._doctors .radio { position: relative; display: flex; flex-flow: column nowrap; gap: var(--spacing-sm); } ._radio-grid .radio input, .radios._doctors .radio input { order: 100; } ._radio-grid .radio input + i, .radios._doctors .radio input + i { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); } ._radio-grid .radio-pic, .radios._doctors .radio-pic { height: 200px; order: -1; position: relative; display: flex; align-items: center; justify-content: center; } ._radio-grid .radio-pic img, .radios._doctors .radio-pic img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; height: 100%; max-width: 100%; mask-image: linear-gradient(to bottom, black 68%, transparent 90%); } ._radio-grid .radio-cont, .radios._doctors .radio-cont { flex-grow: 1; } ._radio-grid .radio-name, .radios._doctors .radio-name, ._radio-grid .radio-desc, .radios._doctors .radio-desc { display: block; } ._radio-grid .radio-desc, .radios._doctors .radio-desc { margin-top: var(--spacing-tn); } ._radio-slots .radio, .radios._slots .radio { position: relative; display: flex; flex-flow: row nowrap; gap: var(--spacing-tn); justify-content: center; } ._radio-slots .radio input + i, .radios._slots .radio input + i { display: none; } ._radio-list, .radios._services { display: flex; flex-flow: column nowrap; gap: var(--spacing-tn); } ._radio-list label.radio, .radios._services label.radio { display: inline-flex; align-items: center; gap: var(--spacing-sm); user-select: none; padding: var(--spacing-sm); border-radius: var(--radius-df); box-shadow: var(--shadow-border-bottom); border-radius: var(--card-radius-sm); background-color: var(--radio-list-bg); } ._radio-list .radio-cont, .radios._services .radio-cont { flex-grow: 1; } ._radio-list figure, .radios._services figure { display: flex; align-items: center; justify-content: center; } ._radio-list figure img, .radios._services figure img { width: 100%; height: 100%; object-fit: contain; align-self: end; width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-sm); } .dialog.appointment .radios._services img { width: 100px; height: 100px; margin-top: calc(-0.8 * var(--spacing-sm)); margin-bottom: calc(-1 * var(--spacing-sm)); } .group-switch { color: var(--sc); background-color: var(--ab); border-radius: 9999px; box-shadow: var(--shadow-border-top); padding: 6px; height: 56px; position: relative; display: inline-flex; } .group-switch:has(input:focus-visible) label:has(input:checked) { color: var(--text-on-pr) !important; } .group-switch:has(input:focus-visible)::before { background-color: var(--button-pr); } .group-switch label { font-size: var(--button-sm-fs); height: 48px; padding-left: 19px; padding-right: 19px; height: 44px; color: var(--tr); transition: color 200ms ease; display: flex; align-items: center; justify-content: center; user-select: none; white-space: nowrap; position: relative; z-index: 1; } .group-switch label:hover { color: var(--ac); } .group-switch label:has(input:checked) { color: var(--pr); } .group-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; } .group-switch::before { height: 42px; border-radius: 9999px; background-color: var(--button-sc); transition: transform 200ms ease, width 200ms ease; transform: translateX(var(--group-switch-left, 0)); width: var(--group-switch-width); top: 6px; bottom: 6px; left: 0; pointer-events: none; content: ""; position: absolute; } :root { --color-black: hsl(0, 0%, 10%); --color-darks: hsl(0, 0%, 20%); --color-greys: hsl(0, 0%, 80%); --color-light: hsl(0, 0%, 96%); --color-white: hsl(0, 0%, 100%); --color-blues: hsl(217, 91%, 60%); --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .form-group { position: relative; } .form-arrow { position: absolute; top: 0.65rem; right: 0.5rem; z-index: 10; font-size: 1.35rem; line-height: inherit; color: var(--color-darks); } .form .dropdown { height: 56px; position: relative; } .form .dropdown-select { position: relative; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; cursor: pointer; user-select: none; width: 100%; height: auto; padding: 0.75rem 1.25rem; border: none; outline: none; border-radius: 0.25rem; color: var(--color-black); background-clip: padding-box; background-color: var(--color-white); box-shadow: var(--shadow-medium); transition: all 0.3s ease-in-out; } .form .dropdown-menu { position: absolute; top: 100%; left: 0; display: none; width: 100%; z-index: 10; border-radius: 0.25rem; background-color: var(--color-white); box-shadow: var(--shadow-large); transition: all 0.3s ease-in-out; } .form .dropdown-menu-inner { max-height: 16rem; overflow-y: scroll; overflow-x: hidden; } .form .dropdown-menu-inner::-webkit-scrollbar { width: 5px; height: auto; } .form .dropdown-menu-inner::-webkit-scrollbar-thumb { border-radius: 0.25rem; background-color: var(--color-greys); box-shadow: var(--shadow-small); } .form .dropdown-menu-item { font-family: inherit; font-size: 1rem; font-weight: normal; line-height: inherit; cursor: pointer; user-select: none; padding: 0.65rem 1.25rem; background-color: var(--color-white); transition: all 0.2s ease-in-out; } .form .dropdown-menu-item:hover { color: var(--color-black); background-color: var(--color-greys); } .form .dropdown-menu-item.is-select, .form .dropdown-menu-item.is-select:hover { color: var(--color-white); background-color: var(--color-blues); } .form .dropdown-menu-search { display: block; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; width: 100%; height: auto; padding: 0.65rem 1.25rem; border: none; outline: none; color: var(--color-black); background-clip: padding-box; background-color: var(--color-light); } .checkbox { display: inline-flex; align-items: center; gap: var(--control-gap-sm); user-select: none; } .checkbox [type=checkbox] + i { margin-top: 1px; width: 24px; height: 24px; display: inline-block; flex-shrink: 0; overflow: hidden; border-radius: 4px; background-image: var(--checkbox-bg); box-shadow: var(--checkbox-inner-shadow); border: 2px solid var(--checkbox-bg); } .checkbox [type=checkbox] + i::after { content: ""; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } .checkbox [type=checkbox]:checked + i::after { background-color: var(--vo); } .checkbox [type=radio] + *:nth-child(2)::after { margin-left: 6px; margin-top: 6px; width: 12px; height: 12px; border-radius: 50%; } .checkbox + .checkbox { margin-left: var(--spacing-sm); } .checkbox.is-invalid i { border-color: var(--input-border-invalid-color) !important; } .checkbox [type=checkbox]:checked + *:nth-child(2)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='19 8 11 17 6 12'%3E%3C/polyline%3E%3C/svg%3E"); mask-size: contain; mask-position: center; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='19 8 11 17 6 12'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; } .checkbox [type=checkbox]:checked:disabled + *:nth-child(2)::after { background-color: var(--tr); } .checkbox.agree { font-size: var(--fs-tn); } /*╭───────────────────────────────╮ │ MARK: Checkbox │ │ │ │ │ ╰───────────────────────────────╯*/ /* .checkbox{ display: inline-flex; align-items: center; gap:var(--control-gap-sm); user-select : none; //comb &+&{margin-left: var(--spacing-sm);} &.agree{ font-size: var(--fs-tn); } // мелкий шрифт для agree-чекбоксов &.is-invalid i{ @extend .outline-invalid; border-color: var(--input-border-invalid-color)!important; } } .checkbox [type='checkbox']{ @extend .visually-hidden;//native checkbox hide //fake checkbox show &+*:nth-child(2){ //size margin-top:1px; width: $checkbox-size; height:$checkbox-size; //scaff display: inline-block; flex-shrink:0; overflow:hidden; //theme //bg border-radius: $radius2; background-image: var(--checkbox-bg); box-shadow:var(--checkbox-inner-shadow); border: $control-border-width solid var(--checkbox-bg); } //icon галка &+*:nth-child(2)::after{ @include content-width-height-100(); background-position:50% 50%; background-size:contain; background-repeat:no-repeat; } //states //checked &:checked+*:nth-child(2)::after{ background-color:var(--br); @include svg-mask-polyline(19 8 11 17 6 12); } //checked+disabled &:checked:disabled+*:nth-child(2)::after{ background-color:var(--tr); } } */ .dropdown { background-color: var(--card-bg); border-radius: var(--radius-sm); box-shadow: var(--card-shadow); display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); position: relative; width: 500px; } .dropdown .input { border-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown-inner { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 400px; background: inherit; z-index: 1100; } .dropdown.open .dropdown-inner { display: block; } .dropdown-inner label:not(:first-child) { border-top: 1px solid var(--separator-sc); } .dropdown-inner label { padding: var(--spacing-sm); display: flex; flex-flow: row nowrap; gap: var(--spacing-sm); cursor: pointer; user-select: none; } .form { --form-col-gap: 1rem; --form-row-gap:.4rem; width: 100%; max-width: 100%; display: flex; flex-flow: column nowrap; gap: var(--spacing-sm); } .form .col.box { --form-col-gap:0; } .form .row.box { --form-row-gap:0; } .form .col, .form .row, .form .input { flex-grow: 1; } .form .row { display: flex; flex-flow: column nowrap; gap: var(--form-row-gap); } @media (min-width: 576px) { .form .row { display: flex; flex-flow: row nowrap; gap: var(--form-row-gap); } } .form .col { display: flex; flex-flow: column nowrap; gap: var(--form-col-gap); } .form .col.box .input + .input { margin-top: -2px; } .form .col.box .input:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form .col.box .input:not(:first-child, :last-child) { border-radius: 0; } .form .col.box .input:last-child { border-top-left-radius: 0; border-top-right-radius: 0; } .form .row.box .input + .input { margin-left: -2px; } .form .row.box .input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .form .row.box .input:not(:first-child, :last-child) { border-radius: 0; } .form .row.box .input:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .form .row.box .input + .input { box-shadow: var(--shadow-border-left); } /*// MARK: LEGACY ╭──────────────╮╭──────────────╮╭──────────────╮╭──────────────╮╭──────────────╮╭──────────────╮ │ Legacy below ││ Legacy below ││ Legacy below ││ Legacy below ││ Legacy below ││ Legacy below │ ╰──────────────╯╰──────────────╯╰──────────────╯╰──────────────╯╰──────────────╯╰──────────────╯*/ .O { position: relative; padding-left: var(--o-ml); user-select: none; cursor: default; cursor: copy; } /* Horizontal */ .O { margin-right: var(--o-ml); } .O:last-child { margin-right: inherit; } /* Vertical */ .OY .O + .O { margin-left: inherit; } /* Padding */ .Olg .O, .Olg.O { padding-top: calc((var(--Barea) - 1em) / 2); padding-bottom: calc((var(--Barea) - 1em) / 2); } .Odf .O, .Odf.O { padding-top: calc((var(--Bdf) - 1em) / 2); padding-bottom: calc((var(--Bdf) - 1em) / 2); } .Osm .O, .Osm.O { font: 500 var(--Tsm)/1 m; padding-top: calc((var(--Bsm) - var(--Tsm)) / 2); padding-bottom: calc((var(--Bsm) - var(--Tsm)) / 2); } /* Color */ .Olo .O, .Olo.O { font-family: r; } /* Text */ .OT { color: var(--tlo); } .OI:checked + .OB + .OT { color: var(--ac); } .OI:checked:disabled + .OB + .OT { color: var(--tph); } /* Button */ /* Common */ .OB { position: absolute; margin-left: calc(var(--o-ml) * -1); margin-top: 0.0625em; width: 0.875em; height: 0.875em; } /* Radius*/ .OI[type=checkbox] + .OB { border-radius: 36%; } .OI[type=radio] + .OB { border-radius: 50%; } /* Checked */ .OI:checked + .OB { background-color: var(--br); } /* Checkbox */ .OI[type=checkbox]:checked + .OB { background-image: url(/dist/css/img/svg/IFinp_check.svg); } /* Radio */ .OI[type=radio]:checked + .OB { display: flex; align-items: center; align-content: center; justify-content: center; background-image: none; } /* Dot */ .OI[type=radio]:checked + .OB:before { content: ""; width: 0.375em; height: 0.375em; border-radius: 50%; background-color: #fff; } /* Focused */ .OI:focus + .OB { box-shadow: 0 0 0 0.2em rgba(0, 122, 255, 0.25); } .OI:focus:not(:checked) + .OB { background-color: #fff; background-image: none; } /* Active */ .OI:active + .OB { opacity: 0.8; } /* Disabled */ .OI:disabled + .OB { opacity: 0.5; box-shadow: none; } .OI:checked:disabled + .OB { opacity: 0.4; filter: invert(100%) grayscale(100%) contrast(200%); } .pu .NI:not(:first-child) { border-top: 1px solid #eee; } .pu .NI:hover, .pu .NI:hover a, .N_pu .NI:hover { color: #000; color: rgba(255, 255, 255, 0.5); background-color: #515253; color: #fff !important; } /* Title */ .pu .NI a:link, .pu .NI a:visited { color: var(--pr); } /* Value */ .pu .NV, .N_pu .NV { color: rgba(0, 0, 0, 0.24); } .pu .NI:hover .NV, .N_pu .NI:hover .NV { color: rgba(255, 255, 255, 0.5); } .pu .NI:first-child, .N_pu .NI:first-child { border-top-left-radius: var(--rdf); border-top-right-radius: var(--rdf); } .pu .NI:last-child, .N_pu .NI:last-child { border-bottom-left-radius: var(--rdf); border-bottom-right-radius: var(--rdf); } /* Arrow */ .pu-arrow { --offset:-2px; position: absolute; width: var(--rad-arrow); height: var(--rad-arrow); transform: rotate(45deg); border-radius: 0.2em; z-index: 105; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); transition: all 0.2s ease-in-out; pointer-events: none; } .pu-arrow._pl { left: var(--offset); top: 50%; margin-top: calc(var(--rad-arrow) / -2); margin-left: calc(var(--rad-arrow) / -2); border-top-color: transparent; border-right-color: transparent; border-top-right-radius: calc(var(--rad-arrow) * 2); } .pu-arrow._pr { right: var(--offset); top: 50%; margin-top: calc(var(--rad-arrow) / -2); margin-right: calc(var(--rad-arrow) / -2); border-bottom-color: transparent; border-left-color: transparent; border-bottom-left-radius: calc(var(--rad-arrow) * 2); } .pu-arrow._pt { left: 50%; top: var(--offset); margin-top: calc(var(--rad-arrow) / -2); margin-left: calc(var(--rad-arrow) / -2); border-bottom-color: transparent; border-right-color: transparent; border-bottom-right-radius: calc(var(--rad-arrow) * 2); } .pu-arrow._pb { left: 50%; bottom: var(--offset); margin-bottom: calc(var(--rad-arrow) / -2); margin-left: calc(var(--rad-arrow) / -2); border-top-color: transparent; border-left-color: transparent; border-top-left-radius: calc(var(--rad-arrow) * 2); } /* Close */ .pu-close { padding: 0.25em; border-radius: 1em; position: absolute; right: 0.25em; top: 0.25em; background-color: rgba(0, 0, 0, 0); z-index: 105; cursor: pointer; transition: all 0.2s ease-in-out; color: var(--sc); } .pu-close:hover { background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.2); color: #000; } .pu-close:active { background-color: rgba(0, 0, 0, 0.25); } /* Shadow */ /*.pu-shadow.pu-bgb{box-shadow: var(--sha-bgb-cadf)}*/ .pu-shadow { box-shadow: var(--sha-bgw-cadf); } .pu-W { /* padding-left: calc(var(--s40) - .278rem); */ /* padding-right:calc(var(--s40) - .278rem); */ } /* + Combinations */ .pu-H + .F { margin-top: 1em; } svg[data-icon], .i { height: 24px; width: 24px; display: inline-block; font-size: inherit; vertical-align: -0.175em; overflow: visible; } .i { background-size: 100% 100%; background-size: cover; background-repeat: no-repeat; } .i, .b, .OP, .OP::before, input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } i.i-airplane { background-image: url("/dist/css/../media/svg/airplane.svg"); } input.i-airplane, textarea.i-airplane, .ipc.i-airplane::before, .ips.i-airplane::before, .ipe.i-airplane::before, .OP.i-airplane::before { background-image: url("/dist/css/../media/svg/airplane.svg"); } i.i-anchor { background-image: url("/dist/css/../media/svg/anchor.svg"); } input.i-anchor, textarea.i-anchor, .ipc.i-anchor::before, .ips.i-anchor::before, .ipe.i-anchor::before, .OP.i-anchor::before { background-image: url("/dist/css/../media/svg/anchor.svg"); } i.i-arrow-down-od { background-image: url("/dist/css/../media/svg/arrow-down-od.svg"); } input.i-arrow-down-od, textarea.i-arrow-down-od, .ipc.i-arrow-down-od::before, .ips.i-arrow-down-od::before, .ipe.i-arrow-down-od::before, .OP.i-arrow-down-od::before { background-image: url("/dist/css/../media/svg/arrow-down-od.svg"); } i.i-arrow-down-ol { background-image: url("/dist/css/../media/svg/arrow-down-ol.svg"); } input.i-arrow-down-ol, textarea.i-arrow-down-ol, .ipc.i-arrow-down-ol::before, .ips.i-arrow-down-ol::before, .ipe.i-arrow-down-ol::before, .OP.i-arrow-down-ol::before { background-image: url("/dist/css/../media/svg/arrow-down-ol.svg"); } i.i-arrow-up-od { background-image: url("/dist/css/../media/svg/arrow-up-od.svg"); } input.i-arrow-up-od, textarea.i-arrow-up-od, .ipc.i-arrow-up-od::before, .ips.i-arrow-up-od::before, .ipe.i-arrow-up-od::before, .OP.i-arrow-up-od::before { background-image: url("/dist/css/../media/svg/arrow-up-od.svg"); } i.i-arrow-up-ol { background-image: url("/dist/css/../media/svg/arrow-up-ol.svg"); } input.i-arrow-up-ol, textarea.i-arrow-up-ol, .ipc.i-arrow-up-ol::before, .ips.i-arrow-up-ol::before, .ipe.i-arrow-up-ol::before, .OP.i-arrow-up-ol::before { background-image: url("/dist/css/../media/svg/arrow-up-ol.svg"); } i.i-book { background-image: url("/dist/css/../media/svg/book.svg"); } input.i-book, textarea.i-book, .ipc.i-book::before, .ips.i-book::before, .ipe.i-book::before, .OP.i-book::before { background-image: url("/dist/css/../media/svg/book.svg"); } i.i-call { background-image: url("/dist/css/../media/svg/call.svg"); } input.i-call, textarea.i-call, .ipc.i-call::before, .ips.i-call::before, .ipe.i-call::before, .OP.i-call::before { background-image: url("/dist/css/../media/svg/call.svg"); } i.i-car { background-image: url("/dist/css/../media/svg/car.svg"); } input.i-car, textarea.i-car, .ipc.i-car::before, .ips.i-car::before, .ipe.i-car::before, .OP.i-car::before { background-image: url("/dist/css/../media/svg/car.svg"); } i.i-case { background-image: url("/dist/css/../media/svg/case.svg"); } input.i-case, textarea.i-case, .ipc.i-case::before, .ips.i-case::before, .ipe.i-case::before, .OP.i-case::before { background-image: url("/dist/css/../media/svg/case.svg"); } i.i-cube { background-image: url("/dist/css/../media/svg/cube.svg"); } input.i-cube, textarea.i-cube, .ipc.i-cube::before, .ips.i-cube::before, .ipe.i-cube::before, .OP.i-cube::before { background-image: url("/dist/css/../media/svg/cube.svg"); } i.i-dart-l { background-image: url("/dist/css/../media/svg/dart-l.svg"); } input.i-dart-l, textarea.i-dart-l, .ipc.i-dart-l::before, .ips.i-dart-l::before, .ipe.i-dart-l::before, .OP.i-dart-l::before { background-image: url("/dist/css/../media/svg/dart-l.svg"); } i.i-dart-r { background-image: url("/dist/css/../media/svg/dart-r.svg"); } input.i-dart-r, textarea.i-dart-r, .ipc.i-dart-r::before, .ips.i-dart-r::before, .ipe.i-dart-r::before, .OP.i-dart-r::before { background-image: url("/dist/css/../media/svg/dart-r.svg"); } i.i-doc { background-image: url("/dist/css/../media/svg/doc.svg"); } input.i-doc, textarea.i-doc, .ipc.i-doc::before, .ips.i-doc::before, .ipe.i-doc::before, .OP.i-doc::before { background-image: url("/dist/css/../media/svg/doc.svg"); } i.i-email { background-image: url("/dist/css/../media/svg/email.svg"); } input.i-email, textarea.i-email, .ipc.i-email::before, .ips.i-email::before, .ipe.i-email::before, .OP.i-email::before { background-image: url("/dist/css/../media/svg/email.svg"); } i.i-geo { background-image: url("/dist/css/../media/svg/geo.svg"); } input.i-geo, textarea.i-geo, .ipc.i-geo::before, .ips.i-geo::before, .ipe.i-geo::before, .OP.i-geo::before { background-image: url("/dist/css/../media/svg/geo.svg"); } i.i-help { background-image: url("/dist/css/../media/svg/help.svg"); } input.i-help, textarea.i-help, .ipc.i-help::before, .ips.i-help::before, .ipe.i-help::before, .OP.i-help::before { background-image: url("/dist/css/../media/svg/help.svg"); } i.i-hierarchy { background-image: url("/dist/css/../media/svg/hierarchy.svg"); } input.i-hierarchy, textarea.i-hierarchy, .ipc.i-hierarchy::before, .ips.i-hierarchy::before, .ipe.i-hierarchy::before, .OP.i-hierarchy::before { background-image: url("/dist/css/../media/svg/hierarchy.svg"); } i.i-info { background-image: url("/dist/css/../media/svg/info.svg"); } input.i-info, textarea.i-info, .ipc.i-info::before, .ips.i-info::before, .ipe.i-info::before, .OP.i-info::before { background-image: url("/dist/css/../media/svg/info.svg"); } i.i-man { background-image: url("/dist/css/../media/svg/man.svg"); } input.i-man, textarea.i-man, .ipc.i-man::before, .ips.i-man::before, .ipe.i-man::before, .OP.i-man::before { background-image: url("/dist/css/../media/svg/man.svg"); } i.i-mcar { background-image: url("/dist/css/../media/svg/mcar.svg"); } input.i-mcar, textarea.i-mcar, .ipc.i-mcar::before, .ips.i-mcar::before, .ipe.i-mcar::before, .OP.i-mcar::before { background-image: url("/dist/css/../media/svg/mcar.svg"); } i.i-mcard { background-image: url("/dist/css/../media/svg/mcard.svg"); } input.i-mcard, textarea.i-mcard, .ipc.i-mcard::before, .ips.i-mcard::before, .ipe.i-mcard::before, .OP.i-mcard::before { background-image: url("/dist/css/../media/svg/mcard.svg"); } i.i-mcase { background-image: url("/dist/css/../media/svg/mcase.svg"); } input.i-mcase, textarea.i-mcase, .ipc.i-mcase::before, .ips.i-mcase::before, .ipe.i-mcase::before, .OP.i-mcase::before { background-image: url("/dist/css/../media/svg/mcase.svg"); } i.i-mday_am { background-image: url("/dist/css/../media/svg/mday_am.svg"); } input.i-mday_am, textarea.i-mday_am, .ipc.i-mday_am::before, .ips.i-mday_am::before, .ipe.i-mday_am::before, .OP.i-mday_am::before { background-image: url("/dist/css/../media/svg/mday_am.svg"); } i.i-mday_pm { background-image: url("/dist/css/../media/svg/mday_pm.svg"); } input.i-mday_pm, textarea.i-mday_pm, .ipc.i-mday_pm::before, .ips.i-mday_pm::before, .ipe.i-mday_pm::before, .OP.i-mday_pm::before { background-image: url("/dist/css/../media/svg/mday_pm.svg"); } i.i-meye { background-image: url("/dist/css/../media/svg/meye.svg"); } input.i-meye, textarea.i-meye, .ipc.i-meye::before, .ips.i-meye::before, .ipe.i-meye::before, .OP.i-meye::before { background-image: url("/dist/css/../media/svg/meye.svg"); } i.i-mfolder { background-image: url("/dist/css/../media/svg/mfolder.svg"); } input.i-mfolder, textarea.i-mfolder, .ipc.i-mfolder::before, .ips.i-mfolder::before, .ipe.i-mfolder::before, .OP.i-mfolder::before { background-image: url("/dist/css/../media/svg/mfolder.svg"); } i.i-mmenu { background-image: url("/dist/css/../media/svg/mmenu.svg"); } input.i-mmenu, textarea.i-mmenu, .ipc.i-mmenu::before, .ips.i-mmenu::before, .ipe.i-mmenu::before, .OP.i-mmenu::before { background-image: url("/dist/css/../media/svg/mmenu.svg"); } i.i-mnote1 { background-image: url("/dist/css/../media/svg/mnote1.svg"); } input.i-mnote1, textarea.i-mnote1, .ipc.i-mnote1::before, .ips.i-mnote1::before, .ipe.i-mnote1::before, .OP.i-mnote1::before { background-image: url("/dist/css/../media/svg/mnote1.svg"); } i.i-mnote2 { background-image: url("/dist/css/../media/svg/mnote2.svg"); } input.i-mnote2, textarea.i-mnote2, .ipc.i-mnote2::before, .ips.i-mnote2::before, .ipe.i-mnote2::before, .OP.i-mnote2::before { background-image: url("/dist/css/../media/svg/mnote2.svg"); } i.i-mtime { background-image: url("/dist/css/../media/svg/mtime.svg"); } input.i-mtime, textarea.i-mtime, .ipc.i-mtime::before, .ips.i-mtime::before, .ipe.i-mtime::before, .OP.i-mtime::before { background-image: url("/dist/css/../media/svg/mtime.svg"); } i.i-muser { background-image: url("/dist/css/../media/svg/muser.svg"); } input.i-muser, textarea.i-muser, .ipc.i-muser::before, .ips.i-muser::before, .ipe.i-muser::before, .OP.i-muser::before { background-image: url("/dist/css/../media/svg/muser.svg"); } i.i-nday_nt { background-image: url("/dist/css/../media/svg/nday_nt.svg"); } input.i-nday_nt, textarea.i-nday_nt, .ipc.i-nday_nt::before, .ips.i-nday_nt::before, .ipe.i-nday_nt::before, .OP.i-nday_nt::before { background-image: url("/dist/css/../media/svg/nday_nt.svg"); } i.i-office { background-image: url("/dist/css/../media/svg/office.svg"); } input.i-office, textarea.i-office, .ipc.i-office::before, .ips.i-office::before, .ipe.i-office::before, .OP.i-office::before { background-image: url("/dist/css/../media/svg/office.svg"); } i.i-paste { background-image: url("/dist/css/../media/svg/paste.svg"); } input.i-paste, textarea.i-paste, .ipc.i-paste::before, .ips.i-paste::before, .ipe.i-paste::before, .OP.i-paste::before { background-image: url("/dist/css/../media/svg/paste.svg"); } i.i-pin { background-image: url("/dist/css/../media/svg/pin.svg"); } input.i-pin, textarea.i-pin, .ipc.i-pin::before, .ips.i-pin::before, .ipe.i-pin::before, .OP.i-pin::before { background-image: url("/dist/css/../media/svg/pin.svg"); } i.i-plus { background-image: url("/dist/css/../media/svg/plus.svg"); } input.i-plus, textarea.i-plus, .ipc.i-plus::before, .ips.i-plus::before, .ipe.i-plus::before, .OP.i-plus::before { background-image: url("/dist/css/../media/svg/plus.svg"); } i.i-search { background-image: url("/dist/css/../media/svg/search.svg"); } input.i-search, textarea.i-search, .ipc.i-search::before, .ips.i-search::before, .ipe.i-search::before, .OP.i-search::before { background-image: url("/dist/css/../media/svg/search.svg"); } i.i-settings { background-image: url("/dist/css/../media/svg/settings.svg"); } input.i-settings, textarea.i-settings, .ipc.i-settings::before, .ips.i-settings::before, .ipe.i-settings::before, .OP.i-settings::before { background-image: url("/dist/css/../media/svg/settings.svg"); } i.i-signature { background-image: url("/dist/css/../media/svg/signature.svg"); } input.i-signature, textarea.i-signature, .ipc.i-signature::before, .ips.i-signature::before, .ipe.i-signature::before, .OP.i-signature::before { background-image: url("/dist/css/../media/svg/signature.svg"); } i.i-social-max { background-image: url("/dist/css/../media/svg/social-max.svg"); } input.i-social-max, textarea.i-social-max, .ipc.i-social-max::before, .ips.i-social-max::before, .ipe.i-social-max::before, .OP.i-social-max::before { background-image: url("/dist/css/../media/svg/social-max.svg"); } i.i-social-tg { background-image: url("/dist/css/../media/svg/social-tg.svg"); } input.i-social-tg, textarea.i-social-tg, .ipc.i-social-tg::before, .ips.i-social-tg::before, .ipe.i-social-tg::before, .OP.i-social-tg::before { background-image: url("/dist/css/../media/svg/social-tg.svg"); } i.i-social-vk { background-image: url("/dist/css/../media/svg/social-vk.svg"); } input.i-social-vk, textarea.i-social-vk, .ipc.i-social-vk::before, .ips.i-social-vk::before, .ipe.i-social-vk::before, .OP.i-social-vk::before { background-image: url("/dist/css/../media/svg/social-vk.svg"); } i.i-star { background-image: url("/dist/css/../media/svg/star.svg"); } input.i-star, textarea.i-star, .ipc.i-star::before, .ips.i-star::before, .ipe.i-star::before, .OP.i-star::before { background-image: url("/dist/css/../media/svg/star.svg"); } i.i-time { background-image: url("/dist/css/../media/svg/time.svg"); } input.i-time, textarea.i-time, .ipc.i-time::before, .ips.i-time::before, .ipe.i-time::before, .OP.i-time::before { background-image: url("/dist/css/../media/svg/time.svg"); } i.i-user { background-image: url("/dist/css/../media/svg/user.svg"); } input.i-user, textarea.i-user, .ipc.i-user::before, .ips.i-user::before, .ipe.i-user::before, .OP.i-user::before { background-image: url("/dist/css/../media/svg/user.svg"); } i.i-users { background-image: url("/dist/css/../media/svg/users.svg"); } input.i-users, textarea.i-users, .ipc.i-users::before, .ips.i-users::before, .ipe.i-users::before, .OP.i-users::before { background-image: url("/dist/css/../media/svg/users.svg"); } i.i-warn { background-image: url("/dist/css/../media/svg/warn.svg"); } input.i-warn, textarea.i-warn, .ipc.i-warn::before, .ips.i-warn::before, .ipe.i-warn::before, .OP.i-warn::before { background-image: url("/dist/css/../media/svg/warn.svg"); } i.i-week { background-image: url("/dist/css/../media/svg/week.svg"); } input.i-week, textarea.i-week, .ipc.i-week::before, .ips.i-week::before, .ipe.i-week::before, .OP.i-week::before { background-image: url("/dist/css/../media/svg/week.svg"); } /* ╭╮╭╮ ╭─ ❤ ╭─────────╮ ( ^─^)─┴───╯ Описание фрейморвка в rule.scss │ CORE ╰──╰┬─┬╯─────────────────────────────────────────────────────╮ │ │ │ Сердце фреймворка │ │ • Место сборки файлов через import │ │ • Core можно использовать как block для уникальных блоков │ │ • и прямо тут делать │ │ • │ │ • Уникальные блоки хранятся тут │ │ • Типовые и редко изменяемые — в отдельных файлах (не распыляемся │ │ │ │ Зачем раздувать один файл? │ │ • Повторяющиеся почти одинаковые компоненты │ │ логично держать в 1 месте для копипаста и быстрых правок │ │ • Чтобы схожие элементы выглядели единообразно, │ │ нужно бегать и сверяться, держим рядом и не бегаем │ │ │ ╰──────────────────────────────────────────────────────────────────────╯ ⚑ TODO • видео у врача когда одно он растягивается • образование убрать для ссылок интерактивность • убрать на мобиле стрелки в слайдере • текущий пункт меню сделать заметным • показать день в schedule не только на мобиле а на пк • • табы на чистом css https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/ http://127.0.0.1:5500/about_devices.html производитель + группировки перечня оборудования по категориям. документы о реквизитах клиники актуальный перечень лицензий перечень нормативных документов о правах и обязанностях граждан в сфере охраны здоровья об адресах и номерах телефонов органа государственной власти субъекта Российской Федерации в сфере охраны здоровья. пациентам памятки перечень доступных памяток с возможностью их скачивания, часто задаваемые вопросы - список частых вопросов и ответов. 📦 Готовые миксины для внедрения РЕФАКТОРИТЬ dropdown пример https://codepen.io/syahrizaldev/pen/ExowvEM select native example https://www.w3schools.com/TAGS/tag_select.asp ПОД ВОПРОСОМ Подумать о выносе лейаута в отдельный файл по мере устаканивания хотя часто они редактируются для каждого сайта header, sidebar, main, footer КНОПКИ ПОДУМАТЬ размер убрать и ставить его через скопу по феншую, чтобы они сами правильно размер меняли а то они в шаблонах застрянут навсегда СТАНДАРТЫ МИРОВЫЕ data-state="open" НЕТ, медленней, в цсс не удобно нах РАЗМЕРЫ СДЕЛАТЬ ЭТИ .xs, .sm, .md, .lg, .xl ⚑ Ссылки грид https://grid.layoutit.com/ палитра генератор с wcag https://accessiblepalette.com/ палитра генератор по восприятию https://perceptualpalettes.alexdunn.au/ палитра генератор https://meodai.github.io/rampensau/ easy https://easingwizard.com/ easy https://easings.net/ статья shape рисование табов КРУТО https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/ https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ Уместить текст в строку с максимальным масштабом КРУТО, трюк с svg и чистый css https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/ Кузляр ■ ■ ■ Учесть что видео не будет долго и отзывы нужно другим способом показать еще, более крупно на всю ширину ■deploy проверить везде //dev перед выгрузкой ■todo|//todo| эти метки по проекту проверить везде и исправить ■s[0-9]+ найти все стили без var отзывы снизу видеоотзывов сделать 3 карточки продокторв яндекс 2гис 2-я (ГОТОВО) Снизу фото фасада сделать одну широкую кадрирование sm → df кнопки чуть больше сделать для правой части заголовка список врачей на главной добавть кнопку отзывы с преходом на врача в продокторов 1-я обратная связь (ГОТОВО) Сниппет 4 отфальмлога добавить отзывы Услуги горизонтально (возможно подумать над плашкой цены) ОМС не надо Отзывы наших пациентов - истории сразу покаызваем видосы, плашки 2гис и продокторов Запись на прием сразу на странице Адрес и офис картинкой Меню-карта-сайта */ .scroll-container { --gap: 2rem; display: flex; overflow-x: auto; touch-action: pan-x pan-y; scroll-behavior: smooth; scroll-behavior: auto; scroll-snap-type: x mandatory; -webkit-scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: var(--gap); user-select: none; scrollbar-width: thin; scrollbar-color: #aaa #ccc; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s ease-in-out; } .scroll-container::-webkit-scrollbar { height: 6px; transition: height 0.3s ease-in-out; } .scroll-container::-webkit-scrollbar-track { background: #ccc; border-radius: 3px; } .scroll-container::-webkit-scrollbar-thumb { background: #aaa; border-radius: 3px; transition: background 0.3s ease-in-out; } .scroll-container:is(:hover, :active, :focus-within) { scrollbar-color: #000 #ccc; } .scroll-container:is(:hover, :active, :focus-within)::-webkit-scrollbar { height: 20px; } .scroll-container:is(:hover, :active, :focus-within)::-webkit-scrollbar-thumb { background: #000; } .scroll-item { flex: 0 0 calc((100% - var(--gap) * 3) / 4); scroll-snap-align: start; -webkit-scroll-snap-align: start; scroll-snap-stop: always; -webkit-scroll-snap-stop: always; } .tests h3 { margin-bottom: var(--spacing-df); } .promo { display: flex; flex-flow: column nowrap; justify-content: space-between; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-lg, var(--card-radius-lg)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-lg, var(--card-padding-lg)); gap: var(--card-gap-lg, var(--card-gap-lg)); padding: var(--spacing-hg) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg); } @media (max-width: 767.98px) { .promo { padding: 0 !important; } } .promo-desc { color: var(--sc); } .promo { position: relative; background-image: url("/dist/css/../media/svg/animated_circle_comfort.svg"); background-size: cover; background-position: 110% 50%; background-repeat: no-repeat; background-blend-mode: multiply; --text-max-width:60ch; --img-max-width:200px; --img-max-height:50vh; --img-y-spacing:2rem; position: relative; display: grid; grid-template-columns: auto 5fr; } @media (max-width: 1199.98px) { .promo-pic { display: none; } .promo { column-gap: 0; } } .promo:has(> :only-child) { grid-template-columns: 1fr; } .promo .breadcrumbs { position: absolute; right: 1rem; } @media (max-width: 575.98px) { .promo .breadcrumbs { position: absolute; top: 1rem; left: 50%; transform: translate(-50%, 0); width: max-content; } } @media (min-width: 576px) { .promo .breadcrumbs { top: 1rem; } } .promo-cont { display: flex; flex-flow: column nowrap; gap: 1.5rem; justify-content: center; min-width: 0; max-width: var(--text-max-width); padding: var(--spacing-hg) var(--spacing-lg); } @media (max-width: 575.98px) { .promo:has(.breadcrumbs) .promo-cont { padding-top: calc(var(--spacing-lg) * 3); } } .promo-desc ul:last-child { margin-bottom: 0; } .promo-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .promo-pic { position: relative; height: 100%; } .promo-pic img { display: block; width: var(--promo-media-size); border-radius: var(--radius-md); } .promo-page .body { text-wrap: balance; min-width: min(22.5rem, var(--body-width-available)); max-width: 33rem; margin-left: auto; margin-right: auto; } .promo-page .body .text { font-size: var(--fs-lg); } .find-sect > .input + .split-sect { border-top: none; } .find-sect .input { width: 100%; } .finds { display: flex; flex-flow: column nowrap; gap: var(--spacing-bg); } @media (max-width: 575.98px) { .finds { margin-left: 0; } } .find { display: list-item; } .find-desc { margin-top: var(--spacing-sm); } .placeholder { min-height: 30dvh; padding: var(--spacing-lg); display: flex; align-items: center; justify-content: center; border-radius: var(--card-radius-df); border: 2px solid var(--separator-sc); } .placeholder-cont { display: flex; flex-flow: column nowrap; gap: var(--spacing-sm); } .placeholder-desc { font-size: var(--fs-lg); } .vacancies { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--doctor-col-width), 1fr)); gap: var(--grid-row-gap); } .vacancies .vacancy { background-color: var(--surface-0); } .vacancies .vacancy-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .vacancies .vacancy-meta { display: flex; flex-flow: row nowrap; align-items: center; gap: var(--spacing-df); } @media (max-width: 767.98px) { .services { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } } @media (min-width: 768px) { .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } @media (min-width: 1200px) { .services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } .services .service { max-height: 550px; } .service { display: flex; flex-flow: column nowrap; justify-content: space-between; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--card-gap-df, var(--card-gap-df)); } .service { position: relative; } .service-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .service-head { margin-top: var(--spacing-tn); margin-bottom: var(--spacing-tn); } .service-head .i { width: var(--icon-bg); height: var(--icon-bg); } .service-desc { color: var(--sc); } .service-link { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .service-pic { flex: 1; margin: 0; min-height: 0; order: 1; flex-grow: 1; } .service-desc { flex-grow: 1; } .service-pic + .service-desc { flex-grow: unset; } .service-pic img { border-radius: var(--service-pic-radius); width: 100%; height: 100%; object-fit: cover; display: block; } .service:hover { box-shadow: var(--card-shadow-hover); } .service .cost { font-size: var(--h3); } .service-lg { grid-column: span 2; } .service-refraction { position: relative; } .service-refraction::after { content: ""; position: absolute; inset: 0; background-image: url("/dist/css/../media/svg/lense_artificial.svg"); background-size: 120%; background-position: -50% 50%; background-repeat: no-repeat; opacity: 0.75; mix-blend-mode: multiply; pointer-events: none; } .service-tmp { position: relative; } .service-tmp-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .service-tmp-pic { display: block; aspect-ratio: 1/1; margin: 0; } .service-tmp-pic img { border-radius: var(--service-pic-radius); width: 100%; height: 100%; object-fit: cover; display: block; } .features-outlined .feature { background-color: transparent; background: linear-gradient(to bottom, transparent 40%, var(--ab) 100%); } .gradient-pic { --w:var(--promo-media-size); --h:var(--promo-media-size); mask-image: url("/dist/css/../media/svg/lense_artificial.svg"); mask-size: contain; mask-position: center; mask-repeat: no-repeat; } .gradient-pic.mcase { mask-image: url("/dist/css/../media/svg/mcase.svg"); } .gradient-pic.logo { mask-image: url("/dist/css/../media/logo/logo.svg"); --h:240px; --w:100%; } .gradient-pic { width: var(--w); height: var(--h); } .body-vacancies .gradient-pic { width: 350px; height: 350px; } .scores { display: grid; justify-content: space-between; align-content: end; column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-size), 1fr)); } .score { background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--card-gap-df, var(--card-gap-df)); border-top-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); background-color: var(--pastel-aqua-soft); flex-flow: row nowrap; display: flex; align-items: center; justify-content: center; gap: var(--spacing-df); } .score { position: relative; } .score-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .score-head { font-size: 40px; } .score-link { flex-grow: 1; } .score-pic { max-width: 100%; height: 60px; } @media (max-width: 575.98px) { .reels { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } } @media (min-width: 576px) { .reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } @media (min-width: 960px) { .reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } @media (min-width: 1200px) { .reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } @media (min-width: 1700px) { .reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); grid-auto-rows: minmax(var(--grid-row-min), auto); grid-auto-flow: row dense; justify-content: space-between; align-content: end; } } .reel { display: flex; flex-flow: column nowrap; justify-content: space-between; position: relative; aspect-ratio: 9/16; } .reel .video, .reel .reel-pic img { background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: 0; gap: var(--card-gap-df, var(--card-gap-df)); width: 100%; height: 100%; object-fit: cover; } @media (min-width: 576px) { .reel .video, .reel .reel-pic img { height: var(--reel-height); } } .reel .video, .reel .reel-pic img { cursor: pointer; } .reel-desc { flex-grow: 1; text-align: right; text-align: center; margin-top: var(--spacing-sm); padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); color: var(--sc); } .split-cont p:last-child { padding-bottom: 0; } .split-sect { display: grid; } @media (min-width: 768px) { .split-sect { grid-template-columns: 1fr 3fr; } } .split-sect { gap: var(--spacing-lg); padding-top: var(--spacing-hg); } @media (min-width: 768px) { .split-sect { padding-bottom: var(--spacing-hg); } } .split-sect .b + a { margin-left: var(--spacing-tn); } .split-sect strong { color: var(--pr); } .split-sect .map { margin-top: var(--spacing-df); max-width: 100%; } .split-sect:nth-child(even) .split-head { background: var(--gradient-header-pr); background-clip: text; color: transparent; } @-moz-document url-prefix() { .split-sect:nth-child(even) .split-head { color: transparent; } } @media (max-width: 767.98px) { .split-sect { border: none !important; } .split .tool-x, .split .service-meta { flex-direction: column; gap: var(--spacing-tn); } .split .tool-x .b, .split .service-meta .b { width: 100%; } } .contacts .split-cont { font-size: var(--fs-lg); color: var(--text-body); text-wrap: balance; max-width: 40rem; } .contacts .split-cont p:not(:last-child) { margin-bottom: var(--spacing-lg); } .patient .split-sect:first-child { padding-top: 0; } @media (max-width: 575.98px) { .device { display: flex; flex-flow: column nowrap; gap: var(--spacing-lg); } .device .device-cont { order: 1; } } @media (min-width: 576px) { .device { display: flex; flex-flow: row nowrap; gap: var(--spacing-df) var(--spacing-df); } } .device { border: 2px solid var(--separator-sc); padding: var(--spacing-bg); border-radius: var(--card-radius-lg); } .device-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .device-cont { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .device-pic { height: 100%; overflow: hidden; } .device-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .showcase2 { display: flex; flex-flow: row nowrap; gap: var(--spacing-df) var(--spacing-df); border: 2px solid var(--separator-sc); padding: var(--spacing-bg); border-radius: var(--card-radius-lg); } .showcase2-cont { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .showcase2-pic { height: 100%; overflow: hidden; } .showcase2-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .showcases { display: flex; flex-flow: column nowrap; gap: var(--spacing-hg); } @media (min-width: 992px) { .showcases { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 70dvh; grid-row-gap: 8dvh; grid-column-gap: 0dvh; } } .showcase { position: relative; } @media (min-width: 992px) { .showcase { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: 1/-1; } .showcase:nth-child(odd) .showcase-pic { grid-column: 1/span 3; grid-row: auto; } .showcase:nth-child(odd) .showcase-cont { grid-column: 4/span 2; grid-row: auto; } .showcase:nth-child(even) .showcase-pic { grid-column: 3/span 3; grid-row: auto; } .showcase:nth-child(even) .showcase-cont { grid-column: 1/span 2; grid-row: auto; } } @media (min-width: 992px) { .showcase:nth-child(odd) .showcase-cont { padding-right: var(--spacing-bg); } } .showcase:nth-child(odd) .showcase-pic:after { background: repeating-linear-gradient(to left, var(--bg) 0%, var(--ab) 100%); padding-right: 0; } @media (min-width: 992px) { .showcase:nth-child(even) .showcase-cont { padding-left: var(--spacing-bg); } } .showcase:nth-child(even) .showcase-pic:after { background: repeating-linear-gradient(to right, var(--bg) 0%, var(--ab) 100%); padding-left: 0; } .showcase-pic { position: relative; } .showcase-pic:after { --height:72%; content: ""; display: block; width: 100%; height: var(--height); position: absolute; top: 50%; left: 50%; position: absolute; left: 0; top: 0; z-index: -1; border-top-left-radius: 198px; border-bottom-right-radius: 198px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; } .showcase-pic img { padding: var(--spacing-bg); width: 100%; height: 100%; object-fit: contain; } .showcase-cont { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); justify-content: center; z-index: 300; } .showcase-head { background: var(--gradient-header-pr); background-clip: text; color: transparent; } @-moz-document url-prefix() { .showcase-head { color: transparent; } } .showcase-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .showcase-meta { display: flex; flex-flow: row nowrap; gap: var(--spacing-mn); color: var(--tr); fill: var(--tr); font-size: var(--fs-sm); } .showcase-desc { color: var(--sc); } .showcase-pic { overflow: hidden; } /* ╭───────────────╮ │ MARK:⠀medias │ — Белая область слева картинка, справа текст ╰───────────────╯*/ .medias { background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-lg, var(--card-radius-lg)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-lg, var(--card-padding-lg)); gap: var(--card-gap-lg, var(--card-gap-lg)); } .medias h2, .medias .h2, .medias.lenses .media-head, .medias .files-head, .medias .placeholder-head, .medias .service-head, .medias .service-tmp-name, .medias .patient .split-head, .patient .medias .split-head { margin-bottom: var(--card-padding-df); } .medias.lenses h2 { text-align: center; color: var(--qt); } .media { display: flex; align-items: center; gap: var(--spacing-lg); } @media (min-width: 768px) { .media-pic, .media-cont { margin-bottom: var(--spacing-df); margin-top: var(--spacing-df); } } @media (max-width: 767.98px) { .media { flex-direction: column; padding-bottom: var(--spacing-bg); } } .media-pic { flex-shrink: 0; } .media-pic img { border-radius: var(--radius-sm); display: block; max-width: 350px; height: auto; } @media (max-width: 767.98px) { .media-pic img { width: 100%; max-width: unset; } } .media-cont { display: flex; flex-flow: column nowrap; gap: var(--card-gap-df); } .media-head { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .media-desc { margin: 0; } .medias._ordered { counter-reset: media-list-ordered 0; } .medias._ordered .media-head::before { counter-increment: media-list-ordered 1; content: counter(media-list-ordered, decimal-leading-zero); display: inline-block; margin-right: var(--spacing-tn); color: var(--br); } /* Запись к врачу ╭──────────────╮ │ MARK: book │ ╰──────────────╯*/ .book { min-height: 29rem; margin-top: var(--spacing-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background-color: var(--pic_col-bg, var(--card-bg)); border-radius: var(--pic_col-radius-bg, var(--card-radius-bg)); border: var(--pic_col-border, var(--card-border)); box-shadow: var(--pic_col-shadow, var(--card-shadow)); transition: var(--pic_col-transition, var(--card-transition)); } .book > *:last-child { padding: var(--pic_col-padding-bg, var(--card-padding-bg)); } .book-pic > img:first-child { width: 100%; height: 100%; object-fit: cover; } .book-form { display: flex; align-items: center; justify-content: center; background-image: url("/dist/css/../media/img/bg/pattern_pale.png"); background-size: 40%; background-position: 50% 50%; background-repeat: repeat; background-blend-mode: normal; } .book-form-inner { display: flex; flex-flow: column nowrap; gap: var(--spacing-lg); } .book-form .form { max-width: 384px; } /* ╭────────────────╮ │ MARK: filter │ ╰────────────────╯*/ .filter { width: 100%; display: flex; flex-flow: column nowrap; gap: var(--spacing-sm); } .filter-top > input[type=search] { width: 100%; } .filter-bot { display: flex; gap: var(--spacing-tn); } /* ╭────────────────╮ │ MARK: doctor │ ╰────────────────╯*/ .doctor { position: relative; } .doctor-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .sect.doctor .doctor { display: flex; flex-flow: column nowrap; } .sect.doctor .doctor-desc { flex-grow: 1; color: var(--sc); } .sect.doctor .doctor-pic img { max-width: 100%; object-fit: contain; mask-image: linear-gradient(to bottom, black 68%, transparent 85%); } .sect.doctors-scrollable .scroll-item { width: var(--doctor-col-width); } .scroll-item, .sect.doctors { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--doctor-col-width), 1fr)); column-gap: var(--spacing-lg); } .scroll-item .doctor, .sect.doctors .doctor { display: grid; grid-template-rows: 400px min-content auto min-content; gap: var(--spacing-sm); margin-bottom: calc(var(--grid-col-gap) * 3); } .scroll-item .doctor, .sect.doctors .doctor { position: relative; } .scroll-item .doctor-link::before, .sect.doctors .doctor-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .scroll-item .doctor-desc, .sect.doctors .doctor-desc { margin-bottom: var(--spacing-sm); } .scroll-item .doctor-pic, .sect.doctors .doctor-pic { position: relative; display: flex; align-items: center; justify-content: center; } .scroll-item .doctor-pic img, .sect.doctors .doctor-pic img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; height: 100%; max-width: 100%; mask-image: linear-gradient(to bottom, black 78%, transparent 90%); } .scroll-item .doctor-pic::after, .sect.doctors .doctor-pic::after { content: ""; display: block; width: 100%; height: 52%; background: radial-gradient(circle at 40% bottom, var(--surface-1) 35%, var(--br2-pure) 100%); border-radius: calc(var(--radius-md) * 2); border-bottom-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); opacity: 0.5; transition: opacity 300ms ease-in-out; z-index: -1; } .scroll-item .doctor:hover .doctor-pic::after, .sect.doctors .doctor:hover .doctor-pic::after { opacity: 1; } @media (max-width: 767.98px) { .scroll-item .doctor .bg, .sect.doctors .doctor .bg { text-align: center; } } @media (min-width: 1200px) { .scroll-item .doctor .bg, .sect.doctors .doctor .bg { display: flex; flex-flow: row nowrap; gap: var(--spacing-tn); } } .scroll-item .doctor { margin-bottom: var(--spacing-tn); } .doctor-detail .doctor { --folder-tab-height-doctor: 48px; --fs-doctor-name: var(--fs-hg); } @media (min-width: 680px) { .doctor-detail .doctor { --fs-doctor-name: var(--h1); } } .doctor-detail .doctor { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); align-items: center; } @media (min-width: 1200px) { .doctor-detail .doctor { align-items: start; grid-template-columns: 3fr 3fr; row-gap: var(--grid-col-gap); column-gap: calc(3 * var(--grid-col-gap)); display: grid; } } .doctor-detail .doctor-pic { max-width: 800px; min-width: 320px; } @media (min-width: 1400px) { .doctor-detail .doctor-pic { position: sticky !important; top: var(--sect-gap); } } .doctor-detail .doctor-pic-inner { padding: unset; aspect-ratio: 1/1; position: relative; } .doctor-detail .doctor-pic-inner::after { background: radial-gradient(ellipse at center, white 40%, transparent 65%); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; aspect-ratio: 1/1; content: ""; display: block; } .doctor-detail .doctor-pic-inner::before { position: absolute; top: 0; left: 0; content: ""; background-image: url("/dist/css/../media/svg/animated_circle_comfort.svg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-blend-mode: multiply; } .doctor-detail .doctor-pic-inner .play-circle { width: var(--arrow-play-size); height: var(--arrow-play-size); position: relative; display: block; cursor: pointer; } .doctor-detail .doctor-pic-inner .play-circle:before { content: ""; display: block; width: 200%; height: 200%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--ab); border-radius: 50%; box-shadow: var(--card-shadow); } .doctor-detail .doctor-pic-inner .play-circle::after { clip-path: polygon(0 0, 0% 50%, 0 100%, 80% 50%); background: var(--vo); transition: background-color 200ms ease; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-30%, -50%); position: absolute; } .doctor-detail .doctor-pic-inner .play-circle:hover::after { background: var(--br); } .doctor-detail .doctor-pic-inner .play-circle { position: absolute; top: 86%; left: 55%; transform: translate(-100%, -50%); z-index: 500; } .doctor-detail .doctor-sect { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); margin-bottom: var(--sect-gap); } .doctor-detail .doctor-sect .events { padding-top: 0; padding-bottom: 0; } .doctor-detail .doctor-sect .event-desc { font-size: var(--fs-df); } .doctor-detail .doctor-cont { text-wrap: balance; max-width: 40rem; display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .doctor-detail .doctor-cont .folder { margin-bottom: var(--sect-gap); } .doctor-detail .doctor-cont .folder .pil { background: linear-gradient(125deg, #e0ebf3 0%, #fff 50%, #e0ebf3 100%); background-size: 200% 200%; animation: gradient-shift 4s linear infinite; } @keyframes gradient-shift { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } } .doctor-detail .doctor-cont .folder .pil { height: 48px; } .doctor-detail .doctor-name { font-size: var(--fs-doctor-name); margin-top: var(--spacing-df); margin-bottom: var(--spacing-df); } .doctor-detail .doctor-name + span .pil1 { font-size: var(--fs-md); background: linear-gradient(125deg, #e0ebf3 0%, #fff 50%, #e0ebf3 100%); background-size: 200% 200%; animation: gradient-shift 4s linear infinite; } @keyframes gradient-shift { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } } .doctor-detail .doctor-desc { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 0; } .doctor-detail .doctor-meta { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } .doctor-detail .doctor .folder { background: linear-gradient(140deg, #fff 60%, #f3f8f8); } @media (min-width: 768px) { .doctor-detail .doctor .folder { padding-right: var(--spacing-bg); padding-left: var(--spacing-bg); } } .doctor-detail .doctor .folder { border-top-left-radius: 0; gap: calc(var(--spacing-df) * 1.25); margin-top: var(--folder-tab-height-doctor); position: relative; } .doctor-detail .doctor .folder .folder-tabs { --tab-height: var(--folder-tab-height-doctor); } .doctor-detail .doctor .folder .breadcrumbs svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--br2-rich); fill: var(--br2-rich); vertical-align: -0.08rem; } .doctor-detail .doctor-cont:has(.folder-tabs) { border-top-left-radius: unset; } /* ╭────────────────╮ │ MARK: places │ ╰────────────────╯*/ @media (max-width: 767.98px) { .place { display: flex; flex-flow: column nowrap; gap: var(--spacing-df) var(--spacing-df); } } .place { gap: var(--grid-col-gap); } @media (min-width: 768px) { .place { display: grid; grid-template-columns: 2fr 2fr; } } .place-zip, .place-schedule-head { color: var(--tr); } .place-address { background: var(--gradient-header-pr); background-clip: text; color: transparent; } @-moz-document url-prefix() { .place-address { color: transparent; } } .place-schedule { line-height: 1.45; } .place-meta { display: flex; flex-flow: row nowrap; gap: var(--button-gap); } .place-state { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .place > * { min-height: 0; } .place-pic { display: block; text-decoration: none; height: 100%; overflow: hidden; } .place-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .place-pic { background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: 0; gap: var(--card-gap-df, var(--card-gap-df)); } @media (min-width: 768px) { .place-info { border-bottom-right-radius: var(--radius-sm); } .place-pic { border-bottom-left-radius: var(--radius-sm); } } :is(.place, .feature) .pil { background: linear-gradient(125deg, #e0ebf3 0%, #fff 50%, #e0ebf3 100%); background-size: 200% 200%; animation: gradient-shift 4s linear infinite; } @keyframes gradient-shift { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } } .map-frame { height: 60dvh; overflow: hidden; border-radius: var(--radius-df); box-shadow: var(--map-shadow); } .map-balloon-desc { font-family: "m", system-ui, -apple-system, sans-serif; font-size: var(--fs-mn); line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; } .map-balloon-link { line-height: 1.25; font-weight: 550; font-variation-settings: "wght" 550, "wdth" 100, "opsz" 14; font-size: var(--fs-tn); } .sect.places + .map { margin-top: calc(-0.5 * var(--sect-gap)); } .cardmedia { --bg:var(--surface-0); --pic-height:60%; position: relative; display: flex; flex-flow: column nowrap; overflow: hidden; background-color: var(--card-bg, var(--card-bg)); border-radius: var(--card-radius-df, var(--card-radius-df)); border: var(--card-border, var(--card-border)); box-shadow: var(--card-shadow, var(--card-shadow)); transition: var(--card-transition, var(--card-transition)); padding: var(--card-padding-df, var(--card-padding-df)); gap: var(--card-gap-df, var(--card-gap-df)); } .cardmedia { position: relative; } .cardmedia-link::before { content: ""; position: absolute; inset: 0; z-index: 400; } .cardmedia { gap: var(--spacing-sm) var(--spacing-tn); background-color: var(--bg); } .cardmedia-pic { position: absolute; width: 100%; height: 50%; display: flex; justify-content: flex-end; } .cardmedia-pic img, .cardmedia-pic svg[data-icon] { width: unset; height: unset; max-width: 100%; max-height: 100%; } .cardmedia-pic img { object-fit: contain; } .cardmedia-pic svg { overflow: visible; } .cardmedia._pic-clip .cardmedia-pic { right: 0; bottom: 0; } .cardmedia._pic-clip .cardmedia-pic img { object-fit: cover; } .cardmedia._pic-gap .cardmedia-pic { bottom: var(--spacing-sm); right: var(--spacing-sm); } .cardmedia-head { overflow: hidden; padding-bottom: 0.1rem; text-overflow: ellipsis; } .cardmedia-desc { color: var(--text-body); overflow: hidden; z-index: 300; } .cardmedia svg[data-icon] { color: var(--br2-soft); fill: var(--br2-soft); } .cardmedia:is(:hover, :active) svg[data-icon] { color: var(--br2-pure); fill: var(--br2-pure); } .cardmedias { display: grid; gap: var(--grid-col-gap); grid-auto-rows: 1fr; aspect-ratio: 2/5; grid-template-columns: repeat(2, 1fr); } .cardmedias > :nth-child(1) { grid-column: span 2; grid-row: span 3; } .cardmedias > :nth-child(2) { grid-column: span 2; } @media (min-width: 768px) and (max-width: 991.98px) { .cardmedias { grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr); aspect-ratio: 3/3; } .cardmedias > :nth-child(1) { grid-column: span 2; grid-row: span 3; } .cardmedias > :nth-child(2) { grid-column: span 1; grid-row: span 3; } .cardmedias > :nth-child(3) { grid-column: span 2; grid-row: span 1; } .cardmedias > :nth-child(4) { grid-column: span 1; grid-row: span 2; } } @media (min-width: 992px) { .cardmedias { grid-template-columns: repeat(4, 1fr); aspect-ratio: 4/3; } .cardmedias > :nth-child(1) { grid-column: span 2; grid-row: span 3; } .cardmedias > :nth-child(2) { grid-column: span 2; } } @media (min-width: 1200px) { .cardmedias { grid-template-columns: repeat(5, 1fr); aspect-ratio: 5/2; } .cardmedias > :nth-child(1) { grid-column: span 2; grid-row: span 2; } .cardmedias > :nth-child(2) { grid-column: span 2; } } .page-404 { --stripe-width: 20%; --stripe-center: 45%; --stripe-transition-width:8%; --stripe-2: calc(var(--stripe-center) - var(--stripe-width)/2); --stripe-3: calc(var(--stripe-center) + var(--stripe-width)/2); --stripe-1: calc(var(--stripe-2) - var(--stripe-transition-width)); --stripe-4: calc(var(--stripe-3) + var(--stripe-transition-width)); background: linear-gradient(135deg, var(--button-secondary-bg) var(--stripe-1), var(--ab) var(--stripe-2), var(--ab) var(--stripe-3), var(--button-secondary-bg) var(--stripe-4)); background-position: cover; background-repeat: no-repeat; background-attachment: fixed; } .sect-404 { max-width: 33rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; } .sect-404 article { display: flex; flex-flow: column nowrap; gap: var(--spacing-lg); margin-top: var(--spacing-bg); } /*Fluid scalling of all site*/ /*https://css-tricks.com/snippets/css/fluid-typography/*/ /*# sourceMappingURL=core.css.map */ /* End */ /* Start:/bitrix/templates/glaz/assets/css/main.css?1788958977100741*/ /*! * Button visually impaired v1.0.0 (https://bvi.isvek.ru/) * Copyright 2014-2021 * Licensed under MIT (https://github.com/veks/button-visually-impaired-javascript/blob/master/LICENSE.md) */ html:not(.bvi-panel) *, html:not(.bvi-panel) ::after, html:not(.bvi-panel) ::before { box-sizing: border-box; } html body .bvi-panel { font-family: Arial, serif !important; font-size: 16px !important; padding: 8px; color: black; top: 0; left: 0; right: 0; letter-spacing: 0; position: relative; text-shadow: none; line-height: normal; border: 0; margin-bottom: 4.8px; background-color: #f7f7f7; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); z-index: 999999 !important; } html body .bvi-panel * { font-family: Arial, serif !important; font-size: 16px !important; } html body .bvi-panel.bvi-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 999999; } html body .bvi-panel.bvi-panel-hide { display: none; } html body .bvi-panel a { color: black !important; outline: 0 !important; background-color: transparent !important; text-decoration: none !important; } html body .bvi-panel a:hover, html body .bvi-panel a:focus { color: black !important; outline: 0 !important; background-color: transparent !important; text-decoration: none !important; } html body .bvi-panel a.bvi-link { display: inline-block; line-height: 1.5; font-size: 14px !important; color: #212529 !important; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: #e0e0e0 !important; border: 1px solid #c6c6c6 !important; padding: 6px 12px; border-radius: 4px; position: relative; font-weight: bold; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } html body .bvi-panel a.bvi-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } html body .bvi-panel a.bvi-link:hover, html body .bvi-panel a.bvi-link:focus { background-color: #b6b6b6 !important; } html body .bvi-panel a.bvi-link.active { color: #212529 !important; background-color: #b6b6b6 !important; } html body .bvi-panel a.bvi-link.bvi-theme-white { background-color: #ffffff !important; color: #000000 !important; } html body .bvi-panel a.bvi-link.bvi-theme-black { background-color: #000000 !important; color: #ffffff !important; } html body .bvi-panel a.bvi-link.bvi-theme-blue { background-color: #9DD1FF !important; color: #063462 !important; } html body .bvi-panel a.bvi-link.bvi-theme-brown { background-color: #F7F3D6 !important; color: #4D4B43 !important; } html body .bvi-panel a.bvi-link.bvi-theme-green { background-color: #3B2716 !important; color: #A9E44D !important; } html body .bvi-panel .bvi-blocks { margin: 0 auto; text-align: center; display: flex; flex-flow: row wrap; } html body .bvi-panel .bvi-blocks.bvi-block-start { justify-content: flex-start; } html body .bvi-panel .bvi-blocks.bvi-block-center { justify-content: center; } html body .bvi-panel .bvi-blocks.bvi-block-end { justify-content: flex-end; } html body .bvi-panel .bvi-block { padding: 11.008px 15.008px; } html body .bvi-panel .bvi-block .bvi-block-title { text-align: center; font-weight: 600 !important; font-size: 16px !important; display: block; margin-bottom: 12.8px; } html body .bvi-panel .bvi-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; visibility: hidden; z-index: 1050; outline: 0; opacity: 0; background: rgba(0, 0, 0, 0.5); -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; } html body .bvi-panel .bvi-modal.show { visibility: visible; opacity: 1; } html body .bvi-panel .bvi-modal .bvi-modal-dialog { max-width: 500px; margin: 28px auto; display: flex; align-items: center; height: calc(100% - 56px); pointer-events: none; } html body .bvi-panel .bvi-modal .bvi-modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4.8px; outline: 0; max-height: 100%; overflow: hidden; } html body .bvi-panel .bvi-modal .bvi-modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 12.8px 12.8px; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(4.8px - 1px); border-top-right-radius: calc(4.8px - 1px); } html body .bvi-panel .bvi-modal .bvi-modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 20px; font-weight: 600; color: black; } html body .bvi-panel .bvi-modal .bvi-modal-body { position: relative; flex: 1 1 auto; padding: 16px; overflow-y: auto; } html body .bvi-panel .bvi-modal .bvi-modal-body::-webkit-scrollbar { width: 8px; background-color: transparent; opacity: 0; } html body .bvi-panel .bvi-modal .bvi-modal-body::-webkit-scrollbar-thumb { background-color: #dee2e6; border-radius: 4px; } html body .bvi-panel .bvi-modal .bvi-modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 12.8px 12.8px; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(4.8px - 1px); border-bottom-left-radius: calc(4.8px - 1px); } html body .bvi-panel .bvi-modal .bvi-modal-close { float: right; font-size: 19.2px !important; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 #fff; opacity: 0.5; } html body .bvi-panel .bvi-modal .bvi-modal-close:focus, html body .bvi-panel .bvi-modal .bvi-modal-close:hover { cursor: pointer; opacity: 0.75; } body.bvi-active.bvi-noscroll { overflow: hidden !important; } body .bvi-body { padding: 0 8px; } body .bvi-body[data-bvi-theme=white]:not(.bvi-no-styles) { background-color: #ffffff !important; color: #000000 !important; fill: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) { background-color: #ffffff !important; color: #000000 !important; fill: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-speech-link, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-speech-text { border-color: #000000; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles) { color: #000000 !important; background-color: transparent !important; text-underline: none !important; outline: 0 !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled { color: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(0, 0, 0, 0.5) !important; pointer-events: none; cursor: no-drop; text-decoration: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled:focus { color: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(0, 0, 0, 0.5) !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):hover { color: #ffffff !important; background-color: #000000 !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):focus { color: #000000 !important; background-color: #ffffff !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :checked:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :default:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :disabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :empty:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :enabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :first-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :first-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :focus:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :indeterminate:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :hover:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :link:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :nth-last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :nth-last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :nth-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :only-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :only-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :optional:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :read-write:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :required:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :root:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :target:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :valid:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :visited:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :first-child:first-letter:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) :default:not(.bvi-no-styles) { background-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; border-color: #000000 !important; color: #000000 !important; fill: #000000 !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles)::after:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #000000 !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles)::before:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #000000 !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles)::selection:not(.bvi-no-styles) { background-color: #000000 !important; color: #ffffff !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) a:not(.bvi-no-styles) { outline: 0 !important; color: #000000 !important; background-color: transparent !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) a:not(.bvi-no-styles).active { color: #000000 !important; background-color: #ffffff !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles) { color: #ffffff !important; background-color: #000000 !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):after { background-color: rgba(255, 255, 255, 0) !important; color: #ffffff !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):before { background-color: rgba(255, 255, 255, 0) !important; color: #ffffff !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) input[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) input[type=button]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button[type=button]:not(.bvi-no-styles) { color: #ffffff !important; background-color: #000000 !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button:hover.active, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles).active { color: #ffffff !important; background-color: #000000 !important; } body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button:hover:hover, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=white] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles):hover { color: #ffffff !important; background-color: #000000 !important; } body .bvi-body[data-bvi-theme=black]:not(.bvi-no-styles) { background-color: #000000 !important; color: #ffffff !important; fill: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) { background-color: #000000 !important; color: #ffffff !important; fill: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-speech-link, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-speech-text { border-color: #ffffff; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles) { color: #ffffff !important; background-color: transparent !important; text-underline: none !important; outline: 0 !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled { color: rgba(255, 255, 255, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; pointer-events: none; cursor: no-drop; text-decoration: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled:focus { color: rgba(255, 255, 255, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):hover { color: #000000 !important; background-color: #ffffff !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):focus { color: #ffffff !important; background-color: #000000 !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :checked:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :default:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :disabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :empty:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :enabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :first-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :first-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :focus:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :indeterminate:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :hover:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :link:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :nth-last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :nth-last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :nth-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :only-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :only-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :optional:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :read-write:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :required:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :root:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :target:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :valid:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :visited:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :first-child:first-letter:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) :default:not(.bvi-no-styles) { background-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; border-color: #ffffff !important; color: #ffffff !important; fill: #ffffff !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles)::after:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles)::before:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles)::selection:not(.bvi-no-styles) { background-color: #ffffff !important; color: #000000 !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) a:not(.bvi-no-styles) { outline: 0 !important; color: #ffffff !important; background-color: transparent !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) a:not(.bvi-no-styles).active { color: #ffffff !important; background-color: #000000 !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles) { color: #000000 !important; background-color: #ffffff !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):after { background-color: rgba(255, 255, 255, 0) !important; color: #000000 !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):before { background-color: rgba(255, 255, 255, 0) !important; color: #000000 !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) input[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) input[type=button]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button[type=button]:not(.bvi-no-styles) { color: #000000 !important; background-color: #ffffff !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button:hover.active, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles).active { color: #000000 !important; background-color: #ffffff !important; } body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button:hover:hover, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=black] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles):hover { color: #000000 !important; background-color: #ffffff !important; } body .bvi-body[data-bvi-theme=blue]:not(.bvi-no-styles) { background-color: #9DD1FF !important; color: #063462 !important; fill: #063462 !important; border-color: #063462 !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) { background-color: #9DD1FF !important; color: #063462 !important; fill: #063462 !important; border-color: #063462 !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-speech-link, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-speech-text { border-color: #063462; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles) { color: #063462 !important; background-color: transparent !important; text-underline: none !important; outline: 0 !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled { color: rgba(6, 52, 98, 0.5) !important; border: 1px solid rgba(6, 52, 98, 0.5) !important; pointer-events: none; cursor: no-drop; text-decoration: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled:focus { color: rgba(6, 52, 98, 0.5) !important; border: 1px solid rgba(6, 52, 98, 0.5) !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):hover { color: #9DD1FF !important; background-color: #063462 !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):focus { color: #063462 !important; background-color: #9DD1FF !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :checked:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :default:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :disabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :empty:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :enabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :first-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :first-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :focus:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :indeterminate:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :hover:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :link:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :nth-last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :nth-last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :nth-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :only-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :only-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :optional:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :read-write:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :required:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :root:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :target:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :valid:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :visited:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :first-child:first-letter:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) :default:not(.bvi-no-styles) { background-color: #9DD1FF !important; box-shadow: none !important; text-shadow: none !important; border-color: #063462 !important; color: #063462 !important; fill: #063462 !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles)::after:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #063462 !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles)::before:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #063462 !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles)::selection:not(.bvi-no-styles) { background-color: #063462 !important; color: #9DD1FF !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) a:not(.bvi-no-styles) { outline: 0 !important; color: #063462 !important; background-color: transparent !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) a:not(.bvi-no-styles).active { color: #063462 !important; background-color: #9DD1FF !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles) { color: #9DD1FF !important; background-color: #063462 !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):after { background-color: rgba(255, 255, 255, 0) !important; color: #9DD1FF !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):before { background-color: rgba(255, 255, 255, 0) !important; color: #9DD1FF !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) input[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) input[type=button]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button[type=button]:not(.bvi-no-styles) { color: #9DD1FF !important; background-color: #063462 !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button:hover.active, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles).active { color: #9DD1FF !important; background-color: #063462 !important; } body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button:hover:hover, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=blue] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles):hover { color: #9DD1FF !important; background-color: #063462 !important; } body .bvi-body[data-bvi-theme=brown]:not(.bvi-no-styles) { background-color: #F7F3D6 !important; color: #4D4B43 !important; fill: #4D4B43 !important; border-color: #4D4B43 !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) { background-color: #F7F3D6 !important; color: #4D4B43 !important; fill: #4D4B43 !important; border-color: #4D4B43 !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-speech-link, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-speech-text { border-color: #4D4B43; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles) { color: #4D4B43 !important; background-color: transparent !important; text-underline: none !important; outline: 0 !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled { color: rgba(77, 75, 67, 0.5) !important; border: 1px solid rgba(77, 75, 67, 0.5) !important; pointer-events: none; cursor: no-drop; text-decoration: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled:focus { color: rgba(77, 75, 67, 0.5) !important; border: 1px solid rgba(77, 75, 67, 0.5) !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):hover { color: #F7F3D6 !important; background-color: #4D4B43 !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):focus { color: #4D4B43 !important; background-color: #F7F3D6 !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :checked:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :default:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :disabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :empty:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :enabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :first-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :first-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :focus:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :indeterminate:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :hover:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :link:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :nth-last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :nth-last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :nth-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :only-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :only-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :optional:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :read-write:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :required:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :root:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :target:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :valid:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :visited:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :first-child:first-letter:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) :default:not(.bvi-no-styles) { background-color: #F7F3D6 !important; box-shadow: none !important; text-shadow: none !important; border-color: #4D4B43 !important; color: #4D4B43 !important; fill: #4D4B43 !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles)::after:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #4D4B43 !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles)::before:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #4D4B43 !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles)::selection:not(.bvi-no-styles) { background-color: #4D4B43 !important; color: #F7F3D6 !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) a:not(.bvi-no-styles) { outline: 0 !important; color: #4D4B43 !important; background-color: transparent !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) a:not(.bvi-no-styles).active { color: #4D4B43 !important; background-color: #F7F3D6 !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles) { color: #F7F3D6 !important; background-color: #4D4B43 !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):after { background-color: rgba(255, 255, 255, 0) !important; color: #F7F3D6 !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):before { background-color: rgba(255, 255, 255, 0) !important; color: #F7F3D6 !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) input[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) input[type=button]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button[type=button]:not(.bvi-no-styles) { color: #F7F3D6 !important; background-color: #4D4B43 !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button:hover.active, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles).active { color: #F7F3D6 !important; background-color: #4D4B43 !important; } body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button:hover:hover, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=brown] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles):hover { color: #F7F3D6 !important; background-color: #4D4B43 !important; } body .bvi-body[data-bvi-theme=green]:not(.bvi-no-styles) { background-color: #3B2716 !important; color: #A9E44D !important; fill: #A9E44D !important; border-color: #A9E44D !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) { background-color: #3B2716 !important; color: #A9E44D !important; fill: #A9E44D !important; border-color: #A9E44D !important; box-shadow: none !important; text-shadow: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-speech-link, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-speech-text { border-color: #A9E44D; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles) { color: #A9E44D !important; background-color: transparent !important; text-underline: none !important; outline: 0 !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled { color: rgba(169, 228, 77, 0.5) !important; border: 1px solid rgba(169, 228, 77, 0.5) !important; pointer-events: none; cursor: no-drop; text-decoration: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles).disabled:focus { color: rgba(169, 228, 77, 0.5) !important; border: 1px solid rgba(169, 228, 77, 0.5) !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):hover { color: #3B2716 !important; background-color: #A9E44D !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) .bvi-link:not(.bvi-no-styles):focus { color: #A9E44D !important; background-color: #3B2716 !important; text-underline: none !important; text-decoration: none !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :checked:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :default:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :disabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :empty:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :enabled:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :first-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :first-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :focus:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :indeterminate:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :hover:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :link:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :nth-last-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :nth-last-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :nth-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :only-child:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :only-of-type:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :optional:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :read-write:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :required:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :root:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :target:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :valid:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :visited:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :first-child:first-letter:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) :default:not(.bvi-no-styles) { background-color: #3B2716 !important; box-shadow: none !important; text-shadow: none !important; border-color: #A9E44D !important; color: #A9E44D !important; fill: #A9E44D !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles)::after:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #A9E44D !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles)::before:not(.bvi-no-styles) { background-color: rgba(255, 255, 255, 0) !important; color: #A9E44D !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles)::selection:not(.bvi-no-styles) { background-color: #A9E44D !important; color: #3B2716 !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) a:not(.bvi-no-styles) { outline: 0 !important; color: #A9E44D !important; background-color: transparent !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) a:not(.bvi-no-styles).active { color: #A9E44D !important; background-color: #3B2716 !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles) { color: #3B2716 !important; background-color: #A9E44D !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):after { background-color: rgba(255, 255, 255, 0) !important; color: #3B2716 !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) a:not(.bvi-no-styles):hover:not(.bvi-no-styles):before { background-color: rgba(255, 255, 255, 0) !important; color: #3B2716 !important; border-color: transparent !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) input[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) input[type=button]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button[type=submit]:not(.bvi-no-styles), body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button[type=button]:not(.bvi-no-styles) { color: #3B2716 !important; background-color: #A9E44D !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button:hover.active, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles).active, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles).active { color: #3B2716 !important; background-color: #A9E44D !important; } body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button:hover:hover, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) input[type=button]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) input[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button[type=submit]:hover:not(.bvi-no-styles):hover, body .bvi-body[data-bvi-theme=green] *:not(.bvi-no-styles) button[type=button]:hover:not(.bvi-no-styles):hover { color: #3B2716 !important; background-color: #A9E44D !important; } body .bvi-body[data-bvi-fontsize="40"] * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="40"] * h1, body .bvi-body[data-bvi-fontsize="40"] * h1 * { font-size: 47px !important; } body .bvi-body[data-bvi-fontsize="40"] * h2, body .bvi-body[data-bvi-fontsize="40"] * h2 * { font-size: 46px !important; } body .bvi-body[data-bvi-fontsize="40"] * h3, body .bvi-body[data-bvi-fontsize="40"] * h3 * { font-size: 45px !important; } body .bvi-body[data-bvi-fontsize="40"] * h4, body .bvi-body[data-bvi-fontsize="40"] * h4 * { font-size: 44px !important; } body .bvi-body[data-bvi-fontsize="40"] * h5, body .bvi-body[data-bvi-fontsize="40"] * h5 * { font-size: 43px !important; } body .bvi-body[data-bvi-fontsize="40"] * h6, body .bvi-body[data-bvi-fontsize="40"] * h6 * { font-size: 42px !important; } body .bvi-body[data-bvi-fontsize="39"] * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="39"] * h1, body .bvi-body[data-bvi-fontsize="39"] * h1 * { font-size: 46px !important; } body .bvi-body[data-bvi-fontsize="39"] * h2, body .bvi-body[data-bvi-fontsize="39"] * h2 * { font-size: 45px !important; } body .bvi-body[data-bvi-fontsize="39"] * h3, body .bvi-body[data-bvi-fontsize="39"] * h3 * { font-size: 44px !important; } body .bvi-body[data-bvi-fontsize="39"] * h4, body .bvi-body[data-bvi-fontsize="39"] * h4 * { font-size: 43px !important; } body .bvi-body[data-bvi-fontsize="39"] * h5, body .bvi-body[data-bvi-fontsize="39"] * h5 * { font-size: 42px !important; } body .bvi-body[data-bvi-fontsize="39"] * h6, body .bvi-body[data-bvi-fontsize="39"] * h6 * { font-size: 41px !important; } body .bvi-body[data-bvi-fontsize="38"] * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="38"] * h1, body .bvi-body[data-bvi-fontsize="38"] * h1 * { font-size: 45px !important; } body .bvi-body[data-bvi-fontsize="38"] * h2, body .bvi-body[data-bvi-fontsize="38"] * h2 * { font-size: 44px !important; } body .bvi-body[data-bvi-fontsize="38"] * h3, body .bvi-body[data-bvi-fontsize="38"] * h3 * { font-size: 43px !important; } body .bvi-body[data-bvi-fontsize="38"] * h4, body .bvi-body[data-bvi-fontsize="38"] * h4 * { font-size: 42px !important; } body .bvi-body[data-bvi-fontsize="38"] * h5, body .bvi-body[data-bvi-fontsize="38"] * h5 * { font-size: 41px !important; } body .bvi-body[data-bvi-fontsize="38"] * h6, body .bvi-body[data-bvi-fontsize="38"] * h6 * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="37"] * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="37"] * h1, body .bvi-body[data-bvi-fontsize="37"] * h1 * { font-size: 44px !important; } body .bvi-body[data-bvi-fontsize="37"] * h2, body .bvi-body[data-bvi-fontsize="37"] * h2 * { font-size: 43px !important; } body .bvi-body[data-bvi-fontsize="37"] * h3, body .bvi-body[data-bvi-fontsize="37"] * h3 * { font-size: 42px !important; } body .bvi-body[data-bvi-fontsize="37"] * h4, body .bvi-body[data-bvi-fontsize="37"] * h4 * { font-size: 41px !important; } body .bvi-body[data-bvi-fontsize="37"] * h5, body .bvi-body[data-bvi-fontsize="37"] * h5 * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="37"] * h6, body .bvi-body[data-bvi-fontsize="37"] * h6 * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="36"] * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="36"] * h1, body .bvi-body[data-bvi-fontsize="36"] * h1 * { font-size: 43px !important; } body .bvi-body[data-bvi-fontsize="36"] * h2, body .bvi-body[data-bvi-fontsize="36"] * h2 * { font-size: 42px !important; } body .bvi-body[data-bvi-fontsize="36"] * h3, body .bvi-body[data-bvi-fontsize="36"] * h3 * { font-size: 41px !important; } body .bvi-body[data-bvi-fontsize="36"] * h4, body .bvi-body[data-bvi-fontsize="36"] * h4 * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="36"] * h5, body .bvi-body[data-bvi-fontsize="36"] * h5 * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="36"] * h6, body .bvi-body[data-bvi-fontsize="36"] * h6 * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="35"] * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="35"] * h1, body .bvi-body[data-bvi-fontsize="35"] * h1 * { font-size: 42px !important; } body .bvi-body[data-bvi-fontsize="35"] * h2, body .bvi-body[data-bvi-fontsize="35"] * h2 * { font-size: 41px !important; } body .bvi-body[data-bvi-fontsize="35"] * h3, body .bvi-body[data-bvi-fontsize="35"] * h3 * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="35"] * h4, body .bvi-body[data-bvi-fontsize="35"] * h4 * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="35"] * h5, body .bvi-body[data-bvi-fontsize="35"] * h5 * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="35"] * h6, body .bvi-body[data-bvi-fontsize="35"] * h6 * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="34"] * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="34"] * h1, body .bvi-body[data-bvi-fontsize="34"] * h1 * { font-size: 41px !important; } body .bvi-body[data-bvi-fontsize="34"] * h2, body .bvi-body[data-bvi-fontsize="34"] * h2 * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="34"] * h3, body .bvi-body[data-bvi-fontsize="34"] * h3 * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="34"] * h4, body .bvi-body[data-bvi-fontsize="34"] * h4 * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="34"] * h5, body .bvi-body[data-bvi-fontsize="34"] * h5 * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="34"] * h6, body .bvi-body[data-bvi-fontsize="34"] * h6 * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="33"] * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="33"] * h1, body .bvi-body[data-bvi-fontsize="33"] * h1 * { font-size: 40px !important; } body .bvi-body[data-bvi-fontsize="33"] * h2, body .bvi-body[data-bvi-fontsize="33"] * h2 * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="33"] * h3, body .bvi-body[data-bvi-fontsize="33"] * h3 * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="33"] * h4, body .bvi-body[data-bvi-fontsize="33"] * h4 * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="33"] * h5, body .bvi-body[data-bvi-fontsize="33"] * h5 * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="33"] * h6, body .bvi-body[data-bvi-fontsize="33"] * h6 * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="32"] * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="32"] * h1, body .bvi-body[data-bvi-fontsize="32"] * h1 * { font-size: 39px !important; } body .bvi-body[data-bvi-fontsize="32"] * h2, body .bvi-body[data-bvi-fontsize="32"] * h2 * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="32"] * h3, body .bvi-body[data-bvi-fontsize="32"] * h3 * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="32"] * h4, body .bvi-body[data-bvi-fontsize="32"] * h4 * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="32"] * h5, body .bvi-body[data-bvi-fontsize="32"] * h5 * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="32"] * h6, body .bvi-body[data-bvi-fontsize="32"] * h6 * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="31"] * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="31"] * h1, body .bvi-body[data-bvi-fontsize="31"] * h1 * { font-size: 38px !important; } body .bvi-body[data-bvi-fontsize="31"] * h2, body .bvi-body[data-bvi-fontsize="31"] * h2 * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="31"] * h3, body .bvi-body[data-bvi-fontsize="31"] * h3 * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="31"] * h4, body .bvi-body[data-bvi-fontsize="31"] * h4 * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="31"] * h5, body .bvi-body[data-bvi-fontsize="31"] * h5 * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="31"] * h6, body .bvi-body[data-bvi-fontsize="31"] * h6 * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="30"] * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="30"] * h1, body .bvi-body[data-bvi-fontsize="30"] * h1 * { font-size: 37px !important; } body .bvi-body[data-bvi-fontsize="30"] * h2, body .bvi-body[data-bvi-fontsize="30"] * h2 * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="30"] * h3, body .bvi-body[data-bvi-fontsize="30"] * h3 * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="30"] * h4, body .bvi-body[data-bvi-fontsize="30"] * h4 * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="30"] * h5, body .bvi-body[data-bvi-fontsize="30"] * h5 * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="30"] * h6, body .bvi-body[data-bvi-fontsize="30"] * h6 * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="29"] * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="29"] * h1, body .bvi-body[data-bvi-fontsize="29"] * h1 * { font-size: 36px !important; } body .bvi-body[data-bvi-fontsize="29"] * h2, body .bvi-body[data-bvi-fontsize="29"] * h2 * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="29"] * h3, body .bvi-body[data-bvi-fontsize="29"] * h3 * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="29"] * h4, body .bvi-body[data-bvi-fontsize="29"] * h4 * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="29"] * h5, body .bvi-body[data-bvi-fontsize="29"] * h5 * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="29"] * h6, body .bvi-body[data-bvi-fontsize="29"] * h6 * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="28"] * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="28"] * h1, body .bvi-body[data-bvi-fontsize="28"] * h1 * { font-size: 35px !important; } body .bvi-body[data-bvi-fontsize="28"] * h2, body .bvi-body[data-bvi-fontsize="28"] * h2 * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="28"] * h3, body .bvi-body[data-bvi-fontsize="28"] * h3 * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="28"] * h4, body .bvi-body[data-bvi-fontsize="28"] * h4 * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="28"] * h5, body .bvi-body[data-bvi-fontsize="28"] * h5 * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="28"] * h6, body .bvi-body[data-bvi-fontsize="28"] * h6 * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="27"] * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="27"] * h1, body .bvi-body[data-bvi-fontsize="27"] * h1 * { font-size: 34px !important; } body .bvi-body[data-bvi-fontsize="27"] * h2, body .bvi-body[data-bvi-fontsize="27"] * h2 * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="27"] * h3, body .bvi-body[data-bvi-fontsize="27"] * h3 * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="27"] * h4, body .bvi-body[data-bvi-fontsize="27"] * h4 * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="27"] * h5, body .bvi-body[data-bvi-fontsize="27"] * h5 * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="27"] * h6, body .bvi-body[data-bvi-fontsize="27"] * h6 * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="26"] * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="26"] * h1, body .bvi-body[data-bvi-fontsize="26"] * h1 * { font-size: 33px !important; } body .bvi-body[data-bvi-fontsize="26"] * h2, body .bvi-body[data-bvi-fontsize="26"] * h2 * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="26"] * h3, body .bvi-body[data-bvi-fontsize="26"] * h3 * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="26"] * h4, body .bvi-body[data-bvi-fontsize="26"] * h4 * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="26"] * h5, body .bvi-body[data-bvi-fontsize="26"] * h5 * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="26"] * h6, body .bvi-body[data-bvi-fontsize="26"] * h6 * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="25"] * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="25"] * h1, body .bvi-body[data-bvi-fontsize="25"] * h1 * { font-size: 32px !important; } body .bvi-body[data-bvi-fontsize="25"] * h2, body .bvi-body[data-bvi-fontsize="25"] * h2 * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="25"] * h3, body .bvi-body[data-bvi-fontsize="25"] * h3 * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="25"] * h4, body .bvi-body[data-bvi-fontsize="25"] * h4 * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="25"] * h5, body .bvi-body[data-bvi-fontsize="25"] * h5 * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="25"] * h6, body .bvi-body[data-bvi-fontsize="25"] * h6 * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="24"] * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="24"] * h1, body .bvi-body[data-bvi-fontsize="24"] * h1 * { font-size: 31px !important; } body .bvi-body[data-bvi-fontsize="24"] * h2, body .bvi-body[data-bvi-fontsize="24"] * h2 * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="24"] * h3, body .bvi-body[data-bvi-fontsize="24"] * h3 * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="24"] * h4, body .bvi-body[data-bvi-fontsize="24"] * h4 * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="24"] * h5, body .bvi-body[data-bvi-fontsize="24"] * h5 * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="24"] * h6, body .bvi-body[data-bvi-fontsize="24"] * h6 * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="23"] * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="23"] * h1, body .bvi-body[data-bvi-fontsize="23"] * h1 * { font-size: 30px !important; } body .bvi-body[data-bvi-fontsize="23"] * h2, body .bvi-body[data-bvi-fontsize="23"] * h2 * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="23"] * h3, body .bvi-body[data-bvi-fontsize="23"] * h3 * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="23"] * h4, body .bvi-body[data-bvi-fontsize="23"] * h4 * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="23"] * h5, body .bvi-body[data-bvi-fontsize="23"] * h5 * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="23"] * h6, body .bvi-body[data-bvi-fontsize="23"] * h6 * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="22"] * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="22"] * h1, body .bvi-body[data-bvi-fontsize="22"] * h1 * { font-size: 29px !important; } body .bvi-body[data-bvi-fontsize="22"] * h2, body .bvi-body[data-bvi-fontsize="22"] * h2 * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="22"] * h3, body .bvi-body[data-bvi-fontsize="22"] * h3 * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="22"] * h4, body .bvi-body[data-bvi-fontsize="22"] * h4 * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="22"] * h5, body .bvi-body[data-bvi-fontsize="22"] * h5 * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="22"] * h6, body .bvi-body[data-bvi-fontsize="22"] * h6 * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="21"] * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="21"] * h1, body .bvi-body[data-bvi-fontsize="21"] * h1 * { font-size: 28px !important; } body .bvi-body[data-bvi-fontsize="21"] * h2, body .bvi-body[data-bvi-fontsize="21"] * h2 * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="21"] * h3, body .bvi-body[data-bvi-fontsize="21"] * h3 * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="21"] * h4, body .bvi-body[data-bvi-fontsize="21"] * h4 * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="21"] * h5, body .bvi-body[data-bvi-fontsize="21"] * h5 * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="21"] * h6, body .bvi-body[data-bvi-fontsize="21"] * h6 * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="20"] * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="20"] * h1, body .bvi-body[data-bvi-fontsize="20"] * h1 * { font-size: 27px !important; } body .bvi-body[data-bvi-fontsize="20"] * h2, body .bvi-body[data-bvi-fontsize="20"] * h2 * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="20"] * h3, body .bvi-body[data-bvi-fontsize="20"] * h3 * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="20"] * h4, body .bvi-body[data-bvi-fontsize="20"] * h4 * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="20"] * h5, body .bvi-body[data-bvi-fontsize="20"] * h5 * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="20"] * h6, body .bvi-body[data-bvi-fontsize="20"] * h6 * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="19"] * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="19"] * h1, body .bvi-body[data-bvi-fontsize="19"] * h1 * { font-size: 26px !important; } body .bvi-body[data-bvi-fontsize="19"] * h2, body .bvi-body[data-bvi-fontsize="19"] * h2 * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="19"] * h3, body .bvi-body[data-bvi-fontsize="19"] * h3 * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="19"] * h4, body .bvi-body[data-bvi-fontsize="19"] * h4 * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="19"] * h5, body .bvi-body[data-bvi-fontsize="19"] * h5 * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="19"] * h6, body .bvi-body[data-bvi-fontsize="19"] * h6 * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="18"] * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="18"] * h1, body .bvi-body[data-bvi-fontsize="18"] * h1 * { font-size: 25px !important; } body .bvi-body[data-bvi-fontsize="18"] * h2, body .bvi-body[data-bvi-fontsize="18"] * h2 * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="18"] * h3, body .bvi-body[data-bvi-fontsize="18"] * h3 * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="18"] * h4, body .bvi-body[data-bvi-fontsize="18"] * h4 * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="18"] * h5, body .bvi-body[data-bvi-fontsize="18"] * h5 * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="18"] * h6, body .bvi-body[data-bvi-fontsize="18"] * h6 * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="17"] * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="17"] * h1, body .bvi-body[data-bvi-fontsize="17"] * h1 * { font-size: 24px !important; } body .bvi-body[data-bvi-fontsize="17"] * h2, body .bvi-body[data-bvi-fontsize="17"] * h2 * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="17"] * h3, body .bvi-body[data-bvi-fontsize="17"] * h3 * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="17"] * h4, body .bvi-body[data-bvi-fontsize="17"] * h4 * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="17"] * h5, body .bvi-body[data-bvi-fontsize="17"] * h5 * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="17"] * h6, body .bvi-body[data-bvi-fontsize="17"] * h6 * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="16"] * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="16"] * h1, body .bvi-body[data-bvi-fontsize="16"] * h1 * { font-size: 23px !important; } body .bvi-body[data-bvi-fontsize="16"] * h2, body .bvi-body[data-bvi-fontsize="16"] * h2 * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="16"] * h3, body .bvi-body[data-bvi-fontsize="16"] * h3 * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="16"] * h4, body .bvi-body[data-bvi-fontsize="16"] * h4 * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="16"] * h5, body .bvi-body[data-bvi-fontsize="16"] * h5 * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="16"] * h6, body .bvi-body[data-bvi-fontsize="16"] * h6 * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="15"] * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="15"] * h1, body .bvi-body[data-bvi-fontsize="15"] * h1 * { font-size: 22px !important; } body .bvi-body[data-bvi-fontsize="15"] * h2, body .bvi-body[data-bvi-fontsize="15"] * h2 * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="15"] * h3, body .bvi-body[data-bvi-fontsize="15"] * h3 * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="15"] * h4, body .bvi-body[data-bvi-fontsize="15"] * h4 * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="15"] * h5, body .bvi-body[data-bvi-fontsize="15"] * h5 * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="15"] * h6, body .bvi-body[data-bvi-fontsize="15"] * h6 * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="14"] * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="14"] * h1, body .bvi-body[data-bvi-fontsize="14"] * h1 * { font-size: 21px !important; } body .bvi-body[data-bvi-fontsize="14"] * h2, body .bvi-body[data-bvi-fontsize="14"] * h2 * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="14"] * h3, body .bvi-body[data-bvi-fontsize="14"] * h3 * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="14"] * h4, body .bvi-body[data-bvi-fontsize="14"] * h4 * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="14"] * h5, body .bvi-body[data-bvi-fontsize="14"] * h5 * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="14"] * h6, body .bvi-body[data-bvi-fontsize="14"] * h6 * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="13"] * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="13"] * h1, body .bvi-body[data-bvi-fontsize="13"] * h1 * { font-size: 20px !important; } body .bvi-body[data-bvi-fontsize="13"] * h2, body .bvi-body[data-bvi-fontsize="13"] * h2 * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="13"] * h3, body .bvi-body[data-bvi-fontsize="13"] * h3 * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="13"] * h4, body .bvi-body[data-bvi-fontsize="13"] * h4 * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="13"] * h5, body .bvi-body[data-bvi-fontsize="13"] * h5 * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="13"] * h6, body .bvi-body[data-bvi-fontsize="13"] * h6 * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="12"] * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="12"] * h1, body .bvi-body[data-bvi-fontsize="12"] * h1 * { font-size: 19px !important; } body .bvi-body[data-bvi-fontsize="12"] * h2, body .bvi-body[data-bvi-fontsize="12"] * h2 * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="12"] * h3, body .bvi-body[data-bvi-fontsize="12"] * h3 * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="12"] * h4, body .bvi-body[data-bvi-fontsize="12"] * h4 * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="12"] * h5, body .bvi-body[data-bvi-fontsize="12"] * h5 * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="12"] * h6, body .bvi-body[data-bvi-fontsize="12"] * h6 * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="11"] * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="11"] * h1, body .bvi-body[data-bvi-fontsize="11"] * h1 * { font-size: 18px !important; } body .bvi-body[data-bvi-fontsize="11"] * h2, body .bvi-body[data-bvi-fontsize="11"] * h2 * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="11"] * h3, body .bvi-body[data-bvi-fontsize="11"] * h3 * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="11"] * h4, body .bvi-body[data-bvi-fontsize="11"] * h4 * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="11"] * h5, body .bvi-body[data-bvi-fontsize="11"] * h5 * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="11"] * h6, body .bvi-body[data-bvi-fontsize="11"] * h6 * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="10"] * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="10"] * h1, body .bvi-body[data-bvi-fontsize="10"] * h1 * { font-size: 17px !important; } body .bvi-body[data-bvi-fontsize="10"] * h2, body .bvi-body[data-bvi-fontsize="10"] * h2 * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="10"] * h3, body .bvi-body[data-bvi-fontsize="10"] * h3 * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="10"] * h4, body .bvi-body[data-bvi-fontsize="10"] * h4 * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="10"] * h5, body .bvi-body[data-bvi-fontsize="10"] * h5 * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="10"] * h6, body .bvi-body[data-bvi-fontsize="10"] * h6 * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="9"] * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="9"] * h1, body .bvi-body[data-bvi-fontsize="9"] * h1 * { font-size: 16px !important; } body .bvi-body[data-bvi-fontsize="9"] * h2, body .bvi-body[data-bvi-fontsize="9"] * h2 * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="9"] * h3, body .bvi-body[data-bvi-fontsize="9"] * h3 * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="9"] * h4, body .bvi-body[data-bvi-fontsize="9"] * h4 * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="9"] * h5, body .bvi-body[data-bvi-fontsize="9"] * h5 * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="9"] * h6, body .bvi-body[data-bvi-fontsize="9"] * h6 * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="8"] * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="8"] * h1, body .bvi-body[data-bvi-fontsize="8"] * h1 * { font-size: 15px !important; } body .bvi-body[data-bvi-fontsize="8"] * h2, body .bvi-body[data-bvi-fontsize="8"] * h2 * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="8"] * h3, body .bvi-body[data-bvi-fontsize="8"] * h3 * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="8"] * h4, body .bvi-body[data-bvi-fontsize="8"] * h4 * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="8"] * h5, body .bvi-body[data-bvi-fontsize="8"] * h5 * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="8"] * h6, body .bvi-body[data-bvi-fontsize="8"] * h6 * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="7"] * { font-size: 7px !important; } body .bvi-body[data-bvi-fontsize="7"] * h1, body .bvi-body[data-bvi-fontsize="7"] * h1 * { font-size: 14px !important; } body .bvi-body[data-bvi-fontsize="7"] * h2, body .bvi-body[data-bvi-fontsize="7"] * h2 * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="7"] * h3, body .bvi-body[data-bvi-fontsize="7"] * h3 * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="7"] * h4, body .bvi-body[data-bvi-fontsize="7"] * h4 * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="7"] * h5, body .bvi-body[data-bvi-fontsize="7"] * h5 * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="7"] * h6, body .bvi-body[data-bvi-fontsize="7"] * h6 * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="6"] * { font-size: 6px !important; } body .bvi-body[data-bvi-fontsize="6"] * h1, body .bvi-body[data-bvi-fontsize="6"] * h1 * { font-size: 13px !important; } body .bvi-body[data-bvi-fontsize="6"] * h2, body .bvi-body[data-bvi-fontsize="6"] * h2 * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="6"] * h3, body .bvi-body[data-bvi-fontsize="6"] * h3 * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="6"] * h4, body .bvi-body[data-bvi-fontsize="6"] * h4 * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="6"] * h5, body .bvi-body[data-bvi-fontsize="6"] * h5 * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="6"] * h6, body .bvi-body[data-bvi-fontsize="6"] * h6 * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="5"] * { font-size: 5px !important; } body .bvi-body[data-bvi-fontsize="5"] * h1, body .bvi-body[data-bvi-fontsize="5"] * h1 * { font-size: 12px !important; } body .bvi-body[data-bvi-fontsize="5"] * h2, body .bvi-body[data-bvi-fontsize="5"] * h2 * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="5"] * h3, body .bvi-body[data-bvi-fontsize="5"] * h3 * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="5"] * h4, body .bvi-body[data-bvi-fontsize="5"] * h4 * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="5"] * h5, body .bvi-body[data-bvi-fontsize="5"] * h5 * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="5"] * h6, body .bvi-body[data-bvi-fontsize="5"] * h6 * { font-size: 7px !important; } body .bvi-body[data-bvi-fontsize="4"] * { font-size: 4px !important; } body .bvi-body[data-bvi-fontsize="4"] * h1, body .bvi-body[data-bvi-fontsize="4"] * h1 * { font-size: 11px !important; } body .bvi-body[data-bvi-fontsize="4"] * h2, body .bvi-body[data-bvi-fontsize="4"] * h2 * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="4"] * h3, body .bvi-body[data-bvi-fontsize="4"] * h3 * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="4"] * h4, body .bvi-body[data-bvi-fontsize="4"] * h4 * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="4"] * h5, body .bvi-body[data-bvi-fontsize="4"] * h5 * { font-size: 7px !important; } body .bvi-body[data-bvi-fontsize="4"] * h6, body .bvi-body[data-bvi-fontsize="4"] * h6 * { font-size: 6px !important; } body .bvi-body[data-bvi-fontsize="3"] * { font-size: 3px !important; } body .bvi-body[data-bvi-fontsize="3"] * h1, body .bvi-body[data-bvi-fontsize="3"] * h1 * { font-size: 10px !important; } body .bvi-body[data-bvi-fontsize="3"] * h2, body .bvi-body[data-bvi-fontsize="3"] * h2 * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="3"] * h3, body .bvi-body[data-bvi-fontsize="3"] * h3 * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="3"] * h4, body .bvi-body[data-bvi-fontsize="3"] * h4 * { font-size: 7px !important; } body .bvi-body[data-bvi-fontsize="3"] * h5, body .bvi-body[data-bvi-fontsize="3"] * h5 * { font-size: 6px !important; } body .bvi-body[data-bvi-fontsize="3"] * h6, body .bvi-body[data-bvi-fontsize="3"] * h6 * { font-size: 5px !important; } body .bvi-body[data-bvi-fontsize="2"] * { font-size: 2px !important; } body .bvi-body[data-bvi-fontsize="2"] * h1, body .bvi-body[data-bvi-fontsize="2"] * h1 * { font-size: 9px !important; } body .bvi-body[data-bvi-fontsize="2"] * h2, body .bvi-body[data-bvi-fontsize="2"] * h2 * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="2"] * h3, body .bvi-body[data-bvi-fontsize="2"] * h3 * { font-size: 7px !important; } body .bvi-body[data-bvi-fontsize="2"] * h4, body .bvi-body[data-bvi-fontsize="2"] * h4 * { font-size: 6px !important; } body .bvi-body[data-bvi-fontsize="2"] * h5, body .bvi-body[data-bvi-fontsize="2"] * h5 * { font-size: 5px !important; } body .bvi-body[data-bvi-fontsize="2"] * h6, body .bvi-body[data-bvi-fontsize="2"] * h6 * { font-size: 4px !important; } body .bvi-body[data-bvi-fontsize="1"] * { font-size: 1px !important; } body .bvi-body[data-bvi-fontsize="1"] * h1, body .bvi-body[data-bvi-fontsize="1"] * h1 * { font-size: 8px !important; } body .bvi-body[data-bvi-fontsize="1"] * h2, body .bvi-body[data-bvi-fontsize="1"] * h2 * { font-size: 7px !important; } body .bvi-body[data-bvi-fontsize="1"] * h3, body .bvi-body[data-bvi-fontsize="1"] * h3 * { font-size: 6px !important; } body .bvi-body[data-bvi-fontsize="1"] * h4, body .bvi-body[data-bvi-fontsize="1"] * h4 * { font-size: 5px !important; } body .bvi-body[data-bvi-fontsize="1"] * h5, body .bvi-body[data-bvi-fontsize="1"] * h5 * { font-size: 4px !important; } body .bvi-body[data-bvi-fontsize="1"] * h6, body .bvi-body[data-bvi-fontsize="1"] * h6 * { font-size: 3px !important; } body .bvi-body[data-bvi-images=true]:not(.bvi-no-styles) .bvi-background-image:not(.bvi-no-styles), body .bvi-body[data-bvi-images=true]:not(.bvi-no-styles) img.bvi-background-image:not(.bvi-no-styles), body .bvi-body[data-bvi-images=true]:not(.bvi-no-styles) img.bvi-img:not(.bvi-no-styles) { -webkit-filter: grayscale(0); filter: grayscale(0); visibility: visible; } body .bvi-body[data-bvi-images=false]:not(.bvi-no-styles) .bvi-background-image:not(.bvi-no-styles), body .bvi-body[data-bvi-images=false]:not(.bvi-no-styles) img.bvi-background-image:not(.bvi-no-styles), body .bvi-body[data-bvi-images=false]:not(.bvi-no-styles) img.bvi-img:not(.bvi-no-styles) { display: none; position: relative; border: 1px dashed; } body .bvi-body[data-bvi-images=grayscale]:not(.bvi-no-styles) .bvi-background-image:not(.bvi-no-styles), body .bvi-body[data-bvi-images=grayscale]:not(.bvi-no-styles) img.bvi-background-image:not(.bvi-no-styles), body .bvi-body[data-bvi-images=grayscale]:not(.bvi-no-styles) img.bvi-img:not(.bvi-no-styles) { -moz-filter: url("data:image/svg+xml;utf8,#grayscale"); -o-filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(1); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: grayscale(1); visibility: visible; } body .bvi-body[data-bvi-lineheight=normal]:not(.bvi-no-styles) { line-height: 1.5 !important; } body .bvi-body[data-bvi-lineheight=average]:not(.bvi-no-styles) { line-height: 2 !important; } body .bvi-body[data-bvi-lineheight=big]:not(.bvi-no-styles) { line-height: 2.5 !important; } body .bvi-body[data-bvi-letterspacing=normal]:not(.bvi-no-styles) { letter-spacing: 0 !important; } body .bvi-body[data-bvi-letterspacing=average]:not(.bvi-no-styles) { letter-spacing: 2px !important; } body .bvi-body[data-bvi-letterspacing=big]:not(.bvi-no-styles) { letter-spacing: 4px !important; } body .bvi-body[data-bvi-fontfamily=arial]:not(i):not(span):not(.bvi-no-styles) { font-family: Arial, sans-serif !important; } body .bvi-body[data-bvi-fontfamily=times]:not(i):not(span):not(.bvi-no-styles) { font-family: "Times New roman", serif !important; } body .bvi-body[data-bvi-builtelements=true]:not(.bvi-no-styles) .wp-audio-shortcode, body .bvi-body[data-bvi-builtelements=true]:not(.bvi-no-styles) iframe, body .bvi-body[data-bvi-builtelements=true]:not(.bvi-no-styles) object, body .bvi-body[data-bvi-builtelements=true]:not(.bvi-no-styles) video, body .bvi-body[data-bvi-builtelements=true]:not(.bvi-no-styles) ymaps, body .bvi-body[data-bvi-builtelements=true]:not(.bvi-no-styles) figure { display: block !important; } body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) .wp-audio-shortcode, body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) iframe, body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) object, body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) video, body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) ymaps, body .bvi-body[data-bvi-builtelements=false]:not(.bvi-no-styles) figure { display: none !important; } body .bvi-body .bvi-speech { margin-bottom: 24px; } body .bvi-body .bvi-speech .bvi-speech-link { display: inline-block; border: 1px dashed transparent; border-bottom: 0; padding: 11.2px; } body .bvi-body .bvi-speech .bvi-speech-text { border: 1px dashed transparent; padding: 11.2px; } body .bvi-body .bvi-speech .bvi-highlighting mark { font-weight: bold; text-decoration: underline; } body .bvi-body a.bvi-link { display: inline-block; font-weight: 400; line-height: 1.5; font-size: 14px !important; color: #212529 !important; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: #e0e0e0 !important; border: 1px solid #c6c6c6 !important; padding: 6px 12px; border-radius: 4px; position: relative; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } body .bvi-body a.bvi-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } body .bvi-body .bvi-link-fixed-top { position: fixed !important; top: 40px !important; right: 24px !important; z-index: 999999 !important; } body .bvi-body .bvi-hide { display: none !important; } body .bvi-body .bvi-show { display: block !important; } .bvi-images { width: 18px; height: 18px; letter-spacing: normal; display: inline-block; vertical-align: middle; z-index: 1; background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; } .bvi-images.bvi-images-cog { background-image: url("/bitrix/templates/glaz/assets/css/../media/cog-DTE23IV8.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-eye-slash { background-image: url("/bitrix/templates/glaz/assets/css/../media/eye-slash-BoRV-gcL.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-volume-up { background-image: url("/bitrix/templates/glaz/assets/css/../media/volume-up-BKiSH8iL.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-volume-off { background-image: url("/bitrix/templates/glaz/assets/css/../media/volume-off-Bk4yct5B.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-adjust { background-image: url("/bitrix/templates/glaz/assets/css/../media/adjust-DuvWEVxy.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-minus-circle { background-image: url("/bitrix/templates/glaz/assets/css/../media/minus-circle-BwXq01zm.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-image { background-image: url("/bitrix/templates/glaz/assets/css/../media/image-DQ_ZN_nC.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-minus { background-image: url("/bitrix/templates/glaz/assets/css/../media/minus-5yUl2Wa3.svg"); background-repeat: no-repeat; } .bvi-images.bvi-images-eye { background-image: url("/bitrix/templates/glaz/assets/css/../media/eye-B3eQcqyE.svg"); background-repeat: no-repeat; fill: green; } .bvi-images.bvi-images-size-32 { width: 32px !important; height: 32px !important; } /*# sourceMappingURL=bvi.css.map */.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}}.vacancies { grid-template-columns: repeat(auto-fit, minmax(var(--doctor-col-width), 1fr)); } html body .bvi-panel { grid-area: system; } @media (max-width: 991.98px) { body { grid-template-areas: "system" "head" "neck" "body" "side" "tail" "foot" "over"; grid-template-rows: auto auto auto 1fr auto auto auto auto; } } @media (min-width: 992px) { body { grid-template-areas: "system system" "head head" "neck neck" "body side" "tail tail" "foot foot" "over over"; grid-template-rows: auto auto auto 1fr auto auto auto; } } /*$vite$:1*/ /* End */ /* /dist/css/normalize.css?17876873276810 */ /* /dist/css/core.css?1787687326332127 */ /* /bitrix/templates/glaz/assets/css/main.css?1788958977100741 */