diff --git a/openespi-common/src/main/resources/META-INF/resources/css/gba-theme.css b/openespi-common/src/main/resources/META-INF/resources/css/gba-theme.css
index 7ce8927d..ab86109e 100644
--- a/openespi-common/src/main/resources/META-INF/resources/css/gba-theme.css
+++ b/openespi-common/src/main/resources/META-INF/resources/css/gba-theme.css
@@ -58,12 +58,6 @@
--bs-border-radius-sm: 0;
--bs-border-radius-lg: 0;
--bs-focus-ring-color: rgba(249, 151, 66, 0.45);
-
- /* Data Custodian application.css tokens, so its existing rules adopt the GBA palette */
- --gb-primary: var(--gba-green-900);
- --gb-secondary: var(--gba-green-700);
- --gb-accent: var(--gba-green-700);
- --gb-warning: var(--gba-orange);
}
body[data-gba-app="thirdparty"] {
@@ -79,7 +73,9 @@ body {
min-height: 100vh;
}
-main {
+/* The page content grows so the footer sits at the bottom of short pages. */
+main,
+body > .container {
flex: 1 0 auto;
}
@@ -172,11 +168,6 @@ h1, h2, h3, h4, h5, h6,
--bs-btn-border-width: 2px;
--bs-btn-font-weight: 500;
--bs-btn-font-family: var(--gba-font);
- border-radius: 0; /* the Data Custodian application.css sets a literal 0.5rem */
-}
-
-.btn:hover {
- transform: none;
}
.btn-primary {
@@ -236,12 +227,13 @@ h1, h2, h3, h4, h5, h6,
.gba-hero,
.hero-unit {
+ /* !important beats Bootstrap's !important utilities (bg-*, text-*, rounded) that hero markup
+ still carries; hero backgrounds are always dark, so the text must stay white. */
background: var(--gba-hero-bg) !important;
- /* !important: hero backgrounds are always dark, so override text-dark and similar utilities */
color: #fff !important;
border-left: 6px solid var(--gba-orange);
border-radius: 0 !important;
- box-shadow: none !important;
+ margin-bottom: 2rem;
padding: 3rem;
}
@@ -266,20 +258,13 @@ h1, h2, h3, h4, h5, h6,
.card {
--bs-card-bg: #FFFFFF; /* white cards on the grey page, as on greenbuttonalliance.org */
- border: 1px solid #DDDDDD;
- border-radius: 0 !important;
- box-shadow: none;
+ --bs-card-border-color: #DDDDDD;
}
.card:hover {
- transform: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
-.card-header {
- border-radius: 0 !important;
-}
-
.gba-card-header {
background-color: var(--gba-green-900);
color: #fff;
@@ -300,8 +285,42 @@ h1, h2, h3, h4, h5, h6,
color: var(--gba-green-700);
}
+/* Large status icon on error pages (keeps its semantic text-warning / text-danger colour) */
+.gba-status-icon {
+ font-size: 5rem;
+ line-height: 1;
+}
+
+/* Dashboard statistic tile: white card with a green left rule and a large figure */
+.gba-stat {
+ border-left: 6px solid var(--gba-green-900);
+}
+
+.gba-stat .gba-stat-value {
+ color: var(--gba-green-900);
+ font-size: 2.25rem;
+ font-weight: 700;
+ line-height: 1.1;
+}
+
+.gba-stat .gba-stat-label {
+ color: var(--gba-text);
+ font-weight: 500;
+}
+
/* ---- Forms ----------------------------------------------------------------------------- */
+/* Bootstrap fills inputs and tables with --bs-body-bg, which the theme sets to the grey page
+ colour; keep them white, as on greenbuttonalliance.org. */
+.form-control,
+.form-select {
+ background-color: #FFFFFF;
+}
+
+.table {
+ --bs-table-bg: #FFFFFF;
+}
+
.form-control:focus,
.form-select:focus {
border-color: var(--gba-orange);
@@ -318,8 +337,10 @@ h1, h2, h3, h4, h5, h6,
padding: 2rem 0 1.5rem;
}
-/* Data Custodian templates place the footer inside the page .container; let it span the full
- viewport anyway (body clips the scrollbar-width overshoot of 100vw). */
+/* Pages should place the footer after the page container, as a child of . The two legacy
+ Data Custodian customer pages (customer/home, customer/usagepoints/index; #245) still place it
+ inside the .container, so let it span the full viewport there too (body clips the
+ scrollbar-width overshoot of 100vw). Remove once #245 rebuilds those pages. */
.container > .gba-footer {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
diff --git a/openespi-datacustodian/src/main/resources/static/css/application.css b/openespi-datacustodian/src/main/resources/static/css/application.css
index fe463f47..a742f1f6 100644
--- a/openespi-datacustodian/src/main/resources/static/css/application.css
+++ b/openespi-datacustodian/src/main/resources/static/css/application.css
@@ -1,278 +1,44 @@
/*
* Green Button Data Custodian Application Styles
* Copyright (c) 2018-2026 Green Button Alliance, Inc.
+ *
+ * Colours, typography, header, footer, buttons, cards and heroes come from the shared Green Button
+ * Alliance theme (/css/gba-theme.css, shipped in OpenESPI-Common), which fragments/layout loads
+ * after this file. Keep only Data Custodian-specific rules here and use the theme's --gba-* tokens;
+ * do not redefine the palette, corner radii or component chrome.
*/
-/* Custom Green Button Color Palette */
-:root {
- --gb-primary: #2E7D32; /* Green Button Green */
- --gb-secondary: #388E3C; /* Lighter Green */
- --gb-accent: #4CAF50; /* Success Green */
- --gb-warning: #FF9800; /* Orange */
- --gb-danger: #F44336; /* Red */
- --gb-info: #2196F3; /* Blue */
- --gb-light: #F5F5F5; /* Light Gray */
- --gb-dark: #212121; /* Dark Gray */
-}
-
-/* Override Bootstrap Primary Colors */
-.bg-primary {
- background-color: var(--gb-primary) !important;
-}
-
-.btn-primary {
- background-color: var(--gb-primary);
- border-color: var(--gb-primary);
-}
-
-.btn-primary:hover {
- background-color: var(--gb-secondary);
- border-color: var(--gb-secondary);
-}
-
-.navbar-brand {
- font-weight: 600;
- font-size: 1.5rem;
-}
-
-/* Hero Unit Styling */
-.hero-unit {
- margin-bottom: 2rem;
- background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-secondary) 100%);
- border-radius: 0.5rem;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.hero-unit h1, .hero-unit h2 {
- margin-bottom: 1rem;
- font-weight: 600;
-}
-
-.hero-unit .lead {
- font-size: 1.25rem;
- font-weight: 300;
-}
-
-/* Card Enhancements */
-.card {
- border: none;
- border-radius: 0.75rem;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease;
-}
-
-.card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.card-header {
- border-radius: 0.75rem 0.75rem 0 0 !important;
- font-weight: 600;
-}
-
-/* Navigation Enhancements */
-.navbar {
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.nav-link {
- font-weight: 500;
- transition: all 0.3s ease;
-}
-
-.nav-link:hover {
- transform: translateY(-1px);
-}
-
-/* Form Styling */
-.form-control {
- border-radius: 0.5rem;
- border: 2px solid #e0e0e0;
- transition: all 0.3s ease;
-}
-
-.form-control:focus {
- border-color: var(--gb-primary);
- box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
-}
-
-.btn {
- border-radius: 0.5rem;
- font-weight: 500;
- transition: all 0.3s ease;
-}
-
-.btn:hover {
- transform: translateY(-1px);
-}
-
-/* Dashboard Statistics Cards */
-.stats-card {
- background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
- border-left: 4px solid var(--gb-primary);
-}
-
-/* Alert Styling */
-.alert {
- border-radius: 0.5rem;
- border: none;
- font-weight: 500;
-}
-
-.alert-success {
- background-color: rgba(76, 175, 80, 0.1);
- color: var(--gb-primary);
-}
-
-.alert-danger {
- background-color: rgba(244, 67, 54, 0.1);
- color: var(--gb-danger);
-}
-
-.alert-warning {
- background-color: rgba(255, 152, 0, 0.1);
- color: var(--gb-warning);
-}
-
-.alert-info {
- background-color: rgba(33, 150, 243, 0.1);
- color: var(--gb-info);
-}
-
-/* Footer Styling */
-footer {
- background-color: var(--gb-light);
- border-top: 1px solid #e0e0e0;
-}
-
-footer a {
- color: var(--gb-primary);
- text-decoration: none;
- font-weight: 500;
-}
-
-footer a:hover {
- color: var(--gb-secondary);
- text-decoration: underline;
-}
-
-/* Error Page Styling */
-.error-page {
- min-height: 60vh;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* Loading Spinner */
-.spinner-border-green {
- color: var(--gb-primary);
-}
-
-/* Data Table Enhancements */
-.table {
- border-radius: 0.5rem;
- overflow: hidden;
-}
-
+/* Data tables: GBA dark-green header row */
.table thead th {
- background-color: var(--gb-primary);
- color: white;
+ background-color: var(--gba-green-900);
+ color: #FFFFFF;
border: none;
- font-weight: 600;
-}
-
-.table tbody tr:hover {
- background-color: rgba(46, 125, 50, 0.05);
-}
-
-/* Badge Styling */
-.badge {
- border-radius: 0.5rem;
font-weight: 500;
}
-.badge-success {
- background-color: var(--gb-accent);
-}
-
-.badge-primary {
- background-color: var(--gb-primary);
-}
-
-/* Progress Bar */
-.progress {
- border-radius: 0.5rem;
- height: 0.75rem;
-}
-
-.progress-bar {
- background-color: var(--gb-primary);
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
- .hero-unit {
- padding: 2rem 1.5rem;
- text-align: center;
- }
-
- .hero-unit h1 {
- font-size: 2rem;
- }
-
- .hero-unit h2 {
- font-size: 1.5rem;
- }
-
- .navbar-brand {
- font-size: 1.25rem;
- }
-}
-
-/* Animation Classes */
-@keyframes fadeIn {
- from { opacity: 0; transform: translateY(20px); }
- to { opacity: 1; transform: translateY(0); }
-}
-
-.fade-in {
- animation: fadeIn 0.6s ease-out;
-}
-
-/* Utility Classes */
-.text-green {
- color: var(--gb-primary) !important;
-}
-
-.bg-green {
- background-color: var(--gb-primary) !important;
-}
-
-.border-green {
- border-color: var(--gb-primary) !important;
+.table tbody tr:hover {
+ background-color: var(--gba-green-050);
}
-/* Focus Visible for Accessibility */
+/* Focus visible for accessibility (orange, as the theme's focus ring) */
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible {
- outline: 2px solid var(--gb-primary);
+ outline: 2px solid var(--gba-orange-700);
outline-offset: 2px;
}
-/* Print Styles */
+/* Print: content only */
@media print {
.navbar,
.btn,
footer {
display: none !important;
}
-
+
.container {
max-width: none !important;
margin: 0;
padding: 0;
}
-}
\ No newline at end of file
+}
diff --git a/openespi-datacustodian/src/main/resources/templates/about.html b/openespi-datacustodian/src/main/resources/templates/about.html
index 7f95c011..d2449459 100644
--- a/openespi-datacustodian/src/main/resources/templates/about.html
+++ b/openespi-datacustodian/src/main/resources/templates/about.html
@@ -27,8 +27,8 @@ About
-
-
+
+