Add Browse All Posts link with arrow to immersive overlay

Author: erinmikailstaples

assets/built/screen.css

@@ -485,6 +485,44 @@
     border-color: rgba(255,255,255,0.35);
 }
 
+/* Browse All Posts link */
+.imm-about__browse-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    padding: 8px 14px;
+    border-radius: 20px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #fff;
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 200ms ease;
+    justify-self: center;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.imm-about__browse-link:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: rgba(255,255,255,0.2);
+    transform: translateY(-1px);
+    color: #fff;
+}
+
+.imm-about__arrow {
+    width: 14px;
+    height: 14px;
+    transition: transform 200ms ease;
+}
+
+.imm-about__browse-link:hover .imm-about__arrow {
+    transform: translateX(2px);
+}
+
 /* Subtle clamping to keep the overlay compact */
 @supports (-webkit-line-clamp: 3) {
     .imm-about__subtitle {

assets/built/screen.css.map

@@ -35,6 +35,13 @@
                     </div>
                 {{/unless}}
             {{/if}}
+            
+            <a href="/archive" class="imm-about__browse-link">
+                <span>Browse All Posts</span>
+                <svg class="imm-about__arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </a>
         </div>
     </section>