From a270c6eca4d049103385cff5c0d12aea5dec2170 Mon Sep 17 00:00:00 2001
From: juvdiaz <juvenal.diaz@oracle.com>
Date: Wed, 10 Jun 2026 15:14:00 -0600
Subject: [PATCH] Update website retro theme styles

---
 apps/website/styles.css | 159 +++++++++++++++++++++++++++++++++-------
 1 file changed, 134 insertions(+), 25 deletions(-)

diff --git a/apps/website/styles.css b/apps/website/styles.css
index ba9fe2f..030bd7e 100644
--- a/apps/website/styles.css
+++ b/apps/website/styles.css
@@ -1314,7 +1314,7 @@ body.home-page.theme-dark {
 .theme-dark.home-page .hero-image img {
   border-radius: 0;
   border: 2px solid #a8ffb0;
-  filter: saturate(0.8) contrast(1.08);
+  filter: grayscale(1) contrast(1.12);
 }
 
 .theme-dark .cv-header-text {
@@ -1331,7 +1331,7 @@ body.home-page.theme-dark {
 .theme-dark .cv-portrait-img {
   border-radius: 0;
   border: 2px solid #a8ffb0;
-  filter: saturate(0.8) contrast(1.08);
+  filter: grayscale(1) contrast(1.12);
 }
 
 body.theme-dark {
@@ -2029,11 +2029,15 @@ body.theme-dark {
 }
 
 body.theme-light {
-  background: #fffff0;
-  color: #1b1610;
-  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
-  font-size: 1.12rem;
-  line-height: 1.68;
+  background:
+    linear-gradient(rgba(36, 92, 52, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(36, 92, 52, 0.04) 1px, transparent 1px),
+    #f4f0df;
+  background-size: 22px 22px;
+  color: #151a12;
+  font-family: "Courier New", "Lucida Console", Monaco, monospace;
+  font-size: 1rem;
+  line-height: 1.58;
 }
 
 body.theme-dark .top-nav,
@@ -2144,6 +2148,12 @@ body.theme-dark .diagram-link {
   stroke: #39ff14;
 }
 
+body.theme-dark .profile-img,
+body.theme-dark.home-page .hero-image img,
+body.theme-dark .cv-portrait-img {
+  filter: grayscale(1) contrast(1.12);
+}
+
 body.theme-light .top-nav,
 body.theme-light .site-theme-toolbar,
 body.theme-light .nav-left,
@@ -2157,7 +2167,7 @@ body.theme-light h2,
 body.theme-light h3,
 body.theme-light h4,
 body.theme-light strong {
-  color: #1b1610;
+  color: #162316;
   font-family: inherit;
 }
 
@@ -2173,7 +2183,7 @@ body.theme-light .cta,
 body.theme-light .diagram-caption,
 body.theme-light .source-links span,
 body.theme-light .visitor-idea-card footer {
-  color: #1b1610;
+  color: #263421;
 }
 
 body.theme-light .container,
@@ -2199,10 +2209,63 @@ body.theme-light .cv-skill-grid article,
 body.theme-light .cv-recruiter-panel,
 body.theme-light .cv-proof-section,
 body.theme-light .cv-skill-section {
-  background: #fffff0;
-  border-color: #1b1610;
-  color: #1b1610;
-  box-shadow: none;
+  background:
+    linear-gradient(180deg, #245c34 0 14px, transparent 14px),
+    #fbf7e6;
+  border: 2px solid #151a12;
+  border-radius: 3px;
+  color: #263421;
+  box-shadow: 5px 5px 0 #245c34;
+}
+
+body.theme-light .blog-hero,
+body.theme-light .demos-hero {
+  padding: 22px;
+}
+
+body.theme-light .home-proof-card span,
+body.theme-light .case-card span,
+body.theme-light .blog-kicker,
+body.theme-light .section-kicker,
+body.theme-light .demo-label,
+body.theme-light .activity-number {
+  color: #0f6b2d;
+}
+
+body.theme-light .message.question {
+  border-left-color: #586e2f;
+}
+
+body.theme-light .message.answer {
+  border-left-color: #0f6b2d;
+}
+
+body.theme-light .top-nav,
+body.theme-light .site-theme-toolbar {
+  background: #fbf7e6;
+  border: 2px solid #151a12;
+  border-radius: 3px;
+  padding: 10px 12px;
+  box-shadow: 4px 4px 0 #245c34;
+}
+
+body.theme-light .nav-left::before {
+  content: "tux@homelab:~$ ";
+  color: #0f6b2d;
+}
+
+body.theme-light.home-page .hero-text h1,
+body.theme-light .cv-header-text h1 {
+  color: #162316;
+  font-family: inherit;
+  font-size: clamp(2.2rem, 6vw, 3.1rem);
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+body.theme-light.home-page .hero-role {
+  color: #0f6b2d;
+  font-weight: 900;
 }
 
 body.theme-light .hero-actions a,
@@ -2210,10 +2273,12 @@ body.theme-light .cv-recruiter-actions a,
 body.theme-light .case-card a,
 body.theme-light .idea-form button,
 body.theme-light .site-theme-option {
-  background: #fffff0;
-  border-color: #1b1610;
-  color: #1b1610;
+  background: #fbf7e6;
+  border: 2px solid #151a12;
+  border-radius: 3px;
+  color: #151a12;
   font-family: inherit;
+  box-shadow: 3px 3px 0 #245c34;
 }
 
 body.theme-light .site-theme-option.is-active,
@@ -2221,23 +2286,26 @@ body.theme-light .hero-actions a:hover,
 body.theme-light .cv-recruiter-actions a:hover,
 body.theme-light .case-card a:hover,
 body.theme-light .idea-form button:hover {
-  background: #1b1610;
-  color: #fffff0;
+  background: #151a12;
+  color: #d6ff7a;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #245c34;
 }
 
 body.theme-light .idea-form input,
 body.theme-light .idea-form textarea,
 body.theme-light .diagram-shell {
-  background: #fffff0;
-  border-color: #1b1610;
-  color: #1b1610;
+  background: #fbf7e6;
+  border: 2px solid #151a12;
+  border-radius: 3px;
+  color: #151a12;
   font-family: inherit;
 }
 
 body.theme-light .diagram-zone,
 body.theme-light .diagram-node rect {
-  fill: #fffff0;
-  stroke: #1b1610;
+  fill: #fbf7e6;
+  stroke: #151a12;
 }
 
 body.theme-light .diagram-zone-title,
@@ -2245,9 +2313,50 @@ body.theme-light .diagram-node text,
 body.theme-light .diagram-link-label,
 body.theme-light .diagram-node .diagram-small,
 body.theme-light .diagram-small {
-  fill: #1b1610;
+  fill: #151a12;
 }
 
 body.theme-light .diagram-link {
-  stroke: #1b1610;
+  stroke: #0f6b2d;
+}
+
+body.theme-light .profile-img,
+body.theme-light.home-page .hero-image img,
+body.theme-light .cv-portrait-img {
+  border: 3px solid #151a12;
+  border-radius: 3px;
+  box-shadow: 5px 5px 0 #245c34;
+  filter: sepia(0.14) contrast(1.06) saturate(0.88);
+}
+
+body.theme-light .cv-portrait-orbit text {
+  fill: #0f6b2d;
+  font-family: inherit;
+  letter-spacing: 0;
+}
+
+body.theme-light .source-links a,
+body.theme-light .idea-status-thanks {
+  background: #eef6cf;
+}
+
+body.theme-light .idea-status-invalid,
+body.theme-light .idea-status-slow,
+body.theme-light .idea-status-error {
+  background: #ffe9d2;
+}
+
+body.theme-light .cruncher-icon,
+body.theme-light .demo-icon {
+  background: #e8efcf;
+  border: 2px solid #151a12;
+  border-radius: 3px;
+  color: #151a12;
+  box-shadow: 3px 3px 0 #245c34;
+}
+
+body.theme-light .network-icon span,
+body.theme-light .architecture-icon::before,
+body.theme-light .architecture-icon::after {
+  background: #0f6b2d;
 }