/* ========================================================================== ЭПИЛАНИЗМ — визуальный каркас Палитра Маркуса: почти-чёрный / средне-серый / светло-серый / бордо / малина ========================================================================== */ /* Шрифты подключаются ссылкой в , а не @import: импорт из CSS ждёт загрузки самого CSS и задерживает первую отрисовку текста. */ /* --- 1. Токены ----------------------------------------------------------- */ :root{ color-scheme:dark; /* тёмные полосы прокрутки и системные элементы форм */ /* Пять цветов палитры и производные ступени темноты. Чистый чёрный не используется нигде — это ответ на замечание про жёсткий фон. */ /* Ступени подняты после отзыва «слишком много чёрного, плоско»: между фоном и панелью теперь заметная разница в тоне. */ --void:#0C0C10; --base:#121217; --raised:#18181F; --panel:#1F1F28; --ink-bright:#ECECF1; --ink:#DBDBE2; /* светло-серый из палитры, поднятый под тёмный фон */ --ink-dim:#9C9CA6; /* средне-серый из палитры, поднятый */ --ink-faint:#8D8D98; /* не ниже 4,6:1 даже на панели — мелкий текст проходит WCAG AA */ /* Бордо и малина — точные цвета палитры, без осветления. На фоне они дают 1,2:1 и 1,7:1, то есть как текст нечитаемы в принципе. Поэтому работают только заливками, рамками и линиями, где контраст не требуется. */ --wine:#470012; /* бордо палитры */ --wine-lift:#5E0019; /* та же краска под наведение, чуть плотнее */ --crimson:#7A002B; /* малина палитры */ --crimson-hi:#940034; /* Знаки и текст. Любое осветление холодной малины уводит её в розовый, так что ступени взяты теплее по тону: это красный, а не розовый. */ --crimson-mark:#CE2030; /* крупные знаки и линии: 3,6:1 на фоне, 3,0:1 на панели */ --crimson-text:#E85C4E; /* мелкий текст: 5,6:1 на фоне, 4,7:1 на панели */ --on-accent:#ECECF1; --edge:rgba(201,201,206,.08); --edge-mid:rgba(201,201,206,.14); --edge-strong:rgba(201,201,206,.22); /* Old Standard — возрождение академической гарнитуры конца XIX века. Строгая, а не «красивая»: страница читается как научный журнал. Literata держит штрих в абзаце светлым по тёмному. Моноширинный оставлен только цифрам: номерам, датам, таймкодам. */ --serif:'Old Standard TT',Georgia,'Times New Roman',serif; --text:'Literata',Georgia,'Times New Roman',serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; --shell:1360px; --gutter:40px; --header-h:72px; --bar-h:52px; } /* --- 2. База ------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh; background:var(--void); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.62; overflow-x:hidden; } body.has-demobar{padding-bottom:var(--bar-h)} img{max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} [hidden]{display:none!important} ::selection{background:var(--wine);color:var(--ink-bright)} /* --- 3. Фон --------------------------------------------------------------- Ни свечений, ни виньетки: радиальные градиенты за каждым блоком — самый заметный признак дежурного дизайна. Остаётся камень: плотный тон, зерно и одна вертикаль, отбивающая поле кодекса от полосы набора. */ .backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--void)} .backdrop::after{ content:"";position:absolute;inset:0;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } .container{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)} /* --- 4. Типографика ------------------------------------------------------ */ .eyebrow{ font-family:var(--text);font-style:italic;font-size:.95rem;line-height:1.4; color:var(--ink-dim);margin:0 0 26px; } .eyebrow .sep{color:var(--ink-faint);margin:0 .5em} .display{ font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,10.5vw,9.2rem);line-height:.9; letter-spacing:.015em;text-transform:uppercase;color:var(--ink-bright);margin:0; } .title{ font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7.5vw,6.2rem);line-height:.94; letter-spacing:.02em;text-transform:uppercase;color:var(--ink-bright);margin:0; } .title--case{text-transform:none;letter-spacing:0} .lead{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.66;color:var(--ink-dim);max-width:34em;margin:26px 0 0} .prose{font-size:1.1rem;line-height:1.66;color:var(--ink);margin:0} .prose p{margin:0 0 18px} .prose p:last-child{margin-bottom:0} .prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;color:var(--ink-bright);margin:36px 0 14px} .prose blockquote{margin:26px 0;padding-left:22px;border-left:2px solid var(--crimson);color:var(--ink-dim);font-style:italic} .prose--dim{color:var(--ink-dim)} /* буквица — готическая деталь из рукописной традиции */ .dropcap::first-letter{ font-family:var(--serif);float:left;font-size:4.2em;line-height:.78;margin:.06em .12em 0 0; font-weight:400;color:var(--crimson-mark); } .num{font-feature-settings:"onum" 1;font-variant-numeric:oldstyle-nums} .label{ font-family:var(--text);font-style:italic;font-size:.92rem;line-height:1.4; color:var(--ink-dim); } /* --- 5. Орнаменты -------------------------------------------------------- */ .rule-orn{display:flex;align-items:center;gap:18px;margin:0} .rule-orn::before,.rule-orn::after{content:"";flex:1;height:1px;background:var(--edge-mid)} .rule-orn svg{display:block;width:14px;height:14px;color:var(--crimson);flex:none} /* стрельчатая арка над карточкой */ .arch{display:block;line-height:0} .arch svg{display:block;width:100%;height:44px;overflow:visible} .arch path{fill:var(--raised);stroke:var(--edge-mid);stroke-width:1;vector-effect:non-scaling-stroke} /* угловые засечки на панели */ .ticks{position:absolute;inset:0;pointer-events:none} .ticks::before,.ticks::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--edge-strong)} .ticks::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .ticks::after{bottom:-1px;right:-1px;border-left:0;border-top:0} /* решётка-трейсери за героем */ .tracery{position:absolute;inset:0;pointer-events:none;opacity:.09;color:var(--ink-dim);overflow:hidden} .tracery svg{position:absolute;right:6%;top:-10%;width:min(26vw,330px);height:auto} .sigil{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;color:var(--crimson)} .sigil svg{display:block;width:100%;height:100%} /* --- 6. Шапка ------------------------------------------------------------ */ .header{ position:sticky;top:0;z-index:40;height:var(--header-h);display:flex;align-items:center; background:rgba(10,10,12,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge); } .header__in{display:flex;align-items:center;gap:44px;width:100%} .brand{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-bright);flex:none} /* Знак школы — бабочка. Шире, чем высота: крылья раскрыты */ .logo{display:block;width:100%;height:auto} .brand .logo{width:34px;color:var(--ink-bright);transition:color .18s} .brand:hover .logo{color:var(--crimson-text)} .nav{display:flex;gap:30px;flex:1} .nav a{ position:relative;font-family:var(--text);font-size:1rem;font-weight:400; color:var(--ink-dim);padding:26px 0;transition:color .18s; } .nav a:hover{color:var(--ink)} .nav a.is-active{color:var(--ink-bright)} .nav .n{font-family:var(--serif);color:var(--crimson-text);margin-right:.55em;font-size:.9em} .nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--crimson)} .user{display:flex;align-items:center;gap:14px;flex:none;position:relative} .user__rank{font-family:var(--text);font-style:italic;font-size:.92rem;color:var(--ink-dim)} .avatar{ width:34px;height:34px;border-radius:50%;border:1px solid var(--edge-strong); display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--ink); transition:border-color .18s,color .18s; } .avatar:hover{border-color:var(--crimson);color:var(--ink-bright)} .menu{ position:absolute;top:calc(100% + 14px);right:0;min-width:250px; background:var(--panel);border:1px solid var(--edge-mid);padding:8px 0;z-index:50; } .menu__head{padding:14px 20px 12px;border-bottom:1px solid var(--edge)} .menu__rank{font-family:var(--serif);font-size:1.3rem;color:var(--ink-bright);line-height:1.1} .menu a{display:block;padding:11px 20px;font-family:var(--text);font-size:.98rem;color:var(--ink-dim)} .menu a:hover{color:var(--ink-bright);background:rgba(201,201,206,.04)} .menu hr{margin:8px 0;border:0;height:1px;background:var(--edge)} .burger{display:none;width:34px;height:34px;place-items:center;border:1px solid var(--edge-mid)} .burger span{display:block;width:15px;height:1px;background:var(--ink);position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:15px;height:1px;background:var(--ink)} .burger span::before{top:-5px} .burger span::after{top:5px} /* --- 7. Кнопки ----------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 28px;border:1px solid var(--edge-strong); font-family:var(--text);font-size:1rem;color:var(--ink);text-align:center; transition:border-color .18s,color .18s,background-color .18s; } .btn:hover{border-color:var(--crimson);color:var(--ink-bright)} .btn--accent{border-color:var(--crimson);color:var(--ink-bright)} .btn--accent:hover{background:var(--wine)} /* Срез только у залитых: у кнопки с рамкой clip-path срезал бы саму рамку */ .btn--fill{ background:var(--crimson);border-color:var(--crimson);color:var(--on-accent); clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .btn--fill:hover{background:var(--crimson-hi);border-color:var(--crimson-hi)} .btn--wide{width:100%} .btn--muted{border-color:var(--edge);color:var(--ink-faint);cursor:default} .btn--muted:hover{border-color:var(--edge);color:var(--ink-faint)} .link-arrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--text);font-style:italic;font-size:.98rem; color:var(--ink-dim);transition:color .18s; } .link-arrow:hover{color:var(--crimson-text)} .link-arrow::after{ content:"";width:30px;height:10px;background:currentColor; -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat; transition:transform .18s; } .link-arrow:hover::after{transform:translateX(4px)} /* --- 8. Переключатели ---------------------------------------------------- */ .tabs{display:flex;gap:34px;border-bottom:1px solid var(--edge-mid)} .tab{ position:relative;padding:0 2px 16px; font-family:var(--text);font-size:1rem;color:var(--ink-dim);transition:color .18s; } .tab:hover{color:var(--ink)} .tab.is-active{color:var(--ink-bright)} .tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--crimson)} .pills{display:flex;flex-wrap:wrap;gap:10px} .pill{ padding:11px 20px;border:1px solid var(--edge-mid); font-family:var(--text);font-size:.95rem;color:var(--ink-dim); transition:border-color .18s,color .18s; } .pill:hover{color:var(--ink);border-color:var(--edge-strong)} .pill.is-active{color:var(--ink-bright);border-color:var(--crimson)} /* --- 9. Уведомление ------------------------------------------------------ */ .notice{ display:flex;gap:14px;align-items:flex-start;padding:22px 26px; border:1px solid rgba(165,15,60,.34);background:rgba(90,10,28,.15); color:var(--ink);font-size:1.05rem; } .notice .sigil{flex:none;margin-top:.3em;width:12px;height:12px} /* --- 10. Карточки -------------------------------------------------------- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .card{position:relative;display:flex;flex-direction:column} .card__body{ flex:1;position:relative;min-height:340px;padding:38px 42px 42px; background:var(--raised);border:1px solid var(--edge-mid);border-top:0; } .card--lead .arch path{stroke:var(--crimson)} .card--lead .card__body{border-color:rgba(165,15,60,.3)} .card__title{font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.8rem);font-weight:400;line-height:1.05;color:var(--ink-bright);margin:14px 0 0} .card__price{display:flex;align-items:baseline;gap:12px;margin:22px 0 30px} .card__price b{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--ink-bright)} .card__price span{font-family:var(--text);font-style:italic;font-size:.92rem;color:var(--ink-dim)} .feats{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:14px} .feats li{position:relative;padding-left:22px;font-size:1.05rem;line-height:1.5;color:var(--ink)} .feats li::before{content:"\25C6";position:absolute;left:0;top:.05em;font-size:.55em;color:var(--crimson)} /* --- 11. Календарь ------------------------------------------------------- */ .booking{display:grid;grid-template-columns:1.35fr 1fr;gap:24px} .booking__cal,.booking__side{position:relative;background:var(--raised);border:1px solid var(--edge-mid);padding:38px 40px} .cal__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px} .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px} .cal__dow{font-family:var(--text);font-style:italic;font-size:.85rem;color:var(--ink-faint);text-align:center;padding-bottom:8px} .cal__day{ aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--edge-mid); font-size:1.05rem;color:var(--ink);transition:border-color .16s,color .16s,background-color .16s; } .cal__day:hover{border-color:var(--crimson);color:var(--ink-bright)} .cal__day.is-off{border-color:transparent;color:var(--ink-faint);cursor:default} .cal__day.is-off:hover{border-color:transparent;color:var(--ink-faint)} .cal__day.is-empty{border:0;cursor:default} .cal__day.is-picked{background:var(--crimson);border-color:var(--crimson);color:var(--on-accent)} /* --- 12. Кабинет --------------------------------------------------------- */ .empty{font-size:1.1rem;color:var(--ink-dim);margin:0;padding:22px 0} .empty a{color:var(--crimson-text)} .empty a:hover{color:var(--ink-bright)} /* --- 13. Подвал ---------------------------------------------------------- */ .footer{border-top:1px solid var(--edge);padding:56px 0 72px;margin-top:110px} .footer__note{font-size:.95rem;color:var(--ink-faint);max-width:30em;margin:0} /* --- 14. Демо-панель ----------------------------------------------------- */ .demobar{ position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--bar-h); display:flex;align-items:center;gap:10px;padding:0 18px; background:rgba(10,10,12,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-top:1px solid var(--edge-mid);overflow-x:auto; } .demobar__label{font-family:var(--text);font-style:italic;font-size:.85rem;color:var(--crimson-text);flex:none;margin-right:6px;white-space:nowrap} .demobar button, .demobar .btn-demo{ flex:none;padding:7px 13px;border:1px solid var(--edge-mid);white-space:nowrap; font-family:var(--text);font-size:.85rem;color:var(--ink-dim); transition:border-color .16s,color .16s; } .demobar button:hover, .demobar .btn-demo:hover{color:var(--ink)} .demobar button.is-on, .demobar .btn-demo.is-on{border-color:var(--crimson);color:var(--ink-bright)} .demobar .spacer{flex:1;min-width:14px} /* --- 15. Мобильный предпросмотр ------------------------------------------ */ .phone-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,10,12,.94);display:grid;place-items:center;padding:24px} .phone{width:390px;max-width:100%;height:844px;max-height:86vh;border:1px solid var(--edge-strong);border-radius:30px;overflow:hidden;background:var(--void);box-shadow:0 40px 130px rgba(10,10,12,.85)} .phone iframe{width:100%;height:100%;border:0;display:block} .phone-close{position:absolute;top:26px;right:30px;font-family:var(--text);font-size:.95rem;color:var(--ink-dim)} .phone-close:hover{color:var(--ink-bright)} /* --- 16. Адаптив --------------------------------------------------------- */ @media (max-width:1024px){ :root{--gutter:28px} /* minmax(0,…): иначе колонка не ужимается уже календаря и распирает страницу */ .booking{grid-template-columns:minmax(0,1fr)} } @media (max-width:768px){ :root{--gutter:20px} body{font-size:17px} .grid-2{grid-template-columns:1fr} .tabs{gap:22px} .card__body{padding:28px 24px 32px} .booking__cal,.booking__side{padding:28px 22px} .cal__grid{gap:6px} .cal__day{font-size:.95rem} .footer{margin-top:70px;padding:40px 0 56px} .tracery{display:none} .dropcap::first-letter{font-size:3.4em} } /* --- 17. Сетки страниц --------------------------------------------------- */ .mt-l{margin-top:44px} /* --- 18. Переключатель услуг --------------------------------------------- */ .services{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:40px 0 44px} .service{text-align:left;padding:18px 22px 20px;border:1px solid var(--edge-mid);transition:border-color .18s} .service:hover{border-color:var(--edge-strong)} .service.is-active{border-color:var(--crimson)} .service b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--ink-dim)} .service.is-active b{color:var(--ink-bright)} .service span{display:block;font-family:var(--text);font-style:italic;font-size:.9rem;color:var(--ink-faint);margin-top:6px} @media (max-width:1024px){.services{grid-template-columns:repeat(2,1fr)}} @media (max-width:768px){.services{grid-template-columns:1fr}} /* --- 19. Мелочи ---------------------------------------------------------- */ .label .sep{color:var(--ink-faint)} /* --- 20. Страница материала ---------------------------------------------- */ .article{max-width:760px;margin:0 auto} .article__body{margin-top:52px;font-size:1.14rem;line-height:1.72;color:var(--ink)} .article__body p{margin:0 0 26px} .article__body h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.1rem);color:var(--ink-bright);margin:52px 0 18px} .article__body blockquote{margin:38px 0;padding-left:26px;border-left:2px solid var(--crimson);color:var(--ink-dim);font-style:italic} /* обрыв текста и печать на закрытом материале. Гасим сам текст маской, а не накрываем его градиентом: поверх фоновых свечений непрозрачная плашка выдавала бы себя прямоугольником. */ .article__body--fade{ -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%); mask-image:linear-gradient(to bottom,#000 50%,transparent 100%); } .paywall{text-align:center;padding:0} .seal{ width:104px;height:104px;margin:0 auto 28px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 38% 32%, var(--wine-lift), var(--wine) 62%); border:1px solid var(--crimson);box-shadow:0 12px 34px rgba(90,10,28,.5); } .seal .sigil{width:52px;height:52px;color:var(--ink-bright)} /* --- 21. Видео ----------------------------------------------------------- */ .player{position:relative;aspect-ratio:16/9;background:var(--raised);border:1px solid var(--edge-mid);display:grid;place-items:center;overflow:hidden} .player::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 45%, rgba(90,10,28,.35), transparent 70%)} .player > *{position:relative;z-index:1} .player__play{position:relative;width:82px;height:82px;border-radius:50%;border:1px solid var(--edge-strong);display:grid;place-items:center;color:var(--ink);font-size:1.4rem;transition:border-color .18s,color .18s} .player__play:hover{border-color:var(--crimson);color:var(--ink-bright)} /* --- 22. Админка: формы и таблица ---------------------------------------- */ .field{margin-bottom:24px} .field > .label{display:block;margin-bottom:10px} .input{ width:100%;padding:14px 16px;background:var(--base);border:1px solid var(--edge-mid); color:var(--ink);font-family:var(--text);font-size:1.02rem; } .input:focus{outline:0;border-color:var(--crimson-text)} .fieldset{border:0;margin:0 0 18px;padding:0;min-width:0} .fieldset > legend{padding:0;margin-bottom:4px} /* --- 23. Вход, сообщения, запись ------------------------------------------ */ .messages{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px} .messages li{padding:15px 22px;border:1px solid var(--edge-mid);background:var(--raised);font-size:1.02rem} .messages li.success{border-color:rgba(165,15,60,.42)} .messages li.error{border-color:var(--crimson);color:var(--ink-bright)} .errorlist{list-style:none;margin:0 0 14px;padding:0;color:var(--crimson-text);font-size:.96rem} .helptext{display:block;margin-top:8px;color:var(--ink-faint);font-size:.9rem;line-height:1.45} .helptext ul{margin:6px 0 0;padding-left:18px} .times{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 28px} .time{padding:12px 18px;border:1px solid var(--edge-mid);font-family:var(--mono);font-size:.9rem;color:var(--ink-dim);transition:border-color .16s,color .16s} .time:hover{border-color:var(--crimson);color:var(--ink-bright)} .time.is-on{border-color:var(--crimson);color:var(--ink-bright)} .radio-list ul{list-style:none;margin:12px 0 22px;padding:0;display:flex;gap:20px} .radio-list label{display:inline-flex;align-items:center;gap:8px;font-size:1.05rem;color:var(--ink)} .cal__day.has-free{border-color:var(--edge-strong);color:var(--ink-bright)} .cal__nav{display:flex;gap:14px;align-items:center} .cal__nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim)} .cal__nav a:hover{color:var(--crimson-text)} .time{position:relative;cursor:pointer} .time input{position:absolute;opacity:0;width:0;height:0} .time:has(input:checked){border-color:var(--crimson);color:var(--ink-bright)} a.cal__day{text-decoration:none} /* RadioSelect в Django 5 отдаёт вложенные div, а не ul */ .radio-list > div{display:flex;gap:22px;flex-wrap:wrap;margin:12px 0 22px} .radio-list > div > div{display:inline-flex} .radio-list input[type=radio]{accent-color:var(--crimson)} /* --- 24. Готика: аркада, розетка, крестоцвет ------------------------------ */ /* Аркада — ряд стрельчатых арок между статьями кодекса, см. .sect + .sect */ /* Роза-окно за призывом. Крупная, полупрозрачная, не мешает тексту. */ .rosette, .compass{position:absolute;inset:0;pointer-events:none;overflow:hidden} .rosette svg, .compass svg{position:absolute;right:2%;top:50%;transform:translateY(-50%); width:min(30vw,380px);height:auto;color:var(--ink-dim);opacity:.1} .compass svg{right:-4%;width:min(26vw,320px);opacity:.09} /* Крестоцвет на вершине арки */ .arch{position:relative} .arch__finial{ position:absolute;top:-11px;left:50%;transform:translateX(-50%); width:16px;height:16px;color:var(--crimson-mark);opacity:.75;line-height:0; } .arch__finial svg{display:block;width:100%;height:100%} /* .arch path красит в цвет панели и шип — возвращаем ему свой цвет */ .arch .arch__finial path{fill:none;stroke:currentColor} .arch .arch__finial path[fill]{fill:currentColor;stroke:none} .card--lead .arch__finial{opacity:1} /* Номер ступени римской цифрой */ .numeral{ font-family:var(--serif);font-size:.52em;letter-spacing:.1em; color:var(--crimson-mark);margin-right:.6em;vertical-align:.28em; } /* ========================================================================== 25. КОДЕКС — смена жанра. Сайт читается как документ закрытого ордена, а не как лендинг: узкая полоса набора, широкое левое поле под номера и пометки, вертикальная полоса навигации вместо шапки. Симметрии и центральной оси нет нигде. ========================================================================== */ :root{ --arcade-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' fill='none' stroke='%23c9c9ce' stroke-opacity='.18'%3E%3Cpath d='M0,34 V16 A32,32 0 0 1 30,2 A32,32 0 0 1 60,16 V34'/%3E%3C/svg%3E"); --margin-col:190px; /* поле кодекса: номера статей и маргиналии */ --measure:64ch; /* полоса набора */ } /* --- Полоса набора -------------------------------------------------------- */ .page{position:relative} .codex{ display:grid;grid-template-columns:var(--margin-col) minmax(0,var(--measure)); gap:0 clamp(28px,4vw,64px); max-width:var(--shell);margin:0 auto;padding:0 var(--gutter); } .codex > *{grid-column:2} /* Контрфорс: опора на границе поля и полосы набора, книзу плотнее */ .codex{position:relative} .codex::after{ content:"";position:absolute;top:0;bottom:0;width:1px;pointer-events:none; left:calc(var(--gutter) + var(--margin-col)); background:linear-gradient(to bottom, transparent, var(--edge) 30%, var(--edge-mid)); } .codex__margin{grid-column:1;justify-self:end;text-align:right;padding-top:.5em} /* пометка на поле: номер статьи, сигил, короткая ремарка */ .marg{ font-family:var(--text);font-style:italic;font-size:.92rem; color:var(--ink-faint);line-height:1.55; } .marg b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:300; letter-spacing:.06em;color:var(--crimson-mark);line-height:1;margin-bottom:10px} .marg i{display:block;font-size:.88rem;color:var(--ink-faint);margin-top:12px;line-height:1.5;opacity:.85} /* статья кодекса */ .sect{position:relative;padding:clamp(56px,7vw,104px) 0} .sect + .sect::before{ content:"";position:absolute;left:0;right:0;top:0;height:34px; background-image:var(--arcade-tile);background-repeat:repeat-x;background-position:left bottom; pointer-events:none; } .sect__head{margin-bottom:34px} .sect__head h2{ font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:.02em; font-size:clamp(2rem,4.4vw,3.4rem);color:var(--ink-bright);margin:0; } .sect p{max-width:var(--measure)} /* --- Реестр библиотеки ---------------------------------------------------- */ .registry{border-top:1px solid var(--edge-mid)} .reg{ display:grid;grid-template-columns:6.5em minmax(0,1fr) auto; gap:0 clamp(16px,3vw,40px);align-items:baseline; padding:22px 0;border-bottom:1px solid var(--edge); } .reg__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--crimson-text)} .reg.is-locked .reg__n{color:var(--ink-faint)} .reg__title{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:400; line-height:1.25;color:var(--ink-bright);margin:0} .reg.is-locked .reg__title{color:var(--ink-dim)} .reg__meta{font-family:var(--text);font-style:italic;font-size:.9rem; color:var(--ink-faint);margin:8px 0 0} .reg__side{font-family:var(--text);font-size:.95rem; color:var(--ink-dim);white-space:nowrap;text-align:right} .reg__side a:hover{color:var(--crimson-text)} /* --- Адаптив -------------------------------------------------------------- */ @media (max-width:900px){ :root{--margin-col:0px} .burger{display:grid} /* Размытие фона превращает шапку в опорный блок для position:fixed, и выпавшее меню сжималось до высоты самой шапки. На узком экране шапка плотная без размытия — меню занимает весь экран. */ .header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,12,.98)} .nav{ position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:39;overflow-y:auto; flex-direction:column;gap:0;padding:18px 20px; background:rgba(10,10,12,.98); } .nav:not(.is-open){display:none} .nav a{padding:18px 0;font-size:1.05rem;border-bottom:1px solid var(--edge)} .header__in{gap:16px;justify-content:space-between} .user__rank{display:none} .codex{grid-template-columns:minmax(0,1fr);padding:0 20px} .codex::after{display:none} .codex > *{grid-column:1} .codex__margin{grid-column:1;justify-self:start;text-align:left;padding-top:0;margin-bottom:18px} .marg b{display:inline-block;margin:0 12px 0 0;font-size:1.6rem;vertical-align:-.1em} .reg{grid-template-columns:minmax(0,1fr);gap:10px} .reg__side{text-align:left} } /* Страницы, где содержание шире полосы набора: тарифы, календарь, реестр */ .codex--wide{--measure:960px} .codex--mid{--measure:780px} /* Ведомость — строгие строки «поле: значение» вместо трёх одинаковых плиток */ .ledger{margin:36px 0 0;border-top:1px solid var(--edge-mid)} .ledger > div{display:flex;justify-content:space-between;align-items:baseline;gap:24px; padding:14px 0;border-bottom:1px solid var(--edge)} .ledger dt{margin:0;font-family:var(--text);font-style:italic;font-size:.92rem;color:var(--ink-dim)} .ledger dd{margin:0;font-family:var(--serif);font-size:1.35rem;color:var(--ink-bright);text-align:right} /* --- 26. Знак школы и пикообразный курсор --------------------------------- */ /* Уроборос в подвале: один знак на страницу, без рамок и подложек */ .device{display:block;width:44px;margin-left:auto;color:var(--ink-faint);line-height:0} /* Курсор-копьё на всём, что нажимается. Остриё — в точке отсчёта 2 1. Запасной pointer обязателен: часть браузеров и мобильные картинку игнорируют. */ a, button, label.time, .pill, .service, .tab, .cal__day:not(.is-off):not(.is-empty){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='27'%3E%3Cpath d='M2 1.5 13.5 23 9 20.4 6.6 24.6Z' fill='%23ECECF1' stroke='%230A0A0C' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 1, pointer; } /* --- 27. Доступность ------------------------------------------------------- */ /* Видимый фокус с клавиатуры. Мышью рамка не появляется. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--crimson-text);outline-offset:3px; } .input:focus-visible{outline:none} /* Радиокнопки времени скрыты, поэтому фокус показываем на подписи */ .time:focus-within{outline:2px solid var(--crimson-text);outline-offset:2px} .time.is-on{border-color:var(--crimson);color:var(--ink-bright)} .menu__action{display:block;width:100%;text-align:left;padding:11px 20px; font-family:var(--text);font-size:.98rem;color:var(--ink-dim)} .menu__action:hover{color:var(--ink-bright);background:rgba(201,201,206,.04)} .skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px; background:var(--panel);color:var(--ink-bright);border:1px solid var(--crimson)} .skip:focus{top:12px} /* Длинные заголовки разделов на узком телефоне: «Консультации» не влезало */ @media (max-width:480px){ .title{font-size:clamp(1.9rem,9.4vw,2.8rem);letter-spacing:0;overflow-wrap:anywhere;hyphens:auto} } /* --- 28. Главная: цели и задачи, описания в реестре ------------------------ */ .hero-lead{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.55;color:var(--ink-bright);max-width:34em} .points{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)} .points__head{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.1;color:var(--ink-bright);margin:0 0 18px} .points__list{list-style:none;counter-reset:point;margin:0;padding:0;border-top:1px solid var(--edge-mid)} .points__list li{counter-increment:point;position:relative;padding:15px 0 15px 46px; border-bottom:1px solid var(--edge);line-height:1.5;color:var(--ink)} .points__list li::before{content:counter(point, upper-roman);position:absolute;left:0;top:15px; font-family:var(--serif);color:var(--crimson-mark)} .reg__desc{font-size:1rem;line-height:1.55;color:var(--ink-dim);margin:8px 0 0;max-width:46em} @media (max-width:900px){.points{grid-template-columns:1fr}} /* --- 29. Готика второго захода: шпили, первоэлементы, портрет -------------- */ :root{ /* стрела: древко, узкое остриё, двойное оперение */ --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1 5h27'/%3E%3Cpath d='M22 1.8 29 5l-7 3.2' stroke-linejoin='round'/%3E%3Cpath d='M1 2l3 3-3 3M4.5 2l3 3-3 3'/%3E%3C/svg%3E"); /* шпиль-пинакль: узкая игла на гранёном основании */ --spire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 34' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M6 .5 8.6 14H3.4Z'/%3E%3Cpath d='M3.4 14h5.2v6H3.4zM2 20h8v13.5H2z'/%3E%3Cpath d='M6 20v13.5'/%3E%3C/svg%3E"); } /* Шпиль над номером статьи на поле кодекса */ .marg b::before{ content:"";display:block;width:12px;height:34px;margin:0 0 12px auto; background:var(--crimson-mark);opacity:.55; -webkit-mask:var(--spire) center/contain no-repeat;mask:var(--spire) center/contain no-repeat; } /* Водяной уроборос за манифестом: цикл знания */ .watermark{position:absolute;inset:0;pointer-events:none;overflow:hidden} .watermark svg{position:absolute;right:3%;top:50%;transform:translateY(-50%) rotate(-18deg); width:min(30vw,360px);height:auto;color:var(--ink-dim);opacity:.08} .compass svg{opacity:.08} /* Знак металла у заголовка целей и задач */ .points__head .sigil{width:.72em;height:.72em;margin-right:.42em;vertical-align:.02em;color:var(--crimson-mark)} /* Первоэлемент на карточке услуги */ .service{position:relative} .service__el{position:absolute;top:16px;right:18px;width:15px;height:15px;color:var(--ink-faint);transition:color .18s} .service:hover .service__el{color:var(--ink-dim)} .service.is-active .service__el{color:var(--crimson-mark)} .service b{padding-right:24px} /* Основатель: вытянутая стрельчатая рамка, как окно-ланцет */ .founder{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start} .portrait{ position:relative;margin:0;width:220px;aspect-ratio:220/340;display:grid;place-items:center; background:radial-gradient(70% 55% at 50% 38%, rgba(90,10,28,.32), transparent 72%), var(--raised); clip-path:path('M0 340V118A160 160 0 0 1 110 0 160 160 0 0 1 220 118V340Z'); } /* Портрет обычно шире рамки: режем бока, а кадр держим чуть выше центра, чтобы лицо не уходило под острие арки. Лёгкое приглушение цвета сводит яркую одежду с палитрой сайта. */ .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%; filter:saturate(.7) contrast(1.05)} .portrait__mark{width:64px;height:64px;color:var(--ink-dim);opacity:.7} .portrait__frame{position:absolute;inset:0;color:var(--crimson-mark);opacity:.6;line-height:0} .portrait__frame svg{width:100%;height:100%} @media (max-width:900px){ .marg b::before{display:none} .founder{grid-template-columns:minmax(0,1fr)} .portrait{width:180px} .portrait{clip-path:path('M0 278V97A131 131 0 0 1 90 0 131 131 0 0 1 180 97V278Z')} .watermark svg{width:60vw;opacity:.05} } /* --- 30. Сенсорные экраны: цели под палец не меньше 44px ------------------ */ .reg__n{font-size:12px} .cal__nav a{font-size:12px} /* Узкий ноутбук и планшет в горизонтали: полная навигация на 901–1100px не влезала и выталкивала аватар за край на 11px */ @media (min-width:901px) and (max-width:1100px){ .header__in{gap:26px} .nav{gap:20px} .user__rank{display:none} } /* Узкий экран или любой сенсорный: планшет в горизонтали получает десктопную вёрстку, но нажимают его всё равно пальцем */ @media (max-width:900px), (pointer:coarse){ .brand{min-width:44px;min-height:44px;justify-content:flex-start} .avatar,.burger{width:44px;height:44px} .link-arrow{min-height:44px} /* ссылки внутри строки текста: область нажатия растёт, строка — нет */ .empty a,.reg__side a{display:inline-block;padding:11px 0;margin:-11px 0} .cal__nav{gap:4px} .cal__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:13px} /* радиокнопка сама 13px — нажимается вся подпись */ .radio-list label{display:inline-flex;align-items:center;gap:10px;min-height:44px} } /* Узкий телефон: календарь выходит на всю ширину, чтобы дни не мельчали */ @media (max-width:420px){ .booking__cal{margin:0 -20px;padding:26px 12px;border-left:0;border-right:0} .booking__cal .ticks{display:none} .cal__grid{gap:3px} .cal__head{padding:0 8px} } /* --- 31. Панель Председателя ---------------------------------------------- Не отдельная админка, а ещё один раздел кодекса: меню стоит на поле, списки — тот же реестр, карточки — та же ведомость. */ /* Поле панели той же ширины, что у всего сайта: иначе колонка панели не совпадала с меню в шапке на 20px. */ .mg{padding-top:clamp(40px,7vh,80px);align-items:start} .mg .codex__margin{justify-self:stretch;text-align:left;position:sticky;top:calc(var(--header-h) + 24px)} .mg .marg b::before{margin-left:0} .mg__main{min-width:0} .mg-nav{display:flex;flex-direction:column;margin-top:18px} .mg-nav__group{margin:20px 0 6px;font-family:var(--text);font-style:italic;font-size:.85rem;color:var(--ink-faint)} .mg-nav__i{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:7px 0 7px 13px;border-left:1px solid var(--edge-mid);font-size:.98rem;color:var(--ink-dim); transition:color .16s,border-color .16s} .mg-nav__i:hover{color:var(--ink-bright);border-left-color:var(--edge-strong)} .mg-nav__i.is-on{color:var(--ink-bright);border-left:2px solid var(--crimson);padding-left:12px} .mg-badge{flex:none;min-width:22px;padding:1px 7px;font-family:var(--mono);font-size:12px;line-height:1.5; text-align:center;color:var(--on-accent);background:var(--crimson)} .mg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 24px;flex-wrap:wrap;margin-bottom:30px} .mg-head > div{min-width:0} .mg-title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1.05; color:var(--ink-bright);margin:6px 0 0} .mg-sub{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--ink-bright);margin:0 0 18px} .mg-sub a:hover{color:var(--crimson-text)} .mg-lead{margin-top:12px;max-width:44em} .mg-back{display:inline-flex;align-items:center;min-height:32px;margin-bottom:14px;font-style:italic;color:var(--ink-dim)} .mg-back:hover{color:var(--crimson-text)} .reg__title a:hover{color:var(--crimson-text)} .mg-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px} .mg-tools .input{width:auto;flex:1 1 220px;padding:11px 14px} .mg-tools select.input{flex:0 1 220px} .mg-filter{margin:0 0 26px} .mg-panel{position:relative;background:var(--raised);border:1px solid var(--edge-mid);padding:28px 30px;margin-bottom:22px} .mg-form{max-width:760px} .mg-form textarea.input{resize:vertical;min-height:120px;line-height:1.6} select.input{ -webkit-appearance:none;appearance:none;padding-right:42px; background:var(--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239C9CA6' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 16px center; } .input--file{padding:11px 14px;font-size:.95rem;max-width:100%} /* «Сейчас: blocks/длинное_имя_файла.jpg» — имя без пробелов распирало форму */ .mg-form .field a{overflow-wrap:anywhere;word-break:break-all} .mg-nav__i span:first-child{min-width:0;overflow-wrap:anywhere} .helptext{display:block;margin-top:8px;font-size:.9rem;font-style:italic;color:var(--ink-faint)} .mg-check label{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;color:var(--ink)} .mg-check input,.mg-days input{accent-color:var(--crimson);width:18px;height:18px;margin:0;flex:none} .mg-days > div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .mg-days label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--edge-mid);cursor:pointer} .mg-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px} .mg-danger{margin-left:auto;min-height:44px;font-style:italic;color:var(--crimson-text)} .mg-danger:hover{color:var(--ink-bright)} .btn--danger{border-color:var(--crimson);color:var(--crimson-text)} .btn--danger:hover{background:var(--wine);color:var(--ink-bright)} .mg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:30px; border-top:1px solid var(--edge-mid);border-bottom:1px solid var(--edge-mid)} .mg-stat{padding:22px 18px;border-right:1px solid var(--edge)} .mg-stat:last-child{border-right:0} .mg-stat b{display:block;font-family:var(--serif);font-weight:400;font-size:2.6rem;line-height:1;color:var(--ink-bright)} .mg-stat span{display:block;margin-top:8px;font-style:italic;font-size:.92rem;color:var(--ink-dim)} .mg-stat:hover b{color:var(--crimson-text)} .mg-warn{display:grid;gap:10px;margin-bottom:36px} .mg-warn__i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start; padding:18px 22px;background:var(--raised);border:1px solid var(--edge-mid);border-left:2px solid var(--crimson)} .mg-warn__i .sigil{margin-top:.45em;width:9px;height:9px} .mg-warn__i b{display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--ink-bright)} .mg-warn__i span{display:block;margin-top:2px;font-size:.98rem;color:var(--ink-dim)} .mg-warn__act{white-space:nowrap;font-style:italic;color:var(--crimson-text)} .mg-warn__act:hover{color:var(--ink-bright)} .mg-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .mg-tile{display:block;padding:18px 22px;border:1px solid var(--edge-mid);transition:border-color .16s} .mg-tile:hover{border-color:var(--crimson)} .mg-tile b{display:block;margin-top:4px;font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--ink-bright)} .mg-status{display:inline-block;padding:3px 10px;border:1px solid var(--edge-strong);white-space:nowrap; font-family:var(--text);font-style:italic;font-size:.86rem;color:var(--ink-dim)} .mg-status.is-new,.mg-status.is-waiting{border-color:var(--crimson);color:var(--crimson-text)} .mg-status.is-paid,.mg-status.is-passed,.mg-status.is-done{border-color:var(--edge-strong);color:var(--ink-bright)} .mg-status.is-cancelled,.mg-status.is-failed{border-color:var(--edge);color:var(--ink-faint)} .mg-day{display:grid;grid-template-columns:10em minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--edge)} .mg-day:first-of-type{border-top:1px solid var(--edge-mid)} .mg-day__d{margin:0;font-family:var(--serif);font-size:1.15rem;line-height:1.2;color:var(--ink-bright)} .mg-day__d i{display:block;margin-top:4px;font-family:var(--text);font-size:.85rem;color:var(--ink-faint)} .mg-slots{display:flex;flex-wrap:wrap;gap:8px} .mg-slot{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 14px;border:1px solid var(--edge-mid)} .mg-slot .num{font-family:var(--mono);font-size:.95rem;color:var(--ink-bright);margin-right:4px} .mg-slot.is-closed{border-style:dashed} .mg-slot.is-closed .num{color:var(--ink-faint);text-decoration:line-through} .mg-slot.is-taken{border-color:var(--crimson)} .mg-slot form{display:inline-flex} .mg-mini{display:inline-flex;align-items:center;min-height:36px;padding:0 10px; font-family:var(--text);font-size:.88rem;font-style:italic;color:var(--ink-dim)} .mg-mini:hover{color:var(--crimson-text)} .mg-pages{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;font-style:italic;color:var(--ink-dim)} .mg-pages a{display:inline-flex;align-items:center;min-height:44px;color:var(--crimson-text)} .mg-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .mg-grid2 > .mg-panel{margin-bottom:0} @media (max-width:1100px){ .mg-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .mg-stat:nth-child(2){border-right:0} .mg-stat:nth-child(-n+2){border-bottom:1px solid var(--edge)} .mg-grid2{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ .mg .codex__margin{position:static;margin-bottom:22px} .mg .marg{display:none} .mg-nav{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none} .mg-nav::-webkit-scrollbar{display:none} .mg-nav__group{display:none} .mg-nav__i,.mg-nav__i.is-on{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--edge-mid);white-space:nowrap} .mg-nav__i.is-on{border-color:var(--crimson)} .mg-warn__i{grid-template-columns:auto minmax(0,1fr)} .mg-warn__act{grid-column:2;min-height:36px;display:inline-flex;align-items:center} .mg-day{grid-template-columns:minmax(0,1fr);gap:10px} .mg-panel{padding:22px 18px} .mg-mini{min-height:44px} .mg-danger{margin-left:0} } /* ========================================================================== 32. НАБОР. Дорогое впечатление держится не на модной гарнитуре, а на мелочах набора: кернинг и лигатуры, выровненные строки заголовков, табличные цифры, висячие кавычки, неразрывные пробелы (их ставит фильтр typo на сервере), одна шкала размеров вместо случайных значений. Гарнитуры прежние: Old Standard в заголовках, Literata в тексте. ========================================================================== */ :root{ /* Моноширинного больше нет: цифры — табличные цифры основного шрифта */ --mono:var(--text); /* Шкала размеров, отношение около 1,25. Всё, что крупнее абзаца, плавно тянется от телефона к монитору. */ --fs-micro:.8125rem; /* 13 */ --fs-small:.9375rem; /* 15 */ --fs-body:1.0625rem; /* 17 */ --fs-lead:clamp(1.1875rem,1.7vw,1.375rem); /* 19–22 */ --fs-h4:clamp(1.25rem,1.9vw,1.5rem); /* 20–24 */ --fs-h3:clamp(1.5rem,2.6vw,2rem); /* 24–32 */ --fs-h2:clamp(2.125rem,4.4vw,3.5rem); /* 34–56 */ --fs-h1:clamp(2.75rem,7.2vw,6rem); /* 44–96 */ --fs-display:clamp(3.5rem,10.5vw,9.5rem); /* 56–152 */ --ease:cubic-bezier(.2,.7,.2,1); } /* --- Отрисовка шрифта ------------------------------------------------------ */ body{ font-size:var(--fs-body); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;font-kerning:normal; font-variant-ligatures:common-ligatures contextual;font-optical-sizing:auto; } /* Заголовки ломаются ровными строками, абзацы не оставляют слово-сироту */ h1,h2,h3,.display,.title,.card__title,.reg__title,.points__head,.mg-title,.mg-sub{text-wrap:balance} p,li,dd,blockquote{text-wrap:pretty} /* Цифры: в тексте пропорциональные, в столбцах, датах и ценах — табличные */ .reg__n,.time,.cal__day,.cal__nav a,.mg-badge,.mg-stat b,.mg-slot .num, .ledger dd,.card__price b,.num{font-variant-numeric:lining-nums tabular-nums} /* --- Заголовки -------------------------------------------------------------- */ .display{ font-size:var(--fs-display);line-height:.86;letter-spacing:.03em; /* заглавные набраны с чуть большей разрядкой: в крупном кегле буквы слипаются */ } .title{font-size:var(--fs-h1);line-height:.92;letter-spacing:.035em} .title--case{letter-spacing:.005em;line-height:1.02} .sect__head{margin-bottom:38px} .sect__head h2{font-weight:400;font-size:var(--fs-h2);line-height:1.04;letter-spacing:.004em} .card__title{font-size:clamp(2.1rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:.004em} .points__head{font-size:var(--fs-h3);letter-spacing:.004em} .reg__title{font-size:var(--fs-h4);line-height:1.22;letter-spacing:.004em} .mg-title{font-size:clamp(2.1rem,4vw,3.2rem);letter-spacing:.004em} /* --- Текст ------------------------------------------------------------------ */ .prose{font-size:1.125rem;line-height:1.68} .prose p{margin:0 0 1.05em} .hero-lead{font-size:var(--fs-lead);line-height:1.5;letter-spacing:.002em} .reg__desc{font-size:var(--fs-small);line-height:1.6} .reg__meta,.marg,.label,.ledger dt,.helptext,.footer__note{letter-spacing:.005em} .reg__meta{font-size:var(--fs-small)} .marg{font-size:var(--fs-small)} .marg i{font-size:var(--fs-micro);line-height:1.55} .label{font-size:var(--fs-small)} /* Ссылки внутри текста: тонкое подчёркивание с отступом, а не жирная черта */ .prose a,.empty a,.notice a{ color:var(--ink-bright);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.24em;text-decoration-color:rgba(209,31,74,.55); transition:color .2s var(--ease),text-decoration-color .2s var(--ease); } .prose a:hover,.empty a:hover,.notice a:hover{color:var(--crimson-text);text-decoration-color:currentColor} /* Цитата: курсив антиквы и висячая открывающая кавычка на поле */ .prose blockquote,.article__body blockquote{ position:relative;margin:1.6em 0;padding:0 0 0 1.05em;border:0; font-family:var(--serif);font-style:italic;font-size:1.3em;line-height:1.42;color:var(--ink-bright); } .prose blockquote::before,.article__body blockquote::before{ content:"«";position:absolute;left:-.12em;top:-.08em; font-size:1.9em;line-height:1;color:var(--crimson-mark); } @media (max-width:600px){ .prose,.article__body{hyphens:auto;-webkit-hyphens:auto} } /* Буквица на три строки. Где браузер умеет initial-letter, кегль и выравнивание по базовым линиям считает он сам — это точнее float. */ .dropcap::first-letter{padding-right:.04em} @supports (initial-letter:3) or (-webkit-initial-letter:3){ .dropcap::first-letter{ float:none;margin:0 .14em 0 0;font-size:inherit;line-height:inherit; -webkit-initial-letter:3;initial-letter:3; } } /* --- Знаки ------------------------------------------------------------------ */ /* Разделитель в строке: точка по центру, светлее текста */ .sep{color:var(--ink-faint);opacity:.75} /* Знак рубля чуть легче цифр, как в хорошем прейскуранте */ .rub{font-family:var(--text);font-size:.72em;font-weight:400;margin-left:.08em;color:var(--ink-dim);vertical-align:.08em} .btn .rub{font-size:.9em;color:inherit;vertical-align:0} /* Маркер пункта: тонкий ромб-контур вместо залитого ◆ */ .feats li{padding-left:26px} .feats li::before{ content:"";top:.6em;left:3px;width:6px;height:6px;font-size:0; border:1px solid var(--crimson-mark);transform:rotate(45deg); } /* Стрела после ссылки и перед ссылкой «назад» — тот же знак, что у .link-arrow */ .go,.back{display:inline-flex;align-items:center;gap:.55em;transition:color .2s var(--ease)} .go::after,.back::before{ content:"";flex:none;width:24px;height:8px;background:currentColor; -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat; transition:transform .25s var(--ease); } .back::before{transform:scaleX(-1)} .go:hover::after{transform:translateX(3px)} .back:hover::before{transform:scaleX(-1) translateX(3px)} .go:hover,.back:hover{color:var(--crimson-text)} /* Разрядка досталась от моноширинного. Строчные в разрядку выглядят рыхло, поэтому ссылки календаря — курсивом, номера реестра — почти без разрядки. */ .cal__nav a{letter-spacing:.01em;font-style:italic;font-size:var(--fs-small)} .reg__n{letter-spacing:.04em;font-size:var(--fs-micro)} /* Номер статьи на поле: цифры антиквы, знак § легче */ .marg b{font-weight:400;letter-spacing:.04em} .nav .n{font-size:.8em;letter-spacing:.04em;vertical-align:.06em;opacity:.9} /* --- Цены ------------------------------------------------------------------- */ .card__price{gap:14px;margin:24px 0 32px} .card__price b{font-size:clamp(2.2rem,3.4vw,2.8rem);line-height:1;letter-spacing:.005em} .card__price span{font-size:var(--fs-small)} .ledger dd{font-size:clamp(1.25rem,1.8vw,1.45rem);letter-spacing:.004em} /* --- Кнопки ----------------------------------------------------------------- */ .btn{ min-height:52px;padding:14px 30px;font-weight:500;letter-spacing:.012em; transition:border-color .22s var(--ease),color .22s var(--ease),background-color .22s var(--ease); } .btn--fill{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} .link-arrow{font-size:1rem;letter-spacing:.005em} /* --- Шапка: знак и словесный знак -------------------------------------------- */ .brand{gap:12px;font-family:var(--serif);font-size:1.3rem;font-weight:400; letter-spacing:.012em;text-transform:none;line-height:1} .brand__word{color:var(--ink-bright);transition:color .2s var(--ease)} .brand:hover .brand__word{color:var(--crimson-text)} .nav a{letter-spacing:.005em} /* --- Подвал: колофон ------------------------------------------------------------ */ .footer{padding:64px 0 76px} .colophon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 40px;align-items:start} .colophon__mark{display:flex;align-items:center;gap:14px;color:var(--ink-bright); font-family:var(--serif);font-size:1.5rem;line-height:1} .colophon__mark .logo{width:44px;color:var(--ink-dim)} .colophon__nav{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none} .colophon__nav a{font-size:var(--fs-small);color:var(--ink-dim);transition:color .2s var(--ease)} .colophon__nav a:hover{color:var(--ink-bright)} .colophon__nav .n{font-family:var(--serif);color:var(--crimson-text);margin-right:.45em;font-size:.85em} .colophon__year{font-family:var(--serif);font-size:1rem;letter-spacing:.05em;color:var(--ink-faint);white-space:nowrap} .colophon .footer__note{grid-column:2 / -1;max-width:36em} @media (max-width:900px){ .colophon{grid-template-columns:minmax(0,1fr)} .colophon .footer__note{grid-column:auto} } @media (max-width:360px){ .brand{font-size:1.15rem} } /* ========================================================================== 33. ГЛУБИНА И ГЕОМЕТРИЯ. Отзыв заказчика: «плоско, слишком много чёрного». Глубина даётся архитектурой, а не свечениями: светлее под сводом, полосы-нефы чередуют тон, поверхности приподняты светом по кромке и тенью, за титулом — перспектива уходящих арок. ========================================================================== */ :root{ /* приподнятая поверхность: блик по верхней кромке и тень, уходящая вниз */ --lift:inset 0 1px 0 rgba(236,236,241,.05), 0 1px 0 rgba(0,0,0,.55), 0 30px 60px -36px rgba(0,0,0,.95); /* узел: линия и ромб на конце */ --rule-node:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 9' fill='none' stroke='%23000'%3E%3Cpath d='M0 4.5h60'/%3E%3Cpath d='M66 1l3.5 3.5L66 8l-3.5-3.5z'/%3E%3C/svg%3E"); } /* Под сводом светлее: тон страницы поднимается к верху экрана */ .backdrop{background:linear-gradient(180deg,#18181E 0,#121217 38%,var(--void) 85%)} .header{background:rgba(16,16,21,.84)} /* на узком экране размытия нет — шапка плотная, иначе текст просвечивает */ @media (max-width:900px){.header{background:rgba(16,16,21,.98)}} /* Полоса-неф: секция на тон светлее, во всю ширину экрана */ .sect--band{ background:var(--base); box-shadow:0 0 0 100vmax var(--base); clip-path:inset(0 -100vmax); } /* Линия с ромбом-узлом под заголовком раздела */ .sect__head::after{ content:"";display:block;width:72px;height:9px;margin-top:24px; background:var(--crimson-mark);opacity:.7; -webkit-mask:var(--rule-node) left center/contain no-repeat;mask:var(--rule-node) left center/contain no-repeat; } /* Поверхности приподняты над фоном */ .card__body,.booking__cal,.booking__side,.mg-panel{ background:linear-gradient(180deg,var(--panel) 0,var(--raised) 72%); box-shadow:var(--lift); } .arch path{fill:var(--panel)} .notice,.messages li,.menu,.mg-warn__i{box-shadow:var(--lift)} /* выделенная ступень: панель с примесью бордо из палитры, а не фиолетового */ .card--lead .card__body{background:linear-gradient(180deg,#271B23 0,var(--raised) 72%)} .card--lead .arch path{fill:#271B23} @media (hover:hover){ .card{transition:transform .4s var(--ease)} .card:hover{transform:translateY(-4px)} .reg{transition:background-color .25s var(--ease),box-shadow .25s var(--ease)} .reg:hover{background:rgba(201,201,206,.025);box-shadow:-18px 0 0 rgba(201,201,206,.025),18px 0 0 rgba(201,201,206,.025)} } /* Неф за титулом: арки уходят вглубь справа от заголовка */ .nave{position:absolute;inset:0;pointer-events:none;overflow:hidden} .nave svg{position:absolute;right:max(2%,calc(50% - 680px));top:4%;height:92%;width:auto;max-width:56vw; color:var(--ink-dim);opacity:.2} .nave .nave__core{stroke:var(--crimson-mark);opacity:.9} @media (max-width:900px){ .nave svg{right:-34%;top:auto;bottom:0;height:78%;max-width:none;opacity:.1} } /* Симметрия на поле: шпиль ровно над серединой номера статьи */ .marg b{ display:flex;flex-direction:column;align-items:center; width:max-content;margin-left:auto;margin-right:-.04em; /* разрядка оставляет хвост справа */ } .marg b::before{margin:0 0 12px} .mg .marg b{margin-left:0} @media (max-width:900px){ .marg b{display:inline-block;width:auto;margin:0 12px 0 0} } /* ========================================================================== 34. ОСИ. Всё, что стоит на поле и в списках, выравнивается по общим осям, а не «на глаз»: замеры показали текст впритык к контрфорсу и номера пунктов в 12px от центра знака над ними. ========================================================================== */ /* Контрфорс ровно посередине промежутка между полем и колонкой: слева до текста и справа до содержимого одинаковое расстояние. */ .codex{--gap:clamp(28px,4vw,64px);gap:0 var(--gap)} .codex::after{left:calc(var(--gutter) + var(--margin-col) + var(--gap) / 2)} /* Статья кодекса задавала отступы сокращённой записью «padding: N 0» и тем обнуляла боковые поля. Контрфорс же отсчитывал их от var(--gutter) и уезжал на 40px внутрь колонки. На телефоне, наоборот, «padding: 0 20px» у .codex обнулял вертикальные отступы статей. Задаём оси раздельно. */ .sect{padding-inline:var(--gutter)} @media (max-width:900px){ .sect{padding-inline:20px;padding-block:clamp(48px,13vw,72px)} } /* Номер главы прямой, как шпиль над ним. Курсивом остаётся только подпись. */ .marg b{font-style:normal} /* Цели и задачи: знак, номера пунктов и ось стоят на одной вертикали. Центр знака (точка в круге), центры номеров и линия совпадают. */ .points{--axis:30px} .points__head{display:grid;grid-template-columns:var(--axis) minmax(0,1fr);column-gap:16px;align-items:center} .points__head .sigil{justify-self:center;width:22px;height:22px;margin:0;vertical-align:0} .points__list{position:relative} .points__list::before{ content:"";position:absolute;top:0;bottom:0;left:calc(var(--axis) / 2);width:1px; background:linear-gradient(to bottom,rgba(209,31,74,.45),rgba(209,31,74,.12)); } .points__list li{padding-left:calc(var(--axis) + 16px)} .points__list li::before{ left:0;width:var(--axis);text-align:center;line-height:1.5; top:13px; } /* Ось рисуется отрезками между номерами, а не сплошной линией под подложкой: полоса полупрозрачна, и подложка проступала бы плашкой вокруг номера. */ .points__list::before{top:0;bottom:auto;height:9px} .points__list li::after{ content:"";position:absolute;left:calc(var(--axis) / 2);top:44px;bottom:-9px;width:1px; background:linear-gradient(to bottom,rgba(209,31,74,.4),rgba(209,31,74,.14)); } .points__list li:last-child::after{bottom:0;background:linear-gradient(to bottom,rgba(209,31,74,.3),transparent)} /* ========================================================================== 35. ФОН И СЕТКА. Исходная палитра — графит, почти-чёрный, бордо, малина. Под страницей неподвижное построение золотого сечения; шапка и подвал встают на ту же сетку, что и статьи кодекса. ========================================================================== */ :root{--gap:clamp(28px,4vw,64px)} /* Сверху графитовый серый, книзу почти-чёрный, у горизонта дымка бордо */ .backdrop{ background: radial-gradient(120% 60% at 50% 115%,rgba(90,10,28,.34),transparent 62%), linear-gradient(180deg,#1B1B21 0%,#131317 42%,#0A0A0C 100%); } .backdrop::after{z-index:1} /* Стена нефа: камень едва виден, роза-окно малиной, замковые камни бордо. Линии не толстеют при масштабе — на любом экране это волосяная линия. */ .gothic{position:absolute;inset:0;width:100%;height:100%} .gothic path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke} .gothic__stone{stroke:rgba(201,201,206,.075)} .gothic__rose{stroke:rgba(165,15,60,.42)} .gothic__boss circle{fill:#5A0A1C;opacity:.9} /* своды светлее, к аркаде камень уходит в тень — как свет из верхних окон */ .gothic{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 55%,rgba(0,0,0,.45) 100%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 55%,rgba(0,0,0,.45) 100%)} @media (max-width:900px){ .gothic__stone{stroke:rgba(201,201,206,.06)} .gothic__rose{stroke:rgba(165,15,60,.34)} } /* Полосы-нефы полупрозрачные: построение проступает сквозь них */ .sect--band{ background:rgba(28,28,35,.55); box-shadow:0 0 0 100vmax rgba(28,28,35,.55); } /* Шапка на сетке кодекса: знак стоит на поле, оглавление начинается ровно с левого края колонки текста. */ @media (min-width:901px){ .header__in{ display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr) auto; column-gap:var(--gap);align-items:center;gap:0 var(--gap); } .brand{justify-self:end} } /* Подвал на той же сетке */ .codex.colophon{grid-template-columns:var(--margin-col) minmax(0,var(--measure));align-items:start} .colophon .codex__margin{padding-top:0} .colophon__mark{justify-content:flex-end} .colophon__body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 32px;align-items:baseline} .colophon__body .footer__note{grid-column:1 / -1;max-width:36em} @media (max-width:900px){ .colophon__mark{justify-content:flex-start} .colophon__body{grid-template-columns:minmax(0,1fr)} } /* Карточки тарифов: кнопки на одной линии по низу при разной длине списка */ .card__body{display:flex;flex-direction:column} .card__body > form:last-child,.card__body > .btn:last-child{margin-top:auto} /* Единые отступы первого и последнего раздела страницы. Раньше у каждой страницы было своё значение прямо в разметке, и заголовки разделов стояли на разной высоте от шапки. */ .codex--first{padding-top:clamp(64px,11vh,128px)} .codex--last{padding-bottom:clamp(64px,10vh,120px)} .codex--hero{padding-top:clamp(72px,13vh,152px)} /* Узкий ноутбук и планшет в горизонтали: поле кодекса уже, меню плотнее. Поле сужается и у шапки, и у статей, поэтому выравнивание сохраняется. */ @media (min-width:901px) and (max-width:1100px){ :root{--margin-col:150px} .nav{gap:18px} .nav .n{margin-right:.4em} .brand .brand__word{font-size:1.15rem} /* Меню панели в узкое поле не помещается: пункты переносились на две строки. На этих ширинах оно встаёт строкой над колонкой и начинается ровно с её левого края. */ .mg .codex__margin{grid-column:1 / -1;position:static;justify-self:stretch; margin-bottom:24px;padding-left:calc(var(--margin-col) + var(--gap))} .mg .marg{display:none} .mg-nav{flex-direction:row;flex-wrap:wrap;gap:8px;margin:0} .mg-nav__group{display:none} .mg-nav__i,.mg-nav__i.is-on{flex:none;min-height:40px;padding:0 12px; border:1px solid var(--edge-mid);white-space:nowrap;font-size:.9rem} .mg-nav__i.is-on{border-color:var(--crimson)} } @media (min-width:901px) and (max-width:1000px){ .nav{gap:13px} .nav a{font-size:.95rem} } /* Заголовок раздела всегда одной строкой и не шире своей колонки. Раньше на телефоне слово рвалось посреди («БИБЛИОТЕК / А»), а на мониторе «Библиотека» выступала за колонку. Кегль подобран так, чтобы самое длинное слово — «Консультации» — помещалось целиком. */ :root{--fs-h1:clamp(2.75rem,6.1vw,5rem)} @media (max-width:480px){ .title{font-size:clamp(1.7rem,8.1vw,2.6rem);letter-spacing:.012em;overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual} .title--case{overflow-wrap:break-word} } /* ========================================================================== 36. ГОТИЧЕСКИЙ НАБОР. Noto Serif Display с осью ширины: чем крупнее надпись, тем уже и выше литеры — вертикаль собора вместо завитушек. Три ступени ширины: надписи 62,5 %, заголовки 72 %, мелкие антиквенные строки 86 %. Текст по-прежнему Literata. ========================================================================== */ :root{ --serif:'Noto Serif Display','Old Standard TT',Georgia,'Times New Roman',serif; --w-inscr:62.5%; /* надпись: титул, заголовок страницы, номера глав, буквица */ --w-head:72%; /* заголовки разделов, карточек, списков */ --w-line:86%; /* строки антиквой в мелком кегле: реестр, ведомость, цены */ --fs-display:clamp(4.75rem,21vw,13rem); --fs-h1:clamp(3.25rem,9vw,7.5rem); --fs-h2:clamp(2.5rem,5.4vw,4.4rem); --fs-h3:clamp(1.9rem,3.2vw,2.6rem); --fs-h4:clamp(1.4rem,2.1vw,1.75rem); } /* Надписи: узкие прописные, строки почти смыкаются, как в резьбе по камню */ .display{ font-stretch:var(--w-inscr);font-weight:500; font-size:var(--fs-display);line-height:.8;letter-spacing:.012em; } .title{font-stretch:var(--w-inscr);font-weight:500;font-size:var(--fs-h1);line-height:.86;letter-spacing:.02em} .title--case{font-stretch:var(--w-head);font-weight:450;letter-spacing:0;line-height:1} /* Заголовки разделов: чуть шире, чтобы строчные читались, но та же вертикаль */ .sect__head h2,.mg-title{font-stretch:var(--w-head);font-weight:450;line-height:.98;letter-spacing:-.004em} .sect__head h2{font-size:var(--fs-h2)} .card__title,.points__head{font-stretch:var(--w-head);font-weight:500;letter-spacing:-.002em} .card__title{font-size:clamp(2.4rem,3.6vw,3.3rem);line-height:.95} .points__head{font-size:var(--fs-h3);line-height:1} .prose h2,.article__body h2{font-stretch:var(--w-head);font-weight:500;letter-spacing:-.002em;line-height:1.02} /* Строки антиквой в мелком кегле */ .reg__title,.mg-sub,.service b,.menu__rank,.mg-day__d,.mg-warn__i b,.mg-tile b,.colophon__mark,.brand{ font-stretch:var(--w-line);font-weight:500; } .reg__title{font-size:var(--fs-h4);line-height:1.15} .brand{font-size:1.4rem;letter-spacing:.01em} .colophon__mark{font-size:1.6rem} /* Номера глав и знак параграфа: высокие узкие цифры малиной */ .marg b{font-stretch:var(--w-inscr);font-weight:400;font-size:2.9rem;letter-spacing:.02em;line-height:.9} .marg b{margin-right:-.02em} .nav .n,.colophon__nav .n{font-stretch:var(--w-inscr);font-weight:500;font-size:1em;letter-spacing:.02em} .numeral{font-stretch:var(--w-inscr);font-weight:500;font-size:.5em} .points__list li::before{font-stretch:var(--w-inscr);font-weight:500;font-size:1.2rem} .colophon__year{font-stretch:var(--w-inscr);font-weight:500;font-size:1.15rem;letter-spacing:.08em} @media (max-width:900px){ .marg b{font-size:2.2rem} } /* Цены и суммы: узкие крупные цифры */ .card__price b{font-stretch:var(--w-head);font-weight:500;font-size:clamp(2.8rem,4vw,3.4rem);letter-spacing:-.005em} .ledger dd{font-stretch:var(--w-line);font-weight:500} .mg-stat b{font-stretch:var(--w-inscr);font-weight:500;font-size:3.4rem} /* Буквица: тяжёлая узкая литера малиной на три строки */ .dropcap::first-letter{font-stretch:var(--w-inscr);font-weight:700;color:var(--crimson-mark)} /* Цитата: настоящий курсив антиквы, а не наклонённый прямой */ .prose blockquote,.article__body blockquote{font-stretch:var(--w-line);font-weight:400;font-size:1.45em;line-height:1.3} .prose blockquote::before,.article__body blockquote::before{font-stretch:var(--w-inscr);font-weight:600} /* Телефон: надписи узкие, поэтому кегль можно держать крупным */ @media (max-width:480px){ .title{font-size:clamp(2.4rem,12vw,3.6rem);letter-spacing:.015em} .display{line-height:.82} } /* Заголовок страницы считает кегль от ширины своей колонки, а не экрана: у «Библиотеки» колонка узкая, и слово выступало за неё на 70px. Мерка — самое длинное слово «Консультации»: ему нужно 13,2 % ширины колонки на кегль, чтобы стоять целиком. */ .title{font-size:min(var(--fs-h1),5rem)} @supports (container-type:inline-size){ .codex > div:has(> .title){container-type:inline-size} .title{font-size:min(var(--fs-h1),13.2cqi)} } .sect__head h2{overflow-wrap:break-word} /* Номер главы на поле: одиночная «I» в самом узком начертании превращалась в палку без засечек. Чуть шире и плотнее — засечки видны, вертикаль та же. */ .marg b{font-stretch:var(--w-head);font-weight:500} /* Узкий телефон: словесный знак в новом шрифте выталкивал кабинет и меню за край. Старое правило для 360px перекрывалось слоем 36 — повторяем здесь. */ @media (max-width:380px){ .brand{font-size:1.18rem;gap:9px} .brand .logo{width:30px} .header__in{gap:10px} .user{gap:8px} } /* Римский номер ступени перед названием: узкий, но не тоньше черты */ .numeral{font-size:.66em;letter-spacing:.04em;vertical-align:.18em;margin-right:.42em} /* ========================================================================== 37. РИТМ. Одна шкала вертикальных отступов на весь сайт. Замер показал: от шапки до начала страницы 131–141px на мониторе и до 248px на телефоне, между разделами 208px пустоты, перед подвалом около 280px, а в титуле промежутки 15/44/18/46px без всякой системы. Шкала: 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80. ========================================================================== */ :root{ --r-top:clamp(40px,6vh,64px); /* шапка → начало страницы */ --r-sect:clamp(56px,5vw,80px); /* поле раздела сверху и снизу */ --r-foot:48px; /* последний раздел → подвал */ } /* Начало страницы близко к шапке: страница начинается сразу, а не «где-то внизу» */ .codex--hero,.codex--first{padding-top:var(--r-top)} /* У заголовка страницы строка ниже кегля (0,86), и крупные литеры выступают над рамкой строки: видимый зазор до шапки получался 24–46px против 53px на главной. Добавляем разницу, чтобы начало всех страниц было на одной высоте. */ .codex--first{padding-top:calc(var(--r-top) + 22px)} @media (max-width:900px){.codex--first{padding-top:var(--r-top)}} .codex--last{padding-bottom:var(--r-sect)} /* Первый раздел, за которым не идёт его продолжение, закрывается полем: иначе кнопки титула упирались в границу следующей полосы (0px), а страницы входа кончались в 24px от подвала. */ .codex--hero,.codex--first{padding-bottom:var(--r-sect)} .codex--first:has(+ .codex--last){padding-bottom:0} /* Ревизия «впритык»: промежутки между соседними кнопками и полями — по шкале, не меньше 12px по вертикали и 8px по горизонтали. */ .pills,.times{gap:12px} .cal__nav{gap:16px} .mg-tools{gap:12px} .mg-slot{gap:8px} .mg-panel .mg-sub,.mg-panel .mg-sub a{overflow-wrap:anywhere} /* Ведомость: длинная почта в значении переносится, а не выходит за экран */ .ledger dt{flex:none} .ledger dd{min-width:0;overflow-wrap:anywhere} @media (max-width:900px),(pointer:coarse){.cal__nav{gap:12px}} /* «Уже есть? Войти» — отдельная строка под формой, а не хвост кнопки */ .auth-alt{margin-top:32px;padding:24px 0 0;border-top:1px solid var(--edge-mid);font-size:var(--fs-small)} .sect{padding-block:var(--r-sect)} /* Титул: надзаголовок 20 · слово 40 · вводный текст 16 · пояснение 40 · кнопки */ .codex--hero .label{margin:0 0 20px} .hero-lead{margin-top:40px} .hero-extra{margin-top:16px} .hero-actions{display:flex;gap:16px 32px;align-items:center;flex-wrap:wrap;margin-top:40px} /* Заголовок раздела: строка 20 · узел 32 · содержимое */ .sect__head{margin-bottom:32px} .sect__head::after{margin-top:20px} .title + .pills,.title + .tabs,.title + .services,.title + .ledger{margin-top:32px!important} /* Подвал: одинаковое расстояние после любого последнего раздела */ .footer{margin-top:var(--r-foot);padding:56px 0 64px} /* Роза фона приглушена: её линии проходили прямо под буквами титула */ .gothic__rose{stroke:rgba(165,15,60,.26)} @media (max-width:900px){ :root{--r-top:28px;--r-sect:44px;--r-foot:24px} /* Поле кодекса на телефоне — одна строка: номер и подпись рядом, пояснение курсивом ниже. Раньше это был столбик из трёх строк. */ .codex__margin{margin-bottom:16px} .marg br{display:none} .marg b{vertical-align:-.12em} .marg i{margin-top:6px} .hero-lead{margin-top:28px} .hero-actions{margin-top:32px} .footer{padding:40px 0 48px} } /* ========================================================================== 38. УСТАВ. Длинный документ набран как кодекс: оглавление, номера статей на своей оси, противопоставления крупными номерами, ступени с ритуалом, правами и обязанностями, обет курсивом антиквы. ========================================================================== */ .codex[id],.stupen[id]{scroll-margin-top:calc(var(--header-h) + 16px)} .charter-link{margin-top:40px} .charter-sub{margin:16px 0 0;font-family:var(--serif);font-stretch:var(--w-head);font-weight:450; font-size:var(--fs-h3);line-height:1.05;color:var(--ink-bright);text-wrap:balance} .charter-toc{margin-top:40px;border-top:1px solid var(--edge-mid)} .charter-toc ol{list-style:none;margin:0;padding:0} .charter-toc a{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 16px;align-items:baseline; padding:14px 0;border-bottom:1px solid var(--edge);font-family:var(--serif);font-stretch:var(--w-line); font-weight:500;font-size:var(--fs-h4);line-height:1.2;color:var(--ink);transition:color .2s var(--ease)} .charter-toc a:hover{color:var(--crimson-text)} .charter-toc__n{font-stretch:var(--w-inscr);color:var(--crimson-mark);font-size:1.1em} .charter p{margin:0} .charter__para{margin:0 0 24px;font-size:1.125rem;line-height:1.68;color:var(--ink)} /* Статьи: номер на своей оси слева, текст по одной вертикали */ .clauses{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:28px} .clauses > li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:0 20px;align-items:baseline} .clauses__n{font-family:var(--serif);font-stretch:var(--w-head);font-weight:500;font-size:1.25rem; color:var(--crimson-mark);font-variant-numeric:lining-nums tabular-nums} .clauses p,.principles p{font-size:1.125rem;line-height:1.68;color:var(--ink)} .clauses__name{margin:0 0 10px;font-family:var(--serif);font-stretch:var(--w-line);font-weight:500; font-size:var(--fs-h4);line-height:1.2;color:var(--ink-bright);text-wrap:balance} /* Шесть противопоставлений: крупный номер и имя, как главы */ .opposition{list-style:none;margin:8px 0 40px;padding:0;border-top:1px solid var(--edge-mid)} .opposition > li{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:0 24px;padding:28px 0;border-bottom:1px solid var(--edge)} .opposition__n{font-family:var(--serif);font-stretch:var(--w-inscr);font-weight:500;font-size:3.2rem;line-height:.9;color:var(--crimson-mark)} .opposition__name{margin:0 0 12px;font-family:var(--serif);font-stretch:var(--w-head);font-weight:500; font-size:var(--fs-h3);line-height:1;color:var(--ink-bright)} .opposition p{font-size:1.0625rem;line-height:1.68;color:var(--ink)} .charter__goal{margin:0;padding:6px 0 6px 22px;border-left:2px solid var(--crimson); font-family:var(--serif);font-stretch:var(--w-line);font-weight:450;font-size:var(--fs-h4);line-height:1.35;color:var(--ink-bright)} /* Принципы: ромб-узел, имя принципа, толкование */ .principles{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge-mid)} .principles > li{position:relative;padding:24px 0 24px 28px;border-bottom:1px solid var(--edge)} .principles > li::before{content:"";position:absolute;left:3px;top:33px;width:7px;height:7px; border:1px solid var(--crimson-mark);transform:rotate(45deg)} /* Иерархия ступеней: ведомость «имя — суть» */ .ranks{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--edge-mid)} .ranks > li{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:4px 24px;align-items:baseline; padding:16px 0;border-bottom:1px solid var(--edge)} .ranks b{font-family:var(--serif);font-stretch:var(--w-head);font-weight:500;font-size:var(--fs-h4);color:var(--ink-bright)} .ranks span{font-style:italic;color:var(--ink-dim)} .stupen{margin-top:56px;padding-top:40px;border-top:1px solid var(--edge-mid)} .stupen header{margin-bottom:28px} .stupen__title{margin:6px 0 0;font-family:var(--serif);font-stretch:var(--w-inscr);font-weight:500; font-size:clamp(2.6rem,5vw,3.8rem);line-height:.92;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-bright)} .stupen__epigraph{margin:18px 0 0;padding-left:18px;border-left:1px solid var(--crimson-mark); font-style:italic;font-size:1.0625rem;line-height:1.6;color:var(--ink-dim);max-width:44em} .stupen__sub{margin:36px 0 16px;font-family:var(--serif);font-stretch:var(--w-line);font-weight:500; font-size:var(--fs-h4);line-height:1.2;color:var(--ink-bright)} .stupen__lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px} /* Ритуал перехода: четыре акта */ .acts{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge-mid)} .act{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 20px;padding:28px 0;border-bottom:1px solid var(--edge)} .act__n{font-family:var(--serif);font-stretch:var(--w-inscr);font-weight:500;font-size:2.6rem;line-height:.9;color:var(--crimson-mark)} .act__name{margin:0 0 12px;font-family:var(--serif);font-stretch:var(--w-line);font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--ink-bright)} .act p{margin:0 0 14px;font-size:1.0625rem;line-height:1.66;color:var(--ink)} .act p:last-child{margin-bottom:0} .act__essence{font-style:italic;color:var(--ink-dim)!important} .act__essence span{font-style:normal;color:var(--crimson-text)} .marks,.numbered{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px} .marks li,.numbered li{position:relative;line-height:1.62;color:var(--ink)} .marks li{padding-left:24px} .marks li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border:1px solid var(--crimson-mark);transform:rotate(45deg)} .numbered{counter-reset:n} .numbered li{counter-increment:n;padding-left:34px} .numbered li::before{content:counter(n);position:absolute;left:0;top:0;width:20px;text-align:right; font-family:var(--serif);font-stretch:var(--w-head);font-weight:500;color:var(--crimson-mark);font-variant-numeric:tabular-nums} /* Обет: курсив антиквы на линии малины */ .vow{margin:8px 0 0;padding:6px 0 6px 28px;border-left:2px solid var(--crimson); font-family:var(--serif);font-stretch:var(--w-line);font-style:italic;font-weight:400; font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.45;color:var(--ink-bright)} .vow p{margin:0} .charter__closing{margin-top:40px;padding-top:24px;border-top:1px solid var(--edge-mid)} .charter__closing p{margin:0 0 10px;font-style:italic;color:var(--ink-dim)} .charter__closing p:last-child{margin:0;font-family:var(--serif);font-stretch:var(--w-head);font-style:normal; font-weight:500;font-size:var(--fs-h4);line-height:1.25;color:var(--ink-bright)} .charter-end{display:flex;gap:16px 32px;align-items:center;flex-wrap:wrap} @media (max-width:900px){ .stupen__lists{grid-template-columns:minmax(0,1fr)} } /* Разделитель между строками пометки: на телефоне перенос скрыт, и без него «Бруно М. А.» и «Ставрополь» сливались в одну фразу */ .marg-sep{display:none} @media (max-width:900px){.marg-sep{display:inline}} /* 320–380px: кнопка к уставу в одну строку */ @media (max-width:380px){.charter-link .btn{font-size:.9rem;padding-inline:10px}} @media (max-width:600px){ /* Узкая колонка рядом с номером статьи: длинные слова («личностно-ориентированного», «Институционализация») переносятся по слогам */ .charter p,.charter li,.clauses__name,.opposition__name,.act__name,.stupen__sub{ overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto; } .charter-link .btn{width:100%;padding-inline:16px} /* Самые узкие телефоны: переносов по слогам в Chrome для Windows нет, поэтому длинное слово может разорваться, а не распирать колонку */ .charter p,.charter li,.clauses__name,.act__name{overflow-wrap:anywhere} /* Текстовые колонки рядом с номером могут ужиматься уже самого длинного слова */ .clauses > li > *,.opposition > li > div,.act > div,.principles > li > *{min-width:0} .clauses > li,.act{grid-template-columns:2.6rem minmax(0,1fr);gap:0 14px} .opposition > li{grid-template-columns:2.8rem minmax(0,1fr);gap:0 16px} .opposition__n{font-size:2.4rem} .act__n{font-size:2.1rem} .ranks > li{grid-template-columns:minmax(0,1fr)} .charter-toc a{grid-template-columns:2.4rem minmax(0,1fr)} }