From df7b461c7ecb6208b3fdb2928cd5e32ecf8f7781 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 20 Oct 2025 16:05:33 +0000
Subject: [PATCH 1/2] Initial plan


From c897030254972cc2f7ba7a9c1ec7c3bbbb60354e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 20 Oct 2025 16:12:31 +0000
Subject: [PATCH 2/2] Enhance LCARS UI with console-style visuals

Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com>
---
 docs/lcars-ui.css | 503 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 502 insertions(+), 1 deletion(-)

diff --git a/docs/lcars-ui.css b/docs/lcars-ui.css
index 19c0b46..24bdc53 100644
--- a/docs/lcars-ui.css
+++ b/docs/lcars-ui.css
@@ -1,8 +1,39 @@
 /* ========================================
-   LCARS V2 Header - Clean Dual Rail Design
+   LCARS V2 UI - Console-Style Star Trek Design
+   Enhanced visual pass for segmented amber/cyan blocks,
+   rounded panels, micro labels, and dark ink background
    Scoped to html[data-franchise-theme="lcars"] or body.theme-lcars
    ======================================== */
 
+/* ========================================
+   1) PALETTE AND BASE - Console-like tokens
+   ======================================== */
+body.theme-lcars,
+html[data-franchise-theme="lcars"] {
+  /* LCARS console palette - high contrast on dark */
+  --lcars-ink: #0B0F18;
+  --lcars-amber: #FFAA66;
+  --lcars-gold: #FFB84D;
+  --lcars-cyan: #88D4FF;
+  --lcars-cyan-bright: #99DDFF;
+  --lcars-rose: #E88AAA;
+  --lcars-magenta: #DD77AA;
+  --lcars-peach: #FFCCAA;
+  --lcars-lilac: #CCB3FF;
+  
+  /* Dark ink base with subtle pinstripes */
+  background-color: var(--lcars-ink);
+  background-image: repeating-linear-gradient(
+    to right,
+    rgba(255,255,255,.02) 0 1px,
+    transparent 1px 64px
+  );
+}
+
+/* ========================================
+   2) HEADER AND NAVIGATION - Segmented LCARS Pads
+   ======================================== */
+
 /* Scope all LCARS-specific styles to the LCARS theme */
 body.theme-lcars .site-header,
 html[data-franchise-theme="lcars"] .site-header {
@@ -363,6 +394,476 @@ html[data-franchise-theme="lcars"] .comms-dock .mini-scope {
   }
 }
 
+/* ========================================
+   3) SECTION PANELS & CARDS - LCARS Console Panels
+   ======================================== */
+
+/* Hero section - LCARS panel style */
+body.theme-lcars .hero,
+html[data-franchise-theme="lcars"] .hero {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.95), rgba(11, 15, 24, 0.98));
+  border-radius: 20px;
+  border: 2px solid var(--lcars-cyan, #88D4FF);
+  box-shadow: 
+    inset 0 0 40px rgba(0, 0, 0, 0.4),
+    0 0 20px rgba(136, 212, 255, 0.3);
+  padding: 6rem 0 4rem;
+  overflow: hidden;
+}
+
+/* Segmented accent bar at top */
+body.theme-lcars .hero::before,
+html[data-franchise-theme="lcars"] .hero::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-amber, #FFAA66) 0 40px,
+    var(--lcars-rose, #E88AAA) 40px 80px,
+    var(--lcars-gold, #FFB84D) 80px 120px,
+    transparent 120px 132px
+  );
+  border-radius: 20px 20px 0 0;
+}
+
+/* Micro label at top-right */
+body.theme-lcars .hero::after,
+html[data-franchise-theme="lcars"] .hero::after {
+  content: "HERO";
+  position: absolute;
+  top: 16px;
+  right: 24px;
+  font-family: "Orbitron", sans-serif;
+  font-size: 0.65rem;
+  font-weight: 800;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--lcars-cyan, #88D4FF);
+  opacity: 0.7;
+}
+
+/* Features section cards - LCARS panel style */
+body.theme-lcars .features .card,
+html[data-franchise-theme="lcars"] .features .card {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.92), rgba(11, 15, 24, 0.95));
+  border-radius: 16px;
+  border: 1.5px solid var(--lcars-cyan, #88D4FF);
+  box-shadow: 
+    inset 0 0 30px rgba(0, 0, 0, 0.35),
+    0 0 15px rgba(136, 212, 255, 0.25);
+  padding: 1.5rem 1.2rem 1.2rem;
+  overflow: hidden;
+}
+
+/* Segmented accent bar for cards */
+body.theme-lcars .features .card::before,
+html[data-franchise-theme="lcars"] .features .card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-amber, #FFAA66) 0 30px,
+    var(--lcars-rose, #E88AAA) 30px 60px,
+    transparent 60px 68px
+  );
+  border-radius: 16px 16px 0 0;
+}
+
+/* Micro label for cards using title text */
+body.theme-lcars .features .card h3::after,
+html[data-franchise-theme="lcars"] .features .card h3::after {
+  content: "";
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  width: 4px;
+  height: 4px;
+  background: var(--lcars-amber, #FFAA66);
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(255, 170, 102, 0.6);
+}
+
+body.theme-lcars .features .card h3,
+html[data-franchise-theme="lcars"] .features .card h3 {
+  position: relative;
+}
+
+/* Download cards - LCARS panel style */
+body.theme-lcars .download .download-card,
+html[data-franchise-theme="lcars"] .download .download-card {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.92), rgba(11, 15, 24, 0.95));
+  border-radius: 18px;
+  border: 2px solid var(--lcars-cyan, #88D4FF);
+  box-shadow: 
+    inset 0 0 35px rgba(0, 0, 0, 0.4),
+    0 0 18px rgba(136, 212, 255, 0.28);
+  overflow: hidden;
+}
+
+/* Accent bar for download cards */
+body.theme-lcars .download .download-card::before,
+html[data-franchise-theme="lcars"] .download .download-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-gold, #FFB84D) 0 35px,
+    var(--lcars-magenta, #DD77AA) 35px 70px,
+    transparent 70px 78px
+  );
+  border-radius: 18px 18px 0 0;
+}
+
+/* Micro label for download cards */
+body.theme-lcars .download .download-card::after,
+html[data-franchise-theme="lcars"] .download .download-card::after {
+  content: "DL";
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  font-family: "Orbitron", sans-serif;
+  font-size: 0.6rem;
+  font-weight: 800;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--lcars-amber, #FFAA66);
+  opacity: 0.8;
+}
+
+/* Docs cards - LCARS panel style */
+body.theme-lcars .docs .docs-card,
+html[data-franchise-theme="lcars"] .docs .docs-card {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.92), rgba(11, 15, 24, 0.95));
+  border-radius: 16px;
+  border: 1.5px solid var(--lcars-cyan, #88D4FF);
+  box-shadow: 
+    inset 0 0 30px rgba(0, 0, 0, 0.35),
+    0 0 15px rgba(136, 212, 255, 0.25);
+  overflow: hidden;
+}
+
+/* Accent bar for docs cards */
+body.theme-lcars .docs .docs-card::before,
+html[data-franchise-theme="lcars"] .docs .docs-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-peach, #FFCCAA) 0 30px,
+    var(--lcars-lilac, #CCB3FF) 30px 60px,
+    transparent 60px 68px
+  );
+  border-radius: 16px 16px 0 0;
+}
+
+/* Micro label for docs cards */
+body.theme-lcars .docs .docs-card::after,
+html[data-franchise-theme="lcars"] .docs .docs-card::after {
+  content: "DOC";
+  position: absolute;
+  top: 12px;
+  right: 18px;
+  font-family: "Orbitron", sans-serif;
+  font-size: 0.58rem;
+  font-weight: 800;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--lcars-lilac, #CCB3FF);
+  opacity: 0.75;
+}
+
+/* ========================================
+   4) MICROTEXT AND STATUS PILLS
+   ======================================== */
+
+/* Chip/pill styling with LCARS colors */
+body.theme-lcars .chip,
+html[data-franchise-theme="lcars"] .chip {
+  display: inline-block;
+  padding: 0.3rem 0.7rem;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--lcars-amber, #FFAA66), var(--lcars-gold, #FFB84D));
+  color: var(--lcars-ink, #0B0F18);
+  font-family: "Orbitron", sans-serif;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border: 1px solid rgba(255, 200, 120, 0.4);
+  box-shadow: 
+    inset -1px -1px 4px rgba(0, 0, 0, 0.25),
+    0 2px 8px rgba(255, 170, 102, 0.3);
+}
+
+/* Status dots in HUD */
+body.theme-lcars .hud .dot,
+html[data-franchise-theme="lcars"] .hud .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(100, 100, 120, 0.5);
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  transition: all 0.3s ease;
+}
+
+body.theme-lcars .hud .dot.on,
+html[data-franchise-theme="lcars"] .hud .dot.on {
+  background: var(--lcars-cyan, #88D4FF);
+  box-shadow: 0 0 12px 2px rgba(136, 212, 255, 0.6);
+}
+
+/* ========================================
+   Demo Panel and Other Sections
+   ======================================== */
+
+/* Demo panels with LCARS styling */
+body.theme-lcars .demo .panel,
+html[data-franchise-theme="lcars"] .demo .panel {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.92), rgba(11, 15, 24, 0.95));
+  border-radius: 14px;
+  border: 1.5px solid var(--lcars-cyan, #88D4FF);
+  box-shadow: 
+    inset 0 0 30px rgba(0, 0, 0, 0.35),
+    0 0 15px rgba(136, 212, 255, 0.25);
+  overflow: hidden;
+}
+
+/* Accent bar for demo panels */
+body.theme-lcars .demo .panel::before,
+html[data-franchise-theme="lcars"] .demo .panel::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-lilac, #CCB3FF) 0 28px,
+    var(--lcars-cyan, #88D4FF) 28px 56px,
+    transparent 56px 64px
+  );
+  border-radius: 14px 14px 0 0;
+}
+
+/* Pro gallery items with LCARS styling */
+body.theme-lcars .gallery-item,
+html[data-franchise-theme="lcars"] .gallery-item {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.9), rgba(11, 15, 24, 0.93));
+  border-radius: 14px;
+  border: 1.5px solid var(--lcars-cyan, #88D4FF);
+  box-shadow: 
+    inset 0 0 25px rgba(0, 0, 0, 0.3),
+    0 0 12px rgba(136, 212, 255, 0.2);
+  overflow: hidden;
+}
+
+/* Accent bar for gallery items */
+body.theme-lcars .gallery-item::before,
+html[data-franchise-theme="lcars"] .gallery-item::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-peach, #FFCCAA) 0 25px,
+    var(--lcars-rose, #E88AAA) 25px 50px,
+    transparent 50px 58px
+  );
+  border-radius: 14px 14px 0 0;
+  z-index: 1;
+}
+
+/* CTA section with LCARS styling */
+body.theme-lcars .cta,
+html[data-franchise-theme="lcars"] .cta {
+  position: relative;
+  padding: 4rem 0;
+}
+
+body.theme-lcars .cta .wrap,
+html[data-franchise-theme="lcars"] .cta .wrap {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.85), rgba(11, 15, 24, 0.9));
+  border-radius: 18px;
+  border: 2px solid var(--lcars-amber, #FFAA66);
+  box-shadow: 
+    inset 0 0 35px rgba(0, 0, 0, 0.4),
+    0 0 18px rgba(255, 170, 102, 0.25);
+  padding: 3rem 2rem;
+  overflow: hidden;
+}
+
+/* Accent bar for CTA */
+body.theme-lcars .cta .wrap::before,
+html[data-franchise-theme="lcars"] .cta .wrap::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: repeating-linear-gradient(
+    to right,
+    var(--lcars-amber, #FFAA66) 0 35px,
+    var(--lcars-gold, #FFB84D) 35px 70px,
+    transparent 70px 78px
+  );
+  border-radius: 0 0 18px 18px;
+}
+
+/* Micro label for CTA */
+body.theme-lcars .cta .wrap::after,
+html[data-franchise-theme="lcars"] .cta .wrap::after {
+  content: "CTA";
+  position: absolute;
+  top: 18px;
+  right: 24px;
+  font-family: "Orbitron", sans-serif;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--lcars-amber, #FFAA66);
+  opacity: 0.8;
+}
+
+/* About section with subtle LCARS styling */
+body.theme-lcars .about,
+html[data-franchise-theme="lcars"] .about {
+  position: relative;
+}
+
+body.theme-lcars .about .wrap,
+html[data-franchise-theme="lcars"] .about .wrap {
+  position: relative;
+  background: linear-gradient(135deg, rgba(13, 15, 30, 0.7), rgba(11, 15, 24, 0.75));
+  border-radius: 16px;
+  border: 1px solid var(--lcars-lilac, #CCB3FF);
+  box-shadow: 
+    inset 0 0 25px rgba(0, 0, 0, 0.3),
+    0 0 12px rgba(204, 179, 255, 0.2);
+  padding: 3rem 2rem;
+}
+
+/* Buttons with LCARS styling */
+body.theme-lcars .btn.primary,
+html[data-franchise-theme="lcars"] .btn.primary {
+  position: relative;
+  background: linear-gradient(135deg, var(--lcars-cyan, #88D4FF), var(--lcars-cyan-bright, #99DDFF));
+  color: var(--lcars-ink, #0B0F18);
+  border: 1.5px solid rgba(136, 212, 255, 0.5);
+  border-radius: 18px;
+  font-family: "Orbitron", sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  box-shadow: 
+    inset -1px -2px 6px rgba(0, 0, 0, 0.2),
+    0 4px 12px rgba(136, 212, 255, 0.3);
+}
+
+body.theme-lcars .btn.primary:hover,
+html[data-franchise-theme="lcars"] .btn.primary:hover {
+  background: linear-gradient(135deg, var(--lcars-cyan-bright, #99DDFF), var(--lcars-lilac, #CCB3FF));
+  box-shadow: 
+    inset -1px -2px 6px rgba(0, 0, 0, 0.25),
+    0 6px 16px rgba(136, 212, 255, 0.4);
+}
+
+body.theme-lcars .btn.ghost,
+html[data-franchise-theme="lcars"] .btn.ghost {
+  background: transparent;
+  color: var(--lcars-cyan, #88D4FF);
+  border: 2px solid var(--lcars-cyan, #88D4FF);
+  border-radius: 18px;
+  font-family: "Orbitron", sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  box-shadow: 
+    inset 0 0 20px rgba(136, 212, 255, 0.1),
+    0 0 12px rgba(136, 212, 255, 0.2);
+}
+
+body.theme-lcars .btn.ghost:hover,
+html[data-franchise-theme="lcars"] .btn.ghost:hover {
+  background: rgba(136, 212, 255, 0.15);
+  border-color: var(--lcars-cyan-bright, #99DDFF);
+  box-shadow: 
+    inset 0 0 25px rgba(136, 212, 255, 0.15),
+    0 0 18px rgba(136, 212, 255, 0.3);
+}
+
+/* Focus states for accessibility */
+body.theme-lcars .btn:focus-visible,
+html[data-franchise-theme="lcars"] .btn:focus-visible {
+  outline: 2px solid var(--lcars-amber, #FFAA66);
+  outline-offset: 3px;
+}
+
+/* ========================================
+   5) RESPONSIVENESS - Mobile adjustments
+   ======================================== */
+@media (max-width: 768px) {
+  /* Reduce panel roundness and padding on mobile */
+  body.theme-lcars .hero,
+  html[data-franchise-theme="lcars"] .hero {
+    border-radius: 14px;
+    padding: 4rem 0 3rem;
+  }
+  
+  body.theme-lcars .features .card,
+  html[data-franchise-theme="lcars"] .features .card,
+  body.theme-lcars .docs .docs-card,
+  html[data-franchise-theme="lcars"] .docs .docs-card {
+    border-radius: 12px;
+    padding: 1.2rem 1rem 1rem;
+  }
+  
+  body.theme-lcars .download .download-card,
+  html[data-franchise-theme="lcars"] .download .download-card {
+    border-radius: 14px;
+  }
+  
+  /* Smaller micro labels on mobile */
+  body.theme-lcars .hero::after,
+  html[data-franchise-theme="lcars"] .hero::after,
+  body.theme-lcars .download .download-card::after,
+  html[data-franchise-theme="lcars"] .download .download-card::after,
+  body.theme-lcars .docs .docs-card::after,
+  html[data-franchise-theme="lcars"] .docs .docs-card::after {
+    font-size: 0.55rem;
+    top: 12px;
+    right: 14px;
+  }
+}
+
 /* ========================================
    Reduced Motion Support
    ======================================== */