diff --git a/landing/index.html b/landing/index.html index 6b82409..bc97892 100644 --- a/landing/index.html +++ b/landing/index.html @@ -24,6 +24,7 @@ --warn: #fbbf24; --bad: #fb7185; --good: #86efac; + --solana: #9b6dff; } * { box-sizing: border-box; } @@ -65,7 +66,7 @@ grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 56px; align-items: center; - padding: 84px 0 96px; + padding: 84px 0 32px; } h1 { margin: 0 0 18px; @@ -151,6 +152,40 @@ .tag.good { color: var(--good); border-color: rgba(134, 239, 172, 0.28); background: rgba(134, 239, 172, 0.08); } .tag.warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.28); background: rgba(251, 191, 36, 0.08); } .tag.bad { color: var(--bad); border-color: rgba(251, 113, 133, 0.28); background: rgba(251, 113, 133, 0.08); } + + /* Supported-rails strip (hero) + rail pills */ + .rails { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 72px; } + .rails-label { color: var(--muted); font-size: 13px; margin-right: 2px; } + .rail { + display: inline-flex; align-items: center; gap: 6px; + padding: 4px 9px; border-radius: 999px; + border: 1px solid var(--line); background: var(--panel); + color: var(--text); font-size: 12.5px; font-weight: 550; white-space: nowrap; + } + .rail .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--muted); } + .rail.is-solana { border-color: rgba(155, 109, 255, 0.45); background: rgba(155, 109, 255, 0.10); } + .rail.is-solana .dot { background: var(--solana); } + .rail .new { + font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; + color: var(--solana); border: 1px solid rgba(155, 109, 255, 0.45); + border-radius: 5px; padding: 1px 5px; + } + + /* Rails / networks detail grid */ + .card.highlight { + border-color: rgba(155, 109, 255, 0.45); + background: linear-gradient(180deg, rgba(155, 109, 255, 0.10), rgba(18, 22, 28, 0.74)); + } + .card .kicker { + display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 700; + letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); + } + .card.highlight .kicker { color: var(--solana); } + .card ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; } + .card ul li { margin: 4px 0; } + .card .proof { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--accent); } + .tag.solana { color: var(--solana); border-color: rgba(155, 109, 255, 0.28); background: rgba(155, 109, 255, 0.08); } + section { padding: 70px 0; border-top: 1px solid var(--line); } h2 { margin: 0 0 12px; font-size: 30px; letter-spacing: 0; } .section-lede { margin: 0 0 34px; color: var(--muted); max-width: 720px; } @@ -195,6 +230,7 @@