/* ============================================================ privatka-standoff-2.ru — вёрстка из Pencil-макета «standoff». Mobile-first (макет 390px), desktop-брейкпоинт 1024px (макет 1440). Одна разметка + медиазапросы, без mobile/desktop-дублей. Тема: dark по умолчанию (канон макета) + light через . ============================================================ */ /* ---------- Шрифты макета: self-hosted, без запросов к Google ---------- */ /* Archivo — display (в кириллице отсутствует, падает на Inter — как в макете) */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Inter — body */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* JetBrains Mono — версии, размеры файлов */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jbmono-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jbmono-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jbmono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ============================================================ Токены (1:1 с переменными макета) ============================================================ */ :root { --bg: #0E1116; --surface: #171C24; --surface-2: #1E252F; --text: #E7ECF3; --text-muted: #8C99AB; --border: #28313E; --accent: #FF6A2B; --accent-hover: #FF8047; --on-accent: #FFFFFF; --link: #3DA9FC; --success: #37C98C; --warn: #FFC23D; --warn-soft: #2A2416; --success-soft: #12281F; --accent-soft: #2A170F; --shadow: #00000099; --font-display: 'Archivo', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --radius-card: 14px; --radius-btn: 12px; --radius-pill: 999px; --gap-xs: 6px; --gap-sm: 10px; --gap-md: 16px; --gap-lg: 24px; --pad-screen: 16px; --content: 1200px; /* desktop: 1440 − 2×120 */ } :root[data-theme="light"] { --bg: #F4F6F9; --surface: #FFFFFF; --surface-2: #EDF1F6; --text: #101720; --text-muted: #5B6879; --border: #D7DEE8; --accent: #E8551A; --accent-hover: #FF6A2B; --link: #0B6BCB; --success: #0E8A5F; --warn: #B8791A; --warn-soft: #FDF3DC; --success-soft: #E3F6EE; --accent-soft: #FDEBE2; --shadow: #0F172A1F; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button, input { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .icon { display: inline-block; width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } .page { width: 100%; overflow-x: hidden; } .container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--pad-screen); } /* ============================================================ Компоненты ============================================================ */ /* Кнопка скачивания — макет 234×52, иконка 20, лейбл 16/700 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-sm); height: 52px; padding: 0 22px; border-radius: var(--radius-btn); font-size: 16px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-hover); } .btn--ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); } .btn--block { display: flex; width: 100%; } .btn .icon { width: 20px; height: 20px; } /* Chip — 149×34, pill, surface-2, лейбл 13/500 muted */ .chip { display: inline-flex; align-items: center; gap: var(--gap-xs); height: 34px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; } .chip--active { background: var(--accent); color: var(--on-accent); } /* Badge — 39×22, r6, accent-soft, 10/700 accent */ .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .badge--new { background: var(--success-soft); color: var(--success); } /* Version Badge — 82×26, pill, warn-soft, точка 6px + v0.28.2 (12/600) */ .vbadge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; } .vbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Rating — звёзды 78×14, значение 13/600, счётчик 12 muted */ .rating { display: inline-flex; align-items: center; gap: var(--gap-xs); } .rating__stars { display: inline-flex; gap: 2px; color: var(--warn); } .rating__stars .icon { fill: currentColor; } /* залитая звезда */ .rating__stars .icon--empty { fill: none; opacity: .45; } /* недобранная */ .rating__stars .icon { width: 14px; height: 14px; } .rating__value { font-size: 13px; font-weight: 600; } .rating__count { color: var(--text-muted); font-size: 12px; } /* ============================================================ Шапка. Макет: mobile 390Г—52 (бургер, лого, РїРѕРёСЃРє, тема) + лента навигации 390Г—38 отдельной полосой; desktop 1440Г—66 — та же навигация внутри шапки. РћРґРЅР° разметка: header — grid, РЅР° мобиле nav уезжает РІРѕ вторую строку. ============================================================ */ .site-header { display: grid; grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "burger logo search theme user" "nav nav nav nav nav"; align-items: center; column-gap: var(--gap-md); background: var(--bg); border-bottom: 1px solid var(--border); } .site-header__bar { display: contents; } .site-header__burger { grid-area: burger; margin-left: var(--pad-screen); color: var(--text); } .site-header__burger .icon { width: 24px; height: 24px; } .logo { grid-area: logo; display: flex; align-items: center; gap: 8px; height: 52px; } .logo__mark { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; background: var(--accent); border-radius: 7px; color: var(--on-accent); } .logo__mark .icon { width: 17px; height: 17px; } .logo__word { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .01em; } .site-header__search { grid-area: search; display: flex; align-items: center; color: var(--text); } .site-header__search .icon { width: 22px; height: 22px; } .site-header__search input { display: none; } .theme-toggle { grid-area: theme; display: flex; align-items: center; color: var(--text); } .theme-toggle .icon { width: 22px; height: 22px; } /* Лента навигации: mobile — СЃРІРѕСЏ полоса 38px СЃРѕ скроллом */ .main-nav { grid-area: nav; display: flex; align-items: center; gap: 18px; height: 38px; padding-inline: var(--pad-screen); background: var(--surface-2); overflow-x: auto; scrollbar-width: none; } .main-nav::-webkit-scrollbar { display: none; } .main-nav a { color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; } .main-nav a.is-active { color: var(--accent); font-weight: 700; } /* ============================================================ Герой. Макет mobile 390Г—430 / desktop 1440Г—520: фон-арт + затемнение (СЃРЅРёР·Сѓ РЅР° мобиле, слева РЅР° десктопе). ============================================================ */ .hero { position: relative; background: var(--surface-2); overflow: hidden; } .hero__art { position: absolute; inset: 0; z-index: 0; display: block; } .hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } .hero::after { /* Overlay РёР· макета */ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, #0E1116F7 0%, #0E1116E0 45%, #0E111655 100%); } .hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding-block: 150px 15px; } /* макет: Content y=150, низ 430−150−265 */ .hero__tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 27px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; } .hero__tag .icon { width: 13px; height: 13px; } .hero__h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1.08; } .hero__sub { color: var(--text-muted); font-size: 14px; line-height: 1.55; } .hero__buttons { display: flex; gap: var(--gap-sm); } .hero__buttons .btn { flex: 196 1 0; } /* макет: Primary 196 */ .hero__buttons .btn--ghost { flex: 152 1 0; } /* макет: Secondary 152 */ .hero__stats { display: none; } /* РІ мобильном макете статистики нет */ .hero__stat { display: flex; flex-direction: column; gap: 2px; } .hero__stat b { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .hero__stat span { color: var(--text-muted); font-size: 12px; } /* ============================================================ Подвал. mobile 390Г—351 / desktop 1440Г—265 ============================================================ */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); } .site-footer__inner { display: flex; flex-direction: column; gap: 20px; padding-block: 28px; } .site-footer__cols { display: flex; flex-direction: column; gap: 20px; } .site-footer__bottom { padding-top: 16px; } .site-footer__brand { display: flex; flex-direction: column; gap: 8px; } .site-footer__brand-row { display: flex; align-items: center; gap: 8px; } .site-footer__mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; background: var(--accent); border-radius: 7px; color: var(--on-accent); } .site-footer__mark .icon { width: 16px; height: 16px; } .site-footer__word { font-family: var(--font-display); font-size: 15px; font-weight: 800; } .site-footer__tagline { color: var(--text-muted); font-size: 12px; line-height: 1.5; } .fcols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .fcols .fcol--wide { display: none; } /* «Подборки» — только на desktop, как в макете */ .fcol { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .fcol__h { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .5px; line-height: 1.25; } .fcol a { color: var(--text-muted); font-size: 13px; line-height: 1.25; } .site-footer__bottom { display: flex; flex-direction: column; gap: 6px; } .site-footer__copy, .site-footer__disc { color: var(--text-muted); font-size: 11px; line-height: 1.5; } /* ============================================================ Desktop 1024+ (макет 1440) ============================================================ */ @media (min-width: 1024px) { /* Шапка: РѕРґРЅР° строка, контент 1200 РїРѕ центру */ .site-header { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "logo nav search theme user"; column-gap: 36px; height: 66px; max-width: none; padding-inline: max(24px, calc((100% - var(--content)) / 2)); } .site-header__burger { display: none; } .logo { height: auto; gap: 9px; } .logo__mark { width: 32px; height: 32px; border-radius: 8px; } .logo__mark .icon { width: 19px; height: 19px; } .main-nav { height: auto; padding: 0; background: none; overflow: visible; gap: 26px; justify-self: start; } .main-nav a { font-size: 14px; } .main-nav a.is-active { color: var(--text); } /* РџРѕРёСЃРє превращается РІ поле 300Г—36 */ .site-header__search { width: 300px; height: 36px; gap: 9px; padding: 0 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text-muted); } .site-header__search .icon { width: 16px; height: 16px; } .site-header__search input { display: block; width: 100%; height: 100%; background: none; border: none; outline: none; color: var(--text); font-size: 13px; } .site-header__search input::placeholder { color: var(--text-muted); } .theme-toggle { width: 38px; height: 38px; justify-content: center; margin-right: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); } .theme-toggle .icon { width: 18px; height: 18px; } /* Герой: затемнение слева, контент 660, статистика */ .hero::after { background: linear-gradient(to right, #0E1116F7 0%, #0E1116E0 45%, #0E111655 100%); } .hero::before { /* Bottom Fade РёР· макета */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; background: linear-gradient(to top, var(--bg), transparent); } /* Арт вертикальный (768x1376): при cover кадр зависит от ширины экрана. Держим пропорцию макета 1440x520 (36.11%) — тогда на любом экране в кадр попадает тот же фрагмент, что и в макете, и фигуры не режутся. */ .hero { min-height: clamp(520px, 36.11vw, 760px); display: flex; align-items: center; } .hero__art img { object-position: center 46%; } /* по эталону: окно с 37%% высоты арта */ .hero__inner { gap: 18px; padding-block: 66px 65px; width: 100%; } .hero__inner > * { max-width: 660px; } .hero__tag { height: 30px; padding: 0 13px; font-size: 12px; } .hero__tag .icon { width: 14px; height: 14px; } .hero__h1 { font-size: 56px; line-height: 1.05; } .hero__sub { max-width: 560px; font-size: 17px; } .hero__buttons { gap: 12px; } .hero__buttons .btn { flex: 0 0 auto; height: 56px; } .hero__stats { display: flex; gap: 28px; } /* Подвал: 4 колонки + нижняя строка РІ СЂСЏРґ */ .site-footer__inner { padding-block: 44px 24px; gap: 28px; } .site-footer__cols { display: grid; grid-template-columns: 340px repeat(3, 227px); gap: 33px; } .site-footer__brand { gap: 10px; } .site-footer__word { font-size: 17px; } .site-footer__tagline { font-size: 13px; } .fcols { display: contents; } .fcols .fcol--wide { display: flex; } .site-footer__bottom { flex-direction: row; justify-content: space-between; gap: 24px; } .site-footer__copy, .site-footer__disc { font-size: 12px; } } /* ============================================================ Секции главной ============================================================ */ .section { padding-block: 24px; } .section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .section__titles { display: flex; flex-direction: column; gap: 3px; } .h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.3px; } .section__sub { color: var(--text-muted); font-size: 12px; } .section__period { color: var(--text-muted); font-size: 12px; } .link-all { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 12px; font-weight: 600; white-space: nowrap; } .link-all .icon { width: 14px; height: 14px; } /* ---------- Плитка сборки (Build Tile 224×286) ---------- */ .tile { display: flex; flex-direction: column; width: 224px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .tile__art { position: relative; height: 116px; } .tile__art img { width: 100%; height: 100%; object-fit: cover; } .tile__art .badge { position: absolute; top: 10px; left: 10px; } .tile__body { display: flex; flex-direction: column; gap: 7px; padding: 12px; } .tile__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; } .tile__meta { display: flex; align-items: center; gap: 8px; } .tile__size { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .tile .btn { height: 40px; font-size: 14px; } .tile .btn .icon { width: 16px; height: 16px; } /* Лента: mobile — горизонтальный скролл от края экрана */ .strip { display: flex; gap: 10px; overflow-x: auto; padding-inline: var(--pad-screen); scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } /* ---------- Строка сборки (Build Row 358×112) ---------- */ .brow { display: flex; align-items: center; gap: 12px; height: 112px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .brow__icon { width: 68px; height: 68px; flex-shrink: 0; border-radius: 12px; overflow: hidden; } .brow__icon img { width: 100%; height: 100%; object-fit: cover; } .brow__info { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; } .brow__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; } .brow__meta { display: flex; align-items: center; gap: 8px; } .brow__size { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .brow__dl { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; background: var(--accent); border-radius: 12px; color: var(--on-accent); } .brow__dl .icon { width: 22px; height: 22px; } /* Топ: номер + строка */ .ranks { display: flex; flex-direction: column; gap: 12px; } .ranks .rank:nth-child(n+4) { display: none; } /* макет mobile: топ-3 */ .rank { display: flex; align-items: center; gap: 8px; } .rank__num { width: 22px; flex-shrink: 0; text-align: center; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--text-muted); } .rank .brow { flex: 1; min-width: 0; } /* ---------- Плитки фич (173×128 / 285×150) ---------- */ .ftiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .ftile { display: flex; flex-direction: column; justify-content: space-between; gap: 9px; min-height: 128px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .ftile__ib { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--surface-2); border-radius: 9px; } .ftile__ib .icon { width: 18px; height: 18px; } .ftile__text { display: flex; flex-direction: column; gap: 4px; } .ftile__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.3; } .ftile__count { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; } .i-warn { color: var(--warn); } .i-accent { color: var(--accent); } .i-link { color: var(--link); } .i-success { color: var(--success); } /* ---------- Доверие: mobile строка, desktop карточка ---------- */ .trust { display: flex; flex-direction: column; gap: 14px; } .tcard { display: flex; gap: 12px; min-height: 58px; } .tcard__ib { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--surface-2); border-radius: 11px; } .tcard__ib .icon { width: 19px; height: 19px; } .tcard__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tcard__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .tcard__desc { color: var(--text-muted); font-size: 12px; line-height: 1.45; } /* ---------- Блог: mobile строка, desktop карточка с обложкой ---------- */ .posts { display: flex; flex-direction: column; gap: 12px; } .post { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .post__cover { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; background: var(--surface-2); border-radius: 10px; color: var(--text-muted); } .post__cover .icon { width: 22px; height: 22px; } .post__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .post__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post__meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; } /* Карточка статьи в списке раздела: та же строка, но с анонсом. В ленте на главной анонса нет — там .post идёт без .post--row. */ .post--row { align-items: flex-start; } .post--row .post__body { flex: 1; } .post--row .post__title { font-size: 15px; -webkit-line-clamp: 2; } .post__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); font-size: 13px; line-height: 1.5; } /* ============================================================ Desktop 1024+ : сетки макета 1440 (контент 1200, шаг 20) ============================================================ */ @media (min-width: 1024px) { .section { padding-block: 48px 0; } .section:last-of-type { padding-bottom: 48px; } .section__head { margin-bottom: 20px; } .h2 { font-size: 28px; } .section__sub, .section__period, .link-all { font-size: 14px; } .link-all .icon { width: 16px; height: 16px; } /* Свежие сборки: 4 плитки 285×324 */ .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; overflow: visible; padding-inline: 0; } .tile { width: auto; } .tile__art { height: 150px; } .tile__body { padding: 16px; gap: 10px; } .tile__name { font-size: 16px; min-height: 40px; } .tile .btn { height: 44px; } /* Топ: 6 строк в 2 колонки */ .ranks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ranks .rank:nth-child(n+4) { display: flex; } .rank { gap: 12px; } .rank__num { width: 24px; font-size: 18px; } /* Плитки фич: 4 в ряд, высота 150 */ .ftiles { grid-template-columns: repeat(4, 1fr); gap: 20px; } .ftile { min-height: 150px; padding: 18px; } .ftile__ib { width: 38px; height: 38px; border-radius: 10px; } .ftile__ib .icon { width: 20px; height: 20px; } .ftile__title { font-size: 16px; } .ftile__count { font-size: 12px; } /* Доверие: 4 карточки-колонки 285×172 на фоне bg */ .trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tcard { flex-direction: column; gap: 12px; min-height: 172px; padding: 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); } .tcard__ib { width: 42px; height: 42px; border-radius: 11px; } .tcard__ib .icon { width: 21px; height: 21px; } .tcard__title { font-size: 16px; } .tcard__desc { font-size: 13px; } /* Блог: 3 карточки с обложкой 387×251 */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .post { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .post__cover { width: 100%; height: 150px; border-radius: 0; color: var(--border); } .post__cover .icon { width: 26px; height: 26px; } .post__body { gap: 10px; padding: 16px; } .post__title { font-size: 16px; min-height: 44px; } .post__meta { font-size: 12px; } /* В ленте раздела карточка статьи остаётся строкой. Плиточный вид выше — для блока блога на главной, где у карточки есть обложка; у статьи её нет, и на всю ширину раздела получался пустой блок в 150px. */ .post--row { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px; } .post--row .post__cover { width: 72px; height: 72px; border-radius: 12px; } .post--row .post__body { gap: 8px; padding: 0; } .post--row .post__title { min-height: 0; font-size: 17px; } } /* ============================================================ Каталог ============================================================ */ .crumbs { display: flex; align-items: center; gap: 6px; padding-block: 8px; color: var(--text-muted); font-size: 12px; } .crumbs a { color: var(--text-muted); } .crumbs__sep { color: var(--border); } .page-title { padding-block: 8px 16px; } .page-title h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.2; } .page-title__sub { margin-top: 6px; color: var(--text-muted); font-size: 13px; line-height: 1.5; } /* Лента чипов — на мобиле уходит за край экрана со скроллом */ .chips { display: flex; gap: 8px; padding-block: 8px; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } /* Панель управления: кнопка фильтра + сортировка */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; } .toolbar__found { display: none; } .tbtn { display: inline-flex; align-items: center; gap: 8px; height: 37px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text); font-size: 13px; font-weight: 600; } .tbtn .icon { width: 16px; height: 16px; } .tbtn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; } .sort-tabs { display: flex; gap: 4px; } .sort-tabs__btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-btn); color: var(--text); font-size: 13px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); } .sort-tabs__btn .icon { width: 15px; height: 15px; } .sort-tabs__btn:not(.is-active) { display: none; } /* на мобиле — одна кнопка «Свежие» */ /* ---------- Раскладка: фильтры + результаты ---------- */ .catalog { display: block; } .results { display: flex; flex-direction: column; gap: 10px; } /* Универсальная карточка сборки: mobile — строка, desktop — плитка */ .build { display: flex; align-items: center; gap: 12px; height: 112px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .build__art { position: relative; width: 68px; height: 68px; flex-shrink: 0; border-radius: 12px; overflow: hidden; } .build__art img { width: 100%; height: 100%; object-fit: cover; } .build__art .badge { display: none; } .build__info { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; } .build__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; } .build__meta { display: flex; align-items: center; gap: 8px; } .build__size { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .build__dl { display: flex; align-items: center; justify-content: center; gap: 10px; width: 52px; height: 52px; flex-shrink: 0; background: var(--accent); border-radius: 12px; color: var(--on-accent); font-size: 14px; font-weight: 700; } .build__dl .icon { width: 22px; height: 22px; } .build__dl span { display: none; } /* в строке — только иконка */ /* ---------- Фильтры (desktop — сайдбар, mobile — bottom sheet) ---------- */ .filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 18px; max-height: 75vh; padding: 10px 16px 16px; /* макет: шит 537 из 720 */ background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px var(--shadow); transform: translateY(101%); transition: transform .22s ease; overflow-y: auto; } .filters.is-open { transform: none; } .filters__grabber { width: 38px; height: 4px; margin: 0 auto; border-radius: 999px; background: var(--border); } .filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .filters__title { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .filters__reset { color: var(--link); font-size: 13px; font-weight: 600; } .fgroup { display: flex; flex-direction: column; gap: 10px; } .fgroup__h { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .5px; } .fopt { display: flex; align-items: center; gap: 9px; min-height: 22px; cursor: pointer; } .fopt input { position: absolute; opacity: 0; pointer-events: none; } .fopt__box { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 5px; color: transparent; } .fopt__box .icon { width: 11px; height: 11px; } .fopt input:checked + .fopt__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .fopt__label { flex: 1; min-width: 0; font-size: 13px; } .fopt input:checked ~ .fopt__label { font-weight: 600; } .fopt__count { color: var(--border); font-family: var(--font-mono); font-size: 11px; } .filters__apply { height: 50px; font-size: 15px; } .filters__backdrop { position: fixed; inset: 0; z-index: 39; background: #0009; opacity: 0; visibility: hidden; transition: opacity .22s ease; } .filters__backdrop.is-open { opacity: 1; visibility: visible; } /* ---------- Пагинация ---------- */ .pager { display: flex; justify-content: center; gap: 6px; padding-block: 12px; } .pager a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 600; } .pager a.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pager .icon { width: 16px; height: 16px; } /* ---------- SEO-текст и FAQ ---------- */ .seo { display: flex; flex-direction: column; gap: 12px; padding-block: 20px; } .seo h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; } .seo p { color: var(--text-muted); font-size: 13px; line-height: 1.62; } .faq { display: flex; flex-direction: column; gap: 10px; padding-block: 20px; } .faq h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin-bottom: 2px; } .faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px; text-align: left; font-size: 13px; font-weight: 600; line-height: 1.35; } .faq__q .icon { width: 17px; height: 17px; color: var(--text-muted); transition: transform .18s ease; } .faq__item[open] .faq__q .icon { transform: rotate(180deg); } .faq__a { padding: 0 14px 14px; color: var(--text-muted); font-size: 13px; line-height: 1.62; } .faq__item summary::-webkit-details-marker { display: none; } /* ============================================================ Desktop 1024+ ============================================================ */ @media (min-width: 1024px) { .crumbs { padding-block: 12px; font-size: 13px; } .page-title { padding-block: 12px 20px; } .page-title h1 { font-size: 34px; } .page-title__sub { font-size: 14px; } .chips { padding-block: 10px 14px; gap: 10px; overflow: visible; flex-wrap: wrap; } /* Сайдбар + сетка: макет 260 | 32 | 908 */ .catalog { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; padding-block: 12px 32px; } /* Фильтры возвращаются в поток как сайдбар */ .filters { position: sticky; top: 20px; transform: none; max-height: none; overflow: visible; gap: 22px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: none; } .filters__grabber, .filters__apply { display: none; } .filters__title { font-size: 17px; } .filters__reset { font-size: 12px; } .fgroup__h { font-size: 11px; } .filters__backdrop { display: none; } /* Панель: найдено + вкладки сортировки */ .toolbar { padding-block: 0 20px; align-items: flex-start; } .toolbar__filter { display: none; } .toolbar__found { display: flex; align-items: baseline; gap: 7px; } .toolbar__found b { font-family: var(--font-display); font-size: 16px; font-weight: 800; } .toolbar__found span { color: var(--text-muted); font-size: 13px; } .sort-tabs__btn:not(.is-active) { display: inline-flex; background: none; border-color: transparent; color: var(--text-muted); } .sort-tabs__btn.is-active { background: var(--surface-2); } /* Результаты — плитки 3 в ряд (макет 289×324, шаг 20) */ .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Разделы со статьями: лента не плиточная, карточка статьи остаётся строкой, а без фильтра колонка сайдбара не резервируется. */ .results:has(.post) { display: flex; flex-direction: column; gap: 12px; } .catalog:not(:has(.filters)) { grid-template-columns: 1fr; } .build { flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 0; } .build__art { width: 100%; height: 150px; border-radius: 0; } .build__art .badge { display: inline-flex; position: absolute; top: 10px; left: 10px; } .build__info { gap: 10px; padding: 16px; } .build__name { font-size: 16px; min-height: 40px; } .build__dl { width: auto; height: 44px; margin: 0 16px 16px; border-radius: var(--radius-btn); } .build__dl span { display: inline; } /* Результаты поиска движок отдаёт прямо в контейнер страницы, без сетки .results — там карточка должна остаться строкой, иначе плиточные правила растягивают иконку сборки во всю ширину экрана. */ .page-content > .build { flex-direction: row; align-items: center; height: 112px; gap: 12px; padding: 12px; } .page-content > .build .build__art { width: 68px; height: 68px; border-radius: 12px; } .page-content > .build .build__art .badge { display: none; } .page-content > .build .build__info { gap: 7px; padding: 0; } .page-content > .build .build__name { min-height: 0; font-size: 15px; } .page-content > .build .build__dl { width: 52px; height: 52px; margin: 0; border-radius: 12px; } .page-content > .build .build__dl span { display: none; } .pager { justify-content: center; gap: 7px; padding-block: 24px 0; } .pager a { width: 40px; height: 40px; } /* SEO + FAQ в две колонки: макет 648 | 32 | 520 */ .seofaq { display: grid; grid-template-columns: 648px 520px; gap: 32px; justify-content: space-between; padding-block: 40px 33px; } .seo, .faq { padding-block: 0; gap: 16px; } .seo h2, .faq h2 { font-size: 24px; } .seo p { font-size: 14px; } .faq__q { padding: 16px; font-size: 14px; } .faq__a { padding: 0 16px 16px; font-size: 14px; } } /* ============================================================ Карточка приватки На мобиле — один поток (порядок задаёт order), на desktop — контент 788 + липкий сайдбар 380. Разметка одна. ============================================================ */ .card { display: flex; flex-direction: column; } .card__main, .card__side { display: contents; } .card > * , .card__main > *, .card__side > * { min-width: 0; } /* порядок блоков в мобильном макете */ .card__title { order: 1; } .card__metrics { order: 2; } .card__cta { order: 3; } .card__spec { order: 4; } .card__gallery { order: 5; } .card__video { order: 6; } .card__desc { order: 7; } .card__feats { order: 8; } .card__rating { order: 9; } .card__comments{ order: 10; } .card__similar { order: 11; } .card { gap: 20px; } /* в макете между блоками карточки 20px */ .card section, .card aside { padding-block: 0; } .card__cta-top { display: none; } /* версия и размер уже показаны в метриках */ @media (min-width: 1024px) { .card__cta-top { display: flex; } /* в сайдбаре — нужны */ } .sec-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.4; } /* ---------- Шапка карточки ---------- */ .card__title { display: flex; gap: 14px; padding-block: 8px 16px; } .gicon { width: 72px; height: 72px; flex-shrink: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); } .gicon img { width: 100%; height: 100%; object-fit: cover; } .card__title-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .card__badges { display: flex; gap: 6px; } .card__h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.2; } .card__updated { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; } .card__updated .icon { width: 13px; height: 13px; } /* ---------- Метрики ---------- */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 4px; } .metric + .metric { border-left: 1px solid var(--border); } .metric__k { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .5px; } .metric__v { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .metric--android { display: none; } /* в мобильном макете этой метрики нет */ /* ---------- Кнопка скачивания ---------- */ .card__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 16px; } .card__cta .btn { width: 100%; height: 61px; font-size: 17px; } .card__source { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; } .card__source .icon { width: 14px; height: 14px; color: var(--success); } .card__howto { color: var(--link); font-size: 13px; font-weight: 600; } /* ---------- Таблица характеристик ---------- */ .spec { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .spec__head { display: none; } .spec__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 14px; } .spec__row + .spec__row { border-top: 1px solid var(--border); } .spec__k { color: var(--text-muted); font-size: 13px; } .spec__v { font-size: 13px; font-weight: 600; text-align: right; } /* ---------- Галерея ---------- */ .gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .gallery__counter { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .gallery__strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; } .gallery__strip::-webkit-scrollbar { display: none; } .shot { width: 236px; height: 132px; flex-shrink: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } .shot img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Видео ---------- */ .player { position: relative; height: 201px; margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .player img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .player__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); } .player__play .icon { width: 24px; height: 24px; } .player__caption { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; background: #0009; border-radius: 999px; color: #fff; font-size: 11px; } .player__caption .icon { width: 14px; height: 14px; } /* ---------- Описание ---------- */ .card__desc { display: flex; flex-direction: column; gap: 12px; } .card__desc p { color: var(--text-muted); font-size: 14px; line-height: 1.62; } /* ---------- Особенности ---------- */ .feats { margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .feat { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; } .feat + .feat { border-top: 1px solid var(--border); } .feat__check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; background: var(--success-soft); border-radius: 6px; color: var(--success); } .feat__check .icon { width: 13px; height: 13px; } .feat span { font-size: 13px; } /* ---------- Рейтинг ---------- */ .ratebox { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .ratebox__summary { display: flex; gap: 16px; } .ratebox__avg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 70px; flex-shrink: 0; } .ratebox__num { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; } .ratebox__cnt { color: var(--text-muted); font-size: 11px; white-space: nowrap; } .hist { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .hist__row { display: flex; align-items: center; gap: 8px; } .hist__star { width: 20px; color: var(--text-muted); font-size: 11px; } .hist__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .hist__fill { height: 100%; border-radius: 999px; background: var(--warn); } .hist__pct { width: 34px; text-align: right; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; } .ratebox__your { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); } .ratebox__prompt { font-size: 13px; font-weight: 600; } .stars-input { display: flex; gap: 6px; color: var(--border); } .stars-input .icon { width: 32px; height: 32px; cursor: pointer; } .stars-input .icon:hover { color: var(--warn); } .ratebox__hint { color: var(--text-muted); font-size: 11px; text-align: center; } /* ---------- Комментарии ---------- */ .comments__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .comments__count { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .tabs { display: flex; gap: 4px; margin-top: 12px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-btn); } .tabs button { flex: 1; height: 32px; border-radius: 9px; color: var(--text-muted); font-size: 13px; font-weight: 600; } .tabs button.is-active { background: var(--surface); color: var(--text); } .cform { margin-top: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .cform textarea { width: 100%; min-height: 32px; border: none; background: none; resize: vertical; color: var(--text); font-size: 13px; line-height: 1.5; } .cform textarea::placeholder { color: var(--text-muted); } .cform__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; } .cform__tools { display: flex; gap: 10px; color: var(--text-muted); } .cform__tools .icon { width: 17px; height: 17px; } .cform__send { height: 32px; padding: 0 16px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; } .comment { display: flex; gap: 10px; margin-top: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .comment__avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; background: var(--surface-2); border-radius: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 700; } .comment__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .comment__meta { display: flex; align-items: center; gap: 8px; } .comment__name { font-size: 13px; font-weight: 600; } .comment__date { color: var(--text-muted); font-size: 12px; } .comment__text { color: var(--text-muted); font-size: 13px; line-height: 1.55; } .comment__actions { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 12px; } .comment__actions .icon { width: 13px; height: 13px; } .comment__like { display: inline-flex; align-items: center; gap: 5px; } /* ---------- Похожие ---------- */ .similar__list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .more-link { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text); font-size: 13px; font-weight: 600; } .more-link .icon { width: 15px; height: 15px; } /* ============================================================ Desktop 1024+ : контент 788 + сайдбар 380 (макет, шаг 32) ============================================================ */ @media (min-width: 1024px) { .card { display: grid; grid-template-columns: minmax(0, 788fr) 380fr; gap: 32px; align-items: start; padding-block: 10px 40px; } .card__main { display: flex; flex-direction: column; gap: 28px; } .card__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; } .card__main > *, .card__side > * { order: 0; } /* порядок задаёт разметка */ .sec-title { font-size: 22px; } .card__title { gap: 20px; padding: 0; } .gicon { width: 96px; height: 96px; border-radius: 20px; } .card__h1 { font-size: 30px; } .metrics { grid-template-columns: repeat(5, 1fr); } .metric { padding: 14px 6px; gap: 6px; } .metric--android { display: flex; } .metric__k { font-size: 10px; } .metric__v { font-size: 16px; } /* Панель загрузки — карточка в сайдбаре */ .card__cta { align-items: stretch; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .card__cta-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card__cta .btn { height: 59px; } .card__source, .card__howto { justify-content: center; text-align: center; } .spec__head { display: flex; align-items: center; min-height: 40px; padding: 0 16px; background: var(--surface-2); font-family: var(--font-display); font-size: 13px; font-weight: 700; } .spec__row { min-height: 44px; padding: 0 16px; } .gallery__strip { gap: 12px; } .shot { width: 252px; height: 142px; } .player { height: 440px; margin-top: 14px; } .player__play { width: 72px; height: 72px; } .player__play .icon { width: 30px; height: 30px; } .card__desc p { font-size: 15px; } .feats { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); } .feat { border-top: none; } .feat + .feat { border-top: none; } .feat:nth-child(n+3) { border-top: 1px solid var(--border); } .feat:nth-child(even) { border-left: 1px solid var(--border); } .ratebox { flex-direction: row; align-items: center; gap: 32px; padding: 18px; } .ratebox__summary { flex: 1; } .ratebox__your { flex-direction: row; gap: 16px; padding: 0 0 0 32px; border-top: none; border-left: 1px solid var(--border); } .ratebox__hint { display: none; } .tabs { width: 340px; } .similar__list { gap: 12px; } /* В сайдбаре «Похожие» остаются строками 380x112, как в макете, а не превращаются в плитки каталога */ .similar__list .build { flex-direction: row; align-items: center; height: 112px; gap: 12px; padding: 12px; } .similar__list .build__art { width: 68px; height: 68px; border-radius: 12px; } .similar__list .build__art .badge { display: none; } .similar__list .build__info { gap: 7px; padding: 0; } .similar__list .build__name { font-size: 15px; min-height: 0; } .similar__list .build__dl { width: 52px; height: 52px; margin: 0; border-radius: 12px; } .similar__list .build__dl span { display: none; } /* Панель загрузки и шапка карточки — высоты макета */ .card__cta { gap: 16px; padding: 20px; } .card__title { min-height: 133px; align-items: center; } .card__desc { gap: 14px; } } /* ============================================================ Архив версий и страница версии Раскладка как в карточке: на мобиле один поток, на desktop контент + сайдбар. Разметка одна. ============================================================ */ .vlayout { display: flex; flex-direction: column; gap: 20px; padding-block: 4px 24px; } .vlayout__main, .vlayout__side { display: contents; } /* Таблица версий: mobile 4 колонки, desktop 5 (+Android) */ .vtable { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .vrow { display: grid; grid-template-columns: 114px 84px 68px 44px; align-items: center; gap: 8px; min-height: 60px; padding: 0 12px; } .vrow + .vrow { border-top: 1px solid var(--border); } .vrow--head { min-height: 30px; background: var(--surface-2); } .vrow--head span { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .5px; } .vrow__ver { display: flex; flex-direction: column; gap: 3px; } .vrow__ver b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .vrow__date, .vrow__size, .vrow__android { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .vrow__android { display: none; } .vrow__dl { display: flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 36px; margin-left: auto; background: var(--accent); border-radius: 10px; color: var(--on-accent); font-size: 13px; font-weight: 600; } .vrow__dl .icon { width: 17px; height: 17px; } .vrow__dl span { display: none; } /* Заметка-предупреждение */ .note { display: flex; gap: 10px; padding: 12px; background: var(--warn-soft); border: 1px solid var(--border); border-radius: var(--radius-card); } .note .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--warn); margin-top: 1px; } .note__title { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; } .note p { color: var(--text-muted); font-size: 12px; line-height: 1.55; } /* Панель текущей сборки / загрузки */ .dlbox { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .dlbox__top { display: flex; align-items: center; gap: 12px; } .dlbox__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dlbox__name b { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .dlbox__name a { color: var(--link); font-size: 12px; } .dlbox .btn { height: 52px; } .dlbox__source { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); font-size: 12px; text-align: center; } .dlbox__source .icon { width: 14px; height: 14px; color: var(--success); } .dlbox__how { color: var(--link); font-size: 13px; font-weight: 600; text-align: center; } /* Блок помощи */ .helpbox { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .helpbox__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .helpbox a { display: flex; align-items: center; gap: 8px; color: var(--link); font-size: 13px; } .helpbox .icon { width: 15px; height: 15px; } /* Список изменений */ .changes { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .change { display: flex; gap: 10px; padding: 14px; } .change + .change { border-top: 1px solid var(--border); } .change .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--success); } .change span { font-size: 13px; line-height: 1.45; } /* Факты версии */ .facts { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .facts__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 39px; padding: 0 12px; } .facts__row + .facts__row { border-top: 1px solid var(--border); } .facts__k { color: var(--text-muted); font-size: 13px; } .facts__v { font-size: 13px; font-weight: 600; } .link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-size: 13px; font-weight: 600; } .link-more .icon { width: 15px; height: 15px; } @media (min-width: 1024px) { .vlayout { display: grid; grid-template-columns: minmax(0, 828fr) 340fr; gap: 32px; align-items: start; padding-block: 10px 40px; } .vlayout__main { display: flex; flex-direction: column; gap: 28px; } .vlayout__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; } /* Таблица: пять колонок и кнопка с подписью (макет 828) */ .vrow { grid-template-columns: 244px 150px 110px 90px 130px; gap: 16px; min-height: 64px; padding: 0 20px; } .vrow--head { min-height: 44px; } .vrow--head span { font-size: 11px; } .vrow__ver { flex-direction: row; align-items: center; gap: 10px; } .vrow__ver b { font-size: 15px; } .vrow__date, .vrow__size, .vrow__android { font-size: 13px; } .vrow__android { display: block; } .vrow__dl { width: 130px; height: 34px; border-radius: var(--radius-btn); } .vrow__dl span { display: inline; } .note { padding: 16px; } .note p { font-size: 13px; } .facts__row { min-height: 44px; padding: 0 16px; } .change { padding: 16px; } .change span { font-size: 14px; } } /* Блоки, которые в мобильном макете отсутствуют и живут только в desktop-сайдбаре */ .only-desktop { display: none; } @media (min-width: 1024px) { .only-desktop { display: flex; } } /* Страница версии: порядок блоков мобильного макета (характеристики -> кнопка -> что нового -> другие версии -> сборка) */ .v-facts { order: 1; } .v-cta { order: 2; } .v-new { order: 3; } .v-other { order: 4; } .v-build { order: 5; } @media (min-width: 1024px) { .v-facts, .v-cta, .v-new, .v-other, .v-build { order: 0; } } /* Страница версии, мобильный макет: CTA — просто стек (карточкой он становится только в desktop-сайдбаре), таблица «другие версии» — компактная */ .v-cta { background: none; border: none; padding: 0; gap: 10px; } .vtable--compact .vrow { min-height: 38px; } .vtable--compact .vrow--head { min-height: 31px; } .change { padding: 11px 14px; } @media (min-width: 1024px) { .v-cta { background: var(--surface); border: 1px solid var(--border); padding: 18px; gap: 14px; } .vtable--compact .vrow { min-height: 44px; } .vtable--compact .vrow--head { min-height: 40px; } .change { padding: 16px; } } /* ============================================================ Как установить ============================================================ */ .steps { display: flex; flex-direction: column; gap: 12px; padding-block: 4px 20px; } .step { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .step__head { display: flex; align-items: center; gap: 12px; } .step__num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--accent); border-radius: 10px; color: var(--on-accent); font-family: var(--font-display); font-size: 15px; font-weight: 800; } .step__title { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; } .step__head > .icon { width: 20px; height: 20px; color: var(--text-muted); } .step__desc { color: var(--text-muted); font-size: 13px; line-height: 1.6; } .step__screen { display: flex; align-items: center; justify-content: center; height: 120px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; color: var(--border); } .step__screen .icon { width: 26px; height: 26px; } .ctabox { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; margin-block: 20px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .ctabox h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; } .ctabox p { color: var(--text-muted); font-size: 13px; } .ctabox .btn { width: 100%; height: 50px; } /* ============================================================ Статья блога ============================================================ */ .post-meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--text-muted); font-size: 12px; } .post-meta span { display: inline-flex; align-items: center; gap: 5px; } .post-meta .icon { width: 13px; height: 13px; } .post-cover { height: 180px; margin-block: 4px 16px; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); } .post-cover img { width: 100%; height: 100%; object-fit: cover; } .toc { display: flex; flex-direction: column; gap: 9px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .toc__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 700; } .toc__h .icon { width: 16px; height: 16px; color: var(--accent); } .toc a { display: flex; gap: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.45; } .toc a b { color: var(--text-muted); font-family: var(--font-mono); font-weight: 400; } .article { display: flex; flex-direction: column; gap: 14px; padding-block: 20px; } .article h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin-top: 6px; } .article p { color: var(--text-muted); font-size: 14px; line-height: 1.72; } .article__shot { display: flex; align-items: center; justify-content: center; height: 150px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; color: var(--border); } .article__shot .icon { width: 26px; height: 26px; } .quote { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-card) var(--radius-card) 0; color: var(--text); font-size: 14px; line-height: 1.6; } .inline-cta { display: flex; align-items: center; gap: 12px; padding: 14px; margin-block: 4px 20px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-card); } .inline-cta__ib { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--surface); border-radius: 12px; color: var(--accent); } .inline-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .inline-cta__text b { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .inline-cta__text span { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .inline-cta .btn { height: 38px; padding: 0 16px; font-size: 13px; } .related-posts { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .rpost { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .rpost__thumb { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; background: var(--surface-2); border-radius: 10px; color: var(--text-muted); } .rpost__thumb .icon { width: 20px; height: 20px; } .rpost__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rpost__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.35; } .rpost__meta { color: var(--text-muted); font-size: 11px; } /* ============================================================ 404 и пустой результат ============================================================ */ .err { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 36px 24px; text-align: center; } .err__circle { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .err__circle .icon { width: 40px; height: 40px; } .err__code { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 1; } .err h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.25; } .err p { color: var(--text-muted); font-size: 14px; line-height: 1.6; } .err__buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; } .err__buttons .btn { width: 100%; } .err__buttons .btn--ghost { height: 48px; font-size: 14px; } .err__search { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text-muted); font-size: 14px; } .err__search .icon { width: 17px; height: 17px; } .empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 16px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .empty__ib { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); } .empty__ib .icon { width: 28px; height: 28px; } .empty h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; } .empty p { max-width: 420px; color: var(--text-muted); font-size: 13px; line-height: 1.6; } .empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* ============================================================ Desktop ============================================================ */ @media (min-width: 1024px) { /* Установка: 2×2, карточка 590×290 */ .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-block: 12px 28px; } .step { min-height: 290px; padding: 20px; gap: 14px; } .step__title { font-size: 18px; } .step__desc { font-size: 14px; } .step__screen { flex: 1; height: auto; min-height: 120px; } .ctabox { padding: 32px; margin-block: 20px 48px; gap: 14px; } .ctabox h2 { font-size: 26px; } .ctabox p { font-size: 15px; } .ctabox .btn { width: auto; min-width: 311px; height: 56px; } /* Блог: колонка контента 760 по центру */ .blog { max-width: 760px; margin-inline: auto; } .post-cover { height: 360px; margin-block: 8px 24px; } .article { gap: 18px; padding-block: 28px; } .article h2 { font-size: 24px; } .article p { font-size: 16px; } .article__shot { height: 260px; } .quote { padding: 18px 20px; font-size: 16px; } .inline-cta { padding: 18px; } .related-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rpost { flex-direction: column; align-items: flex-start; } .rpost__thumb { width: 100%; height: 120px; border-radius: 10px; } /* 404 */ .err { padding-block: 64px 40px; gap: 18px; } .err__code { font-size: 84px; } .err h1 { font-size: 30px; } .err__buttons { flex-direction: row; justify-content: center; width: auto; } .err__buttons .btn { width: auto; min-width: 240px; } .err__search { max-width: 420px; } .empty { padding: 64px 24px; } .empty h2 { font-size: 22px; } } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Статья блога: на desktop контент 800 + сайдбар 360 (макет), на мобиле — один поток, порядок задаёт order. Разметка одна. */ .blog { display: flex; flex-direction: column; } /* нужен flex, иначе order не работает */ .blog__main, .blog__side { display: contents; } .toc { order: 2; } .article--1 { order: 3; } .inline-cta { order: 4; } .article--2 { order: 5; } .blog__related { order: 6; } /* Популярные сборки на пустом результате — только в мобильном макете */ .only-mobile { display: block; } @media (min-width: 1024px) { .blog { display: grid; grid-template-columns: minmax(0, 800fr) 360fr; gap: 40px; align-items: start; max-width: var(--content); } /* 760px из эталона — только для колонки без сайдбара */ .blog > .page-title, .blog > .post-cover { grid-column: 1 / -1; } .blog__main { display: flex; flex-direction: column; gap: 0; grid-column: 1; order: 0; } .blog__side { display: flex; flex-direction: column; gap: 20px; grid-column: 2; position: sticky; top: 20px; order: 0; } .article--1, .article--2, .toc, .inline-cta, .blog__related { order: 0; } .toc, .inline-cta, .blog__related { order: 0; } .toc { padding: 20px; } .inline-cta { flex-direction: column; align-items: stretch; margin: 0; padding: 20px; } .inline-cta .btn { width: 100%; } .blog__related { padding: 0; } /* в сайдбаре похожие статьи — строки 320x69, а не карточки */ .related-posts { display: flex; flex-direction: column; gap: 12px; } .rpost { flex-direction: row; align-items: center; } .rpost__thumb { width: 56px; height: 56px; } .only-mobile { display: none; } } /* .blog объявлен flex ниже по файлу, поэтому desktop-раскладку повторяем последней */ @media (min-width: 1024px) { .blog { display: grid; grid-template-columns: minmax(0, 800fr) 360fr; gap: 40px; align-items: start; max-width: var(--content); } /* 760px из эталона — только для колонки без сайдбара */ .blog__main { display: flex; flex-direction: column; grid-column: 1; } .blog__side { display: flex; flex-direction: column; gap: 20px; grid-column: 2; position: sticky; top: 20px; } .blog > .page-title, .blog > .post-cover { grid-column: 1 / -1; } } /* Номера в «Топ приваток»: DLE не отдаёт индекс элемента — считаем в CSS */ .ranks { counter-reset: rank; } .ranks .rank { counter-increment: rank; } .ranks .rank__num::before { content: counter(rank); } /* Описание сборки приходит из {full-story} — типографика как в макете */ .card__desc p { color: var(--text-muted); font-size: 14px; line-height: 1.62; } .card__desc p + p { margin-top: 12px; } @media (min-width: 1024px) { .card__desc p { font-size: 15px; } } /* ============================================================ Обёртка фильтра из main-filter.tpl (.fwrap[hidden]). Мобиль: затемнение + шит снизу, показывает filter.js (снимает hidden). Desktop: обычная колонка-сайдбар, hidden игнорируем. ============================================================ */ .fwrap { position: fixed; inset: 0; z-index: 40; } .fwrap[hidden] { display: none; } .fwrap__scrim { position: absolute; inset: 0; background: #0009; } .fwrap .filters { position: absolute; left: 0; right: 0; bottom: 0; transform: none; box-shadow: 0 -8px 30px var(--shadow); } @media (min-width: 1024px) { .fwrap, .fwrap[hidden] { display: block; position: sticky; top: 20px; inset: auto; z-index: auto; } .fwrap__scrim { display: none; } .fwrap .filters { position: static; box-shadow: none; max-height: none; } } /* Блок «Все версии сборки» в карточке: без order он уезжал в самый верх. Ставим рядом с характеристиками — как в сайдбаре макета. */ .card__versions { order: 4; } /* Кнопки героя на узких экранах: «Как ставить» упиралась в край */ @media (max-width: 420px) { .hero__buttons .btn { padding: 0 14px; font-size: 15px; gap: 8px; } .hero__buttons .btn .icon { width: 18px; height: 18px; } } /* Штатная форма комментариев DLE шире экрана — вписываем в контейнер */ .add-comments-form { margin-inline: 0; } /* штатный отступ DLE сдвигал форму за край */ .add-comments-form, .add-comments-form * { max-width: 100%; box-sizing: border-box; } .add-comments-form input, .add-comments-form textarea { width: 100%; } /* ============================================================ Архив версий (versions.tpl + модуль version.php). Строки .vrow уже описаны выше; здесь — внутренние элементы шаблона и сайдбар, чьи стили жили в удалённом versions.css. ============================================================ */ .vtable__box { display: block; } .vth { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .5px; } .vnum { font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .vtxt { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; } .vrow__ver { display: flex; flex-direction: column; gap: 3px; } .vrow.is-current .vnum { color: var(--text); } .vdl { display: flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 36px; margin-left: auto; background: var(--accent); border-radius: 10px; color: var(--on-accent); font-size: 13px; font-weight: 600; } .vdl .icon { width: 17px; height: 17px; } .vdl__label { display: none; } /* Сайдбар архива: карточка текущей сборки */ .vside { display: flex; flex-direction: column; gap: 20px; } .vcur { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .vcur__top { display: flex; align-items: center; gap: 12px; } .vcur__ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; } .vcur__ico img { width: 100%; height: 100%; object-fit: cover; } .vcur__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vcur__name { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .vcur__src { color: var(--link); font-size: 12px; } .vcur__dl { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; background: var(--accent); border-radius: var(--radius-btn); color: var(--on-accent); font-size: 16px; font-weight: 700; } .vcur__dl .icon { width: 20px; height: 20px; } .vcur__note { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); font-size: 12px; text-align: center; } .vcur__note .icon { width: 14px; height: 14px; color: var(--success); } /* Заметка про старые версии */ .note__box { display: flex; gap: 10px; } .note__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .note__title { font-size: 13px; font-weight: 700; } .note__text { color: var(--text-muted); font-size: 12px; line-height: 1.55; } /* Блок помощи */ .vhelp { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .vhelp__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .vhelp__link { display: flex; align-items: center; gap: 8px; color: var(--link); font-size: 13px; } .vhelp__link .icon { width: 15px; height: 15px; } /* Заголовок архива */ .page-title__h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.2; } @media (min-width: 1024px) { .vth { font-size: 11px; } .vnum { font-size: 15px; } .vtxt { font-size: 13px; } .vrow__ver { flex-direction: row; align-items: center; gap: 10px; } .vdl { width: 130px; height: 34px; border-radius: var(--radius-btn); } .vdl__label { display: inline; } .page-title__h1 { font-size: 34px; } .note__text { font-size: 13px; } } /* Поле поиска на странице ошибки/404 */ .err__search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 14px; } .err__search input::placeholder { color: var(--text-muted); } .popular { padding-block: 8px 32px; } .popular .sec-title { margin-bottom: 12px; } /* ============================================================ Формы DLE (комментарии, поиск, вход, регистрация, обратная связь). Шаблоны служебные — приводим их поля к дизайн-системе, иначе браузер рисует дефолт: белый фон и чёрный текст поверх тёмной темы. ============================================================ */ input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select { width: 100%; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; } textarea { min-height: 96px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } select { appearance: none; padding-right: 34px; cursor: pointer; } /* поле поиска в шапке — своя высота, фон уже задан */ .site-header__search input { padding: 0; background: none; border: none; border-radius: 0; } .site-header__search input:focus { border: none; } /* форма комментариев */ .add-comments-form { display: flex; flex-direction: column; gap: 12px; margin-block: 12px 0; } .add-comments-form__input { display: flex; flex-direction: column; gap: 10px; } .add-comments-form__btn { align-self: flex-start; height: 44px; padding: 0 22px; background: var(--accent); border: none; border-radius: var(--radius-btn); color: var(--on-accent); font-size: 15px; font-weight: 700; cursor: pointer; } .add-comments-form__btn:hover { background: var(--accent-hover); } /* чекбоксы и радио */ input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); } .checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } /* список комментариев */ .comment-item { display: flex; gap: 12px; padding: 14px; margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .comment-item__img img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .comment-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .comment-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .comment-item__author { font-size: 14px; font-weight: 600; } .comment-item__date { color: var(--text-muted); font-size: 12px; } .comment-item__title { color: var(--text-muted); font-size: 13px; line-height: 1.6; } .comment-item__footer, .comment-item__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; } .comment-item__reply { color: var(--link); font-size: 12px; font-weight: 600; } .comment-item__rating { display: inline-flex; align-items: center; gap: 6px; } /* служебные утилиты из шаблонов DLE */ .d-flex { display: flex; } .ai-center { align-items: center; } .d-none { display: none; } .clearfix::after { content: ""; display: table; clear: both; } @media (min-width: 1024px) { input[type="text"], input[type="password"], input[type="email"], input[type="search"], textarea, select { font-size: 15px; } .add-comments-form__input { flex-direction: row; flex-wrap: wrap; gap: 12px; } .add-comments-form__input > * { flex: 1 1 240px; } } /* Раскладка форм DLE (.form__row / .form__content / утилиты движка). В addcomments кнопка и поля лежат в одном флекс-ряду — на мобиле разносим: поля на всю ширину, кнопка отдельной строкой снизу. */ .form__row + .form__row { margin-top: 12px; } /* engine.css задаёт .form__row свой display и перебивает атрибут hidden — без этого скрытые строки формы остаются видимыми. */ .form__row[hidden] { display: none; } .form__caption { margin-bottom: 6px; } .form__label { color: var(--text-muted); font-size: 13px; } .form__label--important::after { content: " *"; color: var(--accent); } .form__content.d-flex { display: flex; flex-wrap: wrap; gap: 10px; } .jc-space-between { justify-content: space-between; } .flex-grow-1 { flex: 1 1 160px; } .add-comments-form__input { min-width: 0; } .add-comments-form__btn { order: 3; width: 100%; } /* Блок защиты от спама. Выводится только когда DLE его требует, поэтому прятать нельзя: скрытое поле с required не даёт отправить форму вообще — браузер отклоняет отправку и не может показать ошибку на невидимом поле. */ .form__row--protect { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); } /* Картинку кода не сжимаем: на узком экране она уезжает в 95px и не читается. Пусть лучше перенесётся на свою строку целиком. */ .form__content--sec-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .form__content--sec-code .form__input { flex: 1 1 160px; width: auto; min-width: 0; } .form__content--sec-code img { flex: none; max-width: none; border-radius: 8px; } @media (min-width: 1024px) { .add-comments-form__btn { order: 0; width: auto; } } /* Воздух перед подвалом: контент упирался в него на всех страницах, кроме статики. В макете у последней секции снизу 24px (desktop 40). */ main { display: block; padding-bottom: 24px; } @media (min-width: 1024px) { main { padding-bottom: 40px; } } .ctabox:last-child { margin-bottom: 0; } /* Счётчик в подписи вкладки и подпись пустой вкладки */ .tab__count { margin-left: 5px; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 400; } .tabs button.is-active .tab__count { color: var(--accent); } .comments__empty { padding: 18px 14px; margin-top: 12px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); font-size: 13px; } /* подсказка над формой: в какую вкладку уйдёт комментарий */ .comments__hint { margin: 14px 0 -2px; color: var(--text-muted); font-size: 13px; line-height: 1.5; } /* ============================================================ СЛУЖЕБНЫЕ СТРАНИЦЫ ДВИЖКА Вход, регистрация, профиль, поиск, обратная связь, правила, ошибки. DLE отдаёт их готовым HTML со своими классами, поэтому оформляем именно его разметку. Раньше эти страницы шли без контейнера и без стилей базовой темы — то есть голым текстом во всю ширину экрана. ============================================================ */ /* Внутренний контейнер (в статике секции свёрстаны своими .container) не должен сужать ширину второй раз и добавлять поля поверх внешнего. */ .container .container { width: auto; max-width: none; padding-inline: 0; } /* Ширину текста ограничиваем: правила и профиль во всю ширину монитора читать невозможно. Каталожные страницы в эту ветку не попадают. */ .page-content { max-width: 900px; padding-block: 4px 32px; } .page-content h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.22; } .page-content h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin-top: 20px; } .page-content h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-top: 16px; } .page-content p, .page-content li { color: var(--text-muted); font-size: 14px; line-height: 1.72; } .page-content h1 + p, .page-content p + p, .page-content h2 + p { margin-top: 10px; } .page-content ul, .page-content ol { margin-top: 10px; padding-left: 22px; } .page-content li { list-style: disc; margin-top: 4px; } .page-content ol li { list-style: decimal; } .page-content a { color: var(--link); } .page-content a:hover { text-decoration: underline; } .page-content img { max-width: 100%; height: auto; } /* Карточка формы */ .form { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .form__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .form__title { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .form__content { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .form__textarea { min-height: 120px; } .form__table { width: 100%; } /* Кнопки: свои (.form__btn) и движковые (.bbcodes — «Принимаю», «Отправить») */ .form__btn, .bbcodes { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .form__btn:hover, .bbcodes:hover { border-color: var(--accent); } .form__btn--primary, .page-content form .bbcodes:first-of-type { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 700; } .form__btn--primary:hover { background: var(--accent-hover); border-color: transparent; } /* Таблицы профиля и статистики */ .page-content table { width: 100%; border-collapse: collapse; } .page-content th, .page-content td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: left; vertical-align: top; } .page-content th { color: var(--text-muted); font-weight: 600; } /* Сообщения движка */ .berrors, #dle-info, .dle-info { padding: 12px 14px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); font-size: 14px; line-height: 1.6; } /* Остатки иконок FontAwesome базовой темы: шрифт не подключён, пустые теги ничего не рисуют, но занимают место в строке — убираем из потока. */ [class^="fa-"], [class*=" fa-"] { display: none; } /* ============================================================ ТЁМНЫЙ СЛОЙ ПОВЕРХ engine.css engine.css достался от базовой темы и написан под светлый фон: кремовые плашки, голубые таблицы, серый код. Полностью переписывать его рискованно — там же лежит рабочая обвязка движка (рейтинг, всплывающие окна, редактор), поэтому перекрашиваем только то, что видно пользователю. ============================================================ */ /* Информационные плашки: были кремовые с оранжевой полосой и иконкой несуществующего шрифта — вместо неё рисовался пустой квадрат. */ .message-info { padding: 13px 15px; margin-bottom: 16px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--accent); border-radius: var(--radius-card); box-shadow: none; font-size: 14px; line-height: 1.6; } .message-info::before { content: none; } .message-info a { color: var(--link); text-decoration: none; } .message-info a:hover { text-decoration: underline; } .message-info__title { font-weight: 700; } /* Таблицы движка: профиль, личные сообщения, статистика */ .dle-table, .pm { border-color: var(--border); } .dle-table td, .pm td { border-color: var(--border); color: var(--text); } .dle-table thead tr:nth-child(1), .pm tr:nth-child(1) { background: var(--surface-2); } .dle-table tr:nth-child(2n+2), .pm tr:nth-child(2n+2) { background: var(--surface); } /* Цитаты, спойлеры и код в комментариях и статьях */ .quote { padding: 14px 16px; margin: 0 0 16px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-card); color: var(--text-muted); font-size: 14px; line-height: 1.6; } .quote::before { content: none; } .scriptcode, .title_spoiler, .text_spoiler { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); } .scriptcode { font-family: var(--font-mono); font-size: 13px; color: var(--text); } .title_spoiler { cursor: pointer; font-weight: 600; } .hide { padding: 12px 14px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); } /* Страница поиска */ .search-page__title { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin-bottom: 14px; } .search-page .search > div { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } /* Прикреплённые файлы и галерея доп. полей */ .uploadedfile { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } /* Подсказки поиска в шапке */ #searchsuggestions { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); overflow: hidden; } #searchsuggestions a { color: var(--text); } #searchsuggestions a:hover { background: var(--surface-2); } /* На узком экране базовая тема растягивала форму за края отрицательными полями (−20px) — под наш контейнер это давало вылет на 8px. */ @media (max-width: 760px) { .form { margin-inline: 0; padding-inline: 14px; } } /* Подпись над полем: в базовой теме была тёмно-серой плашкой во всю ширину, на нашем фоне это выглядит чужеродной полосой. Приводим к остальным меткам. */ .form__caption--above { width: 100%; padding: 0 0 6px; background: none; color: var(--text-muted); } /* Карточки сборок попадают и на служебные страницы (результаты поиска): типографика .page-content не должна перекрашивать их названия в цвет ссылки. */ .page-content .build a, .page-content .post a { color: inherit; text-decoration: none; } .page-content .build__name a { color: var(--text); } /* Ссылка-кнопка внутри форм не должна краситься как обычная ссылка */ .page-content a.form__btn { color: var(--text); text-decoration: none; } .page-content a.form__btn:hover { color: var(--text); text-decoration: none; } /* ============================================================ Вход на сайт: кнопка в шапке + выпадающая панель (login.tpl) ============================================================ */ /* Кнопка входа добавила шапке пятую колонку: на 1024–1279 сумма элементов вылезала на 10px и логотип переносился на две строки. */ .logo__word { white-space: nowrap; } @media (min-width: 1024px) and (max-width: 1279px) { .site-header { column-gap: 22px; } } .login-box { grid-area: user; position: relative; margin-right: var(--pad-screen); } .login-box__btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text); cursor: pointer; } .login-box__btn .icon { width: 22px; height: 22px; } .login { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(300px, calc(100vw - 2 * var(--pad-screen))); padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); } .login[hidden] { display: none; } .login__form { display: flex; flex-direction: column; gap: 11px; } .login__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 800; } .login__field { display: flex; flex-direction: column; gap: 5px; } .login__label { color: var(--text-muted); font-size: 12px; } .login__save { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; cursor: pointer; } .login__save input { width: auto; } .login__submit { width: 100%; height: 42px; justify-content: center; } .login__links { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; } .login__links a { color: var(--link); } .login__links a:hover { text-decoration: underline; } .login__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .login__admin { color: var(--link); font-size: 12px; font-weight: 600; white-space: nowrap; } .login__menu { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } .login__menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--text); font-size: 14px; } .login__menu a:hover { background: var(--surface-2); } .login__out .icon { width: 16px; height: 16px; } @media (min-width: 1024px) { .login-box { margin-right: 0; } .login-box__btn { width: 38px; height: 38px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); } } /* ============================================================ Профиль пользователя (userinfo.tpl) Разметку движка не трогаем — оформляем его классы. Утилита .d-flex из engine.css ставит nowrap, поэтому пункты списков уезжали за экран. ============================================================ */ .usp { display: flex; flex-direction: column; gap: 16px; } .usp__columns { flex-wrap: wrap; gap: 14px; } .usp__left { flex: none; } .usp__img { width: 80px; height: 80px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; } .usp__img img { width: 100%; height: 100%; object-fit: cover; } /* Заглушка аватара базовой темы — светлый PNG, на тёмном фоне это яркое пятно. Прячем её и рисуем иконку фоном; настоящий аватар перекрывает фон сам. */ .usp__img { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 36px; } .usp__img img[src*="noavatar"] { display: none; } .usp__middle { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .usp__name { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .usp__group { color: var(--text-muted); font-size: 13px; } .usp__group b { background: none; font-weight: 600; } .usp__right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .usp__btn a, .usp__btn { color: var(--link); font-size: 13px; } .usp__btn a:hover { text-decoration: underline; } .usp__meta { flex-wrap: wrap; gap: 12px; } .usp__status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; } .usp__status--online { background: rgba(46, 204, 113, .16); color: #4ade80; } .usp__status--offline { background: var(--surface-2); color: var(--text-muted); } .usp__activity { flex-wrap: wrap; gap: 18px; } .usp__activity > div { display: flex; flex-direction: column; gap: 2px; color: var(--text-muted); font-size: 12px; } .usp__activity > div > div { color: var(--text); font-family: var(--font-display); font-size: 17px; font-weight: 800; } /* Пары «ключ — значение». Маркеры списка тут не нужны, а nowrap ломал перенос. */ .usp__list { flex-wrap: wrap; gap: 8px 24px; } .usp__list li { list-style: none; margin: 0; width: auto; font-size: 14px; } .usp__list li span { color: var(--text-muted); margin-right: 5px; } .usp__list li.no-label { width: 100%; } @media (min-width: 1024px) { .usp__img { width: 96px; height: 96px; } .usp__name { font-size: 24px; } } /* ─── Статистика сайта ─────────────────────────────────────────────────── Три колонки шаблон раскладывает утилитой .d-flex — она без переноса, и на узком экране список уезжал за край на 126px. */ .stats__latest { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; } .stats__latest li { list-style: none; margin: 0; font-size: 14px; color: var(--text-muted); } .stats__latest li b { color: var(--text); font-weight: 700; } .stats__common { flex-wrap: wrap; gap: 14px; margin-bottom: 24px; } .stats__list { flex: 1 1 210px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .stats__list li { list-style: none; margin: 0; width: auto; font-size: 14px; color: var(--text-muted); } .stats__list li b { color: var(--text); font-weight: 700; } .stats__list li h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } .stats__list li a { color: var(--link); } .stats__list li a:hover { text-decoration: underline; } /* ─── Облако тегов ─── */ .tags-page .cloud-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags-page .cloud-tags a { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; } .tags-page .cloud-tags a:hover { border-color: var(--link); color: var(--link); } .tags-page .cloud-tags:empty::after { content: 'Пока ни к одному материалу не привязаны теги.'; color: var(--text-muted); font-size: 14px; }