:root { /* Editorial signature palette — 暖纸底 + 墨绿签名色 */ --bg: #F2EDE0; /* 暖纸底（替换纯白 #FAFAF8）*/ --surface: #FBF7EC; /* 卡片/正文区，比底色更亮一档 */ --surface-raised: #FFFDF7; /* 最高层（toast/弹层）*/ --text: #1A1A17; /* 带色温的近黑，不用纯 #1D1D1F */ --text-secondary: #5C5852; --text-tertiary: #9A9389; --border: #DCD3BE; --accent: #1F4D3A; /* 签名色：墨绿 */ --accent-hover: #173D2E; --accent-text: #FBF7EC; --signature: #1F4D3A; /* 签名色别名，方便全局替换 */ --signature-soft: #2E6850; --highlight-bg: #E8E0CB; /* 生词高亮：暖米色 */ --highlight-border: #1F4D3A; --danger: #ff3b30; /* 删除/危险操作 */ --warning: #b45309; /* 警告文字（浅色主题）*/ --warning-bg: #f59e0b; /* 警告底色/边框基色 */ --success: #2D6A4F; /* 成功/A1-A2 难度色 */ --wax-seal: #B8862E; /* 蜡封按钮色 */ --shadow: 0 1px 2px rgba(60,50,30,0.05), 0 6px 18px rgba(60,50,30,0.06); /* SVG 噪点纹理（复用：首页/故事页/历史页背景）*/ --noise-256: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); /* Editorial 字体系统 */ --font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; --font-book: 'Iowan Old Style', 'Charter', Georgia, serif; --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.22, 1, 0.36, 1); --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 100px; /* 星空背景（首页/输入页/历史页共用）*/ --star-sky: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(60,40,120,0.18), transparent), radial-gradient(ellipse 50% 40% at 75% 25%, rgba(40,80,160,0.12), transparent), radial-gradient(ellipse 80% 60% at 50% 50%, rgba(88,60,140,0.20), transparent), radial-gradient(ellipse 35% 25% at 30% 35%, rgba(80,60,160,0.08), transparent), radial-gradient(ellipse 45% 30% at 60% 70%, rgba(50,100,180,0.06), transparent), radial-gradient(1px 1px at 3% 5%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 14% 28%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 18% 42%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 26% 72%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 30% 8%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 33% 35%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 42% 15%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 48% 75%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 50% 20%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 52% 92%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 58% 62%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 68% 48%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 85% 78%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 88% 25%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 95% 38%, rgba(255,255,255,0.45), transparent), radial-gradient(2px 2px at 5% 30%, rgba(210,180,120,0.7), transparent), radial-gradient(2px 2px at 30% 5%, rgba(200,220,255,0.6), transparent), radial-gradient(2px 2px at 55% 45%, rgba(210,180,120,0.5), transparent), radial-gradient(2px 2px at 85% 80%, rgba(200,220,255,0.6), transparent), radial-gradient(2px 2px at 12% 70%, rgba(210,180,120,0.4), transparent), radial-gradient(2px 2px at 68% 35%, rgba(200,220,255,0.5), transparent), radial-gradient(2px 2px at 40% 22%, rgba(210,180,120,0.45), transparent), radial-gradient(2px 2px at 92% 55%, rgba(200,220,255,0.5), transparent), radial-gradient(2px 2px at 25% 95%, rgba(210,180,120,0.4), transparent), radial-gradient(2px 2px at 78% 12%, rgba(200,220,255,0.45), transparent); } [data-theme="dark"] { --bg: #1A1714; /* 暖黑（替换纯黑 #000）*/ --surface: #242018; --surface-raised: #2C2820; --text: #EDE8DD; --text-secondary: #A39E90; --text-tertiary: #6E6A5F; --border: #3A362C; --accent: #D4A85C; /* 暗色签名色：暖金（墨绿太暗不够亮）*/ --accent-hover: #C49648; --accent-text: #1A1714; --signature: #D4A85C; --signature-soft: #BFA068; --highlight-bg: #2E2A20; --highlight-border: #D4A85C; --danger: #ff453a; /* 暗色主题：删除红略提亮 */ --warning: #fbbf24; /* 警告文字（暗色主题）：暖金 */ --warning-bg: #f59e0b; --success: #4ADE80; /* 暗色主题：成功色提亮 */ --wax-seal: #D4A85C; /* 暗色主题：蜡封按钮用暖金 */ --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.25); } /* ===== 星空/暗色场景变量（首页/Library 深蓝底+暖金文字）===== */ :root { --star-bg: #070b1a; --star-bg-surface: #1a1525; --star-bg-raised: #231e35; --star-text: #e8d5b0; --star-text-secondary: rgba(210,170,100,0.7); --star-text-muted: var(--star-tint-45); --star-accent: rgba(210,170,100,0.5); --star-accent-soft: var(--star-tint-12); --star-gold: #d2aa64; --star-gold-dim: #c9a227; --star-purple: #c9b8e8; --star-purple-glow: rgba(150,110,210,0.7); --star-card-gradient: linear-gradient(145deg, #1a1525, #1f1a30, #231e35); /* 高频半透明暖金阶（基于 rgb(210,170,100)） */ --star-tint-06: rgba(210,170,100,0.06); --star-tint-08: rgba(210,170,100,0.08); --star-tint-12: rgba(210,170,100,0.12); --star-tint-15: rgba(210,170,100,0.15); --star-tint-35: rgba(210,170,100,0.35); --star-tint-45: rgba(210,170,100,0.45); --star-tint-50: rgba(210,170,100,0.50); --star-tint-70: rgba(210,170,100,0.70); /* ── 魔法主题光标 ── */ --cursor-default: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxMCIgZmlsbD0iI2ZmZTA4MiIgb3BhY2l0eT0iMC4zIi8+PHBvbHlnb24gcG9pbnRzPSIxNCwxIDE2LDExLjUgMjcsMTQgMTYsMTYuNSAxNCwyNyAxMiwxNi41IDEsMTQgMTIsMTEuNSIgZmlsbD0iI2ZmZDcwMCIvPjxwb2x5Z29uIHBvaW50cz0iMTQsNSAxNS41LDExLjUgMjIuNSwxNCAxNS41LDE2LjUgMTQsMjMgMTIuNSwxNi41IDUuNSwxNCAxMi41LDExLjUiIGZpbGw9IiNmZmY5YzQiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIyIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+) 14 14, auto; --cursor-pointer: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjIyIiByPSI2IiBmaWxsPSIjZmZlMDgyIiBvcGFjaXR5PSIwLjI1Ii8+PGxpbmUgeDE9IjQiIHkxPSIyOCIgeDI9IjE4IiB5Mj0iMTQiIHN0cm9rZT0iI2ZmZDcwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwb2x5Z29uIHBvaW50cz0iMTgsMTQgMTYsNyAyMyw1IDI3LDEyIDIwLDE2IiBmaWxsPSIjZmZlMDgyIiBvcGFjaXR5PSIwLjk1Ii8+PHBvbHlnb24gcG9pbnRzPSIxOS41LDE0IDE3LjUsOC41IDIyLDcgMjUuNSwxMiAyMSwxNSIgZmlsbD0iI2ZmZjljNCIvPjxjaXJjbGUgY3g9IjEwIiBjeT0iMjIiIHI9IjIiIGZpbGw9IiNmZmYxNzYiIG9wYWNpdHk9IjAuOSIvPjxjaXJjbGUgY3g9IjciIGN5PSIyNiIgcj0iMS4yIiBmaWxsPSIjZmZkNzAwIiBvcGFjaXR5PSIwLjciLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE4IiByPSIxLjIiIGZpbGw9IiNmZmQ3MDAiIG9wYWNpdHk9IjAuNiIvPjxjaXJjbGUgY3g9IjEwIiBjeT0iMjAiIHI9IjAuOCIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==) 18 14, pointer; --cursor-text: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAyMCBRNiAxNiA4IDEwIEwxMiA0IEwxNCA3IEwxMCAxMyBMOCAyMCBaIiBmaWxsPSIjZmZkNzAwIiBvcGFjaXR5PSIwLjkiLz48cGF0aCBkPSJNMTIgNCBMMTggMiBMMTYgOCBaIiBmaWxsPSIjZmZlMDgyIiBvcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEzIDYgTDE2IDUgTDE1IDggWiIgZmlsbD0iI2ZmZjljNCIgb3BhY2l0eT0iMC43Ii8+PC9zdmc+) 12 4, text; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Touch optimization */ button, select, a, .history-card, .nav-logo, .nav-tab { touch-action: manipulation; } html { font-size: 16px; scroll-behavior: smooth; font-optical-sizing: auto; } [data-fontsize="small"] { font-size: 15px; } [data-fontsize="medium"] { font-size: 17px; } [data-fontsize="large"] { font-size: 19px; } body { font-family: var(--font-serif); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.3s ease, color 0.3s ease; min-height: 100vh; cursor: var(--cursor-default); } /* 暗色页（首页/Library）切换时 body 同步深色，防止过渡动画露出米色底 */ body.dark-bg { background: var(--star-bg); } /* ── 魔法光标：全局覆盖 ── */ a, button, [role="button"], [onclick], .nav-tab, .nav-logo, .magic-book-wrapper, .history-card, .legend-card, .word-chip, .generate-btn, .reader-start-btn, .continue-btn, .library-book, .toggle, .style-card, .difficulty-option, .scroll-top, .scroll-bottom, .export-modal-btn, .bookfx-page, .theme-hint-btn, .vocab-drawer-open, .story-fab, .character-badge, .phrase-chip { cursor: var(--cursor-pointer); } input[type="text"], input[type="search"], textarea, [contenteditable] { cursor: var(--cursor-text); } /* ── 粒子光标激活时隐藏原生光标 ── */ body.particle-cursor-active, body.particle-cursor-active * { cursor: none !important; } ::selection { background: var(--signature); color: var(--bg); } /* ============ NAVIGATION ============ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(242, 237, 224, 0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease; } [data-theme="dark"] .nav { background: rgba(26, 23, 20, 0.82); } /* 魔法书/星空模式下：导航栏暗色星空 */ .nav.star-mode { background: color-mix(in srgb, var(--star-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--star-tint-12); } .nav.star-mode .nav-logo { color: var(--star-text); } .nav.star-mode .nav-tab { color: var(--star-text-muted); } .nav.star-mode .nav-tab.active { color: var(--star-text); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; cursor: var(--cursor-pointer); user-select: none; color: var(--signature); } .nav-tabs { display: flex; gap: 32px; align-items: center; } .nav-tab { font-size: 14px; color: var(--text-secondary); cursor: var(--cursor-pointer); background: none; border: none; font-family: var(--font-sans); padding: 4px 0; transition: color 0.25s ease, text-shadow 0.25s ease; position: relative; } .nav-tab:hover { color: var(--text); text-shadow: 0 0 12px rgba(210,170,100,0.2); } .nav-tab.active { color: var(--signature); font-weight: 500; } .nav-tab.active::after { content: ''; position: absolute; bottom: -20px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--signature), var(--star-gold-dim), transparent); border-radius: 1px; box-shadow: 0 0 6px rgba(210,170,100,0.35); } /* star-mode nav tab glow */ .nav.star-mode .nav-tab:hover { text-shadow: 0 0 10px var(--star-gold-dim); color: var(--star-text); } .nav.star-mode .nav-tab.active::after { background: linear-gradient(90deg, transparent, var(--star-gold-dim), var(--star-gold), var(--star-gold-dim), transparent); box-shadow: 0 0 8px var(--star-tint-25), 0 0 16px var(--star-tint-08); } /* ============ PAGE SYSTEM ============ */ .page { display: none; min-height: calc(100vh - 56px); animation: pageIn 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .page.active { display: block; } .page.leaving { display: block; animation: pageExit 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; } @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pageExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .read-btn.playing { animation: audioPulseGold 1.2s ease-in-out infinite; } @keyframes audioPulseGold { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(210,170,100,0.25); } 50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(210,170,100,0); } } /* ============ HOME PAGE ============ */ .home-container { max-width: 720px; margin: 0 auto; padding: 96px 32px 64px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; } /* 首页：当书场景或输入表单可见时，隐藏亮色纹理 */ #page-home::before, #page-home::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; } #page-home::before { background: /* 老化纸张横纹 */ repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(100,80,50,0.03) 31px, rgba(100,80,50,0.03) 32px), /* 微弱纵纹 */ repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(80,60,30,0.02) 48px, rgba(80,60,30,0.02) 49px), /* SVG 噪点颗粒 */ var(--noise-256); background-size: auto, auto, 180px 180px; } #page-home::after { background: radial-gradient(ellipse at 50% 30%, rgba(255,248,230,0.50) 0%, transparent 60%); } /* 当书场景或暗色输入表单存在时，隐藏亮色纹理 */ #page-home.book-opened::before, #page-home.book-opened::after { display: none; } .home-title { font-family: var(--font-serif); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; color: var(--text); font-optical-sizing: auto; font-variation-settings: "opsz" 120; animation: titleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes titleIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .home-subtitle { font-family: var(--font-serif); font-size: 19px; color: var(--signature-soft); font-weight: 400; font-style: italic; margin-bottom: 56px; position: relative; padding: 0 28px; animation: subtitleIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } @keyframes subtitleIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* tagline 两侧装饰小竖线 */ .home-subtitle::before, .home-subtitle::after { content: ''; position: absolute; top: 50%; width: 14px; height: 1px; background: var(--signature-soft); opacity: 0.5; } .home-subtitle::before { left: 0; } .home-subtitle::after { right: 0; } /* ---- 角色来信已迁移至书籍发光机制（见 .book-has-message） ---- */ /* ---- 词聚类提示条（≥6词输入时显示核心/伴生分组） ---- 位置：固定在屏幕最下侧，位于 theme-hint 上方 ---------------------------------------------------- */ .cluster-hint-bar { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 199; max-width: 720px; width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: linear-gradient(135deg, rgba(22,18,38,0.92), rgba(28,22,44,0.92)); border: 1px solid rgba(196, 154, 108, 0.22); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(196, 154, 108, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-serif); font-size: 12px; opacity: 0; transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; } .cluster-hint-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .cl-core-badge { color: rgba(210,170,100,0.85); font-weight: 600; white-space: nowrap; } .cl-core-words { color: rgba(210,170,100,0.55); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-divider { color: rgba(210,170,100,0.25); } .cl-supp-badge { color: rgba(210,170,100,0.5); white-space: nowrap; } .cl-supp-words { color: var(--star-tint-35); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- 浮动词汇（首页装饰 + 可点击填入） ---- */ .home-words-cloud { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .home-word-float { position: absolute; font-family: var(--font-serif); font-weight: 400; font-style: italic; opacity: 0; color: var(--signature-soft); pointer-events: auto; cursor: var(--cursor-pointer); transition: opacity 0.4s ease, transform 0.3s ease; user-select: none; animation: wordDrift linear infinite; } .home-word-float.visible { opacity: 0.28; } .home-word-float:hover { opacity: 0.65 !important; transform: scale(1.15) !important; } [data-theme="dark"] .home-word-float.visible { opacity: 0.18; } [data-theme="dark"] .home-word-float:hover { opacity: 0.45 !important; } @keyframes wordDrift { 0% { transform: translate(0, 0) rotate(var(--wrot, 0deg)); } 25% { transform: translate(var(--wdx1, 6px), var(--wdy1, -8px)) rotate(calc(var(--wrot, 0deg) + 2deg)); } 50% { transform: translate(var(--wdx2, -4px), var(--wdy2, -16px)) rotate(var(--wrot, 0deg)); } 75% { transform: translate(var(--wdx3, 8px), var(--wdy3, -6px)) rotate(calc(var(--wrot, 0deg) - 1.5deg)); } 100% { transform: translate(0, 0) rotate(var(--wrot, 0deg)); } } /* 笔尖装饰 SVG（放在输入框上方） */ .pen-nib { position: absolute; right: -8px; top: -24px; width: 32px; height: 42px; opacity: 0.12; pointer-events: none; z-index: 0; transition: opacity 0.3s ease; } .input-wrapper:focus-within ~ .pen-nib, .input-wrapper:focus-within + .pen-nib { opacity: 0.28; } [data-theme="dark"] .pen-nib { opacity: 0.08; filter: invert(0.85); } [data-theme="dark"] .input-wrapper:focus-within ~ .pen-nib { opacity: 0.18; } /* ============ 首页宇宙轮播条 ============ */ .universe-rail { width: 100%; max-width: 660px; margin: 0 auto 48px; text-align: left; overflow: hidden; /* 约束子元素宽度，让轨道可溢出滚动 */ } .universe-rail-head { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 0 2px; } .universe-tab { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; cursor: var(--cursor-pointer); transition: color 0.25s, background 0.25s; user-select: none; white-space: nowrap; } .universe-tab:hover { color: var(--text-secondary); } .universe-tab.active { color: var(--signature); background: color-mix(in srgb, var(--signature) 8%, transparent); font-weight: 600; } /* 双轨道容器 */ .universe-rail-body { position: relative; min-height: 148px; } .universe-rail-track { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; padding: 8px 4px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; transition: opacity 0.25s ease; } .universe-rail-track::-webkit-scrollbar { display: none; } .universe-rail-track.hidden-track { opacity: 0; pointer-events: none; position: absolute; top: 0; left: 0; right: 0; } /* — 立体小书（真实笔记本质感）— */ .universe-card { flex: 0 0 108px; width: 108px; height: 148px; background: var(--uc-bg, #E8E0D0); border-radius: 6px 10px 10px 6px; box-shadow: /* 主投影：书本放在桌面上的厚度感 */ 4px 6px 16px rgba(40,30,15,0.18), 1px 2px 5px rgba(40,30,15,0.10), /* 右侧书页边缘的厚度暗影 */ inset -3px 0 8px rgba(0,0,0,0.06), /* 左上角微亮 */ inset 1px 1px 0 rgba(255,255,255,0.45); position: relative; cursor: var(--cursor-pointer); scroll-snap-align: start; transition: transform 0.45s var(--ease-bounce), box-shadow 0.45s var(--ease-bounce); transform: rotate(var(--uc-rot, 0deg)) translateY(var(--uc-ty, 0px)); transform-style: preserve-3d; perspective: 500px; display: flex; flex-direction: column; overflow: hidden; } .universe-card:hover { transform: rotate(0deg) translateY(-10px) scale(1.04) !important; box-shadow: 10px 16px 36px rgba(40,30,15,0.26), 3px 5px 12px rgba(40,30,15,0.14), inset -3px 0 8px rgba(0,0,0,0.06), inset 1px 1px 0 rgba(255,255,255,0.45); z-index: 5; } /* 书脊：仿皮革/布料装订 + 缝线效果 */ .universe-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, var(--uc-spine, #C4B49A) 0%, var(--uc-spine, #C4B49A) 70%, rgba(160,140,110,0.5) 100% ); border-radius: 6px 0 0 6px; box-shadow: inset 2px 0 4px rgba(255,255,255,0.12), inset -2px 0 6px rgba(0,0,0,0.20); z-index: 2; } /* 书脊缝线装饰 */ .universe-card::after { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1px; background: repeating-linear-gradient( 180deg, rgba(80,60,35,0.25) 0px, rgba(80,60,35,0.25) 4px, transparent 4px, transparent 7px ); z-index: 2; pointer-events: none; } /* 封面 — 留出书脊区域 */ .universe-card .uc-cover-face { position: absolute; left: 10px; top: 0; right: 0; bottom: 0; border-radius: 0 10px 10px 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 14px 14px; overflow: hidden; } /* 封面纸张纹理：自然噪点 + 极淡横纹（模拟纸浆纤维） */ .universe-card .uc-cover-face::before { content: ''; position: absolute; inset: 0; background: /* 横向纤维纹理 */ repeating-linear-gradient( 180deg, transparent 0px, transparent 2.5px, rgba(60,50,35,0.018) 2.5px, rgba(60,50,35,0.018) 3px ), /* 纵向纤维纹理 */ repeating-linear-gradient( 90deg, transparent 0px, transparent 3px, rgba(60,50,35,0.010) 3px, rgba(60,50,35,0.010) 3.5px ), /* 微粒噪点模拟纸张颗粒 */ url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; } /* 内框压痕（笔记本封面常见的内凹边） */ .universe-card .uc-cover-face::after { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 0.5px solid rgba(120,100,70,0.15); border-radius: 4px 8px 8px 4px; pointer-events: none; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.08); } /* 章号角标 */ .universe-card .uc-ch { position: relative; z-index: 1; font-family: var(--font-sans); font-size: 7px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(50,42,32,0.32); margin-bottom: auto; align-self: flex-start; padding-left: 1px; } /* 标题 */ .universe-card .uc-title { position: relative; z-index: 1; font-family: var(--font-serif); font-size: 11.5px; font-weight: 600; color: rgba(38,32,24,0.75); line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: left; letter-spacing: -0.005em; text-shadow: 0 0.5px 0 rgba(255,255,255,0.3); } /* FIN 印章 */ .universe-card .uc-fin { position: absolute; bottom: 8px; right: 8px; z-index: 3; font-family: var(--font-sans); font-size: 6.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wax-seal); border: 0.8px solid var(--wax-seal); border-radius: 3px; padding: 1.5px 4px; opacity: 0.7; } /* — 新宇宙卡片 — */ .universe-card-new { background: transparent !important; border: 1.5px dashed var(--border); box-shadow: none; display: flex; align-items: center; justify-content: center; } .universe-card-new::before { display: none; } .universe-card-new::after { content: '+'; font-family: var(--font-serif); font-size: 1.6rem; color: var(--text-dim); } .universe-card-new:hover { border-color: var(--signature); box-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* — 完结宇宙：书脊变暖金 — */ .universe-card.ended { opacity: 0.82; } .universe-card.ended:hover { opacity: 1; } .universe-card.ended::before { background: linear-gradient(90deg, var(--wax-seal) 0%, #8B6914 70%, #5A3E0A 100%); } /* — 各本小书封面底色微差（轮替） — */ .universe-card.uc-c0 { --uc-bg: #E8E0D0; --uc-spine: #C4B49A; } /* 暖米白 */ .universe-card.uc-c1 { --uc-bg: #DED5C3; --uc-spine: #B8A88E; } /* 象牙纸 */ .universe-card.uc-c2 { --uc-bg: #E3D9CC; --uc-spine: #BCAA92; } /* 羊皮纸 */ .universe-card.uc-c3 { --uc-bg: #D8CEBB; --uc-spine: #B2A086; } /* 旧书页 */ .universe-card.uc-c4 { --uc-bg: #EAE2D4; --uc-spine: #CABBA4; } /* 宣纸白 */ /* ============================================================ INPUT AREA — editorial underline with ornament ============================================================ */ .input-wrapper { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0; width: 100%; padding: 18px 0 14px; border-bottom: 1.5px solid var(--border); margin-bottom: 10px; transition: border-color 0.3s ease; /* 纸质感底色 */ background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(100,80,50,0.015) 20px, rgba(100,80,50,0.015) 21px); border-radius: 4px; animation: inputIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; } @keyframes inputIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .input-wrapper:focus-within { border-bottom-color: var(--text); } /* 左侧装饰线 — editorial dash */ .input-ornament { flex-shrink: 0; font-family: var(--font-serif); font-size: 22px; color: var(--text-tertiary); margin-right: 14px; margin-top: -2px; user-select: none; transition: color 0.3s ease; } .input-wrapper:focus-within .input-ornament { color: var(--signature); } .word-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; font-size: 20px; font-family: var(--font-serif); font-weight: 400; color: var(--text); outline: none; line-height: 1.4; caret-color: var(--signature); } .word-input::placeholder { color: var(--text-tertiary); font-style: italic; font-size: 0.9em; } /* ============ OCR UPLOAD（已移除，保留位置标记）============ */ /* ---- 风格标签选择器 ---- */ .style-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 48px; animation: inputIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; } .style-label { color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 500; font-family: var(--font-sans); padding-top: 5px; white-space: nowrap; } .style-tags { display: flex; flex-wrap: wrap; gap: 6px; } .style-tag { display: inline-block; padding: 5px 14px 4px; border: 1px solid var(--border); border-radius: 3px; background: transparent; color: var(--text-secondary); font-family: var(--font-serif); font-size: 12.5px; font-weight: 400; cursor: var(--cursor-pointer); transition: all 0.25s ease; letter-spacing: 0.02em; user-select: none; } .style-tag:hover { border-color: var(--signature); color: var(--signature); background: rgba(31,77,58,0.04); } .style-tag.active { border-color: var(--accent); color: var(--accent); background: rgba(31,77,58,0.07); font-weight: 600; box-shadow: 0 1px 3px rgba(31,77,58,0.10); } /* ── 难度选择 ── */ .difficulty-row { margin-bottom: 16px; } .difficulty-tags { display: flex; gap: 8px; } .difficulty-tag { display: inline-block; padding: 5px 16px 4px; border: 1px solid var(--border); border-radius: 3px; background: transparent; color: var(--text-secondary); font-family: var(--font-serif); font-size: 12.5px; font-weight: 400; cursor: var(--cursor-pointer); transition: all 0.25s ease; letter-spacing: 0.02em; user-select: none; } .difficulty-tag:hover { border-color: var(--signature); color: var(--signature); background: rgba(31,77,58,0.04); } .difficulty-tag.active { border-color: var(--accent); color: var(--accent); background: rgba(31,77,58,0.07); font-weight: 600; box-shadow: 0 1px 3px rgba(31,77,58,0.10); } /* ============ CUSTOM CONTEXT ============ */ /* ---- 自定义设定 — 笔记本折叠卡片 ---- */ .custom-section { width: 100%; animation: inputIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; } .custom-header { display: flex; align-items: center; gap: 8px; cursor: var(--cursor-pointer); padding: 10px 0 8px; transition: color 0.2s ease; user-select: none; } .custom-header:hover { color: var(--signature); } .custom-header-icon { opacity: 0.45; transition: opacity 0.2s ease, transform 0.3s var(--ease-spring); } .custom-header:hover .custom-header-icon { opacity: 0.7; transform: rotate(-8deg); } .custom-header-title { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; } .custom-header-hint { font-family: var(--font-serif); font-size: 12px; font-style: italic; color: var(--text-tertiary); opacity: 0.7; } .custom-header-chevron { margin-left: auto; color: var(--text-tertiary); transition: transform 0.35s var(--ease-spring); } .custom-section.open .custom-header-chevron { transform: rotate(180deg); } /* 折叠面板 */ .custom-area-wrap { width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-spring), margin-bottom 0.4s ease, opacity 0.3s ease; margin-bottom: 0; opacity: 0; } .custom-area-wrap.open { max-height: 220px; margin-bottom: 32px; opacity: 1; } /* 笔记本纸张容器 */ .custom-paper { position: relative; border: 1px solid rgba(180,165,145,0.22); border-radius: 4px; overflow: hidden; background: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(100,80,50,0.04) 27px, rgba(100,80,50,0.04) 28px); } /* 纸张横线装饰 */ .custom-paper-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0,0,0,0.018) 27px, rgba(0,0,0,0.018) 28px); } .custom-area { width: 100%; border: none; background: transparent; padding: 14px 16px 14px 54px; font-family: var(--font-serif); font-size: 15px; color: var(--text); outline: none; resize: none; height: 140px; line-height: 28px; transition: none; position: relative; z-index: 1; } .custom-area:focus { outline: none; } .custom-area::placeholder { color: var(--text-tertiary); font-style: italic; opacity: 0.6; } /* 纸张左边红色装订线 */ .custom-paper::before { content: ''; position: absolute; left: 42px; top: 0; bottom: 0; width: 1px; background: rgba(180,50,50,0.18); pointer-events: none; z-index: 2; } /* 左边装订孔 */ .custom-paper::after { content: ''; position: absolute; left: 14px; top: 28px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(180,50,50,0.15); background: var(--bg); box-shadow: 0 56px 0 0 rgba(180,50,50,0.08), 0 112px 0 0 rgba(180,50,50,0.08); pointer-events: none; z-index: 2; } /* ============================================================ GENERATE BUTTON — pill with arrow ============================================================ */ /* ---- 蜡封印章按钮 ---- */ .generate-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 28px 11px 20px; border: 2px solid var(--accent); border-radius: 50px; background: transparent; color: var(--accent); font-family: var(--font-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; cursor: var(--cursor-pointer); position: relative; transition: all 0.4s var(--ease-spring); box-shadow: none; white-space: nowrap; margin-left: 16px; overflow: hidden; } /* 印章底色填充 — hover 时从左向右铺开 */ .generate-btn::before { content: ''; position: absolute; inset: 0; background: var(--accent); border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease-spring); z-index: 0; } .generate-btn:hover::before { transform: scaleX(1); } .generate-btn:hover { color: var(--accent-text); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(31,77,58,0.25), 0 0 40px rgba(31,77,58,0.08); } .generate-btn:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.1s; } /* 按钮内容浮在填充层之上 */ .generate-btn .btn-text, .generate-btn .btn-arrow, .generate-btn .btn-icon-ink { position: relative; z-index: 1; } /* 笔尖 SVG */ .generate-btn .btn-icon-ink { display: inline-flex; align-items: center; transition: transform 0.3s var(--ease-spring), opacity 0.3s ease; } .generate-btn:hover .btn-icon-ink { transform: rotate(-12deg) translateY(-2px); } /* 箭头 */ .generate-btn .btn-text { display: inline; } .generate-btn .btn-arrow { display: inline; font-size: 1.1em; transition: transform 0.25s ease, opacity 0.25s ease; } .generate-btn:hover .btn-arrow { transform: translateX(4px); } /* 墨滴溅射装饰 — hover 时右上角浮现 */ .generate-btn::after { content: ''; position: absolute; top: -4px; right: -2px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; opacity: 0; transform: scale(0); transition: opacity 0.35s ease, transform 0.35s var(--ease-spring); z-index: 1; } .generate-btn:hover::after { opacity: 0.5; transform: scale(1.2); } /* Loading 状态 */ .generate-btn.loading { border-color: var(--text-secondary); color: var(--text-secondary); transform: none; box-shadow: none; cursor: wait; pointer-events: none; overflow: hidden; } .generate-btn.loading::before { transform: scaleX(0); } .generate-btn.loading .btn-text { opacity: 0.5; } .generate-btn.loading .btn-arrow { display: none; } .generate-btn.loading .btn-icon-ink { opacity: 0.3; transform: none; } .generate-btn.loading::after { opacity: 0; transform: scale(0); } .generate-btn.loading .spinner { display: none; } /* 按钮内魔法墨水填充 */ .generate-btn .btn-progress { position: absolute; bottom: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--star-tint-12), rgba(230,200,140,0.2), var(--star-tint-12) ); pointer-events: none; z-index: 0; } .generate-btn.loading .btn-progress { animation: gen-fill 40s ease-out forwards; } @keyframes gen-fill { 0% { width: 0%; } 15% { width: 20%; } 35% { width: 38%; } 55% { width: 55%; } 75% { width: 70%; } 90% { width: 82%; } 100% { width: 88%; } } .generate-btn .btn-sigil, .generate-btn .btn-text, .generate-btn .btn-arrow, .generate-btn .spinner { position: relative; z-index: 1; } .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: var(--surface-raised); border-radius: 50%; animation: spin 0.8s linear infinite; display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .generate-btn.loading .spinner { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== 魔法施法进度条（紧贴输入框下方） ===== */ .casting-bar { margin-top: 14px; display: flex; align-items: center; gap: 12px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease, max-height 0.4s ease; } .casting-bar.show { opacity: 1; max-height: 40px; } .casting-track { flex: 1; height: 4px; background: rgba(210,170,100,0.1); border-radius: 2px; position: relative; overflow: hidden; } .casting-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, rgba(210,170,100,0.3), rgba(210,170,100,0.6), rgba(230,200,140,0.8) ); border-radius: 2px; transition: width 0.6s ease; } .casting-bar.show .casting-fill { animation: cast-fill 40s ease-out forwards; } @keyframes cast-fill { 0% { width: 0%; } 15% { width: 20%; } 35% { width: 38%; } 55% { width: 55%; } 75% { width: 70%; } 90% { width: 82%; } 100% { width: 88%; } } /* 进度条前端的光晕 */ .casting-glow { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(230,200,140,0.4) 0%, transparent 70%); border-radius: 50%; opacity: 0; pointer-events: none; } .casting-bar.show .casting-glow { opacity: 1; animation: cast-glow-move 40s ease-out forwards; } @keyframes cast-glow-move { 0% { left: 0%; } 15% { left: 20%; } 35% { left: 38%; } 55% { left: 55%; } 75% { left: 70%; } 90% { left: 82%; } 100% { left: 88%; } } .casting-text { font-size: 12px; color: rgba(210,170,100,0.55); font-family: var(--font-sans); letter-spacing: 0.04em; white-space: nowrap; transition: color 0.3s ease; } .casting-bar.error .casting-text { color: rgba(200,100,100,0.7); } .casting-bar.error .casting-fill { background: rgba(200,100,100,0.4); animation: none; width: 100% !important; } .casting-bar.error .casting-glow { display: none; } /* ============ AI THEME HINT（主题发现提示条） ============ 位置：固定在屏幕最下侧，避免与中央魔法书重叠 ============================================================ */ .theme-hint { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 200; max-width: 720px; width: calc(100% - 32px); opacity: 0; transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; } .theme-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .theme-hint-inner { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: linear-gradient(135deg, rgba(26,20,42,0.92), rgba(34,26,52,0.92)); border: 1px solid rgba(196, 154, 108, 0.28); border-radius: 999px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(196, 154, 108, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; color: rgba(230,200,130,0.85); } .theme-hint-icon { color: rgba(210,170,100,0.75); font-size: 14px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(210,170,100,0.4)); animation: themeStarPulse 2s ease-in-out infinite; } @keyframes themeStarPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .theme-hint-text { display: flex; align-items: center; gap: 8px; flex-shrink: 1; } .theme-hint-theme { font-weight: 600; color: rgba(240,210,145,0.95); font-size: 14px; letter-spacing: 0.02em; } .theme-hint-arrow { color: var(--star-tint-35); font-size: 11px; } .theme-hint-world { font-style: italic; color: rgba(200,175,115,0.85); } .theme-hint-hook { font-size: 12px; color: rgba(210,170,100,0.6); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .theme-hint-use { background: rgba(196, 154, 108, 0.12); border: 1px solid rgba(196, 154, 108, 0.35); color: rgba(240,210,145,0.95); padding: 6px 14px; border-radius: 999px; font-size: 12px; cursor: var(--cursor-pointer); transition: all 0.25s ease; flex-shrink: 0; white-space: nowrap; letter-spacing: 0.02em; } .theme-hint-use:hover { background: rgba(196, 154, 108, 0.25); border-color: rgba(196, 154, 108, 0.55); box-shadow: 0 0 14px rgba(196, 154, 108, 0.18); } .theme-hint-close { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0 0 0 4px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: rgba(196, 154, 108, 0.65); font-size: 16px; line-height: 1; cursor: var(--cursor-pointer); transition: all 0.2s ease; flex-shrink: 0; } .theme-hint-close:hover { background: rgba(196, 154, 108, 0.18); color: rgba(240, 210, 145, 0.95); transform: rotate(90deg); } /* ============ TOAST ============ */ .toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(16px); background: linear-gradient(135deg, rgba(26,21,37,0.94), rgba(30,25,44,0.94)); color: var(--star-text); padding: 10px 28px 10px 18px; border-radius: 4px 12px 4px 12px; border: 1px solid var(--star-tint-35); font-size: 13px; font-weight: 400; font-family: var(--font-serif); letter-spacing: 0.02em; opacity: 0; pointer-events: none; z-index: 200; white-space: nowrap; box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 18px var(--star-tint-12); transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .toast::before { content: '✦'; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 8px; color: var(--star-tint-45); opacity: 0.7; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); animation: scrollUnfurl 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes scrollUnfurl { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } /* ============ 导出PDF模态框 ============ */ .export-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 201; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .export-modal.visible { opacity: 1; pointer-events: auto; } .export-modal-card { background: linear-gradient(135deg, rgba(26,21,37,0.96), rgba(30,25,44,0.96)); border-radius: 12px 4px 12px 4px; padding: 32px 28px 24px; max-width: 360px; width: 88vw; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 32px var(--star-tint-08), inset 0 1px 0 var(--star-tint-12); border: 1px solid var(--star-tint-25); } .export-modal-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--star-text); filter: drop-shadow(0 0 8px var(--star-tint-25)); } .export-spinner { width: 48px; height: 48px; animation: export-spin 1.5s linear infinite; } @keyframes export-spin { to { transform: rotate(360deg); } } .export-modal-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--star-text); margin-bottom: 8px; } .export-modal-detail { font-family: var(--font-sans); font-size: 13px; color: var(--star-text-muted); line-height: 1.6; margin-bottom: 20px; } .export-modal-btn { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--star-gold); background: transparent; border: 1px solid var(--star-tint-35); border-radius: 100px; padding: 8px 32px; cursor: var(--cursor-pointer); transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .export-modal-btn:hover { background: var(--star-tint-15); color: var(--star-text); box-shadow: 0 0 16px var(--star-tint-12); } /* ============ SITE FOOTER ============ */ .site-footer { width: 100%; margin-top: 48px; text-align: center; font-size: 11px; color: var(--text-tertiary); font-family: var(--font-sans); position: relative; } /* 底部小墨迹装饰 */ .site-footer::before { content: ''; display: block; width: 48px; height: 8px; margin: 0 auto 12px; border-radius: 50%; background: var(--signature-soft); opacity: 0.12; filter: blur(2px); } /* ============ SCROLL TO TOP ============ */ .scroll-top { position: fixed; bottom: 134px; right: 32px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(26,21,37,0.85), rgba(30,25,44,0.85)); border: 1px solid var(--star-tint-15); color: var(--star-tint-50); cursor: var(--cursor-pointer); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; pointer-events: none; z-index: 50; font-size: 16px; font-family: inherit; box-shadow: 0 2px 12px rgba(0,0,0,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-top:hover { border-color: var(--star-gold); color: var(--star-gold); box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 20px var(--star-tint-12); } .scroll-bottom { position: fixed; bottom: 90px; right: 32px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(26,21,37,0.85), rgba(30,25,44,0.85)); border: 1px solid var(--star-tint-15); color: var(--star-tint-50); cursor: var(--cursor-pointer); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; pointer-events: none; z-index: 50; font-size: 16px; font-family: inherit; box-shadow: 0 2px 12px rgba(0,0,0,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .scroll-bottom.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-bottom:hover { border-color: var(--star-gold); color: var(--star-gold); box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 20px var(--star-tint-12); } /* ============================================================ SHARED COMPONENT SYSTEM Enhanced buttons · badges · skeleton · toggle · chips · progress ============================================================ */ /* — Button variant: outline — */ .btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); font-family: var(--font-sans); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em; padding: 8px 18px; border-radius: var(--radius-sm); cursor: var(--cursor-pointer); transition: border-color 0.25s, color 0.25s, background 0.25s; } .btn-outline:hover { border-color: var(--signature); color: var(--signature); background: color-mix(in srgb, var(--signature) 6%, transparent); } .btn-outline:active { transform: scale(0.97); } /* — Button variant: ghost — */ .btn-ghost { background: transparent; color: var(--text-secondary); border: none; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.06em; padding: 6px 14px; border-radius: var(--radius-sm); cursor: var(--cursor-pointer); transition: color 0.25s, background 0.25s; } .btn-ghost:hover { color: var(--signature); background: color-mix(in srgb, var(--signature) 6%, transparent); } /* — Button size modifiers — */ .btn-sm { padding: 5px 12px; font-size: 0.55rem; letter-spacing: 0.04em; } .btn-lg { padding: 12px 28px; font-size: 0.75rem; } /* — Icon button — */ .btn-icon { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); cursor: var(--cursor-pointer); transition: border-color 0.25s, color 0.25s; } .btn-icon:hover { border-color: var(--signature); color: var(--signature); } /* ============================================================ BADGE SYSTEM — CEFR difficulty + tags ============================================================ */ .badge-diff { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.52rem; font-weight: 500; letter-spacing: 0.06em; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; } .badge-diff.a1, .badge-diff.a2 { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 18%, transparent); } .badge-diff.b1 { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 18%, transparent); } .badge-diff.b2, .badge-diff.c1 { background: color-mix(in srgb, var(--signature) 10%, transparent); color: var(--signature); border: 1px solid color-mix(in srgb, var(--signature) 18%, transparent); } /* Tag chips */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-family: var(--font-sans); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--radius-sm); white-space: nowrap; } .tag-mono { font-family: var(--font-mono); text-transform: none; font-size: 0.48rem; } .tag-outline { border: 1px solid var(--border); background: transparent; color: var(--text-tertiary); } .tag-accent { background: color-mix(in srgb, var(--signature) 10%, transparent); color: var(--signature); } .tag-pill { border-radius: var(--radius-full); } /* ============================================================ SKELETON LOADING ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 60%, var(--surface)) 50%, var(--border) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.6s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 14px; margin-bottom: 10px; } .skeleton-text:last-child { width: 60%; } .skeleton-title { height: 22px; width: 65%; margin-bottom: 14px; } .skeleton-block { height: 80px; margin-bottom: 12px; border-radius: var(--radius-md); } /* ============================================================ TOGGLE SWITCH ============================================================ */ .toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: var(--cursor-pointer); } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { width: 40px; height: 22px; background: var(--border); border-radius: 11px; transition: background 0.25s; position: relative; } .toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--surface-raised); border-radius: 50%; transition: transform 0.25s var(--ease-spring); box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .toggle input:checked + .toggle-track { background: var(--signature); } .toggle input:checked + .toggle-track::after { transform: translateX(18px); } .toggle-label { font-family: var(--font-sans); font-size: 0.58rem; color: var(--text-secondary); } /* ============================================================ CHIP GROUP — style / topic selector ============================================================ */ .chip-group { display: flex; gap: 6px; flex-wrap: wrap; } .chip { padding: 6px 14px; font-family: var(--font-sans); font-size: 0.58rem; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-full); cursor: var(--cursor-pointer); transition: all 0.25s; letter-spacing: 0.04em; } .chip:hover { border-color: var(--signature); color: var(--signature); } .chip.active { background: var(--signature); color: var(--accent-text); border-color: var(--signature); } /* ============================================================ PROGRESS BAR ============================================================ */ .progress-bar-wrap { width: 100%; max-width: 360px; } .progress-bar { width: 100%; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--signature); border-radius: 2px; transition: width 0.4s var(--ease-spring); } .progress-bar-label { display: flex; justify-content: space-between; margin-bottom: 4px; font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-tertiary); } /* ============================================================ VOCAB CARD — vocabulary drawer item ============================================================ */ .vocab-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.25s; margin-bottom: 8px; } .vocab-item:hover { border-color: var(--signature); } .vocab-item-word { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--signature); min-width: 100px; word-break: break-word; } .vocab-item-phonetic { font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-tertiary); font-style: italic; } .vocab-item-def { flex: 1; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; } /* ============================================================ TOOLTIP — word hover tip ============================================================ */ .word-tip-native { position: relative; font-family: var(--font-mono); font-size: 0.7rem; color: var(--signature); border-bottom: 1px dotted var(--signature-soft); cursor: help; } .word-tip-native::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 8px 14px; background: var(--text); color: var(--surface); font-family: var(--font-sans); font-size: 0.6rem; white-space: nowrap; border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 100; } .word-tip-native:hover::after { opacity: 1; } /* ============================================================ KBD — keyboard shortcut hint ============================================================ */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; font-family: var(--font-mono); font-size: 0.48rem; color: var(--text-tertiary); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 1px 0 var(--border); } /* ============================================================ PAGINATION DOTS — story page navigation ============================================================ */ .nav-dots { display: flex; gap: 10px; justify-content: center; } .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); border: none; cursor: var(--cursor-pointer); transition: all 0.3s; } .nav-dot.active { background: var(--signature); transform: scale(1.5); } /* ============================================================ PULSE INDICATOR — generating / streaming ============================================================ */ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signature); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--signature) 30%, transparent); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px color-mix(in srgb, var(--signature) 0%, transparent); } } /* ============ STORY PAGE ============ */ #page-story::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* 老纸横纹 — 极淡，不干扰阅读 */ repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(100,80,50,0.016) 32px, rgba(100,80,50,0.016) 33px), /* SVG 噪点颗粒 */ var(--noise-256); background-size: auto, 200px 200px; } #page-story::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 18%, rgba(255,248,230,0.28) 0%, transparent 55%); } [data-theme="dark"] #page-story::before { background: repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(255,255,255,0.008) 32px, rgba(255,255,255,0.008) 33px), var(--noise-256); background-size: auto, 200px 200px; } [data-theme="dark"] #page-story::after { background: radial-gradient(ellipse at 50% 18%, rgba(212,168,92,0.04) 0%, transparent 55%); } .story-container { max-width: 800px; margin: 0 auto; padding: 36px 32px 120px; position: relative; z-index: 1; } .story-title { font-family: var(--font-serif); font-size: 40px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: var(--text); margin-bottom: 6px; font-variant-ligatures: common-ligatures; } .story-subtitle { font-family: var(--font-serif); font-size: 19px; font-weight: 500; font-style: italic; color: var(--signature); margin-bottom: 16px; letter-spacing: -0.01em; } .story-divider { text-align: center; margin-bottom: 28px; position: relative; height: 14px; } .story-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, var(--border) 12%, var(--border) 38%, transparent 46%, transparent 54%, var(--border) 62%, var(--border) 88%, transparent 100% ); } .story-divider::after { content: '❦'; font-size: 14px; color: var(--signature); opacity: 0.5; position: relative; background: var(--bg); padding: 0 14px; line-height: 14px; } .story-paragraph { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.8; color: var(--text); margin-bottom: 28px; padding-left: 16px; border-left: 2px solid transparent; cursor: var(--cursor-pointer); transition: border-color 0.2s ease; position: relative; letter-spacing: -0.008em; } .story-paragraph:hover { border-left-color: var(--signature); background: color-mix(in srgb, var(--signature) 2.5%, transparent); } .story-paragraph.expanded { border-left-color: var(--signature); } .story-paragraph .translation { display: block; margin-top: 12px; font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; } .story-paragraph.expanded .translation { max-height: 200px; opacity: 1; } /* ============ 章节分隔（章与章之间）============ */ .chapter-break { text-align: center; margin: 3em 0; padding: 2em 0 1.5em; position: relative; } .chapter-break::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); } .chapter-break::after { content: ''; position: absolute; bottom: 0; left: 35%; right: 35%; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); } .chapter-break-label { font-family: var(--font-serif); font-size: 15px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--signature); font-weight: 600; margin-top: 10px; opacity: 0.7; } /* ============ 章末续写区 ============ */ .chapter-end { text-align: center; margin-top: 3em; margin-bottom: 2em; padding-top: 2.5em; position: relative; } .chapter-end::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); } .chapter-ornament { font-family: var(--font-serif); font-size: 1.8em; color: var(--signature); opacity: 0.45; margin-bottom: 10px; } .chapter-end-label, .chapter-ended-label { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); font-weight: 500; margin-bottom: 8px; } .chapter-ended-label { color: var(--signature); font-weight: 600; } .chapter-meta { font-size: 13px; color: var(--text-tertiary); } .chapter-hook { font-family: var(--font-serif); font-style: italic; color: var(--signature-soft); font-size: 15px; max-width: 500px; margin: 12px auto 24px; line-height: 1.6; } .continue-area { display: flex; align-items: center; gap: 8px; max-width: 480px; margin: 0 auto 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; position: relative; } .continue-area:focus-within { border-bottom-color: var(--signature); } .continue-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 8px 0; font-size: 15px; font-family: var(--font-sans); color: var(--text); outline: none; } .continue-input::placeholder { color: var(--text-tertiary); } .continue-btn { flex-shrink: 0; background: var(--signature); color: var(--accent-text); border: none; padding: 8px 16px; border-radius: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: var(--cursor-pointer); white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease; } .continue-btn:hover { background: var(--signature-soft); transform: translateY(-1px); } .continue-btn:active { transform: scale(0.96); } .continue-btn:disabled { opacity: 0.7; cursor: wait; } .continue-btn.loading { background: var(--text-secondary); color: rgba(255,255,255,0.8); position: relative; overflow: hidden; } .continue-btn.loading .spinner { display: none; } /* 续写按钮内的进度条填充 */ .continue-btn .btn-progress-fill { position: absolute; bottom: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(210,170,100,0.25), rgba(230,200,140,0.4), rgba(210,170,100,0.25) ); border-radius: 6px; pointer-events: none; } .continue-btn.loading .btn-progress-fill { animation: continue-fill 90s ease-out forwards; } @keyframes continue-fill { 0% { width: 0%; } 10% { width: 12%; } 25% { width: 28%; } 45% { width: 45%; } 65% { width: 60%; } 80% { width: 72%; } 92% { width: 82%; } 100% { width: 88%; } } .end-universe-btn { background: none; border: none; color: var(--text-tertiary); font-family: var(--font-sans); font-size: 12px; cursor: var(--cursor-pointer); padding: 4px 12px; border-radius: 4px; transition: color 0.2s ease; } .end-universe-btn:hover { color: var(--text-secondary); } /* 续写后 —— 未覆盖生词提示 */ .uncovered-hint { max-width: 800px; margin: 24px auto 0; padding: 12px 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--highlight-bg); font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .uncovered-hint.show { opacity: 1; transform: translateY(0); } .uncovered-label { font-weight: 600; font-size: 11px; color: var(--text-secondary); text-transform: none; letter-spacing: 0.02em; margin-right: 4px; } .uncovered-word { font-family: var(--font-serif); font-style: italic; color: var(--text); background: var(--bg); padding: 1px 6px; border-radius: 3px; margin: 0 2px; white-space: nowrap; } .uncovered-note { color: var(--text-tertiary); font-size: 12px; } /* 对话段排版区分：以引号开头的段落挂角缩进 */ .story-paragraph.is-dialogue { padding-left: 40px; border-left: 2px solid var(--signature-soft); opacity: 1; } .story-paragraph.is-dialogue:hover { border-left-color: var(--signature); } .story-hint { font-size: 12px; color: var(--text-tertiary); margin-bottom: 18px; font-style: italic; } /* 章节导航条 — 顶部 § 标签行 */ .chapter-nav { margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .chapter-nav::-webkit-scrollbar { display: none; } .chapter-nav-track { display: flex; gap: 6px; min-width: min-content; } .chapter-nav-pill { display: inline-block; padding: 4px 12px; font-family: var(--font-serif); font-size: 13px; color: var(--text-tertiary); border: 1px solid var(--border); border-radius: 16px; cursor: var(--cursor-pointer); user-select: none; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .chapter-nav-pill:hover { color: var(--signature); border-color: var(--signature); background: color-mix(in srgb, var(--signature) 10%, transparent); } .chapter-nav-pill.active { color: var(--signature); border-color: var(--signature); background: color-mix(in srgb, var(--signature) 12%, transparent); font-weight: 600; } .chapter-nav-pill.last-chapter { color: var(--gold); border-color: rgba(210,170,100,0.4); background: var(--star-tint-06); font-weight: 500; } .chapter-nav-pill.last-chapter:hover { border-color: var(--gold); background: var(--star-tint-12); } .chapter-nav-ellipsis { display: inline-block; padding: 4px 10px; font-family: var(--font-serif); font-size: 13px; color: var(--text-tertiary); border: 1px dashed var(--border); border-radius: 16px; cursor: var(--cursor-pointer); user-select: none; letter-spacing: 1px; transition: color 0.15s ease, border-color 0.15s ease; } .chapter-nav-ellipsis:hover { color: var(--signature); border-color: var(--signature); } .vocab-highlight { background: var(--highlight-bg); border-bottom: 1.5px solid var(--signature-soft); padding: 1px 5px; border-radius: 2px; cursor: var(--cursor-pointer); transition: background 0.2s ease, border-color 0.2s ease; } .vocab-highlight:hover { background: var(--signature); color: var(--bg); border-bottom-color: var(--signature); } .vocab-highlight.active { background: var(--signature); color: var(--bg); border-bottom-color: var(--signature); } .hl-reading { background: var(--signature) !important; color: var(--bg) !important; border-radius: 2px; transition: background 0.06s ease; } [data-theme="dark"] .hl-reading { background: var(--accent) !important; color: var(--bg) !important; } /* Word tooltip */ /* ============ 单词 tooltip — 简洁浮窗 ============ */ .word-tooltip { position: fixed; z-index: 300; background: var(--signature); color: var(--surface-raised); padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: var(--font-sans); pointer-events: auto; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; line-height: 1.6; max-width: min(380px, 80vw); box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: none; } .word-tooltip .tip-word { font-weight: 700; color: #fff; } .word-tooltip .tip-phonetic { opacity: 0.75; font-style: italic; margin-left: 6px; } .word-tooltip .tip-pos { opacity: 0.7; margin-left: 4px; font-size: 11px; } .word-tooltip .tip-cn { font-weight: 600; margin-left: 8px; color: #fff; } .word-tooltip .tip-main { font-size: 12px; } .word-tooltip .tip-sub { font-size: 10px; opacity: 0.7; margin-top: 2px; letter-spacing: 0.02em; } .word-tooltip.show { opacity: 1; } [data-theme="dark"] .word-tooltip { background: var(--accent); color: var(--accent-text); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* ============ 单词详情侧栏 — 羊皮纸风格（同 loading parchment-tips） ============ */ .word-detail-aside { position: fixed; right: 32px; top: 50%; transform: translateY(-50%); perspective: 800px; z-index: 120; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .word-detail-aside.visible { opacity: 1; } .word-detail-3d { width: 220px; position: relative; transform-style: preserve-3d; animation: wda-float 3s ease-in-out infinite; } .word-detail-aside.visible .word-detail-3d { animation: wda-bounce 0.6s var(--ease-bounce, ease) forwards, wda-float 3s ease-in-out 0.6s infinite; } @keyframes wda-float { 0%, 100% { transform: rotateX(2deg) rotateY(-5deg) translateY(0); } 50% { transform: rotateX(1deg) rotateY(-3deg) translateY(-6px); } } @keyframes wda-bounce { 0% { transform: rotateX(15deg) rotateY(-20deg) translateY(40px) scale(0.7); opacity: 0; } 60% { transform: rotateX(3deg) rotateY(-5deg) translateY(-8px) scale(1.02); opacity: 1; } 80% { transform: rotateX(2deg) rotateY(-4deg) translateY(4px) scale(0.98); } 100% { transform: rotateX(2deg) rotateY(-5deg) translateY(0) scale(1); } } .word-detail-card { width: 220px; background: linear-gradient(135deg, #1a1525 0%, #1f1a30 40%, #231e35 100%); border: 1.5px solid rgba(210,170,100,0.2); border-radius: 3px; padding: 28px 20px 22px; box-shadow: inset 0 1px 6px rgba(0,0,0,0.3), 4px 8px 24px rgba(0,0,0,0.5), 0 0 40px rgba(210,170,100,0.04); font-family: var(--font-book); color: rgba(210,170,100,0.85); transform: translateZ(4px); } /* ===== 稀有度系统：出现次数越多，卡片越炫酷 ===== */ /* Common — 默认外观（count=1） */ .word-detail-card.rarity-common { border-color: rgba(210,170,100,0.2); box-shadow: inset 0 1px 6px rgba(0,0,0,0.3), 4px 8px 24px rgba(0,0,0,0.5), 0 0 40px rgba(210,170,100,0.04); } /* Uncommon — 稀有（count=2-3）：暖金边框 + 微光晕 */ .word-detail-card.rarity-uncommon { border-color: rgba(201,162,39,0.45); background: linear-gradient(135deg, #1a1726 0%, #1e1a2b 40%, #221e30 100%); box-shadow: inset 0 1px 8px rgba(201,162,39,0.08), 4px 8px 24px rgba(0,0,0,0.5), 0 0 30px rgba(201,162,39,0.08), 0 0 60px rgba(201,162,39,0.03); } .rarity-uncommon .wda-head { color: rgba(230,200,130,0.98); text-shadow: 0 0 12px rgba(201,162,39,0.25); } .rarity-uncommon .wda-ornament { color: rgba(201,162,39,0.45); } .rarity-uncommon .wda-cn { color: rgba(220,185,120,0.78); } /* Rare — 珍稀（count=4-6）：金边 + 流光 + 更亮文字 */ .word-detail-card.rarity-rare { border-color: rgba(230,168,23,0.65); background: linear-gradient(135deg, #1c1829 0%, #211d2f 40%, #262236 100%); box-shadow: inset 0 1px 10px rgba(230,168,23,0.12), 4px 8px 24px rgba(0,0,0,0.5), 0 0 28px rgba(230,168,23,0.14), 0 0 70px rgba(230,168,23,0.06); animation: rare-shimmer 3s ease-in-out infinite; } @keyframes rare-shimmer { 0%, 100% { border-color: rgba(230,168,23,0.55); box-shadow: inset 0 1px 10px rgba(230,168,23,0.12), 4px 8px 24px rgba(0,0,0,0.5), 0 0 28px rgba(230,168,23,0.14), 0 0 70px rgba(230,168,23,0.06); } 50% { border-color: rgba(255,215,80,0.75); box-shadow: inset 0 1px 14px rgba(255,215,80,0.18), 4px 8px 24px rgba(0,0,0,0.5), 0 0 40px rgba(255,215,80,0.22), 0 0 90px rgba(255,215,80,0.09); } } .rarity-rare .wda-head { color: #ffe6a0; text-shadow: 0 0 16px rgba(230,168,23,0.4); } .rarity-rare .wda-ornament { color: rgba(230,168,23,0.65); font-size: 10px; } .rarity-rare .wda-cn { color: rgba(235,195,130,0.85); } .rarity-rare .wda-en { color: rgba(225,190,125,0.72); } .rarity-rare .wda-divider { background: linear-gradient(to right, transparent, rgba(230,168,23,0.35), transparent); } /* Legendary — 传说（count=7+）：烈焰金 + 脉动光 + 粒子装饰 */ .word-detail-card.rarity-legendary { border-color: rgba(255,215,0,0.85); background: linear-gradient(135deg, #1e1929 0%, #231f33 35%, #29253b 65%, #1e1929 100%); box-shadow: inset 0 1px 14px rgba(255,215,0,0.18), 4px 8px 24px rgba(0,0,0,0.55), 0 0 32px rgba(255,215,0,0.22), 0 0 80px rgba(255,215,0,0.12), 0 0 120px rgba(255,215,0,0.05); animation: legend-pulse 2.5s ease-in-out infinite; } @keyframes legend-pulse { 0%, 100% { border-color: rgba(255,215,0,0.75); box-shadow: inset 0 1px 14px rgba(255,215,0,0.18), 4px 8px 24px rgba(0,0,0,0.55), 0 0 32px rgba(255,215,0,0.22), 0 0 80px rgba(255,215,0,0.12), 0 0 120px rgba(255,215,0,0.05); } 50% { border-color: rgba(255,235,100,1); box-shadow: inset 0 1px 20px rgba(255,235,100,0.28), 4px 8px 24px rgba(0,0,0,0.55), 0 0 48px rgba(255,235,100,0.36), 0 0 110px rgba(255,215,0,0.18), 0 0 160px rgba(255,215,0,0.07); } } .rarity-legendary .wda-head { color: #fff3b0; text-shadow: 0 0 20px rgba(255,215,0,0.55), 0 0 40px rgba(255,215,0,0.2); animation: head-glow 2.5s ease-in-out infinite; } @keyframes head-glow { 0%, 100% { text-shadow: 0 0 20px rgba(255,215,0,0.55), 0 0 40px rgba(255,215,0,0.2); } 50% { text-shadow: 0 0 28px rgba(255,235,100,0.75), 0 0 56px rgba(255,215,0,0.3); } } .rarity-legendary .wda-ornament { color: rgba(255,215,0,0.8); font-size: 11px; animation: ornament-twinkle 1.5s ease-in-out infinite alternate; } @keyframes ornament-twinkle { from { opacity: 0.5; transform: scale(0.9); } to { opacity: 1; transform: scale(1.15); } } .rarity-legendary .wda-ornament.tr, .rarity-legendary .wda-ornament.bl { animation-delay: 0.3s; } .rarity-legendary .wda-phon { color: rgba(240,210,140,0.7); } .rarity-legendary .wda-pos { color: rgba(240,210,140,0.55); } .rarity-legendary .wda-cn { color: rgba(245,210,145,0.92); } .rarity-legendary .wda-en { color: rgba(240,205,135,0.82); } .rarity-legendary .wda-divider { background: linear-gradient(to right, transparent, rgba(255,215,0,0.5), transparent); } /* 稀有度星星行 */ .wda-rarity { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding-top: 6px; min-height: 22px; } .rarity-stars { font-size: 13px; letter-spacing: 2px; line-height: 1; } .rarity-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.6; font-weight: 400; } /* 稀有度越高星星越大越亮 */ .rarity-uncommon .rarity-stars { font-size: 14px; filter: drop-shadow(0 0 4px rgba(201,162,39,0.3)); } .rarity-rare .rarity-stars { font-size: 15px; filter: drop-shadow(0 0 6px rgba(230,168,23,0.4)); animation: star-flicker 2s ease-in-out infinite; } .rarity-legendary .rarity-stars { font-size: 17px; filter: drop-shadow(0 0 10px rgba(255,215,0,0.6)); animation: star-flicker 1.5s ease-in-out infinite; } @keyframes star-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.04); } } .wda-ornament { position: absolute; font-size: 8px; color: var(--star-tint-35); line-height: 1; pointer-events: none; } .wda-ornament.tl { top: 8px; left: 10px; } .wda-ornament.tr { top: 8px; right: 10px; } .wda-ornament.bl { bottom: 8px; left: 10px; } .wda-ornament.br { bottom: 8px; right: 10px; } .wda-head { font-size: 18px; font-weight: 700; color: rgba(230,200,130,0.95); letter-spacing: 0.01em; margin-bottom: 2px; } .wda-phon { font-size: 12px; color: rgba(210,170,100,0.7); margin-left: 6px; } .wda-pos { font-size: 11px; color: rgba(210,170,100,0.65); font-style: italic; margin-left: 4px; } .wda-cn { font-size: 13px; color: rgba(210,170,100,0.88); line-height: 1.5; margin-top: 4px; } .wda-divider { width: 80%; height: 1px; background: linear-gradient(to right, transparent, rgba(210,170,100,0.28), transparent); margin: 10px auto 8px; } .wda-en-label { font-size: 9px; color: rgba(210,170,100,0.55); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 3px; } .wda-en { font-size: 12px; color: rgba(200,175,115,0.8); font-style: italic; line-height: 1.5; } .wda-en.loading { opacity: 0.4; } .wda-en:not(.loading)::before { content: '\201C'; color: var(--star-tint-45); } .wda-en:not(.loading)::after { content: '\201D'; color: var(--star-tint-45); } .wda-meta { font-size: 9px; color: rgba(210,170,100,0.5); letter-spacing: 0.05em; margin-top: 8px; text-align: right; } /* ===== 语境句子 + AI 语境释义按钮 ===== */ .wda-context { font-size: 10px; color: rgba(180,155,110,0.65); font-style: italic; line-height: 1.6; margin-top: 8px; padding: 6px 10px; border-radius: 4px; background: rgba(15,12,20,0.45); border: 1px solid rgba(210,170,100,0.08); max-height: 48px; overflow: hidden; } .wda-ai-btn { display: block; width: 100%; margin-top: 8px; padding: 6px 0; font-size: 11px; font-family: var(--font-book); color: rgba(210,170,100,0.85); background: rgba(30,25,40,0.6); border: 1px solid rgba(210,170,100,0.2); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; text-align: center; } .wda-ai-btn:hover:not(:disabled) { background: rgba(210,170,100,0.15); border-color: rgba(210,170,100,0.4); color: rgba(235,195,130,1); } .wda-ai-btn:disabled { opacity: 0.5; cursor: wait; } .wda-ai-result { font-size: 12px; color: rgba(230,190,120,0.9); line-height: 1.5; margin-top: 6px; padding: 6px 10px; border-radius: 4px; background: rgba(210,170,100,0.08); display: none; } @media (max-width: 1100px) { .word-detail-aside { right: 50%; top: auto; bottom: 70px; transform: translateX(50%); z-index: 200; animation: none !important; } .word-detail-aside.visible { opacity: 1; } .word-detail-aside.visible .word-detail-3d { animation: wda-mobile-bounce 0.4s ease forwards, wda-mobile-float 3s ease-in-out 0.4s infinite; } @keyframes wda-mobile-bounce { 0% { transform: translateY(30px) scale(0.85); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes wda-mobile-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .word-detail-3d { width: 85vw; max-width: 320px; } .word-detail-card { width: 100%; padding: 22px 18px 18px; } /* 点击背景关闭 */ .word-detail-aside::before { content: ''; position: fixed; inset: -9999px; background: rgba(0,0,0,0.35); z-index: -1; } } /* 短语：淡斜体 + 细点线，视觉让位于输入词（实线高亮） */ .phrase-highlight { border-bottom: 1px dotted var(--signature-soft); padding: 0 1px; font-style: italic; color: var(--text-secondary); cursor: var(--cursor-pointer); transition: background 0.2s ease, color 0.2s ease; } .phrase-highlight:hover { background: var(--highlight-bg); } .phrase-highlight.active { background: var(--signature); color: var(--bg); border-bottom-color: var(--signature); } /* 短语内嵌套的输入词：保留实线高亮 + 取消斜体，与独立输入词视觉一致 */ .phrase-highlight .vocab-highlight.nested { font-style: normal; } /* Story footer */ .story-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 110; pointer-events: auto; background: color-mix(in srgb, var(--star-bg) 94%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--star-tint-12); box-shadow: 0 -4px 24px rgba(0,0,0,0.4), 0 -1px 0 var(--star-tint-06) inset; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .story-footer * { pointer-events: auto; } .story-footer-inner { max-width: 800px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* 底部工具组 */ .footer-tools { display: flex; align-items: center; gap: 3px; } .footer-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(210,170,100,0.13); height: 34px; min-width: 34px; padding: 0 9px; border-radius: 5px; cursor: var(--cursor-pointer); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-sans); font-size: 11.5px; color: rgba(210,190,150,0.6); transition: all 0.2s ease; white-space: nowrap; letter-spacing: 0.01em; } .footer-btn:hover { border-color: var(--star-tint-35); color: rgba(225,200,140,0.9); background: var(--star-tint-08); box-shadow: 0 0 12px var(--star-tint-08); } .footer-btn:active { background: rgba(210,170,100,0.14); transform: scale(0.96); } .footer-btn .ico { font-size: 13px; line-height: 1; font-variant-emoji: text; } /* 收藏按钮：已收藏态 */ .footer-btn.active { border-color: var(--star-tint-45); color: var(--star-gold); background: rgba(210,170,100,0.10); } .footer-right { display: flex; align-items: center; gap: 10px; } /* 朗读按钮 — 金色主按钮 */ .read-btn { background: linear-gradient(135deg, rgba(180,145,60,0.75) 0%, rgba(160,125,45,0.7) 100%); color: rgba(255,245,220,0.92); border: 1px solid var(--star-tint-35); padding: 7px 18px; border-radius: 5px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em; cursor: var(--cursor-pointer); display: flex; align-items: center; gap: 6px; transition: all 0.22s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); } .read-btn:hover { background: linear-gradient(135deg, rgba(195,158,70,0.85) 0%, rgba(175,138,55,0.80) 100%); box-shadow: 0 2px 14px rgba(180,145,50,0.25), inset 0 1px 0 rgba(255,255,255,0.1); transform: translateY(-1px); } .read-btn:active { transform: scale(0.96); } .para-read-btn { display: inline-block; cursor: var(--cursor-pointer); margin-right: 8px; font-size: 13px; opacity: 0.35; transition: opacity 0.2s ease; vertical-align: middle; user-select: none; /* 扩大点击热区：padding + 负 margin 补偿视觉位置不变 */ padding: 8px 6px; margin-left: -6px; line-height: 1; } .para-read-btn:hover { opacity: 1; } .story-paragraph:hover .para-read-btn { opacity: 0.7; } .cancel-link { margin-left: 12px; cursor: var(--cursor-pointer); text-decoration: underline; font-size: 13px; color: var(--text-secondary); } .cancel-link:hover { color: var(--text); } /* ============ HISTORY PAGE (星空暗色主题) ============ */ #page-history { background: var(--star-bg); } #page-history::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; will-change: transform; transform: translateZ(0); background-image: var(--star-sky); } #page-history::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 10%, var(--star-tint-06) 0%, transparent 55%); } .history-container { max-width: 900px; margin: 0 auto; padding: 64px 32px 96px; position: relative; z-index: 1; flex: 1; min-width: 0; } /* — 左右两栏布局 — */ .history-layout { display: flex; max-width: 1200px; margin: 0 auto; gap: 0; } /* — 左侧金色传说栏 — */ .legend-aside { flex: 0 0 220px; padding: 80px 20px 40px; display: flex; flex-direction: column; align-items: center; position: sticky; top: 60px; align-self: flex-start; } .legend-book-stage { width: 150px; height: 190px; position: relative; display: flex; align-items: center; justify-content: center; perspective: 900px; } /* 金光晕 — 脉动光圈 */ .legend-book-stage::before { content: ''; position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,200,80,0.22) 0%, rgba(255,200,80,0.09) 35%, transparent 70%); border-radius: 50%; animation: legend-aura 3.2s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes legend-aura { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; } } /* 首页同款紫 — 纯 Y 轴旋转 */ .legend-book-mini { width: 120px; height: 160px; position: relative; transform-style: preserve-3d; animation: legend-spin 6s linear infinite; } @keyframes legend-spin { 0% { transform: rotateY(0deg); } 28% { transform: rotateY(90deg); } 50% { transform: rotateY(180deg); } 72% { transform: rotateY(270deg); } 100% { transform: rotateY(360deg); } } /* 封面流光 — 双道淡紫光扫过 */ .legend-book-mini .mini-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(200,180,255,0.30) 47%, transparent 60%); border-radius: 6px 2px 2px 6px; animation: legend-sheen 3.6s ease-in-out infinite; pointer-events: none; } .legend-book-mini .mini-front::before { content: ''; position: absolute; inset: 0; background: linear-gradient(65deg, transparent 38%, rgba(180,160,240,0.18) 50%, transparent 60%); border-radius: 6px 2px 2px 6px; animation: legend-sheen 3.6s ease-in-out infinite reverse; animation-delay: -1.8s; pointer-events: none; z-index: 1; } @keyframes legend-sheen { 0%, 100% { opacity: 0; transform: translateX(-40%); } 50% { opacity: 1; transform: translateX(40%); } } .legend-book-mini .mini-front { width: 120px; height: 160px; top: 0; left: 0; transform: translateZ(8px); /* 与首页 cover-front 同款紫色渐变 */ background: radial-gradient(ellipse 110% 50% at 50% 30%, rgba(100, 60, 160, 0.18), transparent), linear-gradient(155deg, #2a1a3a 0%, #3a224a 20%, #4c2e60 42%, #5a3a70 52%, #4c2e60 65%, #2c1a3a 85%, #1a0e28 100%); border-radius: 6px 2px 2px 6px; padding: 22px 14px; box-shadow: inset 0 0 35px rgba(80,45,120,0.25), 0 0 20px rgba(100,60,160,0.25); animation: legend-front-glow 3s ease-in-out infinite; overflow: hidden; } @keyframes legend-front-glow { 0%, 100% { box-shadow: inset 0 0 30px rgba(80,45,120,0.20), 0 0 14px rgba(100,60,160,0.20); } 50% { box-shadow: inset 0 0 44px rgba(110,70,170,0.32), 0 0 26px rgba(140,90,200,0.38); } } .legend-book-mini .mini-cover-border { position: absolute; inset: 8px; border: 1px solid rgba(180,160,230,0.28); border-radius: 4px; pointer-events: none; } .legend-book-mini .mini-emblem { width: 32px; height: 32px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(180,160,230,0.4); border-radius: 50%; animation: legend-emblem-pulse 2.6s ease-in-out infinite; } @keyframes legend-emblem-pulse { 0%, 100% { box-shadow: 0 0 5px rgba(140,100,200,0.3); } 50% { box-shadow: 0 0 12px rgba(180,150,240,0.55), 0 0 20px rgba(140,100,200,0.25); } } .legend-book-mini .mini-emblem span { font-size: 14px; color: #d8c0ff; text-shadow: 0 0 6px rgba(150,110,210,0.7); } .legend-book-mini .mini-title { font-family: var(--font-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-align: center; color: var(--star-purple); text-shadow: 0 1px 4px rgba(0,0,0,0.4); } .legend-book-mini .mini-back { width: 120px; height: 160px; top: 0; left: 0; transform: rotateY(180deg) translateZ(8px); background: linear-gradient(135deg, #1a0e28 0%, #201432 40%, #2a1a3e 70%, #1a0e28 100%); border-radius: 2px 6px 6px 2px; } .legend-book-mini .mini-back-border { position: absolute; inset: 10px; border: 1px solid rgba(160,140,210,0.10); border-radius: 4px; } .legend-book-mini .mini-spine { width: 16px; height: 160px; top: 0; left: 52px; transform: rotateY(-90deg) translateZ(60px); background: linear-gradient(90deg, #140c20, #241636 40%, #3a2458 70%, #241636); border-radius: 2px 0 0 2px; } .legend-book-mini .mini-spine-text { font-size: 7px; } .legend-book-mini .mini-top-edge { width: 120px; height: 16px; top: 0; left: 0; transform: rotateX(90deg) translateZ(8px); background: repeating-linear-gradient(90deg, #6b4f94, #5a3e82 1px, #4a3068 2px, #6b4f94 3px); border-radius: 4px 4px 0 0; } .legend-book-mini .mini-bottom-edge { width: 120px; height: 16px; bottom: 0; left: 0; transform: rotateX(-90deg) translateZ(8px); background: repeating-linear-gradient(90deg, #6b4f94, #5a3e82 1px, #4a3068 2px, #6b4f94 3px); border-radius: 0 0 4px 4px; } .legend-book-mini .mini-right-edge { width: 16px; height: 160px; top: 0; left: 52px; transform: rotateY(90deg) translateZ(60px); background: repeating-linear-gradient(0deg, #6b4f94, #5a3e82 1px, #4a3068 2px, #6b4f94 3px); border-radius: 0 4px 4px 0; } .legend-label { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--star-purple); letter-spacing: 0.08em; margin-top: 24px; text-shadow: 0 0 10px rgba(140,100,200,0.3); } .legend-hint { font-size: 11px; color: rgba(255,215,130,0.5); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 4px; } .history-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--star-tint-12); position: relative; } .history-header::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--star-tint-08); opacity: 0.55; } .history-title { font-family: var(--font-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--star-text); text-shadow: 0 0 20px var(--star-tint-15); } .history-tabs { display: flex; gap: 0; margin-left: auto; align-self: flex-end; } .history-tab { background: none; border: none; font-family: var(--font-sans); font-size: 12px; color: var(--star-tint-45); cursor: var(--cursor-pointer); padding: 6px 14px; border-radius: 0; transition: color 0.2s ease, background 0.2s ease; position: relative; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .history-tab::after { content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 1.5px; background: rgba(210,170,100,0.5); transform: scaleX(0); transform-origin: center; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .history-tab:hover { color: rgba(210,170,100,0.7); } .history-tab.active { color: var(--star-text); font-weight: 600; } .history-tab.active::after { transform: scaleX(1); } .history-sort { background: none; border: 1px solid var(--star-tint-15); padding: 6px 12px; border-radius: 2px; font-family: var(--font-sans); font-size: 12px; color: rgba(210,170,100,0.6); cursor: var(--cursor-pointer); align-self: flex-end; transition: border-color 0.2s ease, color 0.2s ease; letter-spacing: 0.02em; } .history-sort:hover { border-color: rgba(210,170,100,0.4); color: var(--star-text); } .history-divider { text-align: center; margin: 32px 0 40px; height: 14px; position: relative; } .history-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, var(--star-tint-12) 12%, var(--star-tint-12) 38%, transparent 46%, transparent 54%, var(--star-tint-12) 62%, var(--star-tint-12) 88%, transparent 100% ); } .history-divider::after { content: '✦'; font-size: 14px; color: rgba(210,170,100,0.5); position: relative; background: var(--star-bg); padding: 0 14px; line-height: 14px; } /* history-actions 已移除——改为卡片内单独导出按钮 */ .history-group-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(140,130,110,0.65); font-weight: 500; margin-top: 32px; margin-bottom: 16px; } .history-group-label:first-of-type { margin-top: 0; } .history-card { display: flex; flex-direction: row; background: rgba(14,18,40,0.72); border: 1px solid var(--star-tint-12); border-radius: 6px; margin-bottom: 14px; cursor: var(--cursor-pointer); overflow: visible; transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); perspective: 700px; } .history-card:hover { border-color: var(--star-tint-35); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 16px var(--star-tint-06); } /* ---- 3D 旋转迷你书（hover 时旋转） ---- */ .history-book-mini { flex: 0 0 76px; width: 76px; height: 100px; align-self: center; margin: 12px 0 12px 14px; position: relative; cursor: var(--cursor-pointer); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); z-index: 2; } .history-card:hover .history-book-mini { animation: hbm-spin 2.4s cubic-bezier(0.37,0,0.63,1) infinite; } @keyframes hbm-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* — 封面正面（76×100） — */ .history-book-mini .mini-front { width: 76px; height: 100px; top: 0; left: 0; transform: translateZ(5px); background: linear-gradient(135deg, #2b1e3a 0%, #3a2848 40%, #4c355c 70%, #2b1e3a 100%); border-radius: 5px 2px 2px 5px; padding: 14px 10px; } .history-book-mini .mini-cover-border { inset: 5px; border-radius: 3px; } .history-book-mini .mini-emblem { width: 20px; height: 20px; margin-bottom: 4px; } .history-book-mini .mini-emblem span { font-size: 8px; } .history-book-mini .mini-title { font-size: 8px; letter-spacing: 0.1em; } /* — 封面背面 — */ .history-book-mini .mini-back { width: 76px; height: 100px; top: 0; left: 0; transform: rotateY(180deg) translateZ(5px); background: linear-gradient(135deg, #221830 0%, #2b1e3a 40%, #352845 70%, #221830 100%); border-radius: 2px 5px 5px 2px; } .history-book-mini .mini-back-border { inset: 6px; border-radius: 4px; } /* — 书脊 — */ .history-book-mini .mini-spine { width: 10px; height: 100px; top: 0; left: 33px; transform: rotateY(-90deg) translateZ(38px); background: linear-gradient(90deg, #1a1228, #2b1e3a 40%, #3a2848 70%, #2b1e3a); border-radius: 2px 0 0 2px; } .history-book-mini .mini-spine-text { font-size: 6px; } /* — 页边 — */ .history-book-mini .mini-top-edge { width: 76px; height: 10px; top: 0; left: 0; transform: rotateX(90deg) translateZ(5px); border-radius: 4px 4px 0 0; } .history-book-mini .mini-bottom-edge { width: 76px; height: 10px; bottom: 0; left: 0; transform: rotateX(-90deg) translateZ(5px); border-radius: 0 0 4px 4px; } .history-book-mini .mini-right-edge { width: 10px; height: 100px; top: 0; left: 33px; transform: rotateY(90deg) translateZ(38px); border-radius: 0 3px 3px 0; } /* — 按章节数变色的书脊/封面/封底 — */ /* 1-2章：翠绿 */ .spine-ch1 .mini-front { background: linear-gradient(135deg, #1a3a2a 0%, #2b5a40 40%, #356b4c 70%, #1a3a2a 100%); } .spine-ch1 .mini-back { background: linear-gradient(135deg, #152e22 0%, #1a3a2a 40%, #244635 70%, #152e22 100%); } .spine-ch1 .mini-spine { background: linear-gradient(90deg, #0d1f14, #1a3a2a 40%, #2b5a40 70%, #1a3a2a); } /* 3-4章：深蓝 */ .spine-ch3 .mini-front { background: linear-gradient(135deg, #0a2030 0%, #18465a 40%, #26687c 70%, #0a2030 100%); } .spine-ch3 .mini-back { background: linear-gradient(135deg, #081824 0%, #0a2030 40%, #123544 70%, #081824 100%); } .spine-ch3 .mini-spine { background: linear-gradient(90deg, #06121c, #0a2030 40%, #18465a 70%, #0a2030); } /* 5-7章：紫色 */ .spine-ch5 .mini-front { background: linear-gradient(135deg, #2b1e3a 0%, #3a2848 40%, #4c355c 70%, #2b1e3a 100%); } .spine-ch5 .mini-back { background: linear-gradient(135deg, #221830 0%, #2b1e3a 40%, #352845 70%, #221830 100%); } .spine-ch5 .mini-spine { background: linear-gradient(90deg, #1a1228, #2b1e3a 40%, #3a2848 70%, #2b1e3a); } /* 8-9章：橙色 */ .spine-ch8 .mini-front { background: linear-gradient(135deg, #3a1a08 0%, #6a3812 40%, #8a4e1c 70%, #3a1a08 100%); } .spine-ch8 .mini-back { background: linear-gradient(135deg, #2c1406 0%, #3a1a08 40%, #4a2810 70%, #2c1406 100%); } .spine-ch8 .mini-spine { background: linear-gradient(90deg, #200e04, #3a1a08 40%, #6a3812 70%, #3a1a08); } /* 10+章：金色传说 */ .spine-gold .mini-front { background: linear-gradient(135deg, #4a3008 0%, #8a6018 40%, #c49838 70%, #4a3008 100%); } .spine-gold .mini-back { background: linear-gradient(135deg, #3a2406 0%, #4a3008 40%, #5a3c10 70%, #3a2406 100%); } .spine-gold .mini-spine { background: linear-gradient(90deg, #2c1804, #4a3008 40%, #8a6018 70%, #4a3008); } /* ===== 系统开篇之书 — 永恒旋转 · 金光流转 ===== */ /* 外层展台：处理 X 轴倾斜（静态），让内层书体保持纯 Y 轴旋转 */ .system-pedestal { flex: 0 0 76px; align-self: center; margin: 12px 0 12px 14px; transform-style: preserve-3d; transform: rotateX(8deg); /* 展台本身不需要动画，只提供固定倾角 */ } /* 内层书体：常驻纯 Y 轴旋转（不含 X 倾斜，保证 3D 子面不游离） */ .system-book { animation: sys-spin-flat 8s linear infinite !important; margin: 0; /* 外层已处理布局 */ transition: none; /* 阻断基类 transition，防止 hover 改 animation-duration 时爆闪 */ } @keyframes sys-spin-flat { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(90deg); } 50% { transform: rotateY(180deg); } 75% { transform: rotateY(270deg); } 100% { transform: rotateY(360deg); } } /* hover 时加速 */ .history-card:hover .system-book { animation-duration: 3s !important; } /* 封面 — 琥珀流金 */ .system-book .mini-front { background: linear-gradient(135deg, #5a3408 0%, #9a6818 25%, #d4a038 45%, #f0c450 55%, #d4a038 75%, #5a3408 100%) !important; box-shadow: inset 0 0 28px rgba(255,220,130,0.35), 0 0 18px rgba(255,190,70,0.30) !important; animation: sys-glow 3s ease-in-out infinite; overflow: hidden; } @keyframes sys-glow { 0%, 100% { box-shadow: inset 0 0 22px rgba(255,215,120,0.25), 0 0 12px rgba(255,190,70,0.25); } 50% { box-shadow: inset 0 0 35px rgba(255,230,140,0.40), 0 0 24px rgba(255,200,80,0.50); } } /* 双道流光扫过金面 */ .system-book .mini-front::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,250,210,0.45) 47%, transparent 62%); border-radius: 5px 2px 2px 5px; animation: sys-sheen 3.6s ease-in-out infinite; pointer-events: none; z-index: 1; } .system-book .mini-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(65deg, transparent 38%, rgba(255,240,170,0.25) 50%, transparent 62%); border-radius: 5px 2px 2px 5px; animation: sys-sheen 3.6s ease-in-out infinite reverse; animation-delay: -1.8s; pointer-events: none; } @keyframes sys-sheen { 0%, 100% { opacity: 0; transform: translateX(-40%); } 50% { opacity: 1; transform: translateX(40%); } } /* 金色封面边框 */ .system-book .mini-cover-border { border-color: rgba(255,220,140,0.45) !important; box-shadow: inset 0 0 8px rgba(255,200,80,0.15); } /* 徽章 — 脉冲金环 */ .system-book .mini-emblem { border-color: rgba(255,220,140,0.5) !important; animation: sys-emblem 2.4s ease-in-out infinite; } @keyframes sys-emblem { 0%, 100% { box-shadow: 0 0 4px rgba(255,200,80,0.35); } 50% { box-shadow: 0 0 10px rgba(255,225,120,0.70), 0 0 16px rgba(255,200,80,0.30); } } .system-book .mini-emblem span { color: #fff0b0 !important; text-shadow: 0 0 6px rgba(255,210,90,0.8), 0 0 12px rgba(255,190,60,0.4) !important; } /* 书名 — 金色 */ .system-book .mini-title { color: #ffe080 !important; text-shadow: 0 0 4px rgba(255,200,80,0.5), 0 1px 3px rgba(0,0,0,0.5) !important; } /* 封底 — 深金 */ .system-book .mini-back { background: linear-gradient(135deg, #3a2406 0%, #4a3008 35%, #6a4810 65%, #3a2406 100%) !important; } .system-book .mini-back-border { border-color: rgba(255,220,140,0.18) !important; } /* 书脊 — 琥珀金 */ .system-book .mini-spine { background: linear-gradient(90deg, #2c1804, #5a3408 30%, #9a6818 60%, #5a3408) !important; } /* 页边 — 金箔 */ .system-book .mini-top-edge { background: repeating-linear-gradient(90deg, #e8c058, #d4a038 1px, #b88820 2px, #e8c058 3px) !important; } .system-book .mini-bottom-edge { background: repeating-linear-gradient(90deg, #e8c058, #d4a038 1px, #b88820 2px, #e8c058 3px) !important; } .system-book .mini-right-edge { background: repeating-linear-gradient(0deg, #e8c058, #d4a038 1px, #b88820 2px, #e8c058 3px) !important; } .history-card-body { flex: 1; padding: 20px 24px; min-width: 0; } .history-card-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: rgba(230,220,200,0.92); margin-bottom: 4px; } .history-card-subtitle { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: rgba(210,180,140,0.6); margin-bottom: 12px; } .history-card-vocab { font-size: 13px; color: rgba(200,190,170,0.7); margin-bottom: 8px; } .history-card-vocab .word { color: rgba(230,220,200,0.85); } .history-card-vocab .sep { color: rgba(140,130,110,0.5); margin: 0 6px; } .history-card-meta { font-size: 12px; color: rgba(140,130,110,0.65); } .history-card-head { display: flex; justify-content: space-between; align-items: flex-start; } .history-card-title-wrap { flex: 1; min-width: 0; } .history-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .history-card-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(140,130,110,0.65); border: 1px solid var(--star-tint-12); border-radius: 2px; padding: 1px 6px; white-space: nowrap; } .history-card-badge.generated { border-color: rgba(210,170,100,0.25); color: rgba(210,170,100,0.6); } .history-delete-btn { background: none; border: none; color: rgba(140,130,110,0.65); cursor: var(--cursor-pointer); font-family: inherit; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 2px; transition: color 0.2s ease, background 0.2s ease; opacity: 0; } .history-card:hover .history-delete-btn { opacity: 1; } .history-delete-btn:hover { color: var(--danger); background: rgba(255,59,48,0.08); } /* 系统故事标记（不可删除，替代 ✕ 按钮） */ .system-badge { display: inline-flex; align-items: center; justify-content: center; color: var(--gold, var(--star-gold-dim)); font-size: 14px; padding: 2px 6px; opacity: 0.6; cursor: default; } /* 系统卡片整体微光（不抢书的主角风头） */ .system-card { position: relative; perspective-origin: 52px 50%; /* 灭点正对书心（14px margin + 38px 半宽），消除左高右低 */ } .system-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,200,80,0.04) 0%, transparent 50%, rgba(255,200,80,0.03) 100%); pointer-events: none; z-index: 0; } /* 卡片导出按钮 */ .history-export-btn { background: none; border: none; color: rgba(140,130,110,0.65); cursor: var(--cursor-pointer); font-family: inherit; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 2px; transition: color 0.2s ease, opacity 0.2s ease; opacity: 0; font-variant-emoji: text; } .history-card:hover .history-export-btn { opacity: 1; } .history-export-btn:hover { color: rgba(210,170,100,0.85); } /* 卡片收藏星标 */ .history-card-fav { background: none; border: none; color: rgba(140,130,110,0.65); cursor: var(--cursor-pointer); font-family: inherit; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 2px; transition: color 0.2s ease, opacity 0.2s ease; opacity: 0; } .history-card:hover .history-card-fav { opacity: 1; } .history-card-fav:hover { color: rgba(210,170,100,0.8); } .history-card-fav.active { color: rgba(210,170,100,0.9); opacity: 1; } /* 回收站卡片：褪色 */ .history-card.deleted { opacity: 0.50; } .history-card.deleted:hover { opacity: 0.75; } .history-card.deleted .history-book-mini { filter: grayscale(0.6); } /* 恢复按钮（绿色 ↺） */ .history-restore-btn { background: none; border: none; color: rgba(140,130,110,0.65); cursor: var(--cursor-pointer); font-family: inherit; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 2px; transition: color 0.2s ease, background 0.2s ease; opacity: 0; } .history-card:hover .history-restore-btn { opacity: 1; } .history-restore-btn:hover { color: rgba(210,170,100,0.8); background: var(--star-tint-08); } /* 彻底删除按钮（红色 ✕） */ .history-purge-btn { background: none; border: none; color: rgba(140,130,110,0.65); cursor: var(--cursor-pointer); font-family: inherit; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 2px; transition: color 0.2s ease, background 0.2s ease; opacity: 0; } .history-card:hover .history-purge-btn { opacity: 1; } .history-purge-btn:hover { color: var(--danger); background: rgba(255,59,48,0.08); } /* 回收站工具栏 */ .recycle-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; margin-bottom: 4px; } .recycle-count { font-family: var(--font-sans); font-size: 12px; color: rgba(140,130,110,0.65); letter-spacing: 0.04em; } .recycle-empty-btn { font-family: var(--font-sans); font-size: 12px; color: rgba(140,130,110,0.65); background: none; border: 1px solid var(--star-tint-15); border-radius: 2px; padding: 5px 12px; cursor: var(--cursor-pointer); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .recycle-empty-btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(255,59,48,0.06); } .load-more { text-align: center; margin-top: 56px; position: relative; height: 16px; } .load-more::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(210,170,100,0.1) 15%, rgba(210,170,100,0.1) 38%, transparent 46%, transparent 54%, rgba(210,170,100,0.1) 62%, rgba(210,170,100,0.1) 85%, transparent 100% ); } .load-more a { color: rgba(210,170,100,0.4); text-decoration: none; font-size: 11px; cursor: var(--cursor-pointer); border: none; padding: 0 14px; transition: color 0.2s ease; background: var(--star-bg); letter-spacing: 0.22em; text-transform: uppercase; position: relative; font-weight: 500; } .load-more a:hover { color: rgba(210,170,100,0.7); } .load-more a.load-more-end { color: rgba(210,170,100,0.4); cursor: default; } .load-more a.load-more-end:hover { color: rgba(210,170,100,0.4); } /* ============ EMPTY STATES ============ */ .empty-state { text-align: center; padding: 80px 32px; color: rgba(140,130,110,0.65); font-size: 14px; } .empty-ornament { font-family: var(--font-serif); font-size: 36px; color: rgba(210,170,100,0.4); opacity: 0.6; margin-bottom: 20px; animation: ornamentBreathe 3s ease-in-out infinite, ornamentFloat 6s ease-in-out infinite; } @keyframes ornamentBreathe { 0%, 100% { text-shadow: 0 0 0 transparent; opacity: 0.6; } 50% { text-shadow: 0 0 18px rgba(210,170,100,0.35), 0 0 36px rgba(210,170,100,0.12); opacity: 0.85; } } @keyframes ornamentFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .empty-title { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: rgba(210,180,140,0.6); letter-spacing: -0.01em; margin-bottom: 16px; } .empty-rule { width: 40px; height: 1px; background: rgba(210,170,100,0.3); opacity: 0.5; margin: 0 auto 16px; } .empty-hint { color: rgba(140,130,110,0.65); font-style: italic; } /* ============ READING PROGRESS BAR ============ */ .read-progress { position: fixed; top: 56px; left: 0; height: 2px; background: var(--signature); width: 0; z-index: 99; transition: width 0.1s linear; } /* ============ STORY EDITORIAL ============ */ /* 章节书签 — 右侧丝带，颜色联动 Library 稀有度系统 */ .story-bookmark { position: fixed; right: 0; top: 130px; width: 38px; padding: 14px 0 22px; text-align: center; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 2px; /* 丝带形状：底部 V 形缺口 */ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: -2px 2px 10px rgba(0,0,0,0.25); transition: opacity 0.3s ease; } .story-bookmark .bookmark-label { font-family: var(--font-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.75); text-transform: uppercase; } .story-bookmark .bookmark-num { font-family: var(--font-serif); font-size: 18px; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } /* 五个 tier — 跟 spine-ch 系统同色系 */ .bm-ch1 { background: linear-gradient(180deg, #2b5a40, #1a3a2a); } .bm-ch3 { background: linear-gradient(180deg, #18465a, #0a2030); } .bm-ch5 { background: linear-gradient(180deg, #3a2848, #2b1e3a); } .bm-ch8 { background: linear-gradient(180deg, #6a3812, #3a1a08); } .bm-gold { background: linear-gradient(180deg, #c49838, #8a6018); box-shadow: -2px 2px 14px rgba(255,200,80,0.30); } .bm-gold .bookmark-num { color: #fff8d0; } /* 移动端隐藏书签（小屏空间不够） */ @media (max-width: 768px) { .story-bookmark { display: none; } } .story-issue { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--signature); font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); position: relative; } .story-issue::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--border); } .story-issue .dot { width: 3px; height: 3px; background: var(--signature); border-radius: 50%; opacity: 0.5; } .story-byline { font-family: var(--font-serif); font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; padding-bottom: 14px; font-style: italic; letter-spacing: 0.01em; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .story-difficulty { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .diff-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface); transition: border-color 0.2s ease; font-family: var(--font-sans); } .story-coverage { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; } .story-context-chip { font-size: 12px; color: var(--text-tertiary); margin-left: 12px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-paragraph[data-idx="0"]::first-letter { font-family: var(--font-serif); font-size: 5em; font-weight: 700; float: left; line-height: 0.80; margin: 6px 14px 2px -2px; color: var(--signature); letter-spacing: -0.04em; font-variant-numeric: oldstyle-nums; padding: 6px 12px 6px 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--signature) 7%, transparent), color-mix(in srgb, var(--signature) 2%, transparent) ); border: 1px solid color-mix(in srgb, var(--signature) 14%, transparent); border-radius: 2px; } [data-theme="dark"] .story-paragraph[data-idx="0"]::first-letter { background: linear-gradient(135deg, color-mix(in srgb, var(--signature) 10%, transparent), color-mix(in srgb, var(--signature) 3%, transparent) ); border-color: color-mix(in srgb, var(--signature) 20%, transparent); } .story-paragraph[data-idx="0"] { padding-top: 2px; } /* ============ INPUT DIFFICULTY LIVE ============ */ .input-difficulty { width: 100%; font-size: 12px; color: var(--text-tertiary); margin-top: 10px; text-align: left; height: 18px; opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; gap: 10px; } .input-difficulty.show { opacity: 1; } .input-difficulty .level { color: var(--text); font-weight: 600; font-family: var(--font-mono); font-size: 0.65rem; } .input-difficulty .mini-track { flex: 1; max-width: 120px; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; } .input-difficulty .mini-fill { height: 100%; background: var(--text); transition: width 0.3s ease; } /* ============ HISTORY STATS ============ */ .history-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 48px; padding: 36px 40px 28px; background: rgba(14,18,40,0.6); border: 1px solid var(--star-tint-12); border-radius: 4px; position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 14px rgba(0,0,0,0.15); } /* 账簿式双线顶边 */ .history-stats::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--star-tint-08); opacity: 0.6; pointer-events: none; } /* 账簿式底部签条 */ .history-stats::after { content: '✦ Archive Records ✦'; position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.28em; color: rgba(210,170,100,0.4); text-transform: uppercase; background: var(--star-bg); padding: 0 14px; } .stat-item { text-align: center; position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(210,170,100,0.1); opacity: 0.7; } .stat-value { font-family: var(--font-serif); font-size: 44px; font-weight: 600; color: var(--star-text); letter-spacing: -0.025em; line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums oldstyle-nums; } .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(140,130,110,0.65); font-weight: 600; } /* ============ READER PAGE ============ */ #page-reader { background: var(--star-bg); position: relative; overflow: hidden; } #page-reader::before { content: ''; position: absolute; inset: 0; background: var(--star-sky); pointer-events: none; z-index: 0; } .reader-container { max-width: 800px; margin: 0 auto; padding: 64px 32px; position: relative; z-index: 1; } .reader-container h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--star-text); margin-bottom: 8px; text-shadow: 0 0 32px var(--star-tint-08); } .reader-hint { font-size: 13px; color: var(--star-text-muted); margin-bottom: 24px; } .reader-title-input { display: block; width: 100%; font-size: 20px; font-weight: 600; border: none; border-bottom: 1px solid var(--star-tint-25); background: linear-gradient(180deg, rgba(26,21,37,0.5) 0%, transparent 100%); padding: 12px 16px; color: var(--star-text); font-family: var(--font-serif); outline: none; border-radius: 4px 4px 0 0; transition: border-color 0.3s ease, box-shadow 0.3s ease; margin-bottom: 24px; } .reader-title-input:focus { border-bottom-color: var(--star-gold); box-shadow: 0 0 12px var(--star-tint-08); } .reader-title-input::placeholder { color: var(--star-text-muted); } .reader-textarea { width: 100%; min-height: 380px; border: 1px solid var(--star-tint-25); border-radius: 8px 4px 8px 4px; background: linear-gradient(180deg, rgba(26,21,37,0.6) 0%, rgba(22,18,32,0.7) 100%); padding: 20px; font-size: 15px; font-family: var(--font-serif); color: var(--star-text); outline: none; resize: vertical; line-height: 1.8; transition: border-color 0.3s ease, box-shadow 0.3s ease; margin-bottom: 24px; } .reader-textarea:focus { border-color: var(--star-gold); box-shadow: 0 0 16px var(--star-tint-08), inset 0 0 24px rgba(210,170,100,0.03); } .reader-textarea::placeholder { color: var(--star-text-muted); } .reader-start-btn { background: linear-gradient(135deg, rgba(210,170,100,0.18), rgba(210,170,100,0.08)); color: var(--star-text); border: 1px solid var(--star-tint-35); padding: 12px 32px; border-radius: 6px; font-family: var(--font-serif); font-size: 14px; font-weight: 500; cursor: var(--cursor-pointer); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; letter-spacing: 0.03em; } .reader-start-btn:hover { background: linear-gradient(135deg, rgba(210,170,100,0.28), rgba(210,170,100,0.14)); border-color: var(--star-gold); box-shadow: 0 0 20px var(--star-tint-15); transform: translateY(-1px); } .reader-start-btn:active { transform: scale(0.97); } /* Reader page: decorative runes */ .reader-container::before { content: '✦'; position: absolute; top: 48px; right: 24px; font-size: 14px; color: var(--star-tint-25); pointer-events: none; animation: readerRuneFloat 4s ease-in-out infinite; } .reader-container::after { content: '◈'; position: absolute; bottom: 120px; left: 20px; font-size: 12px; color: var(--star-tint-20); pointer-events: none; animation: readerRuneFloat 5s ease-in-out 1.5s infinite; } @keyframes readerRuneFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; } 50% { transform: translateY(-6px) rotate(15deg); opacity: 0.6; } } .w-clickable { cursor: var(--cursor-pointer); padding: 0 1px; border-radius: 2px; transition: background 0.15s ease, color 0.15s ease; } .w-clickable:hover { background: var(--highlight-bg); } .w-clickable:active { background: var(--text); color: var(--bg); } /* ============ 词汇抽屉 ============ */ /* ═══════ VOCAB DRAWER — 杂志风词汇宇宙 ═══════ */ .vocab-drawer-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 90; pointer-events: none; transition: background 0.35s ease; } .vocab-drawer-mask.show { background: rgba(0, 0, 0, 0.4); pointer-events: auto; } .vocab-drawer { position: fixed; left: 0; right: 0; bottom: 0; height: 62vh; max-height: 560px; background: linear-gradient(180deg, #1a1525 0%, #1f1a30 40%, #231e35 100%); border-top: 1.5px solid rgba(210,170,100,0.18); border-radius: 20px 20px 0 0; box-shadow: inset 0 1px 12px rgba(0,0,0,0.3), 0 -4px 24px rgba(0,0,0,0.45); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: 91; display: flex; flex-direction: column; overflow: hidden; } /* 拖拽手柄 */ .vocab-drawer::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(210,170,100,0.2); border-radius: 2px; margin: 8px auto 0; flex-shrink: 0; } .vocab-drawer.open { transform: translateY(0); } .vocab-drawer-header { display: flex; align-items: center; gap: 14px; padding: 12px 28px 14px; flex-shrink: 0; } .vocab-drawer-title { font-family: var(--font-book); font-size: 17px; font-weight: 700; color: rgba(230,200,130,0.95); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; } .vocab-drawer-title::after { content: '❦'; font-size: 13px; color: var(--star-tint-35); opacity: 1; } .vocab-drawer-search-wrap { flex: 1; min-width: 0; } .vocab-drawer-search { width: 100%; padding: 7px 16px; font-size: 13px; font-family: var(--font-sans); color: rgba(230,200,130,0.85); background: rgba(255,255,255,0.05); border: 1px solid var(--star-tint-15); border-radius: 100px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } [data-theme="dark"] .vocab-drawer-search { background: rgba(255,255,255,0.05); } .vocab-drawer-search:focus { border-color: var(--star-tint-45); box-shadow: 0 0 12px var(--star-tint-08); } .vocab-drawer-search::placeholder { color: rgba(210,170,100,0.3); font-style: italic; } .vocab-drawer-close { width: 32px; height: 32px; border: 1px solid var(--star-tint-15); background: transparent; color: rgba(210,170,100,0.4); font-size: 16px; cursor: var(--cursor-pointer); border-radius: 50%; transition: all 0.18s ease; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .vocab-drawer-close:hover { background: var(--star-tint-12); color: rgba(230,200,130,0.9); border-color: rgba(210,170,100,0.3); } .vocab-drawer-body { flex: 1; overflow-y: auto; padding: 6px 28px 28px; -webkit-overflow-scrolling: touch; } .vocab-drawer-body::-webkit-scrollbar { width: 3px; } .vocab-drawer-body::-webkit-scrollbar-track { background: transparent; } .vocab-drawer-body::-webkit-scrollbar-thumb { background: var(--star-tint-15); border-radius: 3px; } .vocab-drawer-empty { text-align: center; color: var(--star-tint-35); font-size: 14px; padding: 56px 0; font-family: var(--font-book); font-style: italic; } /* ── 章节分组标题 ── */ .vocab-chapter-group { margin-bottom: 16px; } .vocab-chapter-group-label { font-family: var(--font-sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--star-tint-35); font-weight: 600; margin: 12px 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(210,170,100,0.1); } /* ── 单词卡片：羊皮纸风格（匹配 word-detail-card） ── */ .vocab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .vocab-row { background: linear-gradient(135deg, rgba(26,21,37,0.8) 0%, rgba(31,26,48,0.8) 100%); border: 1px solid var(--star-tint-12); border-radius: 3px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: default; } .vocab-row:hover { border-color: rgba(210,170,100,0.3); box-shadow: 0 0 16px rgba(210,170,100,0.05); } .vocab-row-word { font-family: var(--font-book); font-size: 15px; font-weight: 700; color: rgba(230,200,130,0.95); letter-spacing: 0.01em; line-height: 1.3; } .vocab-row-phon { font-size: 11px; color: var(--star-tint-45); font-style: normal; margin-left: 4px; } .vocab-row-pos { font-size: 10px; color: var(--star-tint-35); font-style: italic; margin-left: 3px; } .vocab-row-cn { font-size: 12px; color: rgba(210,170,100,0.7); line-height: 1.5; margin-top: 2px; } .vocab-row-phrase { font-style: italic; color: rgba(210,170,100,0.55); } .vocab-row-meaning { font-family: var(--font-book); font-size: 11px; color: rgba(200,175,115,0.6); font-style: italic; line-height: 1.5; } /* 分区分隔线 */ .vocab-section-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0 6px; font-family: var(--font-sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(210,170,100,0.3); font-weight: 600; } .vocab-section-divider::before, .vocab-section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--star-tint-12), transparent); } .vocab-section-divider span { white-space: nowrap; color: rgba(210,170,100,0.4); } /* Tablet landscape 1024px */ @media (max-width: 1024px) { .home-title { font-size: 44px; } .story-title { font-size: 36px; } .history-stats { padding: 24px 28px; } .stat-value { font-size: 32px; } } /* Tablet portrait 768px */ @media (max-width: 768px) { .nav-inner, .story-footer-inner, .history-container, .home-container, .story-container { padding-left: 24px; padding-right: 24px; } .home-title { font-size: 38px; } .home-subtitle { font-size: 17px; margin-bottom: 48px; } .home-container { padding-top: 64px; } .story-title { font-size: 32px; } .story-subtitle { font-size: 17px; } .story-paragraph { font-size: 0.938rem; } .history-stats { grid-template-columns: repeat(3, 1fr); padding: 20px 16px; } .stat-value { font-size: 28px; } .stat-item:not(:last-child)::after { top: 10%; bottom: 10%; } .nav-tabs { gap: 24px; } } /* Mobile < 480px */ @media (max-width: 480px) { .nav-inner, .story-footer-inner, .history-container, .home-container, .story-container { padding-left: 16px; padding-right: 16px; } .nav { top: 0; } .nav-inner { height: 48px; } .nav-logo { font-size: 15px; } .nav-tabs { gap: 16px; } .nav-tab { font-size: 13px; } .nav-tab.active::after { bottom: -16px; height: 1.5px; } .home-container { padding-top: 48px; padding-bottom: 40px; } .home-title { font-size: 32px; margin-bottom: 8px; } .home-subtitle { font-size: 16px; margin-bottom: 160px; } /* 有连载宇宙时：轮播条填空间，subtitle 用小间距 */ #page-home.has-universe .home-subtitle { margin-bottom: 36px; } .universe-rail { margin-bottom: 36px; } .universe-card { flex: 0 0 82px; width: 82px; height: 114px; } .universe-card .uc-title { font-size: 9.5px; } .universe-card .uc-ch { font-size: 6.5px; } .universe-card .uc-fin { font-size: 6px; bottom: 5px; right: 4px; } .word-input { font-size: 16px; padding: 0 48px 0 26px; } .input-ornament { font-size: 10px; opacity: 0.4; } .input-ornament.tl { top: 10px; left: 2px; } .input-ornament.tr { top: 10px; right: 2px; } .input-ornament.bl { bottom: 6px; left: 2px; } .input-ornament.br { bottom: 6px; right: 2px; } .input-wrapper { position: relative; padding: 14px 0 12px; } .input-difficulty { display: none; } .style-row { display: flex; gap: 4px; flex-wrap: wrap; } .style-row .style-chip { font-size: 10px; padding: 4px 8px; border-radius: 10px; } .difficulty-row { display: flex; gap: 4px; flex-wrap: wrap; } .difficulty-row .diff-chip { font-size: 10px; padding: 4px 8px; border-radius: 10px; } .ocr-row { margin-bottom: 28px; font-size: 12px; } .ocr-btn { font-size: 12px; padding: 5px 12px; } .generate-btn { position: absolute; right: 2px; bottom: 12px; width: 38px; height: 38px; min-width: auto; padding: 0; border-radius: 10px; border-width: 1.5px; font-size: 16px; letter-spacing: 0; box-shadow: 0 0 12px var(--star-tint-12); gap: 0; background: linear-gradient(135deg, rgba(210,170,100,0.25), rgba(210,170,100,0.1)); color: var(--star-text); border-color: var(--star-tint-35); } .generate-btn::before { display: block; content: '✦'; position: absolute; font-size: 7px; color: var(--star-tint-50); top: 3px; right: 5px; } .generate-btn::after { display: none; } .generate-btn:hover { transform: scale(1.08); box-shadow: 0 0 20px var(--star-tint-20); background: linear-gradient(135deg, rgba(210,170,100,0.35), rgba(210,170,100,0.18)); border-color: var(--star-gold); color: var(--star-text); } .generate-btn .btn-arrow { display: none; } .generate-btn .btn-icon-ink svg { width: 15px; height: 15px; } .generate-btn:active { transform: scale(0.92); } .generate-btn .btn-text { display: none; } .generate-btn.loading { box-shadow: 0 0 16px var(--star-tint-15); transform: none; } .story-container { padding: 16px 16px 100px; } .story-title { font-size: 26px; } .story-subtitle { font-size: 15px; margin-bottom: 14px; } .story-paragraph { font-size: 0.95rem; line-height: 1.75; padding-left: 12px; margin-bottom: 20px; } .story-paragraph[data-idx="0"]::first-letter { font-size: 3.6em; line-height: 0.78; margin: 3px 10px 0 -1px; } .story-paragraph.is-dialogue { padding-left: 24px; } .story-divider { margin-bottom: 24px; } .story-byline { font-size: 12px; } .story-difficulty { flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .story-hint { font-size: 11px; } .story-footer { padding-bottom: env(safe-area-inset-bottom, 0px); } .story-footer-inner { padding: 10px 16px; gap: 6px; } .footer-btn { height: 32px; min-width: 32px; padding: 0 8px; font-size: 11px; } .footer-btn .ico { font-size: 13px; } .read-btn { padding: 6px 12px; font-size: 12px; min-height: 32px; gap: 0; } .history-container { padding: 40px 16px 80px; } .legend-aside { display: none; } .history-layout { flex-direction: column; } .history-title { font-size: 22px; } .history-divider { margin-bottom: 32px; } .history-card-body { padding: 14px 16px; } .history-book-mini { flex: 0 0 62px; width: 62px; height: 82px; } .system-pedestal { flex: 0 0 62px; margin: 12px 0 12px 10px; } .system-card { perspective-origin: 41px 50%; } /* 小屏书心：10px margin + 31px 半宽 */ .history-book-mini .mini-front, .history-book-mini .mini-back { width: 62px; height: 82px; } .history-book-mini .mini-spine { height: 82px; left: 26px; transform: rotateY(-90deg) translateZ(31px); } .history-book-mini .mini-top-edge { width: 62px; transform: rotateX(90deg) translateZ(5px); } .history-book-mini .mini-bottom-edge { width: 62px; transform: rotateX(-90deg) translateZ(5px); } .history-book-mini .mini-right-edge { height: 82px; left: 26px; transform: rotateY(90deg) translateZ(31px); } .history-card-title { font-size: 17px; } .history-card-subtitle { font-size: 13px; } .history-card-vocab { font-size: 12px; overflow-wrap: break-word; word-break: break-word; } .history-card-meta { font-size: 11px; } .history-stats { padding: 16px 12px; margin-bottom: 32px; } .stat-value { font-size: 24px; } .stat-label { font-size: 10px; } .history-card-vocab { font-size: 12px; overflow-wrap: break-word; word-break: break-word; } .scroll-top { bottom: 124px; right: 16px; } .scroll-bottom { bottom: 80px; right: 16px; } .vocab-drawer { height: 75vh; border-radius: 16px 16px 0 0; } .vocab-drawer-header { padding: 10px 18px; gap: 8px; } .vocab-drawer-body { padding: 6px 18px 24px; } .vocab-drawer-title { font-size: 15px; } .vocab-grid { grid-template-columns: 1fr; } .vocab-dashboard { gap: 14px; padding: 12px 14px; } .vocab-dashboard-num { font-size: 32px; } .custom-area { padding: 10px 12px; height: 110px; } .reader-container { padding: 48px 16px; } .reader-container h1 { font-size: 24px; } .reader-container::before { top: 36px; right: 12px; font-size: 10px; } .reader-container::after { bottom: 100px; left: 8px; font-size: 9px; } .reader-textarea { min-height: 260px; font-size: 14px; padding: 16px; } .reader-title-input { font-size: 18px; } .reader-start-btn { padding: 10px 24px; font-size: 13px; } .story-footer-inner { flex-wrap: wrap; } .word-tooltip { font-size: 11px; padding: 5px 10px; max-width: calc(100vw - 16px); white-space: normal; word-break: break-word; } } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ============ 首页魔法书场景 ============ */ #page-home { overflow: hidden; /* 书场景全屏，不滚动 */ background: #0d0b14; background-image: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(88, 60, 140, 0.25), transparent), radial-gradient(ellipse 40% 30% at 70% 20%, rgba(200, 160, 80, 0.08), transparent); } /* 书场景：初始可见，过渡后隐藏 */ .book-scene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.8s ease, visibility 0.8s; background: var(--star-bg); contain: layout style paint; } /* 星空背景放在独立合成层，不影响动画帧率 */ .book-scene::before { content: ''; position: fixed; inset: 0; pointer-events: none; will-change: transform; transform: translateZ(0); background-image: var(--star-sky); } .book-scene.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* 环境光晕 — 暖金 + 紫雾，配合星空 */ .ambient-glow { position: fixed; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, var(--star-tint-08), rgba(130,90,200,0.06) 40%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: pulse-glow 8s ease-in-out infinite; z-index: 0; } @keyframes pulse-glow { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } /* 3D 场景容器 */ .scene { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1600px; /* 适中透视：单一灭点，所有面收敛一致 */ perspective-origin: 50% 50%; /* 灭点正对书心，视角由 .book 姿态负责 */ z-index: 1; } /* 书包裹层：浮动动画（参考魔法书.html，无 hover） */ .book-wrapper { position: relative; width: 640px; height: 860px; transform-style: preserve-3d; will-change: transform; animation: book-float 6s ease-in-out infinite; cursor: var(--cursor-pointer); z-index: 1; } @keyframes book-float { 0%, 100% { transform: translateY(0px) rotateY(-2deg); } 50% { transform: translateY(-18px) rotateY(2deg); } } /* 发光效果（点击时添加 .glowing 类） */ .book-wrapper.glowing .book { filter: brightness(1.4) drop-shadow(0 0 60px rgba(210, 170, 100, 0.5)); } .book-wrapper.glowing .cover-front { box-shadow: inset 0 1px 3px rgba(255, 215, 140, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 8px 60px rgba(210, 170, 100, 0.25), 0 0 120px rgba(210, 170, 100, 0.1); } /* ============================================ 书籍呼吸发光态 — 角色来信信号 暖色烛光呼吸，不是霓虹。书安静地发着光等你。 ============================================ */ .book-wrapper.book-has-message .book { animation: book-message-breath 4.5s ease-in-out infinite; } @keyframes book-message-breath { 0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(200, 150, 70, 0.15)); } 50% { filter: brightness(1.08) drop-shadow(0 0 50px rgba(210, 160, 80, 0.35)); } } .book-wrapper.book-has-message .cover-front { animation: cover-message-glow 4.5s ease-in-out infinite; } @keyframes cover-message-glow { 0%, 100% { box-shadow: inset 0 0 80px rgba(0,0,0,0.5), inset 0 2px 4px rgba(220,180,100,0.06), 0 6px 14px rgba(0,0,0,0.55), 0 14px 40px rgba(0,0,0,0.6), 0 8px 60px rgba(0,0,0,0.7), 0 0 30px rgba(190, 140, 60, 0.08); } 50% { box-shadow: inset 0 0 80px rgba(0,0,0,0.5), inset 0 2px 4px rgba(220,180,100,0.12), 0 6px 14px rgba(0,0,0,0.55), 0 14px 40px rgba(0,0,0,0.6), 0 8px 60px rgba(0,0,0,0.7), 0 0 80px rgba(200, 150, 70, 0.2), 0 0 140px rgba(190, 140, 60, 0.06); } } /* 发光时书脊也透出暖光 */ .book-wrapper.book-has-message .spine { animation: spine-message-glow 4.5s ease-in-out infinite; } @keyframes spine-message-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* 底部提示文字变化 */ .book-wrapper.book-has-message ~ .footer-text { animation: footer-pulse 4.5s ease-in-out infinite; } @keyframes footer-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } } /* ============================================ 施法态 — 输入页迷你旋转书：加速转动 + 熠熠生辉 暖紫色光辉，像被点燃的魔法书 ============================================ */ /* 加速转动：6s → 1.2s（5倍速），浮动幅度加大 */ .rotating-book.casting { animation: miniBookSpinFast 1s linear infinite; } @keyframes miniBookSpinFast { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* 封面辉光：brightness 1.45→1.75 脉动，双层亮紫 drop-shadow 呼吸 */ .rotating-book.casting .mini-front, .rotating-book.casting .mini-back { animation: miniFrontCastingGlow 1s ease-in-out infinite; } @keyframes miniFrontCastingGlow { 0%, 100% { box-shadow: inset 0 1px 3px rgba(160, 100, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(140, 80, 255, 0.45), 0 0 60px rgba(130, 70, 255, 0.25); filter: brightness(1.45) drop-shadow(0 0 20px rgba(160, 100, 255, 0.4)); } 50% { box-shadow: inset 0 1px 4px rgba(190, 130, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 6px 30px rgba(160, 100, 255, 0.65), 0 0 90px rgba(150, 90, 255, 0.4); filter: brightness(1.75) drop-shadow(0 0 35px rgba(180, 120, 255, 0.6)); } } /* 书脊同步发光 */ .rotating-book.casting .mini-spine { animation: miniSpineCastingGlow 1s ease-in-out infinite; } @keyframes miniSpineCastingGlow { 0%, 100% { filter: brightness(1.45); } 50% { filter: brightness(1.75); } } /* 徽记同步发光 */ .rotating-book.casting .mini-emblem { animation: miniEmblemCastingGlow 1s ease-in-out infinite; } @keyframes miniEmblemCastingGlow { 0%, 100% { text-shadow: 0 0 6px rgba(160, 100, 255, 0.55); } 50% { text-shadow: 0 0 14px rgba(190, 130, 255, 0.95); } } /* ============================================ 来信展开覆盖层 — 点击发光书后出现 一张从书页中浮现的羊皮纸信笺 ============================================ */ .book-letter-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(15, 8, 25, 0.7) 0%, rgba(8, 4, 15, 0.88) 70% ); opacity: 0; transition: opacity 0.5s ease; cursor: var(--cursor-pointer); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .book-letter-overlay.blo-visible { opacity: 1; } /* 信笺页面 */ .blo-page { position: relative; width: 380px; max-width: 85vw; padding: 36px 32px 28px; background: linear-gradient(168deg, #e8dcc0 0%, #e0d2b0 30%, #e5d8bc 60%, #ddd0ac 100% ); border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4), 0 0 60px rgba(200, 150, 70, 0.08), inset 0 1px 0 rgba(255,250,235,0.4); transform: translateY(20px) scale(0.96); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); font-family: 'Iowan Old Style', 'Charter', Georgia, 'Noto Serif SC', serif; } .book-letter-overlay.blo-visible .blo-page { transform: translateY(0) scale(1); } /* 蜡封 */ .blo-seal { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #b85528 0%, #9a4220 40%, #722c14 75%, #4a1a08 100% ); box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,200,150,0.25); display: flex; align-items: center; justify-content: center; } .blo-seal::after { content: '✦'; font-size: 11px; color: rgba(255, 225, 180, 0.55); text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .blo-sender { text-align: center; font-size: 13px; color: #7a6a4e; letter-spacing: 0.06em; font-style: italic; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(160, 135, 85, 0.15); } .blo-body { font-size: 14.5px; line-height: 2.1; color: #5c4f3a; letter-spacing: 0.02em; text-indent: 2em; margin-bottom: 16px; } .blo-sign { text-align: right; font-family: 'Georgia', 'Palatino', serif; font-size: 18px; font-style: italic; color: #8a7650; letter-spacing: 0.08em; margin-bottom: 14px; } .blo-footer { text-align: center; font-size: 10.5px; font-family: var(--font-sans); color: rgba(120, 105, 75, 0.45); letter-spacing: 0.04em; font-style: italic; padding-top: 10px; border-top: 1px solid rgba(160, 135, 85, 0.1); } .blo-hint { text-align: center; font-size: 10px; font-family: var(--font-sans); color: rgba(120, 105, 75, 0.3); letter-spacing: 0.1em; margin-top: 14px; } /* 3D 书：统一六面体坐标系，所有面共享单一 perspective 灭点，杜绝“不可能物体” 姿态：rotateX(6°) 微俯视露出顶切口 + rotateY(-14°) 左旋露出书脊、右切口被封面遮挡 THK=44 厚度，半厚 22。浮动只在 wrapper 做 translateY，姿态恒定不与浮动复合。*/ .book { position: absolute; left: 50%; top: 50%; width: 640px; height: 860px; margin-left: -320px; margin-top: -430px; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-14deg); } /* 封面正面：z=+22，朝镜头 */ .cover-front { width: 640px; height: 860px; background: radial-gradient(ellipse 110% 50% at 50% 30%, rgba(80, 45, 120, 0.2), transparent), radial-gradient(ellipse 80% 60% at 50% 80%, rgba(20, 10, 35, 0.5), transparent), linear-gradient(155deg, #2a1a3a 0%, #3a224a 20%, #4c2e60 40%, #3a224a 65%, #2c1a3a 85%, #1a0e28 100%); border-radius: 18px 10px 10px 18px; box-shadow: inset 0 0 80px rgba(0,0,0,0.5), inset 0 2px 4px rgba(220,180,100,0.06), 0 6px 14px rgba(0,0,0,0.55), 0 14px 40px rgba(0,0,0,0.6), 0 8px 60px rgba(0,0,0,0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 50px; position: absolute; left: 50%; top: 50%; margin-left: -320px; margin-top: -430px; overflow: hidden; transition: box-shadow 0.6s ease; transform: translate3d(0, 0, 22px); /* 封面前表面 z=+22 */ } .cover-front::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 60px, rgba(255, 215, 140, 0.03) 60px, rgba(255, 215, 140, 0.03) 61px ); pointer-events: none; } /* 皮革纹理（参考魔法书.html，用 ::after 叠加，不动 ::before 疏线）*/ .cover-front::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: 0.06; mix-blend-mode: overlay; pointer-events: none; z-index: 1; } /* 封面装饰边框 */ .cover-border { position: absolute; inset: 20px; border: 2px solid rgba(210, 170, 100, 0.3); border-radius: 12px; } .cover-border::before, .cover-border::after { content: '✦'; position: absolute; top: -14px; color: rgba(210, 170, 100, 0.5); font-size: 20px; } .cover-border::before { left: 30px; } .cover-border::after { right: 30px; } .cover-border .bottom-left, .cover-border .bottom-right { position: absolute; bottom: -14px; content: '✦'; color: rgba(210, 170, 100, 0.5); font-size: 20px; } .cover-border .bottom-left { left: 30px; } .cover-border .bottom-right { right: 30px; } /* 角落装饰 */ .corner-ornament { position: absolute; width: 40px; height: 40px; border-color: rgba(210, 170, 100, 0.3); border-style: solid; } .corner-ornament.tl { top: 30px; left: 30px; border-width: 2px 0 0 2px; } .corner-ornament.tr { top: 30px; right: 30px; border-width: 2px 2px 0 0; } .corner-ornament.bl { bottom: 30px; left: 30px; border-width: 0 0 2px 2px; } .corner-ornament.br { bottom: 30px; right: 30px; border-width: 0 2px 2px 0; } /* 中央徽标 —— 高级感：多环 + 金属材质 + 内发光 + ◇ 微旋呼吸 */ .emblem { width: 120px; height: 120px; margin-bottom: 32px; position: relative; } /* 外层呼吸光晕 */ .emblem::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(210,170,100,0.14) 0%, transparent 70%); animation: emblem-breath 4s ease-in-out infinite; pointer-events: none; } @keyframes emblem-breath { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .emblem-circle { width: 100%; height: 100%; border: 2px solid rgba(210, 170, 100, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: radial-gradient(circle at 35% 30%, rgba(255,220,160,0.08), transparent 60%), radial-gradient(circle at 50% 50%, rgba(80,45,120,0.25), transparent 70%); box-shadow: inset 0 0 18px var(--star-tint-12), inset 0 1px 2px rgba(255,220,160,0.18), 0 0 14px rgba(210,170,100,0.1); } /* 第一道外环（细，带 8 刻度感，用 conic 做断续）*/ .emblem-circle::before { content: ''; position: absolute; inset: -8px; border: 1px solid rgba(210, 170, 100, 0.22); border-radius: 50%; background: repeating-conic-gradient(from -5deg, rgba(210,170,100,0.32) 0deg 10deg, transparent 10deg 45deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: emblem-rotate 22s linear infinite; } @keyframes emblem-rotate { to { transform: rotate(360deg); } } /* 第二道外环（更外、更淡，反向慢旋）*/ .emblem-circle::after { content: ''; position: absolute; inset: -16px; border: 1px solid rgba(210, 170, 100, 0.1); border-radius: 50%; border-style: dashed; animation: emblem-rotate-rev 36s linear infinite; } @keyframes emblem-rotate-rev { to { transform: rotate(-360deg); } } .emblem-circle .inner { width: 80px; height: 80px; border: 1px solid rgba(210, 170, 100, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: rgba(255, 230, 170, 1); background: radial-gradient(circle at 50% 45%, rgba(60,40,90,0.5), rgba(20,12,35,0.6)); box-shadow: inset 0 0 12px rgba(210,170,100,0.18), inset 0 1px 1px rgba(255,220,160,0.2), 0 0 10px var(--star-tint-08); text-shadow: 0 0 8px rgba(255,235,180,0.9), 0 0 18px rgba(255,210,140,0.7), 0 0 32px var(--star-tint-45); animation: emblem-pulse 3.5s ease-in-out infinite; } @keyframes emblem-pulse { 0%, 100% { text-shadow: 0 0 8px rgba(255,235,180,0.9), 0 0 18px rgba(255,210,140,0.7), 0 0 32px var(--star-tint-45); } 50% { text-shadow: 0 0 12px rgba(255,245,200,1), 0 0 26px rgba(255,220,150,0.9), 0 0 48px rgba(225,180,110,0.6); } } /* ◇ 内核光点 */ .emblem-circle .inner::before { content: ''; position: absolute; width: 6px; height: 6px; top: 18%; left: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,200,0.7), transparent 70%); pointer-events: none; } /* 书名 */ .book-title { font-family: 'Fraunces', 'Georgia', serif; font-size: 48px; color: var(--star-text); letter-spacing: 0.16em; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); margin-bottom: 12px; line-height: 1.2; } .book-author { font-size: 15px; color: rgba(210, 170, 100, 0.5); letter-spacing: 0.18em; text-align: center; line-height: 1.5; max-width: 340px; } /* 书脊：左侧面。元素 44×860 居中后中心在 .book 中心， translate3d(-320,0,0) 推到左缘 x=-320，rotateY(-90deg) 面朝 -X 外。 与封面共享 .book 姿态，单一灭点。*/ .spine { width: 44px; height: 860px; background: /* 弧面明暗：左缘高光 → 中间亮 → 右缘暗，模拟书脊圆弧外凸 */ linear-gradient(90deg, rgba(255,220,160,0.1) 0%, transparent 20%, transparent 75%, rgba(0,0,0,0.35) 100%), linear-gradient(90deg, #1a0f28 0%, #2e1c42 28%, #3f2557 50%, #2e1c42 78%, #1a0f28 100%); position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -430px; transform: translate3d(-320px, 0, 0) rotateY(-90deg); border-radius: 14px 0 0 14px; /* 左侧外缘大圆弧，像真实书脊弧面 */ box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55), inset 2px 0 4px rgba(255,220,160,0.12), inset -3px 0 6px rgba(0,0,0,0.4), -3px 0 10px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; } .spine-text { writing-mode: vertical-rl; font-family: 'Fraunces', 'Georgia', serif; font-size: 14px; color: rgba(210, 170, 100, 0.4); letter-spacing: 0.3em; } .spine-rib { position: absolute; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, rgba(210, 170, 100, 0.08), rgba(210, 170, 100, 0.15), rgba(210, 170, 100, 0.08)); } .spine-rib:nth-child(2) { top: 80px; } .spine-rib:nth-child(3) { bottom: 80px; } /* 页边：统一六面体坐标，所有面 translate3d 到六面体面中心 + 单次旋转，共享 .book 单一灭点 - top 顶面：中心 (0,-430,0)，面朝 -Y 上外，尺寸 640×44 - bottom/right 在背面侧（俯视左旋被封面遮挡），display:none */ .top-edge { width: 640px; height: 44px; background: repeating-linear-gradient(90deg, #d6c9a8 0px, #d6c9a8 18px, #c8bb98 18px, #c8bb98 36px, #bfb28e 36px, #bfb28e 54px, #b8ab86 54px, #b8ab86 72px); position: absolute; left: 50%; top: 50%; margin-left: -320px; margin-top: -22px; transform: translate3d(0, -430px, 0) rotateX(90deg); border-radius: 12px 12px 0 0; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.12); overflow: hidden; } .top-edge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.06)); pointer-events: none; } .top-edge .page-line { display: none; } /* 底切口在背面侧（俯视被遮挡），隐藏；右切口可见（俯视左旋露出右侧一线米色书口）*/ .bottom-edge { display: none; } /* 右切口：右侧面，中心 (320,0,0)，面朝 +X，尺寸 44×860。 书页沿垂直堆叠 → 180deg，俯视左旋时右侧露出一线米色书口 */ .right-edge { width: 44px; height: 860px; background: repeating-linear-gradient(180deg, #d6c9a8 0px, #d6c9a8 18px, #c8bb98 18px, #c8bb98 36px, #bfb28e 36px, #bfb28e 54px, #b8ab86 54px, #b8ab86 72px); position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -430px; transform: translate3d(320px, 0, 0) rotateY(90deg); border-radius: 0 8px 8px 0; box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.08); overflow: hidden; } /* 书页厚度 */ .page-peek { position: absolute; top: 6px; left: 8px; right: 8px; bottom: 6px; border-radius: 10px 4px 4px 10px; background: linear-gradient(150deg, #e6dabc, #d8cbac); z-index: -1; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06); } .page-peek-2 { position: absolute; top: 12px; left: 14px; right: 14px; bottom: 12px; border-radius: 10px 4px 4px 10px; background: linear-gradient(150deg, #ded2b4, #d0c4a4); z-index: -2; box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.05); } /* 火花粒子 */ .sparkles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; } .sparkle { position: absolute; width: 3px; height: 3px; background: rgba(210, 170, 100, 0.4); border-radius: 50%; animation: sparkle-drift 8s ease-in-out infinite; } @keyframes sparkle-drift { 0%, 100% { transform: translateY(0) scale(0); opacity: 0; } 20% { opacity: 0.6; transform: translateY(-20px) scale(1); } 40% { opacity: 0; transform: translateY(-40px) scale(0); } 100% { opacity: 0; transform: translateY(-80px) scale(0); } } .sparkle:nth-child(1) { left: 15%; top: 30%; animation-delay: 0s; } .sparkle:nth-child(2) { left: 25%; top: 60%; animation-delay: 1.2s; } .sparkle:nth-child(3) { right: 20%; top: 40%; animation-delay: 2.5s; } .sparkle:nth-child(4) { right: 30%; top: 20%; animation-delay: 0.6s; } .sparkle:nth-child(5) { left: 10%; top: 75%; animation-delay: 3.8s; } .sparkle:nth-child(6) { right: 15%; top: 70%; animation-delay: 1.8s; } .sparkle:nth-child(7) { left: 40%; top: 25%; animation-delay: 4.5s; } .sparkle:nth-child(8) { right: 40%; top: 55%; animation-delay: 2.2s; } .sparkle:nth-child(9) { left: 50%; top: 80%; animation-delay: 3.2s; } .sparkle:nth-child(10) { right: 10%; top: 35%; animation-delay: 5.0s; } .sparkle:nth-child(11) { left: 65%; top: 45%; animation-delay: 0.9s; } .sparkle:nth-child(12) { right: 55%; top: 15%; animation-delay: 4.1s; } /* 底部提示文字 */ .footer-text { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); font-family: 'Fraunces', 'Georgia', serif; font-size: 13px; color: rgba(210, 170, 100, 0.25); letter-spacing: 0.25em; text-align: center; pointer-events: none; z-index: 3; transition: opacity 0.5s ease; } .book-scene.hidden .footer-text { opacity: 0; } /* ===== 输入表单：延续星空魔法书风格 ===== */ .home-input-form { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease 0.3s, transform 0.6s var(--ease-spring) 0.3s; pointer-events: none; background: var(--star-bg); position: fixed; inset: 0; z-index: 99; overflow-y: auto; contain: layout style paint; } /* 星空背景放在独立合成层 */ .home-input-form::before { content: ''; position: fixed; inset: 0; pointer-events: none; will-change: transform; transform: translateZ(0); background-image: var(--star-sky); } .home-input-form.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* 当书场景已关闭、输入表单可见时，隐藏书场景的背景干扰 */ .book-scene.hidden { opacity: 0; visibility: hidden; pointer-events: none; z-index: -1; } /* 输入表单内：暗色主题覆盖 */ .home-input-form .home-container { max-width: 720px; margin: 0 auto; padding: 80px 32px 64px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; } /* 暗色系标题 */ .home-input-form .home-title { font-family: var(--font-book); font-size: 44px; font-weight: 700; color: var(--star-text); letter-spacing: 0.06em; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .home-input-form .home-subtitle { font-family: var(--font-book); font-size: 17px; color: rgba(210,170,100,0.5); letter-spacing: 0.1em; margin-bottom: 56px; } /* 暗色系词汇云 */ .home-input-form .home-words-cloud { opacity: 0.12; } .home-input-form .home-words-cloud .cloud-word { color: rgba(210,170,100,0.25); } /* ===== 暗色系输入框（魔法书内页质感） ===== */ .home-input-form .input-wrapper { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0; width: 100%; padding: 22px 24px 18px; margin-bottom: 10px; background: linear-gradient(135deg, #1a1525 0%, #1f1a30 40%, #231e35 100%); border: 1.5px solid rgba(210,170,100,0.2); border-radius: 4px; box-shadow: inset 0 1px 6px rgba(0,0,0,0.3), 0 4px 24px rgba(0,0,0,0.4); animation: inputIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s both; } /* 输入框四角装饰 */ .home-input-form .input-wrapper::before, .home-input-form .input-wrapper::after { content: '✦'; position: absolute; color: rgba(210,170,100,0.25); font-size: 10px; line-height: 1; pointer-events: none; } .home-input-form .input-wrapper::before { top: 6px; left: 8px; } .home-input-form .input-wrapper::after { bottom: 6px; right: 8px; } .home-input-form .input-wrapper:focus-within::before, .home-input-form .input-wrapper:focus-within::after { color: rgba(210,170,100,0.5); } .home-input-form .input-wrapper:focus-within { border-color: rgba(210,170,100,0.4); box-shadow: inset 0 1px 6px rgba(0,0,0,0.3), 0 4px 24px rgba(0,0,0,0.4), 0 0 40px var(--star-tint-08); } /* 装饰符文 */ .home-input-form .input-ornament { flex-shrink: 0; font-size: 18px; color: rgba(210,170,100,0.3); margin-right: 14px; margin-top: -2px; user-select: none; transition: color 0.3s ease; } .home-input-form .input-wrapper:focus-within .input-ornament { color: rgba(210,170,100,0.6); } /* 输入框本身 */ .home-input-form .word-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; font-size: 20px; font-family: var(--font-book); font-weight: 400; color: var(--star-text); outline: none; line-height: 1.4; caret-color: #d2a464; } .home-input-form .word-input::placeholder { color: var(--star-tint-35); font-style: italic; font-size: 0.9em; } /* 难度指示器 */ .home-input-form .input-difficulty { color: var(--star-tint-35); } .home-input-form .input-difficulty .mini-track { background: rgba(210,170,100,0.1); } .home-input-form .input-difficulty .mini-fill { background: rgba(210,170,100,0.5); } /* ===== 暗色系 style 标签（第二步，输入后才出现） ===== */ .home-input-form .style-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 36px; animation: inputIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.7s both; /* 默认隐藏，输入单词后才显示 */ opacity: 0; transform: translateY(12px); max-height: 0; overflow: hidden; transition: opacity 0.4s ease, transform 0.4s var(--ease-spring), max-height 0.4s ease, margin-bottom 0.4s ease; pointer-events: none; } /* 当用户输入了单词，JS 加上 .words-entered */ .home-input-form .style-row.words-entered { opacity: 1; transform: translateY(0); max-height: 200px; pointer-events: auto; } .home-input-form .style-label { color: var(--star-tint-35); letter-spacing: 0.15em; font-size: 11px; font-weight: 500; font-family: var(--font-book); padding-top: 5px; white-space: nowrap; } .home-input-form .style-tags { display: flex; flex-wrap: wrap; gap: 8px; } .home-input-form .style-tag { display: inline-block; padding: 5px 14px 4px; border: 1px solid rgba(210,170,100,0.18); border-radius: 2px; background: rgba(210,170,100,0.03); color: rgba(210,170,100,0.5); font-family: var(--font-book); font-size: 12px; font-weight: 400; cursor: var(--cursor-pointer); transition: all 0.3s ease; letter-spacing: 0.05em; user-select: none; position: relative; } .home-input-form .style-tag:hover { border-color: var(--star-tint-45); color: rgba(210,170,100,0.85); background: var(--star-tint-06); box-shadow: 0 0 12px rgba(210,170,100,0.05); } .home-input-form .style-tag.active { border-color: rgba(210,170,100,0.55); color: var(--star-text); background: rgba(210,170,100,0.10); font-weight: 600; box-shadow: 0 2px 12px var(--star-tint-08), 0 0 20px rgba(210,170,100,0.04); } .home-input-form .style-tag.active::before { content: '✦'; position: absolute; top: -4px; right: -4px; font-size: 8px; color: rgba(210,170,100,0.5); } /* ===== 暗色系难度标签 ===== */ .home-input-form .difficulty-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; animation: inputIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.7s both; opacity: 0; transform: translateY(12px); max-height: 0; overflow: hidden; transition: opacity 0.4s ease, transform 0.4s var(--ease-spring), max-height 0.4s ease, margin-bottom 0.4s ease; pointer-events: none; } .home-input-form .difficulty-row.words-entered { opacity: 1; transform: translateY(0); max-height: 200px; pointer-events: auto; } .home-input-form .difficulty-tags { display: flex; gap: 8px; } .home-input-form .difficulty-tag { display: inline-block; padding: 5px 16px 4px; border: 1px solid rgba(210,170,100,0.18); border-radius: 2px; background: rgba(210,170,100,0.03); color: rgba(210,170,100,0.5); font-family: var(--font-book); font-size: 12px; font-weight: 400; cursor: var(--cursor-pointer); transition: all 0.3s ease; letter-spacing: 0.05em; user-select: none; position: relative; } .home-input-form .difficulty-tag:hover { border-color: var(--star-tint-45); color: rgba(210,170,100,0.85); background: var(--star-tint-06); box-shadow: 0 0 12px rgba(210,170,100,0.05); } .home-input-form .difficulty-tag.active { border-color: rgba(210,170,100,0.55); color: var(--star-text); background: rgba(210,170,100,0.10); font-weight: 600; box-shadow: 0 2px 12px var(--star-tint-08), 0 0 20px rgba(210,170,100,0.04); } /* ===== 暗色系题外话（笔记本） ===== */ .home-input-form .custom-section { width: 100%; animation: inputIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.9s both; /* 也默认隐藏 */ opacity: 0; transform: translateY(12px); max-height: 0; overflow: hidden; transition: opacity 0.4s ease, transform 0.4s var(--ease-spring), max-height 0.4s ease; pointer-events: none; } .home-input-form .custom-section.words-entered { opacity: 1; transform: translateY(0); max-height: 400px; pointer-events: auto; } .home-input-form .custom-header { color: rgba(210,170,100,0.5); } .home-input-form .custom-header:hover { color: rgba(210,170,100,0.8); } .home-input-form .custom-header-icon { font-size: 12px; color: rgba(210,170,100,0.4); margin-right: 4px; } .home-input-form .custom-header-title { color: rgba(210,170,100,0.6); font-family: var(--font-book); } .home-input-form .custom-header-hint { color: rgba(210,170,100,0.3); } .home-input-form .custom-header-chevron { color: rgba(210,170,100,0.3); } .home-input-form .custom-paper { border-color: var(--star-tint-15); border-radius: 2px; background: linear-gradient(135deg, rgba(26,21,37,0.9), rgba(31,26,48,0.9)), repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(210,170,100,0.03) 27px, rgba(210,170,100,0.03) 28px); position: relative; } /* 羊皮纸四角符文 */ .home-input-form .custom-paper::before { content: '✦'; position: absolute; top: 6px; left: 8px; font-size: 9px; color: rgba(210,170,100,0.2); line-height: 1; background: none; border: none; width: auto; height: auto; pointer-events: none; } .home-input-form .custom-area { color: var(--star-text); } .home-input-form .custom-area::placeholder { color: rgba(210,170,100,0.3); } /* 装订孔 — 暗色系 */ .home-input-form .custom-paper::after { border-color: var(--star-tint-06); background: color-mix(in srgb, var(--star-bg) 60%, transparent); } /* ===== 暗色系生成按钮（魔法封印） ===== */ .home-input-form .generate-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px 9px; border: 1.5px solid rgba(210,170,100,0.4); border-radius: 2px; background: transparent; color: rgba(210,170,100,0.7); font-family: var(--font-book); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; cursor: var(--cursor-pointer); position: relative; white-space: nowrap; margin-left: 14px; overflow: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s var(--ease-spring), border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .home-input-form .generate-btn .btn-sigil { font-size: 14px; color: rgba(210,170,100,0.6); line-height: 1; } .home-input-form .generate-btn.words-entered { opacity: 1; transform: translateY(0); pointer-events: auto; } .home-input-form .generate-btn::before { background: rgba(210,170,100,0.6); } .home-input-form .generate-btn:hover { color: var(--star-text); border-color: rgba(210,170,100,0.7); background: var(--star-tint-06); box-shadow: 0 0 20px rgba(210,170,100,0.1), 0 0 40px rgba(210,170,100,0.04); } .home-input-form .generate-btn:active { transform: translateY(1px) scale(0.97); box-shadow: 0 0 8px var(--star-tint-08); } .home-input-form .generate-btn .btn-text, .home-input-form .generate-btn .btn-arrow, .home-input-form .generate-btn .btn-sigil { position: relative; z-index: 1; } /* Loading 状态 */ .home-input-form .generate-btn.loading { border-color: rgba(210,170,100,0.3); color: rgba(210,170,100,0.4); transform: none; pointer-events: none; } .home-input-form .generate-btn.loading::before { transform: scaleX(0); } .home-input-form .generate-btn.loading .btn-text { opacity: 0.5; } .home-input-form .generate-btn.loading .btn-arrow { display: none; } /* ===== 仪式感：施法中表单合拢 ===== */ /* 点击 Write 后，Style / Depth / 密咒 如书页般依次合拢， 输入框微微暗下，按钮封印旋转——像在封缄一封信 */ .home-input-form.casting .style-row.words-entered { opacity: 0; transform: translateY(-8px); max-height: 0; margin-bottom: 0; pointer-events: none; } .home-input-form.casting .difficulty-row.words-entered { opacity: 0; transform: translateY(-8px); max-height: 0; margin-bottom: 0; pointer-events: none; transition-delay: 0.08s; } .home-input-form.casting .custom-section.words-entered { opacity: 0; transform: translateY(-8px); max-height: 0; pointer-events: none; transition-delay: 0.16s; } /* 输入框微暗——像蜡烛被吹灭后余温尚存 */ .home-input-form.casting .word-input { opacity: 0.5; transition: opacity 0.6s ease 0.2s; } .home-input-form.casting .input-ornament { opacity: 0.2; transition: opacity 0.6s ease 0.2s; } /* 按钮：封印旋转 + 暖光呼吸 */ .home-input-form.casting .generate-btn.loading { border-color: rgba(210,170,100,0.25); box-shadow: 0 0 24px var(--star-tint-08); animation: btn-seal-breath 3s ease-in-out infinite; } .home-input-form.casting .generate-btn.loading .btn-sigil { animation: btn-sigil-seal 1.2s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes btn-sigil-seal { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } } @keyframes btn-seal-breath { 0%, 100% { box-shadow: 0 0 16px var(--star-tint-06); } 50% { box-shadow: 0 0 28px var(--star-tint-12); } } /* ===== 暗色系 casting-bar 状态文字 ===== */ .home-input-form .casting-text { color: rgba(210,170,100,0.55); } /* ===== 暗色系宇宙轮播 ===== */ .home-input-form .universe-rail { background: rgba(210,170,100,0.04); border-color: var(--star-tint-15); } .home-input-form .universe-tab { color: rgba(210,170,100,0.4); } .home-input-form .universe-tab.active { color: rgba(210,170,100,0.7); } /* ===== 暗色系 footer ===== */ .home-input-form .site-footer { color: var(--star-tint-15); } /* 书场景隐藏后，page-home 恢复滚动 */ #page-home.book-opened { overflow: auto; /* 暗色兜底，防止过渡期间露出亮色 */ background: var(--star-bg); } /* ===== 360°旋转迷你书 ===== */ .rotating-book-stage { perspective: 600px; margin-bottom: 28px; display: flex; justify-content: center; animation: fadeIn 0.6s ease 0.5s both; } .rotating-book-stage { perspective: 600px; margin-bottom: 28px; display: flex; justify-content: center; animation: fadeIn 0.6s ease 0.5s both; will-change: transform; transform: translateZ(0); } .rotating-book { width: 120px; height: 160px; position: relative; transform-style: preserve-3d; will-change: transform; transform: translateZ(0); animation: miniBookSpin 6s linear infinite; } @keyframes miniBookSpin { 0% { transform: rotateY(0deg) translateY(0px); } 14% { transform: rotateY(45deg) translateY(-5px); } 28% { transform: rotateY(90deg) translateY(0px); } 39% { transform: rotateY(135deg) translateY(-5px); } 50% { transform: rotateY(180deg) translateY(0px); } 61% { transform: rotateY(225deg) translateY(-5px); } 72% { transform: rotateY(270deg) translateY(0px); } 86% { transform: rotateY(315deg) translateY(-5px); } 100% { transform: rotateY(360deg) translateY(0px); } } /* — 封面正面 — */ .mini-front { position: absolute; width: 120px; height: 160px; top: 0; left: 0; backface-visibility: hidden; background: linear-gradient(135deg, #2b1e3a 0%, #3a2848 40%, #4c355c 70%, #2b1e3a 100%); border-radius: 8px 3px 3px 8px; box-shadow: inset 0 1px 3px rgba(255, 215, 140, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; overflow: hidden; transform: translateZ(8px); } .mini-front::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,215,140,0.03) 28px, rgba(255,215,140,0.03) 29px); pointer-events: none; } /* 封面装饰边框 */ .mini-cover-border { position: absolute; inset: 8px; border: 1px solid rgba(210,170,100,0.25); border-radius: 5px; } /* 封面徽章 */ .mini-emblem { width: 28px; height: 28px; margin-bottom: 6px; border: 1.5px solid rgba(210,170,100,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .mini-emblem::before { content: ''; position: absolute; inset: -4px; border: 1px solid var(--star-tint-15); border-radius: 50%; } .mini-emblem span { font-size: 10px; color: rgba(210,170,100,0.7); } /* 封面标题 */ .mini-title { font-family: var(--font-book); font-size: 11px; color: var(--star-text); letter-spacing: 0.12em; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } /* — 封面背面 — */ .mini-back { position: absolute; width: 120px; height: 160px; top: 0; left: 0; backface-visibility: hidden; transform: rotateY(180deg) translateZ(8px); background: linear-gradient(135deg, #221830 0%, #2b1e3a 40%, #352845 70%, #221830 100%); border-radius: 3px 8px 8px 3px; box-shadow: inset 0 1px 2px rgba(255,215,140,0.08), 0 4px 20px rgba(0,0,0,0.3); overflow: hidden; } .mini-back::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,215,140,0.02) 28px, rgba(255,215,140,0.02) 29px); pointer-events: none; } .mini-back-border { position: absolute; inset: 10px; border: 1px solid var(--star-tint-15); border-radius: 6px; } /* — 书脊 — */ .mini-spine { position: absolute; width: 16px; height: 160px; top: 0; left: 52px; backface-visibility: hidden; transform: rotateY(-90deg) translateZ(60px); background: linear-gradient(90deg, #1a1228, #2b1e3a 40%, #3a2848 70%, #2b1e3a); border-radius: 3px 0 0 3px; display: flex; align-items: center; justify-content: center; } .mini-spine-text { writing-mode: vertical-rl; font-family: var(--font-book); font-size: 8px; color: rgba(210,170,100,0.4); letter-spacing: 0.2em; } /* — 页边（上/下/右） — */ .mini-top-edge { position: absolute; width: 120px; height: 16px; top: 0; left: 0; backface-visibility: hidden; transform: rotateX(90deg) translateZ(8px); background: linear-gradient(180deg, #d4c8a8, #c4b898, #b8ac90); border-radius: 6px 6px 0 0; } .mini-bottom-edge { position: absolute; width: 120px; height: 16px; bottom: 0; left: 0; backface-visibility: hidden; transform: rotateX(-90deg) translateZ(8px); background: linear-gradient(0deg, #d4c8a8, #c4b898, #b8ac90); border-radius: 0 0 6px 6px; } .mini-right-edge { position: absolute; width: 16px; height: 160px; top: 0; left: 52px; backface-visibility: hidden; transform: rotateY(90deg) translateZ(60px); background: linear-gradient(270deg, #d4c8a8, #c4b898, #b8ac90); border-radius: 0 4px 4px 0; } /* ===== 3D羊皮纸 TIPS 弹跳提示（loading时出现） ===== */ .parchment-tips { position: fixed; right: 40px; top: 50%; transform: translateY(-50%); perspective: 800px; z-index: 120; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .parchment-tips.visible { opacity: 1; pointer-events: none; } .parchment-3d { width: 200px; position: relative; transform-style: preserve-3d; animation: parchmentFloat 3s ease-in-out infinite; } @keyframes parchmentFloat { 0%, 100% { transform: rotateX(2deg) rotateY(-5deg) translateY(0); } 50% { transform: rotateX(1deg) rotateY(-3deg) translateY(-6px); } } /* 弹跳入场动画 */ .parchment-tips.visible .parchment-3d { animation: parchmentBounceIn 0.6s var(--ease-bounce) forwards, parchmentFloat 3s ease-in-out 0.6s infinite; } @keyframes parchmentBounceIn { 0% { transform: rotateX(15deg) rotateY(-20deg) translateY(40px) scale(0.7); opacity: 0; } 60% { transform: rotateX(3deg) rotateY(-5deg) translateY(-8px) scale(1.02); opacity: 1; } 80% { transform: rotateX(2deg) rotateY(-4deg) translateY(4px) scale(0.98); } 100% { transform: rotateX(2deg) rotateY(-5deg) translateY(0) scale(1); } } /* TIPS 切换时的微弹跳 */ .parchment-3d.tip-hop { animation: parchmentHop 0.35s var(--ease-bounce); } @keyframes parchmentHop { 0%, 100% { transform: rotateX(2deg) rotateY(-5deg) translateY(0); } 40% { transform: rotateX(4deg) rotateY(-8deg) translateY(-10px); } } .parchment-face { position: relative; border-radius: 3px; } .parchment-front { width: 200px; min-height: 160px; background: linear-gradient(135deg, #1a1525 0%, #1f1a30 40%, #231e35 100%); border: 1.5px solid rgba(210,170,100,0.2); border-radius: 3px; padding: 32px 20px 28px; box-shadow: inset 0 1px 6px rgba(0,0,0,0.3), 4px 8px 24px rgba(0,0,0,0.5), 0 0 40px rgba(210,170,100,0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateZ(4px); } .parchment-back { position: absolute; inset: 0; background: linear-gradient(135deg, #14102a, #1a1525 40%, #221e38); border: 1px solid rgba(210,170,100,0.1); border-radius: 3px; transform: rotateY(180deg) translateZ(4px); backface-visibility: hidden; } /* 上下卷轴装饰 */ .parchment-scroll-top, .parchment-scroll-bottom { width: 80%; height: 3px; background: linear-gradient(to right, transparent, rgba(210,170,100,0.25), transparent); border-radius: 2px; margin: 8px 0; } /* 四角符文 */ .parchment-ornament { position: absolute; font-size: 8px; color: rgba(210,170,100,0.25); line-height: 1; pointer-events: none; } .parchment-ornament.top-left { top: 8px; left: 10px; } .parchment-ornament.top-right { top: 8px; right: 10px; } .parchment-ornament.bottom-left { bottom: 8px; left: 10px; } .parchment-ornament.bottom-right { bottom: 8px; right: 10px; } /* TIPS 文字 */ .parchment-tip-label { font-family: var(--font-book); font-size: 11px; color: rgba(210,170,100,0.85); letter-spacing: 0.15em; text-align: center; display: block; margin-bottom: 2px; font-weight: 600; } .parchment-tip-text { font-family: var(--font-book); font-size: 13px; color: rgba(210,170,100,0.7); line-height: 1.5; text-align: center; font-style: italic; padding: 0 4px; letter-spacing: 0.02em; transition: opacity 0.2s ease; } /* 羊皮纸顶/底页边厚度 */ .parchment-edge { position: absolute; width: 200px; height: 6px; left: 0; backface-visibility: hidden; background: linear-gradient(90deg, #2b2440, #352e50, #2b2440); border-radius: 2px; } .parchment-top-edge { top: -3px; transform: rotateX(90deg) translateZ(3px); } .parchment-bottom-edge { bottom: -3px; transform: rotateX(-90deg) translateZ(3px); } /* 移动端：羊皮纸居中偏下 */ @media (max-width: 720px) { .parchment-tips { right: auto; left: 50%; top: auto; bottom: 120px; transform: translateX(-50%); } .parchment-3d { width: 160px; } .parchment-front { width: 160px; min-height: 120px; padding: 24px 16px 20px; } .parchment-edge { width: 160px; } .parchment-tip-text { font-size: 11px; } } /* ============ 移动端适配 ============ */ @media (max-width: 720px) { .book-wrapper { width: 320px; height: 430px; } /* 移动端六面体缩放：W=320 H=430 D=22，半厚 11，各面 translate3d 距离同步 */ .book { width: 320px; height: 430px; margin-left: -160px; margin-top: -215px; } .cover-front { width: 320px; height: 430px; margin-left: -160px; margin-top: -215px; transform: translate3d(0, 0, 11px); padding: 30px 25px; border-radius: 10px 6px 6px 10px; } .book-title { font-size: 28px; } .book-author { font-size: 12px; max-width: 240px; } .emblem { width: 70px; height: 70px; margin-bottom: 20px; } .emblem-circle .inner { width: 48px; height: 48px; font-size: 22px; } /* 书脊移动端：D=22，中心到 x=-160 */ .spine { width: 22px; height: 430px; margin-left: -11px; margin-top: -215px; transform: translate3d(-160px, 0, 0) rotateY(-90deg); } /* 顶切口移动端：中心到 y=-215 */ .top-edge { width: 320px; height: 22px; margin-left: -160px; margin-top: -11px; transform: translate3d(0, -215px, 0) rotateX(90deg); border-radius: 8px 8px 0 0; } /* 右切口移动端：中心到 x=160 */ .right-edge { width: 22px; height: 430px; margin-left: -11px; margin-top: -215px; transform: translate3d(160px, 0, 0) rotateY(90deg); } .bottom-edge { display: none; } .cover-border { inset: 12px; } .corner-ornament { width: 24px; height: 24px; } .corner-ornament.tl { top: 18px; left: 18px; } .corner-ornament.tr { top: 18px; right: 18px; } .corner-ornament.bl { bottom: 18px; left: 18px; } .corner-ornament.br { bottom: 18px; right: 18px; } .cover-border::before, .cover-border::after { font-size: 14px; top: -10px; } .cover-border .bottom-left, .cover-border .bottom-right { font-size: 14px; bottom: -10px; } .spine-text { font-size: 10px; } .page-peek { top: 4px; left: 5px; right: 5px; bottom: 4px; } .page-peek-2 { top: 8px; left: 9px; right: 9px; bottom: 8px; } .ambient-glow { width: 400px; height: 400px; } /* 移动端输入表单优化 */ .home-input-form { padding: 20px 16px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .home-title { font-size: 32px; margin-top: 20px; } .home-subtitle { font-size: 13px; margin-bottom: 24px; } .home-input-form .input-wrapper { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px 14px; } .home-input-form .input-wrapper .word-input { width: 100%; font-size: 16px; /* 防止 iOS 自动缩放 */ } .home-input-form .input-wrapper .generate-btn { margin-left: 0; width: 100%; justify-content: center; margin-top: 4px; } .style-tags { gap: 6px; justify-content: center; } .style-tag { font-size: 12px; padding: 6px 12px; } .difficulty-tags { justify-content: center; } .vocab-entry-btn { width: 100%; justify-content: center; } } /* ================================================================== 魔法书质感增强（bookfx，无 hover 无流光）—— 纯追加，不改动任何既有规则 DOM 由 app.js 的 enhanceBookTexture() 注入；此区块仅负责视觉 ================================================================== */ /* —— 双层呼吸光晕（book-wrapper 内、book 之外）—— */ .bookfx-aura { position: absolute; top: -80px; left: -80px; width: calc(100% + 160px); height: calc(100% + 160px); background: radial-gradient(ellipse at center, rgba(200,165,95,0.05) 0%, transparent 65%); border-radius: 50%; pointer-events: none; animation: bookfx-aura-breath 4s ease-in-out infinite; z-index: 0; } @keyframes bookfx-aura-breath { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.06); } } .bookfx-glow { position: absolute; top: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 80px); background: radial-gradient(ellipse at center, rgba(200,160,100,0.06) 0%, transparent 55%); border-radius: 50%; pointer-events: none; animation: bookfx-glow-pulse 3s ease-in-out infinite; z-index: 0; } @keyframes bookfx-glow-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.09); } } /* —— 内页 3 层（z 低于封面，营造书页厚度层次）—— */ .bookfx-page { position: absolute; border-radius: 14px 4px 4px 14px; left: 0; right: 0; margin: 0 auto; pointer-events: none; z-index: -3; } .bookfx-page.p1 { top: 6px; width: calc(100% - 14px); bottom: 6px; background: linear-gradient(150deg, #e6dabc, #d8cbac); box-shadow: inset 0 2px 8px rgba(0,0,0,0.06); } .bookfx-page.p2 { top: 12px; width: calc(100% - 22px); bottom: 12px; background: linear-gradient(150deg, #ded2b4, #d0c4a4); box-shadow: inset 0 1px 6px rgba(0,0,0,0.05); } .bookfx-page.p3 { top: 18px; width: calc(100% - 30px); bottom: 18px; background: linear-gradient(150deg, #d6caac, #c8bc9c); box-shadow: inset 0 1px 4px rgba(0,0,0,0.04); } /* —— 四角金线结 —— */ .bookfx-knot { position: absolute; width: 46px; height: 46px; pointer-events: none; z-index: 12; } .bookfx-knot svg { width: 100%; height: 100%; } .bookfx-knot.tl { top: 14px; left: 14px; } .bookfx-knot.tr { top: 14px; right: 14px; transform: scaleX(-1); } .bookfx-knot.bl { bottom: 14px; left: 14px; transform: scaleY(-1); } .bookfx-knot.br { bottom: 14px; right: 14px; transform: scale(-1,-1); } /* —— 装饰横条（上下）—— */ .bookfx-band { position: absolute; left: 50px; right: 50px; height: 12px; pointer-events: none; display: flex; align-items: center; gap: 8px; z-index: 11; } .bookfx-band.top { top: 52px; } .bookfx-band.bottom { bottom: 52px; } .bookfx-band .bookfx-bar { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(210,170,100,0.22), transparent); } .bookfx-band .bookfx-diamond { width: 5px; height: 5px; border: 1px solid rgba(210,170,100,0.28); transform: rotate(45deg); flex-shrink: 0; } /* —— 封面边缘光影 —— */ .bookfx-rim { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(42, 26, 58, 0.9), inset 0 0 40px rgba(20,12,35,0.35), 0 0 30px rgba(0,0,0,0.3); pointer-events: none; z-index: 12; } /* —— 金属包角 —— */ .bookfx-clasp { position: absolute; width: 24px; height: 24px; background: linear-gradient(145deg, #d4b582 0%, #8a7650 45%, #d4b582 100%); border-radius: 3px; pointer-events: none; opacity: 0.4; box-shadow: 0 1px 4px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,235,180,0.5), inset 0 -1px 1px rgba(60,40,15,0.5); z-index: 13; } .bookfx-clasp.tl { top: 26px; left: 26px; } .bookfx-clasp.tr { top: 26px; right: 26px; } .bookfx-clasp.bl { bottom: 26px; left: 26px; } .bookfx-clasp.br { bottom: 26px; right: 26px; } /* —— 徽章补充极淡环 —— */ .bookfx-emblem-ring { position: absolute; border-radius: 50%; pointer-events: none; } .bookfx-emblem-ring.r2 { inset: -16px; border: 1px solid var(--star-tint-12); } .bookfx-emblem-ring.r3 { inset: -26px; border: 1px solid rgba(210,170,100,0.07); } /* —— 书脊补的两条次位肋条 —— */ .bookfx-spine-rib-mid1 { top: 130px; } .bookfx-spine-rib-mid2 { bottom: 130px; } /* —— canvas 金粒子层（pointer-events:none，绝不挡点击）—— */ .bookfx-particles { position: fixed; inset: 0; pointer-events: none; z-index: 2; } /* —— 书场景隐藏时停画粒子 —— */ .book-scene.hidden .bookfx-particles { display: none; } /* —— 响应式：窄屏缩小装饰 —— */ @media (max-width: 720px) { .bookfx-knot { width: 28px; height: 28px; } .bookfx-knot.tl { top: 8px; left: 8px; } .bookfx-knot.tr { top: 8px; right: 8px; } .bookfx-knot.bl { bottom: 8px; left: 8px; } .bookfx-knot.br { bottom: 8px; right: 8px; } .bookfx-band { left: 30px; right: 30px; height: 8px; } .bookfx-band.top { top: 34px; } .bookfx-band.bottom { bottom: 34px; } .bookfx-band .bookfx-diamond { width: 3px; height: 3px; } .bookfx-clasp { width: 14px; height: 14px; } .bookfx-clasp.tl { top: 16px; left: 16px; } .bookfx-clasp.tr { top: 16px; right: 16px; } .bookfx-clasp.bl { bottom: 16px; left: 16px; } .bookfx-clasp.br { bottom: 16px; right: 16px; } .bookfx-page.p1 { top: 4px; width: calc(100% - 8px); bottom: 4px; } .bookfx-page.p2 { top: 8px; width: calc(100% - 14px); bottom: 8px; } .bookfx-page.p3 { top: 12px; width: calc(100% - 20px); bottom: 12px; } } /* ====== 魔法漂浮符文（bookfx, 纯装饰, 不挡交互） ====== */ .bookfx-rune { position: absolute; pointer-events: none; z-index: 3; font-size: 16px; color: var(--star-tint-40, rgba(210,170,100,0.4)); text-shadow: 0 0 6px var(--star-tint-25, rgba(210,170,100,0.25)); will-change: transform, opacity; animation: rune-orbit var(--rune-dur, 12s) ease-in-out infinite; animation-delay: var(--rune-delay, 0s); } @keyframes rune-orbit { 0% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 0.12; } 20% { transform: translate(var(--rune-dx1, 40px), var(--rune-dy1, -30px)) scale(1) rotate(8deg); opacity: 0.45; } 40% { transform: translate(var(--rune-dx2, -20px), var(--rune-dy2, -55px)) scale(0.7) rotate(-5deg); opacity: 0.22; } 60% { transform: translate(var(--rune-dx3, -45px), var(--rune-dy3, -10px)) scale(0.9) rotate(12deg); opacity: 0.38; } 80% { transform: translate(var(--rune-dx4, 10px), var(--rune-dy4, -45px)) scale(0.5) rotate(-3deg); opacity: 0.15; } 100% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 0.12; } } /* ====== 点击魔法书爆发扩散环 ====== */ .book-burst-ring { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border: 2px solid rgba(210,170,100,0.7); border-radius: 50%; pointer-events: none; z-index: 5; transform: translate(-50%, -50%); animation: burst-expand 0.75s cubic-bezier(0.25, 0, 0, 1) forwards; } .book-burst-ring::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(210,170,100,0.35); border-radius: 50%; } @keyframes burst-expand { 0% { width: 40px; height: 40px; opacity: 1; } 100% { width: 700px; height: 700px; opacity: 0; } } /* ============ 魔法词汇宝典 ============ */ /* — 页面背景：与 History 一致的星空暗色主题 — */ #page-vocab { background: var(--star-bg); } #page-vocab::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; will-change: transform; transform: translateZ(0); background-image: var(--star-sky); } #page-vocab::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 10%, var(--star-tint-06) 0%, transparent 55%); } /* 首页入口按钮 */ .vocab-entry-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 18px; background: var(--star-tint-06); border: 1px solid var(--star-gold); border-radius: 4px; color: var(--star-text-secondary); font-size: 13px; font-family: var(--font-ui, 'Inter', sans-serif); cursor: var(--cursor-pointer, pointer); transition: all 0.3s ease; user-select: none; } .vocab-entry-btn:hover { background: var(--star-tint-12); color: var(--star-gold); box-shadow: 0 0 16px var(--star-tint-12); } .vocab-entry-icon { font-size: 14px; animation: ornament-breathe 2.5s ease-in-out infinite; } /* 词汇页面容器 */ .vocab-page-container { max-width: 900px; margin: 0 auto; padding: 64px 32px 96px; position: relative; z-index: 1; flex: 1; } /* 页头 */ .vocab-page-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 8px; } .vocab-page-ornament-l, .vocab-page-ornament-r { font-size: 22px; color: var(--star-tint-45); opacity: 0.7; animation: ornament-breathe 3s ease-in-out infinite; text-shadow: 0 0 12px var(--star-tint-12); } .vocab-page-ornament-r { animation-delay: 1.5s; } .vocab-page-title { font-family: var(--font-book, 'Fraunces', serif); font-size: 32px; font-weight: 600; color: var(--star-text); margin: 0; letter-spacing: 3px; text-shadow: 0 0 24px var(--star-tint-06); } .vocab-page-subtitle { text-align: center; color: var(--star-tint-35); font-size: 13px; margin: 0 0 36px; letter-spacing: 0.5px; font-family: var(--font-book, 'Fraunces', serif); } /* 等级标签 — 3D 旋转书 */ .vocab-level-tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; } .vocab-level-tab { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px 12px; background: transparent; border: none; color: var(--star-tint-35); font-size: 14px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; position: relative; } .vocab-level-tab:hover { color: var(--star-text-secondary); } .vocab-level-tab.active { color: var(--star-gold); } .vocab-level-tab.active::after { content: ''; position: absolute; bottom: 4px; left: 25%; right: 25%; height: 1px; background: linear-gradient(90deg, transparent, var(--star-gold), transparent); } .vocab-level-name { font-weight: 500; letter-spacing: 1px; } .vocab-level-tab.active .vocab-level-name { text-shadow: 0 0 12px var(--star-tint-12); } .vocab-level-count { font-size: 11px; opacity: 0.5; font-weight: 400; font-family: var(--font-ui, 'Inter', sans-serif); } /* 3D 迷你书 — 复用 Library 共享 mini-* 样式，覆盖大小（56×76×10） */ /* 展台：固定 X 轴倾斜，内层纯 Y 轴旋转 */ .vocab-book-pedestal { width: 56px; height: 76px; perspective: 420px; transform: rotateX(10deg); } .vocab-book-mini { width: 56px; height: 76px; position: relative; transform-style: preserve-3d; transition: transform 0.4s ease; } .vocab-level-tab:hover .vocab-book-mini { animation: vbm-spin 3s linear infinite; } .vocab-level-tab.active .vocab-book-mini { animation: vbm-spin 5s linear infinite; } @keyframes vbm-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } /* — 封面覆盖（56×76, D=10 → translateZ(5px)） — */ .vocab-book-mini .mini-front { width: 56px; height: 76px; border-radius: 5px 2px 2px 5px; padding: 10px 8px; transform: translateZ(5px); box-shadow: inset 0 1px 2px rgba(255,215,140,0.15), inset 0 -2px 3px rgba(0,0,0,0.45), 0 3px 14px rgba(0,0,0,0.35); } .vocab-book-mini .mini-front::before { background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,215,140,0.03) 20px, rgba(255,215,140,0.03) 21px); } .vocab-book-mini .mini-cover-border { inset: 4px; border-radius: 3px; } .vocab-book-mini .mini-emblem { width: 18px; height: 18px; margin-bottom: 3px; } .vocab-book-mini .mini-emblem::before { inset: -3px; } .vocab-book-mini .mini-emblem span { font-size: 7px; } .vocab-book-mini .mini-title { font-size: 7px; letter-spacing: 0.1em; } /* — 封底覆盖（56×76） — */ .vocab-book-mini .mini-back { width: 56px; height: 76px; border-radius: 2px 5px 5px 2px; transform: rotateY(180deg) translateZ(5px); box-shadow: inset 0 1px 2px rgba(255,215,140,0.08), 0 3px 14px rgba(0,0,0,0.3); } .vocab-book-mini .mini-back::before { background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,215,140,0.02) 20px, rgba(255,215,140,0.02) 21px); } .vocab-book-mini .mini-back-border { inset: 5px; border-radius: 4px; } /* — 书脊覆盖（10×76, left=23, translateZ(28px) = W/2） — */ .vocab-book-mini .mini-spine { width: 10px; height: 76px; top: 0; left: 23px; transform: rotateY(-90deg) translateZ(28px); border-radius: 2px 0 0 2px; } .vocab-book-mini .mini-spine-text { font-size: 6px; } /* — 页边覆盖（56×10, translateZ(5px) = D/2） — */ .vocab-book-mini .mini-top-edge { width: 56px; height: 10px; top: 0; left: 0; transform: rotateX(90deg) translateZ(5px); background: linear-gradient(180deg, #d4c8a8, #c4b898, #b8ac90); border-radius: 4px 4px 0 0; } .vocab-book-mini .mini-bottom-edge { width: 56px; height: 10px; bottom: 0; left: 0; transform: rotateX(-90deg) translateZ(5px); background: linear-gradient(0deg, #d4c8a8, #c4b898, #b8ac90); border-radius: 0 0 4px 4px; } .vocab-book-mini .mini-right-edge { width: 10px; height: 76px; top: 0; left: 23px; transform: rotateY(90deg) translateZ(28px); background: linear-gradient(270deg, #d4c8a8, #c4b898, #b8ac90); border-radius: 0 3px 3px 0; } /* — 三色书皮（覆盖 shared mini-front/mini-back/mini-spine background） — */ .vbm-green .mini-front { background: linear-gradient(135deg, #1a3a2a 0%, #2b5a40 40%, #356b4c 70%, #1a3a2a 100%); } .vbm-green .mini-back { background: linear-gradient(135deg, #152e22 0%, #1a3a2a 40%, #244635 70%, #152e22 100%); } .vbm-green .mini-spine { background: linear-gradient(90deg, #0d1f14, #1a3a2a 40%, #2b5a40 70%, #1a3a2a); } .vbm-blue .mini-front { background: linear-gradient(135deg, #0a2030 0%, #18465a 40%, #26687c 70%, #0a2030 100%); } .vbm-blue .mini-back { background: linear-gradient(135deg, #081824 0%, #0a2030 40%, #123544 70%, #081824 100%); } .vbm-blue .mini-spine { background: linear-gradient(90deg, #06121c, #0a2030 40%, #18465a 70%, #0a2030); } .vbm-purple .mini-front { background: linear-gradient(135deg, #2b1e3a 0%, #3a2848 40%, #4c355c 70%, #2b1e3a 100%); } .vbm-purple .mini-back { background: linear-gradient(135deg, #221830 0%, #2b1e3a 40%, #352845 70%, #221830 100%); } .vbm-purple .mini-spine { background: linear-gradient(90deg, #1a1228, #2b1e3a 40%, #3a2848 70%, #2b1e3a); } /* 四级 — 橙金 */ .vbm-orange .mini-front { background: linear-gradient(135deg, #3a2a0a 0%, #5a4010 40%, #7a5818 70%, #3a2a0a 100%); } .vbm-orange .mini-back { background: linear-gradient(135deg, #2e2008 0%, #3a2a0a 40%, #4a3410 70%, #2e2008 100%); } .vbm-orange .mini-spine { background: linear-gradient(90deg, #1f1606, #3a2a0a 40%, #5a4010 70%, #3a2a0a); } /* 搜索框 — 魔法水晶槽 */ .vocab-search-wrap { position: relative; max-width: 520px; margin: 0 auto 16px; } .vocab-search-input { width: 100%; height: 52px; padding: 0 128px 0 52px; background: linear-gradient(135deg, rgba(22, 20, 38, 0.72), rgba(16, 14, 30, 0.68)); border: 1px solid rgba(196, 154, 108, 0.18); border-radius: 999px; color: var(--star-text, #e8ddd0); font-family: var(--font-ui, 'Inter', sans-serif); font-size: 15px; outline: none; transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.25); } .vocab-search-input:focus { border-color: rgba(196, 154, 108, 0.55); background: linear-gradient(135deg, rgba(28, 24, 44, 0.78), rgba(20, 18, 36, 0.74)); box-shadow: inset 0 1px 1px rgba(255,255,255,0.04), 0 0 0 3px rgba(196, 154, 108, 0.08), 0 0 28px rgba(196, 154, 108, 0.12); } .vocab-search-input::placeholder { color: rgba(210, 170, 100, 0.35); } .vocab-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgba(196, 154, 108, 0.45); pointer-events: none; transition: color 0.3s ease, filter 0.3s ease; } .vocab-search-input:focus + .vocab-search-icon { color: rgba(196, 154, 108, 0.85); filter: drop-shadow(0 0 6px rgba(196, 154, 108, 0.4)); } /* 随机抽牌按钮（搜索框内右侧） */ .vocab-random-fab { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 16px; background: linear-gradient(135deg, rgba(196, 154, 108, 0.14), rgba(196, 154, 108, 0.06)); border: 1px solid rgba(196, 154, 108, 0.22); border-radius: 999px; color: rgba(230, 210, 160, 0.92); font-size: 12px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.3s ease; white-space: nowrap; z-index: 2; letter-spacing: 0.03em; } .vocab-random-fab span { font-size: 13px; animation: ornament-breathe 2s ease-in-out infinite; } .vocab-random-fab:hover { background: linear-gradient(135deg, rgba(196, 154, 108, 0.22), rgba(196, 154, 108, 0.1)); border-color: rgba(196, 154, 108, 0.45); box-shadow: 0 0 18px rgba(196, 154, 108, 0.16); color: rgba(245, 225, 175, 1); } /* ═══════════════════════════════════════════ 分类筛选下拉 — 水晶球入口（替代旧的扁平标签矩阵） ═══════════════════════════════════════════ */ .vocab-cat-bar { display: flex; justify-content: center; align-items: center; margin-bottom: 28px; position: relative; z-index: 50; } /* ── 触发球 ── */ .vocab-cat-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px 9px 16px; background: linear-gradient(135deg, rgba(28,22,38,0.88), rgba(20,16,30,0.82)); border: 1px solid rgba(196, 154, 108, 0.22); border-radius: 999px; cursor: var(--cursor-pointer, pointer); transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 1px 1px rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.2); } .vocab-cat-trigger:hover { border-color: rgba(196, 154, 108, 0.45); box-shadow: inset 0 1px 1px rgba(255,255,255,0.04), 0 0 22px rgba(196, 154, 108, 0.14); background: linear-gradient(135deg, rgba(36,28,48,0.9), rgba(26,20,36,0.84)); transform: translateY(-1px); } .vocab-cat-trigger.active { border-color: rgba(196, 154, 108, 0.55); box-shadow: inset 0 1px 1px rgba(255,255,255,0.04), 0 0 26px rgba(196, 154, 108, 0.18); } /* 触发球图标（水晶球） */ .vocab-cat-trigger-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,230,170,0.22), rgba(196,154,108,0.08) 60%, transparent 70%); border: 1px solid rgba(196, 154, 108, 0.25); font-size: 12px; color: rgba(240, 210, 150, 0.92); line-height: 1; transition: transform 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 0 10px rgba(196, 154, 108, 0.08); } .vocab-cat-trigger:hover .vocab-cat-trigger-icon { box-shadow: 0 0 16px rgba(196, 154, 108, 0.18); } .vocab-cat-trigger.active .vocab-cat-trigger-icon { transform: rotate(45deg) scale(1.05); box-shadow: 0 0 20px rgba(196, 154, 108, 0.22); } .vocab-cat-trigger-label { font-size: 14px; font-weight: 500; font-family: var(--font-book, 'Fraunces', serif); color: var(--star-text, #e8ddd0); letter-spacing: 0.04em; } .vocab-cat-trigger-count { font-size: 12px; color: rgba(196, 154, 108, 0.55); font-weight: 400; } .vocab-cat-trigger-chevron { font-size: 10px; color: rgba(196, 154, 108, 0.55); transition: transform 0.3s ease; line-height: 1; } .vocab-cat-trigger.active .vocab-cat-trigger-chevron { transform: rotate(180deg); } /* ── 下拉面板 ── */ .vocab-cat-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); display: none; grid-template-columns: repeat(5, 1fr); gap: 4px; background: linear-gradient(180deg, rgba(22,18,32,0.97), rgba(16,12,24,0.97)); border: 1px solid rgba(196, 154, 108, 0.18); border-radius: 18px; padding: 16px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 16px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(196,154,108,0.06), 0 0 80px rgba(196,154,108,0.05); min-width: 460px; max-height: 380px; overflow-y: auto; z-index: 200; scrollbar-width: thin; scrollbar-color: rgba(196,154,108,0.2) transparent; } .vocab-cat-dropdown::-webkit-scrollbar { width: 4px; } .vocab-cat-dropdown::-webkit-scrollbar-thumb { background: rgba(196,154,108,0.2); border-radius: 2px; } .vocab-cat-dropdown.open { display: grid; animation: vocabDropdownIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes vocabDropdownIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /* ── 下拉面板遮罩（点击外部关闭） ── */ .vocab-cat-backdrop { position: fixed; inset: 0; z-index: 199; display: none; } .vocab-cat-backdrop.open { display: block; } /* ── 分类选项 ── */ .vocab-cat-option { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 10px; cursor: var(--cursor-pointer, pointer); transition: all 0.2s ease; border: 1px solid transparent; text-align: center; min-width: 0; background: rgba(255,255,255,0.02); } .vocab-cat-option:hover { background: rgba(196, 154, 108, 0.08); border-color: rgba(196, 154, 108, 0.16); transform: translateY(-1px); } .vocab-cat-option.selected { background: rgba(196, 154, 108, 0.12); border-color: rgba(196, 154, 108, 0.35); box-shadow: 0 0 12px rgba(196, 154, 108, 0.08); } .vocab-cat-option-cat { font-size: 12px; font-weight: 500; color: rgba(232, 221, 208, 0.88); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .vocab-cat-option:hover .vocab-cat-option-cat, .vocab-cat-option.selected .vocab-cat-option-cat { color: rgba(240, 210, 150, 0.96); } .vocab-cat-option-num { font-size: 10px; color: rgba(196, 154, 108, 0.45); opacity: 0.8; } .vocab-cat-option:hover .vocab-cat-option-num, .vocab-cat-option.selected .vocab-cat-option-num { opacity: 1; color: rgba(196, 154, 108, 0.65); } /* 全部 选项特殊处理 */ .vocab-cat-option-all .vocab-cat-option-cat { font-style: italic; color: rgba(196, 154, 108, 0.65); } /* 词汇网格 */ .vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; --level-color: #4caf50; } /* 词汇卡片 — 与 History 星空暗色主题统一 */ .vocab-card { position: relative; padding: 20px 18px 18px; background: rgba(14,18,40,0.72); border: 1px solid var(--star-tint-12); border-radius: 6px; cursor: var(--cursor-pointer, pointer); transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; user-select: none; overflow: hidden; animation: vocab-card-in 0.5s ease backwards; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* 卡片顶部符文光带 */ .vocab-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--level-color, var(--star-gold)) 30%, var(--level-color, var(--star-gold)) 70%, transparent); opacity: 0; transition: opacity 0.4s ease; } /* 卡片角标符文 */ .vocab-card::after { content: '✦'; position: absolute; bottom: 6px; right: 8px; font-size: 7px; color: var(--star-tint-12); transition: all 0.3s ease; } .vocab-card:hover::before { opacity: 0.5; } .vocab-card:hover::after { color: var(--star-gold); opacity: 0.45; } @keyframes vocab-card-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .vocab-card:hover { border-color: var(--star-tint-35); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 16px var(--star-tint-06); } .vocab-card-en { display: block; font-family: var(--font-book, 'Fraunces', serif); font-size: 16px; font-weight: 500; color: var(--star-text); margin-bottom: 6px; letter-spacing: 0.4px; transition: color 0.3s ease; } .vocab-card-cat { display: inline-block; padding: 2px 9px; font-size: 10px; color: var(--star-tint-45); background: var(--star-tint-06); border: 1px solid var(--star-tint-12); border-radius: 2px; vertical-align: middle; letter-spacing: 0.5px; transition: all 0.3s ease; } .vocab-card-check { position: absolute; top: 10px; right: 12px; font-size: 16px; color: var(--star-gold); opacity: 0; transform: scale(0.3) rotate(-45deg); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* 选中状态 — 魔法激活 */ .vocab-card.selected { background: rgba(24,22,48,0.78); border-color: var(--star-gold); box-shadow: 0 0 24px var(--star-tint-15), 0 6px 24px rgba(0,0,0,0.3), inset 0 0 18px var(--star-tint-06); } .vocab-card.selected::before { opacity: 0.7; } .vocab-card.selected::after { color: var(--star-gold); opacity: 0.55; } .vocab-card.selected .vocab-card-en { color: var(--star-text); text-shadow: 0 0 16px var(--star-tint-15); } .vocab-card.selected .vocab-card-cat { color: var(--star-text-secondary); background: var(--star-tint-12); border-color: var(--star-tint-35); } .vocab-card.selected .vocab-card-check { opacity: 1; transform: scale(1) rotate(0deg); animation: ornament-breathe 1.5s ease-in-out infinite; text-shadow: 0 0 8px var(--star-tint-35); } /* 加载更多 */ .vocab-load-more { text-align: center; padding: 28px 0 80px; } .vocab-load-more-btn { padding: 11px 36px; background: var(--star-tint-06); border: 1px solid var(--star-tint-15); border-radius: 4px; color: var(--star-tint-45); font-size: 14px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.25s ease; letter-spacing: 0.5px; } .vocab-load-more-btn:hover { background: var(--star-tint-12); border-color: var(--star-gold); box-shadow: 0 0 16px var(--star-tint-08); color: var(--star-text); } /* 随机模式：一键复制 + 换一批 */ .vocab-copy-all-btn { padding: 12px 36px; background: var(--star-tint-12); border: 1px solid var(--star-gold); border-radius: 4px; color: var(--star-text); font-size: 15px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.25s ease; letter-spacing: 0.5px; } .vocab-copy-all-btn span { font-size: 14px; margin-right: 2px; } .vocab-copy-all-btn:hover { background: var(--star-tint-15); border-color: var(--star-gold); box-shadow: 0 0 24px var(--star-tint-15); color: var(--star-text); transform: translateY(-1px); } .vocab-reroll-btn { display: block; margin: 12px auto 0; padding: 8px 20px; background: transparent; border: 1px solid var(--star-tint-12); border-radius: 4px; color: var(--star-tint-35); font-size: 13px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.2s ease; } .vocab-reroll-btn:hover { border-color: var(--star-gold); color: var(--star-text); } /* 加载/空状态 */ .vocab-loading, .vocab-empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: var(--star-tint-35); font-size: 15px; font-family: var(--font-ui, 'Inter', sans-serif); } .vocab-empty.prompt { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 72px 20px 60px; color: var(--star-tint-45); } .vocab-prompt-icon { font-size: 44px; animation: ornament-breathe 2.5s ease-in-out infinite; text-shadow: 0 0 20px var(--star-tint-12); } .vocab-prompt-title { margin: 0; font-size: 17px; color: var(--star-text); font-family: var(--font-book, 'Fraunces', serif); letter-spacing: 0.5px; } .vocab-prompt-sub { margin: 0; font-size: 13px; color: var(--star-tint-35); } .vocab-random-btn { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: var(--star-tint-08); border: 1px solid var(--star-gold); border-radius: 4px; color: var(--star-text-secondary); font-size: 14px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.5px; } .vocab-random-btn .vocab-random-icon { font-size: 16px; animation: ornament-breathe 2s ease-in-out infinite; } .vocab-random-btn:hover { background: var(--star-tint-15); border-color: var(--star-gold); box-shadow: 0 0 24px var(--star-tint-15); color: var(--star-text); transform: translateY(-2px); } /* 底部操作栏 */ .vocab-action-bar { position: fixed; bottom: -80px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 24px; background: rgba(10,14,30,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--star-tint-12); transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; } .vocab-action-bar.active { bottom: 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3); } .vocab-selected-count { font-size: 14px; color: var(--star-tint-45); font-family: var(--font-book, 'Fraunces', serif); } .vocab-copy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; background: var(--star-tint-12); border: 1px solid var(--star-gold); border-radius: 4px; color: var(--star-text); font-size: 14px; font-family: var(--font-book, 'Fraunces', serif); cursor: var(--cursor-pointer, pointer); transition: all 0.25s ease; white-space: nowrap; } .vocab-copy-btn:hover:not(:disabled) { background: var(--star-tint-15); box-shadow: 0 0 18px var(--star-tint-12); transform: translateY(-1px); } .vocab-copy-btn:disabled { opacity: 0.4; cursor: not-allowed; } .vocab-copy-btn.secondary { background: transparent; border-color: var(--star-tint-12); color: var(--star-tint-35); } .vocab-copy-btn.secondary:hover { border-color: var(--star-gold); color: var(--star-text); box-shadow: 0 0 12px var(--star-tint-08); } .vocab-copy-icon { font-size: 14px; } /* 移动端适配 */ @media (max-width: 640px) { .vocab-page-container { padding: 28px 14px 110px; } .vocab-page-title { font-size: 24px; letter-spacing: 2px; } .vocab-page-subtitle { font-size: 12px; margin-bottom: 24px; } .vocab-level-tab { padding: 12px 14px 10px; } .vocab-book-pedestal { width: 40px; height: 54px; perspective: 300px; } .vocab-book-mini { width: 40px; height: 54px; } .vocab-book-mini .mini-front { width: 40px; height: 54px; padding: 7px 5px; border-radius: 4px 2px 2px 4px; transform: translateZ(4px); } .vocab-book-mini .mini-back { width: 40px; height: 54px; border-radius: 2px 4px 4px 2px; transform: rotateY(180deg) translateZ(4px); } .vocab-book-mini .mini-spine { width: 8px; height: 54px; left: 16px; transform: rotateY(-90deg) translateZ(20px); border-radius: 2px 0 0 2px; } .vocab-book-mini .mini-top-edge { width: 40px; height: 8px; transform: rotateX(90deg) translateZ(4px); border-radius: 3px 3px 0 0; } .vocab-book-mini .mini-bottom-edge { width: 40px; height: 8px; transform: rotateX(-90deg) translateZ(4px); border-radius: 0 0 3px 3px; } .vocab-book-mini .mini-right-edge { width: 8px; height: 54px; left: 16px; transform: rotateY(90deg) translateZ(20px); border-radius: 0 3px 3px 0; } .vocab-book-mini .mini-cover-border { inset: 3px; border-radius: 2px; } .vocab-book-mini .mini-emblem { width: 14px; height: 14px; margin-bottom: 2px; } .vocab-book-mini .mini-emblem::before { inset: -2px; } .vocab-book-mini .mini-emblem span { font-size: 6px; } .vocab-book-mini .mini-title { font-size: 6px; } .vocab-book-mini .mini-back-border { inset: 4px; border-radius: 3px; } .vocab-book-mini .mini-spine-text { font-size: 5px; } .vocab-level-name { font-size: 13px; } .vocab-search-input { height: 48px; padding: 0 100px 0 44px; font-size: 14px; } .vocab-search-icon { left: 16px; font-size: 16px; } .vocab-random-fab { height: 34px; padding: 0 12px; font-size: 11px; } .vocab-cat-bar { z-index: 50; } .vocab-cat-dropdown { min-width: 320px; max-width: calc(100vw - 32px); grid-template-columns: repeat(4, 1fr); padding: 12px; border-radius: 14px; } .vocab-cat-option { padding: 8px 4px; } .vocab-cat-option-cat { font-size: 11px; } .vocab-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .vocab-card { padding: 13px 14px; } .vocab-card-en { font-size: 15px; } .vocab-action-bar { gap: 10px; padding: 12px 14px; } .vocab-copy-btn { padding: 9px 22px; font-size: 13px; } .vocab-prompt-icon { font-size: 36px; } .vocab-prompt-title { font-size: 15px; } } /* ═══════════════════════════════════════════ PORTAL / 传送门系统样式 ═══════════════════════════════════════════ */ /* ── 故事页：传送门场景背景模式 ── */ /* 原理：故事页的米白色背景 → 换成用户提供的真实场景大图 文本内容不变，点击段落展开翻译效果保留 */ #page-story.portal-scene-mode { /* 背景图铺满整个页面，固定不动（不随滚动缩放） */ background-size: cover !important; background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } #page-story.portal-scene-mode .story-container { max-width: 680px; margin: 0 auto; padding: 40px 24px 100px; /* 半透明底 + 毛玻璃，让背景大图隐约可见 — 亮色模式用暖纸色 */ background: rgba(252, 237, 218, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; min-height: calc(100vh - 56px); box-shadow: 0 0 60px rgba(0,0,0,0.35), 0 0 120px rgba(0,0,0,0.15); transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; } /* 传送门内容区保持故事页暖色系文字 + 翻译可展开（亮色模式） */ #page-story.portal-scene-mode .story-container, #page-story.portal-scene-mode .story-title, #page-story.portal-scene-mode .story-subtitle, #page-story.portal-scene-mode .story-byline, #page-story.portal-scene-mode .para-en, #page-story.portal-scene-mode .translation, #page-story.portal-scene-mode .story-hint, #page-story.portal-scene-mode .story-difficulty, #page-story.portal-scene-mode .story-coverage, #page-story.portal-scene-mode .portal-scene-header * { color: var(--text-primary, #2c2417); } /* ══════════════════════════════════════ 暗色模式适配（传送门场景） 内容区变暗底+亮文字，与全局 data-theme=dark 一致 ══════════════════════════════════════ */ [data-theme="dark"] #page-story.portal-scene-mode .story-container { background: rgba(26, 23, 20, 0.88); box-shadow: 0 0 60px rgba(0,0,0,0.5), 0 0 120px rgba(0,0,0,0.25); } [data-theme="dark"] #page-story.portal-scene-mode .story-container, [data-theme="dark"] #page-story.portal-scene-mode .story-title, [data-theme="dark"] #page-story.portal-scene-mode .story-subtitle, [data-theme="dark"] #page-story.portal-scene-mode .story-byline, [data-theme="dark"] #page-story.portal-scene-mode .para-en, [data-theme="dark"] #page-story.portal-scene-mode .translation, [data-theme="dark"] #page-story.portal-scene-mode .story-hint, [data-theme="dark"] #page-story.portal-scene-mode .story-difficulty, [data-theme="dark"] #page-story.portal-scene-mode .story-coverage, [data-theme="dark"] #page-story.portal-scene-mode .portal-scene-header * { color: var(--text, #EDE8DD) !important; } [data-theme="dark"] #page-story.portal-scene-mode .story-divider { border-color: var(--border, #3A362C) !important; } [data-theme="dark"] #page-story.portal-scene-mode .story-context-chip { background: var(--highlight-bg, #2E2A20) !important; color: var(--text-secondary, #A39E90) !important; border-color: var(--border, #3A362C) !important; } [data-theme="dark"] #page-story.portal-scene-mode .portal-scene-badge { border-color: rgba(212, 168, 92, 0.25); color: var(--signature, #D4A85C); } /* ── 传送门场景头部 ── */ .portal-scene-header { margin-bottom: 24px; } .portal-scene-badge { display: inline-block; font-size: 11px; color: var(--star-gold-dim, #c9a855); border: 1px solid rgba(201, 168, 85, 0.3); padding: 2px 10px; border-radius: 10px; margin-bottom: 8px; letter-spacing: 1px; } .portal-badge { background: linear-gradient(135deg, rgba(83, 74, 183, 0.2), rgba(155, 89, 182, 0.2)); border-color: rgba(155, 89, 182, 0.35); } /* ── 传送门词汇高亮（场景专用） ── */ .portal-vocab { cursor: pointer; transition: all 0.15s ease; border-bottom: 1.5px dashed var(--signature, #c49a6c); } .portal-vocab:hover { background: rgba(196, 154, 108, 0.18); border-bottom-style: solid; } /* ── 传送门通篇可点击单词（所有英文词均可点击发音） ── */ .portal-word { cursor: pointer; transition: all 0.12s ease; border-radius: 2px; position: relative; } .portal-word:hover { background: rgba(196, 154, 108, 0.1); outline: 1px solid rgba(196, 154, 108, 0.2); } /* 非词汇表的普通词 hover 时显示可点击标识 */ .portal-word:not(.portal-vocab):hover { background: rgba(210, 190, 150, 0.08); border-bottom: 1px solid rgba(196, 154, 108, 0.35); } /* 点击闪烁动画 */ .portal-word.word-flash { animation: portalWordFlash 0.8s ease-out; } @keyframes portalWordFlash { 0% { background: rgba(196, 154, 108, 0.35); transform: scale(1.08); } 100% { background: transparent; transform: scale(1); } } /* 暗色模式：传送门词汇高亮线更亮 */ [data-theme="dark"] #page-story.portal-scene-mode .portal-vocab { border-bottom-color: var(--signature-soft, #BFA068); } [data-theme="dark"] #page-story.portal-scene-mode .portal-vocab:hover { background: rgba(212, 168, 92, 0.15); } /* ── 传送门过渡动画（粒子汇聚） ── */ .portal-transition-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(circle at center, transparent 30%, rgba(10, 8, 18, 0.85) 100%); } .portal-transition-overlay.active { opacity: 1; } .portal-particles { position: absolute; inset: 0; overflow: hidden; } .portal-particle { position: absolute; width: 4px; height: 4px; background: var(--signature, #c49a6c); border-radius: 50%; left: var(--x); top: var(--y); box-shadow: 0 0 6px rgba(196, 154, 108, 0.6), 0 0 14px rgba(196, 154, 108, 0.2); animation: portalParticleIn 0.7s ease-out forwards; animation-delay: var(--delay, 0s); opacity: 0; } @keyframes portalParticleIn { 0% { opacity: 0; transform: scale(0.5); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0) translate(calc(50vw - var(--x)), calc(50vh - var(--y))); } } /* ═══════════════════════════════════════════ TRAVEL LOG / 传送门旅行日志 ═══════════════════════════════════════════ */ #page-portal { background: var(--star-bg); } #page-portal::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; will-change: transform; transform: translateZ(0); background-image: var(--star-sky); } #page-portal::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 10%, var(--star-tint-06) 0%, transparent 55%); } .portal-log-container { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; position: relative; z-index: 1; } .portal-log-header { text-align: center; margin-bottom: 8px; } .portal-log-ornament-l, .portal-log-ornament-r { display: inline-block; color: var(--signature, #c49a6c); opacity: 0.45; font-size: 22px; margin: 0 12px; } .portal-log-title { display: inline; font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--star-text, #e8ddd0); vertical-align: middle; } .portal-log-subtitle { text-align: center; color: var(--star-text-muted, #9a9087); font-size: 14px; margin-bottom: 36px; } /* ── 随机传送触发区 ── */ .portal-trigger-section { display: flex; justify-content: center; margin-bottom: 52px; } .portal-trigger-btn { --ring-outer: rgba(196, 154, 108, 0.25); --ring-mid: rgba(180, 130, 80, 0.30); --ring-inner: rgba(220, 180, 130, 0.35); --glow-color: rgba(196, 154, 108, 0.20); --icon-color: #d4a96a; position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; width: 200px; height: 200px; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(196,154,108,0.07) 0%, rgba(20,16,14,0.4) 70%); border: none; border-radius: 50%; cursor: pointer; color: var(--star-text, #e8ddd0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 压暗散射光 */ box-shadow: 0 0 40px rgba(196,154,108,0.06), 0 0 80px rgba(140,100,60,0.04); z-index: 0; } /* ── 光环 1：最外层 — 慢速顺转 ── */ .portal-trigger-btn::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1.5px solid var(--ring-outer); opacity: 0.45; animation: portalRingSpin1 20s linear infinite; pointer-events: none; } @keyframes portalRingSpin1 { 0% { transform: rotate(0deg); opacity: 0.55; } 50% { opacity: 0.30; } 100% { transform: rotate(360deg); opacity: 0.55; } } /* ── 光环 2：中层 — 快速逆转 + 虚线感 ── */ .portal-trigger-btn::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px dashed var(--ring-mid); opacity: 0.35; animation: portalRingSpin2 12s linear infinite; pointer-events: none; } @keyframes portalRingSpin2 { 0% { transform: rotate(0deg); opacity: 0.45; } 50% { opacity: 0.22; } 100% { transform: rotate(-360deg); opacity: 0.45; } } /* ── 光环 3（内层）— 通过 sparkle-field 伪元素实现 ── */ .portal-sparkle-field { position: absolute; inset: -14px; border-radius: 50%; pointer-events: none; z-index: -1; } .portal-sparkle-field::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ring-inner); opacity: 0.40; animation: portalRingSpin3 8s linear infinite; } @keyframes portalRingSpin3 { 0% { transform: rotate(0deg); opacity: 0.50; } 50% { opacity: 0.20; } 100% { transform: rotate(360deg); opacity: 0.50; } } /* ── 星光粒子（8 颗小光点绕轨道运行）── */ .portal-sparkle-field::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: #e8c888; border-radius: 50%; box-shadow: /* 8 颗粒子均匀分布在半径≈105px 的圆上 */ 90px 0px 0 0 rgba(232,200,136,0.7), 63px 63px 0 0 rgba(232,200,136,0.5), 0px 90px 0 0 rgba(232,200,136,0.7), -63px 63px 0 0 rgba(232,200,136,0.5), -90px 0px 0 0 rgba(232,200,136,0.7), -63px -63px 0 0 rgba(232,200,136,0.5), 0px -90px 0 0 rgba(232,200,136,0.7), 63px -63px 0 0 rgba(232,200,136,0.5); animation: portalSparkleOrbit 6s linear infinite; filter: blur(0.5px); } @keyframes portalSparkleOrbit { 0% { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 0.7; } 25% { opacity: 0.3; } 50% { transform: translate(-50%,-50%) rotate(180deg) scale(0.6); opacity: 0.5; } 75% { opacity: 0.3; } 100% { transform: translate(-50%,-50%) rotate(360deg) scale(1); opacity: 0.7; } } /* ── 中心图标 ── */ .portal-trigger-icon { font-size: 36px; color: var(--icon-color); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease, text-shadow 0.5s ease; filter: drop-shadow(0 0 12px rgba(212,169,106,0.25)); z-index: 2; /* 图标自带内圈光环 */ position: relative; } /* 图标背后的辉光圆盘 */ .portal-trigger-icon::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(212,169,106,0.12) 0%, transparent 70%); z-index: -1; transition: background 0.4s ease; } /* ── 文本 ── */ .portal-trigger-text { font-size: 15px; font-weight: 500; font-family: 'Fraunces', serif; letter-spacing: 0.06em; z-index: 2; transition: letter-spacing 0.4s ease; } .portal-trigger-hint { font-size: 11px; color: var(--star-text-muted, #9a9087); opacity: 0.55; transition: opacity 0.35s ease; z-index: 2; } /* ═══════════════════════════════════════════ HOVER — 一切强化 ═══════════════════════════════════════════ */ .portal-trigger-btn:hover { transform: scale(1.05); box-shadow: 0 0 60px rgba(196,154,108,0.14), 0 0 120px rgba(140,100,60,0.08); } .portal-trigger-btn:hover::before { border-color: rgba(196,154,108,0.40); animation-duration: 10s; opacity: 0.7; } .portal-trigger-btn:hover::after { border-color: rgba(200,150,100,0.45); animation-duration: 6s; opacity: 0.6; } .portal-trigger-btn:hover .portal-sparkle-field::before { border-color: rgba(220,180,130,0.50); animation-duration: 4s; opacity: 0.7; } .portal-trigger-btn:hover .portal-sparkle-field::after { animation-duration: 3s; opacity: 0.95; filter: blur(0px); } .portal-trigger-btn:hover .portal-trigger-icon { transform: scale(1.15); color: #e8c888; filter: drop-shadow(0 0 20px rgba(212,169,106,0.6)) drop-shadow(0 0 40px rgba(212,169,106,0.25)); } .portal-trigger-btn:hover .portal-trigger-icon::after { background: radial-gradient(circle, rgba(232,200,136,0.22) 0%, transparent 70%); } .portal-trigger-btn:hover .portal-trigger-text { letter-spacing: 0.10em; } .portal-trigger-btn:hover .portal-trigger-hint { opacity: 0.85; } /* ═══════════════════════════════════════════ ACTIVE — 压缩吸入感 ═══════════════════════════════════════════ */ .portal-trigger-btn:active { transform: scale(0.92); transition: transform 0.15s ease; box-shadow: 0 0 80px rgba(196,154,108,0.22), 0 0 160px rgba(140,100,60,0.12); } .portal-trigger-btn:active .portal-trigger-icon { transform: scale(0.85); filter: drop-shadow(0 0 30px rgba(255,220,150,0.7)); transition: transform 0.15s ease, filter 0.15s ease; } .portal-trigger-btn:active::before, .portal-trigger-btn:active::after { opacity: 0.9; animation-duration: 0.6s; } /* ── 访问记录列表 ── */ .portal-timeline { } .timeline-entry { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease; } .timeline-entry:hover { background: rgba(255,255,255,0.04); } .timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signature, #c49a6c); flex-shrink: 0; box-shadow: 0 0 8px rgba(196, 154, 108, 0.3); } .timeline-body { flex: 1; min-width: 0; } .timeline-name { display: block; font-size: 14px; font-weight: 500; color: var(--star-text, #e8ddd0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timeline-loc { display: block; font-size: 12px; color: var(--star-text-muted, #9a9087); } .timeline-time { font-size: 12px; color: var(--star-text-muted, #9a9087); flex-shrink: 0; white-space: nowrap; } /* ── 空状态 ── */ .portal-empty { display: none; flex-direction: column; align-items: center; padding: 60px 20px; gap: 10px; color: var(--star-text-muted, #9a9087); } .portal-empty-icon { font-size: 42px; opacity: 0.25; margin-bottom: 8px; } .portal-empty p { font-size: 14px; } .portal-empty-hint { font-size: 13px !important; opacity: 0.55; } /* ── 移动端适配 ── */ @media (max-width: 768px) { .portal-log-container { padding: 32px 16px 60px; } .portal-log-title { font-size: 21px; } .portal-scene-mode .story-container { padding: 24px 16px 90px; border-radius: 0; } } /* ============ 键盘无障碍 ============ */ :focus-visible { outline: 2px solid var(--signature, #1F4D3A); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* 魔法书键盘焦点增强 */ .book-wrapper:focus-visible { box-shadow: 0 0 0 3px var(--signature-soft, #2E6850), 0 0 30px rgba(210,170,100,0.3); border-radius: 8px; } /* ================================================================== 终极施法态 — 故事即将生成前的3秒 分3阶段：每秒转速翻倍 + 颜色紫→金→淡黄渐变 触发：API 返回成功后，在 openStory 前延迟 3s ================================================================== */ /* 阶段1（0-1s）：紫色，转速 0.5s/圈（casting 的2倍） */ .rotating-book.casting-final { animation: miniBookSpinP1 0.5s linear infinite; } @keyframes miniBookSpinP1 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* 阶段2（1-2s）：金色，转速 0.25s/圈（再翻倍） */ .rotating-book.casting-final-2 { animation: miniBookSpinP2 0.25s linear infinite; } @keyframes miniBookSpinP2 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* 阶段3（2-3s）：淡黄，转速 0.125s/圈（再翻倍） */ .rotating-book.casting-final-3 { animation: miniBookSpinP3 0.125s linear infinite; } @keyframes miniBookSpinP3 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* 封面/封底：紫色 → 金色 → 淡黄 3s 渐变 + 亮度脉动 */ .rotating-book.casting-final .mini-front, .rotating-book.casting-final .mini-back { animation: miniFrontColorShift 3s ease-out forwards, miniFrontFinalGlow 0.5s ease-in-out infinite; } @keyframes miniFrontColorShift { 0% { background: linear-gradient(135deg, #2b1e3a 0%, #3a2848 40%, #4c355c 70%, #2b1e3a 100%); } 33% { background: linear-gradient(135deg, #5a4a1a 0%, #8a7220 40%, #a48230 70%, #6a541a 100%); } 66% { background: linear-gradient(135deg, #6a5e4a 0%, #8a7e5a 40%, #9a8e6a 70%, #7a6e5a 100%); } 100% { background: linear-gradient(135deg, #6a5e4a 0%, #8a7e5a 40%, #9a8e6a 70%, #7a6e5a 100%); } } /* 书面表面金色光泽层：静态柔和金光叠加 */ .rotating-book.casting-final .mini-front::after, .rotating-book.casting-final .mini-back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 90% 60% at 40% 35%, rgba(255, 245, 190, 0.4), transparent 70%), linear-gradient(160deg, rgba(255, 235, 160, 0.15) 0%, rgba(255, 220, 100, 0.05) 50%, rgba(255, 240, 180, 0.2) 100%); pointer-events: none; z-index: 2; } @keyframes miniFrontFinalGlow { 0%, 100% { box-shadow: inset 0 1px 4px rgba(255, 220, 120, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 4px 25px rgba(255, 200, 80, 0.6), 0 0 80px rgba(255, 190, 60, 0.4); filter: brightness(1.8) drop-shadow(0 0 25px rgba(255, 210, 100, 0.7)); } 50% { box-shadow: inset 0 1px 5px rgba(255, 240, 160, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 40px rgba(255, 210, 80, 0.8), 0 0 120px rgba(255, 200, 50, 0.6); filter: brightness(2.2) drop-shadow(0 0 45px rgba(255, 220, 120, 0.9)); } } /* 书脊：同步颜色过渡 */ .rotating-book.casting-final .mini-spine { animation: miniSpineColorShift 3s ease-out forwards, miniSpineFinalGlow 0.5s ease-in-out infinite; } @keyframes miniSpineColorShift { 0% { background: linear-gradient(90deg, #1a1228, #2b1e3a 40%, #3a2848 70%, #2b1e3a); } 33% { background: linear-gradient(90deg, #3a2e10, #5a4818 40%, #6a5420 70%, #4a3810); } 66% { background: linear-gradient(90deg, #4a4230, #6a5e4a 40%, #7a6e5a 70%, #5a523a); } 100% { background: linear-gradient(90deg, #4a4230, #6a5e4a 40%, #7a6e5a 70%, #5a523a); } } @keyframes miniSpineFinalGlow { 0%, 100% { filter: brightness(1.6); } 50% { filter: brightness(2.0); } } /* 徽记同步金光 */ .rotating-book.casting-final .mini-emblem { animation: miniEmblemFinalGlow 0.5s ease-in-out infinite; } @keyframes miniEmblemFinalGlow { 0%, 100% { text-shadow: 0 0 8px rgba(255, 210, 100, 0.7); } 50% { text-shadow: 0 0 18px rgba(255, 230, 140, 1.0); } } /* ═══════════════════════════════════════════════════════ 输入页三阶段状态机 ① 空态：只有输入框，垂直居中 ② 填写态：输入框 + Write + 风格 + 难度（无密咒栏） ③ 施法态：所有UI淡出 → 魔法书淡入原位自转 → 加速3秒 → 故事页 ═══════════════════════════════════════════════════════ */ /* ① 隐藏不需要的元素（标题/副标题/词云/词汇宝典/密咒栏） */ .home-input-form .home-title, .home-input-form .home-subtitle, .home-input-form .home-words-cloud, .home-input-form .vocab-entry-btn, .home-input-form .custom-section { display: none !important; } /* ① 输入框垂直居中在整个视口 */ .home-input-form .home-container { min-height: 100vh; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ③ 迷你旋转书：默认隐藏，施法态才出现 */ .home-input-form .rotating-book-stage { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; opacity: 0; visibility: hidden; margin-bottom: 0 !important; z-index: 10; transition: opacity 0.5s ease 0.3s, visibility 0.5s ease 0.3s; animation: none !important; } /* ③ 施法态：书淡入 */ .home-input-form.casting .rotating-book-stage { opacity: 1; visibility: visible; } /* ③ 施法态：输入框 + 按钮 + 难度指示 全部淡出 */ /* animation:none 杀掉 inputIn 的 both fill-mode（否则 opacity:1 被永久持有，覆盖 opacity:0）*/ .home-input-form.casting .input-wrapper { opacity: 0; animation: none; transition: opacity 0.4s ease; } /* ③ 施法态：casting-bar 淡出 + 折叠空间（不让它把下方 theme-hint 推到屏幕中下侧）*/ .home-input-form.casting .casting-bar { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease, max-height 0.4s ease; } /* 覆盖旧的 .casting .word-input opacity:0.5 */ .home-input-form.casting .word-input, .home-input-form.casting .input-ornament { opacity: 0; } /* ============ 反馈系统 — 浮动按钮 + 弹窗 + Toast ============ */ /* 浮动按钮 — 右下角魔法星光 */ .wv-feedback-fab { position: fixed; bottom: 24px; right: 24px; z-index: 9990; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #6b3fa0 0%, #4a2d8a 100%); color: #f0e0c0; font-size: 22px; line-height: 48px; text-align: center; cursor: pointer; user-select: none; box-shadow: 0 4px 20px rgba(100, 60, 160, 0.45), 0 0 30px rgba(180, 140, 220, 0.25); transition: transform 0.25s ease, box-shadow 0.25s ease; animation: fab-pulse 3s ease-in-out infinite; } .wv-feedback-fab:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(100, 60, 160, 0.6), 0 0 40px rgba(180, 140, 220, 0.4); } .wv-feedback-fab:active { transform: scale(0.95); } @keyframes fab-pulse { 0%, 100% { box-shadow: 0 4px 20px rgba(100, 60, 160, 0.45), 0 0 30px rgba(180, 140, 220, 0.25); } 50% { box-shadow: 0 4px 24px rgba(100, 60, 160, 0.55), 0 0 38px rgba(180, 140, 220, 0.4); } } /* 弹窗遮罩 */ .wv-feedback-modal { position: fixed; inset: 0; z-index: 9995; background: rgba(10, 8, 24, 0.72); display: flex; align-items: center; justify-content: center; animation: fb-fade-in 0.25s ease; backdrop-filter: blur(4px); } @keyframes fb-fade-in { from { opacity: 0; } to { opacity: 1; } } /* 弹窗对话框 — 羊皮纸魔法风 */ .wv-feedback-dialog { width: 440px; max-width: calc(100vw - 40px); max-height: calc(100vh - 60px); background: linear-gradient(135deg, #2a2240 0%, #1e1832 100%); border: 1px solid rgba(180, 140, 220, 0.25); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 60px rgba(120, 80, 200, 0.15); overflow: hidden; animation: fb-dialog-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes fb-dialog-in { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* 弹窗头 */ .wv-feedback-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(180, 140, 220, 0.12); } .wv-feedback-title { font-family: 'Georgia', 'Noto Serif SC', serif; font-size: 17px; color: #e8d5b0; letter-spacing: 0.5px; } .wv-feedback-close { width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255,255,255,0.06); color: #9a8ab0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .wv-feedback-close:hover { background: rgba(255,255,255,0.12); color: #e8d5b0; } /* 弹窗体 */ .wv-feedback-body { padding: 16px 20px 20px; } .wv-feedback-hint { margin: 0 0 14px; font-size: 13px; color: #9a8ab0; line-height: 1.55; } .wv-feedback-textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(180, 140, 220, 0.2); border-radius: 10px; background: rgba(20, 16, 36, 0.7); color: #e0d0b8; font-size: 14px; font-family: inherit; line-height: 1.6; resize: vertical; min-height: 100px; transition: border-color 0.2s; box-sizing: border-box; } .wv-feedback-textarea:focus { outline: none; border-color: rgba(180, 140, 220, 0.5); box-shadow: 0 0 12px rgba(120, 80, 200, 0.12); } .wv-feedback-textarea::placeholder { color: #5a4a70; } .wv-feedback-contact { width: 100%; margin-top: 10px; padding: 10px 14px; border: 1px solid rgba(180, 140, 220, 0.15); border-radius: 10px; background: rgba(20, 16, 36, 0.5); color: #c0b090; font-size: 13px; font-family: inherit; box-sizing: border-box; transition: border-color 0.2s; } .wv-feedback-contact:focus { outline: none; border-color: rgba(180, 140, 220, 0.4); } .wv-feedback-contact::placeholder { color: #5a4a70; } /* 弹窗底栏 */ .wv-feedback-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .wv-feedback-counter { font-size: 12px; color: #6a5a80; } .wv-feedback-submit { padding: 8px 24px; border: none; border-radius: 20px; background: linear-gradient(135deg, #6b3fa0 0%, #5a2d8a 100%); color: #f0e0c0; font-size: 14px; cursor: pointer; font-family: inherit; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 12px rgba(100, 60, 160, 0.3); } .wv-feedback-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(120, 80, 200, 0.45); } .wv-feedback-submit:active { transform: scale(0.97); } /* Toast 提示 */ .wv-feedback-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(16px); z-index: 9998; padding: 10px 24px; border-radius: 20px; background: rgba(30, 24, 50, 0.92); border: 1px solid rgba(180, 140, 220, 0.25); color: #e8d5b0; font-size: 14px; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; white-space: nowrap; backdrop-filter: blur(6px); } .wv-feedback-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* 移动端适配 */ @media (max-width: 500px) { .wv-feedback-fab { bottom: 16px; right: 16px; width: 42px; height: 42px; line-height: 42px; font-size: 20px; } .wv-feedback-dialog { width: calc(100vw - 32px); } .wv-feedback-toast { bottom: 72px; font-size: 13px; padding: 8px 20px; } }