/* wiastory.smilestory.ai — site theme: DARK overlay (2026-10-29, family56 F, koreantoday server). ORIGINAL look = LIGHT (/assets/site.css 913 lines, :root tokens ≈35; body #F3F7FC / ink #17233A / point #1D4ED8). site.css is NOT changed. Load this file LAST in (after /assets/site.css) with the wia-site-theme engine setting before first paint. Every rule below is scoped to html[data-theme="dark"], so the light look renders exactly as before (0 px difference). color-scheme is set by the engine — not here. CSP (vhost): style-src 'self' → this file must be served from this host (public/wia-site-theme/), never from cqm. Pages sharing site.css: index.html (home, gallery, donate modal), create.html (wizard), my.html (project list). sso-logout.html / api/* are out of scope (own CSP, no header). Dark palette (neutral navy so the WIA deep-blue brand stays blue; ratios against page #0b0d12 / card #14161f): ┌──────────────────┬──────────┬──────────────────────────────────────────────────────────────────┐ │ page bg │ #0b0d12 │ --cream (footer / thumb bg --cream-deep #11141b) │ │ card │ #14161f │ --card (cards, header, inputs, stepper dots, faq) │ │ text │ #e9ecf2 │ 16.4:1 page · 15.2:1 card │ │ text-soft │ #a3abbd │ 8.4:1 · 7.8:1 · 6.6:1 on blue tint │ │ text-muted │ #8b93a5 │ 6.3:1 · 5.9:1 (gray-450, placeholders, dead badge) │ │ line │ #2a2d3d │ hairline (decorative); FORM borders use #6b7384 ≥ 3.2:1 on tint │ │ blue as TEXT │ #7fa6ff │ --amber: h1 accent, brand-en, faq +, drop-zone dash 8.1:1 · 7.6:1 │ │ blue strong TEXT │ #b6c9ff │ --amber-strong: links, secondary btn, chips 11.8:1 · 11.0:1 │ │ blue tint │ #1b2540 │ --amber-soft: hover, chips, drop-zone, checked cards │ │ blue FILL │ #2b5fd8 │ solid buttons behind white text 5.9:1 (hover #3764e0 5.2:1) │ │ ok / err / focus │ #6fd396 / #ff8a80 / #5cc8ff (10.6:1 / 7.9:1 / 10.3:1) │ └──────────────────┴──────────┴──────────────────────────────────────────────────────────────────┘ Why split "blue text" from "blue fill": site.css uses --amber both as a fill under hardcoded #fff text (.btn-primary, .btn-login, .howto-num, stepper) and as text (.hero .accent, .brand-en). One token cannot satisfy both on dark, so --amber becomes the text-safe light blue and every fill is re-pointed to --t-fill below. Donate modal: site.css already ships dark --dn-* tokens under :root[data-theme="dark"] (lines 807–811) — the same attribute the engine sets — so the modal turns warm-dark for free; only its two contrast bugs are fixed here. */ /* ===== tokens ===== */ html[data-theme="dark"] { --cream: #0b0d12; /* page */ --cream-deep: #11141b; /* footer, photo thumb bg, install-banner close */ --card: #14161f; --amber: #7fa6ff; /* TEXT-safe blue (was #1D4ED8) — fills re-pointed to --t-fill */ --amber-strong: #b6c9ff; /* links, secondary buttons, chips (was #1E3A8A) */ --amber-soft: #1b2540; /* tint (was #DBEAFE) */ --ink: #e9ecf2; --ink-soft: #a3abbd; --line: #2a2d3d; --ok: #6fd396; --err: #ff8a80; --focus: #5cc8ff; --shadow: 0 4px 20px rgba(0, 0, 0, .45); --shadow-thumb: 0 4px 12px rgba(0, 0, 0, .5); /* gray scale flipped — gray-900 is the press-feedback overlay (opacity .06/.12): light on dark = hover brightens */ --gray-25: #15181f; --gray-50: #1a1d26; --gray-100: #222634; --gray-150: #2e3242; --gray-450: #8b93a5; --gray-800: #d5d9e2; --gray-900: #f2f4f8; /* semantic 5 — text lightened, tints darkened */ --sem-red: #ff6b5e; --sem-red-bg: #2e1416; --sem-green: #6fd396; --sem-green-bg: #14301f; --sem-blue: #7fb0ff; --sem-blue-bg: #1b2540; --sem-orange: #ffa94d; --sem-orange-bg: #3a2a12; --sem-violet: #b39dff; --sem-violet-bg: #241c3a; /* overlay-only tokens */ --t-fill: #2b5fd8; /* solid blue behind white text */ --t-fill-hover: #3764e0; --t-ok-fill: #1f7a46; /* green fill behind white text (stepper done) 5.3:1 */ --t-err-fill: #b3261e; /* red fill behind white text (toast.err) 6.5:1 */ --t-input-line: #6b7384; /* form-field boundary ≥ 3.2:1 on tint, 3.8:1 on card */ --t-blue-grad-a: #141c2e; /* replaces #DCE9F8/#E3EEFA image-box gradients */ --t-blue-grad-b: #1b2742; } html[data-theme="dark"] body { background: var(--cream); color: var(--ink); } /* ===== header (shared by the 3 pages: header.site-header > .wrap.header-inner > a.brand + nav.header-nav) ===== */ html[data-theme="dark"] .site-header { background: var(--card); border-bottom-color: var(--line); } html[data-theme="dark"] .brand { color: var(--ink); } html[data-theme="dark"] .brand .brand-en { color: var(--amber); } html[data-theme="dark"] .header-nav > a { color: var(--ink); } html[data-theme="dark"] .header-nav > a:hover { background: var(--amber-soft); } html[data-theme="dark"] .user-chip { background: var(--amber-soft); color: var(--amber-strong); } /* .btn-login has color:#fff !important in site.css — only the fill changes */ html[data-theme="dark"] .btn-login { background: var(--t-fill); } html[data-theme="dark"] .btn-login:hover { background: var(--t-fill-hover); } /* ===== buttons ===== */ html[data-theme="dark"] .btn-primary { background: var(--t-fill); color: #fff; } html[data-theme="dark"] .btn-primary:hover { background: var(--t-fill-hover); } html[data-theme="dark"] .btn-secondary { background: var(--card); color: var(--amber-strong); border-color: var(--amber); } html[data-theme="dark"] .btn-secondary:hover { background: var(--amber-soft); } html[data-theme="dark"] .btn[disabled], html[data-theme="dark"] .btn.is-disabled { background: #3a3d4a; color: #8b93a5; } /* was #CBBBA4 + white */ html[data-theme="dark"] .btn-donate { color: #fff; } /* orange gradient kept (white 3.3:1 is the original's own choice) */ /* ===== sections / cards / typography ===== */ html[data-theme="dark"] .section-sub { color: var(--ink-soft); } html[data-theme="dark"] .card { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); } html[data-theme="dark"] a { color: var(--amber-strong); } html[data-theme="dark"] :focus-visible { outline-color: var(--focus); } html[data-theme="dark"] ::placeholder { color: #8b93a5; opacity: 1; } html[data-theme="dark"] ::selection { background: #2b5fd8; color: #fff; } /* ===== hero ===== */ html[data-theme="dark"] .hero h1 .accent { color: var(--amber); } html[data-theme="dark"] .hero-lead, html[data-theme="dark"] .trust-line, html[data-theme="dark"] .cta-note { color: var(--ink-soft); } html[data-theme="dark"] .hero-img-box { background: linear-gradient(135deg, var(--t-blue-grad-a), var(--t-blue-grad-b)); box-shadow: var(--shadow); } html[data-theme="dark"] .img-fallback-note { color: var(--amber-strong); } /* ===== feature / howto / sample cards ===== */ html[data-theme="dark"] .feature-thumb, html[data-theme="dark"] .sample-card .sample-thumb { background: linear-gradient(135deg, var(--t-blue-grad-a), var(--t-blue-grad-b)); } html[data-theme="dark"] .feature-body p, html[data-theme="dark"] .howto-step p, html[data-theme="dark"] .sample-card .sample-desc { color: var(--ink-soft); } html[data-theme="dark"] .howto-num { background: var(--t-fill); color: #fff; } /* ===== demo / gallery (video boxes are #000 in both themes) ===== */ html[data-theme="dark"] .demo-box, html[data-theme="dark"] .result-video-box { box-shadow: var(--shadow); } html[data-theme="dark"] .gallery-caption { color: var(--ink-soft); } /* ===== FAQ ===== */ html[data-theme="dark"] details.faq { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); } html[data-theme="dark"] details.faq summary::before { color: var(--amber); } html[data-theme="dark"] details.faq .faq-body { color: var(--ink-soft); } /* ===== footer ===== */ html[data-theme="dark"] .site-footer { background: var(--cream-deep); border-top-color: var(--line); color: var(--ink-soft); } html[data-theme="dark"] .site-footer a { color: var(--ink-soft); } html[data-theme="dark"] .site-footer a:hover { color: var(--ink); } html[data-theme="dark"] .site-footer strong { color: var(--ink); } html[data-theme="dark"] .wia-footer-note { color: var(--ink-soft); } html[data-theme="dark"] .wia-footer-bottom { border-top-color: var(--line); } /* social SVGs carry brand fills (#1877F2 / #E4405F / #FF0000) — fine on dark, untouched. .donate-btn "WIA Motion" link: brown gradient #4A2E12→#2A1B0C + inline color:#F5D9AE — already dark, untouched. */ /* ===== wizard: stepper ===== */ html[data-theme="dark"] .stepper .dot { color: var(--ink-soft); } html[data-theme="dark"] .stepper .dot .n { background: var(--card); border-color: var(--t-input-line); } html[data-theme="dark"] .stepper .dot.active { color: var(--amber-strong); } html[data-theme="dark"] .stepper .dot.active .n { background: var(--t-fill); border-color: var(--t-fill); color: #fff; } html[data-theme="dark"] .stepper .dot.done .n { background: var(--t-ok-fill); border-color: var(--t-ok-fill); color: #fff; } html[data-theme="dark"] .stepper .bar { background: var(--line); } html[data-theme="dark"] .panel-sub { color: var(--ink-soft); } /* ===== wizard: photo upload ===== */ html[data-theme="dark"] .drop-zone { border-color: var(--amber); background: var(--amber-soft); } html[data-theme="dark"] .drop-zone:hover { background: #243356; } /* was #FBDFB6 */ html[data-theme="dark"] .drop-zone .dz-sub { color: var(--ink-soft); } html[data-theme="dark"] .photo-item { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-thumb); } html[data-theme="dark"] .photo-item .thumb { background: var(--cream-deep); } html[data-theme="dark"] .photo-item .ph-label { color: var(--ink-soft); } html[data-theme="dark"] .photo-tools { border-top-color: var(--line); } html[data-theme="dark"] .photo-tools button { background: var(--card); color: var(--amber-strong); } html[data-theme="dark"] .photo-tools button + button { border-left-color: var(--line); } html[data-theme="dark"] .photo-order-hint { color: var(--ink-soft); } html[data-theme="dark"] .photo-count .ok-mark { color: var(--ok); } html[data-theme="dark"] .photo-count .warn-mark { color: var(--err); } /* ===== wizard: style cards / radios / voice ===== */ html[data-theme="dark"] .style-card .style-box { background: var(--card); border-color: var(--t-input-line); } html[data-theme="dark"] .style-card .style-desc { color: var(--ink-soft); } html[data-theme="dark"] .style-card input:checked + .style-box { border-color: var(--amber); background: var(--amber-soft); } html[data-theme="dark"] .radio-big .radio-box { background: var(--card); border-color: var(--t-input-line); } html[data-theme="dark"] .radio-big input:checked + .radio-box { border-color: var(--amber); background: var(--amber-soft); } html[data-theme="dark"] .voice-preview { background: var(--card); border-color: var(--t-input-line); color: var(--amber-strong); } html[data-theme="dark"] .voice-preview.playing { background: var(--t-fill); border-color: var(--t-fill); color: #fff; } html[data-theme="dark"] .voice-ab-tag { color: var(--ink-soft); } html[data-theme="dark"] .story-tools .btn.listening { background: #c62828; border-color: #c62828; color: #fff; } /* white 5.6:1 (was #f75031) */ /* ===== forms ===== */ html[data-theme="dark"] .field .hint { color: var(--ink-soft); } html[data-theme="dark"] input[type="text"], html[data-theme="dark"] textarea { color: var(--ink); background: var(--card); border-color: var(--t-input-line); } html[data-theme="dark"] input[type="text"]:focus, html[data-theme="dark"] textarea:focus { border-color: var(--amber); outline-color: var(--focus); } /* site.css styles only input[type=text]/textarea — password (my.html RunPod key), number (donate custom), file (bgm) would keep the UA white box on a dark card */ html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] select { color: var(--ink); background: var(--card); border-color: var(--t-input-line); } html[data-theme="dark"] input[type="file"] { color: var(--ink); } /* my.html 75/80: inline style="border:1px solid var(--line, #ccc)" on #gpu-endpoint-id / #gpu-api-key — --line is the 1.5:1 hairline on dark; inline can only be beaten with !important (form-field 3:1 rule) */ html[data-theme="dark"] #gpu-endpoint-id, html[data-theme="dark"] #gpu-api-key { border-color: var(--t-input-line) !important; } html[data-theme="dark"] .field .hint.danger, html[data-theme="dark"] .inline-warn { background: var(--sem-red-bg); color: var(--err); border-color: #6b2b2b; } /* was #F2B8B5 */ /* ===== recall / guest hook / queue ===== */ html[data-theme="dark"] .recall-box, html[data-theme="dark"] .guest-hook { background: var(--amber-soft); border-color: var(--line); } html[data-theme="dark"] .recall-box p { color: var(--ink); } html[data-theme="dark"] .queue-chip { background: var(--amber-soft); color: var(--amber-strong); } /* ===== progress / stages / result ===== */ html[data-theme="dark"] .spinner { border-color: var(--amber-soft); border-top-color: var(--amber); } html[data-theme="dark"] .progress-sub, html[data-theme="dark"] .progress-pct { color: var(--ink-soft); } html[data-theme="dark"] .stage-item { color: var(--gray-450); } html[data-theme="dark"] .stage-item .stage-ico { background: var(--gray-100); } html[data-theme="dark"] .stage-item.done { color: var(--ok); } html[data-theme="dark"] .stage-item.done .stage-ico { background: var(--sem-green-bg); color: var(--ok); } /* was #DCEFE2 */ html[data-theme="dark"] .stage-item.now { color: var(--ink); } html[data-theme="dark"] .stage-item.now .stage-ico { background: var(--amber-soft); } html[data-theme="dark"] .stage-spin { border-color: var(--amber-soft); border-top-color: var(--amber); } html[data-theme="dark"] .progress-track { background: var(--gray-100); } html[data-theme="dark"] .shimmer-text { background-image: linear-gradient(90deg, var(--ink-soft) 40%, #cfe0ff 50%, var(--ink-soft) 60%); } html[data-theme="dark"] .dnd-overlay { background: rgba(127, 166, 255, .18); } html[data-theme="dark"] .dnd-overlay .dnd-box { background: var(--card); border-color: var(--amber); color: var(--amber-strong); } /* ===== error box ===== */ html[data-theme="dark"] .error-box { background: var(--sem-red-bg); border-color: #6b2b2b; color: var(--err); } html[data-theme="dark"] .error-box .error-detail { color: #d8a9a3; } /* was #7A4540 — 8.3:1 on the red tint */ /* ===== my.html: project list / badges ===== */ html[data-theme="dark"] .project-meta { color: var(--ink-soft); } html[data-theme="dark"] .status-COMPLETED { background: var(--sem-green-bg); color: var(--ok); } html[data-theme="dark"] .status-QUEUED, html[data-theme="dark"] .status-PROCESSING { background: var(--amber-soft); color: var(--amber-strong); } html[data-theme="dark"] .status-DRAFT { background: #262a35; color: var(--ink-soft); } /* was #EFEAE2 */ html[data-theme="dark"] .status-FAILED { background: var(--sem-red-bg); color: var(--err); } html[data-theme="dark"] .empty-box p { color: var(--ink-soft); } html[data-theme="dark"] .expire-badge { background: var(--sem-blue-bg); color: var(--sem-blue); } html[data-theme="dark"] .expire-badge.warn { background: var(--sem-orange-bg); color: var(--sem-orange); } html[data-theme="dark"] .expire-badge.dead { background: var(--gray-100); color: var(--gray-450); } /* ===== toast (app.js) — ink is now light, so the original ink-bg/white-text pairing would vanish ===== */ html[data-theme="dark"] .ws-toast { background: #e9ecf2; color: #0b0d12; box-shadow: 0 4px 18px rgba(0, 0, 0, .6); } html[data-theme="dark"] .ws-toast.err { background: var(--t-err-fill); color: #fff; } /* ===== PWA install banner (app.js) ===== */ html[data-theme="dark"] .install-banner { background: var(--card); border-color: var(--t-input-line); box-shadow: var(--shadow); } html[data-theme="dark"] .install-banner-text { color: var(--ink); } html[data-theme="dark"] .install-banner-close { background: var(--cream-deep); color: var(--ink-soft); } html[data-theme="dark"] .install-banner-close:hover { background: var(--amber-soft); color: var(--ink); } /* ===== donate modal (.dn-*) — tokens already dark via :root[data-theme="dark"] in site.css; two fixes only ===== */ /* .dn-primary keeps color:#fff on --dn-accent #E2A25C (2.2:1) — dark text instead (8.4:1) */ html[data-theme="dark"] .dn-primary { color: #1a1208; } html[data-theme="dark"] .dn-primary[disabled] { background: var(--dn-line); color: var(--dn-ink-soft); } /* .dn-error is hardcoded #B3261E (2.3:1 on the brown card) */ html[data-theme="dark"] .dn-error { color: #ff8a80; } html[data-theme="dark"] .dn-modal-overlay { background: rgba(0, 0, 0, .7); } /* amount chips / custom input borders are --dn-line #3D2C1E (1.3:1 on the brown card) — lift to the 3:1 form rule */ html[data-theme="dark"] .dn-amount-chip, html[data-theme="dark"] .dn-amount-custom input { border-color: #7a6248; } /* Stripe Payment Element lives in an iframe with appearance.variables colorBackground:#FBF6EF (index.html 517) — CSS cannot reach it; see NOTES ③ for the JS change. */ /* ===== skip link / misc ===== */ html[data-theme="dark"] .wia-skip:focus { outline: 3px solid var(--focus); } /* inline #111 box on a #0b0d12 page — the ring marks it */ html[data-theme="dark"] .ad-rail-slot { background: transparent; } /* ad rails (index/my: neon cards on #0a0a0f gradients; create: #ee5a24 orange) and the wiabook promo banner (#1f1b24) are already dark — untouched. Gallery/demo