; a grid item with long words in it needs min-width:0 or it refuses to shrink and pushes the card off the screen. */ .rc-hero__copy { min-width: 0; } /* The vertical rhythm between home-page blocks. It used to be an inline style="margin-top:var(--space-20)" on three elements - inline styles cannot answer a media query and an identical inline style across nine sites is itself a footprint. */ .rc-block { margin-top: var(--space-20); } .rc-main > .rc-block:first-child { margin-top: 0; } /* 🚨 On a phone the header holds brand + a ~190px CTA + two 40px icons and the icons land past the right edge. The rule above this one does the same job for the original bar shape only (`.rc-hd__bar > .rc-hd__right > .rc-hd__cta`); the other four headers nest the button differently, so the same defect would come back on them unnoticed. The drawer's own CTA is shown by that earlier block, so nothing is lost. */ @media (max-width: 559px) { .rc-hd__cta, .rc-hd__bandcta { display: none; } } /* The "most read" box when it leads the home page: it used to carry an inline style="margin-bottom:..." and lost its gap when the inline styles went. Without it the cards grid starts flush against the box and the two read as one block. */ .rc-feat--lead { margin-bottom: var(--space-12); } /* A home block with no aside beside it: the prose measure is 72ch, so against a full-width row it left half the page empty. Centring the measure is what a page with no rail is supposed to look like. */ .rc-shell--solo > .rc-prose { margin-inline: auto; } /* Long titles are adapted, never cut. The label used to be chopped at 46 characters with an ellipsis; every place it appears is a vertical list that can take two lines, so the full title is shown and wraps. The dropdown is given room to do it. */ .rc-nav__menu { max-width: 340px; } .rc-nav__menu a, .rc-linklist a, .rc-drawer__group a, .rc-foot__cols a { overflow-wrap: anywhere; } .rc-crumb > span:last-child { overflow-wrap: anywhere; } /* 🚨 Контраст измерен в браузере, не взят из исходника. В ТЁМНОЙ теме акцент светлеет (см. правила ниже, они пишутся движком на каждый сайт), и белый текст на светлой заливке давал 2,7–3,9:1. Текст на заливке берёт `--color-on-accent`: он белый в светлой теме и почти чёрный в тёмной. Одну правку без другой делать нельзя — токен без тёмного акцента сделал бы хуже восьми сайтам из девяти. */ :root { --rb-accent: #db2777; } :root[data-theme="dark"] { --rb-accent: #e14a8d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rb-accent: #e14a8d; } } .rc-hd__mark { border-radius: 50%; } .rc-card { border-left: 3px solid var(--rb-accent); } .rc-comprow { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); } .rc-comprow:last-child { border-bottom: 0; } .rc-comprow span:first-child { font: 700 12px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--rb-accent); } .rc-comprow b { font-weight: 400; font-size: 14px; text-align: right; } /* --- header variant 3 --- */ .rc-hd--panel .rc-hd__bar { gap: var(--space-5); } .rc-mega { position: relative; margin-left: auto; } .rc-mega__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong); background: var(--color-surface-card); color: var(--color-ink); font: 600 14px/18px var(--font-sans); white-space: nowrap; } .rc-mega__btn::-webkit-details-marker { display: none; } /* 🚨 The panel was anchored to the button (position:relative on .mega, right:0 on the panel). An 880px panel hanging off a button whose right edge sits at x=761 starts at x=-119: a quarter of the menu was outside the window on every page, and the page does not scroll sideways to reveal it (overflow-x: clip), so nothing looked wrong. It is now anchored to the HEADER itself - the sticky header is a positioned ancestor - and spans the full window width, which cannot overflow by construction. The inner grid carries the page's own measure so the columns line up with the bar. */ .rc-hd--panel .rc-mega { position: static; } .rc-mega__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; padding: var(--space-6) 0 var(--space-8); background: var(--color-surface-card); border-bottom: 1px solid var(--color-line-strong); box-shadow: var(--shadow-card); } .rc-mega__grid { display: grid; gap: var(--space-6); max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .rc-mega__col > b { display: block; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: var(--space-3); } .rc-mega__col a { display: block; padding: 5px 0; text-decoration: none; color: var(--color-ink); font: var(--text-body-sm); } .rc-mega__col a:hover { color: var(--rb-accent); } @media (max-width: 1023px) { .rc-mega { display: none; } } .rc-drawer__back { display: none; } @media (max-width: 1023px) { .rc-drawer__back { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 23, .55); visibility: hidden; opacity: 0; transition: opacity .18s; } body.rc-open .rc-drawer__back { visibility: visible; opacity: 1; } .rc-drawer--sheet-left { inset: 0 auto 0 0; width: min(380px, 86vw); border-right: 1px solid var(--color-line-strong); } } /* --- article variant 3 --- */ .rc-hero--crumb .rc-crumb { padding-top: 0; margin-bottom: var(--space-5); } .rc-hero--crumb .rc-hero__meta { margin-top: var(--space-4); } .rc-hero--crumb .rc-hero__lede { margin-top: var(--space-5); } @media (min-width: 1080px) { .rc-aside--rail { border-left: 2px solid var(--color-line); padding-left: var(--space-6); } } @media (min-width: 1000px) { .rc-idx--v3 .rc-idx__block ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); } } .rc-idx--v3 .rc-idx__block h2 { color: var(--rb-accent); } /* --- home variant 2 --- */ @media (min-width: 1000px) { .rc-hero__grid--flip { grid-template-columns: minmax(320px, .65fr) minmax(0, 1.35fr); } } @media (max-width: 999px) { .rc-hero__grid--flip > .rc-hero__copy { order: -1; } } .rc-feat h2 { font: var(--text-h2); letter-spacing: var(--tracking-h2); margin: 0 0 var(--space-6); } .rc-feat .rc-linklist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); column-gap: var(--space-4); } .rc-feat .rc-linklist a { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-surface-card); font: var(--text-body-sm); } .rc-feat .rc-linklist a::before { content: "\2192"; margin-right: 8px; color: var(--rb-accent); } .rc-feat .rc-linklist a:hover { border-color: var(--rb-accent); }