/* site.css — контентные страницы (техники, хабы, статьи, автор, 404) и маркетинговые элементы вкладки «Программы». Подключается после tokens/base. Всё, что помечено классом .mk (крошки, футер, SEO-тексты), скрыто в установленном приложении: html.is-app (ставит inline-скрипт в ) или display-mode standalone — пользователь PWA видит только приложение. */ html.is-app .mk{display:none !important} @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui){ .mk{display:none !important} } body[data-page="content"]{ padding-bottom:0; font-size:17px; line-height:1.6; } /* ---------- шапка ---------- */ .site-header{ max-width:1120px;margin:0 auto; display:flex;align-items:center;gap:18px; padding:calc(14px + env(safe-area-inset-top,0px)) 20px 10px; } .sh-brand{display:inline-flex;flex:0 0 auto;border-radius:var(--radius-sm)} .sh-brand img{display:block;height:26px;width:auto;opacity:.92} .sh-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .sh-nav a{ color:var(--muted);text-decoration:none;font-size:15px;font-weight:500; padding:7px 10px;border-radius:var(--radius-sm); } .sh-nav a:hover{color:var(--fg);background:var(--bg-elev)} .sh-cta{ flex:0 0 auto; color:var(--accent);text-decoration:none;font-size:15px;font-weight:600; padding:8px 14px;border-radius:999px; background:var(--accent-soft);border:1px solid var(--accent-border); } .sh-cta:hover{background:rgba(127,209,255,.24)} @media (max-width:720px){ .sh-nav{display:none} .sh-cta{margin-left:auto} } html.is-app .sh-cta{margin-left:auto} /* ---------- хлебные крошки ---------- */ .crumbs{max-width:1120px;margin:0 auto;padding:4px 20px 0} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--muted)} .crumbs li:not(:last-child)::after{content:"›";margin:0 8px;opacity:.6} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--fg)} .crumbs [aria-current]{color:var(--fg);opacity:.85} body[data-page="programs"] .crumbs{max-width:920px;padding-top:calc(14px + env(safe-area-inset-top,0px))} body[data-page="programs"] main#page{padding-top:16px} /* ---------- раскладка ---------- */ .page{max-width:1120px;margin:0 auto;padding:18px 20px 8px} .art-head h1{ margin:0 0 12px; font-size:clamp(28px, 6.2vw, 44px);line-height:1.15; font-weight:650;letter-spacing:-.01em; text-wrap:balance; } .lead{margin:0 0 10px;font-size:clamp(17px, 2.4vw, 19.5px);line-height:1.55;color:var(--fg);opacity:.9;max-width:62ch} .byline{margin:0;font-size:14px;color:var(--muted)} .byline a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)} .art-head{margin-bottom:26px} .art-timer{margin:-6px 0 28px} .nw{white-space:nowrap} @media (max-width:720px){ body[data-page="content"]{font-size:16.5px} .site-header{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:6px} .page{padding-top:12px} .art-head h1{font-size:clamp(26px, 7.4vw, 34px);margin-bottom:10px} .lead{font-size:16.5px;line-height:1.5} } @media (min-width:1000px){ .page-article.has-timer{ display:grid; grid-template-columns:minmax(0,1fr) 380px; grid-template-areas:"head timer" "body timer"; column-gap:56px; align-items:start; } .page-article.has-timer .art-head{grid-area:head} .page-article.has-timer .art-body{grid-area:body} .page-article.has-timer .art-timer{grid-area:timer;position:sticky;top:16px;margin:6px 0 0} .page-article.has-timer .art-head{margin-bottom:34px} } /* ---------- текст ---------- */ .prose{max-width:68ch;color:rgba(232,241,255,.86)} .prose > :first-child{margin-top:0} .prose h2{ margin:2.1em 0 .6em;color:var(--fg); font-size:clamp(22px, 3.4vw, 27px);line-height:1.25;font-weight:650;letter-spacing:-.005em; } .prose h3{margin:1.7em 0 .5em;color:var(--fg);font-size:19px;font-weight:650} .prose p{margin:0 0 1em} .prose ul, .prose ol{margin:0 0 1.1em;padding-left:1.3em} .prose li{margin:.35em 0} .prose li::marker{color:var(--muted)} .prose strong, .prose b{color:var(--fg);font-weight:650} .prose a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(127,209,255,.35);text-underline-offset:3px} .prose a:hover{text-decoration-color:var(--accent)} .prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent-border);color:var(--fg)} .prose hr{border:0;border-top:1px solid var(--border-soft);margin:2em 0} .table-wrap{overflow-x:auto;margin:0 0 1.2em;-webkit-overflow-scrolling:touch} .prose table{border-collapse:collapse;min-width:100%;font-size:15.5px} .prose th, .prose td{padding:9px 12px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:top} .prose th{color:var(--fg);font-weight:600;background:var(--bg-elev)} .callout{margin:1.3em 0;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--accent-border);background:var(--accent-soft)} .callout > :last-child{margin-bottom:0} .callout-warn{border-color:rgba(255,195,92,.35);background:rgba(255,195,92,.08)} .launch{ display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 16px;border-radius:999px; background:var(--accent-soft);border:1px solid var(--accent-border); color:var(--fg) !important;text-decoration:none !important;font-weight:600;font-size:16px; } .launch:hover{background:rgba(127,209,255,.24)} .launch-play{color:var(--accent);font-size:12px} .launch-rhythm{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums} /* ---------- блоки статьи ---------- */ .steps{counter-reset:st;list-style:none;padding-left:0 !important} .steps li{counter-increment:st;position:relative;padding-left:44px;margin:.9em 0} .steps li::before{ content:counter(st);position:absolute;left:0;top:.05em; width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-size:14px;font-weight:700;color:var(--accent-fg);background:var(--accent); } .safety{margin-top:2em;padding:4px 20px 14px;border-radius:var(--radius-lg);border:1px solid rgba(255,195,92,.28);background:rgba(255,195,92,.05)} .safety h2{margin-top:.9em} .disclaimer{font-size:15px;color:var(--muted)} .faq details{border-bottom:1px solid var(--border-soft);padding:2px 0} .faq summary{ cursor:pointer;list-style:none;padding:14px 32px 14px 0;position:relative; color:var(--fg);font-weight:600;font-size:17px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:22px;color:var(--muted);font-weight:400} .faq details[open] summary::after{content:"−"} .faq-a{padding:0 0 10px} .sources h2{font-size:17px;margin-top:2em} .sources ol{font-size:13px;line-height:1.5;color:var(--muted);padding-left:1.4em} .sources li{margin:.3em 0} .sources a{word-break:break-word} .author-card{ display:flex;gap:16px;align-items:flex-start; margin:2.2em 0 0;padding:18px;border-radius:var(--radius-lg); background:var(--bg-elev);border:1px solid var(--border-soft); } .ac-avatar{ flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden; display:grid;place-items:center;font-size:22px;font-weight:700;color:var(--accent-fg); background:linear-gradient(135deg, var(--accent), var(--hold)); } .ac-avatar img{width:100%;height:100%;object-fit:cover} /* портрет на /avtor/: под заголовком на телефоне, справа от текста на десктопе */ .author-portrait{margin:0 0 26px;max-width:360px} .author-portrait img{display:block;width:100%;height:auto;border-radius:18px;background:var(--bg-elev)} .author-portrait figcaption{margin-top:8px;font-size:14px;color:var(--muted)} @media (min-width:900px){ .page-plain.has-portrait{ display:grid;grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"head portrait" "body portrait";column-gap:56px;align-items:start; } .page-plain.has-portrait .art-head{grid-area:head} .page-plain.has-portrait .prose{grid-area:body} .page-plain.has-portrait .author-portrait{grid-area:portrait;margin:6px 0 0} } .ac-name{font-weight:600;color:var(--fg)} .ac-name a{color:var(--fg)} .ac-bio, .ac-date{margin:.4em 0 0 !important;font-size:15px;color:var(--muted)} /* ---------- карточки хабов ---------- */ .tcards{list-style:none;padding:0 !important;margin:1.2em 0 1.6em;display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))} .tcard{margin:0 !important} .tcard a{ display:flex;flex-direction:column;gap:6px;height:100%; padding:16px 18px;border-radius:var(--radius-lg); background:var(--bg-elev);border:1px solid var(--border); text-decoration:none !important;color:inherit; transition:border-color .15s ease, background .15s ease; } .tcard a:hover{border-color:var(--accent-border);background:var(--bg-elev-2)} .tc-title{color:var(--fg);font-weight:650;font-size:17.5px} .tc-rhythm{color:var(--accent);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em} .tc-text{color:var(--muted);font-size:15px;line-height:1.5} .page-hub .prose{max-width:none} .page-hub .prose > :not(.tcards){max-width:68ch} .page-hub .prose > .table-wrap{max-width:820px} /* ---------- виджет таймера (стили движка — timer-widget.css) ---------- */ .pr-timer{ /* Шар: по ширине не больше 270px, по высоте — чтобы на телефоне «Старт» помещался в первый экран вместе с заголовком; не меньше 150px. */ --r:clamp(150px, calc(100svh - 580px), min(64vw, 270px)); position:relative; padding:16px 16px 14px; border-radius:24px; border:1px solid var(--border); background: radial-gradient(420px 300px at 50% 30%, rgba(127,209,255,.10), transparent 70%), rgba(255,255,255,.025); box-shadow:0 18px 50px rgba(0,0,0,.28); font-size:15px;line-height:1.3; } .pr-timer .dial{gap:10px} .pr-timer .phase{font-size:15px} @supports (font-size:1cqmin){ .pr-timer .count{font-size:clamp(26px, 31cqmin, 96px)} } .pr-timer .controls{background:none;padding:14px 0 0;gap:9px} .pr-timer .ctl, .pr-timer .btns{max-width:none} .pr-timer .btns-main{margin-bottom:4px} .pr-timer .btns-toggle button{min-height:42px} .tw-full{ display:inline-flex;align-items:center;justify-content:center;gap:8px; align-self:center;padding:6px 10px;border-radius:10px; color:var(--muted);text-decoration:none;font-size:14px; } .tw-full svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tw-full:hover{color:var(--fg);background:rgba(255,255,255,.06)} .tw-variants{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 8px} .pr-timer .tw-chip{ min-height:34px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em; color:var(--muted);font-variant-numeric:tabular-nums; } .pr-timer .tw-chip.active{color:var(--fg);background:rgba(127,209,255,.16);border-color:rgba(127,209,255,.4)} .pr-timer .done-card .done-link{display:block;margin-top:14px;color:var(--muted);font-size:14px} /* ---------- футер ---------- */ .site-footer{max-width:1120px;margin:56px auto 0;padding:26px 20px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border-soft)} .sf-hubs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px} .sf-hubs a{color:var(--fg);opacity:.8;text-decoration:none;font-size:15px} .sf-hubs a:hover{opacity:1;color:var(--accent)} .sf-legal{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);opacity:.75} .sf-legal a{color:inherit} body[data-page="programs"] .site-footer{max-width:920px;margin-top:28px;padding-bottom:12px} /* ---------- вкладка «Программы» ---------- */ .pg-goal-text{margin:-4px 0 12px !important;font-size:14.5px} .pg-seo{margin-top:36px} main#page .pg-seo h2{text-transform:none;letter-spacing:0;font-size:22px;color:var(--fg)} main#page .pg-seo p{color:rgba(232,241,255,.8)}