hero).
Tezisy-6 (end-of-summer session) п.1: "2fr 1fr" was only an
APPROXIMATION of two-thirds - a single 44px gap for 2 tracks doesn't
consume the same space as the real standard grid's two 16px gaps for
3 tracks, so Cover Story was never actually exactly as wide as two
standard columns. Fixed the same way as tezisy-5 п.4's featured-card
alignment: this IS the real reference grid now (repeat(3,1fr),
gap:16px, identical to .vp-feed-regular-grid), with the cover column
spanning tracks 1-2 and the sidebar getting track 3 - Cover Story's
width is exactly 2 standard columns and the sidebar is exactly 1, by
construction, not by approximation. */
.vp-home-top {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: start;
/* Tezisy-6 (follow-up): every card-to-card distance on the page is now the same
16px standard gap (see below) - the header-to-Cover-Story distance
should read as "the standard gap, plus a deliberate 20px" (36px),
not the generic 40px every other page's .vp-main padding-top gives
it. Pulling this one element up instead of touching .vp-main itself
keeps every other page's own header-gap math (section-title
centering, etc.) completely untouched.
Tezisy-7 п.5: another 10px off that 36px (was margin-top:-4px,
40-4=36) - 40-14=26px now.
Tezisy 1.9-3 п.2: -1/3 of that 26px gap = 17.33px target, so
margin-top = -(40-17.33) = -22.67px. */
margin-top: -22.67px;
}
.vp-home-cover-col { grid-column: 1 / 3; }
/* Tezisy-6 (follow-up): the standard 16px gap comes from a real flex
`gap` now, not margins on the children - .vp-excursions-box and
.vp-article-list each carry their OWN `margin: 24px 0` for their other
(non-sidebar) uses, which was fighting the previous margin-based
approach in two ways: equal-specificity rules lost to source order for
margin-TOP, and even where they didn't, adjacent block margins
COLLAPSE to the larger value rather than adding, so a 16px override
next to a 24px neighbor silently rendered as 24px. `gap` sidesteps
both problems, as long as each child's own margin is zeroed instead
(see the two rules below) so it can't add on top of the gap. */
/* 2026-09-03: min-width:0 is load-bearing, not decorative. Without it,
this grid item's automatic minimum size is its min-content - and
.vp-article-list li a below is `white-space: nowrap`, so its
min-content EQUALS its full unwrapped text width. A "Новое на сайте"
article whose title happens to be long (any article without a short
translation for the current $lang - i.e. the RU fallback title, which
is often a long descriptive sentence rather than a short headline)
forced this 1-of-3 track past its 1fr share, stealing width from the
cover column (grid-column 1/3) and visibly inverting the 2:1 cover:
sidebar ratio - reported as the Home page "mirroring" on every
language except the 4 with full title coverage for that slot's
article. min-width:0 caps the grid item at 0 instead, so the actual
1fr track sizing wins and the anchor's own overflow:hidden +
text-overflow:ellipsis (already on .vp-article-list li a) does the
truncating job it was always meant to do. */
.vp-home-top-sidebar { grid-column: 3 / 4; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Tezisy-7 п.5: the gap between the top section (cards 1-3: Cover Story
+ the 2 teasers) and home_feed's own first featured card (card 4)
must be the same standard 16px as everything else - home_feed's own
output is just `.vp-section-feed` (see inc/blocks.php), which carries
its OWN margin-top:28px for its OTHER use on real Section pages
(tuned there for a specific header/title-centering reason - left
alone). Scoping the override to "a .vp-section-feed that comes right
after .vp-home-top" (only ever true on the Home page) - higher
specificity than that base rule, so no risk of losing to source order
or collapsing the way tezisy-6's sidebar fix did. */
.vp-home-top + .vp-section-feed { margin-top: 16px; }
@media (max-width: 780px) {
.vp-home-top { grid-template-columns: minmax(0, 1fr); }
.vp-home-cover-col, .vp-home-top-sidebar { grid-column: 1; }
.vp-header-main { flex-wrap: wrap; row-gap: 8px; }
h1 { font-size: 26px; }
.vp-contributor-page-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.vp-contributor-card-link { flex-direction: column; }
/* Tezisy 1.9-2 п.6: -20% (was 80px). */
.vp-contributor-photo, .vp-contributor-card-link .vp-contributor-photo--placeholder { width: 64px; }
}
html[data-fontsize="large"] .vp-main { font-size: 1.1em; }
html[data-fontsize="xlarge"] .vp-main { font-size: 1.22em; }
/* --- section pages: article + kaleidoscope-snippet card grid --- */
.vp-section-title {
font-size: 30px; text-align: center;
/* Tezisy-2 п.7: 10% lighter (blend 10% white into #4d4d4d/77,77,77):
77*0.9 + 255*0.1 = 69.3 + 25.5 = 94.8 -> 95 = #5f5f5f */
color: #5f5f5f;
/* Centered vertically between the header and the first card: the gap
above (.vp-main's own 40px top padding) must equal the gap below.
.vp-section-feed's own top margin is 28px (tuned separately, left
alone), so this margin is set to 40-28=12 to make the two gaps match
exactly (40px header-to-title, 12+28=40px title-to-first-card). */
margin: 0 0 12px;
/* Tezisy-5 п.2: still reads as below-center in the space between the
header and the first card - raise the text 10px WITHOUT changing
that space's total height. A transform doesn't affect layout/margins
at all (unlike changing the margin split, which would need reworking
the exact 12px value above and would move where the NEXT element
starts) - the title's box stays exactly where it was, only its
painted position shifts up. */
transform: translateY(-10px);
}
.vp-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
margin: 28px 0 60px;
}
.vp-card {
border-radius: 0; /* original site's own .panel has no radius either */
/* Was overflow:hidden - had to relax it so the new share-widget
dropdown (tezisy п.8, an absolutely-positioned popup) isn't clipped
by its own card. Nothing here actually depended on the clip: there
is no border-radius to conform to, and both the image (object-fit)
and clamped title/excerpt text already self-clip on their own boxes. */
overflow: visible;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.vp-card--article .vp-card-link:hover h3,
.vp-card--product:hover h3 { color: #2eaadc; }
/* Every card in a .vp-card-grid - article, date, quote, product alike -
shares one fixed box size, on every page that uses the grid. Content
that varies (title/excerpt length, presence of a photo) is clamped or
flex-pinned to fit instead of changing the box, so a row never mixes
card heights.
Tezisy 1.9-2(2) п.7: -20px (400->360... 380->360) - .vp-card-body has
no flex-grow of its own, so the leftover space in .vp-card-link's own
flex:1 column (media is a fixed 150px, body's h3/p are line-clamped to
a fixed content height) was rendering as dead white space between the
end of the excerpt and .vp-card-meta below it (a DIFFERENT flex child,
sibling to .vp-card-link, not inside it) - shrinking the shared box
height removes exactly that leftover space without touching the
fixed-size media, clamped text, or meta row at all. */
.vp-card-grid .vp-card { aspect-ratio: auto; height: 360px; }
/* Владелец (13.09.2026): на стандартных карточках-анонсах Главной и
страниц разделов анонс (excerpt) убран целиком - остаётся только
заголовок, и он должен помещаться ЦЕЛИКОМ любой длины (никакого
line-clamp/обрезания). Высота карточки при этом должна визуально
совпадать с большой горизонтальной (featured) карточкой - взято как
min-height (не фиксированный height), чтобы очень длинный заголовок
всё равно мог вытолкнуть карточку выше этого значения, а не обрезаться
- оба требования владельца одновременно ("помещаться целиком" и
"высота как у featured") иначе противоречили бы друг другу. Селекторы
намеренно с префиксом контейнера (.vp-card-grid/.vp-feed-regular-grid/
.vp-home-teasers), чтобы специфичность гарантированно перебивала
соседний .height:360px без !important - карточки с анонсом (map.php,
"Читайте также" на article.php, тизеры не тронуты) остаются как были.
Значение высоты - измеренное вживую (getBoundingClientRect) у реальной
featured-карточки на section.php, не подобрано на глаз. */
.vp-card-grid .vp-card.vp-card--no-excerpt,
.vp-feed-regular-grid .vp-card.vp-card--no-excerpt,
.vp-home-teasers .vp-card.vp-card--no-excerpt {
height: auto; min-height: 333px;
}
.vp-card--article.vp-card--no-excerpt .vp-card-body { overflow: visible; }
.vp-card--article.vp-card--no-excerpt h3 {
display: block; -webkit-line-clamp: unset; overflow: visible;
}
/* Владелец (16.09.2026): анонс теперь и в десктопной версии тоже - под
заголовком, обрезан по 3 строкам с многоточием (та же клэмп-логика,
что уже задана ниже в базовом .vp-card--article p, раньше просто
перебивавшаяся этим же правилом с display:none - карточка height:
360px константа, поэтому клэмп обязателен, а не auto-рост). На
мобильном (см. media-запрос ниже) клэмп снимается - там высота
карточки подстраивается под содержимое. */
.vp-card--article { background: #fff; border: 1px solid #eee; }
.vp-card--article .vp-card-link { display: flex; flex-direction: column; flex: 1; min-height: 0; text-decoration: none; color: inherit; }
/* Wraps just the illustration, so the date badge (tezisy п.10) can be
pinned to ITS corner without affecting the card body's own layout. */
.vp-card--article .vp-card-media { position: relative; flex-shrink: 0; height: 150px; }
.vp-card--article .vp-card-img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; display: block; }
/* Tezisy п.10: publication date moves onto the illustration's top-left
corner (was in .vp-card-meta, opposite the author) - matches the
original site's own small-card layout (.panel-time over the image). */
.vp-card-date-badge {
position: absolute; top: 8px; left: 8px;
background: rgba(0,0,0,0.6); color: #fff;
font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.3;
padding: 3px 8px; border-radius: 3px;
}
.vp-card--article .vp-card-body { padding: 12px 14px; font-family: system-ui, sans-serif; overflow: hidden; }
.vp-card--article h3 {
/* Tezisy 1.9 п.9: +5px gap to the first line of text (was 6px) - the
new reference value the featured card's own gap gets matched against
below.
Вечерние тезисы 2026-09-03 п.6: +2 "typographic points" on the
heading kegl - this codebase's own established rounding for that
unit (1pt -> a clean 1.5px, see .vp-card-meta/.vp-card--cover's own
comments) makes 2pt a clean +3px: 17 -> 20px. */
font-size: 20px; margin: 0 0 11px; font-family: 'Bitter', Georgia, serif; line-height: 1.25;
/* Владелец (16.09.2026): "на всех карточках-анонсах в десктопной
версии убрать ограничение по размеру для заголовков - поместятся и
в 4, и даже в 5 строк" - клэмп снят на десктопе тоже (было 2 строки,
не только на мобильном). */
display: block; overflow: visible;
}
.vp-card--article p {
font-size: 14.5px; color: #666; margin: 0; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Author name (link to their contributor.php page, accent color +
underline so it visibly reads as a hyperlink) on the left, the share
widget (tezisy п.10: now lives where the date used to be) on the
right - opposite corners of the card. No contributor linked -> plain
non-link text; no author at all -> the corner is just empty, the
share widget still shows on the right. */
.vp-card-meta {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
/* Tezisy-2 п.5: this block must sit equidistant from the panel's
bottom edge as it is from the left/right edges (14px) - it used to
have 0 bottom padding, sitting flush against the card's own border,
while keeping 14px on the sides. Only the illustration is allowed to
bleed to an edge; every other element (this row included) keeps a
uniform inset. */
padding: 0 14px 14px;
margin-top: 6px;
/* Tezisy п.9: author/date text +1 step (was 11.5px) - 1 "typographic
point" (~1.33px) rounded to a clean +1.5px. */
font-family: system-ui, sans-serif; font-size: 13px; color: #999;
}
.vp-card-author, .vp-card-author--plain {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.vp-card-author { color: #2eaadc; text-decoration: underline; }
.vp-card-author--plain { color: #999; text-decoration: none; }
/* Cards for content that has no photo yet (real migration is still in
progress) get a same-size neutral slot instead of just losing the
image and leaving the text floating with a gap before the share row -
keeps every card the same shape whether or not it has a picture. */
.vp-card-img--placeholder {
background: linear-gradient(135deg, #f1e9e4, #e6d9cd);
}
/* --- section pages: featured-item feed (original-site composition:
3 groups of 1 featured + 6 regular = 21 items before "load more",
3 columns for the regular cards instead of the flat auto-fill grid
drifting to 4-5 columns on wide screens) --- */
/* Owner: no 3 real "blocks" here, just one continuous feed where
positions 1/8/15 happen to be the large featured cards - so every gap
(between groups, between a featured card and its row, within a row)
must be the SAME value, not larger around the featured ones. Also
reduced 20% (0.8x) from the original 20px, freeing that space for
wider columns/images (grid `1fr` tracks absorb it automatically). */
.vp-section-feed { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 0; }
.vp-feed-group { display: flex; flex-direction: column; gap: 16px; }
/* Владелец 10.10.2026: на узких телефонах (320-360px) последние карточки
были шире остальных и страница двигалась влево-вправо - колонка 1fr
= minmax(auto,1fr) не сжимается уже min-content карточки, а это строка
автора+иконок (white-space:nowrap; длинное имя вроде "Константин
Карчевский" = 297px при колонке 257px). minmax(0,1fr) - колонка всегда
равна доступной ширине, имя обрезается многоточием (уже было задано
у .vp-card-author). Так же во всех сетках карточек ниже. */
.vp-feed-regular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Вечерние тезисы 2026-09-03 п.7: another -20px (380->360). Measured live
before touching this: the gap between the excerpt's own bottom and
.vp-card-meta below it (dead space in .vp-card-link's flex:1 column,
same mechanism as the 400->380 cut noted above) was 80px, so this
comes entirely out of that leftover space - media height, the h3/p
line clamps, and .vp-card-meta's own size are all untouched; only the
blank gap between them shrinks (80px -> 60px), which is what keeps
every element "in its place" per the explicit ask. */
.vp-feed-regular-grid .vp-card { height: 360px; }
/* Tezisy-2 п.7: on the big horizontal cards (feed positions 1/8/15),
every element - image included this time - sits at an equal distance
from the panel's edges, 15% more than the standard card's 14px:
14 * 1.15 = 16.1px. This is the opposite illustration rule from the
small cards (image bleeds to the edge there) - confirmed against the
original site's own big blocks, where the illustration is ALSO inset,
which is what visually ties it to the text next to it instead of
reading as a separate strip. */
/* Tezisy-3 п.5: the author (+ share) has to live in the text column, not
in a strip under the photo - but vp_share_row() contains its own
tags and a , so it CANNOT be nested inside .vp-card-link
(an ) without the browser silently closing that outer link early
(confirmed live - it was breaking .vp-card-link into two pieces).
Solution: .vp-card itself becomes the grid, .vp-card-link gets
display:contents (so its own box disappears from layout but its
children still render - and clicking any of them still activates the
link, since it's still the actual DOM ancestor) so .vp-card-media and
.vp-card-body become direct grid items, and .vp-card-meta - a real
DOM sibling of .vp-card-link, never inside it - slots into the same
grid as its own item in the text column's bottom row. */
/* Tezisy-5 п.4: the image/text boundary must land EXACTLY where it would
if this same row were divided into the .vp-feed-regular-grid below it
(repeat(3,1fr), gap:16px) - image right edge flush with column 2's
right edge, text left edge flush with column 3's left edge. Rather
than reverse-engineering that boundary with calc() math, this grid
just IS that reference 3-column grid (same track/gap definition) -
image spans tracks 1-2 (its right edge lands exactly at column 2's own
right edge, by how column-spanning works), text spans track 3 only (its
left edge lands exactly at column 3's own left edge). No outer padding
on the card itself, or the reference coordinate frame would be off by
that amount relative to the real grid below - image is full-bleed on
its 3 outer sides (matching how a regular small card's image already
bleeds), text gets its own inset instead (see below). */
.vp-card--featured.vp-card--article {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Tezisy-7 п.1: rows are auto now (were "1fr auto") - the image's own
aspect-ratio (below) is what should determine this card's height,
not a flexible track stretching to fill whatever the text column
happens to need. */
grid-template-rows: auto auto;
gap: 16px;
padding: 0;
}
.vp-card--featured.vp-card--article .vp-card-link { display: contents; }
/* Tezisy-7 п.1: the white "frame" around the illustration is back - top/
bottom/left padding on the wrapper (revealing the card's own white
background through it), right stays at 0 so that edge is still flush
with column 2's own right edge exactly as before (untouched per the
owner's own "ничего не надо менять" on that side). 16px matches the
site's one standard gap value, same as every other card-to-card
distance. height:auto (was 100%, which needed row 1 to already have a
size to stretch into) - now the image's own aspect-ratio decides the
height, and this wrapper (spanning both rows) just follows it. */
.vp-card--featured.vp-card--article .vp-card-media {
grid-column: 1 / 3; grid-row: 1 / span 2;
width: 100%; height: auto;
padding: 16px 0 16px 16px;
box-sizing: border-box;
}
/* Tezisy-9 п.5: ratio changed again, deliberately - matches a STANDARD
card's own illustration proportions now (340px column / 150px fixed
media height, measured live at this project's usual 1400px reference
viewport = 34:15 ≈ 2.267:1), not the 3:2 tezisy-7 set. Cover Story is
explicitly excluded from this (keeps its own 16:9, see п.1 above) -
this is only about making every OTHER card's illustration read as the
same "wide filmstrip" shape. Still fixed/locked (never a free-floating
value) and still the real "кадрирование" via object-fit:cover on
whichever photo doesn't already match. */
.vp-card--featured.vp-card--article .vp-card-img {
aspect-ratio: 34 / 15;
height: auto;
}
.vp-card--featured.vp-card--article .vp-card-img--placeholder {
aspect-ratio: 34 / 15;
min-height: 0;
}
/* Tezisy-9 п.6: the date badge's own top:8px/left:8px (base rule,
shared with every card) is measured from .vp-card-media's OWN edge,
which tezisy-7's white-frame padding (16px top/left, above) moved the
ACTUAL PHOTO 16px inward from - without this override the badge sits
in the white frame gap, not on the photo at all (confirmed live: it
had drifted off the image entirely). +16 to both offsets lands it
back at a true 8px inset from the photo's own edge, matching every
standard card. */
.vp-card--featured.vp-card--article .vp-card-date-badge {
top: 24px;
left: 24px;
}
/* Text width = a regular card's own text width (column width - 2*14px
padding) + 14px (the left inset small cards have) - i.e. flush left at
the column boundary, with only the usual 14px kept on the right/top/
bottom, per the owner's own formula. */
/* Tezisy 1.9-2 п.9: text column narrowed 3px, given straight to the gap
from the illustration - a left padding on the body itself (previously
0) rather than touching the grid's own gap/track sizing, which would
also shift the untouched media column's width via the shared 3-track
`gap` math above. */
/* Владелец 22.10.2026: справа текст отступает от края карточки в полтора
раза больше, чем слева от иллюстрации (слева 16px gap + 3px = 19px,
справа должно быть 28.5px; 27.8px padding + ~0.7px рамки карточки,
измерено живьём на 1400px). То же справа у строки Автор/Поделиться. */
.vp-card--featured.vp-card--article .vp-card-body { grid-column: 3 / 4; grid-row: 1; padding: 16px 27.8px 0 3px; }
/* Tezisy 1.9 п.9: real bug found while checking this - row 2 (this grid
cell) was being stretched taller than its own content by the image
item spanning both rows (grid-row:1/span 2 needs more height than row
1 alone provides, and the extra gets distributed onto row 2), so
`.vp-card-meta`'s default stretch + its own `align-items:center` was
centering the author/share row in the MIDDLE of that oversized cell,
nowhere near the card's actual bottom edge - not "firmly standing" at
all. `align-self:end` collapses it back to its own natural content
height and anchors it to the cell's bottom edge instead; padding-bottom
changed 16px -> 14px to match a standard card's own distance exactly,
per the owner's explicit ask (not the usual 16.1px "everything scaled
up" convention used elsewhere on this card type). */
@media (min-width: 601px) {
.vp-card--featured .vp-card-meta { grid-column: 3 / 4; grid-row: 2; align-self: end; padding: 0 27.8px 14px 0; margin-top: 0; }
}
/* Tezisy 1.9-2(2) п.2, corrected: RIGHT not left (owner's own follow-up
correction) - this actually ALIGNS the author link with the heading
above it, both now 3px right of the original shared 642.9px edge
(the heading's own text moved right when its padding-left went 0->3px
in the previous pass; the author link had stayed behind at the old
edge until this rule brought it in line). Scoped to .vp-card-author
only, not .vp-card-meta as a whole, so the share icons on the right
side of the same flex row don't move. */
@media (min-width: 601px) {
.vp-card--featured.vp-card--article .vp-card-author { margin-left: 3px; }
}
.vp-card--featured.vp-card--article h3 { font-size: 26.5px; display: block; overflow: visible; }
.vp-card--featured.vp-card--article p { font-size: 14.5px; -webkit-line-clamp: 5; }
.vp-card--featured.vp-card--date,
.vp-card--featured.vp-card--quote { padding: 40px; }
.vp-card--featured.vp-card--date .vp-card-date-big { font-size: 22px; }
.vp-card--featured.vp-card--quote p { font-size: 18px; -webkit-line-clamp: 8; }
@media (max-width: 900px) {
.vp-feed-regular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.vp-feed-regular-grid { grid-template-columns: minmax(0, 1fr); }
/* Владелец (16.09.2026): "имеет смысл отказаться от деления в
мобильной версии карточек на большие и стандартные - все
карточки-анонсы должны наполняться по одному паттерну: картинка с
датой сверху, полный заголовок, полный анонс, автор слева/
Поделиться справа снизу. Константы: мин. высота карточки, высота
картинки, расстояния между элементами, кегль/интерлиньяж текста."
Featured-карточка раньше отдельно перестраивалась на CSS Grid при
900px - теперь ровно тот же брейкпоинт (600px) и тот же механизм
(flex-колонка), что у стандартных и Cover Story карточек ниже -
никакого собственного макета не остаётся, только сам контент может
быть длиннее/короче. */
.vp-card--featured.vp-card--article {
display: flex; flex-direction: column; gap: 0;
}
.vp-card--featured.vp-card--article .vp-card-media {
width: 100%; height: 150px; padding: 0;
}
/* Владелец 27.09.2026: на мобильном featured-картинка (1/8/15 на
Разделах, 4/11 на Главной) держала десктопный aspect-ratio:34/15,
который на 150px-контейнере при мобильной ширине даёт ~143.5px -
6.5px пустоты над заголовком ("как будто пустая строка"). Стандартные
карточки просто растягивают img на всю высоту контейнера
(object-fit:cover уже кадрирует) - делаем то же самое здесь. */
.vp-card--featured.vp-card--article .vp-card-img,
.vp-card--featured.vp-card--article .vp-card-img--placeholder {
aspect-ratio: auto; height: 100%;
}
.vp-card--featured.vp-card--article .vp-card-date-badge { top: 8px; left: 8px; }
.vp-card--featured.vp-card--article .vp-card-body { padding: 12px 14px 0; }
/* Кегль - тот же, что у стандартных карточек (20px/14.5px), не свои
desktop-увеличенные 22px - константа "кегль и интерлиньяж" из
задачи. .vp-card-meta НЕ переопределяем вовсе - наследует базовое
margin-top:6px/padding:0 14px 14px, тот же зазор, что у всех. */
.vp-card--featured.vp-card--article h3 { font-size: 20px; }
.vp-card--featured.vp-card--article p {
font-size: 14.5px; display: block; -webkit-line-clamp: unset; overflow: visible;
}
/* Cover Story - уже почти совпадала (высота картинки/кегли те же),
недоставало только общей константы минимальной высоты. */
.vp-card--cover.vp-card--article { min-height: 333px; }
/* Общая минимальная высота карточки-анонса - единая на все три типа
(была 360px фиксированных у каждой отдельно, для no-excerpt -
min-height:333px - теперь ВСЕ карточки-анонсы, с анонсом или без,
ведут себя одинаково: высота = содержимое, но не меньше 333px). */
.vp-card-grid .vp-card,
.vp-feed-regular-grid .vp-card,
.vp-home-teasers .vp-card {
height: auto; min-height: 333px;
}
/* Featured-карточка живёт СНАРУЖИ .vp-feed-regular-grid (в своей
.vp-feed-group обёртке, см. vp_render_feed_batch) - три правила
выше её не находят, добираем отдельно. */
.vp-card--featured.vp-card--article { min-height: 333px; }
/* Владелец 16.09.2026 (map.php поз. 1/8/15, "подшаманить"): когда
заг+анонс короче пола min-height, остаток раньше повисал ПОСЛЕ
Автор/Поделиться, а не перед ним - блок "подпрыгивал" вверх от
края плашки. Прижимаем к низу тем же приёмом margin-top:auto,
что уже применён у .vp-excursions-box. */
.vp-card--featured.vp-card--article .vp-card-meta { margin-top: auto; }
}
/* Tezisy-4 п.1: Cover Story card - the single biggest announcement card
on the site (top-left of Home, 2/3 width). Structurally the plain
.vp-card--article shape (full-bleed image, NOT the featured card's
1.15x inset - the brief calls for the same standard elements, just
scaled up), so this is purely a sizing override: aspect-ratio instead
of a guessed fixed height keeps the illustration full-bleed at any
width the 2/3 column resolves to. Title 18-20px per the brief despite
being the "biggest" card - that refers to overall footprint, not type
size; 19px is the range's midpoint. */
/* Tezisy 1.9-2 п.3/5: Cover Story's total height is now a hard constant
(628px, box-sizing:border-box so the 1px border is included) instead of
"whatever the aspect-ratio image + fixed text zones happen to sum to" -
overflow:hidden as a hard backstop. Combined with .vp-card-media's own
fixed height right below (396px) and body/meta's already-fixed 186+44,
the three parts sum to exactly this by construction (396+186+44+2=628),
so this is belt-and-suspenders, not load-bearing on its own - but
matches the same explicit-height treatment every other element in this
6-card block now gets, per the owner's "железно, неизменяемо". */
.vp-card--cover.vp-card--article { height: 628px; overflow: hidden; box-sizing: border-box; }
/* Tezisy 1.9-2 п.3: switched from aspect-ratio (responsive, varied with
the column's own width) to a hard fixed height - the owner's explicit
ask was that NOTHING about these cards' sizing responds to content or
context anymore. object-fit:cover (inherited from the shared
.vp-card--article .vp-card-img rule) crops the photo to fill this
fixed box at any column width, same convention the small teaser cards
already use for their own 150px media. min-height:0 still needed - see
the flex min-height:auto note this replaces (the underlying flex-item
bug this guarded against is still a risk with any fixed-height flex
child). */
.vp-card--cover .vp-card-media { height: 396px; min-height: 0; }
/* Tezisy-9 п.1: white field below the illustration doubled and matched
exactly to a standard card's own (230px = 380 total - 150 media,
measured live) - explicit heights on body+meta (186+44=230) rather
than reverse-engineering font/line-clamp metrics to land on the exact
figure by chance. Headline kegl doubled (19->38, this being the
"передовица" of the page) - line-clamp stayed at 2 lines (a real
2-line front-page headline, not a smaller single line), which is what
ate most of the newly-doubled field, so the meta-description paragraph
below it dropped from 3 lines to 2 to fit what's left. */
/* Владелец 07.10.2026: "в самом первом большом анонсе блок
Заголовок+Текст анонса поднять на 6 pix" - единственная карточка
с этим классом на сайте (hero_article/Cover Story, см.
vp_render_cover_card() в inc/blocks.php), значит никакую другую
карточку не задевает. Верхний padding -6px (18->12) - сам блок
(h3+p) сдвигается вверх на 6px внутри НЕИЗМЕННОЙ высоты 186px, так
что .vp-card-meta ниже не двигается.
Владелец 07.10.2026 (следом): "можно (и нужно) понять его ещё на
3 pix" - ещё -3px (12->9), итого -9px от исходных 18px. */
.vp-card--cover.vp-card--article .vp-card-body { padding: 7px 20px 18px; height: 186px; box-sizing: border-box; } /* Владелец 07.10.2026 (ещё раз): "давай ещё на 2 поднимем" - 9->7px (итого -11px от исходных 18px). */
/* Tezisy 1.9-2(2) п.9: Bitter had no bold version rendering here before -
no explicit font-weight meant the browser's own UA-stylesheet h3 bold
(which resolves to the family's 700 instance), now stepped up to the
family's real Black (900) instance instead, self-hosted above, for
more visual punch on the one heading this site treats as its biggest. */
.vp-card--cover.vp-card--article h3 { font-size: 42.5px; font-weight: 700; display: block; overflow: visible; }
/* Tezisy 1.9-2(2) п.9: +1 "point" on the excerpt, same rounding this
codebase always uses for that unit (~1.33px -> a clean 1.5px): 15 +
1.5 = 16.5px. */
.vp-card--cover.vp-card--article p { font-size: 16.5px; -webkit-line-clamp: 2; }
.vp-card--cover .vp-card-meta { padding: 0 20px 18px; height: 44px; box-sizing: border-box; }
/* Tezisy-5 п.9: two standard announcement cards right under Cover Story,
in the SAME left column (not spanning the sidebar too) - grid item
becomes [cover card, teasers row] stacked, sized independently of the
sidebar's own (shorter) content per .vp-home-top's align-items:start.
Tezisy-6 (follow-up): gap standardized to the same 16px used
everywhere else (was 24px). */
.vp-home-cover-col { display: flex; flex-direction: column; gap: 16px; }
/* Heading above the "Новое на сайте" list in the top sidebar (was a
separately-authored text block above .vp-article-list; now emitted by
the article_list block itself so the two can never drift apart). */
.vp-sidebar-heading {
font-family: 'Bitter', Georgia, serif; font-size: 18px; font-weight: 400;
color: #1a1a1a; margin: 0 0 4px;
}
/* Tezisy 1.9 п.7: bold on "Новое на сайте" specifically (its only real
call site, see the dark-card note above .vp-sidebar-block--dark). */
/* Tezisy 1.9-2 п.4: +10% on the heading-to-first-item gap specifically -
the first li's own 6.67px top padding was the whole gap (heading had
no margin-bottom of its own), so 6.67 * 1.1 = 7.34px total needs just
0.67px added here (doesn't touch the padding shared by every OTHER
item-to-item gap in the list). */
/* Вечерние тюн-тезисы 2026-09-03 п.9: heading +2pt (18 -> 21px, this
codebase's usual 1pt=1.5px), staying put - only the list below it
moves (see .vp-home-top-sidebar .vp-article-list's own margin-top). */
.vp-sidebar-block--dark .vp-sidebar-heading { font-weight: 700; font-size: 21px; margin-bottom: 0.67px; }
/* CTA inside the excursions box, linking to the real Excursions section
page - reuses the site's established secondary accent (#2eaadc) since
there is no public .vp-btn base style to build on (only an admin-
scoped one exists). Tezisy-7 п.6: own margin-top removed - it now
sits inside .vp-excursions-box-footer's flex row, whose OWN margin-top
provides the gap above; a margin here too would just push the button
out of line with the share icons beside it (flex items don't collapse
margins the way normal-flow siblings do). */
.vp-excursions-btn {
display: inline-block;
/* Tezisy 1.9-2 п.2: plate trimmed 3px on every side (was 10px 18px) -
same position, same font-size, just a more compact box around the
label. */
padding: 7px 15px; border-radius: 4px;
background: #2eaadc; color: #fff;
font-family: system-ui, sans-serif; font-size: 14px; font-weight: 600;
text-decoration: none; text-align: center;
}
.vp-excursions-btn:hover { background: #4bb9e3; }
/* Home-page pull-quote, sourced from a Publication article's own
quote_text/quote_author/quote_author_role fields (inc/blocks.php's
`quote` case). Reuses the existing in-article .vp-quote look (red
rule, italic) inside a white bordered card matching the excursions box
above it; text is 4-line-clamped per the brief, with a footer row
linking back to the source article (left) and a decorative share
widget (right). Selectors scoped under .vp-home-quote so they outrank
the generic `.vp-quote cite` rule (higher specificity) instead of
fighting it. */
/* Tezisy 1.9 п.6: -2px left/right, -5px top/bottom, same as
.vp-excursions-box right above it - together these two cards shrink
enough to match Cover Story's own height. */
/* Tezisy 1.9-2 п.3/5: hard fixed height, matching .vp-excursions-box's
own treatment right above it - 257px + 355px + the 16px sidebar gap =
628px = Cover Story's own new fixed height. */
/* Tezisy 1.9-3 п.2: height = Cover Story's own white part (body+meta =
186+44=230px), a new/different reference than this morning's "match
the whole Cover Story column" rule - the footer row that used to live
here is gone (see inc/blocks.php's 'quote' case), so the quote text
itself can use the freed space (5-line clamp below) instead. */
.vp-home-quote { background: #fff; border: 1px solid #eee; padding: 17px 20px; height: 232px; overflow: hidden; box-sizing: border-box; }
/* Владелец 16.10.2026: весь блок цитаты - одна ссылка () -
выглядит как прежде, текст не синеет и не подчёркивается. */
a.vp-home-quote--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.vp-home-quote--link:hover { border-color: #d8d8d8; }
/* Владелец 16.10.2026: при наведении текст цитаты (без двух строк автора)
голубеет - тот же #2eaadc, что у заголовков карточек-анонсов. */
a.vp-home-quote--link:hover .vp-quote p { color: #2eaadc; }
/* Tezisy-9 п.2: both rules gone - the red left border (vertical) AND the
footer's own top border (horizontal, below). Removing the border also
drops the 20px left-indent that existed purely to clear it, so the
quote text's own width now matches its sibling above
(.vp-excursions-box, plain 22px padding on all sides - "по ширине...
как выше на карточке Экскурсии"). Scoped under .vp-home-quote so the
GLOBAL .vp-quote class (still used for real in-article pull quotes)
keeps its own border/indent untouched. */
.vp-home-quote .vp-quote { margin: 0; padding: 0; border-left: 0; }
.vp-home-quote .vp-quote p {
/* +1 "kegl" (~1.33px, rounded to the clean +1.5px this codebase always
uses for that unit - tezisy-1 п.9's own precedent): 15 -> 16.5px.
font-style:italic is inherited from .vp-quote (untouched) - kept, not
re-declared. Владелец (14.09.2026, "в библию"): полужирный - значимое
высказывание, выбранное украсить им Главную, должно выделяться. */
margin: 0; font-size: 16.5px; line-height: 1.55; font-weight: bold;
/* Tezisy 1.9-3 п.2: 4 -> 5 lines, now that removing the "Весь текст"
button + share row freed up room to show one more without the quote
card growing past its own fixed 230px. */
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
/* Tezisy 1.9-2 п.3: byline shifted to the right edge of the text block -
width:fit-content + margin-left:auto shrinks each line to its own
content width and pushes it flush right, while the text inside stays
left-ranged (default), so a line that ever wraps still reads normally
instead of centering or ranging right character-by-character. */
.vp-home-quote .vp-quote-author { display: block; width: fit-content; margin: 15px 0 0 auto; font-style: normal; font-size: 13.5px; color: #333; font-weight: 600; }
.vp-home-quote .vp-quote-role { display: block; width: fit-content; margin: 2px 0 0 auto; font-style: normal; font-size: 12.5px; color: #888; }
.vp-quote-footer {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
/* Tezisy 1.9 п.6 escape valve: after the padding/heading/footer changes
above, real measurement showed Cover Story ended up ~4.8px TALLER
than Excursions+Quote combined (628.1 vs 623.3px) - the opposite of
what shrinking further would fix, so this grows instead of shrinks,
closing the real gap rather than the anticipated direction. */
margin-top: 20.8px; padding-top: 14px;
font-family: system-ui, sans-serif;
}
.vp-quote-link { color: #2eaadc; text-decoration: underline; font-size: 13px; }
/* Gray "load more" bar, like the original site's button-more - a plain
link styled as a full-width button, growing ?show= on click (see
inc/blocks.php's section_grid case) instead of an AJAX fetch, so it
works with no JS and matches this codebase's minimal-JS convention. */
.vp-load-more {
display: flex; align-items: center; justify-content: center; gap: 10px;
/* Tezisy п.5: full-bleed edge-to-edge like the footer - the old
negative-margin trick only cancelled .vp-main's OWN padding, which
still left the bar capped at .vp-main's max-width (1100px), not the
actual viewport edges the footer reaches. calc(50% - 50vw) breaks it
out of the centered/padded column regardless of that width. */
/* Владелец 08.10.2026: та же проблема, что на мобильном (vw != clientWidth
из-за резерва под scrollbar-gutter - даже на десктопе это давало
постоянные 8px переполнения на КАЖДОЙ проверенной ширине окна,
не только на одной), но на десктопе простой "отменить padding
родителя" не работает - .vp-main сам уже уже вьюпорта. Вместо
сырого vw - CSS-переменная --vp-vw, проставленная ранним
инлайн-скриптом в из document.documentElement.clientWidth
(см. inc/layout.php) - 100vw остаётся запасным значением, если
скрипт по какой-то причине не выполнился (JS выключен и т.п.). */
width: var(--vp-vw, 100vw);
margin-left: calc(50% - (var(--vp-vw, 100vw) / 2));
margin-right: calc(50% - (var(--vp-vw, 100vw) / 2));
/* Tezisy-4 п.2: gap from the content above x5 (7.7 * 5 = 38.5). Bottom
margin cancels .vp-main's own bottom padding (now 40px, see above) so
this still sits flush against the footer with no gap. */
margin-top: 38.5px;
margin-bottom: -40px;
padding: 20px; text-align: center;
background: #d7d7d7; color: #818181;
font-family: system-ui, sans-serif; font-size: 15px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
text-decoration: none; /* no radius - it's flush/full-bleed now, like the original's own plashka */
}
.vp-load-more:hover { background: #dfdfdf; }
/* Владелец 16.10.2026: финальная плашка раздела Эпос («СКАЗКИ ГЕРМАНИИ») -
те же размеры/положение, что у «Показать ещё», фон на 20% темнее
(#d7d7d7 = 215 -> 172 = #acacac), текст 100% чёрный, без иконки. */
.vp-load-more.vp-feed-end { background: #acacac; color: #000; }
.vp-load-more.vp-feed-end:hover { background: #b8b8b8; }
/* Tezisy п.5: classic download glyph (arrow resting on a tray/line) to
the right of the label - inline SVG with stroke=currentColor so it
always matches the bar's own text color, same convention as the
back-to-top button's chevron. */
.vp-load-more svg { flex-shrink: 0; }
/* --- homepage: standard announcement cards under Cover Story --- */
.vp-home-teasers {
display: grid;
/* Tezisy-5 п.9: exactly two standard cards side by side, back to this
block's original role (was briefly 3-wide for a since-removed
20-item use, then dropped entirely in tezisy-4's redesign - now
re-added under Cover Story with a fixed limit:2).
Tezisy-6 п.1: gap matches the reference grid's own 16px, and since
.vp-home-cover-col is now exactly 2 standard columns wide (see
.vp-home-top above), 2 equal tracks here land each card at exactly
one standard column's width too - no separate math needed. */
grid-template-columns: repeat(2, 1fr);
gap: 16px;
/* Tezisy-6 (follow-up): this block's own margin-top (20px) used to
STACK on top of .vp-home-cover-col's flex `gap` (24px, now 16px) -
margins and flex gap don't collapse into each other, so the real
distance between Cover Story and this row was 24+20=44px, not the
intended 24px. Removed entirely now that the parent's own gap alone
gives the standard 16px. */
}
/* Tezisy-6 п.1: "не надо мудрить" - these must be the SAME standard card
size used everywhere else (.vp-card-grid/.vp-feed-regular-grid's own
380px/150px), not a smaller bespoke "mini teaser" size left over from
this block's pre-tezisy-4 role. */
/* Вечерние тезисы 2026-09-03 п.7: matches .vp-feed-regular-grid's own
-20px cut right above (380 -> 360) - same standard card, same leftover
dead space absorbing it. */
.vp-home-teasers .vp-card { height: 360px; }
.vp-home-teasers .vp-card-media { height: 150px; }
/* Tezisy п.3: every announcement-card plashka on section pages is white,
no exceptions - the Kaleidoscope-derived date/quote snippet cards used
to be dark/cream to look visually distinct from real article cards;
now they match .vp-card--article's own white+border treatment, with
their text recolored for contrast on white instead of their old dark
background. */
.vp-card--date {
background: #fff; color: #1a1a1a; border: 1px solid #eee;
justify-content: center; align-items: center; text-align: center;
padding: 20px; font-family: system-ui, sans-serif;
}
.vp-card-date-big { font-size: 15px; color: #7a2e2e; letter-spacing: 0.08em; margin-bottom: 10px; }
.vp-card--date p { font-family: 'Bitter', Georgia, serif; font-size: 15px; margin: 0; }
.vp-card--quote {
background: #fff; color: #1a1a1a; border: 1px solid #eee;
justify-content: center; align-items: center; text-align: center;
padding: 22px; font-style: italic;
}
.vp-card--quote p {
font-size: 14px; margin: 0;
display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.vp-card--quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 12px; color: #7a2e2e; }
/* --- shop --- */
.vp-shop-intro { color: #666; margin: -10px 0 20px; }
.vp-card--product { background: #fff; border: 1px solid #eee; }
.vp-card--product .vp-card-img { width: 100%; height: 140px; object-fit: cover; margin: 0; border-radius: 0; flex-shrink: 0; }
.vp-card--product .vp-card-body { padding: 14px 16px; font-family: system-ui, sans-serif; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.vp-card-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #7a2e2e; }
.vp-card--product h3 {
font-size: 15px; margin: 0; font-family: 'Bitter', Georgia, serif; line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vp-card--product p {
font-size: 12.5px; color: #666; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vp-card-actions { display: flex; gap: 8px; margin-top: auto; }
.vp-card-actions .vp-btn { font-size: 13px; padding: 7px 14px; }
.vp-btn-disabled {
font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 4px;
border: 1px solid #ddd; background: #f5f5f5; color: #aaa; cursor: not-allowed;
}
/* --- map --- */
/* Tezisy-7 п.4: the legend moved from a 220px left sidebar to a
horizontal row ABOVE the map (still below the page's own ), so
the map itself can take the full content width instead of sharing it
with a fixed-width column - height stays the same 640px it always
was, only the width constraint is gone. */
/* Tezisy 1.9-2 п.6: top margin trimmed 24px -> 18px - the triple rule
below now grows upward into that space (see .vp-map-legend-rule),
so the heading-to-items gap doesn't just get taller on top of it. */
/* 5.9.26: title/map/legend/feed reorder left the two gaps around this
block off the owner's stated targets - map-to-legend needed -10px,
legend-to-feed needed +10px. Bottom margin 16 -> 38 (collapses against
.vp-section-feed's own 28px top margin, so it must exceed 28 to win
the max()); top margin (18) is untouched here - the map-to-legend gap
is governed by .vp-map-canvas's own bottom margin below instead. */
.vp-map-legend-bar { margin: 18px 0 38px; font-family: system-ui, sans-serif; font-size: 13.5px; }
/* Тезисы 6.9.26 п.3: map-to-legend gap -10px more (was already the
winning side of the collapse against .vp-map-legend-bar's own 18px
top margin above, per the 5.9.26 note - so trimming this one value
alone moves the visible gap). */
.vp-map-legend-title { font-weight: 600; margin: 0 0 10px; color: #444; }
/* Tezisy 1.9-3 п.4: replaces the old "Слои (N точек)" technical line -
70% black / 30% white = 255*0.3 = 76.5 -> #4d4d4d, the same "N% black"
formula used elsewhere on this site (e.g. the dark "Новое на сайте"
card). Full content width, single hairline.
Tezisy 1.9-2 п.6: a single line "смотрелась бедно" - was made three
(pixel-space-pixel-space-pixel) via two extra box-shadow lines below
the real border, own bottom margin trimmed 16px -> 10px to absorb the
space they added.
Tezisy 1.9-2(2) п.4: three turned out to be one too many - back to two
(border-top + one box-shadow line, the bottom-most of the previous two
removed). That line's own ~3px is no longer being "eaten" by the
margin, so bottom margin goes back up 10px -> 13px, INCREASING the gap
to the category list below, per the explicit ask. */
.vp-map-legend-rule {
/* Tezisy 2026-09-03 п.6 landed a single 2pt line, 50% grey (#808080).
Вечерние тезисы 2026-09-03 п.5: thickness x2 growing UPWARD (a plain
border-top-width grows DOWNWARD instead, the wrong direction here),
20% lighter (#999999) - done via a 2pt border-top (anchoring the
rule's bottom edge in place) PLUS a second 2pt box-shadow line
offset upward to sit flush against it.
Уточняющие тезисы 2026-09-03 п.9: that two-line stack read as NOT
solid (a border and a box-shadow can leave a hairline seam between
them depending on rendering) - one single 4pt box-shadow line
instead (no border-top at all) is guaranteed seamless by
construction, still anchored/growing the same way (upward, from the
rule's own zero-height box). Lighter again - 25% black:
255*0.75 = 191.25 -> 191 = #bfbfbf.
Тезисы 4.9.26 п.10: #bfbfbf "растворилась" into the page's own
background - 20% DARKER now (the opposite direction from every
previous pass on this rule), same relative-blend formula this
codebase always uses, just toward black instead of white:
191 * 0.8 = 152.8 -> 153 = #999999.
Тезисы 4.9.26 (вечер) п.2: the REAL reason it "потерялась" wasn't
the color - verified live: even a temporary 20px solid RED
box-shadow on this element rendered completely invisible. Browsers'
own default UA stylesheet for
sets `overflow: hidden` (a
historical leftover from the classic sunken/ridge
rendering) -
box-shadow is clipped by an element's OWN overflow, so once the
double-border+box-shadow stack was simplified to a pure box-shadow
line with no real border at all, that default silently clipped it
to nothing. A real border-* is never affected by the element's own
overflow, which is exactly why this stayed invisible only after
that switch, not before. Fix is just this one override - thickness
(4pt) and color (#999999, already exactly 40% black: 255*0.6=153)
were both already correct. */
border: none;
overflow: visible;
box-shadow: 0 -4pt 0 0 #999999;
margin: 0 0 13px;
}
/* Tezisy 1.9 п.2: 6 left-justified columns instead of a wrapping flex
row - equal-width tracks so every column of checkboxes lines up
regardless of how long that row's own label happens to be; each
.vp-map-legend-item is itself a left-starting flex row, so content
never centers within its cell. */
.vp-map-legend-items {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 20px;
/* Tezisy 2026-09-03 п.6: shifted 2px down within its own space - pure
visual nudge, the rule line above and the map canvas below keep
their exact positions. */
position: relative;
top: 2px;
}
@media (max-width: 900px) {
.vp-map-legend-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.vp-map-legend-items { grid-template-columns: repeat(2, 1fr); }
}
.vp-map-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* Владелец 16.10.2026: названия категорий бывают в 2 строки - интерлиньяж
в полтора раза меньше (21.6 -> 14.4px), чтобы такая позиция читалась
цельной; на ту же разницу (7.2px) больше зазор между рядами - шаг
однострочных позиций прежний, к соседям ничего не приближается. */
.vp-map-legend-item { line-height: 14.4px; }
.vp-map-legend-items { row-gap: 15.2px; }
/* Владелец (15.09.2026): "квадратики с закликнутыми галками... нейтральный
тёмно-серый, например Black 70%, чтобы не путаться с цветными кружками" -
без этого чекбокс красился браузером в свой стандартный (обычно синий)
цвет, который на этой карте у категории "Города" теперь И ЕСТЬ реальный
синий (#0000FF, тот же пункт задачи) - максимально похожие цвета совсем
рядом друг с другом. accent-color - именно то свойство, которым красится
нативный чекбокс, без кастомной вёрстки псевдоэлементов. */
.vp-map-toggle { accent-color: rgba(0, 0, 0, .7); }
.vp-map-swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vp-map-count { color: #999; font-variant-numeric: tabular-nums; }
/* Владелец 17.10.2026: переключатель категории = кружок её цвета:
закрашен - включена, только контур - выключена. Нативный чекбокс скрыт
визуально, но остаётся в разметке (клавиатура, скринридеры, скрипты). */
.vp-map-legend-item { position: relative; gap: 8px; }
.vp-map-legend-item .vp-map-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* Владелец 17.10.2026 (следом): выключено - сплошной тёмно-серый кружок
(#5f5f5f, цвет заголовка страницы); включено - белый кружок с контуром
цвета категории. */
.vp-map-legend-item .vp-map-swatch {
width: 14px; height: 14px; box-sizing: border-box;
/* владелец 17.10.2026: выкл. - на 30% светлее (#5f5f5f -> #8f8f8f) */
border: 2px solid #8f8f8f; background: #8f8f8f; transition: background .15s, border-color .15s;
}
.vp-map-legend-item .vp-map-toggle:checked + .vp-map-swatch { background: #fff; border: 2.5px solid var(--c); }
.vp-map-legend-item .vp-map-toggle:focus-visible + .vp-map-swatch { outline: 2px solid #2eaadc; outline-offset: 2px; }
/* 5.9.26: top margin 0 -> 28 so it collapses with .vp-section-title's
own 12px bottom margin (+ the title's own -10px translateY) to match
the 38px title-to-featured-card gap other section pages use. Bottom
margin 40 -> 30 per the owner's explicit -10px ask (collapses against
.vp-map-legend-bar's 18px top margin, still the winning side). */
.vp-map-canvas { width: 100%; height: 640px; border-radius: 8px; border: 1px solid #ccc; background: #eef1f0; margin: 28px 0 20px; }
@media (max-width: 780px) {
.vp-map-canvas { height: 420px; }
}
.vp-hero-img, .vp-article-img, .vp-block-image {
width: 100%;
height: auto;
border-radius: 0; /* original site: straight corners on every illustration */
display: block;
margin-bottom: 20px;
}
h1 { font-size: 32px; line-height: 1.15; margin: 0 0 16px; }
/* --- Публикация (article.php) - Вечерние тезисы 2026-09-03, первый
заход на этот типовой макет --- */
/* п.1/3: white background just for this template (vp_header()'s new
$white_bg param sets this body class on article.php only) - every
other page keeps the site's usual grey (#e5e9ea). */
body.vp-white-page { background: #fff; }
/* п.10 (первый заход): +5pt over the global 32px h1 -> 39.5px.
Уточняющие тезисы 2026-09-03 п.6: +3pt -> 44px.
Тезисы 4.9.26 п.1: +2 more pt: 44 + 2*1.5 = 47px.
Scoped to .vp-article so the global h1 rule (page.php's About/
Contacts etc.) stays untouched. */
.vp-article h1 { font-size: 47px; }
/* Владелец (13.09.2026, 1я находка): цветная плашка с инверсией при
наведении не вписывалась в общий дизайн - переделано на обычную
ссылочную конвенцию сайта (a{color:#7a2e2e}/a:hover{color:#2eaadc}).
Владелец (13.09.2026, 2я находка): display:flex на самом h1 оторвал
значок от текста на отдельную строку при переносе заголовка - flex
переносит ЦЕЛЫЕ flex-item'ы на новую строку, а не встраивает элемент
в обычный текстовый поток как последнее "слово". Убрано flex целиком:
ссылка - обычный inline-block внутри h1, переносится вместе с текстом
как всякий другой инлайн-элемент (та же техника, что и везде на
сайте для иконок внутри строки текста). */
.vp-admin-edit-link { display: inline-block; vertical-align: middle; margin-left: .3em; color: #7a2e2e; }
.vp-admin-edit-link:hover { color: #2eaadc; }
.vp-admin-edit-link .vp-admin-icon { width: .5em; height: .5em; stroke-width: 2; vertical-align: middle; }
/* п.3: the opening photo (or video - see .vp-video-embed below) sits
flush against the content column's own left edge at 80% of its width
- "выключено влево" in the BLOCK-positioning sense of that phrase
(not the paragraph-alignment sense the body text uses below). The
freed 20% on the right holds the caption. */
/* Вечерние тюн-тезисы 2026-09-03 п.2: +8% on the opening photo/video -
80% * 1.08 = 86.4%. The caption's own flex:1 just absorbs whatever's
left (13.6%, minus the 24px gap) - no separate change needed there. */
/* Вечерние тезисы 4.9.26 п.7: +9px to the gap down to the lead paragraph
below (20 -> 29) - .vp-lead itself has no margin-top of its own, so
this margin-bottom is the entire gap. */
.vp-article-hero { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 29px; }
/* Владелец 02.10.2026: главная горизонтальная иллюстрация была УЖЕ, чем
обычные иллюстрации в тексте (814px против типичных ~900px файлов,
замерено живьём) - так быть не должно. Дёшево, без выхода за пределы
общей колонки сайта (1100px): забираем ширину у колонки подписи
справа (214.2 -> 132.8px, всё ещё шире, чем было ДО того расширения
29.09.2026 - 119px), отдаём фото (+10%, 814 -> 895.2px). Колонка
подписи и зазор (24px) вместе - 156.8px (было 238.2); см. тот же
расчёт у .vp-article-caption и .vp-byline ниже - втроём держим его
в согласии. */
.vp-article-hero .vp-article-img { width: calc(100% - 156.8px); flex-shrink: 0; margin-bottom: 0; }
.vp-article-hero .vp-video-embed { width: calc(100% - 156.8px); flex-shrink: 0; }
/* Тезисы 6.9.26 п.6: a vertically-oriented (portrait) main photo must
never exceed some sane width - the 86.4% rule above made tall photos
read as oversized next to the caption column. Class set server-side
from the real media.width/height (article.php), not guessed from CSS.
Владелец 16.09.2026: 540px was too small ("это было ошибкой") - cap
raised to 900px; an editor who wants it narrower shrinks the source
file itself before upload rather than the site imposing a number. */
/* Владелец 21.09.2026: "вертикальное фото не должно программно
растягиваться до 900px или любого другого навязанного размера -
должно иметь свой собственный размер AS IS" - убрано и width:100%
(тянуло маленькие портретные фото на всю ширину колонки), и жёсткий
max-width:900px (тот самый навязанный размер). Единственное, что
осталось - max-width:100%, это не "размер", а чисто техническая
защита от переполнения колонки, если высокий файл вдруг окажется
шире неё - сам размер всегда берётся из реальных width/height файла. */
.vp-article-hero .vp-article-img--portrait { width: auto; max-width: 100%; }
/* Утренние тезисы 4.9.26 п.7: +2pt (13 + 2*1.5 = 16px). Now a (see
article.php) since its admin field is a real Quill instance (bold
toggle) whose saved HTML is already its own - `.vp-article-caption
p{margin:0}` neutralizes that inner paragraph's browser-default
margin so it doesn't add space inside this box. */
/* Вечерние тезисы 4.9.26 п.9: a) 3px up (position:relative nudge, pure
visual offset, same pattern as .vp-nav/.vp-search-icon elsewhere).
b) -1pt (16 - 1*1.5 = 14.5px). */
/* Владелец (13.09.2026, "правила вёрстки публикаций"): подпись к
ГЛАВНОЙ иллюстрации обязана быть той же гарнитурой, что основной
текст (была system-ui/sans-serif - реальное расхождение с телом,
которое использует 'Bitter'), и на 2 "кегля" МЕНЬШЕ основного текста
- тело 16px, та же формула перевода pt->px, что уже устоялась в этом
файле (1pt = 1.5px): 16 - 2*1.5 = 13px (было 14.5px). */
/* Владелец (13.09.2026): "цвет шрифта подписи к главному фото - 100%
Black" - было #777 (серый), не сам сайтовый "почти чёрный" #1a1a1a,
а буквально #000, отдельное явное требование именно для этой подписи. */
/* Владелец (14.09.2026, "в библию"): раньше подпись была flex:1 -
"сколько осталось места, столько и забирай". Для горизонтальных фото
это давало ~119px (900+px hero минус 86.4% фото минус 24px gap) - для
вертикальных (портретных) фото, где фото само куда уже (max-width:
540px), тот же flex:1 отдавал подписи ВСЁ оставшееся место (сотни
px, реально до трети-половины ширины текстового блока) - подпись
растягивалась и визуально расходилась с горизонтальным случаем.
Теперь подпись - фиксированной ширины (не flex:1) везде одинаково,
числом взята именно та ширина, что подпись реально занимает в
горизонтальном случае (замерено живьём) - гарантирует, что для
вертикальных фото она больше не "не расходится", а именно совпадает
1-в-1, а не просто "стала поменьше". Gap (24px, .vp-article-hero) уже
был одинаковым в обоих случаях - не трогаем. */
/* Владелец 19.09.2026: +1 кегль (13->14px), интерлиньяж -1px
(19.5px -> 18.5px, было 1.5 от старого 13px - теперь фиксированный px,
чтобы точно соответствовать запрошенному "минус 1 пункт"). */
.vp-article-caption {
/* Владелец 29.09.2026: в 1,8 раза шире (119 * 1.8 = 214.2px).
Владелец 02.10.2026: часть этой ширины отдана фото (см. .vp-article-
hero .vp-article-img выше) - 132.8px, это всё ещё шире, чем
исходные 119px, на десктопе; в мобильной версии подпись по-прежнему
во всю ширину. */
flex: 0 0 132.8px; width: 132.8px; margin: 0;
font-family: 'Bitter', Georgia, "Times New Roman", serif; font-size: 14px; line-height: 18.5px; color: #000;
position: relative; top: -3px;
}
.vp-article-caption p { margin: 0; }
/* п.5: one responsive 16:9 box for both the auto-converted YouTube embed
and a pasted third-party
), so
the map itself can take the full content width instead of sharing it
with a fixed-width column - height stays the same 640px it always
was, only the width constraint is gone. */
/* Tezisy 1.9-2 п.6: top margin trimmed 24px -> 18px - the triple rule
below now grows upward into that space (see .vp-map-legend-rule),
so the heading-to-items gap doesn't just get taller on top of it. */
/* 5.9.26: title/map/legend/feed reorder left the two gaps around this
block off the owner's stated targets - map-to-legend needed -10px,
legend-to-feed needed +10px. Bottom margin 16 -> 38 (collapses against
.vp-section-feed's own 28px top margin, so it must exceed 28 to win
the max()); top margin (18) is untouched here - the map-to-legend gap
is governed by .vp-map-canvas's own bottom margin below instead. */
.vp-map-legend-bar { margin: 18px 0 38px; font-family: system-ui, sans-serif; font-size: 13.5px; }
/* Тезисы 6.9.26 п.3: map-to-legend gap -10px more (was already the
winning side of the collapse against .vp-map-legend-bar's own 18px
top margin above, per the 5.9.26 note - so trimming this one value
alone moves the visible gap). */
.vp-map-legend-title { font-weight: 600; margin: 0 0 10px; color: #444; }
/* Tezisy 1.9-3 п.4: replaces the old "Слои (N точек)" technical line -
70% black / 30% white = 255*0.3 = 76.5 -> #4d4d4d, the same "N% black"
formula used elsewhere on this site (e.g. the dark "Новое на сайте"
card). Full content width, single hairline.
Tezisy 1.9-2 п.6: a single line "смотрелась бедно" - was made three
(pixel-space-pixel-space-pixel) via two extra box-shadow lines below
the real border, own bottom margin trimmed 16px -> 10px to absorb the
space they added.
Tezisy 1.9-2(2) п.4: three turned out to be one too many - back to two
(border-top + one box-shadow line, the bottom-most of the previous two
removed). That line's own ~3px is no longer being "eaten" by the
margin, so bottom margin goes back up 10px -> 13px, INCREASING the gap
to the category list below, per the explicit ask. */
.vp-map-legend-rule {
/* Tezisy 2026-09-03 п.6 landed a single 2pt line, 50% grey (#808080).
Вечерние тезисы 2026-09-03 п.5: thickness x2 growing UPWARD (a plain
border-top-width grows DOWNWARD instead, the wrong direction here),
20% lighter (#999999) - done via a 2pt border-top (anchoring the
rule's bottom edge in place) PLUS a second 2pt box-shadow line
offset upward to sit flush against it.
Уточняющие тезисы 2026-09-03 п.9: that two-line stack read as NOT
solid (a border and a box-shadow can leave a hairline seam between
them depending on rendering) - one single 4pt box-shadow line
instead (no border-top at all) is guaranteed seamless by
construction, still anchored/growing the same way (upward, from the
rule's own zero-height box). Lighter again - 25% black:
255*0.75 = 191.25 -> 191 = #bfbfbf.
Тезисы 4.9.26 п.10: #bfbfbf "растворилась" into the page's own
background - 20% DARKER now (the opposite direction from every
previous pass on this rule), same relative-blend formula this
codebase always uses, just toward black instead of white:
191 * 0.8 = 152.8 -> 153 = #999999.
Тезисы 4.9.26 (вечер) п.2: the REAL reason it "потерялась" wasn't
the color - verified live: even a temporary 20px solid RED
box-shadow on this element rendered completely invisible. Browsers'
own default UA stylesheet for
sets `overflow: hidden` (a
historical leftover from the classic sunken/ridge
rendering) -
box-shadow is clipped by an element's OWN overflow, so once the
double-border+box-shadow stack was simplified to a pure box-shadow
line with no real border at all, that default silently clipped it
to nothing. A real border-* is never affected by the element's own
overflow, which is exactly why this stayed invisible only after
that switch, not before. Fix is just this one override - thickness
(4pt) and color (#999999, already exactly 40% black: 255*0.6=153)
were both already correct. */
border: none;
overflow: visible;
box-shadow: 0 -4pt 0 0 #999999;
margin: 0 0 13px;
}
/* Tezisy 1.9 п.2: 6 left-justified columns instead of a wrapping flex
row - equal-width tracks so every column of checkboxes lines up
regardless of how long that row's own label happens to be; each
.vp-map-legend-item is itself a left-starting flex row, so content
never centers within its cell. */
.vp-map-legend-items {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 20px;
/* Tezisy 2026-09-03 п.6: shifted 2px down within its own space - pure
visual nudge, the rule line above and the map canvas below keep
their exact positions. */
position: relative;
top: 2px;
}
@media (max-width: 900px) {
.vp-map-legend-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.vp-map-legend-items { grid-template-columns: repeat(2, 1fr); }
}
.vp-map-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* Владелец 16.10.2026: названия категорий бывают в 2 строки - интерлиньяж
в полтора раза меньше (21.6 -> 14.4px), чтобы такая позиция читалась
цельной; на ту же разницу (7.2px) больше зазор между рядами - шаг
однострочных позиций прежний, к соседям ничего не приближается. */
.vp-map-legend-item { line-height: 14.4px; }
.vp-map-legend-items { row-gap: 15.2px; }
/* Владелец (15.09.2026): "квадратики с закликнутыми галками... нейтральный
тёмно-серый, например Black 70%, чтобы не путаться с цветными кружками" -
без этого чекбокс красился браузером в свой стандартный (обычно синий)
цвет, который на этой карте у категории "Города" теперь И ЕСТЬ реальный
синий (#0000FF, тот же пункт задачи) - максимально похожие цвета совсем
рядом друг с другом. accent-color - именно то свойство, которым красится
нативный чекбокс, без кастомной вёрстки псевдоэлементов. */
.vp-map-toggle { accent-color: rgba(0, 0, 0, .7); }
.vp-map-swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vp-map-count { color: #999; font-variant-numeric: tabular-nums; }
/* Владелец 17.10.2026: переключатель категории = кружок её цвета:
закрашен - включена, только контур - выключена. Нативный чекбокс скрыт
визуально, но остаётся в разметке (клавиатура, скринридеры, скрипты). */
.vp-map-legend-item { position: relative; gap: 8px; }
.vp-map-legend-item .vp-map-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* Владелец 17.10.2026 (следом): выключено - сплошной тёмно-серый кружок
(#5f5f5f, цвет заголовка страницы); включено - белый кружок с контуром
цвета категории. */
.vp-map-legend-item .vp-map-swatch {
width: 14px; height: 14px; box-sizing: border-box;
/* владелец 17.10.2026: выкл. - на 30% светлее (#5f5f5f -> #8f8f8f) */
border: 2px solid #8f8f8f; background: #8f8f8f; transition: background .15s, border-color .15s;
}
.vp-map-legend-item .vp-map-toggle:checked + .vp-map-swatch { background: #fff; border: 2.5px solid var(--c); }
.vp-map-legend-item .vp-map-toggle:focus-visible + .vp-map-swatch { outline: 2px solid #2eaadc; outline-offset: 2px; }
/* 5.9.26: top margin 0 -> 28 so it collapses with .vp-section-title's
own 12px bottom margin (+ the title's own -10px translateY) to match
the 38px title-to-featured-card gap other section pages use. Bottom
margin 40 -> 30 per the owner's explicit -10px ask (collapses against
.vp-map-legend-bar's 18px top margin, still the winning side). */
.vp-map-canvas { width: 100%; height: 640px; border-radius: 8px; border: 1px solid #ccc; background: #eef1f0; margin: 28px 0 20px; }
@media (max-width: 780px) {
.vp-map-canvas { height: 420px; }
}
.vp-hero-img, .vp-article-img, .vp-block-image {
width: 100%;
height: auto;
border-radius: 0; /* original site: straight corners on every illustration */
display: block;
margin-bottom: 20px;
}
h1 { font-size: 32px; line-height: 1.15; margin: 0 0 16px; }
/* --- Публикация (article.php) - Вечерние тезисы 2026-09-03, первый
заход на этот типовой макет --- */
/* п.1/3: white background just for this template (vp_header()'s new
$white_bg param sets this body class on article.php only) - every
other page keeps the site's usual grey (#e5e9ea). */
body.vp-white-page { background: #fff; }
/* п.10 (первый заход): +5pt over the global 32px h1 -> 39.5px.
Уточняющие тезисы 2026-09-03 п.6: +3pt -> 44px.
Тезисы 4.9.26 п.1: +2 more pt: 44 + 2*1.5 = 47px.
Scoped to .vp-article so the global h1 rule (page.php's About/
Contacts etc.) stays untouched. */
.vp-article h1 { font-size: 47px; }
/* Владелец (13.09.2026, 1я находка): цветная плашка с инверсией при
наведении не вписывалась в общий дизайн - переделано на обычную
ссылочную конвенцию сайта (a{color:#7a2e2e}/a:hover{color:#2eaadc}).
Владелец (13.09.2026, 2я находка): display:flex на самом h1 оторвал
значок от текста на отдельную строку при переносе заголовка - flex
переносит ЦЕЛЫЕ flex-item'ы на новую строку, а не встраивает элемент
в обычный текстовый поток как последнее "слово". Убрано flex целиком:
ссылка - обычный inline-block внутри h1, переносится вместе с текстом
как всякий другой инлайн-элемент (та же техника, что и везде на
сайте для иконок внутри строки текста). */
.vp-admin-edit-link { display: inline-block; vertical-align: middle; margin-left: .3em; color: #7a2e2e; }
.vp-admin-edit-link:hover { color: #2eaadc; }
.vp-admin-edit-link .vp-admin-icon { width: .5em; height: .5em; stroke-width: 2; vertical-align: middle; }
/* п.3: the opening photo (or video - see .vp-video-embed below) sits
flush against the content column's own left edge at 80% of its width
- "выключено влево" in the BLOCK-positioning sense of that phrase
(not the paragraph-alignment sense the body text uses below). The
freed 20% on the right holds the caption. */
/* Вечерние тюн-тезисы 2026-09-03 п.2: +8% on the opening photo/video -
80% * 1.08 = 86.4%. The caption's own flex:1 just absorbs whatever's
left (13.6%, minus the 24px gap) - no separate change needed there. */
/* Вечерние тезисы 4.9.26 п.7: +9px to the gap down to the lead paragraph
below (20 -> 29) - .vp-lead itself has no margin-top of its own, so
this margin-bottom is the entire gap. */
.vp-article-hero { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 29px; }
/* Владелец 02.10.2026: главная горизонтальная иллюстрация была УЖЕ, чем
обычные иллюстрации в тексте (814px против типичных ~900px файлов,
замерено живьём) - так быть не должно. Дёшево, без выхода за пределы
общей колонки сайта (1100px): забираем ширину у колонки подписи
справа (214.2 -> 132.8px, всё ещё шире, чем было ДО того расширения
29.09.2026 - 119px), отдаём фото (+10%, 814 -> 895.2px). Колонка
подписи и зазор (24px) вместе - 156.8px (было 238.2); см. тот же
расчёт у .vp-article-caption и .vp-byline ниже - втроём держим его
в согласии. */
.vp-article-hero .vp-article-img { width: calc(100% - 156.8px); flex-shrink: 0; margin-bottom: 0; }
.vp-article-hero .vp-video-embed { width: calc(100% - 156.8px); flex-shrink: 0; }
/* Тезисы 6.9.26 п.6: a vertically-oriented (portrait) main photo must
never exceed some sane width - the 86.4% rule above made tall photos
read as oversized next to the caption column. Class set server-side
from the real media.width/height (article.php), not guessed from CSS.
Владелец 16.09.2026: 540px was too small ("это было ошибкой") - cap
raised to 900px; an editor who wants it narrower shrinks the source
file itself before upload rather than the site imposing a number. */
/* Владелец 21.09.2026: "вертикальное фото не должно программно
растягиваться до 900px или любого другого навязанного размера -
должно иметь свой собственный размер AS IS" - убрано и width:100%
(тянуло маленькие портретные фото на всю ширину колонки), и жёсткий
max-width:900px (тот самый навязанный размер). Единственное, что
осталось - max-width:100%, это не "размер", а чисто техническая
защита от переполнения колонки, если высокий файл вдруг окажется
шире неё - сам размер всегда берётся из реальных width/height файла. */
.vp-article-hero .vp-article-img--portrait { width: auto; max-width: 100%; }
/* Утренние тезисы 4.9.26 п.7: +2pt (13 + 2*1.5 = 16px). Now a (see
article.php) since its admin field is a real Quill instance (bold
toggle) whose saved HTML is already its own - `.vp-article-caption
p{margin:0}` neutralizes that inner paragraph's browser-default
margin so it doesn't add space inside this box. */
/* Вечерние тезисы 4.9.26 п.9: a) 3px up (position:relative nudge, pure
visual offset, same pattern as .vp-nav/.vp-search-icon elsewhere).
b) -1pt (16 - 1*1.5 = 14.5px). */
/* Владелец (13.09.2026, "правила вёрстки публикаций"): подпись к
ГЛАВНОЙ иллюстрации обязана быть той же гарнитурой, что основной
текст (была system-ui/sans-serif - реальное расхождение с телом,
которое использует 'Bitter'), и на 2 "кегля" МЕНЬШЕ основного текста
- тело 16px, та же формула перевода pt->px, что уже устоялась в этом
файле (1pt = 1.5px): 16 - 2*1.5 = 13px (было 14.5px). */
/* Владелец (13.09.2026): "цвет шрифта подписи к главному фото - 100%
Black" - было #777 (серый), не сам сайтовый "почти чёрный" #1a1a1a,
а буквально #000, отдельное явное требование именно для этой подписи. */
/* Владелец (14.09.2026, "в библию"): раньше подпись была flex:1 -
"сколько осталось места, столько и забирай". Для горизонтальных фото
это давало ~119px (900+px hero минус 86.4% фото минус 24px gap) - для
вертикальных (портретных) фото, где фото само куда уже (max-width:
540px), тот же flex:1 отдавал подписи ВСЁ оставшееся место (сотни
px, реально до трети-половины ширины текстового блока) - подпись
растягивалась и визуально расходилась с горизонтальным случаем.
Теперь подпись - фиксированной ширины (не flex:1) везде одинаково,
числом взята именно та ширина, что подпись реально занимает в
горизонтальном случае (замерено живьём) - гарантирует, что для
вертикальных фото она больше не "не расходится", а именно совпадает
1-в-1, а не просто "стала поменьше". Gap (24px, .vp-article-hero) уже
был одинаковым в обоих случаях - не трогаем. */
/* Владелец 19.09.2026: +1 кегль (13->14px), интерлиньяж -1px
(19.5px -> 18.5px, было 1.5 от старого 13px - теперь фиксированный px,
чтобы точно соответствовать запрошенному "минус 1 пункт"). */
.vp-article-caption {
/* Владелец 29.09.2026: в 1,8 раза шире (119 * 1.8 = 214.2px).
Владелец 02.10.2026: часть этой ширины отдана фото (см. .vp-article-
hero .vp-article-img выше) - 132.8px, это всё ещё шире, чем
исходные 119px, на десктопе; в мобильной версии подпись по-прежнему
во всю ширину. */
flex: 0 0 132.8px; width: 132.8px; margin: 0;
font-family: 'Bitter', Georgia, "Times New Roman", serif; font-size: 14px; line-height: 18.5px; color: #000;
position: relative; top: -3px;
}
.vp-article-caption p { margin: 0; }
/* п.5: one responsive 16:9 box for both the auto-converted YouTube embed
and a pasted third-party
- `.vp-article-caption p{margin:0}` neutralizes that inner paragraph's browser-default margin so it doesn't add space inside this box. */ /* Вечерние тезисы 4.9.26 п.9: a) 3px up (position:relative nudge, pure visual offset, same pattern as .vp-nav/.vp-search-icon elsewhere). b) -1pt (16 - 1*1.5 = 14.5px). */ /* Владелец (13.09.2026, "правила вёрстки публикаций"): подпись к ГЛАВНОЙ иллюстрации обязана быть той же гарнитурой, что основной текст (была system-ui/sans-serif - реальное расхождение с телом, которое использует 'Bitter'), и на 2 "кегля" МЕНЬШЕ основного текста - тело 16px, та же формула перевода pt->px, что уже устоялась в этом файле (1pt = 1.5px): 16 - 2*1.5 = 13px (было 14.5px). */ /* Владелец (13.09.2026): "цвет шрифта подписи к главному фото - 100% Black" - было #777 (серый), не сам сайтовый "почти чёрный" #1a1a1a, а буквально #000, отдельное явное требование именно для этой подписи. */ /* Владелец (14.09.2026, "в библию"): раньше подпись была flex:1 - "сколько осталось места, столько и забирай". Для горизонтальных фото это давало ~119px (900+px hero минус 86.4% фото минус 24px gap) - для вертикальных (портретных) фото, где фото само куда уже (max-width: 540px), тот же flex:1 отдавал подписи ВСЁ оставшееся место (сотни px, реально до трети-половины ширины текстового блока) - подпись растягивалась и визуально расходилась с горизонтальным случаем. Теперь подпись - фиксированной ширины (не flex:1) везде одинаково, числом взята именно та ширина, что подпись реально занимает в горизонтальном случае (замерено живьём) - гарантирует, что для вертикальных фото она больше не "не расходится", а именно совпадает 1-в-1, а не просто "стала поменьше". Gap (24px, .vp-article-hero) уже был одинаковым в обоих случаях - не трогаем. */ /* Владелец 19.09.2026: +1 кегль (13->14px), интерлиньяж -1px (19.5px -> 18.5px, было 1.5 от старого 13px - теперь фиксированный px, чтобы точно соответствовать запрошенному "минус 1 пункт"). */ .vp-article-caption { /* Владелец 29.09.2026: в 1,8 раза шире (119 * 1.8 = 214.2px). Владелец 02.10.2026: часть этой ширины отдана фото (см. .vp-article- hero .vp-article-img выше) - 132.8px, это всё ещё шире, чем исходные 119px, на десктопе; в мобильной версии подпись по-прежнему во всю ширину. */ flex: 0 0 132.8px; width: 132.8px; margin: 0; font-family: 'Bitter', Georgia, "Times New Roman", serif; font-size: 14px; line-height: 18.5px; color: #000; position: relative; top: -3px; } .vp-article-caption p { margin: 0; } /* п.5: one responsive 16:9 box for both the auto-converted YouTube embed and a pasted third-party