audit-labs/audit-labs.dev

The website for Audit Labs.

clone: git clone https://gitbay.org/audit-labs/audit-labs.dev.git

7055792476cbda29b4c9ac6ed7e751952281063a

verified · cmc

author: Christian Cleberg <hello@cleberg.net> · 2026-08-07T03:17:49Z

Put evidence-seal inline on the pipeline spine

Move the optional seal step out of the side-branch grid and onto the
main vertical flow (audit-tools → CSV → evidence-seal → audit-report →
…), so the diagram reads the same on mobile and desktop. Keep the
dashed border and add an OPTIONAL tag; drop the now-unused branch CSS.

 assets/site.css | 18 +++---------------
 index.html      | 17 +++++++----------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/assets/site.css b/assets/site.css
index 9836909..7b70ac2 100644
--- a/assets/site.css
+++ b/assets/site.css
@@ -207,27 +207,15 @@ footer { background: var(--black); color: var(--gray-4); padding: 3rem 2rem; }
 /* artifact pill sitting on the spine */
 .eco-artifact { align-self: center; justify-self: center; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.01em; color: var(--amber-light); background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.28); border-radius: 999px; padding: 0.25rem 0.75rem; white-space: nowrap; }
 
-/* branch row: empty | artifact (centered) | dashed line → evidence-seal */
-.eco-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
-.eco-flow .eco-artifact { grid-column: 2; }
-.eco-branch { grid-column: 3; display: flex; align-items: center; min-width: 0; }
-.eco-branch::before { content: ''; flex-shrink: 0; width: 1.5rem; height: 2px; background: repeating-linear-gradient(90deg, rgba(251,191,36,0.65) 0 4px, transparent 4px 8px); }
-.eco-node--seal { border-style: dashed; border-color: rgba(251,191,36,0.32); padding: 0.6rem 0.75rem; }
-.eco-node--seal .eco-icon { width: 1.8rem; height: 1.8rem; }
-.eco-node--seal .eco-name { font-size: 0.82rem; }
-.eco-node--seal .eco-role { font-size: 0.72rem; }
+/* optional step in the spine — dashed border signals it can be skipped */
+.eco-node--seal { border-style: dashed; border-color: rgba(251,191,36,0.32); }
+.eco-optional { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber-light); border: 1px dashed rgba(251,191,36,0.45); border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.4rem; vertical-align: middle; }
 
 /* control-coverage outputs */
 .eco-outputs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.8rem; }
 .eco-outputs span { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--off-white); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 0.24rem 0.55rem; }
 .eco-outputs span:first-child { color: var(--amber-light); border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.1); }
 
-@media (max-width: 560px) {
-    .eco-flow { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; }
-    .eco-branch { grid-column: 1; }
-    .eco-branch::before { display: none; }
-}
-
 /* ---------- ANIMATION ---------- */
 @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
 .hero-label, .crumb { animation: fadeUp 0.5s ease both; }
diff --git a/index.html b/index.html
index a5cc474..6b4ca23 100644
--- a/index.html
+++ b/index.html
@@ -44,18 +44,15 @@
                 </div>
             </div>
 
+            <div class="eco-connector"></div>
+            <span class="eco-artifact">CSV evidence package</span>
             <div class="eco-connector"></div>
 
-            <div class="eco-flow">
-                <span class="eco-artifact">CSV evidence package</span>
-                <div class="eco-branch">
-                    <div class="eco-node eco-node--seal">
-                        <span class="eco-icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
-                        <div class="eco-main">
-                            <span class="eco-name">evidence-seal</span>
-                            <span class="eco-role">Seal &amp; verify integrity</span>
-                        </div>
-                    </div>
+            <div class="eco-node eco-node--seal">
+                <span class="eco-icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
+                <div class="eco-main">
+                    <span class="eco-name">evidence-seal <span class="eco-optional">optional</span></span>
+                    <span class="eco-role">Seal &amp; verify integrity</span>
                 </div>
             </div>