| | |
| | | /* |
| | | Theme Name: Tatty Soap Theme |
| | | Theme URI: https://tattysoap.ca |
| | | /*! |
| | | 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.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; |
| | | } |
| | | 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);--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;--light-0:252,251,251;--light-50:241,236,236;--light-100:230,222,222;--light-200:219,207,207;--dark-0:26,19,18;--dark-50:41,30,28;--dark-100:56,41,39;--dark-200:71,52,49;--action-0:173,91,75;--action-50:183,105,90;--action-100:191,121,108;--action-200:199,138,126;--action-contrast:var(--light-0);--secondary-0:218,153,63;--secondary-50:222,164,84;--secondary-100:226,176106;--secondary-200:230,187,127;--secondary-contrast:var(--light-0);--success:32,214,78;--successLight:219,250,227;--successDark:5,35,13;--warning:214,145,33;--warningLight:246,229,203;--warningDark:35,24,6;--error:207,22,22;--errorLight:249,200,200;--errorDark:74,8,8;--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;--action-100:137,72,60;--action-200:120,63,52;--secondary-50:214,142,42;--secondary-100:193,128,37;--secondary-200:173,113,33;--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)}@font-face{font-display:swap;font-family:'Playfair Display';font-style:normal;font-weight:400;src:url(assets/fonts/playfair-display-v40-latin-regular.woff2) format('woff2'),url(assets/fonts/playfair-display-v40-latin-regular.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Playfair Display';font-style:italic;font-weight:400;src:url(assets/fonts/playfair-display-v40-latin-italic.woff2) format('woff2'),url(assets/fonts/playfair-display-v40-latin-italic.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Playfair Display';font-style:normal;font-weight:900;src:url(assets/fonts/playfair-display-v40-latin-900.woff2) format('woff2'),url(assets/fonts/playfair-display-v40-latin-900.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Playfair Display';font-style:italic;font-weight:900;src:url(assets/fonts/playfair-display-v40-latin-900italic.woff2) format('woff2'),url(assets/fonts/playfair-display-v40-latin-900italic.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Noto Serif Hentaigana';font-style:normal;font-weight:200;src:url(assets/fonts/noto-serif-hentaigana-v17-latin-200.woff2) format('woff2'),url(assets/fonts/noto-serif-hentaigana-v17-latin-200.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Noto Serif Hentaigana';font-style:normal;font-weight:400;src:url(assets/fonts/noto-serif-hentaigana-v17-latin-regular.woff2) format('woff2'),url(assets/fonts/noto-serif-hentaigana-v17-latin-regular.ttf) format('truetype')}@font-face{font-display:swap;font-family:'Noto Serif Hentaigana';font-style:normal;font-weight:900;src:url(assets/fonts/noto-serif-hentaigana-v17-latin-900.woff2) format('woff2'),url(assets/fonts/noto-serif-hentaigana-v17-latin-900.ttf) format('truetype')}.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}.callout.callout{position:relative;padding:3rem 1rem}footer,header{position:relative}.callout::before,footer::before,header::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))}footer::before,header::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))} |