would
nest invalidly), so normalise the inner paragraph spacing. */
.cmt-text > p { margin: 0 0 .55em; }
.cmt-text > p:last-child { margin-bottom: 0; }
/* Native threaded replies (wp_list_comments style=div) render inside .cmt-body. */
.comments-list .children {
margin: 18px 0 0;
display: flex;
flex-direction: column;
gap: 18px;
}
/* ============================================================
Library (Phase 6)
============================================================ */
/* Real covers/posters fill the column WIDTH at their natural HEIGHT — larger and
never cropped (they vary in height, not width — per feedback). The design's
fixed-height wooden shelf planks assume uniform 230px covers, so drop them;
the .lib wood backdrop stays. Typographic fallback keeps a min-height. */
/* Drop the design's fixed-interval shelf planks (they assumed uniform 230px covers)
and rebuild the shelf per row: covers fill the column width at natural height and
bottom-align onto a wooden plank drawn under each caption, bridged across the
column gap into one continuous shelf line. So covers vary in height, not width,
and still stand on a real shelf. */
.lib { overflow: hidden; } /* clip the full-bleed shelf planks to the screen */
.lib-grid {
background-image: none;
padding: 0 30px;
gap: 28px 24px;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
align-items: stretch;
}
.lib-book { display: flex; flex-direction: column; height: auto; }
.lib-cover { margin: auto 0 0; display: block; height: auto; position: relative; z-index: 1; }
.lib-cover img { position: static; inset: auto; width: 100%; height: auto; display: block; }
.lib-cap {
position: relative;
height: 96px;
margin: 0;
padding: 30px 14px 0;
box-sizing: border-box;
overflow: visible; /* override styles.css overflow:hidden so the full-bleed plank isn't clipped to the card */
}
/* One continuous shelf per row: each cover bottom-aligns to the same baseline, and
the plank spans the full screen width (-100vw both sides → planks merge edge to edge). */
.lib-cap::before {
content: "";
position: absolute;
top: 0;
left: -100vw;
right: -100vw;
height: 23px;
background: linear-gradient(180deg,
rgba(255,244,218,.92) 0, rgba(255,244,218,.92) 2px,
#bb8c57 2px, #9a6c3d 8px, #6f4a28 14px, #4a2f18 18px,
rgba(0,0,0,.42) 18px, rgba(0,0,0,0) 100%);
pointer-events: none;
}
/* Breathing room between the last shelf and the pager (was 6px → too tight). */
.lib .lib-wrap:last-child { padding-top: 40px; }
/* Cover containers must take the image's natural height — the design fixes
aspect-ratio: 2/3 (+ align-items: flex-start), which leaves empty space below
covers of a different ratio. Let real covers drive the height. */
/* Keep the left column at content height (no sticky-grid stretch leaving empty space). */
.bookp-top { align-items: start; }
.bookp-left { align-self: start; }
/* The last (often only) buy-format link has its own 12px bottom padding which doubles
with the box's 18px padding — drop it so the box hugs the last element. */
.bookp-buy .bookp-format:last-child { padding-bottom: 0; }
.bookp-cover { height: auto; aspect-ratio: auto; display: block; }
.bookp-cover img { position: static; inset: auto; width: 100%; height: auto; display: block; }
.book-rel-cover { display: block; height: auto; aspect-ratio: auto; min-height: 0; }
.book-rel-cover img { position: static; inset: auto; width: 100%; height: auto; display: block; }
/* Responsive 16:9 video player for kino_embed. */
.kino-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-md); overflow: hidden; margin: 8px 0 6px; }
.kino-embed iframe, .kino-embed video, .kino-embed embed, .kino-embed object { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Comment pagination. */
.comments-pager { margin-top: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.comments-pager .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 10px;
border: 1px solid var(--border); border-radius: 100px;
font-size: 14px; color: var(--ink-900); text-decoration: none;
}
.comments-pager .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.comments-pager a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
/* ============================================================
Prose — full text styling for real the_content output.
The design only styled p/h2–h4/strong/em/a + special component classes
(.art-list/.art-quote/.art-table…); plain ul/ol/blockquote/table/img/figure/hr
from the editor were left unstyled. Applied to a .clb-prose wrapper used by
single.php / single-book.php / single-kino.php (keeps the TOC, which is outside it,
on its own design styling).
============================================================ */
.clb-prose { overflow-wrap: break-word; }
.clb-prose::after { content: ""; display: block; clear: both; }
.clb-prose p { margin: 0 0 1.15em; font-size: 18px; line-height: 1.75; color: var(--ink-900); text-wrap: pretty; }
.clb-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.25; margin: 38px 0 14px; color: var(--ink-900); }
.clb-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3; margin: 30px 0 10px; color: var(--ink-900); }
.clb-prose h4 { font-family: var(--font-sans); font-weight: 700; font-size: 17px; margin: 26px 0 8px; color: var(--ink-900); }
.clb-prose strong, .clb-prose b { font-weight: 700; color: var(--ink-900); }
.clb-prose em, .clb-prose i { font-style: italic; }
.clb-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.clb-prose mark { background: rgba(244,124,32,.22); color: inherit; padding: 1px 3px; border-radius: 3px; }
/* Lists — accent bullets / numbered chips, like the design's .art-list / .art-olist. */
.clb-prose ul, .clb-prose ol { margin: 0 0 1.15em; padding: 0; list-style: none; }
.clb-prose ul > li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 18px; line-height: 1.65; color: var(--ink-900); }
.clb-prose ul > li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 100px; background: var(--accent); }
.clb-prose ol { counter-reset: clbol; }
.clb-prose ol > li { position: relative; padding-left: 40px; margin-bottom: 12px; font-size: 18px; line-height: 1.65; color: var(--ink-900); min-height: 28px; }
.clb-prose ol > li::before { counter-increment: clbol; content: counter(clbol); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 100px; background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.clb-prose li > ul, .clb-prose li > ol { margin: 10px 0 0; }
/* Blockquote — like .art-quote. */
.clb-prose blockquote { margin: 30px 0; padding: 0 0 0 24px; border-left: 3px solid var(--accent); }
.clb-prose blockquote p { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink-900); }
.clb-prose blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--gray-500); }
/* Images / figures — responsive, rounded, with legacy alignment classes. */
.clb-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.clb-prose figure { margin: 30px 0; }
.clb-prose figcaption, .clb-prose .wp-caption-text { margin-top: 10px; font-size: 12.5px; color: var(--gray-500); text-align: center; }
.clb-prose .alignright { float: right; margin: 4px 0 16px 22px; max-width: 48%; }
.clb-prose .alignleft { float: left; margin: 4px 22px 16px 0; max-width: 48%; }
.clb-prose .aligncenter { display: block; margin: 18px auto; }
.clb-prose .wp-caption { max-width: 100%; height: auto; }
/* Tables — like .art-table (key column emphasised for spec-style tables). */
.clb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 26px 0; }
.clb-prose th { text-align: left; font-weight: 700; color: var(--ink-900); padding: 12px 16px; background: var(--paper); border-bottom: 2px solid var(--border); }
.clb-prose td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--gray-600); line-height: 1.5; vertical-align: top; }
.clb-prose td:first-child { color: var(--ink-900); font-weight: 600; }
.clb-prose tr:last-child td { border-bottom: none; }
/* hr + code. */
.clb-prose hr { border: none; height: 1px; background: var(--border); margin: 36px 0; }
.clb-prose code { background: var(--paper); border-radius: 4px; padding: 1px 6px; font-size: .92em; }
.clb-prose pre { background: var(--paper); border-radius: var(--r-md); padding: 16px; overflow-x: auto; margin: 0 0 1.15em; }
.clb-prose pre code { background: none; padding: 0; }
/* Active state for .rub-sub pills when used as filter chips (e.g. the /hot/ period
filter): same fill as :hover, but persistent for the selected chip. */
.rub-sub.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ============================================================
Ultimate Member (Phase 8) — blend auth/account forms with the design.
UM ships its own CSS with !important + inline styles, so the re-skin needs
!important on the key bits. Applies on /login,/register,/account and inside
the design login modal (.auth-overlay .um).
============================================================ */
.um, .um input, .um select, .um textarea, .um button, .um a { font-family: var(--font-sans); }
.um { max-width: 420px; }
.um .um-form { padding: 0 !important; background: none !important; }
.um .um-field-label label { font-size: 13px !important; font-weight: 600 !important; color: var(--ink-900) !important; margin-bottom: 6px !important; }
.um .um-field-area input[type=text],
.um .um-field-area input[type=password],
.um .um-field-area input[type=email],
.um .um-field-area input[type=number],
.um .um-field-area input[type=tel],
.um .um-field-area textarea,
.um .um-field select {
border: 1px solid var(--border) !important; border-radius: 12px !important;
padding: 12px 14px !important; font-size: 15px !important; background: var(--white) !important;
color: var(--ink-900) !important; box-shadow: none !important; height: auto !important;
}
.um .um-field-area input:focus, .um .um-field-area textarea:focus, .um .um-field select:focus { border-color: var(--accent) !important; }
.um .um-button,
.um input[type=submit],
.um input[type=submit].um-button,
.um a.um-button {
background: var(--cta) !important; border: none !important; border-radius: 100px !important;
font-weight: 700 !important; font-size: 15px !important; color: #fff !important;
box-shadow: 0 6px 16px rgba(255,108,36,.28) !important; height: auto !important; padding: 13px 22px !important; line-height: 1.2 !important;
}
.um .um-button:hover, .um input[type=submit]:hover { background: var(--accent) !important; }
.um a { color: var(--accent) !important; }
.um .um-col-alt, .um .um-col-alt-b { text-align: center; }
/* Tighter, design-aligned UM form layout. */
.um .um-req { display: none !important; }
.um .um-field { margin: 0 0 14px !important; }
.um .um-field-area { margin: 0 !important; }
.um .um-field-label { margin: 0 0 6px !important; }
.um .um-field-c { margin: 4px 0 14px !important; } /* captcha row */
.um [class*="um-col"] { width: 100% !important; float: none !important; clear: both !important; margin: 0 !important; }
.um .um-col-alt, .um .um-col-alt-b, .um .um-center { text-align: center; }
.um .um-button { width: 100% !important; display: block !important; margin: 6px auto 0 !important; }
.um .um-field-checkbox { display: flex !important; align-items: center; gap: 9px; margin-bottom: 14px !important; font-size: 14px; color: var(--gray-600); cursor: pointer; }
.um .um-field-checkbox .um-field-checkbox-option { color: var(--gray-600); }
.um .um-link-alt { display: block; text-align: center; margin-top: 14px !important; }
.um .um-link-alt a { color: var(--gray-500) !important; font-size: 14px; }
/* Pixel-match the UM login fields to the design: icon inside the field, «E-mail»
label, password eye, no «remember me» (the design omits it). Captcha box is kept. */
.um .um-field-username .um-field-area, .um .um-field-user_password .um-field-area { position: relative; }
.um .um-field-username .um-field-area input { padding-left: 44px !important; }
.um .um-field-user_password .um-field-area input { padding-left: 44px !important; padding-right: 44px !important; }
.um .um-field-username .um-field-area::before, .um .um-field-user_password .um-field-area::before {
content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; opacity: .5; pointer-events: none; z-index: 2;
}
.um .um-field-username .um-field-area::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); }
.um .um-field-user_password .um-field-area::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
/* Relabel the username field to «E-mail» (the label is in the UM form config, not gettext). */
.um .um-field-username .um-field-label label { font-size: 0 !important; }
.um .um-field-username .um-field-label label::after { content: "E-mail"; font-size: 13px; font-weight: 600; color: var(--ink-900); }
/* The design has no «remember me». */
.um .um-field-checkbox { display: none !important; }
/* Password show/hide eye injected by JS. */
.um .um-pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border: none; background: none; cursor: pointer; color: var(--gray-400); display: flex; align-items: center; justify-content: center; padding: 0; }
.um .um-pw-eye:hover { color: var(--ink-700); }
.um .um-pw-eye svg { width: 18px; height: 18px; }
/* Inside the design login modal — let UM fill the dialog cleanly. */
.auth-overlay .um { max-width: none; margin: 0; }
.auth-overlay .auth-um { margin-top: 4px; }
.auth-overlay .um-form { margin: 0 !important; }
/* Captcha appears only once the form's required fields are filled (kept off-screen
until then so the form reads like the design). Toggled by initAuthCaptchaReveal. */
.auth-form .cf-turnstile { margin: 0; height: 0; overflow: hidden; opacity: 0; transition: opacity .2s ease; display: flex; justify-content: center; }
.auth-form .cf-turnstile.cf-show { margin: 4px 0 16px; height: auto; overflow: visible; opacity: 1; }
/* Login/register error notice (UM errors surfaced in the design form). */
.auth-err { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; background: rgba(202,54,39,.08); border: 1px solid rgba(202,54,39,.25); color: var(--accent); font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; text-align: left; }
/* Standalone login page (login.html): body is a flex column so .login{flex:1} pushes the footer down. */
body.login-body { display: flex; flex-direction: column; min-height: 100vh; }
/* «Пароль» sits in .auth-row (not a direct child of .auth-label), so match the «E-mail» label style. */
.auth-form .auth-row > span { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
/* User-menu dropdown rows: a plugin's a:hover rule turned the label white on the white
hover background (it vanished). Keep the label/icon accent on hover. */
.user-panel .um-row:hover,
.user-panel-m .um-row:hover { background: var(--white) !important; color: var(--accent) !important; }
.user-panel .um-row:hover span,
.user-panel-m .um-row:hover span,
.user-panel .um-row:hover svg,
.user-panel-m .um-row:hover svg { color: var(--accent) !important; }
/* Same fix for the bookmarks/notifications dropdown panels + their footer link. */
.bm-panel a:hover, .bm-panel-m a:hover,
.notif-panel a:hover, .notif-panel-m a:hover,
.pnl-foot:hover { color: var(--accent) !important; }
.bm-row:hover .bm-title { color: var(--ink-900) !important; }
/* Clip the wood shelf (.acc-lib-grid bleeds ±28px to the card edge) to the rounded card. */
.acc-content .acc-block { overflow: hidden; }
/* Cabinet saved books/films — covers keep their NATURAL proportions: uniform column WIDTH,
natural height, never cropped (per feedback — "одинакова только ширина, не важно сколько
сверху"). They bottom-align onto a per-row wooden shelf, which is the global .lib-cap::before
plank (Phase-6); the .acc-block overflow above clips that plank to the card. Drop
.acc-lib-grid's own fixed-interval gradient shelf (it assumed uniform 230px covers) so there
is a SINGLE plank, and make the .acc-saved-lib wrapper stretch so its .lib-book fills the row
height and every cover bottom-aligns to one shared baseline. Covers/plank styling itself is
inherited from the global .lib-cover / .lib-cap rules (same as the /books/ archive). */
.acc-content .acc-lib-grid { background-image: none; align-items: stretch; column-gap: 24px; row-gap: 28px; }
.acc-content .acc-saved-lib { display: flex; }
.acc-content .acc-saved-lib .lib-book { flex: 1 1 auto; }
/* ============================================================
Radio dropdown — deltas over the design 1c styles (which now live in
styles.css): the mute control is a BUTTON (the design styles .rp-volic
as a passive icon span) and the volume slider needs touch dragging.
============================================================ */
.rp-volic { border: 0; background: none; padding: 0; cursor: pointer; }
.rp-volic:hover { color: var(--ink-900); }
.rp-voltrack { touch-action: none; }
/* ============================================================
Audio badge on article cards (headphones chip when the post
has an audio version — custom_audio_url).
============================================================ */
.card .img { position: relative; }
.card-audio { position: absolute; right: 10px; top: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 100px; background: rgba(20,11,5,.55); backdrop-filter: blur(3px); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* ============================================================
Comments — inline reply form (uses the global .cmt-form field styles)
============================================================ */
.cmt-reply-form { margin-top: 12px; }
.cmt-reply-form .cmt-send { flex-shrink: 0; }
.cmt-reply-x { border: none; background: none; cursor: pointer; color: var(--gray-400); font-size: 15px; padding: 0 4px; flex-shrink: 0; }
.cmt-reply-x:hover { color: var(--ink-900); }
/* Moderator actions — a quiet ⋯ kebab opening a small dropdown (server-gated too). */
.cmt-mod { position: relative; margin-left: auto; display: inline-flex; }
.cmt-mod-kebab { border: none; background: none; cursor: pointer; color: var(--gray-400); width: 27px; height: 27px; border-radius: 100px; display: flex; align-items: center; justify-content: center; padding: 0; }
.cmt-mod-kebab:hover, .cmt-mod.open .cmt-mod-kebab { color: var(--ink-900); background: var(--paper); }
.cmt-mod-menu { position: absolute; right: 0; top: 30px; z-index: 60; min-width: 176px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(40,22,8,.16); padding: 6px; animation: clbFadeIn .12s ease-out; }
.cmt-mod-btn { border: none; background: none; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-900); padding: 9px 12px; border-radius: 8px; }
.cmt-mod-btn:hover { background: var(--paper); }
.cmt-mod-del { color: var(--accent); }
.cmt-mod-del:hover, .cmt-mod-del.confirm { background: rgba(202,54,39,.07); color: var(--accent); }
.cmt-edit-form { margin-top: 10px; }
.cmt-edit-form textarea { width: 100%; border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 16px; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: var(--ink-900); outline: none; background: var(--white); resize: vertical; }
.cmt-edit-form textarea:focus { border-color: var(--ink-900); }
.cmt-edit-btns { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* ============================================================
Live notifications
============================================================ */
/* Initial-letter avatar for reply authors without a photo (guests / no upload).
.n-av sits inside the inline .n-vis wrapper, so without an to size it the
48px box collapses — force it to a block. */
.n-av { display: inline-block; vertical-align: middle; }
.n-av-i { width: 100%; height: 100%; border-radius: 100px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 17px; }
/* Empty state inside the header dropdown. */
.n-empty { padding: 28px 20px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--gray-500); }
/* Article rail ad: .ad-slot forced a fixed 300×600 paper box, so a shorter or unfilled AdSense
creative left an empty bordered container sticking out below/around it. Drop the placeholder
frame and the fixed height so the slot hugs the real creative — and collapses when empty. The
in-content and mobile bottom ad slots keep their own sizing. */
.art-rail .ad-slot { background: transparent; border: 0; height: auto; min-height: 0; padding: 0; }
.art-rail-seg { min-height: 0; }
/* Read notifications sit dimmed; hover brings them back to full strength. */
.n-row.is-read, .acc-notif-row.is-read { opacity: .58; }
.n-row.is-read:hover, .acc-notif-row.is-read:hover { opacity: 1; }
/* Contact form: honeypot lives off-screen (bots still fill it), Turnstile spacing. */
.pf-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.page-form .cf-turnstile { margin: 2px 0 0; }
/* «Разделы Клубера» несут 4-ю карточку (Аудиостатьи) — держим одну строку из 4. */
.mega-sections { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .mega-sections { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mega-sections { grid-template-columns: 1fr; } }
.mega-sections-m { grid-template-columns: 1fr; }