/* ════════════════════════════════════════════════════════════════ 昨夜星辰 · Stellaria Blog — 观星志 (VESPER) 主题 配色：深靛蓝 + 香槟金 + 星光蓝 · 支持日间 / 夜间切换 字体在 index.html 中加载 ────────────────────────────────────────────────────────────── 说明：曲率引擎「跃迁」(warp) 相关样式予以保留，仅按主题重新着色。 ════════════════════════════════════════════════════════════════ */ /* ═══════════ 夜间（默认） ═══════════ */ :root{ --void:#06060f; --void-2:#0a0a18; --card:#101023; --card-2:#15152e; --line:rgba(217,176,106,.16); --line-soft:rgba(245,242,234,.08); --star:#f5f2ea; --mist:#9d9dba; --mist-2:#6d6d88; --gold:#d9b06a; --gold-bright:#ecca86; --gold-glow:rgba(217,176,106,.32); /* 分类点缀色（小面积使用，整体仍以金/靛蓝为主） */ --ice:#88c4ec; --rose:#d98a9a; --violet:#a99adf; --teal:#80c8b6; --amber:#e0a45c; --page-bg:radial-gradient(140% 90% at 50% -10%, #11122a 0%, var(--void-2) 38%, var(--void) 72%); --panel-bg:linear-gradient(160deg,rgba(20,20,42,.6),rgba(10,10,24,.5)); --header-bg:rgba(6,6,15,.62); --input-bg:rgba(6,6,15,.6); --vignette:radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(4,4,12,.55) 100%); --grain-op:.05; --card-shadow:0 22px 56px -28px rgba(0,0,0,.8); --serif-disp:'Cormorant Garamond','Noto Serif SC',serif; --serif-cjk:'Noto Serif SC','Cormorant Garamond',serif; --sans:'Noto Sans SC','Helvetica Neue',sans-serif; --mono:'Space Mono',ui-monospace,monospace; } /* ═══════════ 日间 ═══════════ */ [data-theme="day"]{ --void:#eef4f8; --void-2:#dfeaf2; --card:#fdf8f0; --card-2:#f5eee0; --line:rgba(161,101,38,.24); --line-soft:rgba(40,32,12,.1); --star:#212a3c; --mist:#54607a; --mist-2:#8b94a8; --gold:#a16526; --gold-bright:#c0863a; --gold-glow:rgba(161,101,38,.24); --ice:#2f7bb0; --rose:#c2697a; --violet:#7a6bc4; --teal:#3f9a86; --amber:#c47f2b; --page-bg:radial-gradient(150% 95% at 50% -8%, #b6d6ec 0%, #d4e6f0 26%, #eee7d8 62%, #f4ecdd 100%); --panel-bg:linear-gradient(160deg, rgba(255,253,248,.82), rgba(250,243,232,.7)); --header-bg:rgba(247,242,233,.8); --input-bg:rgba(255,255,255,.72); --vignette:radial-gradient(120% 85% at 50% 0%, transparent 55%, rgba(255,255,255,.28) 100%); --grain-op:.03; --card-shadow:0 22px 56px -30px rgba(60,70,90,.4); } *{margin:0;padding:0;box-sizing:border-box} /* 整体放大字号（再次上调：原 16px → 现 ~18.5–21px；随视口轻微伸缩，小屏回落避免溢出） —— 想整体调大 / 调小，只改这一处的三个数字即可（Hexo 迁移后可挂到 _config 字段）。 */ html{ scroll-behavior:smooth; font-size:clamp(18.5px, 0.52vw + 16.6px, 21px); } @media (max-width:520px){ html{ font-size:18px } } body{ background:var(--page-bg); color:var(--star); font-family:var(--sans); font-size:1rem; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:color .8s ease; } body.warping{overflow:hidden} body.arrived{overflow-y:auto} ::selection{background:var(--gold-glow)} /* ═══════════ 大气层 / 背景 ═══════════ */ #cosmos{position:fixed;inset:0;z-index:0;transition:opacity .8s ease} #cosmos.dim{opacity:0} /* 星轨 / 流星模式在日间柔和淡出，让日空（太阳·流云）主导 */ #cosmos.cosmos--day{opacity:.16} .day-sky{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s ease} [data-theme="day"] .day-sky{opacity:1} .day-sky .sun{position:absolute;top:8%;right:13%;width:128px;height:128px;border-radius:50%; background:radial-gradient(circle at 38% 38%, #fffdf3 0%, #ffe9a8 45%, #ffd166 75%, rgba(255,209,102,0) 100%); box-shadow:0 0 80px 28px rgba(255,214,120,.45),0 0 170px 70px rgba(255,200,90,.22); animation:sunPulse 6s ease-in-out infinite} @keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} .day-sky .sun::after{content:'';position:absolute;inset:-34px;border-radius:50%; background:repeating-conic-gradient(rgba(255,209,110,.3) 0deg 4deg, transparent 4deg 15deg); -webkit-mask:radial-gradient(transparent 55%, #000 58%, #000 73%, transparent 76%); mask:radial-gradient(transparent 55%, #000 58%, #000 73%, transparent 76%); animation:rayspin 70s linear infinite;opacity:.55} @keyframes rayspin{to{transform:rotate(360deg)}} .cloud{position:absolute;background:#fff;border-radius:100px;filter:blur(16px)} .cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:100px} .cloud::before{width:62%;height:180%;top:-70%;left:12%} .cloud::after{width:46%;height:150%;top:-48%;left:52%} .c1{top:18%;width:210px;height:46px;opacity:.7;animation:drift 95s linear infinite} .c2{top:34%;width:150px;height:38px;opacity:.45;animation:drift 130s linear infinite;animation-delay:-40s} .c3{top:12%;width:120px;height:32px;opacity:.5;animation:drift 78s linear infinite;animation-delay:-60s} @keyframes drift{from{left:-230px}to{left:112%}} .vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--vignette)} .grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:var(--grain-op); background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:256px; } /* ═══════════ 日 / 夜 跃迁过渡（日出 · 日落） ═══════════ */ .celestial-transition{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:0} .celestial-transition.run{animation:ctWash 1.3s ease forwards} .celestial-transition.to-day{background:linear-gradient(to top,#ff9e5e 0%,#ffd49a 24%,#ffeccb 42%,#bcdcef 78%)} .celestial-transition.to-night{background:linear-gradient(to top,#d98a5a 0%,#9a6f8a 22%,#3a3a66 50%,#0c0c1e 88%)} @keyframes ctWash{0%{opacity:0}26%{opacity:1}70%{opacity:1}100%{opacity:0}} .ct-orb{position:absolute;left:50%;top:50%;width:min(42vw,360px);height:min(42vw,360px);border-radius:50%;transform:translate(-50%,120%) scale(.6);opacity:0} .celestial-transition.run .ct-orb{animation:orbRise 1.3s cubic-bezier(.4,0,.2,1) forwards} .to-day .ct-orb{background:radial-gradient(circle at 42% 40%,#fffdf2 0%,#ffe6a0 42%,#ffcf63 70%,rgba(255,207,99,0) 100%);box-shadow:0 0 120px 50px rgba(255,210,120,.5)} .to-night .ct-orb{background:radial-gradient(circle at 40% 38%,#fbf7e6 0%,#e9e2c6 55%,#cdbf9a 78%,rgba(205,191,154,0) 100%);box-shadow:0 0 90px 36px rgba(220,210,180,.4)} @keyframes orbRise{0%{transform:translate(-50%,120%) scale(.6);opacity:0}28%{opacity:1}55%{transform:translate(-50%,-12%) scale(1.05)}100%{transform:translate(-50%,-46%) scale(1.12);opacity:0}} /* ═══════════ 初始加载 ═══════════ */ .loading-screen{ position:fixed; inset:0; z-index:10000; background:var(--void); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 1s ease, visibility 1s; } .loading-screen.hidden{opacity:0;visibility:hidden} .loading-ring{ width:60px;height:60px; border:2px solid var(--line-soft); border-top-color:var(--gold-bright); border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .loading-text{ font-family:var(--serif-cjk); font-size:1.2rem; color:var(--gold); margin-top:20px; letter-spacing:.35em; font-weight:500; } /* ═══════════ 日 / 夜 切换开关 ═══════════ */ .theme-toggle{width:60px;height:29px;border-radius:30px;border:1px solid var(--line);background:var(--input-bg);position:relative;cursor:pointer;padding:0;flex:none;transition:.4s} .theme-toggle:hover{border-color:var(--gold)} .tt-track{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px} .theme-toggle svg{width:12px;height:12px;display:block} .tt-sun{color:var(--gold)} .tt-moon{color:var(--mist)} .tt-knob{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold-glow);transition:transform .45s cubic-bezier(.4,0,.2,1);transform:translateX(31px)} [data-theme="day"] .tt-knob{transform:translateX(0)} /* ═══════════ 页面包裹层 ═══════════ */ .page{position:relative;z-index:1;transition:opacity .8s ease, filter .8s ease} .page.hidden-during-warp{opacity:0;filter:blur(20px);pointer-events:none} /* ═══════════ 顶栏 ═══════════ */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 5vw; display:flex; align-items:center; justify-content:space-between; backdrop-filter:blur(12px); background:var(--header-bg); border-bottom:1px solid var(--line-soft); transition:opacity .6s ease, background .8s ease; } .topbar.fade{opacity:0;pointer-events:none} .topbar-logo{ font-family:var(--serif-cjk); font-size:1.3rem; font-weight:600; letter-spacing:.16em; color:var(--gold); text-shadow:0 0 20px var(--gold-glow); } .topbar-links{display:flex;align-items:center;gap:16px} .topbar-links a{color:var(--mist);transition:color .3s;display:inline-flex} .topbar-links a:hover{color:var(--gold)} .topbar-links svg{width:18px;height:18px;fill:currentColor;display:block} .topbar-badge{ font-family:var(--mono); font-size:.55rem; letter-spacing:.25em; color:var(--ice); border:1px solid color-mix(in srgb, var(--ice) 35%, transparent); padding:4px 12px; border-radius:100px; } /* ═══════════ HERO ═══════════ */ .hero{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; padding:80px 20px 40px; } .hero-nebula{ position:absolute; width:800px;height:800px;border-radius:50%; background:radial-gradient(ellipse at center, rgba(217,176,106,.1) 0%, rgba(136,196,236,.07) 32%, rgba(217,138,154,.04) 52%, transparent 70%); animation:nebula-breathe 10s ease-in-out infinite; pointer-events:none; } [data-theme="day"] .hero-nebula{opacity:.5} @keyframes nebula-breathe{ 0%,100%{transform:scale(1) rotate(0deg);opacity:.6} 50%{transform:scale(1.15) rotate(5deg);opacity:1} } .hero-test-badge{ font-family:var(--mono); font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ice); border:1px solid color-mix(in srgb, var(--ice) 30%, transparent); padding:6px 20px; border-radius:100px; margin-bottom:30px; opacity:0; animation:fadeIn 1s ease forwards .5s; backdrop-filter:blur(4px); background:color-mix(in srgb, var(--ice) 5%, transparent); } .hero-title-cn{ font-family:var(--serif-cjk); font-size:clamp(2.5rem,8vw,6rem); font-weight:500; line-height:1.2; color:var(--star); letter-spacing:.04em; opacity:0; animation:fadeUp 1.2s cubic-bezier(.19,1,.22,1) forwards .8s; text-shadow:0 0 60px var(--gold-glow), 0 0 120px rgba(136,196,236,.08); } .hero-title-en{ font-family:var(--serif-disp); font-size:clamp(.9rem,2vw,1.4rem); font-weight:300; font-style:italic; letter-spacing:.15em; color:var(--mist); margin-top:14px; opacity:0; animation:fadeIn 1.2s ease forwards 1.2s; } .hero-divider{ width:60px;height:1px; background:linear-gradient(90deg, transparent, var(--gold-bright), transparent); margin:28px auto; opacity:0; animation:fadeIn 1s ease forwards 1.5s; } .hero-author{ font-family:var(--serif-cjk); font-size:.95rem; font-weight:400; color:var(--gold); letter-spacing:.15em; opacity:0; animation:fadeUp 1s ease forwards 1.7s; } .hero-date{ font-family:var(--mono); font-size:.65rem; color:var(--mist-2); letter-spacing:.2em; margin-top:10px; opacity:0; animation:fadeIn 1s ease forwards 2s; } /* CTA · 启动曲率引擎 */ .warp-cta-wrap{ margin-top:50px; opacity:0; animation:fadeUp 1.2s cubic-bezier(.19,1,.22,1) forwards 2.3s; display:flex; flex-direction:column; align-items:center; gap:14px; } .warp-cta{ position:relative; display:inline-flex; align-items:center; gap:12px; padding:16px 36px; background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent), color-mix(in srgb, var(--ice) 10%, transparent)); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); color:var(--gold-bright); font-family:var(--serif-cjk); font-size:.95rem; letter-spacing:.2em; font-weight:500; cursor:pointer; border-radius:4px; text-transform:uppercase; transition:all .4s cubic-bezier(.19,1,.22,1); overflow:hidden; outline:none; } .warp-cta::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, var(--gold-glow) 50%, transparent 100%); transform:translateX(-100%); transition:transform .7s ease; } .warp-cta:hover{ border-color:var(--gold-bright); color:var(--star); box-shadow:0 0 40px var(--gold-glow), inset 0 0 20px var(--gold-glow); transform:translateY(-2px); } .warp-cta:hover::before{transform:translateX(100%)} .warp-cta:active{transform:translateY(0)} .warp-cta-icon{display:inline-block;width:16px;height:16px;position:relative} .warp-cta-icon::before,.warp-cta-icon::after{content:'';position:absolute;background:currentColor} .warp-cta-icon::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%);box-shadow:0 0 8px currentColor} .warp-cta-icon::after{width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;background:transparent;right:0;top:50%;transform:translateY(-50%) rotate(45deg)} .warp-cta-hint{font-family:var(--mono);font-size:.55rem;letter-spacing:.35em;color:var(--mist-2)} .scroll-indicator{position:absolute;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeIn 1s ease forwards 2.8s} .scroll-indicator span{font-family:var(--mono);font-size:.5rem;letter-spacing:.4em;color:var(--gold)} .scroll-indicator .line{width:1px;height:40px;background:linear-gradient(to bottom, var(--gold), transparent);animation:pulse-line 2.5s ease-in-out infinite} @keyframes pulse-line{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:.8;transform:scaleY(1)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}} /* ═══════════ 公告 ═══════════ */ .announce-section{padding:100px 8vw 80px;display:flex;justify-content:center} .announce-card{ max-width:720px;width:100%; background:var(--panel-bg); border:1px solid var(--line); border-radius:24px; padding:50px 45px; position:relative; overflow:hidden; opacity:0; transform:translateY(40px); box-shadow:var(--card-shadow); } .announce-card.visible{opacity:1;transform:translateY(0);transition:all 1s cubic-bezier(.19,1,.22,1)} .announce-card::before{ content:'公告'; position:absolute; top:-20px; right:-10px; font-family:var(--serif-cjk); font-weight:600; font-size:8rem; color:color-mix(in srgb, var(--gold) 5%, transparent); pointer-events:none; } .announce-card::after{ content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg, var(--gold-bright), var(--rose), var(--violet)); } .announce-icon{font-size:2rem;margin-bottom:16px} .announce-title{ font-family:var(--serif-cjk); font-size:1.6rem; font-weight:600; margin-bottom:20px; line-height:1.6; background:linear-gradient(135deg, var(--star), var(--gold-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .announce-body{font-size:.92rem;line-height:2;color:var(--mist);font-weight:300} .announce-body strong{color:var(--gold);font-weight:600} .announce-body .highlight{color:var(--ice)} .announce-body .pulse-dot{ display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--ice); margin-right:8px; vertical-align:middle; animation:pulse-dot 1.4s ease-in-out infinite; box-shadow:0 0 12px var(--ice); } @keyframes pulse-dot{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}} .announce-progress{margin-top:28px;padding:18px 0} .announce-progress-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;color:var(--mist);margin-bottom:10px} .announce-progress-label .pct{color:var(--gold-bright);font-weight:700} .announce-progress-bar{height:4px;background:var(--line-soft);border-radius:2px;overflow:hidden;position:relative} .announce-progress-fill{ height:100%;width:0; background:linear-gradient(90deg, var(--violet), var(--gold-bright), var(--ice)); border-radius:2px; position:relative; transition:width 2s cubic-bezier(.19,1,.22,1); box-shadow:0 0 10px var(--gold-glow); } .announce-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);animation:shimmer 2s linear infinite} @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .announce-meta{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .announce-meta span{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;color:var(--mist-2)} /* ═══════════ 时间线 ═══════════ */ .timeline-section{padding:60px 8vw 100px} .section-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:12px} .section-heading{font-family:var(--serif-disp);font-size:clamp(2rem,5vw,3.2rem);font-weight:300;text-align:center;margin-bottom:60px;color:var(--star)} .section-heading i{color:var(--gold)} .timeline{position:relative;max-width:700px;margin:0 auto;padding-left:40px} .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom, var(--gold-bright), var(--line), transparent)} .tl-item{position:relative;margin-bottom:50px;opacity:0;transform:translateX(-20px)} .tl-item.visible{opacity:1;transform:translateX(0);transition:all .8s cubic-bezier(.19,1,.22,1)} .tl-dot{position:absolute;left:-36px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--gold-bright);background:var(--void)} .tl-item.active .tl-dot{background:var(--gold-bright);box-shadow:0 0 12px var(--gold-glow)} .tl-year{font-family:var(--mono);font-size:.65rem;letter-spacing:.3em;color:var(--gold);margin-bottom:6px} .tl-title{font-family:var(--serif-cjk);font-size:1.15rem;font-weight:600;margin-bottom:8px} .tl-desc{font-size:.85rem;line-height:1.8;color:var(--mist);font-weight:300} /* ═══════════ 星座图（分类卡） ═══════════ */ .features-section{padding:80px 8vw 100px} .cosmos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto} .cosmos-card{ border-radius:20px; padding:36px 30px; position:relative; overflow:hidden; background:var(--card); border:1px solid color-mix(in srgb, var(--accent,var(--gold)) 16%, var(--line-soft)); opacity:0; transform:translateY(30px); transition:all .6s cubic-bezier(.19,1,.22,1), box-shadow .4s, border-color .4s; } .cosmos-card::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent,var(--gold)) 12%, transparent), transparent 58%);pointer-events:none} .cosmos-card.visible{opacity:1;transform:translateY(0)} .cosmos-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--accent,var(--gold)) 45%, transparent);box-shadow:var(--card-shadow)} .cosmos-card .c-icon{font-size:2rem;margin-bottom:16px;display:block;position:relative} .cosmos-card .c-title{font-family:var(--serif-cjk);font-size:1.25rem;font-weight:600;margin-bottom:10px;position:relative} .cosmos-card .c-text{font-size:.82rem;line-height:1.85;color:var(--mist);font-weight:300;position:relative} .cc1{--accent:var(--ice)} .cc2{--accent:var(--violet)} .cc3{--accent:var(--gold-bright)} .cc4{--accent:var(--rose);grid-column:1 / 2} .cc5{--accent:var(--teal);grid-column:2 / 4} /* ═══════════ 引言 ═══════════ */ .quote-section{padding:80px 8vw;text-align:center} .quote-section blockquote{ font-family:var(--serif-cjk); font-weight:500; font-size:clamp(1.6rem,4vw,2.9rem); line-height:1.6; color:var(--star); max-width:680px; margin:0 auto; position:relative; } .quote-section blockquote::before{ content:'\201C'; position:absolute; top:-40px; left:-30px; font-family:var(--serif-disp); font-size:6rem; color:var(--gold-glow); line-height:1; } .quote-author{font-family:var(--mono);font-size:.6rem;letter-spacing:.4em;color:var(--gold);margin-top:24px;opacity:.8} /* ═══════════ 社交坐标 ═══════════ */ .social-section{padding:60px 8vw 20px;text-align:center} .social-orbit{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap} .social-link{ display:flex;flex-direction:column;align-items:center;gap:10px; text-decoration:none;color:var(--star); padding:24px 32px;border-radius:18px; border:1px solid var(--line-soft); background:var(--panel-bg); min-width:150px; opacity:0; transform:translateY(20px); transition:all .5s cubic-bezier(.19,1,.22,1); } .social-link.visible{opacity:1;transform:translateY(0)} .social-link:hover{transform:translateY(-5px);border-color:color-mix(in srgb, var(--gold) 35%, transparent);box-shadow:var(--card-shadow)} .social-icon{width:32px;height:32px;color:var(--star)} .social-icon svg{width:100%;height:100%;fill:currentColor} .social-name{font-family:var(--serif-disp);font-size:1.05rem;font-weight:600} .social-id{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:var(--mist-2)} /* ═══════════ 即将上线 + 倒计时 ═══════════ */ .coming-section{padding:100px 8vw;text-align:center;position:relative} .coming-badge{ display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.4em; color:var(--rose); border:1px solid color-mix(in srgb, var(--rose) 35%, transparent); padding:6px 18px; border-radius:100px; margin-bottom:22px; position:relative; } .coming-badge::before{content:'';display:inline-block;width:6px;height:6px;background:var(--rose);border-radius:50%;margin-right:8px;vertical-align:middle;animation:pulse-dot 1.4s ease-in-out infinite;box-shadow:0 0 8px var(--rose)} .coming-title{font-family:var(--serif-cjk);font-weight:600;font-size:clamp(2rem,5vw,3.5rem);color:var(--star);margin-bottom:16px;letter-spacing:.03em} .coming-title span{color:var(--gold-bright)} .coming-desc{font-size:.95rem;line-height:2;color:var(--mist);font-weight:300;max-width:580px;margin:0 auto 40px} .countdown-row{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:40px} .cd-item{min-width:90px;padding:20px 14px;background:var(--panel-bg);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden} .cd-item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);opacity:.5} .cd-num{font-family:var(--serif-disp);font-size:2.4rem;font-weight:600;color:var(--gold-bright);line-height:1;text-shadow:0 0 20px var(--gold-glow)} .cd-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.3em;color:var(--mist-2);margin-top:10px} .coming-cta{ display:inline-flex;align-items:center;gap:14px;padding:18px 44px; background:linear-gradient(135deg, var(--gold-bright), var(--amber)); color:var(--void); font-family:var(--serif-cjk); font-size:1rem; font-weight:600; letter-spacing:.18em; cursor:pointer; border:none; border-radius:4px; outline:none; transition:all .4s cubic-bezier(.19,1,.22,1); position:relative; overflow:hidden; box-shadow:0 8px 32px var(--gold-glow); } .coming-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);transform:translateX(-100%);transition:transform .7s} .coming-cta:hover{transform:translateY(-3px);box-shadow:0 16px 48px var(--gold-glow)} .coming-cta:hover::before{transform:translateX(100%)} .coming-cta-icon{display:inline-block;width:14px;height:14px;position:relative} .coming-cta-icon::before{content:'';position:absolute;width:100%;height:2px;background:currentColor;top:50%;transform:translateY(-50%)} .coming-cta-icon::after{content:'';position:absolute;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;right:0;top:50%;transform:translateY(-50%) rotate(45deg)} /* ═══════════ 页脚 ═══════════ */ footer{padding:50px 5vw 30px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} .footer-left{font-family:var(--serif-cjk);font-weight:600;color:var(--gold);font-size:1rem;letter-spacing:.08em} .footer-center{display:flex;gap:20px} .footer-center a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--mist);font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;transition:color .3s} .footer-center a:hover{color:var(--gold)} .footer-center svg{width:14px;height:14px;fill:currentColor} .footer-right{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:var(--mist-2)} /* ═══════════════════════════════════════════════════════════ WARP / 曲率引擎跃迁 IFRAME 嵌入 (One-Body) — 保留并按主题着色 ═══════════════════════════════════════════════════════════ */ .warp-stage{position:fixed;inset:0;z-index:9000;background:#000;opacity:0;visibility:hidden;transition:opacity .8s ease;pointer-events:none} .warp-stage.show{opacity:1;visibility:visible;pointer-events:auto} .warp-stage iframe{width:100%;height:100%;border:0;display:block} .warp-loader{position:fixed;inset:0;z-index:9500;background:var(--void);display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px} .warp-loader.show{display:flex} .warp-loader .loader-title{font-family:var(--serif-cjk);font-weight:600;font-size:1.5rem;color:var(--gold-bright);letter-spacing:.4em;text-shadow:0 0 24px var(--gold-glow)} .warp-loader .loader-sub{font-family:var(--mono);font-size:.65rem;letter-spacing:.5em;color:var(--ice);opacity:.8} .warp-loader .loader-bar{width:200px;height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden;margin-top:8px} .warp-loader .loader-bar div{height:100%;width:30%;background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);animation:loader-slide 1.4s ease-in-out infinite} @keyframes loader-slide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}} .warp-skip{position:fixed;bottom:30px;right:30px;z-index:9999;padding:10px 18px;background:var(--panel-bg);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:100px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--gold-bright);cursor:pointer;display:none;transition:all .3s ease} .warp-skip.show{display:inline-flex} .warp-skip:hover{background:color-mix(in srgb, var(--gold) 12%, transparent);border-color:var(--gold-bright)} .warp-flash{position:fixed;inset:0;z-index:9700;background:white;opacity:0;pointer-events:none} /* ═══════════════════════════════════════════════════════════ BLOG ARRIVED 抵达后博客界面 ═══════════════════════════════════════════════════════════ */ .blog-arrived{position:relative;z-index:5;display:none;min-height:100vh;padding:0} .blog-arrived.show{display:block} .blog-arrived.fade-in{animation:blog-fade-in 1.5s cubic-bezier(.19,1,.22,1) forwards} @keyframes blog-fade-in{from{opacity:0;transform:translateY(40px);filter:blur(20px)}to{opacity:1;transform:translateY(0);filter:blur(0)}} .blog-hero{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 20px 60px;position:relative} .blog-hero-badge{font-family:var(--mono);font-size:.55rem;letter-spacing:.5em;color:var(--ice);padding:6px 20px;border:1px solid color-mix(in srgb, var(--ice) 30%, transparent);border-radius:100px;margin-bottom:28px;display:inline-flex;align-items:center;gap:10px} .blog-hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice);animation:pulse-dot 1.4s ease-in-out infinite} .blog-hero-title{ font-family:var(--serif-cjk); font-weight:600; font-size:clamp(2.5rem,7vw,5rem); line-height:1.3; margin-bottom:18px; letter-spacing:.04em; background:linear-gradient(135deg, var(--star) 30%, var(--gold-bright) 70%, var(--rose)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 0 80px var(--gold-glow); } .blog-hero-sub{font-family:var(--serif-disp);font-style:italic;font-size:clamp(1rem,2.2vw,1.4rem);letter-spacing:.15em;color:var(--mist);margin-bottom:30px} .blog-hero-divider{width:80px;height:1px;background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);margin:0 auto 30px} .blog-hero-intro{max-width:680px;font-size:1rem;line-height:2;color:var(--mist);font-weight:300;margin:0 auto} .blog-about{padding:80px 8vw 60px;max-width:1100px;margin:0 auto} .blog-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .blog-about-left .label{font-family:var(--mono);font-size:.55rem;letter-spacing:.5em;color:var(--gold);margin-bottom:14px} .blog-about-left h3{font-family:var(--serif-disp);font-size:clamp(2rem,4vw,2.8rem);font-weight:300;line-height:1.2;margin-bottom:24px} .blog-about-left h3 i{color:var(--gold)} .blog-about-left p{font-size:.95rem;line-height:2;color:var(--mist);font-weight:300} .blog-about-right{display:flex;flex-direction:column;gap:20px} .about-stat{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;background:var(--panel-bg);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden} .about-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom, var(--gold-bright), transparent)} .about-stat .stat-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.25em;color:var(--mist)} .about-stat .stat-value{font-family:var(--serif-disp);font-size:1.8rem;font-weight:600;color:var(--gold-bright);line-height:1} .about-stat .stat-value sup{font-size:.7rem;color:var(--mist-2);font-family:var(--mono);margin-left:4px;letter-spacing:0;vertical-align:super} .blog-posts{padding:60px 8vw 100px;max-width:1100px;margin:0 auto} .blog-posts-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px;flex-wrap:wrap;gap:20px} .blog-posts-head h2{font-family:var(--serif-disp);font-size:clamp(2rem,4.5vw,3rem);font-weight:300} .blog-posts-head h2 i{color:var(--gold);font-style:italic} .blog-posts-head .post-count{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;color:var(--mist-2)} .blog-posts-head .post-count b{color:var(--gold-bright);font-weight:700} .post-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px,1fr));gap:22px} .post-card{ background:var(--panel-bg); border:1px solid var(--line-soft); border-radius:18px; padding:32px 28px 26px; cursor:pointer; transition:all .5s cubic-bezier(.19,1,.22,1); position:relative; overflow:hidden; } .post-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, var(--accent-color, var(--gold-bright)), transparent);opacity:0;transition:opacity .4s} .post-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb, var(--gold) 25%, transparent);box-shadow:var(--card-shadow)} .post-card:hover::before{opacity:1} .post-card[data-cat="tech"]{--accent-color:var(--ice)} .post-card[data-cat="design"]{--accent-color:var(--violet)} .post-card[data-cat="thoughts"]{--accent-color:var(--gold-bright)} .post-card[data-cat="life"]{--accent-color:var(--rose)} .post-cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-color, var(--gold-bright));margin-bottom:16px} .post-cat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-color, var(--gold-bright));box-shadow:0 0 8px var(--accent-color, var(--gold-bright))} .post-title{font-family:var(--serif-cjk);font-size:1.2rem;font-weight:600;line-height:1.5;color:var(--star);margin-bottom:12px} .post-excerpt{font-size:.85rem;line-height:1.85;color:var(--mist);font-weight:300;margin-bottom:22px} .post-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:var(--mist-2);padding-top:16px;border-top:1px solid var(--line-soft)} .post-meta .read-more{display:inline-flex;align-items:center;gap:6px;color:var(--accent-color, var(--gold-bright));transition:gap .3s} .post-card:hover .read-more{gap:12px} .post-soon{opacity:.5;pointer-events:none;position:relative} .post-soon::after{content:'COMING SOON';position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:.5rem;letter-spacing:.3em;color:var(--gold);border:1px solid color-mix(in srgb, var(--gold) 25%, transparent);padding:3px 8px;border-radius:100px} .return-home{position:fixed;top:80px;left:5vw;z-index:200;display:none;align-items:center;gap:8px;padding:10px 18px;background:var(--panel-bg);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:100px;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;color:var(--gold-bright);cursor:pointer;transition:all .3s ease} .return-home.show{display:inline-flex} .return-home:hover{background:color-mix(in srgb, var(--gold) 12%, transparent);border-color:var(--gold-bright)} /* ═══════════ 响应式 ═══════════ */ @media (max-width:768px){ .cosmos-grid{grid-template-columns:1fr} .cc4,.cc5{grid-column:auto} .announce-card{padding:36px 28px} .countdown-row{gap:16px} .cd-num{font-size:2rem} footer{flex-direction:column;text-align:center} .social-orbit{gap:14px} .social-link{min-width:120px;padding:20px 22px} .footer-center{gap:14px} .blog-about-grid{grid-template-columns:1fr;gap:30px} .return-home{left:50%;transform:translateX(-50%);top:70px} .day-sky .sun{width:90px;height:90px;top:6%;right:8%} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .celestial-transition.run{animation-duration:.5s} .celestial-transition.run .ct-orb{display:none} } /* ════════════════════════════════════════════════════════════════ 字号微调 —— 在整体放大基础上，再次统一提升最细小的标签与正文可读性 （集中放置，便于回溯 / 后续迁移 Hexo 时整体调参；本块为权威调参入口） ════════════════════════════════════════════════════════════════ */ /* 极小的等宽标签（眉标 / 徽标 / 元信息）—— 由 .66 → .74rem */ .topbar-badge,.quote-author,.scroll-indicator span,.section-label, .blog-hero-badge,.coming-badge,.post-meta,.post-cat,.about-stat .stat-label, .cd-label,.social-id,.footer-right,.hero-test-badge,.post-soon::after, .news-note,.cal-date .m,.sky-card-body .meta,.blog-arrived .meta{font-size:.74rem} /* 次级等宽标签 / 链接 —— 由 .7 → .78rem */ .hero-date,.tl-year,.announce-meta span,.footer-center a,.announce-progress-label, .blog-posts-head .post-count,.return-home,.warp-skip,.warp-loader .loader-sub, .blog-arrived .eyebrow,.blog-arrived .sec-head .more,.foot-col h5,.foot-bottom, .cal-tag,.blog-arrived .cat,.sky-card-body .cat,.readout{font-size:.78rem} /* 正文与摘要 —— 整体上一档，行距更舒展 */ .announce-body{font-size:1.06rem;line-height:2.08} .tl-desc,.cosmos-card .c-text,.post-excerpt,.sky-card-body p,.cal-info p, .foot-brand p,.foot-col a,.tonight .stat,.tonight .stat .v{font-size:.99rem} .coming-desc,.blog-hero-intro,.blog-about-left p,.tonight-intro p, .feat-body p,.news-inner > p{font-size:1.12rem;line-height:2.06} /* 标题层级 —— 卡片标题 / 小标题统一放大 */ .tl-title,.post-title,.sky-card-body h4,.cal-info h4{font-size:1.36rem} .cosmos-card .c-title{font-size:1.42rem} .tonight .moon-row strong{font-size:1.4rem} .cal-date .d{font-size:1.85rem} .topbar-logo{font-size:1.5rem} .nav-links a,.foot-col a{letter-spacing:.04em} .topbar-links svg{width:21px;height:21px} .social-icon{width:36px;height:36px} /* 移动端：正文略收，避免窄屏溢出 */ @media (max-width:520px){ .announce-body{font-size:1.0rem} .coming-desc,.blog-hero-intro,.blog-about-left p,.tonight-intro p, .feat-body p,.news-inner > p{font-size:1.04rem} } /* ════════════════════════════════════════════════════════════════ 背景切换控件（星空 / 星轨 / 流星）—— 左下角悬浮胶囊 ════════════════════════════════════════════════════════════════ */ .bg-switch{ position:fixed; left:5vw; bottom:30px; z-index:210; display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 12px; background:var(--panel-bg); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:100px; color:var(--gold-bright); cursor:pointer; transition:all .35s cubic-bezier(.19,1,.22,1); box-shadow:0 10px 30px -16px rgba(0,0,0,.6); } .bg-switch:hover{border-color:var(--gold-bright);transform:translateY(-2px);box-shadow:0 14px 34px -16px var(--gold-glow)} .bg-switch-ico{ width:24px;height:24px;flex:none;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.9rem; color:var(--void); background:radial-gradient(circle at 38% 36%,var(--gold-bright),var(--gold)); box-shadow:0 0 12px var(--gold-glow); } .bg-switch-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left} .bg-switch-name{font-family:var(--serif-cjk);font-size:.86rem;font-weight:600;letter-spacing:.1em} .bg-switch-en{font-family:var(--mono);font-size:.5rem;letter-spacing:.24em;color:var(--mist-2)} body.warping .bg-switch{opacity:0;pointer-events:none} @media (max-width:768px){ .bg-switch{left:50%;transform:translateX(-50%);bottom:18px;padding:8px 14px 8px 10px} .bg-switch:hover{transform:translateX(-50%) translateY(-2px)} } /* ════════════════════════════════════════════════════════════════ 观星志组件迁移（背景 · 卡片 · 信息面板 · 天象历 · 订阅） 全部限定在 .blog-arrived 内，仅作用于「跃迁抵达」后的博客预览， 不影响公告首页；配色复用既有主题变量，自动随日 / 夜切换。 ════════════════════════════════════════════════════════════════ */ /* —— 揭示动效基类（沿用 [data-reveal] → .visible 机制） —— */ .blog-arrived [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1)} .blog-arrived [data-reveal].visible{opacity:1;transform:none} /* —— 通用：眉标 / 区段标题 —— */ .blog-arrived .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.7em} .blog-arrived .eyebrow::before{content:'';width:26px;height:1px;background:var(--gold);opacity:.6} .blog-arrived .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;gap:30px;flex-wrap:wrap} .blog-arrived .sec-head h2{font-family:var(--serif-cjk);font-weight:500;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:.04em;margin-top:14px;line-height:1.2} .blog-arrived .sec-head h2 .en{font-family:var(--serif-disp);font-style:italic;font-weight:300;color:var(--mist-2);font-size:.6em} .blog-arrived .sec-head .more{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;color:var(--gold);text-decoration:none;white-space:nowrap;transition:.3s;text-transform:uppercase} .blog-arrived .sec-head .more:hover{letter-spacing:.24em} /* —— 星云缩略图（深空意象，日夜皆保持星空感） —— */ .sky-thumb{position:relative;overflow:hidden} .sky-thumb::after{content:'';position:absolute;inset:0;opacity:.6;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='20' r='.9' opacity='.9'/%3E%3Ccircle cx='44' cy='10' r='.6'/%3E%3Ccircle cx='80' cy='30' r='1.1' opacity='.8'/%3E%3Ccircle cx='110' cy='16' r='.7'/%3E%3Ccircle cx='25' cy='55' r='.6'/%3E%3Ccircle cx='62' cy='66' r='1' opacity='.85'/%3E%3Ccircle cx='98' cy='58' r='.7'/%3E%3Ccircle cx='15' cy='92' r='.8'/%3E%3Ccircle cx='50' cy='104' r='.6'/%3E%3Ccircle cx='86' cy='96' r='.9' opacity='.8'/%3E%3Ccircle cx='118' cy='112' r='.7'/%3E%3Ccircle cx='34' cy='124' r='.6'/%3E%3C/g%3E%3C/svg%3E")} .t-perseid{background:radial-gradient(120% 90% at 82% 18%, rgba(136,196,236,.28), transparent 55%),radial-gradient(100% 90% at 18% 92%, rgba(217,176,106,.2), transparent 55%),linear-gradient(155deg,#0a1228,#0a0a1c 60%,#070712)} .t-polaris{background:radial-gradient(55% 55% at 50% 30%, rgba(190,216,244,.4), transparent 60%),radial-gradient(130% 110% at 50% 125%, rgba(38,58,108,.55), transparent 62%),linear-gradient(180deg,#0b1024,#070a18)} .t-orion{background:radial-gradient(92% 82% at 60% 44%, rgba(217,138,154,.34), transparent 55%),radial-gradient(82% 72% at 34% 62%, rgba(120,180,210,.26), transparent 55%),linear-gradient(150deg,#1a0e1c,#0c0a1a 60%,#08060f)} .t-city{background:radial-gradient(130% 75% at 50% 132%, rgba(233,165,82,.55), rgba(180,92,42,.16) 36%, transparent 62%),linear-gradient(180deg,#0a1430,#0c1226 55%,#16100a)} .t-milkyway{background:linear-gradient(202deg, transparent 36%, rgba(222,212,192,.18) 50%, transparent 65%),radial-gradient(80% 60% at 70% 30%, rgba(136,196,236,.16), transparent 60%),linear-gradient(160deg,#0a0e22,#08081a)} .t-scope{background:radial-gradient(38% 38% at 72% 30%, rgba(236,202,134,.45), transparent 55%),radial-gradient(60% 60% at 30% 80%, rgba(60,80,130,.3), transparent 60%),linear-gradient(160deg,#0b0d20,#070711)} .t-feat{background:radial-gradient(90% 80% at 75% 25%, rgba(136,196,236,.3), transparent 55%),radial-gradient(80% 90% at 20% 95%, rgba(217,176,106,.24), transparent 55%),radial-gradient(60% 60% at 45% 55%, rgba(217,138,154,.14), transparent 60%),linear-gradient(150deg,#0b1430,#0a0a1e 58%,#070612)} /* 划过缩略图的流星 */ .t-perseid::before,.t-milkyway::before,.feat-thumb::before{content:'';position:absolute;width:160%;height:2px;left:-30%;top:32%;background:linear-gradient(90deg,transparent,rgba(245,242,234,.9) 60%,#fff);transform:rotate(22deg);filter:blur(.4px);box-shadow:0 0 8px rgba(255,255,255,.6);opacity:0;animation:meteor-streak 7s ease-in-out infinite 2s} .t-milkyway::before{top:48%;animation-delay:4s} @keyframes meteor-streak{0%,72%{opacity:0;transform:rotate(22deg) translateX(-30%)}78%{opacity:1}100%{opacity:0;transform:rotate(22deg) translateX(40%)}} /* —— 编辑推荐：大幅特稿卡 —— */ .featured-section{padding:20px 8vw 40px;max-width:1180px;margin:0 auto} .feat-card{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);text-decoration:none;color:inherit;transition:.5s cubic-bezier(.2,.7,.2,1)} .feat-card:hover{border-color:var(--gold);box-shadow:0 30px 80px -30px rgba(0,0,0,.45),0 0 50px -20px var(--gold-glow)} .feat-thumb{min-height:420px;position:relative} .feat-body{padding:54px 50px;display:flex;flex-direction:column;justify-content:center} .blog-arrived .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:inline-block} .feat-body h3{font-family:var(--serif-cjk);font-weight:600;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.25;margin-bottom:20px;transition:color .3s} .feat-card:hover .feat-body h3{color:var(--gold-bright)} .feat-body p{color:var(--mist);font-weight:300;margin-bottom:32px;font-size:1.02rem;line-height:1.9} .blog-arrived .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--mist-2);display:flex;gap:16px;align-items:center;flex-wrap:wrap} .blog-arrived .meta .sep{width:4px;height:4px;border-radius:50%;background:var(--mist-2)} /* —— 文章网格卡（带星云缩略图，迁移自观星志） —— */ .sky-section{padding:30px 8vw 60px;max-width:1180px;margin:0 auto} .sky-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .sky-card{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:var(--card);text-decoration:none;color:var(--star);display:flex;flex-direction:column;transition:.45s cubic-bezier(.2,.7,.2,1)} .sky-card:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 26px 60px -30px rgba(0,0,0,.5),0 0 40px -22px var(--gold-glow)} .sky-card .sky-thumb{height:200px} .sky-card-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1} .sky-card-body .cat{margin-bottom:14px;font-size:.64rem} .sky-card-body h4{font-family:var(--serif-cjk);font-weight:600;font-size:1.28rem;line-height:1.4;margin-bottom:12px;transition:color .3s} .sky-card:hover h4{color:var(--gold-bright)} .sky-card-body p{color:var(--mist);font-weight:300;font-size:.92rem;line-height:1.85;margin-bottom:20px;flex:1} .sky-card-body .meta{font-size:.66rem;margin-top:auto} /* —— 今夜星象 · TONIGHT 信息面板 —— */ .tonight-section{padding:30px 8vw 50px;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} .tonight-intro .label{font-family:var(--mono);font-size:.66rem;letter-spacing:.5em;color:var(--gold);margin-bottom:14px} .tonight-intro h3{font-family:var(--serif-disp);font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:300;line-height:1.25;margin-bottom:20px} .tonight-intro h3 i{color:var(--gold)} .tonight-intro p{font-size:1rem;line-height:2;color:var(--mist);font-weight:300} .tonight{border:1px solid var(--line);background:var(--panel-bg);backdrop-filter:blur(6px);border-radius:14px;padding:32px 32px 28px;position:relative;overflow:hidden} .tonight::before{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%)} .tonight h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center} .tonight h3 .lbl{color:var(--mist-2)} .tonight .moon-row{display:flex;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line-soft);margin-bottom:18px} .tonight .moon-row .ico{width:56px;height:56px;flex:none;display:block;filter:drop-shadow(0 0 12px rgba(236,202,134,.35))} .tonight .moon-row strong{font-family:var(--serif-cjk);font-size:1.3rem;font-weight:500;display:block} .tonight .moon-row small{font-family:var(--mono);font-size:.68rem;color:var(--mist);letter-spacing:.06em} .tonight .stat{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-size:.92rem;gap:14px} .tonight .stat .k{color:var(--mist);font-weight:300;white-space:nowrap} .tonight .stat .v{font-family:var(--mono);font-size:.82rem;color:var(--star);letter-spacing:.04em;text-align:right} .tonight .stat .v.gold{color:var(--gold-bright)} /* —— 天象历 · Celestial Calendar —— */ .calendar-section{padding:40px 8vw 60px;max-width:1180px;margin:0 auto;position:relative} .const-deco{position:absolute;right:0;top:40px;width:340px;opacity:.18;pointer-events:none} .const-deco line{stroke:var(--gold)} .const-deco circle{fill:var(--gold-bright)} .cal-list{border-top:1px solid var(--line-soft)} .cal-item{display:grid;grid-template-columns:160px 1fr auto;gap:30px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line-soft);transition:.4s;cursor:default} .cal-item:hover{background:var(--gold-glow);padding-left:20px} .cal-date{font-family:var(--mono);color:var(--gold)} .cal-date .d{font-size:1.7rem;letter-spacing:.02em} .cal-date .m{font-size:.68rem;letter-spacing:.2em;color:var(--mist);text-transform:uppercase} .cal-info h4{font-family:var(--serif-cjk);font-weight:500;font-size:1.32rem;margin-bottom:5px} .cal-info p{color:var(--mist);font-weight:300;font-size:.92rem} .cal-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);border:1px solid color-mix(in srgb, var(--ice) 35%, transparent);padding:6px 13px;border-radius:20px;white-space:nowrap} /* —— 星空来信 · Newsletter —— */ .news-section{padding:40px 8vw 90px;max-width:1180px;margin:0 auto} .news-inner{border:1px solid var(--line);border-radius:16px;padding:70px 60px;text-align:center;position:relative;overflow:hidden;background:var(--panel-bg)} .news-inner::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 65%);opacity:.5} .news-inner h2{font-family:var(--serif-cjk);font-weight:500;font-size:clamp(2rem,4vw,3rem);margin:18px 0 16px;position:relative} .news-inner > p{color:var(--mist);font-weight:300;max-width:34em;margin:0 auto 38px;position:relative;font-size:1.02rem;line-height:2} .news-form{display:flex;gap:12px;max-width:460px;margin:0 auto;position:relative} .news-form input{flex:1;background:var(--input-bg);border:1px solid var(--line);border-radius:4px;padding:15px 20px;color:var(--star);font-family:var(--sans);font-size:.98rem;transition:.3s} .news-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)} .news-form input::placeholder{color:var(--mist-2)} .news-form button{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:4px;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:var(--void);transition:.4s cubic-bezier(.2,.7,.2,1)} .news-form button:hover{box-shadow:0 0 30px var(--gold-glow);transform:translateY(-2px)} .news-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--mist-2);margin-top:20px;position:relative} .news-ok{font-family:var(--serif-cjk);font-size:1.25rem;color:var(--gold-bright);position:relative} /* —— 迁移组件 · 响应式 —— */ @media (max-width:1000px){ .feat-card{grid-template-columns:1fr} .feat-thumb{min-height:260px} .feat-body{padding:40px 36px} .sky-grid{grid-template-columns:repeat(2,1fr)} .tonight-section{grid-template-columns:1fr;gap:30px} .const-deco{display:none} } @media (max-width:680px){ .sky-grid{grid-template-columns:1fr} .cal-item{grid-template-columns:auto 1fr;gap:18px} .cal-tag{display:none} .news-form{flex-direction:column} .news-inner{padding:50px 28px} } /* ════════════════════════════════════════════════════════════════ 补迁移 + Hexo 预备组件 （读出条 · 太阳/月亮日夜切换 · 通用按钮 · 友链墙 · 富页脚 · 返回顶部 · 阅读进度条 · 品牌星徽） —— 全部沿用既有主题变量，自动随日 / 夜切换；多数限定 .blog-arrived 内。 ════════════════════════════════════════════════════════════════ */ /* —— 博客 HERO 读出条（坐标 · 天气 · 月相，迁移自观星志 .readout） —— */ .blog-readout{ font-family:var(--mono);letter-spacing:.14em;color:var(--mist); display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px; margin:0 auto 26px;max-width:660px; } .blog-readout b{color:var(--gold);font-weight:400} .blog-readout .dot{color:var(--mist-2)} /* —— 品牌星徽（罗盘八角星，迁移自观星志 header .mark） —— */ .blog-mark{width:54px;height:54px;margin:0 auto 22px;display:block; filter:drop-shadow(0 0 18px var(--gold-glow))} .blog-mark .ring{stroke:var(--gold);fill:none} .blog-mark .star{fill:var(--gold)} .blog-mark .core{fill:var(--card);stroke:var(--gold-bright)} /* —— 日 / 夜 文案与图标切换（迁移自观星志 .day-only/.night-only） —— */ .day-only{display:none} [data-theme="day"] .night-only{display:none} [data-theme="day"] .day-only{display:inline} .tonight .moon-row .sun-ic{display:none;filter:drop-shadow(0 0 12px rgba(255,200,90,.5))} [data-theme="day"] .tonight .moon-row .moon{display:none} [data-theme="day"] .tonight .moon-row .sun-ic{display:block} /* —— 通用按钮（迁移自观星志 .btn / .btn-gold / .btn-ghost） —— */ .btn{font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase; padding:15px 30px;border-radius:4px;text-decoration:none;cursor:pointer; transition:.4s cubic-bezier(.2,.7,.2,1);display:inline-flex;align-items:center;gap:10px; border:1px solid transparent} .btn-gold{background:var(--gold);color:var(--void);border-color:var(--gold)} .btn-gold:hover{box-shadow:0 0 34px var(--gold-glow);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--star);border-color:var(--line)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .blog-hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px} /* —— 友链墙 · Friendly Links（Hexo 经典页面，复用星云卡片美学） —— */ .links-section{padding:30px 8vw 60px;max-width:1180px;margin:0 auto;position:relative} .links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .link-card{ display:flex;align-items:center;gap:18px; padding:22px 24px;border-radius:14px; border:1px solid var(--line-soft);background:var(--card); text-decoration:none;color:var(--star);position:relative;overflow:hidden; transition:.45s cubic-bezier(.2,.7,.2,1); } .link-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(to bottom,var(--accent,var(--gold-bright)),transparent); opacity:0;transition:opacity .4s} .link-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent,var(--gold)) 45%,transparent); box-shadow:0 24px 56px -30px rgba(0,0,0,.5),0 0 36px -22px var(--gold-glow)} .link-card:hover::before{opacity:1} .link-avatar{width:58px;height:58px;flex:none;border-radius:50%; border:1px solid var(--line);object-fit:cover; background:radial-gradient(circle at 40% 36%,color-mix(in srgb,var(--accent,var(--gold)) 55%,#0b0d20),#0b0d20); display:flex;align-items:center;justify-content:center; font-family:var(--serif-disp);font-size:1.5rem;font-weight:600;color:var(--void); box-shadow:0 0 18px -6px var(--gold-glow);overflow:hidden} .link-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .link-meta{min-width:0;display:flex;flex-direction:column;gap:4px} .link-name{font-family:var(--serif-cjk);font-weight:600;font-size:1.16rem;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s} .link-card:hover .link-name{color:var(--gold-bright)} .link-intro{font-size:.92rem;color:var(--mist);font-weight:300;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lk1{--accent:var(--ice)}.lk2{--accent:var(--violet)}.lk3{--accent:var(--gold-bright)} .lk4{--accent:var(--rose)}.lk5{--accent:var(--teal)}.lk6{--accent:var(--amber)} .links-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--mist-2); margin-top:26px;text-align:center} .links-note b{color:var(--gold)} /* —— 博客富页脚（四栏，迁移自观星志 footer） —— */ .blog-foot{border-top:1px solid var(--line-soft);padding:64px 8vw 44px;margin-top:30px} .blog-foot-grid{max-width:1180px;margin:0 auto 50px;display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .bf-brand .bf-name{font-family:var(--serif-cjk);font-weight:600;font-size:1.5rem; letter-spacing:.16em;margin-bottom:16px;color:var(--gold)} .bf-brand p{color:var(--mist);font-weight:300;max-width:24em} .bf-col h5{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase; color:var(--gold);margin-bottom:18px} .bf-col a{display:block;color:var(--mist);text-decoration:none;font-weight:300; padding:6px 0;transition:.3s} .bf-col a:hover{color:var(--star);padding-left:6px} .blog-foot-bottom{max-width:1180px;margin:0 auto;border-top:1px solid var(--line-soft); padding-top:26px;display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:16px;font-family:var(--mono);letter-spacing:.1em;color:var(--mist-2)} .blog-foot-bottom .coord{color:var(--gold)} /* —— 阅读进度条（顶部，仅抵达后显示） —— */ .read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:240; background:linear-gradient(90deg,var(--violet),var(--gold-bright),var(--ice)); box-shadow:0 0 10px var(--gold-glow);opacity:0;transition:opacity .4s,width .12s linear; pointer-events:none} .read-progress.show{opacity:1} /* —— 返回顶部（右下角，滚动出现，全站可用） —— */ .to-top{position:fixed;right:30px;bottom:88px;z-index:215; width:50px;height:50px;border-radius:50%;display:none;align-items:center;justify-content:center; background:linear-gradient(150deg, color-mix(in srgb,var(--gold) 22%,var(--card)), var(--card)); backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--gold) 42%,transparent); color:var(--gold-bright);cursor:pointer;transition:all .35s cubic-bezier(.19,1,.22,1); box-shadow:0 12px 30px -14px rgba(0,0,0,.7), 0 0 22px -8px var(--gold-glow)} .to-top.show{display:inline-flex;animation:toTopIn .45s cubic-bezier(.19,1,.22,1)} @keyframes toTopIn{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}} .to-top:hover{border-color:var(--gold-bright);color:var(--star);transform:translateY(-3px); box-shadow:0 16px 36px -14px rgba(0,0,0,.7), 0 0 34px -6px var(--gold-glow)} .to-top:active{transform:translateY(-1px) scale(.96)} .to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* —— 补迁移组件 · 响应式 —— */ @media (max-width:1000px){ .links-grid{grid-template-columns:repeat(2,1fr)} .blog-foot-grid{grid-template-columns:1fr 1fr;gap:32px} .bf-brand{grid-column:1 / -1} } @media (max-width:680px){ .links-grid{grid-template-columns:1fr} .blog-foot-grid{grid-template-columns:1fr} .to-top{right:18px;bottom:74px} } /* —— 手机端顶栏紧凑化（字号放大后，避免 logo / 徽标换行） —— */ @media (max-width:560px){ .topbar{padding:12px 18px} .topbar-logo{font-size:1.16rem;letter-spacing:.1em;white-space:nowrap} .topbar-links{gap:10px} .topbar-badge{display:none} /* 演示徽标在窄屏隐藏，留出空间 */ .blog-readout{gap:6px 14px;font-size:.72rem} .blog-hero-actions .btn{padding:13px 22px;font-size:.76rem} } /* ════════════════════════════════════════════════════════════════ 博客浏览页 · 内容宽度（统一加宽 + 收窄两侧留白） —— 原先各区段 max-width:1180px 且左右用 8vw，导致笔记本上实际可用宽度 偏窄（≈1210px@1440）。这里统一放宽到 1320px，并把两侧留白改为 clamp(24px,4vw,64px)，宽屏更舒展、窄屏依旧安全。 想整体调宽 / 调窄：改下面的 --blog-w 与左右 padding 即可（Hexo 同理）。 ════════════════════════════════════════════════════════════════ */ :root{ --blog-w:1320px; --blog-pad:clamp(24px, 4vw, 64px); } .blog-about, .featured-section, .sky-section, .tonight-section, .calendar-section, .news-section, .links-section{ max-width:var(--blog-w); padding-left:var(--blog-pad); padding-right:var(--blog-pad); } .blog-about{ max-width:var(--blog-w) } /* 原 1100px → 与其余区段对齐 */ .blog-foot{ padding-left:var(--blog-pad); padding-right:var(--blog-pad) } .blog-foot-grid, .blog-foot-bottom{ max-width:var(--blog-w) } /* 抵达后博客 HERO 两侧留白也略放宽，与下方区段呼应 */ .blog-hero{ padding-left:var(--blog-pad); padding-right:var(--blog-pad) } /* ════════════════════════════════════════════════════════════════ 公告页 · 内容宽度（与博客页统一节奏，避免相比之下显窄） —— 两侧留白改用与博客页相同的 --blog-pad；主要区块适度加宽。 阅读型区块（公告卡 / 时间线 / 引言 / 即将上线文案）仅温和加宽， 仍保证舒适的阅读行宽。 ════════════════════════════════════════════════════════════════ */ .announce-section, .timeline-section, .features-section, .quote-section, .social-section, .coming-section{ padding-left:var(--blog-pad); padding-right:var(--blog-pad); } .page > footer{ padding-left:var(--blog-pad); padding-right:var(--blog-pad) } /* 区块最大宽度上调 */ .cosmos-grid{ max-width:1180px } /* 星座卡网格：960 → 1180，卡片更舒展 */ .announce-card{ max-width:880px } /* 公告卡：720 → 880，更有分量仍易读 */ .timeline{ max-width:760px } /* 时间线：700 → 760，温和 */ .quote-section blockquote{ max-width:760px } /* 引言：680 → 760 */ .coming-desc{ max-width:660px } /* 即将上线文案：580 → 660 */