Skip to content

Commit 9c1123b

Browse files
kanishka-commitskanishka-commits
committed
Create Modular CSS for ToS
1 parent 01e602d commit 9c1123b

File tree

1 file changed

+232
-0
lines changed

1 file changed

+232
-0
lines changed

‎src/pages/terms-service/index.module.css‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
/* ---------------------------------- */
2+
/* 1. Color Variables */
3+
/* ---------------------------------- */
4+
5+
:root {
6+
--page-bg: #eef0f4;
7+
--card-bg: #eef0f4;
8+
--text-color: #3b4353;
9+
--text-color-light: #6e7a91;
10+
--accent-color: rgb(105, 81, 161);
11+
--accent-gradient-light: linear-gradient(
12+
135deg,
13+
#5c6c9a 0%,
14+
#76698f 50%,
15+
#9a6d82 100%
16+
);
17+
18+
--border-color: #d1d9e6;
19+
--shadow-light: -8px -8px 16px #ffffff;
20+
--shadow-dark: 8px 8px 16px #d1d9e6;
21+
--inset-shadow-light: inset 6px 6px 12px #d1d9e6;
22+
--inset-shadow-dark: inset -6px -6px 12px #ffffff;
23+
}
24+
25+
26+
[data-theme="dark"] {
27+
--page-bg: #1a1a2e;
28+
--card-bg: #1a1a2e;
29+
--text-color: #ffffff;
30+
--text-color-light: #94a3b8;
31+
--accent-color: #7b8ab8;
32+
--accent-gradient: linear-gradient(
33+
135deg,
34+
#7b8ab8 0%,
35+
#8f7db0 50%,
36+
#c4a9d9 100%
37+
);
38+
39+
--border-color: rgba(255, 255, 255, 0.1);
40+
--shadow-light: -8px -8px 16px #232342;
41+
--shadow-dark: 8px 8px 16px #12121e;
42+
--inset-shadow-light: inset 6px 6px 12px #12121e;
43+
--inset-shadow-dark: inset -6px -6px 12px #232342;
44+
}
45+
46+
/* ---------------------------------- */
47+
/* 2. Main Page Layout */
48+
/* ---------------------------------- */
49+
.pageWrapper {
50+
background-color: var(--page-bg);
51+
transition: background-color 0.3s ease;
52+
}
53+
.pageContainer {
54+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
55+
"Helvetica Neue", Arial, sans-serif;
56+
line-height: 1.7;
57+
background-color: var(--card-bg);
58+
color: var(--text-color);
59+
max-width: 800px;
60+
margin: 2rem auto;
61+
padding: 2.5rem 3rem;
62+
border-radius: 20px;
63+
box-shadow: var(--shadow-dark), var(--shadow-light);
64+
transition: all 0.3s ease;
65+
}
66+
67+
/* ---------------------------------- */
68+
/* 3. Typography */
69+
/* ---------------------------------- */
70+
.mainTitle {
71+
text-align: center;
72+
font-size: 2.75rem;
73+
font-weight: 700;
74+
margin-bottom: 1.5rem;
75+
color: var(--text-color);
76+
letter-spacing: -1px;
77+
}
78+
.introText {
79+
text-align: center;
80+
margin-bottom: 3rem;
81+
font-size: 1.1rem;
82+
color: var(--text-color-light);
83+
}
84+
.link {
85+
color: var(--accent-color);
86+
text-decoration: none;
87+
font-weight: 600;
88+
}
89+
.link:hover {
90+
text-decoration: underline;
91+
}
92+
.list {
93+
list-style-type: decimal;
94+
padding-left: 1.5rem;
95+
}
96+
.list li {
97+
margin-bottom: 1.25rem;
98+
}
99+
.list li::marker {
100+
font-weight: 600;
101+
color: var(--accent-color);
102+
}
103+
104+
/* ---------------------------------- */
105+
/* 4. Section Accordion */
106+
/* ---------------------------------- */
107+
.section {
108+
margin-bottom: 1.5rem;
109+
}
110+
111+
.sectionButton {
112+
width: 100%;
113+
background-color: var(--card-bg);
114+
border: none;
115+
padding: 1rem 1.25rem;
116+
border-radius: 12px;
117+
text-align: left;
118+
cursor: pointer;
119+
display: flex;
120+
justify-content: space-between;
121+
align-items: center;
122+
box-shadow: var(--shadow-dark), var(--shadow-light);
123+
transition: all 0.3s ease;
124+
}
125+
.sectionButton:hover {
126+
transform: translateY(-2px);
127+
box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
128+
}
129+
.sectionButton.open {
130+
box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
131+
}
132+
.sectionButton.open:hover {
133+
transform: none;
134+
box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
135+
}
136+
137+
.sectionTitle {
138+
font-size: 1.25rem;
139+
font-weight: 600;
140+
color: var(--text-color);
141+
transition: color 0.3s ease;
142+
}
143+
144+
.sectionButton.open .sectionTitle,
145+
.sectionButton.open .icon {
146+
color: var(--accent-color);
147+
}
148+
149+
.iconContainer {
150+
width: 40px;
151+
height: 40px;
152+
border-radius: 50%;
153+
background-color: var(--card-bg);
154+
box-shadow: var(--shadow-dark), var(--shadow-light);
155+
transition: all 0.3s ease;
156+
position: relative;
157+
display: flex;
158+
align-items: center;
159+
justify-content: center;
160+
}
161+
162+
.sectionButton.open .iconContainer {
163+
box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
164+
}
165+
166+
.icon {
167+
font-size: 1.75rem;
168+
font-weight: 600;
169+
color: var(--text-color-light);
170+
position: absolute;
171+
opacity: 0;
172+
transform: rotate(-90deg);
173+
transition: all 0.3s ease-in-out;
174+
}
175+
176+
.iconMinus {
177+
position: relative;
178+
top: -1px;
179+
}
180+
181+
.iconVisible {
182+
opacity: 1;
183+
transform: rotate(0deg);
184+
}
185+
186+
/* ---------------------------------- */
187+
/* 5. Collapsible Content */
188+
/* ---------------------------------- */
189+
.sectionContent {
190+
max-height: 0;
191+
opacity: 0;
192+
overflow: hidden;
193+
transition: max-height 0.4s ease-out, opacity 0.3s ease-in,
194+
padding 0.3s ease-out;
195+
border-radius: 12px;
196+
margin-top: 1rem;
197+
background-color: var(--card-bg);
198+
box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
199+
}
200+
.sectionContent.open {
201+
max-height: 1000px; /* arbitrary large value */
202+
opacity: 1;
203+
}
204+
.contentInner {
205+
padding: 1.5rem 2rem;
206+
text-align: left;
207+
color: var(--text-color-light);
208+
}
209+
210+
/* ----------------------------------------- */
211+
/* 6. Gradient Text for BOTH Modes */
212+
/* ----------------------------------------- */
213+
214+
/* This applies the MUTED LIGHT mode gradient */
215+
.sectionButton.open .sectionTitle,
216+
.sectionButton.open .icon {
217+
background: var(--accent-gradient-light, var(--accent-color));
218+
-webkit-background-clip: text;
219+
-webkit-text-fill-color: transparent;
220+
background-clip: text;
221+
color: transparent; /* Fallback */
222+
}
223+
224+
/* This OVERRIDES with the MUTED DARK mode gradient */
225+
[data-theme="dark"] .sectionButton.open .sectionTitle,
226+
[data-theme="dark"] .sectionButton.open .icon {
227+
background: var(--accent-gradient);
228+
-webkit-background-clip: text;
229+
-webkit-text-fill-color: transparent;
230+
background-clip: text;
231+
color: transparent; /* Fallback */
232+
}

0 commit comments

Comments
 (0)