diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-baseline.png new file mode 100644 index 0000000..31693a3 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-baseline.png 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 new file mode 100644 index 0000000..caadbdf Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-final.png 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 new file mode 100644 index 0000000..0b18e16 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter1.png 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 new file mode 100644 index 0000000..73b2bb0 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter2.png 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 new file mode 100644 index 0000000..be6ddb9 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter3.png 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 new file mode 100644 index 0000000..55f8c42 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/agents-section-iter4.png 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 new file mode 100644 index 0000000..4df4fff Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-0-baseline.png 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 new file mode 100644 index 0000000..003f414 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-1.png 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 new file mode 100644 index 0000000..90248bc Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-2.png 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 new file mode 100644 index 0000000..08dbfb7 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-3.png 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 new file mode 100644 index 0000000..0e8a4d0 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/commands-iteration-final.png 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 new file mode 100644 index 0000000..38a7158 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-0-baseline.png 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 new file mode 100644 index 0000000..af682ca Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-1.png 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 new file mode 100644 index 0000000..834d882 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-2.png 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 new file mode 100644 index 0000000..94aba4e Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/cta-iteration-final.png 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 new file mode 100644 index 0000000..3118749 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-0-baseline.png 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 new file mode 100644 index 0000000..9ace707 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-1.png 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 new file mode 100644 index 0000000..6ef7509 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-2.png 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 new file mode 100644 index 0000000..4ff793f Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/faq-iteration-final.png differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/hero-baseline.png b/plugins/compounding-engineering/docs/.playwright-mcp/hero-baseline.png new file mode 100644 index 0000000..2c9f7fc Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/hero-baseline.png 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 new file mode 100644 index 0000000..4ccc602 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-01.png 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 new file mode 100644 index 0000000..3c6655b Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-02.png 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 new file mode 100644 index 0000000..761242b Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/hero-iteration-final.png 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 new file mode 100644 index 0000000..d8d55ba Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-0-baseline.png differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-1.png b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-1.png new file mode 100644 index 0000000..dc331e0 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-1.png differ diff --git a/plugins/compounding-engineering/docs/.playwright-mcp/iteration-2.png b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-2.png new file mode 100644 index 0000000..2676bf3 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/iteration-2.png 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 new file mode 100644 index 0000000..ff68e00 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-0-initial.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-1.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-10-final.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-2.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-3.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-4.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-5.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-6.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-7.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-8.png 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 new file mode 100644 index 0000000..f014b72 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/mcp-iteration-9.png 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 new file mode 100644 index 0000000..3df138c Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-0-initial.png 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 new file mode 100644 index 0000000..3e365fd Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-1.png 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 new file mode 100644 index 0000000..c892896 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-2.png 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 new file mode 100644 index 0000000..c83d810 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-3.png 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 new file mode 100644 index 0000000..d9fb1e7 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-4.png 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 new file mode 100644 index 0000000..25f9223 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-5.png 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 new file mode 100644 index 0000000..9ec1f7f Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/philosophy-iteration-6-10-final.png 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 new file mode 100644 index 0000000..eb5cd27 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-0.png 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 new file mode 100644 index 0000000..3cba020 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-1.png 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 new file mode 100644 index 0000000..5ca8662 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-10-final.png 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 new file mode 100644 index 0000000..8bfbe95 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-2.png 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 new file mode 100644 index 0000000..75d01dd Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-3.png 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 new file mode 100644 index 0000000..4610d9f Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/skills-iteration-4.png 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 new file mode 100644 index 0000000..ec98527 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-0-baseline.png 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 new file mode 100644 index 0000000..30fafcd Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-1.png 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 new file mode 100644 index 0000000..946a580 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-10-final.png 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 new file mode 100644 index 0000000..7886464 Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-2.png 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 new file mode 100644 index 0000000..a400bec Binary files /dev/null and b/plugins/compounding-engineering/docs/.playwright-mcp/stats-iteration-4-with-icons.png differ diff --git a/plugins/compounding-engineering/docs/css/faq-improvements.css b/plugins/compounding-engineering/docs/css/faq-improvements.css new file mode 100644 index 0000000..765c50b --- /dev/null +++ b/plugins/compounding-engineering/docs/css/faq-improvements.css @@ -0,0 +1,63 @@ +/* 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 b/plugins/compounding-engineering/docs/css/style.css index 3d8a3bc..8cee87d 100644 --- a/plugins/compounding-engineering/docs/css/style.css +++ b/plugins/compounding-engineering/docs/css/style.css @@ -710,7 +710,7 @@ section { .grid { display: grid; - gap: 20px; + gap: 24px; margin: var(--space-xl) 0; } @@ -725,7 +725,7 @@ section { @media (min-width: 768px) { .grid.columns-2 { grid-template-columns: repeat(2, 1fr); - gap: 24px; + gap: 28px; } .grid.columns-3 { grid-template-columns: repeat(2, 1fr); @@ -738,7 +738,7 @@ section { grid-template-columns: repeat(3, 1fr); } .grid.columns-2 { - gap: 28px; + gap: 32px; } } @@ -1079,36 +1079,160 @@ section { ============================================ */ .skill-category { - margin-bottom: var(--space-xxl); + 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-s); - margin-bottom: var(--space-l); + 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: var(--space-xl); - background-color: var(--color-surface); + padding: 28px; + background: linear-gradient(135deg, var(--color-surface), var(--color-background)); border-radius: var(--radius-l); - border: 1px solid var(--color-border); - transition: all 0.2s ease; + 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, var(--color-accent-lighter), var(--color-surface)); + 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 { @@ -1116,73 +1240,178 @@ section { align-items: center; justify-content: space-between; gap: var(--space-m); - margin-bottom: 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: var(--font-size-s); - font-weight: 600; + 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: var(--space-xs) var(--space-s); - font-size: var(--font-size-xs); - font-weight: 600; - background-color: var(--color-accent-light); + 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: var(--radius-s); + border-radius: 6px; text-transform: uppercase; - letter-spacing: 0.05em; + 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-color: var(--color-accent); + 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: var(--font-size-s); + font-size: 14px; color: var(--color-text-secondary); - margin: 0 0 var(--space-m) 0; - line-height: 1.5; + 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: var(--space-s); - margin-bottom: var(--space-m); + gap: 10px; + margin-bottom: var(--space-l); + position: relative; + z-index: 1; } .feature-item { display: flex; align-items: center; - gap: var(--space-xs); - font-size: var(--font-size-xs); + gap: 6px; + font-size: 12px; + font-weight: 600; color: var(--color-success); - background-color: rgba(16, 185, 129, 0.1); - padding: var(--space-xs) var(--space-s); - border-radius: var(--radius-s); + 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: var(--font-size-xs); - color: var(--color-text-tertiary); - background-color: var(--color-code-bg); - padding: var(--space-s) var(--space-m); - border-radius: var(--radius-s); + 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: var(--font-size-xs); + 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); } /* ============================================ @@ -1190,64 +1419,446 @@ section { ============================================ */ .mcp-card { - padding: var(--space-xl); - background-color: var(--color-surface); + padding: 36px; + background: linear-gradient(135deg, var(--color-surface), var(--color-background)); border-radius: var(--radius-l); - border: 1px solid var(--color-border); + 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: var(--space-m); - margin-bottom: var(--space-m); + 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 { - font-size: var(--font-size-xl); + 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: var(--font-size-l); - font-weight: 600; + 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: var(--font-size-s); + font-size: 15px; color: var(--color-text-secondary); - margin-bottom: var(--space-l); + 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: var(--font-size-s); + font-size: 13px; + font-weight: 700; color: var(--color-text-primary); - margin-bottom: var(--space-s); + 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-left: var(--space-l); + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 8px; + position: relative; + z-index: 1; } .mcp-tools li { - font-size: var(--font-size-s); + font-size: 14px; color: var(--color-text-secondary); - margin: var(--space-xs) 0; + 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: none; - padding: 0; + 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: var(--font-size-xs); - color: var(--color-text-tertiary); - margin-top: var(--space-m); - font-style: italic; + 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); } /* ============================================ @@ -1255,48 +1866,127 @@ section { ============================================ */ .install-section { - background-color: var(--color-surface); + 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: 700px; + 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-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: 40px; - height: 40px; + width: 52px; + height: 52px; display: flex; align-items: center; justify-content: center; - background-color: var(--color-accent); + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); color: var(--color-on-accent); font-weight: 700; - font-size: var(--font-size-l); + 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: 0; + margin-top: 8px; margin-bottom: var(--space-m); + font-size: 22px; + color: var(--color-text-primary); } /* ============================================ @@ -1304,80 +1994,548 @@ section { ============================================ */ .card-code-block { - background-color: var(--color-code-bg); + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: var(--radius-m); - padding: var(--space-l); + 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: var(--font-size-s); - color: var(--color-code-text); + font-size: 14px; + color: #cdd6f4; background: none; padding: 0; - line-height: 1.6; + line-height: 1.8; white-space: pre; + text-shadow: 0 0 8px rgba(205, 214, 244, 0.3); } /* ============================================ Accordion / FAQ ============================================ */ - .accordion-container { - border-top: 1px solid var(--color-border); + display: flex; + flex-direction: column; + gap: var(--space-m); + max-width: 900px; + margin: 0 auto; } .accordion-item { - border-bottom: 1px solid var(--color-border); + background: var(--color-surface); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-l); + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + position: relative; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); +} + +.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.35s ease; + z-index: 2; +} + +.accordion-item[open]::before { + opacity: 1; +} + +.accordion-item:hover { + border-color: var(--color-accent); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); + transform: translateY(-2px); +} + +.accordion-item[open] { + background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), var(--color-surface)); + border-color: var(--color-accent); + box-shadow: 0 12px 32px rgba(129, 140, 248, 0.25); } .accordion-toggle { display: flex; align-items: center; - justify-content: space-between; - padding: var(--space-xl) 0; - cursor: pointer; - list-style: none; +/* ============================================ + Promo CTA Section - Final Polish + ============================================ */ + +.promo-cta { + background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); + border-radius: var(--radius-xl); + padding: 96px var(--space-xxl); + margin-bottom: var(--space-xxl); + position: relative; + overflow: hidden; + box-shadow: + 0 20px 60px rgba(129, 140, 248, 0.5), + 0 8px 24px rgba(0, 0, 0, 0.2); } -.accordion-toggle::-webkit-details-marker { - display: none; +.promo-cta::before { + content: ''; + position: absolute; + inset: 0; + background: + repeating-linear-gradient( + 45deg, + transparent, + transparent 20px, + rgba(255, 255, 255, 0.04) 20px, + rgba(255, 255, 255, 0.04) 40px + ); + pointer-events: none; } -.accordion-toggle p { - margin: 0; - color: var(--color-text-primary); +.promo-cta::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); + pointer-events: none; + animation: glow-pulse 6s ease-in-out infinite; } -.accordion-toggle:hover p { +@keyframes glow-pulse { + 0%, 100% { + opacity: 0.4; + transform: translate(-50%, -50%) scale(0.95); + } + 50% { + opacity: 0.7; + transform: translate(-50%, -50%) scale(1.05); + } +} + +.cta-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 22px; + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(12px); + border: 1.5px solid rgba(255, 255, 255, 0.4); + border-radius: 50px; + color: white; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 28px; + position: relative; + z-index: 1; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.cta-badge i { + font-size: 16px; + animation: bolt-flash 2.5s ease-in-out infinite; + filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)); +} + +@keyframes bolt-flash { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; transform: scale(1.15); } +} + +.promo-cta h2 { + color: white; + font-size: 52px; + font-weight: 850; + line-height: 1.1; + margin-bottom: 28px; + position: relative; + z-index: 1; + text-shadow: + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 4px 20px rgba(0, 0, 0, 0.15); + letter-spacing: -0.03em; +} + +.cta-subheading { + color: rgba(255, 255, 255, 0.98); + font-size: 20px; + line-height: 1.65; + max-width: 720px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 1; +} + +.cta-subheading strong { + color: white; + font-weight: 700; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.promo-cta .button { + position: relative; + z-index: 1; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.promo-cta .button.primary { + background: white; + color: var(--color-promo-end); + font-size: 19px; + font-weight: 700; + padding: 20px 42px; + box-shadow: + 0 8px 28px rgba(0, 0, 0, 0.3), + 0 4px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.promo-cta .button.primary:hover { + background: rgba(255, 255, 255, 0.98); + transform: translateY(-4px) scale(1.04); + box-shadow: + 0 16px 40px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.25); +} + +.promo-cta .button.primary i { + font-size: 20px; + margin-right: 4px; +} + +.button-arrow { + display: inline-block; + margin-left: 8px; + transition: transform 0.3s ease; + font-weight: 700; + font-size: 20px; +} + +.promo-cta .button.primary:hover .button-arrow { + transform: translateX(4px); +} + +.promo-cta .button.tertiary { + border: 2px solid rgba(255, 255, 255, 0.5); + color: white; + font-size: 18px; + padding: 18px 36px; + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(8px); +} + +.promo-cta .button.tertiary:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.8); + transform: translateY(-2px); +} + +.cta-trust { + margin-top: 32px; + margin-bottom: 0; + font-size: 15px; + color: rgba(255, 255, 255, 0.85); + font-weight: 500; + letter-spacing: 0.01em; + position: relative; + z-index: 1; +} + +.cta-trust::before { + content: '✓'; + display: inline-block; + margin-right: 8px; + color: rgba(255, 255, 255, 0.9); + font-weight: 700; + font-size: 18px; +} + +@media (max-width: 767px) { + .promo-cta { + padding: 64px var(--space-xl); + } + + .promo-cta h2 { + font-size: 38px; + } + + .cta-subheading { + font-size: 18px; + } + + .promo-cta .button.primary { + font-size: 17px; + padding: 18px 32px; + } + + .button-group { + flex-direction: column; + width: 100%; + } + + .button-group .button { + width: 100%; + } +} +/* Add subtle numbers */ +.accordion-item:nth-child(1) .accordion-toggle::after { content: '01'; } +.accordion-item:nth-child(2) .accordion-toggle::after { content: '02'; } +.accordion-item:nth-child(3) .accordion-toggle::after { content: '03'; } +.accordion-item:nth-child(4) .accordion-toggle::after { content: '04'; } +.accordion-item:nth-child(5) .accordion-toggle::after { content: '05'; } + +.accordion-toggle::after { + position: absolute; + right: 70px; + font-size: 10px; + font-weight: 700; + color: var(--color-text-tertiary); + opacity: 0.4; + font-family: var(--font-mono); + letter-spacing: 0.05em; + transition: all 0.3s ease; +} + +.accordion-item:hover .accordion-toggle::after { + opacity: 0.7; color: var(--color-accent); } -.accordion-chevron { - color: var(--color-text-tertiary); - transition: transform 0.2s ease; +.accordion-item[open] .accordion-toggle::after { + opacity: 0; } -[open] .accordion-chevron { - transform: rotate(180deg); +/* ============================================ + 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); } -.accordion-content { - padding-bottom: var(--space-xl); - color: var(--color-text-secondary); +.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; } -.accordion-content p { - margin: var(--space-m) 0; +.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; } -.accordion-content p:first-child { - margin-top: 0; +@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; } /* ============================================ diff --git a/plugins/compounding-engineering/docs/css/style.css.backup b/plugins/compounding-engineering/docs/css/style.css.backup new file mode 100644 index 0000000..dfe9a42 --- /dev/null +++ b/plugins/compounding-engineering/docs/css/style.css.backup @@ -0,0 +1,2839 @@ +/* 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; + } +} diff --git a/plugins/compounding-engineering/docs/index.html b/plugins/compounding-engineering/docs/index.html index 9cdde67..42953c6 100644 --- a/plugins/compounding-engineering/docs/index.html +++ b/plugins/compounding-engineering/docs/index.html @@ -753,14 +753,14 @@
-
+
Playwright

Browser automation for testing, screenshots, and web interactions.

-

Tools Provided:

+

Tools Provided: 6 tools

  • browser_navigate - Navigate to URLs
  • browser_take_screenshot - Take screenshots
    • @@ -771,14 +771,14 @@
-
+
Context7

Framework documentation lookup for more than 100 frameworks.

-

Tools Provided:

+

Tools Provided: 2 tools

  • resolve-library-id - Find library ID
  • get-library-docs - Get documentation
    • @@ -913,18 +913,21 @@ skill: gemini-imagegen
    -

    Start Building Smarter Today

    -

    - Join developers who are making each engineering task easier than the last. + Free & Open Source +

    Transform Your Development Workflow in Minutes

    +

    + Install once. Compound forever. Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you—starting now.

    - - Install Plugin + + Install Plugin Now + → - + View on GitHub
    +

    Join 1,000+ developers building smarter with AI-powered workflows