/* ============================================================================= ReṼoman theme — a modular, additive skin over the stock Antora default UI. DESIGN Editorial, warm-ink monochrome with a single restrained accent — the rust from the ReṼoman wordmark. Inspired by the docs sites that read as premium rather than decorated: Vercel/Next.js (mono ink, hairline borders, Geist), Stripe & Tailwind (whitespace, one accent used sparingly), Bun (warm neutrals). No gradients, no second hue — color earns its place. HOW IT LOADS partials/head-meta.hbs injects this file AFTER the bundle's site.css, so every rule here overrides the stock UI without forking the bundle. Upgrading the UI bundle keeps working; this layer just re-applies on top. HOW TO TOGGLE / SWAP • Disable the theme → empty partials/head-meta.hbs. • Re-skin the theme → edit only the :root tokens below; rules consume tokens, not raw values. • Replace the theme → drop in a different css file and point head-meta at it. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. Fonts ------------------------------------------------------------------------- */ :root { --rv-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --rv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Display face — Space Grotesk's mechanical, slightly-condensed spine reads as "engine," not "magazine." Used on headings (display role); body stays Plex Sans, data/chrome stays JetBrains Mono. Three roles, each earned. */ --rv-font-display: "Space Grotesk", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ---------------------------------------------------------------------------- 2. Design tokens — light theme (the single place to re-skin) ------------------------------------------------------------------------- */ :root { /* Accent — Claude-coral, the ONLY hue. Deliberately a warm clay-coral (not Postman's bright #FF6C37, and warmer/pinker than a pure rust): the base coral is #D97757, deepened here to #b75333 so it clears WCAG AA (≈4.9:1) as link/CTA text on white. The pure #D97757 still shows through in the soft tints and the dark theme, where it reads as itself. */ --rv-accent: #b75333; --rv-accent-hover: #983f22; --rv-accent-soft: rgba(217, 119, 87, 0.10); /* Surfaces — warm-tinted neutrals, not pure cold grey */ --rv-bg: #ffffff; --rv-bg-subtle: #faf9f7; --rv-bg-code: #fafaf9; --rv-nav-bg: #fbfbfa; --rv-border: #eceae6; --rv-border-strong: #ddd9d2; /* Text — warm near-black ink */ --rv-text: #1c1917; --rv-text-muted: #57534e; --rv-text-faint: #8c867e; --rv-heading: #0f0d0c; /* Top bar — solid warm ink, no gradient */ --rv-navbar-bg: #1c1917; --rv-navbar-text: #fafaf9; /* Admonition tints — semantic, restrained (standard in great docs) */ --rv-note: #2563eb; --rv-tip: #15803d; --rv-important: #be123c; --rv-warning: #b45309; --rv-caution: #c2410c; /* Shape & motion — hairline borders, barely-there lift */ --rv-radius: 0.5rem; --rv-radius-sm: 0.375rem; --rv-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 2px 8px rgba(28, 25, 23, 0.05); --rv-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05); } /* ---------------------------------------------------------------------------- 3. Design tokens — dark theme (same names, remapped values) Applied when . The theme-init script in partials/head-meta.hbs resolves the active theme before first paint: it reads the saved choice from localStorage, and when none is saved it falls back to the OS `prefers-color-scheme`. So the OS preference is still the default — the manual toggle just overrides it. Driving the switch off a single attribute (not a media query) lets one CSS block serve both the auto and the explicitly-chosen dark states. ------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Claude-coral lifted for dark surfaces. The base coral #D97757 reads true here against warm-ink; #de8160 lifts it just enough for body-text legibility (≈6.5:1 on the dark bg) without tipping into a neon orange. */ --rv-accent: #de8160; --rv-accent-hover: #e89a7d; --rv-accent-soft: rgba(217, 119, 87, 0.15); --rv-bg: #17140f; --rv-bg-subtle: #1e1a15; --rv-bg-code: #1c1813; --rv-nav-bg: #161310; --rv-border: #2c2720; --rv-border-strong: #3a342b; --rv-text: #ece8e1; --rv-text-muted: #aaa298; --rv-text-faint: #7d766b; --rv-heading: #f7f4ee; --rv-navbar-bg: #110f0c; --rv-navbar-text: #f2efe8; --rv-note: #60a5fa; --rv-tip: #4ade80; --rv-important: #fb7185; --rv-warning: #fbbf24; --rv-caution: #fb923c; --rv-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 18px rgba(0, 0, 0, 0.45); --rv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); } /* ---------------------------------------------------------------------------- 4. Base typography ------------------------------------------------------------------------- */ body { font-family: var(--rv-font-sans); background: var(--rv-bg); color: var(--rv-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.55; letter-spacing: -0.003em; } .doc p, .doc li, .doc dd, .doc td.content { line-height: 1.65; } /* Prose ink. The stock bundle hardcodes `.doc { color: #333 }` (plus #5d5d5d on list items, block titles, etc.), which out-specifies the `body` color above — so without these overrides every paragraph stays near-black and vanishes on the dark background. Bind the whole `.doc` text family to tokens so both themes track the palette. */ .doc { color: var(--rv-text); } .doc p, .doc li, .doc dd, .doc td.content, .doc th.tableblock, .doc p.tableblock, .doc .colist > table td, .doc dl, .doc dt { color: var(--rv-text); } .doc strong, .doc b { color: var(--rv-heading); } /* Block titles (figure/table/listing captions, "Current limitations" etc.) */ .doc .admonitionblock .title, .doc .exampleblock .title, .doc .imageblock .title, .doc .listingblock .title, .doc .literalblock .title, .doc .openblock .title, .doc .videoblock .title, .doc .dlist .title, .doc table.tableblock caption, .doc .ulist .title, .doc .olist .title { color: var(--rv-text-faint); } /* Blockquotes / verse */ .doc .quoteblock, .doc .verseblock { color: var(--rv-text-muted); background: var(--rv-bg-subtle); border-left-color: var(--rv-border-strong); } .doc .quoteblock .attribution { color: var(--rv-text-faint); } /* Headings — Space Grotesk display face, solid ink, tight. No gradient clip. */ .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { font-family: var(--rv-font-display); color: var(--rv-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.22; } .doc h1.page { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.028em; margin-top: 1.5rem; } .doc h2 { border-bottom: 1px solid var(--rv-border); padding-bottom: 0.35rem; margin-top: 2.4rem; } .doc h1.sect0 { background: var(--rv-bg-subtle); border-radius: var(--rv-radius-sm); } /* ---------------------------------------------------------------------------- 5. Links ------------------------------------------------------------------------- */ .doc a, .doc a code { color: var(--rv-accent); text-decoration: none; transition: color 0.12s ease, border-color 0.12s ease; } .doc a:hover { color: var(--rv-accent-hover); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .doc a.xref:hover { text-decoration-color: var(--rv-accent); } /* ---------------------------------------------------------------------------- 6. Top navbar — solid warm ink ------------------------------------------------------------------------- */ .navbar { background: var(--rv-navbar-bg); color: var(--rv-navbar-text); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); } .navbar-item, .navbar-item:first-child a { color: var(--rv-navbar-text); } .navbar-item:first-child { font-weight: 650; letter-spacing: -0.01em; } /* Burger dropdown panel (shown <1024px). The stock bundle hardcodes `.navbar-menu { background: #fff }` (twice — base + the mobile media query), so the collapsed menu drops a white sheet under the dark ink bar and the GitHub link + theme toggle look like white blocks. Treat the dropdown as an extension of the ink bar instead: same dark surface, both themes. */ .navbar-menu { background: var(--rv-navbar-bg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); } .navbar-menu .navbar-item, .navbar-menu a.navbar-item { color: var(--rv-navbar-text); } .navbar-menu .navbar-link:hover, .navbar-menu a.navbar-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--rv-navbar-text); } /* Brand logo chip before the title */ .navbar-brand .navbar-item:first-child::before { content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; margin-right: 0.55rem; vertical-align: -0.4rem; background: url(../img/favicon.png) center / cover no-repeat; border-radius: 0.4rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); } /* GitHub button — quiet outline on the ink bar */ .navbar .button { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--rv-navbar-text); border-radius: 0.45rem; font-weight: 550; transition: background 0.15s ease, border-color 0.15s ease; } .navbar .button:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.38); } /* Search input on the ink bar */ .navbar .search #search-input { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.45rem; color: var(--rv-navbar-text); padding: 0.25rem 0.6rem; outline: none; transition: background 0.15s ease, border-color 0.15s ease; } .navbar .search #search-input::placeholder { color: rgba(250, 250, 249, 0.5); } .navbar .search #search-input:focus { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); } /* ---------------------------------------------------------------------------- 7. Side nav ------------------------------------------------------------------------- */ .nav { background: var(--rv-nav-bg); border-right: 1px solid var(--rv-border); box-shadow: none; } .nav-panel-menu .nav-list .nav-list { border-left: 1px solid var(--rv-border); } .nav-menu h3.title { color: var(--rv-text-faint); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; } .nav-menu a.nav-link { color: var(--rv-text-muted); border-radius: var(--rv-radius-sm); /* Left padding clears the active accent bar so text never hugs it; applied to every link so the active state doesn't shift text horizontally. */ padding: 0.12rem 0.4rem 0.12rem 0.6rem; margin-left: -0.4rem; transition: color 0.12s ease, background 0.12s ease; } .nav-menu a.nav-link:hover { color: var(--rv-text); background: var(--rv-bg-subtle); } /* Active page — straight accent bar + faint tint. Left corners squared so the inset bar stays a straight line (rounded left corners would bend the inset shadow into an arc); right corners stay rounded. */ .nav-menu .is-current-page > .nav-link, .nav-menu .is-active > .nav-link { color: var(--rv-accent); font-weight: 600; background: var(--rv-accent-soft); border-radius: 0 var(--rv-radius-sm) var(--rv-radius-sm) 0; box-shadow: inset 2px 0 0 var(--rv-accent); } /* ---------------------------------------------------------------------------- 8. Toolbar / breadcrumbs ------------------------------------------------------------------------- */ .toolbar { background: var(--rv-bg); color: var(--rv-text-muted); box-shadow: 0 1px 0 var(--rv-border); } .toolbar a { color: var(--rv-text-muted); } .toolbar a:hover { color: var(--rv-accent); } .edit-this-page a { color: var(--rv-text-faint); } /* Toolbar glyphs — the sidebar-toggle hamburger (menu.svg / back.svg) and the breadcrumb home icon (home-o.svg / home.svg) are background-image SVGs with #222 baked in by the bundle. On the dark toolbar they're dark-on-dark and vanish — and `color` can't touch a background-image. Invert the glyph in dark mode so it reads as near-white; light mode leaves the SVG untouched. */ :root[data-theme="dark"] .nav-toggle, :root[data-theme="dark"] .toolbar .home-link { filter: invert(0.9) hue-rotate(180deg); } /* ---------------------------------------------------------------------------- 9. Code — inline + blocks ------------------------------------------------------------------------- */ code, pre { font-family: var(--rv-font-mono); /* JetBrains Mono ligatures ON — !=, ->, =>, === render as designed glyphs */ font-feature-settings: "liga" 1, "calt" 1; } /* Inline code — neutral chip, not accent-tinted (keeps prose calm) */ .doc p code, .doc li code, .doc td.content code, .doc dd code { background: var(--rv-bg-subtle); color: var(--rv-text); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); font-size: 0.84em; padding: 0.1em 0.36em; } /* Code blocks — rounded, hairline border, faint lift */ .doc pre.highlight code, .doc .listingblock pre { background: var(--rv-bg-code); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); box-shadow: var(--rv-shadow-sm); padding: 1.1em 1.2em; font-size: 0.84rem; line-height: 1.6; } /* Base code text. The bundle leaves non-highlighted code tokens at the inherited `.doc` #333, which disappears on the dark code surface — pin the default token color so un-tokenised code (and the `.hljs` base) stays legible in both themes. */ .doc pre code, .doc pre code .hljs, .doc .listingblock pre code { color: var(--rv-text); } /* Image/example titles → small-caps label */ .doc .imageblock .title, .doc .exampleblock .title { color: var(--rv-text-faint); font-size: 0.78rem; font-weight: 600; font-style: normal; letter-spacing: 0.02em; text-transform: uppercase; } /* Listing-block titles → source-file caption (carries a link to the .java) */ .doc .listingblock > .title { color: var(--rv-text-faint); font-size: 0.8rem; font-weight: 500; font-style: normal; letter-spacing: 0; text-transform: none; } /* The source-file link inside a listing title — mono filename tab */ .doc .listingblock > .title a { font-family: var(--rv-font-mono); font-size: 0.95em; color: var(--rv-accent); } .doc .listingblock > .title a:hover { color: var(--rv-accent-hover); } /* Callout numbers (the ①②③ markers) — white number on a filled accent circle. Stock UI renders the digit via ::after inheriting text color, so the fill needs an explicit light color or the number vanishes. */ .doc .conum[data-value] { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; font-weight: 600; } .doc .conum[data-value]::after { color: #fff; } /* ---------------------------------------------------------------------------- 10. Admonitions — soft tinted cards (drop the boxed table look) ------------------------------------------------------------------------- */ .doc .admonitionblock > table td.content { background: var(--rv-bg-subtle); border: 1px solid var(--rv-border); border-left-width: 3px; border-radius: var(--rv-radius-sm); padding: 1rem 1.1rem 0.85rem; } .doc .admonitionblock.note > table td.content { border-left-color: var(--rv-note); } .doc .admonitionblock.tip > table td.content { border-left-color: var(--rv-tip); } .doc .admonitionblock.important > table td.content { border-left-color: var(--rv-important); } .doc .admonitionblock.warning > table td.content { border-left-color: var(--rv-warning); } .doc .admonitionblock.caution > table td.content { border-left-color: var(--rv-caution); } /* Keep the stock pill icons, align colors with the card accent */ .admonitionblock td.icon i.icon-note { background-color: var(--rv-note); } .admonitionblock td.icon i.icon-tip { background-color: var(--rv-tip); } .admonitionblock td.icon i.icon-important { background-color: var(--rv-important); } .admonitionblock td.icon i.icon-warning { background-color: var(--rv-warning); } .admonitionblock td.icon i.icon-caution { background-color: var(--rv-caution); } /* ---------------------------------------------------------------------------- 11. Tables, TOC, images ------------------------------------------------------------------------- */ .doc table.tableblock { border-radius: var(--rv-radius-sm); overflow: hidden; } .doc table.tableblock thead th { background: var(--rv-bg-subtle); color: var(--rv-heading); border-bottom: 2px solid var(--rv-border-strong); } /* Right-hand "Contents" TOC */ .toc .toc-menu h3 { color: var(--rv-text-faint); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; } .toc .toc-menu a { color: var(--rv-text-muted); border-left: 2px solid var(--rv-border); transition: color 0.12s ease, border-color 0.12s ease; } .toc .toc-menu a:hover, .toc .toc-menu a.is-active { color: var(--rv-accent); border-left-color: var(--rv-accent); } /* Images — gentle rounding + lift so screenshots feel intentional */ .doc .imageblock img, .doc .image img { border-radius: var(--rv-radius-sm); } .doc .imageblock:not(.text-center) img { box-shadow: var(--rv-shadow); } /* ---------------------------------------------------------------------------- 12. Footer + misc ------------------------------------------------------------------------- */ .footer { color: var(--rv-text-faint); } ::selection { background: var(--rv-accent-soft); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } /* ---------------------------------------------------------------------------- 13. Theme toggle — sun/moon button Markup lives in partials/header-content.hbs; behaviour in the init script in partials/head-meta.hbs. Both icons sit stacked in the button; the active theme decides which one shows, so the control reads as "tap to switch to the other mode": sun visible in dark mode, moon visible in light mode. The button always rides a dark surface — the ink bar on the wide layout, and (since §6 makes the burger dropdown dark too) the collapsed menu as well — so it carries one consistent translucent-white-on-ink treatment matching the GitHub button, in both themes and at every width. */ .rv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.45rem; color: var(--rv-navbar-text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .rv-theme-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.38); color: var(--rv-navbar-text); } .rv-theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show one icon per theme. Default (light) shows the moon (→ go dark); dark shows the sun (→ go light). */ .rv-theme-toggle .rv-icon-sun { display: none; } .rv-theme-toggle .rv-icon-moon { display: block; } :root[data-theme="dark"] .rv-theme-toggle .rv-icon-sun { display: block; } :root[data-theme="dark"] .rv-theme-toggle .rv-icon-moon { display: none; } /* ---------------------------------------------------------------------------- 14. Syntax highlighting — dark palette The stock UI bundles a GitHub-*light* highlight.js theme (keyword #333, title #900, tag navy, symbol #990073, …) — all dark hues that are unreadable on the dark code surface. Light mode keeps that original palette; this block remaps each token to a warm, accessible dark palette ONLY under [data-theme="dark"]. Selectors mirror the bundle's grouping so specificity matches and the override lands. Tuned to sit beside the rust accent. ------------------------------------------------------------------------- */ :root[data-theme="dark"] .doc .hljs-comment, :root[data-theme="dark"] .doc .hljs-quote { color: #8c867e; } :root[data-theme="dark"] .doc .hljs-keyword, :root[data-theme="dark"] .doc .hljs-selector-tag, :root[data-theme="dark"] .doc .hljs-subst { color: #fb923c; } :root[data-theme="dark"] .doc .hljs-literal, :root[data-theme="dark"] .doc .hljs-number, :root[data-theme="dark"] .doc .hljs-tag .hljs-attr, :root[data-theme="dark"] .doc .hljs-template-variable, :root[data-theme="dark"] .doc .hljs-variable, :root[data-theme="dark"] .doc .hljs-attr, :root[data-theme="dark"] .doc .hljs-attribute { color: #7dd3a8; } :root[data-theme="dark"] .doc .hljs-doctag, :root[data-theme="dark"] .doc .hljs-string { color: #f0a868; } :root[data-theme="dark"] .doc .hljs-section, :root[data-theme="dark"] .doc .hljs-selector-id, :root[data-theme="dark"] .doc .hljs-title { color: #fbbf24; } :root[data-theme="dark"] .doc .hljs-class .hljs-title, :root[data-theme="dark"] .doc .hljs-type { color: #6db4e6; } :root[data-theme="dark"] .doc .hljs-name, :root[data-theme="dark"] .doc .hljs-tag { color: #6db4e6; } :root[data-theme="dark"] .doc .hljs-built_in, :root[data-theme="dark"] .doc .hljs-builtin-name { color: #5fb3c9; } :root[data-theme="dark"] .doc .hljs-link, :root[data-theme="dark"] .doc .hljs-regexp { color: #4ade80; } :root[data-theme="dark"] .doc .hljs-bullet, :root[data-theme="dark"] .doc .hljs-symbol { color: #d99ad9; } :root[data-theme="dark"] .doc .hljs-meta { color: #aaa298; } /* ============================================================================= 15. LANDING PAGE (.rv-home) Scoped entirely under `.rv-home` (the
in layouts/home.hbs) so none of this leaks into the 19 docs pages. The landing's job: in ~10s, SHOW the engine — a graph of API steps executing in order into a structured Rundown. Identity = engine telemetry, not editorial. Signature = the hero "Rundown readout": the engine's own output, the 4 real steps of the restful-api.dev demo animating in on load. Boldness is spent there; every other band stays quiet. Reuses the existing palette tokens (rust = brand/active, the semantic green = pass) so light/dark Just Work via §2/§3. ========================================================================== */ /* Landing-only status + surface tokens, derived from the shared palette */ .rv-home { --rv-pass: var(--rv-tip); /* green pass dot — reuse semantic token */ --rv-panel: #16140f; /* warm-ink engine panel (both themes) */ --rv-panel-line: #2b2620; --rv-panel-text: #ece8e1; --rv-panel-faint: #8c867e; --rv-maxw: 1120px; display: block; padding-top: 3.5rem; /* clear the fixed navbar (bundle: 3.5rem) */ background: var(--rv-bg); color: var(--rv-text); font-family: var(--rv-font-sans); overflow-x: hidden; } /* ---- shared landing primitives ------------------------------------------- */ .rv-eyebrow, .rv-section-marker { font-family: var(--rv-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-text-faint); margin: 0; } .rv-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--rv-accent); } .rv-eyebrow__dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 0 3px var(--rv-accent-soft); } .rv-section-marker { color: var(--rv-accent); } .rv-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--rv-font-sans); font-size: 0.95rem; font-weight: 600; line-height: 1; padding: 0.72rem 1.2rem; border-radius: var(--rv-radius-sm); text-decoration: none; border: 1px solid transparent; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .rv-btn--primary { background: var(--rv-accent); color: #fff; } .rv-btn--primary:hover { background: var(--rv-accent-hover); color: #fff; transform: translateY(-1px); } .rv-btn--ghost { background: transparent; color: var(--rv-text); border-color: var(--rv-border-strong); } .rv-btn--ghost:hover { border-color: var(--rv-accent); color: var(--rv-accent); } .rv-tag { display: inline-block; font-family: var(--rv-font-mono); font-size: 0.74rem; font-weight: 500; color: var(--rv-accent); background: var(--rv-accent-soft); border: 1px solid var(--rv-accent-soft); border-radius: 0.3rem; padding: 0.1rem 0.42rem; } .rv-dot-sep { color: var(--rv-border-strong); margin: 0 0.1rem; } /* ---- HERO ----------------------------------------------------------------- */ .rv-hero { max-width: var(--rv-maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .rv-hero__copy { min-width: 0; } .rv-hero__title { font-family: var(--rv-font-display); font-weight: 700; font-size: clamp(2.3rem, 5.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; color: var(--rv-heading); margin: 1rem 0 0; } .rv-hero__title-accent { color: var(--rv-accent); } .rv-hero__lede { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; color: var(--rv-text-muted); margin: 1.25rem 0 0; max-width: 34rem; } .rv-hero__lede strong { color: var(--rv-heading); font-weight: 600; } .rv-hero__lede a { color: var(--rv-accent); text-decoration: none; border-bottom: 1px solid var(--rv-accent-soft); } .rv-hero__lede a:hover { border-bottom-color: var(--rv-accent); } .rv-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .rv-hero__meta { font-size: 0.82rem; color: var(--rv-text-faint); margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } /* ---- SIGNATURE: the Rundown readout panel -------------------------------- */ .rv-readout { margin: 0; background: var(--rv-panel); border: 1px solid var(--rv-panel-line); border-radius: var(--rv-radius); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04) inset; overflow: hidden; font-family: var(--rv-font-mono); color: var(--rv-panel-text); } .rv-readout__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--rv-panel-line); font-size: 0.74rem; } .rv-readout__dots { display: inline-flex; gap: 0.32rem; } .rv-readout__dots i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--rv-panel-line); } .rv-readout__file { color: var(--rv-panel-faint); letter-spacing: 0.02em; } .rv-readout__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--rv-panel-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; } .rv-readout__live-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--rv-pass); animation: rv-pulse 1.6s ease-in-out infinite; } .rv-readout__steps { list-style: none; margin: 0; padding: 0.5rem 0; } .rv-step { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0.95rem; font-size: 0.84rem; border-left: 2px solid transparent; } /* Page-load reveal — PROGRESSIVE ENHANCEMENT. The readout is fully visible by default (no-JS, paused tab, crawler, and the unfocused-webview case all see the finished state). The staggered fade-up only runs once JS adds `.rv-anim` to the figure AND motion is allowed — so the animation can never be the reason content is missing. */ .rv-anim .rv-step { opacity: 0; transform: translateY(6px); animation: rv-step-in 0.45s ease forwards; animation-delay: calc(0.25s + var(--i) * 0.28s); } .rv-step__idx { color: var(--rv-panel-faint); font-size: 0.72rem; } .rv-step__verb { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.12rem 0.4rem; border-radius: 0.28rem; border: 1px solid currentColor; min-width: 3.4rem; text-align: center; } .rv-verb--post { color: #7dd3a8; } .rv-verb--get { color: #6db4e6; } .rv-verb--patch { color: #fbbf24; } .rv-step__path { color: var(--rv-panel-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-step__var { color: var(--rv-panel-faint); } .rv-step__status { display: inline-flex; align-items: center; gap: 0.55rem; } .rv-step__ms { color: var(--rv-panel-faint); font-size: 0.74rem; } .rv-step__dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--rv-panel-line); position: relative; } /* The dot's resting state IS the green "passed" pip (default-visible). */ .rv-step__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rv-pass); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16); } /* Under animation, it "resolves" to green just after its row appears. */ .rv-anim .rv-step__dot::after { opacity: 0; transform: scale(0.4); animation: rv-dot-pass 0.4s ease forwards; animation-delay: calc(0.55s + var(--i) * 0.28s); } .rv-readout__out { border-top: 1px solid var(--rv-panel-line); padding: 0.85rem 0.95rem 1rem; background: rgba(0, 0, 0, 0.18); } .rv-anim .rv-readout__out { opacity: 0; animation: rv-step-in 0.5s ease forwards; animation-delay: 1.7s; /* after the 4 steps have resolved */ } .rv-readout__prompt { display: block; font-size: 0.72rem; color: var(--rv-accent); margin-bottom: 0.5rem; } .rv-readout__prompt::before { content: "› "; color: var(--rv-panel-faint); } .rv-readout__json { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--rv-panel-text); white-space: pre-wrap; word-break: break-word; } .rv-j-brace { color: var(--rv-panel-faint); } .rv-j-key { color: #6db4e6; } .rv-j-meta { color: #7dd3a8; } @keyframes rv-step-in { to { opacity: 1; transform: translateY(0); } } @keyframes rv-dot-pass { to { opacity: 1; transform: scale(1); } } @keyframes rv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- BANDS (shared) ------------------------------------------------------- */ .rv-band { max-width: var(--rv-maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) 1.5rem; border-top: 1px solid var(--rv-border); } .rv-band__head { max-width: 44rem; } .rv-band__title { font-family: var(--rv-font-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.025em; line-height: 1.1; color: var(--rv-heading); margin: 0.7rem 0 0; } .rv-band__sub { font-size: 1rem; line-height: 1.65; color: var(--rv-text-muted); margin: 1rem 0 0; } .rv-band__sub a { color: var(--rv-accent); text-decoration: none; border-bottom: 1px solid var(--rv-accent-soft); } .rv-band__sub a:hover { border-bottom-color: var(--rv-accent); } /* ---- HOW: 3 moves --------------------------------------------------------- */ .rv-steps3 { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .rv-move { position: relative; padding: 1.4rem 1.3rem; background: var(--rv-bg-subtle); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); } .rv-move__idx { font-family: var(--rv-font-mono); font-size: 0.82rem; font-weight: 600; color: var(--rv-accent); background: var(--rv-accent-soft); border-radius: 0.3rem; padding: 0.12rem 0.45rem; } .rv-move__title { font-family: var(--rv-font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: var(--rv-heading); margin: 0.85rem 0 0; } .rv-move__body { font-size: 0.92rem; line-height: 1.6; color: var(--rv-text-muted); margin: 0.5rem 0 0; } .rv-move__body a { color: var(--rv-accent); text-decoration: none; border-bottom: 1px solid var(--rv-accent-soft); } .rv-move__body a:hover { border-bottom-color: var(--rv-accent); } .rv-move__body code { font-family: var(--rv-font-mono); font-size: 0.86em; background: var(--rv-bg-code); border: 1px solid var(--rv-border); border-radius: 0.3rem; padding: 0.05em 0.32em; } .rv-flowfig { margin: 2.5rem 0 0; padding: 1.5rem; background: var(--rv-bg-subtle); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); text-align: center; } .rv-flowfig svg { display: block; width: 100%; height: auto; max-width: 1120px; margin: 0 auto; } /* The flow diagram is inlined (not an ) so it lives in the document and inherits the active theme. Its element classes bind to the same --rv-* tokens as the rest of the page, so the light/dark TOGGLE drives it — an external could only ever see the OS `prefers-color-scheme`, which is why it used to flash a white card whenever the toggle and the OS disagreed. */ .rv-flowfig svg .box { fill: var(--rv-bg); stroke: var(--rv-border-strong); } .rv-flowfig svg .box-engine { fill: var(--rv-accent-soft); stroke: var(--rv-accent); } .rv-flowfig svg .title { fill: var(--rv-heading); } .rv-flowfig svg .engine-title { fill: var(--rv-accent); } .rv-flowfig svg .sub { fill: var(--rv-text-muted); } .rv-flowfig svg .faint, .rv-flowfig svg .edge-label { fill: var(--rv-text-faint); } .rv-flowfig svg .edge, .rv-flowfig svg .edge-arrow { stroke: var(--rv-text-faint); } .rv-flowfig svg .edge-arrow { fill: var(--rv-text-faint); stroke: none; } /* "The loop" diagram on the agentic page — same inline-token approach as the flow figure (tracks the theme toggle, no leak). Drawn as a true cycle: the agent orchestrates on the left, ReṼoman executes on the right, an API-Graph rides the top arc in and a Rundown of Context Information rides the bottom arc back. The returned artifact carries the accent because the Context Information is the valuable output the agent reasons over. */ .rv-loopfig { margin: 1.75rem 0 0; padding: clamp(1rem, 2.5vw, 1.75rem); background: var(--rv-bg-subtle); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); } .rv-loopfig svg { display: block; width: 100%; height: auto; max-width: 820px; margin: 0 auto; } .rv-loopfig svg .box { fill: var(--rv-bg); stroke: var(--rv-border-strong); } .rv-loopfig svg .box-engine { fill: var(--rv-accent-soft); stroke: var(--rv-accent); } .rv-loopfig svg .title { fill: var(--rv-heading); } .rv-loopfig svg .engine-title { fill: var(--rv-accent); } .rv-loopfig svg .sub { fill: var(--rv-text-muted); } .rv-loopfig svg .faint { fill: var(--rv-text-faint); } .rv-loopfig svg .caption { fill: var(--rv-text-faint); font-family: var(--rv-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; } .rv-loopfig svg .edge { stroke: var(--rv-text-faint); fill: none; } .rv-loopfig svg .edge-arrow { fill: var(--rv-text-faint); stroke: none; } .rv-loopfig svg .pill { fill: var(--rv-bg); stroke: var(--rv-border-strong); } .rv-loopfig svg .pill-text { fill: var(--rv-text-muted); font-family: var(--rv-font-mono); font-weight: 500; } .rv-loopfig svg .pill-accent { fill: var(--rv-accent-soft); stroke: var(--rv-accent); } /* ---- APPLICATIONS grid ---------------------------------------------------- */ .rv-appgrid { margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .rv-appcard { display: flex; flex-direction: column; padding: 1.5rem 1.4rem; background: var(--rv-bg); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); text-decoration: none; transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .rv-appcard:hover { border-color: var(--rv-accent); transform: translateY(-2px); box-shadow: var(--rv-shadow); } .rv-appcard__tag { font-family: var(--rv-font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--rv-text-faint); } .rv-appcard__title { font-family: var(--rv-font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.015em; color: var(--rv-heading); margin: 0.55rem 0 0; } .rv-appcard__body { font-size: 0.92rem; line-height: 1.6; color: var(--rv-text-muted); margin: 0.55rem 0 0; flex: 1; } .rv-appcard__body code { font-family: var(--rv-font-mono); font-size: 0.86em; } .rv-appcard__go { font-size: 0.86rem; font-weight: 600; color: var(--rv-accent); margin-top: 1rem; } /* ---- HONEST: today vs roadmap -------------------------------------------- */ .rv-honest__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .rv-honest__col { padding: 1.6rem 1.5rem; border: 1px solid var(--rv-border); border-radius: var(--rv-radius); background: var(--rv-bg-subtle); } .rv-honest__col--today { border-left: 3px solid var(--rv-pass); } .rv-honest__col--road { border-left: 3px solid var(--rv-warning); } .rv-honest__label { font-family: var(--rv-font-mono); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1rem; } .rv-honest__label--today { color: var(--rv-tip); } .rv-honest__label--road { color: var(--rv-warning); } .rv-honest__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.6rem; } .rv-honest__list li { font-size: 0.92rem; line-height: 1.55; color: var(--rv-text-muted); } .rv-honest__list code { font-family: var(--rv-font-mono); font-size: 0.86em; background: var(--rv-bg-code); border: 1px solid var(--rv-border); border-radius: 0.3rem; padding: 0.05em 0.3em; } .rv-honest__list a { color: var(--rv-accent); text-decoration: none; border-bottom: 1px solid var(--rv-accent-soft); } .rv-honest__list a:hover { border-bottom-color: var(--rv-accent); } .rv-honest__foot { font-size: 0.84rem; font-style: italic; color: var(--rv-text-faint); margin: 1rem 0 0; } /* ---- final CTA ------------------------------------------------------------ */ .rv-cta { max-width: var(--rv-maxw); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; border-top: 1px solid var(--rv-border); text-align: center; } .rv-cta__title { font-family: var(--rv-font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; color: var(--rv-heading); margin: 0; } .rv-cta__sub { font-size: 1.05rem; color: var(--rv-text-muted); margin: 1rem 0 0; } .rv-cta__sub code { font-family: var(--rv-font-mono); font-size: 0.88em; color: var(--rv-accent); } .rv-cta .rv-hero__cta { justify-content: center; } /* ---- responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .rv-hero { grid-template-columns: 1fr; } .rv-readout { order: 2; } .rv-steps3, .rv-appgrid { grid-template-columns: 1fr; } .rv-honest__grid { grid-template-columns: 1fr; } } /* ---- reduced motion: render the final state instantly -------------------- Belt-and-braces: the JS gate (§ head-meta) already withholds `.rv-anim` when the user prefers reduced motion, but if `.rv-anim` ever lands anyway, force every animated element to its resting (visible) state. */ @media (prefers-reduced-motion: reduce) { .rv-anim .rv-step, .rv-anim .rv-readout__out { opacity: 1; transform: none; animation: none; } .rv-anim .rv-step__dot::after { opacity: 1; transform: scale(1); animation: none; } .rv-readout__live-dot { animation: none; } }