/* Синяя вспышка под пальцем при нажатии — это подсветка нажатия в мобильных браузерах. Она рисуется поверх карточки прямоугольником по её границам и выглядит как чужая обводка, особенно на тёмной теме. Свой отклик на нажатие у карточек и кнопок есть (сжатие и подсветка рамки), системный не нужен. */ html { -webkit-tap-highlight-color: transparent; } /* --- CORE DESIGN SYSTEM & VARIABLES --- */ :root { --bg: #F7F7F7; /* Soft elegant off-white background */ --bg-accent: #EEEEEE; /* Light grey */ --card-bg: #FFFFFF; /* Pure white cards */ --card-border: rgba(0, 0, 0, 0.12); /* Structured black border */ --card-border-active: #000000; /* Black active border */ /* Monochrome Palette */ --primary: #000000; /* Solid Black */ --primary-rgb: 0, 0, 0; --primary-hover: #1E1E1E; --primary-glow: rgba(0, 0, 0, 0.05); --accent: #111111; --accent-dark: #000000; --accent-light: rgba(0, 0, 0, 0.05); --success: #000000; --warning: #555555; --danger: #333333; --info: #222222; --text-primary: #000000; /* Pure black text */ --text-secondary: #444444; /* Dark grey */ --text-muted: #888888; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* --- DARK THEME OVERRIDES --- */ /* Класс ставится и на , и на . На его пишет короткий скрипт в — до первой отрисовки: раньше тему включал app-core.js, который грузится вместе с остальными скриптами, и на медленном интернете страница успевала мигнуть белым у человека с тёмной темой. Переменные наследуются, поэтому одного хватило бы, но помечается тоже: по нему тему проверяют обработчики и графики. */ html.dark-theme, body.dark-theme { --bg: #000000; /* Pure black background */ --bg-accent: #111111; /* Dark grey */ --card-bg: #000000; /* Pure black */ --card-border: rgba(255, 255, 255, 0.12); /* Subtle white border */ --card-border-active: #FFFFFF; /* White active border */ /* Monochrome Palette in Dark Theme */ --primary: #FFFFFF; /* Solid White */ --primary-rgb: 255, 255, 255; --primary-hover: #E1E1E1; --primary-glow: rgba(255, 255, 255, 0.08); --accent: #EEEEEE; --accent-dark: #FFFFFF; --accent-light: rgba(255, 255, 255, 0.1); --success: #FFFFFF; --warning: #AAAAAA; --danger: #CCCCCC; --info: #DDDDDD; --text-primary: #FFFFFF; /* Pure white text */ --text-secondary: #A3A3A3; /* Light grey */ --text-muted: #737373; background-color: var(--bg); color: var(--text-primary); } body.dark-theme .btn-primary { color: #000000; /* Black text on white primary button */ font-weight: 600; } body.dark-theme .btn-primary:hover { color: #000000; background-color: #E5E5E5; } body.dark-theme .app-header { background: rgba(0, 0, 0, 0.8); border-bottom-color: rgba(255, 255, 255, 0.1); } body.dark-theme .search-bar { background: #000000; border-color: rgba(255, 255, 255, 0.15); } body.dark-theme .search-bar input, body.dark-theme .form-group input, body.dark-theme .form-group select, body.dark-theme .form-group textarea { background: #000000; border-color: rgba(255, 255, 255, 0.15); } body.dark-theme .search-bar input:focus, body.dark-theme .form-group input:focus, body.dark-theme .form-group select:focus, body.dark-theme .form-group textarea:focus { background: #000000; border-color: var(--primary); } body.dark-theme .filter-group select { /* Именно background-color, а не сокращение background: сокращение сбрасывало background-repeat и position, и стрелка размножалась по всей ширине поля. */ background-color: #111111; border-color: rgba(255, 255, 255, 0.1); } body.dark-theme .uni-card { background: var(--bg-accent); } body.dark-theme .uni-card-tag { background: var(--bg); border-color: var(--primary); color: var(--primary); } body.dark-theme .uni-card-footer { border-top-color: var(--card-border); } body.dark-theme .file-upload-design { border-color: var(--card-border); background: rgba(255, 255, 255, 0.01); } body.dark-theme .file-upload-input:hover + .file-upload-design { border-color: var(--primary); background: rgba(255, 255, 255, 0.03); } body.dark-theme .kpi-card { background: var(--bg-accent); border-color: var(--card-border); } body.dark-theme .kpi-icon-wrapper { background: rgba(255, 255, 255, 0.04); color: var(--primary); } body.dark-theme .kpi-icon-wrapper.success-theme { background: var(--primary); color: var(--bg); } body.dark-theme .table-search input { background: var(--bg); border-color: var(--card-border); } body.dark-theme .table-search input:focus { background: var(--bg-accent); border-color: var(--primary); } body.dark-theme .leads-table th { border-bottom-color: var(--card-border); } body.dark-theme .leads-table td { border-bottom-color: var(--card-border); } body.dark-theme .table-status-select { background: var(--bg); border-color: var(--card-border); } body.dark-theme .table-status-select:focus { background: var(--bg-accent); border-color: var(--primary); } body.dark-theme .app-footer { background: rgba(0, 0, 0, 0.9); border-top-color: var(--card-border); } body.dark-theme .alert-info-box { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--card-border) !important; color: var(--text-primary) !important; } body.dark-theme .alert-info-box a { color: var(--primary) !important; } body.dark-theme .toast { background: var(--bg-accent); border-color: var(--card-border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } /* Фон самого холста. Первый кадр браузер красит ещё до того, как доберётся до стилей body, — и именно он мигал белым. Значения записаны числами, а не переменными: переменные объявлены ниже по файлу, а этот кадр рисуется раньше. */ html { background-color: #F7F7F7; } html.dark-theme { background-color: #000000; } /* --- RESET & BASE STYLES --- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.6; overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* Scrollbar Customization */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } /* Ползунок прокрутки был бордовым с прозрачностью 0.1 — остаток прежней палитры. На чёрном фоне тёмной темы он практически не виден: полоса есть, а где ты в документе — непонятно. Берём приглушённый серый из темы: он различим и на чёрном, и на белом. */ ::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Firefox рисует свою полосу и про ::-webkit-* правила не знает. Правило на body, а не на html: переменные тёмной темы объявлены на body.dark-theme, и на уровне html они ещё не видны. */ body { scrollbar-color: var(--text-muted) var(--bg); } /* Background glow container for WebGL Grainient shader */ .bg-glow-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; overflow: hidden; background-color: var(--bg); pointer-events: none; } /* --- HEADER & NAVIGATION --- */ .app-header { position: sticky; top: 0; z-index: 100; background: rgba(253, 253, 251, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(102, 2, 60, 0.04); height: 75px; display: flex; align-items: center; transition: var(--transition); } .header-container { width: 100%; max-width: none; margin: 0 auto; padding: 0 3rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--primary); text-decoration: none; display: flex; align-items: center; letter-spacing: -0.01em; transition: var(--transition); } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 0.5rem 0; position: relative; transition: var(--transition); } .nav-link:hover, .nav-link.active { color: var(--primary); } .nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: var(--transition); } .nav-link.active::after, .nav-link:hover::after { width: 100%; } /* --- LAYOUT & SECTIONS --- */ .app-content { max-width: none; margin: 0; padding: 2.5rem 3rem 2rem 3rem; flex: 1 0 auto; } .page-section { display: none; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .page-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- BUTTONS --- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; padding: 0.75rem 1.6rem; border-radius: 12px; border: none; cursor: pointer; transition: var(--transition); } .btn-icon { width: 18px; height: 18px; margin-right: 8px; } .btn-primary { background-color: var(--primary); color: var(--bg); font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } .btn-primary:hover { background-color: var(--primary-hover); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } .btn-outline { background-color: transparent; border: 1px solid var(--card-border); color: var(--text-primary); font-weight: 500; } .btn-outline:hover { background-color: var(--bg-accent); border-color: var(--primary); } .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; border-radius: 8px; } .btn-full { width: 100%; } .btn-back { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; transition: var(--transition); } .btn-back:hover { color: var(--primary); } /* --- CARDS SYSTEM (LIGHT MINIMAL) --- */ .glass-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(102, 2, 60, 0.02); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: var(--transition); } .glass-card:hover { border-color: rgba(102, 2, 60, 0.15); box-shadow: 0 12px 35px rgba(102, 2, 60, 0.05); } .highlighted-border { border-color: var(--primary); box-shadow: 0 10px 30px rgba(102, 2, 60, 0.03); } /* --- HERO SECTION --- */ .hero-section { text-align: center; max-width: 800px; margin: 4rem auto 4.5rem auto; } .badge { display: inline-block; background: var(--bg-accent); border: 1px solid var(--card-border); color: var(--text-primary); font-weight: 600; font-size: 0.8rem; padding: 0.35rem 0.9rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; } .badge-success { background: var(--primary); color: var(--bg); border-color: var(--primary); } .hero-subtitle { font-size: 1.2rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; font-weight: 400; } /* --- ГЛАВНАЯ: ФИЛЬТРЫ СЛЕВА, РЕЗУЛЬТАТЫ СПРАВА --- Фильтры вынесены из выпадающего меню в постоянную колонку: их видно целиком, и результат пересобирается сразу по клику, без «Найти» и без перезагрузки. Колонка липкая — при длинном списке фильтры остаются под рукой. */ .home-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); /* Две строки: в первой только заголовок над правой колонкой, во второй — фильтры и список. Благодаря этому верх панели фильтров совпадает с верхом первой карточки автоматически, при любой высоте заголовка. Обе строки auto: строка должна тянуться под высоту списка, иначе липкой панели не в чем держаться и она уезжает вместе со страницей. */ grid-template-rows: auto auto; column-gap: 2.5rem; align-items: start; /* Без ограничения по ширине: раскладка занимает весь экран, поля страницы задаёт .app-content. */ width: 100%; } .home-title { grid-column: 2; grid-row: 1; margin: 0 0 1.5rem 0; } .home-layout .filters-sidebar { grid-column: 1; grid-row: 2; } .home-layout .home-results { grid-column: 2; grid-row: 2; } /* Колонка занимает всю высоту экрана между шапкой и низом окна: шапка липкая и высотой 75px, поэтому отсчитываем от неё. Панель внутри тянется на всю колонку, а прокручивается её содержимое, а не сама страница. */ /* Панель занимает столько, сколько нужно её содержимому. Ограничения по высоте здесь нет намеренно: с ним появлялась внутренняя прокрутка, которая резала нижние фильтры и требовала отдельного колеса внутри колонки. */ .filters-sidebar { position: sticky; top: calc(75px + 1.5rem); display: flex; } .home-results { min-width: 0; /* иначе длинные названия в карточках распирают колонку */ } /* Панель фильтров в колонке: тот же блок, что раньше был выпадающим меню. */ .filter-panel { display: flex; flex-direction: column; gap: 1.25rem; background: #FFFFFF; border: 1px solid rgba(102, 2, 60, 0.12); border-radius: 20px; padding: 1.5rem; flex: 1; /* Прокрутки внутри панели нет: все фильтры видны сразу, а если колонка окажется длиннее экрана — прокручивается страница целиком. */ } body.dark-theme .filter-panel { background: #141414; border-color: rgba(255, 255, 255, 0.12); } /* --- УХОД И ПОЯВЛЕНИЕ КАРТОЧЕК --- Когда фильтр отсекает вуз, карточка уезжает вправо и складывается по высоте — поэтому нижние плавно поднимаются на её место сами, без пересчёта координат. Появление сделано мягче ухода: новое не должно врываться в кадр. */ /* Уходящая карточка мягко уплывает вправо и тает. Высоту здесь не схлопываем: в grid между карточками есть gap, и схлопывание давало рывок. Освободившееся место закрывают оставшиеся карточки — их доводит FLIP-анимация в js/app-home.js. Селектор из двух классов специально: более позднее правило .uni-card задаёт свой transition, и без повышенной специфичности он перебивал бы этот. */ .uni-card.is-leaving { opacity: 0; transform: translateX(64px) scale(0.97); pointer-events: none; transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } /* Карточки, которые сдвигаются на освободившееся место. */ .uni-card.is-shifting { transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .uni-card.is-leaving, .uni-card.is-shifting { transition: none; } } /* --- ГРУППА ЗАЯВОК ОДНОГО АБИТУРИЕНТА --- Когда человек подал на несколько направлений, его заявки сворачиваются в одну строку со счётчиком и раскрываются по клику. Иначе в общем списке один и тот же абитуриент выглядел как несколько разных. */ .lead-group-head { background: var(--bg-accent); } .lead-group-head:hover { background: var(--card-bg); } .lead-group-count { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--primary); color: var(--bg); font-size: 0.72rem; font-weight: 700; } /* Вложенные строки отделены линией слева — видно, что они принадлежат группе. */ .lead-group-item > td:first-child { border-left: 2px solid var(--card-border-active); } /* --- ВЫБОР ЯЗЫКОВ ОБУЧЕНИЯ (редактор вуза) --- Раньше вид кнопок задавался инлайновыми стилями и перерисовывался целиком на каждый клик: не было ни наведения, ни отклика на нажатие, а переходы не успевали проиграться, потому что элемент создавался заново. Теперь состояние переключается классом на месте, и всё поведение живёт здесь. */ .lang-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .lang-chip-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-accent); border: 1px solid var(--card-border); color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: 999px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; user-select: none; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.1s ease; } .lang-chip-btn:hover { border-color: var(--text-muted); color: var(--text-primary); } /* Отклик на нажатие — кнопка чуть проседает под пальцем. */ .lang-chip-btn:active { transform: scale(0.95); } .lang-chip-btn:focus-visible { outline: 2px solid var(--card-border-active); outline-offset: 2px; } .lang-chip-btn.is-on { background: var(--primary); border-color: var(--primary); color: var(--bg); } /* Галочка появляется только у выбранного языка. */ .lang-chip-btn .lang-chip-mark { width: 0; opacity: 0; overflow: hidden; transition: width 0.16s ease, opacity 0.16s ease; } .lang-chip-btn.is-on .lang-chip-mark { width: 10px; opacity: 1; } /* --- ПОДБОР ПО БАЛЛАМ (бета) --- */ .match-btn { width: 100%; display: flex; align-items: center; gap: 0.6rem; background: var(--bg-accent); border: 1px solid var(--card-border); color: var(--text-primary); padding: 0.75rem 0.85rem; border-radius: 12px; font-family: inherit; font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .match-btn:hover { border-color: var(--text-muted); } .match-btn.is-on { background: var(--primary); color: var(--bg); border-color: var(--primary); } .match-btn .match-icon { width: 16px; height: 16px; flex-shrink: 0; } .match-beta { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; border: 1px solid currentColor; opacity: 0.7; margin-left: auto; } .match-note { font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); margin: 0.5rem 0 0 0; } /* --- SEARCH BAR --- */ .search-container { max-width: 800px; margin: 0 auto 5.5rem auto; } /* Поиск над раскладкой, во всю её ширину. Раньше он был узким и центрировался по странице, но выглядел смещённым: его центр приходился на 735, а центр списка вузов — на 905, потому что слева стоит колонка фильтров. Строка не совпадала ни с чем и «висела» сама по себе. Теперь её края совпадают с краями раскладки: слева — с панелью фильтров, справа — со списком. */ .search-container.search-top { max-width: none; margin: 0 0 2.5rem 0; } /* Кнопка «Показать ещё» под списком. */ .uni-more-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; } .uni-more-hint { font-size: 0.85rem; color: var(--text-muted); } .search-bar { background: #FFFFFF; border: 1px solid rgba(102, 2, 60, 0.1); border-radius: 16px; padding: 0.6rem; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 8px 24px rgba(102, 2, 60, 0.02); } .search-input-wrapper { display: flex; align-items: center; flex-grow: 1; padding-left: 1rem; } .search-icon { color: var(--text-muted); width: 20px; height: 20px; margin-right: 0.75rem; } .search-bar input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 1rem; width: 100%; } .search-bar input::placeholder { color: var(--text-muted); } .btn-filter { background: rgba(102, 2, 60, 0.02); border: 1px solid rgba(102, 2, 60, 0.08); color: var(--text-secondary); padding: 0.7rem 1.3rem; font-size: 0.9rem; } .btn-filter:hover { color: var(--primary); background: rgba(102, 2, 60, 0.04); } /* На десктопе фильтры всегда на виду, кнопка «Фильтр» не нужна. */ @media (min-width: 1025px) { #filter-btn { display: none; } } /* Ниже 1025px колонка складывается: панель раскрывается кнопкой «Фильтр» и ложится над результатами. Полноценный мобильный вид — отдельная задача. */ @media (max-width: 1024px) { .home-layout { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.5rem; } /* В одну колонку раскладка идёт потоком: заголовок, панель фильтров, список. */ .home-title, .home-layout .filters-sidebar, .home-layout .home-results { grid-column: 1; grid-row: auto; } .home-title { margin-bottom: 0; } .filters-sidebar { position: static; max-height: none; display: none; } .filters-sidebar.is-open { display: block; } } /* --- ПАНЕЛЬ ФИЛЬТРОВ --- Прежний вид тянул за собой чужую палитру: синий тумблер, красный «Сбросить», бордовые рамки. Сайт монохромный, поэтому всё переведено на переменные темы — панель перестала спорить с остальным интерфейсом и работает в обеих темах. */ .filter-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--card-border); padding-bottom: 0.9rem; } .filter-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } /* Счётчик активных фильтров: сразу видно, что список уже сужен. */ .filter-count { display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: var(--bg); font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center; } .filter-count.is-visible { display: inline-block; } /* «Сбросить» приглушена, пока сбрасывать нечего — не тянет на себя внимание. */ .btn-filter-reset { background: none; border: none; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; cursor: default; padding: 0.25rem 0.55rem; border-radius: 8px; opacity: 0.5; transition: var(--transition); } .btn-filter-reset.is-active { color: var(--text-primary); opacity: 1; cursor: pointer; } .btn-filter-reset.is-active:hover { background: var(--bg-accent); } /* Группы разделены тонкими линиями — панель читается как список разделов. */ .filter-section, .filter-group { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--card-border); } .filter-panel > .filter-group:last-child { padding-bottom: 0; border-bottom: none; } .filter-section-label, .filter-group label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; } .price-range-display { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); } body.dark-theme .price-range-display { color: var(--text-primary); } /* Ползунок в монохроме: дорожка серая, бегунок цвета текста. */ .filter-slider { width: 100%; height: 4px; border-radius: 4px; background: var(--card-border); appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; } .filter-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card-bg); box-shadow: 0 0 0 1px var(--card-border); cursor: grab; transition: transform 0.15s ease; } /* Бегунок подрастает, пока его тянут. Класс, а не только :active — в разных браузерах :active на бегунке отрабатывает по-разному. */ .filter-slider::-webkit-slider-thumb:active, .filter-slider.is-grabbing::-webkit-slider-thumb { transform: scale(1.35); cursor: grabbing; box-shadow: 0 0 0 1px var(--card-border), 0 0 0 6px var(--bg-accent); } .filter-slider.is-grabbing::-moz-range-thumb { transform: scale(1.35); cursor: grabbing; } .filter-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card-bg); cursor: grab; } .filter-slider:focus-visible { box-shadow: 0 0 0 2px var(--card-border-active); } /* Toggle Switches */ .filter-toggles { display: flex; flex-direction: column; gap: 0.35rem; border-bottom: 1px solid var(--card-border); padding-bottom: 1rem; } /* Строка тумблера подсвечивается целиком — попасть можно куда угодно, не только в сам переключатель. */ .toggle-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.85rem; color: var(--text-primary); padding: 0.5rem 0.6rem; margin: 0 -0.6rem; border-radius: 10px; transition: background 0.15s ease; } .toggle-item:hover { background: var(--bg-accent); } .toggle-text { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; } .toggle-input { display: none; } .toggle-slider { width: 38px; height: 21px; flex-shrink: 0; background: var(--card-border); border: 1px solid transparent; border-radius: 20px; position: relative; transition: background 0.22s ease; } .toggle-slider::before { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); top: 2px; left: 2px; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } /* Включённый тумблер — цветом текста, а не сторонним синим. */ .toggle-input:checked + .toggle-slider { background: var(--primary); } .toggle-input:checked + .toggle-slider::before { transform: translateX(17px); background: var(--bg); } .toggle-input:focus-visible + .toggle-slider { box-shadow: 0 0 0 2px var(--card-border-active); } /* Выпадающие списки: своя стрелка вместо системной, рамка и фон из темы. */ .filter-group select { background-color: var(--bg-accent); border: 1px solid var(--card-border); color: var(--text-primary); padding: 0.65rem 2rem 0.65rem 0.75rem; border-radius: 10px; outline: none; cursor: pointer; font-size: 0.85rem; font-weight: 500; font-family: inherit; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; transition: border-color 0.15s ease, background-color 0.15s ease; } body.dark-theme .filter-group select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .filter-group select:hover { border-color: var(--text-muted); } .filter-group select:focus-visible { border-color: var(--card-border-active); } /* Выбранное значение выделяется — по панели видно, какие фильтры уже заданы. */ .filter-group select.is-set { border-color: var(--card-border-active); font-weight: 600; } /* --- СВОЙ ВЫПАДАЮЩИЙ СПИСОК --- Системный select открывался безжизненным серым окном не в стиле сайта и без анимации. Настоящий select остаётся в разметке (скрытый) — вся логика фильтров продолжает читать его значение, а видимую часть рисуем сами. */ .select-shell { position: relative; } .select-shell select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; } .select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--bg-accent); border: 1px solid var(--card-border); color: var(--text-primary); padding: 0.65rem 0.75rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500; font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } body.dark-theme .select-trigger { background: #111111; } .select-trigger:hover { border-color: var(--text-muted); } .select-trigger .select-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-muted); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .select-shell.is-open .select-trigger { border-color: var(--card-border-active); } .select-shell.is-open .select-chevron { transform: rotate(180deg); color: var(--text-primary); } /* Заданный фильтр виден по рамке и насыщенности текста. */ .select-shell.is-set .select-trigger { border-color: var(--card-border-active); font-weight: 600; } .select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 260px; overflow-y: auto; padding: 0.35rem; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); /* Анимация раскрытия: список слегка выезжает и проявляется. */ opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.18s; } body.dark-theme .select-menu { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6); } .select-shell.is-open .select-menu { opacity: 1; transform: translateY(0) scale(1); visibility: visible; max-height: 260px; } /* Списку, которому не хватило места снизу, раскрываемся вверх: у последнего фильтра в панели половина вариантов иначе уезжала под футер. Класс ставит open() в app-home.js, померив место под кнопкой. */ .select-shell.drops-up .select-menu { top: auto; bottom: calc(100% + 6px); transform: translateY(6px) scale(0.98); transform-origin: bottom center; } .select-shell.drops-up.is-open .select-menu { transform: translateY(0) scale(1); } /* Закрытый список схлопнут в ноль. visibility: hidden прячет его от глаз, но он остаётся в потоке прокрутки: абсолютно позиционированный блок высотой 255px продолжает растягивать страницу. На короткой странице (например, когда в каталоге один вуз) это давало пустую полосу под футером — выглядело так, будто футер вырос. Заметно было только на проде: локально вузов больше, страница длиннее, и хвост скрытого списка не выходил за футер. */ .select-shell:not(.is-open) .select-menu { max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; } .select-option { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; padding: 0.55rem 0.65rem; border-radius: 8px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .select-option:hover, .select-option.is-active { background: var(--bg-accent); color: var(--text-primary); } .select-option.is-current { color: var(--text-primary); font-weight: 600; } /* Список с несколькими вариантами: слева квадратик, как у обычного набора флажков. Без него отмеченное отличалось бы от остального только насыщенностью текста — на список из двадцати двух направлений этого мало, а пустой квадрат ещё и подсказывает, что вариантов можно отметить несколько. */ .select-shell.is-multiple .select-option { position: relative; display: flex; align-items: center; gap: 0.6rem; } .select-shell.is-multiple .select-option::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--card-border); border-radius: 4px; background: transparent; transition: background 0.12s ease, border-color 0.12s ease; } .select-shell.is-multiple .select-option.is-current::before { background: var(--primary); border-color: var(--primary); } /* Галочка внутри залитого квадрата — двумя гранями рамки, повёрнутыми на 45°. Цвет берём у фона страницы: --primary в тёмной теме белый, в светлой чёрный, и галочка одной картинкой в обеих темах не годится. */ .select-shell.is-multiple .select-option.is-current::after { content: ""; position: absolute; left: 16px; top: 50%; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg); } /* --- SECTIONS HEADERS --- */ .section-container { margin-bottom: 5rem; } .section-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 600; color: var(--primary); } /* --- UNIVERSITY CARDS --- */ .uni-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } /* Sleek Horizontal University Card with Right Corner Photo Filling to Footer Line */ .uni-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; cursor: pointer; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .uni-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); } .uni-card-top-content { display: flex; justify-content: space-between; align-items: stretch; width: 100%; min-height: 230px; } .uni-card-main-info { flex: 1; min-width: 0; padding: 0.75rem 1.25rem 0.75rem 0.75rem; display: flex; flex-direction: column; justify-content: center; } .uni-card-left-avatar { width: 130px; height: 130px; align-self: flex-start; border-radius: 18px; flex-shrink: 0; margin: 0; overflow: hidden; border: 1px solid var(--card-border); background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); } .uni-card-right-corner-photo { width: 360px; align-self: stretch; flex-shrink: 0; border-radius: 18px; margin: 0.75rem 0.75rem 0.75rem 0; overflow: hidden; background: var(--bg-accent); background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } /* Сроки приёма и стоимость переехали сюда из тела карточки: это два факта, по которым решают «подавать или нет», и стоять им логично рядом с кнопками, а не теряться в описании. Кнопки держатся правого края через margin-left: auto — при пустых метках (вуз не заполнил ни period, ни цену) они остаются там же. */ .uni-card-footer-bar { padding: 0.9rem 1.25rem; border-top: 1px solid var(--card-border); display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; background: rgba(0, 0, 0, 0.02); } .uni-card-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; } .uni-card-footer-actions { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; } /* На узком экране метки и кнопки не помещаются в строку. Кнопки уходят вниз и растягиваются: попадать в них пальцем важнее, чем экономить высоту. */ @media (max-width: 560px) { .uni-card-footer-actions { width: 100%; margin-left: 0; } .uni-card-footer-actions .btn { flex: 1; } } @media (max-width: 768px) { .uni-card-top-content { flex-direction: column-reverse; } .uni-card-main-info { padding: 1.5rem; } .uni-card-right-corner-photo { width: 100%; min-width: 100%; height: 220px; border-top-right-radius: 19px; border-top-left-radius: 19px; border-bottom-left-radius: 0; margin: 0; border: none; border-bottom: 1px solid var(--card-border); } /* Стрелки на снимке были 32px — меньше подушечки пальца, и в них приходилось целиться. Размеры заданы в разметке инлайном, поэтому перебиваем через !important. Листает и всё поле снимка по краям (см. setupCardPhotoGestures), стрелки остаются подсказкой. */ .uni-slide-arrow { width: 40px !important; height: 40px !important; font-size: 1.4rem !important; } } .glow-overlay { display: none; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 60%); } .uni-card-tag { background: #FFFFFF; border: 1px solid var(--accent); color: var(--primary); font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 8px; letter-spacing: 0.02em; } .uni-card-alias { font-family: var(--font-heading); font-size: 5.5rem; font-weight: 800; color: rgba(255, 255, 255, 0.12); letter-spacing: -0.05em; user-select: none; } .uni-card-body { padding: 2.5rem; display: flex; flex-direction: column; flex-grow: 1; } .uni-card-title { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.45rem; color: var(--primary); } .uni-card-location { font-size: 0.98rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.85rem; } .uni-card-location svg { width: 17px; height: 17px; color: var(--primary); } .uni-card-description { color: var(--text-secondary); font-size: 1rem; line-height: 1.65; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .uni-specialties-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.2rem; } .spec-tag { background: var(--bg-accent); border: 1px solid rgba(102, 2, 60, 0.05); color: var(--text-secondary); font-size: 0.85rem; padding: 0.3rem 0.8rem; border-radius: 8px; font-weight: 500; } .uni-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(102, 2, 60, 0.05); padding-top: 1.5rem; } .uni-stat { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; } .uni-stat svg { width: 18px; height: 18px; } .uni-card-actions { display: flex; gap: 0.75rem; } /* Осталось от старой боковой панели специальностей, но правило живое: в редакторе вуза поле названия направления носит класс spec-name, и по нему берёт этот размер и насыщенность шрифта. Убирать нельзя — изменится вид поля. */ .spec-name { font-size: 0.95rem; font-weight: 600; } /* User Applications Timeline */ .applications-timeline { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .no-applications { text-align: center; padding: 2.5rem 0; color: var(--text-muted); } .no-applications svg { width: 36px; height: 36px; margin-bottom: 0.75rem; color: var(--primary); } .no-applications p { font-size: 0.9rem; } /* Forms Styling (LIGHT ELEGANT) */ .custom-form { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } .required { color: var(--danger); } .form-group input, .form-group select, .form-group textarea { background: var(--bg-accent); border: 1px solid rgba(102, 2, 60, 0.08); color: var(--text-primary); padding: 0.85rem 1.25rem; border-radius: 10px; outline: none; font-family: var(--font-sans); font-size: 0.95rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); background: #FFFFFF; box-shadow: 0 0 12px rgba(102, 2, 60, 0.04); } .form-group select:disabled { opacity: 0.5; cursor: not-allowed; } /* File Upload input custom design */ .file-upload-wrapper { position: relative; width: 100%; } .file-upload-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } .file-upload-design { border: 2px dashed rgba(102, 2, 60, 0.15); background: rgba(102, 2, 60, 0.01); border-radius: 10px; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; transition: var(--transition); } .file-upload-input:hover + .file-upload-design { border-color: var(--primary); background: rgba(102, 2, 60, 0.03); } .upload-icon { width: 32px; height: 32px; color: var(--primary); } .upload-text { font-size: 0.9rem; color: var(--text-secondary); } .file-selected-name { font-size: 0.85rem; color: var(--primary); font-weight: 600; } /* --- PARTNER PAGE --- */ .partner-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; margin-top: 1rem; } @media (max-width: 992px) { .partner-layout { grid-template-columns: 1fr; } } .partner-sidebar { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 2rem; } .partner-form-container { max-width: 700px; margin: 0 auto; } /* --- ADMIN PANEL --- */ .admin-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } /* Действия кабинета вуза — отдельной строкой сразу под шапкой, прижаты вправо, под кнопку «Профиль». Отрицательный отступ съедает верхний padding страницы: без него между шапкой и кнопками зияла пустая полоса. */ .admin-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; margin: -1.75rem 0 1.75rem 0; } .admin-actions .btn { height: 38px; white-space: nowrap; } @media (max-width: 600px) { /* На телефоне три кнопки в ряд не помещаются и рвутся по слогам. */ .admin-actions { margin-top: 0; } .admin-actions .btn { flex: 1 1 100%; } } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; margin-bottom: 3.5rem; } .kpi-card { display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem 2.2rem; background: #FFFFFF; border: 1px solid var(--card-border); } .kpi-icon-wrapper { width: 52px; height: 52px; border-radius: 12px; background: rgba(102, 2, 60, 0.03); display: flex; align-items: center; justify-content: center; color: var(--primary); } .kpi-icon-wrapper.success-theme { color: #FFFFFF; background: var(--primary); } .kpi-data { display: flex; flex-direction: column; } .kpi-value { font-family: var(--font-sans); font-size: 2.2rem; font-weight: 600; color: var(--primary); line-height: 1.2; } .kpi-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .admin-analytics-grid { margin-bottom: 3.5rem; } .chart-card { padding: 2.5rem; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; } .card-header h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--primary); } .chart-container { height: 300px; position: relative; width: 100%; } .table-search { position: relative; width: 280px; } .table-search svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); } .table-search input { background: var(--bg-accent); border: 1px solid rgba(102, 2, 60, 0.08); border-radius: 10px; padding: 0.6rem 1rem 0.6rem 2.4rem; color: var(--text-primary); font-size: 0.9rem; width: 100%; outline: none; transition: var(--transition); } .table-search input:focus { border-color: var(--primary); background: #FFFFFF; } /* Leads Table System */ .table-responsive { width: 100%; overflow-x: auto; margin-top: 1.75rem; } .leads-table { width: 100%; border-collapse: collapse; text-align: left; } .leads-table th { color: var(--text-secondary); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; padding: 1.25rem 1.5rem; border-bottom: 2px solid rgba(102, 2, 60, 0.08); letter-spacing: 0.02em; } .leads-table td { padding: 1.4rem 1.5rem; font-size: 0.95rem; border-bottom: 1px solid rgba(102, 2, 60, 0.04); } .leads-table tr:hover td { background: rgba(102, 2, 60, 0.01); } .table-empty-row { text-align: center; color: var(--text-muted); padding: 4.5rem !important; } .table-empty-row svg { width: 44px; height: 44px; margin-bottom: 0.75rem; color: var(--primary); } .table-empty-row p { font-size: 1rem; } .table-status-select { background: var(--bg-accent); border: 1px solid rgba(102, 2, 60, 0.08); color: var(--text-primary); border-radius: 8px; padding: 0.4rem 0.65rem; outline: none; font-size: 0.9rem; cursor: pointer; font-weight: 600; transition: var(--transition); } .table-status-select:focus { border-color: var(--primary); background: #FFFFFF; } /* --- FOOTER --- */ .app-footer { border-top: 1px solid rgba(102, 2, 60, 0.04); padding: 1.5rem 0; background-color: rgba(245, 246, 240, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); flex-shrink: 0; } .footer-container { /* Подвал тянется на всю ширину — как и остальная страница. */ max-width: none; margin: 0; padding: 0 3rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; } .footer-links { display: flex; align-items: center; gap: 1.25rem; } .footer-link { color: var(--primary); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: var(--transition); } .footer-link:hover { text-decoration: underline; } .footer-sep { color: var(--card-border); font-size: 0.9rem; } /* Короткая подпись ссылки включается только в мобильном блоке ниже. */ .footer-link-short { display: none; } /* Подвал на телефоне занимал высоту в треть экрана: обе ссылки не помещались в строку и переносились по словам, а сверху и снизу оставалось по 1.5rem. Уменьшаем шрифт и отступы так, чтобы обе ссылки встали в одну строку. */ @media (max-width: 768px) { .footer-link-full { display: none; } .footer-link-short { display: inline; } /* Ссылки сжимаются как элементы флекса, и текст внутри всё равно переносился по словам — запрещаем перенос, места им теперь хватает. */ .footer-link { white-space: nowrap; } /* Подвал на телефоне — одна строка ссылок, и держать вокруг неё отступы десктопа незачем. Ниже него идут ещё 60px, зарезервированные под нижнюю панель: вместе с прежними отступами это давало под последней карточкой пустую полосу в 143px, и подвал читался как половина экрана. */ .app-footer { padding: 0.5rem 0; } .footer-container { padding: 0 1rem; gap: 0.6rem; } .footer-links { gap: 0.6rem; } .footer-link, .footer-sep { font-size: 0.78rem; } } /* --- TOAST NOTIFICATIONS --- */ /* Ширину контейнера приходится задавать явно. У элемента с position: fixed ширина «по содержимому» считается от всей ширины окна, а не от места слева от заданного right, поэтому длинное сообщение не переносилось, а вылезало за край экрана целой строкой. */ .toast-container { position: fixed; top: 2rem; right: 2rem; /* Пределы стоят на контейнере, а не на самой карточке: ширину «по содержимому» браузер зажимает между ними, и длинный текст упирается в верхний предел вместо того, чтобы вытянуться в одну строку. min-width в rem, а не в процентах: процент от ширины, которая сама считается по содержимому, браузеру разрешено считать нулём. */ min-width: 18rem; max-width: min(30rem, calc(100vw - 4rem)); display: flex; flex-direction: column; gap: 0.75rem; z-index: 10000000; } .toast { background: #FFFFFF; border: 1px solid rgba(16, 185, 129, 0.25); border-left: 5px solid var(--success); color: var(--text-primary); padding: 1.1rem 1.6rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(102, 2, 60, 0.06); /* Было 320px: на узком экране столько не помещалось, и карточка вылезала за край вместе с текстом. Ширину теперь задаёт контейнер, карточка её просто занимает целиком. */ min-width: 0; display: flex; /* Крестик держится у первой строки: у сообщения на три строки он иначе уезжал в середину карточки. */ align-items: flex-start; justify-content: space-between; gap: 0.5rem; animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* min-width: 0 обязателен: без него текст как элемент flex не сжимается ниже своей однострочной ширины и переносить его нечему. */ .toast-text { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; } @keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .toast.toast-danger { border-color: rgba(220, 38, 38, 0.25); border-left-color: var(--danger); } .toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; margin-left: 0.5rem; flex-shrink: 0; display: flex; align-items: center; } .toast-close:hover { color: var(--text-primary); } /* На телефоне уведомление занимает всю ширину за вычетом полей: отступ справа в 2rem вместе с минимальной шириной карточки не оставлял месту под текст. */ @media (max-width: 768px) { .toast-container { top: 1rem; left: 1rem; right: 1rem; min-width: 0; max-width: none; } .toast { padding: 0.9rem 1.1rem; } } /* Custom Select styling inside Dark Mode to prevent white text on white background bugs */ body.dark-theme select, body.dark-theme select option { background-color: var(--bg-accent) !important; color: var(--text-primary) !important; } /* Checkout Widget / Price Box */ .wb-price-card { padding: 2rem; border: 1px solid var(--card-border); } /* Specs Table */ .wb-specs-card { padding: 1.75rem; } .wb-specs-card h3 { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 1.25rem; color: var(--primary); } .wb-specs-list { display: flex; flex-direction: column; gap: 0.85rem; } .wb-spec-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px dashed rgba(102, 2, 60, 0.05); } body.dark-theme .wb-spec-item { border-bottom-color: rgba(255, 255, 255, 0.05); } .wb-spec-item:last-child { border-bottom: none; padding-bottom: 0; } .wb-spec-name { color: var(--text-secondary); } .wb-spec-value { font-weight: 600; color: var(--text-primary); } .wb-spec-value.link { color: var(--primary); text-decoration: none; } .wb-spec-value.link:hover { text-decoration: underline; } .wb-advantages-section h3, .wb-specialties-selection h3 { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 1rem; color: var(--primary); } /* Advantages Grid */ .wb-advantages-section h3 { margin-bottom: 1.25rem; } .wb-advantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 768px) { .wb-advantages-grid { grid-template-columns: 1fr; } } .wb-adv-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; height: 100%; } .wb-adv-card h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); } .wb-adv-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; } /* Specialties options layout */ .wb-specialties-selection { padding: 2rem; } .wb-spec-option { padding: 1.5rem; border: 1.5px solid var(--card-border); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; transition: var(--transition); } .wb-spec-option:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.08); } .wb-spec-opt-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; } .wb-spec-opt-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; } /* Quick Application Popup Modal Styles */ /* Раньше .modal-overlay и .modal-close-btn были объявлены дважды — здесь и ниже, в блоке предпросмотра; второе объявление перекрывало первое, и у первого оставались в силе только padding и overflow-y. Здесь собрано то, что действовало на самом деле. */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(14, 8, 20, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 2000; animation: fadeIn 0.3s ease-out; padding: 1.5rem; overflow-y: auto; } .modal-card { max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; border-radius: 24px; padding: 2.25rem; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); animation: modalPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes modalPopIn { from { opacity: 0; transform: scale(0.95) translateY(15px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--card-border); padding-bottom: 1rem; margin-bottom: 1.5rem; } .modal-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); background: var(--bg-accent); border: 1px solid var(--card-border); padding: 0.35rem 0.85rem; border-radius: 20px; margin-bottom: 0.5rem; } body.dark-theme .modal-badge { color: var(--text-primary); background: var(--bg-accent); border-color: var(--card-border); } .modal-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; } .modal-subtitle { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem; } .modal-close-btn { position: absolute; top: 1rem; right: 1.5rem; background: none; border: none; font-size: 2.2rem; color: var(--text-secondary); cursor: pointer; line-height: 1; padding: 0 0.5rem; transition: var(--transition); z-index: 100; pointer-events: auto; } .modal-close-btn:hover { color: var(--primary); transform: scale(1.1); } .wb-spec-opt-fee { font-family: var(--font-sans); font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 0.75rem; } .wb-spec-opt-action { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--primary); border-top: 1px dashed rgba(102, 2, 60, 0.05); padding-top: 0.85rem; } body.dark-theme .wb-spec-opt-action { border-top-color: rgba(255, 255, 255, 0.05); } .wb-spec-opt-action i { transition: transform 0.2s ease; } .wb-spec-option:hover .wb-spec-opt-action i { transform: translateX(4px); } /* --- ONBOARDING INTRO OVERLAY SYSTEM --- */ /* Оверлей сам себе окно прокрутки. Раньше он был flex с выравниванием по центру и overflow: hidden — анкета выше окна просто обрезалась сверху и снизу, и добраться до её краёв было нечем: при центрировании во flex переполнение уезжает в обе стороны и верхняя часть остаётся недостижимой. Отсюда блочная раскладка: прокрутка обычная, а по центру короткий шаг ставит уже сама карточка своей min-height. */ .onboarding-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; color: #2d1e2f; z-index: 9999; display: block; overflow-y: auto; /* Докрутив оверлей до конца, дальше начинала ехать страница под ним. */ overscroll-behavior: contain; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } body.dark-theme .onboarding-overlay { background-color: #000000; color: #FAF9F6; } /* Верхняя строка: выход на сайт и вход в аккаунт. Липкая, а не прокручиваемая вместе с анкетой: длинную форму листают вниз, и кнопка выхода не должна при этом исчезать. Фон свой же, чтобы поля не просвечивали под кнопками. */ .onboarding-topbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background-color: inherit; } /* Onboarding Container (content-only, no frame border) */ .onboarding-card { position: relative; width: 100%; max-width: 960px; /* Минус высота верхней строки: без вычитания короткий шаг оказывался ниже центра и появлялась пустая прокрутка на несколько десятков пикселей. */ min-height: calc(100% - 5rem); margin: 0 auto; padding: 1rem 2.5rem 2.5rem; z-index: 2; display: flex; flex-direction: column; justify-content: center; } /* Step wrapper styling */ .onboard-step { display: none; width: 100%; animation: onboardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .onboard-step.active { display: flex; flex-direction: column; } @keyframes onboardSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Step 1 styling */ .onboard-title { font-family: var(--font-heading); font-size: 5.5rem; font-weight: 700; text-align: center; letter-spacing: -0.03em; /* Было 2rem плюс подзаголовок с отступом 4rem. Подзаголовок с описанием платформы убран, поэтому воздух до кнопок держит сам заголовок. */ margin-bottom: 4rem; line-height: 1.1; color: var(--primary); animation: letterExpand 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; } body.dark-theme .onboard-title { color: #FAF9F6; text-shadow: 0 0 40px rgba(255, 255, 255, 0.1); } @keyframes letterExpand { from { letter-spacing: -0.1em; opacity: 0; } to { letter-spacing: -0.03em; opacity: 1; } } .onboard-actions-col { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } #onboard-start-btn { font-size: 1.3rem; padding: 1.1rem 3rem; border-radius: 12px; } /* Step 2 Inputs grid */ /* Размеры ужаты против прежних: заголовок был 3,2rem, подпись 1,3rem с отступом 3rem, поля 1,25rem — анкета не помещалась в окно высотой 720 px целиком. */ .onboard-step-title { font-family: var(--font-heading); font-size: 2.4rem; color: var(--primary); margin-bottom: 0.5rem; font-weight: 600; line-height: 1.2; } body.dark-theme .onboard-step-title { color: #FAF9F6; } .onboard-step-desc { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.5; margin-bottom: 1.75rem; } .onboard-step-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } /* Промежутки между полями меньше общих 1,4rem: анкета из четырёх полей, списка требований к паролю и двух согласий иначе не помещается в окно 720 px. */ .onboard-step .custom-form { gap: 1rem; margin-top: 1rem; } .onboard-step .form-group label { font-size: 1rem; margin-bottom: 0.4rem; color: var(--text-secondary); } .onboard-step .form-group input { font-size: 1.05rem; padding: 0.8rem 1.1rem; height: auto; border-radius: 12px; } .onboard-step .form-group input::placeholder { font-size: 1rem; } /* --- STEPPER COMPONENT --- */ .step-indicator-row { display: flex; width: 100%; align-items: center; padding: 1rem 0; margin-bottom: 2.5rem; } .step-indicator { position: relative; cursor: pointer; outline: none; z-index: 2; } .step-indicator-inner { display: flex; height: 2.2rem; width: 2.2rem; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; } /* Inactive State */ .step-indicator.inactive .step-indicator-inner { background-color: rgba(0, 0, 0, 0.05); color: var(--text-secondary); border: 1px solid rgba(0, 0, 0, 0.1); } body.dark-theme .step-indicator.inactive .step-indicator-inner { background-color: rgba(255, 255, 255, 0.05); color: #a3a3a3; border: 1px solid rgba(255, 255, 255, 0.1); } /* Active State */ .step-indicator.active .step-indicator-inner { background-color: var(--primary); color: var(--bg); border: 1px solid var(--primary); box-shadow: 0 0 15px var(--primary-glow); } /* Complete State */ .step-indicator.complete .step-indicator-inner { background-color: var(--primary); color: var(--bg); border: 1px solid var(--primary); } .active-dot { height: 0.55rem; width: 0.55rem; border-radius: 9999px; background-color: var(--bg); animation: scalePulse 1.5s infinite ease-in-out; } @keyframes scalePulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .step-connector { position: relative; margin-left: 0.75rem; margin-right: 0.75rem; height: 0.15rem; flex: 1; overflow: hidden; border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.1); z-index: 1; } body.dark-theme .step-connector { background-color: rgba(255, 255, 255, 0.1); } .step-connector-inner { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background-color: var(--primary); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .check-icon { display: none; width: 1rem; height: 1rem; stroke-width: 3px; color: var(--bg); } /* --- MOBILE PHONE OPTIMIZATION (max-width: 768px) --- */ @media (max-width: 768px) { /* Header padding and height */ .app-header { height: 65px; } .header-container { padding: 0 1rem; } .logo { font-size: 1.3rem; } .nav-link { font-size: 0.8rem; } .hero-subtitle { font-size: 1rem; line-height: 1.4; margin-top: 0.5rem; } .search-container { margin-bottom: 3rem; } /* Target profile form row alignment (from 3-col grid to 1-col on mobile) */ .form-row { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Tables formatting on mobile: hide non-critical columns if screen is too narrow */ .leads-table th:nth-child(2), .leads-table td:nth-child(2), .leads-table th:nth-child(5), .leads-table td:nth-child(5) { display: none !important; } /* General responsive improvements */ .glass-card { padding: 1.25rem !important; border-radius: 14px !important; } /* Onboarding (Intro) Mobile Overrides */ .onboarding-topbar { padding: 0.9rem 1rem; } .onboarding-card { padding: 0.5rem 1rem 2rem; max-width: 100%; min-height: calc(100% - 4rem); } .onboard-title { font-size: 2.8rem; margin-bottom: 2.5rem; word-break: break-word; } #onboard-start-btn { font-size: 1.1rem; padding: 0.9rem 2rem; width: 100%; text-align: center; display: inline-flex; justify-content: center; } .onboard-step-title { font-size: 1.8rem; margin-bottom: 0.5rem; } .onboard-step-desc { font-size: 1rem; line-height: 1.4; margin-bottom: 1.5rem; } .onboard-step .form-group label { font-size: 1rem; margin-bottom: 0.5rem; } .onboard-step .form-group input { font-size: 1.1rem; padding: 0.9rem 1.1rem; } .step-indicator-row { margin-bottom: 1.5rem !important; gap: 0.25rem !important; } .step-indicator-inner { width: 2.2rem !important; height: 2.2rem !important; font-size: 0.9rem !important; } .search-input-wrapper { width: 100% !important; } .modal-card { padding: 1.5rem 1.1rem !important; max-height: 92vh !important; border-radius: 20px !important; } /* Mobile AI Profile Hub & Container Padding */ .app-content { /* Снизу почти без отступа: дальше идёт подвал со своей рамкой сверху, и второй воздух между ними только удлинял страницу. */ padding: 1.25rem 1rem 1.25rem 1rem !important; } /* 80px между разделами на телефоне слишком много, а у последнего раздела этот отступ ещё и складывался с подвалом и полосой под нижнюю панель: под последней карточкой оставалось 180px пустоты. */ .section-container { margin-bottom: 2.5rem; } .section-container:last-child { margin-bottom: 0; } #ai-chat-messages { padding: 0.85rem !important; gap: 0.75rem !important; } .ai-bubble, .user-bubble { max-width: 92% !important; font-size: 0.85rem !important; padding: 0.75rem 0.95rem !important; } /* Touch-friendly buttons for mobile */ .btn { min-height: 44px; } } /* Permanent Mobile Bottom Navigation Bar (Visible only when show-mobile-nav is active on body) */ #mobile-bottom-nav, .mobile-bottom-nav { display: none !important; /* Hidden by default */ position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 60px !important; background: #000000 !important; color: #ffffff !important; border-top: 1px solid rgba(255, 255, 255, 0.18) !important; z-index: 999999999 !important; justify-content: space-around !important; align-items: center !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; transform: none !important; opacity: 1 !important; visibility: visible !important; /* Без перехода панель не уезжала бы, а мигала. */ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } @media (max-width: 1200px) { body.show-mobile-nav #mobile-bottom-nav, body.show-mobile-nav .mobile-bottom-nav { display: flex !important; } /* Панель висит поверх страницы, поэтому нижний край контента нужно приподнять — иначе последние кнопки и текст оказываются под ней и до них не добраться. */ body.show-mobile-nav { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } } /* Smoothly hidden state when scrolling down (YouTube Mobile animation) */ #mobile-bottom-nav.nav-hidden, .mobile-bottom-nav.nav-hidden { transform: translateY(100%) !important; pointer-events: none !important; } .mobile-nav-item { background: none; border: none; color: #888888; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; height: 100%; cursor: pointer; transition: color 0.2s ease, transform 0.15s ease; padding: 6px 0; text-decoration: none; } .mobile-nav-item:active { transform: scale(0.92); } .mobile-nav-item.active { color: #ffffff !important; } .mobile-nav-icon { width: 20px; height: 20px; stroke-width: 2; } .mobile-nav-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; } /* Highlighted Center Search Button */ .mobile-nav-search-btn { width: 36px; height: 36px; background: #ffffff; color: #000000; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.25); margin-bottom: 2px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mobile-nav-item:active .mobile-nav-search-btn { transform: scale(0.9); } .mobile-nav-search-btn .mobile-nav-icon { width: 18px; height: 18px; color: #000000; } /* --- ОКНО С НЕЙРОСЕТЯМИ --- Выезжает снизу по средней кнопке панели. Панель у нас с z-index под миллиард, поэтому окно должно быть выше неё, иначе шторка вылезала бы из-под кнопок. */ .ai-hub { position: fixed; inset: 0; z-index: 1000000000; display: flex; align-items: flex-end; } .ai-hub[hidden] { display: none; } .ai-hub-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.28s ease; } .ai-hub.is-open .ai-hub-backdrop { opacity: 1; } /* Шторка выезжает трансформацией, а не сменой display: анимировать display нельзя, и окно появлялось бы рывком. Само скрытие делает атрибут hidden — его JS снимает до начала анимации и возвращает после. */ .ai-hub-sheet { position: relative; width: 100%; background: var(--card-bg); border-top: 1px solid var(--card-border); border-radius: 22px 22px 0 0; padding: 0.6rem 1.1rem calc(1.35rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .ai-hub.is-open .ai-hub-sheet { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .ai-hub-backdrop, .ai-hub-sheet { transition: none; } } /* Полоска-ручка сверху. Она же кнопка закрытия: на телефоне это привычное место для «свернуть». */ .ai-hub-grabber { display: block; width: 44px; height: 4px; margin: 0.35rem auto 0.9rem auto; padding: 0; border: none; border-radius: 2px; background: var(--text-muted); opacity: 0.5; cursor: pointer; } .ai-hub-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.3rem 0; } .ai-hub-sub { font-size: 0.85rem; line-height: 1.4; color: var(--text-secondary); margin: 0 0 1.1rem 0; } .ai-hub-option { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; padding: 0.95rem 1rem; margin-bottom: 0.7rem; background: var(--bg-accent); border: 1px solid var(--card-border); border-radius: 16px; color: var(--text-primary); font-family: var(--font-sans); cursor: pointer; /* Нажатие отзывается так же, как у кнопок нижней панели. */ transition: border-color 0.2s ease, transform 0.15s ease; } .ai-hub-option:last-child { margin-bottom: 0; } .ai-hub-option:active { transform: scale(0.98); } .ai-hub-option-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } .ai-hub-option-icon i { width: 20px; height: 20px; color: var(--text-primary); } .ai-hub-option-text { flex: 1; min-width: 0; } .ai-hub-option-text b { display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.15rem; } .ai-hub-option-text small { display: block; font-size: 0.79rem; line-height: 1.35; color: var(--text-secondary); } /* Метку «Скоро» снимает JS, когда сеть включают флагом. */ .ai-hub-soon { flex-shrink: 0; align-self: flex-start; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--text-primary); color: var(--bg); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } /* Premium University Details Two-Column Layout */ .uni-details-layout-grid { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; } @media (max-width: 992px) { .uni-details-layout-grid { grid-template-columns: 1fr; gap: 2rem; } } .uni-details-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .uni-details-content { display: flex; flex-direction: column; gap: 2.5rem; } /* WYSIWYG Partner Editor Styles */ .editor-mode-bar { position: sticky; top: 80px; z-index: 100; display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--card-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 0.85rem 1.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px); transition: all 0.3s ease; } body.dark-theme .editor-mode-bar { background: rgba(18, 18, 18, 0.95); border: 1px solid var(--card-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .editor-mode-bar-left { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: var(--text-primary); font-weight: 500; } .editor-mode-bar-right { display: flex; gap: 0.75rem; } .editable-field { border: 1px dashed transparent; padding: 4px 8px; border-radius: 6px; transition: all 0.2s ease; outline: none; } .editable-field:hover { border-color: var(--primary); background: rgba(255, 255, 255, 0.03); } .editable-field:focus { border-color: var(--primary); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 2px rgba(102, 2, 60, 0.2); } .editable-field[data-placeholder]:empty:before { content: attr(data-placeholder); color: var(--text-muted); } .editor-h1 { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; } .editor-slogan-text { font-size: 1.05rem; color: var(--text-secondary); font-style: italic; } .editor-description-text { font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary); } .editor-input-inline { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.15); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; padding: 4px 8px; border-radius: 6px; width: 140px; text-align: right; outline: none; transition: border-color 0.2s; } .editor-input-inline:hover, .editor-input-inline:focus { border-color: var(--primary); background: rgba(255, 255, 255, 0.03); } .editor-textarea { width: 100%; background: #FFFFFF; border: 1px solid var(--card-border); color: var(--text-primary); border-radius: 8px; padding: 0.6rem; font-family: inherit; font-size: 0.9rem; outline: none; resize: vertical; transition: all 0.2s ease; } body.dark-theme .editor-textarea { background: rgba(0, 0, 0, 0.25); } .editor-textarea:focus { border-color: var(--primary); } .editor-spec-row { background: var(--bg-accent); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .editor-spec-header { display: flex; justify-content: space-between; align-items: center; } .editor-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .editor-spec-field { display: flex; flex-direction: column; gap: 0.4rem; } .editor-spec-field label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; } .editor-spec-input { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--card-border); color: var(--text-primary); padding: 0.5rem; border-radius: 6px; font-size: 0.85rem; outline: none; } .editor-spec-input:focus { border-color: var(--primary); } .editor-adv-row { background: var(--bg-accent); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .uni-tab-btn:hover { color: var(--primary) !important; opacity: 0.85; } /* --- SETTINGS DRAWER & TAB DESIGN --- */ .settings-drawer-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999998; opacity: 0; display: none; transition: opacity 0.3s ease; } .settings-drawer-backdrop.show { display: block; opacity: 1; } /* Заголовок раздела и подписи полей в ящиках настроек абитуриента и вуза. Раньше повторялись inline-стилем у каждого заголовка и каждой подписи. В селекторах подписей имя элемента стоит нарочно: подписи лежат внутри .form-group, а «.form-group label» задаёт свой вес и цвет; inline-стиль его перебивал всегда, и класс без имени элемента проигрывал бы ему. */ .drawer-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--primary); margin: 0 0 1rem 0; } label.drawer-label { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); } label.drawer-label-muted { color: var(--text-secondary); } .settings-drawer { position: fixed; top: 0; right: 0; height: 100vh; /* Было 850px. Расширено под вкладку «Подписка»: три тарифные карточки в прежнюю ширину не помещались — на каждую оставалось ~163px, и текст ломался по слогам. Остальным вкладкам лишняя ширина не мешает. */ width: 1180px; max-width: 95%; background: var(--card-bg); border-left: 1px solid var(--card-border); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3); z-index: 9999999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .settings-drawer.show { transform: translateX(0); } .settings-drawer-header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--card-border); display: flex; justify-content: space-between; align-items: center; } .settings-drawer-body { flex: 1; overflow-y: auto; padding: 2rem; display: grid; grid-template-columns: 1fr 240px; gap: 2rem; } @media (max-width: 768px) { .settings-drawer-body { grid-template-columns: 1fr; gap: 1.5rem; } } .settings-tab-menu { display: flex; flex-direction: column; gap: 1.25rem; padding-left: 1.5rem; border-left: 1px solid var(--card-border); } .settings-tab-item { display: flex; align-items: center; gap: 0.75rem; background: transparent; border: none; color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; padding: 0.5rem 0; cursor: pointer; transition: all 0.2s ease; position: relative; text-align: left; outline: none; } /* Horizontal line indicator matching the photo design */ .settings-tab-item::before { content: ""; width: 25px; height: 1px; background: var(--text-secondary); opacity: 0.3; transition: all 0.2s ease; flex-shrink: 0; } .settings-tab-item:hover { color: var(--text-primary); } .settings-tab-item:hover::before { width: 35px; background: var(--text-primary); opacity: 0.7; } .settings-tab-item.active { color: var(--primary) !important; font-weight: 600; } .settings-tab-item.active::before { width: 45px; height: 2px; background: var(--primary); opacity: 1; } [data-theme="dark"] .settings-tab-item.active { color: #ec4899 !important; } [data-theme="dark"] .settings-tab-item.active::before { background: #ec4899; } /* --- НАСТРОЙКИ АБИТУРИЕНТА НА ТЕЛЕФОНЕ --- Два экрана вместо одного: сначала список разделов, потом сам раздел во весь экран с кнопкой «назад». На узкой ширине прежний вид (лента вкладок сверху, содержимое под ней) заставлял листать мимо чужих полей, чтобы добраться до нужного. «Есть вопрос?» и «Выход» прижаты к низу списка и видны всегда. */ .settings-panel-back { display: none; width: 38px; height: 38px; flex-shrink: 0; margin-right: 0.75rem; align-items: center; justify-content: center; background: var(--bg-accent); border: 1px solid var(--card-border); border-radius: 10px; color: var(--text-primary); cursor: pointer; } .settings-panel-back i { width: 18px; height: 18px; } @media (max-width: 768px) { /* Настройки занимают весь экран: 95% оставляли полоску страницы сбоку, и палец постоянно попадал по ней вместо содержимого. */ .settings-drawer { width: 100%; max-width: 100%; border-left: none; } .settings-drawer .settings-drawer-header { padding: 1.1rem 1.1rem; } .settings-drawer.is-panel .settings-panel-back { display: inline-flex; } .settings-drawer .settings-drawer-body { display: flex; flex-direction: column; padding: 0; gap: 0; } /* Экран списка: вкладки на всю ширину, содержимое спрятано. !important нужен потому, что у обёртки содержимого display: flex прописан инлайном в разметке — без него правило не срабатывает вовсе. */ .settings-drawer.is-root .settings-tab-content { display: none !important; } .settings-drawer.is-root .settings-tab-menu { display: flex; flex-direction: column; flex: 1; gap: 0; padding: 0.5rem 1.1rem 1.25rem 1.1rem; border: none; } /* Экран раздела: список спрятан, раздел занимает всё. */ .settings-drawer.is-panel .settings-tab-menu { display: none; } .settings-drawer.is-panel .settings-tab-content { padding: 1.25rem 1.1rem 2rem 1.1rem; } /* Название раздела уже стоит в шапке — второй такой же заголовок сразу под ней выглядел как повтор. Внутренние подзаголовки («Смена пароля», «Удаление аккаунта») остаются. */ .settings-drawer.is-panel .settings-panel > h4:first-child { display: none; } /* Строка списка: во всю ширину, с разделителем и стрелкой. */ .settings-drawer .settings-tab-item { width: 100%; padding: 1.05rem 0; border-bottom: 1px solid var(--card-border); font-size: 1rem; color: var(--text-primary); } /* Чёрточка-указатель была рассчитана на боковое меню; в списке строк она превращается в мусор перед каждым словом. */ .settings-drawer .settings-tab-item::before { display: none; } /* Стрелка вправо — только у разделов: два нижних действия никуда не ведут. */ .settings-drawer .settings-tab-nav { justify-content: space-between; } .settings-drawer .settings-tab-nav::after { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.45; } /* Подсветка выбранной вкладки на телефоне не нужна: раздел и так открыт во весь экран, а в списке она выглядела как «здесь вы находитесь». */ .settings-drawer .settings-tab-item.active { color: var(--text-primary) !important; font-weight: 500; } /* Нижняя панель навигации лежит выше ящика настроек по z-index и закрывала собой «Выйти из аккаунта». Пока настройки открыты, панель не нужна: это отдельный экран со своим выходом. */ body.show-mobile-nav.ss-settings-open #mobile-bottom-nav { display: none !important; } /* Два нижних действия прижаты к низу и отбиты от списка разделов. */ .settings-drawer .settings-tab-foot { border-bottom: none; } .settings-drawer #sp-question-btn { border-top: 1px solid var(--card-border); padding-top: 1.25rem; } } /* --- СВОРАЧИВАЕМЫЙ БЛОК В НАСТРОЙКАХ --- Заголовок-кнопка и содержимое, которое разворачивается вниз. Высоту считает сетка (0fr → 1fr): так браузер анимирует переход, не зная заранее, сколько внутри полей, а display: none анимировать нельзя вовсе. */ .ss-collapse { margin-top: 2rem; border-top: 1px solid var(--card-border); padding-top: 1.25rem; } .ss-collapse-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0; background: transparent; border: none; color: var(--primary); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; text-align: left; cursor: pointer; } [data-theme="dark"] .ss-collapse-head { color: #ec4899; } /* Стрелка вниз, при раскрытии переворачивается. Нарисована рамкой, а не значком: значки подставляет lucide уже после открытия ящика. */ .ss-collapse-head::after { content: ""; width: 8px; height: 8px; flex-shrink: 0; margin-bottom: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .ss-collapse.is-open .ss-collapse-head::after { transform: rotate(-135deg); margin-bottom: -3px; } .ss-collapse-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .ss-collapse.is-open .ss-collapse-body { grid-template-rows: 1fr; } .ss-collapse-inner { overflow: hidden; min-height: 0; } /* Отступ от заголовка живёт внутри обрезаемой части: на самой обёртке он давал бы свёрнутому блоку высоту и оставлял пустую полосу под заголовком. */ .ss-collapse-inner > :first-child { margin-top: 1rem; } @media (prefers-reduced-motion: reduce) { .ss-collapse-body, .ss-collapse-head::after { transition: none; } } /* --- ПОДТВЕРЖДЕНИЕ УДАЛЕНИЯ АККАУНТА --- */ .ss-confirm { position: fixed; inset: 0; /* Выше ящика настроек (9999999): окно открывается поверх него. */ z-index: 10000001; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .ss-confirm[hidden] { display: none; } .ss-confirm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ss-confirm-card { position: relative; width: 100%; max-width: 420px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 1.5rem 1.4rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .ss-confirm-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: #dc3545; margin: 0 0 0.6rem 0; } .ss-confirm-text { font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); margin: 0 0 1.1rem 0; } .ss-confirm-hint { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.4rem 0; } /* Фразу видно как образец — её набирают вручную, поэтому она должна читаться однозначно, без догадок о заглавных буквах. */ .ss-confirm-phrase { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); background: var(--bg-accent); border: 1px solid var(--card-border); border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0 0 0.75rem 0; user-select: all; } .ss-confirm-input { width: 100%; padding: 0.75rem 0.9rem; border-radius: 10px; border: 1px solid var(--card-border); background: var(--bg-accent); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.95rem; outline: none; box-sizing: border-box; } .ss-confirm-input:focus { border-color: var(--text-muted); } .ss-confirm-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; } .ss-confirm-cancel, .ss-confirm-danger { flex: 1; padding: 0.75rem 1rem; border-radius: 12px; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease; } .ss-confirm-cancel { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); } .ss-confirm-danger { background: #dc3545; border: 1px solid #dc3545; color: #ffffff; } /* Пока фраза не совпала, кнопка неактивна — видно, что дело не в промахе. */ .ss-confirm-danger:disabled { opacity: 0.4; cursor: not-allowed; } /* Timeframe Selector & Buttons styling for light and dark themes */ .timeframe-selector { display: flex; gap: 0.25rem; background: var(--bg-accent); border: 1px solid var(--card-border); padding: 3px; border-radius: 8px; align-items: center; } .timeframe-btn { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: 6px; border: none; background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; outline: none; } .timeframe-btn:hover { color: var(--text-primary); } .timeframe-btn.active { background: var(--primary) !important; color: #FFFFFF !important; } body.dark-theme .timeframe-btn { color: #A396A6; } body.dark-theme .timeframe-btn:hover { color: #FFFFFF; } body.dark-theme .timeframe-btn.active { background: var(--primary) !important; color: #000000 !important; } /* ================================================================ STUDENT PROFILE PAGE REDESIGN ================================================================ */ .student-profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; max-width: 100%; margin: 0 auto; padding: 1rem 4% 1rem 4%; } @media (max-width: 900px) { .student-profile-layout { grid-template-columns: 1fr; } } /* Пара кнопок «Редактировать профиль» и «Настройки» в правом верхнем углу страницы, вровень с переключателем темы. Раньше это были инлайн-стили — их нельзя перебить медиазапросом, а на телефоне кнопки не помещались в строку и наезжали на карточку профиля. */ .sp-top-actions { position: absolute; top: 0; right: 0; gap: 0.75rem; z-index: 100; } .sp-top-actions .sp-top-action-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s; } .sp-top-actions .sp-top-action-btn:hover { border-color: var(--text-muted); } .sp-top-actions .sp-top-action-btn i { width: 16px; height: 16px; flex-shrink: 0; } /* Короткая подпись включается только в мобильном блоке ниже. */ .sp-action-label-short { display: none; } /* Sidebar */ .sp-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; align-self: start; /* Без этого колонка сетки не может стать уже своего содержимого: у элемента сетки минимальная ширина по умолчанию равна min-content, а лента заслуг набирает 1112px из четырёх карточек по 250px. На телефоне из-за этого весь профиль уезжал вправо и страница прокручивалась вбок. */ min-width: 0; } /* Profile Card */ .sp-profile-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 2rem 1.5rem; text-align: center; } .sp-profile-card .sp-avatar { width: 120px; height: 120px; border-radius: 16px; background: var(--bg-accent); border: 1px solid var(--card-border); margin: 0 auto 1.25rem auto; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800; color: var(--text-primary); overflow: hidden; } .sp-profile-card .sp-avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; } .sp-avatar:hover .avatar-hover-overlay { opacity: 1 !important; } .sp-profile-card .sp-name { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.35rem 0; line-height: 1.3; } .sp-profile-card .sp-meta { font-size: 0.88rem; color: var(--text-secondary); margin: 0 0 1.25rem 0; } .sp-profile-card .sp-share-btn { width: 100%; padding: 0.75rem 1.5rem; background: var(--text-primary); color: var(--bg); border: none; border-radius: 12px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; font-family: var(--font-sans); } .sp-profile-card .sp-share-btn:hover { opacity: 0.85; } /* Skills Card */ .sp-skills-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 1.5rem; } .sp-skills-card h4 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem 0; } .sp-skills-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .sp-skills-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; color: var(--text-primary); font-weight: 500; } .sp-skills-list .sp-skill-num { font-weight: 700; color: var(--text-secondary); min-width: 18px; } /* Applications Status Card */ .sp-apps-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .sp-apps-card .sp-apps-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-accent); border: 2px solid var(--card-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sp-apps-card .sp-apps-count { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); line-height: 1.3; } .sp-apps-card .sp-apps-count small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--text-secondary); } /* ---- RIGHT SIDE: Main Content ---- */ .sp-main { display: flex; flex-direction: column; gap: 2.5rem; /* См. .sp-sidebar: элемент сетки не сжимается уже min-content, а лента заслуг с горизонтальной прокруткой этот min-content и задирает. */ min-width: 0; } /* Merits Section */ .sp-merits-section h2, .sp-achievements-section h2, .sp-portfolio-section h2 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1.25rem 0; } .sp-merits-grid { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.6rem; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--card-border) var(--card-bg); } .sp-merits-grid::-webkit-scrollbar { height: 6px; } .sp-merits-grid::-webkit-scrollbar-track { background: var(--bg-accent); border-radius: 3px; } .sp-merits-grid::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; transition: background 0.2s; } .sp-merits-grid::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Подсказка под пустым рядом заслуг: одна строка обычным текстом, без рамки и без цветного блока. Это не предупреждение и не ошибка — просто указание, где вписать балл, поэтому и выглядеть должно как примечание, а не как баннер. */ .sp-merits-hint { margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; } .sp-merits-hint-link { border: none; background: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; } body.dark-theme .sp-merits-hint-link { color: var(--text-primary); } /* Карточка заслуги — это подпись и число, больше в ней ничего нет. Мешала не величина карточки, а пустота внутри: она занимала треть ряда независимо от содержимого, и половина её была воздухом. Теперь ширина считается по числу, а сама карточка крупная — балл виден с первого взгляда. */ .sp-merit-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.9rem 2.1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 0 0 auto; min-width: 235px; max-width: 320px; box-sizing: border-box; } .sp-merit-card .sp-merit-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .sp-merit-card .sp-merit-value { font-family: var(--font-heading); font-size: 4rem; font-weight: 700; color: var(--text-primary); line-height: 1; margin: 0; } .sp-merit-card .sp-merit-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 500; } /* Подпись о проверке заслуги сейчас выключена флагом MERIT_STATUS_VISIBLE. Правило нужно потому, что авторский display: flex выше перебивает браузерное [hidden] — без него скрытый блок остался бы на экране. */ .sp-merit-card .sp-merit-status[hidden] { display: none; } .sp-merit-card .sp-merit-status.verified { color: #10b981; } .sp-merit-card .sp-merit-status.not-verified { color: var(--text-muted); } .sp-merit-card .sp-merit-status .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .sp-merit-card .sp-merit-status.verified .status-dot { background: #10b981; } .sp-merit-card .sp-merit-status.not-verified .status-dot { background: var(--text-muted); } /* Значок скрепки под заслугой убран: сам факт приложенного документа виден в редакторе заслуг, а на карточке он только добавлял мелкую иконку под баллом. */ /* Achievements Section */ .sp-achievements-list { display: flex; flex-direction: column; gap: 0; } .sp-achievement-row { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--card-border); } .sp-achievement-row:last-child { border-bottom: none; } .sp-achievement-row .sp-ach-title { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); } /* Портфолио прижато к низу правой колонки. Обе колонки одной высоты, но справа содержимого меньше, и карточка документа висела на 80px выше карточек «Заявки» и «ИИ-консультант» — в одном ряду с ними, но не вровень. Когда портфолио разрастётся и правая колонка станет выше левой, свободного места не останется и блок встанет по своему месту сам. */ .sp-portfolio-section { margin-top: auto; } /* Карточка проекта в портфолио. Метрики те же, что у карточек боковой колонки («Заявки», «ИИ-консультант»): они стоят в одном ряду, и разница в высоте и скруглении была заметна. Раньше всё это лежало инлайном в разметке, поэтому медиазапросы до карточки не доставали. */ .sp-portfolio-item-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; /* Отступ чуть меньше, чем у карточек сбоку: там высоту задаёт кружок со значком, здесь — две строки текста. С min-height обе выходят ровно в 86px и встают вровень. */ padding: 1.1rem 1.5rem; min-height: 86px; box-sizing: border-box; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; } .sp-portfolio-item-card:hover { border-color: var(--text-muted); transform: translateY(-2px); } /* AI Proforientator Floating Button */ /* Кнопка не показывается нигде: на телефоне вход в нейросети — средняя кнопка нижней панели (окно #ai-hub), а на компьютере плавающей кнопки профориентатора быть не должно. Разметка и стили оставлены целыми, чтобы вернуть кнопку одной строкой, когда чат включат. !important обязателен: display этой кнопке ставит JS инлайном (block/none). */ .sp-ai-fab { display: none !important; position: fixed; bottom: 2rem; right: 2rem; background: var(--text-primary); color: var(--bg); border: none; border-radius: 14px; padding: 0.85rem 1.5rem; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1000; transition: transform 0.2s ease, box-shadow 0.2s ease; font-family: var(--font-sans); } .sp-ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } /* Значок был инлайн-стилем на самой кнопке — инлайн нельзя перебить медиазапросом, а на телефоне кнопка не показывается вовсе. Раскладка строчная, а не flex: display этой кнопке ставит JS (block/none), и flex-правила всё равно не применились бы. */ .sp-ai-fab i { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px; } .sp-settings-btn { flex: 1; padding: 0.85rem 1.5rem; background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--card-border); border-radius: 14px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease; font-family: var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .sp-settings-btn:hover { border-color: var(--text-muted); } /* --- ПРОФИЛЬ АБИТУРИЕНТА НА ТЕЛЕФОНЕ --- Раскладка рассчитана на две колонки и десктопные отступы; на 375px она выглядела чужой: кнопки поверх карточки, заголовки в треть экрана, воздуха больше, чем содержимого. Здесь та же страница пересобрана под одну колонку и палец. Ширина 700px, а не 900: между ними раскладка уже одноколоночная, но места ещё хватает на десктопные размеры. */ @media (max-width: 700px) { /* Кнопки встают в поток над карточкой. Поверх содержимого им на телефоне не хватает ширины: «Редактировать профиль» и «Настройки» вместе шире экрана и наезжали друг на друга. */ .sp-top-actions { position: static; width: 100%; margin-bottom: 1rem; padding: 0 4%; box-sizing: border-box; gap: 0.5rem; } .sp-top-actions .sp-top-action-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.7rem 0.6rem; font-size: 0.82rem; } /* Длинная надпись на узкой кнопке иначе переносится в две строки и кнопки становятся разной высоты. */ .sp-top-actions .sp-top-action-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-action-label-full { display: none; } .sp-action-label-short { display: inline; } .student-profile-layout { padding: 0 4% 1rem 4%; gap: 1.25rem; } /* Липкая колонка нужна была рядом со вторым столбцом. В одну колонку она только мешает: карточка пыталась залипнуть под шапкой. */ .sp-sidebar { position: static; gap: 0.85rem; } .sp-profile-card { padding: 1.5rem 1.25rem; } .sp-profile-card .sp-avatar { width: 88px; height: 88px; margin-bottom: 1rem; font-size: 2rem; } .sp-profile-card .sp-name { font-size: 1.15rem; } .sp-profile-card .sp-meta { margin-bottom: 1rem; } .sp-skills-card, .sp-apps-card { padding: 1.15rem 1.25rem; } /* Карточки ИИ-консультанта в профиле на телефоне нет: обе нейросети живут в окне по средней кнопке нижней панели, и здесь она была вторым входом в то же самое. На компьютере карточка остаётся. */ #sp-ai-consultant-card { display: none; } .sp-skills-card h4 { font-size: 1.05rem; margin-bottom: 0.75rem; } .sp-main { gap: 1.75rem; } .sp-merits-section h2, .sp-achievements-section h2, .sp-portfolio-section h2 { font-size: 1.3rem; margin-bottom: 0.9rem; } /* Заслуги листаются вбок — под ними для этого и стоят точки. Прилипание к краю карточки убирает «остановку на полукарточке». */ .sp-merits-grid { gap: 0.85rem; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; } .sp-merit-card { /* Была одна карточка на 76% ширины — три балла занимали три экрана прокрутки. Теперь их помещается две с половиной, и лента листается, только когда заслуг действительно много. */ min-width: 165px; padding: 1.5rem 1.6rem; scroll-snap-align: start; } .sp-merit-card .sp-merit-value { font-size: 3rem; } /* Название достижения и ссылка не помещаются в одну строку: заголовок сжимался до двух-трёх слов на строку, а ссылка липла к правому краю. */ .sp-achievement-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.9rem 0; } .sp-portfolio-item-card { padding: 1.15rem 1.25rem; gap: 0.85rem; } /* Подвал на профиле упирался в нижнюю панель: две ссылки в один ряд под кнопками читались как их продолжение. На телефоне в профиле он не нужен — те же ссылки есть на главной. */ body[data-page="profile"] .app-footer { display: none; } } /* Student Settings Drawer (Full Screen) */ .student-settings-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999998; opacity: 0; display: none; transition: opacity 0.3s ease; } .student-settings-backdrop.show { display: block; opacity: 1; } .student-settings-drawer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg); z-index: 9999999; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .student-settings-drawer.show { transform: translateY(0); } /* Editor Modal for Adding/Editing Skills, Portfolio, Achievements */ .sp-edit-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); z-index: 10000000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; } .sp-edit-modal-backdrop.show { display: flex; opacity: 1; } .sp-edit-modal { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 2rem; width: 500px; max-width: 95%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: scale(0.92); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .sp-edit-modal-backdrop.show .sp-edit-modal { transform: scale(1); } .sp-edit-modal h3 { font-family: var(--font-heading); font-size: 1.25rem; margin: 0 0 1.25rem 0; color: var(--text-primary); } /* Glowing effect for reviewed applications */ @keyframes apps-card-glow { 0%, 100% { box-shadow: 0 0 4px rgba(102, 2, 60, 0.15); border-color: var(--card-border); } 50% { box-shadow: 0 0 14px var(--primary); border-color: var(--primary); } } .sp-apps-card-glow { animation: apps-card-glow 2s infinite ease-in-out !important; } /* Student Profile Modal overlay specific styles to prevent top cut-off */ #student-profile-modal { align-items: flex-start !important; padding: 3rem 1rem !important; overflow-y: auto !important; } @property --border-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* Drag and Drop Glowing Border Effect (Rotating Conic Light) */ @keyframes borderLightRotate { 0% { --border-angle: 0deg; } 100% { --border-angle: 360deg; } } .drag-hover-glow, #universal-upload-dropzone:hover { border: 2px solid transparent !important; background: linear-gradient(var(--bg-accent), var(--bg-accent)) padding-box, conic-gradient(from var(--border-angle), transparent 25%, var(--primary) 50%, transparent 75%) border-box !important; animation: borderLightRotate 8s linear infinite !important; box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.3) !important; transform: scale(1.025); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* --- WHEEL PICKER -------------------------------------------------------- Барабан для числовых заслуг (IELTS, SAT, GPA и т.д.) вместо ручного ввода. Прокрутка нативная: scroll-snap делает всю работу по «залипанию» на делении, поэтому на слабых телефонах нет ни одного обработчика в кадре анимации. Плавное затухание к краям — через mask, а не через пересчёт каждого элемента. */ .wheel-picker { --wheel-item-h: 36px; /* По умолчанию — крупный вариант для интро: там барабан главный элемент шага. */ --wheel-visible: 5; position: relative; flex: 1; min-width: 0; height: calc(var(--wheel-item-h) * var(--wheel-visible)); border-radius: 12px; border: 1px solid var(--card-border); background: var(--bg-accent); overflow: hidden; } /* Полоса-указатель по центру: показывает, какое деление считается выбранным. */ .wheel-picker::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: var(--wheel-item-h); transform: translateY(-50%); border-radius: 8px; background: var(--card-bg); /* Не чистый чёрный/белый: полоса должна читаться как указатель барабана, а не спорить по контрасту с главной кнопкой формы. */ border: 1px solid rgba(var(--primary-rgb), 0.32); pointer-events: none; z-index: 1; } .wheel-picker-track { position: relative; z-index: 2; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; /* Отступы дают крайним делениям дойти до центра. */ padding: calc(var(--wheel-item-h) * (var(--wheel-visible) - 1) / 2) 0; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Края растворяются — отсюда ощущение барабана без 3D-трансформаций. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); } .wheel-picker-track::-webkit-scrollbar { display: none; } /* Барабан можно тянуть мышью — курсор об этом сообщает. */ .wheel-picker-track { cursor: grab; } .wheel-picker-track.is-dragging { cursor: grabbing; } .wheel-picker-track.is-dragging .wheel-picker-item { transition: none; } /* Профиль: тот же барабан, но проще и ниже — в модалке заслуг их несколько подряд, и крупный вариант оставлял бы на телефоне видимой одну строку списка. */ .wheel-picker.is-compact { --wheel-item-h: 32px; --wheel-visible: 3; border-radius: 10px; } .wheel-picker-item { height: var(--wheel-item-h); line-height: var(--wheel-item-h); scroll-snap-align: center; text-align: center; font-weight: 600; font-size: 0.95rem; color: var(--text-muted); letter-spacing: 0.01em; transition: color 0.18s ease, transform 0.18s ease; user-select: none; cursor: pointer; } .wheel-picker-item.is-selected { color: var(--text-primary); font-size: 1.05rem; transform: scale(1.04); } .wheel-picker-track:focus-visible { outline: 2px solid var(--card-border-active); outline-offset: -2px; border-radius: 12px; } /* Подпись справа от барабана: «баллов», «из 5» и т.п. */ .wheel-picker-unit { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .wheel-picker-wrap { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; } /* Прокрутка колесом мыши по всей странице не должна дёргать барабан, когда курсор просто пролетает над ним. */ @media (hover: none) { .wheel-picker-item { font-size: 1rem; } } /* На телефоне «Главная» и «Профиль» уже есть в нижней панели навигации — в шапке они дублировались и съедали место рядом с логотипом. «Выйти из аккаунта» остаётся: в нижней панели такого пункта нет. */ @media (max-width: 768px) { .app-header .header-actions .nav-link[data-page="home"], .app-header .header-actions #header-profile-btn { display: none !important; } } /* --- ПОЛНОЭКРАННЫЙ ФИЛЬТР НА ТЕЛЕФОНЕ --- Раньше панель раскрывалась прямо в потоке страницы, и список вузов оставался под ней: человек крутил фильтры и смотрел, как карточки исчезают. Теперь на телефоне фильтр занимает весь экран, а результат сообщается числом на кнопке. */ /* На десктопе этих элементов нет: панель и так всегда на виду. */ .filter-close-btn, .filter-apply-bar { display: none; } @media (max-width: 768px) { .filters-sidebar.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; /* Выше нижней панели навигации, у неё z-index 999999999 */ z-index: 1000000000; background: var(--bg); max-height: none; overflow: hidden; padding: 0; margin: 0; } .filters-sidebar.is-open .filter-panel { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; border: none; border-radius: 0; margin: 0; padding: 1rem 1.25rem 1.5rem; /* В колонке на компьютере панель — карточка со своим фоном (в тёмной теме #141414). На весь экран этот фон превращался в серый лист, а прилипшая шапка со «Сбросить» брала фон страницы — сверху выходила чёрная полоса, будто заголовок из другого окна. На телефоне фон один на всё: шапка, список и кнопка снизу. */ background: var(--bg); } /* Заголовок с крестиком остаётся на месте при прокрутке длинного списка фильтров */ .filters-sidebar.is-open .filter-header { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-top: 0.75rem; } .filters-sidebar.is-open .filter-close-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .filters-sidebar.is-open .filter-apply-bar { display: block; flex-shrink: 0; border-top: 1px solid var(--card-border); background: var(--bg); padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); } .filters-sidebar.is-open .filter-apply-bar .btn { width: 100%; height: 50px; font-weight: 700; font-size: 1rem; } } /* Поле даты целиком открывает календарь — курсор должен об этом говорить. Иконку календаря подкрашиваем под тёмную тему: по умолчанию она чёрная и на тёмном фоне сливалась. */ input[type="date"] { cursor: pointer; } body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator { /* color-scheme уже делает иконку светлой — инверсия сверху красила её обратно в чёрный. */ opacity: 0.7; cursor: pointer; } /* --- ТЕМА ВСТРОЕННЫХ ЭЛЕМЕНТОВ БРАУЗЕРА --- Календарь в поле даты рисует сам браузер, вне страницы, и нашими стилями он не красится: цвета кнопок, фон, подсветку сегодняшнего дня задаёт движок. Единственный рычаг — color-scheme: по нему браузер выбирает светлую или тёмную отрисовку. Без него календарь на тёмном сайте открывался ослепительно белым. Заодно это чинит выпадающие списки, полосы прокрутки и подсказки полей. */ body { color-scheme: light; } body.dark-theme { color-scheme: dark; } /* --- ПОДСКАЗКА «?» --- Всплывает по наведению и по фокусу с клавиатуры: без второго подсказка была бы недоступна тем, кто не пользуется мышью. */ .hint-tip { position: relative; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; /* Обычный курсор: вопросительный знак у стрелки выглядит как ошибка вёрстки. */ cursor: pointer; user-select: none; transition: color 0.2s, border-color 0.2s; } .hint-tip:hover, .hint-tip:focus-visible { color: var(--text-primary); border-color: var(--text-muted); outline: none; } .hint-tip-text { position: absolute; bottom: calc(100% + 10px); right: 0; width: 320px; max-width: 78vw; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary); font-size: 0.82rem; font-weight: 400; line-height: 1.5; text-align: left; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } .hint-tip-text strong { color: var(--text-primary); } .hint-tip:hover .hint-tip-text, .hint-tip:focus-visible .hint-tip-text { opacity: 1; visibility: visible; transform: translateY(0); } /* --- МЕСТО ПОД ПОЛОСУ ПРОКРУТКИ --- Короткая страница помещалась в экран без прокрутки, длинная — нет, и полоса то появлялась, то исчезала. Из-за этого содержимое дёргалось по ширине при переключении «Войти» / «Зарегистрироваться» и вообще при переходах между разделами. Резервируем место под полосу всегда. */ html { scrollbar-gutter: stable; } /* --- ИНСТРУКЦИЯ ПО ЗАПОЛНЕНИЮ КАРТОЧКИ ВУЗА --- Длинный текст, поэтому шапка и кнопка закреплены, а прокручивается только середина: иначе на телефоне кнопка «Понятно» оказывалась за экраном. */ .guide-card { max-width: 720px; width: 92%; max-height: 88vh; display: flex; flex-direction: column; padding: 0; border-radius: 20px; overflow: hidden; } .guide-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.75rem 1.75rem 1.25rem; border-bottom: 1px solid var(--card-border); flex-shrink: 0; } .guide-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; } .guide-step { display: flex; gap: 1rem; align-items: flex-start; } /* Номер шага держит ширину, чтобы текст всех шагов шёл по одной линии. */ .guide-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-accent); border: 1px solid var(--card-border); color: var(--text-primary); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .guide-step-body h4 { margin: 0.25rem 0 0.5rem 0; font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-primary); } .guide-step-body p { margin: 0 0 0.5rem 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); } .guide-step-body p:last-child { margin-bottom: 0; } .guide-step-body strong { color: var(--text-primary); } .guide-footer { flex-shrink: 0; padding: 1.1rem 1.75rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--card-border); } .guide-footer .btn { width: 100%; height: 48px; font-weight: 700; } @media (max-width: 768px) { .guide-card { width: 100%; max-width: none; max-height: 100vh; border-radius: 0; } .guide-header { padding: 1.25rem 1.1rem 1rem; } .guide-body { padding: 1.1rem; gap: 1.25rem; } .guide-footer { padding: 0.9rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); } } /* --- ТАРИФЫ В НАСТРОЙКАХ КАБИНЕТА --- Карточка построена по образцу тарифной страницы, которую прислал пользователь: знак, крупное название с подзаголовком, большая цена, кнопка во всю ширину, мелкая приписка под ней и только потом состав за разделителем. Ради этого расширена сама панель настроек (.settings-drawer): в прежние 850px три такие карточки не помещались и текст ломался по слогам. */ .plans-grid { display: grid; /* auto-fit с minmax, а не repeat(3, 1fr): колонка 1fr не сжимается уже своего содержимого, и карточка с самой длинной строкой растягивала сетку за пределы панели настроек. */ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; /* start, а не stretch: при stretch раскрытие состава у одной карточки вытягивало по высоте все три — пользователь это и заметил. */ align-items: start; } .plan-card { position: relative; min-width: 0; /* Длинные слова в узкой карточке иначе вылезают за рамку. */ overflow-wrap: anywhere; display: flex; flex-direction: column; padding: 1.4rem 1.3rem; border-radius: 18px; border: 1px solid var(--card-border); background: var(--bg-accent); } .plan-card.is-featured { border-color: var(--text-primary); } /* Подключённый тариф видно сразу, без чтения кнопок. */ .plan-card.is-current { border-color: #10b981; } /* Метка была бордовой с белым текстом и в тёмной теме сливалась с фоном. Берём цвет основного текста как фон — он контрастен в обеих темах. */ .plan-badge { position: absolute; top: -10px; left: 1.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--text-primary); color: var(--bg); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } /* В шапке карточки осталась одна метка «Ваш тариф» — знак-иконку убрали. Высота задана, чтобы карточки не разъезжались: метка есть только у одной. */ .plan-card-top { display: flex; align-items: flex-start; justify-content: flex-end; min-height: 20px; margin-bottom: 0.5rem; } .plan-current { display: none; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(16, 185, 129, 0.12); color: #10b981; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; } .plan-name { margin: 0; font-family: var(--font-heading); font-size: 1.45rem; line-height: 1.15; color: var(--text-primary); } .plan-tagline { margin: 0.25rem 0 0 0; font-size: 0.84rem; line-height: 1.35; color: var(--text-secondary); } /* Цена и её расшифровка стоят на одной базовой линии, как в образце: крупное число, рядом мелким — валюта, период и комиссия. */ .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; margin: 1.15rem 0 1.1rem 0; } .plan-price-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); } .plan-price-meta { font-size: 0.72rem; font-weight: 700; line-height: 1.3; color: var(--text-secondary); } .plan-price-meta small { display: block; font-weight: 400; font-size: 0.72rem; } /* Кнопка во всю ширину карточки — главное действие, как в образце. */ .plan-card .plan-choose-btn { width: 100%; height: 42px; padding: 0 0.6rem; border-radius: 10px; font-size: 0.88rem; font-weight: 700; } .plan-card .plan-choose-btn:disabled { opacity: 0.55; cursor: default; } .plan-note { margin: 0.5rem 0 0 0; text-align: center; font-size: 0.7rem; line-height: 1.3; color: var(--text-muted); } /* «Подробнее» под карточкой разворачивает состав тарифа. Свёрнутый вид — по умолчанию: в карточке видно цену и суть, а полный список открывается по желанию, иначе панель настроек превращается в простыню. */ .plan-more-btn { margin-top: 0.9rem; padding: 0; background: none; border: none; align-self: center; font-family: inherit; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .plan-more-btn:hover { opacity: 0.7; } /* Состав тарифа раскрывается плавно вниз. Свёрнутое состояние — строка сетки нулевой высоты, раскрытое — 1fr, то есть высота содержимого. Так браузер анимирует переход, не зная заранее, сколько пунктов в списке: max-height пришлось бы задавать «с запасом», и короткие карточки открывались бы рывком после паузы, а длинные обрезались. Свёрнутость больше не задаётся атрибутом hidden: display: none нельзя анимировать, переход из него не проигрывается вовсе. */ .plan-sheet { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .plan-sheet.is-open { grid-template-rows: 1fr; } /* Overflow здесь, а не на .plan-sheet: обрезать нужно именно содержимое строки, иначе в свёрнутом виде список вылезал бы за карточку. */ .plan-sheet-inner { overflow: hidden; min-height: 0; margin-top: 1.1rem; } /* Свёрнутая карточка не должна тянуть за собой отступ пустой строки. */ .plan-sheet:not(.is-open) .plan-sheet-inner { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .plan-sheet { transition: none; } } /* Линия-разделитель и отступ живут на заголовке состава, а не на обёртке: у обёртки они дали бы свёрнутой карточке высоту в 20px (padding и border не сжимаются нулевой строкой сетки), и под ценой висела бы пустая черта. Внутри обрезаемого содержимого они исчезают вместе с ним. */ .plan-sheet-title { margin: 0 0 0.7rem 0; padding-top: 1.2rem; border-top: 1px solid var(--card-border); font-size: 0.82rem; font-weight: 700; color: var(--text-primary); } .plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; line-height: 1.4; color: var(--text-secondary); } .plan-features li i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--text-primary); opacity: 0.75; } @media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; } } /* --- ВКЛАДКА «ПОДПИСКА»: ТРИ ЭКРАНА --- Текущая подписка → выбор тарифа → оплата. Разметка по образцу, который прислал пользователь: раздел, под ним строка «что это» слева и действие справа, разделы отбиты линиями. */ .plans-view[hidden] { display: none; } .plans-h { font-family: var(--font-heading); font-size: 1.15rem; color: var(--primary); margin: 0 0 1.2rem 0; } /* Кнопка «назад» текстом, а не иконкой: иконки с этой вкладки убраны. */ .plans-back { display: inline-block; margin: 0 0 0.9rem 0; padding: 0; background: none; border: none; font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; } .plans-back:hover { color: var(--text-primary); } /* --- Экран 1: текущая подписка --- */ .sub-current { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.6rem; } .sub-current-text { min-width: 0; } .sub-current-name { margin: 0; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.2; color: var(--text-primary); } .sub-current-tagline { margin: 0.25rem 0 0 0; font-size: 0.88rem; color: var(--text-secondary); } .sub-current-note { margin: 0.5rem 0 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); max-width: 480px; } .sub-section-title { margin: 1.8rem 0 0.9rem 0; font-family: var(--font-heading); font-size: 1rem; color: var(--text-primary); } .sub-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 0; border-top: 1px solid var(--card-border); } .sub-row-text { font-size: 0.88rem; color: var(--text-secondary); } .sub-invoices { border-top: 1px solid var(--card-border); } /* Шапка таблицы счетов стоит на месте и без строк: пустая таблица со столбцами понятнее, чем одна фраза «счетов нет» без всякого контекста. */ .sub-invoices-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.9rem 0 0.6rem 0; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); } .sub-empty { margin: 0; padding: 0.9rem 0 0.2rem 0; border-top: 1px solid var(--card-border); font-size: 0.83rem; color: var(--text-muted); } .sub-cancel-btn { background-color: #dc3545; border: 1px solid #dc3545; color: #ffffff; font-weight: 700; } .sub-cancel-btn:hover { opacity: 0.88; } /* --- Экран 3: оплата --- */ .checkout-box { border: 1px solid var(--card-border); border-radius: 14px; background: var(--bg-accent); padding: 0.4rem 1.1rem; max-width: 560px; } .checkout-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; font-size: 0.88rem; color: var(--text-secondary); border-bottom: 1px solid var(--card-border); } .checkout-row:last-child { border-bottom: none; } .checkout-row b { color: var(--text-primary); font-weight: 700; text-align: right; } .checkout-total b { font-size: 1.25rem; } .checkout-option { display: flex; align-items: flex-start; gap: 0.7rem; max-width: 560px; padding: 0.9rem 1.1rem; border: 1px solid var(--card-border); border-radius: 14px; background: var(--bg-accent); cursor: default; } .checkout-option input { margin-top: 0.2rem; accent-color: var(--text-primary); } .checkout-option-text b { display: block; font-size: 0.88rem; color: var(--text-primary); } .checkout-option-text small { display: block; margin-top: 0.2rem; font-size: 0.78rem; line-height: 1.4; color: var(--text-secondary); } .checkout-confirm-btn { width: 100%; max-width: 560px; height: 44px; margin-top: 1.3rem; border-radius: 10px; font-weight: 700; } .checkout-note { max-width: 560px; margin: 0.6rem 0 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); } /* --- ПОЛНОЭКРАННЫЙ ВЫБОР ТАРИФА --- Не .modal-overlay: у того z-index 2000, то есть ниже панели настроек (9999999), и окно открывалось бы под ней. Здесь свой слой поверх всего. */ .plans-modal { position: fixed; inset: 0; z-index: 10000000; background: var(--bg); overflow-y: auto; padding: 3.5rem 1.5rem 3rem 1.5rem; } .plans-modal[hidden] { display: none; } /* Пока окно открыто, страница под ним не прокручивается. */ body.plans-modal-open { overflow: hidden; } .plans-modal-body { max-width: 1000px; margin: 0 auto; } .plans-modal-step[hidden] { display: none; } .plans-modal-close { position: absolute; top: 1.2rem; right: 1.5rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--bg-accent); color: var(--text-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; } .plans-modal-close:hover { border-color: var(--text-primary); } .plans-modal-title { font-family: var(--font-heading); font-size: 2rem; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.6rem 0; } .plans-modal-sub { max-width: 700px; margin: 0 0 2rem 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); } @media (max-width: 700px) { .plans-modal { padding: 3.5rem 1rem 2rem 1rem; } .plans-modal-title { font-size: 1.5rem; } } /* --- ПОДТВЕРЖДЕНИЕ ОТМЕНЫ --- Отмена закрывает кабинет целиком, поэтому спрашиваем прямо. Слой выше окна тарифов: подтверждение может открыться поверх него. */ .confirm-modal { position: fixed; inset: 0; z-index: 10000001; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .confirm-modal[hidden] { display: none; } .confirm-card { width: 100%; max-width: 460px; padding: 1.6rem; border-radius: 18px; border: 1px solid var(--card-border); background: var(--card-bg); } .confirm-title { margin: 0 0 0.7rem 0; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.25; color: var(--text-primary); } .confirm-text { margin: 0 0 1.4rem 0; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); } .confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; } .confirm-actions .btn { min-width: 120px; height: 40px; } /* --- КАБИНЕТ ПОСЛЕ ОТМЕНЫ ПОДПИСКИ --- */ .partner-locked { max-width: 560px; margin: 4rem auto; padding: 2rem; border-radius: 18px; border: 1px solid var(--card-border); background: var(--bg-accent); text-align: center; } .partner-locked[hidden] { display: none; } .partner-locked-title { margin: 0 0 0.7rem 0; font-family: var(--font-heading); font-size: 1.6rem; color: var(--text-primary); } .partner-locked-text { margin: 0 0 0.6rem 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); } /* Срок до снятия с сайта — главное, что вуз должен унести с этого экрана. */ .partner-locked-deadline { margin: 0 0 1.6rem 0; font-size: 0.9rem; font-weight: 700; line-height: 1.5; color: #dc3545; } .partner-locked .btn { min-width: 200px; height: 44px; } .partner-locked-note { margin: 1rem 0 0 0; font-size: 0.78rem; color: var(--text-muted); } /* --- КОНТАКТ АБИТУРИЕНТА В КАРТОЧКЕ ЗАЯВКИ --- Закрыт, пока вуз не нажмёт «Открыть контакт». Оформлен как блок с документом рядом: это такое же вложение заявки, только выдаётся по отдельному действию. */ .lead-contact-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; border: 1px dashed var(--card-border); border-radius: 14px; } .lead-contact-text { min-width: 0; } .lead-contact-label { display: block; font-size: 0.75rem; color: var(--text-secondary); } .lead-contact-text strong { display: block; margin-top: 0.15rem; font-size: 0.95rem; color: var(--text-primary); overflow-wrap: anywhere; } .lead-contact-text small { display: block; margin-top: 0.25rem; font-size: 0.74rem; line-height: 1.4; color: var(--text-muted); } /* --- ОБЯЗАТЕЛЬНЫЕ СОГЛАСИЯ ПРИ РЕГИСТРАЦИИ --- */ /* Если человека не пустили дальше, он должен видеть, какая именно галочка не стоит. Палитра сайта монохромная, поэтому вместо красного берём рамку, подложку и короткое подрагивание: заметно, но не выбивается из оформления. */ .consent-check { border: 1px solid transparent; border-radius: 10px; padding: 0.5rem 0.6rem; margin: -0.5rem -0.6rem; transition: border-color 0.2s ease, background 0.2s ease; } /* Раскладка согласия: флажок слева, текст справа. Раньше эти стили были вписаны в разметку каждого из четырёх согласий по отдельности. Имя элемента в селекторе нарочно: согласие лежит в .form-group, а «.form-group label» ставит полужирный — inline-стиль его перебивал, класс без имени элемента проиграл бы. */ label.consent-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-weight: 400; } .consent-check input { width: auto; margin: 0.2rem 0 0 0; flex-shrink: 0; } .consent-check span { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } .consent-check a { color: var(--text-primary); text-decoration: underline; } .consent-check.consent-missing { border-color: var(--text-primary); background: var(--accent-light); animation: consent-nudge 0.28s ease; } @keyframes consent-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .consent-check.consent-missing { animation: none; } } /* --- ТРЕБОВАНИЯ К ПАРОЛЮ ПОД ПОЛЕМ --- */ /* Список заполняет renderPasswordRules(). Пока требование не выполнено, строка приглушена — это подсказка, а не сообщение об ошибке; выполненное загорается зелёным. Зелёный здесь тот же, что у подтверждённой заслуги. */ .pw-rules { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; } .pw-rules-title { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.1rem; } .pw-rule { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); transition: color 0.2s ease; } .pw-rule svg { flex-shrink: 0; margin-top: 0.08rem; opacity: 0.55; transition: opacity 0.2s ease; } .pw-rule.is-ok { color: #10b981; } .pw-rule.is-ok svg { opacity: 1; } /* Кнопка «Далее» на шаге с паролем: пока не отмечены оба согласия, она серая и не нажимается. Состояние выставляет syncOnboardNextButton(). */ #onboard-next-2-btn:disabled { background: var(--bg-accent); color: var(--text-muted); border-color: var(--card-border); box-shadow: none; cursor: not-allowed; } #onboard-next-2-btn:disabled:hover { background: var(--bg-accent); color: var(--text-muted); transform: none; } /* --- ПОЛЕ НОМЕРА ТЕЛЕФОНА (intl-tel-input) --- */ /* Библиотека рисует поле светлым и своими цветами. Привязываем её переменные к нашим, чтобы флаг и список стран жили в обеих темах сайта и не приходилось держать отдельный набор цветов. */ /* Открытый список стран библиотека вешает отдельной копией .iti прямо в body, поэтому ширину задаём только своей обёртке вокруг поля: иначе эта копия растянулась бы во всю страницу. Переменные, наоборот, нужны обеим — из них список берёт цвета. */ .iti:not(.iti--detached-country-selector) { display: block; width: 100%; } .iti { --iti-border-color: var(--card-border); --iti-country-selector-bg: var(--bg-accent); --iti-hover-color: var(--card-border); --iti-icon-color: var(--text-muted); } /* Список стран рисуется поверх формы: у секций страницы есть transform от анимации, из-за которого потомок с position: fixed ведёт себя как absolute — поэтому подпираем z-index, а не полагаемся на порядок в разметке. */ .iti__country-selector { z-index: 5; } /* Список стран красим сам, а не полагаемся на панель под ним: панель считает свою высоту по своим меркам и оказывается короче списка, из-за чего нижние строки оставались прозрачными и сквозь них просвечивала страница. */ .iti__country-list, .iti__search-input-wrapper { background-color: var(--iti-country-selector-bg); color: var(--text-primary); } .iti__country.iti__highlight { background-color: var(--card-border); } /* Поиск по странам — поле библиотеки, а не наша форма. Наши правила для .form-group input специфичнее её собственных и перебивали их: поле раздувалось вместе со шрифтом, слово «Поиск» наезжало на лупу, а выросшая строка поиска разводила панель и список по высоте. Возвращаем библиотеке её размеры — отступ слева считается от лупы, справа от крестика, как у неё и задумано. */ .iti .iti__search-input-wrapper input.iti__search-input { color: var(--text-primary); background: transparent; font-family: inherit; font-size: 1rem; height: auto; border: 0; border-radius: 3px; padding: 10px calc(var(--iti-spacer-horizontal) * 2 + var(--iti-clear-icon-size)) 10px calc(var(--iti-spacer-horizontal) * 2 + var(--iti-globe-icon-size)); } .iti .iti__search-input-wrapper input.iti__search-input::placeholder { font-size: 1rem; } /* Поле внутри обёртки — наше обычное поле формы, ширину задаёт обёртка. */ .iti input.iti__tel-input { width: 100%; } /* --- РАЗДЕЛ «ЛИЧНЫЙ КАБИНЕТ» В НАСТРОЙКАХ ВУЗА --- */ /* Не форма, а сводка: каждый блок — одно состояние кабинета и одно действие рядом с ним. Рамка нужна, чтобы блоки не слипались в сплошной текст. */ .ps-account-block { border: 1px solid var(--card-border); border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; background: var(--bg-accent); } .ps-account-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .ps-account-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); } /* Цвет состояния ставит renderPartnerAccountPanel(): он общий с плашкой на карточке вуза, чтобы «Приём завершён» выглядел одинаково в обоих местах. */ .ps-account-state { font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .ps-account-value { margin: 0 0 0.35rem 0; font-size: 1.05rem; font-weight: 600; color: var(--text-primary); } .ps-account-hint { margin: 0 0 0.9rem 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); } /* --- ФОРМА ДТМ --- */ /* Три блока показывают, из чего складывается экзамен, и собирают предметы; балл вписывается один, внизу. Чисел внутри блоков нет: в сертификате они по отдельности не напечатаны, и человек всё равно взял бы их из воздуха. Форма длинная и однообразная — три почти одинаковых блока подряд, — поэтому вес вынесен в отдельный значок слева, а заполненный блок обводится ярче: так видно и чем блоки различаются, и что уже сделано. */ .dtm-card { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; text-align: left; } .dtm-block { border: 1px solid var(--card-border); border-radius: 16px; padding: 1rem 1.15rem 1.15rem; background: var(--bg-accent); transition: border-color 0.2s ease; } .dtm-block:focus-within { border-color: var(--card-border-active); } .dtm-block-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; } /* Вес ответа — то единственное, чем профильные предметы различаются между собой, и то, по чему выбирают порядок в паре. Заполненный блок делает его контрастным: строка «×3,1» на тёмном читается как отметка о готовности. */ .dtm-block-weight { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 3.1rem; padding: 0.35rem 0.5rem; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: var(--transition); } .dtm-block.is-filled { border-color: var(--card-border-active); } .dtm-block.is-filled .dtm-block-weight { background: var(--primary); border-color: var(--primary); color: var(--bg); } .dtm-block-titles { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; } .dtm-block-title { font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--text-primary); } .dtm-block-sub { font-size: 0.76rem; line-height: 1.35; color: var(--text-muted); } .dtm-block-max { flex: 0 0 auto; align-self: flex-start; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--accent-light); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .dtm-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .dtm-field label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); } .dtm-field select { width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-primary); font-family: inherit; font-size: 0.92rem; outline: none; transition: border-color 0.2s ease; } .dtm-field select:focus { border-color: var(--card-border-active); } /* Второй предмет до выбора первого выбрать нельзя: пара упорядоченная, и список вторых зависит от первого. Поле не прячется, а гаснет — иначе форма прыгает. */ .dtm-field select:disabled { opacity: 0.45; cursor: not-allowed; } /* Итоговый балл — единственное число, которое человек вводит, и единственное, которое напечатано в сертификате. Стоит внизу и выглядит иначе, чем блоки: сначала из чего экзамен состоит, потом что за него получено. */ .dtm-total-block { margin-top: 0.25rem; border: 1px solid var(--card-border-active); border-radius: 16px; padding: 1rem 1.15rem; background: var(--card-bg); } .dtm-total-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; } .dtm-total-field { display: flex; align-items: baseline; gap: 0.5rem; } .dtm-total-input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; border: none; background: transparent; color: var(--text-primary); font-family: inherit; font-weight: 700; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; outline: none; padding: 0; } .dtm-total-input::placeholder { color: var(--text-muted); opacity: 0.5; } .dtm-total-suffix { flex: 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } @media (max-width: 560px) { /* На телефоне подпись предела уезжает под название: «Второй профильный» и «до 63» в одну строку не помещаются, и заголовок ломался пополам. */ .dtm-block-head { flex-wrap: wrap; } .dtm-block-titles { flex: 1 1 60%; } .dtm-block-max { order: 3; margin-left: 3.85rem; } } /* Кнопка ДТМ в строке заслуг: показывает балл и профильную пару, открывает окно правки. Барабана здесь нет — см. комментарий в app-student-edit.js. */ .dtm-merit-button { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--card-border); background: var(--bg-accent); color: var(--text-primary); font-family: inherit; cursor: pointer; text-align: left; transition: border-color 0.15s ease; } .dtm-merit-button:hover { border-color: var(--card-border-active); } .dtm-merit-value { font-weight: 700; font-size: 1rem; flex-shrink: 0; } /* Пара предметов подсказывает, что именно правится, но место в строке уступает баллу: длинные названия обрезаются многоточием, а не ломают строку. */ .dtm-merit-note { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Профильная пара под баллом ДТМ в карточке абитуриента: вузу важно не только число, но и какие предметы сдавал человек — на его направление они могут не подойти вовсе. */ .sp-merit-detail { font-size: 0.72rem; line-height: 1.35; color: var(--text-secondary); margin-top: 0.15rem; }