/* ============================================================ The Agentic Interface Framework — site-wide styles. Editorial minimalist: Geist only, monochrome, sharp corners, hairline borders, quiet motion. Pages: Home / Test / Resources. ============================================================ */ /* ---------- design tokens ---------- */ :root { /* Palette — monochrome by design; grays darken with importance. --muted and --faint are the lightest grays that pass WCAG AA (4.5:1) for text on white. Lighter grays are decorative only. */ --bg: #FFFFFF; --bg-alt: #F7F7F7; --surface: #FFFFFF; --on-ink: #FFFFFF; --ink: #111111; --ink-soft: #333333; --muted: #6E6E6E; --faint: #767676; --hairline: #E8E8E8; --hairline-strong: #DCDCDC; --hairline-faint: #F0F0F0; --border-mid: #D9D9D9; --chip-bg: #EFEFEF; --chip-fg: #3A3A3A; --track: #ECECEC; /* Feature-illustration palette (see the .i-* kit classes) — a future dark mode only needs to re-map these plus the base surface/ink tokens. */ --ill-icon: #7A7A7A; --ill-bar: #E3E3E3; --ill-bar-soft: #F0F0F0; --ill-hairline: #ECECEC; /* Typography — Geist is the only typeface on the site. */ --font: 'Geist', 'Helvetica Neue', sans-serif; --label-xs: 0.62rem; --label-sm: 0.68rem; --label-md: 0.72rem; --label-lg: 0.78rem; /* Layout — one implicit equation, declared once: the vertical rails sit at the container edges, calc(50% ± --container-max/2), and full-bleed separators extend by --container-pad to meet them. The 68rem media breakpoints (literals: media queries cannot read custom properties) must stay at or above --container-max plus breathing room. */ --container-max: 64rem; --container-pad: 2.5rem; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Z-scale (ordering is load-bearing: modal > rails > header > bars > tips) */ --z-tip: 5; --z-genbar: 6; --z-header: 10; --z-rails: 11; --z-modal: 50; /* Phosphor glyphs referenced from CSS pseudo-elements */ --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FFFFFF'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); --icon-x-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23767676'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E"); } /* ---------- dark theme ---------- */ /* Applied as data-theme="dark" on , set before first paint by the inline head script (stored preference in localStorage, defaulting to the system prefers-color-scheme). Only tokens and a few rgba surfaces change — every component and illustration follows automatically. */ html[data-theme="dark"] { --bg: #111111; --bg-alt: #1B1B1B; --surface: #181818; --on-ink: #111111; --ink: #F2F2F2; --ink-soft: #C9C9C9; --muted: #9A9A9A; --faint: #8A8A8A; --hairline: #2A2A2A; --hairline-strong: #3A3A3A; --hairline-faint: #232323; --border-mid: #3E3E3E; --chip-bg: #262626; --chip-fg: #D6D6D6; --track: #2E2E2E; --ill-icon: #A0A0A0; --ill-bar: #3E3E3E; --ill-bar-soft: #2A2A2A; --ill-hairline: #313131; /* Ink surfaces are light in dark mode, so their glyphs go dark. */ --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111111'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); --icon-x-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238A8A8A'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E"); } /* The few surfaces that use rgba() rather than tokens. */ html[data-theme="dark"] .site-header { background: rgba(17, 17, 17, 0.6); } html[data-theme="dark"] .btn-icon { background: rgba(0, 0, 0, 0.14); } html[data-theme="dark"] .acc-item summary:hover .acc-title { color: #FFFFFF; } /* ---------- base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Full-viewport separators use 50vw, which includes the scrollbar gutter; clip (not hidden — that would break position: sticky) swallows the few phantom pixels. */ html { overflow-x: clip; } body { background: var(--bg); color: var(--ink-soft); font-family: var(--font); font-optical-sizing: auto; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--hairline); color: var(--ink); } /* No italics anywhere: emphasis renders as weight instead. */ em, i { font-style: normal; font-weight: 600; } /* Custom elements (components.js) are layout-transparent wrappers. */ site-header, site-footer, ph-icon { display: contents; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0.75rem; left: 0.75rem; z-index: var(--z-modal); background: var(--ink); color: var(--on-ink); font-family: var(--font); font-size: var(--label-md); letter-spacing: 0.02em; text-decoration: none; padding: 0.6rem 0.9rem; transform: translateY(-300%); } .skip-link:focus { transform: none; } /* ---------- container-edge verticals ---------- */ body::before, body::after { content: ""; position: fixed; top: 0; bottom: 0; width: 1px; background: var(--hairline); pointer-events: none; z-index: var(--z-rails); /* above the sticky header so the rails run through it */ } body::before { left: calc(50% - var(--container-max) / 2); } body::after { right: calc(50% - var(--container-max) / 2); } /* Just below the 68rem min-width used by the full-bleed separators, so the two ranges never overlap. */ @media (max-width: 67.9375rem) { body::before, body::after { display: none; } } /* ---------- layout containers ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* ---------- header & tabs ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); } .header-inner { max-width: var(--container-max); margin: 0 auto; /* Tighter side padding than the page container: the bar's logo and controls sit closer to the rails. */ padding: 0 1.25rem; display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; } /* Logo mark (padding keeps the header at its previous 48.8px height). */ .wordmark { display: inline-flex; color: var(--ink); align-self: center; padding: 0.93rem 0; } .wordmark svg { display: block; } .tabs { display: flex; align-items: center; gap: 0.6rem; } .tab { font-family: var(--font); font-size: 0.85rem; line-height: 1; letter-spacing: 0.02em; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; align-self: center; padding: 0.4rem 0.9rem; transition: color 200ms, background 200ms; } .tab:hover { color: var(--ink); } .tab[aria-current="page"] { color: var(--on-ink); background: var(--ink); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; background: none; border: none; color: var(--ink); cursor: pointer; } .nav-toggle svg { display: block; } .gh-btn { display: inline-flex; align-items: center; gap: 0.45rem; align-self: center; margin-left: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); text-decoration: none; font-family: var(--font); font-size: var(--label-lg); font-weight: 500; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color 200ms, transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .gh-btn:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09), 0 2px 4px rgba(0, 0, 0, 0.06); } html[data-theme="dark"] .gh-btn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .gh-btn:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); } .gh-btn svg { display: block; } .gh-label { display: none; } .menu-note { display: none; } /* Page scroll is locked while the mobile menu is open. */ html.menu-locked { overflow: hidden; } /* Scrim behind the open mobile menu: dark veil over the page with the site's halftone texture fading out from top to bottom. */ .menu-scrim { display: none; } /* ---------- hero ---------- */ .hero { position: relative; padding: 10.5rem 0 9rem; border-bottom: 1px solid var(--hairline); } .hero h1 { font-weight: 700; font-size: clamp(3rem, 7vw, 6rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); } .hero-sub { margin-top: 2rem; max-width: 44em; font-size: 1.3rem; color: var(--ink); line-height: 1.35; } .hero-arrow { display: inline-flex; vertical-align: -0.1em; margin: 0 0.15rem; } .hero-arrow svg { display: block; } /* ---------- prose ---------- */ .prose h2 { font-weight: 500; font-size: 1.85rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.75rem; max-width: 30em; } .prose p { margin-bottom: 1.5rem; max-width: 44rem; } .prose p:last-child { margin-bottom: 0; } .intro { padding: 3.5rem 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 44px; background: var(--ink); color: var(--on-ink); font-family: var(--font); font-size: var(--label-lg); font-weight: 500; letter-spacing: 0.02em; text-decoration: none; border: none; padding: 0.8rem 1.3rem; cursor: pointer; transition: background 200ms, transform 150ms; } .btn:hover { background: var(--ink-soft); } .btn:active { transform: scale(0.98); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: rgba(255, 255, 255, 0.16); transition: transform 200ms var(--ease-out); } .btn-icon svg { display: block; } .btn:hover .btn-icon { transform: translateX(2px); } /* ---------- number chips ---------- */ /* Square numbered box shared by accordion numbers, question rows, gap lists, and the level stepper. */ .numbox { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 1.6rem; height: 1.6rem; border: 1px solid var(--border-mid); background: var(--surface); font-family: var(--font); font-size: var(--label-xs); color: var(--muted); } /* ---------- section titles ---------- */ .section-title { font-size: 1.85rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.5rem; } .section-lede { color: var(--muted); max-width: 44em; margin-bottom: 2.5rem; } /* ---------- accordions ---------- */ .primitives-acc { padding: 5.5rem 0 7rem; border-top: 1px solid var(--hairline); /* script.js pins the clicked row itself while panels animate; native scroll anchoring would fight those corrections. */ overflow-anchor: none; } .acc-item { border-bottom: 1px solid var(--hairline-strong); } /* Run the separators out to the container edges so they meet the page's vertical rails. */ @media (min-width: 68rem) { .acc-item { margin: 0 calc(-1 * var(--container-pad)); padding: 0 var(--container-pad); } } .acc-item summary { display: flex; align-items: center; gap: 1.25rem; padding: 1.6rem 0.25rem; cursor: pointer; list-style: none; } .acc-item summary::-webkit-details-marker { display: none; } .acc-num { border: none; background: var(--chip-bg); color: var(--chip-fg); min-width: 1.9rem; height: 1.9rem; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; padding: 0 0.35rem; } .acc-title { flex: 1; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); transition: color 200ms; } .acc-item summary:hover .acc-title { color: #000000; } .acc-toggle { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; } .acc-toggle::before, .acc-toggle::after { content: ""; position: absolute; background: var(--ink); transition: transform 300ms var(--ease-out); } .acc-toggle::before { left: 0; top: calc(50% - 1px); width: 100%; height: 2px; } .acc-toggle::after { left: calc(50% - 1px); top: 0; width: 2px; height: 100%; } .acc-item[open] .acc-toggle::after { transform: rotate(90deg); } .acc-body { padding: 0.25rem 0.25rem 2.75rem 3.3rem; } .acc-oneliner { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.9rem; max-width: 42em; } .acc-desc { font-size: 1rem; color: var(--ink-soft); max-width: 42em; margin-bottom: 2rem; } /* ---------- feature cards ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .feature { background: var(--surface); border: 1px solid var(--hairline); padding: 1.25rem; } .feature-title { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.9rem; } .feature p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); } /* Mobile carousel pager: square numbered tiles under each card set. */ .feature-pager { display: none; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; } .feature-pager .numbox { cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; } .feature-pager .numbox.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } .ph { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.018) 10px, rgba(0, 0, 0, 0.018) 11px), var(--bg-alt); border: 1px dashed var(--border-mid); margin-bottom: 0.85rem; } .ph.ph-ill { background: var(--surface); border: none; padding: 0.4rem; } .ph.ph-ill svg { width: 100%; height: 100%; display: block; } .ph span { font-family: var(--font); font-size: var(--label-xs); letter-spacing: 0.02em; color: var(--faint); } /* ---------- feature-illustration kit ---------- */ /* Shared vector language for the feature-card illustrations. Every color inside the SVGs comes from these classes (never fill/stroke attributes), so introducing dark mode later only means re-mapping the tokens above. The drop-shadow filter is defined once in an .ill-defs sprite on the page. */ .ill-defs { position: absolute; width: 0; height: 0; } .ph-ill .i-card { fill: var(--surface); stroke: var(--ink); } .ph-ill .i-panel { fill: var(--surface); stroke: var(--ill-hairline); } .ph-ill .i-faint { fill: var(--bg-alt); } .ph-ill .i-bar { fill: var(--ill-bar); } .ph-ill .i-bar-soft { fill: var(--ill-bar-soft); } .ph-ill .i-ink { fill: var(--ink); } .ph-ill .i-on-ink { fill: var(--on-ink); } .ph-ill .i-icon { fill: var(--ill-icon); } .ph-ill .i-icon-ink { fill: var(--ink); } .ph-ill .i-line { stroke: var(--ill-hairline); fill: none; } .ph-ill .i-stroke, .ph-ill .i-stroke-ink { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ph-ill .i-stroke { stroke: var(--ill-icon); } .ph-ill .i-stroke-ink { stroke: var(--ink); } /* ---------- form fields ---------- */ .input { width: 100%; font-family: var(--font); font-size: 1.05rem; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); padding: 0.75rem 0.9rem; transition: border-color 200ms; } .input::placeholder { color: var(--faint); } .input:focus { outline: none; border-color: var(--ink); } /* ---------- contributors + contribute ---------- */ .contributors { padding: 6rem 0 7rem; border-top: 1px solid var(--hairline); scroll-margin-top: 4rem; } .contrib-names { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 12rem)); gap: 1.1rem 2rem; margin: 2.5rem 0 3rem; } .contrib-names li { display: flex; align-items: center; gap: 0.7rem; font-size: 1.15rem; font-weight: 500; color: var(--ink); } .contrib-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; background: var(--ink); color: var(--on-ink); font-size: 0.85rem; font-weight: 600; flex-shrink: 0; } .contrib-invite { max-width: 40em; margin-bottom: 1.5rem; } .contrib-mail { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .contrib-mail:hover { text-decoration-thickness: 2px; } /* ---------- page header band (Test, Resources) ---------- */ .page-header { padding: 5.5rem 0 3.5rem; border-bottom: 1px solid var(--hairline); } .page-title { font-weight: 500; font-size: clamp(2.1rem, 6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 1.25rem; } .page-sub { font-size: 1.2rem; color: var(--ink); line-height: 1.35; max-width: 30em; } .page-body { padding: 3.5rem 0 7rem; } /* ---------- resource cards ---------- */ .res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .res-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; min-width: 0; /* grid items must be able to shrink below content size */ border: 1px solid var(--hairline); background: var(--surface); padding: 1.5rem; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms; } .res-card:not(.res-feature):hover, .res-card:not(.res-feature):focus-within { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.05); } html[data-theme="dark"] .res-card:not(.res-feature):hover, html[data-theme="dark"] .res-card:not(.res-feature):focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); } /* Featured card: spans the grid, static (no hover lift), button CTA, image placeholder on the right. */ .res-feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 2rem; padding: 1.75rem 1.5rem; } .res-feature-main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; flex: 1; } .res-feature .res-desc { max-width: 34em; } .res-feature .btn { margin-top: 0.5rem; } .res-by { font-family: var(--font); font-size: var(--label-md); letter-spacing: 0.01em; color: var(--muted); margin-top: -0.45rem; } .res-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--border-mid); background: var(--surface); color: var(--ink); margin-bottom: 0.35rem; } .res-icon svg { display: block; } .res-name { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); } .res-desc { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); } /* Revealed on card hover (and on focus for keyboard users); devices without hover always show it. */ .res-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 0.5rem; font-family: var(--font); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; opacity: 0; transform: translateX(-4px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .res-card:hover .res-cta, .res-card:focus-within .res-cta, .res-cta:focus { opacity: 1; transform: none; } @media (hover: none) { .res-cta { opacity: 1; transform: none; } } .res-cta-icon { display: inline-flex; } .res-cta-icon svg { display: block; } /* ---------- footer ---------- */ /* Tall band: the text sits at the top, the dither field plays out in the space below it. */ .site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--hairline); padding: 4rem 0 16rem; background: var(--bg); } /* WebGL dither-aurora background (shader-bg.js); content stacks above. */ .shader-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .footer-inner { text-align: center; position: relative; } /* Three-state theme switch (light / system / dark), centered near the bottom of the footer band. */ .theme-switch { position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--hairline); background: var(--surface); } .theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: none; border: none; color: var(--muted); cursor: pointer; transition: background 150ms, color 150ms; } .theme-switch button:hover { color: var(--ink); } .theme-switch button.active { background: var(--chip-bg); color: var(--ink); } .theme-switch svg { display: block; } .footer-meta { font-size: 0.9rem; color: var(--muted); } .footer-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .footer-link:hover { text-decoration-thickness: 2px; } .footer-arrow { display: inline-flex; vertical-align: -0.08em; margin-left: 0.3rem; } .footer-arrow svg { display: block; } .footer-link:hover .footer-arrow { transform: translate(1px, -1px); } /* ---------- reveal motion ---------- */ /* Hidden state only applies when JS is running (html.js set in ), so content is always visible without JS, in print, and in readers. The failsafe animation un-hides everything even if script.js never executes (blocked, 404): script.js's own safety net reveals all at 1.8s, so when JS works this never changes anything visible. */ html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); animation: reveal-failsafe 1ms linear 2.6s forwards; } html.js .reveal.in { opacity: 1; transform: translateY(0); } @keyframes reveal-failsafe { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; animation: none; } .acc-toggle::before, .acc-toggle::after { transition: none; } } /* ---------- responsive ---------- */ @media (max-width: 640px) { :root { --container-pad: 1.5rem; } body { font-size: 16px; } /* Single-row bar; the nav collapses into a hamburger panel. */ .wordmark { padding: 0.8rem 0; } .nav-toggle { display: inline-flex; align-self: center; } .tabs { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--hairline); padding: 4rem 1.25rem 1.25rem; } .menu-note { display: block; font-family: var(--font); font-size: var(--label-md); color: var(--muted); text-align: center; padding: 0 0.5rem; margin-top: 1rem; } .menu-note a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } /* With the menu open, the bar goes solid so it reads as one surface with the panel (the frosted 60% tint would otherwise blend with the dark scrim and look gray). */ .site-header.menu-open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .site-header.menu-open .tabs { display: flex; } .tab { align-self: stretch; padding: 0.8rem 0.5rem; font-size: 0.95rem; } .tab + .tab { border-top: 1px solid var(--hairline); } .gh-btn { margin: 4rem 0 0; align-self: stretch; justify-content: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; } .gh-label { display: inline; } .gh-btn .gh-stars { margin-left: auto; background: var(--chip-bg); color: var(--ink-soft); font-size: var(--label-md); padding: 0.2rem 0.55rem; } /* Sibling of the header (a fixed child would be trapped by the header's backdrop-filter containing block). Below the header's z-index so the panel stays on top. */ .site-header.menu-open + .menu-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: rgba(17, 17, 17, 0.78); } .menu-scrim::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px); background-size: 5px 5px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%); } .hero { padding: 6.5rem 0 5.5rem; } /* The desktop line break pins "Agentic Interface" to one line, which overflows narrow screens — let it wrap naturally instead. */ .hero h1 br { display: none; } .intro { padding: 4.5rem 0; } .primitives-acc { padding: 4rem 0 5rem; } .contributors { padding: 4.5rem 0 5rem; } .page-header { padding: 4rem 0 2.75rem; } /* Feature cards become a swipeable carousel with a numbered pager. */ .feature-grid { display: flex; /* Full viewport width with a small gutter, escaping the accordion body's indent; cards fill the padded width. */ margin: 0 calc(50% - 50vw); padding: 0 1.1rem; scroll-padding: 0 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .feature-grid::-webkit-scrollbar { display: none; } .feature { flex: 0 0 100%; scroll-snap-align: start; } .feature-pager { display: flex; } /* No hover on touch: resource CTAs always visible. */ .res-cta { opacity: 1; transform: none; } .contrib-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } .res-grid { grid-template-columns: 1fr; } .res-feature { flex-direction: column; align-items: stretch; gap: 1.25rem; } .res-feature .btn { align-self: flex-start; } .acc-title { font-size: 1.15rem; } .acc-item summary { gap: 0.9rem; padding: 1.25rem 0.1rem; } /* Body text uses the full width instead of hanging under the title. */ .acc-body { padding-left: 0.1rem; padding-right: 0.1rem; } .site-footer { padding: 3rem 0 9rem; } }