/* 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 */ :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: 'Josefin Sans', var(--font-base); --body: 'Open Sans', var(--font-base); --hWeight: 300; --hlight: 300; --hBold: 700; --bWeight: 500; --bBold: 800; --bLight: 300; /* 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: #efefef; --light-50: #e2e2e2; --light-100: #d5d5d5; --light-200: #c9c9c9; --dark-0: #151515; --dark-50: #222222; --dark-100: #2e2e2e; --dark-200: #3b3b3b; --action-0: #ff0080; --action-50: #ff2492; --action-100: #ff47a4; --action-200: #ff6bb5; --secondary-0: #D69121; --secondary-50: #ffc421; --secondary-100: #ffcd44; --secondary-200: #ffd768; --success: #20D64E; --successLight: #DBFAE3; --successDark: #05230D; --successBack: var(--successLight); --successText: var(--successDark); --warning: #D69121; --warningLight: #F6E5CB; --warningDark: #231806; --warningBack: var(--warningLight); --warningText: var(--warningDark); --error: #CF1616; --errorLight: #F9C8C8; --errorDark: #4A0808; --errorBack: var(--errorLight); --errorText: var(--errorDark); --action-contrast: var(--light-0); --secondary-contrast: var(--light-0); --light-rgb: 239,239,239; --dark-rgb: 21,21,21; --action-rgb: 255,0,128; --secondary-rgb: 252,185,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: #db006e; --action-100: #b8005c; --action-200: #94004a; --secondary-50: #d89f00; --secondary-100: #b58500; --secondary-200: #916a00; --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 **/ /*** FONTS END ***/