/* ============================================================ 肥哥食堂 · 页面皮肤系统（css/skins.css） ------------------------------------------------------------ 每个独立页面可在后台选一套「整页风格」（page.skin）： ① server.js / app.js / admin.js 把 data-skin 写到 #page-root / #preview 上； ② 本文件按 `#page-root[data-skin="x"]` / `#preview[data-skin="x"]` 整页换装—— 同一批内容组件（首屏 / 卡片 / 数据矩阵 / 对照表 / 时间轴…）在不同皮肤下 呈现完全不同的设计语言。 ③ 皮肤三色（--skin-accent / --skin-accent-2 / --skin-bg）由 render.js 按 page.skinCfg 输出；本文件所有取色都写成 var(--skin-*, 出厂值)， 后台不填即用出厂值，填了即刻生效。 结构约定（每套皮肤五段）： [1] 根令牌 + 页面底纹 [2] 导航 [3] 首屏 [4] 内容组件 [5] 收尾（CTA/页脚/动效/响应式） 无障碍：所有持续动画包在 prefers-reduced-motion: no-preference 里； 打印：文件末尾统一关闭所有皮肤装饰，公示页打印送审不受影响。 ============================================================ */ /* 皮肤根令牌的统一写法：三色映射 + 透明度三元组。 ⚠️ --skin-* 由 render.js 注入到 #page-root#page-root / #preview#preview， 权重高于这里的 (0,1,0,0)，因此本段只是「兜底默认」，不会盖掉后台配色。 */ #page-root[data-skin],#preview[data-skin]{ --sk-a:var(--skin-accent,#E8590C); --sk-a2:var(--skin-accent-2,#16233A); --sk-bg:var(--skin-bg,#F6F8FB); --sk-a-rgb:var(--skin-accent-rgb,232,89,12); --sk-a2-rgb:var(--skin-accent-2-rgb,22,35,58); --sk-mono:ui-monospace,"Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace; --sk-serif:"Georgia","Times New Roman","Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif; --sk-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif; } /* 皮肤令牌再映射：把全站品牌令牌（--yellow / --brown 系）按皮肤改指到各自的强调色。 这样所有没有在皮肤里显式改写的组件（按钮、筛选片、眉标、高亮词…）自动跟随皮肤配色， 不会出现「皮肤是 A 色、按钮还是全站黄」的割裂感。 ⚠️ 权重：这里的 (0,1,1,0) 高于 render.js 注入的全局令牌 (0,1,0,0)， 低于「本页专属配色」的 (0,2,0,0)——选了皮肤的页面应清空 page.theme， 让皮肤 + 后台「皮肤配色」成为唯一的调色入口。 */ /* --brown 是「强调字」色位（眉标、数字、编号等小字也用它），浅底皮肤取比填充色 更深一档的色号，保证 11–13px 小字的对比度；--yellow 保持皮肤主填充色。 --on-primary 同理：主按钮是「强调色实心 + 文字」，橙/金/蓝这类亮强调色配白字 只有 2.6~3.8:1（实测），所以凡填充色偏亮的皮肤一律改用同色系深墨， 与 cockpit/dispatch/arena 的既有做法一致。 */ #page-root[data-skin="atlas"],#preview[data-skin="atlas"]{ --yellow:var(--sk-a);--yellow-deep:#C74A08;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:#FDEDE3;--brown:#B84808;--glyph:var(--sk-a);--on-primary:#2A0E00} #page-root[data-skin="gallery"],#preview[data-skin="gallery"]{ --yellow:var(--sk-a);--yellow-deep:#F26521;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:#FFF1E6;--brown:#B34F16;--glyph:var(--sk-a);--on-primary:#2A1200} #page-root[data-skin="journal"],#preview[data-skin="journal"]{ --yellow:var(--sk-a);--yellow-deep:#A32F22;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:#F9ECE8;--brown:#A93325;--glyph:var(--sk-a);--on-primary:#FFF7F0} #page-root[data-skin="cockpit"],#preview[data-skin="cockpit"]{ --yellow:var(--sk-a);--yellow-deep:#22C4AC;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:rgba(53,224,200,.08);--brown:var(--sk-a);--glyph:var(--sk-a);--on-primary:#06251F} #page-root[data-skin="portfolio"],#preview[data-skin="portfolio"]{ --yellow:var(--sk-a);--yellow-deep:#8F681F;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:#F5EFE2;--brown:#8A6420;--glyph:var(--sk-a);--on-primary:#211501} #page-root[data-skin="route"],#preview[data-skin="route"]{ --yellow:var(--sk-a);--yellow-deep:#D95F17;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:#FDEBDD;--brown:#A3470F;--glyph:var(--sk-a);--on-primary:#2B1301} #page-root[data-skin="dispatch"],#preview[data-skin="dispatch"]{ --yellow:var(--sk-a);--yellow-deep:#E8B400;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:rgba(255,196,0,.08);--brown:var(--sk-a);--glyph:var(--sk-a);--on-primary:#221A02} #page-root[data-skin="concierge"],#preview[data-skin="concierge"]{ --yellow:var(--sk-a);--yellow-deep:#9E7422;--yellow-rgb:var(--sk-a-rgb); --yellow-soft:#F6EDDC;--brown:#8A661C;--glyph:var(--sk-a);--on-primary:#2A1D05} /* ============================================================ ① ATLAS · 工程蓝图（核心业务页） 设计语言：制图手册。方格坐标纸底纹、图号（FIG.01）编号、 硬边框 + 硬投影的图框卡片、等宽小字标签、角标十字定位符。 ============================================================ */ #page-root[data-skin="atlas"],#preview[data-skin="atlas"]{ --font-display:"Bahnschrift","DIN Alternate","Avenir Next Condensed","Segoe UI","Noto Sans SC","Microsoft YaHei",sans-serif; background: linear-gradient(rgba(var(--sk-a2-rgb),.045) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--sk-a2-rgb),.045) 1px,transparent 1px), linear-gradient(rgba(var(--sk-a2-rgb),.028) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--sk-a2-rgb),.028) 1px,transparent 1px), var(--sk-bg); background-size:120px 120px,120px 120px,24px 24px,24px 24px; color:#24314A; } /* 皮肤接管基调：区块令牌全部由皮肤发布，页面自带 tone 不再参与 */ #page-root[data-skin="atlas"] section,#preview[data-skin="atlas"] section{ --sec-h:#16233A;--sec-t:#3A4763;--sec-muted:#5D6C86; --sec-accent:var(--sk-a);--sec-card:#FFFFFF; --line:rgba(var(--sk-a2-rgb),.18);--rule:rgba(var(--sk-a2-rgb),.14);--rule-2:rgba(var(--sk-a2-rgb),.26); } #page-root[data-skin="atlas"] .soft-bg,#preview[data-skin="atlas"] .soft-bg{background:rgba(var(--sk-a2-rgb),.04)} #page-root[data-skin="atlas"] .dark-sec,#preview[data-skin="atlas"] .dark-sec{ background:#16233A;color:#E9EEF6} #page-root[data-skin="atlas"] .dark-sec::before,#preview[data-skin="atlas"] .dark-sec::before{display:none} /* —— 导航：细线工程栏 —— */ #page-root[data-skin="atlas"] .nav,#preview[data-skin="atlas"] .nav{ background:rgba(246,248,251,.9);border-bottom:1.5px solid #16233A} #page-root[data-skin="atlas"] .nav-links a,#preview[data-skin="atlas"] .nav-links a{color:#3A4763} #page-root[data-skin="atlas"] .nav-links a:hover,#preview[data-skin="atlas"] .nav-links a:hover{color:var(--sk-a);background:rgba(var(--sk-a-rgb),.08)} #page-root[data-skin="atlas"] .nav-links a.active,#preview[data-skin="atlas"] .nav-links a.active{color:#16233A} #page-root[data-skin="atlas"] .nav-links a::after,#preview[data-skin="atlas"] .nav-links a::after{background:var(--sk-a);height:3px;border-radius:0} #page-root[data-skin="atlas"] .brand .logo,#preview[data-skin="atlas"] .brand .logo{border-radius:4px} #page-root[data-skin="atlas"] .nav .brand b,#preview[data-skin="atlas"] .nav .brand b{color:#16233A} #page-root[data-skin="atlas"] .nav .btn,#preview[data-skin="atlas"] .nav .btn{ border-radius:4px;box-shadow:3px 3px 0 rgba(var(--sk-a2-rgb),.9)} /* —— 首屏：图签栏 + 巨型制图标题 —— */ #page-root[data-skin="atlas"] .hero,#preview[data-skin="atlas"] .hero{background:transparent} #page-root[data-skin="atlas"] .hero::before,#preview[data-skin="atlas"] .hero::before{display:none} #page-root[data-skin="atlas"] .hero-center h1,#preview[data-skin="atlas"] .hero-center h1{ font-weight:700;letter-spacing:-.01em;text-transform:none} #page-root[data-skin="atlas"] .hero-center h1 .hl,#preview[data-skin="atlas"] .hero-center h1 .hl{ color:var(--sk-a);position:relative} #page-root[data-skin="atlas"] .hero-center h1 .hl::after,#preview[data-skin="atlas"] .hero-center h1 .hl::after{ content:"";left:0;right:0;bottom:.04em;height:.14em;background:none; background-image:repeating-linear-gradient(90deg,var(--sk-a) 0 10px,transparent 10px 16px); opacity:.55} #page-root[data-skin="atlas"] .hero .sub,#preview[data-skin="atlas"] .hero .sub{color:#3A4763} #page-root[data-skin="atlas"] .hero .eyebrow,#preview[data-skin="atlas"] .hero .eyebrow{ font-family:var(--sk-mono);letter-spacing:.22em;text-transform:uppercase; background:#FFFFFF;color:#16233A;border:1.5px solid #16233A;border-radius:0; box-shadow:3px 3px 0 rgba(var(--sk-a2-rgb),.35)} #page-root[data-skin="atlas"] .hero .eyebrow::before,#preview[data-skin="atlas"] .hero .eyebrow::before{ border-radius:0;background:var(--sk-a);width:8px;height:8px} /* 图号：每个区块的眉标自动带 FIG.NN 编号（隐藏区块不计数） */ #page-root[data-skin="atlas"] main,#preview[data-skin="atlas"] main{counter-reset:skfig} #page-root[data-skin="atlas"] main>section,#preview[data-skin="atlas"] main>section{counter-increment:skfig} #page-root[data-skin="atlas"] .eyebrow::before,#preview[data-skin="atlas"] .eyebrow::before{ border-radius:0;background:var(--sk-a)} #page-root[data-skin="atlas"] section .eyebrow:not(.hero .eyebrow),#preview[data-skin="atlas"] section .eyebrow:not(.hero .eyebrow){ font-family:var(--sk-mono);letter-spacing:.2em;background:transparent;color:#16233A; border:none;border-left:3px solid var(--sk-a);border-radius:0;padding:4px 0 4px 12px} #page-root[data-skin="atlas"] section .eyebrow::after,#preview[data-skin="atlas"] section .eyebrow::after{ content:"FIG." counter(skfig,decimal-leading-zero);font-family:var(--sk-mono); font-size:11px;color:var(--sk-a);letter-spacing:.12em;margin-left:4px} #page-root[data-skin="atlas"] .h2,#preview[data-skin="atlas"] .h2{ letter-spacing:.01em;border:none;padding-bottom:0} #page-root[data-skin="atlas"] .lead,#preview[data-skin="atlas"] .lead{color:#3A4763} /* —— 按钮：硬边图纸风 —— */ #page-root[data-skin="atlas"] .btn,#preview[data-skin="atlas"] .btn{ border-radius:4px;box-shadow:3px 3px 0 rgba(var(--sk-a2-rgb),.85); transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease,background var(--dur-1) ease} #page-root[data-skin="atlas"] .btn:hover,#preview[data-skin="atlas"] .btn:hover{ transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(var(--sk-a2-rgb),.85)} #page-root[data-skin="atlas"] .btn.ghost,#preview[data-skin="atlas"] .btn.ghost{ color:#16233A;border:1.5px solid #16233A} #page-root[data-skin="atlas"] .btn.ghost:hover,#preview[data-skin="atlas"] .btn.ghost:hover{background:rgba(var(--sk-a-rgb),.08)} /* —— 卡片：图框 —— */ #page-root[data-skin="atlas"] .card,#preview[data-skin="atlas"] .card, #page-root[data-skin="atlas"] .adv,#preview[data-skin="atlas"] .adv, #page-root[data-skin="atlas"] .stat,#preview[data-skin="atlas"] .stat, #page-root[data-skin="atlas"] .step,#preview[data-skin="atlas"] .step{ background:#FFF;border:1.5px solid rgba(var(--sk-a2-rgb),.8);border-radius:2px; box-shadow:4px 4px 0 rgba(var(--sk-a2-rgb),.12);position:relative} #page-root[data-skin="atlas"] .card:hover,#preview[data-skin="atlas"] .card:hover, #page-root[data-skin="atlas"] .adv:hover,#preview[data-skin="atlas"] .adv:hover, #page-root[data-skin="atlas"] .stat:hover,#preview[data-skin="atlas"] .stat:hover, #page-root[data-skin="atlas"] .step:hover,#preview[data-skin="atlas"] .step:hover{ transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(var(--sk-a2-rgb),.16); border-color:var(--sk-a)} #page-root[data-skin="atlas"] .card::before,#preview[data-skin="atlas"] .card::before, #page-root[data-skin="atlas"] .adv::before,#preview[data-skin="atlas"] .adv::before{display:none} /* 图框角上的定位十字 */ #page-root[data-skin="atlas"] .card::after,#preview[data-skin="atlas"] .card::after{ content:"";position:absolute;top:-5px;left:-5px;width:9px;height:9px;pointer-events:none; background: linear-gradient(var(--sk-a),var(--sk-a)) center/1.5px 9px no-repeat, linear-gradient(var(--sk-a),var(--sk-a)) center/9px 1.5px no-repeat} #page-root[data-skin="atlas"] .card h3,#preview[data-skin="atlas"] .card h3, #page-root[data-skin="atlas"] .adv h3,#preview[data-skin="atlas"] .adv h3{color:#16233A} #page-root[data-skin="atlas"] .card .ic,#preview[data-skin="atlas"] .card .ic, #page-root[data-skin="atlas"] .adv .ic,#preview[data-skin="atlas"] .adv .ic{ border:1.5px solid rgba(var(--sk-a2-rgb),.5);border-radius:2px;color:var(--sk-a);background:#FFF} #page-root[data-skin="atlas"] .stat b,#preview[data-skin="atlas"] .stat b, #page-root[data-skin="atlas"] .mcell b,#preview[data-skin="atlas"] .mcell b{ font-family:var(--sk-mono);color:var(--sk-a)} /* —— 数据矩阵：方格图纸格 —— */ #page-root[data-skin="atlas"] .mgrid,#preview[data-skin="atlas"] .mgrid{ background:rgba(var(--sk-a2-rgb),.35);border:1.5px solid rgba(var(--sk-a2-rgb),.8)} #page-root[data-skin="atlas"] .mcell,#preview[data-skin="atlas"] .mcell{background:#FFF} #page-root[data-skin="atlas"] .mcell:hover,#preview[data-skin="atlas"] .mcell:hover{background:#FFF} #page-root[data-skin="atlas"] .mbar,#preview[data-skin="atlas"] .mbar{border-radius:0;background:rgba(var(--sk-a2-rgb),.14)} #page-root[data-skin="atlas"] .mbar u,#preview[data-skin="atlas"] .mbar u{ background:repeating-linear-gradient(135deg,var(--sk-a) 0 6px,rgba(var(--sk-a-rgb),.55) 6px 10px)} /* —— 对照表：工程勘验单 —— */ #page-root[data-skin="atlas"] .cmp,#preview[data-skin="atlas"] .cmp{ border:1.5px solid rgba(var(--sk-a2-rgb),.8);background:#FFF; box-shadow:4px 4px 0 rgba(var(--sk-a2-rgb),.12);padding:6px 18px 12px} #page-root[data-skin="atlas"] .cmp-head,#preview[data-skin="atlas"] .cmp-head{border-bottom:1.5px solid #16233A} #page-root[data-skin="atlas"] .cmp-head b,#preview[data-skin="atlas"] .cmp-head b{color:#5D6C86;opacity:1} #page-root[data-skin="atlas"] .cmp-row,#preview[data-skin="atlas"] .cmp-row{border-bottom-color:rgba(var(--sk-a2-rgb),.14)} #page-root[data-skin="atlas"] .cmp-row .us,#preview[data-skin="atlas"] .cmp-row .us{color:#16233A} #page-root[data-skin="atlas"] .cmp-row .us::before,#preview[data-skin="atlas"] .cmp-row .us::before{content:"✓ ";color:var(--sk-a)} #page-root[data-skin="atlas"] .cmp-row .th::before,#preview[data-skin="atlas"] .cmp-row .th::before{content:"— ";color:#5D6C86} /* —— 规格条款：手册条目 —— */ #page-root[data-skin="atlas"] .spec li,#preview[data-skin="atlas"] .spec li{border-bottom:1px solid rgba(var(--sk-a2-rgb),.16)} #page-root[data-skin="atlas"] .spec-no,#preview[data-skin="atlas"] .spec-no{ font-family:var(--sk-mono);font-size:13px;color:#FFF;background:#16233A; padding:2px 8px;justify-self:start} #page-root[data-skin="atlas"] .spec li:hover .spec-no,#preview[data-skin="atlas"] .spec li:hover .spec-no{background:var(--sk-a)} /* —— 时间轴：装配轨 —— */ #page-root[data-skin="atlas"] .rail,#preview[data-skin="atlas"] .rail{--rn-line:rgba(var(--sk-a2-rgb),.4)} #page-root[data-skin="atlas"] .rn-dot,#preview[data-skin="atlas"] .rn-dot{ border-radius:0;background:var(--sk-bg);border:2px solid var(--sk-a)} #page-root[data-skin="atlas"] .rn-year,#preview[data-skin="atlas"] .rn-year{font-family:var(--sk-mono)} /* —— 展示行：图纸裱框 —— */ #page-root[data-skin="atlas"] .show article,#preview[data-skin="atlas"] .show article{border-bottom-color:rgba(var(--sk-a2-rgb),.16)} #page-root[data-skin="atlas"] .sh-media,#preview[data-skin="atlas"] .sh-media{ border-radius:2px;border:1.5px solid rgba(var(--sk-a2-rgb),.8);box-shadow:6px 6px 0 rgba(var(--sk-a2-rgb),.12);background:#FFF;padding:10px} #page-root[data-skin="atlas"] .sh-no,#preview[data-skin="atlas"] .sh-no{font-family:var(--sk-mono);letter-spacing:.16em;color:var(--sk-a)} #page-root[data-skin="atlas"] .sh-metric,#preview[data-skin="atlas"] .sh-metric{ border-radius:0;border:1.5px solid rgba(var(--sk-a2-rgb),.7);background:#FFF;color:#16233A; box-shadow:2px 2px 0 rgba(var(--sk-a2-rgb),.3)} /* —— 逐行宣言 / 粘性分栏：留白 + 细线 —— */ #page-root[data-skin="atlas"] .stmt-row,#preview[data-skin="atlas"] .stmt-row{border-bottom-color:rgba(var(--sk-a2-rgb),.2)} #page-root[data-skin="atlas"] .stmt-row h3,#preview[data-skin="atlas"] .stmt-row h3{color:#16233A;font-weight:700} #page-root[data-skin="atlas"] .stmt-row:hover h3,#preview[data-skin="atlas"] .stmt-row:hover h3{color:var(--sk-a)} #page-root[data-skin="atlas"] .split-list li,#preview[data-skin="atlas"] .split-list li{border-top-color:rgba(var(--sk-a2-rgb),.18)} #page-root[data-skin="atlas"] .split-list li:last-child,#preview[data-skin="atlas"] .split-list li:last-child{border-bottom-color:rgba(var(--sk-a2-rgb),.18)} #page-root[data-skin="atlas"] .split-list li:hover,#preview[data-skin="atlas"] .split-list li:hover{background:rgba(var(--sk-a-rgb),.06)} #page-root[data-skin="atlas"] .sp-n,#preview[data-skin="atlas"] .sp-n{font-family:var(--sk-mono);color:var(--sk-a)} /* —— 合作流程与横向列表 —— */ #page-root[data-skin="atlas"] .step .num,#preview[data-skin="atlas"] .step .num{ border-radius:2px;background:#16233A;color:#FFF;font-family:var(--sk-mono)} #page-root[data-skin="atlas"] .step-track .st-who,#preview[data-skin="atlas"] .step-track .st-who{ background:rgba(var(--sk-a2-rgb),.06);color:#3A4763} #page-root[data-skin="atlas"] .citem,#preview[data-skin="atlas"] .citem{ background:#FFF;border:1.5px solid rgba(var(--sk-a2-rgb),.6);border-radius:2px; box-shadow:4px 4px 0 rgba(var(--sk-a2-rgb),.1)} #page-root[data-skin="atlas"] .citem .ic,#preview[data-skin="atlas"] .citem .ic{color:var(--sk-a)} /* —— 联系 CTA：订单联 —— */ #page-root[data-skin="atlas"] .cta,#preview[data-skin="atlas"] .cta{ background:#16233A;border-radius:2px;box-shadow:6px 6px 0 rgba(var(--sk-a-rgb),.9)} #page-root[data-skin="atlas"] .cta::before,#preview[data-skin="atlas"] .cta::before{display:none} #page-root[data-skin="atlas"] .cta h2,#preview[data-skin="atlas"] .cta h2{color:#F2F5FA} #page-root[data-skin="atlas"] .cta p,#preview[data-skin="atlas"] .cta p{color:rgba(233,238,246,.7)} /* —— 页脚 —— */ #page-root[data-skin="atlas"] .footer,#preview[data-skin="atlas"] .footer{background:#101B2D;border-top:3px solid var(--sk-a)} /* ============================================================ ② GALLERY · 产品橱窗（点餐小程序页） 设计语言：新品发布会。暖白渐变光晕、玻璃卡片、超大盘点、 奶油圆角、漂浮的菜品橱窗；一切都很轻、很亮、很贵。 ============================================================ */ #page-root[data-skin="gallery"],#preview[data-skin="gallery"]{ --font-display:"Segoe UI","SF Pro Display","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; background: radial-gradient(900px 520px at 12% -4%,rgba(var(--sk-a-rgb),.12),transparent 62%), radial-gradient(820px 520px at 92% 4%,rgba(255,196,0,.16),transparent 60%), radial-gradient(760px 560px at 50% 108%,rgba(var(--sk-a-rgb),.08),transparent 64%), var(--sk-bg); color:#3D3222; } #page-root[data-skin="gallery"] section,#preview[data-skin="gallery"] section{ --sec-h:#33291A;--sec-t:#5C4E36;--sec-muted:#786A4D; --sec-accent:var(--sk-a);--sec-card:rgba(255,255,255,.66); --line:rgba(122,90,20,.14);--rule:rgba(122,90,20,.12);--rule-2:rgba(122,90,20,.22)} #page-root[data-skin="gallery"] .soft-bg,#preview[data-skin="gallery"] .soft-bg{ background:linear-gradient(180deg,rgba(255,196,0,.10),rgba(255,255,255,0) 72%)} #page-root[data-skin="gallery"] .dark-sec,#preview[data-skin="gallery"] .dark-sec{ background:linear-gradient(160deg,#3A2E18,#241C0E);color:#FFF6E3} #page-root[data-skin="gallery"] .dark-sec::before,#preview[data-skin="gallery"] .dark-sec::before{display:none} /* —— 导航：奶油玻璃 —— */ #page-root[data-skin="gallery"] .nav,#preview[data-skin="gallery"] .nav{ background:rgba(255,252,246,.78);border-bottom:1px solid rgba(214,178,94,.28)} #page-root[data-skin="gallery"] .nav-links a,#preview[data-skin="gallery"] .nav-links a{color:#6B5A34} #page-root[data-skin="gallery"] .nav-links a:hover,#preview[data-skin="gallery"] .nav-links a:hover{color:#3D3222;background:rgba(255,196,0,.16)} #page-root[data-skin="gallery"] .nav-links a.active,#preview[data-skin="gallery"] .nav-links a.active{color:#3D3222} #page-root[data-skin="gallery"] .nav .btn,#preview[data-skin="gallery"] .nav .btn{border-radius:999px} /* —— 首屏：舞台聚光 —— */ #page-root[data-skin="gallery"] .hero,#preview[data-skin="gallery"] .hero{background:transparent} #page-root[data-skin="gallery"] .hero::before,#preview[data-skin="gallery"] .hero::before{display:none} #page-root[data-skin="gallery"] .hero .eyebrow,#preview[data-skin="gallery"] .hero .eyebrow{ background:rgba(255,255,255,.7);border-color:rgba(214,178,94,.45);color:#7A5A14; box-shadow:0 2px 10px rgba(163,128,40,.14)} #page-root[data-skin="gallery"] .hero-center h1,#preview[data-skin="gallery"] .hero-center h1{ font-weight:800;letter-spacing:-.045em; background:linear-gradient(120deg,#33291A 30%,var(--sk-a) 78%,#E8A13A); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#33291A} #page-root[data-skin="gallery"] .hero-center h1 .hl,#preview[data-skin="gallery"] .hero-center h1 .hl{ color:transparent} #page-root[data-skin="gallery"] .hero-center h1 .hl::after,#preview[data-skin="gallery"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="gallery"] .hero .sub,#preview[data-skin="gallery"] .hero .sub{color:#6B5A34} #page-root[data-skin="gallery"] .hero-rail,#preview[data-skin="gallery"] .hero-rail{ background:rgba(255,255,255,.6);border:1px solid rgba(214,178,94,.3);border-radius:24px; padding:22px 30px;box-shadow:0 18px 46px rgba(163,128,40,.14);backdrop-filter:blur(10px)} #page-root[data-skin="gallery"] .hero-rail .mr,#preview[data-skin="gallery"] .hero-rail .mr{border-right-color:rgba(122,90,20,.16)} #page-root[data-skin="gallery"] .hero-rail b,#preview[data-skin="gallery"] .hero-rail b{color:var(--sk-a)} /* —— 按钮：胶囊 + 柔光 —— */ #page-root[data-skin="gallery"] .btn,#preview[data-skin="gallery"] .btn{ border-radius:999px;box-shadow:0 10px 26px rgba(var(--sk-a-rgb),.32)} #page-root[data-skin="gallery"] .btn:hover,#preview[data-skin="gallery"] .btn:hover{ box-shadow:0 16px 36px rgba(var(--sk-a-rgb),.4)} #page-root[data-skin="gallery"] .btn.ghost,#preview[data-skin="gallery"] .btn.ghost{ color:#7A5A14;border:1.5px solid rgba(214,178,94,.7);background:rgba(255,255,255,.5)} #page-root[data-skin="gallery"] .btn.ghost:hover,#preview[data-skin="gallery"] .btn.ghost:hover{background:rgba(255,196,0,.14)} /* —— 卡片：玻璃拟态 —— */ #page-root[data-skin="gallery"] .card,#preview[data-skin="gallery"] .card, #page-root[data-skin="gallery"] .adv,#preview[data-skin="gallery"] .adv, #page-root[data-skin="gallery"] .step,#preview[data-skin="gallery"] .step, #page-root[data-skin="gallery"] .citem,#preview[data-skin="gallery"] .citem{ background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);border-radius:26px; box-shadow:0 14px 40px rgba(163,128,40,.13);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} #page-root[data-skin="gallery"] .card:hover,#preview[data-skin="gallery"] .card:hover, #page-root[data-skin="gallery"] .adv:hover,#preview[data-skin="gallery"] .adv:hover, #page-root[data-skin="gallery"] .step:hover,#preview[data-skin="gallery"] .step:hover, #page-root[data-skin="gallery"] .citem:hover,#preview[data-skin="gallery"] .citem:hover{ transform:translateY(-8px);box-shadow:0 26px 56px rgba(163,128,40,.2)} #page-root[data-skin="gallery"] .card::before,#preview[data-skin="gallery"] .card::before, #page-root[data-skin="gallery"] .adv::before,#preview[data-skin="gallery"] .adv::before{display:none} #page-root[data-skin="gallery"] .card .ic,#preview[data-skin="gallery"] .card .ic, #page-root[data-skin="gallery"] .adv .ic,#preview[data-skin="gallery"] .adv .ic{ background:linear-gradient(140deg,rgba(var(--sk-a-rgb),.16),rgba(255,196,0,.2)); border-radius:16px;color:var(--sk-a)} #page-root[data-skin="gallery"] .card h3,#preview[data-skin="gallery"] .card h3, #page-root[data-skin="gallery"] .adv h3,#preview[data-skin="gallery"] .adv h3, #page-root[data-skin="gallery"] .step h3,#preview[data-skin="gallery"] .step h3{color:#33291A} /* —— 菜品橱窗：大圆角 + 漂浮 —— */ #page-root[data-skin="gallery"] .food-card,#preview[data-skin="gallery"] .food-card{ border-radius:26px;background:rgba(255,255,255,.8); box-shadow:0 18px 44px rgba(163,128,40,.18);border:1px solid rgba(255,255,255,.9)} #page-root[data-skin="gallery"] .food-card .pic,#preview[data-skin="gallery"] .food-card .pic{border-radius:22px} #page-root[data-skin="gallery"] .food-card .meta b,#preview[data-skin="gallery"] .food-card .meta b{color:#33291A} #page-root[data-skin="gallery"] .food-card .price,#preview[data-skin="gallery"] .food-card .price{color:var(--sk-a)} #page-root[data-skin="gallery"] .app-block .f .dot,#preview[data-skin="gallery"] .app-block .f .dot{ background:linear-gradient(140deg,rgba(var(--sk-a-rgb),.14),rgba(255,196,0,.18));color:var(--sk-a)} /* —— 数据 / 步骤 / 合作伙伴 —— */ #page-root[data-skin="gallery"] .stat,#preview[data-skin="gallery"] .stat{border-radius:26px} #page-root[data-skin="gallery"] .stat b,#preview[data-skin="gallery"] .stat b, #page-root[data-skin="gallery"] .mcell b,#preview[data-skin="gallery"] .mcell b{color:var(--sk-a)} #page-root[data-skin="gallery"] .step .num,#preview[data-skin="gallery"] .step .num{ border-radius:999px;background:linear-gradient(140deg,var(--sk-a),#FFB25C);color:#FFF; box-shadow:0 8px 20px rgba(var(--sk-a-rgb),.35)} #page-root[data-skin="gallery"] .partners .p,#preview[data-skin="gallery"] .partners .p{ background:rgba(255,255,255,.66);border:1px solid rgba(214,178,94,.35);border-radius:999px; box-shadow:0 8px 22px rgba(163,128,40,.1);color:#6B5A34} #page-root[data-skin="gallery"] .partners .p:hover,#preview[data-skin="gallery"] .partners .p:hover{ color:var(--sk-a);transform:translateY(-3px)} #page-root[data-skin="gallery"] .mgrid,#preview[data-skin="gallery"] .mgrid{background:transparent;gap:18px} #page-root[data-skin="gallery"] .mcell,#preview[data-skin="gallery"] .mcell{ border-radius:24px;border:1px solid rgba(255,255,255,.85); box-shadow:0 12px 32px rgba(163,128,40,.12);background:rgba(255,255,255,.66)} #page-root[data-skin="gallery"] .mbar,#preview[data-skin="gallery"] .mbar{border-radius:99px;background:rgba(122,90,20,.14)} #page-root[data-skin="gallery"] .mbar u,#preview[data-skin="gallery"] .mbar u{border-radius:99px} /* —— 对照表 / 规格 / 展示行 —— */ #page-root[data-skin="gallery"] .cmp,#preview[data-skin="gallery"] .cmp{ background:rgba(255,255,255,.6);border:1px solid rgba(214,178,94,.3);border-radius:26px; padding:8px 24px 14px;box-shadow:0 14px 40px rgba(163,128,40,.12)} #page-root[data-skin="gallery"] .cmp-row .us,#preview[data-skin="gallery"] .cmp-row .us{color:#33291A} #page-root[data-skin="gallery"] .show article,#preview[data-skin="gallery"] .show article{border-bottom-color:rgba(122,90,20,.14)} #page-root[data-skin="gallery"] .sh-media,#preview[data-skin="gallery"] .sh-media{ border-radius:32px;box-shadow:0 30px 70px rgba(163,128,40,.22)} #page-root[data-skin="gallery"] .sh-no,#preview[data-skin="gallery"] .sh-no{color:var(--sk-a);letter-spacing:.26em} #page-root[data-skin="gallery"] .sh-metric,#preview[data-skin="gallery"] .sh-metric{ border-radius:999px;background:rgba(255,196,0,.16);border-color:rgba(214,178,94,.4);color:#7A5A14} #page-root[data-skin="gallery"] .spec-no,#preview[data-skin="gallery"] .spec-no{color:var(--sk-a)} #page-root[data-skin="gallery"] .rn-dot,#preview[data-skin="gallery"] .rn-dot{ background:linear-gradient(140deg,var(--sk-a),#FFB25C);box-shadow:0 0 0 6px rgba(var(--sk-a-rgb),.16)} /* —— 联系 CTA：奶油舞台 —— */ #page-root[data-skin="gallery"] .cta,#preview[data-skin="gallery"] .cta{ background:linear-gradient(140deg,#FFF3D6,#FFE9BC);border-radius:36px; border:1px solid rgba(214,178,94,.4);box-shadow:0 30px 80px rgba(163,128,40,.22)} #page-root[data-skin="gallery"] .cta::before,#preview[data-skin="gallery"] .cta::before{display:none} #page-root[data-skin="gallery"] .cta h2,#preview[data-skin="gallery"] .cta h2{color:#3D3222} #page-root[data-skin="gallery"] .cta p,#preview[data-skin="gallery"] .cta p{color:#7A6845} #page-root[data-skin="gallery"] .footer,#preview[data-skin="gallery"] .footer{background:#2E2412} /* ============================================================ ③ JOURNAL · 杂志编辑（我们的优势页） 设计语言：独立杂志专栏。米白纸面、衬线大标题、罗马数字索引、 细发丝线分栏、红色批注色；像一本被认真排版的刊物。 ============================================================ */ #page-root[data-skin="journal"],#preview[data-skin="journal"]{ --font-display:var(--sk-serif); background:var(--sk-bg); color:#2B241A; } /* 纸面纤维 + 左侧杂志批注线 */ #page-root[data-skin="journal"]::before,#preview[data-skin="journal"]::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:var(--grain);background-size:170px 170px;opacity:.05;mix-blend-mode:multiply} #page-root[data-skin="journal"] .nav,#preview[data-skin="journal"] .nav{ background:rgba(250,246,238,.9);border-bottom:1px solid rgba(43,36,26,.22)} #page-root[data-skin="journal"] section,#preview[data-skin="journal"] section{ --sec-h:#211C15;--sec-t:#4A4132;--sec-muted:#6E6455; --sec-accent:var(--sk-a);--sec-card:#FFFCF5; --line:rgba(43,36,26,.2);--rule:rgba(43,36,26,.16);--rule-2:rgba(43,36,26,.3)} #page-root[data-skin="journal"] .soft-bg,#preview[data-skin="journal"] .soft-bg{background:#F4EFE3} #page-root[data-skin="journal"] .dark-sec,#preview[data-skin="journal"] .dark-sec{ background:#211C15;color:#F5EFE2} #page-root[data-skin="journal"] .dark-sec::before,#preview[data-skin="journal"] .dark-sec::before{display:none} /* —— 导航：黑墨刊头 —— */ #page-root[data-skin="journal"] .nav,#preview[data-skin="journal"] .nav{ background:#211C15;border-bottom:1px solid rgba(245,239,226,.2)} #page-root[data-skin="journal"] .nav .brand,#preview[data-skin="journal"] .nav .brand{color:#F5EFE2} #page-root[data-skin="journal"] .nav .brand b,#preview[data-skin="journal"] .nav .brand b{color:#E8C98A} #page-root[data-skin="journal"] .nav-links a,#preview[data-skin="journal"] .nav-links a{color:rgba(245,239,226,.72)} #page-root[data-skin="journal"] .nav-links a:hover,#preview[data-skin="journal"] .nav-links a:hover{ color:#F5EFE2;background:rgba(245,239,226,.08)} #page-root[data-skin="journal"] .nav-links a.active,#preview[data-skin="journal"] .nav-links a.active{color:#F5EFE2} #page-root[data-skin="journal"] .nav-links a::after,#preview[data-skin="journal"] .nav-links a::after{background:#E8C98A} #page-root[data-skin="journal"] .nav .btn,#preview[data-skin="journal"] .nav .btn{border-radius:0} #page-root[data-skin="journal"] .nav-toggle span,#preview[data-skin="journal"] .nav-toggle span{background:#F5EFE2} /* —— 首屏：刊首语 —— */ #page-root[data-skin="journal"] .hero,#preview[data-skin="journal"] .hero{background:transparent} #page-root[data-skin="journal"] .hero::before,#preview[data-skin="journal"] .hero::before{display:none} #page-root[data-skin="journal"] .hero .eyebrow,#preview[data-skin="journal"] .hero .eyebrow{ background:transparent;border:none;border-radius:0;color:var(--sk-a); border-top:1px solid rgba(43,36,26,.4);border-bottom:1px solid rgba(43,36,26,.4); padding:10px 2px;letter-spacing:.34em;font-family:var(--sk-serif)} #page-root[data-skin="journal"] .hero .eyebrow::before,#preview[data-skin="journal"] .hero .eyebrow::before{display:none} #page-root[data-skin="journal"] .hero-center h1,#preview[data-skin="journal"] .hero-center h1{ font-family:var(--sk-serif);font-weight:400;letter-spacing:-.015em;line-height:1.14} #page-root[data-skin="journal"] .hero-center h1 .hl,#preview[data-skin="journal"] .hero-center h1 .hl{ font-style:italic;color:var(--sk-a)} #page-root[data-skin="journal"] .hero-center h1 .hl::after,#preview[data-skin="journal"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="journal"] .hero .sub,#preview[data-skin="journal"] .hero .sub{ font-family:var(--sk-serif);font-size:calc(var(--fs-base) * 1.14);color:#4A4132} #page-root[data-skin="journal"] .hero .btn,#preview[data-skin="journal"] .hero .btn{border-radius:0} #page-root[data-skin="journal"] .hero-rail b,#preview[data-skin="journal"] .hero-rail b{ font-family:var(--sk-serif);color:var(--sk-a);font-weight:400;font-size:30px} #page-root[data-skin="journal"] .hero-rail .mr,#preview[data-skin="journal"] .hero-rail .mr{border-right-color:rgba(43,36,26,.2)} #page-root[data-skin="journal"] .hero-rail,#preview[data-skin="journal"] .hero-rail{border-top-color:rgba(43,36,26,.3)!important} /* —— 眉标：栏目索引（No.01） —— */ #page-root[data-skin="journal"] main,#preview[data-skin="journal"] main{counter-reset:skno} #page-root[data-skin="journal"] main>section,#preview[data-skin="journal"] main>section{counter-increment:skno} #page-root[data-skin="journal"] section .eyebrow,#preview[data-skin="journal"] section .eyebrow{ background:transparent;border:none;border-radius:0;color:var(--sk-a); letter-spacing:.3em;padding-left:0;font-family:var(--sk-serif)} #page-root[data-skin="journal"] section .eyebrow::before,#preview[data-skin="journal"] section .eyebrow::before{ display:none} #page-root[data-skin="journal"] section .eyebrow::after,#preview[data-skin="journal"] section .eyebrow::after{ content:"— No." counter(skno,decimal-leading-zero)} #page-root[data-skin="journal"] .h2,#preview[data-skin="journal"] .h2{ font-family:var(--sk-serif);font-weight:400;letter-spacing:0;line-height:1.24} #page-root[data-skin="journal"] .lead,#preview[data-skin="journal"] .lead{ font-family:var(--sk-serif);color:#4A4132} /* —— 按钮：墨块 —— */ #page-root[data-skin="journal"] .btn,#preview[data-skin="journal"] .btn{border-radius:0} #page-root[data-skin="journal"] .btn.ghost,#preview[data-skin="journal"] .btn.ghost{ color:#211C15;border:1px solid #211C15} #page-root[data-skin="journal"] .btn.ghost:hover,#preview[data-skin="journal"] .btn.ghost:hover{background:rgba(192,58,43,.07)} /* —— 卡片：纸面专栏 —— */ #page-root[data-skin="journal"] .card,#preview[data-skin="journal"] .card, #page-root[data-skin="journal"] .adv,#preview[data-skin="journal"] .adv, #page-root[data-skin="journal"] .step,#preview[data-skin="journal"] .step, #page-root[data-skin="journal"] .citem,#preview[data-skin="journal"] .citem{ background:#FFFCF5;border:1px solid rgba(43,36,26,.24);border-radius:0; box-shadow:none;position:relative} #page-root[data-skin="journal"] .card:hover,#preview[data-skin="journal"] .card:hover, #page-root[data-skin="journal"] .adv:hover,#preview[data-skin="journal"] .adv:hover, #page-root[data-skin="journal"] .step:hover,#preview[data-skin="journal"] .step:hover, #page-root[data-skin="journal"] .citem:hover,#preview[data-skin="journal"] .citem:hover{ transform:translateY(-4px);box-shadow:0 18px 40px rgba(43,36,26,.14);border-color:var(--sk-a)} #page-root[data-skin="journal"] .card::before,#preview[data-skin="journal"] .card::before, #page-root[data-skin="journal"] .adv::before,#preview[data-skin="journal"] .adv::before{display:none} /* 罗马数字角签 */ #page-root[data-skin="journal"] .card::after,#preview[data-skin="journal"] .card::after{ font-family:var(--sk-serif);font-style:italic;color:var(--sk-a);opacity:.85} #page-root[data-skin="journal"] .card h3,#preview[data-skin="journal"] .card h3, #page-root[data-skin="journal"] .adv h3,#preview[data-skin="journal"] .adv h3{ font-family:var(--sk-serif);font-weight:700;color:#211C15} #page-root[data-skin="journal"] .card .ic,#preview[data-skin="journal"] .card .ic, #page-root[data-skin="journal"] .adv .ic,#preview[data-skin="journal"] .adv .ic, #page-root[data-skin="journal"] .citem .ic,#preview[data-skin="journal"] .citem .ic{ border-radius:0;background:transparent;color:var(--sk-a);border-bottom:2px solid var(--sk-a);padding:2px 6px 6px} /* —— 数据：衬线大数字 + 脚注线 —— */ #page-root[data-skin="journal"] .stat,#preview[data-skin="journal"] .stat, #page-root[data-skin="journal"] .mcell,#preview[data-skin="journal"] .mcell{ background:transparent;border:none;border-top:2px solid #211C15;border-radius:0; box-shadow:none;padding-left:0;padding-right:0} #page-root[data-skin="journal"] .stat:hover,#preview[data-skin="journal"] .stat:hover, #page-root[data-skin="journal"] .mcell:hover,#preview[data-skin="journal"] .mcell:hover{ transform:none;box-shadow:none;border-top-color:var(--sk-a);background:transparent} #page-root[data-skin="journal"] .stat b,#preview[data-skin="journal"] .stat b, #page-root[data-skin="journal"] .mcell b,#preview[data-skin="journal"] .mcell b{ font-family:var(--sk-serif);font-weight:400;color:var(--sk-a);letter-spacing:0} #page-root[data-skin="journal"] .mgrid,#preview[data-skin="journal"] .mgrid{ background:transparent;gap:26px} #page-root[data-skin="journal"] .mbar,#preview[data-skin="journal"] .mbar{border-radius:0;background:rgba(43,36,26,.14)} #page-root[data-skin="journal"] .mbar u,#preview[data-skin="journal"] .mbar u{border-radius:0;background:var(--sk-a)} /* —— 对照表：判例对照 —— */ #page-root[data-skin="journal"] .cmp,#preview[data-skin="journal"] .cmp{ border-top:2px solid #211C15;border-top-color:#211C15} #page-root[data-skin="journal"] .cmp-row .us,#preview[data-skin="journal"] .cmp-row .us{color:#211C15} #page-root[data-skin="journal"] .cmp-row:hover,#preview[data-skin="journal"] .cmp-row:hover{background:rgba(192,58,43,.05)} /* —— 展示行 / 时间轴 / 宣言 —— */ #page-root[data-skin="journal"] .show article,#preview[data-skin="journal"] .show article{border-bottom-color:rgba(43,36,26,.18)} #page-root[data-skin="journal"] .sh-media,#preview[data-skin="journal"] .sh-media{ border-radius:0;box-shadow:14px 14px 0 rgba(43,36,26,.1)} #page-root[data-skin="journal"] .sh-no,#preview[data-skin="journal"] .sh-no{ font-family:var(--sk-serif);font-style:italic;color:var(--sk-a)} #page-root[data-skin="journal"] .sh-metric,#preview[data-skin="journal"] .sh-metric{ border-radius:0;background:transparent;border:1px solid var(--sk-a);color:var(--sk-a)} #page-root[data-skin="journal"] .stmt-row h3,#preview[data-skin="journal"] .stmt-row h3{color:#211C15} #page-root[data-skin="journal"] .stmt-row:hover h3,#preview[data-skin="journal"] .stmt-row:hover h3{color:var(--sk-a);font-style:italic} #page-root[data-skin="journal"] .stmt-row,#preview[data-skin="journal"] .stmt-row{border-bottom-color:rgba(43,36,26,.22)} #page-root[data-skin="journal"] .rn-year,#preview[data-skin="journal"] .rn-year{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="journal"] .spec-no,#preview[data-skin="journal"] .spec-no{color:var(--sk-a)} #page-root[data-skin="journal"] .split-list li:hover,#preview[data-skin="journal"] .split-list li:hover{background:rgba(192,58,43,.05)} /* —— 联系 CTA：订阅卡 —— */ #page-root[data-skin="journal"] .cta,#preview[data-skin="journal"] .cta{ background:#211C15;border-radius:0;box-shadow:none} #page-root[data-skin="journal"] .cta::before,#preview[data-skin="journal"] .cta::before{display:none} #page-root[data-skin="journal"] .cta h2,#preview[data-skin="journal"] .cta h2{ color:#F5EFE2;font-family:var(--sk-serif);font-weight:400} #page-root[data-skin="journal"] .cta p,#preview[data-skin="journal"] .cta p{color:rgba(245,239,226,.68)} #page-root[data-skin="journal"] .footer,#preview[data-skin="journal"] .footer{background:#191510} /* ============================================================ ④ COCKPIT · 数据指挥舱（数据成果页） 设计语言：任务控制中心。深空底、坐标网格、荧光数据、 等宽数字、LED 指标砖、扫描线；每一个数字都像在读数。 ============================================================ */ #page-root[data-skin="cockpit"],#preview[data-skin="cockpit"]{ --font-display:var(--sk-mono); background: radial-gradient(1100px 600px at 78% -10%,rgba(53,224,200,.07),transparent 60%), radial-gradient(900px 520px at 8% 30%,rgba(53,224,200,.05),transparent 58%), linear-gradient(rgba(53,224,200,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(53,224,200,.05) 1px,transparent 1px), var(--sk-bg); background-size:auto,auto,56px 56px,56px 56px; color:#C9D8E8; } #page-root[data-skin="cockpit"] section,#preview[data-skin="cockpit"] section{ --sec-h:#EEF7F5;--sec-t:rgba(201,216,232,.8);--sec-muted:rgba(160,184,205,.62); --sec-accent:var(--sk-a);--sec-card:rgba(255,255,255,.035); --line:rgba(148,196,210,.16);--rule:rgba(148,196,210,.14);--rule-2:rgba(148,196,210,.26); color:var(--sec-t)} #page-root[data-skin="cockpit"] .soft-bg,#preview[data-skin="cockpit"] .soft-bg{ background:linear-gradient(180deg,rgba(53,224,200,.05),transparent 70%)} #page-root[data-skin="cockpit"] .dark-sec,#preview[data-skin="cockpit"] .dark-sec{ background:rgba(255,255,255,.02)} #page-root[data-skin="cockpit"] .dark-sec::before,#preview[data-skin="cockpit"] .dark-sec::before{display:none} #page-root[data-skin="cockpit"] .h2,#preview[data-skin="cockpit"] .h2, #page-root[data-skin="cockpit"] .h2 + .lead,#preview[data-skin="cockpit"] .lead{color:var(--sec-h)} #page-root[data-skin="cockpit"] .lead,#preview[data-skin="cockpit"] .lead{color:var(--sec-t)} /* —— 导航：舱盖仪表 —— */ #page-root[data-skin="cockpit"] .nav,#preview[data-skin="cockpit"] .nav{ background:rgba(10,18,32,.78);border-bottom:1px solid rgba(53,224,200,.24)} #page-root[data-skin="cockpit"] .nav .brand,#preview[data-skin="cockpit"] .nav .brand{color:#EEF7F5} #page-root[data-skin="cockpit"] .nav .brand b,#preview[data-skin="cockpit"] .nav .brand b{color:var(--sk-a)} #page-root[data-skin="cockpit"] .nav-links a,#preview[data-skin="cockpit"] .nav-links a{color:rgba(201,216,232,.72)} #page-root[data-skin="cockpit"] .nav-links a:hover,#preview[data-skin="cockpit"] .nav-links a:hover{ color:var(--sk-a);background:rgba(53,224,200,.08)} #page-root[data-skin="cockpit"] .nav-links a.active,#preview[data-skin="cockpit"] .nav-links a.active{color:var(--sk-a)} #page-root[data-skin="cockpit"] .nav-links a::after,#preview[data-skin="cockpit"] .nav-links a::after{background:var(--sk-a)} #page-root[data-skin="cockpit"] .nav .btn,#preview[data-skin="cockpit"] .nav .btn{ background:var(--sk-a);color:#06251F;border-radius:6px} #page-root[data-skin="cockpit"] .nav-toggle span,#preview[data-skin="cockpit"] .nav-toggle span{background:#C9D8E8} /* —— 首屏：主控读数 —— */ #page-root[data-skin="cockpit"] .hero,#preview[data-skin="cockpit"] .hero{ background:radial-gradient(820px 460px at 50% 22%,rgba(53,224,200,.13),transparent 66%)} #page-root[data-skin="cockpit"] .hero::before,#preview[data-skin="cockpit"] .hero::before{display:none} #page-root[data-skin="cockpit"] .hero .eyebrow,#preview[data-skin="cockpit"] .hero .eyebrow{ font-family:var(--sk-mono);letter-spacing:.24em;color:var(--sk-a); background:rgba(53,224,200,.07);border:1px solid rgba(53,224,200,.32);border-radius:4px} #page-root[data-skin="cockpit"] .hero .eyebrow::before,#preview[data-skin="cockpit"] .hero .eyebrow::before{ border-radius:2px;background:var(--sk-a)} #page-root[data-skin="cockpit"] .hero-center h1,#preview[data-skin="cockpit"] .hero-center h1{ color:#EEF7F5;font-weight:700;letter-spacing:-.02em} #page-root[data-skin="cockpit"] .hero-center h1 .hl,#preview[data-skin="cockpit"] .hero-center h1 .hl{ color:var(--sk-a);text-shadow:0 0 34px rgba(var(--sk-a-rgb),.5)} #page-root[data-skin="cockpit"] .hero-center h1 .hl::after,#preview[data-skin="cockpit"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="cockpit"] .hero .sub,#preview[data-skin="cockpit"] .hero .sub{color:rgba(201,216,232,.75)} #page-root[data-skin="cockpit"] .hero-rail,#preview[data-skin="cockpit"] .hero-rail{ border-top-color:rgba(148,196,210,.24)!important} #page-root[data-skin="cockpit"] .hero-rail .mr,#preview[data-skin="cockpit"] .hero-rail .mr{border-right-color:rgba(148,196,210,.16)} #page-root[data-skin="cockpit"] .hero-rail b,#preview[data-skin="cockpit"] .hero-rail b{ font-family:var(--sk-mono);color:var(--sk-a);text-shadow:0 0 26px rgba(var(--sk-a-rgb),.45)} /* —— 按钮：操作键 —— */ #page-root[data-skin="cockpit"] .btn,#preview[data-skin="cockpit"] .btn{ background:var(--sk-a);color:#06251F;border-radius:6px; box-shadow:0 0 0 1px rgba(53,224,200,.4),0 10px 30px rgba(53,224,200,.18)} #page-root[data-skin="cockpit"] .btn:hover,#preview[data-skin="cockpit"] .btn:hover{ box-shadow:0 0 0 1px rgba(53,224,200,.7),0 14px 40px rgba(53,224,200,.3)} #page-root[data-skin="cockpit"] .btn.ghost,#preview[data-skin="cockpit"] .btn.ghost{ background:transparent;color:var(--sk-a);border:1px solid rgba(53,224,200,.5)} #page-root[data-skin="cockpit"] .btn.ghost:hover,#preview[data-skin="cockpit"] .btn.ghost:hover{background:rgba(53,224,200,.09)} #page-root[data-skin="cockpit"] .btn.dark,#preview[data-skin="cockpit"] .btn.dark{ background:#12202F;color:#EEF7F5} /* —— 指标：LED 读数砖 —— */ #page-root[data-skin="cockpit"] .stat,#preview[data-skin="cockpit"] .stat, #page-root[data-skin="cockpit"] .mcell,#preview[data-skin="cockpit"] .mcell{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(148,196,210,.2);border-radius:10px;position:relative} #page-root[data-skin="cockpit"] .stat b,#preview[data-skin="cockpit"] .stat b, #page-root[data-skin="cockpit"] .mcell b,#preview[data-skin="cockpit"] .mcell b{ font-family:var(--sk-mono);color:var(--sk-a);text-shadow:0 0 30px rgba(var(--sk-a-rgb),.55)} #page-root[data-skin="cockpit"] .stat span,#preview[data-skin="cockpit"] .stat span, #page-root[data-skin="cockpit"] .mcell span,#preview[data-skin="cockpit"] .mcell span{ font-family:var(--sk-sans);color:rgba(201,216,232,.72)} #page-root[data-skin="cockpit"] .stat:hover,#preview[data-skin="cockpit"] .stat:hover, #page-root[data-skin="cockpit"] .mcell:hover,#preview[data-skin="cockpit"] .mcell:hover{ border-color:rgba(53,224,200,.55);background:rgba(53,224,200,.06)} #page-root[data-skin="cockpit"] .mgrid,#preview[data-skin="cockpit"] .mgrid{background:transparent;gap:16px} #page-root[data-skin="cockpit"] .mbar,#preview[data-skin="cockpit"] .mbar{ border-radius:0;background:rgba(148,196,210,.16);height:6px} #page-root[data-skin="cockpit"] .mbar u,#preview[data-skin="cockpit"] .mbar u{ border-radius:0;background:repeating-linear-gradient(90deg,var(--sk-a) 0 8px,rgba(53,224,200,.4) 8px 12px)} /* —— 卡片：控制面板 —— */ #page-root[data-skin="cockpit"] .card,#preview[data-skin="cockpit"] .card, #page-root[data-skin="cockpit"] .adv,#preview[data-skin="cockpit"] .adv, #page-root[data-skin="cockpit"] .step,#preview[data-skin="cockpit"] .step, #page-root[data-skin="cockpit"] .citem,#preview[data-skin="cockpit"] .citem{ background:rgba(255,255,255,.035);border:1px solid rgba(148,196,210,.2);border-radius:10px} #page-root[data-skin="cockpit"] .card:hover,#preview[data-skin="cockpit"] .card:hover, #page-root[data-skin="cockpit"] .adv:hover,#preview[data-skin="cockpit"] .adv:hover, #page-root[data-skin="cockpit"] .step:hover,#preview[data-skin="cockpit"] .step:hover, #page-root[data-skin="cockpit"] .citem:hover,#preview[data-skin="cockpit"] .citem:hover{ border-color:rgba(53,224,200,.5);background:rgba(53,224,200,.05)} #page-root[data-skin="cockpit"] .card::before,#preview[data-skin="cockpit"] .card::before, #page-root[data-skin="cockpit"] .adv::before,#preview[data-skin="cockpit"] .adv::before{display:none} #page-root[data-skin="cockpit"] .card h3,#preview[data-skin="cockpit"] .card h3, #page-root[data-skin="cockpit"] .adv h3,#preview[data-skin="cockpit"] .adv h3{color:#EEF7F5} #page-root[data-skin="cockpit"] .card .ic,#preview[data-skin="cockpit"] .card .ic, #page-root[data-skin="cockpit"] .adv .ic,#preview[data-skin="cockpit"] .adv .ic, #page-root[data-skin="cockpit"] .citem .ic,#preview[data-skin="cockpit"] .citem .ic{ color:var(--sk-a);background:rgba(53,224,200,.09);border-radius:8px} /* —— 对照 / 规格 / 时间轴 / 展示 —— */ #page-root[data-skin="cockpit"] .cmp-row .us,#preview[data-skin="cockpit"] .cmp-row .us{color:#EEF7F5} #page-root[data-skin="cockpit"] .spec-no,#preview[data-skin="cockpit"] .spec-no{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="cockpit"] .rn-year,#preview[data-skin="cockpit"] .rn-year{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="cockpit"] .rn-dot,#preview[data-skin="cockpit"] .rn-dot{ background:var(--sk-a);box-shadow:0 0 0 5px rgba(53,224,200,.18),0 0 18px rgba(53,224,200,.6)} #page-root[data-skin="cockpit"] .sh-media,#preview[data-skin="cockpit"] .sh-media{ border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(148,196,210,.22)} #page-root[data-skin="cockpit"] .sh-no,#preview[data-skin="cockpit"] .sh-no{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="cockpit"] .sh-metric,#preview[data-skin="cockpit"] .sh-metric{ border-radius:6px;background:rgba(53,224,200,.09);border-color:rgba(53,224,200,.4);color:var(--sk-a); font-family:var(--sk-mono)} #page-root[data-skin="cockpit"] .stmt-row,#preview[data-skin="cockpit"] .stmt-row{border-bottom-color:rgba(148,196,210,.16)} #page-root[data-skin="cockpit"] .stmt-row h3,#preview[data-skin="cockpit"] .stmt-row h3{color:#EEF7F5} #page-root[data-skin="cockpit"] .stmt-row:hover h3,#preview[data-skin="cockpit"] .stmt-row:hover h3{color:var(--sk-a)} /* —— 联系 CTA：终端面板 —— */ #page-root[data-skin="cockpit"] .cta,#preview[data-skin="cockpit"] .cta{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(53,224,200,.35);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45)} #page-root[data-skin="cockpit"] .cta::before,#preview[data-skin="cockpit"] .cta::before{display:none} #page-root[data-skin="cockpit"] .cta h2,#preview[data-skin="cockpit"] .cta h2{color:#EEF7F5} #page-root[data-skin="cockpit"] .cta p,#preview[data-skin="cockpit"] .cta p{color:rgba(201,216,232,.72)} #page-root[data-skin="cockpit"] .footer,#preview[data-skin="cockpit"] .footer{background:#070E19} /* 舱内扫描线：整页极淡横纹缓慢下移（尊重减弱动效） */ @media(prefers-reduced-motion:no-preference){ #page-root[data-skin="cockpit"]::after,#preview[data-skin="cockpit"]::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05; background:repeating-linear-gradient(180deg,rgba(201,216,232,.5) 0 1px,transparent 1px 4px); animation:skScan 9s linear infinite} @keyframes skScan{from{background-position:0 0}to{background-position:0 120px}} } /* ============================================================ ⑤ PORTFOLIO · 案例画廊（合作案例页） 设计语言：美术馆。展馆白、炭黑说明牌、铜金细节、 裱框大图 + 悬停变焦、EXHIBIT 字母编号；案例即展品。 ============================================================ */ #page-root[data-skin="portfolio"],#preview[data-skin="portfolio"]{ --font-display:var(--sk-serif); background:var(--sk-bg); color:#2A2620; } #page-root[data-skin="portfolio"] .nav,#preview[data-skin="portfolio"] .nav{ background:rgba(246,245,242,.92);border-bottom:1px solid rgba(42,38,32,.2)} #page-root[data-skin="portfolio"] section,#preview[data-skin="portfolio"] section{ --sec-h:#232019;--sec-t:#514A3E;--sec-muted:#6E675A; --sec-accent:var(--sk-a);--sec-card:#FFFFFF; --line:rgba(42,38,32,.2);--rule:rgba(42,38,32,.16);--rule-2:rgba(42,38,32,.3)} #page-root[data-skin="portfolio"] .soft-bg,#preview[data-skin="portfolio"] .soft-bg{background:#F1EFE9} #page-root[data-skin="portfolio"] .dark-sec,#preview[data-skin="portfolio"] .dark-sec{ background:#232019;color:#F3F0E8} #page-root[data-skin="portfolio"] .dark-sec::before,#preview[data-skin="portfolio"] .dark-sec::before{display:none} /* —— 导航 —— */ #page-root[data-skin="portfolio"] .nav-links a,#preview[data-skin="portfolio"] .nav-links a{color:#514A3E} #page-root[data-skin="portfolio"] .nav-links a:hover,#preview[data-skin="portfolio"] .nav-links a:hover{ color:#232019;background:rgba(168,123,45,.1)} #page-root[data-skin="portfolio"] .nav-links a.active,#preview[data-skin="portfolio"] .nav-links a.active{color:#232019} #page-root[data-skin="portfolio"] .nav-links a::after,#preview[data-skin="portfolio"] .nav-links a::after{background:var(--sk-a)} #page-root[data-skin="portfolio"] .nav .btn,#preview[data-skin="portfolio"] .nav .btn{border-radius:2px} /* —— 首屏：展览海报（描边字） —— */ #page-root[data-skin="portfolio"] .hero,#preview[data-skin="portfolio"] .hero{background:transparent} #page-root[data-skin="portfolio"] .hero::before,#preview[data-skin="portfolio"] .hero::before{display:none} #page-root[data-skin="portfolio"] .hero .eyebrow,#preview[data-skin="portfolio"] .hero .eyebrow{ font-family:var(--sk-sans);letter-spacing:.4em;background:transparent;border:none; border-top:1px solid rgba(42,38,32,.35);border-bottom:1px solid rgba(42,38,32,.35); border-radius:0;color:#232019;padding:10px 4px} #page-root[data-skin="portfolio"] .hero .eyebrow::before,#preview[data-skin="portfolio"] .hero .eyebrow::before{display:none} #page-root[data-skin="portfolio"] .hero-center h1,#preview[data-skin="portfolio"] .hero-center h1{ font-family:var(--sk-serif);font-weight:400;color:#232019} #page-root[data-skin="portfolio"] .hero-center h1 .tl,#preview[data-skin="portfolio"] .hero-center h1 .tl{ color:#232019} #page-root[data-skin="portfolio"] .hero-center h1 .hl,#preview[data-skin="portfolio"] .hero-center h1 .hl{ color:transparent;-webkit-text-stroke:1.5px var(--sk-a);text-stroke:1.5px var(--sk-a)} #page-root[data-skin="portfolio"] .hero-center h1 .hl::after,#preview[data-skin="portfolio"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="portfolio"] .hero .sub,#preview[data-skin="portfolio"] .hero .sub{ font-family:var(--sk-serif);color:#514A3E} #page-root[data-skin="portfolio"] .hero .btn,#preview[data-skin="portfolio"] .hero .btn{border-radius:2px} #page-root[data-skin="portfolio"] .hero-rail b,#preview[data-skin="portfolio"] .hero-rail b{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="portfolio"] .hero-rail .mr,#preview[data-skin="portfolio"] .hero-rail .mr{border-right-color:rgba(42,38,32,.18)} /* —— 眉标：EXHIBIT 编号 —— */ #page-root[data-skin="portfolio"] main,#preview[data-skin="portfolio"] main{counter-reset:skex} #page-root[data-skin="portfolio"] main>section,#preview[data-skin="portfolio"] main>section{counter-increment:skex} #page-root[data-skin="portfolio"] section .eyebrow,#preview[data-skin="portfolio"] section .eyebrow{ background:transparent;border:none;border-radius:0;color:var(--sk-a);letter-spacing:.3em;padding-left:0} #page-root[data-skin="portfolio"] section .eyebrow::before,#preview[data-skin="portfolio"] section .eyebrow::before{display:none} #page-root[data-skin="portfolio"] section .eyebrow::after,#preview[data-skin="portfolio"] section .eyebrow::after{ content:" · EXHIBIT " counter(skex,upper-alpha)} #page-root[data-skin="portfolio"] .h2,#preview[data-skin="portfolio"] .h2{ font-family:var(--sk-serif);font-weight:400;letter-spacing:0} #page-root[data-skin="portfolio"] .lead,#preview[data-skin="portfolio"] .lead{ font-family:var(--sk-serif);color:#514A3E} /* —— 按钮 / 卡片：展签 —— */ #page-root[data-skin="portfolio"] .btn,#preview[data-skin="portfolio"] .btn{border-radius:2px} #page-root[data-skin="portfolio"] .btn.ghost,#preview[data-skin="portfolio"] .btn.ghost{ color:#232019;border:1px solid #232019} #page-root[data-skin="portfolio"] .card,#preview[data-skin="portfolio"] .card, #page-root[data-skin="portfolio"] .stat,#preview[data-skin="portfolio"] .stat, #page-root[data-skin="portfolio"] .mcell,#preview[data-skin="portfolio"] .mcell, #page-root[data-skin="portfolio"] .step,#preview[data-skin="portfolio"] .step{ background:#FFF;border:1px solid rgba(42,38,32,.22);border-radius:2px;box-shadow:0 1px 0 rgba(42,38,32,.08)} #page-root[data-skin="portfolio"] .card:hover,#preview[data-skin="portfolio"] .card:hover, #page-root[data-skin="portfolio"] .stat:hover,#preview[data-skin="portfolio"] .stat:hover, #page-root[data-skin="portfolio"] .mcell:hover,#preview[data-skin="portfolio"] .mcell:hover, #page-root[data-skin="portfolio"] .step:hover,#preview[data-skin="portfolio"] .step:hover{ transform:translateY(-5px);box-shadow:0 24px 48px rgba(42,38,32,.16);border-color:var(--sk-a)} #page-root[data-skin="portfolio"] .card::before,#preview[data-skin="portfolio"] .card::before{display:none} #page-root[data-skin="portfolio"] .card h3,#preview[data-skin="portfolio"] .card h3{ font-family:var(--sk-serif);color:#232019} #page-root[data-skin="portfolio"] .card .ic,#preview[data-skin="portfolio"] .card .ic{color:var(--sk-a);border-radius:2px} #page-root[data-skin="portfolio"] .stat b,#preview[data-skin="portfolio"] .stat b, #page-root[data-skin="portfolio"] .mcell b,#preview[data-skin="portfolio"] .mcell b{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="portfolio"] .mgrid,#preview[data-skin="portfolio"] .mgrid{background:transparent;gap:22px} /* —— 展示行：裱框 + 馆签 —— */ #page-root[data-skin="portfolio"] .show article,#preview[data-skin="portfolio"] .show article{border-bottom-color:rgba(42,38,32,.16)} #page-root[data-skin="portfolio"] .sh-media,#preview[data-skin="portfolio"] .sh-media{ border-radius:2px;background:#FFF;padding:14px; box-shadow:0 2px 0 rgba(42,38,32,.14),0 30px 60px rgba(42,38,32,.18); border:1px solid rgba(42,38,32,.14)} #page-root[data-skin="portfolio"] .sh-media img,#preview[data-skin="portfolio"] .sh-media img{ transition:transform var(--dur-3) var(--ease-out)} #page-root[data-skin="portfolio"] .show article:hover .sh-media img,#preview[data-skin="portfolio"] .show article:hover .sh-media img{ transform:scale(1.045)} #page-root[data-skin="portfolio"] .sh-no,#preview[data-skin="portfolio"] .sh-no{ font-family:var(--sk-sans);letter-spacing:.34em;color:var(--sk-a)} #page-root[data-skin="portfolio"] .sh-text h3,#preview[data-skin="portfolio"] .sh-text h3{ font-family:var(--sk-serif);font-weight:400;color:#232019} #page-root[data-skin="portfolio"] .sh-metric,#preview[data-skin="portfolio"] .sh-metric{ border-radius:2px;background:#232019;color:#F3F0E8;border-color:#232019} #page-root[data-skin="portfolio"] .spec-no,#preview[data-skin="portfolio"] .spec-no{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="portfolio"] .rn-year,#preview[data-skin="portfolio"] .rn-year{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="portfolio"] .stmt-row h3,#preview[data-skin="portfolio"] .stmt-row h3{ font-family:var(--sk-serif);font-weight:400;color:#232019} #page-root[data-skin="portfolio"] .stmt-row:hover h3,#preview[data-skin="portfolio"] .stmt-row:hover h3{color:var(--sk-a)} #page-root[data-skin="portfolio"] .stmt-row,#preview[data-skin="portfolio"] .stmt-row{border-bottom-color:rgba(42,38,32,.18)} #page-root[data-skin="portfolio"] .cmp-row .us,#preview[data-skin="portfolio"] .cmp-row .us{color:#232019} #page-root[data-skin="portfolio"] .partners .p,#preview[data-skin="portfolio"] .partners .p{ border-radius:2px;background:#FFF;border-color:rgba(42,38,32,.24);color:#514A3E} #page-root[data-skin="portfolio"] .partners .p:hover,#preview[data-skin="portfolio"] .partners .p:hover{color:var(--sk-a)} /* —— 联系 CTA：闭幕邀请 —— */ #page-root[data-skin="portfolio"] .cta,#preview[data-skin="portfolio"] .cta{ background:#232019;border-radius:2px} #page-root[data-skin="portfolio"] .cta::before,#preview[data-skin="portfolio"] .cta::before{display:none} #page-root[data-skin="portfolio"] .cta h2,#preview[data-skin="portfolio"] .cta h2{ color:#F3F0E8;font-family:var(--sk-serif);font-weight:400} #page-root[data-skin="portfolio"] .cta p,#preview[data-skin="portfolio"] .cta p{color:rgba(243,240,232,.66)} #page-root[data-skin="portfolio"] .footer,#preview[data-skin="portfolio"] .footer{background:#1C1913} /* ============================================================ ⑥ ROUTE · 合作路线（如何合作页） 设计语言：旅程票务。暖沙底、车票步骤卡（锯齿孔 + 票根号）、 站点路线时间轴、护照章式伙伴墙；把「合作」画成一段旅程。 ============================================================ */ #page-root[data-skin="route"],#preview[data-skin="route"]{ --font-display:"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; background: radial-gradient(circle at 22% 12%,rgba(var(--sk-a-rgb),.08),transparent 42%), radial-gradient(circle at 84% 70%,rgba(20,85,90,.06),transparent 46%), radial-gradient(rgba(20,85,90,.12) 1.2px,transparent 1.2px), var(--sk-bg); background-size:auto,auto,26px 26px; color:#3D3628; } #page-root[data-skin="route"] section,#preview[data-skin="route"] section{ --sec-h:#26332F;--sec-t:#4E5B50;--sec-muted:#64705F; --sec-accent:var(--sk-a);--sec-card:#FFFFFF; --line:rgba(38,51,47,.2);--rule:rgba(38,51,47,.15);--rule-2:rgba(38,51,47,.28)} #page-root[data-skin="route"] .soft-bg,#preview[data-skin="route"] .soft-bg{background:#FBF3E4} #page-root[data-skin="route"] .dark-sec,#preview[data-skin="route"] .dark-sec{ background:#14555A;color:#EAF6F0} #page-root[data-skin="route"] .dark-sec::before,#preview[data-skin="route"] .dark-sec::before{display:none} /* —— 导航 —— */ #page-root[data-skin="route"] .nav,#preview[data-skin="route"] .nav{ background:rgba(255,248,238,.9);border-bottom:1px solid rgba(242,118,46,.3)} #page-root[data-skin="route"] .nav-links a,#preview[data-skin="route"] .nav-links a{color:#4E5B50} #page-root[data-skin="route"] .nav-links a:hover,#preview[data-skin="route"] .nav-links a:hover{ color:var(--sk-a);background:rgba(var(--sk-a-rgb),.09)} #page-root[data-skin="route"] .nav-links a.active,#preview[data-skin="route"] .nav-links a.active{color:var(--sk-a)} #page-root[data-skin="route"] .nav-links a::after,#preview[data-skin="route"] .nav-links a::after{background:var(--sk-a);height:3px} #page-root[data-skin="route"] .nav .btn,#preview[data-skin="route"] .nav .btn{border-radius:999px} /* —— 首屏：出发大厅 —— */ #page-root[data-skin="route"] .hero,#preview[data-skin="route"] .hero{background:transparent} #page-root[data-skin="route"] .hero::before,#preview[data-skin="route"] .hero::before{display:none} #page-root[data-skin="route"] .hero .eyebrow,#preview[data-skin="route"] .hero .eyebrow{ background:#FFF;color:var(--sk-a);border:1.5px dashed rgba(var(--sk-a-rgb),.65);border-radius:10px; box-shadow:0 8px 22px rgba(242,118,46,.14);transform:rotate(-1.6deg)} #page-root[data-skin="route"] .hero .eyebrow::before,#preview[data-skin="route"] .hero .eyebrow::before{ border-radius:50%;background:var(--sk-a)} #page-root[data-skin="route"] .hero-center h1,#preview[data-skin="route"] .hero-center h1{ font-weight:800;color:#26332F} #page-root[data-skin="route"] .hero-center h1 .hl,#preview[data-skin="route"] .hero-center h1 .hl{ color:var(--sk-a);position:relative} #page-root[data-skin="route"] .hero-center h1 .hl::after,#preview[data-skin="route"] .hero-center h1 .hl::after{ height:.32em;bottom:.02em;border-radius:4px; background:linear-gradient(90deg,rgba(var(--sk-a-rgb),.32),rgba(255,196,66,.4))} #page-root[data-skin="route"] .hero .sub,#preview[data-skin="route"] .hero .sub{color:#4E5B50} #page-root[data-skin="route"] .hero .btn,#preview[data-skin="route"] .hero .btn{border-radius:999px} #page-root[data-skin="route"] .hero-rail,#preview[data-skin="route"] .hero-rail{ background:#FFF;border-radius:20px;padding:22px 30px; box-shadow:0 16px 40px rgba(38,51,47,.1);border:1px solid rgba(38,51,47,.08)} #page-root[data-skin="route"] .hero-rail b,#preview[data-skin="route"] .hero-rail b{color:var(--sk-a)} #page-root[data-skin="route"] .hero-rail .mr,#preview[data-skin="route"] .hero-rail .mr{border-right-color:rgba(38,51,47,.12)} /* —— 按钮 —— */ #page-root[data-skin="route"] .btn,#preview[data-skin="route"] .btn{ border-radius:999px;box-shadow:0 12px 28px rgba(242,118,46,.3)} #page-root[data-skin="route"] .btn.ghost,#preview[data-skin="route"] .btn.ghost{ color:#14555A;border:1.5px solid rgba(20,85,90,.5);background:rgba(255,255,255,.6)} #page-root[data-skin="route"] .btn.ghost:hover,#preview[data-skin="route"] .btn.ghost:hover{background:rgba(20,85,90,.08)} /* —— 合作步骤：车票 —— */ #page-root[data-skin="route"] .step,#preview[data-skin="route"] .step{ background:#FFF;border:1.5px solid rgba(38,51,47,.2);border-radius:18px;position:relative;overflow:hidden} #page-root[data-skin="route"] .step::before,#preview[data-skin="route"] .step::before{ content:"";position:absolute;top:0;bottom:0;left:74px;width:0; border-left:2px dashed rgba(var(--sk-a-rgb),.5)} #page-root[data-skin="route"] .step .num,#preview[data-skin="route"] .step .num{ border-radius:0;background:transparent;color:var(--sk-a);font-size:30px;width:64px; font-family:var(--sk-serif);font-weight:400} #page-root[data-skin="route"] .step:hover,#preview[data-skin="route"] .step:hover{ transform:translateY(-6px) rotate(-.4deg);border-color:var(--sk-a); box-shadow:0 26px 52px rgba(242,118,46,.2)} #page-root[data-skin="route"] .step-track .st-who,#preview[data-skin="route"] .step-track .st-who{ background:#FBF3E4;color:#4E5B50;border-radius:10px} #page-root[data-skin="route"] .step h3,#preview[data-skin="route"] .step h3{color:#26332F} /* —— 卡片 / 横排列表：行李牌 —— */ #page-root[data-skin="route"] .card,#preview[data-skin="route"] .card, #page-root[data-skin="route"] .citem,#preview[data-skin="route"] .citem, #page-root[data-skin="route"] .adv,#preview[data-skin="route"] .adv{ background:#FFF;border:1.5px solid rgba(38,51,47,.18);border-radius:18px} #page-root[data-skin="route"] .card:hover,#preview[data-skin="route"] .card:hover, #page-root[data-skin="route"] .citem:hover,#preview[data-skin="route"] .citem:hover, #page-root[data-skin="route"] .adv:hover,#preview[data-skin="route"] .adv:hover{ border-color:var(--sk-a);transform:translateY(-6px)} #page-root[data-skin="route"] .card::before,#preview[data-skin="route"] .card::before, #page-root[data-skin="route"] .adv::before,#preview[data-skin="route"] .adv::before{display:none} #page-root[data-skin="route"] .card .ic,#preview[data-skin="route"] .card .ic, #page-root[data-skin="route"] .adv .ic,#preview[data-skin="route"] .adv .ic, #page-root[data-skin="route"] .citem .ic,#preview[data-skin="route"] .citem .ic{ border-radius:12px;background:rgba(var(--sk-a-rgb),.1);color:var(--sk-a)} /* —— 时间轴：行进路线 —— */ #page-root[data-skin="route"] .rail::before,#preview[data-skin="route"] .rail::before{ content:"";position:absolute;left:calc(50% - 1.5px);top:0;bottom:0;width:3px; background:repeating-linear-gradient(180deg,rgba(var(--sk-a-rgb),.55) 0 14px,transparent 14px 24px)} #page-root[data-skin="route"] .rn,#preview[data-skin="route"] .rn{position:relative} #page-root[data-skin="route"] .rn-dot,#preview[data-skin="route"] .rn-dot{ background:#FFF;border:3px solid var(--sk-a);width:18px;height:18px; box-shadow:0 0 0 5px rgba(var(--sk-a-rgb),.15)} #page-root[data-skin="route"] .rn-year,#preview[data-skin="route"] .rn-year{ color:var(--sk-a);font-weight:800} #page-root[data-skin="route"] .rn-body,#preview[data-skin="route"] .rn-body{ background:#FFF;border:1px solid rgba(38,51,47,.12);border-radius:16px;padding:18px 22px; box-shadow:0 12px 30px rgba(38,51,47,.08)} @media(max-width:980px){ #page-root[data-skin="route"] .rail::before,#preview[data-skin="route"] .rail::before{left:11px} } /* —— 数据 / 对照 / 伙伴 —— */ #page-root[data-skin="route"] .stat,#preview[data-skin="route"] .stat, #page-root[data-skin="route"] .mcell,#preview[data-skin="route"] .mcell{ background:#FFF;border:1.5px solid rgba(38,51,47,.16);border-radius:18px} #page-root[data-skin="route"] .stat b,#preview[data-skin="route"] .stat b, #page-root[data-skin="route"] .mcell b,#preview[data-skin="route"] .mcell b{color:var(--sk-a)} #page-root[data-skin="route"] .mgrid,#preview[data-skin="route"] .mgrid{background:transparent;gap:18px} #page-root[data-skin="route"] .mbar,#preview[data-skin="route"] .mbar{border-radius:99px;background:rgba(38,51,47,.12)} #page-root[data-skin="route"] .mbar u,#preview[data-skin="route"] .mbar u{border-radius:99px;background:linear-gradient(90deg,var(--sk-a),#FFB25C)} #page-root[data-skin="route"] .cmp,#preview[data-skin="route"] .cmp{ background:#FFF;border:1.5px solid rgba(38,51,47,.18);border-radius:18px;padding:8px 24px 14px} #page-root[data-skin="route"] .cmp-row .us,#preview[data-skin="route"] .cmp-row .us{color:#26332F} #page-root[data-skin="route"] .cmp-row .us::before,#preview[data-skin="route"] .cmp-row .us::before{content:"● ";color:var(--sk-a);font-size:10px;vertical-align:2px} #page-root[data-skin="route"] .partners .p,#preview[data-skin="route"] .partners .p{ background:#FFF;border:1.5px solid rgba(20,85,90,.4);border-radius:12px;color:#14555A; box-shadow:3px 3px 0 rgba(20,85,90,.14);transition:transform var(--dur-2) var(--ease-spring)} #page-root[data-skin="route"] .partners .p:hover,#preview[data-skin="route"] .partners .p:hover{ transform:rotate(-1.5deg) translateY(-3px);color:var(--sk-a);border-color:var(--sk-a); box-shadow:4px 5px 0 rgba(var(--sk-a-rgb),.25)} #page-root[data-skin="route"] .spec-no,#preview[data-skin="route"] .spec-no{color:var(--sk-a)} #page-root[data-skin="route"] .sh-metric,#preview[data-skin="route"] .sh-metric{ border-radius:999px;background:rgba(var(--sk-a-rgb),.12);border-color:rgba(var(--sk-a-rgb),.4);color:#B4500F} #page-root[data-skin="route"] .sh-media,#preview[data-skin="route"] .sh-media{border-radius:24px} #page-root[data-skin="route"] .stmt-row,#preview[data-skin="route"] .stmt-row{border-bottom-color:rgba(38,51,47,.18)} #page-root[data-skin="route"] .stmt-row h3,#preview[data-skin="route"] .stmt-row h3{color:#26332F} #page-root[data-skin="route"] .stmt-row:hover h3,#preview[data-skin="route"] .stmt-row:hover h3{color:var(--sk-a)} /* —— 联系 CTA：终点站 —— */ #page-root[data-skin="route"] .cta,#preview[data-skin="route"] .cta{ background:#14555A;border-radius:26px} #page-root[data-skin="route"] .cta::before,#preview[data-skin="route"] .cta::before{display:none} #page-root[data-skin="route"] .cta h2,#preview[data-skin="route"] .cta h2{color:#EAF6F0} #page-root[data-skin="route"] .cta p,#preview[data-skin="route"] .cta p{color:rgba(234,246,240,.7)} #page-root[data-skin="route"] .footer,#preview[data-skin="route"] .footer{background:#0E3B3E} /* ============================================================ ⑦ DISPATCH · 配送调度（校园配送页） 设计语言：调度指挥板。石墨底、虚线航线、信号灯色、 状态点、路网纹理；纪律感和速度感，品牌黄在暗处发亮。 ============================================================ */ #page-root[data-skin="dispatch"],#preview[data-skin="dispatch"]{ --font-display:var(--sk-sans); background: radial-gradient(1000px 560px at 85% -6%,rgba(255,196,0,.06),transparent 58%), radial-gradient(820px 520px at 4% 44%,rgba(46,213,115,.05),transparent 56%), repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 26px), var(--sk-bg); color:#C7CDD6; } #page-root[data-skin="dispatch"] section,#preview[data-skin="dispatch"] section{ --sec-h:#F2F5F9;--sec-t:rgba(199,205,214,.82);--sec-muted:rgba(160,172,188,.8); --sec-accent:var(--sk-a);--sec-card:#1B2129; --line:rgba(255,255,255,.14);--rule:rgba(255,255,255,.12);--rule-2:rgba(255,255,255,.24); color:var(--sec-t)} #page-root[data-skin="dispatch"] .soft-bg,#preview[data-skin="dispatch"] .soft-bg{ background:rgba(255,255,255,.025)} #page-root[data-skin="dispatch"] .dark-sec,#preview[data-skin="dispatch"] .dark-sec{ background:#0D1117} #page-root[data-skin="dispatch"] .dark-sec::before,#preview[data-skin="dispatch"] .dark-sec::before{display:none} #page-root[data-skin="dispatch"] .lead,#preview[data-skin="dispatch"] .lead{color:var(--sec-t)} /* —— 导航：石墨舱 —— */ #page-root[data-skin="dispatch"] .nav,#preview[data-skin="dispatch"] .nav{ background:rgba(13,17,23,.82);border-bottom:1px solid rgba(255,196,0,.28)} #page-root[data-skin="dispatch"] .nav .brand,#preview[data-skin="dispatch"] .nav .brand{color:#F2F5F9} #page-root[data-skin="dispatch"] .nav .brand b,#preview[data-skin="dispatch"] .nav .brand b{color:var(--sk-a)} #page-root[data-skin="dispatch"] .nav-links a,#preview[data-skin="dispatch"] .nav-links a{color:rgba(199,205,214,.75)} #page-root[data-skin="dispatch"] .nav-links a:hover,#preview[data-skin="dispatch"] .nav-links a:hover{ color:var(--sk-a);background:rgba(255,196,0,.08)} #page-root[data-skin="dispatch"] .nav-links a.active,#preview[data-skin="dispatch"] .nav-links a.active{color:var(--sk-a)} #page-root[data-skin="dispatch"] .nav-links a::after,#preview[data-skin="dispatch"] .nav-links a::after{background:var(--sk-a)} #page-root[data-skin="dispatch"] .nav .btn,#preview[data-skin="dispatch"] .nav .btn{border-radius:8px} #page-root[data-skin="dispatch"] .nav-toggle span,#preview[data-skin="dispatch"] .nav-toggle span{background:#C7CDD6} /* —— 首屏：调度雷达 —— */ #page-root[data-skin="dispatch"] .hero,#preview[data-skin="dispatch"] .hero{ background:radial-gradient(760px 420px at 50% 24%,rgba(255,196,0,.12),transparent 64%)} #page-root[data-skin="dispatch"] .hero::before,#preview[data-skin="dispatch"] .hero::before{display:none} #page-root[data-skin="dispatch"] .hero .eyebrow,#preview[data-skin="dispatch"] .hero .eyebrow{ font-family:var(--sk-mono);letter-spacing:.26em;color:var(--sk-a); background:rgba(255,196,0,.07);border:1px solid rgba(255,196,0,.36);border-radius:6px} #page-root[data-skin="dispatch"] .hero .eyebrow::before,#preview[data-skin="dispatch"] .hero .eyebrow::before{ border-radius:50%;background:#2ED573;box-shadow:0 0 12px rgba(46,213,115,.9)} #page-root[data-skin="dispatch"] .hero-center h1,#preview[data-skin="dispatch"] .hero-center h1{ color:#F2F5F9;font-weight:800} #page-root[data-skin="dispatch"] .hero-center h1 .hl,#preview[data-skin="dispatch"] .hero-center h1 .hl{ color:var(--sk-a)} #page-root[data-skin="dispatch"] .hero-center h1 .hl::after,#preview[data-skin="dispatch"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="dispatch"] .hero .sub,#preview[data-skin="dispatch"] .hero .sub{color:rgba(199,205,214,.76)} #page-root[data-skin="dispatch"] .hero .btn,#preview[data-skin="dispatch"] .hero .btn{border-radius:8px} #page-root[data-skin="dispatch"] .hero-rail,#preview[data-skin="dispatch"] .hero-rail{border-top-color:rgba(255,255,255,.18)!important} #page-root[data-skin="dispatch"] .hero-rail .mr,#preview[data-skin="dispatch"] .hero-rail .mr{border-right-color:rgba(255,255,255,.12)} #page-root[data-skin="dispatch"] .hero-rail b,#preview[data-skin="dispatch"] .hero-rail b{ color:var(--sk-a);font-family:var(--sk-mono)} /* —— 按钮 —— */ #page-root[data-skin="dispatch"] .btn,#preview[data-skin="dispatch"] .btn{ border-radius:8px;background:var(--sk-a);color:#221A02; box-shadow:0 0 0 1px rgba(255,196,0,.35),0 10px 28px rgba(255,196,0,.15)} #page-root[data-skin="dispatch"] .btn:hover,#preview[data-skin="dispatch"] .btn:hover{ box-shadow:0 0 0 1px rgba(255,196,0,.65),0 14px 38px rgba(255,196,0,.26)} #page-root[data-skin="dispatch"] .btn.ghost,#preview[data-skin="dispatch"] .btn.ghost{ background:transparent;color:var(--sk-a);border:1px solid rgba(255,196,0,.5)} #page-root[data-skin="dispatch"] .btn.ghost:hover,#preview[data-skin="dispatch"] .btn.ghost:hover{background:rgba(255,196,0,.09)} #page-root[data-skin="dispatch"] .btn.dark,#preview[data-skin="dispatch"] .btn.dark{background:#1B2129;color:#F2F5F9} /* —— 卡片：任务面板 + 状态灯 —— */ #page-root[data-skin="dispatch"] .card,#preview[data-skin="dispatch"] .card, #page-root[data-skin="dispatch"] .adv,#preview[data-skin="dispatch"] .adv, #page-root[data-skin="dispatch"] .step,#preview[data-skin="dispatch"] .step, #page-root[data-skin="dispatch"] .citem,#preview[data-skin="dispatch"] .citem{ background:#1B2129;border:1px solid rgba(255,255,255,.14);border-radius:12px;position:relative} #page-root[data-skin="dispatch"] .card::before,#preview[data-skin="dispatch"] .card::before, #page-root[data-skin="dispatch"] .adv::before,#preview[data-skin="dispatch"] .adv::before{display:none} #page-root[data-skin="dispatch"] .card::after,#preview[data-skin="dispatch"] .card::after{ content:"";position:absolute;top:18px;right:18px;width:8px;height:8px;border-radius:50%; background:#2ED573;box-shadow:0 0 10px rgba(46,213,115,.8)} #page-root[data-skin="dispatch"] .card:hover,#preview[data-skin="dispatch"] .card:hover, #page-root[data-skin="dispatch"] .adv:hover,#preview[data-skin="dispatch"] .adv:hover, #page-root[data-skin="dispatch"] .step:hover,#preview[data-skin="dispatch"] .step:hover, #page-root[data-skin="dispatch"] .citem:hover,#preview[data-skin="dispatch"] .citem:hover{ border-color:rgba(255,196,0,.55);transform:translateY(-5px); box-shadow:0 24px 50px rgba(0,0,0,.45)} #page-root[data-skin="dispatch"] .card h3,#preview[data-skin="dispatch"] .card h3, #page-root[data-skin="dispatch"] .adv h3,#preview[data-skin="dispatch"] .adv h3, #page-root[data-skin="dispatch"] .step h3,#preview[data-skin="dispatch"] .step h3{color:#F2F5F9} #page-root[data-skin="dispatch"] .card .ic,#preview[data-skin="dispatch"] .card .ic, #page-root[data-skin="dispatch"] .adv .ic,#preview[data-skin="dispatch"] .adv .ic, #page-root[data-skin="dispatch"] .citem .ic,#preview[data-skin="dispatch"] .citem .ic{ background:rgba(255,196,0,.1);border-radius:9px;color:var(--sk-a)} #page-root[data-skin="dispatch"] .step .num,#preview[data-skin="dispatch"] .step .num{ border-radius:8px;background:rgba(255,196,0,.14);color:var(--sk-a);font-family:var(--sk-mono)} /* —— 规格：运单清单（状态点 + 虚线分隔） —— */ #page-root[data-skin="dispatch"] .spec li,#preview[data-skin="dispatch"] .spec li{ border-bottom:1px dashed rgba(255,255,255,.2)} #page-root[data-skin="dispatch"] .spec-no,#preview[data-skin="dispatch"] .spec-no{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="dispatch"] .spec h3,#preview[data-skin="dispatch"] .spec h3{color:#F2F5F9} /* —— 指标：里程表 —— */ #page-root[data-skin="dispatch"] .stat,#preview[data-skin="dispatch"] .stat, #page-root[data-skin="dispatch"] .mcell,#preview[data-skin="dispatch"] .mcell{ background:#1B2129;border:1px solid rgba(255,255,255,.14);border-radius:12px} #page-root[data-skin="dispatch"] .stat b,#preview[data-skin="dispatch"] .stat b, #page-root[data-skin="dispatch"] .mcell b,#preview[data-skin="dispatch"] .mcell b{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="dispatch"] .mgrid,#preview[data-skin="dispatch"] .mgrid{background:transparent;gap:16px} #page-root[data-skin="dispatch"] .mbar,#preview[data-skin="dispatch"] .mbar{ height:6px;border-radius:0;background:rgba(255,255,255,.12)} #page-root[data-skin="dispatch"] .mbar u,#preview[data-skin="dispatch"] .mbar u{ border-radius:0;background:repeating-linear-gradient(90deg,var(--sk-a) 0 10px,rgba(255,196,0,.45) 10px 14px)} /* —— 对照 / 展示 / 宣言 / 合作伙伴 —— */ #page-root[data-skin="dispatch"] .cmp,#preview[data-skin="dispatch"] .cmp{ background:#1B2129;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 24px 14px} #page-root[data-skin="dispatch"] .cmp-row .us,#preview[data-skin="dispatch"] .cmp-row .us{color:#F2F5F9} #page-root[data-skin="dispatch"] .cmp-row .us::before,#preview[data-skin="dispatch"] .cmp-row .us::before{content:"▸ ";color:#2ED573} #page-root[data-skin="dispatch"] .cmp-head .us,#preview[data-skin="dispatch"] .cmp-head .us{color:#2ED573} #page-root[data-skin="dispatch"] .sh-media,#preview[data-skin="dispatch"] .sh-media{ border-radius:12px;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.5)} #page-root[data-skin="dispatch"] .sh-no,#preview[data-skin="dispatch"] .sh-no{ font-family:var(--sk-mono);color:var(--sk-a);letter-spacing:.2em} #page-root[data-skin="dispatch"] .sh-metric,#preview[data-skin="dispatch"] .sh-metric{ border-radius:8px;background:rgba(46,213,115,.1);border-color:rgba(46,213,115,.4);color:#2ED573; font-family:var(--sk-mono)} #page-root[data-skin="dispatch"] .stmt-row,#preview[data-skin="dispatch"] .stmt-row{border-bottom-color:rgba(255,255,255,.14)} #page-root[data-skin="dispatch"] .stmt-row h3,#preview[data-skin="dispatch"] .stmt-row h3{color:#F2F5F9} #page-root[data-skin="dispatch"] .stmt-row:hover h3,#preview[data-skin="dispatch"] .stmt-row:hover h3{color:var(--sk-a)} #page-root[data-skin="dispatch"] .rn-dot,#preview[data-skin="dispatch"] .rn-dot{ background:var(--sk-a);box-shadow:0 0 0 5px rgba(255,196,0,.16)} #page-root[data-skin="dispatch"] .rn-year,#preview[data-skin="dispatch"] .rn-year{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="dispatch"] .partners .p,#preview[data-skin="dispatch"] .partners .p{ background:#1B2129;border-color:rgba(255,255,255,.18);color:rgba(199,205,214,.85);border-radius:8px} #page-root[data-skin="dispatch"] .partners .p:hover,#preview[data-skin="dispatch"] .partners .p:hover{color:var(--sk-a)} /* —— 联系 CTA —— */ #page-root[data-skin="dispatch"] .cta,#preview[data-skin="dispatch"] .cta{ background:#1B2129;border:1px solid rgba(255,196,0,.4);border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5)} #page-root[data-skin="dispatch"] .cta::before,#preview[data-skin="dispatch"] .cta::before{display:none} #page-root[data-skin="dispatch"] .cta h2,#preview[data-skin="dispatch"] .cta h2{color:#F2F5F9} #page-root[data-skin="dispatch"] .cta p,#preview[data-skin="dispatch"] .cta p{color:rgba(199,205,214,.72)} #page-root[data-skin="dispatch"] .footer,#preview[data-skin="dispatch"] .footer{background:#0D1117;border-top:2px solid rgba(255,196,0,.4)} /* ============================================================ ⑧ CONCIERGE · 礼宾前台（联系我们页） 设计语言：酒店礼宾。象牙白、拱窗卡片、香槟金细节、 衬线优雅字、服务铃弧顶；每扇「窗口」都像一张名片。 ============================================================ */ #page-root[data-skin="concierge"],#preview[data-skin="concierge"]{ --font-display:var(--sk-serif); background: radial-gradient(1100px 500px at 50% -12%,rgba(185,138,47,.1),transparent 60%), var(--sk-bg); color:#372C1E; } #page-root[data-skin="concierge"] .nav,#preview[data-skin="concierge"] .nav{ background:rgba(255,251,244,.92);border-bottom:1px solid rgba(185,138,47,.3)} #page-root[data-skin="concierge"] section,#preview[data-skin="concierge"] section{ --sec-h:#2E2417;--sec-t:#5A4C38;--sec-muted:#79694F; --sec-accent:var(--sk-a);--sec-card:#FFFFFF; --line:rgba(46,36,23,.2);--rule:rgba(46,36,23,.16);--rule-2:rgba(46,36,23,.3)} #page-root[data-skin="concierge"] .soft-bg,#preview[data-skin="concierge"] .soft-bg{background:#F7F0E2} #page-root[data-skin="concierge"] .dark-sec,#preview[data-skin="concierge"] .dark-sec{ background:#2E2417;color:#F7F1E4} #page-root[data-skin="concierge"] .dark-sec::before,#preview[data-skin="concierge"] .dark-sec::before{display:none} /* —— 导航 —— */ #page-root[data-skin="concierge"] .nav-links a,#preview[data-skin="concierge"] .nav-links a{color:#5A4C38} #page-root[data-skin="concierge"] .nav-links a:hover,#preview[data-skin="concierge"] .nav-links a:hover{ color:var(--sk-a);background:rgba(185,138,47,.09)} #page-root[data-skin="concierge"] .nav-links a.active,#preview[data-skin="concierge"] .nav-links a.active{color:var(--sk-a)} #page-root[data-skin="concierge"] .nav-links a::after,#preview[data-skin="concierge"] .nav-links a::after{background:var(--sk-a)} #page-root[data-skin="concierge"] .nav .brand b,#preview[data-skin="concierge"] .nav .brand b{color:var(--sk-a)} #page-root[data-skin="concierge"] .nav .btn,#preview[data-skin="concierge"] .nav .btn{border-radius:999px} /* —— 首屏：迎宾 —— */ #page-root[data-skin="concierge"] .hero,#preview[data-skin="concierge"] .hero{background:transparent} #page-root[data-skin="concierge"] .hero::before,#preview[data-skin="concierge"] .hero::before{display:none} #page-root[data-skin="concierge"] .hero .eyebrow,#preview[data-skin="concierge"] .hero .eyebrow{ background:transparent;border:1px solid rgba(185,138,47,.55);color:var(--sk-a); letter-spacing:.3em;font-family:var(--sk-serif)} #page-root[data-skin="concierge"] .hero .eyebrow::before,#preview[data-skin="concierge"] .hero .eyebrow::before{ display:none} #page-root[data-skin="concierge"] .hero-center h1,#preview[data-skin="concierge"] .hero-center h1{ font-family:var(--sk-serif);font-weight:400;color:#2E2417} #page-root[data-skin="concierge"] .hero-center h1 .hl,#preview[data-skin="concierge"] .hero-center h1 .hl{ font-style:italic;color:var(--sk-a)} #page-root[data-skin="concierge"] .hero-center h1 .hl::after,#preview[data-skin="concierge"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="concierge"] .hero .sub,#preview[data-skin="concierge"] .hero .sub{ font-family:var(--sk-serif);color:#5A4C38} #page-root[data-skin="concierge"] .hero .btn,#preview[data-skin="concierge"] .hero .btn{border-radius:999px} #page-root[data-skin="concierge"] .hero-rail b,#preview[data-skin="concierge"] .hero-rail b{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="concierge"] .hero-rail .mr,#preview[data-skin="concierge"] .hero-rail .mr{border-right-color:rgba(46,36,23,.16)} /* —— 服务窗口卡：拱形名片 —— */ #page-root[data-skin="concierge"] .citem,#preview[data-skin="concierge"] .citem, #page-root[data-skin="concierge"] .card,#preview[data-skin="concierge"] .card{ background:#FFF;border:1px solid rgba(185,138,47,.35);border-radius:190px 190px 20px 20px; text-align:center;padding-top:44px; box-shadow:0 20px 50px rgba(46,36,23,.1)} #page-root[data-skin="concierge"] .citem .ic,#preview[data-skin="concierge"] .citem .ic, #page-root[data-skin="concierge"] .card .ic,#preview[data-skin="concierge"] .card .ic{ margin-left:auto;margin-right:auto;border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(185,138,47,.2),rgba(185,138,47,.06)); color:var(--sk-a);width:58px;height:58px;font-size:26px} #page-root[data-skin="concierge"] .citem h3,#preview[data-skin="concierge"] .citem h3, #page-root[data-skin="concierge"] .card h3,#preview[data-skin="concierge"] .card h3{ font-family:var(--sk-serif);color:#2E2417} #page-root[data-skin="concierge"] .citem:hover,#preview[data-skin="concierge"] .citem:hover, #page-root[data-skin="concierge"] .card:hover,#preview[data-skin="concierge"] .card:hover{ transform:translateY(-7px);border-color:var(--sk-a); box-shadow:0 30px 64px rgba(46,36,23,.16)} #page-root[data-skin="concierge"] .card::before,#preview[data-skin="concierge"] .card::before{display:none} /* 非拱形卡片（adv/stat/step）走优雅方卡 */ #page-root[data-skin="concierge"] .adv,#preview[data-skin="concierge"] .adv, #page-root[data-skin="concierge"] .stat,#preview[data-skin="concierge"] .stat, #page-root[data-skin="concierge"] .step,#preview[data-skin="concierge"] .step{ background:#FFF;border:1px solid rgba(46,36,23,.18);border-radius:18px} #page-root[data-skin="concierge"] .adv::before,#preview[data-skin="concierge"] .adv::before{display:none} #page-root[data-skin="concierge"] .adv:hover,#preview[data-skin="concierge"] .adv:hover, #page-root[data-skin="concierge"] .stat:hover,#preview[data-skin="concierge"] .stat:hover, #page-root[data-skin="concierge"] .step:hover,#preview[data-skin="concierge"] .step:hover{ border-color:var(--sk-a)} #page-root[data-skin="concierge"] .adv h3,#preview[data-skin="concierge"] .adv h3, #page-root[data-skin="concierge"] .step h3,#preview[data-skin="concierge"] .step h3{ font-family:var(--sk-serif);color:#2E2417} #page-root[data-skin="concierge"] .adv .ic,#preview[data-skin="concierge"] .adv .ic, #page-root[data-skin="concierge"] .step .num,#preview[data-skin="concierge"] .step .num{ border-radius:50%;background:rgba(185,138,47,.1);color:var(--sk-a)} #page-root[data-skin="concierge"] .step .num,#preview[data-skin="concierge"] .step .num{ font-family:var(--sk-serif)} /* —— 数据 / 规格 / 时间轴 / 宣言 —— */ #page-root[data-skin="concierge"] .stat b,#preview[data-skin="concierge"] .stat b, #page-root[data-skin="concierge"] .mcell b,#preview[data-skin="concierge"] .mcell b{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="concierge"] .mgrid,#preview[data-skin="concierge"] .mgrid{background:transparent;gap:20px} #page-root[data-skin="concierge"] .mcell,#preview[data-skin="concierge"] .mcell{ background:#FFF;border:1px solid rgba(46,36,23,.16);border-radius:18px} #page-root[data-skin="concierge"] .mbar,#preview[data-skin="concierge"] .mbar{border-radius:99px;background:rgba(46,36,23,.12)} #page-root[data-skin="concierge"] .mbar u,#preview[data-skin="concierge"] .mbar u{border-radius:99px;background:linear-gradient(90deg,var(--sk-a),#D9B36A)} #page-root[data-skin="concierge"] .spec-no,#preview[data-skin="concierge"] .spec-no{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="concierge"] .rn-year,#preview[data-skin="concierge"] .rn-year{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="concierge"] .rn-dot,#preview[data-skin="concierge"] .rn-dot{ background:var(--sk-a);box-shadow:0 0 0 5px rgba(185,138,47,.16)} #page-root[data-skin="concierge"] .rn-body,#preview[data-skin="concierge"] .rn-body{ background:#FFF;border:1px solid rgba(46,36,23,.14);border-radius:16px;padding:18px 22px} #page-root[data-skin="concierge"] .stmt-row h3,#preview[data-skin="concierge"] .stmt-row h3{ font-family:var(--sk-serif);font-weight:400;color:#2E2417} #page-root[data-skin="concierge"] .stmt-row:hover h3,#preview[data-skin="concierge"] .stmt-row:hover h3{ color:var(--sk-a);font-style:italic} #page-root[data-skin="concierge"] .stmt-row,#preview[data-skin="concierge"] .stmt-row{border-bottom-color:rgba(46,36,23,.18)} #page-root[data-skin="concierge"] .cmp,#preview[data-skin="concierge"] .cmp{ background:#FFF;border:1px solid rgba(46,36,23,.16);border-radius:18px;padding:8px 24px 14px} #page-root[data-skin="concierge"] .cmp-row .us,#preview[data-skin="concierge"] .cmp-row .us{color:#2E2417} #page-root[data-skin="concierge"] .split-list li:hover,#preview[data-skin="concierge"] .split-list li:hover{ background:rgba(185,138,47,.06)} #page-root[data-skin="concierge"] .sh-media,#preview[data-skin="concierge"] .sh-media{border-radius:20px} #page-root[data-skin="concierge"] .sh-metric,#preview[data-skin="concierge"] .sh-metric{ border-radius:999px;background:rgba(185,138,47,.1);border-color:rgba(185,138,47,.4);color:var(--sk-a)} #page-root[data-skin="concierge"] .partners .p,#preview[data-skin="concierge"] .partners .p{ border-radius:999px;background:#FFF;border-color:rgba(185,138,47,.4);color:#5A4C38} #page-root[data-skin="concierge"] .partners .p:hover,#preview[data-skin="concierge"] .partners .p:hover{color:var(--sk-a)} /* —— 联系 CTA：礼宾总台 —— */ #page-root[data-skin="concierge"] .cta,#preview[data-skin="concierge"] .cta{ background:linear-gradient(150deg,#2E2417,#4A3A22);border-radius:34px} #page-root[data-skin="concierge"] .cta::before,#preview[data-skin="concierge"] .cta::before{display:none} #page-root[data-skin="concierge"] .cta h2,#preview[data-skin="concierge"] .cta h2{ color:#F7F1E4;font-family:var(--sk-serif);font-weight:400} #page-root[data-skin="concierge"] .cta p,#preview[data-skin="concierge"] .cta p{color:rgba(247,241,228,.66)} #page-root[data-skin="concierge"] .cta .qr,#preview[data-skin="concierge"] .cta .qr{ border-color:rgba(185,138,47,.6)} #page-root[data-skin="concierge"] .footer,#preview[data-skin="concierge"] .footer{background:#241C11} /* ============================================================ 皮肤动效增强：每套皮肤 1–2 个标志性微动效，全部尊重 prefers-reduced-motion（连续动画一律包在 no-preference 内）， 打印场景由下方 @media print 统一关闭。 ============================================================ */ /* —— 深色导航皮肤的移动端下拉：面板必须跟导航同色，否则白底浅字不可读 —— */ @media(max-width:1100px){ #page-root[data-skin="journal"] .nav-links,#preview[data-skin="journal"] .nav-links{ background:#211C15;border-bottom-color:rgba(245,239,226,.2);box-shadow:0 24px 60px rgba(0,0,0,.5)} #page-root[data-skin="cockpit"] .nav-links,#preview[data-skin="cockpit"] .nav-links{ background:#0A1220;border-bottom-color:rgba(53,224,200,.24);box-shadow:0 24px 60px rgba(0,0,0,.55)} #page-root[data-skin="dispatch"] .nav-links,#preview[data-skin="dispatch"] .nav-links{ background:#0D1117;border-bottom-color:rgba(255,196,0,.28);box-shadow:0 24px 60px rgba(0,0,0,.55)} } /* —— atlas：图框悬停时角标十字放大、图标章盖感；高亮词虚线走蚁 —— */ #page-root[data-skin="atlas"] .card:hover::after,#preview[data-skin="atlas"] .card:hover::after{ transform:scale(1.35)} #page-root[data-skin="atlas"] .card::after,#preview[data-skin="atlas"] .card::after{ transition:transform var(--dur-2) var(--ease-out)} #page-root[data-skin="atlas"] .card:hover .ic,#preview[data-skin="atlas"] .card:hover .ic{ transform:rotate(-6deg) scale(1.07)} #page-root[data-skin="atlas"] .card .ic,#preview[data-skin="atlas"] .card .ic{ transition:transform var(--dur-2) var(--ease-spring)} @media(prefers-reduced-motion:no-preference){ #page-root[data-skin="atlas"] .hero-center h1 .hl:hover::after, #preview[data-skin="atlas"] .hero-center h1 .hl:hover::after{ animation:skAnts 1.2s linear infinite} @keyframes skAnts{to{background-position:32px 0}} } /* —— gallery：菜品卡缓慢漂浮（错峰），玻璃卡悬浮加深 —— */ @media(prefers-reduced-motion:no-preference){ #page-root[data-skin="gallery"] .food-card,#preview[data-skin="gallery"] .food-card{ animation:skFloat 7s ease-in-out infinite} #page-root[data-skin="gallery"] .food-card:nth-child(2n),#preview[data-skin="gallery"] .food-card:nth-child(2n){ animation-delay:-2.3s} #page-root[data-skin="gallery"] .food-card:nth-child(3n),#preview[data-skin="gallery"] .food-card:nth-child(3n){ animation-delay:-4.6s} @keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} } #page-root[data-skin="gallery"] .food-card,#preview[data-skin="gallery"] .food-card{ will-change:transform} /* —— journal：图片悬停极轻微的纸面倾斜 —— */ #page-root[data-skin="journal"] .sh-media,#preview[data-skin="journal"] .sh-media{ transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)} #page-root[data-skin="journal"] .show article:hover .sh-media,#preview[data-skin="journal"] .show article:hover .sh-media{ transform:rotate(-.6deg) translateY(-4px)} /* —— portfolio：悬停时描边字「上色」，展框轻浮起 —— */ #page-root[data-skin="portfolio"] .hero-center h1 .hl,#preview[data-skin="portfolio"] .hero-center h1 .hl{ transition:color var(--dur-3) var(--ease-out),-webkit-text-fill-color var(--dur-3) var(--ease-out)} #page-root[data-skin="portfolio"] .hero-center h1 .hl:hover,#preview[data-skin="portfolio"] .hero-center h1 .hl:hover{ color:var(--sk-a);-webkit-text-fill-color:var(--sk-a)} #page-root[data-skin="portfolio"] .sh-media,#preview[data-skin="portfolio"] .sh-media{ transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)} #page-root[data-skin="portfolio"] .show article:hover .sh-media,#preview[data-skin="portfolio"] .show article:hover .sh-media{ transform:translateY(-6px);box-shadow:0 40px 80px rgba(42,38,32,.24)} /* —— cockpit：指标数字呼吸辉光 + 进度条流光 —— */ @media(prefers-reduced-motion:no-preference){ #page-root[data-skin="cockpit"] .stat b,#preview[data-skin="cockpit"] .stat b, #page-root[data-skin="cockpit"] .mcell b,#preview[data-skin="cockpit"] .mcell b{ animation:skBreath 4.5s ease-in-out infinite} @keyframes skBreath{ 0%,100%{text-shadow:0 0 18px rgba(var(--sk-a-rgb),.35)} 50%{text-shadow:0 0 34px rgba(var(--sk-a-rgb),.65)}} #page-root[data-skin="cockpit"] .mbar u,#preview[data-skin="cockpit"] .mbar u{ background-size:24px 6px;animation:skFlow 1.6s linear infinite} @keyframes skFlow{to{background-position:24px 0}} } /* —— route：路线虚线行军 + 站点节点脉冲 —— */ @media(prefers-reduced-motion:no-preference){ #page-root[data-skin="route"] .rail::before,#preview[data-skin="route"] .rail::before{ animation:skMarch 1.4s linear infinite} @keyframes skMarch{to{background-position:0 -38px}} #page-root[data-skin="route"] .rn-dot,#preview[data-skin="route"] .rn-dot{ animation:skPulse 2.8s ease-out infinite} @keyframes skPulse{ 0%{box-shadow:0 0 0 0 rgba(var(--sk-a-rgb),.35)} 70%{box-shadow:0 0 0 12px rgba(var(--sk-a-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--sk-a-rgb),0)}} } /* —— dispatch：首屏雷达扫掠 + 状态灯眨眼 + 运单行悬停滑移 —— */ @media(prefers-reduced-motion:no-preference){ #page-root[data-skin="dispatch"] .hero::after,#preview[data-skin="dispatch"] .hero::after{ content:"";position:absolute;left:50%;top:38%;width:640px;height:640px;max-width:90vw;max-height:90vw; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,rgba(255,196,0,.16),transparent 72deg,transparent); -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 68%); mask-image:radial-gradient(circle,#000 0%,transparent 68%); animation:skRadar 7s linear infinite} @keyframes skRadar{to{transform:translate(-50%,-50%) rotate(360deg)}} #page-root[data-skin="dispatch"] .card::after,#preview[data-skin="dispatch"] .card::after{ animation:skBlink 2.6s ease-in-out infinite} @keyframes skBlink{0%,100%{opacity:1;box-shadow:0 0 10px rgba(46,213,115,.8)}50%{opacity:.45;box-shadow:0 0 3px rgba(46,213,115,.4)}} } #page-root[data-skin="dispatch"] .spec li,#preview[data-skin="dispatch"] .spec li{ transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) ease} #page-root[data-skin="dispatch"] .spec li:hover,#preview[data-skin="dispatch"] .spec li:hover{ transform:translateX(5px);border-bottom-color:rgba(255,196,0,.5)} /* —— concierge：服务铃摇铃 + 二维码框流光 —— */ #page-root[data-skin="concierge"] .citem .ic,#preview[data-skin="concierge"] .citem .ic, #page-root[data-skin="concierge"] .card .ic,#preview[data-skin="concierge"] .card .ic{ transition:transform var(--dur-2) var(--ease-spring)} #page-root[data-skin="concierge"] .citem:hover .ic,#preview[data-skin="concierge"] .citem:hover .ic, #page-root[data-skin="concierge"] .card:hover .ic,#preview[data-skin="concierge"] .card:hover .ic{ animation:skBell .9s var(--ease-spring)} @keyframes skBell{ 0%{transform:rotate(0)}25%{transform:rotate(9deg)} 50%{transform:rotate(-7deg)}75%{transform:rotate(4deg)}100%{transform:rotate(0)}} #page-root[data-skin="concierge"] .cta .qr,#preview[data-skin="concierge"] .cta .qr{ position:relative;overflow:hidden} #page-root[data-skin="concierge"] .cta .qr::after,#preview[data-skin="concierge"] .cta .qr::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,244,214,.4) 50%,transparent 65%); transform:translateX(-130%);transition:transform 1.1s var(--ease-out)} #page-root[data-skin="concierge"] .cta:hover .qr::after,#preview[data-skin="concierge"] .cta:hover .qr::after{ transform:translateX(130%)} /* ============================================================ 皮肤收尾：响应式细节 + 打印 + 画布缩略保护 ============================================================ */ /* 窄屏：拱窗卡收小弧顶、展示行内边距回收 */ @media(max-width:720px){ #page-root[data-skin="concierge"] .citem,#preview[data-skin="concierge"] .citem, #page-root[data-skin="concierge"] .card,#preview[data-skin="concierge"] .card{ border-radius:110px 110px 16px 16px;padding-top:34px} #page-root[data-skin="atlas"] .card::after,#preview[data-skin="atlas"] .card::after{display:none} #page-root[data-skin="journal"] .sh-media,#preview[data-skin="journal"] .sh-media, #page-root[data-skin="portfolio"] .sh-media,#preview[data-skin="portfolio"] .sh-media{ box-shadow:none} } /* 打印：全部皮肤退回纸面黑白（公示/送审场景）。 放在文件末尾，压过上面所有装饰性背景与 fixed 伪元素。 */ @media print{ #page-root[data-skin],#preview[data-skin]{background:#fff!important;color:#1f1f1f!important} #page-root[data-skin]::before,#preview[data-skin]::before, #page-root[data-skin]::after,#preview[data-skin]::after{display:none!important} #page-root[data-skin] section,#preview[data-skin] section{background:transparent!important} #page-root[data-skin] .nav,#preview[data-skin] .nav{background:#fff!important} #page-root[data-skin] .nav-links a,#preview[data-skin] .nav-links a{color:#1f1f1f!important} #page-root[data-skin] .footer,#preview[data-skin] .footer{background:#fff!important;color:#1f1f1f!important} #page-root[data-skin] .card,#preview[data-skin] .card, #page-root[data-skin] .citem,#preview[data-skin] .citem, #page-root[data-skin] .step,#preview[data-skin] .step, #page-root[data-skin] .stat,#preview[data-skin] .stat, #page-root[data-skin] .mcell,#preview[data-skin] .mcell, #page-root[data-skin] .adv,#preview[data-skin] .adv, #page-root[data-skin] .cmp,#preview[data-skin] .cmp, #page-root[data-skin] .cta,#preview[data-skin] .cta, #page-root[data-skin] .rn-body,#preview[data-skin] .rn-body{ background:#fff!important;border-color:#8a8a8a!important;box-shadow:none!important;color:#1f1f1f!important} #page-root[data-skin] .card::after,#preview[data-skin] .card::after, #page-root[data-skin] .step::before,#preview[data-skin] .step::before, #page-root[data-skin] .rail::before,#preview[data-skin] .rail::before, #page-root[data-skin] .hero::after,#preview[data-skin] .hero::after, #page-root[data-skin] .cta .qr::after,#preview[data-skin] .cta .qr::after{display:none!important} } /* 后台画布：皮肤固定背景在缩放画布里会随内容滚动，改为随容器铺满即可 */ #preview[data-skin]{background-attachment:scroll} /* ============================================================ ⑨ ARENA · 赛场竞技（我们的优势页） 设计语言：记分牌。纸白底、粗黑横带、电压橙强调、超大窄体数字； 像一块正在计分的球场记分牌。与蓝图皮肤的差别：无网格纸纹、 无等宽图纸编号，改用黑横带 + 斜切眉标 + 粗黑边框。 ============================================================ */ #page-root[data-skin="arena"],#preview[data-skin="arena"]{ --font-display:"Haettenschweiler","Arial Narrow","Impact","Noto Sans SC","Microsoft YaHei",sans-serif; background:linear-gradient(115deg,transparent 0 72%,rgba(255,77,28,.06) 72%),var(--sk-bg); color:#15161A; } #page-root[data-skin="arena"] section,#preview[data-skin="arena"] section{ --sec-h:#101114;--sec-t:#3C3F46;--sec-muted:#70757E; --sec-accent:var(--sk-a);--sec-card:#FFFFFF; --line:#101114;--rule:#101114;--rule-2:#101114} #page-root[data-skin="arena"] .soft-bg,#preview[data-skin="arena"] .soft-bg{background:#F1F1ED} #page-root[data-skin="arena"] .dark-sec,#preview[data-skin="arena"] .dark-sec{background:#101114} #page-root[data-skin="arena"] .dark-sec::before,#preview[data-skin="arena"] .dark-sec::before{display:none} #page-root[data-skin="arena"] .nav,#preview[data-skin="arena"] .nav{ background:#101114;border-bottom:3px solid var(--sk-a)} #page-root[data-skin="arena"] .nav .brand,#preview[data-skin="arena"] .nav .brand{color:#FFF} #page-root[data-skin="arena"] .nav .brand b,#preview[data-skin="arena"] .nav .brand b{color:var(--sk-a)} #page-root[data-skin="arena"] .nav-links a,#preview[data-skin="arena"] .nav-links a{color:rgba(255,255,255,.78)} #page-root[data-skin="arena"] .nav-links a:hover,#preview[data-skin="arena"] .nav-links a:hover{ color:#FFF;background:rgba(255,77,28,.22)} #page-root[data-skin="arena"] .nav-links a.active,#preview[data-skin="arena"] .nav-links a.active{color:#FFF} #page-root[data-skin="arena"] .nav-links a::after,#preview[data-skin="arena"] .nav-links a::after{background:var(--sk-a)} #page-root[data-skin="arena"] .nav .btn,#preview[data-skin="arena"] .nav .btn{background:var(--sk-a);color:#101114} #page-root[data-skin="arena"] .nav-toggle span,#preview[data-skin="arena"] .nav-toggle span{background:#FFF} #page-root[data-skin="arena"] .hero,#preview[data-skin="arena"] .hero{background:transparent} #page-root[data-skin="arena"] .hero::before,#preview[data-skin="arena"] .hero::before{display:none} #page-root[data-skin="arena"] .hero .eyebrow,#preview[data-skin="arena"] .hero .eyebrow{ background:#101114;color:#FFF;border-radius:0;transform:skewX(-6deg);letter-spacing:.3em} #page-root[data-skin="arena"] .hero .eyebrow::before,#preview[data-skin="arena"] .hero .eyebrow::before{background:var(--sk-a)} #page-root[data-skin="arena"] .hero-center h1,#preview[data-skin="arena"] .hero-center h1{ font-family:var(--font-display);font-weight:900;color:#101114;letter-spacing:-.01em} #page-root[data-skin="arena"] .hero-center h1 .hl,#preview[data-skin="arena"] .hero-center h1 .hl{color:var(--sk-a)} #page-root[data-skin="arena"] .hero-center h1 .hl::after,#preview[data-skin="arena"] .hero-center h1 .hl::after{ height:.16em;bottom:.02em;background:linear-gradient(90deg,rgba(var(--sk-a-rgb),.45),transparent)} #page-root[data-skin="arena"] .hero .sub,#preview[data-skin="arena"] .hero .sub{color:#3C3F46} #page-root[data-skin="arena"] .hero .btn,#preview[data-skin="arena"] .hero .btn{background:var(--sk-a);color:#101114} #page-root[data-skin="arena"] .hero-rail,#preview[data-skin="arena"] .hero-rail{border-top:3px solid #101114!important} #page-root[data-skin="arena"] .hero-rail b,#preview[data-skin="arena"] .hero-rail b{ font-family:var(--font-display);font-size:44px;color:#101114} #page-root[data-skin="arena"] .hero-rail .mr,#preview[data-skin="arena"] .hero-rail .mr{border-right-color:#101114} #page-root[data-skin="arena"] main,#preview[data-skin="arena"] main{counter-reset:skar} #page-root[data-skin="arena"] main>section,#preview[data-skin="arena"] main>section{counter-increment:skar} #page-root[data-skin="arena"] section .eyebrow,#preview[data-skin="arena"] section .eyebrow{ background:#101114;color:#FFF;border-radius:0;transform:skewX(-6deg);letter-spacing:.26em} #page-root[data-skin="arena"] section .eyebrow::before,#preview[data-skin="arena"] section .eyebrow::before{ background:var(--sk-a)} #page-root[data-skin="arena"] section .eyebrow::after,#preview[data-skin="arena"] section .eyebrow::after{ content:" / " counter(skar,decimal-leading-zero);font-family:var(--sk-mono);color:var(--sk-a);letter-spacing:.1em} #page-root[data-skin="arena"] .card,#preview[data-skin="arena"] .card, #page-root[data-skin="arena"] .adv,#preview[data-skin="arena"] .adv, #page-root[data-skin="arena"] .stat,#preview[data-skin="arena"] .stat, #page-root[data-skin="arena"] .step,#preview[data-skin="arena"] .step{ background:#FFF;border:2.5px solid #101114;border-radius:0;position:relative;overflow:hidden} #page-root[data-skin="arena"] .card::before,#preview[data-skin="arena"] .card::before, #page-root[data-skin="arena"] .adv::before,#preview[data-skin="arena"] .adv::before, #page-root[data-skin="arena"] .stat::before,#preview[data-skin="arena"] .stat::before, #page-root[data-skin="arena"] .step::before,#preview[data-skin="arena"] .step::before{ content:"";position:absolute;top:0;left:0;right:0;height:10px;background:#101114} #page-root[data-skin="arena"] .card:hover,#preview[data-skin="arena"] .card:hover, #page-root[data-skin="arena"] .adv:hover,#preview[data-skin="arena"] .adv:hover, #page-root[data-skin="arena"] .stat:hover,#preview[data-skin="arena"] .stat:hover, #page-root[data-skin="arena"] .step:hover,#preview[data-skin="arena"] .step:hover{ border-color:var(--sk-a);transform:translateY(-6px)} #page-root[data-skin="arena"] .card::after,#preview[data-skin="arena"] .card::after{display:none} #page-root[data-skin="arena"] .card h3,#preview[data-skin="arena"] .card h3, #page-root[data-skin="arena"] .adv h3,#preview[data-skin="arena"] .adv h3{color:#101114} #page-root[data-skin="arena"] .card .ic,#preview[data-skin="arena"] .card .ic, #page-root[data-skin="arena"] .adv .ic,#preview[data-skin="arena"] .adv .ic{ border-radius:0;background:#101114;color:var(--sk-a)} #page-root[data-skin="arena"] .stat b,#preview[data-skin="arena"] .stat b, #page-root[data-skin="arena"] .mcell b,#preview[data-skin="arena"] .mcell b{ font-family:var(--font-display);font-size:56px;color:#101114} #page-root[data-skin="arena"] .stat,#preview[data-skin="arena"] .stat, #page-root[data-skin="arena"] .mcell,#preview[data-skin="arena"] .mcell{border-width:2.5px} #page-root[data-skin="arena"] .mgrid,#preview[data-skin="arena"] .mgrid{background:#101114;gap:2.5px;border:2.5px solid #101114} #page-root[data-skin="arena"] .mcell,#preview[data-skin="arena"] .mcell{border:none} #page-root[data-skin="arena"] .mbar,#preview[data-skin="arena"] .mbar{border-radius:0;background:rgba(16,17,20,.14)} #page-root[data-skin="arena"] .mbar u,#preview[data-skin="arena"] .mbar u{border-radius:0;background:var(--sk-a)} #page-root[data-skin="arena"] .show article,#preview[data-skin="arena"] .show article{border-bottom-color:#101114} #page-root[data-skin="arena"] .sh-media,#preview[data-skin="arena"] .sh-media{ border-radius:0;border:2.5px solid #101114;box-shadow:8px 8px 0 rgba(16,17,20,.18)} #page-root[data-skin="arena"] .sh-no,#preview[data-skin="arena"] .sh-no{ font-family:var(--sk-mono);color:var(--sk-a);letter-spacing:.2em} #page-root[data-skin="arena"] .sh-text h3,#preview[data-skin="arena"] .sh-text h3{color:#101114} #page-root[data-skin="arena"] .sh-metric,#preview[data-skin="arena"] .sh-metric{ border-radius:0;background:#101114;color:#FFF;border-color:#101114;font-family:var(--sk-mono)} #page-root[data-skin="arena"] .cmp,#preview[data-skin="arena"] .cmp{ border:2.5px solid #101114;background:#FFF;padding:6px 20px 14px} #page-root[data-skin="arena"] .cmp-head,#preview[data-skin="arena"] .cmp-head{border-bottom:3px solid #101114} #page-root[data-skin="arena"] .cmp-head b,#preview[data-skin="arena"] .cmp-head b{color:#101114;opacity:.55} #page-root[data-skin="arena"] .cmp-row,#preview[data-skin="arena"] .cmp-row{border-bottom-color:rgba(16,17,20,.16)} #page-root[data-skin="arena"] .cmp-row .us,#preview[data-skin="arena"] .cmp-row .us{color:#101114} #page-root[data-skin="arena"] .cmp-row .us::before,#preview[data-skin="arena"] .cmp-row .us::before{content:"▶ ";color:var(--sk-a)} #page-root[data-skin="arena"] .spec li,#preview[data-skin="arena"] .spec li{border-bottom-color:rgba(16,17,20,.2)} #page-root[data-skin="arena"] .spec-no,#preview[data-skin="arena"] .spec-no{ font-family:var(--sk-mono);color:#FFF;background:#101114;padding:2px 8px;justify-self:start} #page-root[data-skin="arena"] .spec li:hover .spec-no,#preview[data-skin="arena"] .spec li:hover .spec-no{background:var(--sk-a)} #page-root[data-skin="arena"] .rn-dot,#preview[data-skin="arena"] .rn-dot{ border-radius:0;background:#101114;border:3px solid var(--sk-a)} #page-root[data-skin="arena"] .rn-year,#preview[data-skin="arena"] .rn-year{font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="arena"] .stmt-row,#preview[data-skin="arena"] .stmt-row{border-bottom-color:rgba(16,17,20,.25)} #page-root[data-skin="arena"] .stmt-row h3,#preview[data-skin="arena"] .stmt-row h3{ font-family:var(--font-display);color:#101114} #page-root[data-skin="arena"] .stmt-row:hover h3,#preview[data-skin="arena"] .stmt-row:hover h3{color:var(--sk-a)} #page-root[data-skin="arena"] .split-list li,#preview[data-skin="arena"] .split-list li{border-top-color:rgba(16,17,20,.25)} #page-root[data-skin="arena"] .split-list li:last-child,#preview[data-skin="arena"] .split-list li:last-child{border-bottom-color:rgba(16,17,20,.25)} #page-root[data-skin="arena"] .sp-n,#preview[data-skin="arena"] .sp-n{font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="arena"] .partners .p,#preview[data-skin="arena"] .partners .p{ border-radius:0;background:#FFF;border:1.5px solid #101114;color:#101114} #page-root[data-skin="arena"] .partners .p:hover,#preview[data-skin="arena"] .partners .p:hover{color:var(--sk-a)} #page-root[data-skin="arena"] .btn,#preview[data-skin="arena"] .btn{border-radius:0} #page-root[data-skin="arena"] .btn.ghost,#preview[data-skin="arena"] .btn.ghost{ color:#101114;border:2px solid #101114;background:#FFF} #page-root[data-skin="arena"] .btn.ghost:hover,#preview[data-skin="arena"] .btn.ghost:hover{background:rgba(var(--sk-a-rgb),.12)} #page-root[data-skin="arena"] .cta,#preview[data-skin="arena"] .cta{background:#101114;border-radius:0} #page-root[data-skin="arena"] .cta::before,#preview[data-skin="arena"] .cta::before{display:none} #page-root[data-skin="arena"] .cta h2,#preview[data-skin="arena"] .cta h2{color:#FFF;font-family:var(--font-display)} #page-root[data-skin="arena"] .cta p,#preview[data-skin="arena"] .cta p{color:rgba(255,255,255,.7)} #page-root[data-skin="dossier"] .footer,#preview[data-skin="dossier"] .footer{background:#241C0F} /* ============================================================ ⑪ CHAT · 对话气泡（联系我们页） 设计语言：聊天窗口。冷灰底、圆气泡卡片、头像圆点、 蓝色强调、圆角按钮；像一场正在进行的对话。 ============================================================ */ #page-root[data-skin="chat"],#preview[data-skin="chat"]{ --font-display:"Segoe UI","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC",sans-serif; /* --sk-at：强调色「只当文字用」的深一档色位。#3D7BFB 在白底只有 3.87:1， 13–15px 的眉标与描边按钮不达 AA；#1B4FBF 同色相、7.2:1。 必须定在皮肤根上：导航条不在 section 里，定在 section 上时导航取不到该令牌。 */ --sk-at:#1B4FBF; background:linear-gradient(180deg,#E8EDF4 0%,var(--sk-bg) 30%),var(--sk-bg); color:#2B3440; } #page-root[data-skin="chat"] section,#preview[data-skin="chat"] section{ --sec-h:#1D2833;--sec-t:#46525F;--sec-muted:#5F6B78; --sec-accent:var(--sk-a);--sec-card:#FFFFFF; --line:rgba(29,40,51,.18);--rule:rgba(29,40,51,.14);--rule-2:rgba(29,40,51,.26)} #page-root[data-skin="chat"] .soft-bg,#preview[data-skin="chat"] .soft-bg{background:#E4EAF2} #page-root[data-skin="chat"] .dark-sec,#preview[data-skin="chat"] .dark-sec{background:#123B5C;color:#EAF2FB} #page-root[data-skin="chat"] .dark-sec::before,#preview[data-skin="chat"] .dark-sec::before{display:none} #page-root[data-skin="chat"] .nav,#preview[data-skin="chat"] .nav{ background:rgba(255,255,255,.92);border-bottom:1px solid rgba(61,123,251,.25)} #page-root[data-skin="chat"] .nav-links a,#preview[data-skin="chat"] .nav-links a{color:#46525F} #page-root[data-skin="chat"] .nav-links a:hover,#preview[data-skin="chat"] .nav-links a:hover{ color:var(--sk-a);background:rgba(61,123,251,.08)} #page-root[data-skin="chat"] .nav-links a.active,#preview[data-skin="chat"] .nav-links a.active{color:var(--sk-a)} #page-root[data-skin="chat"] .nav-links a::after,#preview[data-skin="chat"] .nav-links a::after{ background:var(--sk-a);height:3px;border-radius:2px} #page-root[data-skin="chat"] .nav .brand b,#preview[data-skin="chat"] .nav .brand b{color:var(--sk-a)} #page-root[data-skin="chat"] .nav .btn,#preview[data-skin="chat"] .nav .btn{border-radius:999px} #page-root[data-skin="chat"] .hero,#preview[data-skin="chat"] .hero{background:transparent} #page-root[data-skin="chat"] .hero::before,#preview[data-skin="chat"] .hero::before{display:none} #page-root[data-skin="chat"] .hero .eyebrow,#preview[data-skin="chat"] .hero .eyebrow{ background:#FFF;color:var(--sk-a);border:1.5px solid rgba(61,123,251,.4);border-radius:999px; box-shadow:0 6px 18px rgba(61,123,251,.14)} #page-root[data-skin="chat"] .hero-center h1,#preview[data-skin="chat"] .hero-center h1{ font-weight:800;color:#1D2833} #page-root[data-skin="chat"] .hero-center h1 .hl,#preview[data-skin="chat"] .hero-center h1 .hl{color:var(--sk-a)} #page-root[data-skin="chat"] .hero-center h1 .hl::after,#preview[data-skin="chat"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="chat"] .hero .sub,#preview[data-skin="chat"] .hero .sub{color:#46525F} #page-root[data-skin="chat"] .hero .btn,#preview[data-skin="chat"] .hero .btn{border-radius:999px} #page-root[data-skin="chat"] .hero-rail,#preview[data-skin="chat"] .hero-rail{ background:#FFF;border-radius:24px;border:1px solid rgba(61,123,251,.2); box-shadow:0 16px 40px rgba(29,40,51,.1)} #page-root[data-skin="chat"] .hero-rail b,#preview[data-skin="chat"] .hero-rail b{color:var(--sk-a)} #page-root[data-skin="chat"] .hero-rail .mr,#preview[data-skin="chat"] .hero-rail .mr{border-right-color:rgba(29,40,51,.12)} #page-root[data-skin="chat"] .card,#preview[data-skin="chat"] .card, #page-root[data-skin="chat"] .adv,#preview[data-skin="chat"] .adv, #page-root[data-skin="chat"] .step,#preview[data-skin="chat"] .step, #page-root[data-skin="chat"] .citem,#preview[data-skin="chat"] .citem{ background:#FFF;border:1px solid rgba(29,40,51,.12);border-radius:18px 18px 18px 6px;position:relative} #page-root[data-skin="chat"] .card::before,#preview[data-skin="chat"] .card::before, #page-root[data-skin="chat"] .adv::before,#preview[data-skin="chat"] .adv::before{display:none} #page-root[data-skin="chat"] .card:hover,#preview[data-skin="chat"] .card:hover, #page-root[data-skin="chat"] .adv:hover,#preview[data-skin="chat"] .adv:hover, #page-root[data-skin="chat"] .step:hover,#preview[data-skin="chat"] .step:hover, #page-root[data-skin="chat"] .citem:hover,#preview[data-skin="chat"] .citem:hover{ border-color:rgba(61,123,251,.5);transform:translateY(-5px)} #page-root[data-skin="chat"] .card h3,#preview[data-skin="chat"] .card h3, #page-root[data-skin="chat"] .adv h3,#preview[data-skin="chat"] .adv h3, #page-root[data-skin="chat"] .step h3,#preview[data-skin="chat"] .step h3{color:#1D2833} #page-root[data-skin="chat"] .card .ic,#preview[data-skin="chat"] .card .ic, #page-root[data-skin="chat"] .adv .ic,#preview[data-skin="chat"] .adv .ic, #page-root[data-skin="chat"] .citem .ic,#preview[data-skin="chat"] .citem .ic, #page-root[data-skin="chat"] .step .num,#preview[data-skin="chat"] .step .num{ border-radius:999px;background:rgba(61,123,251,.1);color:var(--sk-a)} #page-root[data-skin="chat"] .step .num,#preview[data-skin="chat"] .step .num{font-weight:800} #page-root[data-skin="chat"] .stat,#preview[data-skin="chat"] .stat, #page-root[data-skin="chat"] .mcell,#preview[data-skin="chat"] .mcell{ background:#FFF;border:1px solid rgba(29,40,51,.12);border-radius:18px 18px 18px 6px} #page-root[data-skin="chat"] .stat b,#preview[data-skin="chat"] .stat b, #page-root[data-skin="chat"] .mcell b,#preview[data-skin="chat"] .mcell b{color:var(--sk-a)} #page-root[data-skin="chat"] .mgrid,#preview[data-skin="chat"] .mgrid{background:transparent;gap:16px} #page-root[data-skin="chat"] .mbar,#preview[data-skin="chat"] .mbar{border-radius:99px;background:rgba(29,40,51,.12)} #page-root[data-skin="chat"] .mbar u,#preview[data-skin="chat"] .mbar u{border-radius:99px;background:linear-gradient(90deg,var(--sk-a),#6FA5FF)} #page-root[data-skin="chat"] .cmp,#preview[data-skin="chat"] .cmp{ background:#FFF;border:1px solid rgba(29,40,51,.12);border-radius:18px;padding:8px 24px 14px} #page-root[data-skin="chat"] .cmp-row .us,#preview[data-skin="chat"] .cmp-row .us{color:#1D2833} #page-root[data-skin="chat"] .cmp-row .us::before,#preview[data-skin="chat"] .cmp-row .us::before{ content:"● ";color:var(--sk-a);font-size:10px;vertical-align:2px} #page-root[data-skin="chat"] .show article,#preview[data-skin="chat"] .show article{border-bottom-color:rgba(29,40,51,.14)} #page-root[data-skin="chat"] .sh-media,#preview[data-skin="chat"] .sh-media{border-radius:18px} #page-root[data-skin="chat"] .sh-no,#preview[data-skin="chat"] .sh-no{color:var(--sk-a)} #page-root[data-skin="chat"] .sh-metric,#preview[data-skin="chat"] .sh-metric{ border-radius:999px;background:rgba(61,123,251,.1);border-color:rgba(61,123,251,.35);color:var(--sk-a)} #page-root[data-skin="chat"] .stmt-row,#preview[data-skin="chat"] .stmt-row{border-bottom-color:rgba(29,40,51,.16)} #page-root[data-skin="chat"] .stmt-row h3,#preview[data-skin="chat"] .stmt-row h3{color:#1D2833} #page-root[data-skin="chat"] .stmt-row:hover h3,#preview[data-skin="chat"] .stmt-row:hover h3{color:var(--sk-a)} #page-root[data-skin="chat"] .spec-no,#preview[data-skin="chat"] .spec-no{color:var(--sk-a)} #page-root[data-skin="chat"] .rn-dot,#preview[data-skin="chat"] .rn-dot{ border-radius:999px;background:var(--sk-a);box-shadow:0 0 0 5px rgba(61,123,251,.15)} #page-root[data-skin="chat"] .rn-body,#preview[data-skin="chat"] .rn-body{ background:#FFF;border:1px solid rgba(29,40,51,.12);border-radius:16px 16px 16px 4px;padding:16px 20px} #page-root[data-skin="chat"] .partners .p,#preview[data-skin="chat"] .partners .p{ border-radius:999px;background:#FFF;border-color:rgba(29,40,51,.15);color:#46525F} #page-root[data-skin="chat"] .partners .p:hover,#preview[data-skin="chat"] .partners .p:hover{color:var(--sk-a)} #page-root[data-skin="chat"] .btn,#preview[data-skin="chat"] .btn{ border-radius:999px;background:var(--sk-a);color:#04122E; box-shadow:0 10px 26px rgba(61,123,251,.28)} #page-root[data-skin="chat"] .btn:hover,#preview[data-skin="chat"] .btn:hover{ box-shadow:0 14px 34px rgba(61,123,251,.36)} #page-root[data-skin="chat"] .btn.ghost,#preview[data-skin="chat"] .btn.ghost{ background:#FFF;color:var(--sk-a);border:1.5px solid rgba(61,123,251,.5);box-shadow:none} #page-root[data-skin="chat"] .cta,#preview[data-skin="chat"] .cta{ background:linear-gradient(135deg,#123B5C,var(--sk-a) 160%);border-radius:28px} #page-root[data-skin="chat"] .cta::before,#preview[data-skin="chat"] .cta::before{display:none} #page-root[data-skin="chat"] .cta h2,#preview[data-skin="chat"] .cta h2{color:#FFF} #page-root[data-skin="chat"] .cta p,#preview[data-skin="chat"] .cta p{color:rgba(255,255,255,.78)} #page-root[data-skin="chat"] .footer,#preview[data-skin="chat"] .footer{background:#1D2833} /* ============================================================ ⑩ DOSSIER · 档案卷宗（产教融合页） 设计语言：牛皮纸档案。纸纹底、双线装订边、卷宗编号眉标、 红章卡片、衬线正文、打字机标签；像一册翻开的校企合作协议。 ============================================================ */ #page-root[data-skin="dossier"],#preview[data-skin="dossier"]{ --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif; /* --sk-at：强调色当文字用时的深一档色位（定在根上，导航条才取得到） */ --sk-at:#8F3420; background: repeating-linear-gradient(0deg,transparent 0 27px,rgba(107,79,42,.05) 27px 28px), var(--sk-bg); color:#3A2F1E; } #page-root[data-skin="dossier"] section,#preview[data-skin="dossier"] section{ --sec-h:#2E2415;--sec-t:#4E4230;--sec-muted:#7A6B4F; --sec-accent:var(--sk-a);--sec-card:#FBF7EC; --line:rgba(107,79,42,.35);--rule:rgba(107,79,42,.3);--rule-2:rgba(107,79,42,.5)} #page-root[data-skin="dossier"] .soft-bg,#preview[data-skin="dossier"] .soft-bg{background:#EDE3CC} #page-root[data-skin="dossier"] .dark-sec,#preview[data-skin="dossier"] .dark-sec{background:#2E2415;color:#F1E8D4} #page-root[data-skin="dossier"] .dark-sec::before,#preview[data-skin="dossier"] .dark-sec::before{display:none} #page-root[data-skin="dossier"] .nav,#preview[data-skin="dossier"] .nav{ background:#EFE5CE;border-bottom:2px solid #6B4F2A} #page-root[data-skin="dossier"] .nav-links a,#preview[data-skin="dossier"] .nav-links a{color:#4E4230} #page-root[data-skin="dossier"] .nav-links a:hover,#preview[data-skin="dossier"] .nav-links a:hover{ color:var(--sk-a);background:rgba(179,69,44,.08)} #page-root[data-skin="dossier"] .nav-links a.active,#preview[data-skin="dossier"] .nav-links a.active{color:var(--sk-a)} #page-root[data-skin="dossier"] .nav-links a::after,#preview[data-skin="dossier"] .nav-links a::after{background:var(--sk-a)} #page-root[data-skin="dossier"] .nav .brand b,#preview[data-skin="dossier"] .nav .brand b{color:var(--sk-a)} #page-root[data-skin="dossier"] .nav .btn,#preview[data-skin="dossier"] .nav .btn{border-radius:2px} #page-root[data-skin="dossier"] .hero,#preview[data-skin="dossier"] .hero{background:transparent} #page-root[data-skin="dossier"] .hero::before,#preview[data-skin="dossier"] .hero::before{display:none} #page-root[data-skin="dossier"] .hero .eyebrow,#preview[data-skin="dossier"] .hero .eyebrow{ font-family:var(--sk-mono);letter-spacing:.3em;background:transparent;border:none; border-top:2px solid var(--sk-a);border-bottom:2px solid var(--sk-a);border-radius:0;color:var(--sk-a)} #page-root[data-skin="dossier"] .hero .eyebrow::before,#preview[data-skin="dossier"] .hero .eyebrow::before{display:none} #page-root[data-skin="dossier"] .hero-center h1,#preview[data-skin="dossier"] .hero-center h1{ font-family:var(--sk-serif);font-weight:700;color:#2E2415} #page-root[data-skin="dossier"] .hero-center h1 .hl,#preview[data-skin="dossier"] .hero-center h1 .hl{color:var(--sk-a)} #page-root[data-skin="dossier"] .hero-center h1 .hl::after,#preview[data-skin="dossier"] .hero-center h1 .hl::after{display:none} #page-root[data-skin="dossier"] .hero .sub,#preview[data-skin="dossier"] .hero .sub{ font-family:var(--sk-serif);color:#4E4230} #page-root[data-skin="dossier"] .hero .btn,#preview[data-skin="dossier"] .hero .btn{border-radius:2px} #page-root[data-skin="dossier"] .hero-rail b,#preview[data-skin="dossier"] .hero-rail b{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="dossier"] .hero-rail .mr,#preview[data-skin="dossier"] .hero-rail .mr{border-right-color:rgba(46,36,21,.25)} #page-root[data-skin="dossier"] main,#preview[data-skin="dossier"] main{counter-reset:skdo} #page-root[data-skin="dossier"] main>section,#preview[data-skin="dossier"] main>section{counter-increment:skdo} #page-root[data-skin="dossier"] section .eyebrow,#preview[data-skin="dossier"] section .eyebrow{ font-family:var(--sk-mono);letter-spacing:.26em;background:transparent;border:none; border-left:4px double var(--sk-a);border-radius:0;color:var(--sk-a);padding-left:10px} #page-root[data-skin="dossier"] section .eyebrow::before,#preview[data-skin="dossier"] section .eyebrow::before{display:none} #page-root[data-skin="dossier"] section .eyebrow::after,#preview[data-skin="dossier"] section .eyebrow::after{ content:" · 卷" counter(skdo,decimal-leading-zero)} #page-root[data-skin="dossier"] .h2,#preview[data-skin="dossier"] .h2{ font-family:var(--sk-serif);font-weight:700;color:#2E2415} #page-root[data-skin="dossier"] .lead,#preview[data-skin="dossier"] .lead{ font-family:var(--sk-serif);color:#4E4230} #page-root[data-skin="dossier"] .card,#preview[data-skin="dossier"] .card, #page-root[data-skin="dossier"] .step,#preview[data-skin="dossier"] .step, #page-root[data-skin="dossier"] .citem,#preview[data-skin="dossier"] .citem{ background:#FBF7EC;border:1px solid rgba(107,79,42,.45);border-radius:3px;position:relative} #page-root[data-skin="dossier"] .card::before,#preview[data-skin="dossier"] .card::before{display:none} #page-root[data-skin="dossier"] .card::after,#preview[data-skin="dossier"] .card::after{ content:"存档";position:absolute;top:10px;right:10px;width:36px;height:36px;line-height:17px; border:2px solid rgba(179,69,44,.65);border-radius:50%;color:rgba(179,69,44,.75); font-size:10px;text-align:center;transform:rotate(12deg);font-weight:700} #page-root[data-skin="dossier"] .card:hover,#preview[data-skin="dossier"] .card:hover, #page-root[data-skin="dossier"] .step:hover,#preview[data-skin="dossier"] .step:hover{ border-color:var(--sk-a);transform:translateY(-4px)} #page-root[data-skin="dossier"] .card h3,#preview[data-skin="dossier"] .card h3, #page-root[data-skin="dossier"] .step h3,#preview[data-skin="dossier"] .step h3{ font-family:var(--sk-serif);color:#2E2415} #page-root[data-skin="dossier"] .card .ic,#preview[data-skin="dossier"] .card .ic, #page-root[data-skin="dossier"] .citem .ic,#preview[data-skin="dossier"] .citem .ic{ border-radius:2px;background:transparent;color:var(--sk-a)} #page-root[data-skin="dossier"] .card .num,#preview[data-skin="dossier"] .card .num{font-family:var(--sk-mono)} #page-root[data-skin="dossier"] .stat,#preview[data-skin="dossier"] .stat, #page-root[data-skin="dossier"] .mcell,#preview[data-skin="dossier"] .mcell{ background:#FBF7EC;border:1px solid rgba(107,79,42,.4);border-radius:2px} #page-root[data-skin="dossier"] .stat b,#preview[data-skin="dossier"] .stat b, #page-root[data-skin="dossier"] .mcell b,#preview[data-skin="dossier"] .mcell b{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="dossier"] .mgrid,#preview[data-skin="dossier"] .mgrid{background:rgba(107,79,42,.25);gap:1px} #page-root[data-skin="dossier"] .spec-no,#preview[data-skin="dossier"] .spec-no{ font-family:var(--sk-mono);color:var(--sk-a)} #page-root[data-skin="dossier"] .rn-year,#preview[data-skin="dossier"] .rn-year{ font-family:var(--sk-serif);color:var(--sk-a)} #page-root[data-skin="dossier"] .rn-dot,#preview[data-skin="dossier"] .rn-dot{ background:var(--sk-a);border-radius:0;transform:rotate(45deg)} #page-root[data-skin="dossier"] .stmt-row h3,#preview[data-skin="dossier"] .stmt-row h3{ font-family:var(--sk-serif);color:#2E2415} #page-root[data-skin="dossier"] .stmt-row:hover h3,#preview[data-skin="dossier"] .stmt-row:hover h3{color:var(--sk-a)} #page-root[data-skin="dossier"] .cmp,#preview[data-skin="dossier"] .cmp{ background:#FBF7EC;border:1px solid rgba(107,79,42,.4);padding:6px 22px 12px} #page-root[data-skin="dossier"] .cmp-row .us,#preview[data-skin="dossier"] .cmp-row .us{color:#2E2415} #page-root[data-skin="dossier"] .dsheet,#preview[data-skin="dossier"] .dsheet{ background:#FBF7EC;border:1px solid rgba(107,79,42,.4);padding:8px 20px} #page-root[data-skin="dossier"] .sh-media,#preview[data-skin="dossier"] .sh-media{ border-radius:2px;border:6px solid #FBF7EC;outline:1px solid rgba(107,79,42,.4); box-shadow:6px 6px 0 rgba(107,79,42,.18)} #page-root[data-skin="dossier"] .sh-no,#preview[data-skin="dossier"] .sh-no{ font-family:var(--sk-mono);color:var(--sk-a);letter-spacing:.22em} #page-root[data-skin="dossier"] .sh-metric,#preview[data-skin="dossier"] .sh-metric{ border-radius:2px;background:rgba(179,69,44,.1);border-color:var(--sk-a);color:var(--sk-a)} #page-root[data-skin="dossier"] .partners .p,#preview[data-skin="dossier"] .partners .p{ border-radius:2px;background:#FBF7EC;border-color:rgba(107,79,42,.45);color:#4E4230} #page-root[data-skin="dossier"] .partners .p:hover,#preview[data-skin="dossier"] .partners .p:hover{color:var(--sk-a)} #page-root[data-skin="dossier"] .btn,#preview[data-skin="dossier"] .btn{border-radius:2px} #page-root[data-skin="dossier"] .btn.ghost,#preview[data-skin="dossier"] .btn.ghost{ color:#2E2415;border:1.5px solid rgba(46,36,21,.6);background:transparent} #page-root[data-skin="dossier"] .btn.ghost:hover,#preview[data-skin="dossier"] .btn.ghost:hover{background:rgba(179,69,44,.07)} #page-root[data-skin="dossier"] .cta,#preview[data-skin="dossier"] .cta{background:#2E2415;border-radius:3px} #page-root[data-skin="dossier"] .cta::before,#preview[data-skin="dossier"] .cta::before{display:none} #page-root[data-skin="dossier"] .cta h2,#preview[data-skin="dossier"] .cta h2{ color:#F1E8D4;font-family:var(--sk-serif);font-weight:700} #page-root[data-skin="dossier"] .cta p,#preview[data-skin="dossier"] .cta p{color:rgba(241,232,212,.7)} #page-root[data-skin="dossier"] .footer,#preview[data-skin="dossier"] .footer{background:#241C0F} /* ============================================================ CHAT 结构化改造：服务承诺区 → 左右交替聊天气泡流 （不只换色，而是把排版结构变成对话本身） ============================================================ */ #page-root[data-skin="chat"] .kit-statement .stmt,#preview[data-skin="chat"] .kit-statement .stmt{ max-width:760px} #page-root[data-skin="chat"] .kit-statement .stmt-row,#preview[data-skin="chat"] .kit-statement .stmt-row{ position:relative;width:min(76%,560px);margin:0 0 22px;padding:16px 20px 14px; background:#FFF;border:1px solid rgba(29,40,51,.12); border-radius:4px 20px 20px 20px; box-shadow:0 4px 16px rgba(29,40,51,.06)} #page-root[data-skin="chat"] .kit-statement .stmt-row:nth-child(even),#preview[data-skin="chat"] .kit-statement .stmt-row:nth-child(even){ margin-left:auto; background:linear-gradient(135deg,var(--sk-a),#6FA5FF); border-color:transparent;border-radius:20px 4px 20px 20px} #page-root[data-skin="chat"] .kit-statement .stmt-row:nth-child(even) h3,#preview[data-skin="chat"] .kit-statement .stmt-row:nth-child(even) h3{ color:rgba(255,255,255,.92)} #page-root[data-skin="chat"] .kit-statement .stmt-row:nth-child(even) p,#preview[data-skin="chat"] .kit-statement .stmt-row:nth-child(even) p{ color:rgba(255,255,255,.88)} #page-root[data-skin="chat"] .kit-statement .stmt-row h3,#preview[data-skin="chat"] .kit-statement .stmt-row h3{ font-size:13px;font-weight:800;letter-spacing:.18em;color:var(--sk-a);margin-bottom:6px} #page-root[data-skin="chat"] .kit-statement .stmt-row p,#preview[data-skin="chat"] .kit-statement .stmt-row p{ font-size:16px;line-height:1.75;margin:0} /* 头像圆点：左列客服「肥」，右列用户「你」 */ #page-root[data-skin="chat"] .kit-statement .stmt-row::after,#preview[data-skin="chat"] .kit-statement .stmt-row::after{ content:"肥";position:absolute;bottom:-8px;width:34px;height:34px;border-radius:50%; background:#101114;color:#FFF;font-size:13px;font-weight:800; display:flex;align-items:center;justify-content:center; box-shadow:0 3px 8px rgba(29,40,51,.25)} #page-root[data-skin="chat"] .kit-statement .stmt-row::after{left:-42px} #page-root[data-skin="chat"] .kit-statement .stmt-row:nth-child(even)::after,#preview[data-skin="chat"] .kit-statement .stmt-row:nth-child(even)::after{ content:"你";left:auto;right:-42px;background:var(--sk-a)} /* 气泡小尾巴 */ #page-root[data-skin="chat"] .kit-statement .stmt-row::before,#preview[data-skin="chat"] .kit-statement .stmt-row::before{ content:"";position:absolute;bottom:12px;left:-8px;width:14px;height:14px; background:inherit;border-left:1px solid rgba(29,40,51,.12);border-bottom:1px solid rgba(29,40,51,.12); transform:rotate(45deg)} #page-root[data-skin="chat"] .kit-statement .stmt-row:nth-child(even)::before,#preview[data-skin="chat"] .kit-statement .stmt-row:nth-child(even)::before{ left:auto;right:-8px;transform:rotate(225deg);border-left:none; border-right:1px solid rgba(61,123,251,.4);border-top:1px solid rgba(61,123,251,.4);border-bottom:none} /* ============================================================ DOSSIER 结构化改造：每个章节 → 带卷宗标签耳页的档案页 （章节顶部伸出“卷01”标签耳页 + 左侧双线装订边） ============================================================ */ #page-root[data-skin="dossier"] main>section,#preview[data-skin="dossier"] main>section{ border-top:3px double rgba(107,79,42,.4)} #page-root[data-skin="dossier"] main>section~section::before,#preview[data-skin="dossier"] main>section~section::before{ content:"卷 " counter(skdo,decimal-leading-zero); position:absolute;top:-1px;left:min(7vw,90px);z-index:2; background:#6B4F2A;color:#F1E8D4; font-family:var(--sk-mono);font-size:11px;letter-spacing:.24em; padding:7px 20px 9px;border-radius:0 0 10px 10px; box-shadow:0 3px 8px rgba(46,36,21,.25)} #page-root[data-skin="dossier"] main>section~section .wrap,#preview[data-skin="dossier"] main>section~section .wrap{ position:relative} @media(max-width:720px){ #page-root[data-skin="dossier"] main>section~section::before,#preview[data-skin="dossier"] main>section~section::before{ left:16px;padding:5px 14px 7px;font-size:10px} } /* ============================================================ ARENA 结构化改造：章节背后巨型回合数字 + 记分牌数据砖 ============================================================ */ #page-root[data-skin="arena"] main>section,#preview[data-skin="arena"] main>section{position:relative;overflow:hidden} #page-root[data-skin="arena"] main>section~section .h2,#preview[data-skin="arena"] main>section~section .h2{ position:relative} #page-root[data-skin="arena"] main>section~section .h2::before,#preview[data-skin="arena"] main>section~section .h2::before{ content:"R" counter(skar,decimal-leading-zero); position:absolute;left:50%;top:50%;transform:translate(-50%,-52%); font-family:var(--font-display);font-size:150px;font-weight:900; color:transparent;-webkit-text-stroke:2px rgba(255,77,28,.22); pointer-events:none;white-space:nowrap} #page-root[data-skin="arena"] main>section~section .h2,#preview[data-skin="arena"] main>section~section .h2{ z-index:1} /* 数据砖 → 黑底记分牌 */ #page-root[data-skin="arena"] .stats,#preview[data-skin="arena"] .stats{gap:2.5px;background:#101114;border:2.5px solid #101114} #page-root[data-skin="arena"] .stats .stat,#preview[data-skin="arena"] .stats .stat{background:#101114;border:none} #page-root[data-skin="arena"] .stats .stat b,#preview[data-skin="arena"] .stats .stat b{color:var(--sk-a)} #page-root[data-skin="arena"] .stats .stat span,#preview[data-skin="arena"] .stats .stat span{color:rgba(255,255,255,.75)} #page-root[data-skin="arena"] .stats .stat:hover,#preview[data-skin="arena"] .stats .stat:hover{ background:#1C1E24;border-color:var(--sk-a);transform:none} @media(max-width:720px){ #page-root[data-skin="arena"] main>section~section .h2::before,#preview[data-skin="arena"] main>section~section .h2::before{ font-size:90px} } /* ============================================================ 强调色「当文字用」时必须比填充色深一档 ------------------------------------------------------------ 皮肤里 --sk-a 既做填充也做文字色，但填充色的对比度是按「白字压在上面」 选的：#A87B2D 在白底只有 3.48:1、#F2762E 只有 2.84:1（实测）， 用作 13px 眉标 / 编号 / 大数字时不达 AA。这里不改填充，只把「文字位」 统一换成各皮肤更深的强调色（--brown 就是这个色位）。 放在文件末尾，并复用 TOKEN_ROOT_PAGE 的同款写法：把宿主 id 写两遍 （#page-root#page-root…）把特异度抬到 2 个 id，稳压皮肤自身任何 1 个 id 的规则， 不靠源码顺序决胜 —— 谁在后面再追加皮肤都不会把这条顶掉（页尾那次就是栽在 「守卫只覆盖了一个宿主」上）。 ============================================================ */ #page-root#page-root[data-skin="portfolio"] :is(.eyebrow,.sh-no,.spec-no,.rn-year), #preview#preview[data-skin="portfolio"] :is(.eyebrow,.sh-no,.spec-no,.rn-year){color:var(--brown)} #page-root#page-root[data-skin="route"] :is(.eyebrow,.spec-no,.rn-year,.mcell b,.hero-rail b,.step .num,.stats .stat b,.nav-links a.active), #preview#preview[data-skin="route"] :is(.eyebrow,.spec-no,.rn-year,.mcell b,.hero-rail b,.step .num,.stats .stat b,.nav-links a.active){color:var(--brown)} #page-root#page-root[data-skin="chat"] :is(.eyebrow,.btn.ghost,.rn-year,.mcell b,.hero-rail b,.sh-no,.spec-no,.nav-links a.active,.nav .brand b), #preview#preview[data-skin="chat"] :is(.eyebrow,.btn.ghost,.rn-year,.mcell b,.hero-rail b,.sh-no,.spec-no,.nav-links a.active,.nav .brand b){color:var(--sk-at,var(--brown))} #page-root#page-root[data-skin="dossier"] :is(.eyebrow,.sh-no,.spec-no,.rn-year,.mcell b,.hero-rail b,.nav-links a.active,.nav .brand b), #preview#preview[data-skin="dossier"] :is(.eyebrow,.sh-no,.spec-no,.rn-year,.mcell b,.hero-rail b,.nav-links a.active,.nav .brand b){color:var(--sk-at,var(--brown))}