updates from most recent website build

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/labeler.yml

@@ -1,15 +1,19 @@
 build:
   - changed-files:
       - any-glob-to-any-file:
-          - vite.config.js
+          - .eslintrc.js
+          - .prettierrc
+          - .stylelintrc
+          - bud.config.js
+          - tsconfig.json
 dependencies:
   - changed-files:
       - any-glob-to-any-file:
-          - package-lock.json
+          - yarn.lock
 javascript:
   - changed-files:
       - any-glob-to-any-file:
-          - resources/js/**/*.js
+          - resources/scripts/**/*.js
 php:
   - changed-files:
       - any-glob-to-any-file:

.github/renovate.json

@@ -1,23 +1,17 @@
 {
-  "baseBranches": [
-    "main"
-  ],
+  "baseBranches": ["main"],
   "commitMessageAction": "⬆️ Bump",
   "commitMessageTopic": "{{depName}}",
-  "extends": [
-    "config:recommended",
-    "schedule:weekly"
-  ],
-  "rangeStrategy": "bump",
+  "extends": ["config:base", "schedule:weekly"],
   "packageRules": [
     {
-      "matchUpdateTypes": [
-        "minor",
-        "patch",
-        "pin"
-      ],
-      "enabled": true
+      "matchUpdateTypes": ["minor", "patch", "pin"]
+    },
+    {
+      "groupName": "Bud",
+      "matchPackagePrefixes": ["@roots/"],
+      "schedule": ["at any time"]
     }
   ],
-  "timezone": "America/Detroit"
+  "timezone": "America/Chicago"
 }

.github/workflows/main.yml

@@ -25,34 +25,18 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
+          cache: 'yarn'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install dependencies using npm
-        run: npm install
+      - name: Install dependencies using Yarn
+        run: yarn install --frozen-lockfile
 
       - name: Build and compile assets
         run: |
-          npm run build
-          cat public/build/manifest.json
-
-      - name: Validate theme.json
-        run: |
-          THEME_JSON="public/build/assets/theme.json"
-
-          if [ ! -f "$THEME_JSON" ]; then
-            echo "❌ theme.json not found"
-            exit 1
-          fi
-
-          jq -e '
-            (.settings.color.palette | length > 0) and
-            (.settings.typography.fontFamilies | length > 0) and
-            (.settings.typography.fontSizes | length > 0)
-          ' "$THEME_JSON" 2>&1 || {
-            echo "❌ Invalid theme.json structure or missing required values"
-            exit 1
-          }
+          yarn build
+          cat public/entrypoints.json
+          cat public/manifest.json
 
   php:
     name: PHP ${{ matrix.php }}
@@ -60,7 +44,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     strategy:
       matrix:
-        php: ['8.2']
+        php: ['8.1', '8.2']
 
     steps:
       - name: Checkout the project

.gitignore

@@ -1,6 +1,7 @@
 /node_modules
 /vendor
-/public/*
-!/public/.gitkeep
+/public
 .env
+.budfiles
 npm-debug.log
+yarn-error.log

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) Roots Software LLC
+Copyright (c) Roots Software Foundation LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,31 +1,54 @@
 <p align="center">
-  <a href="https://roots.io/sage/"><img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100"></a>
+  <a href="https://roots.io/sage/">
+    <img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100">
+  </a>
 </p>
 
 <p align="center">
-  <a href="https://packagist.org/packages/roots/sage"><img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square"></a>
-  <a href="https://github.com/roots/sage/actions/workflows/main.yml"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square"></a>
-  <a href="https://bsky.app/profile/roots.dev"><img alt="Follow roots.dev on Bluesky" src="https://img.shields.io/badge/follow-@roots.dev-0085ff?logo=bluesky&style=flat-square"></a>
+  <a href="https://packagist.org/packages/roots/sage">
+    <img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square">
+  </a>
+
+  <a href="https://github.com/roots/sage/actions/workflows/main.yml">
+    <img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square">
+  </a>
+
+  <a href="https://twitter.com/rootswp">
+    <img alt="Follow Roots" src="https://img.shields.io/badge/follow%20@rootswp-1da1f2?logo=twitter&logoColor=ffffff&message=&style=flat-square">
+  </a>
 </p>
 
-# Sage
+<p align="center">Advanced WordPress starter theme with Tailwind CSS and Laravel Blade</p>
 
-**Advanced hybrid WordPress starter theme with Laravel Blade and Tailwind CSS**
-
-- 🔧 Clean, efficient theme templating with Laravel Blade
-- ⚡️ Modern front-end development workflow powered by Vite
-- 🎨 Out of the box support for Tailwind CSS
-- 🚀 Harness the power of Laravel with [Acorn integration](https://github.com/roots/acorn)
-- 📦 Block editor support built-in
-
-Sage brings proper PHP templating and modern JavaScript tooling to WordPress themes. Write organized, component-based code using Laravel Blade, enjoy instant builds and CSS hot-reloading with Vite, and leverage Laravel's robust feature set through Acorn.
-
-[Read the docs to get started](https://roots.io/sage/docs/installation/)
+<p align="center">
+  <a href="https://roots.io/sage/">Website</a> &nbsp;&nbsp; <a href="https://roots.io/sage/docs/installation/">Documentation</a> &nbsp;&nbsp; <a href="https://github.com/roots/sage/releases">Releases</a> &nbsp;&nbsp; <a href="https://discourse.roots.io/">Community</a>
+</p>
 
 ## Sponsors
 
-Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, [please consider sponsoring us](https://github.com/sponsors/roots).
+Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, please consider [sponsoring Roots](https://github.com/sponsors/roots).
 
 <div align="center">
-<a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a> <a href="https://bonsai.so/"><img src="https://cdn.roots.io/app/uploads/bonsai.svg" alt="Bonsai" width="120" height="90"></a>
+<a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="120" height="90"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a>
 </div>
+
+## Overview
+
+Sage is a WordPress starter theme with block editor support.
+
+- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn)
+- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/master/blade)
+- Modern frontend development workflow powered by [Bud](https://bud.js.org/)
+- Out of the box support for [Tailwind CSS](https://tailwindcss.com/)
+
+## Getting Started
+
+See the [Sage installation documentation](https://roots.io/sage/docs/installation/).
+
+## Stay Connected
+
+- Join us on Discord by [sponsoring us on GitHub](https://github.com/sponsors/roots)
+- Participate on [Roots Discourse](https://discourse.roots.io/)
+- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
+- Read the [Roots Blog](https://roots.io/blog/)
+- Subscribe to the [Roots Newsletter](https://roots.io/newsletter/)

app/ACF/CloneGroup.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\ACF;
+
+class CloneGroup
+{
+    public function __construct()
+    {
+
+    }
+    public function background()
+    {
+        return [
+            'contrast',
+            'bg_type',
+            'bg_colour',
+            'bg_tint',
+            'bg_opacity',
+            'bg_image',
+            'bg_video',
+            'pattern',
+            'pattern_top',
+            'pattern_bottom',
+            'padding_top',
+            'padding_bottom',
+        ];
+    }
+}

app/ACF/Dynamic.php

@@ -8,15 +8,13 @@ class Dynamic
 {
     public function __construct()
     {
-        add_filter('acf/load_field/name=colour',                [ $this, 'load_colours' ]);
-        add_filter('acf/load_field/name=bg_colour',             [ $this, 'load_colours' ]);
-        add_filter('acf/load_field/name=tint',                  [ $this, 'load_tints' ]);
-        add_filter('acf/load_field/name=bg_tint',               [ $this, 'load_tints' ]);
-        add_filter('acf/load_field/name=container_width',       [ $this, 'container_width' ]);
+        add_filter('acf/load_field/name=colour',                [ $this, 'load_colours'   ]);
+        add_filter('acf/load_field/name=bg_colour',             [ $this, 'load_colours'   ]);
+        add_filter('acf/load_field/name=tint',                  [ $this, 'load_tints'   ]);
+        add_filter('acf/load_field/name=bg_tint',               [ $this, 'load_tints'   ]);
         add_filter('acf/load_field/name=fontawesome_regular',   [ $this, 'load_fontawesome_regular_icons' ]);
-        add_filter('acf/load_field/name=fontawesome_solid',     [ $this, 'load_fontawesome_solid_icons' ]);
-        add_filter('acf/load_field/name=fontawesome_brands',    [ $this, 'load_fontawesome_brand_icons' ]);
-        add_action('acf/input/admin_footer',                    [ $this, 'colour_ui' ]);
+        add_filter('acf/load_field/name=fontawesome_solid',     [ $this, 'load_fontawesome_solid_icons'   ]);
+        add_filter('acf/load_field/name=fontawesome_brands',    [ $this, 'load_fontawesome_brand_icons'   ]);
     }
 
     public function load_colours( $field )
@@ -26,9 +24,7 @@ class Dynamic
 
         $colours = $colour->values();
 
-        $field['choices'] = [
-            '0' => __('None', 'badegg'),
-        ];
+        $field['choices'] = [];
 
         foreach($colours as $slug => $hex):
             $field['choices'][$slug] = '<i class="fas fa-circle" style="color: '. $hex .'"></i> ' . @$NameThatColour->name($hex)['name'];
@@ -50,27 +46,13 @@ class Dynamic
                 $field['choices'][$slug] = ucfirst($slug);
 
             else:
-                $field['choices'][0] =  __('None', 'badegg');
+                $field['choices'][0] = 'None';
             endif;
         endforeach;
 
         return $field;
     }
 
-    public function container_width( $field )
-    {
-        $field['choices'] = [
-            0 => 'Auto',
-            'narrow' => __('Narrow', 'badegg'),
-            'small'  => __('Small', 'badegg'),
-            'medium' => __('Medium', 'badegg'),
-            'large'  => __('Large', 'badegg'),
-            'full'   => __('Edge to edge', 'badegg'),
-        ];
-
-        return $field;
-    }
-
     public function load_fontawesome_regular_icons( $field )
     {
         $field['choices'] = [];
@@ -108,51 +90,13 @@ class Dynamic
             '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
         ];
 
-        foreach($icons as $slug):
+        foreach($icons as $slug => $props):
+            if(in_array($slug, range(0,9))) continue;
+
             $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
         endforeach;
 
         return $choices;
     }
-
-    public function colour_ui()
-    { ?>
-
-        <script type="text/javascript">
-            console.log("Script loaded from sage/app/ACF/Dynamic.php");
-
-            (function($) {
-
-                function my_custom_escaping_method( original_value){
-                    return original_value;
-                }
-
-                acf.add_filter('select2_escape_markup', function( escaped_value, original_value, $select, settings, field, instance ){
-                    console.log(field.data('name'));
-
-                    const whitelist = [
-                        'colour',
-                        'bg_colour',
-                        'angle_colour',
-                        'fontawesome_brands',
-                        'fontawesome_regular',
-                        'fontawesome_solid',
-                    ];
-
-                    // do something to the original_value to override the default escaping, then return it.
-                    // this value should still have some kind of escaping for security, but you may wish to allow specific HTML.
-                    if (whitelist.includes(field.data( 'name' ))) {
-                        return my_custom_escaping_method( original_value );
-                    }
-
-                    // return
-                    return escaped_value;
-                });
-
-            })(jQuery);
-
-        </script>
-
-    <?php }
 }
 

app/Admin/Blocks.php

@@ -0,0 +1,135 @@
+<?php
+
+namespace App\Admin;
+
+class Blocks
+{
+    public function __construct()
+    {
+        add_action('allowed_block_types_all', [$this, 'blacklist'], 100, 2);
+    }
+
+    public function blacklist()
+    {
+        // Reference:
+        // https://www.wpexplorer.com/how-to-remove-gutenberg-blocks/
+        // https://www.wpexplorer.com/wordpress-core-blocks-list/
+
+        // Existing blocks with Blade templates
+        // https://roots.io/acorn/docs/rendering-blade-views/#existing-blocks-with-blade-templates
+
+        $blocks = array_keys( \WP_Block_Type_Registry::get_instance()->get_all_registered() );
+
+        $blacklist = [
+            // Design
+            'core/button',
+            'core/comment-template',
+            'core/home-link',
+            'core/navigation-link',
+            'core/navigation-submenu',
+            'core/buttons',
+            'core/column',
+            'core/columns',
+            'core/group',
+            'core/more',
+            'core/nextpage',
+            'core/separator',
+            'core/spacer',
+            'core/text-columns',
+
+            // Embed
+            'core/embed',
+
+            // Media
+            'core/cover',
+            'core/file',
+            'core/gallery',
+            'core/image',
+            'core/media-text',
+            'core/audio',
+            'core/video',
+
+            // Reusable
+            'core/block',
+
+            // Text
+            'core/footnotes',
+            'core/heading',
+            'core/list',
+            'core/code',
+            'core/details',
+            'core/freeform',
+            'core/list-item',
+            'core/missing',
+            'core/paragraph',
+            'core/preformatted',
+            'core/pullquote',
+            'core/quote',
+            'core/table',
+            'core/verse',
+
+            // Theme
+            'core/avatar',
+            'core/comment-author-name',
+            'core/comment-content',
+            'core/comment-date',
+            'core/comment-edit-link',
+            'core/comment-reply-link',
+            'core/comments',
+            'core/comments-pagination',
+            'core/comments-pagination-next',
+            'core/comments-pagination-numbers',
+            'core/comments-pagination-previous',
+            'core/comments-title',
+            'core/loginout',
+            'core/navigation',
+            'core/pattern',
+            'core/post-author',
+            'core/post-author-biography',
+            'core/post-author-name',
+            'core/post-comments-form',
+            'core/post-content',
+            'core/post-date',
+            'core/post-excerpt',
+            'core/post-featured-image',
+            'core/post-navigation-link',
+            'core/post-template',
+            'core/post-terms',
+            'core/post-title',
+            'core/query',
+            'core/query-no-results',
+            'core/query-pagination',
+            'core/query-pagination-next',
+            'core/query-pagination-numbers',
+            'core/query-pagination-previous',
+            'core/query-title',
+            'core/read-more',
+            'core/site-logo',
+            'core/site-tagline',
+            'core/site-title',
+            'core/template-part',
+            'core/term-description',
+            'core/post-comments',
+
+            // Widgets
+            'core/legacy-widget',
+            'core/widget-group',
+            'core/archives',
+            'core/calendar',
+            'core/categories',
+            'core/latest-comments',
+            'core/latest-posts',
+            'core/page-list',
+            'core/page-list-item',
+            'core/rss',
+            'core/search',
+            'core/shortcode',
+            'core/social-link',
+            'core/tag-cloud',
+            'core/html',
+            'core/social-links',
+        ];
+
+        return array_values( array_diff( $blocks, $blacklist ) );
+    }
+}

app/Admin/DisablePost.php

@@ -6,8 +6,8 @@ class DisablePost
 {
     public function __construct()
     {
-        // add_filter('register_post_type_args', [$this, 'args'], 0, 2);
-        // add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
+        add_filter('register_post_type_args', [$this, 'args'], 0, 2);
+        add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
     }
 
     public function args($args, $type)

app/Admin/Enqueue.php

@@ -13,9 +13,9 @@ class Enqueue
     {
         wp_enqueue_style(
             'fontawesome',
-            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css',
             false,
-            '7.0.1',
+            '6.5.2',
             'all'
         );
     }

app/Admin/Integrations.php

@@ -7,7 +7,6 @@ class Integrations
     public function __construct()
     {
         add_action( 'wp_head',  [$this, 'FathomAnalytics']);
-        add_action( 'wp_footer',  [$this, 'FontAwesomeKit'], 100);
     }
 
     public function FathomAnalytics()
@@ -22,17 +21,4 @@ class Integrations
 
         <?php endif;
     }
-
-    public function FontAwesomeKit()
-    {
-        $kit = get_field('badegg_integrations_fontawesome_kit', 'option');
-
-        if($kit): ?>
-
-<!-- FontAwesome Kit -->
-<script src="https://kit.fontawesome.com/<?= $kit ?>.js" crossorigin="anonymous"></script>
-<!-- / FontAwesome Kit -->
-
-        <?php endif;
-    }
 }

app/Admin/Theme.php

@@ -1,35 +0,0 @@
-<?php
-
-namespace App\Admin;
-use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
-use App\Utilities;
-
-class Theme
-{
-    public function __construct()
-    {
-        add_action( 'after_setup_theme', [$this, 'DynamicPalette'] );
-    }
-
-    public function DynamicPalette()
-    {
-        $colour = new Utilities\Colour;
-        $NameThatColour = new NameThatColor;
-
-        $palette = [];
-
-        $colours = $colour->values();
-
-        foreach($colours as $slug => $hex) {
-            $palette[] = [
-                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
-                'slug' => $slug,
-                'color' => $hex,
-            ];
-        }
-
-        if(!empty($colours)) {
-            add_theme_support('editor-color-palette', $palette);
-        }
-    }
-}

app/Blocks/BadExample.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Blocks;
+use App\Utilities;
+use App\ACF;
+
+class BadExample
+{
+    public function __construct()
+    {
+        add_action('acf/init', [$this, 'init']);
+    }
+
+    public function init()
+    {
+        acf_register_block_type([
+            'name'              => 'badegg/bad-example',
+            'title'             => __('Bad Example'),
+            'description'       => __('This is an example block'),
+            'render_callback'   => [ $this, 'render'],
+            'category'          => 'layout',
+            'multiple'          => false,
+            'icon'              => [
+                'src'   => 'dismiss',
+            ],
+            'supports'          => [
+                'align' => false,
+            ],
+        ]);
+    }
+
+    public function render($block)
+    {
+        $CssClasses = new Utilities\CssClasses;
+        $Colour     = new Utilities\Colour;
+        $CloneGroup = new ACF\CloneGroup;
+
+        $data = [];
+
+        $fields = [
+            'heading',
+            'blurb',
+        ];
+
+        $fields = array_merge($fields, $CloneGroup->background());
+
+        foreach($fields as $field):
+            $data[$field] = get_field($field);
+        endforeach;
+
+        unset($block['data']);
+        $block['name'] = str_replace('acf/', '', $block['name']);
+
+        $data = array_merge($data, $block);
+        $data['section_classes'] = $CssClasses->section($data);
+        $data['block'] = $block;
+
+        $data['knockout'] = ($Colour->is_dark($data['bg_colour'], $data['bg_tint'], $data['contrast'])) ? null : 'knockout';
+
+        echo \Roots\view('blocks.bad-example', [
+            'data' => $data,
+            'block' => $block,
+        ])->render();
+    }
+}

app/Utilities/Colour.php

@@ -10,8 +10,6 @@ class Colour
 
         if($colour == 'black'):
             $hex = '#000000';
-        elseif($colour == 'grey'):
-            $hex = '#808080';
         elseif($colour == 'white'):
             $hex = '#FFFFFF';
         else:
@@ -29,23 +27,20 @@ class Colour
 
     public function values()
     {
+        $colours = get_field('badegg_colours', 'option');
+
         $values = [];
 
-        if(function_exists('get_field')):
-            $colours = @get_field('badegg_colours', 'option');
+        if($colours):
+            foreach($colours as $index => $props):
+                $index = $index + 1;
+                $hex = @$props['hex'];
 
-            if($colours):
-                foreach($colours as $index => $props):
-                    $index = $index + 1;
-                    $hex = @$props['hex'];
-
-                    if($hex) $values[$this->latinate($index)] = $hex;
-                endforeach;
-            endif;
+                if($hex) $values[$this->latinate($index)] = $hex;
+            endforeach;
         endif;
 
-        $values['white'] = '#FFFFFF';
-        $values['grey'] = '#808080';
+        $values['0'] = '#FFFFFF';
         $values['black'] = '#000000';
 
         return $values;
@@ -54,13 +49,13 @@ class Colour
     public function tints()
     {
       return [
-        'lightest'  =>  40,
-        'lighter'   =>  25,
-        'light'     =>  10,
+        'lightest'  =>  100,
+        'lighter'   =>  66,
+        'light'     =>  33,
         '0'         =>   0,
-        'dark'      => -10,
-        'darker'    => -25,
-        'darkest'   => -40,
+        'dark'      => -33,
+        'darker'    => -66,
+        'darkest'   => -100,
       ];
     }
 

app/Utilities/CssClasses.php

@@ -3,94 +3,55 @@
 namespace App\Utilities;
 
 class CssClasses {
-    public function section($props = [], $name = 'unnamed', $knockout = false)
+    public function section($props = [])
     {
-        $defaults = [
-            'padding_top' => null,
-            'padding_bottom' => null,
-            'bg_colour' => null,
-            'bg_tint' => null,
-            'contrast' => null,
-            'bg_image' => null,
-        ];
-
-        $props = wp_parse_args($props, $defaults);
-
         $Colour = new Colour;
-        $hex = $Colour->name2hex($props['bg_colour'], $props['bg_tint']);
+        $hex = $Colour->name2hex(@$props['bg_colour'], @$props['bg_tint']);
+
+        $pattern = @$props['pattern'];
+        $pattern_top = @$props['pattern_top'];
+        $pattern_bottom = @$props['pattern_bottom'];
 
         $classes = [
             'section',
-            'section-' . str_replace('/', '-', $name),
+            'section-' . str_replace('acf/', '', $props['name']),
+            'bg-' . $this->colourTint([
+                'colour' => @$props['bg_colour'],
+                'tint' => @$props['bg_tint'],
+            ]),
         ];
 
-        if($props['bg_colour'])
-            $classes[] = 'bg-' . $this->colourTint([
-                'colour' => $props['bg_colour'],
-                'tint' => $props['bg_tint'],
-            ]);
-
-        if(($props['contrast'] && $knockout))
+        if($Colour->is_dark($hex) && $this->is_knockout_block($props['name']))
             $classes[] = 'knockout';
 
-        if(!$props['padding_top'])
+        if(@$props['padding_top'])
             $classes[] = 'section-zero-top';
 
-        if(!$props['padding_bottom'])
+        if(@$props['padding_bottom'])
             $classes[] = 'section-zero-bottom';
 
-        if($props['bg_image'])
-            $classes[] = "has-bg-image";
+        if($pattern):
+            if($pattern == 'both'):
+                $classes[] =  'pattern-top';
+                $classes[] =  'pattern-bottom';
 
-        return $classes;
-    }
+            else:
+                $classes[] = 'pattern-' . $pattern;
 
-    public function container($args = [], $bg_props = [])
-    {
-        $args = wp_parse_args($args, [
-            'width' => null,
-            'location' => null,
-            'section' => false,
-            'align' => null,
-            'wysiwyg' => false,
-        ]);
+            endif;
 
-        $bg_props = wp_parse_args($bg_props, [
-            'bg_colour' => null,
-            'bg_tint' => null,
-            'contrast' => null,
-        ]);
+            if(in_array($pattern, ['top', 'both']))
+                $classes[] = 'pattern-top-' . $this->colourTint($pattern_top);
 
-        $Colour = new Colour;
-        $hex = $Colour->name2hex($bg_props['bg_colour'], $bg_props['bg_tint']);
+            if(in_array($pattern, ['bottom', 'both']))
+                $classes[] = 'pattern-bottom-' . $this->colourTint($pattern_bottom);
 
-        $classes = [
-            'container',
-        ];
+        endif;
 
-        if($args['width'])
-            $classes[] = 'container-' . $args['width'];
+        if(@$props['bg_image'])
+            $classes[] = "bg-watermarked";
 
-        if($args['location'])
-            $classes[] = $args['location'];
-
-        if($args['section'])
-            $classes[] = 'section';
-
-        if(str_contains($args['location'], 'intro'))
-            $classes[] = 'section-zero-top';
-
-        if(str_contains($args['location'], 'footer'))
-            $classes[] = 'section-zero-bottom';
-
-        if($args['wysiwyg'])
-            $classes[] = 'wysiwyg';
-
-        if($args['align'])
-            $classes[] = 'align-' . $args['align'];
-
-        if(($bg_props['contrast']))
-            $classes[] = 'knockout';
+        if(@$props['className']) $args = array_merge($classes, explode(' ', $props['className']));
 
         return $classes;
     }
@@ -132,7 +93,7 @@ class CssClasses {
     public function is_knockout_block($name = null)
     {
         $blacklist = [
-            'badegg/acfdemo',
+            'bad-example',
         ];
 
         if(in_array($name, $blacklist)):

app/Utilities/RestAPI.php

@@ -1,105 +0,0 @@
-<?php
-
-namespace App\Utilities;
-use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
-
-class RestAPI
-{
-    public function __construct()
-    {
-        add_filter( 'wp_prepare_attachment_for_js', [$this, 'image_sizes'], 10, 3 );
-        add_action( 'rest_api_init', [$this, 'blocks']);
-    }
-
-    public function image_sizes( $response, $attachment, $meta )
-    {
-        if ( empty( $response['sizes'] ) || empty( $meta['sizes'] ) ) {
-            return $response;
-        }
-
-        $custom_sizes = [ 'hero', 'lazy' ];
-
-        foreach ( $custom_sizes as $size ) {
-            if ( ! empty( $meta['sizes'][ $size ] ) ) {
-                $response['sizes'][ $size ] = [
-                    'url'         => wp_get_attachment_image_url( $attachment->ID, $size ),
-                    'width'       => $meta['sizes'][ $size ]['width'],
-                    'height'      => $meta['sizes'][ $size ]['height'],
-                    'orientation' =>
-                        $meta['sizes'][ $size ]['height'] > $meta['sizes'][ $size ]['width']
-                            ? 'portrait'
-                            : 'landscape',
-                ];
-            }
-        }
-
-        return $response;
-    }
-
-    public function blocks( )
-    {
-        $restBase = 'badegg/v1';
-
-        register_rest_route($restBase, '/blocks/config', [
-            'methods' => 'GET',
-            'callback' => [ $this, 'config'],
-            'permission_callback' => function(){
-                return true;
-            },
-        ]);
-    }
-
-    public function config()
-    {
-        return rest_ensure_response([
-            'container' => $this->containerWidths(),
-            'colours' => $this->colours(),
-            'tints' => $this->tints(),
-        ]);
-    }
-
-    public function containerWidths()
-    {
-        return [
-            [ 'label' => __('Auto', 'badegg'),          'value' => 0        ],
-            [ 'label' => __('Narrow', 'badegg'),        'value' => 'narrow' ],
-            [ 'label' => __('Small', 'badegg'),         'value' => 'small'  ],
-            [ 'label' => __('Medium', 'badegg'),        'value' => 'medium' ],
-            [ 'label' => __('Large', 'badegg'),         'value' => 'large'  ],
-            [ 'label' => __('Edge to edge', 'badegg'),  'value' => 'full'   ],
-        ];
-    }
-
-    public function colours()
-    {
-        $colour = new Colour;
-        $NameThatColour = new NameThatColor;
-
-        $palette = [];
-
-        $colours = $colour->values();
-
-        foreach($colours as $slug => $hex) {
-            $palette[] = [
-                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
-                'slug' => $slug,
-                'color' => $hex,
-            ];
-        }
-
-        return $palette;
-    }
-
-    public function tints()
-    {
-        return [
-            ['label' => __('Lightest',  'badegg'), 'value' => 'lightest'],
-            ['label' => __('Lighter',   'badegg'), 'value' => 'lighter' ],
-            ['label' => __('Light',     'badegg'), 'value' => 'light'   ],
-            ['label' => __('None',      'badegg'), 'value' => 0         ],
-            ['label' => __('Dark',      'badegg'), 'value' => 'dark'    ],
-            ['label' => __('Darker',    'badegg'), 'value' => 'darker'  ],
-            ['label' => __('Darkest',   'badegg'), 'value' => 'darkest' ],
-        ];
-    }
-}

app/View/Composers/App.php

@@ -17,13 +17,10 @@ class App extends Composer
     ];
 
     /**
-     * Retrieve the site name.
+     * Data to be passed to view before rendering.
+     *
+     * @return array
      */
-    public function siteName(): string
-    {
-        return get_bloginfo('name', 'display');
-    }
-
     public function with()
     {
         return [
@@ -31,6 +28,20 @@ class App extends Composer
             'VideoSrcset' => new Utilities\VideoSrcset,
             'ImageSrcset' => new Utilities\ImageSrcset,
             'siteName' => $this->siteName(),
+            'siteLogo' => @file_get_contents(get_template_directory() . '/resources/images/logo-rhythm-road-entertainment.svg'),
+            'company_legal' => get_field('badegg_company_legal', 'option'),
+            'company_tel' => get_field('badegg_company_tel', 'option'),
+            'company_email' => get_field('badegg_company_email', 'option'),
         ];
     }
+
+    /**
+     * Returns the site name.
+     *
+     * @return string
+     */
+    public function siteName()
+    {
+        return get_bloginfo('name', 'display');
+    }
 }

app/View/Composers/Blocks.php

@@ -1,31 +0,0 @@
-<?php
-
-namespace App\View\Composers;
-
-use Roots\Acorn\View\Composer;
-use App\Utilities;
-
-class Blocks extends Composer
-{
-    /**
-     * List of views served by this composer.
-     *
-     * @var array
-     */
-    protected static $views = [
-        'layouts.block-acf',
-        'partials.block-*',
-    ];
-
-    /**
-     * Data to be passed to view before rendering.
-     *
-     * @return array
-     */
-    public function with()
-    {
-        return [
-            'CssClasses' => new Utilities\CssClasses,
-        ];
-    }
-}

app/View/Composers/Comments.php

@@ -16,9 +16,28 @@ class Comments extends Composer
     ];
 
     /**
-     * The comment title.
+     * Data to be passed to view before rendering.
+     *
+     * @return array
      */
-    public function title(): string
+    public function with()
+    {
+        return [
+            'title' => $this->title(),
+            'responses' => $this->responses(),
+            'previous' => $this->previous(),
+            'next' => $this->next(),
+            'paginated' => $this->paginated(),
+            'closed' => $this->closed(),
+        ];
+    }
+
+    /**
+     * The comment title.
+     *
+     * @return string
+     */
+    public function title()
     {
         return sprintf(
             /* translators: %1$s is replaced with the number of comments and %2$s with the post title */
@@ -30,11 +49,13 @@ class Comments extends Composer
 
     /**
      * Retrieve the comments.
+     *
+     * @return string
      */
-    public function responses(): ?string
+    public function responses()
     {
         if (! have_comments()) {
-            return null;
+            return;
         }
 
         return wp_list_comments([
@@ -46,11 +67,13 @@ class Comments extends Composer
 
     /**
      * The previous comments link.
+     *
+     * @return string
      */
-    public function previous(): ?string
+    public function previous()
     {
         if (! get_previous_comments_link()) {
-            return null;
+            return;
         }
 
         return get_previous_comments_link(
@@ -60,11 +83,13 @@ class Comments extends Composer
 
     /**
      * The next comments link.
+     *
+     * @return string
      */
-    public function next(): ?string
+    public function next()
     {
         if (! get_next_comments_link()) {
-            return null;
+            return;
         }
 
         return get_next_comments_link(
@@ -74,16 +99,20 @@ class Comments extends Composer
 
     /**
      * Determine if the comments are paginated.
+     *
+     * @return bool
      */
-    public function paginated(): bool
+    public function paginated()
     {
         return get_comment_pages_count() > 1 && get_option('page_comments');
     }
 
     /**
      * Determine if the comments are closed.
+     *
+     * @return bool
      */
-    public function closed(): bool
+    public function closed()
     {
         return ! comments_open() && get_comments_number() != '0' && post_type_supports(get_post_type(), 'comments');
     }

app/View/Composers/Post.php

@@ -18,9 +18,24 @@ class Post extends Composer
     ];
 
     /**
-     * Retrieve the post title.
+     * Data to be passed to view before rendering, but after merging.
+     *
+     * @return array
      */
-    public function title(): string
+    public function override()
+    {
+        return [
+            'title' => $this->title(),
+            'pagination' => $this->pagination(),
+        ];
+    }
+
+    /**
+     * Retrieve the post title.
+     *
+     * @return string
+     */
+    public function title()
     {
         if ($this->view->name() !== 'partials.page-header') {
             return get_the_title();
@@ -55,8 +70,10 @@ class Post extends Composer
 
     /**
      * Retrieve the pagination links.
+     *
+     * @return string
      */
-    public function pagination(): string
+    public function pagination()
     {
         return wp_link_pages([
             'echo' => 0,

app/blocks.php

@@ -1,328 +0,0 @@
-<?php
-
-/**
- * Theme Blocks.
- */
-
-namespace App\Blocks;
-
-/**
- * Disable block styles in frontend
- */
-add_filter( 'should_load_separate_core_block_assets', '__return_false', 99 );
-add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
-add_action( 'init', __NAMESPACE__ . '\\remove_action_block_inline' );
-add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\disable_frontend_inline_css', 20 );
-add_action( 'template_redirect', __NAMESPACE__ . '\\delete_block_support_inline_css' );
-
-/**
- * block editor back end tweaks
- *  - Disable all core blocks except what we need as inner blocks
- *  - resources/js/editor.js handles hiding the inner blocks at the top level
- */
-add_action( 'allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2 );
-add_action( 'admin_init', __NAMESPACE__ . '\\admin_block_cleanup' );
-add_filter( 'block_type_metadata', __NAMESPACE__ . '\\unset_core_supports' );
-
-/**
- * Custom blocks
- */
-add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' );
-add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' );
-add_action( 'init', __NAMESPACE__ . '\\auto_register' );
-
-/**
- * Core Blocks
- */
-add_filter( 'render_block_core/details', __NAMESPACE__ . '\\core_details_modified', 10, 2 );
-add_filter( 'render_block_core/image', __NAMESPACE__ . '\\core_image_modified', 10, 2 );
-
-
-function remove_action_block_inline()
-{
-    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
-    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_support_styles');
-    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
-    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
-}
-
-function admin_block_cleanup()
-{
-    remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
-}
-
-function disable_frontend_inline_css()
-{
-    wp_dequeue_style( 'wp-block-library' );
-    wp_dequeue_style( 'wp-block-library-theme' );
-    wp_dequeue_style( 'classic-theme-styles' );
-}
-
-function delete_block_support_inline_css ()
-{
-	ob_start( function ( $html ) {
-		return preg_replace(
-			'#<style id=[\'"]core-block-supports-inline-css[\'"][^>]*>.*?</style>#s',
-			'',
-			$html
-		);
-	} );
-}
-
-function unset_core_supports($metadata){
-    $name = $metadata['name'];
-
-    if (str_starts_with($name, 'core/') ) {
-        unset($metadata['supports']['color']);
-        unset($metadata['supports']['typography']);
-        unset($metadata['supports']['border']);
-    }
-
-    return $metadata;
-}
-
-
-function allowed_list($allowed){
-    return array_merge($allowed, [
-        // 'core/categories',
-    ]);
-}
-
-function add_categories( $categories ) {
-
-        // Adding a new category.
-        $categories = array_merge([
-            [
-                'slug'  => 'badegg',
-                'title' => __('Provided by Bad Egg Digital'),
-            ],
-        ], $categories);
-
-        return $categories;
-}
-
-function auto_register() {
-    $blocks = glob(get_theme_file_path('resources/views/blocks/*/block.json'));
-
-    foreach ($blocks as $block_json) {
-        $json = json_decode(file_get_contents($block_json));
-        $slug = basename(dirname($block_json));
-        $blockPath = "resources/views/blocks/{$slug}";
-
-        $viewScript = "{$blockPath}/view.js";
-        $script = "{$blockPath}/script.js";
-        $editorCSS = "{$blockPath}/editor.scss";
-        $style = "{$blockPath}/style.scss";
-
-        // editorStyle
-        if (file_exists(get_theme_file_path($editorCSS))) {
-            wp_register_style(
-                "{$slug}-editor-style",
-                \Vite::asset($editorCSS),
-                [],
-                null
-            );
-        }
-
-        // script
-        if(file_exists(get_theme_file_path($script))) {
-            wp_register_script(
-                "{$slug}-script",
-                \Vite::asset($script),
-                [],
-                null,
-                true
-            );
-        }
-
-        // style
-        if (file_exists(get_theme_file_path($style))) {
-            wp_register_style(
-                "{$slug}-style",
-                \Vite::asset($style),
-                [],
-                null
-            );
-        }
-
-        // viewScript
-        if(file_exists(get_theme_file_path($viewScript))) {
-            wp_register_script(
-                "{$slug}-view-script",
-                \Vite::asset($viewScript),
-                [],
-                null,
-                true
-            );
-        }
-
-        $props = [
-            'editor_style'      => "{$slug}-editor-style",
-            'style'             => "{$slug}-style",
-            'script'            => "{$slug}-script",
-            'view_script'       => "{$slug}-view-script",
-            'attributes'        => attributes(),
-        ];
-
-        if(!property_exists($json, 'acf') && \Roots\view()->exists("blocks.{$slug}.render")) {
-            $props['render_callback']   = function ($attributes, $content, $block) {
-                $slug = basename($block->name);
-
-                return \Roots\view("blocks.{$slug}.render", [
-                    'attributes' => $attributes,
-                    'content' => $content,
-                    'block' => $block,
-                ]);
-            };
-        }
-
-        register_block_type($block_json, $props);
-    }
-}
-
-function list_inner()
-{
-    $file = file_get_contents(get_theme_file_path("resources/json/block-core-whitelist.json"));
-    $json = json_decode($file);
-
-    return $json;
-}
-
-function attributes()
-{
-    $file = file_get_contents(get_theme_file_path("resources/json/block-attributes.json"));
-    $json = json_decode($file, true);
-
-    return $json;
-}
-
-function list_all()
-{
-    $blocks = array_map(function($block) {
-        $name = $block->name;
-
-        return $block->name;
-
-    }, \WP_Block_Type_Registry::get_instance()->get_all_registered());
-
-    return array_values($blocks);
-}
-
-function list_custom()
-{
-    return array_filter(list_all(), function($value){
-        if (str_starts_with($value, 'acf/') || str_starts_with($value, 'badegg/')) return $value;
-    });
-}
-
-function list_allowed()
-{
-    $add_allowed = [];
-
-    return array_merge(
-        list_custom(),
-        list_inner(),
-        apply_filters('badegg_block_types_allow', $add_allowed),
-    );
-}
-
-function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $wp_block = false, $context = false) {
-    $slug = basename($block['name']);
-    $block['slug'] = $slug;
-
-    $blade = \Roots\view(
-        "blocks.{$slug}.render",
-        [
-            'block' => $block,
-            'content' => $content,
-            'is_preview' => $is_preview,
-            'post_id' => $post_id,
-            'wp_block' => $wp_block,
-            'context' => $context,
-        ],
-    );
-
-    if($blade) {
-        echo $blade;
-    } else {
-        ob_start(); ?>
-
-        <section class="section bg-error knockout">
-            <div class="container container-small align-centre wysiwyg">
-                <h2>Missing Blade Template</h2>
-                <p>(resources/views/blocks/<?= $slug ?>/render.blade.php)</p>
-            </div>
-        </section>
-
-        <?php echo ob_get_clean();
-    }
-}
-
-function core_details_modified($content, $block)
-{
-    $content = str_replace('</summary>', '</summary><div class="wp-block-details__inner inner inner-zero-x wysiwyg">', $content);
-    $content = str_replace('</details>', '</div></details>', $content);
-
-    return $content;
-}
-
-function core_image_modified($content, $block)
-{
-    if(!$content) return '';
-
-    $dom = new \DomDocument();
-    $dom->strictErrorChecking = false;
-    @$dom->loadHTML($content);
-
-    $images = @$dom->getElementsByTagName('img');
-    $figures = @$dom->getElementsByTagName('figure');
-
-    if(!$figures) return $content;
-
-    // get image data
-    $imageID = @$block['attrs']['id'];
-    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
-    $specifiedSize = @wp_get_attachment_image_src($imageID, $block['sizeSlug']);
-    $large = wp_get_attachment_image_src($imageID, '2048x2048');
-
-    // create lightbox link node
-    $link = $dom->createElement('a');
-    $link->setAttribute('class', 'badegg-lightbox');
-    $link->setAttribute('target', '_blank');
-    $link->setAttribute('role', 'button');
-    $link->setAttribute('tabindex', '0');
-    $link->setAttribute('aria-label', __('expand image', 'badegg'));
-
-    foreach($images as $image) {
-        // define new image attributes
-        $src = $image->getAttribute('src');
-        $srcset = $image->getAttribute('srcset');
-        $class = $image->getAttribute('class');
-
-        // set image attributes
-        $image->setAttribute('src', $lazy[0]);
-        $image->setAttribute('srcset', '');
-        $image->setAttribute('data-src', $src);
-        $image->setAttribute('data-srcset', $srcset);
-        $image->setAttribute('class', $class . ' lazy');
-
-        if($specifiedSize) {
-            $image->setAttribute('width', $specifiedSize[1]);
-            $image->setAttribute('height', $specifiedSize[2]);
-        }
-
-        // clone lightbox link
-        $linkClone = $link->cloneNode();
-
-        // set lightbox link attributes
-        $linkClone->setAttribute('href', $large[0]);
-
-        // replace image with lightbox link
-        $image->parentNode->replaceChild($linkClone, $image);
-
-        // append original image to lightbox link
-        $linkClone->appendChild($image);
-    }
-
-    return $dom->saveHTML($figures[0]);
-}

app/setup.php

@@ -6,56 +6,25 @@
 
 namespace App;
 
-use Illuminate\Support\Facades\Vite;
+use function Roots\bundle;
 
 /**
- * Inject styles into the block editor.
- *
- * @return array
- */
-add_filter('block_editor_settings_all', function ($settings) {
-    $style = Vite::asset('resources/css/editor.scss');
-
-    $settings['styles'][] = [
-        'css' => "@import url('{$style}')",
-    ];
-
-    return $settings;
-});
-
-/**
- * Inject scripts into the block editor.
+ * Register the theme assets.
  *
  * @return void
  */
-add_filter('admin_head', function () {
-    if (! get_current_screen()?->is_block_editor()) {
-        return;
-    }
-
-    $dependencies = json_decode(Vite::content('editor.deps.json'));
-
-    foreach ($dependencies as $dependency) {
-        if (! wp_script_is($dependency)) {
-            wp_enqueue_script($dependency);
-        }
-    }
-
-    echo Vite::withEntryPoints([
-        'resources/js/editor.js',
-    ])->toHtml();
-});
+add_action('wp_enqueue_scripts', function () {
+    bundle('app')->enqueue();
+}, 100);
 
 /**
- * Use the generated theme.json file.
+ * Register the theme assets with the block editor.
  *
- * @return string
+ * @return void
  */
-add_filter('theme_file_path', function ($path, $file) {
-    return $file === 'theme.json'
-        ? public_path('build/assets/theme.json')
-        : $path;
-}, 10, 2);
+add_action('enqueue_block_editor_assets', function () {
+    bundle('editor')->enqueue();
+}, 100);
 
 /**
  * Register the initial theme setup.
@@ -164,17 +133,9 @@ function cors() {
     if(WP_ENV == 'development'):
         header( 'Access-Control-Allow-Origin: *' );
     endif;
+
 }
 
-add_action('wp_head', function(){
-    if(file_exists(get_theme_file_path('resources/images/favicon/site.webmanifest'))) {
-        echo \Roots\view("partials.favicon")->render();
-    }
-});
-
-add_action('after_setup_theme', function(){
-    $image_srcset = new Utilities\ImageSrcset;
-    $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
-    add_image_size('lazy', 50, 50);
-    add_image_size('hero', 1920, 1080, true);
-});
+$image_srcset = new Utilities\ImageSrcset;
+$image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1000]);
+add_image_size('lazy', 50, 50);

bud.config.js

@@ -0,0 +1,78 @@
+/**
+ * Compiler configuration
+ *
+ * @see {@link https://roots.io/sage/docs sage documentation}
+ * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
+ *
+ * @type {import('@roots/bud').Config}
+ */
+export default async (app) => {
+  /**
+   * Application assets & entrypoints
+   *
+   * @see {@link https://bud.js.org/reference/bud.entry}
+   * @see {@link https://bud.js.org/reference/bud.assets}
+   */
+  app
+    .entry('app', ['@scripts/app', '@styles/app'])
+    .entry('editor', ['@scripts/editor', '@styles/editor'])
+    .assets(['images']);
+
+  /**
+   * Set public path
+   *
+   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
+   */
+  app.setPublicPath('/app/themes/sage/public/');
+
+  /**
+   * Development server settings
+   *
+   * @see {@link https://bud.js.org/reference/bud.setUrl}
+   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
+   * @see {@link https://bud.js.org/reference/bud.watch}
+   */
+  app
+    .setUrl('https://localhost:3000')
+    .setProxyUrl('https://badegg-bedrock.localhost.1fp.ltd')
+    .watch(['resources/views', 'app']);
+
+  /**
+   * Generate WordPress `theme.json`
+   *
+   * @note This overwrites `theme.json` on every build.
+   *
+   * @see {@link https://bud.js.org/extensions/sage/theme.json}
+   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
+   */
+  app.wpjson
+    .setSettings({
+      background: {
+        backgroundImage: true,
+      },
+      color: {
+        custom: false,
+        customDuotone: false,
+        customGradient: false,
+        defaultDuotone: false,
+        defaultGradients: false,
+        defaultPalette: false,
+        duotone: [],
+      },
+      custom: {
+        spacing: {},
+        typography: {
+          'font-size': {},
+          'line-height': {},
+        },
+      },
+      spacing: {
+        padding: true,
+        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
+      },
+      typography: {
+        customFontSize: false,
+      },
+    })
+    .enable();
+};

composer.json

@@ -39,12 +39,11 @@
     }
   },
   "require": {
-    "php": ">=8.2",
-    "roots/acorn": "^5.0",
+    "php": ">=8.1",
     "ourcodeworld/name-that-color": "dev-master"
   },
   "require-dev": {
-    "laravel/pint": "^1.20"
+    "laravel/pint": "^1.13"
   },
   "suggest": {
     "log1x/sage-directives": "A collection of useful Blade directives for WordPress and Sage (^1.0)."
@@ -56,9 +55,11 @@
   },
   "minimum-stability": "dev",
   "prefer-stable": true,
-  "scripts": {
-    "post-autoload-dump": [
-      "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
-    ]
+  "extra": {
+    "acorn": {
+      "providers": [
+        "App\\Providers\\ThemeServiceProvider"
+      ]
+    }
   }
 }

functions.php

@@ -1,7 +1,5 @@
 <?php
 
-use Roots\Acorn\Application;
-
 /*
 |--------------------------------------------------------------------------
 | Register The Auto Loader
@@ -31,11 +29,18 @@ require $composer;
 |
 */
 
-Application::configure()
-    ->withProviders([
-        App\Providers\ThemeServiceProvider::class,
-    ])
-    ->boot();
+if (! function_exists('\Roots\bootloader')) {
+    wp_die(
+        __('You need to install Acorn to use this theme.', 'sage'),
+        '',
+        [
+            'link_url' => 'https://roots.io/acorn/docs/installation/',
+            'link_text' => __('Acorn Docs: Installation', 'sage'),
+        ]
+    );
+}
+
+\Roots\bootloader()->boot();
 
 /*
 |--------------------------------------------------------------------------
@@ -57,7 +62,8 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-
+autoload_psr4('Blocks');
+autoload_psr4('Ajax');
 
 /*
 |--------------------------------------------------------------------------
@@ -71,7 +77,7 @@ autoload_psr4('Admin');
 |
 */
 
-collect(['setup', 'filters', 'blocks'])
+collect(['setup', 'filters'])
     ->each(function ($file) {
         if (! locate_template($file = "app/{$file}.php", true, true)) {
             wp_die(

jsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "@roots/bud/config/jsconfig.json",
+    "@roots/sage/config/jsconfig.json"
+  ],
+  "compilerOptions": {
+    "baseUrl": "resources",
+    /**
+     * Resolve aliases
+     */
+    "paths": {
+      "@fonts/*": ["fonts/*"],
+      "@images/*": ["images/*"],
+      "@scripts/*": ["scripts/*"],
+      "@styles/*": ["styles/*"]
+    },
+    /**
+     * Type definitions
+     */
+    "types": [
+      "@roots/bud",
+      "@roots/bud-react",
+      "@roots/bud-postcss",
+      "@roots/bud-preset-recommend",
+      "@roots/bud-preset-wordpress",
+      "@roots/bud-wordpress-theme-json",
+      "@roots/sage"
+    ]
+  },
+  "files": ["bud.config.js"],
+  "include": ["resources"],
+  "exclude": ["node_modules", "public"]
+}

package.json

@@ -1,13 +1,16 @@
 {
   "name": "sage",
   "private": true,
+  "browserslist": [
+    "extends @roots/browserslist-config"
+  ],
   "engines": {
     "node": ">=20.0.0"
   },
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "bud dev",
+    "build": "bud build",
     "translate": "npm run translate:pot && npm run translate:update",
     "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
     "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
@@ -16,10 +19,9 @@
     "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
   },
   "devDependencies": {
-    "@roots/vite-plugin": "^1.0.2",
-    "fast-glob": "^3.3.3",
-    "laravel-vite-plugin": "^1.2.0",
-    "sass": "^1.93.2",
-    "vite": "^6.2.0"
-  }
+    "@roots/bud": "6.23.3",
+    "@roots/bud-sass": "^6.23.3",
+    "@roots/sage": "6.23.3"
+  },
+  "dependencies": {}
 }

resources/acf/group_block_acfdemo.json

@@ -1,131 +0,0 @@
-{
-    "key": "group_block_acfdemo",
-    "title": "Block: ACF Demo",
-    "fields": [
-        {
-            "key": "field_693d7783d862a",
-            "label": "Content",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "open": 1,
-            "multi_expand": 1,
-            "endpoint": 0
-        },
-        {
-            "key": "field_693d779cd862b",
-            "label": "",
-            "name": "content",
-            "aria-label": "",
-            "type": "wysiwyg",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "allow_in_bindings": 0,
-            "tabs": "all",
-            "toolbar": "full",
-            "media_upload": 1,
-            "delay": 0
-        },
-        {
-            "key": "field_693d7764938f3",
-            "label": "Introduction",
-            "name": "block_intro",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "clone": [
-                "group_clone_block_intro"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0
-        },
-        {
-            "key": "field_6940187f74afb",
-            "label": "Footer",
-            "name": "block_footer",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "clone": [
-                "group_clone_block_footer"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0
-        },
-        {
-            "key": "field_693d776493992",
-            "label": "Settings",
-            "name": "block_settings",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "clone": [
-                "group_clone_block_settings"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 0,
-            "prefix_name": 0
-        }
-    ],
-    "location": [
-        [
-            {
-                "param": "block",
-                "operator": "==",
-                "value": "badegg\/acfdemo"
-            }
-        ]
-    ],
-    "menu_order": 0,
-    "position": "normal",
-    "style": "default",
-    "label_placement": "top",
-    "instruction_placement": "label",
-    "hide_on_screen": "",
-    "active": true,
-    "description": "",
-    "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1765814950
-}

resources/acf/group_block_bad_example.json

@@ -1,9 +1,9 @@
 {
-    "key": "group_block_editor",
-    "title": "Block: Editor",
+    "key": "group_block_bad_example",
+    "title": "Block: Bad Example",
     "fields": [
         {
-            "key": "field_67659ad8dc795",
+            "key": "field_676599038e31d",
             "label": "",
             "name": "",
             "aria-label": "",
@@ -16,7 +16,42 @@
                 "class": "",
                 "id": ""
             },
-            "message": "You can insert a variety of blocks inside of this one to build your page or post.",
+            "message": "<h3><span class=\"dashicons dashicons-dismiss\"><\/span> Bad Example<\/h3>",
+            "new_lines": "wpautop",
+            "esc_html": 0
+        },
+        {
+            "key": "field_67659accdc794",
+            "label": "Content",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67659ad8dc795",
+            "label": "Example",
+            "name": "",
+            "aria-label": "",
+            "type": "message",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "Place your block-specific custom fields here.",
             "new_lines": "wpautop",
             "esc_html": 0
         },
@@ -92,7 +127,7 @@
             {
                 "param": "block",
                 "operator": "==",
-                "value": "acf\/badegg-editor"
+                "value": "acf\/badegg-bad-example"
             }
         ]
     ],
@@ -105,5 +140,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1763915024
+    "modified": 1734712286
 }

resources/acf/group_block_footer.json

@@ -0,0 +1,109 @@
+{
+    "key": "group_block_footer",
+    "title": "Clone: Block Footer",
+    "fields": [
+        {
+            "key": "field_67659b49a6db2",
+            "label": "Footer",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67659b49a754a",
+            "label": "Blurb",
+            "name": "blurb_footer",
+            "aria-label": "",
+            "type": "textarea",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "rows": 3,
+            "placeholder": "",
+            "new_lines": ""
+        },
+        {
+            "key": "field_67659b7502137",
+            "label": "Links",
+            "name": "links",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "table",
+            "pagination": 0,
+            "min": 0,
+            "max": 2,
+            "collapsed": "",
+            "button_label": "Add Button",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_67659b8702138",
+                    "label": "Button",
+                    "name": "button",
+                    "aria-label": "",
+                    "type": "clone",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "clone": [
+                        "group_clone_button"
+                    ],
+                    "display": "seamless",
+                    "layout": "block",
+                    "prefix_label": 0,
+                    "prefix_name": 0,
+                    "parent_repeater": "field_67659b7502137"
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1734712326
+}

resources/acf/group_block_intro.json

@@ -0,0 +1,82 @@
+{
+    "key": "group_block_intro",
+    "title": "Clone: Block Intro",
+    "fields": [
+        {
+            "key": "field_67659970db415",
+            "label": "Introduction",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_676599964d3cc",
+            "label": "Heading",
+            "name": "heading",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_6765999d4d3cd",
+            "label": "Blurb",
+            "name": "blurb",
+            "aria-label": "",
+            "type": "textarea",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "rows": 3,
+            "placeholder": "",
+            "new_lines": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1734711913
+}

resources/acf/group_clone_background_settings.json

@@ -2,9 +2,36 @@
     "key": "group_clone_background_settings",
     "title": "Clone: Background Settings",
     "fields": [
+        {
+            "key": "field_672d3ba78bc40",
+            "label": "Background Type",
+            "name": "bg_type",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Solid Colour",
+                "image": "Still Photo",
+                "video": "Looping Video"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        },
         {
             "key": "field_67325dd23234e",
-            "label": "Colour",
+            "label": "Background Colour",
             "name": "bg_colour",
             "aria-label": "",
             "type": "select",
@@ -12,63 +39,38 @@
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "50",
+                "width": "20",
                 "class": "",
                 "id": ""
             },
             "choices": {
-                "0": "None",
-                "primary": "<i class=\"fas fa-circle\" style=\"color: #dd3333\"><\/i> Punch",
-                "secondary": "<i class=\"fas fa-circle\" style=\"color: #81d742\"><\/i> Atlantis",
-                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #8224e3\"><\/i> Purple Heart",
-                "white": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
-                "grey": "<i class=\"fas fa-circle\" style=\"color: #808080\"><\/i> Gray",
-                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
             },
             "default_value": 0,
             "return_format": "value",
             "multiple": 0,
             "allow_null": 0,
-            "allow_in_bindings": 1,
             "ui": 1,
             "ajax": 0,
-            "placeholder": "",
-            "create_options": 0,
-            "save_options": 0
+            "placeholder": ""
         },
         {
             "key": "field_67325e213234f",
-            "label": "Tint",
+            "label": "Background Tint",
             "name": "bg_tint",
             "aria-label": "",
             "type": "select",
             "instructions": "",
             "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_67325dd23234e",
-                        "operator": "!=",
-                        "value": "0"
-                    }
-                ],
-                [
-                    {
-                        "field": "field_67325dd23234e",
-                        "operator": "!=",
-                        "value": "black"
-                    }
-                ],
-                [
-                    {
-                        "field": "field_67325dd23234e",
-                        "operator": "!=",
-                        "value": "white"
-                    }
-                ]
-            ],
+            "conditional_logic": 0,
             "wrapper": {
-                "width": "50",
+                "width": "20",
                 "class": "",
                 "id": ""
             },
@@ -85,33 +87,442 @@
             "return_format": "value",
             "multiple": 0,
             "allow_null": 0,
-            "allow_in_bindings": 1,
             "ui": 1,
             "ajax": 0,
-            "placeholder": "",
-            "create_options": 0,
-            "save_options": 0
+            "placeholder": ""
         },
         {
             "key": "field_67350f526abf1",
-            "label": "",
+            "label": "Text Contrast",
             "name": "contrast",
             "aria-label": "",
-            "type": "true_false",
+            "type": "select",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Auto",
+                "dark": "Force dark text",
+                "light": "Force light text"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_67325e3432350",
+            "label": "Opacity",
+            "name": "bg_opacity",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3ba78bc40",
+                        "operator": "!=",
+                        "value": "0"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "default_value": 30,
+            "min": 5,
+            "max": 100,
+            "step": 5,
+            "prepend": "",
+            "append": "%"
+        },
+        {
+            "key": "field_6734b234f9c47",
+            "label": "Pattern Edge",
+            "name": "pattern",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Disabled",
+                "top": "Top",
+                "bottom": "Bottom",
+                "both": "Both"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_6734b2daf9c4b",
+            "label": "Top Pattern",
+            "name": "pattern_top",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_6734b234f9c47",
+                        "operator": "==",
+                        "value": "top"
+                    }
+                ],
+                [
+                    {
+                        "field": "field_6734b234f9c47",
+                        "operator": "==",
+                        "value": "both"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "40",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_673514b45e977",
+                    "label": "Colour",
+                    "name": "colour",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                        "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                        "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                        "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                        "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                        "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                        "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+                    },
+                    "default_value": false,
+                    "return_format": "",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 0,
+                    "placeholder": ""
+                },
+                {
+                    "key": "field_673514d85e978",
+                    "label": "Tint",
+                    "name": "tint",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "lightest": "Lightest",
+                        "lighter": "Lighter",
+                        "light": "Light",
+                        "0": "None",
+                        "dark": "Dark",
+                        "darker": "Darker",
+                        "darkest": "Darkest"
+                    },
+                    "default_value": 0,
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": ""
+                }
+            ]
+        },
+        {
+            "key": "field_673514f15e979",
+            "label": "Bottom Pattern",
+            "name": "pattern_bottom",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "40",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_673514f15e97a",
+                    "label": "Colour",
+                    "name": "colour",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                        "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                        "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                        "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                        "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                        "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                        "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+                    },
+                    "default_value": false,
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 0,
+                    "placeholder": ""
+                },
+                {
+                    "key": "field_673514f15e97b",
+                    "label": "Tint",
+                    "name": "tint",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_673514f15e97a",
+                                "operator": "!=",
+                                "value": "black"
+                            }
+                        ],
+                        [
+                            {
+                                "field": "field_673514f15e97a",
+                                "operator": "!=",
+                                "value": "0"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "lightest": "Lightest",
+                        "lighter": "Lighter",
+                        "light": "Light",
+                        "0": "None",
+                        "dark": "Dark",
+                        "darker": "Darker",
+                        "darkest": "Darkest"
+                    },
+                    "default_value": 0,
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": ""
+                }
+            ]
+        },
+        {
+            "key": "field_672d3b128bc39",
+            "label": "Background Image",
+            "name": "bg_image",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3ba78bc40",
+                        "operator": "!=",
+                        "value": "0"
+                    }
+                ]
+            ],
             "wrapper": {
                 "width": "",
                 "class": "",
                 "id": ""
             },
-            "message": "Text Contrast",
-            "default_value": 0,
-            "allow_in_bindings": 0,
-            "ui_on_text": "Light",
-            "ui_off_text": "Dark",
-            "ui": 1
+            "return_format": "id",
+            "library": "all",
+            "min_width": "",
+            "min_height": "",
+            "min_size": "",
+            "max_width": "",
+            "max_height": "",
+            "max_size": "",
+            "mime_types": "",
+            "preview_size": "medium"
+        },
+        {
+            "key": "field_672d3b228bc3a",
+            "label": "Background Video",
+            "name": "bg_video",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3ba78bc40",
+                        "operator": "==",
+                        "value": "video"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_672d3b428bc3b",
+                    "label": "Extra Small",
+                    "name": "xs",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b678bc3c",
+                    "label": "Small",
+                    "name": "sm",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b728bc3d",
+                    "label": "Medium",
+                    "name": "md",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b7a8bc3e",
+                    "label": "Large",
+                    "name": "lg",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b838bc3f",
+                    "label": "Extra Large",
+                    "name": "xl",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                }
+            ]
         }
     ],
     "location": [
@@ -132,6 +543,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1767548180
+    "modified": 1733505903
 }

resources/acf/group_clone_block_footer.json

@@ -1,210 +0,0 @@
-{
-    "key": "group_clone_block_footer",
-    "title": "Clone: Block Footer",
-    "fields": [
-        {
-            "key": "field_694016b164221",
-            "label": "Footer",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 0
-        },
-        {
-            "key": "field_694016b164272",
-            "label": "",
-            "name": "footer",
-            "aria-label": "",
-            "type": "group",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "layout": "block",
-            "sub_fields": [
-                {
-                    "key": "field_694016b165315",
-                    "label": "Blurb",
-                    "name": "blurb",
-                    "aria-label": "",
-                    "type": "textarea",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "default_value": "",
-                    "maxlength": "",
-                    "rows": 3,
-                    "placeholder": "",
-                    "new_lines": ""
-                },
-                {
-                    "key": "field_69401a2f06555",
-                    "label": "Links",
-                    "name": "links",
-                    "aria-label": "",
-                    "type": "repeater",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "layout": "block",
-                    "pagination": 0,
-                    "min": 0,
-                    "max": 0,
-                    "collapsed": "",
-                    "button_label": "Add Row",
-                    "rows_per_page": 20,
-                    "sub_fields": [
-                        {
-                            "key": "field_69401a4006556",
-                            "label": "Link",
-                            "name": "link",
-                            "aria-label": "",
-                            "type": "clone",
-                            "instructions": "",
-                            "required": 0,
-                            "conditional_logic": 0,
-                            "wrapper": {
-                                "width": "",
-                                "class": "",
-                                "id": ""
-                            },
-                            "clone": [
-                                "group_clone_button"
-                            ],
-                            "display": "seamless",
-                            "layout": "block",
-                            "prefix_label": 0,
-                            "prefix_name": 0,
-                            "parent_repeater": "field_69401a2f06555"
-                        }
-                    ]
-                },
-                {
-                    "key": "field_694016b165337",
-                    "label": "Alignment",
-                    "name": "align",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "left": "Left",
-                        "centre": "Centre",
-                        "right": "Right"
-                    },
-                    "default_value": "centre",
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "allow_in_bindings": 0,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": "",
-                    "create_options": 0,
-                    "save_options": 0
-                },
-                {
-                    "key": "field_694016b16537f",
-                    "label": "Container width",
-                    "name": "container_width",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "0": "Auto",
-                        "narrow": "Narrow",
-                        "small": "Small",
-                        "medium": "Medium",
-                        "large": "Large",
-                        "full": "Edge to edge"
-                    },
-                    "default_value": "narrow",
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "allow_in_bindings": 0,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": "",
-                    "create_options": 0,
-                    "save_options": 0
-                }
-            ]
-        },
-        {
-            "key": "field_694016b1642c5",
-            "label": "Footer (end)",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 1
-        }
-    ],
-    "location": [
-        [
-            {
-                "param": "widget",
-                "operator": "==",
-                "value": "rss"
-            }
-        ]
-    ],
-    "menu_order": 0,
-    "position": "normal",
-    "style": "default",
-    "label_placement": "top",
-    "instruction_placement": "label",
-    "hide_on_screen": "",
-    "active": true,
-    "description": "",
-    "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1765809897
-}

resources/acf/group_clone_block_intro.json

@@ -1,184 +0,0 @@
-{
-    "key": "group_clone_block_intro",
-    "title": "Clone: Block Intro",
-    "fields": [
-        {
-            "key": "field_67659970db415",
-            "label": "Introduction",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 0
-        },
-        {
-            "key": "field_693f37ad7fa70",
-            "label": "",
-            "name": "intro",
-            "aria-label": "",
-            "type": "group",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "layout": "block",
-            "sub_fields": [
-                {
-                    "key": "field_676599964d3cc",
-                    "label": "Heading",
-                    "name": "heading",
-                    "aria-label": "",
-                    "type": "text",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "hfont",
-                        "id": ""
-                    },
-                    "default_value": "",
-                    "maxlength": "",
-                    "allow_in_bindings": 0,
-                    "placeholder": "",
-                    "prepend": "",
-                    "append": ""
-                },
-                {
-                    "key": "field_6765999d4d3cd",
-                    "label": "Blurb",
-                    "name": "blurb",
-                    "aria-label": "",
-                    "type": "textarea",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "default_value": "",
-                    "maxlength": "",
-                    "rows": 3,
-                    "placeholder": "",
-                    "new_lines": ""
-                },
-                {
-                    "key": "field_69400cbafb964",
-                    "label": "Alignment",
-                    "name": "align",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "left": "Left",
-                        "centre": "Centre",
-                        "right": "Right"
-                    },
-                    "default_value": "centre",
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "allow_in_bindings": 0,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": "",
-                    "create_options": 0,
-                    "save_options": 0
-                },
-                {
-                    "key": "field_693f3a7fae85e",
-                    "label": "Container width",
-                    "name": "container_width",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "0": "Auto",
-                        "narrow": "Narrow",
-                        "small": "Small",
-                        "medium": "Medium",
-                        "large": "Large",
-                        "full": "Edge to edge"
-                    },
-                    "default_value": "narrow",
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "allow_in_bindings": 0,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": "",
-                    "create_options": 0,
-                    "save_options": 0
-                }
-            ]
-        },
-        {
-            "key": "field_6828dae1d1bb0",
-            "label": "Intro (end)",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 1
-        }
-    ],
-    "location": [
-        [
-            {
-                "param": "widget",
-                "operator": "==",
-                "value": "rss"
-            }
-        ]
-    ],
-    "menu_order": 0,
-    "position": "normal",
-    "style": "default",
-    "label_placement": "top",
-    "instruction_placement": "label",
-    "hide_on_screen": "",
-    "active": true,
-    "description": "",
-    "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1765809893
-}

resources/acf/group_clone_block_settings.json

@@ -3,11 +3,11 @@
     "title": "Clone: Block Settings",
     "fields": [
         {
-            "key": "field_69403228d2637",
+            "key": "field_673511c31122f",
             "label": "Settings",
             "name": "",
             "aria-label": "",
-            "type": "accordion",
+            "type": "tab",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -16,146 +16,62 @@
                 "class": "",
                 "id": ""
             },
-            "open": 0,
-            "multi_expand": 1,
+            "placement": "top",
             "endpoint": 0
         },
         {
-            "key": "field_694031b513e66",
-            "label": "",
-            "name": "settings",
+            "key": "field_67350eb62cdf9",
+            "label": "Top Padding",
+            "name": "padding_top",
             "aria-label": "",
-            "type": "group",
+            "type": "radio",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "",
+                "width": "33.33",
                 "class": "",
                 "id": ""
             },
-            "layout": "block",
-            "sub_fields": [
-                {
-                    "key": "field_6800097e61765",
-                    "label": "Container Width",
-                    "name": "container_width",
-                    "aria-label": "",
-                    "type": "select",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": {
-                        "0": "Auto",
-                        "narrow": "Narrow",
-                        "small": "Small",
-                        "medium": "Medium",
-                        "large": "Large",
-                        "full": "Edge to edge"
-                    },
-                    "default_value": 0,
-                    "return_format": "value",
-                    "multiple": 0,
-                    "allow_null": 0,
-                    "allow_in_bindings": 1,
-                    "ui": 0,
-                    "ajax": 0,
-                    "placeholder": "",
-                    "create_options": 0,
-                    "save_options": 0
-                },
-                {
-                    "key": "field_67350eb62cdf9",
-                    "label": "",
-                    "name": "padding_top",
-                    "aria-label": "",
-                    "type": "true_false",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "message": "Top Padding",
-                    "default_value": 1,
-                    "allow_in_bindings": 0,
-                    "ui_on_text": "On",
-                    "ui_off_text": "Off",
-                    "ui": 1
-                },
-                {
-                    "key": "field_673510c1dc830",
-                    "label": "",
-                    "name": "padding_bottom",
-                    "aria-label": "",
-                    "type": "true_false",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "message": "Bottom Padding",
-                    "default_value": 1,
-                    "allow_in_bindings": 0,
-                    "ui_on_text": "On",
-                    "ui_off_text": "Off",
-                    "ui": 1
-                },
-                {
-                    "key": "field_695aa550e16d4",
-                    "label": "Background",
-                    "name": "",
-                    "aria-label": "",
-                    "type": "message",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "message": "",
-                    "new_lines": "wpautop",
-                    "esc_html": 0
-                },
-                {
-                    "key": "field_67350aeb146ca",
-                    "label": "Background",
-                    "name": "background",
-                    "aria-label": "",
-                    "type": "clone",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "",
-                        "class": "",
-                        "id": ""
-                    },
-                    "clone": [
-                        "group_clone_background_settings"
-                    ],
-                    "display": "seamless",
-                    "layout": "block",
-                    "prefix_label": 0,
-                    "prefix_name": 0
-                }
-            ]
+            "choices": [
+                "On",
+                "Off"
+            ],
+            "default_value": "",
+            "return_format": "value",
+            "allow_null": 0,
+            "other_choice": 0,
+            "layout": "horizontal",
+            "save_other_choice": 0
         },
         {
-            "key": "field_69403239d2638",
-            "label": "Settings (end)",
+            "key": "field_673510c1dc830",
+            "label": "Bottom Padding",
+            "name": "padding_bottom",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "33.33",
+                "class": "",
+                "id": ""
+            },
+            "choices": [
+                "On",
+                "Off"
+            ],
+            "default_value": "",
+            "return_format": "value",
+            "allow_null": 0,
+            "other_choice": 0,
+            "layout": "horizontal",
+            "save_other_choice": 0
+        },
+        {
+            "key": "field_6735258c2d9ff",
+            "label": "Background",
             "name": "",
             "aria-label": "",
             "type": "accordion",
@@ -169,7 +85,29 @@
             },
             "open": 0,
             "multi_expand": 0,
-            "endpoint": 1
+            "endpoint": 0
+        },
+        {
+            "key": "field_67350aeb146ca",
+            "label": "Background",
+            "name": "background",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_background_settings"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
         }
     ],
     "location": [
@@ -190,6 +128,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1767548583
+    "modified": 1731536288
 }

resources/acf/group_clone_button.json

@@ -9,15 +9,14 @@
             "aria-label": "",
             "type": "link",
             "instructions": "",
-            "required": 1,
+            "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "",
+                "width": "40",
                 "class": "",
                 "id": ""
             },
-            "return_format": "array",
-            "allow_in_bindings": 1
+            "return_format": "array"
         },
         {
             "key": "field_673529a2a37a1",
@@ -27,22 +26,14 @@
             "type": "text",
             "instructions": "",
             "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_672d3d7b2c273",
-                        "operator": "!=empty"
-                    }
-                ]
-            ],
+            "conditional_logic": 0,
             "wrapper": {
-                "width": "",
+                "width": "20",
                 "class": "",
                 "id": ""
             },
             "default_value": "",
             "maxlength": "",
-            "allow_in_bindings": 1,
             "placeholder": "",
             "prepend": "",
             "append": ""
@@ -55,42 +46,28 @@
             "type": "select",
             "instructions": "",
             "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_672d3d7b2c273",
-                        "operator": "!=empty"
-                    }
-                ]
-            ],
+            "conditional_logic": 0,
             "wrapper": {
-                "width": "",
+                "width": "20",
                 "class": "",
                 "id": ""
             },
             "choices": {
-                "primary": "<i class=\"fas fa-circle\" style=\"color: #002448\"><\/i> Prussian Blue",
-                "secondary": "<i class=\"fas fa-circle\" style=\"color: #fc533e\"><\/i> Sunset Orange",
-                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #fdd400\"><\/i> Gold",
-                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #7d89d1\"><\/i> Moody Blue",
-                "quinary": "<i class=\"fas fa-circle\" style=\"color: #ffdab4\"><\/i> Frangipani",
-                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
                 "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
-                "quaternary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quaternary-white\"><\/i> Moody Blue to White",
-                "quinary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quinary-white\"><\/i> Frangipani to White",
-                "white-quaternary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quaternary\"><\/i> White to Moody Blue",
-                "white-quinary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quinary\"><\/i> White to Frangipani"
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
             },
-            "default_value": "primary",
+            "default_value": 0,
             "return_format": "value",
             "multiple": 0,
             "allow_null": 0,
-            "allow_in_bindings": 1,
             "ui": 1,
             "ajax": 0,
-            "placeholder": "",
-            "create_options": 0,
-            "save_options": 0
+            "placeholder": ""
         },
         {
             "key": "field_672d3dc52c275",
@@ -100,16 +77,9 @@
             "type": "select",
             "instructions": "",
             "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_672d3d7b2c273",
-                        "operator": "!=empty"
-                    }
-                ]
-            ],
+            "conditional_logic": 0,
             "wrapper": {
-                "width": "",
+                "width": "20",
                 "class": "",
                 "id": ""
             },
@@ -121,12 +91,9 @@
             "return_format": "value",
             "multiple": 0,
             "allow_null": 0,
-            "allow_in_bindings": 1,
             "ui": 0,
             "ajax": 0,
-            "placeholder": "",
-            "create_options": 0,
-            "save_options": 0
+            "placeholder": ""
         }
     ],
     "location": [
@@ -147,5 +114,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1748001311
+    "modified": 1731537485
 }

resources/acf/group_options_global_settings.json

@@ -17,8 +17,7 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
         },
         {
             "key": "field_67658e49aba4f",
@@ -59,10 +58,7 @@
                     "default_value": "",
                     "enable_opacity": 0,
                     "return_format": "string",
-                    "parent_repeater": "field_67658e49aba4f",
-                    "custom_palette_source": "",
-                    "palette_colors": "",
-                    "show_color_wheel": true
+                    "parent_repeater": "field_67658e49aba4f"
                 },
                 {
                     "key": "field_67658fba41889",
@@ -171,7 +167,6 @@
                         "id": ""
                     },
                     "layout": "block",
-                    "parent_repeater": "field_67658e49aba4f",
                     "sub_fields": [
                         {
                             "key": "field_676590414188c",
@@ -189,10 +184,7 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                         },
                         {
                             "key": "field_676590684188d",
@@ -210,10 +202,7 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                         },
                         {
                             "key": "field_6765907f4188e",
@@ -231,10 +220,7 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                         },
                         {
                             "key": "field_676590924188f",
@@ -252,10 +238,7 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                         },
                         {
                             "key": "field_6765909941890",
@@ -273,10 +256,7 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                         },
                         {
                             "key": "field_6765909f41891",
@@ -294,12 +274,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                         }
-                    ]
+                    ],
+                    "parent_repeater": "field_67658e49aba4f"
                 }
             ]
         },
@@ -318,8 +296,7 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
         },
         {
             "key": "field_67659cb08081e",
@@ -395,8 +372,7 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
         },
         {
             "key": "field_676594615ead2",
@@ -417,27 +393,6 @@
             "placeholder": "",
             "prepend": "",
             "append": ""
-        },
-        {
-            "key": "field_698b36010d055",
-            "label": "Font Awesome Kit ID",
-            "name": "badegg_integrations_fontawesome_kit",
-            "aria-label": "",
-            "type": "text",
-            "instructions": "The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener nofollow noindex\">Visit website<\/a>",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "maxlength": "",
-            "allow_in_bindings": 1,
-            "placeholder": "",
-            "prepend": "",
-            "append": ""
         }
     ],
     "location": [
@@ -458,6 +413,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1770736471
+    "modified": 1734712625
 }

resources/css/app.scss

@@ -1,25 +0,0 @@
-// Global Variables, Mixins, and Framework
-@forward "global/variables";
-@forward "global/mixins";
-@forward "global/fonts";
-@forward "global/typography";
-@forward "global/framework";
-
-// Third Party Plugins
-@forward "plugins/contact-form-7";
-@forward "plugins/mce";
-
-// Components
-@forward "components/block";
-@forward "components/forms";
-@forward "components/button";
-@forward "components/card";
-@forward "components/BadEggLightbox";
-
-// Sections
-@forward "../views/sections/header/header";
-@forward "../views/sections/footer/footer";
-
-// Page Styles
-@forward "views/page";
-

resources/css/components/_BadEggLightbox.scss

@@ -1,92 +0,0 @@
-#badegg-lightbox {
-  &-overlay,
-  &-image,
-  &-close {
-    transition: all 300ms ease;
-    opacity: 0;
-  }
-
-  &-modal {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    padding: 3em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(white, 0.5);
-
-    .open & {
-      opacity: 1;
-      backdrop-filter: blur(1em);
-    }
-  }
-
-  &-image {
-    position: relative;
-    z-index: 2;
-    object-fit: contain;
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-    transform: scale(0.8);
-
-    .open & {
-      transform: none;
-      opacity: 1;
-    }
-  }
-
-  &-close {
-    position: absolute;
-    z-index: 3;
-    top: 1em;
-    right: 1em;
-    display: block;
-    appearance: none;
-    border: none;
-    background: transparent;
-    border: 2px solid black;
-    border-radius: 50%;
-    width: 2em;
-    height: 2em;
-    cursor: pointer;
-    transform: scale(0.01) rotate(-360deg);
-
-    .open & {
-      opacity: 1;
-      transform: none;
-    }
-
-    &:hover,
-    &:focus {
-      transform: scale(1.2) rotate(90deg);
-    }
-
-    .admin-bar & {
-      top: calc(1em + 32px);
-
-      @media (max-width: 782px) {
-        top: calc(1em + 46px);
-      }
-    }
-
-    svg {
-      display: block;
-      width: 100%;
-      stroke: black;
-      stroke-width: 5;
-    }
-
-    &:focus {
-      outline: 2px dashed red;
-    }
-  }
-}

resources/css/components/_block.scss

@@ -1,15 +0,0 @@
-
-
-.has-bg-image {
-  position: relative;
-
-  >.container {
-    position: relative;
-    z-index: 1;
-  }
-
-  .badegg-block-background {
-    position: absolute;
-    inset: 0;
-  }
-}

resources/css/editor.scss

@@ -1,73 +0,0 @@
-@use "app";
-@use "global/variables";
-
-html :where(.wp-block) {
-  max-width: none;
-}
-
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
-  &:hover:after {
-    content: '';
-    outline: 2px solid variables.$wpblue;
-    position: absolute;
-    inset: 0;
-  }
-
-  &:focus:after {
-    outline-style: dashed;
-  }
-}
-
-.editor-styles-wrapper {
-  padding: 0;
-  background: transparent;
-}
-
-.editor-visual-editor {
-  &__post-title-wrapper {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    padding: 1rem;
-    margin: 0 !important;
-    background: white;
-    box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
-  }
-}
-
-.editor-styles-wrapper {
-  background: variables.$grey-lightest;
-
-  .block-list-appender {
-    width: 350px;
-    max-width: 90%;
-    margin: 1em auto;
-  }
-}
-
-.wp-block-post-title {
-  position: relative;
-  padding: 0.5rem;
-  border: 1px solid rgba(black, 0.3);
-  margin: 0;
-
-  &::before {
-    content: 'Page Title';
-    position: absolute;
-    top: -0.5rem;
-    left: 0.5rem;
-    color: rgba(black, 0.3);
-    font-size: 0.8rem;
-    display: block;
-    padding: 0 0.5rem;
-    margin: 0;
-    background: white;
-    line-height: 1;
-    font-weight: 400;
-  }
-}
-
-.is-root-container > .wp-block:not(.block-list-appender) {
-  max-width: none;
-  margin: 0;
-}

resources/css/global/_framework.scss

@@ -1,4 +0,0 @@
-@forward "framework/breakpoints";
-@forward "framework/normalise";
-@forward "framework/colours";
-@forward "framework/spacing";

resources/css/global/_mixins.scss

@@ -1,4 +0,0 @@
-@forward "mixins/linear-gradient";
-@forward "mixins/text-contrast";
-@forward "mixins/generate-colour-classes";
-@forward "mixins/generate-button-classes";

resources/css/global/_variables.scss

@@ -1,4 +0,0 @@
-@forward "variables/fonts";
-@forward "variables/colours";
-@forward "variables/breakpoints";
-@forward "variables/spacing";

resources/css/global/framework/_colours.scss

@@ -1,12 +0,0 @@
-@use "../mixins";
-@use "../variables";
-
-::selection {
-  color: variables.$white;
-  background: variables.$primary;
-}
-
-@each $color, $hex in variables.$colors {
-  @include mixins.generate_colour_classes($color, $hex);
-  @include mixins.generate_button_colors($color, $hex);
-}

resources/css/global/framework/_spacing.scss

@@ -1,162 +0,0 @@
-@use "../variables";
-
-.brand {
-  display: block;
-  width: variables.$brandWidth;
-  height: variables.$brandHeight;
-
-  svg,
-  img {
-    display: block;
-    width: variables.$brandWidth;
-    height: variables.$brandHeight;
-  }
-
-  .knockout & {
-    @media screen {
-      .fill-primary {
-        fill: variables.$white;
-      }
-
-      .fill-grey {
-        fill: rgba(variables.$white, 0.8);
-      }
-    }
-  }
-}
-
-figure {
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  width: calc(100% - variables.$innerMedium * 2);
-  margin: auto;
-
-  @container (min-width: #{variables.$screen-md}) {
-    width: calc(100% - variables.$innerLarge * 3);
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    width: calc(100% - variables.$innerLarge * 4);
-  }
-
-  &-full { width: auto; }
-  &-larger { max-width: variables.$containerLarger; }
-  &-large { max-width: variables.$containerLarge; }
-  &-medium { max-width: variables.$containerMedium; }
-  &-small { max-width: variables.$containerSmall; }
-  &-narrow { max-width: variables.$containerNarrow; }
-}
-
-.section {
-  padding: variables.$sectionMedium 0;
-
-  &-small {  padding: variables.$sectionSmall  unset; }
-  &-medium { padding: variables.$sectionMedium unset; }
-  &-large {  padding: variables.$sectionLarge  unset; }
-
-  @container (min-width: #{variables.$screen-md}) {
-    padding: (variables.$sectionMedium * 1.5) unset;
-
-    &-small { padding: (variables.$sectionSmall * 1.5) unset; }
-    &-medium { padding: (variables.$sectionMedium * 1.5) unset; }
-    &-large { padding: (variables.$sectionLarge * 1.5) unset; }
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    padding: (variables.$sectionMedium * 2) 0;
-
-    &-small { padding: (variables.$sectionSmall * 2) 0; }
-    &-medium { padding: (variables.$sectionMedium * 2) 0; }
-    &-large { padding: (variables.$sectionLarge * 2) 0; }
-  }
-
-  &-zero-top {    padding-top:    unset; }
-  &-zero-bottom { padding-bottom: unset; }
-}
-
-.inner {
-  padding: variables.$innerMedium;
-
-  &-largest {  padding: variables.$innerLargest;  }
-  &-larger {   padding: variables.$innerLarger;   }
-  &-large {    padding: variables.$innerLarge;    }
-  &-small {    padding: variables.$innerSmall;    }
-  &-smaller {  padding: variables.$innerSmaller;  }
-  &-smallest { padding: variables.$innerSmallest; }
-
-  @container (min-width: #{variables.$screen-md}) {
-    padding: (variables.$innerMedium * 1.5);
-
-    &-largest {  padding: (variables.$innerLargest * 1.25);  }
-    &-larger {   padding: (variables.$innerLarger * 1.25);   }
-    &-large {    padding: (variables.$innerLarge * 1.25);    }
-    &-small {    padding: (variables.$innerSmall * 1.25);    }
-    &-smaller {  padding: (variables.$innerSmaller * 1.25);  }
-    &-smallest { padding: (variables.$innerSmallest * 1.25); }
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    padding: (variables.$innerMedium * 2);
-
-    &-largest {  padding: (variables.$innerLargest * 1.5);  }
-    &-larger {   padding: (variables.$innerLarger * 1.5);   }
-    &-large {    padding: (variables.$innerLarge * 1.5);    }
-    &-small {    padding: (variables.$innerSmall * 1.5);    }
-    &-smaller {  padding: (variables.$innerSmaller * 1.5);  }
-    &-smallest { padding: (variables.$innerSmallest * 1.5); }
-  }
-
-  &-zero-x { padding-left: unset; padding-right: unset; }
-  &-zero-y { padding-top:  unset; padding-top:   unset; }
-}
-
-.rounded {
-  border-radius: variables.$borderRadius;
-
-  &-top {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &-bottom {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-}
-
-.border {
-  border-style: solid;
-  border-width: variables.$borderWidth;
-
-  &-thin { border-width: 0.0625em; }
-  &-regular { border-width: variables.$borderWidth; }
-  &-thick { border-width: variables.$borderThick; }
-  &-thicker { border-width: variables.$borderThicker; }
-
-  &-top {
-    border-right-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0;
-  }
-
-  &-right {
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0;
-  }
-
-  &-bottom {
-    border-top-width: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-  }
-
-  &-left {
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-  }
-}

resources/css/global/mixins/_generate-colour-classes.scss

@@ -1,39 +0,0 @@
-@use "text-contrast";
-@use "../variables";
-
-@use "sass:color";
-
-@mixin generate_colour_classes($name, $hex) {
-  .#{$name} {
-    color: $hex;
-  }
-
-  .fill-#{$name} {
-    fill: $hex;
-  }
-
-  .border-#{$name} {
-    border-color: $hex;
-  }
-
-  @media screen {
-    .bg-#{$name} {
-      background-color: $hex;
-
-      ::selection {
-        @include text-contrast.text_contrast(color.invert($hex));
-        background: color.invert($hex);
-        @if($name == "white") {
-          color: variables.$white;
-          background: variables.$primary;
-        } @else if($name == "black") {
-          color: variables.$white;
-          background: variables.$primary-lighter;
-        } @else {
-          @include text-contrast.text_contrast(color.invert($hex));
-          background: color.invert($hex);
-        }
-      }
-    }
-  }
-}

resources/css/global/mixins/_text-contrast.scss

@@ -1,17 +0,0 @@
-@use "sass:color";
-@use "sass:math";
-
-@use "../variables";
-
-@mixin text-contrast($n, $dark: variables.$black, $light: variables.$white, $cutoff: 1.667) {
-  $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
-  $light-color: math.round((color.channel(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$white, "blue") * 114), 1000));
-
-  @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
-    color: $light;
-  }
-
-  @else {
-    color: $dark;
-  }
-}

resources/css/global/variables/_colours.scss

@@ -1,109 +0,0 @@
-@use "sass:color";
-
-$wpblue: #2271b1;
-
-//== Status
-$success: #39b54a;
-$error: #be1e2d;
-$alert: #eed202;
-
-//== Brand Colours
-$primary: #337ab7;
-$secondary: #5bc0de;
-$tertiary: color.invert($primary);
-$quaternary: color.invert($secondary);
-
-//== Shades
-$white:               #FFFFFF;
-$grey:                #808080;
-$black:               #000000;
-
-//== Primary Tints
-$primary-darkest: color.adjust($primary, $lightness: -45%);
-$primary-darker: color.adjust($primary, $lightness: -30%);
-$primary-dark: color.adjust($primary, $lightness: -15%);
-$primary-light: color.adjust($primary, $lightness: 15%);
-$primary-lighter: color.adjust($primary, $lightness: 30%);
-$primary-lightest: color.adjust($primary, $lightness: 45%);
-
-//== Secondary Tints
-$secondary-darkest: color.adjust($secondary, $lightness: -45%);
-$secondary-darker: color.adjust($secondary, $lightness: -30%);
-$secondary-dark: color.adjust($secondary, $lightness: -15%);
-$secondary-light: color.adjust($secondary, $lightness: 15%);
-$secondary-lighter: color.adjust($secondary, $lightness: 30%);
-$secondary-lightest: color.adjust($secondary, $lightness: 45%);
-
-//== Tertiary Tints
-$tertiary-darkest: color.adjust($tertiary, $lightness: -45%);
-$tertiary-darker: color.adjust($tertiary, $lightness: -30%);
-$tertiary-dark: color.adjust($tertiary, $lightness: -15%);
-$tertiary-light: color.adjust($tertiary, $lightness: 15%);
-$tertiary-lighter: color.adjust($tertiary, $lightness: 30%);
-$tertiary-lightest: color.adjust($tertiary, $lightness: 45%);
-
-//== quaternary Tints
-$quaternary-darkest: color.adjust($quaternary, $lightness: -45%);
-$quaternary-darker: color.adjust($quaternary, $lightness: -30%);
-$quaternary-dark: color.adjust($quaternary, $lightness: -15%);
-$quaternary-light: color.adjust($quaternary, $lightness: 15%);
-$quaternary-lighter: color.adjust($quaternary, $lightness: 30%);
-$quaternary-lightest: color.adjust($quaternary, $lightness: 45%);
-
-//== six shades of grey
-$grey-darkest:        color.adjust(grey, $lightness: -40%);
-$grey-darker:         color.adjust(grey, $lightness: -25%);
-$grey-dark:           color.adjust(grey, $lightness: -10%);
-$grey-light:          color.adjust(grey, $lightness: 10%);
-$grey-lighter:        color.adjust(grey, $lightness: 25%);
-$grey-lightest:       color.adjust(grey, $lightness: 40%);
-
-//## Colour Array (used in generating colour classes).
-$colors: (
-  // shades
-  "black":     $black,
-  "grey-darkest": $grey-darkest,
-  "grey-darker": $grey-darker,
-  "grey-dark": $grey-dark,
-  "grey-light": $grey-light,
-  "grey-lighter": $grey-lighter,
-  "grey-lightest": $grey-lightest,
-  "white":     $white,
-  // status
-  "error":      $error,
-  "success":    $success,
-  "alert":      $alert,
-  // brand
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "tertiary":   $tertiary,
-  "quaternary":   $quaternary,
-  // primary tints
-  "primary-darkest":  $primary-darkest,
-  "primary-darker":   $primary-darker,
-  "primary-dark":     $primary-dark,
-  "primary-light":    $primary-light,
-  "primary-lighter":  $primary-lighter,
-  "primary-lightest": $primary-lightest,
-  // secondary tints
-  "secondary-darkest":  $secondary-darkest,
-  "secondary-darker":   $secondary-darker,
-  "secondary-dark":     $secondary-dark,
-  "secondary-light":    $secondary-light,
-  "secondary-lighter":  $secondary-lighter,
-  "secondary-lightest": $secondary-lightest,
-  // tertiary tints
-  "tertiary-darkest":  $tertiary-darkest,
-  "tertiary-darker":   $tertiary-darker,
-  "tertiary-dark":     $tertiary-dark,
-  "tertiary-light":    $tertiary-light,
-  "tertiary-lighter":  $tertiary-lighter,
-  "tertiary-lightest": $tertiary-lightest,
-  // quaternary tints
-  "quaternary-darkest":  $quaternary-darkest,
-  "quaternary-darker":   $quaternary-darker,
-  "quaternary-dark":     $quaternary-dark,
-  "quaternary-light":    $quaternary-light,
-  "quaternary-lighter":  $quaternary-lighter,
-  "quaternary-lightest": $quaternary-lightest,
-);

resources/css/global/variables/_fonts.scss

@@ -1,2 +0,0 @@
-$font: "Ubuntu", Helvetica, Arial, sans-serif;
-$blockquote: serif;

resources/css/plugins/_contact-form-7.scss

@@ -1,24 +0,0 @@
-@use "../global/variables";
-
-.wpcf7 .screen-reader-response {
-  display: none;
-}
-
-.wpcf7-response-output {
-  @extend p !optional;
-  @extend .container !optional;
-  @extend .container-narrow !optional;
-
-  padding: 1em 0 0;
-  margin-top: 2em;
-  border: 1px solid variables.$grey-light;
-  border-width: 1px 0 0;
-
-  .knockout & {
-    border-color: rgba(variables.$white, 0.3);
-  }
-}
-
-.wpcf7-display-none {
-  display: none;
-}

resources/js/app.js

@@ -1,12 +0,0 @@
-import.meta.glob([
-  '../images/**',
-  '../fonts/**',
-]);
-
-import Header from '../views/sections/header/header.js';
-import LazyLoad from './lib/Lazy.js';
-import BadEggLightbox from './lib/BadEggLightbox';
-
-Header();
-LazyLoad();
-BadEggLightbox();

resources/js/blocks/components/AttachmentImage.jsx

@@ -1,46 +0,0 @@
-import { useSelect } from '@wordpress/data';
-
-/**
- * AttachmentImage
- *
- * This component is used to display an image from the media library.
- * It's meant as a JS companion to the PHP function `wp_get_attachment_image()`.
- *
- * @link https://www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
- *
- * @param {object} props
- * @param {number} props.imageId The ID of the image to display.
- * @param {string} props.size The size of the image to display. Defaults to 'full'.
- * @returns {*} React JSX
- */
-export default function AttachmentImage({ imageId, size = 'full' }) {
-
-	const { image } = useSelect((select) => ({
-		image: select('core').getEntityRecord('postType', 'attachment', imageId),
-	}));
-
-	const imageAttributes = () =>{
-		let attributes = {
-			src: image.source_url,
-			alt: image.alt_text,
-			className: `attachment-${size} size-${size}`,
-			width: image.media_details.width,
-			height: image.media_details.height,
-		};
-		if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
-			attributes.src = image.media_details.sizes[size].source_url;
-			attributes.width = image.media_details.sizes[size].width;
-			attributes.height = image.media_details.sizes[size].height;
-		}
-
-		return attributes;
-	};
-
-	return (
-		<>
-			{image && (
-				<img {...imageAttributes()} />
-			)}
-		</>
-	)
-}

resources/js/blocks/components/BackgroundImage.jsx

@@ -1,54 +0,0 @@
-import { select } from '@wordpress/data';
-
-/**
- * BackgroundImage
- *
- * This component is used to display a background image for a block based on its attributes.
- *
- * @param {object} props
- * @param {string} props.background_url The desired full size url.
- * @param {string} props.background_url_lazy Tiny lazy url.
- * @param {boolean} props.background_lazy Whether or not to lazy load the background image.
- * @param {object} props.background_position x and y coordinates as decimals from 0 to 1.
- * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
- * @param {number} props.background_opacity The opacity value applied to the image.
- * @returns {*} React JSX
- */
-export default function BackgroundImage({
-  background_url,
-  background_url_lazy,
-  background_lazy,
-  background_position = 'center',
-  background_fixed = false,
-  background_opacity = 70,
-  disableLazyBG = false,
-}) {
-
-  if (background_url) {
-    let styles = {
-      backgroundImage: `url(${background_url})`,
-      backgroundPosition: `${ background_position.x * 100}% ${ background_position.y * 100}%`,
-      backgroundSize: 'cover',
-      backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
-      opacity: Number(background_opacity) * 0.01,
-    }
-
-    let attributes = {
-      className: 'badegg-block-background',
-      style: styles,
-    };
-
-    if(background_lazy && !disableLazyBG) {
-      attributes['data-bg'] = background_url;
-      attributes.style.backgroundImage = `url(${background_url_lazy})`;
-      attributes.className += ' lazy-bg';
-    }
-
-    return (
-      <div { ...attributes } />
-    )
-  } else {
-    return;
-  }
-
-}

resources/js/blocks/components/BlockSettings.jsx

@@ -1,260 +0,0 @@
-/**
- * BlockSettings
- *
- * Bundles the <InspectorControls> used for several blocks
- * *
- * @param {object} props
- * @param {number} props.attributes the data
- * @param {string} props.setAttributes the state
- * @returns {*} React JSX
- */
-
-import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import apiFetch from '@wordpress/api-fetch';
-
-import {
-	Panel,
-	PanelBody,
-	PanelRow,
-	SelectControl,
-	ToggleControl,
-	RangeControl,
-	ColorPalette,
-  FocalPointPicker,
-	Button,
-	Spinner,
-} from '@wordpress/components';
-
-import {
-	InspectorControls,
-  BlockControls,
-  AlignmentToolbar,
-	MediaUpload,
-	MediaUploadCheck,
-} from '@wordpress/block-editor';
-
-export default function BlockSettings({ attributes, setAttributes }) {
-	const [ configOptions, setConfigOptions ] = useState([]);
-	const [ isLoading, setIsLoading ] = useState(true);
-
-  useEffect( () => {
-		let isMounted = true;
-
-		apiFetch( { path: '/badegg/v1/blocks/config' } )
-			.then( ( data ) => {
-				if ( isMounted ) {
-					setConfigOptions( data );
-					setIsLoading( false );
-				}
-			} )
-			.catch( () => {
-				if ( isMounted ) {
-					setConfigOptions( null );
-					setIsLoading( false );
-				}
-			} );
-
-		return () => {
-			isMounted = false;
-		};
-	}, [] );
-
-  if ( isLoading ) {
-		return (
-			<InspectorControls>
-				<Panel>
-					<PanelBody>
-						<Spinner />
-					</PanelBody>
-				</Panel>
-			</InspectorControls>
-		);
-	}
-
-	if ( ! configOptions ) {
-		return null;
-	}
-
-  const {
-    alignment,
-		container_width,
-		padding_top,
-		padding_bottom,
-		background_hex,
-		background_tint,
-		background_image,
-    background_url,
-    background_lazy,
-    background_position,
-		background_opacity,
-		background_contrast,
-		background_fixed,
-	} = attributes;
-
-	return (
-    <>
-      <BlockControls>
-        <AlignmentToolbar
-          value={ alignment }
-          onChange={(value) => setAttributes({alignment: value})}
-        />
-      </BlockControls>
-      <InspectorControls>
-        <Panel className="badegg-components-panel">
-          <PanelBody title={ __("Spacing", "badegg") }>
-            <SelectControl
-              label={ __("Container Width", "badegg") }
-              value={ container_width }
-              options={ configOptions.container }
-              onChange={ (value) => setAttributes({ container_width: value }) }
-              __next40pxDefaultSize={ true }
-              __nextHasNoMarginBottom={ true }
-            />
-            <ToggleControl
-              label={ __('Top padding', 'badegg') }
-              checked={ padding_top }
-              onChange={(value) => setAttributes({ padding_top: value }) }
-              __nextHasNoMarginBottom
-            />
-            <ToggleControl
-              label={ __('Bottom padding', 'badegg') }
-              checked={ padding_bottom }
-              onChange={(value) => setAttributes({ padding_bottom: value }) }
-              __nextHasNoMarginBottom
-            />
-          </PanelBody>
-          <PanelBody title={ __("Background", "badegg") }>
-            <p style={{ textTransform: 'uppercase', fontSize: '11px' }} className="components-truncate components-text components-input-control__label">
-              { __('Colour', 'badegg') }
-            </p>
-            <ColorPalette
-              colors={ configOptions.colours }
-              value={ background_hex }
-              clearable={ false }
-              disableCustomColors={ true }
-              style={{ marginBottom: '16px' }}
-              onChange={ ( value ) => {
-                let slug, hex, selected = '';
-
-                if(value) {
-                  selected = configOptions.colours.find(
-                    ( c ) => c.color === value
-                  );
-
-                  hex = value;
-                }
-
-                if(selected) {
-                  slug = selected.slug;
-                }
-
-                let colourAttributes = {
-                  background_colour: slug,
-                  background_hex: hex,
-                };
-
-                if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
-                  colourAttributes.background_tint = '0';
-                }
-
-                setAttributes( colourAttributes );
-
-              } }
-            />
-
-            { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
-              <SelectControl
-                label={ __("Tint", "badegg") }
-                value={ background_tint }
-                options={ configOptions.tints }
-                onChange={ (value) => setAttributes({ background_tint: value }) }
-                __next40pxDefaultSize={ true }
-                __nextHasNoMarginBottom={ true }
-              />
-            ) : null }
-
-            <ToggleControl
-              label={ __('Text Contrast', 'badegg') }
-              checked={ background_contrast }
-              onChange={(value) => setAttributes({ background_contrast: value }) }
-              __nextHasNoMarginBottom
-            />
-
-            { background_image != 0 && (
-              <>
-                <ToggleControl
-                  label={ __('Fixed Position', 'badegg') }
-                  checked={ background_fixed }
-                  onChange={(value) => setAttributes({ background_fixed: value }) }
-                  __nextHasNoMarginBottom
-                />
-                <ToggleControl
-                  label={ __('Lazy Loaded', 'badegg') }
-                  checked={ background_lazy }
-                  onChange={(value) => setAttributes({ background_lazy: value }) }
-                  __nextHasNoMarginBottom
-                />
-                <FocalPointPicker
-                  url={ background_url }
-                  value={ background_position }
-                  onDragStart={ (value) => setAttributes({ background_position: value }) }
-                  onDrag={ (value) => setAttributes({ background_position: value }) }
-                  onChange={ (value) => setAttributes({ background_position: value }) }
-                  __nextHasNoMarginBottom
-                />
-                <RangeControl
-                  __next40pxDefaultSize
-                  __nextHasNoMarginBottom
-                  label={ __("Opacity", "badegg") }
-                  value={ background_opacity }
-                  onChange={ ( value ) => setAttributes({ background_opacity: value }) }
-                  min={ 5 }
-                  max={ 100 }
-                />
-              </>
-            )}
-
-            <PanelRow>
-              <MediaUploadCheck>
-                <MediaUpload
-                  onSelect={ (media) => setAttributes({
-                    background_image: media.id,
-                    background_url: media.sizes.hero.url,
-                    background_url_lazy: media.sizes.lazy.url,
-                  })}
-                  allowedTypes={ ['image'] }
-                  value={ background_image }
-                  render={ ({ open }) => (
-                    <Button
-                      onClick={ open }
-                      variant="primary"
-                    >
-                      { background_image ?  __("Replace image", "badegg") :  __("Choose image", "badegg") }
-                    </Button>
-                  )}
-                />
-              </MediaUploadCheck>
-
-              { background_image != 0 && (
-                <Button
-                  onClick={ () => setAttributes({
-                      background_image: 0,
-                      background_url: '',
-                      background_url_lazy: '',
-                  }) }
-                  isDestructive
-                  variant="secondary"
-                >
-                  { __("Remove image", "badegg") }
-                </Button>
-              )}
-            </PanelRow>
-
-          </PanelBody>
-        </Panel>
-      </InspectorControls>
-    </>
-	);
-}

resources/js/blocks/lib/classNames.js

@@ -1,59 +0,0 @@
-export function containerClassNames(attributes, extraClasses = [])
-{
-
-  let classNames = [
-    'container',
-  ];
-
-  if('container_width' in attributes && !['', '0'].includes(attributes.container_width))
-    classNames.push(`container-${attributes.container_width}`);
-
-  if('alignment' in attributes)
-    classNames.push(`align-${attributes.alignment}`);
-
-  // combine arrays
-  classNames = classNames.concat(extraClasses);
-
-  return classNames;
-}
-
-export function sectionClassNames(attributes, defaultClasses = '', extraClasses = [])
-{
-  let classNames = [
-    'section',
-  ];
-
-  if('padding_top'in attributes && !attributes.padding_top)
-    classNames.push('section-zero-top');
-
-  if('padding_bottom'in attributes && !attributes.padding_bottom)
-    classNames.push('section-zero-bottom');
-
-  if('background_hex' in attributes && attributes.background_hex) {
-    let bg = `bg-${ attributes.background_colour }`;
-
-    if(
-      'background_tint' in attributes &&
-      attributes.background_tint != 0 &&
-      !['white', 'black'].includes(attributes.background_colour)
-    ) {
-      bg += `-${ attributes.background_tint }`;
-    }
-
-    classNames.push(bg);
-  }
-
-  if('background_image' in attributes && attributes.background_image != '0')
-    classNames.push('has-bg-image');
-
-  if('background_contrast' in attributes && attributes.background_contrast)
-    classNames.push('knockout');
-
-  // combine arrays
-  classNames = classNames.concat(defaultClasses).concat(extraClasses);
-
-  // remove duplicate items
-  classNames = [ ...new Set(classNames) ];
-
-  return classNames;
-}

resources/js/editor.js

@@ -1,31 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-import blockParents from '../json/block-parents.json';
-import blockWhitelist from '../json/block-core-whitelist.json';
-import.meta.glob('../views/blocks/**/{index.jsx,index.js}', { eager: true })
-
-domReady(() => {
-  const restrictEditorParentBlocks = (settings, name) => {
-    if (blockWhitelist.includes(name)) {
-      settings.parent = blockParents;
-    }
-
-    return settings
-  }
-
-  const coreInnerBlocks = (settings, name) => {
-    if (['core/media-text', 'core/details', 'core/quote'].includes(name)) {
-
-      settings.allowedBlocks = [
-        'core/paragraph',
-        'core/heading',
-        'core/list',
-      ];
-    }
-
-    return settings;
-  }
-
-  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks );
-  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks );
-
-});

resources/js/lib/BadEggLightbox.js

@@ -1,81 +0,0 @@
-export default function BadEggLightbox()
-{
-  const lightboxes = document.querySelectorAll(".badegg-lightbox");
-
-  if(!lightboxes) return;
-
-  lightboxes.forEach(lightbox => {
-    const fullSize = lightbox.getAttribute('href');
-    const thumbnail = lightbox.querySelector("img");
-
-    lightbox.addEventListener("click", (e) => {
-      e.preventDefault();
-      // console.log(e);
-
-      modal(fullSize, thumbnail);
-    });
-
-  });
-}
-
-function modal(src = '', img = '')
-{
-  if(!src || !img) {
-    alert('Error: No image defined');
-    return;
-  }
-
-  const title = img.getAttribute("title") || '';
-  const alt = img.getAttribute("alt") || '';
-
-  const body = document.querySelector("body");
-
-  let template = `
-    <img id="badegg-lightbox-image" src="${src}" tabindex="0" title="${title}" alt="${alt}" />
-    <button id="badegg-lightbox-close" aria-label="close" aria-expanded="true" tabindex="0">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-        <line x2="32" y2="32"/>
-        <line x1="32" y2="32"/>
-      </svg>
-    </button>
-    <div id="badegg-lightbox-overlay"></div>
-  `;
-
-  let modal = document.createElement("div");
-
-  modal.setAttribute("id", "badegg-lightbox-modal");
-  modal.setAttribute("aria-modal", "true");
-  modal.innerHTML = template;
-
-  body.appendChild(modal);
-
-  setTimeout(() => modal.classList.add("open"), 100);
-
-  document.getElementById("badegg-lightbox-image").focus();
-
-  modalDeleteListener();
-}
-
-function modalDeleteListener()
-{
-  const modal = document.getElementById("badegg-lightbox-modal");
-
-  if(!modal) return;
-
-  const modalClose = document.getElementById("badegg-lightbox-close");
-  const modalOverlay = document.getElementById("badegg-lightbox-overlay");
-
-  modalClose.addEventListener("click", (e) => {
-    modal.remove();
-  });
-
-  modalOverlay.addEventListener("click", (e) => {
-    modal.remove();
-  });
-
-  document.addEventListener("keydown", (e) => {
-    if(e.key === 'Escape') {
-      modal.remove();
-    }
-  });
-}

resources/js/lib/Lazy.js

@@ -1,54 +0,0 @@
-export default function LazyLoadInit()
-{
-  document.addEventListener('DOMContentLoaded', LazyLoad());
-}
-
-function LazyLoad() {
-
-  const lazyElements = [].slice.call(
-    document.querySelectorAll('img.lazy, .lazy-bg')
-  );
-
-  if ('IntersectionObserver' in window) {
-    const lazyObserver = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => {
-        if (!entry.isIntersecting) return;
-
-        const el = entry.target;
-
-        // Handle <img>
-        if (el.tagName === 'IMG') {
-          el.src = el.dataset.src;
-
-          if (el.dataset.srcset) {
-            el.srcset = el.dataset.srcset;
-          }
-
-          el.classList.remove('lazy');
-        }
-
-        // Handle background images
-        else {
-          if (el.dataset.bg) {
-            el.style.backgroundImage = `url("${el.dataset.bg}")`;
-            el.classList.remove('lazy-bg');
-            el.classList.add('lazy-loaded');
-          }
-        }
-
-        observer.unobserve(el);
-      });
-    });
-
-    lazyElements.forEach(el => lazyObserver.observe(el));
-  } else {
-    // Optional fallback: load everything immediately
-    lazyElements.forEach(el => {
-      if (el.tagName === 'IMG' && el.dataset.src) {
-        el.src = el.dataset.src;
-      } else if (el.dataset.bg) {
-        el.style.backgroundImage = `url("${el.dataset.bg}")`;
-      }
-    });
-  }
-}

resources/json/block-attributes.json

@@ -1,64 +0,0 @@
-{
-  "container_width": {
-      "type": "string",
-      "default": ""
-  },
-  "alignment": {
-      "type": "string"
-  },
-  "padding_top": {
-      "type": "boolean",
-      "default": true
-  },
-  "padding_bottom": {
-      "type": "boolean",
-      "default": true
-  },
-  "background_colour": {
-      "type": "string",
-      "default": ""
-  },
-  "background_hex": {
-      "type": "string",
-      "default": ""
-  },
-  "background_tint": {
-      "type": "string",
-      "default": "0"
-  },
-  "background_image": {
-      "type": "integer",
-      "default": 0
-  },
-  "background_url": {
-    "type": "string",
-    "default": ""
-  },
-  "background_url_lazy": {
-    "type": "string",
-    "default": ""
-  },
-  "background_lazy": {
-    "type": "boolean",
-    "default": true
-  },
-  "background_opacity": {
-      "type": "integer",
-      "default": 30
-  },
-  "background_position": {
-      "type": "object",
-      "default": {
-        "x": 0.5,
-        "y": 0.5
-      }
-  },
-  "background_fixed": {
-      "type": "boolean",
-      "default": false
-  },
-  "background_contrast": {
-      "type": "boolean",
-      "default": false
-  }
-}

resources/json/block-core-whitelist.json

@@ -1,22 +0,0 @@
-[
-  "core/separator",
-  "core/spacer",
-
-  "core/gallery",
-  "core/image",
-  "core/media-text",
-  "core/audio",
-  "core/video",
-  "core/embed",
-
-  "core/footnotes",
-  "core/heading",
-  "core/list",
-  "core/details",
-  "core/list-item",
-  "core/missing",
-  "core/paragraph",
-  "core/quote",
-  "core/pullquote",
-  "core/verse"
-]

resources/json/block-parents.json

@@ -1,4 +0,0 @@
-[
-  "acf/badegg-editor",
-  "badegg/article"
-]

resources/scripts/app.js

@@ -0,0 +1,18 @@
+import domReady from '@roots/sage/client/dom-ready';
+import blocks from './blocks.js';
+import Header from './sections/header.js';
+import LazyLoad from './lib/Lazy.js';
+
+/**
+ * Application entrypoint
+ */
+domReady(async () => {
+  LazyLoad();
+  blocks();
+  Header();
+});
+
+/**
+ * @see {@link https://webpack.js.org/api/hot-module-replacement/}
+ */
+if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/scripts/blocks.js

@@ -0,0 +1,6 @@
+import BadExample from "./blocks/BadExample";
+
+export default function()
+{
+  BadExample();
+}

resources/scripts/blocks/BadExample.js

@@ -0,0 +1,4 @@
+export default function BadExample()
+{
+
+}

resources/scripts/editor.js

@@ -0,0 +1,9 @@
+/**
+ * @see {@link https://bud.js.org/extensions/bud-preset-wordpress/editor-integration/filters}
+ */
+roots.register.filters('@scripts/filters');
+
+/**
+ * @see {@link https://webpack.js.org/api/hot-module-replacement/}
+ */
+if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/scripts/filters/button.filter.js

@@ -0,0 +1,25 @@
+/**
+ * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
+ */
+export const hook = 'blocks.registerBlockType';
+
+/**
+ * Filter handle
+ */
+export const name = 'sage/button';
+
+/**
+ * Filter callback
+ *
+ * @param {object} settings
+ * @param {string} name
+ * @returns modified settings
+ */
+export function callback(settings, name) {
+  if (name !== 'core/button') return settings;
+
+  return {
+    ...settings,
+    styles: [{ label: 'Outline', name: 'outline' }],
+  };
+}

resources/scripts/lib/Lazy.js

@@ -0,0 +1,33 @@
+export default function LazyLoadInit()
+{
+  document.addEventListener('DOMContentLoaded', LazyLoad());
+}
+
+function LazyLoad() {
+
+  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
+
+  if ('IntersectionObserver' in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+
+          if(lazyImage.dataset.srcset) {
+            lazyImage.srcset = lazyImage.dataset.srcset;
+          }
+
+          lazyImage.classList.remove('lazy');
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to a more compatible method here
+  }
+}

resources/scripts/sections/header.js

@@ -24,8 +24,6 @@ export default function Header() {
     const position = body.offsetTop;
     const header = document.querySelector(".site-header");
 
-    if(!header) return;
-
     if (scrolled > position + header.offsetHeight) {
       body.classList.add("scrolled");
     } else {

resources/styles/app.scss

@@ -0,0 +1,26 @@
+// Global Variables, Mixins, and Framework
+@import "global/variables";
+@import "global/mixins";
+@import "global/fonts";
+@import "global/typography";
+@import "global/framework";
+
+// Third Party Plugins
+@import "plugins/contact-form-7";
+@import "plugins/mce";
+
+// Sections
+@import "sections/header";
+@import "sections/footer";
+
+// Components
+@import "components/forms";
+@import "components/button";
+@import "components/card";
+
+// Blocks
+@import "blocks/BadExample";
+
+// Page Styles
+@import "views/page";
+

resources/styles/components/_button.scss

@@ -1,6 +1,3 @@
-@use "../global/variables/fonts";
-@use "../global/variables/colours";
-
 button {
   &%block,
   &.block {
@@ -13,20 +10,20 @@ button {
 
 button,
 input[type="submit"] {
-  &.btn {
+  &.button {
     appearance: none;
   }
 }
 
 %button,
-.btn {
+.button {
   display: inline-block;
   padding: 0.5em 1.25em;
-  border: 0.125em solid colours.$black;
+  border: 0.125em solid $black;
   border-radius: 0.25em;
-  background-color: colours.$black;
-  color: colours.$white;
-  font-family: fonts.$font;
+  background-color: $black;
+  color: $white;
+  font-family: $font;
   font-weight: 700;
   text-decoration: none;
   white-space: normal;
@@ -34,45 +31,45 @@ input[type="submit"] {
   transition: 300ms ease all;
 
   .knockout & {
-    background-color: colours.$white;
-    border-color: colours.$white;
+    background-color: $white;
+    border-color: $white;
     color: currentcolor;
   }
 
   &:hover,
   &:focus {
-    color: colours.$white;
+    color: $white;
     text-decoration: none;
-    background-color: rgba(colours.$black, 0.5);
-    border-color: rgba(colours.$black, 0.5);
+    background-color: rgba($black, 0.5);
+    border-color: rgba($black, 0.5);
 
     .knockout & {
-      background-color: rgba(colours.$white, 0.5);
-      border-color: rgba(colours.$white, 0.5);
+      background-color: rgba($white, 0.5);
+      border-color: rgba($white, 0.5);
       color: currentcolor;
     }
   }
 
   &.outline {
-    border-color: colours.$black;
+    border-color: $black;
     background-color: transparent;
-    color: colours.$black;
+    color: $black;
 
     &:hover,
     &:focus {
-      background-color: colours.$black;
-      color: colours.$white;
+      background-color: $black;
+      color: $white;
     }
 
     .knockout & {
       @media screen {
-        border-color: colours.$white;
-        color: colours.$white;
+        border-color: $white;
+        color: $white;
 
         &:hover,
         &:focus {
-          background-color: colours.$white;
-          color: colours.$black;
+          background-color: $white;
+          color: $black;
         }
       }
     }
@@ -102,10 +99,10 @@ input[type="submit"] {
   &.bigger { font-size: 1.5em; }
 }
 
-.btn-wrap {
+.button-wrap {
   margin: 1.5em -0.25em -0.25em;
 
-  .btn {
+  .button {
     margin: 0.25em;
   }
 }

resources/styles/components/_forms.scss

@@ -1,28 +1,28 @@
-@use "../global/variables/fonts";
-@use "../global/variables/breakpoints";
-@use "../global/variables/colours";
+textarea {
+  min-height: 10.375em;
+}
 
 input,
 textarea {
-  color: colours.$grey;
+  color: $grey;
   background: white;
   font-weight: 400;
   font-size: 1em;
-  font-family: fonts.$font;
+  font-family: $font;
   width: 100%;
   padding: 0.875em 1em;
   margin: 0 0 1em;
   // border-radius: 0.125em;
-  border: 0.0625em solid rgba(colours.$black, 0.1);
+  border: 0.0625em solid rgba($black, 0.1);
   outline: none;
   transition: all 300ms ease;
 
   &::placeholder {
-    color: colours.$grey-light;
+    color: $grey-light;
   }
 
   &:focus {
-    box-shadow: 0 0.25em 0.5em rgba(colours.$black, 0.1);
+    box-shadow: 0 0.25em 0.5em rgba($black, 0.1);
   }
 }
 
@@ -71,11 +71,11 @@ select {
     max-width: 100%;
     width: 100%;
     margin: 0;
-    font-family: fonts.$font;
+    font-family: $font;
   }
   /* stylelint-enable selector-class-pattern */
 
-  @media (min-width: breakpoints.$screen-sm) {
+  @media (min-width: $screen-sm) {
     &.half {
       flex: 0 0 calc(50% - 1em);
       max-width: calc(50% - 1em);
@@ -107,7 +107,7 @@ select {
     margin: 2em 0 0;
   }
 
-  @media (min-width: breakpoints.$screen-sm) {
+  @media (min-width: $screen-sm) {
     display: flex;
     flex-wrap: wrap;
 
@@ -164,8 +164,8 @@ select {
       }
 
       &-not-valid-tip {
-        background: colours.$error;
-        color: colours.$white;
+        background: $error;
+        color: $white;
         padding: 0.5em 1em;
         border-radius: 0 0 0.5em 0.5em;
         font-weight: 700;
@@ -177,11 +177,11 @@ select {
         width: calc(100% - 1em);
         flex: 0 0 calc(100% - 1em);
         text-align: center;
-        color: colours.$white;
-        font-family: fonts.$font;
+        color: $white;
+        font-family: $font;
         font-weight: 700;
-        background: colours.$black;
-        border: 0.125em solid colours.$white;
+        background: $black;
+        border: 0.125em solid $white;
         padding: 0.5em 1em;
         border-radius: 0.5em;
       }
@@ -207,7 +207,7 @@ select {
           display: block;
           width: 1.25em;
           height: 1.25em;
-          border: 0.125em solid colours.$black;
+          border: 0.125em solid $black;
           background: transparent;
           color: currentcolor;
 
@@ -250,15 +250,15 @@ select {
 
     &.sent {
       .wpcf7-response-output {
-        background: colours.$success;
-        border-color: colours.$white;
+        background: $success;
+        border-color: $white;
       }
     }
 
     &.invalid {
       .wpcf7-response-output {
-        background: colours.$error;
-        border-color: colours.$white;
+        background: $error;
+        border-color: $white;
       }
     }
 
@@ -277,7 +277,7 @@ select {
       .wpcf7 {
         &-checkbox {
           input[type="checkbox"] {
-            border-color: colours.$white;
+            border-color: $white;
           }
         }
       }

resources/styles/global/_fonts.scss

@@ -1,3 +1,5 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+
 /*
  * Roots Fonts Setup
  * https://roots.io/sage/docs/fonts-setup/
@@ -19,8 +21,8 @@
   font-family: 'Ubuntu';
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('~fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('~fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-italic - latin */
@@ -29,8 +31,8 @@
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight: 400;
-  src: url('../fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('../fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('~fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('~fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-700 - latin */
@@ -39,8 +41,8 @@
   font-family: 'Ubuntu';
   font-style: normal;
   font-weight: 700;
-  src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('../fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('~fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('~fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-700italic - latin */
@@ -49,6 +51,6 @@
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight: 700;
-  src: url('../fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('../fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('~fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('~fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

resources/styles/global/_framework.scss

@@ -0,0 +1,4 @@
+@import "framework/breakpoints";
+@import "framework/normalise";
+@import "framework/colours";
+@import "framework/spacing";

resources/styles/global/_mixins.scss

@@ -0,0 +1,4 @@
+@import "mixins/linear-gradient";
+@import "mixins/text-contrast";
+@import "mixins/generate-colour-classes";
+@import "mixins/generate-button-classes";

resources/styles/global/_typography.scss

@@ -1,11 +1,9 @@
-@use "variables";
-
 .wysiwyg {
-  > *:first-child {
+  *:first-child {
     margin-top: 0;
   }
 
-  > *:last-child {
+  *:last-child {
     margin-bottom: 0;
   }
 }
@@ -16,9 +14,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: variables.$primary;
+  color: $primary;
   font-weight: 700;
-  font-family: variables.$font;
+  font-family: $font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -29,7 +27,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: variables.$white;
+      color: $white;
     }
   }
 }
@@ -45,7 +43,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: variables.$screen-sm) {
+@media (min-width: $screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -60,8 +58,8 @@ p,
 li,
 td,
 label {
-  color: variables.$grey-darker;
-  font-family: variables.$font;
+  color: $grey;
+  font-family: $font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -69,30 +67,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: variables.$white;
+      color: $white;
     }
   }
 }
 
 a {
-  color: variables.$primary;
+  color: $primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: variables.$primary-dark;
+    color: $primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: variables.$white;
+      color: $white;
 
       &:hover,
       &:focus {
-        color: variables.$primary-light;
+        color: $primary-light;
       }
     }
   }
@@ -110,6 +108,7 @@ ul,
 ol {
   margin: 0 0 0.7em;
   padding: 0 0 0 1.2em;
+  text-align: left;
 }
 
 .nolist {
@@ -125,20 +124,24 @@ ol {
 }
 
 hr {
-  margin: 2em auto;
+  margin: 1.5em auto 2em;
   height: 0;
-  border: 0 solid variables.$grey-light;
-  border-width: variables.$borderThin 0 0;
+  border: 0 solid $grey-light;
+  border-width: $borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: variables.$white;
+      border-color: $white;
     }
   }
 }
 
 .align {
-  &-left { text-align: left; }
-  &-centre, &-center { text-align: center; }
-  &-right { text-align: right; }
+  &-centre {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: right;
+  }
 }

resources/styles/global/_variables.scss

@@ -0,0 +1,3 @@
+@import "variables/colours";
+@import "variables/breakpoints";
+@import "variables/spacing";

resources/styles/global/framework/_breakpoints.scss

@@ -1,6 +1,4 @@
-@use "../variables";
-
-@each $label, $value in variables.$breakpoints {
+@each $label, $value in $breakpoints {
   .min-#{$label} {
     @media (min-width: $value) {
       display: none;

resources/styles/global/framework/_colours.scss

@@ -0,0 +1,9 @@
+::selection {
+  color: $white;
+  background: $primary;
+}
+
+@each $color, $hex in $colors {
+  @include generate_colour_classes($color, $hex);
+  @include generate_button_colors($color, $hex);
+}

resources/styles/global/framework/_normalise.scss

@@ -1,5 +1,3 @@
-@use "../variables";
-
 * {
   box-sizing: border-box;
   backface-visibility: hidden; // removes jagged edges on rotated elements
@@ -13,7 +11,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background: variables.$white;
+  background: $white;
 }
 
 .visually-hidden {
@@ -30,20 +28,8 @@ img {
   max-width: 100%;
   height: auto;
   transition: all 300ms ease;
-}
 
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-img.lazy,
-.lazy-bg,
-.lazy-loaded {
-  transition: all 300ms ease;
-}
-
-img.lazy,
-.lazy-bg {
-  filter: blur(0.25em);
+  &.lazy {
+    filter: blur(0.25em);
+  }
 }

resources/styles/global/framework/_spacing.scss

@@ -0,0 +1,110 @@
+.brand {
+  display: block;
+  width: $brandWidth;
+  height: $brandHeight;
+
+  svg,
+  img {
+    display: block;
+    width: $brandWidth;
+    height: $brandHeight;
+  }
+
+  .knockout & {
+    @media screen {
+      .fill-primary {
+        fill: $white;
+      }
+
+      .fill-grey {
+        fill: rgba($white, 0.8);
+      }
+    }
+  }
+}
+
+.container {
+  width: 90%;
+  margin: auto;
+
+  &-large { max-width: $containerLarge; }
+  &-medium { max-width: $containerMedium; }
+  &-small { max-width: $containerSmall; }
+  &-narrow { max-width: $containerNarrow; }
+}
+
+.section {
+  padding: $sectionMedium 0;
+
+  &-small { padding: $sectionSmall 0; }
+  &-medium { padding: $sectionMedium 0; }
+  &-large { padding: $sectionLarge 0; }
+
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
+}
+
+.inner {
+  padding: $innerMedium;
+
+  &-small { padding: $innerSmall; }
+  &-large { padding: $innerLarge; }
+
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
+  }
+}
+
+.rounded {
+  border-radius: $borderRadius;
+
+  &-top {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+
+.border {
+  border-style: solid;
+  border-width: $borderWidth;
+
+  &-thin { border-width: 0.0625em; }
+  &-regular { border-width: $borderWidth; }
+  &-thick { border-width: $borderThick; }
+  &-thicker { border-width: $borderThicker; }
+
+  &-top {
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-right {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-bottom {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  &-left {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+}

resources/styles/global/mixins/_generate-button-classes.scss

@@ -1,30 +1,28 @@
-@use "../variables";
-
 @use "sass:color";
 
 @mixin generate_button_colors($name, $hex) {
 
   $buttons: (
-    ".btn",
+    ".button",
     "button",
     "input[type=submit]",
   );
 
   @each $button in $buttons {
     #{$button}.#{$name} {
-      color: variables.$white;
+      color: $white;
       background: $hex;
       border-color: $hex;
 
       &:hover,
       &:focus {
-        color: variables.$white;
+        color: $white;
         background: color.adjust($hex, $lightness: 10%);
         border-color: color.adjust($hex, $lightness: 10%);
       }
     }
 
-    #{$button}.#{$name}.outline {
+    #{$button}.#{$name}.inverted {
       color: $hex;
       background: transparent;
       border-color: $hex;

resources/styles/global/mixins/_generate-colour-classes.scss

@@ -0,0 +1,26 @@
+@use "sass:color";
+
+@mixin generate_colour_classes($name, $hex) {
+  .#{$name} {
+    color: $hex;
+  }
+
+  .fill-#{$name} {
+    fill: $hex;
+  }
+
+  .border-#{$name} {
+    border-color: $hex;
+  }
+
+  @media screen {
+    .bg-#{$name} {
+      background-color: $hex;
+
+      ::selection {
+        @include text_contrast(color.invert($hex));
+        background: color.invert($hex);
+      }
+    }
+  }
+}

resources/styles/global/mixins/_text-contrast.scss

@@ -0,0 +1,15 @@
+@use "sass:color";
+@use "sass:math";
+
+@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.667) {
+  $brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
+  $light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
+
+  @if abs($brightness) < (math.div($light-color, $cutoff)) {
+    color: $light;
+  }
+
+  @else {
+    color: $dark;
+  }
+}

resources/styles/global/variables/_colours.scss

@@ -0,0 +1,105 @@
+@use "sass:color";
+
+//== Status
+$success: #39b54a;
+$error: #be1e2d;
+$alert: #eed202;
+
+//== Brand Colours
+$primary: #337ab7;
+$secondary: #5bc0de;
+$tertiary: invert($primary);
+$quaternary: invert($secondary);
+
+//== Primary Tints
+$primary-darkest: color.adjust($primary, $lightness: -30%);
+$primary-darker: color.adjust($primary, $lightness: -20%);
+$primary-dark: color.adjust($primary, $lightness: -10%);
+$primary-light: color.adjust($primary, $lightness: 10%);
+$primary-lighter: color.adjust($primary, $lightness: 20%);
+$primary-lightest: color.adjust($primary, $lightness: 30%);
+
+//== Secondary Tints
+$secondary-darkest: color.adjust($secondary, $lightness: -30%);
+$secondary-darker: color.adjust($secondary, $lightness: -20%);
+$secondary-dark: color.adjust($secondary, $lightness: -10%);
+$secondary-light: color.adjust($secondary, $lightness: 10%);
+$secondary-lighter: color.adjust($secondary, $lightness: 20%);
+$secondary-lightest: color.adjust($secondary, $lightness: 30%);
+
+//== Tertiary Tints
+$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
+$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
+$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
+$tertiary-light: color.adjust($tertiary, $lightness: 10%);
+$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
+$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
+
+//== quaternary Tints
+$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
+$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
+$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
+$quaternary-light: color.adjust($quaternary, $lightness: 10%);
+$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
+$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
+
+//== Shades
+$white:               white;
+$grey-lightest:       color.adjust(black, $lightness: 95%);
+$grey-lighter:        color.adjust(black, $lightness: 80%);
+$grey-light:          color.adjust(black, $lightness: 70%);
+$grey:                color.adjust(black, $lightness: 50%);
+$grey-dark:           color.adjust(black, $lightness: 40%);
+$grey-darker:         color.adjust(black, $lightness: 20%);
+$grey-darkest:        color.adjust(black, $lightness: 05%);
+$black:               black;
+
+//## Colour Array (used in generating colour classes).
+$colors: (
+  // shades
+  "black":     $black,
+  "grey-darkest": $grey-darkest,
+  "grey-darker": $grey-darker,
+  "grey-dark": $grey-dark,
+  "grey-light": $grey-light,
+  "grey-lighter": $grey-lighter,
+  "grey-lightest": $grey-lightest,
+  "white":     $white,
+  // status
+  "error":      $error,
+  "success":    $success,
+  "alert":      $alert,
+  // brand
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "tertiary":   $tertiary,
+  "quaternary":   $quaternary,
+  // primary tints
+  "primary-darkest":  $primary-darkest,
+  "primary-darker":   $primary-darker,
+  "primary-dark":     $primary-dark,
+  "primary-light":    $primary-light,
+  "primary-lighter":  $primary-lighter,
+  "primary-lightest": $primary-lightest,
+  // secondary tints
+  "secondary-darkest":  $secondary-darkest,
+  "secondary-darker":   $secondary-darker,
+  "secondary-dark":     $secondary-dark,
+  "secondary-light":    $secondary-light,
+  "secondary-lighter":  $secondary-lighter,
+  "secondary-lightest": $secondary-lightest,
+  // tertiary tints
+  "tertiary-darkest":  $tertiary-darkest,
+  "tertiary-darker":   $tertiary-darker,
+  "tertiary-dark":     $tertiary-dark,
+  "tertiary-light":    $tertiary-light,
+  "tertiary-lighter":  $tertiary-lighter,
+  "tertiary-lightest": $tertiary-lightest,
+  // quaternary tints
+  "quaternary-darkest":  $quaternary-darkest,
+  "quaternary-darker":   $quaternary-darker,
+  "quaternary-dark":     $quaternary-dark,
+  "quaternary-light":    $quaternary-light,
+  "quaternary-lighter":  $quaternary-lighter,
+  "quaternary-lightest": $quaternary-lightest,
+);

resources/styles/global/variables/_spacing.scss

@@ -2,9 +2,6 @@
 
 $offCanvasWidth:      17.5em;
 
-$brandWidth:          9em !default;
-$brandHeight:         3em !default;
-
 $tileAspectRatio:     math.div(400, 640) * 100%;
 $heroAspectRatio:     math.div(593, 1920) * 100vw;
 $slideAspectRatio:    math.div(733, 1920) * 100vw;
@@ -17,13 +14,12 @@ $sectionLarge:          5.000em;
 $sectionLarger:         7.500em;
 $sectionLargest:       10.000em;
 
-$containerLarger:      87.000em;
 $containerLarge:       73.125em;
 $containerMedium:      60.000em;
 $containerSmall:       50.000em;
 $containerNarrow:      34.000em;
 
-$innerLargest:          5.000em;
+$innerLarger:           5.000em;
 $innerLarger:           3.000em;
 $innerLarge:            2.000em;
 $innerMedium:           1.500em;
@@ -31,11 +27,6 @@ $innerSmall:            1.000em;
 $innerSmaller:          0.750em;
 $innerSmallest:         0.500em;
 
-$gap:                   1em;
-$gapSmall:              0.5em;
-$gapMedium:             1em;
-$gapLarge:              2em;
-
 $borderRadiusLargeer:   1.500em;
 $borderRadiusLarge:     1.000em;
 $borderRadius:          1.000em;

resources/styles/plugins/_contact-form-7.scss

@@ -0,0 +1,22 @@
+.wpcf7 .screen-reader-response {
+  display: none;
+}
+
+.wpcf7-response-output {
+  @extend p;
+  @extend .container;
+  @extend .container-narrow;
+
+  padding: 1em 0 0;
+  margin-top: 2em;
+  border: 1px solid $grey-light;
+  border-width: 1px 0 0;
+
+  .knockout & {
+    border-color: rgba($white, 0.3);
+  }
+}
+
+.wpcf7-display-none {
+  display: none;
+}