/* Porcelain marketing site — shared base. Per-page design tokens (--ink, --glass, …) live inline on each page's root, exactly as the Claude Design source defined them. This file only carries the reset, keyframes, scroll-reveal, and the hover utilities that replace the design runtime's `style-hover` attribute. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #070818; } ::selection { background: rgba(147, 164, 255, .32); color: #fff; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* The two side-by-side gallery shots (search ~2.09, history ~1.13) have very different native aspect ratios, so at equal column widths one card towered over the other and the shorter card padded out with empty space below its text. Pin both to a uniform band so the cards are naturally equal-height. The band matches the WIDE search shot's own ratio (feat-search.png, 1342×642 ≈ 2.09) so that shot is shown in full — a tighter 2/1 band zoomed it just enough to clip its edges. The tall history shot then crops to its top rows (anchored to the top). The full-width terminal card keeps its natural ratio, so it is deliberately not a .gallery-shot. */ .gallery-shot { width: 100%; aspect-ratio: 2.09 / 1; object-fit: cover; object-position: top; } @keyframes pcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pcDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2.5%, 2%) scale(1.06); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Hover states — the design's inline `transition` declarations supply the timing; these supply the end state. */ .h-ink:hover { color: var(--ink); } .h-glass:hover { background: rgba(255, 255, 255, .13); } .h-lift1:hover { transform: translateY(-1px); } .h-lift2:hover { transform: translateY(-2px); } .h-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(150, 170, 255, .42); } .h-backhome:hover { color: var(--ink); background: rgba(255, 255, 255, .13); } /* Scroll reveal. `.reveal-ready` is set on by an inline head script so a no-JS load shows everything; with JS the elements start hidden, then the IntersectionObserver adds `.is-visible`. */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; } .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ── Mobile ────────────────────────────────────────────────────────────── The page is otherwise inline-styled for desktop; these are the only responsive rules. They override inline styles with !important on purpose. */ @media (max-width: 760px) { /* Nav: drop the center anchor links (they overflow), tighten the bar so the GitHub + Download actions never get clipped off the right edge. */ .nav-links { display: none !important; } .site-nav { gap: 10px !important; padding: 8px 10px 8px 12px !important; } .nav-actions { flex: 1; justify-content: flex-end; } .nav-actions a { padding: 8px 12px !important; font-size: 12px !important; } .nav-github { display: none !important; } /* GitHub lives in the page + footer */ /* Breathing room: trim oversized horizontal padding and tall section gaps. */ header { padding: 12px 14px !important; } section { padding-left: 18px !important; padding-right: 18px !important; padding-top: 64px !important; } #top { padding-top: 36px !important; } footer { padding-left: 18px !important; padding-right: 18px !important; } /* Hero type scales down a touch more on narrow screens. */ h1 { font-size: clamp(32px, 9vw, 84px) !important; } /* The feature gallery's 440px min-track forces horizontal scroll — collapse it (and any wide two-up grid) to a single column. */ .gallery-grid { grid-template-columns: 1fr !important; } /* The human ↔ agent loop diagram wraps into an asymmetric mess on narrow screens. Stack it vertically: You → ⇄ MCP → agent, centered and even. */ .loop-diagram { flex-direction: column !important; gap: 12px !important; } .loop-diagram > div { width: 100%; max-width: 280px; } /* Centered section intros read badly on a phone — centered ragged wrapping orphans words ("agent,") and clashes with the left-aligned sections. Left-align them and drop the desktop-tuned forced line breaks. */ .sec-head { text-align: left !important; } .sec-head br { display: none; } /* The flow chain (entry → hook → … → schema) wraps into a grid where the arrows point into empty space. Stack it vertically with downward arrows. */ .flow-chain { flex-direction: column !important; gap: 8px !important; } .flow-chain > div:nth-child(odd) { width: 100%; max-width: 240px; } .flow-chain > div:nth-child(even) { transform: rotate(90deg); } /* Two-column sections stack on mobile; their desktop 48px column gap then becomes a wasted vertical chasm. Tighten it. */ [style*="gap:48px"] { gap: 26px !important; } /* Trim the tallest desktop section gaps so the page doesn't feel sparse. */ #loop { margin-top: 0 !important; } } @media (max-width: 380px) { section { padding-left: 14px !important; padding-right: 14px !important; } }