feat(design): complete redesign of website

Redesign the website with a more modern look.

src/styles/global.css

@@ -2,164 +2,545 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-  /* Colors */
-  --color-sidebar: #191818;
-  --color-sidebar-hover: #333;
+  /* Colors - refined palette */
+  --color-sidebar: #0a0a0a;
+  --color-sidebar-hover: #1a1a1a;
   --color-accent: #1f8dd6;
-  --color-text-primary: #1a1a1a;
-  --color-text-secondary: #777;
-  --color-text-muted: #999;
-  --color-bg-primary: #fdfdfd;
-  --color-bg-code: #f6f8fa;
-  --color-bg-code-inline: rgba(27, 31, 35, 0.05);
-  --color-border: #333;
+  --color-accent-light: #4da6e8;
+  --color-accent-muted: rgba(31, 141, 214, 0.15);
+  --color-text-primary: #0a0a0a;
+  --color-text-secondary: #525252;
+  --color-text-muted: #737373;
+  --color-bg-primary: #fafafa;
+  --color-bg-secondary: #f5f5f5;
+  --color-bg-code: #f0f0f0;
+  --color-bg-code-inline: rgba(0, 0, 0, 0.06);
+  --color-border: #e5e5e5;
+  --color-border-strong: #d4d4d4;
 
-  /* Fonts */
-  --font-sans: "Open Sans", Helvetica, Arial, sans-serif;
-  --font-heading: "Open Sans Condensed", Helvetica, Arial, sans-serif;
-  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  /* Dark mode colors */
+  --color-dark-text-primary: #fafafa;
+  --color-dark-text-secondary: #a3a3a3;
+  --color-dark-text-muted: #737373;
+  --color-dark-bg-primary: #0a0a0a;
+  --color-dark-bg-secondary: #141414;
+  --color-dark-bg-code: #1a1a1a;
+  --color-dark-bg-code-inline: rgba(255, 255, 255, 0.1);
+  --color-dark-border: #262626;
+  --color-dark-border-strong: #404040;
+  --color-dark-accent-muted: rgba(31, 141, 214, 0.2);
+
+  /* Fonts - distinctive choices */
+  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+  --font-sans: "DM Sans", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
 
   /* Sizing */
-  --sidebar-width: 150px;
+  --header-height: 4rem;
+  --sidebar-width: 260px;
+  --content-max-width: 800px;
+  --section-padding-y: 6rem;
+  --section-padding-x: 2rem;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+  --shadow-glow: 0 0 40px rgba(31, 141, 214, 0.15);
+}
+
+/* Smooth scroll */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Scroll margin for anchor links */
+[id] {
+  scroll-margin-top: calc(var(--header-height) + 2rem);
 }
 
 /* Base styles */
 @layer base {
   html {
     height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   body {
     font-family: var(--font-sans);
     font-size: 16px;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.7;
     color: var(--color-text-primary);
     background-color: var(--color-bg-primary);
+    overflow-x: hidden;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: var(--font-heading);
+  .dark body {
+    color: var(--color-dark-text-primary);
+    background-color: var(--color-dark-bg-primary);
+  }
+
+  /* Typography */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
     font-weight: 700;
-    color: #333;
+    color: var(--color-text-primary);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  .dark h1,
+  .dark h2,
+  .dark h3,
+  .dark h4,
+  .dark h5,
+  .dark h6 {
+    color: var(--color-dark-text-primary);
   }
 
   h1 {
-    font-size: 2.5em;
-    line-height: 1.2;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 800;
+    letter-spacing: -0.03em;
   }
 
-  /* Nested list styling */
-  ol ol,
-  ul ol {
-    list-style-type: lower-roman;
+  h2 {
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
   }
 
-  ul ul ol,
-  ul ol ol,
-  ol ul ol,
-  ol ol ol {
-    list-style-type: lower-alpha;
+  h3 {
+    font-size: clamp(1.25rem, 2vw, 1.5rem);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
   }
 
+  p {
+    margin-bottom: 1.25rem;
+  }
+
+  /* Links */
   a {
+    color: var(--color-accent);
+    text-decoration: none;
+    transition: color var(--transition-fast);
     word-break: break-word;
   }
 
+  a:hover {
+    color: var(--color-accent-light);
+  }
+
+  /* Code */
   code {
-    background-color: var(--color-bg-code-inline);
-    border-radius: 3px;
     font-family: var(--font-mono);
-    font-size: 85%;
-    margin: 0;
-    padding: 0.3em 0.4em 0.1em 0.4em;
+    font-size: 0.875em;
+    background-color: var(--color-bg-code-inline);
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+  }
+
+  .dark code {
+    background-color: var(--color-dark-bg-code-inline);
   }
 
   pre {
+    font-family: var(--font-mono);
     background-color: var(--color-bg-code);
-    border-radius: 3px;
-    line-height: 1.45;
-    padding: 16px;
+    border-radius: 8px;
+    padding: 1.25rem;
+    overflow-x: auto;
+    line-height: 1.6;
+  }
+
+  .dark pre {
+    background-color: var(--color-dark-bg-code);
   }
 
   pre > code {
     background-color: transparent !important;
-    border-radius: 0;
-    font-size: 90%;
     padding: 0;
+    font-size: 0.875rem;
+  }
+
+  /* Lists */
+  ul, ol {
+    margin-bottom: 1.25rem;
+    padding-left: 1.5rem;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  ol ol, ul ol {
+    list-style-type: decimal;
+  }
+
+  ul ul ol, ul ol ol, ol ul ol, ol ol ol {
+    list-style-type: decimal;
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-left: 3px solid var(--color-accent);
+    padding-left: 1.5rem;
+    margin: 1.5rem 0;
+    color: var(--color-text-secondary);
+    font-style: italic;
+  }
+
+  .dark blockquote {
+    color: var(--color-dark-text-secondary);
+  }
+
+  /* Strong text */
+  strong {
+    font-weight: 600;
+  }
+
+  /* Selection */
+  ::selection {
+    background-color: var(--color-accent-muted);
+    color: var(--color-text-primary);
+  }
+
+  .dark ::selection {
+    background-color: var(--color-dark-accent-muted);
+    color: var(--color-dark-text-primary);
+  }
+
+  /* Focus styles */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
   }
 }
 
-/* Layout transitions */
+/* Keyframe animations - defined outside layers for proper cascade */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounce-subtle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+  opacity: 0;
+  animation: fade-in 400ms ease-out forwards;
+}
+
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fade-in-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-fade-in-down {
+  opacity: 0;
+  animation: fade-in-down 250ms ease-out forwards;
+}
+
+.animate-slide-in-left {
+  opacity: 0;
+  animation: slide-in-left 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-bounce-subtle {
+  animation: bounce-subtle 2s ease-in-out infinite;
+}
+
+/* Animation delays */
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
+.delay-600 { animation-delay: 600ms; }
+.delay-700 { animation-delay: 700ms; }
+.delay-800 { animation-delay: 800ms; }
+
+/* Component styles */
+@layer components {
+  /* Glass effect for header */
+  .glass {
+    background: rgba(250, 250, 250, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  .dark .glass {
+    background: rgba(10, 10, 10, 0.85);
+  }
+
+  /* Gradient text */
+  .gradient-text {
+    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .dark .gradient-text {
+    background: linear-gradient(135deg, var(--color-dark-text-primary) 0%, var(--color-accent-light) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Section container */
+  .section-container {
+    max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
+    margin: 0 auto;
+    padding: 0 var(--section-padding-x);
+  }
+
+  /* Content prose styling */
+  .prose-spec {
+    max-width: var(--content-max-width);
+  }
+
+  .prose-spec h2 {
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--color-border);
+    margin-top: 4rem;
+  }
+
+  .dark .prose-spec h2 {
+    border-bottom-color: var(--color-dark-border);
+  }
+
+  .prose-spec h3 {
+    color: var(--color-text-secondary);
+  }
+
+  .dark .prose-spec h3 {
+    color: var(--color-dark-text-secondary);
+  }
+
+  .prose-spec img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 2rem 0;
+  }
+
+  /* Subtle border */
+  .border-subtle {
+    border-color: var(--color-border);
+  }
+
+  .dark .border-subtle {
+    border-color: var(--color-dark-border);
+  }
+
+  /* Button base */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1.25rem;
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: all var(--transition-fast);
+    cursor: pointer;
+  }
+
+  .btn-primary {
+    background-color: var(--color-accent);
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background-color: var(--color-accent-light);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+  }
+
+  .btn-ghost {
+    background-color: transparent;
+    color: var(--color-text-secondary);
+  }
+
+  .btn-ghost:hover {
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+  }
+
+  .dark .btn-ghost {
+    color: var(--color-dark-text-secondary);
+  }
+
+  .dark .btn-ghost:hover {
+    background-color: var(--color-dark-bg-secondary);
+    color: var(--color-dark-text-primary);
+  }
+
+  /* Sidebar link styles */
+  .sidebar-link {
+    display: block;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    border-radius: 6px;
+    transition: all var(--transition-fast);
+    border-left: 2px solid transparent;
+    margin-left: -2px;
+  }
+
+  .sidebar-link:hover {
+    color: var(--color-text-primary);
+    background-color: var(--color-bg-secondary);
+  }
+
+  .dark .sidebar-link {
+    color: var(--color-dark-text-muted);
+  }
+
+  .dark .sidebar-link:hover {
+    color: var(--color-dark-text-primary);
+    background-color: var(--color-dark-bg-secondary);
+  }
+
+  .sidebar-link.active {
+    color: var(--color-accent);
+    border-left-color: var(--color-accent);
+    background-color: var(--color-accent-muted);
+  }
+
+  .dark .sidebar-link.active {
+    color: var(--color-accent-light);
+    background-color: var(--color-dark-accent-muted);
+  }
+
+  .sidebar-link-sub {
+    padding-left: 1.5rem;
+    font-size: 0.8125rem;
+  }
+
+  /* Version badge */
+  .version-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 500;
+    background-color: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    border-radius: 9999px;
+    color: var(--color-text-muted);
+  }
+
+  .dark .version-badge {
+    background-color: var(--color-dark-bg-secondary);
+    border-color: var(--color-dark-border);
+    color: var(--color-dark-text-muted);
+  }
+
+  /* FAQ accordion styles */
+  .faq-item {
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .dark .faq-item {
+    border-bottom-color: var(--color-dark-border);
+  }
+
+  .faq-question {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 1.5rem 0;
+    text-align: left;
+    font-family: var(--font-display);
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .dark .faq-question {
+    color: var(--color-dark-text-primary);
+  }
+
+  .faq-question:hover {
+    color: var(--color-accent);
+  }
+
+  .faq-answer {
+    padding-bottom: 1.5rem;
+    color: var(--color-text-secondary);
+  }
+
+  .dark .faq-answer {
+    color: var(--color-dark-text-secondary);
+  }
+}
+
+/* Transitions for interactive elements */
 @layer components {
   #layout,
   #menu,
   .menu-link {
-    transition: all 0.2s ease-out;
-  }
-
-  /* Spec content styling */
-  .spec-content h1 {
-    margin-bottom: 0.5em;
-  }
-
-  .spec-content h2 {
-    margin-top: 2em;
-    margin-bottom: 0.75em;
-    padding-bottom: 0.3em;
-    border-bottom: 1px solid #eee;
-  }
-
-  .spec-content h3 {
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
-  }
-
-  .spec-content p {
-    margin-bottom: 1em;
-  }
-
-  .spec-content ul,
-  .spec-content ol {
-    margin-bottom: 1em;
-    padding-left: 2em;
-  }
-
-  .spec-content li {
-    margin-bottom: 0.25em;
-  }
-
-  .spec-content a {
-    color: #1f8dd6;
-    text-decoration: none;
-  }
-
-  .spec-content a:hover {
-    text-decoration: underline;
-  }
-
-  .spec-content img {
-    max-width: 100%;
-    height: auto;
-    margin: 1em 0;
-  }
-
-  .spec-content blockquote {
-    margin: 1em 0;
-    padding-left: 1em;
-    border-left: 4px solid #ddd;
-    color: #666;
-  }
-
-  .spec-content hr {
-    margin: 2em 0;
-    border: none;
-    border-top: 1px solid #eee;
+    transition: all var(--transition-base);
   }
 }