/* ============================================================================ OpenClaw Guide — Cinematic Redesign Layer ("Ember, after dark") Loads AFTER style.css and reskins the whole site via token overrides + an editorial type/space system. Bolder art direction, ambient WebGL backdrop, GSAP scroll-reveal motion. Injected site-wide by scripts/build_site.py. ========================================================================== */ /* ---- 1. Tokens: reskin everything through the existing variables ---------- */ :root { --bg-primary: #060507; --bg-secondary: #0c0a0e; --bg-tertiary: #141019; --bg-hover: #1a1620; --bg-active: #221c2a; --text-primary: #f4f1ea; /* warm bone — premium vs clinical white */ --text-secondary: #b8b2a8; --text-muted: #908a80; --accent: #ff6a1a; /* punchier ember */ --accent-hover: #ff8a3d; --accent-subtle: rgba(255, 106, 26, 0.14); --accent-glow: rgba(255, 106, 26, 0.45); --accent-alt: #ffb27a; --border-color: rgba(244, 241, 234, 0.10); --border-subtle: rgba(244, 241, 234, 0.055); --maxw: 1180px; --gutter: clamp(1.25rem, 5vw, 3.5rem); --section-y: clamp(5rem, 12vh, 10rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- 2. Base + typography ------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text-secondary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: #0a0708; } /* Headings get the warm bone colour; content headings keep a comfortable rhythm. The dramatic tight/heavy treatment is reserved for DISPLAY titles only (hero/page/section) so wrapping content headings — changelog entries, card titles, FAQ questions — never look cramped. */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } .hero-title, .page-title, .section-title { letter-spacing: -0.03em; line-height: 1.0; font-weight: 800; text-wrap: balance; } /* Oversized editorial display scale */ .hero-title { font-size: clamp(3rem, 9vw, 8.5rem); letter-spacing: -0.045em; line-height: 0.96; } .page-title { font-size: clamp(2.6rem, 7.5vw, 6.5rem); letter-spacing: -0.04em; } .section-title { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 0.6em; } .section-subtitle, .page-subtitle, .hero-subtitle { color: var(--text-secondary); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; max-width: 56ch; font-weight: 400; } .hero-subtitle { max-width: 60ch; } /* ---- 3. Layout rhythm: more negative space -------------------------------- */ .container { max-width: var(--maxw); padding-inline: var(--gutter); } .features, .setup, .prompts, .examples, .cta, .fresh-updates, .channels-section, .skills-section, .quickstart-section, section[class$="-section"] { padding-block: var(--section-y); } /* ---- 4. Ambient WebGL backdrop + content layering ------------------------- */ /* The ambient field sits BEHIND all content (z-index:-1) so it never traps the nav/menus in a stacking context. Base colour + fallback live on . */ #cine-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-out); } #cine-bg.is-on { opacity: 1; } /* Heroes go transparent so the living ember field reads behind the type */ .hero, .page-hero, .quickstart-hero, .hero-small { background: transparent !important; } .hero::before, .hero-glow { opacity: 0.5; } /* ---- 5. Navigation: refined, floats over the field ------------------------ */ .nav { background: color-mix(in srgb, var(--bg-primary) 55%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .nav.is-scrolled { background: color-mix(in srgb, var(--bg-primary) 86%, transparent); border-bottom-color: var(--border-color); } .nav-logo .logo-text { letter-spacing: -0.01em; font-weight: 700; } /* ---- 6. Kicker / eyebrow utility ------------------------------------------ */ .kicker, .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; } .kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .section-title + .section-subtitle, .page-title + .page-subtitle { margin-top: 1rem; } /* ---- 7. Buttons: premium ------------------------------------------------- */ .btn { letter-spacing: -0.01em; border-radius: 999px; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s ease; } .btn-primary { background: linear-gradient(180deg, var(--accent-hover), var(--accent)); color: #160a04; font-weight: 600; border: 0; box-shadow: 0 8px 30px -8px var(--accent-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px var(--accent-glow); } .btn-secondary { background: rgba(244,241,234,0.04); color: var(--text-primary); border: 1px solid var(--border-color); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-secondary:hover { border-color: var(--accent); transform: translateY(-2px); } /* ---- 8. Cards: refined edges + ember hover ------------------------------- */ .feature-card, .prompt-card, .channel-card, .skill-card-mini, .tip-card, .requirement-card, .next-step-card, .example-code .code-file { border: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-secondary) 80%, transparent); border-radius: 16px; transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s ease; } .feature-card:hover, .prompt-card:hover, .channel-card:hover, .next-step-card:hover, .requirement-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--bg-secondary) 92%, transparent); } .feature-card .feature-icon { color: var(--accent); } /* Code blocks a touch more cinematic */ .code-block, .code-block-large, pre { border-radius: 12px; } /* ---- 9. Scroll-reveal initial states (GSAP toggles .is-in) ---------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } /* ---- 10. Footer sits above the field too --------------------------------- */ .site-footer { background: color-mix(in srgb, var(--bg-secondary) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* ---- 11. Reduced motion / no-JS safety ----------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1 !important; transform: none !important; } #cine-bg { display: none; } } .no-js [data-reveal] { opacity: 1; transform: none; } /* ---- 12. WebGL image-transition hero (Home / About) ---------------------- */ .hero, .page-hero { position: relative; overflow: hidden; } .hero { min-height: min(100svh, 920px); display: flex; align-items: center; } .hero .container { width: 100%; } .hero .lobster-background { display: none; } /* the ember transition replaces the static lobster on home */ .ember-hero { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050505 url('/assets/showcase/scene-01.jpg') center / cover no-repeat; /* poster until WebGL ready / reduced-motion */ } .ember-hero .ember-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 1.2s var(--ease-out); } .ember-hero.is-ready .ember-canvas { opacity: 1; } .ember-hero::after { /* legibility wash so headline type always reads */ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(5,5,6,.85) 0%, rgba(5,5,6,.45) 45%, rgba(5,5,6,.20) 100%), linear-gradient(to top, rgba(5,5,6,.75), transparent 55%); } .hero > .container, .page-hero > .container { position: relative; z-index: 1; } /* Page heroes get room to breathe + the field behind */ .page-hero { padding-block: clamp(5rem, 16vh, 11rem) clamp(3rem, 8vh, 6rem); } .page-hero .ember-hero::after { background: linear-gradient(to top, rgba(5,5,6,.82), rgba(5,5,6,.35) 60%, rgba(5,5,6,.55)); } /* ---- 13. Reveal safety + fixes ------------------------------------------- */ /* Default = visible. Only hide when JS has confirmed it will reveal them (html.cine-reveal). If JS/GSAP fail, content is never stuck hidden. */ [data-reveal] { opacity: 1; transform: none; } html.cine-reveal [data-reveal] { opacity: 0; transform: translateY(26px); will-change: opacity, transform; } html.cine-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* The ember transition replaces the static lobster on the home hero (style.css forces display:block !important, so we need !important too). */ .hero .lobster-background { display: none !important; } /* ---- 14. Stacking fix: ambient behind content WITHOUT trapping the nav ----- The earlier `body > * { z-index: 1 }` made .nav a stacking context, which hid the mobile drawer (z-index 99) and desktop dropdowns (z-index 1000) behind
. Instead: base colour on , transparent , ambient canvas at z-index -1, and let nav/menus keep their natural stacking. */ html { background-color: var(--bg-primary); background-image: radial-gradient(120% 90% at 78% -10%, rgba(255,106,26,0.10), transparent 55%), radial-gradient(90% 70% at 10% 110%, rgba(255,106,26,0.06), transparent 60%); background-attachment: fixed; } body { background: transparent !important; } /* let the html base + ambient field show */ .nav { z-index: 1000; } /* nav (and its dropdowns/mobile drawer) above content */ /* ---- 15. Updates polish + mobile friendliness ---------------------------- */ /* Changelog release cards read as distinct cards over the ambient field */ .release-section { background: #100c15; border: 1px solid rgba(244, 241, 234, 0.10); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7); } .release-version h2 { line-height: 1.2; } .release-content h3, .release-content h4 { line-height: 1.25; } /* Code blocks scroll within themselves — never widen the page on mobile */ pre, .code-block, .code-block-large, .code-block-output, .code-block.compact { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } pre code { white-space: pre; } /* ---- Mobile (<= 768px) --------------------------------------------------- */ @media (max-width: 768px) { :root { --section-y: clamp(3rem, 8vh, 4.75rem); --gutter: 1.25rem; } /* Hero: content-height instead of a full screen, type sized for small widths */ .hero { min-height: auto; padding-block: 6.5rem 3rem; } .hero-title { font-size: clamp(2.5rem, 12vw, 3.4rem); line-height: 1.02; } .page-hero { padding-block: 6.5rem 2.5rem; } .page-title { font-size: clamp(2.1rem, 10.5vw, 3rem); } .section-title { font-size: clamp(1.7rem, 8vw, 2.4rem); } /* Primary CTAs stack full-width and thumb-friendly */ .hero-cta, .cta-buttons { flex-direction: column; align-items: stretch; } .hero-cta .btn, .cta-buttons .btn { width: 100%; } .btn { min-height: 48px; } /* Tighter card/section padding so pages aren't an endless scroll */ .release-section { padding: 1.25rem; } .feature-card, .prompt-card, .channel-card, .requirement-card { padding: 1.25rem; } } /* ---- 17. Flicker-free reveals -------------------------------------------- Hidden state is set BEFORE first paint by the inline bootstrap (html.js-reveal), so content never flashes. Revealed via a CSS *animation* (independent of each element's own transition, so hover lifts stay smooth) using the standalone `translate` property. cinematic.js adds .rv as elements enter the viewport. */ html.js-reveal :is(.hero-badge,.hero-title,.hero-subtitle,.hero-cta,.hero-stats,.hero-terminal,.quickstart-badge,.page-title,.page-subtitle,.section-title,.section-subtitle,.feature-card,.prompt-card,.channel-card,.skill-card-mini,.setup-step,.requirement-card,.next-step-card,.tip-card,.faq-item,.quickstart-step,.code-file,.skills-category,.update-item,.security-card,.flow-step,.cta-content,.related-guide-card,.newsletter,.release-section) { opacity: 0; } html.js-reveal :is(.hero-badge,.hero-title,.hero-subtitle,.hero-cta,.hero-stats,.hero-terminal,.quickstart-badge,.page-title,.page-subtitle,.section-title,.section-subtitle,.feature-card,.prompt-card,.channel-card,.skill-card-mini,.setup-step,.requirement-card,.next-step-card,.tip-card,.faq-item,.quickstart-step,.code-file,.skills-category,.update-item,.security-card,.flow-step,.cta-content,.related-guide-card,.newsletter,.release-section).rv { animation: rv-rise 0.85s var(--ease-out) both; } @keyframes rv-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { html.js-reveal :is(.hero-badge,.hero-title,.hero-subtitle,.hero-cta,.hero-stats,.hero-terminal,.quickstart-badge,.page-title,.page-subtitle,.section-title,.section-subtitle,.feature-card,.prompt-card,.channel-card,.skill-card-mini,.setup-step,.requirement-card,.next-step-card,.tip-card,.faq-item,.quickstart-step,.code-file,.skills-category,.update-item,.security-card,.flow-step,.cta-content,.related-guide-card,.newsletter,.release-section) { opacity: 1; } html.js-reveal :is(.hero-badge,.hero-title,.hero-subtitle,.hero-cta,.hero-stats,.hero-terminal,.quickstart-badge,.page-title,.page-subtitle,.section-title,.section-subtitle,.feature-card,.prompt-card,.channel-card,.skill-card-mini,.setup-step,.requirement-card,.next-step-card,.tip-card,.faq-item,.quickstart-step,.code-file,.skills-category,.update-item,.security-card,.flow-step,.cta-content,.related-guide-card,.newsletter,.release-section).rv { animation: none; } } /* ---- 18. Smooth cross-document page transitions (View Transitions API) ---- Same-origin navigations crossfade with a subtle rise. Progressive: browsers without support just navigate normally. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 0.26s var(--ease-out) both; } ::view-transition-new(root) { animation: vt-in 0.5s var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }