/*
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{
/* Layout */
--narrow: min(500px, 50vw);
--maxWidth: min(768px, 65vw);
--alignWide: min(1024px, 90vw);
--alignMed: min(962px, 82.5vw);
--full: 100vw;
/* Margin */
--mr: auto;
--ml: auto;
--mt: 1rem;
--mb: 1rem;
--setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
--insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
--height: 4rem;
--doubleHeight: 8rem;
--offHeight: 5rem;
--maxHeight: calc(100vh - var(--height) - var(--height));
--gap: .5rem;
--wrap: wrap;
--justify: center;
--align: center;
--dir: row;
/* Typography */
--w: 1.2em; /** Icon **/
--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: 'Source Serif 4', var(--font-base);
--body: 'Montserrat', var(--font-base);
--hWeight: 300;
--hlight: 300;
--hBold: 700;
--bWeight: 400;
--bBold: 900;
--bLight: 200;
/* Font sizes */
--enormous: calc(26vh - 4rem);
--xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
--xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
--xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
--large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
--xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
--medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
--small: clamp(.95rem, .879rem + .19vw, 1.05rem);
--extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
/* 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: #fff9f5;
--light-50: #fff3eb;
--light-100: #feede1;
--light-200: #fee7d7;
--light-rgb: 255,249,24;
--dark-0: #140900;
--dark-50: #1e0e00;
--dark-100: #281200;
--dark-200: #331700;
--dark-rgb: 20,9,0;
--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);
--contrast: var(--dark-0);
--contrast-50: var(--dark-50);
--contrast-100: var(--dark-100);
--contrast-200: var(--dark-200);
--c: var(--light-rgb);
--base-rgb: var(--light-rgb);
--contrast-rgb: var(--dark-rgb);
/* Stacking */
--z-1: 5;
--z-2: 10;
--z-3: 15;
--z-4: 20;
--z-5: 50;
--z-6: 100;
--z-top: 999;
--zz-top: 999999;
/* Overlays */
--rgb-light: .25;
--rgb-medium: .66;
--rgb-heavy: .85;
--overlay-light: rgba(var(--c), .25);
--overlay-medium: rgba(var(--c), .66);
--overlay-heavy: rgba(var(--c), .85);
--shimmer: rgba(var(--dark-rgb),0) 0%,
rgba(var(--dark-rgb),.05) 50%,
rgba(var(--dark-rgb),0) 100%;
/* Shadows */
--shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
--shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
--shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
--shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
--shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
--subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
--subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
--shadow-none: transparent 0px 0px 0px;
/* Rounding */
--innerRadius: 4px;
--outerPadding: 1rem;
--outerRadius: calc(var(--innerRadius) + var(--outerPadding));
/* Transitions */
--function:cubic-bezier(.47,.24,.07,.47);
--timing: .25s;
--transition-base: var(--timing) var(--function);
--transition-color: background-color var(--transition-base),
color var(--transition-base), border var(--transition-base);
--transition-transform: transform var(--transition-base);
--transition-size: width var(--transition-base),
height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
--offScreen: -200vw;
/** Icons **/
--minus: url('data:image/svg+xml,');
--plus: url('data:image/svg+xml,');
--close: url('data:image/svg+xml,');
--chevron: url('data:image/svg+xml,');
--details: url('data:image/svg+xml,');
--shop: url('data:image/svg+xml,');
--style: url('data:image/svg+xml,');
--map: url('data:image/svg+xml,');
--theme: url('data:image/svg+xml,');
--arrow-up: url('data:image/svg+xml,');
--colour: url('data:image/svg+xml,');
--linkIcon:url('data:image/svg+xml,');
--swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');
--scrollbar-width: 8px;
--scrollbar-track-color: var(--base-100);
--scrollbar-thumb-color: var(--action-0);
--scrollbar-thumb-hover-color: var(--action-50);
--scrollbar-thumb-border: 2px solid var(--base-50);
--scrollbar-border-radius: 4px;
--can-scroll: 0;
}
body:has(#theme-switcher:checked){
--action-50: #b44d04;
--action-100: #a04503;
--action-200: #8c3c03;
--secondary-50: #86d027;
--secondary-100: #7bbf23;
--secondary-200: #70ae20;
--contrast: var(--light-0);
--contrast-50: var(--light-50);
--contrast-100: var(--light-100);
--contrast-200: var(--light-200);
--base: var(--dark-0);
--base-50: var(--dark-50);
--base-100: var(--dark-100);
--base-200: var(--dark-200);
--c: var(--dark-rgb);
--base-rgb: var(--dark-rgb);
--contrast-rgb: var(--light-rgb);
--overlay-light: rgba(var(--c), .25);
--overlay-medium: rgba(var(--c), .5);
--overlay-heavy: rgba(var(--c), .85);
--shimmer: rgba(var(--c),0) 0%,
rgba(var(--c),.05) 50%,
rgba(var(--c),0) 100%;
--shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
--shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */
--shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */
--shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */
--shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */
--subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
--subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
--successBack: var(--successDark);
--successText: var(--successLight);
--warningBack: var(--warningDark);
--warningText: var(--warningLight);
--errorBack: var(--errorDark);
--errorText: var(--errorLight);
--minus: url('data:image/svg+xml,');
--plus: url('data:image/svg+xml,');
--close: url('data:image/svg+xml,');
--chevron: url('data:image/svg+xml,');
--details: url('data:image/svg+xml,');
--shop: url('data:image/svg+xml,');
--style: url('data:image/svg+xml,');
--map: url('data:image/svg+xml,');
--theme: url('data:image/svg+xml,');
--arrow-up: url('data:image/svg+xml,');
--colour: url('data:image/svg+xml,');
--linkIcon: url('data:image/svg+xml,');
}
/*** 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(--height);
--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(--height);
padding: 0 1rem 0 var(--offHeight);
height: var(--height);
min-height: var(--height);
}
.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(--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(--hWeight);
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(--maxWidth);
}
.cover.cover::before {
mix-blend-mode: hue;
}