/* ===== ПЕРЕМЕННЫЕ ===== */ :root { --primary: #2A5BA8; --primary-dark: #1E4A8A; --primary-light: #4A7BC8; --accent: #4CAF50; --bg: #F5F7FA; --white: #FFFFFF; --text: #2D3748; --text-light: #718096; --border: #E2E8F0; --shadow: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --radius: 8px; } /* ===== БАЗА ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #1A202C; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; } /* ===== КНОПКИ ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-large { padding: 18px 36px; font-size: 1.125rem; font-weight: 700; } .btn-small { padding: 10px 20px; font-size: 0.875rem; } /* ===== ШАПКА ===== */ .header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; width: 100%; } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; } .header-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-img { width: 60px; height: 60px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.875rem; color: #1A202C; white-space: nowrap; } .logo-subtitle { font-size: 0.875rem; color: var(--primary); font-weight: 600; } /* ===== ТЕЛЕФОН - СДЕЛАЛ ВИДНЕЕ! ===== */ .header-contacts { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .phone-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--primary); background: linear-gradient(135deg, #ffffff 0%, #FFFFFF 100%); padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--primary); transition: all 0.3s; } .phone-link:hover { color: var(--white); background: var(--primary); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .work-hours { font-size: 0.875rem; color: var(--text-light); } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; gap: 16px; position: relative; } /* ===== НАВИГАЦИЯ ===== */ .nav-list { display: flex; list-style: none; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; } .nav-link { display: block; padding: 10px 16px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--text); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .nav-link:hover, .nav-link.active { background: var(--primary); color: var(--white); text-decoration: none; } /* ===== БУРГЕР-МЕНЮ ===== */ .burger-menu { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 8px; flex-shrink: 0; z-index: 101; } .burger-menu span { display: block; width: 24px; height: 3px; background: var(--primary); border-radius: 2px; transition: all 0.3s; } .burger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .burger-menu.active span:nth-child(2) { opacity: 0; width: 0; } .burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .search-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: var(--text); flex-shrink: 0; } /* ===== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ===== */ .accessibility-panel { position: fixed; top: 20px; right: 20px; z-index: 300; } .accessibility-btn { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-weight: 600; color: var(--primary); font-family: 'Roboto', sans-serif; font-size: 0.875rem; box-shadow: var(--shadow); transition: all 0.2s; white-space: nowrap; } .accessibility-btn:hover, .accessibility-btn:focus, .accessibility-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); outline: 3px solid var(--accent); outline-offset: 2px; } body.accessibility-mode { font-size: 20px !important; line-height: 1.8 !important; } body.accessibility-mode h1 { font-size: 3rem !important; } body.accessibility-mode h2 { font-size: 2.5rem !important; } body.accessibility-mode h3 { font-size: 2rem !important; } body.accessibility-mode p, body.accessibility-mode span, body.accessibility-mode li { font-size: 1.25rem !important; line-height: 1.8 !important; } body.accessibility-mode .btn { font-size: 1.2rem !important; padding: 18px 36px !important; min-height: 54px !important; } body.accessibility-mode .nav-link { font-size: 1.1rem !important; padding: 14px 20px !important; } body.accessibility-mode .phone-link { font-size: 1.5rem !important; } body.accessibility-mode img { border: 3px solid #000 !important; } body.accessibility-mode a { text-decoration: underline !important; } /* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */ @media (max-width: 768px) { .header-top { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px 0 !important; } .header-logo { justify-content: center !important; margin-bottom: 8px !important; width: 100% !important; } .logo-title { font-size: 0.7rem !important; } .header-contacts { text-align: center !important; width: 100% !important; align-items: center !important; } .phone-link { font-size: 1.125rem !important; justify-content: center !important; } .work-hours { font-size: 0.75rem !important; } .burger-menu { display: flex !important; } .nav-list { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; padding: 16px !important; z-index: 99 !important; border-top: 1px solid var(--border) !important; display: none !important; } .nav-list.active { display: flex !important; } .nav-link { padding: 12px 16px !important; font-size: 1rem !important; text-align: center !important; width: 100% !important; } .search-btn { position: absolute; top: 16px; right: 60px; } .page-hero { padding: 60px 0 !important; } .page-title { font-size: 2rem !important; padding: 0 16px !important; } .page-subtitle { font-size: 1rem !important; padding: 0 16px !important; } .section { padding: 40px 0 !important; } .section-title { font-size: 1.75rem !important; margin-bottom: 32px !important; padding: 0 16px !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .about-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .about-image img { height: 250px !important; } .doctors-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .services-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .news-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .hero-buttons { flex-direction: column !important; align-items: center !important; } .hero-buttons .btn { width: 100% !important; max-width: 300px !important; } .form-row { grid-template-columns: 1fr !important; gap: 16px !important; } .contacts-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .accessibility-panel { top: 10px !important; right: 10px !important; } .accessibility-text { display: none !important; } .accessibility-btn { padding: 10px 12px !important; } .footer-grid { grid-template-columns: 1fr !important; text-align: center !important; gap: 24px !important; } .social-links { justify-content: center !important; } .cta-buttons { flex-direction: column !important; align-items: center !important; } .cta-buttons .btn { width: 100% !important; max-width: 300px !important; } } /* ===== ОСТАЛЬНЫЕ СТИЛИ ===== */ .section { padding: 64px 0; } .section-title { text-align: center; margin-bottom: 48px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 16px auto 0; border-radius: 2px; } .section-description { text-align: center; color: var(--text-light); max-width: 600px; margin: -24px auto 32px; } .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; color: var(--white); } .page-title { color: var(--white); margin-bottom: 16px; } .page-subtitle { font-size: 1.25rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } .stats-bar { background: var(--white); padding: 40px 0; border-bottom: 1px solid var(--border); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-item { text-align: center; } .stat-number { display: block; font-family: 'Roboto', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 0.875rem; color: var(--text-light); font-weight: 600; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .about-features { list-style: none; margin: 24px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .about-features li { display: flex; align-items: center; gap: 8px; font-weight: 500; } .about-image img { border-radius: 12px; box-shadow: var(--shadow-lg); width: 100%; height: 350px; object-fit: cover; } .doctors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; } .doctor-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid var(--border); display: flex; flex-direction: column; } .doctor-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .doctor-photo { height: 220px; overflow: hidden; background: var(--bg); position: relative; } .doctor-photo img { width: 100%; height: 100%; object-fit: cover; } .doctor-info { padding: 20px; flex: 1; display: flex; flex-direction: column; } .doctor-name { font-size: 1.125rem; margin-bottom: 8px; color: #1A202C; font-weight: 700; line-height: 1.3; } .doctor-position { color: var(--primary); font-weight: 600; font-size: 0.875rem; margin-bottom: 8px; } .doctor-specialty, .doctor-experience { color: var(--text-light); font-size: 0.875rem; margin-bottom: 4px; } .doctor-card .btn { margin-top: auto; margin: 16px 20px 20px; } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; } .service-card { background: var(--white); padding: 24px; border-radius: 12px; box-shadow: var(--shadow); text-align: center; transition: all 0.3s; border: 1px solid var(--border); } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .service-icon { font-size: 3.5rem; margin-bottom: 16px; } .service-title { font-size: 1.125rem; margin-bottom: 12px; } .service-desc { color: var(--text-light); margin-bottom: 16px; font-size: 0.95rem; } .service-link { font-weight: 600; color: var(--primary); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; } .news-card { background: var(--white); border-radius: 12px; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid var(--border); padding: 24px; } .news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .news-date { font-size: 0.875rem; color: var(--primary); margin-bottom: 8px; display: block; font-weight: 600; } .news-title { font-size: 1.125rem; margin-bottom: 12px; line-height: 1.4; } .news-excerpt { color: var(--text-light); margin-bottom: 16px; font-size: 0.95rem; } .news-link { font-weight: 600; color: var(--primary); } .appointment-section { background: var(--white); } .appointment-form { max-width: 800px; margin: 0 auto; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-family: 'Roboto', sans-serif; font-weight: 600; color: var(--text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: 'Open Sans', sans-serif; border: 2px solid var(--border); border-radius: var(--radius); outline: none; transition: all 0.2s; background: var(--white); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42, 91, 168, 0.1); } .form-group textarea { resize: vertical; min-height: 100px; } .form-error { display: block; color: #E74C3C; font-size: 0.875rem; margin-top: 4px; min-height: 20px; font-weight: 500; } .form-group.error input, .form-group.error select, .form-group.error textarea { border-color: #E74C3C; } .form-group.success input, .form-group.success select, .form-group.success textarea { border-color: var(--accent); } .checkbox-group { display: flex; align-items: flex-start; gap: 10px; } .checkbox-group input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; cursor: pointer; } .checkbox-group label { cursor: pointer; font-weight: 500; } .form-note { text-align: center; margin-top: 20px; color: var(--text-light); font-size: 0.95rem; } .form-note a { font-weight: 600; color: var(--primary); } .contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .contact-item { display: flex; gap: 16px; margin-bottom: 20px; padding: 16px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); transition: all 0.2s; } .contact-item:hover { border-color: var(--primary); box-shadow: var(--shadow); } .contact-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; flex-shrink: 0; } .contact-note { font-size: 0.875rem; color: var(--text-light); } .map-container { height: 450px; background: var(--bg); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); position: relative; } #map { width: 100%; height: 100%; min-height: 450px; } .map-loading { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: var(--text-light); padding: 20px; text-align: center; } .map-spinner { width: 50px; height: 50px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; } @keyframes spin { to { transform: rotate(360deg); } } .map-controls { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .banners-section { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); } .banners-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; align-items: center; } .banner-item { opacity: 0.7; } .banner-item img { height: 50px; width: auto; } .footer { background: var(--primary-dark); color: var(--white); padding: 48px 0 32px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; } .footer-title { color: var(--white); margin-bottom: 20px; font-size: 1.125rem; font-weight: 600; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: rgba(255,255,255,0.8); } .footer-links a:hover { color: var(--white); } .social-links { display: flex; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-weight: 600; } .footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 32px 16px; } .cta-section { background: linear-gradient(135deg, #E8F4FD 0%, var(--white) 100%); } .cta-box { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .section-cta { text-align: center; margin-top: 32px; } .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 12px 24px; border-radius: var(--radius); z-index: 300; font-weight: 600; } .skip-link:focus { top: 16px; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-container { background: var(--white); border-radius: 12px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); } .modal-container.modal-small { max-width: 450px; text-align: center; } .modal-container.modal-appointment { max-width: 900px; } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: var(--bg); border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; color: var(--text); z-index: 10; } .modal-content { padding: 32px; } .confirm-message { margin: 24px 0; color: var(--text); } .appointment-modal-content { padding: 0; } .appointment-modal-image { width: 100%; height: auto; display: block; border-radius: 12px; } /* Search Overlay */ .search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .search-overlay.active { display: flex; } .search-container { position: relative; width: 100%; max-width: 600px; } .search-form { display: flex; gap: 12px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 200px; padding: 16px; font-size: 1.125rem; border: 2px solid var(--border); border-radius: var(--radius); outline: none; } .search-input:focus { border-color: var(--primary); } .search-submit { padding: 16px 24px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; } .search-close { position: absolute; top: -50px; right: 0; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; } :root { --primary: #2A5BA8; --primary-dark: #1E4A8A; --bg: #F5F7FA; --white: #FFFFFF; --text: #2D3748; --text-light: #718096; --border: #E2E8F0; --shadow: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #1A202C; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.125rem; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); text-decoration: none; } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); text-decoration: none; } .btn-large { padding: 18px 36px; font-size: 1.125rem; font-weight: 700; } .btn-small { padding: 10px 20px; font-size: 0.875rem; } /* ===== ШАПКА ===== */ .header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; width: 100%; } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; } .header-logo { display: flex; align-items: center; gap: 12px; } .logo-img { width: 60px; height: 60px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.875rem; color: #1A202C; white-space: nowrap; } .logo-subtitle { font-size: 0.875rem; color: var(--primary); font-weight: 600; } .header-contacts { text-align: right; } .phone-link { display: block; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--primary); } .work-hours { font-size: 0.875rem; color: var(--text-light); } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; gap: 16px; position: relative; } /* ===== НАВИГАЦИЯ ===== */ .nav-list { display: flex; list-style: none; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; } .nav-link { display: block; padding: 10px 16px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--text); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .nav-link:hover, .nav-link.active { background: var(--primary); color: var(--white); text-decoration: none; } /* ===== БУРГЕР ===== */ .burger-menu { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 8px; flex-shrink: 0; } .burger-menu span { display: block; width: 24px; height: 3px; background: var(--primary); border-radius: 2px; transition: all 0.3s; } .burger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .burger-menu.active span:nth-child(2) { opacity: 0; width: 0; } .burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .search-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: var(--text); flex-shrink: 0; } /* ===== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ===== */ .accessibility-panel { position: fixed; top: 20px; right: 20px; z-index: 300; } .accessibility-btn { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-weight: 600; color: var(--primary); font-family: 'Roboto', sans-serif; font-size: 0.875rem; box-shadow: var(--shadow); transition: all 0.2s; white-space: nowrap; } .accessibility-btn:hover, .accessibility-btn:focus, .accessibility-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); outline: 3px solid var(--accent); outline-offset: 2px; } body.accessibility-mode { font-size: 20px !important; line-height: 1.8 !important; } body.accessibility-mode h1 { font-size: 3rem !important; } body.accessibility-mode h2 { font-size: 2.5rem !important; } body.accessibility-mode h3 { font-size: 2rem !important; } body.accessibility-mode p, body.accessibility-mode span, body.accessibility-mode li { font-size: 1.25rem !important; line-height: 1.8 !important; } body.accessibility-mode .btn { font-size: 1.2rem !important; padding: 18px 36px !important; min-height: 54px !important; } body.accessibility-mode .nav-link { font-size: 1.1rem !important; padding: 14px 20px !important; } body.accessibility-mode .phone-link { font-size: 1.5rem !important; } body.accessibility-mode img { border: 3px solid #000 !important; } body.accessibility-mode a { text-decoration: underline !important; } /* ===== МОБИЛЬНАЯ ВЕРСИЯ - ИСПРАВЛЕНО! ===== */ @media (max-width: 768px) { .header-top { flex-direction: column; align-items: center; text-align: center; padding: 12px 0; } .header-logo { justify-content: center; margin-bottom: 8px; width: 100%; } .logo-title { font-size: 0.7rem; } .header-contacts { text-align: center; width: 100%; } .phone-link { font-size: 1rem; } .work-hours { font-size: 0.75rem; } .burger-menu { display: flex !important; } .nav-list { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 16px; z-index: 99; border-top: 1px solid var(--border); display: none !important; } .nav-list.active { display: flex !important; } .nav-link { padding: 12px 16px; font-size: 1rem; text-align: center; width: 100%; } .search-btn { position: absolute; top: 16px; right: 60px; } .page-hero { padding: 60px 0; } .page-title { font-size: 2rem; padding: 0 16px; } .page-subtitle { font-size: 1rem; padding: 0 16px; } .section { padding: 40px 0; } .section-title { font-size: 1.75rem; margin-bottom: 32px; padding: 0 16px; } /* ===== КАРТОЧКИ ВРАЧЕЙ - ИСПРАВЛЕНО! ===== */ .doctors-grid { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 16px; } .doctor-card { width: 100% !important; max-width: 100% !important; } .doctor-photo { height: 250px !important; width: 100% !important; } .doctor-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .doctor-info { padding: 16px !important; } .doctor-name { font-size: 1.125rem !important; line-height: 1.3 !important; word-wrap: break-word !important; hyphens: auto !important; } .doctor-position, .doctor-specialty, .doctor-experience { font-size: 0.875rem !important; line-height: 1.4 !important; } .doctor-card .btn { margin: 16px !important; width: calc(100% - 32px) !important; } .doctor-badge { top: 10px !important; right: 10px !important; font-size: 0.7rem !important; padding: 4px 10px !important; max-width: calc(100% - 20px) !important; white-space: normal !important; word-wrap: break-word !important; } .filters-wrapper { flex-direction: column; align-items: stretch; padding: 0 16px; } .filter-group { flex-direction: column; align-items: stretch; } .filter-select { width: 100%; min-width: auto; } .filter-actions { justify-content: center; } .accessibility-panel { top: 10px; right: 10px; } .accessibility-text { display: none; } .accessibility-btn { padding: 10px 12px; } } /* ===== ОСТАЛЬНЫЕ СТИЛИ ===== */ .section { padding: 64px 0; } .section-title { text-align: center; margin-bottom: 48px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), #4CAF50); margin: 16px auto 0; border-radius: 2px; } .section-description { text-align: center; color: var(--text-light); max-width: 600px; margin: -24px auto 32px; } .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; color: var(--white); } .page-title { color: var(--white); margin-bottom: 16px; } .page-subtitle { font-size: 1.25rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } .filters-section { background: var(--white); padding: 24px 0; border-bottom: 1px solid var(--border); } .filters-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .filter-group { display: flex; align-items: center; gap: 12px; } .filter-label { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text); } .filter-select { padding: 12px 20px; font-size: 1rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--white); cursor: pointer; min-width: 220px; } .filter-select:focus { outline: none; border-color: var(--primary); } .doctors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; } .doctor-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid var(--border); display: flex; flex-direction: column; } .doctor-card.hidden { display: none; } .doctor-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .doctor-photo { height: 220px; overflow: hidden; background: var(--bg); position: relative; } .doctor-photo img { width: 100%; height: 100%; object-fit: cover; } .doctor-info { padding: 20px; flex: 1; display: flex; flex-direction: column; } .doctor-name { font-size: 1.125rem; margin-bottom: 8px; color: #1A202C; font-weight: 700; line-height: 1.3; } .doctor-position { color: var(--primary); font-weight: 600; font-size: 0.875rem; margin-bottom: 8px; } .doctor-specialty, .doctor-experience { color: var(--text-light); font-size: 0.875rem; margin-bottom: 4px; } .doctor-card .btn { margin-top: auto; margin: 16px 20px 20px; } .doctor-badge { position: absolute; top: 12px; right: 12px; background: #4CAF50; color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; z-index: 10; } .no-results { text-align: center; padding: 60px 20px; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); } .no-results-icon { font-size: 4rem; margin-bottom: 16px; } .no-results h3 { font-size: 1.5rem; margin-bottom: 8px; color: var(--text); } .no-results p { color: var(--text-light); margin-bottom: 24px; } .cta-section { background: linear-gradient(135deg, #E8F4FD 0%, var(--white) 100%); } .cta-box { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .section-cta { text-align: center; margin-top: 32px; } .banners-section { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); } .banners-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; align-items: center; } .banner-item { opacity: 0.7; } .banner-item img { height: 50px; width: auto; } .footer { background: var(--primary-dark); color: var(--white); padding: 48px 0 32px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; } .footer-title { color: var(--white); margin-bottom: 20px; font-size: 1.125rem; font-weight: 600; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: rgba(255,255,255,0.8); } .footer-links a:hover { color: var(--white); } .social-links { display: flex; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-weight: 600; } .footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 32px 16px; } .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 12px 24px; border-radius: var(--radius); z-index: 300; font-weight: 600; } .skip-link:focus { top: 16px; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-container { background: var(--white); border-radius: 12px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); margin: 16px; } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: var(--bg); border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; color: var(--text); z-index: 10; } .modal-content { padding: 32px; } @media (max-width: 768px) { .modal-container { margin: 10px; max-height: 85vh; } .modal-content { padding: 20px 16px; } .doctor-modal-header { flex-direction: column; text-align: center; } .doctor-modal-photo { width: 120px; height: 120px; margin: 0 auto; } .doctor-modal-footer { flex-direction: column; } .doctor-modal-footer .btn { width: 100% !important; } } .doctor-modal-header { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; align-items: flex-start; } .doctor-modal-photo { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; border: 3px solid var(--primary); } .doctor-modal-info { flex: 1; min-width: 200px; } .doctor-modal-name { font-size: 1.5rem; color: var(--primary); margin-bottom: 8px; } .doctor-modal-position { color: var(--text); font-weight: 600; margin-bottom: 8px; } .doctor-modal-specialty { color: var(--text-light); margin-bottom: 8px; } .doctor-modal-experience { color: var(--text-light); } .doctor-modal-section { margin-bottom: 24px; padding: 16px; background: var(--bg); border-radius: var(--radius); } .doctor-modal-section h4 { color: var(--primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .doctor-modal-section p { color: var(--text); line-height: 1.6; margin-bottom: 8px; } .doctor-modal-section ul { list-style: none; padding-left: 0; } .doctor-modal-section ul li { padding: 6px 0; padding-left: 24px; position: relative; color: var(--text); } .doctor-modal-section ul li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .doctor-modal-footer { display: flex; gap: 16px; justify-content: center; padding-top: 24px; border-top: 1px solid var(--border); margin-top: 24px; flex-wrap: wrap; } .doctor-modal-rating { display: flex; align-items: center; gap: 8px; color: #F39C12; font-weight: 600; } .doctor-modal-reviews { color: var(--text-light); font-size: 0.875rem; } /* Search Overlay */ .search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .search-overlay.active { display: flex; } .search-container { position: relative; width: 100%; max-width: 600px; } .search-form { display: flex; gap: 12px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 200px; padding: 16px; font-size: 1.125rem; border: 2px solid var(--border); border-radius: var(--radius); outline: none; } .search-input:focus { border-color: var(--primary); } .search-submit { padding: 16px 24px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; } .search-close { position: absolute; top: -50px; right: 0; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; } :root { --primary: #2A5BA8; --primary-dark: #1E4A8A; --primary-light: #4A7BC8; --accent: #4CAF50; --bg: #F5F7FA; --white: #FFFFFF; --text: #2D3748; --text-light: #718096; --border: #E2E8F0; --shadow: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --radius: 8px; } /* ===== БАЗА ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #1A202C; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.125rem; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; } /* ===== КНОПКИ ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-large { padding: 18px 36px; font-size: 1.125rem; font-weight: 700; } .btn-small { padding: 10px 20px; font-size: 0.875rem; } /* ===== ШАПКА ===== */ .header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; width: 100%; } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; } .header-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-img { width: 60px; height: 60px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.875rem; color: #1A202C; white-space: nowrap; } .logo-subtitle { font-size: 0.875rem; color: var(--primary); font-weight: 600; } .header-contacts { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .phone-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--primary); background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 100%); padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--primary); transition: all 0.3s; } .phone-link:hover { color: var(--white); background: var(--primary); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .work-hours { font-size: 0.875rem; color: var(--text-light); } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; gap: 16px; position: relative; } /* ===== НАВИГАЦИЯ ===== */ .nav-list { display: flex; list-style: none; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; } .nav-link { display: block; padding: 10px 16px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--text); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .nav-link:hover, .nav-link.active { background: var(--primary); color: var(--white); text-decoration: none; } /* ===== БУРГЕР-МЕНЮ ===== */ .burger-menu { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 8px; flex-shrink: 0; z-index: 101; } .burger-menu span { display: block; width: 24px; height: 3px; background: var(--primary); border-radius: 2px; transition: all 0.3s; } .burger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .burger-menu.active span:nth-child(2) { opacity: 0; width: 0; } .burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .search-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: var(--text); flex-shrink: 0; } /* ===== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ===== */ .accessibility-panel { position: fixed; top: 20px; right: 20px; z-index: 300; } .accessibility-btn { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-weight: 600; color: var(--primary); font-family: 'Roboto', sans-serif; font-size: 0.875rem; box-shadow: var(--shadow); transition: all 0.2s; white-space: nowrap; } .accessibility-btn:hover, .accessibility-btn:focus, .accessibility-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); outline: 3px solid var(--accent); outline-offset: 2px; } body.accessibility-mode { font-size: 20px !important; line-height: 1.8 !important; } body.accessibility-mode h1 { font-size: 3rem !important; } body.accessibility-mode h2 { font-size: 2.5rem !important; } body.accessibility-mode h3 { font-size: 2rem !important; } body.accessibility-mode p, body.accessibility-mode span, body.accessibility-mode li { font-size: 1.25rem !important; line-height: 1.8 !important; } body.accessibility-mode .btn { font-size: 1.2rem !important; padding: 18px 36px !important; min-height: 54px !important; } body.accessibility-mode .nav-link { font-size: 1.1rem !important; padding: 14px 20px !important; } body.accessibility-mode .phone-link { font-size: 1.5rem !important; } body.accessibility-mode img { border: 3px solid #000 !important; } body.accessibility-mode a { text-decoration: underline !important; } /* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */ @media (max-width: 768px) { .header-top { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px 0 !important; } .header-logo { justify-content: center !important; margin-bottom: 8px !important; width: 100% !important; } .logo-title { font-size: 0.7rem !important; } .header-contacts { text-align: center !important; width: 100% !important; align-items: center !important; } .phone-link { font-size: 1.125rem !important; justify-content: center !important; } .work-hours { font-size: 0.75rem !important; } .burger-menu { display: flex !important; } .nav-list { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; padding: 16px !important; z-index: 99 !important; border-top: 1px solid var(--border) !important; display: none !important; } .nav-list.active { display: flex !important; } .nav-link { padding: 12px 16px !important; font-size: 1rem !important; text-align: center !important; width: 100% !important; } .search-btn { position: absolute; top: 16px; right: 60px; } .page-hero { padding: 60px 0 !important; } .page-title { font-size: 2rem !important; padding: 0 16px !important; } .page-subtitle { font-size: 1rem !important; padding: 0 16px !important; } .section { padding: 40px 0 !important; } .section-title { font-size: 1.75rem !important; margin-bottom: 32px !important; padding: 0 16px !important; } .news-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .news-card { padding: 20px !important; } .filter-group { flex-direction: column !important; align-items: stretch !important; } .filter-select { width: 100% !important; min-width: auto !important; } .filters-wrapper { flex-direction: column !important; align-items: stretch !important; padding: 0 16px !important; } .filter-actions { justify-content: center !important; width: 100% !important; } .subscribe-form { flex-direction: column !important; } .subscribe-input { width: 100% !important; } .subscribe-form .btn { width: 100% !important; } .archive-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .accessibility-panel { top: 10px !important; right: 10px !important; } .accessibility-text { display: none !important; } .accessibility-btn { padding: 10px 12px !important; } .footer-grid { grid-template-columns: 1fr !important; text-align: center !important; gap: 24px !important; } .social-links { justify-content: center !important; } } /* ===== ОСТАЛЬНЫЕ СТИЛИ ===== */ .section { padding: 64px 0; } .section-title { text-align: center; margin-bottom: 48px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 16px auto 0; border-radius: 2px; } .section-description { text-align: center; color: var(--text-light); max-width: 600px; margin: -24px auto 32px; } .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; color: var(--white); } .page-title { color: var(--white); margin-bottom: 16px; } .page-subtitle { font-size: 1.25rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } /* ===== ФИЛЬТР НОВОСТЕЙ ===== */ .filters-section { background: var(--white); padding: 24px 0; border-bottom: 1px solid var(--border); } .filters-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .filter-group { display: flex; align-items: center; gap: 12px; } .filter-label { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text); } .filter-select { padding: 12px 20px; font-size: 1rem; font-family: 'Open Sans', sans-serif; border: 2px solid var(--border); border-radius: var(--radius); background: var(--white); cursor: pointer; min-width: 220px; transition: border-color 0.2s; } .filter-select:focus { outline: none; border-color: var(--primary); } .filter-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ===== НОВОСТИ GRID ===== */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; } .news-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid var(--border); display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .news-card.hidden { display: none; } .news-image { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid var(--border); } .news-badge { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin: 16px 16px 0; } .news-badge.important { background: #FEF2F2; color: #DC2626; } .news-badge.event { background: #EFF6FF; color: #2563EB; } .news-badge.announcement { background: #F0FDF4; color: #16A34A; } .news-badge.article { background: #FEF3C7; color: #D97706; } .news-content { padding: 16px; flex: 1; display: flex; flex-direction: column; } .news-date { font-size: 0.875rem; color: var(--primary); margin-bottom: 8px; display: block; font-weight: 600; } .news-title { font-size: 1.125rem; margin-bottom: 12px; line-height: 1.4; color: var(--text); flex: 1; } .news-excerpt { color: var(--text-light); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.6; } .news-link { font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; } .news-link:hover { gap: 8px; } .news-footer { padding: 16px; background: var(--bg); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--text-light); } .news-author { display: flex; align-items: center; gap: 8px; } .news-views { display: flex; align-items: center; gap: 4px; } /* ===== НЕТ РЕЗУЛЬТАТОВ ===== */ .no-results { text-align: center; padding: 60px 20px; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); display: none; } .no-results-icon { font-size: 4rem; margin-bottom: 16px; } .no-results h3 { font-size: 1.5rem; margin-bottom: 8px; color: var(--text); } .no-results p { color: var(--text-light); margin-bottom: 24px; } /* ===== ВАЖНЫЕ ОБЪЯВЛЕНИЯ ===== */ .important-news-section { background: linear-gradient(135deg, #FEF2F2 0%, #FFFFFF 100%); border-left: 4px solid #DC2626; } .alert-box { background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 100%); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 24px; margin: 32px 0; display: flex; gap: 16px; align-items: flex-start; } .alert-icon { font-size: 2rem; flex-shrink: 0; } .alert-content h4 { color: var(--primary); margin-bottom: 8px; } .alert-content p { color: var(--text); line-height: 1.6; } /* ===== ПОДПИСКА ===== */ .subscribe-section { background: linear-gradient(135deg, #E8F4FD 0%, var(--white) 100%); } .subscribe-box { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .subscribe-form { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; } .subscribe-input { flex: 1; min-width: 250px; padding: 14px 20px; font-size: 1rem; border: 2px solid var(--border); border-radius: var(--radius); outline: none; transition: border-color 0.2s; } .subscribe-input:focus { border-color: var(--primary); } .subscribe-consent { margin-top: 16px; font-size: 0.875rem; color: var(--text-light); } .subscribe-consent input { margin-right: 8px; } /* ===== АРХИВ НОВОСТЕЙ - РАБОЧИЙ ===== */ .archive-section { background: var(--white); } .archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; } .archive-item { background: var(--bg); border-radius: var(--radius); padding: 24px 16px; text-align: center; transition: all 0.3s; border: 2px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; display: block; } .archive-item:hover { background: var(--primary); color: var(--white); border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .archive-item:hover .archive-year, .archive-item:hover .archive-month { color: var(--white); } .archive-year { font-size: 1.75rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; transition: color 0.3s; } .archive-month { font-size: 1rem; color: var(--text-light); transition: color 0.3s; } .archive-download-section { text-align: center; margin-top: 32px; padding: 32px; background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 100%); border-radius: 12px; border: 2px solid var(--primary); } .archive-download-section h3 { color: var(--primary); margin-bottom: 16px; } .archive-download-section p { color: var(--text-light); margin-bottom: 24px; } /* ===== БАННЕРЫ ===== */ .banners-section { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); } .banners-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; align-items: center; } .banner-item { opacity: 0.7; } .banner-item img { height: 50px; width: auto; } /* ===== ПОДВАЛ ===== */ .footer { background: var(--primary-dark); color: var(--white); padding: 48px 0 32px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; } .footer-title { color: var(--white); margin-bottom: 20px; font-size: 1.125rem; font-weight: 600; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: rgba(255,255,255,0.8); } .footer-links a:hover { color: var(--white); } .social-links { display: flex; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-weight: 600; transition: all 0.2s; } .social-link:hover { background: rgba(255,255,255,0.2); color: var(--white); text-decoration: none; transform: translateY(-2px); } .footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 32px 16px; } .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 12px 24px; border-radius: var(--radius); z-index: 300; font-weight: 600; } .skip-link:focus { top: 16px; } /* Search Overlay */ .search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .search-overlay.active { display: flex; } .search-container { position: relative; width: 100%; max-width: 600px; } .search-form { display: flex; gap: 12px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 200px; padding: 16px; font-size: 1.125rem; border: 2px solid var(--border); border-radius: var(--radius); outline: none; } .search-input:focus { border-color: var(--primary); } .search-submit { padding: 16px 24px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; } .search-close { position: absolute; top: -50px; right: 0; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-container { background: var(--white); border-radius: 12px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); } .modal-container.modal-small { max-width: 450px; text-align: center; } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: var(--bg); border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; color: var(--text); z-index: 10; } .modal-content { padding: 32px; } .modal-news-image { width: 100%; height: 300px; object-fit: cover; border-radius: 12px; margin-bottom: 24px; } /* ===== ПЕРЕМЕННЫЕ ===== */ :root { --primary: #2A5BA8; --primary-dark: #1E4A8A; --primary-light: #4A7BC8; --accent: #4CAF50; --bg: #F5F7FA; --white: #FFFFFF; --text: #2D3748; --text-light: #718096; --border: #E2E8F0; --shadow: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --radius: 8px; } /* ===== БАЗА ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #1A202C; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.125rem; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; } /* ===== КНОПКИ ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-large { padding: 18px 36px; font-size: 1.125rem; font-weight: 700; } .btn-small { padding: 10px 20px; font-size: 0.875rem; } /* ===== ШАПКА ===== */ .header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; width: 100%; } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; } .header-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-img { width: 60px; height: 60px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.875rem; color: #1A202C; white-space: nowrap; } .logo-subtitle { font-size: 0.875rem; color: var(--primary); font-weight: 600; } .header-contacts { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .phone-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--primary); background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 100%); padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--primary); transition: all 0.3s; } .phone-link:hover { color: var(--white); background: var(--primary); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .work-hours { font-size: 0.875rem; color: var(--text-light); } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; gap: 16px; position: relative; } /* ===== НАВИГАЦИЯ ===== */ .nav-list { display: flex; list-style: none; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; } .nav-link { display: block; padding: 10px 16px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--text); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .nav-link:hover, .nav-link.active { background: var(--primary); color: var(--white); text-decoration: none; } /* ===== БУРГЕР-МЕНЮ ===== */ .burger-menu { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 8px; flex-shrink: 0; z-index: 101; } .burger-menu span { display: block; width: 24px; height: 3px; background: var(--primary); border-radius: 2px; transition: all 0.3s; } .burger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .burger-menu.active span:nth-child(2) { opacity: 0; width: 0; } .burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .search-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: var(--text); flex-shrink: 0; } /* ===== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ===== */ .accessibility-panel { position: fixed; top: 20px; right: 20px; z-index: 300; } .accessibility-btn { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-weight: 600; color: var(--primary); font-family: 'Roboto', sans-serif; font-size: 0.875rem; box-shadow: var(--shadow); transition: all 0.2s; white-space: nowrap; } .accessibility-btn:hover, .accessibility-btn:focus, .accessibility-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); outline: 3px solid var(--accent); outline-offset: 2px; } body.accessibility-mode { font-size: 20px !important; line-height: 1.8 !important; } body.accessibility-mode h1 { font-size: 3rem !important; } body.accessibility-mode h2 { font-size: 2.5rem !important; } body.accessibility-mode h3 { font-size: 2rem !important; } body.accessibility-mode p, body.accessibility-mode span, body.accessibility-mode li { font-size: 1.25rem !important; line-height: 1.8 !important; } body.accessibility-mode .btn { font-size: 1.2rem !important; padding: 18px 36px !important; min-height: 54px !important; } body.accessibility-mode .nav-link { font-size: 1.1rem !important; padding: 14px 20px !important; } body.accessibility-mode .phone-link { font-size: 1.5rem !important; } body.accessibility-mode img { border: 3px solid #000 !important; } body.accessibility-mode a { text-decoration: underline !important; } /* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */ @media (max-width: 768px) { .header-top { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px 0 !important; } .header-logo { justify-content: center !important; margin-bottom: 8px !important; width: 100% !important; } .logo-title { font-size: 0.7rem !important; } .header-contacts { text-align: center !important; width: 100% !important; align-items: center !important; } .phone-link { font-size: 1.125rem !important; justify-content: center !important; } .work-hours { font-size: 0.75rem !important; } .burger-menu { display: flex !important; } .nav-list { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; padding: 16px !important; z-index: 99 !important; border-top: 1px solid var(--border) !important; display: none !important; } .nav-list.active { display: flex !important; } .nav-link { padding: 12px 16px !important; font-size: 1rem !important; text-align: center !important; width: 100% !important; } .search-btn { position: absolute; top: 16px; right: 60px; } .page-hero { padding: 60px 0 !important; } .page-title { font-size: 2rem !important; padding: 0 16px !important; } .page-subtitle { font-size: 1rem !important; padding: 0 16px !important; } .section { padding: 40px 0 !important; } .section-title { font-size: 1.75rem !important; margin-bottom: 32px !important; padding: 0 16px !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .contact-card { padding: 20px !important; } .map-container { height: 350px !important; } .feedback-form { padding: 20px !important; } .form-row { grid-template-columns: 1fr !important; } .accessibility-panel { top: 10px !important; right: 10px !important; } .accessibility-text { display: none !important; } .accessibility-btn { padding: 10px 12px !important; } .footer-grid { grid-template-columns: 1fr !important; text-align: center !important; gap: 24px !important; } .social-links { justify-content: center !important; } } /* ===== ОСТАЛЬНЫЕ СТИЛИ ===== */ .section { padding: 64px 0; } .section-title { text-align: center; margin-bottom: 48px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 16px auto 0; border-radius: 2px; } .section-description { text-align: center; color: var(--text-light); max-width: 600px; margin: -24px auto 32px; } .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; color: var(--white); } .page-title { color: var(--white); margin-bottom: 16px; } .page-subtitle { font-size: 1.25rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } /* ===== КОНТАКТЫ ===== */ .contacts-section { background: var(--white); } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .contact-card { background: var(--bg); border-radius: 12px; padding: 32px 24px; text-align: center; transition: all 0.3s; border: 2px solid var(--border); } .contact-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); } .contact-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 2rem; color: var(--white); } .contact-card h3 { font-size: 1.25rem; margin-bottom: 16px; color: var(--text); } .contact-card p { color: var(--text-light); line-height: 1.8; margin-bottom: 8px; } .contact-card a { color: var(--primary); font-weight: 600; transition: color 0.2s; } .contact-card a:hover { color: var(--primary-dark); } .contact-hours { background: var(--white); border-radius: var(--radius); padding: 16px; margin-top: 16px; } .contact-hours p { margin: 8px 0; font-size: 0.95rem; } .contact-hours .highlight { color: var(--primary); font-weight: 600; } /* ===== КАРТА - ИСПРАВЛЕНО ===== */ .map-section { background: var(--bg); } .map-container { width: 100%; height: 450px; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 2px solid var(--border); position: relative; } #map { width: 100%; height: 100%; min-height: 450px; } .map-loading { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: var(--text-light); padding: 20px; text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); z-index: 10; } .map-spinner { width: 50px; height: 50px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; } @keyframes spin { to { transform: rotate(360deg); } } .map-controls { display: flex; gap: 16px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } .map-info { background: var(--white); border-radius: 12px; padding: 24px; margin-top: 32px; box-shadow: var(--shadow); } .map-info h3 { margin-bottom: 16px; color: var(--primary); } .map-info ul { list-style: none; padding-left: 0; } .map-info li { padding: 8px 0; color: var(--text); display: flex; align-items: center; gap: 8px; } .map-info li::before { content: '📍'; } /* ===== ОБРАТНАЯ СВЯЗЬ ===== */ .feedback-section { background: var(--white); } .feedback-form { max-width: 700px; margin: 0 auto; background: var(--bg); border-radius: 12px; padding: 40px; box-shadow: var(--shadow); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-family: 'Roboto', sans-serif; font-weight: 600; color: var(--text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: 'Open Sans', sans-serif; border: 2px solid var(--border); border-radius: var(--radius); outline: none; transition: all 0.2s; background: var(--white); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42, 91, 168, 0.1); } .form-group textarea { resize: vertical; min-height: 120px; } .form-note { font-size: 0.875rem; color: var(--text-light); margin-top: 16px; } /* ===== CTA ===== */ .cta-section { background: linear-gradient(135deg, #E8F4FD 0%, var(--white) 100%); } .cta-box { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* ===== БАННЕРЫ ===== */ .banners-section { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); } .banners-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; align-items: center; } .banner-item { opacity: 0.7; } .banner-item img { height: 50px; width: auto; } /* ===== ПОДВАЛ ===== */ .footer { background: var(--primary-dark); color: var(--white); padding: 48px 0 32px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; } .footer-title { color: var(--white); margin-bottom: 20px; font-size: 1.125rem; font-weight: 600; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: rgba(255,255,255,0.8); } .footer-links a:hover { color: var(--white); } .social-links { display: flex; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-weight: 600; transition: all 0.2s; } .social-link:hover { background: rgba(255,255,255,0.2); color: var(--white); text-decoration: none; transform: translateY(-2px); } .footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 32px 16px; } .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 12px 24px; border-radius: var(--radius); z-index: 300; font-weight: 600; } .skip-link:focus { top: 16px; } /* Search Overlay */ .search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .search-overlay.active { display: flex; } .search-container { position: relative; width: 100%; max-width: 600px; } .search-form { display: flex; gap: 12px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 200px; padding: 16px; font-size: 1.125rem; border: 2px solid var(--border); border-radius: var(--radius); outline: none; } .search-input:focus { border-color: var(--primary); } .search-submit { padding: 16px 24px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; } .search-close { position: absolute; top: -50px; right: 0; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-container { background: var(--white); border-radius: 12px; max-width: 450px; width: 100%; position: relative; box-shadow: var(--shadow-lg); text-align: center; } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: var(--bg); border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; color: var(--text); z-index: 10; } .modal-content { padding: 32px; } .confirm-message { margin: 24px 0; color: var(--text); } /* ===== ПЕРЕМЕННЫЕ ===== */ :root { --primary: #2A5BA8; --primary-dark: #1E4A8A; --primary-light: #4A7BC8; --accent: #4CAF50; --bg: #F5F7FA; --white: #FFFFFF; --text: #2D3748; --text-light: #718096; --border: #E2E8F0; --shadow: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --radius: 8px; } /* ===== БАЗА ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #1A202C; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.125rem; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; } /* ===== КНОПКИ ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-large { padding: 18px 36px; font-size: 1.125rem; font-weight: 700; } .btn-small { padding: 10px 20px; font-size: 0.875rem; } /* ===== ШАПКА ===== */ .header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; width: 100%; } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; } .header-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-img { width: 60px; height: 60px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.875rem; color: #1A202C; white-space: nowrap; } .logo-subtitle { font-size: 0.875rem; color: var(--primary); font-weight: 600; } .header-contacts { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .phone-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--primary); background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 100%); padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--primary); transition: all 0.3s; } .phone-link:hover { color: var(--white); background: var(--primary); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .work-hours { font-size: 0.875rem; color: var(--text-light); } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; gap: 16px; position: relative; } /* ===== НАВИГАЦИЯ ===== */ .nav-list { display: flex; list-style: none; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; } .nav-link { display: block; padding: 10px 16px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--text); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .nav-link:hover, .nav-link.active { background: var(--primary); color: var(--white); text-decoration: none; } /* ===== БУРГЕР-МЕНЮ ===== */ .burger-menu { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 8px; flex-shrink: 0; z-index: 101; } .burger-menu span { display: block; width: 24px; height: 3px; background: var(--primary); border-radius: 2px; transition: all 0.3s; } .burger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .burger-menu.active span:nth-child(2) { opacity: 0; width: 0; } .burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .search-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: var(--text); flex-shrink: 0; } /* ===== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ===== */ .accessibility-panel { position: fixed; top: 20px; right: 20px; z-index: 300; } .accessibility-btn { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-weight: 600; color: var(--primary); font-family: 'Roboto', sans-serif; font-size: 0.875rem; box-shadow: var(--shadow); transition: all 0.2s; white-space: nowrap; } .accessibility-btn:hover, .accessibility-btn:focus, .accessibility-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); outline: 3px solid var(--accent); outline-offset: 2px; } body.accessibility-mode { font-size: 20px !important; line-height: 1.8 !important; } body.accessibility-mode h1 { font-size: 3rem !important; } body.accessibility-mode h2 { font-size: 2.5rem !important; } body.accessibility-mode h3 { font-size: 2rem !important; } body.accessibility-mode p, body.accessibility-mode span, body.accessibility-mode li { font-size: 1.25rem !important; line-height: 1.8 !important; } body.accessibility-mode .btn { font-size: 1.2rem !important; padding: 18px 36px !important; min-height: 54px !important; } body.accessibility-mode .nav-link { font-size: 1.1rem !important; padding: 14px 20px !important; } body.accessibility-mode .phone-link { font-size: 1.5rem !important; } body.accessibility-mode img { border: 3px solid #000 !important; } body.accessibility-mode a { text-decoration: underline !important; } /* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */ @media (max-width: 768px) { .header-top { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px 0 !important; } .header-logo { justify-content: center !important; margin-bottom: 8px !important; width: 100% !important; } .logo-title { font-size: 0.7rem !important; } .header-contacts { text-align: center !important; width: 100% !important; align-items: center !important; } .phone-link { font-size: 1.125rem !important; justify-content: center !important; } .work-hours { font-size: 0.75rem !important; } .burger-menu { display: flex !important; } .nav-list { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; padding: 16px !important; z-index: 99 !important; border-top: 1px solid var(--border) !important; display: none !important; } .nav-list.active { display: flex !important; } .nav-link { padding: 12px 16px !important; font-size: 1rem !important; text-align: center !important; width: 100% !important; } .search-btn { position: absolute; top: 16px; right: 60px; } .page-hero { padding: 60px 0 !important; } .page-title { font-size: 2rem !important; padding: 0 16px !important; } .page-subtitle { font-size: 1rem !important; padding: 0 16px !important; } .section { padding: 40px 0 !important; } .section-title { font-size: 1.75rem !important; margin-bottom: 32px !important; padding: 0 16px !important; } .document-card { padding: 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .document-info { flex-direction: column !important; gap: 12px !important; width: 100% !important; } .document-meta { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .document-card .btn { width: 100% !important; } .insurance-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .insurance-card { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 20px !important; } .insurance-logo-wrapper { width: 100% !important; display: flex !important; justify-content: center !important; } .insurance-info { width: 100% !important; text-align: center !important; } .insurance-card .btn { width: 100% !important; } .documents-table-wrapper { overflow-x: auto !important; } .documents-table { min-width: 600px !important; } .accessibility-panel { top: 10px !important; right: 10px !important; } .accessibility-text { display: none !important; } .accessibility-btn { padding: 10px 12px !important; } .footer-grid { grid-template-columns: 1fr !important; text-align: center !important; gap: 24px !important; } .social-links { justify-content: center !important; } .cta-buttons { flex-direction: column !important; align-items: center !important; } .cta-buttons .btn { width: 100% !important; max-width: 300px !important; } } /* ===== ОСТАЛЬНЫЕ СТИЛИ ===== */ .section { padding: 64px 0; } .section-title { text-align: center; margin-bottom: 48px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 16px auto 0; border-radius: 2px; } .section-description { text-align: center; color: var(--text-light); max-width: 600px; margin: -24px auto 32px; } .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; color: var(--white); } .page-title { color: var(--white); margin-bottom: 16px; } .page-subtitle { font-size: 1.25rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } /* ===== ДОКУМЕНТЫ ===== */ .documents-section { background: var(--white); } .documents-grid { display: grid; gap: 16px; max-width: 900px; margin: 0 auto; } .document-card { background: var(--bg); border-radius: 12px; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; transition: all 0.3s; border: 2px solid var(--border); } .document-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .document-icon { font-size: 2.5rem; flex-shrink: 0; } .document-info { flex: 1; display: flex; flex-direction: column; gap: 8px; } .document-title { font-size: 1.125rem; font-weight: 700; color: var(--text); } .document-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: var(--text-light); } .document-meta span { display: flex; align-items: center; gap: 4px; } .document-card .btn { flex-shrink: 0; min-width: 120px; } /* ===== ТАБЛИЦА ДОКУМЕНТОВ ===== */ .documents-table-wrapper { overflow-x: auto; margin: 32px 0; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); } .documents-table { width: 100%; border-collapse: collapse; } .documents-table thead { background: var(--primary); color: var(--white); } .documents-table th { padding: 16px; text-align: left; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } .documents-table td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--text); } .documents-table tr:hover { background: var(--bg); } .documents-table tr:last-child td { border-bottom: none; } .documents-table .btn-link { color: var(--primary); font-weight: 600; text-decoration: none; transition: color 0.2s; } .documents-table .btn-link:hover { color: var(--primary-dark); text-decoration: underline; } /* ===== СТРАХОВЫЕ КОМПАНИИ - ИСПРАВЛЕНО ===== */ .insurance-section { background: var(--bg); } .insurance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } .insurance-card { background: var(--white); border-radius: 12px; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; transition: all 0.3s; border: 2px solid var(--border); } .insurance-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); } .insurance-logo-wrapper { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg); border-radius: 50%; overflow: hidden; } .insurance-logo { width: 60px; height: 60px; object-fit: contain; } .insurance-logo-fallback { font-size: 2rem; color: var(--primary); font-weight: 700; } .insurance-info { flex: 1; } .insurance-name { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; } .insurance-description { font-size: 0.875rem; color: var(--text-light); margin-bottom: 8px; line-height: 1.5; } .insurance-valid { font-size: 0.875rem; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 4px; } .insurance-card .btn { flex-shrink: 0; min-width: 120px; } /* ===== ИНФОРМАЦИЯ ===== */ .info-box { background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 100%); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 24px; margin: 32px 0; } .info-box h4 { color: var(--primary); margin-bottom: 12px; } .info-box p { color: var(--text); line-height: 1.6; } .info-box ul { margin: 16px 0; padding-left: 20px; } .info-box li { margin-bottom: 8px; color: var(--text); } /* ===== CTA ===== */ .cta-section { background: linear-gradient(135deg, #E8F4FD 0%, var(--white) 100%); } .cta-box { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* ===== БАННЕРЫ ===== */ .banners-section { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); } .banners-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; align-items: center; } .banner-item { opacity: 0.7; } .banner-item img { height: 50px; width: auto; } /* ===== ПОДВАЛ ===== */ .footer { background: var(--primary-dark); color: var(--white); padding: 48px 0 32px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; } .footer-title { color: var(--white); margin-bottom: 20px; font-size: 1.125rem; font-weight: 600; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: rgba(255,255,255,0.8); } .footer-links a:hover { color: var(--white); } .social-links { display: flex; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-weight: 600; transition: all 0.2s; } .social-link:hover { background: rgba(255,255,255,0.2); color: var(--white); text-decoration: none; transform: translateY(-2px); } .footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 32px 16px; } .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 12px 24px; border-radius: var(--radius); z-index: 300; font-weight: 600; } .skip-link:focus { top: 16px; } /* Search Overlay */ .search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; justify-content: center; align-items: center; padding: 20px; } .search-overlay.active { display: flex; } .search-container { position: relative; width: 100%; max-width: 600px; } .search-form { display: flex; gap: 12px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 200px; padding: 16px; font-size: 1.125rem; border: 2px solid var(--border); border-radius: var(--radius); outline: none; } .search-input:focus { border-color: var(--primary); } .search-submit { padding: 16px 24px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; } .search-close { position: absolute; top: -50px; right: 0; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; } .section { padding: 64px 0; } .section-title { text-align: center; margin-bottom: 48px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 16px auto 0; border-radius: 2px; } .section-description { text-align: center; color: var(--text-light); max-width: 600px; margin: -24px auto 32px; font-size: 1.05rem; padding: 0 16px; } /* ===== ЗАГОЛОВОК СТРАНИЦЫ ===== */ .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; color: var(--white); } .page-title { color: var(--white); margin-bottom: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .page-subtitle { font-size: 1.25rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } /* ===== WELCOME ===== */ .welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .welcome-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .stat-card { text-align: center; padding: 20px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); } .stat-icon { font-size: 2rem; display: block; margin-bottom: 8px; } .stat-number { display: block; font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 4px; } .stat-label { font-size: 0.875rem; color: var(--text-light); font-weight: 600; } .welcome-image img { border-radius: 12px; box-shadow: var(--shadow-lg); width: 100%; height: 350px; object-fit: cover; } /* ===== MODERN TIMELINE (ИСПРАВЛЕННАЯ ВЕРСИЯ) ===== */ .timeline-modern { position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 0; } /* Центральная линия */ .timeline-modern::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background: linear-gradient(to bottom, var(--primary) 0%, var(--accent) 100%); border-radius: 2px; z-index: 1; } /* Элемент таймлайна */ .timeline-item { position: relative; margin-bottom: 60px; display: flex; align-items: center; width: 50%; z-index: 2; } .timeline-item:last-child { margin-bottom: 0; } /* Левая сторона */ .timeline-left { justify-content: flex-end; padding-right: 50px; } /* Правая сторона */ .timeline-right { justify-content: flex-start; margin-left: 50%; padding-left: 50px; } /* Карточка */ .timeline-card { background: var(--white); padding: 32px 28px; border-radius: 12px; box-shadow: var(--shadow-lg); max-width: 380px; transition: all 0.3s ease; border: 1px solid var(--border); position: relative; } .timeline-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); border-color: var(--primary); } /* Стрелочка у карточки */ .timeline-left .timeline-card::after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border-left: 10px solid var(--white); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .timeline-right .timeline-card::after { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); border-right: 10px solid var(--white); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } /* Год */ .timeline-year { display: block; font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: 700; color: var(--primary); margin-bottom: 12px; line-height: 1; } /* Заголовок */ .timeline-title { font-size: 1.25rem; color: var(--primary-dark); margin-bottom: 12px; font-weight: 700; } /* Описание */ .timeline-desc { color: var(--text-light); line-height: 1.6; margin: 0; font-size: 0.95rem; } /* Кружочек-маркер (ИСПРАВЛЕНО!) */ .timeline-dot { position: absolute; width: 24px; height: 24px; background: var(--white); border: 4px solid var(--primary); border-radius: 50%; z-index: 10; transition: all 0.3s ease; right: -12px; display: flex; align-items: center; justify-content: center; } .timeline-left .timeline-dot { right: -12px; } .timeline-right .timeline-dot { left: -12px; } /* Внутренний кружок */ .timeline-dot::before { content: ''; position: absolute; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; transition: all 0.3s ease; } /* Текущий/последний элемент */ .timeline-dot-current { border-color: var(--accent); background: var(--accent); animation: pulse 2s infinite; } .timeline-dot-current::before { background: var(--white); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); } 50% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); } } /* Hover эффект на кружочке */ .timeline-item:hover .timeline-dot { transform: scale(1.2); border-color: var(--accent); } /* ===== VALUES ===== */ .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-card { background: var(--white); padding: 32px 24px; border-radius: 12px; box-shadow: var(--shadow); text-align: center; transition: all 0.3s; border: 1px solid var(--border); } .value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .value-icon { font-size: 3.5rem; margin-bottom: 16px; } .value-title { font-size: 1.25rem; margin-bottom: 12px; color: var(--primary); } .value-desc { color: var(--text-light); line-height: 1.6; } /* ===== QUOTE ===== */ .section-bg-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); } .quote-box { max-width: 800px; margin: 0 auto; text-align: center; } .quote-icon { font-size: 4rem; opacity: 0.3; margin-bottom: 16px; color: var(--white); } .quote-text { font-size: 1.5rem; font-style: italic; line-height: 1.6; margin-bottom: 32px; } .quote-author { display: flex; align-items: center; justify-content: center; gap: 16px; } .quote-author-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); } .quote-author-info { text-align: left; } .quote-author-name { display: block; font-weight: 700; font-size: 1.125rem; } .quote-author-position { display: block; font-size: 0.875rem; opacity: 0.9; } /* ===== ACHIEVEMENTS ===== */ .achievements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .achievement-card { background: var(--white); padding: 32px 24px; border-radius: 12px; box-shadow: var(--shadow); text-align: center; transition: all 0.3s; border: 1px solid var(--border); } .achievement-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .achievement-icon { font-size: 3.5rem; margin-bottom: 16px; } .achievement-title { font-size: 1.125rem; margin-bottom: 12px; color: var(--primary); } .achievement-desc { color: var(--text-light); line-height: 1.6; } /* ===== EQUIPMENT ===== */ .equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .equipment-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid var(--border); } .equipment-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .equipment-card img { width: 100%; height: 200px; object-fit: cover; } .equipment-info { padding: 20px; } .equipment-info h3 { font-size: 1.125rem; margin-bottom: 8px; } .equipment-info p { color: var(--text-light); margin: 0; } /* ===== SCHEDULE ===== */ .schedule-table-wrapper { overflow-x: auto; margin-bottom: 24px; } .schedule-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .schedule-table th, .schedule-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--border); } .schedule-table th { background: var(--primary); color: var(--white); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.5px; } .schedule-table tr:hover { background: var(--bg); } .schedule-table tr:last-child td { border-bottom: none; } .alert { display: flex; gap: 16px; padding: 20px; background: #E8F4FD; border-radius: var(--radius); border-left: 4px solid var(--primary); margin-top: 24px; } .alert-icon { font-size: 1.5rem; flex-shrink: 0; } .alert-content { color: var(--text); } .alert-content a { font-weight: 600; color: var(--primary); } /* ===== ACCORDION ===== */ .accordion-list { max-width: 800px; margin: 0 auto; } .accordion-item { background: var(--white); border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); } .accordion-summary { display: flex; justify-content: space-between; align-items: center; padding: 20px; cursor: pointer; list-style: none; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text); transition: background 0.2s; } .accordion-summary::-webkit-details-marker { display: none; } .accordion-summary:hover { background: var(--bg); } .accordion-title { flex: 1; } .accordion-icon { font-size: 1.5rem; color: var(--primary); transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; } .accordion-item[open] .accordion-icon { transform: rotate(45deg); } .accordion-content { padding: 0 20px 20px; color: var(--text); line-height: 1.6; border-top: 1px solid var(--border); margin-top: 0; } /* ===== CTA ===== */ .cta-section { background: linear-gradient(135deg, #E8F4FD 0%, var(--white) 100%); } .cta-box { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* ===== БАННЕРЫ ===== */ .banners-section { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); } .banners-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; align-items: center; } .banner-item { opacity: 0.7; transition: opacity 0.2s; } .banner-item:hover { opacity: 1; } .banner-item img { height: 50px; width: auto; } /* ===== ПОДВАЛ ===== */ .footer { background: var(--primary-dark); color: var(--white); padding: 48px 0 32px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; } .footer-title { color: var(--white); margin-bottom: 20px; font-size: 1.125rem; font-weight: 600; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: rgba(255,255,255,0.8); } .footer-links a:hover { color: var(--white); } .social-links { display: flex; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-weight: 600; transition: all 0.2s; text-decoration: none; } .social-link:hover { background: rgba(255,255,255,0.2); color: var(--white); text-decoration: none; transform: translateY(-2px); } .footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 32px 16px; } /* ===== ДОСТУПНОСТЬ ===== */ .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--white); padding: 12px 24px; border-radius: var(--radius); z-index: 300; font-weight: 600; transition: top 0.2s; } .skip-link:focus { top: 16px; } .accessibility-panel { position: fixed; top: 20px; right: 20px; z-index: 300; } .accessibility-btn { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 0.875rem; color: var(--primary); box-shadow: var(--shadow); transition: all 0.2s; } .accessibility-btn:hover, .accessibility-btn:focus, .accessibility-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); } /* ===== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ===== */ .accessibility-mode { font-size: 20px !important; line-height: 1.8 !important; } .accessibility-mode h1 { font-size: 3rem !important; } .accessibility-mode h2 { font-size: 2.5rem !important; } .accessibility-mode h3 { font-size: 2rem !important; } .accessibility-mode h4 { font-size: 1.5rem !important; } .accessibility-mode p, .accessibility-mode span, .accessibility-mode li, .accessibility-mode td, .accessibility-mode th { font-size: 1.25rem !important; line-height: 1.8 !important; } .accessibility-mode .btn { font-size: 1.2rem !important; padding: 18px 36px !important; min-height: 54px !important; } .accessibility-mode .nav-link { font-size: 1.1rem !important; padding: 14px 20px !important; } .accessibility-mode .phone-link { font-size: 1.5rem !important; } .accessibility-mode img { border: 2px solid var(--text) !important; } .accessibility-mode a { text-decoration: underline !important; } /* Высокий контраст */ .accessibility-mode-high-contrast { --primary: #0000FF !important; --primary-dark: #0000AA !important; --bg: #FFFFFF !important; --white: #FFFFFF !important; --text: #000000 !important; --text-light: #000000 !important; --border: #000000 !important; } .accessibility-mode-high-contrast body { background: #FFFFFF !important; color: #000000 !important; } .accessibility-mode-high-contrast .header, .accessibility-mode-high-contrast .footer, .accessibility-mode-high-contrast .value-card, .accessibility-mode-high-contrast .achievement-card, .accessibility-mode-high-contrast .equipment-card { background: #FFFFFF !important; border: 3px solid #000000 !important; } .accessibility-mode-high-contrast a { color: #0000FF !important; text-decoration: underline !important; } /* ===== АДАПТИВНОСТЬ ===== */ /* Планшеты (до 1024px) */ @media (max-width: 1024px) { .welcome-grid, .values-grid, .achievements-grid, .equipment-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .timeline-modern::before { left: 20px; } .timeline-item, .timeline-left, .timeline-right { width: 100%; margin-left: 0; justify-content: flex-start; padding-left: 60px; padding-right: 0; text-align: left; } .timeline-left .timeline-dot, .timeline-right .timeline-dot { left: 8px !important; right: auto !important; } .timeline-left .timeline-card::after, .timeline-right .timeline-card::after { left: -10px; right: auto; border-right: 10px solid var(--white); border-left: none; } .timeline-card { max-width: 100%; } } /* Мобильные (до 768px) */ @media (max-width: 768px) { /* Шапка */ .header-top { flex-direction: column; align-items: center; text-align: center; padding: 12px 0; } .header-logo { justify-content: center; margin-bottom: 8px; } .logo-title { font-size: 0.75rem; } .header-contacts { text-align: center; } .phone-link { font-size: 1rem; } .work-hours { font-size: 0.75rem; } /* Навигация */ .burger-menu { display: flex; } .nav-list { display: none; position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; background: var(--white); box-shadow: var(--shadow-lg); padding: 16px; z-index: 100; } .nav-list.active { display: flex; } .nav-link { padding: 12px 16px; font-size: 1rem; text-align: center; } .search-btn { position: absolute; top: 16px; right: 60px; } /* Секции */ .section { padding: 40px 0; } .section-title { font-size: 1.75rem; margin-bottom: 32px; } .section-title::after { width: 50px; } .section-description { font-size: 1rem; margin-top: -16px; } /* Заголовок страницы */ .page-hero { padding: 60px 0; } .page-title { font-size: 2rem; } .page-subtitle { font-size: 1.125rem; } /* Welcome */ .welcome-grid { grid-template-columns: 1fr; gap: 24px; } .welcome-stats { grid-template-columns: 1fr; gap: 16px; } .welcome-image img { height: 250px; } /* Timeline */ .timeline-modern { padding: 20px 0; } .timeline-modern::before { left: 15px; width: 3px; } .timeline-item, .timeline-left, .timeline-right { padding-left: 45px; margin-bottom: 40px; } .timeline-dot { width: 18px; height: 18px; border-width: 3px; left: 6px !important; right: auto !important; } .timeline-dot::before { width: 8px; height: 8px; } .timeline-year { font-size: 1.5rem; } /* Values */ .values-grid { grid-template-columns: 1fr; } /* Quote */ .quote-text { font-size: 1.25rem; } .quote-author { flex-direction: column; text-align: center; } .quote-author-info { text-align: center; } /* Achievements */ .achievements-grid { grid-template-columns: 1fr; } /* Equipment */ .equipment-grid { grid-template-columns: 1fr; } /* Schedule */ .schedule-table th, .schedule-table td { padding: 12px 8px; font-size: 0.875rem; } /* Accordion */ .accordion-summary { padding: 16px; font-size: 0.95rem; } .accordion-content { padding: 0 16px 16px; font-size: 0.95rem; } /* CTA */ .cta-box { padding: 32px 20px; } .cta-buttons { flex-direction: column; align-items: center; } .cta-buttons .btn { width: 100%; max-width: 300px; } /* Подвал */ .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 24px; } .social-links { justify-content: center; } /* Доступность */ .accessibility-panel { top: 10px; right: 10px; } .accessibility-text { display: none; } .accessibility-btn { padding: 10px 12px; } } /* Маленькие экраны (до 480px) */ @media (max-width: 480px) { html { font-size: 15px; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } .container { padding: 0 12px; } .logo-title { font-size: 0.7rem; } .logo-img { width: 50px; height: 50px; } .page-title { font-size: 1.75rem; } .stat-number { font-size: 1.75rem; } .btn { padding: 12px 20px; font-size: 0.95rem; } .section { padding: 32px 0; } .footer-bottom { font-size: 0.75rem; padding: 24px 12px; } .timeline-year { font-size: 1.25rem; } .value-icon, .achievement-icon { font-size: 2.5rem; } } /* Очень маленькие экраны (до 360px) */ @media (max-width: 360px) { html { font-size: 14px; } .page-title { font-size: 1.5rem; } .banner-item img { height: 40px; } } /* Печать */ @media print { .header, .footer, .accessibility-panel, .search-overlay, .modal-overlay, .burger-menu, .cta-section, .banners-section { display: none !important; } body { font-size: 12pt; background: white; color: black; } .section { padding: 1cm 0; } }