Initial commit to github

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%;
+}

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);
+}

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;
+}

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%; }

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";

styles/base/misc.css

@@ -0,0 +1 @@
+/* Miscellaneous extra styles */

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);
+}

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);
+  }
+}

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%;
+}