diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml deleted file mode 100644 index 457a297..0000000 --- a/.github/workflows/deploy.yml +++ /dev/null @@ -1,72 +0,0 @@ -name: Deploy to GitHub Pages - -on: - push: - branches: [main] - paths: - - 'website/**' - - '.github/workflows/deploy.yml' - workflow_dispatch: - -permissions: - contents: read - pages: write - id-token: write - -concurrency: - group: "pages" - cancel-in-progress: false - -jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version: "20" - - - name: Setup pnpm - uses: pnpm/action-setup@v3 - with: - version: 9 - - - name: Get pnpm store directory - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV - - - name: Setup pnpm cache - uses: actions/cache@v4 - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('website/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install dependencies - run: pnpm install - working-directory: ./website - - - name: Build website - run: pnpm build - working-directory: ./website - - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - path: ./website/dist - - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - needs: build - runs-on: ubuntu-latest - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 diff --git a/website/astro.config.mjs b/website/astro.config.mjs index db38109..ae76e5a 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -5,8 +5,7 @@ import tailwindcss from '@tailwindcss/vite'; // https://astro.build/config export default defineConfig({ - site: 'https://duthaho.github.io', - base: '/claudekit', + site: 'https://claudekit.duthaho.dev', integrations: [ starlight({ title: 'Claude Kit', @@ -21,10 +20,18 @@ export default defineConfig({ }, head: [ { - tag: 'meta', + tag: 'link', + attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, + }, + { + tag: 'link', + attrs: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }, + }, + { + tag: 'link', attrs: { - property: 'og:image', - content: 'https://duthaho.github.io/claudekit/og-image.png', + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap', }, }, ], diff --git a/website/src/assets/hero-dark.svg b/website/src/assets/hero-dark.svg index b92b789..25caf3d 100644 --- a/website/src/assets/hero-dark.svg +++ b/website/src/assets/hero-dark.svg @@ -1,46 +1,63 @@ - - - - - - - - - - - - - $ - /feature - "add user authentication" - - - ✓ - Planning feature... - - ✓ - Implementing auth service... - - ✓ - Writing tests... - - ✓ - Code review passed - - ✓ - Feature complete! - - - - - - - + - - - + + + - + + + + + + + THINK + REVIEW + BUILD + + + + + 01 + 02 + 03 + + + + + + + + + + + + + + + + + + + + + + + + + + SHIP + MAINTAIN + SETUP + + + + + 04 + 05 + 06 + + + + 35 SKILLS · 24 AGENTS · 7 MODES diff --git a/website/src/assets/hero-light.svg b/website/src/assets/hero-light.svg index fcdb4dd..be589a1 100644 --- a/website/src/assets/hero-light.svg +++ b/website/src/assets/hero-light.svg @@ -1,46 +1,63 @@ - - - - - - - - - - - - - $ - /feature - "add user authentication" - - - ✓ - Planning feature... - - ✓ - Implementing auth service... - - ✓ - Writing tests... - - ✓ - Code review passed - - ✓ - Feature complete! - - - - - - - + - - - + + + - + + + + + + + THINK + REVIEW + BUILD + + + + + 01 + 02 + 03 + + + + + + + + + + + + + + + + + + + + + + + + + + SHIP + MAINTAIN + SETUP + + + + + 04 + 05 + 06 + + + + 35 SKILLS · 24 AGENTS · 7 MODES diff --git a/website/src/assets/logo-dark.svg b/website/src/assets/logo-dark.svg index 4821ca5..9540a78 100644 --- a/website/src/assets/logo-dark.svg +++ b/website/src/assets/logo-dark.svg @@ -1,14 +1,10 @@ - - - - - + + + + + - - - Claude - - - Kit - + + Claude + Kit diff --git a/website/src/assets/logo-light.svg b/website/src/assets/logo-light.svg index 837ebde..073924c 100644 --- a/website/src/assets/logo-light.svg +++ b/website/src/assets/logo-light.svg @@ -1,14 +1,10 @@ - - - - - + + + + + - - - Claude - - - Kit - + + Claude + Kit diff --git a/website/src/content/docs/customization/creating-agents-and-modes.md b/website/src/content/docs/customization/creating-agents-and-modes.md index 2793650..70044e2 100644 --- a/website/src/content/docs/customization/creating-agents-and-modes.md +++ b/website/src/content/docs/customization/creating-agents-and-modes.md @@ -207,6 +207,6 @@ Or reference the mode-switching skill keywords. ## Related Pages -- [Agents Reference](/claudekit/reference/agents/) — All 24 built-in agents -- [Modes Reference](/claudekit/reference/modes/) — All 7 built-in modes -- [Creating Skills](/claudekit/customization/creating-skills/) — Custom skill creation +- [Agents Reference](/reference/agents/) — All 24 built-in agents +- [Modes Reference](/reference/modes/) — All 7 built-in modes +- [Creating Skills](/customization/creating-skills/) — Custom skill creation diff --git a/website/src/content/docs/customization/creating-skills.md b/website/src/content/docs/customization/creating-skills.md index 4390116..5aa09d1 100644 --- a/website/src/content/docs/customization/creating-skills.md +++ b/website/src/content/docs/customization/creating-skills.md @@ -190,5 +190,5 @@ description: Use when deploying to Fly.io or configuring Fly.io ## Related Pages -- [Skills Reference](/claudekit/reference/skills/) — All 35 built-in skills -- [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) — Custom agents and modes +- [Skills Reference](/reference/skills/) — All 35 built-in skills +- [Creating Agents & Modes](/customization/creating-agents-and-modes/) — Custom agents and modes diff --git a/website/src/content/docs/getting-started/configuration.md b/website/src/content/docs/getting-started/configuration.md index 922dce6..93d9781 100644 --- a/website/src/content/docs/getting-started/configuration.md +++ b/website/src/content/docs/getting-started/configuration.md @@ -124,6 +124,6 @@ You can customize agent behavior in your CLAUDE.md: ## Next Steps -- [Workflows](/claudekit/workflows/planning-and-building/) — See how skills work together -- [Skills Reference](/claudekit/reference/skills/) — Browse all 35 skills -- [Creating Skills](/claudekit/customization/creating-skills/) — Build your own +- [Workflows](/workflows/planning-and-building/) — See how skills work together +- [Skills Reference](/reference/skills/) — Browse all 35 skills +- [Creating Skills](/customization/creating-skills/) — Build your own diff --git a/website/src/content/docs/getting-started/installation.md b/website/src/content/docs/getting-started/installation.md index 35438a4..ddea8b5 100644 --- a/website/src/content/docs/getting-started/installation.md +++ b/website/src/content/docs/getting-started/installation.md @@ -114,5 +114,5 @@ Make sure you've added the marketplace first: ## Next Steps -1. [Configuration](/claudekit/getting-started/configuration/) — Customize rules, modes, and more via `/claudekit:init` -2. [Workflows](/claudekit/workflows/planning-and-building/) — See how skills work together +1. [Configuration](/getting-started/configuration/) — Customize rules, modes, and more via `/claudekit:init` +2. [Workflows](/workflows/planning-and-building/) — See how skills work together diff --git a/website/src/content/docs/getting-started/introduction.md b/website/src/content/docs/getting-started/introduction.md index 7a7f514..86334a4 100644 --- a/website/src/content/docs/getting-started/introduction.md +++ b/website/src/content/docs/getting-started/introduction.md @@ -61,6 +61,6 @@ No slash commands needed — Claude reads your intent and activates the right sk ## Next Steps -1. [Install Claude Kit](/claudekit/getting-started/installation/) — Install the plugin -2. [Configuration](/claudekit/getting-started/configuration/) — Run `/claudekit:init` to customize -3. [Skills Reference](/claudekit/reference/skills/) — Browse all 35 skills +1. [Install Claude Kit](/getting-started/installation/) — Install the plugin +2. [Configuration](/getting-started/configuration/) — Run `/claudekit:init` to customize +3. [Skills Reference](/reference/skills/) — Browse all 35 skills diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx index b69b3db..1c0a9cc 100644 --- a/website/src/content/docs/index.mdx +++ b/website/src/content/docs/index.mdx @@ -3,13 +3,13 @@ title: Claude Kit description: The development-workflow plugin for Claude Code. 35 skills across a 6-phase workflow, 24 agents, 7 modes — install as a plugin and go. Free forever. template: splash hero: - tagline: The development-workflow plugin for Claude Code. 35 skills across a 6-phase workflow, 24 agents, 7 modes — install as a plugin and go. Free forever. + tagline: A development-workflow plugin for Claude Code. 35 skills across a 6-phase spine — Think, Review, Build, Ship, Maintain, Setup — plus 24 agents and 7 modes. Free, open source. image: dark: ../../assets/hero-dark.svg light: ../../assets/hero-light.svg actions: - text: Get Started - link: /claudekit/getting-started/introduction/ + link: /getting-started/introduction/ icon: right-arrow variant: primary - text: View on GitHub @@ -20,30 +20,32 @@ hero: import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; -## Ship Faster. For Free. - -Claude Kit transforms Claude Code into a production-ready AI development team. Pre-built skills, specialized agents, and intelligent modes — all open source. +## Four layers, one plugin - - A 6-phase workflow spine (Think → Review → Build → Ship → Maintain → Setup). 13 user-invocable spine skills plus 22 supporting skills that auto-trigger by context. - - - Specialized subagents for code review, testing, database design, security auditing, UI/UX, plan review, and more — each with focused expertise. - - - Switch between brainstorm, implementation, review, deep research, and more. Each mode optimizes Claude's behavior for your task. - - - Real-time docs via Context7, persistent memory, browser testing, and structured reasoning via Model Context Protocol. - + + + + ---- - -## Quick Start - -Get up and running in under 2 minutes: +## Install in 2 minutes ```bash # Add the marketplace @@ -56,106 +58,43 @@ Get up and running in under 2 minutes: /claudekit:init ``` -Skills trigger automatically based on what you're doing. Ask Claude to brainstorm a feature, write a plan, debug an error, or review code — the right skills activate without any commands needed. +Skills trigger automatically based on what you're doing. Ask Claude to brainstorm a feature, write a plan, debug an error, or review code — the right skills activate without any commands. ---- +## Why Claude Kit -## Why Claude Kit? +Raw Claude Code is powerful but brittle. Long sessions spiral, output quality drifts between runs, every session starts from scratch, and Claude has no built-in sense of your team's patterns. -### The Problem +| Problem | What Claude Kit adds | +|---------|----------------------| +| Context spirals | Fresh subagents per task; structured 6-phase flow | +| Inconsistent output | TDD enforcement + verification-before-completion gates | +| No structure | Skills that auto-trigger on intent, not slash commands | +| Missing expertise | 24 specialized agents; project-level rules and modes | -Working with Claude Code is powerful, but raw Claude has limitations: +## The 6-phase workflow -- **Context Spirals** — Token budgets run out, context gets lost mid-task -- **Inconsistent Output** — Quality varies between sessions -- **No Structure** — Every session starts from scratch -- **Missing Expertise** — Claude doesn't know your team's patterns and standards +| Phase | What happens | Example skills | +|-------|-------------|----------------| +| **Think** | Clarify the problem, pick an approach | `brainstorming`, `writing-plans` | +| **Review** | Pressure-test the plan before coding | `autoplan`, `plan-eng-review`, `plan-ceo-review` | +| **Build** | Execute with TDD, dispatch subagents, verify | `feature-workflow`, `test-driven-development` | +| **Ship** | Commit, review, PR, changelog | `finishing-a-development-branch`, `git-workflows` | +| **Maintain** | Debug, refactor, trace root causes | `systematic-debugging`, `root-cause-tracing` | +| **Setup** | Install rules, modes, hooks, MCP | `init` | -### The Solution +[Explore the workflows →](/workflows/planning-and-building/) -Claude Kit provides the structure, patterns, and automation that makes Claude Code production-ready: - - - - Say "fix this bug" and the systematic-debugging skill activates. Say "plan this feature" and brainstorming + writing-plans kick in. No commands to memorize. - - - Delegate code review, security audits, testing, and documentation to focused subagents that work in parallel. - - - Built-in TDD enforcement, verification before completion, and code review workflows ensure every output meets your standards. - - - Add your own skills, agents, and modes. Claude Kit is a template, not a black box. - - - ---- - -## How It Works - -Claude Kit uses three layers that work together: +## Ready to ship faster? - - - - ---- - -## Development Workflows - -Claude Kit connects skills and agents into complete workflows: - -| Workflow | What Happens | -|----------|-------------| -| **Planning & Building** | Brainstorm requirements, write implementation plans, execute with subagents | -| **Testing & Debugging** | TDD enforcement, systematic debugging, root cause tracing, verification | -| **Reviewing & Shipping** | Code review, git workflows, PR creation, changelog generation | - -[Explore workflows →](/claudekit/workflows/planning-and-building/) - ---- - -## Ready to Ship Faster? - - - - - - diff --git a/website/src/content/docs/reference/modes.md b/website/src/content/docs/reference/modes.md index 1e3e96b..8d1974a 100644 --- a/website/src/content/docs/reference/modes.md +++ b/website/src/content/docs/reference/modes.md @@ -174,4 +174,4 @@ Claude coordinates multiple agents: ## Customizing Modes -After running `/claudekit:init`, mode files are markdown in `.claude/modes/`. You can edit the installed modes or create new ones. See [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) for details. +After running `/claudekit:init`, mode files are markdown in `.claude/modes/`. You can edit the installed modes or create new ones. See [Creating Agents & Modes](/customization/creating-agents-and-modes/) for details. diff --git a/website/src/content/docs/workflows/planning-and-building.md b/website/src/content/docs/workflows/planning-and-building.md index a0d4c5c..9a61203 100644 --- a/website/src/content/docs/workflows/planning-and-building.md +++ b/website/src/content/docs/workflows/planning-and-building.md @@ -192,6 +192,6 @@ These skills activate automatically during planning and building: ## Related Pages -- [Testing & Debugging](/claudekit/workflows/testing-and-debugging/) — TDD and debugging workflows -- [Reviewing & Shipping](/claudekit/workflows/reviewing-and-shipping/) — Code review and git workflows -- [Skills Reference](/claudekit/reference/skills/) — All 35 skills +- [Testing & Debugging](/workflows/testing-and-debugging/) — TDD and debugging workflows +- [Reviewing & Shipping](/workflows/reviewing-and-shipping/) — Code review and git workflows +- [Skills Reference](/reference/skills/) — All 35 skills diff --git a/website/src/content/docs/workflows/reviewing-and-shipping.md b/website/src/content/docs/workflows/reviewing-and-shipping.md index 3c91734..772c336 100644 --- a/website/src/content/docs/workflows/reviewing-and-shipping.md +++ b/website/src/content/docs/workflows/reviewing-and-shipping.md @@ -142,6 +142,6 @@ The git-workflows skill generates changelogs from conventional commits: ## Related Pages -- [Planning & Building](/claudekit/workflows/planning-and-building/) — Brainstorm, plan, execute -- [Testing & Debugging](/claudekit/workflows/testing-and-debugging/) — TDD and debugging workflows -- [Skills Reference](/claudekit/reference/skills/) — All 35 skills +- [Planning & Building](/workflows/planning-and-building/) — Brainstorm, plan, execute +- [Testing & Debugging](/workflows/testing-and-debugging/) — TDD and debugging workflows +- [Skills Reference](/reference/skills/) — All 35 skills diff --git a/website/src/content/docs/workflows/testing-and-debugging.md b/website/src/content/docs/workflows/testing-and-debugging.md index d784177..fbbe34b 100644 --- a/website/src/content/docs/workflows/testing-and-debugging.md +++ b/website/src/content/docs/workflows/testing-and-debugging.md @@ -140,6 +140,6 @@ Database layer: Constraints (NOT NULL, UNIQUE, CHECK) ## Related Pages -- [Planning & Building](/claudekit/workflows/planning-and-building/) — Brainstorm, plan, execute -- [Reviewing & Shipping](/claudekit/workflows/reviewing-and-shipping/) — Code review and git workflows -- [Skills Reference](/claudekit/reference/skills/) — All 35 skills +- [Planning & Building](/workflows/planning-and-building/) — Brainstorm, plan, execute +- [Reviewing & Shipping](/workflows/reviewing-and-shipping/) — Code review and git workflows +- [Skills Reference](/reference/skills/) — All 35 skills diff --git a/website/src/styles/custom.css b/website/src/styles/custom.css index a08ff5a..47546a3 100644 --- a/website/src/styles/custom.css +++ b/website/src/styles/custom.css @@ -1,180 +1,154 @@ -/* Ocean Theme - Custom Starlight Styles */ - -/* Color Palette: - Primary: Deep Navy #0f172a - Accent: Cyan #06b6d4 - Secondary: Slate #64748b - Background: #020617 -*/ +/* Claude Kit — Amber & Forest theme + Accent: amber (workflow progress) + Secondary: forest green (success/shipped state) + Fonts: IBM Plex Sans + IBM Plex Mono */ :root { - /* Light mode overrides */ - --sl-color-accent-low: #e0f2fe; - --sl-color-accent: #0891b2; - --sl-color-accent-high: #164e63; - --sl-color-white: #0f172a; - --sl-color-gray-1: #1e293b; - --sl-color-gray-2: #334155; - --sl-color-gray-3: #475569; - --sl-color-gray-4: #64748b; - --sl-color-gray-5: #94a3b8; - --sl-color-gray-6: #cbd5e1; - --sl-color-black: #f8fafc; + --sl-font: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --sl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - /* Text colors */ - --sl-color-text: #0f172a; - --sl-color-text-accent: #0891b2; + --ck-amber-50: #fffbeb; + --ck-amber-100: #fef3c7; + --ck-amber-400: #fbbf24; + --ck-amber-500: #f59e0b; + --ck-amber-600: #d97706; + --ck-amber-700: #b45309; + --ck-amber-950: #422006; + + --ck-green-400: #4ade80; + --ck-green-600: #16a34a; + --ck-green-800: #166534; + --ck-green-50: #f0fdf4; + + --ck-ink-950: #0a0f0a; + --ck-ink-900: #141a14; + --ck-ink-800: #1c241c; + --ck-stone-200: #e7e5e4; + --ck-stone-400: #a8a29e; + --ck-stone-600: #57534e; + + /* Light mode (Starlight vars) */ + --sl-color-accent-low: var(--ck-amber-100); + --sl-color-accent: var(--ck-amber-600); + --sl-color-accent-high: var(--ck-amber-700); + --sl-color-white: #0a0a0a; + --sl-color-gray-1: #1c1917; + --sl-color-gray-2: #292524; + --sl-color-gray-3: #44403c; + --sl-color-gray-4: #57534e; + --sl-color-gray-5: #78716c; + --sl-color-gray-6: #d6d3d1; + --sl-color-gray-7: #e7e5e4; + --sl-color-black: #fffbeb; + + --sl-color-bg: #fffbeb; + --sl-color-bg-nav: #ffffff; + --sl-color-bg-sidebar: #fdf8e7; + --sl-color-bg-inline-code: #fef3c7; + + --sl-color-text: #1c1917; + --sl-color-text-accent: var(--ck-amber-700); + --sl-color-hairline-light: #f5f1e3; + --sl-color-hairline: var(--ck-stone-200); } :root[data-theme='dark'] { - /* Dark mode - Ocean theme */ - --sl-color-accent-low: #164e63; - --sl-color-accent: #06b6d4; - --sl-color-accent-high: #67e8f9; - --sl-color-white: #f8fafc; - --sl-color-gray-1: #e2e8f0; - --sl-color-gray-2: #cbd5e1; - --sl-color-gray-3: #94a3b8; - --sl-color-gray-4: #64748b; - --sl-color-gray-5: #475569; - --sl-color-gray-6: #1e293b; - --sl-color-black: #020617; + --sl-color-accent-low: var(--ck-amber-950); + --sl-color-accent: var(--ck-amber-400); + --sl-color-accent-high: #fcd34d; + --sl-color-white: #f5f5f4; + --sl-color-gray-1: #e7e5e4; + --sl-color-gray-2: #d6d3d1; + --sl-color-gray-3: #a8a29e; + --sl-color-gray-4: #78716c; + --sl-color-gray-5: #57534e; + --sl-color-gray-6: #292524; + --sl-color-gray-7: #1c1917; + --sl-color-black: var(--ck-ink-950); - /* Text colors */ - --sl-color-text: #f8fafc; - --sl-color-text-accent: #22d3ee; + --sl-color-bg: var(--ck-ink-950); + --sl-color-bg-nav: var(--ck-ink-900); + --sl-color-bg-sidebar: var(--ck-ink-900); + --sl-color-bg-inline-code: #292524; - /* Background */ - --sl-color-bg: #020617; - --sl-color-bg-nav: #0f172a; - --sl-color-bg-sidebar: #0f172a; - --sl-color-hairline-light: #1e293b; - --sl-color-hairline: #334155; + --sl-color-text: #f5f5f4; + --sl-color-text-accent: var(--ck-amber-400); + --sl-color-hairline-light: #1c241c; + --sl-color-hairline: #292524; } -/* Custom styling for hero section */ -.hero { - background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #164e63 100%); -} - -/* Code blocks */ +/* Code blocks match the palette */ :root[data-theme='dark'] .expressive-code { - --ec-codeBg: #0f172a; - --ec-codeFg: #e2e8f0; - --ec-codeSelBg: #1e293b; - --ec-codeBrdCol: #1e293b; + --ec-codeBg: var(--ck-ink-900); + --ec-codeFg: #e7e5e4; + --ec-codeSelBg: #292524; + --ec-codeBrdCol: #292524; } -/* Sidebar active state */ -:root[data-theme='dark'] [data-current='true'] { - background: linear-gradient(90deg, transparent, #164e6320); - border-left: 2px solid var(--sl-color-accent); +/* Sidebar active-state — works in both themes now */ +[data-current='true'] { + background: linear-gradient(90deg, transparent, var(--sl-color-accent-low) 120%); + border-inline-start: 2px solid var(--sl-color-accent); } -/* Links */ -a:not([class]) { +/* Links inside prose */ +.sl-markdown-content a:not(.sl-link-card):not(.sl-anchor-link) { color: var(--sl-color-text-accent); + text-decoration-color: color-mix(in srgb, var(--sl-color-text-accent) 35%, transparent); + text-underline-offset: 3px; + transition: text-decoration-color 160ms ease; +} +.sl-markdown-content a:not(.sl-link-card):not(.sl-anchor-link):hover { + text-decoration-color: var(--sl-color-text-accent); } -a:not([class]):hover { - color: var(--sl-color-accent-high); -} - -/* Buttons */ +/* Primary hero button — quietly lifted */ .sl-link-button { - transition: all 0.2s ease; + transition: transform 160ms ease, box-shadow 160ms ease; } - -.sl-link-button:hover { +.sl-link-button.primary:hover { transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); + box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--sl-color-accent) 55%, transparent); } -/* Cards in docs */ -.card { - background: var(--sl-color-bg-nav); - border: 1px solid var(--sl-color-hairline); - border-radius: 0.5rem; - padding: 1.5rem; - transition: border-color 0.2s ease; +/* Subtle tonal rhythm on the splash page */ +.hero { + background: + radial-gradient(ellipse 80% 60% at 50% 0%, + color-mix(in srgb, var(--sl-color-accent) 12%, transparent) 0%, + transparent 70%); } -.card:hover { - border-color: var(--sl-color-accent); +/* Editorial headings — tighter tracking on Plex Sans */ +h1, h2, h3, h4 { + letter-spacing: -0.015em; } -/* Landing page specific */ -.landing-hero-gradient { - background: radial-gradient(ellipse at top, #164e63 0%, #020617 70%); +/* Inline code reads as a warm badge, not a cold chip */ +.sl-markdown-content :not(pre) > code { + font-size: 0.9em; + padding: 0.15em 0.4em; + border-radius: 4px; + background: var(--sl-color-bg-inline-code); + color: var(--sl-color-text-accent); + border: 1px solid color-mix(in srgb, var(--sl-color-accent) 20%, transparent); } -/* Feature cards */ -.feature-card { - background: linear-gradient(180deg, #0f172a 0%, #020617 100%); - border: 1px solid #1e293b; - border-radius: 0.75rem; - padding: 2rem; - transition: all 0.3s ease; +/* Tables — a little more breathing room, aligns with editorial voice */ +.sl-markdown-content table { + font-size: 0.95em; +} +.sl-markdown-content th { + font-weight: 600; + letter-spacing: -0.01em; } -.feature-card:hover { - border-color: #06b6d4; - transform: translateY(-4px); - box-shadow: 0 20px 40px -12px rgba(6, 182, 212, 0.15); -} - -/* Stats section */ -.stat-number { - font-size: 3rem; - font-weight: 700; - background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -/* Code snippet styling */ -.code-snippet { - background: #0f172a; - border: 1px solid #1e293b; - border-radius: 0.5rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; -} - -/* Badge styling */ -.badge { - display: inline-flex; - align-items: center; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 500; - background: #164e63; - color: #67e8f9; -} - -.badge-free { - background: #065f46; - color: #6ee7b7; -} - -/* Terminal animation */ -@keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -.cursor-blink { - animation: blink 1s infinite; -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .stat-number { - font-size: 2rem; - } - - .feature-card { - padding: 1.5rem; +/* Respect user motion preference — hero SVG animate, link-button lift, etc. */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; } }