/* ============================================================ brand-unify.css — 956231 Studio 全站品牌装修层 v2（2026-10-07） 三件套：品牌色 + 品牌字体 + 品牌商标(见 /assets/logo.svg、/favicon.ico、/site.webmanifest) 作用：在任意页面「内联样式之后」加载，把全站浅色页统一到首页品牌语言 边界：只管视觉，不碰功能 JS / data-i18n / 表单逻辑；不改布局（不设 max-width/padding/grid） 深色页（geo-landing / guochao-pack / theme-demo）不引入本文件 ============================================================ */ /* ---------- ① 品牌色 token（唯一真源，与首页 index.html :root 一致） ---------- */ :root{ --bg:#EEECF9; --bg-soft:#FFFFFF; --fill:#E7E4F8; --sunken:#F4F2FB; --line:#E2DFF4; --border-brand:#CFCBF6; --brand:#7F77DD; --brand-mid:#6B61D4; --brand-deep:#3C3489; --cta:#534AB7; --cta-top:#8A83E2; --t1:#26215C; --t2:#534AB7; --t3:#5C5987; --sh1:0 1px 2px rgba(38,33,92,.07),0 4px 10px rgba(38,33,92,.06),0 14px 28px rgba(38,33,92,.065); --sh2:0 2px 4px rgba(38,33,92,.10),0 10px 22px rgba(38,33,92,.11),0 26px 50px rgba(38,33,92,.11); --ease:.12s ease; /* 品牌字体栈（全站统一） */ --font-brand:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ---------- ② 品牌字体：全站统一（等宽 code 不受影响，直接命中优先） ---------- */ body{ font-family:var(--font-brand) !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; } /* ---------- ③ 品牌背景：明显淡紫 + 双光晕（告别"接近白"） ---------- */ html{background:#EEECF9} body{ background: radial-gradient(58% 44% at 86% -8%, rgba(127,119,221,.32), transparent 62%), radial-gradient(48% 32% at 4% 4%, rgba(138,131,226,.24), transparent 58%), linear-gradient(180deg,#F1EFFB 0%,#EEECF9 46%,#E9E6F6 100%) !important; background-attachment:fixed !important; } /* ---------- ④ 卡片统一：18px 圆角 + 多层柔和投影 + 顶部光条（原版光影语言） ---------- */ .card, .policy, .subcol{ border-radius:18px !important; box-shadow:var(--sh1) !important; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } .card{position:relative} /* 顶部 1px 品牌光条：卡片「受光面」——取自原版深色页的 ::before 光条 */ .card::before{ content:""; position:absolute; left:13%; right:13%; top:0; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(127,119,221,.85),transparent); opacity:.85; border-radius:1px; } .card:hover{ border-color:var(--border-brand) !important; transform:translateY(-3px) !important; box-shadow:0 2px 4px rgba(38,33,92,.10),0 14px 28px rgba(83,74,183,.24), 0 30px 56px rgba(83,74,183,.16) !important; } /* ---------- ⑤ 关键修复：卡片内文字入口 → 2.5D 立体按钮（含光影：镜面反光带 + 品牌光晕） ---------- */ .card .go{ position:relative; overflow:hidden; display:inline-flex !important; align-items:center; justify-content:center; gap:6px; align-self:flex-start; margin-top:14px; font-size:13px; font-weight:700; line-height:1; color:#fff !important; text-decoration:none !important; padding:11px 19px; border:0; border-radius:11px; cursor:pointer; background:linear-gradient(180deg,#A29AEC 0%,#6B61D4 48%,#4A40A8 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.68), /* 顶部镜面高光 */ inset 0 -2px 3px rgba(28,24,70,.40), /* 底部内阴影＝厚度 */ 0 1px 0 rgba(255,255,255,.50), /* 底缘外高光 */ 0 2px 0 var(--brand-deep), /* 2.5D 实心底边 */ 0 9px 20px rgba(83,74,183,.40), /* 品牌色光晕（近） */ 0 18px 38px rgba(83,74,183,.20) !important; /* 品牌色光晕（远） */ transition:transform var(--ease), box-shadow var(--ease) !important; } /* 上半部玻璃反光带——这是"光影效果"的核心 */ .card .go::before{ content:""; position:absolute; left:5%; right:5%; top:1px; height:47%; border-radius:9px 9px 18px 18px / 8px 8px 26px 26px; background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.12) 60%,transparent); pointer-events:none; } .card:hover .go{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.74),inset 0 -2px 3px rgba(28,24,70,.40), 0 1px 0 rgba(255,255,255,.55), 0 3px 0 var(--brand-deep), 0 12px 26px rgba(83,74,183,.50),0 24px 48px rgba(83,74,183,.26) !important; } .card:active .go{ transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 2px 5px rgba(28,24,70,.34), 0 0 0 var(--brand-deep),0 3px 8px rgba(83,74,183,.30) !important; } /* ---------- ⑥ 通用 2.5D 立体按钮（供各页复用；与 .card .go 同一光影语言） ---------- */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; font-size:14px; font-weight:700; line-height:1; color:#fff; border:0; cursor:pointer; border-radius:12px; padding:12px 22px; text-decoration:none; background:linear-gradient(180deg,#A29AEC 0%,#6B61D4 48%,#4A40A8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -2px 3px rgba(28,24,70,.40), 0 1px 0 rgba(255,255,255,.50), 0 2px 0 var(--brand-deep), 0 9px 20px rgba(83,74,183,.40), 0 18px 38px rgba(83,74,183,.20); transition:transform var(--ease), box-shadow var(--ease); } .btn::before{ content:""; position:absolute; left:5%; right:5%; top:1px; height:47%; border-radius:10px 10px 18px 18px / 8px 8px 26px 26px; background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.12) 60%,transparent); pointer-events:none; } .btn:hover{transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.74),inset 0 -2px 3px rgba(28,24,70,.40), 0 1px 0 rgba(255,255,255,.55),0 3px 0 var(--brand-deep), 0 12px 26px rgba(83,74,183,.50),0 24px 48px rgba(83,74,183,.26)} .btn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 2px 5px rgba(28,24,70,.34), 0 0 0 var(--brand-deep),0 3px 8px rgba(83,74,183,.30)} /* ---------- ⑥c 中英并排块：中文模式隐藏 .zh（避免与 h3 同键重复渲染） ---------- */ body[data-lang="zh"] .zh{display:none !important} /* ---------- ⑦ 品牌标题：渐变立体字（限白底大标题容器，避开彩色横幅内白字） ---------- */ .zone-hero h1, .page > h1, main > h1{ background:linear-gradient(180deg,#7D73DF 0%,#4A419F 27%,#241F58 52%,#3E3690 75%,#8E84EA 100%); -webkit-background-clip:text; background-clip:text; color:#3A3390; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 3px 6px rgba(38,33,92,.22)); }