From 84577784d84a2eb19e010c28e64bc22cc27e783e Mon Sep 17 00:00:00 2001 From: alexander-sei Date: Tue, 17 Feb 2026 03:56:29 +0100 Subject: [PATCH] Redesign --- app/globals.css | 741 ++++++++++++++---- app/layout.tsx | 14 +- app/not-found.tsx | 2 +- content/evm/ai-tooling/cambrian-agent-kit.mdx | 10 +- content/evm/ai-tooling/mcp-server.mdx | 14 +- content/evm/in-app-swaps.mdx | 6 +- content/evm/index.mdx | 158 ++-- content/evm/indexer-providers/dune-sim.mdx | 12 +- content/evm/indexer-providers/goldrush.mdx | 2 +- content/evm/installing-seid-cli.mdx | 2 +- .../precompiles/cosmwasm-precompiles/addr.mdx | 10 +- .../precompiles/cosmwasm-precompiles/bank.mdx | 10 +- .../cosmwasm-precompiles/cosmwasm.mdx | 14 +- .../cosmwasm-precompiles/pointer.mdx | 14 +- .../cosmwasm-precompiles/pointerview.mdx | 10 +- content/evm/precompiles/governance.mdx | 20 +- content/evm/precompiles/json.mdx | 10 +- content/evm/precompiles/staking.mdx | 14 +- content/evm/transactions.mdx | 18 +- content/evm/wallet-integrations/particle.mdx | 2 +- .../evm/wallet-integrations/thirdweb-7702.mdx | 18 +- content/evm/wallet-integrations/thirdweb.mdx | 14 +- content/index.mdx | 310 ++++---- content/learn/accounts.mdx | 2 +- content/learn/general-governance.mdx | 42 +- content/learn/index.mdx | 349 +++++---- content/learn/indexers.mdx | 26 +- content/learn/parallelization-engine.mdx | 30 +- content/learn/proposals.mdx | 12 +- content/learn/sei-giga-specs.mdx | 36 +- content/learn/sei-giga.mdx | 42 +- content/learn/seidb.mdx | 26 +- content/learn/twin-turbo-consensus.mdx | 8 +- content/learn/wallets.mdx | 2 +- content/node/index.mdx | 72 +- public/vendor/bytebellai/index.js | 24 +- src/components/AppCard/AppCard.v2.tsx | 16 +- src/components/AppCard/EcosystemSkeleton.tsx | 4 +- .../BrandKitGallery/DownloadButton.tsx | 2 +- src/components/ChainInformation/index.tsx | 9 +- src/components/Changelog/index.tsx | 18 +- src/components/CopyButton/index.tsx | 2 +- src/components/CopyText/index.tsx | 2 +- .../EcosystemContracts/TabsView.tsx | 14 +- src/components/FaucetRequest/index.tsx | 12 +- src/components/Footer/Footer.tsx | 295 +++---- src/components/Logo/Logo.tsx | 14 +- src/components/MCPDemo/MCPDemo.tsx | 384 +++++---- src/components/NetworkTabs/index.tsx | 2 +- src/components/OfficeHoursCard/index.tsx | 8 +- src/components/QuickStartCard/index.tsx | 10 +- src/components/RpcSelector/index.tsx | 20 +- src/components/Tabs/index.tsx | 6 +- .../VersionFetcher/VersionTable.tsx | 4 +- src/providers/DocsProviders.tsx | 38 +- src/styles/LinkCard.module.css | 134 ++-- src/styles/custom.css | 132 ++-- src/styles/custom.module.css | 144 ++-- src/styles/globals.css | 20 + tailwind.config.ts | 62 +- 60 files changed, 2061 insertions(+), 1387 deletions(-) diff --git a/app/globals.css b/app/globals.css index 6d06a312..52ad1a0e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,8 +1,86 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap'); @import '../node_modules/tailwindcss'; -/* Required to have tailwinds "dark:" work with nextra dark mode*/ +/* Required to have tailwinds "dark:" work with nextra dark mode */ @custom-variant dark (&:where(.dark, .dark *)); +/* ======================================================================== + SEI DESIGN SYSTEM — Figma-aligned documentation theme + Font families: Lateral Variable → Inter (fallback), ABC Repro Mono → JetBrains Mono (fallback) + ======================================================================== */ + +/* ======================================================================== + CSS CUSTOM PROPERTIES — Sei Design Tokens + ======================================================================== */ + +:root { + /* Core palette */ + --sei-black: #000000; + --sei-white: #ffffff; + --sei-cream: #e6d4c3; + + /* Neutral greys */ + --sei-grey-25: #f5f5f7; + --sei-grey-50: #cccccc; + --sei-grey-75: #999999; + --sei-grey-100: #999999; + --sei-grey-200: #666666; + --sei-grey-300: #333333; + --sei-grey-400: #333333; + --sei-grey-600: #131313; + + /* Maroon accent */ + --sei-maroon-25: #b99ba1; + --sei-maroon-50: #b05c6c; + --sei-maroon-100: #600014; + --sei-maroon-200: #34050d; + + /* Gold accent */ + --sei-gold-25: #d6c9ac; + --sei-gold-100: #966f22; + --sei-gold-200: #5d4a22; + + /* Semantic */ + --sei-live: #38df00; + --sei-error: #fa0c00; + + /* Font stacks */ + --font-display: 'Inter', system-ui, -apple-system, sans-serif; + --font-body: 'Inter', system-ui, -apple-system, sans-serif; + --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; + + /* Radii */ + --radius-sm: 2px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-button: 64px; + + /* Search */ + --search-highlight-text: rgba(96, 0, 20, 0.2); +} + +.dark { + --search-highlight-text: rgba(185, 155, 161, 0.35); +} + +/* ======================================================================== + BASE STYLES + ======================================================================== */ + +html { + font-family: var(--font-body); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-body); +} + +/* ======================================================================== + RADIX UI OVERRIDES + ======================================================================== */ + .radix-themes { --cursor-button: pointer !important; --cursor-checkbox: pointer; @@ -15,54 +93,127 @@ --cursor-switch: pointer; } +/* ======================================================================== + GLOBAL BACKGROUNDS — Sei dark theme base + ======================================================================== */ + +aside, +.nextra-nav, +.nextra-nav-container { + background-color: var(--sei-grey-25) !important; +} + +.dark aside, +.dark .nextra-nav, +.dark .nextra-nav-container { + background-color: var(--sei-black) !important; +} + +/* ======================================================================== + TYPOGRAPHY — Matching Figma type scale + ======================================================================== */ + +/* Headings use tight tracking and heavy weight like Lateral Variable Condensed Bold */ +h1, +.nx-text-4xl { + font-family: var(--font-display) !important; + font-weight: 800 !important; + letter-spacing: -0.03em !important; + line-height: 0.95 !important; + text-transform: none; +} + +h2, +.nx-text-3xl { + font-family: var(--font-display) !important; + font-weight: 700 !important; + letter-spacing: -0.02em !important; + line-height: 0.95 !important; +} + +h3, +.nx-text-2xl { + font-family: var(--font-display) !important; + font-weight: 700 !important; + letter-spacing: -0.02em !important; + line-height: 1 !important; +} + +h4, +.nx-text-xl { + font-family: var(--font-display) !important; + font-weight: 600 !important; + letter-spacing: -0.01em !important; + line-height: 1.1 !important; +} + +/* Body text */ +p, +li, +td, +th, +dd, +dt { + font-family: var(--font-body); + line-height: 1.6; +} + +/* Inline code */ +:not(pre) > code { + font-family: var(--font-mono) !important; + font-size: 0.85em !important; + padding: 0.15em 0.4em !important; + border-radius: 4px !important; + background-color: rgba(0, 0, 0, 0.06) !important; + border: 1px solid rgba(0, 0, 0, 0.08) !important; +} + +.dark :not(pre) > code { + background-color: rgba(255, 255, 255, 0.08) !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +/* ======================================================================== + CODE BLOCKS — Shiki syntax highlighting + ======================================================================== */ + .shiki { - padding: 20px; - border-radius: 12px; - border: 1px solid var(--color-neutral-300); + font-family: var(--font-mono) !important; + font-size: 13px !important; + line-height: 1.65 !important; + padding: 20px 24px !important; + border-radius: var(--radius-lg) !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; overflow: auto; } pre code { white-space: pre-wrap; word-break: break-word; + font-family: var(--font-mono) !important; } .light .shiki, .light .shiki span { - background-color: var(--color-neutral-100) !important; + background-color: var(--sei-grey-25) !important; +} + +.dark .shiki { + border: 1px solid var(--sei-grey-300) !important; } .dark .shiki, .dark .shiki span { - background-color: var(--color-neutral-900) !important; + background-color: var(--sei-grey-600) !important; color: var(--shiki-dark) !important; font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } -aside, -.nextra-nav, -.nextra-nav-container { - background-color: var(--color-neutral-100) !important; -} - -.dark aside, -.dark .nextra-nav, -.dark .nextra-nav-container { - background-color: var(--color-neutral-900) !important; -} - -.dark .shiki { - border: 1px solid var(--color-neutral-700); -} - -:root { - --search-highlight-text: rgba(158, 31, 25, 0.2); -} -.dark { - --search-highlight-text: rgba(158, 31, 25, 0.4); -} +/* ======================================================================== + SEARCH + ======================================================================== */ .nextra-search-results mark { background-color: var(--search-highlight-text); @@ -73,57 +224,70 @@ aside, .nextra-search input, .nextra-search-input { - background-color: var(--color-neutral-100); - border: 1px solid var(--color-neutral-300); + font-family: var(--font-mono) !important; + font-size: 12px !important; + text-transform: uppercase !important; + letter-spacing: 0.02em !important; + background-color: var(--sei-grey-25) !important; + border: 1px solid rgba(0, 0, 0, 0.12) !important; + border-radius: var(--radius-sm) !important; } .dark .nextra-search input, .dark .nextra-search-input { - background-color: var(--color-neutral-800); - border: 1px solid var(--color-neutral-700); + background-color: var(--sei-grey-600) !important; + border-color: var(--sei-grey-300) !important; + color: var(--sei-white) !important; } .nextra-search-results { - background-color: rgba(255, 255, 255, 0.75); - border: 1px solid var(--color-neutral-300); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + font-family: var(--font-body) !important; + background-color: rgba(255, 255, 255, 0.92) !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border-radius: var(--radius-md) !important; } .dark .nextra-search-results { - background-color: rgba(0, 0, 0, 0.75); - border-color: var(--color-neutral-700); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + background-color: rgba(19, 19, 19, 0.92) !important; + border-color: var(--sei-grey-300) !important; } .nextra-search-results a, .nextra-search-results a * { - color: var(--color-neutral-700) !important; + color: var(--sei-grey-200) !important; } .dark .nextra-search-results a, .dark .nextra-search-results a * { - color: var(--color-neutral-300) !important; + color: var(--sei-grey-75) !important; } .nextra-search-results a:hover, .nextra-search-results a:hover * { - color: var(--color-black) !important; + color: var(--sei-black) !important; } .dark .nextra-search-results a:hover, .dark .nextra-search-results a:hover * { - color: var(--color-white) !important; + color: var(--sei-white) !important; } -/* Contain layout/paint for heavy components to reduce reflow impact */ +/* ======================================================================== + LAYOUT CONTAINMENT + ======================================================================== */ + .nextra-mobile-nav, .nextra-sidebar, .nextra-scrollbar { contain: layout style paint; } +/* ======================================================================== + COLOR PALETTE — Radix UI red theme overrides (Sei maroon) + ======================================================================== */ + :root, .light, .light-theme { @@ -135,10 +299,10 @@ aside, --red-6: #f5c2ba; --red-7: #ebafa6; --red-8: #e0978c; - --red-9: #9e1f19; - --red-10: #8c0205; - --red-11: #c04237; - --red-12: #5e211b; + --red-9: #600014; + --red-10: #34050d; + --red-11: #b05c6c; + --red-12: #34050d; --red-a1: #ff000003; --red-a2: #e0200008; @@ -148,15 +312,15 @@ aside, --red-a6: #db1e0045; --red-a7: #c61a0059; --red-a8: #bb190073; - --red-a9: #940700e6; - --red-a10: #8b0003fd; - --red-a11: #af0e00c8; - --red-a12: #4b0700e4; + --red-a9: #600014e6; + --red-a10: #34050dfd; + --red-a11: #b05c6cc8; + --red-a12: #34050de4; --red-contrast: #fff; --red-surface: #fef6f5cc; - --red-indicator: #9e1f19; - --red-track: #9e1f19; + --red-indicator: #600014; + --red-track: #600014; } @supports (color: color(display-p3 1 1 1)) { @@ -172,10 +336,10 @@ aside, --red-6: oklch(85.7% 0.0596 28.46); --red-7: oklch(80.8% 0.0715 28.46); --red-8: oklch(74.6% 0.0906 28.46); - --red-9: oklch(45.6% 0.1636 28.46); - --red-10: oklch(40.2% 0.1636 28.46); - --red-11: oklch(55.5% 0.1636 28.46); - --red-12: oklch(34% 0.0904 28.46); + --red-9: oklch(30% 0.12 10); + --red-10: oklch(22% 0.09 10); + --red-11: oklch(55% 0.1 10); + --red-12: oklch(22% 0.09 10); --red-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012); --red-a2: color(display-p3 0.7569 0.1451 0.0196 / 0.032); @@ -185,33 +349,33 @@ aside, --red-a6: color(display-p3 0.7333 0.1216 0.0039 / 0.263); --red-a7: color(display-p3 0.6706 0.1059 0.0039 / 0.342); --red-a8: color(display-p3 0.6275 0.102 0.0039 / 0.44); - --red-a9: color(display-p3 0.502 0.0392 0 / 0.867); - --red-a10: color(display-p3 0.4627 0.0235 0 / 0.93); - --red-a11: color(display-p3 0.6 0.0667 0 / 0.757); - --red-a12: color(display-p3 0.2549 0.0314 0 / 0.883); + --red-a9: color(display-p3 0.376 0 0.08 / 0.9); + --red-a10: color(display-p3 0.204 0.02 0.05 / 0.95); + --red-a11: color(display-p3 0.69 0.36 0.42 / 0.78); + --red-a12: color(display-p3 0.204 0.02 0.05 / 0.89); --red-contrast: #fff; --red-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8); - --red-indicator: oklch(45.6% 0.1636 28.46); - --red-track: oklch(45.6% 0.1636 28.46); + --red-indicator: oklch(30% 0.12 10); + --red-track: oklch(30% 0.12 10); } } } .dark, .dark-theme { - --red-1: #180e0d; - --red-2: #22110f; - --red-3: #420906; - --red-4: #5b0000; - --red-5: #6e0000; - --red-6: #810807; - --red-7: #9c1d17; - --red-8: #ca2720; - --red-9: #9e1f19; - --red-10: #87130f; - --red-11: #ff9081; - --red-12: #ffcec4; + --red-1: #0f0a09; + --red-2: #1a0e0c; + --red-3: #320609; + --red-4: #480003; + --red-5: #5a0008; + --red-6: #6b050a; + --red-7: #7d1520; + --red-8: #a0202c; + --red-9: #600014; + --red-10: #4a000f; + --red-11: #b99ba1; + --red-12: #e6d4c3; --red-a1: #f1000008; --red-a2: #f6110013; @@ -221,33 +385,33 @@ aside, --red-a6: #ff000078; --red-a7: #ff261c95; --red-a8: #fe2d24c7; - --red-a9: #fe291f98; - --red-a10: #fd150d7f; - --red-a11: #ca2720; - --red-a12: #ffcec4; + --red-a9: #60001498; + --red-a10: #4a000f7f; + --red-a11: #b99ba1; + --red-a12: #e6d4c3; --red-contrast: #fff; - --red-surface: #33110e80; - --red-indicator: #9e1f19; - --red-track: #9e1f19; + --red-surface: #2a0e0c80; + --red-indicator: #600014; + --red-track: #600014; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark, .dark-theme { - --red-1: oklch(17.8% 0.0181 28.46); - --red-2: oklch(20.3% 0.0292 28.46); - --red-3: oklch(25% 0.0872 28.46); - --red-4: oklch(28.8% 0.13 28.46); - --red-5: oklch(33.1% 0.1446 28.46); - --red-6: oklch(38.2% 0.151 28.46); - --red-7: oklch(45% 0.1636 28.46); - --red-8: oklch(54.4% 0.1987 28.46); - --red-9: oklch(45.6% 0.1636 28.46); - --red-10: oklch(40.2% 0.151 28.46); - --red-11: oklch(78.4% 0.1987 28.46); - --red-12: oklch(90.2% 0.0717 28.46); + --red-1: oklch(14% 0.02 10); + --red-2: oklch(17% 0.03 10); + --red-3: oklch(22% 0.08 10); + --red-4: oklch(26% 0.11 10); + --red-5: oklch(30% 0.12 10); + --red-6: oklch(34% 0.12 10); + --red-7: oklch(40% 0.12 10); + --red-8: oklch(50% 0.15 10); + --red-9: oklch(30% 0.12 10); + --red-10: oklch(24% 0.1 10); + --red-11: oklch(72% 0.04 10); + --red-12: oklch(88% 0.04 60); --red-a1: color(display-p3 0.9608 0 0 / 0.022); --red-a2: color(display-p3 0.9882 0.1294 0.0078 / 0.064); @@ -257,45 +421,72 @@ aside, --red-a6: color(display-p3 1 0.1412 0.0745 / 0.425); --red-a7: color(display-p3 1 0.2549 0.1804 / 0.53); --red-a8: color(display-p3 1 0.2824 0.2157 / 0.711); - --red-a9: color(display-p3 1 0.2549 0.1922 / 0.538); - --red-a10: color(display-p3 1 0.2 0.1294 / 0.45); - --red-a11: color(display-p3 1 0.2824 0.2157 / 0.711); - --red-a12: color(display-p3 0.9961 0.8392 0.8 / 0.967); + --red-a9: color(display-p3 0.376 0 0.08 / 0.6); + --red-a10: color(display-p3 0.29 0 0.06 / 0.5); + --red-a11: color(display-p3 0.72 0.6 0.63 / 0.9); + --red-a12: color(display-p3 0.9 0.83 0.76 / 0.97); --red-contrast: #fff; - --red-surface: color(display-p3 0.1804 0.0706 0.0588 / 0.5); - --red-indicator: oklch(45.6% 0.1636 28.46); - --red-track: oklch(45.6% 0.1636 28.46); + --red-surface: color(display-p3 0.16 0.06 0.05 / 0.5); + --red-indicator: oklch(30% 0.12 10); + --red-track: oklch(30% 0.12 10); } } } -/* Override Nextra navbar logo anchor margin to eliminate excessive gap next to the logo */ +/* ======================================================================== + NAVBAR — Figma nav style (mono, uppercase, minimal) + ======================================================================== */ + +.sei-nav { + font-family: var(--font-mono) !important; + font-size: 12px !important; + letter-spacing: 0 !important; + text-transform: uppercase !important; +} + +.sei-nav.nextra-nav, +.sei-nav .nextra-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; +} + +.dark .sei-nav.nextra-nav, +.dark .sei-nav .nextra-nav { + border-bottom-color: var(--sei-grey-300) !important; +} + .nextra-nav a.nx-me-auto, .nextra-nav-container a.nx-me-auto { margin-inline-end: 0 !important; } -/* Callout component overrides - targeting Nextra's actual structure */ +/* ======================================================================== + CALLOUT COMPONENTS — Refined to match Sei design language + ======================================================================== */ + .nextra-callout { - margin: 1.75rem 0 !important; + margin: 1.5rem 0 !important; padding: 16px 20px !important; - border-radius: 12px !important; - border-width: 1.5px !important; - box-shadow: - 0 20px 44px -26px rgba(15, 23, 42, 0.16), - 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important; + border-radius: 0 !important; + border-width: 1px !important; + border-left-width: 3px !important; + font-family: var(--font-body) !important; + font-size: 14px !important; + line-height: 1.5 !important; +} + +.light .nextra-callout { + background-color: #f5f5f7 !important; } .dark .nextra-callout { - box-shadow: - 0 24px 54px -28px rgba(3, 7, 18, 0.6), - 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important; + background-color: rgba(25, 25, 25, 0.8) !important; + border-color: var(--sei-grey-300) !important; } .nextra-callout :where(p, ul, ol) { margin-top: 0 !important; - margin-bottom: 0.75rem !important; + margin-bottom: 0.5rem !important; } .nextra-callout :where(p:last-child, ul:last-child, ol:last-child) { @@ -304,102 +495,149 @@ aside, .nextra-callout code { background: var(--callout-code-bg) !important; - border-radius: 6px !important; - padding: 0.16rem 0.48rem !important; + border-radius: 2px !important; + padding: 0.15em 0.4em !important; font-size: 0.84em !important; + font-family: var(--font-mono) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; } /* Info callout (blue) */ .nextra-callout[class*='border-blue'] { - --callout-code-bg: rgba(59, 130, 246, 0.1); - border-color: rgba(59, 130, 246, 0.35) !important; + --callout-code-bg: rgba(59, 130, 246, 0.08); + background-color: rgba(59, 130, 246, 0.06) !important; + border-color: rgba(59, 130, 246, 0.15) !important; + border-left-color: rgba(59, 130, 246, 0.6) !important; color: rgba(30, 58, 138, 0.88) !important; } .dark .nextra-callout[class*='border-blue'] { - --callout-code-bg: rgba(147, 197, 253, 0.12); - border-color: rgba(147, 197, 253, 0.5) !important; - color: rgba(224, 242, 254, 0.96) !important; + --callout-code-bg: rgba(147, 197, 253, 0.1); + background-color: rgba(59, 130, 246, 0.08) !important; + border-color: rgba(147, 197, 253, 0.15) !important; + border-left-color: rgba(147, 197, 253, 0.5) !important; + color: rgba(224, 242, 254, 0.92) !important; } .dark .nextra-callout[class*='border-blue'] svg { - color: rgba(147, 197, 253, 0.92) !important; + color: rgba(147, 197, 253, 0.85) !important; } /* Warning callout (yellow) */ .nextra-callout[class*='border-yellow'] { - --callout-code-bg: rgba(234, 179, 8, 0.1); - border-color: rgba(234, 179, 8, 0.42) !important; + --callout-code-bg: rgba(234, 179, 8, 0.08); + background-color: rgba(234, 179, 8, 0.06) !important; + border-color: rgba(234, 179, 8, 0.15) !important; + border-left-color: rgba(234, 179, 8, 0.6) !important; color: rgba(113, 63, 18, 0.85) !important; } .dark .nextra-callout[class*='border-yellow'] { - --callout-code-bg: rgba(253, 224, 71, 0.12); - border-color: rgba(253, 224, 71, 0.55) !important; - color: rgba(254, 249, 195, 0.96) !important; + --callout-code-bg: rgba(253, 224, 71, 0.1); + background-color: rgba(234, 179, 8, 0.08) !important; + border-color: rgba(253, 224, 71, 0.15) !important; + border-left-color: rgba(253, 224, 71, 0.5) !important; + color: rgba(254, 249, 195, 0.92) !important; } .dark .nextra-callout[class*='border-yellow'] svg { - color: rgba(253, 224, 71, 0.92) !important; + color: rgba(253, 224, 71, 0.85) !important; } -/* Error callout (red) */ +/* Error callout (red/maroon) */ .nextra-callout[class*='border-red'] { - --callout-code-bg: rgba(239, 68, 68, 0.1); - border-color: rgba(239, 68, 68, 0.35) !important; - color: rgba(127, 29, 29, 0.88) !important; + --callout-code-bg: rgba(96, 0, 20, 0.06); + background-color: rgba(96, 0, 20, 0.05) !important; + border-color: rgba(96, 0, 20, 0.15) !important; + border-left-color: rgba(96, 0, 20, 0.6) !important; + color: rgba(52, 5, 13, 0.88) !important; } .dark .nextra-callout[class*='border-red'] { - --callout-code-bg: rgba(252, 165, 165, 0.12); - border-color: rgba(252, 165, 165, 0.5) !important; - color: rgba(254, 226, 226, 0.96) !important; + --callout-code-bg: rgba(185, 155, 161, 0.1); + background-color: rgba(96, 0, 20, 0.08) !important; + border-color: rgba(185, 155, 161, 0.15) !important; + border-left-color: rgba(185, 155, 161, 0.5) !important; + color: rgba(230, 212, 195, 0.92) !important; } .dark .nextra-callout[class*='border-red'] svg { - color: rgba(252, 165, 165, 0.92) !important; + color: rgba(185, 155, 161, 0.85) !important; } /* Default/orange callout */ .nextra-callout[class*='border-orange'] { - --callout-code-bg: rgba(234, 88, 12, 0.1); - border-color: rgba(234, 88, 12, 0.35) !important; + --callout-code-bg: rgba(234, 88, 12, 0.08); + background-color: rgba(234, 88, 12, 0.05) !important; + border-color: rgba(234, 88, 12, 0.15) !important; + border-left-color: rgba(234, 88, 12, 0.6) !important; color: rgba(124, 45, 18, 0.85) !important; } .dark .nextra-callout[class*='border-orange'] { - --callout-code-bg: rgba(253, 186, 116, 0.12); - border-color: rgba(253, 186, 116, 0.45) !important; - color: rgba(254, 237, 213, 0.96) !important; + --callout-code-bg: rgba(253, 186, 116, 0.1); + background-color: rgba(234, 88, 12, 0.08) !important; + border-color: rgba(253, 186, 116, 0.15) !important; + border-left-color: rgba(253, 186, 116, 0.5) !important; + color: rgba(254, 237, 213, 0.92) !important; } .dark .nextra-callout[class*='border-orange'] svg { - color: rgba(253, 186, 116, 0.92) !important; + color: rgba(253, 186, 116, 0.85) !important; } -/* Sidebar Compactness Overrides */ +/* ======================================================================== + SIDEBAR — Compact, Sei-styled + ======================================================================== */ -/* Reduce vertical padding for sidebar links */ +/* Sidebar links: mono font, uppercase style for categories */ .nextra-sidebar ul li a, .nextra-sidebar ul li button, .nextra-mobile-nav ul li a, .nextra-mobile-nav ul li button { - padding-top: 0.1rem !important; - padding-bottom: 0.1rem !important; - padding-left: 0.45rem !important; - padding-right: 0.2rem !important; + padding-top: 0.2rem !important; + padding-bottom: 0.2rem !important; + padding-left: 0.5rem !important; + padding-right: 0.25rem !important; + font-size: 13px !important; + letter-spacing: -0.01em !important; + border-radius: var(--radius-sm) !important; + transition: + background-color 0.15s ease, + color 0.15s ease !important; +} + +.nextra-sidebar ul li a:hover, +.nextra-sidebar ul li button:hover { + background-color: rgba(0, 0, 0, 0.04) !important; +} + +.dark .nextra-sidebar ul li a:hover, +.dark .nextra-sidebar ul li button:hover { + background-color: rgba(255, 255, 255, 0.05) !important; +} + +/* Active sidebar item */ +.nextra-sidebar ul li a[aria-current='page'], +.nextra-sidebar ul li a.active { + background-color: rgba(96, 0, 20, 0.08) !important; + color: var(--sei-maroon-100) !important; + font-weight: 500 !important; +} + +.dark .nextra-sidebar ul li a[aria-current='page'], +.dark .nextra-sidebar ul li a.active { + background-color: rgba(96, 0, 20, 0.2) !important; + color: var(--sei-maroon-25) !important; } -/* Reduce vertical spacing for section separators/headers */ .nextra-sidebar-separator { margin-top: 1rem !important; margin-bottom: 0.5rem !important; } -/* Reduce general spacing in the sidebar */ .nextra-sidebar ul { - gap: 0.25rem; + gap: 0.15rem; } .nextra-sidebar .nextra-scrollbar, @@ -410,10 +648,15 @@ aside, @media (min-width: 768px) { .nextra-sidebar[class*='x:w-64'] { - width: var(--sei-docs-sidebar-width, 13rem) !important; - min-width: var(--sei-docs-sidebar-width, 13rem) !important; - max-width: var(--sei-docs-sidebar-width, 13rem) !important; - flex-basis: var(--sei-docs-sidebar-width, 13rem) !important; + width: var(--sei-docs-sidebar-width, 14rem) !important; + min-width: var(--sei-docs-sidebar-width, 14rem) !important; + max-width: var(--sei-docs-sidebar-width, 14rem) !important; + flex-basis: var(--sei-docs-sidebar-width, 14rem) !important; + border-right: 1px solid rgba(0, 0, 0, 0.08) !important; + } + + .dark .nextra-sidebar[class*='x:w-64'] { + border-right-color: var(--sei-grey-300) !important; } .nextra-sidebar[class*='x:w-20'] { @@ -424,8 +667,8 @@ aside, } .nextra-sidebar ~ article { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; + padding-left: 2rem !important; + padding-right: 2rem !important; } } @@ -435,9 +678,189 @@ aside, width: var(--sei-docs-mobile-nav-width, min(86vw, 20rem)) !important; max-width: 20rem !important; border-right: 1px solid rgba(0, 0, 0, 0.08); + background-color: var(--sei-grey-25) !important; } .dark .nextra-mobile-nav { - border-right-color: rgba(255, 255, 255, 0.08); + border-right-color: var(--sei-grey-300); + background-color: var(--sei-black) !important; } } + +/* ======================================================================== + TABLES — Clean, minimal, Sei-aligned + ======================================================================== */ + +table { + font-family: var(--font-body) !important; + font-size: 14px !important; + border-collapse: collapse !important; +} + +th { + font-family: var(--font-mono) !important; + font-size: 11px !important; + text-transform: uppercase !important; + letter-spacing: 0.05em !important; + color: var(--sei-grey-200) !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important; + padding: 8px 12px !important; + font-weight: 400 !important; +} + +.dark th { + color: var(--sei-grey-75) !important; + border-bottom-color: var(--sei-grey-300) !important; +} + +td { + border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; + padding: 10px 12px !important; +} + +.dark td { + border-bottom-color: rgba(255, 255, 255, 0.06) !important; +} + +/* ======================================================================== + LINKS — Sei maroon accent + ======================================================================== */ + +article a:not([class]) { + color: var(--sei-maroon-100) !important; + text-decoration: none !important; + border-bottom: 1px solid transparent !important; + transition: border-color 0.15s ease !important; +} + +article a:not([class]):hover { + border-bottom-color: var(--sei-maroon-100) !important; +} + +.dark article a:not([class]) { + color: var(--sei-maroon-25) !important; +} + +.dark article a:not([class]):hover { + border-bottom-color: var(--sei-maroon-25) !important; +} + +/* ======================================================================== + HORIZONTAL RULES / DIVIDERS + ======================================================================== */ + +hr { + border-color: rgba(0, 0, 0, 0.1) !important; +} + +.dark hr { + border-color: var(--sei-grey-300) !important; +} + +/* ======================================================================== + BLOCKQUOTES — Sei quote style + ======================================================================== */ + +blockquote { + font-family: var(--font-display) !important; + font-size: 1.25rem !important; + font-weight: 300 !important; + letter-spacing: -0.02em !important; + line-height: 1.4 !important; + border-left: 2px solid var(--sei-grey-300) !important; + padding-left: 1.5rem !important; + color: var(--sei-grey-200) !important; +} + +.dark blockquote { + border-left-color: var(--sei-grey-300) !important; + color: var(--sei-grey-75) !important; +} + +/* ======================================================================== + SCROLLBAR — Minimal dark scrollbar + ======================================================================== */ + +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.15); + border-radius: 3px; +} + +.dark ::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.12); +} + +::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.25); +} + +.dark ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +/* ======================================================================== + BREADCRUMBS & PAGE NAV — Mono text style + ======================================================================== */ + +nav[aria-label='breadcrumb'], +.nextra-breadcrumb { + font-family: var(--font-mono) !important; + font-size: 11px !important; + text-transform: uppercase !important; + letter-spacing: 0.02em !important; +} + +/* TOC (table of contents) sidebar */ +.nextra-toc { + font-size: 13px !important; +} + +.nextra-toc a { + transition: color 0.15s ease !important; +} + +/* ======================================================================== + SELECTION + ======================================================================== */ + +::selection { + background: rgba(96, 0, 20, 0.2); + color: inherit; +} + +.dark ::selection { + background: rgba(185, 155, 161, 0.25); +} + +/* ======================================================================== + FOCUS STYLES + ======================================================================== */ + +:focus-visible { + outline: 2px solid var(--sei-maroon-100) !important; + outline-offset: 2px !important; +} + +.dark :focus-visible { + outline-color: var(--sei-maroon-25) !important; +} + +/* ======================================================================== + TRANSITIONS — Smooth theme switching + ======================================================================== */ + +html.transitioning, +html.transitioning *, +html.transitioning *::before, +html.transitioning *::after { + transition-duration: 0s !important; +} diff --git a/app/layout.tsx b/app/layout.tsx index 766a7002..bab353d6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -22,7 +22,6 @@ export const metadata: Metadata = { 'Documentation for Sei. Providing comprehensive guides, tutorials, and resources for developers building on Sei. Learn about the EVM, smart contracts, tokenization standards (ERC20, ERC721, ERC1155), and advanced features of the Sei ecosystem to accelerate your blockchain development journey.', category: 'technology', openGraph: { - // Make sure not to specify `title` or description` as they are automatically generated from the main description and title template url: 'https://docs.sei.io', siteName: 'Sei Docs', locale: 'en_US', @@ -35,7 +34,6 @@ export const metadata: Metadata = { type: 'article' }, twitter: { - // Make sure not to specify `title` or description` as they are automatically generated from the main description and title template card: 'summary_large_image', creator: '@SeiNetwork', images: ['https://docs.sei.io/assets/docs-banner.png'] @@ -70,10 +68,16 @@ export const metadata: Metadata = { export default async function RootLayout({ children }) { return ( - + - {/* Performance: avoid early preconnects to heavy third-parties */} + {/* Google Fonts: Inter + JetBrains Mono to match Sei design system */} + + +