| | |
| | | /* |
| | | Theme Name: Lynsey Theme |
| | | Theme URI: https://lynseyot.ca |
| | | Description: Jvb-theme child theme, for Lynsey. |
| | | /*! |
| | | 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{ |
| | | /* 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,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>'); |
| | | --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>'); |
| | | --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
| | | --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>'); |
| | | --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
| | | --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>'); |
| | | --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>'); |
| | | --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>'); |
| | | --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>'); |
| | | --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>'); |
| | | --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>'); |
| | | --linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>'); |
| | | --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,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>'); |
| | | --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>'); |
| | | --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
| | | --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>'); |
| | | --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
| | | --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>'); |
| | | --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>'); |
| | | --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>'); |
| | | --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>'); |
| | | --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>'); |
| | | --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>'); |
| | | --linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>'); |
| | | } |
| | | /*** FONTS START **/ |
| | | /** Download your Fonts from: https://gwfh.mranftl.com/ |
| | | use ./assets/fonts/ as a base |
| | | **/ |
| | | /*** FONTS END ***/ |
| | | Version: 0.1.5 |
| | | !*/:root{--filter:grayscale(.3) sepia(.4);--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;--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}body{overflow-x:hidden}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src:url(assets/fonts/open-sans-v44-latin-regular.woff2) format('woff2'),url(assets/fonts/open-sans-v44-latin-regular.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:400;src:url(assets/fonts/open-sans-v44-latin-italic.woff2) format('woff2'),url(assets/fonts/open-sans-v44-latin-italic.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:800;src:url(assets/fonts/open-sans-v44-latin-800.woff2) format('woff2'),url(assets/fonts/open-sans-v44-latin-800.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:800;src:url(assets/fonts/open-sans-v44-latin-800italic.woff2) format('woff2'),url(assets/fonts/open-sans-v44-latin-800italic.ttf) format('truetype')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:200;src:url(assets/fonts/montserrat-v31-latin-200.woff2) format('woff2'),url(assets/fonts/montserrat-v31-latin-200.ttf) format('truetype')}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:200;src:url(assets/fonts/montserrat-v31-latin-200italic.woff2) format('woff2'),url(assets/fonts/montserrat-v31-latin-200italic.ttf) format('truetype')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:url(assets/fonts/montserrat-v31-latin-regular.woff2) format('woff2'),url(assets/fonts/montserrat-v31-latin-regular.ttf) format('truetype')}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:400;src:url(assets/fonts/montserrat-v31-latin-italic.woff2) format('woff2'),url(assets/fonts/montserrat-v31-latin-italic.ttf) format('truetype')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:900;src:url(assets/fonts/montserrat-v31-latin-900.woff2) format('woff2'),url(assets/fonts/montserrat-v31-latin-900.ttf) format('truetype')}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:900;src:url(assets/fonts/montserrat-v31-latin-900italic.woff2) format('woff2'),url(assets/fonts/montserrat-v31-latin-900italic.ttf) format('truetype')}.design a,a.design{color:var(--red-0)}.design a:hover,a.design:hover{background-color:var(--red-0);color:var(--red-200)}.development a,a.development{color:var(--orange-0)}.development a:hover,a.development:hover{background-color:var(--orange-0);color:var(--orange-200)}.strategy a,a.strategy{color:var(--green-0)}.strategy a:hover,a.strategy:hover{background-color:var(--green-0);color:var(--green-200)}.art a,a.art{color:var(--blue-0)}.art a:hover,a.art:hover{background-color:var(--blue-0);color:var(--blue-200)}.writing a,a.writing{color:var(--purple-0)}.writing a:hover,a.writing:hover{background-color:var(--purple-0);color:var(--purple-200)}li{list-style:inside;padding-left:1em}.dashboard li{list-style:none;padding-left:0}.condensed.condensed a{color:var(--contrast);border-radius:0;border-bottom:2px solid var(--action-0)}.condensed .design a{border-color:var(--red-0)}.condensed .development a{border-color:var(--orange-0)}.condensed .strategy a{border-color:var(--green-0)}.condensed .art a{border-color:var(--blue-0)}.condensed .writing a{border-color:var(--purple-0)}.intro+nav{grid-column:full}.intro+nav ul{width:100%}.intro+nav a,.intro+nav li{min-height:var(--chip_);border-radius:8px 0 8px 0!important}.intro+nav li{width:23%}:is(h1,h2,h3,h4,h5,h6){margin:1.5em auto .25em 1.5rem}h1{margin:0 auto .25em 1.5rem}.pre-footer{background:var(--base);padding:3rem 0 2rem}.pre-footer p{margin:0 auto .25rem 1rem}.pre-footer a{background-color:var(--action-0);color:var(--action-contrast)}footer{margin:0;padding:1rem 2rem}footer p{text-align:left}.buttons{margin:1rem auto 1rem 1.5rem}footer nav.condensed ul{--justify:flex-start;--gap:0 .5rem;margin-bottom:1rem}header{justify-content:center;gap:1rem}header .icon-logo{--w:var(--chipchip)}header .icon-jakevan{--w:var(--btn_);margin-left:1rem}header p{width:max-content}#theme-switch{position:absolute;left:1rem}section.intro{--w:min(40vw, 350px);height:max-content}section.intro .icon{margin:0}section.intro h1{max-width:var(--w)}.home .media-text{--w:min(40vw, 350px);height:max-content}.home .media-text figure,.home .media-text>div{margin:0;width:var(--w);padding:2rem 0 2rem 2rem}.home h1{font-size:var(--txt-medium);font-family:var(--body);font-weight:var(--fw-b-light);text-transform:none;margin:0}@media (min-width:768px){.home h1{font-size:var(--txt-x-large)}}@media (max-width:768px){.pre-footer,footer{padding-right:var(--btn_)}}main>section:nth-of-type(even){background-color:var(--base-100);max-width:100vw;padding:3rem 0}main>section>*{width:100%;max-width:var(--content);margin-left:1.5rem;margin-right:auto}main>section:nth-of-type(even)>*{max-width:var(--content)}main>section.callout:last-of-type{margin-bottom:0}nav.fixed.bottom{transition:var(--trans-size)}.drawer.open+.fixed.bottom{width:calc(100% - 240px);transition:var(--trans-size)}.cover.alt{overflow:visible;height:45vh;min-height:45vh;padding:0}.cover.alt::before{display:none}.cover.alt+#top{max-width:100%;margin:0 var(--btn_) 0 0!important;width:100%;z-index:var(--z-1)}.cover.alt+#top#top h1{margin:1rem 0 0;padding-right:1rem;text-align:right}.cover.alt img{object-fit:cover;width:100%;height:100%;border-radius:0 0 10rem 10rem;transition:var(--trans-transform)}.cover.alt div{max-width:none;overflow:hidden}.cover.art{--color-0:var(--blue-0);--color-1:var(--blue-50);--color-2:var(--blue-100);--color-3:var(--blue-200)}.cover.design{--color-0:var(--red-0);--color-1:var(--red-50);--color-2:var(--red-100);--color-3:var(--red-200)}.cover.development{--color-0:var(--orange-0);--color-1:var(--orange-50);--color-2:var(--orange-100);--color-3:var(--orange-200)}.cover.strategy{--color-0:var(--green-0);--color-1:var(--green-50);--color-2:var(--green-100);--color-3:var(--green-200)}.cover.writing{--color-0:var(--purple-0);--color-1:var(--purple-50);--color-2:var(--purple-100);--color-3:var(--purple-200)}.cover.art>div:nth-of-type(4n+1) img,.cover.design div:nth-of-type(4n+1) div,.cover.development div:nth-of-type(4n+1) div,.cover.writing div:nth-of-type(4){background-color:var(--color-0);border-color:var(--color-2)}.cover.art>div:nth-of-type(4n+2) img,.cover.design div:nth-of-type(4n+2) div,.cover.development div:nth-of-type(4n+2) div,.cover.strategy div:nth-of-type(3n+1),.cover.writing div:nth-of-type(3),.cover.writing div:nth-of-type(5){background-color:var(--color-1);border-color:var(--color-3)}.cover.art>div:nth-of-type(4n+3) img,.cover.design div:nth-of-type(4n+3) div,.cover.strategy div:nth-of-type(3n+2),.cover.writing div:nth-of-type(2),.cover.writing div:nth-of-type(6){background-color:var(--color-2);border-color:var(--color-0)}.cover.art>div:nth-of-type(4n+4) img,.cover.design div:nth-of-type(4n+4) div,.cover.strategy div:nth-of-type(3n+3),.cover.writing div:nth-of-type(1),.cover.writing div:nth-of-type(7){background-color:var(--color-3);border-color:var(--color-1)}.cover.art div,.cover.development div div,.cover.strategy div{z-index:0;overflow:hidden;background-color:var(--base);border:1vw solid var(--base-100)}.cover.art.alt{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,25vw);gap:0;height:max-content;padding:2rem 0 0}.cover.art div{background-color:transparent;border:none}.cover.art img{border-radius:50%;padding:.25rem;border:.36em solid var(--blue-0);position:relative}.cover.art .has-img{grid-row:span 2;grid-column:span 2;overflow:hidden;position:relative;background:0 0!important}.cover.art .has-img:first-child{grid-row:2/span 2}.cover.art .has-img img{aspect-ratio:1;z-index:0;mix-blend-mode:darken}.cover.art .has-img:first-child img{left:50%}.cover.art .has-img:nth-child(3) img{left:-50%}.has-img:nth-child(1) .halftone::before{background:radial-gradient(#fff 0,#fff 15%,#888 65%) 0 0/1.2em 1.2em,radial-gradient(circle at top right,#fff,#000)}.has-img:nth-child(3) .halftone::before{background:radial-gradient(#fff 0,#fff 15%,#888 65%) 0 0/1.2em 1.2em,radial-gradient(circle at bottom left,#fff,#000)}.cover.art img{border:.36em solid var(--blue-50)}.has-img:nth-child(1) .halftone::after,.has-img:nth-child(1) .halftone::before{top:50%;z-index:1}.has-img:nth-child(3) .halftone::after,.has-img:nth-child(3) .halftone::before{bottom:50%;z-index:1}.cover.art>div:nth-child(2){grid-column:2;left:-2rem;bottom:-1.4rem;position:relative;aspect-ratio:1}.cover.art>div:last-of-type{grid-column:3;top:-1.6rem;right:-2rem;position:relative;aspect-ratio:1}.cover.development{display:flex;flex-direction:column;align-items:flex-start;--width:75vh;--third:calc(var(--width) / 3);--half:calc(var(--width) / 2);--quarter:calc(var(--half) / 2)}@media (min-width:768px){.cover.development{align-items:center}.cover.development>div:nth-of-type(1){left:50%}.cover.development div:nth-of-type(2){top:var(--half);right:50%;left:unset}}.cover.development div,.cover.development div div{width:var(--third);height:var(--third);min-height:var(--third);aspect-ratio:1;border-radius:50%}.cover.development div{background-color:transparent;margin:0;border:0}.cover.development>div:nth-of-type(1),.cover.development>div:nth-of-type(2){position:absolute;width:var(--quarter);height:var(--half);border-radius:0;overflow:hidden}.cover.development div:nth-of-type(3),.cover.development div:nth-of-type(4),.cover.development div:nth-of-type(5){background-color:transparent;background-image:repeating-radial-gradient(circle,var(--base-50) 0,var(--base-50) 16px,var(--orange-200) 16px,var(--orange-200) 17px);border:1px solid var(--orange-200)}.cover.development div div{width:var(--half);height:var(--half)}.cover.development div:nth-of-type(1) div{position:absolute;right:0}.cover.development>div:nth-of-type(1){left:calc(var(--third)/ 2)}.cover.development div:nth-of-type(2){top:var(--half);left:-2.5rem}.cover.design{--width:50vw;--half:calc(var(--width) / 2);--negHalf:calc(var(--half) * -1);display:flex;flex-direction:column;overflow:visible;padding-left:5vw}@media (min-width:768px){.cover.design{--width:27vw}}.cover.design::before{content:'';position:absolute;left:calc(var(--half) + 5vw);width:2px;background-color:var(--base);display:block;top:0;height:calc(var(--width) * 2.75)}.cover.design>div{min-height:var(--width);margin:0;background:0 0;border:none;position:relative;mix-blend-mode:soft-light}.cover.design>div:nth-of-type(2),.cover.design>div:nth-of-type(3){width:var(--half);overflow:hidden}.cover.design div:nth-of-type(3){margin-left:var(--half)}.cover.design>div:nth-of-type(3) div{position:absolute;right:0;top:0}.cover.design>div:nth-of-type(2){top:var(--negHalf)}.cover.design>div:nth-of-type(3){top:calc(var(--negHalf) * 2)}.cover.design>div:nth-of-type(4){top:calc(var(--negHalf) * 3)}.cover.design div div{aspect-ratio:1;width:var(--width);border-radius:50%}.cover.design img{mix-blend-mode:overlay}.cover.writing{display:flex;justify-content:center;align-items:center;min-height:40vh;--width:33.3vw;--first:calc(var(--width) * .666);--second:calc(var(--first) * .666);--third:calc(var(--second) * .666)}.cover.writing div{width:var(--width);aspect-ratio:1;transform:rotate(45deg);z-index:4;margin:0 -6vw;box-shadow:rgba(var(--base-rgb),var(--op-5)) var(--shdw)}.cover.writing div img{transform:rotate(-45deg)}.cover.writing div:nth-of-type(3),.cover.writing div:nth-of-type(5){width:var(--first);z-index:3;margin:0 -4vw}.cover.writing div:nth-of-type(2),.cover.writing div:nth-of-type(6){width:var(--second);z-index:2;margin:0 -3vw}.cover.writing div:nth-of-type(1),.cover.writing div:nth-of-type(7){width:var(--third);z-index:1;margin:0 -2vw}.halftone::before{content:'';position:absolute;inset:0;background:radial-gradient(#fff,#888) 0 0/1em 1em,radial-gradient(circle at bottom left,#fff,#000);background-blend-mode:multiply;filter:contrast(50) blur(2px) contrast(4);mix-blend-mode:darken}.halftone::after{z-index:1;background:var(--base-50);mix-blend-mode:lighten;content:'';position:absolute;inset:0}.cover.strategy{overflow:visible;display:flex;justify-content:center;--radi:10vw 10vw}.cover.strategy div{height:30vh;min-width:18vw;margin:0 -.5vw;border-color:var(--green-0)!important}.cover.strategy>div:first-of-type,.cover.strategy>div:last-of-type{display:none}.cover.strategy div:nth-of-type(odd){border-radius:0 0 var(--radi);border-top:0;z-index:1}.cover.strategy div:nth-of-type(even){z-index:0;height:40vh;border-bottom:0;position:relative;top:19vh;border-radius:var(--radi) 0 0}.cover.strategy div:nth-of-type(2){height:60vh}.cover.strategy div:nth-of-type(6){height:30vh}@media (min-width:768px){.cover.writing{height:55vh}.cover.strategy{--radi:7.5vw}.cover.strategy div{min-width:15vw}.cover.strategy div:nth-of-type(even){top:15vh}.cover.strategy>div:first-of-type,.cover.strategy>div:last-of-type{display:block}}.feed-block .item-grid{max-width:var(--wider);padding:0}#top h1 small{margin:0;line-height:.5}#top p{margin-left:auto;font-size:var(--txt-x-small)}.cover{padding:1rem}.cover h1{font-size:var(--txt-xxx-large);line-height:.75;mix-blend-mode:luminosity;margin:0 0 .5rem}.cover .content{padding:1rem 0;text-align:right;margin-right:var(--btn)}h2.subtitle{font-weight:var(--fw-h-light);text-transform:none;font-size:var(--txt-medium);margin:.5rem 0}figure{margin:0}.loading[open] .spinner{display:none}.loading[open] i.icon{--w:var(--txt-enormous);background-color:var(--action-0);animation:spin .36s var(--trans-fn) infinite}.row.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));padding-bottom:2rem}.row.services h2{margin:1.5em 0 .25rem;font-size:var(--txt-x-medium)}section#gallery div{max-width:var(--wide);display:grid;gap:5px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:200px}#gallery div figure img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:var(--trans-transform)}#gallery div figure:hover img{transform:scale(1.05)}#gallery div figure:nth-of-type(3n+1){padding:15px}#gallery div figure:nth-of-type(5n+1){padding:25px}#gallery div figure:nth-of-type(6n+1),#gallery div figure:nth-of-type(6n+5){grid-row:span 2}#gallery div figure:nth-of-type(6n+0),#gallery div figure:nth-of-type(6n+6){grid-column:span 2}#gallery div figure:nth-of-type(6n+4){grid-column:span 2;grid-row:span 2}.needs-wants.needs-wants{max-width:var(--wide)}.needs-wants li{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:flex-start}.needs-wants h3{margin:4rem 0 2rem}.needs-wants img{max-width:45%;margin-right:4%;position:sticky;top:var(--btnbtn)}.needs-wants img+.info{max-width:50%;display:inline-block} |