From a9bc55996f23ceeb6a6e941bcb56db11c385cddf Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 10 Nov 2025 21:05:52 +0000
Subject: [PATCH] =update
---
all.css | 757 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 555 insertions(+), 202 deletions(-)
diff --git a/all.css b/all.css
index 16b036d..82f09be 100644
--- a/all.css
+++ b/all.css
@@ -27,6 +27,8 @@
--ml: auto;
--mt: 1rem;
--mb: 1rem;
+ --p-x: 1.5rem;
+ --p-y: .5rem;
--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;
@@ -53,6 +55,7 @@
--bWeight: 400;
--bBold: 700;
--bLight: 200;
+
/* Font sizes */
--enormous: calc(26vh - 4rem);
--xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
@@ -66,7 +69,11 @@
/* 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/
+ For DUOTONE: https://cssduotone.com/
*/
+ --mixBlendMode: darken;
+ --coverBlend: overlay;
+ --coverIndex: 2;
--light-0: #fafafa;
--light-50: #fcfbfb;
--light-100: #f1eded;
@@ -98,7 +105,7 @@
--action-rgb: 183,51,46;
--secondary-rgb: 232,167,55;
- --rgba-subtle: rgba(var(--c),.5);
+ --rgba-subtle: rgba(var(--c),.05);
--rgba-subtle-hover: rgba(var(--c),.1);
--base: var(--light-0);
@@ -121,7 +128,9 @@
--z-5: 50;
--z-6: 100;
--z-top: 999;
+ --z-topper: 1000;
--zz-top: 999999;
+ --z-above: 9999999;
/* Overlays */
--rgb-subtle: .05;
--rgb-subtle-hover: .15;
@@ -157,22 +166,32 @@
--transition-size: width var(--transition-base),
height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
+ /**** SPACING ****/
+ --sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem); /* 8px → 16px */
+ --sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem); /* 12px → 24px */
+ --sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem); /* 16px → 32px */
+ --sp4: clamp(1.5rem, 2.143vw + 0.964rem, 3rem); /* 24px → 48px */
+ --sp5: clamp(2rem, 2.857vw + 1.286rem, 4rem); /* 32px → 64px */
+ --sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem); /* 48px → 96px */
+ --sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem); /* 64px → 128px */
+
--offScreen: -200vw;
- /** Icons **/
- --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
- --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
- --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
- --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
- --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
- --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
- --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
- --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
- --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
- --linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
- --swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');
+ /*!** Icons **!*/
+ /*--quote: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23000000" viewBox="0 0 256 256"><path d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"></path></svg>');*/
+ /*--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');*/
+ /*--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');*/
+ /*--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
+ /*--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');*/
+ /*--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
+ /*--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');*/
+ /*--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');*/
+ /*--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');*/
+ /*--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');*/
+ /*--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');*/
+ /*--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');*/
+ /*--linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');*/
+ /*--swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');*/
--scrollbar-width: 8px;
@@ -192,6 +211,9 @@
--secondary-50: #ebb14e;
--secondary-100: #edbb65;
--secondary-200: #f0c57c;
+ --mixBlendMode: lighten;
+ --coverBlend: multiply;
+ --coverIndex: 0;
--contrast: var(--light-0);
--contrast-50: var(--light-50);
--contrast-100: var(--light-100);
@@ -222,115 +244,20 @@
--errorBack: #721c24;
--errorText: #f8d7da;
- --dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fafafa' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+ /*--dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fafafa' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/
- --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
- --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
- --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
- --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
- --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
- --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
- --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
- --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
- --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
- --linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
-}
-/******************************************************************
-FONTS
-******************************************************************/
-/** Download and generate from https://gwfh.mranftl.com/fonts **/
-/* aleo-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: 'Aleo';
- font-style: normal;
- font-weight: 400;
- src: url('./fonts/aleo-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/aleo-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* aleo-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: 'Aleo';
- font-style: italic;
- font-weight: 400;
- src: url('./fonts/aleo-v15-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/aleo-v15-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* aleo-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: 'Aleo';
- font-style: normal;
- font-weight: 900;
- src: url('./fonts/aleo-v15-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/aleo-v15-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* aleo-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: 'Aleo';
- font-style: italic;
- font-weight: 900;
- src: url('./fonts/aleo-v15-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/aleo-v15-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-
-/* josefin-slab-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: 'Josefin Slab';
- font-style: normal;
- font-weight: 200;
- src: url('./fonts/josefin-slab-v28-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/josefin-slab-v28-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* josefin-slab-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: 'Josefin Slab';
- font-style: italic;
- font-weight: 200;
- src: url('./fonts/josefin-slab-v28-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/josefin-slab-v28-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* josefin-slab-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: 'Josefin Slab';
- font-style: normal;
- font-weight: 400;
- src: url('./fonts/josefin-slab-v28-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/josefin-slab-v28-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* josefin-slab-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: 'Josefin Slab';
- font-style: italic;
- font-weight: 400;
- src: url('./fonts/josefin-slab-v28-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/josefin-slab-v28-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* josefin-slab-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: 'Josefin Slab';
- font-style: normal;
- font-weight: 700;
- src: url('./fonts/josefin-slab-v28-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/josefin-slab-v28-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* josefin-slab-700italic - 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: 'Josefin Slab';
- font-style: italic;
- font-weight: 700;
- src: url('./fonts/josefin-slab-v28-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/josefin-slab-v28-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+ /*--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');*/
+ /*--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');*/
+ /*--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
+ /*--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');*/
+ /*--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
+ /*--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');*/
+ /*--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');*/
+ /*--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');*/
+ /*--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');*/
+ /*--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');*/
+ /*--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');*/
+ /*--linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');*/
}
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@@ -420,6 +347,9 @@
padding-inline-start: 2ch;
}
}
+ li {
+ padding-bottom: .5rem;
+ }
img,
video,
@@ -634,7 +564,10 @@
transition-property: background-color, border;
}
-
+.home > section:first-of-type,
+.home main {
+ margin-top: 0;
+}
/**************************************************************
UTILITY CLASSES
**************************************************************/
@@ -644,6 +577,122 @@
body.loading {
overflow: hidden;
}
+/** PADDING **/
+.p-1 {padding: var(--sp1);}
+.p-2 {padding: var(--sp2);}
+.p-3 {padding: var(--sp3);}
+.p-4 {padding: var(--sp4);}
+.p-5 {padding: var(--sp5);}
+.p-6 {padding: var(--sp6);}
+.p-7 {padding: var(--sp7);}
+
+.px-1 {padding-left: var(--sp1);padding-right: var(--sp1);}
+.px-2 {padding-left: var(--sp2);padding-right: var(--sp2);}
+.px-3 {padding-left: var(--sp3);padding-right: var(--sp3);}
+.px-4 {padding-left: var(--sp4);padding-right: var(--sp4);}
+.px-5 {padding-left: var(--sp5);padding-right: var(--sp5);}
+.px-6 {padding-left: var(--sp6);padding-right: var(--sp6);}
+.px-7 {padding-left: var(--sp7);padding-right: var(--sp7);}
+
+.py-1 {padding-top: var(--sp1);padding-bottom: var(--sp1);}
+.py-2 {padding-top: var(--sp2);padding-bottom: var(--sp2);}
+.py-3 {padding-top: var(--sp3);padding-bottom: var(--sp3);}
+.py-4 {padding-top: var(--sp4);padding-bottom: var(--sp4);}
+.py-5 {padding-top: var(--sp5);padding-bottom: var(--sp5);}
+.py-6 {padding-top: var(--sp6);padding-bottom: var(--sp6);}
+.py-7 {padding-top: var(--sp7);padding-bottom: var(--sp7);}
+
+.pt-1 { padding-top: var(--sp1); }
+.pr-1 { padding-right: var(--sp1); }
+.pl-1 { padding-left: var(--sp1); }
+.pb-1 { padding-bottom: var(--sp1); }
+.pt-2 { padding-top: var(--sp2); }
+.pr-2 { padding-right: var(--sp2); }
+.pl-2 { padding-left: var(--sp2); }
+.pb-2 { padding-bottom: var(--sp2); }
+.pt-3 { padding-top: var(--sp3); }
+.pr-3 { padding-right: var(--sp3); }
+.pl-3 { padding-left: var(--sp3); }
+.pb-3 { padding-bottom: var(--sp3); }
+.pt-4 { padding-top: var(--sp4); }
+.pr-4 { padding-right: var(--sp4); }
+.pl-4 { padding-left: var(--sp4); }
+.pb-4 { padding-bottom: var(--sp4); }
+.pt-5 { padding-top: var(--sp5); }
+.pr-5 { padding-right: var(--sp5); }
+.pl-5 { padding-left: var(--sp5); }
+.pb-5 { padding-bottom: var(--sp5); }
+.pt-6 { padding-top: var(--sp6); }
+.pr-6 { padding-right: var(--sp6); }
+.pl-6 { padding-left: var(--sp6); }
+.pb-6 { padding-bottom: var(--sp6); }
+.pt-7 { padding-top: var(--sp7); }
+.pr-7 { padding-right: var(--sp7); }
+.pl-7 { padding-left: var(--sp7); }
+.pb-7 { padding-bottom: var(--sp7); }
+/** MARGIN **/
+.m-1 {margin: var(--sp1);}
+.m-2 {margin: var(--sp2);}
+.m-3 {margin: var(--sp3);}
+.m-4 {margin: var(--sp4);}
+.m-5 {margin: var(--sp5);}
+.m-6 {margin: var(--sp6);}
+.m-7 {margin: var(--sp7);}
+
+.mx-1 {margin-left: var(--sp1);margin-right: var(--sp1);}
+.mx-2 {margin-left: var(--sp2);margin-right: var(--sp2);}
+.mx-3 {margin-left: var(--sp3);margin-right: var(--sp3);}
+.mx-4 {margin-left: var(--sp4);margin-right: var(--sp4);}
+.mx-5 {margin-left: var(--sp5);margin-right: var(--sp5);}
+.mx-6 {margin-left: var(--sp6);margin-right: var(--sp6);}
+.mx-7 {margin-left: var(--sp7);margin-right: var(--sp7);}
+
+.my-1 {margin-top: var(--sp1);margin-bottom: var(--sp1);}
+.my-2 {margin-top: var(--sp2);margin-bottom: var(--sp2);}
+.my-3 {margin-top: var(--sp3);margin-bottom: var(--sp3);}
+.my-4 {margin-top: var(--sp4);margin-bottom: var(--sp4);}
+.my-5 {margin-top: var(--sp5);margin-bottom: var(--sp5);}
+.my-6 {margin-top: var(--sp6);margin-bottom: var(--sp6);}
+.my-7 {margin-top: var(--sp7);margin-bottom: var(--sp7);}
+
+.mt-1 { margin-top: var(--sp1); }
+.mr-1 { margin-right: var(--sp1); }
+.ml-1 { margin-left: var(--sp1); }
+.mb-1 { margin-bottom: var(--sp1); }
+.mt-2 { margin-top: var(--sp2); }
+.mr-2 { margin-right: var(--sp2); }
+.ml-2 { margin-left: var(--sp2); }
+.mb-2 { margin-bottom: var(--sp2); }
+.mt-3 { margin-top: var(--sp3); }
+.mr-3 { margin-right: var(--sp3); }
+.ml-3 { margin-left: var(--sp3); }
+.mb-3 { margin-bottom: var(--sp3); }
+.mt-4 { margin-top: var(--sp4); }
+.mr-4 { margin-right: var(--sp4); }
+.ml-4 { margin-left: var(--sp4); }
+.mb-4 { margin-bottom: var(--sp4); }
+.mt-5 { margin-top: var(--sp5); }
+.mr-5 { margin-right: var(--sp5); }
+.ml-5 { margin-left: var(--sp5); }
+.mb-5 { margin-bottom: var(--sp5); }
+.mt-6 { margin-top: var(--sp6); }
+.mr-6 { margin-right: var(--sp6); }
+.ml-6 { margin-left: var(--sp6); }
+.mb-6 { margin-bottom: var(--sp6); }
+.mt-7 { margin-top: var(--sp7); }
+.mr-7 { margin-right: var(--sp7); }
+.ml-7 { margin-left: var(--sp7); }
+.mb-7 { margin-bottom: var(--sp7); }
+
+.text-center {
+ text-align: center;
+}
+.text-left {
+ text-align: left;
+}
+.text-right {
+ text-align: right;
+}
*[hidden] {
@@ -655,6 +704,7 @@
display: none;
}
}
+
.width-50 {
width: 100%;
}
@@ -664,7 +714,8 @@
.width-75 {
width: 100%;
}
-.w-full {
+.w-full,
+.width-full {
width: 100%;
}
@@ -684,6 +735,8 @@
.row:not(.icon),
.col {
+ --align: center;
+ --justify: center;
display: flex;
justify-content: var(--justify);
align-items: var(--align);
@@ -719,6 +772,7 @@
.col.btw,
.row.btw {
--justify: space-between;
+ width: 100%;
}
.col.even,
.row.even {
@@ -997,7 +1051,8 @@
SPACING
*********************************************************/
main {
- min-height: 60vh;
+ min-height: 90vh;
+ --justify: flex-start;
}
main > * {
@@ -1021,7 +1076,7 @@
}
footer {
- padding: 1rem 1rem var(--offHeight);
+ padding: 1rem;
background-color: var(--base-200);
color: var(--contrast-200);
text-align: center;
@@ -1029,6 +1084,9 @@
position: relative;
z-index: var(--z-top);
}
+body:has(nav.fixed.bottom,nav.on-this-page) footer {
+ padding-bottom: var(--offHeight);
+}
footer p,
footer p + p {
margin: .5rem auto;
@@ -1056,6 +1114,10 @@
filter: none;
transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);
}
+.item-grid button {
+ --height: max-content;
+ aspect-ratio: 1;
+}
.grid-view img,
.item-grid img {
border-radius: var(--innerRadius);
@@ -1089,9 +1151,8 @@
h4 b, h4 strong,
h5 b, h5 strong,
h6 b, h6 strong {
- text-decoration: double;
- -webkit-text-fill-color: transparent;
- -webkit-text-stroke: 2px var(--contrast);
+ font-weight: var(--hBold);
+ letter-spacing: 2px;
}
h1,
@@ -1101,7 +1162,7 @@
h5,
h6 {
--mt: 1.5em;
- --mb: .875em;
+ --mb: .25em;
font-family: var(--heading);
text-transform: uppercase;
font-weight: var(--hWeight);
@@ -1120,6 +1181,17 @@
margin: 0 2rem 0 0;
letter-spacing: .05em;
}
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+ display: block;
+ line-height: .8;
+ font-family: var(--body);
+ font-size: .5em;
+}
h1.inline + *,
h2.inline + *,
@@ -1177,9 +1249,21 @@
p {
line-height: 1.6;
}
-p + p {
- margin-top: 2.5rem;
+main > * h1,
+main > * h2,
+main > * h3,
+main > * h4,
+main > * h5,
+main > * h6,
+main > * p {
+ width: 100%;
}
+main > * p {
+ margin: .5rem 0;
+}
+/*p + p {*/
+/* margin-top: 2.5rem;*/
+/*}*/
a {
color: var(--action-0);
@@ -1197,6 +1281,9 @@
color: var(--action-50);
text-decoration: underline;
}
+ol {
+ list-style-type:decimal;
+}
/******************************************************************
BUTTONS
******************************************************************/
@@ -1217,10 +1304,10 @@
padding: 0;
list-style: none;
overflow:hidden;
+ width: 100%;
}
-.buttons {
- margin: 3rem auto;
- max-width: 90%;
+.list-none {
+ list-style: none;
}
@media (min-width: 768px){
@@ -1229,6 +1316,8 @@
margin: 3rem var(--mr) 3rem var(--ml);
}
}
+ul.socials a,
+.buttons a,
.btn + label,
[type=submit],
a.button,
@@ -1240,14 +1329,16 @@
width: fit-content;
text-transform: uppercase;
text-decoration: none;
+ text-align: center;
background-color: var(--base-100);
color: var(--contrast-50);
border: 1px solid var(--base-200);
border-radius: var(--innerRadius);
padding: .25rem 1rem;
- font: inherit;
+ font-family: var(--heading);
cursor: pointer;
outline: inherit;
+ height: var(--height);
display: inline-flex;
justify-content: var(--justify);
align-items: var(--align);
@@ -1259,23 +1350,40 @@
position: relative;
}
+a.button:hover,
+a.button:focus,
+ul.socials a:hover,
+ul.socials a:focus,
+.buttons a:hover,
+.buttons a:focus,
.btn + label:hover,
.btn + label:focus,
[type=submit]:hover,
[type=submit]:focus,
-.buttons a:hover,
-a.button:hover,
-a.button:focus,
-a.wp-block-button__link:hover,
-a.wp-block-button__link:focus,
button:hover,
button:focus {
background-color: var(--action-0);
color: var(--action-contrast);
}
+.buttons .outline a {
+ background-color: transparent;
+ color: var(--action-0);
+ border: 2px solid var(--action-0);
+}
+.buttons .outline a:hover,
+.buttons .outline a:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ border-color: var(--action-0);
+}
+.buttons a {
+ width: 100%;
+}
+ul.socials a:disabled,
+ul.socials a:disabled:hover,
.btn:disabled + label,
.btn:disabled + label:hover,
[type=submit]:disabled,
@@ -1298,7 +1406,7 @@
--w: 1.5em;
}
-button.voted svg,
+button.voted .icon,
button.favourite.favourited {
animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
}
@@ -1349,32 +1457,31 @@
/******************************************************************
ICONS
******************************************************************/
-.icon {
+
+i.icon {
width: var(--w);
height: var(--w);
- display: inline-flex;
+ display: inline-block;
+ background-color: currentColor;
+ mask-image: var(--icon);
+ -webkit-mask-image: var(--icon);
+ mask-size: contain;
+ -webkit-mask-size: contain;
+ mask-repeat: no-repeat;
+ -webkit-mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-position: center;
+ vertical-align: middle;
transition: var(--transition-size), var(--transition-color);
}
-.icon svg {
- width: 100%;
- height: 100%;
-}
.icon.small,
nav ul .icon {
--w: 24px;
}
-.icon.colour {
+.icon-colour {
background: rgb(183, 51, 46);
background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
- mask-image: var(--colour);
- -webkit-mask-image: var(--colour);
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-repeat: no-repeat;
- mask-size: contain;
- width: 1.25rem;
- height: 1.25rem;
}
.icon.logo-basic svg path {
@@ -1548,11 +1655,10 @@
input[type=tel],
input[type=password],
input[type=search] {
- --p-x: 1.5rem;
font-family: var(--body);
font-size: var(--medium);
color: var(--contrast);
- padding: 1rem var(--p-x);
+ padding: var(--p-y) var(--p-x);
border-radius: var(--innerRadius);
background-color: var(--base);
outline: 0;
@@ -1582,7 +1688,11 @@
font-family: var(--body);
color: var(--base-200);
}
-
+@media (min-width: 768px) {
+ :root {
+ --p-y: 1rem;
+ }
+}
select {
/*appearance: none;*/
/*-webkit-appearance: none;*/
@@ -2112,9 +2222,10 @@
--justify: flex-start;
--align: center;
--wrap: nowrap;
- --gap: .5rem;
+ --gap: 1.5rem;
+ --dir: row;
--w: 1em;
- margin: 0;
+ list-style: none;
padding: 0;
height: var(--height);
display: flex;
@@ -2176,6 +2287,128 @@
/* mask-image: var(--theme);*/
/*}*/
/**************************************************
+COVER BLOCK
+**************************************************/
+.cover {
+ position: relative;
+ overflow: hidden;
+ min-height: 60vh;
+ padding: var(--height);
+}
+ .cover::before {
+ z-index: var(--coverIndex);
+ background-color: var(--action-0);
+ mix-blend-mode: var(--coverBlend);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ content: '';
+ /*filter: brightness(.25);*/
+ }
+ .cover::before,
+ .cover > video,
+ .cover > img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ }
+ .cover .content {
+ z-index: 5;
+ overflow: hidden auto;
+ width: max-content;
+ height: max-content;
+ max-width:100%;
+ max-height: 100%;
+ }
+ /** A second image that overlays the first one **/
+ .cover > img {
+ z-index: 1;
+ opacity: .5;
+ mix-blend-mode: luminosity;
+ object-fit: cover;
+ }
+ @media (min-width: 768px) {
+ .cover > img {
+ opacity: .33;
+ }
+ }
+ /* Have the h1 have a background image. cool! */
+ /*.cover h1 {*/
+ /* -webkit-background-clip: text;*/
+ /* -webkit-box-decoration-break: clone;*/
+ /* -webkit-text-fill-color: rgba(0, 0, 0, 0);*/
+ /* background-image: var(--bg-2);*/
+ /* background-position: center 75%;*/
+ /* background-repeat: no-repeat;*/
+ /* background-size: cover;*/
+ /* display: inline;*/
+ /* font-size: clamp(6.5rem, 15vw, 30rem);*/
+ /* font-variation-settings: "wght" 900;*/
+ /* order: 2;*/
+ /* overflow: hidden;*/
+ /* user-select: none;*/
+ /*}*/
+
+/**************************************************
+BLOCKQUOTE
+**************************************************/
+blockquote {
+ --background: var(--base-100);
+ --border: var(--action-0);
+ line-height: 1.2;
+ padding: var(--height);
+ border-radius: 4rem;
+ background-color: var(--background);
+}
+ blockquote .content {
+ margin: 12px auto;
+ max-width: min(680px, 80vw);
+ position: relative;
+ font-family: var(--heading);
+ font-weight: var(--hBold);
+ padding: 25px;
+ border-radius: var(--outerRadius);
+ border: 2px solid var(--border);
+ }
+ blockquote .content::before,
+ blockquote .content::after {
+ position: absolute;
+ content: '';
+ left: 50px;
+ }
+ blockquote .content::before {
+ width: 80px;
+ border: 6px solid var(--background);
+ bottom: -3px;
+ z-index: 2;
+ }
+ blockquote .content::after {
+ border: 2px solid var(--border);
+ border-radius: 0 100% 0 0;
+ width: 60px;
+ height: 60px;
+ bottom: -60px;
+ border-bottom: 0;
+ border-left: 0;
+ z-index: 3;
+ }
+ blockquote cite {
+ padding: 15px 0 0 12px;
+ margin: 0 0 0 150px;
+ z-index: 1;
+ }
+blockquote.pull {
+ background-color: unset;
+ border-radius: 0;
+ margin: 4rem auto;
+ padding: 3rem;
+ box-shadow: var(--shadow-down), var(--shadow-up);
+}
+ blockquote.pull cite {
+ margin: 0;
+ }
+/**************************************************
MODALS DIALOGUE
**************************************************/
dialog::backdrop {
@@ -2464,19 +2697,6 @@
}
/**************************************************
-BLOCKQUOTE
-**************************************************/
-blockquote {
- padding: var(--outerPadding);
- border-radius: var(--outerRadius);
- background-color: var(--base-50);
-}
-
-cite {
- width: 90%;
- margin: 1rem auto;
-}
-/**************************************************
TOOLTIP
**************************************************/
[role=tooltip],
@@ -2597,10 +2817,10 @@
animation: spin 1s var(--function) infinite;
}
.loading[open] .icon {
- color: var(--action-0);
+ background-color: var(--action-0);
}
-dialog.loading[open] svg {
+dialog.loading[open] .icon {
animation: dance 2s ease-in-out infinite;
transition: color .3s ease;
}
@@ -2827,9 +3047,10 @@
overflow: visible;
}
-.qtoggle,
+.qtoggle
/*.toggle-cart,*/
-.create-item {
+/*.create-item */
+{
z-index: var(--z-6);
position: fixed;
bottom: var(--offHeight);
@@ -2842,22 +3063,24 @@
}
/*.toggle-cart:hover,*/
.qtoggle:hover,
-.create-item:hover,
+/*.create-item:hover,*/
/*.toggle-cart:focus,*/
-.qtoggle:focus,
-.create-item:focus {
+.qtoggle:focus
+/*.create-item:focus */
+{
background-color: rgba(var(--action-rgb),var(--rgb-heavy));
color: var(--action-contrast);
}
/*.toggle-cart:disabled,*/
.qtoggle:disabled,
-.create-item:disabled,
+/*.create-item:disabled,*/
/*.toggle-cart:disabled:hover,*/
.qtoggle:disabled:hover,
-.create-item:disabled:hover,
+/*.create-item:disabled:hover,*/
/*.toggle-cart:disabled:focus,*/
-.qtoggle:disabled:focus,
-.create-item:disabled:focus {
+.qtoggle:disabled:focus
+/*.create-item:disabled:focus */
+{
opacity: .5;
background-color: var(--overlay-light);
color: var(--contrast);
@@ -2865,7 +3088,7 @@
/******************
CART
******************/
-.create-item,
+/*.create-item,*/
.toggle-cart {
right: 0;
border-radius: 4px 4px 4px var(--outerRadius);
@@ -3034,8 +3257,8 @@
width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
}
-.qtoggle.saving svg {
- color: var(--action-0);
+.qtoggle.saving .icon {
+ background-color: var(--action-0);
animation: spin .87s var(--function) infinite;
}
@@ -3113,8 +3336,8 @@
background-color: var(--warning);
animation: pulse 2s infinite;
}
-aside#queue.pending:not(.expanded) + .qtoggle svg {
- color: var(--error);
+aside#queue.pending:not(.expanded) + .qtoggle .icon {
+ background-color: var(--error);
animation: spin 1s var(--function) infinite;
}
@@ -3353,7 +3576,7 @@
}
/* Refreshing animation */
-#queue.pending.expanded .refreshNow svg {
+#queue.pending.expanded .refreshNow .icon {
animation: spin 1.5s var(--function) infinite;
}
/**************************************************
@@ -3424,6 +3647,10 @@
/**************************************************
ACTIONS
**************************************************/
+.additional-actions.additional-actions {
+ padding: 0;
+ background-color: transparent;
+}
.additional-actions .buttons {
position: fixed;
bottom: var(--offHeight);
@@ -3602,6 +3829,53 @@
margin: 0;
padding: .25rem;
}
+
+/**************************************************
+ASIDE EXCEPTIONS
+**************************************************/
+aside.pre-header,
+aside.sub-header {
+ left: 0;
+ right: 0;
+ width: 100vw;
+ display: flex;
+ justify-content: space-between;
+ height: 2rem;
+ bottom: unset;
+ padding: 0 .5rem;
+ font-size: var(--small);
+ flex-wrap: nowrap;
+ align-items: center;
+ max-width: 100vw;
+}
+ @media (min-width: 768px) {
+ aside.pre-header,
+ aside.sub-header {
+ padding: 0 2rem;
+ font-size: var(--medium);
+ }
+ }
+ .pre-header p,
+ .pre-header p + p,
+ .sub-header p,
+ .sub-header p + p {
+ margin: 0;
+ }
+.pre-header {
+ top: 0;
+ z-index: 1001;
+}
+.wp-site-blocks > .pre-header ~ header {
+ top: 2.05rem;
+}
+.sub-header {
+ top: var(--height);
+ box-shadow: var(--shadow);
+}
+.pre-header ~ .sub-header {
+ top: calc(var(--height) + 1.5rem);
+}
+
/**************************************************
RESPONSES
**************************************************/
@@ -4379,12 +4653,26 @@
/* height: auto!important;*/
/*}*/
+ .stack-small.stack-small {
+ --wrap: wrap;
+ }
+ @media (min-width: 768px){
+ .stack-small.stack-small {
+ --wrap: nowrap;
+ }
+ }
+.font-small {
+ font-size: var(--small);
+}
+.font-medium {
+ font-size: var(--medium);
+}
+.font-large {
+ font-size: var(--large);
+}
-/*.font-small {*/
-/* font-size: var(--small);*/
-/*}*/
/*!***/
/*Circular Loader*/
@@ -4466,13 +4754,13 @@
}
/* Icon styling in form fields */
-.field-input-wrapper svg,
-.time-wrapper svg,
-.datetime-wrapper svg,
-.date-wrapper svg {
+.field-input-wrapper .icon,
+.time-wrapper .icon,
+.datetime-wrapper .icon,
+.date-wrapper .icon {
width: 18px;
height: 18px;
- color: var(--contrast);
+ background-color: var(--contrast);
opacity: .7;
}
@@ -4991,4 +5279,69 @@
.copy-link-btn {
width: 100%;
}
-}
\ No newline at end of file
+}
+
+.callalt.callalt,
+.callout.callout {
+ padding: 2rem;
+ margin: 2rem 0;
+ max-width: none;
+}
+
+@media (min-width: 768px){
+ .callout.callout {
+ padding: 2rem 20vw;
+ }
+}
+.callout.callout {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.callalt.callalt {
+ background-color: var(--secondary-0);
+ color: var(--secondary-contrast);
+}
+ .callalt h1,
+ .callalt h2,
+ .callalt h3,
+ .callalt h4,
+ .callalt h5,
+ .callalt h6,
+ .callout h1,
+ .callout h2,
+ .callout h3,
+ .callout h4,
+ .callout h5,
+ .callout h6 {
+ font-family: var(--body);
+ font-weight: var(--bBold);
+ margin: 1rem 0 0;
+ width: 100%;
+ }
+
+ .callout a {
+ background-color: var(--action-contrast);
+ padding: 0 .125rem;
+ border-radius: 4px;
+ }
+
+ .attn {
+ animation: pulse-color 5s infinite;
+ animation-delay: 1s;
+ }
+
+ @media (min-width:768px ){
+ .media-text {
+ --wrap: nowrap;
+ }
+ }
+ .media-text > div,
+ .media-text figure {
+ width: 100%;
+ margin: 0;
+ }
+ .media-text > div {
+ max-width: var(--maxWidth);
+ margin: 0 auto;
+ padding: 2rem;
+ }
\ No newline at end of file
--
Gitblit v1.10.0