/* Docs page only - reuses home.css's landing-nav/footer classes (loaded right before this file, see docs.ejs's ) so the topbar/footer are pixel-identical to the marketing page, then layers on its own hero + section styling so the content itself doesn't look like a bare style.css .card stack. Keeps style.css's tokens (--bg/--accent/etc.) and its .badge/table/code styling as-is - this file only reshapes layout, spacing and the .details "platform" blocks. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.docs-page { overflow-x: hidden; } /* --------------------------------------------------------------------------------------------- Hero - a compact version of home.ejs's hero: same glow treatment, no big illustration, just enough presence that this reads as a page of the same product instead of a plain doc dump. --------------------------------------------------------------------------------------------- */ .docs-hero { position: relative; padding: 56px 24px 40px; overflow: hidden; text-align: center; } .docs-hero-glow { position: absolute; inset: -30% -10% auto -10%; height: 420px; pointer-events: none; z-index: 0; background: radial-gradient(420px 320px at 22% 40%, rgba(88, 101, 242, 0.28), transparent 70%), radial-gradient(360px 280px at 80% 30%, rgba(94, 234, 212, 0.18), transparent 70%); filter: blur(10px); } .docs-hero-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } .docs-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(88, 101, 242, 0.12); border: 1px solid rgba(88, 101, 242, 0.35); color: #b3bbff; font-size: 13px; font-weight: 600; margin-bottom: 20px; } .docs-hero h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 800; } .docs-hero p { font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 560px; margin: 0 auto; } /* Jump-to nav as a row of pill links instead of an inline "ยท"-separated sentence - easier to scan and to hit on mobile, and it reads as a real piece of navigation UI rather than a text fragment. */ .docs-jumpnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; } .docs-jumpnav a { font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--bg-elevated); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .docs-jumpnav a:hover { color: var(--text); border-color: rgba(88, 101, 242, 0.45); background: rgba(88, 101, 242, 0.1); text-decoration: none; transform: translateY(-1px); } /* --------------------------------------------------------------------------------------------- Section scaffolding - each former .card becomes a .docs-section with a numbered/iconed header, echoing home.css's .section-head treatment so scrolling through docs feels continuous with the landing page rather than a jump into a different, plainer app. --------------------------------------------------------------------------------------------- */ .docs-body { max-width: 880px; margin: 0 auto; padding: 8px 24px 100px; } .docs-section { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 32px 34px; margin-bottom: 22px; scroll-margin-top: 90px; /* keeps the sticky topbar from covering the heading on #anchor jumps */ } .docs-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .docs-section-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(88,101,242,0.22), rgba(94,234,212,0.14)); border: 1px solid rgba(88,101,242,0.35); color: #b3bbff; } .docs-section-icon svg { width: 20px; height: 20px; } .docs-section-head h2 { font-size: 21px; margin: 0; letter-spacing: -0.01em; } .docs-section p { line-height: 1.65; } .docs-section ul, .docs-section ol { line-height: 1.65; } .docs-section > p:first-of-type { margin-top: 0; } /* --------------------------------------------------------------------------------------------- Platform check tables (Discord/Steam/Twitch/Riot) - upgrades the old bare
into a card with a colored left rail per platform and a proper open/close chevron animation. --------------------------------------------------------------------------------------------- */ .checks-platform { border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-top: 14px; overflow: hidden; background: var(--bg-elevated-2); transition: border-color 0.2s ease; } .checks-platform[open] { border-color: rgba(88, 101, 242, 0.35); } .checks-platform summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; user-select: none; } .checks-platform summary::-webkit-details-marker { display: none; } .checks-platform summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); transition: transform 0.2s ease; } .checks-platform[open] summary::after { transform: rotate(-135deg); } .checks-platform summary img { width: 20px; height: 20px; border-radius: 4px; } .checks-platform table { margin: 0 18px 18px; width: calc(100% - 36px); } .checks-platform p.muted { margin: 0 18px 18px; } /* --------------------------------------------------------------------------------------------- Admin steps - the plain
    now reads as a connected vertical timeline instead of default browser numbering, matching the step-card language home.ejs uses for "How it works". --------------------------------------------------------------------------------------------- */ .docs-steps { list-style: none; margin: 0; padding: 0; counter-reset: docs-step; } .docs-steps > li { position: relative; counter-increment: docs-step; padding: 4px 0 22px 46px; border-left: 2px solid var(--border); margin-left: 17px; } .docs-steps > li:last-child { padding-bottom: 4px; border-left-color: transparent; } .docs-steps > li::before { content: counter(docs-step); position: absolute; left: -17px; top: 0; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgba(88,101,242,0.22), rgba(94,234,212,0.14)); border: 1px solid rgba(88,101,242,0.35); color: #b3bbff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .docs-steps ul { margin-top: 10px; } /* --------------------------------------------------------------------------------------------- Command/plan tables get a touch more breathing room than style.css's default dashboard tables. --------------------------------------------------------------------------------------------- */ .docs-section table { font-size: 14px; } .docs-section table code { font-size: 13px; }