kangshifu-board/legacy/css/base.css

/* ==========================================================================
   基础排版 & 布局骨架（v3）
   - 光场 .ambient：四团色光 + 左上斜下的天光，极缓漂移（尊重 reduced-motion）
   - 噪点 .grain：细颗粒，让玻璃像材质而不是纯渐变
   - 侧栏/顶栏：整片玻璃（L3），与内容区背景形成"浮在上面的玻璃层"
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:14px;line-height:1.55;color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:8px}
::selection{background:rgba(29,92,240,.16)}

/* 数字：等宽数字保证列对齐；小单位用自己的字号层级 */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ta-r{text-align:right}

/* ---------- 光场（装饰层，永不承载内容） ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient::before{
  /* 从左上斜下的天光：这是"光源"本身 */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 32%, rgba(255,255,255,0) 62%);
}
.ambient i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.ambient .b1{width:62vw;height:52vw;left:-16vw;top:-18vw;background:radial-gradient(circle at 40% 40%,rgba(122,167,255,.55),rgba(122,167,255,0) 68%);animation:drift1 46s ease-in-out infinite alternate}
.ambient .b2{width:48vw;height:44vw;right:-12vw;top:-14vw;background:radial-gradient(circle at 50% 50%,rgba(227,211,255,.75),rgba(227,211,255,0) 66%);animation:drift2 58s ease-in-out infinite alternate}
.ambient .b3{width:52vw;height:46vw;left:-8vw;bottom:-26vw;background:radial-gradient(circle at 50% 50%,rgba(159,240,212,.55),rgba(159,240,212,0) 66%);animation:drift3 52s ease-in-out infinite alternate}
.ambient .b4{width:46vw;height:40vw;right:-10vw;bottom:-22vw;background:radial-gradient(circle at 50% 50%,rgba(255,225,194,.7),rgba(255,225,194,0) 66%);animation:drift4 64s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(6vw,4vw,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-5vw,6vw,0) scale(.94)}}
@keyframes drift3{to{transform:translate3d(7vw,-4vw,0) scale(1.06)}}
@keyframes drift4{to{transform:translate3d(-6vw,-5vw,0) scale(.95)}}

/* 噪点：用 SVG 湍流生成，极淡叠加 */
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ---------- 应用骨架 ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}

/* 侧栏：整片玻璃（L3）。边缘发丝边用伪元素画成渐变，上亮下暗 */
.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  padding:22px 14px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.40));
  -webkit-backdrop-filter:var(--blur-3);backdrop-filter:var(--blur-3);
  border-right:1px solid rgba(255,255,255,.55);
  box-shadow:var(--light-top),var(--lift-1);
}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 20px}
.brand .mark{
  width:28px;height:28px;border-radius:9px;flex:none;position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.45) 55%,rgba(160,185,255,.55));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--light-top),0 6px 14px -8px rgba(32,48,90,.35),inset 0 -6px 10px -6px rgba(122,167,255,.55);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--ink);
}
.brand .name{font-size:14.5px;font-weight:600;letter-spacing:.1px;line-height:1.25}
.brand .sub{font-size:11px;color:var(--ink-3);margin-top:1px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-group{font-size:11px;color:var(--ink-4);padding:16px 12px 6px;letter-spacing:.6px}
.nav a{
  display:flex;align-items:center;gap:9px;position:relative;
  padding:8px 12px;border-radius:11px;
  color:var(--ink-2);font-size:13.5px;text-decoration:none;
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.nav a svg{width:15px;height:15px;opacity:.55;flex:none;margin-left:-2px}
.nav a:hover{background:rgba(255,255,255,.42);color:var(--ink);text-decoration:none}
.nav a:hover svg{opacity:.85}
.nav a.on svg{opacity:1;color:var(--accent)}
.nav a.on{
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  color:var(--ink);
  border-color:rgba(255,255,255,.95);
  box-shadow:var(--light-top),0 6px 16px -12px rgba(32,48,90,.4);
}
.nav a.on::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--accent);box-shadow:var(--accent-glow)}
.nav a .cnt{margin-left:auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.nav a.on .cnt{color:var(--ink-3)}
.side .foot{margin-top:auto;padding:12px 12px 0;border-top:1px solid var(--rule);font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:none}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px rgba(20,122,85,.14)}
.dot.syncing{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}
.dot.err{background:var(--risk)}
@keyframes pulse{50%{opacity:.35}}

/* 主区 */
.main{min-width:0;display:flex;flex-direction:column}

/* 顶栏：同一片玻璃；滚动时内容从下面透过去 */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  min-height:var(--topbar);padding:0 clamp(20px,3vw,40px);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.44));
  -webkit-backdrop-filter:var(--blur-3);backdrop-filter:var(--blur-3);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:var(--light-top),0 10px 30px -24px rgba(32,48,90,.35);
}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);min-width:0}
.crumb a{color:var(--ink-3)}
.crumb .sep{color:var(--ink-4)}
.crumb .now{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42ch}
.topbar .tools{margin-left:auto;display:flex;align-items:center;gap:10px}

/* 搜索 */
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.search input{
  width:260px;height:36px;padding:0 34px 0 34px;border-radius:11px;
  border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.42);
  box-shadow:var(--light-top),inset 0 1px 2px rgba(32,48,90,.05);
  font-size:13px;outline:none;transition:background .2s,border-color .2s,box-shadow .2s;
}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.98);box-shadow:var(--light-top),0 0 0 3px var(--accent-wash),0 1px 2px rgba(32,48,90,.05)}
.search .clear{position:absolute;right:6px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.search .clear:hover{background:rgba(24,34,56,.07)}

/* 内容区 */
.view{padding:clamp(22px,3vw,40px) clamp(20px,3vw,40px) 80px;max-width:1560px;width:100%;margin:0 auto}
.view-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.view-head h1{font-size:24px;font-weight:600;letter-spacing:-.3px;line-height:1.25}
.view-head .lede{font-size:13px;color:var(--ink-3);margin-top:5px;max-width:68ch;line-height:1.65}
.view-head .aside{margin-left:auto;display:flex;gap:8px;align-items:center}

/* 区块标题 */
.sec{display:flex;align-items:baseline;gap:10px;margin:34px 0 12px}
.sec:first-child{margin-top:0}
.sec h2{font-size:15px;font-weight:600;letter-spacing:.1px}
.sec .hint{font-size:12px;color:var(--ink-3)}
.sec .more{margin-left:auto;font-size:12.5px}

/* ---------- 玻璃基元 ----------
 * .glass 是最小的玻璃面板：半透明白 + 背景模糊 + 发丝边 + 顶部内高光 + 极浅影。
 * 发丝边用双层背景实现：第一层画在 border-box 上做 1px 渐变边（上亮下暗），
 * 第二层是面板本体（稍微内缩），形成"边缘折光"的感觉。 */
.glass{
  position:relative;
  background:
    var(--edge) border-box;
  border:1px solid transparent;
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--blur-2);backdrop-filter:var(--blur-2);
  box-shadow:var(--light-top),var(--lift-1);
}
/* 用 ::before 叠加一层半透明本体，避免 border-box 渐变把整块染色 */
.glass::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:var(--glass-2);
  z-index:-1;
}
.glass > *{position:relative}
.panel{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-1);backdrop-filter:var(--blur-1);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--light-top),var(--lift-1);
}
.panel::after{
  /* 上亮下暗的边缘：顶部一条细高光，底部一条极淡暗边 */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(255,255,255,.12));
  box-shadow:inset 0 -1px 0 rgba(32,48,90,.05);
}
.panel-pad{padding:20px 22px}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--rule)}
.panel-head h3{font-size:13.5px;font-weight:600}
.panel-head .hint{margin-left:auto;font-size:12px;color:var(--ink-3)}

/* 通用文字 */
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.tiny{font-size:12px}
.mono-num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* 移动端菜单按钮 */
.menu-btn{display:none;width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.45);box-shadow:var(--light-top);place-items:center}
.menu-btn svg{width:18px;height:18px}
.scrim{display:none}

/* ---------- 降级：不支持 backdrop-filter 时，玻璃退回"高亮度磨砂纸" ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel{background:rgba(255,255,255,.80)}
  .side,.topbar{background:rgba(255,255,255,.86)}
  .ambient{opacity:.6}
}

/* 台账定位：?focus=<id> 时高亮那一行，并在结果区上方给出"你在找这条"的说明 */
.focus-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--accent-wash);box-shadow:inset 0 0 0 1px rgba(29,92,240,.16);font-size:12.5px;color:var(--ink-2)}
.focus-note b{color:var(--accent-ink)}
.tbl tbody tr.focus-on td{animation:focusRow 2.4s ease-out}
@keyframes focusRow{0%,40%{background:rgba(29,92,240,.13)}100%{background:transparent}}