@@ -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