{{ value.title }}
- - {# Section intro #} -{{ value.intro|richtext }}
-
- {# Signposting cards #}
- -
+
- - {% firstof card.heading card.page.title %} - {{ card.description|richtext }} - {% image card.image fill-100x100 %} +
-
+ {% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %}
+ ++ {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #} - {{ card.link_text }} + {{ card.link_text }} {% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}
{% firstof card.heading card.page.title %}
+{{ card.description|richtext }}+
{% endfor %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml
index 899fc11a6..1924ba7f0 100644
--- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml
+++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml
@@ -1,7 +1,7 @@
context:
value:
- title: Our featured services
- intro: This is an optional field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ title: What we do
+ intro: 'Discover how we can help you achieve your goals through our range of services.'
cards:
- heading: Advocacy, Engagement & Income
description: ' -
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-b" %} +
{{ page.title }}
{% pageurl page.blog_index as blog_index_url %} diff --git a/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html b/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html index c7b0e1234..8deb6139e 100644 --- a/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html @@ -4,7 +4,7 @@ {% block content %}diff --git a/tbx/project_styleguide/templates/patterns/pages/service/service_page.html b/tbx/project_styleguide/templates/patterns/pages/service/service_page.html index a2933e922..462c2c1dc 100644 --- a/tbx/project_styleguide/templates/patterns/pages/service/service_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/service/service_page.html @@ -4,7 +4,7 @@ {% block content %}- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +{{ page.title }}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +{% if page.intro %} diff --git a/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html b/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html index 8368c871a..3853e0d3b 100644 --- a/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html @@ -4,7 +4,7 @@ {% block content %}{{ page.title }}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +{% include_block page.body %} diff --git a/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html b/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html index f5eedae10..ce291d952 100644 --- a/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html +++ b/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html @@ -4,7 +4,7 @@ {% block content %}{{ page.title }}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +{{ page.title }}
diff --git a/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html b/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html index e008588c2..6503a2323 100644 --- a/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html +++ b/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html @@ -11,7 +11,7 @@- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading="Password required" classes="motif-heading--one" %} +Password required
diff --git a/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html b/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html index 44c9e53aa..88a4c98bf 100644 --- a/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html +++ b/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html @@ -27,8 +27,7 @@diff --git a/tbx/static_src/sass/base/_base.scss b/tbx/static_src/sass/base/_base.scss index 523dc0dc7..c249206ae 100755 --- a/tbx/static_src/sass/base/_base.scss +++ b/tbx/static_src/sass/base/_base.scss @@ -41,7 +41,7 @@ form { input:focus, select:focus, textarea:focus { - outline: $focus-width solid var(--color--focus-ring); + outline: $focus-width solid var(--color--theme-primary); outline-offset: 0; } } diff --git a/tbx/static_src/sass/base/_typography.scss b/tbx/static_src/sass/base/_typography.scss index c91d8cd60..3fab3c222 100755 --- a/tbx/static_src/sass/base/_typography.scss +++ b/tbx/static_src/sass/base/_typography.scss @@ -20,6 +20,7 @@ html { color: var(--color--heading); font-style: inherit; font-weight: inherit; + letter-spacing: -1px; } @mixin quote-text() { diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss index 53ee35740..7156e2f3e 100644 --- a/tbx/static_src/sass/components/_avatar.scss +++ b/tbx/static_src/sass/components/_avatar.scss @@ -1,6 +1,14 @@ @use 'config' as *; .avatar { + // Component-specific theme-less accent colors + --avatar-accent-one: #{$color--white}; + --avatar-accent-two: #{$color--white}; + // Themed accent colors + [class*='theme-'] & { + --avatar-accent-one: var(--color--theme-primary); + --avatar-accent-two: var(--color--theme-secondary); + } position: relative; width: $avatar-size-72; height: $avatar-size-72; @@ -43,11 +51,10 @@ display: block; border-radius: 50%; position: absolute; - opacity: 0.8; } &::before { - border: 1px solid var(--color--accent-two); + border: 1px solid var(--avatar-accent-two); width: 102%; height: 103%; inset: -3px 2px; @@ -55,13 +62,13 @@ @include media-query(medium) { width: 95%; height: 95%; - border-width: 3px; + border-width: 2px; inset: 2px -3px; } } &::after { - border: 2px solid var(--color--accent-three); + border: 2px solid var(--avatar-accent-one); height: 95%; width: 95%; inset: 2px 3px; @@ -69,6 +76,7 @@ @include media-query(medium) { width: 102%; height: 103%; + border-width: 3px; inset: -5px -4px; } } diff --git a/tbx/static_src/sass/components/_button-link.scss b/tbx/static_src/sass/components/_button-link.scss index 78c1ce416..d90a0a45d 100644 --- a/tbx/static_src/sass/components/_button-link.scss +++ b/tbx/static_src/sass/components/_button-link.scss @@ -1,6 +1,7 @@ @use 'config' as *; .button-link { + $root: &; @include font-size('size-four'); @include high-contrast-text-decoration(); font-weight: $weight--semibold; @@ -10,7 +11,16 @@ width: 100%; color: var(--color--white); transition: background-color $transition-quick; - // TODO: add default bg color for themed pages var(--color--accent) once color themes BE is ready + background-color: var(--color--theme-primary); + + // compact variant of the button with reduced padding + &--compact { + padding: 13px $spacer-small; + + #{$root}__arrow { + margin-left: $spacer-mini; + } + } @include reduced-motion() { transition: none; @@ -26,15 +36,15 @@ } &--theme-coral { - background-color: $color--coral-charity; + background-color: $color--coral; } &--theme-nebuline { - background-color: $color--nebuline-public; + background-color: $color--nebuline; } &--theme-lagoon { - background-color: $color--lagoon-wagtail; + background-color: $color--lagoon; } &__arrow { diff --git a/tbx/static_src/sass/components/_division-signpost.scss b/tbx/static_src/sass/components/_division-signpost.scss index dd41d1e57..e3553ebba 100644 --- a/tbx/static_src/sass/components/_division-signpost.scss +++ b/tbx/static_src/sass/components/_division-signpost.scss @@ -35,26 +35,26 @@ } &--theme-coral { - background-color: var(--color--coral-charity); + background-color: var(--color--coral); &:has(.button-link:hover) { - background-color: var(--color--coral-30); + background-color: var(--color--coral-dark); } } &--theme-nebuline { - background-color: var(--color--nebuline-public); + background-color: var(--color--nebuline); &:has(.button-link:hover) { - background-color: var(--color--nebuline-30); + background-color: var(--color--nebuline-dark); } } &--theme-lagoon { - background-color: var(--color--lagoon-wagtail); + background-color: var(--color--lagoon); &:has(.button-link:hover) { - background-color: var(--color--lagoon-30); + background-color: var(--color--lagoon-dark); } } } diff --git a/tbx/static_src/sass/components/_employee-owned-icon.scss b/tbx/static_src/sass/components/_employee-owned-icon.scss index c6a86c7a1..cf406fc52 100644 --- a/tbx/static_src/sass/components/_employee-owned-icon.scss +++ b/tbx/static_src/sass/components/_employee-owned-icon.scss @@ -43,7 +43,7 @@ position: absolute; top: calc(50% - 15px); left: calc(50% - 19px); - color: var(--color--coral-charity); + color: var(--color--coral); opacity: 0.5; mix-blend-mode: screen; diff --git a/tbx/static_src/sass/components/_featured-services.scss b/tbx/static_src/sass/components/_featured-services.scss new file mode 100644 index 000000000..295232fbe --- /dev/null +++ b/tbx/static_src/sass/components/_featured-services.scss @@ -0,0 +1,52 @@ +@use 'config' as *; + +.featured-services { + &__header { + margin-bottom: $spacer-medium; + } + + &__cards { + display: grid; + gap: $spacer-mini-plus; + grid-template-columns: repeat(1, 1fr); + + @include media-query(medium) { + grid-template-columns: repeat(2, 1fr); + } + + @include media-query(large) { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + } + + &__card { + display: flex; + flex-direction: column; + width: 100%; + transition: background-color $transition-quick; + background-color: var(--color--dark-background); + + &:has(.button-link:hover) { + background-color: var(--color--black); + } + + @include high-contrast-mode() { + border: 1px solid var(--color--text); + } + } + + &__text { + padding: $spacer-small-plus $spacer-small $spacer-medium; + margin-bottom: auto; + } + + &__heading { + color: var(--color--white); + margin-bottom: $spacer-mini; + } + + // override the rich-text font-size + &__description.rich-text { + @include font-size(size-seven); + } +} diff --git a/tbx/static_src/sass/components/_footer.scss b/tbx/static_src/sass/components/_footer.scss index 20cf95b22..f2c85f56f 100644 --- a/tbx/static_src/sass/components/_footer.scss +++ b/tbx/static_src/sass/components/_footer.scss @@ -24,28 +24,17 @@ } &__newsletter-link { + @include font-size('size-four'); @include link-styles( $color: var(--color--heading), $interaction-color: var(--color--heading), - $offset: 5px, $underline-color: var(--color--grey-50) ); + font-weight: $weight--semibold; display: flex; align-items: center; gap: $spacer-mini-plus; - padding: $spacer-mini 0 $spacer-small 0; - border-bottom: 1px solid var(--color--border); - } - - &__newsletter-link-text { - display: flex; - flex-direction: column; - line-height: 1; - } - - &__newsletter-link-title { - @include font-size('size-four'); - font-weight: $weight--semibold; + padding: $spacer-mini 0; @include media-query(large) { line-height: 1; diff --git a/tbx/static_src/sass/components/_form.scss b/tbx/static_src/sass/components/_form.scss index 8655d1519..1c0697f39 100644 --- a/tbx/static_src/sass/components/_form.scss +++ b/tbx/static_src/sass/components/_form.scss @@ -33,6 +33,6 @@ } .errorlist { - color: var(--color--light-background); + color: var(--color--theme-primary-light); font-weight: $weight--semibold; } diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 38a0705c7..fdc0b7209 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -99,6 +99,16 @@ } } + &__division-signpost, + &__featured-services { + grid-column: 2 / span 4; + margin-bottom: $spacer; + + @include media-query(large) { + grid-column: 2 / span 12; + } + } + &__wide-image { margin-bottom: $spacer-medium; grid-column: 2 / span 5; @@ -306,15 +316,6 @@ } } - &__division-signpost { - grid-column: 2 / span 4; - margin-bottom: $spacer; - - @include media-query(large) { - grid-column: 2 / span 12; - } - } - // header and navigation grid elements &__header-logo { grid-column: 2 / span 2; diff --git a/tbx/static_src/sass/components/_home-page-intro.scss b/tbx/static_src/sass/components/_home-page-intro.scss index c9a99a5be..1ad264a53 100644 --- a/tbx/static_src/sass/components/_home-page-intro.scss +++ b/tbx/static_src/sass/components/_home-page-intro.scss @@ -17,10 +17,10 @@ .text-coral { @include media-query(large) { @include link-styles( - $color: var(--color--coral-charity), - $interaction-color: var(--color--coral-charity), - $underline-color: var(--color--coral-charity), - $underline-hover-color: var(--color--coral-charity) + $color: var(--color--coral), + $interaction-color: var(--color--coral), + $underline-color: var(--color--coral), + $underline-hover-color: var(--color--coral) ); } } @@ -28,10 +28,10 @@ .text-nebuline { @include media-query(large) { @include link-styles( - $color: var(--color--nebuline-public), - $interaction-color: var(--color--nebuline-public), - $underline-color: var(--color--nebuline-public), - $underline-hover-color: var(--color--nebuline-public) + $color: var(--color--nebuline), + $interaction-color: var(--color--nebuline), + $underline-color: var(--color--nebuline), + $underline-hover-color: var(--color--nebuline) ); } } diff --git a/tbx/static_src/sass/components/_instagram-gallery.scss b/tbx/static_src/sass/components/_instagram-gallery.scss index 9c6a87283..1ce06ac50 100644 --- a/tbx/static_src/sass/components/_instagram-gallery.scss +++ b/tbx/static_src/sass/components/_instagram-gallery.scss @@ -17,11 +17,11 @@ width: 100%; aspect-ratio: 1 / 1; overflow: hidden; - border: 1px solid var(--color--accent-three); + border: 1px solid var(--color--theme-primary); transition: border $transition-quick; &:hover { - border: 3px solid var(--color--accent-three); + border: 3px solid var(--color--theme-primary); } &:focus { diff --git a/tbx/static_src/sass/components/_mailchimp.scss b/tbx/static_src/sass/components/_mailchimp.scss index 77650af8f..f0f4bd0a5 100644 --- a/tbx/static_src/sass/components/_mailchimp.scss +++ b/tbx/static_src/sass/components/_mailchimp.scss @@ -94,8 +94,8 @@ div.mce_inline_error { @include font-size('size-seven'); font-weight: $weight--semibold; - color: var(--color--accent-two-inverse); - background-color: var(--color--light-grey-background); + color: var(--color--theme-primary-dark); + background-color: var(--color--theme-primary-light); margin-top: 10px; padding: 5px 10px; } @@ -109,7 +109,7 @@ } #mce-error-response { - color: var(--color--accent-two); + color: var(--color--theme-secondary); font-weight: $weight--semibold; padding: 0; margin: $spacer-mini 0 $spacer-medium; diff --git a/tbx/static_src/sass/components/_mode-switcher.scss b/tbx/static_src/sass/components/_mode-switcher.scss index c7979371c..b2ef0f4f0 100644 --- a/tbx/static_src/sass/components/_mode-switcher.scss +++ b/tbx/static_src/sass/components/_mode-switcher.scss @@ -3,12 +3,12 @@ .mode-switcher { $root: &; padding-top: 45px; - border-top: 1px solid var(--color--nav-border); - display: flex; + border-top: 1px solid var(--color--border); + display: none; // temporarily hidden until the light mode is updated justify-content: center; @include media-query(menu) { - display: inline-block; + display: none; // temporarily hidden until the light mode is updated padding-top: 0; padding-left: $spacer-small; margin-left: $spacer-small; @@ -52,7 +52,7 @@ .mode-light & { @include media-query(menu) { - color: var(--color--accent-three); + color: var(--color--theme-primary); } } } @@ -63,14 +63,14 @@ .mode-dark & { @include media-query(menu) { - color: var(--color--accent-three); + color: var(--color--theme-primary); } } } } &__button { - border: 1px solid var(--color--heading-50); + border: 1px solid var(--color--grey-70); border-radius: 21px; width: 49px; height: 26px; @@ -79,10 +79,6 @@ align-items: center; position: relative; - @include media-query(menu) { - border: 1px solid var(--color--text-50); - } - &::before { top: 3px; inset-inline-start: 26px; @@ -98,7 +94,7 @@ border: 1px solid transparent; @include media-query(menu) { - background-color: var(--color--accent-three); + background-color: var(--color--theme-primary); } @include reduced-motion() { diff --git a/tbx/static_src/sass/components/_partners.scss b/tbx/static_src/sass/components/_partners.scss index 7efe49c02..63e9d95ef 100644 --- a/tbx/static_src/sass/components/_partners.scss +++ b/tbx/static_src/sass/components/_partners.scss @@ -29,7 +29,6 @@ @include media-query(large) { gap: $spacer-small; - justify-content: flex-start; } @include media-query('x-large') { diff --git a/tbx/static_src/sass/components/_promo.scss b/tbx/static_src/sass/components/_promo.scss index 8695e14db..7958eb99c 100644 --- a/tbx/static_src/sass/components/_promo.scss +++ b/tbx/static_src/sass/components/_promo.scss @@ -13,7 +13,7 @@ display: flex; flex-direction: column; justify-content: center; - background-color: var(--color--light-background); + background-color: var(--color--theme-primary-light); color: var(--color--light-background-text); padding: $spacer-small; order: 2; diff --git a/tbx/static_src/sass/components/_report-in-page-nav.scss b/tbx/static_src/sass/components/_report-in-page-nav.scss index 55e96057e..0880f737c 100644 --- a/tbx/static_src/sass/components/_report-in-page-nav.scss +++ b/tbx/static_src/sass/components/_report-in-page-nav.scss @@ -69,7 +69,7 @@ width: 11px; height: 16px; display: inline-block; - color: var(--color--accent-three); + color: var(--color--theme-primary); transform: translateY(-2px); margin-left: 7px; transition: transform $transition-quick; diff --git a/tbx/static_src/sass/components/_report-section.scss b/tbx/static_src/sass/components/_report-section.scss index 3df42f97e..c8c2cd710 100644 --- a/tbx/static_src/sass/components/_report-section.scss +++ b/tbx/static_src/sass/components/_report-section.scss @@ -41,11 +41,11 @@ @include ring($diameter: 30px, $opacity: 0.75); &--one { - @include ring-one($top: 3px, $color: var(--color--accent-two)); + @include ring-one($top: 3px, $color: var(--color--theme-secondary)); } &--two { - @include ring-two($top: 3px, $color: var(--color--accent-three)); + @include ring-two($top: 3px, $color: var(--color--theme-primary)); } } diff --git a/tbx/static_src/sass/components/_skip-link.scss b/tbx/static_src/sass/components/_skip-link.scss index 5fcd9de49..f196cb0df 100644 --- a/tbx/static_src/sass/components/_skip-link.scss +++ b/tbx/static_src/sass/components/_skip-link.scss @@ -5,7 +5,7 @@ top: -200px; left: 0; color: var(--color--light-background-text); - background-color: var(--color--light-background); + background-color: var(--color--theme-primary-light); padding: $spacer-mini; &:focus { diff --git a/tbx/static_src/sass/components/_table.scss b/tbx/static_src/sass/components/_table.scss index 1d845941d..0fd42819b 100644 --- a/tbx/static_src/sass/components/_table.scss +++ b/tbx/static_src/sass/components/_table.scss @@ -19,12 +19,12 @@ &__cell { padding: $spacer-mini-plus; - border: 1px solid var(--color--light-background); + border: 1px solid var(--color--theme-primary-light); text-align: left; &--heading { @include font-size(size-five); - background-color: var(--color--light-background); + background-color: var(--color--theme-primary-light); color: var(--color--light-background-text); } diff --git a/tbx/static_src/sass/components/_tabs-mobile.scss b/tbx/static_src/sass/components/_tabs-mobile.scss index 7f20af471..5574e956e 100644 --- a/tbx/static_src/sass/components/_tabs-mobile.scss +++ b/tbx/static_src/sass/components/_tabs-mobile.scss @@ -66,11 +66,11 @@ @include ring($opacity: 1); &--one { - @include ring-one($color: var(--color--accent-two)); + @include ring-one($color: var(--color--theme-secondary)); } &--two { - @include ring-two($color: var(--color--accent-three)); + @include ring-two($color: var(--color--theme-primary)); } } diff --git a/tbx/static_src/sass/components/_tabs.scss b/tbx/static_src/sass/components/_tabs.scss index 2c3ccaf3b..c4ade2bfd 100644 --- a/tbx/static_src/sass/components/_tabs.scss +++ b/tbx/static_src/sass/components/_tabs.scss @@ -29,7 +29,7 @@ margin-bottom: $spacer-small; &:focus { - outline: $focus-width solid var(--color--focus-ring-muted); + outline: $focus-width solid var(--color--theme-primary-muted); } &--active { diff --git a/tbx/static_src/sass/components/_title-filters.scss b/tbx/static_src/sass/components/_title-filters.scss index 4b15468cf..eb89965fe 100644 --- a/tbx/static_src/sass/components/_title-filters.scss +++ b/tbx/static_src/sass/components/_title-filters.scss @@ -23,7 +23,7 @@ background-color: var(--color--decoration); margin-right: 30px; position: relative; - top: 28px; + top: 17px; } } diff --git a/tbx/static_src/sass/components/_values.scss b/tbx/static_src/sass/components/_values.scss index adfb84e79..6221470cc 100644 --- a/tbx/static_src/sass/components/_values.scss +++ b/tbx/static_src/sass/components/_values.scss @@ -75,7 +75,7 @@ &__strapline { @include font-size('size-five'); - color: var(--color--accent-three); + color: var(--color--theme-primary); font-weight: $weight--semibold; margin-bottom: $spacer-mini-plus; } diff --git a/tbx/static_src/sass/components/_work-sections.scss b/tbx/static_src/sass/components/_work-sections.scss index 8fb40bd9c..5b6d94ab0 100644 --- a/tbx/static_src/sass/components/_work-sections.scss +++ b/tbx/static_src/sass/components/_work-sections.scss @@ -24,11 +24,11 @@ @include ring($diameter: 30px, $opacity: 0.75); &--one { - @include ring-one($top: 3px, $color: var(--color--accent-two)); + @include ring-one($top: 3px, $color: var(--color--theme-secondary)); } &--two { - @include ring-two($top: 3px, $color: var(--color--accent-three)); + @include ring-two($top: 3px, $color: var(--color--theme-primary)); } } } diff --git a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss index b3df41007..f502bed92 100644 --- a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss +++ b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss @@ -13,7 +13,7 @@ Styles for the top level of the navigation at mobile @include z-index(base); @include nav-fixed-position($header-height: $header-height-mobile); display: block; - background-color: var(--color--nav-background); + background-color: var(--color--background); @include media-query(menu) { display: none; @@ -43,7 +43,7 @@ Styles for the top level of the navigation at mobile @include font-size('size-five'); display: flex; padding: $spacer-small; - border-bottom: 1px solid var(--color--nav-border); + border-bottom: 1px solid var(--color--border); justify-content: space-between; align-items: center; diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss b/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss index 2ef440de6..efb6aa077 100644 --- a/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss +++ b/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss @@ -16,7 +16,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve $header-height: $header-height-desktop, $full-height: false ); - background-color: var(--color--nav-background); + background-color: var(--color--background); padding: 25px 0 $spacer-mini; position: absolute; top: $spacer-medium; @@ -50,7 +50,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve font-weight: $weight--regular; display: block; padding: $spacer-mini $spacer-mini-plus; - border-bottom: 1px solid var(--color--nav-border); + border-bottom: 1px solid var(--color--border); &:focus { @include focus-style(); diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss b/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss index bdab65aa2..e530af040 100644 --- a/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss +++ b/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss @@ -18,7 +18,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve $header-height: $header-height-desktop, $full-height: false ); - background-color: var(--color--nav-background); + background-color: var(--color--background); padding: $spacer-half $grid-gutters; // for high contrast mode border: 1px solid transparent; @@ -97,7 +97,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve // a link item at the lowest level &--child { @include link-styles( - $color: var(--color--nav-text), + $color: var(--color--heading), $interaction-color: var(--color--heading), $underline-color: var(--color--heading) ); diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss index 83e1d91be..850c86ecb 100644 --- a/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss +++ b/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss @@ -14,7 +14,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve $root: &; @include z-index(base); @include nav-fixed-position($header-height: $header-height-mobile); - background-color: var(--color--nav-background); + background-color: var(--color--background); // the unordered list containing the level 2 menu items // also used for the level 3 menu items @@ -35,7 +35,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve @include font-size('size-five'); display: flex; padding: $spacer-small; - border-bottom: 1px solid var(--color--nav-border); + border-bottom: 1px solid var(--color--border); gap: 18px; align-items: center; diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss index bbffdd347..b786da6d4 100755 --- a/tbx/static_src/sass/config/_mixins.scss +++ b/tbx/static_src/sass/config/_mixins.scss @@ -124,7 +124,7 @@ $shadow: false, $underline-hover-color: $color ) { - outline: $focus-width solid var(--color--focus-ring); + outline: $focus-width solid var(--color--theme-primary); text-decoration-thickness: $link-underline-thickness-interaction; text-decoration-color: $underline-hover-color; @@ -343,23 +343,23 @@ } } -@mixin ring-one($top: 8px, $color: var(--color--accent-three)) { +@mixin ring-one($top: 8px, $color: var(--color--theme-primary)) { top: $top; color: $color; } -@mixin ring-two($top: 8px, $color: var(--color--accent-two)) { +@mixin ring-two($top: 8px, $color: var(--color--theme-secondary)) { left: $top; color: $color; } @mixin ring-one-hover() { - color: var(--color--accent-two); + color: var(--color--theme-secondary); opacity: 1; } @mixin ring-two-hover() { - color: var(--color--accent-three); + color: var(--color--theme-primary); opacity: 1; } diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss index 46844a3f9..09fc23188 100755 --- a/tbx/static_src/sass/config/_variables.scss +++ b/tbx/static_src/sass/config/_variables.scss @@ -1,73 +1,51 @@ @use 'sass:color'; // --------------------------------- Colors ------------------------------------ -// See https://torchbox.github.io/front-end/themes_and_modes/#css-variables +// See https://torchbox.github.io/torchbox.com/front-end/themes_and_modes/#css-variables -$color--black: #000; -$color--eclipse: #1d2325; -$color--dark-background: #171c1d; - -$color--nebuline-public: #6f60d0; -$color--nebuline-30: #481cd9; -$color--nebuline-20: #9373ff; -$color--nebuline-10: #f1edff; - -$color--coral-charity: #ee5276; -$color--coral-30: #d02e3c; -$color--coral-20: #fc8698; -$color--coral-10: #f9f1f6; - -$color--lagoon-wagtail: #0096a8; -$color--lagoon-30: #0b778e; -$color--lagoon-20: #6bd8ef; -$color--lagoon-10: #ecf2ed; +// Charity coral theme +$color--coral: #ee5276; +$color--coral-dark: #be425e; +$color--coral-light: #f9f1f6; +$color--sky: #659ff2; -$color--banana-30: #417c35; -$color--banana-20: #fde05f; -$color--banana-10: #fff6d0; +// Public nebuline theme +$color--nebuline: #6f60d0; +$color--nebuline-dark: #594da6; +$color--nebuline-light: #f1edff; +$color--spearmint: #6cd9bf; -$color--earth-30: #5d7150; -$color--earth-20: #a9ba9e; -$color--earth-10: #f0eeea; +// Wagtail lagoon theme +$color--lagoon: #0096a8; +$color--lagoon-dark: #007886; +$color--lagoon-light: #ecf2ed; +$color--coolmint: #b6e2df; -$color--pink: #fe7eec; -$color--purple: #5e1998; -$color--sky: #659ff2; -$color--blue: #2828ef; -$color--unripe-banana: #418433; +// About green theme $color--green: #398078; -$color--spearmint: #6cd9bf; -$color--coolmint: #b6e2df; +$color--green-dark: #2e6660; +$color--green-light: #f0eeea; +$color--banana: #fde05f; $color--white: #fff; $color--grey-5: #efefef; $color--grey-10: #e6e6e6; $color--grey-20: #ccc; -$color--grey-30: #b3b3b3; -$color--grey-40: #999; $color--grey-50: #808080; -$color--grey-60: #666; $color--grey-70: #4d4d4d; -$color--grey-75: #3a3a3a; - $color--mid-grey: #282e30; // in figma this colour is created with a very transparent white, but this is used on the cookie banner where it needs to be a solid colour - -// specific colour for the streamfield background in the earth theme light mode, where grey 5 is too light -$color--earth-streamfield-background: #e6e3df; +$color--eclipse: #1d2325; +$color--black: #000; // Dark mode by default :root, .mode-dark { - // the following base variables do not change with the theme + // The following base variables do not change with the theme --color--dark-background: #{color.adjust($color--black, $alpha: -0.7)}; --color--background: #{$color--eclipse}; - --color--nav-text: #{$color--grey-5}; - --color--nav-border: #{color.adjust($color--eclipse, $alpha: -0.3)}; --color--light-background-text: #{$color--eclipse}; --color--heading: #{$color--white}; - --color--heading-50: #{color.adjust($color--white, $alpha: -0.5)}; --color--text: #{$color--grey-20}; - --color--text-50: #{color.adjust($color--grey-20, $alpha: -0.5)}; --color--link: #{$color--white}; --color--link-underline: #{color.adjust($color--white, $alpha: -0.5)}; --color--link-interaction: #{$color--white}; @@ -77,132 +55,76 @@ $color--earth-streamfield-background: #e6e3df; --color--border: #{color.adjust($color--grey-50, $alpha: -0.5)}; --color--overlay: #{color.adjust($color--black, $alpha: -0.6)}; --color--background--overlay: #{color.adjust($color--eclipse, $alpha: -1)}; - --color--light-grey-background: #{$color--grey-5}; --color--background-swirls-one: #{$color--black}; --color--background-swirls-two: #{$color--white}; - // The following base variables do not change with neither theme nor mode - // where we always want white + // The following base variables do not change with either theme or mode --color--white: #{$color--white}; - // where we always want black - used by footer carbon component - --color--black: #{$color--black}; - // where we always want grey-10 - used by footer carbon component --color--grey-10: #{$color--grey-10}; - // where we always want grey-50 - used by footer nav links - --color--grey-50: #{$color--grey-50}; - // where we always want elcipse (high contrast mode bits) + --color--grey-70: #{$color--grey-70}; --color--eclipse: #{$color--eclipse}; - --color--coral-charity: #{$color--coral-charity}; - --color--nebuline-public: #{$color--nebuline-public}; - --color--lagoon-wagtail: #{$color--lagoon-wagtail}; - --color--coral-30: #{$color--coral-30}; - --color--nebuline-30: #{$color--nebuline-30}; - --color--lagoon-30: #{$color--lagoon-30}; + --color--black: #{$color--black}; + --color--coral: #{$color--coral}; + --color--coral-dark: #{$color--coral-dark}; + --color--nebuline: #{$color--nebuline}; + --color--nebuline-dark: #{$color--nebuline-dark}; + --color--lagoon: #{$color--lagoon}; + --color--lagoon-dark: #{$color--lagoon-dark}; --color--sky: #{$color--sky}; } -// Coral theme, dark mode - also by default +// Coral theme, dark mode :root, .theme-coral.mode-dark { - --color--focus-ring: #{$color--coral-20}; - --color--focus-ring-muted: #{color.adjust($color--coral-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--nebuline-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--coral-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--purple}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--pink}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-30}; - --color--accent-three-inverse: #{$color--coral-30}; - --color--nav-background: #{$color--nebuline-30}; - --color--light-background: #{$color--coral-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--coral-20}; + --color--theme-primary: #{$color--coral}; + --color--theme-primary-muted: #{color.adjust($color--coral, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--coral-dark}; + --color--theme-primary-light: #{$color--coral-light}; + --color--theme-secondary: #{$color--sky}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 9373ff and --color--accent-three fc8698 - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary ee5276 and --color--theme-secondary 659ff2 + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } -// Lagoon theme, dark mode -.theme-lagoon.mode-dark { - --color--focus-ring: #{$color--lagoon-20}; - --color--focus-ring-muted: #{color.adjust($color--lagoon-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--nebuline-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--lagoon-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--blue}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--sky}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-30}; - --color--accent-three-inverse: #{$color--lagoon-30}; - --color--nav-background: #{$color--nebuline-30}; - --color--light-background: #{$color--lagoon-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--lagoon-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 9373ff and --color--accent-three 6bd8ef - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); +// Nebuline theme, dark mode +.theme-nebuline.mode-dark { + --color--theme-primary: #{$color--nebuline}; + --color--theme-primary-muted: #{color.adjust($color--nebuline, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--nebuline-dark}; + --color--theme-primary-light: #{$color--nebuline-light}; + --color--theme-secondary: #{$color--spearmint}; } -// Banana theme, dark mode -.theme-banana.mode-dark { - --color--focus-ring: #{$color--banana-20}; - --color--focus-ring-muted: #{color.adjust($color--banana-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--lagoon-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--banana-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--unripe-banana}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--spearmint}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-30}; - --color--accent-three-inverse: #{$color--banana-30}; - --color--nav-background: #{$color--lagoon-30}; - --color--light-background: #{$color--banana-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--banana-20}; +// Lagoon theme, dark mode +.theme-lagoon.mode-dark { + --color--theme-primary: #{$color--lagoon}; + --color--theme-primary-muted: #{color.adjust($color--lagoon, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--lagoon-dark}; + --color--theme-primary-light: #{$color--lagoon-light}; + --color--theme-secondary: #{$color--coolmint}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 6bd8ef and --color--accent-three fde05f - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary 0096a8 and --color--theme-secondary b6e2df + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } -// Earth theme, dark mode -.theme-earth.mode-dark { - --color--focus-ring: #{$color--earth-20}; - --color--focus-ring-muted: #{color.adjust($color--earth-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--lagoon-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--earth-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--green}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--coolmint}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-30}; - --color--accent-three-inverse: #{$color--banana-30}; - --color--nav-background: #{$color--lagoon-30}; - --color--light-background: #{$color--earth-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--earth-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 6bd8ef and --color--accent-three a9ba9e - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); +// Green theme, dark mode +.theme-green.mode-dark { + --color--theme-primary: #{$color--green}; + --color--theme-primary-muted: #{color.adjust($color--green, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--green-dark}; + --color--theme-primary-light: #{$color--green-light}; + --color--theme-secondary: #{$color--banana}; } .mode-light { // redeclare any base variables that are different in light mode (these ones don't change with the theme) --color--dark-background: #{color.adjust($color--black, $alpha: -0.97)}; --color--background: #{$color--white}; - --color--nav-text: #{$color--eclipse}; - --color--nav-border: #{color.adjust($color--white, $alpha: -0.3)}; --color--heading: #{$color--eclipse}; - --color--heading-50: #{color.adjust($color--eclipse, $alpha: -0.5)}; --color--text: #{$color--grey-70}; - --color--text-50: #{color.adjust($color--grey-70, $alpha: -0.5)}; --color--decoration: #{$color--eclipse}; --color--link: #{$color--eclipse}; --color--link-underline: #{color.adjust($color--eclipse, $alpha: -0.5)}; @@ -213,98 +135,23 @@ $color--earth-streamfield-background: #e6e3df; --color--background-swirls-two: #{$color--grey-50}; } -// Coral theme, light mode (coral theme is by default if theme class not specified) +// Coral theme, light mode .mode-light, .theme-coral.mode-light { - --color--focus-ring: #{$color--coral-30}; - --color--focus-ring-muted: #{color.adjust($color--coral-30, $alpha: -0.4)}; - --color--accent-one: #{$color--white}; - --color--accent-two: #{$color--nebuline-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--coral-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--pink}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--purple}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-20}; - --color--accent-three-inverse: #{$color--coral-20}; - --color--nav-background: #{$color--nebuline-20}; - --color--light-background: #{$color--coral-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--coral-20}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 481cd9 and --color--accent-three d02e3c - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary ee5276 and --color--theme-secondary 659ff2 + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } // Lagoon theme, light mode .theme-lagoon.mode-light { - --color--focus-ring: #{$color--lagoon-30}; - --color--focus-ring-muted: #{color.adjust($color--lagoon-30, $alpha: -0.4)}; - --color--accent-one: #{$color--white}; - --color--accent-two: #{$color--nebuline-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--lagoon-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--sky}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--blue}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-20}; - --color--accent-three-inverse: #{$color--lagoon-20}; - --color--nav-background: #{$color--nebuline-20}; - --color--light-background: #{$color--lagoon-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--lagoon-20}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two #7045ff and --color--accent-three #0b778e - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); -} - -// Banana theme, light mode -.theme-banana.mode-light { - --color--focus-ring: #{$color--banana-30}; - --color--focus-ring-muted: #{color.adjust($color--banana-30, $alpha: -0.4)}; - --color--accent-one: #{$color--white}; - --color--accent-two: #{$color--lagoon-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--banana-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--spearmint}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--unripe-banana}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-20}; - --color--accent-three-inverse: #{$color--banana-20}; - --color--nav-background: #{$color--lagoon-20}; - --color--light-background: #{$color--banana-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--banana-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two #0c8099 and --color--accent-three #417c35 - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); -} - -// Earth theme, light mode -.theme-earth.mode-light { - // Usual overrides - --color--focus-ring: #{$color--earth-30}; - --color--focus-ring-muted: #{color.adjust($color--earth-30, $alpha: -0.4)}; - --color--accent-one: #{$color--earth-10}; - --color--accent-two: #{$color--lagoon-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--earth-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--coolmint}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--green}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-20}; - --color--accent-three-inverse: #{$color--earth-20}; - --color--nav-background: #{$color--lagoon-20}; - --color--light-background: #{$color--earth-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--earth-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two #0c8099 and --color--accent-three #5d7150 - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary 0096a8 and --color--theme-secondary b6e2df + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } // --------------------------------- Fonts ------------------------------------- @@ -380,7 +227,7 @@ $large-font-sizes: ( $small-font-sizes: ( size-zero: ( 60px, - 1.2, + 1, ), size-one: ( 50px, @@ -491,7 +338,7 @@ $z-index: ( // --------------------------------- Accessibility ----------------------------- -$focus-color: var(--color--focus-ring); +$focus-color: var(--color--theme-primary); $focus-width: 3px; // --------------------------------- Specific styles --------------------------- diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index deafcf436..e2fcfc924 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -22,6 +22,7 @@ @use 'components/employee-owned-icon'; @use 'components/event-block'; @use 'components/featured-case-study'; +@use 'components/featured-services'; @use 'components/footer'; @use 'components/footer-cta'; @use 'components/form';- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-b mb-spacerMini md:mb-spacerSmall" %} - ++{{ page.title }}
{% block intro %} {# intro content goes here - different for work page and historical work page #} {% endblock %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html index a08d43ba4..63ea72cff 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -194,6 +194,11 @@Division signpost block
{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %}++Featured services block
+ {% include "patterns/molecules/streamfield/blocks/featured_services_block.html" %} +Footer CTA
{% include "patterns/molecules/footer-cta/footer-cta.html" with value=partners_data %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml b/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml index a11ec09e7..7bd2c7860 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml @@ -118,6 +118,11 @@ tags: raw: |
image:
+ # featured services block
+ 'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
+ raw: |
+ 
+ image:
# company logo for pull quote
value.logo max-110x70 format-webp class="pullquote__company-logo":
raw: |
diff --git a/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html b/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html
index c01351748..abcc9167e 100644
--- a/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html
+++ b/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html
@@ -90,7 +90,7 @@ Heading 4
Links styled as buttons
-+
Digital products {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %} Digital products {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %} Digital products {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide_base.html b/tbx/project_styleguide/templates/patterns/styleguide_base.html index 680588c80..af658920c 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide_base.html +++ b/tbx/project_styleguide/templates/patterns/styleguide_base.html @@ -12,9 +12,10 @@
+
+ {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static featured-services__title " %}
+ {% if value.intro %}
+
+ {{ value.intro|richtext }}
+ {% endif %}
+ -
{% for card in value.cards %}
-
Grow your audience, mobilise and increase your income through design, communication and strategy
' @@ -17,7 +17,7 @@ context: accessible_link_text: Our services on scaling impact through Technology tags: - image: - 'card.image fill-100x100': + srcset_image: + 'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""': raw: | -
+
diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html
index ffa373281..cb733bc5e 100644
--- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html
+++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html
@@ -2,7 +2,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=item.title classes="motif-heading--one" %}
+
{% if tags %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html
index 9e8b931cd..c728fc83d 100644
--- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html
+++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html
@@ -2,8 +2,7 @@
{{ item.title }}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=item.title classes="motif-heading--one" %}
-
+
diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html
index e2c91ba4f..38ac6e3a1 100644
--- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html
+++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html
@@ -2,7 +2,7 @@
{{ item.title }}
{{ strapline }}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=item.title classes="motif-heading--one" %}
+
{% if tags %}
diff --git a/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html b/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html
index 8c5acc0f4..a727a5aed 100644
--- a/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html
+++ b/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html
@@ -10,7 +10,7 @@
{% wagtailcache 600 "footerlinks" current_site.pk is_pattern_library %}
{% footerlinks %}
{% endwagtailcache %}
- {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="footer__arrow" %}
+ Sign up for news and insights{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="footer__arrow" %}