/* ════════════════════════════════════════════════════════════ НОВЫЕ ЛЮДИ · Башкортостан — ОТДЕЛЬНЫЙ МОБИЛЬНЫЙ ДИЗАЙН Включается классом .is-mobile на (ширина ≤ 760px). Своя оболочка: верхняя панель + нижние табы + шторки. ════════════════════════════════════════════════════════════ */ /* ─────────── Каркас ─────────── */ .m-shell{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); } .m-top{ position:sticky; top:0; z-index:20; height:58px; flex:none; display:flex; align-items:center; gap:12px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--hairline); } .m-logo{ height:36px; width:auto; display:block; } .m-title{ flex:1; font-size:17px; font-weight:600; letter-spacing:-0.4px; color:var(--ink); } .m-icon-btn{ background:none; border:none; padding:8px; margin:-8px; color:var(--ink); cursor:pointer; position:relative; display:flex; } .m-icon-btn svg{ width:24px; height:24px; display:block; } .m-bell-badge{ position:absolute; top:0; right:0; min-width:17px; height:17px; padding:0 4px; background:var(--brand); color:#fff; border-radius:var(--r-pill); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); font-variant-numeric:tabular-nums; } .m-main{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:78px; } /* ─────────── Нижние табы ─────────── */ .m-tabs{ position:fixed; left:0; right:0; bottom:0; z-index:20; height:62px; display:flex; background:var(--surface); border-top:1px solid var(--hairline); padding-bottom:env(safe-area-inset-bottom); } .m-tab{ flex:1; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:10.5px; font-weight:500; padding:0; } .m-tab svg{ width:23px; height:23px; } .m-tab.on{ color:var(--brand-deep); } .m-tab.on svg path,.m-tab.on svg rect{ stroke:var(--brand-deep); } /* ─────────── Шторки (bottom sheets) ─────────── */ .m-scrim{ position:fixed; inset:0; background:rgba(21,24,31,.42); z-index:25; } .m-scrim[hidden]{ display:none; } .m-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--surface); border-radius:16px 16px 0 0; max-height:82vh; display:flex; flex-direction:column; box-shadow:0 -8px 30px rgba(21,24,31,.16); } .m-sheet[hidden]{ display:none; } .m-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; font-size:16px; font-weight:600; border-bottom:1px solid var(--hairline-faint); } .m-sheet-x{ background:none; border:none; font-size:17px; color:var(--muted); cursor:pointer; padding:4px; line-height:1; } .m-sheet-body{ overflow-y:auto; padding-bottom:calc(12px + env(safe-area-inset-bottom)); } .m-user{ display:flex; gap:12px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--hairline-faint); } .m-user .name{ font-size:15px; font-weight:600; } .m-user .role{ font-size:12.5px; color:var(--muted); margin-top:2px; } .m-menu-group{ font-size:10.5px; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); padding:18px 20px 6px; } .m-menu-item{ display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--hairline-faint); padding:16px 20px; font-size:15.5px; color:var(--ink); cursor:pointer; } .m-menu-item:active{ background:var(--brand-cream); } /* уведомления в шторке используют общие стили .notif */ .m-sheet .notif{ grid-template-columns:10px 1fr; gap:12px; padding:15px 18px; } /* ─────────── Контент под мобильный экран ─────────── */ .is-mobile .wrap{ max-width:none; padding:18px 16px 8px; } .is-mobile .page-head{ padding:6px 0 16px; margin-bottom:18px; } .is-mobile .page-head h1{ font-size:25px; letter-spacing:-0.7px; } .is-mobile .page-head p{ font-size:14px; margin-top:12px; } .is-mobile .page-head .eyebrow{ margin-bottom:12px; } .is-mobile .block{ margin-bottom:30px; } .is-mobile .grid-2, .is-mobile .grid-3{ grid-template-columns:1fr; } .is-mobile .stats{ grid-template-columns:1fr 1fr; } .is-mobile .form-row{ grid-template-columns:1fr; gap:0; } /* строки-карточки (события, программы, списки) */ .is-mobile .row-head{ grid-template-columns:46px 1fr; gap:12px; padding:16px; align-items:start; } .is-mobile .row-aside{ grid-column:1 / -1; margin-top:4px; } .is-mobile .row-main h3{ font-size:16px; } .is-mobile .row-meta{ gap:7px 12px; } .is-mobile .chev{ display:none; } .is-mobile .row.open .row-detail{ max-height:900px; } /* таблицы → компактнее */ .is-mobile .tbl th,.is-mobile .tbl td{ font-size:13px; } .is-mobile .card{ padding:18px 18px; } /* программа: подробности */ .is-mobile .prog-hero .band{ height:96px; } .is-mobile .prog-hero .pb{ padding:20px; } .is-mobile .prog-hero h1{ font-size:26px !important; } /* кнопки на всю ширину в формах */ .is-mobile .card form .btn-primary:not(.btn-block){ width:100%; justify-content:center; } /* ─────────── Онбординг (мобильный) ─────────── */ .is-mobile .onboard-bar{ padding:12px 16px; } .is-mobile .onboard-logo{ height:40px; } .is-mobile .onboard-step{ font-size:9px; letter-spacing:1px; max-width:140px; text-align:right; } .is-mobile .onboard-scroll .wrap{ max-width:none; padding:0 16px 40px; } .is-mobile .onboard-scroll .page-head{ padding-top:28px; } .is-mobile .edu-illus{ height:150px; } .is-mobile .edu-body{ padding:22px 18px 26px; } .is-mobile .edu-body h2{ font-size:21px; } .is-mobile .edu-body p,.is-mobile .edu-body li{ font-size:14px; } .is-mobile .people{ grid-template-columns:1fr; } .is-mobile .edu-nav{ gap:8px; } .is-mobile .edu-nav .btn{ padding:11px 14px; } /* квиз */ .is-mobile .quiz-opt{ padding:13px 14px; } /* ─────────── Вход / регистрация (мобильный) ─────────── */ .auth-m-logo{ display:none; } .is-mobile .auth-wrap{ grid-template-columns:1fr; min-height:100dvh; } .is-mobile .auth-form{ max-width:none; min-height:100dvh; padding:40px 22px; justify-content:flex-start; } .is-mobile .auth-m-logo{ display:block; height:56px; width:auto; margin:8px 0 26px; } .is-mobile .auth-form h2{ font-size:26px; } .is-mobile .form-row .field{ margin-bottom:20px; } /* скрываем плавающий desktop-виджет уведомлений на мобильном (используется колокольчик в шапке) */ .is-mobile .nw{ display:none; }