/* ════════════════ SHARED SITE CHROME ════════════════ Общие стили шапки и футера. Подключается на всех страницах. Светлая/тёмная тема через [data-theme="dark"], :root.dark на . */ /* Tokens — общие переменные. Локальный CSS страницы может их переопределить, но базовый набор здесь. */ :root{ --bg:#FBF7F4; --card:#FFFFFF; --text:#2B2435; --sub:#3A3D4D; /* WCAG AAA 7:1 */ --faint:#5C5F6E; --accent:#D9CCEE; --accent-dark:#A992D4; --accent-deep:#6E51AB; --mint:#B8DCCD; --mint-dark:#7FB89E; --hairline:rgba(43,36,53,0.07); --shadow-sm:0 2px 10px rgba(43,36,53,0.06); --shadow-md:0 8px 28px rgba(43,36,53,0.09); --cta-shadow:0 10px 26px rgba(127,184,158,0.40); --header-bg:rgba(251,247,244,0.82); --maxw:1200px; } [data-theme="dark"], :root.dark{ --bg:#15121B; --card:#211C2A; --text:#F0EAF6; --sub:#C7C9D4; --faint:#9095A3; --accent:#5A4E73; --accent-dark:#B7A2E0; --accent-deep:#C9B7F0; --mint:#7FB89E; --mint-dark:#9AD2BB; --hairline:rgba(255,255,255,0.08); --shadow-sm:0 2px 10px rgba(0,0,0,0.30); --shadow-md:0 10px 30px rgba(0,0,0,0.42); --header-bg:rgba(21,18,27,0.80); } /* Wrap-контейнер и кнопки — общие */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:inherit;font-weight:800;font-size:16px; padding:15px 26px;border-radius:16px;border:none;cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap;text-decoration:none; } .btn:active{transform:translateY(1px)} .btn-save{background:var(--mint);color:#1F4636;box-shadow:var(--cta-shadow)} [data-theme="dark"] .btn-save, :root.dark .btn-save{color:#12281E} .btn-save:hover{box-shadow:0 14px 32px rgba(127,184,158,.48)} /* ════════════════ HEADER ════════════════ */ header{ position:sticky;top:0;z-index:60; background:var(--header-bg); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--hairline); } .hbar{display:flex;align-items:center;gap:18px;height:72px} .logo{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--text);text-decoration:none} .logo-mark{ width:38px;height:38px;border-radius:12px;flex:none; background:linear-gradient(150deg,var(--accent) 0%,var(--accent-dark) 100%); display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(169,146,212,.35); } .logo-txt{font-size:16px;line-height:1.05;letter-spacing:-0.01em} .logo-txt b{display:block} .logo-txt span{color:var(--accent-dark)} .hnav{display:flex;align-items:center;gap:6px;margin-left:14px} .hnav a{ font-size:15px;font-weight:700;color:var(--sub);text-decoration:none; padding:9px 13px;border-radius:11px;transition:color .15s,background .15s; } .hnav a:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 26%,transparent)} .hspace{flex:1} .htools{display:flex;align-items:center;gap:11px} .icon-btn{ width:40px;height:40px;border-radius:12px;border:none;cursor:pointer; background:var(--card);box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:center;color:var(--text); transition:transform .15s, box-shadow .2s; } .icon-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)} .icon-btn .sun{display:none} .icon-btn .moon{display:block} [data-theme="dark"] .icon-btn .moon, :root.dark .icon-btn .moon{display:none} [data-theme="dark"] .icon-btn .sun, :root.dark .icon-btn .sun{display:block} .sos-pill{ position:relative;height:38px;padding:0 16px;border:none;cursor:pointer; border-radius:12px;color:#fff;font-family:inherit;font-weight:800;font-size:13px; letter-spacing:.07em;text-decoration:none; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(145deg,#FF7A6E 0%,#E84A5F 100%); box-shadow:0 3px 14px rgba(232,74,95,.48), inset 0 1px 0 rgba(255,255,255,.35); text-shadow:0 1px 2px rgba(150,30,40,.4); transition:transform .15s, box-shadow .2s; } .sos-pill:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,74,95,.55), inset 0 1px 0 rgba(255,255,255,.35)} .cta-head{padding:11px 18px;font-size:15px} @media(max-width:860px){ .hnav{display:none} .cta-head{display:none} } @media(max-width:540px){ .hbar{gap:10px;height:64px} .logo-mark{width:34px;height:34px} .logo-txt{font-size:14.5px} .icon-btn{width:36px;height:36px} .sos-pill{height:34px;padding:0 13px;font-size:12.5px} .htools{gap:8px} } @media(max-width:420px){ .logo-txt{font-size:12.5px;letter-spacing:-0.01em} } @media(max-width:360px){ .logo-txt{font-size:11.5px} } /* ════════════════ FOOTER ════════════════ */ footer{background:var(--card);border-top:1px solid var(--hairline);padding:56px 0 34px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px} .foot-discl{color:var(--sub);font-size:14.5px;font-weight:500;max-width:36ch;margin-top:16px} .foot-col h4{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:14px} .foot-col a{display:block;font-size:15px;font-weight:600;color:var(--text);padding:5px 0;transition:color .15s;text-decoration:none} .foot-col a:hover{color:var(--accent-dark)} .foot-sos{display:flex;flex-direction:column;gap:6px} .foot-sos .n{font-size:17px;font-weight:800} .foot-sos .n span{color:var(--sub);font-size:13px;font-weight:600;margin-left:6px} .foot-consent{padding:18px 0 0;font-size:13px;color:var(--sub);font-weight:500;line-height:1.55} .foot-consent a{color:var(--accent-deep);font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--accent-deep) 35%,transparent)} .foot-bottom{border-top:1px solid var(--hairline);margin-top:16px;padding-top:22px;font-size:13.5px;color:var(--sub);font-weight:600;line-height:1.6} .foot-copyright{margin-top:8px;font-size:12.5px;opacity:.85} @media(max-width:780px){.foot-grid{grid-template-columns:1fr;gap:30px}} /* ════════════════ MODAL (общие стили) ════════════════ */ .modal-scrim{ position:fixed;inset:0;z-index:100;background:rgba(43,36,53,0.42);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:22px; opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s; } [data-theme="dark"] .modal-scrim, :root.dark .modal-scrim{background:rgba(0,0,0,0.62)} .modal-scrim.open{opacity:1;visibility:visible} .modal{ background:var(--bg);border-radius:26px;max-width:440px;width:100%;padding:34px 30px 30px; box-shadow:0 18px 48px rgba(43,36,53,0.13);border:1px solid var(--hairline);position:relative; transform:translateY(14px) scale(.98);transition:transform .28s cubic-bezier(.2,.9,.3,1); } .modal-scrim.open .modal{transform:none} .modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:11px;border:none;cursor:pointer; background:var(--card);box-shadow:var(--shadow-sm);color:var(--text);display:flex;align-items:center;justify-content:center} .modal-close:hover{box-shadow:var(--shadow-md)} .modal h3{font-size:22px;margin-bottom:6px;line-height:1.2;font-weight:800;color:var(--text)} .modal .msub{color:var(--sub);font-size:15px;font-weight:500;margin-bottom:22px} /* Launch modal — subscription form */ .launch-state.hidden{display:none} .launch-form{display:flex;flex-direction:column;gap:14px;position:relative} .launch-input{ width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--hairline); background:var(--card);color:var(--text);font:600 16px 'Nunito',system-ui,sans-serif; transition:border-color .2s,box-shadow .2s;outline:none; } .launch-input:focus{border-color:var(--accent-deep);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-deep) 18%,transparent)} .launch-input.has-error{border-color:#D44A4A} .launch-input::placeholder{color:var(--sub);font-weight:500} .launch-honeypot{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none} .launch-error{color:#D44A4A;font-size:14px;font-weight:600;min-height:18px;line-height:1.4} .launch-submit{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px} .launch-submit:disabled{opacity:.6;cursor:wait} .launch-consent{font-size:13px;color:var(--sub);line-height:1.5;text-align:center;margin-top:4px;font-weight:500} .launch-consent a{color:var(--accent-deep);font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--accent-deep) 35%,transparent)} .launch-success{text-align:center;padding:8px 0} .launch-success-icon{ width:72px;height:72px;border-radius:50%; background:color-mix(in srgb,var(--accent-deep) 14%,transparent); color:var(--accent-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 18px; } .launch-success-icon svg{width:36px;height:36px} .launch-success-title{font-size:24px;margin-bottom:10px;font-weight:800} .launch-success-text{color:var(--sub);font-size:15.5px;font-weight:500;line-height:1.55;margin-bottom:22px;max-width:320px;margin-left:auto;margin-right:auto} .btn-outline{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--accent)} .btn-outline:hover{box-shadow:inset 0 0 0 2px var(--accent-dark);background:color-mix(in srgb,var(--accent) 28%,transparent)} /* ════════════════ THEME TOGGLE — JS ════════════════ Подключи в каждой странице малый скрипт: */ /* ════════════════ DARK-OVERRIDES для статей razobratsya ════════════════ На статьях у callout-блоков жёстко заданы тёмные цвета текста под светлый фон. В тёмной теме это нечитаемо. Здесь — универсальные override для всех страниц. */ /* Symptom-card теги — все варианты (.up/.down/.mixed/.gtr/.panic/.social/.phobia/ .obsession/.compulsion/.mood/.energy/.thoughts/.body) */ [data-theme="dark"] .symptom-card.up .tag, :root.dark .symptom-card.up .tag, [data-theme="dark"] .symptom-card.compulsion .tag, :root.dark .symptom-card.compulsion .tag, [data-theme="dark"] .symptom-card.phobia .tag, :root.dark .symptom-card.phobia .tag, [data-theme="dark"] .symptom-card.body .tag, :root.dark .symptom-card.body .tag { background: rgba(127,184,158,0.20); color: #B8DCCD; } [data-theme="dark"] .symptom-card.down .tag, :root.dark .symptom-card.down .tag, [data-theme="dark"] .symptom-card.panic .tag, :root.dark .symptom-card.panic .tag, [data-theme="dark"] .symptom-card.obsession .tag, :root.dark .symptom-card.obsession .tag, [data-theme="dark"] .symptom-card.thoughts .tag, :root.dark .symptom-card.thoughts .tag { background: rgba(232,180,180,0.18); color: #E8B4B4; } [data-theme="dark"] .symptom-card.mixed .tag, :root.dark .symptom-card.mixed .tag, [data-theme="dark"] .symptom-card.gtr .tag, :root.dark .symptom-card.gtr .tag, [data-theme="dark"] .symptom-card.mood .tag, :root.dark .symptom-card.mood .tag { background: rgba(181,154,255,0.20); color: #C9B7F0; } [data-theme="dark"] .symptom-card.social .tag, :root.dark .symptom-card.social .tag { background: rgba(244,199,122,0.20); color: #ECC373; } [data-theme="dark"] .symptom-card.energy .tag, :root.dark .symptom-card.energy .tag { background: rgba(196,188,204,0.20); color: #D2D4DE; } /* Brain-tag (метка «Главное» в .brain-says) */ [data-theme="dark"] .brain-says .brain-tag, :root.dark .brain-says .brain-tag { color: #C9B7F0; } /* Ссылки во всём контенте — жёстко контрастный лавандовый в тёмной теме */ [data-theme="dark"] main a:not([class]), :root.dark main a:not([class]), [data-theme="dark"] .more-body a, :root.dark .more-body a { color: #C9B7F0; } /* Summary раскрывашек */ [data-theme="dark"] details.more > summary, :root.dark details.more > summary { color: #C9B7F0; }