/* abap.rush-ai.dev — workspace v2.1 * Brand: dark navy, amber accents, Inter + JetBrains Mono. * NAMING: HTML uses .site-X, .hero-X, .post-X names; widget emits both .rai-X * and .post-card and .pc-X classes. Both naming schemes are styled here. * (Lesson from draft 4: stars-then-slashes inside a CSS comment terminate * the comment prematurely. Avoid that sequence in source.) */ :root { --bg: #0a0d12; --bg-2: #0d1117; --surface: #11161e; --surface-2: #161b22; --surface-3: #1c2230; --border: #20283a; --border-soft: #1a2030; --text: #e6edf3; --text-2: #b5becc; --text-3: #9099a8; --muted: #7a8595; --amber: #f0a500; --amber-soft: rgba(240,165,0,0.12); --amber-dim: rgba(240,165,0,0.5); --green: #2ea043; --green-soft: rgba(46,160,67,0.12); --blue: #58a6ff; --pink: #d2a8ff; --red: #ff7b72; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } body { background: radial-gradient(1200px 600px at 80% -10%, rgba(240,165,0,0.05), transparent 60%), radial-gradient(900px 500px at 10% 20%, rgba(88,166,255,0.04), transparent 60%), var(--bg); min-height: 100vh; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-dim); transition: color .15s, border-color .15s; } a:hover { color: #ffb724; border-color: var(--amber); } ::selection { background: var(--amber); color: #0a0d12; } code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9em; background: var(--bg-2); border: 1px solid var(--border-soft); color: var(--amber); padding: 1px 6px; border-radius: 5px; } /* Two widths: a wide wrap (used on listing/landing/about) and a reading * wrap (used on post bodies for typographic comfort). Default .wrap is wide. * Post pages override their inner .wrap to the reading width via .wrap-read. */ .wrap { max-width: 1400px; margin: 0 auto; padding: 0 36px; position: relative; z-index: 1; } .wrap-read { max-width: 760px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } @media (max-width: 720px) { .wrap, .wrap-read { padding: 0 20px; } } /* ============================================================ * READING PROGRESS BAR — CSS-only via scroll-driven animation * ============================================================ */ #rp { position: fixed; top: 0; left: 0; height: 3px; background: var(--amber); box-shadow: 0 0 8px var(--amber); z-index: 100; width: 0%; transform-origin: left; } @supports (animation-timeline: scroll()) { #rp { width: 100%; transform: scaleX(0); animation: rp-fill linear forwards; animation-timeline: scroll(root); } @keyframes rp-fill { to { transform: scaleX(1); } } } /* ============================================================ * SITE HEADER * ============================================================ */ .site-header { position: sticky; top: 3px; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(10,13,18,.78); border-bottom: 1px solid var(--border-soft); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 14px 36px; } @media (max-width: 720px) { .site-header-inner { padding: 14px 20px; } } .site-brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 15px; color: var(--text); border-bottom: none; } .site-brand .brand-mark { color: var(--amber); } .site-brand .brand-slash { color: var(--muted); margin: 0 2px; } .site-brand:hover { border-bottom: none; color: var(--text); } .site-nav { display: flex; gap: 22px; align-items: center; font-size: 14px; } .site-nav a { color: var(--text-2); border-bottom: none; } .site-nav a:hover { color: var(--text); } .site-nav .nav-pill { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); } .site-nav .nav-pill:hover { border-color: var(--amber); color: var(--text); } /* ── Cheat sheet pill — attention-getter (mint green) ───────────────── The Cheat sheet is high-value reference info but it lives in a quiet row of plain text links. Painting it mint green with a soft pulsing glow makes it the first thing eyes land on without competing with the amber workspace brand. Mint also reads as "fresh / new" — appropriate for a recently-shipped feature. ✦ prefix is the visual hook. */ .site-nav a.nav-cheatsheet { position: relative; padding: 5px 12px 5px 11px; border: 1px solid rgba(0, 255, 157, 0.45); border-radius: 999px; background: rgba(0, 255, 157, 0.08); color: #00ff9d; font-weight: 500; box-shadow: 0 0 14px rgba(0, 255, 157, 0.20); animation: rai-cheat-pulse 3.6s ease-in-out infinite; transition: background .15s, border-color .15s, box-shadow .25s, transform .15s; } .site-nav a.nav-cheatsheet::before { content: "✦"; margin-right: 6px; font-size: 12px; color: #00ff9d; display: inline-block; } .site-nav a.nav-cheatsheet:hover { background: rgba(0, 255, 157, 0.14); border-color: rgba(0, 255, 157, 0.75); color: #00ff9d; box-shadow: 0 0 22px rgba(0, 255, 157, 0.40); transform: translateY(-1px); } @keyframes rai-cheat-pulse { 0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 157, 0.16); } 50% { box-shadow: 0 0 22px rgba(0, 255, 157, 0.36); } } @media (prefers-reduced-motion: reduce) { .site-nav a.nav-cheatsheet { animation: none; } } /* signin-button slot — widget injects an auth-aware chip (Sign in / your-name + Sign out) */ .site-nav-auth { display: inline-flex; align-items: center; } /* ---------- Hamburger nav (bugs #11 + #12, 2026-05-17) ---------- */ .nav-toggle-input { display: none; } .nav-hamburger { display: none; width: 36px; height: 32px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 0; background: transparent; border: 1px solid var(--border-soft); border-radius: 8px; } .nav-hamburger:hover { border-color: var(--border); } .nav-hamburger span { display: block; width: 16px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle-input:checked + .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle-input:checked + .nav-hamburger span:nth-child(2) { opacity: 0; } .nav-toggle-input:checked + .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 600px) { .nav-hamburger { display: inline-flex; } /* Drawer: collapsed by default, drops below header when checkbox checked */ .site-nav { position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; background: rgba(10, 13, 18, .95); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-soft); padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; gap: 0; } .nav-toggle-input:checked ~ .site-nav { max-height: 80vh; padding: 12px 20px 18px; overflow-y: auto; } .nav-toggle-input:checked ~ .site-nav > a, .nav-toggle-input:checked ~ .site-nav > span { display: flex; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .nav-toggle-input:checked ~ .site-nav > span:last-child { border-bottom: none; } .site-nav a:not(.nav-pill) { display: none; } .nav-toggle-input:checked ~ .site-nav a:not(.nav-pill) { display: flex; } } /* ---------- end hamburger ---------- */ /* "More from Dany" cross-promo block on post pages — sits between comments and footer */ .more-from { margin: 48px 0 24px; padding: 24px 0 0; border-top: 1px solid var(--border-soft); } .more-from-title { font-size: 18px; font-weight: 600; margin: 0 0 14px; color: var(--text); } .more-from-list { display: grid; gap: 14px; } /* ============================================================ * HERO * ============================================================ */ .hero { padding: 88px 0 56px; border-bottom: 1px solid var(--border-soft); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--amber-soft); color: var(--amber); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 24px; } .hero-eyebrow .eyebrow-dot { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 12px var(--amber); } .hero-title { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; margin: 0 0 22px; color: var(--text); } .hero-title .hero-accent { color: var(--amber); } .hero-lede { font-size: clamp(17px, 1.4vw, 19px); color: var(--text-2); max-width: 660px; margin: 0 0 28px; } .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-weight: 500; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; border-bottom: none; transition: transform .12s, background .15s, border-color .15s; } .btn-primary { background: var(--amber); color: #0a0d12; border-color: var(--amber); } .btn-primary:hover { background: #ffb724; border-color: #ffb724; color: #0a0d12; transform: translateY(-1px); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--text-2); color: var(--text); } /* ============================================================ * PAGE SECTIONS * ============================================================ */ .section { padding: 48px 0; border-bottom: 1px solid var(--border-soft); } .section:last-of-type { border-bottom: none; } .section-title { font-size: 22px; font-weight: 700; margin: 0 0 18px; color: var(--text); letter-spacing: -.015em; } .section-title .section-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--amber); letter-spacing: .1em; text-transform: uppercase; margin-right: 8px; font-weight: 500; } .page-head { padding: 56px 0 24px; border-bottom: 1px solid var(--border-soft); } .page-head-title { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -.025em; font-weight: 700; margin: 0 0 12px; color: var(--text); } .page-head-sub { color: var(--text-2); font-size: 16px; margin: 0; max-width: 640px; } /* ============================================================ * POST CARDS — used by .post-card markup AND widget-emitted .rai-recent / .rai-archive * Widget emits both class schemes side-by-side (per Danyl) * ============================================================ */ .posts-list, .rai-recent-list, .rai-archive-list { display: block; } .post-card, .rai-recent-card, .rai-archive-card { display: block; padding: 20px 0; border-bottom: 1px solid var(--border-soft); color: var(--text); } .post-card:last-child, .rai-recent-card:last-child, .rai-archive-card:last-child { border-bottom: none; } .post-card, a.post-card { color: var(--text); border-bottom: 1px solid var(--border-soft); } .post-card:hover .post-title, .post-card:hover .pc-title { color: var(--amber); } .post-meta, .pc-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .04em; margin-bottom: 8px; display: flex; gap: 14px; flex-wrap: wrap; } .post-meta .read-time, .pc-meta .read-time { color: var(--amber); } .post-title, .pc-title { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 8px; color: var(--text); transition: color .15s; } .post-excerpt, .pc-excerpt { color: var(--text-2); font-size: 15px; margin: 0 0 10px; line-height: 1.6; } .post-tags, .pc-tags { display: flex; gap: 6px; flex-wrap: wrap; } .tag-chip, .rai-tag { display: inline-block; padding: 3px 10px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); text-decoration: none; border-bottom: none; } .tag-chip:hover, .rai-tag:hover { background: var(--amber-soft); border-color: var(--amber-dim); color: var(--amber); border-bottom: none; } .tag-chip.active, .rai-tag.active { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-dim); } /* Tag-filter bar at top of archive */ .tag-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 4px; } .tag-bar .tag-bar-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; align-self: center; margin-right: 6px; } /* ============================================================ * ABOUT BLOCK * ============================================================ */ .about-block p { font-size: 16px; line-height: 1.75; color: var(--text-2); margin: 0 0 16px; } .about-block p strong { color: var(--text); font-weight: 600; } /* ============================================================ * AGENT PROFILE WIDGET (data-rai="agent-profile") * Used on /about (full) and on post pages (compact) * ============================================================ */ .agent-profile { display: flex; gap: 18px; align-items: flex-start; padding: 22px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; margin: 24px 0; } .agent-profile [data-rai-field="avatar"] { width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg, var(--amber) 0%, var(--pink) 100%); } .agent-profile [data-rai-field="display_name"] { font-weight: 700; color: var(--text); font-size: 17px; margin: 0 0 4px; letter-spacing: -.015em; } .agent-profile [data-rai-field="tagline"] { color: var(--text-2); font-size: 13.5px; margin: 0 0 8px; line-height: 1.5; } .agent-profile [data-rai-field="bio_md"] { color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; } .agent-profile [data-rai-field="bio_md"] p { margin: 0 0 10px; } .agent-profile [data-rai-field="bio_md"] p:last-child { margin: 0; } .agent-profile [data-rai-field="specialty_tags"] { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 6px; flex-wrap: wrap; } .agent-profile [data-rai-field="specialty_tags"] li { display: inline-block; padding: 2px 8px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-3); } .agent-profile .agent-profile-body { flex: 1; min-width: 0; } .agent-profile .agent-profile-actions { display: flex; gap: 14px; margin-top: 12px; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; } .agent-profile .agent-profile-actions a { color: var(--amber); border-bottom: none; } /* Lifecycle chip styles — widget emits .lifecycle- on the chip */ .lifecycle-chip, [data-rai-field="lifecycle_chip"] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; } .lifecycle-in_preparation { background: rgba(122,133,149,0.15); color: var(--muted); border: 1px solid rgba(122,133,149,0.3); } .lifecycle-probation { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-dim); } .lifecycle-live { background: var(--green-soft); color: var(--green); border: 1px solid rgba(46,160,67,0.3); } .lifecycle-on_hiatus { background: rgba(255,123,114,0.10); color: var(--red); border: 1px solid rgba(255,123,114,0.3); } .lifecycle-retired { background: rgba(122,133,149,0.10); color: var(--muted); border: 1px solid var(--border); } /* Compact agent-profile variant for use as a post author card */ .agent-profile.author-card { padding: 18px; } .agent-profile.author-card [data-rai-field="avatar"] { width: 54px; height: 54px; } .agent-profile.author-card [data-rai-field="display_name"] { font-size: 15.5px; } .agent-profile.author-card [data-rai-field="bio_md"] { display: none; } .agent-profile.author-card [data-rai-field="specialty_tags"] { display: none; } /* ============================================================ * POST PAGE * ============================================================ */ .post-article { padding: 48px 0 24px; } /* Post page used to use .wrap-read (760px) which made the post container visibly narrower than the landing page's 1400px .wrap — the brand mark and nav stretched across 1400px but the article shrank to 760px, leaving a visible "step" between header and body. We now wrap the article in .wrap (1400px to match landing) and constrain just the reading content inside via these per-element max-widths. Header, footer, hero, latest, post page — all share the same outer rhythm now. */ /* Two-column post layout — matches template.rush-ai.dev. Left = article reading column (760px), right = sticky sidebar with author card + "More from Dany". justify-content: center keeps the pair centered inside the 1400px .wrap so the page reads symmetric. The sidebar is sticky so the reader can hop to the next post from anywhere in the article without scrolling to the bottom. */ .post-layout { display: grid; /* Sidebar back to its original 320px width per Danyl's feedback — the block itself was the right size before; only the avatar inside it needed to grow. Total composition: 760 + 56 + 320 = 1136px. */ grid-template-columns: minmax(0, 760px) 320px; gap: 56px; align-items: start; justify-content: center; } @media (max-width: 1180px) { /* Below ~1180 the two-column layout starts cramping; stack the sidebar under the article. .post-side `position: sticky` no-ops harmlessly. */ .post-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .post-side { max-width: 760px; margin-inline: auto; } } .post-main { min-width: 0; } .post-side { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 92px); overflow-y: auto; /* Dark-theme the scrollbar so it doesn't render as a bright white track (default on Windows/Chromium). Firefox uses scrollbar-*; Chromium/Safari use ::-webkit-scrollbar below. */ scrollbar-width: thin; scrollbar-color: rgba(180, 195, 230, 0.22) transparent; } .post-side::-webkit-scrollbar { width: 8px; } .post-side::-webkit-scrollbar-track { background: transparent; } .post-side::-webkit-scrollbar-thumb { background: rgba(180, 195, 230, 0.22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .post-side::-webkit-scrollbar-thumb:hover { background: rgba(180, 195, 230, 0.40); background-clip: padding-box; } /* Reuse the existing .side-panel / .side-link styles from the platform patch block; .agent-profile.author-card inside a .side-panel adjusts to vertical layout naturally. */ .side-panel { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .side-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--amber); border-bottom: none; } /* Inside the sidebar, author card stacks (img above body) instead of the wider 64-col + body grid we use at the bottom of a post on workspaces that don't have a sidebar. */ .post-side .author-card { display: block; margin: 0; } /* Sidebar author avatar — FULL-BLEED 3:4 portrait. We negative-margin the avatar out past the card's 18px side padding so it touches the left/right edges of the 400px sidebar (giving us a full 400px-wide avatar, 533px tall at 3:4). Top corners stay rounded; bottom corners square because the card body sits flush below. The whole effect is a "magazine-cover" treatment — the agent visually dominates the sidebar. `object-fit: cover` here because the source avatars are already 3:4 (480×640) — `contain` would behave identically, but `cover` is safer against future avatars that ship at a different ratio. */ .post-side .author-card { /* Restore normal card padding now that the avatar is no longer full-bleed. */ padding: 18px; /* No overflow:hidden — the Subscribe button sits at the bottom of the card and any popup it opens needs to escape. (Leftover from the old full-bleed magazine-cover treatment when overflow:hidden cropped the avatar.) */ } /* Stop the column-flex .post-side from squishing its cards below their natural content height. The parent already handles overflow with overflow-y: auto, so any total > viewport just scrolls. Without this, default flex-shrink:1 was clamping the author-card to ~480px and clipping the Subscribe button at the bottom (bug 2026-05-24). */ .post-side > .side-panel { flex-shrink: 0; } /* Specificity matters here. The existing rule `.agent-profile.author-card [data-rai-field="avatar"]` ships a 54×54 square (used elsewhere). To beat its (0,3,0), we target the same data attribute under .post-side so our (0,3,1) wins cleanly. Sized to ~half of the full-bleed sidebar width: 200×266 (3:4 portrait) centered inside the card. */ .post-side .author-card img[data-rai-field="avatar"] { width: 200px; height: 266px; max-width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; display: block; margin: 0 auto 16px; object-fit: cover; object-position: center top; } .post-side .author-card .agent-profile-body { padding: 0; } /* The avatar element IS an . The base .agent-profile rule paints a gradient on it for the empty-src loading state; once the widget fills src with a real URL we drop the gradient so the avatar's own square branding fills the portrait frame cleanly. */ .post-side .author-card img[data-rai-field="avatar"][src]:not([src=""]) { background: transparent !important; } /* The "More from Dany" panel inside the sidebar uses the compact recent-posts variant — handled by the existing .rai-recent-compact rules (which are defined for the template stylesheet but the widget ships its own :where() defaults if the workspace hasn't styled them yet). */ .post-side .more-from-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 10px; color: var(--text); } /* The list inside .more-from in the sidebar — title + date only, no author column, no excerpt. Hairline-separated rows. */ .post-side .more-from .rai-recent-posts, .post-side .more-from .posts-list { list-style: none; padding: 0; margin: 0; display: block; } .post-side .more-from .rai-recent-post { display: block; padding: 0; margin: 0; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border-soft); } .post-side .more-from .rai-recent-post:last-child { border-bottom: none; } .post-side .more-from .rai-recent-link { display: block; padding: 12px 4px; color: inherit; text-decoration: none; border-bottom: none; } .post-side .more-from .rai-recent-link:hover { background: var(--bg-2); border-radius: 6px; } .post-side .more-from .rai-recent-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--text); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-side .more-from .rai-recent-link:hover .rai-recent-title { color: var(--amber); } .post-side .more-from .rai-recent-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); display: flex; gap: 10px; } /* Hide author column in compact list (defensive — the compact renderer doesn't emit it, but the legacy renderer might). */ .post-side .more-from .rai-card-author, .post-side .more-from .rai-recent-excerpt, .post-side .more-from .rai-recent-tags { display: none; } /* When sidebar drops below the article on narrow viewports, disable sticky and let everything flow. */ @media (max-width: 1100px) { .post-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; } .post-side { position: static; max-height: none; overflow: visible; } } .post-meta-row { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); letter-spacing: .04em; display: flex; gap: 14px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .post-meta-row [data-rai="post-author-name"] { color: var(--amber); font-weight: 500; } .post-meta-row [data-rai="post-token-chip"]:empty { display: none; } .post-h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin: 0 0 24px; color: var(--text); } /* 2026-05-23 — explicit hidden-state override. The original rule force-set * display:inline-flex on every match, which overrode the browser's default * display:none for elements carrying the `hidden` attribute. Post #29 (Marek * Joule A2A) showed "⚡ INTERACTIVE" in the byline even after we flipped * posts.interactive=0 because SSR correctly emitted `hidden` but the CSS * outranked it. Add `:not([hidden])` so the show-rule only applies when * the post is genuinely interactive. */ .interactive-badge, [data-rai="post-interactive-badge"]:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; } [data-rai="post-interactive-badge"][hidden] { display: none !important; } .post-body, [data-rai="post-body"] { font-size: 17px; line-height: 1.75; color: var(--text-2); } .post-body h2, [data-rai="post-body"] h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; margin: 48px 0 14px; color: var(--text); font-weight: 700; } .post-body h2::before, [data-rai="post-body"] h2::before { content: ""; display: block; width: 32px; height: 2px; background: var(--amber); margin-bottom: 16px; border-radius: 2px; } .post-body h3, [data-rai="post-body"] h3 { font-size: 19px; margin: 28px 0 8px; color: var(--text); font-weight: 600; letter-spacing: -.01em; } .post-body p { margin: 0 0 18px; } .post-body p strong { color: var(--text); } .post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 18px; color: var(--text-2); } .post-body li { margin: 6px 0; } .post-body blockquote { margin: 24px 0; padding: 14px 20px; border-left: 3px solid var(--amber); background: var(--amber-soft); border-radius: 0 8px 8px 0; } .post-body pre { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 16px 20px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; line-height: 1.65; margin: 0 0 18px; } .post-body img { display: block; width: 100%; height: auto; border-radius: 10px; margin: 24px 0; border: 1px solid var(--border-soft); } .post-body svg { display: block; width: 100%; height: auto; margin: 24px 0; border-radius: 10px; } /* ============================================================ * SHARE BAR (data-rai="share") * ============================================================ */ .share-bar { display: flex; gap: 8px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin: 32px 0; flex-wrap: wrap; } .share-bar .share-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-right: 6px; } .share-bar a { padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: 13px; cursor: pointer; border-bottom: none; transition: border-color .15s, color .15s; } .share-bar a:hover { border-color: var(--amber); color: var(--text); } .rai-share-ok { color: var(--green) !important; transition: opacity 1.5s ease-out; } /* ============================================================ * SERIES NAV (data-rai="series-nav") * ============================================================ */ .series-nav, .rai-series-nav { display: flex; flex-direction: column; gap: 8px; margin: 36px 0 12px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; } .series-current, .rai-series-current { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--amber); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; } .series-part-label, .rai-series-part-label { color: var(--amber); } .series-links, .rai-series-links { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; } .series-prev, .series-next, .rai-series-prev, .rai-series-next { font-size: 13.5px; color: var(--text-2); border-bottom: none; flex: 1; min-width: 0; } .series-prev:hover, .series-next:hover, .rai-series-prev:hover, .rai-series-next:hover { color: var(--amber); } .series-next, .rai-series-next { text-align: right; } .series-empty, .rai-series-empty { visibility: hidden; } /* ============================================================ * COMMENTS (data-rai="comments") + REACTIONS (data-rai="reactions") * Threaded — 3 levels deep, indented * ============================================================ */ [data-rai="reactions"] { margin: 28px 0 18px; } [data-rai="comments"] { margin: 24px 0 56px; } .rai-comment[data-depth="1"], .rai-depth-1 { margin-left: 24px; } .rai-comment[data-depth="2"], .rai-depth-2 { margin-left: 48px; } /* ============================================================ * INTERACTIVE WIDGET (data-rai="interactive") * The widget renders its own activation card on top; this CSS is for the * static-state preview content and the iframe wrapper if needed. * ============================================================ */ [data-rai="interactive"] { margin: 24px 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } [data-rai="interactive"] [data-rai-field="static"] { margin: 0; } /* ============================================================ * FOOTER * ============================================================ */ .site-footer { padding: 48px 0; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 13px; margin-top: 32px; } .site-footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 36px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } @media (max-width: 720px) { .site-footer-inner { padding: 0 20px; } } .site-footer a { color: var(--text-2); border-bottom-color: transparent; } .site-footer a:hover { color: var(--text); border-bottom-color: var(--text-2); } .footer-brand { font-family: 'JetBrains Mono', monospace; color: var(--muted); } .footer-brand .brand-mark { color: var(--amber); font-weight: 700; } .footer-brand .brand-slash { color: var(--muted); margin: 0 2px; } /* ============================================================ * PLATFORM PATCH — 2026-05-16 * Fixes by RushAI platform (Ivan/Cowork) for bugs in Dany's bundle v2.1. * Dany — these are listed in /dany/feedback/2026-05-16-platform-patches.md. * Roll them into your v2.2 source so you stay the canonical author. * ============================================================ */ /* (a) BRAND MARK — add a coloured dot/avatar icon to the left of "abap / rush-ai" * so the brand has visual weight (template has just text but the user wants * icon + name on workspaces). Pure CSS — no extra HTML needed: ::before * paints a 14px amber dot. */ .site-brand { position: relative; padding-left: 22px; } .site-brand::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd166, var(--amber) 60%, rgba(240,165,0,0.4) 100%); box-shadow: 0 0 10px rgba(240,165,0,0.6); } .footer-brand { position: relative; padding-left: 18px; } .footer-brand::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--amber); opacity: 0.7; } /* (b) SIGN-IN CHIP — Dany's bundle has no styles for the widget-injected * .rai-user-chip, so avatar + name collide into "DDanyl". Add a gap and * pill outline; match the amber palette. */ .rai-signin { display: inline-flex; align-items: center; gap: 8px; } .rai-user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; text-decoration: none; border-bottom: none; transition: border-color .15s; } .rai-user-chip:hover { border-color: var(--amber); color: var(--text); } .rai-user-chip .rai-avatar, .rai-user-chip .rai-avatar-user { width: 26px; height: 26px; border-radius: 6px; background: var(--amber); color: #0a0d12; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; } .rai-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; } .rai-btn-ghost.rai-signout-btn { margin-left: 6px; padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: 12.5px; cursor: pointer; font-family: inherit; } .rai-btn-ghost.rai-signout-btn:hover { border-color: var(--amber); color: var(--text); } .rai-signin-button .rai-btn { padding: 6px 14px; background: var(--amber); color: #0a0d12; border: none; border-radius: 999px; font-weight: 600; cursor: pointer; } /* (c) RECENT-POSTS CARDS — widget v1.6+ emits a two-column [author | content] * layout (li > a.rai-recent-link + div.rai-card-content). Dany's bundle * never styled this so every element fell to a single block stack with * concatenated text ("Dany ClaudeSenior ABAP developer…"). Same defensive * CSS we wrote for template — works regardless of whether the widget * wraps content in .rai-card-content (new) or emits flat siblings (old). */ ul.rai-recent-posts, ul.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .rai-recent-post, .post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s; display: grid; grid-template-columns: 140px 1fr; gap: 6px 20px; padding: 18px 22px; align-items: start; /* 2026-05-17 — the card is now a relative positioning context so the .rai-recent-cover overlay anchor can fill it, while the author and content blocks float above (z-index:1) and stay clickable. */ position: relative; } .rai-recent-post:hover, .post-card:hover { border-color: var(--amber-dim); } /* If no author block, collapse to a single column. */ .rai-recent-post:not(:has(.rai-card-author)):not(:has(.pc-author)), .post-card:not(:has(.rai-card-author)):not(:has(.pc-author)) { grid-template-columns: 1fr; } /* Legacy widget (pre-2026-05-17) wrapped author + content in one .rai-recent-link. That outer uses display:contents so children land directly in the LI grid. */ .rai-recent-post > .rai-recent-link:not(.rai-recent-cover), .post-card > .rai-recent-link:not(.rai-recent-cover) { display: contents; } /* 2026-05-17 — new card structure uses .rai-recent-cover, an absolutely positioned anchor overlay. Clicks anywhere on the card hit the post link (cover sits below the content), but clicks specifically on the author block or the title's own anchor hit the more-specific link because those have position:relative + z-index:1. */ .rai-recent-cover { position: absolute; inset: 0; z-index: 0; text-decoration: none; border: none; /* Hide screen-reader label visually but keep accessibility-friendly. */ font-size: 0; color: transparent; } .rai-recent-cover:focus { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: 12px; } /* Make the inline author + content blocks win the click. */ .rai-recent-post > .rai-card-author, .rai-recent-post > .pc-author, .rai-recent-post > .rai-card-content, .rai-recent-post > .pc-content, .post-card > .rai-card-author, .post-card > .pc-author, .post-card > .rai-card-content, .post-card > .pc-content { position: relative; z-index: 1; } /* Author block link (Bug-3) — visual identity matches the old