From 01114416aaaafd61022c79deca445b1ca8bd70f7 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 10 Apr 2019 19:26:37 +0100
Subject: [PATCH] fix(style): `text_color_light = true` only working in Safari

The .home-section.dark` selector blocks were not being applied by Chrome
and Firefox due to them not supporting CSS Selectors Level 4.

Selectors Level 4 allows the :not() pseudo-class to accept multiple
selectors. See https://stackoverflow.com/a/35993791

However, currently, it is only supported by Safari:
https://caniuse.com/#feat=css-not-sel-list
---
 layouts/partials/css/academic.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index cbd5579d..9d794e61 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -492,16 +492,24 @@ a[data-fancybox] img {
 .home-section.dark h1,
 .home-section.dark h2,
 .home-section.dark h3,
-.home-section.dark a:not(.btn):not(.alert a) {
+.home-section.dark a:not(.btn) {
   color: rgb(248, 248, 242);
 }
 
 /* Underline links in dark sections to separate them from text */
-.home-section.dark a:not(.btn):not(.hero-cta-alt):not(.alert a) {
+.home-section.dark a:not(.btn):not(.hero-cta-alt) {
   text-decoration: underline;
 }
 
+/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */
+.home-section.dark .alert a {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
+
 /* Big underline style for links in dark sections */
+/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */
+/*
 .home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) {
   text-decoration: none;
   position: relative;
@@ -514,7 +522,7 @@ a[data-fancybox] img {
   right: 0;
   position: absolute;
   top: 100%;
-}
+}*/
 
 /* Create the parallax scrolling effect */
 .parallax {
@@ -598,7 +606,7 @@ a[data-fancybox] img {
 .wg-hero.dark .hero-title,
 .wg-hero.dark .hero-lead,
 .wg-hero.dark .hero-cta-alt,
-.wg-hero.dark .hero-note {
+.wg-hero.dark .hero-note > * {
   color: #fff;
   /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */
 }