/* ======================================== SHARED THEME SYSTEM CSS Universal Theme Variables for All Pages ======================================== */ /* Suppresses all transitions site-wide while shared-theme-system.js's performDoubleToggleHack() briefly removes/re-adds .light-mode on initial light-theme load. `transition` doesn't inherit, so this has to hit every descendant (via the universal selector), not just /. */ html.theme-transition-lock, html.theme-transition-lock * { transition: none !important; } /* Light Theme - contrast tuned for WCAG AA (4.5:1 normal text) */ html[data-theme="light"] { /* Force browser/embedder to use light UA styles (inputs, scrollbars, etc.) so light theme looks correct in Cursor/VS Code Simple Browser and other hosts that report prefers-color-scheme: dark. */ color-scheme: light; /* Core Colors */ --theme-bg-primary: #ffffff; --theme-bg-secondary: #f8f9fa; --theme-bg-tertiary: #e9ecef; --theme-text-primary: #212529; --theme-text-secondary: #495057; --theme-text-muted: #6c757d; /* Interactive Elements */ --theme-border: #dee2e6; --theme-border-hover: #adb5bd; --theme-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.06); --theme-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12); --theme-shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.20); /* Accent Colors */ --theme-primary: #007bff; --theme-primary-hover: #0056b3; --theme-success: #28a745; --theme-warning: #ffc107; --theme-danger: #dc3545; /* Input Elements */ --theme-input-bg: #ffffff; --theme-input-border: #ced4da; --theme-input-focus: #80bdff; /* Header & Navigation */ --theme-header-bg: rgba(255, 255, 255, 0.95); --theme-nav-text: #495057; --theme-nav-hover: #212529; } /* Dark Theme (Default) - contrast tuned for WCAG AA */ :root, html[data-theme="dark"] { color-scheme: dark; /* Core Colors */ --theme-bg-primary: #121212; --theme-bg-secondary: #1e1e1e; --theme-bg-tertiary: #2d2d2d; --theme-text-primary: #ffffff; --theme-text-secondary: #b8b8b8; --theme-text-muted: #8a8a8a; /* Interactive Elements */ --theme-border: #404040; --theme-border-hover: #606060; --theme-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3); --theme-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4); --theme-shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.6); /* Accent Colors */ --theme-primary: #4dabf7; --theme-primary-hover: #339af0; --theme-success: #51cf66; --theme-warning: #ffd43b; --theme-danger: #ff6b6b; /* Input Elements */ --theme-input-bg: #2d2d2d; --theme-input-border: #404040; --theme-input-focus: #4dabf7; /* Header & Navigation */ --theme-header-bg: rgba(18, 18, 18, 0.95); --theme-nav-text: #b3b3b3; --theme-nav-hover: #ffffff; } /* Universal Theme Application */ body { background-color: var(--theme-bg-primary); color: var(--theme-text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Theme Toggle Button Styles */ .theme-toggle-btn { display: inline-flex; align-items: center; padding: 8px 12px; background: transparent; border: 1px solid var(--theme-border); border-radius: 6px; color: var(--theme-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; user-select: none; } /* Main Calculator Style Theme Toggle - Match exact styling */ .theme-toggle { background: var(--theme-bg-secondary); border: 1px solid var(--theme-border); border-radius: 8px; padding: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .theme-toggle:hover { border-color: var(--theme-primary); background: rgba(0, 122, 255, 0.1); } .theme-toggle:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3); } .theme-toggle .theme-icon { display: block; width: 20px; height: 20px; fill: var(--theme-text-secondary); transition: all 0.2s ease; } .theme-toggle:hover .theme-icon { fill: var(--theme-primary); } .theme-toggle-btn:hover { background: var(--theme-bg-secondary); border-color: var(--theme-border-hover); color: var(--theme-text-primary); text-decoration: none; } .theme-toggle-btn:active { transform: translateY(1px); } .theme-icon { margin-right: 6px; font-size: 16px; line-height: 1; } .theme-text { display: none; /* Hide text, show only icon */ } /* Responsive Theme Toggle */ @media (max-width: 768px) { .theme-toggle-btn { padding: 6px 10px; font-size: 13px; } .theme-icon { margin-right: 0; font-size: 18px; } } /* Header Theme Integration */ .theme-aware-header { background: var(--theme-header-bg); border-bottom: 1px solid var(--theme-border); backdrop-filter: blur(10px); transition: all 0.3s ease; } .theme-aware-nav-link { color: var(--theme-nav-text); transition: color 0.2s ease; } .theme-aware-nav-link:hover, .theme-aware-nav-link.active { color: var(--theme-primary); } /* Unified product-logo title text across core tools */ .inhand-product-title { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.2; letter-spacing: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: inherit; } /* Content Area Theme Styles */ .theme-aware-content { background: var(--theme-bg-primary); color: var(--theme-text-primary); } .theme-aware-card { background: var(--theme-bg-secondary); border: 1px solid var(--theme-border); box-shadow: var(--theme-shadow-light); transition: all 0.3s ease; } .theme-aware-card:hover { box-shadow: var(--theme-shadow-medium); } /* Form Elements Theme */ .theme-aware-input { background: var(--theme-input-bg); border: 1px solid var(--theme-input-border); color: var(--theme-text-primary); transition: all 0.2s ease; } .theme-aware-input:focus { border-color: var(--theme-input-focus); box-shadow: 0 0 0 0.2rem rgba(128, 189, 255, 0.25); } html[data-theme="dark"] .theme-aware-input:focus { box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25); } /* Button Theme Variants */ .theme-aware-btn-primary { background: var(--theme-primary); border-color: var(--theme-primary); color: white; } .theme-aware-btn-primary:hover { background: var(--theme-primary-hover); border-color: var(--theme-primary-hover); } .theme-aware-btn-outline { background: transparent; border: 1px solid var(--theme-primary); color: var(--theme-primary); } .theme-aware-btn-outline:hover { background: var(--theme-primary); color: white; } /* Text Selection Theme */ ::selection { background: var(--theme-primary); color: white; } ::-moz-selection { background: var(--theme-primary); color: white; } /* Scrollbar Theme */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--theme-bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--theme-border-hover); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--theme-text-muted); } /* FAQ Section Theme Integration */ .theme-aware-faq { background: var(--theme-bg-secondary); border: 1px solid var(--theme-border); transition: all 0.3s ease; } .theme-aware-faq-title { color: var(--theme-text-primary); border-bottom-color: var(--theme-border); } .theme-aware-faq-item { background: var(--theme-bg-primary); border: 1px solid var(--theme-border); transition: all 0.3s ease; } .theme-aware-faq-item:hover { box-shadow: var(--theme-shadow-medium); transform: translateY(-1px); } .theme-aware-faq-question { color: var(--theme-text-primary); } .theme-aware-faq-answer { color: var(--theme-text-secondary); } /* Theme-aware links */ .theme-aware-link { color: var(--theme-primary); transition: color 0.2s ease; } .theme-aware-link:hover { color: var(--theme-primary-hover); text-decoration: underline; } /* Print Styles - Always Light */ @media print { * { background: white !important; color: black !important; box-shadow: none !important; } } /* High Contrast Mode Support */ @media (prefers-contrast: high) { :root { --theme-border: #000000; --theme-text-secondary: #000000; } html[data-theme="dark"] { --theme-border: #ffffff; --theme-text-secondary: #ffffff; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Editorial / trust lines (how-to, features, retirement guides) */ .editorial-trustline { max-width: 42rem; margin: 1rem auto 0; padding: 0.75rem 1rem; font-size: 0.9rem; line-height: 1.55; color: var(--theme-text-secondary); border-left: 3px solid var(--theme-primary); background: var(--theme-bg-secondary); } .editorial-trustline strong { color: var(--theme-text-primary); } /* Header "Calculator ▾" dropdown — defined here (not new-style-optimized.css) because this is the one stylesheet every consumer of includes/header_nav_desktop.html loads, including epf_calculator_page.html which doesn't load new-style-optimized.css at all. */ .header-nav-dropdown { position: relative; padding: 0; } .header-nav-dropdown-trigger { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; color: var(--theme-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.3s ease; padding: 6px 12px; border-radius: 6px; } .header-nav-dropdown.active .header-nav-dropdown-trigger, .header-nav-dropdown-trigger:hover { color: var(--theme-nav-hover); } .header-nav-dropdown-arrow { transition: transform 0.2s ease; } .header-nav-dropdown.open .header-nav-dropdown-arrow { transform: rotate(180deg); } .header-nav-dropdown-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px) scale(0.96); transform-origin: top center; min-width: 200px; background: var(--theme-bg-primary); border: 1px solid var(--theme-border); border-radius: 10px; box-shadow: var(--theme-shadow-medium); padding: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } .header-nav-dropdown.open .header-nav-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .header-nav-dropdown-item { display: block; padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--theme-text-secondary); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .header-nav-dropdown-item:hover { background: var(--theme-bg-secondary); color: var(--theme-text-primary); } .header-nav-dropdown-item.active { color: var(--theme-primary); font-weight: 600; }