/* ══════════════════════════════════════════════════════════════════════════ 夜游HAPPY小组 · 场所页共享样式 v2 （改这一份，全站生效）用法：主题 16：obsidian ivory neon burgundy emerald royal champagne copper rose forest graphite ocean amber violet porcelain steel 布局 6：showcase story split editorial cardgrid magazine ══════════════════════════════════════════════════════════════════════════ */ /* ── Layer 1 · 全局不变量 ────────────────────────────────────────────── */ :root{ --font-display:"Didot","Bodoni MT",Georgia,"Times New Roman",serif; --font-ui:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; --font-serif-cn:"Songti SC","STSong","SimSun",serif; --fs-hero:clamp(34px,6.6vw,84px); --fs-h1:clamp(28px,5vw,58px); --fs-h2:clamp(21px,3.3vw,38px); --fs-h3:clamp(16px,2.1vw,23px); --fs-lead:clamp(15px,1.9vw,19px); --fs-body:clamp(14px,1.5vw,16px); --fs-sm:clamp(12px,1.3vw,14px); --fs-micro:clamp(10px,1.05vw,12px); --fs-num:clamp(18px,2.5vw,28px); --ls-micro:.24em; --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px; --sp-7:32px;--sp-8:40px;--sp-9:56px;--sp-10:72px; --gutter:clamp(14px,4vw,32px); --maxw:1280px; --maxw-txt:64ch; --sec-y:clamp(54px,9.5vw,132px); /* 主题未提供时的兜底 */ --r-card:8px; --r-btn:999px; --r-img:8px; --r-pill:999px; --shadow-card:0 18px 44px rgba(0,0,0,.45); --shadow-lift:0 26px 58px rgba(0,0,0,.58); --glow:none; --img-filter:none; --ease:cubic-bezier(.22,.85,.25,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:.22s;--dur-2:.38s;--dur-3:.6s;--lift:-5px; } /* ── Layer 2 · 16 套主题 ─────────────────────────────────────────────── */ [data-theme="obsidian"]{--bg:#050505;--bg-elev:#0e0d0b;--bg-sunk:#000;--bg-tint:rgba(201,162,39,.07); --ink:#f2efe8;--ink-2:rgba(242,239,232,.76);--ink-3:rgba(242,239,232,.56); --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18); --accent:#c9a227;--accent-2:#e8cf8a;--on-accent:#0a0a0a;--metal:#e8cf8a; --r-card:2px;--r-btn:2px;--r-img:2px;--font-h:var(--font-serif-cn); --img-filter:saturate(.86) contrast(1.06) brightness(.95)} [data-theme="neon"]{--bg:#080b1f;--bg-elev:#111634;--bg-sunk:#050716;--bg-tint:rgba(34,224,255,.09); --ink:#eef2ff;--ink-2:rgba(238,242,255,.76);--ink-3:rgba(238,242,255,.56); --line:rgba(255,255,255,.10);--line-2:rgba(34,224,255,.34); --accent:#22e0ff;--accent-2:#ff2d95;--on-accent:#050716;--metal:#22e0ff; --r-card:18px;--r-btn:999px;--r-img:16px;--font-h:var(--font-ui); --glow:0 0 28px rgba(34,224,255,.42);--img-filter:saturate(1.22) contrast(1.1)} [data-theme="burgundy"]{--bg:#171513;--bg-elev:#211d1a;--bg-sunk:#0f0e0c;--bg-tint:rgba(125,35,56,.14); --ink:#ede8dd;--ink-2:rgba(237,232,221,.76);--ink-3:rgba(237,232,221,.56); --line:rgba(237,232,221,.13);--line-2:rgba(176,141,79,.40); --accent:#a83a52;--accent-2:#c9556d;--on-accent:#ede8dd;--metal:#b08d4f; --r-card:0;--r-btn:0;--r-img:0;--font-h:var(--font-display); --img-filter:sepia(.16) saturate(.92) contrast(1.08)} [data-theme="emerald"]{--bg:#061812;--bg-elev:#0c2620;--bg-sunk:#041210;--bg-tint:rgba(20,184,138,.09); --ink:#f0ede5;--ink-2:rgba(240,237,229,.76);--ink-3:rgba(240,237,229,.56); --line:rgba(255,255,255,.09);--line-2:rgba(230,181,61,.34); --accent:#2dd4a8;--accent-2:#5ee3c0;--on-accent:#041210;--metal:#e6b53d; --r-card:14px;--r-btn:999px;--r-img:12px;--font-h:var(--font-ui); --img-filter:saturate(1.05)} [data-theme="royal"]{--bg:#060b1a;--bg-elev:#0d1730;--bg-sunk:#040816;--bg-tint:rgba(212,175,55,.08); --ink:#eef1f8;--ink-2:rgba(238,241,248,.76);--ink-3:rgba(238,241,248,.56); --line:rgba(255,255,255,.10);--line-2:rgba(212,175,55,.34); --accent:#5b8ae8;--accent-2:#8fb4f2;--on-accent:#04101c;--metal:#d4af37; --r-card:8px;--r-btn:6px;--r-img:8px;--font-h:var(--font-serif-cn); --img-filter:saturate(.96) contrast(1.05)} [data-theme="champagne"]{--bg:#14100c;--bg-elev:#1e1811;--bg-sunk:#0d0a07;--bg-tint:rgba(227,201,160,.09); --ink:#f4ede2;--ink-2:rgba(244,237,226,.76);--ink-3:rgba(244,237,226,.56); --line:rgba(244,237,226,.13);--line-2:rgba(200,166,120,.38); --accent:#c8a678;--accent-2:#e3c9a0;--on-accent:#14100c;--metal:#e3c9a0; --r-card:10px;--r-btn:999px;--r-img:10px;--font-h:var(--font-display); --img-filter:sepia(.1) saturate(1.04) brightness(1.02)} [data-theme="copper"]{--bg:#16171a;--bg-elev:#1f2126;--bg-sunk:#101114;--bg-tint:rgba(180,97,31,.11); --ink:#ece9e4;--ink-2:rgba(236,233,228,.76);--ink-3:rgba(236,233,228,.56); --line:rgba(236,233,228,.12);--line-2:rgba(200,138,82,.40); --accent:#d98042;--accent-2:#e8a06d;--on-accent:#16171a;--metal:#c88a52; --r-card:4px;--r-btn:2px;--r-img:2px;--font-h:var(--font-ui); --img-filter:grayscale(.2) contrast(1.12)} [data-theme="rose"]{--bg:#17090f;--bg-elev:#23111a;--bg-sunk:#100609;--bg-tint:rgba(232,93,138,.10); --ink:#fbeef2;--ink-2:rgba(251,238,242,.76);--ink-3:rgba(251,238,242,.56); --line:rgba(251,238,242,.12);--line-2:rgba(232,93,138,.34); --accent:#e85d8a;--accent-2:#f58fb0;--on-accent:#17090f;--metal:#e8b4a0; --r-card:22px;--r-btn:999px;--r-img:20px;--font-h:var(--font-display); --glow:0 0 26px rgba(232,93,138,.30);--img-filter:saturate(1.12) brightness(1.04)} [data-theme="forest"]{--bg:#0d1410;--bg-elev:#16201a;--bg-sunk:#080d0a;--bg-tint:rgba(74,124,89,.10); --ink:#eaeee8;--ink-2:rgba(234,238,232,.76);--ink-3:rgba(234,238,232,.56); --line:rgba(234,238,232,.11);--line-2:rgba(201,169,97,.32); --accent:#6ba077;--accent-2:#8dbd97;--on-accent:#0d1410;--metal:#c9a961; --r-card:12px;--r-btn:999px;--r-img:12px;--font-h:var(--font-serif-cn); --img-filter:saturate(.96) brightness(.99)} [data-theme="graphite"]{--bg:#121212;--bg-elev:#1b1b1b;--bg-sunk:#0b0b0b;--bg-tint:rgba(255,255,255,.05); --ink:#f0f0f0;--ink-2:rgba(240,240,240,.76);--ink-3:rgba(240,240,240,.56); --line:rgba(255,255,255,.11);--line-2:rgba(255,255,255,.26); --accent:#e8e8e8;--accent-2:#ffffff;--on-accent:#0b0b0b;--metal:#b8b8b8; --r-card:0;--r-btn:0;--r-img:0;--font-h:var(--font-ui); --img-filter:grayscale(.9) contrast(1.1)} [data-theme="ocean"]{--bg:#04141c;--bg-elev:#0a2029;--bg-sunk:#020e14;--bg-tint:rgba(23,162,184,.10); --ink:#e8f4f7;--ink-2:rgba(232,244,247,.76);--ink-3:rgba(232,244,247,.56); --line:rgba(232,244,247,.11);--line-2:rgba(63,208,224,.32); --accent:#3fd0e0;--accent-2:#7ee4ef;--on-accent:#02121a;--metal:#e0a45c; --r-card:16px;--r-btn:999px;--r-img:16px;--font-h:var(--font-ui); --img-filter:saturate(1.1) hue-rotate(-4deg)} [data-theme="amber"]{--bg:#1a1008;--bg-elev:#251a0e;--bg-sunk:#120b05;--bg-tint:rgba(245,158,11,.10); --ink:#f6eee0;--ink-2:rgba(246,238,224,.76);--ink-3:rgba(246,238,224,.56); --line:rgba(246,238,224,.12);--line-2:rgba(251,191,36,.32); --accent:#f59e0b;--accent-2:#fbbf24;--on-accent:#17100a;--metal:#fbbf24; --r-card:8px;--r-btn:4px;--r-img:6px;--font-h:var(--font-display); --img-filter:sepia(.18) saturate(1.08) contrast(1.06)} [data-theme="violet"]{--bg:#10081c;--bg-elev:#1a1029;--bg-sunk:#0a0513;--bg-tint:rgba(139,92,246,.11); --ink:#f0ebfa;--ink-2:rgba(240,235,250,.76);--ink-3:rgba(240,235,250,.56); --line:rgba(240,235,250,.11);--line-2:rgba(167,139,250,.34); --accent:#a78bfa;--accent-2:#c4b5fd;--on-accent:#10081c;--metal:#c4b5fd; --r-card:20px;--r-btn:999px;--r-img:18px;--font-h:var(--font-ui); --glow:0 0 30px rgba(139,92,246,.32);--img-filter:saturate(1.15) contrast(1.05)} [data-theme="steel"]{--bg:#0f1316;--bg-elev:#171d22;--bg-sunk:#0a0d0f;--bg-tint:rgba(74,122,153,.10); --ink:#e9eef1;--ink-2:rgba(233,238,241,.76);--ink-3:rgba(233,238,241,.56); --line:rgba(233,238,241,.11);--line-2:rgba(159,179,192,.30); --accent:#6b9db8;--accent-2:#9fc6db;--on-accent:#0a0d0f;--metal:#9fb3c0; --r-card:4px;--r-btn:2px;--r-img:4px;--font-h:var(--font-ui); --img-filter:saturate(.9) contrast(1.1) brightness(.98)} [data-theme="ivory"]{--bg:#f7f5f0;--bg-elev:#ffffff;--bg-sunk:#efece4;--bg-tint:rgba(31,77,61,.06); --ink:#14130f;--ink-2:#5c5952;--ink-3:#8f8b82; --line:rgba(20,19,15,.10);--line-2:rgba(154,107,63,.34); --accent:#1f4d3d;--accent-2:#2f6b55;--on-accent:#ffffff;--metal:#9a6b3f; --r-card:18px;--r-btn:999px;--r-img:16px;--font-h:var(--font-ui); --shadow-card:0 10px 34px rgba(20,19,15,.08);--shadow-lift:0 20px 50px rgba(20,19,15,.13); --img-filter:saturate(1.02) brightness(1.03)} [data-theme="porcelain"]{--bg:#f2efe6;--bg-elev:#fbfaf6;--bg-sunk:#e8e4d8;--bg-tint:rgba(61,107,92,.07); --ink:#1c2420;--ink-2:#5a635e;--ink-3:#8b938e; --line:rgba(28,36,32,.11);--line-2:rgba(168,63,50,.30); --accent:#3d6b5c;--accent-2:#4f8874;--on-accent:#ffffff;--metal:#a83f32; --r-card:6px;--r-btn:4px;--r-img:4px;--font-h:var(--font-serif-cn); --shadow-card:0 8px 28px rgba(28,36,32,.07);--shadow-lift:0 16px 42px rgba(28,36,32,.12); --img-filter:saturate(.96) brightness(1.02)} /* ── Layer 3 · 布局节奏 ─────────────────────────────────────────────── */ [data-layout="showcase"] {--maxw:1220px;--sec-y:clamp(52px,9vw,124px)} [data-layout="story"] {--maxw:1080px;--sec-y:clamp(58px,10vw,140px)} [data-layout="split"] {--maxw:1280px;--sec-y:clamp(48px,8vw,112px)} [data-layout="editorial"]{--maxw:920px; --sec-y:clamp(66px,12vw,164px);--maxw-txt:62ch} [data-layout="cardgrid"] {--maxw:1320px;--sec-y:clamp(46px,8vw,108px)} [data-layout="magazine"] {--maxw:1360px;--sec-y:clamp(60px,10vw,150px)} /* ══ 全局重置 ══════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} /* ⚠️ 只能 clip，绝不能 hidden —— 否则手机端吃滚动 */ html{overflow-x:clip;-webkit-text-size-adjust:100%} body{overflow-x:clip;margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.78;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} .num{font-variant-numeric:tabular-nums lining-nums} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .wrap-n{max-width:1080px} .wrap-t{max-width:820px} .section{padding:var(--sec-y) 0} .band-sunk{background:var(--bg-sunk)} .band-elev{background:var(--bg-elev)} .band-tint{background:linear-gradient(165deg,var(--bg-elev),var(--bg))} /* ── 章节头 ─────────────────────────────────────────────────────────── */ .ord{font-family:var(--font-h);font-size:clamp(38px,6vw,76px);line-height:1; color:transparent;-webkit-text-stroke:1px var(--line-2);display:block;margin-bottom:var(--sp-3)} .sec-kicker{display:inline-block;font-size:var(--fs-micro);font-weight:700; letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)} .sec-t{font-family:var(--font-h);font-size:var(--fs-h2);line-height:1.16;font-weight:400; color:var(--ink);margin:0;letter-spacing:.02em} .sec-t b{font-weight:400;color:var(--accent-2)} .sec-sub{color:var(--ink-2);font-size:var(--fs-lead);margin:var(--sp-4) 0 0;max-width:var(--maxw-txt)} .sec-head{margin-bottom:clamp(28px,4.5vw,60px)} .sec-head.center{text-align:center} .center .sec-sub{margin-inline:auto} .hr{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);border:0;margin:var(--sp-7) 0} /* ── 顶部品牌区 · 全站锁定 · 不许改 ────────────────────────────────── */ .brand-row{display:flex;align-items:center;justify-content:center; gap:clamp(8px,2.2vw,16px);margin-bottom:clamp(22px,3vw,32px);padding:0 8px;flex-wrap:nowrap} .wordmark{display:inline-flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0} .wordmark-main{display:flex;align-items:baseline;gap:0} .wordmark-main .cn{font-size:clamp(20px,6.2vw,32px);font-weight:900;color:var(--ink); letter-spacing:clamp(1px,.5vw,2px)} .wordmark-main .en{font-size:clamp(9px,2.5vw,13px);font-weight:200;color:var(--ink-3); letter-spacing:clamp(4px,2.4vw,12px);margin-left:clamp(6px,2vw,14px);text-transform:uppercase} .wordmark-sub{display:flex;align-items:center;gap:clamp(6px,2vw,10px)} .wordmark-sub .line{width:clamp(14px,4.5vw,28px);height:1px; background:color-mix(in srgb,var(--metal) 25%,transparent)} .wordmark-sub .text{font-size:clamp(7px,1.8vw,10px);font-weight:300;color:var(--metal); letter-spacing:clamp(3px,1.5vw,7px);white-space:nowrap} .flag-badge{flex-shrink:0;display:inline-flex;align-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent), color-mix(in srgb,var(--metal) 12%,transparent)); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent-2); padding:5px clamp(10px,2.6vw,16px);border-radius:100px;font-size:clamp(8px,2vw,11px); font-weight:700;letter-spacing:clamp(.2em,.6vw,.4em);text-transform:uppercase;white-space:nowrap} /* ══ HERO 五种变体 ═════════════════════════════════════════════════════ */ .hero{position:relative} .hero-top{padding:clamp(26px,4vw,44px) 0 clamp(18px,3vw,28px)} .hero-title{font-family:var(--font-h);font-size:var(--fs-hero);line-height:1.03;font-weight:400; margin:0;color:var(--ink);letter-spacing:.02em;max-width:15ch} .hero-cn{font-family:var(--font-serif-cn);font-size:clamp(16px,2.5vw,26px);color:var(--accent-2); margin-top:var(--sp-4);letter-spacing:.16em;font-weight:600} .hero-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-5); font-size:var(--fs-sm);color:var(--ink-2);letter-spacing:.08em} .hero-meta span{display:inline-flex;align-items:center;gap:.5em} .hero-meta i{width:4px;height:4px;background:var(--accent);border-radius:50%;font-style:normal;flex:0 0 auto} /* A · photo —— 满宽图 + 标题压左下（magazine / showcase） */ .hero--photo .hero-media{position:relative;height:clamp(360px,64vh,640px);overflow:hidden} .hero--photo .hero-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)} .hero--photo .hero-media::after{content:"";position:absolute;inset:0; background:linear-gradient(85deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 74%,transparent) 42%, color-mix(in srgb,var(--bg) 22%,transparent) 72%,transparent 100%), linear-gradient(0deg,var(--bg),transparent 46%)} .hero--photo .hero-body{position:absolute;inset:auto 0 clamp(26px,5vw,60px) 0;z-index:2} /* B · split —— 左字右图（split / story） */ .hero--split .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px); align-items:center;padding-bottom:clamp(30px,5vw,64px)} .hero--split .hero-media{position:relative;border-radius:var(--r-img);overflow:hidden; aspect-ratio:4/3;box-shadow:var(--shadow-card)} .hero--split .hero-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)} /* C · editorial —— 纯排版无图（editorial） */ .hero--edit{padding-bottom:clamp(34px,6vw,80px);text-align:center} .hero--edit .hero-title{max-width:none;margin-inline:auto} .hero--edit .hero-meta{justify-content:center} .hero--edit .rule{width:min(100%,340px);height:1px;margin:clamp(24px,4vw,40px) auto 0; background:linear-gradient(90deg,transparent,var(--line-2),transparent)} /* D · float —— 图上浮卡（cardgrid） */ .hero--float .hero-media{position:relative;height:clamp(320px,54vh,540px);overflow:hidden} .hero--float .hero-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)} .hero--float .hero-media::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,var(--bg),color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent)} .hero--float .hero-card{position:relative;z-index:2;margin-top:clamp(-120px,-9vw,-70px); background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-card); padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-lift)} /* E · glow —— 光晕纯色（story） */ .hero--glow{padding-bottom:clamp(30px,5vw,64px);position:relative;overflow:hidden} .hero--glow::before{content:"";position:absolute;top:-30%;left:50%;width:min(120vw,1000px); height:min(120vw,1000px);transform:translateX(-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle,var(--bg-tint),transparent 62%)} .hero--glow .hero-in{position:relative;z-index:1} /* ── 图文分栏 ───────────────────────────────────────────────────────── */ .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4.5vw,72px);align-items:center} .split--even{grid-template-columns:1fr 1fr} .split--rev>*:first-child{order:2} .split img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-img);filter:var(--img-filter)} .split figure{margin:0;position:relative;border-radius:var(--r-img);overflow:hidden} .lead-p{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.9} .lead-p+.lead-p{margin-top:var(--sp-4)} .lead-p b{color:var(--ink);font-weight:600} /* ── 数据带 ─────────────────────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(16px,2.4vw,30px)} .stat{text-align:center;padding:0 var(--sp-3)} .stat-n{font-family:var(--font-h);font-size:clamp(26px,4.2vw,50px);font-weight:400; color:var(--accent-2);line-height:1} .stat-l{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase; color:var(--ink-3);margin-top:var(--sp-3)} /* ── 画廊三变体 ─────────────────────────────────────────────────────── */ .gal{display:grid;gap:clamp(8px,1.3vw,14px)} .gal figure{margin:0;overflow:hidden;border-radius:var(--r-img);aspect-ratio:3/2; border:1px solid var(--line);position:relative} .gal img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter); transition:transform var(--dur-3) var(--ease)} .gal figure:hover img{transform:scale(1.04)} .gal--mosaic{grid-template-columns:repeat(3,1fr)} .gal--mosaic figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} .gal--grid{grid-template-columns:repeat(3,1fr)} .gal--duo{grid-template-columns:repeat(2,1fr)} .gal--tall figure{aspect-ratio:3/4} .gal .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 14px 11px; font-size:var(--fs-micro);letter-spacing:.1em;color:var(--ink); background:linear-gradient(0deg,color-mix(in srgb,var(--bg-sunk) 88%,transparent),transparent)} /* 横滚画廊（cardgrid 专用）—— 必须带 touch-action，否则手机吃滚动 */ .hscroll{display:flex;gap:clamp(10px,1.5vw,16px);overflow-x:auto;overflow-y:hidden; touch-action:pan-x;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity; padding-bottom:var(--sp-3);scrollbar-width:thin} .hscroll::-webkit-scrollbar{height:4px} .hscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px} .hscroll figure{margin:0;flex:0 0 clamp(240px,42vw,400px);scroll-snap-align:start; border-radius:var(--r-img);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;position:relative} .hscroll img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)} /* ── 防保存 ─────────────────────────────────────────────────────────── */ .noSave{position:relative} .noSave img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none; -webkit-user-drag:none;pointer-events:none} .noSave .shield{position:absolute;inset:0;z-index:3;background:transparent; -webkit-touch-callout:none;user-select:none} /* ══ 价目组件 ══════════════════════════════════════════════════════════ */ /* A · 档位卡 */ .tier{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:clamp(12px,1.8vw,20px)} .tier .t{position:relative;padding:clamp(22px,3vw,34px);border-radius:var(--r-card); border:1px solid var(--line);background:var(--bg-elev); transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)} .tier .t:hover{transform:translateY(var(--lift));border-color:var(--accent)} .tier .t.best{border-color:var(--accent); background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 12%,var(--bg-elev)),var(--bg-elev))} .tier .badge{position:absolute;top:0;right:var(--sp-5);transform:translateY(-50%); background:var(--accent);color:var(--on-accent);font-size:var(--fs-micro);font-weight:800; letter-spacing:.1em;padding:.35em .9em;border-radius:999px;white-space:nowrap} .tier .n{font-family:var(--font-h);font-size:var(--fs-h3);color:var(--ink)} .tier .n small{display:block;font-family:var(--font-ui);font-size:var(--fs-micro); letter-spacing:.16em;color:var(--ink-3);font-weight:600;margin-top:6px;text-transform:uppercase} .tier .amt{font-size:var(--fs-num);font-weight:800;color:var(--accent-2);margin:var(--sp-4) 0 var(--sp-2)} .tier .amt .u{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600;margin-left:4px} .tier .s{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.65} /* B · 细线账目 */ .ledger{border-top:1px solid var(--line)} .ledger .row{display:flex;align-items:baseline;gap:var(--sp-5); padding:clamp(15px,2vw,22px) 0;border-bottom:1px solid var(--line)} .ledger .lft{flex:1;min-width:0} .ledger .n{font-size:var(--fs-h3);color:var(--ink);font-family:var(--font-h)} .ledger .s{font-size:var(--fs-sm);color:var(--ink-3);margin-top:5px;font-family:var(--font-ui)} .ledger .amt{font-size:var(--fs-num);font-weight:800;color:var(--accent-2);white-space:nowrap} /* C · 酒单式 */ .menu{columns:2;column-gap:clamp(30px,5vw,80px)} .menu--1{columns:1} .menu .grp{break-inside:avoid;margin-bottom:var(--sp-8)} .menu .cat{font-family:var(--font-h);font-size:var(--fs-h3);color:var(--accent-2); letter-spacing:.08em;padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-2); margin-bottom:var(--sp-4)} .menu .row{display:flex;align-items:flex-end;gap:var(--sp-2);padding:7px 0} .menu .n{color:var(--ink-2);font-size:var(--fs-sm)} .menu .n em{font-style:normal;color:var(--ink-3)} .menu .dots{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-.3em);min-width:16px} .menu .amt{color:var(--metal);font-weight:700;white-space:nowrap;font-size:var(--fs-sm)} /* D · 房号表（有具体房号的场子用）—— 横向可滚，不吃纵向滚动 */ .rooms{overflow-x:auto;touch-action:pan-x;-webkit-overflow-scrolling:touch} .rooms table{width:100%;min-width:440px;border-collapse:collapse;font-size:var(--fs-sm)} .rooms th{text-align:left;font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--ink-3);font-weight:700; padding:0 var(--sp-4) var(--sp-3);border-bottom:1px solid var(--line-2)} .rooms td{padding:clamp(13px,1.8vw,18px) var(--sp-4);border-bottom:1px solid var(--line); color:var(--ink-2);vertical-align:middle} .rooms tr:hover td{background:var(--bg-tint)} .rooms .rn{color:var(--ink);font-weight:700;font-family:var(--font-h);font-size:var(--fs-h3)} .rooms .rp{color:var(--accent-2);font-weight:800;white-space:nowrap;text-align:right; font-size:clamp(15px,1.9vw,20px)} .rooms th:last-child{text-align:right} /* ── 说明框 ─────────────────────────────────────────────────────────── */ .note{margin-top:var(--sp-7);padding:clamp(18px,2.6vw,26px); background:linear-gradient(90deg,var(--bg-tint),transparent); border-left:2px solid var(--accent);border-radius:0 var(--r-card) var(--r-card) 0} .note .h{font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;color:var(--accent-2); margin-bottom:var(--sp-3);text-transform:uppercase} .note p{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.8} .note b{color:var(--ink)} /* ── 亮点标签 / 流程 ────────────────────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:var(--sp-3)} .chip{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:999px; border:1px solid var(--line-2);color:var(--ink-2);font-size:var(--fs-sm);background:var(--bg-elev)} .chip i{font-style:normal;color:var(--accent)} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2.4vw,28px); counter-reset:st} .step{position:relative;padding-top:var(--sp-6);border-top:2px solid var(--line-2);counter-increment:st} .step::before{content:counter(st,decimal-leading-zero);position:absolute;top:var(--sp-5);right:0; font-family:var(--font-h);font-size:clamp(28px,3.6vw,44px);line-height:1; color:transparent;-webkit-text-stroke:1px var(--line-2)} .step .t{font-size:var(--fs-h3);color:var(--ink);font-family:var(--font-h);margin-bottom:var(--sp-2)} .step .d{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7;max-width:26ch} /* ══ ★ 订房折扣区块 —— 全站必加 ═══════════════════════════════════════ */ .deal{position:relative;overflow:hidden;border-radius:var(--r-card); border:1px solid color-mix(in srgb,var(--accent) 42%,transparent); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--bg-elev)),var(--bg-elev) 62%); padding:clamp(26px,4vw,52px);box-shadow:var(--shadow-card)} .deal::before{content:"";position:absolute;top:-55%;right:-14%;width:min(64vw,460px);height:min(64vw,460px); border-radius:50%;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%)} .deal-in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr; gap:clamp(22px,3.4vw,52px);align-items:center} .deal-tag{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:var(--on-accent); font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase; padding:.42em 1em;border-radius:999px;margin-bottom:var(--sp-4)} .deal-t{font-family:var(--font-h);font-size:clamp(22px,3.4vw,40px);line-height:1.2; color:var(--ink);margin:0;font-weight:400} .deal-t b{color:var(--accent-2);font-weight:400} .deal-p{color:var(--ink-2);font-size:var(--fs-body);margin:var(--sp-4) 0 0;line-height:1.85;max-width:46ch} .deal-list{list-style:none;padding:0;margin:var(--sp-5) 0 0;display:flex;flex-wrap:wrap; gap:var(--sp-3) var(--sp-6)} .deal-list li{display:flex;align-items:center;gap:.5em;font-size:var(--fs-sm);color:var(--ink-2)} .deal-list li::before{content:"✓";color:var(--accent);font-weight:800;flex:0 0 auto} .deal-cta{display:flex;flex-direction:column;gap:var(--sp-3);align-items:stretch} .deal-note{font-size:var(--fs-micro);color:var(--ink-3);text-align:center;line-height:1.7} /* ══ ★ 常驻悬浮客服钮 ═════════════════════════════════════════════════ 独立站可用 fixed（Wix iframe 才有那条禁令）。不监听 scroll、不改布局，只用 transform/opacity —— 不会吃滚动。 */ .fab{position:fixed;right:clamp(12px,2.4vw,26px);bottom:clamp(14px,2.6vw,28px);z-index:60; display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.25em;border-radius:999px; background:#2aabee;color:#fff;font-size:var(--fs-sm);font-weight:800;letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.10) inset; transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease); -webkit-tap-highlight-color:transparent;will-change:transform} .fab:hover{transform:translateY(-3px);filter:brightness(1.08)} .fab .ico{font-size:1.15em;line-height:1} .fab .dot{width:7px;height:7px;border-radius:50%;background:#5cff9d;flex:0 0 auto; box-shadow:0 0 0 3px rgba(92,255,157,.24)} /* ── FAQ ────────────────────────────────────────────────────────────── */ .faq details{border-bottom:1px solid var(--line)} .faq summary{padding:clamp(16px,2.2vw,22px) 0;cursor:pointer;list-style:none; font-family:var(--font-h);font-size:var(--fs-h3);color:var(--ink); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-size:1.2em;flex:0 0 auto; transition:transform var(--dur-1) var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{padding:0 0 clamp(16px,2.2vw,22px);color:var(--ink-2);line-height:1.9;max-width:var(--maxw-txt)} /* ── 表单 ───────────────────────────────────────────────────────────── */ .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} .field{display:flex;flex-direction:column;gap:var(--sp-2)} .field.full{grid-column:1/-1} .field label{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase; color:var(--ink-3);font-weight:700} .field input,.field select,.field textarea{width:100%;padding:.85em 1em;background:var(--bg-sunk); color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);font-family:inherit; font-size:var(--fs-body);min-height:46px;transition:border-color var(--dur-1) var(--ease)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field textarea{min-height:96px;resize:vertical} .field ::placeholder{color:var(--ink-3)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:1.1em 2.2em; border-radius:var(--r-btn);font-size:var(--fs-body);font-weight:800;letter-spacing:.06em; border:1px solid transparent;cursor:pointer;min-height:54px;width:100%;text-align:center; background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent); transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease); -webkit-tap-highlight-color:transparent} .btn:hover{transform:translateY(-2px);filter:brightness(1.06)} .btn--tg{background:#2aabee;color:#fff} .form-hint{font-size:var(--fs-sm);color:var(--ink-3);margin-top:var(--sp-4);line-height:1.7;text-align:center} /* ── CTA 四按钮（品牌不变量）────────────────────────────────────────── */ .contact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);max-width:820px; margin:var(--sp-7) auto 0} .btn-c{display:flex;align-items:center;justify-content:center;gap:.5em;padding:1em .8em; border-radius:var(--r-btn);font-size:var(--fs-sm);font-weight:800;min-height:52px; transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease); -webkit-tap-highlight-color:transparent} .btn-c:hover{transform:translateY(-3px);filter:brightness(1.1)} .btn-c .ico{font-size:1.15em} .btn-tg-main{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent)} .btn-tg-cs{background:#2aabee;color:#fff} .btn-line{background:#06c755;color:#fff} .btn-x{background:var(--ink);color:var(--bg)} /* ── 推荐区 ─────────────────────────────────────────────────────────── */ .reco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.7vw,18px); max-width:1100px;margin:0 auto} .reco-card{display:flex;flex-direction:column;gap:8px;background:var(--bg-elev); border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(18px,2.4vw,24px); transition:transform .3s var(--ease),border-color .3s var(--ease);position:relative;overflow:hidden} .reco-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px; background:linear-gradient(90deg,var(--accent),transparent);opacity:0;transition:opacity .3s} .reco-card:hover{transform:translateY(-5px);border-color:var(--line-2)} .reco-card:hover::before{opacity:1} .reco-ico{font-size:clamp(23px,3vw,30px);line-height:1} .reco-title{font-size:clamp(14px,1.7vw,17px);font-weight:800;color:var(--ink)} .reco-desc{font-size:clamp(11px,1.3vw,13px);color:var(--ink-3);line-height:1.6;flex:1} .reco-more{font-size:clamp(11px,1.3vw,13px);font-weight:700;color:var(--accent-2);margin-top:4px; display:inline-flex;align-items:center;gap:5px} .reco-more::after{content:"\2192";transition:transform .2s} .reco-card:hover .reco-more::after{transform:translateX(4px)} /* ── 页脚 ───────────────────────────────────────────────────────────── */ .foot{padding:var(--sp-9) 0 calc(var(--sp-10) + 40px);border-top:1px solid var(--line); text-align:center;color:var(--ink-3);font-size:var(--fs-sm)} .foot .disc{margin-top:var(--sp-3);font-size:var(--fs-micro);line-height:1.8} .foot a{color:var(--ink-2);border-bottom:1px solid var(--line-2)} /* ── 入场动画 · CSS 保险 ────────────────────────────────────────────── */ .reveal{opacity:1;transform:none} html.js-anim .reveal{opacity:0;transform:translateY(16px); transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)} html.js-anim .reveal.in{opacity:1;transform:none} /* ══ 响应式 ════════════════════════════════════════════════════════════ */ @media (max-width:900px){ .menu{columns:1} .split,.split--even,.hero--split .hero-in{grid-template-columns:1fr;gap:var(--sp-6)} .split--rev>*:first-child{order:0} .gal--mosaic,.gal--grid{grid-template-columns:repeat(2,1fr)} .gal--mosaic figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:3/2} .reco-grid{grid-template-columns:repeat(2,1fr)} .deal-in{grid-template-columns:1fr;gap:var(--sp-6)} } @media (max-width:600px){ :root{--gutter:14px} [data-layout]{--sec-y:clamp(38px,7.5vw,52px)} .hero--photo .hero-media{height:clamp(300px,52vh,400px)} .hero--float .hero-media{height:clamp(230px,40vh,320px)} .hero--float .hero-card{margin-top:-46px} .hero-top{padding:22px 0 16px} .tier,.form-grid,.gal--mosaic,.gal--grid,.gal--duo{grid-template-columns:1fr} .gal--mosaic figure:first-child{grid-column:auto} .contact-row{grid-template-columns:repeat(2,1fr);gap:8px} .btn-c{min-height:48px;font-size:12px;padding:.85em .6em} .sec-head{margin-bottom:22px} .ledger .row{flex-wrap:wrap;gap:8px} .ledger .amt{font-size:19px} .tier .t{padding:18px} /* 房号表：手机上横滚会把价格列切掉，改成每行一张卡纵向堆叠 */ .rooms{overflow-x:visible;touch-action:auto} .rooms table{min-width:0;display:block} .rooms thead{display:none} .rooms tbody{display:block} .rooms tr{display:block;padding:15px 0;border-bottom:1px solid var(--line)} .rooms tr:last-child{border-bottom:0} .rooms td{display:block;border:0;padding:3px 0;text-align:left} .rooms .rn{font-size:17px} .rooms .rp{text-align:left;margin-top:8px;font-size:19px} .deal{padding:22px 18px} .deal-list{gap:8px 18px} .fab{padding:.75em 1em;font-size:12px} /* 手机端关闭入场动画 —— 首屏不做逐块淡入 */ html.js-anim .reveal{opacity:1!important;transform:none!important;transition:none!important} /* 长区块屏外不渲染 */ .section{content-visibility:auto;contain-intrinsic-size:auto 620px} } @media (max-width:380px){ :root{--gutter:12px} .btn-c{font-size:11px;min-height:44px} .fab .txt{display:none} .fab{padding:.85em;border-radius:50%} } /* ── 触屏：取消 hover，改用 :active ────────────────────────────────── */ @media (hover:none),(pointer:coarse){ .tier .t:hover,.reco-card:hover,.btn:hover,.btn-c:hover,.fab:hover{transform:none;filter:none} .tier .t:hover{border-color:var(--line)} .tier .t.best:hover{border-color:var(--accent)} .reco-card:hover{border-color:var(--line)} .reco-card:hover::before{opacity:0} .reco-card:hover .reco-more::after{transform:none} .gal figure:hover img{transform:none} .rooms tr:hover td{background:transparent} .btn:active,.btn-c:active,.fab:active{filter:brightness(.92)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ══ 主站导航 · 全站统一 ══════════════════════════════════════════ 独立站需要自己的导航（iframe 时代靠 Wix 外层，现在没有外层了）。 ⚠️ 刻意不做 sticky/fixed —— 移动端滚动时固定元素会持续参与合成，是 iframe 页卡顿的同源问题。跟着滚走最稳，也不吃滚动。 */ .topnav{background:var(--bg-sunk);border-bottom:1px solid var(--line)} .topnav .in{max-width:var(--maxw);margin:0 auto;padding:10px var(--gutter); display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px} .topnav a{display:inline-flex;align-items:center;gap:.35em; padding:7px 14px;border-radius:999px;border:1px solid var(--line-2); font-size:clamp(11px,1.3vw,13px);font-weight:600;letter-spacing:.06em;color:var(--ink-2); transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);white-space:nowrap; -webkit-tap-highlight-color:transparent} .topnav a::after{content:"›";color:var(--accent);font-weight:700} .topnav a:hover{color:var(--ink);border-color:var(--accent);background:var(--bg-tint)} .topnav a.home{border-color:var(--accent);color:var(--accent-2)} /* 页脚里的同款链接（纯文字，不抢眼） */ .footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px; margin-bottom:var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid var(--line)} .footnav a{font-size:var(--fs-sm);color:var(--ink-2);letter-spacing:.06em; transition:color var(--dur-1) var(--ease)} .footnav a:hover{color:var(--accent-2)} @media (max-width:600px){ .topnav .in{padding:8px 10px;gap:5px} .topnav a{padding:6px 10px;font-size:11px;letter-spacing:.02em} .footnav{gap:8px 14px} } @media (hover:none),(pointer:coarse){ .topnav a:hover{color:var(--ink-2);border-color:var(--line-2);background:transparent} .topnav a:active{background:var(--bg-tint)} .footnav a:hover{color:var(--ink-2)} } /* ══ 手机版侧边栏抽屉 ══════════════════════════════════════════════ 桌面保持胶囊按钮条；≤600px 收成汉堡按钮 + 右侧滑出抽屉。 ⚠️ 性能安全：关闭时 visibility:hidden + pointer-events:none，元素完全退出合成，不像常驻 fixed 那样每帧都要算。 ⚠️ 绝不锁 body 滚动（不碰 overflow / 不给 body 加 position:fixed）—— 那类做法一旦 JS 出错，整页会卡死滚不动。宁可背景能滚。 */ .navbtn{display:none;align-items:center;gap:.5em;padding:8px 14px;border-radius:999px; border:1px solid var(--line-2);background:transparent;color:var(--ink-2); font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer; -webkit-tap-highlight-color:transparent} .navbtn .bars{display:inline-flex;flex-direction:column;gap:3px} .navbtn .bars i{display:block;width:15px;height:1.5px;background:var(--accent);border-radius:2px} .drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none} .drawer.open{visibility:visible;pointer-events:auto} .drawer-mask{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0; transition:opacity .3s var(--ease)} .drawer.open .drawer-mask{opacity:1} .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(78vw,300px); background:var(--bg-sunk);border-left:1px solid var(--line-2); padding:22px 20px;display:flex;flex-direction:column;gap:6px; transform:translateX(100%);transition:transform .32s var(--ease-out); overscroll-behavior:contain;overflow-y:auto} .drawer.open .drawer-panel{transform:translateX(0)} .drawer-head{display:flex;align-items:center;justify-content:space-between; padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--line)} .drawer-head .t{font-size:12px;letter-spacing:.24em;color:var(--accent);font-weight:700; text-transform:uppercase} .drawer-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2); background:transparent;color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent} .drawer-panel a{display:flex;align-items:center;justify-content:space-between; padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink); font-size:15px;font-weight:600;letter-spacing:.04em} .drawer-panel a::after{content:"›";color:var(--accent);font-size:18px} .drawer-panel a:active{color:var(--accent-2)} .drawer-foot{margin-top:auto;padding-top:18px;font-size:11px;color:var(--ink-3); letter-spacing:.1em;text-align:center} @media (max-width:600px){ .topnav .in{display:none} .topnav{display:flex;align-items:center;justify-content:space-between; padding:8px var(--gutter)} .topnav .brand-mini{font-size:12px;letter-spacing:.16em;color:var(--ink-3);font-weight:700} .navbtn{display:inline-flex} } /* ══ 主站导航 · 全站统一 ═══════════════════════════════════════════════ 独立站需要自己的导航（iframe 时代靠 Wix 外层，现在没有外层了）。 ⚠️ 刻意不做 sticky/fixed —— 移动端滚动时固定元素会持续参与合成。跟着滚走最稳。 ⚠️ 刻意不做手机抽屉 —— 抽屉要 position:fixed + 纵向滚动容器，双端自检必挂；胶囊条本来就会 flex-wrap，手机上换两行反而一眼看全，不用点两下。 */ .topnav{background:var(--bg-sunk);border-bottom:1px solid var(--line)} .topnav .in{max-width:var(--maxw);margin:0 auto;padding:10px var(--gutter); display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px} .topnav a{display:inline-flex;align-items:center;gap:.35em; padding:7px 14px;border-radius:999px;border:1px solid var(--line-2); font-size:clamp(11px,1.3vw,13px);font-weight:600;letter-spacing:.06em;color:var(--ink-2); transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);white-space:nowrap; -webkit-tap-highlight-color:transparent} .topnav a::after{content:"\203A";color:var(--accent);font-weight:700} .topnav a:hover{color:var(--ink);border-color:var(--accent);background:var(--bg-tint)} .topnav a.home{border-color:var(--accent);color:var(--accent-2)} /* 页脚里的同款链接（纯文字，不抢眼） */ .footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px; margin-bottom:var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid var(--line)} .footnav a{font-size:var(--fs-sm);color:var(--ink-2);letter-spacing:.06em; transition:color var(--dur-1) var(--ease)} .footnav a:hover{color:var(--accent-2)} @media (max-width:600px){ .topnav .in{padding:8px 10px;gap:5px} .topnav a{padding:6px 10px;font-size:11px;letter-spacing:.02em} .footnav{gap:8px 14px} } @media (hover:none),(pointer:coarse){ .topnav a:hover{color:var(--ink-2);border-color:var(--line-2);background:transparent} .topnav a:active{background:var(--bg-tint)} .footnav a:hover{color:var(--ink-2)} }