diff --git a/design-system.css b/design-system.css index 4016564..e7274c9 100644 --- a/design-system.css +++ b/design-system.css @@ -1782,3 +1782,40 @@ html:has(body.agentrust-hub) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .at-page *, .at-page *::before, .at-page *::after { transition: none !important; } } + +/* Marketplace */ +.marketplace-callout { display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:1.5rem;padding:1.5rem 1.75rem;border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--surface); } +.marketplace-callout span,.marketplace-page .eyebrow { color:var(--at-red);font-size:.68rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase; } +.marketplace-callout h3 { margin:.3rem 0;font-size:1.25rem; }.marketplace-callout p { color:var(--muted);font-size:.9rem; } +.marketplace-page { background:var(--at-paper); }.marketplace-page main { overflow:hidden; }.marketplace-page .site-header { position:relative;background:var(--at-paper); } +.marketplace-page .site-header [aria-current="page"] { color:var(--at-red); }.marketplace-page .button { display:inline-flex;align-items:center;justify-content:center; } +.market-hero { position:relative;padding:clamp(4.5rem,9vw,8rem) 0;background:var(--at-ink);color:var(--at-paper); } +.market-hero::before { position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(242,90,57,.2),transparent 24%),linear-gradient(115deg,transparent 66%,rgba(255,255,255,.03) 66%);content:"";pointer-events:none; } +.market-hero-grid { position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);align-items:center;gap:clamp(3rem,8vw,8rem); } +.market-hero h1 { max-width:850px;margin:.8rem 0 1.4rem;color:#fff;font-family:var(--at-serif);font-size:clamp(3rem,7vw,6.4rem);font-weight:500;letter-spacing:-.055em;line-height:.94; } +.market-hero h1 em { color:var(--at-red);font-style:italic; }.market-intro { max-width:720px;color:rgba(255,255,255,.68);font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.7; } +.market-hero-actions { display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem; }.market-hero .button.secondary { border-color:rgba(255,255,255,.25);color:#fff; } +.market-signal { position:relative;padding:2rem;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.035);box-shadow:0 24px 70px rgba(0,0,0,.22); } +.signal-orbit { position:relative;height:175px;margin-bottom:1.8rem;border:1px solid rgba(255,255,255,.12);border-radius:50%; } +.signal-orbit::before,.signal-orbit::after { position:absolute;inset:23%;border:1px solid rgba(242,90,57,.3);border-radius:50%;content:""; }.signal-orbit::after { inset:46%;background:var(--at-red);border:0; } +.signal-orbit span { position:absolute;padding:.28rem .55rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:var(--at-ink);color:rgba(255,255,255,.72);font-family:var(--at-mono);font-size:.6rem;letter-spacing:.08em; }.signal-orbit span:nth-child(1){top:8%;left:43%}.signal-orbit span:nth-child(2){right:3%;bottom:25%}.signal-orbit span:nth-child(3){bottom:8%;left:5%} +.market-signal p { display:flex;align-items:baseline;justify-content:space-between;margin:0;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.62);font-size:.78rem; }.market-signal p strong { color:#fff;font-family:var(--at-serif);font-size:1.7rem;font-weight:500; } +.market-featured,.market-browser { padding:clamp(4rem,8vw,7rem) 0; }.market-featured { background:#f0ede6; }.market-section-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem; } +.market-section-heading h2,.market-submit h2 { margin-top:.45rem;font-family:var(--at-serif);font-size:clamp(2rem,4vw,3.5rem);font-weight:500;letter-spacing:-.035em;line-height:1.05; }.market-section-heading>a { color:var(--at-ink);font-size:.8rem;font-weight:700; } +.featured-strip,.market-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem; }.market-card { display:flex;min-height:360px;flex-direction:column;justify-content:space-between;padding:1.4rem;border:1px solid var(--at-line);border-radius:16px;background:var(--at-white);transition:transform .2s,border-color .2s,box-shadow .2s; } +.market-card:hover { transform:translateY(-3px);border-color:rgba(19,19,19,.35);box-shadow:0 16px 35px rgba(19,19,19,.07); }.market-card-featured { min-height:330px; } +.market-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }.market-mark { display:flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:13px;background:var(--at-ink);color:#fff;font-family:var(--at-mono);font-size:.82rem;font-weight:700;letter-spacing:-.02em; } +.mark-frameworks{background:#5d3fd3}.mark-observability{background:#a43c78}.mark-security-policy{background:#173d34}.mark-identity-trust{background:#304b83}.mark-compliance{background:#7b4825}.mark-evidence-receipts{background:#604070} +.market-tier { display:inline-flex;align-items:center;gap:.4rem;color:var(--at-muted);font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }.market-tier i { width:7px;height:7px;border-radius:50%;background:#3b9f78; } +.market-vendor { margin-top:2rem;color:var(--at-muted);font-size:.69rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase; }.market-card h3 { margin:.35rem 0 .65rem;font-family:var(--at-serif);font-size:1.5rem;font-weight:600;letter-spacing:-.025em; }.market-description { color:var(--at-muted);font-size:.88rem;line-height:1.6; } +.market-card-foot { margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--at-line); }.market-tags { display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem; }.market-tags span { padding:.25rem .5rem;border-radius:999px;background:var(--at-paper-2);color:var(--at-muted);font-family:var(--at-mono);font-size:.62rem; }.market-card-foot>a { display:flex;justify-content:space-between;color:var(--at-ink);font-size:.78rem;font-weight:750;text-decoration:none; }.market-card-foot>a:hover { color:var(--at-red); } +.browser-heading { margin-bottom:1.5rem; }.market-count { color:var(--at-muted);font-size:.8rem; }.market-count strong { color:var(--at-ink);font-family:var(--at-serif);font-size:1.6rem; } +.market-search-row { display:grid;grid-template-columns:1fr auto;gap:.8rem;margin-bottom:2.2rem;padding-bottom:2.2rem;border-bottom:1px solid var(--at-line); }.market-search { display:flex;align-items:center;gap:.8rem;padding:0 1rem;border:1px solid var(--at-line);border-radius:12px;background:var(--at-white); }.market-search:focus-within { border-color:var(--at-ink);box-shadow:0 0 0 3px rgba(19,19,19,.06); }.market-search svg { width:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7; }.market-search input { width:100%;padding:.9rem 0;border:0;outline:0;background:transparent;color:var(--at-ink);font:inherit; }.market-search kbd { padding:.15rem .4rem;border:1px solid var(--at-line);border-radius:5px;color:var(--at-muted);font-size:.7rem; } +.market-sort { display:flex;align-items:center;gap:.5rem;padding-left:1rem;color:var(--at-muted);font-size:.72rem;font-weight:700; }.market-sort select { min-height:48px;padding:0 2.2rem 0 .9rem;border:1px solid var(--at-line);border-radius:12px;background:var(--at-white);color:var(--at-ink);font:inherit; } +.market-layout { display:grid;grid-template-columns:220px 1fr;align-items:start;gap:2.2rem; }.market-filters { position:sticky;top:1.5rem; }.filter-group { padding:0 0 1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--at-line); }.filter-group>p { margin-bottom:.75rem;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }.filter-group label { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.45rem 0;color:var(--at-muted);font-size:.78rem;cursor:pointer; }.filter-group input { accent-color:var(--at-red); }.filter-group b { color:#999;font-size:.68rem;font-weight:500; }.clear-filters { padding:0;border:0;background:none;color:var(--at-red);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer; }.neutrality-note { margin-top:2rem;padding:1rem;border-left:2px solid var(--at-line);color:var(--at-muted);font-size:.7rem;line-height:1.55; } +.market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.active-filters { display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem; }.active-filters:empty { display:none; }.active-filters button { padding:.35rem .6rem;border:1px solid var(--at-line);border-radius:999px;background:var(--at-white);color:var(--at-muted);font-size:.68rem;cursor:pointer; } +.market-empty { padding:5rem 2rem;border:1px dashed var(--at-line);border-radius:16px;text-align:center; }.market-empty span { color:var(--at-red);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }.market-empty h3 { margin:.7rem 0;font-family:var(--at-serif);font-size:2rem; }.market-empty p { margin-bottom:1.4rem;color:var(--at-muted); } +.market-submit { padding:clamp(4rem,8vw,7rem) 0;background:var(--at-red);color:#fff; }.market-submit .eyebrow { color:rgba(255,255,255,.7); }.submit-grid { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,8vw,7rem); }.market-submit p { max-width:580px;color:rgba(255,255,255,.78);line-height:1.7; }.market-submit .button { margin-top:1.5rem;background:var(--at-ink);color:#fff; } +.marketplace-page [hidden] { display:none!important; }.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } +@media(max-width:860px){.marketplace-callout,.market-section-heading{align-items:flex-start;flex-direction:column}.market-hero-grid,.market-layout,.submit-grid{grid-template-columns:1fr}.market-signal{max-width:440px}.featured-strip,.market-grid{grid-template-columns:1fr}.market-filters{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.neutrality-note{grid-column:1/-1;margin-top:0}.market-search-row{grid-template-columns:1fr}.market-sort{padding-left:0}.market-card{min-height:315px}} +@media(max-width:560px){.market-hero h1 br{display:none}.market-filters{grid-template-columns:1fr}.neutrality-note{grid-column:auto}.market-search kbd{display:none}} diff --git a/index.html b/index.html index 340e695..090fee8 100644 --- a/index.html +++ b/index.html @@ -194,7 +194,7 @@ ] } - +
@@ -205,6 +205,7 @@