/*!
|
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.5
|
!*/
|
:root{
|
--filter: grayscale(.3) sepia(.4);
|
|
/** Download your Fonts from: https://gwfh.mranftl.com/ **/
|
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
--heading: 'Open Sans', var(--font-base);
|
--body: 'Montserrat', var(--font-base);
|
--fw-h: 900;
|
--fw-h-light: 400;
|
--fw-h-bold: 800;
|
--fw-b: 400;
|
--fw-b-bold: 900;
|
--fw-b-light: 200;
|
|
/* Colours
|
For best results, generate colours from base colours using: https://uicolors.app/generate/
|
or sass darken/lighten by 5%: http://scg.ar-ch.org/
|
*/
|
--light-0: #ededf4;
|
--light-50: #e3e3ee;
|
--light-100: #dadae8;
|
--light-200: #d1d1e3;
|
--light-rgb: 237,237,244;
|
|
--dark-0: #2a2b2a;
|
--dark-50: #2f302f;
|
--dark-100: #393a39;
|
--dark-200: #3e403e;
|
--dark-rgb: 42,43,42;
|
|
--action-0: #ef767a;
|
--action-50: #f28d90;
|
--action-100: #f4a4a6;
|
--action-200: #f7bbbd;
|
--action-rgb: 239,118,122;
|
--action-contrast: var(--light-0);
|
|
--secondary-0: #329dcb;
|
--secondary-50: #5ab1d6;
|
--secondary-100: #83c4e0;
|
--secondary-200: #acd8ea;
|
--secondary-rgb: 50,157,203;
|
--secondary-contrast: var(--light-0);
|
|
--success: #22C55E;
|
--successLight: #d4edda;
|
--successDark: #155724;
|
--successBack: var(--successLight);
|
--successText: var(--successDark);
|
--warning: #E8A737;
|
--warningLight: #F6E5CB;
|
--warningDark: #231806;
|
--warningBack: var(--warningLight);
|
--warningText: var(--warningDark);
|
--error: #EF4444;
|
--errorLight: #f8d7da;
|
--errorDark: #721c24;
|
--errorBack: var(--errorLight);
|
--errorText: var(--errorDark);
|
|
|
--red-0: #ef767a;
|
--red-50: #ec5f64;
|
--red-100: #ea484e;
|
--red-200: #e73238;
|
--red-rgb: 239,118,122;
|
|
--orange-0: #ef9e76;
|
--orange-50: #f2ae8d;
|
--orange-100: #f4bea4;
|
--orange-200: #f7cfbb;
|
--orange-rgb: 239,158,118;
|
|
--yellow-0: #E3BE39;
|
--yellow-50: #e9cd66;
|
--yellow-100: #f0db92;
|
--yellow-200: #f6eabf;
|
--yellow-rgb: 227,190,57;
|
|
--green-0: #32cb82;
|
--green-50: #5ad69b;
|
--green-100: #83e0b4;
|
--green-200: #aceacc;
|
--green-rgb: 50,203,130;
|
|
--blue-0: #329dcb;
|
--blue-50: #5ab1d6;
|
--blue-100: #83c4e0;
|
--blue-200: #acd8ea;
|
--blue-rgb: 50,157,203;
|
|
--purple-0: #ba76ef;
|
--purple-50: #c58df2;
|
--purple-100: #d1a4f4;
|
--purple-200: #dcbbf7;
|
--purple-rgb: 186,118,239;
|
|
--base: var(--light-0);
|
--base-50: var(--light-50);
|
--base-100: var(--light-100);
|
--base-200: var(--light-200);
|
--base-rgb: var(--light-rgb);
|
|
--contrast: var(--dark-0);
|
--contrast-50: var(--dark-50);
|
--contrast-100: var(--dark-100);
|
--contrast-200: var(--dark-200);
|
--contrast-rgb: var(--dark-rgb);
|
}
|
|
body:has(#theme-switcher:checked){
|
--action-50: #ec5f64;
|
--action-100: #ea484e;
|
--action-200: #e73238;
|
|
--secondary-50: #287da2;
|
--secondary-100: #1e5e79;
|
--secondary-200: #143e50;
|
|
--contrast: var(--light-0);
|
--contrast-50: var(--light-50);
|
--contrast-100: var(--light-100);
|
--contrast-200: var(--light-200);
|
--contrast-rgb: var(--light-rgb);
|
|
--base: var(--dark-0);
|
--base-50: var(--dark-50);
|
--base-100: var(--dark-100);
|
--base-200: var(--dark-200);
|
--base-rgb: var(--dark-rgb);
|
|
--successBack: var(--successDark);
|
--successText: var(--successLight);
|
--warningBack: var(--warningDark);
|
--warningText: var(--warningLight);
|
--errorBack: var(--errorDark);
|
--errorText: var(--errorLight);
|
|
--red-50: #ec5f64;
|
--red-100: #ea484e;
|
--red-200: #e73238;
|
|
--orange-50: #ec8e5f;
|
--orange-100: #ea7e48;
|
--orange-200: #e76e32;
|
|
--yellow-50: #cca61d;
|
--yellow-100: #9f8217;
|
--yellow-200: #735d10;
|
|
--green-50: #28a268;
|
--green-100: #1e794e;
|
--green-200: #145033;
|
|
--blue-50: #287da2;
|
--blue-100: #1e5e79;
|
--blue-200: #143e50;
|
|
--purple-50: #a348ea;
|
--purple-100: #8c1be4;
|
--purple-200: #7015b7;
|
}
|
/*** FONTS START **/
|
/** Download your Fonts from: https://gwfh.mranftl.com/
|
use ./assets/fonts/ as a base
|
**/
|
/* open-sans-regular - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* montserrat-200 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 200;
|
src: url('./assets/fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-200italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 200;
|
src: url('./assets/fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-regular - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/montserrat-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-900 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 900;
|
src: url('./assets/fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-900italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 900;
|
src: url('./assets/fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/*** FONTS END ***/
|
|
.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 li,
|
.intro + nav a {
|
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) {
|
footer, .pre-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;
|
}
|
|
.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: center;
|
--width: 75vh;
|
--third: calc(var(--width) / 3);
|
--half: calc(var(--width) / 2);
|
--quarter: calc(var(--half) / 2);
|
}
|
|
.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;
|
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: 50%;
|
}
|
.cover.development div:nth-of-type(2) {
|
top:var(--half);
|
right: 50%;
|
}
|
|
|
.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.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);
|
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.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: '';
|
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;
|
}
|
/**** 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: none;
|
padding-right: var(--btn);
|
}
|
|
#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);
|
}
|
