Re: [PR] Implement premium modern design with glassmorphism and HSL color system [groovy-website]

Copilot commented on code in PR #74:
URL: https://github.com/apache/groovy-website/pull/74#discussion_r2868688950


##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+    /* Core HSL Tokens */
+    --primary-h: 198; /* Groovy Blue */
+    --primary-s: 47%;
+    --primary-l: 49%;
+    
+    --accent-h: 20; /* Groovy Orange/Red */
+    --accent-s: 100%;
+    --accent-l: 43%;
+
+    --bg-dark: hsl(var(--primary-h), 20%, 10%);
+    --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+    --text-main: hsl(var(--primary-h), 10%, 90%);
+    --text-muted: hsl(var(--primary-h), 10%, 70%);
+    
+    --glass-bg: hsla(0, 0%, 100%, 0.05);
+    --glass-border: hsla(0, 0%, 100%, 0.1);
+    
+    --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+    background-color: var(--bg-dark) !important;
+    color: var(--text-main) !important;
+    transition: var(--transition-standard);
+    font-size: 16px !important;
+    letter-spacing: 0.01em;
+}

Review Comment:
   `body` is forcing a light text color (`--text-main`) with `!important`, but the existing layout/styles keep major containers like `#content` on a white background (see `style.css`), which will make large portions of the site render as light text on white (poor contrast / unreadable). Either scope the dark theme styles to a specific wrapper/class, or update the main content container backgrounds/text colors together (e.g., ensure `#content`/page backgrounds are dark when body text is light).



##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+    /* Core HSL Tokens */
+    --primary-h: 198; /* Groovy Blue */
+    --primary-s: 47%;
+    --primary-l: 49%;
+    
+    --accent-h: 20; /* Groovy Orange/Red */
+    --accent-s: 100%;
+    --accent-l: 43%;
+
+    --bg-dark: hsl(var(--primary-h), 20%, 10%);
+    --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+    --text-main: hsl(var(--primary-h), 10%, 90%);
+    --text-muted: hsl(var(--primary-h), 10%, 70%);
+    
+    --glass-bg: hsla(0, 0%, 100%, 0.05);
+    --glass-border: hsla(0, 0%, 100%, 0.1);
+    
+    --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+    background-color: var(--bg-dark) !important;
+    color: var(--text-main) !important;
+    transition: var(--transition-standard);
+    font-size: 16px !important;
+    letter-spacing: 0.01em;
+}
+
+/* Glassmorphism Navbar */
+.navbar-default {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border-bottom: 1px solid var(--glass-border) !important;
+    box-shadow: var(--shadow-soft);
+    transition: var(--transition-standard);
+}
+
+.navbar-brand {
+    font-weight: 700 !important;
+    letter-spacing: -0.02em;
+    color: white !important;
+    text-shadow: 0 0 10px hsla(var(--primary-h), 100%, 50%, 0.3);
+}
+
+.navbar-nav > li > a {
+    color: var(--text-muted) !important;
+    transition: var(--transition-standard);
+    border-radius: 8px;
+    margin: 0 4px;
+}
+
+.navbar-nav > li > a:hover {
+    background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2) !important;
+    color: white !important;
+    transform: translateY(-1px);
+}
+
+/* Premium Hero Section */
+.band {
+    background: linear-gradient(135deg, 
+        hsl(var(--primary-h), 60%, 40%) 0%, 
+        hsl(var(--primary-h), 30%, 20%) 100%
+    ) !important;

Review Comment:
   `.band` sets a new `background: ... !important;`, which will override the existing `#band`/`.svg #band` background-image rules that currently render the Groovy logo in the hero. Since the `div` is otherwise empty, this change likely removes the homepage hero logo entirely. Consider layering the gradient with the existing background image (or otherwise reintroducing the logo/content) so the hero isn’t blank.
   ```suggestion
       /* Use background-color so existing #band/.svg #band background-image is preserved */
       background-color: hsl(var(--primary-h), 30%, 20%) !important;
   ```



##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+    /* Core HSL Tokens */
+    --primary-h: 198; /* Groovy Blue */
+    --primary-s: 47%;
+    --primary-l: 49%;
+    
+    --accent-h: 20; /* Groovy Orange/Red */
+    --accent-s: 100%;
+    --accent-l: 43%;
+
+    --bg-dark: hsl(var(--primary-h), 20%, 10%);
+    --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+    --text-main: hsl(var(--primary-h), 10%, 90%);
+    --text-muted: hsl(var(--primary-h), 10%, 70%);
+    
+    --glass-bg: hsla(0, 0%, 100%, 0.05);
+    --glass-border: hsla(0, 0%, 100%, 0.1);
+    
+    --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+    background-color: var(--bg-dark) !important;
+    color: var(--text-main) !important;
+    transition: var(--transition-standard);
+    font-size: 16px !important;
+    letter-spacing: 0.01em;
+}
+
+/* Glassmorphism Navbar */
+.navbar-default {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border-bottom: 1px solid var(--glass-border) !important;
+    box-shadow: var(--shadow-soft);
+    transition: var(--transition-standard);
+}
+
+.navbar-brand {
+    font-weight: 700 !important;
+    letter-spacing: -0.02em;
+    color: white !important;
+    text-shadow: 0 0 10px hsla(var(--primary-h), 100%, 50%, 0.3);
+}
+
+.navbar-nav > li > a {
+    color: var(--text-muted) !important;
+    transition: var(--transition-standard);
+    border-radius: 8px;
+    margin: 0 4px;
+}
+
+.navbar-nav > li > a:hover {
+    background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2) !important;
+    color: white !important;
+    transform: translateY(-1px);

Review Comment:
   The navbar link styling only defines a hover state; there’s no corresponding `:focus`/`:focus-visible` treatment. With the new dark/glass styling, keyboard users may get little/no visible focus indication. Add explicit focus styles (ideally matching hover) and ensure outlines aren’t removed without a replacement.
   ```suggestion
   .navbar-nav > li > a:hover,
   .navbar-nav > li > a:focus,
   .navbar-nav > li > a:focus-visible {
       background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2) !important;
       color: white !important;
       transform: translateY(-1px);
       outline: 2px solid hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.8);
       outline-offset: 2px;
   ```



##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+    /* Core HSL Tokens */
+    --primary-h: 198; /* Groovy Blue */
+    --primary-s: 47%;
+    --primary-l: 49%;
+    
+    --accent-h: 20; /* Groovy Orange/Red */
+    --accent-s: 100%;
+    --accent-l: 43%;
+
+    --bg-dark: hsl(var(--primary-h), 20%, 10%);
+    --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+    --text-main: hsl(var(--primary-h), 10%, 90%);
+    --text-muted: hsl(var(--primary-h), 10%, 70%);
+    
+    --glass-bg: hsla(0, 0%, 100%, 0.05);
+    --glass-border: hsla(0, 0%, 100%, 0.1);
+    
+    --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+    background-color: var(--bg-dark) !important;
+    color: var(--text-main) !important;
+    transition: var(--transition-standard);
+    font-size: 16px !important;
+    letter-spacing: 0.01em;
+}
+
+/* Glassmorphism Navbar */
+.navbar-default {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border-bottom: 1px solid var(--glass-border) !important;
+    box-shadow: var(--shadow-soft);
+    transition: var(--transition-standard);
+}
+
+.navbar-brand {
+    font-weight: 700 !important;
+    letter-spacing: -0.02em;
+    color: white !important;
+    text-shadow: 0 0 10px hsla(var(--primary-h), 100%, 50%, 0.3);
+}
+
+.navbar-nav > li > a {
+    color: var(--text-muted) !important;
+    transition: var(--transition-standard);
+    border-radius: 8px;
+    margin: 0 4px;
+}
+
+.navbar-nav > li > a:hover {
+    background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2) !important;
+    color: white !important;
+    transform: translateY(-1px);
+}
+
+/* Premium Hero Section */
+.band {
+    background: linear-gradient(135deg, 
+        hsl(var(--primary-h), 60%, 40%) 0%, 
+        hsl(var(--primary-h), 30%, 20%) 100%
+    ) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.band::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: radial-gradient(circle at 70% 30%, hsla(var(--accent-h), 100%, 50%, 0.15) 0%, transparent 50%);
+    pointer-events: none;
+}
+
+/* Buttons */
+#big-download-button, .btn-primary {
+    background-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l)) !important;
+    border: none !important;
+    box-shadow: 0 4px 14px 0 hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.39);
+    transition: var(--transition-standard) !important;
+}
+
+#big-download-button:hover, .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23);
+    background-color: hsl(var(--accent-h), var(--accent-s), 50%) !important;
+}

Review Comment:
   Buttons get new hover transforms/shadows, but there’s no explicit `:focus`/`:focus-visible` styling to keep a clear focus indicator, and the added motion isn’t disabled for users who prefer reduced motion. Add focus-visible styles for `#big-download-button`/`.btn-primary` and consider a `prefers-reduced-motion: reduce` override to disable transforms/transitions.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe-GSC0n/0aZo1d/SJB6HiN2Ni2O/[email protected]

For queries about this service, please contact Infrastructure at:
users-pF6z+fRhj9EyzMRdD/[email protected]