Homepage desktop

content/_index.md

@@ -1,38 +1,56 @@
 ---
-cover_img: images/true-to-who-we-are-v1.png
-cover_img_alt: A giant friendly hand, holding a small flower
-cta_img: images/raise-expectations-broccoli.png
-cta_img_alt: A giant friendly hand, watering a small plant with a tiny watering can.
-cta: More about kind
-ctaLink: /about/
-cta2: Our approach
-cta2Link: /services/#how-we-work
 cta3Title: Raise your expectations
 cta3Copy: Ethical work is excellent work. We combine expertise in digital, branding and strategy with an unwavering commitment to social change.
 cta3: Our work
 cta3Link: /work/
 cta4: Services
 cta4Link: /services/
+cover_img: images/true-to-who-we-are-v1.png
+cover_img_alt: A giant friendly hand, holding a small flower
 date: 2020-04-24T10:48:46.000Z
 description: We’re a small but powerful team of carefully selected senior professionals. Strategy, brand, digital – we bring it all together and drive change in ways that really matter.
-title: Strategy, Brand, Digital
+title: Ethical creative agency
 services:
   - brand
   - digital
   - strategy
 hidden: false
+preheading: Ethical creative agency
 heading: For the good folks
+work_heading: Partnerships that deliver real impact
+work_intro: Our client base is 100% socially responsible and purpose-driven. By using our skills and insights, we empower and lift up these organisations. A force for good behind the scenes.
 intro: >
 
-  The **wildlife protectors**, **cultural contributors** and **green architects**. We’re for everyone who’s making a change for good.
-
-
-  That’s not you ~~BP~~, ~~Amazon~~, ~~Shell~~…
-intro_md: true
+  The **wildlife protectors**, **cultural contributors** and **social innovators**. We’re for everyone who’s making a change for good.
 related_stats:
   - pay-gap
   - socially-reponsible
   - charity-donations
   - gender-neutral
 social_img: images/mat-and-michelle.jpg
+banner_images:
+  - img: images/strategy-image-kind-site.jpg
+    alt: Three people sitting around a wooden table, looking at a tablet and laptop with Backlit Gallery website designs
+  - img: images/work-chapter-poster-bus-stop-2-landscape.jpg
+    alt: A single poster mockup for the performance ‘Always Already’. The poster is on a brick wall, a longer perspective view of the street is visible to the right of the image.
+  - img: images/work-rewilding-britain-teaser.jpg
+    alt: A Blue Tit on a branch
+  - img: images/mat-and-michelle.jpg
+    alt: Kind owners, Mat Hayward and Michelle Pavey
+  - img: images/strategy-notes.jpg
+    alt: Pam, brand strategist and Michelle, strategy director planning a project
+  - img: images/work-garden-organic-laptop-3.jpg
+    alt: Garden Organic website on a laptop, situated on a garden table.
+  - img: images/gary-ellis-5vf16lnz-gi-unsplash.jpg
+    alt: A river in the Scottish Higlands
+  - img: images/work-jackson-crane-biophillic-house.jpg
+    alt: Rendered image of a biophilic house
+  - img: images/work-rewilding-britain-carousel-2.jpg
+    alt: A beaver on a river bank
+  - img: images/work-rewilding-britain-carousel-4.jpg
+    alt: Landscape image of a large tree on farmland
+  - img: images/work-eti-offshore-wind.jpg
+    alt: Sunset photograph of the sea with a wind farm in the distance
+  - img: images/work-garden-organic-laptop-jess-seth.jpg
+    alt: Over the shoulder view of a man and a woman looking at the Garden Organic website on a laptop
 ---

content/work/chapter.md

@@ -22,7 +22,6 @@ intro: >
 
 
   Chapter needed a brand and website to represent the creative, diverse, community-centric work they do on both a local and international level. They wanted to stand out as an organisation that has something to say, to show, and to make people feel something. They also wanted to ensure they were as inclusive as possible to all communities in the area and much further afield.
-featured: true
 date: 2023-06-28T12:25:28.863Z
 external_link: https://chapter.org.uk
 key_stat: null

content/work/rewilding-britain.md

@@ -53,6 +53,7 @@ teaser:
     - img: images/work-rewilding-britain-teaser.jpg
       alt: A Blue Tit on a branch
 social_img_txt: "A platform to inspire rewilding projects across the country"
+client: Rewilding Britain
 ---
 
 <!-- Text left -->

content/work/unesco.md

@@ -31,8 +31,8 @@ banner_img: images/work-unesco-school.jpg
 banner_img_alt: Children at desks in a school, working with blue pens. One child is looking directly at the camera
 toc: true
 teaser:
-  title: Ensuring access to education for millions of children
-  description: A global user-centred design process that resulted in the delivery of a digital report and knowledge base to support governments in strengthening the systems that provide education, in preparation for emergencies such as conflict or natural disaster
+  title: Access to education for millions of children
+  description: A user-centred design process delivering a digital report to help governments strengthen education systems for emergencies.
   images:
     - img: images/work-unesco-flat.jpg
       alt: Flat images of pages from a report document
@@ -44,6 +44,7 @@ teaser:
     - img: images/work-unesco-internal-page.jpg
       alt: A tablet device with a page from the Digital PDF report
 social_img_txt: "Ensuring access to education for millions of children"
+client: UNESCO
 ---
 
 <!-- Text left -->

layouts/_default/baseof.html

@@ -7,7 +7,7 @@
     {{ partial "head" . }}
   {{ end }}
 
-  <body class="antialiased min-h-screen font-serif text-base leading-normal bg-buff text-indigo auto-rows-auto liga kern w-full">
+  <body class="antialiased min-h-screen font-serif text-base leading-normal auto-rows-auto liga kern w-full {{ if .IsHome }} bg-indigo text-buff {{ else }} bg-buff text-indigo {{ end }} overflow-x-hidden">
     <!-- The Bush Kangaroo -->
     <a href="#content" class="sr-only focus:not-sr-only">Skip to content</a>
 

layouts/blog/list.html

@@ -6,7 +6,10 @@ <h2 class="sr-only">Featured posts</h2>
     <ol class="grid gap-10 md:grid-cols-12 section ">
       {{ range ( where ( where .Pages "Params.featured" "==" true ) "Params.unlisted" "!=" true ) }}
         <li class="md:col-span-6 xl:col-span-4" data-topics="{{ with .Params.key_topic }}{{ . | anchorize }}{{ end }} {{ with .Params.topics }}{{ range . }}{{ . | anchorize }} {{ end }}{{ end }}">
-          {{ partial "card" . }}
+          {{ partial "card" (dict 
+            "context" .
+            "tall" false
+          ) }}
         </li>
       {{ end }}
     </ol>

layouts/index.html

@@ -1,9 +1,13 @@
+{{ define "header" }}
+  {{ partial "header__homepage.html" . }}
+{{ end }}
+
 {{ define "main" }}
-  {{ partial "services.html" . }}
-  {{ partial "header__landing.html" . }}
-  {{ partial "featured_work.html" . }}
-  {{ partial "cta.html" . }}
-  {{ partial "our-stats.html" . }}
-  {{ partial "our-insights.html" . }}
-  {{ partial "mailing-list.html" . }}
+  {{ partial "homepage-work.html" . }}
+  {{ partial "homepage-impact.html" . }}
+  {{ partial "homepage-insights.html" . }}
 {{ end }}
+
+{{ define "footer" }}
+  {{ partial "homepage-footer.html" . }}
+{{ end }}

layouts/partials/card.html

@@ -1,36 +1,38 @@
-<article class="h-full">
-  <a class="no-underline group" aria-labelledby="{{ .Title | anchorize }}" href="{{ .Permalink }}" onclick="javascript:insights.track({id: 'card-{{ .Title | anchorize }}',parameters: {locale: insights.parameters.locale(),screenSize: insights.parameters.screenType(),referrer: insights.parameters.referrer(),path: insights.parameters.path()}});">
-    <div class="relative aspect-4/3 xl:aspect-3/4 3xl:aspect-4/3
-
-      {{ if .Params.cover_img }}
-        {{ .Params.text_colour }} after:bg-black after:block after:inset-0 after:absolute after:h-full after:w-full after:opacity-50 
-      {{ else }}
-        {{ with .Params.card_colour }}
-          {{ . }}
+{{ with $.context }}
+  <article class="h-full">
+    <a class="no-underline group" aria-labelledby="{{ .Title | anchorize }}" href="{{ .Permalink }}" onclick="javascript:insights.track({id: 'card-{{ .Title | anchorize }}',parameters: {locale: insights.parameters.locale(),screenSize: insights.parameters.screenType(),referrer: insights.parameters.referrer(),path: insights.parameters.path()}});">
+      <div class="relative {{ if $.tall }} aspect-4/3 lg:aspect-3/4 {{ else }} aspect-4/3 xl:aspect-3/4 3xl:aspect-4/3 {{ end }}
+
+        {{ if .Params.cover_img }}
+          {{ .Params.text_colour }} after:bg-black after:block after:inset-0 after:absolute after:h-full after:w-full after:opacity-50 
+        {{ else }}
+          {{ with .Params.card_colour }}
+            {{ . }}
+          {{ end }}
         {{ end }}
-      {{ end }}
-    ">
-      {{ if .Params.cover_img }}
-        {{ partial "image__card" . }}
-      {{ end }}
-      <div class="absolute z-10 flex flex-col items-start gap-3 lg:gap-6 inset-5 lg:inset-10 2xl:inset-5">
-        {{ with .Params.key_topic }}
-          <span class="text-sm font-bold">{{ title . }}</span>
-        {{end}}
-        <h2 class="h--condensed group-hover:underline" id="{{ .Title | anchorize }}">{{ .Title }}</h2>
-
-        {{ if .Params.illustration }}
-          <div class="self-end mt-auto">
-            {{ partial "image__blog-illustration" . }}
-          </div>
+      ">
+        {{ if .Params.cover_img }}
+          {{ partial "image__card" . }}
         {{ end }}
+        <div class="absolute z-10 flex flex-col items-start gap-3 lg:gap-6 inset-5 lg:inset-10 2xl:inset-5">
+          {{ with .Params.key_topic }}
+            <span class="text-sm font-bold">{{ title . }}</span>
+          {{end}}
+          <h2 class="h--condensed group-hover:underline" id="{{ .Title | anchorize }}">{{ .Title }}</h2>
+
+          {{ if .Params.illustration }}
+            <div class="self-end mt-auto">
+              {{ partial "image__blog-illustration" . }}
+            </div>
+          {{ end }}
+        </div>
+      </div>
+      <div aria-hidden=true class="flex items-center gap-5 px-5 mt-5">
+        <p class="text-sm font-bold">Read the article</p>
+        <svg class="h-6 w-7" role="presentation">
+          <use xlink:href="#icon-arrow"/>
+        </svg>
       </div>
-    </div>
-    <div aria-hidden=true class="flex items-center gap-5 px-5 mt-5">
-      <p class="text-sm font-bold">Read the article</p>
-      <svg class="h-6 w-7" role="presentation">
-        <use xlink:href="#icon-arrow"/>
-      </svg>
-    </div>
-  </a>
-</article>
+    </a>
+  </article>
+{{ end }}

layouts/partials/header__homepage.html

@@ -0,0 +1,97 @@
+<header class="bg-indigo text-buff snap-start min-h-[80vh] md:min-h-home-dynamic-screen flex flex-col justify-between relative z-50">
+ <div class="container flex flex-wrap justify-between gap-5 py-5 lg:gap-10 lg:flex-nowrap md:items-center">
+    {{ partial "logo" . }}
+    <button type="button" data-toggle-class="active" data-target="#mobile-navigation" data-toggle-fixed aria-controls="mobile-navigation" class="inline-flex items-center gap-2 h--condensed text-md md:hidden">
+      Menu
+      <svg class="w-6 h-6">
+        <use xlink:href="#icon-hamburger"/>
+      </svg>
+    </button>
+    <div class="flex-wrap items-center justify-end lg:flex-grow hidden gap-5 md:flex lg:gap-10 ">
+      <div class="items-center hidden gap-5 xl:gap-10 md:inline-flex">
+        <svg class="w-12 h-16 lg:w-16 lg:h-20" role="presentation">
+          <use xlink:href="#icon-bcorp"/>
+        </svg>
+        <svg class="w-16 h-8 lg:w-24 lg:h-14" role="presentation">
+          <use xlink:href="#icon-1fortheplanet"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <div class="container flex flex-col items-center lg:flex">
+    <div class="flex flex-col lg:flex-row md:items-end" data-image-flick>
+      <div class="flex flex-col gap-5 md:gap-10 lg:gap-15 pb-6 md:pb-24 w-full lg:w-1/2">
+        <h1 class="block text-teal font-bold font-serif normal-case text-base mt-6 md:mt-0">{{ .Params.preheading }}</span>
+        <h2 class="text-4xl lg:text-5xl xl:text-6xl h--condensed leading-heading">{{ .Params.Heading|safeHTML }}</h2>
+
+        <div class="max-w-xl lede">
+          {{ .Params.Intro | markdownify }}
+        </div>
+      </div>
+      <div class="w-full flex lg:block lg:w-1/2 relative z-50">
+        {{ with .Params.banner_images }}
+          {{ range $i, $image := . }}
+            {{ if eq $i 0 }}
+              <div class="aspect-4/3 w-auto 2xl:ml-20 bleed-left lg:ml-12 lg:bleed-right" data-image-flick-item>
+                {{ partial "image" (dict 
+                  "alt" $image.alt
+                  "class" "h-full w-full object-cover"
+                  "src" $image.img 
+                ) }}
+              </div>
+            {{ else if eq $i 1 }}
+              <div class="flex flex-col lg:flex-row justify-end lg:items-start w-1/3 lg:w-auto">
+                <div class="aspect-4/3 w-full lg:w-1/3 shrink-0" data-image-flick-item>
+                  {{ partial "image" (dict 
+                    "alt" $image.alt
+                    "class" "h-full w-full object-cover"
+                    "src" $image.img 
+                  ) }}
+                </div>
+            {{ else if eq $i 2 }}
+                <div class="aspect-4/3 w-auto bleed-right lg:-mb-[15vw]" data-image-flick-item>
+                  {{ partial "image" (dict 
+                    "alt" $image.alt
+                    "class" "h-full w-full object-cover"
+                    "src" $image.img 
+                  ) }}
+                </div>
+              </div>
+            {{ else  }}
+              <div class="hidden" data-image-flick-item>
+                {{ partial "image" (dict 
+                  "alt" $image.alt
+                  "class" "h-full w-full object-cover"
+                  "src" $image.img 
+                ) }}
+              </div>
+            {{ end }}
+          {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "mobile-navigation" . }} 
+</header>
+
+  {{/* Sticky desktop (homepage) */}}
+  {{ if .IsHome }}
+    <div class="hidden md:flex sticky top-0 z-40 bg-pink h-20">
+      <div class="container flex items-center">
+        <nav class="flex w-full lg:w-7/10" aria-label="Main menu">
+          <ul class="flex items-center gap-5 m-0 font-bold list-none lg:w-[58vw] xl:w-auto lg:max-w-4xl lg:justify-between xl:grow" role="list">
+            {{ $currentPage := . }}
+            {{ range .Site.Menus.main }}
+            <li class="relative flex before:text-orange items-center">
+              <a class="text-indigo group hover:text-orange focus:text-orange transition-all duration-500 ease-in" href="{{ .URL }}" {{ if eq .Name "Contact" }}data-toggle-class="active" data-toggle-fixed data-target="#contact-details" aria-controls="contact-details" data-toggle-set-scroll data-toggle-delay-callback="500"{{ end }}>
+                <span class="relative inline-flex after:h-2px after:w-full group-hover:after:bg-orange group-focus:after:bg-orange after:transition-all after:duration-500 after:ease-in after:absolute after:bg-indigo after:left-0 after:bottom-0.5">{{- .Name -}}</span>
+              </a>
+            </li>
+            {{ end }}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  {{ end }}

layouts/partials/header__landing.html

@@ -15,14 +15,14 @@ <h1>{{ .Params.Heading|safeHTML }}</h1>
         {{ end }}
         {{ if isset .Params "cta" }}
           <div class="flex flex-wrap gap-5 lg:gap-10">
-              <a class="btn btn--primary" href="{{ .Params.ctaLink }}" onclick="javascript:insights.track({id: 'home-header-button-1',parameters: {locale: insights.parameters.locale(),screenSize: insights.parameters.screenType(),referrer: insights.parameters.referrer(),path: insights.parameters.path()}});">
+              <a class="btn btn--primary" href="{{ .Params.ctaLink }}" onclick="javascript:insights.track({id: 'landing-header-button-1',parameters: {locale: insights.parameters.locale(),screenSize: insights.parameters.screenType(),referrer: insights.parameters.referrer(),path: insights.parameters.path()}});">
                 {{ title .Params.Cta }}
                 <svg class="w-8 h-8" viewbox="0 0 77 63" role="presentation">
                   <use xlink:href="#icon-arrow"/>
                 </svg>
               </a>
             {{ if .Params.cta2 }}
-              <a class="btn btn--secondary" href="{{ .Params.cta2Link }}" onclick="javascript:insights.track({id: 'home-header-button-2',parameters: {locale: insights.parameters.locale(),screenSize: insights.parameters.screenType(),referrer: insights.parameters.referrer(),path: insights.parameters.path()}});">
+              <a class="btn btn--secondary" href="{{ .Params.cta2Link }}" onclick="javascript:insights.track({id: 'landing-header-button-2',parameters: {locale: insights.parameters.locale(),screenSize: insights.parameters.screenType(),referrer: insights.parameters.referrer(),path: insights.parameters.path()}});">
                 {{ title .Params.Cta2 }}
                 <svg class="w-8 h-8" viewbox="0 0 77 63" role="presentation">
                   <use xlink:href="#icon-arrow"/>