/* ========================================================= ШКОЛЬНЫЙ ПРОЕКТ: "Создание сайта с нуля" Стилевой фундамент сайта — v3, оптимизированная версия. ЧТО ИЗМЕНИЛОСЬ ПРОТИВ v2 (по просьбе — сайт тормозил): 1. Убран SVG-шум (feTurbulence) и mix-blend-mode на весь экран — это была самая тяжёлая часть фона. 2. backdrop-filter (живое размытие "сквозь" элемент) оставлен только в шапке (один элемент на страницу). На карточках больше не используется — раньше он был на 10+ карточках одновременно, это и"тормозило". 3. Свечение при hover больше не анимирует box-shadow (это дорогая операция, пересчитывается каждый кадр). Вместо этого — отдельный слой (::after) с готовым мягким градиентом, у которого при наведении меняется только opacity — это "бесплатно" для браузера. 4. Шрифты подключаются через в HTML-файлов, а не через @import в CSS (раньше @import блокировал отрисовку страницы, пока не загрузится шрифт). 5. Лесной фон — вместо реального фото (которое пришлось бы грузить с внешнего сайта — риск лицензии и обрывов связи) — атмосферная сцена на CSS: тёмное небо, мягкий лунный/светлячковый боке и линия силуэта леса с разовым, статичным размытием (не анимируется — значит, не нагружает браузер при скролле или наведении). ========================================================= */ :root { /* ---- Фон: слои тёмного леса ---- */ --bg-1: #07120b; --bg-2: #0b1a12; --bg-3: #102016; --bg-4: #13251a; /* ---- Карточки ---- */ --card-1: #16291e; --card-2: #1a3123; --card-solid: rgba(19, 37, 26, 0.82); --card-border: rgba(62, 234, 122, 0.18); --card-border-hover: rgba(89, 245, 143, 0.45); /* ---- Акценты: неоновая зелень ---- */ --accent: #2ecc71; --accent-bright: #3eea7a; --accent-neon: #59f58f; /* ---- Дополнительные природные оттенки ---- */ --olive: #7a8450; --pine: #1f4a34; --emerald: #12a56a; --marsh: #3a4a34; /* ---- Зелёный для описаний (мягче, чем неоновый акцент) ---- */ --green-desc: #8fdcae; /* ---- Текст ---- */ --text-primary: #f5f7f5; --text-secondary: #a7bfae; --text-faint: #6f8578; /* ---- Типографика ---- */ --font-display: "Space Grotesk", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace; --font-body: "Inter", "Segoe UI", sans-serif; /* ---- Скругления ---- */ --radius-lg: 22px; --radius-md: 16px; /* ---- Тени (статичные, без анимации — дёшево для браузера) ---- */ --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(62, 234, 122, 0.08) inset; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--text-primary); background-color: var(--bg-1); position: relative; line-height: 1.65; } /* ========================================================= ФОН: "заблюренное фото леса" ночью — без реального фото. Два фиксированных слоя (position: fixed) — браузер один раз растрирует их в отдельный композитный слой и дальше почти не тратит на них ресурсы, даже если размытие применяется по-настоящему (filter: blur), потому что слой статичен и не анимируется. ========================================================= */ /* Слой 1 — небо, лунный свет и светлячки (только градиенты, без filter: blur — градиенты и так мягкие "из коробки") */ body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(260px circle at 80% 16%, rgba(210, 255, 222, 0.22), transparent 70%), radial-gradient(200px circle at 14% 28%, rgba(62, 234, 122, 0.14), transparent 70%), radial-gradient(160px circle at 58% 46%, rgba(89, 245, 143, 0.10), transparent 70%), radial-gradient(900px 600px at 50% 115%, rgba(31, 74, 52, 0.4), transparent 65%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 55%, #04100a 100%); } /* Слой 2 — силуэт леса на горизонте, единожды размытый (имитация расфокусированного фото), полностью статичен */ body::after { content: ""; position: fixed; left: -2%; right: -2%; bottom: 0; height: 46vh; z-index: -2; pointer-events: none; background: linear-gradient(200deg, rgba(10, 20, 14, 0) 0%, var(--pine) 45%, #050d08 100%); clip-path: polygon( 0% 100%, 0% 62%, 4% 68%, 8% 50%, 12% 64%, 17% 44%, 22% 66%, 27% 40%, 32% 60%, 37% 46%, 42% 64%, 47% 42%, 52% 62%, 57% 48%, 62% 68%, 67% 40%, 72% 60%, 77% 44%, 82% 64%, 87% 50%, 92% 66%, 96% 46%, 100% 62%, 100% 100% ); filter: blur(14px); opacity: 0.92; } img, svg { max-width: 100%; } a { color: inherit; } /* ========================================================= АНИМИРОВАННЫЙ ФОН: ночной лес + едущая машинка (ретро-пиксель) Это отдельный декоративный слой (.bg-scene), который лежит в разметке сразу после на каждой странице — просто пустой блок, не влияющий на остальную вёрстку. Он: - зафиксирован на весь экран (position: fixed) и лежит позади всего контента (z-index: -1 — выше "лесного" фона из body::before/after, но ниже любого реального контента); - никак не реагирует на клики (pointer-events: none); - слегка размыт и полупрозрачен, чтобы не мешать читать текст; - анимируется только через transform (translateX) — самое дешёвое свойство для браузера, без пересчёта раскладки и без лишних перерисовок каждый кадр. ========================================================= */ .bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(1.5px); opacity: 0.6; } /* Дорога — тонкая светлая полоса у нижнего края сцены */ .bg-scene__road { position: absolute; left: 0; right: 0; bottom: 9vh; height: 2px; background: linear-gradient( 90deg, transparent, rgba(143, 220, 174, 0.28) 12%, rgba(143, 220, 174, 0.28) 88%, transparent ); } /* Машинка — простой "пиксельный" силуэт из нескольких блоков, как в старых 2D-играх с видом сбоку. Едет медленно и по кругу (уезжает за правый край — и снова появляется слева). */ .bg-scene__car { position: absolute; bottom: calc(9vh + 2px); left: -70px; width: 46px; height: 22px; animation: driveAcross 32s linear infinite; } @keyframes driveAcross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 140px)); } } .bg-scene__car-body { position: absolute; left: 0; bottom: 6px; width: 46px; height: 10px; background: #16291e; border-radius: 2px; } .bg-scene__car-cabin { position: absolute; left: 9px; bottom: 14px; width: 23px; height: 9px; background: #16291e; border-radius: 2px 5px 0 0; } .bg-scene__car-wheel { position: absolute; bottom: 0; width: 8px; height: 8px; border-radius: 50%; background: #0a1710; } .bg-scene__car-wheel--front { left: 6px; } .bg-scene__car-wheel--back { left: 32px; } /* Фара — маленькое тёплое пятно света впереди машины */ .bg-scene__car-light { position: absolute; left: 44px; bottom: 8px; width: 4px; height: 3px; background: rgba(255, 224, 156, 0.9); border-radius: 1px; box-shadow: 7px 0 10px 1px rgba(255, 224, 156, 0.32); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Появление снизу — только transform и opacity, дёшево для GPU */ @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ========================= ШАПКА / НАВИГАЦИЯ (единственное место, где остаётся backdrop-filter — один элемент на страницу, это не нагружает браузер) ========================= */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 18, 11, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(62, 234, 122, 0.14); } .nav { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; text-decoration: none; color: var(--text-primary); } .nav-logo .tag { color: #06150d; background: linear-gradient(135deg, var(--accent), var(--accent-neon)); padding: 4px 8px; border-radius: 8px; font-size: 0.85rem; box-shadow: 0 0 14px rgba(62, 234, 122, 0.35); } /* Кнопка-гамбургер для мобильного меню — скрыта на широких экранах, показывается только в мобильном медиа-запросе ниже */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(62, 234, 122, 0.28); border-radius: 12px; background: var(--card-1); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav-toggle-bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--accent-neon); transition: transform 0.3s ease, opacity 0.3s ease; } /* Превращаем три полоски в крестик, когда меню открыто */ .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); transition: color 0.3s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-neon), transparent); opacity: 0; transform: scaleX(0.6); transition: opacity 0.3s ease, transform 0.3s ease; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--accent-neon); } .nav-links a:hover::after, .nav-links a:focus-visible::after { opacity: 1; transform: scaleX(1); } .nav-links a.active { background: var(--card-1); color: var(--accent-neon); } .nav-links a.active::after { opacity: 1; transform: scaleX(1); } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-neon); outline-offset: 3px; border-radius: 6px; } /* ========================= ОБЩИЙ КОНТЕЙНЕР СТРАНИЦЫ ========================= */ main { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .page-title { margin: 56px 0 12px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--text-primary); text-shadow: 0 0 22px rgba(62, 234, 122, 0.25); animation: riseIn 0.6s ease both; } .page-lead { max-width: 640px; color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 40px; animation: riseIn 0.6s ease 0.06s both; } .eyebrow { position: relative; display: inline-block; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--accent-neon); background: var(--card-1); border: 1px solid rgba(62, 234, 122, 0.3); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; } /* ========================= МОТИВ "ОКНО БРАУЗЕРА" Плотная полупрозрачная панель (без backdrop-filter — быстрее, а при таком тёмном фоне визуально почти неотличимо от "стекла"). ========================= */ .window { background: linear-gradient(155deg, rgba(26, 49, 35, 0.92), var(--card-solid)); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--card-border); overflow: hidden; animation: riseIn 0.6s ease both; transition: border-color 0.35s ease; } .window-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, rgba(26, 49, 35, 0.9), rgba(16, 32, 22, 0.9)); border-bottom: 1px solid rgba(62, 234, 122, 0.14); } .window-bar .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot.red { background: #ff5f57; } .dot.yellow { background: #febc2e; } .dot.green { background: #28c840; } .window-bar .window-label { margin-left: 8px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); } /* ========================= HERO (главная страница) ========================= */ .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 40px 0 56px; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 14px; color: var(--text-primary); font-weight: 700; text-shadow: 0 0 26px rgba(62, 234, 122, 0.3); animation: riseIn 0.6s ease both; } .hero p { color: var(--text-secondary); font-size: 1.08rem; max-width: 480px; margin: 0 0 24px; animation: riseIn 0.6s ease 0.08s both; } /* ---- Кнопка: мягкое свечение "снизу", только opacity меняется ---- */ .btn-primary { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: #04140b; background: linear-gradient(135deg, var(--accent), var(--accent-bright) 60%, var(--accent-neon)); border: 1px solid rgba(89, 245, 143, 0.5); padding: 14px 26px; border-radius: 999px; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, filter 0.3s ease; animation: riseIn 0.6s ease 0.16s both; } /* Свет, который как будто идёт из-под кнопки: заранее готовый мягкий блик под кнопкой, скрытый через opacity: 0. При hover меняется только opacity — это самое дешёвое свойство для анимации, скачков FPS не будет. */ .btn-primary::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 34px; background: radial-gradient(closest-side, rgba(62, 234, 122, 0.55), transparent 75%); filter: blur(9px); opacity: 0; transition: opacity 0.4s ease; z-index: -1; pointer-events: none; } .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px) scale(1.035); filter: brightness(1.06); } .btn-primary:hover::before, .btn-primary:focus-visible::before { opacity: 1; } .btn-primary span:not(.arrow) { text-shadow: 0 0 10px rgba(6, 20, 12, 0.3); } .btn-primary .arrow { transition: transform 0.3s ease; } .btn-primary:hover .arrow { transform: translateX(4px); } /* ---- Источники для изучения — плавающая панель ---- Это НЕ часть обычной вёрстки: блок полностью выведен из потока документа (position: fixed) и всегда находится в левом верхнем углу экрана, независимо от прокрутки страницы и от того, что происходит с остальным контентом. Анимация касается только ПОЯВЛЕНИЯ блока, а не его позиции: изначально он невидим и чуть выше своего места (opacity: 0, translateY отрицательный). После загрузки страницы script.js добавляет класс .in-view — и блок плавно проявляется и "опускается" на своё окончательное место (эффект, обратный исчезновению). Сама позиция (top/left) при этом не меняется ни на пиксель — двигается только внешний вид через transform. */ .resources { position: fixed; top: 88px; /* чуть ниже липкой шапки сайта, чтобы не перекрывать логотип */ left: 20px; z-index: 9999; width: 260px; max-width: calc(100vw - 40px); margin: 0; padding: 0; border: none; opacity: 0; transform: translateY(-28px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; /* пока блок невидим — не мешает кликам под собой */ } /* Класс добавляется через script.js после загрузки страницы */ .resources.in-view { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Кнопка закрытия панели источников — нужна только в мобильной версии (шторка снизу), поэтому по умолчанию скрыта */ .resources-close { display: none; } /* Плавающая круглая кнопка "источники" (FAB) и подложка-затемнение для мобильной версии — на широких экранах не показываются вовсе, там панель источников и так всегда на виду в углу экрана */ .resources-fab, .resources-backdrop { display: none; } .resources-label { display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text-faint); margin-bottom: 14px; } .resources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .resource-card { position: relative; display: block; background: linear-gradient(155deg, rgba(26, 49, 35, 0.9), var(--card-solid)); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 16px 20px; text-decoration: none; box-shadow: var(--shadow-card); overflow: hidden; animation: riseIn 0.6s ease both; transition: transform 0.3s ease, border-color 0.3s ease; } .resources-list li:nth-child(1) .resource-card { animation-delay: 0.28s; } .resources-list li:nth-child(2) .resource-card { animation-delay: 0.34s; } .resources-list li:nth-child(3) .resource-card { animation-delay: 0.4s; } .resource-card::after { content: ""; position: absolute; inset: -30% -20% auto -20%; height: 60%; background: radial-gradient(closest-side, rgba(62, 234, 122, 0.22), transparent 70%); filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .resource-card:hover, .resource-card:focus-visible { transform: translateY(-3px); border-color: var(--card-border-hover); } .resource-card:hover::after, .resource-card:focus-visible::after { opacity: 1; } .resource-name { position: relative; display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--accent-neon); text-shadow: 0 0 16px rgba(62, 234, 122, 0.3); margin-bottom: 6px; transition: color 0.25s ease; } .resource-card:hover .resource-name, .resource-card:focus-visible .resource-name { color: var(--text-primary); } .resource-desc { position: relative; margin: 0; font-size: 0.9rem; color: var(--green-desc); } /* На очень широких экранах слева от контента остаётся пустое поле — переносим туда блок источников и центрируем его по ширине этого поля. Контейнер main имеет max-width:1100px и центрируется, поэтому левое поле = (100vw - 1100px) / 2; блок шириной 280px центрируем внутри него формулой (поле - 280px) / 2, что и даёт calc(25vw - 415px). На экранах уже 1900px это не применяется — там для блока не хватит места, и он остаётся на обычном месте под кнопкой. */ /* Примечание: раньше здесь была отдельная настройка положения блока .resources для сверхширoких экранов (>=1900px). Теперь в этом нет нужды — блок всегда фиксирован в левом верхнем углу экрана (см. .resources выше), независимо от ширины экрана и прокрутки страницы. */ /* "Живое" окно кода в хиро-блоке — печатающаяся анимация */ .code-window { font-family: var(--font-mono); font-size: 0.85rem; color: #cfe8d7; background: linear-gradient(180deg, #0a1710, #081209); min-height: 230px; padding: 18px 20px; } .code-window .line { white-space: pre; opacity: 0; animation: reveal 0.4s ease forwards; } .code-window .tag { color: var(--accent-neon); } .code-window .attr { color: #bfe6cc; } .code-window .str { color: #c9d97a; } .code-window .cmt { color: var(--text-faint); } @keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cursor-blink { display: inline-block; width: 7px; height: 1em; background: var(--accent-neon); vertical-align: text-bottom; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ========================= "ЧТО МЫ ИЗУЧИМ" ========================= */ .topics { padding: 20px 0 60px; } .section-heading { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 24px; color: var(--text-primary); font-weight: 700; text-shadow: 0 0 18px rgba(62, 234, 122, 0.2); } .topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .topic-chip { position: relative; background: linear-gradient(155deg, rgba(26, 49, 35, 0.85), var(--card-solid)); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 18px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow-card); transition: transform 0.3s ease, border-color 0.3s ease; animation: riseIn 0.6s ease both; overflow: hidden; } .topic-chip:nth-child(1) { animation-delay: 0.05s; } .topic-chip:nth-child(2) { animation-delay: 0.1s; } .topic-chip:nth-child(3) { animation-delay: 0.15s; } .topic-chip:nth-child(4) { animation-delay: 0.2s; } .topic-chip:nth-child(5) { animation-delay: 0.25s; } .topic-chip::after { content: ""; position: absolute; inset: -30% -30% auto -30%; height: 60%; background: radial-gradient(closest-side, rgba(62, 234, 122, 0.28), transparent 70%); filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .topic-chip:hover { transform: translateY(-4px); border-color: var(--card-border-hover); } .topic-chip:hover::after { opacity: 1; } .topic-chip .num { position: relative; font-family: var(--font-mono); font-weight: 600; color: #06150d; background: linear-gradient(135deg, var(--accent), var(--accent-neon)); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; } .topic-chip p { position: relative; margin: 0; font-weight: 500; font-size: 0.95rem; color: var(--text-primary); } /* ========================= КАРТОЧКИ ЭТАПОВ (stages.html) ========================= */ .stage-list { display: flex; flex-direction: column; gap: 22px; padding-bottom: 70px; } .stage-card { position: relative; transition: transform 0.3s ease, border-color 0.3s ease; overflow: hidden; } .stage-card::after { content: ""; position: absolute; inset: auto -20% -30% -20%; height: 55%; background: radial-gradient(closest-side, rgba(62, 234, 122, 0.22), transparent 70%); filter: blur(8px); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .stage-card:hover { transform: translateY(-3px); border-color: var(--card-border-hover); } .stage-card:hover::after { opacity: 1; } .stage-body { position: relative; padding: 22px 26px 26px; display: grid; grid-template-columns: auto 1fr; gap: 20px; } .stage-index { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; background: linear-gradient(160deg, rgba(62, 234, 122, 0.9), rgba(89, 245, 143, 0.35)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stage-content h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.25rem; color: var(--text-primary); font-weight: 700; } .stage-content ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-secondary); } .stage-content li { margin-bottom: 4px; } .tag-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .tag-chip { font-family: var(--font-mono); font-size: 0.75rem; background: rgba(19, 37, 26, 0.85); color: var(--accent-neon); border: 1px solid rgba(62, 234, 122, 0.3); padding: 3px 9px; border-radius: 6px; transition: border-color 0.25s ease; } .tag-chip:hover { border-color: rgba(89, 245, 143, 0.7); } /* ========================= ПРАКТИЧЕСКАЯ ЧАСТЬ (practice.html) ========================= */ .step { margin-bottom: 34px; animation: riseIn 0.6s ease both; } .step-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-neon); margin-bottom: 10px; } .step-label .step-num { background: linear-gradient(135deg, var(--accent), var(--accent-neon)); color: #06150d; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; } .step h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); font-weight: 700; } .step p { color: var(--text-secondary); margin-bottom: 14px; } .step code { background: rgba(19, 37, 26, 0.85); border: 1px solid rgba(62, 234, 122, 0.25); color: var(--accent-neon); padding: 2px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.85em; } pre.code-block { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.55; color: #cfe8d7; background: linear-gradient(180deg, #0a1710, #081209); overflow-x: auto; } pre.code-block .tag { color: var(--accent-neon); } pre.code-block .attr { color: #bfe6cc; } pre.code-block .str { color: #c9d97a; } pre.code-block .cmt { color: var(--text-faint); } pre.code-block .prop { color: #7fd8c4; } pre.code-block .val { color: #e0c281; } .browser-preview { padding: 22px; font-family: var(--font-body); } .browser-preview h4 { margin: 0 0 6px; color: var(--accent-neon); } .browser-preview p { margin: 0; color: var(--text-secondary); } .checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .checklist li { position: relative; background: linear-gradient(155deg, rgba(26, 49, 35, 0.85), var(--card-solid)); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-primary); box-shadow: var(--shadow-card); transition: transform 0.3s ease, border-color 0.3s ease; animation: riseIn 0.6s ease both; overflow: hidden; } .checklist li::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 55%; background: radial-gradient(closest-side, rgba(62, 234, 122, 0.22), transparent 70%); filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .checklist li:hover { transform: translateY(-3px); border-color: var(--card-border-hover); } .checklist li:hover::after { opacity: 1; } .checklist li::before { content: "✓"; position: relative; color: #06150d; background: linear-gradient(135deg, var(--accent), var(--accent-neon)); border-radius: 50%; width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } .result-box { margin: 40px 0 70px; } /* ========================= ФУТЕР ========================= */ .site-footer { border-top: 1px solid rgba(62, 234, 122, 0.14); margin-top: 40px; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; color: var(--text-secondary); } .footer-text { display: flex; flex-direction: column; gap: 4px; } .footer-credit { font-size: 0.78rem; color: var(--text-faint); } .footer-inner .footer-dots { display: flex; gap: 6px; } .footer-inner .footer-dots span { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ========================= СТРАНИЦА "КУРСЫ" (courses.html) ========================= */ .course-section { margin-bottom: 44px; } .course-section-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; } .course-section-title .num { font-family: var(--font-mono); font-weight: 600; color: #06150d; background: linear-gradient(135deg, var(--accent), var(--accent-neon)); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; } .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .course-card { position: relative; display: block; background: linear-gradient(155deg, rgba(26, 49, 35, 0.9), var(--card-solid)); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 18px 20px; text-decoration: none; box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; animation: riseIn 0.6s ease both; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .course-card::after { content: ""; position: absolute; inset: -30% -20% auto -20%; height: 60%; background: radial-gradient(closest-side, rgba(62, 234, 122, 0.22), transparent 70%); filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .course-card:hover, .course-card:focus-visible { transform: translateY(-3px); border-color: var(--card-border-hover); } .course-card:hover::after, .course-card:focus-visible::after { opacity: 1; } .course-card-name { position: relative; display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--accent-neon); margin-bottom: 6px; } .course-card-desc { position: relative; margin: 0 0 10px; font-size: 0.9rem; color: var(--green-desc); } .course-card-tag { position: relative; display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); border: 1px solid rgba(62, 234, 122, 0.25); padding: 2px 9px; border-radius: 999px; } /* ========================= АДАПТИВНОСТЬ ========================= */ @media (max-width: 800px) { .hero { grid-template-columns: 1fr; } /* ---- Мобильное меню: гамбургер + выпадающий список ---- */ .nav-toggle { display: flex; } .nav-links { position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px; background: rgba(10, 23, 15, 0.98); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .nav-links.open { max-height: 320px; opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-links li { width: 100%; } .nav-links a { width: 100%; min-height: 46px; border-radius: 10px; } .stage-body { grid-template-columns: 1fr; gap: 8px; } .stage-index { font-size: 1.7rem; } /* ---- Источники для изучения: на телефоне это шторка снизу, открывается по нажатию на плавающую кнопку-книжку ---- */ .resources { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 76vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgba(16, 32, 22, 0.98), rgba(6, 15, 10, 0.99)); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55); z-index: 10001; /* переопределяем десктопную анимацию появления: на мобильном панель двигается только по transform (снизу вверх), а не по opacity — и открывается только по клику на FAB */ opacity: 1; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .resources.in-view { opacity: 1; transform: translateY(100%); } .resources.open, .resources.in-view.open { transform: translateY(0); pointer-events: auto; } .resources-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-1); color: var(--text-secondary); font-size: 1rem; cursor: pointer; touch-action: manipulation; } .resources-label { padding-right: 44px; } .resources-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(89, 245, 143, 0.5); background: linear-gradient(135deg, var(--accent), var(--accent-neon)); color: #06150d; font-size: 1.5rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(62, 234, 122, 0.4); z-index: 10000; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .resources-backdrop { display: block; position: fixed; inset: 0; background: rgba(4, 10, 7, 0.6); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .resources-backdrop.open { opacity: 1; pointer-events: auto; } /* ---- Более крупные точки касания на карточках и чипах ---- */ .resource-card, .topic-chip, .checklist li { padding: 18px 20px; } .tag-chip { padding: 6px 12px; font-size: 0.78rem; } .btn-primary { width: 100%; justify-content: center; padding: 16px 26px; } } @media (max-width: 480px) { .nav { padding: 12px 16px; } .nav-logo { font-size: 0.95rem; } main { padding: 0 16px; } .resources-label { font-size: 0.72rem; } .resource-card { padding: 14px 16px; } .resource-name { font-size: 1.05rem; } .resource-desc { font-size: 0.82rem; } .footer-inner { justify-content: center; text-align: center; } }