/*!
|
Theme Name: Madi Mori Theme
|
Theme URI: https://madimori.ca
|
Description: Jvb-theme child theme, for Tatty Soap.
|
Author: Jake
|
Author URI: https://jakevan.ca/
|
Template: jvb-theme
|
Version: 0.3.06
|
!*/
|
:root{
|
--background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path id="a" fill="none" stroke="%23000" stroke-width=".014" d="M15.822 16.06c-.021 0-.083-.034-.06-.09.004-.01.023-.033.024-.037.004-.01-.009-.052.024-.08.02-.016.065-.014.08-.003-.007-.02.007-.089.066-.084.017.001.038.014.05.01 0 0 .07-.035.098.026a.1.1 0 0 1 .008.032l-.002.016.016-.006c.015-.005.073-.01.085.044.003.012.001.04.003.045.003.01.038.036.027.078-.006.025-.044.05-.063.05.018.011.048.075-.004.107-.014.009-.039.011-.046.02 0 0-.036.07-.094.038a.1.1 0 0 1-.025-.022L16 16.19l-.008.014c-.01.013-.054.05-.096.016-.01-.009-.025-.033-.028-.036-.008-.006-.052-.007-.068-.047-.01-.024.006-.066.022-.077" clip-rule="evenodd"/><use xlink:href="%23a" transform="rotate(-39.276 -10.607 80.402)scale(2.98742)"/><use xlink:href="%23a" transform="rotate(-44.805 -37.563 118.023)scale(5.389)"/><use xlink:href="%23a" transform="rotate(218.887 50.994 84.718)scale(7.37672)"/><use xlink:href="%23a" transform="rotate(62.282 117.36 -13.588)scale(5.79528)"/><use xlink:href="%23a" transform="rotate(238.34 48.999 120.72)scale(8.92312)"/><use xlink:href="%23a" transform="rotate(-31.775 -43.1 147.008)scale(4.302)"/><use xlink:href="%23a" transform="rotate(134.177 36.716 20.345)scale(2.78662)"/><use xlink:href="%23a" transform="rotate(225.09 44.205 71.743)scale(6.01982)"/><use xlink:href="%23a" transform="rotate(121.022 50.094 29.998)scale(3.655)"/><use xlink:href="%23a" transform="rotate(-42.154 -.603 72.59)scale(2.49675)"/><use xlink:href="%23a" transform="rotate(5.681 862.543 -904.797)scale(6.21292)"/><use xlink:href="%23a" transform="rotate(-10.91 -189.46 426.469)scale(4.60314)"/><use xlink:href="%23a" transform="rotate(-26.868 -253.855 417.234)scale(10.59674)"/><use xlink:href="%23a" transform="rotate(-50.122 14.878 36.655)scale(1.79712)"/><use xlink:href="%23a" transform="rotate(-75.299 .522 46.75)scale(2.69331)"/><use xlink:href="%23a" transform="rotate(53.285 27.111 17.872)scale(1.1517)"/><use xlink:href="%23a" transform="rotate(254.654 31.68 165.897)scale(10.98135)"/><use xlink:href="%23a" transform="rotate(212.906 38.692 44.239)scale(3.96058)"/><use xlink:href="%23a" transform="rotate(-96.544 17.81 43.099)scale(3.2742)"/><use xlink:href="%23a" transform="rotate(-88.844 23.031 68.996)scale(4.3728)"/><use xlink:href="%23a" transform="rotate(-70.931 13.948 33.09)scale(2.28257)"/><use xlink:href="%23a" transform="rotate(-4.913 -447.208 618.813)scale(3.99985)"/><use xlink:href="%23a" transform="rotate(31.604 86.295 -7.457)scale(2.24754)"/><use xlink:href="%23a" transform="rotate(47.702 37.284 -2.691)scale(1.83035)"/><use xlink:href="%23a" transform="rotate(4.733 789.311 -703.802)scale(5.42008)"/><use xlink:href="%23a" transform="rotate(71.06 112.935 -13.855)scale(6.09888)"/><use xlink:href="%23a" transform="rotate(88.668 89.128 13.941)scale(5.28266)"/><use xlink:href="%23a" transform="rotate(-57.362 10.02 68.658)scale(3.2221)"/><use xlink:href="%23a" transform="rotate(226.012 30.028 50.952)scale(4.6482)"/><use xlink:href="%23a" transform="rotate(118.857 122.41 39.803)scale(9.78019)"/><use xlink:href="%23a" transform="rotate(119.17 60.286 21.488)scale(4.66228)"/><use xlink:href="%23a" transform="rotate(200.967 51.27 77.533)scale(6.88209)"/><use xlink:href="%23a" transform="rotate(42.92 142.71 -17.984)scale(5.3006)"/><use xlink:href="%23a" transform="rotate(-99.572 24.045 17.834)scale(1.30925)"/><use xlink:href="%23a" transform="rotate(220.884 71.004 121.013)scale(10.19418)"/><use xlink:href="%23a" transform="rotate(-48.299 -31.788 171.312)scale(7.43685)"/><use xlink:href="%23a" transform="rotate(-1.027 -1772.216 2374.039)scale(3.1542)"/><use xlink:href="%23a" transform="rotate(2.29 44.297 -136.78)scale(1.91142)"/><use xlink:href="%23a" transform="rotate(51.988 151.469 -32.38)scale(7.12958)"/><use xlink:href="%23a" transform="rotate(-46.275 25.314 5.938)scale(.69533)"/><use xlink:href="%23a" transform="rotate(-52.63 -32.143 148.992)scale(7.16946)"/><use xlink:href="%23a" transform="rotate(110.103 144.559 34.06)scale(9.79811)"/><use xlink:href="%23a" transform="rotate(200.002 41.207 36.631)scale(3.87382)"/><use xlink:href="%23a" transform="rotate(65.758 91.222 -2.921)scale(5.44265)"/><use xlink:href="%23a" transform="rotate(116.933 115.074 29.597)scale(8.84467)"/><use xlink:href="%23a" transform="rotate(242.866 29.314 73.544)scale(5.87325)"/></svg>');
|
--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: 'Noto Serif Hentaigana', var(--font-base);
|
--body: 'Playfair Display', var(--font-base);
|
--fw-h: 400;
|
--fw-h-light: 200;
|
--fw-h-bold: 900;
|
--fw-b: 400;
|
--fw-b-bold: 900;
|
--fw-b-light: 400;
|
|
/* 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: 252,251,251; /* #fcfbfb; */
|
--light-50: 241,236,236; /* #f1ecec; */
|
--light-100: 230,222,222; /* #e6dede; */
|
--light-200: 219,207,207; /* #dbcfcf; */
|
|
--dark-0: 26,19,18; /* #1a1312; */
|
--dark-50: 41,30,28; /* #291e1c; */
|
--dark-100: 56,41,39; /* #382927; */
|
--dark-200: 71,52,49; /* #473431; */
|
|
--action-0: 173,91,75; /* #AD5B4B; */
|
--action-50: 183,105,90; /* #b7695a; */
|
--action-100: 191,121,108; /* #bf796c; */
|
--action-200: 199,138,126; /* #c78a7e; */
|
--action-contrast: var(--light-0);
|
|
--secondary-0: 218,153,63; /* #DA993F; */
|
--secondary-50: 222,164,84; /* #dea454; */
|
--secondary-100: 226,176106;/* #e2b06a; */
|
--secondary-200: 230,187,127;/* #e6bb7f; */
|
--secondary-contrast: var(--light-0);
|
|
--success: 32,214,78; /* #20D64E; */
|
--successLight: 219,250,227;/* #DBFAE3; */
|
--successDark: 5,35,13; /* #05230D; */
|
|
--warning: 214,145,33; /* #D69121; */
|
--warningLight: 246,229,203;/* #F6E5CB; */
|
--warningDark: 35,24,6; /* #231806; */
|
|
--error: 207,22,22; /* #CF1616; */
|
--errorLight: 249,200,200; /* #F9C8C8; */
|
--errorDark: 74,8,8; /* #4A0808; */
|
|
|
--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: 155,82,67; /* #9b5243; */
|
--action-100: 137,72,60; /* #89483c; */
|
--action-200: 120,63,52; /* #783f34; */
|
|
--secondary-50: 214,142,42; /* #d68e2a; */
|
--secondary-100: 193,128,37;/* #c18025; */
|
--secondary-200: 173,113,33;/* #ab7121; */
|
|
--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
|
|
**/
|
|
/* playfair-display-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: 'Playfair Display';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/playfair-display-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/playfair-display-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* playfair-display-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: 'Playfair Display';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/playfair-display-v40-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/playfair-display-v40-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* playfair-display-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: 'Playfair Display';
|
font-style: normal;
|
font-weight: 900;
|
src: url('./assets/fonts/playfair-display-v40-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/playfair-display-v40-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* playfair-display-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: 'Playfair Display';
|
font-style: italic;
|
font-weight: 900;
|
src: url('./assets/fonts/playfair-display-v40-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/playfair-display-v40-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* noto-serif-hentaigana-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: 'Noto Serif Hentaigana';
|
font-style: normal;
|
font-weight: 200;
|
src: url('./assets/fonts/noto-serif-hentaigana-v17-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/noto-serif-hentaigana-v17-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* noto-serif-hentaigana-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: 'Noto Serif Hentaigana';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/noto-serif-hentaigana-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/noto-serif-hentaigana-v17-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* noto-serif-hentaigana-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: 'Noto Serif Hentaigana';
|
font-style: normal;
|
font-weight: 900;
|
src: url('./assets/fonts/noto-serif-hentaigana-v17-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/noto-serif-hentaigana-v17-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/*** FONTS END ***/
|
|
.wp-site-blocks.wp-site-blocks>header, body>header {
|
--justify:center;
|
overflow: hidden;
|
height: max(var(--btn), 10vh);
|
}
|
.wp-site-blocks > header #theme-switch {
|
position: absolute;
|
left: 1rem;
|
}
|
.wp-site-blocks > header img {
|
height: var(--chipchip);
|
width: auto!important;
|
margin: 0 1rem;
|
}
|
.wp-site-blocks > header .title {
|
align-items: center;
|
font-size: var(--txt-large);
|
font-family: var(--heading);
|
font-weight: var(--fw-h-bold);
|
text-transform: uppercase;
|
width: max-content;
|
}
|
|
.intro {
|
padding: 1rem;
|
}
|
.intro h1 {
|
line-height: .75;
|
font-size: 25vw;
|
font-weight: var(--fw-h-bold);
|
font-family: var(--heading);
|
margin: 0 auto 3rem;
|
text-align: center;
|
}
|
.intro p {
|
text-align: center;
|
}
|
|
|
.pre-footer {
|
background-color: rgb(var(--base));
|
padding: 2rem;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: .25rem;
|
}
|
.pre-footer p {
|
margin: 0;
|
text-align: center;
|
}
|
|
.pre-footer + footer {
|
margin-top: 0;
|
}
|
|
nav.condensed ul {
|
flex-direction: row;
|
}
|
|
aside.sub {
|
position: sticky;
|
top: -2rem;
|
transition: top var(--trans-base);
|
background-color: rgb(var(--base));
|
box-shadow: rgba(var(--base-100),var(--op-45)) var(--shdw-down);
|
}
|
aside.sub.row.x-btw.x-btw {
|
--justify: center;
|
}
|
aside.sub p {
|
margin: 0;
|
text-align: center;
|
}
|
|
.scroll-up .sub-header {
|
top: var(--btn);
|
}
|
|
footer {
|
overflow: hidden;
|
}
|
|
/*footer > svg,*/
|
/*header > svg {*/
|
/* color: rgb(var(--base-50));*/
|
/* opacity: .5;*/
|
/* position: absolute;*/
|
/* z-index: -1;*/
|
/* width: 100vw;*/
|
/* height: 100vw;*/
|
/* inset: -20vw 0;*/
|
/*}*/
|
|
/*footer > svg {*/
|
/* inset: -35vw 0;*/
|
/* transform: rotate(-15deg);*/
|
/*}*/
|
|
/*header > svg path {*/
|
/* stroke: rgba(var(--contrast-100),.2)!important;*/
|
/*}*/
|
.callout.callout {
|
position: relative;
|
padding: 3rem 1rem;
|
}
|
footer, header {
|
position: relative;
|
}
|
footer::before,
|
header::before,
|
.callout::before {
|
content: '';
|
inset: 0;
|
position: absolute;
|
z-index: 0;
|
mask-image: var(--background);
|
-webkit-mask-image: var(--background);
|
mask-size: cover;
|
-webkit-mask-size: cover;
|
mask-repeat: no-repeat;
|
-webkit-mask-repeat: no-repeat;
|
mask-position: center;
|
-webkit-mask-position: center;
|
background-color: rgba(var(--contrast-100), var(--op-2));
|
}
|
header::before,
|
footer::before {
|
width: 200vw;
|
height: 200vh;
|
inset: -25vh -25vw;
|
z-index: -1;
|
}
|
header::before {
|
width:150vw;
|
height: 150vw;
|
transform: rotate(10deg);
|
}
|
footer::before {
|
transform: rotate(-10deg);
|
}
|
|
.callout > .wrap {
|
z-index: 1;
|
background-color: rgb(var(--action-0));
|
border: .5rem solid rgb(var(--secondary-0));
|
padding: 1rem;
|
width: 100%;
|
max-width: 100%;
|
}
|
.callout > .wrap h1 {
|
margin: 0;
|
font-size: 1.75em;
|
}
|
.callout > .wrap .buttons {
|
margin-bottom: 0;
|
}
|
@media (min-width:768px) {
|
.callout.callout {
|
padding: 2rem;
|
}
|
.callout > .wrap {
|
padding: 2rem;
|
border-width: 1rem;
|
max-width: var(--wider);
|
}
|
.callout > .wrap h1 {
|
font-size: var(--txt-xxx-large);
|
}
|
.callout > .wrap .buttons li {
|
max-width: 49%;
|
}
|
}
|
.callout .buttons a {
|
color: var(--secondary-contrast);
|
background-color: rgb(var(--secondary-0));
|
}
|
