/* ============================================================ Vlog English · 全站换装层（柔和粉彩 Soft/Pastel） 2026-10-15 用户确认方案落地。 策略：CSS 覆盖层 —— 不改任何 DOM/JS 选择器，只做三件事： A. 把原站 --theme-* 四主题槽位重映射为粉彩色板 （original→蜜桃橙[默认] / indigo→冰川蓝 / lime→薄荷绿 / apricot→高级灰） B. 全局排版气质（Nunito + Baloo 2 自托管可变字体） C. 各页面点睛覆盖（定价/登录/账户/库页/视频页） 配套 restyle.js 注入氛围色雾与主题浮窗，主题键与 account 页共用 vlogenglish_app_theme_v1，全站互通。 ============================================================ */ /* ---------- A. 主题色板 ---------- */ :root,html[data-app-theme=original]{ --theme-page-bg:#FFF7EF;--theme-surface:#FFFFFF;--theme-surface-muted:#FFF3EA; --theme-text:#40304E;--theme-text-muted:#7A6B8A; --theme-accent:#F97B5C;--theme-accent-strong:#E05B39;--theme-accent-soft:#FFE3D6; --theme-accent-soft-strong:#FFD3BE;--theme-accent-rgb:249,123,92; --theme-border:#F2E5DA;--theme-border-subtle:rgba(242,180,150,.22); --theme-shadow-color:rgba(64,48,78,.10); --theme-learning-accent:#2FBFA0;--theme-learning-accent-strong:#23997F;--theme-learning-accent-rgb:47,191,160; --theme-learning-action:#2FBFA0;--theme-learning-action-rgb:47,191,160; --theme-learning-action-soft:#D9F3EC;--theme-learning-action-soft-strong:#BEEADD; --theme-word-mark:#FFE3A3;--theme-word-mark-strong:#FFB84D; --theme-avatar-start:#FFF9F4;--theme-avatar-end:#FFE3D6; --ve-grad-a:#FF9E7D;--ve-grad-b:#FFD98E; /* 渐变面（会员卡/横幅） */ --ve-blob-1:#FFE3D6;--ve-blob-2:#EAE4FB;--ve-blob-3:#D9F3EC;--ve-blob-4:#FFF1CC; } html[data-app-theme=indigo]{ --theme-page-bg:#F2F7FE;--theme-surface:#FFFFFF;--theme-surface-muted:#EEF4FD; --theme-text:#2B3350;--theme-text-muted:#6B7494; --theme-accent:#4A7FE0;--theme-accent-strong:#3A6BD6;--theme-accent-soft:#E3EDFD; --theme-accent-soft-strong:#D2E2FA;--theme-accent-rgb:74,127,224; --theme-border:#E2E9F7;--theme-border-subtle:rgba(110,140,220,.20); --theme-shadow-color:rgba(43,51,80,.10); --theme-learning-accent:#FF9E7D;--theme-learning-accent-strong:#F97B5C;--theme-learning-accent-rgb:249,123,92; --theme-learning-action:#FF9E7D;--theme-learning-action-rgb:249,123,92; --theme-learning-action-soft:#FFE3D6;--theme-learning-action-soft-strong:#FFD3BE; --theme-word-mark:#FFE3A3;--theme-word-mark-strong:#FFB84D; --theme-avatar-start:#F6FAFF;--theme-avatar-end:#E3EDFD; --ve-grad-a:#6E9EF2;--ve-grad-b:#B7CFFF; --ve-blob-1:#E3EDFD;--ve-blob-2:#EAE4FB;--ve-blob-3:#D9F3EC;--ve-blob-4:#FFF1CC; } html[data-app-theme=lime]{ --theme-page-bg:#F0FAF5;--theme-surface:#FFFFFF;--theme-surface-muted:#E8F6EF; --theme-text:#233B33;--theme-text-muted:#66807A; --theme-accent:#2BA384;--theme-accent-strong:#1F8A6E;--theme-accent-soft:#DCF5EC; --theme-accent-soft-strong:#C4EDDF;--theme-accent-rgb:43,163,132; --theme-border:#DDF0E6;--theme-border-subtle:rgba(80,160,130,.20); --theme-shadow-color:rgba(35,59,51,.10); --theme-learning-accent:#FF9E7D;--theme-learning-accent-strong:#F97B5C;--theme-learning-accent-rgb:249,123,92; --theme-learning-action:#FF9E7D;--theme-learning-action-rgb:249,123,92; --theme-learning-action-soft:#FFE3D6;--theme-learning-action-soft-strong:#FFD3BE; --theme-word-mark:#FFE3A3;--theme-word-mark-strong:#FFB84D; --theme-avatar-start:#F5FCF9;--theme-avatar-end:#DCF5EC; --ve-grad-a:#43C59E;--ve-grad-b:#A8E6CB; --ve-blob-1:#DCF5EC;--ve-blob-2:#EAE4FB;--ve-blob-3:#FFE3D6;--ve-blob-4:#FFF1CC; } html[data-app-theme=apricot]{ --theme-page-bg:#F4F5F7;--theme-surface:#FFFFFF;--theme-surface-muted:#ECEEF1; --theme-text:#2B2F36;--theme-text-muted:#6B7280; --theme-accent:#5C6470;--theme-accent-strong:#474E59;--theme-accent-soft:#EAEDF1; --theme-accent-soft-strong:#DCE0E6;--theme-accent-rgb:92,100,112; --theme-border:#E3E6EA;--theme-border-subtle:rgba(92,100,112,.18); --theme-shadow-color:rgba(43,47,54,.10); --theme-learning-accent:#6E8CA0;--theme-learning-accent-strong:#567189;--theme-learning-accent-rgb:110,140,160; --theme-learning-action:#6E8CA0;--theme-learning-action-rgb:110,140,160; --theme-learning-action-soft:#E6EEF3;--theme-learning-action-soft-strong:#D4E2EA; --theme-word-mark:#FFE3A3;--theme-word-mark-strong:#FFB84D; --theme-avatar-start:#F8F9FB;--theme-avatar-end:#EAEDF1; --ve-grad-a:#8A93A0;--ve-grad-b:#C2C9D2; --ve-blob-1:#EAEDF1;--ve-blob-2:#EAE4FB;--ve-blob-3:#E6EEF3;--ve-blob-4:#FFF1CC; } /* ---------- B. 全局排版与气质 ---------- */ @font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap; src:url('../fonts/Baloo2-var.woff2') format('woff2')} @font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap; src:url('../fonts/Nunito-var.woff2') format('woff2')} /* 原 shell 通过 Google Fonts 加载 Fredoka（2026-10-15 起移除外链改全自托管）： 用 Baloo 2 顶替 Fredoka 的字形位，避免外网抖动导致控制台错误 */ @font-face{font-family:'Fredoka';font-style:normal;font-weight:600 700;font-display:swap; src:url('../fonts/Baloo2-var.woff2') format('woff2')} html[data-app-theme] body{ font-family:'Nunito','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; background-color:var(--theme-page-bg)} html[data-app-theme] ::selection{background:var(--theme-accent-soft-strong)} /* 品牌字：标题/页头品牌用 Baloo 2 */ html[data-app-theme] h1,html[data-app-theme] h2{ font-family:'Baloo 2','Nunito','PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:.2px} html[data-app-theme] .home-header-brand, html[data-app-theme] .auth-page-logo, html[data-app-theme] .account-settings-title, html[data-app-theme] .pricing-modal-page-copy strong{ font-family:'Baloo 2','Nunito','PingFang SC','Microsoft YaHei',sans-serif} /* 卡片与按钮气质 */ html[data-app-theme] .video-card{border-radius:22px;overflow:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s} html[data-app-theme] .video-card:hover{transform:translateY(-5px); box-shadow:0 22px 48px rgba(var(--theme-accent-rgb),.22)} html[data-app-theme] .account-card, html[data-app-theme] .auth-page-card{border-radius:24px} html[data-app-theme] button[class*="primary"]:not(:disabled){ box-shadow:0 8px 20px rgba(var(--theme-accent-rgb),.32)} /* ---------- C1. 定价页（覆盖页内