/* ===================================================================== marketing-light.css — Bespoke LIGHT theme (Direction B: พาสเทลสดใส) for the shared marketing / SEO landing pages that load marketing-pages.css (*-worksheet, samples, help, kindergarten-worksheets, worksheet-generator-math). SAFETY CONTRACT (same as css/index-light.css) - Every selector is gated behind [data-v2-mode-theme="light"]; DARK is untouched. - The site-wide light blanket is injected at runtime from js/site-topbar-v2.js using `... body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(...)`. `:where()` has ZERO specificity; the [lang] attribute on + the real class on each target give these rules a higher specificity so they win, with !important where the blanket also uses it. - Loaded only on marketing pages, and selectors target marketing-only classes (.hero, .sample-card, .cta-band ...), so no other page is affected. ===================================================================== */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] { --mk-ink: #133a52; --mk-muted: #5b6b7a; --mk-sky: #0ea5e9; --mk-sky-2: #38bdf8; --mk-mint: #10b981; --mk-mint-2: #34d399; --mk-peach: #f97362; --mk-peach-2: #fb9da0; --mk-lav: #8b7cf0; --mk-lav-2: #a78bfa; --mk-amber: #f59e0b; --mk-amber-2: #fbbf24; --mk-card: #ffffff; --mk-line: rgba(70, 120, 150, 0.16); --mk-shadow: 0 16px 40px rgba(60, 110, 140, 0.13); --mk-shadow-sm: 0 10px 26px rgba(60, 110, 140, 0.10); --mk-shadow-lift: 0 26px 56px rgba(60, 110, 140, 0.18); } /* ---- 1. page background: pastel multi-glow ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] { background-color: #f6fbff !important; background-image: radial-gradient(circle at 9% 12%, rgba(56, 189, 248, 0.20), transparent 34%), radial-gradient(circle at 92% 14%, rgba(251, 146, 160, 0.16), transparent 32%), radial-gradient(circle at 80% 88%, rgba(110, 231, 183, 0.18), transparent 36%), radial-gradient(circle at 16% 92%, rgba(167, 139, 250, 0.14), transparent 34%), linear-gradient(140deg, #f6fbff 0%, #fff6f2 48%, #f1fdf7 100%) !important; background-attachment: fixed !important; } /* ---- 2. hero eyebrow → pastel chip ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .eyebrow { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; background: rgba(56, 189, 248, 0.14) !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; } /* ---- 3. hero title → gradient text ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero h1 { background: linear-gradient(120deg, #0ea5e9 0%, #10b981 52%, #f97362 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero p { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* ---- 4. buttons ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .btn-primary { background: linear-gradient(128deg, var(--mk-sky) 0%, #22c1a6 60%, var(--mk-mint) 100%) !important; border: 0 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 16px 32px rgba(20, 160, 160, 0.3) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .btn-primary:hover { box-shadow: 0 20px 40px rgba(20, 160, 160, 0.4) !important; } /* secondary buttons in hero / section heads → light outline (leave cta-band's own) */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero__actions .btn-secondary, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .section-actions .btn-secondary { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; box-shadow: var(--mk-shadow-sm) !important; } /* ---- 5. surface cards: white + soft shadow + colored top accent ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-card, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .panel, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .faq details { position: relative; overflow: hidden; background: var(--mk-card) !important; border: 1px solid var(--mk-line) !important; box-shadow: var(--mk-shadow) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-preview { background: #ffffff !important; border: 1px solid var(--mk-line) !important; } /* colored top accent for sample cards, rotating across the grid */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--mk-sky), var(--mk-sky-2)); } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card:nth-child(4n+2)::before { background: linear-gradient(90deg, var(--mk-mint), var(--mk-mint-2)); } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card:nth-child(4n+3)::before { background: linear-gradient(90deg, var(--mk-peach), var(--mk-peach-2)); } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card:nth-child(4n+4)::before { background: linear-gradient(90deg, var(--mk-lav), var(--mk-lav-2)); } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card { transition: transform 0.22s ease, box-shadow 0.22s ease !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lift) !important; } /* hero-card gets a sky top accent */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--mk-sky), var(--mk-mint)); } /* ---- 6. headings & body copy stay readable ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .section-head h2, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card h3, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .panel h3, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-card__top strong, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .faq summary { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .section-head p, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card p, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .sample-card li, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .panel p, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .panel li, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .faq details p { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* ---- 7. feature-list bullets → colored ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-list li::before { color: var(--mk-mint) !important; -webkit-text-fill-color: var(--mk-mint) !important; } /* ---- 8. CTA band → vivid pastel gradient ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .cta-band { background: linear-gradient(135deg, var(--mk-sky) 0%, #1bb6c4 45%, var(--mk-mint) 100%) !important; box-shadow: 0 24px 50px rgba(20, 160, 160, 0.28) !important; } /* keep CTA-band copy white on the gradient (blanket forces headings dark) */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .cta-band h2, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .cta-band p, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .cta-band a { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* the white outline secondary button inside the CTA band */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .cta-band .btn-secondary { background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- 8b. pricing cards (pricing.html shares these classes) ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card { background: var(--mk-card) !important; border: 1px solid var(--mk-line) !important; box-shadow: var(--mk-shadow) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--free { border: 1px solid rgba(14, 165, 233, 0.4) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--pro { border: 2px solid rgba(139, 92, 246, 0.6) !important; box-shadow: 0 26px 56px rgba(124, 92, 246, 0.22) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--yearly { border: 1px solid rgba(245, 158, 11, 0.5) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card h3, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-price { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card p, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-price span { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* Free badge = blue (default for any plan badge) */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-badge { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 0 !important; } /* Pro badge = violet */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--pro .pricing-card-badge { background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 0 !important; } /* Premium (yearly) badge = amber/gold */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--yearly .pricing-card-badge { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; color: #5c3a00 !important; -webkit-text-fill-color: #5c3a00 !important; border: 0 !important; } /* hero mini-table rows on pricing hero-card */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .mini-table div { background: rgba(240, 249, 255, 0.7) !important; border: 1px solid var(--mk-line) !important; } /* ---- 8c. breadcrumb (pricing.html renders a dark .breadcrumb chip) ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .breadcrumb { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid var(--mk-line) !important; box-shadow: var(--mk-shadow-sm) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .breadcrumb a, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .breadcrumb span { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* ---- 9. footer → light tint ---- */ html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .site-footer { background: linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(238, 248, 255, 0.7)) !important; border: 1px solid var(--mk-line) !important; box-shadow: var(--mk-shadow-sm) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .site-footer h2, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .site-footer h3 { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .site-footer p, html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .site-footer a { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } html[lang][data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"] .site-footer a:hover { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; } /* ===================================================================== "ฟรีใบงาน" (samples.html) — index-style pastel background + floating shapes. samples already ships .background-scene markup but it's unstyled + the body bg covers it (z-index). Make body transparent, paint pastel on the scene, and render the index shapes. Scoped to samples only (data-static-i18n-page). ===================================================================== */ html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] { background: transparent !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene { position: fixed !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: -1 !important; opacity: 1 !important; background-color: #dcecff !important; background-image: radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.40), transparent 42%), radial-gradient(circle at 88% 14%, rgba(251, 146, 160, 0.36), transparent 42%), radial-gradient(circle at 86% 88%, rgba(110, 231, 183, 0.40), transparent 46%), radial-gradient(circle at 12% 86%, rgba(167, 139, 250, 0.34), transparent 44%), linear-gradient(140deg, #dcecff 0%, #ffe7df 50%, #dcf5ec 100%) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .blob, html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .curve, html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo { position: absolute !important; display: block !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .blob { border-radius: 50% !important; filter: blur(80px) !important; opacity: 0.30 !important; mix-blend-mode: multiply !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .blob-a { width: 260px !important; height: 260px !important; left: 8% !important; top: 6% !important; background: #38bdf8 !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .blob-b { width: 320px !important; height: 320px !important; right: 10% !important; bottom: 6% !important; top: auto !important; background: #34d399 !important; animation: gsBlobDrift 14s ease-in-out infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .blob-c { width: 190px !important; height: 190px !important; left: 52% !important; top: 50% !important; background: #fb9da0 !important; animation: gsBlobDrift 16s ease-in-out infinite reverse !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .curve { border-radius: 999px !important; border: 2px solid rgba(2, 132, 199, 0.36) !important; opacity: 0.9 !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .curve-a { width: 720px !important; height: 720px !important; left: -320px !important; top: 120px !important; transform: rotate(-20deg) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .curve-b { width: 900px !important; height: 540px !important; right: -420px !important; top: 240px !important; transform: rotate(8deg) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo { opacity: 0.85 !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-ring { border-radius: 50% !important; border: 2px solid rgba(2, 132, 199, 0.55) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-ring-a { width: 120px !important; height: 120px !important; top: 16% !important; left: 54% !important; --geo-rot: 0deg; animation: gsGeoFloat 12s ease-in-out infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-ring-b { width: 80px !important; height: 80px !important; bottom: 18% !important; left: 12% !important; animation: gsGeoPulse 9s ease-in-out infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-square { border-radius: 14px !important; border: 2px solid rgba(124, 58, 237, 0.55) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-square-a { width: 72px !important; height: 72px !important; top: 30% !important; right: 34% !important; transform: rotate(16deg); animation: gsGeoSpinA 13s linear infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-square-b { width: 46px !important; height: 46px !important; bottom: 31% !important; right: 10% !important; --geo-rot: -22deg; transform: rotate(var(--geo-rot)); animation: gsGeoFloat 11s ease-in-out infinite reverse !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-triangle { width: 0 !important; height: 0 !important; border-left: 18px solid transparent !important; border-right: 18px solid transparent !important; border-bottom: 34px solid rgba(234, 88, 12, 0.6) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-triangle-a { top: 18% !important; right: 16% !important; transform: rotate(8deg); animation: gsGeoSpinB 14s linear infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-triangle-b { bottom: 24% !important; left: 44% !important; transform: rotate(-14deg); animation: gsGeoPulse 10s ease-in-out infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-line { height: 2px !important; border-radius: 999px !important; background: rgba(5, 150, 105, 0.65) !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-line-a { width: 180px !important; top: 22% !important; left: 22% !important; --geo-rot: 26deg; transform: rotate(var(--geo-rot)); animation: gsGeoFloat 10s ease-in-out infinite !important; } html[lang][data-index-v2-theme] body:is(.template-gallery-body,.pricing-preview-body,.help-preview-body).has-site-topbar-v2[data-v2-mode-theme="light"] .geo-line-b { width: 140px !important; bottom: 20% !important; right: 28% !important; --geo-rot: -20deg; transform: rotate(var(--geo-rot)); animation: gsGeoFloat 12s ease-in-out infinite reverse !important; } @keyframes gsBlobDrift { 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(16px,-18px,0);} } @keyframes gsGeoFloat { 0%,100%{transform:translate3d(0,0,0) rotate(var(--geo-rot,0deg));} 50%{transform:translate3d(0,-12px,0) rotate(var(--geo-rot,0deg));} } @keyframes gsGeoSpinA { from{transform:rotate(16deg);} to{transform:rotate(376deg);} } @keyframes gsGeoSpinB { from{transform:rotate(8deg);} to{transform:rotate(-352deg);} } @keyframes gsGeoPulse { 0%,100%{opacity:0.5;} 50%{opacity:0.85;} } /* ---- 9. help + pricing: drop the hero frame & breadcrumb chip entirely ---- */ /* The big hero "frame" (.hero) gets --sg-card-bg (~94% white) + border + shadow from the site-topbar-v2 JS blanket; the breadcrumb is a ~70% white chip. Make both fully transparent (no frame at all) on the help and pricing pages. */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero, html[lang][data-index-v2-theme] body.pricing-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .breadcrumb, html[lang][data-index-v2-theme] body.pricing-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .breadcrumb { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ===================================================================== help.html (help-preview-body) needs a DIFFERENT approach: its body is position:relative with a dark base bg, so the z-index:-1 scene is hidden. → paint opaque pastel on the BODY, and lift .background-scene to z-index:0 (above body, below the z-index:1 content) so the shapes show. ===================================================================== */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] { background-color: #dcecff !important; background-image: radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.40), transparent 42%), radial-gradient(circle at 88% 14%, rgba(251, 146, 160, 0.36), transparent 42%), radial-gradient(circle at 86% 88%, rgba(110, 231, 183, 0.40), transparent 46%), radial-gradient(circle at 12% 86%, rgba(167, 139, 250, 0.34), transparent 44%), linear-gradient(140deg, #dcecff 0%, #ffe7df 50%, #dcf5ec 100%) !important; background-attachment: fixed !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene { background: transparent !important; z-index: 0 !important; opacity: 1 !important; } /* help: the hero content wrapper (.hero > div) gets an opaque white --sg-panel background that COVERS the shapes. Make it transparent so the pastel scene + shapes show behind the hero text (like index/samples). */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .hero > div { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ===================================================================== "ฟรีใบงาน" (samples.html) GALLERY layout polish — LIGHT theme only. samples.html actually renders the worksheet-download GALLERY markup (.gallery-* / .template-card / .worksheet-download-*) styled by css/review-pdf-mode.css, NOT the static .hero/.sample-card block. The .hero/.sample-card rules above therefore never reached it, so the gallery stayed flat. These rules give it the same pastel light identity as the index/landing pages: gradient headline, pastel chips, white cards with a colored accent + lift, mint count panel. SAFETY: scoped to .template-gallery-body + [data-v2-mode-theme="light"]. The DARK template-gallery / review-pdf pages do NOT load this file, so they are completely untouched. !important beats both the zero-specificity JS light blanket and the unconditional review-pdf-mode.css defaults. ===================================================================== */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] { --mk-gallery-radius: 18px; } /* Thai typography → Kanit (loaded in samples.html). The global theme bridge in site-topbar-v2.css resets headings to a Kanit-less `inherit` stack with higher specificity than review-pdf-mode.css, so Thai text fell back to a system font. Re-assert the Kanit stack here (light + gallery scope only). */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page h1, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page h2, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page h3, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page p, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page span, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page strong, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page a, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page button, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-page input, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer strong, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer span, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer a { font-family: "Plus Jakarta Sans", "Kanit", sans-serif !important; } /* surfaces → bright white, softer radius, clean shadow (drop the glassy blur) */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-copy, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-panel, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-toolbar, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-status, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-empty, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer { border-radius: var(--mk-gallery-radius) !important; border: 1px solid var(--mk-line) !important; background: var(--mk-card) !important; box-shadow: var(--mk-shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* the 4px top accent bar → pastel gradient */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-copy::before, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-panel::before, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-toolbar::before, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-status::before, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-empty::before, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide::before, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card::before { background: linear-gradient(90deg, var(--mk-sky), var(--mk-mint), var(--mk-peach)) !important; } /* hero: kicker chip + gradient headline */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-kicker { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; background: rgba(56, 189, 248, 0.14) !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; border-radius: 999px !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero h1 { background: linear-gradient(120deg, #0ea5e9 0%, #10b981 52%, #f97362 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero p { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* count panel → mint tint + gradient number */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-panel, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-count-panel { background: linear-gradient(160deg, #ffffff 0%, #ecfdf5 100%) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-count { background: linear-gradient(120deg, var(--mk-sky), var(--mk-mint)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-hero-label { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* toolbar: search field + filter chips */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-search span { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-search input { background: #ffffff !important; border: 1px solid var(--mk-line) !important; border-radius: 12px !important; color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-search input:focus { border-color: var(--mk-sky) !important; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-filter { background: #ffffff !important; border: 1px solid var(--mk-line) !important; border-radius: 999px !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-filter:hover, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-filter:focus-visible { border-color: rgba(14, 165, 233, 0.4) !important; background: rgba(56, 189, 248, 0.08) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-filter.is-active { background: linear-gradient(135deg, var(--mk-sky), var(--mk-mint)) !important; border-color: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 12px 24px rgba(20, 160, 160, 0.28) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-status { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } /* cards: white body, readable text, lift on hover, rotating accent */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card { transition: transform 0.22s ease, box-shadow 0.22s ease !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lift) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card:nth-child(4n+2)::before { background: linear-gradient(90deg, var(--mk-mint), var(--mk-mint-2)) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card:nth-child(4n+3)::before { background: linear-gradient(90deg, var(--mk-peach), var(--mk-peach-2)) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card:nth-child(4n+4)::before { background: linear-gradient(90deg, var(--mk-lav), var(--mk-lav-2)) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card-body { background: transparent !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card h2 { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; text-shadow: none !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card p { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; text-shadow: none !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card-source { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-preview { background: linear-gradient(160deg, #f7fbff, #eef6ff) !important; } /* card meta pills → pastel chips (sky / mint / peach) */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-mode-pill { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; background: rgba(56, 189, 248, 0.12) !important; border: 1px solid rgba(56, 189, 248, 0.28) !important; border-radius: 999px !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-category-pill, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-source-pill--counting, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-source-pill--compare { color: #047857 !important; -webkit-text-fill-color: #047857 !important; background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.28) !important; border-radius: 999px !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-source-pill { color: #b4453b !important; -webkit-text-fill-color: #b4453b !important; background: rgba(249, 115, 98, 0.12) !important; border: 1px solid rgba(249, 115, 98, 0.28) !important; border-radius: 999px !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-access-pill { border-radius: 999px !important; } /* actions: primary download + secondary preview */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-card-action { background: linear-gradient(135deg, var(--mk-sky) 0%, #22c1a6 60%, var(--mk-mint) 100%) !important; box-shadow: 0 14px 28px rgba(20, 160, 160, 0.28) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; border-radius: 12px !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-card-secondary { background: #ffffff !important; border: 1px solid var(--mk-line) !important; border-radius: 12px !important; color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-card-secondary:hover, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-card-secondary:focus-visible { border-color: rgba(14, 165, 233, 0.4) !important; background: rgba(56, 189, 248, 0.08) !important; } /* guide ("เลือกโหลดฟรี...") section + footer copy */ html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide-copy h2, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide-grid strong, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-empty h2, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer strong { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide-copy p, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide-grid span, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .gallery-empty p, html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer span { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .worksheet-download-guide-grid article { background: #f7fbff !important; border: 1px solid var(--mk-line) !important; border-radius: 14px !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer a { color: var(--mk-muted) !important; -webkit-text-fill-color: var(--mk-muted) !important; } html[lang][data-index-v2-theme] body.template-gallery-body.has-site-topbar-v2[data-v2-mode-theme="light"] .template-gallery-footer a:hover { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; } /* ===================================================================== HELP CENTER (help.html / help-preview-body) — LIGHT redesign. Problem this fixes (light theme only): 1. Background was a LOUD rainbow — the body pastel gradient stacked on saturated blobs (opacity .30) + scattered geo shapes over the content, so text fought the backdrop and the page read "amateur". 2. Card surfaces were INCONSISTENT — step/billing cards got a solid white `.panel` from the JS blanket, but .help-cat-card / .help-mode-card / .help-pdf-step / FAQ
fell through to a faint grey rgba(0,0,0,.04) with NO shadow, and the resource list was fully transparent. Mixed surfaces = washed out, unprofessional. Direction: ONE calm pastel canvas + ONE unified white card system with a colored accent + hover lift. SAFETY: every rule is gated to body.help-preview-body[data-v2-mode-theme="light"]; dark never loads paths that change here and is untouched. ===================================================================== */ /* design tokens, scoped to the help body */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] { --hc-surface: #ffffff; --hc-line: rgba(15, 42, 80, 0.09); --hc-line-strong: rgba(15, 42, 80, 0.14); --hc-shadow: 0 10px 30px -14px rgba(15, 42, 80, 0.22); --hc-shadow-hover: 0 22px 46px -18px rgba(15, 42, 80, 0.34); --hc-radius: 18px; --hc-accent: #0284c7; --hc-accent-soft: #e6f4fd; --hc-ink: #102a4d; --hc-muted: #566479; } /* ---- 1. background: kept ORIGINAL vivid pastel wash ----------------- */ /* (the soft "calm" override was reverted per user preference — the earlier help-preview-body body-gradient + .blob/.geo rules above stay in effect, so the backdrop reads bright/rainbow as before.) */ /* ---- 2. unified card surface -------------------------------------- */ /* every help content card shares ONE surface: white, hairline border, soft shadow, same radius. */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-card, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-pdf-step, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-faq-list > details, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .resource-list > a { background: var(--hc-surface) !important; border: 1px solid var(--hc-line) !important; border-radius: var(--hc-radius) !important; box-shadow: var(--hc-shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } /* interactive cards (anchors) lift + show an accent edge on hover */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card:hover, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-card:hover, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .resource-list > a:hover { transform: translateY(-3px) !important; box-shadow: var(--hc-shadow-hover) !important; border-color: rgba(2, 132, 199, 0.40) !important; } /* ---- 3. category cards: pastel icon tile + clean type ------------- */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card { padding: 22px !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; border-radius: 13px !important; background: var(--hc-accent-soft) !important; color: var(--hc-accent) !important; border: 0 !important; margin-bottom: 14px !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card strong { color: var(--hc-ink) !important; -webkit-text-fill-color: var(--hc-ink) !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card p, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-card p, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-pdf-step p, html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .resource-list > a span { color: var(--hc-muted) !important; -webkit-text-fill-color: var(--hc-muted) !important; } /* give each category card its own accent icon tint (rotate the palette) */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card:nth-of-type(2) .help-cat-icon { background: #eafaf1 !important; color: #0c9b63 !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card:nth-of-type(3) .help-cat-icon { background: #f3eefe !important; color: #7c3aed !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-cat-card:nth-of-type(4) .help-cat-icon { background: #fff1ea !important; color: #ea6a1e !important; } /* ---- 4. mode cards: solid surface, readable type, crisp pills ----- */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-card { padding: 20px !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-card strong { color: var(--hc-ink) !important; -webkit-text-fill-color: var(--hc-ink) !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-tag { border: 0 !important; font-weight: 700 !important; letter-spacing: .02em !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-tag--free { background: #eafaf1 !important; color: #0c8f5b !important; -webkit-text-fill-color: #0c8f5b !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-mode-tag--pro { background: #f3eefe !important; color: #6d28d9 !important; -webkit-text-fill-color: #6d28d9 !important; } /* ---- 5. PDF steps: numbered accent badge -------------------------- */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-pdf-step { padding: 18px 20px !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-pdf-step__num { background: var(--hc-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; box-shadow: 0 6px 14px -6px rgba(2, 132, 199, 0.7) !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-pdf-step strong { color: var(--hc-ink) !important; -webkit-text-fill-color: var(--hc-ink) !important; } /* ---- 6. resource list: tidy rows + accent on hover --------------- */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .resource-list > a { padding: 16px 20px !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .resource-list > a strong { color: var(--hc-ink) !important; -webkit-text-fill-color: var(--hc-ink) !important; } /* ---- 7. FAQ: clean accordion surface ----------------------------- */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-faq-list > details { padding: 2px 8px !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-faq-list > details[open] { border-color: rgba(2, 132, 199, 0.32) !important; box-shadow: var(--hc-shadow-hover) !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-faq-list > details > summary { color: var(--hc-ink) !important; -webkit-text-fill-color: var(--hc-ink) !important; font-weight: 700 !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .help-faq-list > details p { color: var(--hc-muted) !important; -webkit-text-fill-color: var(--hc-muted) !important; } /* ---- 8. section heads: consistent ink + readable number kicker ---- */ html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .section-head h2 { color: var(--hc-ink) !important; -webkit-text-fill-color: var(--hc-ink) !important; background: none !important; } html[lang][data-index-v2-theme] body.help-preview-body.has-site-topbar-v2[data-v2-mode-theme="light"] .section-head p { color: var(--hc-muted) !important; -webkit-text-fill-color: var(--hc-muted) !important; }