Skip to content

Commit 898ab9f

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #435 from Samridha0305/get-started-dark-theme
resolved dark theme(Get started)
2 parents 55d07ad + e32e130 commit 898ab9f

File tree

1 file changed

+168
-95
lines changed

1 file changed

+168
-95
lines changed

‎src/pages/get-started/styles.module.css‎

Lines changed: 168 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,9 @@
11
/* Base styles - Mobile First */
22

33
/* Dark theme support */
4-
[data-theme='dark'] .features {
5-
background: var(--dark-bg-primary);
6-
color: var(--dark-text-primary);
7-
}
8-
9-
[data-theme='dark'] .sectionHeader h2 {
10-
color: var(--dark-text-primary);
11-
}
12-
13-
[data-theme='dark'] .sectionHeader p {
14-
color: var(--dark-text-secondary);
15-
}
16-
17-
[data-theme='dark'] .featuresGrid {
18-
background: var(--dark-bg-primary);
19-
}
20-
21-
[data-theme='dark'] .feature {
22-
background: var(--dark-bg-secondary);
23-
border-color: var(--dark-border);
24-
color: var(--dark-text-primary);
25-
}
26-
27-
[data-theme='dark'] .feature:hover {
28-
background: var(--dark-card-hover-bg);
29-
box-shadow: var(--dark-shadow-lg);
30-
}
31-
32-
[data-theme='dark'] .statsSection {
33-
background: var(--dark-bg-secondary);
34-
color: var(--dark-text-primary);
35-
}
36-
37-
[data-theme='dark'] .statCard {
38-
background: var(--dark-bg-tertiary);
39-
color: var(--dark-text-primary);
40-
border-color: var(--dark-border);
4+
[data-theme='dark'] {
5+
background: linear-gradient(135deg, #000000 0%, #0a0a0f 100%);
6+
color: #f9fafb;
417
}
428

439
[data-theme='dark'] .learningPath {
@@ -443,7 +409,7 @@
443409
padding: 1.75rem 1.5rem;
444410
border-radius: 12px;
445411
background: white;
446-
box-shadow: 0 4px 12px rgba(30, 58, 138, 0.06);
412+
box-shadow: none !important;
447413
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
448414
border: 1px solid rgba(226, 232, 240, 0.8);
449415
position: relative;
@@ -478,7 +444,7 @@
478444

479445
.feature:hover {
480446
transform: translateY(-8px) translateZ(0);
481-
box-shadow: 0 12px 32px rgba(30, 58, 138, 0.12);
447+
box-shadow: none !important;
482448
border-color: rgba(191, 219, 254, 0.8);
483449
}
484450

@@ -634,6 +600,82 @@
634600
.feature:hover .featureDescription {
635601
color: #475569;
636602
}
603+
/*dark theme*/
604+
605+
[data-theme='dark'] .features {
606+
background: radial-gradient(circle at top left, #0f172a, #020617);
607+
color: #f8fafc;
608+
}
609+
610+
[data-theme='dark'] .features::before {
611+
background: linear-gradient(to bottom right, transparent 49%, #0f172a 50%),
612+
linear-gradient(-45deg, #0f172a 16px, transparent 0);
613+
}
614+
615+
[data-theme='dark'] .feature {
616+
background: linear-gradient(145deg, #111827, #1e293b);
617+
border: 1px solid rgba(148, 163, 184, 0.15);
618+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(59, 130, 246, 0.05);
619+
color: #f1f5f9;
620+
transition: all 0.3s ease-in-out;
621+
}
622+
623+
[data-theme='dark'] .feature:hover {
624+
background: linear-gradient(145deg, #1e293b, #0f172a);
625+
border-color: rgba(96, 165, 250, 0.5);
626+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7),
627+
0 0 18px rgba(96, 165, 250, 0.3);
628+
transform: translateY(-8px) scale(1.02);
629+
}
630+
631+
/* Title */
632+
[data-theme='dark'] .featureTitle {
633+
color: #f8fafc;
634+
}
635+
636+
[data-theme='dark'] .featureTitle::after {
637+
background: linear-gradient(90deg, #60a5fa, #a78bfa);
638+
}
639+
640+
/* Description */
641+
[data-theme='dark'] .featureDescription {
642+
color: #cbd5e1;
643+
}
644+
645+
[data-theme='dark'] .feature:hover .featureDescription {
646+
color: #e2e8f0;
647+
}
648+
649+
/* Icons */
650+
[data-theme='dark'] .featureIcon {
651+
background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(167, 139, 250, 0.15));
652+
color: #60a5fa;
653+
border: 1px solid rgba(167, 139, 250, 0.25);
654+
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
655+
transition: all 0.3s ease;
656+
}
657+
658+
[data-theme='dark'] .feature:hover .featureIcon {
659+
color: #a78bfa;
660+
box-shadow: 0 6px 18px rgba(167, 139, 250, 0.4),
661+
0 0 16px rgba(96, 165, 250, 0.3);
662+
transform: translateY(-4px) scale(1.1);
663+
}
664+
665+
/* Headings inside feature */
666+
[data-theme='dark'] .feature h3 {
667+
color: #f8fafc;
668+
}
669+
670+
[data-theme='dark'] .feature h3::after {
671+
background: linear-gradient(90deg, #60a5fa, #a78bfa);
672+
}
673+
674+
/* Hover underline glow */
675+
[data-theme='dark'] .feature:hover::before {
676+
background: linear-gradient(90deg, #60a5fa, #a78bfa);
677+
}
678+
637679

638680
/* Buttons Container */
639681
.buttons {
@@ -1202,82 +1244,44 @@
12021244
}
12031245

12041246
.statCard {
1205-
background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
1206-
backdrop-filter: blur(12px) saturate(180%);
1207-
-webkit-backdrop-filter: blur(12px) saturate(180%);
1247+
background: linear-gradient(145deg, #ffffff, #f8fafc);
12081248
border-radius: 18px;
12091249
padding: 2.25rem 1.75rem;
12101250
text-align: center;
12111251
position: relative;
12121252
overflow: hidden;
1213-
border: 1px solid rgba(99, 102, 241, 0.25);
1253+
border: 1px solid rgba(0,0,0,0.1);
12141254
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
12151255
z-index: 1;
12161256
height: 100%;
12171257
display: flex;
12181258
flex-direction: column;
12191259
align-items: center;
12201260
justify-content: center;
1221-
box-shadow:
1222-
0 10px 30px -5px rgba(0, 0, 0, 0.25),
1223-
0 4px 6px -4px rgba(0, 0, 0, 0.1);
1261+
box-shadow: none !important;
12241262
transform: translateZ(0);
12251263
will-change: transform;
12261264
}
12271265

12281266
.statCard::before {
1229-
content: '';
1230-
position: absolute;
1231-
top: -50%;
1232-
left: -50%;
1233-
width: 200%;
1234-
height: 200%;
1235-
background: radial-gradient(
1236-
circle at 50% 50%,
1237-
rgba(99, 102, 241, 0.15) 0%,
1238-
rgba(99, 102, 241, 0) 70%
1239-
);
1240-
pointer-events: none;
1241-
transition: opacity 0.6s ease;
1242-
opacity: 0;
1243-
z-index: -1;
1267+
display: none !important;
1268+
content: none !important;
12441269
}
12451270

1271+
/* Hover Glow Effect */
12461272
.statCard:hover {
1247-
transform: translateZ(0) translateY(-5px);
1273+
transform: translateY(-6px) scale(1.02);
12481274
border-color: rgba(99, 102, 241, 0.4);
12491275
box-shadow:
1250-
0 20px 40px -10px rgba(0, 0, 0, 0.3),
1251-
0 10px 10px -10px rgba(0, 0, 0, 0.1);
1252-
}
1253-
1254-
.statCard:hover::before {
1255-
opacity: 1;
1256-
}
1257-
1258-
.statCard::before {
1259-
content: '';
1260-
position: absolute;
1261-
top: 0;
1262-
left: 0;
1263-
right: 0;
1264-
bottom: 0;
1265-
background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), transparent);
1266-
z-index: -1;
1267-
opacity: 0;
1268-
transition: opacity 0.4s ease;
1269-
}
1270-
1271-
.statCard:hover {
1272-
transform: translateY(-5px);
1273-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
1274-
border-color: rgba(79, 70, 229, 0.3);
1276+
0 0 20px rgba(99, 102, 241, 0.4),
1277+
0 10px 30px rgba(0, 0, 0, 0.15);
12751278
}
12761279

12771280
.statCard:hover::before {
12781281
opacity: 1;
12791282
}
12801283

1284+
/* ===== Stat Value ===== */
12811285
.statValue {
12821286
font-size: 3.25rem;
12831287
font-weight: 800;
@@ -1323,6 +1327,7 @@
13231327
opacity: 1;
13241328
}
13251329

1330+
/* ===== Stat Label ===== */
13261331
.statLabel {
13271332
font-size: 1.05rem;
13281333
font-weight: 600;
@@ -1331,22 +1336,26 @@
13311336
text-transform: uppercase;
13321337
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
13331338
letter-spacing: 0.1em;
1334-
background: linear-gradient(90deg, #e0e7ff, #a5b4fc, #818cf8);
1339+
background: linear-gradient(90deg, #6366f1, #4f46e5);
13351340
-webkit-background-clip: text;
13361341
background-clip: text;
1337-
color: #e0e7ff;
1338-
-webkit-text-fill-color: transparent;
1339-
text-fill-color: transparent;
1340-
position: relative;
1342+
/* position: relative; */
13411343
padding: 0.5rem 0;
13421344
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
13431345
opacity: 0.9;
13441346
}
13451347

1348+
/* Light Theme label contrast */
1349+
body:not(.dark) .statLabel {
1350+
color: #111111;
1351+
-webkit-text-fill-color: initial;
1352+
background: none;
1353+
opacity: 0.8;
1354+
}
1355+
13461356
.statCard:hover .statLabel {
13471357
opacity: 1;
13481358
transform: translateY(1px);
1349-
background-position: 100% center;
13501359
}
13511360

13521361
.statLabel::after {
@@ -1366,16 +1375,80 @@
13661375
transform: translateX(-50%) scaleX(1);
13671376
}
13681377

1369-
.statCard:hover .statLabel {
1378+
/* .statCard:hover .statLabel {
13701379
color: white;
13711380
opacity: 1;
1372-
}
1381+
} */
13731382

13741383
@keyframes float {
13751384
0%, 100% { transform: translateY(0); }
13761385
50% { transform: translateY(-10px); }
13771386
}
13781387

1388+
[data-theme='dark'] .statCard {
1389+
background: linear-gradient(145deg, #0f172a, #1e293b);
1390+
border: 1px solid rgba(148, 163, 184, 0.15);
1391+
border-radius: 18px;
1392+
padding: 2.25rem 1.75rem;
1393+
text-align: center;
1394+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
1395+
transition: all 0.3s ease-in-out;
1396+
color: #f8fafc;
1397+
1398+
}
1399+
1400+
1401+
[data-theme='dark'] .statCard:hover {
1402+
background: linear-gradient(145deg, #1e293b, #0f172a);
1403+
border-color: rgba(96, 165, 250, 0.4);
1404+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
1405+
transform: translateY(-6px) scale(1.02);
1406+
}
1407+
1408+
/* Big numbers */
1409+
[data-theme='dark'] .statValue {
1410+
font-size: 3.25rem; /* SAME as light theme */
1411+
font-weight: 800;
1412+
background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
1413+
background-size: 200% auto;
1414+
-webkit-background-clip: text;
1415+
background-clip: text;
1416+
color: transparent;
1417+
margin: 0.5rem 0 1rem;
1418+
line-height: 1.1;
1419+
font-family: 'Poppins', sans-serif;
1420+
text-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
1421+
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
1422+
}
1423+
[data-theme='dark'] .statCard:hover .statValue {
1424+
background-position: 100% center;
1425+
text-shadow: 0 4px 12px rgba(96, 165, 250, 0.6);
1426+
transform: scale(1.03);
1427+
}
1428+
1429+
/* Labels */
1430+
[data-theme='dark'] .statLabel {
1431+
font-size: 1.05rem;
1432+
font-weight: 600;
1433+
margin: 0.25rem 0 0;
1434+
text-transform: uppercase;
1435+
font-family: 'Inter', sans-serif;
1436+
letter-spacing: 0.1em;
1437+
color: rgba(255, 255, 255, 0.8);
1438+
opacity: 0.9;
1439+
text-shadow: none;
1440+
transition: color 0.3s ease, opacity 0.3s ease;
1441+
}
1442+
[data-theme="dark"] .statLabel,
1443+
[data-theme="dark"] .statLabel * {
1444+
color: #ffffff !important;
1445+
}
1446+
[data-theme='dark'] .statCard:hover .statLabel {
1447+
color: #e2e8f0;
1448+
opacity: 1;
1449+
}
1450+
1451+
13791452
/* Learning Paths Section */
13801453
.learningPaths {
13811454
/* padding: 6rem 0; */

0 commit comments

Comments
 (0)