| all.css | ●●●●● patch | view | raw | blame | history | |
| style.css | ●●●●● patch | view | raw | blame | history |
all.css
@@ -21,122 +21,128 @@ --fw-b-bold: 900; --fw-b-light: 200; --txt-small: clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem); --txt-x-small: clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem); --txt-medium: clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem); --txt-x-medium: clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem); --txt-large: clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem); --txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem); --txt-xx-large: clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem); --txt-xxx-large: clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem); --txt-enormous: calc(26vh - 4rem); /* 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; --light-0: 237,237,244; /* #ededf4; */ --light-50: 227,227,238; /* #e3e3ee; */ --light-100: 218,218,232; /* #dadae8; */ --light-200: 209,209,227; /* #d1d1e3; */ --dark-0: #2a2b2a; --dark-50: #2f302f; --dark-100: #393a39; --dark-200: #3e403e; --dark-rgb: 42,43,42; --dark-0: 42,43,42; /* #2a2b2a; */ --dark-50: 47,48,47; /* #2f302f; */ --dark-100: 57,58,57; /* #393a39; */ --dark-200: 62,64,62; /* #3e403e; */ --action-0: #ef767a; --action-50: #f28d90; --action-100: #f4a4a6; --action-200: #f7bbbd; --action-rgb: 239,118,122; --action-0: 239,118,122; /* #ef767a; */ --action-50: 242,141,144; /* #f28d90; */ --action-100: 244,164,166; /* #f4a4a6; */ --action-200: 247,187,189; /* #f7bbbd; */ --action-contrast: var(--light-0); --secondary-0: #329dcb; --secondary-50: #5ab1d6; --secondary-100: #83c4e0; --secondary-200: #acd8ea; --secondary-rgb: 50,157,203; --secondary-0: 50,157,203; /* #329dcb; */ --secondary-50: 90,177,214; /* #5ab1d6; */ --secondary-100: 131,196,224;/* #83c4e0; */ --secondary-200: 172,216,234;/* #acd8ea; */ --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); --success: 34,197,94; /* #22C55E; */ --successLight: 212,237,218;/* #d4edda; */ --successDark: 21,87,36; /* #155724; */ --warning: 232,167,55; /* #E8A737; */ --warningLight: 246,229,203;/* #F6E5CB; */ --warningDark: 35,24,6; /* #231806; */ --error: 239,68,68; /* #EF4444; */ --errorLight: 248,215,218; /* #f8d7da; */ --errorDark: 114,28,36; /* #721c24; */ --red-0: #ef767a; --red-50: #ec5f64; --red-100: #ea484e; --red-200: #e73238; --red-rgb: 239,118,122; --red-0: 239,118,122; /* #ef767a; */ --red-50: 236,95,100; /* #ec5f64; */ --red-100: 234,72,78; /* #ea484e; */ --red-200: 231,50,56; /* #e73238; */ --red-contrast: var(--dark-0); --orange-0: #ef9e76; --orange-50: #f2ae8d; --orange-100: #f4bea4; --orange-200: #f7cfbb; --orange-rgb: 239,158,118; --orange-0: 239,158,118; /* #ef9e76; */ --orange-50: 242,174,141; /* #f2ae8d; */ --orange-100: 244,190,164; /* #f4bea4; */ --orange-200: 247,207,187; /* #f7cfbb; */ --orange-contrast: var(--dark-0); --yellow-0: #E3BE39; --yellow-50: #e9cd66; --yellow-100: #f0db92; --yellow-200: #f6eabf; --yellow-rgb: 227,190,57; --yellow-0: 227,190,57; /* #E3BE39; */ --yellow-50: 233,205,102; /* #e9cd66; */ --yellow-100: 240,219,146; /* #f0db92; */ --yellow-200: 246,234,191; /* #f6eabf; */ --yellow-contrast: var(--dark-0); --green-0: #32cb82; --green-50: #5ad69b; --green-100: #83e0b4; --green-200: #aceacc; --green-rgb: 50,203,130; --green-0: 50,203,130; /* #32cb82; */ --green-50: 90,214,155; /* #5ad69b; */ --green-100: 131,224,180; /* #83e0b4; */ --green-200: 172,234,204; /* #aceacc; */ --green-contrast: var(--dark-0); --blue-0: #329dcb; --blue-50: #5ab1d6; --blue-100: #83c4e0; --blue-200: #acd8ea; --blue-rgb: 50,157,203; --blue-0: 50,157,203; /* #329dcb; */ --blue-50: 90,177,214; /* #5ab1d6; */ --blue-100: 131,196,224; /* #83c4e0; */ --blue-200: 172,216,234; /* #acd8ea; */ --blue-contrast: var(--dark-0); --purple-0: #ba76ef; --purple-50: #c58df2; --purple-100: #d1a4f4; --purple-200: #dcbbf7; --purple-rgb: 186,118,239; --purple-0: 186,118,239; /* #ba76ef; */ --purple-50: 197,141,242; /* #c58df2; */ --purple-100: 209,164,244; /* #d1a4f4; */ --purple-200: 220,187,247; /* #dcbbf7; */ --purple-contrast: var(--dark-0); --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); --successBack: var(--successLight); --successText: var(--successDark); --warningBack: var(--warningLight); --warningText: var(--warningDark); --errorBack: var(--errorLight); --errorText: var(--errorDark); } body:has(#theme-switcher:checked){ --action-50: #ec5f64; --action-100: #ea484e; --action-200: #e73238; --action-50: 236,95,100; /* #ec5f64; */ --action-100: 234,72,78; /* #ea484e; */ --action-200: 231,50,56; /* #e73238; */ --secondary-50: #287da2; --secondary-100: #1e5e79; --secondary-200: #143e50; --secondary-50: 40,125,162; /* #287da2; */ --secondary-100: 30,94,121; /* #1e5e79; */ --secondary-200: 20,62,80; /* #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); @@ -145,33 +151,39 @@ --errorBack: var(--errorDark); --errorText: var(--errorLight); --red-50: #ec5f64; --red-100: #ea484e; --red-200: #e73238; --red-50: 236,95,100; /* #ec5f64; */ --red-100: 234,72,78; /* #ea484e; */ --red-200: 231,50,56; /* #e73238; */ --red-contrast: var(--light-0); --orange-50: #ec8e5f; --orange-100: #ea7e48; --orange-200: #e76e32; --orange-50: 236,142,95; /* #ec8e5f; */ --orange-100: 234,126,72; /* #ea7e48; */ --orange-200: 231,110,50; /* #e76e32; */ --orange-contrast: var(--light-0); --yellow-50: #cca61d; --yellow-100: #9f8217; --yellow-200: #735d10; --yellow-50: 204,166,29; /* #cca61d; */ --yellow-100: 159,130,23; /* #9f8217; */ --yellow-200: 115,93,16; /* #735d10; */ --yellow-contrast: var(--light-0); --green-50: #28a268; --green-100: #1e794e; --green-200: #145033; --green-50: 40,162,104; /* #28a268; */ --green-100: 30,121,78; /* #1e794e; */ --green-200: 20,80,51; /* #145033; */ --green-contrast: var(--light-0); --blue-50: #287da2; --blue-100: #1e5e79; --blue-200: #143e50; --blue-50: 40,125,162; /* #287da2; */ --blue-100: 30,94,121; /* #1e5e79; */ --blue-200: 20,62,80; /* #143e50; */ --blue-contrast: var(--dark-0); --purple-50: #a348ea; --purple-100: #8c1be4; --purple-200: #7015b7; --purple-50: 163,72,234; /* #a348ea; */ --purple-100: 140,27,228; /* #8c1be4; */ --purple-200: 112,21,183; /* #7015b7; */ --purple-contrast: var(--light-0); } body { overflow-x: hidden; overflow-x: clip; } /*** FONTS START **/ /** Download your Fonts from: https://gwfh.mranftl.com/ @@ -269,42 +281,64 @@ 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 ***/ body.art.art, .art { --action-0: var(--blue-0); --action-50: var(--blue-50)!important; --action-100: var(--blue-100)!important; --action-200: var(--blue-200)!important; --action-contrast: var(--blue-contrast)!important; } body.design.design, .design { --action-0: var(--red-0); --action-50: var(--red-50)!important; --action-100: var(--red-100)!important; --action-200: var(--red-200)!important; --action-contrast: var(--red-contrast)!important; } body.development.development, .development { --action-0: var(--orange-0); --action-50: var(--orange-50)!important; --action-100: var(--orange-100)!important; --action-200: var(--orange-200)!important; --action-contrast: var(--orange-contrast)!important; } body.strategy.strategy, .strategy { --action-0: var(--green-0); --action-50: var(--green-50)!important; --action-100: var(--green-100)!important; --action-200: var(--green-200)!important; --action-contrast: var(--green-contrast)!important; } body.writing.writing, .writing { --action-0: var(--purple-0); --action-50: var(--purple-50)!important; --action-100: var(--purple-100)!important; --action-200: var(--purple-200)!important; --action-contrast: var(--purple-contrast)!important; } body.project.project, .project { --action-0: var(--yellow-0); --action-50: var(--yellow-50)!important; --action-100: var(--yellow-100)!important; --action-200: var(--yellow-200)!important; --action-contrast: var(--yellow-contrast)!important; } .design a, a.design{ color: var(--red-0); a { color: rgb(var(--action-0)); } .design a:hover, a.design:hover { background-color: var(--red-0); color: var(--red-200); a:visited { color: rgb(var(--action-100)); } .development a, a.development { color: var(--orange-0); a.current.current, a:hover, a:focus, a:visited:hover, a:visited:focus { background-color: rgb(var(--action-0)); color: rgb(var(--action-200)); } .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; @@ -317,40 +351,27 @@ } .condensed.condensed a { color: var(--contrast); color: rgb(var(--contrast)); border-radius: 0; border-bottom: 2px solid var(--action-0); border-bottom: 2px solid rgb(var(--action-0)); padding: .25rem 1rem; } .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); .condensed.condensed a:hover, .condensed.condensed a:focus { color: var(--action-contrast); } .intro + nav { grid-column: full; margin: 0!important; } .intro + nav ul { width: 100%; } .intro + nav li, .intro + nav a { min-height: var(--chip_); border-radius: 8px 0 8px 0!important; } .intro + nav li{ width: 23%; } /* .intro + nav ul {*/ /* width: 100%;*/ /* }*/ /* .intro + nav li,*/ /* .intro + nav a {*/ /* min-height: var(--chip_);*/ /* }*/ :is(h1, h2, h3, h4, h5, h6) { @@ -360,15 +381,15 @@ margin: 0 auto .25em 1.5rem; } .pre-footer { background: var(--base); background: rgb(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); background-color: rgb(var(--action-0)); color: rgb(var(--action-contrast)); } footer { @@ -389,8 +410,8 @@ margin-bottom: 1rem; } header { justify-content: center; .wp-site-blocks.wp-site-blocks > header { --justify: center; gap: 1rem; } header .icon-logo { @@ -439,25 +460,31 @@ font-size: var(--txt-x-large); } } @media (max-width: 768px) { footer, .pre-footer { padding-right: var(--btn_); footer { z-index: var(--z-9); padding: 1rem 2rem!important; } @media (min-width:768px) { .w-50 { max-width: calc(50% - 3rem)!important; margin: 0 1rem!important; } } main > section:nth-of-type(even) { background-color: var(--base-100); main > * { margin-left: var(--btn)!important; } main > section { max-width: 100vw; padding: 3rem 0; padding: 3rem var(--btn) 3rem 1.5rem; margin-left: 0!important; } main > section:nth-of-type(even) { background-color: rgb(var(--base-100)); } 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); margin-left: 1.5rem!important; } main > section.callout:last-of-type { @@ -472,553 +499,70 @@ transition: var(--trans-size); } .cover.alt { overflow: visible; height: 45vh; min-height: 45vh; .cover { padding:0; color: rgb(var(--action-0)); background-color: rgb(var(--action-200)); } .cover.alt::before { display: none; .cover.alt { min-height: 0; } .cover.alt + #top { max-width: 100%; margin: 0 var(--btn_) 0 0!important; .cover > .content { background-color: rgba(var(--base), var(--op-6)); width: 100%; z-index: var(--z-1); margin: 0 !important; color: rgb(var(--contrast)); padding: 2rem var(--btn) 2rem 2rem; } .cover.alt + #top#top h1 { margin: 1rem 0 0; padding-right: 1rem; text-align: right; .cover h1 { margin: 0; } .cover.alt img { object-fit: cover; width:100%; height: 100%; border-radius: 0 0 10rem 10rem; transition: var(--trans-transform); .cover > img { margin-left: 0!important; } .cover.alt div { .cover.alt > svg { max-width: none; overflow:hidden; margin: 0 auto!important; } .cover.alt + header#top { margin: 0!important; grid-column: full; padding-right: var(--btn_); } .cover.alt + header h1 { line-height: .75; margin: 0 0 0 .5rem; } .cover.alt + #top h1 small { line-height: 1; } .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.writing div:nth-of-type(4), .cover.design div:nth-of-type(4n+1) div, .cover.development div:nth-of-type(4n+1) div{ background-color: var(--color-0); border-color: var(--color-2); } .cover.art >div:nth-of-type(4n+2) img, .cover.writing div:nth-of-type(3), .cover.writing div:nth-of-type(5), .cover.design div:nth-of-type(4n+2) div, .cover.strategy div:nth-of-type(3n+1), .cover.development div:nth-of-type(4n+2) div{ background-color: var(--color-1); border-color: var(--color-3); } .cover.art >div:nth-of-type(4n+3) img, .cover.writing div:nth-of-type(2), .cover.writing div:nth-of-type(6), .cover.design div:nth-of-type(4n+3) div, .cover.strategy div:nth-of-type(3n+2) { background-color: var(--color-2); border-color: var(--color-0); } .cover.art >div:nth-of-type(4n+4) img, .cover.writing div:nth-of-type(1), .cover.writing div:nth-of-type(7), .cover.design div:nth-of-type(4n+4) div, .cover.strategy div:nth-of-type(3n+3) { background-color: var(--color-3); border-color: var(--color-1); } .cover.strategy div, .cover.development div div, .cover.art div { z-index: 0; overflow: hidden; background-color: var(--base); border: 1vw solid var(--base-100); } /*.cover.art {*/ /* display: flex;*/ /* flex-direction: column;*/ /* align-items: center;*/ /* position: relative;*/ /* --width: 48vh;*/ /* --half: calc(var(--width) / 2);*/ /* --quarter: calc(var(--half) / 2);*/ /* --offHalf: calc(var(--half) - 3vw);*/ /*}*/ /* .cover.art .img {*/ /* min-height: var(--width);*/ /* width: var(--half);*/ /* overflow: hidden;*/ /* background-color: transparent!important;*/ /* border: none;*/ /* }*/ /* .cover.art .img:nth-child(1) {*/ /* }*/ /* .cover.art .img div {*/ /* aspect-ratio: 1;*/ /* width: var(--width);*/ /* border-radius: 50%;*/ /* min-height: var(--width);*/ /* }*/ /* .cover.art > div:nth-child(2),*/ /* .cover.art > div:nth-child(4) {*/ /* border-radius: 50%;*/ /* position: absolute;*/ /* width: 25vw;*/ /* min-height: 25vw;*/ /* border-width: .5vw;*/ /* }*/ /* .cover.art > div:nth-child(2) {*/ /* left: 10vw;*/ /* top: 10vw;*/ /* }*/ /* .cover.art > div:nth-child(4) {*/ /* right: var(--btn_);*/ /* top: 48vh;*/ /* }*/ /* @media (min-width: 768px) {*/ /* .cover.art > div:nth-child(2),*/ /* .cover.art > div:nth-child(4) {*/ /* width: 15vw;*/ /* min-height: 15vw;*/ /* }*/ /* .cover.art > div:nth-child(2) {*/ /* left: var(--half);*/ /* top: var(--quarter);*/ /* }*/ /* .cover.art > div:nth-child(4) {*/ /* right: calc(var(--quarter) + 6vw);*/ /* top: calc(var(--half) + 12vw);*/ /* }*/ /* }*/ /* .cover.art > div:nth-child(1),*/ /* .cover.art > div:nth-child(3) {*/ /* position:relative;*/ /* }*/ /* .cover.art > div:nth-child(1) {*/ /* left: var(--quarter);*/ /* }*/ /* .cover.art > div:nth-child(1) div {*/ /* position: absolute;*/ /* right: 0;*/ /* }*/ /* .cover.art > div:nth-child(3) {*/ /* top: calc(var(--half) * -1);*/ /* right: var(--quarter);*/ /* }*/ /*.cover.art .halftone +.halftone {*/ /* transform: rotate(180deg);*/ /* top: var(--width);*/ /* left: 0;*/ /* right: unset;*/ /*}*/ /*.cover.art .img::before {*/ /* content: '';*/ /* filter: invert(1) brightness(0.75) invert(1) saturate(2);*/ /* width:100%;*/ /* height: 50%;*/ /* position:absolute;*/ /* bottom: 0;*/ /*}*/ /*.cover.art .img ~ .img::before {*/ /* bottom: unset;*/ /* top: 0;*/ /*}*/ /*.cover.art .halftone {*/ /* width:50%;*/ /* height: var(--half);*/ /* position: absolute;*/ /* top: 0;*/ /* right: 0;*/ /* background-color:transparent!important;*/ /* border: 1px solid var(--base-50)!important;*/ /* border-top-width: 0!important;*/ /* border-right-width:0!important;*/ /*}*/ .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: transparent!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::before, .has-img:nth-child(1) .halftone::after { top:50%; z-index: 1; } .has-img:nth-child(3) .halftone::before, .has-img:nth-child(3) .halftone::after { bottom:50%; z-index: 1; } .cover.art .has-img .img, .cover.art .halftone { /*position:absolute;*/ /*inset: 0;*/ /*left: 50%;*/ /*min-width: 50vw;*/ /*min-height: 50vw;*/ } .cover.art > div:nth-child(2) { grid-column: 2; left:-2rem; bottom: -1.4rem; position: relative; aspect-ratio: 1; /*aspect-ratio: 1;*/ } .cover.art > div:last-of-type { grid-column: 3; top: -1.6rem; right:-2rem; position: relative; aspect-ratio: 1; /*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.alt > svg { max-width: 40vw; margin: 0!important; } .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 div, .cover.development 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 { .cover.alt + #top { flex-direction: column; position: absolute; right: 0; top: 35vw; max-width: 60vw; grid-column: narrow; z-index: 10; color: rgb(var(--action-contrast)); padding: 0 var(--btn_) 0 0!important; } .cover.development > div:nth-of-type(1) { left: calc(var(--third) / 2); .cover.alt + #top a { background-color: rgba(var(--action-0),var(--op-5)); color: rgb(var(--action-contrast)); } .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; /*transform: rotate(30deg);*/ } @media (min-width: 768px) { .cover.design { --width: 27vw; .cover.alt + #top a:hover, .cover.alt + #top a:focus { background-color: rgb(var(--action-contrast)); color: rgb(var(--action-0)); } } .cover.design::before { content: ''; position: absolute; left: calc(var(--half) + 5vw); /* same as padding-left above */ 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:transparent; 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.strategy {*/ /* display: flex;*/ /* flex-wrap: wrap;*/ /* justify-content:space-evenly;*/ /* align-items:flex-start;*/ /*}*/ /*.cover.strategy .item {*/ /* width: 30vw;*/ /* aspect-ratio: 1;*/ /* border-radius: 0 50% 50%;*/ /* transform: rotate(45deg);*/ /* box-shadow: rgba(var(--base-rgb), var(--op-5)) var(--shdw);*/ /*}*/ /* .cover.strategy .item img {*/ /* transform: rotate(-45deg);*/ /* }*/ /*.cover.strategy .crowd {*/ /* width: 100%;*/ /* padding: 3vw 0;*/ /* display: flex;*/ /* flex-wrap: nowrap;*/ /* max-width:none;*/ /* background-color:var(--base-50)!important;*/ /* border: none;*/ /* overflow:visible;*/ /* margin-bottom: 5vw;*/ /*}*/ /* .cover.strategy .crowd div {*/ /* aspect-ratio: 1;*/ /* border-radius: 50%;*/ /* !*border-radius: 0 50% 0 50%;*!*/ /* !*transform: rotate(30deg);*!*/ /* min-width: 8vw;*/ /* }*/ /* .cover.strategy .crowd div {*/ /* background-color:var(--base-100);*/ /* border-color: var(--base-50);*/ /* mix-blend-mode: overlay;*/ /* position:relative;*/ /* flex: 1;*/ /* margin: 0 -2vw;*/ /* }*/ /* .cover.strategy .crowd div:nth-of-type(odd){*/ /* top: 1vw;*/ /* }*/ /* .cover.strategy .crowd div:nth-of-type(even){*/ /* top: -3vw;*/ /* }*/ .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 {*/ /* background: !* 1 *!*/ /* var(--pattern,*/ /* radial-gradient(closest-side, #777, #fff)*/ /* .25rem/ 1em 1em space),*/ /* var(--map,*/ /* linear-gradient(0deg, #888, #fff));*/ /* background-blend-mode: multiply !* 2 *!;*/ /* filter: contrast(21) !* 3 *!*/ /*}*/ /*** THIS ONE WORKS WELL **/ /*.halftone {*/ /* background: linear-gradient(90deg, var(--blue-0), transparent);*/ /* background-blend-mode: color;*/ /*}*/ .halftone::before { content: ''; @@ -1031,75 +575,13 @@ } .halftone::after { z-index: 1; background: var(--base-50); background: rgb(var(--base-50)); mix-blend-mode: lighten; content: ''; position:absolute; inset:0; } /**** END THIS ONE WORKS WELL **/ .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; @@ -1110,21 +592,6 @@ 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; @@ -1140,7 +607,7 @@ } .loading[open] i.icon { --w: var(--txt-enormous); background-color: var(--action-0); background-color: rgb(var(--action-0)); animation: spin .36s var(--trans-fn) infinite; } @@ -1205,6 +672,13 @@ .needs-wants.needs-wants { max-width: var(--wide); margin: 0!important; } details.info { max-width: var(--wider); } .needs-wants .info{ max-width: var(--content); } .needs-wants li { list-style: none; @@ -1216,6 +690,8 @@ .needs-wants h3 { margin: 4rem 0 2rem; } @media (min-width: 768px) { .needs-wants img { max-width: 45%; margin-right: 4%; @@ -1226,3 +702,144 @@ max-width: 50%; display: inline-block; } } .term-list .title { text-transform: none; padding: 0; } #summary .summary { display: grid; grid-template-columns: repeat(1, 1fr); max-width: var(--wide); } #summary .summary .term-list { height: var(--chipchip); } #summary .summary > li { list-style: none; height: var(--chipchip) } #summary .summary .icon { --w: 1.5em; margin-right: 1rem; } #summary .summary > li span:first-of-type { margin-right: 1.5rem; } .project-list.item-grid.list-view img { width: 100%; } .project-list h3 { font-size: var(--txt-large); margin: 0; } @media (min-width: 768px) { #summary .summary { grid-template-columns: repeat(2, 1fr); } } body:has(.on-this-page) .qtoggle { bottom: calc(var(--btn_) + var(--btn_)); } .index.open.open { max-height: var(--maxHeight); height: max-content; } .development .item-grid .item .images { aspect-ratio: 16/9; } .main-actions.main-actions .buttons.buttons { bottom: unset; top: var(--btn_); right: 0!important; } aside.main.right { padding-bottom: 0; padding-top: var(--btn); } aside.main.right.expanded { right: var(--btn); } .main-actions button.expanded { border-top-left-radius: var(--radius-outer); border-bottom-left-radius: var(--radius); right: var(--btn); } /**************************************************************** CONTENT LIST ****************************************************************/ ul.content-term-list { margin-left:0!important; margin-right: 0!important; grid-column: full; max-width: var(--full); } ul.content-term-list > li { padding: var(--sp3) var(--btn_) var(--sp3) 0; list-style: none; } ul.content-term-list > li:nth-of-type(even) { background-color: rgb(var(--base-100)); } ul.content-term-list img { width: 40vw; max-inline-size: none; } .content-term-list .cover { padding-bottom: 0; min-height: 40vh; } .content-term-list .cover::before { display: none; } .content-term-list .cover .content { background-color: rgba(var(--base), var(--op-6)); width: 100%; border-radius: 1rem 1rem 0 0; padding: 1rem; } .content-term-list .cover h2 { margin: 0; } .feed-block .item-grid { padding-right: var(--btnbtn); } div.poster { height: 20vh; grid-column: full; max-width: 100vw; margin: 0!important; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } @media (min-width: 768px) { div.poster { height: 35vh; background-size: cover; } } .cover.cover { padding: 0; } style.css
@@ -6,4 +6,4 @@ Author URI: https://jakevan.ca/ Template: jvb-theme 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} !*/: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;--txt-small:clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem);--txt-x-small:clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem);--txt-medium:clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem);--txt-x-medium:clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem);--txt-large:clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem);--txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem);--txt-xx-large:clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem);--txt-xxx-large:clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem);--txt-enormous:calc(26vh - 4rem);--light-0:237,237,244;--light-50:227,227,238;--light-100:218,218,232;--light-200:209,209,227;--dark-0:42,43,42;--dark-50:47,48,47;--dark-100:57,58,57;--dark-200:62,64,62;--action-0:239,118,122;--action-50:242,141,144;--action-100:244,164,166;--action-200:247,187,189;--action-contrast:var(--light-0);--secondary-0:50,157,203;--secondary-50:90,177,214;--secondary-100:131,196,224;--secondary-200:172,216,234;--secondary-contrast:var(--light-0);--success:34,197,94;--successLight:212,237,218;--successDark:21,87,36;--warning:232,167,55;--warningLight:246,229,203;--warningDark:35,24,6;--error:239,68,68;--errorLight:248,215,218;--errorDark:114,28,36;--red-0:239,118,122;--red-50:236,95,100;--red-100:234,72,78;--red-200:231,50,56;--red-contrast:var(--dark-0);--orange-0:239,158,118;--orange-50:242,174,141;--orange-100:244,190,164;--orange-200:247,207,187;--orange-contrast:var(--dark-0);--yellow-0:227,190,57;--yellow-50:233,205,102;--yellow-100:240,219,146;--yellow-200:246,234,191;--yellow-contrast:var(--dark-0);--green-0:50,203,130;--green-50:90,214,155;--green-100:131,224,180;--green-200:172,234,204;--green-contrast:var(--dark-0);--blue-0:50,157,203;--blue-50:90,177,214;--blue-100:131,196,224;--blue-200:172,216,234;--blue-contrast:var(--dark-0);--purple-0:186,118,239;--purple-50:197,141,242;--purple-100:209,164,244;--purple-200:220,187,247;--purple-contrast:var(--dark-0);--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);--successBack:var(--successLight);--successText:var(--successDark);--warningBack:var(--warningLight);--warningText:var(--warningDark);--errorBack:var(--errorLight);--errorText:var(--errorDark)}body:has(#theme-switcher:checked){--action-50:236,95,100;--action-100:234,72,78;--action-200:231,50,56;--secondary-50:40,125,162;--secondary-100:30,94,121;--secondary-200:20,62,80;--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);--successBack:var(--successDark);--successText:var(--successLight);--warningBack:var(--warningDark);--warningText:var(--warningLight);--errorBack:var(--errorDark);--errorText:var(--errorLight);--red-50:236,95,100;--red-100:234,72,78;--red-200:231,50,56;--red-contrast:var(--light-0);--orange-50:236,142,95;--orange-100:234,126,72;--orange-200:231,110,50;--orange-contrast:var(--light-0);--yellow-50:204,166,29;--yellow-100:159,130,23;--yellow-200:115,93,16;--yellow-contrast:var(--light-0);--green-50:40,162,104;--green-100:30,121,78;--green-200:20,80,51;--green-contrast:var(--light-0);--blue-50:40,125,162;--blue-100:30,94,121;--blue-200:20,62,80;--blue-contrast:var(--dark-0);--purple-50:163,72,234;--purple-100:140,27,228;--purple-200:112,21,183;--purple-contrast:var(--light-0)}body{overflow-x:clip}@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')}.art,body.art.art{--action-0:var(--blue-0);--action-50:var(--blue-50)!important;--action-100:var(--blue-100)!important;--action-200:var(--blue-200)!important;--action-contrast:var(--blue-contrast)!important}.design,body.design.design{--action-0:var(--red-0);--action-50:var(--red-50)!important;--action-100:var(--red-100)!important;--action-200:var(--red-200)!important;--action-contrast:var(--red-contrast)!important}.development,body.development.development{--action-0:var(--orange-0);--action-50:var(--orange-50)!important;--action-100:var(--orange-100)!important;--action-200:var(--orange-200)!important;--action-contrast:var(--orange-contrast)!important}.strategy,body.strategy.strategy{--action-0:var(--green-0);--action-50:var(--green-50)!important;--action-100:var(--green-100)!important;--action-200:var(--green-200)!important;--action-contrast:var(--green-contrast)!important}.writing,body.writing.writing{--action-0:var(--purple-0);--action-50:var(--purple-50)!important;--action-100:var(--purple-100)!important;--action-200:var(--purple-200)!important;--action-contrast:var(--purple-contrast)!important}.project,body.project.project{--action-0:var(--yellow-0);--action-50:var(--yellow-50)!important;--action-100:var(--yellow-100)!important;--action-200:var(--yellow-200)!important;--action-contrast:var(--yellow-contrast)!important}a{color:rgb(var(--action-0))}a:visited{color:rgb(var(--action-100))}a.current.current,a:focus,a:hover,a:visited:focus,a:visited:hover{background-color:rgb(var(--action-0));color:rgb(var(--action-200))}li{list-style:inside;padding-left:1em}.dashboard li{list-style:none;padding-left:0}.condensed.condensed a{color:rgb(var(--contrast));border-radius:0;border-bottom:2px solid rgb(var(--action-0));padding:.25rem 1rem}.condensed.condensed a:focus,.condensed.condensed a:hover{color:var(--action-contrast)}.intro+nav{grid-column:full;margin:0!important}:is(h1,h2,h3,h4,h5,h6){margin:1.5em auto .25em 1.5rem}h1{margin:0 auto .25em 1.5rem}.pre-footer{background:rgb(var(--base));padding:3rem 0 2rem}.pre-footer p{margin:0 auto .25rem 1rem}.pre-footer a{background-color:rgb(var(--action-0));color:rgb(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}.wp-site-blocks.wp-site-blocks>header{--justify: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)}}footer{z-index:var(--z-9);padding:1rem 2rem!important}@media (min-width:768px){.w-50{max-width:calc(50% - 3rem)!important;margin:0 1rem!important}}main>*{margin-left:var(--btn)!important}main>section{max-width:100vw;padding:3rem var(--btn) 3rem 1.5rem;margin-left:0!important}main>section:nth-of-type(even){background-color:rgb(var(--base-100))}main>section>*{width:100%;max-width:var(--content);margin-left:1.5rem!important}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{padding:0;color:rgb(var(--action-0));background-color:rgb(var(--action-200))}.cover.alt{min-height:0}.cover>.content{background-color:rgba(var(--base),var(--op-6));width:100%;margin:0!important;color:rgb(var(--contrast));padding:2rem var(--btn) 2rem 2rem}.cover h1{margin:0}.cover>img{margin-left:0!important}.cover.alt>svg{max-width:none;margin:0 auto!important}.cover.alt+header#top{margin:0!important;grid-column:full;padding-right:var(--btn_)}.cover.alt+header h1{line-height:.75;margin:0 0 0 .5rem}.cover.alt+#top h1 small{line-height:1}@media (min-width:768px){.cover.alt>svg{max-width:40vw;margin:0!important}.cover.alt+#top{flex-direction:column;position:absolute;right:0;top:35vw;max-width:60vw;grid-column:narrow;z-index:10;color:rgb(var(--action-contrast));padding:0 var(--btn_) 0 0!important}.cover.alt+#top a{background-color:rgba(var(--action-0),var(--op-5));color:rgb(var(--action-contrast))}.cover.alt+#top a:focus,.cover.alt+#top a:hover{background-color:rgb(var(--action-contrast));color:rgb(var(--action-0))}}.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:rgb(var(--base-50));mix-blend-mode:lighten;content:'';position:absolute;inset:0}#top h1 small{margin:0;line-height:.5}#top p{margin-left:auto;font-size:var(--txt-x-small)}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:rgb(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);margin:0!important}details.info{max-width:var(--wider)}.needs-wants .info{max-width:var(--content)}.needs-wants li{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:flex-start}.needs-wants h3{margin:4rem 0 2rem}@media (min-width:768px){.needs-wants img{max-width:45%;margin-right:4%;position:sticky;top:var(--btnbtn)}.needs-wants img+.info{max-width:50%;display:inline-block}}.term-list .title{text-transform:none;padding:0}#summary .summary{display:grid;grid-template-columns:repeat(1,1fr);max-width:var(--wide)}#summary .summary .term-list{height:var(--chipchip)}#summary .summary>li{list-style:none;height:var(--chipchip)}#summary .summary .icon{--w:1.5em;margin-right:1rem}#summary .summary>li span:first-of-type{margin-right:1.5rem}.project-list.item-grid.list-view img{width:100%}.project-list h3{font-size:var(--txt-large);margin:0}@media (min-width:768px){#summary .summary{grid-template-columns:repeat(2,1fr)}}body:has(.on-this-page) .qtoggle{bottom:calc(var(--btn_) + var(--btn_))}.index.open.open{max-height:var(--maxHeight);height:max-content}.development .item-grid .item .images{aspect-ratio:16/9}.main-actions.main-actions .buttons.buttons{bottom:unset;top:var(--btn_);right:0!important}aside.main.right{padding-bottom:0;padding-top:var(--btn)}aside.main.right.expanded{right:var(--btn)}.main-actions button.expanded{border-top-left-radius:var(--radius-outer);border-bottom-left-radius:var(--radius);right:var(--btn)}ul.content-term-list{margin-left:0!important;margin-right:0!important;grid-column:full;max-width:var(--full)}ul.content-term-list>li{padding:var(--sp3) var(--btn_) var(--sp3) 0;list-style:none}ul.content-term-list>li:nth-of-type(even){background-color:rgb(var(--base-100))}ul.content-term-list img{width:40vw;max-inline-size:none}.content-term-list .cover{padding-bottom:0;min-height:40vh}.content-term-list .cover::before{display:none}.content-term-list .cover .content{background-color:rgba(var(--base),var(--op-6));width:100%;border-radius:1rem 1rem 0 0;padding:1rem}.content-term-list .cover h2{margin:0}.feed-block .item-grid{padding-right:var(--btnbtn)}div.poster{height:20vh;grid-column:full;max-width:100vw;margin:0!important;background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed}@media (min-width:768px){div.poster{height:35vh;background-size:cover}}.cover.cover{padding:0}