/* ========================================================================== zlogic — base layer (reset + body + background stack). Shared by every page. Depends on tokens.css. Load order: tokens.css → base.css → chrome.css → page. Background stack (markup lives in shared/partials/header.html, injected at build time). Each theme shows a different subset so the two looks stay distinct: dark → matrix(green) + vignette + scanlines + CRT (the index.html look) light → matrix(pink/purple) + animated grid + orbs (the docs look) ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; overflow-x: hidden; font-family: var(--mono), "Courier New", monospace; color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--theme-transition); } /* Pages that render prose (docs/legal/desktop) prefer the sans stack for body copy; opt in with class="prose-page" on . */ body.prose-page { font-family: var(--sans); line-height: 1.65; } a { color: inherit; } code, pre, .mono { font-family: var(--mono); font-variant-ligatures: none; } ::selection { background: var(--accent-pink); color: #fff; } :root[data-theme="light"] ::selection { background: var(--accent-pink); color: #fff; } ::-webkit-scrollbar { width: 8px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple)); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-pink), var(--accent-purple)); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-pink), var(--accent-cyan)); } /* Horizontal scrollbar inside code blocks */ .docs-content pre::-webkit-scrollbar { height: 6px; } .docs-content pre::-webkit-scrollbar-track { background: transparent; } .docs-content pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; } .docs-content pre::-webkit-scrollbar-thumb:hover { background: rgba(5, 217, 232, 0.35); } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-150%); background: var(--cyan-fill); color: var(--cyan-on); padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-size: 13px; } .skip-link:focus { transform: translateY(0); } /* Locale block visibility (driven by i18n.js) */ [data-lang-block][hidden] { display: none !important; } :root[data-lang="zh"] [data-lang-block="en"], :root[data-lang="en"] [data-lang-block="zh"] { display: none !important; } /* ========================================================================== Background stack ========================================================================== */ #matrix-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; } :root[data-theme="light"] #matrix-bg { opacity: 0.22; mix-blend-mode: multiply; } .bg-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--vignette); } .bg-scanlines { position: fixed; inset: 0; z-index: 99; pointer-events: none; background: linear-gradient(transparent 50%, rgba(0, 255, 65, 0.04) 50%); background-size: 100% 3px; mix-blend-mode: overlay; } .bg-crt { position: fixed; inset: 0; z-index: 98; pointer-events: none; background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.3) 100%); } /* Animated grid + orbs — light theme only (the docs look). */ .bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.55; mask-image: var(--bg-radial); -webkit-mask-image: var(--bg-radial); display: none; } .bg-grid::before { content: ""; position: absolute; top: -480px; left: 0; right: 0; bottom: 0; background-image: url(/shared/assets/grid-pattern.svg); background-repeat: repeat; background-size: 360px 480px; background-position: 0 0; animation: bg-rain 12s linear infinite; will-change: transform; filter: invert(1); } @keyframes bg-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 480px, 0); } } .bg-orb { position: fixed; z-index: 0; pointer-events: none; filter: blur(var(--orb-blur)); border-radius: 50%; opacity: 0.88; display: none; } .bg-orb--cyan { width: 520px; height: 520px; top: -180px; left: -140px; background: radial-gradient(circle, var(--orb-cyan), transparent 70%); } .bg-orb--pink { width: 480px; height: 480px; top: 200px; right: -120px; background: radial-gradient(circle, var(--orb-pink), transparent 70%); } /* Per-theme layer visibility. */ :root[data-theme="light"] .bg-scanlines, :root[data-theme="light"] .bg-crt { display: none; } :root[data-theme="light"] .bg-grid, :root[data-theme="light"] .bg-orb { display: block; } /* Content sits above the background stack. */ .site-nav, .site-footer, .container, .content-main, main { position: relative; z-index: 10; } @media (max-width: 768px) { .bg-scanlines, .bg-crt { display: none; } } @media (prefers-reduced-motion: reduce) { .bg-grid::before { animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }