feat: Comprehensive accessibility and performance improvements

.vscode/settings.json

@@ -1,3 +1,22 @@
 {
-  "liveServer.settings.port": 5503
+  "liveServer.settings.port": 5503,
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#3333ff",
+    "activityBar.background": "#3333ff",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#600000",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#3333ff",
+    "statusBar.background": "#0000ff",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#3333ff",
+    "statusBarItem.remoteBackground": "#0000ff",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#0000ff",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#0000ff99",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  }
 }

README.md

@@ -20,17 +20,67 @@ We publish:
 With each issue, we aim to tell stories that live in the **in-betweenness** — of *place, identity, memory, and imagination*.  
 
 📌 **Quick Links:**  
-- 🌐 Website: [thecawnporemag.co.in](https://www.thecawnporemag.co.in/)  
+- 🌐 Website: [thecawnporemag.github.io](https://thecawnporemag.github.io/)  
 - 📸 Instagram: [@thecawnporemagazine](https://www.instagram.com/thecawnporemagazine)  
 - 📧 Contact: **thecawnporemagofficial@gmail.com**
 
 ---
 
+## ✨ Recent Improvements
+
+### Accessibility Enhancements
+- ✅ Enhanced ARIA labels and semantic HTML structure
+- ✅ Improved keyboard navigation support
+- ✅ Better screen reader compatibility
+- ✅ Focus management and skip-to-content link
+- ✅ Reduced motion support for users with vestibular disorders
+
+### Performance Optimizations
+- ✅ Optimized scroll event handling with RAF throttling
+- ✅ Lazy loading implementation for images
+- ✅ Enhanced cursor animation performance
+- ✅ Improved loading screen UX
+
+### User Experience
+- ✅ Enhanced text-to-speech functionality with error handling
+- ✅ Better form validation with visual feedback
+- ✅ Structured data markup for SEO
+- ✅ Enhanced social media meta tags
+
+---
+
 ## 🎨 Tech & Design
 
 - **Theme Colors** → `#780000` (Primary), `#fdf0d5` (Background/Accent)  
 - **Built With** → HTML, CSS, JS (Static Site)  
 - **Goals** → Accessibility, responsiveness, aesthetics, and storytelling  
+- **Dependencies** → Nodemailer (^7.0.5), Zod (^4.1.3)
+
+---
+
+## 🚀 Getting Started
+
+1. **Clone the repository:**
+
+   ```bash
+   git clone https://github.com/adityashirsatrao007/TheCawnporeMag.github.io.git
+   cd TheCawnporeMag.github.io
+   ```
+
+2. **Install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+3. **Start local development server:**
+
+   ```bash
+   npm start
+   ```
+
+4. **Open in browser:**
+   Navigate to `http://localhost:8000`
 
 ---
 

faq.css

@@ -186,6 +186,7 @@ main {
 .para{
   background: linear-gradient(45deg, teal, #d24848);
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: bold;
   text-align: center;
@@ -266,17 +267,290 @@ main {
   cursor: pointer;
   font-size: 1.1rem;
   padding: 0.3rem 0;
+  transition: all 0.3s ease;
+  position: relative;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.faq summary::-webkit-details-marker {
+  display: none;
+}
+
+.faq summary::after {
+  content: '+';
+  font-size: 1.3rem;
+  font-weight: bold;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: #780000;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(120, 0, 0, 0.1);
+  margin-left: auto;
+}
+
+.faq details[open] summary::after {
+  transform: rotate(45deg);
+  background: rgba(120, 0, 0, 0.2);
+}
+
+.faq summary:hover {
+  color: #a00000;
+}
+
+.faq summary:hover::after {
+  background: rgba(120, 0, 0, 0.2);
+  transform: scale(1.1);
+}
+
+.faq details[open] summary:hover::after {
+  transform: rotate(45deg) scale(1.1);
 }
 .faq p {
   margin-top: 0.5rem;
-  line-height: 1.5;
+  line-height: 1.6;
+  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  color: #555;
+}
+
+.faq .ans {
+  animation: slideReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+@keyframes slideReveal {
+  from {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    max-height: 300px;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 a {
   text-decoration: none;
   color: #780000;
 }
 
+/* Report Problem Button */
+.report-section {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.report-btn {
+  background: linear-gradient(135deg, #780000, #a00000);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(120, 0, 0, 0.2);
+}
+
+.report-btn:hover {
+  background: linear-gradient(135deg, #a00000, #c00000);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(120, 0, 0, 0.3);
+}
+
+/* Modal Styles */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 5% auto;
+  border: none;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-50px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #eee;
+  background: linear-gradient(135deg, #fdf0d5, #f7e5c8);
+  border-radius: 12px 12px 0 0;
+}
+
+.modal-header h2 {
+  margin: 0;
+  color: #780000;
+  font-size: 1.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #780000;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.close-btn:hover {
+  background: rgba(120, 0, 0, 0.1);
+  transform: scale(1.1);
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 12px;
+  border: 2px solid #e1e1e1;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s ease;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #780000;
+  box-shadow: 0 0 0 3px rgba(120, 0, 0, 0.1);
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.btn-cancel,
+.btn-submit {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.btn-cancel {
+  background: #f1f1f1;
+  color: #666;
+}
+
+.btn-cancel:hover {
+  background: #e1e1e1;
+}
+
+.btn-submit {
+  background: linear-gradient(135deg, #780000, #a00000);
+  color: white;
+}
+
+.btn-submit:hover {
+  background: linear-gradient(135deg, #a00000, #c00000);
+  transform: translateY(-1px);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .modal-content {
+    margin: 10% auto;
+    width: 95%;
+  }
+
+  .modal-header,
+  .modal-body {
+    padding: 1rem;
+  }
+
+  .form-actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-cancel,
+  .btn-submit {
+    width: 100%;
+  }
+}
+
 .ask {
   display: flex;
   flex-direction: column;