/* «Что такое Clike.ru» (/about) — без сайдбара и нижней навигации (голый режим оболочки), шапка — общая единая шапка сайта (dc-app-header.css, 07.10). Эталон: утверждённые владельцем макеты 05.10. Только токены --ds-*; кнопка — канонический .ds-auth-primary (здесь лишь раскладка). Брейкпоинты проекта: 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 место под шапку с запасом под прежнюю двухстрочную — пустая полоса над текстом (приёмка владельца на iPhone, 06.10). Тот же селектор, сужённый до .wrap этой страницы; место под шапку (строка + safe-area) резервирует один источник — padding-top у .about-page ниже, одинаково в браузере и в приложении. */ @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; } } /* СЕРАЯ ПОЛОСА У ЧАСОВ В УСТАНОВЛЕННОМ ПРИЛОЖЕНИИ (приёмка владельца на iPhone 06.10, светлая тема). iOS 26 рисует у верхнего края мягкий системный слой (scroll edge effect) цветом ПОДЛОЖКИ прокрутки WebKit. Подложка = фон документа = фон body поверх фона html (WebKit LocalFrameView::documentBackgroundColor: blendSourceOver(html, body)). html в приложении уже #181818 (page_header.php), но непрозрачный светлый body перекрывал его, и слой выходил серым поверх тёмной шапки. Холст страницы рисует сам .about-page (min-height:100dvh), body виден лишь за краями при оттяжке — красим его краской шапки. Только эта страница и только приложение; вкладка браузера не меняется. Перенесено из 3e7dfc49. На устройстве — NOT VERIFIED. :not(#dc-about-ink) перебивает критический «html,body{background-color:…!important}» из page_header.php. */ @media (display-mode: standalone), (display-mode: fullscreen){ html body:has(.about-page):not(#dc-about-ink){background-color:var(--dc-header-ink, rgb(24,24,24)) !important} } html.dc-pwa-emulate body:has(.about-page):not(#dc-about-ink){background-color:var(--dc-header-ink, rgb(24,24,24)) !important} .about-page{ /* Место под фиксированную единую шапку: строка (--dc-header-row-h) + зона статус-бара — те же токены, что задают высоту самой шапки (dc-app-header.css, блок «ЕДИНАЯ ШАПКА»). */ padding-top:calc(var(--dc-header-row-h, 56px) + var(--dc-safe-top, env(safe-area-inset-top,0px))); 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)); } /* Компактный заголовок статьи — не рекламный первый экран. */ .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 для ЛЮБЫХ ссылок в