/* * Метфіл — стилі, яких немає у верстці. * * Тут тільки те, що додає тема: модалка заявки, стани форми, службові класи * доступності, режим reduced-motion, універсальна текстова сторінка. * * Токени й типографіку беремо з assets/css/style.css — нових кольорів не заводимо. */ /* ------------------------------------------------------------------ */ /* Доступність */ /* ------------------------------------------------------------------ */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--color-gold-2, #ffd4a1); outline-offset: 3px; } html.open-menu { overflow: hidden; } /* ------------------------------------------------------------------ */ /* Меню: підменю з клавіатури */ /* ------------------------------------------------------------------ */ /* * У верстці підменю на десктопі відкривається тільки на :hover — з * клавіатури до послуг було не дістатися. Медіа-запит той самий, що в * hover-правила: нижче 1280 px працює мобільне меню зі своїм акордеоном * (клас open-nextLevel), і його чіпати не треба. */ @media (min-width: 1280px) { .menuTop > ul > li.menu-item-has-children:focus-within .sub-menu { display: block; } } /* ------------------------------------------------------------------ */ /* Форма заявки: стани й вікно */ /* ------------------------------------------------------------------ */ /* * Рамку спливного вікна дає верстка: .remodal, .remodal__line, * .remodal-close, .modalSubscription__title — ті самі класи, що у вікні * «Поділитися». Поля беруть класи форми з верстки (.input, .select, .check): * на них розраховані вибір країни й випадний список. * * Тому тут лишається тільки те, чого у верстці немає: повідомлення про * помилки (у макеті форма намальована без них) і геометрія форми всередині * вікна — у секції сторінки послуги formFog розкладається на три колонки по * ширині 1280 px, а всередині вікна 632 px їм тісно. */ .formFog__error { display: block; min-height: 16px; margin-top: 4px; font-family: var(--font-text, "Inter"), system-ui, sans-serif; font-size: 12px; line-height: 1.3; color: #ff8f6b; } /* Порожній рядок помилки не має додавати висоти: у верстці його немає, і форма на сторінці послуги звіряється з макетом попіксельно. */ .formFog__error:empty { min-height: 0; margin-top: 0; } .formFog [aria-invalid="true"] { border-color: #ff8f6b; } .formFog__button[disabled] { opacity: 0.6; cursor: progress; } .formFog__status { margin-top: 14px; font-family: var(--font-text, "Inter"), system-ui, sans-serif; font-size: 14px; line-height: 1.3; color: var(--color-gold-2, #ffd4a1); } .formFog__status:empty { margin-top: 0; } /* Форма у спливному вікні -------------------------------------------- */ /* У секції форма заходить на фонове фото негативним відступом; у вікні фону немає, тому відступ звичайний. */ .modalRequest .formFog { margin-top: 20px; } /* * Випадний список у верстці має z-index: -1 і фон у 5% світла: він лежить * за секцією і читається тільки тому, що під ним темне тло сторінки. У вікні * обидва припущення хибні — вікно створює власний контекст накладання, тож * список іде за його фон, а крізь 5% проступають підписи полів і textarea. * Тому у вікні він піднімається над вмістом і отримує фон сторінки. */ .modalRequest .selectric-items { z-index: 3; background-color: #0f0f0f; background-image: linear-gradient(rgba(255, 212, 161, 0.05), rgba(255, 212, 161, 0.05)); } /* Textarea у верстці має фіксовану висоту; у вікні хай тягнеться. */ .modalRequest .formFog .area { resize: vertical; } /* Згода й кнопка у вікні стоять одна під одною: у секції на них 1220 px і згода вміщається в рядок, у вікні — 568 px. */ @media (min-width: 950px) { .modalRequest .formFog__width--3 { display: block; padding-top: 11px; } .modalRequest .formFog__item--3 { padding: 0; margin-bottom: 12px; } } @media (min-width: 1280px) { .modalRequest .formFog__width--1 { width: calc(50% - 8px); } .modalRequest .formFog__width--2 { width: 100%; } .modalRequest .formFog__button { width: 100%; max-width: 100%; } } /* ------------------------------------------------------------------ */ /* Універсальна текстова сторінка (фаза 2) і 404 */ /* ------------------------------------------------------------------ */ .pageText { position: relative; padding: 140px 0 100px; background: #12100f; } .pageText__item { box-sizing: border-box; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 20px; } .pageText__title { margin-bottom: 32px; font-family: var(--font-title, "Lighthaus"), Georgia, serif; font-size: 40px; line-height: 1.1; color: var(--color-gold-2, #ffd4a1); } .pageText__link { display: inline-block; margin-top: 32px; color: var(--color-gold, #c59256); } @media (min-width: 769px) { .pageText__title { font-size: 56px; } } /* ------------------------------------------------------------------ */ /* prefers-reduced-motion */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html.reduced-motion [data-cloud], html.reduced-motion .animationHuman__firefly { animation: none !important; transform: none !important; } /* ------------------------------------------------------------------ */ /* Клікабельна картка послуги */ /* ------------------------------------------------------------------ */ /* * ТЗ: «Вся карточка и кнопка ведут в одно место», «Вся карточка кликабельна; * кнопка дублирует действие». Посиланням робимо заголовок — його бачить * пошук, — а псевдоелемент розтягує клікабельну зону на всю картку. * Кнопка всередині лишається доступною: вона вище за z-index. */ .sliderWork__item, .sliderLayer__item, .sliderDigital__item { position: relative; } .cardLink { color: inherit; text-decoration: none; } .cardLink::after { content: ""; position: absolute; inset: 0; z-index: 1; } .sliderWork__link, .sliderLayer__link, .sliderDigital__link { position: relative; z-index: 2; } .cardLink:focus-visible::after { outline: 2px solid var(--color-gold-2, #ffd4a1); outline-offset: -4px; } /* ------------------------------------------------------------------ */ /* H1 на сторінці «Книги» */ /* ------------------------------------------------------------------ */ /* * У верстці головний заголовок цієї сторінки —

, тобто H1 не було * взагалі. Для пошуку це дефект, тому в темі тег змінено на

. * CSS верстки задає line-height тільки для h2 — 1.286, а від 1280px 1.3. * H1 лишався б із «normal», і заголовок відрізнявся б за висотою. */ h1.books__title { line-height: 1.286; } @media (min-width: 1280px) { h1.books__title { line-height: 1.3; } } /* ------------------------------------------------------------------ */ /* Назва матеріалу в картці «схожі матеріали» */ /* ------------------------------------------------------------------ */ /* * У верстці назва — звичайний текст, а замовницьке ТЗ (розділ 10) вимагає, * щоб у статтю вели і зображення, і заголовок. Робимо заголовок посиланням, * але лишаємо йому колір тексту: інакше загальне правило для посилань * усередині .description перефарбовує його в золотий. */ .sliderSimilar__text a { color: inherit; text-decoration: none; } .sliderSimilar__text a:hover, .sliderSimilar__text a:focus-visible { color: var(--color-gold-2); } /* ------------------------------------------------------------------ */ /* Згода на обробку даних — доступність */ /* ------------------------------------------------------------------ */ /* * У CSS верстки `.check input` має visibility: hidden, тобто перемикач * випадає з порядку табуляції. Згода обов'язкова, тож без миші форму було * неможливо надіслати взагалі. * * Повертаємо поле у фокусний порядок, лишаючи його невидимим. pointer-events * знімаємо, бо поле розтягнуте на всю площу підпису й інакше перехоплювало б * клік по посиланню на політику. Мишею перемикач і далі вмикає