/* ===== ПЕРЕМЕННЫЕ (цвета) ===== */ /* Тут мы задаём цвета один раз, а используем везде. Удобно менять! */ :root { --bg: #ffffff; --bg-alt: #f3f5fa; --card: #ffffff; --text: #14161c; --text-soft: #5a6072; --border: #e4e7ef; --accent: #6c5ce7; --accent-2: #00d2c6; --shadow: 0 10px 30px rgba(20, 22, 28, 0.08); } /* Тёмная тема — включается атрибутом data-theme="dark" на */ [data-theme="dark"] { --bg: #0e1016; --bg-alt: #141824; --card: #181c2a; --text: #f2f4fa; --text-soft: #9aa3bd; --border: #262c3d; --accent: #7c6cff; --accent-2: #00e6d6; --shadow: 0 14px 40px rgba(0, 0, 0, 0.45); } /* ===== БАЗА ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Manrope", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; transition: background 0.3s, color 0.3s; } .container { width: min(1140px, 100% - 40px); margin-inline: auto; } a { text-decoration: none; color: inherit; } /* ===== ШАПКА ===== */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; } .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.25rem; } .logo__chip { font-size: 1.4rem; } .logo__accent { color: var(--accent); } .nav { display: flex; gap: 22px; } .nav a { color: var(--text-soft); font-weight: 500; transition: color 0.2s; } .nav a:hover { color: var(--accent); } .header__tools { display: flex; align-items: center; gap: 12px; } /* Переключатель языка */ .lang { display: flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .lang__btn { border: none; background: none; color: var(--text-soft); font-weight: 700; font-size: 0.8rem; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: all 0.2s; } .lang__btn.is-active { background: var(--accent); color: #fff; } /* Кнопка темы */ .theme-toggle, .burger { border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; } .burger { display: none; } /* ===== ГЛАВНЫЙ ЭКРАН ===== */ .hero { padding: 90px 0 70px; text-align: center; background: radial-gradient(600px circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); } .hero__badge { display: inline-block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; font-size: 0.9rem; color: var(--text-soft); margin-bottom: 22px; } .hero__title { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; line-height: 1.1; margin-bottom: 18px; background: linear-gradient(120deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__text { max-width: 620px; margin: 0 auto 32px; color: var(--text-soft); font-size: 1.1rem; } .hero__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ===== КНОПКИ ===== */ .btn { display: inline-block; padding: 13px 26px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s; } .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); } .btn--ghost { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); } .btn:hover { transform: translateY(-2px); } /* Заблокированная кнопка (например, товара нет в наличии) */ .btn:disabled, .btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* ===== СЕКЦИИ ===== */ .section { padding: 70px 0; } .section--alt { background: var(--bg-alt); } .section__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; text-align: center; } .section__subtitle { text-align: center; color: var(--text-soft); margin: 8px 0 40px; } /* ===== СЕТКА КАРТОЧЕК ===== */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } /* ===== КАРТОЧКА ===== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); transition: transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); border-color: var(--accent); } .card__emoji { font-size: 2.6rem; margin-bottom: 14px; } .card__title { font-size: 1.25rem; margin-bottom: 8px; } .card__text { color: var(--text-soft); margin-bottom: 20px; flex-grow: 1; } .card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card__link { color: var(--accent); font-weight: 700; } .card--soon { border-style: dashed; opacity: 0.85; } /* Метки-теги (уровень сложности и т.п.) */ .tag { font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2); } .tag--medium { background: color-mix(in srgb, #ffb020 25%, transparent); color: #ffb020; } .tag--hard { background: color-mix(in srgb, #ff5c7a 25%, transparent); color: #ff5c7a; } .tag--muted { background: var(--bg-alt); color: var(--text-soft); } /* ===== ПОДВАЛ ===== */ .footer { border-top: 1px solid var(--border); padding: 30px 0; } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer__text { color: var(--text-soft); font-size: 0.9rem; } /* ===== ТЕЛЕФОН ===== */ @media (max-width: 760px) { .burger { display: block; } .nav { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--border); padding: 14px 20px; gap: 16px; display: none; } .nav.is-open { display: flex; } } /* ===== ПЛАВНАЯ ПРОКРУТКА ===== */ /* При клике по ссылке в меню сайт мягко "переносит" к разделу */ html { scroll-behavior: smooth; } /* Отступ сверху, чтобы заголовок раздела не прятался под липкой шапкой */ section[id] { scroll-margin-top: 80px; } /* ===== ОБЛОЖКА КАРТОЧКИ ===== */ .card__media { position: relative; /* чтобы фото легло поверх градиента */ overflow: hidden; height: 150px; border-radius: 14px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.18); } /* Эмодзи-обложка (показывается, если фото нет) */ .card__emoji { font-size: 3.8rem; } /* Настоящее фото платы — закрывает собой эмодзи */ .card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; } /* Короткие характеристики платы */ .card__specs { font-size: 0.82rem; color: var(--text-soft); margin-bottom: 8px; font-weight: 600; } /* Цветные градиенты для обложек */ .g-red { background: linear-gradient(135deg, #ff7a7a, #e94f6a); } .g-violet { background: linear-gradient(135deg, #8a7bff, #5a4bd6); } .g-blue { background: linear-gradient(135deg, #57a9ff, #2d7ff0); } .g-cyan { background: linear-gradient(135deg, #2ce6da, #00aebf); } .g-teal { background: linear-gradient(135deg, #34d8c2, #0f9e96); } .g-green { background: linear-gradient(135deg, #4be08f, #14a866); } /* ===== ТАБЛИЦА СРАВНЕНИЯ ===== */ .compare-wrap { overflow-x: auto; /* на телефоне таблицу можно листать вбок */ border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); } .compare { width: 100%; border-collapse: collapse; min-width: 480px; } .compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); } .compare thead th { color: var(--text-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .compare tbody tr:last-child td { border-bottom: none; } .compare tbody tr:hover { background: var(--bg-alt); } .compare__name { font-weight: 700; } /* ===== НОВОСТИ (заглушка "скоро") ===== */ .news-soon { text-align: center; max-width: 560px; margin: 0 auto; background: var(--card); border: 1px dashed var(--border); border-radius: 18px; padding: 40px 26px; box-shadow: var(--shadow); } .news-soon__emoji { font-size: 3rem; margin-bottom: 12px; } /* ===== ПРИЗЫВ В ГАЛЕРЕЕ ===== */ .gallery-cta { text-align: center; margin-top: 34px; font-weight: 700; font-size: 1.1rem; color: var(--accent); } /* ===== МИНИ-ИГРА «ПАМЯТЬ» ===== */ .game { max-width: 520px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); } .game__title { font-size: 1.25rem; text-align: center; } .game__desc { text-align: center; margin-top: 6px; } .game__bar { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 16px; font-weight: 700; } .game__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .game__card { aspect-ratio: 1; border: none; border-radius: 14px; background: var(--accent); font-size: 2rem; color: transparent; /* лицо карточки скрыто, пока закрыта */ cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.2s; } .game__card:hover { transform: translateY(-2px); } .game__card.flipped { background: var(--bg-alt); color: initial; cursor: default; } .game__card.matched { background: color-mix(in srgb, var(--accent-2) 30%, transparent); color: initial; cursor: default; } .game__status { text-align: center; margin-top: 16px; min-height: 1.5em; font-weight: 800; font-size: 1.15rem; color: var(--accent-2); } /* ===== ИГРА «ПОЙМАЙ ЧИП» ===== */ .catch__area { position: relative; height: 280px; background: var(--bg-alt); border-radius: 14px; overflow: hidden; } .catch__chip { position: absolute; border: none; background: none; font-size: 2.1rem; cursor: pointer; padding: 4px; transition: transform 0.1s; } .catch__chip:hover { transform: scale(1.25); } /* ===== СЧЁТЧИКИ НА ГЛАВНОЙ ===== */ .hero__stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 44px; } .hero__stats div { display: flex; flex-direction: column; align-items: center; } .hero__stats b { font-size: 1.9rem; color: var(--accent); line-height: 1; } .hero__stats span { font-size: 0.85rem; color: var(--text-soft); margin-top: 4px; } /* ===== КНОПКА «КУПИТЬ» ===== */ .btn--sm { display: block; width: 100%; text-align: center; padding: 10px 16px; font-size: 0.92rem; margin-top: 14px; } /* ===== ПОДБЕРИ ПЛАТУ ===== */ .picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; } .picker__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--text); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: transform 0.15s, border-color 0.2s; } .picker__btn:hover { transform: translateY(-4px); border-color: var(--accent); } .picker__btn.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .picker__emoji { font-size: 2rem; } .picker__result { text-align: center; margin-top: 26px; min-height: 1.6em; font-weight: 800; font-size: 1.25rem; color: var(--accent); } /* ===== СЛОВАРИК ===== */ .glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .glossary__item { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); } .glossary__emoji { font-size: 1.8rem; flex-shrink: 0; } .glossary__term { font-size: 1.1rem; margin-bottom: 4px; } .glossary__def { color: var(--text-soft); font-size: 0.95rem; } /* ===== КНОПКА «НАВЕРХ» ===== */ .to-top { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.3rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.15s; z-index: 60; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } .to-top.show { opacity: 1; pointer-events: auto; } .to-top:hover { transform: translateY(-3px); }