/* ============================================================================= * PVACodes — light / dark theming layer * ----------------------------------------------------------------------------- * Loaded AFTER style.css and mobile-overrides.css. Nothing here changes the * light theme's appearance: every dark rule is scoped under * html[data-theme="dark"], and the :root block only *names* the colours the * site was already using. * * Companion file: theme-dark.css — machine-derived from style.css and * mobile-overrides.css, it flips the ~700 page-specific colour declarations. * This file carries the tokens, the toggle control, and the framework-level * (Bootstrap / form / table / modal) coverage that the generator can't see. * * The attribute is written by the inline no-flash script in * includes2/head.php before first paint. * ========================================================================== */ /* ---------------------------------------------------------------- 1. tokens */ :root { color-scheme: light; --pva-bg: #ffffff; --pva-bg-alt: #f8f9fa; --pva-surface: #ffffff; --pva-surface-2: #f8f9fa; --pva-surface-3: #eef2f6; --pva-text: #16202b; --pva-text-body: #333333; --pva-text-muted: #666666; --pva-text-faint: #999999; --pva-border: #e5edf3; --pva-border-strong: #d6e1ea; --pva-brand: #03a9f4; --pva-brand-strong: #0288d1; --pva-brand-soft: rgba(3, 169, 244, 0.10); --pva-shadow: 0 6px 24px rgba(16, 32, 52, 0.08); --pva-shadow-lg: 0 12px 34px rgba(16, 32, 52, 0.12); --pva-ad-bg: #f8fafc; --pva-ad-border: #e5edf3; --pva-code-bg: #2d3748; --pva-code-text: #e2e8f0; --pva-ok: #1e7e34; --pva-warn: #a86a00; --pva-danger: #c62828; /* ---- literals lifted out of style="" attributes ----------------------- * Inline attributes outrank every stylesheet, so theme-dark.css cannot * reach them. Each literal became a variable whose LIGHT value is the * original, byte for byte — light mode renders exactly as it did — and * whose dark value is the mapped one. Generated by tools/inline_attrs.py; * if you add a new hard-coded colour to a style="" attribute, re-run it. */ --pva-bgc-f4f7fb: #f4f7fb; --pva-bgc-f7f9fc: #f7f9fc; --pva-bgc-fff: #fff; --pva-brd-dbe1e8: #dbe1e8; --pva-brd-e5e8ec: #e5e8ec; --pva-brd-e6e9ef: #e6e9ef; --pva-brd-e9ecef: #e9ecef; --pva-brd-f1f3f5: #f1f3f5; --pva-txt-059669: #059669; --pva-txt-0a58ca: #0a58ca; --pva-txt-0b5ed7: #0b5ed7; --pva-txt-0d1b2a: #0d1b2a; --pva-txt-0d6efd: #0d6efd; --pva-txt-0f172a: #0f172a; --pva-txt-198754: #198754; --pva-txt-334155: #334155; --pva-txt-374151: #374151; --pva-txt-444: #444; --pva-txt-475467: #475467; --pva-txt-475569: #475569; --pva-txt-555: #555; --pva-txt-64748b: #64748b; --pva-txt-6c757d: #6c757d; --pva-txt-8090a8: #8090a8; --pva-txt-888: #888; --pva-txt-dc2626: #dc2626; } html[data-theme="dark"] { color-scheme: dark; --pva-bg: #0e141d; --pva-bg-alt: #0b1119; --pva-surface: #131b26; --pva-surface-2: #1a2432; --pva-surface-3: #212e3f; --pva-text: #e6edf5; --pva-text-body: #cbd6e2; --pva-text-muted: #9fb0c3; --pva-text-faint: #7d8ea1; --pva-border: #253244; --pva-border-strong: #31415a; --pva-brand: #38bdf8; --pva-brand-strong: #0ea5e9; --pva-brand-soft: rgba(56, 189, 248, 0.14); --pva-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); --pva-shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.65); --pva-ad-bg: #111a24; --pva-ad-border: #1f2b3a; --pva-code-bg: #0b1119; --pva-code-text: #cbd6e2; --pva-ok: #4ade80; --pva-warn: #fbbf24; --pva-danger: #f87171; /* inline-attribute literals, dark values — see the light block above */ --pva-bgc-f4f7fb: #141920; --pva-bgc-f7f9fc: #141920; --pva-bgc-fff: #131b26; --pva-brd-dbe1e8: #253244; --pva-brd-e5e8ec: #253244; --pva-brd-e6e9ef: #253244; --pva-brd-e9ecef: #253244; --pva-brd-f1f3f5: #253244; --pva-txt-059669: #06a875; --pva-txt-0a58ca: #3d88f5; --pva-txt-0b5ed7: #3d88f5; --pva-txt-0d1b2a: #e6edf5; --pva-txt-0d6efd: #3f8cfd; --pva-txt-0f172a: #e6edf5; --pva-txt-198754: #1ea466; --pva-txt-334155: #cbd6e2; --pva-txt-374151: #cbd6e2; --pva-txt-444: #cbd6e2; --pva-txt-475467: #9fb0c3; --pva-txt-475569: #9fb0c3; --pva-txt-555: #9fb0c3; --pva-txt-64748b: #9fb0c3; --pva-txt-6c757d: #9fb0c3; --pva-txt-8090a8: #7d8ea1; --pva-txt-888: #7d8ea1; --pva-txt-dc2626: #e55d5d; } /* ---------------------------------------------------- 2. the toggle control */ /* Reads as a control at a glance: a brand-tinted disc with a brand-coloured icon. The first version used a white disc with a hairline #d6e1ea border and grey icon, which disappeared into the white header. */ .pva-theme-toggle { --size: 40px; width: var(--size); height: var(--size); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 1.5px solid var(--pva-brand); border-radius: 50%; background: var(--pva-brand-soft); color: var(--pva-brand-strong); cursor: pointer; line-height: 1; font-size: 17px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .pva-theme-toggle:hover, .pva-theme-toggle:focus-visible { background: var(--pva-brand); border-color: var(--pva-brand); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(3, 169, 244, 0.35); outline: none; } html[data-theme="dark"] .pva-theme-toggle:hover, html[data-theme="dark"] .pva-theme-toggle:focus-visible { color: #05121c; box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3); } /* The labelled row inside the off-canvas menu. */ .pva-theme-toggle--menu { --size: auto; width: 100%; height: auto; justify-content: center; border-radius: 10px; padding: 11px 16px; font-size: 15px; font-weight: 600; margin-top: 10px; } .pva-theme-label-light, .pva-theme-label-dark { display: none; } .pva-theme-toggle--menu .pva-theme-label-light { display: inline; } html[data-theme="dark"] .pva-theme-toggle--menu .pva-theme-label-light { display: none; } html[data-theme="dark"] .pva-theme-toggle--menu .pva-theme-label-dark { display: inline; } /* Sun shows in dark mode (click = go light); moon shows in light mode. */ .pva-theme-toggle .pva-icon-sun { display: none; } .pva-theme-toggle .pva-icon-moon { display: inline-block; } html[data-theme="dark"] .pva-theme-toggle .pva-icon-sun { display: inline-block; } html[data-theme="dark"] .pva-theme-toggle .pva-icon-moon { display: none; } .pva-theme-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Which copies show where. Desktop gets the icon button only; mobile gets the top-bar icon AND the labelled row inside the burger menu, since that is where people look for a setting. */ .site-nav-auth { align-items: center; } .pva-theme-toggle--mobile { margin-left: auto; margin-right: 10px; } @media (min-width: 992px) { .pva-theme-toggle--mobile, .pva-theme-toggle--menu { display: none !important; } } @media (max-width: 991.98px) { .pva-theme-toggle--desktop { display: none !important; } } /* Colour-swap animation, suppressed until after first paint so a page load never animates from the wrong theme. */ html.pva-theme-ready body, html.pva-theme-ready #header-content, html.pva-theme-ready #footer_content, html.pva-theme-ready .card, html.pva-theme-ready section { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease; } @media (prefers-reduced-motion: reduce) { html.pva-theme-ready * { transition: none !important; } } /* ------------------------------------------------------- 3. dark: page base */ html[data-theme="dark"] body { background-color: var(--pva-bg); color: var(--pva-text-body); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--pva-text); } /* Body links only — the ones nothing else styles. * * Two escapes, both learned the hard way: * [class] — a classed link already has a rule of its own (a button, a badge) * that is correct in both themes. Recolouring those, even to * `inherit`, is what turned the white CTA button's label * white-on-white. * :where() — contributes ZERO specificity, so the whole selector scores * (0,1,0) and ANY authored rule outranks it. Without it this rule * was (0,2,1) and beat `.seo-hub-pages a`, a classless painted * as a solid #0284c7 button: brand blue on blue, 1.9:1. * Descendant-styled classless links are common in this codebase, * so losing every specificity contest is the correct behaviour. */ html[data-theme="dark"] :where(a:not([class])) { color: var(--pva-brand); } html[data-theme="dark"] :where(a:not([class]):hover), html[data-theme="dark"] :where(a:not([class]):focus) { color: var(--pva-brand-strong); } /* Bare links sitting on a band that stays coloured in dark mode. */ html[data-theme="dark"] .banner_area a:not([class]), html[data-theme="dark"] .cta-section a:not([class]), html[data-theme="dark"] .page-banner a:not([class]), html[data-theme="dark"] .stats-section a:not([class]), html[data-theme="dark"] .stats-panel a:not([class]), html[data-theme="dark"] .api-cta a:not([class]) { color: #fff; } html[data-theme="dark"] #footer_content .footer_bottom a:not([class]) { color: rgba(255, 255, 255, 0.8); } html[data-theme="dark"] #footer_content .footer_bottom a:not([class]):hover { color: #fff; } html[data-theme="dark"] hr { border-color: var(--pva-border); opacity: 1; } html[data-theme="dark"] ::selection { background: rgba(56, 189, 248, 0.3); color: #fff; } html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--pva-bg-alt); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--pva-surface-3); border-radius: 8px; border: 3px solid var(--pva-bg-alt); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--pva-border-strong); } /* --------------------------------------------- 4. dark: header / nav / logo */ html[data-theme="dark"] #header-content { border-bottom: 1px solid var(--pva-border); } html[data-theme="dark"] #header-content .navbar-toggler { border-color: var(--pva-border-strong); } html[data-theme="dark"] #header-content .navbar-toggler-icon { /* Bootstrap ships a dark-ink hamburger as a data-URI; recolour it. */ filter: invert(1) brightness(1.6); } html[data-theme="dark"] .offcanvas, html[data-theme="dark"] #main-nav-expand, html[data-theme="dark"] #main-nav-expand .offcanvas-header, html[data-theme="dark"] #main-nav-expand .offcanvas-body { background-color: var(--pva-surface) !important; color: var(--pva-text-body); } html[data-theme="dark"] .offcanvas-header { border-bottom: 1px solid var(--pva-border); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(220%); } /* The logo is black-inked artwork on transparency — swap in the light-inked variant rather than filtering it, which would kill the brand colours. */ .pva-logo-dark { display: none; } html[data-theme="dark"] .pva-logo-light { display: none; } html[data-theme="dark"] .pva-logo-dark { display: inline-block; } /* The AdSense strip's background is set inline in header.php via these vars. */ html[data-theme="dark"] .site-ad-header { background: var(--pva-ad-bg) !important; border-bottom-color: var(--pva-ad-border) !important; } /* ---------------------------------------------------- 5. dark: the footer */ /* Already dark in light mode (#2c3e50) — deepen it so it reads as the bottom of a dark page rather than a lighter slab floating on one. */ html[data-theme="dark"] #footer_content .footer_bottom { background: linear-gradient(135deg, #10192a 0%, #142033 100%); border-top: 1px solid var(--pva-border); } /* ------------------------------------------- 6. dark: Bootstrap components */ html[data-theme="dark"] .card, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .popover, html[data-theme="dark"] .toast { background-color: var(--pva-surface); color: var(--pva-text-body); border-color: var(--pva-border); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: var(--pva-surface-2); border-color: var(--pva-border); } html[data-theme="dark"] .dropdown-item { color: var(--pva-text-body); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--pva-surface-2); color: var(--pva-text); } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-body, html[data-theme="dark"] .bg-light { background-color: var(--pva-surface) !important; } html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-black { color: var(--pva-text) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--pva-text-muted) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-end, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-light { border-color: var(--pva-border) !important; } /* Forms */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] select { background-color: var(--pva-surface-2); color: var(--pva-text); border-color: var(--pva-border-strong); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus { background-color: var(--pva-surface-2); color: var(--pva-text); border-color: var(--pva-brand); box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.2); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] input::placeholder { color: var(--pva-text-faint); } html[data-theme="dark"] .form-label, html[data-theme="dark"] .form-check-label, html[data-theme="dark"] label { color: var(--pva-text-body); } html[data-theme="dark"] .form-check-input { background-color: var(--pva-surface-2); border-color: var(--pva-border-strong); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--pva-brand-strong); border-color: var(--pva-brand-strong); } /* Bootstrap draws the select caret as a dark data-URI SVG. */ html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239fb0c3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } /* Tables */ html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--pva-text-body); --bs-table-striped-bg: rgba(255, 255, 255, 0.035); --bs-table-striped-color: var(--pva-text-body); --bs-table-hover-bg: rgba(56, 189, 248, 0.08); --bs-table-hover-color: var(--pva-text); color: var(--pva-text-body); border-color: var(--pva-border); } html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--pva-border); } html[data-theme="dark"] .table thead th { color: var(--pva-text); background-color: var(--pva-surface-2); border-color: var(--pva-border); } html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > th, html[data-theme="dark"] .table-light > td { --bs-table-bg: var(--pva-surface-2); color: var(--pva-text); } /* Bootstrap's #0d6efd manages only 3.9:1 on our darkest surface. The generator lifts it wherever the site declares it, but Bootstrap's own utilities are loaded from a CDN and never pass through it. */ html[data-theme="dark"] .text-primary, html[data-theme="dark"] .link-primary, html[data-theme="dark"] .btn-outline-primary { color: var(--pva-brand) !important; } html[data-theme="dark"] .btn-outline-primary { border-color: var(--pva-brand); } html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .btn-outline-primary:focus { background-color: var(--pva-brand-strong); border-color: var(--pva-brand-strong); color: #05121c !important; } /* An unqualified .btn keeps Bootstrap's #212529 label, which is invisible on a dark surface. Variant classes (.btn-primary, .btn-outline-*) bring their own colour and must not be touched — hence the [class*="btn-"] escape. */ html[data-theme="dark"] .btn:not([class*="btn-"]) { color: var(--pva-text-body); } /* Buttons that were built out of light neutrals */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-secondary { background-color: var(--pva-surface-2); border-color: var(--pva-border-strong); color: var(--pva-text); } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-secondary:hover { background-color: var(--pva-surface-3); border-color: var(--pva-brand); color: var(--pva-text); } /* Accordions, tabs, pagination, alerts */ html[data-theme="dark"] .accordion, html[data-theme="dark"] .accordion-item { background-color: var(--pva-surface); border-color: var(--pva-border); color: var(--pva-text-body); } html[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--pva-brand-strong); color: #fff; } html[data-theme="dark"] .accordion-button:not(.collapsed)::after { filter: none; } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--pva-border); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--pva-text-muted); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--pva-surface); border-color: var(--pva-border) var(--pva-border) var(--pva-surface); color: var(--pva-text); } html[data-theme="dark"] .page-link { background-color: var(--pva-surface); border-color: var(--pva-border); color: var(--pva-brand); } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--pva-brand-strong); border-color: var(--pva-brand-strong); color: #fff; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--pva-surface-2); color: var(--pva-text-faint); } html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-primary { background-color: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); color: #bae6fd; } html[data-theme="dark"] .alert-success { background-color: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); color: #bbf7d0; } html[data-theme="dark"] .alert-warning { background-color: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: #fde68a; } html[data-theme="dark"] .alert-danger { background-color: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: #fecaca; } html[data-theme="dark"] .badge.bg-light { color: var(--pva-text) !important; } /* Code */ html[data-theme="dark"] pre, html[data-theme="dark"] code, html[data-theme="dark"] kbd { background-color: var(--pva-code-bg); color: var(--pva-code-text); } html[data-theme="dark"] pre { border: 1px solid var(--pva-border); } /* ------------------------------------------- 7. dark: depth and separation */ /* On white, cards separate from the page by shadow alone. On a dark page a shadow is close to invisible, so the same cards need a hairline border. */ html[data-theme="dark"] .card, html[data-theme="dark"] .feature_card, html[data-theme="dark"] .work_card, html[data-theme="dark"] .pricing-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .benefit-card, html[data-theme="dark"] .mission-card, html[data-theme="dark"] .step-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .example-card, html[data-theme="dark"] .sdk-card, html[data-theme="dark"] .sidebar-widget, html[data-theme="dark"] .blog-list-item, html[data-theme="dark"] .blog-list-panel, html[data-theme="dark"] .contact-info-panel, html[data-theme="dark"] .legal-panel, html[data-theme="dark"] .thank-you-panel, html[data-theme="dark"] .catalog-panel, html[data-theme="dark"] .catalog-tile, html[data-theme="dark"] .inner_columns, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .feature-item, html[data-theme="dark"] .contact-method, html[data-theme="dark"] .api-section, html[data-theme="dark"] .api-nav { border: 1px solid var(--pva-border); box-shadow: var(--pva-shadow); } /* Photographic and screenshot imagery is often authored on white; take a little glare off it without desaturating illustrations. */ html[data-theme="dark"] img:not([src*=".svg"]):not(.pva-no-dim) { filter: brightness(0.94); } html[data-theme="dark"] .navbar-brand img { filter: none; } /* ------------------------------------------------------ 8. print = always light */ @media print { html[data-theme="dark"] { color-scheme: light; } .pva-theme-toggle { display: none !important; } }