/* ============================================ CozyMascots — global.css 8 themes — player picks, localStorage saves Change theme by setting data-theme on ============================================ */ /* ── Default (Kawaii Pink) ── */ :root { --color-primary: #E91E8C; --color-primary-dark: #C2185B; --color-primary-light:#FCE4EC; --color-accent: #FF9800; --color-bg: #FFF0F7; --color-surface: #FFFFFF; --color-surface-2: #FFE4F2; --color-surface-3: #FFF0F7; --color-border: rgba(233,30,140,0.15); --color-border-hover: rgba(233,30,140,0.4); --color-text: #2D1B2E; --color-text-muted: rgba(45,27,46,0.55); --color-text-dim: rgba(45,27,46,0.3); --color-score: #C2185B; --color-success: #4CAF50; --color-success-bg: rgba(76,175,80,0.1); --shadow-glow: 0 0 20px rgba(233,30,140,0.15); --shadow-card: 0 4px 20px rgba(233,30,140,0.08); --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif; --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px; --radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px; --transition:0.15s ease; } /* ── Mint Cozy ── */ [data-theme="mint"] { --color-primary: #1D9E75; --color-primary-dark: #0F6E56; --color-primary-light:#E1F7EE; --color-bg: #F0FBF6; --color-surface: #FFFFFF; --color-surface-2: #E1F7EE; --color-surface-3: #F0FBF6; --color-border: rgba(29,158,117,0.15); --color-border-hover: rgba(29,158,117,0.4); --color-text: #0D2B1E; --color-text-muted: rgba(13,43,30,0.55); --color-text-dim: rgba(13,43,30,0.3); --color-score: #0F6E56; --shadow-glow: 0 0 20px rgba(29,158,117,0.15); --shadow-card: 0 4px 20px rgba(29,158,117,0.08); } /* ── Lavender Dream ── */ [data-theme="lavender"] { --color-primary: #7C3AED; --color-primary-dark: #5B21B6; --color-primary-light:#EDE9FE; --color-bg: #F5F3FF; --color-surface: #FFFFFF; --color-surface-2: #EDE9FE; --color-surface-3: #F5F3FF; --color-border: rgba(124,58,237,0.15); --color-border-hover: rgba(124,58,237,0.4); --color-text: #1E1B4B; --color-text-muted: rgba(30,27,75,0.55); --color-text-dim: rgba(30,27,75,0.3); --color-score: #5B21B6; --shadow-glow: 0 0 20px rgba(124,58,237,0.15); --shadow-card: 0 4px 20px rgba(124,58,237,0.08); } /* ── Peach Sunshine ── */ [data-theme="peach"] { --color-primary: #EA580C; --color-primary-dark: #C2410C; --color-primary-light:#FFE9D5; --color-bg: #FFF7F0; --color-surface: #FFFFFF; --color-surface-2: #FFE9D5; --color-surface-3: #FFF7F0; --color-border: rgba(234,88,12,0.15); --color-border-hover: rgba(234,88,12,0.4); --color-text: #2D1200; --color-text-muted: rgba(45,18,0,0.55); --color-text-dim: rgba(45,18,0,0.3); --color-score: #C2410C; --shadow-glow: 0 0 20px rgba(234,88,12,0.15); --shadow-card: 0 4px 20px rgba(234,88,12,0.08); } /* ── Sky Blue ── */ [data-theme="sky"] { --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-primary-light:#DBEAFE; --color-bg: #EFF6FF; --color-surface: #FFFFFF; --color-surface-2: #DBEAFE; --color-surface-3: #EFF6FF; --color-border: rgba(37,99,235,0.15); --color-border-hover: rgba(37,99,235,0.4); --color-text: #0C1A3A; --color-text-muted: rgba(12,26,58,0.55); --color-text-dim: rgba(12,26,58,0.3); --color-score: #1D4ED8; --shadow-glow: 0 0 20px rgba(37,99,235,0.15); --shadow-card: 0 4px 20px rgba(37,99,235,0.08); } /* ── Lemon Pop ── */ [data-theme="lemon"] { --color-primary: #CA8A04; --color-primary-dark: #92400E; --color-primary-light:#FEF08A; --color-bg: #FEFCE8; --color-surface: #FFFFFF; --color-surface-2: #FEF9C3; --color-surface-3: #FEFCE8; --color-border: rgba(202,138,4,0.15); --color-border-hover: rgba(202,138,4,0.4); --color-text: #1A1200; --color-text-muted: rgba(26,18,0,0.55); --color-text-dim: rgba(26,18,0,0.3); --color-score: #92400E; --shadow-glow: 0 0 20px rgba(202,138,4,0.15); --shadow-card: 0 4px 20px rgba(202,138,4,0.08); } /* ── Rose Gold ── */ [data-theme="rose"] { --color-primary: #E11D48; --color-primary-dark: #BE123C; --color-primary-light:#FFE4E6; --color-bg: #FFF1F2; --color-surface: #FFFFFF; --color-surface-2: #FFE4E6; --color-surface-3: #FFF1F2; --color-border: rgba(225,29,72,0.15); --color-border-hover: rgba(225,29,72,0.4); --color-text: #2D0A0F; --color-text-muted: rgba(45,10,15,0.55); --color-text-dim: rgba(45,10,15,0.3); --color-score: #BE123C; --shadow-glow: 0 0 20px rgba(225,29,72,0.15); --shadow-card: 0 4px 20px rgba(225,29,72,0.08); } /* ── Teal Ocean ── */ [data-theme="teal"] { --color-primary: #0D9488; --color-primary-dark: #0F766E; --color-primary-light:#CCFBF1; --color-bg: #F0FDFA; --color-surface: #FFFFFF; --color-surface-2: #CCFBF1; --color-surface-3: #F0FDFA; --color-border: rgba(13,148,136,0.15); --color-border-hover: rgba(13,148,136,0.4); --color-text: #042F2E; --color-text-muted: rgba(4,47,46,0.55); --color-text-dim: rgba(4,47,46,0.3); --color-score: #0F766E; --shadow-glow: 0 0 20px rgba(13,148,136,0.15); --shadow-card: 0 4px 20px rgba(13,148,136,0.08); } /* ============================================ GLOBAL STYLES (theme-agnostic) ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); background: var(--color-bg); color: var(--color-text); min-height: 100vh; line-height: 1.5; transition: background 0.3s, color 0.3s; } img { display: block; max-width: 100%; } button { cursor: pointer; font-family: inherit; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Navbar ── */ #portal-nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-sm) var(--space-lg); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } #portal-nav .logo { font-size: 18px; font-weight: 800; color: var(--color-primary); } #portal-nav .logo span { color: var(--color-text); } #portal-nav .nav-links { display: flex; gap: var(--space-md); list-style: none; align-items: center; } #portal-nav .nav-links a { font-size: 13px; font-weight: 600; color: var(--color-text-muted); padding: 6px 12px; border-radius: var(--radius-sm); transition: var(--transition); } #portal-nav .nav-links a:hover, #portal-nav .nav-links a.active { color: var(--color-primary); background: var(--color-primary-light); text-decoration: none; } /* ── Theme Switcher ── */ #theme-switcher { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .theme-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s; flex-shrink: 0; } .theme-dot:hover { transform: scale(1.2); } .theme-dot.active { border-color: var(--color-text); transform: scale(1.15); } /* ── Buttons ── */ .btn-primary { background: var(--color-primary); color: #fff; border: none; padding: 10px 22px; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; transition: var(--transition); } .btn-primary:hover { background: var(--color-primary-dark); } .btn-ghost { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-border); padding: 9px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; transition: var(--transition); } .btn-ghost:hover { border-color: var(--color-primary); background: rgba(0,0,0,0.04); } /* ── SEO Article ── */ #seo-content { max-width: 800px; margin: var(--space-xl) auto; padding: 0 var(--space-lg) var(--space-xl); } #seo-content h1 { font-size: 22px; color: var(--color-text); margin-bottom: var(--space-md); } #seo-content p { font-size: 14px; color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-sm); } /* ── Toast ── */ #toast { position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); background: var(--color-success); color: #fff; padding: 10px 22px; border-radius: var(--radius-lg); font-size: 14px; font-weight: 600; z-index: 999; opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap; } #toast.show { opacity: 1; } /* ── Float animation ── */ .float-text { position: absolute; font-size: 15px; font-weight: 700; color: var(--color-score); pointer-events: none; animation: float-up 0.9s ease-out forwards; z-index: 10; } @keyframes float-up { 0% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-60px) scale(0.8); } } /* ── Footer ── */ #portal-footer { text-align: center; padding: var(--space-lg); font-size: 12px; color: var(--color-text-dim); border-top: 1px solid var(--color-border); } #portal-footer a { color: var(--color-text-muted); }