/* «Что такое Clike.ru» (/about) — голый режим page_header. Эталон: утверждённые владельцем макеты 05.10. Только токены --ds-*; кнопка — канонический .ds-auth-primary (здесь лишь раскладка). Размеры бренда НЕ копируются: header.about-top дописан в правила dc-app-header.css (один источник). Брейкпоинты проекта: 1100 / 767 / 420 + ландшафт. Колонка чтения ≈ 68 символов. */ .about-page, .about-page *{box-sizing:border-box} /* Общая обёртка оболочки .wrap даёт боковые 12px и нижний резерв 90px под нижнюю навигацию — на голой странице навигации нет, а полоса бренда должна идти от края до края (эталон). Только для /about. Без войны специфичности: побеждающие правила оболочки (dc-mobile-pwa-shell.css, dc-responsive.css) берут отступы из переменных — обнуляем ПЕРЕМЕННЫЕ на самой .wrap этой страницы. */ .wrap:has(> .about-page){ --dc-mobile-wrap-inline:0px; --dc-mobile-content-bottom-reserve:0px; --dc-content-inline:0px; --dc-content-inline-end:0px; --dc-bottom-nav-desktop-wrap-reserve:0px; /* Десктоп: style.css ограничивает .wrap (max-width 1180, margin auto, padding 18px) без !important. */ max-width:none; width:auto; margin:0; padding-left:0; padding-right:0; } /* Два литерала оболочки с !important, у которых нет переменной, — компенсируем ровно их (общий CSS не трогаем): • телефон и низкий ландшафт: правый отступ max(12px, env(safe-area-inset-right)) (dc-mobile-pwa-shell.css, dc-app-header.css — те же медиазапросы); • 768–1179px: .wrap{max-width:min(100% - 32px, 1180px)} (dc-responsive.css). */ .wrap > .about-page{ --about-fix-pad:0px; --about-fix-max:0px; margin-right:calc(-1 * (var(--about-fix-pad) + var(--about-fix-max))); } @media (max-width:767px), (orientation:landscape) and (max-height:520px){ .wrap > .about-page{--about-fix-pad:max(12px, env(safe-area-inset-right, 0px))} } @media (min-width:768px) and (max-width:1179px){ .wrap > .about-page{--about-fix-max:32px} } /* Установленное приложение: оболочка (dc-mobile-pwa-shell.css, блок display-mode: standalone) резервирует над .wrap место под глобальную шапку — 68px + 6px + safe-area. На голой /about этой шапки нет, и резерв становился пустой полосой над логотипом (приёмка владельца на iPhone, 06.10). Тот же селектор, сужённый до .wrap этой страницы; безопасный отступ под статус-бар остаётся у тёмной полосы .about-top. */ @media (display-mode: standalone), (display-mode: fullscreen){ body.dc-runtime-pwa.user-mode:not(.feed-v2-surface):not(.guest-home-open):not(.contest-user-hub-page) .wrap:has(> .about-page), body.dc-pwa-standalone.user-mode:not(.feed-v2-surface):not(.guest-home-open):not(.contest-user-hub-page) .wrap:has(> .about-page){ padding-top:0 !important; } } .about-page{ min-height:100dvh; background:var(--ds-bg); color:var(--ds-ink); font-family:var(--ds-ui-font); font-size:var(--ds-text-md); line-height:1.65; -webkit-font-smoothing:antialiased; } .about-wrap{ width:min(100%, 760px); margin-inline:auto; padding-left:max(var(--ds-space-lg), env(safe-area-inset-left,0px)); padding-right:max(var(--ds-space-lg), env(safe-area-inset-right,0px)); } /* Строка бренда: как шапка сайта — тёмная полоса в обеих темах (белый SVG-вордмарк). */ /* Отступ под статус-бар — общий токен --dc-safe-top (= env(safe-area-inset-top)), один источник с оболочкой. */ .about-top{background:rgb(24,24,24); padding-top:var(--dc-safe-top, env(safe-area-inset-top,0px))} .about-top__in{display:flex; align-items:center; justify-content:space-between; gap:var(--ds-space-md); min-height:64px; padding-block:var(--ds-space-sm); width:min(100%, 1080px)} .about-top .brand{min-height:44px} /* Кнопка темы на всегда-тёмной полосе = трактовка шапки (ds-theme-button.css, блок «ШАПКА — dark-locked»), в обеих темах; размер — тач-цель 44px. */ .about-top .ds-theme-button{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#e8edf6; cursor:pointer} .about-top .ds-theme-button:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24)} .about-top .ds-theme-button:focus-visible{outline:2px solid var(--ds-brand-2); outline-offset:2px} .about-top .ds-theme-button svg{width:16px; height:16px} /* Компактный заголовок статьи — не рекламный первый экран. */ .about-main{padding-block:clamp(20px, 4vw, 40px) var(--ds-space-xl)} .about-main h1{margin:0 0 var(--ds-space-sm); font-size:clamp(24px, 4.4vw, 32px); line-height:1.2; text-wrap:balance} .about-lead{margin:0 0 var(--ds-space-sm); max-width:68ch} .about-lead + .about-lead{color:var(--ds-muted)} /* Первый экран — без кнопки-призыва: строка текстовых ссылок. */ .about-links{display:flex; flex-wrap:wrap; gap:0 var(--ds-space-lg); margin:var(--ds-space-xs) 0 var(--ds-space-lg)} .about-links a{display:inline-flex; align-items:center; min-height:44px; padding:0; color:var(--ds-link); text-decoration:none} .about-links a:hover, .about-links a:focus-visible{text-decoration:underline} /* Разделы — статья с тонким разделителем, без карточек. */ .about-sec{padding-block:var(--ds-space-lg); border-top:1px solid var(--ds-panel-bd)} .about-sec h2{margin:0 0 var(--ds-space-sm); font-size:var(--ds-text-lg); line-height:1.25; text-wrap:balance} .about-sec p{margin:0 0 var(--ds-space-sm); max-width:68ch} .about-sec p:last-child{margin-bottom:0} .about-sec a{color:var(--ds-link)} .about-project{color:var(--ds-muted); font-size:var(--ds-text-base)} .about-project h2{font-size:var(--ds-text-md); color:var(--ds-ink)} /* Единственная кнопка — после «Как начать», по ширине текста (без растяжки на телефоне). */ .about-cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--ds-space-md) var(--ds-space-lg); margin:var(--ds-space-md) 0 var(--ds-space-lg)} .about-cta .ds-auth-primary{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding-inline:28px; text-decoration:none} .about-cta__link{display:inline-flex; align-items:center; min-height:44px; color:var(--ds-link); font-weight:600; text-decoration:none} .about-cta__link:hover, .about-cta__link:focus-visible{text-decoration:underline} /* Светлая тема: --ds-link на --ds-bg = 3.62:1 (ниже AA) → --ds-link-hover = 4.52:1 (Виктория, 05.10). Общий долг токена --ds-link в светлой теме — AUDIT.md, здесь не чиним. */ :root[data-theme="light"] .about-page :is(.about-links a, .about-sec a, .about-cta__link){color:var(--ds-link-hover)} /* Подвал — активные документы из реестра (dc_legal_menu_links). */ .about-foot{border-top:1px solid var(--ds-panel-bd); padding-block:var(--ds-space-md) calc(var(--ds-space-lg) + env(safe-area-inset-bottom,0px))} .about-foot nav{display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--ds-space-lg); font-size:var(--ds-text-sm)} .about-foot a{display:inline-flex; align-items:center; min-height:44px; padding:0; color:var(--ds-muted); text-decoration:none} /* Наследие style.css для ЛЮБЫХ ссылок в