SuperCharge Claude Code v1.0.0 - Complete Customization Package
Features: - 30+ Custom Skills (cognitive, development, UI/UX, autonomous agents) - RalphLoop autonomous agent integration - Multi-AI consultation (Qwen) - Agent management system with sync capabilities - Custom hooks for session management - MCP servers integration - Plugin marketplace setup - Comprehensive installation script Components: - Skills: always-use-superpowers, ralph, brainstorming, ui-ux-pro-max, etc. - Agents: 100+ agents across engineering, marketing, product, etc. - Hooks: session-start-superpowers, qwen-consult, ralph-auto-trigger - Commands: /brainstorm, /write-plan, /execute-plan - MCP Servers: zai-mcp-server, web-search-prime, web-reader, zread - Binaries: ralphloop wrapper Installation: ./supercharge.sh
This commit is contained in:
uroma
781
skills/ui-ux-pro-max/superpowers-cta-section.html
Normal file
781
skills/ui-ux-pro-max/superpowers-cta-section.html
Normal file
@@ -0,0 +1,781 @@
|
||||
<!-- Superpowers Plugin CTA Section - WordPress Post ID 112 -->
|
||||
<section id="superpowers-cta" class="sp-cta-section" aria-label="Call to action section">
|
||||
|
||||
<!-- Primary Hero CTA Card -->
|
||||
<div class="sp-hero-card">
|
||||
<div class="sp-hero-background" aria-hidden="true">
|
||||
<div class="sp-glow-effect"></div>
|
||||
<div class="sp-gradient-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="sp-hero-content">
|
||||
<h2 class="sp-hero-headline">Start Building Better Code Today</h2>
|
||||
|
||||
<div class="sp-stats-showcase" role="list" aria-label="Key benefits">
|
||||
<div class="sp-stat-item" role="listitem">
|
||||
<span class="sp-stat-value" aria-label="80 percent">80%</span>
|
||||
<span class="sp-stat-label">Fewer Bugs</span>
|
||||
</div>
|
||||
<div class="sp-stat-divider" aria-hidden="true"></div>
|
||||
<div class="sp-stat-item" role="listitem">
|
||||
<span class="sp-stat-value" aria-label="60 percent">60%</span>
|
||||
<span class="sp-stat-label">Faster Debugging</span>
|
||||
</div>
|
||||
<div class="sp-stat-divider" aria-hidden="true"></div>
|
||||
<div class="sp-stat-item sp-stat-highlight" role="listitem">
|
||||
<span class="sp-stat-value">FREE</span>
|
||||
<span class="sp-stat-label">Open Source</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="https://github.com/obra/superpowers"
|
||||
class="sp-cta-button sp-cta-primary"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Get Superpowers Plugin on GitHub">
|
||||
<svg class="sp-icon-github"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
focusable="false">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span>Get Superpowers Plugin</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ecosystem Section -->
|
||||
<div class="sp-ecosystem-wrapper">
|
||||
<h3 class="sp-ecosystem-heading">Complete Your Development Ecosystem</h3>
|
||||
|
||||
<div class="sp-ecosystem-grid">
|
||||
<!-- GLM Suite Card -->
|
||||
<a href="https://github.rommark.dev/admin/claude-code-glm-suite"
|
||||
class="sp-ecosystem-card sp-glm-card"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Explore GLM Suite - Advanced Language Models">
|
||||
<div class="sp-card-background" aria-hidden="true"></div>
|
||||
<div class="sp-card-content">
|
||||
<div class="sp-card-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="sp-card-title">GLM Suite</h4>
|
||||
<p class="sp-card-description">Advanced language models for intelligent code generation and analysis</p>
|
||||
<div class="sp-card-arrow">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Z.AI Premium Card -->
|
||||
<a href="https://z.ai/subscribe?ic=R0K78RJKNW"
|
||||
class="sp-ecosystem-card sp-zai-card"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Explore Z.AI Premium - AI-Powered Development Tools">
|
||||
<div class="sp-card-background" aria-hidden="true"></div>
|
||||
<div class="sp-card-content">
|
||||
<div class="sp-card-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="sp-card-title">Z.AI Premium</h4>
|
||||
<p class="sp-card-description">AI-powered development tools and automated workflow optimization</p>
|
||||
<div class="sp-card-arrow">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
SUPERPOWERS CTA SECTION STYLES
|
||||
Glassmorphism Design System
|
||||
GPU-Accelerated Animations (60fps)
|
||||
WCAG AA Compliant (4.5:1 contrast)
|
||||
============================================ */
|
||||
|
||||
/* CSS Custom Properties */
|
||||
.sp-cta-section {
|
||||
--sp-indigo: #6366f1;
|
||||
--sp-purple: #8b5cf6;
|
||||
--sp-emerald: #10b981;
|
||||
--sp-gold: #f59e0b;
|
||||
--sp-slate-900: #0f172a;
|
||||
--sp-slate-700: #334155;
|
||||
--sp-slate-500: #64748b;
|
||||
--sp-slate-100: #f1f5f9;
|
||||
--sp-white: #ffffff;
|
||||
|
||||
--sp-glass-bg: rgba(255, 255, 255, 0.95);
|
||||
--sp-glass-border: rgba(255, 255, 255, 0.2);
|
||||
--sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--sp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
|
||||
--sp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
--sp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||
--sp-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
|
||||
|
||||
--sp-radius-md: 12px;
|
||||
--sp-radius-lg: 16px;
|
||||
--sp-radius-xl: 24px;
|
||||
|
||||
--sp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--sp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--sp-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Reset & Base Styles */
|
||||
.sp-cta-section *,
|
||||
.sp-cta-section *::before,
|
||||
.sp-cta-section *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.sp-cta-section a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HERO CARD STYLES
|
||||
============================================ */
|
||||
|
||||
.sp-hero-card {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, var(--sp-indigo) 0%, var(--sp-purple) 100%);
|
||||
border-radius: var(--sp-radius-xl);
|
||||
padding: 60px 40px;
|
||||
margin-bottom: 50px;
|
||||
overflow: visible;
|
||||
box-shadow: var(--sp-shadow-2xl);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* GPU-Accelerated Background Effects */
|
||||
.sp-hero-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
border-radius: var(--sp-radius-xl);
|
||||
}
|
||||
|
||||
.sp-glow-effect {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at center, rgba(139, 92, 246, 0.4) 0%, transparent 50%);
|
||||
animation: sp-glow-rotate 8s linear infinite;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.sp-gradient-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(99, 102, 241, 0.9) 0%,
|
||||
rgba(139, 92, 246, 0.8) 50%,
|
||||
rgba(139, 92, 246, 0.9) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: var(--sp-radius-xl);
|
||||
}
|
||||
|
||||
@keyframes sp-glow-rotate {
|
||||
from {
|
||||
transform: rotate(0deg) translateZ(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.sp-hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sp-hero-headline {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: var(--sp-white);
|
||||
margin: 0 0 40px 0;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Stats Showcase */
|
||||
.sp-stats-showcase {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 30px;
|
||||
margin-bottom: 40px;
|
||||
padding: 30px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--sp-radius-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sp-stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 140px;
|
||||
padding: 8px 12px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sp-stat-value {
|
||||
font-size: clamp(1.75rem, 4vw, 2.25rem);
|
||||
font-weight: 800;
|
||||
color: var(--sp-white);
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
padding: 4px 0;
|
||||
min-height: 1.3em;
|
||||
}
|
||||
|
||||
.sp-stat-label {
|
||||
font-size: clamp(0.75rem, 1.5vw, 0.875rem);
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sp-stat-highlight .sp-stat-value {
|
||||
color: var(--sp-gold);
|
||||
animation: sp-pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes sp-pulse-glow {
|
||||
0%, 100% {
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
|
||||
0 0 20px rgba(245, 158, 11, 0.4);
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
|
||||
0 0 30px rgba(245, 158, 11, 0.6);
|
||||
transform: translateZ(0) scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
.sp-stat-divider {
|
||||
width: 1px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
}
|
||||
|
||||
/* Primary CTA Button */
|
||||
.sp-cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 18px 40px;
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
font-weight: 700;
|
||||
border-radius: var(--sp-radius-lg);
|
||||
transition: all var(--sp-transition-base);
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-cta-primary {
|
||||
background: var(--sp-white);
|
||||
color: var(--sp-indigo);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid var(--sp-white);
|
||||
}
|
||||
|
||||
.sp-cta-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--sp-transition-base);
|
||||
}
|
||||
|
||||
.sp-cta-primary:hover {
|
||||
transform: translateY(-2px) translateZ(0);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.sp-cta-primary:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sp-cta-primary:active {
|
||||
transform: translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.sp-cta-primary:focus-visible {
|
||||
outline: 3px solid var(--sp-white);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.sp-icon-github {
|
||||
flex-shrink: 0;
|
||||
transition: transform var(--sp-transition-base);
|
||||
}
|
||||
|
||||
.sp-cta-primary:hover .sp-icon-github {
|
||||
transform: scale(1.1) translateZ(0);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ECOSYSTEM SECTION STYLES
|
||||
============================================ */
|
||||
|
||||
.sp-ecosystem-wrapper {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-heading {
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 700;
|
||||
color: var(--sp-slate-900);
|
||||
text-align: center;
|
||||
margin: 0 0 30px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.sp-ecosystem-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: var(--sp-radius-lg);
|
||||
padding: 32px;
|
||||
overflow: visible;
|
||||
text-decoration: none;
|
||||
transition: all var(--sp-transition-base);
|
||||
will-change: transform;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.sp-card-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
transition: opacity var(--sp-transition-base);
|
||||
border-radius: var(--sp-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* GLM Card - Purple Gradient */
|
||||
.sp-glm-card .sp-card-background {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
|
||||
}
|
||||
|
||||
.sp-glm-card {
|
||||
background: var(--sp-glass-bg);
|
||||
border-color: rgba(139, 92, 246, 0.2);
|
||||
box-shadow: var(--sp-shadow-md);
|
||||
}
|
||||
|
||||
.sp-glm-card:hover {
|
||||
transform: translateY(-4px) translateZ(0);
|
||||
box-shadow: var(--sp-shadow-xl);
|
||||
border-color: var(--sp-purple);
|
||||
}
|
||||
|
||||
.sp-glm-card:hover .sp-card-background {
|
||||
opacity: 1.2;
|
||||
}
|
||||
|
||||
/* Z.AI Card - Gold Gradient */
|
||||
.sp-zai-card .sp-card-background {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 179, 8, 0.05) 100%);
|
||||
}
|
||||
|
||||
.sp-zai-card {
|
||||
background: var(--sp-glass-bg);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
box-shadow: var(--sp-shadow-md);
|
||||
}
|
||||
|
||||
.sp-zai-card:hover {
|
||||
transform: translateY(-4px) translateZ(0);
|
||||
box-shadow: var(--sp-shadow-xl);
|
||||
border-color: var(--sp-gold);
|
||||
}
|
||||
|
||||
.sp-zai-card:hover .sp-card-background {
|
||||
opacity: 1.2;
|
||||
}
|
||||
|
||||
/* Card Content */
|
||||
.sp-card-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sp-card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--sp-radius-md);
|
||||
background: var(--sp-white);
|
||||
box-shadow: var(--sp-shadow-sm);
|
||||
transition: transform var(--sp-transition-base);
|
||||
}
|
||||
|
||||
.sp-glm-card .sp-card-icon {
|
||||
color: var(--sp-purple);
|
||||
}
|
||||
|
||||
.sp-zai-card .sp-card-icon {
|
||||
color: var(--sp-gold);
|
||||
}
|
||||
|
||||
.sp-ecosystem-card:hover .sp-card-icon {
|
||||
transform: scale(1.1) rotate(5deg) translateZ(0);
|
||||
}
|
||||
|
||||
.sp-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--sp-slate-900);
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sp-card-description {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
color: var(--sp-slate-500);
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.sp-card-arrow {
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--sp-white);
|
||||
box-shadow: var(--sp-shadow-sm);
|
||||
transition: all var(--sp-transition-base);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.sp-glm-card .sp-card-arrow {
|
||||
color: var(--sp-purple);
|
||||
}
|
||||
|
||||
.sp-zai-card .sp-card-arrow {
|
||||
color: var(--sp-gold);
|
||||
}
|
||||
|
||||
.sp-ecosystem-card:hover .sp-card-arrow {
|
||||
transform: translateX(4px) translateZ(0);
|
||||
box-shadow: var(--sp-shadow-md);
|
||||
}
|
||||
|
||||
.sp-ecosystem-card:focus-visible {
|
||||
outline: 3px solid var(--sp-indigo);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE DESIGN BREAKPOINTS
|
||||
============================================ */
|
||||
|
||||
/* Mobile First - 320px and up */
|
||||
@media (max-width: 640px) {
|
||||
.sp-cta-section {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.sp-hero-card {
|
||||
padding: 40px 24px;
|
||||
border-radius: var(--sp-radius-lg);
|
||||
}
|
||||
|
||||
.sp-hero-headline {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sp-stats-showcase {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.sp-stat-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-stat-item {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sp-cta-button {
|
||||
width: 100%;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-heading {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sp-card-description {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet - 641px to 768px */
|
||||
@media (min-width: 641px) and (max-width: 768px) {
|
||||
.sp-hero-card {
|
||||
padding: 50px 32px;
|
||||
}
|
||||
|
||||
.sp-stats-showcase {
|
||||
padding: 28px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop - 769px to 1024px */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sp-cta-section {
|
||||
padding: 50px 24px;
|
||||
}
|
||||
|
||||
.sp-hero-card {
|
||||
padding: 55px 36px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Desktop - 1025px and up */
|
||||
@media (min-width: 1025px) {
|
||||
.sp-cta-section {
|
||||
padding: 80px 40px;
|
||||
}
|
||||
|
||||
.sp-hero-card {
|
||||
padding: 70px 50px;
|
||||
}
|
||||
|
||||
.sp-ecosystem-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra Large Desktop - 1440px and up */
|
||||
@media (min-width: 1440px) {
|
||||
.sp-cta-section {
|
||||
padding: 100px 60px;
|
||||
}
|
||||
|
||||
.sp-hero-card {
|
||||
padding: 80px 60px;
|
||||
}
|
||||
|
||||
.sp-hero-content {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACCESSIBILITY ENHANCEMENTS
|
||||
============================================ */
|
||||
|
||||
/* Reduced Motion Preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sp-cta-section,
|
||||
.sp-cta-section *,
|
||||
.sp-cta-section *::before,
|
||||
.sp-cta-section *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.sp-glow-effect {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.sp-stat-highlight .sp-stat-value {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode Support */
|
||||
@media (prefers-contrast: high) {
|
||||
.sp-hero-card {
|
||||
border: 2px solid var(--sp-white);
|
||||
}
|
||||
|
||||
.sp-ecosystem-card {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.sp-cta-primary {
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus Visible Enhancement */
|
||||
.sp-cta-section a:focus-visible {
|
||||
outline: 3px solid var(--sp-indigo);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Skip Link Target */
|
||||
.sp-cta-section:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.sp-cta-section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.sp-hero-card {
|
||||
background: var(--sp-slate-100);
|
||||
color: var(--sp-slate-900);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--sp-slate-500);
|
||||
}
|
||||
|
||||
.sp-hero-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-hero-headline {
|
||||
color: var(--sp-slate-900);
|
||||
}
|
||||
|
||||
.sp-cta-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-ecosystem-card {
|
||||
page-break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--sp-slate-500);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PERFORMANCE OPTIMIZATIONS
|
||||
============================================ */
|
||||
|
||||
/* Force GPU Acceleration */
|
||||
.sp-hero-card,
|
||||
.sp-glow-effect,
|
||||
.sp-cta-button,
|
||||
.sp-ecosystem-card,
|
||||
.sp-card-icon,
|
||||
.sp-card-arrow,
|
||||
.sp-stat-value {
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Optimize Font Rendering */
|
||||
.sp-cta-section {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Reduce Paint Complexity */
|
||||
.sp-hero-content,
|
||||
.sp-card-content {
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
/* Content Visibility Optimization */
|
||||
.sp-ecosystem-grid {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user