diff --git a/assets/scss/_boxes.scss b/assets/scss/_boxes.scss
index 9d2d49fd6f..c33316099f 100644
--- a/assets/scss/_boxes.scss
+++ b/assets/scss/_boxes.scss
@@ -4,7 +4,11 @@
 @mixin box-variant($parent, $color-name, $color-value) {
   $text-color: color-contrast($color-value);
   $link-color: mix($blue, $text-color, lightness($color-value));
-  $link-hover-color: rgba($link-color, 0.5) !default;
+  $link-hover-color: if(
+    color-contrast($link-color) == $color-contrast-light,
+    shade-color($link-color, $link-shade-percentage),
+    tint-color($link-color, $link-shade-percentage)
+  );
 
   #{$parent} {
     &--#{$color-name} {
@@ -31,7 +35,7 @@
 
   // Improve contrast for the links in paragraphs.
   @include link-variant(
-    "#{$parent}--#{$color-name} p > a",
+    "#{$parent}--#{$color-name} p > a, #{$parent}--#{$color-name} span > a",
     $link-color,
     $link-hover-color,
     false
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index cbad7f3678..135a3add21 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -43,12 +43,22 @@ $display1-size: null !default;
   @import url($web-font-path);
 }
 
-footer {
+.td-footer {
+  @extend .td-box--dark;
+
   min-height: 150px;
+  padding-top: map-get($spacers, 5);
 
   @include media-breakpoint-down(lg) {
     min-height: 200px;
   }
+
+  &__copyright-etc {
+    @extend .small;
+  }
+  &__about {
+    font-size: initial;
+  }
 }
 
 // Adjust anchors vs the fixed menu.
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 4d6f3df70f..5b5861dcae 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
 {{ $links := .Site.Params.links -}}
-<footer class="bg-dark pt-5 row d-print-none">
+<footer class="td-footer row d-print-none">
   <div class="container-fluid">
     <div class="row mx-md-2">
       <div class="col-6 col-sm-4 text-xs-center order-sm-2">
@@ -16,11 +16,17 @@
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-12 col-sm-4 text-center py-2 order-sm-2">
-        {{ with .Site.Params.copyright }}<small class="text-white">&copy; {{ now.Year}} {{ .}} {{ T "footer_all_rights_reserved" }}</small>{{ end }}
-        {{ with .Site.Params.privacy_policy }}<small class="ms-1"><a href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
+      <div class="td-footer__copyright-etc col-12 col-sm-4 text-center py-2 order-sm-2">
+        {{ with .Site.Params.copyright -}}
+          <span>&copy; {{ now.Year }} {{ . }} {{ T "footer_all_rights_reserved" }}</span>
+        {{- end }}
+        {{ with .Site.Params.privacy_policy -}}
+          <span class="ms-1"><a href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></span>
+        {{- end }}
         {{ if not .Site.Params.ui.footer_about_disable -}}
-          {{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
+          {{ with .Site.GetPage "about" -}}
+            <p class="td-footer__about mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
+          {{- end -}}
         {{ end }}
       </div>
     </div>