Skip to content

Commit 046edf6

Browse files
Siri-RaySiri-Ray
committed
feat(web): match Go campaign demo UI
1 parent b6ff6d5 commit 046edf6

6 files changed

Lines changed: 414 additions & 88 deletions

File tree

‎apps/web/src/components/DeepSeekV4FlashCampaign.module.css‎

Lines changed: 301 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,279 @@
66
-webkit-backdrop-filter: blur(6px) saturate(0.96);
77
}
88

9+
.goWelcomeBackdrop {
10+
z-index: 1700;
11+
display: grid;
12+
place-items: center;
13+
padding: 24px;
14+
background: rgba(17, 18, 15, 0.46);
15+
backdrop-filter: blur(8px);
16+
-webkit-backdrop-filter: blur(8px);
17+
}
18+
19+
.goWelcomeModal {
20+
position: relative;
21+
display: grid;
22+
grid-template-columns: minmax(230px, .78fr) minmax(380px, 1.22fr);
23+
width: min(760px, 100%);
24+
min-height: 430px;
25+
max-height: calc(100dvh - 48px);
26+
padding: 0;
27+
overflow: hidden;
28+
color: #11120f;
29+
background: #fff;
30+
border: 0;
31+
border-radius: 18px;
32+
box-shadow: 0 28px 80px rgba(17, 18, 15, .2);
33+
}
34+
35+
.goWelcomeModal:focus { outline: none; }
36+
37+
.goWelcomeModal .goWelcomeClose {
38+
position: absolute;
39+
z-index: 2;
40+
top: 18px;
41+
right: 18px;
42+
display: grid;
43+
place-items: center;
44+
width: 34px;
45+
height: 34px;
46+
padding: 0;
47+
color: #272a25;
48+
cursor: pointer;
49+
background: rgba(17, 18, 15, .07);
50+
border: 0;
51+
border-radius: 50%;
52+
}
53+
54+
.goWelcomeModal .goWelcomeClose:hover {
55+
color: #11120f;
56+
background: rgba(17, 18, 15, .12);
57+
}
58+
59+
.goWelcomeVisual {
60+
position: relative;
61+
isolation: isolate;
62+
display: flex;
63+
flex-direction: column;
64+
justify-content: flex-end;
65+
padding: 32px;
66+
overflow: hidden;
67+
background:
68+
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .22), transparent 25%),
69+
linear-gradient(145deg, #82e969 0%, #b9f3a8 68%, #d7f6cd 100%);
70+
}
71+
72+
.goWelcomeVisual::before {
73+
position: absolute;
74+
inset: 0;
75+
z-index: -1;
76+
pointer-events: none;
77+
content: '';
78+
background-image:
79+
linear-gradient(rgba(35, 101, 28, .1) 1px, transparent 1px),
80+
linear-gradient(90deg, rgba(35, 101, 28, .1) 1px, transparent 1px);
81+
background-size: 30px 30px;
82+
mask-image: radial-gradient(44% 34% at 38% 31%, #000 0%, rgba(0, 0, 0, .88) 34%, rgba(0, 0, 0, .4) 66%, rgba(0, 0, 0, .18) 100%);
83+
}
84+
85+
.goWelcomeVisual > span {
86+
align-self: flex-start;
87+
margin-bottom: auto;
88+
padding: 6px 9px;
89+
color: #78ea57;
90+
font-size: 8px;
91+
font-weight: 750;
92+
line-height: 1;
93+
letter-spacing: .06em;
94+
background: #11120f;
95+
border-radius: 999px;
96+
}
97+
98+
.goWelcomeLockup {
99+
display: flex;
100+
align-items: flex-end;
101+
gap: 18px;
102+
}
103+
104+
.goWelcomeLockup > strong,
105+
.goWelcomeLockup > b {
106+
color: #15220f;
107+
font-family: Inter, Arial, sans-serif;
108+
font-size: 78px;
109+
font-weight: 650;
110+
line-height: .82;
111+
letter-spacing: -.07em;
112+
}
113+
114+
.goWelcomeLockup > strong { font-weight: 700; }
115+
116+
.goWelcomeLockup > b small {
117+
display: inline-block;
118+
margin-right: 3px;
119+
font-size: 24px;
120+
font-weight: 600;
121+
vertical-align: 30px;
122+
}
123+
124+
.goWelcomeVisual > small {
125+
max-width: 230px;
126+
margin-top: 22px;
127+
color: #42533d;
128+
font-size: 13px;
129+
font-weight: 400;
130+
line-height: 1.55;
131+
letter-spacing: -.012em;
132+
}
133+
134+
.goWelcomeCopy {
135+
display: flex;
136+
flex-direction: column;
137+
justify-content: flex-start;
138+
padding: 54px 42px 28px;
139+
}
140+
141+
.goWelcomeCopy h2 {
142+
margin: 0 0 9px;
143+
color: #11120f;
144+
font-size: 30px;
145+
font-weight: 680;
146+
line-height: 1.08;
147+
letter-spacing: -.04em;
148+
}
149+
150+
.goWelcomeSubtitle {
151+
max-width: 420px;
152+
margin: 0;
153+
color: #5f645b;
154+
font-size: 13px;
155+
line-height: 1.45;
156+
}
157+
158+
.goWelcomeModelLogos {
159+
display: flex;
160+
align-items: center;
161+
gap: 18px;
162+
margin: 12px 0 14px;
163+
}
164+
165+
.goWelcomeModelLogos > span {
166+
display: grid;
167+
place-items: center;
168+
width: 26px;
169+
height: 26px;
170+
color: #20221e;
171+
}
172+
173+
.goWelcomeModelLogos > span:last-child { width: 32px; }
174+
175+
.goWelcomeModelLogos img {
176+
display: block;
177+
width: 22px;
178+
height: 22px;
179+
object-fit: contain;
180+
opacity: .92;
181+
filter: brightness(0) saturate(100%);
182+
}
183+
184+
.goWelcomeModelLogos > span:last-child img {
185+
width: 32px;
186+
height: 22px;
187+
}
188+
189+
.goWelcomePlanBenefit {
190+
padding: 12px 16px;
191+
background: #f2f8ef;
192+
border-radius: 12px;
193+
}
194+
195+
.goWelcomePlanBenefit > strong {
196+
display: block;
197+
margin-bottom: 7px;
198+
color: #263322;
199+
font-size: 13px;
200+
line-height: 1.25;
201+
}
202+
203+
.goWelcomePlanBenefit ul {
204+
display: grid;
205+
grid-template-columns: 1fr;
206+
gap: 7px;
207+
margin: 0;
208+
padding: 0;
209+
list-style: none;
210+
}
211+
212+
.goWelcomePlanBenefit li {
213+
display: flex;
214+
align-items: center;
215+
justify-content: space-between;
216+
gap: 16px;
217+
color: #30352d;
218+
font-size: 11px;
219+
line-height: 1.2;
220+
}
221+
222+
.goWelcomeBenefitModel {
223+
display: flex;
224+
align-items: center;
225+
gap: 8px;
226+
min-width: 0;
227+
}
228+
229+
.goWelcomeBenefitModel i {
230+
display: grid;
231+
flex: 0 0 20px;
232+
place-items: center;
233+
width: 20px;
234+
height: 20px;
235+
background: #20231f;
236+
border-radius: 5px;
237+
}
238+
239+
.goWelcomeBenefitModel img {
240+
width: 14px;
241+
height: 14px;
242+
object-fit: contain;
243+
filter: invert(1) brightness(2);
244+
}
245+
246+
.goWelcomePlanBenefit li small {
247+
flex: none;
248+
padding: 4px 7px;
249+
color: #287f23;
250+
font-size: 8px;
251+
font-weight: 700;
252+
line-height: 1;
253+
background: #dff4d9;
254+
border-radius: 999px;
255+
}
256+
257+
.goWelcomeModal .goWelcomePrimary {
258+
display: flex;
259+
align-items: center;
260+
justify-content: center;
261+
gap: 9px;
262+
min-height: 48px;
263+
margin-top: 14px;
264+
padding: 0 18px;
265+
color: #14210f;
266+
font-size: 13px;
267+
font-weight: 750;
268+
cursor: pointer;
269+
background: #78ea57;
270+
border: 0;
271+
border-radius: 12px;
272+
}
273+
274+
.goWelcomeModal .goWelcomePrimary:hover {
275+
color: #14210f;
276+
background: #86f066;
277+
}
278+
279+
.goWelcomeModal .goWelcomePrimary svg { transition: transform .2s; }
280+
.goWelcomeModal .goWelcomePrimary:hover svg { transform: translateX(3px); }
281+
9282
.panel {
10283
position: relative;
11284
width: min(560px, calc(100vw - 32px));
@@ -166,29 +439,6 @@
166439

167440
.countdown small { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
168441

169-
.goOffer {
170-
display: grid;
171-
grid-template-columns: auto 1fr;
172-
align-items: baseline;
173-
gap: 2px 10px;
174-
margin-top: 12px;
175-
padding: 13px 14px;
176-
border: 1px solid var(--green-border);
177-
border-radius: var(--radius);
178-
background: var(--green-bg);
179-
}
180-
181-
.goOffer strong {
182-
grid-row: 1 / 3;
183-
color: var(--text-strong);
184-
font-size: 30px;
185-
font-weight: 760;
186-
letter-spacing: -.045em;
187-
}
188-
189-
.goOffer span { color: var(--text-strong); font-size: 13px; font-weight: 720; }
190-
.goOffer small { color: var(--text-muted); font-size: 11px; }
191-
192442
.boundary {
193443
margin: 12px 0 22px;
194444
color: var(--text-faint);
@@ -232,6 +482,34 @@
232482
}
233483

234484
@media (max-width: 560px) {
485+
.goWelcomeBackdrop { padding: 12px; }
486+
487+
.goWelcomeModal {
488+
grid-template-columns: 1fr;
489+
width: min(520px, 100%);
490+
min-height: 0;
491+
max-height: calc(100dvh - 24px);
492+
overflow: auto;
493+
}
494+
495+
.goWelcomeVisual {
496+
min-height: 175px;
497+
padding: 24px;
498+
}
499+
500+
.goWelcomeLockup > strong,
501+
.goWelcomeLockup > b { font-size: 64px; }
502+
503+
.goWelcomeLockup > b small {
504+
font-size: 20px;
505+
vertical-align: 24px;
506+
}
507+
508+
.goWelcomeVisual > small { margin-top: 14px; }
509+
510+
.goWelcomeCopy { padding: 30px 24px 26px; }
511+
.goWelcomeCopy h2 { font-size: 28px; }
512+
235513
.panel {
236514
width: min(440px, calc(100vw - 24px));
237515
max-height: calc(100dvh - 24px);

0 commit comments

Comments
 (0)