模板:Playground styles：修订间差异

2026年2月14日 (六) 17:19的版本

/* ============================================================

  TemplateStyles — playground_styles.css
  目标：展示 MediaWiki CSS-only 交互与视觉的各种可能性
  约束：MediaWiki 1.39 TemplateStyles 白名单内属性
  ============================================================ */

/* ── 全局重置 ── */

.pg-page {

   width: 100%;
   font-size: 15px;
   line-height: 1.65;
   color: #1f2328;

}

.pg-page * {

   box-sizing: border-box;

}

.pg-page p {

   margin: 0;

}

/* 外部链接图标移除 */ .pg-page a.external {

   background: none !important;
   padding-right: 0 !important;

}

.pg-page a.external::after {

   display: none !important;

}

/* ── 通用工具类 ── */

.pg-page .pg-muted {

   color: #5b626a;
   font-size: 0.93em;

}

.pg-page .pg-mt12 {

   margin-top: 12px;

}

.pg-page .pg-mt20 {

   margin-top: 20px;

}

/* ── Zone 分区容器 ── */

.pg-page .pg-zone {

   margin-top: 36px;
   padding-top: 24px;
   padding-bottom: 24px;
   border-top: 2px solid #e6eaee;

}

.pg-page .pg-zone:first-child, .pg-page .pg-zone-hero {

   margin-top: 0;
   padding-top: 0;
   border-top: 0;

}

/* ── 区域标题 ── */

.pg-page .pg-section-h {

   font-size: 1.3em;
   font-weight: 900;
   margin: 0 0 16px 0;
   border-left: 10px solid #e6eaee;
   padding-left: 12px;
   line-height: 1.3;

}

/* 各区域标题颜色标识 */ .pg-page .pg-h-hero {

   border-left-color: #6c5ce7;

}

.pg-page .pg-h-accord {

   border-left-color: #00b894;

}

.pg-page .pg-h-tabs {

   border-left-color: #0984e3;

}

.pg-page .pg-h-hover {

   border-left-color: #e17055;

}

.pg-page .pg-h-gallery {

   border-left-color: #fdcb6e;

}

.pg-page .pg-h-bar {

   border-left-color: #a29bfe;

}

.pg-page .pg-h-typo {

   border-left-color: #636e72;

}

.pg-page .pg-h-grad {

   border-left-color: #fd79a8;

}

.pg-page .pg-h-tl {

   border-left-color: #00cec9;

}

.pg-page .pg-h-footer {

   border-left-color: #636e72;

}

/* ============================================================

  1. HERO 区域
  ============================================================ */

.pg-page .pg-hero {

   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #f5f0ff 0%, #e8f4fd 50%, #fdf2e9 100%);
   border-top: 1px solid #e6eaee;
   border-bottom: 1px solid #e6eaee;
   padding: 28px 20px 24px 20px;

}

.pg-page .pg-hero-kicker {

   color: #6c5ce7;
   font-size: 0.88em;
   font-weight: 900;
   letter-spacing: 0.08em;
   text-transform: uppercase;

}

.pg-page .pg-hero-title {

   font-size: 2.6em;
   font-weight: 900;
   line-height: 1.1;
   margin-top: 6px;
   color: #5a4fcf;

}

.pg-page .pg-hero-sub {

   margin-top: 10px;
   color: #3f4650;
   font-size: 1.08em;
   line-height: 1.55;
   max-width: 680px;

}

.pg-page .pg-hero-meta {

   margin-top: 10px;
   color: #5b626a;
   font-size: 0.9em;

}

.pg-page .pg-hero-nav {

   margin-top: 12px;
   color: #4b535d;
   font-size: 0.95em;
   line-height: 1.7;

}

.pg-page .pg-hero-nav a {

   text-decoration: none;
   border-bottom: 1px dotted #b7c0cb;

}

.pg-page .pg-hero-nav a:hover {

   border-bottom-style: solid;
   color: #6c5ce7;

}

/* ============================================================

  2. 手风琴 / FAQ (CSS :target)
  ============================================================ */

.pg-page .pg-accord {

   border-left: 3px solid #00b894;
   padding-left: 14px;

}

.pg-page .pg-q {

   margin-top: 10px;
   padding: 10px 12px;
   border: 1px solid #e6eaee;
   background: #fbfcfd;
   transition: background 150ms ease, border-color 150ms ease;

}

.pg-page .pg-q+.pg-q {

   margin-top: 8px;

}

.pg-page .pg-q-title {

   font-weight: 900;
   cursor: default;

}

.pg-page .pg-q-title a {

   text-decoration: none;
   color: #1f2328;
   display: block;

}

.pg-page .pg-q-title a:hover {

   color: #00b894;

}

/* 展开箭头指示器 */ .pg-page .pg-q-arrow {

   display: inline-block;
   margin-right: 8px;
   font-size: 0.85em;
   color: #00b894;
   transition: color 120ms ease;

}

.pg-page .pg-q-body {

   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height 300ms ease, opacity 200ms ease, margin 200ms ease;
   margin-top: 0;
   color: #4b535d;
   line-height: 1.6;

}

/* :target 展开 */ .pg-page .pg-q:target {

   background: #f0faf6;
   border-color: #00b894;

}

.pg-page .pg-q:target .pg-q-body {

   max-height: 400px;
   opacity: 1;
   margin-top: 10px;

}

.pg-page .pg-q:target .pg-q-arrow {

   color: #1f2328;

}

/* 收起链接 */ .pg-page .pg-q-close {

   display: block;
   margin-top: 8px;
   font-size: 0.88em;
   color: #00b894;

}

/* ============================================================

  3. Tabs 切换面板 (CSS :target)
  ============================================================ */

.pg-page .pg-tabs {

   background: transparent;
   padding: 0;

}

.pg-page .pg-tab-anchor {

   display: block;
   height: 0;
   overflow: hidden;

}

.pg-page .pg-tabbar {

   margin-bottom: 12px;
   border-bottom: 2px solid #e6eaee;
   padding-bottom: 0;

}

.pg-page .pg-tabbar p {

   display: inline;
   margin: 0;

}

.pg-page .pg-tabbar br {

   display: none;

}

.pg-page .pg-tabbar a {

   display: inline-block;
   padding: 8px 14px;
   margin: 0 4px -2px 0;
   border: 1px solid transparent;
   border-bottom: 2px solid transparent;
   background: transparent;
   text-decoration: none;
   font-weight: 900;
   font-size: 0.95em;
   color: #5b626a;
   transition: background 120ms ease, border-color 120ms ease, color 120ms ease;

}

.pg-page .pg-tabbar a:hover {

   background: #f0f5ff;
   color: #0984e3;

}

.pg-page .pg-tabpanel {

   display: none;
   padding: 14px 0 14px 14px;
   border-left: 4px solid #e6eaee;

}

/* 默认显示第一个面板 */ .pg-page .pg-tabpanel-a {

   display: block;
   border-left-color: #0984e3;

}

.pg-page .pg-tabpanel-b {

   border-left-color: #6c5ce7;

}

.pg-page .pg-tabpanel-c {

   border-left-color: #00b894;

}

.pg-page .pg-panel-h {

   font-weight: 900;
   font-size: 1.1em;
   margin: 0 0 6px 0;

}

.pg-page .pg-panel-p {

   color: #4b535d;
   line-height: 1.6;

}

.pg-page .pg-panel-links {

   margin-top: 8px;
   color: #4b535d;
   line-height: 1.7;

}

/* 默认高亮第一个 tab */ .pg-page .pg-tabbar a[href="#pg-tab-a"] {

   background: #f0f5ff;
   border-bottom-color: #0984e3;
   color: #0984e3;

}

/* Target 逻辑：显示面板 + 高亮 tab */ .pg-page #pg-tab-b:target~.pg-tabpanels .pg-tabpanel-a, .pg-page #pg-tab-c:target~.pg-tabpanels .pg-tabpanel-a {

   display: none;

}

.pg-page #pg-tab-b:target~.pg-tabpanels .pg-tabpanel-b {

   display: block;

}

.pg-page #pg-tab-c:target~.pg-tabpanels .pg-tabpanel-c {

   display: block;

}

/* 重置默认 tab 高亮 */ .pg-page #pg-tab-b:target~.pg-tabbar a[href="#pg-tab-a"], .pg-page #pg-tab-c:target~.pg-tabbar a[href="#pg-tab-a"] {

   background: transparent;
   border-bottom-color: transparent;
   color: #5b626a;

}

/* 激活对应 tab 高亮 */ .pg-page #pg-tab-b:target~.pg-tabbar a[href="#pg-tab-b"] {

   background: #f5f0ff;
   border-bottom-color: #6c5ce7;
   color: #6c5ce7;

}

.pg-page #pg-tab-c:target~.pg-tabbar a[href="#pg-tab-c"] {

   background: #f0faf6;
   border-bottom-color: #00b894;
   color: #00b894;

}

/* ============================================================

  4. Hover 微交互展示
  ============================================================ */

.pg-page .pg-hover-grid {

   display: flex;
   flex-wrap: wrap;
   margin: -8px;

}

.pg-page .pg-hover-card {

   flex: 1 1 calc(33.333% - 16px);
   min-width: 200px;
   margin: 8px;
   padding: 18px 14px;
   border: 2px solid #e6eaee;
   background: #fbfcfd;
   text-align: center;
   transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;

}

/* 效果 1: 边框变色 */ .pg-page .pg-hover-card.pg-hc-border:hover {

   border-color: #e17055;

}

/* 效果 2: 背景渐变 */ .pg-page .pg-hover-card.pg-hc-bg:hover {

   background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
   border-color: #fcb69f;

}

/* 效果 3: 阴影浮起 */ .pg-page .pg-hover-card.pg-hc-shadow:hover {

   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
   border-color: #ddd;

}

/* 效果 4: 左边框色条 */ .pg-page .pg-hover-card.pg-hc-left:hover {

   border-left: 4px solid #6c5ce7;
   padding-left: 12px;

}

/* 效果 5: 底部色条 */ .pg-page .pg-hover-card.pg-hc-bottom:hover {

   border-bottom: 4px solid #0984e3;
   padding-bottom: 16px;

}

/* 效果 6: 全色反转 */ .pg-page .pg-hover-card.pg-hc-invert:hover {

   background: #2d3436;
   color: #ffffff;
   border-color: #2d3436;

}

.pg-page .pg-hover-icon {

   display: inline-block;
   width: 48px;
   height: 48px;
   line-height: 46px;
   border: 2px solid #e6eaee;
   font-size: 1.3em;
   font-weight: 900;
   margin-bottom: 10px;
   transition: border-color 200ms ease, color 200ms ease;

}

.pg-page .pg-hover-card:hover .pg-hover-icon {

   border-color: currentColor;

}

.pg-page .pg-hover-label {

   display: block;
   font-weight: 900;
   font-size: 0.92em;
   margin-top: 4px;

}

.pg-page .pg-hover-desc {

   display: block;
   color: #5b626a;
   font-size: 0.85em;
   margin-top: 4px;

}

.pg-page .pg-hover-card.pg-hc-invert:hover .pg-hover-desc {

   color: #b2bec3;

}

/* ============================================================

  5. 网格画廊
  ============================================================ */

.pg-page .pg-gallery {

   display: flex;
   flex-wrap: wrap;
   margin: -6px;

}

.pg-page .pg-gallery-item {

   flex: 1 1 calc(25% - 12px);
   min-width: 160px;
   margin: 6px;
   border: 1px solid #e6eaee;
   overflow: hidden;
   transition: border-color 200ms ease;

}

.pg-page .pg-gallery-item:hover {

   border-color: #fdcb6e;

}

.pg-page .pg-gallery-color {

   height: 80px;
   transition: opacity 200ms ease;

}

.pg-page .pg-gallery-item:hover .pg-gallery-color {

   opacity: 0.85;

}

.pg-page .pg-gc-1 {

   background: linear-gradient(135deg, #a29bfe, #6c5ce7);

}

.pg-page .pg-gc-2 {

   background: linear-gradient(135deg, #74b9ff, #0984e3);

}

.pg-page .pg-gc-3 {

   background: linear-gradient(135deg, #55efc4, #00b894);

}

.pg-page .pg-gc-4 {

   background: linear-gradient(135deg, #ffeaa7, #fdcb6e);

}

.pg-page .pg-gc-5 {

   background: linear-gradient(135deg, #fab1a0, #e17055);

}

.pg-page .pg-gc-6 {

   background: linear-gradient(135deg, #fd79a8, #e84393);

}

.pg-page .pg-gc-7 {

   background: linear-gradient(135deg, #636e72, #2d3436);

}

.pg-page .pg-gc-8 {

   background: linear-gradient(135deg, #dfe6e9, #b2bec3);

}

.pg-page .pg-gallery-info {

   padding: 8px 10px;

}

.pg-page .pg-gallery-name {

   font-weight: 900;
   font-size: 0.92em;
   display: block;

}

.pg-page .pg-gallery-val {

   display: block;
   font-size: 0.82em;
   color: #5b626a;
   margin-top: 2px;
   font-family: "Courier New", Courier, monospace;

}

/* ============================================================

  6. 进度条 / 状态指示器（CSS 动画）
  ============================================================ */

.pg-page .pg-bars {

   padding-left: 14px;
   border-left: 3px solid #a29bfe;

}

.pg-page .pg-bar-item {

   margin-top: 14px;

}

.pg-page .pg-bar-item:first-child {

   margin-top: 0;

}

.pg-page .pg-bar-label {

   font-weight: 900;
   font-size: 0.92em;
   display: flex;
   justify-content: space-between;
   margin-bottom: 6px;

}

.pg-page .pg-bar-pct {

   color: #5b626a;
   font-weight: 400;

}

.pg-page .pg-bar-track {

   height: 10px;
   background: #f0f2f5;
   overflow: hidden;
   border: 1px solid #e6eaee;

}

.pg-page .pg-bar-fill {

   height: 100%;
   transition: width 600ms ease;

}

/* 各进度条颜色 */ .pg-page .pg-bf-purple {

   background: linear-gradient(90deg, #a29bfe, #6c5ce7);
   width: 85%;

}

.pg-page .pg-bf-blue {

   background: linear-gradient(90deg, #74b9ff, #0984e3);
   width: 72%;

}

.pg-page .pg-bf-green {

   background: linear-gradient(90deg, #55efc4, #00b894);
   width: 95%;

}

.pg-page .pg-bf-orange {

   background: linear-gradient(90deg, #ffeaa7, #e17055);
   width: 58%;

}

.pg-page .pg-bf-pink {

   background: linear-gradient(90deg, #fd79a8, #e84393);
   width: 40%;

}

/* 脉冲动画（仅在 hover 时触发，节制使用） */ @keyframes pg-pulse {

   0% {
       opacity: 1;
   }

   50% {
       opacity: 0.6;
   }

   100% {
       opacity: 1;
   }

}

.pg-page .pg-bar-item:hover .pg-bar-fill {

   animation: pg-pulse 1.2s ease infinite;

}

/* ============================================================

  7. 排版与色彩系统
  ============================================================ */

.pg-page .pg-typo-section {

   margin-top: 16px;
   padding: 14px;
   border: 1px solid #e6eaee;
   background: #fbfcfd;

}

.pg-page .pg-typo-section+.pg-typo-section {

   margin-top: 12px;

}

.pg-page .pg-typo-title {

   font-weight: 900;
   font-size: 0.9em;
   color: #636e72;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-bottom: 10px;
   padding-bottom: 6px;
   border-bottom: 1px solid #e6eaee;

}

/* 字号展示 */ .pg-page .pg-t-xxl {

   font-size: 2.4em;
   font-weight: 900;
   line-height: 1.1;

}

.pg-page .pg-t-xl {

   font-size: 1.8em;
   font-weight: 900;
   line-height: 1.2;

}

.pg-page .pg-t-lg {

   font-size: 1.3em;
   font-weight: 900;
   line-height: 1.3;

}

.pg-page .pg-t-base {

   font-size: 1em;
   font-weight: 400;
   line-height: 1.65;

}

.pg-page .pg-t-sm {

   font-size: 0.88em;
   font-weight: 400;
   line-height: 1.5;
   color: #5b626a;

}

.pg-page .pg-t-xs {

   font-size: 0.78em;
   font-weight: 400;
   line-height: 1.4;
   color: #636e72;

}

/* 色彩色块 */ .pg-page .pg-color-row {

   display: flex;
   flex-wrap: wrap;
   margin: -4px;

}

.pg-page .pg-color-chip {

   flex: 1 1 calc(16.666% - 8px);
   min-width: 80px;
   margin: 4px;
   padding: 0;
   border: 1px solid #e6eaee;
   overflow: hidden;
   transition: box-shadow 200ms ease;

}

.pg-page .pg-color-chip:hover {

   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}

.pg-page .pg-chip-swatch {

   height: 48px;

}

.pg-page .pg-chip-label {

   padding: 5px 8px;
   font-size: 0.78em;
   font-weight: 900;
   color: #3f4650;
   background: #ffffff;

}

/* 色块颜色 */ .pg-page .pg-sw-1 {

   background: #6c5ce7;

}

.pg-page .pg-sw-2 {

   background: #0984e3;

}

.pg-page .pg-sw-3 {

   background: #00b894;

}

.pg-page .pg-sw-4 {

   background: #fdcb6e;

}

.pg-page .pg-sw-5 {

   background: #e17055;

}

.pg-page .pg-sw-6 {

   background: #e84393;

}

.pg-page .pg-sw-7 {

   background: #2d3436;

}

.pg-page .pg-sw-8 {

   background: #636e72;

}

.pg-page .pg-sw-9 {

   background: #b2bec3;

}

.pg-page .pg-sw-10 {

   background: #dfe6e9;

}

.pg-page .pg-sw-11 {

   background: #f5f6fa;

}

.pg-page .pg-sw-12 {

   background: #ffffff;

}

/* ============================================================

  8. 渐变色卡片
  ============================================================ */

.pg-page .pg-grad-grid {

   display: flex;
   flex-wrap: wrap;
   margin: -8px;

}

.pg-page .pg-grad-card {

   flex: 1 1 calc(33.333% - 16px);
   min-width: 200px;
   margin: 8px;
   padding: 20px 16px;
   border: 1px solid rgba(0, 0, 0, 0.05);
   color: #ffffff;
   transition: box-shadow 200ms ease, opacity 200ms ease;

}

.pg-page .pg-grad-card:hover {

   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}

.pg-page .pg-grad-name {

   font-weight: 900;
   font-size: 1.05em;
   display: block;

}

.pg-page .pg-grad-desc {

   display: block;
   margin-top: 4px;
   font-size: 0.88em;
   opacity: 0.85;

}

.pg-page .pg-grad-code {

   display: block;
   margin-top: 8px;
   font-size: 0.78em;
   opacity: 0.7;
   font-family: "Courier New", Courier, monospace;

}

/* 渐变色方案 */ .pg-page .pg-g-sunset {

   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

}

.pg-page .pg-g-ocean {

   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

}

.pg-page .pg-g-forest {

   background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
   color: #1f2328;

}

.pg-page .pg-g-night {

   background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

}

.pg-page .pg-g-candy {

   background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
   color: #1f2328;

}

.pg-page .pg-g-slate {

   background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);

}

/* ============================================================

  9. 竖线时间线
  ============================================================ */

.pg-page .pg-timeline {

   position: relative;
   padding-left: 28px;
   border-left: 2px solid #00cec9;

}

.pg-page .pg-tl-item {

   position: relative;
   padding: 10px 0 10px 14px;
   border-bottom: 1px solid #f0f2f5;

}

.pg-page .pg-tl-item:last-child {

   border-bottom: 0;

}

/* 时间线节点圆点 */ .pg-page .pg-tl-dot {

   display: inline-block;
   width: 12px;
   height: 12px;
   border: 2px solid #00cec9;
   background: #ffffff;
   position: absolute;
   left: -35px;
   top: 14px;

}

.pg-page .pg-tl-item:hover .pg-tl-dot {

   background: #00cec9;

}

.pg-page .pg-tl-date {

   font-weight: 900;
   font-size: 0.92em;
   color: #00cec9;
   display: block;

}

.pg-page .pg-tl-text {

   font-weight: 900;
   font-size: 1em;
   color: #1f2328;
   display: block;
   margin-top: 2px;

}

.pg-page .pg-tl-desc {

   color: #4b535d;
   font-size: 0.92em;
   display: block;
   margin-top: 4px;
   line-height: 1.5;

}

/* ============================================================

  10. Banner 提示条
  ============================================================ */

.pg-page .pg-banner {

   padding: 12px 14px;
   border-left: 10px solid #6c5ce7;
   background: #f5f0ff;

}

.pg-page .pg-banner-tag {

   display: inline-block;
   padding: 3px 10px;
   margin-right: 10px;
   border: 1px solid #d5cff5;
   background: #ffffff;
   font-weight: 900;
   font-size: 0.88em;
   color: #6c5ce7;

}

.pg-page .pg-banner-text {

   color: #3c444e;
   line-height: 1.6;

}

/* ============================================================

  11. 双栏布局
  ============================================================ */

.pg-page .pg-row {

   display: flex;
   flex-wrap: wrap;
   margin: -10px;

}

.pg-page .pg-col {

   margin: 10px;
   flex: 1 1 420px;
   min-width: 300px;

}

/* ============================================================

  12. 标签 / Badge
  ============================================================ */

.pg-page .pg-badge {

   display: inline-block;
   padding: 2px 9px;
   font-size: 0.82em;
   font-weight: 900;
   border: 1px solid #e6eaee;
   background: #fbfcfd;
   color: #3f4650;
   margin-right: 6px;
   margin-bottom: 4px;

}

.pg-page .pg-badge-purple {

   border-color: #d5cff5;
   background: #f5f0ff;
   color: #6c5ce7;

}

.pg-page .pg-badge-blue {

   border-color: #bcd6ee;
   background: #f0f5ff;
   color: #0984e3;

}

.pg-page .pg-badge-green {

   border-color: #b5e8d5;
   background: #f0faf6;
   color: #00b894;

}

.pg-page .pg-badge-orange {

   border-color: #fad7c0;
   background: #fef5ee;
   color: #e17055;

}

.pg-page .pg-badge-pink {

   border-color: #f5b7cc;
   background: #fef0f5;
   color: #e84393;

}

.pg-page .pg-badge-dark {

   border-color: #636e72;
   background: #2d3436;
   color: #ffffff;

}

/* ============================================================

  13. 引用块 / Callout
  ============================================================ */

.pg-page .pg-callout {

   padding: 14px 16px;
   border-left: 4px solid #e6eaee;
   background: #fbfcfd;
   margin-top: 12px;

}

.pg-page .pg-callout-info {

   border-left-color: #0984e3;
   background: #f0f7ff;

}

.pg-page .pg-callout-success {

   border-left-color: #00b894;
   background: #f0faf6;

}

.pg-page .pg-callout-warning {

   border-left-color: #fdcb6e;
   background: #fffcf0;

}

.pg-page .pg-callout-danger {

   border-left-color: #e17055;
   background: #fef5ee;

}

.pg-page .pg-callout-title {

   font-weight: 900;
   margin-bottom: 4px;

}

.pg-page .pg-callout-body {

   color: #4b535d;
   line-height: 1.6;

}

/* ============================================================

  14. 统计数字展示
  ============================================================ */

.pg-page .pg-stats {

   display: flex;
   flex-wrap: wrap;
   margin: -8px;

}

.pg-page .pg-stat {

   flex: 1 1 calc(25% - 16px);
   min-width: 120px;
   margin: 8px;
   padding: 18px 14px;
   border: 1px solid #e6eaee;
   text-align: center;
   background: #fbfcfd;
   transition: border-color 200ms ease, background 200ms ease;

}

.pg-page .pg-stat:hover {

   border-color: #6c5ce7;
   background: #f5f0ff;

}

.pg-page .pg-stat-num {

   display: block;
   font-size: 2em;
   font-weight: 900;
   line-height: 1.1;
   color: #6c5ce7;

}

.pg-page .pg-stat-label {

   display: block;
   margin-top: 6px;
   font-size: 0.88em;
   font-weight: 900;
   color: #5b626a;

}

/* ============================================================

  15. Footer
  ============================================================ */

.pg-page .pg-footer-links {

   margin-top: 10px;
   color: #4b535d;
   line-height: 1.7;

}

/* ============================================================

  响应式
  ============================================================ */

@media (max-width: 720px) {

   .pg-page .pg-col {
       min-width: 0;
   }

   .pg-page .pg-hover-card {
       flex-basis: calc(50% - 16px);
       min-width: 0;
   }

   .pg-page .pg-gallery-item {
       flex-basis: calc(50% - 12px);
       min-width: 0;
   }

   .pg-page .pg-grad-card {
       flex-basis: calc(50% - 16px);
       min-width: 0;
   }

   .pg-page .pg-color-chip {
       flex-basis: calc(33.333% - 8px);
       min-width: 0;
   }

   .pg-page .pg-stat {
       flex-basis: calc(50% - 16px);
       min-width: 0;
   }

}

@media (max-width: 480px) {

   .pg-page .pg-hover-card,
   .pg-page .pg-gallery-item,
   .pg-page .pg-grad-card {
       flex-basis: 100%;
   }

   .pg-page .pg-hero-title {
       font-size: 1.8em;
   }

}

@@ 第141行： / 第141行： @@
      line-height: 1.1;
      margin-top: 6px;
-     background: linear-gradient(135deg, #6c5ce7 0%, #0984e3 50%, #00b894 100%);
+     color: #5a4fcf;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
 }