Initial commit to github

2025-08-22 15:40:01 -05:00
commit e8efdbeb34
230 changed files with 32213 additions and 0 deletions
--- a/styles/backend/admin.css
+++ b/styles/backend/admin.css
@@ -0,0 +1,15 @@
+/* Theme admin styles */
+
+@import "../../static/dist/theme.css";
+
+body {
+  font-family: 'Raleway', sans-serif;
+
+  &.wp-admin {
+    height: fit-content !important;
+    min-height: 100vh !important;
+  }
+}
+
+#wpbody ul, ol, ul li, ol li { list-style-type: none; }
+#adminmenu li ul, li ol { margin: 0; }
--- a/styles/backend/editor.css
+++ b/styles/backend/editor.css
@@ -0,0 +1,10 @@
+/* Theme editor styles */
+
+@import "../../static/dist/theme.css";
+
+body { font-family: 'Raleway', sans-serif; }
+
+.wp-block-buttons .block-editor-block-list__layout {
+  display: flex;
+  gap: 1rem;
+}
--- a/styles/base/break-out.css
+++ b/styles/base/break-out.css
@@ -0,0 +1,24 @@
+@theme {
+  /** Break-out variables
+   * These are used for the break-out plugin and the responsive utilities.
+   * The break-out variables are set to match the default plugin settings.
+   * You can override them if you need to adjust for a particular use case.
+   */
+  --twcb-scrollbar-width: 0px;
+}
+
+@utility mx-break-out {
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  width: calc(100vw - var(--twcb-scrollbar-width));
+}
+
+@utility ml-break-out {
+  margin-left: calc(50% - 50vw);
+  width: 100%;
+}
+
+@utility mr-break-out {
+  margin-left: calc(-50% + 50vw);
+  width: 100%;
+}
--- a/styles/base/colors.css
+++ b/styles/base/colors.css
@@ -0,0 +1,41 @@
+/* Theme color definitions */
+
+@theme {
+  --color-black:      oklch(0% 0 0);
+  --color-white:      oklch(100% 0 0);
+
+  --color-background: oklch(89.75% 0 0);
+  --color-text:       var(--color-black);
+
+  --color-primary:     oklch(0.57 0.203362 257.1706);
+  --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
+  --color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
+  --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
+  --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
+  --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
+  --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
+  --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
+  --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
+  --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
+
+  --color-secondary:     oklch(0.56 0.0176 257.23);
+  --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
+  --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
+  --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
+  --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
+  --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
+  --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
+  --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
+  --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
+  --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
+
+  --color-bodylinks: oklch(0.48 0.0789 211.58);
+  --color-footlinks: oklch(0.65 0.1104 212.2);
+
+  --color-success:   oklch(64.01% 0.1751 146.7);
+  --color-info:      oklch(0.55 0.0922 211.57);
+  --color-warning:   oklch(84.42% 0.1722 84.93);
+  --color-danger:    oklch(0.5126 0.1865 22.61);
+  --color-light:     oklch(98.16% 0.0017 247.8);
+  --color-dark:      oklch(34.51% 0.0133 248.2);
+}
--- a/styles/base/forms.css
+++ b/styles/base/forms.css
@@ -0,0 +1,97 @@
+/* Forms */
+
+
+/* Base styles */
+
+.gform_wrapper {
+  @apply max-w-full mx-auto;
+
+  .gform_fields {
+    @apply text-black;
+  }
+
+  fieldset.gfield {
+    @apply mb-6;
+  }
+
+  legend, label {
+    @apply text-lg font-bold mb-2;
+  }
+
+  label.gform-field-label--type-sub{
+    @apply font-normal text-base;
+  }
+
+  .gfield_required {
+    @apply text-danger text-xs font-bold ml-1;
+  }
+
+  .dark {
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="number"],
+    input[type="password"],
+    input[type="date"],
+    select,
+    textarea {
+      @apply text-black bg-white;
+      @apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary;
+    }
+  }
+
+  .ginput_complex {
+    @apply sm:flex;
+
+    span {
+      @apply block grow;
+
+      &:not(:first-child) {
+        @apply mt-6 sm:mt-0 sm:ml-4;
+      }
+    }
+  }
+
+  .gform_footer {
+    @apply mt-8;
+  }
+
+  h2.gform_submission_error {
+    @apply text-xl text-danger font-bold my-4;
+  }
+
+  .validation_message {
+    @apply italic text-danger;
+  }
+
+  .hidden_label > label {
+    @apply hidden;
+  }
+}
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="url"],
+input[type="number"],
+input[type="password"],
+input[type="date"],
+select,
+textarea {
+  @apply px-4 py-2 w-full rounded border-2 border-secondary focus-visible:bg-secondary-300 focus-visible:border-primary;
+
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.wp-block-search__input {
+  @apply px-4 py-2 w-full rounded border-2 border-transparent focus-visible:bg-secondary-300 focus-visible:border-primary;
+
+  appearance: none;
+  flex-grow: 1;
+  margin-left: 0;
+  margin-right: 0;
+  min-width: 3rem;
+  text-decoration: unset !important;
+}
--- a/styles/base/global.css
+++ b/styles/base/global.css
@@ -0,0 +1,84 @@
+/* Miscellaneous custom styles */
+@theme {
+  --spacing-menu-top:     calc(100% + .9375rem);
+  --spacing-section:      2rem;
+
+  --shadow-menu-shadow:   0 .25rem .375rem rgba(0,0,0,0.1);
+
+  /** Breakpoints
+   * The breakpoints are set to match the default Tailwind breakpoints.
+   * You can override them here if you want to use different breakpoints.
+   *
+   * @see https://tailwindcss.com/docs/breakpoints
+   */
+  --breakpoint-*:   initial;
+  --breakpoint-xxs: 22.5rem;    /* 360px */
+  --breakpoint-xs:  29.6875rem; /* 475px */
+  --breakpoint-sm:  40rem;      /* 640px */
+  --breakpoint-md:  48rem;      /* 768px */
+  --breakpoint-lg:  64rem;      /* 1024px */
+  --breakpoint-xl:  70rem;      /* 1280px */
+  --breakpoint-2xl: 96rem;      /* 1536px */
+}
+
+/* Basic layout styles */
+main#maincontent {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  margin: 0;
+  padding: 0 0 4rem;
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.section {
+  @apply relative my-section px-section;
+
+  &:first-child {
+    @apply mt-0;
+  }
+
+  &:last-child, p:last-child {
+    @apply mb-0;
+  }
+
+  &.has-background {
+    @apply py-section bg-cover bg-no-repeat;
+  }
+}
+
+/** Allows containers inside containers
+  *
+  * .container .wp-block-section {
+  * @apply mx-break-out;
+  * }
+  */
+
+.content-wrapper {
+  .alignfull {
+    @apply max-w-full;
+  }
+
+  .alignwide {
+    @apply max-w-full;
+  }
+
+  .alignleft {
+    @apply ml-0 mr-auto float-none;
+  }
+
+  .alignright {
+    @apply ml-auto mr-0 float-none;
+  }
+
+  .aligncenter {
+    @apply mx-auto;
+  }
+}
+
+/* Responsive embeds */
+.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
+.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
--- a/styles/base/index.css
+++ b/styles/base/index.css
@@ -0,0 +1,9 @@
+/* Theme base styles */
+
+@import "./global.css";
+@import "./colors.css";
+@import "./typography.css";
+@import "./prose.css";
+@import "./skip-link.css";
+@import './misc.css';
+@import "./forms.css";
--- a/styles/base/misc.css
+++ b/styles/base/misc.css
@@ -0,0 +1 @@
+/* Miscellaneous extra styles */
--- a/styles/base/prose.css
+++ b/styles/base/prose.css
@@ -0,0 +1,36 @@
+/* Theme prose styles */
+
+@theme {
+  --tw-prose-body:                 var(--color-primary);
+  --tw-prose-headings:             var(--color-primary);
+  --tw-prose-lead:                 var(--color-primary);
+  --tw-prose-links:                var(--color-info);
+  --tw-prose-bold:                 var(--color-primary);
+  --tw-prose-counters:             var(--color-primary);
+  --tw-prose-bullets:              var(--color-secondary);
+  --tw-prose-hr:                   var(--color-secondary);
+  --tw-prose-quotes:               var(--color-primary);
+  --tw-prose-quote-borders:        var(--color-primary);
+  --tw-prose-captions:             var(--color-secondary);
+  --tw-prose-code:                 var(--color-primary);
+  --tw-prose-pre-code:             var(--color-primary);
+  --tw-prose-pre-bg:               var(--color-secondary);
+  --tw-prose-th-borders:           var(--color-secondary);
+  --tw-prose-td-borders:           var(--color-secondary);
+  --tw-prose-invert-body:          var(--color-primary);
+  --tw-prose-invert-headings:      var(--color-primary);
+  --tw-prose-invert-lead:          var(--color-primary);
+  --tw-prose-invert-links:         var(--color-secondary);
+  --tw-prose-invert-bold:          var(--color-primary);
+  --tw-prose-invert-counters:      var(--color-primary);
+  --tw-prose-invert-bullets:       var(--color-primary);
+  --tw-prose-invert-hr:            var(--color-secondary);
+  --tw-prose-invert-quotes:        var(--color-primary);
+  --tw-prose-invert-quote-borders: var(--color-primary);
+  --tw-prose-invert-captions:      var(--color-primary);
+  --tw-prose-invert-code:          var(--color-secondary);
+  --tw-prose-invert-pre-code:      var(--color-primary);
+  --tw-prose-invert-pre-bg:        oklch(0% 0 0 / 50%);
+  --tw-prose-invert-th-borders:    var(--color-primary);
+  --tw-prose-invert-td-borders:    var(--color-primary);
+}
--- a/styles/base/skip-link.css
+++ b/styles/base/skip-link.css
@@ -0,0 +1,25 @@
+.skip-link {
+  background-color: #f6ff00 !important;
+  border-color: #f6ff00 !important;
+  color: #000 !important;
+  font-size: larger;
+  font-weight: 600;
+  left: 0;
+  margin: 0 auto;
+  max-width: 90vw;
+  opacity: 1;
+  outline-color: #f6ff00 !important;
+  padding: 1rem;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0.5rem;
+  transition: transform 0.1875s ease-out;
+  width: 15rem;
+  z-index: 999;
+
+  &:not(:focus):not(:hover) {
+    opacity: 0;
+    transform: translateY(-4em);
+  }
+}
--- a/styles/base/typography.css
+++ b/styles/base/typography.css
@@ -0,0 +1,154 @@
+/* Basic typographical styles */
+
+/**
+ * All font sizes are based on 16px base font size and 1920px wide screen
+ * Default size is expressed as percentage of screen width.
+ * text-14px: 12px-27px, default: 14px
+ * text-16px: 14px-28px, default: 16px
+ * text-18px: 14px-30px, default: 18px
+ * text-20px: 16px-32px, default: 20px
+ * text-22px: 17px-33px, default: 22px
+ * text-25px: 18px-35px, default: 25px
+ * text-30px: 19px-37px, default: 30px
+ * text-35px: 20px-40px, default: 35px
+ * text-38px: 22px-48px, default: 38px
+ * text-40px: 24px-56px, default: 40px
+ * text-45px: 25px-64px, default: 45px
+ * text-50px: 27px-72px, default: 50px
+ * text-55px: 28px-76px, default: 55px
+ * text-60px: 30px-80px, default: 60px
+ * text-70px: 30px-76px, default: 70px
+ * text-75px: 32px-80px, default: 75px
+*/
+
+@theme {
+  --font-sans:   "Raleway", sans-serif;
+  --line-height: 1.6;
+
+  --text-base: 1rem;
+  --text-14px: clamp(0.75rem,  0.7292vw, 1.7rem);
+  --text-16px: clamp(0.875rem, 0.8333vw, 1.8rem);
+  --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
+  --text-20px: clamp(1rem,     1.0417vw, 2rem);
+  --text-22px: clamp(1.1rem,   1.15vw,   2.1rem);
+  --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
+  --text-30px: clamp(1.185rem, 1.5625vw, 2.35rem);
+  --text-35px: clamp(1.25rem,  1.8229vw, 2.5rem);
+  --text-38px: clamp(1.4rem,   1.9791vw, 3rem);
+  --text-40px: clamp(1.5rem,   2.0834vw, 3.5rem);
+  --text-45px: clamp(1.6rem,   2.3438vw, 4rem);
+  --text-50px: clamp(1.7rem,   2.6042vw, 4.5rem);
+  --text-70px: clamp(1.9rem,   3.6458vw, 4.8rem);
+  --text-75px: clamp(2rem,     3.9063vw, 5rem);
+
+  --h1: calc(var(--text-base) * 2.25);
+  --h2: calc(var(--text-base) * 1.75);
+  --h3: calc(var(--text-base) * 1.5);
+  --h4: calc(var(--text-base) * 1.25);
+  --h5: calc(var(--text-base) * 1.125);
+  --h6: calc(var(--text-base) * 1.05);
+}
+
+body {
+  background-color: white;
+  color: black;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--line-height);
+}
+
+::selection { background: var(--color-warning); }
+
+@layer components {
+  h1, h2, h3,
+  h4, h5, h6 {
+    font-weight: 700;
+    margin: 0 0 1rem;
+  }
+
+  h1, .h1 {
+    font-size: var(--h1);
+    line-height: 1.2;
+  }
+
+  h2, .h2 {
+    font-size: var(--h2);
+    line-height: 1.3;
+  }
+
+  h3, .h3 {
+    font-size: var(--h3);
+    line-height: 1.4;
+  }
+
+  h4, .h4 {
+    font-size: var(--h4);
+    line-height: 1.5;
+  }
+
+  h5, .h5 { font-size: var(--h5); }
+
+  h6, .h6 { font-size: var(--h6); }
+}
+
+a, .link {
+  color: var(--color-bodylinks);
+  text-decoration: none;
+  transition: color 200ms;
+  cursor: pointer;
+
+  &:hover { color: var(--color-primary); }
+}
+
+h1 a, .h1 a,
+h2 a, .h2 a,
+h3 a, .h3 a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+li ul, li ol { margin: 0 1rem; }
+
+ul { list-style-type: disc; }
+
+ol { list-style-type: decimal; }
+
+ol ol { list-style: lower-alpha; }
+
+ol ol ol { list-style: lower-roman; }
+
+ol ol ol ol { list-style: lower-alpha; }
+
+pre, code,
+samp, style { font-family: monospace; }
+
+pre {
+  font-size: 0.875rem;
+  overflow: auto;
+  padding: 1.5rem;
+}
+
+pre code {
+  background-color: inherit;
+  border-radius: 0;
+  color: inherit;
+  padding: 0;
+}
+
+code {
+  @apply bg-black/30 px-[3px] py-[2px] font-mono text-black text-xs rounded-sm;
+}
+
+hr {
+  background-color: black;
+  border: none;
+  display: block;
+  height: 1px;
+  margin: 1rem 0;
+  width: 100%;
+}
--- a/styles/blocks/buttons.css
+++ b/styles/blocks/buttons.css
@@ -0,0 +1,158 @@
+/* Button styles */
+
+@theme {
+  /* Configuration */
+
+  /**
+    * Button component settings
+    *
+    * The variables below are used to define the button styles.
+    * Most of these variables come from the main theme configuration.
+    * The following variables are not defined, but have fallback values
+    * in their respective locations and can be added if needed:
+    *
+    * --button-font-weight   (fallback is 600/semibold)
+    * --button-font-size     (fallback is 1rem)
+    * --button-outline-width (fallback is --button-border-width)
+    * --button-outline-style (fallback is --button-border-style)
+    * --button-outline-color (fallback is --button-border-color)
+    */
+
+  --button-bg:                 var(--color-primary);
+  --button-color:              var(--color-white);
+  --button-hover-bg:           var(--color-info);
+  --button-hover-border-color: var(--color-info);
+  --button-hover-color:        var(--color-white);
+  --button-border-width:       3px;
+  --button-border-style:       solid;
+  --button-border-color:       var(--button-bg);
+  --button-radius:             0.5rem;
+}
+
+.btn, .button, .acf-block-preview .button {
+  @apply px-8 py-2 min-w-0;
+
+  background: var(--button-bg);
+  color:      var(--button-color);
+  cursor:     pointer;
+  display:    inline-block;
+  transition: background 200ms, border-color 200ms, color 200ms;
+
+  border-width:  var(--button-border-width);
+  border-style:  var(--button-border-style);
+  border-color:  var(--button-border-color);
+  border-radius: var(--button-radius);
+
+  text-decoration: none;
+  font-weight:     var(--button-font-weight, 600);
+  font-size:       var(--button-font-size, 1rem);
+  line-height:     1.1;
+
+  &[data-button-variant="outline"] {
+    background: transparent;
+    &:hover { background: transparent; }
+
+    --button-color:              var(--button-outline-color, var(--button-bg));
+    --button-hover-border-color: var(--button-hover-bg);
+    --button-hover-color:        var(--button-hover-bg);
+  }
+}
+
+/* Hover/focus/active */
+.btn:hover, .button:hover, .acf-block-preview .button:hover {
+  background:   var(--button-hover-bg);
+  border-color: var(--button-hover-border-color);
+  color:        var(--button-hover-color);
+}
+
+.btn:focus, .button:focus {
+  outline-width:  var(--button-outline-width, var(--button-border-width));
+  outline-style:  var(--button-outline-style, var(--button-border-style));
+  outline-color:  var(--button-outline-color, var(--button-border-color));
+  outline-offset: calc(var(--button-border-width) * 2);
+}
+
+.btn:active, .button:active { transform: scale(99%); }
+
+/**
+  * Variants
+  *
+  * The following styles are used to define button variants.
+  * These styles are applied to the button element using the
+  * `data-button-*` attributes.
+  */
+
+/* Sizes */
+.btn[data-button-size="small"], .button[data-button-size="small"]  { @apply px-4 py-0.5; }
+.btn[data-button-size="medium"], .button[data-button-size="medium"] { @apply px-8 py-2; }
+.btn[data-button-size="large"], .button[data-button-size="large"]  { @apply px-12 py-3; }
+
+/* Width */
+.btn[data-button-width="auto"], .button[data-button-width="auto"]  { @apply min-w-0; }
+.btn[data-button-width="small"], .button[data-button-width="small"] { @apply px-2; }
+.btn[data-button-width="wide"], .button[data-button-width="wide"]  { @apply sm:min-w-[20rem]; }
+.button[data-button-width="full"],
+x-button:has(.button[data-button-width="full"]) { @apply w-full; }
+
+/**
+ * Colors
+ *
+ * We don't need to speicifcally target "primary" buttons
+ * as the button styling defaults to "primary".
+ * However, you can, if necessary, by adding a style block
+ * like the ones below and changing the color values.
+ */
+.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
+  --button-bg:                 var(--color-secondary);
+  --button-color:              var(--color-white);
+  --button-border-color:       var(--color-secondary);
+  --button-outline-color:      oklch(0.48 0.0136 252.2);
+  --button-hover-bg:           var(--color-dark);
+  --button-hover-border-color: var(--color-dark);
+  --button-hover-color:        var(--color-white);
+}
+
+.btn[data-button-color="light"], .button[data-button-color="light"] {
+  --button-bg:                 var(--color-white);
+  --button-color:              var(--color-dark);
+  --button-border-color:       var(--color-white);
+  --button-hover-bg:           var(--color-dark);
+  --button-hover-border-color: var(--color-dark);
+  --button-hover-color:        var(--color-white);
+}
+
+.btn[data-button-color="white"], .button[data-button-color="white"] {
+  --button-bg:                 var(--color-white);
+  --button-color:              var(--color-black);
+  --button-border-color:       var(--color-white);
+  --button-hover-bg:           var(--color-secondary-200);
+  --button-hover-border-color: var(--color-secondary-200);
+  --button-hover-color:        var(--color-black);
+}
+
+.btn[data-button-color="black"], .button[data-button-color="black"] {
+  --button-bg:                 var(--color-black);
+  --button-color:              var(--color-white);
+  --button-border-color:       var(--color-black);
+  --button-hover-bg:           var(--color-secondary);
+  --button-hover-border-color: var(--color-secondary);
+  --button-hover-color:        var(--color-dark);
+}
+
+.back-to-top {
+  background: var(--color-primary, #3857BC);
+  color: #fff;
+  border: none;
+  border-radius: 2em;
+  padding: 0.75em 1.5em;
+  font-size: 1.1rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  cursor: pointer;
+  transition: opacity 0.2s, background 0.2s;
+  opacity: 0.85;
+}
+.back-to-top:hover, .back-to-top:focus {
+  background: var(--color-info, #233a7a);
+  opacity: 1;
+  outline: 2px solid var(--color-info, #233a7a);
+}
--- a/styles/blocks/core.css
+++ b/styles/blocks/core.css
@@ -0,0 +1,5 @@
+.alignfull {
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  width: 100vw;
+}
--- a/styles/blocks/index.css
+++ b/styles/blocks/index.css
@@ -0,0 +1,4 @@
+/* Theme block styles */
+
+@import './buttons.css';
+@import './core.css';
--- a/styles/components/breadcrumbs.css
+++ b/styles/components/breadcrumbs.css
@@ -0,0 +1,13 @@
+/* Breadcrumb styles */
+
+#breadcrumbs {
+  @apply text-white;
+
+  a {
+    color: oklch(0.72 0.122 212.25);
+
+    &:hover {
+      color:color-mix(in oklch, oklch(0.72 0.122 212.25) 60%, white);
+    }
+  }
+}
--- a/styles/components/index.css
+++ b/styles/components/index.css
@@ -0,0 +1,8 @@
+/* Theme component styles */
+
+@import "./site-header.css";
+@import "./breadcrumbs.css";
+@import "./post-list.css";
+@import "./sidebar.css";
+@import "./pagination.css";
+@import "./site-footer.css";
--- a/styles/components/pagination.css
+++ b/styles/components/pagination.css
@@ -0,0 +1,35 @@
+/* Post index pagination styles */
+
+.pagination {
+  .nav-links {
+    @apply hidden md:flex items-center justify-center mt-12;
+
+    .page-numbers {
+      @apply hidden md:flex items-center justify-center h-10 p-4 text-base font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
+    }
+
+    .page-numbers.current {
+      @apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info;
+    }
+
+    .prev, .next {
+      @apply flex gap-4;
+    }
+  }
+
+  & a, & span {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    color: #3857BC !important;
+    margin: 0 5px;
+    padding: .25rem .5rem;
+    text-decoration: none;
+  }
+
+  & .current, & a:hover {
+    background: #3857BC !important;
+    border-color: #3857BC !important;
+    color: #fff !important;
+    padding: .25rem .5rem;
+  }
+}
--- a/styles/components/post-list.css
+++ b/styles/components/post-list.css
@@ -0,0 +1,37 @@
+/* Blog/post index listing styles */
+
+.post-list {
+  /* Original styles, if needed
+   * .post-list__posts {
+   * }
+   * .post-list__h1 {
+   * }
+   * .post-list__post {
+   *   &:hover {
+   *     img {
+   *     }
+   *   }
+   *   .post-list__title {
+   *   }
+   *   .post-list__details {
+   *   }
+   *   .post-list__byline {
+   *   }
+   *   .post-list__author {
+   *   }
+   *   .post-list__sep {
+   *   }
+   *   .post-list__date {
+   *   }
+   * }
+   */
+}
+
+/* Original styles, if needed
+* .no-posts {
+*   .no-posts__title {
+*   }
+*   .no-posts__desc {
+*   }
+* }
+*/
--- a/styles/components/sidebar.css
+++ b/styles/components/sidebar.css
@@ -0,0 +1,28 @@
+/* Sidebar styles */
+
+.sidebar{
+  .widget {
+    /* Widget styles */
+    @apply mb-8;
+
+    h3 {
+      /* Widget title styles */
+      @apply m-0 mb-2 font-semibold;
+    }
+
+    ul {
+      /* List styles */
+      @apply list-none m-0 p-0 pl-3 border-l-3 border-secondary-400;
+
+      li {
+        /* List item styles */
+        @apply text-balance;
+
+        &:first-of-type {
+          /* First list item styles */
+          @apply leading-none mb-1;
+        }
+      }
+    }
+  }
+}
--- a/styles/components/site-footer.css
+++ b/styles/components/site-footer.css
@@ -0,0 +1,41 @@
+/* Footer styles */
+
+.site-footer {
+  #footRight {
+    div {
+      @apply col-span-1 md:col-span-4 lg:col-span-1;
+
+      h3 {
+        @apply font-bold text-secondary-300 text-20px mb-4 pb-2 border-b border-b-secondary-300
+      }
+
+      a {
+        @apply text-footlinks hover:opacity-60;
+      }
+    }
+
+    .widget {
+      li {
+        @apply text-16px my-1 mb-2 leading-4;
+      }
+
+      h4 {
+        @apply font-bold text-18px text-secondary mb-2;
+      }
+
+      a {
+        @apply transition-colors duration-300 hover:text-success focus-visible:text-success;
+      }
+    }
+
+    .menu-footer-menu-container {
+      @apply grow;
+    }
+  }
+
+  .copyright {
+    p { @apply leading-none m-0 p-0; }
+
+    a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
+  }
+}
--- a/styles/components/site-header.css
+++ b/styles/components/site-header.css
@@ -0,0 +1,22 @@
+/* Header styles */
+
+.site-header {
+	/* Site header styles */
+	.nav-aux__container {
+		a {
+			/* Link styles */
+			color: var(--color-primary-600);
+			text-decoration: none;
+			font-weight: 500;
+			transition: color 0.3s ease;
+
+			&:hover {
+				color: var(--color-primary-800);
+			}
+		}
+
+		#globalSearch {
+			@apply text-14px text-light;
+		}
+	}
+}
--- a/styles/fonts/Lineicons.svg
+++ b/styles/fonts/Lineicons.svg
--- a/styles/fonts/Lineicons.woff2
+++ b/styles/fonts/Lineicons.woff2
--- a/styles/fonts/lineicons.css
+++ b/styles/fonts/lineicons.css
--- a/styles/navigation/index.css
+++ b/styles/navigation/index.css
@@ -0,0 +1,19 @@
+/**
+* Navigation component
+*   A composite component consisting of
+*    following components:
+*    - nav-main-mega.php
+*    - menu-items
+*        - index.php
+*    - nav-functional.php
+*
+* Choose one or the other for the main navigation, based on theme needs.
+*
+* @import 'nav-main-default';
+* @import 'nav-main-mega';
+*/
+
+@import "./nav-functional.css";
+@import "./nav-aux.css";
+@import "./nav-main-default.css";
+@import "./nav-footer.css";
--- a/styles/navigation/nav-aux.css
+++ b/styles/navigation/nav-aux.css
@@ -0,0 +1,36 @@
+/**
+ * VDI Navs & Menu - Auxiliary Nav Styles
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+.nav-aux {
+    @apply relative flex flex-wrap gap-2 items-center justify-end p-0 m-0;
+
+    .menu-vdi {
+        @apply relative flex flex-wrap gap-4 items-center gap-y-2 gap-x-4 p-0 m-0;
+
+        .menu-vdi__toggle {
+            /* styles */
+            @apply flex items-center gap-2;
+            /* interaction */
+            @apply focus-visible:underline hover:underline;
+        }
+    }
+}
+
+/* desktop overrides */
+@media screen and (min-width: 62.5rem) {
+    .nav-aux {
+        @apply gap-4;
+
+        .menu-vdi {
+            @apply justify-end;
+
+            .menu-vdi__toggle {
+                @apply flex items-center gap-2;
+            }
+        }
+    }
+}
--- a/styles/navigation/nav-footer.css
+++ b/styles/navigation/nav-footer.css
@@ -0,0 +1,102 @@
+/**
+ * VDI Navs & Menu - Footer Navigation
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * ___Link_Here___
+ */
+
+/* desktop */
+@media screen and (min-width: 62.5rem) {
+  .nav-footer .menu-vdi {
+    @apply flex flex-col items-start justify-start p-0 m-0;
+
+    >li {
+      >a {
+        /* text */
+        @apply font-normal leading-snug text-secondary text-18px;
+        /* spacing & display */
+        @apply mx-0 p-0 no-underline;
+      }
+    }
+  }
+}
+
+/* mobile */
+@media screen and (max-width: 62.5rem) {
+  .nav-footer {
+    .nav-footer__toggle {
+      /* display */
+      @apply text-primary p-3;
+    }
+
+    .menu-vdi {
+      @apply flex-col w-[95%] py-6;
+
+      .menu-vdi__submenu {
+        @apply py-2 px-7 flex-col;
+      }
+
+      .menu-vdi__item {
+        a,
+        button {
+          /* text */
+          @apply font-normal leading-snug text-lg;
+          /* spacing & display */
+          @apply block w-full p-4;
+          /* interaction */
+          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+        }
+
+        a {
+          @apply block w-full;
+        }
+
+        button {
+          @apply flex w-full justify-between;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 62.5rem) {
+  .nav-footer .menu-vdi {
+    .menu-vdi__toggle {
+      @apply font-semibold underline text-20px mt-3 pb-1;
+
+      >svg {
+        @apply hidden;
+      }
+    }
+
+    .menu-vdi__item--parent {
+      @apply static;
+    }
+
+    .menu-vdi__submenu {
+      @apply static block m-0 mb-3 p-0 pl-2 shadow-none;
+
+      >li {
+        @apply w-full m-0 p-0;
+      }
+
+      .menu-vdi__item {
+        /* text */
+        @apply font-normal leading-snug text-18px;
+        /* spacing & display */
+        @apply block w-full;
+        /* interaction */
+        @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+
+        a {
+          @apply block w-full;
+        }
+      }
+
+      a.menu-vdi__item,
+      .menu-vdi__item a {
+        @apply p-0 text-secondary;
+      }
+    }
+  }
+}
--- a/styles/navigation/nav-functional.css
+++ b/styles/navigation/nav-functional.css
@@ -0,0 +1,100 @@
+/**
+ * VDI Navs & Menu - Functional Styles
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+/* all sizes */
+.menu-vdi {
+    @apply hidden;
+
+    >li {
+        @apply list-none;
+        >a {
+            @apply focus-visible:underline hover:underline;
+        }
+
+        a[aria-current="true"] {
+            @apply underline;
+        }
+
+        .menu-vdi__toggle {
+            &[aria-expanded="true"] {
+                svg {
+                    @apply rotate-180;
+                }
+
+                +.menu-vdi__submenu {
+                    @apply flex;
+                }
+            }
+        }
+    }
+
+    .menu-vdi__submenu {
+        @apply hidden container z-10;
+
+        /* should also put current page here */
+        .menu-vdi__item--grandchild a {
+            @apply no-underline focus-visible:underline hover:underline;
+        }
+    }
+}
+
+/* Mobile */
+@media screen and (max-width: 62.5rem) {
+    #app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }
+
+    .nav-main__toggle {
+        .nav-toggle-hamburger { display: inline-block !important; }
+
+        .nav-toggle-x { display: none !important; }
+
+        &[aria-expanded="true"] {
+            .nav-toggle-hamburger { display: none !important; }
+
+            .nav-toggle-x { display: inline-block !important; }
+        }
+    }
+    .nav-main {
+        .nav-main__toggle[aria-expanded="true"] {
+            +ul {
+                @apply absolute flex;
+            }
+        }
+
+        .menu-vdi {
+            @apply absolute right-0 z-10;
+
+            .menu-vdi__toggle {
+                @apply flex items-center gap-2;
+            }
+        }
+    }
+
+    .nav-aux {
+        .menu-vdi__submenu {
+            @apply absolute list-none;
+        }
+    }
+}
+
+/* Desktop */
+@media screen and (min-width: 62.5rem) {
+    .nav-main__toggle {
+        @apply hidden;
+    }
+
+    .menu-vdi {
+        @apply flex list-none;
+
+        .menu-vdi__toggle {
+            @apply flex items-center gap-2;
+        }
+
+        .menu-vdi__submenu {
+            @apply absolute list-none;
+        }
+    }
+}
--- a/styles/navigation/nav-main-default.css
+++ b/styles/navigation/nav-main-default.css
@@ -0,0 +1,102 @@
+/**
+ * VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * TODO: Add documenation link here
+ */
+
+/* desktop */
+@media screen and (min-width: 62.5rem) {
+  .nav-main .menu-vdi {
+    @apply flex items-center justify-end p-0 m-0;
+
+    >li {
+      >a,
+      >.menu-vdi__toggle {
+        /* text*/
+        @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+        /* spacing & display */
+        @apply mx-4 p-0 no-underline;
+      }
+    }
+  }
+}
+
+/* mobile */
+@media screen and (max-width: 62.5rem) {
+  .nav-main {
+    .nav-main__toggle {
+      /* display */
+      @apply text-white p-3;
+    }
+
+    .menu-vdi {
+      @apply flex-col bg-white w-[95%] right-0 z-10 py-6;
+      top: var(--hgtHeader);
+      min-height: calc(100vh - var(--hgtHeader));
+
+      .menu-vdi__submenu {
+        @apply py-2 px-7 flex-col;
+      }
+
+      .menu-vdi__item {
+        a,
+        button {
+          /* text */
+          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+          /* spacing & display */
+          @apply block w-full p-4;
+          /* interaction */
+          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+        }
+
+        a {
+          @apply block w-full;
+        }
+
+        button {
+          @apply flex w-full justify-between;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 62.5rem) {
+  .menu-vdi {
+    .menu-vdi__toggle {
+      @apply flex items-center gap-2;
+    }
+
+    .menu-vdi__item--parent {
+      @apply relative;
+    }
+
+    .menu-vdi__submenu {
+      @apply bg-white shadow-lg left-4 w-64 flex-col;
+      top: calc(100% + 1rem);
+
+      >li {
+        @apply w-full;
+      }
+
+      .menu-vdi__item {
+        /* text */
+        @apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
+        /* spacing & display */
+        @apply block w-full;
+        /* interaction */
+        @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+
+        a {
+          @apply block w-full;
+        }
+      }
+
+      a.menu-vdi__item,
+      .menu-vdi__item a {
+        @apply p-4;
+      }
+    }
+  }
+}
--- a/styles/navigation/nav-main-mega.css
+++ b/styles/navigation/nav-main-mega.css
@@ -0,0 +1,129 @@
+/**
+ * VDI Navs & Menu - Main Navigation + Mega Menu Styles
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+/* all sizes */
+.nav-main .menu-vdi {
+  .menu-vdi__toggle {
+    @apply flex items-center gap-2;
+  }
+}
+
+/* mobile */
+@media screen and (max-width: 62.5rem) {
+  .nav-main {
+    .nav-main__toggle {
+      /* display */
+      @apply text-white p-3;
+    }
+
+    .menu-vdi {
+      @apply flex-col bg-white w-[95%] right-0 z-10 py-6;
+      top: var(--hgtHeader);
+      min-height: calc(100vh - var(--hgtHeader));
+
+      .menu-vdi__submenu {
+        @apply py-2 px-7 flex-col;
+      }
+
+      .menu-vdi__item {
+        a,
+        button {
+          /* text */
+          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+          /* spacing & display */
+          @apply block w-full p-4;
+          /* interaction */
+          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+        }
+
+        a {
+          @apply block w-full;
+        }
+
+        button {
+          @apply flex w-full justify-between;
+        }
+      }
+    }
+  }
+}
+
+/* desktop */
+@media screen and (min-width: 62.5rem) {
+  .nav-main .menu-vdi {
+    @apply flex items-center justify-end p-0 m-0;
+
+    >li {
+      >a,
+      >.menu-vdi__toggle {
+        /* text */
+        @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+        /* spacing & display */
+        @apply w-max mx-4 p-0 no-underline;
+      }
+    }
+
+    .menu-vdi__toggle {
+      @apply flex items-center gap-2;
+    }
+
+    .menu-vdi__item--parent {
+      @apply relative;
+
+      /* Mega Menu */
+      &:has(.menu-vdi__item--grandchild) {
+        @apply static;
+      }
+    }
+
+    .menu-vdi__submenu {
+      @apply bg-white shadow-lg left-4 w-64 flex-col;
+
+      top: calc(100% + 1rem);
+
+      >li {
+        @apply w-full;
+      }
+
+      .menu-vdi__item {
+        /* text */
+        @apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
+        /* spacing & display */
+        @apply block w-full;
+        /* interaction */
+        @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+
+        a {
+          @apply block w-max;
+        }
+      }
+
+      a.menu-vdi__item,
+      .menu-vdi__item a {
+        @apply p-4;
+      }
+
+      /* Mega Menu */
+      &:has(.menu-vdi__item--grandchild) {
+        @apply flex-row gap-x-8 right-0 ml-auto mr-0 p-4 w-max;
+
+        span {
+          @apply font-bold text-xl underline w-max;
+        }
+
+        a.menu-vdi__item,
+        .menu-vdi__item a {
+          @apply p-0;
+        }
+
+        .menu-vdi__megaCol {
+          @apply px-0 w-max;
+        }
+      }
+    }
+  }
+}
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -0,0 +1,22 @@
+/* Tailwind setup */
+
+@import "tailwindcss";
+
+/* Base styles */
+@import "./base/index.css";
+@import "./navigation/index.css";
+
+/* Lineicons icon font */
+@import "./fonts/lineicons.css";
+
+/* Import *-break-out utilities (replicating the non-functional "tailwind-container-break-out" plugin) */
+@import "./base/break-out.css";
+
+/* Components */
+@import "./components/index.css";
+
+/* Blocks */
+@import "./blocks/index.css";
+
+/* Import Tailwind typography plugin */
+@plugin "@tailwindcss/typography";