/* ═══════════════════════════════════════════════════════════════ theme.css — shared design tokens for all sinitpower pages Edit the :root block to change the default color scheme. Theme variants are applied via [data-theme="..."] on . ═══════════════════════════════════════════════════════════════ */ /* ── Default: Purple / Cyan (The Classic) ───────────────────── */ :root { --bg: #f4f5f9; --bg2: #eaedf4; --surface: #ffffff; --surface2: #eef1f8; --bg3: var(--surface); --accent: #5a3de8; --accent2: #0099cc; --text: #1a1a2e; --muted: #6b6b80; --text-muted: #6b6b80; --content-w: 800px; --border: rgba(0,0,0,0.08); --radius: 12px; --transition: 0.25s ease; --trans: 0.25s ease; --nav-w: 240px; --hero-glow: rgba(90,61,232,0.12); } /* ═══════════════════════════════════════════════════════════════ Shared components — used across all pages ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.2; } p { line-height: 1.7; margin-bottom: 1.25rem; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.25rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all var(--transition); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent); } .btn-outline { background: transparent; color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); } .btn-outline:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); text-decoration: none; } /* ── Status badges ───────────────────────────────────────────── */ .status-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 100px; border: 1px solid var(--border); } .status-active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .status-internal { background: var(--bg2); color: var(--muted); border-color: var(--border); } /* ── Power Grid: Modern Enterprise Dark (High Tech) ─────────── */ [data-theme="power-grid"] { --bg: #0a0b10; --bg2: #12141d; --surface: #1a1d26; --surface2: #242835; --bg3: #1a1d26; --accent: #00e8ff; --accent2: #7000ff; --text: #f0f2f5; --muted: #8a92a6; --text-muted: #8a92a6; --border: rgba(0, 232, 255, 0.15); --hero-glow: rgba(0,232,255,0.10); } /* ── Earth Tech: Sustainable Energy (Organic/Premium) ───────── */ [data-theme="earth-tech"] { --bg: #f9f8f4; --bg2: #f0ede4; --surface: #ffffff; --surface2: #e8e4d8; --bg3: #ffffff; --accent: #4a6741; --accent2: #c18a63; --text: #2d2926; --muted: #797670; --text-muted: #797670; --border: rgba(74, 103, 65, 0.12); --hero-glow: rgba(74,103,65,0.10); } /* ── Amber Glow: High Performance (Hardware/Alert) ──────────── */ [data-theme="amber-glow"] { --bg: #0f0d0a; --bg2: #1a1712; --surface: #241f19; --surface2: #2d271f; --bg3: #241f19; --accent: #ffb300; --accent2: #ff6d00; --text: #fffbf2; --muted: #a89f94; --text-muted: #a89f94; --border: rgba(255, 179, 0, 0.2); --hero-glow: rgba(255,179,0,0.12); } /* ── Ocean: Blue / Teal ─────────────────────────────────────── */ [data-theme="ocean"] { --bg: #f0f6ff; --bg2: #e4effc; --surface: #ffffff; --surface2:#ddeeff; --bg3: #ffffff; --accent: #2563eb; --accent2: #06b6d4; --text: #0f1e3d; --muted: #5a7090; --text-muted: #5a7090; --border: rgba(37,99,235,0.10); --hero-glow: rgba(37,99,235,0.12); } /* ── Forest: Green / Emerald ────────────────────────────────── */ [data-theme="forest"] { --bg: #f2f8f4; --bg2: #e4f2e9; --surface: #ffffff; --surface2:#d8ede0; --bg3: #ffffff; --accent: #16a34a; --accent2: #059669; --text: #0d2116; --muted: #4d7a5a; --text-muted: #4d7a5a; --border: rgba(22,163,74,0.10); --hero-glow: rgba(22,163,74,0.12); } /* ── Sunset: Orange / Rose ──────────────────────────────────── */ [data-theme="sunset"] { --bg: #fff7f2; --bg2: #ffeee5; --surface: #ffffff; --surface2:#ffe0d0; --bg3: #ffffff; --accent: #ea580c; --accent2: #e11d48; --text: #2d0f00; --muted: #7a4030; --text-muted: #7a4030; --border: rgba(234,88,12,0.10); --hero-glow: rgba(234,88,12,0.12); } /* ── Mono: Black / White — Apple-inspired ───────────────────── */ [data-theme="mono"] { --bg: #f5f5f7; --bg2: #e8e8ed; --surface: #ffffff; --surface2: #f0f0f5; --bg3: #ffffff; --accent: #1d1d1f; --accent2: #515154; --text: #1d1d1f; --muted: #6e6e73; --text-muted: #6e6e73; --border: rgba(0,0,0,0.10); --hero-glow: rgba(0,0,0,0.06); } /* ── Dark: Purple / Cyan on dark ────────────────────────────── */ [data-theme="dark"] { --bg: #0f0f1a; --bg2: #16162a; --surface: #1e1e32; --surface2:#252540; --bg3: #1e1e32; --accent: #7c5de8; --accent2: #00bbdd; --text: #e8e8f5; --muted: #8888aa; --text-muted: #8888aa; --border: rgba(255,255,255,0.08); --hero-glow: rgba(124,93,232,0.15); } /* ── Titanium: Industrial High-Contrast ────────────────────── */ [data-theme="titanium"] { --bg: #ffffff; /* Pure White Base */ --bg2: #f7f7f8; /* Light Gray Sidebar/Nav */ --surface: #ffffff; /* Elevated Cards */ --surface2: #f1f1f2; /* Deepest neutral for inputs */ --bg3: #ffffff; --accent: #000000; /* High-contrast Black */ --accent2: #525252; --text: #000000; --muted: #71717a; --text-muted: #71717a; --border: #e4e4e7; /* Solid, visible hairline border */ --hero-glow: rgba(0,0,0,0.05); } /* ── Ghost: The "Soft-Black" Minimalist ────────────────────── */ [data-theme="ghost"] { --bg: #f9fafb; /* Off-white Base */ --bg2: #ffffff; /* White contrast areas */ --surface: #ffffff; --surface2: #f3f4f6; --bg3: #ffffff; --accent: #0066cc; /* Single point of color focus */ --accent2: #111827; --text: #111827; --muted: #6b7280; --text-muted: #6b7280; --border: #d1d5db; /* Slightly darker, crisp borders */ --hero-glow: rgba(0,102,204,0.10); } /* ── Apple Light: The "Silver" Look ────────────────────────── */ [data-theme="apple-light"] { --bg: #ffffff; /* Pure white base */ --bg2: #f5f5f7; /* The classic "System Gray" for sidebars */ --surface: #ffffff; --surface2: #f5f5f7; --bg3: #ffffff; --accent: #000000; /* High-contrast black for text/icons */ --accent2: #86868b; /* Secondary gray */ --text: #1d1d1f; /* Apple's specific "Near-Black" text color */ --muted: #86868b; --text-muted: #86868b; --border: #d2d2d7; /* Precise, thin hairline border */ --hero-glow: rgba(0,0,0,0.04); } /* ── Apple Dark: The "Space Gray" Look ─────────────────────── */ [data-theme="apple-dark"] { --bg: #000000; /* Pure black background (OLED optimized) */ --bg2: #1d1d1f; /* Elevated surface gray */ --surface: #1d1d1f; --surface2: #2d2d2f; --bg3: #1d1d1f; --accent: #ffffff; /* Pure white for contrast */ --accent2: #a1a1a6; --text: #f5f5f7; /* Soft white text to reduce eye strain */ --muted: #86868b; --text-muted: #86868b; --border: #424245; /* Subtle dark border */ --hero-glow: rgba(255,255,255,0.05); }