/* hq-themepersist (1 Nov 2026) — pending_fixes/theme/src/hq-theme.css with every LIGHT tool-page rule removed: dark half + the header sun/moon button only. Guest 31 Oct 8:22 PM: home is dark, but My Business / Tools / Store open light. Light tool pages stay exactly as today (no redesign). */ html[data-theme="dark"]{color-scheme:dark} html[data-theme="light"]{color-scheme:light} /* ---------- header sun/moon button (tool-style headers; main pages already have .theme-btn) ---------- */ .hq-theme-btn{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;margin:0 2px 0 0;border-radius:999px; border:1px solid rgba(19,32,63,.16);background:transparent;color:#13203f;cursor:pointer;-webkit-tap-highlight-color:transparent} .hq-theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .hq-theme-btn .hqt-moon{fill:currentColor;stroke:none} .hq-theme-btn .hqt-sun{display:none} html[data-theme="dark"] .hq-theme-btn .hqt-sun{display:block} html[data-theme="dark"] .hq-theme-btn .hqt-moon{display:none} .hq-theme-btn:hover{background:rgba(29,70,168,.08)} .hq-theme-btn:focus-visible{outline:3px solid #acc0ec;outline-offset:2px} html[data-theme="dark"] .hq-theme-btn{color:#F7FBFF;border-color:rgba(150,175,215,.35)} html[data-theme="dark"] .hq-theme-btn:hover{background:rgba(255,255,255,.08)} .hq-theme-btn-end{margin:0 0 0 6px;align-self:center} @media (max-width:400px){.hq-theme-btn{width:32px;height:32px}.hq-theme-btn svg{width:17px;height:17px}} @media print{.hq-theme-btn{display:none!important}} /* ===================================================================================== LIGHT — tool pages (scoped to data-hq-kind=tool: main pages keep home.css's own themes untouched): the big navy blocks become light sections with navy text ===================================================================================== */ h2,h3),h2,h3),h2,h3){color:#13203f} h3,h4,b,strong){color:#13203f} /* colour pass marks (hq-theme.js): a big navy block found at runtime -> light section */ /* ===================================================================================== DARK — tool pages: same look as the main site's dark theme ===================================================================================== */ html[data-theme="dark"][data-hq-kind="tool"] body{--bg:#0E1D3A;--surface:#1A2A47;--ink:#F7FBFF;--ink-2:rgba(247,251,255,.80);--muted:#B3C0D7; --line:rgba(150,175,215,.28);--line-2:rgba(150,175,215,.42);--accent-soft:rgba(144,177,222,.14); --ok:#a9beeb;--ok-soft:rgba(169,190,235,.12);--warn:#bbcbef;--warn-soft:rgba(172,192,236,.14);--err:#ff8f86;--err-soft:rgba(255,143,134,.13)} :where(html[data-theme="dark"][data-hq-kind="tool"]) body{background:#0E1D3A;color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) :is(h1,h2,h3,h4){color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) a{color:#9DBBF0} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-header{background:rgba(14,29,58,.96);border-bottom-color:rgba(150,175,215,.22)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-header .t-brand img,:where(html[data-theme="dark"][data-hq-kind="tool"]) .t-footer img{background:#fff;border-radius:6px} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-nav a{color:rgba(247,251,255,.85)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-nav a:hover{background:rgba(255,255,255,.07);color:#fff} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-crumbs{background:#101C34} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-crumbs [aria-current]{color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-eyebrow,:where(html[data-theme="dark"][data-hq-kind="tool"]) .t-badge{color:#9DBBF0} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-card-title,:where(html[data-theme="dark"][data-hq-kind="tool"]) .t-stat b,:where(html[data-theme="dark"][data-hq-kind="tool"]) .t-stat-big, :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-drop strong{color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-step{background:#acc0ec;color:#13203f} :where(html[data-theme="dark"][data-hq-kind="tool"]) :is(.t-input,.t-select,.t-textarea),:where(html[data-theme="dark"][data-hq-kind="tool"]) input[type=color]{background:#101C34;color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) :is(input,textarea)::placeholder{color:rgba(247,251,255,.5)} :where(html[data-theme="dark"][data-hq-kind="tool"]) select option{background:#101C34;color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-seg span{background:transparent;color:rgba(247,251,255,.85)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-seg input:checked+span{background:#5574A2;border-color:#5574A2;color:#fff} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-btn-dark{background:#5574A2;color:#fff} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-btn-dark:hover{background:#46628d} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-btn-primary{background:#2a56c0;color:#fff} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-btn-secondary{background:transparent;color:#F7FBFF;border-color:rgba(150,175,215,.42)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-btn-secondary:hover{border-color:#90B1DE} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-btn-ghost{color:#9DBBF0} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-drop{background:rgba(255,255,255,.03)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-badge-new{background:rgba(172,192,236,.16);color:#bbcbef} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-result{background:#15244a} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-preview,:where(html[data-theme="dark"][data-hq-kind="tool"]) .t-thumb{background:#15244a} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-checker{background-color:#1A2A47;background-image:linear-gradient(45deg,#22355a 25%,transparent 25%),linear-gradient(-45deg,#22355a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#22355a 75%),linear-gradient(-45deg,transparent 75%,#22355a 75%)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-skel{background:linear-gradient(90deg,#1A2A47 25%,#22355a 37%,#1A2A47 63%);background-size:400% 100%} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-scroll-x{background-color:transparent;background-image:none} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-hero{background:linear-gradient(160deg,#13264A 0%,#0A1428 100%)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-footer{background:#0A1428;color:#B3C0D7;border-top:1px solid rgba(150,175,215,.18)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-skip{background:#1A2A47;color:#fff} :where(html[data-theme="dark"][data-hq-kind="tool"]) .t-cta,:where(html[data-theme="dark"][data-hq-kind="tool"]) .t-trust-strip{background:#101C34} /* seller-plan cards / tool chips (hq-sellerplans.css already has dark cards; text colours follow) */ :where(html[data-theme="dark"][data-hq-kind="tool"]) .sp-sec h2,:where(html[data-theme="dark"][data-hq-kind="tool"]) .spc h3,:where(html[data-theme="dark"][data-hq-kind="tool"]) .spc-amt b, :where(html[data-theme="dark"][data-hq-kind="tool"]) .spc-kya{color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) .sp-sec .sp-eye,:where(html[data-theme="dark"][data-hq-kind="tool"]) .spc-more{color:#9DBBF0} :where(html[data-theme="dark"][data-hq-kind="tool"]) .spc-tag,:where(html[data-theme="dark"][data-hq-kind="tool"]) .lcl-note{background:rgba(144,177,222,.14);color:#cfe0fb} /* seller-kit pages */ :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .ft-c>h2,:where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .ft-c>.t-card-title, :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .ft-out .x-kpi b,:where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .ft-out .t-stat-big, :where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-kpi b,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .t-acc-txt h2,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hc h3, :where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hp b{color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-bar .sk-b2+.sk-b2{background:#22355a;color:#F7FBFF} :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-bar .sk-free a,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hc-txt::after, :where(html[data-theme="dark"][data-hq-kind="tool"]) #resources .ft-tiles .tcat-tool>span:last-child::after{color:#9DBBF0} :where(html[data-theme="dark"][data-hq-kind="tool"]) label input:checked+span,:where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .x-seg button[aria-pressed="true"], :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .x-seg button.on,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hub-chips a.is-on, :where(html[data-theme="dark"][data-hq-kind="tool"]) .hub-chips a.is-on{background:#5574A2;border-color:#5574A2;color:#fff} :where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-tiles .tcat-tool .tc-i,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hc .t-tool-ic, :where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hp .t-tool-ic,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .t-acc-ic{background:#22355a} :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-page .t-page-head,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hub-hero{background:linear-gradient(135deg,#1B3260 0%,#13264A 55%,#101C34 100%); box-shadow:inset 0 0 0 1px rgba(150,175,215,.25)} /* ---- explicit rules for the common tool-page pieces (so no white flash before the colour pass runs) ---- */ :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-page .t-card,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .hc{background:#1A2A47;border-color:rgba(150,175,215,.28)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-ft .ft-out .x-kpi{background:#15244a;border-color:rgba(150,175,215,.28)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .t-acc>.t-hub-grid{background:#101C34} :where(html[data-theme="dark"][data-hq-kind="tool"]) .sk-bar .sk-free{background:rgba(172,192,236,.12);border-color:rgba(172,192,236,.35);color:#bbcbef} :where(html[data-theme="dark"][data-hq-kind="tool"]) .ft-hub .t-acc-n,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ap-key,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ap-draft{background:rgba(172,192,236,.14);border-color:rgba(172,192,236,.35);color:#bbcbef} :where(html[data-theme="dark"][data-hq-kind="tool"]) .ap-card{background:#1A2A47;border-color:rgba(150,175,215,.28)} :where(html[data-theme="dark"][data-hq-kind="tool"]) .ap-field input,:where(html[data-theme="dark"][data-hq-kind="tool"]) .ap-copy{background:#101C34;color:#F7FBFF;border-color:rgba(150,175,215,.42)} /* colour pass marks (hq-theme.js): left-over light areas / dark text on tool pages */ html[data-theme="dark"][data-hq-kind="tool"] [data-hqd="1"]{background-color:#1A2A47!important;background-image:none!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd="p"]{background-color:#0E1D3A!important;background-image:none!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd="t"]{background-color:var(--hqd-tint,rgba(144,177,222,.14))!important;background-image:none!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-b]{border-color:rgba(150,175,215,.32)!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="n"]{color:#F7FBFF!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="m"]{color:#C3CEE2!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="b"]{color:#9DBBF0!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="g"]{color:#a9beeb!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="r"]{color:#ff8f86!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="y"]{color:#bbcbef!important} html[data-theme="dark"][data-hq-kind="tool"] [data-hqd-t="p"]{color:#d4b3ff!important} @media print{html[data-theme="dark"][data-hq-kind="tool"] body{background:#fff!important;color:#000!important}} /* ---- themepersist 1 Nov: the pieces Guest's pages paint white BEFORE the colour pass (measured at first paint, 390 px) ---- */ html[data-theme="dark"][data-hq-kind="tool"] :is(.mb-card,.b-crop,.b-card,.b-pill){background:#1A2A47;color:#F7FBFF;border-color:rgba(150,175,215,.35)} html[data-theme="dark"][data-hq-kind="tool"] :is(.mb-card h2,.b-crop b,.b-card h3,.b-pill){color:#F7FBFF} html[data-theme="dark"][data-hq-kind="tool"] :is(.mb-card p,.b-crop small){color:#B3C0D7} html[data-theme="dark"][data-hq-kind="tool"] .ft-bar{background:rgba(14,29,58,.96);color:#F7FBFF;border-color:rgba(150,175,215,.28)} /* the page background itself, so nothing white shows while the body is still hidden (language wait / lock) */ html[data-theme="dark"][data-hq-kind="tool"]{background:#0E1D3A} /* Easy Entry (v2 form) surfaces, painted white before the colour pass on a reload (measured 1 Nov) */ html[data-theme="dark"][data-hq-kind="tool"] :is(.ee-sec,.ee-scard,.ee-rcard,.ee-tab:not(.on),.ee-per button:not(.on),.ee-step button,.ee-pcsrow button,.ee-mini,.ee-seg input:not(:checked)+span,.ee-plats input:not(:checked)+span){background:#1A2A47;color:#F7FBFF;border-color:rgba(150,175,215,.35)} html[data-theme="dark"][data-hq-kind="tool"] .ee-f :is(input[type=date],input[type=text],input[type=number],select){background:#101C34;color:#F7FBFF;border-color:rgba(150,175,215,.42)} html[data-theme="dark"][data-hq-kind="tool"] :is(.ee-tab.on,.ee-seg input:checked+span,.ee-plats input:checked+span){background:#1d46a8;border-color:#5b83d6;color:#fff}