Add Dark Mode Toggle on GSoC Program Page

frontend/css/feedback.css

@@ -1,8 +1,15 @@
+body {
+  margin: 0;
+}
+
 .feedback-header {
   text-align: center;
-  padding: 80px 20px 40px;
+  padding: 40px 20px 0px; /* remove bottom gap */
+  margin-bottom: 0;
 }
 
+
+
 .feedback-header h1 {
   font-size: 2.5rem;
   color: var(--deep-navy);
@@ -15,10 +22,12 @@
 
 .feedback-container {
   max-width: 600px;
-  margin: auto;
-  padding: 30px;
+  margin: 0 auto 60px; /* removes top gap */
+  padding: 0 20px 40px;
 }
 
+
+
 form {
   display: flex;
   flex-direction: column;
@@ -61,3 +70,64 @@ button:hover {
   margin-top: 10px;
   font-weight: 600;
 }
+
+/* ===== Card Layout Enhancement ===== */
+
+.feedback-container {
+  max-width: 700px;
+  margin: auto;
+  padding: 40px 20px 80px;
+  display: flex;
+  justify-content: center;
+}
+
+.feedback-card {
+  width: 100%;
+  background: #ffffff;
+  padding: 35px 30px;
+  border-radius: 14px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Hover effect for modern UI depth */
+.feedback-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
+}
+
+/* Improve input styling consistency */
+.feedback-card input,
+.feedback-card select,
+.feedback-card textarea {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #dcdcdc;
+  font-size: 1rem;
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Focus interaction */
+.feedback-card input:focus,
+.feedback-card select:focus,
+.feedback-card textarea:focus {
+  outline: none;
+  border-color: var(--primary-gold);
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
+}
+
+/* Better button polish */
+.feedback-card button {
+  margin-top: 10px;
+  font-size: 1rem;
+  letter-spacing: 0.3px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.feedback-card button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+}
+

frontend/css/guides.css

@@ -789,10 +789,71 @@ html {
   }
 }
 
+/* =========================================================
+   DARK MODE FIX — GUIDES PAGE READABILITY (Issue #860)
+   ========================================================= */
+
+/* Page background & base text */
+body.dark-mode {
+  background-color: #0f172a;
+  color: #e5e7eb;
+}
+
+/* Section headings */
+body.dark-mode h2,
+body.dark-mode h3,
+body.dark-mode h4 {
+  color: #f9fafb !important;
+}
+
+/* Paragraph text readability */
+body.dark-mode p,
+body.dark-mode li {
+  color: #cbd5e1 !important;
+}
+
+/* Guide cards (major issue: parchment background in dark mode) */
+body.dark-mode .guide-list li,
+body.dark-mode .pr-steps li,
+body.dark-mode .practice-item,
+body.dark-mode .mistakes-list li {
+  background: #1e293b !important; /* replaces light parchment */
+  color: #e5e7eb !important;
+  border: 1px solid rgba(255,255,255,0.06);
+}
+
+/* Fix titles inside cards */
+body.dark-mode .guide-list h4,
+body.dark-mode .pr-steps h4,
+body.dark-mode .timeline-list h4,
+body.dark-mode .practice-item h4 {
+  color: #ffffff !important;
+}
+
+/* Fix description text inside components */
+body.dark-mode .guide-list p,
+body.dark-mode .pr-steps p,
+body.dark-mode .timeline-list p,
+body.dark-mode .practice-item p,
+body.dark-mode .mistakes-list p {
+  color: #cbd5e1 !important;
+}
+
+/* Timeline line visibility */
+body.dark-mode .timeline-list::before {
+  background: linear-gradient(to bottom, #facc15, #eab308);
+}
+
+/* Icons contrast */
+body.dark-mode .icon,
+body.dark-mode .step,
+body.dark-mode .mistake-icon {
+  background: #facc15 !important;
+  color: #0f172a !important;
+}
 /* =====================================================
    Dark Mode Refinement – Guides Page (Final Patch)
    Paste at the bottom of guides.css
-===================================================== */
 
 /* Section surfaces */
 .dark-mode .guides-hero,
@@ -888,4 +949,4 @@ html {
 
 .dark-mode .mistakes-list li:hover p {
   color: #f9fafb !important;
-}
+}