From 7901ef224169532a8a501e3b0099cdb96a7295f5 Mon Sep 17 00:00:00 2001 From: Kieran Klaassen Date: Wed, 26 Nov 2025 12:24:31 -0800 Subject: [PATCH] Update docs theme and landing page styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../docs/css/style.css | 756 +++++++++++++++--- .../compounding-engineering/docs/index.html | 31 +- 2 files changed, 670 insertions(+), 117 deletions(-) diff --git a/plugins/compounding-engineering/docs/css/style.css b/plugins/compounding-engineering/docs/css/style.css index 0dcfccc..3d8a3bc 100644 --- a/plugins/compounding-engineering/docs/css/style.css +++ b/plugins/compounding-engineering/docs/css/style.css @@ -144,9 +144,14 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: var(--font-size-xxl); - line-height: var(--line-height-h1); - letter-spacing: -0.03em; + 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 { @@ -201,7 +206,7 @@ img { margin: var(--space-m) 0; } .paragraph.s { font-size: var(--font-size-s); line-height: var(--line-height-paragraph-s); } -.paragraph.m { font-size: var(--font-size-m); line-height: var(--line-height-paragraph-m); } +.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; } @@ -344,15 +349,15 @@ section { align-items: center; justify-content: center; gap: var(--space-s); - padding: var(--space-m) var(--space-xl); + padding: 14px 28px; font-size: var(--font-size-m); - font-weight: var(--ui-button-font-weight); + font-weight: 600; font-family: inherit; text-decoration: none; border: none; border-radius: var(--radius-m); cursor: pointer; - transition: all 0.2s ease; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .button.compact { @@ -362,13 +367,32 @@ section { } .button.primary { - background-color: var(--color-accent); + 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-color: var(--color-accent-hover); - transform: translateY(-1px); + 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 { @@ -382,13 +406,15 @@ section { .button.tertiary { background-color: transparent; - color: var(--color-text-secondary); - border: 1px solid var(--color-border-strong); + color: var(--color-text-primary); + border: 1.5px solid var(--color-border-strong); } .button.tertiary:hover { background-color: var(--color-surface); - color: var(--color-text-primary); + border-color: var(--color-accent); + color: var(--color-accent); + transform: translateY(-1px); } .button.ghost { @@ -436,25 +462,59 @@ section { } .heading.hero { - padding: var(--space-xxl) 0; + padding: 64px 0 80px 0; } .eyebrow { display: inline-flex; align-items: center; - gap: var(--space-s); - padding: var(--space-xs) var(--space-m); - background-color: var(--color-accent-light); + gap: 10px; + padding: 8px 20px; + background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); color: var(--color-accent); - font-size: var(--font-size-s); - font-weight: 500; - border-radius: var(--radius-xl); - margin-bottom: var(--space-l); + 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-color: var(--color-accent-lighter); + 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; } /* ============================================ @@ -462,41 +522,132 @@ section { ============================================ */ .stats-section { - padding: var(--space-xl) 0; + 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: var(--space-l); + 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: var(--space-xl); - background-color: var(--color-surface); + padding: 36px 24px; + background: var(--color-background); border-radius: var(--radius-l); - border: 1px solid var(--color-border); + 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: var(--font-size-xxl); - font-weight: 700; - color: var(--color-accent); + 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: var(--space-s); + 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: var(--font-size-s); + font-size: 14px; color: var(--color-text-secondary); - font-weight: 500; + font-weight: 600; + letter-spacing: 0.02em; + line-height: 1.5; + text-transform: capitalize; } /* ============================================ @@ -559,8 +710,8 @@ section { .grid { display: grid; - gap: var(--space-l); - margin: var(--space-l) 0; + gap: 20px; + margin: var(--space-xl) 0; } .grid.columns-2 { @@ -574,9 +725,11 @@ section { @media (min-width: 768px) { .grid.columns-2 { grid-template-columns: repeat(2, 1fr); + gap: 24px; } .grid.columns-3 { grid-template-columns: repeat(2, 1fr); + gap: 24px; } } @@ -584,6 +737,9 @@ section { .grid.columns-3 { grid-template-columns: repeat(3, 1fr); } + .grid.columns-2 { + gap: 28px; + } } .full-width { @@ -595,19 +751,56 @@ section { ============================================ */ .agent-category { - margin-bottom: var(--space-xxl); + 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-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, 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 { @@ -615,11 +808,30 @@ section { background-color: var(--color-surface); border-radius: var(--radius-l); border: 1px solid var(--color-border); - transition: all 0.2s ease; + 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 { @@ -632,42 +844,75 @@ section { .agent-name { font-family: var(--font-mono); - font-size: var(--font-size-s); - font-weight: 600; + font-size: 15px; + font-weight: 700; color: var(--color-text-primary); + letter-spacing: -0.01em; + position: relative; + z-index: 1; } .agent-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.2s ease; } .agent-badge.critical { - background-color: rgba(239, 68, 68, 0.15); + 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: var(--font-size-s); + font-size: 14px; color: var(--color-text-secondary); margin: 0 0 var(--space-m) 0; - line-height: 1.5; + line-height: 1.65; + position: relative; + z-index: 1; } .agent-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: 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%); } /* ============================================ @@ -681,45 +926,152 @@ section { .command-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-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-color: var(--color-surface); + background: linear-gradient(135deg, rgba(30, 30, 46, 0.6), rgba(24, 24, 37, 0.5)); border-radius: var(--radius-l); - border: 1px solid var(--color-border); - transition: all 0.2s ease; + 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-s); + 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: var(--font-size-m); + 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: var(--font-size-s); - color: var(--color-text-secondary); + font-size: 14px; + color: rgba(203, 213, 225, 0.85); margin: 0; - line-height: 1.5; + line-height: 1.7; + letter-spacing: 0.01em; } /* ============================================ @@ -1223,24 +1575,64 @@ section { .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: 800px; + 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: var(--font-size-l); + font-size: 22px; font-style: italic; color: var(--color-text-secondary); - line-height: 1.6; + line-height: 1.7; margin: 0; - padding: var(--space-xl); - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - border-left: 4px solid var(--color-accent); - border-radius: var(--radius-m); + 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 */ @@ -1261,81 +1653,170 @@ section { display: flex; gap: var(--space-l); padding: var(--space-xl); - background-color: var(--color-surface); + background: var(--color-background); border-radius: var(--radius-l); - border: 1px solid var(--color-border); - transition: all 0.3s ease; + 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 { - border-color: var(--color-accent); - transform: translateY(-2px); + 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: 60px; - height: 60px; + width: 72px; + height: 72px; display: flex; align-items: center; justify-content: center; - background-color: var(--color-accent-light); - border-radius: var(--radius-m); - font-size: var(--font-size-xl); - color: var(--color-accent); + 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: var(--font-size-l); + 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: var(--font-size-s); - color: var(--color-accent); - font-weight: 500; + 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-m) 0; - font-size: var(--font-size-s); + margin: 0 0 var(--space-l) 0; + font-size: 15px; color: var(--color-text-secondary); - line-height: 1.6; + line-height: 1.7; + letter-spacing: 0.01em; } .pillar-tools { display: flex; flex-wrap: wrap; - gap: var(--space-xs); + gap: var(--space-s); } .tool-tag { font-family: var(--font-mono); - font-size: var(--font-size-xs); - padding: 2px 8px; + font-size: 11px; + padding: 6px 12px; background-color: var(--color-surface-hover); color: var(--color-text-secondary); - border-radius: var(--radius-xs); + 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-color: var(--color-surface); - border-radius: var(--radius-l); - padding: var(--space-xl); - border: 1px solid var(--color-border); + 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-xl) 0; + 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 { @@ -1343,38 +1824,89 @@ section { flex-wrap: wrap; align-items: center; justify-content: center; - gap: var(--space-m); + gap: var(--space-l); + position: relative; + z-index: 1; } .compound-item { text-align: center; - padding: var(--space-l); - background-color: var(--color-background); - border-radius: var(--radius-m); - border: 1px solid var(--color-border); - min-width: 140px; + 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-light), var(--color-surface)); + 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: var(--font-size-s); - font-weight: 600; + font-size: 18px; + font-weight: 700; color: var(--color-accent); - margin-bottom: var(--space-xs); + margin-bottom: var(--space-s); + text-transform: uppercase; + letter-spacing: 0.05em; + position: relative; + z-index: 1; } .compound-text { - font-size: var(--font-size-xs); + font-size: 14px; color: var(--color-text-secondary); + line-height: 1.5; + position: relative; + z-index: 1; } .compound-arrow { - color: var(--color-text-tertiary); - font-size: var(--font-size-l); + 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) { diff --git a/plugins/compounding-engineering/docs/index.html b/plugins/compounding-engineering/docs/index.html index 27e2eb9..9cdde67 100644 --- a/plugins/compounding-engineering/docs/index.html +++ b/plugins/compounding-engineering/docs/index.html @@ -55,14 +55,15 @@
+
Version 2.6.0 released! -

+

AI-Powered Development Tools That Get Smarter With Every Use

-

+

Make each unit of engineering work easier than the last. 23 specialized agents, 16 powerful commands, 11 intelligent skills, and two MCP servers for code review, research, design, and workflow automation.

@@ -81,18 +82,22 @@
+
23
Specialized Agents
+
16
Slash Commands
+
11
Intelligent Skills
+
2
MCP Servers
@@ -102,9 +107,9 @@
-

The Compounding Engineering Philosophy

-

- Every unit of engineering work should make subsequent units of work easier—not harder. +

The Compounding Engineering Philosophy

+

+ Every unit of engineering work should make subsequent units of work easier—not harder.

@@ -472,24 +477,28 @@
/workflows:plan + core

Create comprehensive implementation plans with research agents and stakeholder analysis.

/workflows:review + core

Run exhaustive code reviews using 12 or more parallel agents, ultra-thinking, and worktrees.

/workflows:work + core

Execute work items systematically with progress tracking and validation.

/workflows:codify + core

Document solved problems for the knowledge base. Turn learnings into reusable patterns.

@@ -503,72 +512,84 @@
/changelog + util

Create engaging changelogs for recent merges.

/create-agent-skill + util

Create or edit Claude Code skills with expert guidance.

/generate_command + util

Generate new slash commands from templates.

/heal-skill + util

Fix skill documentation issues automatically.

/plan_review + util

Multi-agent plan review in parallel.

/prime + util

Prime/setup command for project initialization.

/report-bug + util

Report bugs in the plugin with structured templates.

/reproduce-bug + util

Reproduce bugs using logs and console output.

/triage + util

Triage and prioritize issues interactively.

/resolve_parallel + util

Resolve TODO comments in parallel.

/resolve_pr_parallel + util

Resolve PR comments in parallel.

/resolve_todo_parallel + util

Resolve file-based todos in parallel.