/* ============================================================ nebigr-aurora — single-file global stylesheet WebGL fluid + 3D tilt + cursor spotlight aesthetic. Light/dark via prefers-color-scheme + manual override on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700;800&display=swap'); /* -------- 0. Reset -------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea { font: inherit; color: inherit; } /* -------- 1. Theme variables -------- */ :root { --bg-1: #070716; --bg-2: #1a0b2e; --bg-3: #0f1538; --surface: rgba(15, 18, 38, 0.72); --surface-strong: rgba(12, 14, 30, 0.94); --card-bg: rgba(20, 22, 48, 0.42); --card-bg-hover: rgba(28, 32, 64, 0.58); --card-border: rgba(255, 255, 255, 0.09); --card-border-hover: rgba(178, 102, 255, 0.55); --card-shadow: rgba(91, 140, 255, 0.18); --card-shadow-hover: rgba(178, 102, 255, 0.32); --text-strong: #f4f5ff; --text-body: rgba(244, 245, 255, 0.88); --text-muted: rgba(244, 245, 255, 0.6); --text-faint: rgba(244, 245, 255, 0.4); --accent: #b266ff; --accent-2: #5b8cff; --accent-3: #ff5cdb; --accent-glow: rgba(178, 102, 255, 0.45); --code-bg: rgba(8, 10, 24, 0.78); --chip-bg: rgba(91, 140, 255, 0.2); --chip-text: #d6c2ff; --spotlight-blend: screen; --spotlight-color: rgba(178, 102, 255, 0.22); --line: rgba(255, 255, 255, 0.08); --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --container: 1280px; --reading: 760px; --nav-h: 64px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } html[data-theme='light'] { --bg-1: #fafaff; --bg-2: #f0e9ff; --bg-3: #fde4f6; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.96); --card-bg: rgba(255, 255, 255, 0.62); --card-bg-hover: rgba(255, 255, 255, 0.85); --card-border: rgba(124, 92, 255, 0.16); --card-border-hover: rgba(124, 92, 255, 0.55); --card-shadow: rgba(124, 92, 255, 0.14); --card-shadow-hover: rgba(255, 107, 181, 0.24); --text-strong: #14102b; --text-body: #2a2050; --text-muted: #5a4f7a; --text-faint: #8c83a8; --accent: #7c5cff; --accent-2: #5cc8ff; --accent-3: #ff6bb5; --accent-glow: rgba(124, 92, 255, 0.38); --code-bg: rgba(20, 14, 50, 0.06); --chip-bg: rgba(124, 92, 255, 0.12); --chip-text: #4d2fbf; --spotlight-blend: multiply; --spotlight-color: rgba(124, 92, 255, 0.18); --line: rgba(20, 16, 43, 0.08); } /* -------- 2. Body / typography base -------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; color: var(--text-body); line-height: 1.75; background: radial-gradient(ellipse 80% 60% at 20% 8%, var(--bg-2) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 92%, var(--bg-3) 0%, transparent 60%), var(--bg-1); background-attachment: fixed; overflow-x: hidden; transition: background 0.6s var(--ease), color 0.4s var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: 'Orbitron', 'Exo 2', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: var(--text-strong); line-height: 1.25; letter-spacing: 0.5px; font-weight: 600; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.4rem; margin-top: 1.6em; margin-bottom: 0.6em; } h4 { font-size: 1.2rem; margin-top: 1.4em; margin-bottom: 0.5em; } p { margin: 0 0 1em; } a { color: var(--accent-2); transition: color 0.2s var(--ease), text-shadow 0.2s var(--ease); } a:hover { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); } ::selection { background: var(--accent); color: #fff; } ::-moz-selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* -------- 3. Page-wide effects DOM -------- */ #webgl-fluid-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; opacity: 0.55; mix-blend-mode: screen; } html[data-theme='light'] #webgl-fluid-canvas { opacity: 0.42; mix-blend-mode: multiply; } #cursor-spotlight { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); mix-blend-mode: var(--spotlight-blend); background: radial-gradient( 320px circle at var(--mx, -1000px) var(--my, -1000px), var(--spotlight-color), transparent 70% ); } /* skip link */ .skip-link { position: fixed; top: -100px; left: 16px; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: var(--radius-sm); z-index: 10000; transition: top 0.2s var(--ease); } .skip-link:focus { top: 16px; } /* -------- 4. Layout containers -------- */ .app { padding-top: var(--nav-h); min-height: 100vh; position: relative; z-index: 1; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* -------- 5. Navigation -------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; background: var(--surface); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-bottom: 1px solid var(--line); box-shadow: 0 4px 24px var(--card-shadow); transition: background 0.4s var(--ease); } .nav__inner { height: 100%; display: flex; align-items: center; gap: 24px; } .nav__brand { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text-strong); letter-spacing: 1px; background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; flex-shrink: 0; } .nav__menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; } .nav__menu::-webkit-scrollbar { display: none; } .nav__link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; color: var(--text-body); font-size: 0.95rem; white-space: nowrap; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .nav__link:hover, .nav__link.is-active { color: var(--text-strong); background: var(--card-bg); text-shadow: none; } .nav__actions { display: flex; gap: 8px; flex-shrink: 0; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-body); background: transparent; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .icon-btn:hover { background: var(--card-bg); color: var(--accent); } .icon-btn svg { width: 20px; height: 20px; stroke-width: 2; } .nav__hamburger { display: none; } @media (max-width: 900px) { .nav__menu { display: none; } .nav__hamburger { display: inline-flex; } .nav__menu.is-open { display: flex; position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; background: var(--surface-strong); backdrop-filter: blur(22px); padding: 16px; gap: 4px; border-bottom: 1px solid var(--line); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } .nav__menu.is-open .nav__link { padding: 12px 16px; } } /* -------- 6. Hero (home) -------- */ .hero { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; position: relative; } .hero__title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(3rem, 9vw, 7rem); line-height: 1.15; padding-bottom: 0.12em; letter-spacing: -1px; background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 50%, var(--accent-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 80px var(--accent-glow); animation: hero-pop 1.2s var(--ease) both; } .hero__subtitle { margin-top: 24px; font-size: clamp(1rem, 2vw, 1.4rem); color: var(--text-body); letter-spacing: 4px; animation: hero-pop 1.2s 0.2s var(--ease) both; } .hero__scroll { margin-top: 64px; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase; animation: scroll-bob 2.4s ease-in-out infinite; } .hero__scroll::after { content: ''; display: block; width: 1px; height: 36px; margin: 12px auto 0; background: linear-gradient(180deg, var(--accent), transparent); } @keyframes hero-pop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes scroll-bob { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(8px); opacity: 1; } } /* -------- 7. Card / post-card -------- */ .section { padding: 64px 0; } .section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; gap: 16px; } .section__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; } .section__title small { margin-left: 12px; color: var(--text-muted); font-size: 0.5em; font-family: 'Exo 2', sans-serif; letter-spacing: 2px; } .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; } .post-card { background: var(--card-bg); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transform-style: preserve-3d; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); box-shadow: 0 8px 32px var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .post-card:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: 0 16px 48px var(--card-shadow-hover), 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .post-card__cover { aspect-ratio: 16 / 9; overflow: hidden; position: relative; } .post-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .post-card:hover .post-card__cover img { transform: scale(1.06); } .post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 12px; } .post-card__title { font-family: 'Orbitron', 'Exo 2', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--text-strong); line-height: 1.4; letter-spacing: 0; margin: 0; } .post-card__summary { color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .post-card__meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--text-faint); font-size: 0.82rem; margin-top: 4px; } .post-card__meta svg { width: 14px; height: 14px; } .post-card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 0.78rem; border: 1px solid var(--card-border); transition: all 0.2s var(--ease); } .chip:hover { background: var(--accent); color: #fff; box-shadow: 0 4px 18px var(--accent-glow); } /* -------- 8. Pagination -------- */ .pagination { display: flex; justify-content: center; gap: 6px; margin: 64px 0 24px; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-body); backdrop-filter: blur(12px); transition: all 0.2s var(--ease); } .pagination a:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-shadow: none; } .pagination .current { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; border-color: transparent; box-shadow: 0 6px 20px var(--accent-glow); } /* -------- 9. Post detail -------- */ .post-header { padding: 96px 0 48px; text-align: center; position: relative; } .post-header__cover { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: 0.5; } .post-header__cover img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.4); transform: scale(1.2); } .post-header__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--bg-1) 100%); } .post-header__title { font-size: clamp(1.8rem, 5vw, 3.5rem); margin: 0 0 16px; background: linear-gradient(135deg, var(--text-strong) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .post-header__meta { display: flex; justify-content: center; gap: 24px; color: var(--text-muted); font-size: 0.9rem; flex-wrap: wrap; } .post-header__meta span { display: inline-flex; align-items: center; gap: 6px; } .post-header__meta svg { width: 14px; height: 14px; } .post-layout { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 1100px) { .post-layout { grid-template-columns: minmax(0, 760px) 240px; justify-content: center; gap: 48px; } } .post-body { background: var(--card-bg); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 40px clamp(20px, 4vw, 56px); box-shadow: 0 8px 32px var(--card-shadow); color: var(--text-body); font-size: 1.02rem; line-height: 1.85; overflow-wrap: break-word; } .post-body h1, .post-body h2, .post-body h3, .post-body h4 { color: var(--text-strong); border-left: 4px solid var(--accent); padding-left: 14px; margin-top: 1.6em; } .post-body h1 { font-size: 1.7rem; } .post-body h2 { font-size: 1.45rem; } .post-body h3 { font-size: 1.2rem; } .post-body p { margin: 0 0 1.1em; } .post-body img { border-radius: var(--radius-sm); margin: 1.4em auto; cursor: zoom-in; box-shadow: 0 6px 24px var(--card-shadow); } .post-body a { border-bottom: 1px dashed currentColor; transition: all 0.2s var(--ease); } .post-body a:hover { border-bottom-style: solid; } .post-body code { background: var(--code-bg); color: var(--text-strong); border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 6px; font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 0.92em; } .post-body pre { background: var(--code-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 18px 20px; overflow-x: auto; margin: 1.4em 0; position: relative; backdrop-filter: blur(12px); } .post-body pre code { background: none; border: none; padding: 0; font-size: 0.88rem; line-height: 1.7; } .post-body blockquote { background: var(--card-bg); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 20px; margin: 1.4em 0; color: var(--text-body); backdrop-filter: blur(12px); } .post-body blockquote p:last-child { margin-bottom: 0; } .post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1.1em; } .post-body ul { list-style: disc; } .post-body ol { list-style: decimal; } .post-body li { margin: 0.3em 0; } .post-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; border-radius: var(--radius-sm); overflow: hidden; } .post-body th, .post-body td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; } .post-body th { background: var(--card-bg); color: var(--text-strong); } .post-body hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; } .post-body strong { color: var(--text-strong); } .copy-btn { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 0.75rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); border: 1px solid var(--card-border); opacity: 0; transition: opacity 0.2s var(--ease), color 0.2s var(--ease); } .post-body pre:hover .copy-btn { opacity: 1; } .copy-btn:hover { color: var(--accent); } .copy-btn.is-copied { color: var(--accent-3); } /* TOC */ .toc { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px; backdrop-filter: blur(20px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; font-size: 0.86rem; display: none; } @media (min-width: 1100px) { .toc { display: block; } } .toc__title { font-family: 'Orbitron', sans-serif; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 3px; margin-bottom: 12px; text-transform: uppercase; } .toc ol { padding-left: 0; } .toc ol ol { padding-left: 14px; } .toc li { margin: 4px 0; list-style: none; } .toc a { display: block; color: var(--text-muted); border-left: 2px solid transparent; padding: 4px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: all 0.2s var(--ease); line-height: 1.4; } .toc a:hover { color: var(--text-strong); background: var(--card-bg-hover); text-shadow: none; } .toc a.is-active { color: var(--accent); border-left-color: var(--accent); background: var(--card-bg-hover); } .post-footer { margin-top: 24px; display: grid; gap: 24px; } .post-license { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px 24px; color: var(--text-muted); font-size: 0.88rem; backdrop-filter: blur(16px); } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } } .post-nav__item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px 20px; backdrop-filter: blur(16px); transition: all 0.25s var(--ease); color: var(--text-body); } .post-nav__item:hover { border-color: var(--accent); background: var(--card-bg-hover); color: var(--text-strong); text-shadow: none; } .post-nav__label { color: var(--text-faint); font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; } /* -------- 10. Archive timeline -------- */ .archive-year { font-family: 'Orbitron', sans-serif; font-size: 2.2rem; color: var(--accent); margin: 48px 0 24px; text-shadow: 0 0 24px var(--accent-glow); } .archive-list { position: relative; padding-left: 28px; } .archive-list::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; background: linear-gradient(180deg, var(--accent), transparent); } .archive-item { position: relative; padding: 14px 0 14px 18px; transition: padding 0.25s var(--ease); } .archive-item::before { content: ''; position: absolute; left: -25px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-1), 0 0 14px var(--accent); } .archive-item:hover { padding-left: 26px; } .archive-item__date { font-family: 'Orbitron', sans-serif; font-size: 0.82rem; color: var(--text-muted); margin-right: 12px; } .archive-item__title { color: var(--text-body); font-size: 1.02rem; transition: color 0.2s var(--ease); } .archive-item:hover .archive-item__title { color: var(--accent); } /* Infinite-scroll reveal */ .archive-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .archive-reveal.is-visible { opacity: 1; transform: none; } .archive-sentinel { display: flex; justify-content: center; gap: 8px; padding: 32px 0 16px; opacity: 0; transition: opacity 0.3s var(--ease); } .archive-sentinel.is-active { opacity: 1; } .archive-sentinel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: bounce 0.9s ease-in-out infinite; } .archive-sentinel__dot:nth-child(2) { animation-delay: 0.15s; } .archive-sentinel__dot:nth-child(3) { animation-delay: 0.3s; } @keyframes bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-8px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .archive-reveal { opacity: 1 !important; transform: none !important; } .archive-sentinel { display: none; } } /* -------- 11. Categories index / Tag cloud -------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .cat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px 24px; backdrop-filter: blur(20px); transform-style: preserve-3d; transition: all 0.3s var(--ease); color: var(--text-body); text-align: center; } .cat-card:hover { border-color: var(--accent); background: var(--card-bg-hover); box-shadow: 0 12px 36px var(--card-shadow-hover); color: var(--text-strong); text-shadow: none; } .cat-card__name { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; margin: 0 0 8px; } .cat-card__count { color: var(--text-faint); font-size: 0.82rem; } .cat-card.is-active { border-color: var(--accent); background: var(--card-bg-hover); box-shadow: 0 12px 36px var(--card-shadow-hover), inset 0 0 0 1px var(--accent); color: var(--text-strong); } .cat-card.is-active .cat-card__name { background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* tag-cloud → use button */ .tag-cloud .tag-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-body); transition: all 0.2s var(--ease); backdrop-filter: blur(12px); font-family: inherit; cursor: pointer; } .tag-cloud .tag-btn:hover { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; box-shadow: 0 6px 18px var(--accent-glow); } .tag-cloud .tag-btn.is-active { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); border-color: transparent; box-shadow: 0 8px 24px var(--accent-glow); } /* collection inline detail */ .collection-detail { margin-top: 32px; min-height: 1px; } .collection-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px clamp(20px, 4vw, 32px); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 8px 32px var(--card-shadow); animation: panel-in 0.4s var(--ease) both; } @keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .collection-panel__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .collection-panel__link { color: var(--accent-2); font-size: 0.86rem; } .collection-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .collection-list li { padding: 10px 8px; border-radius: var(--radius-sm); transition: background 0.15s var(--ease); } .collection-list li:hover { background: var(--card-bg-hover); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: baseline; padding: 16px 0; } .tag-cloud a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-body); transition: all 0.2s var(--ease); backdrop-filter: blur(12px); } .tag-cloud a:hover { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; text-shadow: none; box-shadow: 0 6px 18px var(--accent-glow); } .tag-cloud .tag-count { margin-left: 8px; color: var(--text-faint); font-size: 0.78em; } .breadcrumb { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 8px; } .breadcrumb a { color: var(--accent-2); } .breadcrumb span { margin: 0 8px; color: var(--text-faint); } /* -------- 12. About page -------- */ .about-hero { text-align: center; padding: 64px 0 48px; } .about-hero__avatar { width: 144px; height: 144px; border-radius: 50%; margin: 0 auto 24px; border: 3px solid var(--card-border); box-shadow: 0 0 40px var(--accent-glow); object-fit: cover; transition: transform 0.4s var(--ease); } .about-hero__avatar:hover { transform: scale(1.05) rotate(-3deg); } .about-hero__name { font-family: 'Orbitron', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-hero__sub { color: var(--text-muted); font-size: 1.1rem; letter-spacing: 3px; margin-top: 8px; } .about-hero__desc { color: var(--text-body); margin-top: 14px; } .about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 48px; } .about-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(20px); transform-style: preserve-3d; transition: all 0.3s var(--ease); } .about-card:hover { border-color: var(--accent); background: var(--card-bg-hover); box-shadow: 0 12px 36px var(--card-shadow-hover); } .about-card__tag { color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase; } .about-card__title { font-size: 1.4rem; color: var(--text-strong); margin: 8px 0 12px; } .about-card__body { color: var(--text-body); font-size: 0.95rem; } .about-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .about-words { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 16px 0 48px; } .about-words span { padding: 6px 18px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--card-bg); color: var(--accent); font-family: 'Orbitron', sans-serif; backdrop-filter: blur(12px); transition: all 0.25s var(--ease); } .about-words span:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 24px var(--accent-glow); } /* Featured maxim card */ .about-feature { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 56px clamp(32px, 6vw, 80px); margin-bottom: 24px; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); text-align: center; overflow: hidden; transform-style: preserve-3d; transition: all 0.3s var(--ease); box-shadow: 0 8px 32px var(--card-shadow); } .about-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 60%); opacity: 0.5; pointer-events: none; } .about-feature:hover { border-color: var(--accent); box-shadow: 0 16px 48px var(--card-shadow-hover); } .about-feature__quote { position: absolute; top: -28px; left: 32px; font-family: 'Orbitron', serif; font-size: 11rem; line-height: 1; color: var(--accent); opacity: 0.18; pointer-events: none; user-select: none; } .about-feature__top { font-family: 'Orbitron', 'Exo 2', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--text-strong); line-height: 1.4; margin-bottom: 8px; position: relative; } .about-feature__bottom { font-family: 'Orbitron', 'Exo 2', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.4; position: relative; } .about-feature__tag { margin-top: 24px; font-size: 0.78rem; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); font-family: 'Orbitron', sans-serif; position: relative; } /* Two-column row for skills + MBTI */ .about-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; } .about-card--accent { padding: 32px 28px; } /* Stats banner */ .about-stats { display: block; background: linear-gradient(135deg, rgba(91, 140, 255, 0.18), rgba(178, 102, 255, 0.18), rgba(255, 92, 219, 0.16)); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 28px clamp(24px, 4vw, 40px); color: var(--text-body); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); transform-style: preserve-3d; transition: all 0.3s var(--ease); box-shadow: 0 8px 32px var(--card-shadow); margin-bottom: 24px; } .about-stats:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 16px 48px var(--card-shadow-hover); text-shadow: none; } .about-stats__label { color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; } .about-stats__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; } .about-stats__num { font-family: 'Orbitron', sans-serif; font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 700; background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .about-stats__name { margin-top: 6px; font-size: 0.82rem; color: var(--text-muted); letter-spacing: 2px; } /* -------- 13. Essay -------- */ .essay-grid { columns: 320px; column-gap: 24px; } .essay-item { break-inside: avoid; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; backdrop-filter: blur(20px); transition: all 0.3s var(--ease); } .essay-item:hover { border-color: var(--accent); background: var(--card-bg-hover); box-shadow: 0 12px 36px var(--card-shadow-hover); transform: translateY(-3px); } .essay-item__content { color: var(--text-body); font-size: 0.96rem; line-height: 1.7; } .essay-item__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; margin-top: 12px; } .essay-item__images img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); cursor: zoom-in; } .essay-item__meta { margin-top: 14px; color: var(--text-faint); font-size: 0.82rem; display: flex; justify-content: space-between; align-items: center; } .essay-item__meta a { color: var(--accent-2); } /* -------- 14. Link page -------- */ .link-section { margin-bottom: 48px; } .link-section__title { font-size: 1.4rem; margin-bottom: 16px; color: var(--text-strong); } .link-section__title::before { content: ''; display: inline-block; width: 6px; height: 22px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 3px; vertical-align: -3px; margin-right: 10px; } .link-section__desc { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 16px; } .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .link-card { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 14px 16px; backdrop-filter: blur(18px); transition: all 0.25s var(--ease); color: var(--text-body); } .link-card:hover { border-color: var(--accent); background: var(--card-bg-hover); transform: translateY(-3px); box-shadow: 0 12px 32px var(--card-shadow-hover); text-shadow: none; } .link-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--card-border); flex-shrink: 0; } .link-card__info { min-width: 0; flex: 1; } .link-card__name { color: var(--text-strong); font-weight: 600; margin: 0 0 4px; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-card__desc { color: var(--text-muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------- 15. Music / Contact / 404 -------- */ .simple-page { padding: 96px 0 64px; text-align: center; min-height: calc(100vh - var(--nav-h)); } .simple-page__title { font-family: 'Orbitron', sans-serif; font-size: clamp(2.2rem, 5vw, 3.6rem); background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 24px; } .simple-page__sub { color: var(--text-muted); margin-bottom: 36px; letter-spacing: 2px; } .simple-page__body { max-width: var(--reading); margin: 0 auto; text-align: left; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 32px clamp(20px, 4vw, 40px); backdrop-filter: blur(20px); color: var(--text-body); line-height: 1.85; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff !important; font-weight: 500; box-shadow: 0 8px 24px var(--accent-glow); transition: all 0.25s var(--ease); border: none; } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 14px 36px var(--accent-glow); text-shadow: none; } /* ---------- Poker-card grid (project repos) ---------- */ .poker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 32px; padding: 24px 0 48px; perspective: 1400px; } .poker-card { position: relative; aspect-ratio: 5 / 7; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 14px 14px 16px; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 12px 36px var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); color: var(--text-body); display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s var(--ease); --lang-color: var(--accent); } .poker-card::before { content: ''; position: absolute; inset: 6px; border-radius: 12px; border: 1px solid var(--card-border); pointer-events: none; opacity: 0.6; } .poker-card::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(120% 80% at 50% 0%, var(--lang-color), transparent 55%); opacity: 0.18; pointer-events: none; transition: opacity 0.4s var(--ease); } /* Initial fan-out (alternating rotation) */ .poker-grid > .poker-card:nth-child(4n+1) { transform: rotate(-1.6deg); } .poker-grid > .poker-card:nth-child(4n+2) { transform: rotate(0.6deg); } .poker-grid > .poker-card:nth-child(4n+3) { transform: rotate(-0.4deg); } .poker-grid > .poker-card:nth-child(4n) { transform: rotate(1.4deg); } .poker-card:hover { transform: translateY(-14px) rotate(0deg) scale(1.04) !important; border-color: var(--lang-color); box-shadow: 0 28px 64px var(--card-shadow-hover), 0 0 0 1px var(--lang-color), 0 0 60px var(--lang-color); z-index: 5; } .poker-card:hover::after { opacity: 0.36; } .poker-card__corner { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-family: 'Orbitron', sans-serif; color: var(--lang-color); font-size: 0.78rem; letter-spacing: 1px; z-index: 1; } .poker-card__corner--bot { align-self: flex-end; transform: rotate(180deg); margin-top: auto; } .poker-card__rank { font-weight: 700; text-shadow: 0 0 12px var(--lang-color); } .poker-card__suit { margin-top: 4px; opacity: 0.78; font-size: 0.74em; } .poker-card__center { flex: 1; display: flex; align-items: center; justify-content: center; margin: -8px 0; z-index: 1; } .poker-card__symbol { font-size: clamp(2.8rem, 7vw, 4.6rem); color: var(--lang-color); text-shadow: 0 0 24px var(--lang-color), 0 0 48px var(--lang-color); line-height: 1; user-select: none; transform: translateZ(20px); } .poker-card__body { text-align: center; z-index: 1; margin-top: 4px; } .poker-card__name { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; color: var(--text-strong); margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; } .poker-card__desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .poker-card__meta { margin-top: 8px; color: var(--text-faint); font-size: 0.72rem; letter-spacing: 1px; } .poker-card--skeleton { pointer-events: none; opacity: 0.45; animation: shimmer 1.6s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .poker-grid > .poker-card { transform: none !important; } .poker-card--skeleton { animation: none; } } @media (max-width: 480px) { .poker-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; } } /* Article-level comment block */ .post-comments { max-width: var(--reading); margin: 64px auto 0; } .post-comments__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .post-comments__title { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; margin: 0; color: var(--text-strong); } .post-comments__hint { color: var(--text-muted); font-size: 0.82rem; } .post-comments__hint a { color: var(--accent-2); } .post-comments .utterances-wrapper { margin-top: 0; } /* Utterances comments */ .utterances-wrapper { max-width: var(--reading); margin: 32px auto 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px clamp(16px, 4vw, 32px); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 8px 32px var(--card-shadow); min-height: 200px; } .utterances-wrapper .utterances { max-width: 100% !important; } .utterances-wrapper::before { content: '加载评论…'; display: block; text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 32px 0; } .utterances-wrapper:has(.utterances)::before { display: none; } .error-404 { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; } .error-404__num { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(7rem, 22vw, 16rem); line-height: 1; background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 50%, var(--accent-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 80px var(--accent-glow); animation: glitch 4s infinite alternate; } @keyframes glitch { 0%, 80%, 100% { transform: none; filter: none; } 85% { transform: translate(-2px, 1px); filter: hue-rotate(20deg); } 90% { transform: translate(3px, -2px); filter: hue-rotate(-30deg); } } .error-404__sub { color: var(--text-muted); margin: 16px 0 36px; font-size: 1.05rem; letter-spacing: 4px; } /* -------- 16. Footer -------- */ .footer { background: var(--surface); backdrop-filter: blur(22px); border-top: 1px solid var(--line); padding: 36px 0 28px; color: var(--text-muted); font-size: 0.88rem; text-align: center; margin-top: 48px; } .footer__inner { display: flex; flex-direction: column; gap: 12px; align-items: center; } .footer__social { display: flex; gap: 14px; } .footer__social a { width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--card-border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-body); transition: all 0.2s var(--ease); } .footer__social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); text-shadow: none; } .footer__social svg { width: 18px; height: 18px; } .footer p { margin: 0; } /* -------- 17. Search modal -------- */ .search { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 80px 16px 16px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); } .search.is-open { opacity: 1; pointer-events: auto; } .search__panel { width: 100%; max-width: 640px; background: var(--surface-strong); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); overflow: hidden; transform: translateY(-12px); transition: transform 0.3s var(--ease); } .search.is-open .search__panel { transform: none; } .search__input { width: 100%; padding: 18px 22px; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--text-strong); font-size: 1.1rem; outline: none; } .search__input::placeholder { color: var(--text-faint); } .search__results { max-height: 60vh; overflow-y: auto; padding: 8px; } .search__result { display: block; padding: 12px 14px; border-radius: var(--radius-sm); color: var(--text-body); transition: background 0.15s var(--ease); } .search__result:hover { background: var(--card-bg-hover); color: var(--text-strong); text-shadow: none; } .search__result-title { font-weight: 600; margin-bottom: 4px; } .search__result-snippet { color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; } .search__result mark { background: var(--accent-glow); color: var(--text-strong); padding: 0 2px; border-radius: 2px; } .search__empty { padding: 24px; text-align: center; color: var(--text-muted); } /* -------- 18. Lightbox -------- */ .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); cursor: zoom-out; } .lightbox.is-open { opacity: 1; pointer-events: auto; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); } /* -------- 19. Back-top -------- */ .back-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: 0 8px 24px var(--accent-glow); display: inline-flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .back-top.is-visible { opacity: 1; pointer-events: auto; transform: none; } .back-top:hover { transform: translateY(-2px); filter: brightness(1.1); } .back-top svg { width: 18px; height: 18px; } /* -------- 20. Responsive tweaks -------- */ @media (max-width: 768px) { #cursor-spotlight { display: none; } .post-body { padding: 28px 20px; } .section { padding: 48px 0; } } @media (max-width: 480px) { .container { padding: 0 16px; } .post-card__body { padding: 16px 18px 18px; } .nav__brand { font-size: 1rem; } } /* -------- 21. Reduced motion -------- */ @media (prefers-reduced-motion: reduce) { #webgl-fluid-canvas, #cursor-spotlight { display: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .post-card, .about-card, .cat-card { transform: none !important; } } /* -------- 22. When fluid was destroyed at runtime -------- */ html[data-fluid='off'] body { background: radial-gradient(ellipse 80% 60% at 20% 8%, var(--bg-2) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 92%, var(--bg-3) 0%, transparent 60%), var(--bg-1) !important; } /* -------- 23. Vanilla-tilt glare clip -------- */ .js-tilt-glare { border-radius: inherit; overflow: hidden; }