/* ============================================================
EDITORIAL / FLAT DESIGN SYSTEM · единый стиль сайта
Плоский редакционный стиль: кремовый фон, жирные гротескные
заголовки, серифный длинный текст, тонкие линии вместо теней.
Подключение:
Тема: или data-theme="dark"
Шрифты (в ):
============================================================ */
/* ─── базовые токены (общие для тем) ─── */
:root{
--radius:12px;
--radius-sm:8px;
--radius-pill:999px;
--sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--serif:"Spectral",Georgia,"Times New Roman",serif;
--ease:.15s cubic-bezier(.4,0,.2,1);
}
/* ─── СВЕТЛАЯ тема (по умолчанию) ─── */
:root,
html[data-theme="light"]{
--bg:#faf9f5;
--bg-soft:#f1efe6;
--bg-card:#ffffff;
--bg-card-hover:#f7f6f0;
--bg-nav-active:#f1efe6;
--panel:#ffffff;
--line:#e7e3d7;
--line-strong:#d8d3c4;
--border-soft:#e7e3d7;
--border-default:#e7e3d7;
--border-strong:#d8d3c4;
--ink:#1a1916; /* near-black: primary buttons / nav / strong text */
--ink-soft:#3a3833;
--text:#28261f;
--muted:#73706a;
--faint:#a8a499;
--on-ink:#faf9f5; /* текст на чёрной кнопке */
--green:#2f8a4e; /* акцент: ссылки, активное, успех */
--green-deep:#246b3d;
--green-bar:#28a745; /* заливка прогресса */
--green-tint:#e9f2e8;
--star:#c89327;
--danger:#bd4a32;
--danger-tint:#f6e6e0;
color-scheme:light;
}
/* ─── ТЁМНАЯ тема (тоже плоская) ─── */
html[data-theme="dark"]{
--bg:#1b1a17;
--bg-soft:#232220;
--bg-card:#222120;
--bg-card-hover:#242320;
--bg-nav-active:#232220;
--panel:#222120;
--line:#332f29;
--line-strong:#403b33;
--border-soft:#2a2822;
--border-default:#332f29;
--border-strong:#403b33;
--ink:#f3f1e9; /* в тёмной теме «ink»-кнопка светлая */
--ink-soft:#d8d4c8;
--text:#e6e3d8;
--muted:#9c978a;
--faint:#6b6759;
--on-ink:#1b1a17;
--green:#62b97a;
--green-deep:#7cc78f;
--green-bar:#3fc35f;
--green-tint:#22301f;
--star:#dcb350;
--danger:#e07a63;
--danger-tint:#3a201a;
color-scheme:dark;
}
/* ─── основа ─── */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{
background:var(--bg);
color:var(--text);
font-family:var(--sans);
font-size:15px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
transition:background var(--ease), color var(--ease);
}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.serif{font-family:var(--serif)}
/* ============================================================
ПОВЕРХНОСТИ — плоские, на тонких линиях
============================================================ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.panel-flush{background:transparent;border:1px solid var(--line);border-radius:var(--radius)}
.divide > * + *{border-top:1px solid var(--line)}
/* ============================================================
КНОПКИ
============================================================ */
.btn{
font-family:var(--sans);font-size:14px;font-weight:600;
color:var(--ink);background:transparent;
border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);
padding:9px 18px;cursor:pointer;transition:var(--ease);
display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{background:var(--bg-soft);border-color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn-primary{
color:var(--on-ink);background:var(--ink);border-color:var(--ink);
}
.btn-primary:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--on-ink)}
.btn-icon{
width:38px;height:38px;padding:0;border-radius:var(--radius-pill);
display:inline-flex;align-items:center;justify-content:center;font-size:16px;
color:var(--ink);background:transparent;border:1.5px solid var(--line-strong);cursor:pointer;transition:var(--ease);
}
.btn-icon:hover{background:var(--bg-soft);border-color:var(--ink)}
/* ============================================================
ПОЛЯ ВВОДА
============================================================ */
.field,input.field,textarea.field,select.field{
font-family:var(--sans);font-size:15px;color:var(--text);
background:var(--panel);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);
padding:11px 15px;outline:none;width:100%;transition:var(--ease);
}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--ink)}
textarea.field{resize:vertical;line-height:1.6}
/* ============================================================
ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
============================================================ */
.theme-toggle{
display:inline-flex;align-items:center;gap:8px;
background:transparent;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);
padding:7px 14px 7px 9px;cursor:pointer;color:var(--ink);transition:var(--ease);font-family:var(--sans);
}
.theme-toggle:hover{background:var(--bg-soft);border-color:var(--ink)}
.theme-toggle .ico{font-size:15px;line-height:1}
.theme-toggle .lbl{font-size:13px;font-weight:600}
/* ============================================================
ЧИПЫ / БЕЙДЖИ / ПИЛЮЛИ
============================================================ */
.pill{
display:inline-flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:600;color:var(--muted);
background:transparent;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);
padding:5px 12px;transition:var(--ease);
}
.pill.ok{color:var(--green-deep);border-color:var(--green);background:var(--green-tint)}
.pill.bad{color:var(--danger);border-color:var(--danger);background:var(--danger-tint)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.dot.up{background:var(--green-bar)}
.dot.down{background:var(--danger)}
/* вердикты (книги) — текст с цветной заливкой */
.tag{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-sm);
background:var(--bg-soft);border:1px solid var(--line)}
.tag.must{color:var(--green-deep);background:var(--green-tint);border-color:var(--green)}
.tag.skip{color:var(--danger);background:var(--danger-tint);border-color:var(--danger)}
/* ============================================================
СЕГМЕНТНЫЕ ВКЛАДКИ (подчёркивание активного — редакционно)
============================================================ */
.segment{display:inline-flex;gap:2px;background:var(--bg-soft);border:1px solid var(--line);
border-radius:var(--radius-pill);padding:3px}
.segment .seg{
font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);
background:transparent;border:none;border-radius:var(--radius-pill);
padding:8px 18px;cursor:pointer;transition:var(--ease);
}
.segment .seg:hover{color:var(--ink)}
.segment .seg.active{color:var(--on-ink);background:var(--ink)}
/* ============================================================
ЧЕКБОКС
============================================================ */
.check{
width:22px;height:22px;border-radius:6px;flex:none;cursor:pointer;
display:grid;place-items:center;font-size:13px;color:var(--on-ink);
background:transparent;border:1.5px solid var(--line-strong);transition:var(--ease);
}
.check.on{background:var(--green-bar);border-color:var(--green-bar)}
/* ============================================================
ПРОГРЕСС-БАР (как на референсе — плоская дорожка + зелёная заливка)
============================================================ */
.progress{height:10px;border-radius:var(--radius-pill);background:var(--bg-soft);
border:1px solid var(--line);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--green-bar);border-radius:var(--radius-pill)}
/* ============================================================
ПОЛЗУНОК
============================================================ */
input[type=range].ed-range{
-webkit-appearance:none;appearance:none;width:100%;height:6px;
background:var(--line);border-radius:var(--radius-pill);outline:none;
}
input[type=range].ed-range::-webkit-slider-thumb{
-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
background:var(--ink);border:2px solid var(--bg);cursor:pointer;
}
input[type=range].ed-range::-moz-range-thumb{
width:16px;height:16px;border:2px solid var(--bg);border-radius:50%;
background:var(--ink);cursor:pointer;
}
/* ─── мелочи ─── */
.muted{color:var(--muted)}
.faint{color:var(--faint)}
a{color:var(--green-deep);text-underline-offset:3px;font-weight:600}
::selection{background:var(--green-tint)}
/* ============================================================
ГЛАВНАЯ (портал) — новые компоненты
Сетка инструментов, статистика, «читаю сейчас», задачи, инбокс.
Добавлено при разборе дизайна главной страницы.
============================================================ */
/* заголовок секции — тот же паттерн, что .sec-h в дизайн-система.html,
вынесен сюда, чтобы использовать без копирования на каждой странице */
.sec-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:0 0 14px}
/* сетка карточек-инструментов — 2 колонки, а не 3: карточки шире и читаемее */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool-card{position:relative;padding:24px;display:flex;flex-direction:column;gap:12px}
.tool-card .ico{width:38px;height:38px;border-radius:9px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink)}
.tool-card h3{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.tool-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.45;flex:1}
.tool-card .cmd{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--faint)}
.tool-card .badge-freq{position:absolute;top:18px;right:18px}
/* статистика (дневник / книги и т.п.) */
.stat-row{display:flex;gap:16px;flex-wrap:wrap}
.stat-card{flex:1;min-width:200px;padding:20px;display:flex;flex-direction:column;gap:6px}
.stat-card .lbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.stat-card .big{font-size:38px;font-weight:800;color:var(--ink);line-height:1}
.stat-card .big .unit{font-size:13px;font-weight:500;color:var(--muted);margin-left:8px}
.stat-card .sub{font-size:12.5px;color:var(--faint)}
.stat-card .dot{margin-left:2px}
/* «читаю сейчас» — прогресс книги, использует .progress из базовой системы */
.progress-card{padding:20px;display:flex;flex-direction:column;gap:12px}
.progress-card .meta{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;color:var(--faint)}
/* открытые задачи — чекбоксы, использует .check из базовой системы */
.task-list{display:flex;flex-direction:column;gap:10px}
.task-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text)}
/* последнее в inbox — строки списка, использует .divide из базовой системы */
.inbox-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.inbox-row .ts{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--faint)}
@media (max-width:860px){
.tool-grid{grid-template-columns:1fr}
}