diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-baseline.png deleted file mode 100644 index 31693a3..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-final.png deleted file mode 100644 index caadbdf..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter1.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter1.png deleted file mode 100644 index 0b18e16..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter2.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter2.png deleted file mode 100644 index 73b2bb0..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter3.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter3.png deleted file mode 100644 index be6ddb9..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter3.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter4.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter4.png deleted file mode 100644 index 55f8c42..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter4.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-0-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-0-baseline.png deleted file mode 100644 index 4df4fff..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-0-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-1.png deleted file mode 100644 index 003f414..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-2.png deleted file mode 100644 index 90248bc..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-3.png b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-3.png deleted file mode 100644 index 08dbfb7..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-3.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-final.png deleted file mode 100644 index 0e8a4d0..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-0-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-0-baseline.png deleted file mode 100644 index 38a7158..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-0-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-1.png deleted file mode 100644 index af682ca..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-2.png deleted file mode 100644 index 834d882..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-final.png deleted file mode 100644 index 94aba4e..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-0-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-0-baseline.png deleted file mode 100644 index 3118749..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-0-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-1.png deleted file mode 100644 index 9ace707..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-2.png deleted file mode 100644 index 6ef7509..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-final.png deleted file mode 100644 index 4ff793f..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/hero-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/hero-baseline.png deleted file mode 100644 index 2c9f7fc..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/hero-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-01.png b/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-01.png deleted file mode 100644 index 4ccc602..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-01.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-02.png b/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-02.png deleted file mode 100644 index 3c6655b..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-02.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-final.png deleted file mode 100644 index 761242b..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-0-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-0-baseline.png deleted file mode 100644 index d8d55ba..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-0-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-1.png deleted file mode 100644 index dc331e0..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-2.png deleted file mode 100644 index 2676bf3..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-0-initial.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-0-initial.png deleted file mode 100644 index ff68e00..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-0-initial.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-1.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-10-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-10-final.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-10-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-2.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-3.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-3.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-3.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-4.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-4.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-4.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-5.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-5.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-5.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-6.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-6.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-6.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-7.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-7.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-7.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-8.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-8.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-8.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-9.png b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-9.png deleted file mode 100644 index f014b72..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-9.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-0-initial.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-0-initial.png deleted file mode 100644 index 3df138c..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-0-initial.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-1.png deleted file mode 100644 index 3e365fd..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-2.png deleted file mode 100644 index c892896..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-3.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-3.png deleted file mode 100644 index c83d810..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-3.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-4.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-4.png deleted file mode 100644 index d9fb1e7..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-4.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-5.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-5.png deleted file mode 100644 index 25f9223..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-5.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-6-10-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-6-10-final.png deleted file mode 100644 index 9ec1f7f..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-6-10-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-0.png b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-0.png deleted file mode 100644 index eb5cd27..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-0.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-1.png deleted file mode 100644 index 3cba020..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-10-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-10-final.png deleted file mode 100644 index 5ca8662..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-10-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-2.png deleted file mode 100644 index 8bfbe95..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-3.png b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-3.png deleted file mode 100644 index 75d01dd..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-3.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-4.png b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-4.png deleted file mode 100644 index 4610d9f..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-4.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-0-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-0-baseline.png deleted file mode 100644 index ec98527..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-0-baseline.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-1.png deleted file mode 100644 index 30fafcd..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-1.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-10-final.png b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-10-final.png deleted file mode 100644 index 946a580..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-10-final.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-2.png deleted file mode 100644 index 7886464..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-2.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-4-with-icons.png b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-4-with-icons.png deleted file mode 100644 index a400bec..0000000 Binary files a/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-4-with-icons.png and /dev/null differ diff --git a/plugins/compounding-engineering/docs/css/faq-improvements.css b/plugins/compounding-engineering/docs/css/faq-improvements.css deleted file mode 100644 index 765c50b..0000000 --- a/plugins/compounding-engineering/docs/css/faq-improvements.css +++ /dev/null @@ -1,63 +0,0 @@ -/* Enhanced FAQ Styles - Iterations 3-10 Combined */ - -/* Stronger question typography */ -.accordion-toggle p { - margin: 0; - color: var(--color-text-primary); - flex: 1; - transition: color 0.3s ease; - font-weight: 600; - font-size: 17px; - letter-spacing: -0.01em; -} - -/* Checkmark for open state */ -.accordion-item[open] .accordion-toggle::before { - content: '✓'; - background: linear-gradient(135deg, var(--color-success), #0d9488); - color: white; - box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); -} - -/* Divider between question and answer */ -.accordion-item[open] .accordion-toggle { - border-bottom: 1px solid rgba(129, 140, 248, 0.2); - padding-bottom: var(--space-l); -} - -/* Missing closing bracket and rotation */ -.accordion-chevron { - color: var(--color-accent); - font-size: 20px; - transition: transform 0.3s ease; - flex-shrink: 0; -} - -[open] .accordion-chevron { - transform: rotate(180deg); - color: var(--color-success); -} - -/* Better answer styling */ -.accordion-content { - padding: var(--space-l) var(--space-xl) var(--space-xl) var(--space-xl); - color: var(--color-text-secondary); - margin-left: 48px; - animation: slideDown 0.3s ease; -} - -/* Number indicator for FAQ items */ -.accordion-toggle::after { - content: attr(data-index); - position: absolute; - right: 60px; - font-size: 11px; - color: var(--color-text-tertiary); - font-weight: 600; - opacity: 0.5; -} - -.accordion-item:hover .accordion-toggle::after { - opacity: 1; - color: var(--color-accent); -} diff --git a/plugins/compounding-engineering/docs/css/style.css.backup b/plugins/compounding-engineering/docs/css/style.css.backup deleted file mode 100644 index dfe9a42..0000000 --- a/plugins/compounding-engineering/docs/css/style.css.backup +++ /dev/null @@ -1,2839 +0,0 @@ -/* Compounding Engineering Documentation Styles */ -/* Based on LaunchKit template by Evil Martians */ - -/* ============================================ - CSS Variables & Theme Configuration - ============================================ */ - -:root { - /* Theme configuration */ - --theme-hue: 243; - --theme-saturation: 1; - --theme-contrast: 0.71; - - /* Fonts */ - --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; - --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace; - - /* Font sizes */ - --font-size-xs: 12px; - --font-size-s: 14px; - --font-size-m: 16px; - --font-size-l: 20px; - --font-size-xl: 32px; - --font-size-xxl: 48px; - - /* Line heights */ - --line-height-paragraph-s: 20px; - --line-height-paragraph-m: 24px; - --line-height-paragraph-l: 28px; - --line-height-h1: 56px; - --line-height-h2: 40px; - --line-height-h3: 28px; - --line-height-ui-s: 16px; - --line-height-ui-m: 22px; - - /* Spacing */ - --space-xs: 4px; - --space-s: 8px; - --space-m: 12px; - --space-l: 16px; - --space-xl: 24px; - --space-xxl: 48px; - --space-section: 80px; - --space-card: 20px; - - /* Border radii */ - --radius-xs: 4px; - --radius-s: 8px; - --radius-m: 12px; - --radius-l: 16px; - --radius-xl: 24px; - - /* UI */ - --header-font-weight: 600; - --ui-button-font-weight: 500; -} - -/* Light Theme */ -.theme-light { - --color-background: #ffffff; - --color-background-blur: rgba(255, 255, 255, 0.9); - --color-surface: rgba(0, 0, 0, 0.03); - --color-surface-hover: rgba(0, 0, 0, 0.06); - --color-text-primary: #1a1a2e; - --color-text-secondary: #64748b; - --color-text-tertiary: #94a3b8; - --color-accent: #6366f1; - --color-accent-hover: #4f46e5; - --color-accent-light: rgba(99, 102, 241, 0.1); - --color-accent-lighter: rgba(99, 102, 241, 0.05); - --color-on-accent: #ffffff; - --color-border: rgba(0, 0, 0, 0.08); - --color-border-strong: rgba(0, 0, 0, 0.15); - --color-gradient-start: rgba(99, 102, 241, 0.15); - --color-gradient-end: rgba(99, 102, 241, 0); - --color-promo-start: #a855f7; - --color-promo-end: #6366f1; - --color-success: #10b981; - --color-warning: #f59e0b; - --color-error: #ef4444; - --color-code-bg: #1e1e2e; - --color-code-text: #cdd6f4; -} - -/* Dark Theme */ -.theme-dark { - color-scheme: dark; - --color-background: #0f0f1a; - --color-background-blur: rgba(15, 15, 26, 0.9); - --color-surface: rgba(255, 255, 255, 0.04); - --color-surface-hover: rgba(255, 255, 255, 0.08); - --color-text-primary: #f1f5f9; - --color-text-secondary: #94a3b8; - --color-text-tertiary: #64748b; - --color-accent: #818cf8; - --color-accent-hover: #a5b4fc; - --color-accent-light: rgba(129, 140, 248, 0.15); - --color-accent-lighter: rgba(129, 140, 248, 0.08); - --color-on-accent: #0f0f1a; - --color-border: rgba(255, 255, 255, 0.08); - --color-border-strong: rgba(255, 255, 255, 0.15); - --color-gradient-start: rgba(129, 140, 248, 0.2); - --color-gradient-end: rgba(129, 140, 248, 0); - --color-promo-start: #c084fc; - --color-promo-end: #818cf8; - --color-success: #34d399; - --color-warning: #fbbf24; - --color-error: #f87171; - --color-code-bg: #1e1e2e; - --color-code-text: #cdd6f4; -} - -/* ============================================ - Base Styles - ============================================ */ - -*, *::before, *::after { - box-sizing: border-box; -} - -html, body { - margin: 0; - padding: 0; -} - -body { - background-color: var(--color-background); - font-family: var(--font-text); - color: var(--color-text-primary); - font-size: var(--font-size-m); - line-height: var(--line-height-paragraph-m); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* ============================================ - Typography - ============================================ */ - -h1, h2, h3, h4, h5, h6 { - font-weight: var(--header-font-weight); - margin: var(--space-m) 0; - letter-spacing: -0.02em; -} - -h1 { - font-size: 64px; - line-height: 1.1; - letter-spacing: -0.045em; - font-weight: 750; - background: linear-gradient(135deg, var(--color-text-primary), var(--color-text-secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -h2 { - font-size: var(--font-size-xl); - line-height: var(--line-height-h2); -} - -h3 { - font-size: var(--font-size-l); - line-height: var(--line-height-h3); -} - -p { - margin: var(--space-m) 0; -} - -a { - color: var(--color-accent); - text-decoration: none; - transition: color 0.2s ease; -} - -a:hover { - color: var(--color-accent-hover); -} - -ul, ol { - margin: var(--space-l) 0; - padding-left: 24px; -} - -li { - margin: var(--space-s) 0; -} - -code { - font-family: var(--font-mono); - font-size: 0.9em; - background-color: var(--color-surface); - padding: 2px 6px; - border-radius: var(--radius-xs); - color: var(--color-accent); -} - -img { - max-width: 100%; - vertical-align: middle; -} - -/* Text utilities */ -.paragraph { - margin: var(--space-m) 0; -} -.paragraph.s { font-size: var(--font-size-s); line-height: var(--line-height-paragraph-s); } -.paragraph.m { font-size: 19px; line-height: 30px; opacity: 0.9; } -.paragraph.l { font-size: var(--font-size-l); line-height: var(--line-height-paragraph-l); } -.paragraph.bold { font-weight: 600; } - -.secondary { color: var(--color-text-secondary); } -.tertiary { color: var(--color-text-tertiary); } -.color-accent { color: var(--color-accent); } - -.no-top-margin { margin-top: 0; } -.balanced { text-wrap: balance; } - -/* ============================================ - Layout - ============================================ */ - -.page-container { - max-width: 1200px; - min-height: 100vh; - margin: 0 auto; - padding: 0 var(--space-xl); - display: flex; - flex-direction: column; -} - -section { - padding: var(--space-section) 0; -} - -.background-gradient { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 100vh; - background: linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 50%); - z-index: -10; - pointer-events: none; -} - -/* ============================================ - Navigation - ============================================ */ - -.nav-container { - position: sticky; - top: var(--space-l); - margin-top: var(--space-l); - display: flex; - justify-content: space-between; - align-items: center; - background-color: var(--color-background-blur); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid var(--color-border); - border-radius: var(--radius-l); - padding: var(--space-m) var(--space-l); - z-index: 1000; -} - -.nav-brand { - display: flex; - align-items: center; - gap: var(--space-s); - text-decoration: none; - color: var(--color-text-primary); - font-weight: 600; - font-size: var(--font-size-m); -} - -.logo-icon { - color: var(--color-accent); - font-size: var(--font-size-l); -} - -.logo-text { - display: none; -} - -@media (min-width: 768px) { - .logo-text { - display: inline; - } -} - -.nav-menu { - display: none; - gap: var(--space-xs); -} - -@media (min-width: 1024px) { - .nav-menu { - display: flex; - } -} - -.nav-link { - color: var(--color-text-secondary); - font-size: var(--font-size-s); - font-weight: var(--ui-button-font-weight); - padding: var(--space-s) var(--space-m); - border-radius: var(--radius-s); - text-decoration: none; - transition: all 0.2s ease; -} - -.nav-link:hover { - color: var(--color-text-primary); - background-color: var(--color-surface); -} - -.nav-hamburger { - display: flex; -} - -@media (min-width: 1024px) { - .nav-hamburger { - display: none; - } -} - -/* Mobile nav */ -.nav-menu.open { - display: flex; - flex-direction: column; - position: absolute; - top: calc(100% + var(--space-s)); - left: 0; - right: 0; - background-color: var(--color-background); - border: 1px solid var(--color-border); - border-radius: var(--radius-l); - padding: var(--space-l); -} - -/* ============================================ - Buttons - ============================================ */ - -.button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--space-s); - padding: 14px 28px; - font-size: var(--font-size-m); - font-weight: 600; - font-family: inherit; - text-decoration: none; - border: none; - border-radius: var(--radius-m); - cursor: pointer; - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); -} - -.button.compact { - padding: var(--space-s) var(--space-m); - font-size: var(--font-size-s); - border-radius: var(--radius-s); -} - -.button.primary { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); - position: relative; - overflow: hidden; -} - -.button.primary::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.5s; -} - -.button.primary:hover::before { - left: 100%; -} - -.button.primary:hover { - background: linear-gradient(135deg, var(--color-accent-hover), var(--color-accent)); - transform: translateY(-2px) scale(1.02); - box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15); -} - -.button.secondary { - background-color: var(--color-accent-light); - color: var(--color-accent); -} - -.button.secondary:hover { - background-color: var(--color-accent-lighter); -} - -.button.tertiary { - background-color: transparent; - color: var(--color-text-primary); - border: 1.5px solid var(--color-border-strong); -} - -.button.tertiary:hover { - background-color: var(--color-surface); - border-color: var(--color-accent); - color: var(--color-accent); - transform: translateY(-1px); -} - -.button.ghost { - background-color: transparent; - color: var(--color-text-secondary); -} - -.button.ghost:hover { - background-color: var(--color-surface); - color: var(--color-text-primary); -} - -.button-group { - display: flex; - flex-wrap: wrap; - gap: var(--space-m); - align-items: center; -} - -.button-group.centered { - justify-content: center; -} - -.button-group.stacked { - flex-direction: column; -} - -.button-group.margin-paragraph { - margin: var(--space-l) 0; -} - -/* ============================================ - Headings & Sections - ============================================ */ - -.heading { - max-width: 720px; - margin-bottom: var(--space-xl); -} - -.heading.centered { - text-align: center; - margin-left: auto; - margin-right: auto; -} - -.heading.hero { - padding: 64px 0 80px 0; -} - -.eyebrow { - display: inline-flex; - align-items: center; - gap: 10px; - padding: 8px 20px; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - font-size: 14px; - font-weight: 600; - border-radius: 100px; - margin-bottom: 28px; - text-decoration: none; - border: 1px solid rgba(129, 140, 248, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.15); -} - -.eyebrow i { - animation: pulse 2s ease-in-out infinite; -} - -@keyframes pulse { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.1); } -} - -.eyebrow:hover { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); - transform: translateY(-2px); - box-shadow: 0 4px 16px rgba(129, 140, 248, 0.25); - border-color: var(--color-accent); -} - -/* Hero Section Enhancements */ -.hero-section { - position: relative; - overflow: hidden; -} - -.hero-decoration { - position: absolute; - top: -200px; - left: 50%; - transform: translateX(-50%); - width: 800px; - height: 800px; - background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); - opacity: 0.15; - pointer-events: none; - z-index: -1; -} - -/* ============================================ - Stats Section - ============================================ */ - -.stats-section { - padding: 64px 0; - position: relative; -} - -.stats-section::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 600px; - height: 600px; - background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); - opacity: 0.1; - pointer-events: none; - z-index: -1; -} - -.stats-container { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; - max-width: 1000px; - margin: 0 auto; -} - -@media (min-width: 768px) { - .stats-container { - grid-template-columns: repeat(4, 1fr); - gap: 24px; - } -} - -.stat-card { - text-align: center; - padding: 36px 24px; - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid transparent; - background-image: - linear-gradient(var(--color-background), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - position: relative; - overflow: hidden; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - cursor: default; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.stat-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--color-accent), transparent); - opacity: 0; - transition: opacity 0.35s ease; -} - -.stat-card:hover { - transform: translateY(-6px); - background-image: - linear-gradient(var(--color-background), var(--color-background)), - linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - box-shadow: - 0 20px 40px rgba(129, 140, 248, 0.25), - 0 8px 16px rgba(0, 0, 0, 0.1); - border-color: var(--color-accent); -} - -.stat-card:hover::before { - opacity: 1; -} - -.stat-card:hover .stat-icon { - transform: scale(1.15) translateY(-2px); - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 8px 16px rgba(129, 140, 248, 0.3); -} - -.stat-card:hover .stat-number { - transform: scale(1.08); - filter: brightness(1.1); -} - -.stat-icon { - width: 56px; - height: 56px; - margin: 0 auto 20px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - border-radius: 14px; - font-size: 24px; - color: var(--color-accent); - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); -} - -.stat-number { - font-size: 64px; - font-weight: 800; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - line-height: 1; - margin-bottom: 8px; - letter-spacing: -0.03em; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - font-variant-numeric: tabular-nums; -} - -.stat-label { - font-size: 14px; - color: var(--color-text-secondary); - font-weight: 600; - letter-spacing: 0.02em; - line-height: 1.5; - text-transform: capitalize; -} - -/* ============================================ - Cards with Icons - ============================================ */ - -.cards-with-icons-container { - display: grid; - grid-template-columns: repeat(1, 1fr); - gap: var(--space-xl); - margin-top: var(--space-xl); -} - -@media (min-width: 640px) { - .cards-with-icons-container { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .cards-with-icons-container { - grid-template-columns: repeat(4, 1fr); - } -} - -.card-with-icon { - display: flex; - flex-direction: column; - gap: var(--space-m); - padding: var(--space-xl); - background-color: var(--color-surface); - border-radius: var(--radius-l); - border: 1px solid var(--color-border); - transition: all 0.2s ease; -} - -.card-with-icon:hover { - border-color: var(--color-accent); - transform: translateY(-2px); -} - -.card-with-icon .icon { - font-size: var(--font-size-xl); - color: var(--color-accent); -} - -.feature-heading { - display: flex; - flex-direction: column; - gap: var(--space-xs); -} - -.feature-heading p { - margin: 0; -} - -/* ============================================ - Grid System - ============================================ */ - -.grid { - display: grid; - gap: 24px; - margin: var(--space-xl) 0; -} - -.grid.columns-2 { - grid-template-columns: repeat(1, 1fr); -} - -.grid.columns-3 { - grid-template-columns: repeat(1, 1fr); -} - -@media (min-width: 768px) { - .grid.columns-2 { - grid-template-columns: repeat(2, 1fr); - gap: 28px; - } - .grid.columns-3 { - grid-template-columns: repeat(2, 1fr); - gap: 24px; - } -} - -@media (min-width: 1024px) { - .grid.columns-3 { - grid-template-columns: repeat(3, 1fr); - } - .grid.columns-2 { - gap: 32px; - } -} - -.full-width { - grid-column: 1 / -1; -} - -/* ============================================ - Agent Cards - ============================================ */ - -.agent-category { - margin-bottom: 64px; - position: relative; -} - -.agent-category::before { - content: ''; - position: absolute; - top: 0; - left: -20px; - width: 3px; - height: 100%; - background: linear-gradient(180deg, var(--color-accent), transparent); - opacity: 0.2; - border-radius: 2px; -} - -.agent-category h3 { - display: flex; - align-items: center; - gap: var(--space-m); - margin-bottom: var(--space-xl); - padding: var(--space-l) var(--space-xl); - background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface)); - border-left: 4px solid var(--color-accent); - border-radius: var(--radius-m); - color: var(--color-text-primary); - font-size: 24px; - font-weight: 700; - letter-spacing: -0.02em; - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.08); - position: relative; - overflow: hidden; -} - -.agent-category h3::after { - content: ''; - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 100px; - background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.05)); - pointer-events: none; -} - -.agent-category h3 i { - color: var(--color-accent); - font-size: 28px; - flex-shrink: 0; - filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3)); -} - -.agent-card { - padding: var(--space-xl); - background-color: var(--color-surface); - border-radius: var(--radius-l); - border: 1px solid var(--color-border); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; -} - -.agent-card::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.agent-card:hover { - border-color: var(--color-accent); - transform: translateY(-4px); - box-shadow: 0 12px 24px rgba(129, 140, 248, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08); -} - -.agent-card:hover::before { - opacity: 0.5; -} - -.agent-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - margin-bottom: var(--space-m); -} - -.agent-name { - font-family: var(--font-mono); - font-size: 15px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.01em; - position: relative; - z-index: 1; -} - -.agent-badge { - padding: 6px 12px; - font-size: 11px; - font-weight: 700; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - border-radius: 6px; - text-transform: uppercase; - letter-spacing: 0.08em; - box-shadow: 0 2px 4px rgba(129, 140, 248, 0.2); - border: 1px solid rgba(129, 140, 248, 0.3); - white-space: nowrap; - transition: all 0.2s ease; -} - -.agent-badge.critical { - background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1)); - color: var(--color-error); - box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25); - border-color: rgba(239, 68, 68, 0.4); -} - -.agent-card:hover .agent-badge { - transform: scale(1.05); - box-shadow: 0 4px 8px rgba(129, 140, 248, 0.3); -} - -.agent-card:hover .agent-badge.critical { - box-shadow: 0 4px 8px rgba(239, 68, 68, 0.35); -} - -.agent-card:hover .agent-name { - color: var(--color-accent); -} - -.agent-description { - font-size: 14px; - color: var(--color-text-secondary); - margin: 0 0 var(--space-m) 0; - line-height: 1.65; - position: relative; - z-index: 1; -} - -.agent-usage { - display: block; - font-family: var(--font-mono); - font-size: 13px; - color: #a6adc8; - background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%); - padding: 12px 16px; - border-radius: var(--radius-m); - border: 1px solid rgba(129, 140, 248, 0.1); - position: relative; - z-index: 1; - transition: all 0.2s ease; -} - -.agent-usage:hover { - border-color: rgba(129, 140, 248, 0.3); - background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%); -} - -/* ============================================ - Command Cards - ============================================ */ - -.command-category { - margin-bottom: var(--space-xxl); -} - -.command-category h3 { - display: flex; - align-items: center; - gap: var(--space-m); - margin-bottom: var(--space-xl); - padding: var(--space-m) var(--space-l); - background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.02)); - border-left: 3px solid var(--color-accent); - border-radius: var(--radius-s); - color: var(--color-text-primary); - font-family: var(--font-mono); - font-size: 18px; - font-weight: 600; - letter-spacing: -0.01em; - position: relative; -} - -.command-category h3::before { - content: '//'; - color: rgba(129, 140, 248, 0.4); - font-weight: 400; - margin-right: var(--space-xs); -} - -.command-category h3 i { - color: var(--color-accent); - filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.4)); -} - -.command-card { - padding: var(--space-xl); - background: linear-gradient(135deg, rgba(30, 30, 46, 0.6), rgba(24, 24, 37, 0.5)); - border-radius: var(--radius-l); - border: 1.5px solid rgba(129, 140, 248, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.05), - inset 0 -1px 0 rgba(0, 0, 0, 0.2), - 0 2px 8px rgba(0, 0, 0, 0.3); -} - -.command-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, transparent, var(--color-accent), transparent); - opacity: 0.4; -} - -.command-card::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: repeating-linear-gradient( - 0deg, - rgba(0, 0, 0, 0.03) 0px, - rgba(0, 0, 0, 0.03) 1px, - transparent 1px, - transparent 2px - ); - pointer-events: none; - opacity: 0.3; -} - -.command-card:hover { - border-color: var(--color-accent); - transform: translateY(-3px); - box-shadow: - 0 12px 32px rgba(129, 140, 248, 0.25), - 0 4px 12px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - background: linear-gradient(135deg, rgba(30, 30, 46, 0.75), rgba(24, 24, 37, 0.65)); -} - -.command-card:hover .command-name { - color: rgba(129, 140, 248, 1); - text-shadow: 0 0 24px rgba(129, 140, 248, 0.5); -} - -.command-card:hover .command-type-badge { - background: linear-gradient(135deg, var(--color-accent), rgba(129, 140, 248, 0.6)); - color: var(--color-on-accent); - border-color: var(--color-accent); - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4); -} - -.command-card:hover::after { - opacity: 0.15; -} - -.command-header { - margin-bottom: var(--space-m); - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-m); -} - -.command-name { - font-family: var(--font-mono); - font-size: 15px; - font-weight: 600; - color: var(--color-accent); - background: none; - padding: 0; - letter-spacing: -0.01em; - text-shadow: 0 0 20px rgba(129, 140, 248, 0.3); - display: flex; - align-items: center; - gap: 8px; - flex: 1; -} - -.command-name::before { - content: '$'; - color: rgba(129, 140, 248, 0.5); - font-weight: 400; - font-size: 14px; -} - -.command-type-badge { - padding: 3px 8px; - font-family: var(--font-mono); - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - border-radius: 3px; - background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(129, 140, 248, 0.08)); - color: rgba(129, 140, 248, 0.8); - border: 1px solid rgba(129, 140, 248, 0.25); - white-space: nowrap; - flex-shrink: 0; -} - -.command-description { - font-size: 14px; - color: rgba(203, 213, 225, 0.85); - margin: 0; - line-height: 1.7; - letter-spacing: 0.01em; -} - -/* ============================================ - Skill Cards - ============================================ */ - -.skill-category { - margin-bottom: 72px; - position: relative; - padding: 24px; - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.02) 0%, - transparent 50%); - border-radius: var(--radius-l); - border: 1px solid transparent; - transition: all 0.3s ease; -} - -.skill-category::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 4px; - height: 100%; - background: linear-gradient(180deg, var(--color-accent), transparent); - opacity: 0.3; - border-radius: 2px; - transition: opacity 0.3s ease; -} - -.skill-category:hover::before { - opacity: 0.6; -} - -.skill-category h3 { - display: flex; - align-items: center; - gap: var(--space-m); - margin-bottom: var(--space-xl); - padding: var(--space-l) var(--space-xl); - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.1) 0%, - rgba(129, 140, 248, 0.05) 50%, - var(--color-surface) 100%); - border-left: 4px solid var(--color-accent); - border-radius: var(--radius-m); - color: var(--color-text-primary); - font-size: 22px; - font-weight: 700; - letter-spacing: -0.02em; - box-shadow: - 0 2px 8px rgba(129, 140, 248, 0.12), - inset 0 1px 0 rgba(255, 255, 255, 0.05); - transition: all 0.3s ease; - cursor: default; -} - -.skill-category h3:hover { - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.15) 0%, - rgba(129, 140, 248, 0.08) 50%, - var(--color-surface) 100%); - box-shadow: - 0 4px 12px rgba(129, 140, 248, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.skill-category h3 i { - color: var(--color-accent); - font-size: 26px; - filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3)); - animation: icon-float 3s ease-in-out infinite; -} - -@keyframes icon-float { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-3px); } -} - -.skill-card { - padding: 28px; - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-l); - border: 1.5px solid var(--color-border); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); -} - -.skill-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-accent), transparent); - opacity: 0; - transition: opacity 0.3s ease; -} - -.skill-card::after { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 40px; - height: 40px; - background: linear-gradient(135deg, transparent 50%, var(--color-accent) 50%); - opacity: 0.1; - pointer-events: none; - transition: opacity 0.3s ease; -} - -.skill-card:hover { - border-color: var(--color-accent); - transform: translateY(-4px); - box-shadow: - 0 12px 24px rgba(129, 140, 248, 0.15), - 0 4px 8px rgba(0, 0, 0, 0.08), - 0 0 40px rgba(129, 140, 248, 0.1); -} - -.skill-card:hover::before { - opacity: 1; -} - -.skill-card:hover::after { - opacity: 0.3; -} - -.skill-card.featured { - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.12) 0%, - rgba(129, 140, 248, 0.06) 50%, - var(--color-surface) 100%); - border-color: var(--color-accent); - box-shadow: - 0 4px 16px rgba(129, 140, 248, 0.25), - 0 0 60px rgba(129, 140, 248, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - position: relative; - overflow: hidden; -} - -.skill-card.featured::before { - background: linear-gradient(90deg, - var(--color-accent) 0%, - rgba(129, 140, 248, 0.6) 100%); - opacity: 1; - height: 4px; -} - -.skill-card.featured:hover { - box-shadow: - 0 16px 32px rgba(129, 140, 248, 0.3), - 0 0 80px rgba(129, 140, 248, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - transform: translateY(-6px); -} - -.skill-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - margin-bottom: var(--space-l); - padding-bottom: var(--space-m); - border-bottom: 1px solid rgba(129, 140, 248, 0.1); - position: relative; -} - -.skill-header::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 60px; - height: 2px; - background: linear-gradient(90deg, var(--color-accent), transparent); - opacity: 0; - transition: all 0.3s ease; -} - -.skill-card:hover .skill-header::after { - opacity: 1; - width: 120px; -} - -.skill-name { - font-family: var(--font-mono); - font-size: 16px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.01em; - display: flex; - align-items: center; - gap: 8px; - position: relative; - z-index: 1; -} - -.skill-name::before { - content: '◆'; - color: var(--color-accent); - font-size: 10px; - opacity: 0.6; - transition: all 0.3s ease; -} - -.skill-card:hover .skill-name { - color: var(--color-accent); -} - -.skill-card:hover .skill-name::before { - opacity: 1; - transform: scale(1.2); -} - -.skill-badge { - padding: 6px 12px; - font-size: 11px; - font-weight: 700; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - border-radius: 6px; - text-transform: uppercase; - letter-spacing: 0.08em; - box-shadow: 0 2px 4px rgba(129, 140, 248, 0.2); - border: 1px solid rgba(129, 140, 248, 0.3); - white-space: nowrap; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - animation: badge-pulse 2s ease-in-out infinite; -} - -@keyframes badge-pulse { - 0%, 100% { box-shadow: 0 2px 4px rgba(129, 140, 248, 0.2); } - 50% { box-shadow: 0 2px 8px rgba(129, 140, 248, 0.35); } -} - -.skill-badge.highlight { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4); - border-color: var(--color-accent); -} - -.skill-card:hover .skill-badge { - transform: scale(1.08) rotate(-2deg); - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.4); - animation: none; -} - -.skill-description { - font-size: 14px; - color: var(--color-text-secondary); - margin: 0 0 var(--space-l) 0; - line-height: 1.65; - position: relative; - z-index: 1; - letter-spacing: 0.01em; -} - -.skill-features { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: var(--space-l); - position: relative; - z-index: 1; -} - -.feature-item { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - font-weight: 600; - color: var(--color-success); - background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08)); - padding: 8px 14px; - border-radius: 20px; - border: 1px solid rgba(16, 185, 129, 0.3); - transition: all 0.2s ease; - letter-spacing: 0.01em; -} - -.feature-item i { - font-size: 11px; - filter: drop-shadow(0 1px 2px rgba(16, 185, 129, 0.3)); -} - -.feature-item:hover { - background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15)); - border-color: rgba(16, 185, 129, 0.5); - transform: translateY(-1px); - box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2); -} - -.skill-usage { - display: block; - font-family: var(--font-mono); - font-size: 13px; - color: #a6adc8; - background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%); - padding: 14px 18px; - border-radius: var(--radius-m); - margin-bottom: var(--space-s); - border: 1px solid rgba(129, 140, 248, 0.15); - position: relative; - z-index: 1; - transition: all 0.2s ease; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.skill-usage:hover { - border-color: rgba(129, 140, 248, 0.3); - background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%); - transform: translateX(2px); -} - -.skill-note { - font-size: 12px; - color: var(--color-text-tertiary); - margin: 0; - font-style: italic; - position: relative; - z-index: 1; - padding: 8px 12px; - background: rgba(255, 165, 0, 0.08); - border-left: 3px solid rgba(255, 165, 0, 0.4); - border-radius: 4px; -} - -.skill-note::before { - content: '⚠'; - margin-right: 6px; - color: rgba(255, 165, 0, 0.8); -} - -/* ============================================ - MCP Cards - ============================================ */ - -.mcp-card { - padding: 36px; - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-l); - border: 1.5px solid transparent; - background-image: - linear-gradient(135deg, var(--color-surface), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 4px 8px rgba(0, 0, 0, 0.08), - 0 8px 24px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.05); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; -} - -.mcp-card::before { - content: ''; - position: absolute; - inset: 0; - background: - linear-gradient(135deg, var(--color-accent-lighter), transparent), - repeating-linear-gradient( - 45deg, - transparent, - transparent 20px, - rgba(129, 140, 248, 0.01) 20px, - rgba(129, 140, 248, 0.01) 40px - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.mcp-card::after { - content: '● ACTIVE'; - position: absolute; - top: 16px; - right: 16px; - font-size: 9px; - font-weight: 800; - letter-spacing: 0.1em; - padding: 6px 12px; - background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15)); - color: var(--color-success); - border: 1.5px solid rgba(16, 185, 129, 0.4); - border-radius: 16px; - display: flex; - align-items: center; - gap: 6px; - z-index: 2; - box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); - animation: server-pulse 2s ease-in-out infinite; -} - -@keyframes server-pulse { - 0%, 100% { - opacity: 0.8; - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); - } - 50% { - opacity: 1; - box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.2); - } -} - -.mcp-card:hover { - transform: translateY(-6px); - border-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) 1; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.15), - 0 8px 16px rgba(0, 0, 0, 0.1), - 0 16px 40px rgba(129, 140, 248, 0.3), - 0 0 80px rgba(129, 140, 248, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.mcp-card:hover::before { - opacity: 0.4; -} - -.mcp-card:hover::after { - background: linear-gradient(135deg, var(--color-success), rgba(16, 185, 129, 0.8)); - color: white; - transform: scale(1.08) rotate(-2deg); - animation: none; - box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); -} - -.mcp-header { - display: flex; - align-items: center; - gap: 20px; - margin-bottom: 24px; - padding-bottom: 20px; - border-bottom: 1px solid rgba(129, 140, 248, 0.1); - position: relative; -} - -.mcp-header::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 80px; - height: 2px; - background: linear-gradient(90deg, var(--color-accent), transparent); - opacity: 0; - transition: all 0.3s ease; -} - -.mcp-card:hover .mcp-header::after { - opacity: 1; - width: 150px; -} - -.mcp-icon { - width: 64px; - height: 64px; - display: flex; - align-items: center; - justify-content: center; - font-size: 32px; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - border-radius: 14px; - flex-shrink: 0; - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - z-index: 1; -} - -.mcp-card:hover .mcp-icon { - transform: scale(1.1) translateY(-2px); - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3); -} - -.mcp-name { - font-size: 24px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.02em; - position: relative; - z-index: 1; - transition: all 0.3s ease; -} - -.mcp-card:hover .mcp-name { - transform: translateX(4px); - background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.mcp-description { - font-size: 15px; - color: var(--color-text-secondary); - margin-bottom: 28px; - line-height: 1.7; - position: relative; - z-index: 1; - letter-spacing: 0.01em; -} - -.mcp-description::before { - content: ''; - position: absolute; - bottom: -12px; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, - transparent, - rgba(129, 140, 248, 0.1) 20%, - rgba(129, 140, 248, 0.3) 40%, - rgba(129, 140, 248, 0.3) 60%, - rgba(129, 140, 248, 0.1) 80%, - transparent - ); - transition: all 0.4s ease; -} - -.mcp-card:hover .mcp-description::before { - box-shadow: 0 0 12px rgba(129, 140, 248, 0.6); - height: 2px; -} - -.mcp-tools h4 { - font-size: 13px; - font-weight: 700; - color: var(--color-text-primary); - text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: 16px; - display: flex; - align-items: center; - gap: 8px; - position: relative; - z-index: 1; -} - -.mcp-tools h4::before { - content: '▸'; - color: var(--color-accent); - font-size: 14px; -} - -.tools-count { - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - padding: 4px 10px; - background: rgba(129, 140, 248, 0.15); - color: var(--color-accent); - border-radius: 12px; - margin-left: 8px; - border: 1px solid rgba(129, 140, 248, 0.25); - display: inline-flex; - align-items: center; - gap: 4px; - box-shadow: 0 1px 3px rgba(129, 140, 248, 0.1); -} - -.mcp-card-browser .tools-count { - background: var(--server-color-lighter); - color: var(--server-color); - border-color: var(--server-color-light); -} - -.mcp-card-docs .tools-count { - background: var(--server-color-lighter); - color: var(--server-color); - border-color: var(--server-color-light); -} - -.mcp-tools ul { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-direction: column; - gap: 8px; - position: relative; - z-index: 1; -} - -.mcp-tools li { - font-size: 14px; - color: var(--color-text-secondary); - display: flex; - align-items: center; - gap: 10px; - padding: 10px 14px; - background: rgba(129, 140, 248, 0.04); - border-left: 2px solid rgba(129, 140, 248, 0.2); - border-radius: 6px; - transition: all 0.2s ease; - line-height: 1.5; -} - -.mcp-tools li::before { - content: '◆'; - color: var(--color-accent); - font-size: 8px; - flex-shrink: 0; - opacity: 0.6; -} - -.mcp-tools li:hover { - background: rgba(129, 140, 248, 0.08); - border-left-color: var(--color-accent); - transform: translateX(4px); -} - -.mcp-tools li:hover::before { - opacity: 1; - animation: diamond-spin 0.6s ease; -} - -@keyframes diamond-spin { - 0%, 100% { transform: rotate(0deg) scale(1); } - 50% { transform: rotate(180deg) scale(1.2); } -} - -.mcp-tools li:nth-child(1) { animation-delay: 0.05s; } -.mcp-tools li:nth-child(2) { animation-delay: 0.1s; } -.mcp-tools li:nth-child(3) { animation-delay: 0.15s; } -.mcp-tools li:nth-child(4) { animation-delay: 0.2s; } -.mcp-tools li:nth-child(5) { animation-delay: 0.25s; } -.mcp-tools li:nth-child(6) { animation-delay: 0.3s; } - -.mcp-card:hover .mcp-tools li { - animation: slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; -} - -@keyframes slide-in { - from { - opacity: 0.5; - transform: translateX(-8px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.mcp-tools code { - color: var(--color-accent); - background: rgba(129, 140, 248, 0.1); - padding: 3px 8px; - border-radius: 4px; - font-weight: 600; - font-size: 13px; - font-family: var(--font-mono); - transition: all 0.2s ease; -} - -.mcp-tools li:hover code { - background: rgba(129, 140, 248, 0.2); - transform: scale(1.05); -} - -.mcp-note { - font-size: 12px; - color: var(--color-text-secondary); - margin-top: 16px; - padding: 12px 16px; - background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.04)); - border-left: 3px solid var(--color-accent); - border-radius: 8px; - line-height: 1.6; - position: relative; - z-index: 1; - font-weight: 500; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.mcp-note::before { - content: '→'; - color: var(--color-accent); - margin-right: 8px; - font-weight: 700; - font-size: 14px; -} - -/* Browser Server Theme (Teal/Cyan) */ -.mcp-card-browser { - --server-color: #14b8a6; - --server-color-light: rgba(20, 184, 166, 0.15); - --server-color-lighter: rgba(20, 184, 166, 0.08); - --server-color-hover: #0d9488; -} - -.mcp-card-browser .mcp-icon { - background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); - color: var(--server-color); -} - -.mcp-card-browser:hover .mcp-icon { - background: linear-gradient(135deg, var(--server-color), var(--server-color-hover)); - color: white; - box-shadow: 0 8px 20px rgba(20, 184, 166, 0.4); -} - -.mcp-card-browser .mcp-header::after { - background: linear-gradient(90deg, var(--server-color), transparent); -} - -.mcp-card-browser .mcp-tools li::before { - color: var(--server-color); -} - -.mcp-card-browser .mcp-tools li:hover { - border-left-color: var(--server-color); -} - -.mcp-card-browser .mcp-tools code { - color: var(--server-color); - background: var(--server-color-lighter); -} - -.mcp-card-browser .mcp-tools h4::before { - color: var(--server-color); -} - -/* Docs Server Theme (Amber/Orange) */ -.mcp-card-docs { - --server-color: #f59e0b; - --server-color-light: rgba(245, 158, 11, 0.15); - --server-color-lighter: rgba(245, 158, 11, 0.08); - --server-color-hover: #d97706; -} - -.mcp-card-docs .mcp-icon { - background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); - color: var(--server-color); -} - -.mcp-card-docs:hover .mcp-icon { - background: linear-gradient(135deg, var(--server-color), var(--server-color-hover)); - color: white; - box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); -} - -.mcp-card-docs .mcp-header::after { - background: linear-gradient(90deg, var(--server-color), transparent); -} - -.mcp-card-docs .mcp-tools li::before { - color: var(--server-color); -} - -.mcp-card-docs .mcp-tools li:hover { - border-left-color: var(--server-color); -} - -.mcp-card-docs .mcp-tools code { - color: var(--server-color); - background: var(--server-color-lighter); -} - -.mcp-card-docs .mcp-tools h4::before { - color: var(--server-color); -} - -.mcp-card-docs .mcp-note { - background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); - border-left-color: var(--server-color); -} - -.mcp-card-docs .mcp-note::before { - color: var(--server-color); -} - -/* ============================================ - Installation Section - ============================================ */ - -.install-section { - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-xl); - margin: var(--space-xxl) 0; - padding: var(--space-xxl); - border: 1.5px solid var(--color-border); - position: relative; - overflow: hidden; -} - -.install-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-accent), var(--color-promo-start), var(--color-accent)); - opacity: 0.6; -} - -.install-steps { - max-width: 750px; - margin: 0 auto; - position: relative; -} - -.install-steps::before { - content: ''; - position: absolute; - left: 26px; - top: 52px; - bottom: 52px; - width: 2px; - background: linear-gradient(180deg, - var(--color-accent) 0%, - var(--color-accent) 33%, - var(--color-accent) 66%, - var(--color-success) 100% - ); - opacity: 0.3; - z-index: 0; -} - -.install-step { - display: flex; - gap: var(--space-xl); - margin-bottom: var(--space-xxl); - padding: var(--space-xl); - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid var(--color-border); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} - -.install-step::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - transition: opacity 0.3s ease; - border-radius: var(--radius-l); - pointer-events: none; -} - -.install-step:hover { - border-color: var(--color-accent); - transform: translateX(4px); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.15); -} - -.install-step:hover::before { - opacity: 0.4; -} - -.install-step:last-child { - margin-bottom: 0; - background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--color-background)); - border-color: rgba(16, 185, 129, 0.3); -} - -.install-step:last-child .step-number { - background: linear-gradient(135deg, var(--color-success), #0d9488); - box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4); -} - -.step-number { - flex-shrink: 0; - width: 52px; - height: 52px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - font-weight: 700; - font-size: 24px; - border-radius: 50%; - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - z-index: 1; -} - -.install-step:hover .step-number { - transform: scale(1.1) rotate(5deg); - box-shadow: 0 6px 20px rgba(129, 140, 248, 0.5); -} - -.step-content { - flex: 1; - position: relative; - z-index: 1; -} - -.step-content h3 { - margin-top: 8px; - margin-bottom: var(--space-m); - font-size: 22px; - color: var(--color-text-primary); -} - -/* ============================================ - Code Blocks - ============================================ */ - -.card-code-block { - background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); - border-radius: var(--radius-m); - padding: 18px 20px; - overflow-x: auto; - border: 1px solid rgba(129, 140, 248, 0.2); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.05), - 0 4px 12px rgba(0, 0, 0, 0.4); - position: relative; -} - -.card-code-block::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: repeating-linear-gradient( - 0deg, - rgba(255, 255, 255, 0.03) 0px, - rgba(255, 255, 255, 0.03) 1px, - transparent 1px, - transparent 2px - ); - pointer-events: none; - opacity: 0.3; -} - -.card-code-block pre { - margin: 0; - position: relative; - z-index: 1; -} - -.card-code-block code { - font-family: var(--font-mono); - font-size: 14px; - color: #cdd6f4; - background: none; - padding: 0; - line-height: 1.8; - white-space: pre; - text-shadow: 0 0 8px rgba(205, 214, 244, 0.3); -} - -/* ============================================ - Accordion / FAQ - ============================================ */ - -.accordion-container { - display: flex; - flex-direction: column; - gap: var(--space-m); -} - -.accordion-item { - background: var(--color-surface); - border: 1.5px solid var(--color-border); - border-radius: var(--radius-l); - transition: all 0.3s ease; - overflow: hidden; - position: relative; -} - -.accordion-item::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover)); - opacity: 0; - transition: opacity 0.3s ease; -} - -.accordion-item[open]::before { - opacity: 1; -} - -.accordion-item:hover { - border-color: var(--color-accent); - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); -} - -.accordion-item[open] { - background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface)); - border-color: var(--color-accent); -} - -.accordion-toggle { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-xl); - cursor: pointer; - list-style: none; - gap: var(--space-m); -/* ============================================ - Promo CTA Section - ============================================ */ - -.promo-cta { - background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); - border-radius: var(--radius-xl); - padding: 80px var(--space-xxl); - margin-bottom: var(--space-xxl); - position: relative; - overflow: hidden; - box-shadow: 0 20px 60px rgba(129, 140, 248, 0.4); -} - -.promo-cta::before { - content: ''; - position: absolute; - inset: 0; - background: - repeating-linear-gradient( - 45deg, - transparent, - transparent 20px, - rgba(255, 255, 255, 0.03) 20px, - rgba(255, 255, 255, 0.03) 40px - ); - pointer-events: none; -} - -.promo-cta::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); - pointer-events: none; - animation: glow-pulse 4s ease-in-out infinite; -} - -@keyframes glow-pulse { - 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } - 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } -} - -.cta-badge { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 10px 20px; - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); - border: 1.5px solid rgba(255, 255, 255, 0.3); - border-radius: 50px; - color: white; - font-size: 14px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: 24px; - position: relative; - z-index: 1; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.cta-badge i { - font-size: 16px; - animation: bolt-flash 2s ease-in-out infinite; -} - -@keyframes bolt-flash { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.6; transform: scale(1.2); } -} - -.promo-cta h2 { - color: white; - font-size: 48px; - font-weight: 800; - line-height: 1.15; - margin-bottom: 24px; - position: relative; - z-index: 1; - text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); -} - -.promo-cta p { - color: rgba(255, 255, 255, 0.95); - font-size: 21px; - line-height: 1.6; - max-width: 700px; - margin-left: auto; - margin-right: auto; - position: relative; - z-index: 1; -} - -.promo-cta .button { - position: relative; - z-index: 1; -} - -.promo-cta .button.primary { - background-color: white; - color: var(--color-promo-end); - font-size: 18px; - padding: 18px 36px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.promo-cta .button.primary:hover { - background-color: rgba(255, 255, 255, 0.95); - transform: translateY(-3px) scale(1.03); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); -} - -.promo-cta .button.primary i { - font-size: 20px; -} - -.promo-cta .button.tertiary { - border-color: rgba(255, 255, 255, 0.4); - color: white; - font-size: 18px; - padding: 18px 36px; -} - -.promo-cta .button.tertiary:hover { - background-color: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.6); -} - ); - pointer-events: none; -} - -.promo-cta h2 { - color: white; - font-size: 48px; - font-weight: 800; - line-height: 1.15; - margin-bottom: 24px; - position: relative; - z-index: 1; -} - -.promo-cta p { - color: rgba(255, 255, 255, 0.95); - font-size: 21px; - line-height: 1.6; - max-width: 700px; - margin-left: auto; - margin-right: auto; - position: relative; - z-index: 1; -} - -.promo-cta .button.primary { - background-color: white; - color: var(--color-promo-end); - font-size: 18px; - padding: 18px 36px; -} - -.promo-cta .button.primary:hover { - background-color: rgba(255, 255, 255, 0.95); - transform: translateY(-3px) scale(1.03); -} - -.promo-cta .button.tertiary { - border-color: rgba(255, 255, 255, 0.4); - color: white; - font-size: 18px; - padding: 18px 36px; -} - -.promo-cta .button.tertiary:hover { - background-color: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.6); -} - background: rgba(129, 140, 248, 0.15); - color: var(--color-accent); - padding: 3px 8px; - border-radius: 4px; - font-weight: 600; -} - -.accordion-content strong { - color: var(--color-text-primary); - font-weight: 600; -} - -/* ============================================ - Promo CTA Section - ============================================ */ - -.promo-cta { - background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); - border-radius: var(--radius-xl); - padding: var(--space-xxl); - margin-bottom: var(--space-xxl); -} - -.promo-cta h2 { - color: white; -} - -.promo-cta p { - color: rgba(255, 255, 255, 0.9); -} - -.promo-cta .button.primary { - background-color: white; - color: var(--color-promo-end); -} - -.promo-cta .button.primary:hover { - background-color: rgba(255, 255, 255, 0.9); -} - -.promo-cta .button.tertiary { - border-color: rgba(255, 255, 255, 0.3); - color: white; -} - -.promo-cta .button.tertiary:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -/* ============================================ - Footer - ============================================ */ - -.footer { - border-top: 1px solid var(--color-border); - margin-top: auto; - padding: var(--space-xxl) 0 var(--space-xl); -} - -.footer-menu { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-xl); - margin-bottom: var(--space-xl); -} - -@media (min-width: 768px) { - .footer-menu { - grid-template-columns: 2fr 1fr 1fr; - } -} - -.footer p { - margin: 0; - color: var(--color-text-secondary); -} - -.link-list { - display: flex; - flex-direction: column; - gap: var(--space-m); -} - -.link-list a { - color: var(--color-text-secondary); - font-size: var(--font-size-s); - text-decoration: none; -} - -.link-list a:hover { - color: var(--color-accent); -} - -.icon-link { - display: flex; - align-items: center; - gap: var(--space-s); -} - -.icon-link .icon { - color: var(--color-accent); -} - -.pseudo-link { - text-decoration: underline; - text-decoration-color: var(--color-border); - text-underline-offset: 2px; -} - -.link-list-horizontal { - display: flex; - flex-wrap: wrap; - gap: var(--space-l); -} - -.link-list-horizontal a { - color: var(--color-text-tertiary); - font-size: var(--font-size-s); -} - -.link-list-horizontal a:hover { - color: var(--color-text-secondary); -} - -/* ============================================ - Utility Classes - ============================================ */ - -.hide-on-mobile { - display: none; -} - -@media (min-width: 768px) { - .hide-on-mobile { - display: flex; - } -} - -.mobile-only { - display: flex; -} - -@media (min-width: 1024px) { - .mobile-only { - display: none; - } -} - -.margin-top-l { - margin-top: var(--space-l); -} - -.ui.s { - font-size: var(--font-size-s); - line-height: var(--line-height-ui-s); -} - -.icon { - display: inline-flex !important; - align-items: center; -} - -.icon.m { font-size: var(--font-size-m); } -.icon.l { font-size: var(--font-size-l); } -.icon.xl { font-size: var(--font-size-xl); } - -/* ============================================ - Responsive Adjustments - ============================================ */ - -@media (max-width: 767px) { - :root { - --font-size-xxl: 36px; - --font-size-xl: 28px; - --line-height-h1: 44px; - --line-height-h2: 36px; - --space-section: 48px; - } - - .page-container { - padding: 0 var(--space-l); - } - - .hero-section .heading.hero { - padding: var(--space-xl) 0; - } - - .install-section { - padding: var(--space-xl); - } - - .install-step { - flex-direction: column; - gap: var(--space-m); - } - - .promo-cta { - padding: var(--space-xl); - } -} - -/* ============================================ - Philosophy Section (Enhanced) - ============================================ */ - -.philosophy-section { - padding: var(--space-section) 0; - position: relative; -} - -.philosophy-section::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 400px; - height: 400px; - background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); - opacity: 0.08; - pointer-events: none; - z-index: 0; -} - -.philosophy-section > * { - position: relative; - z-index: 1; -} - -.philosophy-quote { - max-width: 900px; - margin: 0 auto var(--space-xxl); - text-align: center; - position: relative; -} - -.philosophy-quote::before { - content: '"'; - position: absolute; - top: -20px; - left: 50%; - transform: translateX(-50%); - font-size: 120px; - font-weight: 700; - color: var(--color-accent); - opacity: 0.1; - line-height: 1; - font-family: Georgia, serif; - z-index: 0; -} - -.philosophy-quote blockquote { - font-size: 22px; - font-style: italic; - color: var(--color-text-secondary); - line-height: 1.7; - margin: 0; - padding: var(--space-xxl); - background: linear-gradient(135deg, var(--color-accent-lighter) 0%, transparent 50%); - border-left: 5px solid var(--color-accent); - border-radius: var(--radius-l); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.12); - position: relative; - z-index: 1; - font-weight: 400; -} - -/* Philosophy Pillars */ -.philosophy-pillars { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-xl); - margin-bottom: var(--space-xxl); -} - -@media (min-width: 768px) { - .philosophy-pillars { - grid-template-columns: repeat(2, 1fr); - } -} - -.pillar { - display: flex; - gap: var(--space-l); - padding: var(--space-xl); - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid transparent; - background-image: - linear-gradient(var(--color-background), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.pillar::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - transition: opacity 0.35s ease; - z-index: 0; -} - -.pillar:hover { - transform: translateY(-4px) scale(1.01); - background-image: - linear-gradient(var(--color-background), var(--color-background)), - linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - box-shadow: - 0 20px 40px rgba(129, 140, 248, 0.2), - 0 8px 16px rgba(0, 0, 0, 0.1); -} - -.pillar:hover::before { - opacity: 0.3; -} - -.pillar > * { - position: relative; - z-index: 1; -} - -.pillar-icon { - flex-shrink: 0; - width: 72px; - height: 72px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - border-radius: var(--radius-l); - font-size: 36px; - color: var(--color-on-accent); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3); - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); -} - -.pillar:hover .pillar-icon { - transform: scale(1.1) rotateY(10deg); - box-shadow: 0 12px 30px rgba(129, 140, 248, 0.5); -} - -.pillar-content h3 { - margin: 0 0 var(--space-xs) 0; - font-size: 28px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.02em; -} - -.pillar-tagline { - margin: 0 0 var(--space-m) 0; - font-size: 16px; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - font-weight: 600; - font-style: italic; -} - -.pillar-description { - margin: 0 0 var(--space-l) 0; - font-size: 15px; - color: var(--color-text-secondary); - line-height: 1.7; - letter-spacing: 0.01em; -} - -.pillar-tools { - display: flex; - flex-wrap: wrap; - gap: var(--space-s); -} - -.tool-tag { - font-family: var(--font-mono); - font-size: 11px; - padding: 6px 12px; - background-color: var(--color-surface-hover); - color: var(--color-text-secondary); - border-radius: var(--radius-s); - border: 1px solid var(--color-border); - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - cursor: default; - font-weight: 500; -} - -.tool-tag:hover { - background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface-hover)); - border-color: var(--color-accent); - color: var(--color-accent); - transform: translateY(-1px) scale(1.05); - box-shadow: 0 4px 8px rgba(129, 140, 248, 0.15); -} - -/* Compound Effect Timeline */ -.compound-effect { - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-xl); - padding: var(--space-xxl); - border: 1.5px solid transparent; - background-image: - linear-gradient(135deg, var(--color-surface), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - position: relative; - overflow: hidden; -} - -.compound-effect::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 50% 0%, var(--color-accent-lighter), transparent 60%); - opacity: 0.3; - pointer-events: none; -} - -.compound-effect h3 { - text-align: center; - margin: 0 0 var(--space-xxl) 0; - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-s); - font-size: 28px; - position: relative; - z-index: 1; -} - -.compound-effect h3 i { - font-size: 32px; - animation: chart-pulse 2s ease-in-out infinite; -} - -@keyframes chart-pulse { - 0%, 100% { transform: scale(1) translateY(0); } - 50% { transform: scale(1.15) translateY(-2px); } -} - -.compound-grid { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: var(--space-l); - position: relative; - z-index: 1; -} - -.compound-item { - text-align: center; - padding: var(--space-xl); - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid var(--color-border); - min-width: 160px; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.compound-item::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - border-radius: var(--radius-l); - transition: opacity 0.35s ease; -} - -.compound-item:hover { - transform: translateY(-4px) scale(1.03); - border-color: var(--color-accent); - box-shadow: 0 12px 24px rgba(129, 140, 248, 0.2); -} - -.compound-item:hover::before { - opacity: 0.2; -} - -.compound-item.highlight { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - border-color: var(--color-accent); - box-shadow: 0 12px 32px rgba(129, 140, 248, 0.4); - transform: scale(1.08); -} - -.compound-item.highlight .compound-number, -.compound-item.highlight .compound-text { - color: var(--color-on-accent); -} - -.compound-item.highlight:hover { - transform: translateY(-4px) scale(1.1); - box-shadow: 0 16px 40px rgba(129, 140, 248, 0.5); -} - -.compound-number { - font-size: 18px; - font-weight: 700; - color: var(--color-accent); - margin-bottom: var(--space-s); - text-transform: uppercase; - letter-spacing: 0.05em; - position: relative; - z-index: 1; -} - -.compound-text { - font-size: 14px; - color: var(--color-text-secondary); - line-height: 1.5; - position: relative; - z-index: 1; -} - -.compound-arrow { - color: var(--color-accent); - font-size: 24px; - opacity: 0.6; - animation: arrow-slide 2s ease-in-out infinite; -} - -@keyframes arrow-slide { - 0%, 100% { transform: translateX(0); opacity: 0.6; } - 50% { transform: translateX(4px); opacity: 1; } -} - -@media (max-width: 767px) { - .pillar { - flex-direction: column; - text-align: center; - } - - .pillar-icon { - margin: 0 auto; - } - - .pillar-tools { - justify-content: center; - } - - .compound-arrow { - transform: rotate(90deg); - } - - .compound-grid { - flex-direction: column; - } -}