/* ============================================================ Smart Dark Toggle — site styles Dark-first aesthetic (the product is a dark-mode tool). Zero framework, zero external dependency. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { --bg: #0b0d10; --bg-elev: #14171c; --bg-elev-2: #1b1f26; --fg: #e9ecf1; --fg-dim: #9aa3b0; --fg-faint: #6b7280; --accent: #8ab4ff; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --hairline: color-mix(in srgb, #ffffff 9%, transparent); --hairline-strong: color-mix(in srgb, #ffffff 16%, transparent); --radius: 14px; --radius-sm: 9px; --maxw: 860px; --space: 20px; --shadow: 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent) inset, 0 20px 60px -30px rgba(0, 0, 0, 0.9); } html { height: 100%; } body { margin: 0; min-height: 100%; background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── language switching (JS toggles .lang-zh / .lang-en on ) ── */ /* Before JS runs (no lang class yet) hide both to avoid a flash of both. */ body:not(.lang-zh, .lang-en) :is(.l-zh, .l-en) { display: none; } body.lang-zh .l-en, body.lang-en .l-zh { display: none; } /* block-level dual elements (paragraphs / list items) that carry the class directly */ body.lang-zh p.l-en, body.lang-en p.l-zh, body.lang-zh li.l-en, body.lang-en li.l-zh, body.lang-zh div.l-en, body.lang-en div.l-zh { display: none; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ── top bar ── */ .topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--hairline); } .topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 0.98rem; color: var(--fg); } .brand svg { width: 26px; height: 26px; color: var(--accent); flex: none; } .spacer { flex: 1; } .navlink { color: var(--fg-dim); font-size: 0.92rem; } .navlink:hover { color: var(--fg); text-decoration: none; } .lang-toggle { min-width: 40px; padding: 5px 11px; font: inherit; font-size: 0.85rem; color: var(--fg-dim); background: color-mix(in srgb, #ffffff 6%, transparent); border: 1px solid var(--hairline); border-radius: 8px; cursor: pointer; } .lang-toggle:hover { color: var(--fg); border-color: var(--hairline-strong); } /* ── hero ── */ .hero { text-align: center; padding: 84px 24px 56px; } .hero .app-icon { width: 96px; height: 96px; color: var(--accent); filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent)); } .hero h1 { margin: 22px 0 10px; font-size: 2.6rem; line-height: 1.15; font-weight: 720; letter-spacing: -0.02em; } .hero .subtitle { margin: 0 auto; max-width: 620px; font-size: 1.18rem; color: var(--fg-dim); } /* ── App Store button (disabled placeholder) ── */ .cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .appstore-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 12px; border: 1px solid var(--hairline-strong); background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev)); color: var(--fg-faint); font-weight: 600; cursor: not-allowed; opacity: 0.72; user-select: none; } .appstore-btn svg { width: 26px; height: 26px; flex: none; } .appstore-btn .btn-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; } .appstore-btn .btn-small { font-size: 0.7rem; color: var(--fg-faint); } .appstore-btn .btn-big { font-size: 1.05rem; color: var(--fg-dim); } .coming-soon { font-size: 0.85rem; color: var(--fg-faint); } /* ── sections ── */ section.block { padding: 46px 0; border-top: 1px solid var(--hairline); } section.block h2 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 680; letter-spacing: -0.01em; } section.block .lede { margin: 0 0 28px; color: var(--fg-dim); font-size: 1.05rem; } /* three-state cards */ .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .mode-card { padding: 20px 18px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow); } .mode-card .mode-name { display: flex; align-items: center; gap: 9px; font-weight: 660; font-size: 1.12rem; margin-bottom: 6px; } .mode-card .mode-name .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .mode-card.on .dot { background: #5bd08a; } .mode-card.auto .dot { background: var(--accent); } .mode-card.off .dot { background: var(--fg-faint); } .mode-card p { margin: 0; color: var(--fg-dim); font-size: 0.98rem; } .per-site-note { margin: 18px 0 0; color: var(--fg-faint); font-size: 0.95rem; } /* engine feature grid */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .feature { padding: 22px 20px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg-elev); } .feature .ficon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 12px; } .feature .ficon svg { width: 20px; height: 20px; } .feature h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 640; } .feature p { margin: 0; color: var(--fg-dim); font-size: 0.98rem; } /* privacy block */ .privacy-block { padding: 30px 26px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent), var(--bg-elev); } .privacy-block .shield { width: 40px; height: 40px; color: var(--accent); margin-bottom: 12px; } .privacy-block h2 { margin: 0 0 12px; } .privacy-block ul { margin: 0; padding-left: 1.25em; } .privacy-block li { margin-bottom: 8px; color: var(--fg-dim); } .privacy-block li strong { color: var(--fg); } /* ── footer ── */ footer { border-top: 1px solid var(--hairline); padding: 34px 0 48px; color: var(--fg-faint); font-size: 0.92rem; } footer .foot-inner { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; } footer a { color: var(--fg-dim); } footer .dev { width: 100%; margin-top: 4px; color: var(--fg-faint); } /* ── privacy policy document page ── */ .doc { padding: 40px 0 60px; } .doc h1 { font-size: 2rem; margin: 0 0 6px; letter-spacing: -0.015em; } .doc .effective { color: var(--fg-faint); font-size: 0.95rem; margin: 0 0 32px; } .doc h2 { font-size: 1.2rem; font-weight: 660; margin: 34px 0 8px; } .doc p, .doc li { color: var(--fg-dim); } .doc ul { padding-left: 1.3em; } .doc li { margin-bottom: 6px; } .doc .meta-row { margin: 2px 0; } .doc strong { color: var(--fg); font-weight: 620; } /* ── responsive ── */ @media (max-width: 720px) { body { font-size: 16px; } .hero { padding: 60px 20px 44px; } .hero h1 { font-size: 2.1rem; } .modes { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } }