UX overhaul: glassmorphism nav/footer, forms redesign, mobile fixes

Navigation:
- Nav bar pill shape (border-radius: 100px), dark glass style
- Icons added to all nav items (FA4 outline variants, fixed-width alignment)
- Footer hidden on all devices (nav panel covers mobile)
- Footer nav icons + text added before removal

Forms (ask.md, plan.md):
- Full glassmorphism redesign: rounded card, blur backdrop
- Input borders visible (#b8c4ce), focus ring, proper placeholder colors
- Select: self-contained CSS, no backdrop-filter conflict, arrow fixed
- Submit button: gradient with shadow
- File upload button: .file-btn class, fa-arrow-down icon
- form-note styled as info callout with left border + ⓘ icon
- Footnotes sup.fn: circular badge, baseline positioning (no line-height jump)
- Footnote ¹ on both consent checkboxes, accordion = full legal text
- Dark mode: opaque dark card (rgba 22,26,34,0.88), proper contrast
- Dark mode success/error messages adapted
- Double checkmark bug fixed (removed ::after overlay)
- Italic removed from privacy-details text

Layout:
- #main rounded corners (20px all sides) + margin for visibility
- Post card images rounded (border-radius: 10px)
- Page titles: uppercase removed, font-weight 900, left-aligned
- "Подробнее" button hidden on post cards
- iOS background-attachment: fixed bug fixed (scroll on mobile)
- Pagination mobile: counter restored, buttons above footer

Content:
- Page titles uncommented in front matter (gallery, map, ask, plan)
- Duplicate rawhtml title blocks removed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/nav-background.css

@@ -1,42 +1,89 @@
-/* Улучшение фона для десктопного меню навигации */
+/* Desktop nav bar */
 #nav {
-    background: rgba(0, 0, 0, 0.4) !important;
-    backdrop-filter: blur(8px) !important;
-    border-radius: 10px !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    background: rgba(0, 0, 0, 0.35) !important;
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+    border-radius: 100px !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
 }
 
-#nav ul.links li a {
-    color: rgba(255, 255, 255, 0.9) !important;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
-    transition: all 0.3s ease !important;
+/* Ссылки с иконкой — flex row */
+#nav ul.links li a.nav-link {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    color: rgba(255, 255, 255, 0.82) !important;
+    text-shadow: none !important;
+    padding: 0 1.4rem !important;
+    transition: color 0.2s ease, background 0.2s ease !important;
+    text-transform: uppercase !important;
+    font-size: 0.78rem !important;
+    letter-spacing: 0.07em !important;
+    font-weight: 900 !important;
 }
 
-#nav ul.links li a:hover {
-    background-color: rgba(255, 255, 255, 0.2) !important;
-    color: white !important;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
+#nav ul.links li a.nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+    color: #ffffff !important;
+    text-shadow: none !important;
 }
 
+/* Иконки в nav — фиксированная ширина чтобы все выровнялись */
+#nav ul.links li a .nav-icon {
+    font-size: 0.85rem !important;
+    opacity: 0.75;
+    flex-shrink: 0;
+    line-height: 1 !important;
+    width: 1em !important;
+    text-align: center !important;
+    display: inline-block !important;
+}
+
+#nav ul.links li a:hover .nav-icon {
+    opacity: 1;
+}
+
+/* Активный пункт */
 #nav ul.links li.active {
-    background-color: rgba(255, 255, 255, 0.2) !important;
-    border-radius: 5px !important;
+    background-color: rgba(255, 255, 255, 0.15) !important;
 }
 
 #nav ul.links li.active a {
-    color: white !important;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
+    color: #ffffff !important;
+}
+
+#nav ul.links li.active a .nav-icon {
+    opacity: 1;
 }
 
 /* Иконки соцсетей */
 #nav ul.icons li a {
-    color: rgba(255, 255, 255, 0.8) !important;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
+    color: rgba(255, 255, 255, 0.75) !important;
+    text-shadow: none !important;
+    transition: color 0.2s ease !important;
 }
 
 #nav ul.icons li a:hover {
-    color: white !important;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
-    transform: scale(1.1) !important;
+    color: #ffffff !important;
+}
+
+/* Мобильная панель — иконки + текст в строку */
+#navPanel .links li a.nav-link {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.6rem !important;
+    padding: 0.85rem 0 !important;
+}
+
+#navPanel .links li a .nav-icon {
+    font-size: 1rem !important;
+    opacity: 0.7;
+    flex-shrink: 0;
+    width: 1.2rem;
+    text-align: center;
+}
+
+#navPanel .links li a:hover .nav-icon {
+    opacity: 1;
 }