Skip to content

Commit 5ba29e3

Browse files
AtlasNexusTechAtlasNexusTech
committed
fix: restore English homepage visual system
1 parent a33a505 commit 5ba29e3

4 files changed

Lines changed: 218 additions & 180 deletions

File tree

‎css/home.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* Shared Atlas Nexus homepage visual system — FR + EN */
2+
/* ── Core ── */
3+
.hero-title { font-size: clamp(3.2rem, 9vw, 7rem); font-weight: 900; letter-spacing: -0.055em; line-height: 1.05; overflow: visible; }
4+
.gradient-text { background: linear-gradient(135deg, #2563EB 0%, #059669 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
5+
.glow-word { position: relative; display: inline-block; overflow: visible; padding: .035em .02em .13em .02em; margin: -.035em -.02em -.07em -.02em; background: linear-gradient(110deg, #0F172A 0%, #2563EB 32%, #7C3AED 56%, #059669 82%, #0F172A 100%); background-size: 240% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: agenticGlow 3.8s ease-in-out infinite; }
6+
@keyframes agenticGlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
7+
.hero-orb { position: absolute; inset: auto 4% 8% auto; width: min(34vw, 360px); height: min(34vw, 360px); border-radius: 999px; background: radial-gradient(circle at 35% 35%, rgba(37,99,235,.22), rgba(5,150,105,.12) 38%, transparent 68%); filter: blur(2px); pointer-events: none; }
8+
.agentic-card { position: relative; overflow: hidden; border-color: rgba(37,99,235,.28)!important; box-shadow: 0 18px 60px -28px rgba(37,99,235,.55); }
9+
.agentic-card::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(circle at 15% 0%, rgba(37,99,235,.13), transparent 38%), radial-gradient(circle at 95% 20%, rgba(5,150,105,.10), transparent 34%); pointer-events: none; }
10+
.agentic-card > * { position: relative; }
11+
.market-card { background: linear-gradient(145deg, #ffffff 0%, #f7fbff 52%, #eef8ff 100%); border-color: rgba(37,99,235,.22)!important; box-shadow: 0 18px 52px -34px rgba(37,99,235,.55); }
12+
.market-card:hover { box-shadow: 0 22px 70px -32px rgba(37,99,235,.65); }
13+
.section-title { font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
14+
.card-hover { transition: all 250ms ease; }
15+
.glass-nav { background: rgba(255,255,255,.70); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.30); box-shadow: 0 4px 30px rgba(0,0,0,.05); }
16+
.dark .glass-nav { background: rgba(15,23,42,.75); border-color: rgba(255,255,255,.08); box-shadow: 0 4px 30px rgba(0,0,0,.25); }
17+
.glass-nav-btn { background: rgba(255,255,255,.50); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.20); }
18+
.dark .glass-nav-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.06); }
19+
.nav-fixed-center { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 50; width: calc(100% - 2rem); max-width: 72rem; padding-left: 1rem; padding-right: 1rem; }
20+
.lang-switch { position: relative; display:inline-grid; grid-template-columns:1fr 1fr; align-items:center; min-width:92px; height:38px; padding:4px; border:1px solid rgba(37,99,235,.18); border-radius:999px; background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,245,253,.84)); color:#64748B; font-size:.76rem; font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px -20px rgba(37,99,235,.55); }
21+
.lang-switch::before { content:""; position:absolute; top:4px; bottom:4px; width:calc(50% - 4px); border-radius:999px; background:linear-gradient(135deg,#2563EB,#059669); box-shadow:0 10px 22px -12px rgba(37,99,235,.75); transition:transform 220ms ease; }
22+
.lang-switch[data-active="fr"]::before { transform:translateX(0); left:4px; }
23+
.lang-switch[data-active="en"]::before { transform:translateX(100%); left:4px; }
24+
.lang-switch a { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:30px; border-radius:999px; color:#64748B; letter-spacing:.03em; }
25+
.lang-switch a.active { color:white; }
26+
.lang-switch:hover { border-color:rgba(37,99,235,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px -22px rgba(37,99,235,.72); }
27+
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -6px rgba(37,99,235,0.1); border-color: #2563EB; }
28+
a, button, .card-hover { transition: all 200ms ease; }
29+
*:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 4px; }
30+
31+
/* ── Section title accent underline ── */
32+
.section-title { position: relative; padding-bottom: 0.5rem; }
33+
.section-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 3rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #2563EB, #059669); }
34+
.dark .section-title::after { background: linear-gradient(90deg, #60A5FA, #34D399); }
35+
36+
/* ── Small card dark mode ── */
37+
.dark a.border.border-border.rounded-xl { border-color: #334155; }
38+
.dark a.border.border-border.rounded-xl:hover { border-color: #3B82F6; }
39+
40+
.step-number { font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 900; background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #6366F1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
41+
42+
/* ── Step counter animation ── */
43+
.step-number.animate { animation: countPulse 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
44+
@keyframes countPulse { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
45+
.step-number.final { animation: none; transform: scale(1); opacity: 1; }
46+
47+
/* ── Scroll Reveal Animations ── */
48+
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
49+
.reveal.visible { opacity: 1; transform: translateY(0); }
50+
.reveal-delay-1 { transition-delay: 0.05s; }
51+
.reveal-delay-2 { transition-delay: 0.12s; }
52+
.reveal-delay-3 { transition-delay: 0.19s; }
53+
.reveal-delay-4 { transition-delay: 0.26s; }
54+
.reveal-delay-5 { transition-delay: 0.33s; }
55+
56+
/* ── Hero stagger children ── */
57+
.hero-stagger > * { opacity: 0; transform: translateY(30px); animation: heroFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
58+
.hero-stagger > *:nth-child(1) { animation-delay: 0.1s; }
59+
.hero-stagger > *:nth-child(2) { animation-delay: 0.25s; }
60+
.hero-stagger > *:nth-child(3) { animation-delay: 0.40s; }
61+
.hero-stagger > *:nth-child(4) { animation-delay: 0.55s; }
62+
.hero-stagger > *:nth-child(5) { animation-delay: 0.70s; }
63+
@keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } }
64+
65+
/* ── Motion accent card ── */
66+
.motion-card { position: relative; overflow: hidden; border-color: rgba(124,58,237,.28)!important; box-shadow: 0 18px 60px -28px rgba(124,58,237,.35); background: linear-gradient(145deg, #ffffff 0%, #faf5ff 52%, #f3e8ff 100%); }
67+
.motion-card::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(circle at 15% 0%, rgba(124,58,237,.10), transparent 38%), radial-gradient(circle at 95% 20%, rgba(59,130,246,.08), transparent 34%); pointer-events: none; }
68+
.motion-card > * { position: relative; }
69+
.motion-card:hover { box-shadow: 0 22px 70px -32px rgba(124,58,237,.45); transform: translateY(-4px); }
70+
71+
/* ATLAS_CARD_THEME_SWITCH_20260517: Framer purple, Agentic Identity blue */
72+
.framer-purple-card { position: relative; overflow: hidden; border-color: rgba(124,58,237,.24)!important; box-shadow: 0 18px 52px -34px rgba(124,58,237,.58); background: linear-gradient(145deg, #ffffff 0%, #fbf7ff 52%, #f5efff 100%); }
73+
.framer-purple-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(circle at 15% 0%, rgba(124,58,237,.13), transparent 38%), radial-gradient(circle at 95% 20%, rgba(168,85,247,.10), transparent 34%); }
74+
.framer-purple-card:hover { box-shadow: 0 22px 70px -32px rgba(124,58,237,.68); border-color: rgba(124,58,237,.40)!important; }
75+
.framer-purple-card > * { position: relative; }
76+
.framer-purple-card .framer-icon-bg { background: rgba(124,58,237,.10)!important; }
77+
.framer-purple-card .framer-accent { color: #7c3aed!important; }
78+
.framer-purple-card .framer-chip { background: rgba(124,58,237,.08)!important; color: #6d28d9!important; }
79+
.dark .framer-purple-card { background: linear-gradient(145deg, #111827 0%, #1a1530 52%, #241442 100%); border-color: rgba(167,139,250,.28)!important; box-shadow: 0 18px 52px -34px rgba(0,0,0,.6); }
80+
.dark .framer-purple-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(circle at 15% 0%, rgba(167,139,250,.17), transparent 38%), radial-gradient(circle at 95% 20%, rgba(124,58,237,.14), transparent 34%); }
81+
.dark .framer-purple-card > * { position: relative; }
82+
.dark .framer-purple-card .framer-icon-bg { background: rgba(124,58,237,.20)!important; }
83+
.dark .framer-purple-card .framer-accent { color: #C4B5FD!important; }
84+
.dark .framer-purple-card .framer-chip { background: rgba(124,58,237,.18)!important; color: #DDD6FE!important; }
85+
86+
.agentic-blue-card { position: relative; overflow: hidden; border-color: rgba(37,99,235,.22)!important; box-shadow: 0 18px 52px -34px rgba(37,99,235,.55); background: linear-gradient(145deg, #ffffff 0%, #f7fbff 52%, #eef8ff 100%); }
87+
.agentic-blue-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(circle at 15% 0%, rgba(37,99,235,.12), transparent 38%), radial-gradient(circle at 95% 20%, rgba(14,165,233,.10), transparent 34%); }
88+
.agentic-blue-card:hover { box-shadow: 0 22px 70px -32px rgba(37,99,235,.65); border-color: rgba(37,99,235,.36)!important; }
89+
.agentic-blue-card > * { position: relative; }
90+
.agentic-blue-card .agentic-icon-bg { background: rgba(37,99,235,.10)!important; }
91+
.agentic-blue-card .agentic-accent { color: #2563eb!important; }
92+
.agentic-blue-card .agentic-chip { background: rgba(37,99,235,.07)!important; color: #1d4ed8!important; }
93+
.dark .agentic-blue-card { background: linear-gradient(145deg, #111827 0%, #111d30 52%, #0e1f2d 100%); border-color: rgba(59,130,246,.25)!important; box-shadow: 0 18px 52px -34px rgba(0,0,0,.6); }
94+
.dark .agentic-blue-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(circle at 15% 0%, rgba(59,130,246,.15), transparent 38%), radial-gradient(circle at 95% 20%, rgba(14,165,233,.12), transparent 34%); }
95+
.dark .agentic-blue-card > * { position: relative; }
96+
.dark .agentic-blue-card .agentic-icon-bg { background: rgba(59,130,246,.16)!important; }
97+
.dark .agentic-blue-card .agentic-accent { color: #93C5FD!important; }
98+
.dark .agentic-blue-card .agentic-chip { background: rgba(59,130,246,.14)!important; color: #BFDBFE!important; }
99+
100+
.offer-card { display:flex; flex-direction:column; }
101+
.offer-card .offer-spacer { flex:1 1 auto; }
102+
.offer-card .offer-price { margin-top:auto; line-height:1.15; }
103+
.offer-card .offer-quote { display:block; margin-top:.35rem; line-height:1.25; }
104+
@media (max-width: 639px) {
105+
.offer-card { padding: 1.25rem !important; }
106+
.offer-card h3 { font-size: 1.25rem; }
107+
}
108+
109+
/* ── Accessibility ── */
110+
@media (prefers-reduced-motion: reduce) {
111+
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
112+
.reveal { opacity: 1; transform: none; }
113+
.hero-stagger > * { opacity: 1; transform: none; animation: none; }
114+
}
115+
116+
/* ── Dark mode overrides ── */
117+
.dark .bg-white, .dark .bg-surface { background-color: #0B1120; }
118+
.dark .text-slate-600 { color: #CBD5E1; }
119+
.dark .text-slate-500 { color: #94A3B8; }
120+
.dark .text-slate-400 { color: #64748B; }
121+
.dark .border-border { border-color: #1E293B; }
122+
.dark a.hover\:text-primary:hover, .dark .hover\:text-primary:hover { color: #60A5FA; }
123+
.dark a.hover\:text-primary-dark:hover { color: #93C5FD; }
124+
.dark .hero-orb { background: radial-gradient(circle at 35% 35%, rgba(59,130,246,.28), rgba(5,150,105,.15) 45%, transparent 72%); }
125+
.dark .glow-word { background: linear-gradient(110deg, #60A5FA 0%, #818CF8 28%, #C084FC 52%, #34D399 78%, #60A5FA 100%); background-size: 240% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation-name: agenticGlowDark; }
126+
@keyframes agenticGlowDark { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
127+
.dark .gradient-text { background: linear-gradient(135deg, #60A5FA 0%, #34D399 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
128+
.dark .market-card { background: linear-gradient(145deg, #111827 0%, #111d30 52%, #0e1f2d 100%); border-color: rgba(59,130,246,.25)!important; box-shadow: 0 18px 52px -34px rgba(0,0,0,.6); }
129+
.dark .market-card:hover { box-shadow: 0 22px 70px -32px rgba(59,130,246,.25); }
130+
.dark .agentic-card { border-color: rgba(59,130,246,.3)!important; box-shadow: 0 18px 60px -28px rgba(59,130,246,.35); }
131+
.dark .agentic-card::before { background: radial-gradient(circle at 15% 0%, rgba(59,130,246,.15), transparent 38%), radial-gradient(circle at 95% 20%, rgba(5,150,105,.12), transparent 34%); }
132+
.dark .motion-card { background: linear-gradient(145deg, #111827 0%, #1a1428 52%, #1a1228 100%); border-color: rgba(124,58,237,.3)!important; box-shadow: 0 18px 60px -28px rgba(124,58,237,.25); }
133+
.dark .motion-card::before { background: radial-gradient(circle at 15% 0%, rgba(124,58,237,.12), transparent 38%), radial-gradient(circle at 95% 20%, rgba(59,130,246,.1), transparent 34%); }
134+
.dark .motion-card:hover { box-shadow: 0 22px 70px -32px rgba(124,58,237,.35); }
135+
.dark .card-hover:hover { box-shadow: 0 12px 32px -6px rgba(0,0,0,.4); }
136+
.dark .card-hover.hover\:border-primary:hover { border-color: #3B82F6; }
137+
.dark .card-hover.hover\:border-purple-500:hover { border-color: #8B5CF6; }
138+
.dark .bg-green-100 { background-color: #064E3B; }
139+
.dark .text-green-600 { color: #34D399; }
140+
.dark .bg-green-50 { background-color: #064E3B; }
141+
.dark .bg-purple-100 { background-color: #3B1F6E; }
142+
.dark .bg-purple-50 { background-color: #3B1F6E; }
143+
.dark .bg-accent\/10 { background-color: rgba(5,150,105,.15); }
144+
.dark .bg-accent\/5 { background-color: rgba(5,150,105,.1); }
145+
.dark .step-number { background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #818CF8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
146+
.dark .text-foreground, .dark strong.text-foreground { color: #F1F5F9; }
147+
.dark .border-purple-200 { border-color: #4C1D95; }
148+
.dark .text-purple-700 { color: #C4B5FD; }
149+
.dark .text-purple-600 { color: #A78BFA; }
150+
.dark .hover\:text-purple-700:hover { color: #C4B5FD; }
151+
.dark .hover\:text-purple-800:hover { color: #DDD6FE; }
152+
.dark .bg-foreground { background-color: #1A2235; }
153+
.dark .hover\:border-primary:hover { border-color: #3B82F6; }
154+
.dark .hover\:text-primary:hover { color: #3B82F6; }
155+
156+
/* ── Dark mode buttons ── */
157+
.dark .bg-primary { box-shadow: 0 0 18px -4px rgba(37,99,235,.45); }
158+
.dark .bg-primary:hover { box-shadow: 0 0 28px -4px rgba(37,99,235,.65); }
159+
.dark .bg-purple-600 { box-shadow: 0 0 18px -4px rgba(124,58,237,.4); }
160+
.dark .bg-purple-600:hover { box-shadow: 0 0 28px -4px rgba(124,58,237,.6); }
161+
.dark .border.border-border { border-color: #334155; }
162+
.dark a.border.border-border:hover { border-color: #3B82F6; }
163+
.dark a.border.border-border.hover\:text-primary:hover { color: #3B82F6; }
164+
.dark a.border.border-border.hover\:border-purple-500:hover { border-color: #8B5CF6; color: #A78BFA; }

0 commit comments

Comments
 (0)