/* * article.css — shared styles for blog article detail pages * * Covers: breadcrumb, article header/body/sidebar, recommend section, float widget, responsive breakpoints. * Include in of every blog article page: * * * !! Modifying this file affects all blog article pages — change styles with care !! */ /* ── Hide language switcher (not needed on article pages) ──────────────── */ #header-lang-switcher { display: none !important; } #footer-lang-switcher { display: none !important; } select.lang-select { display: none !important; } /* ── Article layout (main column + sidebar) ────────────────────────────── */ .article-wrap { display: grid; grid-template-columns: 1fr 260px; gap: 48px; padding: 0 0 80px; align-items: start; } .article-wrap > * { min-width: 0; } /* ── Breadcrumb ─────────────────────────────────────────────────────────── */ .breadcrumb { padding: 40px 0 28px; font-family: var(--font-code); font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); transition: color 0.2s; } .breadcrumb a:hover { color: var(--neon-cyan); text-shadow: none; } .breadcrumb .sep { color: rgba(255,255,255,0.15); } .breadcrumb .current { color: var(--neon-cyan); } /* ── Article header ─────────────────────────────────────────────────────── */ .article-header { margin-bottom: 40px; } .article-eyebrow { font-family: var(--font-code); font-size: 0.72rem; color: var(--neon-cyan); letter-spacing: 1.5px; margin-bottom: 14px; } .article-title { font-size: 2rem; line-height: 1.3; color: var(--text-bright); margin-bottom: 18px; letter-spacing: 0.3px; } .article-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--font-code); font-size: 0.76rem; color: var(--text-muted); padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 32px; } .article-meta .meta-item { display: flex; align-items: center; gap: 6px; } .meta-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; } .meta-tag { font-family: var(--font-code); font-size: 0.66rem; padding: 2px 8px; border-radius: 2px; background: rgba(0,212,255,0.06); color: var(--neon-cyan); border: 1px solid rgba(0,212,255,0.18); } /* ── Article body ───────────────────────────────────────────────────────── */ .article-body { color: var(--text-body); font-size: 0.95rem; line-height: 1.85; } .article-body p { margin-bottom: 1.4em; } .article-body h2 { font-size: 1.25rem; color: var(--text-bright); margin: 2.4em 0 0.8em; padding-left: 14px; border-left: 3px solid var(--neon-cyan); font-weight: 600; } .article-body h3 { font-size: 1.05rem; color: var(--text-bright); margin: 1.8em 0 0.6em; } .article-body strong { color: var(--text-bright); font-weight: 600; } .article-body em { color: var(--neon-amber); font-style: normal; } .article-body a { color: var(--neon-cyan); } .article-body a:hover { color: var(--text-bright); } /* Lists */ .article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.4em; } .article-body li { margin-bottom: 0.6em; } .article-body li::marker { color: var(--neon-cyan); font-weight: 600; } .article-body ul { list-style-type: disc; } .article-body ol { list-style-type: decimal; } /* Code blocks */ .article-body pre { background: rgba(5,14,22,0.85); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--neon-green); padding: 20px 22px; overflow-x: auto; margin: 1.6em 0; font-family: var(--font-code); font-size: 0.82rem; line-height: 1.65; color: #cdd6f4; } .article-body code { font-family: var(--font-code); font-size: 0.84em; background: rgba(0,212,255,0.07); color: var(--neon-cyan); padding: 2px 6px; border-radius: 2px; } .article-body pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; } /* Callout boxes */ .tip-box { background: rgba(0,230,118,0.04); border: 1px solid rgba(0,230,118,0.15); border-left: 3px solid var(--neon-green); padding: 16px 20px; margin: 1.6em 0; font-size: 0.9rem; } .tip-box .tip-label { font-family: var(--font-code); font-size: 0.7rem; color: var(--neon-green); letter-spacing: 1px; display: block; margin-bottom: 6px; } .warn-box { background: rgba(255,184,108,0.04); border: 1px solid rgba(255,184,108,0.15); border-left: 3px solid var(--neon-amber); padding: 16px 20px; margin: 1.6em 0; font-size: 0.9rem; } .warn-box .warn-label { font-family: var(--font-code); font-size: 0.7rem; color: var(--neon-amber); letter-spacing: 1px; display: block; margin-bottom: 6px; } /* ── Sidebar table of contents ──────────────────────────────────────────── */ .article-sidebar { position: sticky; top: 100px; } .toc-box { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.058); padding: 22px 22px; margin-bottom: 24px; } .toc-title { font-family: var(--font-code); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; } .toc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .toc-list li a { font-size: 0.82rem; color: var(--text-muted); font-family: var(--font-code); display: block; padding-left: 10px; border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s; line-height: 1.5; } .toc-list li a:hover { color: var(--neon-cyan); border-left-color: var(--neon-cyan); text-shadow: none; } .toc-list .toc-h3 a { padding-left: 22px; font-size: 0.78rem; } /* ── Bottom product recommend section ──────────────────────────────────── */ /* * Dynamically injected after #article-body by article-recommend.js. * Do not duplicate these styles in individual article HTML files. */ .product-recommend { background: var(--bg-panel); border: 1px solid rgba(0,230,118,0.18); padding: 42px 44px; margin: 60px 0 0; position: relative; overflow: hidden; backdrop-filter: blur(10px); } .product-recommend::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--neon-green), transparent); } .pr-eyebrow { font-family: var(--font-code); font-size: 0.7rem; color: var(--neon-green); letter-spacing: 1.5px; margin-bottom: 12px; } .pr-title { font-size: 1.35rem; color: var(--text-bright); margin-bottom: 10px; } .pr-desc { color: var(--text-body); font-size: 0.9rem; line-height: 1.75; max-width: 600px; margin-bottom: 24px; } .pr-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .pr-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--text-body); line-height: 1.55; } .pr-features li::before { content: '▸'; color: var(--neon-green); flex-shrink: 0; font-size: 0.75rem; margin-top: 3px; } /* ── Recommend float widget ─────────────────────────────────────────────── */ /* * Dynamically injected at the end of by article-recommend.js. * Do not duplicate these styles in individual article HTML files. */ .float-widget { position: fixed; bottom: 32px; right: 28px; width: 280px; background: var(--bg-panel); border: 1px solid rgba(0,230,118,0.22); padding: 20px 20px 18px; backdrop-filter: blur(16px); box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(0,230,118,0.06); z-index: 200; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.25,0.8,0.25,1), opacity 0.4s ease; } .float-widget.visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .float-widget::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--neon-green), transparent); } .fw-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .fw-label { font-family: var(--font-code); font-size: 0.66rem; color: var(--neon-green); letter-spacing: 1px; } .fw-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; transition: color 0.2s; } .fw-close:hover { color: var(--text-bright); } .fw-title { font-size: 0.92rem; color: var(--text-bright); font-weight: 600; margin-bottom: 8px; font-family: var(--font-code); } .fw-desc { font-size: 0.78rem; color: var(--text-body); line-height: 1.65; margin-bottom: 14px; } .fw-btn { display: block; width: 100%; text-align: center; padding: 9px 16px; font-family: var(--font-code); font-size: 0.8rem; font-weight: 600; color: var(--bg-base); background: var(--neon-green); text-decoration: none; transition: background 0.25s, box-shadow 0.25s; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .fw-btn:hover { background: var(--text-bright); box-shadow: 0 0 18px rgba(0,230,118,0.3); color: var(--bg-base); text-shadow: none; } /* ── Responsive breakpoints ─────────────────────────────────────────────── */ @media (max-width: 900px) { .article-wrap { grid-template-columns: 1fr; gap: 0; } .article-sidebar { display: none; } .article-title { font-size: 1.55rem; } .product-recommend { padding: 28px 22px; } } @media (max-width: 640px) { .float-widget { width: calc(100% - 32px); left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); } }