Titles style change in CU texts all titles are red

src/ui/app.ts

@@ -85,7 +85,6 @@ export class App {
     this.container.innerHTML = `
       <div class="app-container min-h-screen flex flex-col">
         <header class="bg-navy text-parchment p-3 flex items-center justify-between shadow-md">
-          <h1 class="text-sm font-bold tracking-wide">${t.appName}</h1>
           <nav class="flex flex-wrap gap-4 text-sm">
             <a href="#calendar" class="nav-link hover:text-gold transition-colors" data-view="calendar">${t.nav.calendar}</a>
             <details class="nav-group relative" data-nav="library">

src/ui/calendar-view.ts

@@ -497,7 +497,7 @@ export class CalendarView {
     let col = 0;
 
     gridHtml += this.t.calendar.dayNames.map(d =>
-      `<div class="text-center text-xs font-bold text-navy-light py-1">${d}</div>`
+      `<div class="text-center text-xs font-bold text-red py-1">${d}</div>`
     ).join('');
 
     for (let i = 0; i < firstDow; i++) {
@@ -572,7 +572,7 @@ export class CalendarView {
 
         <div class="flex-1 p-6 overflow-auto">
           <div class="max-w-2xl lg:max-w-3xl xl:max-w-4xl">
-            <h2 class="text-base font-bold text-navy mb-1">
+            <h2 class="text-base font-bold text-red mb-1">
               ${julianStr}
             </h2>
             <div class="text-sm text-navy-light mb-2">
@@ -582,17 +582,17 @@ export class CalendarView {
             <div id="day-title" class="mb-4"></div>
 
             <div id="commemorations-panel" class="mb-4 p-4 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
-              <h3 class="font-bold text-navy mb-2">${this.t.calendar.commemorations}</h3>
+              <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
               <p class="text-sm text-navy-light italic">${this.t.loading}</p>
             </div>
 
             <div id="fasting-panel" class="mb-4 p-4 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
-              <h3 class="font-bold text-navy mb-2">${this.t.calendar.fastingRule}</h3>
+              <h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
               <p class="text-sm italic text-navy-light">${this.t.loading}</p>
             </div>
 
             <div id="readings-panel" class="mb-4 p-4 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
-              <h3 class="font-bold text-navy mb-2">${this.t.calendar.readings}</h3>
+              <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
               <p class="text-sm text-navy-light italic">${this.t.loading}</p>
             </div>
 
@@ -658,7 +658,7 @@ export class CalendarView {
     const fastingPanel = document.getElementById('fasting-panel');
     if (fastingPanel) {
       fastingPanel.innerHTML = `
-        <h3 class="font-bold text-navy mb-2">${this.t.calendar.fastingRule}</h3>
+        <h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
         <p class="text-sm">${fastingResult.description || this.t.notAvailable}</p>
       `;
     }
@@ -759,7 +759,7 @@ export class CalendarView {
     if (commPanel) {
       if (cids.length === 0) {
         commPanel.innerHTML = `
-          <h3 class="font-bold text-navy mb-2">${this.t.calendar.commemorations}</h3>
+          <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
           <p class="text-sm text-navy-light italic">${this.t.calendar.noCommemorations}</p>
         `;
       } else {
@@ -801,7 +801,7 @@ export class CalendarView {
         }
         if (commHtmlParts.length > 0) {
           commPanel.innerHTML = `
-            <h3 class="font-bold text-navy mb-2">${this.t.calendar.commemorations}</h3>
+            <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
             <div class="space-y-1">${commHtmlParts.join('')}</div>
           `;
           commPanel.addEventListener('click', (e) => {
@@ -814,7 +814,7 @@ export class CalendarView {
           });
         } else {
           commPanel.innerHTML = `
-            <h3 class="font-bold text-navy mb-2">${this.t.calendar.commemorations}</h3>
+            <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
             <p class="text-sm text-navy-light italic">${this.t.calendar.noCommemorations}</p>
           `;
         }
@@ -898,7 +898,7 @@ export class CalendarView {
     if (readingsPanel) {
       if (readingsGroups.length === 0) {
         readingsPanel.innerHTML = `
-          <h3 class="font-bold text-navy mb-2">${this.t.calendar.readings}</h3>
+          <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
           <p class="text-sm text-navy-light italic">${this.t.calendar.noReadings}</p>
         `;
       } else {
@@ -922,7 +922,7 @@ export class CalendarView {
           return `<div class="text-sm text-navy"><strong>${g.service}</strong>${this.t.calendar.colon}${refs}</div>`;
         }).join('');
         readingsPanel.innerHTML = `
-          <h3 class="font-bold text-navy mb-2">${this.t.calendar.readings}</h3>
+          <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
           <div class="space-y-1">${groupsHtml}</div>
         `;
       }

src/ui/menaion-view.ts

@@ -57,7 +57,7 @@ export class MenaionView {
 
     this.container.innerHTML = `
       <div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-        <h2 class="text-2xl font-bold text-navy mb-2">${this.t.menaion.title}</h2>
+        <h2 class="text-2xl font-bold text-red mb-2">${this.t.menaion.title}</h2>
         <p class="text-navy-light mb-4">${months[0]}</p>
         <div class="flex flex-wrap gap-1 mb-6">
           ${monthHtml}

src/ui/prayer-view.ts

@@ -216,7 +216,7 @@ export class PrayerView {
 
     this.container.innerHTML = `
       <div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-        <h2 class="text-2xl font-bold text-navy mb-2">${title}</h2>
+        <h2 class="text-2xl font-bold text-red mb-2">${title}</h2>
         <p class="text-navy-light mb-6">${subtitle}</p>
         <div class="grid gap-2 sm:grid-cols-2 mb-6">
           ${sections.map(s => `

src/ui/service-view.ts

@@ -89,7 +89,7 @@ export class ServiceView {
     const contentClass = `bg-white/50 border border-gold/20 rounded-lg p-6 ${this.activeService ? 'min-h-[300px]' : ''} ${fontClass}`;
 
     const tabHtml = `
-      <h3 class="font-bold text-navy mb-3">${this.t.services.title}</h3>
+      <h3 class="font-bold text-red mb-3">${this.t.services.title}</h3>
       <div class="flex flex-wrap gap-1 mb-6 border-b border-gold/20">
         ${availableServices.map(s => `
           ${s.divider ? '<span class="self-center mx-1 text-gold/40 select-none" aria-hidden="true">·</span>' : ''}
@@ -110,7 +110,7 @@ export class ServiceView {
 
     this.container.innerHTML = standalone
       ? `<div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-          <h2 class="text-2xl font-bold text-navy mb-2">${this.t.services.title}</h2>
+          <h2 class="text-2xl font-bold text-red mb-2">${this.t.services.title}</h2>
           <p class="text-navy-light mb-4">
             ${this.currentDate.toString()}
             ${dayInfo.isLent ? this.t.services.greatLent : ''}

src/ui/settings-view.ts

@@ -112,7 +112,7 @@ export class SettingsView {
 
     this.container.innerHTML = `
       <div class="p-6 max-w-2xl lg:max-w-3xl xl:max-w-4xl mx-auto">
-        <h2 class="text-2xl font-bold text-navy mb-6">${t.settings.title}</h2>
+        <h2 class="text-2xl font-bold text-red mb-6">${t.settings.title}</h2>
 
         <!-- Language -->
         <div class="mb-6">
@@ -128,7 +128,7 @@ export class SettingsView {
 
         <!-- Font Settings -->
         <div class="mb-6">
-          <h3 class="text-lg font-bold text-navy mb-3">${t.settings.fontSettings}</h3>
+          <h3 class="text-lg font-bold text-red mb-3">${t.settings.fontSettings}</h3>
 
           <div class="mb-3">
             <select id="cu-font" class="w-full border border-gold/30 rounded p-2 bg-white text-navy">
@@ -159,7 +159,7 @@ export class SettingsView {
 
         <!-- Calendar Type -->
         <div class="mb-6">
-          <h3 class="text-lg font-bold text-navy mb-3">${t.settings.calendarType}</h3>
+          <h3 class="text-lg font-bold text-red mb-3">${t.settings.calendarType}</h3>
           <div class="flex gap-4">
             <label class="flex items-center gap-2 cursor-pointer">
               <input type="radio" name="calendar-type" value="julian" ${this.settings.calendarType === 'julian' ? 'checked' : ''}
@@ -176,7 +176,7 @@ export class SettingsView {
 
         <!-- Bible Settings -->
         <div class="mb-6">
-          <h3 class="text-lg font-bold text-navy mb-3">${t.settings.bibleSettings}</h3>
+          <h3 class="text-lg font-bold text-red mb-3">${t.settings.bibleSettings}</h3>
 
           <div class="mb-3">
             <label class="block text-sm font-bold text-navy mb-1">${t.settings.defaultTranslation}</label>
@@ -237,7 +237,7 @@ export class SettingsView {
 
         <!-- About -->
         <div class="mt-8 pt-6 border-t border-gold/20">
-          <h3 class="text-lg font-bold text-navy mb-2">${t.settings.about}</h3>
+          <h3 class="text-lg font-bold text-red mb-2">${t.settings.about}</h3>
           <p class="text-sm text-navy-light">
             ${t.settings.aboutText}
           </p>