Merge pull request #931 from web3dev1337/fix/remove-diff-viewer-overlay-pills

fix: remove diff viewer overlay pills

Author: web3dev1337

site/index.html

@@ -329,9 +329,6 @@ <h3 class="feature-title">Built-in Diff Viewer + Review Console</h3>
         </div>
         <figure class="feature-shot contain diff-viewer-shot">
           <img src="assets/diff-viewer-windows.png" alt="Diff viewer review console with agent and server panes alongside the in-app diff viewer">
-          <div class="shot-badge shot-badge-top-left">Agent</div>
-          <div class="shot-badge shot-badge-bottom-left">Server</div>
-          <div class="shot-badge shot-badge-center">Diff Viewer</div>
         </figure>
       </article>
 

site/styles.css

@@ -735,63 +735,19 @@ a.btn-glow {
 }
 
 .diff-viewer-shot {
-  position: relative;
-  min-height: clamp(360px, 48vw, 760px);
+  min-height: 0;
   background:
     radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.12), transparent 34%),
     #060912;
 }
 
 .diff-viewer-shot img {
+  display: block;
+  height: auto;
+  min-height: 0;
   object-position: center top;
 }
 
-.shot-badge {
-  position: absolute;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 38px;
-  padding: 0.45rem 0.9rem;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(4, 8, 18, 0.82);
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
-  color: #f8fbff;
-  font-family: var(--font-mono);
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  backdrop-filter: blur(14px);
-}
-
-.shot-badge-top-left {
-  top: 1rem;
-  left: 1rem;
-  color: #7dd3fc;
-  border-color: rgba(56, 189, 248, 0.42);
-  background: rgba(8, 47, 73, 0.78);
-}
-
-.shot-badge-bottom-left {
-  left: 1rem;
-  bottom: 1rem;
-  color: #86efac;
-  border-color: rgba(34, 197, 94, 0.4);
-  background: rgba(5, 46, 22, 0.8);
-}
-
-.shot-badge-center {
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #fef3c7;
-  border-color: rgba(251, 191, 36, 0.38);
-  background: rgba(69, 26, 3, 0.8);
-}
-
 .feature-shot.narrow {
   max-width: 380px;
   margin-left: auto;
@@ -1823,29 +1779,6 @@ body.legal-page {
     min-height: 260px;
   }
 
-  .diff-viewer-shot {
-    min-height: 280px;
-  }
-
-  .shot-badge {
-    font-size: 0.74rem;
-    min-height: 34px;
-    padding: 0.35rem 0.72rem;
-  }
-
-  .shot-badge-top-left,
-  .shot-badge-bottom-left {
-    left: 0.75rem;
-  }
-
-  .shot-badge-top-left {
-    top: 0.75rem;
-  }
-
-  .shot-badge-bottom-left {
-    bottom: 0.75rem;
-  }
-
   .visual-grid,
   .diff-columns,
   .projects-visual {