/* ============================================================ mio-theme.css — 小澪儀表板全站統一風格 以首頁 index.html 的設計語言為基準的共用覆蓋層。 注入各頁 ： ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap'); :root { --mio-bg0: #0B0D1A; --mio-bg1: #10132A; --mio-ink: #EEF0FB; --mio-muted: rgba(238,240,251,0.62); --mio-faint: rgba(238,240,251,0.38); --mio-line: rgba(255,255,255,0.09); --mio-card: rgba(255,255,255,0.045); --mio-card-hi: rgba(255,255,255,0.075); --mio-indigo: #7C83FF; --mio-violet: #B692FF; --mio-rose: #FF7EB6; --mio-amber: #FFC46B; --mio-cyan: #5EE7E0; --mio-green: #6EE7A8; --mio-blue: #6BB8FF; --mio-grad: linear-gradient(100deg, #7C83FF 0%, #B692FF 40%, #FF7EB6 90%); } /* ---- base ---- */ html { scroll-behavior: smooth; } body { font-family: 'Sora', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; background: var(--mio-bg0) !important; color: var(--mio-ink); -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh; } /* layered ambient aurora — attached behind page content */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 45% at 18% 8%, rgba(124,131,255,0.28), transparent 62%), radial-gradient(55% 45% at 88% 6%, rgba(255,126,182,0.18), transparent 60%), radial-gradient(70% 55% at 50% 108%, rgba(94,231,224,0.13), transparent 62%), linear-gradient(180deg, #0B0D1A 0%, #0D1024 45%, #0B0D1A 100%); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%); mask: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%); } /* ---- headings ---- */ h1, h2, h3, h4, h5, h6 { font-family: 'Sora', 'Noto Sans TC', sans-serif; letter-spacing: -0.3px; } /* ---- links ---- */ a { color: var(--mio-indigo); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--mio-violet); } /* ---- selection ---- */ ::selection { background: rgba(124,131,255,0.35); color: #fff; } /* ---- scrollbar ---- */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(124,131,255,0.5); background-clip: padding-box; } /* ---- shared back-to-home pill (opt-in via .mio-home) ---- */ .mio-home { position: fixed; top: 16px; left: 16px; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-family: 'Sora','Noto Sans TC',sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--mio-ink); text-decoration: none; background: rgba(255,255,255,0.05); border: 1px solid var(--mio-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s, background 0.25s; } .mio-home:hover { transform: translateY(-2px); border-color: rgba(124,131,255,0.5); background: rgba(124,131,255,0.12); color: var(--mio-ink); } .mio-home .ico { font-size: 0.95rem; } /* ---- reusable helpers (opt-in) ---- */ .mio-glass { background: var(--mio-card); border: 1px solid var(--mio-line); border-radius: 20px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .mio-grad-text { background: var(--mio-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }