/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Typography — matches openclaw.ai exactly. Satoshi for body, Clash Display for headings. Fontshare-served, swap-display. HTML in every page references the same Fontshare URL openclaw.ai uses, so the fonts are guaranteed loaded. */ --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Clash Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace; /* Brand palette — also mirrored from openclaw.ai. The previous indigo (#6366f1) was carried over from an earlier Linear-inspired palette; openclaw uses coral-on-deep-navy as its identity. */ --primary-color: #ff4d4d; /* coral-bright (dark mode) */ --primary-hover: #ff7079; /* logo-gradient-start */ --primary-focus: #e63946; /* coral-mid */ --secondary-color: #00e5cc; /* cyan-bright (dark mode) */ --background: #050810; /* bg-deep (dark) */ --surface: #0a0f1a; /* bg-surface */ --surface-2: #111827; /* bg-elevated */ --surface-3: #1b1c24; --text-primary: #f0f4ff; --text-secondary: #a5acb8; --text-tertiary: #7a8294; /* bumped from #6b7280 for AA contrast on small caps (5.5:1 on --background) */ --border: #20222b; --border-strong: #2d2f3a; --gradient-start: #ff4d4d; /* coral → cyan gradient (openclaw signature) */ --gradient-end: #00e5cc; --edge-highlight: rgba(255, 255, 255, 0.07); /* openclaw.ai brand-ramp tokens — pulled verbatim from the Layout.CwMxruYy.css the marketing site ships. Mirroring them here lets the wordmark + lobster glow render with pixel parity against openclaw.ai, since the animated-gradient + drop-shadow rules below reference identical variable names. */ --coral-bright: #ff4d4d; --coral-mid: #e63946; --coral-dark: #991b1b; --cyan-bright: #00e5cc; --cyan-glow: rgba(0, 229, 204, 0.40); /* Lobster icon glow — coral by default, shifts to cyan on hover. */ --logo-glow: rgba(255, 77, 77, 0.40); --logo-glow-hover: rgba(0, 229, 204, 0.60); /* `.title-main` on openclaw.ai animates this three-stop gradient through the wordmark: near-white → coral pivot at 52% → cyan tail. background-size:200% + a 6s position walk make the highlight glide. */ --hero-title-start: #f0f4ff; --hero-title-end: #00e5cc; } body { font-family: var(--font-body); background: var(--background); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; /* Stable scrollbar gutter avoids ~15px content shift when modals or images cause overflow to toggle. */ position: relative; } /* TL;DR summary box — sits right after H1 on blog posts, quotes the meta description. Targets Google AI Overviews + Bing Copilot, which both lift the first ~150 words for the answer block. */ .tldr-box { background: linear-gradient(135deg, rgba(0, 229, 204, 0.07), rgba(255, 77, 77, 0.04)); border-left: 4px solid var(--secondary-color); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 0 0 32px 0; font-size: 16px; line-height: 1.65; color: var(--text-secondary); } .tldr-box .tldr-label { margin: 0 0 6px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--secondary-color); font-weight: 700; } .tldr-box .tldr-body { margin: 0; color: var(--text-primary); } /* Headings use Clash Display — the same display face openclaw.ai uses for hero + section titles. Slight negative letter-spacing tightens the glyphs at large sizes; line-height 1.15 is openclaw's default rhythm. Per-page overrides retain font-size; this only imposes the family + tracking. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.15; } /* ─── Star-sky background ────────────────────────────────────────── Mirrors openclaw.ai exactly. Two stacked fixed layers behind all page content: body::before — eight radial-gradient "stars" (white + coral + cyan) tiled at 350×200, twinkling 8s alternate so the constellation breathes without distracting body::after — three soft nebula ellipses (coral / cyan / coral) giving the canvas its branded glow Both have pointer-events:none and z-index:0 so they don't intercept clicks; page content sits in its own stacking context above. The previous film-grain effect was removed — the star + nebula combo does the same "not flat #050810" job and matches the official site. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 160px 120px, rgba(255, 255, 255, 0.7), transparent), radial-gradient(2px 2px at 200px 60px, rgba(0, 229, 204, 0.6), transparent), radial-gradient(1px 1px at 250px 150px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(2px 2px at 300px 40px, rgba(255, 77, 77, 0.4), transparent); background-size: 350px 200px; animation: twinkle 8s ease-in-out infinite alternate; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255, 77, 77, 0.12), transparent 50%), radial-gradient(ellipse 60% 60% at 80% 30%, rgba(0, 229, 204, 0.08), transparent 50%), radial-gradient(ellipse 90% 70% at 50% 90%, rgba(255, 77, 77, 0.06), transparent 50%); } @keyframes twinkle { 0% { opacity: 0.4; } 100% { opacity: 0.7; } } /* Anchor the page content above the fixed star/nebula layers. Without this, body content (z-index: auto) competes with the pseudo-elements (z-index: 0) and individual elements can render underneath. Lifting visible body children to z-index: 1 + position: relative is the canonical fix. The :not() excludes non-rendering tags (script/noscript/style/template) which don't benefit from positioning and shouldn't introduce stacking contexts. */ body > *:not(script):not(noscript):not(style):not(template):not(.browse-modal):not(.lightbox-overlay):not(.chat-widget):not(header):not(nav.navbar) { position: relative; z-index: 1; } /* The navbar (whether wrapped in
on EN root pages or rendered as a bare