* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0f0f23; min-height: 100vh; margin: 0; color: #e0e0e0; } /* RTL support */ [dir="rtl"] { direction: rtl; } /* Sticky header nav: #wh-primary-nav (.nav-links) sits AFTER #wh-nav-toggle in the HTML source (see index.html's own comment at that markup) so a keyboard user tabbing past the toggle lands straight in the menu it just opened, instead of skipping over it to whatever comes next on the page. That source order is the opposite of the desktop VISUAL order (links, then "Get Started", then the hamburger, which is hidden on desktop anyway) -- `order` on the shared flex container restores the visual order without touching source/tab order. The mobile dropdown itself is position:absolute (see responsive.css), so `order` has no visual effect there either way -- this only matters on desktop, where all three sit in normal flex flow. */ .wh-nav-actions .nav-links { order: 1; } .wh-nav-actions .wh-nav-cta { order: 2; } .wh-nav-actions #wh-nav-toggle { order: 3; } /* Language selector */ .language-selector { position: fixed; top: 20px; right: 20px; z-index: 1000; } [dir="rtl"] .language-selector { right: auto; left: 20px; } .language-selector select { padding: 10px 15px; border-radius: 10px; border: none; background: rgba(255, 255, 255, 0.95); font-size: 14px; font-weight: 500; color: #667eea; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .language-selector select:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .language-selector select:focus { outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); } /* Shared sizing for every inline icon instance (see the sprite of s at the top of ). Color always comes from a real ancestor element (div/span/td) so high-contrast mode's broad `color:#fff !important` rule in a11y.css still forces every icon to plain white, same as the surrounding text. */ .wh-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ═══════════════════════════════════════════════════ DEVICE FRAMES — honest, illustrative phone + PC mock-ups (CSS/SVG only, no image asset, including the Companion laptop illustration further down — see the .wh-ci-* rules). These are clearly stylized shapes, not a screenshot of the real app, so nobody could mistake them for the actual UI. Fully responsive (%/clamp), and static — no animation, so reduced-motion needs nothing extra here. ═══════════════════════════════════════════════════ */ .wh-frames { display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 3vw, 26px); flex-wrap: wrap; margin: 0 0 14px; } /* The frame shell (border/gradient/shadow/notch/home-bar) is shared by the 3 "See It In Action" app-screen mock-ups below AND the laptop frame's sibling styles further down — only the CONTENT inside each frame differs, via the .wh-appscreen-* parts. */ .wh-phoneframe { width: clamp(215px, 27vw, 250px); display: flex; flex-direction: column; border: 3px solid rgba(255,255,255,0.16); border-radius: 28px; background: linear-gradient(180deg, #171730, #10101f); padding: 14px 13px 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); text-align: left; } .wh-phoneframe-notch { width: 38%; height: 7px; background: rgba(255,255,255,0.14); border-radius: 6px; margin: 0 auto 12px; } .wh-phoneframe-home { width: 34%; height: 4px; background: rgba(255,255,255,0.18); border-radius: 3px; margin: 14px auto 0; } .wh-laptopframe { width: clamp(230px, 80vw, 460px); } .wh-laptopframe-screen { border: 3px solid rgba(255,255,255,0.16); border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #171730, #10101f); padding: 16px 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); } .wh-laptopframe-base { height: 10px; background: rgba(255,255,255,0.1); border-radius: 0 0 8px 8px; margin: 0 6%; } .wh-laptopframe-skeleton { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.08); margin-bottom: 9px; } /* ═══════════════════════════════════════════════════ COMPANION ILLUSTRATION — on-brand CSS/SVG mock-up of the redesigned "friendly" WindowsHelper Companion PC app, shown mid-fix, dropped into the laptop frame above (same honest-illustration idiom as the .wh-appscreen-* phone mock-ups — CSS/SVG only, no image asset). ═══════════════════════════════════════════════════ */ .wh-ci-illus { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #1b2233; text-align: left; } .wh-ci-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; background: #141a2b; border-bottom: 1px solid rgba(255,255,255,0.08); } .wh-ci-titlebar-text { color: rgba(255,255,255,0.5); font-size: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wh-ci-titlebar-glyphs { color: rgba(255,255,255,0.5); font-size: 9px; letter-spacing: 3px; flex-shrink: 0; } .wh-ci-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(120deg, #243b6b 0%, #1f6f6a 100%); } .wh-ci-brand-chip { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; background: rgba(255,255,255,0.14); color: #fff; display: flex; align-items: center; justify-content: center; } .wh-ci-brand-title { color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; } .wh-ci-connected { display: flex; align-items: center; gap: 4px; margin-top: 3px; } .wh-ci-connected span:last-child { color: rgba(255,255,255,0.85); font-size: 8.5px; font-weight: 700; } .wh-ci-body { padding: 12px; } .wh-ci-card { background: #232c40; border: 1px solid #313c54; border-radius: 13px; padding: 11px; } .wh-ci-card + .wh-ci-card { margin-top: 10px; } .wh-ci-card-label { color: rgba(255,255,255,0.55); font-size: 9px; font-weight: 800; margin-bottom: 8px; } .wh-ci-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .wh-ci-card-header .wh-ci-card-label { margin-bottom: 0; } .wh-ci-view-all { color: #34d399; font-size: 9px; font-weight: 800; } .wh-ci-now-row { display: flex; align-items: flex-start; gap: 9px; } .wh-ci-icon-chip { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,0.16); color: #fca5a5; } .wh-ci-now-title { color: #fff; font-size: 11px; font-weight: 800; line-height: 1.35; } .wh-ci-now-sub { color: rgba(255,255,255,0.5); font-size: 9.5px; margin-top: 2px; } .wh-ci-progress { height: 6px; border-radius: 20px; background: rgba(255,255,255,0.08); margin-top: 10px; overflow: hidden; } .wh-ci-progress-fill { width: 64%; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #10b981, #34d399); } .wh-ci-line { display: flex; align-items: center; gap: 7px; } .wh-ci-line + .wh-ci-line { margin-top: 8px; } .wh-ci-line span { color: rgba(255,255,255,0.7); font-size: 10px; font-weight: 600; } .wh-ci-line-icon { color: #34d399; flex-shrink: 0; display: inline-flex; } .wh-ci-arrow { color: #fbbf24; font-weight: 800; font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; } [dir="rtl"] .wh-ci-arrow { transform: scaleX(-1); display: inline-block; } /* ═══════════════════════════════════════════════════ APP SCREENS — three honest, illustrative phone-app mock-ups (CSS/SVG only, no image asset). Each mock-up reuses the .wh-phoneframe shell above (border/gradient/ shadow/notch/home-bar) for its outer frame; only the content parts below are new. flex-wrap on the shared .wh-frames row keeps them from ever forcing the page to scroll horizontally on narrow screens — they simply stack instead of overflowing. ═══════════════════════════════════════════════════ */ .wh-appscreen-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 14px; } .wh-appscreen-brand { display: flex; align-items: center; gap: 6px; } .wh-appscreen-brand-chip { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: linear-gradient(135deg, #047857, #065f46); color: #fff; display: flex; align-items: center; justify-content: center; } .wh-appscreen-brand-name { color: rgba(255,255,255,0.75); font-size: 9.5px; font-weight: 800; letter-spacing: 0.2px; } .wh-appscreen-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 20px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); color: #6ee7b7; font-size: 8.5px; font-weight: 800; min-width: 0; max-width: 62%; } [dir="rtl"] .wh-appscreen-chev svg, [dir="rtl"] .wh-appscreen-back-row svg { transform: scaleX(-1); } @media (max-width: 700px) { .wh-phoneframe { flex-basis: 100%; } } .wh-appscreen-dot { width: 5px; height: 5px; border-radius: 50%; background: #10B981; flex-shrink: 0; } .wh-appscreen-body { flex: 1; display: flex; flex-direction: column; } .wh-appscreen-icon-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 4px auto 14px; flex-shrink: 0; } .wh-appscreen-title { color: #fff; font-size: 13.5px; font-weight: 800; text-align: center; margin: 0 0 6px; line-height: 1.3; } .wh-appscreen-sub { color: rgba(255,255,255,0.55); font-size: 10.5px; text-align: center; line-height: 1.45; margin: 0 0 16px; } .wh-appscreen-codes { display: flex; gap: 5px; justify-content: center; margin: 0 0 16px; } .wh-appscreen-code-box { width: 24px; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; } .wh-appscreen-code-box.is-filled { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.4); color: #6ee7b7; } .wh-appscreen-hint { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.18); color: rgba(255,255,255,0.55); font-size: 9px; font-weight: 600; text-align: center; margin-bottom: 16px; } .wh-appscreen-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.52); font-size: 10px; font-weight: 600; margin-bottom: 14px; } /* Decorative mock-up search field (readonly, tabindex="-1" — not a real search control) styled to blend into the pill around it. */ .wh-appscreen-search-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: rgba(255,255,255,0.52); font-family: inherit; font-size: 10px; font-weight: 600; padding: 0; cursor: default; } .wh-appscreen-search-input::-webkit-search-cancel-button { display: none; } .wh-appscreen-label { color: rgba(255,255,255,0.52); font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .wh-appscreen-fix { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 7px; } .wh-appscreen-fix.is-selected { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.5); } .wh-appscreen-fix-icon { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .wh-appscreen-fix-text { flex: 1; min-width: 0; } .wh-appscreen-fix-title { color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3; } .wh-appscreen-fix-sub { color: rgba(255,255,255,0.5); font-size: 9px; margin-top: 1px; } .wh-appscreen-fix-sub.is-selected { color: #6ee7b7; font-weight: 700; } .wh-appscreen-fix-check { width: 18px; height: 18px; border-radius: 50%; background: #10B981; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wh-appscreen-btn { margin-top: 4px; background: linear-gradient(135deg, #047857, #065f46); color: #fff; font-size: 11.5px; font-weight: 800; text-align: center; border-radius: 10px; padding: 10px 6px; display: flex; align-items: center; justify-content: center; gap: 7px; } .wh-appscreen-btn.is-outline { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.4); color: #6ee7b7; } .wh-appscreen-note { display: flex; align-items: center; justify-content: center; gap: 5px; color: rgba(255,255,255,0.52); font-size: 9px; font-weight: 600; text-align: center; margin-top: 10px; } .wh-appscreen-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; margin-bottom: 12px; } .wh-appscreen-card-row { display: flex; align-items: center; gap: 8px; } .wh-appscreen-card-row + .wh-appscreen-card-row { margin-top: 8px; } .wh-appscreen-card-row span { color: rgba(255,255,255,0.7); font-size: 10px; font-weight: 600; } /* "Browse fixes" screen — 2-column category tile grid + footer count */ .wh-appscreen-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px; } .wh-appscreen-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); text-align: center; } .wh-appscreen-cat-icon { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .wh-appscreen-cat span { color: rgba(255,255,255,0.7); font-size: 9px; font-weight: 700; line-height: 1.3; } .wh-appscreen-browse-count { color: rgba(255,255,255,0.52); font-size: 9px; font-weight: 600; text-align: center; margin-top: auto; } /* "See what it'll do" screen — vertical numbered stepper */ .wh-appscreen-steps { margin-bottom: 14px; } .wh-appscreen-step { display: flex; gap: 9px; } .wh-appscreen-step-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .wh-appscreen-step-num { width: 19px; height: 19px; border-radius: 50%; background: rgba(16,185,129,0.18); border: 1.5px solid rgba(16,185,129,0.5); color: #6ee7b7; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wh-appscreen-step-line { width: 1.5px; flex: 1; min-height: 12px; background: rgba(16,185,129,0.25); margin: 3px 0; } .wh-appscreen-step-text { flex: 1; min-width: 0; padding-bottom: 11px; } .wh-appscreen-step-title { color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; } .wh-appscreen-step-sub { color: rgba(255,255,255,0.5); font-size: 9px; line-height: 1.4; } .wh-appscreen-back-row { display: flex; align-items: center; gap: 3px; color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 700; margin-bottom: 12px; } /* ═══════════════════════════════════════════════════ HOW IT WORKS — animated walkthrough: the flow-line "travels" phone -> cloud -> PC, a small pulse dot rides along it, and the three nodes glow in sequence to reinforce the direction. Pure CSS animation, no library, no asset — the SVG stays aria-hidden/decorative throughout, only its look moves, never its meaning. The step cards below fade/slide up on scroll (staggered), handled by a tiny IntersectionObserver script placed right after the section markup. That script checks the a11y widget's html.a11y-reduce-motion class (opt-in only, does not follow the OS) before hiding anything, and if it can't run at all (JS off, no IntersectionObserver), the cards are simply never hidden — see .wh-hiw-step below, which is fully visible by default with no class applied. Motion is ON by default here, including for visitors whose OS asks for reduced motion — it only turns off once the visitor opts in via the "Reduce motion" toggle in the accessibility panel (a11y.js), which applies html.a11y-reduce-motion. That class turns every animated piece off here and pins everything to its plain, fully-visible, non-moving state — belt-and- suspenders with the script's own check. ═══════════════════════════════════════════════════ */ @keyframes wh-hiw-flow { to { stroke-dashoffset: -32; } } /* .wh-hiw-pipe (and its blurred glow twin) is the bold, solid, ALWAYS-static connector — it is what makes phone->cloud->PC read as one continuous pipe even with zero animation and even if this whole block never runs. .wh-hiw-flowline is just a thin animated dash riding on top of it for extra motion; it is decoration, not the connection itself. */ .wh-hiw-flowline { animation: wh-hiw-flow 1.4s linear infinite; } @keyframes wh-hiw-dot { 0%, 4% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 88% { opacity: 1; } 96%, 100% { opacity: 0; transform: translateX(388px); } } .wh-hiw-dot { opacity: 0; filter: drop-shadow(0 0 4px rgba(255,255,255,0.75)); animation: wh-hiw-dot 4.2s linear infinite; } @keyframes wh-hiw-nodeglow { 0%, 16%, 100% { filter: drop-shadow(0 0 0 transparent); } 8% { filter: drop-shadow(0 0 10px currentColor); } } .wh-hiw-node { animation: wh-hiw-nodeglow 4.2s ease-in-out infinite; } .wh-hiw-node-1 { animation-delay: 0s; } .wh-hiw-node-2 { animation-delay: 1.6s; } .wh-hiw-node-3 { animation-delay: 3.2s; } /* Step cards: visible by default (no-JS / no-observer fallback). The reveal script adds -pending just before paint, then swaps it for -visible once each card scrolls into view. */ .wh-hiw-step { transition: opacity 0.6s ease, transform 0.6s ease; } .wh-hiw-step-pending { opacity: 0; transform: translateY(18px); } .wh-hiw-step-visible { opacity: 1; transform: translateY(0); } /* Step-card connectors: a small arrow between STEP 1->2 and 2->3 so the three cards read as one sequence instead of three islands. Desktop-only (three-in-a-row); hidden once the cards stack (or nearly stack) on narrower screens so nothing dangles. Purely decorative — the numbered STEP labels already carry the order for everyone, including no-CSS/no-JS readers. The 900px-wide container holds 3 cards (flex-basis 220px each) + 2 connectors (56px each) + gaps — roughly 850px of minimum content — so the hide breakpoint needs to be well above 767px, or a card wraps awkwardly while the arrows are still shown. 900px gives genuine room for everything to sit on one line before the connectors reappear. */ .wh-hiw-connector { display: flex; align-items: center; justify-content: center; flex: 0 1 56px; margin-top: 24px; } @media (max-width: 900px) { .wh-hiw-connector { display: none; } } /* Opt-in only (html.a11y-reduce-motion, set by the accessibility panel) — NOT gated on the OS's prefers-reduced-motion setting. Animated (the default) unless the visitor turns this on. */ html.a11y-reduce-motion .wh-hiw-flowline, html.a11y-reduce-motion .wh-hiw-dot, html.a11y-reduce-motion .wh-hiw-node { animation: none !important; } /* Keep the flow lines on screen as a plain, non-moving connector so phone->cloud->PC still reads as one path — previously this rule hid them entirely, leaving gaps where the moving dashes used to be. They sit on top of the always-static .wh-hiw-pipe underneath, so this just adds a touch of definition, not a second disconnected element. */ html.a11y-reduce-motion .wh-hiw-flowline { opacity: 0.9; } /* The traveling dot has no meaning once it can't travel — frozen mid-path it would just read as a stray mark, so it stays hidden; the static flow lines above (and the solid pipe beneath them) already carry the connection. */ html.a11y-reduce-motion .wh-hiw-dot { display: none; } /* Nodes keep a soft constant glow instead of the pulsing one, so they still read as "active" endpoints rather than flattening to plain outlined circles. */ html.a11y-reduce-motion .wh-hiw-node { filter: drop-shadow(0 0 6px currentColor); } html.a11y-reduce-motion .wh-hiw-step, html.a11y-reduce-motion .wh-hiw-step-pending, html.a11y-reduce-motion .wh-hiw-step-visible { opacity: 1 !important; transform: none !important; transition: none !important; } /* Footer grouped-column list rules (2026-08-06 redesign). The grid itself (column count, gap) is set inline on .wh-footer-nav so it can differ by breakpoint below; this base rule just gives each link its own row inside a column and stops long column headings (e.g. "Why WindowsHelper") from overflowing a narrow track. */ .wh-footer-nav li { margin: 0 0 10px; } .wh-footer-nav li:last-child { margin-bottom: 0; } .wh-footer-heading, .wh-footer-link { overflow-wrap: break-word; } /* responsive.css has `body.home h2 { font-size: 24px !important; }` to shrink the page's big section titles on mobile. That selector also matches these footer group labels (they're

too), so on phone widths it was overriding this file's own inline 12px and blowing the labels up to 24px. This rule is more specific (0,2,1 beats 0,1,1) and loads after responsive.css, so it wins at every width and keeps the footer labels small — the real section titles aren't affected since they don't carry this class. / body.home .wh-footer-heading { font-size: 12px !important; letter-spacing: 0.6px; } / ═══════════════════════════════════════════════════ MOBILE TAP TARGETS — several links/buttons on this page are plain inline text with small font-size + light padding, which measures well under the ~44px a thumb needs. This block lives here (not in responsive.css) purely because of document order: this