/* ═══════════════════════════════════════════════════════════════════ СИСТЕМА — один набор цветов, шрифтов и деталей на весь клуб «Статус». Заведено 22.08.2026 при смене облика сайта. До этого каждая страница несла свою копию стилей: восемь разных наборов цветов, четыре размера кнопок, три оттенка одной и той же бронзы. Именно от этого сайт и выглядел «неказисто» — не от плохого вкуса, а от разнобоя. Правило простое: цвет, размер и отступ берутся отсюда. Если чего-то не хватает — добавляем сюда, а не в отдельную страницу. Две поверхности, одна система: · ночь (по умолчанию) — витрина, кабинет, урок. Тёмный кабинет, где текста немного и он крупный; · день (класс `den` на ) — оферта, персональные данные, реквизиты. Длинный юридический текст на тёмном фоне утомляет глаза, поэтому документы читаются с бумаги. ═══════════════════════════════════════════════════════════════════ */ @import url('/shrifty.css'); /* ── 1. Токены ──────────────────────────────────────────────────── */ :root{ /* Ночь. Синева не чёрная, а стальная — цвет ткани костюма. */ --fon:#070c15; /* самый глубокий слой, фон страницы */ --fon-2:#0b1220; /* полосы и секции, чуть светлее фона */ --poverhnost:#101a2e; /* карточки */ --poverhnost-2:#17243d; /* приподнятое: выделенный тариф, панель */ --liniya:rgba(142,160,196,.16); --liniya-2:rgba(142,160,196,.28); --tekst:#eee6d8; /* основной — тёплый кремовый, не белый */ --tekst-2:#a8b4ca; /* второстепенный */ --tekst-3:#7a869e; /* подписи, юридическая мелочь */ --bronza:#c08b41; /* акцент */ --bronza-sv:#e6bb7d; /* цифры и всё, что должно светиться */ --bronza-tmn:#8a6229; --bronza-tush:rgba(192,139,65,.12); /* подложка акцента */ --bronza-dym:rgba(192,139,65,.30); /* рамка акцента */ /* Шрифты */ --shrift-zag:'Unbounded',-apple-system,BlinkMacSystemFont,sans-serif; --shrift:'Golos','Inter',-apple-system,BlinkMacSystemFont,sans-serif; /* Размеры. clamp — чтобы не держать отдельную мобильную шкалу: размер сам едет между телефоном и большим экраном. */ --sh-hero:clamp(36px,6.6vw,84px); --sh-h2:clamp(27px,3.7vw,50px); --sh-h3:clamp(20px,2vw,27px); --sh-h4:clamp(17px,1.5vw,20px); --sh-lead:clamp(17px,1.45vw,21px); --sh-tekst:17px; --sh-melko:14.5px; --sh-metka:11px; --sh-cifra:clamp(30px,3.4vw,46px); /* Ритм. Всё кратно четырём — так блоки садятся на одну сетку. */ --v1:4px; --v2:8px; --v3:12px; --v4:16px; --v5:24px; --v6:32px; --v7:48px; --v8:64px; --v9:96px; --v10:128px; --polya:clamp(20px,4vw,44px); /* поля страницы */ --shirina:1180px; /* полотно */ --shirina-uzkaya:720px; /* полотно для чтения */ --r-mal:10px; --r:16px; --r-bol:24px; --r-kapsula:999px; --ten:0 20px 50px rgba(0,0,0,.42); --ten-mal:0 8px 22px rgba(0,0,0,.28); /* Движение. Одна плавность на весь сайт — тогда сайт ощущается как один предмет, а не как набор страниц. `--pruzhina` — мягкая пружина: разгон, лёгкий перелёт, возврат. Записана функцией linear(), потому что кривой Безье пружину не выразить. */ --bystro:160ms cubic-bezier(.22,.61,.36,1); --plavno:280ms cubic-bezier(.22,.61,.36,1); --medlenno:620ms cubic-bezier(.16,.84,.28,1); --pruzhina:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%, .849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 60%, 1.006 76.2%,1); } /* День — те же токены, другие значения. Ничего в компонентах менять не нужно: они читают имена, а не цвета. */ :root.den{ --fon:#f6f3ec; --fon-2:#efeadf; --poverhnost:#fffdf8; --poverhnost-2:#fffdf8; --liniya:rgba(26,34,52,.13); --liniya-2:rgba(26,34,52,.22); --tekst:#141c2c; --tekst-2:#4e5a70; --tekst-3:#7d879a; --bronza:#8a6229; /* на светлом нужен тёмный акцент: 4,8:1 */ --bronza-sv:#7a561f; --bronza-tush:rgba(138,98,41,.09); --bronza-dym:rgba(138,98,41,.30); --ten:0 16px 40px rgba(20,28,44,.10); --ten-mal:0 6px 18px rgba(20,28,44,.07); } /* ── 2. База ────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{ background:var(--fon); scroll-behavior:smooth; /* якорные ссылки не должны заезжать под плавающую шапку */ scroll-padding-top:104px; -webkit-text-size-adjust:100%; } body{ background:var(--fon); color:var(--tekst); font-family:var(--shrift); font-size:var(--sh-tekst); line-height:1.6; font-variant-numeric:tabular-nums; /* цифры не пляшут при пересчёте */ overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Русские слова не рвём посреди слога — переносы уродуют текст. Длинные слова всё равно не сломают вёрстку: за это отвечает overflow-wrap на узких экранах. */ h1,h2,h3,h4,.cifra,.logo{ font-family:var(--shrift-zag); font-weight:700; letter-spacing:-.03em; line-height:1.02; overflow-wrap:normal; word-break:normal; text-wrap:balance; /* не оставляет одно слово на последней строке */ } @media (max-width:520px){ h1,h2,h3,h4{overflow-wrap:break-word} } h1{font-size:var(--sh-hero)} h2{font-size:var(--sh-h2);line-height:1.04} h3{font-size:var(--sh-h3);line-height:1.12;letter-spacing:-.02em} h4{font-size:var(--sh-h4);line-height:1.2;letter-spacing:-.01em} p{max-width:66ch} a{color:inherit;text-decoration:none} ::selection{background:var(--bronza);color:var(--fon)} /* Полоса прокрутки в цвет сайта — мелочь, которую замечают. */ *{scrollbar-color:var(--liniya-2) transparent;scrollbar-width:thin} /* ── 3. Полотно и секции ────────────────────────────────────────── */ .polotno{max-width:var(--shirina);margin:0 auto;padding:0 var(--polya)} .polotno.uzko{max-width:var(--shirina-uzkaya)} section{padding:var(--v9) 0;position:relative} @media (max-width:760px){ section{padding:var(--v8) 0} } /* Шапка раздела: номер, заголовок, подзаголовок */ .shapka-razdela{margin-bottom:var(--v7);max-width:62ch} .metka{ font-family:var(--shrift-zag); font-size:var(--sh-metka); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bronza); margin-bottom:var(--v4); display:block; } .podzag{color:var(--tekst-2);margin-top:var(--v4);font-size:var(--sh-lead); line-height:1.5;max-width:58ch} /* Волосяная линия с бронзовым свечением в середине — фирменная деталь, осталась от прежнего сайта: она держит преемственность. */ .liniya-metall{height:1px;border:0;background:linear-gradient(90deg, transparent,var(--liniya-2) 12%,var(--bronza) 50%,var(--liniya-2) 88%,transparent)} /* ── 4. Шапка сайта: капсула, которая плывёт за человеком ───────── */ .shapka{ position:sticky;top:var(--v3);z-index:60; margin:var(--v3) auto 0;max-width:calc(var(--shirina) - 0px); padding:0 var(--polya); } .shapka-vnutri{ display:flex;align-items:center;gap:var(--v5); padding:12px 12px 12px 22px; border:1px solid var(--liniya); border-radius:var(--r-kapsula); background:color-mix(in srgb,var(--fon) 78%,transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); transition:padding var(--plavno),background var(--plavno), box-shadow var(--plavno),border-color var(--plavno); } /* Класс вешает dvizhenie.js, когда страница ушла вниз: капсула поджимается и уплотняется — как строка состояния в приложении. */ .shapka.plyvet .shapka-vnutri{ padding:8px 8px 8px 18px; background:color-mix(in srgb,var(--fon) 92%,transparent); box-shadow:var(--ten-mal); border-color:var(--liniya-2); } .logo{font-size:20px;font-weight:800;letter-spacing:.02em;line-height:1; white-space:nowrap;flex:none} .logo small,.logo span{display:block;font-family:var(--shrift);font-size:8.5px; font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--bronza);margin-top:4px; /* Само слово «СТАТУС» рвать нельзя — отсюда nowrap выше. А подпись «место, где становятся квалифицированными» — это 297 пикселей, которые на узком телефоне выталкивали за край экрана то ссылку в шапке документов, то карточку формы регистрации. Ей перенос разрешён. Замерено 27.08.2026. */ white-space:normal} .shapka nav{display:flex;align-items:center;gap:var(--v5);margin-left:auto; font-size:15px;color:var(--tekst-2)} .shapka nav a{white-space:nowrap;transition:color var(--bystro)} .shapka nav a:hover{color:var(--tekst)} /* Старая цена рядом с новой. Зачёркивание по умолчанию кладёт линию ровно посередине цифр и делает их нечитаемыми — а прочитать старую цену человек должен, иначе скидка не работает. Поэтому цена бледнее, мельче и с тонкой линией. */ .cena s{color:var(--tekst-3);font-size:.62em;font-weight:600; text-decoration:line-through;text-decoration-thickness:1.5px; text-decoration-color:var(--tekst-3);margin-right:.28em; letter-spacing:-.02em} /* Шапка на телефоне. До 27.08.2026 шапка не была рассчитана на узкий экран нигде, кроме кабинета, — а он прятал пункты своим правилом. Замер показал: страницы облигаций, портфеля и чата уезжали вбок на 12–53 пикселя, потому что пять пунктов меню стоят в одну строку и не переносятся. Лечим двумя вещами. Слоган под логотипом в шапке на телефоне не нужен — он занимает 297 пикселей и ради него не должна страдать навигация. А меню пусть переносится на вторую строку, а не выталкивает страницу за край: это дешевле бургер-меню и ничего не прячет от человека. Шапка на сайте описана в девяти файлах и тремя разными именами: `.shapka` (витрина, кабинет, документы), `.verh` (облигации, уроки, разборы, оплата, чат) и `.nav` с `.nav-r` (размещения). Чинить в девяти местах — значит развалить снова при первой же новой странице, поэтому правило одно и живёт здесь. Селекторы начинаются с `body` намеренно: правила страниц лежат в их собственном