Skip to content

Commit e1e4c7d

Browse files
authored
Update style.css
1 parent 40dbd4b commit e1e4c7d

File tree

1 file changed

+99
-0
lines changed

1 file changed

+99
-0
lines changed

style.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,105 @@ ul{list-style:none;}
8484
.delay-2{transition-delay:.3s;}
8585

8686
/* Responsive grids */
87+
/* ===== Donation Page Tabs ===== */
88+
.donate-tabs {
89+
background: var(--silver);
90+
border-radius: var(--radius);
91+
padding: 1.5rem;
92+
box-shadow: 0 8px 30px rgba(11,29,75,0.1);
93+
}
94+
95+
.tab-buttons {
96+
display: flex;
97+
justify-content: center;
98+
gap: 1rem;
99+
flex-wrap: wrap;
100+
margin-bottom: 1rem;
101+
}
102+
103+
.tab-btn {
104+
background: var(--navy);
105+
color: #fff;
106+
border: none;
107+
padding: 0.6rem 1.2rem;
108+
border-radius: var(--radius);
109+
cursor: pointer;
110+
font-weight: 600;
111+
transition: all .3s ease;
112+
}
113+
114+
.tab-btn:hover {
115+
background: var(--blue);
116+
transform: translateY(-2px);
117+
}
118+
119+
.tab-btn.active {
120+
background: var(--blue);
121+
box-shadow: 0 4px 15px rgba(30,99,211,0.4);
122+
}
123+
124+
.tab-content {
125+
display: none;
126+
background: #fff;
127+
border-radius: var(--radius);
128+
padding: 1rem;
129+
animation: fadeIn .4s ease;
130+
}
131+
132+
.tab-content.active {
133+
display: block;
134+
}
135+
136+
@keyframes fadeIn {
137+
from { opacity: 0; transform: translateY(10px); }
138+
to { opacity: 1; transform: translateY(0); }
139+
}
140+
141+
/* MoMo box styling */
142+
.momo-box {
143+
background: var(--silver);
144+
border-radius: var(--radius);
145+
padding: 1rem;
146+
margin-top: 1rem;
147+
color: var(--text);
148+
box-shadow: 0 3px 12px rgba(11,29,75,0.1);
149+
}
150+
151+
/* Contact form on donate page */
152+
.contact-form {
153+
display: flex;
154+
flex-direction: column;
155+
gap: 0.8rem;
156+
}
157+
158+
.contact-form input,
159+
.contact-form textarea,
160+
#momo-select {
161+
width: 100%;
162+
padding: 0.6rem;
163+
border: 1px solid #cbd5e1;
164+
border-radius: var(--radius);
165+
font-size: 0.95rem;
166+
}
167+
168+
.contact-form button {
169+
align-self: flex-start;
170+
}
171+
172+
.map-box {
173+
background: #fff;
174+
border-radius: var(--radius);
175+
padding: 1rem;
176+
box-shadow: 0 6px 25px rgba(0,0,0,0.08);
177+
}
178+
179+
/* Responsive tweaks */
180+
@media(max-width:700px){
181+
.tab-buttons{flex-direction:column;}
182+
.tab-btn{width:100%;}
183+
}
184+
87185
@media(max-width:780px){
88186
.grid-2{grid-template-columns:1fr;}
89187
}
188+

0 commit comments

Comments
 (0)