Skip to content

Commit 6471820

Browse files
gabrielefronzegabrielefronze
committed
Refactor signup success page styles and structure for improved user experience
This commit updates the `signup-success.html`, `signup-success.css`, and related CSS files to enhance the layout and styling of the signup success page. Key changes include the removal of outdated meta tags, restructuring of CSS variables for better maintainability, and adjustments to the form container for improved responsiveness. The overall design has been refined to provide a more cohesive and visually appealing user experience, aligning with modern web standards.
1 parent 0c59502 commit 6471820

5 files changed

Lines changed: 291 additions & 655 deletions

File tree

‎css/forms.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,9 @@ html.is-embedded .checkbox-label {
134134
}
135135

136136
html.is-embedded .form-container {
137-
max-width: 100%;
138-
margin: 0;
137+
width: 100%;
138+
max-width: 520px;
139+
margin: 0 auto;
139140
padding: var(--space-2xl);
140141
background: var(--background-color);
141142
border: 1px solid var(--border-color, var(--glassmorphism-border));

‎css/signup-success.css‎

Lines changed: 193 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,192 +1,234 @@
1-
/* Signup Success Page Styles */
1+
/* Signup success / welcome page */
22

3-
/* Success Hero Section */
4-
.success-hero {
5-
background: linear-gradient(135deg, var(--primary-color) 0%, #FF8C00 100%);
6-
color: white;
7-
padding: var(--space-4xl) 0;
3+
:root {
4+
--signup-success-nav-offset: 80px;
5+
--signup-success-max: 880px;
6+
}
7+
8+
body:has(.signup-success-page) {
9+
scroll-padding-top: calc(var(--signup-success-nav-offset) + var(--space-md));
10+
}
11+
12+
body:has(.signup-success-page) .breadcrumb {
13+
display: none;
14+
}
15+
16+
.signup-success-page {
17+
padding: calc(var(--signup-success-nav-offset) + var(--space-2xl)) 0 var(--space-4xl);
18+
}
19+
20+
.signup-success-page .signup-success-inner {
21+
max-width: var(--signup-success-max);
22+
margin: 0 auto;
23+
padding: 0 var(--space-lg);
24+
}
25+
26+
/* Hero */
27+
.signup-success-hero {
828
text-align: center;
9-
position: relative;
10-
overflow: hidden;
29+
margin-bottom: var(--space-3xl);
1130
}
1231

13-
.success-hero::before {
14-
content: '';
15-
position: absolute;
16-
top: 0;
17-
left: 0;
18-
right: 0;
19-
bottom: 0;
20-
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
21-
opacity: 0.3;
32+
.signup-success-eyebrow {
33+
display: inline-block;
34+
font-family: var(--font-secondary, 'Open Sans', sans-serif);
35+
font-size: 0.8rem;
36+
font-weight: 700;
37+
letter-spacing: 0.12em;
38+
text-transform: uppercase;
39+
color: var(--primary-color);
40+
margin: 0 0 var(--space-md);
2241
}
2342

24-
.success-icon {
25-
font-size: 4rem;
26-
margin-bottom: var(--space-lg);
27-
animation: bounce 2s infinite;
28-
position: relative;
29-
z-index: 2;
43+
.signup-success-hero .signup-success-title {
44+
font-family: var(--font-heading, 'Red Hat Display', sans-serif);
45+
font-size: clamp(2rem, 5vw, 3rem);
46+
font-weight: 800;
47+
line-height: 1.15;
48+
color: var(--text-color);
49+
margin: 0 0 var(--space-lg);
3050
}
3151

32-
@keyframes bounce {
33-
0%, 20%, 50%, 80%, 100% {
34-
transform: translateY(0);
35-
}
36-
40% {
37-
transform: translateY(-10px);
38-
}
39-
60% {
40-
transform: translateY(-5px);
41-
}
52+
.signup-success-hero .signup-success-title .pixel-accent {
53+
font-family: 'Argent Pixel Italic', var(--font-heading, 'Red Hat Display', sans-serif);
54+
font-style: italic;
55+
color: var(--primary-color);
4256
}
4357

44-
/* Next Steps Grid */
45-
.next-steps-grid {
46-
display: grid;
47-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
48-
gap: var(--space-xl);
49-
margin-top: var(--space-2xl);
58+
.signup-success-lead {
59+
font-family: var(--font-secondary, 'Open Sans', sans-serif);
60+
font-size: 1.125rem;
61+
line-height: 1.65;
62+
color: var(--text-secondary);
63+
max-width: 36rem;
64+
margin: 0 auto var(--space-xl);
5065
}
5166

52-
.step-card {
53-
background: white;
54-
border-radius: var(--radius-2xl);
55-
padding: var(--space-xl);
56-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
57-
transition: transform 0.3s ease, box-shadow 0.3s ease;
58-
border: 1px solid var(--border-color);
67+
.signup-success-email-alert {
68+
display: flex;
69+
align-items: flex-start;
70+
gap: var(--space-md);
71+
text-align: left;
72+
max-width: 32rem;
73+
margin: 0 auto;
74+
padding: var(--space-lg) var(--space-xl);
75+
background: color-mix(in srgb, var(--success-color, #28a745) 12%, var(--background-color));
76+
border: 1px solid color-mix(in srgb, var(--success-color, #28a745) 35%, transparent);
77+
border-radius: var(--radius-lg, 12px);
78+
color: var(--text-color);
79+
font-family: var(--font-secondary, 'Open Sans', sans-serif);
80+
font-size: 0.95rem;
81+
line-height: 1.5;
82+
}
83+
84+
.signup-success-email-alert i {
85+
color: var(--success-color, #28a745);
86+
font-size: 1.25rem;
87+
margin-top: 0.15rem;
88+
flex-shrink: 0;
89+
}
90+
91+
.signup-success-email-alert strong {
92+
color: var(--text-color);
93+
}
94+
95+
/* Downloads */
96+
.signup-success-downloads {
97+
background: var(--glassmorphism-background, var(--background-color));
98+
border: 1px solid var(--glassmorphism-border, var(--border-color));
99+
border-radius: var(--radius-xl, 16px);
100+
padding: var(--space-2xl);
101+
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
59102
}
60103

61-
.step-card:hover {
62-
transform: translateY(-5px);
63-
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
104+
.signup-success-downloads-header {
105+
text-align: center;
106+
margin-bottom: var(--space-2xl);
64107
}
65108

66-
.step-number {
67-
background: var(--primary-color);
68-
color: white;
69-
width: 40px;
70-
height: 40px;
71-
border-radius: var(--radius-full);
109+
.signup-success-downloads-header h2 {
110+
font-family: var(--font-heading, 'Red Hat Display', sans-serif);
111+
font-size: 1.5rem;
112+
font-weight: 700;
113+
color: var(--text-color);
114+
margin: 0 0 var(--space-sm);
72115
display: flex;
73116
align-items: center;
74117
justify-content: center;
75-
font-weight: bold;
76-
margin-bottom: var(--space-lg);
77-
font-size: 1.2rem;
118+
gap: var(--space-sm);
78119
}
79120

80-
/* Welcome Message */
81-
.welcome-message {
82-
background: white;
83-
border-radius: var(--radius-2xl);
84-
padding: var(--space-2xl);
85-
margin: var(--space-2xl) 0;
86-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
87-
border: 1px solid var(--border-color);
121+
.signup-success-downloads-header h2 i {
122+
color: var(--primary-color);
123+
}
124+
125+
.signup-success-downloads-header p {
126+
font-family: var(--font-secondary, 'Open Sans', sans-serif);
127+
color: var(--text-secondary);
128+
margin: 0;
129+
font-size: 0.95rem;
130+
}
131+
132+
.signup-success-download-grid {
133+
display: grid;
134+
grid-template-columns: repeat(2, 1fr);
135+
gap: var(--space-lg);
88136
}
89137

90-
/* Email Notification */
91-
.email-notification {
92-
background-color: var(--green-light);
93-
color: var(--white);
138+
.signup-download-card {
94139
padding: var(--space-lg);
95-
margin: var(--space-xl) 0;
96-
border-radius: var(--radius-lg);
97-
backdrop-filter: blur(10px);
98-
position: relative;
99-
z-index: 2;
100-
}
101-
102-
/* Success Page Specific Animations */
103-
.fade-in {
104-
opacity: 0;
105-
transform: translateY(20px);
106-
animation: fadeInUp 0.6s ease forwards;
107-
}
108-
109-
.fade-in:nth-child(1) { animation-delay: 0.1s; }
110-
.fade-in:nth-child(2) { animation-delay: 0.2s; }
111-
.fade-in:nth-child(3) { animation-delay: 0.3s; }
112-
.fade-in:nth-child(4) { animation-delay: 0.4s; }
113-
.fade-in:nth-child(5) { animation-delay: 0.5s; }
114-
.fade-in:nth-child(6) { animation-delay: 0.6s; }
115-
116-
@keyframes fadeInUp {
117-
to {
118-
opacity: 1;
119-
transform: translateY(0);
120-
}
140+
background: var(--background-color);
141+
border: 1px solid var(--border-color, var(--glassmorphism-border));
142+
border-radius: var(--radius-lg, 12px);
143+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
144+
}
145+
146+
.signup-download-card:hover {
147+
border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
148+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
149+
}
150+
151+
.signup-download-card h3 {
152+
font-family: var(--font-heading, 'Red Hat Display', sans-serif);
153+
font-size: 1rem;
154+
font-weight: 600;
155+
color: var(--text-color);
156+
margin: 0 0 var(--space-md);
157+
display: flex;
158+
align-items: center;
159+
gap: var(--space-sm);
160+
}
161+
162+
.signup-download-card .arch-buttons {
163+
display: flex;
164+
flex-direction: column;
165+
gap: var(--space-sm);
166+
margin-bottom: var(--space-sm);
167+
}
168+
169+
.signup-download-card .arch-buttons .btn {
170+
width: 100%;
171+
justify-content: center;
172+
display: inline-flex;
173+
align-items: center;
174+
gap: var(--space-xs);
175+
font-size: 0.9rem;
176+
padding: 0.65rem 1rem;
177+
}
178+
179+
.signup-download-card .download-info {
180+
display: block;
181+
font-family: var(--font-secondary, 'Open Sans', sans-serif);
182+
font-size: 0.8rem;
183+
color: var(--text-secondary);
184+
margin: 0;
185+
}
186+
187+
/* Full-width row for single-button platforms */
188+
.signup-download-card--compact .arch-buttons {
189+
flex-direction: row;
190+
}
191+
192+
.signup-download-card--compact .arch-buttons .btn {
193+
flex: 1;
121194
}
122195

123-
/* Responsive Design */
124196
@media (max-width: 768px) {
125-
.success-hero {
126-
padding: var(--space-2xl) 0;
127-
}
128-
129-
.success-icon {
130-
font-size: 3rem;
131-
}
132-
133-
.hero-title {
134-
font-size: 2.5rem;
197+
.signup-success-page {
198+
padding-top: calc(var(--signup-success-nav-offset) + var(--space-xl));
199+
padding-bottom: var(--space-3xl);
135200
}
136-
137-
.next-steps-grid {
201+
202+
.signup-success-download-grid {
138203
grid-template-columns: 1fr;
139-
gap: var(--space-lg);
140204
}
141-
142-
.step-card {
143-
padding: var(--space-lg);
205+
206+
.signup-success-downloads {
207+
padding: var(--space-xl);
144208
}
145209
}
146210

147211
@media (max-width: 480px) {
148-
.success-hero {
149-
padding: var(--space-xl) 0;
150-
}
151-
152-
.success-icon {
153-
font-size: 2.5rem;
154-
}
155-
156-
.hero-title {
157-
font-size: 2rem;
158-
}
159-
160-
.welcome-message {
161-
padding: var(--space-lg);
212+
.signup-download-card--compact .arch-buttons {
213+
flex-direction: column;
162214
}
163215
}
164216

165-
/* Reduced Motion Support */
166-
@media (prefers-reduced-motion: reduce) {
167-
.success-icon {
168-
animation: none;
169-
}
170-
171-
.fade-in {
172-
animation: none;
173-
opacity: 1;
174-
transform: none;
175-
}
176-
177-
.step-card:hover {
178-
transform: none;
179-
}
217+
/* Dark theme */
218+
[data-theme="dark"] .signup-success-downloads {
219+
background: color-mix(in srgb, var(--background-color) 92%, white);
220+
}
221+
222+
[data-theme="dark"] .signup-download-card {
223+
background: var(--background-color);
180224
}
181225

182-
/* Dark Theme Support */
183-
[data-theme="dark"] .step-card,
184-
[data-theme="dark"] .welcome-message {
185-
background: var(--bg-secondary);
186-
border-color: var(--border-color);
226+
[data-theme="dark"] .signup-success-email-alert {
227+
background: color-mix(in srgb, var(--success-color, #28a745) 18%, var(--background-color));
187228
}
188229

189-
[data-theme="dark"] .email-notification {
190-
background: rgba(0, 0, 0, 0.3);
191-
border-left-color: var(--primary-color);
192-
}
230+
@media (prefers-reduced-motion: reduce) {
231+
.signup-download-card {
232+
transition: none;
233+
}
234+
}

0 commit comments

Comments
 (0)