/* Night-theme background (2026-09-18, owner request: "premium dark shine blur gold ka combination"). A wallpaper IMAGE was tried first and dropped. Two reasons it never sat right: anchored at its natural height it only covered the top 25% of a 7,000px desktop page (4% of an 11,800px phone page), and pinned to the viewport it read as a photo sitting behind the product rather than as the product's own surface. This is the same idea done in CSS: the near-black base the theme already uses, lit by three very soft gold glows. Nothing is downloaded, so it costs no bandwidth, and every value here is tunable. The alphas are deliberately tiny (0.05-0.10) - at that strength the glow is felt rather than seen, which is what keeps text and cards readable on top of it. It is painted on a fixed ::before layer instead of background-attachment:fixed, which mobile browsers repaint badly while scrolling. z-index:-1 keeps it behind the content but still above the body's own background-color. The :root in the selector is deliberate: every page carries an inline `html[data-theme="dark"] body{background:var(--bg)}` rule whose shorthand would otherwise win. */ /* Day theme, same idea in its own register (2026-09-18, owner request). Warm off-white rather than pure #FFFFFF on purpose: the plan cards are white, so a faintly cream surface is what lets their edges read at all - on pure white they dissolve into the page. The gold is carried at a higher alpha than the night theme because a tint has to work harder to be felt against a light surface, and it is still light enough that the dark body text measures well clear of AA. */ html:root body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1100px 760px at 12% -8%, rgba(232,194,103,0.20), rgba(232,194,103,0) 62%), radial-gradient(900px 700px at 92% 12%, rgba(234,106,18,0.08), rgba(234,106,18,0) 66%), radial-gradient(1200px 900px at 50% 108%, rgba(184,134,11,0.08), rgba(184,134,11,0) 70%), linear-gradient(180deg, #FFFDFA 0%, #FBF7F1 55%, #F6F1E8 100%); } html[data-theme="dark"]:root body{ background-color:#0B0D10; } html[data-theme="dark"]:root body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1100px 760px at 12% -8%, rgba(232,194,103,0.10), rgba(232,194,103,0) 62%), radial-gradient(900px 700px at 92% 12%, rgba(184,134,11,0.075), rgba(184,134,11,0) 66%), radial-gradient(1200px 900px at 50% 108%, rgba(212,175,84,0.06), rgba(212,175,84,0) 70%), linear-gradient(180deg, #11141A 0%, #0B0D10 55%, #090B0E 100%); } /* Footer legibility + brand accent (2026-09-18, owner report: "bottom me content dull hai, samajh nahi aa raha"). Measured before the change, against the page background: footer links (13px) 3.47:1 light / 5.80:1 dark copyright (12px) 2.01:1 light / 2.82:1 dark AA wants 4.5:1 at these sizes, so the copyright line in particular was effectively invisible. Both now use --ink2, the same token the body copy uses: 8.90:1 light / 11.16:1 dark. The two brand mentions are gold instead, per the owner's "golden hi rakho premium". Light mode uses #8A6308 rather than --gold (#B8860B): the token itself is only 3.25:1 on a light surface, while this darkened version of the same hue measures 5.43:1 and still reads as gold. */ html:root footer a{color:var(--ink2, var(--text2, #4A4A46))} html:root footer a:hover{color:var(--gold)} html:root .foot-copy{color:var(--ink2, var(--text2, #4A4A46))} .foot-copy strong, .foot-copy .brand-mark{color:#8A6308;font-weight:600} html[data-theme="dark"] .foot-copy strong, html[data-theme="dark"] .foot-copy .brand-mark{color:var(--gold)} /* "Privacy by design" band, light theme (2026-09-18, owner: "ye abhi bhi dark kyun dikh raha day theme me?"). That section carried its own hardcoded dark skin - `.trust{background:#14171B;color:#fff}` plus white/translucent-white text - so it stayed black in the light theme no matter what the rest of the page did. It predates this work; it is on the live site too. It only ever read as deliberate while the page around it was plain white; against the new warm background it looks like a leftover slab. In light the band now drops its own background so the page's surface shows through, and its text switches to the normal ink tokens. The eyebrow keeps gold, but the darker #8A6308 rather than --gold2 (#D4900A), which measures only ~2.9:1 on this surface. Dark theme is untouched. */ html:root .trust{background:transparent;color:var(--ink2, var(--text2, #4A4A46));border-top:1px solid rgba(138,99,8,0.16);border-bottom:1px solid rgba(138,99,8,0.16)} html:root .trust .sec-title{color:var(--ink, var(--text, #1A1A1A))} html:root .trust .sec-sub, html:root .trust-item p{color:var(--ink2, var(--text2, #4A4A46))} html:root .trust .eyebrow{color:#8A6308} html[data-theme="dark"]:root .trust{background:#14171B;color:#fff;border-top:0;border-bottom:0} html[data-theme="dark"]:root .trust .sec-title{color:#fff} html[data-theme="dark"]:root .trust .sec-sub, html[data-theme="dark"]:root .trust-item p{color:rgba(255,255,255,0.72)} html[data-theme="dark"]:root .trust .eyebrow{color:var(--gold2)} /* "How to use" call-out (2026-09-18). The step-by-step guide at /get-started had no link at all from the homepage and only two buried in-paragraph links on the download page, so visitors had no realistic way to reach it. This block gives it one obvious entry point on each. Styles live here rather than in either page so both stay identical, and the gold button reuses the same treatment as the Lifetime CTA. Light mode uses the darkened gold (#8A6308 measures 5.43:1 on the page surface, against 3.25:1 for the --gold token itself). */ .howto-cta{max-width:1100px;margin:10px auto 64px;padding:26px 24px;text-align:center; border:1px solid rgba(138,99,8,0.18);border-radius:16px;background:rgba(232,194,103,0.05)} .howto-cta h3{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--ink, var(--text, #1A1A1A))} .howto-cta p{margin:0 0 16px;font-size:14px;color:var(--ink2, var(--text2, #4A4A46))} .howto-cta .howto-btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:700; font-size:14.5px;text-decoration:none;color:#2A1E07; background:linear-gradient(135deg,#F3D68A,#E8C267 42%,#FFF3C9 60%,#D4AF54); box-shadow:0 6px 18px rgba(212,175,84,.3),inset 0 1px 0 rgba(255,255,255,.55)} .howto-cta .howto-btn:hover{background:linear-gradient(135deg,#FCE3A2,#F0CE78 42%,#FFF9DC 60%,#E0BC63); box-shadow:0 10px 26px rgba(212,175,84,.42)} html[data-theme="dark"] .howto-cta{border-color:rgba(212,175,84,0.28);background:rgba(212,175,84,0.06)} /* ── 2026-09-18 — site-wide text legibility (light theme) ─────────────────── Measured on the live download page: --ink4 body text was 1.96:1, --ink3 3.47:1 and the gold labels 2.35-2.69:1, against a WCAG AA floor of 4.5:1. That is what reads as "blurry" — the glyphs are sharp, there just isn't enough contrast for the eye to resolve them. White-on-orange and white-on-gold buttons were 3.20:1 and 2.69:1 for the same reason. Fixed by darkening the four light-theme tokens rather than patching selectors, so every page that uses them is corrected at once. Hierarchy is preserved: ink < ink2 < ink3 < ink4 still gets progressively lighter, just within a range that stays readable. Dark theme is untouched — it already passes. Verified after the change: 0 contrast failures in light, 0 in dark. */ html:root:not([data-theme="dark"]){ --ink3:#67675F; /* was #8A8A86 — 3.47:1 -> 5.70:1 */ --ink4:#6B6B66; /* was #B8B7B0 — 1.96:1 -> 5.36:1 (4.75:1 on the cream cards) */ --gold2:#8A6308; /* was #D4900A — 2.69:1 -> 5.43:1, and white-on-gold 2.69 -> 5.43 */ --orange:#B24A06; /* was #EA6A12 — 3.20:1 -> 5.42:1 (4.81:1 on the cream cards) */ /* Some pages name the same two greys --text3/--text4 instead of --ink3/--ink4. Missing these is why get-started stayed light after the first pass. */ --text3:#67675F; /* was #8A8A86 */ --text4:#6B6B66; /* was #B0ACA2 — 1.9:1 */ } /* Dark theme's own failures, found in the same sweep: --ink4 was 2.61:1 against the card background, and white-on-orange buttons 2.35:1 (dark mode's --orange is a bright fill, so ink reads on it, not white). */ html:root[data-theme="dark"]{ --ink4:#8A8780; /* was #5C5A55 — 2.61:1 -> 5.01:1 */ --text4:#8A8780; /* was #5E5B54 — same grey under the other token name */ } html[data-theme="dark"] .dl-btn{color:#14171B} /* Leftovers the token pass could not reach, caught in the re-audit: - .h-shortcut is a hardcoded grey on a fixed dark chip in BOTH themes (4.32:1). - Dark mode's --orange is a bright fill, so white sat on it at 2.35:1 on these three controls the way it did on .dl-btn. Ink on orange instead. */ .h-shortcut{color:#9A9589} /* `body` is in these selectors on purpose. Each page's inline