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