/* ============================================================ DESIGN-TOKENIT Kaksi täysin eri "muotokieltä" saman luokkarajapinnan takana: - Oletus (BOLD): rohkea/neobrutalismi - paksut mustat reunat, kovat offset-varjot, terävät kulmat, Archivo Black + Space Mono. - [data-skin="minimal"]: minimalistinen pro-dashboard - ohuet harmaat viivat, ei varjoja, väri vain datassa/statuksessa, Public Sans + JetBrains Mono. Vaihto tapahtuu -attribuutilla (ks. nav.js), joten HTML/JS-puolen ei tarvitse tietää kummasta skinistä on kyse - kaikki sama .card/.glass/jne-luokkarajapinta toimii molemmilla. ============================================================ */ :root { /* Väripaletti (sama molemmissa skineissä - identiteetti pysyy, muotokieli vaihtuu) */ --bg-color: #0a0a0c; --accent-color: #4f46e5; --accent-glow: rgba(79, 70, 229, 0.3); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: var(--text-secondary); /* alias - joissain vanhoissa luokissa käytetty nimeä --text-muted */ --primary: var(--accent-color); /* alias - sama syy */ --success: #10b981; --error: #ef4444; /* Pintakerrokset (korvaa aiemmat kirjaimelliset rgba(255,255,255,0.0X)-arvot, jotta koko sivusto reagoi skin-vaihtoon yhdestä paikasta) */ --surface-1: rgba(255, 255, 255, 0.02); --surface-2: rgba(255, 255, 255, 0.035); --surface-3: rgba(255, 255, 255, 0.05); --surface-4: rgba(255, 255, 255, 0.08); --surface-5: rgba(255, 255, 255, 0.12); --card-bg: #16181c; --card-border: #000000; /* ---- BOLD (oletus): rohkea / neobrutalismi ---- */ --heading-font: 'Archivo Black', 'Outfit', sans-serif; --body-font: 'Space Mono', 'Outfit', monospace; --label-transform: uppercase; --label-tracking: 0.04em; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 4px; --border-width: 3px; --border-width-inner: 2px; --card-shadow: 6px 6px 0 var(--card-border); --card-shadow-hover: 9px 9px 0 var(--card-border); --chip-shadow: 3px 3px 0 var(--card-border); --hover-lift: translate(-3px, -3px); --accent-shadow: 4px 4px 0 var(--card-border); --accent-shadow-hover: 6px 6px 0 var(--card-border); } /* ---- MINIMAL: pro-dashboard, ohuet viivat, ei varjoja ---- */ :root[data-skin="minimal"] { --card-bg: #10141a; --card-border: #232935; --heading-font: 'Public Sans', sans-serif; --body-font: 'Public Sans', sans-serif; --label-transform: none; --label-tracking: normal; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 6px; --border-width: 1px; --border-width-inner: 1px; --card-shadow: none; --card-shadow-hover: none; --chip-shadow: none; --hover-lift: none; --accent-shadow: none; --accent-shadow-hover: none; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--body-font); background-color: var(--bg-color); background-attachment: fixed; /* teematausta pysyy paikallaan vieritettäessä pitkillä sivuilla */ color: var(--text-primary); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } /* Background Blobs - pysyvät molemmissa skineissä, tuovat pelikohtaisen värivihjeen taustalle */ .background-blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(80px); } .blob { position: absolute; border-radius: 50%; opacity: 0.35; animation: move 20s infinite alternate; } @media (prefers-reduced-motion: reduce) { .blob { animation: none; } } .blob-1 { width: 500px; height: 500px; background: var(--blob-1, var(--accent-color)); top: -100px; right: -100px; } .blob-2 { width: 400px; height: 400px; background: var(--blob-2, #7c3aed); bottom: -50px; left: -50px; animation-delay: -5s; } /* ------------------------ Pelikohtaiset teemat Body saa luokan esim. "theme-dayz" - vaihtaa blobien värit ja lisää hienovaraisen, pelin tyyliin sopivan taustakuvion. Kuvio piirtyy bodyn omana taustana, joten se jää aina blobien (z-index:-1) alle automaattisesti. Riippumaton skin-valinnasta (Bold/Minimal) - sama peliväritys molemmissa. ------------------------ */ /* 7 Days to Die - rappeutunut, ruosteinen selviytymismaisema */ body.theme-7dtd { --blob-1: #c2703a; --blob-2: #7f1d1d; background-image: repeating-linear-gradient(135deg, rgba(194, 112, 58, 0.05) 0 2px, transparent 2px 60px), radial-gradient(ellipse at 50% 100%, rgba(127, 29, 29, 0.15), transparent 60%); } /* DayZ - sumuinen, sotilaallinen metsä */ body.theme-dayz { --blob-1: #4d7c0f; --blob-2: #14532d; background-image: radial-gradient(ellipse 60% 40% at 20% 15%, rgba(148, 163, 100, 0.08), transparent 60%), radial-gradient(ellipse 50% 35% at 85% 75%, rgba(77, 124, 15, 0.10), transparent 60%), linear-gradient(180deg, rgba(20, 83, 45, 0.08), transparent 40%); } /* Farming Simulator 25 - lämmin kesäpelto */ body.theme-fs25 { --blob-1: #ca8a04; --blob-2: #16a34a; background-image: repeating-linear-gradient(0deg, rgba(202, 138, 4, 0.04) 0 1px, transparent 1px 24px), radial-gradient(ellipse at 80% 0%, rgba(202, 138, 4, 0.12), transparent 55%); } /* Koneet - laitteiston valvonta, tekninen tunnelma */ body.theme-koneet { --blob-1: #0891b2; --blob-2: #1e40af; background-image: repeating-linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(8, 145, 178, 0.05) 0 1px, transparent 1px 40px); } /* Subsistence - trooppinen saari, aavikkoselviytyminen */ body.theme-subsistence { --blob-1: #0ea5e9; --blob-2: #d97706; background-image: radial-gradient(ellipse 55% 40% at 15% 10%, rgba(14, 165, 233, 0.12), transparent 60%), radial-gradient(ellipse 50% 35% at 90% 85%, rgba(217, 119, 6, 0.10), transparent 60%); } @keyframes move { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, 100px) scale(1.1); } } .container { width: 95%; max-width: 1200px; padding: 2rem; z-index: 1; } /* Navigation Bar (perusluokat - nav.js:n oma