Reorganize: Move all skills to skills/ folder
- Created skills/ directory - Moved 272 skills to skills/ subfolder - Kept agents/ at root level - Kept installation scripts and docs at root level Repository structure: - skills/ - All 272 skills from skills.sh - agents/ - Agent definitions - *.sh, *.ps1 - Installation scripts - README.md, etc. - Documentation Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
@@ -1,834 +0,0 @@
|
||||
<!--
|
||||
Supercharge with Z.AI Promo Section - Redesigned with Premium Token Button
|
||||
Place this between PRICING COMPARISON and FINAL CTA sections
|
||||
Compatible with glass-card aesthetic
|
||||
-->
|
||||
|
||||
<section class="zai-promo-section">
|
||||
<div class="zai-glass-card">
|
||||
<!-- Badge -->
|
||||
<div class="zai-badge">
|
||||
<span class="zai-badge-icon">✨</span>
|
||||
<span class="zai-badge-text">Limited Time Offer</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="zai-content">
|
||||
<div class="zai-left">
|
||||
<h2 class="zai-heading">
|
||||
Supercharge with <span class="zai-gradient-text">Z.AI</span>
|
||||
</h2>
|
||||
<p class="zai-subheading">
|
||||
Unlock GLM 4.7 - The most powerful LLM for Claude Code users
|
||||
</p>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<div class="zai-features">
|
||||
<div class="zai-feature">
|
||||
<svg class="zai-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
<span>Lightning Fast API</span>
|
||||
</div>
|
||||
<div class="zai-feature">
|
||||
<svg class="zai-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2v20M2 12h20"/>
|
||||
</svg>
|
||||
<span>40% Off Premium Plans</span>
|
||||
</div>
|
||||
<div class="zai-feature">
|
||||
<svg class="zai-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M2 12h20"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
<span>Global Coverage</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary CTA -->
|
||||
<a href="https://github.rommark.dev/admin/claude-code-glm-suite" class="zai-secondary-cta" target="_blank" rel="noopener">
|
||||
<svg class="zai-secondary-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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>
|
||||
Explore GLM Suite Integration
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Right Side - Premium Token Button -->
|
||||
<div class="zai-right">
|
||||
<div class="zai-token-wrapper">
|
||||
<!-- Glow Effect Behind Token -->
|
||||
<div class="zai-token-glow"></div>
|
||||
|
||||
<!-- Main Token Button -->
|
||||
<a href="https://z.ai/subscribe?ic=R0K78RJKNW" class="zai-token-button" target="_blank" rel="noopener">
|
||||
<!-- Token Container -->
|
||||
<div class="zai-token">
|
||||
<!-- Outer Ring -->
|
||||
<div class="zai-token-ring-outer"></div>
|
||||
|
||||
<!-- Middle Ring -->
|
||||
<div class="zai-token-ring-middle"></div>
|
||||
|
||||
<!-- Inner Ring -->
|
||||
<div class="zai-token-ring-inner"></div>
|
||||
|
||||
<!-- Token Face -->
|
||||
<div class="zai-token-face">
|
||||
<!-- Shimmer Effect -->
|
||||
<div class="zai-token-shimmer"></div>
|
||||
|
||||
<!-- Logo/Icon -->
|
||||
<div class="zai-token-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Brand Name -->
|
||||
<span class="zai-token-brand">Z.AI</span>
|
||||
|
||||
<!-- Discount Badge -->
|
||||
<div class="zai-token-discount">
|
||||
<span class="zai-discount-text">10% OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Text -->
|
||||
<div class="zai-token-cta">
|
||||
<span class="zai-cta-primary">Get Started</span>
|
||||
<span class="zai-cta-secondary">Unlock Premium Power</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Floating Particles -->
|
||||
<div class="zai-particles">
|
||||
<div class="zai-particle zai-particle-1"></div>
|
||||
<div class="zai-particle zai-particle-2"></div>
|
||||
<div class="zai-particle zai-particle-3"></div>
|
||||
<div class="zai-particle zai-particle-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="zai-trust">
|
||||
<div class="zai-trust-item">
|
||||
<svg class="zai-trust-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
<span>Secure Payment</span>
|
||||
</div>
|
||||
<div class="zai-trust-item">
|
||||
<svg class="zai-trust-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span>24/7 Support</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ===== Z.AI PROMO SECTION STYLES ===== */
|
||||
|
||||
/* CSS Variables for Easy Customization */
|
||||
:root {
|
||||
--zai-primary: #6366f1;
|
||||
--zai-primary-dark: #4f46e5;
|
||||
--zai-secondary: #8b5cf6;
|
||||
--zai-accent: #10b981;
|
||||
--zai-gold: #f59e0b;
|
||||
--zai-gold-light: #fbbf24;
|
||||
--zai-bg-light: #ffffff;
|
||||
--zai-bg-dark: #0f172a;
|
||||
--zai-text-primary: #1f2937;
|
||||
--zai-text-secondary: #6b7280;
|
||||
--zai-border: #e5e7eb;
|
||||
--zai-shadow: rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
/* Section Container */
|
||||
.zai-promo-section {
|
||||
padding: 4rem 1rem;
|
||||
margin: 3rem 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Background Gradient */
|
||||
.zai-promo-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Glass Card */
|
||||
.zai-glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
|
||||
0 2px 8px rgba(0, 0, 0, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Dark Mode Support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.zai-glass-card {
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.zai-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(135deg, var(--zai-gold) 0%, var(--zai-gold-light) 100%);
|
||||
border-radius: 100px;
|
||||
color: #ffffff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
|
||||
animation: zai-badge-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes zai-badge-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.zai-badge-icon {
|
||||
font-size: 1rem;
|
||||
animation: zai-badge-sparkle 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes zai-badge-sparkle {
|
||||
0%, 100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Content Layout */
|
||||
.zai-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 968px) {
|
||||
.zai-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Side */
|
||||
.zai-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Heading */
|
||||
.zai-heading {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
color: var(--zai-text-primary);
|
||||
}
|
||||
|
||||
.zai-gradient-text {
|
||||
background: linear-gradient(135deg, var(--zai-primary) 0%, var(--zai-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.zai-heading {
|
||||
color: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
/* Subheading */
|
||||
.zai-subheading {
|
||||
font-size: 1.125rem;
|
||||
color: var(--zai-text-secondary);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Features Grid */
|
||||
.zai-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.zai-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(99, 102, 241, 0.05);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(99, 102, 241, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.zai-feature:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: rgba(99, 102, 241, 0.2);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.zai-feature-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--zai-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.zai-feature span {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--zai-text-primary);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.zai-feature span {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Secondary CTA */
|
||||
.zai-secondary-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
color: var(--zai-text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.zai-secondary-cta:hover {
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
color: var(--zai-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.zai-secondary-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Right Side - Token Wrapper */
|
||||
.zai-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.zai-token-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Glow Effect Behind Token */
|
||||
.zai-token-glow {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: zai-glow-pulse 3s ease-in-out infinite;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes zai-glow-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Token Button Container */
|
||||
.zai-token-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
text-decoration: none;
|
||||
z-index: 1;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.zai-token-button:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
/* Premium Token Design */
|
||||
.zai-token {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.8),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
animation: zai-token-float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes zai-token-float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.zai-token:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(99, 102, 241, 0.25),
|
||||
0 12px 24px rgba(0, 0, 0, 0.12),
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.8),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Token Rings */
|
||||
.zai-token-ring-outer {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
background: linear-gradient(135deg, var(--zai-primary), var(--zai-secondary), var(--zai-accent)) border-box;
|
||||
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0.8;
|
||||
animation: zai-ring-rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes zai-ring-rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.zai-token-ring-middle {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--zai-gold);
|
||||
opacity: 0.6;
|
||||
animation: zai-ring-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes zai-ring-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.zai-token-ring-inner {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
/* Token Face */
|
||||
.zai-token-face {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Shimmer Effect */
|
||||
.zai-token-shimmer {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.5) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
animation: zai-shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes zai-shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Token Logo */
|
||||
.zai-token-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--zai-primary) 0%, var(--zai-secondary) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zai-token-logo svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #ffffff;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
/* Token Brand */
|
||||
.zai-token-brand {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, var(--zai-primary) 0%, var(--zai-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: 2px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Discount Badge */
|
||||
.zai-token-discount {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
background: linear-gradient(135deg, var(--zai-gold) 0%, var(--zai-gold-light) 100%);
|
||||
color: #ffffff;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
|
||||
animation: zai-discount-bounce 2s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes zai-discount-bounce {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Token CTA */
|
||||
.zai-token-cta {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zai-cta-primary {
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--zai-primary) 0%, var(--zai-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.zai-cta-secondary {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: var(--zai-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.zai-cta-secondary {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating Particles */
|
||||
.zai-particles {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zai-particle {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--zai-primary);
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
animation: zai-particle-float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.zai-particle-1 {
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
background: var(--zai-primary);
|
||||
}
|
||||
|
||||
.zai-particle-2 {
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation-delay: 1s;
|
||||
background: var(--zai-secondary);
|
||||
}
|
||||
|
||||
.zai-particle-3 {
|
||||
bottom: 25%;
|
||||
left: 20%;
|
||||
animation-delay: 2s;
|
||||
background: var(--zai-accent);
|
||||
}
|
||||
|
||||
.zai-particle-4 {
|
||||
top: 40%;
|
||||
right: 25%;
|
||||
animation-delay: 3s;
|
||||
background: var(--zai-gold);
|
||||
}
|
||||
|
||||
@keyframes zai-particle-float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Trust Badges */
|
||||
.zai-trust {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zai-trust-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--zai-text-secondary);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.zai-trust-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--zai-accent);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.zai-glass-card {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.zai-heading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.zai-subheading {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.zai-token {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.zai-token-glow {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.zai-token-logo {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.zai-token-logo svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.zai-token-brand {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.zai-cta-primary {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.zai-trust {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.zai-promo-section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.zai-glass-card {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.zai-heading {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.zai-token {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.zai-token-glow {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion Support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.zai-badge,
|
||||
.zai-badge-icon,
|
||||
.zai-token,
|
||||
.zai-token-glow,
|
||||
.zai-token-ring-outer,
|
||||
.zai-token-ring-middle,
|
||||
.zai-token-shimmer,
|
||||
.zai-token-discount,
|
||||
.zai-particle {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.zai-feature:hover,
|
||||
.zai-secondary-cta:hover,
|
||||
.zai-token-button:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus States for Accessibility */
|
||||
.zai-token-button:focus-visible,
|
||||
.zai-secondary-cta:focus-visible {
|
||||
outline: 3px solid var(--zai-primary);
|
||||
outline-offset: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.zai-promo-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user