/* ==========================================================================
Variables — warm "channel" palette (separate token set from style.css:
this is a reading-focused design, not the visitka's green/accent system)
========================================================================== */
:root {
--c-bg: #0c0906;
--c-bg-elevated: #130f0a;
--c-bg-card: #0d0a06;
--c-bg-sunken: #090704;
--c-border: #2a2018;
--c-border-dark: #201810;
--c-border-hover: #443423;
--c-accent: #f0a14a;
--c-accent-hover: #f5b968;
--c-accent-rgb: 240, 161, 74;
--c-accent-soft: rgba(240, 161, 74, 0.13);
--c-accent-glow: rgba(240, 161, 74, 0.35);
--c-accent-radial: radial-gradient(circle, rgba(240, 161, 74, 0.65) 0%, rgba(240, 161, 74, 0.25) 45%, rgba(240, 161, 74, 0) 75%);
--c-warm-rgb: 181, 110, 58;
--c-text: #e9e2d6;
--c-text-soft: #c9beb0;
--c-text-dim: #a4988a;
--c-text-faint: #8f8377;
--c-text-fainter: #655a4d;
--c-text-faintest: #524940;
--c-ink: #100d09;
--c-radius: 14px;
--c-radius-sm: 8px;
--c-ease: cubic-bezier(0.22, 1, 0.36, 1);
--c-transition: 320ms var(--c-ease);
--c-transition-fast: 150ms var(--c-ease);
--c-max-width: 1180px;
--c-font-serif: 'Source Serif 4', Georgia, serif;
--c-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--c-font-mono: 'IBM Plex Mono', Consolas, monospace;
}
/* ==========================================================================
Reset
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html, body {
scrollbar-width: thin;
scrollbar-color: rgba(var(--c-accent-rgb), 0.35) var(--c-bg-elevated);
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--c-bg-elevated);
}
::-webkit-scrollbar-thumb {
background-color: rgba(var(--c-accent-rgb), 0.35);
border-radius: 8px;
border: 3px solid var(--c-bg-elevated);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--c-accent);
}
body {
margin: 0;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--c-font-serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Reader page (channel-posts.html) is an app-shell: the document itself
never scrolls, only .c-feed does. Scoped via a class on so
channel.html keeps its normal page scroll. */
html.c-shell,
html.c-shell body {
height: 100%;
overflow: hidden;
}
h1, h2, h3, p, ul, blockquote, figure {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
a,
.c-topic-card,
.c-post,
.c-contact-link {
-webkit-user-drag: none;
}
img, svg {
display: block;
max-width: 100%;
}
/* The reset above beats the browser's default `[hidden] { display: none }`
UA rule (author styles win over UA styles regardless of specificity), so
`img.hidden = true` (e.g. swapping the lightbox between its ![]()
and its
video player) silently did nothing without this. */
[hidden] {
display: none !important;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
pre, code {
font-family: var(--c-font-mono);
}
/* ==========================================================================
Cursor spotlight (Channel Home only, mouse-only) — same mechanics as the
visitka's .cursor-spotlight, recolored to the channel's amber accent.
========================================================================== */
.c-cursor-spotlight {
position: fixed;
top: 0;
left: 0;
width: 640px;
height: 640px;
border-radius: 50%;
background: radial-gradient(circle, var(--c-accent-glow), transparent 70%);
filter: blur(15px);
pointer-events: none;
z-index: 1;
opacity: 0;
transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
transition: opacity 220ms var(--c-ease);
will-change: transform, opacity;
}
.c-cursor-spotlight.is-active {
opacity: 1;
}
@media (pointer: coarse) {
.c-cursor-spotlight {
display: none;
}
}
/* ==========================================================================
Nav (Channel Home)
========================================================================== */
.c-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(12, 9, 6, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--c-border);
}
.c-nav__inner {
max-width: var(--c-max-width);
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.c-nav__logo {
font-family: var(--c-font-sans);
font-weight: 700;
font-size: 1.05rem;
color: var(--c-text);
}
.c-nav__links {
display: flex;
gap: 2rem;
}
.c-nav__links a {
font-family: var(--c-font-sans);
color: var(--c-text-dim);
font-size: 0.9rem;
transition: color var(--c-transition);
position: relative;
}
.c-nav__links a::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background: var(--c-accent);
transition: width var(--c-transition);
}
.c-nav__links a:hover,
.c-nav__links a:focus-visible {
color: var(--c-text);
}
.c-nav__links a:hover::after,
.c-nav__links a:focus-visible::after {
width: 100%;
}
.c-nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 0.5rem;
border-radius: var(--c-radius-sm);
transition: background-color var(--c-transition-fast), transform var(--c-transition-fast);
}
.c-nav__toggle:hover,
.c-nav__toggle:focus-visible {
background: var(--c-accent-soft);
transform: scale(1.08);
}
.c-nav__toggle span {
width: 22px;
height: 2px;
background: var(--c-text);
transition: transform var(--c-transition), opacity var(--c-transition), background-color var(--c-transition-fast);
}
.c-nav__toggle:hover span,
.c-nav__toggle:focus-visible span {
background: var(--c-accent);
}
/* ==========================================================================
Buttons
========================================================================== */
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.75rem;
border-radius: var(--c-radius-sm);
font-family: var(--c-font-sans);
font-weight: 600;
font-size: 0.95rem;
border: 1px solid transparent;
transition: transform var(--c-transition-fast), box-shadow var(--c-transition-fast), background var(--c-transition-fast), border-color var(--c-transition-fast);
}
.c-btn--primary {
background: var(--c-accent);
color: var(--c-ink);
}
.c-btn--primary:hover,
.c-btn--primary:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--c-accent-glow);
background: var(--c-accent-hover);
}
.c-btn--ghost {
border-color: var(--c-border);
color: var(--c-text);
}
.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
border-color: var(--c-accent);
color: var(--c-accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--c-accent-rgb), 0.15);
}
/* ==========================================================================
Reveal-on-scroll
========================================================================== */
.c-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--c-ease), transform 700ms var(--c-ease);
/* See .reveal in style.css: promotes a compositor layer before the
scroll-triggered transition starts, to avoid mobile GPUs rasterizing
it against a stale tile mid-scroll (reads as a flicker/vanish). */
will-change: opacity, transform;
}
.c-reveal.is-visible {
opacity: 1;
transform: none;
}
/* ==========================================================================
Hero (Channel Home) — grid pattern + glow, same recipe as the visitka hero
========================================================================== */
.c-hero {
position: relative;
z-index: 2;
min-height: 92vh;
/* See .hero in style.css: 100dvh/92dvh tracks the real visible mobile
viewport instead of the browser's address-bar-hidden maximum. */
min-height: 92dvh;
display: flex;
align-items: center;
padding: 8rem 1.5rem 4rem;
overflow: hidden;
isolation: isolate;
}
.c-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: radial-gradient(ellipse at top right, rgba(var(--c-accent-rgb), 0.14), transparent 55%);
}
.c-hero__bg::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(var(--c-accent-rgb), 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--c-accent-rgb), 0.06) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
}
.c-hero__glow {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Fine-pointer devices get the glow from the global .c-cursor-spotlight
layer; this element only paints on touch devices, driving an autonomous
drift instead. */
@media (pointer: coarse) {
.c-hero__glow {
background-image: radial-gradient(circle, var(--c-accent-glow), transparent 45%);
background-repeat: no-repeat;
background-size: 1100px 1100px;
background-position: 30% 30%;
will-change: background-position;
animation: cHeroGlowDrift 10s ease-in-out infinite;
}
}
@keyframes cHeroGlowDrift {
0% { background-position: 30% 30%; }
50% { background-position: 68% 52%; }
100% { background-position: 30% 30%; }
}
.c-hero__content {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.c-hero__greeting {
font-family: var(--c-font-sans);
color: var(--c-accent);
font-size: 1.05rem;
font-weight: 500;
margin-bottom: 1rem;
}
.c-hero__name {
font-size: clamp(2.2rem, 5.5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.12;
margin-bottom: 0.75rem;
}
.c-hero__role {
font-family: var(--c-font-sans);
font-size: clamp(1.05rem, 2.2vw, 1.3rem);
color: var(--c-text-dim);
margin-bottom: 1.5rem;
}
.c-hero__desc {
font-size: 1.05rem;
line-height: 1.75;
color: var(--c-text-soft);
max-width: 620px;
margin-bottom: 2.25rem;
}
.c-hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* ==========================================================================
Sections (shared)
========================================================================== */
.c-section {
position: relative;
padding: 6rem 1.5rem;
overflow: hidden;
}
.c-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--c-border) 25%, var(--c-border) 75%, transparent);
filter: blur(1px);
opacity: 0.6;
pointer-events: none;
}
.c-section__inner {
position: relative;
z-index: 1;
max-width: var(--c-max-width);
margin: 0 auto;
}
.c-section__title {
font-size: clamp(1.6rem, 3.6vw, 2.1rem);
font-weight: 800;
margin-bottom: 1.75rem;
}
/* ==========================================================================
Section background orbs (scroll parallax) — one hue family (amber), two
tones for depth instead of the visitka's two-color pairing.
========================================================================== */
.c-section-orbs {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.c-orb {
position: absolute;
pointer-events: none;
will-change: transform;
}
.c-orb::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
filter: blur(90px);
animation: cOrbPulse 10s ease-in-out infinite;
}
@keyframes cOrbPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
.c-orb--accent::after {
background: var(--c-accent);
opacity: 0.14;
}
.c-orb--warm::after {
background: rgb(var(--c-warm-rgb));
opacity: 0.16;
}
#about .c-orb--accent {
top: -16%;
right: -10%;
width: 380px;
height: 380px;
}
#about .c-orb--accent::after {
animation-duration: 9s;
}
#about .c-orb--warm {
bottom: -10%;
left: -8%;
width: 280px;
height: 280px;
}
#about .c-orb--warm::after {
animation-duration: 12s;
animation-delay: 1.5s;
}
#topics .c-orb--accent {
top: -18%;
left: -10%;
width: 460px;
height: 460px;
}
#topics .c-orb--accent::after {
animation-duration: 13s;
animation-delay: 0.6s;
}
#topics .c-orb--warm {
top: 35%;
right: -8%;
width: 260px;
height: 260px;
}
#topics .c-orb--warm::after {
animation-duration: 8.5s;
}
#contacts .c-orb--accent {
bottom: -22%;
left: 30%;
width: 440px;
height: 440px;
}
#contacts .c-orb--accent::after {
animation-duration: 12.5s;
animation-delay: 0.4s;
}
#contacts .c-orb--warm {
top: -12%;
left: -8%;
width: 240px;
height: 240px;
}
#contacts .c-orb--warm::after {
animation-duration: 8s;
animation-delay: 1.8s;
}
/* ==========================================================================
Stats
========================================================================== */
.c-stats {
position: relative;
overflow: hidden;
max-width: var(--c-max-width);
margin: 0 auto;
padding: 0 1.5rem 5rem;
}
.c-stats__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.125rem;
}
.c-stat {
border: 1px solid var(--c-border);
border-radius: 10px;
background: var(--c-bg-card);
padding: 1.5rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
transition: border-color var(--c-transition), transform var(--c-transition), box-shadow var(--c-transition);
/* See .stat in style.css: sits inside .c-stats.c-reveal, which gets its
own transform during the scroll-reveal transition. Without its own
promoted layer, a card here can get rasterized against the parent's
stale transform matrix mid-transition on some mobile GPUs, landing
visibly offset from its siblings until the next full repaint — see #3. */
will-change: transform;
}
.c-stat:hover {
border-color: var(--c-border-hover);
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.c-stat__number {
font-family: var(--c-font-sans);
font-size: clamp(1.6rem, 3.2vw, 1.9rem);
font-weight: 700;
color: var(--c-accent);
}
.c-stat__label {
font-family: var(--c-font-sans);
font-size: 0.82rem;
color: var(--c-text-faint);
}
/* ==========================================================================
Chart — same horizontal bar chart as the visitka's .chart, recolored to
the channel's warm accent (see blocks.py's render_chart).
========================================================================== */
.c-chart__list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.c-chart__row {
display: grid;
grid-template-columns: minmax(110px, 200px) 1fr auto;
align-items: center;
gap: 1rem;
}
.c-chart__label {
font-family: var(--c-font-sans);
color: var(--c-text-dim);
font-size: 0.9rem;
}
.c-chart__track {
position: relative;
height: 10px;
border-radius: 999px;
background: var(--c-bg-sunken);
border: 1px solid var(--c-border);
overflow: hidden;
}
.c-chart__fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--c-accent-hover), var(--c-accent));
transition: width 900ms var(--c-ease);
}
.c-chart__value {
font-family: var(--c-font-sans);
font-weight: 700;
color: var(--c-accent);
min-width: 2.5ch;
text-align: right;
}
@media (max-width: 640px) {
.c-chart__row {
grid-template-columns: 1fr auto;
grid-template-areas: "label value" "track track";
row-gap: 0.4rem;
}
.c-chart__label {
grid-area: label;
}
.c-chart__value {
grid-area: value;
}
.c-chart__track {
grid-area: track;
}
}
/* ==========================================================================
Table — same scroll-shell data table as the visitka's .table-block,
recolored to the channel's warm palette (see blocks.py's render_table).
========================================================================== */
.c-table-block__scroll {
overflow-x: auto;
border: 1px solid var(--c-border);
border-radius: var(--c-radius);
background: var(--c-bg-card);
}
.c-table-block__table {
width: 100%;
min-width: 480px;
border-collapse: collapse;
font-family: var(--c-font-sans);
font-size: 0.9rem;
}
.c-table-block__table th,
.c-table-block__table td {
padding: 0.85rem 1.1rem;
text-align: left;
border-bottom: 1px solid var(--c-border);
white-space: nowrap;
}
.c-table-block__table th {
color: var(--c-accent);
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--c-bg-elevated);
}
.c-table-block__table tbody tr:last-child td {
border-bottom: none;
}
.c-table-block__table tbody tr {
transition: background-color var(--c-transition-fast);
}
.c-table-block__table tbody tr:hover {
background: rgba(var(--c-accent-rgb), 0.06);
}
@media (max-width: 640px) {
.c-table-block__table th,
.c-table-block__table td {
padding: 0.65rem 0.85rem;
font-size: 0.83rem;
}
}
/* ==========================================================================
Timeline (О канале) — same structure/marker logic as the visitka's Опыт
timeline (.timeline / .timeline__marker, border-left rail, is-visible ->
fill + glow + scale), recolored to the amber accent.
========================================================================== */
.c-timeline {
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
max-width: 720px;
padding-left: 1.75rem;
border-left: 1px solid var(--c-border);
}
.c-timeline__item {
position: relative;
}
.c-timeline__heading {
position: relative;
}
.c-timeline__marker {
position: absolute;
left: -2.28rem;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--c-bg);
border: 2px solid var(--c-accent);
transition: background-color 600ms var(--c-ease), box-shadow 600ms var(--c-ease), transform 600ms var(--c-ease);
}
.c-timeline__item.is-visible .c-timeline__marker {
background: var(--c-accent);
box-shadow: 0 0 16px 2px var(--c-accent-glow);
transform: translateY(-50%) scale(1.15);
}
.c-timeline__content h3 {
font-family: var(--c-font-sans);
font-size: 0.95rem;
font-weight: 600;
color: var(--c-text);
margin-bottom: 0.35rem;
}
.c-timeline__content p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--c-text-dim);
}
/* ==========================================================================
Cards (Темы) — same hover recipe as the visitka's Проекты cards: lift,
border tint, soft colored glow. No top stripe, no link glow box.
========================================================================== */
.c-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.c-topic-card {
background: var(--c-bg-card);
border: 1px solid var(--c-border);
border-radius: 10px;
padding: 1.375rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
transition: transform var(--c-transition), box-shadow var(--c-transition), border-color var(--c-transition);
}
.c-topic-card:hover,
.c-topic-card:focus-within {
transform: translateY(-6px);
border-color: rgba(var(--c-accent-rgb), 0.4);
box-shadow: 0 16px 40px rgba(var(--c-accent-rgb), 0.14);
}
.c-topic-card__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--c-text);
}
.c-topic-card__desc {
font-size: 0.88rem;
line-height: 1.6;
color: var(--c-text-dim);
flex-grow: 1;
}
.c-topic-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.c-tag {
font-family: var(--c-font-mono);
font-size: 0.68rem;
font-weight: 500;
color: var(--c-accent);
border: 1px solid var(--c-border);
border-radius: 20px;
padding: 0.2rem 0.55rem;
}
.c-topic-card__link {
font-family: var(--c-font-sans);
font-size: 0.85rem;
font-weight: 500;
color: var(--c-accent);
align-self: flex-start;
border-bottom: 1px solid transparent;
transition: border-color var(--c-transition), color var(--c-transition);
}
.c-topic-card__link:hover,
.c-topic-card__link:focus-visible {
border-color: var(--c-accent);
}
/* ==========================================================================
Contacts (footer of Channel Home) — same carded contact-link component as
the visitka's .contacts/.contact-link, recolored to the channel palette.
========================================================================== */
.c-contacts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.c-contact-link {
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--c-radius);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
transition: transform var(--c-transition), border-color var(--c-transition), box-shadow var(--c-transition);
}
.c-contact-link:hover,
.c-contact-link:focus-visible {
transform: translateY(-4px);
border-color: var(--c-accent);
box-shadow: 0 12px 32px var(--c-accent-glow);
}
.c-contact-link__icon {
width: 26px;
height: 26px;
margin-bottom: 0.2rem;
color: var(--c-text-dim);
transition: color var(--c-transition);
}
.c-contact-link__icon svg {
display: block;
width: 100%;
height: 100%;
}
.c-contact-link:hover .c-contact-link__icon,
.c-contact-link:focus-visible .c-contact-link__icon {
color: var(--c-accent);
}
.c-contact-link--featured .c-contact-link__icon {
width: 30px;
height: 30px;
}
.c-contact-link__label {
font-family: var(--c-font-sans);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--c-text-faint);
}
.c-contact-link__value {
font-family: var(--c-font-sans);
font-weight: 600;
color: var(--c-text);
word-break: break-word;
}
.c-contact-link--featured {
grid-column: 1 / -1;
padding: 1.75rem;
background: linear-gradient(120deg, rgba(var(--c-accent-rgb), 0.14), rgba(var(--c-accent-rgb), 0.03));
border-color: rgba(var(--c-accent-rgb), 0.4);
}
.c-contact-link--featured .c-contact-link__label {
color: var(--c-text-dim);
text-transform: none;
letter-spacing: normal;
font-size: 0.95rem;
}
.c-contact-link--featured .c-contact-link__value {
font-size: 1.4rem;
}
.c-contacts-cta {
margin-top: 1.5rem;
display: flex;
justify-content: center;
}
.c-farewell {
text-align: center;
font-family: var(--c-font-sans);
font-size: 1.1rem;
font-weight: 700;
color: var(--c-accent);
margin-top: 2.5rem;
}
@keyframes cBreathe {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* ==========================================================================
Reader app shell — the document (html.c-shell, above) never scrolls.
.c-app fills the viewport and lays out top bar + frame vertically;
.c-frame fills the remaining height; only .c-feed scrolls internally.
========================================================================== */
.c-app {
height: 100vh;
/* See .hero in style.css: 100dvh tracks the real visible mobile viewport
instead of the browser's address-bar-hidden maximum. html.c-shell
never scrolls (overflow: hidden above), so on a plain 100vh the
bottom-anchored jump-to-latest button was clipped off-screen behind
the address bar on first paint instead of just being shorter. */
height: 100dvh;
max-width: var(--c-max-width);
margin: 0 auto;
padding: 1.5rem 1.5rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 0;
}
.c-app__top {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.c-app__back {
font-family: var(--c-font-sans);
font-size: 0.85rem;
color: var(--c-text-faint);
transition: color var(--c-transition-fast);
}
.c-app__back:hover,
.c-app__back:focus-visible {
color: var(--c-accent);
}
.c-frame {
position: relative;
isolation: isolate;
flex: 1 1 auto;
min-height: 0;
display: flex;
width: 100%;
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--c-radius);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* Very subtle "breathing" glow behind the reading surface — anchored to
the frame (not the scrolling feed) so it stays still while posts scroll,
and sits under the sidebar/header's own opaque backgrounds so it only
reads through in the feed's empty space. No cursor spotlight, no bright
orbs: this page is for reading, not showing off.
Positioned at 78% (not center-left) so its hot spot lands inside the
feed's own area rather than under the sidebar's opaque 270px column —
centering it at 30% put most of the glow directly behind the sidebar,
where it was fully hidden and only its faint falloff ever reached the
feed on desktop. */
.c-frame::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 65% 50% at 78% 12%, rgba(var(--c-accent-rgb), 0.16), transparent 65%);
animation: cBreathe 12s ease-in-out infinite;
}
/* Selectable "chat wallpaper" texture, chosen in the admin (posts-settings
"Узор фона" field, see channel_settings_repository.py for the
body[data-bg-pattern] attribute it writes). Same layering as ::before
above — sits under the sidebar/header's own opaque backgrounds, so it
only reads through the feed's actual empty space (padding, the gaps
between post cards) rather than a thin, easy-to-miss strip around the
outside of the frame. "none" (the default) paints nothing. Renders on
mobile too, unlike the page orbs below: the frame fills the whole
viewport there, so this is the *only* place the pattern could ever show. */
.c-frame::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
body[data-bg-pattern="dots"] .c-frame::after {
background-image: radial-gradient(rgba(var(--c-accent-rgb), 0.35) 1.5px, transparent 1.5px);
background-size: 22px 22px;
}
body[data-bg-pattern="grid"] .c-frame::after {
background-image:
linear-gradient(rgba(var(--c-accent-rgb), 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--c-accent-rgb), 0.16) 1px, transparent 1px);
background-size: 32px 32px;
}
body[data-bg-pattern="diagonal"] .c-frame::after {
background-image: repeating-linear-gradient(135deg, rgba(var(--c-accent-rgb), 0.16) 0, rgba(var(--c-accent-rgb), 0.16) 1px, transparent 1px, transparent 14px);
}
/* ---------- Sidebar (desktop) ---------- */
.c-sidebar {
position: relative;
z-index: 1;
width: 270px;
flex-shrink: 0;
padding: 2rem 1.5rem;
border-right: 1px solid var(--c-border);
background: var(--c-bg-elevated);
display: flex;
flex-direction: column;
gap: 1.5rem;
overflow-y: auto;
}
.c-sidebar__name {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--c-text);
transition: color var(--c-transition-fast);
}
a.c-sidebar__name:hover,
a.c-sidebar__name:focus-visible {
color: var(--c-accent);
}
.c-sidebar__desc {
font-size: 0.88rem;
line-height: 1.6;
color: var(--c-text-dim);
margin-top: 0.5rem;
}
.c-search {
width: 100%;
padding: 0.6rem 0.7rem;
border: 1px solid var(--c-border);
border-radius: var(--c-radius-sm);
background: var(--c-bg-card);
color: var(--c-text-fainter);
font-family: var(--c-font-sans);
font-size: 0.8rem;
}
.c-search::placeholder {
color: var(--c-text-fainter);
}
.c-filters {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.c-filter {
padding: 0.5rem 0.6rem;
border-radius: 6px;
font-family: var(--c-font-sans);
font-size: 0.8rem;
font-weight: 400;
color: var(--c-text-dim);
text-align: left;
transition: background-color var(--c-transition-fast), color var(--c-transition-fast);
}
.c-filter:hover {
color: var(--c-text);
}
.c-filter.is-active {
background: var(--c-accent-soft);
color: var(--c-accent);
font-weight: 600;
}
.c-sidebar__stats {
display: flex;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--c-border);
margin-top: auto;
}
.c-sidebar__stat {
flex: 1;
}
.c-sidebar__stat-num {
font-family: var(--c-font-sans);
font-size: 1.15rem;
font-weight: 700;
color: var(--c-accent);
}
.c-sidebar__stat-label {
font-family: var(--c-font-sans);
font-size: 0.68rem;
color: var(--c-text-fainter);
}
/* ==========================================================================
Resource browser entry points (sidebar desktop + mobile dropdown) — each
opens the shared #cResourceModal scoped to its type.
========================================================================== */
.c-sidebar__resources {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.c-sidebar__resources-title {
font-family: var(--c-font-sans);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--c-text-faintest);
padding: 0 0.6rem 0.35rem;
}
.c-resource-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.6rem;
border-radius: 6px;
font-family: var(--c-font-sans);
font-size: 0.8rem;
color: var(--c-text-dim);
text-align: left;
transition: background-color var(--c-transition-fast), color var(--c-transition-fast);
}
.c-resource-btn:hover,
.c-resource-btn:focus-visible {
background: var(--c-accent-soft);
color: var(--c-accent);
}
/* ---------- Mobile header ---------- */
.c-mobile-header {
display: none;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-elevated);
flex-shrink: 0;
position: relative;
/* Higher than .c-feed's z-index: the two are equal-position siblings in
.c-frame's flex column, and .c-feed comes later in DOM order — without
this, the dropdown menu below (a descendant capped inside this header's
own stacking context) would paint underneath the feed instead of over it. */
z-index: 2;
}
.c-mobile-back {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--c-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-text-dim);
transition: background-color var(--c-transition-fast), color var(--c-transition-fast);
}
.c-mobile-back:hover,
.c-mobile-back:focus-visible {
background: var(--c-accent-soft);
color: var(--c-accent);
}
.c-mobile-header__text {
flex: 1;
min-width: 0;
}
.c-mobile-header__name {
font-size: 0.95rem;
font-weight: 700;
color: var(--c-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-mobile-header__sub {
font-family: var(--c-font-sans);
font-size: 0.68rem;
color: var(--c-text-fainter);
}
/* Same recipe as the visitka's .nav__toggle: hover lift+tint, spans that
morph into a cross when .is-open (translateY to converge + rotate,
middle span fades out). */
.c-mobile-toggle {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--c-radius-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: background-color var(--c-transition-fast), transform var(--c-transition-fast);
}
.c-mobile-toggle:hover,
.c-mobile-toggle:focus-visible {
background: var(--c-accent-soft);
transform: scale(1.08);
}
.c-mobile-toggle span {
width: 18px;
height: 2px;
border-radius: 1px;
background: var(--c-text);
transition: transform var(--c-transition), opacity var(--c-transition), background-color var(--c-transition-fast);
}
.c-mobile-toggle:hover span,
.c-mobile-toggle:focus-visible span {
background: var(--c-accent);
}
.c-mobile-toggle.is-open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.c-mobile-toggle.is-open span:nth-child(2) {
opacity: 0;
}
.c-mobile-toggle.is-open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* ---------- Feed ---------- */
/* .c-feed-viewport is the non-scrolling flex slot (takes over .c-feed's
old position in .c-frame's layout); .c-feed becomes an absolutely
positioned fill of it so the jump-to-latest button can anchor to the
viewport's corner without scrolling away with the feed's content. */
.c-feed-viewport {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
}
.c-feed {
position: absolute;
inset: 0;
padding: 2rem 2.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(var(--c-accent-rgb), 0.35) transparent;
}
/* ---------- Jump to latest ---------- */
.c-jump-latest {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
z-index: 3;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--c-accent);
color: var(--c-ink);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--c-accent-rgb), 0.3);
opacity: 0;
transform: translateY(8px) scale(0.9);
pointer-events: none;
transition: opacity var(--c-transition), transform var(--c-transition), box-shadow var(--c-transition-fast), background-color var(--c-transition-fast);
}
.c-jump-latest.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
.c-jump-latest:hover,
.c-jump-latest:focus-visible {
background: var(--c-accent-hover);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--c-accent-rgb), 0.5);
transform: translateY(-2px);
}
.c-feed::-webkit-scrollbar {
width: 8px;
}
.c-feed::-webkit-scrollbar-track {
background: transparent;
}
.c-feed::-webkit-scrollbar-thumb {
background-color: rgba(var(--c-accent-rgb), 0.35);
border-radius: 8px;
}
.c-feed::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--c-accent-rgb), 0.55);
}
.c-feed__empty {
margin: auto;
font-family: var(--c-font-sans);
font-size: 0.9rem;
color: var(--c-text-faint);
text-align: center;
}
/* Infinite-scroll-up trigger: sits above the oldest currently-rendered
post, observed via IntersectionObserver to prepend the next older batch.
Removed once the true start of the feed has been reached. */
.c-feed__sentinel {
flex-shrink: 0;
padding: 0.5rem 0;
text-align: center;
font-family: var(--c-font-sans);
font-size: 0.7rem;
color: var(--c-text-faintest);
}
/* A date pill is a button that opens the calendar (see .c-calendar below),
so it gets a hover/focus treatment signaling it's clickable. */
.c-feed__chip {
align-self: center;
font-family: var(--c-font-sans);
font-size: 0.7rem;
font-weight: 500;
color: var(--c-text-fainter);
background: var(--c-bg-card);
border: 1px solid var(--c-border);
padding: 0.3rem 0.75rem;
border-radius: 20px;
cursor: pointer;
transition: border-color var(--c-transition-fast), color var(--c-transition-fast), background-color var(--c-transition-fast);
}
.c-feed__chip:hover,
.c-feed__chip:focus-visible {
border-color: rgba(var(--c-accent-rgb), 0.4);
color: var(--c-accent);
background: var(--c-accent-soft);
}
.c-post {
border: 1px solid var(--c-border);
border-radius: 12px;
background: var(--c-bg-card);
padding: 1.5rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
min-width: 0;
}
.c-post__category {
font-family: var(--c-font-sans);
font-size: 0.68rem;
font-weight: 500;
color: var(--c-accent);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.c-post__heading {
font-size: 1.2rem;
font-weight: 700;
color: var(--c-text);
margin-top: 0.375rem;
}
.c-post__para {
font-size: 0.97rem;
line-height: 1.75;
color: var(--c-text);
white-space: pre-wrap;
/* A long unbroken URL (or any other no-space run) in the source text
otherwise refuses to wrap and pushes the post wider than its card —
this lets it break rather than overflow. */
overflow-wrap: anywhere;
}
/* Inline markdown link inside a paragraph — the source of truth that the
.c-videolink preview card right below is generated from. */
.c-post__para a {
color: var(--c-accent);
text-decoration: underline;
text-decoration-color: rgba(var(--c-accent-rgb), 0.4);
text-underline-offset: 2px;
transition: text-decoration-color var(--c-transition-fast), color var(--c-transition-fast);
}
.c-post__para a:hover,
.c-post__para a:focus-visible {
text-decoration-color: var(--c-accent);
color: var(--c-accent-hover);
}
.c-post__list {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.c-post__list-item {
display: flex;
gap: 0.55rem;
font-size: 0.94rem;
line-height: 1.6;
color: var(--c-text);
}
.c-post__list-item::before {
content: '—';
color: var(--c-accent);
flex-shrink: 0;
}
.c-post__figure {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Clickable — opens the lightbox (see .c-lightbox below), so it gets the
same lift/zoom affordance as the site's other interactive elements. */
.c-post__figure img {
width: 100%;
max-width: 520px;
border-radius: 10px;
object-fit: cover;
border: 1px solid var(--c-border-dark);
cursor: zoom-in;
transition: transform var(--c-transition-fast), border-color var(--c-transition-fast);
}
.c-post__figure img:hover,
.c-post__figure img:focus-visible {
transform: scale(1.015);
border-color: rgba(var(--c-accent-rgb), 0.35);
}
.c-post__figure figcaption {
font-family: var(--c-font-sans);
font-size: 0.75rem;
color: var(--c-text-fainter);
}
.c-post__placeholder-img {
width: 100%;
max-width: 520px;
aspect-ratio: 16 / 10;
border-radius: 10px;
border: 1px solid var(--c-border-dark);
background-image: repeating-linear-gradient(135deg, #1c150e, #1c150e 9px, #160f09 9px, #160f09 18px);
}
/* ==========================================================================
Photo gallery block — a plain set of photos with no per-image caption.
Adaptive grid (auto-fit keeps tiles a sane minimum size on both desktop
and mobile); every tile opens the shared lightbox with prev/next paging
across the rest of the gallery.
========================================================================== */
.c-post__gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.5rem;
max-width: 560px;
}
.c-post__gallery-item {
/* `aspect-ratio: 1` alone (no in-flow content, since the img below is
absolutely positioned out of flow) isn't reliably picked up by CSS
Grid's `grid-auto-rows: auto` sizing pass — rows ended up sized far
shorter than the items in them, so every tile overflowed downward and
overlapped the rows beneath it (looked like flattened/bleeding
images). The classic padding-top: 100% trick below gives the item
real in-flow content whose height is derived from its own resolved
width — always definite by the time row-sizing runs, so the row track
comes out correctly sized regardless of aspect-ratio/grid quirks. */
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--c-border-dark);
cursor: zoom-in;
transition: transform var(--c-transition-fast), border-color var(--c-transition-fast), z-index 0s var(--c-transition-fast);
}
.c-post__gallery-item::before {
content: '';
display: block;
padding-top: 100%;
}
.c-post__gallery-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.c-post__gallery-item:hover,
.c-post__gallery-item:focus-visible {
transform: scale(1.04);
border-color: rgba(var(--c-accent-rgb), 0.4);
z-index: 1;
}
/* ==========================================================================
Video post block — custom player chrome over a native