=Exported templates in template editor. Will likely be following the JakeVa...

Jake Vanderwerf

2026-06-05 ea8cb8a6a7d6952ff61ef8d7a07600250c984f06

 source.css

@@ -25,80 +25,78 @@
   For best results, generate colours from base colours using: https://uicolors.app/generate/
   or sass darken/lighten by 5%: http://scg.ar-ch.org/
   */
   --light-0: #efefef;
   --light-50: #e2e2e2;
   --light-100: #d5d5d5;
   --light-200: #c9c9c9;
   --light-rgb: 239,239,239;
   --light-0: 239,239,239;     /* #efefef; */
   --light-50: 226,226,226;    /* #e2e2e2; */
   --light-100: 213,213,213;   /* #d5d5d5; */
   --light-200: 201,201,201;   /* #c9c9c9; */

   --dark-0: #151515;
   --dark-50: #222222;
   --dark-100: #2e2e2e;
   --dark-200: #3b3b3b;
   --dark-rgb: 21,21,21;
   --dark-0: 21,21,21;         /* #151515; */
   --dark-50: 34,34,34;        /* #222222; */
   --dark-100: 46,46,46;       /* #2e2e2e; */
   --dark-200: 59,59,59;       /* #3b3b3b; */

   --action-0: #ff0080;
   --action-50: #ff2492;
   --action-100: #ff47a4;
   --action-200: #ff6bb5;
   --action-rgb: 255,0,128;
   --action-0: 255,0,128;      /* #ff0080; */
   --action-50: 255,38,146;    /* #ff2492; */
   --action-100: 255,71,164;   /* #ff47a4; */
   --action-200: 255,107,181;  /* #ff6bb5; */
   --action-contrast: var(--light-0);

   --secondary-0: #D69121;
   --secondary-50: #ffc421;
   --secondary-100: #ffcd44;
   --secondary-200: #ffd768;
   --secondary-rgb: 252,185,0;
   --secondary-0: 214,145,33;  /* #D69121; */
   --secondary-50: 255,196,33; /* #ffc421; */
   --secondary-100: 255,205,68;/* #ffcd44; */
   --secondary-200: 255,215,104;/* #ffd768; */
   --secondary-contrast: var(--light-0);

   --success: #20D64E;
   --successLight: #DBFAE3;
   --successDark: #05230D;
   --successBack: var(--successLight);
   --successText: var(--successDark);
   --warning: #D69121;
   --warningLight: #F6E5CB;
   --warningDark: #231806;
   --warningBack: var(--warningLight);
   --warningText: var(--warningDark);
   --error: #CF1616;
   --errorLight: #F9C8C8;
   --errorDark: #4A0808;
   --errorBack: var(--errorLight);
   --errorText: var(--errorDark);
   --success: 76,175,80;          /* #4CAF50; */
   --successLight: 234,246,235;    /* #eaf6eb; */
   --successDark: 14,33,15;      /* #0e210f; */

   --warning: 232,167,55;     /* #E8A737; */
   --warningLight: 253,247,238;/* #fdf7ee; */
   --warningDark: 52,35,6;    /* #342306; */

   --error: 183,51,46;         /* #B7332E; */
   --errorLight: 250,235,234; /* #faebea; */
   --errorDark: 40,11,10;     /* #280b0a; */


   --base: var(--light-0);
   --base-50: var(--light-50);
   --base-100: var(--light-100);
   --base-200: var(--light-200);
   --base-rgb: var(--light-rgb);

   --contrast: var(--dark-0);
   --contrast-50: var(--dark-50);
   --contrast-100: var(--dark-100);
   --contrast-200: var(--dark-200);
   --contrast-rgb: var(--dark-rgb);

   --successBack: var(--successLight);
   --successText: var(--successDark);
   --warningBack: var(--warningLight);
   --warningText: var(--warningDark);
   --errorBack: var(--errorLight);
   --errorText: var(--errorDark);
}

body:has(#theme-switcher:checked){
   --action-50: #db006e;
   --action-100: #b8005c;
   --action-200: #94004a;
   --secondary-50: #d89f00;
   --secondary-100: #b58500;
   --secondary-200: #916a00;
   --action-50: 219,0,110;     /* #db006e; */
   --action-100: 184,0,92;     /* #b8005c; */
   --action-200: 148,0,74;     /* #94004a; */

   --secondary-50: 216,159,0;  /* #d89f00; */
   --secondary-100: 181,133,0; /* #b58500; */
   --secondary-200: 145,106,0; /* #916a00; */


   --contrast: var(--light-0);
   --contrast-50: var(--light-50);
   --contrast-100: var(--light-100);
   --contrast-200: var(--light-200);
   --contrast-rgb: var(--light-rgb);

   --base: var(--dark-0);
   --base-50: var(--dark-50);
   --base-100: var(--dark-100);
   --base-200: var(--dark-200);
   --base-rgb: var(--dark-rgb);

   --successBack: var(--successDark);
   --successText: var(--successLight);
@@ -199,6 +197,7 @@
   src: url('./assets/fonts/josefin-sans-v34-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/josefin-sans-v34-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

.home .video-cover.video-cover {
   margin-top: 0;
}
@@ -209,15 +208,15 @@
.scroll-progress .bar {
   background:
      linear-gradient(90deg,
      rgba(var(--action-rgb),.8) 0%,
      rgba(var(--action-rgb),1) 40%,
      rgba(var(--action-rgb),.8) 100%);
      rgba(var(--action-0),.8) 0%,
      rgba(var(--action-0),1) 40%,
      rgba(var(--action-0),.8) 100%);
   position: relative;

   box-shadow:
      0 0 4px rgba(var(--action-rgb),.9),
      0 0 8px rgba(var(--action-rgb),.7),
      0 0 16px rgba(var(--action-rgb),.4);
      0 0 4px rgba(var(--action-0),.9),
      0 0 8px rgba(var(--action-0),.7),
      0 0 16px rgba(var(--action-0),.4);
}
#theme-switch#theme-switch {
   position: absolute;
@@ -244,14 +243,14 @@
.eltrs {
   min-height: 40vh;
   width: 100vw;
   background-color: var(--action-0);
   background-color: rgb(var(--action-0));
   --justify: center;
   --align: center;
}
.eltrs h2 {
   font-family: var(--body);
   font-weight: var(--fw-h-bold);
   color: var(--action-contrast);
   color: rgb(var(--action-contrast));
   text-align: center;
   margin: 0;
   font-size: var(--txt-large);
@@ -318,9 +317,9 @@
   font-size: var(--txt-xxx-large);
   height: var(--width);
   width: var(--width);
   /*border: 1rem solid var(--base-200);*/
   background-color: var(--action-0);
   color: var(--action-contrast);
   /*border: 1rem solid rgb(var(--base-200));*/
   background-color: rgb(var(--action-0));
   color: rgb(var(--action-contrast));
   display: flex;
   justify-content: center;
   align-items: center;
@@ -331,7 +330,7 @@
   border: 4px solid var(--action-200);
   border-left: 0;
   border-top: 0;
   box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
   box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}

@media (min-width: 768px) {
@@ -370,7 +369,7 @@
/* width: 100%;*/
/*}*/
main > section:nth-of-type(even) {
   background-color: var(--base-100);
   background-color: rgb(var(--base));
   max-width: 100vw;
   padding: 3rem 0;
}
@@ -385,8 +384,8 @@

section.pre-footer {
   min-height: 25vh;
   background-color: var(--secondary-0);
   color: var(--secondary-contrast);
   background-color: rgb(var(--secondary-0));
   color: rgb(var(--secondary-contrast));
   display: flex;
   justify-content: center;
   align-items: center;
@@ -402,19 +401,53 @@
   margin-top: 0;
}
.pre-footer a {
   background-color: var(--secondary-contrast);
   background-color: rgb(var(--secondary-contrast));
   padding: 0 .125rem;
   border-radius: 4px;
}

a{
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: rgb(var(--action-0));
}

a::before {
   content: '';
   background-color: rgba(var(--action-0), .8);
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   opacity: 0;
   border-radius: 50%;
}

p a:hover {
   text-shadow: 1px 0 10px rgb(var(--action-0));
   background-color: transparent!important;
   color: rgb(var(--action-contrast))!important;
   border-color:transparent!important;
}
   p a:hover::before {
      opacity: 1;
      filter: blur(1.666em);
      transition: var(--trans-color);
   }



.triangle {
   padding: 2rem 2rem 0;
   --justify: flex-end;
   position: relative;
   background-color: var(--action-0);
   color: var(--action-contrast);
   background-color: rgb(var(--action-0));
   color: rgb(var(--action-contrast));
}
.excerpt::after,
.triangle::after {
@@ -425,7 +458,7 @@
   height: 0;
   border-left: 32px solid transparent;
   border-right: 32px solid transparent;
   border-top: 32px solid var(--action-0);
   border-top: 32px solid rgb(var(--action-0));
   clear: both;
}
.excerpt::after {
@@ -449,7 +482,7 @@
   position: relative;
   margin-right: 1rem;
   padding: 1rem 15vw 1rem 0;
   border-bottom: 4px solid var(--action-0);
   border-bottom: 4px solid rgb(var(--action-0));
   margin-bottom: 6rem;
   grid-column: full;
   max-width: var(--narrow);
@@ -462,7 +495,7 @@
   vertical-align: bottom;
   line-height: 1.4;
   /*margin-right: .75rem;*/
   color: var(--action-0);
   color: rgb(var(--action-0));
   position: relative;
   left: -2rem;
   cursor: pointer;
@@ -471,7 +504,7 @@
   font-weight: var(--fw-b-light);
   font-size: var(--txt-medium);
   left: 0;
   color: var(--contrast);
   color: rgb(var(--contrast));
}
.align-full.triangle:has(+.contact) {
   margin-bottom: 0;
@@ -481,8 +514,8 @@
   gap: 1.5rem;
   margin-top: -.5rem;
   padding-bottom: 2rem;
   background-color: var(--base-100);
   color: var(--contrast-200);
   background-color: rgb(var(--base-100));
   color: rgb(var(--contrast-200));
   max-width: none;
}
@media (min-width: 768px) {
@@ -492,16 +525,16 @@
}
section.contact .buttons li a,
section.contact .socials a {
   background-color: var(--base-50);
   background-color: rgb(var(--base-50));
}
section.contact .buttons li a:hover,
section.contact .buttons li a:focus,
section.contact .socials a:hover,
section.contact .socials a:focus {
   background-color: var(--action-0);
   background-color: rgb(var(--action-0));
}
section.contact.triangle::after {
   border-top-color: var(--base-100);
   border-top-color: rgb(var(--base-100));
}
section.contact h2 {
   margin: 2rem 0 0;
@@ -517,7 +550,7 @@
section.contact h2::after {
   content: '';
   height: 2px;
   background-color: var(--contrast-200);
   background-color: rgb(var(--contrast-200));
   border-radius: 4px;
   width: 100%;
   position:relative;
@@ -555,17 +588,17 @@
}

span.logo .icon-logo-triangle {
   background-color: var(--action-0);
   background-color: rgb(var(--action-0));
   --w:4rem;
}
span.logo .icon-logo-text-only {
   --w: 8rem;
}
a .icon-logo-text-only {
   background-color: var(--contrast);
   background-color: rgb(var(--contrast));
}
a:hover .icon-logo-text-only {
   background-color: var(--action-0);
   background-color: rgb(var(--action-0));
}
span.logo:hover .icon-logo-triangle {

@@ -615,14 +648,134 @@
.directory-list .image .icon {
   transform: rotate(90deg);
   --w: 40px;
   color: var(--action-0);
   color: rgb(var(--action-0));
   position: absolute;
   left: calc(50% - 15px);
}
body.progress .term-list li {
   flex-wrap: wrap;
   display: flex;
   gap: .5em;
   align-items: center;
}

.timeline.terms {
   width: 100%;
}


.loop .item-grid .progress {
   aspect-ratio: 3/2;
   position: relative;
}

.loop .item-grid .progress figure {
   width: 100%;
   height: 100%;
   display: flex;
   gap: .125rem;
   background-color: rgb(var(--action-0));
   position: relative;
}

.loop .item-grid .progress figure span {
   position: absolute;
   width: 50%;
   text-transform: uppercase;
   background-color: rgba(var(--action-0),var(--op-4));
   color: rgb(var(--action-contrast));
   padding: 0 .25rem;
}

.loop .progress figure img {
   max-width: 50%;
   object-fit: cover;
}

figure .after {
   top: 0;
   right:0;
}

figure .before {
   bottom: 0;
   left: 0;
}

[data-field="goal"] fieldset {
   grid-template-columns: repeat(1, 1fr)!important;
}


blockquote {
   max-width: min(648px, 90vw);
   --background: rgb(var(--base-100));
   --border: rgb(var(--action-0));
   line-height: 1.2;
   padding: var(--btn);
   border-radius: 4rem;
   background-color: var(--background);
}
   .gmb-reviews blockquote {
      border-top: 0;
      max-width: min(648px, 95vw);
   }

blockquote .content {
   margin: 12px 0;
   position: relative;
   font-family: var(--heading);

   padding: 1.5rem;
   border-radius: var(--radius-outer);
   border: 2px solid var(--border);
}

blockquote .content::before,
blockquote .content::after {
   position: absolute;
   content: '';
   left: 50px;
}

blockquote .content::before {
   width: 80px;
   border: 6px solid var(--background);
   bottom: -3px;
   z-index: 2;
}

blockquote .content::after {
   border: 2px solid var(--border);
   border-radius: 0 100% 0 0;
   width: 60px;
   height: 60px;
   bottom: -60px;
   border-bottom: 0;
   border-left: 0;
   z-index: 3;
}

blockquote cite {
   /*padding: 15px 0 0 12px;*/
   padding: 0!important;
   margin: 0 0 0 150px!important;
   z-index: 1;
}

.gmb-reviews ul li {
   padding: 1rem 1rem 2rem;
}

dialog .item-info header {
   height: max-content;
   text-align: left;
}
   dialog .item-info * {
      font-size: var(--txt-medium)!important;
   }
   dialog .item-info header h2 .icon {
      display: none;
   }
   dialog .item-info header ul {
      margin: 0;
   }