/* ══════════════════════════════════════════════════════════════════════ Shaurma Launcher — дизайн-токени сайту Палітра узгоджена з реальним UI лаунчера (style.css: --bg-app, --orange градієнт #ff8a00→#ff5e00, теми dark/light/oled) — сайт і застосунок мають виглядати як одна річ, а не як лаунчер + окремо намальований сайт. ══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } :root { /* base = темна тема — ідентична палітрі реального лаунчера (style.css) */ --bg-app: #0f0f0f; --bg-raised: #161616; --bg-panel: #1a1a1a; --bg-card: #1e1e1e; --bg-input: #141414; --bg-input-hi: #282828; --border: rgba(255,255,255,.06); --border-hi: rgba(255,255,255,.10); --hover: rgba(255,255,255,.05); --hover-strong: rgba(255,255,255,.10); --text: #ffffff; --text-mute: #a0a0a0; --text-dim: #666666; /* accent = orange (дефолтний акцент лаунчера) */ --accent: #ff8a00; --accent-2: #ff5e00; --accent-rgb: 255, 138, 0; --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2)); /* збережені symlink-и для зворотної сумісності */ --orange: var(--accent); --orange-2: var(--accent-2); --orange-rgb: var(--accent-rgb); --violet: #7b4dff; --blue: #3b82f6; --yellow: #f59e0b; --green: #10b981; --red: #ef4444; /* радіуси — ідентичні лаунчеру, не «веб-студійні» 18/28 */ --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px rgba(0,0,0,.4); --container: 1180px; color-scheme: dark; } /* ═══ Акцентні кольори ═══ Змінюються через data-accent="" на . Використовуються в CSS через --accent, --accent-2, --accent-grad. */ html[data-accent="purple"] { --accent: #a855f7; --accent-2: #7c3aed; --accent-rgb: 168, 85, 247; } html[data-accent="green"] { --accent: #22c55e; --accent-2: #16a34a; --accent-rgb: 34, 197, 94; } html[data-accent="blue"] { --accent: #3b82f6; --accent-2: #2563eb; --accent-rgb: 59, 130, 246; } html[data-accent="pink"] { --accent: #ec4899; --accent-2: #db2777; --accent-rgb: 236, 72, 153; } html[data-accent="red"] { --accent: #ef4444; --accent-2: #dc2626; --accent-rgb: 239, 68, 68; } html[data-accent="cyan"] { --accent: #06b6d4; --accent-2: #0891b2; --accent-rgb: 6, 182, 212; } html[data-accent="yellow"] { --accent: #eab308; --accent-2: #ca8a04; --accent-rgb: 234, 179, 8; } /* orange = дефолт, перезаписуємо сімплекс для data-accent="orange" */ html[data-accent="orange"] { --accent: #ff8a00; --accent-2: #ff5e00; --accent-rgb: 255, 138, 0; } html[data-theme="light"] { --bg-app: #f3f4f6; --bg-raised: #ffffff; --bg-panel: #fafafa; --bg-card: #ffffff; --bg-input: #eceef1; --bg-input-hi: #d9dce1; --border: rgba(0,0,0,.09); --border-hi: rgba(0,0,0,.16); --hover: rgba(0,0,0,.05); --hover-strong: rgba(0,0,0,.09); --text: #1a1a1a; --text-mute: #5c6570; --text-dim: #9aa1ab; --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px rgba(20,20,30,.07); color-scheme: light; } html[data-theme="oled"] { --bg-app: #000000; --bg-raised: #000000; --bg-panel: #0a0a0a; --bg-card: #0c0c0c; --bg-input: #0a0a0a; --bg-input-hi: #171717; --border: rgba(255,255,255,.08); --border-hi: rgba(255,255,255,.14); --hover: rgba(255,255,255,.06); --hover-strong: rgba(255,255,255,.11); --text: #f5f5f5; --text-mute: #9a9a9a; --text-dim: #5c5c5c; --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px rgba(0,0,0,.6); color-scheme: dark; } body { background: var(--bg-app); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; line-height: 1.55; } /* Плавний, але не надокучливий перехід між темами */ body, .card, .top, .btn, .field, header, footer, .side-nav a { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } a { color: inherit; } ::selection { background: rgba(var(--accent-rgb), .32); } code, pre, .mono { font-family: var(--font-mono); } .icon { display: block; flex: none; } .icon-wrap { display: inline-flex; align-items: center; justify-content: center; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }