/* AI 局 (aiju.gg) — homepage feed. Mobile-first. Mirrors aiplaysgames.com structure; the AI 局 red accent comes from `body.brand-aiju` overriding --accent in /static/brand.css. No social icons (yet). COLOR / SURFACE / GEOMETRY TOKENS LIVE IN /static/brand.css (loaded BEFORE this file in index.html, plus the brand-aiju body class). Per AGENTS.md PINNED RULE #3, this file MUST NOT hard-code hex colors, rgba() literals, or radii — use var(--*) tokens, and add new tokens to brand.css if a token is missing. Typography is intentionally site-specific (Noto Sans SC / ZCOOL KuaiLe) — see brand.css "Typography is intentionally NOT centralized" note. */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background-color: var(--bg); /* Subtle 40×40 lattice backdrop — same recipe as the donation page so all three surfaces feel like one product. Tokens come from brand.css. */ background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 40px 40px, 40px 40px; background-position: -1px -1px; color: var(--text); font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; } a { color: inherit; text-decoration: none; } /* ================================================================ Top bar ================================================================ */ .top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 48px; display: flex; align-items: center; padding: 0 12px; background: var(--bg-overlay); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); border-bottom: 1px solid var(--hairline); } .brand { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text); } .brand-mark { font-family: 'ZCOOL KuaiLe', system-ui, sans-serif; font-size: 22px; letter-spacing: 0.04em; color: var(--accent); } .brand-glyph { font-family: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif; font-size: 24px; color: var(--text); } /* ================================================================ Feed ================================================================ */ .feed { max-width: 880px; margin: 0 auto; padding: 64px 12px 32px; display: flex; flex-direction: column; gap: 16px; } /* ================================================================ Card ================================================================ */ .card { background: var(--panel); border: 1px solid var(--panel-stroke); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .card-header { padding: 12px 14px 10px; } .card-title { font-family: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 0.02em; color: var(--text); line-height: 1.25; word-break: break-word; } /* Full-width CTA at the bottom of each card. Same logic as the US site — --accent is red here because overrides it. */ .card-prompt { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; background: var(--accent-soft); color: var(--text-muted); font-family: 'Noto Sans SC', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; border-top: 1px solid var(--accent-hairline); transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease; } .card-prompt svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; } .card-prompt:hover { color: var(--accent-ink); background: var(--accent-soft-hover); } .card-prompt:hover svg { transform: translateX(2px); } .card-prompt:active { transform: translateY(1px); } /* ================================================================ Stream embed (placeholder until Bilibili rooms exist) ================================================================ */ .card-stream { position: relative; width: 100%; background: var(--bg-stream); aspect-ratio: 16 / 9; } .card-stream iframe, .card-stream-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg-stream); } /* ================================================================ Desktop (>= 720px) ================================================================ */ @media (min-width: 720px) { .top-bar { padding: 0 16px; } .feed { padding: 72px 24px 32px; gap: 24px; } .card-header { padding: 16px 20px 12px; } .card-title { font-size: 26px; } .card-prompt { height: 56px; font-size: 16px; } }