/* site-theme.css Theme variables and component styles for templates in templates/site/* - Uses [data-theme="dark"] on to switch modes - Keeps selectors narrow to site pages and common components */ :root { /* light theme (defaults) */ --bg: #f7f9fc; --surface: #ffffff; --text: #1e1f1f; --muted: #6b7280; --border: rgba(16,24,40,0.06); --accent-primary: #3563E9; /* used in existing inline styles */ --accent-dark: #2952CC; --btn-bg: var(--accent-primary); --btn-text: #ffffff; --card-bg: var(--surface); } html[data-theme="dark"] { --bg: #071024; --surface: #0b1220; --text: #e6eef8; --muted: #9aa4b2; --border: rgba(255,255,255,0.05); --accent-primary: #3b82f6; --accent-dark: #2563eb; --btn-bg: var(--accent-primary); --btn-text: #0b1220; --card-bg: #071428; } /* Base coloring for site pages */ body, .app-container { background: var(--bg); color: var(--text); } a { color: var(--accent-primary); } /* Head / header */ .head-site { display:flex; align-items:center; gap:0.75rem; color:var(--text); } .head-site .title { color: var(--text); } .theme-toggle { background: transparent; border: none; color: var(--text); display:flex; align-items:center; gap:0.25rem; padding:0.4rem; cursor:pointer; } .theme-toggle .sun-icon, .theme-toggle .moon-icon { transition: opacity 0.18s ease, transform 0.18s ease; } /* show sun in light, moon in dark */ html[data-theme="light"] .theme-toggle .sun-icon { opacity: 1; transform: scale(1); } html[data-theme="light"] .theme-toggle .moon-icon { opacity: 0; transform: scale(0.85); } html[data-theme="dark"] .theme-toggle .sun-icon { opacity: 0; transform: scale(0.85); } html[data-theme="dark"] .theme-toggle .moon-icon { opacity: 1; transform: scale(1); } /* Cards / surfaces */ .card, .slider-content, .pack-item, .link-item { background: var(--card-bg); color: var(--text); } /* Buttons and badges */ button, .btn, .menu-btn { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.8rem; } /* Pack badge used inline in home.js relies on --accent-primary; ensure contrast in dark */ .pack-link { background: var(--accent-primary); color: var(--btn-text); } /* Bottom menu */ .bottom-menu { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.03)); color: var(--text); } .menu-btn { color: var(--muted); } .menu-btn.active { color: var(--accent-primary); } /* Inputs */ input, textarea, select { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); } /* helper: subtle dividers using currentColor */ .menu-divider line { stroke: rgba(0,0,0,0.08); } html[data-theme="dark"] .menu-divider line { stroke: rgba(255,255,255,0.06); } /* small utility for floating theme toggle in home page (added button) */ .theme-toggle-home { position:fixed; bottom: 92px; /* above bottom-menu */ left: 1rem; /* RTL site; put at left so it appears bottom-left in RTL */ z-index: 60; background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 0.5rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(16,24,40,0.06); } @media (min-width: 900px) { .theme-toggle-home { left: auto; right: 1rem; } } /* Make sure SVG icons inherit color */ svg { color: inherit; } /* Small accessibility: focus outlines */ button:focus, a:focus { outline: 3px solid rgba(59,130,246,0.18); outline-offset: 2px; } /* Ensure paragraphs inside the app container always use the theme text color (higher specificity) */ .app-container p { color: var(--text); } p, h1, h2, h3, h4, h5, h6 { color: var(--text); }