/*
|
Theme Name: Tatty Soap Theme
|
Theme URI: https://tattysoap.ca
|
Description: Jvb-theme child theme, for Tatty Soap.
|
Author: Jake
|
Author URI: https://jakevan.ca/
|
Template: jvb-theme
|
Version: 0.1.0
|
*/
|
:root{
|
/* Layout */
|
--narrow: min(500px, 50vw);
|
--maxWidth: min(768px, 65vw);
|
--alignWide: min(1024px, 90vw);
|
--alignMed: min(962px, 82.5vw);
|
--full: 100vw;
|
/* Margin */
|
--mr: auto;
|
--ml: auto;
|
--mt: 1rem;
|
--mb: 1rem;
|
--setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
|
--insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
|
--height: 4rem;
|
--doubleHeight: 8rem;
|
--offHeight: 5rem;
|
--maxHeight: calc(100vh - var(--height) - var(--height));
|
|
--gap: .5rem;
|
--wrap: wrap;
|
--justify: center;
|
--align: center;
|
--dir: row;
|
/* Typography */
|
--w: 1.2em; /** Icon **/
|
|
--filter: grayscale(.3) sepia(.4);
|
|
/** Download your Fonts from: https://gwfh.mranftl.com/ **/
|
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
--heading: 'Noto Serif Hentaigana', var(--font-base);
|
--body: 'Playfair Display', var(--font-base);
|
--hWeight: 400;
|
--hlight: 200;
|
--hBold: 900;
|
--bWeight: 400;
|
--bBold: 900;
|
--bLight: 400;
|
|
/* Font sizes */
|
--enormous: calc(26vh - 4rem);
|
--xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
|
--xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
|
--xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
|
--large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
|
--xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
|
--medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
|
--small: clamp(.95rem, .879rem + .19vw, 1.05rem);
|
--extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
|
/* Colours
|
For best results, generate colours from base colours using: https://uicolors.app/generate/
|
or sass darken/lighten by 5%: http://scg.ar-ch.org/
|
*/
|
--light-0: #fdfcfc;
|
--light-50: #f7f4f3;
|
--light-100: #f0ebea;
|
--light-200: #eae3e2;
|
--dark-0: #241b1a;
|
--dark-50: #2c2220;
|
--dark-100: #352927;
|
--dark-200: #3e2f2d;
|
--action-0: #AD5B4B;
|
--action-50: #b7695a;
|
--action-100: #bf796c;
|
--action-200: #c78a7e;
|
--secondary-0: #DA993F;
|
--secondary-50: #dea454;
|
--secondary-100: #e2b06a;
|
--secondary-200: #e6bb7f;
|
|
--success: #20D64E;
|
--successLight: #DBFAE3;
|
--successDark: #05230D;
|
--successBack: var(--successLight);
|
--successText: var(--successDark);
|
--warning: #D69121;
|
--warningLight: #F6E5CB;
|
--warningDark: #231806;
|
--warningBack: var(--warningLight);
|
--warningText: var(--warningDark);
|
--error: #CF1616;
|
--errorLight: #F9C8C8;
|
--errorDark: #4A0808;
|
--errorBack: var(--errorLight);
|
--errorText: var(--errorDark);
|
--action-contrast: var(--light-0);
|
--secondary-contrast: var(--light-0);
|
--light-rgb: 239,239,239;
|
--dark-rgb: 21,21,21;
|
--action-rgb: 255,0,128;
|
--secondary-rgb: 252,185,0;
|
|
--rgba-subtle: rgba(var(--c),.5);
|
--rgba-subtle-hover: rgba(var(--c),.1);
|
|
--base: var(--light-0);
|
--base-50: var(--light-50);
|
--base-100: var(--light-100);
|
--base-200: var(--light-200);
|
--contrast: var(--dark-0);
|
--contrast-50: var(--dark-50);
|
--contrast-100: var(--dark-100);
|
--contrast-200: var(--dark-200);
|
--c: var(--light-rgb);
|
--base-rgb: var(--light-rgb);
|
--contrast-rgb: var(--dark-rgb);
|
|
/* Stacking */
|
--z-1: 5;
|
--z-2: 10;
|
--z-3: 15;
|
--z-4: 20;
|
--z-5: 50;
|
--z-6: 100;
|
--z-top: 999;
|
--zz-top: 999999;
|
/* Overlays */
|
--rgb-light: .25;
|
--rgb-medium: .66;
|
--rgb-heavy: .85;
|
--overlay-light: rgba(var(--c), .25);
|
--overlay-medium: rgba(var(--c), .66);
|
--overlay-heavy: rgba(var(--c), .85);
|
--shimmer: rgba(var(--dark-rgb),0) 0%,
|
rgba(var(--dark-rgb),.05) 50%,
|
rgba(var(--dark-rgb),0) 100%;
|
/* Shadows */
|
--shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
|
--shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
|
--shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
|
--shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
|
--shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
|
--subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
|
--subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
|
--shadow-none: transparent 0px 0px 0px;
|
/* Rounding */
|
--innerRadius: 4px;
|
--outerPadding: 1rem;
|
--outerRadius: calc(var(--innerRadius) + var(--outerPadding));
|
/* Transitions */
|
--function:cubic-bezier(.47,.24,.07,.47);
|
--timing: .25s;
|
--transition-base: var(--timing) var(--function);
|
--transition-color: background-color var(--transition-base),
|
color var(--transition-base), border var(--transition-base);
|
--transition-transform: transform var(--transition-base);
|
--transition-size: width var(--transition-base),
|
height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
|
|
--offScreen: -200vw;
|
|
|
--scrollbar-width: 8px;
|
--scrollbar-track-color: var(--base-100);
|
--scrollbar-thumb-color: var(--action-0);
|
--scrollbar-thumb-hover-color: var(--action-50);
|
--scrollbar-thumb-border: 2px solid var(--base-50);
|
--scrollbar-border-radius: 4px;
|
|
--can-scroll: 0;
|
}
|
|
body:has(#theme-switcher:checked){
|
--action-50: #9b5243;
|
--action-100: #89483c;
|
--action-200: #783f34;
|
--secondary-50: #d68e2a;
|
--secondary-100: #c18025;
|
--secondary-200: #ab7121;
|
--contrast: var(--light-0);
|
--contrast-50: var(--light-50);
|
--contrast-100: var(--light-100);
|
--contrast-200: var(--light-200);
|
--base: var(--dark-0);
|
--base-50: var(--dark-50);
|
--base-100: var(--dark-100);
|
--base-200: var(--dark-200);
|
--c: var(--dark-rgb);
|
--base-rgb: var(--dark-rgb);
|
--contrast-rgb: var(--light-rgb);
|
--overlay-light: rgba(var(--c), .25);
|
--overlay-medium: rgba(var(--c), .5);
|
--overlay-heavy: rgba(var(--c), .85);
|
--shimmer: rgba(var(--c),0) 0%,
|
rgba(var(--c),.05) 50%,
|
rgba(var(--c),0) 100%;
|
--shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
|
--shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */
|
--shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */
|
--shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */
|
--shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */
|
--subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
|
--subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
|
|
--successBack: var(--successDark);
|
--successText: var(--successLight);
|
--warningBack: var(--warningDark);
|
--warningText: var(--warningLight);
|
--errorBack: var(--errorDark);
|
--errorText: var(--errorLight);
|
|
}
|
/*** 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 > header .title {
|
align-items: center;
|
font-size: var(--large);
|
font-family: var(--heading);
|
font-weight: var(--hBold);
|
text-transform: uppercase;
|
}
|
|
.intro {
|
padding: 1rem;
|
}
|
.intro h1 {
|
line-height: .75;
|
font-size: 25vw;
|
font-weight: var(--hBold);
|
font-family: var(--heading);
|
margin: 0 auto 3rem;
|
}
|
.intro p {
|
text-align: center;
|
}
|
