/* ============================================================================ Сетка — блог: статьи и список статей. Токены. Единственный источник — site/css/base.css (см. CONTRACT.md). Но страницы блога подключают ТОЛЬКО этот файл: base.css на них не приходит, а переменные без него не существуют. Поэтому палитра, шкала отступов, радиусы и кривые продублированы здесь один-в-один со значениями base.css — и меняются только вслед за ним. Ни одного цвета и ни одного отступа мимо токена ниже. Из внешнего только счётчик rybbit в : системный шрифт, никаких CDN. ========================================================================= */ :root{ /* --- Палитра (копия base.css) ------------------------------------------ */ --accent:#A83B1B; /* заливка кнопки, акцентная черта цитаты */ --accent-dark:#8F2F14; /* ссылки в тексте, hover заливки */ --accent-darker:#7C2D12; /* active/press */ --accent-bright:#C2410C; /* ТОЛЬКО графика: обводка фокуса */ --accent-soft:#F6E8E0; --accent-line:#EDD6C7; --bg:#FAF7F2; --surface:#FFFFFF; --sand:#F3EDE4; --border:#E8E1D6; --border-strong:#D8CFC1; --fg:#211E1B; --fg-muted:#5F5952; --fg-faint:#8A8279; /* ТОЛЬКО значки и хэйрлайны, не текст */ --ok:#1F6B45; --ok-soft:#E7F2EA; /* --- Отступы, радиусы, кривые (копия base.css) ------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-pill:999px; --ease-out:cubic-bezier(.33,.66,.3,1); --ease-enter:cubic-bezier(.16,.6,.28,1); --ease-in-out:cubic-bezier(.4,.05,.25,1); --shadow-1:0 1px 2px rgba(33,30,27,.05); --shadow-2:0 1px 2px rgba(33,30,27,.05),0 18px 40px -22px rgba(33,30,27,.35); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* Колонка текста. 700px минус поля = ~660px; при 18px это 68–72 знака в строке — та самая мера, на которой глаз не теряет начало следующей. */ --readw:700px; /* Как на лендинге: без этой строки Android Chrome в «автоматической тёмной» перекрашивает страницу сам и портит тёплую нейтраль. */ color-scheme:light; } /* ============================== Сброс ==================================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg); font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} img,svg,video{max-width:100%;height:auto} ::selection{background:var(--accent-soft);color:var(--fg)} .wrap{max-width:var(--readw);margin:0 auto;padding:0 20px} a{color:var(--accent-dark);text-underline-offset:2px} a:hover{color:var(--accent-darker)} a:focus-visible,button:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px} /* ============================== Шапка ==================================== */ header{background:var(--surface);border-bottom:1px solid var(--border); padding:var(--s5) 0} /* Колонка текста узкая (700px), но шапка тянется на лендинговые 1120px — иначе логотип при переходе с главной прыгает вбок на 210px. */ header .wrap{max-width:1120px} .head-row{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap} .logo{font-weight:700;font-size:20px;letter-spacing:-0.025em;color:var(--fg); text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .logo b{color:var(--accent)} .back{margin-left:auto;font-size:15px;color:var(--fg-muted);text-decoration:none; display:inline-flex;align-items:center;min-height:44px} .back:hover{color:var(--fg);text-decoration:underline} /* ============================ Типографика ================================ Воздух между разделами держит h2: 64px сверху — это пауза, по которой видно, что тема сменилась, ещё до чтения заголовка. */ article{padding:var(--s8) 0 var(--s9)} h1,h2,h3{line-height:1.16;font-weight:700;letter-spacing:-0.022em;color:var(--fg)} h1{font-size:clamp(30px,4.4vw,42px);letter-spacing:-0.03em;text-wrap:balance; margin:0 0 var(--s4)} h2{font-size:clamp(23px,2.9vw,29px);text-wrap:balance;margin:var(--s8) 0 var(--s4)} h3{font-size:19px;letter-spacing:-0.012em;margin:var(--s6) 0 var(--s3)} p{margin:0 0 var(--s4);text-wrap:pretty} p:last-child{margin-bottom:0} b,strong{font-weight:700;color:var(--fg)} em{font-style:italic} /* Дата и время чтения под заголовком */ .meta{color:var(--fg-muted);font-size:15px;margin:0 0 var(--s6)} /* Лид статьи — тот же приглушённый тон, что и на лендинге */ .lead{font-size:clamp(19px,2.1vw,21px);line-height:1.55;color:var(--fg-muted); margin:0 0 var(--s6)} ul,ol{margin:0 0 var(--s5);padding-left:26px} li{margin-bottom:var(--s2);text-wrap:pretty} li:last-child{margin-bottom:0} li::marker{color:var(--fg-faint)} ol li::marker{color:var(--fg-muted);font-weight:700} li > ul,li > ol{margin-top:var(--s2)} /* Готовое сообщение клиенту: белая плашка с акцентной чертой — читается как реплика, а не как «важная мысль автора». Для мысли есть .note. */ blockquote{margin:var(--s3) 0 var(--s5);padding:var(--s4) var(--s5); background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0;color:var(--fg)} blockquote p{margin:0 0 var(--s3)} blockquote p:last-child{margin-bottom:0} /* Отбивка-упражнение: «проверка на пятнадцать минут», песочная, без черты — иначе на странице два одинаковых акцентных прямоугольника. Имя .callout, а НЕ .note: на лендинге .note — это мелкая приписка под кнопкой (base.css), и одно имя для двух разных компонентов ломает блок молча при копировании между файлами. */ .callout{background:var(--sand);border:1px solid var(--border);border-radius:var(--radius); padding:var(--s5);margin:var(--s6) 0;font-size:16px} .callout p:last-child{margin-bottom:0} /* Куда идти дальше: из статьи не было ни одной ссылки в теле и ни одного выхода в конце — единственным был «Все статьи» в шапке. */ .next{margin:var(--s8) 0 0;padding-top:var(--s5);border-top:1px solid var(--border)} .next p{margin:0 0 var(--s2);font-size:15px;color:var(--fg-muted)} .next ul{margin:0;padding:0;list-style:none} .next li{margin-bottom:var(--s2);text-wrap:pretty} .next a{font-weight:600} /* ====================== Финальный блок про Сетку ========================= */ .cta{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:var(--s6);margin:var(--s8) 0 0} .cta h2{margin:0 0 var(--s4);font-size:23px} .cta p{color:var(--fg-muted);font-size:16px} .cta strong{color:var(--fg)} /* Единственная целевая кнопка страницы — ведёт в @gosetka_bot */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:52px;padding:14px 28px;border-radius:var(--radius); background:var(--accent);color:#fff;font-size:17px;font-weight:600;line-height:1.2; text-decoration:none;border:1px solid transparent;box-shadow:var(--shadow-1); margin-top:var(--s2); transition:background-color 180ms var(--ease-out),transform 160ms var(--ease-out)} .btn:hover{background:var(--accent-dark);color:#fff} .btn:active{background:var(--accent-darker);transform:scale(.97)} .btn svg{width:18px;height:18px;flex:none} /* ========================== Список статей ================================ */ .posts{list-style:none;padding:0;margin:0} .posts li{margin:0;padding:var(--s6) 0;border-top:1px solid var(--border)} .posts li:first-child{border-top:none;padding-top:var(--s3)} .posts h2{margin:0 0 var(--s2);font-size:clamp(21px,2.4vw,24px)} .posts li{position:relative} .posts h2 a{display:block;color:var(--fg);text-decoration:none} /* Растяжка на весь пункт: заголовок в одну строку давал цель 27px */ .posts h2 a::after{content:"";position:absolute;inset:0} .posts h2 a:hover{color:var(--accent-dark)} .posts p{margin:0;color:var(--fg-muted);font-size:16px} .pmeta{margin:0 0 var(--s2);color:var(--fg-muted);font-size:14px} /* ============================== Подвал =================================== */ footer{border-top:1px solid var(--border);padding:var(--s7) 0 var(--s8); color:var(--fg-muted);font-size:15px} footer p{margin:0 0 var(--s2)} footer p:last-child{margin-bottom:0} /* Подчёркивание постоянное: цвет ссылки равен цвету текста подвала, и без него ссылка не отличима ничем вообще (WCAG 1.4.1). padding поднимает тач-таргет с 17px. */ footer a{color:var(--fg-muted);text-decoration:underline; text-decoration-color:var(--border-strong);text-underline-offset:2px; display:inline-block;padding:9px 0} footer a:hover{color:var(--fg);text-decoration-color:currentColor} /* Ссылка в бота — единственная в подвале, которая красится акцентом */ .foot-tg{color:var(--accent-dark);font-weight:600} .foot-tg:hover{color:var(--accent-darker);text-decoration:underline} /* ============================== Экраны =================================== */ @media(min-width:760px){ body{font-size:18px} .callout{font-size:17px} .cta p{font-size:17px} .posts p{font-size:17px} } @media(max-width:600px){ article{padding:var(--s6) 0 var(--s7)} /* Заголовок раздела не должен схлопываться к кеглю текста: 23/17 = 1.35× против десктопных 1.61×, и это на странице в 16 экранов. Отступ тоже остаётся большим — пауза перед сменой темы важнее экономии высоты. */ h2{font-size:26px;margin-top:var(--s8)} /* Врезки получали двойной штраф: padding 24px с двух сторон плюс кегль на 1px мельче — 31 знак в строке против 37 в основном тексте. */ .callout,.cta{padding:var(--s4)} .callout,.cta p{font-size:17px} .btn{width:100%} p,li{hyphens:auto} } /* Полоса прочитанного: единственный ориентир длины на странице в 16 экранов. Только CSS — в блоге нет ни строчки JS; где animation-timeline не поддержан, полосы просто нет, и это нормально. */ @supports (animation-timeline: scroll()){ body::before{content:"";position:fixed;top:0;left:0;z-index:50; height:3px;width:100%;background:var(--accent); transform-origin:0 50%;transform:scaleX(0); animation:read-progress linear;animation-timeline:scroll()} @keyframes read-progress{to{transform:scaleX(1)}} } /* Reduced motion — меньше движения, а не ноль переходов: цвет и прозрачность остаются, движение и прокрутка-анимации снимаются. */ @media(prefers-reduced-motion:reduce){ *{transition-property:opacity,background-color,border-color,color,box-shadow !important; transition-duration:150ms !important;animation:none !important} body::before{display:none} }