=gitblit switch

Jake Vanderwerf

3 hours ago 73846815bb02a89180b148a38e30a03981028692

 all.css

@@ -5,100 +5,144 @@
Author:         Jake
Author URI:     https://jakevan.ca/
Template:       jvb-theme
Version:        0.1.0
Version:        0.1.5
!*/
:root{
   --filter: grayscale(.3) sepia(.4);

   /** Download your Fonts from: https://gwfh.mranftl.com/ **/
   --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --heading: 'Josefin Sans', var(--font-base);
   --body: 'Open Sans', var(--font-base);
   --fw-h: 300;
   --fw-h-light: 300;
   --fw-h-bold: 700;
   --fw-b: 500;
   --fw-b-bold: 800;
   --fw-b-light: 300;
   --heading: 'Open Sans', var(--font-base);
   --body: 'Montserrat', var(--font-base);
   --fw-h: 900;
   --fw-h-light: 400;
   --fw-h-bold: 800;
   --fw-b: 400;
   --fw-b-bold: 900;
   --fw-b-light: 200;

   --txt-small: clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem);
   --txt-x-small: clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem);
   --txt-medium: clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem);
   --txt-x-medium: clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem);
   --txt-large: clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem);
   --txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem);
   --txt-xx-large: clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem);
   --txt-xxx-large: clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem);
   --txt-enormous: calc(26vh - 4rem);

   /* Colours
   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: 237,237,244;    /* #ededf4; */
   --light-50: 227,227,238;   /* #e3e3ee; */
   --light-100: 218,218,232;  /* #dadae8; */
   --light-200: 209,209,227;  /* #d1d1e3; */

   --dark-0: #151515;
   --dark-50: #222222;
   --dark-100: #2e2e2e;
   --dark-200: #3b3b3b;
   --dark-rgb: 21,21,21;
   --dark-0: 42,43,42;        /*    #2a2b2a; */
   --dark-50: 47,48,47;    /* #2f302f; */
   --dark-100: 57,58,57;      /* #393a39; */
   --dark-200: 62,64,62;      /* #3e403e; */

   --action-0: #ff0080;
   --action-50: #ff2492;
   --action-100: #ff47a4;
   --action-200: #ff6bb5;
   --action-rgb: 255,0,128;
   --action-0: 239,118,122;   /* #ef767a; */
   --action-50: 242,141,144;  /* #f28d90; */
   --action-100: 244,164,166; /* #f4a4a6; */
   --action-200: 247,187,189; /* #f7bbbd; */
   --action-contrast: var(--light-0);

   --secondary-0: #D69121;
   --secondary-50: #ffc421;
   --secondary-100: #ffcd44;
   --secondary-200: #ffd768;
   --secondary-rgb: 252,185,0;
   --secondary-0: 50,157,203; /* #329dcb; */
   --secondary-50: 90,177,214;   /* #5ab1d6; */
   --secondary-100: 131,196,224;/* #83c4e0; */
   --secondary-200: 172,216,234;/* #acd8ea; */
   --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: 34,197,94;      /* #22C55E; */
   --successLight: 212,237,218;/* #d4edda; */
   --successDark: 21,87,36;   /* #155724; */

   --warning: 232,167,55;     /* #E8A737; */
   --warningLight: 246,229,203;/* #F6E5CB; */
   --warningDark: 35,24,6;    /* #231806; */

   --error: 239,68,68;        /* #EF4444; */
   --errorLight: 248,215,218; /* #f8d7da; */
   --errorDark: 114,28,36;    /* #721c24; */


   --red-0: 239,118,122;      /* #ef767a; */
   --red-50: 236,95,100;      /* #ec5f64; */
   --red-100: 234,72,78;      /* #ea484e; */
   --red-200: 231,50,56;      /*    #e73238; */
   --red-contrast: var(--dark-0);

   --orange-0: 239,158,118;   /* #ef9e76; */
   --orange-50: 242,174,141;  /* #f2ae8d; */
   --orange-100: 244,190,164; /* #f4bea4; */
   --orange-200: 247,207,187; /* #f7cfbb; */
   --orange-contrast: var(--dark-0);

   --yellow-0: 227,190,57;    /* #E3BE39; */
   --yellow-50: 233,205,102;  /* #e9cd66; */
   --yellow-100: 240,219,146; /* #f0db92; */
   --yellow-200: 246,234,191; /* #f6eabf; */
   --yellow-contrast: var(--dark-0);

   --green-0: 50,203,130;     /* #32cb82; */
   --green-50: 90,214,155;    /* #5ad69b; */
   --green-100: 131,224,180;  /* #83e0b4; */
   --green-200: 172,234,204;  /* #aceacc; */
   --green-contrast: var(--dark-0);

   --blue-0: 50,157,203;      /* #329dcb; */
   --blue-50: 90,177,214;     /* #5ab1d6; */
   --blue-100: 131,196,224;   /* #83c4e0; */
   --blue-200: 172,216,234;   /* #acd8ea; */
   --blue-contrast: var(--dark-0);

   --purple-0: 186,118,239;   /* #ba76ef; */
   --purple-50: 197,141,242;  /* #c58df2; */
   --purple-100: 209,164,244; /* #d1a4f4; */
   --purple-200: 220,187,247; /* #dcbbf7; */
   --purple-contrast: var(--dark-0);


   --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: 236,95,100;   /* #ec5f64; */
   --action-100: 234,72,78;   /* #ea484e; */
   --action-200: 231,50,56;   /* #e73238; */

   --secondary-50: 40,125,162;   /* #287da2; */
   --secondary-100: 30,94,121;   /* #1e5e79; */
   --secondary-200: 20,62,80; /* #143e50; */

   --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);
@@ -106,9 +150,696 @@
   --warningText: var(--warningLight);
   --errorBack: var(--errorDark);
   --errorText: var(--errorLight);

   --red-50: 236,95,100;      /* #ec5f64; */
   --red-100: 234,72,78;      /* #ea484e; */
   --red-200: 231,50,56;      /* #e73238; */
   --red-contrast: var(--light-0);

   --orange-50: 236,142,95;   /* #ec8e5f; */
   --orange-100: 234,126,72;  /* #ea7e48; */
   --orange-200: 231,110,50;  /* #e76e32; */
   --orange-contrast: var(--light-0);

   --yellow-50: 204,166,29;   /* #cca61d; */
   --yellow-100: 159,130,23;  /* #9f8217; */
   --yellow-200: 115,93,16;   /* #735d10; */
   --yellow-contrast: var(--light-0);

   --green-50: 40,162,104;    /* #28a268; */
   --green-100: 30,121,78;    /* #1e794e; */
   --green-200: 20,80,51;     /* #145033; */
   --green-contrast: var(--light-0);

   --blue-50: 40,125,162;     /* #287da2; */
   --blue-100: 30,94,121;     /* #1e5e79; */
   --blue-200: 20,62,80;      /* #143e50; */
   --blue-contrast: var(--dark-0);

   --purple-50: 163,72,234;   /* #a348ea; */
   --purple-100: 140,27,228;  /* #8c1be4; */
   --purple-200: 112,21,183;  /* #7015b7; */
   --purple-contrast: var(--light-0);
}

body {
   overflow-x: clip;
}
/*** FONTS START **/
/** Download your Fonts from: https://gwfh.mranftl.com/
use ./assets/fonts/ as a base
**/
/* open-sans-regular - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-italic - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
   src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800 - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 800;
   src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800italic - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 800;
   src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* montserrat-200 - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 200;
   src: url('./assets/fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-200italic - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 200;
   src: url('./assets/fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-regular - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('./assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-italic - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 400;
   src: url('./assets/fonts/montserrat-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/montserrat-v31-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-900 - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 900;
   src: url('./assets/fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-900italic - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 900;
   src: url('./assets/fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/*** FONTS END ***/
body.art.art, .art {
   --action-0: var(--blue-0);
   --action-50: var(--blue-50)!important;
   --action-100: var(--blue-100)!important;
   --action-200: var(--blue-200)!important;
   --action-contrast: var(--blue-contrast)!important;
}
body.design.design, .design {
   --action-0: var(--red-0);
   --action-50: var(--red-50)!important;
   --action-100: var(--red-100)!important;
   --action-200: var(--red-200)!important;
   --action-contrast: var(--red-contrast)!important;
}
body.development.development, .development {
   --action-0: var(--orange-0);
   --action-50: var(--orange-50)!important;
   --action-100: var(--orange-100)!important;
   --action-200: var(--orange-200)!important;
   --action-contrast: var(--orange-contrast)!important;
}
body.strategy.strategy, .strategy {
   --action-0: var(--green-0);
   --action-50: var(--green-50)!important;
   --action-100: var(--green-100)!important;
   --action-200: var(--green-200)!important;
   --action-contrast: var(--green-contrast)!important;
}
body.writing.writing, .writing {
   --action-0: var(--purple-0);
   --action-50: var(--purple-50)!important;
   --action-100: var(--purple-100)!important;
   --action-200: var(--purple-200)!important;
   --action-contrast: var(--purple-contrast)!important;
}
body.project.project, .project {
   --action-0: var(--yellow-0);
   --action-50: var(--yellow-50)!important;
   --action-100: var(--yellow-100)!important;
   --action-200: var(--yellow-200)!important;
   --action-contrast: var(--yellow-contrast)!important;
}

a {
   color: rgb(var(--action-0));
}
   a:visited {
      color: rgb(var(--action-100));
   }
   a.current.current,
   a:hover,
   a:focus,
   a:visited:hover,
   a:visited:focus {
      background-color: rgb(var(--action-0));
      color: rgb(var(--action-200));
   }


li {
   list-style: inside;
   padding-left: 1em;
}

.dashboard li {
   list-style: none;
   padding-left: 0;
}

.condensed.condensed a {
   color: rgb(var(--contrast));
   border-radius: 0;
   border-bottom: 2px solid rgb(var(--action-0));
   padding: .25rem 1rem;
}
   .condensed.condensed a:hover,
   .condensed.condensed a:focus {
      color: var(--action-contrast);
   }

.intro + nav {
   grid-column: full;
   margin: 0!important;
}
/* .intro + nav ul {*/
/*    width: 100%;*/
/* }*/
/* .intro + nav li,*/
/* .intro + nav a {*/
/*    min-height: var(--chip_);*/
/* }*/


:is(h1, h2, h3, h4, h5, h6) {
   margin: 1.5em auto .25em 1.5rem;
}
h1 {
   margin: 0 auto .25em 1.5rem;
}
.pre-footer {
   background: rgb(var(--base));
   padding: 3rem 0 2rem;
}
.pre-footer p {
   margin: 0 auto .25rem 1rem;
}
.pre-footer a {
   background-color: rgb(var(--action-0));
   color: rgb(var(--action-contrast));
}

footer {
   margin: 0;
   padding: 1rem 2rem;
}
footer p {
   text-align: left;
}

.buttons {
   margin: 1rem auto 1rem 1.5rem;
}

footer nav.condensed ul {
   --justify: flex-start;
   --gap: 0 .5rem;
   margin-bottom: 1rem;
}

.wp-site-blocks.wp-site-blocks > header {
   --justify: center;
   gap: 1rem;
}
header .icon-logo {
   --w: var(--chipchip);
}
header .icon-jakevan {
   --w: var(--btn_);
   margin-left: 1rem;
}
header p {
   width: max-content;
}
#theme-switch {
   position: absolute;
   left: 1rem;
}
section.intro {
   --w: min(40vw, 350px);
   height: max-content;
}
   section.intro .icon {
      margin: 0;
   }
   section.intro h1 {
      max-width: var(--w);
   }
.home .media-text {
   --w: min(40vw, 350px);
   height: max-content;
}
.home .media-text figure,
.home .media-text >div {
   margin: 0;
   width: var(--w);
   padding: 2rem 0 2rem 2rem;
}
.home h1 {
   font-size: var(--txt-medium);
   font-family: var(--body);
   font-weight: var(--fw-b-light);
   text-transform: none;
   margin: 0;
}
@media (min-width:768px) {
   .home h1 {
      font-size: var(--txt-x-large);
   }
}
footer {
   z-index: var(--z-9);
   padding: 1rem 2rem!important;
}
@media (min-width:768px) {
   .w-50 {
      max-width: calc(50% - 3rem)!important;
      margin: 0 1rem!important;
   }
}
main > * {
   margin-left: var(--btn)!important;
}
main > section {
   max-width: 100vw;
   padding: 3rem var(--btn) 3rem 1.5rem;
   margin-left: 0!important;
}
main > section:nth-of-type(even) {
   background-color: rgb(var(--base-100));
}
main > section > * {
   width: 100%;
   max-width: var(--content);
   margin-left: 1.5rem!important;
}

main > section.callout:last-of-type {
   margin-bottom: 0;
}

nav.fixed.bottom {
   transition: var(--trans-size);
}
.drawer.open + .fixed.bottom {
   width: calc(100% - 240px);
   transition: var(--trans-size);
}

.cover {
   padding: 0;
   color: rgb(var(--action-0));
   background-color: rgb(var(--action-200));
}
   .cover.alt {
      min-height: 0;
   }
   .cover > .content {
      background-color: rgba(var(--base), var(--op-6));
      width: 100%;
      margin: 0 !important;
      color: rgb(var(--contrast));
      padding: 2rem var(--btn) 2rem 2rem;
   }
      .cover h1 {
         margin: 0;
      }
   .cover > img {
      margin-left: 0!important;
   }
   .cover.alt > svg {
      max-width: none;
      margin: 0 auto!important;
   }
.cover.alt + header#top {
   margin: 0!important;
   grid-column: full;
   padding-right: var(--btn_);
}
   .cover.alt + header h1 {
      line-height: .75;
      margin: 0 0 0 .5rem;
   }
   .cover.alt + #top h1 small {
      line-height: 1;
   }

   @media (min-width: 768px) {
      .cover.alt > svg {
         max-width: 40vw;
         margin: 0!important;
      }
      .cover.alt + #top {
         flex-direction: column;
         position: absolute;
         right: 0;
         top: 35vw;
         max-width: 60vw;
         grid-column: narrow;
         z-index: 10;
         color: rgb(var(--action-contrast));
         padding: 0 var(--btn_) 0 0!important;
      }
      .cover.alt + #top a {
         background-color: rgba(var(--action-0),var(--op-5));
         color: rgb(var(--action-contrast));
      }
         .cover.alt + #top a:hover,
         .cover.alt + #top a:focus {
            background-color: rgb(var(--action-contrast));
            color: rgb(var(--action-0));
         }
   }

.halftone::before {
   content: '';
   position:absolute;
   inset:0;
   background: radial-gradient(#fff, #888) 0 0 / 1em 1em, radial-gradient(circle at bottom left, #fff, #000);
   background-blend-mode: multiply;
   filter: contrast(50) blur(2px) contrast(4);
   mix-blend-mode: darken;
}
.halftone::after {
   z-index: 1;
   background: rgb(var(--base-50));
   mix-blend-mode: lighten;
   content: '';
   position:absolute;
   inset:0;
}
/**** END THIS ONE WORKS WELL **/

#top h1 small {
   margin: 0;
   line-height: .5;
}
#top p {
   margin-left: auto;
   font-size:var(--txt-x-small);
}

h2.subtitle {
   font-weight: var(--fw-h-light);
   text-transform: none;
   font-size: var(--txt-medium);
   margin: .5rem 0;
}

figure {
   margin: 0;
}
.loading[open] .spinner {
   display: none;
}
.loading[open] i.icon {
   --w: var(--txt-enormous);
   background-color: rgb(var(--action-0));
   animation: spin .36s var(--trans-fn) infinite;
}


.row.services {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   padding-bottom: 2rem;
}
   .row.services h2 {
      margin: 1.5em 0 .25rem;
      font-size: var(--txt-x-medium);
   }

section#gallery div {
   max-width: var(--wide);
   display: grid;
   gap: 5px;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-auto-rows: 200px;
}
#gallery div figure img {
   width:100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1);
   transition: var(--trans-transform);
}
   #gallery div figure:hover img {
      transform: scale(1.05);
   }

#gallery div figure:nth-of-type(3n+1) {
   padding: 15px;
}
#gallery div figure:nth-of-type(5n+1) {
   padding: 25px;
}
/*section#gallery div img:nth-of-type(3n+1) {*/
/* padding: 1rem;*/
/*}*/

#gallery div figure:nth-of-type(6n + 1),
#gallery div figure:nth-of-type(6n + 5){
   grid-row: span 2;
}

#gallery div figure:nth-of-type(6n + 0),
#gallery div figure:nth-of-type(6n + 6){
   grid-column: span 2;
}
#gallery div figure:nth-of-type(6n+4) {
   grid-column: span 2;
   grid-row: span 2;
}

/*#gallery div img:nth-of-type(3n+2) {*/
/* grid-row: span 1;*/
/* grid-column: span 2;*/
/*}*/


.needs-wants.needs-wants {
   max-width: var(--wide);
   margin: 0!important;
}
details.info {
   max-width: var(--wider);
}
   .needs-wants .info{
      max-width: var(--content);
   }
   .needs-wants li {
      list-style: none;
      padding:0;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
   }
   .needs-wants h3 {
      margin: 4rem 0 2rem;
   }
   @media (min-width: 768px) {

      .needs-wants img {
         max-width: 45%;
         margin-right: 4%;
         position:sticky;
         top: var(--btnbtn);
      }
      .needs-wants img + .info {
         max-width: 50%;
         display: inline-block;
      }
   }

.term-list .title {
   text-transform: none;
   padding: 0;
}

#summary .summary {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   max-width: var(--wide);
}
#summary .summary .term-list {
   height: var(--chipchip);
}
#summary .summary > li {
   list-style: none;
   height: var(--chipchip)
}
#summary .summary .icon {
   --w: 1.5em;
   margin-right: 1rem;
}

#summary .summary > li span:first-of-type {
   margin-right: 1.5rem;
}

.project-list.item-grid.list-view img {
   width: 100%;
}
.project-list h3 {
   font-size: var(--txt-large);
   margin: 0;
}

@media (min-width: 768px) {
   #summary .summary {
      grid-template-columns: repeat(2, 1fr);
   }
}

body:has(.on-this-page) .qtoggle {
   bottom: calc(var(--btn_) + var(--btn_));
}


.index.open.open {
   max-height: var(--maxHeight);
   height: max-content;
}

.development .item-grid .item .images {
   aspect-ratio: 16/9;
}

.main-actions.main-actions .buttons.buttons {
   bottom: unset;
   top: var(--btn_);
   right: 0!important;
}

aside.main.right {
   padding-bottom: 0;
   padding-top: var(--btn);
}
   aside.main.right.expanded {
      right: var(--btn);
   }
.main-actions button.expanded {
   border-top-left-radius: var(--radius-outer);
   border-bottom-left-radius: var(--radius);
   right: var(--btn);
}


/****************************************************************
CONTENT LIST
****************************************************************/
ul.content-term-list {
   margin-left:0!important;
   margin-right: 0!important;
   grid-column: full;
   max-width: var(--full);
}
   ul.content-term-list > li {
      padding: var(--sp3) var(--btn_) var(--sp3) 0;
      list-style: none;
   }
      ul.content-term-list > li:nth-of-type(even) {
         background-color: rgb(var(--base-100));
      }
   ul.content-term-list img {
      width: 40vw;
      max-inline-size: none;
   }

   .content-term-list .cover {
      padding-bottom: 0;
      min-height: 40vh;
   }
      .content-term-list .cover::before {
         display: none;
      }
      .content-term-list .cover .content {
         background-color: rgba(var(--base), var(--op-6));
         width: 100%;
         border-radius: 1rem 1rem 0 0;
         padding: 1rem;
      }
      .content-term-list .cover h2 {
         margin: 0;
      }


.feed-block .item-grid {
   padding-right: var(--btnbtn);
}


div.poster {
   height: 20vh;
   grid-column: full;
   max-width: 100vw;
   margin: 0!important;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

@media (min-width: 768px) {
   div.poster {
      height: 35vh;
      background-size: cover;
   }
}

.cover.cover  {
   padding: 0;
}