/* ================================================ shared.css — mestaritukki.com One file to rule all pages. Edit here → changes appear everywhere. HOW THIS FILE IS ORGANISED ────────────────────────── 1. Design Tokens ← 99% of visual changes happen here 2. Reset 3. Base body 4. Canvas layers (matrix / trail / content z-index stack) 5. Burger / Nav menu 6. Mobile overrides QUICK GUIDE: "I want to change the colour scheme" ────────────────────────────────────────────────── The six theme colours (purple, red, green, blue, cyan, gold) live in shared.js → THEMES object. Each theme sets CSS vars on :root at runtime. The fallback values below are only used before shared.js loads (< 50 ms). Change the fallback here if you want a different default flash colour. QUICK GUIDE: "I want to change the background colour" ────────────────────────────────────────────────────── Change --bg. Also update bgColor in each page's initMatrix() call so the matrix fill colour matches. QUICK GUIDE: "I want to change card / panel colours" ───────────────────────────────────────────────────── Change --card and --card-hover. These are used by all gallery cards, app cards, contact form backgrounds, etc. QUICK GUIDE: "I want to change the font" ───────────────────────────────────────── Change the font-family stack in the "Base body" section below. If adding a Google Font, add the to every page's . ================================================ */ /* ════════════════════════════════════════════════ 1. DESIGN TOKENS ════════════════════════════════════════════════ These CSS custom properties are the single source of truth for all colours used across the site. Change a value here and it updates everywhere that token is referenced. NOTE: --accent, --accent-hover, and --border are overwritten at runtime by shared.js → setTheme() based on the user's chosen theme. The values below are the FALLBACK (purple theme) shown for the fraction of a second before JS executes. ════════════════════════════════════════════════ */ :root { /* ── Page background ────────────────────────────────────────── Deep near-black with a faint violet tint. Also update initMatrix({ bgColor: ... }) in each page script if you change this, so the matrix rain background matches. */ --bg: #050007; /* ── Card / panel backgrounds ──────────────────────────────── Used by gallery cards, app cards, form containers, etc. --card-hover is applied on :hover for a subtle lift effect. */ --card: #16171d; --card-hover: #1d1e26; /* ── Typography ─────────────────────────────────────────────── --text : primary readable text (near-white) --muted : secondary / placeholder text (grey) */ --text: #f5f3ff; --muted: #9197a6; /* ── Accent colours (overwritten at runtime by shared.js) ───── These are the purple-theme defaults. --accent : primary interactive colour (buttons, links, highlights) --accent-hover : lighter shade for hover states and gradients --border : semi-transparent accent used for borders/dividers */ --accent: #9b5cff; --accent-hover:#c4b5fd; --border: rgba(155, 92, 255, 0.15); } /* ════════════════════════════════════════════════ 2. RESET ════════════════════════════════════════════════ Removes browser default margin/padding and switches all elements to border-box sizing (width includes padding and border). Don't change this unless you know what you're doing. ════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ════════════════════════════════════════════════ 3. BASE BODY ════════════════════════════════════════════════ Applied to inner scrollable pages (gallery, apps, contact, etc.). The home page overrides this with position:fixed + overflow:hidden in its own