| | |
| | | /* |
| | | 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; |
| | | } |