/* * Newhome Unified Theme Variables * Extracted from newhome/program/src/App.vue * Provides consistent dark/light theme support across all WordPress pages * (Blog, Help, Terms, etc.) * * Theme detection: [data-theme="light"] on element * Storage: localStorage key "theme" (values: "light" | "dark") */ /* ============================================= Dark Theme (Default) ============================================= */ :root { /* Core */ --nuh-bg: linear-gradient(180deg, #1f2937 0%, #111827 100%); --nuh-text: #ffffff; --nuh-text-secondary: rgba(255, 255, 255, 0.6); --nuh-text-muted: rgba(255, 255, 255, 0.4); /* Header */ --nuh-header-bg: rgba(31, 41, 55, 0.8); --nuh-header-border: rgba(255, 255, 255, 0.1); /* Footer */ --nuh-footer-bg: #000000; --nuh-footer-border: rgba(255, 255, 255, 0.1); /* Cards */ --nuh-card-bg: rgba(255, 255, 255, 0.05); --nuh-card-border: rgba(255, 255, 255, 0.08); --nuh-card-hover-border: rgba(255, 255, 255, 0.2); --nuh-card-hover-bg: rgba(255, 255, 255, 0.06); --nuh-card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Glass */ --nuh-glass-bg: rgba(255, 255, 255, 0.1); --nuh-glass-border: rgba(255, 255, 255, 0.15); /* Reading card (blog single post) */ --nuh-reading-bg: #1a1a2e; --nuh-reading-text: #e2e8f0; --nuh-reading-heading: #f1f5f9; --nuh-reading-border: rgba(255, 255, 255, 0.08); --nuh-reading-code-bg: rgba(255, 255, 255, 0.08); --nuh-reading-code-text: #e2e8f0; --nuh-reading-blockquote-bg: rgba(255, 255, 255, 0.04); --nuh-reading-blockquote-text: #94a3b8; --nuh-reading-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* Tags */ --nuh-tag-bg: rgba(255, 255, 255, 0.06); --nuh-tag-text: #94a3b8; --nuh-tag-hover-bg: rgba(0, 143, 96, 0.15); --nuh-tag-hover-text: #34d399; /* Category badge */ --nuh-category-bg: rgba(0, 143, 96, 0.2); --nuh-category-text: #34d399; /* Accent */ --nuh-accent: #008F60; --nuh-accent-light: #34d399; --nuh-accent-gold: #d4af37; /* Meta */ --nuh-meta-text: #64748b; /* Pagination / Navigation */ --nuh-nav-bg: rgba(255, 255, 255, 0.05); --nuh-nav-border: rgba(255, 255, 255, 0.1); --nuh-nav-text: #e2e8f0; --nuh-nav-hover-bg: rgba(0, 143, 96, 0.1); --nuh-nav-hover-border: rgba(0, 143, 96, 0.3); /* Pre/Code blocks */ --nuh-pre-bg: #0f172a; --nuh-pre-text: #e2e8f0; /* Help page specific (mapped from --hc-*) */ --nuh-hero-bg: #1a202c; --nuh-primary-link: #4da3ff; --nuh-primary-light: rgba(77, 163, 255, 0.08); --nuh-primary-border: rgba(77, 163, 255, 0.3); --nuh-search-bg: #1a202c; --nuh-search-border: #4a5568; --nuh-hover-bg: #2d3748; --nuh-tip-high: #dd6b20; --nuh-tip-medium: #3182ce; --nuh-disclaimer-bg: rgba(221, 107, 32, 0.1); --nuh-disclaimer-border: rgba(221, 107, 32, 0.3); --nuh-tab-bg: rgba(255, 255, 255, 0.06); --nuh-tab-active-bg: rgba(77, 163, 255, 0.12); --nuh-tab-active-text: #4da3ff; } /* ============================================= Light Theme ============================================= */ :root[data-theme="light"] { /* Core */ --nuh-bg: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%); --nuh-text: #111827; --nuh-text-secondary: #374151; --nuh-text-muted: rgba(0, 0, 0, 0.4); /* Header */ --nuh-header-bg: rgba(255, 255, 255, 0.82); --nuh-header-border: rgba(0, 0, 0, 0.08); /* Footer */ --nuh-footer-bg: #f3f4f6; --nuh-footer-border: rgba(0, 0, 0, 0.08); /* Cards */ --nuh-card-bg: rgba(255, 255, 255, 0.75); --nuh-card-border: rgba(0, 0, 0, 0.08); --nuh-card-hover-border: rgba(0, 0, 0, 0.15); --nuh-card-hover-bg: rgba(0, 0, 0, 0.04); --nuh-card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.06); /* Glass */ --nuh-glass-bg: rgba(255, 255, 255, 0.65); --nuh-glass-border: rgba(0, 0, 0, 0.12); /* Reading card */ --nuh-reading-bg: #ffffff; --nuh-reading-text: #1a202c; --nuh-reading-heading: #1a202c; --nuh-reading-border: #edf2f7; --nuh-reading-code-bg: #f1f5f9; --nuh-reading-code-text: #334155; --nuh-reading-blockquote-bg: #f8fafc; --nuh-reading-blockquote-text: #475569; --nuh-reading-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); /* Tags */ --nuh-tag-bg: #f1f5f9; --nuh-tag-text: #475569; --nuh-tag-hover-bg: rgba(0, 143, 96, 0.1); --nuh-tag-hover-text: #008F60; /* Category badge */ --nuh-category-bg: rgba(0, 143, 96, 0.1); --nuh-category-text: #008F60; /* Accent */ --nuh-accent: #008F60; --nuh-accent-light: #008F60; --nuh-accent-gold: #b28a0d; /* Meta */ --nuh-meta-text: #94a3b8; /* Pagination / Navigation */ --nuh-nav-bg: rgba(0, 0, 0, 0.03); --nuh-nav-border: rgba(0, 0, 0, 0.1); --nuh-nav-text: #374151; --nuh-nav-hover-bg: rgba(0, 143, 96, 0.06); --nuh-nav-hover-border: rgba(0, 143, 96, 0.3); /* Pre/Code blocks */ --nuh-pre-bg: #0f172a; --nuh-pre-text: #e2e8f0; /* Help page specific */ --nuh-hero-bg: #f7fafc; --nuh-primary-link: #0066cc; --nuh-primary-light: rgba(0, 102, 204, 0.06); --nuh-primary-border: rgba(0, 102, 204, 0.3); --nuh-search-bg: #ffffff; --nuh-search-border: #e2e8f0; --nuh-hover-bg: #edf2f7; --nuh-tip-high: #dd6b20; --nuh-tip-medium: #3182ce; --nuh-disclaimer-bg: rgba(221, 107, 32, 0.06); --nuh-disclaimer-border: rgba(221, 107, 32, 0.2); --nuh-tab-bg: #edf2f7; --nuh-tab-active-bg: rgba(0, 102, 204, 0.08); --nuh-tab-active-text: #0066cc; } /* ============================================= Shared Base Styles for Unified Pages ============================================= */ /* Font family — matches newhome */ .nuh-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Full-viewport background for standalone pages */ .nuh-page { min-height: 100vh; background: var(--nuh-bg); color: var(--nuh-text); position: relative; } /* Content container — matches newhome $contentWidth: 1280px */ .nuh-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; } @media (max-width: 1300px) { .nuh-container { max-width: 100%; padding: 0 20px; } } /* Scrollbar — matches newhome */ .nuh-page::-webkit-scrollbar { width: 6px; height: 6px; } .nuh-page::-webkit-scrollbar-thumb { background: var(--nuh-text-secondary); opacity: 0.2; border-radius: 3px; } .nuh-page::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } /* ============================================= Unified Footer (CSS-only, matches newhome) ============================================= */ .nuh-footer { background-color: var(--nuh-footer-bg); color: var(--nuh-text); padding: 80px 0 40px; position: relative; } .nuh-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } @media (max-width: 1300px) { .nuh-footer-inner { padding: 0 20px; } } .nuh-footer-top { display: flex; justify-content: space-between; margin-bottom: 60px; } @media (max-width: 1024px) { .nuh-footer-top { flex-direction: column; gap: 48px; } } .nuh-footer-brand { flex: 0 0 240px; } .nuh-footer-logo { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--nuh-text); } .nuh-footer-logo img { width: 32px; height: 32px; } .nuh-footer-tagline { font-size: 16px; color: var(--nuh-text-secondary); font-weight: 600; margin-bottom: 24px; letter-spacing: 0.5px; } .nuh-footer-social { display: flex; gap: 20px; margin-bottom: 30px; } .nuh-footer-social a { color: var(--nuh-text-secondary); text-decoration: none; transition: color 0.3s; } .nuh-footer-social a:hover { color: var(--nuh-text); } .nuh-footer-columns-wrapper { flex: 1; margin: 0 60px; } @media (max-width: 1024px) { .nuh-footer-columns-wrapper { margin: 0; } } .nuh-footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } @media (max-width: 768px) { .nuh-footer-columns { grid-template-columns: repeat(2, 1fr); } } .nuh-footer-col-header { font-size: 14px; font-weight: 600; margin-bottom: 24px; color: var(--nuh-text-muted); text-transform: uppercase; letter-spacing: 1px; } .nuh-footer-col-item { display: block; font-size: 14px; font-weight: 500; color: var(--nuh-text-secondary); margin-bottom: 12px; text-decoration: none; transition: color 0.2s ease; } .nuh-footer-col-item:hover { color: var(--nuh-text); text-decoration: underline; } .nuh-footer-bottom { padding-top: 40px; border-top: 1px solid var(--nuh-footer-border); display: flex; justify-content: space-between; align-items: center; } @media (max-width: 768px) { .nuh-footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; } } .nuh-footer-copyright { font-size: 13px; color: var(--nuh-text-muted); } .nuh-footer-links { display: flex; gap: 30px; font-size: 13px; } .nuh-footer-links a { color: var(--nuh-text-muted); text-decoration: none; transition: color 0.3s; } .nuh-footer-links a:hover { color: var(--nuh-text); }