/* ============================================================ Tais Brothers - Multi-Theme System v3.0 Themes: sunrise (default), golden, deep-space, eco Applied via: body[data-theme="xxx"] on Each theme defines: - Brand colors (primary/secondary/accent) - SURFACE palette (bg / bg-alt / card) — light or dark - TEXT palette (text / muted / on-dark / on-light) - Borders + gradients The CSS uses semantic classes (.surface-dark, .surface-light) that automatically swap colors based on the active theme, so any section/card/header stays readable on ALL themes. ============================================================ */ /* Smooth color transitions when theme changes */ body { transition: background-color .4s ease, color .4s ease, border-color .4s ease; } /* ============================================================ THEME 1: SUNRISE (default — warm orange / gold) ============================================================ */ body[data-theme="sunrise"] { /* Brand */ --primary: #f59e0b; --primary-dark: #d97706; --primary-light: #fbbf24; --secondary: #1e293b; --accent: #0c4a6e; --dark: #0f172a; /* Surfaces (light) */ --bg: #f8fafc; --bg-alt: #ffffff; --card: #ffffff; --surface-dark: #0f172a; /* used for hero / dark banners */ --surface-darker: #020617; /* Text (on light surfaces) */ --text: #1f2937; /* main dark text — contrast 13.6:1 vs #fff */ --text-soft: #09090a; --muted: #64748b; --on-dark: #f8fafc; /* text on dark surfaces */ --on-primary: #1f2937; /* text on top of --primary gold */ /* Borders + gradients */ --border: #e2e8f0; --backgr: linear-gradient(135deg, rgb(251, 191, 36), rgb(245, 158, 11), rgb(251, 191, 36)) 0% 0% / 200% text; --border-dark: #334155; --grad: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #fbbf24 100%); --grad-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%); --grad-soft: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02)); --grad-glow: radial-gradient(ellipse at top, rgba(245,158,11,.22), transparent 60%), radial-gradient(ellipse at bottom right, rgba(249,115,22,.18), transparent 60%); --shadow-color: 15, 23, 42; color-scheme: light; } /* ============================================================ THEME 2: GOLDEN (rich luxury gold) ============================================================ */ body[data-theme="golden"] { --primary: #eab308; --primary-dark: #a16207; --primary-light: #fde047; --secondary: #292524; --accent: #78350f; --dark: #1c1917; --bg: #fefce8; --bg-alt: #ffffff; --card: #ffffff; --surface-dark: #1c1917; --surface-darker: #0c0a09; --text: #292524; --text-soft: #623806; --muted: #78716c; --on-dark: #fefce8; --on-primary: #292524; --border: #fde68a; --backgr: linear-gradient(135deg, rgb(251, 191, 36), rgb(245, 158, 11), rgb(251, 191, 36)) 0% 0% / 200% text; --border-dark: #44403c; --grad: linear-gradient(135deg, #fde047 0%, #eab308 50%, #a16207 100%); --grad-dark: linear-gradient(135deg, #1c1917 0%, #292524 50%, #78350f 100%); --grad-soft: linear-gradient(135deg, rgba(234,179,8,.12), rgba(234,179,8,.04)); --grad-glow: radial-gradient(ellipse at top, rgba(234,179,8,.30), transparent 60%), radial-gradient(ellipse at bottom right, rgba(245,158,11,.20), transparent 60%); --shadow-color: 120, 53, 15; color-scheme: light; } /* ============================================================ THEME 3: DEEP-SPACE (dark cosmic / tech — fully dark mode) ============================================================ */ body[data-theme="deep-space"] { --primary: #06b6d4; --primary-dark: #0891b2; --primary-light: #67e8f9; --secondary: #1e1b4b; --accent: #8b5cf6; --dark: #020617; --bg: #0f172a; /* dark page bg */ --bg-alt: #1e293b; /* dark alt bg */ --card: #b8cef3; --surface-dark: #020617; --surface-darker: #000000; --text: #f1f5f9; /* LIGHT text on dark */ --text-soft: #0a458b; --muted: #94a3b8; --on-dark: #00ffd8; --on-primary: #0f172a; --border: #334155; --backgr: linear-gradient(135deg, rgb(251, 191, 36), rgb(245, 158, 11), rgb(251, 191, 36)) 0% 0% / 200% text; --border-dark: #475569; --grad: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #1e1b4b 100%); --grad-dark: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%); --grad-soft: linear-gradient(135deg, rgba(6,182,212,.12), rgba(139,92,246,.04)); --grad-glow: radial-gradient(ellipse at top, rgba(6,182,212,.25), transparent 60%), radial-gradient(ellipse at bottom right, rgba(139,92,246,.20), transparent 60%); --shadow-color: 0, 0, 0; color-scheme: dark; } /* ============================================================ THEME 4: ECO (green / nature) ============================================================ */ body[data-theme="eco"] { --primary: #16a34a; --primary-dark: #15803d; --primary-light: #4ade80; --secondary: #14532d; --accent: #0d9488; --dark: #052e16; --bg: #f0fdf4; --bg-alt: #ffffff; --card: #ffffff; --surface-dark: #052e16; --surface-darker: #022c0e; --text: #14532d; --text-soft: #445249; --muted: #4b7254; --on-dark: #f0fdf4; --on-primary: #ffffff; --border: #bbf7d0; --backgr: linear-gradient(135deg, rgb(251, 191, 36), rgb(245, 158, 11), rgb(251, 191, 36)) 0% 0% / 200% text; --border-dark: #166534; --grad: linear-gradient(135deg, #4ade80 0%, #16a34a 50%, #0d9488 100%); --grad-dark: linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%); --grad-soft: linear-gradient(135deg, rgba(22,163,74,.10), rgba(22,163,74,.03)); --grad-glow: radial-gradient(ellipse at top, rgba(22,163,74,.22), transparent 60%), radial-gradient(ellipse at bottom right, rgba(13,148,136,.18), transparent 60%); --shadow-color: 20, 83, 45; color-scheme: light; } /* ============================================================ GLOBAL TYPOGRAPHY — contrast-safe across all themes - Body color follows --text (light or dark per theme) - Links use --primary - Headings use --secondary ============================================================ */ body { color: var(--text); background: var(--bg); } h1, h2, h3, h4, h5, h6 { color: var(--secondary); } a { color: var(--primary); } a:hover { color: var(--primary-dark); } .surface-dark, .surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4, .surface-dark h5, .surface-dark h6, .surface-dark p, .surface-dark span, .surface-dark li, .surface-dark div, .surface-dark small { color: var(--on-dark); } .surface-dark a { color: var(--primary-light); } /* ============================================================ THEME SWITCHER PANEL (slide-in) ============================================================ */ .theme-panel { position: fixed; top: 0; right: 0; /* default; mirrored via [dir=rtl] below */ width: 320px; max-width: 90vw; height: 100vh; background: var(--card); box-shadow: -8px 0 30px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 9999; display: flex; flex-direction: column; color: var(--text); } body[dir="rtl"] .theme-panel { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 30px rgba(0,0,0,.18); } .theme-panel.open { transform: translateX(0) !important; } .theme-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--grad-soft); } .theme-panel-header h4 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; color: var(--text); } .theme-panel-close { background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .25rem; transition: color .2s; } .theme-panel-close:hover { color: var(--primary); } .theme-panel-body { flex: 1; overflow-y: auto; padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; background: var(--bg); } .theme-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9998; opacity: 0; transition: opacity .3s; pointer-events: none; } .theme-panel-backdrop.show { opacity: 1; pointer-events: auto; } /* ============================================================ THEME CARDS (inside panel) ============================================================ */ .theme-card { display: flex; flex-direction: column; border: 2px solid var(--border); border-radius: .75rem; overflow: hidden; text-decoration: none; color: var(--text); background: var(--card); transition: all .25s ease; cursor: pointer; } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); border-color: var(--primary); } .theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); } .theme-preview { height: 60px; width: 100%; } .theme-card--sunrise .theme-preview { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%); } .theme-card--golden .theme-preview { background: linear-gradient(135deg, #fde047 0%, #eab308 50%, #a16207 100%); } .theme-card--deep-space .theme-preview { background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #1e1b4b 100%); } .theme-card--eco .theme-preview { background: linear-gradient(135deg, #4ade80 0%, #16a34a 50%, #0d9488 100%); } .theme-info { padding: .5rem .65rem; text-align: center; } .theme-info strong { display: block; font-size: .9rem; color: var(--text); } .theme-info small { display: block; font-size: .75rem; color: var(--muted); margin-top: .15rem; } /* ============================================================ THEME TOGGLE BUTTON (header) ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--border); color: var(--text); padding: .4rem .75rem; border-radius: 999px; cursor: pointer; font-size: .85rem; transition: all .2s; } .theme-toggle:hover { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); } .theme-toggle .theme-name { font-weight: 600; text-transform: capitalize; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 480px) { .theme-panel { width: 100vw; } .theme-panel-body { grid-template-columns: 1fr; } } /* ============================================================ LANGUAGE CYCLE BUTTON ============================================================ */ .lang-cycle-btn { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--border); color: var(--text); padding: .4rem .75rem; border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 600; transition: all .25s ease; text-decoration: none; white-space: nowrap; } .lang-cycle-btn:hover { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } .lang-cycle-btn .lang-cycle-label { font-weight: 600; min-width: 2.5em; text-align: center; display: inline-block; } .lang-cycle-btn .lang-cycle-arrow { font-size: .7rem; opacity: .65; transition: transform .3s ease; } .lang-cycle-btn:hover .lang-cycle-arrow { transform: translateX(2px) rotate(180deg); opacity: 1; } body[dir="rtl"] .lang-cycle-btn:hover .lang-cycle-arrow { transform: translateX(-2px) rotate(180deg); } /* Chinese font tweak */ html[lang="zh"] body { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif; font-feature-settings: "palt"; letter-spacing: .01em; } html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4 { font-weight: 600; } @media (max-width: 480px) { .lang-cycle-btn .lang-cycle-label { display: none; } .lang-cycle-btn .lang-cycle-arrow { display: none; } }