/* ===================================================== EHWEXAR WEBSITE STYLE Главный файл дизайна. Структура: 1. Переменные и темы 2. Глобальные настройки 3. Header 4. Hero 5. Sections 6. Cards 7. Footer 8. Responsive ===================================================== CSS VARIABLES Все основные цвета сайта. Меняя эти значения, мы меняем весь дизайн. Основано на фирменной палитре EHWEXAR: #000000 #111111 #2B2B2B #B0A8C0 #8A7BB6 #4B3669 ===================================================== */ :root { /* Основные цвета */ --black: #000000; --dark: #111111; --gray: #2B2B2B; /* Фиолетовая палитра */ --light-purple: #B0A8C0; --purple: #8A7BB6; --dark-purple: #4B3669; /* Цвета интерфейса */ --background: #000000; --surface: rgba(17,17,17,0.75); --surface-solid: #111111; --text: #ffffff; --text-secondary: #B0A8C0; --border: rgba(176,168,192,0.15); /* Эффекты */ --shadow: 0 20px 60px rgba(0,0,0,0.5); --radius: 24px; --transition: .3s ease; } /* ===================================================== LIGHT THEME Включается через: JavaScript будет менять этот класс. ===================================================== */ .light-theme { --background: #f5f5f7; --surface: rgba(255,255,255,0.75); --surface-solid: #ffffff; --text: #111111; --text-secondary: #555555; --border: rgba(0,0,0,0.12); --shadow: 0 20px 60px rgba(0,0,0,0.15); } /* ===================================================== GLOBAL RESET Убираем стандартные стили браузера. Так сайт будет одинаково выглядеть в Chrome, Firefox, Safari и телефонах. ===================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--background); color: var(--text); font-family: "Inter", Arial, sans-serif; overflow-x: hidden; transition: background var(--transition), color var(--transition); } body{ background: var(--background); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ===================================================== HEADINGS Все большие заголовки используют Orbitron. Это создает технологический стиль. ===================================================== */ h1, h2, h3, h4 { font-family: "Orbitron", sans-serif; letter-spacing: .04em; } /* ===================================================== HEADER Главная навигация. Особенности: - находится поверх hero; - стеклянный эффект; - адаптация под будущее меню аккаунта. ===================================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px,5vw,70px); background: transparent; transition: background var(--transition), backdrop-filter var(--transition); } /* Когда пользователь прокрутил страницу, JS добавит класс: .header.scrolled Тогда появится фон. */ .header.scrolled { background: rgba(0,0,0,0.55); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border); } /* ===================================================== BRAND Логотип + название. ===================================================== */ .brand { display: flex; align-items: center; gap: 12px; font-family: "Orbitron", sans-serif; font-size: 22px; font-weight: 700; } .brand img { width: 48px; height: 48px; border-radius: 12px; } /* ===================================================== NAVIGATION Основное меню. ===================================================== */ .navigation { display: flex; gap: clamp(15px,3vw,35px); } .navigation a { color: var(--text-secondary); font-size: 15px; font-weight: 500; transition: var(--transition); } .navigation a:hover { color: var(--text); } /* ===================================================== HEADER ACTIONS Правая часть: - тема; - аккаунт. ===================================================== */ .header-actions { display: flex; align-items: center; gap: 12px; } /* Кнопка смены темы */ .theme-toggle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 18px; transition: var(--transition); } .theme-toggle:hover { transform: rotate(20deg); } /* Кнопка личного кабинета */ .account-button { padding: 11px 20px; border-radius: 30px; background: var(--purple); color: white; font-weight: 600; transition: var(--transition); } .account-button:hover { background: var(--dark-purple); transform: translateY(-2px); } /* ===================================================== HERO SECTION Главный экран сайта. Особенности: - фон берется из ehwexar.png; - изображение занимает весь экран; - текст находится прямо поверх изображения; - есть затемнение для читаемости; - подготовлено место для будущих: - видео-фона; - 3D объектов; - интерактивных элементов. ===================================================== */ .hero{ position:relative; display:flex; align-items:center; overflow:hidden; min-height:100vh; } /* Затемнение изображения. Без него текст может плохо читаться на светлых участках картинки. Используется отдельный слой, чтобы не изменять само изображение. */ .hero::before{ content:""; position:absolute; inset:0; background-image:url("/image/ehwexar.png"); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; z-index:-2; } .hero::after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.75), rgba(0,0,0,.45), rgba(0,0,0,.7) ); z-index:-1; } /* Контент героя. z-index нужен, чтобы текст был выше затемнения. */ .hero-content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(90px,12vh,140px) clamp(20px,6vw,80px) clamp(50px,8vh,90px); } /* Главный заголовок. Используется clamp: Минимум: 42px Оптимально: 6vw Максимум: 90px Поэтому на телефоне не будет огромного текста, а на 4K он не станет маленьким. */ .hero h1 { font-size: clamp(42px,6vw,90px); line-height: 1.05; font-weight: 700; color: white; margin-bottom: 30px; } /* Подзаголовок */ .hero-subtitle { max-width: 650px; font-size: clamp(17px,2vw,24px); line-height: 1.6; color: rgba(255,255,255,.8); margin-bottom: 45px; } /* ===================================================== MAIN BUTTON Главная кнопка сайта. Используется для: - перехода к проектам; - будущих действий пользователя. ===================================================== */ .main-button { display: inline-flex; align-items: center; gap: 15px; padding: 16px 32px; border-radius: 40px; background: var(--purple); color: white; font-weight: 700; font-size: 17px; transition: var(--transition); } .main-button span { font-size: 24px; transition: var(--transition); } .main-button:hover { background: var(--dark-purple); transform: translateY(-5px); } .main-button:hover span { transform: translateX(5px); } /* ===================================================== GENERAL SECTION STYLES Общие настройки секций. Все будущие разделы будут использовать эту основу. ===================================================== */ section { width: 100%; padding: clamp(45px,5vw,80px) clamp(20px,6vw,80px); } .section-title { text-align: center; max-width: 700px; margin: 0 auto 35px; } .section-title h2 { font-size: clamp(30px,4vw,50px); margin-bottom: 15px; } .section-title p { color: var(--text-secondary); font-size: 18px; } /* ===================================================== DIRECTIONS Карточки ARMI и EHWAZ. ===================================================== */ .direction-grid { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 30px; max-width: 1200px; margin: auto; } .direction-card { min-height: 420px; display: flex; align-items: end; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); color: var(--text); border: 1px solid var(--border); border: 1px solid var(--border); box-shadow: var(--shadow); transition: var(--transition); } .direction-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( transparent, rgba(0,0,0,.25) ); } .light-theme .direction-card::before{ background: linear-gradient( transparent, rgba(255,255,255,.15) ); } .direction-card:hover { transform: translateY(-10px); border-color: var(--purple); } .card-content { position: relative; z-index: 1; padding: 40px; } .card-label { color: var(--light-purple); font-size: 14px; font-weight: 700; letter-spacing: .2em; } .card-content h3 { font-size: clamp(25px,3vw,38px); margin: 20px 0; } .card-content p { color: rgba(255,255,255,.75); line-height: 1.6; max-width: 450px; } .card-link{ display:inline-block; margin-top: 35px; color: var(--purple); font-weight: 700; transition: var(--transition); } /* ===================================================== ABOUT SECTION Блок о компании. Стиль: - минимализм; - много воздуха; - акцент на доверие. ===================================================== */ .about { display: flex; justify-content: center; } .about-content { max-width: 900px; text-align: center; background: var(--surface); backdrop-filter: blur(15px); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(30px,5vw,70px); box-shadow: var(--shadow); } .about-content h2 { font-size: clamp(35px,5vw,60px); margin-bottom: 30px; } .about-content p { color: var(--text-secondary); font-size: clamp(16px,2vw,20px); line-height: 1.8; margin-bottom: 20px; } /* ===================================================== PRINCIPLES SECTION Карточки: Innovation Engineering Future ===================================================== */ .principles-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 25px; max-width: 1200px; margin: auto; } .principle-card { background: var(--surface); backdrop-filter: blur(15px); border: 1px solid var(--border); border-radius: var(--radius); padding: 35px; transition: var(--transition); } .principle-card:hover { transform: translateY(-8px); border-color: var(--purple); } .principle-card span { font-family: "Orbitron"; font-size: 40px; color: var(--purple); } .principle-card h3 { margin: 25px 0 15px; font-size: 24px; } .principle-card p { color: var(--text-secondary); line-height: 1.6; } /* ===================================================== MEDIA / COMMUNITY EMPTY BLOCKS Пока заглушки. В будущем сюда можно подключить: - новости; - форум; - пользователей; - API. ===================================================== */ .community-links{ max-width:900px; margin:0 auto; display:grid; gap:25px; } .community-card{ display:flex; align-items:center; gap:25px; padding:30px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:inherit; transition:.3s ease; } .community-card:hover{ transform:translateY(-6px); border-color:var(--primary); box-shadow:0 15px 35px rgba(138,123,182,.18); } .community-icon{ width:72px; height:72px; flex-shrink:0; border-radius:20px; background:linear-gradient( 135deg, var(--primary), var(--primary-dark) ); display:flex; justify-content:center; align-items:center; font-size:26px; font-weight:700; color:white; } .community-info{ flex:1; } .community-info h3{ margin-bottom:10px; font-size:28px; color:var(--text); } .community-info p{ color:var(--text-secondary); line-height:1.7; } .community-icon img{ width:46px; height:46px; } .community-icon svg{ width:46px; height:46px; } .light-theme .community-icon{ color:#111; } /* ===================================================== FUTURE SECTION Финальный эмоциональный блок. ===================================================== */ .future { text-align: center; background: linear-gradient( 180deg, transparent, rgba(75,54,105,.25) ); } .future h2 { font-size: clamp(30px,5vw,70px); margin-bottom: 25px; } .future p { color: var(--text-secondary); font-size: 20px; } /* ===================================================== FOOTER Нижняя часть сайта. Подготовлена под: - соцсети; - документы; - поддержку; - аккаунты. ===================================================== */ .footer { padding: 70px clamp(20px,6vw,80px) 30px; border-top: 1px solid var(--border); background: rgba(0,0,0,.25); } .footer-container { max-width: 1300px; margin: auto; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 40px; } .footer-brand img { width: 60px; border-radius: 15px; margin-bottom: 20px; } .footer-brand h3 { margin-bottom: 15px; } .footer-brand p { color: var(--text-secondary); line-height: 1.6; } .footer-column { display: flex; flex-direction: column; gap: 15px; } .footer-column h4 { margin-bottom: 10px; font-size: 18px; } .footer-column a { color: var(--text-secondary); transition: var(--transition); } .footer-column a:hover { color: var(--text); } .footer-bottom { text-align: center; margin-top: 50px; padding-top: 25px; border-top: 1px solid var(--border); color: var(--text-secondary); } .menu-toggle{ display:none; background:none; border:none; color:var(--text); font-size:28px; cursor:pointer; } /* ===================================================== RESPONSIVE DESIGN Адаптация под разные размеры экранов. Основные точки: 1200px — небольшие ноутбуки 900px — планшеты 600px — телефоны ===================================================== ===================================================== TABLET / SMALL LAPTOP До 1100px Меняем: - количество колонок; - размеры блоков; - отступы. ===================================================== */ @media(max-width:1100px){ .navigation { gap: 15px; } .navigation a { font-size: 14px; } .direction-grid { grid-template-columns: 1fr; max-width: 700px; } .principles-grid { grid-template-columns: repeat(2,1fr); } .footer-container { grid-template-columns: repeat(2,1fr); } } /* ===================================================== TABLET До 900px ===================================================== */ @media(max-width:900px){ .header { padding: 15px 25px; } .hero::before{ background-attachment:scroll; background-size:cover; background-position:73% center; } .hero{ min-height:110svh; } /* Меню скрывается. Позже сюда можно добавить: hamburger кнопку. Сейчас структура уже готова. */ .navigation{ display:flex; position:absolute; top:80px; left:20px; right:20px; flex-direction:column; gap:20px; padding:25px; background:var(--surface); border-radius:20px; /* Анимация меню */ opacity:0; transform: translateY(-20px); pointer-events:none; transition: 0.3s ease; } .navigation.active{ opacity:1; transform: translateY(0); pointer-events:auto; } .menu-toggle { display:block; } .hero-content { text-align: center; } .hero-subtitle { margin-left: auto; margin-right: auto; } .header-actions { gap: 8px; } .account-button { padding: 10px 15px; font-size: 14px; } .principles-grid { grid-template-columns: 1fr; } .light-theme .navigation.active a{ color:var(--text) !important; } .light-theme .navigation.active a:hover{ color:var(--purple) !important; } .community-card{ flex-direction:column; text-align:center; } .community-info h3{ font-size:24px; } } /* ===================================================== PHONE До 600px Главная мобильная версия. ===================================================== */ @media(max-width:600px){ .header { padding: 12px 15px; } .brand { font-size: 17px; gap: 8px; } .brand img { width: 38px; height: 38px; } .theme-toggle { width: 38px; height: 38px; } .account-button { padding: 9px 12px; font-size: 12px; } /* Hero Уменьшаем отступ сверху, потому что header занимает меньше места. */ .hero-content { padding-top: 100px; } .hero h1 { font-size: 38px; } .hero-subtitle { font-size: 16px; } .main-button { width: 100%; justify-content: center; padding: 15px; } /* Карточки проектов */ .direction-card { min-height: 350px; } .card-content { padding: 25px; } .card-content h3 { font-size: 24px; } /* Общие секции */ section { padding: 60px 15px; } .about-content { padding: 30px 20px; } .empty-block { padding: 35px 20px; } /* Footer На телефоне все блоки идут вертикально. */ .footer-container { grid-template-columns: 1fr; text-align: center; } .footer-column { align-items: center; } } /* ===================================================== VERY SMALL DEVICES 320px телефоны. ===================================================== */ @media(max-width:360px){ .hero h1 { font-size: 32px; } .account-button { display: none; } } /* Главное название проекта ARMI / EHWAZ */ .project-title{ font-family: "Orbitron", sans-serif; font-size: clamp(50px,7vw,85px); letter-spacing: .1em; margin-bottom: 15px; color: var(--purple); } .header .navigation a{ color: rgba(255,255,255,.8); } .header .navigation a:hover{ color:white; } .light-theme .hero::after{ background: linear-gradient( 90deg, rgba(255,255,255,.75), rgba(255,255,255,.55), rgba(255,255,255,.8) ); } .light-theme .hero h1{ color:#111; } .light-theme .hero-subtitle{ color:#333; } .light-theme .media-info a{ background: rgba(138,123,182,.12); border: 1px solid rgba(138,123,182,.35); color: #4B3669; } /* ===================================================== PROJECT CARDS TEXT Текст внутри ARMI/EHWAZ. Автоматически меняет цвет вместе с темой. ===================================================== */ .direction-card .card-content h3{ color: var(--text); } .direction-card .card-content p{ color: var(--text-secondary); } /* ===================================================== MEDIA CARD ===================================================== */ .media-card{ position:relative; overflow:hidden; transition: border-color .3s ease, box-shadow .3s ease, transform .6s ease, opacity .6s ease; border: 1px solid rgba(138,123,182,.18); border-radius: 28px; box-shadow: 0 0 0 1px rgba(165,110,255,.4), 0 15px 45px rgba(0,0,0,.45), 0 0 40px rgba(165,110,255,.5); } .media-card::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top right, rgba(138,123,182,.35), transparent 60% ), radial-gradient( circle at bottom left, rgba(75,54,105,.25), transparent 65% ); pointer-events:none; } .media-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition: transform .45s ease; } /* ===================================================== MEDIA INFO ===================================================== */ .media-info{ position:relative; z-index:2; padding: 30px; } .media-info h2{ font-family: "Orbitron", sans-serif; font-size: clamp(26px,3vw,38px); line-height:1.2; margin: 20px 0; letter-spacing: 1px; color: var(--text); } .media-info p{ color: var(--text-secondary); font-size: 17px; line-height: 1.7; } .media-stats{ display:flex; gap: 20px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 15px; } .media-info a{ display:inline-flex; align-items:center; margin-top: 25px; padding: 12px 24px; border-radius: 16px; background: rgba(138,123,182,.12); border: 1px solid rgba(138,123,182,.35); color: var(--light-purple); text-decoration:none; transition: .3s ease; } .media-meta{ display:flex; align-items:center; gap:15px; margin-bottom:10px; } .media-category{ padding: 6px 14px; border-radius: 999px; background: rgba(138,123,182,.12); border: 1px solid rgba(138,123,182,.35); color: var(--light-purple); font-size:13px; letter-spacing:.5px; } .media-date{ color: var(--text-secondary); font-size:14px; } .light-theme .media-category{ color: #4B3669; background: rgba(138,123,182,.12); } .light-theme .media-date{ color: #666; } .media-info a:hover{ background: rgba(138,123,182,.25); border-color: var(--purple); transform: translateX(5px); box-shadow: 0 0 25px rgba(138,123,182,.45); } /* ===================================================== FOOTER BUTTONS ===================================================== */ .footer-link{ display:block; width:auto; padding:0; margin:0; background:none; border:none; color:var(--text-secondary); font:inherit; text-align:left; cursor:pointer; transition:var(--transition); } .footer-link:hover{ color:var(--text); } /* ===================================================== MODAL ===================================================== */ .modal{ position:fixed; inset:0; display:none; justify-content:center; align-items:center; background:rgba(0,0,0,.65); backdrop-filter:blur(10px); z-index:9999; } .modal.show{ display:flex; } .modal-window{ width:min(430px,90vw); padding:35px; border-radius:28px; background:rgba(20,20,30,.88); backdrop-filter:blur(20px); border:1px solid rgba(165,110,255,.35); box-shadow: 0 0 50px rgba(165,110,255,.35); } .modal-window h2{ margin-bottom:25px; text-align:center; } .modal-links{ display:flex; flex-direction:column; gap:18px; } .modal-links a{ display:flex; align-items:center; gap:15px; padding:18px; border-radius:18px; background:rgba(138,123,182,.12); border:1px solid rgba(138,123,182,.35); color:var(--text); text-decoration:none; transition:.25s; } .modal-links a:hover{ background:rgba(138,123,182,.22); transform:translateY(-3px); } .modal-links svg{ width:30px; height:30px; flex:none; color:inherit; } .modal-close { position: absolute; top: 12px; right: 15px; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: #ff4444; font-size: 30px; font-weight: 600; line-height: 32px; text-align: center; cursor: pointer; z-index: 10; } .modal-close:hover { color: #ff0000; } .media-reaction { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 12px; background: rgba(138, 123, 182, 0.08); color: var(--text-secondary); font-size: 14px; cursor: pointer; transition: var(--transition); } .media-reaction:hover { background: rgba(138, 123, 182, 0.18); border-color: var(--purple); color: var(--text); transform: translateY(-2px); } .media-reaction:active { transform: scale(0.95); } .media-reaction.like-button:hover { border-color: #6fcf97; } .media-reaction.dislike-button:hover { border-color: #eb7777; } .media-reaction.selected { background: rgba(138, 123, 182, 0.25); border-color: var(--purple); color: var(--text); box-shadow: 0 0 12px rgba(138, 123, 182, 0.18); } .media-reaction.selected.like-button { border-color: #6fcf97; background: rgba(111, 207, 151, 0.12); } .media-reaction.selected.dislike-button { border-color: #eb7777; background: rgba(235, 119, 119, 0.12); } .light-theme .media-reaction { background: rgba(138, 123, 182, 0.06); } /* ========================================================== NOTIFICATIONS ========================================================== */ .notification { position: fixed; top: 20px; right: 20px; width: 360px; min-height: 58px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; box-sizing: border-box; border-radius: 12px; color: white; font-size: 15px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 10000; transform: translateY(-130%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .notification.show { transform: translateY(0); opacity: 1; } .notification.hide { transform: translateY(130%); opacity: 0; } .notification.success { background: #27ae60; } .notification.error { background: #e74c3c; } .notification-icon { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .notification-icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); } .notification-text { flex: 1; } @media (max-width: 600px) { .notification { top: 0; right: 0; width: 100%; border-radius: 0 0 12px 12px; } } /* ===================================================== LIGHT THEME MODAL ===================================================== */ .light-theme .modal{ background: rgba(255,255,255,.35); } .light-theme .modal-window{ background: rgba(255,255,255,.82); border: 1px solid rgba(138,123,182,.30); box-shadow: 0 0 45px rgba(138,123,182,.30); } .light-theme .modal-window h2{ color: #2d2142; } .light-theme .modal-links a{ background: rgba(138,123,182,.10); border: 1px solid rgba(138,123,182,.28); color: #4B3669; } .light-theme .modal-links a:hover{ background: rgba(138,123,182,.18); box-shadow: 0 0 20px rgba(138,123,182,.25); } .light-theme .footer-link{ color: #666; } .light-theme .footer-link:hover{ color: #4B3669; } .community-icon img { filter: brightness(0) invert(1); } .light-theme .community-icon img { filter: brightness(0); }