/** * Theme-aware header logos: BackupFort_full.png (light) vs BackupFort_fullw.png (dark). * Requires | "dark"> (set by theme scripts) or prefers-color-scheme when unset. */ .logo-swap { position: relative; display: inline-block; vertical-align: middle; flex-shrink: 0; } .logo-swap .brand-img, .logo-swap .nav-logo-img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: auto; object-fit: contain; } /* Inner pages / auth — matches .brand-img sizing */ .brand .logo-swap { width: min(148px, 42vw); height: var(--nav-logo-h, 28px); } .brand .logo-swap .brand-img { height: var(--nav-logo-h, 28px); max-width: min(148px, 42vw); } /* Home nav */ .nav-logo .logo-swap--nav { width: min(160px, 48vw); height: var(--nav-logo-h, 28px); } .nav-logo .logo-swap--nav .nav-logo-img { height: var(--nav-logo-h, 28px); max-width: min(160px, 48vw); } /* Home footer */ .nav-logo .logo-swap--footer { width: min(140px, 45vw); height: 28px; } .nav-logo .logo-swap--footer .nav-logo-img { height: 28px; max-width: min(140px, 45vw); } .brand-logo--light, .nav-logo-img.brand-logo--light { display: none; } .brand-logo--dark, .nav-logo-img.brand-logo--dark { display: block; } [data-theme="light"] .brand-logo--light, [data-theme="light"] .nav-logo-img.brand-logo--light { display: block; } [data-theme="light"] .brand-logo--dark, [data-theme="light"] .nav-logo-img.brand-logo--dark { display: none; } [data-theme="dark"] .brand-logo--dark, [data-theme="dark"] .nav-logo-img.brand-logo--dark { display: block; } [data-theme="dark"] .brand-logo--light, [data-theme="dark"] .nav-logo-img.brand-logo--light { display: none; } /* Before theme script runs: follow system preference */ html:not([data-theme]) .brand-logo--dark, html:not([data-theme]) .nav-logo-img.brand-logo--dark { display: block; } html:not([data-theme]) .brand-logo--light, html:not([data-theme]) .nav-logo-img.brand-logo--light { display: none; } @media (prefers-color-scheme: light) { html:not([data-theme]) .brand-logo--light, html:not([data-theme]) .nav-logo-img.brand-logo--light { display: block; } html:not([data-theme]) .brand-logo--dark, html:not([data-theme]) .nav-logo-img.brand-logo--dark { display: none; } }