💄(ap) updated branding and colors for ap_nau

Replaced logo with ap_logo.svg and removed old images;
Updated color palette for better consistency.

sites/ap_nau/CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
-## Added 
+### Added 
 
-- 🎉(ap) started the site ap_nau
+- 🎉(ap) started the site ap_nau
+
+### Changed
+
+- 💄(ap) updated branding and colors for ap_nau

sites/ap_nau/src/backend/templates/richie/base.html

@@ -21,7 +21,7 @@
 {% endblock meta_rdfa_context %}
 
 {% block branding_topbar %}
-    <img src="{% static "richie/images/ina_and_nau.png" %}" class="topbar__logo" alt="{{ SITE.name }}">
+    <img src="{% static "richie/images/ap_logo.svg" %}" class="topbar__logo" alt="{{ SITE.name }}">
 {% endblock branding_topbar %}
 
 {% block body_header %}

sites/ap_nau/src/frontend/cunningham.cjs

@@ -9,7 +9,7 @@ module.exports = {
           'primary-100': '#ffcad1',
           'primary-200': '#f19597',
           'primary-300': '#e86a6f',
-          'primary-400': '#074ce1',
+          'primary-400': '#09122c',
           'primary-500': '#f72c30',
           'primary-600': '#e81f2f',
           'primary-700': '#d60f29',
@@ -22,7 +22,7 @@ module.exports = {
           'secondary-500': '#a3abb4',
           'secondary-600': '#79818a',
           'secondary-700': '#656c75',
-          'secondary-800': '#454d55',
+          'secondary-800': '#872341',
           'secondary-900': '#242b32',
           'black': '#000000',
           'black-two': '#232323',
@@ -50,7 +50,7 @@ module.exports = {
         button: {
           'font-family': 'Rubik',
           'font-weight': 'bold',
-          'background-color': '#074ce1',
+          'background-color': '#09122c',
         },
       },
     },

sites/ap_nau/src/frontend/scss/extras/colors/_palette.scss

@@ -2,11 +2,12 @@
 $palette: recursive-map-merge(
   $palette,
   (
-    "firebrick6":  #711471,
-    "indianred3": #d31245,
+    "firebrick6":  #09122C,
+    "indianred3": #872341,
     "midnightblue": #b1005d,
-    "greenteal": #00beab,
+    "greenteal": #BE3144,
     "banana": #eec800,
-    "light-blue": #ecf2ff,
+    "light-blue": #f5f5f5,
+    "light-teal": #e94158,
   )
 );

sites/ap_nau/src/frontend/scss/extras/colors/_theme.scss

@@ -4,23 +4,21 @@ $r-theme: recursive-map-merge(
   $r-theme,
   (
     topbar: (
-      item-hover-color: r-color("firebrick6"),
+      item-hover-color: r-color("greenteal"),
     ),
     body-mentions: (
       base-color: r-color("black"),
       base-background: r-color("white"),
       poweredby-hover: r-color("black"),
     ),
     hero-intro: (
-      insert-background-image:
-        url("../../richie/images/components/hero_background.svg"),
       content-color: r-color("white"),
       search-input-background: r-color("white"),
       search-btn-background: r-color("white"),
       search-icon-fill: r-color("firebrick6"),
-      cta-variant-from: r-color("banana"),
+      cta-variant-from: r-color("greenteal"),
       cta-variant-to: rgba(r-color("white"), 0.8),
-      cta-color: r-color("black"),
+      cta-color: r-color("white"),
       cta-border: r-color("white"),
     ),
     spinner: (

sites/ap_nau/src/frontend/scss/extras/components/_footer.scss

@@ -1,6 +1,7 @@
 // Main body footer
 .body-footer {
   padding: 2rem 0;
+  background: r-color("firebrick6");
 
   &__brand {
     &>a {

sites/ap_nau/src/frontend/scss/extras/components/_header.scss

@@ -31,7 +31,7 @@
 
   &__logo {
     @include media-breakpoint-up($r-topbar-breakpoint) {
-      width: 19.5rem;
+      width: 5.5rem;
     }
   }
 

sites/ap_nau/src/frontend/scss/extras/components/_subheader.scss

@@ -53,8 +53,21 @@ $r-subheader-search-title-width: 19rem !default; // aligned on computed search r
     }
   }
 
+  &__aside {
+    a:hover {
+      text-decoration: none;
+    }
+  }
+
   .breadcrumbs {
-    background: r-color("light-blue");
+    background: r-color("firebrick6");
+    color: r-color("white");
+
+    &__item {
+      a:hover {
+        color: r-color("light-teal");
+      }
+    }
   }
 
   // Component variants

sites/ap_nau/src/frontend/scss/extras/components/templates/courses/cms/_course_detail.scss

@@ -4,6 +4,10 @@
     text-align: left;
   }
 
+  &__licence, &__label {
+    color: r-color("indianred3") !important;
+  }
+
   // In future remove this block and configure the `checkmark-list-decoration-color` variable
   &__skills {
     @if r-theme-val(course-detail, checkmark-list-decoration) {

sites/ap_nau/src/frontend/scss/extras/components/templates/richie/large_banner/_large_banner.scss

@@ -76,9 +76,11 @@
   position: relative;
   padding: 0;
   background-repeat: no-repeat;
-  background-position: top right;
-  background-size: 70%;
-  background-color: #711471;
+  background-color: r-color('firebrick6');
+  //background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%2309122C'/%3E%3Cstop offset='1' stop-color='%23872341'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='800' height='666.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23BE3144' stroke-width='36.4' stroke-opacity='0.03' %3E%3Ccircle fill='%2309122C' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%230a1032' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%230c0d37' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23110d3d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23190e42' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23221048' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%232b114d' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23361352' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23411458' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%234d165d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%235b1763' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23681967' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236d1a63' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23721c5e' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23781e58' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%237d2051' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23822149' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23872341' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
 
   @include media-breakpoint-down(lg) {
     background-position: bottom right;