/* ============================================================ Weiblog 生成器 · 站点主题系统（P2 模板市场） ------------------------------------------------------------ 同一套页面结构，通过切换设计语言：经典 2 套：yinshange / sunshine 犬九型 9 套（U09）：dog-commander/joybringer/explorer/guardian/scholar/mediator/sprite/zen/artist 猫八型 8 套（U13）：cat-explorer/shadow/hermit/performer/philosopher/guardian/royal/ninja 主题目录（名称/描述/色卡）见 lib/themes.js · 原生 CSS · 零外部依赖 · 响应式 ============================================================ */ :root { --bg: #0A0A0A; --surface: #141414; --surface-2: #1A1A1A; --surface-3: #222222; --gold: #D4AF37; --gold-light: #E8C85A; --gold-dark: #B8962E; --gold-soft: rgba(212, 175, 55, 0.08); --red: #8B2635; --red-light: #A83242; --text-primary: #F5F5F5; --text-secondary: #A0A0A0; --text-muted: #6E6E6E; --border: #2A2A2A; --border-light: #3A3A3A; --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'STZhongsong', 'SimSun', serif; --max-w: 1120px; /* 深色主题专属（遮罩/水印等非纯色场景） */ --header-bg: rgba(10, 10, 10, 0.92); --hero-mask: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.62) 45%, rgba(10,10,10,0.94) 100%); --nav-mobile-bg: rgba(10, 10, 10, 0.98); --tag-bg: rgba(10, 10, 10, 0.78); --tag-fg: #E8C85A; --sold-overlay: rgba(10, 10, 10, 0.62); --sold-mark-fg: rgba(245, 245, 245, 0.85); --sold-mark-bd: rgba(245, 245, 245, 0.7); --btn-gold-fg: #0A0A0A; /* ---- 布局 DNA 结构令牌（各主题覆盖，形成结构差异） ---- */ --radius-card: 10px; /* 卡片圆角：0 锐利 → 24 圆润 */ --radius-btn: 0px; /* 按钮/徽章圆角：0 方正 → 100px 胶囊 */ --radius-tag: 0px; /* 图片角标圆角 */ --radius-chip: 100px; /* 小徽章（场景/分类/指数条）圆角 */ --radius-inner: 8px; /* 内层小卡片圆角 */ --brand-track: 6px; /* 品牌名字距：大=庄重，小=亲和 */ --hero-min: 560px; /* Hero 高度：高=气势，低=亲近 */ --hero-justify: flex-start; /* Hero 构图：flex-start 左 / center 中 / flex-end 右 */ --hero-align: left; /* Hero 文本对齐 */ --section-pad: 76px; /* 区块密度：大=疏朗，小=紧凑 */ --display-font: var(--font-serif); /* 展示字体：衬线=经典，无衬线=现代 */ --card-border: 1px solid var(--border); /* 卡片边框语言 */ --card-shadow: none; /* 卡片阴影（软主题用阴影替代边框） */ --card-hover-shadow: none; --hover-lift: translateY(-5px); /* 悬浮动效：none=静（禅/守护），大=活泼 */ --cover-scale: 1.05; /* 封面缩放：1=无动效 */ --motion: .25s; /* 动效速度：慢=沉稳，快=锐利 */ --tag-transform: none; /* 角标形变（活泼主题旋转） */ --divider-w: 48px; /* 分隔线宽度 */ --hero-h1-shadow: none; /* Hero 标题光晕（聚光/夜色主题） */ } /* ---------- 主题：阳光（暖白 + 琥珀） ---------- */ body[data-theme="sunshine"] { --bg: #FAF7F0; --surface: #FFFFFF; --surface-2: #FFFDF8; --surface-3: #F3EDE0; --gold: #B45309; --gold-light: #D97706; --gold-dark: #92400E; --gold-soft: rgba(180, 83, 9, 0.07); --red: #B91C1C; --red-light: #DC2626; --text-primary: #292524; --text-secondary: #57534E; --text-muted: #A8A29E; --border: #EAE1D0; --border-light: #D9CDB8; --header-bg: rgba(250, 247, 240, 0.92); --hero-mask: linear-gradient(180deg, rgba(250,247,240,0.40) 0%, rgba(250,247,240,0.55) 45%, rgba(250,247,240,0.93) 100%); --nav-mobile-bg: rgba(250, 247, 240, 0.98); --tag-bg: rgba(255, 255, 255, 0.85); --tag-fg: #92400E; --sold-overlay: rgba(255, 255, 255, 0.55); --sold-mark-fg: rgba(41, 37, 36, 0.8); --sold-mark-bd: rgba(41, 37, 36, 0.55); --btn-gold-fg: #FFFFFF; } /* ============================================================ 性格主题 · 犬九型（U09） + 猫八型（U13）目录与命名见 lib/themes.js · 全部遵循 WCAG 2.1 AA 对比度 ============================================================ */ /* ---------- 犬 T01 指挥官 · 铁灰铜金（深） ---------- */ body[data-theme="dog-commander"] { --bg: #1C1F23; --surface: #262A30; --surface-2: #2C313A; --surface-3: #343A44; --gold: #C08A3E; --gold-light: #D8A55C; --gold-dark: #A0712F; --gold-soft: rgba(192, 138, 62, 0.09); --red: #8B2F33; --red-light: #A83940; --text-primary: #F2F4F6; --text-secondary: #A6ADB5; --text-muted: #6B7280; --border: #333940; --border-light: #3E454E; --header-bg: rgba(28, 31, 35, 0.92); --hero-mask: linear-gradient(180deg, rgba(28,31,35,0.55) 0%, rgba(28,31,35,0.62) 45%, rgba(28,31,35,0.94) 100%); --nav-mobile-bg: rgba(28, 31, 35, 0.98); --tag-bg: rgba(28, 31, 35, 0.78); --tag-fg: #D8A55C; --sold-overlay: rgba(28, 31, 35, 0.62); --sold-mark-fg: rgba(242, 244, 246, 0.85); --sold-mark-bd: rgba(242, 244, 246, 0.7); --btn-gold-fg: #1C1F23; } /* ---------- 犬 T02 快乐使者 · 暖橙奶油（浅） ---------- */ body[data-theme="dog-joybringer"] { --bg: #FFF8F0; --surface: #FFFFFF; --surface-2: #FFFDFA; --surface-3: #FBEFE0; --gold: #C2601A; --gold-light: #E8872F; --gold-dark: #9A4E15; --gold-soft: rgba(194, 96, 26, 0.07); --red: #C3372C; --red-light: #DB5245; --text-primary: #3A2A1E; --text-secondary: #6E5A48; --text-muted: #B3A08F; --border: #F0E4D2; --border-light: #E2D3BC; --header-bg: rgba(255, 248, 240, 0.92); --hero-mask: linear-gradient(180deg, rgba(255,248,240,0.40) 0%, rgba(255,248,240,0.55) 45%, rgba(255,248,240,0.93) 100%); --nav-mobile-bg: rgba(255, 248, 240, 0.98); --tag-bg: rgba(255, 255, 255, 0.85); --tag-fg: #9A4E15; --sold-overlay: rgba(255, 255, 255, 0.55); --sold-mark-fg: rgba(58, 42, 30, 0.8); --sold-mark-bd: rgba(58, 42, 30, 0.55); --btn-gold-fg: #FFFFFF; } /* ---------- 犬 T03 探险家 · 苔原军绿（浅） ---------- */ body[data-theme="dog-explorer"] { --bg: #F4F1E8; --surface: #FDFCF8; --surface-2: #FAF8F0; --surface-3: #EDE8D8; --gold: #5A6B3B; --gold-light: #7A8C56; --gold-dark: #45522D; --gold-soft: rgba(90, 107, 59, 0.08); --red: #A63D2F; --red-light: #C15445; --text-primary: #2E3226; --text-secondary: #5C6350; --text-muted: #A5AB97; --border: #E0DAC6; --border-light: #CFC7AD; --header-bg: rgba(244, 241, 232, 0.92); --hero-mask: linear-gradient(180deg, rgba(244,241,232,0.40) 0%, rgba(244,241,232,0.55) 45%, rgba(244,241,232,0.93) 100%); --nav-mobile-bg: rgba(244, 241, 232, 0.98); --tag-bg: rgba(253, 252, 248, 0.85); --tag-fg: #45522D; --sold-overlay: rgba(253, 252, 248, 0.55); --sold-mark-fg: rgba(46, 50, 38, 0.8); --sold-mark-bd: rgba(46, 50, 38, 0.55); --btn-gold-fg: #FDFCF8; } /* ---------- 犬 T04 守护者 · 石板雾蓝（深） ---------- */ body[data-theme="dog-guardian"] { --bg: #1A222A; --surface: #232D38; --surface-2: #293540; --surface-3: #31404C; --gold: #8FB3C7; --gold-light: #B4D2E0; --gold-dark: #6E8CA0; --gold-soft: rgba(143, 179, 199, 0.09); --red: #A03232; --red-light: #BC4040; --text-primary: #EEF3F6; --text-secondary: #9FB0BC; --text-muted: #6C7A85; --border: #2E3A44; --border-light: #3A4854; --header-bg: rgba(26, 34, 42, 0.92); --hero-mask: linear-gradient(180deg, rgba(26,34,42,0.55) 0%, rgba(26,34,42,0.62) 45%, rgba(26,34,42,0.94) 100%); --nav-mobile-bg: rgba(26, 34, 42, 0.98); --tag-bg: rgba(26, 34, 42, 0.78); --tag-fg: #B4D2E0; --sold-overlay: rgba(26, 34, 42, 0.62); --sold-mark-fg: rgba(238, 243, 246, 0.85); --sold-mark-bd: rgba(238, 243, 246, 0.7); --btn-gold-fg: #1A222A; } /* ---------- 犬 T05 学者 · 羊皮靛青（浅） ---------- */ body[data-theme="dog-scholar"] { --bg: #F5F0E4; --surface: #FCFAF2; --surface-2: #F9F6EC; --surface-3: #EFE8D6; --gold: #2F4B6E; --gold-light: #45679A; --gold-dark: #243B57; --gold-soft: rgba(47, 75, 110, 0.07); --red: #A33636; --red-light: #C04545; --text-primary: #2B2F38; --text-secondary: #5A6070; --text-muted: #ABAFB8; --border: #E5DCC6; --border-light: #D6CBAD; --header-bg: rgba(245, 240, 228, 0.92); --hero-mask: linear-gradient(180deg, rgba(245,240,228,0.40) 0%, rgba(245,240,228,0.55) 45%, rgba(245,240,228,0.93) 100%); --nav-mobile-bg: rgba(245, 240, 228, 0.98); --tag-bg: rgba(252, 250, 242, 0.85); --tag-fg: #243B57; --sold-overlay: rgba(252, 250, 242, 0.55); --sold-mark-fg: rgba(43, 47, 56, 0.8); --sold-mark-bd: rgba(43, 47, 56, 0.55); --btn-gold-fg: #FCFAF2; } /* ---------- 犬 T06 调解者 · 藕粉暖褐（浅） ---------- */ body[data-theme="dog-mediator"] { --bg: #F9F4F2; --surface: #FFFFFF; --surface-2: #FDF9F7; --surface-3: #F1E6E1; --gold: #A46A54; --gold-light: #C08970; --gold-dark: #87503D; --gold-soft: rgba(164, 106, 84, 0.08); --red: #B0575A; --red-light: #C96C6F; --text-primary: #3D322E; --text-secondary: #6E5D56; --text-muted: #B5A69F; --border: #EDDFD9; --border-light: #DECBC1; --header-bg: rgba(249, 244, 242, 0.92); --hero-mask: linear-gradient(180deg, rgba(249,244,242,0.40) 0%, rgba(249,244,242,0.55) 45%, rgba(249,244,242,0.93) 100%); --nav-mobile-bg: rgba(249, 244, 242, 0.98); --tag-bg: rgba(255, 255, 255, 0.85); --tag-fg: #87503D; --sold-overlay: rgba(255, 255, 255, 0.55); --sold-mark-fg: rgba(61, 50, 46, 0.8); --sold-mark-bd: rgba(61, 50, 46, 0.55); --btn-gold-fg: #FFFFFF; } /* ---------- 犬 T07 欢乐精灵 · 柠檬珊瑚（浅） ---------- */ body[data-theme="dog-sprite"] { --bg: #FFFAEB; --surface: #FFFFFF; --surface-2: #FFFDF2; --surface-3: #F9F0CB; --gold: #D97706; --gold-light: #F59E0B; --gold-dark: #B45309; --gold-soft: rgba(217, 119, 6, 0.09); --red: #E14E4E; --red-light: #F06A6A; --text-primary: #3B2F0E; --text-secondary: #715C24; --text-muted: #BCA96A; --border: #F5E9C0; --border-light: #E8D894; --header-bg: rgba(255, 250, 235, 0.92); --hero-mask: linear-gradient(180deg, rgba(255,250,235,0.40) 0%, rgba(255,250,235,0.55) 45%, rgba(255,250,235,0.93) 100%); --nav-mobile-bg: rgba(255, 250, 235, 0.98); --tag-bg: rgba(255, 255, 255, 0.85); --tag-fg: #B45309; --sold-overlay: rgba(255, 255, 255, 0.55); --sold-mark-fg: rgba(59, 47, 14, 0.8); --sold-mark-bd: rgba(59, 47, 14, 0.55); --btn-gold-fg: #FFFFFF; } /* ---------- 犬 T08 禅修者 · 原木墨灰（浅 · 全站最低饱和） ---------- */ body[data-theme="dog-zen"] { --bg: #EFEDE8; --surface: #F7F5F1; --surface-2: #F3F1EC; --surface-3: #E8E5DF; --gold: #5B5B56; --gold-light: #7B7B74; --gold-dark: #46463F; --gold-soft: rgba(91, 91, 86, 0.07); --red: #9A5B5B; --red-light: #B47171; --text-primary: #2E2E2A; --text-secondary: #5C5C56; --text-muted: #A5A59E; --border: #DCD8D0; --border-light: #C8C4BA; --header-bg: rgba(239, 237, 232, 0.92); --hero-mask: linear-gradient(180deg, rgba(239,237,232,0.40) 0%, rgba(239,237,232,0.55) 45%, rgba(239,237,232,0.93) 100%); --nav-mobile-bg: rgba(239, 237, 232, 0.98); --tag-bg: rgba(247, 245, 241, 0.85); --tag-fg: #46463F; --sold-overlay: rgba(247, 245, 241, 0.55); --sold-mark-fg: rgba(46, 46, 42, 0.8); --sold-mark-bd: rgba(46, 46, 42, 0.55); --btn-gold-fg: #F7F5F1; } /* ---------- 犬 T09 艺术家 · 雾紫绛红（浅） ---------- */ body[data-theme="dog-artist"] { --bg: #F2EFF5; --surface: #FAF8FC; --surface-2: #F6F3F9; --surface-3: #E9E3EF; --gold: #6B4E7B; --gold-light: #8A6A9C; --gold-dark: #543D63; --gold-soft: rgba(107, 78, 123, 0.08); --red: #A34556; --red-light: #BC5A6B; --text-primary: #2F2837; --text-secondary: #5C5266; --text-muted: #ACA0B5; --border: #E1D9E7; --border-light: #CFC4D7; --header-bg: rgba(242, 239, 245, 0.92); --hero-mask: linear-gradient(180deg, rgba(242,239,245,0.40) 0%, rgba(242,239,245,0.55) 45%, rgba(242,239,245,0.93) 100%); --nav-mobile-bg: rgba(242, 239, 245, 0.98); --tag-bg: rgba(250, 248, 252, 0.85); --tag-fg: #543D63; --sold-overlay: rgba(250, 248, 252, 0.55); --sold-mark-fg: rgba(47, 40, 55, 0.8); --sold-mark-bd: rgba(47, 40, 55, 0.55); --btn-gold-fg: #FAF8FC; } /* ---------- 猫 1 探险家 · 橄榄焦土（浅） ---------- */ body[data-theme="cat-explorer"] { --bg: #F5F1E6; --surface: #FCFAF2; --surface-2: #F8F5EB; --surface-3: #EAE3CE; --gold: #6E7B3A; --gold-light: #8B9A54; --gold-dark: #55602B; --gold-soft: rgba(110, 123, 58, 0.08); --red: #A6482E; --red-light: #C15E42; --text-primary: #38311F; --text-secondary: #675D44; --text-muted: #B0A787; --border: #E3DBC3; --border-light: #D2C7A6; --header-bg: rgba(245, 241, 230, 0.92); --hero-mask: linear-gradient(180deg, rgba(245,241,230,0.40) 0%, rgba(245,241,230,0.55) 45%, rgba(245,241,230,0.93) 100%); --nav-mobile-bg: rgba(245, 241, 230, 0.98); --tag-bg: rgba(252, 250, 242, 0.85); --tag-fg: #55602B; --sold-overlay: rgba(252, 250, 242, 0.55); --sold-mark-fg: rgba(56, 49, 31, 0.8); --sold-mark-bd: rgba(56, 49, 31, 0.55); --btn-gold-fg: #FCFAF2; } /* ---------- 猫 2 影子猫 · 午夜冷银（深） ---------- */ body[data-theme="cat-shadow"] { --bg: #0F1012; --surface: #17181B; --surface-2: #1D1E22; --surface-3: #25272C; --gold: #B8BFC6; --gold-light: #D3D8DD; --gold-dark: #99A1A9; --gold-soft: rgba(184, 191, 198, 0.08); --red: #8E3B4A; --red-light: #A84A5B; --text-primary: #EFF1F3; --text-secondary: #A4ABB2; --text-muted: #666C73; --border: #26282C; --border-light: #33363B; --header-bg: rgba(15, 16, 18, 0.92); --hero-mask: linear-gradient(180deg, rgba(15,16,18,0.55) 0%, rgba(15,16,18,0.62) 45%, rgba(15,16,18,0.94) 100%); --nav-mobile-bg: rgba(15, 16, 18, 0.98); --tag-bg: rgba(15, 16, 18, 0.78); --tag-fg: #D3D8DD; --sold-overlay: rgba(15, 16, 18, 0.62); --sold-mark-fg: rgba(239, 241, 243, 0.85); --sold-mark-bd: rgba(239, 241, 243, 0.7); --btn-gold-fg: #0F1012; } /* ---------- 猫 3 隐士 · 亚麻苔绿（浅 · 最大留白） ---------- */ body[data-theme="cat-hermit"] { --bg: #F0EEE8; --surface: #F8F7F3; --surface-2: #F4F2ED; --surface-3: #E7E4DB; --gold: #7A8471; --gold-light: #99A38E; --gold-dark: #5F6857; --gold-soft: rgba(122, 132, 113, 0.08); --red: #9C6158; --red-light: #B5776E; --text-primary: #31332E; --text-secondary: #61645B; --text-muted: #A9ABA1; --border: #DFDCD2; --border-light: #CBC8BC; --header-bg: rgba(240, 238, 232, 0.92); --hero-mask: linear-gradient(180deg, rgba(240,238,232,0.40) 0%, rgba(240,238,232,0.55) 45%, rgba(240,238,232,0.93) 100%); --nav-mobile-bg: rgba(240, 238, 232, 0.98); --tag-bg: rgba(248, 247, 243, 0.85); --tag-fg: #5F6857; --sold-overlay: rgba(248, 247, 243, 0.55); --sold-mark-fg: rgba(49, 51, 46, 0.8); --sold-mark-bd: rgba(49, 51, 46, 0.55); --btn-gold-fg: #F8F7F3; } /* ---------- 猫 4 表演家 · 聚光玫粉（浅） ---------- */ body[data-theme="cat-performer"] { --bg: #FBF5F6; --surface: #FFFFFF; --surface-2: #FDF8F9; --surface-3: #F5E4E8; --gold: #D95C82; --gold-light: #E87FA0; --gold-dark: #B84969; --gold-soft: rgba(217, 92, 130, 0.08); --red: #C0394F; --red-light: #D95468; --text-primary: #3A2229; --text-secondary: #705059; --text-muted: #B99AA2; --border: #F2E0E4; --border-light: #E2C8CD; --header-bg: rgba(251, 245, 246, 0.92); --hero-mask: linear-gradient(180deg, rgba(251,245,246,0.40) 0%, rgba(251,245,246,0.55) 45%, rgba(251,245,246,0.93) 100%); --nav-mobile-bg: rgba(251, 245, 246, 0.98); --tag-bg: rgba(255, 255, 255, 0.85); --tag-fg: #B84969; --sold-overlay: rgba(255, 255, 255, 0.55); --sold-mark-fg: rgba(58, 34, 41, 0.8); --sold-mark-bd: rgba(58, 34, 41, 0.55); --btn-gold-fg: #FFFFFF; } /* ---------- 猫 5 哲学家 · 靛夜月白（深） ---------- */ body[data-theme="cat-philosopher"] { --bg: #14182B; --surface: #1C2138; --surface-2: #232943; --surface-3: #2B3350; --gold: #D7DCE8; --gold-light: #EDF1F7; --gold-dark: #B9C0D1; --gold-soft: rgba(215, 220, 232, 0.08); --red: #A04758; --red-light: #BB5A6C; --text-primary: #EDF0F7; --text-secondary: #A6ADC2; --text-muted: #6A7089; --border: #272D47; --border-light: #333A58; --header-bg: rgba(20, 24, 43, 0.92); --hero-mask: linear-gradient(180deg, rgba(20,24,43,0.55) 0%, rgba(20,24,43,0.62) 45%, rgba(20,24,43,0.94) 100%); --nav-mobile-bg: rgba(20, 24, 43, 0.98); --tag-bg: rgba(20, 24, 43, 0.78); --tag-fg: #EDF1F7; --sold-overlay: rgba(20, 24, 43, 0.62); --sold-mark-fg: rgba(237, 240, 247, 0.85); --sold-mark-bd: rgba(237, 240, 247, 0.7); --btn-gold-fg: #14182B; } /* ---------- 猫 6 守卫者 · 青铜矿绿（深） ---------- */ body[data-theme="cat-guardian"] { --bg: #1D2118; --surface: #262B20; --surface-2: #2D3326; --surface-3: #363D2E; --gold: #8FA272; --gold-light: #AEBF94; --gold-dark: #71835A; --gold-soft: rgba(143, 162, 114, 0.09); --red: #9C4438; --red-light: #B65548; --text-primary: #EDEFE5; --text-secondary: #A3AA93; --text-muted: #69705C; --border: #30362A; --border-light: #3C4434; --header-bg: rgba(29, 33, 24, 0.92); --hero-mask: linear-gradient(180deg, rgba(29,33,24,0.55) 0%, rgba(29,33,24,0.62) 45%, rgba(29,33,24,0.94) 100%); --nav-mobile-bg: rgba(29, 33, 24, 0.98); --tag-bg: rgba(29, 33, 24, 0.78); --tag-fg: #AEBF94; --sold-overlay: rgba(29, 33, 24, 0.62); --sold-mark-fg: rgba(237, 239, 229, 0.85); --sold-mark-bd: rgba(237, 239, 229, 0.7); --btn-gold-fg: #1D2118; } /* ---------- 猫 7 小公主 · 珠光玫瑰金（浅） ---------- */ body[data-theme="cat-royal"] { --bg: #FAF6F3; --surface: #FFFFFF; --surface-2: #FDFAF8; --surface-3: #F2E7E1; --gold: #C4897A; --gold-light: #DBA695; --gold-dark: #A66E5F; --gold-soft: rgba(196, 137, 122, 0.08); --red: #B5574D; --red-light: #CE6F64; --text-primary: #3B2723; --text-secondary: #6F5049; --text-muted: #BCA29A; --border: #EFD9D0; --border-light: #E0C0B4; --header-bg: rgba(250, 246, 243, 0.92); --hero-mask: linear-gradient(180deg, rgba(250,246,243,0.40) 0%, rgba(250,246,243,0.55) 45%, rgba(250,246,243,0.93) 100%); --nav-mobile-bg: rgba(250, 246, 243, 0.98); --tag-bg: rgba(255, 255, 255, 0.85); --tag-fg: #A66E5F; --sold-overlay: rgba(255, 255, 255, 0.55); --sold-mark-fg: rgba(59, 39, 35, 0.8); --sold-mark-bd: rgba(59, 39, 35, 0.55); --btn-gold-fg: #FFFFFF; } /* ---------- 猫 8 忍者 · 炭黑朱红（深） ---------- */ body[data-theme="cat-ninja"] { --bg: #131313; --surface: #1B1B1B; --surface-2: #212121; --surface-3: #292929; --gold: #C33A2F; --gold-light: #E05243; --gold-dark: #9E2C24; --gold-soft: rgba(195, 58, 47, 0.10); --red: #8B2635; --red-light: #A83242; --text-primary: #F2F0EE; --text-secondary: #A6A3A0; --text-muted: #6B6967; --border: #2A2A2A; --border-light: #363636; --header-bg: rgba(19, 19, 19, 0.92); --hero-mask: linear-gradient(180deg, rgba(19,19,19,0.55) 0%, rgba(19,19,19,0.62) 45%, rgba(19,19,19,0.94) 100%); --nav-mobile-bg: rgba(19, 19, 19, 0.98); --tag-bg: rgba(19, 19, 19, 0.78); --tag-fg: #E05243; --sold-overlay: rgba(19, 19, 19, 0.62); --sold-mark-fg: rgba(242, 240, 238, 0.85); --sold-mark-bd: rgba(242, 240, 238, 0.7); --btn-gold-fg: #FFFFFF; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-light); } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } h1, h2, h3, h4 { font-family: var(--display-font); font-weight: 600; line-height: 1.4; color: var(--text-primary); } /* ---------- 顶部导航 ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand-name { font-family: var(--display-font); font-size: 22px; font-weight: 700; color: var(--gold); letter-spacing: var(--brand-track); } .brand-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; } .nav-links a { color: var(--text-secondary); font-size: 15px; letter-spacing: 1px; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--gold); } .nav-cta { display: inline-block; padding: 8px 20px; border: 1px solid var(--gold); color: var(--gold); font-size: 13px; letter-spacing: 2px; transition: all var(--motion); border-radius: var(--radius-btn); } .nav-cta:hover { background: var(--gold); color: var(--btn-gold-fg); } .nav-toggle { display: none; } .nav-toggle-label { display: none; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; font-size: 22px; color: var(--gold); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: var(--hero-min); display: flex; align-items: center; justify-content: var(--hero-justify); overflow: hidden; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-mask { position: absolute; inset: 0; background: var(--hero-mask); } .hero-content { position: relative; padding: 96px 0 88px; max-width: 640px; text-align: var(--hero-align); } .hero-badge { display: inline-block; padding: 6px 18px; margin-bottom: 26px; border: 1px solid var(--gold); color: var(--gold-light); font-size: 13px; letter-spacing: 3px; font-family: var(--display-font); border-radius: var(--radius-btn); } .hero h1 { font-size: clamp(38px, 6vw, 60px); font-weight: 900; margin-bottom: 20px; background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: var(--hero-h1-shadow); } .hero-sub { font-size: 18px; color: var(--text-secondary); font-weight: 300; margin-bottom: 40px; letter-spacing: 1px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .btn-gold { display: inline-block; padding: 14px 36px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--btn-gold-fg); font-weight: 600; font-size: 15px; letter-spacing: 2px; transition: opacity var(--motion), transform var(--motion); border-radius: var(--radius-btn); } .btn-gold:hover { opacity: 0.9; transform: translateY(-2px); color: var(--btn-gold-fg); } .btn-ghost { display: inline-block; padding: 14px 36px; border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 15px; letter-spacing: 2px; transition: all var(--motion); border-radius: var(--radius-btn); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* ---------- 数据条 ---------- */ .stat-strip { border-bottom: 1px solid var(--border); background: var(--surface); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat-item { padding: 30px 16px; text-align: center; border-left: 1px solid var(--border); } .stat-item:first-child { border-left: none; } .stat-value { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1.2; } .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; letter-spacing: 1px; } /* ---------- 区块 ---------- */ .section { padding: var(--section-pad) 0; } .section.alt { background: var(--surface); } .section-head { text-align: center; margin-bottom: 52px; } .section-label { font-size: 12px; color: var(--gold); letter-spacing: 4px; text-transform: uppercase; font-family: var(--font-serif); margin-bottom: 12px; } .section-title { font-size: clamp(26px, 4vw, 34px); font-weight: 700; margin-bottom: 14px; } .section-desc { color: var(--text-secondary); max-width: 620px; margin: 0 auto; font-size: 15px; } .section-head .divider { width: var(--divider-w); height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* ---------- 幼犬卡片 ---------- */ .puppy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; } .puppy-card { background: var(--surface-2); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); overflow: hidden; transition: transform var(--motion), border-color var(--motion), box-shadow var(--motion); position: relative; display: flex; flex-direction: column; } .puppy-card:hover { transform: var(--hover-lift); border-color: var(--gold); box-shadow: var(--card-hover-shadow); } .puppy-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .puppy-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion); } .puppy-card:hover .puppy-cover img { transform: scale(var(--cover-scale)); } .puppy-tag { position: absolute; top: 14px; left: 14px; padding: 4px 12px; background: var(--tag-bg); border: 1px solid var(--gold); color: var(--tag-fg); font-size: 12px; letter-spacing: 1px; backdrop-filter: blur(4px); border-radius: var(--radius-tag); transform: var(--tag-transform); } .sold-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--sold-overlay); } .sold-watermark span { font-family: var(--font-serif); font-size: 34px; font-weight: 900; letter-spacing: 10px; color: var(--sold-mark-fg); border: 3px solid var(--sold-mark-bd); padding: 8px 26px; transform: rotate(-12deg); } .puppy-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; } .puppy-name-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .puppy-name { font-family: var(--font-serif); font-size: 21px; font-weight: 700; color: var(--text-primary); } .puppy-gender { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; } .puppy-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .puppy-price { font-family: var(--font-serif); font-size: 22px; color: var(--gold); font-weight: 700; margin-bottom: 14px; } .puppy-price small { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 6px; } .puppy-price .sold-label { color: var(--text-muted); font-size: 16px; } .puppy-link { margin-top: auto; color: var(--gold); font-size: 14px; letter-spacing: 1px; } .puppy-link::after { content: ' →'; transition: margin .2s; } .puppy-card:hover .puppy-link::after { margin-left: 4px; } /* ---------- 优势卡片 ---------- */ .adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .adv-card { background: var(--surface-2); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); padding: 30px 26px; transition: border-color var(--motion); } .adv-card:hover { border-color: var(--gold); } .adv-icon { font-size: 26px; color: var(--gold); margin-bottom: 16px; font-family: var(--font-serif); } .adv-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); } .adv-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.8; } /* ---------- 买家秀（首页轮播改为横向滚动列表） ---------- */ .story-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 340px; gap: 24px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; } .story-card { scroll-snap-align: start; background: var(--surface-2); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; } .story-cover { aspect-ratio: 16 / 10; overflow: hidden; } .story-cover img { width: 100%; height: 100%; object-fit: cover; } .story-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; } .story-quote { font-size: 14px; color: var(--text-secondary); line-height: 1.85; flex: 1; } .story-quote::before { content: '“'; color: var(--gold); font-size: 22px; font-family: var(--font-serif); } .story-quote::after { content: '”'; color: var(--gold); font-size: 22px; font-family: var(--font-serif); } .story-from { margin-top: 14px; font-size: 13px; color: var(--gold); text-align: right; } .story-scene { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-light); padding: 2px 10px; border-radius: var(--radius-chip); margin-top: 6px; display: inline-block; } /* ---------- 日志时间线 ---------- */ .timeline { position: relative; max-width: 760px; margin: 0 auto; } .timeline::before { content: ''; position: absolute; left: 20px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--gold), var(--border)); } .tl-item { position: relative; padding: 0 0 44px 64px; } .tl-item:last-child { padding-bottom: 0; } .tl-dot { position: absolute; left: 14px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); } .tl-date { font-size: 13px; color: var(--gold); letter-spacing: 1px; margin-bottom: 6px; } .tl-cat { display: inline-block; font-size: 11px; padding: 2px 10px; margin-left: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-chip); color: var(--text-muted); } .tl-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; margin-bottom: 8px; } .tl-text { font-size: 15px; color: var(--text-secondary); margin-bottom: 12px; } .tl-img { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); max-width: 420px; } /* ---------- 品种指南 ---------- */ .breed-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 40px; } .breed-fact { background: var(--surface-2); border: var(--card-border); border-radius: var(--radius-inner); padding: 18px; text-align: center; } .breed-fact-label { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 4px; } .breed-fact-value { font-family: var(--font-serif); font-size: 17px; color: var(--gold); font-weight: 600; } .index-row { margin-bottom: 18px; } .index-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 7px; } .index-name { color: var(--text-primary); } .index-note { color: var(--text-muted); font-size: 12px; } .index-score { color: var(--gold); font-family: var(--font-serif); font-weight: 700; } .index-bar { height: 7px; border-radius: 100px; background: var(--surface-3); overflow: hidden; } .index-bar > span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); } .risk-list { display: grid; gap: 18px; } .risk-item { background: var(--surface-2); border: var(--card-border); border-radius: var(--radius-card); padding: 22px 24px; } .risk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .risk-name { font-family: var(--font-serif); font-size: 17px; font-weight: 700; } .risk-level { font-size: 11px; padding: 2px 12px; border-radius: 100px; letter-spacing: 1px; border: 1px solid; font-weight: 600; } .risk-high { color: #E8807A; border-color: rgba(232,128,122,0.5); background: rgba(232,128,122,0.08); } .risk-mid { color: var(--gold-light); border-color: rgba(232,200,90,0.45); background: rgba(232,200,90,0.07); } .risk-low { color: #7FBF8E; border-color: rgba(127,191,142,0.45); background: rgba(127,191,142,0.07); } .risk-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; } .risk-prev { font-size: 13px; color: var(--text-muted); } .risk-prev::before { content: '预防建议 · '; color: var(--gold); } .stage-row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); } .stage-row:last-child { border-bottom: none; } .stage-name { font-family: var(--font-serif); font-size: 16px; color: var(--gold); font-weight: 600; } .stage-advice { font-size: 14px; color: var(--text-secondary); } .fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .fit-card { border-radius: 10px; padding: 28px; border: 1px solid var(--border); background: var(--surface-2); } .fit-card.good { border-color: rgba(212,175,55,0.35); } .fit-card.bad { border-color: rgba(139,38,53,0.45); } .fit-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; margin-bottom: 16px; } .fit-card.good .fit-title { color: var(--gold); } .fit-card.bad .fit-title { color: var(--red-light); } .fit-card ul { list-style: none; } .fit-card li { font-size: 14px; color: var(--text-secondary); padding: 7px 0 7px 22px; position: relative; } .fit-card.good li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); } .fit-card.bad li::before { content: '✕'; position: absolute; left: 0; color: var(--red-light); } /* ---------- FAQ ---------- */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: 14px; overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-serif); font-size: 16.5px; font-weight: 600; color: var(--text-primary); } .faq-item summary::-webkit-details-marker { display: none; } .faq-chev { color: var(--gold); transition: transform .2s; font-size: 14px; flex-shrink: 0; } .faq-item[open] .faq-chev { transform: rotate(180deg); } .faq-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; font-family: var(--font-sans); font-weight: 400; } .faq-tag.modified { background: rgba(212,175,55,.15); color: var(--gold); border: 1px solid rgba(212,175,55,.3); } .faq-tag.new { background: rgba(76,175,80,.15); color: #66bb6a; border: 1px solid rgba(76,175,80,.3); } .faq-item[open] summary { border-bottom: 1px solid var(--border); } .faq-answer { padding: 18px 24px 22px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.9; } /* ---------- 微信 CTA ---------- */ .cta-band { background: radial-gradient(circle at 15% 30%, rgba(212,175,55,0.12) 0%, transparent 45%), radial-gradient(circle at 85% 70%, rgba(139,38,53,0.18) 0%, transparent 50%), var(--surface); border-top: 1px solid var(--border); padding: 72px 0; } .cta-inner { text-align: center; max-width: 560px; margin: 0 auto; } .cta-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin-bottom: 14px; } .cta-desc { color: var(--text-secondary); font-size: 15px; margin-bottom: 30px; } .wechat-card { display: inline-flex; align-items: center; gap: 18px; background: var(--surface-2); border: 1px solid rgba(212,175,55,0.4); border-radius: 12px; padding: 20px 32px; } .wechat-id { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--gold); letter-spacing: 1px; } .wechat-label { font-size: 12px; color: var(--text-muted); letter-spacing: 2px; text-align: left; } .cta-note { margin-top: 18px; font-size: 13px; color: var(--text-muted); } /* 固定微信咨询浮动按钮（全站常驻转化入口，锚点跳转到 CTA 区） */ .float-wechat { position: fixed; right: 20px; bottom: 24px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; background: linear-gradient(135deg, var(--gold), var(--gold-strong, #b8860b)); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1px; border-radius: 100px; box-shadow: 0 8px 24px rgba(212,175,55,0.35); transition: transform .2s ease, box-shadow .2s ease; } .float-wechat:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(212,175,55,0.45); } .float-wechat .fw-icon { font-size: 16px; } @media (max-width: 720px) { .float-wechat { right: 16px; bottom: 18px; padding: 0 16px; } } /* ---------- 页脚 ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg); padding: 44px 0 36px; } .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; } .footer-brand { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--gold); letter-spacing: 4px; margin-bottom: 8px; } .footer-info { font-size: 13px; color: var(--text-muted); line-height: 2; } .footer-links { font-size: 13px; color: var(--text-muted); line-height: 2.2; text-align: right; } .footer-links a { color: var(--text-secondary); } .footer-links a:hover { color: var(--gold); } .footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); text-align: center; } /* ---------- 子页头部 + 面包屑 ---------- */ .page-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 52px 0 44px; } .breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--gold); } .breadcrumb .sep { margin: 0 8px; color: var(--border-light); } .page-title { font-size: clamp(28px, 4.5vw, 40px); font-weight: 900; margin-bottom: 12px; } .page-desc { color: var(--text-secondary); font-size: 15px; max-width: 640px; } /* ---------- 幼犬详情页 ---------- */ .pd-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; } .pd-gallery-main { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; background: var(--surface-2); } .pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .pd-gallery-main.is-sold img { filter: grayscale(.55); } .pd-gallery-main .sold-watermark span { font-size: 44px; } .pd-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } .pd-thumb { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; cursor: pointer; opacity: 0.75; transition: opacity .2s, border-color .2s; } .pd-thumb:hover, .pd-thumb.active { opacity: 1; border-color: var(--gold); } .pd-thumb img { width: 100%; height: 100%; object-fit: cover; } .pd-info h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 900; margin-bottom: 6px; } .pd-status { display: inline-block; font-size: 12px; padding: 3px 14px; border-radius: 100px; letter-spacing: 1px; margin-bottom: 18px; } .pd-status.available { color: var(--gold-light); border: 1px solid rgba(212,175,55,0.5); background: var(--gold-soft); } .pd-status.sold { color: var(--text-muted); border: 1px solid var(--border-light); } .pd-price-row { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--gold); margin-bottom: 22px; } .pd-price-row small { font-size: 13px; color: var(--text-muted); font-family: var(--font-sans); font-weight: 400; } .pd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 26px; } .pd-fact { font-size: 14px; color: var(--text-secondary); border-bottom: 1px dashed var(--border); padding-bottom: 9px; } .pd-fact b { color: var(--text-primary); font-weight: 600; margin-right: 8px; color: var(--gold); } .pd-personality { background: var(--surface-2); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 20px 24px; font-size: 14.5px; color: var(--text-secondary); margin-bottom: 26px; } .pd-section-title { font-size: 19px; font-weight: 700; margin: 44px 0 20px; padding-left: 14px; border-left: 3px solid var(--gold); } /* 健康记录时间线（复用 .timeline 基础结构，紧凑变体） */ .health-timeline .tl-item { padding-bottom: 26px; } .health-timeline .tl-item:last-child { padding-bottom: 0; } .health-timeline .tl-text { font-size: 14px; } .health-type { display: inline-block; font-size: 12px; padding: 1px 10px; margin-left: 10px; border-radius: 100px; border: 1px solid var(--border-light); color: var(--gold-light); } .pd-note { background: var(--gold-soft); border: 1px solid rgba(212,175,55,0.3); border-radius: 10px; padding: 16px 20px; font-size: 14px; color: var(--text-secondary); margin-top: 22px; } .pd-sold-info { font-size: 14px; color: var(--text-secondary); margin-top: 18px; line-height: 2; } /* ---------- 关于页 ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .about-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } .about-text p { margin-bottom: 16px; color: var(--text-secondary); font-size: 15px; } .breeder-card { display: flex; gap: 24px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 30px; } .breeder-photo { width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); flex-shrink: 0; } .breeder-photo img { width: 100%; height: 100%; object-fit: cover; } .breeder-quote { font-family: var(--font-serif); font-size: 16px; color: var(--gold-light); line-height: 1.9; } .breeder-name { margin-top: 10px; font-size: 14px; color: var(--text-secondary); } .parent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .parent-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .parent-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .parent-body { padding: 22px 24px; } .parent-role { font-size: 12px; color: var(--gold); letter-spacing: 2px; margin-bottom: 6px; } .parent-name { font-family: var(--font-serif); font-size: 22px; font-weight: 700; margin-bottom: 8px; } .parent-title { font-size: 13px; color: var(--gold); margin-bottom: 8px; } .parent-desc { font-size: 13.5px; color: var(--text-secondary); } /* ---------- 主理人事迹卡片 ---------- */ .achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .achievement-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .achievement-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; } .achievement-body { padding: 20px 22px; } .achievement-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; margin-bottom: 8px; } .achievement-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; } /* ---------- 通用 ---------- */ .text-center { text-align: center; } .mt-8 { margin-top: 32px; } .archive-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; } .archive-nav a { font-size: 13px; color: var(--text-muted); border: 1px solid var(--border); padding: 5px 16px; border-radius: 100px; transition: all .2s; } .archive-nav a:hover { color: var(--gold); border-color: var(--gold); } .month-label { font-family: var(--font-serif); font-size: 15px; color: var(--gold); margin: 36px 0 20px; letter-spacing: 2px; } .month-label:first-child { margin-top: 0; } /* ---------- 响应式 ---------- */ @media (max-width: 860px) { .pd-grid, .about-grid, .parent-grid, .fit-columns { grid-template-columns: 1fr; } .stage-row { grid-template-columns: 1fr; gap: 8px; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(3) { border-left: none; } .stat-item { border-top: 1px solid var(--border); } .stat-item:nth-child(-n+2) { border-top: none; } .footer-links { text-align: left; } .hero { min-height: 480px; } .section { padding: 56px 0; } } @media (max-width: 720px) { .nav-toggle-label { display: flex; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--nav-mobile-bg); border-bottom: 1px solid var(--border); flex-direction: column; gap: 0; padding: 8px 0; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 13px 28px; } .nav-links .nav-cta { margin: 10px 28px; display: inline-block; } .nav-toggle:checked ~ .nav-links { display: flex; } .nav-bar { position: relative; } .pd-facts { grid-template-columns: 1fr; } .breeder-card { flex-direction: column; text-align: center; } } /* ============================================================ 布局 DNA · 每套主题的结构差异层 ------------------------------------------------------------ 圆角语言 / hero 构图 / 密度 / 边框语言 / 动效 / 展示字体与配色变量共同构成主题，区别于"千篇一律的换色"。（移动端统一紧凑布局，DNA 主要作用于 ≥861px 桌面端视觉） ============================================================ */ /* ---------- 经典：暖阳（亲和 · 胶囊 · 柔影） ---------- */ body[data-theme="sunshine"] { --radius-card: 14px; --radius-btn: 100px; --radius-tag: 100px; --radius-inner: 12px; --hero-justify: center; --hero-align: center; --section-pad: 84px; --card-shadow: 0 6px 24px rgba(180, 83, 9, 0.06); --card-hover-shadow: 0 10px 32px rgba(180, 83, 9, 0.1); --hover-lift: translateY(-4px); --brand-track: 4px; } /* ---------- 犬 T01 指挥官（威严 · 锐利 · 静态秩序） ---------- */ body[data-theme="dog-commander"] { --radius-card: 0; --radius-btn: 0; --radius-tag: 0; --radius-chip: 0; --radius-inner: 0; --brand-track: 10px; --hero-min: 620px; --section-pad: 88px; --hover-lift: none; --cover-scale: 1; --divider-w: 72px; --motion: .2s; } body[data-theme="dog-commander"] .puppy-card { border-top: 3px solid var(--gold); } body[data-theme="dog-commander"] .stat-item { border-left-width: 1px; } /* ---------- 犬 T02 快乐使者（热情 · 圆润 · 居中舞台） ---------- */ body[data-theme="dog-joybringer"] { --radius-card: 20px; --radius-btn: 100px; --radius-tag: 100px; --radius-inner: 16px; --hero-justify: center; --hero-align: center; --section-pad: 84px; --brand-track: 2px; --tag-transform: rotate(-2deg); --hover-lift: translateY(-6px); --cover-scale: 1.07; --divider-w: 84px; --display-font: var(--font-sans); } /* ---------- 犬 T03 探险家（野性 · 虚线手账 · 左侧路标） ---------- */ body[data-theme="dog-explorer"] { --radius-card: 6px; --radius-inner: 4px; --card-border: 1px dashed var(--border-light); --hero-min: 520px; --brand-track: 4px; --section-pad: 80px; --hover-lift: none; --cover-scale: 1; --divider-w: 64px; } body[data-theme="dog-explorer"] .puppy-card { border-left: 3px solid var(--gold); } body[data-theme="dog-explorer"] .puppy-card:hover { border-style: solid; } /* ---------- 犬 T04 守护者（对称 · 徽章 · 慢速沉稳） ---------- */ body[data-theme="dog-guardian"] { --radius-card: 2px; --radius-btn: 100px; --radius-inner: 2px; --hero-justify: center; --hero-align: center; --hero-min: 600px; --section-pad: 88px; --hover-lift: none; --cover-scale: 1; --motion: .4s; --brand-track: 8px; } body[data-theme="dog-guardian"] .hero-badge { padding: 6px 26px; } /* ---------- 犬 T05 学者（书卷 · 脚注编号 · 左侧书脊） ---------- */ body[data-theme="dog-scholar"] { --radius-card: 2px; --radius-inner: 2px; --radius-chip: 2px; --hero-min: 500px; --section-pad: 72px; --brand-track: 8px; --hover-lift: none; --cover-scale: 1; } body[data-theme="dog-scholar"] .section-label::before { content: '§ '; } body[data-theme="dog-scholar"] .puppy-card { border-left: 3px solid var(--gold); } body[data-theme="dog-scholar"] .index-bar { height: 5px; } /* ---------- 犬 T06 调解者（柔和 · 阴影替代边框 · 无位移） ---------- */ body[data-theme="dog-mediator"] { --radius-card: 18px; --radius-btn: 100px; --radius-tag: 100px; --radius-inner: 14px; --card-border: 1px solid transparent; --card-shadow: 0 10px 32px rgba(61, 50, 46, 0.07); --card-hover-shadow: 0 14px 40px rgba(61, 50, 46, 0.11); --hero-justify: center; --hero-align: center; --hero-min: 480px; --section-pad: 90px; --hover-lift: none; --cover-scale: 1.03; --brand-track: 4px; } /* ---------- 犬 T07 欢乐精灵（跳脱 · 大圆角 · 旋转角标） ---------- */ body[data-theme="dog-sprite"] { --radius-card: 24px; --radius-btn: 100px; --radius-tag: 100px; --radius-inner: 18px; --hero-justify: center; --hero-align: center; --section-pad: 84px; --brand-track: 2px; --tag-transform: rotate(-3deg); --hover-lift: translateY(-8px); --cover-scale: 1.08; --divider-w: 96px; --display-font: var(--font-sans); } /* ---------- 犬 T08 禅修者（侘寂 · 无边框 · 极致留白） ---------- */ body[data-theme="dog-zen"] { --radius-card: 4px; --radius-inner: 2px; --radius-chip: 2px; --card-border: 1px solid var(--border); --section-pad: 110px; --hero-min: 520px; --brand-track: 12px; --hover-lift: none; --cover-scale: 1; --motion: .15s; --divider-w: 24px; } body[data-theme="dog-zen"] .puppy-tag { border: none; } body[data-theme="dog-zen"] .section-label { letter-spacing: 8px; } body[data-theme="dog-zen"] { line-height: 1.9; } /* ---------- 犬 T09 艺术家（不对称 · 右置 hero · 错落网格） ---------- */ body[data-theme="dog-artist"] { --radius-card: 0; --radius-inner: 0; --radius-chip: 0; --hero-justify: flex-end; --hero-align: left; --hero-min: 560px; --section-pad: 84px; --brand-track: 4px; --hover-lift: translateY(-4px); } body[data-theme="dog-artist"] .hero-content { max-width: 560px; } body[data-theme="dog-artist"] .section-title { font-style: italic; } body[data-theme="dog-artist"] .brand-name { font-style: italic; } body[data-theme="dog-artist"] .puppy-grid .puppy-card:nth-child(even) { margin-top: 26px; } /* ---------- 猫 1 探险家（干燥大地 · 印章角标） ---------- */ body[data-theme="cat-explorer"] { --radius-card: 8px; --radius-inner: 6px; --hero-min: 520px; --brand-track: 8px; --section-pad: 80px; --hover-lift: translateY(-4px); } body[data-theme="cat-explorer"] .puppy-tag { text-transform: uppercase; letter-spacing: 2px; } /* ---------- 猫 2 影子猫（神秘 · 隐形边框 · 悬停显形） ---------- */ body[data-theme="cat-shadow"] { --radius-card: 2px; --radius-inner: 2px; --radius-chip: 2px; --card-border: 1px solid transparent; --brand-track: 14px; --hero-min: 600px; --section-pad: 84px; --hover-lift: none; --cover-scale: 1; --divider-w: 32px; --hero-h1-shadow: 0 0 36px rgba(184, 191, 198, 0.3); } body[data-theme="cat-shadow"] .puppy-card:hover { border-color: var(--border-light); } body[data-theme="cat-shadow"] .puppy-card:hover .puppy-cover img { transform: scale(1.03); } /* ---------- 猫 3 隐士（独处 · 窄栏 · 居中静默） ---------- */ body[data-theme="cat-hermit"] { --radius-card: 6px; --radius-inner: 4px; --hero-justify: center; --hero-align: center; --section-pad: 96px; --hero-min: 500px; --hover-lift: none; --cover-scale: 1; --brand-track: 8px; --divider-w: 40px; } body[data-theme="cat-hermit"] .hero-content { max-width: 520px; } /* ---------- 猫 4 表演家（聚光 · 玫粉光晕 · 强浮动） ---------- */ body[data-theme="cat-performer"] { --radius-card: 16px; --radius-btn: 100px; --radius-tag: 100px; --radius-inner: 12px; --hero-justify: center; --hero-align: center; --section-pad: 86px; --brand-track: 4px; --hover-lift: translateY(-6px); --cover-scale: 1.07; --divider-w: 70px; --hero-h1-shadow: 0 0 42px rgba(217, 92, 130, 0.35); } /* ---------- 猫 5 哲学家（思辨 · 居中引文 · 底部压条） ---------- */ body[data-theme="cat-philosopher"] { --radius-card: 0; --radius-inner: 0; --radius-chip: 0; --hero-justify: center; --hero-align: center; --section-pad: 84px; --hero-min: 580px; --brand-track: 8px; --hover-lift: none; --cover-scale: 1; } body[data-theme="cat-philosopher"] .puppy-card { border-bottom: 2px solid var(--gold); } body[data-theme="cat-philosopher"] .section-label::before { content: '— '; } body[data-theme="cat-philosopher"] .section-label::after { content: ' —'; } body[data-theme="cat-philosopher"] .story-quote { text-align: center; } /* ---------- 猫 6 守卫者（堡垒 · 厚边 · 块面阴影） ---------- */ body[data-theme="cat-guardian"] { --radius-card: 0; --radius-btn: 0; --radius-tag: 0; --radius-chip: 0; --radius-inner: 0; --card-border: 1px solid var(--border-light); --brand-track: 10px; --hero-min: 580px; --section-pad: 80px; --hover-lift: none; --cover-scale: 1; } body[data-theme="cat-guardian"] .puppy-card { box-shadow: 4px 4px 0 var(--border); } body[data-theme="cat-guardian"] .stat-item { border-left: 2px solid var(--border-light); } /* ---------- 猫 7 小公主（皇家 · 双线画框 · 优雅斜体） ---------- */ body[data-theme="cat-royal"] { --radius-card: 12px; --radius-inner: 10px; --radius-chip: 100px; --hero-justify: center; --hero-align: center; --section-pad: 92px; --hero-min: 560px; --hover-lift: translateY(-3px); --brand-track: 5px; } body[data-theme="cat-royal"] .brand-name { font-style: italic; } body[data-theme="cat-royal"] .puppy-card::after { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid var(--gold); opacity: .4; border-radius: 8px; } /* ---------- 猫 8 忍者（锐利 · 快速 · 无渐变纯色） ---------- */ body[data-theme="cat-ninja"] { --radius-card: 0; --radius-btn: 0; --radius-tag: 0; --radius-chip: 0; --radius-inner: 0; --brand-track: 10px; --hero-min: 560px; --section-pad: 76px; --hover-lift: none; --cover-scale: 1; --motion: .12s; --divider-w: 26px; } body[data-theme="cat-ninja"] .hero h1 { background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); } body[data-theme="cat-ninja"] .puppy-card:hover { border-left: 3px solid var(--gold); } /* ============================================================ 布局原型层（Layout Archetypes） ------------------------------------------------------------ 在 DNA 令牌之上重组页面结构，形成"一眼可辨"的布局差异： A 名册列表卡片横排成行（血统登记册式） B 画廊双列大幅卡片 2 列（展廊式） C 社交卡流密集 3-4 列圆角卡（信息流式） D 杂志窄栏窄容器 + 行卡 + 极简（刊物式）叠加维度：hero 构图（全幅 / 杂志面板 / 底部压条）、区块标题对齐（居中 / 左对齐竖线）、数据条形态、买家秀排布。 ============================================================ */ /* ============ 原型 A：名册列表（横向行卡） ============ */ /* 指挥官 / 探险家(犬) / 学者 / 探险家(猫) / 忍者 */ body[data-theme="dog-commander"] .puppy-card, body[data-theme="dog-explorer"] .puppy-card, body[data-theme="dog-scholar"] .puppy-card, body[data-theme="cat-explorer"] .puppy-card, body[data-theme="cat-ninja"] .puppy-card { flex-direction: row; align-items: stretch; } body[data-theme="dog-commander"] .puppy-cover, body[data-theme="dog-explorer"] .puppy-cover, body[data-theme="dog-scholar"] .puppy-cover, body[data-theme="cat-explorer"] .puppy-cover, body[data-theme="cat-ninja"] .puppy-cover { width: 40%; aspect-ratio: 4 / 3; flex-shrink: 0; } body[data-theme="dog-commander"] .puppy-body, body[data-theme="dog-explorer"] .puppy-body, body[data-theme="dog-scholar"] .puppy-body, body[data-theme="cat-explorer"] .puppy-body, body[data-theme="cat-ninja"] .puppy-body { padding: 18px 24px; } body[data-theme="dog-commander"] .puppy-grid, body[data-theme="dog-explorer"] .puppy-grid, body[data-theme="dog-scholar"] .puppy-grid, body[data-theme="cat-explorer"] .puppy-grid, body[data-theme="cat-ninja"] .puppy-grid { grid-template-columns: 1fr; gap: 20px; max-width: 920px; } /* 忍者：紧凑行卡（扫描式阅读） */ body[data-theme="cat-ninja"] .puppy-name { font-size: 17px; } body[data-theme="cat-ninja"] .puppy-price { font-size: 18px; margin-bottom: 8px; } body[data-theme="cat-ninja"] .puppy-body { padding: 14px 20px; } /* ============ 原型 B：画廊双列（大幅卡片） ============ */ /* 艺术家 / 守护者(犬) / 影子猫 / 守卫者(猫) / 小公主 */ body[data-theme="dog-artist"] .puppy-grid, body[data-theme="dog-guardian"] .puppy-grid, body[data-theme="cat-shadow"] .puppy-grid, body[data-theme="cat-guardian"] .puppy-grid, body[data-theme="cat-royal"] .puppy-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; } body[data-theme="dog-artist"] .puppy-cover, body[data-theme="dog-guardian"] .puppy-cover, body[data-theme="cat-shadow"] .puppy-cover, body[data-theme="cat-guardian"] .puppy-cover, body[data-theme="cat-royal"] .puppy-cover { aspect-ratio: 3 / 2; } body[data-theme="dog-artist"] .puppy-name, body[data-theme="dog-guardian"] .puppy-name, body[data-theme="cat-shadow"] .puppy-name, body[data-theme="cat-guardian"] .puppy-name, body[data-theme="cat-royal"] .puppy-name { font-size: 24px; } body[data-theme="dog-artist"] .puppy-price, body[data-theme="dog-guardian"] .puppy-price, body[data-theme="cat-shadow"] .puppy-price, body[data-theme="cat-guardian"] .puppy-price, body[data-theme="cat-royal"] .puppy-price { font-size: 26px; } body[data-theme="dog-artist"] .puppy-body, body[data-theme="dog-guardian"] .puppy-body, body[data-theme="cat-shadow"] .puppy-body, body[data-theme="cat-guardian"] .puppy-body, body[data-theme="cat-royal"] .puppy-body { padding: 26px 28px 28px; } /* 买家秀由横向滚动改为双列换行网格 */ body[data-theme="dog-artist"] .story-scroll, body[data-theme="dog-guardian"] .story-scroll, body[data-theme="cat-shadow"] .story-scroll, body[data-theme="cat-guardian"] .story-scroll, body[data-theme="cat-royal"] .story-scroll { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); overflow-x: visible; padding-bottom: 0; } /* ============ 原型 C：社交卡流（密集三列圆角） ============ */ /* 暖阳 / 快乐使者 / 调解者 / 欢乐精灵 / 表演家 */ body[data-theme="sunshine"] .puppy-grid, body[data-theme="dog-joybringer"] .puppy-grid, body[data-theme="dog-mediator"] .puppy-grid, body[data-theme="dog-sprite"] .puppy-grid, body[data-theme="cat-performer"] .puppy-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } body[data-theme="sunshine"] .puppy-name, body[data-theme="dog-joybringer"] .puppy-name, body[data-theme="dog-mediator"] .puppy-name, body[data-theme="dog-sprite"] .puppy-name, body[data-theme="cat-performer"] .puppy-name { font-size: 19px; } /* 社交流签名：图片独立圆角，信息卡上浮叠压（图文分层） */ body[data-theme="sunshine"] .puppy-card, body[data-theme="dog-joybringer"] .puppy-card, body[data-theme="dog-mediator"] .puppy-card, body[data-theme="dog-sprite"] .puppy-card, body[data-theme="cat-performer"] .puppy-card { background: none; border: none; box-shadow: none; } body[data-theme="sunshine"] .puppy-cover, body[data-theme="dog-joybringer"] .puppy-cover, body[data-theme="dog-mediator"] .puppy-cover, body[data-theme="dog-sprite"] .puppy-cover, body[data-theme="cat-performer"] .puppy-cover { border-radius: var(--radius-card); } body[data-theme="sunshine"] .puppy-body, body[data-theme="dog-joybringer"] .puppy-body, body[data-theme="dog-mediator"] .puppy-body, body[data-theme="dog-sprite"] .puppy-body, body[data-theme="cat-performer"] .puppy-body { margin: -34px 14px 0; padding: 18px 18px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-inner); box-shadow: var(--card-shadow); } /* ============ 原型 D：杂志窄栏（窄容器 + 行卡 + 面板 hero） ============ */ /* 学者 / 禅修者 / 隐士 / 哲学家 */ body[data-theme="dog-scholar"] .container, body[data-theme="dog-zen"] .container, body[data-theme="cat-hermit"] .container, body[data-theme="cat-philosopher"] .container { max-width: 1000px; } body[data-theme="dog-zen"] .container { max-width: 920px; } body[data-theme="cat-hermit"] .container { max-width: 880px; } body[data-theme="dog-zen"] .puppy-card, body[data-theme="cat-hermit"] .puppy-card { flex-direction: row; align-items: stretch; border: none; border-bottom: 1px solid var(--border); border-radius: 0; } body[data-theme="dog-zen"] .puppy-cover, body[data-theme="cat-hermit"] .puppy-cover { width: 30%; aspect-ratio: 4 / 3; flex-shrink: 0; } body[data-theme="dog-zen"] .puppy-grid, body[data-theme="cat-hermit"] .puppy-grid { grid-template-columns: 1fr; gap: 0; } body[data-theme="dog-zen"] .puppy-body, body[data-theme="cat-hermit"] .puppy-body { padding: 20px 8px 24px 28px; } /* 杂志面板 hero：内容置于磨砂面板上，左缘金色书脊 */ body[data-theme="dog-scholar"] .hero-content, body[data-theme="dog-zen"] .hero-content, body[data-theme="cat-philosopher"] .hero-content { background: var(--header-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 52px 56px; max-width: 560px; } body[data-theme="cat-philosopher"] .hero-content { border-left: none; border-bottom: 2px solid var(--gold); text-align: center; padding: 44px 48px; } /* 忍者：hero 底部压条（内容沉底，顶部细红线） */ body[data-theme="cat-ninja"] .hero { align-items: flex-end; } body[data-theme="cat-ninja"] .hero-content { padding: 0 0 48px; } body[data-theme="cat-ninja"] .hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); z-index: 2; } /* ============ 区块标题排布：名册/杂志系左对齐 + 竖线 ============ */ body[data-theme="dog-commander"] .section-head, body[data-theme="dog-explorer"] .section-head, body[data-theme="dog-scholar"] .section-head, body[data-theme="cat-explorer"] .section-head, body[data-theme="cat-ninja"] .section-head, body[data-theme="dog-zen"] .section-head, body[data-theme="cat-hermit"] .section-head { text-align: left; } body[data-theme="dog-commander"] .section-desc, body[data-theme="dog-explorer"] .section-desc, body[data-theme="dog-scholar"] .section-desc, body[data-theme="cat-explorer"] .section-desc, body[data-theme="cat-ninja"] .section-desc, body[data-theme="dog-zen"] .section-desc, body[data-theme="cat-hermit"] .section-desc { margin: 0; } body[data-theme="dog-commander"] .section-head .divider, body[data-theme="dog-explorer"] .section-head .divider, body[data-theme="dog-scholar"] .section-head .divider, body[data-theme="cat-explorer"] .section-head .divider, body[data-theme="cat-ninja"] .section-head .divider, body[data-theme="dog-zen"] .section-head .divider, body[data-theme="cat-hermit"] .section-head .divider { margin: 18px 0 0; background: var(--gold); } body[data-theme="dog-scholar"] .section-head .divider, body[data-theme="dog-zen"] .section-head .divider, body[data-theme="cat-hermit"] .section-head .divider { width: 3px; height: 28px; } /* ============ 数据条形态 ============ */ /* 名册系：保留竖线分隔（默认）；杂志系：无边框行内式 */ body[data-theme="dog-scholar"] .stat-item, body[data-theme="dog-zen"] .stat-item, body[data-theme="cat-hermit"] .stat-item, body[data-theme="cat-philosopher"] .stat-item { border-left: none; text-align: left; padding: 26px 8px; } body[data-theme="dog-scholar"] .stat-grid, body[data-theme="dog-zen"] .stat-grid, body[data-theme="cat-hermit"] .stat-grid, body[data-theme="cat-philosopher"] .stat-grid { grid-template-columns: repeat(4, auto); justify-content: space-between; } /* 社交流系：数值放大居中（默认形态即居中，仅放大数值） */ body[data-theme="sunshine"] .stat-value, body[data-theme="dog-joybringer"] .stat-value, body[data-theme="dog-mediator"] .stat-value, body[data-theme="dog-sprite"] .stat-value, body[data-theme="cat-performer"] .stat-value { font-size: 36px; } /* ============ 响应式：原型在窄屏统一回落紧凑竖卡 ============ */ @media (max-width: 860px) { body[data-theme="dog-commander"] .puppy-card, body[data-theme="dog-explorer"] .puppy-card, body[data-theme="dog-scholar"] .puppy-card, body[data-theme="cat-explorer"] .puppy-card, body[data-theme="cat-ninja"] .puppy-card, body[data-theme="dog-zen"] .puppy-card, body[data-theme="cat-hermit"] .puppy-card { flex-direction: column; } body[data-theme="dog-commander"] .puppy-cover, body[data-theme="dog-explorer"] .puppy-cover, body[data-theme="dog-scholar"] .puppy-cover, body[data-theme="cat-explorer"] .puppy-cover, body[data-theme="cat-ninja"] .puppy-cover, body[data-theme="dog-zen"] .puppy-cover, body[data-theme="cat-hermit"] .puppy-cover { width: 100%; } body[data-theme="dog-artist"] .puppy-grid, body[data-theme="dog-guardian"] .puppy-grid, body[data-theme="cat-shadow"] .puppy-grid, body[data-theme="cat-guardian"] .puppy-grid, body[data-theme="cat-royal"] .puppy-grid, body[data-theme="sunshine"] .puppy-grid, body[data-theme="dog-joybringer"] .puppy-grid, body[data-theme="dog-mediator"] .puppy-grid, body[data-theme="dog-sprite"] .puppy-grid, body[data-theme="cat-performer"] .puppy-grid { grid-template-columns: 1fr; } body[data-theme="dog-artist"] .story-scroll, body[data-theme="dog-guardian"] .story-scroll, body[data-theme="cat-shadow"] .story-scroll, body[data-theme="cat-guardian"] .story-scroll, body[data-theme="cat-royal"] .story-scroll { grid-template-columns: 1fr; } body[data-theme="dog-scholar"] .hero-content, body[data-theme="dog-zen"] .hero-content, body[data-theme="cat-philosopher"] .hero-content { padding: 32px 26px; margin: 0 24px; } body[data-theme="dog-scholar"] .stat-grid, body[data-theme="dog-zen"] .stat-grid, body[data-theme="cat-hermit"] .stat-grid, body[data-theme="cat-philosopher"] .stat-grid { grid-template-columns: repeat(2, 1fr); } }