/** * Печатная раскладка сайта TeamProfi. * * Файл подключается отдельной ссылкой с `media="print"` (`app/app.vue`) * и потому не попадает в критический CSS: браузер забирает его вне пути * первой отрисовки, и печать ничего не стоит тем, кто ничего не печатает. * Разбор решения — в `DESIGN.md`, раздел «Печать». * * Здесь лежит вся печать сайта целиком, включая правила, которые раньше * стояли в `base.css`, `HomeBest.vue` и `CookieNote.vue`. Бумага — отдельный * носитель со своей раскладкой, и смотреть на неё надо в одном месте: * разложенная по двум десяткам компонентов, она незаметно расходится * с самой собой, как это уже было с чипами и карточками работ. * * Почему тут так много `!important`. Стили компонентов объявлены `scoped`, * то есть компилируются в `.класс[data-v-…]` — специфичность выше любого * одиночного класса отсюда, и никакой порядок подключения этого не меняет. * Значит всё, что перебивает экранное правило компонента, обязано быть * помечено; там, где правила в компоненте нет (разрывы страниц, поля листа, * собственная типографика), пометки нет. Это не грубая сила, а единственный * доступный способ сказать «на бумаге иначе». * * Фоны здесь намеренно не печатаются: браузер по умолчанию их и не печатает, * а полосы чередования на бумаге не несут ничего, кроме расхода тонера. * Поэтому всё, что на экране держалось заливкой — кнопки, плашки, чипы, — * ниже переведено на рамку и чёрный текст: иначе на листе остаются пустые * места вместо текста. */ /* --- Лист --- */ /** * Поля отданы листу, а не вёрстке. На экране отступ по краям держит * `--pad-x` (до 4rem), и в печати он складывался с полями браузера — * полоса набора выходила заметно уже листа. Здесь `--pad-x` обнуляется, * а расстояние до края задаёт `@page`: 184 мм полосы при A4. */ @page { size: A4; margin: 14mm 13mm 12mm; } /** * Пометки на переменных обязательны, и по той же причине, что на свойствах * ниже: ссылка с `media="print"` стоит в `` раньше стилей сборки, * а `:root` из `base.css` имеет ту же специфичность — без пометки он * побеждает порядком и печатная палитра не применяется вовсе. */ :root { /* Ритм страницы на бумаге втрое плотнее экранного: `--section` на экране доходит до 8rem, то есть до 128 px, — на листе это четверть высоты впустую. */ --section: 5mm !important; --pad-x: 0mm !important; --gap-row: 3.5mm !important; --gap-col: 8mm !important; /* Печатная палитра: чёрный текст, серый для второстепенного. Акцент остаётся синим — в градациях серого он даёт читаемый средний тон и продолжает отличать линейки и подписи от основного текста. */ --ink: #000 !important; --muted: #3a3a3a !important; --line: #9a9a9a !important; --bg: #fff !important; --bg-soft: #fff !important; --bg-deep: #fff !important; --surface: #fff !important; --fill: #fff !important; } /** * Кегль задаётся корню, а не телу: почти вся вёрстка сайта считает размеры * в `rem`, и одно это число сжимает страницу целиком, не трогая пропорций. * 9,5pt против экранных 16px — примерно 79%, обычная плотность печатного * документа; на нём страница услуги укладывается в пять листов вместо * шести. Заголовки на `clamp(…vw)` считаются от ширины листа и сюда * не попадают, поэтому переопределены ниже поимённо. */ html { font-size: 9.5pt !important; background: #fff !important; } /* Интерлиньяж плотнее экранного: 1,45 на бумаге даёт воздух, которого на листе просто нет. На кейсе это разница в полстраницы. */ body { background: #fff !important; color: #000 !important; line-height: 1.35 !important; } /* --- Типографика листа --- */ .h1, h1 { font-size: 22pt !important; line-height: 1.1 !important; max-width: none !important; margin-bottom: 4mm !important; } .h2, h2 { font-size: 13pt !important; line-height: 1.15 !important; max-width: none !important; margin: 0 0 2.5mm !important; } .h3, h3 { font-size: 11pt !important; margin-bottom: 1.5mm !important; } .lead { font-size: 10pt !important; line-height: 1.35 !important; max-width: 46em !important; } .lead--sub { margin: -1.5mm 0 4mm !important; } .meta { font-size: 7pt !important; line-height: 1.4 !important; } .quote { font-size: 10.5pt !important; margin-top: 4mm !important; padding-top: 3mm !important; } .section { padding-block: var(--section) !important; } .section--tight { padding-block: 6mm !important; } /* Полосы чередования на бумаге не видны (фоны не печатаются), поэтому границу между разделами держит линейка — иначе два раздела подряд читаются одним */ .section + .section, .section--alt, .section--deep { border-top: 0.5pt solid #bbb; } /* --- Чего на бумаге нет --- */ /** * Всё, что на листе нельзя нажать, ввести или прокрутить. Уведомление * о cookie — первое в этом списке: раньше правило стояло в самом * компоненте, теперь живёт здесь, вместе с остальной печатью. * * Навигация уходит вся, включая оглавление статьи (`.toc`) и строку * «Другие услуги · Об этом в блоге» (`.rel`): на бумаге это перечень * названий, ведущий в никуда, — читать его можно, пойти по нему нельзя. * Адрес самой страницы браузер печатает в колонтитуле, а содержание * документа читатель видит целиком, перелистнув лист. */ aside.note, .head__nav, .head__icon, .head__slot, .btn, .form, .contact__side, .best__rail, .arws, .hero__art, .hero__veil, .hero__field, .toc, .rel, .rest__more, .case__arr, .case-all__arr, .blog__arr, .cat__arr, .rest__arr, .foot__docs, nav.foot__col { display: none !important; } /* Якорные ссылки на бумаге ведут в никуда: подчёркивание обещает переход, которого нет. Текст остаётся — он несёт смысл. */ a[href^="#"] { text-decoration: none !important; } /* --- Чёрно-белое --- */ /* Фоны не печатаются, а белый текст на них остаётся белым — на листе это пустое место. Всё, что держалось заливкой, переходит на рамку. */ .chip { border: 0.5pt solid #9a9a9a !important; background: none !important; color: #000 !important; padding: 0.5mm 1.5mm !important; font-size: 8pt !important; } .case-all__plate { background: none !important; border: 0.75pt solid #000 !important; color: #000 !important; aspect-ratio: auto !important; padding: 2mm !important; } .case-all__num, .case-all__plus, .case-all__since { color: #000 !important; } .case-all__num { font-size: 18pt !important; } /** * Картинки печатаются в оттенках серого — и это не только про чёрно-белый * принтер. * * Chrome вкладывает в PDF исходный растр и не смотрит на то, каким размером * картинка стоит на листе: уменьшение обложек с 24 до 20 мм не сняло * с документа ни мегабайта. А вот фильтр заставляет его растрировать * изображение в печатном разрешении — главная похудела с 12,7 до 5,6 МБ, * список работ с 21,3 до 3,6 МБ. На цветном принтере это потеря цвета, * на бумаге — единственная разница между документом, который печатают, * и документом, который закрывают на второй минуте. * * Пометка здесь обязательна, и это тот самый случай, о котором говорит * шапка файла: портрет в визитке и фото автора статьи приглушены своими * `filter` из компонентов (`.who__img`, `.pauthor__img`), а те объявлены * `scoped` и без пометки побеждают. Печатались бы они цветными — и, что * дороже, исходным растром: визитка стоит на каждой странице сайта. */ img { filter: grayscale(1) !important; } /* Логотипы клиентов на экране приглушены до четверти силы — на бумаге это нечитаемая серость. Оттенки серого остаются, прозрачность уходит. Два селектора, потому что мест с логотипами два: лента на главной и сетка на странице клиентов. Приглушение у них общее по замыслу, значит и снимается оно вместе. */ .clients__logo, .cl__logo { filter: grayscale(1) contrast(1.15) !important; } /* Поля ввода форма уносит с собой, но если где-то останется одиночное — пусть будет линией, а не плашкой */ input, textarea { background: none !important; border: 0 !important; border-bottom: 0.5pt solid #9a9a9a !important; } /* --- Колонки на полосе --- */ /** * Полоса набора A4 — 695 px, и это **меньше** точки перестроения сайта * (48rem, то есть 768 px). Из этого следует неочевидное: лист печатается * по мобильным правилам. Все колоночные сетки схлопнуты в одну колонку, * а у кадров кейса срабатывает ветка узкого экрана, где десктопный снимок * скрыт вовсе и печатается один телефон — то есть с листа пропадало ровно * то, ради чего кейс открывают. * * Поэтому колонки возвращаются здесь поимённо. Числа взяты те же, что * у сайта на широком экране, но пересчитаны под 184 мм полосы: четыре * колонки текста на бумаге дают по 43 мм и годятся только коротким * пунктам, поэтому перечни идут по три, а не по четыре. */ .duo, .rules--2, .faq, .stk, .stack, .srv, .rest, .sec__rules, .post__intro, .svc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .rules--3, .rules--4, .srv__pay, .proc__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .blog__link { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto !important; } .cat__link { grid-template-columns: minmax(0, 55mm) minmax(0, 1fr) auto !important; } /** * Кадры кейса: разбор слева, телефон справа от него, десктопный снимок * во всю ширину под ними — та же раскладка, что на широком экране. * У экрана без телефона колонка одна: пустая колонка справа от текста * и была причиной, по которой телефон вообще переехал в эту сетку. */ .scr { grid-template-columns: minmax(0, 1fr) 34mm !important; align-items: start !important; } .scr--solo { grid-template-columns: minmax(0, 1fr) !important; } .scr__cap { grid-column: 1 !important; } .scr__m { grid-column: 2 !important; grid-row: 1 !important; width: auto !important; justify-self: end !important; } .scr__d { display: block !important; grid-column: 1 / -1 !important; } /* --- Разрывы --- */ h1, h2, h3, h4, .h1, .h2, .h3, .sum__t, .stk__title, .side__t { break-after: avoid; break-inside: avoid; } p, li, blockquote { orphans: 3; widows: 3; } img, figure, .facts__i, .rules > li, .side__item, .stk__group, .faq__d, .srv__item, .srv__pay-i, .cases > .case, .case-all, .rest__row, .blog__link, .cat__link, .scr, .who, .quote, .clients__quote { break-inside: avoid; } /* --- Появление разделов --- */ /** * На бумаге прокрутки нет: блоки, которым положено появиться при подходе * к ним, остались бы пустым местом. Правило стояло в `base.css`, здесь оно * рядом с той же поправкой для «Лучших проектов» — причина у них одна. */ [data-rise] { opacity: 1 !important; transform: none !important; animation: none !important; } /* --- Шапка документа --- */ /** * Шапка сайта на печати работает шапкой документа: знак, имя, адрес сайта * и почта. Меню и кнопки ушли выше — нажимать на листе нечего, — а вот * аккредитация остаётся: это факт о компании, а не навигация. */ .head { position: static !important; border-bottom: 1pt solid #000; padding-bottom: 2mm !important; } .head__in { padding-inline: 0 !important; min-height: 0 !important; } .head__left { gap: 3mm !important; } .head__right::after { content: "teamprofi.ru · sale@teamprofi.ru"; font-size: 8pt; color: #000; white-space: nowrap; } /* --- Подвал документа --- */ .foot { border-top: 1pt solid #000; padding-block: 3mm 0 !important; break-inside: avoid; } .foot__in { display: block !important; padding-inline: 0 !important; } .foot__legal { padding-inline: 0 !important; font-size: 8pt !important; } .foot__link[href^="#"] { display: none !important; } /* Подписи колонок подвала («Услуги», «Разделы», «Связаться») остаются без своих колонок: сами колонки на бумаге не печатаются, и подпись висела бы над одной почтой */ .foot__t { display: none !important; } /* --- Главная: обложка --- */ /** * Первый экран на бумаге — титульный лист: заголовок, лид, строка фактов * и контакты. Узор на canvas и приглушающее пятно не печатаются вовсе: * на листе они дают серую рябь, а в PDF — мегабайты. */ .hero { min-height: 0 !important; display: block !important; padding-block: 6mm !important; break-after: page; } .hero__h1 { font-size: 30pt !important; line-height: 1.05 !important; animation: none !important; } /* Слово в заголовке меняется по таймеру, и печать может застать пересменку: на листе оказались бы оба. Уходящее не печатается. */ .verb-leave-active, .verb-enter-from, .hero__word ~ .hero__word { display: none !important; } .hero__lead { font-size: 12pt !important; margin-top: 5mm !important; } .hero__facts { margin-top: 6mm !important; font-size: 10pt !important; } /* Кнопка «Обсудить проект» скрыта вместе с остальными, почта остаётся */ .hero__acts { margin-top: 5mm !important; font-size: 11pt !important; } /* --- Главная: лучшие проекты --- */ /** * Содержимое кейса живёт на прогрессе прокрутки (`--t`), а в печати * прокрутки нет: без этой поправки кейсы выходят пустыми рамками. Правило * переехало сюда из `HomeBest.vue` без изменений по существу — проверку * на него сторожит `print-check`. * * Прогресс помечен, и без пометки правило не действовало бы вовсе: значение * пишет скрипт инлайном (`el.style.setProperty('--t', …)`), а инлайн * сильнее любого правила без `!important`. Полагаться на один прогресс всё * равно нельзя — отсюда принудительные `opacity` и `transform` ниже: они * и вытаскивают кейс на бумагу, а `--t` приводит в порядок всё, что из него * выводится (наезд композиции, ход плашек), чтобы стадия была одна и та же. */ .best .case { --t: 0.85 !important; break-inside: avoid; break-before: page; } /* Первый проект начинает свой лист сам — обложка перед ним кончается разрывом, и второй подряд дал бы пустую страницу */ .best .case:first-child { break-before: auto; } .best .case, .best .case *, .best .case::before { opacity: 1 !important; transform: none !important; } .best__pin { padding-block: 0 !important; background: none !important; } .best__cases { --case-gap: 0 !important; } /* Композиция проекта занимает половину листа, не больше: остальное — текст и показатели, ради которых кейс и печатают */ .best .case__scene { max-width: 150mm !important; margin: 4mm auto 0 !important; aspect-ratio: 16 / 11 !important; } .best .case__title { font-size: 16pt !important; } .best .case__lead { font-size: 10pt !important; } .best .kpi__v { font-size: 14pt !important; } /* --- Главная: разделы --- */ /** * Разделы главной начинают свой лист: печатная главная — презентация, * и раздел, начавшийся четвертью страницы, читается обрывком предыдущего. * * Разрывов ровно столько, сколько нужно: каждый лишний оставляет позади * недописанный лист, и три первых наброска давали девять листов вместо * восьми. Клиенты своего листа не начинают — они дочитываются на том, * где кончились работы, и вместе с визиткой и подвалом составляют * последний лист презентации. * * `#contact` в этом списке не стоит и по другой причине: он живёт * в раскладке, а не на главной, и разрыв перед ним действовал бы на каждой * странице сайта — на политике конфиденциальности он отдавал под визитку * отдельный, почти пустой лист. Целой визитка остаётся сама по себе, * `break-inside` ниже. */ #services, #process, #cases { break-before: page; } /* «На чем работаем» идёт следом за практиками: вместе они занимают лист с небольшим запасом, и разрыв между ними оставил бы полстраницы пустой */ .srv, .proc__list, .stack { gap: 4mm 6mm !important; } .srv__pay { gap: 4mm 6mm !important; margin-top: 4mm !important; } /* --- Главная: клиенты --- */ /** * Лента клиентов едет вбок и потому свёрстана строкой в 4536 px: на листе * от неё печатался первый неполный ряд. На бумаге движения нет, поэтому * лента разворачивается в сетку, а вторая копия списка — та, что на экране * закрывает стык при заворачивании, — не печатается. */ .clients__rows { mask-image: none !important; margin-top: 5mm !important; } .clients__row { overflow: visible !important; } .clients__track { display: flex !important; flex-wrap: wrap !important; width: auto !important; gap: 4mm 6mm !important; transform: none !important; animation: none !important; } .clients__cell[aria-hidden="true"] { display: none !important; } .clients__quote { margin-top: 6mm !important; } /** * Сетка знаков на странице клиентов. Экранные колонки от 8,5rem дают * на 184 мм полосы шесть штук, и 57 знаков уходят в десять рядов — почти * полный лист под перечень логотипов. На бумаге места под ячейку нужно * меньше: приглушения нет, наведения нет, и знак читается с 26 мм. */ .cl { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 4mm 5mm !important; } .cl__cell { min-height: 0 !important; } .cl__logo { max-height: 8mm !important; } /* Заголовок второго такта. Общее правило выше снимает у всех `h2` верхний отступ — на страницах, где заголовок открывает секцию со своими полями, это верно, а здесь оба такта лежат в одной колонке, и «Что говорят» прилипало к последнему ряду знаков. */ .cl__h2 { margin-top: 10mm !important; } /* --- Главная: контакты --- */ /** * Форма на листе бессмысленна — её место занимает визитка: кто отвечает, * почта, а реквизиты компании идут ниже, в подвале документа. * * Блок целиком не рвётся между листами: своего листа он не занимает * (см. разрывы разделов выше), но разорванная надвое визитка — это * фотография на одном листе и имя на другом. */ .contact { break-inside: avoid; } .contact__in { display: block !important; } .who { margin-top: 5mm !important; break-inside: avoid; } .who__photo { width: 22mm !important; max-width: 22mm !important; } .contact__mail { margin-top: 4mm !important; font-size: 11pt !important; } /* --- Работы: карточки --- */ /** * Сетка работ на бумаге плотнее экранной: четыре колонки по 43 мм и обложка * высотой в два сантиметра. На странице «Наши работы» это разница между * восемью листами и четырьмя, а обложки при этом остаются — по ним видно, * что за проект. * * Четыре, а не три: карточка работы — это обложка, строка отрасли, имя * и полторы строки описания, и на 43 мм всё это читается. Перечни текста * рядом идут по три (см. «Колонки на полосе») именно потому, что там * на той же ширине стоит абзац. */ .cases { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5mm 4mm !important; } .cases > .case { border-top: 0.5pt solid #000 !important; padding-top: 1.5mm !important; } .case__shot { aspect-ratio: 40 / 21 !important; } .case__shot img { max-height: 20mm !important; object-fit: cover !important; } .case__name { font-size: 9.5pt !important; margin: 1.5mm 0 1mm !important; } .case__text { font-size: 8pt !important; line-height: 1.3 !important; } /* «Другие работы» — перечень без обложек, и на листе он идёт втрое плотнее экранного: строка занимает ровно свои три поля */ .rest__row { padding-block: 1mm !important; gap: 1mm 4mm !important; } .rest__text, .rest__name { font-size: 8.5pt !important; line-height: 1.3 !important; } /* --- Страница работы --- */ /** * Обложка кейса и кадры экранов печатаются, но не занимают лист целиком: * в кейсе главное — разбор рядом с ними, а кадр высотой в полстраницы * растаскивал страницу на шесть листов вместо пяти. */ .case-page .hd__cover img, .scr img { max-height: 50mm !important; width: auto !important; object-fit: contain !important; } .scrs { gap: 5mm !important; } .scr { gap: 3mm !important; } /* --- Страница услуги и статья --- */ .faq__d::details-content { content-visibility: visible; } .faq__d > :not(summary) { display: block !important; } .faq__sign { display: none !important; } .faq { gap: 3mm var(--gap-col) !important; } .faq__q { font-size: 10.5pt !important; padding-bottom: 1.5mm !important; cursor: auto; } .faq__a { padding-bottom: 2mm !important; } .post .sec, .svc-page .section { break-before: auto; } .fig img { max-height: 90mm !important; width: auto !important; } /* --- Юридические документы --- */ .doc__h2 { margin: 5mm 0 2mm !important; font-size: 12pt !important; } .doc__p, .doc__ul { margin-bottom: 2mm !important; max-width: none !important; } .doc__dl { gap: 2mm 6mm !important; max-width: none !important; } /* --- Адреса внешних ссылок --- */ /** * На бумаге ссылка молчит: читатель видит текст и не знает, куда он вёл. * Поэтому внешние адреса раскрываются — но только они. Внутренняя * навигация сайта раскрытая превратила бы текст в перечень путей * вида `/services/support/`, не сказав ничего: адрес страницы браузер * и так печатает в колонтитуле. * * Ссылка на живой проект в шапке кейса исключена отдельным правилом ниже, * а не через `:not()`: её текстом и так стоит домен, и раскрытие дало бы * «akson.ru (http://akson.ru/)». Отдельным — потому что `:not()` со * сложным селектором внутри движок либо понимает, либо отбрасывает всё * правило целиком, вместе с раскрытием адресов, ради которого оно и есть. */ a[href^="http"]:not([href*="teamprofi.ru"])::after { content: " (" attr(href) ")"; font-size: 85%; color: #3a3a3a; word-break: break-all; } .hd__live a::after { content: none !important; } /* --- Спокойный режим бумаги --- */ /* Всё движение на листе бессмысленно, чем бы оно ни задавалось */ *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }