site: apply principles from ISEAL branding guidelines

The ISEAL Branding Guidelines Version 3.0 (June 2021) say we should
use Arial font for online material and it specifies the RGB values
to use for headings, sub-headings, and body text. It also specifies
four secondary colors to be used in support of the primary colors.

site/layouts/_default/term.html

@@ -6,7 +6,7 @@
                 <span class="">{{ .Params.title | markdownify }}</span>
                 {{- with .Params.required -}}
                 <div class="badge-required">
-                  <span class="badge bg-primary align-middle">Required</span>
+                  <span class="badge align-middle">Required</span>
                 </div>
                 {{- end -}}
               </th>

site/source/scss/main.scss

@@ -8,6 +8,12 @@ $iseal-dark-blue: #0e304a;
 // another light blue
 $iseal-light-blue: #328cd1;
 
+// Secondary colors
+$iseal-secondary-orange: rgb(223, 155, 24);
+$iseal-secondary-green: rgb(137, 168, 52);
+$iseal-secondary-red: rgb(196, 41, 55);
+$iseal-secondary-purple: rgb(116, 68, 129);
+
 /*
    Some styles inspired from the Dublin Core DCTERMS website, see:
    https://www.dublincore.org/specifications/dublin-core/dcmi-terms/
@@ -16,13 +22,23 @@ $iseal-light-blue: #328cd1;
 body {
     /* for the "scroll spy" navbar feature */
     position: relative;
-    color: $primary;
+    color: $black;
     background-color: $white;
-    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
+    font-family: Arial,sans-serif;
+}
+
+// The ISEAL Branding Guidelines Version 3.0 say that sub-headings should be
+// normal weight and secondary blue color.
+p.lead {
+    color: $secondary;
 }
 
 div.badge-required {
     float: right;
+
+    span {
+        background-color: $iseal-secondary-red;
+    }
 }
 
 td.field-name {
@@ -30,17 +46,16 @@ td.field-name {
     font-weight: 700;
 }
 
-.table {
-    color: $primary;
-}
-
 /* Override Bootstrap's top border on tbody */
 .table>:not(:first-child) {
     border-top: 2px solid $iseal-light-blue;
 }
 
+// The ISEAL Branding Guidelines Version 3.0 say that headings should be bold
+// weight and primary blue color.
 h1, h2, h3 {
     color: $primary;
+    font-weight: 700;
 }
 
 .footer {

site/source/scss/style.scss

@@ -1,10 +1,10 @@
 // override some Bootstrap colors. Apparently we need to do this *before* we
 // process Bootstrap.
 
-// ISEAL dark blue
-$primary: #072439;
-// ISEAL light blue
-$secondary: #2A7AB7;
+// ISEAL primary (dark) blue
+$primary: rgb(0, 82, 142);
+// ISEAL secondary (light) blue
+$secondary: rgb(27, 118, 188);
 
 // selectively import components we need from bootstrap
 // see: node_modules/bootstrap/scss/bootstrap.scss