/*!
|
Theme Name: Martian Infotech Extension
|
Theme URI: https://martianit.ca
|
Description: Jvb-theme child theme, for Martian Infotech.
|
Author: Jake
|
Author URI: https://jakevan.ca/
|
Template: jvb-theme
|
Version: 0.1.0
|
!*/
|
:root{
|
--filter: grayscale(.3) sepia(.4);
|
|
/** Download your Fonts from: https://gwfh.mranftl.com/ **/
|
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
--heading: 'Ailerons', var(--font-base);
|
--body: 'Oswald', var(--font-base);
|
--fw-h: 500;
|
--fw-h-light: 500;
|
--fw-h-bold: 500;
|
--fw-b: 300;
|
--fw-b-bold: 700;
|
--fw-b-light: 300;
|
|
/* 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: 250,249,250; /* #faf9fa */
|
--light-50: 238,235,238; /* #eeebee */
|
--light-100: 227,221,227; /* #e3dde3 */
|
--light-200: 215,207,215; /* #d7cfd7 */
|
--light-rgb: 250,249,250;
|
|
--dark-0: 35,31,32; /* #231f20 */
|
--dark-50: 49,43,44; /* #312b2c */
|
--dark-100: 62,55,57; /* #3e3739 */
|
--dark-200: 76,67,69; /* #4c4345; */
|
--dark-rgb: 35,31,32;
|
|
--action-0: 5,165,75; /* #05a54b; */
|
--action-50: 6,190,86; /* #06be56; */
|
--action-100: 7,214,97; /* #07d661; */
|
--action-200: 7,239,109; /* #07ef6d; */
|
--action-rgb: 5,165,75;
|
--action-contrast: var(--light-0);
|
|
--secondary-0: 255,210,90; /* #FFD25A; */
|
--secondary-50: 255,217,115;/* #ffd973; */
|
--secondary-100: 255,244,141;/* #ffe08d; */
|
--secondary-200: 255,231,166;/* #ffe7a6; */
|
--secondary-rgb: 255,210,90;
|
--secondary-contrast: var(--dark-0);
|
|
--success: 5,165,75; /* #05a54b; */
|
--successLight: 222,254,236;/* #defeec; */
|
--successDark: 1,41,19; /* #012913; */
|
|
--warning: 214,145,33; /* #D69121; */
|
--warningLight: 246,229,203;/* #F6E5CB; */
|
--warningDark: 35,24,6; /* #231806; */
|
|
--error: 240,128,128; /* #F08080; */
|
--errorLight: 253,242,242; /* #fdf2f2; */
|
--errorDark: 55,7,7; /* #370707; */
|
|
|
|
--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: 4,140,64; /* #048c40; */
|
--action-100: 4,115,52; /* #047334; */
|
--action-200: 3,91,41; /* #035b29; */
|
--secondary-50: 255,203,64; /* #ffcb40; */
|
--secondary-100: 255,196,39;/* #ffc427; */
|
--secondary-200: 255,189,13;/* #ffbd0d; */
|
|
|
--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);
|
}
|
/*** FONTS START **/
|
/** Download your Fonts from: https://gwfh.mranftl.com/
|
use ./assets/fonts/ as a base
|
**/
|
/* oswald-300 - 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: 'Oswald';
|
font-style: normal;
|
font-weight: 300;
|
src: url('./assets/fonts/oswald-v57-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/oswald-v57-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* oswald-700 - 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: 'Oswald';
|
font-style: normal;
|
font-weight: 700;
|
src: url('./assets/fonts/oswald-v57-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/oswald-v57-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* oswald-700 - 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: 'Ailerons';
|
font-style: normal;
|
font-weight: 500;
|
src: url('./assets/fonts/Ailerons-Typeface.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/Ailerons-Typeface.otf') format('opentype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
html {
|
font-size: 18px;
|
}
|
/*** FONTS END ***/
|
div.logo {
|
display: flex;
|
gap: 1.5rem;
|
align-items: center;
|
margin: 0 auto;
|
}
|
.logo #martian-infotech-logo {
|
width: var(--btn);
|
height: var(--btn);
|
}
|
.logo #martian-infotech {
|
height: var(--chipchip);
|
width: auto;
|
}
|
svg #Infotech {
|
fill: rgb(var(--contrast))!important;
|
}
|
|
.pre-header .socials {
|
display: flex;
|
justify-content: flex-end;
|
list-style: none;
|
gap: .5rem;
|
width:100%;
|
}
|
|
.sub-header {
|
position: sticky;
|
top: -2rem;
|
transition: top var(--trans-base);
|
background-color: rgb(var(--base))!important;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
|
}
|
.sub-header p {
|
margin: 0;
|
text-align: center;
|
}
|
|
.scroll-up .sub-header {
|
top: calc(var(--btn) + var(--chip_) - 2px);
|
}
|
|
|
/*nav.condensed {*/
|
/* width: 100%;*/
|
/*}*/
|
/* nav.condensed ul {*/
|
/* display: flex;*/
|
/* flex-direction: row;*/
|
/* justify-content: center;*/
|
/* font-family: var(--body);*/
|
/* }*/
|
/* nav.condensed ul a {*/
|
/* text-transform: uppercase;*/
|
/* }*/
|
|
footer {
|
margin-top: 1rem;
|
}
|
.pre-footer {
|
background-color: rgb(var(--base));
|
text-align: center;
|
padding: 2rem 0;
|
}
|
/*nav.always.fixed ul {*/
|
/* justify-content: flex-end;*/
|
/*}*/
|
|
/*nav.always.fixed li:has(.socials) {*/
|
/* margin-top: 2rem;*/
|
/*}*/
|
|
.intro {
|
margin: 2rem auto 4rem!important;
|
gap: 1.5rem;
|
align-items: center;
|
height: max-content;
|
}
|
.intro h1 {
|
margin: 0;
|
font-size: var(--txt-xx-large);
|
}
|
.intro svg {
|
width: 40vw;
|
height: auto;
|
margin: 0 auto;
|
}
|
@media (min-width:768px){
|
.intro svg {
|
width: 50vw;
|
margin: unset;
|
}
|
.intro h1 {
|
font-size: var(--txt-xxx-large);
|
max-width: 50vw;
|
}
|
}
|
|
|
main > section:nth-of-type(even) {
|
background-color: rgb(var(--base-100));
|
/*max-width: 100vw;*/
|
padding: 3rem 0;
|
}
|
/*main > section > * {*/
|
/* width: 100%;*/
|
/* max-width: var(--content);*/
|
/*}*/
|
/*main > section:nth-of-type(even) > * {*/
|
/* max-width: var(--wide);*/
|
/*}*/
|
.callout a {
|
color: rgb(var(--action-0));
|
}
|
.callout .buttons a {
|
color: rgb(var(--action-contrast));
|
}
|
|
/*.item-grid {*/
|
/* grid-template-columns: repeat(1, 1fr)!important;*/
|
/*}*/
|
|
.item-grid .item figure {
|
max-width: 40vw;
|
width: 100%;
|
}
|
.item-grid .item > .group {
|
width: 100%;
|
margin-left: 1rem;
|
}
|
/*ul.socials {*/
|
/* width: 100%;*/
|
/* --justify: flex-end!important;*/
|
/* height: 100%!important;*/
|
/*}*/
|
/*ul.socials li {*/
|
/* list-style: none;*/
|
/*}*/
|
|
aside.sub.header {
|
background-color: rgb(var(--base));
|
text-align: center;
|
z-index: var(--z-6);
|
position: sticky;
|
top: 0;
|
left: 0;
|
transition: top var(--trans-base);
|
--justify: center!important;
|
}
|
.scroll-up aside.sub.header {
|
top: calc(var(--btn) + var(--chip));
|
}
|
|
:is(h1,h2,h3,h4,h5,h6) small {
|
line-height: .9;
|
}
|
/*nav a {*/
|
/* --align: center;*/
|
/*}*/
|
|
.buttons li {
|
width: 100%;
|
}
|
|
/*nav.condensed li {*/
|
/* --dir: row;*/
|
/*}*/
|
@media (min-width: 768px) {
|
.media-text.row {
|
--wrap: nowrap;
|
}
|
}
|
|
header > a[rel="home"],
|
header > .logo {
|
margin: 0 auto;
|
}
|
|
.loop li {
|
--gap: 1rem;
|
}
|
@media (max-width: 767px) {
|
.loop li>figure {
|
float: unset;
|
margin: 0;
|
aspect-ratio: unset;
|
max-width: none;
|
}
|
}
|
|
.home .loop p:has(.read-more) {
|
display: none;
|
}
|
|
.loop li > .col.col {
|
width: unset;
|
max-width: 100%;
|
}
|
|
.media-text > * {
|
width: 100%;
|
max-width: 50%;
|
}
|
