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