Jake Vanderwerf
4 hours ago 3cef7779cbe8c740106df196b9dd588748bd962d
style.css
@@ -1,9 +1,448 @@
/*
Theme Name:     Legacy
Theme URI:
Description:    Jvb-theme child theme.
Author:         Me
Author URI:
Theme Name:     Lynsey Theme
Theme URI:      https://lynseyot.ca
Description:    Jvb-theme child theme, for Lynsey.
Author:         Jake
Author URI:     https://jakevan.ca/
Template:       jvb-theme
Version:        0.1.0
Text Domain: lyns
*/
:root{
    /** 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: 'Source Serif 4', var(--font-base);
    --body: 'Montserrat', var(--font-base);
   --fw-h: 300;
   --fw-h-light: 300;
    --fw-h-bold: 700;
   --fw-b: 400;
   --fw-b-bold: 900;
   --fw-b-light: 200;
   /* 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: #fdf9f7;
    --light-50: #fbf4ee;
    --light-100: #faeee6;
    --light-200: #f8e8dd;
    --light-rgb: 253,249,247;
    --dark-0: #0d0a08;
    --dark-50: #16110e;
    --dark-100: #201914;
    --dark-200: #292019;
    --dark-rgb: 13,10,8;
    --action-0: #c85604;
    --action-50: #dc5f04;
    --action-100: #f06705;
    --action-200: #fa710f;
    --action-rgb: 200,86,4;
    --secondary-0: #90D932;
    --secondary-50: #99dc43;
    --secondary-100: #a3df54;
    --secondary-200: #ace366;
    --secondary-rgb: 131,217,50;
    --success: #7cf067;
    --successLight: #f4fef2;
    --successDark: #0d3906;
    --successBack: var(--successLight);
    --successText: var(--successDark);
    --warning: #F0B967;
    --warningLight: #fef9f2;
    --warningDark: #221503;
    --warningBack: var(--warningLight);
    --warningText: var(--warningDark);
    --error: #BF3434;
    --errorLight: #fcf6f6;
    --errorDark: #471313;
    --errorBack: var(--errorLight);
    --errorText: var(--errorDark);
    --action-contrast: var(--light-0);
    --secondary-contrast: var(--light-0);
    --rgba-subtle: rgba(var(--c),.5);
    --rgba-subtle-hover: rgba(var(--c),.1);
    --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);
}
body:has(#theme-switcher:checked){
   --action-0: #c85604;
   --action-50: #dc5f04;
   --action-100: #f06705;
   --action-200: #fa710f;
   --action-rgb: 200,86,4;
   --secondary-0: #90D932;
   --secondary-50: #99dc43;
   --secondary-100: #a3df54;
   --secondary-200: #ace366;
   --secondary-rgb: 131,217,50;
   --success: #7cf067;
   --successLight: #f4fef2;
   --successDark: #0d3906;
   --successBack: var(--successLight);
   --successText: var(--successDark);
   --warning: #F0B967;
   --warningLight: #fef9f2;
   --warningDark: #221503;
   --warningBack: var(--warningLight);
   --warningText: var(--warningDark);
   --error: #BF3434;
   --errorLight: #fcf6f6;
   --errorDark: #471313;
   --errorBack: var(--errorLight);
   --errorText: var(--errorDark);
   --action-contrast: var(--light-0);
   --secondary-contrast: var(--light-0);
   --base: var(--light-0);
   --base-50: var(--light-50);
   --base-100: var(--light-100);
   --base-200: var(--light-200);
   --contrast: var(--dark-0);
   --contrast-50: var(--dark-50);
   --contrast-100: var(--dark-100);
   --contrast-200: var(--dark-200);
   --base-rgb: var(--light-rgb);
   --contrast-rgb: var(--dark-rgb);
}
/*** FONTS START **/
/** Download your Fonts from: https://gwfh.mranftl.com/
use ./assets/fonts/ as a base
**/
/* 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+ */
}
/* source-serif-4-300 - 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: 'Source Serif 4';
    font-style: normal;
    font-weight: 300;
    src: url('./assets/fonts/source-serif-4-v14-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./assets/fonts/source-serif-4-v14-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-serif-4-300italic - 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: 'Source Serif 4';
    font-style: italic;
    font-weight: 300;
    src: url('./assets/fonts/source-serif-4-v14-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./assets/fonts/source-serif-4-v14-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-serif-4-700 - 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: 'Source Serif 4';
    font-style: normal;
    font-weight: 700;
    src: url('./assets/fonts/source-serif-4-v14-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./assets/fonts/source-serif-4-v14-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-serif-4-700italic - 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: 'Source Serif 4';
    font-style: italic;
    font-weight: 700;
    src: url('./assets/fonts/source-serif-4-v14-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./assets/fonts/source-serif-4-v14-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/*** FONTS END ***/
:root {
    --bg-blend:          luminosity;
    --blur:              0px;
    --fg-blend:          overlay;
    --opacity:           0.9028149706380943;
    --spacing:           0px;
}
/*.img-wrapper {*/
/*    background-color:    var(--action-0);*/
/*    display:             flex;*/
/*    flex:                1 1 100%;*/
/*    height:              100%;*/
/*    overflow:            hidden;*/
/*    padding:             var(--spacing);*/
/*    position:            relative;*/
/*}*/
/*.img-wrapper img {*/
/*    filter:              grayscale(100%) contrast(1) blur(var(--blur));*/
/*    flex:                1 0 100%;*/
/*    height:              100%;*/
/*    max-width:           100%;*/
/*    mix-blend-mode:      var(--bg-blend);*/
/*    object-fit:          cover;*/
/*    opacity:             var(--opacity);*/
/*    position:            relative;*/
/*    width:               100%;*/
/*}*/
/*.img-wrapper::before {*/
/*    background-color:    var(--contrast-50);*/
/*    bottom:              0;*/
/*    content:             '';*/
/*    height:              100%;*/
/*    left:                0;*/
/*    mix-blend-mode:      var(--fg-blend);*/
/*    position:            absolute;*/
/*    right:               0;*/
/*    top:                 0;*/
/*    width:               100%;*/
/*    z-index:             1;*/
/*}*/
.wp-site-blocks > header {
   flex-direction: column;
   align-items: flex-start!important;
   justify-content: flex-start!important;
   height: max-content!important;
   min-height: var(--btn);
   --gap: 0;
   padding: 0!important;
}
   #theme-switch#theme-switch {
      position: absolute;
      top: 1rem;
      left: 1rem;
   }
   .wp-site-blocks > header a[rel=home] {
      position: relative;
   }
   .wp-site-blocks > header > div.row {
      width: 100%;
      --gap: 0 2rem;
      --justify: flex-start;
      --align: center;
      --w: var(--btn);
      padding: 0 1rem 0 var(--btn_);
      height: var(--btn);
      min-height: var(--btn);
   }
      .icon-logo.icon-logo {
         background-color: var(--action-0);
         margin: 0 0 0 2rem;
      }
      .wp-site-blocks > header p {
         margin: 0;
         width: max-content;
      }
      .wp-site-blocks > header p + p {
         font-size: var(--txt-small);
      }
      .wp-site-blocks > header nav {
         width: 100%;
         --height: 3rem;
         background-color: var(--base-200);
      }
         .wp-site-blocks > header nav ul {
            width: 100%;
         }
         .wp-site-blocks > header nav li+li::before {
            display: none;
         }
         .wp-site-blocks > header nav a {
            padding: .25rem .5rem;
            color: var(--contrast);
         }
         .wp-site-blocks > header nav a:hover,
         .wp-site-blocks > header nav a:focus {
            color: var(--action-contrast);
         }
header .title.title {
    position: relative;
    height: fit-content;
    text-transform: uppercase;
    font-weight: var(--fw-h);
    font-family: var(--heading);
}
footer {
   margin: 0!important;
}
main > *:last-child {
   margin-bottom: 0!important;
}
@media (min-width:768px){
   .wp-site-blocks > header > div.row {
      --wrap: nowrap;
   }
   footer {
      padding: 1rem 2rem;
   }
}
nav.fixed.bottom.bottom, nav.on-this-page.on-this-page {
   width: 100vw;
}
nav.fixed.bottom .icon {
   margin: 0 1rem;
}
nav.fixed.bottom span {
   margin-right: 1rem;
}
h1:first-of-type  {
   margin-top: 4rem!important;
}
.callout p {
   text-align: center;
}
footer nav {
   margin-bottom: 1rem;
}
footer p.font-small.font-small {
   margin: 0;
}
section:nth-of-type(even) {
   background-color: var(--base-100);
   max-width: none;
   padding: 2rem 0;
}
section:nth-of-type(even) > * {
   max-width: var(--content);
}
.cover.cover::before {
   mix-blend-mode: hue;
}
.cover.hank > img {
   opacity: 1;
   mix-blend-mode: normal;
   height: 100vh;
   position: fixed;
   z-index: -1;
}
.cover.hank > img,
.cover.hank > .content {
   margin: 0;
   max-width: none;
}
main + .callout.callout {
   margin-bottom: 0;
}
@media (max-width:768px) {
   .cover {
      padding: 2rem;
   }
   .cover.hank > .content {
      margin-top: 50vh;
      background-color: rgba(var(--base-rgb), var(--op-4));
      padding: 1rem;
   }
}
@media (min-width: 768px) {
   .cover.hank > img {
      width: 50%;
      margin-left: auto;
   }
   .cover.hank > .content {
      max-width: 50%;
      padding: 1rem;
   }
   .cover.hank > .content .jvb-form-block {
      width: 100%;
   }
}
main > figure.align-full:not(:empty) {
   height: 45vh;
}
main > figure.align-full img {
   height: 45vh;
   object-fit: cover;
}
footer figure {
   margin: 0;
   width: 70px;
}
footer figure + p {
   margin-left: 0;
   margin-right: 0;
}
footer figure figcaption {
   display: none;
}
h2 .icon {
   --w: 1.5em;
   background-color:var(--action-0);
   margin-right: 1.25rem;
}