diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
index 1c18cc3cc..e7e49e651 100644
--- a/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
@@ -1,80 +1,6 @@
@use "../abstracts/all" as *;
@use "nhsuk" as *;
-.nhsuk-u-font-style-italic {
- font-style: italic;
-}
-
-.nhsuk-button--red {
- background-color: $nhsuk-red !important;
-
- &:hover {
- background-color: $nhsuk-red-hover !important;
- border-color: $nhsuk-red-hover !important;
- }
-}
-
-.nhsuk-button--beta-login {
- background-color: $nhsuk-blue;
- box-shadow: 0 4px 0 #002f5c;
-}
-
-.nhsuk-button--beta-login:hover {
- background-color: $nhsuk-btn-blue-hover;
-}
-
-// By default, the text on reverse (white) buttons turns white once clicked, rendering them invisible.
-.nhsuk-button--reverse:visited {
- color: $nhsuk-black
-}
-
-.nhsuk-back-link {
- padding: px2rem(20) 0;
- margin-bottom: 0;
-}
-
-.nhsuk-radios__divider {
- text-align: left;
- width: unset;
-}
-
-.nhsuk-radios__item label {
- font-family: $font-stack;
-}
-
-/* Conditional radio buttons - Note: The nhsuk-radios__conditional element needs to be a SIBLING of the radio button input element
- otherwise the CSS selector won't work. See Views/Bookmark/Move.cshtml for a usage example.
- The NHSUK component (nhsuk-radios__conditional) requires JavaScript to work. These tweaks allow it to work without.
-*/
-.nhsuk-radios__conditional {
- display: none;
- margin-left: -22px;
- margin-top: 8px;
-}
-
-.nhsuk-radios__input:checked ~ .nhsuk-radios__conditional {
- display: block !important;
-}
-
-/* jquery unbobtrusive validation style over */
-.nhsuk-error-summary__list li {
- color: $nhsuk-red;
-}
-
-.nhsuk-form-group.input-validation-error {
- @extend .nhsuk-form-group--error;
-}
-
-.nhsuk-input.input-validation-error {
- @extend .nhsuk-input--error
-}
-
-.nhsuk-input:focus {
- border: 2px solid #212b32;
- box-shadow: inset 0 0 0 2px;
- outline: 4px solid #ffeb3b; /* 1 */
- outline-offset: 0;
-}
.display--hide {
display: none !important;
@@ -120,92 +46,6 @@
}
-.nhsuk-bg-light-blue {
- background-color: $nhsuk-light-blue-color;
-}
-
-.nhsuk-bg-pale-blue {
- background-color: $nhsuk-pale-blue-color;
-}
-
-.nhsuk-bg-white {
- background-color: $color_nhsuk-white;
-}
-
-.nhsuk-width-container.search-width-container {
- max-width: px2rem(752);
- margin: 0 auto;
- padding-left: px2rem(68);
- padding-right: px2rem(68);
-}
-
-#maincontent {
-
- button[class^='nhsuk-search__submit'] span.nhsuk-u-visually-hidden {
- color: $color_nhsuk-grey-1;
- background-color: $color_nhsuk-white;
- }
-}
-
-form label.nhsuk-u-visually-hidden {
- color: $color_nhsuk-grey-1;
- background-color: $color_nhsuk-white;
-}
-
-/* One third column layout that switches to full width at the small desktop breakpoint (990px) instead of mobile. */
-.nhsuk-grid-column-one-third-small-desktop {
- @extend .nhsuk-grid-column-one-third;
- width: 33.3333333333% !important;
-
- @media (max-width: px2rem(990)) {
- width: 100% !important;
- }
-}
-
-
-/* Tweaks to styling for single card view. */
-@media(min-width: 768px) and (max-width: 990px) {
- .nhsuk-card-group .nhsuk-grid-column-one-third-small-desktop {
- max-width: 600px !important;
- }
-
- .nhsuk-card-group--centred {
- justify-content: center !important;
- }
-}
-
-.nhsuk-card-banner-container {
- padding-bottom: 42.86%;
- position: relative;
-}
-
-.nhsuk-card-banner {
- height: 100%;
- object-fit: cover;
- object-position: left;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.nhsuk-card-banner-empty {
- background-color: $nhsuk-pale-blue-color;
- border-bottom: 1px solid #d8dde0;
-}
-
-.nhsuk-error-message.error-message--margin-bottom-1 {
- margin-bottom: nhsuk-spacing(1);
-}
-
-.nhsuk-u-margin-bottom-2point5 {
- margin-bottom: 12px;
-
- @media(max-width: 641px) {
- margin-bottom: 10px;
- }
-}
.word-break__break-word {
word-break: break-word;
@@ -216,9 +56,7 @@ form label.nhsuk-u-visually-hidden {
justify-content: space-between;
}
-.nhsuk-button--no-shrink {
- white-space: nowrap;
-}
+
.modal-footer--buttons {
justify-content: space-between !important;
@@ -233,14 +71,6 @@ form label.nhsuk-u-visually-hidden {
box-shadow: 0 0 0 0.2rem $nhsuk-yellow !important;
background-color: $govuk-focus-highlight-yellow;
}
-/*Add a background color to the radio button when focused */
-.nhsuk-radios__input:focus + .radioButton {
- box-shadow: 0 0 0 3px $nhsuk-yellow;
-}
-/*Add a background color to the radio button when focused */
-.nhsuk-checkboxes__input:focus + .checkmark {
- box-shadow: 0 0 0 4px $nhsuk-yellow;
-}
.accessible-link:focus {
outline: none;
diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss
index 4cb2822fe..c839722fd 100644
--- a/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss
@@ -5,126 +5,11 @@ body {
overflow-wrap: break-word;
}
-.nhsuk-header {
- padding: 0 px2rem(32);
-}
-
-.nhsuk-width-container.app-width-container {
- max-width: px2rem(1208);
- margin: 0 auto;
- padding-left: px2rem(32);
- padding-right: px2rem(32);
-}
-
-.nhsuk-header .nhsuk-width-container.app-width-container {
- max-width: px2rem(1144);
- margin: 0 auto;
-}
-
-.nhsuk-width-container.app-width-container.beta-banner {
- padding: px2rem(8) px2rem(32);
- max-width: px2rem(1208);
- margin: 0 auto;
-}
-
-.nhsuk-header .nhsuk-header__container::after {
- content: none;
-}
-
-.nhsuk-header__navigation.app-width-container {
- max-width: px2rem(1144);
-}
-
-.app-width-container--full {
- margin: 0;
- max-width: none
-}
.app-main-wrapper--no-padding {
padding: 0
}
-.nhsuk-header__container.app-width-container {
- display: flex;
- justify-content: space-between;
- gap: 0 px2rem(24);
- padding: px2rem(16) 0;
-}
-
-.nhsuk-header__content {
- display: flex;
- align-items: center;
- min-height: px2rem(40);
- margin-left: auto;
-}
-
-.nhsuk-header__logo {
- flex: 1 0 0;
-}
-
-.nhsuk-header__logo .nhsuk-header__link--service {
- display: inline-flex;
-}
-
-.nhsuk-header__service-name {
- font-size: px2rem(19);
-}
-
-.nhsuk-account__login {
- font-size: px2rem(14);
- float: right;
- position: relative;
- z-index: 2;
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: px2rem(24);
-}
-
-.nhsuk-header__notification-dot {
- position: absolute;
- top: px2rem(8);
- right: px2rem(-10);
- font-size: px2rem(11);
- line-height: px2rem(18);
- font-weight: 900;
- background: $nhsuk-error-color;
- color: white;
- min-width: px2rem(18);
- height: px2rem(18);
- text-align: center;
- border-radius: px2rem(9);
- padding: px2rem(1) px2rem(3) 0;
-}
-
-.nhsuk-header__menu {
- display: none;
-}
-
-.nhsuk-header__search .nhsuk-search__input {
- width: px2rem(260);
-}
-
-.nhsuk-header__search {
- .nhsuk-search__input {
- width: px2rem(260);
-
- &::-moz-placeholder {
- opacity: 1;
- }
- }
-
- #search > label.nhsuk-u-visually-hidden {
- background-color: $nhsuk-white;
- }
-}
-
-.nhsuk-account__login--link,
-.nhsuk-account__login--link:visited,
-.nhsuk-account__login--link:hover {
- color: #fff;
-}
-
.beta-banner {
background-color: $color_nhsuk-grey-5;
color: $nhsuk-text-color;
@@ -155,42 +40,6 @@ body {
font-size: px2rem(16);
}
-.nhsuk-footer {
- padding: px2rem(48) 0;
-}
-
-
-#header-dropdown-menu-control {
- opacity: 0;
- position: absolute;
-}
-
-#header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
- display: block
-}
-
-#header-mobile-search-control {
- display: none;
-}
-
-.nhsuk-header__break {
- display: none;
-}
-
-.nhsuk-header__mobile-only-nav {
- display: none;
-}
-
-.nhsuk-header__mobile-break {
- display: none;
-}
-
-.nhsuk-header__navigation-item--current {
- a {
- font-weight: bold;
- }
-}
-
button[data-toggle="modal"] {
color: #005eb8;
padding: 0;
@@ -254,138 +103,9 @@ button[data-toggle="modal"] {
li.autosuggestion-option:last-of-type {
border-bottom: none !important;
}
-/* large desktop */
-@media (min-width: px2rem(990)) {
-
- .nhsuk-header__navigation-item--current a {
- border-bottom: 4px solid $nhsuk-grey-lighter;
- font-weight: normal;
- }
-
- .nhsuk-header__navigation-link {
- position: relative;
- }
-
- .nhsuk-header__navigation-item:last-child {
- margin-right: 16px;
- }
-}
/* small desktop */
@media (max-width: px2rem(989)) {
-
- .nhsuk-header__container {
- flex-wrap: wrap;
- }
-
- .nhsuk-header {
- padding: 0;
- }
-
- .nhsuk-header__container.app-width-container {
- flex-wrap: wrap;
- gap: 0 0;
- padding: px2rem(16) px2rem(32);
- }
-
- .nhsuk-header__link--service {
- align-items: center;
- -ms-flex-align: center;
- margin-bottom: 0;
- width: auto;
- }
-
- .nhsuk-header__service-name {
- padding-left: px2rem(16);
- }
-
- .nhsuk-header__logo {
- order: 0;
- }
-
- .nhsuk-account__login {
- order: 1;
- margin-left: auto;
- margin-right: 0px;
- }
-
- .nhsuk-header__break {
- display: block;
- width: 100%;
- height: px2rem(24);
- order: 2
- }
-
- .nhsuk-header__search {
- order: 3;
- flex-grow: 1;
- margin-left: 0;
- margin-right: px2rem(24);
- }
-
- .nhsuk-header__menu {
- display: block;
- position: relative;
- order: 4;
- flex: 0 0 px2rem(74);
- }
-
- .nhsuk-header__navigation-list .nhsuk-header__navigation-item,
- .nhsuk-header__navigation .nhsuk-header__navigation-title {
- border-top: 1px solid $color_nhsuk-grey-4;
- }
-
- .nhsuk-header__menu-toggle {
- text-align: center;
- margin: 0;
- right: 0;
- font-weight: 600;
- }
-
- .nhsuk-header__search-form {
- display: flex;
- }
-
- .nhsuk-header__search .nhsuk-search__input {
- flex: 1 0 0;
- }
-
- #header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
- display: block;
- }
-
- .nhsuk-header__notification-dot {
- position: absolute;
- top: px2rem(15);
- left: px2rem(115);
- font-size: px2rem(11);
- line-height: px2rem(18);
- font-weight: 900;
- background: $nhsuk-error-color;
- color: $nhsuk-white;
- min-width: px2rem(18);
- width: fit-content;
- height: px2rem(18);
- text-align: center;
- border-radius: px2rem(9);
- }
-
- .nhsuk-header__navigation-item--current .nhsuk-header__notification-dot {
- left: px2rem(125);
- }
-
- .nhsuk-header__menu-notification-dot {
- position: absolute;
- top: px2rem(-5);
- right: px2rem(-6);
- background: $nhsuk-error-color;
- width: px2rem(12);
- height: px2rem(12);
- border-radius: px2rem(6);
- box-shadow: 0 0 0 2px white;
- z-index: 10;
- }
-
.autosuggestion-menu {
top: 100%;
}
@@ -394,206 +114,14 @@ li.autosuggestion-option:last-of-type {
/* tablet */
@media (max-width: px2rem(768)) {
- .nhsuk-width-container.app-width-container,
- .nhsuk-width-container.app-width-container.beta-banner {
- padding-left: px2rem(16);
- padding-right: px2rem(16);
- }
-
- .nhsuk-back-link {
- padding: 0.5rem 0;
- }
-
- .nhsuk-header__menu .nhsuk-header__not-mobile {
- display: none;
- }
-
.autosuggestion-menu {
top: 100%;
}
- .nhsuk-header__not-mobile {
- display: none;
- }
-
- .nhsuk-header__mobile-only-nav {
- display: flex;
- order: 1;
- justify-content: space-around;
- gap: 0 px2rem(16);
- align-items: flex-start;
- flex-wrap: wrap;
- width: px2rem(166);
- }
-
- .nhsuk-header__mobile-only-nav .nhsuk-header__menu {
- margin-right: px2rem(12);
- }
-
- .nhsuk-header__mobile-only-nav .nhsuk-header__search-toggle {
- margin-left: px2rem(12);
- }
-
- .nhsuk-header__break {
- display: none;
- }
-
- .nhsuk-header__mobile-break {
- display: block;
- width: 100%;
- height: 0;
- }
-
- .nhsuk-header__link--service {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .nhsuk-header__notification-dot {
- top: px2rem(13);
- left: px2rem(100);
- }
-
- .nhsuk-header__service-name {
- padding: px2rem(12) 0 0;
- }
-
- .nhsuk-header__search-toggle {
- position: relative;
- height: px2rem(40);
- order: 2;
- padding: px2rem(7) px2rem(10) 0;
- margin: 0
- }
-
- .nhsuk-header__search .nhsuk-search__submit {
- padding-top: nhsuk-spacing(1);
- }
-
- .nhsuk-header__menu {
- order: 3;
- }
-
- .nhsuk-header__search {
- order: 4;
- width: 100%;
- flex-grow: 1;
- margin: px2rem(16) px2rem(-16) 0;
- border-bottom: 1px solid $color_nhsuk-grey-4;
- }
-
- #header-mobile-search-control {
- display: block;
- opacity: 0;
- position: absolute;
- }
-
- #header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap {
- display: block;
- }
-
- .nhsuk-width-container.nhsuk-header__container.app-width-container {
- padding-bottom: 0;
- }
}
/* mobile */
@media (max-width: px2rem(640)) {
-
- .nhsuk-header__not-mobile {
- display: none;
- }
-
- .nhsuk-header__logo {
- max-width: none;
- }
-
- .nhsuk-header__mobile-only-nav {
- display: flex;
- order: 1;
- justify-content: space-around;
- gap: 0 px2rem(16);
- align-items: flex-start;
- flex-wrap: wrap;
- width: px2rem(166);
- }
-
- .nhsuk-header__pre-login .nhsuk-header__mobile-only-nav {
- align-items: center;
- justify-content: flex-end;
- padding-bottom: px2rem(16);
- }
-
- .nhsuk-header__mobile-only-nav .nhsuk-header__menu {
- margin-right: px2rem(12);
- }
-
- .nhsuk-header__mobile-only-nav .nhsuk-header__search-toggle {
- margin-left: px2rem(12);
- }
-
- .nhsuk-header__break {
- display: none;
- }
-
- .nhsuk-header__mobile-break {
- display: block;
- width: 100%;
- height: 0;
- }
-
- .nhsuk-header__link--service {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .nhsuk-header__notification-dot {
- top: px2rem(13);
- left: px2rem(100);
- }
-
- .nhsuk-header__service-name {
- padding: px2rem(12) 0 0;
- }
-
- .nhsuk-header__search-toggle {
- position: relative;
- height: px2rem(40);
- order: 2;
- padding: px2rem(7) px2rem(10) 0;
- margin: 0
- }
-
- .nhsuk-header__search .nhsuk-search__submit {
- padding-top: nhsuk-spacing(1);
- }
-
- .nhsuk-header__menu {
- order: 3;
- }
-
- .nhsuk-header__search {
- order: 4;
- width: 100%;
- flex-grow: 1;
- margin: px2rem(16) px2rem(-16) 0;
- border-bottom: 1px solid $color_nhsuk-grey-4;
- }
-
- #header-mobile-search-control {
- display: block;
- opacity: 0;
- position: absolute;
- }
-
- #header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap {
- display: block;
- }
-
- .nhsuk-width-container.nhsuk-header__container.app-width-container {
- padding-bottom: 0;
- }
-
.autosuggestion-menu {
top: 100%;
}
diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/nhsuk-overrides.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/nhsuk-overrides.scss
new file mode 100644
index 000000000..98dba42db
--- /dev/null
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/nhsuk-overrides.scss
@@ -0,0 +1,687 @@
+@use "../abstracts/all" as *;
+@use "nhsuk" as *;
+
+.nhsuk-u-font-style-italic {
+ font-style: italic;
+}
+
+.nhsuk-button--red {
+ background-color: $nhsuk-red !important;
+
+ &:hover {
+ background-color: $nhsuk-red-hover !important;
+ border-color: $nhsuk-red-hover !important;
+ }
+}
+
+.nhsuk-button--beta-login {
+ background-color: $nhsuk-blue;
+ box-shadow: 0 4px 0 #002f5c;
+}
+
+.nhsuk-button--beta-login:hover {
+ background-color: $nhsuk-btn-blue-hover;
+}
+
+// By default, the text on reverse (white) buttons turns white once clicked, rendering them invisible.
+.nhsuk-button--reverse:visited {
+ color: $nhsuk-black
+}
+
+.nhsuk-back-link {
+ padding: px2rem(20) 0;
+ margin-bottom: 0;
+}
+
+.nhsuk-radios__divider {
+ text-align: left;
+ width: unset;
+}
+
+.nhsuk-radios__item label {
+ font-family: $font-stack;
+}
+
+/* Conditional radio buttons - Note: The nhsuk-radios__conditional element needs to be a SIBLING of the radio button input element
+ otherwise the CSS selector won't work. See Views/Bookmark/Move.cshtml for a usage example.
+ The NHSUK component (nhsuk-radios__conditional) requires JavaScript to work. These tweaks allow it to work without.
+*/
+.nhsuk-radios__conditional {
+ display: none;
+ margin-left: -22px;
+ margin-top: 8px;
+}
+
+.nhsuk-radios__input:checked ~ .nhsuk-radios__conditional {
+ display: block !important;
+}
+
+/* jquery unbobtrusive validation style over */
+.nhsuk-error-summary__list li {
+ color: $nhsuk-red;
+}
+
+.nhsuk-form-group.input-validation-error {
+ @extend .nhsuk-form-group--error;
+}
+
+.nhsuk-input.input-validation-error {
+ @extend .nhsuk-input--error
+}
+
+.nhsuk-input:focus {
+ border: 2px solid #212b32;
+ box-shadow: inset 0 0 0 2px;
+ outline: 4px solid #ffeb3b; /* 1 */
+ outline-offset: 0;
+}
+
+.nhsuk-bg-light-blue {
+ background-color: $nhsuk-light-blue-color;
+}
+
+.nhsuk-bg-pale-blue {
+ background-color: $nhsuk-pale-blue-color;
+}
+
+.nhsuk-bg-white {
+ background-color: $color_nhsuk-white;
+}
+
+.nhsuk-width-container.search-width-container {
+ max-width: px2rem(752);
+ margin: 0 auto;
+ padding-left: px2rem(68);
+ padding-right: px2rem(68);
+}
+
+#maincontent {
+ button[class^='nhsuk-search__submit'] span.nhsuk-u-visually-hidden {
+ color: $color_nhsuk-grey-1;
+ background-color: $color_nhsuk-white;
+ }
+}
+
+form label.nhsuk-u-visually-hidden {
+ color: $color_nhsuk-grey-1;
+ background-color: $color_nhsuk-white;
+}
+
+/* One third column layout that switches to full width at the small desktop breakpoint (990px) instead of mobile. */
+.nhsuk-grid-column-one-third-small-desktop {
+ @extend .nhsuk-grid-column-one-third;
+ width: 33.3333333333% !important;
+
+ @media (max-width: px2rem(990)) {
+ width: 100% !important;
+ }
+}
+
+
+/* Tweaks to styling for single card view. */
+@media(min-width: 768px) and (max-width: 990px) {
+ .nhsuk-card-group .nhsuk-grid-column-one-third-small-desktop {
+ max-width: 600px !important;
+ }
+
+ .nhsuk-card-group--centred {
+ justify-content: center !important;
+ }
+}
+
+.nhsuk-card-banner-container {
+ padding-bottom: 42.86%;
+ position: relative;
+}
+
+.nhsuk-card-banner {
+ height: 100%;
+ object-fit: cover;
+ object-position: left;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.nhsuk-card-banner-empty {
+ background-color: $nhsuk-pale-blue-color;
+ border-bottom: 1px solid #d8dde0;
+}
+
+.nhsuk-error-message.error-message--margin-bottom-1 {
+ margin-bottom: nhsuk-spacing(1);
+}
+
+.nhsuk-u-margin-bottom-2point5 {
+ margin-bottom: 12px;
+
+ @media(max-width: 641px) {
+ margin-bottom: 10px;
+ }
+}
+
+.nhsuk-button--no-shrink {
+ white-space: nowrap;
+}
+
+/*Add a background color to the radio button when focused */
+.nhsuk-radios__input:focus + .radioButton {
+ box-shadow: 0 0 0 3px $nhsuk-yellow;
+}
+/*Add a background color to the radio button when focused */
+.nhsuk-checkboxes__input:focus + .checkmark {
+ box-shadow: 0 0 0 4px $nhsuk-yellow;
+}
+
+
+
+// Below taken from layout.scss
+// Overrides largely due to
+// - Highly customised header
+// - Use of full browser width hero images and full width colour bands
+// - Beta banner
+//
+// Header customisation not needed with current frontend package
+// - FGC 19/06/25
+
+
+.nhsuk-width-container.app-width-container {
+ max-width: px2rem(1208);
+ margin: 0 auto;
+ padding-left: px2rem(32);
+ padding-right: px2rem(32);
+}
+
+// Header items
+ .nhsuk-header {
+ padding: 0 px2rem(32);
+ }
+
+ .nhsuk-header .nhsuk-width-container.app-width-container {
+ max-width: px2rem(1144);
+ margin: 0 auto;
+ }
+
+ .nhsuk-width-container.app-width-container.beta-banner {
+ padding: px2rem(8) px2rem(32);
+ max-width: px2rem(1208);
+ margin: 0 auto;
+ }
+
+ .nhsuk-header .nhsuk-header__container::after {
+ content: none;
+ }
+
+ .nhsuk-header__navigation.app-width-container {
+ max-width: px2rem(1144);
+ }
+
+ .nhsuk-header__container.app-width-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 0 px2rem(24);
+ padding: px2rem(16) 0;
+ }
+
+ .nhsuk-header__logo {
+ flex: 1 0 0;
+ }
+
+ .nhsuk-header__logo .nhsuk-header__link--service {
+ display: inline-flex;
+ }
+
+ .nhsuk-header__service-name {
+ font-size: px2rem(19);
+ }
+
+ .nhsuk-header__notification-dot {
+ position: absolute;
+ top: px2rem(8);
+ right: px2rem(-10);
+ font-size: px2rem(11);
+ line-height: px2rem(18);
+ font-weight: 900;
+ background: $nhsuk-error-color;
+ color: white;
+ min-width: px2rem(18);
+ height: px2rem(18);
+ text-align: center;
+ border-radius: px2rem(9);
+ padding: px2rem(1) px2rem(3) 0;
+ }
+
+ .nhsuk-header__menu {
+ display: none;
+ }
+
+ .nhsuk-header__search .nhsuk-search__input {
+ width: px2rem(260);
+ }
+
+ .nhsuk-header__search {
+ .nhsuk-search__input {
+ width: px2rem(260);
+
+ &::-moz-placeholder {
+ opacity: 1;
+ }
+ }
+
+ #search > label.nhsuk-u-visually-hidden {
+ background-color: $nhsuk-white;
+ }
+ }
+
+ .nhsuk-header__break {
+ display: none;
+ }
+
+ .nhsuk-header__mobile-only-nav {
+ display: none;
+ }
+
+ .nhsuk-header__mobile-break {
+ display: none;
+ }
+
+ .nhsuk-header__navigation-item--current {
+ a {
+ font-weight: bold;
+ }
+ }
+
+ .nhsuk-account__login {
+ // also a header item
+ font-size: px2rem(14);
+ float: right;
+ position: relative;
+ z-index: 2;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: px2rem(24);
+ }
+
+ .nhsuk-account__login--link,
+ .nhsuk-account__login--link:visited,
+ .nhsuk-account__login--link:hover {
+ // all header items
+ color: #fff;
+ }
+
+
+// End of header items
+
+
+.app-width-container--full {
+ // used to allow placement of hero (full width) images
+ margin: 0;
+ max-width: none
+}
+
+.app-main-wrapper--no-padding {
+ // allowing hero image to touch headers
+ padding: 0
+}
+
+.nhsuk-footer {
+ padding: px2rem(48) 0;
+}
+
+
+
+/* large desktop */
+@media (min-width: px2rem(990)) {
+ // entirely headers
+
+ .nhsuk-header__navigation-item--current a {
+ border-bottom: 4px solid $nhsuk-grey-lighter;
+ font-weight: normal;
+ }
+
+ .nhsuk-header__navigation-link {
+ position: relative;
+ }
+
+ .nhsuk-header__navigation-item:last-child {
+ margin-right: 16px;
+ }
+}
+
+/* small desktop */
+@media (max-width: px2rem(989)) {
+
+ //entirely headers
+
+ .nhsuk-header__container {
+ flex-wrap: wrap;
+ }
+
+ .nhsuk-header {
+ padding: 0;
+ }
+
+ .nhsuk-header__container.app-width-container {
+ flex-wrap: wrap;
+ gap: 0 0;
+ padding: px2rem(16) px2rem(32);
+ }
+
+ .nhsuk-header__link--service {
+ align-items: center;
+ -ms-flex-align: center;
+ margin-bottom: 0;
+ width: auto;
+ }
+
+ .nhsuk-header__service-name {
+ padding-left: px2rem(16);
+ }
+
+ .nhsuk-header__logo {
+ order: 0;
+ }
+
+ .nhsuk-header__break {
+ display: block;
+ width: 100%;
+ height: px2rem(24);
+ order: 2
+ }
+
+ .nhsuk-header__search {
+ order: 3;
+ flex-grow: 1;
+ margin-left: 0;
+ margin-right: px2rem(24);
+ }
+
+ .nhsuk-header__menu {
+ display: block;
+ position: relative;
+ order: 4;
+ flex: 0 0 px2rem(74);
+ }
+
+ .nhsuk-header__navigation-list .nhsuk-header__navigation-item,
+ .nhsuk-header__navigation .nhsuk-header__navigation-title {
+ border-top: 1px solid $color_nhsuk-grey-4;
+ }
+
+ .nhsuk-header__menu-toggle {
+ text-align: center;
+ margin: 0;
+ right: 0;
+ font-weight: 600;
+ }
+
+ .nhsuk-header__search-form {
+ display: flex;
+ }
+
+ .nhsuk-header__search .nhsuk-search__input {
+ flex: 1 0 0;
+ }
+
+ #header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
+ display: block;
+ }
+
+ .nhsuk-header__notification-dot {
+ position: absolute;
+ top: px2rem(15);
+ left: px2rem(115);
+ font-size: px2rem(11);
+ line-height: px2rem(18);
+ font-weight: 900;
+ background: $nhsuk-error-color;
+ color: $nhsuk-white;
+ min-width: px2rem(18);
+ width: fit-content;
+ height: px2rem(18);
+ text-align: center;
+ border-radius: px2rem(9);
+ }
+
+ .nhsuk-header__navigation-item--current .nhsuk-header__notification-dot {
+ left: px2rem(125);
+ }
+
+ .nhsuk-header__menu-notification-dot {
+ position: absolute;
+ top: px2rem(-5);
+ right: px2rem(-6);
+ background: $nhsuk-error-color;
+ width: px2rem(12);
+ height: px2rem(12);
+ border-radius: px2rem(6);
+ box-shadow: 0 0 0 2px white;
+ z-index: 10;
+ }
+
+ .nhsuk-account__login {
+ // also part of the header
+ order: 1;
+ margin-left: auto;
+ margin-right: 0px;
+ }
+
+}
+
+@media (max-width: px2rem(768)) {
+ .nhsuk-width-container.app-width-container,
+ .nhsuk-width-container.app-width-container.beta-banner {
+ padding-left: px2rem(16);
+ padding-right: px2rem(16);
+ }
+
+ // entirely headers from this point
+
+ .nhsuk-back-link {
+ padding: 0.5rem 0;
+ }
+
+ .nhsuk-header__menu .nhsuk-header__not-mobile {
+ display: none;
+ }
+
+ .nhsuk-header__not-mobile {
+ display: none;
+ }
+
+ .nhsuk-header__mobile-only-nav {
+ display: flex;
+ order: 1;
+ justify-content: space-around;
+ gap: 0 px2rem(16);
+ align-items: flex-start;
+ flex-wrap: wrap;
+ width: px2rem(166);
+ }
+
+ .nhsuk-header__mobile-only-nav .nhsuk-header__menu {
+ margin-right: px2rem(12);
+ }
+
+ .nhsuk-header__mobile-only-nav .nhsuk-header__search-toggle {
+ margin-left: px2rem(12);
+ }
+
+ #header-dropdown-menu-control {
+ opacity: 0;
+ position: absolute;
+ }
+
+ #header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
+ display: block
+ }
+
+ #header-mobile-search-control {
+ display: none;
+ }
+
+ .nhsuk-header__break {
+ display: none;
+ }
+
+ .nhsuk-header__mobile-break {
+ display: block;
+ width: 100%;
+ height: 0;
+ }
+
+ .nhsuk-header__link--service {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .nhsuk-header__notification-dot {
+ top: px2rem(13);
+ left: px2rem(100);
+ }
+
+ .nhsuk-header__service-name {
+ padding: px2rem(12) 0 0;
+ }
+
+ .nhsuk-header__search-toggle {
+ position: relative;
+ height: px2rem(40);
+ order: 2;
+ padding: px2rem(7) px2rem(10) 0;
+ margin: 0
+ }
+
+ .nhsuk-header__search .nhsuk-search__submit {
+ padding-top: nhsuk-spacing(1);
+ }
+
+ .nhsuk-header__menu {
+ order: 3;
+ }
+
+ .nhsuk-header__search {
+ order: 4;
+ width: 100%;
+ flex-grow: 1;
+ margin: px2rem(16) px2rem(-16) 0;
+ border-bottom: 1px solid $color_nhsuk-grey-4;
+ }
+
+ #header-mobile-search-control {
+ display: block;
+ opacity: 0;
+ position: absolute;
+ }
+
+ #header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap {
+ display: block;
+ }
+
+ .nhsuk-width-container.nhsuk-header__container.app-width-container {
+ padding-bottom: 0;
+ }
+
+}
+
+@media (max-width: px2rem(640)) {
+
+ //entirely headers
+
+ .nhsuk-header__not-mobile {
+ display: none;
+ }
+
+ .nhsuk-header__logo {
+ max-width: none;
+ }
+
+ .nhsuk-header__mobile-only-nav {
+ display: flex;
+ order: 1;
+ justify-content: space-around;
+ gap: 0 px2rem(16);
+ align-items: flex-start;
+ flex-wrap: wrap;
+ width: px2rem(166);
+ }
+
+ .nhsuk-header__pre-login .nhsuk-header__mobile-only-nav {
+ align-items: center;
+ justify-content: flex-end;
+ padding-bottom: px2rem(16);
+ }
+
+ .nhsuk-header__mobile-only-nav .nhsuk-header__menu {
+ margin-right: px2rem(12);
+ }
+
+ .nhsuk-header__mobile-only-nav .nhsuk-header__search-toggle {
+ margin-left: px2rem(12);
+ }
+
+ .nhsuk-header__break {
+ display: none;
+ }
+
+ .nhsuk-header__mobile-break {
+ display: block;
+ width: 100%;
+ height: 0;
+ }
+
+ .nhsuk-header__link--service {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .nhsuk-header__notification-dot {
+ top: px2rem(13);
+ left: px2rem(100);
+ }
+
+ .nhsuk-header__service-name {
+ padding: px2rem(12) 0 0;
+ }
+
+ .nhsuk-header__search-toggle {
+ position: relative;
+ height: px2rem(40);
+ order: 2;
+ padding: px2rem(7) px2rem(10) 0;
+ margin: 0
+ }
+
+ .nhsuk-header__search .nhsuk-search__submit {
+ padding-top: nhsuk-spacing(1);
+ }
+
+ .nhsuk-header__menu {
+ order: 3;
+ }
+
+ .nhsuk-header__search {
+ order: 4;
+ width: 100%;
+ flex-grow: 1;
+ margin: px2rem(16) px2rem(-16) 0;
+ border-bottom: 1px solid $color_nhsuk-grey-4;
+ }
+
+ #header-mobile-search-control {
+ display: block;
+ opacity: 0;
+ position: absolute;
+ }
+
+ #header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap {
+ display: block;
+ }
+
+ .nhsuk-width-container.nhsuk-header__container.app-width-container {
+ padding-bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/LearningHub.Nhs.WebUI/Views/Shared/Tenant/LearningHub/_Layout.cshtml b/LearningHub.Nhs.WebUI/Views/Shared/Tenant/LearningHub/_Layout.cshtml
index c16fa837c..6b679b67e 100644
--- a/LearningHub.Nhs.WebUI/Views/Shared/Tenant/LearningHub/_Layout.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Shared/Tenant/LearningHub/_Layout.cshtml
@@ -21,6 +21,7 @@
+