/* sciencepub.ru — токены и базовая типографика. Один источник оформления для сайта; отсюда же берётся шапка для витрин. */ :root { --paper: #fbfaf6; /* тёплая бумага — преемственность с лендингом Студии */ --paper-2: #ffffff; --ink: #17181c; --ink-2: #55585f; --line: #e4e1d8; --accent: #0071e3; --accent-ink: #005bb8; --btn: #0071e3; /* заливка кнопок; в тёмной теме — свой насыщенный синий */ --btn-hover: #005bb8; --mark-ink: #ffffff; /* текст на --mark (статус «издана») */ --mark: #b4453c; /* книжный кирпич — статусы и акценты */ --radius: 14px; --wrap: 68rem; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: InterVariable, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --hand: Caveat, cursive; } /* Тёмные токены в двух копиях: системная тема (пока не выбрана светлая вручную) и явный выбор кнопкой (data-theme на , ставит скрипт из base.html). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #14151a; --paper-2: #1b1d23; --ink: #eceef2; --ink-2: #a0a5b0; --line: #2b2e37; --accent: #58a6ff; --accent-ink: #8cc2ff; --mark: #e0776c; --btn: #2563eb; --btn-hover: #1d4ed8; --mark-ink: #14151a; } } :root[data-theme="dark"] { --paper: #14151a; --paper-2: #1b1d23; --ink: #eceef2; --ink-2: #a0a5b0; --line: #2b2e37; --accent: #58a6ff; --accent-ink: #8cc2ff; --mark: #e0776c; --btn: #2563eb; --btn-hover: #1d4ed8; --mark-ink: #14151a; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-ink); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .6rem; } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 3rem 0 1rem; } h3 { font-size: 1.15rem; margin: 0 0 .3rem; } p { margin: 0 0 1rem; } .muted { color: var(--ink-2); } /* ------------------------------------------------------------------ шапка */ .stand-banner { background: var(--mark); color: #fff; text-align: center; padding: .45rem 1rem; font-size: .85rem; } .stand-banner a { color: #fff; } .top { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; } .top-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.2rem; flex-wrap: wrap; } .brand { text-decoration: none; color: var(--ink); display: grid; line-height: 1.15; margin-right: auto; } .brand-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; } .brand-sub { font-size: .78rem; color: var(--ink-2); } .nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .95rem; } .nav a { color: var(--ink-2); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--ink); } .nav a.cur { color: var(--ink); border-bottom-color: var(--accent); } .theme-btn { background: none; border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; width: 2.1rem; height: 2.1rem; font-size: 1rem; line-height: 1; cursor: pointer; flex: none; } .theme-btn:hover { color: var(--accent); border-color: var(--accent); } .burger { display: none; font-size: 1.4rem; cursor: pointer; } /* чекбокс прячем визуально, но оставляем в порядке табуляции — иначе меню не открыть ни с клавиатуры, ни скринридером */ #mnav { position: absolute; opacity: 0; width: 1px; height: 1px; } #mnav:focus-visible + .burger { outline: 2px solid var(--accent); outline-offset: 3px; } @media (max-width: 46rem) { .burger { display: block; } /* Мобильное меню — список с разделителями и стрелками: девять одинаковых строк без них читаются монолитом (замечание Дмитрия 26.08.2026). Заодно строка стала выше — попасть пальцем проще. */ .nav { display: none; width: 100%; flex-direction: column; gap: 0; padding-bottom: .5rem; } #mnav:checked ~ .nav { display: flex; } .nav a { display: flex; align-items: center; justify-content: space-between; padding: .85rem .3rem; font-size: 1.02rem; border-bottom: 1px solid var(--line); } .nav a::after { content: "›"; font-size: 1.2rem; line-height: 1; color: var(--ink-2); opacity: .4; } .nav a:last-child { border-bottom: none; } /* текущий раздел — полоской слева, а не подчёркиванием: подчёркивание в списке сливается с разделителями */ .nav a.cur { color: var(--ink); border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); padding-left: .75rem; } } /* ------------------------------------------------------------------- герой */ .hero { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; padding: 3.5rem 0 1rem; position: relative; z-index: 0; } /* живой фон-«нейросеть» (static/js/neuro-bg.js): за контентом hero, клики не ловит */ .neuro-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .hero img { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; border: 3px solid var(--paper-2); box-shadow: 0 4px 24px #0000001f; } .hero .lead { font-size: 1.15rem; color: var(--ink-2); max-width: 34rem; } @media (max-width: 46rem) { .hero { grid-template-columns: 1fr; } .hero img { width: 128px; height: 128px; } } .stats { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0 0; padding: 0; list-style: none; } .stats b { font-family: var(--serif); font-size: 1.5rem; display: block; } .stats span { color: var(--ink-2); font-size: .85rem; } /* ----------------------------------------------------------------- карточки */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; } .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; } .card-head { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; } .card-cover { width: 7.5rem; aspect-ratio: 352 / 500; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin-bottom: .55rem; } .card-kind { color: var(--ink-2); font-size: .82rem; margin: 0; } .card p { margin: 0 0 .2rem; } .status { font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); color: var(--ink-2); } .status-live { color: var(--mark-ink); background: var(--mark); border-color: var(--mark); } .tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; } .tag { font-size: .72rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; } .acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .8rem; } .act { font-size: .85rem; text-decoration: none; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); } .act:hover { border-color: var(--accent); color: var(--accent); } .act-primary { background: var(--btn); border-color: var(--btn); color: #fff; } .act-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; } /* крупная кнопка-CTA на страницах-офферах (например, /speaking/) */ .cta { display: inline-block; background: var(--btn); color: #fff; text-decoration: none; font-size: 1.05rem; font-weight: 600; padding: .7rem 1.5rem; border-radius: 999px; margin-top: .3rem; } .cta:hover { background: var(--btn-hover); color: #fff; } /* ---------------------------------------------------- каналы (для рекламодателя) */ /* полоса каналов под hero: квадратные карточки с логотипами + акцентная «Статистика и прайс» */ .chanbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; margin: .3rem 0 .8rem; } .chcard { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-decoration: none; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.15rem; min-width: 11rem; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .chcard:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 25%, transparent); } .chcard svg { width: 32px; height: 32px; margin-bottom: .5rem; } .chcard b { font-size: .88rem; font-weight: 600; } .chcard-num { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; } .chcard-unit { font-size: .78rem; color: var(--ink-2); } .chcard-accent { background: var(--btn); border-color: var(--btn); color: #fff; } .chcard-accent .chcard-unit { color: inherit; opacity: .75; } .chcard-accent:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; } @media (max-width: 46rem) { .chcard { min-width: calc(50% - .4rem); flex: 1 1 0; } } /* -------------------------------------------------------------------- подвал */ .foot { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2rem 0 3rem; } .foot-in { display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; } .foot-brand { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .2rem; } .foot-nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; } .foot p { margin: 0; } /* ------------------------------------------------- крупные блоки на главной */ /* Сетка на 6 долей: обычная плитка = 2 доли (3 в ряд), half = 3 доли (2 в ряд), wide = вся строка. На планшете все по 3 доли, на телефоне — в столбик. */ .blocks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin: 2.5rem 0 1rem; } .block { grid-column: span 2; } .block-half { grid-column: span 3; } @media (max-width: 64rem) { .block, .block-half { grid-column: span 3; } } @media (max-width: 46rem) { .block, .block-half { grid-column: 1 / -1; } } .block { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: inherit; background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.5rem 1.3rem; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .block:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 25%, transparent); } /* превью-картинки в плитке: полоса кадров или «полка» портретных обложек */ .block-pics { display: flex; gap: .5rem; margin: 0 0 1rem; } .block-pics img { flex: 1 1 0; min-width: 0; height: 6.2rem; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); } .block-pics-tall img { flex: 0 1 auto; height: 8.5rem; aspect-ratio: 352 / 500; object-fit: cover; } .block-num { min-height: 1.6rem; } .block .n { font-family: var(--serif); font-size: 1.9rem; line-height: 1; } .block .n-unit { color: var(--ink-2); font-size: .85rem; } .block h3 { font-size: 1.35rem; margin: .5rem 0 .4rem; } .block p { color: var(--ink-2); margin: 0 0 .9rem; } .block .go { color: var(--accent); font-size: .92rem; margin-top: auto; } .block-wide { grid-column: 1 / -1; } .block-wide h3 { font-size: 1.7rem; } .block-wide p { max-width: 46rem; font-size: 1.05rem; color: var(--ink); } /* акцентная плитка-оффер: мягкая заливка акцентом и ссылка-кнопка */ .block-accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--paper-2)), var(--paper-2) 70%); } .block-accent h3 { font-size: 1.7rem; } .block-accent .go { background: var(--btn); color: #fff; font-weight: 600; padding: .5rem 1.1rem; border-radius: 999px; align-self: flex-start; } .block-accent:hover .go { background: var(--btn-hover); } /* --------------------------------------------------------------------- пост */ .post { max-width: 42rem; padding-top: 2rem; } .post h1 { margin-bottom: .2rem; } .post-date { font-size: .9rem; margin-bottom: 1.5rem; } .post img { max-width: 100%; height: auto; border-radius: var(--radius); } .post figure { margin: 1.5rem 0; } .post figcaption { color: var(--ink-2); font-size: .88rem; margin-top: .4rem; } .video { position: relative; padding-top: 56.25%; margin: 1.5rem 0; border-radius: var(--radius); overflow: hidden; background: #000; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .card-post h3 { font-size: 1.1rem; } .card-post h3 a { text-decoration: none; } .card-post h3 a:hover { text-decoration: underline; } .count { font-family: var(--sans); font-size: .95rem; font-weight: 400; } .card-video h3 { font-size: 1.05rem; } .card-video h3 a { text-decoration: none; } .card-video h3 a:hover { text-decoration: underline; } .video video { position: absolute; inset: 0; width: 100%; height: 100%; } .related { max-width: 42rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .related h2 { font-size: 1.2rem; margin: 0 0 .6rem; } .related ul { margin: 0 0 1rem; padding-left: 1.1rem; } .related li { margin-bottom: .3rem; } /* ------------------------------------------------- карточки курсов (/courses/ и кабинет) Стили живут ЗДЕСЬ (не в course-cards.js): статический запасной список в content/courses.md должен выглядеть полноценно и без JS. JS лишь заменяет карточки на версию со статусами «куплено»/прогрессом — той же разметкой. */ .cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; } @media (max-width: 960px) { .cgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .cgrid { grid-template-columns: 1fr; } } .ccard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--paper-2); } .ccard .cico { width: 64px; height: 64px; margin-bottom: 10px; } .ccard h3 { margin: 0 0 2px; font-size: 18px; } .ccard .ckind { font-size: 13px; opacity: .65; margin: 0 0 8px; } .ccard .ctag { flex: 1; font-size: 14px; margin: 0 0 12px; } .ccard .cnote { font-size: 12.5px; opacity: .7; margin: 9px 0 0; line-height: 1.45; } .ccard .cbadge { display: inline-block; border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 600; margin-bottom: 8px; align-self: flex-start; } .ccard .cbadge.open { background: #eaf5ea; color: #1e6b1e; } .ccard .cbadge.lock { background: #00000014; } .ccard .cacts { display: flex; gap: 8px; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .cico * { animation: none !important; } } @keyframes cPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes cDash { to { stroke-dashoffset: 0; } } @keyframes cOrbit { to { transform: rotate(360deg); } } @keyframes cBlink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ccard .cbadge.open { background: #17331c; color: #7fd88f; } :root:not([data-theme="light"]) .ccard .cbadge.lock { background: #ffffff14; } } :root[data-theme="dark"] .ccard .cbadge.open { background: #17331c; color: #7fd88f; } :root[data-theme="dark"] .ccard .cbadge.lock { background: #ffffff14; }