@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Syne:wght@400;700;800&display=swap'); :root { --bg: #0d0f0f; --bg2: #131717; --bg3: #1a1f1f; --border: #2a3333; --accent: #00e5a0; --accent2: #00aeff; --dim: #4a5a5a; --text: #c8d8d0; --text-dim: #6a8878; --heading: #e8f0ec; --link: #00e5a0; --tag-bg: rgba(0,229,160,0.08); --radius: 2px; --mono: 'Share Tech Mono', monospace; --sans: 'Syne', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; line-height: 1.75; min-height: 100vh; display: flex; flex-direction: column; } /* scanline effect */ .scanline { pointer-events: none; position: fixed; inset: 0; z-index: 999; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px ); } /* ---- HEADER ---- */ header { border-bottom: 1px solid var(--border); background: var(--bg2); padding: 0 2rem; } .header-inner { max-width: 1100px; margin: 0 auto; padding: 1.2rem 0; display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; } .logo-block { display: flex; align-items: center; gap: 0.4rem; } .logo-bracket { font-family: var(--mono); font-size: 1.5rem; color: var(--accent); line-height: 1; } .site-title { font-family: var(--sans); font-size: 1.4rem; font-weight: 800; color: var(--heading); letter-spacing: 0.15em; } .tagline { color: var(--text-dim); font-size: 0.8rem; } /* ---- LAYOUT ---- */ .layout { display: flex; flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; gap: 0; } /* ---- SIDEBAR ---- */ .sidebar { width: 220px; min-width: 220px; border-right: 1px solid var(--border); padding: 2rem 0; display: flex; flex-direction: column; gap: 0; } .nav-section { padding: 0 1.2rem 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0; } .nav-section:last-of-type { border-bottom: none; } .nav-heading { font-family: var(--sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; color: var(--dim); margin-bottom: 0.6rem; padding-top: 1rem; } nav ul { list-style: none; } nav ul li { margin-bottom: 0.1rem; } nav ul li a { display: block; color: var(--text-dim); text-decoration: none; font-size: 0.82rem; padding: 0.25rem 0.5rem; border-radius: var(--radius); transition: color 0.15s, background 0.15s; } nav ul li a:hover, nav ul li a.active { color: var(--accent); background: var(--tag-bg); } .sidebar-footer { margin-top: auto; padding: 1.5rem 1.2rem 0; color: var(--dim); font-size: 0.72rem; line-height: 1.6; } .sidebar-footer span { color: var(--text-dim); } /* ---- MAIN CONTENT ---- */ .content { flex: 1; padding: 2rem 2.5rem; min-width: 0; } .breadcrumb { font-size: 0.72rem; color: var(--dim); margin-bottom: 0.6rem; letter-spacing: 0.05em; } .page-title { font-family: var(--sans); font-size: 2rem; font-weight: 800; color: var(--heading); letter-spacing: 0.02em; line-height: 1.1; } .divider { height: 1px; background: linear-gradient(to right, var(--accent), transparent); margin: 1rem 0 1.8rem; width: 100%; } /* ---- ARTICLE BODY ---- */ .article-body p { margin-bottom: 1rem; color: var(--text); } .article-body p.intro { font-size: 1rem; color: var(--heading); border-left: 3px solid var(--accent); padding-left: 1rem; margin-bottom: 1.8rem; } .article-body h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--accent2); letter-spacing: 0.08em; text-transform: uppercase; margin: 1.8rem 0 0.6rem; } .article-body h4 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--heading); margin-bottom: 0.3rem; } .article-body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .article-body a:hover { opacity: 0.75; } /* ---- CARDS ---- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1rem; } .card { display: block; text-decoration: none; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: border-color 0.15s, transform 0.15s; } .card:hover { border-color: var(--accent); transform: translateY(-2px); } .card-tag { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.4rem; } .card h4 { color: var(--heading); margin-bottom: 0.3rem; } .card p { color: var(--text-dim); font-size: 0.78rem; line-height: 1.5; } /* ---- FOOTER ---- */ footer { border-top: 1px solid var(--border); padding: 1rem 2rem; text-align: center; color: var(--dim); font-size: 0.75rem; } footer a { color: var(--accent); text-decoration: none; } footer a:hover { text-decoration: underline; } /* ---- ARTICLE-SPECIFIC ---- */ .article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; } .article-body li { margin-bottom: 0.3rem; } .article-body code { background: var(--bg3); border: 1px solid var(--border); padding: 0.1em 0.4em; border-radius: 2px; font-size: 0.85em; color: var(--accent2); } .article-body pre { background: var(--bg3); border: 1px solid var(--border); padding: 1rem; border-radius: var(--radius); overflow-x: auto; margin-bottom: 1rem; } .article-body pre code { background: none; border: none; padding: 0; color: var(--text); } .article-body blockquote { border-left: 3px solid var(--accent2); padding-left: 1rem; color: var(--text-dim); margin-bottom: 1rem; font-style: italic; } .article-body table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.85rem; } .article-body th { background: var(--bg3); color: var(--heading); text-align: left; padding: 0.5rem 0.8rem; border: 1px solid var(--border); font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .article-body td { padding: 0.5rem 0.8rem; border: 1px solid var(--border); color: var(--text); } .article-body tr:nth-child(even) td { background: var(--bg2); } /* ---- RESPONSIVE ---- */ @media (max-width: 680px) { .layout { flex-direction: column; } .sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid var(--border); padding: 1rem 0; } .content { padding: 1.5rem 1rem; } .header-inner { flex-direction: column; gap: 0.3rem; } }