/*! Theme Name: Jake Van Extension Theme URI: https://jakevan.ca Description: Jvb-theme child theme, for Jake. Author: Jake Author URI: https://jakevan.ca/ Template: jvb-theme Version: 0.1.0 !*/ :root{ --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: 'Open Sans', var(--font-base); --body: 'Montserrat', var(--font-base); --fw-h: 900; --fw-h-light: 400; --fw-h-bold: 800; --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: #ededf4; --light-50: #e3e3ee; --light-100: #dadae8; --light-200: #d1d1e3; --light-rgb: 237,237,244; --dark-0: #2a2b2a; --dark-50: #2f302f; --dark-100: #393a39; --dark-200: #3e403e; --dark-rgb: 42,43,42; --action-0: #ef767a; --action-50: #f28d90; --action-100: #f4a4a6; --action-200: #f7bbbd; --action-rgb: 239,118,122; --action-contrast: var(--light-0); --secondary-0: #329dcb; --secondary-50: #5ab1d6; --secondary-100: #83c4e0; --secondary-200: #acd8ea; --secondary-rgb: 50,157,203; --secondary-contrast: var(--light-0); --success: #22C55E; --successLight: #d4edda; --successDark: #155724; --successBack: var(--successLight); --successText: var(--successDark); --warning: #E8A737; --warningLight: #F6E5CB; --warningDark: #231806; --warningBack: var(--warningLight); --warningText: var(--warningDark); --error: #EF4444; --errorLight: #f8d7da; --errorDark: #721c24; --errorBack: var(--errorLight); --errorText: var(--errorDark); --red-0: #ef767a; --red-50: #ec5f64; --red-100: #ea484e; --red-200: #e73238; --red-rgb: 239,118,122; --orange-0: #ef9e76; --orange-50: #f2ae8d; --orange-100: #f4bea4; --orange-200: #f7cfbb; --orange-rgb: 239,158,118; --yellow-0: #E3BE39; --yellow-50: #e9cd66; --yellow-100: #f0db92; --yellow-200: #f6eabf; --yellow-rgb: 227,190,57; --green-0: #32cb82; --green-50: #5ad69b; --green-100: #83e0b4; --green-200: #aceacc; --green-rgb: 50,203,130; --blue-0: #329dcb; --blue-50: #5ab1d6; --blue-100: #83c4e0; --blue-200: #acd8ea; --blue-rgb: 50,157,203; --purple-0: #ba76ef; --purple-50: #c58df2; --purple-100: #d1a4f4; --purple-200: #dcbbf7; --purple-rgb: 186,118,239; --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-50: #ec5f64; --action-100: #ea484e; --action-200: #e73238; --secondary-50: #287da2; --secondary-100: #1e5e79; --secondary-200: #143e50; --contrast: var(--light-0); --contrast-50: var(--light-50); --contrast-100: var(--light-100); --contrast-200: var(--light-200); --contrast-rgb: var(--light-rgb); --base: var(--dark-0); --base-50: var(--dark-50); --base-100: var(--dark-100); --base-200: var(--dark-200); --base-rgb: var(--dark-rgb); --successBack: var(--successDark); --successText: var(--successLight); --warningBack: var(--warningDark); --warningText: var(--warningLight); --errorBack: var(--errorDark); --errorText: var(--errorLight); --red-50: #ec5f64; --red-100: #ea484e; --red-200: #e73238; --orange-50: #ec8e5f; --orange-100: #ea7e48; --orange-200: #e76e32; --yellow-50: #cca61d; --yellow-100: #9f8217; --yellow-200: #735d10; --green-50: #28a268; --green-100: #1e794e; --green-200: #145033; --blue-50: #287da2; --blue-100: #1e5e79; --blue-200: #143e50; --purple-50: #a348ea; --purple-100: #8c1be4; --purple-200: #7015b7; } /*** FONTS START **/ /** Download your Fonts from: https://gwfh.mranftl.com/ use ./assets/fonts/ as a base **/ /* open-sans-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: 'Open Sans'; font-style: normal; font-weight: 400; src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-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: 'Open Sans'; font-style: italic; font-weight: 400; src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-800 - 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: 'Open Sans'; font-style: normal; font-weight: 800; src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-800italic - 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: 'Open Sans'; font-style: italic; font-weight: 800; src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* 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+ */ } /*** FONTS END ***/