/* Убрали @font-face с локальной TTF. Вместо него используем Google Fonts "Handjet" (подключен в ). */ /* Общие сбросы */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Тело документа: используем Handjet + fallback monospace */ body { font-family: 'Handjet', monospace; background-color: #1e2226; color: #e0e0e0; line-height: 1.5; margin-top: 90px; /* Под фиксированный navbar */ } /* ---------- ШАПКА (NAVBAR) ---------- */ .header { position: fixed; top: 0; left: 0; width: 100%; background-color: #25292e; z-index: 999; padding: 5px 5%; } .navbar { display: flex; align-items: center; justify-content: space-between; } /* Левая часть */ .left-block { display: flex; align-items: center; gap: 10px; } .logo-container { display: flex; align-items: center; gap: 12px; } .small-logo { width: 64px; height: 64px; object-fit: contain; } .brand { color: #fffaea; text-decoration: none; font-size: 1.8rem; cursor: pointer; } /* Навигационные ссылки */ .nav-links { list-style-type: none; display: flex; align-items: center; gap: 15px; } .nav-item { color: #cacaca; text-decoration: none; font-size: 1.2rem; transition: background-color 0.2s, color 0.2s; padding: 4px 8px; } .nav-item:hover { background-color: #32363b; color: #ffffff; border-radius: 4px; } /* "Профиль" (с обводкой) */ .profile-link { border: 1px solid #f4f4f4; border-radius: 4px; padding: 4px 8px; } .profile-link:hover { background-color: #353a40; } .profile-menu-container { position: relative; } .dropdown-menu { list-style-type: none; position: absolute; top: 120%; left: 0; background-color: #2c3137; border: 1px solid #3d434a; border-radius: 4px; display: none; min-width: 140px; z-index: 999; padding: 5px 0; } .dropdown-menu li { padding: 5px 10px; } .dropdown-menu li a { color: #e0e0e0; text-decoration: none; display: block; font-size: 1rem; } .dropdown-menu li a:hover { background-color: #42474d; } /* Кнопка-гамбургер (мобильная версия) */ .hamburger-button { background: none; border: none; cursor: pointer; display: none; padding: 5px; } .hamburger-button img { width: 30px; height: 30px; filter: invert(80%); } /* ---------- HERO (Главная картинка) ---------- */ .hero-section { position: relative; width: 100%; height: 60vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .glitch-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1e2226; overflow: hidden; } .glitch-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background-color: #1e2226; } .glitch-image-base { z-index: 1; } .glitch-red-layer { z-index: 2; mix-blend-mode: screen; opacity: 0; filter: drop-shadow(0 0 0 red) hue-rotate(0deg) saturate(200%); } .glitch-blue-layer { z-index: 3; mix-blend-mode: screen; opacity: 0; filter: drop-shadow(0 0 0 blue) hue-rotate(180deg) saturate(200%); } .hero-overlay { position: relative; z-index: 5; text-align: center; padding: 0 5%; } .hero-title { font-size: 3rem; margin-bottom: 10px; color: #fafafa; text-shadow: 1px 1px 2px #000; } .hero-subtitle { font-size: 1.5rem; color: #a0a0a0; } /* ---------- РЕСУРСЫ ---------- */ .resources-section { padding: 40px 10%; background-color: #2a2f34; } .resources-section h2 { margin-bottom: 20px; font-size: 2rem; color: #f2f2f2; } .resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .resource-card { background-color: #33383e; padding: 15px; border-radius: 6px; color: #e0e0e0; text-decoration: none; transition: background-color 0.2s, transform 0.2s; } .resource-card:hover { background-color: #3f444a; transform: scale(1.02); } /* ---------- О НАС ---------- */ .about-section { padding: 40px 10%; background-color: #25292e; } .about-container { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 30px; } .about-card { flex: 0 0 60%; display: block; background-color: #33383e; border-radius: 6px; padding: 20px; color: #e0e0e0; text-decoration: none; transition: background-color 0.2s, transform 0.2s; text-align: left; } .about-card h2 { margin-bottom: 10px; font-size: 2rem; color: #ffffff; } .about-card p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 10px; } .about-note { font-size: 1rem; color: #bdbdbd; font-style: italic; } .about-card:hover { background-color: #3f444a; transform: scale(1.02); } .about-image { flex: 0 0 35%; display: flex; align-items: center; justify-content: center; } .about-image img { max-width: 100%; height: auto; border-radius: 6px; } /* ---------- СООБЩЕСТВО ---------- */ .community-section { padding: 40px 10%; background-color: #25292e; } .community-section h2 { margin-bottom: 20px; font-size: 2rem; } .community-links { display: flex; gap: 20px; flex-wrap: wrap; } .community-item { display: flex; align-items: center; gap: 8px; color: #ffffff; background-color: #3a4047; padding: 10px 15px; border-radius: 4px; text-decoration: none; font-size: 1.2rem; transition: background-color 0.3s, transform 0.2s; } .community-item:hover { background-color: #4a5057; transform: scale(1.05); } .community-item img { width: 32px; height: 32px; } /* ---------- НОВОСТИ ---------- */ .news-section { padding: 40px 10%; background-color: #2a2f34; } .news-section h2 { margin-bottom: 20px; font-size: 2rem; } .news-card { background-color: #33383e; padding: 15px; margin-bottom: 20px; border-radius: 6px; color: #e0e0e0; text-decoration: none; display: block; transition: background-color 0.2s, transform 0.2s; } .news-card:hover { background-color: #3f444a; transform: scale(1.02); } .news-date { font-size: 1rem; margin-bottom: 5px; color: #b0b0b0; } .news-title { margin-bottom: 10px; font-size: 1.4rem; color: #fafafa; } .news-image { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; } .news-content { color: #d0d0d0; font-size: 1rem; } /* ---------- ПОДВАЛ ---------- */ .footer { background-color: #25292e; text-align: center; padding: 20px; font-size: 1rem; color: #a0a0a0; } /* ---------- ГЛИТЧ-АНИМАЦИИ ---------- */ .glitch-activate .glitch-red-layer { opacity: 0.8; animation: glitch-red 1s infinite; } .glitch-activate .glitch-blue-layer { opacity: 0.7; animation: glitch-blue 1s infinite; } @keyframes glitch-red { 0% { transform: translate(0, 0); } 10% { transform: translate(-2px, -2px); } 20% { transform: translate(2px, 2px); } 30% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } 50% { transform: translate(0, 0); } 70% { transform: translate(-1px, -1px); } 100% { transform: translate(0, 0); } } @keyframes glitch-blue { 0% { transform: translate(0, 0); } 10% { transform: translate(2px, 2px); } 20% { transform: translate(-2px, 2px); } 30% { transform: translate(2px, -2px); } 40% { transform: translate(-2px, -2px); } 50% { transform: translate(0, 0); } 70% { transform: translate(1px, 1px); } 100% { transform: translate(0, 0); } } /* ---------- АДАПТИВНОСТЬ ---------- */ /* Мобильная Hero */ @media (max-width: 500px) { .hero-section { height: 50vh; } .glitch-image { object-fit: cover; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1.1rem; } } /* При <= 768px: гамбургер, колонка меню */ @media (max-width: 768px) { .nav-links { display: none; position: absolute; top: 100%; right: 0; width: 200px; flex-direction: column; background-color: #25292e; padding: 10px 0; align-items: flex-start; } .nav-links li { width: 100%; margin: 0; padding: 5px 20px; display: block; text-align: left; } .nav-links.active { display: flex; } .hamburger-button { display: inline-block; margin-left: auto; } /* (При желании можно менять порядок пунктов menu, используя order, если нужно.) */ .about-container { flex-wrap: wrap; } .about-card, .about-image { flex: 1 1 100%; max-width: 100%; } }