/* --- 本地字体库 --- */ @font-face { font-family: 'Antonio'; src: url('../webfonts/antonio-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Bitter'; src: url('../webfonts/bitter-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Bitter'; src: url('../webfonts/bitter-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Bitter'; src: url('../webfonts/bitter-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Bodoni'; src: url('../webfonts/bodoni-moda-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Bodoni'; src: url('../webfonts/bodoni-moda-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Bodoni'; src: url('../webfonts/bodoni-moda-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant'; src: url('../webfonts/cormorant-garamond-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant'; src: url('../webfonts/cormorant-garamond-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Cormorant'; src: url('../webfonts/cormorant-garamond-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Dm'; src: url('../webfonts/dm-serif-display-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Dm'; src: url('../webfonts/dm-serif-display-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Dosis'; src: url('../webfonts/dosis-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Doto'; src: url('../webfonts/doto-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-brands-400.ttf') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-brands-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-regular-400.ttf') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-regular-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-solid-900.ttf') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-solid-900.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-v4compatibility.ttf') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fa'; src: url('../webfonts/fa-v4compatibility.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../webfonts/fraunces-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../webfonts/fraunces-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../webfonts/fraunces-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../webfonts/inter-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../webfonts/inter-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../webfonts/inter-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../webfonts/jetbrainsmono-bold.ttf') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../webfonts/jetbrainsmono-extrabold.ttf') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../webfonts/jetbrainsmono-light.ttf') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../webfonts/jetbrainsmono-medium.ttf') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../webfonts/jetbrainsmono-regular.ttf') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../webfonts/jetbrainsmono-semibold.ttf') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../webfonts/lexend-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../webfonts/lexend-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lora'; src: url('../webfonts/lora-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lora'; src: url('../webfonts/lora-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lora'; src: url('../webfonts/lora-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../webfonts/manrope-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../webfonts/manrope-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../webfonts/montserrat-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../webfonts/montserrat-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src: url('../webfonts/oswald-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src: url('../webfonts/oswald-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Oxanium'; src: url('../webfonts/oxanium-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair'; src: url('../webfonts/playfair-display-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair'; src: url('../webfonts/playfair-display-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Playfair'; src: url('../webfonts/playfair-display-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus'; src: url('../webfonts/plus-jakarta-sans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus'; src: url('../webfonts/plus-jakarta-sans-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Plus'; src: url('../webfonts/plus-jakarta-sans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Prata'; src: url('../webfonts/prata-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Smoochsans'; src: url('../webfonts/smoochsans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('../webfonts/sora-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('../webfonts/sora-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Syne'; src: url('../webfonts/syne-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Syne'; src: url('../webfonts/syne-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* TS Site - 终极物理还原自救版 (1:1 绝对对齐) */ /* 引入精选字体 */ @font-face { font-family: 'Oswald'; src: url('../webfonts/oswald-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* 在线引用已切断 */ :root { --globalBgColor: #121212; --cardBgColor: #1e1e1e; --primaryColor: #00ffcc; --mutedTextColor: #666666; --text-color: #eeeeee; --fontBody: 'JetBrains Mono', monospace; --containerMaxWidth: 75vw; --capsuleGridGap: 40px; --cardColsDesktop: 5; --cardColsMobile: 2; --cardMinWidth: 280px; --cardPortraitRatio: 4 / 6; --cardLandscapeRatio: 3 / 2; --cardHoverScale: 1.03; --cardHoverBrightness: 0.6; } /* 基础物理重置 */ html, body { margin: 0; padding: 0; background: var(--globalBgColor); color: var(--text-color); font-family: var(--fontBody) !important; font-size: 1.1rem !important; -webkit-font-smoothing: antialiased; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } a { text-decoration: none !important; color: inherit; } /* 顶栏 (高度 100px, 磨砂) */ .topbar { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid #333; z-index: 10000; padding: 0 40px; display: flex; flex-direction: column; } .topbar-top { display: flex; justify-content: space-between; align-items: flex-end; height: 60px; padding-bottom: 10px; } .topbar-bottom { display: none; justify-content: flex-end; align-items: center; height: 40px; padding-bottom: 10px; } .topbar-bottom.active { display: flex; } .logo { font-size: 18px; font-weight: 800; color: var(--primaryColor) !important; letter-spacing: -0.5px; } .nav-group { font-size: 16px; color: #888; padding: 0 20px; cursor: pointer; } .nav-group.active { color: var(--primaryColor) !important; } .nav-item { font-size: 12.8px; color: var(--primaryColor) !important; padding: 0 15px; } /* 核心内容区 */ .main-shell { max-width: var(--containerMaxWidth); margin: 0 auto; width: 100%; } .intro-container { margin-top: 150px; margin-bottom: 40px; } .intro-title { font-size: 1.1rem; color: var(--primaryColor) !important; font-weight: 800; margin: 0 0 10px 0; } .intro-text { font-size: 0.8rem; color: var(--mutedTextColor) !important; line-height: 1.6; margin: 5px 0 0 0; } /* 瀑布流网格 */ .grid { display: block; width: 100%; margin: 0 auto 40px; column-count: 5; column-gap: var(--capsuleGridGap); } .card { display: inline-block; width: 100%; margin-bottom: var(--capsuleGridGap); background: var(--cardBgColor); border-radius: 3px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.3s; position: relative; overflow: hidden; box-shadow: 1px 2px 2px rgba(128,128,128,0.24); } .card:hover { transform: scale(1.05); z-index: 100; box-shadow: 0 0 0 1px var(--primaryColor), 0 10px 40px rgba(0,0,0,0.8); border-color: var(--primaryColor); } .card-img { width: 100%; display: block; object-fit: cover; object-position: 50% 0%; transition: 0.3s; } .card:hover .card-img { filter: brightness(0.6); } .card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%); transform: translateY(100%); transition: 0.3s; display: flex; flex-direction: column; align-items: flex-start; } .card:hover .card-overlay { transform: translateY(0); } /* 卡片文字顺序：标题在上，标签在下 */ .card-h { font-size: 13px !important; color: #fff; font-weight: 600; letter-spacing: 0.5px; margin: 0 0 6px 0 !important; } .card-tag { font-size: 9px !important; color: #000 !important; font-weight: 700; background: var(--primaryColor); padding: 2px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px; } /* 文章详情 */ .post-shell { margin: 140px auto 100px; background: var(--card-bg); border-radius: 32px; width: var(--containerMaxWidth); max-width: 1600px; border: 1px solid #333; overflow: hidden; box-shadow: 0 10px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; } /* 顶部与底部返回条 (高度 100px, 强制居中) */ .back-bar { height: 100px; min-height: 100px; border-bottom: 1px solid #333; display: flex; justify-content: center; align-items: center; padding: 0 40px; } .post-shell > .back-bar:last-of-type { border-bottom: none; border-top: 1px solid #333; margin-top: auto; /* 确保在底部 */ } .back-btn { font-family: var(--fontNav) !important; color: var(--primaryColor) !important; font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; /* 舒展开 */ display: flex; align-items: center; justify-content: center; } .post-main { padding: 40px 60px 80px; flex: 1; } .post-h { font-size: 28.8px !important; color: var(--primaryColor) !important; font-weight: 800; margin: 20px 0 !important; padding-bottom: 20px !important; border-bottom: 1px solid #333 !important; letter-spacing: -1px !important; } .post-intro { border-left: 4px solid #eee !important; padding: 24px !important; margin: 0 0 32px 0 !important; font-size: 15px !important; line-height: 1.6; color: #eee; } /* 相册布局修正 */ .post-album { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; } .post-album-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin: 40px 0; } .post-album img, .post-album-4 img { width: 100% !important; border: 1px solid #333; cursor: zoom-in; } /* 悬浮图标 */ .float-bar { position: fixed; bottom: 120px; right: 20px; display: flex; flex-direction: column; gap: 15px; z-index: 999999; } .float-btn { width: 80px; height: 80px; background: #1a1a1a; color: var(--primaryColor); display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 32px; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .float-btn:hover { transform: scale(1.05); color: #fff; box-shadow: 0 0 20px var(--primaryColor); } @media (max-width: 1080px) { .grid { column-count: 2; column-gap: 20px; } .post-shell, .main-shell { max-width: 95vw; } .post-album { grid-template-columns: 1fr; } .post-album-4 { grid-template-columns: 1fr 1fr; } } /* --- 响应式瀑布流物理引擎 (终极纠偏版) --- */ .grid { display: block !important; width: 100% !important; column-width: var(--cardMinWidth) !important; column-count: var(--cardColsDesktop) !important; column-gap: var(--capsuleGridGap) !important; padding: 40px !important; margin: 0 auto !important; box-sizing: border-box !important; } .card { display: inline-block !important; width: 100% !important; margin-bottom: var(--capsuleGridGap) !important; break-inside: avoid !important; overflow: visible !important; /* 核心：让 hover 阴影能溢出 */ border-radius: 3px !important; background: transparent !important; /* 透明背景，依靠 img-wrap 的圆角 */ position: relative !important; cursor: pointer !important; opacity: 0; transform: translateY(40px); animation: waterfallFadeIn 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards; } .img-wrap { position: relative !important; overflow: hidden !important; /* 核心：在这里锁死 overlay 溢出 */ border-radius: 3px !important; background: var(--cardBgColor) !important; width: 100% !important; box-shadow: 1px 2px 10px rgba(0,0,0,0.3) !important; transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s !important; } .card-img { width: 100% !important; height: auto !important; object-fit: cover !important; object-position: 50% 0% !important; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), filter 0.4s !important; display: block !important; } .card-img.portrait { aspect-ratio: var(--cardPortraitRatio) !important; } .card-img.landscape { aspect-ratio: var(--cardLandscapeRatio) !important; } /* 悬停效果绑定在 .card 上，但作用于 .img-wrap */ .card:hover { z-index: 100 !important; } .card:hover .img-wrap { box-shadow: 0 0 0 1px var(--primaryColor), 0 10px 40px rgba(0,0,0,0.8) !important; transform: translateY(-5px) scale(1.02) !important; } .card:hover .card-img { transform: scale(var(--cardHoverScale)) !important; filter: brightness(var(--cardHoverBrightness)) !important; } .card:active .img-wrap { transform: scale(1) !important; transition: none !important; } .card-overlay { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 15px !important; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%) !important; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important; pointer-events: none !important; } .card:hover .card-overlay { transform: translateY(0) !important; } @media (max-width: 600px) { .grid { column-count: var(--cardColsMobile) !important; column-width: auto !important; column-gap: 15px !important; padding: 15px !important; } .card-overlay { transform: translateY(0) !important; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%) !important; } .card:hover .img-wrap { transform: none !important; } .card:hover .card-img { transform: none !important; } } @keyframes waterfallFadeIn { to { opacity: 1; transform: translateY(0); } }