/* * MediaVymir — оформлення власного шару теми. * Напрямок: Ink & Paper. Шрифти: Literata (заголовки) / Inter (текст). * Патерни: hero H5, картки C1 overlay / C4 ranked / C2 stacked / C3 split, * заголовки секцій S3, бейджі рубрик B2. * Усі кольори — з mvym-tokens.css, тут захардкоджених значень немає. */ /* ========================================================================== 1. Каркас смуг і секцій ========================================================================== */ .mvym-band { background: var(--mvym-bg); padding: calc(var(--mvym-space) * 4.5) var(--mvym-gutter) calc(var(--mvym-space) * 3); } /* * Period тримає в шапці 5.25em нижнього падінгу і тягне #primary-container * угору на стільки ж — щоб перше зображення запису налізло на темну смугу. * На головній між ними стоїть наша смуга, тож обидва зміщення треба зняти: * інакше шапка зяє порожнечею, а контейнер накриває блок рубрик. * Клас на ставить mvym_body_class() і лише тоді, коли смуга реально є. */ .mvym-has-band .site-header { padding-bottom: 1em; } .mvym-has-band .menu-primary { margin-bottom: 1.25em; } .mvym-has-band .primary-container { margin-top: 0; } /* * Зі знятим від'ємним відступом контентна колонка впиралася просто в низ смуги. * Сайдбар у Period має власні 3em згори, тож колонці даємо співмірний відступ. */ .mvym-has-band .main { padding-top: calc(var(--mvym-space) * 5); } .mvym-band__inner { max-width: var(--mvym-container); margin: 0 auto; } .mvym-section { margin: 0 0 calc(var(--mvym-space) * 5); } .mvym-band__inner > .mvym-section:last-child { margin-bottom: 0; } .mvym-section--column { margin-bottom: calc(var(--mvym-space) * 5); } /* Заголовок секції — патерн S3 */ .mvym-shead { margin: 0 0 calc(var(--mvym-space) * 2); font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-ink); } .mvym-shead::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 7px; border-radius: var(--mvym-r-pill); background: var(--mvym-accent); } .mvym-shead__sub { margin: calc(var(--mvym-space) * -1) 0 calc(var(--mvym-space) * 2.5); font-family: var(--mvym-font-body); font-size: 14px; line-height: 1.5; color: var(--mvym-ink-muted); } /* * Бейдж рубрики — патерн B2. * * Колір задається через :link/:visited: у Period є * `a:link, a:visited { color: #333333 }` зі специфічністю (0,1,1), * і одинарний клас (0,1,0) їй програє — бейджі виходили сірими. * Так правило працює в будь-якому контексті, без прив'язки до предка. */ .mvym-badge { display: inline-block; margin-bottom: 6px; font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); text-decoration: none; } .mvym-badge:link, .mvym-badge:visited { color: var(--mvym-accent); } .mvym-badge--onink:link, .mvym-badge--onink:visited { color: var(--mvym-accent-light); text-shadow: 0 1px 3px var(--mvym-overlay-bottom); } .mvym-badge:hover, .mvym-badge:focus-visible { color: var(--mvym-accent-hover); } .mvym-badge--onink:hover, .mvym-badge--onink:focus-visible { color: var(--mvym-ink-invert); } /* Мета-рядок під заголовком: дата · автор · час читання */ .mvym-byline { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 calc(var(--mvym-space) * 1.5); font-family: var(--mvym-font-body); font-size: var(--mvym-fs-meta); line-height: 1.4; letter-spacing: 0.02em; color: var(--mvym-ink-faint); } .mvym-byline__sep { padding: 0 7px; color: var(--mvym-line-strong); } .mvym-byline__author:link, .mvym-byline__author:visited { color: var(--mvym-ink-muted); font-weight: 600; text-decoration: none; } .mvym-byline__author:hover, .mvym-byline__author:focus-visible { color: var(--mvym-accent); text-decoration: underline; } .mvym-meta { font-family: var(--mvym-font-body); font-size: var(--mvym-fs-meta); line-height: 1.4; letter-spacing: 0.02em; color: var(--mvym-ink-faint); margin: 0; } .mvym-meta__dot { padding: 0 6px; } /* Спільна поведінка фокуса для всього власного шару */ .mvym-band a:focus-visible, .mvym-section a:focus-visible, .mvym-widget a:focus-visible, .mvym-single a:focus-visible { outline: 2px solid var(--mvym-accent); outline-offset: 2px; border-radius: var(--mvym-r-sm); } /* ========================================================================== 2. Hero — патерн H5 (велика картка + нумерований список) ========================================================================== */ .mvym-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(var(--mvym-space) * 3.5); align-items: start; } /* Лід-картка — патерн C1 overlay */ .mvym-lead { position: relative; margin: 0; border-radius: var(--mvym-r-lg); overflow: hidden; background: var(--mvym-surface-deep); } .mvym-lead__frame { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--mvym-surface-deep); overflow: hidden; } .mvym-lead__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .mvym-lead:hover .mvym-lead__img { transform: scale(1.03); } .mvym-lead__body { position: absolute; inset: auto 0 0 0; padding: calc(var(--mvym-space) * 6) calc(var(--mvym-space) * 3) calc(var(--mvym-space) * 3); background: linear-gradient( to bottom, var(--mvym-overlay-top) 0%, var(--mvym-overlay-mid) 38%, var(--mvym-overlay-bottom) 82%, var(--mvym-overlay-bottom) 100% ); } .mvym-lead__title { margin: calc(var(--mvym-space) * 1.25) 0 calc(var(--mvym-space)); font-family: var(--mvym-font-display); font-size: var(--mvym-fs-hero); line-height: 1.16; font-weight: 700; } .mvym-lead__title a { color: var(--mvym-ink-invert); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mvym-lead__title a:hover, .mvym-lead__title a:focus-visible { color: var(--mvym-accent-light); } .mvym-lead__meta { color: var(--mvym-ink-invert); opacity: 0.78; } /* Нумерований список — патерн C4 ranked */ .mvym-rank__label { margin: 0 0 calc(var(--mvym-space) * 1.5); font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-ink-faint); } .mvym-rank__list { margin: 0; padding: 0; list-style: none; counter-reset: mvym-rank; border-top: 1px solid var(--mvym-line); } .mvym-rank__item { counter-increment: mvym-rank; display: grid; grid-template-columns: 30px 74px minmax(0, 1fr); gap: calc(var(--mvym-space) * 1.5); align-items: center; padding: calc(var(--mvym-space) * 1.75) 0; border-bottom: 1px solid var(--mvym-line); } .mvym-rank__item::before { content: counter(mvym-rank, decimal-leading-zero); font-family: var(--mvym-font-display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--mvym-line-strong); } .mvym-rank__item:first-child::before { color: var(--mvym-accent); } .mvym-rank__item:last-child { border-bottom: 0; } .mvym-rank__thumb { display: block; width: 74px; aspect-ratio: 1 / 1; border-radius: var(--mvym-r-sm); overflow: hidden; background: var(--mvym-surface-alt); } .mvym-rank__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mvym-rank__item--noimg { grid-template-columns: 30px minmax(0, 1fr); } .mvym-rank__title { margin: 0 0 5px; font-family: var(--mvym-font-display); font-size: var(--mvym-fs-card-sm); line-height: 1.3; font-weight: 600; } .mvym-rank__title a { color: var(--mvym-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mvym-rank__title a:hover, .mvym-rank__title a:focus-visible { color: var(--mvym-accent); } /* ========================================================================== 3. Популярні рубрики ========================================================================== */ .mvym-topics__list { display: flex; flex-wrap: wrap; gap: calc(var(--mvym-space) * 1.25); margin: 0; padding: 0; list-style: none; } .mvym-section .mvym-topic { display: inline-flex; align-items: center; gap: calc(var(--mvym-space) * 1.25); min-height: 42px; padding: 0 6px 0 calc(var(--mvym-space) * 2); border: 1px solid var(--mvym-line); border-radius: var(--mvym-r-pill); background: var(--mvym-surface); font-family: var(--mvym-font-body); font-size: 14.5px; font-weight: 500; color: var(--mvym-ink); text-decoration: none; white-space: nowrap; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .mvym-section .mvym-topic:hover, .mvym-section .mvym-topic:focus-visible { border-color: var(--mvym-accent); background: var(--mvym-accent-soft); color: var(--mvym-accent-hover); } /* Лічильник — окремий чіп, щоб число не читалось як частина назви */ .mvym-topic__count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--mvym-r-pill); background: var(--mvym-surface-alt); font-size: var(--mvym-fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mvym-ink-faint); } .mvym-section .mvym-topic:hover .mvym-topic__count, .mvym-section .mvym-topic:focus-visible .mvym-topic__count { background: var(--mvym-accent); color: var(--mvym-ink-invert); } /* ========================================================================== 4. Вибір редакції — патерн C2 stacked ========================================================================== */ .mvym-picks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: calc(var(--mvym-space) * 3); margin: 0; padding: 0; list-style: none; } .mvym-pick { display: flex; flex-direction: column; } .mvym-pick__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: calc(var(--mvym-space) * 1.5); border-radius: var(--mvym-r-md); overflow: hidden; background: var(--mvym-surface-alt); } .mvym-pick__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .mvym-pick__thumb:hover img { transform: scale(1.04); } .mvym-pick__title { margin: 6px 0 8px; font-family: var(--mvym-font-display); font-size: var(--mvym-fs-card); line-height: 1.28; font-weight: 600; } .mvym-pick__title a { color: var(--mvym-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mvym-pick__title a:hover, .mvym-pick__title a:focus-visible { color: var(--mvym-accent); } /* ========================================================================== 5. Додатковий блок — патерн C3 split (і режим списку) ========================================================================== */ .mvym-extra__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mvym-line); } .mvym-extra__item { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: calc(var(--mvym-space) * 2.25); align-items: center; padding: calc(var(--mvym-space) * 2.25) 0; border-bottom: 1px solid var(--mvym-line); } .mvym-extra__item--noimg { grid-template-columns: minmax(0, 1fr); } .mvym-extra__thumb { display: block; aspect-ratio: 4 / 3; border-radius: var(--mvym-r-md); overflow: hidden; background: var(--mvym-surface-alt); } .mvym-extra__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mvym-extra__title { margin: 6px 0 8px; font-family: var(--mvym-font-display); font-size: var(--mvym-fs-card); line-height: 1.3; font-weight: 600; } .mvym-extra__title a { color: var(--mvym-ink); text-decoration: none; } .mvym-extra__title a:hover, .mvym-extra__title a:focus-visible { color: var(--mvym-accent); } .mvym-extra__excerpt { margin: 0; font-family: var(--mvym-font-body); font-size: 14.5px; line-height: 1.55; color: var(--mvym-ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Режим «сітка» — той самий патерн C2, але щільніший */ .mvym-extra__list--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: calc(var(--mvym-space) * 3); border-top: 0; } .mvym-extra__list--grid .mvym-extra__item { display: block; padding: 0; border-bottom: 0; } .mvym-extra__list--grid .mvym-extra__thumb { margin-bottom: calc(var(--mvym-space) * 1.5); aspect-ratio: 16 / 9; } /* ========================================================================== 6. Віджети сайдбару ========================================================================== */ .mvym-widget__list { margin: 0; padding: 0; list-style: none; } /* C3 split у вузькій колонці */ .mvym-widget__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: calc(var(--mvym-space) * 1.5); align-items: center; padding: calc(var(--mvym-space) * 1.5) 0; border-bottom: 1px solid var(--mvym-line); } .mvym-widget__item--noimg { grid-template-columns: minmax(0, 1fr); } .mvym-widget__item:last-child { border-bottom: 0; padding-bottom: 0; } .mvym-widget__thumb { display: block; width: 64px; aspect-ratio: 1 / 1; border-radius: var(--mvym-r-sm); overflow: hidden; background: var(--mvym-surface-alt); } .mvym-widget__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mvym-widget__title { margin: 0 0 4px; font-family: var(--mvym-font-display); font-size: 15.5px; line-height: 1.32; font-weight: 600; } .mvym-widget__title a { color: var(--mvym-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mvym-widget__title a:hover, .mvym-widget__title a:focus-visible { color: var(--mvym-accent); } /* * Віджет «записи з рубрики» — навмисно інший патерн, ніж у свіжих записів: * одна велика обкладинка зверху, під нею текстові рядки з рискою і посилання * на всю рубрику. Сайдбар не має виглядати як один блок, повторений двічі. */ .mvym-tw__cover { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: calc(var(--mvym-space) * 1.5); border-radius: var(--mvym-r-md); overflow: hidden; background: var(--mvym-surface-alt); } .mvym-tw__cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .mvym-tw__lead-title { margin: 0 0 5px; font-family: var(--mvym-font-display); font-size: 17px; line-height: 1.28; font-weight: 700; } .mvym-tw__lead--noimg .mvym-tw__lead-title { padding-left: calc(var(--mvym-space) * 1.5); border-left: 3px solid var(--mvym-accent); } .mvym-tw__lead-title a { color: var(--mvym-ink); text-decoration: none; } .mvym-tw__lead-title a:hover, .mvym-tw__lead-title a:focus-visible { color: var(--mvym-accent); } .mvym-tw__list { margin: calc(var(--mvym-space) * 2) 0 0; padding: calc(var(--mvym-space) * 2) 0 0; list-style: none; border-top: 2px solid var(--mvym-accent-soft); } .mvym-tw__row { margin: 0 0 calc(var(--mvym-space) * 1.25); } .mvym-tw__row a { display: block; position: relative; min-height: 40px; padding: 8px 0 8px calc(var(--mvym-space) * 2.5); font-family: var(--mvym-font-body); font-size: 14.5px; line-height: 1.45; color: var(--mvym-ink-muted); text-decoration: none; } .mvym-tw__row a::before { content: ""; position: absolute; top: 17px; left: 0; width: 10px; height: 2px; background: var(--mvym-accent); } .mvym-tw__row a:hover, .mvym-tw__row a:focus-visible { color: var(--mvym-accent); } .mvym-widget .mvym-tw__more { display: inline-block; margin-top: var(--mvym-space); font-family: var(--mvym-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--mvym-accent); text-decoration: none; } .mvym-widget .mvym-tw__more::after { content: " →"; } .mvym-widget .mvym-tw__more:hover, .mvym-widget .mvym-tw__more:focus-visible { color: var(--mvym-accent-hover); text-decoration: underline; } /* Список рубрик — власна розмітка замість wp_list_categories */ .mvym-catlist { margin: 0; padding: 0; list-style: none; } .mvym-widget .mvym-catlist__row { display: flex; align-items: center; justify-content: space-between; gap: var(--mvym-space); min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--mvym-line); font-family: var(--mvym-font-body); font-size: 15px; color: var(--mvym-ink); text-decoration: none; } .mvym-widget .mvym-catlist__row:hover .mvym-catlist__name, .mvym-widget .mvym-catlist__row:focus-visible .mvym-catlist__name { color: var(--mvym-accent); } .mvym-catlist > li:last-child > .mvym-catlist__row { border-bottom: 0; } .mvym-catlist__name::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px; vertical-align: middle; border-radius: var(--mvym-r-pill); background: var(--mvym-accent); } .mvym-catlist__count { font-size: var(--mvym-fs-meta); font-variant-numeric: tabular-nums; color: var(--mvym-ink-faint); } .mvym-catlist__children { margin: 0 0 0 14px; padding: 0; list-style: none; } /* Віджет у сайдбарі завжди на всю ширину колонки */ .sidebar-primary .widget .mvym-widget__list, .sidebar-primary .widget .mvym-catlist { width: 100%; } /* ========================================================================== 7. Картка запису у стрічці, на архівах і в пошуку ========================================================================== */ .mvym-feed-head { margin-top: calc(var(--mvym-space) * 2); } .mvym-card__cover { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mvym-surface-alt); } .mvym-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .mvym-card:hover .mvym-card__cover img { transform: scale(1.03); } .mvym-card .post-title { margin: 0 0 8px; font-family: var(--mvym-font-display); font-size: 23px; line-height: 1.22; font-weight: 700; } .mvym-card .post-title a:link, .mvym-card .post-title a:visited { color: var(--mvym-ink); text-decoration: none; } .mvym-card .post-title a:hover, .mvym-card .post-title a:focus-visible { color: var(--mvym-accent); } .mvym-card__excerpt { margin: 0 0 calc(var(--mvym-space) * 2.5); font-family: var(--mvym-font-body); font-size: 15.5px; line-height: 1.65; color: var(--mvym-ink-muted); } .mvym-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--mvym-space) * 2.5); padding-top: calc(var(--mvym-space) * 2); border-top: 1px solid var(--mvym-line); } .mvym-card__more:link, .mvym-card__more:visited { display: inline-flex; align-items: center; min-height: 40px; padding: 0 calc(var(--mvym-space) * 2.5); border: 1px solid var(--mvym-accent); border-radius: var(--mvym-r-pill); font-family: var(--mvym-font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--mvym-accent); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .mvym-card__more::after { content: " →"; padding-left: 6px; } .mvym-card__more:hover, .mvym-card__more:focus-visible { background: var(--mvym-accent); color: var(--mvym-ink-invert); } /* Посилання на коментарі підганяємо під підвал картки */ .mvym-card__foot .comments-link { font-family: var(--mvym-font-body); font-size: 13.5px; color: var(--mvym-ink-faint); } .mvym-card__foot .comments-link a:link, .mvym-card__foot .comments-link a:visited { color: var(--mvym-ink-muted); text-decoration: none; } .mvym-card__foot .comments-link a:hover, .mvym-card__foot .comments-link a:focus-visible { color: var(--mvym-accent); } /* * Period роздає всім білим карткам квадратні кути. Закруглюємо їх усі однаково, * а не саме зображення: інакше на кутах мініатюри вилазять білі клини картки. * overflow на article потрібен, щоб мініатюра підхопила радіус блоку. */ .loop-container .entry > article, .sidebar-primary .widget, .search-bottom, .pagination, .comment-pagination, .comments-closed, .comments-number, li.comment > article, li.pingback > article, .comment-respond { border-radius: var(--mvym-r-lg); } .loop-container .entry > article { overflow: hidden; } /* Порожній стан */ .mvym-empty { margin: 0; padding: calc(var(--mvym-space) * 3); border: 1px dashed var(--mvym-line-strong); border-radius: var(--mvym-r-md); font-family: var(--mvym-font-body); font-size: 15px; color: var(--mvym-ink-muted); background: var(--mvym-surface-alt); } /* ========================================================================== 8. Сторінка запису ========================================================================== */ .mvym-progress { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 3px; background: transparent; pointer-events: none; } .mvym-progress__bar { display: block; height: 100%; width: 0; background: var(--mvym-accent); transform-origin: 0 50%; } @media (prefers-reduced-motion: reduce) { .mvym-lead__img, .mvym-pick__thumb img { transition: none; } } /* Автозміст зі scrollspy */ .mvym-toc { margin: calc(var(--mvym-space) * 3) 0; padding: calc(var(--mvym-space) * 2.25) calc(var(--mvym-space) * 2.5); border: 1px solid var(--mvym-line); border-left: 3px solid var(--mvym-accent); border-radius: var(--mvym-r-md); background: var(--mvym-surface-alt); } .mvym-toc__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--mvym-space); width: 100%; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-ink); text-align: left; } .mvym-toc__chev { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--mvym-ink-muted); border-bottom: 2px solid var(--mvym-ink-muted); transform: rotate(45deg); transition: transform 0.2s ease; } .mvym-toc__toggle[aria-expanded="false"] .mvym-toc__chev { transform: rotate(-45deg); } .mvym-toc__list { margin: calc(var(--mvym-space) * 1.5) 0 0; padding: 0; list-style: none; counter-reset: mvym-toc; } .mvym-toc__list[hidden] { display: none; } .mvym-toc__item { counter-increment: mvym-toc; margin: 0 0 6px; } .mvym-toc__item--sub { margin-left: calc(var(--mvym-space) * 2.5); } .mvym-single .mvym-toc__link { display: block; padding: 5px 0 5px 12px; border-left: 2px solid transparent; font-family: var(--mvym-font-body); font-size: 14.5px; line-height: 1.45; color: var(--mvym-ink-muted); text-decoration: none; } .mvym-single .mvym-toc__link:hover, .mvym-single .mvym-toc__link:focus-visible { color: var(--mvym-accent); } .mvym-single .mvym-toc__link.is-current { border-left-color: var(--mvym-accent); color: var(--mvym-ink); font-weight: 600; } /* Врізка «читайте також» усередині тексту */ .mvym-tip { margin: calc(var(--mvym-space) * 3) 0; padding: calc(var(--mvym-space) * 2) calc(var(--mvym-space) * 2.5); border-left: 3px solid var(--mvym-accent); border-radius: 0 var(--mvym-r-md) var(--mvym-r-md) 0; background: var(--mvym-accent-soft); font-family: var(--mvym-font-body); font-size: 15.5px; line-height: 1.5; } .mvym-tip__label { display: block; margin-bottom: 4px; font-size: var(--mvym-fs-kicker); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-accent); } .mvym-single .mvym-tip__link { color: var(--mvym-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--mvym-line-strong); } .mvym-single .mvym-tip__link:hover, .mvym-single .mvym-tip__link:focus-visible { color: var(--mvym-accent); border-bottom-color: var(--mvym-accent); } /* Блок автора (E-E-A-T) */ .mvym-author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: calc(var(--mvym-space) * 2.5); align-items: start; margin: calc(var(--mvym-space) * 4) 0; padding: calc(var(--mvym-space) * 3); border: 1px solid var(--mvym-line); border-radius: var(--mvym-r-md); background: var(--mvym-surface); } .mvym-author__avatar { width: 72px; height: 72px; border-radius: var(--mvym-r-pill); overflow: hidden; background: var(--mvym-surface-alt); } .mvym-author__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--mvym-r-pill); } .mvym-author__role { margin: 0 0 4px; font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-ink-faint); } .mvym-author__name { margin: 0 0 8px; font-family: var(--mvym-font-display); font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--mvym-ink); } .mvym-author__bio { margin: 0 0 10px; font-family: var(--mvym-font-body); font-size: 15px; line-height: 1.6; color: var(--mvym-ink-muted); } .mvym-author__links { display: flex; flex-wrap: wrap; gap: calc(var(--mvym-space) * 2); font-family: var(--mvym-font-body); font-size: 13.5px; } .mvym-author__links a { color: var(--mvym-accent); text-decoration: none; font-weight: 600; } .mvym-author__links a:hover, .mvym-author__links a:focus-visible { text-decoration: underline; } /* Шеринг */ .mvym-share { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--mvym-space) * 1.25); margin: calc(var(--mvym-space) * 3) 0; padding-top: calc(var(--mvym-space) * 2); border-top: 1px solid var(--mvym-line); } .mvym-share__label { margin: 0 calc(var(--mvym-space)) 0 0; font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-ink-faint); } .mvym-single .mvym-share__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 calc(var(--mvym-space) * 2); border: 1px solid var(--mvym-line); border-radius: var(--mvym-r-pill); background: var(--mvym-surface); font-family: var(--mvym-font-body); font-size: 13.5px; font-weight: 600; color: var(--mvym-ink); text-decoration: none; cursor: pointer; } .mvym-single .mvym-share__btn:hover, .mvym-single .mvym-share__btn:focus-visible { border-color: var(--mvym-accent); color: var(--mvym-accent); } .mvym-single .mvym-share__btn.is-done { border-color: var(--mvym-accent); background: var(--mvym-accent-soft); color: var(--mvym-accent); } /* Попередня / наступна стаття */ .single .further-reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--mvym-space) * 2.5); margin: calc(var(--mvym-space) * 4) 0 0; padding-top: calc(var(--mvym-space) * 3); border-top: 1px solid var(--mvym-line); } /* * Period робить ці дві колонки inline-block по 50% з від'ємним margin-right. * У гриді від цього виходять дві вузькі картки посеред порожніх комірок, * а праву ще й вирівнює по правому краю — знімаємо все й даємо комірці рости. */ .single .further-reading > div { width: auto; display: block; margin: 0; padding: calc(var(--mvym-space) * 2.25); border: 1px solid var(--mvym-line); border-radius: var(--mvym-r-md); background: var(--mvym-surface); text-align: left; transition: border-color 0.2s ease; } .single .further-reading > div:hover { border-color: var(--mvym-accent); } .single .further-reading span { display: block; margin-bottom: 8px; font-family: var(--mvym-font-body); font-size: var(--mvym-fs-kicker); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mvym-track-caps); color: var(--mvym-ink-faint); } .single .further-reading .previous span::before { content: "← "; } .single .further-reading .next span::after { content: " →"; } .single .further-reading a { font-family: var(--mvym-font-display); font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--mvym-ink); text-decoration: none; } .single .further-reading a:hover, .single .further-reading a:focus-visible { color: var(--mvym-accent); text-decoration: none; } /* Тіло статті: комфортна довжина рядка й кегль */ .single .post-content { font-family: var(--mvym-font-body); font-size: 17.5px; line-height: 1.7; color: var(--mvym-ink); } .single .post-content h2, .single .post-content h3 { font-family: var(--mvym-font-display); line-height: 1.25; scroll-margin-top: calc(var(--mvym-space) * 5); } .single .post-title { font-family: var(--mvym-font-display); line-height: 1.18; } /* ========================================================================== 9. Шапка: логотип і меню в один ряд ========================================================================== */ .mvym-logo { display: inline-block; max-width: 100%; } .mvym-logo__img { display: block; width: 189px; max-width: 100%; height: auto; } /* * Period складає логотип і меню у два поверхи (title-container float:left, * меню під ним), через що праворуч у шапці лишається порожня половина екрана. * Від 56.25em — того самого брейкпоінта, на якому батько ховає кнопку меню, — * розкладаємо їх в один ряд. Нижче цієї межі мобільна поведінка не змінюється. */ @media all and (min-width: 56.25em) { .site-header { padding-bottom: 6.5em; } .site-header .max-width { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--mvym-space) * 5); } .site-header .title-container { float: none; flex: 0 0 auto; margin-bottom: 0; } .site-header .menu-primary-container { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; gap: calc(var(--mvym-space) * 3); margin-bottom: 0; } /* пошук і соцмережі — праворуч від пунктів меню */ .site-header .icon-container { order: 2; flex: 0 0 auto; } .site-header .menu-primary { clear: none; margin: 0; } /* * wp_nav_menu загортає список у