/* AIZED · Разработки — витрина dev-проектов. Дом-стиль AIdentica: мрамор, изумруд-акцент, золото ТОЛЬКО линиями, Playfair + Manrope. Две темы: светлая (песочный мрамор) и тёмная (сланцевый мрамор). Тема — в data-theme на . */ :root, [data-theme="light"] { --bg1: #ece5d7; --bg2: #e3dac8; --hi: rgba(255,255,255,.55); --glow: rgba(18,104,79,.05); --ink: #24282a; --ink-soft: #545a5b; --emerald: #12684f; --emerald-dk: #0d4a39; --gold: #b7962f; --gold-soft: #cbb15e; --card: #f7f3ea; --line: rgba(36,40,42,.10); --shadow: 0 1px 2px rgba(36,40,42,.05), 0 10px 30px rgba(36,40,42,.06); --shadow-hover: 0 2px 4px rgba(36,40,42,.06), 0 18px 40px rgba(36,40,42,.10); --badge-dev: #0d4a39; --badge-dev-bd: rgba(18,104,79,.35); --badge-dev-bg: rgba(18,104,79,.06); --badge-live: #7a5c00; --badge-live-bd: rgba(183,150,47,.45); --badge-live-bg: rgba(183,150,47,.10); --toggle-bd: rgba(36,40,42,.18); } [data-theme="dark"] { --bg1: #16191b; --bg2: #0f1214; --hi: rgba(255,255,255,.03); --glow: rgba(18,104,79,.16); --ink: #e9e3d5; --ink-soft: #9aa0a0; --emerald: #3ea587; --emerald-dk: #8fd3c0; --gold: #c8a94a; --gold-soft: #d8c07a; --card: #1c2123; --line: rgba(233,227,213,.10); --shadow: 0 1px 2px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.38); --shadow-hover: 0 2px 6px rgba(0,0,0,.35), 0 20px 46px rgba(0,0,0,.48); --badge-dev: #8fd3c0; --badge-dev-bd: rgba(62,165,135,.40); --badge-dev-bg: rgba(62,165,135,.10); --badge-live: #d8c07a; --badge-live-bd: rgba(200,169,74,.40); --badge-live-bg: rgba(200,169,74,.10); --toggle-bd: rgba(233,227,213,.20); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Manrope', system-ui, sans-serif; color: var(--ink); background: radial-gradient(1200px 600px at 15% -10%, var(--hi), transparent 60%), radial-gradient(900px 500px at 100% 0%, var(--glow), transparent 55%), linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%); background-attachment: fixed; min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: color .25s ease, background-color .25s ease; } .wrap { max-width: 960px; margin: 0 auto; padding: 72px 24px 96px; } /* ---- Переключатель темы ---- */ .theme-toggle { position: fixed; top: 20px; right: 20px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--toggle-bd); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease; } .theme-toggle:hover { transform: rotate(-12deg); border-color: var(--gold); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .moon { display: none; } .theme-toggle .sun { display: block; } [data-theme="dark"] .theme-toggle .moon { display: block; } [data-theme="dark"] .theme-toggle .sun { display: none; } /* ---- Шапка ---- */ header { margin-bottom: 48px; } .wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 5vw, 46px); font-weight: 700; letter-spacing: .5px; margin: 0; color: var(--ink); } .wordmark .dot { color: var(--emerald); } .rule { height: 1px; width: 88px; margin: 20px 0 18px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%); } .subtitle { color: var(--ink-soft); font-size: 16px; max-width: 620px; margin: 0; } /* ---- Сетка карточек ---- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 178px; transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease; } .card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, transparent 70%); opacity: .7; } .card.link:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .badge { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; margin-bottom: 14px; } .badge.in-dev { color: var(--badge-dev); border-color: var(--badge-dev-bd); background: var(--badge-dev-bg); } .badge.live { color: var(--badge-live); border-color: var(--badge-live-bd); background: var(--badge-live-bg); } .badge.soon { color: var(--ink-soft); border-color: var(--line); background: transparent; } .card h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 22px; margin: 0 0 8px; } .card p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 18px; } .card .go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--emerald); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .card .go.disabled { color: var(--ink-soft); opacity: .65; } .card .go .arrow { transition: transform .18s ease; } .card.link:hover .go .arrow { transform: translateX(4px); } a.card { text-decoration: none; color: inherit; } /* ---- Подвал ---- */ footer { margin-top: 56px; color: var(--ink-soft); font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; } .empty { color: var(--ink-soft); font-style: italic; }