/* ===================================================================== theme-azure.css — 仿 iProof（moban7062）版式视觉指纹：主题色实心品牌块 / 斜杠式双横线区块标题 / 交替底色带左侧时间轴 / 描边填充按钮 / 深色双层页脚 / 圆角白卡配色：iProof 真实默认方案 = 主色 #e91e63（粉，theme-color-1.css 覆盖 style.css 基色 #619ff1）深色 #222 浅灰带 #f9f9f9 卡片灰 #f4f5f6 深色底图 #16273f 仅在下生效，加载于 style.css 之后 ===================================================================== */ body[data-theme="azure"] { --ip: #e91e63; --ip-dark: #c2185b; --ip-ink: #222; --ip-mute: #777; --ip-line: #e9e9e9; --ip-gray: #f9f9f9; --ip-card: #f4f5f6; --ip-rad: 4px; background: #fff; color: var(--ip-ink); font-family: "Open Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; font-size: 14px; line-height: 26px; letter-spacing: 0; } body[data-theme="azure"] ::selection { background: var(--ip); color: #fff; } /* 新增组件适配别名（复用 :root 共享变量名，基础样式由 style.css 驱动） */ body[data-theme="azure"] { --panel: var(--ip-card); --panel-strong: var(--ip-gray); --text: var(--ip-ink); --text-strong: #161616; --text-body: #3a3a3a; --text-dim: var(--ip-mute); --teal: #2e7d32; --ice: var(--ip-dark); --border: var(--ip-line); --radius: var(--ip-rad); --cyan: var(--ip); --on-accent: #fff; --grad: linear-gradient(100deg, #e91e63, #c2185b); --grad-soft: linear-gradient(100deg, rgba(233,30,99,.12), rgba(194,24,91,.12)); --border-glow: rgba(233,30,99,.5); --accent-rgb: 233,30,99; --ease: cubic-bezier(.22,.61,.36,1); } /* 亮色主题下关掉深空装饰层 */ body[data-theme="azure"] .aurora, body[data-theme="azure"] .cursor-glow { display: none; } body[data-theme="azure"] .scroll-progress { background: var(--ip); box-shadow: none; height: 2px; } body[data-theme="azure"] .ip-wrap { overflow-x: hidden; } body[data-theme="azure"] .ip-container, body[data-theme="azure"] .container { width: min(1170px, 92vw); max-width: 1170px; padding: 0 15px; margin: 0 auto; } /* --------------------------------------------------------------- 1. 导航栏 — iProof 最强指纹：主题色实心品牌块 + 下划线滑动 --------------------------------------------------------------- */ body[data-theme="azure"] .nav { position: fixed; top: 0; left: 0; right: 0; height: 60px; padding: 0; background: transparent; border-bottom: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color .25s ease-in-out, box-shadow .25s; } body[data-theme="azure"] .nav .container { width: min(1170px, 92vw); height: 60px; padding: 0; } /* 内页 & 首页滚动后：白底黑字 + 下投影 */ body[data-theme="azure"] .nav.scrolled, body[data-theme="azure"]:not([data-home]) .nav { background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } /* 品牌：主题色实心方块，满高贴左，无圆角 */ body[data-theme="azure"] .brand { height: 60px; margin: 0; padding: 0 25px; gap: 9px; background: var(--ip); color: #fff; font-family: "Open Sans", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 18px; font-weight: 400; line-height: 60px; letter-spacing: .3px; border-radius: 0; display: flex; align-items: center; } body[data-theme="azure"] .brand .dot { width: auto; height: auto; background: none; box-shadow: none; transform: none; animation: none; border-radius: 0; color: #fff; font-size: 17px; line-height: 1; } /* 导航链接：16px，hover/active 时 1px 主题色下划线由下滑入 */ body[data-theme="azure"] .nav-links { gap: 15px; font-size: 16px; align-items: center; } body[data-theme="azure"] .nav-links a { color: #fff; padding: 17px 15px; overflow: visible; transition: color .25s ease-in-out; } body[data-theme="azure"] .nav.scrolled .nav-links a, body[data-theme="azure"]:not([data-home]) .nav-links a { color: var(--ip-ink); } body[data-theme="azure"] .nav-links a:hover, body[data-theme="azure"] .nav-links a.active { color: var(--ip); transform: none; } body[data-theme="azure"] .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; width: auto; height: 1px; background: var(--ip); transform: none; opacity: 0; visibility: hidden; transition: bottom .4s ease-in-out, opacity .4s ease-in-out, visibility .4s; } body[data-theme="azure"] .nav-links a:hover::after, body[data-theme="azure"] .nav-links a.active::after { bottom: 0; opacity: 1; visibility: visible; transform: none; } body[data-theme="azure"] .nav-toggle { border-color: var(--ip); background: transparent; border-radius: 0; } body[data-theme="azure"] .nav-toggle span { background: var(--ip); } body[data-theme="azure"] .nav.scrolled .nav-toggle, body[data-theme="azure"]:not([data-home]) .nav-toggle { border-color: var(--ip); } body[data-theme="azure"] .nav.scrolled .nav-toggle span, body[data-theme="azure"]:not([data-home]) .nav-toggle span { background: var(--ip); } /* 内页需为固定导航留出高度；首页 banner 自带留白 */ body[data-theme="azure"]:not([data-home]) main { padding-top: 60px; } /* --------------------------------------------------------------- 2. 按钮 — 描边 + 底色 scaleX 收起动画（仿 .btn-primary） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-btn { display: inline-block; position: relative; z-index: 0; overflow: hidden; padding: 9px 30px; border: 2px solid var(--ip); border-radius: var(--ip-rad); color: #fff; background: transparent; font-size: 15px; font-weight: 600; line-height: 26px; cursor: pointer; transition: color .25s ease-in-out; } body[data-theme="azure"] .ip-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--ip); transform: scaleX(1); transform-origin: 0 50%; transition: transform .25s ease-in-out; z-index: -1; } body[data-theme="azure"] .ip-btn:hover { color: var(--ip); } body[data-theme="azure"] .ip-btn:hover::before { transform: scaleX(0); } body[data-theme="azure"] .ip-btn--ghost { border-color: #fff; color: #fff; } body[data-theme="azure"] .ip-btn--ghost::before { background: #fff; transform: scaleX(0); } body[data-theme="azure"] .ip-btn--ghost:hover { color: var(--ip-ink); } body[data-theme="azure"] .ip-btn--ghost:hover::before { transform: scaleX(1); } body[data-theme="azure"] .ip-btn--onTheme { border-color: var(--ip); color: #fff; } body[data-theme="azure"] .ip-btn--onTheme::before { background: var(--ip); transform: scaleX(1); } body[data-theme="azure"] .ip-btn--onTheme:hover { color: var(--ip); } body[data-theme="azure"] .ip-btn--onTheme:hover::before { transform: scaleX(0); } /* 内页沿用的通用按钮也换成方形描边风 */ body[data-theme="azure"] .btn { background: var(--ip); color: #fff; border: 2px solid var(--ip); border-radius: var(--ip-rad); box-shadow: none; font-weight: 600; padding: 9px 28px; } body[data-theme="azure"] .btn:hover { background: transparent; color: var(--ip); transform: none; box-shadow: none; } body[data-theme="azure"] .btn.ghost { background: transparent; color: var(--ip-ink); border-color: #ccc; } body[data-theme="azure"] .btn.ghost:hover { color: var(--ip); border-color: var(--ip); } /* journal/category 已改用 .cat-link 做分类筛选，.page-banner .btn.ghost 不再使用 */ /* --------------------------------------------------------------- 3. 区块标题 — iProof 第二强指纹：h2 + 斜杠 + 双横线错位 --------------------------------------------------------------- */ body[data-theme="azure"] .ip-title { margin: -7px 0 60px; font-size: 0; line-height: 0; } body[data-theme="azure"] .ip-title h2 { display: inline-block; position: relative; z-index: 0; margin: 0; padding-bottom: 17px; font-size: 36px; line-height: 46px; font-weight: 700; letter-spacing: -.6px; color: var(--ip-ink); } body[data-theme="azure"] .ip-title h2::before, body[data-theme="azure"] .ip-title h2::after { content: ""; position: absolute; left: 0; height: 2px; z-index: -1; } body[data-theme="azure"] .ip-title h2::before { right: -12px; bottom: 5px; background: var(--ip-ink); } body[data-theme="azure"] .ip-title h2::after { right: -70px; bottom: 0; background: var(--ip); } body[data-theme="azure"] .ip-title p { display: inline-block; margin: 0; color: var(--ip-mute); font-size: 20px; line-height: 28px; } body[data-theme="azure"] .ip-title p::before { content: "/"; margin: 0 7px 0 8px; color: var(--ip-ink); font-size: 30px; line-height: 30px; font-weight: 700; } /* 深色带里的标题转为白系 */ body[data-theme="azure"] .ip-band--overlay .ip-title h2, body[data-theme="azure"] .ip-band--overlay .ip-title p, body[data-theme="azure"] .ip-band--overlay .ip-title p::before { color: #fff; } body[data-theme="azure"] .ip-band--overlay .ip-title h2::before { background: #fff; } body[data-theme="azure"] .ip-title--center { text-align: center; } /* --------------------------------------------------------------- 4. 交替底色带 --------------------------------------------------------------- */ body[data-theme="azure"] .ip-band { padding: 80px 0 20px; } body[data-theme="azure"] .ip-band--gray { background: var(--ip-gray); } body[data-theme="azure"] .ip-band--full { padding: 80px 0; } body[data-theme="azure"] .ip-band--theme { background: var(--ip); color: #fff; padding: 60px 0; } body[data-theme="azure"] .ip-band--overlay { position: relative; z-index: 0; color: #fff; background: #16273f url("../img/hero-azure.svg") center center / cover no-repeat; } body[data-theme="azure"] .ip-band--overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; opacity: .82; z-index: -1; } /* --------------------------------------------------------------- 5. Banner — 深色遮罩底图 + 左侧 7 栏内容（仿 banner--section bg--overlay） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-banner { position: relative; z-index: 0; color: #fff; padding: 175px 0 105px; background: #16273f url("../img/hero-azure.svg") center center / cover no-repeat; } body[data-theme="azure"] .ip-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; opacity: .6; z-index: -1; } body[data-theme="azure"] .ip-banner-inner { max-width: 58.33%; } body[data-theme="azure"] .ip-banner h1 { margin: 0; color: #fff; font-size: 48px; line-height: 58px; font-weight: 700; letter-spacing: 0; } body[data-theme="azure"] .ip-banner .ip-banner-sub { margin: 22px 0 0; color: #fff; font-size: 34px; line-height: 46px; font-weight: 700; letter-spacing: -.4px; } body[data-theme="azure"] .ip-banner .ip-banner-desc { margin: 16px 0 0; color: rgba(255, 255, 255, .78); font-size: 18px; line-height: 28px; font-style: italic; max-width: 34em; } body[data-theme="azure"] .ip-banner .ip-buttons { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 15px; } /* --------------------------------------------------------------- 6. 关于区 — 三栏（正文+信息 / 插图 / 侧栏进度条） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-about { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 30px; } body[data-theme="azure"] .ip-about > div { padding-bottom: 60px; } body[data-theme="azure"] .ip-about p { margin: 0 0 16px; color: #555; } body[data-theme="azure"] .ip-info { list-style: none; margin: 22px 0 0; padding: 0; } body[data-theme="azure"] .ip-info li { position: relative; padding-left: 31px; line-height: 32px; } body[data-theme="azure"] .ip-info li i { position: absolute; left: 0; top: 0; color: var(--ip); font-style: normal; font-size: 16px; } body[data-theme="azure"] .ip-about .ip-action { margin-top: 25px; } body[data-theme="azure"] .ip-figure { border: none; background: transparent; padding: 0; text-align: center; margin: 0 auto; max-width: 230px; } body[data-theme="azure"] .ip-figure img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.08); background: #f6f1e9; } body[data-theme="azure"] .ip-figure figcaption { margin-top: 10px; color: var(--ip-mute); font-size: 13px; } body[data-theme="azure"] .ip-side-title { margin: 0 0 25px; } body[data-theme="azure"] .ip-side-title h3 { display: inline-block; position: relative; margin: 0; padding-bottom: 12px; font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: -.3px; } body[data-theme="azure"] .ip-side-title h3::after { content: ""; position: absolute; left: 0; right: -30px; bottom: 0; height: 2px; background: var(--ip); } body[data-theme="azure"] .ip-side-title + .ip-side-title, body[data-theme="azure"] .ip-progress-set + .ip-side-title { margin-top: 35px; } /* 技能进度条（细 5px 轨 + 主题色填充 + 数值标签） */ body[data-theme="azure"] .ip-progress-set { margin-top: 20px; } body[data-theme="azure"] .ip-progress { position: relative; z-index: 0; padding-bottom: 12px; } body[data-theme="azure"] .ip-progress + .ip-progress { margin-top: 14px; } body[data-theme="azure"] .ip-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #f0f0f0; } body[data-theme="azure"] .ip-progress h5 { position: relative; margin: 0; padding-right: 32px; font-size: 16px; line-height: 26px; font-weight: 700; } body[data-theme="azure"] .ip-progress h5 span { position: absolute; right: 0; top: 0; color: var(--ip-mute); font-weight: 600; } body[data-theme="azure"] .ip-progress .ip-bar { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--ip); } body[data-theme="azure"] .ip-social { list-style: none; display: flex; gap: 10px; margin: 18px 0 0; padding: 0; } body[data-theme="azure"] .ip-social a { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--ip-ink); color: #fff; text-align: center; line-height: 40px; font-size: 14px; transition: background-color .25s, transform .25s; } body[data-theme="azure"] .ip-social a:hover { background: var(--ip); transform: translateY(-5px); } /* --------------------------------------------------------------- 7. 主题色行动条 — 左标题 + 右侧绝对定位按钮（仿 call-to-action） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-cta .ip-cta-inner { position: relative; padding-right: 175px; } body[data-theme="azure"] .ip-cta h2 { margin: 0; color: #fff; font-size: 28px; line-height: 40px; font-weight: 700; letter-spacing: -.4px; } body[data-theme="azure"] .ip-cta .ip-btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 6px 30px; font-size: 17px; line-height: 28px; } /* --------------------------------------------------------------- 8. 服务卡 — 左侧描边方框图标 + 右侧文案（仿 service--item） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; } body[data-theme="azure"] .ip-service { display: flex; gap: 20px; margin-bottom: 52px; } body[data-theme="azure"] .ip-service .icon { flex: 0 0 60px; width: 60px; height: 60px; color: var(--ip); border: 1px solid var(--ip); font-size: 34px; line-height: 58px; text-align: center; overflow: hidden; transition: color .25s, background-color .25s; } body[data-theme="azure"] .ip-service:hover .icon { color: #fff; background: var(--ip); } body[data-theme="azure"] .ip-service .info { overflow: hidden; } body[data-theme="azure"] .ip-service .info h3 { margin: -5px 0 5px; font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } body[data-theme="azure"] .ip-service .info p { margin: 0; color: var(--ip-mute); } /* 4b. 我落笔的样子 — 白卡 + 淡色印章字水印（与「栏目」暗色圆卡区分） */ body[data-theme="azure"] .ip-write { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } body[data-theme="azure"] .ip-write-item { position: relative; overflow: hidden; background: #fff; border: 1px solid #e6ecf3; border-radius: 14px; padding: 30px 30px 26px; min-height: 152px; } body[data-theme="azure"] .ip-write-stamp { position: absolute; right: 14px; top: -16px; font-family: "Kaiti SC","STKaiti","KaiTi",serif; font-size: 104px; line-height: 1; font-weight: 700; color: var(--ip); opacity: .12; pointer-events: none; user-select: none; } body[data-theme="azure"] .ip-write-body { position: relative; z-index: 1; } body[data-theme="azure"] .ip-write-body h3 { margin: 0 0 8px; font-size: 21px; line-height: 30px; font-weight: 600; letter-spacing: .4px; } body[data-theme="azure"] .ip-write-body p { margin: 0; color: var(--ip-mute); font-size: 15px; line-height: 27px; } /* --------------------------------------------------------------- 9. 时间轴「再往前」— 两列网格，每条自带左侧轴线 + 圆点（7062 原生 exp--items 为单列；这里按需要拆两列，窄屏回落单列） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; list-style: none; margin: 0; padding: 0; } body[data-theme="azure"] .ip-exp::before { display: none; } /* 两列后不再需要贯穿竖线 */ body[data-theme="azure"] .ip-exp > li { position: relative; display: block; margin: 0; padding: 0 0 0 26px; border-left: 2px solid #ededed; } body[data-theme="azure"] .ip-exp > li + li { margin-top: 0; } body[data-theme="azure"] .ip-exp > li::before { content: ""; position: absolute; top: 6px; left: -7px; box-sizing: border-box; width: 12px; height: 12px; background: #fff; border: 3px solid var(--ip); border-radius: 50%; } body[data-theme="azure"] .ip-exp .date { position: static; flex: none; min-width: 0; margin: 0 0 2px; padding: 0; font-size: 13px; line-height: 22px; text-align: left; color: var(--ip); font-weight: 600; letter-spacing: .5px; } body[data-theme="azure"] .ip-exp .date::before, body[data-theme="azure"] .ip-exp .date::after { display: none; } body[data-theme="azure"] .ip-exp .info { flex: none; padding: 0; background: none; border-left: 0; } body[data-theme="azure"] .ip-exp .info h3 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -.2px; } body[data-theme="azure"] .ip-exp .info h3 a { color: var(--ip-ink); } body[data-theme="azure"] .ip-exp .info h3 a:hover { color: var(--ip); } body[data-theme="azure"] .ip-exp .info .meta { margin: 2px 0 0; color: var(--ip); font-size: 13px; } body[data-theme="azure"] .ip-exp .info .meta span { margin-left: 5px; color: #999; } body[data-theme="azure"] .ip-exp .info .text { margin: 8px 0 0; color: #999; font-size: 14px; line-height: 25px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 860px) { body[data-theme="azure"] .ip-exp { grid-template-columns: 1fr; gap: 22px; } } /* --------------------------------------------------------------- 10. 栏目 — 左 60px 主题色实心圆图标 + 右标题/描述（仿 7062 service--item：.icon.icon-2.icon-circle 实心主题色 + 白图形， hover 触发 toRightFromLeft 图标滑入动画；位于深色 overlay 带） --------------------------------------------------------------- */ @keyframes toRightFromLeft { 49% { transform: translateX(100%); opacity: 0; } 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } body[data-theme="azure"] .ip-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } body[data-theme="azure"] .ip-cat { display: block; text-align: left; text-decoration: none; color: inherit; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; } body[data-theme="azure"] .ip-cat:hover { transform: translateY(-6px); border-color: var(--ip); background: rgba(255, 255, 255, .10); } body[data-theme="azure"] .ip-cat-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, .2); } body[data-theme="azure"] .ip-cat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } body[data-theme="azure"] .ip-cat:hover .ip-cat-cover img { transform: scale(1.05); } body[data-theme="azure"] .ip-cat-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--ip); color: #fff; font-size: 26px; line-height: 52px; text-align: center; } body[data-theme="azure"] .ip-cat-meta { padding: 16px 18px 20px; } body[data-theme="azure"] .ip-cat-meta h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: .3px; color: #fff; } body[data-theme="azure"] .ip-cat-meta h3 a { color: #fff; } body[data-theme="azure"] .ip-cat-meta h3 a:hover { color: var(--ip); } body[data-theme="azure"] .ip-cat-meta p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 24px; } @media (max-width: 860px) { body[data-theme="azure"] .ip-cats { grid-template-columns: 1fr; } body[data-theme="azure"] .ip-write { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- 11. 数字统计 — 居中 + 三边细框 + 圆形图标 + 数字两侧横线（仿 counter--item，位于主题色带） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } body[data-theme="azure"] .ip-counter { position: relative; z-index: 0; padding: 0 15px 28px; text-align: center; } body[data-theme="azure"] .ip-counter::before { content: ""; position: absolute; top: 33px; left: 0; right: 0; bottom: 0; border: 1px solid rgba(255, 255, 255, .45); border-top: 0; z-index: -1; } body[data-theme="azure"] .ip-counter .icon { position: relative; z-index: 0; width: 60px; height: 60px; margin: 5px auto 27px; background: #fff; color: var(--ip); border-radius: 50%; font-size: 26px; line-height: 60px; text-align: center; } body[data-theme="azure"] .ip-counter .icon::before { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 1px solid #fff; border-radius: 50%; } body[data-theme="azure"] .ip-counter .number { position: relative; margin: 0 0 21px; color: #fff; font-size: 38px; line-height: 48px; font-weight: 700; letter-spacing: -1px; } body[data-theme="azure"] .ip-counter .number::before, body[data-theme="azure"] .ip-counter .number::after { content: ""; position: absolute; top: 33px; width: 100%; height: 1px; background: #fff; } body[data-theme="azure"] .ip-counter .number::before { left: 50%; margin-left: 34px; } body[data-theme="azure"] .ip-counter .number::after { right: 50%; margin-right: 34px; } body[data-theme="azure"] .ip-counter .title { margin: 0; color: #fff; font-size: 16px; font-weight: 600; } /* --------------------------------------------------------------- 12. 文章卡 — 白卡 4px 圆角 + 柔和投影 + 大写分类（仿 post--item） --------------------------------------------------------------- */ body[data-theme="azure"] .ip-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } body[data-theme="azure"] .ip-post { display: flex; flex-direction: column; background: #fff; border-radius: var(--ip-rad); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); overflow: hidden; transition: box-shadow .25s, transform .25s; } body[data-theme="azure"] .ip-post:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .14); transform: translateY(-3px); } body[data-theme="azure"] .ip-post .ip-post-img { display: block; position: relative; overflow: hidden; } body[data-theme="azure"] .ip-post .ip-post-img img { display: block; width: 100%; height: 190px; object-fit: cover; transition: transform .45s ease-in-out; } body[data-theme="azure"] .ip-post:hover .ip-post-img img { transform: scale(1.06); } body[data-theme="azure"] .ip-post .cat { padding: 22px 20px 0; margin: 0; color: var(--ip); font-size: 15px; line-height: 25px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; } body[data-theme="azure"] .ip-post .title { margin: 0; padding: 4px 20px 12px; } body[data-theme="azure"] .ip-post .title a { color: var(--ip-ink); font-size: 21px; line-height: 32px; font-weight: 700; letter-spacing: -.3px; } body[data-theme="azure"] .ip-post .title a:hover { color: var(--ip); } body[data-theme="azure"] .ip-post .excerpt { margin: 0; padding: 0 20px; color: var(--ip-mute); font-size: 14px; line-height: 26px; flex: 1; } body[data-theme="azure"] .ip-post .ip-post-foot { margin-top: 30px; padding: 15px 20px 0; border-top: 1px solid var(--ip-card); display: flex; justify-content: space-between; align-items: center; color: #999; font-size: 13px; } body[data-theme="azure"] .ip-post .ip-post-foot a { color: var(--ip); font-weight: 600; } body[data-theme="azure"] .ip-more { text-align: center; padding: 12px 0 0; } /* --------------------------------------------------------------- 13. 页脚 — 深色区 + 纯黑备案条（iProof 双层结构） --------------------------------------------------------------- */ body[data-theme="azure"] .footer { margin-top: 0; padding: 46px 0 0; background: #222; color: #acacac; border-top: 0; font-size: 14px; } body[data-theme="azure"] .footer .container { display: block; text-align: left; } /* 页脚四栏文本统一居左（覆盖早期“居中”遗留规则） */ body[data-theme="azure"] .fw-col, body[data-theme="azure"] .fw-title, body[data-theme="azure"] .fw-about-text, body[data-theme="azure"] .fw-posts-list, body[data-theme="azure"] .fw-posts-list li, body[data-theme="azure"] .fw-links-list, body[data-theme="azure"] .fw-sub-text { text-align: left; } /* 备案信息：跟在「订阅 / 关注」模块之后，不再做黑色通栏 */ body[data-theme="azure"] .fw-beian { margin: 18px 0 0; padding: 14px 0 0; text-align: left; background: transparent; color: #8b8b8b; border-top: 1px solid rgba(255, 255, 255, .12); margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } body[data-theme="azure"] .fw-beian .beian-item { display: block; margin: 5px 0; color: #8b8b8b; font-weight: 400; } body[data-theme="azure"] .fw-beian .beian-item a { color: #c9c9c9; font-weight: 400; } body[data-theme="azure"] .fw-beian .beian-item a:hover { color: var(--ip); } body[data-theme="azure"] .to-top { border-radius: var(--ip-rad); border: 0; background: var(--ip); color: #fff; box-shadow: none; } body[data-theme="azure"] .to-top:hover { background: var(--ip-dark); box-shadow: 0 6px 18px rgba(233, 30, 99, .45); } /* =============================================================== 14. 其他页面（期刊列表 / 文章详情 / 分类 / 工作室）沿用 7062 视觉语言：粉主题色、斜杠双线标题、圆角白卡、深色 hero 仅用现有 star-theme 类名，无需改视图 =============================================================== */ /* 期刊列表头 / 分类头 —— 深色 hero（拉到固定导航之下） */ body[data-theme="azure"] .journal-head, body[data-theme="azure"] .cat-hero { position: relative; z-index: 0; margin-top: -60px; padding: 130px 0 46px; color: #fff; background: #16273f url("../img/hero-azure.svg") center center / cover no-repeat; } body[data-theme="azure"] .journal-head::before, body[data-theme="azure"] .cat-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; opacity: .6; z-index: -1; } body[data-theme="azure"] .journal-head h1 { margin: 0; font-size: 40px; line-height: 50px; font-weight: 700; color: #fff; } body[data-theme="azure"] .journal-head p { margin: 10px 0 0; color: rgba(255, 255, 255, .8); font-size: 16px; } body[data-theme="azure"] .cat-hero-inner { display: flex; align-items: center; gap: 30px; } body[data-theme="azure"] .cat-hero-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; flex: 0 0 150px; } body[data-theme="azure"] .cat-hero-text .eyebrow { display: inline-block; color: var(--ip); font-weight: 700; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; } body[data-theme="azure"] .cat-hero-text h1 { margin: 8px 0 10px; font-size: 38px; line-height: 48px; } body[data-theme="azure"] .cat-hero-text p { margin: 0 0 18px; color: rgba(255, 255, 255, .8); } body[data-theme="azure"] .cat-hero-text .btn.ghost { background: transparent; color: #fff; border-color: #fff; } body[data-theme="azure"] .cat-hero-text .btn.ghost:hover { background: #fff; color: var(--ip); } /* 分类筛选 tab */ body[data-theme="azure"] .cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; } body[data-theme="azure"] .cat-tab { display: inline-block; padding: 7px 18px; border: 1px solid var(--ip-line); border-radius: 30px; color: var(--ip-ink); font-size: 14px; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; } body[data-theme="azure"] .cat-tab.active, body[data-theme="azure"] .cat-tab:hover { background: var(--ip); border-color: var(--ip); color: #fff; } /* 分类介绍条 */ body[data-theme="azure"] .cat-intro { margin: 0 0 26px; padding: 18px 22px; background: var(--ip-gray); border-left: 4px solid var(--ip); border-radius: var(--ip-rad); } body[data-theme="azure"] .cat-intro h2 { margin: 0 0 6px; font-size: 22px; line-height: 30px; } body[data-theme="azure"] .cat-intro p { margin: 0; color: var(--ip-mute); } /* 卡片网格（期刊 / 分类列表共用） */ body[data-theme="azure"] .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } body[data-theme="azure"] .post-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--ip-rad); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); overflow: hidden; transition: box-shadow .25s, transform .25s; } body[data-theme="azure"] .post-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .14); transform: translateY(-3px); } body[data-theme="azure"] .post-cover { display: block; width: 100%; height: 190px; object-fit: cover; } body[data-theme="azure"] .post-card .post-cat { padding: 20px 20px 0; margin: 0; color: var(--ip); font-size: 14px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } body[data-theme="azure"] .post-card .meta { padding: 6px 20px 0; color: #999; font-size: 13px; } body[data-theme="azure"] .post-card h3 { margin: 0; padding: 6px 20px 10px; font-size: 20px; line-height: 30px; font-weight: 700; } body[data-theme="azure"] .post-card h3 a { color: var(--ip-ink); } body[data-theme="azure"] .post-card h3 a:hover { color: var(--ip); } body[data-theme="azure"] .post-card p { margin: 0; padding: 0 20px; color: var(--ip-mute); font-size: 14px; line-height: 26px; flex: 1; } body[data-theme="azure"] .post-card .read-more { padding: 14px 20px 20px; color: var(--ip); font-weight: 700; font-size: 14px; } body[data-theme="azure"] .post-card .read-more i { display: inline-block; transition: transform .25s; } body[data-theme="azure"] .post-card:hover .read-more i { transform: translateX(4px); } /* 文章详情 */ body[data-theme="azure"] .post-wrap { max-width: 820px; margin: 0 auto; padding: 36px 0 60px; } body[data-theme="azure"] .back-pill { display: inline-block; margin-bottom: 18px; color: var(--ip); font-weight: 600; font-size: 14px; } body[data-theme="azure"] .post-banner { width: 100%; height: auto; border-radius: var(--ip-rad); margin-bottom: 18px; } body[data-theme="azure"] .post-cat { color: var(--ip); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 14px; } body[data-theme="azure"] .post-meta { color: #999; font-size: 13px; } body[data-theme="azure"] .post-wrap h1 { font-size: 34px; line-height: 44px; font-weight: 700; margin: 6px 0 14px; } body[data-theme="azure"] .post-divider { height: 3px; width: 60px; background: var(--ip); margin: 0 0 22px; border: 0; } body[data-theme="azure"] .post-body { color: #444; font-size: 16px; line-height: 30px; } body[data-theme="azure"] .post-body p { margin: 0 0 18px; } body[data-theme="azure"] .post-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ip-line); } body[data-theme="azure"] .post-sign { color: var(--ip-mute); } /* 区块小标题（工作室 / 分类列表标题）—— 斜杠双线 */ body[data-theme="azure"] .section-head { margin: 0 0 26px; } body[data-theme="azure"] .section-head h2 { display: inline-block; position: relative; padding-bottom: 14px; font-size: 28px; line-height: 38px; font-weight: 700; } body[data-theme="azure"] .section-head h2::before { content: ""; position: absolute; left: 0; right: -12px; bottom: 5px; height: 2px; background: var(--ip-ink); z-index: -1; } body[data-theme="azure"] .section-head h2::after { content: ""; position: absolute; left: 0; right: -70px; bottom: 0; height: 2px; background: var(--ip); z-index: -1; } body[data-theme="azure"] .section-head .more { color: var(--ip); font-weight: 600; } /* 工作室页 */ body[data-theme="azure"] .hero-card.studio-hero { background: var(--ip-gray); border-radius: var(--ip-rad); padding: 40px; } body[data-theme="azure"] .studio-teaser { display: grid; grid-template-columns: 1fr; gap: 20px; } body[data-theme="azure"] .studio-hero .panel .post-cat { color: var(--ip); text-transform: uppercase; font-weight: 700; letter-spacing: .6px; font-size: 14px; } body[data-theme="azure"] .studio-hero .panel h2 { font-size: 30px; line-height: 40px; margin: 6px 0 12px; } body[data-theme="azure"] .studio-hero .panel p { color: #555; } body[data-theme="azure"] .chips { display: flex; flex-wrap: wrap; gap: 10px; } body[data-theme="azure"] .chip { padding: 6px 16px; background: #fff; border: 1px solid var(--ip-line); border-radius: 30px; font-size: 14px; } body[data-theme="azure"] .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body[data-theme="azure"] .feature { background: #fff; border-radius: var(--ip-rad); padding: 26px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } body[data-theme="azure"] .feature .ico { width: 50px; height: 50px; line-height: 48px; text-align: center; border: 1px solid var(--ip); color: var(--ip); border-radius: var(--ip-rad); margin-bottom: 14px; } body[data-theme="azure"] .feature h3 { margin: 0 0 6px; font-size: 18px; line-height: 28px; } body[data-theme="azure"] .feature p { margin: 0; color: var(--ip-mute); font-size: 14px; line-height: 24px; } body[data-theme="azure"] .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } body[data-theme="azure"] .team-card { text-align: center; padding: 20px; background: #fff; border-radius: var(--ip-rad); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } body[data-theme="azure"] .team-card .avatar { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; background: var(--ip); color: #fff; border-radius: 50%; font-size: 22px; font-weight: 700; } body[data-theme="azure"] .team-card .tname { display: block; margin-top: 10px; font-weight: 600; } @media (max-width: 1024px) { body[data-theme="azure"] .grid { grid-template-columns: repeat(2, 1fr); } body[data-theme="azure"] .features { grid-template-columns: repeat(2, 1fr); } body[data-theme="azure"] .team-grid { grid-template-columns: repeat(2, 1fr); } body[data-theme="azure"] .cat-hero-inner { flex-direction: column; text-align: center; } } @media (max-width: 560px) { body[data-theme="azure"] .grid, body[data-theme="azure"] .features, body[data-theme="azure"] .team-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- 15. 响应式（首页） --------------------------------------------------------------- */ @media (max-width: 1024px) { body[data-theme="azure"] .ip-banner-inner { max-width: 78%; } body[data-theme="azure"] .ip-about { grid-template-columns: 1fr 1fr; } body[data-theme="azure"] .ip-about > div:nth-child(2) { display: none; } body[data-theme="azure"] .ip-cats { grid-template-columns: repeat(2, 1fr); } body[data-theme="azure"] .ip-counters { grid-template-columns: repeat(2, 1fr); } body[data-theme="azure"] .ip-posts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { body[data-theme="azure"] .nav-links { top: 60px; background: #fff; border-bottom: 1px solid var(--ip-line); padding: 6px 0; gap: 0; } body[data-theme="azure"] .nav-links a { color: var(--ip-ink); padding: 12px 22px; } body[data-theme="azure"] .nav-links a::after { display: none; } /* 覆盖 style.css 中 [data-home] 更高特异性的浅色链接，避免手机菜单白底配浅色字 */ body[data-theme="azure"][data-home] .nav-links a { color: var(--ip-ink); } body[data-theme="azure"] .ip-banner { padding: 130px 0 80px; } body[data-theme="azure"] .ip-banner-inner { max-width: 100%; } body[data-theme="azure"] .ip-banner h1 { font-size: 34px; line-height: 44px; } body[data-theme="azure"] .ip-banner .ip-banner-sub { font-size: 23px; line-height: 34px; margin-top: 22px; } body[data-theme="azure"] .ip-about { grid-template-columns: 1fr; } body[data-theme="azure"] .ip-about > div:nth-child(2) { display: block; } body[data-theme="azure"] .ip-services { grid-template-columns: 1fr; } body[data-theme="azure"] .ip-write { grid-template-columns: 1fr; } body[data-theme="azure"] .ip-posts { grid-template-columns: 1fr; } body[data-theme="azure"] .ip-title h2 { font-size: 28px; line-height: 38px; } body[data-theme="azure"] .ip-title p { font-size: 16px; } body[data-theme="azure"] .ip-cta .ip-cta-inner { padding-right: 0; text-align: center; } body[data-theme="azure"] .ip-cta h2 { font-size: 22px; line-height: 34px; } body[data-theme="azure"] .ip-cta .ip-btn { position: static; transform: none; margin-top: 24px; } body[data-theme="azure"] .ip-exp::before { display: none; } body[data-theme="azure"] .ip-exp > li { flex-direction: column; } body[data-theme="azure"] .ip-exp .date { flex: none; min-width: 0; margin: 0; padding: 0 0 8px; text-align: left; } body[data-theme="azure"] .ip-exp .date::before, body[data-theme="azure"] .ip-exp .date::after { display: none; } } @media (max-width: 560px) { body[data-theme="azure"] .ip-cats { grid-template-columns: 1fr; } body[data-theme="azure"] .ip-counters { grid-template-columns: 1fr; } body[data-theme="azure"] .brand { padding: 0 16px; font-size: 16px; } } /* =============================================================== 11. 内页（日志/文章/关于）对齐 iProof(moban7062) 视觉指纹 7062 = 浅灰页面带(#f9f9f9) + 白色卡片(柔和阴影 0 2px 10px,圆角4px) + 文章卡居中 + 透明侧栏小工具(仅标题+列表) + 侧栏宽≈360px 仅作用于内页 [data-inner]，不影响首页；修复 azure 未定义 --bg 导致搜索框/代码块误用深空深色底的问题 =============================================================== */ body[data-theme="azure"][data-inner] { background:#f9f9f9; } /* 白色卡片 + 柔和阴影，替代默认灰卡（灰底白卡 = 7062 招牌观感） */ body[data-theme="azure"][data-inner] .post-item, body[data-theme="azure"][data-inner] .post-article, body[data-theme="azure"][data-inner] .post-author, body[data-theme="azure"][data-inner] .post-pager a, body[data-theme="azure"][data-inner] .post-related .rel-card, body[data-theme="azure"][data-inner] .post-comments, body[data-theme="azure"][data-inner] .testi, body[data-theme="azure"][data-inner] .about-portrait, body[data-theme="azure"][data-inner] .team-card, body[data-theme="azure"][data-inner] .studio-stats .stat, body[data-theme="azure"][data-inner] .list-empty, body[data-theme="azure"][data-inner] .widget.w-about { background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.10); } /* ---- 文章卡 = 7062 .post--item 精确指纹 ---- */ body[data-theme="azure"][data-inner] .post-item { border-radius:4px; text-align:center; margin-bottom:32px; overflow:hidden; } body[data-theme="azure"][data-inner] .post-item:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.13); } body[data-theme="azure"][data-inner] .post-body { padding:24px 20px 26px; } /* 分类 = 7062 .post--cat：封面图下方居中、18px 大写纯文字标签（azure 主题色） */ body[data-theme="azure"][data-inner] .post-item .post-cat { color: var(--ip); font-size: 18px; line-height: 28px; letter-spacing: 1px; } body[data-theme="azure"][data-inner] .post-article .post-cat { display:block; padding:22px 0 0; margin:0 0 10px; color:var(--ip); font-size:18px; line-height:28px; letter-spacing:1px; text-transform:uppercase; text-align:center; } body[data-theme="azure"][data-inner] .post-article .post-cat a { color:inherit; display:inline; } body[data-theme="azure"][data-inner] .post-article .post-cat a::before { display:none; } /* 标题 / 摘要 */ body[data-theme="azure"][data-inner] .post-title { font-size:22px; line-height:32px; font-weight:600; margin:0 0 8px; padding:0; color:var(--ip-ink); } body[data-theme="azure"][data-inner] .post-content { padding:0; } body[data-theme="azure"][data-inner] .post-content p { font-size:14px; line-height:26px; color:#777; } /* Read More = 7062 .btn-default（白底描边，hover 反色为主题色） */ body[data-theme="azure"][data-inner] .post-action { margin:0; padding:25px 20px 0; } body[data-theme="azure"][data-inner] .btn-outline { border:1px solid #ddd; border-radius:0; background:#fff; color:#222; padding:9px 26px; font-size:13px; letter-spacing:.5px; } body[data-theme="azure"][data-inner] .btn-outline:hover { background:var(--ip); border-color:var(--ip); color:#fff; } /* 封面 hover 遮罩按钮（7062 .post--img .action .btn-default 白描边） */ body[data-theme="azure"][data-inner] .btn-ghost { border-radius:0; padding:9px 26px; font-size:13px; letter-spacing:.5px; } /* 卡片页脚：7062 .post--footer = 上细线 30px 上距，左作者 / 右社交圆钮 */ body[data-theme="azure"][data-inner] .post-footer { margin-top:30px; padding:15px 20px 0; border-top:1px solid #f4f5f6; text-align:left; gap:10px; } body[data-theme="azure"][data-inner] .post-footer .pf-author, body[data-theme="azure"][data-inner] .post-footer .pf-meta { font-size:13px; color:#999; } body[data-theme="azure"][data-inner] .post-footer .pf-author a { color:#222; font-weight:600; } body[data-theme="azure"][data-inner] .post-footer .pf-social a { width:30px; height:30px; border-radius:50%; border-color:#ccc; color:#999; } body[data-theme="azure"][data-inner] .post-footer .pf-social a:hover { background:var(--ip); border-color:var(--ip); color:#fff; } body[data-theme="azure"][data-inner] .list-empty { border:0; color:#999; } /* ---- 分页 = 7062 .pagination（整条 flex 方块 + 3px 柔和投影，active 实心主题色）---- */ body[data-theme="azure"][data-inner] .pagination--wrapper { margin-top:40px; } body[data-theme="azure"][data-inner] .pagination { display:inline-flex; gap:0; box-shadow:0 3px 5px rgba(0,0,0,.10); overflow:hidden; } body[data-theme="azure"][data-inner] .pagination > li > a, body[data-theme="azure"][data-inner] .pagination > li > span { min-width:0; padding:7px 15px; border:0; border-radius:0; background:#fff; color:#222; font-size:14px; line-height:22px; } body[data-theme="azure"][data-inner] .pagination > li + li > a, body[data-theme="azure"][data-inner] .pagination > li + li > span { border-left:1px solid #f0f0f0; } body[data-theme="azure"][data-inner] .pagination > li:not(.disabled):not(.active) > a:hover { background:var(--ip); color:#fff; } body[data-theme="azure"][data-inner] .pagination > li.active > span { background:var(--ip); color:#fff; font-weight:400; } body[data-theme="azure"][data-inner] .pagination > li.disabled > span { color:#c9c9c9; background:#fff; } body[data-theme="azure"][data-inner] .pagination > li.pg-gap > span { background:#fff; color:#999; } /* 列表头 */ body[data-theme="azure"][data-inner] .list-head { color:#777; font-size:14px; margin-bottom:26px; } /* 侧栏：透明小工具块（7062 列表型 widget 无底色），作者块为白卡 */ body[data-theme="azure"][data-inner] .blog-sidebar .widget { background:transparent; border:0; box-shadow:none; padding:0 0 26px; } /* 小工具标题 = 7062 .widget--title 双横线（31px 短条 + 80px 长条） */ body[data-theme="azure"][data-inner] .widget .w-title { position:relative; border:0; padding:0 0 19px; margin:0 0 25px; font-size:19px; font-weight:600; color:var(--ip-ink); } body[data-theme="azure"][data-inner] .widget .w-title::after, body[data-theme="azure"][data-inner] .widget .w-title::before { content:" "; position:absolute; left:0; bottom:0; height:2px; background-color:var(--ip-ink); } body[data-theme="azure"][data-inner] .widget .w-title::before { bottom:6px; width:31px; } body[data-theme="azure"][data-inner] .widget .w-title::after { width:80px; } body[data-theme="azure"][data-inner] .blog-sidebar .widget.w-about { background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.10); padding:20px; text-align:center; } body[data-theme="azure"][data-inner] .blog-sidebar .widget.w-about .w-av { margin:0 auto 10px; } /* 侧栏宽 360px（7062 col-md-4 ≈ 33%） */ body[data-theme="azure"][data-inner] .blog-row { grid-template-columns:1fr 360px; gap:40px; } body[data-theme="azure"][data-inner] .blog-row.sidebar-left { grid-template-columns:360px 1fr; } @media (max-width:1024px) { body[data-theme="azure"][data-inner] .blog-row, body[data-theme="azure"][data-inner] .blog-row.sidebar-left { grid-template-columns:1fr; gap:28px; } body[data-theme="azure"][data-inner] .blog-row.sidebar-left .blog-sidebar { order:0; } } /* 搜索框 / 代码块底色修正（azure 未定义 --bg，回退深空深色，需显式覆盖） */ body[data-theme="azure"][data-inner] .search-box input { background:#fff; border:1px solid #e3e3e3; color:#222; } body[data-theme="azure"][data-inner] .search-box input:focus { border-color:var(--ip); } body[data-theme="azure"][data-inner] .pa-content pre { background:#f4f5f6; border-color:#e3e3e3; }