feat: add creed, faq, and parchment scroll styling

nocturne/index.html

@@ -73,6 +73,60 @@
 
       /* ========== COMMANDMENTS ========== */
 
+      .scroll-wrapper {
+        position: relative;
+        margin: 1.5em 0;
+      }
+
+      .scroll-wrapper::before,
+      .scroll-wrapper::after {
+        content: "";
+        display: block;
+        height: 24px;
+        background:
+          repeating-linear-gradient(
+            90deg,
+            rgba(101, 67, 33, 0.18) 0px,
+            rgba(139, 90, 43, 0.10) 6px,
+            rgba(101, 67, 33, 0.18) 12px
+          ),
+          linear-gradient(to bottom, #c8a96e, #b8955a);
+        box-shadow:
+          0 2px 6px rgba(80, 50, 20, 0.35),
+          inset 0 1px 2px rgba(255, 220, 150, 0.4);
+      }
+
+      .scroll-wrapper::before {
+        border-radius: 4px 4px 0 0;
+        margin-bottom: -2px;
+      }
+
+      .scroll-wrapper::after {
+        border-radius: 0 0 4px 4px;
+        margin-top: -2px;
+      }
+
+      .scroll-body {
+        background:
+          radial-gradient(ellipse at top left, rgba(210, 180, 120, 0.35) 0%, transparent 60%),
+          radial-gradient(ellipse at bottom right, rgba(180, 140, 80, 0.25) 0%, transparent 60%),
+          repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 28px,
+            rgba(139, 100, 50, 0.05) 28px,
+            rgba(139, 100, 50, 0.05) 29px
+          ),
+          linear-gradient(160deg, #fdf3dc 0%, #f5e8c0 30%, #eedcaa 60%, #f2e4bd 100%);
+        border-left: 1px solid rgba(139, 100, 50, 0.3);
+        border-right: 1px solid rgba(139, 100, 50, 0.3);
+        padding: 1.5em 2em;
+        box-shadow:
+          inset 3px 0 8px rgba(139, 100, 50, 0.12),
+          inset -3px 0 8px rgba(139, 100, 50, 0.12),
+          0 4px 16px rgba(80, 50, 20, 0.2);
+      }
+
       .commandment-list {
         list-style: none;
         margin: 0;
@@ -84,7 +138,7 @@
         gap: 1em;
         align-items: flex-start;
         padding: 1em 0;
-        border-bottom: 1px solid rgba(212, 165, 199, 0.2);
+        border-bottom: 1px solid rgba(139, 100, 50, 0.2);
       }
 
       .commandment-list li:last-child {
@@ -95,26 +149,28 @@
         font-size: 1.4rem;
         min-width: 2.5em;
         text-align: right;
-        color: var(--witch-plum);
+        color: #7a4f20;
         flex-shrink: 0;
         font-style: italic;
       }
 
       .commandment-body {
         flex: 1;
+        color: #3b2a10;
       }
 
       .commandment-title {
         font-weight: bold;
         display: block;
         margin-bottom: 0.3em;
-        color: var(--witch-purple);
+        color: #5a3510;
       }
 
       .commandment-body p {
         margin: 0;
         font-size: 0.95rem;
         line-height: 1.6;
+        color: #3b2a10;
       }
 
       /* ========== TESTIMONIALS ========== */
@@ -259,6 +315,8 @@
             not a suggestion. It is a warning.
           </em>
         </p>
+        <div class="scroll-wrapper">
+        <div class="scroll-body">
         <ol class="commandment-list">
           <li>
             <span class="commandment-numeral">I</span>
@@ -378,6 +436,8 @@
             </div>
           </li>
         </ol>
+        </div>
+        </div>
       </section>
 
       <!-- WORSHIPPER TESTIMONIALS -->