@font-face { font-family: 'Inter'; src: url('https://static.soloblank.com/fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Noto Serif TC'; src: url('https://static.soloblank.com/fonts/NotoSerifTC.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } :root { --bg-void: #1a1e28; --bg-deep: #242a35; --glass-bg: rgba(136, 146, 162, 0.06); --glass-bg-hover: rgba(136, 146, 162, 0.10); --glass-border: rgba(136, 146, 162, 0.10); --glass-border-hover: rgba(136, 146, 162, 0.18); --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; --accent-ice: #79c0ff; --accent-steel: #a371f7; --accent-glow: rgba(121, 192, 255, 0.10); --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.10); --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.12); --shadow-glow-ice: 0 0 20px rgba(121, 192, 255, 0.15); --shadow-glow-steel: 0 0 20px rgba(163, 113, 247, 0.15); --font-chinese: 'Noto Serif TC', serif; --font-english: 'Inter', sans-serif; } /* ══════════════════════════════════════════ DaisyUI Custom Theme: SoloBlank Glassmorphism Dark — Ice Blue + Steel Purple ══════════════════════════════════════════ */ [data-theme="soloblank"] { color-scheme: dark; --color-base-100: oklch(15.5% 0.017 262); --color-base-200: oklch(20.5% 0.017 258); --color-base-300: oklch(25% 0.017 258); --color-base-content: oklch(94% 0.01 240); --color-primary: oklch(78% 0.12 238); --color-primary-content: oklch(15% 0.02 240); --color-secondary: oklch(60% 0.22 290); --color-secondary-content: oklch(96% 0.005 290); --color-accent: oklch(70% 0.17 265); --color-accent-content: oklch(15% 0.01 260); --color-neutral: oklch(25% 0.015 260); --color-neutral-content: oklch(90% 0.01 240); --color-info: oklch(72% 0.13 238); --color-info-content: oklch(15% 0.02 238); --color-success: oklch(70% 0.18 148); --color-success-content: oklch(15% 0.02 148); --color-warning: oklch(72% 0.16 78); --color-warning-content: oklch(15% 0.02 78); --color-error: oklch(64% 0.22 25); --color-error-content: oklch(96% 0.01 25); --radius-selector: 0.75rem; --radius-field: 0.75rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } /* 與 一致：zh、zh-Hant、zh-TW 等皆使用中文襯線字體 */ [lang|="zh"] { --font-heading: 'Noto Serif TC', serif; --font-body: 'Noto Serif TC', serif; } [lang|="en"] { --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body), sans-serif; /* 讓背景氛圍層（.bg-atmosphere）可見：避免 body 不透明背景覆蓋漸變 */ background: transparent; background-color: transparent; color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } html { background: transparent; background-color: transparent; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading), sans-serif; letter-spacing: -0.02em; } /* ══ Glass Utilities ══ */ .glass { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); } .glass-card { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.08) 0%, rgba(136, 146, 162, 0.03) 100% ); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(136, 146, 162, 0.10); box-shadow: var(--shadow-medium); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .glass-card:hover { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.12) 0%, rgba(136, 146, 162, 0.05) 100% ); border-color: rgba(121, 192, 255, 0.25); box-shadow: var(--shadow-large), var(--shadow-glow-ice); transform: translateY(-2px); } .glass-card-static { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.07) 0%, rgba(136, 146, 162, 0.03) 100% ); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(136, 146, 162, 0.10); box-shadow: var(--shadow-medium); } .glass-btn { background: linear-gradient( 135deg, rgba(121, 192, 255, 0.18) 0%, rgba(163, 113, 247, 0.18) 100% ); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(121, 192, 255, 0.30); box-shadow: var(--shadow-medium); color: var(--text-primary); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .glass-btn:hover { background: linear-gradient( 135deg, rgba(121, 192, 255, 0.28) 0%, rgba(163, 113, 247, 0.28) 100% ); border-color: rgba(121, 192, 255, 0.50); box-shadow: var(--shadow-large), var(--shadow-glow-ice); transform: translateY(-1px); } .glass-btn:active { transform: translateY(0); box-shadow: var(--shadow-soft); } /* ══ Text Gradient ══ */ .text-gradient { background: linear-gradient(135deg, #e6edf3 0%, #79c0ff 40%, #a371f7 70%, #c4b5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-subtle { background: linear-gradient(135deg, #e6edf3 0%, #8b949e 50%, #6e7681 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ══ Background Atmosphere ══ */ .bg-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-void); width: 100%; max-width: 100vw; } .bg-atmosphere-gradient { /* 彩色漸變氛圍底圖（用低透明度，保留玻璃卡片的可讀性） */ background: linear-gradient( 135deg, rgba(121, 192, 255, 0.28) 0%, rgba(163, 113, 247, 0.24) 35%, rgba(248, 81, 73, 0.18) 65%, rgba(63, 185, 80, 0.14) 100% ); --bg-atmosphere-gradient: linear-gradient( 135deg, rgba(121, 192, 255, 0.30) 0%, rgba(163, 113, 247, 0.26) 35%, rgba(248, 81, 73, 0.20) 65%, rgba(63, 185, 80, 0.16) 100% ); } .bg-atmosphere::before { content: ''; position: absolute; inset: -50%; width: 200%; height: 200%; background: var(--bg-atmosphere-gradient, transparent), radial-gradient(ellipse 800px 600px at 15% 20%, rgba(147, 197, 253, 0.11) 0%, transparent 60%), radial-gradient(ellipse 600px 800px at 85% 75%, rgba(167, 139, 250, 0.10) 0%, transparent 60%), radial-gradient(ellipse 900px 400px at 50% 50%, rgba(148, 163, 184, 0.06) 0%, transparent 50%); animation: drift 25s ease-in-out infinite; overflow-x: hidden; } .bg-atmosphere::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 1px at 20% 30%, rgba(148, 163, 184, 0.15) 0%, transparent 100%), radial-gradient(circle 1px at 60% 70%, rgba(147, 197, 253, 0.12) 0%, transparent 100%), radial-gradient(circle 1px at 80% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 100%), radial-gradient(circle 1px at 40% 80%, rgba(148, 163, 184, 0.12) 0%, transparent 100%), radial-gradient(circle 1px at 10% 60%, rgba(147, 197, 253, 0.1) 0%, transparent 100%), radial-gradient(circle 1px at 90% 50%, rgba(148, 163, 184, 0.08) 0%, transparent 100%); } /* ══ Navigation ══ */ .nav-link { position: relative; color: var(--text-secondary); transition: color 0.25s ease; letter-spacing: 0.02em; } .nav-link:hover { color: var(--text-primary); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-ice), transparent); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } /* ── Nav Menu Items ── */ .nav-menu-item { position: relative; display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-family: var(--font-body), sans-serif; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-primary); border-radius: 0.75rem; background: transparent; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nav-menu-item::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-ice), transparent); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(-50%); } .nav-menu-item:hover { color: var(--text-primary); background: rgba(136, 146, 162, 0.06); border-color: rgba(136, 146, 162, 0.08); } .nav-menu-item:hover::after { width: 60%; } .nav-dropdown .nav-menu-item.active { color: var(--text-primary); } .nav-dropdown .nav-menu-item.active > i { transform: rotate(180deg); } /* ── Nav Dropdown Menu ── */ .nav-dropdown-menu { background: linear-gradient( 145deg, rgba(36, 42, 53, 0.96) 0%, rgba(26, 30, 40, 0.98) 100% ); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(136, 146, 162, 0.12); border-radius: 1rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(136, 146, 162, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.03); opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); list-style: none; } .nav-dropdown-menu.open { display: block; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .nav-dropdown-item { display: block; padding: 0.5rem 1rem; font-family: var(--font-body), sans-serif; font-size: 0.8125rem; color: var(--text-primary); border-radius: 0.5rem; transition: all 0.2s ease; text-decoration: none; } .nav-dropdown-item:hover { color: var(--text-primary); background: rgba(121, 192, 255, 0.08); padding-left: 1.25rem; } .nav-dropdown-item:active { background: rgba(121, 192, 255, 0.12); } /* ── Mobile Menu Panel ── */ .mobile-menu-panel { background: linear-gradient( 160deg, rgba(36, 42, 53, 0.97) 0%, rgba(26, 30, 40, 0.99) 100% ); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgba(136, 146, 162, 0.12); border-radius: 1.25rem; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); opacity: 0; transform: translateY(8px) scale(0.95); transform-origin: top right; pointer-events: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu-panel.open { display: block; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .mobile-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.875rem; font-family: var(--font-body), sans-serif; font-size: 0.875rem; color: var(--text-primary); border-radius: 0.625rem; transition: all 0.2s ease; text-decoration: none; border: 1px solid transparent; } .mobile-menu-link:hover, .mobile-menu-link:active { color: var(--text-primary); background: rgba(136, 146, 162, 0.06); border-color: rgba(136, 146, 162, 0.06); } .mobile-menu-link.submenu-open { color: var(--text-primary); } .mobile-menu-link.submenu-open > i { transform: rotate(180deg); } .mobile-submenu { overflow: hidden; max-height: 0; transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-submenu.open { display: block; max-height: 200px; } .mobile-submenu-link { display: block; padding: 0.5rem 0.875rem 0.5rem 1.75rem; font-family: var(--font-body), sans-serif; font-size: 0.8125rem; color: var(--text-secondary); border-radius: 0.5rem; transition: all 0.2s ease; text-decoration: none; position: relative; } .mobile-submenu-link::before { content: ''; position: absolute; left: 0.875rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(136, 146, 162, 0.2); transform: translateY(-50%); transition: background 0.2s ease; } .mobile-submenu-link:hover { color: var(--text-primary); background: rgba(121, 192, 255, 0.06); } .mobile-submenu-link:hover::before { background: var(--accent-ice); } .mobile-menu-icon.open { transform: rotate(90deg); } /* ══ Input ══ */ .input-glass { background: rgba(136, 146, 162, 0.06); border: 1px solid rgba(136, 146, 162, 0.12); box-shadow: var(--shadow-soft); color: var(--text-primary); transition: all 0.25s ease; } .input-glass:focus { background: rgba(136, 146, 162, 0.10); border-color: rgba(121, 192, 255, 0.35); box-shadow: var(--shadow-soft), 0 0 0 3px rgba(121, 192, 255, 0.10); outline: none; } .input-glass::placeholder { color: var(--text-muted); } /* ══ Divider ══ */ .divider-glass { height: 1px; background: linear-gradient(90deg, transparent, rgba(136, 146, 162, 0.12), transparent); } /* ══ Scrollbar ══ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(136, 146, 162, 0.20); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(136, 146, 162, 0.30); } /* ══ Selection ══ */ ::selection { background: rgba(121, 192, 255, 0.25); color: #f0f6fc; } /* ═══════════════════════════════════════════════ DaisyUI Component Overrides — Glassmorphism Dark ═══════════════════════════════════════════════ */ /* ── Buttons ── */ [data-theme="soloblank"] .btn { font-family: var(--font-body), sans-serif; font-weight: 600; letter-spacing: 0.01em; border: 1px solid rgba(136, 146, 162, 0.12); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="soloblank"] .btn-primary { background: linear-gradient(135deg, rgba(121, 192, 255, 0.20) 0%, rgba(163, 113, 247, 0.20) 100%); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(121, 192, 255, 0.30); color: var(--text-primary); box-shadow: var(--shadow-medium); } [data-theme="soloblank"] .btn-primary:hover { background: linear-gradient(135deg, rgba(121, 192, 255, 0.32) 0%, rgba(163, 113, 247, 0.32) 100%); border-color: rgba(121, 192, 255, 0.50); box-shadow: var(--shadow-large), var(--shadow-glow-ice); transform: translateY(-1px); } [data-theme="soloblank"] .btn-secondary { background: linear-gradient(135deg, rgba(163, 113, 247, 0.20) 0%, rgba(196, 181, 253, 0.15) 100%); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(163, 113, 247, 0.30); color: var(--text-primary); box-shadow: var(--shadow-medium); } [data-theme="soloblank"] .btn-secondary:hover { background: linear-gradient(135deg, rgba(163, 113, 247, 0.32) 0%, rgba(196, 181, 253, 0.25) 100%); border-color: rgba(163, 113, 247, 0.50); box-shadow: var(--shadow-large), var(--shadow-glow-steel); transform: translateY(-1px); } [data-theme="soloblank"] .btn-accent { background: linear-gradient(135deg, rgba(121, 192, 255, 0.15) 0%, rgba(163, 113, 247, 0.15) 50%, rgba(196, 181, 253, 0.10) 100%); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(147, 197, 253, 0.25); color: var(--text-primary); } [data-theme="soloblank"] .btn-accent:hover { background: linear-gradient(135deg, rgba(121, 192, 255, 0.28) 0%, rgba(163, 113, 247, 0.28) 50%, rgba(196, 181, 253, 0.20) 100%); border-color: rgba(147, 197, 253, 0.45); box-shadow: var(--shadow-large), 0 0 20px rgba(147, 197, 253, 0.12); transform: translateY(-1px); } [data-theme="soloblank"] .btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; backdrop-filter: none; } [data-theme="soloblank"] .btn-ghost:hover { background: rgba(136, 146, 162, 0.08); color: var(--text-primary); border-color: transparent; box-shadow: none; transform: none; } [data-theme="soloblank"] .btn-outline { background: transparent; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: none; } [data-theme="soloblank"] .btn-outline.btn-primary { background: transparent; border: 1px solid rgba(121, 192, 255, 0.35); color: var(--accent-ice); } [data-theme="soloblank"] .btn-outline.btn-primary:hover { background: rgba(121, 192, 255, 0.12); border-color: rgba(121, 192, 255, 0.55); color: var(--text-primary); box-shadow: var(--shadow-glow-ice); } [data-theme="soloblank"] .btn-outline.btn-secondary { background: transparent; border: 1px solid rgba(163, 113, 247, 0.35); color: var(--accent-steel); } [data-theme="soloblank"] .btn-outline.btn-secondary:hover { background: rgba(163, 113, 247, 0.12); border-color: rgba(163, 113, 247, 0.55); color: var(--text-primary); box-shadow: var(--shadow-glow-steel); } [data-theme="soloblank"] .btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-soft); } [data-theme="soloblank"] .btn-info { background: rgba(88, 166, 255, 0.18); border: 1px solid rgba(88, 166, 255, 0.30); color: #58a6ff; } [data-theme="soloblank"] .btn-success { background: rgba(63, 185, 80, 0.18); border: 1px solid rgba(63, 185, 80, 0.30); color: #3fb950; } [data-theme="soloblank"] .btn-warning { background: rgba(210, 153, 34, 0.18); border: 1px solid rgba(210, 153, 34, 0.30); color: #d29922; } [data-theme="soloblank"] .btn-error { background: rgba(248, 81, 73, 0.18); border: 1px solid rgba(248, 81, 73, 0.30); color: #f85149; } /* ── Form Controls ── */ [data-theme="soloblank"] .input, [data-theme="soloblank"] .textarea, [data-theme="soloblank"] .select { background: rgba(136, 146, 162, 0.06); border: 1px solid rgba(136, 146, 162, 0.12); box-shadow: var(--shadow-soft); color: var(--text-primary); font-family: var(--font-body), sans-serif; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="soloblank"] .input:focus, [data-theme="soloblank"] .input:focus-within, [data-theme="soloblank"] .textarea:focus, [data-theme="soloblank"] .textarea:focus-within, [data-theme="soloblank"] .select:focus { background: linear-gradient( 135deg, rgba(121, 192, 255, 0.05) 0%, rgba(136, 146, 162, 0.08) 40%, rgba(163, 113, 247, 0.04) 100% ); border-color: rgba(121, 192, 255, 0.18); box-shadow: inset 0 0 16px rgba(121, 192, 255, 0.04), 0 0 0 1px rgba(121, 192, 255, 0.08), 0 0 8px rgba(121, 192, 255, 0.10), 0 0 20px rgba(121, 192, 255, 0.06), 0 0 40px rgba(163, 113, 247, 0.04); outline: none; outline-style: none; outline-width: 0; outline-offset: 0; } [data-theme="soloblank"] .input:focus-within > i, [data-theme="soloblank"] .input:focus-within > svg { opacity: 0.8; color: var(--accent-ice); transition: all 0.35s ease; } [data-theme="soloblank"] .input::placeholder, [data-theme="soloblank"] .textarea::placeholder { color: var(--text-muted); } [data-theme="soloblank"] .input-bordered, [data-theme="soloblank"] .textarea-bordered, [data-theme="soloblank"] .select-bordered { border-color: rgba(136, 146, 162, 0.15); } [data-theme="soloblank"] .input-primary:focus, [data-theme="soloblank"] .input-primary:focus-within { background: linear-gradient( 135deg, rgba(121, 192, 255, 0.06) 0%, rgba(136, 146, 162, 0.08) 50%, rgba(121, 192, 255, 0.04) 100% ); border-color: rgba(121, 192, 255, 0.22); box-shadow: inset 0 0 16px rgba(121, 192, 255, 0.05), 0 0 0 1px rgba(121, 192, 255, 0.10), 0 0 10px rgba(121, 192, 255, 0.12), 0 0 24px rgba(121, 192, 255, 0.07), 0 0 48px rgba(163, 113, 247, 0.04); outline: none; outline-style: none; outline-width: 0; outline-offset: 0; } [data-theme="soloblank"] .input-secondary:focus, [data-theme="soloblank"] .input-secondary:focus-within { background: linear-gradient( 135deg, rgba(163, 113, 247, 0.05) 0%, rgba(136, 146, 162, 0.08) 50%, rgba(163, 113, 247, 0.04) 100% ); border-color: rgba(163, 113, 247, 0.22); box-shadow: inset 0 0 16px rgba(163, 113, 247, 0.04), 0 0 0 1px rgba(163, 113, 247, 0.10), 0 0 10px rgba(163, 113, 247, 0.10), 0 0 24px rgba(163, 113, 247, 0.06), 0 0 48px rgba(121, 192, 255, 0.03); outline: none; outline-style: none; outline-width: 0; outline-offset: 0; } [data-theme="soloblank"] .input-error { border-color: rgba(248, 81, 73, 0.30); } [data-theme="soloblank"] .input-error:focus, [data-theme="soloblank"] .input-error:focus-within { background: linear-gradient( 135deg, rgba(248, 81, 73, 0.04) 0%, rgba(136, 146, 162, 0.06) 50%, rgba(248, 81, 73, 0.03) 100% ); border-color: rgba(248, 81, 73, 0.22); box-shadow: inset 0 0 16px rgba(248, 81, 73, 0.03), 0 0 0 1px rgba(248, 81, 73, 0.08), 0 0 8px rgba(248, 81, 73, 0.08), 0 0 20px rgba(248, 81, 73, 0.05); outline: none; outline-style: none; outline-width: 0; outline-offset: 0; } [data-theme="soloblank"] .label { color: var(--text-secondary); font-family: var(--font-body), sans-serif; font-size: 0.875rem; } [data-theme="soloblank"] .fieldset-legend, [data-theme="soloblank"] .fieldset legend { color: var(--text-secondary); font-family: var(--font-body), sans-serif; } /* ── Checkbox / Radio / Toggle ── */ [data-theme="soloblank"] .checkbox { border-color: rgba(136, 146, 162, 0.25); background: rgba(136, 146, 162, 0.06); } [data-theme="soloblank"] .checkbox:checked, [data-theme="soloblank"] .checkbox-primary:checked { background: var(--accent-ice); border-color: var(--accent-ice); } [data-theme="soloblank"] .checkbox-secondary:checked { background: var(--accent-steel); border-color: var(--accent-steel); } [data-theme="soloblank"] .radio { border-color: rgba(136, 146, 162, 0.25); background: rgba(136, 146, 162, 0.06); } [data-theme="soloblank"] .radio:checked, [data-theme="soloblank"] .radio-primary:checked { background: var(--accent-ice); border-color: var(--accent-ice); } [data-theme="soloblank"] .radio-secondary:checked { background: var(--accent-steel); border-color: var(--accent-steel); } [data-theme="soloblank"] .toggle { background: rgba(136, 146, 162, 0.15); border-color: rgba(136, 146, 162, 0.20); } [data-theme="soloblank"] .toggle:checked, [data-theme="soloblank"] .toggle-primary:checked { background: var(--accent-ice); border-color: var(--accent-ice); } [data-theme="soloblank"] .toggle-secondary:checked { background: var(--accent-steel); border-color: var(--accent-steel); } /* ── Modal ── */ [data-theme="soloblank"] .modal-box { background: linear-gradient( 145deg, rgba(36, 42, 53, 0.95) 0%, rgba(26, 30, 40, 0.98) 100% ); backdrop-filter: blur(32px) saturate(1.4); -webkit-backdrop-filter: blur(32px) saturate(1.4); border: 1px solid rgba(136, 146, 162, 0.12); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.03); color: var(--text-primary); } [data-theme="soloblank"] .modal-backdrop { background: rgba(4, 6, 12, 0.70); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-theme="soloblank"] .modal-action .btn { min-width: 5rem; } /* ── Card ── */ [data-theme="soloblank"] .card { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.08) 0%, rgba(136, 146, 162, 0.03) 100% ); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(136, 146, 162, 0.10); box-shadow: var(--shadow-medium); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); color: var(--text-primary); } [data-theme="soloblank"] .card:hover { border-color: rgba(121, 192, 255, 0.20); box-shadow: var(--shadow-large), var(--shadow-glow-ice); } [data-theme="soloblank"] .card-title { font-family: var(--font-heading), sans-serif; color: var(--text-primary); } [data-theme="soloblank"] .card-body { color: var(--text-secondary); } /* ── Alert ── */ [data-theme="soloblank"] .alert { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(136, 146, 162, 0.10); box-shadow: var(--shadow-soft); } [data-theme="soloblank"] .alert-info { background: rgba(88, 166, 255, 0.10); border-color: rgba(88, 166, 255, 0.25); color: #58a6ff; } [data-theme="soloblank"] .alert-success { background: rgba(63, 185, 80, 0.10); border-color: rgba(63, 185, 80, 0.25); color: #3fb950; } [data-theme="soloblank"] .alert-warning { background: rgba(210, 153, 34, 0.10); border-color: rgba(210, 153, 34, 0.25); color: #d29922; } [data-theme="soloblank"] .alert-error { background: rgba(248, 81, 73, 0.10); border-color: rgba(248, 81, 73, 0.25); color: #f85149; } /* ── Badge ── */ [data-theme="soloblank"] .badge { border: 1px solid rgba(136, 146, 162, 0.15); font-family: var(--font-body), sans-serif; } [data-theme="soloblank"] .badge-primary { background: rgba(121, 192, 255, 0.15); border-color: rgba(121, 192, 255, 0.30); color: var(--accent-ice); } [data-theme="soloblank"] .badge-secondary { background: rgba(163, 113, 247, 0.15); border-color: rgba(163, 113, 247, 0.30); color: var(--accent-steel); } [data-theme="soloblank"] .badge-accent { background: rgba(147, 197, 253, 0.12); border-color: rgba(147, 197, 253, 0.25); color: #93c5fd; } [data-theme="soloblank"] .badge-info { background: rgba(88, 166, 255, 0.15); border-color: rgba(88, 166, 255, 0.30); color: #58a6ff; } [data-theme="soloblank"] .badge-success { background: rgba(63, 185, 80, 0.15); border-color: rgba(63, 185, 80, 0.30); color: #3fb950; } [data-theme="soloblank"] .badge-warning { background: rgba(210, 153, 34, 0.15); border-color: rgba(210, 153, 34, 0.30); color: #d29922; } [data-theme="soloblank"] .badge-error { background: rgba(248, 81, 73, 0.15); border-color: rgba(248, 81, 73, 0.30); color: #f85149; } [data-theme="soloblank"] .badge-outline { background: transparent; } /* ── Menu / Dropdown ── */ [data-theme="soloblank"] .menu { font-family: var(--font-body), sans-serif; color: var(--text-secondary); } [data-theme="soloblank"] .menu li > a, [data-theme="soloblank"] .menu li > button { transition: all 0.2s ease; border-radius: 0.75rem; } [data-theme="soloblank"] .menu li > a:hover, [data-theme="soloblank"] .menu li > button:hover { background: rgba(136, 146, 162, 0.08); color: var(--text-primary); } [data-theme="soloblank"] .menu li > a.active, [data-theme="soloblank"] .menu li > a:active, [data-theme="soloblank"] .menu li > button.active { background: rgba(121, 192, 255, 0.10); color: var(--accent-ice); } [data-theme="soloblank"] .menu-title { color: var(--text-muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.75rem; } [data-theme="soloblank"] .dropdown-content { background: linear-gradient( 145deg, rgba(36, 42, 53, 0.96) 0%, rgba(26, 30, 40, 0.98) 100% ); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(136, 146, 162, 0.12); box-shadow: var(--shadow-large); } /* ── Tabs ── */ [data-theme="soloblank"] .tabs { font-family: var(--font-body), sans-serif; } [data-theme="soloblank"] .tab { color: var(--text-muted); transition: all 0.25s ease; } [data-theme="soloblank"] .tab:hover { color: var(--text-primary); } [data-theme="soloblank"] .tab-active, [data-theme="soloblank"] .tab[aria-selected="true"], [data-theme="soloblank"] .tab:checked { color: var(--accent-ice); border-color: var(--accent-ice); } [data-theme="soloblank"] .tabs-box .tab-active, [data-theme="soloblank"] .tabs-box .tab[aria-selected="true"], [data-theme="soloblank"] .tabs-box .tab:checked { background: rgba(121, 192, 255, 0.10); color: var(--accent-ice); border-color: rgba(121, 192, 255, 0.25); } [data-theme="soloblank"] .tabs-border .tab-active, [data-theme="soloblank"] .tabs-border .tab[aria-selected="true"], [data-theme="soloblank"] .tabs-border .tab:checked { border-bottom-color: var(--accent-ice); } /* ── Tooltip ── */ [data-theme="soloblank"] .tooltip::before { background: rgba(36, 42, 53, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(136, 146, 162, 0.12); color: var(--text-primary); font-family: var(--font-body), sans-serif; box-shadow: var(--shadow-medium); } /* ── Navbar ── */ [data-theme="soloblank"] .navbar { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); color: var(--text-primary); } /* ── Divider (DaisyUI) ── */ [data-theme="soloblank"] .divider { color: var(--text-muted); font-size: 0.75rem; } [data-theme="soloblank"] .divider::before, [data-theme="soloblank"] .divider::after { background: linear-gradient(90deg, transparent, rgba(136, 146, 162, 0.12), transparent); height: 1px; } /* ── Progress ── */ [data-theme="soloblank"] .progress { background: rgba(136, 146, 162, 0.10); border-radius: 9999px; overflow: hidden; } [data-theme="soloblank"] .progress::-webkit-progress-bar { background: rgba(136, 146, 162, 0.10); } [data-theme="soloblank"] .progress-primary::-webkit-progress-value, [data-theme="soloblank"] .progress-primary::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-ice), var(--accent-steel)); } /* ── Loading ── */ [data-theme="soloblank"] .loading { color: var(--accent-ice); } /* ── Table ── */ [data-theme="soloblank"] .table { font-family: var(--font-body), sans-serif; color: var(--text-primary); } [data-theme="soloblank"] .table th { font-family: var(--font-heading), sans-serif; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border-bottom: 1px solid rgba(136, 146, 162, 0.12); background: transparent; } [data-theme="soloblank"] .table td { border-bottom: 1px solid rgba(136, 146, 162, 0.06); } [data-theme="soloblank"] .table tr:hover, [data-theme="soloblank"] .table-zebra tr:nth-child(even) { background: rgba(136, 146, 162, 0.04); } /* ── Collapse / Accordion ── */ [data-theme="soloblank"] .collapse { background: rgba(136, 146, 162, 0.04); border: 1px solid rgba(136, 146, 162, 0.10); transition: all 0.25s ease; } [data-theme="soloblank"] .collapse:hover { border-color: rgba(136, 146, 162, 0.18); } [data-theme="soloblank"] .collapse-title { font-family: var(--font-heading), sans-serif; color: var(--text-primary); } /* ── Breadcrumbs ── */ [data-theme="soloblank"] .breadcrumbs { font-family: var(--font-body), sans-serif; color: var(--text-muted); } [data-theme="soloblank"] .breadcrumbs li a { color: var(--text-secondary); transition: color 0.2s ease; } [data-theme="soloblank"] .breadcrumbs li a:hover { color: var(--accent-ice); } /* ── Steps ── */ [data-theme="soloblank"] .steps .step::before { background: rgba(136, 146, 162, 0.15); } [data-theme="soloblank"] .steps .step-primary::before, [data-theme="soloblank"] .steps .step-primary::after { background: var(--accent-ice); color: var(--bg-void); } /* ── Chat Bubble ── */ [data-theme="soloblank"] .chat-bubble { background: rgba(136, 146, 162, 0.08); border: 1px solid rgba(136, 146, 162, 0.10); color: var(--text-primary); } [data-theme="soloblank"] .chat-bubble-primary { background: rgba(121, 192, 255, 0.12); border-color: rgba(121, 192, 255, 0.20); } [data-theme="soloblank"] .chat-bubble-secondary { background: rgba(163, 113, 247, 0.12); border-color: rgba(163, 113, 247, 0.20); } /* ── Range ── */ [data-theme="soloblank"] .range { background: rgba(136, 146, 162, 0.12); } [data-theme="soloblank"] .range::-webkit-slider-thumb { background: var(--accent-ice); border: 2px solid rgba(121, 192, 255, 0.50); } /* ── Rating ── */ [data-theme="soloblank"] .rating .mask { background: var(--accent-ice); } /* ── Skeleton ── */ [data-theme="soloblank"] .skeleton { background: rgba(136, 146, 162, 0.08); } /* ── Drawer ── */ [data-theme="soloblank"] .drawer-side { background: rgba(4, 6, 12, 0.70); } [data-theme="soloblank"] .drawer-side > .drawer-overlay { background: rgba(4, 6, 12, 0.60); } [data-theme="soloblank"] .drawer-side > ul { background: linear-gradient( 180deg, rgba(26, 30, 40, 0.98) 0%, rgba(36, 42, 53, 0.98) 100% ); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-right: 1px solid rgba(136, 146, 162, 0.10); } /* ── File Input ── */ [data-theme="soloblank"] .file-input { background: rgba(136, 146, 162, 0.06); border: 1px solid rgba(136, 146, 162, 0.12); color: var(--text-primary); } [data-theme="soloblank"] .file-input::file-selector-button { background: rgba(136, 146, 162, 0.10); border-right: 1px solid rgba(136, 146, 162, 0.12); color: var(--text-secondary); } /* ── Swap ── */ [data-theme="soloblank"] .swap { color: var(--text-secondary); transition: color 0.25s ease; } [data-theme="soloblank"] .swap:hover { color: var(--text-primary); } /* ── Join (Button Group) ── */ [data-theme="soloblank"] .join .btn { border-color: rgba(136, 146, 162, 0.12); } /* ── Timeline ── */ [data-theme="soloblank"] .timeline-start, [data-theme="soloblank"] .timeline-end { color: var(--text-secondary); } [data-theme="soloblank"] .timeline hr { background: rgba(136, 146, 162, 0.15); } /* ── Stat ── */ [data-theme="soloblank"] .stats { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.06) 0%, rgba(136, 146, 162, 0.02) 100% ); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(136, 146, 162, 0.10); box-shadow: var(--shadow-soft); } [data-theme="soloblank"] .stat-title { color: var(--text-muted); font-family: var(--font-body), sans-serif; } [data-theme="soloblank"] .stat-value { font-family: var(--font-heading), sans-serif; color: var(--text-primary); } [data-theme="soloblank"] .stat-desc { color: var(--text-muted); } /* ── Diff ── */ [data-theme="soloblank"] .diff-item-1 { background: var(--bg-void); } [data-theme="soloblank"] .diff-item-2 { background: var(--bg-deep); } /* ── Countdown ── */ [data-theme="soloblank"] .countdown { font-family: var(--font-heading), sans-serif; color: var(--text-primary); } /* ── Pagination / Join Button Active ── */ [data-theme="soloblank"] .join .btn.btn-active, [data-theme="soloblank"] .join .btn[aria-current="page"] { background: rgba(121, 192, 255, 0.15); border-color: rgba(121, 192, 255, 0.30); color: var(--accent-ice); } /* ── Select inside .input wrapper ── */ [data-theme="soloblank"] .input .select { border: none; background: transparent; box-shadow: none; padding: 0; min-height: 0; height: auto; font-size: inherit; } [data-theme="soloblank"] .input .select:focus { border: none; background: transparent; box-shadow: none; outline: none; } [data-theme="soloblank"] .input .select option { background: var(--bg-deep); color: var(--text-primary); padding: 0.5rem 0.75rem; } [data-theme="soloblank"] .select option:disabled { color: var(--text-muted); } [data-theme="soloblank"] .select:invalid { color: var(--text-muted); } /* ── Validator hint inside .input flex wrapper ── */ [data-theme="soloblank"] .input { position: relative; } [data-theme="soloblank"] .input .validator-hint { position: absolute; top: 100%; left: 0; width: 100%; z-index: 10; } [data-theme="soloblank"] .input:has(.validator:user-invalid) { margin-bottom: 1.25rem; } /* ── Focus Ring (global override for a11y) ── */ [data-theme="soloblank"] *:focus-visible { outline: 2px solid rgba(121, 192, 255, 0.50); outline-offset: 2px; } [data-theme="soloblank"] .input:focus-visible, [data-theme="soloblank"] .textarea:focus-visible, [data-theme="soloblank"] .select:focus-visible, [data-theme="soloblank"] .input input:focus-visible, [data-theme="soloblank"] .input input:focus, [data-theme="soloblank"] .textarea textarea:focus-visible, [data-theme="soloblank"] .select select:focus-visible { outline: none; outline-style: none; outline-width: 0; outline-offset: 0; } /* ══ Keyframes ══ */ @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(2%, 1%) scale(1.02); } 50% { transform: translate(-1%, 2%) scale(0.98); } 75% { transform: translate(1%, -1%) scale(1.01); } } @keyframes glowPulse { 0% { opacity: 0.4; } 100% { opacity: 0.7; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(12px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.05); opacity: 0.5; } } /* ═══════════════════════════════════════════════ Inline Style Replacements (H021 — No Inline Styles) These classes replace inline style attributes across all templates. Static values only — dynamic values ({{ ... }}) remain inline with djlint:off markers. ═══════════════════════════════════════════════ */ /* ── Portfolio Work Card ── */ .work-card { aspect-ratio: 3 / 4; background: linear-gradient(165deg, rgba(136,146,162,0.06) 0%, rgba(136,146,162,0.01) 100%); border: 1px solid rgba(136,146,162,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15); } .work-card-media-overlay { background: rgba(4,6,12,0.55); border: 1px solid rgba(147,197,253,0.25); box-shadow: 0 0 12px rgba(147,197,253,0.1); } .work-card-glow-ring { box-shadow: inset 0 0 60px rgba(147,197,253,0.06); } .work-card-description-overlay { height: 38%; background: linear-gradient(to top, rgba(4,6,12,0.92) 0%, rgba(4,6,12,0.65) 45%, rgba(4,6,12,0.15) 80%, transparent 100%); } .work-card-description-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .work-card-footer { background: rgba(136,146,162,0.03); border-top: 1px solid rgba(136,146,162,0.06); } .work-card-hover-glow { box-shadow: inset 0 0 0 1px rgba(147,197,253,0.18), 0 0 30px rgba(147,197,253,0.08); } /* ── Comment Card ── */ .comment-card { border-bottom: 1px solid rgba(136,146,162,0.06); } .comment-avatar-fallback { background: linear-gradient(135deg, rgba(147,197,253,0.15) 0%, rgba(167,139,250,0.15) 100%); border: 1px solid rgba(136,146,162,0.12); } .comment-user-card { background: linear-gradient(160deg, rgba(36,42,53,0.97) 0%, rgba(26,30,40,0.99) 100%); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgba(136,146,162,0.12); box-shadow: 0 16px 56px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03); } .comment-avatar-fallback-lg { background: linear-gradient(135deg, rgba(147,197,253,0.18) 0%, rgba(167,139,250,0.18) 100%); border: 1px solid rgba(136,146,162,0.15); } .comment-divider { background: linear-gradient(90deg, transparent, rgba(136,146,162,0.12), transparent); } .comment-tag { background: rgba(136,146,162,0.06); border: 1px solid rgba(136,146,162,0.1); } .comment-tag-accent { background: rgba(147,197,253,0.08); border: 1px solid rgba(147,197,253,0.15); color: var(--accent-ice); } .comment-bio-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Favorite Icon ── */ .favorite-icon-solid { background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.25); color: #f85149; } .favorite-icon-outline { border: 1px solid rgba(136,146,162,0.1); } /* ── Works Grid Fade-in (partials) ── */ .fade-in-start { opacity: 0; } /* ── Home Page ── */ .home-hero-glow { background: radial-gradient(circle, rgba(147,197,253,0.15) 0%, transparent 70%); } .home-stagger-1 { animation-delay: 0.1s; } .home-stagger-2 { animation-delay: 0.2s; } .home-feature-glow { background: radial-gradient(circle, rgba(167,139,250,0.3) 0%, transparent 70%); } .home-icon-glow { box-shadow: 0 0 6px rgba(96,165,250,0.4); } .home-feature-bg { background: linear-gradient(135deg, rgba(147,197,253,0.03) 0%, transparent 50%, rgba(167,139,250,0.03) 100%); } /* ── Portfolios SFW/NSFW Page ── */ .portfolio-hero-gradient { background: linear-gradient(90deg, rgba(147,197,253,0.5) 0%, rgba(167,139,250,0.3) 60%, transparent 100%); } .portfolio-nsfw-badge { background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.25); color: #f85149; } .portfolio-nsfw-hero-gradient { background: linear-gradient(90deg, rgba(248,81,73,0.4) 0%, rgba(167,139,250,0.3) 60%, transparent 100%); } .portfolio-section-fade { animation-delay: 0.08s; opacity: 0; } .portfolio-card-bg { background: rgba(136,146,162,0.04); border: 1px solid rgba(136,146,162,0.07); } .portfolio-card-divider { background: rgba(136,146,162,0.12); } .portfolio-mobile-menu-bg { background: linear-gradient(145deg, rgba(36,42,53,0.97) 0%, rgba(26,30,40,0.99) 100%); } .portfolio-circle-glow { background: radial-gradient(circle, rgba(147,197,253,0.08) 0%, transparent 70%); } /* ── Work Detail ── */ .detail-section-border { border: 1px solid rgba(136,146,162,0.08); } .detail-section-bg { background: linear-gradient(165deg, rgba(136,146,162,0.06) 0%, rgba(136,146,162,0.02) 100%); } .detail-letter-spacing { letter-spacing: 0.15em; } .detail-pill { background: rgba(147,197,253,0.08); border: 1px solid rgba(147,197,253,0.15); } .detail-prompt-box { max-height: 12rem; overflow-y: auto; } .detail-row-bg { background: rgba(136,146,162,0.06); border: 1px solid rgba(136,146,162,0.1); } .detail-row-hidden { background: rgba(136,146,162,0.06); border: 1px solid rgba(136,146,162,0.1); display: none; } .detail-border-bottom { border-bottom: 1px solid rgba(136,146,162,0.06); } .detail-star-cell { background-color: currentColor; } .detail-table-border { border: 1px solid rgba(136,146,162,0.1); } .detail-table-accent { background: rgba(147,197,253,0.1); border: 1px solid rgba(147,197,253,0.2); color: var(--accent-ice); } .detail-modal-box { border: 1px solid rgba(136,146,162,0.15); } .detail-modal-backdrop { background: rgba(6, 10, 19, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .detail-mobile-menu-bg { background: rgba(136,146,162,0.05); border: 1px solid rgba(136,146,162,0.1); } .detail-divider-glow { background: linear-gradient(90deg, transparent 0%, rgba(147,197,253,0.2) 30%, rgba(167,139,250,0.2) 70%, transparent 100%); } /* ── Action Button Group (Unified Gradient) ── */ .action-btn-group { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.375rem; background: linear-gradient( 135deg, rgba(147, 197, 253, 0.08) 0%, rgba(167, 139, 250, 0.08) 50%, rgba(147, 197, 253, 0.08) 100% ); border-radius: 1rem; border: 1px solid rgba(147, 197, 253, 0.15); box-shadow: 0 0 20px rgba(147, 197, 253, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .action-btn-group::before { content: ''; position: absolute; inset: -1px; border-radius: 1rem; background: linear-gradient( 135deg, rgba(147, 197, 253, 0.25) 0%, rgba(167, 139, 250, 0.20) 40%, rgba(147, 197, 253, 0.15) 70%, rgba(167, 139, 250, 0.10) 100% ); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .action-btn-group:hover::before { opacity: 1; } .action-btn { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.75rem; border: 1px solid transparent; background: transparent; color: var(--accent-frost); cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; } .action-btn:hover { background: rgba(147, 197, 253, 0.12); border-color: rgba(147, 197, 253, 0.2); color: var(--accent-ice); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(147, 197, 253, 0.1); } .action-btn:active { transform: translateY(0); box-shadow: none; } .action-btn:disabled, .action-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .action-btn-icon { font-size: 0.625rem; width: 1rem; display: inline-flex; align-items: center; justify-content: center; } /* Favorite button special state */ .action-btn-favorite { color: #f472b6; } .action-btn-favorite:hover { color: #f9a8d4; background: rgba(244, 114, 182, 0.12); border-color: rgba(244, 114, 182, 0.2); box-shadow: 0 4px 12px rgba(244, 114, 182, 0.1); } /* Accent button (HD download) */ .action-btn-accent { background: rgba(147, 197, 253, 0.1); border-color: rgba(147, 197, 253, 0.2); color: var(--accent-ice); } .action-btn-accent:hover { background: rgba(147, 197, 253, 0.18); border-color: rgba(147, 197, 253, 0.35); } /* Danger button (delete) */ .action-btn-danger:hover { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.2); color: #f87171; box-shadow: 0 4px 12px rgba(248, 113, 113, 0.1); } /* ── Work Edit / Upload ── */ .edit-hero-gradient { background: linear-gradient(90deg, rgba(147,197,253,0.5) 0%, rgba(167,139,250,0.3) 60%, transparent 100%); } .edit-stagger { animation-delay: 0.1s; opacity: 0; } .edit-input-wrapper { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .edit-hero-circle { background: radial-gradient(circle, rgba(147,197,253,0.2) 0%, transparent 70%); } .edit-surface { background: linear-gradient(135deg, rgba(147,197,253,0.15) 0%, rgba(167,139,250,0.08) 100%); } /* ── Avatar Cropper ── */ .cropper-container { max-height: 60vh; } /* ── Inner Rating ── */ .rating-star-color { background-color: currentColor; } /* ═══════════════════════════════════════════════ Forum / Community — Ice Blue + Steel Purple Matches site-wide text-gradient color scheme ═══════════════════════════════════════════════ */ /* ── Title Gradient (reuse site text-gradient) ── */ .forum-title-gradient { background: linear-gradient(135deg, #e6edf3 0%, #c4b5fd 30%, #a371f7 60%, #79c0ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Accent color ── */ .forum-accent-text { color: var(--accent-ice); } /* ── Icon glow ── */ .forum-icon-glow { background: rgba(121, 192, 255, 0.08); border: 1px solid rgba(121, 192, 255, 0.20); box-shadow: 0 0 12px rgba(121, 192, 255, 0.10); } .forum-icon-glow-sm { background: rgba(121, 192, 255, 0.08); border: 1px solid rgba(121, 192, 255, 0.15); } /* ── Create Button (ice → steel gradient) ── */ .forum-btn-create { background: linear-gradient(135deg, rgba(163, 113, 247, 0.20) 0%, rgba(121, 192, 255, 0.20) 100%); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(121, 192, 255, 0.30); color: var(--text-primary); box-shadow: var(--shadow-medium); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .forum-btn-create:hover { background: linear-gradient(135deg, rgba(163, 113, 247, 0.32) 0%, rgba(121, 192, 255, 0.32) 100%); border-color: rgba(121, 192, 255, 0.50); box-shadow: var(--shadow-large), var(--shadow-glow-ice); transform: translateY(-1px); } /* ── Active Tab ── */ .forum-tab-active { background: linear-gradient(135deg, rgba(163, 113, 247, 0.15) 0%, rgba(121, 192, 255, 0.10) 100%); border: 1px solid rgba(121, 192, 255, 0.25); color: var(--text-primary); } /* 桌面端主題列表行：默認扁平列表，僅 hover 顯示毛玻璃、邊框與陰影 */ .forum-thread-row { background: transparent; border: 1px solid transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .forum-thread-row:hover { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.1) 0%, rgba(121, 192, 255, 0.05) 100% ); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-color: rgba(121, 192, 255, 0.22); box-shadow: var(--shadow-medium), 0 0 18px rgba(121, 192, 255, 0.08); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .forum-thread-row:hover { transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* 桌面列表外層：不作獨立卡片，僅承載行項目 */ .forum-thread-list-shell { background: transparent; border: none; box-shadow: none; } /* ── Hero divider ── */ .forum-divider-gradient { background: linear-gradient(90deg, rgba(163, 113, 247, 0.50), rgba(121, 192, 255, 0.30), transparent); } /* ── Thread Card ── */ .forum-thread-card { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.05) 0%, rgba(136, 146, 162, 0.02) 100% ); border: 1px solid rgba(136, 146, 162, 0.08); box-shadow: var(--shadow-soft); } .forum-thread-card:hover { background: linear-gradient( 145deg, rgba(136, 146, 162, 0.09) 0%, rgba(121, 192, 255, 0.03) 100% ); border-color: rgba(121, 192, 255, 0.20); box-shadow: var(--shadow-medium), var(--shadow-glow-ice); transform: translateY(-1px); } .forum-thread-pinned { background: linear-gradient( 145deg, rgba(121, 192, 255, 0.05) 0%, rgba(136, 146, 162, 0.04) 100% ); border-color: rgba(121, 192, 255, 0.12); } .forum-thread-pinned:hover { border-color: rgba(121, 192, 255, 0.25); box-shadow: var(--shadow-medium), 0 0 20px rgba(121, 192, 255, 0.10); } /* ── Pinned Badge ── */ .forum-badge-pinned { background: rgba(121, 192, 255, 0.12); border: 1px solid rgba(121, 192, 255, 0.25); color: var(--accent-ice); } /* ── Category Badge ── */ .forum-badge-category { background: rgba(163, 113, 247, 0.10); border: 1px solid rgba(163, 113, 247, 0.20); color: var(--accent-steel); } /* ── Category Active ── */ .forum-cat-active { background: rgba(121, 192, 255, 0.10); border: 1px solid rgba(121, 192, 255, 0.20); color: var(--accent-ice); } /* ── Empty state icon ── */ .forum-empty-icon { background: rgba(136, 146, 162, 0.05); border: 1px dashed rgba(136, 146, 162, 0.12); } /* ── Role Badges (BDSM Power Dynamics) ── */ .forum-role-badge { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 4px; white-space: nowrap; font-family: var(--font-body), sans-serif; } .forum-role-dominant { background: rgba(121, 192, 255, 0.12); border: 1px solid rgba(121, 192, 255, 0.25); color: #79c0ff; } .forum-role-submissive { background: rgba(196, 181, 253, 0.12); border: 1px solid rgba(196, 181, 253, 0.25); color: #c4b5fd; } .forum-role-switch { background: rgba(163, 113, 247, 0.12); border: 1px solid rgba(163, 113, 247, 0.25); color: #a78bfa; } .forum-role-sadist { background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.25); color: #60a5fa; } .forum-role-masochist { background: rgba(147, 197, 253, 0.12); border: 1px solid rgba(147, 197, 253, 0.25); color: #93c5fd; } .forum-role-unsure { background: rgba(136, 146, 162, 0.08); border: 1px solid rgba(136, 146, 162, 0.15); color: var(--text-muted); } /* ── Floating Action Button (Forum) ── */ .forum-fab { background: linear-gradient(135deg, rgba(163, 113, 247, 0.30) 0%, rgba(121, 192, 255, 0.30) 100%); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(121, 192, 255, 0.30); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), 0 0 16px rgba(121, 192, 255, 0.10); } .forum-fab:hover { background: linear-gradient(135deg, rgba(163, 113, 247, 0.45) 0%, rgba(121, 192, 255, 0.45) 100%); border-color: rgba(121, 192, 255, 0.50); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(121, 192, 255, 0.20); transform: translateY(-2px); } .forum-fab:active { transform: translateY(0); } /* ══ Sponsor Page ══ */ .sponsor-tier-selected { border-color: rgba(147, 197, 253, 0.35) !important; background: rgba(148, 163, 184, 0.08); box-shadow: 0 0 20px rgba(147, 197, 253, 0.08), inset 0 1px 0 rgba(147, 197, 253, 0.06); } /* ══ Reduced Motion ══ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }