/* Simple Landlord Tools — dark theme Scoped entirely under [data-theme="dark"] on , so it changes nothing unless that attribute is set (see the inline script in of each page). Loaded LAST on every page so it can win over site-polish.css's !important rules for the shared header/nav/footer. Intentionally NOT themed: any "*-preview" class (agreement-preview, receipt-preview, inspection-preview, etc.) - those represent an actual printed document and should stay white/black in both themes, the same way a word processor keeps the "page" white even in dark mode. */ [data-theme="dark"] { --dk-bg: #0f1720; --dk-bg-alt: #16212c; --dk-card: #182430; --dk-border: #2b3a48; --dk-text: #dbe4ec; --dk-muted: #8fa0b0; --dk-navy: #2c5f9c; --dk-navy-dark: #1c3a5e; --dk-green: #3fa85c; /* Redefine the site's OWN variable names (three naming schemes exist across style.css / site-polish.css / portal.css) so every rule that already reads var(--bg), var(--slt-bg), var(--portal-bg), etc. picks up the dark values automatically - this is what actually makes sections like .home-workspace, .portal-main, and similar wrappers switch color without needing an explicit override for each one. */ --bg: var(--dk-bg); --text: var(--dk-text); --muted: var(--dk-muted); --border: var(--dk-border); --white: var(--dk-card); --slt-bg: var(--dk-bg); --slt-text: var(--dk-text); --slt-muted: var(--dk-muted); --slt-border: var(--dk-border); --slt-white: var(--dk-card); --portal-bg: var(--dk-bg); --portal-text: var(--dk-text); --portal-muted: var(--dk-muted); --portal-border: var(--dk-border); --portal-card: var(--dk-card); /* --navy / --navy-dark (and the slt-/portal- equivalents) are deliberately NOT remapped here - the site uses them for both heading text AND bar backgrounds (nav/footer), which need to move in opposite directions in dark mode. Headings get a bright override below instead; nav/footer keep their own explicit dark background further down. */ } [data-theme="dark"] body{background:var(--dk-bg)!important;color:var(--dk-text)!important} [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:#eaf1f7!important} /* Header / nav / footer */ [data-theme="dark"] .site-header{background:var(--dk-bg-alt)!important;border-bottom:1px solid var(--dk-border)!important} [data-theme="dark"] .brand-name,[data-theme="dark"] .brand h1{color:#eaf1f7!important} [data-theme="dark"] .brand-tagline,[data-theme="dark"] .brand p{color:var(--dk-muted)!important} [data-theme="dark"] .contact-info,[data-theme="dark"] .contact{color:#cfe0ee!important} [data-theme="dark"] .site-nav{background:linear-gradient(90deg,var(--dk-navy-dark),var(--dk-navy))!important} [data-theme="dark"] .site-footer{background:linear-gradient(90deg,var(--dk-navy-dark),var(--dk-navy))!important} /* Theme toggle button, sits in the header */ [data-theme="dark"] .theme-toggle-btn{background:var(--dk-card);border-color:var(--dk-border);color:var(--dk-text)} .theme-toggle-btn{border:1px solid #cfd8e1;background:#fff;border-radius:8px;padding:8px 11px;font-size:1rem;line-height:1;cursor:pointer;margin-left:12px} .theme-toggle-btn:hover{filter:brightness(0.96)} /* Hero banners already use a dark gradient - fine as-is in both themes */ /* Cards / sections / forms, across all pages incl. tool pages */ [data-theme="dark"] .content-card,[data-theme="dark"] .contact-box,[data-theme="dark"] .form-card, [data-theme="dark"] .form-section,[data-theme="dark"] .portal-card,[data-theme="dark"] .state-picker, [data-theme="dark"] .law-section,[data-theme="dark"] .federal-card,[data-theme="dark"] .lease-check, [data-theme="dark"] .action-bar,[data-theme="dark"] .button-row,[data-theme="dark"] .metric, [data-theme="dark"] .tool-card,[data-theme="dark"] .trust-grid>*, [data-theme="dark"] .sidebar-card,[data-theme="dark"] .home-feature, [data-theme="dark"] .feature-card,[data-theme="dark"] .journey-founder,[data-theme="dark"] .resource-card, [data-theme="dark"] .stat-card,[data-theme="dark"] .why-card,[data-theme="dark"] .faq-list, [data-theme="dark"] .portal-modal,[data-theme="dark"] .portal-sidebar,[data-theme="dark"] .portal-table-wrap, [data-theme="dark"] .summary-box,[data-theme="dark"] .task-item,[data-theme="dark"] .tenant-invite-card, [data-theme="dark"] .pwa-install-help-card,[data-theme="dark"] .signature-check,[data-theme="dark"] .notice-choice{ background:var(--dk-card)!important;border-color:var(--dk-border)!important;color:var(--dk-text)!important } [data-theme="dark"] .sidebar-card p,[data-theme="dark"] .home-feature p,[data-theme="dark"] .feature-copy p{color:var(--dk-muted)!important} [data-theme="dark"] .popular-card nav a,[data-theme="dark"] .knowledge-card summary{color:var(--dk-text)!important;border-color:var(--dk-border)!important} [data-theme="dark"] .popular-card nav a:hover{color:#5fc07e!important} [data-theme="dark"] .tool-card img{background:transparent!important} /* Light-green accent boxes (About page mission/journey, homepage benefits) - keep them visually distinct from plain cards, just darkened */ [data-theme="dark"] .feature,[data-theme="dark"] .journey-mission{ background:#16261c!important;border-color:#274a34!important;color:var(--dk-text)!important } /* Light-yellow callout/warning boxes - darken but keep the amber tint */ [data-theme="dark"] .legal-note,[data-theme="dark"] .portal-note{ background:#3a3218!important;border-color:#5a4c22!important;color:#f0dfa0!important } /* "Secondary" button style (light-gray fill) */ [data-theme="dark"] .secondary{background:var(--dk-bg-alt)!important;border-color:var(--dk-border)!important;color:var(--dk-text)!important} [data-theme="dark"] .trust-strip{background:var(--dk-bg)!important;border-color:var(--dk-border)!important} [data-theme="dark"] .law-main{background:var(--dk-bg)!important} [data-theme="dark"] .picker-hint{background:#3a1f1f!important;border-color:#5a3030!important;color:#f0a898!important} [data-theme="dark"] .content-card h2,[data-theme="dark"] .form-card h2,[data-theme="dark"] .form-section h3, [data-theme="dark"] .portal-card h1,[data-theme="dark"] .portal-card h2,[data-theme="dark"] .portal-card h3, [data-theme="dark"] .state-picker h2,[data-theme="dark"] .law-section h2,[data-theme="dark"] .federal-card h3, [data-theme="dark"] .tool-card h3{ color:#eaf1f7!important } [data-theme="dark"] .tool-card p{color:var(--dk-muted)!important} /* FAQ accordion */ [data-theme="dark"] .faq-list{background:var(--dk-card)!important;border-color:var(--dk-border)!important} [data-theme="dark"] details{border-color:var(--dk-border)!important} [data-theme="dark"] details summary{color:var(--dk-text)} [data-theme="dark"] details p{color:var(--dk-muted)!important} [data-theme="dark"] .form-label,[data-theme="dark"] .portal-form label,[data-theme="dark"] label{color:#c7d4e0} [data-theme="dark"] .source-note,[data-theme="dark"] .portal-subtitle,[data-theme="dark"] .portal-muted, [data-theme="dark"] .brand-tagline,[data-theme="dark"] small{color:var(--dk-muted)!important} /* Inputs, selects, textareas everywhere */ [data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea, [data-theme="dark"] .form-control,[data-theme="dark"] .form-select{ background:var(--dk-bg-alt)!important;border-color:var(--dk-border)!important;color:var(--dk-text)!important } [data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#5f7284!important} [data-theme="dark"] .utility-grid label,[data-theme="dark"] .picker-row select{background:var(--dk-bg-alt)!important;border-color:var(--dk-border)!important;color:var(--dk-text)!important} /* State/law directory grid */ [data-theme="dark"] .state-grid>a{background:var(--dk-card)!important;border-color:var(--dk-border)!important;color:#cfe0ee!important} [data-theme="dark"] .state-grid>a:hover{background:#20303e!important;border-color:#3a5064!important} [data-theme="dark"] .law-checklist div{background:var(--dk-bg-alt)!important;color:var(--dk-text)!important} [data-theme="dark"] .law-alert{background:#3a3218!important;border-color:#5a4c22!important;color:#f0dfa0!important} /* Portal sidebar / dashboard metrics */ [data-theme="dark"] .portal-sidebar{background:var(--dk-bg-alt)!important;border-color:var(--dk-border)!important} [data-theme="dark"] .portal-sidebar a{color:var(--dk-text)!important} [data-theme="dark"] .portal-sidebar a.active{background:var(--dk-navy)!important;color:#fff!important} [data-theme="dark"] .sidebar-group{color:var(--dk-muted)!important} /* Links stay legible on dark backgrounds */ [data-theme="dark"] a{color:#6fb3e0} [data-theme="dark"] .contact-box a,[data-theme="dark"] .federal-card a,[data-theme="dark"] .state-grid a, [data-theme="dark"] .portal-link{color:#5fc07e} /* Buttons keep their existing green/navy fill - already readable on dark */ @media print{[data-theme="dark"] *{background:#fff!important;color:#000!important}}