glossary style updates

Author: Dragos0000

src/html-model-glossary/fragments/header.xsl

@@ -21,6 +21,11 @@
             <meta name="author" content="Publications Office of the European Union"/>
             <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+            <!-- Google Fonts - Roboto -->
+            <link rel="preconnect" href="https://fonts.googleapis.com"/>
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
+            <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+            
             <!-- Bootstrap 5 CSS -->
             <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
 

src/static/css/glossary.css

@@ -11,7 +11,7 @@
 
 body {
     background-color: var(--epo-gray-light);
-    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
+    font-family: Roboto, sans-serif;
     color: var(--epo-text);
     font-size: 1rem;
 }
@@ -137,7 +137,7 @@ table.display {
     margin-top: 20px;
     margin-left: auto;
     margin-right: auto;
-    width: 100% !important;
+    width: 115%;
     border: 1px solid var(--epo-gray-border) !important;
     border-radius: 6px;
     overflow: hidden;
@@ -150,17 +150,16 @@ table.display th {
     background-color: var(--epo-main);
     color: #fbfbfb;
     border-bottom: 1px solid var(--epo-gray-border) !important;
-
-    border-right: none !important;
-}
-
-table.display th {
-    border-color: var(--epo-gray-border) !important;
-    border-bottom: 1px solid var(--epo-gray-border) !important;
     border-right: none !important;
     word-wrap: break-word;
     overflow-wrap: break-word;
     word-break: break-word;
+    text-align: left !important;
+}
+
+/* Override Bootstrap text-center class on table headers */
+table.display thead.text-center th {
+    text-align: left !important;
 }
 
 table.display td {
@@ -171,6 +170,7 @@ table.display td {
     overflow-wrap: break-word;
     word-break: break-all;
     hyphens: auto;
+    text-align: left !important;
 }
 
 /* Enforce width on definition columns */
@@ -198,6 +198,28 @@ table.display td:nth-child(3) {
     width: 35% !important;
 }
 
+/* For 3rd table (Predicates) - Column widths: 20% (Predicate name), 50% (Definition), 30% (Domain/Range) */
+/* Using DataTables ID for higher specificity to override inline styles */
+#DataTables_Table_2 th:nth-child(1),
+#DataTables_Table_2 td:nth-child(1) {
+    width: 20% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+}
+
+#DataTables_Table_2 th:nth-child(2),
+#DataTables_Table_2 td:nth-child(2) {
+    width: 50% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+}
+
+#DataTables_Table_2 th:nth-child(3),
+#DataTables_Table_2 td:nth-child(3) {
+    width: 30% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+}
 
 /* Disable DataTables box-shadow on striped rows */
 table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {