/* ========================================================================== L402-EL2 landing — shadcn/ui design tokens and components in plain CSS. Tokens follow shadcn's "zinc" theme (HSL channels), with an orange brand accent. Dark is the default; .dark on is toggled by app.js. ========================================================================== */ :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 72% 51%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 24.6 95% 53.1%; --brand: 24.6 95% 53.1%; /* shadcn orange-500 */ --brand-foreground: 0 0% 100%; --brand-soft: 24.6 95% 53.1% / 0.1; --chain: 221 83% 53%; --ok: 142 71% 35%; --radius: 0.625rem; --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --header-h: 56px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 30px -10px rgb(0 0 0 / 0.25); color-scheme: light; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 5.5%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 63% 50%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 20.5 90.2% 48.2%; --brand: 24.6 95% 53.1%; --chain: 217 91% 65%; --ok: 142 69% 58%; --shadow-lg: 0 20px 50px -20px rgb(0 0 0 / 0.8); color-scheme: dark; } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--font-sans); background: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.6; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } img, svg { display: block; } a { color: inherit; text-decoration: none; } code, pre, kbd { font-family: var(--font-mono); } button { font: inherit; color: inherit; background: none; cursor: pointer; } ::selection { background: hsl(var(--brand) / 0.3); } :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 4px; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px) { .container { padding: 0 16px; } } .icon { width: 1.1em; height: 1.1em; flex-shrink: 0; } .icon.sm { width: 0.95em; height: 0.95em; } .muted { color: hsl(var(--muted-foreground)); } .muted-2 { color: hsl(var(--muted-foreground)); font-weight: 400; font-size: 0.85em; } .small { font-size: 0.875rem; } .grow { flex: 1; } /* ---------------------------------------------------------------- topbar (from speakerplans.eu) */ .topbar { background: #e67e22; width: 100%; position: relative; z-index: 60; border-bottom: 2px solid #d35400; } .topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 20px; gap: 12px; flex-wrap: wrap; } .topbar-brand { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.5px; white-space: nowrap; } .topbar-brand .icon { width: 0.95em; height: 0.95em; } .sponsored-badge { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.4px; color: #fff; white-space: nowrap; border-radius: 999px; background: linear-gradient(135deg, rgba(253,180,153,0.22), rgba(148,197,249,0.22)); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 4px 20px rgba(253,180,153,0.35), 0 0 25px rgba(148,197,249,0.25), inset 0 1px 0 rgba(255,255,255,0.25); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .sponsored-badge::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: translateX(-100%); animation: sponsoredShine 3.5s ease-in-out infinite; pointer-events: none; } .sponsored-badge:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 28px rgba(253,180,153,0.55), 0 0 35px rgba(148,197,249,0.45), inset 0 1px 0 rgba(255,255,255,0.35); } .sponsored-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; color: rgba(255,255,255,0.85); letter-spacing: 0.8px; } .sponsored-brand { font-weight: 800; background: linear-gradient(135deg, #fdb499, #94c5f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 6px rgba(253,180,153,0.55)); } .sponsored-badge .bolt { width: 0.8rem; height: 0.8rem; color: #fdb499; fill: #fdb499; filter: drop-shadow(0 0 4px rgba(253,180,153,0.9)); animation: aiPulse 2s ease-in-out infinite; } .sponsored-desc { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 0.7rem; font-weight: 500; color: rgba(255,255,255,0.9); padding-left: 0; margin-left: 0; border-left: 1px solid transparent; transition: max-width 0.55s cubic-bezier(.4,0,.2,1), opacity 0.35s ease 0.15s, padding-left 0.4s ease, margin-left 0.4s ease, border-color 0.4s ease; } .sponsored-badge:hover .sponsored-desc { max-width: 320px; opacity: 1; padding-left: 9px; margin-left: 3px; border-left: 1px solid rgba(255,255,255,0.35); } @keyframes sponsoredShine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } @keyframes aiPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } @media (max-width: 480px) { .topbar-inner { padding: 6px 16px; } .sponsored-label { display: none; } } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: hsl(var(--background) / 0.8); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid hsl(var(--border)); } .header-inner { height: 100%; display: flex; align-items: center; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; } .logo .muted { font-weight: 600; } .logo-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: hsl(var(--brand)); color: hsl(var(--brand-foreground)); box-shadow: 0 0 0 1px hsl(var(--brand) / 0.4), 0 6px 18px -6px hsl(var(--brand) / 0.8); } .logo-mark .icon { width: 16px; height: 16px; fill: currentColor; } .logo-mark.sm { width: 26px; height: 26px; border-radius: 7px; } .header-nav { display: flex; gap: 4px; } .header-nav a { font-size: 0.875rem; font-weight: 500; padding: 6px 12px; border-radius: calc(var(--radius) - 2px); color: hsl(var(--muted-foreground)); transition: color .15s, background .15s; } .header-nav a:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); } .header-nav a[aria-current="page"] { color: hsl(var(--foreground)); background: hsl(var(--secondary)); } .header-actions { margin-left: auto; display: flex; gap: 4px; } @media (max-width: 560px) { .header-inner { gap: 10px; } .logo > span:last-child { display: none; } .header-nav a { padding: 6px 9px; } } [data-theme-toggle] .sun { display: none; } .dark [data-theme-toggle] .sun { display: block; } .dark [data-theme-toggle] .moon { display: none; } /* ---------------------------------------------------------------- buttons, badges, cards */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; } .btn code { font-size: 0.8em; } .btn:active { transform: translateY(1px); } .btn-lg { height: 44px; padding: 0 22px; font-size: 0.95rem; } .btn-icon { width: 36px; padding: 0; } .btn-brand { background: hsl(var(--brand)); color: hsl(var(--brand-foreground)); box-shadow: 0 8px 24px -10px hsl(var(--brand) / 0.9); } .btn-brand:hover { background: hsl(var(--brand) / 0.9); } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn-secondary:hover { background: hsl(var(--secondary) / 0.8); } .btn-outline { background: hsl(var(--background)); border-color: hsl(var(--input)); box-shadow: var(--shadow-sm); } .btn-outline:hover { background: hsl(var(--accent)); } .btn-ghost:hover { background: hsl(var(--accent)); } .btn[disabled] { opacity: .5; pointer-events: none; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; } .badge code { font-size: 0.95em; } .badge-brand { background: hsl(var(--brand)); color: hsl(var(--brand-foreground)); } .badge-muted { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); font-weight: 500; } .badge-chain { background: hsl(var(--chain) / 0.12); color: hsl(var(--chain)); border-color: hsl(var(--chain) / 0.3); } .badge-off { background: hsl(var(--ok) / 0.12); color: hsl(var(--ok)); border-color: hsl(var(--ok) / 0.3); } .card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm); } .chip { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; padding: 2px 8px; border-radius: 6px; background: hsl(var(--muted)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; } /* inline code outside prose */ p code, li code, td code, h2 code, h3 code, summary code { font-size: 0.85em; padding: 0.1em 0.35em; border-radius: 5px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); } /* ---------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; padding: 72px 0 56px; } .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 20% 0%, hsl(var(--brand) / 0.18), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 20%, hsl(var(--chain) / 0.12), transparent 70%); } .hero-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(hsl(var(--border) / 0.6) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border) / 0.6) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); } .hero-grid > * { min-width: 0; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 56px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / 0.7); transition: border-color .15s; } .pill:hover { border-color: hsl(var(--brand) / 0.6); } .hero h1 { margin: 22px 0 18px; font-size: clamp(2.1rem, 4vw, 3.25rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; } .grad { background: linear-gradient(135deg, #fb923c, #f59e0b 45%, #f97316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lead { font-size: 1.1rem; color: hsl(var(--muted-foreground)); max-width: 40rem; } .lead strong { color: hsl(var(--foreground)); font-weight: 600; } .cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; } .install { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 8px 8px 14px; border-radius: var(--radius); background: hsl(var(--muted) / 0.6); border: 1px solid hsl(var(--border)); font-size: 0.82rem; } .install code { flex: 1; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .install .prompt { color: hsl(var(--brand)); font-family: var(--font-mono); font-weight: 600; } .hint { font-size: 0.8rem; margin-top: 10px; } .terminal { overflow: hidden; box-shadow: var(--shadow-lg); background: #0a0a0c; border-color: hsl(240 4% 18%); color: #e4e4e7; } .terminal-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid hsl(240 4% 16%); background: #111114; } .terminal-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #3f3f46; } .terminal-bar .dot:nth-child(1) { background: #ef4444; } .terminal-bar .dot:nth-child(2) { background: #eab308; } .terminal-bar .dot:nth-child(3) { background: #22c55e; } .terminal-title { margin-left: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: #a1a1aa; } .exchange { list-style: none; padding: 16px; display: grid; gap: 8px; font-size: 0.78rem; } .exchange li { display: flex; gap: 10px; align-items: flex-start; opacity: 0; animation: lineIn .45s ease forwards; } .exchange li:nth-child(1) { animation-delay: .1s } .exchange li:nth-child(2) { animation-delay: .4s } .exchange li:nth-child(3) { animation-delay: .6s } .exchange li:nth-child(4) { animation-delay: .9s } .exchange li:nth-child(5) { animation-delay: 1.2s } .exchange li:nth-child(6) { animation-delay: 1.5s } .exchange li:nth-child(7) { animation-delay: 1.9s } .exchange li:nth-child(8) { animation-delay: 2.3s } .exchange code { word-break: break-word; } .exchange b { color: #fff; font-weight: 600; } .exchange em { font-style: normal; color: #4ade80; } .exchange .tag { flex: 0 0 44px; display: inline-flex; justify-content: center; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; padding: 2px 0; border-radius: 4px; background: #27272a; color: #d4d4d8; } .exchange .res.warn .tag { background: rgba(249,115,22,.18); color: #fb923c; } .exchange .res.ok .tag { background: rgba(34,197,94,.16); color: #4ade80; } .exchange .sign .tag { background: rgba(34,197,94,.16); color: #4ade80; } .exchange .chain .tag { background: rgba(96,165,250,.16); color: #60a5fa; } .exchange .hdr { padding-left: 54px; color: #a1a1aa; font-size: 0.72rem; } .exchange .sep { justify-content: center; color: #71717a; font-size: 0.72rem; padding: 6px 0; border-top: 1px dashed #27272a; border-bottom: 1px dashed #27272a; } @keyframes lineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 960px) { .hero { padding-top: 48px; } .hero-grid { grid-template-columns: minmax(0,1fr); gap: 40px; } .pill { align-items: center; border-radius: 14px; } .pill .badge { align-self: center; } } /* ---------------------------------------------------------------- stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); overflow: hidden; padding: 0; } .stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid hsl(var(--border)); } .stat:nth-child(4) { border-right: 0; } .stat-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; } .stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: hsl(var(--brand)); } .stat-vs { font-size: 0.82rem; color: hsl(var(--muted-foreground)); } .stats-note { grid-column: 1 / -1; font-size: 0.75rem; padding: 10px 24px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.4); } .stats.container { max-width: 1152px; width: calc(100% - 48px); } @media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid hsl(var(--border)); } } @media (max-width: 640px) { .stats.container { width: calc(100% - 32px); } .stat { padding: 16px; } .stat-num { font-size: 1.5rem; } } /* ---------------------------------------------------------------- sections */ .section { padding: 96px 0; } .section.container { padding-left: 24px; padding-right: 24px; } .section-alt { background: hsl(var(--muted) / 0.35); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); } .section-head { max-width: 760px; margin-bottom: 44px; } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--brand)); margin-bottom: 10px; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; } .section-head p { margin-top: 14px; font-size: 1.02rem; } @media (max-width: 640px) { .section { padding: 64px 0; } .section.container { padding-left: 16px; padding-right: 16px; } } /* problem */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .compare-card { padding: 28px; } .compare-card h3 { font-size: 1.2rem; margin: 14px 0 16px; letter-spacing: -0.01em; } .compare-card.good { border-color: hsl(var(--brand) / 0.45); background: linear-gradient(180deg, hsl(var(--brand) / 0.07), hsl(var(--card)) 60%); } .checklist { list-style: none; display: grid; gap: 10px; font-size: 0.95rem; } .checklist li { display: flex; gap: 10px; } .checklist .x, .checklist .v { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 0.72rem; font-weight: 700; margin-top: 1px; } .checklist .x { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } .checklist .v { background: hsl(var(--ok) / 0.14); color: hsl(var(--ok)); } @media (max-width: 760px) { .compare { grid-template-columns: 1fr; } } /* flow */ .flow { list-style: none; position: relative; display: grid; gap: 14px; max-width: 880px; } .flow::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(hsl(var(--chain) / .6), hsl(var(--ok) / .5) 20%, hsl(var(--ok) / .5) 80%, hsl(var(--chain) / .6)); } .flow-step { position: relative; display: flex; gap: 20px; } .flow-icon { position: relative; z-index: 1; flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: hsl(var(--card)); border: 1px solid hsl(var(--ok) / 0.4); color: hsl(var(--ok)); } .flow-step.onchain .flow-icon { border-color: hsl(var(--chain) / 0.45); color: hsl(var(--chain)); } .flow-body { flex: 1; padding: 18px 20px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); background: hsl(var(--card)); } .flow-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .step-n { font-family: var(--font-mono); font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .flow-body h3 { font-size: 1.05rem; margin-bottom: 4px; } .flow-body p { color: hsl(var(--muted-foreground)); font-size: 0.93rem; } @media (max-width: 560px) { .flow-step { gap: 12px; } .flow-icon { flex-basis: 40px; height: 40px; } .flow::before { left: 19px; } .flow-body { padding: 14px; } } /* concepts */ .concepts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .concept { padding: 28px; } .concept h3 { font-size: 1.15rem; margin: 16px 0 8px; } .concept > p { font-size: 0.95rem; } .concept > p + p { margin-top: 10px; } .concept-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: hsl(var(--brand) / 0.12); color: hsl(var(--brand)); border: 1px solid hsl(var(--brand) / 0.25); } pre.mini { margin: 14px 0; padding: 12px 14px; border-radius: var(--radius); background: #0a0a0c; color: #e4e4e7; border: 1px solid hsl(240 4% 18%); font-size: 0.78rem; overflow-x: auto; } .vouchers { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .voucher { font-family: var(--font-mono); font-size: 0.8rem; padding: 6px 12px; border-radius: 8px; border: 1px dashed hsl(var(--border)); } .voucher.old { color: hsl(var(--muted-foreground)); text-decoration: line-through; } .voucher.latest { border: 1px solid hsl(var(--brand)); background: hsl(var(--brand) / 0.1); font-weight: 600; } .voucher em { font-style: normal; font-family: var(--font-sans); font-size: 0.7rem; margin-left: 6px; color: hsl(var(--brand)); } .dotlist { list-style: none; display: grid; gap: 6px; } .dotlist li { padding-left: 16px; position: relative; color: hsl(var(--muted-foreground)); } .dotlist li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--brand)); } .dotlist strong { color: hsl(var(--foreground)); } @media (max-width: 860px) { .concepts { grid-template-columns: 1fr; } } /* simulator */ .sim { padding: 20px; } .sim-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid hsl(var(--border)); } .sim-controls .btn-brand .muted-2 { color: hsl(var(--brand-foreground) / 0.8); } .sim-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; padding-top: 20px; } .sim-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; } .metric { padding: 14px 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); display: flex; flex-direction: column; gap: 2px; } .metric.wide { grid-column: 1 / -1; } .metric-label { font-size: 0.78rem; color: hsl(var(--muted-foreground)); font-weight: 500; } .metric-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .3s; } .metric-value.flash { color: hsl(var(--brand)); } .metric-sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .metric-sub b { color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; } .bar { height: 8px; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; margin: 8px 0 6px; } .bar span { display: block; height: 100%; background: linear-gradient(90deg, hsl(var(--brand)), #f59e0b); border-radius: inherit; transition: width .4s ease; min-width: 0; } .gas-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; padding: 4px 0; font-variant-numeric: tabular-nums; } .gas-row + .gas-row { border-top: 1px dashed hsl(var(--border)); } .gas-row:first-of-type b { color: hsl(var(--ok)); } .gas-row:last-of-type b { color: hsl(var(--destructive)); } .sim-log { border-radius: var(--radius); background: #0a0a0c; border: 1px solid hsl(240 4% 18%); color: #d4d4d8; display: flex; flex-direction: column; min-height: 320px; max-height: 440px; overflow: hidden; } .sim-log-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid hsl(240 4% 16%); font-size: 0.78rem; font-weight: 600; background: #111114; } .sim-log-head span:first-child { display: inline-flex; gap: 6px; align-items: center; } .sim-log ol { list-style: none; overflow-y: auto; padding: 10px 14px; font-family: var(--font-mono); font-size: 0.74rem; display: grid; gap: 5px; align-content: start; flex: 1; } .sim-log li { display: flex; gap: 8px; line-height: 1.5; animation: lineIn .3s ease; } .sim-log li > span:first-child { flex: 0 0 36px; text-align: center; border-radius: 4px; font-size: 0.66rem; font-weight: 600; padding: 1px 0; background: #27272a; color: #d4d4d8; align-self: flex-start; } .sim-log .l-402 > span:first-child { background: rgba(249,115,22,.18); color: #fb923c; } .sim-log .l-200 > span:first-child, .sim-log .l-sig > span:first-child { background: rgba(34,197,94,.16); color: #4ade80; } .sim-log .l-chain > span:first-child { background: rgba(96,165,250,.16); color: #60a5fa; } .sim-log .l-info { color: #a1a1aa; } .sim-log .l-group { border-top: 1px dashed #27272a; margin-top: 4px; padding-top: 6px; } @media (max-width: 900px) { .sim-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .sim { padding: 14px; } .sim-metrics { grid-template-columns: 1fr; } .sim-controls .btn { flex: 1 1 auto; } .sim-controls .grow { display: none; } } /* packages */ .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pkg { padding: 22px; transition: border-color .2s, transform .2s; } .pkg:hover { border-color: hsl(var(--brand) / 0.5); transform: translateY(-2px); } .pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pkg-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); } .pkg-path { font-size: 0.74rem; color: hsl(var(--muted-foreground)); } .pkg h3 { font-size: 1.02rem; margin: 14px 0 6px; } .pkg p { font-size: 0.9rem; } .actors { margin-top: 20px; overflow: hidden; } @media (max-width: 900px) { .packages { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .packages { grid-template-columns: 1fr; } } /* tables (shared with prose) */ .table-wrap { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th { text-align: left; font-weight: 600; color: hsl(var(--muted-foreground)); font-size: 0.8rem; background: hsl(var(--muted) / 0.5); } th, td { padding: 10px 16px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: hsl(var(--muted) / 0.35); } /* tabs */ .tab-list { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: var(--radius); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); max-width: 100%; } .tab-list button { padding: 6px 14px; font-size: 0.875rem; font-weight: 500; border-radius: calc(var(--radius) - 3px); transition: all .15s; } .tab-list button:hover { color: hsl(var(--foreground)); } .tab-list button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); } .tab-panel { padding: 24px; } .tab-panel > p { font-size: 0.95rem; max-width: 72ch; } .tab-panel > * + * { margin-top: 16px; } /* security */ .guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; margin-bottom: 36px; } .guarantee { display: flex; gap: 14px; } .g-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: hsl(var(--ok) / 0.12); color: hsl(var(--ok)); } .guarantee h3 { font-size: 0.98rem; margin-bottom: 2px; } .guarantee p { font-size: 0.88rem; } @media (max-width: 900px) { .guarantees { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .guarantees { grid-template-columns: 1fr; } } .accordion { border-top: 1px solid hsl(var(--border)); max-width: 880px; } .accordion details { border-bottom: 1px solid hsl(var(--border)); } .accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 500; font-size: 0.98rem; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary:hover { text-decoration: underline; text-underline-offset: 4px; } .accordion .chev { transform: rotate(90deg); transition: transform .2s; color: hsl(var(--muted-foreground)); } .accordion details[open] .chev { transform: rotate(-90deg); } .accordion details p { padding: 0 0 18px; color: hsl(var(--muted-foreground)); font-size: 0.93rem; max-width: 75ch; } .callout { display: flex; gap: 14px; margin-top: 36px; padding: 18px 20px; max-width: 880px; border-radius: calc(var(--radius) + 2px); border: 1px solid hsl(38 92% 50% / 0.45); background: hsl(38 92% 50% / 0.08); } .callout-icon { color: hsl(38 92% 50%); margin-top: 2px; } .callout h3 { font-size: 0.98rem; margin-bottom: 4px; } .callout p { font-size: 0.9rem; color: hsl(var(--muted-foreground)); } /* standards */ .standards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); overflow: hidden; } .standard { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px; background: hsl(var(--card)); } .standard strong { font-family: var(--font-mono); font-size: 0.95rem; color: hsl(var(--brand)); } .standard span { font-size: 0.88rem; } .tokens { margin-top: 18px; font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } @media (max-width: 760px) { .standards { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .standards { grid-template-columns: 1fr; } } /* doc cards */ .doc-cards { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; } .doc-card { padding: 28px; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; } .doc-card:hover { border-color: hsl(var(--brand) / 0.55); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .doc-card.featured { background: linear-gradient(160deg, hsl(var(--brand) / 0.08), hsl(var(--card)) 55%); } .doc-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .doc-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); } .doc-card h3 { font-size: 1.3rem; margin: 18px 0 6px; letter-spacing: -0.015em; } .doc-card > p { font-size: 0.93rem; } .doc-toc { list-style: none; margin: 18px 0 22px; display: grid; gap: 4px; font-size: 0.84rem; color: hsl(var(--muted-foreground)); counter-reset: t; } .doc-toc li { padding-left: 14px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-toc li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--border)); } .doc-toc.cols { grid-template-columns: 1fr 1fr; column-gap: 20px; } .doc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: hsl(var(--brand)); } .doc-card:hover .doc-link .icon { transform: translateX(3px); } .doc-link .icon { transition: transform .2s; } @media (max-width: 860px) { .doc-cards { grid-template-columns: 1fr; } } @media (max-width: 480px) { .doc-toc.cols { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- code figure (markdown + templates) */ figure.code { margin: 20px 0; border-radius: var(--radius); overflow: hidden; background: #0a0a0c; border: 1px solid hsl(240 4% 18%); } figure.code figcaption { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 4px 14px; background: #111114; border-bottom: 1px solid hsl(240 4% 16%); font-family: var(--font-mono); font-size: 0.7rem; color: #a1a1aa; text-transform: lowercase; } figure.code .highlight { background: transparent !important; } figure.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 0.8rem; line-height: 1.65; color: #e4e4e7; background: transparent !important; } figure.code pre code { background: none; border: 0; padding: 0; font-size: inherit; } .copy { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #a1a1aa; transition: background .15s, color .15s; } .copy:hover { background: #27272a; color: #fff; } .install .copy { color: hsl(var(--muted-foreground)); } .install .copy:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); } .copy .icon { width: 14px; height: 14px; } .copy .done { display: none; color: #4ade80; } .copy.copied .icon:not(.done) { display: none; } .copy.copied .done { display: block; } /* ---------------------------------------------------------------- documentation pages */ .doc-hero { position: relative; padding: 48px 0 36px; border-bottom: 1px solid hsl(var(--border)); background: radial-gradient(ellipse 60% 100% at 10% 0%, hsl(var(--brand) / 0.12), transparent 70%); } .crumbs { display: flex; gap: 8px; font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-bottom: 18px; } .crumbs a:hover { color: hsl(var(--foreground)); } .doc-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.1; font-weight: 800; margin-bottom: 12px; } .doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding-top: 36px; padding-bottom: 80px; } .doc-sidebar { position: relative; } .toc { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; font-size: 0.85rem; scrollbar-width: thin; } .toc summary { list-style: none; display: flex; gap: 8px; align-items: center; font-weight: 600; margin-bottom: 10px; cursor: default; } .toc summary::-webkit-details-marker { display: none; } .toc ul { list-style: none; } .toc .toc-l0 { border-left: 1px solid hsl(var(--border)); } .toc .toc-l1 { margin: 2px 0 6px; } .toc a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; color: hsl(var(--muted-foreground)); line-height: 1.4; transition: color .15s; } .toc .toc-l1 a { padding-left: 26px; font-size: 0.8rem; } .toc a:hover { color: hsl(var(--foreground)); } .toc a.active { color: hsl(var(--brand)); border-left-color: hsl(var(--brand)); font-weight: 500; } @media (max-width: 960px) { .doc-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; } .toc { position: static; max-height: none; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 12px 14px; background: hsl(var(--card)); } .toc summary { cursor: pointer; margin-bottom: 0; } .toc[open] summary { margin-bottom: 10px; } } .prose { max-width: 780px; font-size: 1rem; line-height: 1.75; min-width: 0; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.25; margin-top: 2.4em; padding-bottom: 0.4em; border-bottom: 1px solid hsl(var(--border)); scroll-margin-top: calc(var(--header-h) + 20px); } .prose h3 { font-size: 1.2rem; letter-spacing: -0.01em; margin-top: 1.9em; scroll-margin-top: calc(var(--header-h) + 20px); } .prose h4 { font-size: 1.02rem; margin-top: 1.6em; } .prose h2:first-child { margin-top: 0; } .prose .anchor { margin-left: 8px; color: hsl(var(--muted-foreground)); opacity: 0; font-weight: 400; transition: opacity .15s; } .prose h2:hover .anchor, .prose h3:hover .anchor, .prose h4:hover .anchor { opacity: 1; } .prose a:not(.anchor):not(.next-card) { color: hsl(var(--brand)); text-decoration: underline; text-decoration-color: hsl(var(--brand) / 0.4); text-underline-offset: 3px; } .prose a:not(.anchor):not(.next-card):hover { text-decoration-color: currentColor; } .prose strong { font-weight: 600; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: 0.35em; } .prose li::marker { color: hsl(var(--muted-foreground)); } .prose hr { border-top: 1px solid hsl(var(--border)); margin: 2.5em 0; } .prose blockquote { border-left: 3px solid hsl(var(--brand)); padding: 10px 16px; background: hsl(var(--brand) / 0.06); border-radius: 0 var(--radius) var(--radius) 0; color: hsl(var(--foreground)); } .prose :not(pre) > code { font-size: 0.86em; padding: 0.12em 0.38em; border-radius: 5px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); word-break: break-word; } .prose .table-wrap { border: 1px solid hsl(var(--border)); border-radius: var(--radius); } .prose table { font-size: 0.88rem; line-height: 1.55; } .prose th, .prose td { padding: 9px 14px; } .prose figure.code pre { font-size: 0.78rem; } .next-card { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; margin-top: 3.5em !important; transition: border-color .2s; } .next-card:hover { border-color: hsl(var(--brand) / 0.6); } .next-card strong { font-size: 1.1rem; } .next-card .muted { font-size: 0.9rem; } .next-card .doc-link { margin-top: 8px; } .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; border-radius: 999px; } .to-top.show { opacity: 1; pointer-events: auto; } .to-top .up { transform: rotate(-90deg); } /* ---------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid hsl(var(--border)); padding: 36px 0; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; } .footer-brand { display: flex; gap: 12px; align-items: center; } .footer-brand p { font-size: 0.82rem; } .footer-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .footer-nav a:hover { color: hsl(var(--foreground)); } .footer-note { width: 100%; font-size: 0.78rem; padding-top: 18px; border-top: 1px solid hsl(var(--border)); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* grid children may shrink below their content (long code lines scroll inside) */ .compare > *, .concepts > *, .packages > *, .doc-cards > *, .sim-grid > *, .sim-metrics > *, .guarantees > *, .standards > *, .stats > *, .doc-layout > *, .flow-body, .tab-panel { min-width: 0; } .exchange code, .sim-log code { background: none; border: 0; padding: 0; font-size: inherit; } /* how it works: heading sticks on the left, steps on the right */ .how-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 56px; align-items: start; } .how-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; } .how-grid .flow { max-width: none; } @media (max-width: 960px) { .how-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .how-grid .section-head { position: static; margin-bottom: 36px; } } .tab-panel figure.code { margin-bottom: 0; }