oimwiodev/vela-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: swap purple for high-contrast blue, boost text readability

Browse Source
This commit is contained in:
root
2026-06-20 17:40:24 +00:00
parent d42befbaab
commit 38df4233e1
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -7
View File
@@ -14,7 +14,7 @@
</script>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0b;--bg-card:#121214;--bg-card-hover:#1a1a1e;--border:#1e1e22;--border-hover:#2a2a30;--text:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--accent-hover:#7f6ff0;--accent-glow:rgba(108,92,231,0.15);--green:#00c951;--red:#ff4757;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8);--cta-bg:linear-gradient(135deg,#6c5ce7,#a855f7);--cta-hover:#7c6ff7;--cta-shadow:0 0 28px rgba(108,92,231,0.25)}
:root{--bg:#0a0a0b;--bg-card:#121214;--bg-card-hover:#1a1a1e;--border:#1e1e22;--border-hover:#2a2a30;--text:#f0f0f5;--text-dim:#a0a0ab;--text-muted:#6a6a75;--accent:#3b82f6;--accent-hover:#60a5fa;--accent-glow:rgba(59,130,246,0.15);--green:#22c55e;--red:#ef4444;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8);--cta-bg:linear-gradient(135deg,#3b82f6,#60a5fa);--cta-hover:#4a8ff7;--cta-shadow:0 0 28px rgba(59,130,246,0.25)}
.light{--bg:#f5f5f7;--bg-card:#ffffff;--bg-card-hover:#f0f0f2;--border:#d2d2d7;--border-hover:#c0c0c5;--text:#1d1d1f;--text-dim:#6e6e73;--text-muted:#aeaeb2;--accent:#5e5ce6;--accent-hover:#4a48d4;--accent-glow:rgba(94,92,230,0.12);--green:#34c759;--red:#ff3b30;--nav-bg:rgba(245,245,247,0.85)}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
@@ -29,13 +29,13 @@
.theme-btn:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;transition:all .2s;border:none;font-family:inherit}
.btn-primary{background:var(--cta-bg);color:#fff;box-shadow:0 0 24px var(--accent-glow),var(--cta-shadow)}
.btn-primary:hover{background:linear-gradient(135deg,#7c6ff7,#b66dfa);transform:translateY(-2px);box-shadow:0 0 32px rgba(108,92,231,0.35)}
.btn-primary:hover{background:linear-gradient(135deg,#4a8ff7,#7ab8fc);transform:translateY(-2px);box-shadow:0 0 32px rgba(59,130,246,0.35)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-hover);background:var(--bg-card)}
.btn-sm{padding:.4rem 1rem;font-size:.8rem}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 4rem;max-width:1200px;margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:100px;background:rgba(108,92,231,.1);border:1px solid rgba(108,92,231,.2);font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:1.5rem;width:fit-content}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:100px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:1.5rem;width:fit-content}
.hero-badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem}
@@ -54,7 +54,7 @@
.tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.tier-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .2s;position:relative}
.tier-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.tier-card.popular{border-color:var(--accent);background:linear-gradient(135deg,rgba(108,92,231,.06),transparent 60%)}
.tier-card.popular{border-color:var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.06),transparent 60%)}
.tier-card.popular::before{content:'Best Value';position:absolute;top:-.7rem;right:1.5rem;background:var(--accent);color:#fff;font-size:.7rem;font-weight:600;padding:.2rem .7rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.lang-fr .tier-card.popular::before{content:'Meilleur Rapport Q/P'}
.tier-card.recommended{border-color:var(--green);background:linear-gradient(135deg,rgba(0,201,81,.06),transparent 60%)}
@@ -83,7 +83,7 @@
.step::before{content:counter(step);position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;color:#fff}
.step h3{font-weight:700;font-size:1rem;margin-bottom:.35rem}
.step p{color:var(--text-dim);font-size:.85rem;line-height:1.5}
.form-section{background:linear-gradient(135deg,rgba(108,92,231,.08),transparent)}
.form-section{background:linear-gradient(135deg,rgba(59,130,246,.08),transparent)}
.form-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.form-heading h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem}
.form-heading p{color:var(--text-dim);line-height:1.7}
@@ -146,8 +146,8 @@
footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem}
@media(max-width:768px){.hero-grid,.form-inner{grid-template-columns:1fr;gap:2rem}.hero-stats{grid-template-columns:1fr 1fr}.nav-links{gap:.75rem}.nav-links a,.theme-btn,.nav-links .btn{font-size:.75rem;padding:.35rem .65rem}.tiers-grid,.why-grid,.process-steps{grid-template-columns:1fr}}
.glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,231,.06) 0%,transparent 70%);pointer-events:none;z-index:-1;top:-200px;right:-200px}
.glow-2{bottom:-300px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(108,92,231,.04) 0%,transparent 70%)}
.glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 70%);pointer-events:none;z-index:-1;top:-200px;right:-200px}
.glow-2{bottom:-300px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%)}
</style>
<script>(function(){var t=localStorage.getItem('vela_theme');if(t==='light'||(!t&&window.matchMedia('(prefers-color-scheme:light)').matches))document.documentElement.classList.add('light')})();</script>
</head>