/* ═══════════════════════════════════════════════════════════════════════════════ ATYRAU UNIVERSITY — PREMIUM MOBILE UI Mobile-First Design System | Ultra-Premium Level Version: 1.0 | 2025 ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ 1. MOBILE DESIGN TOKENS ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { :root { /* ─── Motion System ─── */ --motion-instant: 100ms; --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; --motion-slower: 600ms; /* Premium Easing Curves */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* ─── Mobile Typography ─── */ --m-text-xs: 0.75rem; /* 12px */ --m-text-sm: 0.875rem; /* 14px */ --m-text-base: 1.0625rem; /* 17px - iOS standard */ --m-text-lg: 1.1875rem; /* 19px */ --m-text-xl: 1.375rem; /* 22px */ --m-text-2xl: 1.75rem; /* 28px */ --m-text-3xl: 2.25rem; /* 36px */ --m-text-4xl: 2.75rem; /* 44px */ /* ─── Mobile Spacing ─── */ --m-space-xs: 0.25rem; /* 4px */ --m-space-sm: 0.5rem; /* 8px */ --m-space-md: 1rem; /* 16px */ --m-space-lg: 1.5rem; /* 24px */ --m-space-xl: 2rem; /* 32px */ --m-space-2xl: 2.5rem; /* 40px */ --m-space-3xl: 3rem; /* 48px */ /* ─── Touch Targets ─── */ --touch-min: 44px; --touch-comfortable: 48px; /* ─── Mobile Radius ─── */ --m-radius-sm: 8px; --m-radius-md: 12px; --m-radius-lg: 16px; --m-radius-xl: 20px; --m-radius-2xl: 24px; --m-radius-full: 9999px; /* ─── Mobile Shadows (Softer) ─── */ --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --m-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --m-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --m-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ─── Glassmorphism ─── */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-bg-heavy: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.3); --glass-blur: blur(20px); --glass-blur-heavy: blur(40px); /* ─── Safe Areas ─── */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* ─── Bottom Nav Height ─── */ --bottom-nav-height: 72px; --header-height: 60px; } /* ─── Dark Mode Ready Tokens ─── */ @media (prefers-color-scheme: dark) { :root { --glass-bg: rgba(30, 30, 30, 0.85); --glass-bg-heavy: rgba(20, 20, 20, 0.95); --glass-border: rgba(255, 255, 255, 0.1); --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --m-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --m-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); } } } /* ═══════════════════════════════════════════════════════════════════════════════ 2. MOBILE BASE & UTILITIES ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Hide desktop navigation */ .au-topbar { display: none !important; } /* Body adjustments for mobile nav */ body { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)); } /* ═══ FIX 1: TOP BAR - Language Selector & Social Icons ═══ */ .container-fluid.top-navbar { padding: 8px 12px !important; background: #1a472a !important; display: flex !important; align-items: center !important; min-height: 40px !important; } .top-navbar .container { padding: 0 !important; display: flex !important; align-items: center !important; width: 100% !important; } .top-navbar .row { align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; margin: 0 !important; } .top-navbar .col-10 { flex: 1; display: flex !important; align-items: center; gap: 4px; overflow: hidden; } /* Центрирование языков - вниз и вправо (вертикально и горизонтально) */ .top-navbar .col { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; margin-top: 25px !important; } .top-navbar .list-group-horizontal { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; margin-top: 15px !important; gap: 4px !important; width: auto !important; } .top-navbar .list-group-item { padding: 6px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* Show accessibility button on mobile (Users request "Жаңарту/Update" circle) */ /* Position: ABOVE the bot */ #accessibility-mode-button { display: flex !important; position: fixed !important; bottom: 154px !important; /* Higher than bot */ right: 20px !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: white !important; /* White background as in screenshot */ color: transparent !important; /* Hide text */ z-index: 9990 !important; overflow: hidden !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; } #accessibility-mode-button::before { content: '\f06e' !important; /* FA Eye icon */ font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; color: #187D35 !important; /* University Green */ font-size: 22px !important; } #accessibility-mode-button::after { display: none !important; } /* Show Bot/AI-Sana button in header on mobile (not floating) */ .btn-ai-sana { /* Убираем fixed position - кнопка должна быть в хедере */ position: static !important; display: inline-flex !important; padding: 6px 12px !important; font-size: 11px !important; border-radius: 20px !important; gap: 4px !important; background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important; color: white !important; border: none !important; align-items: center !important; justify-content: center !important; } .btn-ai-sana svg { width: 14px !important; height: 14px !important; } /* ═══ HIDE ALL SOCIAL ICONS COMPLETELY ═══ */ .top-navbar .icons, .top-navbar a.icons, .top-navbar [class*="icon"], .top-navbar a[href*="facebook"], .top-navbar a[href*="instagram"], .top-navbar a[href*="twitter"], .top-navbar a[href*="vk.com"], .top-navbar a[href*="youtube"], .top-navbar a[href*="telegram"], .top-navbar .col-10>a:not([href*="lang"]), .top-navbar img[alt*="facebook"], .top-navbar img[alt*="instagram"], .top-navbar img[alt*="vk"], .top-navbar img[alt*="twitter"] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; } /* ═══ HIDE FLOATING SCROLL MENU BUTTON ═══ */ .floating-menu-btn, .scroll-menu-btn, .mobile-menu-fab, [class*="floating"][class*="menu"], button.rounded-circle[onclick*="toggleNav"], .btn-floating, #floatingMenuBtn, .fab-menu, .navbar-toggle-btn.show, .sticky-menu-btn, /* Hide any fixed positioned buttons that appear on scroll */ button[style*="position: fixed"], button[style*="position:fixed"], .btn.position-fixed, .btn-success.rounded-circle, .btn-primary.rounded-circle, button.bg-success.rounded-circle, button.bg-primary.rounded-circle, /* Generic selectors for any floating action button */ [class*="fab-"], [class*="-fab"], button.fixed-bottom, .fixed-button, /* Hide scroll-triggered toggler */ .navbar-toggler.fixed-bottom, .scroll-toggler, #scrollToggler, .toggle-menu-scroll { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Language selector - pill style */ .top-navbar .list-group-horizontal { gap: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 2px; } .top-navbar .list-group-item { padding: 4px 10px !important; background: transparent !important; border: none !important; border-radius: 10px; } .top-navbar .list-group-item a { font-size: 11px !important; font-weight: 600; opacity: 0.8; } .top-navbar .list-group-item:hover, .top-navbar .list-group-item:active { background: rgba(255, 255, 255, 0.15) !important; } /* ═══ FIX 2: HEADER - Logo & Buttons Compact ═══ */ header .navbar { padding: 12px 16px !important; min-height: 56px !important; display: flex !important; align-items: center !important; } header .navbar-brand { padding-top: 0 !important; display: flex !important; align-items: center !important; } header .navbar-brand img { height: 36px !important; width: auto !important; } /* Контейнер кнопок - выравнивание по центру вертикально */ header .navbar .d-flex, header nav .d-flex { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 2px !important; } /* AI-Sana button - УВЕЛИЧЕННЫЙ И ВЫРОВНЕННЫЙ (чуть вниз) */ header .btn-ai-sana { display: inline-flex !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 8px !important; gap: 6px !important; align-items: center !important; height: 40px !important; min-height: 40px !important; margin-top: 10px !important; } header .btn-ai-sana svg { width: 16px !important; height: 16px !important; } /* Platonus button - УВЕЛИЧЕННЫЙ И ВЫРОВНЕННЫЙ (чуть вниз, одинаковый размер с Al-Sana) */ header #platonusBtn, header a.btn-primary[href*="asu-edu"] { display: inline-flex !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 8px !important; align-items: center !important; height: 40px !important; min-height: 40px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; color: white !important; border: none !important; margin-top: 10px !important; } /* Hamburger menu compact */ header .navbar-toggler { padding: 6px !important; border: none !important; } /* ═══ FIX 3: HERO - Reduce Height ═══ */ .au-hero { min-height: 75vh !important; max-height: 80vh !important; padding-bottom: 100px !important; } .au-hero__title { font-size: 1.75rem !important; } .au-hero__description { font-size: 0.875rem !important; margin-bottom: 16px !important; } .au-hero__actions { gap: 10px !important; padding: 0 20px !important; } .au-hero__actions .au-btn { padding: 12px 20px !important; font-size: 14px !important; } /* ═══ FIX 4: CAROUSEL INDICATORS - SHOW THEM ═══ */ .au-carousel-indicators, .au-announcements .au-carousel-indicators, .au-newspaper .au-carousel-indicators { display: flex !important; justify-content: center; gap: 6px; margin-top: 12px; padding: 8px 0; } .au-carousel-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.25) !important; border: none !important; cursor: pointer; transition: all 0.2s ease; } .au-carousel-dot.active { width: 20px !important; border-radius: 3px !important; background: var(--au-primary, #187D35) !important; } /* ═══ FIX 5: STATS CARDS - Fix Clipping ═══ */ .au-stats__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 16px !important; } .au-stat { padding: 16px 12px !important; min-height: 100px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; } .au-stat__number { font-size: 1.5rem !important; margin-bottom: 4px !important; } .au-stat__label { font-size: 11px !important; text-align: center !important; line-height: 1.3 !important; word-wrap: break-word !important; max-width: 100% !important; } /* ═══ FIX 6: BOTTOM NAV - Above Chat Button ═══ */ .m-bottom-nav, .mobile-bottom-nav, #mobileBottomNav { z-index: 9999 !important; position: fixed !important; bottom: 0 !important; } /* СКРЫВАЕМ все иконки и кнопки после footer (плавающие кнопки, chat, scroll-to-top и т.д.) */ /* НО ОСТАВЛЯЕМ видимыми .au-floating-btn (Zhanaru) и .au-chatbot-toggle для мобильной версии */ /* УДАЛЕНО: Исправлено, чтобы не скрывать чат-бот и важные кнопки */ .scroll-to-top, [class*="scroll-top"], [id*="scrollTop"], button[onclick*="scroll"], .fab:not(.au-chatbot-toggle):not(.au-floating-btn) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Показываем floating кнопки (Zhanaru и Chat) на мобильной версии */ .au-floating-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; bottom: calc(var(--bottom-nav-height, 72px) + 90px) !important; right: 20px !important; width: 56px !important; height: 56px !important; z-index: 9998 !important; } /* Chat Bot Toggle Button - показываем на мобильной версии */ /* Позиционируем выше bottom nav (72px + отступ) */ .au-chatbot-toggle, #au-chatbot-toggle, button.au-chatbot-toggle, button#au-chatbot-toggle, .au-chatbot .au-chatbot-toggle, #au-chatbot .au-chatbot-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; bottom: calc(var(--bottom-nav-height, 72px) + 20px) !important; right: 20px !important; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; max-width: 56px !important; max-height: 56px !important; z-index: 99999 !important; border-radius: 50% !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; color: white !important; border: none !important; box-shadow: 0 8px 32px rgba(24, 125, 53, 0.4) !important; cursor: pointer !important; align-items: center !important; justify-content: center !important; overflow: visible !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; } /* Убеждаемся, что кнопка кликабельна */ .au-chatbot-toggle:active, #au-chatbot-toggle:active { transform: scale(0.95) !important; } /* Chatbot container - также показываем */ .au-chatbot, #au-chatbot { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 99999 !important; position: fixed !important; bottom: 0 !important; right: 0 !important; } /* Chat window - адаптируем для мобильной версии */ /* ВАЖНО: Это правило применяется ТОЛЬКО когда чат ЗАКРЫТ */ .au-chatbot:not(.au-chatbot--open) .au-chatbot-window, .au-chatbot:not(.au-chatbot--open) #au-chatbot-window, #au-chatbot:not(.au-chatbot--open) .au-chatbot-window, #au-chatbot:not(.au-chatbot--open) #au-chatbot-window { position: fixed !important; bottom: calc(var(--bottom-nav-height, 72px) + 90px) !important; right: 20px !important; left: 20px !important; width: auto !important; max-width: calc(100vw - 40px) !important; height: calc(100vh - calc(var(--bottom-nav-height, 72px) + 140px)) !important; max-height: calc(100vh - calc(var(--bottom-nav-height, 72px) + 140px)) !important; z-index: 99998 !important; /* Скрыто по умолчанию когда чат закрыт */ display: none !important; visibility: hidden !important; opacity: 0 !important; transform: translateY(20px) scale(0.95) !important; pointer-events: none !important; } /* Иконка чата - видна по умолчанию когда чат закрыт */ .au-chatbot-toggle__icon--chat { width: 28px !important; height: 28px !important; display: block !important; visibility: visible !important; opacity: 1 !important; stroke: white !important; fill: none !important; position: relative !important; } /* Иконка закрытия - скрыта по умолчанию */ .au-chatbot-toggle__icon--close { width: 28px !important; height: 28px !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) rotate(-90deg) scale(0.5) !important; opacity: 0 !important; stroke: white !important; fill: none !important; transition: all 0.3s ease !important; } /* Когда чат открыт - иконка чата скрыта, иконка закрытия видна */ .au-chatbot--open .au-chatbot-toggle__icon--chat { opacity: 0 !important; transform: rotate(90deg) scale(0.5) !important; } .au-chatbot--open .au-chatbot-toggle__icon--close { opacity: 1 !important; transform: translate(-50%, -50%) rotate(0) scale(1) !important; } /* Enforcing visibility when open - КРИТИЧНО для мобильной версии */ /* ВАЖНО: Это правило применяется ТОЛЬКО когда чат ОТКРЫТ */ /* Используем МАКСИМАЛЬНУЮ специфичность для гарантии применения */ body .au-chatbot.au-chatbot--open .au-chatbot-window, body .au-chatbot.au-chatbot--open #au-chatbot-window, body #au-chatbot.au-chatbot--open .au-chatbot-window, body #au-chatbot.au-chatbot--open #au-chatbot-window, html body .au-chatbot.au-chatbot--open .au-chatbot-window, html body #au-chatbot.au-chatbot--open #au-chatbot-window, .au-chatbot.au-chatbot--open .au-chatbot-window, .au-chatbot.au-chatbot--open #au-chatbot-window, #au-chatbot.au-chatbot--open .au-chatbot-window, #au-chatbot.au-chatbot--open #au-chatbot-window, div#au-chatbot.au-chatbot--open div#au-chatbot-window.au-chatbot-window, div#au-chatbot.au-chatbot--open div.au-chatbot-window, div.au-chatbot.au-chatbot--open div.au-chatbot-window { position: fixed !important; bottom: calc(var(--bottom-nav-height, 72px) + 90px) !important; right: 20px !important; left: 20px !important; top: auto !important; width: auto !important; max-width: calc(100vw - 40px) !important; height: calc(100vh - calc(var(--bottom-nav-height, 72px) + 180px)) !important; max-height: calc(100vh - calc(var(--bottom-nav-height, 72px) + 180px)) !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; z-index: 999999 !important; background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important; } /* Universal tap feedback */ .m-tap-feedback { transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .m-tap-feedback:active { transform: scale(0.96); box-shadow: var(--m-shadow-sm) !important; } /* Scroll reveal animation base */ .m-reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); } .m-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Horizontal scroll container */ .m-scroll-x { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: var(--m-space-md); padding: var(--m-space-md); margin: 0 calc(-1 * var(--m-space-md)); } .m-scroll-x::-webkit-scrollbar { display: none; } .m-scroll-x>* { flex-shrink: 0; scroll-snap-align: start; } } /* ═══════════════════════════════════════════════════════════════════════════════ 3. MOBILE HEADER — Glassmorphism Style ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); box-shadow: var(--m-shadow-sm); padding-top: var(--safe-top); transition: background var(--motion-base) var(--ease-out); /* REMOVED: Header hide on scroll - transform removed */ } /* REMOVED: Header hidden state - no longer hides on scroll */ .au-header__container { min-height: var(--header-height); padding: 0 var(--m-space-md); display: flex; align-items: center; justify-content: space-between; } .au-header__logo img { height: 44px; width: auto; transition: transform var(--motion-fast) var(--ease-spring); } .au-header__logo:active img { transform: scale(0.95); } /* Hide desktop nav items */ .au-header__nav, .au-header__cta { display: none !important; } /* Mobile search button */ .au-header__search-btn { width: var(--touch-min); height: var(--touch-min); border-radius: var(--m-radius-lg); background: rgba(0, 0, 0, 0.04); border: none; display: flex; align-items: center; justify-content: center; transition: all var(--motion-fast) var(--ease-out); } .au-header__search-btn:active { transform: scale(0.92); background: rgba(0, 0, 0, 0.08); } .au-header__toggle { display: flex !important; width: var(--touch-min); height: var(--touch-min); border-radius: var(--m-radius-lg); background: rgba(24, 125, 53, 0.08); border: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px; transition: all var(--motion-fast) var(--ease-out); } .au-header__toggle:active { transform: scale(0.92); background: rgba(24, 125, 53, 0.15); } .au-header__toggle-bar { width: 20px; height: 2px; background: var(--au-primary, #187D35); border-radius: 2px; transition: all var(--motion-base) var(--ease-out); } } /* ═══════════════════════════════════════════════════════════════════════════════ 4. MOBILE BOTTOM NAVIGATION — Native App Style ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .m-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-top: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: var(--safe-bottom); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06); } .m-bottom-nav__container { display: flex; justify-content: space-around; align-items: center; height: var(--bottom-nav-height); max-width: 500px; margin: 0 auto; } .m-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; height: 100%; text-decoration: none; color: var(--au-gray-400, #7a8a9a); transition: all var(--motion-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; position: relative; } .m-bottom-nav__item::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%) scaleX(0); width: 32px; height: 3px; background: var(--au-primary, #187D35); border-radius: 2px; transition: transform var(--motion-base) var(--ease-spring); } .m-bottom-nav__item--active::before { transform: translateX(-50%) scaleX(1); } .m-bottom-nav__item--active { color: var(--au-primary, #187D35); } .m-bottom-nav__icon { width: 24px; height: 24px; transition: transform var(--motion-fast) var(--ease-spring); } .m-bottom-nav__item:active .m-bottom-nav__icon { transform: scale(0.85); } .m-bottom-nav__item--active .m-bottom-nav__icon { transform: scale(1.1); } .m-bottom-nav__label { font-size: 10px; font-weight: 500; letter-spacing: 0.2px; } } /* ═══════════════════════════════════════════════════════════════════════════════ 5. MOBILE HERO SECTION — Immersive Fullscreen ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-hero { min-height: 100vh; min-height: 100dvh; /* Dynamic viewport for mobile */ display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--m-space-3xl) + var(--bottom-nav-height)); } .au-hero__video-container { position: absolute; inset: 0; } .au-hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; cursor: none !important; pointer-events: none !important; } .au-hero__overlay { background: linear-gradient(180deg, rgba(10, 22, 40, 0.2) 0%, rgba(10, 22, 40, 0.4) 40%, rgba(10, 22, 40, 0.85) 75%, rgba(10, 22, 40, 0.95) 100%); } .au-hero__content { position: relative; z-index: 3; padding: 0 var(--m-space-lg); text-align: center; max-width: 100%; } .au-hero__badge { display: inline-flex; align-items: center; gap: var(--m-space-sm); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); padding: var(--m-space-sm) var(--m-space-md); border-radius: var(--m-radius-full); font-size: var(--m-text-sm); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--m-space-lg); animation: m-fadeInUp var(--motion-slow) var(--ease-out) forwards; } .au-hero__title { font-size: var(--m-text-3xl) !important; line-height: 1.15; margin-bottom: var(--m-space-md); animation: m-fadeInUp var(--motion-slow) var(--ease-out) 0.1s forwards; opacity: 0; } .au-hero__title-line:first-child { font-size: var(--m-text-2xl) !important; } .au-hero__title-line:last-child { font-size: var(--m-text-3xl) !important; } .au-hero__description { font-size: var(--m-text-base); line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin-bottom: var(--m-space-xl); max-width: 320px; margin-left: auto; margin-right: auto; animation: m-fadeInUp var(--motion-slow) var(--ease-out) 0.2s forwards; opacity: 0; } .au-hero__actions { display: flex; flex-direction: column; gap: var(--m-space-md); padding: 0 var(--m-space-md); animation: m-fadeInUp var(--motion-slow) var(--ease-out) 0.3s forwards; opacity: 0; } .au-hero__actions .au-btn { width: 100%; justify-content: center; padding: var(--m-space-md) var(--m-space-lg); font-size: var(--m-text-base); border-radius: var(--m-radius-lg); min-height: var(--touch-comfortable); } .au-hero__actions .au-btn--primary { box-shadow: 0 8px 32px rgba(24, 125, 53, 0.35); } .au-hero__actions .au-btn:active { transform: scale(0.97); } .au-hero__scroll { position: absolute; bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-space-lg)); left: 50%; transform: translateX(-50%); animation: m-bounce 2s infinite; } @keyframes m-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes m-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } } /* ═══════════════════════════════════════════════════════════════════════════════ 6. MOBILE EDUCATION PROGRAMS — Horizontal Scroll Cards ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-programs { padding: var(--m-space-2xl) 0; margin-top: 0; background: linear-gradient(180deg, #f8fafb 0%, #ffffff 100%); } .au-programs__header { text-align: center; padding: 0 var(--m-space-lg); margin-bottom: var(--m-space-lg); } .au-programs__badge { display: inline-block; font-size: var(--m-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--au-primary, #187D35); background: rgba(24, 125, 53, 0.08); padding: var(--m-space-sm) var(--m-space-md); border-radius: var(--m-radius-full); margin-bottom: var(--m-space-md); } .au-programs__title { font-size: var(--m-text-2xl) !important; font-weight: 700; line-height: 1.2; margin-bottom: var(--m-space-sm); color: var(--au-gray-800, #1a2028); } .au-programs__subtitle { font-size: var(--m-text-base); color: var(--au-gray-500, #5a6a7a); line-height: 1.5; max-width: 280px; margin: 0 auto; } /* Horizontal scroll container */ .au-programs__grid { display: flex !important; grid-template-columns: unset !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--m-space-md); padding: var(--m-space-md) var(--m-space-lg); margin: 0; } .au-programs__grid::-webkit-scrollbar { display: none; } /* Program cards */ .au-program-card { flex-shrink: 0; width: 85vw; max-width: 320px; scroll-snap-align: center; border-radius: var(--m-radius-xl); padding: var(--m-space-lg); box-shadow: var(--m-shadow-lg); transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); position: relative !important; } .au-program-card:active { transform: scale(0.97); box-shadow: var(--m-shadow-md); } .au-program-card__header { margin-bottom: var(--m-space-md); } .au-program-card__icon { width: 52px; height: 52px; border-radius: var(--m-radius-lg); } .au-program-card__badge { font-size: var(--m-text-xs); padding: var(--m-space-xs) var(--m-space-sm); } .au-program-card__title { font-size: var(--m-text-xl) !important; margin-bottom: var(--m-space-xs); } .au-program-card__desc { font-size: var(--m-text-sm); margin-bottom: var(--m-space-md); } .au-program-card__features li { font-size: var(--m-text-sm); padding: var(--m-space-xs) 0; } .au-program-card__features li svg { width: 16px; height: 16px; } .au-program-card__footer { margin-top: var(--m-space-lg); padding-top: var(--m-space-md); border-top: 1px solid rgba(255, 255, 255, 0.2); } .au-program-card__cta { font-size: var(--m-text-base); font-weight: 600; } .au-program-card__popular { font-size: var(--m-text-xs); position: absolute !important; top: auto !important; bottom: var(--m-space-md) !important; left: auto !important; right: var(--m-space-md) !important; transform: none !important; margin: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ 7. MOBILE NEWS SECTION — Vertical Feed Style ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-media-block { padding: var(--m-space-2xl) 0; } .au-media-block__header { padding: 0 var(--m-space-lg); margin-bottom: var(--m-space-xl); } .au-media-block__icon { width: 56px; height: 56px; margin-bottom: var(--m-space-md); } .au-media-block__icon svg { width: 28px; height: 28px; } .au-media-block__title { font-size: var(--m-text-2xl) !important; margin-bottom: var(--m-space-sm); } .au-media-block__subtitle { font-size: var(--m-text-base); margin-bottom: var(--m-space-md); } .au-media-block__link { font-size: var(--m-text-sm); padding: var(--m-space-sm) var(--m-space-md); } /* News Grid Mobile */ .au-news-grid { display: flex !important; flex-direction: column; grid-template-columns: unset !important; gap: var(--m-space-md); padding: 0 var(--m-space-lg); } /* Featured News Card */ .au-news-card--featured { border-radius: var(--m-radius-xl); overflow: hidden; } .au-news-card--featured .au-news-card__image { height: 380px !important; min-height: 380px !important; } /* Обычные карточки новостей (не featured) - увеличиваем фото */ .au-news-card:not(.au-news-card--featured):not(.au-news-card--small) .au-news-card__image { height: 360px !important; min-height: 360px !important; aspect-ratio: unset !important; } .au-news-card--featured .au-news-card__content { padding: var(--m-space-lg); } .au-news-card--featured .au-news-card__title { font-size: var(--m-text-lg) !important; line-height: 1.35; -webkit-line-clamp: 3; } .au-news-card__badge { font-size: 10px; padding: var(--m-space-xs) var(--m-space-sm); } .au-news-card__date { font-size: var(--m-text-xs); } .au-news-card__read-more { font-size: var(--m-text-sm); } /* ═══════════════════════════════════════════════════════════════════════════════ MOBILE NEWS CARDS - PREMIUM MAGAZINE STYLE DESIGN Large vertical cards with prominent images ═══════════════════════════════════════════════════════════════════════════════ */ /* Sidebar Grid - 1 column for larger card display */ .au-news-grid__sidebar { display: flex; flex-direction: column; gap: var(--m-space-lg); margin-top: var(--m-space-md); } /* News Card - Premium Vertical Style with Large Image */ .au-news-card--small { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--m-radius-xl); background: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); border: none; transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); position: relative; } .au-news-card--small:active { transform: scale(0.98) translateY(2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } /* Large Image Container */ .au-news-card--small .au-news-card__image { width: 100% !important; height: 200px !important; min-height: 200px !important; border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important; position: relative; overflow: hidden; flex-shrink: 0; } .au-news-card--small .au-news-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--motion-slow) var(--ease-out); } .au-news-card--small:active .au-news-card__image img { transform: scale(1.05); } /* Gradient Overlay on Image */ .au-news-card--small .au-news-card__image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100%); pointer-events: none; } /* Content Area Below Image */ .au-news-card--small .au-news-card__content { padding: var(--m-space-md) var(--m-space-lg) var(--m-space-lg); display: flex; flex-direction: column; gap: var(--m-space-sm); flex: 1; } /* Date Badge - Premium Style */ .au-news-card--small .au-news-card__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--au-primary, #187D35); letter-spacing: 0.3px; text-transform: uppercase; } .au-news-card--small .au-news-card__date::before { content: ''; width: 4px; height: 4px; background: var(--au-primary, #187D35); border-radius: 50%; flex-shrink: 0; } /* Title - Prominent Typography */ .au-news-card--small .au-news-card__title { font-size: var(--m-text-base) !important; font-weight: 700; line-height: 1.4; color: var(--au-gray-800, #1a2028); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } } /* ═══════════════════════════════════════════════════════════════════════════════ 8. MOBILE ANNOUNCEMENTS & CAROUSELS — Horizontal Scroll ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-carousel-wrapper { padding: 0; position: relative; } /* ОБЪЯВЛЕНИЯ: скрываем стрелки (будет горизонтальный скролл) */ .au-media-block--announcements .au-carousel-arrow { display: none !important; } /* Остальные карусели - скрываем стрелки по умолчанию */ .au-carousel-arrow { display: none; } /* ГАЗЕТЫ: показываем стрелки ПО БОКАМ карусели - ПОСЛЕ общих правил */ .au-media-block--newspaper .au-carousel-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; position: relative !important; } .au-media-block--newspaper .au-carousel-wrapper .au-newspaper-track { width: 100% !important; } /* Стили для стрелок газет на мобильной версии - ПОСЛЕ общих правил */ /* Переопределяем Bootstrap d-md-none для газет */ .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper button.au-carousel-arrow.d-md-none { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; width: 36px !important; height: 36px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; border: none !important; flex-shrink: 0 !important; cursor: pointer !important; pointer-events: auto !important; touch-action: manipulation !important; } .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none:active, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none:focus { transform: scale(0.92) !important; transform-origin: center center !important; outline: none !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; } .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none svg { width: 18px !important; height: 18px !important; stroke: white !important; pointer-events: none !important; } /* Левая стрелка - ЗЕЛЁНАЯ с белой иконкой */ .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--left.d-md-none { background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; } .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--left.d-md-none:hover { background: linear-gradient(135deg, #0d5a25 0%, #05612a 100%) !important; box-shadow: 0 6px 20px rgba(24, 125, 53, 0.5) !important; } /* Правая стрелка - ЗЕЛЁНАЯ с белой иконкой */ .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--right.d-md-none { background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; } .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--right.d-md-none:hover { background: linear-gradient(135deg, #0d5a25 0%, #05612a 100%) !important; box-shadow: 0 6px 20px rgba(24, 125, 53, 0.5) !important; } /* ДОПОЛНИТЕЛЬНОЕ ПРАВИЛО: Переопределяем ВСЕ возможные конфликты для стрелок газет */ /* Переопределяем Bootstrap d-md-none и наше общее правило */ .au-media-block--newspaper .au-carousel-wrapper button.au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none, section.au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper button.d-md-none.au-carousel-arrow, .au-media-block--newspaper .au-carousel-wrapper .d-md-none.au-carousel-arrow { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Индикаторы для газет - ПОКАЗЫВАЕМ на мобильной версии */ .au-media-block--newspaper .au-carousel-indicators { display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; margin-top: 16px !important; padding: 8px 0 !important; } /* Точки для газет - уменьшенный размер */ .au-media-block--newspaper .au-carousel-dot { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.25) !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; min-width: 4px !important; min-height: 4px !important; } .au-media-block--newspaper .au-carousel-dot.active { width: 16px !important; height: 4px !important; border-radius: 2px !important; background: var(--au-primary, #187D35) !important; min-width: 16px !important; } /* ТОП-МЕНЕДЖМЕНТ: Кнопки и точки - показываем сразу на мобильной версии */ .au-leadership__carousel .au-carousel-nav { display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin-top: 20px !important; padding: 10px 0 !important; position: relative !important; width: 100% !important; z-index: 10 !important; visibility: visible !important; opacity: 1 !important; } .au-leadership__carousel .au-carousel-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; pointer-events: auto !important; touch-action: manipulation !important; } .au-leadership__carousel .au-carousel-btn:hover, .au-leadership__carousel .au-carousel-btn:active { background: linear-gradient(135deg, #0d5a25 0%, #05612a 100%) !important; transform: scale(0.95) !important; box-shadow: 0 2px 10px rgba(24, 125, 53, 0.5) !important; } .au-leadership__carousel .au-carousel-btn svg { width: 20px !important; height: 20px !important; stroke: white !important; pointer-events: none !important; } .au-leadership__carousel .au-carousel-indicators { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 16px !important; padding: 8px 0 !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } .au-leadership__carousel .au-carousel-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.25) !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; pointer-events: auto !important; } .au-leadership__carousel .au-carousel-dot.active { width: 24px !important; height: 8px !important; border-radius: 4px !important; background: var(--au-primary, #187D35) !important; min-width: 24px !important; } .au-leadership__carousel .au-carousel-dot:hover { background: rgba(24, 125, 53, 0.5) !important; } /* ============================================ СКРЫТИЕ BACK-TO-TOP ИКОНКИ (синяя стрелка) ============================================ */ .back-to-top, a.back-to-top, [class*="back-to-top"], .btn-lg-square.back-to-top, a.btn-primary.btn-lg-square.back-to-top { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Объявления - большая карточка с видимыми краями следующих */ .au-announcements-carousel { padding: 0 var(--m-space-md) !important; overflow-x: auto !important; overflow-y: visible !important; scroll-behavior: smooth !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important; -ms-overflow-style: auto !important; } .au-announcements-carousel::-webkit-scrollbar { display: block !important; height: 4px !important; } .au-announcements-carousel::-webkit-scrollbar-track { background: transparent !important; } .au-announcements-carousel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2) !important; border-radius: 2px !important; } /* Обертка карусели газет - правильное выравнивание стрелок по центру */ .au-media-block--newspaper .au-carousel-wrapper { display: flex !important; align-items: center !important; align-content: center !important; justify-content: space-between !important; gap: var(--m-space-sm, 12px) !important; width: 100% !important; position: relative !important; padding: 0 !important; height: auto !important; min-height: auto !important; } /* Газеты - карусель со стрелками (работает через JS transform, строго скрывает следующие карточки) */ .au-newspaper-carousel { padding: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; flex: 1 !important; min-width: 0 !important; width: 100% !important; position: relative !important; max-width: 100% !important; box-sizing: border-box !important; } .au-newspaper-carousel::-webkit-scrollbar { display: none !important; } .au-announcements-track { display: flex !important; gap: var(--m-space-md); padding: var(--m-space-sm) 0; overflow-x: visible !important; overflow-y: visible !important; transform: none !important; transition: none !important; width: auto !important; min-width: 100% !important; } /* Газеты - трек работает через JS transform, gap = 0 чтобы карточки показывались по одной полностью */ .au-newspaper-track { display: flex !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; overflow-x: visible !important; overflow-y: visible !important; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; width: auto !important; min-width: 100% !important; align-items: flex-start !important; position: relative !important; } /* ОБЪЯВЛЕНИЯ: карточка почти на весь экран (95% ширины) */ .au-announcements-track .au-announcement-card { flex: 0 0 95% !important; max-width: 95% !important; min-width: 95% !important; width: 95% !important; scroll-snap-align: start !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } /* ГАЗЕТЫ: карточка 100% ширины видимой области - одна полностью видна, следующая скрыта */ .au-newspaper-track .au-newspaper-card { flex: 0 0 100% !important; max-width: 100% !important; min-width: 100% !important; width: 100% !important; display: flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; flex-shrink: 0 !important; position: relative !important; } /* ═══════════════════════════════════════════════════════════════════════════════ ANNOUNCEMENT CARDS - PREMIUM MOBILE DESIGN (ПОЛНОЭКРАННЫЕ КАРТОЧКИ) Большие изображения, видимая дата в углу ═══════════════════════════════════════════════════════════════════════════════ */ /* Карточка объявления - БОЛЬШАЯ, почти на весь экран */ .au-announcement-card { border-radius: var(--m-radius-xl) !important; transition: transform var(--motion-fast) var(--ease-out) !important; overflow: visible !important; background: #fff !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important; position: relative !important; display: flex !important; flex-direction: column !important; } .au-announcement-card:active { transform: scale(0.97) !important; } /* КАРУСЕЛЬ: карточки на 95% ширины экрана */ .au-announcements-track .au-announcement-card { flex: 0 0 95% !important; max-width: 95% !important; min-width: 95% !important; width: 95% !important; } /* ИЗОБРАЖЕНИЕ: БОЛЬШОЕ - 320px высота, cover, без обрезки */ .au-announcement-card .au-announcement-card__image, .au-announcements-track .au-announcement-card .au-announcement-card__image { height: 320px !important; min-height: 320px !important; max-height: 320px !important; overflow: hidden !important; display: block !important; background-color: #e8f0e8 !important; position: relative !important; border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important; flex-shrink: 0 !important; } /* Изображение - cover, по центру, полностью заполняет */ .au-announcement-card .au-announcement-card__image img, .au-announcements-track .au-announcement-card .au-announcement-card__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* Лёгкий градиент снизу для контраста */ .au-announcement-card .au-announcement-card__image::after, .au-announcements-track .au-announcement-card .au-announcement-card__image::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 40% !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 100%) !important; pointer-events: none !important; z-index: 1 !important; } /* КОНТЕНТ под изображением */ .au-announcement-card .au-announcement-card__content, .au-announcements-track .au-announcement-card .au-announcement-card__content { padding: 16px 20px 20px !important; position: relative !important; background: #fff !important; border-radius: 0 0 var(--m-radius-xl) var(--m-radius-xl) !important; } /* ═════ ДАТА - БЕЙДЖ ПОВЕРХ ИЗОБРАЖЕНИЯ (ПРАВЫЙ верхний угол) ═════ */ /* Позиционируем относительно .au-announcement-card__content, но с отрицательным top */ .au-announcement-card .au-announcement-card__date, .au-announcements-track .au-announcement-card .au-announcement-card__date { position: absolute !important; top: -290px !important; /* Перемещаем на 290px вверх (на изображение) */ right: 16px !important; left: auto !important; bottom: auto !important; background: rgba(255, 255, 255, 0.97) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; padding: 10px 14px !important; min-width: auto !important; border-radius: 12px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; gap: 2px !important; } /* День - КРУПНЫЙ зелёный текст */ .au-announcement-card .au-announcement-card__day, .au-announcements-track .au-announcement-card .au-announcement-card__day { font-size: 24px !important; font-weight: 800 !important; color: var(--au-primary, #187D35) !important; line-height: 1 !important; display: block !important; } /* Месяц - маленький серый текст */ .au-announcement-card .au-announcement-card__month, .au-announcements-track .au-announcement-card .au-announcement-card__month { font-size: 12px !important; font-weight: 700 !important; color: #5a6a7a !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: block !important; } /* Заголовок объявления */ .au-announcement-card .au-announcement-card__title, .au-announcements-track .au-announcement-card .au-announcement-card__title { font-size: 16px !important; font-weight: 700 !important; color: #1a2028 !important; line-height: 1.4 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Индикаторы для объявлений - СКРЫВАЕМ */ .au-media-block--announcements .au-carousel-indicators { display: none !important; } /* КРИТИЧЕСКОЕ ПРАВИЛО: Стрелки для газет - в самом конце медиа-запроса для максимального приоритета */ /* Переопределяем ВСЕ возможные правила, включая Bootstrap */ .au-media-block--newspaper .au-carousel-wrapper button.au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper button.d-md-none.au-carousel-arrow, .au-media-block--newspaper .au-carousel-wrapper .d-md-none.au-carousel-arrow, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--left.d-md-none, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--right.d-md-none { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; width: 36px !important; height: 36px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; border: none !important; flex-shrink: 0 !important; cursor: pointer !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ 9. MOBILE NEWSPAPER SECTION — Compact Cards ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* КРИТИЧЕСКОЕ ПРАВИЛО: Стрелки для газет - переопределяем ВСЕ включая Bootstrap d-md-none */ /* Переопределяем Bootstrap класс d-md-none для газетных стрелок */ .au-media-block--newspaper .au-carousel-wrapper button.au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper button.d-md-none.au-carousel-arrow, .au-media-block--newspaper .au-carousel-wrapper .d-md-none.au-carousel-arrow { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; width: 36px !important; height: 36px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; border: none !important; flex-shrink: 0 !important; cursor: pointer !important; } .au-newspaper__masthead { flex-direction: column; gap: var(--m-space-md); padding: var(--m-space-lg); margin: 0 var(--m-space-lg) var(--m-space-xl); } .au-newspaper__masthead::before, .au-newspaper__masthead::after { display: none; } .au-newspaper__logo { width: 48px; height: 48px; } .au-newspaper__logo svg { width: 24px; height: 24px; } .au-newspaper__title { font-size: var(--m-text-xl) !important; letter-spacing: 1px; } .au-newspaper__divider { width: 120px; } .au-newspaper__tagline { font-size: var(--m-text-sm); } .au-newspaper__archive-link { font-size: var(--m-text-sm); padding: var(--m-space-sm) var(--m-space-md); } /* Newspaper Cards */ .au-newspaper-card { width: 65vw; max-width: 220px; } .au-newspaper-card__paper { box-shadow: 1px 1px 0 #e0e0e0, 2px 2px 0 #d0d0d0, 4px 4px 12px rgba(0, 0, 0, 0.12); } .au-newspaper-card__fold { width: 28px; height: 28px; } .au-newspaper-card__info { padding: var(--m-space-md); } .au-newspaper-card__date { font-size: var(--m-text-xs); } .au-newspaper-card__title { font-size: var(--m-text-base); } .au-newspaper-card__read { font-size: var(--m-text-xs); } } /* ═══════════════════════════════════════════════════════════════════════════════ 10. MOBILE STATS SECTION — 2x2 Grid with Animations ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-stats { padding: var(--m-space-2xl) var(--m-space-lg); } .au-stats__header { margin-bottom: var(--m-space-xl); } .au-stats__title { font-size: var(--m-text-2xl) !important; } .au-stats__subtitle { font-size: var(--m-text-base); max-width: 280px; margin-left: auto; margin-right: auto; } .au-accent-line { width: 48px; height: 3px; margin: var(--m-space-md) auto var(--m-space-md); } .au-stats__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--m-space-md); max-width: 360px; margin: 0 auto; } .au-stat { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--m-radius-xl); padding: var(--m-space-lg); text-align: center; transition: transform var(--motion-fast) var(--ease-spring); } .au-stat:active { transform: scale(0.96); } .au-stat__number { font-size: var(--m-text-3xl) !important; font-weight: 800; line-height: 1; margin-bottom: var(--m-space-xs); background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .au-stat__label { font-size: var(--m-text-xs); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; } } /* ═══════════════════════════════════════════════════════════════════════════════ 11. MOBILE LEADERSHIP SECTION — Horizontal Swipe Carousel ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-leadership { padding: var(--m-space-xl) 0; } .au-leadership__header { padding: 0 var(--m-space-lg); margin-bottom: var(--m-space-lg); } .au-leadership__title { font-size: var(--m-text-xl) !important; } .au-leadership__grid { display: flex !important; flex-direction: column; grid-template-columns: unset !important; gap: var(--m-space-xl); } .au-leadership__carousel, .au-projects { padding: 0; position: relative; } /* Carousel Navigation Arrow - Right Side */ /* Исключаем топ-менеджмент - у него стрелки внизу (переопределяется ниже) */ .au-carousel-nav__btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .au-carousel-nav__btn:active { transform: scale(0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .au-carousel-nav__btn svg { width: 20px; height: 20px; color: var(--au-primary, #187D35); } /* TOP MANAGEMENT - Horizontal Carousel */ .au-leader-carousel, .au-leaders-track, [class*="leader"] .row, [class*="leader"] .grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; padding: 0 16px 16px !important; } .au-leader-carousel::-webkit-scrollbar, .au-leaders-track::-webkit-scrollbar { display: none; } .au-leader-card { flex: 0 0 280px !important; min-width: 280px !important; max-width: 280px !important; scroll-snap-align: start; display: flex !important; flex-direction: column; background: #fff; border-radius: var(--m-radius-xl); overflow: hidden; box-shadow: var(--m-shadow-lg); } .au-leader-card__image { width: 100%; height: 200px; } .au-leader-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .au-leader-card__info { padding: var(--m-space-md); } .au-leader-card__info h3 { font-size: var(--m-text-base); margin-bottom: var(--m-space-xs); color: var(--au-gray-800); line-height: 1.3; } .au-leader-card__info p { font-size: var(--m-text-xs); color: var(--au-gray-500); line-height: 1.5; } .au-carousel-btn { width: var(--touch-min); height: var(--touch-min); border-radius: 50%; border: 2px solid var(--au-gray-200); background: #fff; display: flex; align-items: center; justify-content: center; transition: all var(--motion-fast) var(--ease-out); } .au-carousel-btn:active { transform: scale(0.9); border-color: var(--au-primary); background: var(--au-primary); } .au-carousel-btn:active svg { stroke: #fff; } /* ТОП-МЕНЕДЖМЕНТ: Кнопки и точки - переопределяем общие правила */ .au-leadership__carousel .au-carousel-nav { display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin-top: 20px !important; padding: 10px 0 !important; position: relative !important; width: 100% !important; z-index: 10 !important; visibility: visible !important; opacity: 1 !important; } .au-leadership__carousel .au-carousel-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; pointer-events: auto !important; touch-action: manipulation !important; } .au-leadership__carousel .au-carousel-btn:hover, .au-leadership__carousel .au-carousel-btn:active { background: linear-gradient(135deg, #0d5a25 0%, #05612a 100%) !important; transform: scale(0.95) !important; box-shadow: 0 2px 10px rgba(24, 125, 53, 0.5) !important; } .au-leadership__carousel .au-carousel-btn svg { width: 20px !important; height: 20px !important; stroke: white !important; pointer-events: none !important; } .au-leadership__carousel .au-carousel-indicators { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 16px !important; padding: 8px 0 !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } .au-leadership__carousel .au-carousel-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.25) !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; pointer-events: auto !important; } .au-leadership__carousel .au-carousel-dot.active { width: 24px !important; height: 8px !important; border-radius: 4px !important; background: var(--au-primary, #187D35) !important; min-width: 24px !important; } .au-leadership__carousel .au-carousel-dot:hover { background: rgba(24, 125, 53, 0.5) !important; } /* Projects Grid */ .au-projects__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--m-space-md); margin-top: var(--m-space-lg); } .au-project-card { border-radius: var(--m-radius-lg); overflow: hidden; box-shadow: var(--m-shadow-md); transition: transform var(--motion-fast) var(--ease-out); } .au-project-card:active { transform: scale(0.96); } .au-project-card__image { height: 100px; } .au-project-card__title { font-size: var(--m-text-xs); padding: var(--m-space-sm); text-align: center; } } /* ═══════════════════════════════════════════════════════════════════════════════ 12. MOBILE 7 REASONS SECTION — Compact List ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-reasons { padding: var(--m-space-2xl) var(--m-space-lg); } .au-reasons__title { font-size: var(--m-text-xl) !important; line-height: 1.3; } .au-reasons__list { display: flex !important; flex-direction: column; gap: var(--m-space-sm); margin-top: var(--m-space-xl); } .au-reason { display: flex; align-items: center; gap: var(--m-space-md); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--m-radius-lg); padding: var(--m-space-md); transition: transform var(--motion-fast) var(--ease-out); } .au-reason:active { transform: scale(0.98); } .au-reason__number { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--au-primary), var(--au-secondary)); display: flex; align-items: center; justify-content: center; font-size: var(--m-text-base); font-weight: 700; color: #fff; flex-shrink: 0; } .au-reason__text { font-size: var(--m-text-base); color: rgba(255, 255, 255, 0.9); line-height: 1.4; } .au-reasons__cta { margin-top: var(--m-space-xl); } .au-reasons__cta .au-btn { width: 100%; justify-content: center; min-height: var(--touch-comfortable); } } /* ═══════════════════════════════════════════════════════════════════════════════ 13. MOBILE ADDITIONAL LINKS — 2x2 Grid ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-additional { padding: var(--m-space-2xl) var(--m-space-lg); } .au-additional__header { margin-bottom: var(--m-space-xl); } .au-additional__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--m-space-md); } .au-additional-link { display: flex; flex-direction: column; align-items: center; gap: var(--m-space-md); padding: var(--m-space-lg); background: #fff; border-radius: var(--m-radius-xl); box-shadow: var(--m-shadow-md); text-decoration: none; transition: all var(--motion-fast) var(--ease-out); } .au-additional-link:active { transform: scale(0.96); box-shadow: var(--m-shadow-sm); } .au-additional-link__icon { width: 56px; height: 56px; border-radius: var(--m-radius-lg); background: linear-gradient(135deg, rgba(24, 125, 53, 0.08), rgba(68, 123, 173, 0.08)); display: flex; align-items: center; justify-content: center; } .au-additional-link__icon img { width: 28px; height: 28px; } .au-additional-link__title { font-size: var(--m-text-sm); font-weight: 600; color: var(--au-gray-800); text-align: center; line-height: 1.3; } } /* ═══════════════════════════════════════════════════════════════════════════════ 14. MOBILE GRADUATES — Testimonial Cards ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-graduates { padding: var(--m-space-2xl) 0; } .au-graduates__header { padding: 0 var(--m-space-lg); margin-bottom: var(--m-space-xl); } .au-graduates__grid { display: flex !important; grid-template-columns: unset !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--m-space-md); padding: 0 var(--m-space-lg); } .au-graduates__grid::-webkit-scrollbar { display: none; } .au-graduate-card { flex-shrink: 0; width: 85vw; max-width: 320px; scroll-snap-align: center; background: #fff; border-radius: var(--m-radius-xl); padding: var(--m-space-lg); box-shadow: var(--m-shadow-lg); text-align: center; transition: transform var(--motion-fast) var(--ease-out); } .au-graduate-card:active { transform: scale(0.97); } .au-graduate-card__image { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--m-space-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .au-graduate-card__image img { width: 100%; height: 100%; object-fit: cover; } .au-graduate-card__quote { font-size: var(--m-text-sm); font-style: italic; color: var(--au-gray-600); line-height: 1.6; margin-bottom: var(--m-space-md); } .au-graduate-card__name { font-size: var(--m-text-base); font-weight: 600; color: var(--au-gray-800); margin-bottom: var(--m-space-xs); } .au-graduate-card__position { font-size: var(--m-text-xs); color: var(--au-primary); } } /* ═══════════════════════════════════════════════════════════════════════════════ 15. MOBILE YOUTH POLICY — Card Grid ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-youth { padding: var(--m-space-2xl) var(--m-space-lg); } .au-youth__header { margin-bottom: var(--m-space-xl); } .au-youth__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--m-space-md); } .au-youth-card { aspect-ratio: 1; border-radius: var(--m-radius-xl); overflow: hidden; position: relative; box-shadow: var(--m-shadow-md); transition: transform var(--motion-fast) var(--ease-out); } .au-youth-card:active { transform: scale(0.96); } .au-youth-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .au-youth-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%); display: flex; align-items: flex-end; padding: var(--m-space-md); } .au-youth-card__title { font-size: var(--m-text-sm); font-weight: 600; color: #fff; line-height: 1.3; } } /* ═══════════════════════════════════════════════════════════════════════════════ 16. MOBILE PARTNERS — Auto-scroll Marquee ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-partners { padding: var(--m-space-xl) 0; overflow: hidden; } .au-partners__track { gap: var(--m-space-xl); } .au-partners__item img { height: 40px; width: auto; filter: grayscale(100%); opacity: 0.6; transition: all var(--motion-base) var(--ease-out); } .au-partners__item:hover img, .au-partners__item:active img { filter: grayscale(0%); opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════════ 17. MOBILE FOOTER — Compact Design ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { footer { padding: var(--m-space-xl) var(--m-space-lg) !important; padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-space-xl)) !important; margin-bottom: 0 !important; } footer .row { flex-direction: column !important; gap: var(--m-space-xl); } .footer-col { width: 100% !important; max-width: 100% !important; text-align: center; } footer h5 { font-size: var(--m-text-base); margin-bottom: var(--m-space-md); } footer p, footer a { font-size: var(--m-text-sm); line-height: 1.7; } footer ul { padding: 0; list-style: none; } footer ul li { padding: var(--m-space-sm) 0; } footer ul li a { display: inline-block; padding: var(--m-space-xs) 0; } } /* ═══════════════════════════════════════════════════════════════════════════════ 18. SKELETON LOADERS & LOADING STATES — Premium Touch ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Skeleton base */ .m-skeleton { background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100%); background-size: 200% 100%; animation: m-shimmer 1.5s infinite; border-radius: var(--m-radius-md); } @keyframes m-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton card */ .m-skeleton-card { padding: var(--m-space-lg); background: #fff; border-radius: var(--m-radius-xl); box-shadow: var(--m-shadow-sm); } .m-skeleton-card__image { height: 160px; margin-bottom: var(--m-space-md); } .m-skeleton-card__title { height: 20px; width: 80%; margin-bottom: var(--m-space-sm); } .m-skeleton-card__text { height: 14px; width: 60%; } /* Empty state */ .m-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--m-space-3xl) var(--m-space-lg); text-align: center; } .m-empty-state__icon { width: 80px; height: 80px; margin-bottom: var(--m-space-lg); opacity: 0.4; } .m-empty-state__title { font-size: var(--m-text-lg); font-weight: 600; color: var(--au-gray-600); margin-bottom: var(--m-space-sm); } .m-empty-state__text { font-size: var(--m-text-sm); color: var(--au-gray-400); max-width: 240px; } } /* ═══════════════════════════════════════════════════════════════════════════════ 19. SCROLL REVEAL ANIMATIONS ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Staggered reveal for grids */ .au-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); } .au-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Staggered delays */ .au-reveal:nth-child(1) { transition-delay: 0ms; } .au-reveal:nth-child(2) { transition-delay: 50ms; } .au-reveal:nth-child(3) { transition-delay: 100ms; } .au-reveal:nth-child(4) { transition-delay: 150ms; } .au-reveal:nth-child(5) { transition-delay: 200ms; } .au-reveal:nth-child(6) { transition-delay: 250ms; } /* Scale reveal for cards */ .au-reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-spring); } .au-reveal-scale.is-visible { opacity: 1; transform: scale(1); } } /* ═══════════════════════════════════════════════════════════════════════════════ 20. REDUCED MOTION — Accessibility ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .au-reveal, .au-reveal-scale, .m-reveal { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ 21. MOBILE QUICK LINKS — Compact Horizontal Scroll ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-quick-links { display: none; /* Quick links replaced by Programs section on mobile */ } } /* ═══════════════════════════════════════════════════════════════════════════════ 22. PRESS/MEDIA SECTION — Mobile Optimization ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-press-grid { display: grid !important; grid-template-columns: 1fr !important; gap: var(--m-space-md); padding: 0 var(--m-space-lg); } .au-press-card { border-radius: var(--m-radius-xl); transition: transform var(--motion-fast) var(--ease-out); } .au-press-card:active { transform: scale(0.98); } .au-press-card__media { height: 180px; } .au-press-card__play { width: 56px; height: 56px; } .au-press-card__play svg { width: 22px; height: 22px; } .au-press-card__content { padding: var(--m-space-lg); } .au-press-card__source { font-size: 10px; } .au-press-card__title { font-size: var(--m-text-base); } /* ═══════════════════════════════════════════════════════════════════════════════ 23. MOBILE INFO PAGES — Уникальный мобильный дизайн ═══════════════════════════════════════════════════════════════════════════════ */ /* ─── Основной контейнер ─── */ .kaif { padding-top: 70px !important; padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 20px) !important; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; min-height: 100vh !important; min-height: 100dvh !important; } .info-container { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; gap: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; } /* ─── Скрываем десктопный сайдбар ─── */ .info-container .sidebar { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* ─── Закрепленный заголовок раздела ─── */ .m-info-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; background: var(--glass-bg-heavy, rgba(255, 255, 255, 0.95)) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; padding: var(--safe-top, 0) 16px 0 !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important; } .m-info-header__container { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; max-width: 100% !important; } .m-info-header__title { font-size: 17px !important; font-weight: 600 !important; color: var(--info-text, #1e293b) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 70% !important; margin: 0 !important; } .m-info-header__nav-btn { display: flex !important; align-items: center !important; gap: 6px !important; padding: 10px 14px !important; background: linear-gradient(135deg, var(--info-primary, #187D35) 0%, var(--info-primary-dark, #0d5a25) 100%) !important; color: white !important; border: none !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 12px rgba(24, 125, 53, 0.25) !important; } .m-info-header__nav-btn:active { transform: scale(0.95) !important; box-shadow: 0 2px 8px rgba(24, 125, 53, 0.3) !important; } .m-info-header__nav-btn svg { width: 16px !important; height: 16px !important; transition: transform 0.3s ease !important; } .m-info-header__nav-btn.active svg { transform: rotate(180deg) !important; } /* ─── Выдвигающаяся панель навигации (Bottom Sheet) ─── */ .m-nav-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 999 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .m-nav-overlay.active { opacity: 1 !important; visibility: visible !important; } .m-nav-sheet { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: white !important; border-radius: 24px 24px 0 0 !important; max-height: 75vh !important; max-height: 75dvh !important; transform: translateY(100%) !important; transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important; padding-bottom: calc(var(--bottom-nav-height, 72px) + var(--safe-bottom, 0)) !important; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15) !important; } .m-nav-sheet.active { transform: translateY(0) !important; } .m-nav-sheet__handle { width: 36px !important; height: 4px !important; background: rgba(0, 0, 0, 0.15) !important; border-radius: 2px !important; margin: 12px auto 16px !important; } .m-nav-sheet__header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 20px 16px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } .m-nav-sheet__title { font-size: 18px !important; font-weight: 700 !important; color: var(--info-text, #1e293b) !important; margin: 0 !important; } .m-nav-sheet__close { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.05) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.2s ease !important; } .m-nav-sheet__close:active { background: rgba(0, 0, 0, 0.1) !important; } .m-nav-sheet__close svg { width: 18px !important; height: 18px !important; color: var(--info-text-muted, #64748b) !important; } .m-nav-sheet__content { overflow-y: auto !important; max-height: calc(75vh - 100px) !important; max-height: calc(75dvh - 100px) !important; padding: 16px !important; } /* ─── Карточки категорий ─── */ .m-nav-categories { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .m-nav-category { background: #f8fafc !important; border-radius: 14px !important; overflow: hidden !important; transition: all 0.2s ease !important; } .m-nav-category.active { background: linear-gradient(135deg, var(--info-primary, #187D35) 0%, var(--info-primary-dark, #0d5a25) 100%) !important; } .m-nav-category__link { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 18px !important; text-decoration: none !important; color: var(--info-text, #1e293b) !important; font-weight: 500 !important; font-size: 15px !important; transition: all 0.2s ease !important; } .m-nav-category.active .m-nav-category__link { color: white !important; } .m-nav-category__icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: rgba(24, 125, 53, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; } .m-nav-category.active .m-nav-category__icon { background: rgba(255, 255, 255, 0.2) !important; } .m-nav-category__icon svg { width: 20px !important; height: 20px !important; color: var(--info-primary, #187D35) !important; } .m-nav-category.active .m-nav-category__icon svg { color: white !important; } .m-nav-category__text { flex: 1 !important; line-height: 1.4 !important; } .m-nav-category__arrow { width: 20px !important; height: 20px !important; color: var(--info-text-muted, #64748b) !important; transition: transform 0.2s ease !important; } .m-nav-category.active .m-nav-category__arrow { color: white !important; } .m-nav-category:active { transform: scale(0.98) !important; } /* ─── Субкатегории внутри навигации ─── */ .m-nav-subcategories { list-style: none !important; padding: 0 12px 12px 54px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .m-nav-subcategory { padding: 12px 16px !important; background: white !important; border-radius: 10px !important; font-size: 14px !important; color: var(--info-text-muted, #64748b) !important; text-decoration: none !important; display: block !important; transition: all 0.2s ease !important; } .m-nav-subcategory:active { background: rgba(24, 125, 53, 0.08) !important; color: var(--info-primary, #187D35) !important; } .m-nav-subcategory.active { background: rgba(24, 125, 53, 0.12) !important; color: var(--info-primary, #187D35) !important; font-weight: 600 !important; } /* ─── Основной контент — карточный дизайн ─── */ .info-container .content { order: 1 !important; margin: 0 !important; padding: 20px 16px !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; min-height: auto !important; } /* Заголовок контента */ .info-container .content-title { font-size: 24px !important; font-weight: 700 !important; color: var(--info-text, #1e293b) !important; margin-bottom: 12px !important; padding-bottom: 16px !important; line-height: 1.3 !important; position: relative !important; } .info-container .content-title::after { width: 48px !important; height: 3px !important; bottom: 0 !important; background: linear-gradient(90deg, var(--info-primary, #187D35), var(--info-gold, #c9a227)) !important; } /* Мета-информация */ .info-container .chapter-meta { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 20px !important; padding: 14px 16px !important; background: white !important; border-radius: 14px !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important; } .info-container .chapter-meta span { padding: 6px 12px !important; font-size: 13px !important; background: #f8fafc !important; border-radius: 8px !important; color: var(--info-text-muted, #64748b) !important; box-shadow: none !important; } /* Карточка контента */ .m-content-card { background: white !important; border-radius: 20px !important; padding: 24px 20px !important; margin-bottom: 16px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; border: 1px solid rgba(0, 0, 0, 0.03) !important; animation: m-card-appear 0.4s ease forwards !important; } @keyframes m-card-appear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Текст контента */ .info-container .content-text { font-size: 15px !important; line-height: 1.75 !important; color: var(--info-text, #1e293b) !important; background: white !important; padding: 20px !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important; margin-bottom: 16px !important; } .info-container .content-text p { margin-bottom: 16px !important; } .info-container .content-text p:last-child { margin-bottom: 0 !important; } /* Ссылки в контенте */ .info-container .content-text a { color: var(--info-primary, #187D35) !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Изображения в контенте */ .info-container .content img { border-radius: 16px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; max-width: 100% !important; height: auto !important; } /* PDF и файловые ссылки */ .info-container .pdf-link { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 18px !important; background: white !important; border-radius: 14px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important; margin-bottom: 10px !important; text-decoration: none !important; transition: all 0.2s ease !important; } .info-container .pdf-link:active { transform: scale(0.98) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } /* Аккордеоны подразделов */ .info-container .subchapter-accordion { background: white !important; border-radius: 16px !important; overflow: hidden !important; margin-bottom: 12px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; } .info-container .accordion-header { padding: 18px 20px !important; background: linear-gradient(135deg, var(--info-primary, #187D35) 0%, var(--info-primary-dark, #0d5a25) 100%) !important; } .info-container .accordion-header h4 { font-size: 15px !important; font-weight: 600 !important; } .info-container .accordion-content { padding: 20px !important; background: #fafbfc !important; } /* Таблицы */ .info-container table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; border-radius: 12px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; } .info-container th, .info-container td { padding: 12px 14px !important; font-size: 13px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Стрелки для газет на мобильной версии Это правило в самом конце файла для максимального приоритета ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Переопределяем ВСЕ возможные правила для стрелок газет, включая Bootstrap */ .au-media-block--newspaper .au-carousel-wrapper button.au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none, .au-media-block--newspaper .au-carousel-wrapper button.d-md-none.au-carousel-arrow, .au-media-block--newspaper .au-carousel-wrapper .d-md-none.au-carousel-arrow, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--left.d-md-none, .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow--right.d-md-none, section.au-media-block--newspaper .au-carousel-wrapper button.au-carousel-arrow.d-md-none, section.au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; width: 36px !important; height: 36px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; border: none !important; flex-shrink: 0 !important; cursor: pointer !important; } .au-media-block--newspaper .au-carousel-wrapper .au-carousel-arrow.d-md-none svg { width: 18px !important; height: 18px !important; stroke: white !important; pointer-events: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Топ-менеджмент - кнопки и точки в самом конце файла ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* ТОП-МЕНЕДЖМЕНТ: Кнопки и точки - переопределяем ВСЕ правила */ .au-leadership__carousel .au-carousel-nav { display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin-top: 20px !important; padding: 10px 0 !important; position: relative !important; width: 100% !important; z-index: 10 !important; visibility: visible !important; opacity: 1 !important; } .au-leadership__carousel .au-carousel-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; pointer-events: auto !important; touch-action: manipulation !important; } .au-leadership__carousel .au-carousel-btn:hover, .au-leadership__carousel .au-carousel-btn:active { background: linear-gradient(135deg, #0d5a25 0%, #05612a 100%) !important; transform: scale(0.95) !important; box-shadow: 0 2px 10px rgba(24, 125, 53, 0.5) !important; } .au-leadership__carousel .au-carousel-btn svg { width: 20px !important; height: 20px !important; stroke: white !important; pointer-events: none !important; } .au-leadership__carousel .au-carousel-indicators { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 16px !important; padding: 8px 0 !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } .au-leadership__carousel .au-carousel-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.25) !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; pointer-events: auto !important; } .au-leadership__carousel .au-carousel-dot.active { width: 24px !important; height: 8px !important; border-radius: 4px !important; background: var(--au-primary, #187D35) !important; min-width: 24px !important; } .au-leadership__carousel .au-carousel-dot:hover { background: rgba(24, 125, 53, 0.5) !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ КРИТИЧЕСКОЕ ПЕРЕОПРЕДЕЛЕНИЕ: Топ-менеджмент - кнопки и точки (без медиа-запроса для максимального приоритета) ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ: Топ-менеджмент - кнопки и точки */ section.au-section .au-leadership__carousel .au-carousel-nav, .au-leadership .au-leadership__carousel .au-carousel-nav, div.au-leadership__carousel .au-carousel-nav, .au-leadership__carousel .au-carousel-nav { display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin-top: 20px !important; padding: 10px 0 !important; position: relative !important; width: 100% !important; z-index: 10 !important; visibility: visible !important; opacity: 1 !important; } section.au-section .au-leadership__carousel .au-carousel-btn, .au-leadership .au-leadership__carousel .au-carousel-btn, div.au-leadership__carousel .au-carousel-btn, .au-leadership__carousel .au-carousel-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; pointer-events: auto !important; touch-action: manipulation !important; } section.au-section .au-leadership__carousel .au-carousel-btn:hover, section.au-section .au-leadership__carousel .au-carousel-btn:active, .au-leadership .au-leadership__carousel .au-carousel-btn:hover, .au-leadership .au-leadership__carousel .au-carousel-btn:active, div.au-leadership__carousel .au-carousel-btn:hover, div.au-leadership__carousel .au-carousel-btn:active, .au-leadership__carousel .au-carousel-btn:hover, .au-leadership__carousel .au-carousel-btn:active { background: linear-gradient(135deg, #0d5a25 0%, #05612a 100%) !important; transform: scale(0.95) !important; box-shadow: 0 2px 10px rgba(24, 125, 53, 0.5) !important; } section.au-section .au-leadership__carousel .au-carousel-btn svg, .au-leadership .au-leadership__carousel .au-carousel-btn svg, div.au-leadership__carousel .au-carousel-btn svg, .au-leadership__carousel .au-carousel-btn svg { width: 20px !important; height: 20px !important; stroke: white !important; pointer-events: none !important; } section.au-section .au-leadership__carousel .au-carousel-indicators, .au-leadership .au-leadership__carousel .au-carousel-indicators, div.au-leadership__carousel .au-carousel-indicators, .au-leadership__carousel .au-carousel-indicators { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 16px !important; padding: 8px 0 !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } section.au-section .au-leadership__carousel .au-carousel-dot, .au-leadership .au-leadership__carousel .au-carousel-dot, div.au-leadership__carousel .au-carousel-dot, .au-leadership__carousel .au-carousel-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.25) !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; pointer-events: auto !important; } section.au-section .au-leadership__carousel .au-carousel-dot.active, .au-leadership .au-leadership__carousel .au-carousel-dot.active, div.au-leadership__carousel .au-carousel-dot.active, .au-leadership__carousel .au-carousel-dot.active { width: 24px !important; height: 8px !important; border-radius: 4px !important; background: var(--au-primary, #187D35) !important; min-width: 24px !important; } section.au-section .au-leadership__carousel .au-carousel-dot:hover, .au-leadership .au-leadership__carousel .au-carousel-dot:hover, div.au-leadership__carousel .au-carousel-dot:hover, .au-leadership__carousel .au-carousel-dot:hover { background: rgba(24, 125, 53, 0.5) !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ФИНАЛЬНОЕ ПЕРЕОПРЕДЕЛЕНИЕ: Гарантируем видимость элементов ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Переопределяем .au-reveal-left для топ-менеджмента */ /* JavaScript добавляет класс .is-visible, а не .revealed - поддерживаем оба варианта */ .au-leadership__carousel.au-reveal-left, .au-leadership__carousel.au-reveal-left.revealed, .au-leadership__carousel.au-reveal-left.is-visible { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; } /* ПРИМЕЧАНИЕ: Не меняем overflow-x: auto у .au-leader-carousel */ /* overflow-x: auto нужен для горизонтального скролла карусели */ /* Навигация находится ВНЕ .au-leader-carousel, поэтому overflow не влияет на нее */ /* Гарантируем, что родительский элемент не скрывает дочерние и имеет правильную ширину */ .au-leadership__carousel { position: relative !important; overflow: visible !important; min-height: auto !important; padding-bottom: 80px !important; /* Место для навигации */ transform: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Внутренний контейнер карусели - горизонтальный скролл */ .au-leadership__carousel #leaderCarousel, .au-leadership__carousel .au-leader-carousel { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } /* Карточка лидера - полная ширина на мобильном */ .au-leadership__carousel .au-leader-card { width: 100% !important; max-width: 100% !important; scroll-snap-align: start !important; flex-shrink: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } .au-leadership__carousel .au-leader-card[style*="display: none"] { display: none !important; } .au-leadership__carousel .au-leader-card[style*="display: grid"] { display: grid !important; } /* Кнопки навигации - гарантируем видимость и размеры */ .au-leadership__carousel .au-carousel-nav { display: flex !important; visibility: visible !important; opacity: 1 !important; justify-content: center !important; align-items: center !important; gap: 16px !important; height: auto !important; min-height: 48px !important; width: 100% !important; margin-top: 20px !important; padding: 10px 0 !important; position: relative !important; z-index: 999 !important; flex-wrap: nowrap !important; } /* Кнопки - гарантируем видимость и размеры */ .au-leadership__carousel .au-carousel-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border: none !important; border-radius: 50% !important; box-shadow: 0 4px 15px rgba(24, 125, 53, 0.35) !important; pointer-events: auto !important; touch-action: manipulation !important; } /* Точки - гарантируем видимость и размеры */ .au-leadership__carousel .au-carousel-indicators { display: flex !important; visibility: visible !important; opacity: 1 !important; justify-content: center !important; align-items: center !important; gap: 8px !important; height: auto !important; min-height: 8px !important; width: 100% !important; margin-top: 16px !important; padding: 8px 0 !important; position: relative !important; z-index: 999 !important; flex-wrap: nowrap !important; } .au-leadership__carousel .au-carousel-dot { display: block !important; visibility: visible !important; opacity: 1 !important; width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; background: rgba(0, 0, 0, 0.25) !important; pointer-events: auto !important; } .au-leadership__carousel .au-carousel-dot.active { width: 24px !important; height: 8px !important; min-width: 24px !important; background: #187D35 !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 1: Топ-менеджмент карточка - центрирование и одинаковый размер ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Центрируем карточку лидера */ .au-leadership__carousel .au-leader-card { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; padding: 0 16px !important; box-sizing: border-box !important; } /* Изображение лидера - по центру */ .au-leadership__carousel .au-leader-card__image { width: 180px !important; height: 220px !important; margin: 0 auto 16px !important; flex-shrink: 0 !important; } .au-leadership__carousel .au-leader-card__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 16px !important; } /* Информация о лидере - по центру с фиксированной высотой */ .au-leadership__carousel .au-leader-card__info { text-align: center !important; width: 100% !important; min-height: 120px !important; max-height: 160px !important; overflow: hidden !important; } .au-leadership__carousel .au-leader-card__info h3 { font-size: 18px !important; margin-bottom: 8px !important; line-height: 1.3 !important; } .au-leadership__carousel .au-leader-card__info p { font-size: 14px !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 2: Новости - одинаковая ширина карточек ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Все карточки новостей одинаковой ширины */ .au-news-card, .au-news-card--featured, .au-news-card--small { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .au-news-card__title { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 60px !important; max-height: 80px !important; } /* Сетка новостей */ .au-news-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; } .au-news-grid__sidebar { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 2b: Программы (Бакалавр/Магистр/Докторантура) - одинаковый размер ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Все карточки программ одинакового размера */ .au-programs__grid { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 0 16px !important; } .au-program-card { width: 100% !important; max-width: 100% !important; min-height: 280px !important; max-height: 320px !important; box-sizing: border-box !important; overflow: hidden !important; } .au-program-card--bachelor, .au-program-card--master, .au-program-card--doctoral { min-height: 280px !important; max-height: 320px !important; } .au-program-card__content { overflow: hidden !important; } .au-program-card__features { max-height: 80px !important; overflow: hidden !important; } .au-program-card__desc { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 3: Поиск модальное окно - PREMIUM WOW ДИЗАЙН Glassmorphism, анимации, современный стиль ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Модальное окно - СКРЫТО по умолчанию */ .shopwindow { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; max-width: 100vw !important; max-height: 100vh !important; background: linear-gradient(135deg, #0a3d1f 0%, #187D35 25%, #0d5a25 50%, #1a6b3a 75%, #0a3d1f 100%) !important; background-size: 400% 400% !important; animation: gradientShift 15s ease infinite !important; z-index: 9999 !important; overflow-y: auto !important; padding: 24px 20px 100px !important; box-sizing: border-box !important; border-radius: 0 !important; } /* Анимация градиента */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ПОКАЗАТЬ модальное окно */ .shopwindow.shopwindow-visible { display: block !important; animation: shopwindowOpen 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } /* Анимация закрытия */ .shopwindow.shopwindow-closing { animation: shopwindowClose 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } @keyframes shopwindowOpen { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes shopwindowClose { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.95); } } .shopwindow .container { padding: 0 !important; max-width: 100% !important; } /* ═══ КНОПКА ЗАКРЫТИЯ - ПРЕМИУМ ═══ */ #modalnoye_okno { position: fixed !important; top: 20px !important; right: 20px !important; width: 48px !important; height: 48px !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 32px !important; color: white !important; cursor: pointer !important; z-index: 10000 !important; transform: rotate(45deg) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important; } #modalnoye_okno:active { background: rgba(255, 255, 255, 0.3) !important; transform: rotate(45deg) scale(0.9) !important; } /* ═══ ПОИСКОВАЯ ФОРМА - ПЛАВАЮЩАЯ ═══ */ .Search_blok { margin-top: 80px !important; padding: 24px !important; background: rgba(255, 255, 255, 0.1) !important; border-radius: 24px !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .Search_blok .search-form { display: flex !important; flex-direction: column !important; gap: 16px !important; } /* Поле ввода - премиум */ .Search_blok .search-input { width: 100% !important; height: 60px !important; padding: 0 24px !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; border-radius: 16px !important; background: rgba(0, 0, 0, 0.2) !important; color: white !important; font-size: 17px !important; font-weight: 500 !important; outline: none !important; transition: all 0.3s ease !important; } .Search_blok .search-input:focus { border-color: rgba(255, 255, 255, 0.5) !important; background: rgba(0, 0, 0, 0.3) !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1) !important; } .Search_blok .search-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; } /* Кнопка поиска - золотая премиум */ .Search_blok .search-btn { width: 100% !important; height: 56px !important; background: linear-gradient(135deg, #d4a84b 0%, #c9a227 50%, #b8942a 100%) !important; border: none !important; border-radius: 16px !important; color: #1a1a1a !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 0.5px !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 8px 24px rgba(201, 162, 39, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } .Search_blok .search-btn:active { transform: scale(0.97) !important; box-shadow: 0 4px 16px rgba(201, 162, 39, 0.4) !important; } /* ═══ НАВИГАЦИОННЫЕ ССЫЛКИ - КАРТОЧКИ С ИКОНКАМИ ═══ */ .link-container { margin-top: 32px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; animation: fadeInUp 0.5s ease forwards !important; animation-delay: 0.1s !important; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Карточка ссылки */ .link-container .text { background: rgba(255, 255, 255, 0.08) !important; border-radius: 20px !important; padding: 20px 16px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: 70px !important; position: relative !important; overflow: hidden !important; } /* Hover/Active эффект для карточек */ .link-container .text:active { background: rgba(255, 255, 255, 0.2) !important; transform: scale(0.96) !important; border-color: rgba(255, 255, 255, 0.3) !important; } /* Свечение при активации */ .link-container .text::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important; transition: left 0.5s ease !important; } .link-container .text:active::before { left: 100% !important; } .link-container .text h4 { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; } .link-container .text h4 a { color: white !important; text-decoration: none !important; display: block !important; background: transparent !important; } /* Стили для анимированного появления карточек */ .link-container .text:nth-child(1) { animation-delay: 0.1s !important; } .link-container .text:nth-child(2) { animation-delay: 0.15s !important; } .link-container .text:nth-child(3) { animation-delay: 0.2s !important; } .link-container .text:nth-child(4) { animation-delay: 0.25s !important; } .link-container .text:nth-child(5) { animation-delay: 0.3s !important; } .link-container .text:nth-child(6) { animation-delay: 0.35s !important; } .link-container .text:nth-child(7) { animation-delay: 0.4s !important; } .link-container .text:nth-child(8) { animation-delay: 0.45s !important; } .link-container .text:nth-child(9) { animation-delay: 0.5s !important; } .link-container .text:nth-child(10) { animation-delay: 0.55s !important; } .link-container .text:nth-child(11) { animation-delay: 0.6s !important; } .link-container .text:nth-child(12) { animation-delay: 0.65s !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 4: Убираем маленькую зелёную кнопку меню (включая .visible) ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Убираем навигационную кнопку-гамбургер */ .navbar-toggle-btn, .navbar-toggle-btn.visible, .navbar-toggle-btn.show, button.navbar-toggle-btn, #navbarToggleBtn { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* Также скрываем внутреннюю кнопку-гамбургер Bootstrap */ .navbar-toggler { display: none !important; visibility: hidden !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ДОПОЛНИТЕЛЬНО: Центрирование карточки лидера ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Контейнер карусели лидеров - убираем горизонтальный скролл */ .au-leader-carousel, #leaderCarousel { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } /* Карточка лидера - по центру экрана */ .au-leader-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; width: 100% !important; max-width: 320px !important; margin: 0 auto !important; padding: 16px !important; box-sizing: border-box !important; } .au-leader-card[style*="display: none"] { display: none !important; } .au-leader-card[style*="display: grid"] { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Изображение лидера - центр */ .au-leader-card__image { width: 200px !important; height: 240px !important; margin: 0 auto 20px !important; border-radius: 16px !important; overflow: hidden !important; flex-shrink: 0 !important; } .au-leader-card__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Информация о лидере - центр */ .au-leader-card__info { text-align: center !important; width: 100% !important; max-width: 300px !important; } .au-leader-card__info h3 { font-size: 20px !important; font-weight: 600 !important; margin-bottom: 12px !important; line-height: 1.3 !important; color: #1a1a1a !important; } .au-leader-card__info p { font-size: 14px !important; line-height: 1.6 !important; color: #666 !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; max-height: 100px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 1: Модальное окно поиска - разделы видимые и четкий дизайн ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Основной контейнер модального окна */ .shopwindow { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: linear-gradient(160deg, #187D35 0%, #0a4d1e 50%, #031f0c 100%) !important; z-index: 99999 !important; overflow-y: auto !important; padding: 16px !important; box-sizing: border-box !important; } /* Кнопка закрытия */ .shopwindow #modalnoye_okno, .shopwindow .close-btn { position: fixed !important; top: 12px !important; right: 12px !important; width: 36px !important; height: 36px !important; background: rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; color: white !important; cursor: pointer !important; z-index: 100000 !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } /* Поисковый блок - зеленый фон */ .shopwindow .Search_blok { margin-top: 50px !important; padding: 20px !important; background: rgba(24, 125, 53, 0.3) !important; border-radius: 20px !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(24, 125, 53, 0.5) !important; } /* Поле ввода поиска - зеленый фон, белый текст */ .shopwindow .Search_blok input[type="text"], .shopwindow .Search_blok .search-input { width: 100% !important; height: 52px !important; padding: 14px 18px !important; border: 2px solid rgba(24, 125, 53, 0.6) !important; border-radius: 14px !important; background: rgba(24, 125, 53, 0.4) !important; color: white !important; font-size: 16px !important; font-weight: 500 !important; outline: none !important; margin-bottom: 12px !important; box-sizing: border-box !important; } .shopwindow .Search_blok input::placeholder { color: rgba(255, 255, 255, 0.7) !important; } /* Кнопка поиска */ .shopwindow .Search_blok button, .shopwindow .Search_blok .search-btn { width: 100% !important; height: 52px !important; background: linear-gradient(135deg, #d4af37 0%, #b8942a 100%) !important; border: none !important; border-radius: 14px !important; color: white !important; font-weight: 700 !important; font-size: 16px !important; cursor: pointer !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important; } /* Контейнер ссылок - ВИДИМЫЕ РАЗДЕЛЫ */ .shopwindow .link-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 20px !important; padding: 0 !important; } /* Стили для карточек теперь в более позднем блоке (после строки 4260) */ } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 2: Карточки статистики - одинаковый размер на всех телефонах ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Контейнер статистики */ .au-about__stats { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 16px !important; width: 100% !important; box-sizing: border-box !important; } /* Каждая карточка статистики - ОДИНАКОВЫЙ РАЗМЕР */ .au-stat { width: 100% !important; min-height: 90px !important; max-height: 120px !important; height: auto !important; padding: 16px 12px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(10px) !important; } .au-stat__number { font-size: clamp(28px, 8vw, 40px) !important; font-weight: 700 !important; line-height: 1.1 !important; } .au-stat__label { font-size: clamp(11px, 3vw, 13px) !important; text-transform: uppercase !important; margin-top: 6px !important; text-align: center !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 3: Hero секция - центрирование и скрыть прокрутку ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Центрирование описания в hero */ .au-hero__content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; } .au-hero__description { text-align: center !important; margin: 0 auto 24px !important; max-width: 90% !important; } .au-hero__title { text-align: center !important; } .au-hero__actions { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; } .au-hero__actions .au-btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; } /* СКРЫВАЕМ иконку прокрутки "Томен айналдырыныз" */ .au-hero__scroll { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 4: Хедер - показываем кнопку Platonus на мобильном ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Показываем Platonus кнопку - УВЕЛИЧЕННАЯ И ВЫРОВНЕННАЯ */ #platonusBtn, .btn-primary[href*="asu-edu"], header #platonusBtn { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border-radius: 8px !important; color: white !important; text-decoration: none !important; align-items: center !important; height: 40px !important; min-height: 40px !important; white-space: nowrap !important; } /* Стиль хедера на мобильном */ .au-header nav, header nav { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ISSUE 5: Языки KZ/RU/EN - центрирование ниже ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Переключатель языка */ .lang-top-menu, .language-switcher, .navbar-top, [class*="lang"] { display: flex !important; justify-content: center !important; align-items: center !important; padding: 10px 0 !important; gap: 16px !important; } /* Отдельные языковые ссылки */ .lang-top-menu a, .language-switcher a, .navbar-top a { padding: 6px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: white !important; opacity: 0.8 !important; } .lang-top-menu a.active, .language-switcher a.active { opacity: 1 !important; font-weight: 700 !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ ДОПОЛНИТЕЛЬНО: Программные карточки - одинаковый размер на ВСЕХ экранах ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .au-programs__grid { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 0 16px !important; width: 100% !important; box-sizing: border-box !important; } .au-program-card { width: 100% !important; min-height: 260px !important; max-height: 300px !important; height: auto !important; box-sizing: border-box !important; padding: 24px 20px !important; overflow: hidden !important; } .au-program-card--bachelor, .au-program-card--master, .au-program-card--doctoral { min-height: 260px !important; max-height: 300px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ FIX: Модальное окно поиска - ТЁМНЫЙ ТЕКСТ на белых кнопках ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Улучшенный дизайн карточек с тенями, градиентами и читаемым текстом */ .shopwindow .link-container { gap: 12px !important; margin-top: 24px !important; padding: 0 4px !important; } /* Карточки с фоном #275f43 и белым текстом */ .shopwindow .link-container .text, .shopwindow .link-container>a, .shopwindow .link-container>div { background: #275f43 !important; color: #ffffff !important; border: 1px solid #275f43 !important; border-radius: 12px !important; padding: 16px 14px !important; min-height: auto !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; transition: all 0.3s ease !important; position: relative !important; } /* Эффект при нажатии */ .shopwindow .link-container .text:active, .shopwindow .link-container>a:active, .shopwindow .link-container>div:active { transform: translateY(1px) scale(0.98) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important; } /* Текст как на ПК версии - белый текст на зеленом фоне */ .shopwindow .link-container .text h4, .shopwindow .link-container .text h4 a, .shopwindow .link-container a h4, .shopwindow .link-container a, .shopwindow .link-container>div h4, .shopwindow .link-container span, .shopwindow .link-container p, /* Переопределяем все возможные стили из других файлов */ .au-home .shopwindow .link-container .text a, #shopwindow .link-container .text a, .shopwindow .text a { color: #ffffff !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.4 !important; text-shadow: none !important; text-decoration: none !important; margin: 0 !important; letter-spacing: 0.01em !important; opacity: 1 !important; visibility: visible !important; } /* Ссылки - белый текст как на ПК */ .shopwindow .link-container .text h4 a, .shopwindow .link-container .text a, .shopwindow .link-container a { color: #ffffff !important; text-decoration: none !important; display: block !important; width: 100% !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; font-weight: 700 !important; font-size: 14px !important; } /* Эффект hover/active - немного светлее */ .shopwindow .link-container .text:hover, .shopwindow .link-container>a:hover, .shopwindow .link-container>div:hover, .shopwindow .link-container .text:active, .shopwindow .link-container>a:active, .shopwindow .link-container>div:active { background: #2d6f4f !important; border-color: #275f43 !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important; } /* Гарантируем, что текст внутри карточек виден */ .shopwindow .link-container .text { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Изменяем белые карточки на зеленые #275f43 */ .shopwindow .link-container, .shopwindow .link-container>*, .shopwindow .link-container .text, .shopwindow .link-container>a, .shopwindow .link-container>div { background: #275f43 !important; background-color: #275f43 !important; } /* Для всех дочерних элементов */ .shopwindow .link-container * { background: #275f43 !important; } /* Убираем белый фон у возможных контейнеров */ .shopwindow>div, .shopwindow .container { background: transparent !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ FIX: Platonus кнопка - показываем в мобильном навигации ═══════════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* Показываем Platonus именно в навигационной панели */ nav #platonusBtn, .navbar #platonusBtn, header #platonusBtn, a#platonusBtn, .au-header #platonusBtn { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; padding: 6px 12px !important; font-size: 11px !important; font-weight: 600 !important; background: linear-gradient(135deg, #187D35 0%, #0d5a25 100%) !important; border-radius: 6px !important; color: white !important; text-decoration: none !important; margin-left: 6px !important; white-space: nowrap !important; order: 3 !important; flex-shrink: 0 !important; } /* Переопределяем любые display:none для platonusBtn */ a[href*="asu-edu"], [id="platonusBtn"] { display: inline-flex !important; visibility: visible !important; } /* Переопределяем скрытие родительского контейнера */ nav .d-flex, header nav .d-flex { display: flex !important; align-items: center !important; gap: 6px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ END OF MOBILE CSS ═══════════════════════════════════════════════════════════════════════════════ */