/* ========================================================================== BillCraft — Global Light Theme Overrides Loaded on every page; applies only when . Keep rules defensive + !important to beat inline/page-specific styles. ========================================================================== */ /* ---------- Base ---------- */ html.light-theme, html.light-theme body { background: #F5F5F7 !important; color: #1A1A2E !important; } html.light-theme::before, html.light-theme::after { opacity: 0.01 !important; } /* ---------- Typography ---------- */ html.light-theme h1, html.light-theme h2, html.light-theme h3, html.light-theme h4, html.light-theme h5, html.light-theme h6 { color: #1A1A2E !important; } html.light-theme p, html.light-theme li, html.light-theme span:not(.tag):not(.nav-cta):not(.accent-word):not(.dd-num) { color: #3A3A4E; } html.light-theme strong { color: #1A1A2E !important; } html.light-theme em { color: #D7344F; } html.light-theme blockquote { color: #3A3A4E; border-color: rgba(0,0,0,0.1); } html.light-theme code, html.light-theme pre { background: rgba(0,0,0,0.04) !important; color: #1A1A2E !important; } html.light-theme hr { border-color: rgba(0,0,0,0.08) !important; } /* ---------- Navbar ---------- */ html.light-theme nav, html.light-theme #navbar { background: rgba(245,245,247,0.85) !important; border-bottom-color: rgba(0,0,0,0.06) !important; } html.light-theme .logo, html.light-theme .logo span { color: #1A1A2E !important; } html.light-theme .nav-links a { color: #5A5A6E !important; } html.light-theme .nav-links a:hover { color: #1A1A2E !important; } html.light-theme .nav-cta { background: #1A1A2E !important; color: #F5F5F7 !important; } html.light-theme .nav-cta:hover { background: #FF4D6A !important; color: #FFFFFF !important; } html.light-theme .menu-toggle { color: #1A1A2E !important; border-color: rgba(0,0,0,0.12) !important; } /* ---------- Nav dropdown menu ---------- */ html.light-theme .nav-dropdown-menu { background: rgba(245,245,247,0.98) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important; } html.light-theme .nav-dropdown-menu li a { color: #111111 !important; } html.light-theme .nav-dropdown-menu li a:hover { background: rgba(255,77,106,0.06) !important; color: #1A1A2E !important; } html.light-theme .nav-dropdown-menu li a .dd-num { color: rgba(255,77,106,0.7) !important; } @media (max-width: 900px) { html.light-theme .nav-dropdown-menu { background: transparent !important; border: none !important; box-shadow: none !important; } } /* ---------- Footer (used sitewide) ---------- */ html.light-theme footer { background: #EEEDF2 !important; border-top-color: rgba(0,0,0,0.06) !important; } html.light-theme footer h4 { color: #1A1A2E !important; } html.light-theme footer p, html.light-theme footer ul a { color: #5A5A6E !important; } html.light-theme footer ul a:hover { color: #1A1A2E !important; } html.light-theme footer .footer-bottom p { color: #8A8A9E !important; } /* ---------- Blog cards (blog.html) ---------- */ html.light-theme .blog-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } html.light-theme .blog-card:hover { border-color: rgba(255,77,106,0.3) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.06); } html.light-theme .blog-card h3, html.light-theme .blog-card h3 a { color: #1A1A2E !important; } html.light-theme .blog-card h3 a:hover { color: #D7344F !important; } html.light-theme .blog-card p { color: #5A5A6E !important; } html.light-theme .blog-card .meta, html.light-theme .blog-card .meta span { color: #8A8A9E !important; } html.light-theme .meta-dot { background: #C8C8D0 !important; } /* ---------- Tags (blog cards) ---------- */ html.light-theme .blog-card .tag { border-style: solid; } html.light-theme .tag-gst { background: rgba(255,77,106,0.08) !important; color: #D7344F !important; border-color: rgba(255,77,106,0.25) !important; } html.light-theme .tag-basics { background: rgba(22,163,74,0.08) !important; color: #15803D !important; border-color: rgba(22,163,74,0.25) !important; } html.light-theme .tag-tax { background: rgba(37,99,235,0.08) !important; color: #1D4ED8 !important; border-color: rgba(37,99,235,0.25) !important; } html.light-theme .tag-freelancing { background: rgba(234,88,12,0.08) !important; color: #C2410C !important; border-color: rgba(234,88,12,0.25) !important; } html.light-theme .tag-tips { background: rgba(124,58,237,0.08) !important; color: #6D28D9 !important; border-color: rgba(124,58,237,0.25) !important; } html.light-theme .tag-tutorial { background: rgba(217,119,6,0.08) !important; color: #B45309 !important; border-color: rgba(217,119,6,0.25) !important; } html.light-theme .tag-einvoicing { background: rgba(219,39,119,0.08) !important; color: #BE185D !important; border-color: rgba(219,39,119,0.25) !important; } html.light-theme .tag-realtalk { background: rgba(255,77,106,0.1) !important; color: #D7344F !important; border-color: rgba(255,77,106,0.3) !important; } /* ---------- Featured card visual + float chips ---------- */ html.light-theme .blog-card.featured .featured-visual { background: linear-gradient(145deg, rgba(255,77,106,0.08), rgba(255,179,128,0.05)) !important; border-color: rgba(255,77,106,0.15) !important; } html.light-theme .featured-visual .float-chip { background: rgba(255,255,255,0.95) !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #3A3A4E !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } html.light-theme .featured-visual > div:nth-child(2) { color: #1A1A2E !important; } /* ---------- Filter bar ---------- */ html.light-theme .filter-bar { border-bottom-color: rgba(0,0,0,0.08) !important; } html.light-theme .filter-btn { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; color: #5A5A6E !important; } html.light-theme .filter-btn:hover { border-color: rgba(0,0,0,0.18) !important; color: #1A1A2E !important; } html.light-theme .filter-btn.active { background: #FF4D6A !important; border-color: #FF4D6A !important; color: #FFFFFF !important; } /* ---------- Newsletter ---------- */ html.light-theme .newsletter { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.04); } html.light-theme .newsletter p { color: #5A5A6E !important; } html.light-theme .newsletter input, html.light-theme .newsletter textarea { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.1) !important; color: #1A1A2E !important; } /* ---------- CTA section + button ---------- */ html.light-theme .cta-section p { color: #1A1A2E !important; } html.light-theme .cta-btn { background: #1A1A2E !important; color: #F5F5F7 !important; } html.light-theme .cta-btn:hover { background: #FF4D6A !important; color: #FFFFFF !important; } /* ---------- Blog modal overlay (blog.html) ---------- */ html.light-theme .blog-modal { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } html.light-theme .blog-modal-body { color: #3A3A4E !important; } html.light-theme .blog-modal-content, html.light-theme .blog-modal-content p, html.light-theme .blog-modal-content li { color: #3A3A4E !important; } html.light-theme .blog-modal-content h2, html.light-theme .blog-modal-content h3, html.light-theme .blog-modal-content h4, html.light-theme .blog-modal-content strong { color: #1A1A2E !important; } html.light-theme .blog-modal-content em { color: #D7344F !important; } html.light-theme .blog-modal-content th { background: rgba(255,77,106,0.06) !important; color: #1A1A2E !important; border-bottom-color: rgba(0,0,0,0.08) !important; } html.light-theme .blog-modal-content td { color: #3A3A4E !important; border-bottom-color: rgba(0,0,0,0.06) !important; } html.light-theme .blog-modal-content .info-box { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.08) !important; } html.light-theme .blog-modal-content .info-box h4 { color: #D7344F !important; } html.light-theme .blog-modal-close { background: rgba(0,0,0,0.05) !important; color: #1A1A2E !important; border-color: rgba(0,0,0,0.1) !important; } html.light-theme .blog-modal-close:hover { background: rgba(0,0,0,0.1) !important; } html.light-theme .blog-overlay { background: rgba(0,0,0,0.4) !important; } /* ---------- Article pages (blog/*.html) ---------- */ html.light-theme .article, html.light-theme section.article { background: transparent !important; } html.light-theme .article-header .tag { background: rgba(255,77,106,0.1) !important; color: #D7344F !important; } html.light-theme .article-body, html.light-theme .article-body p, html.light-theme .article-body li { color: #3A3A4E !important; } html.light-theme .article-body h1, html.light-theme .article-body h2, html.light-theme .article-body h3, html.light-theme .article-body h4, html.light-theme .article-body strong { color: #1A1A2E !important; } html.light-theme .article-body em { color: #D7344F !important; } html.light-theme .article-body blockquote { background: rgba(0,0,0,0.02) !important; border-left-color: #FF4D6A !important; color: #3A3A4E !important; } html.light-theme .article-body table { background: rgba(0,0,0,0.02) !important; } html.light-theme .article-body th { background: rgba(255,77,106,0.06) !important; color: #1A1A2E !important; border-color: rgba(0,0,0,0.08) !important; } html.light-theme .article-body td { color: #3A3A4E !important; border-color: rgba(0,0,0,0.06) !important; } html.light-theme .article-body .info-box { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.08) !important; } html.light-theme .meta { color: #8A8A9E !important; } /* ---------- Common cards/sections (generic) ---------- */ html.light-theme .card, html.light-theme .value-card, html.light-theme .story-block, html.light-theme .timeline-item, html.light-theme .stats-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; color: #1A1A2E !important; } html.light-theme .card p, html.light-theme .value-card p, html.light-theme .story-block p, html.light-theme .timeline-item p { color: #5A5A6E !important; } /* ---------- Knowledge hub / topic sections ---------- */ html.light-theme .topic-section, html.light-theme .topic-card, html.light-theme .concept-box, html.light-theme .tip-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } /* ---------- Buttons / CTAs (generic) ---------- */ html.light-theme .btn, html.light-theme button.btn { color: #1A1A2E; } html.light-theme .btn-primary { background: #1A1A2E !important; color: #F5F5F7 !important; } html.light-theme .btn-primary:hover { background: #FF4D6A !important; } /* ---------- Cookie consent ---------- */ html.light-theme #cookieConsent, html.light-theme .cookie-consent { background: #FFFFFF !important; color: #1A1A2E !important; border-color: rgba(0,0,0,0.08) !important; } /* ---------- Sidebar TOC (paisa-bachao, etc.) ---------- */ html.light-theme .sidebar, html.light-theme .sidebar-nav a { color: #3A3A4E !important; } html.light-theme .sidebar-nav a.active { color: #D7344F !important; } /* ---------- Safety: any element with hardcoded dark bg inside content ---------- */ html.light-theme .info-box h4 { color: #D7344F !important; } /* ========================================================================== MOBILE NAV FIXES (applies to both themes; web desktop untouched) Only targets <=900px breakpoint used by existing mobile-nav CSS. ========================================================================== */ @media (max-width: 900px) { /* Keep nav container inside viewport */ nav#navbar, nav.navbar { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } /* Menu panel must span full width, not float to the right */ nav#navbar.open .nav-links, nav.navbar.open .nav-links, #navbar.open .nav-links { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; padding: 1rem 1.25rem !important; margin: 0 !important; gap: 0.5rem !important; background: rgba(10,10,18,0.97) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(244,241,234,0.08) !important; overflow-y: auto !important; max-height: calc(100vh - 70px) !important; } /* Each link takes full row, no weird wrapping */ nav#navbar.open .nav-links > li, nav.navbar.open .nav-links > li, #navbar.open .nav-links > li { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } nav#navbar.open .nav-links > li > a, nav.navbar.open .nav-links > li > a, #navbar.open .nav-links > li > a { display: block !important; width: 100% !important; padding: 0.75rem 0.5rem !important; white-space: normal !important; word-break: normal !important; font-size: 0.95rem !important; } /* Dropdown parent (How to Save Tax / How to Save Money) */ nav#navbar.open .nav-dropdown, #navbar.open .nav-dropdown { display: block !important; width: 100% !important; align-items: initial !important; } /* Dropdown sub-menu on mobile: inline, full width, indented */ nav#navbar.open .nav-dropdown-menu, #navbar.open .nav-dropdown-menu { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding-left: 1rem !important; } nav#navbar.open .nav-dropdown-menu li a, #navbar.open .nav-dropdown-menu li a { white-space: normal !important; word-break: normal !important; padding: 0.5rem 0.5rem !important; font-size: 0.82rem !important; } nav#navbar.open .nav-dropdown-menu.two-col, #navbar.open .nav-dropdown-menu.two-col { display: block !important; grid-template-columns: 1fr !important; } /* Force collapse/expand on mobile — beats any page-level max-height */ nav#navbar.open .nav-dropdown .nav-dropdown-menu, #navbar.open .nav-dropdown .nav-dropdown-menu { position: static !important; left: 0 !important; right: auto !important; top: auto !important; transform: none !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.35s ease !important; opacity: 1 !important; visibility: visible !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 0 0 1rem !important; } /* CRITICAL: override desktop .dd-open transform:translateX(-50%) that crops items on mobile */ nav#navbar.open .nav-dropdown.dd-open .nav-dropdown-menu, nav#navbar.open .nav-dropdown.dd-open .nav-dropdown-menu.two-col, #navbar.open .nav-dropdown.dd-open .nav-dropdown-menu, #navbar.open .nav-dropdown.dd-open .nav-dropdown-menu.two-col { max-height: 1400px !important; transform: none !important; position: static !important; left: 0 !important; min-width: 0 !important; width: 100% !important; } /* Chevron arrow for dropdown parents — shows user there's more inside */ nav#navbar.open .nav-dropdown > a::after, #navbar.open .nav-dropdown > a::after { content: "▾" !important; display: inline-block !important; margin-left: auto !important; font-size: 0.85rem !important; color: #FF4D6A !important; border: none !important; width: auto !important; height: auto !important; transition: transform 0.25s ease !important; } nav#navbar.open .nav-dropdown > a, #navbar.open .nav-dropdown > a { display: flex !important; justify-content: space-between !important; align-items: center !important; } nav#navbar.open .nav-dropdown.dd-open > a::after, #navbar.open .nav-dropdown.dd-open > a::after { transform: rotate(180deg) !important; } /* Hide the duplicate BillCraft CTA inside the mobile menu panel — it's already in the header */ nav#navbar.open .nav-links .mob-cta, nav#navbar.open .nav-links li.mob-cta, #navbar.open .nav-links .mob-cta, nav#navbar.open .nav-links .nav-cta, #navbar.open .nav-links .nav-cta { display: none !important; } /* Restore BillCraft CTA in the header on mobile (handles both nav layouts) */ nav#navbar > .nav-cta, nav.navbar > .nav-cta, #navbar > .nav-cta { display: inline-flex !important; align-items: center !important; } nav#navbar .nav-right, nav.navbar .nav-right, #navbar .nav-right { display: flex !important; align-items: center !important; gap: 0.5rem !important; } nav#navbar.open .nav-right, nav.navbar.open .nav-right, #navbar.open .nav-right { display: flex !important; } nav#navbar .nav-cta, nav.navbar .nav-cta, #navbar .nav-cta { padding: 0.5rem 0.9rem !important; font-size: 0.76rem !important; } /* ========== Right-flyout dropdown (iOS-style side panel) ========== */ nav#navbar.open .nav-dropdown .nav-dropdown-menu, #navbar.open .nav-dropdown .nav-dropdown-menu { position: fixed !important; top: 62px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: calc(100vh - 62px) !important; max-height: calc(100vh - 62px) !important; background: rgba(10,10,18,0.98) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; transform: translateX(100%) !important; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 0 2rem !important; z-index: 100 !important; box-sizing: border-box !important; display: block !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; border: none !important; box-shadow: none !important; grid-template-columns: 1fr !important; } nav#navbar.open .nav-dropdown.dd-open .nav-dropdown-menu, nav#navbar.open .nav-dropdown.dd-open .nav-dropdown-menu.two-col, #navbar.open .nav-dropdown.dd-open .nav-dropdown-menu, #navbar.open .nav-dropdown.dd-open .nav-dropdown-menu.two-col { transform: translateX(0) !important; max-height: calc(100vh - 62px) !important; width: 100vw !important; min-width: 0 !important; left: 0 !important; position: fixed !important; } nav#navbar.open .nav-dropdown .nav-dropdown-menu > li > a, #navbar.open .nav-dropdown .nav-dropdown-menu > li > a { padding: 0.85rem 1.25rem !important; font-size: 0.95rem !important; display: flex !important; align-items: center !important; gap: 0.75rem !important; white-space: normal !important; border-radius: 0 !important; border-bottom: 1px solid rgba(244,241,234,0.05) !important; } html.light-theme nav#navbar.open .nav-dropdown .nav-dropdown-menu, html.light-theme #navbar.open .nav-dropdown .nav-dropdown-menu { background: rgba(245,245,247,0.98) !important; } html.light-theme nav#navbar.open .nav-dropdown .nav-dropdown-menu > li > a { border-bottom-color: rgba(0,0,0,0.06) !important; } /* Back button injected by mobile-nav.js */ .mobile-nav-back { display: flex !important; align-items: center !important; gap: 0.6rem !important; padding: 1rem 1.25rem !important; border-bottom: 1px solid rgba(244,241,234,0.1) !important; cursor: pointer !important; color: #FF4D6A !important; font-family: 'Inter', sans-serif !important; font-size: 0.88rem !important; font-weight: 500 !important; list-style: none !important; background: transparent !important; user-select: none !important; -webkit-tap-highlight-color: rgba(255,77,106,0.15); } .mobile-nav-back::before { content: "←" !important; font-size: 1.3rem !important; line-height: 1 !important; } .mobile-nav-back .mobile-nav-back-title { font-weight: 600 !important; color: #F4F1EA !important; } html.light-theme .mobile-nav-back { border-bottom-color: rgba(0,0,0,0.08) !important; color: #D7344F !important; } html.light-theme .mobile-nav-back .mobile-nav-back-title { color: #1A1A2E !important; } } /* Hide back button on desktop */ @media (min-width: 901px) { .mobile-nav-back { display: none !important; } } /* Light theme version of the mobile panel */ html.light-theme nav#navbar.open .nav-links, html.light-theme #navbar.open .nav-links { background: rgba(245,245,247,0.97) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } html.light-theme nav#navbar.open .nav-links > li > a, html.light-theme #navbar.open .nav-links > li > a { color: #1A1A2E !important; } }