/* Karuna Jyotish — лендинг. Кремовая тема, Literata / Inter / Bitter. Палитра из приложения: #ede5d0 (фон), #593b3b (текст), #86716c (приглушённый). Тёмная тема — по логике приложения (инверсия), автоматически по системной теме. */ :root{ color-scheme:light; --bg:#ede5d0; /* фон страницы (края градиента) */ --bg2:#f4efe4; /* фон страницы — светлая середина градиента */ --card:#f9f6ef; /* карточки/поля/карта — в тон стеклянным кнопкам */ /* Карточка ПОВЕРХ поля: на --card её не видно — нужен тон светлее поля, как --card светлее --bg у карточек курса на главной. */ --card-hi:#fffdf8; --fill:#e3d8bf; /* заливка вспомогательных плашек */ --text:#593b3b; /* основной текст, заголовки */ --text2:#86716c; /* приглушённый текст */ --text3:rgba(134,113,108,.55); /* линии карты, номера домов */ --gold2:#593b3b; /* глифы планет в карте */ --accent:#593b3b; /* акцент (монохромный, из палитры) */ --accent-soft:rgba(89,59,59,.07); --focus-ring:rgba(89,59,59,.16); --err:#a3311f; --line:rgba(89,59,59,.14); /* светлое стекло (кнопки/чипы) */ --glass-top:rgba(255,255,255,.72); --glass-bot:rgba(255,255,255,.40); --glass-hi:rgba(255,255,255,.75); --shadow:0 1px 2px rgba(89,59,59,.05),0 8px 24px rgba(89,59,59,.07); --shadow-hi:0 6px 14px rgba(89,59,59,.10),0 20px 44px rgba(89,59,59,.15); --maxw:1240px; /* ширина контентной области */ --serif:'Literata',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* ── тёмная тема: инверсия как в приложении. Ставится атрибутом data-theme="dark" на (JS следит за системной темой, как в приложении). ── */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#2a2020; /* тёмный тёплый фон (углублённый #593b3b) */ --bg2:#332728; /* светлая середина градиента */ --card:#41393a; /* карточки/поля/карта — в тон стеклянным кнопкам */ --card-hi:#4e4546; /* карточка поверх поля — светлее его, см. светлую тему */ --fill:rgba(255,255,255,.06); --text:#ede5d0; /* светлый кремовый текст */ --text2:#a99a92; /* приглушённый (осветлённый #86716c) */ --text3:rgba(237,229,208,.28); --gold2:#e6cdb2; /* глифы планет — светлый тёплый */ --accent:#d9b9a6; /* тёплый светлый акцент */ --accent-soft:rgba(217,185,166,.10); --focus-ring:rgba(217,185,166,.22); --err:#e6a08c; --line:rgba(237,229,208,.14); --glass-top:rgba(255,255,255,.14); --glass-bot:rgba(255,255,255,.05); --glass-hi:rgba(255,255,255,.20); --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.32); --shadow-hi:0 6px 14px rgba(0,0,0,.35),0 20px 44px rgba(0,0,0,.45); } *{box-sizing:border-box} [hidden]{display:none!important} /* иначе display из классов перебивает атрибут hidden */ html{scroll-behavior:smooth;background:var(--bg)} /* фон — вертикальный градиент на всю высоту страницы: тёмный край → светлая середина → тёмный край */ body{ margin:0;min-height:100vh;color:var(--text); background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%) no-repeat; font-family:var(--serif);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} em,.i{font-family:'Bitter';font-style:italic} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);font-weight:700;margin:0 0 12px} h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0;color:var(--text)} h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.01em;font-weight:700} /* главный заголовок жирный */ h2{font-size:clamp(24px,3vw,34px);font-weight:600} h3{font-size:20px;font-weight:600} .lead{font-size:19px;color:var(--text);line-height:1.5} .muted{color:var(--text2)} .rule{height:1px;background:var(--line);border:0;margin:0} section{padding:76px 0} /* ── «жирный при наведении без сдвига»: невидимая жирная копия резервирует ширину ── */ .hb{display:inline-flex;flex-direction:column;align-items:center;transform-origin:center; transition:transform .18s ease,color .18s ease,box-shadow .18s ease} .hb::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden; pointer-events:none} /* ── светлая стеклянная кнопка (как в приложении), без обводок ── Покой — компактный; при наведении масштаб доводит до прежнего размера. */ .btn{ font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;border:0;border-radius:999px; padding:10px 21px;color:var(--text); background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5); box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12); } .btn:hover{transform:scale(1.2);font-weight:700;box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 20px rgba(60,40,30,.20)} .btn:active{transform:scale(1.16)} .btn[disabled]{opacity:.5;cursor:default;pointer-events:none} .btn-cta{color:var(--accent)} /* смысловой акцент, но всё то же стекло */ /* крупная кнопка («Подать заявку»): в покое — размер обычной наведённой (×1.2), наведение работает как у всех и увеличивает уже от него */ .btn-lg{font-size:15.6px;padding:12px 25px} /* ── шапка: прозрачная, фон растворяется книзу градиентом ── Фон и блюр живут на ::before с маской (маска на самой шапке съедала бы низ текста); подложка заходит на 22px ниже бара, чтобы переход к странице был мягким. */ .site-head{position:sticky;top:0;z-index:50;border:0;background:none} .site-head::before{ content:'';position:absolute;left:0;right:0;top:0;bottom:-22px;pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, transparent) 0%, color-mix(in srgb, var(--bg) 46%, transparent) 60%, transparent 100%); -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); } .site-head .wrap{position:relative;z-index:1; display:flex;align-items:center;justify-content:space-between;height:64px} .brand{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.01em;color:var(--text)} a.brand{cursor:pointer;transition:transform .18s ease,color .18s ease} a.brand:hover{transform:scale(1.06);font-weight:700;color:var(--accent)} .nav{display:flex;gap:30px;font-family:var(--sans);font-size:14px} .nav a{color:var(--text2);font-weight:500} .nav a:hover{transform:scale(1.22);font-weight:700;color:var(--accent)} /* +≈3px, жирный, без сдвига */ .nav-toggle{display:none} /* ── первый экран ── */ .hero{padding-top:56px} .hero-head{max-width:760px} .hero-head .sub{margin:16px 0 0;color:var(--text);font-size:18px} .hero-grid{display:grid;grid-template-columns:1fr 0.92fr;gap:56px;align-items:start;margin-top:40px} .card{background:var(--card);border-radius:16px;box-shadow:var(--shadow)} /* калькулятор */ .calc{display:flex;flex-direction:column} .calc h2{margin-bottom:6px} .calc .hint{margin:0 0 22px;color:var(--text2);font-size:16px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .field{position:relative} /* названия полей — строчными, как в приложении; разрядка была нужна капсу */ .field label{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.01em; color:var(--text2);margin-bottom:6px;font-weight:600} /* Поля — та же стеклянная заливка, что у кнопок (.btn): один рецепт, а не похожий оттенок, поэтому поле и кнопка совпадают по цвету на любом фоне и в любой теме. Действует и на широту/долготу/пояс — они те же .field input. */ .field input{width:100%;font-family:var(--sans);font-size:16px;color:var(--text); background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5); border:0;border-radius:10px;padding:12px 14px;outline:none; box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12); transition:box-shadow .16s ease} .field input::placeholder{color:var(--text2);opacity:.7} .field input:focus{box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12), 0 0 0 3px var(--focus-ring)} .field-full{grid-column:1/-1} /* Строка города: поле шириной с «дату рождения»; подпись — по центру колонки «времени рождения» и по вертикали на середине поля города (высота = высоте поля: 12px padding сверху/снизу + строка, поэтому центры совпадают). */ .city-row{align-items:end} .city-more{display:flex;align-items:center;justify-content:center;margin:0; height:43px} .sug{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:20;background:var(--card); border-radius:10px;box-shadow:var(--shadow-hi);overflow:hidden} .kja-sug-item{display:block;width:100%;text-align:left;font-family:var(--sans);font-size:15px; color:var(--text);background:none;border:0;padding:10px 13px;cursor:pointer} .kja-sug-item:hover{background:var(--accent-soft)} .sug-c{color:var(--text2)} /* страна — подчинена названию города */ .manual-link{font-family:var(--sans);font-size:13px;color:var(--text2);cursor:pointer} .manual-link:hover{color:var(--accent)} /* Ручной ввод координат: плавное раскрытие через grid-template-rows 0fr→1fr — единственный способ анимировать «высоту по содержимому» без замеров в JS. ВАЖНО: на .manual-inner не должно быть padding — 0fr даёт треку минимум по содержимому, а padding несжимаем, и блок застрянет на его высоте. Поэтому отступы и подложка — на .manual-box внутри. visibility снимает поля с прохода по Tab, пока блок закрыт. */ .manual{display:grid;grid-template-rows:0fr;margin:0;opacity:0; transition:grid-template-rows .3s ease,opacity .24s ease,margin .3s ease} .manual.open{grid-template-rows:1fr;opacity:1;margin:14px 0 4px} .manual-inner{overflow:hidden;min-height:0; visibility:hidden;transition:visibility 0s linear .3s} .manual.open .manual-inner{visibility:visible;transition-delay:0s} .manual-box{padding:14px;background:var(--accent-soft);border-radius:10px} /* широта / долгота / пояс — одной строкой, равной ширины; align-items:end держит поля на одной линии, даже если подпись перенесётся */ .manual-row{grid-template-columns:repeat(3,1fr);align-items:end} .manual .form-row{margin-bottom:0} @media (prefers-reduced-motion:reduce){ .manual{transition:none} } .calc-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px} .err{font-family:var(--sans);font-size:14px;color:var(--err);margin:14px 0 0} .results{margin-top:24px;padding-top:22px;border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .res-item .k{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--text2);font-weight:700} .res-item .v{font-family:var(--serif);font-size:20px;font-weight:600;margin-top:4px;color:var(--text)} /* карта */ .chart-side{position:sticky;top:88px} .chart-wrap{position:relative;background:var(--card);border-radius:16px;box-shadow:var(--shadow); padding:22px;transition:opacity .25s ease,filter .25s ease} .chart-host{position:relative} .chart-svg{display:block} .chart-styles{display:flex;gap:8px;justify-content:center;margin-top:16px} .chip{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--text);cursor:pointer;border:0; border-radius:999px;padding:7px 14px; background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4); box-shadow:inset 0 1px 0 var(--glass-hi),0 3px 8px rgba(60,40,30,.10)} .chip:hover{transform:scale(1.19);font-weight:700} .chip.active{transform:scale(1.19);font-weight:700} /* нажатая остаётся крупной+жирной, цвет тот же */ /* неактивная карта (нет расчёта): приглушена мягко — видно, что это карта, но что расчёта ещё нет. Переключатели стилей при этом рабочие. */ .chart-wrap:not(.has-chart){opacity:.85;filter:saturate(.85)} .chart-wrap:not(.has-chart) .chart-host{opacity:.7} /* ── обучение ── */ .study .lead{max-width:720px;margin-bottom:18px} .study p{max-width:720px;color:var(--text2)} /* названия блоков (отзывы, программа) — крупнее и с воздухом сверху; отдельный класс, а не .study h3: тот зацепил бы заголовки карточек модулей */ .block-title{font-size:26px;margin-top:120px} /* карточки: без обводок, увеличение + усиление тени при наведении, плавно */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px} .review{padding:24px} .review .quote{color:var(--text2);font-style:italic;font-family:'Bitter';min-height:78px} .review .who{font-family:var(--serif);font-weight:600;margin-top:16px;color:var(--text)} /* grid-auto-rows:1fr — все ряды одной высоты, поэтому все карточки одинаковые (иначе нижний ряд с коротким текстом заметно ниже верхнего) */ .modules{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;margin-top:34px} .module{position:relative;padding:24px;display:flex;flex-direction:column;min-height:210px} /* номер модуля — строчными, без капса, по правому краю */ .module .num{position:relative;font-family:var(--sans);font-size:15px;letter-spacing:.02em; color:var(--accent);font-weight:700;padding-bottom:12px;text-align:right} /* разделитель под строкой модуля: сплошной, симметричный отступ 14px — не встык к краям */ .module .num::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:1px; background:var(--line)} .module h3{margin:12px 0 8px} /* пояснение — курсивом, как цитата в отзывах; flex:1 занимает всё место между заголовком и строкой срока/«Подробно», а justify-content центрирует текст в нём */ .module p{color:var(--text2);font-size:16.5px;line-height:1.5;flex:1;margin:0; font-family:'Bitter';font-style:italic; display:flex;flex-direction:column;justify-content:center} /* у 02-го модуля текст самый длинный — чуть мельче остальных */ .module[data-module="02"] p{font-size:15px} .module .mod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:16px;min-height:30px} .module .dur{font-family:var(--sans);font-size:14px;color:var(--text2)} /* Вся карточка — одна кнопка: клик в любом месте открывает окно */ .module{cursor:pointer} .module:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* «Подробно» — только текст, без плашки и обводок. Проступает в нижнем правом углу карточки под курсором и исчезает, когда мышь ушла. */ .card-more{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--accent); opacity:0;transform:translateY(4px);pointer-events:none; transition:opacity .22s ease,transform .22s ease} .module:hover .card-more,.module:focus-visible .card-more{opacity:1;transform:none} .hover-lift{transition:transform .22s ease,box-shadow .22s ease;will-change:transform} .hover-lift:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-hi)} .center{text-align:center;margin-top:34px} /* приложение */ .app-grid,.cons-grid{display:grid;grid-template-columns:1fr 0.85fr;gap:48px;align-items:center} .app-copy p{color:var(--text2)} /* ── фирменная кнопка Google Play (тёмная плашка со «Доступно в» + логотип) ── */ .gp-btn{display:inline-flex;align-items:center;gap:12px;margin-top:22px; padding:9px 18px 9px 15px;border-radius:10px;background:#000;color:#fff; border:1px solid rgba(255,255,255,.28); transition:transform .18s ease,box-shadow .18s ease} .gp-btn:hover{transform:scale(1.04);box-shadow:0 8px 20px rgba(0,0,0,.28)} .gp-btn:active{transform:scale(1.01)} /* размер задан и атрибутами в SVG — логотип не разрастётся, даже если CSS не доехал */ .gp-logo{width:24px;height:27px;flex:none;max-width:24px} .gp-text{display:flex;flex-direction:column;line-height:1.1;font-family:var(--sans);text-align:left} .gp-text small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.9} .gp-text strong{font-size:18px;font-weight:600;letter-spacing:.01em;margin-top:2px} .placeholder{aspect-ratio:4/3;border-radius:14px;background:var(--fill); display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:13px;color:var(--text2)} /* консультация */ .cons-copy p{color:var(--text2);margin-top:26px} /* воздух под заголовком */ /* кнопка — по центру колонки текста */ .cons-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:36px} /* видео: 16:9, скругление; полноэкранный режим — родной ютубовский */ .video-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden; background:#000;box-shadow:var(--shadow)} .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* ссылка внутри текста — подчёркиванием, чтобы читалась как ссылка */ .inline-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;transition:opacity .18s ease} .inline-link:hover{opacity:.7} /* футер */ .site-foot{border-top:1px solid var(--line);padding:44px 0;background:var(--card)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;align-items:start;font-family:var(--sans);font-size:14px} .foot-grid .brand{font-family:var(--serif);font-size:18px} .foot-grid a{color:var(--text2);display:block;margin-top:6px} .foot-grid a:hover{color:var(--accent)} .copy{color:var(--text2);margin-top:12px;font-size:13px;opacity:.8} /* ── всплывающее окно модуля: фон размывается, панель всплывает ── */ .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; padding:24px; background:color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1); opacity:0;transition:opacity .26s ease} .modal.open{opacity:1} .modal-panel{position:relative;width:min(560px,100%);max-height:80vh;overflow-y:auto; padding:30px 32px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-hi); transform:translateY(14px) scale(.97);transition:transform .26s cubic-bezier(.2,.8,.3,1)} .modal.open .modal-panel{transform:none} .modal-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border:0;border-radius:999px; background:none;color:var(--text2);font-size:24px;line-height:1;cursor:pointer; transition:color .18s ease,background .18s ease} .modal-x:hover{color:var(--accent);background:var(--accent-soft)} .modal-panel .num{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);font-weight:700} .modal-panel h3{margin:8px 0 0;font-size:24px} .topics{margin:18px 0 0;padding:0;list-style:none} .topics li{font-size:16px;color:var(--text2);padding:10px 0;position:relative} .topics li+li{border-top:1px solid var(--line)} .topics .soon{font-family:'Bitter';font-style:italic;color:var(--text2)} /* ── анкета во всплывающем окне ── */ .modal-form{width:min(620px,100%)} .modal-form form{margin-top:20px} .fblock{margin-bottom:14px} .fblock label{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.01em; color:var(--text2);margin-bottom:6px;font-weight:600} .modal-form textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--text); background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); border:0;border-radius:10px;padding:12px 14px;outline:none;resize:vertical;min-height:96px; box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12)} /* в анкете поля без обводок — кольца фокуса не рисуем, заливка остаётся */ .modal-form textarea:focus{box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12)} .modal-form .field input:focus{box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12)} .modal-form .combo:focus-within{box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12)} .modal-form input:focus-visible,.modal-form textarea:focus-visible, .modal-form button:focus-visible{outline:none} /* Контакт одной строкой: слева выпадающий выбор мессенджера, вертикальная линия, справа сам контакт. Стеклянная заливка — на обёртке, поле внутри прозрачное (иначе легло бы стекло на стекло). */ .combo{position:relative;display:flex;align-items:stretch;border-radius:10px; background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12); transition:box-shadow .16s ease} .combo:focus-within{box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12), 0 0 0 3px var(--focus-ring)} .combo-pick{position:relative;display:flex;align-items:center;gap:8px;flex:none; padding:12px 13px;border:0;background:none;cursor:pointer;color:var(--text); font-family:var(--sans);font-size:14px;font-weight:500;border-radius:10px 0 0 10px} .combo-pick .combo-name{white-space:nowrap} .combo-pick:not(.chosen) .combo-name{color:var(--text2)} /* пока не выбран */ .combo-ico{display:flex;align-items:center;flex:none} .combo-ico:empty{display:none} .combo-caret{flex:none;color:var(--text2);transition:transform .18s ease} .combo-pick[aria-expanded="true"] .combo-caret{transform:rotate(180deg)} /* вертикальная разделительная линия между выбором и полем */ .combo-pick::after{content:'';position:absolute;right:0;top:9px;bottom:9px;width:1px; background:var(--line)} /* поле внутри .combo — не .field input, поэтому свои border/шрифт/отступы: без этого браузер рисует собственную рамку на правой половине строки */ .combo input{flex:1;min-width:0;border:0;outline:none;background:none;box-shadow:none; border-radius:0 10px 10px 0;padding:12px 14px; font-family:var(--sans);font-size:16px;color:var(--text)} .combo input:focus{box-shadow:none;outline:none} .combo-menu{position:absolute;top:100%;left:0;margin-top:6px;z-index:30;min-width:190px; background:var(--card);border-radius:10px;box-shadow:var(--shadow-hi);overflow:hidden;padding:4px} .combo-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer; border:0;border-radius:7px;background:none;padding:9px 10px;color:var(--text); font-family:var(--sans);font-size:14px} .combo-opt:hover{background:var(--accent-soft)} .combo-opt[aria-selected="true"]{font-weight:700} /* «Отправить» — по центру; размер кнопки не трогаем */ .form-submit{display:flex;justify-content:center;margin-top:20px} .modal-form .err{margin:12px 0 0} .ok{font-family:var(--sans);font-size:14px;color:var(--accent);margin:12px 0 0} @media (prefers-reduced-motion:reduce){ .modal,.modal-panel,.card-more{transition:none} } /* ── страница «Подробно»: две карты в строку, под ними таблицы ── */ /* Страница расчётов шире обычной (иначе три карты тесно), но к краю не жмётся: 36px у всего — шапки, заголовка, полей, карт, таблиц, футера. Одна сетка. */ body.wide .wrap{max-width:none;padding:0 36px} .chart-page{padding-top:44px} /* ── Только десктоп ── Ниже 1024px страница расчётов не показывается вовсе: вместо неё объяснение. Порог — по вёрстке: три колонки по 511px плюс поля живут от ~1600px, при 1024px уже начинается компромисс, а компромиссов тут решили не делать. */ .cp-desktop-only{display:none;padding:80px 0} .cp-only-box{max-width:560px;margin:0 auto;text-align:center} .cp-only-box h1{font-size:clamp(24px,6vw,32px);margin:0 0 18px} .cp-only-box p{color:var(--text2);margin:0 0 14px} .cp-only-sub{color:var(--text)} .cp-only-box .btn{margin-top:14px} @media (max-width:1023px){ .cp-desktop-only{display:block} .chart-page{display:none} } /* заголовок — с двойного абзаца: 36px сетки + ещё 36px */ .cp-head h1{font-size:clamp(26px,3.4vw,38px);padding-left:36px} /* поля ввода — одной строкой; кнопки по низу, вровень с полями */ .cp-form{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin-top:24px} .cp-form .field{flex:0 1 190px} .cp-form .cp-city{flex:0 1 374px} /* адрес со страной длинный — поле заметно шире прочих */ .cp-form .cp-geo{flex:0 1 118px} .cp-form .cp-tz{flex:0 1 120px} /* в окне сохранения город вдвое шире пояса */ .cps-city-row{grid-template-columns:2fr 1fr} /* Зазоры с запасом на наведение: кнопка растёт на 20%, то есть по ~12px в каждую сторону. С прежними 10px соседей она перекрывала. */ .cp-acts{display:flex;align-items:center;gap:28px;height:43px;margin-left:14px} .cp-acts-right{margin-left:auto} /* «Сбросить» — в правый угол строки */ .cp-loading{margin-top:34px;color:var(--text2)} /* Раскрытие/сворачивание всей страницы расчёта: тот же приём, что у координат на главной — grid-template-rows 0fr→1fr. Отступов на .cp-body-inner быть не должно: 0fr даёт треку минимум по содержимому, и padding не даст ей схлопнуться. */ .cp-body{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .42s ease,opacity .3s ease} .cp-body.open{grid-template-rows:1fr;opacity:1} .cp-body-inner{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .42s} .cp-body.open .cp-body-inner{visibility:visible;transition-delay:0s} @media (prefers-reduced-motion:reduce){ .cp-body{transition:none} } /* ── вкладки страницы расчётов ── Пять равных закладок во всю ширину поля. У каждой скруглены оба верхних угла. Без обводок: неактивные различимы заливкой, активная — цвета поля и налезает на него на 1px, поэтому читается как продолжение листа. */ .cp-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%; margin:30px 0 0;position:relative;z-index:2} .cp-tab{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--text2); cursor:pointer;padding:12px 8px;margin-bottom:-1px;position:relative; border:0;border-radius:12px 12px 0 0; background:color-mix(in srgb, var(--card) 40%, transparent); transition:background .18s ease,color .18s ease,border-radius .28s ease} .cp-tab:hover{color:var(--text);background:color-mix(in srgb, var(--card) 70%, transparent)} .cp-tab.active{color:var(--text);font-weight:700;background:var(--card)} /* Стык активной закладки с полем — вогнутыми скруглениями, без прямых углов. Квадратик цвета поля по бокам, из которого маской вырезана четверть круга: получается «перетекание» закладки в лист, как во вкладках браузера. */ .cp-tab.active::before, .cp-tab.active::after{ content:'';position:absolute;bottom:0;width:12px;height:12px; background:var(--card);pointer-events:none} .cp-tab.active::before{left:-12px; -webkit-mask-image:radial-gradient(circle 12px at 0 0, transparent 12px, #000 12.5px); mask-image:radial-gradient(circle 12px at 0 0, transparent 12px, #000 12.5px)} .cp-tab.active::after{right:-12px; -webkit-mask-image:radial-gradient(circle 12px at 100% 0, transparent 12px, #000 12.5px); mask-image:radial-gradient(circle 12px at 100% 0, transparent 12px, #000 12.5px)} /* Поле — продолжение закладок. Верхние углы прямые только там, где к полю примыкает активная закладка; с других сторон скругляются (классы ставит JS). */ .cp-pane .cp-charts{margin-top:0;border-radius:0 0 16px 16px; transition:border-radius .28s ease} /* слияние с закладкой — плавное */ .cp-pane .cp-charts.r-tl{border-top-left-radius:16px} .cp-pane .cp-charts.r-tr{border-top-right-radius:16px} /* крайняя неактивная закладка над скруглённым углом поля — скругляем и её низ */ .cp-tab.r-bl{border-bottom-left-radius:12px} .cp-tab.r-br{border-bottom-right-radius:12px} .cp-panes{overflow:hidden} /* пока высота едет, содержимое не выпирает */ .cp-soon{margin:0;color:var(--text2);font-family:'Bitter';font-style:italic} .cp-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 0} .cp-subtab{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--text2); cursor:pointer;border:0;border-radius:999px;padding:7px 14px;background:none; transition:color .18s ease,background .18s ease} .cp-subtab:hover{color:var(--text);background:var(--accent-soft)} .cp-subtab.active{color:var(--text);font-weight:700;background:var(--accent-soft)} /* обе карты — в одном поле */ .cp-charts{padding:22px;margin-top:34px} /* Первый ряд: три карты во всю ширину. Четвёртая стоит в колонке нулевой ширины и выезжает по «Больше карт» — так три соседние ужимаются плавно, а не рывком. Колонки заданы calc(), а НЕ fr: списки вида «1fr 1fr 1fr 0fr» и «repeat(4,1fr)» браузер интерполировать отказывается, и раскрытие происходило рывком. 78px = три зазора по 26px; они есть всегда, даже у нулевой колонки. */ .cp-row-main{display:grid;gap:26px; grid-template-columns:calc((100% - 78px)/3) calc((100% - 78px)/3) calc((100% - 78px)/3) 0px; transition:grid-template-columns .45s cubic-bezier(.4,0,.2,1)} .cp-charts.more .cp-row-main{ grid-template-columns:calc((100% - 78px)/4) calc((100% - 78px)/4) calc((100% - 78px)/4) calc((100% - 78px)/4)} .cp-row-extra{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} /* нижний ряд карт: раскрывается плавно (0fr→1fr), отступы — на внутреннем слое */ .cp-extra{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .45s ease} .cp-extra.open{grid-template-rows:1fr;opacity:1;margin-top:26px} .cp-extra-inner{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .45s} .cp-extra.open .cp-extra-inner{visibility:visible;transition-delay:0s} /* «Больше карт» — по центру под полем, только текст со стрелкой */ .cp-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%; margin:0;padding:16px 0 2px;border:0;background:none;cursor:pointer; font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--accent)} .cp-more:hover{opacity:.75} .cp-more-caret{transition:transform .3s ease} .cp-more[aria-expanded="true"] .cp-more-caret{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){ .cp-extra,.cp-row-main,.cp-tab,.cp-pane .cp-charts{transition:none} .cp-more-caret{transition:none} } /* ── Варшапхала ── Карты обязаны быть ростом с джанмовские, поэтому сетка та же самая — три колонки по (100% - 78px)/3, — просто карт в ней две, а третья колонка пустая. Ограничивать ширину самой строки нельзя: колонки считаются в процентах ОТ НЕЁ, и строка, ужатая по той же формуле, даёт колонки втрое уже нужного. */ .cp-row-two{display:grid;gap:26px; grid-template-columns:repeat(3,calc((100% - 78px)/3))} /* Значок «чья карта» — по центру строки кнопок, между варгой и стилем. Размер и цвет — как у .dual-glyph в приложении (index.html:1501). */ .cp-chart-ic{width:20px;height:20px;color:var(--text2);flex:0 0 auto;display:block} .cp-chart-ic svg{width:100%;height:100%;display:block} /* Выбор года — по центру строки: слева пишем момент построения карты, справа пусто, поэтому сетка 1fr auto 1fr, а не flex. */ .cp-vhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:20px;margin-bottom:26px} .cp-vret{margin:0;color:var(--text);font-family:var(--sans);font-size:14px} /* год — главный переключатель вкладки, поэтому крупнее прочих кнопок */ .cp-year-btn{padding:11px 20px} .cp-year-btn .combo-name{font-size:19px;font-weight:700;letter-spacing:.01em} /* сотня лет в списке — единственное меню с прокруткой */ .cp-menu-yr{min-width:0;width:max-content;max-height:288px;overflow-y:auto} .cp-menu-yr .combo-opt{font-size:16px;font-weight:600;text-align:center} /* Управители и панчанга — в третьей колонке сетки, справа от карт. Своей ширины не просят: колонка ровно такая же, как под картой. */ .cp-vside{min-width:0} .cp-vh{font-family:var(--sans);font-size:13px;color:var(--text);font-weight:700;margin:0 0 14px} .cp-vh-2{margin-top:26px} .cp-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px 18px} .cp-chip{min-width:0} .cp-chip-l{display:block;font-family:var(--sans);font-size:11px;color:var(--text2); margin-bottom:2px} .cp-chip-v{display:flex;align-items:baseline;gap:7px;font-family:var(--sans); font-size:15px;font-weight:600;color:var(--text)} /* правитель — приглушённой пилюлей: он подпись к значению, а не значение */ .cp-chip-r{font-size:11.5px;font-weight:700;color:var(--accent); background:var(--accent-soft);border-radius:999px;padding:1px 7px;flex:none} /* ── Ректификация ── Строка времени: сброс слева, сохранение справа, всё рабочее — по центру. --rc-h держит одну высоту у даты, времени, выбора шага и кнопок +/−: вразнобой они читались бы как разные по важности. */ .rc-bar{--rc-h:52px;position:relative;display:flex;align-items:center;gap:18px; padding-bottom:22px;margin-bottom:26px} /* Разделитель под шапкой — не встык к краям поля, симметричный отступ 14px: тот же приём, что у строки модуля на главной (.module .num::after). */ .rc-bar::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:1px; background:var(--line)} .rc-mid{display:flex;align-items:center;gap:10px;margin:0 auto} /* дата и время — раздельно; крупно и моноширинными цифрами */ .rc-date,.rc-time{display:flex;align-items:center;height:var(--rc-h); font-family:var(--sans);font-size:25px;font-weight:700;color:var(--text); font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap; border-radius:999px;padding:0 20px; background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); box-shadow:inset 0 1px 0 var(--glass-hi),0 3px 8px rgba(60,40,30,.10)} /* выбор шага — та же капсула и та же высота, что у полей рядом */ .rc-step .combo-pick{height:var(--rc-h);border-radius:999px;padding:0 16px;font-size:14px} /* + и − — то же стекло, ростом с поле времени */ .rc-pm{display:flex;align-items:center;justify-content:center; width:var(--rc-h);height:var(--rc-h); border:0;border-radius:999px;cursor:pointer;color:var(--text2);flex:none; font-family:var(--sans);font-size:22px;font-weight:600;line-height:1; background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); box-shadow:inset 0 1px 0 var(--glass-hi),0 3px 8px rgba(60,40,30,.10); transition:color .18s ease,transform .18s ease} .rc-pm:hover{color:var(--accent);transform:scale(1.08)} @media (prefers-reduced-motion:reduce){ .rc-pm{transition:none} } /* ── Поле событий ── Кнопка всегда сверху, список под ней скроллится и вниз за поле не вылезает. Внутренний слой — absolute: иначе список тянул бы высоту ряда за собой, и поле росло бы вместо прокрутки. Высоту ряда задают карты, колонка её берёт растяжением грид-ячейки. */ .rc-ev-col{position:relative;min-width:0} .rc-ev-inner{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0} .rc-ev-add{align-self:center;flex:none;width:50%;margin-bottom:14px;text-align:center} .rc-ev-form{flex:none;margin-bottom:14px;padding:14px;border-radius:12px; background:var(--accent-soft)} .rc-ev-form .field{margin-bottom:10px} .rc-ev-sel .combo-pick{width:100%;justify-content:space-between} .rc-ev-menu{min-width:0;width:100%;max-height:260px;overflow-y:auto} /* По центру и с зазором 28px — тем же, что у .cp-acts: кнопка при наведении растёт на 20% (~12px в каждую сторону), с меньшим зазором они налезают. */ .rc-ev-acts{display:flex;align-items:center;justify-content:center;gap:28px; margin-top:18px} /* тени карточек при наведении выходят за край — списку нужен запас, иначе он их срежет */ .rc-ev-list{flex:1;min-height:0;overflow-y:auto;display:grid;gap:10px; align-content:start;padding:4px 8px 8px 4px} /* Карточка события — по рецепту карточек программы курса (.module.card): заливка, мягкая тень, наведение поднимает. Обводок здесь быть не должно. Заливка — --card-hi: карточка лежит НА поле цвета --card и на нём же была бы не видна. Тень своя, а не --shadow: та рассчитана на крупные карточки на фоне страницы и под мелкой карточкой на светлом поле читается грязным пятном. */ .rc-ev{border-radius:12px;padding:11px 14px;background:var(--card-hi); box-shadow:0 1px 2px rgba(89,59,59,.05),0 2px 8px rgba(89,59,59,.05); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; will-change:transform} .rc-ev:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(89,59,59,.06),0 6px 16px rgba(89,59,59,.09)} /* Выбранная — тоже светлая: приподнята и подписана акцентом. Затемнять её заливкой нельзя, карточка должна оставаться светлее поля. */ .rc-ev.sel{transform:translateY(-2px); box-shadow:0 2px 4px rgba(89,59,59,.06),0 6px 16px rgba(89,59,59,.09)} .rc-ev.sel .rc-ev-nm{color:var(--accent)} :root[data-theme="dark"] .rc-ev{ box-shadow:0 1px 2px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.24)} :root[data-theme="dark"] .rc-ev:hover, :root[data-theme="dark"] .rc-ev.sel{ box-shadow:0 2px 4px rgba(0,0,0,.26),0 6px 16px rgba(0,0,0,.32)} .rc-ev-head{display:flex;align-items:center;gap:8px} .rc-ev-nm{flex:1;min-width:0;font-family:var(--sans);font-size:14px;font-weight:600; color:var(--text)} .rc-ev-btns{display:flex;align-items:center;gap:4px;flex:none} /* значки — крупнее и по центру своей кнопки */ .rc-ev-ic{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;padding:0;border:0;border-radius:999px; background:none;cursor:pointer;color:var(--text3); transition:color .15s ease,background .15s ease} .rc-ev-ic:hover{color:var(--accent);background:var(--accent-soft)} .rc-ev-del:hover{color:var(--err)} .rc-ev-sub{font-family:var(--sans);font-size:12px;color:var(--text2);margin-top:2px} @media (prefers-reduced-motion:reduce){ .rc-ev,.rc-ev-ic{transition:none} } /* D-1 варгой не переключается — подпись на месте кнопки. Высота строго как у кнопки выбора рядом (30px): иначе строки кнопок разной высоты, и карты в колонках разъезжаются по вертикали. */ .rc-fixed{display:flex;align-items:center;height:30px; font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text2)} /* Поля показателей — во всю ширину карты, под строкой кнопок. Высота поля задана явно: от неё считается сдвиг второй колонки (--rc-fh), иначе карты разъехались бы по вертикали. */ .rc-flds{display:grid;gap:var(--rc-gap);margin-bottom:14px} .rc-fld{--rc-fh:54px;--rc-gap:7px; display:flex;align-items:center;gap:6px;width:100%;height:var(--rc-fh); border-radius:10px;padding:0 6px;background:var(--accent-soft); font-family:var(--sans)} .rc-flds{--rc-fh:54px;--rc-gap:7px} /* У первой карты полей два, у второй одно — опускаем всю колонку ровно на одно поле с зазором. Негативное пространство остаётся сверху. */ .rc-col-2{padding-top:calc(54px + 7px)} .rc-fld-c{flex:1;min-width:0;text-align:center} .rc-fld-1{font-size:13.5px;color:var(--text2);line-height:1.35} .rc-fld-1 b{color:var(--text);font-weight:700} .rc-fld-2{display:flex;align-items:baseline;justify-content:center;gap:5px;line-height:1.3} .rc-dash{color:var(--text3)} /* стрелки поля — как в приложении: шаг на соседний знак/накшатру */ .rc-arr{border:0;background:none;cursor:pointer;flex:none; width:24px;height:100%;padding:0;color:var(--text3); font-family:var(--sans);font-size:19px;line-height:1; transition:color .15s ease} .rc-arr:hover{color:var(--accent)} @media (prefers-reduced-motion:reduce){ .rc-arr{transition:none} } /* Сурйа-накшатра — на две трети поля, «Рождение невозможно» — на оставшуюся; панча-таттва и пранапада ниже тем же делением. */ .rc-row2,.rc-row3{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin-top:44px} .rc-blk{min-width:0} .rc-tbl{font-size:14px;line-height:19px} .rc-tbl td{padding:6px 10px} /* текущая строка — тёплой заливкой, без обводок */ .rc-tbl .rc-cur td{background:var(--accent-soft)} .rc-tbl .rc-cur .cp-pl{color:var(--accent);font-weight:700} /* знак по правилу, который в эту четверть реально не восходит */ .rc-sg{color:var(--text);font-weight:600} .rc-sg-off{color:var(--text3);opacity:.65} .rc-sl{color:var(--text3);margin:0 5px} .rc-no{color:var(--err)} .rc-none{color:var(--text2);text-align:center} /* таттвы текущей йамы — с отступом, как подуровни периодов */ .rc-tbl .rc-tt td{border-top:0;padding-top:4px;padding-bottom:4px} .rc-tbl .rc-tt .cp-pl{padding-left:28px;font-weight:400;font-family:'Bitter';font-style:italic} /* в группе одной варги метка не повторяется — и разделителя внутри группы нет */ .rc-tbl .rc-pp-same td{border-top:0} .rc-pp-v{color:var(--text2)} @media (max-width:1200px){ .rc-row2,.rc-row3{grid-template-columns:1fr;gap:34px} } /* время внутри поля — кнопка отскока: клик переносит момент на границу */ .rc-t{border:0;background:none;cursor:pointer;padding:0; font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent); font-variant-numeric:tabular-nums; border-bottom:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); transition:color .15s ease} .rc-t:hover{color:var(--text)} @media (prefers-reduced-motion:reduce){ .rc-t{transition:none} } .cp-chart{min-width:0} /* Обрезаем ТОЛЬКО четвёртую карту, пока её колонка нулевой ширины: иначе её кнопки торчали бы наружу. На остальных overflow:hidden обрезал выпадающие списки (они выше карты) — из-за этого списки варг и «поломались». Класс .unclip снимает обрезку после раскрытия — его ставит JS по таймеру, потому что overflow не анимируется и снимать его сразу нельзя. */ .cp-row-main > .cp-chart:nth-child(4){overflow:hidden} .cp-charts.unclip .cp-row-main > .cp-chart:nth-child(4){overflow:visible} /* Раскрытый нижний ряд тоже перестаёт обрезать: иначе он режет выпадающие списки карт 5–8 (слой схлопывается через overflow, и в открытом виде он больше не нужен). */ .cp-charts.unclip .cp-extra-inner{overflow:visible} .cp-chart-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;align-items:start} .cp-col{min-width:0} /* иначе таблица распирает колонку */ .cp-sel{position:relative} .cp-sel .combo-pick{border-radius:999px;padding:7px 13px;font-size:13px; background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); box-shadow:inset 0 1px 0 var(--glass-hi),0 3px 8px rgba(60,40,30,.10)} .cp-sel .combo-pick::after{content:none} /* тут разделитель ни к чему */ /* список варг: шире — чтобы «Чатурвимшамша» не переносилась; без прокрутки — все 16 карт видны разом */ .cp-menu{min-width:232px} /* Списки гаснут плавно: hidden убирает элемент мгновенно, поэтому сначала снимаем .show (затухание), а прячем уже после него — см. hideNow в chart-page.js */ .cp-sel .combo-menu{opacity:0;transform:translateY(-4px); transition:opacity .16s ease,transform .16s ease} .cp-sel .combo-menu.show{opacity:1;transform:none} .cp-sel .combo-menu.up{transform:translateY(4px)} .cp-sel .combo-menu.up.show{transform:none} @media (prefers-reduced-motion:reduce){ .cp-sel .combo-menu{transition:none} } .cp-menu-r{min-width:0;width:max-content} /* стили короткие — меню по тексту */ /* меню открывается вверх, когда снизу не хватает места (класс ставит JS) */ .combo-menu.up{top:auto;bottom:100%;margin-top:0;margin-bottom:6px} .cp-menu .combo-opt{white-space:nowrap} .cp-menu-r{left:auto;right:0} /* меню стиля не должно уезжать за край */ .cp-sel-inline{margin:0} .cp-tt{font-size:20px;margin:30px 0 14px} .cp-tablewrap{overflow-x:auto} /* узкий экран: таблица скроллится сама */ /* шрифт крупнее, а межстрочный интервал прежний — поэтому line-height задан в пикселях (21.6px = прежние 13.5px × 1.6), а не множителем */ .cp-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15.5px; line-height:21.6px} /* Шапки таблиц — обычным регистром, как все заголовки на странице. Разрядка была нужна капсу; без него она только рвёт слово. */ .cp-table th{text-align:left;font-size:12.5px; color:var(--text);font-weight:700;padding:0 10px 10px;white-space:nowrap} .cp-table td{padding:9px 10px;color:var(--text);border-top:1px solid var(--line)} /* планеты плотнее: у них разделитель под каждой строкой, и с прежним отступом таблица дышала заметно шире периодов */ #cpPlanets td{padding-top:5px;padding-bottom:5px} .cp-table .cp-pl{color:var(--text);font-weight:600;white-space:nowrap} /* даты и накшатры не переносим — строка должна читаться целиком */ .cp-table .cp-num{font-variant-numeric:tabular-nums;white-space:nowrap} .cp-table .cp-nak{white-space:nowrap} .cp-table .cp-kar{font-family:'Bitter';font-style:italic} .cp-r{color:var(--err);font-weight:700} .cp-yrs{color:var(--text2);font-weight:400} .cp-dhead{padding-bottom:14px} .cp-dasha .cp-maha,.cp-dasha .cp-antar,.cp-dasha .cp-prat{cursor:pointer;transition:background .15s ease} .cp-dasha .cp-maha:hover,.cp-dasha .cp-antar:hover,.cp-dasha .cp-prat:hover{background:var(--accent-soft)} .cp-dasha .open > .cp-pl{color:var(--accent)} /* вложенность — отступом слева; цвет у всех уровней обычный, не приглушённый */ .cp-dasha .cp-antar td{border-top:0} .cp-dasha .cp-antar .cp-pl{padding-left:26px} .cp-dasha .cp-prat td{border-top:0} .cp-dasha .cp-prat .cp-pl{padding-left:46px} .cp-dasha .cp-sook td{border-top:0;padding-top:4px;padding-bottom:4px} .cp-dasha .cp-sook .cp-pl{padding-left:66px;font-weight:400} .cp-wait td{border-top:0;text-align:center} .cp-ck{font-weight:600;color:var(--accent)} .cp-r{font-size:.6em;font-weight:400;color:var(--err)} /* плавное появление/исчезновение уровней периодов */ @keyframes cp-in{from{opacity:0}to{opacity:1}} .cp-dasha .cp-new{animation:cp-in .18s ease both} .cp-dasha .cp-out{opacity:0;transition:opacity .15s ease} @media (prefers-reduced-motion:reduce){ .cp-dasha .cp-new{animation:none} .cp-dasha .cp-out{transition:none} } /* ── адаптив ── */ @media (max-width:1200px){ .cp-row{grid-template-columns:1fr} } @media (max-width:980px){ .cp-grid{grid-template-columns:1fr;gap:52px} /* тесно — карты и боковые поля встают друг под друга во всю ширину */ .cp-row-two{grid-template-columns:1fr} .cp-vhead{grid-template-columns:1fr;justify-items:start;gap:14px} /* в одну колонку равнять не с чем — события возвращаются в поток */ .rc-ev-inner{position:static} .rc-ev-list{max-height:420px} .rc-col-2{padding-top:0} } @media (max-width:860px){ section{padding:56px 0} .nav{display:none} .hero-grid,.app-grid,.cons-grid{grid-template-columns:1fr;gap:34px} .chart-side{position:static;max-width:360px;margin:0 auto} .reviews,.modules{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:18px} } @media (max-width:480px){ body{font-size:16px} .wrap{padding:0 18px} .form-row{grid-template-columns:1fr} .city-more{height:auto;justify-content:flex-start;margin-top:2px} .results{grid-template-columns:1fr;gap:12px} } /* без мыши наведения не будет — «Подробно» показываем всегда */ @media (hover:none){ .card-more{opacity:1;transform:none;pointer-events:auto} }