@charset "UTF-8";
/* ==========================================================================
 * 个人主页 · 工业风皮肤（本地样式，不修改原网页任何文件）
 * --------------------------------------------------------------------------
 * 版本：v1.0        日期：2026-10-18
 * 适用：Projects\HomePage\site\index.html（线上 sk3019-home.pages.dev）
 *
 * 这个文件干什么：
 *   把主页从「毛玻璃 + 20px 大圆角 + 浅蓝」改成和 SkyCAD / GCodeTransform
 *   一致的「深色实板 + 小圆角 + 细描边 + 钢蓝」。
 *
 * 怎么用（二选一，都不改原网页的源代码）：
 *   方式一（推荐，先看效果）：双击同目录的 preview.html，右上角可以一键
 *       在「原版 / 工业风」之间来回切，满意了再考虑上线。
 *   方式二（真要上线）：在 site\index.html 的 </head> 前加一行
 *       <link rel="stylesheet" href="local-skin/skyui-home.css">
 *       注意这一行要放在 <link href="./static/style.css"> 的【后面】，
 *       靠后才生效。加了这行就等于改了 index.html —— 你自己决定。
 *   方式三（完全零改动）：装浏览器插件 Stylus，新建样式，把本文件内容贴进去，
 *       目标网址填 sk3019-home.pages.dev。只对你自己的浏览器生效。
 *
 * 怎么撤销：
 *   本文件是"纯追加"，原 style.css 一个字没动。
 *   删掉那一行 <link>，或把本文件改名，页面立刻回到原样。
 *
 * 设计口径（和 SkyCAD 那套按钮规范对齐）：
 *   圆角      大面板 4px / 卡片 3px（原来 20px、15px）
 *   描边      rgba(255,255,255,.07)，悬停提亮到 .16（原来 .25，太亮显得软）
 *   阴影      几乎不用，靠 1px 描边 + 内侧顶高光分层（原来 0 8px 32px 大投影）
 *   位移      悬停不再上浮 5px（工业风要"按下去"的稳，不是"飘起来"）
 *   强调色    #4a8cff（原 #74b9ff 偏粉嫩；想更暗可换 #007acc，见下面变量）
 *   动画      0.12s 干脆（原来 0.3s 偏拖沓）
 * ========================================================================== */


/* ==========================================================================
 * 01. 全局变量 —— 想微调只改这一段就够，不用往下翻
 * ========================================================================== */
:root{
  /* 底色：从偏蓝的 #060b16 收成中性近黑，工业风不要"蓝蒙蒙" */
  --sky-bg:          #080a0d;

  /* 面板三层：越靠里越亮一点点，用来堆层次，替代原来的大阴影 */
  --sky-panel:       #101317;
  --sky-panel-2:     #14181d;

  /* 描边：这是整套风格最关键的一个值。越淡越"利"，越亮越"软" */
  --sky-line:        rgba(255,255,255,.07);
  --sky-line-hi:     rgba(255,255,255,.16);

  /* 文字 */
  --sky-fg:          rgba(255,255,255,.88);
  --sky-fg-dim:      rgba(255,255,255,.55);
  --sky-fg-faint:    rgba(255,255,255,.38);

  /* 强调色（钢蓝）。想换成 SkyCAD 那个更暗的蓝，把下面这行改成 #007acc */
  --sky-accent:      #4a8cff;
  --sky-accent-soft: rgba(74,140,255,.14);

  /* 危险色（删除类操作，本项目暂时用不到，先留着备用） */
  --sky-danger:      #ff6b6b;

  /* 圆角：整套风格的"硬朗"就靠这两个数。改成 12px 立刻变回圆润风 */
  --sky-r:           3px;   /* 卡片、按钮、标签 */
  --sky-r-lg:        4px;   /* 大面板 */

  /* 头像形状：默认方角（工业风）。想变回圆形，把这里改成 50% */
  --sky-avatar-r:    4px;

  /* 交互动画时长：工业风要"立刻响应"，0.12s 是临界点，再慢就显拖 */
  --sky-dur:         .12s;
}


/* ==========================================================================
 * 02. 底色与背景层
 * --------------------------------------------------------------------------
 * 原页面 body::before 是一层「白 5% + 20px 模糊」，作用是给背景图蒙一层雾。
 * 工业风不要雾，要压暗 —— 改成黑，让卡片浮出来的边界更硬。
 * ========================================================================== */
body{
  background-color: var(--sky-bg);
  /* 背景图是你在后台设的内容，这里不覆盖，只把兜底色换成中性黑 */
}

body::before{
  background: rgba(0,0,0,.30);      /* 原 rgba(255,255,255,.05)：由"提亮"改"压暗" */
  backdrop-filter: blur(14px);      /* 原 20px，收一点，别把背景糊成一片纯色 */
}

/* 科技网格背景（原 style.css 里的透视网格）保留，只把线调淡一档，
   否则在深色实板上会抢戏 */
body::after{
  background-image:
    repeating-linear-gradient(90deg, rgba(90,150,220,.20) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg,  rgba(90,150,220,.20) 0 1px, transparent 1px 68px),
    radial-gradient(70% 90% at 50% 100%, rgba(40,130,235,.22), rgba(8,10,13,0) 72%);
}

/* 你后台切「黑色背景」时走的是 body.dark-background，这里跟着统一一下，
   免得切成黑底后两套风格打架 */
body.dark-background{
  background: linear-gradient(135deg, #0a0c0f 0%, #0e1114 50%, #12161a 100%) !important;
}


/* ==========================================================================
 * 03. 大面板（侧边栏 + 右侧各个 section）
 * --------------------------------------------------------------------------
 * 原来：背景 4% 白 + 25px 模糊 + 20px 圆角 + 25% 白边 + 0 8px 32px 投影
 * 现在：深色实板 + 4px 圆角 + 7% 白边 + 顶部 1px 内侧高光
 *
 * 为什么去掉大投影：投影是"轻盈/悬浮"的语言，工业界面的层次靠
 * 1px 亮边（受光面）来表达，不靠糊一团黑影。
 * ========================================================================== */
.sidebar,
.contribution-section,
.sites-section,
.projects-section,
.skills-section,
.github-stats{
  background: linear-gradient(180deg, var(--sky-panel-2) 0%, var(--sky-panel) 100%);
  border-radius: var(--sky-r-lg);
  border: 1px solid var(--sky-line);
  /* 内侧顶高光：模拟金属/塑料面板的受光边，1px 就够，多了显脏 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 24px -20px #000;
  backdrop-filter: blur(8px);       /* 原 25px：保留一点点让背景图透出来，但基本读作实色板 */
}

/* 面板之间原本靠 25px 间距 + 大阴影分区，现在阴影没了，间距稍微加大一点
   才不会显得糊在一起 */
.content-area{ gap: 18px; }


/* ==========================================================================
 * 04. 卡片（项目集 / 站点 / 圆弧集，三者同一套样式）
 * --------------------------------------------------------------------------
 * 关键动作：悬停不再 translateY(-5px) 上浮。
 * 上浮 + 放大投影是"玩具感"的来源；工业风改成「描边亮起 + 底色微亮」，
 * 位置纹丝不动，感觉是"这块被点亮了"，不是"这块跳起来了"。
 * ========================================================================== */
.site-card,
.project-card{
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sky-line);
  border-radius: var(--sky-r);
  /* 原来 transition: all .3s —— all 会把圆角、间距全带上动画，容易抖。
     这里只对真正要变的三个属性做过渡 */
  transition:
    background-color var(--sky-dur) ease,
    border-color     var(--sky-dur) ease,
    box-shadow       var(--sky-dur) ease;
}

/* 卡片外层的链接容器：原来有圆角 15px + 一个白 3% 的覆盖层，一并统一 */
.project-link,
.site-link{
  border-radius: var(--sky-r);
  transition: none;                 /* 悬停动画交给里面的 .card 做，外层不再动 */
}

.project-link::before,
.site-link::before{
  display: none;                    /* 去掉那层"白 3% 蒙版"，它会盖住新的强调色边框 */
}

/* 悬停：描边转钢蓝、底色透一层极淡的蓝 —— 全站唯一"发光"的地方 */
.project-link:hover .project-card,
.site-link:hover .project-card,
.project-link:hover .site-card,
.site-link:hover .site-card{
  background: rgba(74,140,255,.06);
  border-color: rgba(74,140,255,.42);
  transform: none;                  /* 原 translateY(-5px)：取消 */
  box-shadow: 0 0 20px -8px rgba(74,140,255,.35);   /* 很窄的一圈蓝辉光，不做大投影 */
}

/* 按下：轻微下压 1px + 底色加深，给"确实点到了"的实感 */
.project-link:active .project-card,
.site-link:active .project-card,
.project-link:active .site-card,
.site-link:active .site-card{
  transform: translateY(1px);
  background: rgba(74,140,255,.11);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

/* 图标块：原来 70px 圆角 14px。改成带边框的小方块，
   让每张卡片左边有一个明确的"硬件铭牌"区域 */
.site-icon,
.project-icon{
  border-radius: var(--sky-r);
  border: 1px solid var(--sky-line);
  background: #0b0e11;
  /* 图标自带 70×70 尺寸，这里只加边框和内衬，不改大小 */
}

/* 悬停时图标不再放大 1.05（放大=玩具感的第二个来源），改成边框亮起 */
.project-link:hover .project-icon,
.site-link:hover .project-icon,
.project-link:hover .site-icon,
.site-link:hover .site-icon{
  transform: none;
  border-color: rgba(74,140,255,.42);
}

/* 卡片内文字：标题提亮、描述压暗，拉开主次（原来两者都是 0.8 透明度） */
.site-info h3,
.project-info h3{
  color: #fff;
  font-size: 15px;
  letter-spacing: .01em;
}

.site-info p,
.project-info p{
  color: var(--sky-fg-dim);
  opacity: 1;                       /* 用颜色控制明暗，不用 opacity，避免影响子元素 */
  font-size: 13px;
}


/* ==========================================================================
 * 05. 标题栏（个人简介 / WebSite / 项目集 / 圆弧集）
 * --------------------------------------------------------------------------
 * 加一条 2px 钢蓝竖条，是工业/仪表盘界面里最省事的"分区标识"。
 * 用 border-left 而不是伪元素，是因为 h2 本来就是 flex 容器，
 * 加边框不影响里面图标和文字的对齐。
 * ========================================================================== */
.sites-section h2,
.projects-section h2,
.skills-section h2,
.contribution-section h2{
  border-left: 2px solid var(--sky-accent);
  padding-left: 10px;
  font-size: 16px;
  letter-spacing: .02em;
  color: #fff;
  margin-bottom: 16px;
}

/* 标题里的图标（Font Awesome）跟着压暗一档，避免和蓝色竖条抢注意力 */
.sites-section h2 i,
.projects-section h2 i,
.skills-section h2 i,
.contribution-section h2 i{
  color: var(--sky-fg-dim);
  font-size: 14px;
}


/* ==========================================================================
 * 06. 标签（.tag）
 * --------------------------------------------------------------------------
 * 原来 border-radius:15px 是胶囊形，圆润可爱。
 * 工业风改成 3px 小方块 + 等宽感字距，读作"规格标签"。
 * ========================================================================== */
.tag{
  background: rgba(255,255,255,.035);
  border: 1px solid var(--sky-line);
  border-radius: var(--sky-r);
  color: var(--sky-fg-dim);
  padding: 4px 9px;
  font-size: 11px;
  letter-spacing: .03em;
  backdrop-filter: none;            /* 10 个标签各带一次模糊，很吃性能，且看不出效果 */
  box-shadow: none;
  transition: color var(--sky-dur) ease, border-color var(--sky-dur) ease;
}

.tag:hover{
  color: #fff;
  border-color: rgba(74,140,255,.42);
}


/* ==========================================================================
 * 07. 社交按钮（GitHub / 邮箱 / 纸飞机 / 夏日空调）
 * ========================================================================== */
.social-links a{
  width: 36px;                      /* 原 40px：小一点更像工具按钮 */
  height: 36px;
  border-radius: var(--sky-r);      /* 原 10px */
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sky-line);
  color: var(--sky-fg);
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition:
    background-color var(--sky-dur) ease,
    border-color     var(--sky-dur) ease,
    color            var(--sky-dur) ease;
}

.social-links a:hover{
  background: var(--sky-accent-soft);
  border-color: var(--sky-accent);
  color: #fff;
  transform: none;                  /* 取消上浮 2px */
  box-shadow: none;
}


/* ==========================================================================
 * 08. 右下角"切换背景"按钮
 * --------------------------------------------------------------------------
 * 原来是个正圆（50%），全站唯一的圆形元素，和方形卡片放一起很跳。
 * 改成 3px 方角，并加大一点点，方便点。
 * ========================================================================== */
.background-toggle{
  width: 44px;
  height: 44px;
  border-radius: var(--sky-r);
  background: rgba(16,19,23,.92);
  border: 1px solid var(--sky-line);
  color: var(--sky-fg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 18px -10px #000;
  transition:
    background-color var(--sky-dur) ease,
    border-color     var(--sky-dur) ease;
}

.background-toggle:hover{
  background: var(--sky-accent-soft);
  border-color: var(--sky-accent);
  transform: none;                  /* 取消放大 1.1 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.background-toggle:active{
  transform: translateY(1px);       /* 改成下压，和卡片按下手感一致 */
}

/* 原来悬停图标转 10°，属于装饰性小动作，工业风里删掉 */
.background-toggle:hover i{ transform: none; }


/* ==========================================================================
 * 09. 左侧时间线
 * ========================================================================== */
.timeline-section{
  border-left: 1px solid var(--sky-line-hi);   /* 原 2px 白 30%：变细变淡 */
  padding-left: 16px;
  margin-left: 8px;
}

/* 时间线的点：由圆形蓝点改成 3px 小方块，和整套圆角语言一致 */
.timeline-dot{
  width: 7px;
  height: 7px;
  left: -20px;
  border-radius: 1px;
  background: var(--sky-accent);
  border: 1px solid rgba(74,140,255,.55);
  box-shadow: 0 0 6px -1px rgba(74,140,255,.55);
}

.timeline-title{ color: var(--sky-fg); font-size: 13px; }

.timeline-date{
  color: var(--sky-fg-faint);
  opacity: 1;
  font-size: 11px;
}


/* ==========================================================================
 * 10. 左栏「欢迎您 / 访客IP」这一块
 * --------------------------------------------------------------------------
 * 说明：这段其实不是"改"，是"补"。
 * 原 style.css 里根本没有 .stat-item / .stat-label / .stat-number 的规则，
 * 所以访客 IP 一直是浏览器默认的白字。这里给它排一下，让它像个仪表读数。
 * ========================================================================== */
.stat-item{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.6;
}

.stat-label{
  color: var(--sky-fg-dim);
  font-size: 12px;
  letter-spacing: .02em;
}

/* IP 地址用等宽字体：数字等宽看起来才像"读数"，不像一句话 */
.stat-number{
  color: var(--sky-accent);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 12px;
  letter-spacing: .01em;
}

/* 粉色高亮（.highlight-pink）属于你的内容配色，不动 */

/* 加载转圈：颜色换掉，粗细保持 */
.loading-spinner{
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--sky-accent);
}

/* 底部版权链接（当前已在页面里隐藏，这里先统一好，将来恢复显示不用再改） */
footer a{ color: var(--sky-accent); }
footer a:hover{ color: #fff; text-shadow: none; }


/* ==========================================================================
 * 12. 个人简介（Markdown 渲染区）内部元素
 * --------------------------------------------------------------------------
 * 这块是 marked.js 动态生成的，类名固定，可以放心针对。
 * 原则：所有带圆角的地方统一到 3px，边框统一到 .07 白。
 * ========================================================================== */
.intro-markdown code{
  border-radius: 2px;
  background: rgba(255,255,255,.07);
}

.intro-markdown pre{
  border-radius: var(--sky-r);
  background: #05070a;              /* 原 rgba(0,0,0,.35)：改成实色，代码块要"凹进去" */
  border: 1px solid var(--sky-line);
}

.intro-markdown blockquote{
  border-left: 2px solid var(--sky-accent);   /* 原白 35%，改蓝，和标题竖条呼应 */
  color: var(--sky-fg-dim);
}

.intro-markdown img{ border-radius: var(--sky-r); }

.intro-markdown hr{ border-top-color: var(--sky-line-hi); }

.intro-markdown th,
.intro-markdown td{
  border-color: var(--sky-line-hi);
}

.intro-markdown th{
  background: rgba(255,255,255,.03);
  text-align: left;
}


/* ==========================================================================
 * 13. 头像
 * ========================================================================== */
.profile-avatar img{
  border-radius: var(--sky-avatar-r);      /* 默认方角；改回圆形见顶部变量注释 */
  border: 1px solid var(--sky-line-hi);    /* 原 4px 白 30% 粗边，改 1px */
}


/* ==========================================================================
 * 14. 滚动条
 * --------------------------------------------------------------------------
 * 工业风标配：直角、深底、灰滑块。默认的圆角系统滚动条会破坏整体观感。
 * 只对 Chrome / Edge 有效，Firefox 走下面两条标准属性。
 * ========================================================================== */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track{
  background: #0a0c0f;
}

::-webkit-scrollbar-thumb{
  background: #262c34;
  border: 2px solid #0a0c0f;       /* 用边框做出"滑块没顶到边"的间隙 */
  border-radius: 0;                /* 直角 */
}

::-webkit-scrollbar-thumb:hover{
  background: #38414c;
}

/* Firefox */
*{
  scrollbar-color: #262c34 #0a0c0f;
  scrollbar-width: thin;
}


/* ==========================================================================
 * 15. 焦点环
 * --------------------------------------------------------------------------
 * 键盘 Tab 走到的位置必须有明确反馈（原来完全没写）。
 * 1px 钢蓝 + 2px 间距，和 SkyCAD 按钮的 focus_stroke 规范一致。
 * 用 :focus-visible 而不是 :focus，鼠标点击不会亮框，只有键盘才亮。
 * ========================================================================== */
a:focus-visible,
.background-toggle:focus-visible,
.social-links a:focus-visible{
  outline: 1px solid var(--sky-accent);
  outline-offset: 2px;
}


/* ==========================================================================
 * 16. 减少动效
 * --------------------------------------------------------------------------
 * 系统设置里开了「减少动态效果」的人，别让背景网格一直跑。
 * ========================================================================== */
@media (prefers-reduced-motion: reduce){
  body::after{ animation: none; }
  *{ transition-duration: .01ms !important; }
}


/* ==========================================================================
 * 17. 小屏修正
 * --------------------------------------------------------------------------
 * 你的 style.css 在 768px / 480px 有响应式规则。本文件所有规则都是
 * 非媒体查询的，会覆盖掉它媒体查询里的同优先级规则，所以圆角、描边
 * 在手机端也自动统一。这里只补几处小屏上需要额外收一下的尺寸。
 * ========================================================================== */
@media (max-width: 768px){
  .main-container{ padding: 14px; }        /* 原 20px，手机上留白太多 */
  .sidebar{ padding: 18px; }
  .sites-section,
  .projects-section,
  .contribution-section,
  .skills-section{ padding: 18px; }

  /* 手机上卡片是单列，图标块适当缩小，别占掉半行 */
  .site-icon,
  .project-icon{ width: 56px; height: 56px; }

  .background-toggle{
    width: 42px;
    height: 42px;
    bottom: 68px;                          /* 避开 Knocket 聊天气泡 */
    right: 14px;
  }
}


/* ==========================================================================
 * 附录：当前页面上"不存在"的区块（留着，将来恢复显示时自动就是工业风）
 * --------------------------------------------------------------------------
 * 为什么单列一段：
 *   2026-10-04 你把「GitHub 贡献图」换成了「个人简介」，但原 style.css 里
 *   那套贡献图样式（格子、图例、汇总数字、悬浮提示）还留着，成了"死代码"。
 *   我这边对应地也做了统一的圆角和配色，但因为它现在页面上根本不显示，
 *   混在正文章节里会让你以为"改了却看不见效果"，所以全部挪到这里。
 *
 * 你现在调样式，**完全不用看这一段**。
 * 将来如果哪天把贡献图放回页面，它会自动带上工业风，不用再改。
 * ========================================================================== */

/* 贡献格：圆角 3px → 2px，颜色从浅蓝换钢蓝 */
.contribution-cell,
.legend-cell{
  border-radius: 2px;
}

.contribution-cell.level-1{ background: rgba(74,140,255,.28); border-color: rgba(74,140,255,.38); }
.contribution-cell.level-2{ background: rgba(74,140,255,.48); border-color: rgba(74,140,255,.58); }
.contribution-cell.level-3{ background: rgba(74,140,255,.70); border-color: rgba(74,140,255,.80); }
.contribution-cell.level-4{ background: var(--sky-accent);    border-color: #3f7bea; }

.legend-cell.level-1{ background: rgba(74,140,255,.28); border-color: rgba(74,140,255,.38); }
.legend-cell.level-2{ background: rgba(74,140,255,.48); border-color: rgba(74,140,255,.58); }
.legend-cell.level-3{ background: rgba(74,140,255,.70); border-color: rgba(74,140,255,.80); }
.legend-cell.level-4{ background: var(--sky-accent);    border-color: #3f7bea; }

/* 悬停放大 1.3 是 GitHub 贡献图的原味，保留；只把光晕改成钢蓝 */
.contribution-cell:hover{
  box-shadow: 0 0 10px rgba(74,140,255,.45);
}

/* 汇总数字块：12px 圆角 → 3px */
.contribution-summary,
.mobile-contribution-stats{
  border-radius: var(--sky-r);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--sky-line);
}

/* 各处零散的浅蓝，统一换成钢蓝 */
.summary-number,
.mobile-stat-number,
.tooltip-count,
.highlight-blue,
.highlight-number{
  color: var(--sky-accent);
}

/* 语言标签（GitHub 统计那一版的遗留）：圆角 4px → 2px，底色压暗 */
.language-tag{
  border-radius: 2px;
  background: rgba(132,157,195,.22);
  color: rgba(255,255,255,.85);
}