From e76a40c2270908529a1a4a75809aef13ebc34c88 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 23 Dec 2025 20:11:59 +0000
Subject: [PATCH] =Legacy rebrand finished
---
nav.css | 1087 ++--
navTemp.css | 858 +++
nav-hover.css | 96
all.css | 5015 +++++++-------------
copy-hours.css | 14
dash.css | 549 ++
forms.css | 969 +++
feed.css | 56
allBackup.css | 6012 ++++++++++++++++++++++++
style.css | 4
10 files changed, 10,531 insertions(+), 4,129 deletions(-)
diff --git a/all.css b/all.css
index 82f09be..f25726b 100644
--- a/all.css
+++ b/all.css
@@ -7,7 +7,7 @@
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
-Version: 1.279
+Version: 1.5.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jv
@@ -15,81 +15,92 @@
/*************************************************************
VARIABLES
*************************************************************/
-:root{
- /* Layout */
- --narrow: min(500px, 50vw);
- --maxWidth: min(768px, 65vw);
- --alignWide: min(1024px, 90vw);
- --alignMed: min(962px, 82.5vw);
+:root {
+ /*****************************
+ Layout
+ *****************************/
+ --half: min(384px, 17.5vw);
+ --narrow: min(500px, 62.5vw);
+ --content: min(768px, 65vw);
+ --wider: min(900px, 75vw);
+ --wide: min(1024px, 90vw);
--full: 100vw;
- /* Margin */
- --mr: auto;
- --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;
- --doubleHeight: 8rem;
- --offHeight: 5rem;
- --maxHeight: calc(100vh - var(--height) - var(--height));
+ --offScreen: -200vw;
- --gap: .5rem;
- --wrap: wrap;
+ /*****************************
+ Sizing
+ *****************************/
+ --chip: 1.5rem;
+ --chipchip: 3rem;
+ --chip_: 2rem;
+ --btn: 4rem;
+ --btn_: 5rem;
+ --btnbtn: 8rem;
+ --maxHeight: calc(100vh - var(--btnbtn));
+
+ /*****************************
+ Flex
+ *****************************/
+ --dir: row;
--justify: center;
--align: center;
- --dir: row;
- /* Typography */
- --w: 1.2em; /** Icon **/
+ --wrap: wrap;
+ --gap: .5rem;
- --filter: grayscale(.3) sepia(.4);
- --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='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
- --dashed-action: 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='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+ /*****************************
+ Typography
+ *****************************/
+ --w: 1.2em; /** For icons **/
+
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--heading: 'Aleo', var(--font-base);
--body: 'Josefin Slab', var(--font-base);
- --hWeight: 900;
- --hlight: 400;
- --bWeight: 400;
- --bBold: 700;
- --bLight: 200;
+ --fw-h-light: 400;
+ --fw-h: 900;
+ --fw-h-bold: 900;
+ --fw-b-light: 200;
+ --fw-b: 400;
+ --fw-b-bold: 700;
- /* 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/
- For DUOTONE: https://cssduotone.com/
- */
- --mixBlendMode: darken;
+ --txt-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
+ --txt-x-small: clamp(.95rem, .879rem + .19vw, 1.05rem);
+ --txt-medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
+ --txt-x-medium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
+ --txt-large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
+ --txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
+ --txt-xx-large: clamp(2rem, 1.286rem + 1.905vw, 3rem);
+ --txt-xxx-large: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
+ --txt-enormous: calc(26vh - 4rem);
+
+ /*****************************
+ Colours
+ *****************************/
+ --filter: grayscale(.3) sepia(.4);
+ --mix-blend-mode: darken;
--coverBlend: overlay;
--coverIndex: 2;
--light-0: #fafafa;
--light-50: #fcfbfb;
--light-100: #f1eded;
--light-200: #e6dfdf;
+ --light-rgb: 250,250,250;
--dark-0: #201313;
--dark-50: #261717;
--dark-100: #2d1b1b;
--dark-200: #331e1e;
+ --dark-rgb: 16,4,4;
--action-0: #B7332E;
--action-50: #a32d29;
--action-100: #8e2824;
--action-200: #7a221f;
+ --action-contrast: var(--light-0);
+ --action-rgb: 183,51,46;
--secondary-0: #E8A737;
--secondary-50: #e59d20;
--secondary-100: #d48f18;
--secondary-200: #bd7f16;
+ --secondary-contrast: var(--light-0);
+ --secondary-rgb: 232,167,55;
--success: #22C55E;
--successBack: #d4edda;
@@ -98,75 +109,81 @@
--error: #EF4444;
--errorBack: #f8d7da;
--errorText: #721c24;
- --action-contrast: var(--light-0);
- --secondary-contrast: var(--light-0);
- --light-rgb: 250,250,250;
- --dark-rgb: 16,4,4;
- --action-rgb: 183,51,46;
- --secondary-rgb: 232,167,55;
-
- --rgba-subtle: rgba(var(--c),.05);
- --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);
+ --base-rgb: var(--light-rgb);
--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 */
+ --shimmer: rgba(var(--dark-rgb),0) 0%,
+ rgba(var(--dark-rgb),.05) 50%,
+ rgba(var(--dark-rgb),0) 100%;
+
+ --op-1: .05;
+ --op-2: .15;
+ --op-3: .25;
+ --op-45: .45;
+ --op-4: .66;
+ --op-5: .75;
+ --op-6: .85;
+
+ /*****************************
+ Shadows
+ *****************************/
+ --shdw-inset: inset 0 0 4px 1px;
+ --shdw: 0 0 4px;
+ --shdw-down: 0 6px 5px -5px;
+ --shdw-right: 6px 0 5px -5px;
+ --shdw-left: -6px 0 5px -5px;
+ --shdw-up: 0 -6px 5px -5px;
+ --shdw-subtle: 0 25px 20px -20px;
+ --shdw-subtle-right: 10px 0 20px -20px;
+ --shdw-none: transparent 0 0 0;
+
+ /*****************************
+ Stacking
+ *****************************/
--z-1: 5;
--z-2: 10;
--z-3: 15;
--z-4: 20;
--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;
- --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);
+ --z-7: 999;
+ --z-8: 1000;
+ --z-9: 999999;
+ --z-10: 9999999;
- /**** SPACING ****/
+ /*****************************
+ Rounding
+ *****************************/
+ --radius: 4px;
+ --p-outer: 1rem;
+ --radius-outer: calc(var(--radius) + var(--p-outer));
+ --p-y: 1rem;
+ --p-x: 1rem;
+ /*****************************
+ Transitions
+ *****************************/
+ --trans-fn: cubic-bezier(.47,.24,.07,.47);
+ --trans-t: .25s;
+ --trans-base: var(--trans-t) var(--trans-fn);
+ --trans-color: background-color var(--trans-base),
+ color var(--trans-base), border var(--trans-base);
+ --trans-transform: transform var(--trans-base);
+ --trans-size: width var(--trans-base),
+ height var(--trans-base),max-width var(--trans-base), max-height var(--trans-base);
+ --trans-vis: opacity var(--trans-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 */
@@ -175,91 +192,58 @@
--sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem); /* 48px → 96px */
--sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem); /* 64px → 128px */
- --offScreen: -200vw;
+ /*****************************
+ Scrollbar
+ *****************************/
+ --sb-width: 8px;
+ --sb-track: var(--base-100);
+ --sb-thumb: var(--action-0);
+ --sb-thumb-hover: var(--action-50);
+ --sb-thumb-border: 2px solid var(--base-50);
+ --sb-radius: 4px;
- /*!** 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;
- --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;
+ --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
+ --link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>');
}
+
body:has(#theme-switcher:checked){
- --action-50: #cb3933;
- --action-100: #d14c47;
- --action-200: #d6605c;
- --secondary-50: #ebb14e;
- --secondary-100: #edbb65;
- --secondary-200: #f0c57c;
+ /*****************************
+ Colours
+ *****************************/
--mixBlendMode: lighten;
--coverBlend: multiply;
--coverIndex: 0;
+
+ --action-50: #cb3933;
+ --action-100: #d14c47;
+ --action-200: #d6605c;
+
+ --secondary-50: #ebb14e;
+ --secondary-100: #edbb65;
+ --secondary-200: #f0c57c;
+
--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);
- --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: #155724;
--successText:#d4edda;
--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");*/
-
- /*--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>');*/
+ --shimmer: rgba(var(--c),0) 0%,
+ rgba(var(--c),.05) 50%,
+ rgba(var(--c),0) 100%;
}
-
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@layer reset {
html {
@@ -274,10 +258,6 @@
body {
margin: 0;
- /*padding: 2rem;*/
- /*@media (width < 500px) {*/
- /* padding: 1rem;*/
- /*}*/
}
*,
@@ -340,7 +320,7 @@
dl {
margin: 0;
padding: 0;
- list-style: inside;
+ list-style: outside;
ul,
ol,
dl {
@@ -500,83 +480,366 @@
}
}
}
-/***************************************************************
+
+/*************************************************************
SCROLLBAR
-***************************************************************/
+*************************************************************/
* {
scrollbar-width: thin;
- scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+ scrollbar-color: var(--sb-thumb) var(--sb-track);
}
/* For WebKit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
- width: var(--scrollbar-width);
- height: var(--scrollbar-width);
+ width: var(--sb-width);
+ height: var(--sb-width);
}
::-webkit-scrollbar-track {
- background: var(--scrollbar-track-color);
+ background: var(--sb-track);
}
::-webkit-scrollbar-thumb {
- background-color: var(--scrollbar-thumb-color);
- border-radius: var(--scrollbar-border-radius);
- border: var(--scrollbar-thumb-border);
+ background-color: var(--sb-thumb);
+ border-radius: var(--sb-radius);
+ border: var(--sb-thumb-border);
}
::-webkit-scrollbar-thumb:hover {
- background-color: var(--scrollbar-thumb-hover-color);
+ background-color: var(--sb-thumb-hover);
}
-
-body{
+/*************************************************************
+BASE
+*************************************************************/
+body {
background-color: var(--base-50);
color: var(--contrast);
- max-width: 100vw;
- overflow-x: hidden;
margin: 0;
font-family: var(--body);
- font-weight: var(--bWeight);
- font-size: var(--medium);
+ font-weight: var(--fw-b);
+ font-size: var(--txt-medium);
line-height: 1.4;
position: relative;
-}
-body b,
-body strong {
- font-weight: var(--bBold);
-}
-
-
-*:target {
- scroll-snap-margin-top: max(6rem, 20vh);
- scroll-margin-top: max(6rem, 20vh);
- outline: double var(--action-0);
- border-radius: var(--outerRadius);
- padding: var(--outerPadding);
-}
-body.menu_item *:target h2 {
- background-color: var(--action-0);
- color: var(--action-contrast);
+ max-width: 100vw;
}
body,
body * {
- transition: background-color var(--transition-base);
- transition-property: background-color, border;
+ transition: var(--trans-color)
+}
+/*************************************************************
+LAYOUT
+*************************************************************/
+html {
+ scroll-behavior: smooth;
+ overflow-x: hidden;
}
-.home > section:first-of-type,
-.home main {
- margin-top: 0;
+@media(prefers-reduced-motion){
+ html {
+ scroll-behavior: unset;
+ }
+ * {
+ transition: none!important;
+ animation: none!important;
+ }
}
-/**************************************************************
-UTILITY CLASSES
-**************************************************************/
body:has(aside.expanded),
body:has(nav.open),
body:has(dialog[open]),
body.loading {
overflow: hidden;
+ max-height:100vh;
}
+
+main {
+ display: grid;
+ grid-template-columns:
+ [full-start] minmax(1rem, 1fr)
+ [wide-start] minmax(0, calc((100% - var(--content)) / 2))
+ [wider-start] minmax(0, calc((var(--wide) - var(--wider)) / 2))
+ [content-start] minmax(0, calc((var(--wider) - var(--content)) / 2))
+ [narrow-start] min(100% - 2rem, var(--narrow)) [narrow-end]
+ minmax(0, calc((var(--content) - var(--narrow)) / 2)) [content-end]
+ minmax(0, calc((var(--wider) - var(--content)) / 2)) [wider-end]
+ minmax(0, calc((var(--wide) - var(--wider)) / 2)) [wide-end]
+ minmax(0, calc((100% - var(--content)) / 2))
+ minmax(1rem, 1fr) [full-end];
+ min-height: var(--maxHeight);
+}
+main > * {
+ grid-column: content;
+}
+main > section {
+ padding: 3rem 0;
+ grid-column: full;
+}
+main > section > * {
+ width: 100%;
+ max-width: var(--content);
+}
+
+/* Nested items can use any width */
+main .align-narrow {
+ grid-column: narrow;
+}
+
+main .align-content {
+ grid-column: content;
+}
+
+main .align-wider {
+ grid-column: wider;
+}
+
+main .align-wide {
+ grid-column: wide;
+}
+
+main .align-full {
+ grid-column: full;
+ width: 100%;
+ max-width: none;
+}
+
+/* First child has no top spacing */
+main > *:first-child {
+ margin-top: 0;
+}
+
+.wp-site-blocks > header {
+ position: sticky;
+ top: 0;
+ z-index: var(--z-8);
+ background-color: var(--base);
+ box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-down);
+ transition: top var(--trans-base);
+}
+
+
+.scroll-progress {
+ position: absolute;
+ inset-inline: 0;
+ bottom: 0;
+ height: 3px;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+ z-index: var(--z-3);
+ background-color: var(--base-200);
+ overflow: hidden;
+}
+
+.scroll-progress .bar {
+ width: 100%;
+ height: 1px;
+ transform-origin: left center;
+ transform: scaleX(0);
+ background: var(--action-0);
+}
+
+aside.pre-header,
+aside.sub-header,
+aside.pre-footer,
+aside.sub-footer {
+ height: var(--chip_);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 1rem;
+ font-size: var(--txt-x-small);
+ background-color:var(--base-50);
+ z-index: var(--z-7);
+}
+.pre-header p {
+ width: max-content;
+}
+.pre-header {
+ position: sticky;
+ top: -2rem;
+ transition: top var(--trans-base);
+}
+.scroll-up .pre-header {
+ top: 0;
+}
+.scroll-up .pre-header ~ header {
+ top: calc(var(--chip_) - 2px);
+}
+/*.pre-header.stuck ~ #breadcrumbs {*/
+/* margin-top: var(--chip_);*/
+/*}*/
+
+footer {
+ padding: 1rem;
+ background-color: var(--base-200);
+ color: var(--contrast-200);
+ text-align: center;
+ margin: 4rem 0 0;
+ position: relative;
+ z-index: var(--z-7);
+}
+footer p {
+ margin: 0 auto;
+}
+
+body:has(nav.fixed.bottom,nav.on-this-page) footer {
+ padding-bottom: var(--btn_);
+}
+@media (min-width:768px) {
+ footer {
+ padding: 1rem 2rem var(--btn_);
+ }
+}
+
+*:target {
+ scroll-snap-margin-top: var(--btnbtn);
+ scroll-margin-top: var(--btnbtn);
+ outline: double var(--action-200);
+ background-color: var(--base);
+}
+
+/*************************************************************
+TYPOGRAPHY
+*************************************************************/
+body :is(b, strong) {
+ font-weight: var(--fw-b-bold);
+}
+:is(h1, h2, h3, h4, h5, h6) {
+ font-family: var(--heading);
+ text-transform: uppercase;
+ font-weight: var(--fw-h);
+ line-height: 1.3;
+ margin: 1.5em auto .25em;
+ width: 100%;
+}
+:is(h1,h2,h3,h4,h5,h6), p {
+ width: 100%;
+}
+
+:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
+ font-weight: var(--fw-h-bold);
+ letter-spacing: 2px;
+}
+
+:is(h1, h2, h3, h4, h5, h6) small {
+ display: block;
+ line-height: .8;
+ font-family: var(--body);
+ font-size: .5em;
+}
+:is(h1, h2, h3, h4, h5, h6) small :is(b, strong) {
+ font-weight: var(--fw-b-bold);
+}
+
+:is(h1, h2, h3, h4, h5, h6).inline {
+ font-size: 1.2rem;
+ font-weight: 600;
+ display: inline-block;
+ margin: 0 2rem 0 0;
+ letter-spacing: .05em;
+}
+
+:is(h1, h2, h3, h4, h5, h6).inline + * {
+ display: inline-block;
+ margin: .5rem 0;
+}
+
+:is(h1, h2, h3, h4, h5, h6).inline + .term-list {
+ display: inline-flex;
+ margin: .5rem 0;
+}
+
+h1 {
+ font-size: var(--txt-xxx-large);
+ font-weight: var(--fw-h);
+ line-height: 1;
+ margin: 0 auto .25em;
+}
+
+h1:first-of-type {
+ margin-top: 10vh;
+}
+
+h1 small {
+ display: block;
+ font-size: var(--txt-x-small);
+ font-weight: var(--fw-b);
+ line-height: 1;
+ margin-bottom: .75em;
+ font-family: var(--body);
+}
+
+h1 small + small {
+ display: inline-block;
+ font-size: var(--txt-large);
+ margin-right: .5rem;
+}
+
+h2 { font-size: var(--txt-xx-large); }
+h3 { font-size: var(--txt-x-large); }
+h4 {
+ font-weight: 400;
+ font-size: var(--txt-large);
+}
+h5, h6 {
+ font-weight: 400;
+ font-size: var(--txt-medium);
+}
+
+p {
+ line-height: 1.6;
+}
+
+.hint {
+ line-height: 1.2;
+ font-style: italic;
+ font-size: var(--txt-small);
+}
+
+/*main > * :is(h1, h2, h3, h4, h5, h6, p) {*/
+/* width: 100%;*/
+/*}*/
+
+main > * p {
+ margin: .5rem 0;
+}
+
+a {
+ color: var(--action-0);
+ border-radius: 4px;
+ padding: .125rem;
+}
+
+ul a {
+ display: inline-flex;
+}
+
+a:visited {
+ color: var(--action-50);
+}
+
+a:hover {
+ color: var(--contrast-50);
+ text-decoration: none;
+}
+
+p a:hover,
+li a:hover,
+:is(h1, h2, h3, h4, h5, h6) a:hover {
+ color: var(--action-contrast);
+ background-color: var(--action-0);
+}
+
+ol {
+ list-style-type:decimal;
+}
+
+.font-small { font-size: var(--txt-x-small); }
+.font-medium { font-size: var(--txt-medium); }
+.font-large { font-size: var(--txt-large); }
+/**************************************************************
+UTILITY CLASSES - SPACING
+**************************************************************/
/** PADDING **/
.p-1 {padding: var(--sp1);}
.p-2 {padding: var(--sp2);}
@@ -630,6 +893,7 @@
.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);}
@@ -684,16 +948,12 @@
.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;
-}
-
+/**************************************************************
+UTILITY CLASSES - TEXT & VISIBILITY
+**************************************************************/
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
*[hidden] {
display: none!important;
@@ -705,21 +965,16 @@
}
}
-.width-50 {
- width: 100%;
-}
-.width-25 {
- width: 50%;
-}
+.width-50,
+.width-25,
.width-75 {
width: 100%;
}
-.w-full,
-.width-full {
+
+.w-full{
width: 100%;
}
-
@media (min-width: 768px){
.buttons li.width-50,
.width-50 {
@@ -733,81 +988,80 @@
}
}
-.row:not(.icon),
+/******************************************************************
+LAYOUT UTILITIES
+******************************************************************/
+.row,
.col {
- --align: center;
- --justify: center;
display: flex;
justify-content: var(--justify);
align-items: var(--align);
gap: var(--gap);
flex-wrap: var(--wrap);
flex-direction: var(--dir);
-}
-.col {
- --dir: column;
-}
-.row:not(.icon) {
- --dir: row;
-}
-.col.rev {
- --dir: column-reverse;
-}
-.row.rev {
- --dir: row-reverse;
+ --align: center;
+ --justify: center;
+ --gap: .5rem;
+ --wrap: wrap;
}
-.nowrap {
- --wrap: nowrap;
+.col { --dir: column; }
+.row { --dir: row; }
+.col.rev { --dir: column-reverse; }
+.row.rev { --dir: row-reverse; }
+
+.nowrap.nowrap { --wrap: nowrap; }
+.nowrap.nowrap.stack-small { --wrap: wrap;}
+@media (min-width: 768px) {
+ .nowrap.nowrap.stack-small { --wrap: nowrap;}
}
+
+.col.start,
+.row.a-start { --align: flex-start; }
+.col.end,
+.row.a-end { --align: flex-end; }
+
.col.a-start,
-.row.start {
- --justify: flex-start;
-}
-
+.row.start { --justify: flex-start; }
.col.a-end,
-.row.end {
- --justify: flex-end;
-}
+.row.end { --justify: flex-end; }
+
.col.btw,
.row.btw {
--justify: space-between;
width: 100%;
}
+
.col.even,
-.row.even {
- --justify: space-evenly;
-}
+.row.even { --justify: space-evenly; }
-.col.start,
-.row.a-start {
- --align: flex-start;
-}
+/******************************************************************
+POSITION UTILITIES
+******************************************************************/
+.abs { position: absolute; }
+*:has(>.abs) { position: relative; }
-.col.end,
-.row.a-end {
- --align: flex-end;
-}
+.top { top: 0; right: 0; left: 0; }
+.top-right { top: 0; right: 0; }
+.top-left { top: 0; left: 0; }
+.btm { bottom: 0; left: 0; right: 0; }
+.btm-right { bottom: 0; right: 0; }
+.btm-left { bottom: 0; left: 0; }
+.edges { inset: 0; }
-.abs {
- position: absolute;
-}
-*:has(>.abs) {
- position: relative;
-}
.hidden {
transform: scale(0);
max-width: 0;
max-height: 0;
overflow: hidden;
- transition: var(--transition-transform), var(--transition-size);
+ transition: var(--trans-transform), var(--trans-size);
}
.visible {
transform: scale(1);
max-width: 100%;
max-height: 100%;
- transition: var(--transition-transform), var(--transition-size);
+ transition: var(--trans-transform), var(--trans-size);
}
/******************************************************************
@@ -832,7 +1086,7 @@
justify-content: space-evenly;
align-items: center;
border: 4px solid transparent;
- transition: .3s;
+ transition: var(--trans-t);
box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
cursor: pointer;
margin: 5px;
@@ -849,13 +1103,13 @@
background-color: var(--base);
transform: translateX(-1rem);
border-radius: .75rem;
- transition: .3s;
+ transition: var(--trans-transform);
box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
}
.toggle-switch input:checked ~ .slider::before {
transform: translateX(1rem);
- box-shadow: 0 0 .25rem 3px rgb(0, 0, 0, 0.25);
+ box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
}
.toggle-switch input:checked ~ .slider {
@@ -866,59 +1120,26 @@
transform: translate(0);
}
-
-/*.theme-switcher {*/
-/* position: absolute;*/
-/* opacity: 0;*/
-/* width: 0;*/
-/* height: 0;*/
-/*}*/
#theme-switch {
z-index: 99;
margin: 0;
--wrap: nowrap;
--gap: 1rem;
}
+
#theme-switch .slider {
- width: 3rem;
- height: 1.5rem;
+ width: var(--chipchip);
+ height: var(--chip);
}
+
#theme-switch .slider::before {
transform: translateX(-1.5rem);
}
+
#theme-switch input:checked ~ .slider::before {
transform: translateX(1.5rem);
}
-
-/*#theme-switch,*/
-/*.toggle-switch {*/
-/* --wrap: nowrap;*/
-/* cursor: pointer;*/
-/*}*/
-/*#theme-switch,*/
-/*.toggle-switch input[type=checkbox] {*/
-/* --h: 2rem;*/
-/* width: calc(var(--h) * 2);*/
-/* height: var(--h);*/
-/* margin: 0 2rem 0 0;*/
-/* left: 0;*/
-/* appearance:none;*/
-/* background: var(--base-200);*/
-/* border: 1px solid var(--base-50);*/
-/* border-radius: var(--h);*/
-/* cursor: pointer;*/
-/* transition: all .3s ease;*/
-/* opacity: 1;*/
-/*}*/
-
-/*.toggle-switch input[type=checkbox] {*/
-/* position: relative;*/
-/*}*/
-/*.toggle-switch {*/
-/* position: relative;*/
-/*}*/
-
@media (max-width: 600px) {
#theme-switch {
left: 1rem;
@@ -928,209 +1149,55 @@
}
}
-/* Icon wrapper styling */
-/*#theme-switch .icon {*/
-/* --w: 1em;*/
-/* position: relative;*/
-/* top: 0;*/
-/* margin: 0 .25em;*/
-/* color: var(--contrast-200);*/
-/* z-index: 2;*/
-/* transform: translateX(0);*/
-/*}*/
-
-
-/*#theme-switcher:not(:checked) ~ .sun-dim,*/
-/*#theme-switcher:checked ~ .moon {*/
-/* --w: 1.5em;*/
-/* color: var(--contrast);*/
-/*}*/
-
-/*#theme-switcher:not(:checked) ~ .moon,*/
-/*#theme-switcher:checked ~ .sun-dim {*/
-/* top: -.17rem;*/
-/*}*/
-/* #theme-switcher:not(:checked) ~ .sun-dim {*/
-/* color: var(--secondary-0);*/
-/* transform: translate(-2px, 2px);*/
-/* }*/
-/* #theme-switcher:checked ~ .moon {*/
-/* transform: translate(4px, 4px);*/
-/* }*/
-
-/*#theme-switch span,*/
-/*.toggle-switch input[type=checkbox]::before {*/
-/* --m: 2px;*/
-/* content: "";*/
-/* position: absolute;*/
-/* top: var(--m);*/
-/* left: var(--m);*/
-/* width: calc(var(--h) - (var(--m) * 2));*/
-/* height: calc(var(--h) - var(--m) * 2);*/
-/* border: 1px solid rgba(var(--contrast-rgb), .2);*/
-/* border-bottom: 3px solid var(--contrast-200);*/
-/* background: var(--base-50);*/
-/* border-radius: 50%;*/
-/* z-index: 1;*/
-/* transform: rotate(360deg);*/
-/* transition: transform var(--transition-base),*/
-/* left var(--transition-base),*/
-/* top var(--transition-base),*/
-/* height var(--transition-base);*/
-/*}*/
-/* #theme-switch input:checked ~ span,*/
-/* .toggle-switch input[type=checkbox]:checked::before {*/
-/* left: calc(100% - (var(--h) - var(--m)));*/
-/* transform: rotate(-180deg);*/
-/* transition: transform var(--transition-base), left var(--transition-base);*/
-/* }*/
-/* .toggle-switch input[type=checkbox]:checked {*/
-/* background: var(--action-0);*/
-/* }*/
-
-/*!* Focus States *!*/
-/*.theme-switch:focus-visible + label {*/
-/* outline: 2px solid var(--action-0);*/
-/* outline-offset: 2px;*/
-/*}*/
-
-/*!* Icon Animations *!*/
-/*#theme-switch .icon {*/
-/* transition:*/
-/* transform var(--transition-base),*/
-/* width var(--transition-base),*/
-/* height var(--transition-base),*/
-/* top var(--transition-base),*/
-/* color var(--transition-base);*/
-/*}*/
-
-/*#theme-switcher:not(:checked) ~ .icon.dark,*/
-/*#theme-switcher:checked ~ .icon.light {*/
-/* transform: rotate(360deg);*/
-/* color: var(--contrast-200);*/
-/*}*/
-/*#theme-switcher:not(:checked) ~ .icon.light,*/
-/*#theme-switcher:checked ~ .icon.dark {*/
-/* transform: rotate(-360deg);*/
-/* color: var(--contrast);*/
-/*}*/
-
-/*!* Hover Effects *!*/
-/*#theme-switch:hover span {*/
-/* background-color: var(--base-100);*/
-/*}*/
-
-
-/*#theme-switch:hover .icon {*/
-/* color: var(--action-50);*/
-/*}*/
-
-/*!* Active State *!*/
-/*#theme-switch:active span {*/
-/* transform: scale(.97);*/
-/*}*/
-
-/***********************************************************
-SMOOTH SCROLLING
-***********************************************************/
-html {
- scroll-behavior: smooth;
-}
-
-@media(prefers-reduced-motion){
- html {
- scroll-behavior: unset;
- }
- * {
- transition: none!important;
- animation: none!important;
- }
-}
-
-/*********************************************************
-SPACING
-*********************************************************/
-main {
- min-height: 90vh;
- --justify: flex-start;
-}
-
-main > * {
- width: 100%;
- max-width: var(--maxWidth);
- margin: var(--setMargin);
-}
-main > .align-wide {
- max-width: var(--alignWide);
-}
-main > .align-full {
- --ml: 0;
- --mr: 0;
- max-width: var(--full);
-}
-main > section {
- --mt: 6rem;
-}
-main > *:first-child {
- margin-top: 0;
-}
-
-footer {
- padding: 1rem;
- background-color: var(--base-200);
- color: var(--contrast-200);
- text-align: center;
- margin: 4rem 0 0;
- 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;
-}
-
-@media (min-width:768px) {
- footer {
- padding: 1rem 2rem var(--offHeight);
- }
-}
/*********************************************************
GRIDS
*********************************************************/
.grid-view,
.item-grid {
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
+.item-grid.stats {
+ grid-template-columns: repeat(2, 1fr);
+}
+@media (min-width: 768px){
+ .grid-view,
+ .item-grid {
+ --width: 250px;
+ grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
+ }
+}
+
.grid-view .item,
.item-grid .item {
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
aspect-ratio: 1;
display:flex;
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);
+ border-radius: var(--radius);
}
+
.item-grid.list-view {
display: flex;
flex-direction: column;
gap: 2rem;
--gap: 2rem;
}
+
.item-grid.list-view .item .col {
--gap: .5rem;
}
+
.item-grid.list-view img {
width: 20%;
}
@@ -1142,187 +1209,14 @@
}
}
-/*********************************************************
-TYPOGRAPHY
-*********************************************************/
-h1 b, h1 strong,
-h2 b, h2 strong,
-h3 b, h3 strong,
-h4 b, h4 strong,
-h5 b, h5 strong,
-h6 b, h6 strong {
- font-weight: var(--hBold);
- letter-spacing: 2px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- --mt: 1.5em;
- --mb: .25em;
- font-family: var(--heading);
- text-transform: uppercase;
- font-weight: var(--hWeight);
- line-height: 1.3;
- margin: var(--mt) var(--mr) var(--mb) var(--ml);
-}
-h1.inline,
-h2.inline,
-h3.inline,
-h4.inline,
-h5.inline,
-h6.inline {
- font-size: 1.2rem;
- font-weight: 600;
- display: inline-block;
- 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 + *,
-h3.inline + *,
-h4.inline + *,
-h5.inline + *,
-h6.inline + * {
- display: inline-block;
- margin: .5rem 0;
-}
-h1.inline + .term-list,
-h2.inline + .term-list,
-h3.inline + .term-list,
-h4.inline + .term-list,
-h5.inline + .term-list,
-h6.inline + .term-list {
- display: inline-flex;
- margin: .5rem 0;
-}
-
-h1 {
- font-size: var(--xxxlarge);
- font-weight: var(--hWeight);
- line-height: 1;
- margin: 0 var(--mr) .25em var(--ml);
-}
-h1:first-of-type {
- margin-top: 20vh;
-}
-h1 small {
- display: block;
- font-size: var(--small);
- font-weight: var(--bWeight);
- line-height: 1;
- font-family: var(--body);
-}
-
-h2 {
- font-size: var(--xxlarge);
-}
-h3 {
- font-size: var(--xlarge);
-}
-h4 {
- /*font-family: var(--body);*/
- font-weight: 400;
- font-size: var(--large);
-}
-h5, h6 {
- /*font-family: var(--body);*/
- font-weight: 400;
- font-size: var(--medium);
-}
-
-p {
- line-height: 1.6;
-}
-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);
- text-decoration: none;
-}
-ul a {
- display: inline-flex;
- text-decoration: none;
-}
-
-a:visited {
- color: var(--action-100);
-}
-a:hover {
- color: var(--action-50);
- text-decoration: underline;
-}
-ol {
- list-style-type:decimal;
-}
/******************************************************************
-BUTTONS
+INTERACTIVE ELEMENTS - BASE
******************************************************************/
-.buttons {
- --wrap: wrap;
- --justify: flex-start;
- margin: 1rem var(--mr) 1rem var(--ml);
- width: 100%;
- padding: 0;
-}
-.buttons.fit {
- width: fit-content;
- margin: 1rem 2rem;
-}
-.buttons li {
- --justify: stretch;
- --align: stretch;
- padding: 0;
- list-style: none;
- overflow:hidden;
- width: 100%;
-}
-.list-none {
- list-style: none;
-}
-
-@media (min-width: 768px){
- .buttons {
- max-width: var(--maxWidth);
- margin: 3rem var(--mr) 3rem var(--ml);
- }
-}
-ul.socials a,
-.buttons a,
-.btn + label,
+button,
[type=submit],
a.button,
-a.wp-block-button__link,
-button {
+.buttons a,
+.btn + label {
--justify: center;
--align: center;
--dir: row;
@@ -1333,23 +1227,54 @@
background-color: var(--base-100);
color: var(--contrast-50);
border: 1px solid var(--base-200);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
padding: .25rem 1rem;
font-family: var(--heading);
cursor: pointer;
- outline: inherit;
- height: var(--height);
+ outline: 0;
+ min-height: var(--btn);
display: inline-flex;
justify-content: var(--justify);
align-items: var(--align);
gap: var(--gap);
flex-wrap: var(--wrap);
flex-direction: var(--dir);
- transition: color var(--transition-base);
- transition-property: color, border,background-color;
position: relative;
+ box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
}
+[data-filter], .btn + label {
+ width: var(--chipchip);
+ height: var(--chipchip);
+ min-height: var(--chipchip);
+}
+select[data-filter] {
+ width: max-content;
+ height: auto;
+ min-height: 0;
+}
+
+ul.socials a {
+ background-color: var(--base-100);
+ color: var(--contrast-50);
+ border: 1px solid var(--base-200);
+ border-radius: var(--radius);
+ padding: .25rem 1rem;
+ cursor: pointer;
+ min-height: var(--btn);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
+}
+
+/******************************************************************
+INTERACTIVE ELEMENTS - STATES
+******************************************************************/
+button:hover,
+button:focus,
+[type=submit]:hover,
+[type=submit]:focus,
a.button:hover,
a.button:focus,
ul.socials a:hover,
@@ -1357,13 +1282,65 @@
.buttons a:hover,
.buttons a:focus,
.btn + label:hover,
-.btn + label:focus,
-[type=submit]:hover,
-[type=submit]:focus,
-button:hover,
-button:focus {
+.btn + label:focus {
background-color: var(--action-0);
color: var(--action-contrast);
+ box-shadow: var(--shdw-none);
+}
+
+button:disabled,
+[type=submit]:disabled,
+a.button:disabled,
+ul.socials a:disabled,
+.btn:disabled + label,
+button:disabled:hover,
+button:disabled:focus,
+[type=submit]:disabled:hover,
+[type=submit]:disabled:focus,
+a.button:disabled:hover,
+a.button:disabled:focus,
+ul.socials a:disabled:hover,
+.btn:disabled + label:hover {
+ opacity: .5;
+ cursor: not-allowed;
+ background-color: var(--base-200);
+ color: var(--contrast-200);
+}
+
+/******************************************************************
+BUTTONS
+******************************************************************/
+.buttons {
+ --wrap: wrap;
+ --justify: flex-start;
+ margin: 1rem auto;
+ width: 100%;
+ padding: 0;
+}
+
+.buttons.fit {
+ width: fit-content;
+ margin: 1rem 2rem;
+}
+
+.buttons li {
+ --justify: stretch;
+ --align: stretch;
+ padding: 0;
+ list-style: none;
+ overflow:hidden;
+ width: 100%;
+}
+
+.list-none {
+ list-style: none;
+}
+
+@media (min-width: 768px){
+ .buttons {
+ max-width: var(--content);
+ margin: 3rem auto;
+ }
}
.buttons .outline a {
@@ -1371,6 +1348,7 @@
color: var(--action-0);
border: 2px solid var(--action-0);
}
+
.buttons .outline a:hover,
.buttons .outline a:focus {
background-color: var(--action-0);
@@ -1382,26 +1360,6 @@
width: 100%;
}
-ul.socials a:disabled,
-ul.socials a:disabled:hover,
-.btn:disabled + label,
-.btn:disabled + label:hover,
-[type=submit]:disabled,
-[type=submit]:disabled:hover,
-[type=submit]:disabled:focus,
-a.button:disabled,
-a.wp-block-button__link:disabled,
-button:disabled,
-a.button:disabled:hover,
-a.wp-block-button__link:disabled:hover,
-button:disabled:hover,
-a.button:disabled:focus,
-a.wp-block-button__link:disabled:focus,
-button:disabled:focus {
- opacity: .5;
- background-color: var(--base-200)!important;
- color: var(--contrast-200)!important;
-}
details .icon {
--w: 1.5em;
}
@@ -1410,6 +1368,7 @@
button.favourite.favourited {
animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
}
+
@keyframes favourite-pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
@@ -1425,10 +1384,12 @@
padding: .35em;
--w: 1.2em;
}
+
.filter-toggle:hover {
border-color: var(--action-50);
color: var(--action-50);
}
+
.filter-toggle:focus {
background-color: var(--action-50);
color: var(--action-contrast);
@@ -1444,6 +1405,7 @@
.vote .voted .downvote {
display: none;
}
+
button.favourite:not(.favourited) .heart,
button.favourite.favourited .heart-fill,
.toggle.notifications:not(.has) .bell,
@@ -1454,10 +1416,10 @@
.vote .voted .downvoted {
display: block;
}
+
/******************************************************************
ICONS
******************************************************************/
-
i.icon {
width: var(--w);
height: var(--w);
@@ -1472,63 +1434,23 @@
mask-position: center;
-webkit-mask-position: center;
vertical-align: middle;
- transition: var(--transition-size), var(--transition-color);
}
-.icon.small,
-nav ul .icon {
- --w: 24px;
-}
-
.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%);
}
-
-.icon.logo-basic svg path {
- transition: fill var(--timing) var(--function);
-}
-.icon.logo-basic svg path#innerCircle,
-.icon.logo-basic svg path#outerSkull {
- fill: var(--base);
-}
-
-a .icon.logo-basic:hover svg path {
- fill: var(--base);
-}
-a .icon.logo-basic:hover svg path#innerCircle,
-a .icon.logo-basic:hover svg path#outerSkull {
- fill: var(--action-0);
-}
-
.icon.grab {
cursor: grab;
}
-
main a .icon {
- margin-right: .5em;
+ margin-right: .5rem;
}
-
-body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {
- position: relative;
-}
-body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{
- content: '';
- display: block;
- width:60%;
- height:60%;
- border-radius: 50%;
- background-color: var(--dark-200);
- position: absolute;
- left: 18%;
- top: 22%;
- z-index:-1;
-}
-
+/** TODO: Reintegrate this; currently svg is in .css
path#refresh {
transform-origin: center;
transform-box: fill-box;
- animation: spin 1s var(--function) infinite;
-}
+ animation: spin 1s var(--trans-fn) infinite;
+}**/
/******************************************************************
ACCESSIBILITY
@@ -1545,22 +1467,22 @@
width: 1px;
word-wrap: normal !important;
}
-input[type=checkbox] + label:focus,
-input[type=checkbox] + label:focus-visible,
-input[type=radio] + label:focus,
-input[type=radio] + label:focus-visible,
+
+input[type=checkbox]:focus + label,
+input[type=checkbox]:focus-visible + label,
+input[type=radio]:focus + label,
+input[type=radio]:focus-visible + label,
input:focus,
input:focus-within {
outline: 2px solid var(--action-0) !important;
outline-offset: 2px !important;
- box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;
+ box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
}
[aria-busy="true"] {
cursor: progress;
}
-/* Disabled states */
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
@@ -1575,54 +1497,62 @@
border-top: 1px solid var(--base-200);
border-bottom: 1px solid var(--base-200);
}
+
details[open] {
background-color: var(--base-50);
}
+
details summary {
--wrap: nowrap;
list-style: none;
text-transform: uppercase;
cursor: pointer;
border: 0;
- transition: background-color var(--transition-base);
- transition-property: background-color, border;
position: relative;
padding: .5rem 2.5rem .5rem .5rem;
gap: .5rem;
}
+
details summary:hover {
background-color: var(--base-100);
border-color: var(--base-100);
color: var(--contrast);
- transition: background-color var(--transition-base);
- transition-property: background-color, border,color;
}
+
details[open] > summary {
background-color: var(--base-50);
}
+
details summary::after {
+ position: absolute;
+ right: .5rem;
+ top: .5rem;
+ --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');
content: "";
background-color: var(--contrast-100);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
- -webkit-mask-image: var(--details);
- mask-image: var(--details);
+ -webkit-mask-image: var(--icon);
+ mask-image: var(--icon);
mask-repeat: no-repeat;
mask-size: contain;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
- transition: background-color var(--transition-base);
- transition-property: background-color, transform;
+ transition: var(--trans-color), var(--trans-transform);
}
-details summary:hover::after,
+details summary:hover::after {
+ background-color: var(--action-0);
+}
+
details[open] > summary::after {
background-color: var(--contrast);
}
+
details[open] > summary::after {
transform: rotate(-540deg);
- transition: background-color var(--transition-base);
+ transition: background-color var(--trans-base);
transition-property: background-color, transform;
}
@@ -1630,591 +1560,20 @@
opacity: 0;
block-size: 0;
overflow-y: clip;
- transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);
+ transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
}
+
details[open]::details-content {
opacity: 1;
block-size: auto;
}
+
@media (prefers-reduced-motion: no-preference){
details {
interpolate-size: allow-keywords;
}
}
-/******************************************************************
-FORMS & FIELDS
-******************************************************************/
-textarea,
-input[type=date],
-input[type=number],
-input[type=text],
-input[type=url],
-input[type=email],
-input[type=textarea],
-input[type=tel],
-input[type=password],
-input[type=search] {
- font-family: var(--body);
- font-size: var(--medium);
- color: var(--contrast);
- padding: var(--p-y) var(--p-x);
- border-radius: var(--innerRadius);
- background-color: var(--base);
- outline: 0;
- border: 1px solid var(--base-100);
- border-bottom: 2px solid var(--contrast-200);
- width: 100%;
- max-width: 100%;
- margin: 0 4px;
- transition: background-color var(--transition-base);
- transition-property: background-color, border;
-}
-textarea:focus,
-input[type=number]:focus,
-input[type=text]:focus,
-input[type=url]:focus,
-input[type=email]:focus,
-input[type=textarea]:focus,
-input[type=tel]:focus,
-input[type=password]:focus,
-input[type=search]:focus {
- outline: var(--action-50);
- background-color: var(--base-100);
- color: var(--contrast);
-}
-textarea::placeholder,
-input::placeholder {
- font-family: var(--body);
- color: var(--base-200);
-}
-@media (min-width: 768px) {
- :root {
- --p-y: 1rem;
- }
-}
-select {
- /*appearance: none;*/
- /*-webkit-appearance: none;*/
- /*-moz-appearance: none;*/
- background: var(--base);
- border: 2px solid var(--base-100);
- border-radius: var(--innerRadius);
- color: var(--contrast);
- cursor: pointer;
- font-family: var(--body);
- font-size: var(--small);
- padding: .5rem 1rem;
- width: 100%;
- transition: var(--transition-color);
-}
-select:disabled {
- background-color: var(--base-50);
- border-color: var(--base-100);
- color: var(--base-200);
- cursor: not-allowed;
-}
-
-select option {
- background: var(--base);
- color: var(--contrast);
- padding: .5rem;
-}
-select option:hover,
-select option:focus,
-select option:active,
-select option:checked {
- background: var(--action-0);
- color: var(--base);
- box-shadow: 0 0 0 100px var(--action-0) inset;
-}
-
-select option:checked {
- background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
- color: var(--base);
-}
-
-select:hover {
- border-color: var(--action-0);
-}
-
-select:focus {
- border-color: var(--action-0);
-}
-
-input[type=search]:focus + .clear-search {
- opacity: 1;
- cursor: pointer;
- transition: opacity var(--transition-base);
-}
-
-.search-container .clear-search {
- opacity: 0;
- cursor: default;
- transition: opacity var(--transition-base);
-}
-.search-container .icon.search {
- padding: 4px 8px;
- color: var(--contrast-200);
- --w: 3rem;
-}
-input[type="search"]::-moz-search-clear-button,
-input[type="search"]::-ms-clear,
-input[type="search"]::-ms-reveal,
-input[type="search"]::search-cancel-button {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- display: none;
- visibility: hidden;
-}
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
- -webkit-appearance:none;
-}
-
-.integration .label,
-label {
- text-transform: uppercase;
- font-weight: bold;
- margin-bottom: .5rem;
- display: block;
-}
-
-/**********************
-SPECIAL FIELDS
-**********************/
-.selected-items {
- --justify: flex-start;
- --gap: .5rem;
- margin-bottom: .5rem;
-}
-
-.selected-item {
- padding: .25rem .5rem;
- margin: .125em;
- background: var(--base-100);
- border-radius: .25rem;
- font-size: var(--medium);
- border: 1px solid var(--base-200);
- position: relative;
-}
-
-.remove-item {
- background: none;
- border: none;
- padding: .25rem;
- cursor: pointer;
- color: #666;
- border-radius: var(--innerRadius);
- width: 1.5em;
- height: 1.5em;
-}
-.remove-item .close {
- width: .5em;
- height: .5em;
-}
-
-.remove-item:hover {
- color: var(--action-0);
- background: #fee;
-}
-
-.clear-filters {
- margin-left: auto;
- border: 1px solid var(--base-200);
-}
-[type=radio],
-[type=checkbox],
-input.ch {
- position: absolute;
- opacity: 0;
- left: -200vw;
-}
-/* Pseudo checkbox */
-[type=radio] + label,
-[type=checkbox] + label,
-input.ch + label {
- position: relative;
- cursor: pointer;
-}
-[type=radio] + label:hover,
-[type=checkbox] + label:hover {
- color: var(--action-0);
-}
-[type=radio] + label::before,
-[type=checkbox] + label::before,
-input.ch + label::before,
-[type=radio] + label::after,
-[type=checkbox] + label::after,
-input.ch + label::after {
- content: '';
- position: absolute;
- top: 50%;
-}
-
-
-[type=radio] + label::after,
-[type=checkbox] + label::after,
-input.ch + label::after {
- left: 5px;
- transform: translateY(-70%) rotate(45deg);
- width: 5px;
- height: 10px;
- border: solid var(--light-0);
- border-width: 0 2px 2px 0;
- display: none;
-}
-
-
-
-
-[type=radio] + label::before,
-[type=checkbox] + label::before,
-input.ch + label::before {
- left: 0;
- transform: translateY(-50%);
- width: 1rem;
- height: 1rem;
- border: 2px solid var(--contrast-200);
- background-color: var(--base);
- border-radius: var(--innerRadius);
- transition: background-color var(--transition-base),
- border-color var(--transition-base);
-}
-[type=radio]:hover + label::before,
-[type=checkbox]:hover + label::before,
-input.ch:hover + label::before {
- border-color: var(--action-200);
-}
-
-[type=radio]:checked + label::before,
-[type=checkbox]:checked + label::before,
-input.ch:checked + label::before {
- background-color: var(--action-0);
- border-color: var(--action-100);
-}
-
-[type=radio]:checked + label::before {
- border-radius: 50%;
-}
-
-[type=checkbox]:checked + label::after,
-input.ch:checked + label::after {
- display: block;
- left: 5px;
- top: 50%;
- transform: translateY(-70%) rotate(45deg);
- width: .35rem;
- height: .66rem;
- border: solid var(--light-0);
- border-width: 0 2px 2px 0;
-}
-
-[type=radio]:disabled + label,
-[type=checkbox]:disabled + label,
-input.ch:disabled + label {
- cursor: not-allowed;
- background-color: var(--base-50);
- color: var(--base-200);
- border-color: var(--base-200);
-}
-[type=radio]:disabled + label:hover,
-[type=checkbox]:disabled + label:hover,
-input.ch:disabled + label:hover {
- background-color: var(--base-50);
- color: var(--base-200);
- border-color: var(--base-200);
-}
-[type=radio]:disabled + label::before,
-[type=checkbox]:disabled + label::before,
-input.ch:disabled + label::before {
- border-color: var(--base-200);
-}
-
-[type=radio]:not(.btn) + label,
-[type=checkbox]:not(.btn) + label,
-input.ch + label {
- flex: 1;
- padding-left: 2rem;
- transform-origin: top center;
- transition: transform .3s ease;
- will-change: transform;
-}
-
-/* Non-pseudo checkbox, that acts more like a button/pill style */
-.btn + label::before,
-.btn + label::after {
- display: none;
-}
-.btn + label {
- --w: 1.2em; /* For icons */
- border: 1px solid var(--base-200);
- border-radius: var(--innerRadius);
- min-width: 2rem;
- min-height: 2rem;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: nowrap;
- gap: .5rem;
- color: var(--contrast-200);
- opacity: .8;
-}
-.radio-options.status label {
- padding: 0 .5rem;
-}
-.btn:checked + label {
- border-color: var(--contrast);
- color: var(--contrast);
- opacity: 1;
-}
-
-.btn + label:hover {
- color: var(--action-50);
- border-color: var(--action-50);
-}
-
-.btn[hidden] + label {
- display: none;
-}
-
-/* DATE */
-.date-wrapper {
- position: relative;
- display: inline-block;
-}
-input[type=date] {
- padding: 8px 36px 8px 8px;
- /*border: 1px solid #ccc;*/
- border-radius: 4px;
-}
-input[type=date]::-webkit-calendar-picker-indicator {
- opacity: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- cursor: pointer;
-}
-input[type=date] + .icon {
- --w: 20px;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none; /* This allows clicks to pass through to the input below */
-}
-
-/** TIME **/
-
-
-input[type=url] {
- background: var(--linkIcon);
- background-position: .5em;
- background-size: 1em;
- background-repeat: no-repeat;
- padding-left: 2em;
-}
-
-
-.field {
- margin: 2rem 0;
- position: relative;
-}
-.field:has(.has-tooltip) label {
- margin-left: 2rem;
-}
-/***************
-TOGGLE TEXT
-***************/
-.toggle-text input {
- display: none;
-}
-
-.toggle-text input + label {
- font-weight: normal;
- color: var(--contrast)!important;
- text-transform: none;
- cursor: pointer;
- position: relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-.toggle-text label::before,
-.toggle-text label::after {
- display: none;
-}
-.toggle-text label {
- padding-left: 0!important;
-}
-
-.toggle-text input + label .text {
- position: relative;
- margin: 0 .5rem;
- font-weight: bold;
- width: fit-content;
- padding: 2px 4px;
- border: 1px solid var(--action-50);
- border-radius: 4px;
- color: var(--action-50)!important;
-}
-table .toggle-text input+label .text {
- color: var(--contrast)!important;
- border-color: var(--contrast);
-}
-.toggle-text:hover .text,
-table .toggle-text:hover .text {
- background-color: var(--action-50);
- color: var(--light-0)!important;
- border-color: var(--action-50);
-}
-
-.toggle-text input + label .off,
-.toggle-text input + label .on {
- /*left: 0;*/
- /*position: absolute;*/
- /*top: 0;*/
- -webkit-transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
- transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
- transition: transform .125s ease-out, opacity .125s ease-out;
- transition: transform .125s ease-out, opacity .125s ease-out, -webkit-transform .125s ease-out;
-}
-
-.toggle-text input + label .off {
- opacity: 1;
- max-width: 100%;
- -webkit-transform: none;
- transform: none;
-}
-
-.toggle-text input + label .on {
- opacity: 0;
- max-width: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
-}
-
-.toggle-text input:checked + label .off {
- opacity: 0;
- max-width: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
-}
-
-.toggle-text input:checked + label .on {
- max-width: 100%;
- opacity: 1;
- -webkit-transform: none;
- transform: none;
-}
-
-
-/******************************************************************
-TAXONOMY SELECTOR
-******************************************************************/
-.items-container {
- margin: 0;
- padding: 0;
- width: 100%;
-}
-.create-new-term {
- margin-top: 1rem;
- width: 100%;
-}
-.create-new-term .field,
-.create-new-term[open] summary {
- margin-bottom: 1rem;
-}
-.create-new-term .field {
- max-width: 100%;
-}
-#jvb-selector > .wrap {
- --gap: nowrap;
-}
-/******************************************************************
-QUANTITY FIELD
-******************************************************************/
-.quantity {
- margin: 0;
-}
-.quantity label {
- margin: 0;
- font-size: var(--small);
-}
-.quantity {
- display: inline-flex;
- width: fit-content;
- align-items: center;
- justify-content: center;
- border: 1px solid transparent;
- border-radius: 4px;
- position: relative;
-}
-.quantity:focus-within {
- border-color: var(--action-0);
-}
-
-.quantity button {
- background: var(--base);
- padding: 0;
- width: 38px;
- height: 38px;
- z-index: 0;
- position: relative;
- border: 1px solid var(--base-200);
- color: var(--contrast-200);
-}
-.quantity button:hover:not(:disabled) {
- color: var(--action-0);
- border-color: var(--action-0);
- background-color: var(--base);
-}
-.quantity button:active:not(:disabled) {
- background-color: var(--action-0);
- color: var(--light-0);
- transform: scale(.95);
-}
-.quantity button:disabled {
- opacity: .5;
- cursor: not-allowed;
-}
-.quantity input[type=number] {
- z-index: 1;
- border: 1px solid var(--base-200);
- background: var(--base);
- text-align: center;
- font-size: 1.1rem;
- width: 60px;
- height: 48px;
- margin: 0;
- padding: 0!important;
- appearance: textfield;
-}
-.quantity input[type=number]::-webkit-outer-spin-button,
-.quantity input[type=number]::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-.quantity input[type=number]:focus {
- background-color: var(--base-50);
-}
-.quantity button.increase {
- left: -2px;
- border-radius: 0 4px 4px 0;
-}
-.quantity button.decrease {
- right: -2px;
- border-radius: 4px 0 0 4px;
-}
-
/**************************************************
LIST OVERRIDES
**************************************************/
@@ -2227,7 +1586,7 @@
--w: 1em;
list-style: none;
padding: 0;
- height: var(--height);
+ height: var(--btn);
display: flex;
justify-content: var(--justify);
align-items: var(--align);
@@ -2239,53 +1598,7 @@
touch-action: pan-x;
text-transform: lowercase;
}
-/*.term-list a {*/
-/* color: var(--contrast);*/
-/* text-decoration: none;*/
-/* font-size: var(--small);*/
-/* }*/
-/* .term-list a:hover {*/
-/* color: var(--action-0);*/
-/* }*/
-/*.term-list.shop a::before,*/
-/*.term-list.style a::before,*/
-/*.term-list.theme a::before,*/
-/*.term-list.city a::before,*/
-/*#by-city::before,*/
-/*#by-style::before,*/
-/*#by-theme::before,*/
-/*.term-list.all a::before{*/
-/* content:"";*/
-/* display:inline-block;*/
-/* mask-repeat: no-repeat;*/
-/* mask-size: contain;*/
-/* width: 1.2em;*/
-/* height: 1.2em;*/
-/* margin-right: .5rem;*/
-/* vertical-align: middle;*/
-/* background-color: currentColor;*/
-/*}*/
-/*.term-list a::after {*/
-/* display: none;*/
-/*}*/
-/*.term-list.shop a::before {*/
-/* mask-image: var(--shop);*/
-/*}*/
-
-/*.term-list.city a::before,*/
-/*#by-city::before {*/
-/* mask-image: var(--map);*/
-/*}*/
-/*.term-list.style a::before,*/
-/*#by-style::before,*/
-/*.term-list.all.styles a::before {*/
-/* mask-image: var(--style);*/
-/*}*/
-/*.term-list.theme a::before,*/
-/*#by-theme::before {*/
-/* mask-image: var(--theme);*/
-/*}*/
/**************************************************
COVER BLOCK
**************************************************/
@@ -2293,62 +1606,50 @@
position: relative;
overflow: hidden;
min-height: 60vh;
- padding: var(--height);
+ padding: var(--btn);
}
- .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::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: '';
+}
+
+.cover::before,
+.cover > video,
+.cover > img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.cover .content {
+ z-index: 5;
+ position: relative;
+ overflow: hidden auto;
+ width: max-content;
+ height: max-content;
+ max-width:100%;
+ max-height: 100%;
+}
+
+.cover > img {
+ z-index: 1;
+ opacity: .5;
+ mix-blend-mode: luminosity;
+ object-fit: cover;
+}
+
+@media (min-width: 768px) {
.cover > img {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
+ opacity: .33;
}
- .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
@@ -2357,79 +1658,100 @@
--background: var(--base-100);
--border: var(--action-0);
line-height: 1.2;
- padding: var(--height);
+ padding: var(--btn);
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 .content {
+ margin: 12px auto;
+ max-width: min(680px, 80vw);
+ position: relative;
+ font-family: var(--heading);
+ font-weight: var(--fw-h-bold);
+ padding: 3rem 2.5rem;
+ border-radius: var(--radius-outer);
+ 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);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
}
- blockquote.pull cite {
- margin: 0;
- }
+
+blockquote.pull cite {
+ margin: 0;
+}
+
+/******************************************************************
+OVERLAYS - BASE PATTERN
+******************************************************************/
+dialog[open],
+aside.expanded {
+ background-color: var(--base);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ z-index: var(--z-5);
+}
+
+dialog::backdrop {
+ backdrop-filter: blur(5px);
+ background-color: rgba(var(--base-rgb),var(--op-4));
+}
+
+dialog[open],
+aside.main {
+ border-radius: var(--radius-outer);
+ overflow: hidden;
+}
+
/**************************************************
MODALS DIALOGUE
**************************************************/
-dialog::backdrop {
- backdrop-filter: blur(5px);
- background-color: var(--overlay-medium);
-}
-
dialog[open] {
z-index:999;
--padding: 0;
top: 5vh;
width: min(500px, 95vw);
- border-radius: 1rem;
height: fit-content;
- overflow: hidden;
max-height: 90vh;
padding: var(--padding);
background-color: var(--base-50);
color: var(--contrast);
border: 1px solid var(--base-200);
- box-shadow: var(--shadow);
}
dialog > .wrap,
@@ -2445,15 +1767,15 @@
font-weight: normal;
}
-dialog h2,
-dialog h3 {
+dialog :is(h2, h3) {
margin: 0 0 .5rem 0;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
dialog:has(.m-actions){
- padding-bottom: var(--height);
+ padding-bottom: var(--btn);
}
+
.m-actions {
--w: 1.15em;
--justify: flex-end;
@@ -2466,8 +1788,9 @@
width: 100%;
z-index: var(--z-6);
background-color: var(--action-100);
- box-shadow: var(--shadow-up);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
}
+
.m-actions button {
width: 100%;
height: 3rem;
@@ -2476,17 +1799,21 @@
background-color: var(--action-50);
border: 2px solid var(--action-50);
}
+
.m-actions button:hover,
.m-actions button:focus {
background-color: var(--base);
color: var(--contrast);
}
+
.m-actions button:first-of-type {
border-bottom-left-radius: 1rem;
}
+
.m-actions button:last-of-type {
border-bottom-right-radius: 1rem;
}
+
dialog ul {
list-style: none;
}
@@ -2496,102 +1823,58 @@
width: 100%;
gap: .5rem;
}
+
/****************
-GALLERY
+QUERY BLOCK
****************/
-dialog[open].gallery {
- width: calc(100vw - var(--padding) * 2);
- height: 99vh;
- background: var(--overlay-heavy);
+.loop .item-grid {
+ grid-template-columns: repeat(1, 1fr);
}
-.gallery .content {
+@media (min-width: 768px) {
+ .loop .item-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+.loop .item-grid .progress {
+ aspect-ratio: 3/2;
position: relative;
- max-width: 100%;
- max-height: 100%;
- padding: 2rem;
-}
-.gallery .favourite button.favourite {
- top: unset;
- bottom: 1rem;
- right: 1rem;
}
-.gallery .image {
- max-width: 100%;
- max-height: calc(100vh - 4rem);
- object-fit: contain;
+.loop .item-grid .progress figure {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: .125rem;
+ background-color: var(--action-0);
+ position: relative;
}
-.gallery .cancel {
+.loop .item-grid .progress figure span {
position: absolute;
- top: 1rem;
- right: 1rem;
- background: none;
- border: none;
- color: white;
- cursor: pointer;
- padding: .5rem;
- z-index: 10;
- transition: color .3s ease;
+ width: 50%;
+ text-transform: uppercase;
+ background-color: rgba(var(--action-rgb),var(--op-4));
+ color: var(--action-contrast);
+ padding: 0 .25rem;
}
-.gallery .cancel:hover {
- color: var(--action-0);
+.loop .progress figure img {
+ max-width: 50%;
+ object-fit: cover;
}
-.gallery .nav {
- position: absolute;
- top: 50%;
- height: 50%;
- z-index: 5;
- transform: translateY(-50%);
- border: none;
- color: var(--contrast);
- cursor: pointer;
- padding: 1rem;
- transition: color .3s ease;
-}
-.gallery .nav:hover {
- background-color: var(--overlay-heavy);
+figure .after {
+ top: 0;
+ right:0;
}
-.gallery .nav:hover {
- color: var(--action-0);
+figure .before {
+ bottom: 0;
+ left: 0;
}
-.gallery .prev {
- left: 1rem;
-}
-
-.gallery .next {
- right: 1rem;
-}
-
-.gallery .counter {
- position: absolute;
- top: 1rem;
- left: 1rem;
- color: white;
- font-size: .875rem;
-}
-
-.gallery .content details {
- position:absolute;
- bottom: 1rem;
- left: 2rem;
- width: calc(100% - 4rem);
- background-color: var(--overlay-light);
- padding: 0;
-}
-.gallery .content details:hover,
-.gallery .content details[open] {
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
-}
-.gallery .content details[open] summary {
- background-color: transparent;
-}
/**************************************************
TABLES
**************************************************/
@@ -2605,6 +1888,7 @@
overflow: auto;
position: relative;
}
+
thead,tfoot {
position: sticky;
z-index: 10;
@@ -2618,36 +1902,44 @@
tr:nth-of-type(even){
background-color: var(--base-200);
}
+
tfoot th {
vertical-align: middle;
}
+
tfoot th:first-of-type {
text-align: right;
}
-tbody {
-}
+
thead tr, tfoot tr {
- background-color: var(--overlay-heavy);
- box-shadow: var(--shadow);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
+
thead tr {
border-bottom: 1px solid var(--contrast-200);
}
+
tfoot tr {
border-top: 1px solid var(--contrast-200);
}
+
thead {
top: 0;
}
+
tfoot {
bottom: 0;
}
+
thead th {
width: max-content;
}
+
th p {
margin: 0!important;
}
+
td {
width: max-content;
padding: .5rem 1rem;
@@ -2656,41 +1948,48 @@
td .toggle input[type=checkbox] {
margin: 0;
}
+
td .field {
margin: .25rem 0;
}
+
td[data-id="actions"] label {
margin: 0;
padding: 0;
}
+
td .description {
display: none;
}
+
td input[type=text] {
width: fit-content;
max-width: 40vw;
padding: .25em!important;
- font-size: var(--small)!important;
+ font-size: var(--txt-x-small)!important;
}
tbody tr {
border: 2px solid transparent;
}
+
tbody tr:focus-within {
background-color: var(--base-100);
border-color: var(--action-50)
}
[data-stuck] {
- background-color: var(--overlay-medium);
+ background-color: rgba(var(--base-rgb),var(--op-4));
position: sticky;
left: -1rem;
z-index: 15;
- box-shadow: var(--subtleRight);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
}
+
tbody [data-stuck] {
z-index: 5;
}
+
thead [data-stuck],
tfoot [data-stuck] {
background: var(--base);
@@ -2709,8 +2008,8 @@
height:fit-content;
max-width: 50vw;
padding: .5rem;
- border-radius: var(--innerRadius);
- box-shadow: var(--shadow);
+ border-radius: var(--radius);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
background: var(--action-0);
color: var(--action-contrast);
}
@@ -2721,20 +2020,22 @@
top: -200%;
z-index: var(--z-4);
}
+
[role=tooltip] p {
margin: 0;
}
+
[role=tooltip] p + p {
margin-top: .5rem;
}
-/*.field:has([aria-describedby]:hover) [role=tooltip],*/
.field:has([aria-describedby]:focus) [role=tooltip],
[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
visibility: visible;
display: block;
}
+
.has-tooltip {
display: inline-flex;
justify-content: flex-end;
@@ -2743,17 +2044,20 @@
left: 0;
--w: 1.5rem
}
+
.tt-toggle {
cursor: pointer;
display: flex;
border-radius: 50%;
background-color: transparent;
}
+
.tt-toggle:hover,
.tt-toggle:focus {
background-color: var(--action-0);
color: var(--action-contrast);
}
+
.tt-toggle:hover + [role=tooltip],
.tt-toggle:focus + [role=tooltip] {
visibility: visible;
@@ -2767,20 +2071,66 @@
top: 15vh;
display: flex;
}
+
#jvb-selector > .wrap {
flex: 1;
}
/******************************************************************
+STATUS INDICATORS
+******************************************************************/
+.status,
+.item .status,
+.status-badge {
+ border-radius: var(--radius);
+ font-size: 0.875rem;
+ font-weight: 500;
+ text-transform: capitalize;
+}
+
+[data-status="pending"],
+.status.pending,
+.status-badge.pending,
+#queue .item .status.pending {
+ background: var(--base-100);
+ color: var(--contrast-200);
+}
+
+[data-status="processing"],
+.status.processing,
+.status-badge.processing,
+#queue .item .status.processing {
+ background: var(--base-200);
+ color: var(--contrast-100);
+ animation: pulse-color 2s infinite;
+}
+
+[data-status="completed"],
+.status.completed,
+.status-badge.consulted,
+.status-badge.treated,
+#queue .item .status.completed {
+ background: var(--success);
+ color: var(--successText);
+}
+
+[data-status="failed"],
+.status.failed,
+.status-badge.error,
+#queue .item .status.failed {
+ background: var(--error);
+ color: var(--errorText);
+}
+
+/******************************************************************
LOADING
******************************************************************/
dialog.loading {
opacity: 0;
- transition: opacity var(--transition-base);
}
+
dialog.loading[open] {
opacity: 1;
- transition: opacity var(--transition-base);
width: 100vw;
height: 100vh;
display: flex;
@@ -2794,16 +2144,18 @@
justify-content: center;
align-items: center;
}
+
dialog.loading[open]@starting-style {
opacity: 0;
}
+
dialog.loading[open] > .col {
height: fit-content;
width: min(400px, 60vw);
- border-radius: var(--outerRadius);
- background-color: var(--overlay-medium);
+ border-radius: var(--radius-outer);
+ background-color: rgba(var(--base-rgb),var(--op-4));
padding: 2rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
position: relative;
}
@@ -2814,26 +2166,23 @@
height: 5rem;
border-width: 0;
border-top-width: 4px;
- animation: spin 1s var(--function) infinite;
+ animation: spin 1s var(--trans-fn) infinite;
}
-.loading[open] .icon {
+
+.loading[open] i.icon {
background-color: var(--action-0);
}
-dialog.loading[open] .icon {
+dialog.loading[open] i.icon {
animation: dance 2s ease-in-out infinite;
- transition: color .3s ease;
}
+
dialog.loading[open] h3 {
color: var(--contrast);
margin: 2rem 1rem auto !important;
- font-size: var(--large);
+ font-size: var(--txt-large);
width: -moz-fit-content;
width: fit-content;
- /*-webkit-text-stroke: 1px var(--contrast);*/
- /*--g: conic-gradient(var(--action-0) 0 0) no-repeat text;*/
- /*animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;*/
- /*background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;*/
}
dialog.loading[open] p {
@@ -2855,135 +2204,21 @@
border: 2px solid transparent;
border-top: 2px solid var(--action-50);
border-radius: 50%;
- animation: spin 1s var(--function) infinite;
+ animation: spin 1s var(--trans-fn) infinite;
}
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-@keyframes shimmer {
- 0% {
- left: -50%;
- }
- 50% {
- left: 150%;
- }
- 100% {
- left: -50%;
- }
-}
-
-
-@keyframes dance {
- 0%, 100% {
- transform: rotate(-5deg) scale(1);
- }
- 50% {
- transform: rotate(5deg) scale(1.1);
- }
-}
-
-@keyframes letterOutline {
- 0% {
- background-size: 1ch 0;
- }
- 100% {
- background-size: 1ch 100%;
- }
-}
-
-@keyframes letterInside {
- 0%, 50% {
- background-position-y: 100%,0;
- }
- 50.01%, 100% {
- background-position-y: 0, 100%;
- }
-}
-
-/******************************
-TABS
-******************************/
-.tab-content[hidden] {
- display: block!important;
- transform: scaleY(0);
- height: 0;
- overflow: hidden;
-}
-.tab-content[hidden]:focus-within {
- transform: scaleY(1);
- height:auto;
-}
-
-nav.tabs h2 {
- margin: 0!important;
- line-height: 1;
- font-size: var(--medium);
- display: flex;
- color: var(--contrast);
- white-space: nowrap;
- gap: 1rem;
-}
-nav.tabs .active h2 {
- color: var(--action-contrast);
-}
-nav.tabs button {
- padding: .75rem 1.5rem;
- border-radius: 0;
- position: relative;
- border: 2px solid var(--action-0);
-}
-nav.tabs > button:first-of-type {
- border-top-left-radius: var(--innerRadius);
-}
-nav.tabs > button:last-of-type {
- border-top-right-radius: var(--innerRadius);
-}
-.tabs > button:hover,
-.tabs > button:focus {
- background-color: var(--base-200);
-}
-
-.tabs > button::after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 0;
- width: 0;
- height: 3px;
- background-color: var(--action-50);
- transition: width .3s;
-}
-.tabs > button:hover::after,
-.tabs > button.active::after {
- width: 100%;
-}
-.tabs > button.active::after {
- background-color: var(--action-200);
-}
-.tabs > button.active {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-.tabs > button.active:hover,
-.tabs > button.active:focus {
- background-color: var(--action-100);
-}
-.tab-content h2 {
- display: none;
-}
/*****************************************************************************
MENU
*****************************************************************************/
.toggle-details {
gap: 2px;
}
+
body.menu_item #top {
z-index: var(--z-4);
position: relative;
}
+
section .toggle-details {
position: absolute;
right: 0;
@@ -2992,18 +2227,21 @@
[data-toggle=all] {
position: fixed;
- bottom: calc(var(--offHeight) + var(--height) + .5rem);
+ bottom: calc(var(--btn_) + var(--btn) + .5rem);
right: 0;
z-index: var(--z-4);
background-color: var(--action-0);
color: var(--action-contrast);
}
+
[data-toggle] {
z-index: var(--z-1);
}
+
body:has(#queue[hidden]) [data-toggle=all] {
left: 1rem;
}
+
dialog:not([open]).col,
dialog:not([open]).row {
display: none;
@@ -3014,84 +2252,80 @@
right: -10%;
}
}
+
/********************************************
TYPE TEXT
********************************************/
-/* Cursor, for typing messages */
.typeText::after {
content: '|';
display: inline-block;
margin-left: 0;
animation: blink .75s step-end infinite;
}
+
@keyframes blink {
from, to { opacity: 1; }
50% { opacity: 0; }
}
/**************************************************
-POPUPS:
-- toast container
-- cart
-- queue
+POPUPS: toast, cart, queue
**************************************************/
-aside {
+aside.main {
+ --wrap: nowrap;
+ --align: stretch;
position: fixed;
- top: var(--doubleHeight);
- bottom: var(--offHeight);
+ top: var(--btnbtn);
+ bottom: var(--btn_);
width: min(500px, calc(100vw - 2rem));
background-color: var(--base);
z-index: var(--z-5);
- box-shadow: var(--shadow);
- padding-bottom: var(--height);
- overflow: visible;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ padding: 1rem 1rem var(--btn);
+ overflow: hidden auto;
+}
+aside.main.referral {
+ padding-top: 0;
+}
+aside.main.referral nav.tabs {
+ padding: 1rem 0;
+ background-color:var(--base);
+ height: max-content;
+ min-height: var(--btn);
}
-.qtoggle
- /*.toggle-cart,*/
-/*.create-item */
-{
+.qtoggle {
z-index: var(--z-6);
position: fixed;
- bottom: var(--offHeight);
- width: var(--height);
- height: var(--height);
- background-color: var(--overlay-medium);
+ bottom: var(--btn_);
+ width: var(--btn);
+ height: var(--btn);
+ background-color: rgba(var(--base-rgb),var(--op-4));
color: var(--contrast);
- transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ transition: var(--trans-size), var(--trans-color);
}
-/*.toggle-cart:hover,*/
+
.qtoggle:hover,
-/*.create-item:hover,*/
- /*.toggle-cart:focus,*/
-.qtoggle:focus
-/*.create-item:focus */
-{
- background-color: rgba(var(--action-rgb),var(--rgb-heavy));
+.qtoggle:focus {
+ background-color: rgba(var(--action-rgb),var(--op-6));
color: var(--action-contrast);
}
-/*.toggle-cart:disabled,*/
+
.qtoggle:disabled,
-/*.create-item:disabled,*/
- /*.toggle-cart:disabled:hover,*/
.qtoggle:disabled:hover,
-/*.create-item:disabled:hover,*/
- /*.toggle-cart:disabled:focus,*/
-.qtoggle:disabled:focus
-/*.create-item:disabled:focus */
-{
+.qtoggle:disabled:focus {
opacity: .5;
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
color: var(--contrast);
}
+
/******************
CART
******************/
-/*.create-item,*/
.toggle-cart {
right: 0;
- border-radius: 4px 4px 4px var(--outerRadius);
+ border-radius: 4px 4px 4px var(--radius-outer);
}
body:has(#cart.expanded) .toggle-cart .icon {
@@ -3101,28 +2335,34 @@
aside#cart {
padding-bottom: 6rem;
}
+
#cart form {
max-height: 100%;
overflow: hidden auto;
}
+
#cart nav.tabs {
z-index: var(--z-6);
top: 0;
}
+
#cart table {
height: auto;
}
+
#cart th {
padding: 0 1.5rem;
}
+
#cart table th:first-of-type {
width: 100%;
}
#cart nav.tabs {
position: sticky;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
+
#cart button[data-tab] {
flex: 1;
border-radius: 0;
@@ -3141,23 +2381,26 @@
--gap: 0 1rem;
padding-right: 1rem;
position: absolute;
- bottom: var(--height);
+ bottom: var(--btn);
width: 100%;
max-width: 100%;
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
z-index: var(--z-6);
- box-shadow: var(--shadow-up);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
}
+
.cart-total p {
--gap: 2rem;
max-width: 100%;
margin: 0;
}
+
.cart-total p span {
width: 6rem;
display: inline-block;
text-align: right;
}
+
.cart-total p + p {
font-weight: bold;
}
@@ -3165,23 +2408,28 @@
.cart-items .total {
font-weight: bold;
}
+
#cart .restored {
- background-color: rgba(var(--action-rgb), var(--rgb-light));
- border-radius: var(--outerRadius);
+ background-color: rgba(var(--action-rgb), var(--op-3));
+ border-radius: var(--radius-outer);
padding: 1rem;
}
+
.restored h3 {
- font-size: var(--medium);
+ font-size: var(--txt-medium);
margin: 0;
}
+
.restored p {
margin: 0;
}
+
.restored .row {
--gap: 0;
--wrap:nowrap;
--w: 1em;
}
+
/******************
TOAST
******************/
@@ -3194,10 +2442,10 @@
}
.toast {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
border-left: 4px solid var(--action-0);
padding: 1rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
left: 0;
position: relative;
opacity: 0;
@@ -3243,23 +2491,31 @@
.close-toast:hover {
opacity: 1;
}
+
/******************
QUEUE
******************/
+#queue#queue {
+ width: min(500px, calc(100vw - 2rem));
+}
+
+#queue > * {
+ max-width: 100%;
+}
.qtoggle {
left: 0;
- border-radius: 4px 4px var(--outerRadius) 4px;
+ border-radius: 4px 4px var(--radius-outer) 4px;
}
.qtoggle.expanded {
- left: var(--height);
- width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
+ left: var(--btn);
+ width: min(calc(500px - var(--btn)), calc(100vw - 2rem - var(--btn)));
}
.qtoggle.saving .icon {
background-color: var(--action-0);
- animation: spin .87s var(--function) infinite;
+ animation: spin .87s var(--trans-fn) infinite;
}
#queue .status-actions {
@@ -3277,12 +2533,13 @@
max-width: 300px;
background-color: var(--action-50);
color: var(--action-contrast);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
padding: .25em .75em;
top: 1rem;
left: -100vw;
- transition: left var(--transition-base);
+ transition: left var(--trans-base);
}
+
aside#queue .popup::before{
content: '';
width: 10px;
@@ -3298,13 +2555,13 @@
.expanded#queue .status-actions .popup.showing {
left: calc(100% + 1em);
}
+
#queue .status-actions .popup.showing {
- left: calc(200vw + var(--offHeight));
+ left: calc(200vw + var(--btn_));
max-width: 75vw;
}
/** BADGES **/
-
.refresh .countdown,
#queue .item .status,
.filter .count,
@@ -3314,12 +2571,14 @@
--offset: 0;
position: absolute;
top: var(--offset);
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
}
+
.expanded + .qtoggle .indicator,
.expanded + .qtoggle .count {
--offset: .25rem;
}
+
/* Status indicator */
.qtoggle .indicator {
right: var(--offset);
@@ -3336,9 +2595,10 @@
background-color: var(--warning);
animation: pulse 2s infinite;
}
+
aside#queue.pending:not(.expanded) + .qtoggle .icon {
background-color: var(--error);
- animation: spin 1s var(--function) infinite;
+ animation: spin 1s var(--trans-fn) infinite;
}
/* Status count badge */
@@ -3350,8 +2610,8 @@
height: 1.25rem;
padding: 0 4px;
color: var(--contrast);
- border-radius: var(--innerRadius);
- font-size: var(--extra-small);
+ border-radius: var(--radius);
+ font-size: var(--txt-x-small);
}
#queue:has(.empty-queue) + .qtoggle .count {
@@ -3362,37 +2622,53 @@
padding: 15px;
border-bottom: 1px solid var(--base-200);
flex-shrink: 0;
+ --height: max-content;
}
+
.qitems {
flex: 1;
+ width: 100%;
overflow: hidden auto;
+ overflow-anchor: none;
padding: .5rem 2rem;
--gap: .5rem;
}
+.qitems .item {
+ width: 100%;
+}
+
+.qitems button {
+ --height: max-content;
+}
+
aside#queue h3 {
- margin: 0 0 12px 0;
+ margin: 0;
font-size: 16px;
color: var(--contrast);
}
+#queue .filters {
+ padding: 1rem 0 0;
+}
+
#queue .filters .filter {
background-color: transparent;
white-space: nowrap;
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
#queue .filters .filter.active {
background: var(--base-200);
border-color: transparent;
}
+
#queue .filter:hover,
#queue .filter:focus {
background-color: var(--action-0);
color: var(--action-contrast);
}
-
/* Filter count badge */
.filter .count {
--offset: -8px;
@@ -3404,6 +2680,7 @@
height: 18px;
font-size: 10px;
}
+
.filter .count:empty {
display: none;
}
@@ -3412,7 +2689,7 @@
.empty-queue {
height: 100px;
color: var(--contrast-200);
- font-size: var(--small);
+ font-size: var(--txt-x-small);
font-style: italic;
}
@@ -3425,21 +2702,22 @@
#queue .item {
padding: 15px;
background: var(--base-100);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
transition: all .2s ease;
- box-shadow: var(--shadow-none);
+ box-shadow: var(--shdw-none);
}
#queue .item:hover {
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
#queue .item .header {
position: relative;
+ padding: .25rem 0;
}
#queue .item .type {
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
#queue .item .status {
@@ -3458,30 +2736,10 @@
height: 1.25em;
}
-#queue .item .status.pending {
- background: var(--base-100);
- color: var(--contrast-200);
-}
-#queue .item .status.processing {
- background: var(--base-200);
- color: var(--contrast-100);
- animation: pulse-color 2s infinite;
-}
-
-#queue .item .status.completed {
- background: var(--base-50);
- color: var(--base-200);
-}
#queue .item .status.completed:hover {
color: var(--contrast-200);
}
-#queue .item .status.failed {
- background: var(--base);
- color: var(--error);
-}
-
-
#queue .item button {
font-size: 16px;
padding: 0;
@@ -3497,8 +2755,9 @@
/* Item details */
#queue .item .info {
margin-top: 8px;
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
+
#queue .item .info .time {
--gap: 7px;
font-size: 10px;
@@ -3506,7 +2765,6 @@
/* Item actions */
#queue .item .actions {
- margin-top: 12px;
--gap: 8px;
}
@@ -3526,29 +2784,28 @@
color: var(--secondary-contrast);
}
-
#queue .item .actions button:hover {
opacity: .9;
}
/* Queue actions footer */
.queue-actions {
- padding: 15px;
+ padding: .5rem 0;
border-top: 1px solid var(--base-200);
flex-shrink: 0;
}
.queue-actions button {
- padding: 8px 12px;
- font-size: var(--small);
- transition: all .2s;
+ --height: max-content;
+ padding: .75rem;
+ width: 100%;
+ font-size: var(--txt-x-small);
}
-
/* Refresh area */
.status-actions > .refresh {
position: relative;
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
.refresh .countdown {
@@ -3562,8 +2819,8 @@
}
.refreshNow {
- width: var(--height);
- height: var(--height);
+ width: var(--btn);
+ height: var(--btn);
}
.refreshNow:hover {
@@ -3577,25 +2834,24 @@
/* Refreshing animation */
#queue.pending.expanded .refreshNow .icon {
- animation: spin 1.5s var(--function) infinite;
+ animation: spin 1.5s var(--trans-fn) infinite;
}
+
/**************************************************
DELAY
**************************************************/
-/* Initialize counter on the parent container */
.item-grid, #queue {
counter-reset: delay-counter;
}
-/* Increment counter for each item */
.item {
counter-increment: delay-counter;
}
-/* Use counter value to calculate delay */
.item .progress .fill::after {
--delay: calc(counter(delay-counter) * .1s);
}
+
/**************************************************
PROGRESS
**************************************************/
@@ -3615,16 +2871,19 @@
width: 0;
transition: width .3s ease;
}
+
.progress .details {
margin-top: 5px;
- font-size: var(--small);
+ font-size: var(--txt-x-small);
color: var(--contrast);
text-align: center;
padding: .25rem 0;
}
+
.progress .details:empty {
display: none;
}
+
.queued .fill::after,
.pending .fill::after,
.processing .fill::after,
@@ -3644,6 +2903,7 @@
);
animation: shimmer 2.5s infinite linear var(--delay);
}
+
/**************************************************
ACTIONS
**************************************************/
@@ -3651,87 +2911,86 @@
padding: 0;
background-color: transparent;
}
+
.additional-actions .buttons {
position: fixed;
- bottom: var(--offHeight);
+ bottom: var(--btn_);
right: 1rem;
margin: 0;
--gap: 1rem;
z-index: var(--z-6);
width: fit-content;
}
+
.additional-actions .buttons button {
- height: var(--height);
- width: var(--height);
- background-color: var(--overlay-medium);
+ height: var(--btn);
+ width: var(--btn);
+ background-color: rgba(var(--base-rgb),var(--op-4));
color: var(--contrast);
- transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
+
.additional-actions .buttons button:hover {
background-color: var(--action-0);
color: var(--action-contrast);
}
+
.additional-actions .buttons button:disabled,
.additional-actions .buttons button:disabled:hover,
.additional-actions .buttons button:disabled:focus {
opacity: .5;
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
color: var(--contrast);
}
+
.additional-actions .buttons button:last-of-type {
- border-radius: 4px 4px 4px var(--outerRadius);
+ border-radius: 4px 4px 4px var(--radius-outer);
}
-aside {
- position: fixed;
- top: var(--doubleHeight);
- bottom: var(--offHeight);
- width: min(500px, calc(100vw - 2rem));
- background-color: var(--base);
- z-index: var(--z-5);
- box-shadow: var(--shadow);
- --wrap: nowrap;
- --align: stretch;
- overflow: hidden auto;
- padding: 1rem 1rem var(--height);
-}
+
aside.left {
+ transition: left var(--trans-base);
left: var(--offScreen);
- transition: left var(--transition-base);
- border-radius: 0 var(--outerRadius) var(--outerRadius) 0;
+ border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
}
+
aside.left.expanded {
left: 0;
}
aside.right {
+ transition: right var(--trans-base);
right: var(--offScreen);
- border-radius: var(--outerRadius) 0 0 var(--outerRadius);
- transition: right var(--transition-base);
+ border-radius: var(--radius-outer) 0 0 var(--radius-outer);
}
+
aside.right.expanded {
right: 0;
}
+
aside.right.expanded button.close {
position: sticky;
- bottom: calc(var(--height) * -1);
+ bottom: calc(var(--btn) * -1);
left: 0;
- border-bottom-left-radius: var(--outerRadius);
- width: var(--height);
- height: var(--height);
-
+ border-bottom-left-radius: var(--radius-outer);
+ width: var(--btn);
+ height: var(--btn);
}
+
.additional-actions .buttons:has(.expanded) button:not(.expanded) {
display: none;
}
+
.additional-actions .buttons:has(.expanded){
right: 0;
}
-
+.additional-actions .buttons button {
+ transition: right var(--trans-base), var(--trans-size);
+}
.additional-actions .buttons .expanded {
width: calc(min(500px, calc(100vw - 2rem)));
background-color: var(--base);
}
+
.additional-actions .buttons button:hover,
.additional-actions .buttons .expanded:hover {
background-color: var(--action-0);
@@ -3740,14 +2999,15 @@
[type=submit] {
width: 100%;
- height: var(--height);
+ height: var(--btn);
background-color: var(--action-0);
color: var(--action-contrast);
- box-shadow: var(--shadow-none);
+ box-shadow: var(--shdw-none);
font-weight: bold;
}
+
[type=submit]:hover {
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
border: 2px solid var(--action-0);
color: var(--action-0);
background-color: var(--action-contrast);
@@ -3760,25 +3020,25 @@
left: 0;
right: 0;
}
-.jvb-referral nav.tabs button {
- width: 50%;
-}
+
aside .tab-content.active {
padding: 1rem;
min-height: 100%;
}
aside header h3 {
- font-size: var(--medium);
+ font-size: var(--txt-medium);
margin: 1rem 0;
text-align: center;
}
+
aside header p {
margin: .25rem 0;
text-align: center;
}
+
aside h4 {
- font-size: var(--small);
+ font-size: var(--txt-x-small);
margin: 1rem 0 0 0;
}
@@ -3792,35 +3052,41 @@
background-color: var(--base-200);
border: 1px solid var(--contrast-200);
}
+
.restore-form {
- background-color: rgba(var(--action-rgb), var(--rgb-light));
+ background-color: rgba(var(--action-rgb), var(--op-3));
border: 1px solid var(--action-200);
padding: .5rem;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
margin: 1rem 2rem;
}
+
.restore-form h3 {
text-align: center;
margin: 1rem 0 0;
- font-size: var(--medium);
+ font-size: var(--txt-medium);
}
+
.restore-form p {
margin: .5rem 0;
}
+
.fstatus {
z-index: var(--z-5);
- background-color: rgba(var(--base-rgb),var(--rgb-heavy));
+ background-color: rgba(var(--base-rgb),var(--op-6));
border-radius: 4px;
padding: 0 .5rem;
position: fixed;
- bottom: var(--offHeight);
- right: calc(var(--offHeight) + 1rem);
+ bottom: var(--btn_);
+ right: calc(var(--btn_) + 1rem);
--w: 1em;
- box-shadow:var(--shadow);
+ box-shadow:var(--shdw);
}
+
.fstatus .spinner {
display: none;
}
+
.fstatus.loading .spinner {
display: inline-block;
}
@@ -3831,123 +3097,622 @@
}
/**************************************************
-ASIDE EXCEPTIONS
+CALLOUT SECTIONS
**************************************************/
-aside.pre-header,
-aside.sub-header {
- left: 0;
- right: 0;
- width: 100vw;
+.callalt.callalt,
+.callout.callout {
+ padding: 2rem;
+ margin: 0;
+ max-width: none;
+ grid-column: full;
+}
+
+@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 :is(h1, h2, h3, h4, h5, h6),
+.callout :is(h1, h2, h3, h4, h5, h6) {
+ font-family: var(--body);
+ font-weight: var(--fw-b-bold);
+ 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-text > div,
+.media-text figure {
+ width: 100%;
+ margin: 0;
+}
+
+@media (min-width:768px ){
+ .media-text {
+ --wrap: nowrap;
+ }
+}
+
+.media-text > div {
+ max-width: var(--content);
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.timeline.terms {
+ list-style: none;
display: flex;
+ flex-wrap: wrap;
justify-content: space-between;
- height: 2rem;
- bottom: unset;
- padding: 0 .5rem;
- font-size: var(--small);
- flex-wrap: nowrap;
+ align-items: flex-start;
+}
+
+.timeline.terms > li {
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .timeline.terms > li {
+ width: 50%;
+ }
+}
+
+/**********************************
+GALLERY
+**********************************/
+dialog.gallery[open] {
+ position: fixed;
+ inset: 1rem;
+ margin: 0;
+ border: none;
+ width: calc(100% - 2rem);
+ height: calc(100% - 2rem);
+ padding: 0;
+ background: rgba(var(--base-rgb),var(--op-6));
+ display: flex;
align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ backdrop-filter: blur(3px);
+ z-index: var(--z-9);
+ max-height: 100vh;
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;
+
+.gallery .controls {
+ order: 3;
+ justify-content: flex-end;
+ --height: 2rem;
}
-.wp-site-blocks > .pre-header ~ header {
- top: 2.05rem;
+
+.gallery .controls .cancel {
+ order: 3;
}
-.sub-header {
- top: var(--height);
- box-shadow: var(--shadow);
+
+dialog.gallery::backdrop {
+ background: rgba(var(--base-rgb), var(--op-4));
}
-.pre-header ~ .sub-header {
- top: calc(var(--height) + 1.5rem);
+
+dialog.gallery .wrap {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+dialog.gallery .cancel:hover {
+ background: rgba(var(--base-rgb),var(--op-4));
+}
+
+dialog.gallery .content {
+ position: relative;
+ flex: 1 1 auto;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+
+dialog.gallery .content .image {
+ max-width: 90vw;
+ max-height: 85vh;
+ object-fit: contain;
+ transition: transform 0.15s ease-out;
+ touch-action: none;
+}
+
+dialog.gallery .image-left,
+dialog.gallery .image-right {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+dialog.gallery details {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ width: calc(100% - 2rem);
+ max-width: 600px;
+ background: rgba(0,0,0,0.45);
+ color: #fff;
+ border-radius: 4px;
+ overflow: hidden;
+ z-index: 10;
+}
+
+dialog.gallery details summary {
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ user-select: none;
+}
+
+dialog.gallery details[open] .item-info {
+ padding: 1rem;
+}
+
+dialog.gallery .counter {
+ position: absolute;
+ bottom: 1rem;
+ left: 1rem;
+ background: rgba(var(--base-rgb),var(--op-4));
+ color: var(--contrast);
+ padding: 0.4rem 0.8rem;
+ border-radius: 3px;
+ font-size: 0.85rem;
+ z-index: 10;
+}
+
+dialog.gallery .favourite {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ z-index: 10;
+}
+
+dialog.gallery .image {
+ opacity: 0;
+ transition: opacity .2s ease, transform .15s ease-out;
+}
+
+dialog.gallery .image[src] {
+ opacity: 1;
}
/**************************************************
-RESPONSES
+REFERRAL SYSTEM
**************************************************/
-/*dialog.create-response {*/
-/* width: min(650px, calc(95vw - (var(--padding) * 2)));*/
-/*}*/
-/*dialog.create-response .original {*/
-/* height: 20vh;*/
-/* overflow-y: scroll;*/
-/* padding: 1rem;*/
-/* background-color: var(--base-100);*/
-/* border-radius: var(--innerRadius);*/
-/*}*/
-/*dialog.create-response .editor-container .ql-container {*/
-/* height: 30vh;*/
-/*}*/
+.referral-reward-banner {
+ background: var(--base-100);
+ color: var(--action-0);
+ border: 2px dashed var(--action-0);
+ padding: 1.5rem;
+ border-radius: 8px;
+ text-align: center;
+ margin-bottom: 1.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
-/*.responses summary {*/
-/* text-transform: none;*/
-/* display: block;*/
-/*}*/
-/*.news .header {*/
-/* margin-right: 2rem;*/
-/*}*/
-/*.news > summary::after,*/
-/*.responses summary::after {*/
-/* display: block;*/
-/* position: absolute;*/
-/* top: 0;*/
-/* right: 0;*/
-/* mask-image: var(--chevron);*/
-/*}*/
-/*.responses[open] > summary {*/
-/* background-color: inherit;*/
-/*}*/
-/*.responses[open] {*/
-/* background-color: var(--base-200);*/
-/*}*/
-/*.responses {*/
-/* margin: 1rem 0;*/
-/*}*/
+.referral-reward-banner .icon {
+ --w: 3rem;
+}
-/*.response {*/
-/* background-color: inherit;*/
-/*}*/
-/*.response[open] {*/
-/* background-color: var(--base-100);*/
-/*}*/
-/*.response[open] > summary {*/
-/* background-color: inherit;*/
-/*}*/
-/*.news[open] > summary::after,*/
-/*.responses[open] > summary::after,*/
-/*.response[open] > summary::after {*/
-/* mask-image: var(--chevron);*/
-/*}*/
-/*.response > summary::after {*/
-/* display: none;*/
-/*}*/
-/*.response:has(.response) > summary::after {*/
-/* display: block;*/
-/*}*/
-/*.response:nth-of-type(even) {*/
-/* background-color: var(--base-50);*/
-/*}*/
-/*button.reply {*/
-/* margin-left: auto;*/
-/*}*/
+.referral-reward-banner h4 {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--contrast);
+}
+
+.check-code-btn {
+ width: 100%;
+ margin-top: 0.5rem;
+ background: var(--base-100);
+ color: var(--contrast-100);
+ border: 1px solid var(--contrast-200);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
+
+.code-status {
+ padding: 0.75rem;
+ border-radius: 4px;
+ margin-top: 0.5rem;
+ font-size: 0.875rem;
+}
+
+.code-status.loading {
+ background: var(--base-200);
+ color: var(--contrast-200);
+}
+
+.code-status.success {
+ background: var(--successBack);
+ color: var(--successText);
+ border: 1px solid var(--successBack);
+}
+
+.code-status.error {
+ background: var(--errorBack);
+ color: var(--errorText);
+ border: 1px solid var(--errorBack);
+}
+
+.referral-footer {
+ text-align: center;
+ padding: 1rem 0;
+ border-top: 1px solid var(--base-200);
+ margin-top: 1rem;
+}
+
+.referral-footer .text-link {
+ color: var(--contrast-200);
+ text-decoration: none;
+ font-size: 0.875rem;
+}
+
+.referral-footer .text-link:hover {
+ color: var(--action-0);
+ text-decoration: underline;
+}
+
+.share-section {
+ margin-bottom: 1.5rem;
+}
+
+.share-section h4 {
+ margin: 0 0 0.75rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--contrast-200);
+}
+
+.copy-section {
+ margin-bottom: 1.5rem;
+}
+
+.copy-section h4 {
+ margin: 0 0 0.5rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--contrast-200);
+}
+
+.copy-group {
+ --gap: 0 .5rem;
+ margin-bottom: 0;
+}
+ .copy-group + .hint {
+ margin: .25rem 1rem 1rem;
+ }
+
+.copy-target {
+ flex: 1;
+ padding: 0.75rem;
+ background: var(--base-100);
+ border: 1px solid var(--base-200);
+ border-radius: 4px;
+ font-family: 'Monaco', 'Courier New', monospace;
+ font-size: 0.875rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ user-select: all;
+}
+
+.copy-btn {
+ flex-shrink: 0;
+ width: var(--chipchip);
+ height: var(--chipchip);
+ min-height: 0;
+ padding: 0;
+}
+.copy-btn.success .icon-copy,
+.copy-btn .icon-check-circle {
+ display: none;
+}
+.copy-btn.success .icon-check-circle {
+ display: inline-block;
+}
+
+.copy-btn.success {
+ background: var(--successBack);
+ color: var(--success);
+}
+
+.recent-referrals-section {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid var(--contrast-200);
+}
+
+.recent-referrals-section h4 {
+ margin: 0 0 0.75rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--contrast-200);
+}
+
+.recent-referrals-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.referral-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem;
+ background: var(--base-100);
+ border-radius: 4px;
+ font-size: 0.875rem;
+}
+
+.referral-info {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.referral-info strong {
+ color: var(--contrast-200);
+}
+
+.referral-date {
+ font-size: 0.75rem;
+}
+
+.no-referrals,
+.loading {
+ text-align: center;
+ padding: 1rem;
+ color: var(--contrast-200);
+ font-size: 0.875rem;
+}
+
+.stats-summary {
+ margin-bottom: 1.5rem;
+}
+
+.stat-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem;
+ border-bottom: 1px solid var(--base-200);
+}
+
+.stat-row:last-child {
+ border-bottom: none;
+}
+
+.stat-row.highlight {
+ background: var(--base-100);
+ border-radius: 4px;
+ border: 1px solid var(--base);
+ font-weight: 600;
+}
+
+.stat-label {
+ color: #666;
+ font-size: 0.875rem;
+}
+
+.stat-value {
+ color: #333;
+ font-weight: 600;
+ font-size: 1rem;
+}
+
+.stat-row.highlight .stat-value {
+ color: var(--action-0);
+ font-size: 1.25rem;
+}
+
+.view-dashboard-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0.875rem;
+ background: var(--action-0);
+ color: var(--action-contrast);
+ text-decoration: none;
+ border-radius: 8px;
+ font-weight: 600;
+ transition: all 0.2s ease;
+}
+aside button:not(.button, .qtoggle),
+aside a.button{
+ position: relative;
+ top: 0;
+ box-shadow: var(--shdw-none);
+ transition: top var(--trans-base), box-shadow var(--trans-base);
+}
+
+aside button:not(.button, .qtoggle, :disabled):hover,
+aside a.button:hover {
+ top: -4px;
+ box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down);
+}
+
+.view-dashboard-btn:visited {
+ color: var(--action-contrast);
+}
+.view-dashboard-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.success-content {
+ padding: 2rem 1rem;
+ text-align: center;
+}
+
+.success-content h3 {
+ color: var(--success);
+ margin-bottom: 1rem;
+}
+
+.success-content p {
+ margin-bottom: 0.75rem;
+ color: var(--base-200);
+}
+
+.success-content .hint {
+ font-size: 0.875rem;
+ color: var(--base-200);
+ font-style: italic;
+}
+
+.code-status.loading::before {
+/*.loading::before {*/
+ content: '';
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid var(--action-200);
+ border-top: 2px solid var(--action-0);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-right: 0.5rem;
+ vertical-align: middle;
+}
+.share-buttons-grid a {
+ padding: 0;
+ min-height: 0;
+ width: var(--chipchip);
+ height: var(--chipchip);
+}
+.share-buttons-grid a .icon {
+ margin-right: 0;
+}
+@media (max-width: 768px) {
+ .share-buttons-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .referral-item {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+}
+/***************
+TOGGLE TEXT
+***************/
+.toggle-text input {
+ display: none;
+}
+
+.toggle-text input + label {
+ font-weight: normal;
+ color: var(--contrast)!important;
+ text-transform: none;
+ cursor: pointer;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.toggle-text label::before,
+.toggle-text label::after {
+ display: none;
+}
+
+.toggle-text label {
+ padding-left: 0!important;
+}
+
+.toggle-text input + label .text {
+ position: relative;
+ margin: 0 .5rem;
+ font-weight: bold;
+ width: fit-content;
+ padding: 2px 4px;
+ border: 1px solid var(--action-50);
+ border-radius: 4px;
+ color: var(--action-50)!important;
+}
+
+table .toggle-text input+label .text {
+ color: var(--contrast)!important;
+ border-color: var(--contrast);
+}
+
+.toggle-text:hover .text,
+table .toggle-text:hover .text {
+ background-color: var(--action-50);
+ color: var(--light-0)!important;
+ border-color: var(--action-50);
+}
+
+.toggle-text input + label .off,
+.toggle-text input + label .on {
+ transition: var(--trans-transform), opacity var(--trans-base);
+}
+
+.toggle-text input + label .off {
+ opacity: 1;
+ max-width: 100%;
+ transform: none;
+}
+
+.toggle-text input + label .on {
+ opacity: 0;
+ max-width: 0;
+ transform: translate3d(0, 100%, 0);
+}
+
+.toggle-text input:checked + label .off {
+ opacity: 0;
+ max-width: 0;
+ transform: translate3d(0, -100%, 0);
+}
+
+.toggle-text input:checked + label .on {
+ max-width: 100%;
+ opacity: 1;
+ transform: none;
+}
/**************************************************
ANIMATIONS
**************************************************/
-/** Used for Loading **/
@keyframes shimmer {
0% {
left: -50%;
@@ -3960,7 +3725,6 @@
}
}
-
@keyframes pulse-color {
0% {
box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
@@ -3973,7 +3737,6 @@
}
}
-/** fadeIn & fadeOut, for adding/removing items **/
@keyframes fadeIn {
from {
opacity: 0;
@@ -3996,1352 +3759,16 @@
}
}
-/******************************************
-OVERFLOW DETECTION
-Include this in items to detect:
-// Scroll detection animation
-animation: detect-scroll linear;
-animation-timeline: scroll(self inline);
-******************************************/
-/* Scroll detection keyframe */
-@keyframes detect-scroll {
- from, to {
- --can-scroll: 1;
- }
-}
-
-
-/******************************************************************
-DIRECTORY
-******************************************************************/
-
-/*.directory-list {*/
-/* max-width: var(--alignWide);*/
-/*}*/
-/*.directory-list ul {*/
-/* gap: 0;*/
-/*}*/
-/* .directory-list li.title {*/
-/* margin-left: -1rem;*/
-/* }*/
-
-
-/*.is-directory section {*/
-/* max-width: var(--full);*/
-/* width: calc(var(--full) - 1rem);*/
-/* padding: 0 .5rem;*/
-/*}*/
-/* .is-directory .list-none ul,*/
-/* .is-directory .list-none {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* list-style: none;*/
-/* }*/
-/* .is-directory .list-none ul {*/
-/* width: 80%;*/
-/* }*/
-/* .is-directory .list-none > li + li {*/
-/* border-top: 1px solid var(--base-100);*/
-/* padding-top: 2rem;*/
-/* margin-top: 2rem;*/
-/* }*/
-/* .is-directory .list-none ul li {*/
-/* background-color: var(--base-50);*/
-/* padding: .5rem .25rem;*/
-/* }*/
-/* .is-directory .list-none ul li:nth-of-type(even){*/
-/* background-color: var(--base-100);*/
-/* }*/
-/* .is-directory .list-none h3 {*/
-/* margin: .5rem auto!important;*/
-/* position: sticky;*/
-/* text-align: center;*/
-/* top: 4rem;*/
-/* font-size: 20vw;*/
-/* color: var(--base-200);*/
-/* background-color: var(--base);*/
-/* width: 20%;*/
-/* }*/
-/* @media (min-width:768px){*/
-/* .is-directory section {*/
-/* max-width: var(--alignWide);*/
-/* }*/
-/* .is-directory .list-none,*/
-/* .is-directory .list-none ul {*/
-/* padding-left: 2rem;*/
-/* }*/
-/* .is-directory .list-none h3 {*/
-/* text-align: left;*/
-/* top: 8rem;*/
-/* position: sticky;*/
-/* background-color: transparent;*/
-/* }*/
-/* }*/
-
-/*.directories > .directory {*/
-/* border-radius: 1rem;*/
-/* background-color: var(--base-100);*/
-/* text-align: center;*/
-/* padding: .5rem;*/
-/*}*/
-/*.directories > .directory a .icon {*/
-/* --w: 3rem;*/
-/* margin: 0;*/
-/*}*/
-/*.directory h2 {*/
-/* font-size: var(--large);*/
-/* margin: .5rem 0!important;*/
-/* width: 100%;*/
-/*}*/
-/*@media (min-width: 768px) {*/
-/* .directories {*/
-/* display: grid;*/
-/* grid-template-columns: repeat(3, 1fr);*/
-/* gap: 1rem;*/
-/* }*/
-/*}*/
-
-/*nav.directory li {*/
-/* list-style: none;*/
-/* display: inline-flex;*/
-/*}*/
-/*.grouped-directory {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* list-style: none;*/
-/*}*/
-/* .grouped-directory .grouped-directory {*/
-/* padding-left: 2rem;*/
-/* }*/
-/*.grouped-directory li:not(:has(details)) {*/
-/* padding: .625rem;*/
-/*}*/
-/*.grouped-directory summary a {*/
-/* order: 1;*/
-/* text-transform: none;*/
-/*}*/
-/*.grouped-directory summary::after {*/
-/* order: 2;*/
-/*}*/
-/*.grouped-directory li details[open] > summary,*/
-/*.grouped-directory li details[open] {*/
-/* background-color: var(--base-100);*/
-/*}*/
-
-/*.grouped-directory details[open] details[open] > summary,*/
-/*.grouped-directory details[open] details[open] {*/
-/* background-color: var(--overlay-light);*/
-/*}*/
-
-/*.is-directory h1 {*/
-/* margin-top: 3rem!important;*/
-/*}*/
-/******************************************************************
-NORTHEH
-******************************************************************/
-.menu-items .menu-item {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 0 1rem;
-}
-.menu-items .menu-item:not(.variable) label {
- display: none;
-}
-.menu-items .menu-item .field {
- margin: 0;
- --wrap: nowrap;
-}
-.menu-items .menu-item .has-tooltip {
- position: absolute;
- right: -2.5rem;
-}
-.menu-items .menu-item + .menu-item {
- border-top: 1px solid var(--base-200);
- margin-top: 2rem;
- padding-top: 1rem;
-}
-.menu-items .menu-item .header {
- grid-column: 1/-1;
-}
-.menu-items .menu-item .description {
- grid-column: 1/3;
-}
-.menu-items .menu-item .info {
- grid-column: 3/3;
-}
-.menu-items .menu-item h3 {
- font-size: var(--medium);
- font-weight: normal;
- margin: 0 0 .5rem 0!important;
-}
-
-.menu-items .menu-item .info {
- --gap: 1rem;
-}
-.price > span {
- vertical-align: super;
- font-size: 12px;
-}
-body.menu_item section > h2 {
- display: inline-block;
- max-width: var(--maxWidth);
- width: max-content;
- background-color: var(--base-50);
- color: var(--action-0);
- position: relative;
- z-index: 5;
- padding: 0 1rem;
- margin: var(--mt) auto var(--mb) auto;
-}
-
-.menu-section {
- position: relative;
-}
-.menu-section hr {
- position: absolute;
- width: 100%;
- left: -5%;
- top: 3.5rem;
- border: none;
- background-color: var(--action-100);
- height: 2px;
-}
-
-
-details.menu-item summary.row {
- flex-direction: column;
- align-items: flex-start;
-}
-details.menu-item summary .row {
- width: 100%;
-}
-
-.menu_item h1:first-of-type {
- margin-top: 10vh!important;
-}
-
-@media (min-width: 768px) {
- .menu-section hr {
- width: 120%;
- left: -10%;
- top: 4.25rem;
- }
-
- .menu_item section {
- max-width: var(--maxWidth);
- }
-
- /*details.menu-item summary.row {*/
- /* flex-direction: var(--dir);*/
- /* align-items: var(--justify);*/
- /*}*/
-}
-/**
-TODO: For Legacy
-Triangles Loader
-
-.loading-wrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 2rem 1rem 1rem;
-}
-.loader-wrap {
- height: 75px;
- width: 75px;
-}
-.new-term-toggle:disabled + .loader,
-.loading .loader {
- width: 50px;
- aspect-ratio: 1.154;
- display: grid;
- color: var(--action-0);
- background:
- linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,
- linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,
- linear-gradient(currentColor 0 0) bottom/100% 2px;
- background-repeat: no-repeat;
- transform-origin: 50% 66%;
- animation: l5 4s infinite linear;
-}
-.new-term-toggle:disabled + .loader::before,
-.new-term-toggle:disabled + .loader::after,
-.loading .loader::before,
-.loading .loader::after {
- content: "";
- grid-area: 1/1;
- background: inherit;
- transform-origin: inherit;
- animation: inherit;
-}
-.new-term-toggle:disabled + .loader::after,
-.loading .loader::after {
- animation-duration: 2s;
-}
-@keyframes l5{
- 100% {transform:rotate(1turn)}
-}
- */
-
-/* DONE TO HERE */
-
-
-
-/*dialog .search-wrapper {*/
-/* padding: .5rem;*/
-/*}*/
-
-
-/*.favourite-terms ul {*/
-/* gap: .25rem 1rem;*/
-/* padding: 0;*/
-/*}*/
-/* .favourite-terms label::before,*/
-/* .favourite-terms label::after {*/
-/* display: none;*/
-/* }*/
-/* .favourite-terms label {*/
-/* padding: .25rem .5rem!important;*/
-/* border: 1px solid var(--base-200);*/
-/* color: var(--contrast-200);*/
-/* border-radius: var(--innerRadius);*/
-/* }*/
-/* .favourite-terms :checked + label,*/
-/* .favourite-terms label:hover {*/
-/* border-color: var(--action-0);*/
-/* color: var(--action-0);*/
-/* }*/
-/*.items-container {*/
-/* padding: 0;*/
-/*}*/
-/* .items-container li .children {*/
-/* width: 100%;*/
-/* padding-left: 1rem;*/
-/* }*/
-/*.path button+button::before {*/
-/* content: ' > ';*/
-/* display: inline-block;*/
-/* margin: 0 .5rem;*/
-/*}*/
-/*!** Forms **!*/
-
-
-/*!*.field.time_open,*!*/
-/*!*.field.time_closes,*!*/
-/*!*.field.date_start,*!*/
-/*!*.field.time_start,*!*/
-/*!*.field.time_end {*!*/
-/*!* margin-bottom: 0;*!*/
-/*!*}*!*/
-
-/*!*.field.time_open,*!*/
-/*!*.field.time_closes,*!*/
-/*!*.field.time_start,*!*/
-/*!*.field.time_end {*!*/
-/*!* width: 49%;*!*/
-/*!* display: inline-block;*!*/
-/*!* margin-top: 1rem;*!*/
-/*!*}*!*/
-
-/*[data-h] {*/
-/* border: 0;*/
-/* clip: rect(1px, 1px, 1px, 1px);*/
-/* clip-path: inset(50%);*/
-/* height: 1px;*/
-/* margin: -1px;*/
-/* overflow: hidden;*/
-/* padding: 0;*/
-/* position: absolute !important;*/
-/* width: 1px;*/
-/* word-wrap: normal !important;*/
-/*}*/
-
-/*.checkbox-options {*/
-/* --gap: .5rem 2rem;*/
-/*}*/
-/*.checkbox-options label {*/
-/* flex: unset!important;*/
-/*}*/
-
-/*.radio-options {*/
-/* --gap: .125rem .5rem;*/
-/*}*/
-
-/*.radio-options input:not(.ch) + label::before {*/
-/* display: none!important;*/
-/*}*/
-/*.radio-options input:not(.ch) + label {*/
-/* flex: unset!important;*/
-/* padding: .25rem!important;*/
-/* border-radius: 4px;*/
-/* border: 1px solid var(--base-100);*/
-/* color: var(--contrast-200);*/
-/* transition: var(--transition-color)!important;*/
-/* font-weight: normal;*/
-/* !*width: 40%;*!*/
-/* text-align: center;*/
-/*}*/
-/*.radio-options input:not(.ch) + label:hover,*/
-/*.radio-options input:not(.ch):checked + label {*/
-/* border-color: var(--action-0);*/
-/* color: var(--action-0);*/
-/* transition: var(--transition-color);*/
-/*}*/
-
-
-
-/*!* Style for disabled state *!*/
-
-
-
-/*.date-range {*/
-/* padding: 2rem;*/
-/* border: none;*/
-/* border-radius: var(--innerRadius);*/
-/* background: var(--base);*/
-/* box-shadow: var(--shadow);*/
-/*}*/
-/*.date-range::backdrop {*/
-/* backdrop-filter: blur(5px);*/
-/* background: var(--overlay-medium);*/
-/*}*/
-
-/*.custom-range,*/
-/*.month-picker {*/
-/* --gap: 1rem;*/
-/* margin-bottom: 1rem;*/
-/*}*/
-/*.custom-range input,*/
-/*.month-picker select {*/
-/* padding: .5rem;*/
-/* border: 1px solid var(--base-100);*/
-/* border-radius: var(--innerRadius);*/
-/* background: var(--base-200);*/
-/* color: var(--contrast);*/
-/* font: inherit;*/
-/*}*/
-/*.custom-range input:focus,*/
-/*.month-picker select:focus {*/
-/* outline: none;*/
-/* border-color: var(--action-0);*/
-/*}*/
-/*!** Shop Page **!*/
-/*.shop header {*/
-/* max-width: var(--full);*/
-/*}*/
-/*.shop header img {*/
-/* width: 100%;*/
-/* height: auto;*/
-/*}*/
-/*.shop header h1 {*/
-/* margin-bottom: .5em;*/
-/*}*/
-/*.ratings {*/
-/* margin: 0;*/
-/*}*/
-/*!** Bio Sections **!*/
-/*.bio-info {*/
-/* max-width: var(--alignWide);*/
-/* padding: .25em;*/
-/* border-radius: var(--outerRadius);*/
-/* font-size: var(--medium);*/
-/* line-height: 1.5;*/
-/*}*/
-/*.bio-info section {*/
-/* margin: 4rem 0;*/
-/*}*/
-/*.shop .column,*/
-/*.bio-info .column {*/
-/* --justify: center;*/
-/*}*/
-/*.bio-info[open] {*/
-/* background-color: var(--base-100);*/
-/*}*/
-/*.bio-info summary {*/
-/* padding: .25rem;*/
-/* position: relative;*/
-/* border-radius: var(--innerRadius);*/
-/*}*/
-/*.bio-info[open] summary {*/
-/* background-color: var(--base-50);*/
-/* margin-bottom: 1rem;*/
-/*}*/
-/*.bio-info > div:not(.columns) {*/
-/* margin: 4rem 0;*/
-/* padding: 0 1rem;*/
-/*}*/
-/*.bio-info h2 {*/
-/* margin: 0!important;*/
-/* font-size: var(--medium);*/
-/* font-family: var(--body);*/
-/* font-weight: var(--bWeight);*/
-/*}*/
-
-/*.bio-info h3 {*/
-/* margin: 1em 0!important;*/
-/* font-size: var(--medium);*/
-/*}*/
-/*.bio-info figure {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/*}*/
-/*.bio-info img {*/
-/* width: 100%;*/
-/* height: auto;*/
-/* aspect-ratio: 5/4;*/
-/* object-fit: cover;*/
-/*}*/
-
-/* #contact {*/
-/* max-width: var(--alignWide);*/
-/* }*/
-/* #contact h2,*/
-/* section.inline h2 {*/
-/* font-size: var(--medium);*/
-/* font-weight: var(--bWeight);*/
-/* margin: 0 0 .5em 0!important;*/
-/* white-space: nowrap;*/
-/* }*/
-/*ul.contact {*/
-/* list-style: none;*/
-/* display: inline-flex;*/
-/* justify-content: flex-start;*/
-/* flex-wrap: wrap;*/
-/* align-items: center;*/
-/* gap: 1rem;*/
-/* margin: 0;*/
-/* padding: 0;*/
-/*}*/
-/* ul.contact + ul.contact {*/
-/* margin-left: 1rem;*/
-/* }*/
-/* ul.contact a{*/
-/* color: var(--contrast);*/
-/* }*/
-/* ul.contact a:hover {*/
-/* color: var(--action-0);*/
-/* }*/
-
-/*.term-list {*/
-/* display: inline-flex;*/
-/* flex-wrap: wrap;*/
-/* list-style: none;*/
-/* text-transform: lowercase;*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* gap: 0 .5em;*/
-/*}*/
-/*p.loading {*/
-/* text-align: center;*/
-/* margin: 3rem 0;*/
-/*}*/
-/*
-/*.term-list li {*/
-/* padding: 2px 6px;*/
-/*}*/
-
-/*ul.simple-list {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* list-style: none;*/
-/*}*/
-/*ul.reviews li + li{*/
-/* margin-top: 2rem;*/
-/*}*/
-
-
-
-/*!*!* Status notification *!*/
-/*!*.status-notification {*!*/
-/*!* position: fixed;*!*/
-/*!* bottom: 20px;*!*/
-/*!* left: 80px; !* Position to the right of the panel *!*!*/
-/*!* width: 300px;*!*/
-/*!* max-width: calc(100vw - 100px);*!*/
-/*!* border-radius: 8px;*!*/
-/*!* padding: 15px;*!*/
-/*!* background: #323232;*!*/
-/*!* color: white;*!*/
-/*!* transform: translateY(20px);*!*/
-/*!* opacity: 0;*!*/
-/*!* transition: transform .3s, opacity .3s;*!*/
-/*!* z-index: 10000;*!*/
-/*!* box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*/
-/*!* pointer-events: none;*!*/
-/*!*}*!*/
-
-/*!*.status-notification.active {*!*/
-/*!* transform: translateY(0);*!*/
-/*!* opacity: 1;*!*/
-/*!* pointer-events: auto;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .title {*!*/
-/*!* font-weight: 600;*!*/
-/*!* margin-bottom: 5px;*!*/
-/*!* font-size: 15px;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .message {*!*/
-/*!* margin-bottom: 10px;*!*/
-/*!* font-size: 14px;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .actions {*!*/
-/*!* display: flex;*!*/
-/*!* justify-content: flex-end;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .actions button {*!*/
-/*!* padding: 6px 12px;*!*/
-/*!* background: rgba(255, 255, 255, .2);*!*/
-/*!* border: none;*!*/
-/*!* border-radius: 4px;*!*/
-/*!* color: white;*!*/
-/*!* cursor: pointer;*!*/
-/*!* font-size: 13px;*!*/
-/*!* transition: background .2s;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .actions button:hover {*!*/
-/*!* background: rgba(255, 255, 255, .3);*!*/
-/*!*}*!*/
-
-/*!* Progress containers in notifications *!*/
-/*.progress-container {*/
-/* margin-top: 15px;*/
-/* background: rgba(255, 255, 255, .1);*/
-/* border-radius: 4px;*/
-/* padding: 10px;*/
-/* transition: all .3s;*/
-/*}*/
-
-/*.progress-container.complete {*/
-/* opacity: .5;*/
-/*}*/
-
-/*!* Collapsed state - just show the toggle button *!*/
-
-
-
-
-
-
-
-/*!***/
-/*Response stuff*/
-/* *!*/
-
-/*.columns {*/
-/* --wrap: nowrap;*/
-/*}*/
-/* .columns.stack-small {*/
-/* --wrap: wrap;*/
-/* }*/
-/* @media (min-width: 768px){*/
-/* .columns.stack-small {*/
-/* --wrap: nowrap;*/
-/* }*/
-/* }*/
-/*.column {*/
-/* width: 100%;*/
-/* padding: 1rem 0;*/
-/*}*/
-
-/*.width-300 {*/
-/* width: 300px!important;*/
-/* 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);
-}
-
-
-/*!***/
-/*Circular Loader*/
-/* *!*/
-/*!*.new-term-toggle:disabled + .loader,*!*/
-/*!*.loading .loader {*!*/
-/*!* width: 50px;*!*/
-/*!* aspect-ratio: 1;*!*/
-/*!* display: grid;*!*/
-/*!* border: 4px solid #0000;*!*/
-/*!* border-radius: 50%;*!*/
-/*!* border-right-color: var(--action-0);*!*/
-/*!* animation: l15 1s infinite linear;*!*/
-/*!*}*!*/
-/*!*.new-term-toggle:disabled + .loader::before,*!*/
-/*!*.new-term-toggle:disabled + .loader::after,*!*/
-/*!*.loading .loader::before,*!*/
-/*!*.loading .loader::after {*!*/
-/*!* content: "";*!*/
-/*!* grid-area: 1/1;*!*/
-/*!* margin: 2px;*!*/
-/*!* border: inherit;*!*/
-/*!* border-radius: 50%;*!*/
-/*!* animation: l15 2s infinite;*!*/
-/*!*}*!*/
-/*!*.new-term-toggle:disabled + .loader::after,*!*/
-/*!*.loading .loader::after {*!*/
-/*!* margin: 8px;*!*/
-/*!* animation-duration: 3s;*!*/
-/*!*}*!*/
-/*!*@keyframes l15{*!*/
-/*!* 100%{transform: rotate(1turn)}*!*/
-/*!*}*!*/
-
-
-
-/*!* High contrast mode support *!*/
-/*@media (forced-colors: active) {*/
-/* .feed-item {*/
-/* border: 1px solid CanvasText;*/
-/* }*/
-
-/* button,*/
-/* [role="button"] {*/
-/* border: 1px solid ButtonText;*/
-/* }*/
-
-/* button.favourite.favourited {*/
-/* background-color: Highlight;*/
-/* color: HighlightText;*/
-/* }*/
-/*}*/
-
-
-/*!** TODO: Verify **!*/
-
-input[type=time],
-input[type=datetime-local],
-input[type=date] {
- padding: .5rem;
- border: 1px solid var(--contrast-200);
- border-radius: 4px;
- font-size: 14px;
- min-width: 180px;
- background: var(--base);
- color: var(--contrast);
- cursor: pointer;
- transition: border-color .2s ease;
-}
-
-.field-input-wrapper input[type=time]:focus,
-.field-input-wrapper input[type=datetime-local]:focus,
-.field-input-wrapper input[type=date]:focus,
-.time-wrapper input[type=time]:focus,
-.datetime-wrapper input[type=datetime-local]:focus,
-.date-wrapper input[type=date]:focus {
- border-color: var(--action-0);
- box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
-}
-
-/* Icon styling in form fields */
-.field-input-wrapper .icon,
-.time-wrapper .icon,
-.datetime-wrapper .icon,
-.date-wrapper .icon {
- width: 18px;
- height: 18px;
- background-color: var(--contrast);
- opacity: .7;
-}
-
-/*!* Required field asterisk *!*/
-/*.time-wrapper input[required],*/
-/*.datetime-wrapper input[required],*/
-/*.date-wrapper input[required] {*/
-/* border-left: 3px solid #dc3232;*/
-/*}*/
-
-/*!* Invalid field styling *!*/
-/*.time-wrapper input:invalid,*/
-/*.datetime-wrapper input:invalid,*/
-/*.date-wrapper input:invalid {*/
-/* border-color: #dc3232;*/
-/* background-color: #fef7f7;*/
-/*}*/
-
-/*!* Frontend Display *!*/
-/*.time-field-display,*/
-/*.datetime-field-display,*/
-/*.date-field-display {*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/* padding: .25rem 0;*/
-/*}*/
-
-/*.time-field-display svg,*/
-/*.datetime-field-display svg,*/
-/*.date-field-display svg {*/
-/* width: 16px;*/
-/* height: 16px;*/
-/* color: #0073aa;*/
-/* flex-shrink: 0;*/
-/*}*/
-
-/*.time-value,*/
-/*.datetime-value,*/
-/*.date-value {*/
-/* font-weight: 500;*/
-/* color: #333;*/
-/*}*/
-
-/*!* Set and Checkbox Field Display *!*/
-/*.set-field-display {*/
-/* --wrap: wrap;*/
-/*}*/
-
-/*.set-label,*/
-/*.checkbox-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/*}*/
-
-/*.set-item {*/
-/* background: #f0f0f1;*/
-/* padding: .25rem .5rem;*/
-/* border-radius: 3px;*/
-/* font-size: .9em;*/
-/* border: 1px solid #ddd;*/
-/*}*/
-
-/*!* Radio and Select Field Display *!*/
-/*.radio-field-display,*/
-/*.select-field-display {*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.radio-label,*/
-/*.select-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/*}*/
-
-/*.radio-value,*/
-/*.select-value {*/
-/* background: #f8f9fa;*/
-/* padding: .25rem .5rem;*/
-/* border-radius: 3px;*/
-/* border: 1px solid #dee2e6;*/
-/*}*/
-
-/*!* True/False Field Display *!*/
-/*.true-false-display {*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.true-false-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/*}*/
-
-/*.true-value {*/
-/* color: var(--success);*/
-/* font-weight: 600;*/
-/*}*/
-
-/*.false-value {*/
-/* color: var(--error);*/
-/* font-weight: 600;*/
-/*}*/
-
-/*!* Group Field Styling *!*/
-/*.group-field {*/
-/* border: 1px solid #e0e0e0;*/
-/* border-radius: 6px;*/
-/* padding: 1rem;*/
-/* margin: 1rem 0;*/
-/* background: #fafafa;*/
-/*}*/
-
-/*.group-label {*/
-/* font-size: 1.1em;*/
-/* font-weight: 600;*/
-/* color: #333;*/
-/* margin: 0 0 1rem 0;*/
-/* padding-bottom: .5rem;*/
-/* border-bottom: 1px solid #e0e0e0;*/
-/*}*/
-
-/*.group-content {*/
-/* --gap: .75rem;*/
-/*}*/
-
-/*.group-item {*/
-/* padding: .5rem 0;*/
-/* border-bottom: 1px solid #f0f0f0;*/
-/*}*/
-
-/*.group-item:last-child {*/
-/* border-bottom: none;*/
-/*}*/
-
-/*.subfield-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/* margin-right: .5rem;*/
-/*}*/
-
-/*!* Responsive Design *!*/
-/*@media (max-width: 768px) {*/
-/* .time-wrapper input[type="time"],*/
-/* .datetime-wrapper input[type="datetime-local"],*/
-/* .date-wrapper input[type="date"] {*/
-/* min-width: 150px;*/
-/* font-size: 16px; !* Prevents zoom on iOS *!*/
-/* }*/
-
-/* .set-field-display,*/
-/* .checkbox-field-display {*/
-/* flex-direction: column;*/
-/* align-items: flex-start;*/
-/* }*/
-
-/* .group-content {*/
-/* gap: .5rem;*/
-/* }*/
-/*}*/
-
-legend {
- padding: 0 1rem;
-}
-.abs {
- position: absolute;
-}
-.top {
- top: 0;
- right: 0;
- left: 0;
-}
-.top-right {
- top: 0;
- right: 0;
-}
-.top-left {
- top: 0;
- left: 0;
-}
-
-.btm {
- bottom: 0;
- left: 0;
- right: 0;
-}
-.btm-right {
- bottom: 0;
- right: 0;
-}
-.btm-left {
- bottom: 0;
- left: 0;
-}
-.edges {
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
-}
-
-
-
-/*********************** REFERRAL SYSTEM ***********************/
-.referral-widget {
- background: #fff;
- border: 1px solid #ddd;
- border-radius: 8px;
- padding: 24px;
- margin: 20px 0;
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.referral-header {
- text-align: center;
- margin-bottom: 20px;
-}
-
-.referral-header h3 {
- margin: 0 0 8px 0;
- color: #2271b1;
-}
-
-.referral-header p {
- margin: 0;
- color: #666;
- font-size: 14px;
-}
-
-/* Share Widget Styles */
-.referral-link-section {
- margin-bottom: 20px;
-}
-
-.referral-link-section label {
- display: block;
- font-weight: 600;
- margin-bottom: 8px;
- color: #333;
-}
-
-.link-copy-wrapper {
- display: flex;
- gap: 8px;
-}
-
-.link-copy-wrapper input {
- flex: 1;
- padding: 10px 12px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-family: monospace;
- font-size: 13px;
- background: #f9f9f9;
-}
-
-.copy-link-btn {
- padding: 10px 20px;
- background: #2271b1;
- color: #fff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 600;
- white-space: nowrap;
- transition: background 0.2s;
-}
-
-.copy-link-btn:hover {
- background: #135e96;
-}
-
-.referral-code-display {
- margin: 8px 0 0 0;
- font-size: 13px;
- color: #666;
-}
-
-.referral-stats {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- gap: 16px;
- margin-bottom: 20px;
- padding: 16px;
- background: #f8f9fa;
- border-radius: 6px;
-}
-
-.stat-item {
- text-align: center;
-}
-
-.stat-value {
- display: block;
- font-size: 24px;
- font-weight: bold;
- color: #2271b1;
-}
-
-.stat-label {
- display: block;
- font-size: 12px;
- color: #666;
- margin-top: 4px;
-}
-
-.share-buttons {
- display: flex;
- gap: 10px;
- justify-content: center;
- flex-wrap: wrap;
-}
-
-.share-btn {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- padding: 10px 16px;
- border: 1px solid #ddd;
- border-radius: 4px;
- text-decoration: none;
- color: #333;
- font-size: 14px;
- font-weight: 500;
- transition: all 0.2s;
-}
-
-.share-btn:hover {
- background: #f5f5f5;
- border-color: #999;
-}
-
-/* Validation Widget Styles */
-.form-group {
- margin-bottom: 16px;
-}
-
-.form-group label {
- display: block;
- font-weight: 600;
- margin-bottom: 8px;
- color: #333;
-}
-
-.input-button-wrapper {
- display: flex;
- gap: 8px;
-}
-
-.input-button-wrapper input {
- flex: 1;
- padding: 12px 16px;
- border: 2px solid #ddd;
- border-radius: 4px;
- font-size: 16px;
- font-family: monospace;
- font-weight: 600;
- text-transform: uppercase;
- transition: border-color 0.2s;
-}
-
-.input-button-wrapper input:focus {
- outline: none;
- border-color: #2271b1;
-}
-
-.validate-btn {
- padding: 12px 24px;
- background: #2271b1;
- color: #fff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 600;
- white-space: nowrap;
- transition: background 0.2s;
-}
-
-.validate-btn:hover {
- background: #135e96;
-}
-
-.validate-btn:disabled {
- background: #ccc;
- cursor: not-allowed;
-}
-
-.helper-text {
- margin: 8px 0 0 0;
- font-size: 13px;
- color: #666;
-}
-
-.helper-text a {
- color: #2271b1;
- text-decoration: none;
-}
-
-.helper-text a:hover {
- text-decoration: underline;
-}
-
-.message {
- padding: 12px 16px;
- border-radius: 4px;
- margin-top: 16px;
- font-size: 14px;
-}
-
-.message.success {
- background: #d4edda;
- color: #155724;
- border: 1px solid #c3e6cb;
-}
-
-.message.error {
- background: #f8d7da;
- color: #721c24;
- border: 1px solid #f5c6cb;
-}
-
-/* Success State Styles */
-.referral-success-state {
- text-align: center;
-}
-
-.success-icon {
- width: 80px;
- height: 80px;
- margin: 0 auto 20px;
- background: #28a745;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- font-size: 40px;
-}
-
-.success-content h3 {
- color: #28a745;
- margin: 0 0 12px 0;
-}
-
-.reward-highlight {
- background: #e7f5ff;
- padding: 20px;
- border-radius: 6px;
- margin: 20px 0;
- border-left: 4px solid #2271b1;
-}
-
-.reward-highlight strong {
- color: #2271b1;
- font-size: 18px;
-}
-
-.cta-button {
- display: inline-block;
- padding: 14px 32px;
- background: #2271b1;
- color: #fff;
- text-decoration: none;
- border-radius: 4px;
- font-weight: 600;
- margin-top: 16px;
- transition: background 0.2s;
-}
-
-.cta-button:hover {
- background: #135e96;
-}
-
-.referred-by {
- margin-top: 16px;
- padding-top: 16px;
- border-top: 1px solid #ddd;
- font-size: 13px;
- color: #666;
-}
-
-.loading-spinner {
- display: inline-block;
- width: 16px;
- height: 16px;
- border: 2px solid #f3f3f3;
- border-top: 2px solid #2271b1;
- border-radius: 50%;
- animation: spin 1s linear infinite;
- margin-left: 8px;
- vertical-align: middle;
-}
-
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
-/* Responsive */
-@media (max-width: 600px) {
- .input-button-wrapper {
- flex-direction: column;
+@keyframes dance {
+ 0%, 100% {
+ transform: rotate(-5deg) scale(1);
}
-
- .validate-btn {
- width: 100%;
+ 50% {
+ transform: rotate(5deg) scale(1.1);
}
-
- .link-copy-wrapper {
- flex-direction: column;
- }
-
- .copy-link-btn {
- width: 100%;
- }
-}
-
-.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
+}
\ No newline at end of file
diff --git a/allBackup.css b/allBackup.css
new file mode 100644
index 0000000..2b5ab1a
--- /dev/null
+++ b/allBackup.css
@@ -0,0 +1,6012 @@
+/*!
+Theme Name: Jake Van Base Theme
+Theme URI: https://jakevan.ca
+Author: Jake Vanderwerf
+Author URI: https://jakevan.ca
+Description: A base theme for Jake Van clients
+Requires at least: 6.4
+Tested up to: 6.4
+Requires PHP: 7.0
+Version: 1.5
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: jv
+*/
+/*************************************************************
+VARIABLES
+*************************************************************/
+:root{
+ /* Layout */
+ --narrow: min(500px, 50vw);
+ --maxWidth: min(768px, 65vw);
+ --wider: min(900px, 75vw);
+ --alignWide: min(1024px, 90vw);
+ --alignMed: min(962px, 82.5vw);
+ --full: 100vw;
+ /* Margin */
+ --mr: auto;
+ --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;
+ --doubleHeight: 8rem;
+ --offHeight: 5rem;
+ --offTop: var(--height);
+ --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);
+ --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='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+ --dashed-action: 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='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+ --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+ --heading: 'Aleo', var(--font-base);
+ --body: 'Josefin Slab', var(--font-base);
+ --hWeight: 900;
+ --hlight: 400;
+ --bWeight: 400;
+ --bBold: 700;
+ --bLight: 200;
+
+ /* 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/
+ For DUOTONE: https://cssduotone.com/
+ */
+ --mixBlendMode: darken;
+ --coverBlend: overlay;
+ --coverIndex: 2;
+ --light-0: #fafafa;
+ --light-50: #fcfbfb;
+ --light-100: #f1eded;
+ --light-200: #e6dfdf;
+ --dark-0: #201313;
+ --dark-50: #261717;
+ --dark-100: #2d1b1b;
+ --dark-200: #331e1e;
+ --action-0: #B7332E;
+ --action-50: #a32d29;
+ --action-100: #8e2824;
+ --action-200: #7a221f;
+ --secondary-0: #E8A737;
+ --secondary-50: #e59d20;
+ --secondary-100: #d48f18;
+ --secondary-200: #bd7f16;
+
+ --success: #22C55E;
+ --successBack: #d4edda;
+ --successText:#155724;
+ --warning: #E8A737;
+ --error: #EF4444;
+ --errorBack: #f8d7da;
+ --errorText: #721c24;
+ --action-contrast: var(--light-0);
+ --secondary-contrast: var(--light-0);
+ --light-rgb: 250,250,250;
+ --dark-rgb: 16,4,4;
+ --action-rgb: 183,51,46;
+ --secondary-rgb: 232,167,55;
+
+ --rgba-subtle: rgba(var(--c),.05);
+ --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;
+ --z-topper: 1000;
+ --zz-top: 999999;
+ --z-above: 9999999;
+ /* Overlays */
+ --rgb-subtle: .05;
+ --rgb-subtle-hover: .15;
+ --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 */
+ --inset: inset 0 0 4px 1px rgba(var(--contrast-rgb),var(--rgb-medium));
+ --shadow: rgba(var(--dark-rgb),.45) 0 0 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) 0 25px 20px -20px;
+ --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
+ --shadow-none: transparent 0 0 0;
+ /* 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);
+
+ /**** 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 **!*/
+ /*--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;
+ --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: #cb3933;
+ --action-100: #d14c47;
+ --action-200: #d6605c;
+ --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);
+ --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) 0 0 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) 0 25px 20px -20px;
+ --subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
+
+ --successBack: #155724;
+ --successText:#d4edda;
+ --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");*/
+
+ /*--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/ */
+@layer reset {
+ html {
+ color-scheme: light dark;
+ font:
+ clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
+ sans-serif;
+ tab-size: 2;
+ hanging-punctuation: first allow-end last;
+ word-break: break-word;
+ }
+
+ body {
+ margin: 0;
+ /*padding: 2rem;*/
+ /*@media (width < 500px) {*/
+ /* padding: 1rem;*/
+ /*}*/
+ }
+
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+
+ h1,
+ h2 {
+ font-weight: 900;
+ letter-spacing: -0.02rem;
+ }
+ h1,
+ h2,
+ h3 {
+ line-height: 1.1;
+ }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 /* FUTURE :heading */ {
+ text-wrap: balance;
+ margin-block-start: 0;
+ }
+
+ p,
+ li,
+ dd {
+ text-wrap: pretty;
+ max-inline-size: 88ch;
+ }
+
+ a {
+ color: oklch(0.68 0.17 228);
+ text-underline-offset: 2px;
+ &:not(:is(:hover, :focus)) {
+ text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
+ }
+ }
+
+ sub,
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+ sub {
+ inset-block-end: -0.25em;
+ }
+ sup {
+ inset-block-start: -0.5em;
+ }
+
+ ul,
+ ol,
+ dl {
+ margin: 0;
+ padding: 0;
+ list-style: inside;
+ ul,
+ ol,
+ dl {
+ padding-inline-start: 2ch;
+ }
+ }
+ li {
+ padding-bottom: .5rem;
+ }
+
+ img,
+ video,
+ iframe {
+ display: block;
+ max-inline-size: 100%;
+ block-size: auto;
+ border-style: none;
+ }
+
+ figure {
+ inline-size: fit-content;
+ margin-inline: auto;
+ }
+ figcaption {
+ contain: inline-size;
+ font-size: 90%;
+ }
+
+ input,
+ select,
+ textarea,
+ button {
+ font: inherit;
+ /* FUTURE: appearance: base; */
+ }
+ label {
+ display: block;
+ }
+ input:not(
+ :where(
+ [type="submit"],
+ [type="checkbox"],
+ [type="radio"],
+ [type="button"],
+ [type="reset"]
+ )
+ ) {
+ inline-size: 100%;
+ }
+ button,
+ input:where(
+ [type="submit"],
+ [type="reset"],
+ [type="button"]
+ ) {
+ background: CanvasText;
+ color: Canvas;
+ border: 1px solid transparent;
+ }
+ textarea {
+ field-sizing: content;
+ min-block-size: 5lh;
+ inline-size: 100%;
+ max-inline-size: 100%;
+ }
+
+ pre,
+ code,
+ kbd,
+ samp {
+ font-family: ui-monospace, SFMono-Regular, monospace;
+ }
+
+ svg {
+ fill: currentColor;
+ }
+
+ [aria-disabled="true" i],
+ [disabled] {
+ cursor: not-allowed;
+ }
+ [hidden] {
+ display: none !important;
+ }
+ [disabled],
+ label:has(input[disabled]) {
+ opacity: 0.5;
+
+ [disabled] {
+ opacity: 1;
+ }
+ }
+
+ pre {
+ white-space: pre-wrap;
+ background: CanvasText;
+ color: Canvas;
+ padding: 1.5rem;
+ }
+
+ hr {
+ border-style: solid;
+ border-width: 1px 0 0;
+ color: inherit;
+ height: 0;
+ overflow: visible;
+ margin-block: 2.5rem;
+ }
+
+ :target {
+ scroll-margin: 3rlh;
+ }
+
+ table {
+ caption-side: bottom;
+ border-collapse: collapse;
+ td {
+ font-size: 90%;
+ }
+ td,
+ th {
+ word-break: normal;
+ border: 1px solid gray;
+ padding: 0.5rem;
+ }
+ }
+ [role="region"][aria-labelledby][tabindex] {
+ overflow: auto;
+ }
+ caption {
+ font-size: 90%;
+ }
+
+ .screen-reader-text:not(:focus):not(:active) {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ }
+ :focus-visible {
+ outline-offset: 2px;
+ }
+
+ @media (prefers-reduced-motion: no-preference) {
+ @view-transition {
+ navigation: auto;
+ }
+
+ html {
+ interpolate-size: allow-keywords;
+ &:focus-within {
+ scroll-behavior: smooth;
+ }
+ }
+ }
+}
+/***************************************************************
+SCROLLBAR
+***************************************************************/
+* {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+
+/* For WebKit browsers (Chrome, Safari, etc.) */
+::-webkit-scrollbar {
+ width: var(--scrollbar-width);
+ height: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb-color);
+ border-radius: var(--scrollbar-border-radius);
+ border: var(--scrollbar-thumb-border);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: var(--scrollbar-thumb-hover-color);
+}
+
+
+body{
+ background-color: var(--base-50);
+ color: var(--contrast);
+ max-width: 100vw;
+ overflow-x: hidden;
+ margin: 0;
+ font-family: var(--body);
+ font-weight: var(--bWeight);
+ font-size: var(--medium);
+ line-height: 1.4;
+ position: relative;
+}
+body b,
+body strong {
+ font-weight: var(--bBold);
+}
+
+
+*:target {
+ scroll-snap-margin-top: max(6rem, 20vh);
+ scroll-margin-top: max(6rem, 20vh);
+ outline: double var(--action-0);
+ border-radius: var(--outerRadius);
+ padding: var(--outerPadding);
+}
+body.menu_item *:target h2 {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+body,
+body * {
+ transition: var(--transition-color)
+}
+
+.home > section:first-of-type,
+.home main {
+ margin-top: 0;
+}
+/**************************************************************
+UTILITY CLASSES
+**************************************************************/
+body:has(aside.expanded),
+body:has(nav.open),
+body:has(dialog[open]),
+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] {
+ display: none!important;
+}
+
+@media (max-width: 767px){
+ .hide-small {
+ display: none;
+ }
+}
+
+.width-50 {
+ width: 100%;
+}
+.width-25 {
+ width: 50%;
+}
+.width-75 {
+ width: 100%;
+}
+.w-full,
+.width-full {
+ width: 100%;
+}
+
+
+@media (min-width: 768px){
+ .buttons li.width-50,
+ .width-50 {
+ width: calc(50% - .3em);
+ }
+ .width-25 {
+ width: calc(25% - .3em);
+ }
+ .width-75 {
+ width: calc(75% - .3em);
+ }
+}
+
+.row:not(.icon),
+.col {
+ --align: center;
+ --justify: center;
+ display: flex;
+ justify-content: var(--justify);
+ align-items: var(--align);
+ gap: var(--gap);
+ flex-wrap: var(--wrap);
+ flex-direction: var(--dir);
+}
+.col {
+ --dir: column;
+}
+.row:not(.icon) {
+ --dir: row;
+}
+.col.rev {
+ --dir: column-reverse;
+}
+.row.rev {
+ --dir: row-reverse;
+}
+
+.nowrap {
+ --wrap: nowrap;
+}
+.col.a-start,
+.row.start {
+ --justify: flex-start;
+}
+
+.col.a-end,
+.row.end {
+ --justify: flex-end;
+}
+.col.btw,
+.row.btw {
+ --justify: space-between;
+ width: 100%;
+}
+.col.even,
+.row.even {
+ --justify: space-evenly;
+}
+
+.col.start,
+.row.a-start {
+ --align: flex-start;
+}
+
+.col.end,
+.row.a-end {
+ --align: flex-end;
+}
+
+.abs {
+ position: absolute;
+}
+*:has(>.abs) {
+ position: relative;
+}
+.hidden {
+ transform: scale(0);
+ max-width: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: var(--transition-transform), var(--transition-size);
+}
+
+.visible {
+ transform: scale(1);
+ max-width: 100%;
+ max-height: 100%;
+ transition: var(--transition-transform), var(--transition-size);
+}
+
+/******************************************************************
+THEME SWITCHER & TOGGLE
+******************************************************************/
+.toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ position: absolute;
+ left: var(--offScreen);
+}
+
+.toggle-switch .slider {
+ position: relative;
+ width: 2rem;
+ height: 1rem;
+ background-color: var(--base-200);
+ border-radius: .75rem;
+ overflow: hidden;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ border: 4px solid transparent;
+ transition: .3s;
+ box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
+ cursor: pointer;
+ margin: 5px;
+}
+
+.toggle-switch .slider::before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top:0;
+ left: 0;
+ background-color: var(--base);
+ transform: translateX(-1rem);
+ border-radius: .75rem;
+ transition: .3s;
+ box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
+}
+
+.toggle-switch input:checked ~ .slider::before {
+ transform: translateX(1rem);
+ box-shadow: 0 0 .25rem 3px rgb(0, 0, 0, 0.25);
+}
+
+.toggle-switch input:checked ~ .slider {
+ background-color: var(--action-0);
+}
+
+.toggle-switch input:active ~ .slider::before {
+ transform: translate(0);
+}
+
+
+/*.theme-switcher {*/
+/* position: absolute;*/
+/* opacity: 0;*/
+/* width: 0;*/
+/* height: 0;*/
+/*}*/
+#theme-switch {
+ z-index: 99;
+ margin: 0;
+ --wrap: nowrap;
+ --gap: 1rem;
+}
+#theme-switch .slider {
+ width: 3rem;
+ height: 1.5rem;
+}
+#theme-switch .slider::before {
+ transform: translateX(-1.5rem);
+}
+#theme-switch input:checked ~ .slider::before {
+ transform: translateX(1.5rem);
+}
+
+
+/*#theme-switch,*/
+/*.toggle-switch {*/
+/* --wrap: nowrap;*/
+/* cursor: pointer;*/
+/*}*/
+/*#theme-switch,*/
+/*.toggle-switch input[type=checkbox] {*/
+/* --h: 2rem;*/
+/* width: calc(var(--h) * 2);*/
+/* height: var(--h);*/
+/* margin: 0 2rem 0 0;*/
+/* left: 0;*/
+/* appearance:none;*/
+/* background: var(--base-200);*/
+/* border: 1px solid var(--base-50);*/
+/* border-radius: var(--h);*/
+/* cursor: pointer;*/
+/* transition: all .3s ease;*/
+/* opacity: 1;*/
+/*}*/
+
+/*.toggle-switch input[type=checkbox] {*/
+/* position: relative;*/
+/*}*/
+/*.toggle-switch {*/
+/* position: relative;*/
+/*}*/
+
+@media (max-width: 600px) {
+ #theme-switch {
+ left: 1rem;
+ }
+ .wp-site-blocks > header {
+ padding: 0!important;
+ }
+}
+
+/* Icon wrapper styling */
+/*#theme-switch .icon {*/
+/* --w: 1em;*/
+/* position: relative;*/
+/* top: 0;*/
+/* margin: 0 .25em;*/
+/* color: var(--contrast-200);*/
+/* z-index: 2;*/
+/* transform: translateX(0);*/
+/*}*/
+
+
+/*#theme-switcher:not(:checked) ~ .sun-dim,*/
+/*#theme-switcher:checked ~ .moon {*/
+/* --w: 1.5em;*/
+/* color: var(--contrast);*/
+/*}*/
+
+/*#theme-switcher:not(:checked) ~ .moon,*/
+/*#theme-switcher:checked ~ .sun-dim {*/
+/* top: -.17rem;*/
+/*}*/
+/* #theme-switcher:not(:checked) ~ .sun-dim {*/
+/* color: var(--secondary-0);*/
+/* transform: translate(-2px, 2px);*/
+/* }*/
+/* #theme-switcher:checked ~ .moon {*/
+/* transform: translate(4px, 4px);*/
+/* }*/
+
+/*#theme-switch span,*/
+/*.toggle-switch input[type=checkbox]::before {*/
+/* --m: 2px;*/
+/* content: "";*/
+/* position: absolute;*/
+/* top: var(--m);*/
+/* left: var(--m);*/
+/* width: calc(var(--h) - (var(--m) * 2));*/
+/* height: calc(var(--h) - var(--m) * 2);*/
+/* border: 1px solid rgba(var(--contrast-rgb), .2);*/
+/* border-bottom: 3px solid var(--contrast-200);*/
+/* background: var(--base-50);*/
+/* border-radius: 50%;*/
+/* z-index: 1;*/
+/* transform: rotate(360deg);*/
+/* transition: transform var(--transition-base),*/
+/* left var(--transition-base),*/
+/* top var(--transition-base),*/
+/* height var(--transition-base);*/
+/*}*/
+/* #theme-switch input:checked ~ span,*/
+/* .toggle-switch input[type=checkbox]:checked::before {*/
+/* left: calc(100% - (var(--h) - var(--m)));*/
+/* transform: rotate(-180deg);*/
+/* transition: transform var(--transition-base), left var(--transition-base);*/
+/* }*/
+/* .toggle-switch input[type=checkbox]:checked {*/
+/* background: var(--action-0);*/
+/* }*/
+
+/*!* Focus States *!*/
+/*.theme-switch:focus-visible + label {*/
+/* outline: 2px solid var(--action-0);*/
+/* outline-offset: 2px;*/
+/*}*/
+
+/*!* Icon Animations *!*/
+/*#theme-switch .icon {*/
+/* transition:*/
+/* transform var(--transition-base),*/
+/* width var(--transition-base),*/
+/* height var(--transition-base),*/
+/* top var(--transition-base),*/
+/* color var(--transition-base);*/
+/*}*/
+
+/*#theme-switcher:not(:checked) ~ .icon.dark,*/
+/*#theme-switcher:checked ~ .icon.light {*/
+/* transform: rotate(360deg);*/
+/* color: var(--contrast-200);*/
+/*}*/
+/*#theme-switcher:not(:checked) ~ .icon.light,*/
+/*#theme-switcher:checked ~ .icon.dark {*/
+/* transform: rotate(-360deg);*/
+/* color: var(--contrast);*/
+/*}*/
+
+/*!* Hover Effects *!*/
+/*#theme-switch:hover span {*/
+/* background-color: var(--base-100);*/
+/*}*/
+
+
+/*#theme-switch:hover .icon {*/
+/* color: var(--action-50);*/
+/*}*/
+
+/*!* Active State *!*/
+/*#theme-switch:active span {*/
+/* transform: scale(.97);*/
+/*}*/
+
+/***********************************************************
+SMOOTH SCROLLING
+***********************************************************/
+html {
+ overflow-x: hidden;
+ scroll-behavior: smooth;
+}
+
+@media(prefers-reduced-motion){
+ html {
+ scroll-behavior: unset;
+ }
+ * {
+ transition: none!important;
+ animation: none!important;
+ }
+}
+
+/*********************************************************
+SPACING
+*********************************************************/
+main {
+ min-height: 90vh;
+ --justify: flex-start;
+}
+
+main > * {
+ width: 100%;
+ max-width: var(--maxWidth);
+ margin: var(--setMargin);
+}
+main > .align-wide {
+ max-width: var(--alignWide);
+}
+main > .align-full {
+ --ml: 0;
+ --mr: 0;
+ max-width: var(--full);
+}
+main > section {
+ --mt: 6rem;
+}
+main > *:first-child {
+ margin-top: 0;
+}
+main > *:last-child {
+ margin-bottom: 0;
+}
+
+footer {
+ padding: 1rem;
+ background-color: var(--base-200);
+ color: var(--contrast-200);
+ text-align: center;
+ margin: 4rem 0 0;
+ 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;
+}
+
+@media (min-width:768px) {
+ footer {
+ padding: 1rem 2rem var(--offHeight);
+ }
+}
+/*********************************************************
+GRIDS
+*********************************************************/
+.grid-view,
+.item-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+}
+.grid-view .item,
+.item-grid .item {
+ border-radius: var(--outerRadius);
+ aspect-ratio: 1;
+ display:flex;
+ 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);
+}
+.item-grid.list-view {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ --gap: 2rem;
+}
+.item-grid.list-view .item .col {
+ --gap: .5rem;
+}
+.item-grid.list-view img {
+ width: 20%;
+}
+
+@media (min-width: 768px) {
+ .item-grid,
+ .grid-view {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ }
+}
+
+/*********************************************************
+TYPOGRAPHY
+*********************************************************/
+h1 b, h1 strong,
+h2 b, h2 strong,
+h3 b, h3 strong,
+h4 b, h4 strong,
+h5 b, h5 strong,
+h6 b, h6 strong {
+ font-weight: var(--fw-h-bold);
+ letter-spacing: 2px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ --mt: 1.5em;
+ --mb: .25em;
+ font-family: var(--heading);
+ text-transform: uppercase;
+ font-weight: var(--hWeight);
+ line-height: 1.3;
+ margin: var(--mt) var(--mr) var(--mb) var(--ml);
+}
+h1.inline,
+h2.inline,
+h3.inline,
+h4.inline,
+h5.inline,
+h6.inline {
+ font-size: 1.2rem;
+ font-weight: 600;
+ display: inline-block;
+ 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 + *,
+h3.inline + *,
+h4.inline + *,
+h5.inline + *,
+h6.inline + * {
+ display: inline-block;
+ margin: .5rem 0;
+}
+h1.inline + .term-list,
+h2.inline + .term-list,
+h3.inline + .term-list,
+h4.inline + .term-list,
+h5.inline + .term-list,
+h6.inline + .term-list {
+ display: inline-flex;
+ margin: .5rem 0;
+}
+
+h1 {
+ font-size: var(--xxxlarge);
+ font-weight: var(--hWeight);
+ line-height: 1;
+ margin: 0 var(--mr) .25em var(--ml);
+}
+h1:first-of-type {
+ margin-top: 10vh;
+}
+h1 small {
+ display: block;
+ font-size: var(--small);
+ font-weight: var(--bWeight);
+ line-height: 1;
+ margin-bottom: .75em;
+ font-family: var(--body);
+}
+h1 small + small {
+ display: inline-block;
+ font-size: var(--large);
+ margin-right: .5rem;
+}
+
+h2 {
+ font-size: var(--xxlarge);
+}
+h3 {
+ font-size: var(--xlarge);
+}
+h4 {
+ /*font-family: var(--body);*/
+ font-weight: 400;
+ font-size: var(--large);
+}
+h5, h6 {
+ /*font-family: var(--body);*/
+ font-weight: 400;
+ font-size: var(--medium);
+}
+
+p {
+ line-height: 1.6;
+}
+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);
+ border-radius: 4px;
+ padding: .125rem;
+}
+ul a {
+ display: inline-flex;
+}
+
+a:visited {
+ color: var(--action-50);
+}
+a:hover {
+ color: var(--contrast-50);
+ text-decoration: none;
+}
+p a:hover,
+h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
+ color: var(--action-contrast);
+ background-color: var(--action-0);
+}
+ol {
+ list-style-type:decimal;
+}
+/******************************************************************
+BUTTONS
+******************************************************************/
+.buttons {
+ --wrap: wrap;
+ --justify: flex-start;
+ margin: 1rem var(--mr) 1rem var(--ml);
+ width: 100%;
+ padding: 0;
+}
+.buttons.fit {
+ width: fit-content;
+ margin: 1rem 2rem;
+}
+.buttons li {
+ --justify: stretch;
+ --align: stretch;
+ padding: 0;
+ list-style: none;
+ overflow:hidden;
+ width: 100%;
+}
+.list-none {
+ list-style: none;
+}
+
+@media (min-width: 768px){
+ .buttons {
+ max-width: var(--maxWidth);
+ margin: 3rem var(--mr) 3rem var(--ml);
+ }
+}
+ul.socials a,
+.buttons a,
+.btn + label,
+[type=submit],
+a.button,
+a.wp-block-button__link,
+button {
+ --justify: center;
+ --align: center;
+ --dir: row;
+ 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-family: var(--heading);
+ cursor: pointer;
+ outline: inherit;
+ min-height: var(--height);
+ display: inline-flex;
+ justify-content: var(--justify);
+ align-items: var(--align);
+ gap: var(--gap);
+ flex-wrap: var(--wrap);
+ flex-direction: var(--dir);
+ transition: var(--transition-color);
+ position: relative;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-inset);
+}
+
+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,
+button:hover,
+button:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ box-shadow: var(--shadow-none);
+}
+
+.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,
+[type=submit]:disabled:hover,
+[type=submit]:disabled:focus,
+a.button:disabled,
+a.wp-block-button__link:disabled,
+button:disabled,
+a.button:disabled:hover,
+a.wp-block-button__link:disabled:hover,
+button:disabled:hover,
+a.button:disabled:focus,
+a.wp-block-button__link:disabled:focus,
+button:disabled:focus {
+ opacity: .5;
+ background-color: var(--base-200)!important;
+ color: var(--contrast-200)!important;
+}
+details .icon {
+ --w: 1.5em;
+}
+
+button.voted .icon,
+button.favourite.favourited {
+ animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
+}
+@keyframes favourite-pop {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.3); }
+ 75% { transform: scale(.9); }
+ 100% { transform: scale(1); }
+}
+
+button.filter-toggle {
+ border: 1px solid var(--base-200);
+ background-color: transparent;
+ white-space: nowrap;
+ font-size: 1rem;
+ padding: .35em;
+ --w: 1.2em;
+}
+.filter-toggle:hover {
+ border-color: var(--action-50);
+ color: var(--action-50);
+}
+.filter-toggle:focus {
+ background-color: var(--action-50);
+ color: var(--action-contrast);
+}
+
+button.favourite:not(.favourited) .heart-fill,
+button.favourite.favourited .heart,
+.toggle.notifications:not(.has) .bell-ringing,
+.toggle.notifications.has .bell,
+.vote button:not(.voted) .upvoted,
+.vote button:not(.voted) .downvoted,
+.vote .voted .upvote,
+.vote .voted .downvote {
+ display: none;
+}
+button.favourite:not(.favourited) .heart,
+button.favourite.favourited .heart-fill,
+.toggle.notifications:not(.has) .bell,
+.toggle.notifications.has .bell-ringing,
+.vote button:not(.voted) .upvote,
+.vote button:not(.voted) .downvote,
+.vote .voted .upvoted,
+.vote .voted .downvoted {
+ display: block;
+}
+/******************************************************************
+ICONS
+******************************************************************/
+
+i.icon {
+ width: var(--w);
+ height: var(--w);
+ 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.small,
+nav ul .icon {
+ --w: 24px;
+}
+
+.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%);
+}
+
+.icon.logo-basic svg path {
+ transition: fill var(--timing) var(--function);
+}
+.icon.logo-basic svg path#innerCircle,
+.icon.logo-basic svg path#outerSkull {
+ fill: var(--base);
+}
+
+a .icon.logo-basic:hover svg path {
+ fill: var(--base);
+}
+a .icon.logo-basic:hover svg path#innerCircle,
+a .icon.logo-basic:hover svg path#outerSkull {
+ fill: var(--action-0);
+}
+
+.icon.grab {
+ cursor: grab;
+}
+
+main a .icon {
+ margin-right: .5em;
+}
+
+body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {
+ position: relative;
+}
+body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{
+ content: '';
+ display: block;
+ width:60%;
+ height:60%;
+ border-radius: 50%;
+ background-color: var(--dark-200);
+ position: absolute;
+ left: 18%;
+ top: 22%;
+ z-index:-1;
+}
+
+path#refresh {
+ transform-origin: center;
+ transform-box: fill-box;
+ animation: spin 1s var(--function) infinite;
+}
+
+/******************************************************************
+ACCESSIBILITY
+******************************************************************/
+.screen-reader-text {
+ border: 0;
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute !important;
+ width: 1px;
+ word-wrap: normal !important;
+}
+input[type=checkbox] + label:focus,
+input[type=checkbox] + label:focus-visible,
+input[type=radio] + label:focus,
+input[type=radio] + label:focus-visible,
+input:focus,
+input:focus-within {
+ outline: 2px solid var(--action-0) !important;
+ outline-offset: 2px !important;
+ box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;
+}
+
+[aria-busy="true"] {
+ cursor: progress;
+}
+
+/* Disabled states */
+[aria-disabled="true"],
+[disabled] {
+ cursor: not-allowed;
+ opacity: .7;
+}
+
+/******************************************************************
+DETAILS
+******************************************************************/
+details {
+ padding: .25rem 0;
+ border-top: 1px solid var(--base-200);
+ border-bottom: 1px solid var(--base-200);
+}
+details[open] {
+ background-color: var(--base-50);
+}
+details summary {
+ --wrap: nowrap;
+ list-style: none;
+ text-transform: uppercase;
+ cursor: pointer;
+ border: 0;
+ transition: var(--transition-color);
+ position: relative;
+ padding: .5rem 2.5rem .5rem .5rem;
+ gap: .5rem;
+}
+details summary:hover {
+ background-color: var(--base-100);
+ border-color: var(--base-100);
+ color: var(--contrast);
+ transition: var(--transition-color);
+}
+details[open] > summary {
+ background-color: var(--base-50);
+}
+details summary::after {
+ content: "";
+ background-color: var(--contrast-100);
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ -webkit-mask-image: var(--details);
+ mask-image: var(--details);
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ width: 1.25rem;
+ height: 1.25rem;
+ margin-left: auto;
+ transition: background-color var(--transition-base);
+ transition-property: background-color, transform;
+}
+
+details summary:hover::after,
+details[open] > summary::after {
+ background-color: var(--contrast);
+}
+details[open] > summary::after {
+ transform: rotate(-540deg);
+ transition: background-color var(--transition-base);
+ transition-property: background-color, transform;
+}
+
+details::details-content {
+ opacity: 0;
+ block-size: 0;
+ overflow-y: clip;
+ transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);
+}
+details[open]::details-content {
+ opacity: 1;
+ block-size: auto;
+}
+@media (prefers-reduced-motion: no-preference){
+ details {
+ interpolate-size: allow-keywords;
+ }
+}
+
+/******************************************************************
+FORMS & FIELDS
+******************************************************************/
+textarea,
+input[type=date],
+input[type=number],
+input[type=text],
+input[type=url],
+input[type=email],
+input[type=textarea],
+input[type=tel],
+input[type=password],
+input[type=search] {
+ font-family: var(--body);
+ font-size: var(--medium);
+ color: var(--contrast);
+ padding: var(--p-y) var(--p-x);
+ border-radius: var(--innerRadius);
+ background-color: var(--base);
+ outline: 0;
+ border: 1px solid var(--base-100);
+ border-bottom: 2px solid var(--contrast-200);
+ width: 100%;
+ max-width: 100%;
+ margin: 0 4px;
+ transition: var(--transition-color);
+}
+textarea:focus,
+input[type=number]:focus,
+input[type=text]:focus,
+input[type=url]:focus,
+input[type=email]:focus,
+input[type=textarea]:focus,
+input[type=tel]:focus,
+input[type=password]:focus,
+input[type=search]:focus {
+ outline: var(--action-50);
+ background-color: var(--base-100);
+ color: var(--contrast);
+}
+textarea::placeholder,
+input::placeholder {
+ font-family: var(--body);
+ color: var(--base-200);
+}
+@media (min-width: 768px) {
+ :root {
+ --p-y: 1rem;
+ }
+}
+select {
+ /*appearance: none;*/
+ /*-webkit-appearance: none;*/
+ /*-moz-appearance: none;*/
+ background: var(--base);
+ border: 2px solid var(--base-100);
+ border-radius: var(--innerRadius);
+ color: var(--contrast);
+ cursor: pointer;
+ font-family: var(--body);
+ font-size: var(--small);
+ padding: .5rem 1rem;
+ width: 100%;
+ transition: var(--transition-color);
+}
+select:disabled {
+ background-color: var(--base-50);
+ border-color: var(--base-100);
+ color: var(--base-200);
+ cursor: not-allowed;
+}
+
+select option {
+ background: var(--base);
+ color: var(--contrast);
+ padding: .5rem;
+}
+select option:hover,
+select option:focus,
+select option:active,
+select option:checked {
+ background: var(--action-0);
+ color: var(--base);
+ box-shadow: 0 0 0 100px var(--action-0) inset;
+}
+
+select option:checked {
+ background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
+ color: var(--base);
+}
+
+select:hover {
+ border-color: var(--action-0);
+}
+
+select:focus {
+ border-color: var(--action-0);
+}
+
+input[type=search]:focus + .clear-search {
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity var(--transition-base);
+}
+
+.search-container .clear-search {
+ opacity: 0;
+ cursor: default;
+ transition: opacity var(--transition-base);
+}
+.search-container .icon.search {
+ padding: 4px 8px;
+ color: var(--contrast-200);
+ --w: 3rem;
+}
+input[type="search"]::-moz-search-clear-button,
+input[type="search"]::-ms-clear,
+input[type="search"]::-ms-reveal,
+input[type="search"]::search-cancel-button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ display: none;
+ visibility: hidden;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance:none;
+}
+
+.integration .label,
+label {
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-bottom: .5rem;
+ display: block;
+}
+
+/**********************
+SPECIAL FIELDS
+**********************/
+.selected-items {
+ --justify: flex-start;
+ --gap: .5rem;
+ margin-bottom: .5rem;
+}
+
+.selected-item {
+ padding: .25rem .5rem;
+ margin: .125em;
+ background: var(--base-100);
+ border-radius: .25rem;
+ font-size: var(--medium);
+ border: 1px solid var(--base-200);
+ position: relative;
+}
+
+.remove-item {
+ background: none;
+ border: none;
+ padding: .25rem;
+ cursor: pointer;
+ color: #666;
+ border-radius: var(--innerRadius);
+ width: 1.5em;
+ height: 1.5em;
+}
+.remove-item .close {
+ width: .5em;
+ height: .5em;
+}
+
+.remove-item:hover {
+ color: var(--action-0);
+ background: #fee;
+}
+
+.clear-filters {
+ margin-left: auto;
+ border: 1px solid var(--base-200);
+}
+[type=radio],
+[type=checkbox],
+input.ch {
+ position: absolute;
+ opacity: 0;
+ left: -200vw;
+}
+/* Pseudo checkbox */
+[type=radio] + label,
+[type=checkbox] + label,
+input.ch + label {
+ position: relative;
+ cursor: pointer;
+}
+[type=radio] + label:hover,
+[type=checkbox] + label:hover {
+ color: var(--action-0);
+}
+[type=radio] + label::before,
+[type=checkbox] + label::before,
+input.ch + label::before,
+[type=radio] + label::after,
+[type=checkbox] + label::after,
+input.ch + label::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+}
+
+
+[type=radio] + label::after,
+[type=checkbox] + label::after,
+input.ch + label::after {
+ left: 5px;
+ transform: translateY(-70%) rotate(45deg);
+ width: 5px;
+ height: 10px;
+ border: solid var(--light-0);
+ border-width: 0 2px 2px 0;
+ display: none;
+}
+
+
+
+
+[type=radio] + label::before,
+[type=checkbox] + label::before,
+input.ch + label::before {
+ left: 0;
+ transform: translateY(-50%);
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid var(--contrast-200);
+ background-color: var(--base);
+ border-radius: var(--innerRadius);
+ transition: var(--transition-color);
+}
+[type=radio]:hover + label::before,
+[type=checkbox]:hover + label::before,
+input.ch:hover + label::before {
+ border-color: var(--action-200);
+}
+
+[type=radio]:checked + label::before,
+[type=checkbox]:checked + label::before,
+input.ch:checked + label::before {
+ background-color: var(--action-0);
+ border-color: var(--action-100);
+}
+
+[type=radio]:checked + label::before {
+ border-radius: 50%;
+}
+
+[type=checkbox]:checked + label::after,
+input.ch:checked + label::after {
+ display: block;
+ left: 5px;
+ top: 50%;
+ transform: translateY(-70%) rotate(45deg);
+ width: .35rem;
+ height: .66rem;
+ border: solid var(--light-0);
+ border-width: 0 2px 2px 0;
+}
+
+[type=radio]:disabled + label,
+[type=checkbox]:disabled + label,
+input.ch:disabled + label {
+ cursor: not-allowed;
+ background-color: var(--base-50);
+ color: var(--base-200);
+ border-color: var(--base-200);
+}
+[type=radio]:disabled + label:hover,
+[type=checkbox]:disabled + label:hover,
+input.ch:disabled + label:hover {
+ background-color: var(--base-50);
+ color: var(--base-200);
+ border-color: var(--base-200);
+}
+[type=radio]:disabled + label::before,
+[type=checkbox]:disabled + label::before,
+input.ch:disabled + label::before {
+ border-color: var(--base-200);
+}
+
+[type=radio]:not(.btn) + label,
+[type=checkbox]:not(.btn) + label,
+input.ch + label {
+ flex: 1;
+ padding-left: 2rem;
+ transform-origin: top center;
+ transition: transform .3s ease;
+ will-change: transform;
+}
+
+/* Non-pseudo checkbox, that acts more like a button/pill style */
+.btn + label::before,
+.btn + label::after {
+ display: none;
+}
+.btn + label {
+ --w: 1.2em; /* For icons */
+ border: 1px solid var(--base-200);
+ border-radius: var(--innerRadius);
+ min-width: 2rem;
+ min-height: 2rem;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: .5rem;
+ color: var(--contrast-200);
+ opacity: .8;
+}
+.radio-options.status label {
+ padding: 0 .5rem;
+}
+.btn:checked + label {
+ border-color: var(--contrast);
+ color: var(--contrast);
+ opacity: 1;
+}
+
+.btn + label:hover {
+ color: var(--action-50);
+ border-color: var(--action-50);
+}
+
+input[hidden] + label,
+.btn[hidden] + label {
+ display: none!important;
+}
+
+/* DATE */
+.date-wrapper {
+ position: relative;
+ display: inline-block;
+}
+input[type=date] {
+ padding: 8px 36px 8px 8px;
+ /*border: 1px solid #ccc;*/
+ border-radius: 4px;
+}
+input[type=date]::-webkit-calendar-picker-indicator {
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: pointer;
+}
+input[type=date] + .icon {
+ --w: 20px;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none; /* This allows clicks to pass through to the input below */
+}
+
+/** TIME **/
+
+
+input[type=url] {
+ background: var(--linkIcon);
+ background-position: .5em;
+ background-size: 1em;
+ background-repeat: no-repeat;
+ padding-left: 2em;
+}
+
+
+.field {
+ margin: 2rem 0;
+ position: relative;
+}
+.field:has(.has-tooltip) label {
+ margin-left: 2rem;
+}
+/***************
+TOGGLE TEXT
+***************/
+.toggle-text input {
+ display: none;
+}
+
+.toggle-text input + label {
+ font-weight: normal;
+ color: var(--contrast)!important;
+ text-transform: none;
+ cursor: pointer;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.toggle-text label::before,
+.toggle-text label::after {
+ display: none;
+}
+.toggle-text label {
+ padding-left: 0!important;
+}
+
+.toggle-text input + label .text {
+ position: relative;
+ margin: 0 .5rem;
+ font-weight: bold;
+ width: fit-content;
+ padding: 2px 4px;
+ border: 1px solid var(--action-50);
+ border-radius: 4px;
+ color: var(--action-50)!important;
+}
+table .toggle-text input+label .text {
+ color: var(--contrast)!important;
+ border-color: var(--contrast);
+}
+.toggle-text:hover .text,
+table .toggle-text:hover .text {
+ background-color: var(--action-50);
+ color: var(--light-0)!important;
+ border-color: var(--action-50);
+}
+
+.toggle-text input + label .off,
+.toggle-text input + label .on {
+ transition: var(--transition-transform), opacity var(--transition-base);
+}
+
+.toggle-text input + label .off {
+ opacity: 1;
+ max-width: 100%;
+ transform: none;
+}
+
+.toggle-text input + label .on {
+ opacity: 0;
+ max-width: 0;
+ transform: translate3d(0, 100%, 0);
+}
+
+.toggle-text input:checked + label .off {
+ opacity: 0;
+ max-width: 0;
+ transform: translate3d(0, -100%, 0);
+}
+
+.toggle-text input:checked + label .on {
+ max-width: 100%;
+ opacity: 1;
+ transform: none;
+}
+
+
+/******************************************************************
+TAXONOMY SELECTOR
+******************************************************************/
+.items-container {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+.create-new-term {
+ margin-top: 1rem;
+ width: 100%;
+}
+.create-new-term .field,
+.create-new-term[open] summary {
+ margin-bottom: 1rem;
+}
+.create-new-term .field {
+ max-width: 100%;
+}
+#jvb-selector > .wrap {
+ --wrap: nowrap;
+ --justify: flex-start;
+}
+#jvb-selector .items-wrap {
+ width: 100%;
+}
+#jvb-selector .items-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(1fr, 100%))
+}
+/******************************************************************
+QUANTITY FIELD
+******************************************************************/
+.quantity {
+ margin: 0;
+}
+.quantity label {
+ margin: 0;
+ font-size: var(--small);
+}
+.quantity {
+ display: inline-flex;
+ width: fit-content;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ position: relative;
+}
+.quantity:focus-within {
+ border-color: var(--action-0);
+}
+
+.quantity button {
+ background: var(--base);
+ padding: 0;
+ width: 38px;
+ height: 38px;
+ z-index: 0;
+ position: relative;
+ border: 1px solid var(--base-200);
+ color: var(--contrast-200);
+}
+.quantity button:hover:not(:disabled) {
+ color: var(--action-0);
+ border-color: var(--action-0);
+ background-color: var(--base);
+}
+.quantity button:active:not(:disabled) {
+ background-color: var(--action-0);
+ color: var(--light-0);
+ transform: scale(.95);
+}
+.quantity button:disabled {
+ opacity: .5;
+ cursor: not-allowed;
+}
+.quantity input[type=number] {
+ z-index: 1;
+ border: 1px solid var(--base-200);
+ background: var(--base);
+ text-align: center;
+ font-size: 1.1rem;
+ width: 60px;
+ height: 48px;
+ margin: 0;
+ padding: 0!important;
+ appearance: textfield;
+}
+.quantity input[type=number]::-webkit-outer-spin-button,
+.quantity input[type=number]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+.quantity input[type=number]:focus {
+ background-color: var(--base-50);
+}
+.quantity button.increase {
+ left: -2px;
+ border-radius: 0 4px 4px 0;
+}
+.quantity button.decrease {
+ right: -2px;
+ border-radius: 4px 0 0 4px;
+}
+
+/**************************************************
+LIST OVERRIDES
+**************************************************/
+.term-list {
+ --justify: flex-start;
+ --align: center;
+ --wrap: nowrap;
+ --gap: 1.5rem;
+ --dir: row;
+ --w: 1em;
+ list-style: none;
+ padding: 0;
+ height: var(--height);
+ display: flex;
+ justify-content: var(--justify);
+ align-items: var(--align);
+ gap: var(--gap);
+ flex-wrap: var(--wrap);
+ flex-direction: var(--dir);
+ position: relative;
+ overflow: auto hidden;
+ touch-action: pan-x;
+ text-transform: lowercase;
+}
+/*.term-list a {*/
+/* color: var(--contrast);*/
+/* text-decoration: none;*/
+/* font-size: var(--small);*/
+/* }*/
+/* .term-list a:hover {*/
+/* color: var(--action-0);*/
+/* }*/
+/*.term-list.shop a::before,*/
+/*.term-list.style a::before,*/
+/*.term-list.theme a::before,*/
+/*.term-list.city a::before,*/
+/*#by-city::before,*/
+/*#by-style::before,*/
+/*#by-theme::before,*/
+/*.term-list.all a::before{*/
+/* content:"";*/
+/* display:inline-block;*/
+/* mask-repeat: no-repeat;*/
+/* mask-size: contain;*/
+/* width: 1.2em;*/
+/* height: 1.2em;*/
+/* margin-right: .5rem;*/
+/* vertical-align: middle;*/
+/* background-color: currentColor;*/
+/*}*/
+/*.term-list a::after {*/
+/* display: none;*/
+/*}*/
+
+/*.term-list.shop a::before {*/
+/* mask-image: var(--shop);*/
+/*}*/
+
+/*.term-list.city a::before,*/
+/*#by-city::before {*/
+/* mask-image: var(--map);*/
+/*}*/
+/*.term-list.style a::before,*/
+/*#by-style::before,*/
+/*.term-list.all.styles a::before {*/
+/* mask-image: var(--style);*/
+/*}*/
+/*.term-list.theme a::before,*/
+/*#by-theme::before {*/
+/* 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(--fw-h-bold);
+ 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 {
+ backdrop-filter: blur(5px);
+ background-color: var(--overlay-medium);
+}
+
+dialog[open] {
+ z-index:999;
+ --padding: 0;
+ top: 5vh;
+ width: min(500px, 95vw);
+ border-radius: 1rem;
+ height: fit-content;
+ overflow: hidden;
+ max-height: 90vh;
+ padding: var(--padding);
+ background-color: var(--base-50);
+ color: var(--contrast);
+ border: 1px solid var(--base-200);
+ box-shadow: var(--shadow);
+}
+
+dialog > .wrap,
+dialog > form {
+ max-height: 100%;
+ overflow: hidden auto;
+ margin: 0 0 0 1.5rem;
+ padding-right: 1.2rem;
+ width: calc(100% - 1.5rem);
+}
+
+dialog label {
+ font-weight: normal;
+}
+
+dialog h2,
+dialog h3 {
+ margin: 0 0 .5rem 0;
+ font-size: var(--large);
+}
+
+dialog:has(.m-actions){
+ padding-bottom: var(--height);
+}
+.m-actions {
+ --w: 1.15em;
+ --justify: flex-end;
+ --wrap: nowrap;
+ --gap: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ z-index: var(--z-6);
+ background-color: var(--action-100);
+ box-shadow: var(--shadow-up);
+}
+.m-actions button {
+ width: 100%;
+ height: 3rem;
+ border-radius: 0;
+ color: var(--action-contrast);
+ background-color: var(--action-50);
+ border: 2px solid var(--action-50);
+}
+.m-actions button:hover,
+.m-actions button:focus {
+ background-color: var(--base);
+ color: var(--contrast);
+}
+.m-actions button:first-of-type {
+ border-bottom-left-radius: 1rem;
+}
+.m-actions button:last-of-type {
+ border-bottom-right-radius: 1rem;
+}
+dialog ul {
+ list-style: none;
+}
+
+dialog .search-container {
+ padding-top: 1rem;
+ width: 100%;
+ gap: .5rem;
+}
+/****************
+QUERY BLOCK
+****************/
+.loop .item-grid {
+ grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 768px) {
+ .loop .item-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+.loop .item-grid .progress {
+ aspect-ratio: 3/2;
+ position: relative;
+}
+.loop .item-grid .progress figure {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: .125rem;
+ background-color: var(--action-0);
+ position: relative;
+}
+.loop .item-grid .progress figure span {
+ position: absolute;
+ width: 50%;
+ text-transform: uppercase;
+ background-color: rgba(var(--action-rgb),var(--rgb-medium));
+ color: var(--action-contrast);
+ padding: 0 .25rem;
+}
+.loop .progress figure img {
+ max-width: 50%;
+ object-fit: cover;
+}
+figure .after {
+ top: 0;
+ right:0;
+}
+figure .before {
+ bottom: 0;
+ left: 0;
+}
+/****************
+GALLERY
+****************/
+/*dialog[open].gallery {*/
+/* width: calc(100vw - var(--padding) * 2);*/
+/* height: 99vh;*/
+/* background: var(--overlay-heavy);*/
+/*}*/
+
+/*.gallery .content {*/
+/* position: relative;*/
+/* max-width: 100%;*/
+/* max-height: 100%;*/
+/* padding: 2rem;*/
+/*}*/
+/*.gallery .favourite button.favourite {*/
+/* top: unset;*/
+/* bottom: 1rem;*/
+/* right: 1rem;*/
+/*}*/
+
+/*.gallery .image {*/
+/* max-width: 100%;*/
+/* max-height: calc(100vh - 4rem);*/
+/* object-fit: contain;*/
+/*}*/
+/*.gallery .image-left,*/
+/*.gallery .image-right {*/
+/* position: fixed;*/
+/* top: 10vh;*/
+/* height: 80vh;*/
+/* width: auto;*/
+/*}*/
+/*.gallery .image-left {*/
+/* left: -95%;*/
+/*}*/
+/*.gallery .image-right {*/
+/* right: -95%;*/
+/*}*/
+
+/*.gallery .cancel {*/
+/* position: absolute;*/
+/* top: 1rem;*/
+/* right: 1rem;*/
+/* background: none;*/
+/* border: none;*/
+/* color: white;*/
+/* cursor: pointer;*/
+/* padding: .5rem;*/
+/* z-index: 10;*/
+/* transition: color .3s ease;*/
+/*}*/
+
+/*.gallery .cancel:hover {*/
+/* color: var(--action-0);*/
+/*}*/
+
+/*.gallery .nav {*/
+/* position: absolute;*/
+/* top: 50%;*/
+/* height: 50%;*/
+/* z-index: 5;*/
+/* transform: translateY(-50%);*/
+/* border: none;*/
+/* color: var(--contrast);*/
+/* cursor: pointer;*/
+/* padding: 1rem;*/
+/* transition: color .3s ease;*/
+/*}*/
+/*.gallery .nav:hover {*/
+/* background-color: var(--overlay-heavy);*/
+/*}*/
+
+/*.gallery .nav:hover {*/
+/* color: var(--action-0);*/
+/*}*/
+
+/*.gallery .prev {*/
+/* left: 1rem;*/
+/*}*/
+
+/*.gallery .next {*/
+/* right: 1rem;*/
+/*}*/
+
+/*.gallery .counter {*/
+/* position: absolute;*/
+/* top: 1rem;*/
+/* left: 1rem;*/
+/* color: white;*/
+/* font-size: .875rem;*/
+/*}*/
+
+/*.gallery .content details {*/
+/* position:absolute;*/
+/* bottom: 1rem;*/
+/* left: 2rem;*/
+/* width: calc(100% - 4rem);*/
+/* background-color: var(--overlay-light);*/
+/* padding: 0;*/
+/*}*/
+/*.gallery .content details:hover,*/
+/*.gallery .content details[open] {*/
+/* background-color: var(--overlay-heavy);*/
+/* backdrop-filter: blur(5px);*/
+/*}*/
+/*.gallery .content details[open] summary {*/
+/* background-color: transparent;*/
+/*}*/
+/**************************************************
+TABLES
+**************************************************/
+table {
+ white-space: nowrap;
+ width: 100%;
+ display: block;
+ margin: 0 0 2rem;
+ border-radius: 4px;
+ height: var(--maxHeight);
+ overflow: auto;
+ position: relative;
+}
+thead,tfoot {
+ position: sticky;
+ z-index: 10;
+ background-color: var(--base);
+ text-transform: uppercase;
+ padding: .5rem 0;
+ line-height: 2;
+ font-weight: normal;
+}
+
+tr:nth-of-type(even){
+ background-color: var(--base-200);
+}
+tfoot th {
+ vertical-align: middle;
+}
+tfoot th:first-of-type {
+ text-align: right;
+}
+tbody {
+}
+thead tr, tfoot tr {
+ background-color: var(--overlay-heavy);
+ box-shadow: var(--shadow);
+}
+thead tr {
+ border-bottom: 1px solid var(--contrast-200);
+}
+tfoot tr {
+ border-top: 1px solid var(--contrast-200);
+}
+thead {
+ top: 0;
+}
+tfoot {
+ bottom: 0;
+}
+thead th {
+ width: max-content;
+}
+th p {
+ margin: 0!important;
+}
+td {
+ width: max-content;
+ padding: .5rem 1rem;
+}
+
+td .toggle input[type=checkbox] {
+ margin: 0;
+}
+td .field {
+ margin: .25rem 0;
+}
+td[data-id="actions"] label {
+ margin: 0;
+ padding: 0;
+}
+td .description {
+ display: none;
+}
+td input[type=text] {
+ width: fit-content;
+ max-width: 40vw;
+ padding: .25em!important;
+ font-size: var(--small)!important;
+}
+
+tbody tr {
+ border: 2px solid transparent;
+}
+tbody tr:focus-within {
+ background-color: var(--base-100);
+ border-color: var(--action-50)
+}
+
+[data-stuck] {
+ background-color: var(--overlay-medium);
+ position: sticky;
+ left: -1rem;
+ z-index: 15;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
+}
+tbody [data-stuck] {
+ z-index: 5;
+}
+thead [data-stuck],
+tfoot [data-stuck] {
+ background: var(--base);
+}
+
+/**************************************************
+TOOLTIP
+**************************************************/
+[role=tooltip],
+.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
+ visibility: hidden;
+ position: absolute;
+ bottom: 2rem;
+ left: 1rem;
+ width: max-content;
+ height:fit-content;
+ max-width: 50vw;
+ padding: .5rem;
+ border-radius: var(--innerRadius);
+ box-shadow: var(--shadow);
+ background: var(--action-0);
+ color: var(--action-contrast);
+}
+
+body.menu_item [role=tooltip] {
+ left: auto;
+ right: 100%;
+ top: -200%;
+ z-index: var(--z-4);
+}
+[role=tooltip] p {
+ margin: 0;
+}
+[role=tooltip] p + p {
+ margin-top: .5rem;
+}
+
+/*.field:has([aria-describedby]:hover) [role=tooltip],*/
+.field:has([aria-describedby]:focus) [role=tooltip],
+[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
+[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
+ visibility: visible;
+ display: block;
+}
+.has-tooltip {
+ display: inline-flex;
+ justify-content: flex-end;
+ position: absolute;
+ top: 0;
+ left: 0;
+ --w: 1.5rem
+}
+.tt-toggle {
+ cursor: pointer;
+ display: flex;
+ border-radius: 50%;
+ background-color: transparent;
+}
+.tt-toggle:hover,
+.tt-toggle:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.tt-toggle:hover + [role=tooltip],
+.tt-toggle:focus + [role=tooltip] {
+ visibility: visible;
+}
+
+/************************************************************
+SELECTOR
+************************************************************/
+dialog[open]#jvb-selector {
+ height: 70vh;
+ top: 15vh;
+ display: flex;
+}
+#jvb-selector > .wrap {
+ flex: 1;
+}
+
+/******************************************************************
+LOADING
+******************************************************************/
+dialog.loading {
+ opacity: 0;
+ transition: opacity var(--transition-base);
+}
+dialog.loading[open] {
+ opacity: 1;
+ transition: opacity var(--transition-base);
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 0;
+ border: none;
+ background-color: transparent;
+ box-shadow: none;
+ --w: 3em;
+ justify-content: center;
+ align-items: center;
+}
+dialog.loading[open]@starting-style {
+ opacity: 0;
+}
+dialog.loading[open] > .col {
+ height: fit-content;
+ width: min(400px, 60vw);
+ border-radius: var(--outerRadius);
+ background-color: var(--overlay-medium);
+ padding: 2rem;
+ box-shadow: var(--shadow);
+ position: relative;
+}
+
+dialog.loading[open] .spinner {
+ position: absolute;
+ top: 1rem;
+ width: 5rem;
+ height: 5rem;
+ border-width: 0;
+ border-top-width: 4px;
+ animation: spin 1s var(--function) infinite;
+}
+.loading[open] i.icon {
+ background-color: var(--action-0);
+}
+
+dialog.loading[open] i.icon {
+ animation: dance 2s ease-in-out infinite;
+ transition: color .3s ease;
+}
+dialog.loading[open] h3 {
+ color: var(--contrast);
+ margin: 2rem 1rem auto !important;
+ font-size: var(--large);
+ width: -moz-fit-content;
+ width: fit-content;
+ /*-webkit-text-stroke: 1px var(--contrast);*/
+ /*--g: conic-gradient(var(--action-0) 0 0) no-repeat text;*/
+ /*animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;*/
+ /*background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;*/
+}
+
+dialog.loading[open] p {
+ margin: .5rem auto;
+}
+
+dialog.loading[open]::after {
+ animation: shimmer 3s ease-in-out infinite;
+ background: linear-gradient(90deg, var(--shimmer));
+ content: "";
+ inset: 0;
+ position: absolute;
+ z-index: -1;
+}
+
+.spinner {
+ width: 12px;
+ height: 12px;
+ border: 2px solid transparent;
+ border-top: 2px solid var(--action-50);
+ border-radius: 50%;
+ animation: spin 1s var(--function) infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes shimmer {
+ 0% {
+ left: -50%;
+ }
+ 50% {
+ left: 150%;
+ }
+ 100% {
+ left: -50%;
+ }
+}
+
+
+@keyframes dance {
+ 0%, 100% {
+ transform: rotate(-5deg) scale(1);
+ }
+ 50% {
+ transform: rotate(5deg) scale(1.1);
+ }
+}
+
+@keyframes letterOutline {
+ 0% {
+ background-size: 1ch 0;
+ }
+ 100% {
+ background-size: 1ch 100%;
+ }
+}
+
+@keyframes letterInside {
+ 0%, 50% {
+ background-position-y: 100%,0;
+ }
+ 50.01%, 100% {
+ background-position-y: 0, 100%;
+ }
+}
+
+/******************************
+TABS
+******************************/
+.tab-content[hidden] {
+ display: block!important;
+ transform: scaleY(0);
+ height: 0;
+ overflow: hidden;
+}
+.tab-content[hidden]:focus-within {
+ transform: scaleY(1);
+ height:auto;
+}
+
+nav.tabs h2 {
+ margin: 0!important;
+ line-height: 1;
+ font-size: var(--medium);
+ display: flex;
+ color: var(--contrast);
+ white-space: nowrap;
+ gap: 1rem;
+}
+nav.tabs .active h2 {
+ color: var(--action-contrast);
+}
+nav.tabs button {
+ padding: .75rem 1.5rem;
+ border-radius: 0;
+ position: relative;
+ border: 2px solid var(--action-0);
+}
+nav.tabs > button:first-of-type {
+ border-top-left-radius: var(--innerRadius);
+}
+nav.tabs > button:last-of-type {
+ border-top-right-radius: var(--innerRadius);
+}
+.tabs > button:hover,
+.tabs > button:focus {
+ background-color: var(--base-200);
+}
+
+.tabs > button::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 3px;
+ background-color: var(--action-50);
+ transition: width .3s;
+}
+.tabs > button:hover::after,
+.tabs > button.active::after {
+ width: 100%;
+}
+.tabs > button.active::after {
+ background-color: var(--action-200);
+}
+.tabs > button.active {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.tabs > button.active:hover,
+.tabs > button.active:focus {
+ background-color: var(--action-100);
+}
+.tab-content h2 {
+ display: none;
+}
+/*****************************************************************************
+MENU
+*****************************************************************************/
+.toggle-details {
+ gap: 2px;
+}
+body.menu_item #top {
+ z-index: var(--z-4);
+ position: relative;
+}
+section .toggle-details {
+ position: absolute;
+ right: 0;
+ top: 5rem;
+}
+
+[data-toggle=all] {
+ position: fixed;
+ bottom: calc(var(--offHeight) + var(--height) + .5rem);
+ right: 0;
+ z-index: var(--z-4);
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+[data-toggle] {
+ z-index: var(--z-1);
+}
+body:has(#queue[hidden]) [data-toggle=all] {
+ left: 1rem;
+}
+dialog:not([open]).col,
+dialog:not([open]).row {
+ display: none;
+}
+
+@media (min-width:768px) {
+ section .toggle-details {
+ right: -10%;
+ }
+}
+/********************************************
+TYPE TEXT
+********************************************/
+/* Cursor, for typing messages */
+.typeText::after {
+ content: '|';
+ display: inline-block;
+ margin-left: 0;
+ animation: blink .75s step-end infinite;
+}
+@keyframes blink {
+ from, to { opacity: 1; }
+ 50% { opacity: 0; }
+}
+
+/**************************************************
+POPUPS:
+- toast container
+- cart
+- queue
+**************************************************/
+aside {
+ position: fixed;
+ top: var(--doubleHeight);
+ bottom: var(--offHeight);
+ width: min(500px, calc(100vw - 2rem));
+ background-color: var(--base);
+ z-index: var(--z-5);
+ box-shadow: var(--shadow);
+ padding-bottom: var(--height);
+ overflow: visible;
+}
+
+.qtoggle
+ /*.toggle-cart,*/
+ /*.create-item */
+{
+ z-index: var(--z-6);
+ position: fixed;
+ bottom: var(--offHeight);
+ width: var(--height);
+ height: var(--height);
+ background-color: var(--overlay-medium);
+ color: var(--contrast);
+ transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
+ box-shadow: var(--shadow);
+}
+/*.toggle-cart:hover,*/
+.qtoggle:hover,
+ /*.create-item:hover,*/
+ /*.toggle-cart: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,*/
+ /*.toggle-cart:disabled:hover,*/
+.qtoggle:disabled:hover,
+ /*.create-item:disabled:hover,*/
+ /*.toggle-cart:disabled:focus,*/
+.qtoggle:disabled:focus
+ /*.create-item:disabled:focus */
+{
+ opacity: .5;
+ background-color: var(--overlay-light);
+ color: var(--contrast);
+}
+/******************
+CART
+******************/
+/*.create-item,*/
+.toggle-cart {
+ right: 0;
+ border-radius: 4px 4px 4px var(--outerRadius);
+}
+
+body:has(#cart.expanded) .toggle-cart .icon {
+ display: none;
+}
+
+aside#cart {
+ padding-bottom: 6rem;
+}
+#cart form {
+ max-height: 100%;
+ overflow: hidden auto;
+}
+#cart nav.tabs {
+ z-index: var(--z-6);
+ top: 0;
+}
+#cart table {
+ height: auto;
+}
+#cart th {
+ padding: 0 1.5rem;
+}
+#cart table th:first-of-type {
+ width: 100%;
+}
+
+#cart nav.tabs {
+ position: sticky;
+ box-shadow: var(--shadow);
+}
+#cart button[data-tab] {
+ flex: 1;
+ border-radius: 0;
+}
+
+#cart form > *:not(.tabs) {
+ max-width: 90%;
+ margin: 0 auto;
+}
+
+#cart form .empty p {
+ margin: .5rem 0!important;
+}
+
+#cart .cart-total.cart-total {
+ --gap: 0 1rem;
+ padding-right: 1rem;
+ position: absolute;
+ bottom: var(--height);
+ width: 100%;
+ max-width: 100%;
+ background-color: var(--overlay-heavy);
+ z-index: var(--z-6);
+ box-shadow: var(--shadow-up);
+}
+.cart-total p {
+ --gap: 2rem;
+ max-width: 100%;
+ margin: 0;
+}
+.cart-total p span {
+ width: 6rem;
+ display: inline-block;
+ text-align: right;
+}
+.cart-total p + p {
+ font-weight: bold;
+}
+
+.cart-items .total {
+ font-weight: bold;
+}
+#cart .restored {
+ background-color: rgba(var(--action-rgb), var(--rgb-light));
+ border-radius: var(--outerRadius);
+ padding: 1rem;
+}
+.restored h3 {
+ font-size: var(--medium);
+ margin: 0;
+}
+.restored p {
+ margin: 0;
+}
+.restored .row {
+ --gap: 0;
+ --wrap:nowrap;
+ --w: 1em;
+}
+/******************
+TOAST
+******************/
+.toasts {
+ position: fixed;
+ top: 4rem;
+ right: -350px;
+ z-index: 1000;
+ width: 350px;
+}
+
+.toast {
+ background-color: var(--overlay-heavy);
+ border-left: 4px solid var(--action-0);
+ padding: 1rem;
+ box-shadow: var(--shadow);
+ left: 0;
+ position: relative;
+ opacity: 0;
+ transition: left .3s, opacity .3s;
+}
+
+.toast.success {
+ border-left-color: var(--success);
+}
+
+.toast.error {
+ border-left-color: var(--error);
+}
+
+.toast.info {
+ border-left-color: var(--warning);
+}
+
+.toast.show {
+ left: calc(-350px - 1rem);
+ opacity: 1;
+}
+
+.toast.hiding {
+ left: 0;
+ opacity: 0;
+}
+
+.toast-content p {
+ margin: 0;
+}
+
+.close-toast {
+ background: none;
+ border: none;
+ font-size: 1.25rem;
+ cursor: pointer;
+ opacity: .5;
+ transition: opacity .2s;
+ color: inherit;
+}
+
+.close-toast:hover {
+ opacity: 1;
+}
+/******************
+QUEUE
+******************/
+#queue#queue {
+ width: min(500px, calc(100vw - 2rem));
+}
+#queue > * {
+ max-width: 100%;
+}
+.qtoggle {
+ left: 0;
+ border-radius: 4px 4px var(--outerRadius) 4px;
+}
+
+.qtoggle.expanded {
+ left: var(--height);
+ width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
+}
+
+.qtoggle.saving .icon {
+ background-color: var(--action-0);
+ animation: spin .87s var(--function) infinite;
+}
+
+#queue .status-actions {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: var(--z-2);
+}
+
+#queue .status-actions .popup {
+ position: absolute;
+ z-index: -1;
+ width: max-content;
+ max-width: 300px;
+ background-color: var(--action-50);
+ color: var(--action-contrast);
+ border-radius: var(--innerRadius);
+ padding: .25em .75em;
+ top: 1rem;
+ left: -100vw;
+ transition: left var(--transition-base);
+}
+aside#queue .popup::before{
+ content: '';
+ width: 10px;
+ height: 10px;
+ transform: rotate(-45deg);
+ background-color: var(--action-50);
+ z-index: -1;
+ left: -5px;
+ position: absolute;
+ top: calc(50% - 5px);
+}
+
+.expanded#queue .status-actions .popup.showing {
+ left: calc(100% + 1em);
+}
+#queue .status-actions .popup.showing {
+ left: calc(200vw + var(--offHeight));
+ max-width: 75vw;
+}
+
+/** BADGES **/
+
+.refresh .countdown,
+#queue .item .status,
+.filter .count,
+.qtoggle .count,
+.qtoggle .indicator {
+ z-index: var(--z-3);
+ --offset: 0;
+ position: absolute;
+ top: var(--offset);
+ background-color: var(--overlay-light);
+}
+.expanded + .qtoggle .indicator,
+.expanded + .qtoggle .count {
+ --offset: .25rem;
+}
+/* Status indicator */
+.qtoggle .indicator {
+ right: var(--offset);
+ width: .75rem;
+ height: .75rem;
+ border-radius: 50%;
+}
+
+aside#queue.synced + .qtoggle .indicator {
+ background-color: var(--success);
+}
+
+aside#queue.pending + .qtoggle .indicator {
+ background-color: var(--warning);
+ animation: pulse 2s infinite;
+}
+aside#queue.pending:not(.expanded) + .qtoggle .icon {
+ background-color: var(--error);
+ animation: spin 1s var(--function) infinite;
+}
+
+/* Status count badge */
+.qtoggle .count {
+ --align: center;
+ --justify: center;
+ left: var(--offset);
+ min-width: 1.25rem;
+ height: 1.25rem;
+ padding: 0 4px;
+ color: var(--contrast);
+ border-radius: var(--innerRadius);
+ font-size: var(--extra-small);
+}
+
+#queue:has(.empty-queue) + .qtoggle .count {
+ display: none;
+}
+
+aside#queue .header {
+ padding: 15px;
+ border-bottom: 1px solid var(--base-200);
+ flex-shrink: 0;
+ --height: max-content;
+}
+.qitems {
+ flex: 1;
+ width: 100%;
+ overflow: hidden auto;
+ overflow-anchor: none;
+ padding: .5rem 2rem;
+ --gap: .5rem;
+}
+.qitems .item {
+ width: 100%;
+}
+.qitems button {
+ --height: max-content;
+}
+
+aside#queue h3 {
+ margin: 0;
+ font-size: 16px;
+ color: var(--contrast);
+}
+#queue .filters {
+ padding: 1rem 0 0;
+}
+#queue .filters .filter {
+ background-color: transparent;
+ white-space: nowrap;
+ font-size: var(--small);
+}
+
+#queue .filters .filter.active {
+ background: var(--base-200);
+ border-color: transparent;
+}
+#queue .filter:hover,
+#queue .filter:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+
+
+/* Filter count badge */
+.filter .count {
+ --offset: -8px;
+ right: var(--offset);
+ background: var(--base-200);
+ color: var(--contrast-200);
+ border-radius: 10px;
+ min-width: 18px;
+ height: 18px;
+ font-size: 10px;
+}
+.filter .count:empty {
+ display: none;
+}
+
+/* Empty state */
+.empty-queue {
+ height: 100px;
+ color: var(--contrast-200);
+ font-size: var(--small);
+ font-style: italic;
+}
+
+.refresh .countdown:not(.counting),
+aside#queue:has(.empty-queue) .refresh .count {
+ display: none;
+}
+
+/* Queue items */
+#queue .item {
+ padding: 15px;
+ background: var(--base-100);
+ border-radius: var(--innerRadius);
+ transition: all .2s ease;
+ box-shadow: var(--shadow-none);
+}
+
+#queue .item:hover {
+ box-shadow: var(--shadow);
+}
+
+#queue .item .header {
+ position: relative;
+ padding: .25rem 0;
+}
+
+#queue .item .type {
+ font-size: var(--small);
+}
+
+#queue .item .status {
+ --w: 1em;
+ --gap: 0;
+ --justify:center;
+ --align: center;
+ --offset: -1.2rem;
+ aspect-ratio: 1;
+ right: var(--offset);
+ border-radius: 50%;
+ color: var(--contrast-200);
+ background-color: var(--base-50);
+ border: 1px solid var(--base-200);
+ width: 1.25em;
+ height: 1.25em;
+}
+
+#queue .item .status.pending {
+ background: var(--base-100);
+ color: var(--contrast-200);
+}
+#queue .item .status.processing {
+ background: var(--base-200);
+ color: var(--contrast-100);
+ animation: pulse-color 2s infinite;
+}
+
+#queue .item .status.completed {
+ background: var(--base-50);
+ color: var(--base-200);
+}
+#queue .item .status.completed:hover {
+ color: var(--contrast-200);
+}
+
+#queue .item .status.failed {
+ background: var(--base);
+ color: var(--error);
+}
+
+
+#queue .item button {
+ font-size: 16px;
+ padding: 0;
+ line-height: 1;
+ opacity: .5;
+ transition: opacity .2s;
+}
+
+#queue .item button:hover {
+ opacity: 1;
+}
+
+/* Item details */
+#queue .item .info {
+ margin-top: 8px;
+ font-size: var(--small);
+}
+#queue .item .info .time {
+ --gap: 7px;
+ font-size: 10px;
+}
+
+/* Item actions */
+#queue .item .actions {
+ --gap: 8px;
+}
+
+#queue .item .actions button {
+ padding: 6px 12px;
+ font-size: 12px;
+ background: var(--base-200);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all .2s;
+ color: var(--contrast);
+}
+
+#queue .item .actions .retry {
+ background-color: var(--secondary-200);
+ color: var(--secondary-contrast);
+}
+
+
+#queue .item .actions button:hover {
+ opacity: .9;
+}
+
+/* Queue actions footer */
+.queue-actions {
+ padding: .5rem 0;
+ border-top: 1px solid var(--base-200);
+ flex-shrink: 0;
+}
+
+.queue-actions button {
+ --height: max-content;
+ padding: .75rem;
+ width: 100%;
+ font-size: var(--small);
+}
+
+
+/* Refresh area */
+.status-actions > .refresh {
+ position: relative;
+ font-size: var(--small);
+}
+
+.refresh .countdown {
+ --justify:center;
+ --align: center;
+ --offset: 0;
+ right: var(--offset);
+ margin: 0 3px;
+ border-radius: 50%;
+ border: 1px solid var(--base-200);
+}
+
+.refreshNow {
+ width: var(--height);
+ height: var(--height);
+}
+
+.refreshNow:hover {
+ background: var(--base-200);
+ color: var(--contrast-200);
+}
+
+.icon.refresh {
+ --w: 18px;
+}
+
+/* Refreshing animation */
+#queue.pending.expanded .refreshNow .icon {
+ animation: spin 1.5s var(--function) infinite;
+}
+/**************************************************
+DELAY
+**************************************************/
+/* Initialize counter on the parent container */
+.item-grid, #queue {
+ counter-reset: delay-counter;
+}
+
+/* Increment counter for each item */
+.item {
+ counter-increment: delay-counter;
+}
+
+/* Use counter value to calculate delay */
+.item .progress .fill::after {
+ --delay: calc(counter(delay-counter) * .1s);
+}
+/**************************************************
+PROGRESS
+**************************************************/
+.progress .bar {
+ height: 6px;
+ display: block;
+ border-radius: 6px;
+ overflow: hidden;
+ background: var(--base-200);
+ position: relative;
+}
+
+.progress .fill {
+ height: 100%;
+ background: var(--action-0);
+ border-radius: 6px;
+ width: 0;
+ transition: width .3s ease;
+}
+.progress .details {
+ margin-top: 5px;
+ font-size: var(--small);
+ color: var(--contrast);
+ text-align: center;
+ padding: .25rem 0;
+}
+.progress .details:empty {
+ display: none;
+}
+.queued .fill::after,
+.pending .fill::after,
+.processing .fill::after,
+.uploading .fill::after {
+ --delay: 0s;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -50%;
+ width: 30%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, .225) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ animation: shimmer 2.5s infinite linear var(--delay);
+}
+/**************************************************
+ACTIONS
+**************************************************/
+.additional-actions.additional-actions {
+ padding: 0;
+ background-color: transparent;
+}
+.additional-actions .buttons {
+ position: fixed;
+ bottom: var(--offHeight);
+ right: 1rem;
+ margin: 0;
+ --gap: 1rem;
+ z-index: var(--z-6);
+ width: fit-content;
+}
+.additional-actions .buttons button {
+ height: var(--height);
+ width: var(--height);
+ background-color: var(--overlay-medium);
+ color: var(--contrast);
+ transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
+ box-shadow: var(--shadow);
+}
+.additional-actions .buttons button:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.additional-actions .buttons button:disabled,
+.additional-actions .buttons button:disabled:hover,
+.additional-actions .buttons button:disabled:focus {
+ opacity: .5;
+ background-color: var(--overlay-light);
+ color: var(--contrast);
+}
+.additional-actions .buttons button:last-of-type {
+ border-radius: 4px 4px 4px var(--outerRadius);
+}
+aside {
+ position: fixed;
+ top: var(--doubleHeight);
+ bottom: var(--offHeight);
+ width: min(500px, calc(100vw - 2rem));
+ background-color: var(--base);
+ z-index: var(--z-5);
+ box-shadow: var(--shadow);
+ --wrap: nowrap;
+ --align: stretch;
+ overflow: hidden auto;
+ padding: 1rem 1rem var(--height);
+}
+aside.left {
+ left: var(--offScreen);
+ transition: left var(--transition-base);
+ border-radius: 0 var(--outerRadius) var(--outerRadius) 0;
+}
+aside.left.expanded {
+ left: 0;
+}
+
+aside.right {
+ right: var(--offScreen);
+ border-radius: var(--outerRadius) 0 0 var(--outerRadius);
+ transition: right var(--transition-base);
+}
+aside.right.expanded {
+ right: 0;
+}
+aside.right.expanded button.close {
+ position: sticky;
+ bottom: calc(var(--height) * -1);
+ left: 0;
+ border-bottom-left-radius: var(--outerRadius);
+ width: var(--height);
+ height: var(--height);
+
+}
+.additional-actions .buttons:has(.expanded) button:not(.expanded) {
+ display: none;
+}
+.additional-actions .buttons:has(.expanded){
+ right: 0;
+}
+
+.additional-actions .buttons .expanded {
+ width: calc(min(500px, calc(100vw - 2rem)));
+ background-color: var(--base);
+}
+.additional-actions .buttons button:hover,
+.additional-actions .buttons .expanded:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+
+[type=submit] {
+ width: 100%;
+ height: var(--height);
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ box-shadow: var(--shadow-none);
+ font-weight: bold;
+}
+[type=submit]:hover {
+ box-shadow: var(--shadow);
+ border: 2px solid var(--action-0);
+ color: var(--action-0);
+ background-color: var(--action-contrast);
+}
+
+aside nav.tabs {
+ position: sticky;
+ bottom: unset;
+ top: 0;
+ left: 0;
+ right: 0;
+}
+.jvb-referral nav.tabs button {
+ width: 50%;
+}
+aside .tab-content.active {
+ padding: 1rem;
+ min-height: 100%;
+}
+
+aside header h3 {
+ font-size: var(--medium);
+ margin: 1rem 0;
+ text-align: center;
+}
+aside header p {
+ margin: .25rem 0;
+ text-align: center;
+}
+aside h4 {
+ font-size: var(--small);
+ margin: 1rem 0 0 0;
+}
+
+code {
+ width: 100%;
+ margin: .5rem;
+ padding: .5rem;
+ user-select: all;
+ text-align: center;
+ border-radius: 4px;
+ background-color: var(--base-200);
+ border: 1px solid var(--contrast-200);
+}
+.restore-form {
+ background-color: rgba(var(--action-rgb), var(--rgb-light));
+ border: 1px solid var(--action-200);
+ padding: .5rem;
+ border-radius: var(--outerRadius);
+ margin: 1rem 2rem;
+}
+.restore-form h3 {
+ text-align: center;
+ margin: 1rem 0 0;
+ font-size: var(--medium);
+}
+.restore-form p {
+ margin: .5rem 0;
+}
+.fstatus {
+ z-index: var(--z-5);
+ background-color: rgba(var(--base-rgb),var(--rgb-heavy));
+ border-radius: 4px;
+ padding: 0 .5rem;
+ position: fixed;
+ bottom: var(--offHeight);
+ right: calc(var(--offHeight) + 1rem);
+ --w: 1em;
+ box-shadow:var(--shadow);
+}
+.fstatus .spinner {
+ display: none;
+}
+.fstatus.loading .spinner {
+ display: inline-block;
+}
+
+.fstatus p {
+ 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 ~ main {
+ margin-top: 1.9rem;
+}
+.home .wp-site-blocks > .pre-header ~ main {
+ margin-top: 0;
+}
+.wp-site-blocks > .pre-header ~ header {
+ top: 1.9rem;
+}
+.wp-site-blocks > .pre-header ~ nav#breadcrumbs {
+ margin-top: 1.9rem;
+}
+.sub-header {
+ top: var(--height);
+ box-shadow: var(--shadow);
+}
+.pre-header ~ .sub-header {
+ top: calc(var(--height) + 1.5rem);
+}
+
+/**************************************************
+RESPONSES
+**************************************************/
+/*dialog.create-response {*/
+/* width: min(650px, calc(95vw - (var(--padding) * 2)));*/
+/*}*/
+/*dialog.create-response .original {*/
+/* height: 20vh;*/
+/* overflow-y: scroll;*/
+/* padding: 1rem;*/
+/* background-color: var(--base-100);*/
+/* border-radius: var(--innerRadius);*/
+/*}*/
+/*dialog.create-response .editor-container .ql-container {*/
+/* height: 30vh;*/
+/*}*/
+
+/*.responses summary {*/
+/* text-transform: none;*/
+/* display: block;*/
+/*}*/
+/*.news .header {*/
+/* margin-right: 2rem;*/
+/*}*/
+/*.news > summary::after,*/
+/*.responses summary::after {*/
+/* display: block;*/
+/* position: absolute;*/
+/* top: 0;*/
+/* right: 0;*/
+/* mask-image: var(--chevron);*/
+/*}*/
+/*.responses[open] > summary {*/
+/* background-color: inherit;*/
+/*}*/
+/*.responses[open] {*/
+/* background-color: var(--base-200);*/
+/*}*/
+/*.responses {*/
+/* margin: 1rem 0;*/
+/*}*/
+
+/*.response {*/
+/* background-color: inherit;*/
+/*}*/
+/*.response[open] {*/
+/* background-color: var(--base-100);*/
+/*}*/
+/*.response[open] > summary {*/
+/* background-color: inherit;*/
+/*}*/
+/*.news[open] > summary::after,*/
+/*.responses[open] > summary::after,*/
+/*.response[open] > summary::after {*/
+/* mask-image: var(--chevron);*/
+/*}*/
+/*.response > summary::after {*/
+/* display: none;*/
+/*}*/
+/*.response:has(.response) > summary::after {*/
+/* display: block;*/
+/*}*/
+/*.response:nth-of-type(even) {*/
+/* background-color: var(--base-50);*/
+/*}*/
+/*button.reply {*/
+/* margin-left: auto;*/
+/*}*/
+/**************************************************
+ANIMATIONS
+**************************************************/
+/** Used for Loading **/
+@keyframes shimmer {
+ 0% {
+ left: -50%;
+ }
+ 50% {
+ left: 150%;
+ }
+ 100% {
+ left: -50%;
+ }
+}
+
+
+@keyframes pulse-color {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
+ }
+ 30% {
+ box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
+ }
+}
+
+/** fadeIn & fadeOut, for adding/removing items **/
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+}
+
+/******************************************
+OVERFLOW DETECTION
+Include this in items to detect:
+// Scroll detection animation
+animation: detect-scroll linear;
+animation-timeline: scroll(self inline);
+******************************************/
+/* Scroll detection keyframe */
+@keyframes detect-scroll {
+ from, to {
+ --can-scroll: 1;
+ }
+}
+
+
+/******************************************************************
+DIRECTORY
+******************************************************************/
+
+/*.directory-list {*/
+/* max-width: var(--alignWide);*/
+/*}*/
+/*.directory-list ul {*/
+/* gap: 0;*/
+/*}*/
+/* .directory-list li.title {*/
+/* margin-left: -1rem;*/
+/* }*/
+
+
+/*.is-directory section {*/
+/* max-width: var(--full);*/
+/* width: calc(var(--full) - 1rem);*/
+/* padding: 0 .5rem;*/
+/*}*/
+/* .is-directory .list-none ul,*/
+/* .is-directory .list-none {*/
+/* margin: 0;*/
+/* padding: 0;*/
+/* list-style: none;*/
+/* }*/
+/* .is-directory .list-none ul {*/
+/* width: 80%;*/
+/* }*/
+/* .is-directory .list-none > li + li {*/
+/* border-top: 1px solid var(--base-100);*/
+/* padding-top: 2rem;*/
+/* margin-top: 2rem;*/
+/* }*/
+/* .is-directory .list-none ul li {*/
+/* background-color: var(--base-50);*/
+/* padding: .5rem .25rem;*/
+/* }*/
+/* .is-directory .list-none ul li:nth-of-type(even){*/
+/* background-color: var(--base-100);*/
+/* }*/
+/* .is-directory .list-none h3 {*/
+/* margin: .5rem auto!important;*/
+/* position: sticky;*/
+/* text-align: center;*/
+/* top: 4rem;*/
+/* font-size: 20vw;*/
+/* color: var(--base-200);*/
+/* background-color: var(--base);*/
+/* width: 20%;*/
+/* }*/
+/* @media (min-width:768px){*/
+/* .is-directory section {*/
+/* max-width: var(--alignWide);*/
+/* }*/
+/* .is-directory .list-none,*/
+/* .is-directory .list-none ul {*/
+/* padding-left: 2rem;*/
+/* }*/
+/* .is-directory .list-none h3 {*/
+/* text-align: left;*/
+/* top: 8rem;*/
+/* position: sticky;*/
+/* background-color: transparent;*/
+/* }*/
+/* }*/
+
+/*.directories > .directory {*/
+/* border-radius: 1rem;*/
+/* background-color: var(--base-100);*/
+/* text-align: center;*/
+/* padding: .5rem;*/
+/*}*/
+/*.directories > .directory a .icon {*/
+/* --w: 3rem;*/
+/* margin: 0;*/
+/*}*/
+/*.directory h2 {*/
+/* font-size: var(--large);*/
+/* margin: .5rem 0!important;*/
+/* width: 100%;*/
+/*}*/
+/*@media (min-width: 768px) {*/
+/* .directories {*/
+/* display: grid;*/
+/* grid-template-columns: repeat(3, 1fr);*/
+/* gap: 1rem;*/
+/* }*/
+/*}*/
+
+/*nav.directory li {*/
+/* list-style: none;*/
+/* display: inline-flex;*/
+/*}*/
+/*.grouped-directory {*/
+/* margin: 0;*/
+/* padding: 0;*/
+/* list-style: none;*/
+/*}*/
+/* .grouped-directory .grouped-directory {*/
+/* padding-left: 2rem;*/
+/* }*/
+/*.grouped-directory li:not(:has(details)) {*/
+/* padding: .625rem;*/
+/*}*/
+/*.grouped-directory summary a {*/
+/* order: 1;*/
+/* text-transform: none;*/
+/*}*/
+/*.grouped-directory summary::after {*/
+/* order: 2;*/
+/*}*/
+/*.grouped-directory li details[open] > summary,*/
+/*.grouped-directory li details[open] {*/
+/* background-color: var(--base-100);*/
+/*}*/
+
+/*.grouped-directory details[open] details[open] > summary,*/
+/*.grouped-directory details[open] details[open] {*/
+/* background-color: var(--overlay-light);*/
+/*}*/
+
+/*.is-directory h1 {*/
+/* margin-top: 3rem!important;*/
+/*}*/
+/******************************************************************
+NORTHEH
+******************************************************************/
+.menu-items .menu-item {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 0 1rem;
+}
+.menu-items .menu-item:not(.variable) label {
+ display: none;
+}
+.menu-items .menu-item .field {
+ margin: 0;
+ --wrap: nowrap;
+}
+.menu-items .menu-item .has-tooltip {
+ position: absolute;
+ right: -2.5rem;
+}
+.menu-items .menu-item + .menu-item {
+ border-top: 1px solid var(--base-200);
+ margin-top: 2rem;
+ padding-top: 1rem;
+}
+.menu-items .menu-item .header {
+ grid-column: 1/-1;
+}
+.menu-items .menu-item .description {
+ grid-column: 1/3;
+}
+.menu-items .menu-item .info {
+ grid-column: 3/3;
+}
+.menu-items .menu-item h3 {
+ font-size: var(--medium);
+ font-weight: normal;
+ margin: 0 0 .5rem 0!important;
+}
+
+.menu-items .menu-item .info {
+ --gap: 1rem;
+}
+.price > span {
+ vertical-align: super;
+ font-size: 12px;
+}
+body.menu_item section > h2 {
+ display: inline-block;
+ max-width: var(--maxWidth);
+ width: max-content;
+ background-color: var(--base-50);
+ color: var(--action-0);
+ position: relative;
+ z-index: 5;
+ padding: 0 1rem;
+ margin: var(--mt) auto var(--mb) auto;
+}
+
+.menu-section {
+ position: relative;
+}
+.menu-section hr {
+ position: absolute;
+ width: 100%;
+ left: -5%;
+ top: 3.5rem;
+ border: none;
+ background-color: var(--action-100);
+ height: 2px;
+}
+
+
+details.menu-item summary.row {
+ flex-direction: column;
+ align-items: flex-start;
+}
+details.menu-item summary .row {
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .menu-section hr {
+ width: 120%;
+ left: -10%;
+ top: 4.25rem;
+ }
+
+ .menu_item section {
+ max-width: var(--maxWidth);
+ }
+
+ /*details.menu-item summary.row {*/
+ /* flex-direction: var(--dir);*/
+ /* align-items: var(--justify);*/
+ /*}*/
+}
+/**
+TODO: For Legacy
+Triangles Loader
+
+.loading-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem 1rem 1rem;
+}
+.loader-wrap {
+ height: 75px;
+ width: 75px;
+}
+.new-term-toggle:disabled + .loader,
+.loading .loader {
+ width: 50px;
+ aspect-ratio: 1.154;
+ display: grid;
+ color: var(--action-0);
+ background:
+ linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,
+ linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,
+ linear-gradient(currentColor 0 0) bottom/100% 2px;
+ background-repeat: no-repeat;
+ transform-origin: 50% 66%;
+ animation: l5 4s infinite linear;
+}
+.new-term-toggle:disabled + .loader::before,
+.new-term-toggle:disabled + .loader::after,
+.loading .loader::before,
+.loading .loader::after {
+ content: "";
+ grid-area: 1/1;
+ background: inherit;
+ transform-origin: inherit;
+ animation: inherit;
+}
+.new-term-toggle:disabled + .loader::after,
+.loading .loader::after {
+ animation-duration: 2s;
+}
+@keyframes l5{
+ 100% {transform:rotate(1turn)}
+}
+ */
+
+/* DONE TO HERE */
+
+
+
+/*dialog .search-wrapper {*/
+/* padding: .5rem;*/
+/*}*/
+
+
+/*.favourite-terms ul {*/
+/* gap: .25rem 1rem;*/
+/* padding: 0;*/
+/*}*/
+/* .favourite-terms label::before,*/
+/* .favourite-terms label::after {*/
+/* display: none;*/
+/* }*/
+/* .favourite-terms label {*/
+/* padding: .25rem .5rem!important;*/
+/* border: 1px solid var(--base-200);*/
+/* color: var(--contrast-200);*/
+/* border-radius: var(--innerRadius);*/
+/* }*/
+/* .favourite-terms :checked + label,*/
+/* .favourite-terms label:hover {*/
+/* border-color: var(--action-0);*/
+/* color: var(--action-0);*/
+/* }*/
+/*.items-container {*/
+/* padding: 0;*/
+/*}*/
+/* .items-container li .children {*/
+/* width: 100%;*/
+/* padding-left: 1rem;*/
+/* }*/
+/*.path button+button::before {*/
+/* content: ' > ';*/
+/* display: inline-block;*/
+/* margin: 0 .5rem;*/
+/*}*/
+/*!** Forms **!*/
+
+
+/*!*.field.time_open,*!*/
+/*!*.field.time_closes,*!*/
+/*!*.field.date_start,*!*/
+/*!*.field.time_start,*!*/
+/*!*.field.time_end {*!*/
+/*!* margin-bottom: 0;*!*/
+/*!*}*!*/
+
+/*!*.field.time_open,*!*/
+/*!*.field.time_closes,*!*/
+/*!*.field.time_start,*!*/
+/*!*.field.time_end {*!*/
+/*!* width: 49%;*!*/
+/*!* display: inline-block;*!*/
+/*!* margin-top: 1rem;*!*/
+/*!*}*!*/
+
+/*[data-h] {*/
+/* border: 0;*/
+/* clip: rect(1px, 1px, 1px, 1px);*/
+/* clip-path: inset(50%);*/
+/* height: 1px;*/
+/* margin: -1px;*/
+/* overflow: hidden;*/
+/* padding: 0;*/
+/* position: absolute !important;*/
+/* width: 1px;*/
+/* word-wrap: normal !important;*/
+/*}*/
+
+/*.checkbox-options {*/
+/* --gap: .5rem 2rem;*/
+/*}*/
+/*.checkbox-options label {*/
+/* flex: unset!important;*/
+/*}*/
+
+/*.radio-options {*/
+/* --gap: .125rem .5rem;*/
+/*}*/
+
+/*.radio-options input:not(.ch) + label::before {*/
+/* display: none!important;*/
+/*}*/
+/*.radio-options input:not(.ch) + label {*/
+/* flex: unset!important;*/
+/* padding: .25rem!important;*/
+/* border-radius: 4px;*/
+/* border: 1px solid var(--base-100);*/
+/* color: var(--contrast-200);*/
+/* transition: var(--transition-color)!important;*/
+/* font-weight: normal;*/
+/* !*width: 40%;*!*/
+/* text-align: center;*/
+/*}*/
+/*.radio-options input:not(.ch) + label:hover,*/
+/*.radio-options input:not(.ch):checked + label {*/
+/* border-color: var(--action-0);*/
+/* color: var(--action-0);*/
+/* transition: var(--transition-color);*/
+/*}*/
+
+
+
+/*!* Style for disabled state *!*/
+
+
+
+/*.date-range {*/
+/* padding: 2rem;*/
+/* border: none;*/
+/* border-radius: var(--innerRadius);*/
+/* background: var(--base);*/
+/* box-shadow: var(--shadow);*/
+/*}*/
+/*.date-range::backdrop {*/
+/* backdrop-filter: blur(5px);*/
+/* background: var(--overlay-medium);*/
+/*}*/
+
+/*.custom-range,*/
+/*.month-picker {*/
+/* --gap: 1rem;*/
+/* margin-bottom: 1rem;*/
+/*}*/
+/*.custom-range input,*/
+/*.month-picker select {*/
+/* padding: .5rem;*/
+/* border: 1px solid var(--base-100);*/
+/* border-radius: var(--innerRadius);*/
+/* background: var(--base-200);*/
+/* color: var(--contrast);*/
+/* font: inherit;*/
+/*}*/
+/*.custom-range input:focus,*/
+/*.month-picker select:focus {*/
+/* outline: none;*/
+/* border-color: var(--action-0);*/
+/*}*/
+/*!** Shop Page **!*/
+/*.shop header {*/
+/* max-width: var(--full);*/
+/*}*/
+/*.shop header img {*/
+/* width: 100%;*/
+/* height: auto;*/
+/*}*/
+/*.shop header h1 {*/
+/* margin-bottom: .5em;*/
+/*}*/
+/*.ratings {*/
+/* margin: 0;*/
+/*}*/
+/*!** Bio Sections **!*/
+/*.bio-info {*/
+/* max-width: var(--alignWide);*/
+/* padding: .25em;*/
+/* border-radius: var(--outerRadius);*/
+/* font-size: var(--medium);*/
+/* line-height: 1.5;*/
+/*}*/
+/*.bio-info section {*/
+/* margin: 4rem 0;*/
+/*}*/
+/*.shop .column,*/
+/*.bio-info .column {*/
+/* --justify: center;*/
+/*}*/
+/*.bio-info[open] {*/
+/* background-color: var(--base-100);*/
+/*}*/
+/*.bio-info summary {*/
+/* padding: .25rem;*/
+/* position: relative;*/
+/* border-radius: var(--innerRadius);*/
+/*}*/
+/*.bio-info[open] summary {*/
+/* background-color: var(--base-50);*/
+/* margin-bottom: 1rem;*/
+/*}*/
+/*.bio-info > div:not(.columns) {*/
+/* margin: 4rem 0;*/
+/* padding: 0 1rem;*/
+/*}*/
+/*.bio-info h2 {*/
+/* margin: 0!important;*/
+/* font-size: var(--medium);*/
+/* font-family: var(--body);*/
+/* font-weight: var(--bWeight);*/
+/*}*/
+
+/*.bio-info h3 {*/
+/* margin: 1em 0!important;*/
+/* font-size: var(--medium);*/
+/*}*/
+/*.bio-info figure {*/
+/* margin: 0;*/
+/* padding: 0;*/
+/*}*/
+/*.bio-info img {*/
+/* width: 100%;*/
+/* height: auto;*/
+/* aspect-ratio: 5/4;*/
+/* object-fit: cover;*/
+/*}*/
+
+/* #contact {*/
+/* max-width: var(--alignWide);*/
+/* }*/
+/* #contact h2,*/
+/* section.inline h2 {*/
+/* font-size: var(--medium);*/
+/* font-weight: var(--bWeight);*/
+/* margin: 0 0 .5em 0!important;*/
+/* white-space: nowrap;*/
+/* }*/
+/*ul.contact {*/
+/* list-style: none;*/
+/* display: inline-flex;*/
+/* justify-content: flex-start;*/
+/* flex-wrap: wrap;*/
+/* align-items: center;*/
+/* gap: 1rem;*/
+/* margin: 0;*/
+/* padding: 0;*/
+/*}*/
+/* ul.contact + ul.contact {*/
+/* margin-left: 1rem;*/
+/* }*/
+/* ul.contact a{*/
+/* color: var(--contrast);*/
+/* }*/
+/* ul.contact a:hover {*/
+/* color: var(--action-0);*/
+/* }*/
+
+/*.term-list {*/
+/* display: inline-flex;*/
+/* flex-wrap: wrap;*/
+/* list-style: none;*/
+/* text-transform: lowercase;*/
+/* margin: 0;*/
+/* padding: 0;*/
+/* gap: 0 .5em;*/
+/*}*/
+/*p.loading {*/
+/* text-align: center;*/
+/* margin: 3rem 0;*/
+/*}*/
+/*
+/*.term-list li {*/
+/* padding: 2px 6px;*/
+/*}*/
+
+/*ul.simple-list {*/
+/* margin: 0;*/
+/* padding: 0;*/
+/* list-style: none;*/
+/*}*/
+/*ul.reviews li + li{*/
+/* margin-top: 2rem;*/
+/*}*/
+
+
+
+/*!*!* Status notification *!*/
+/*!*.status-notification {*!*/
+/*!* position: fixed;*!*/
+/*!* bottom: 20px;*!*/
+/*!* left: 80px; !* Position to the right of the panel *!*!*/
+/*!* width: 300px;*!*/
+/*!* max-width: calc(100vw - 100px);*!*/
+/*!* border-radius: 8px;*!*/
+/*!* padding: 15px;*!*/
+/*!* background: #323232;*!*/
+/*!* color: white;*!*/
+/*!* transform: translateY(20px);*!*/
+/*!* opacity: 0;*!*/
+/*!* transition: transform .3s, opacity .3s;*!*/
+/*!* z-index: 10000;*!*/
+/*!* box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*/
+/*!* pointer-events: none;*!*/
+/*!*}*!*/
+
+/*!*.status-notification.active {*!*/
+/*!* transform: translateY(0);*!*/
+/*!* opacity: 1;*!*/
+/*!* pointer-events: auto;*!*/
+/*!*}*!*/
+
+/*!*.status-notification .title {*!*/
+/*!* font-weight: 600;*!*/
+/*!* margin-bottom: 5px;*!*/
+/*!* font-size: 15px;*!*/
+/*!*}*!*/
+
+/*!*.status-notification .message {*!*/
+/*!* margin-bottom: 10px;*!*/
+/*!* font-size: 14px;*!*/
+/*!*}*!*/
+
+/*!*.status-notification .actions {*!*/
+/*!* display: flex;*!*/
+/*!* justify-content: flex-end;*!*/
+/*!*}*!*/
+
+/*!*.status-notification .actions button {*!*/
+/*!* padding: 6px 12px;*!*/
+/*!* background: rgba(255, 255, 255, .2);*!*/
+/*!* border: none;*!*/
+/*!* border-radius: 4px;*!*/
+/*!* color: white;*!*/
+/*!* cursor: pointer;*!*/
+/*!* font-size: 13px;*!*/
+/*!* transition: background .2s;*!*/
+/*!*}*!*/
+
+/*!*.status-notification .actions button:hover {*!*/
+/*!* background: rgba(255, 255, 255, .3);*!*/
+/*!*}*!*/
+
+/*!* Progress containers in notifications *!*/
+/*.progress-container {*/
+/* margin-top: 15px;*/
+/* background: rgba(255, 255, 255, .1);*/
+/* border-radius: 4px;*/
+/* padding: 10px;*/
+/* transition: all .3s;*/
+/*}*/
+
+/*.progress-container.complete {*/
+/* opacity: .5;*/
+/*}*/
+
+/*!* Collapsed state - just show the toggle button *!*/
+
+
+
+
+
+
+
+/*!***/
+/*Response stuff*/
+/* *!*/
+
+/*.columns {*/
+/* --wrap: nowrap;*/
+/*}*/
+/* .columns.stack-small {*/
+/* --wrap: wrap;*/
+/* }*/
+/* @media (min-width: 768px){*/
+/* .columns.stack-small {*/
+/* --wrap: nowrap;*/
+/* }*/
+/* }*/
+/*.column {*/
+/* width: 100%;*/
+/* padding: 1rem 0;*/
+/*}*/
+
+/*.width-300 {*/
+/* width: 300px!important;*/
+/* 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);
+}
+
+
+/*!***/
+/*Circular Loader*/
+/* *!*/
+/*!*.new-term-toggle:disabled + .loader,*!*/
+/*!*.loading .loader {*!*/
+/*!* width: 50px;*!*/
+/*!* aspect-ratio: 1;*!*/
+/*!* display: grid;*!*/
+/*!* border: 4px solid #0000;*!*/
+/*!* border-radius: 50%;*!*/
+/*!* border-right-color: var(--action-0);*!*/
+/*!* animation: l15 1s infinite linear;*!*/
+/*!*}*!*/
+/*!*.new-term-toggle:disabled + .loader::before,*!*/
+/*!*.new-term-toggle:disabled + .loader::after,*!*/
+/*!*.loading .loader::before,*!*/
+/*!*.loading .loader::after {*!*/
+/*!* content: "";*!*/
+/*!* grid-area: 1/1;*!*/
+/*!* margin: 2px;*!*/
+/*!* border: inherit;*!*/
+/*!* border-radius: 50%;*!*/
+/*!* animation: l15 2s infinite;*!*/
+/*!*}*!*/
+/*!*.new-term-toggle:disabled + .loader::after,*!*/
+/*!*.loading .loader::after {*!*/
+/*!* margin: 8px;*!*/
+/*!* animation-duration: 3s;*!*/
+/*!*}*!*/
+/*!*@keyframes l15{*!*/
+/*!* 100%{transform: rotate(1turn)}*!*/
+/*!*}*!*/
+
+
+
+/*!* High contrast mode support *!*/
+/*@media (forced-colors: active) {*/
+/* .feed-item {*/
+/* border: 1px solid CanvasText;*/
+/* }*/
+
+/* button,*/
+/* [role="button"] {*/
+/* border: 1px solid ButtonText;*/
+/* }*/
+
+/* button.favourite.favourited {*/
+/* background-color: Highlight;*/
+/* color: HighlightText;*/
+/* }*/
+/*}*/
+
+
+/*!** TODO: Verify **!*/
+
+input[type=time],
+input[type=datetime-local],
+input[type=date] {
+ padding: .5rem;
+ border: 1px solid var(--contrast-200);
+ border-radius: 4px;
+ font-size: 14px;
+ min-width: 180px;
+ background: var(--base);
+ color: var(--contrast);
+ cursor: pointer;
+ transition: border-color .2s ease;
+}
+
+.field-input-wrapper input[type=time]:focus,
+.field-input-wrapper input[type=datetime-local]:focus,
+.field-input-wrapper input[type=date]:focus,
+.time-wrapper input[type=time]:focus,
+.datetime-wrapper input[type=datetime-local]:focus,
+.date-wrapper input[type=date]:focus {
+ border-color: var(--action-0);
+ box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
+}
+
+/* Icon styling in form fields */
+.field-input-wrapper .icon,
+.time-wrapper .icon,
+.datetime-wrapper .icon,
+.date-wrapper .icon {
+ width: 18px;
+ height: 18px;
+ background-color: var(--contrast);
+ opacity: .7;
+}
+
+/*!* Required field asterisk *!*/
+/*.time-wrapper input[required],*/
+/*.datetime-wrapper input[required],*/
+/*.date-wrapper input[required] {*/
+/* border-left: 3px solid #dc3232;*/
+/*}*/
+
+/*!* Invalid field styling *!*/
+/*.time-wrapper input:invalid,*/
+/*.datetime-wrapper input:invalid,*/
+/*.date-wrapper input:invalid {*/
+/* border-color: #dc3232;*/
+/* background-color: #fef7f7;*/
+/*}*/
+
+/*!* Frontend Display *!*/
+/*.time-field-display,*/
+/*.datetime-field-display,*/
+/*.date-field-display {*/
+/* display: inline-flex;*/
+/* align-items: center;*/
+/* gap: .5rem;*/
+/* padding: .25rem 0;*/
+/*}*/
+
+/*.time-field-display svg,*/
+/*.datetime-field-display svg,*/
+/*.date-field-display svg {*/
+/* width: 16px;*/
+/* height: 16px;*/
+/* color: #0073aa;*/
+/* flex-shrink: 0;*/
+/*}*/
+
+/*.time-value,*/
+/*.datetime-value,*/
+/*.date-value {*/
+/* font-weight: 500;*/
+/* color: #333;*/
+/*}*/
+
+/*!* Set and Checkbox Field Display *!*/
+/*.set-field-display {*/
+/* --wrap: wrap;*/
+/*}*/
+
+/*.set-label,*/
+/*.checkbox-label {*/
+/* font-weight: 600;*/
+/* color: #555;*/
+/*}*/
+
+/*.set-item {*/
+/* background: #f0f0f1;*/
+/* padding: .25rem .5rem;*/
+/* border-radius: 3px;*/
+/* font-size: .9em;*/
+/* border: 1px solid #ddd;*/
+/*}*/
+
+/*!* Radio and Select Field Display *!*/
+/*.radio-field-display,*/
+/*.select-field-display {*/
+/* display: inline-flex;*/
+/* align-items: center;*/
+/* gap: .5rem;*/
+/*}*/
+
+/*.radio-label,*/
+/*.select-label {*/
+/* font-weight: 600;*/
+/* color: #555;*/
+/*}*/
+
+/*.radio-value,*/
+/*.select-value {*/
+/* background: #f8f9fa;*/
+/* padding: .25rem .5rem;*/
+/* border-radius: 3px;*/
+/* border: 1px solid #dee2e6;*/
+/*}*/
+
+/*!* True/False Field Display *!*/
+/*.true-false-display {*/
+/* display: inline-flex;*/
+/* align-items: center;*/
+/* gap: .5rem;*/
+/*}*/
+
+/*.true-false-label {*/
+/* font-weight: 600;*/
+/* color: #555;*/
+/*}*/
+
+/*.true-value {*/
+/* color: var(--success);*/
+/* font-weight: 600;*/
+/*}*/
+
+/*.false-value {*/
+/* color: var(--error);*/
+/* font-weight: 600;*/
+/*}*/
+
+/*!* Group Field Styling *!*/
+/*.group-field {*/
+/* border: 1px solid #e0e0e0;*/
+/* border-radius: 6px;*/
+/* padding: 1rem;*/
+/* margin: 1rem 0;*/
+/* background: #fafafa;*/
+/*}*/
+
+/*.group-label {*/
+/* font-size: 1.1em;*/
+/* font-weight: 600;*/
+/* color: #333;*/
+/* margin: 0 0 1rem 0;*/
+/* padding-bottom: .5rem;*/
+/* border-bottom: 1px solid #e0e0e0;*/
+/*}*/
+
+/*.group-content {*/
+/* --gap: .75rem;*/
+/*}*/
+
+/*.group-item {*/
+/* padding: .5rem 0;*/
+/* border-bottom: 1px solid #f0f0f0;*/
+/*}*/
+
+/*.group-item:last-child {*/
+/* border-bottom: none;*/
+/*}*/
+
+/*.subfield-label {*/
+/* font-weight: 600;*/
+/* color: #555;*/
+/* margin-right: .5rem;*/
+/*}*/
+
+/*!* Responsive Design *!*/
+/*@media (max-width: 768px) {*/
+/* .time-wrapper input[type="time"],*/
+/* .datetime-wrapper input[type="datetime-local"],*/
+/* .date-wrapper input[type="date"] {*/
+/* min-width: 150px;*/
+/* font-size: 16px; !* Prevents zoom on iOS *!*/
+/* }*/
+
+/* .set-field-display,*/
+/* .checkbox-field-display {*/
+/* flex-direction: column;*/
+/* align-items: flex-start;*/
+/* }*/
+
+/* .group-content {*/
+/* gap: .5rem;*/
+/* }*/
+/*}*/
+
+legend {
+ padding: 0 1rem;
+}
+.abs {
+ position: absolute;
+}
+.top {
+ top: 0;
+ right: 0;
+ left: 0;
+}
+.top-right {
+ top: 0;
+ right: 0;
+}
+.top-left {
+ top: 0;
+ left: 0;
+}
+
+.btm {
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.btm-right {
+ bottom: 0;
+ right: 0;
+}
+.btm-left {
+ bottom: 0;
+ left: 0;
+}
+.edges {
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+}
+
+
+
+/*********************** REFERRAL SYSTEM ***********************/
+.referral-widget {
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 24px;
+ margin: 20px 0;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.referral-header {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.referral-header h3 {
+ margin: 0 0 8px 0;
+ color: #2271b1;
+}
+
+.referral-header p {
+ margin: 0;
+ color: #666;
+ font-size: 14px;
+}
+
+/* Share Widget Styles */
+.referral-link-section {
+ margin-bottom: 20px;
+}
+
+.referral-link-section label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 8px;
+ color: #333;
+}
+
+.link-copy-wrapper {
+ display: flex;
+ gap: 8px;
+}
+
+.link-copy-wrapper input {
+ flex: 1;
+ padding: 10px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-family: monospace;
+ font-size: 13px;
+ background: #f9f9f9;
+}
+
+.copy-link-btn {
+ padding: 10px 20px;
+ background: #2271b1;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 600;
+ white-space: nowrap;
+ transition: background 0.2s;
+}
+
+.copy-link-btn:hover {
+ background: #135e96;
+}
+
+.referral-code-display {
+ margin: 8px 0 0 0;
+ font-size: 13px;
+ color: #666;
+}
+
+.referral-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+ gap: 16px;
+ margin-bottom: 20px;
+ padding: 16px;
+ background: #f8f9fa;
+ border-radius: 6px;
+}
+
+.stat-item {
+ text-align: center;
+}
+
+.stat-value {
+ display: block;
+ font-size: 24px;
+ font-weight: bold;
+ color: #2271b1;
+}
+
+.stat-label {
+ display: block;
+ font-size: 12px;
+ color: #666;
+ margin-top: 4px;
+}
+
+.share-buttons {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.share-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 10px 16px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ text-decoration: none;
+ color: #333;
+ font-size: 14px;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+
+nav.share .button:hover {
+ top: -2px;
+}
+
+/* Validation Widget Styles */
+.form-group {
+ margin-bottom: 16px;
+}
+
+.form-group label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 8px;
+ color: #333;
+}
+
+.input-button-wrapper {
+ display: flex;
+ gap: 8px;
+}
+
+.input-button-wrapper input {
+ flex: 1;
+ padding: 12px 16px;
+ border: 2px solid #ddd;
+ border-radius: 4px;
+ font-size: 16px;
+ font-family: monospace;
+ font-weight: 600;
+ text-transform: uppercase;
+ transition: border-color 0.2s;
+}
+
+.input-button-wrapper input:focus {
+ outline: none;
+ border-color: #2271b1;
+}
+
+.validate-btn {
+ padding: 12px 24px;
+ background: #2271b1;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 600;
+ white-space: nowrap;
+ transition: background 0.2s;
+}
+
+.validate-btn:hover {
+ background: #135e96;
+}
+
+.validate-btn:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+}
+
+.helper-text {
+ margin: 8px 0 0 0;
+ font-size: 13px;
+ color: #666;
+}
+
+.helper-text a {
+ color: #2271b1;
+ text-decoration: none;
+}
+
+.helper-text a:hover {
+ text-decoration: underline;
+}
+
+.message {
+ padding: 12px 16px;
+ border-radius: 4px;
+ margin-top: 16px;
+ font-size: 14px;
+}
+
+.message.success {
+ background: #d4edda;
+ color: #155724;
+ border: 1px solid #c3e6cb;
+}
+
+.message.error {
+ background: #f8d7da;
+ color: #721c24;
+ border: 1px solid #f5c6cb;
+}
+
+/* Success State Styles */
+.referral-success-state {
+ text-align: center;
+}
+
+.success-icon {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 20px;
+ background: #28a745;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-size: 40px;
+}
+
+.success-content h3 {
+ color: #28a745;
+ margin: 0 0 12px 0;
+}
+
+.reward-highlight {
+ background: #e7f5ff;
+ padding: 20px;
+ border-radius: 6px;
+ margin: 20px 0;
+ border-left: 4px solid #2271b1;
+}
+
+.reward-highlight strong {
+ color: #2271b1;
+ font-size: 18px;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 14px 32px;
+ background: #2271b1;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 4px;
+ font-weight: 600;
+ margin-top: 16px;
+ transition: background 0.2s;
+}
+
+.cta-button:hover {
+ background: #135e96;
+}
+
+.referred-by {
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid #ddd;
+ font-size: 13px;
+ color: #666;
+}
+
+.loading-spinner {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border: 2px solid #f3f3f3;
+ border-top: 2px solid #2271b1;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-left: 8px;
+ vertical-align: middle;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+ .input-button-wrapper {
+ flex-direction: column;
+ }
+
+ .validate-btn {
+ width: 100%;
+ }
+
+ .link-copy-wrapper {
+ flex-direction: column;
+ }
+
+ .copy-link-btn {
+ width: 100%;
+ }
+}
+
+.callalt.callalt,
+.callout.callout {
+ padding: 2rem;
+ margin: 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;
+}
+
+
+.timeline.terms {
+ list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+.timeline.terms > li {
+ width: 100%;
+}
+@media (min-width: 768px) {
+ .timeline.terms > li {
+ width: 50%;
+ }
+}
+
+/**********************************
+GALLERY
+ */
+/* -------------------------------------------------------
+ GALLERY DIALOG BASE
+------------------------------------------------------- */
+dialog.gallery[open] {
+ position: fixed;
+ inset: 1rem;
+ margin: 0;
+ border: none;
+ width: calc(100% - 2rem);
+ height: calc(100% - 2rem);
+ padding: 0;
+ background: rgba(var(--base-rgb),var(--rgb-heavy));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ backdrop-filter: blur(3px);
+ z-index: var(--zz-top);
+ max-height: 100vh;
+ max-width: 100vw;
+}
+
+.gallery .controls {
+ order: 3;
+ justify-content: flex-end;
+ --height: 2rem;
+}
+.gallery .controls .cancel {
+ order: 3;
+}
+
+dialog.gallery::backdrop {
+ background: rgba(var(--base-rgb), var(--rgb-medium));
+}
+
+/* -------------------------------------------------------
+ WRAPPER
+------------------------------------------------------- */
+dialog.gallery .wrap {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+/* -------------------------------------------------------
+ CLOSE BUTTON
+------------------------------------------------------- */
+/*dialog.gallery .cancel {*/
+/* position: absolute;*/
+/* top: 1rem;*/
+/* right: 1rem;*/
+/* background: rgba(0,0,0,0.4);*/
+/* color: #fff;*/
+/* border: none;*/
+/* padding: 0.6rem;*/
+/* border-radius: 50%;*/
+/* z-index: 10;*/
+/* cursor: pointer;*/
+/* transition: background 0.2s ease;*/
+/*}*/
+
+dialog.gallery .cancel:hover {
+ background: rgba(var(--base-rgb),var(--rgb-medium));
+}
+
+/* -------------------------------------------------------
+ NAV BUTTONS (Prev/Next)
+------------------------------------------------------- */
+/*dialog.gallery .nav {*/
+/* position: absolute;*/
+/* top: 50%;*/
+/* transform: translateY(-50%);*/
+/* z-index: 10;*/
+/* background: rgba(0,0,0,0.35);*/
+/* border: none;*/
+/* padding: 1rem;*/
+/* border-radius: 50%;*/
+/* cursor: pointer;*/
+/* transition: background .2s ease;*/
+/* color: #fff;*/
+/*}*/
+
+/*dialog.gallery .nav:hover {*/
+/* background: rgba(0,0,0,0.55);*/
+/*}*/
+
+/*dialog.gallery .nav.prev {*/
+/* left: 0.75rem;*/
+/*}*/
+
+/*dialog.gallery .nav.next {*/
+/* right: 0.75rem;*/
+/*}*/
+
+/* -------------------------------------------------------
+ IMAGE CONTENT LAYER
+------------------------------------------------------- */
+dialog.gallery .content {
+ position: relative;
+ flex: 1 1 auto;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ /* prevents accidental scrolling while zooming */
+ overflow: hidden;
+}
+
+/* Center image (the active one) */
+dialog.gallery .content .image {
+ max-width: 90vw;
+ max-height: 85vh;
+ object-fit: contain;
+ transition: transform 0.15s ease-out;
+ touch-action: none; /* IMPORTANT: allows pinch+pan */
+}
+
+/* Left/Right preload images (off-canvas) */
+dialog.gallery .image-left,
+dialog.gallery .image-right {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+/* -------------------------------------------------------
+ DETAILS PANEL
+------------------------------------------------------- */
+dialog.gallery details {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ width: calc(100% - 2rem);
+ max-width: 600px;
+ background: rgba(0,0,0,0.45);
+ color: #fff;
+ border-radius: 4px;
+ overflow: hidden;
+ z-index: 10;
+}
+
+dialog.gallery details summary {
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ user-select: none;
+}
+
+dialog.gallery details[open] .item-info {
+ padding: 1rem;
+}
+
+/* -------------------------------------------------------
+ COUNTER
+------------------------------------------------------- */
+dialog.gallery .counter {
+ position: absolute;
+ bottom: 1rem;
+ left: 1rem;
+ background: rgba(var(--base-rgb),var(--rgb-medium));
+ color: var(--contrast);
+ padding: 0.4rem 0.8rem;
+ border-radius: 3px;
+ font-size: 0.85rem;
+ z-index: 10;
+}
+
+/* -------------------------------------------------------
+ FAVOURITE (if needed later)
+------------------------------------------------------- */
+dialog.gallery .favourite {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ z-index: 10;
+}
+dialog.gallery .image {
+ opacity: 0;
+ transition: opacity .2s ease, transform .15s ease-out;
+}
+
+dialog.gallery .image[src] {
+ opacity: 1;
+}
+
+/* ================================================
+ REFERRAL SIDEBAR STYLES
+ Add these to your all.css
+ ================================================ */
+
+/* Reward Banner (Unlogged In) */
+.referral-reward-banner {
+ background: var(--action-0);
+ color: var(--action-contrast);
+ padding: 1.5rem;
+ border-radius: 8px;
+ text-align: center;
+ margin-bottom: 1.5rem;
+}
+
+.referral-reward-banner .reward-emoji {
+ font-size: 2.5rem;
+ display: block;
+ margin-bottom: 0.5rem;
+}
+
+.referral-reward-banner h4 {
+ margin: 0 0 0.5rem;
+ font-size: 1.25rem;
+ font-weight: 700;
+}
+
+.referral-reward-banner p {
+ margin: 0;
+ opacity: 0.95;
+}
+
+/* Code Verification */
+.check-code-btn {
+ width: 100%;
+ margin-top: 0.5rem;
+ background: var(--base-100);
+ color: var(--contrast-100);
+ border: 1px solid var(--contrast-200);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
+
+
+.code-status {
+ padding: 0.75rem;
+ border-radius: 4px;
+ margin-top: 0.5rem;
+ font-size: 0.875rem;
+}
+
+.code-status.loading {
+ background: var(--base-200);
+ color: var(--contrast-200);
+}
+
+.code-status.success {
+ background: var(--successBack);
+ color: var(--successText);
+ border: 1px solid var(--successBack);
+}
+
+.code-status.error {
+ background: var(--errorBack);
+ color: var(--errorText);
+ border: 1px solid var(--errorBack);
+}
+
+/* Footer Links */
+.referral-footer {
+ text-align: center;
+ padding: 1rem 0;
+ border-top: 1px solid var(--base-200);
+ margin-top: 1rem;
+}
+
+.referral-footer .text-link {
+ color: var(--contrast-200);
+ text-decoration: none;
+ font-size: 0.875rem;
+}
+
+.referral-footer .text-link:hover {
+ color: var(--action-0);
+ text-decoration: underline;
+}
+
+/* Share Section (Logged In) */
+.share-section {
+ margin-bottom: 1.5rem;
+}
+
+.share-section h4 {
+ margin: 0 0 0.75rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--contrast-200);
+}
+
+/* Copy Section */
+.copy-section {
+ margin-bottom: 1.5rem;
+}
+
+.copy-section h4 {
+ margin: 0 0 0.5rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--contrast-200);
+}
+
+.copy-group {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.copy-target {
+ flex: 1;
+ padding: 0.75rem;
+ background: var(--base-100);
+ border: 1px solid var(--base-200);
+ border-radius: 4px;
+ font-family: 'Monaco', 'Courier New', monospace;
+ font-size: 0.875rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ user-select: all;
+}
+
+.copy-btn {
+ flex-shrink: 0;
+ padding: 0.75rem;
+ background: var(--action-0);
+ color: var(--action-contrast);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.copy-btn.success {
+ background: var(--success);
+ color: var(--successText)
+}
+
+.copy-btn.selected {
+ background: var(--secondary-0);
+ color: var(--secondary-contrast);
+}
+
+/* Recent Referrals */
+.recent-referrals-section {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid var(--contrast-200);
+}
+
+.recent-referrals-section h4 {
+ margin: 0 0 0.75rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--contrast-200);
+}
+
+.recent-referrals-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.referral-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem;
+ background: var(--base-100);
+ border-radius: 4px;
+ font-size: 0.875rem;
+}
+
+.referral-info {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.referral-info strong {
+ color: var(--contrast-200);
+}
+
+.status-badge {
+ padding: 0.2rem 0.5rem;
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 500;
+ text-transform: capitalize;
+}
+
+.status-badge.pending {
+ background: var(--warningBack);
+ color: var(--warningText);
+}
+
+.status-badge.consulted {
+ background: var(--action-contrast);
+ color: var(--action-0);
+}
+
+.status-badge.treated {
+ background: var(--successBack);
+ color: var(--successText);
+}
+
+.referral-date {
+ font-size: 0.75rem;
+}
+
+.no-referrals,
+.loading {
+ text-align: center;
+ padding: 1rem;
+ color: var(--contrast-200);
+ font-size: 0.875rem;
+}
+
+/* Stats Summary */
+.stats-summary {
+ margin-bottom: 1.5rem;
+}
+
+.stat-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem;
+ border-bottom: 1px solid var(--base-200);
+}
+
+.stat-row:last-child {
+ border-bottom: none;
+}
+
+.stat-row.highlight {
+ background: var(--base-100);
+ border-radius: 4px;
+ border: 1px solid var(--base);
+ font-weight: 600;
+}
+
+.stat-label {
+ color: #666;
+ font-size: 0.875rem;
+}
+
+.stat-value {
+ color: #333;
+ font-weight: 600;
+ font-size: 1rem;
+}
+
+.stat-row.highlight .stat-value {
+ color: var(--action-0);
+ font-size: 1.25rem;
+}
+
+/* View Dashboard Button */
+.view-dashboard-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0.875rem;
+ background: var(--action-0);
+ color: var(--action-contrast);
+ text-decoration: none;
+ border-radius: 8px;
+ font-weight: 600;
+ transition: all 0.2s ease;
+}
+
+.jvb-referral button:not(.button) {
+ position: relative;
+ top: 0;
+ box-shadow: var(--shadow-none);
+ transition: top var(--transition-base), box-shadow var(--transition-base);
+}
+.jvb-referral button:not(.button):hover {
+ top: -4px;
+ box-shadow: var(--shadow-down);
+}
+.view-dashboard-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Success Content */
+.success-content {
+ padding: 2rem 1rem;
+ text-align: center;
+}
+
+.success-content h3 {
+ color: var(--success);
+ margin-bottom: 1rem;
+}
+
+.success-content p {
+ margin-bottom: 0.75rem;
+ color: var(--base-200);
+}
+
+.success-content .hint {
+ font-size: 0.875rem;
+ color: var(--base-200);
+ font-style: italic;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .share-buttons-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .copy-group {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .copy-btn {
+ width: 100%;
+ }
+
+ .referral-item {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+}
+
+/* Loading spinner */
+.code-status.loading::before,
+.loading::before {
+ content: '';
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid var(--action-200);
+ border-top: 2px solid var(--action-0);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-right: 0.5rem;
+ vertical-align: middle;
+}
\ No newline at end of file
diff --git a/copy-hours.css b/copy-hours.css
index 2b3f1f3..fdbe2f5 100644
--- a/copy-hours.css
+++ b/copy-hours.css
@@ -23,13 +23,13 @@
.copy-hours-content h3 {
margin: 0 0 1rem 0;
color: var(--contrast);
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.copy-hours-source {
background-color: var(--base-100);
padding: 1rem;
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
margin-bottom: 1.5rem;
border: 1px solid var(--base-200);
}
@@ -38,7 +38,7 @@
margin: 0 0 0.5rem 0;
color: var(--contrast-100);
text-transform: uppercase;
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: 600;
}
@@ -71,7 +71,7 @@
margin: 0 0 1rem 0;
color: var(--contrast-100);
text-transform: uppercase;
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: 600;
}
@@ -89,12 +89,12 @@
background-color: var(--action-50);
color: var(--action-contrast);
padding: 1rem 1.5rem;
- border-radius: var(--innerRadius);
- box-shadow: var(--shadow);
+ border-radius: var(--radius);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
z-index: 10000;
opacity: 0;
transform: translateX(100px);
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
display: flex;
align-items: center;
gap: 0.5rem;
diff --git a/dash.css b/dash.css
index 6ed6b8e..25ad7be 100644
--- a/dash.css
+++ b/dash.css
@@ -6,24 +6,33 @@
justify-content: flex-end;
}
.dashboard > header img {
- width: var(--height);
+ width: var(--btn);
}
.dashboard h1:first-of-type {
margin-top: 4rem!important;
}
+nav.dashboard-nav,
+nav.dashboard-nav ul {
+ --dir: row;
+}
+nav.dashboard-nav ul {
+ touch-action: pan-x;
+ overflow: auto hidden;
+}
main > footer {
- max-width: 100%!important;
- position: fixed;
- z-index: var(--z-top);
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- margin: 4rem 0 0 0!important;
- height: var(--height);
- padding: 0!important;
- background-color: var(--base);
- box-shadow: var(--shadow);
+ /*max-width: 100%!important;*/
+ /*position: fixed;*/
+ /*z-index: var(--z-7);*/
+ /*bottom: 0;*/
+ /*left: 0;*/
+ /*right: 0;*/
+ /*width: 100%;*/
+ /*margin: 4rem 0 0 0!important;*/
+ /*height: var(--btn);*/
+ /*padding: 0!important;*/
+ /*background-color: var(--base);*/
+ /*box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
+ padding: 0;
}
main>* {
max-width: min(768px, 90vw)!important;
@@ -31,7 +40,7 @@
}
main h1 {
margin: 0!important;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.item-grid .item {
@@ -45,7 +54,7 @@
}
.replace {
- margin-bottom: var(--offHeight)!important;
+ margin: 0 auto 0 var(--btn_) !important;
}
/********************************************
GRID VIEW
@@ -81,10 +90,18 @@
}
.grid-view .item .item-actions {
- position: absolute;
bottom: 0;
right: 0;
}
+.item-actions button {
+ min-height: 0;
+ width: var(--chipchip);
+ height: var(--chipchip);
+ background-color: rgba(var(--base-rgb), var(--op-45));
+}
+ .item-actions button:hover {
+ background-color: var(--base);
+ }
.list-view h3,
.list-view p {
@@ -95,9 +112,10 @@
.grid-view {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
- .grid-view .item .item-actions {
- bottom: unset;
- top: 0;
+}
+@media (max-width: 768px) {
+ .bulk-controls.bulk-controls.nowrap {
+ --wrap: wrap;
}
}
.bulk-controls {
@@ -105,7 +123,7 @@
}
.bulk-controls .selected-count {
font-weight: normal;
- font-size: var(--small);
+ font-size: var(--txt-small);
text-transform: none;
font-style: italic;
display: flex;
@@ -129,31 +147,137 @@
opacity: .6;
filter: var(--filter);
border: 2px solid transparent;
- transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
+ transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
}
.selected label:has(:checked) {
border-color: var(--action-0);
padding: 0;
opacity: 1;
filter: none;
- transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
+ transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
}
/******************************************************
TABLE VIEW
******************************************************/
+form.table label.select-item,
form.table img {
- max-height: 4rem;
+ width: 6rem;
+ height: 6rem;
+}
+form.table .item-grid.preview {
+ margin: 0;
+}
+
+td p {
+ width: max-content;
+}
+
+/* Dragging state */
+.timeline-point.is-dragging {
+ opacity: 0.4;
+ position: relative;
+}
+
+/* Drop indicators with gap */
+.timeline-point.drop-above {
+ position: relative;
+}
+
+.timeline-point.drop-above::before {
+ content: '';
+ position: absolute;
+ top: -4px;
+ left: 0;
+ right: 0;
+ height: 8px;
+ background: var(--action-0);
+ border-radius: 4px;
+ z-index: 10;
+ animation: pulse 0.6s ease-in-out infinite;
+}
+
+.timeline-point.drop-below {
+ position: relative;
+}
+
+.timeline-point.drop-below::after {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ height: 8px;
+ background: var(--action-0);
+ border-radius: 4px;
+ z-index: 10;
+ animation: pulse 0.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 0.6;
+ transform: scaleY(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: scaleY(1.2);
+ }
+}
+
+/* Make space for the indicator */
+.timeline-point.drop-above {
+ margin-top: 8px;
+ transition: margin-top 0.2s ease;
+}
+
+.timeline-point.drop-below {
+ margin-bottom: 8px;
+ transition: margin-bottom 0.2s ease;
+}
+
+/* Drag handle styling */
+.drag-handle {
+ cursor: grab;
+ padding: 0.5rem;
+ background: transparent;
+ border: none;
+ opacity: 0.6;
+ transition: opacity 0.2s ease;
+}
+
+.drag-handle:hover {
+ opacity: 1;
+}
+
+.drag-handle:active,
+.is-dragging .drag-handle {
+ cursor: grabbing;
+}
+
+/* Preview styling */
+.drag-preview .drag-handle {
+ pointer-events: none;
}
/******************************************************
FILTERS
******************************************************/
.all-filters {
- margin: 2rem 0;
+ margin: 0;
padding: 1rem 0;
border-top: 1px solid var(--base-200);
border-bottom: 1px solid var(--base-200);
+ --gap: 0;
}
+.all-filters .row {
+ --justify: flex-start;
+}
+ .all-filters[open] {
+ --gap: .5rem;
+ }
+ .all-filters summary {
+ width: 100%;
+ }
details.uploader + .items-list .all-filters {
border-top: none;
}
@@ -168,22 +292,33 @@
}
.all-filters span.label {
text-transform: uppercase;
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: 900;
width: 15vw;
display: inline-flex;
align-items: center;
padding-right: 2rem;
}
+@media (max-width: 767px) {
+ .all-filters > .row {
+ padding: .5rem 0;
+ }
+ .all-filters span.label {
+ padding-top: .5rem;
+ width: 100%;
+ border-top: 1px solid var(--base-200);
+ }
+}
.controls .icon {
--w: 1.4rem;
}
.all-filters .btn + label,
.all-filters button {
- height: fit-content;
+ height: var(--chipchip);
padding: .5rem!important;
min-width: 0;
- min-height: 0;
+ min-height: var(--chipchip);
+ width: var(--chipchip);
}
.all-filters .btn + label:hover,
.all-filters .btn + label:focus,
@@ -203,7 +338,7 @@
transform-origin: left;
width: 0;
padding: 0;
- transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
+ transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base);
}
.search-container button {
padding: .5rem;
@@ -215,7 +350,7 @@
.search-container.open .clear-search {
transform: scaleX(1);
transform-origin: left;
- transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
+ transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base);
}
.all-filters > .search,
input[type=search],
@@ -277,7 +412,7 @@
}
.group-fields.hours .time label {
margin: 0;
- font-size: var(--small);
+ font-size: var(--txt-small);
position: absolute;
top: -1rem;
left: 0;
@@ -312,7 +447,7 @@
}
.dashboard.dash h2 {
text-transform: none;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.dashboard.dash .replace > ul {
display: flex;
@@ -322,17 +457,40 @@
flex-wrap: wrap;
gap: .5rem;
}
-.dashboard.settings nav.tabs {
+ nav.tabs.tabs {
+ bottom: 0;
+ left: 0;
+ right: var(--btn);
+ }
+.dashboard.settings nav.tabs.tabs {
--height: 3.5rem;
- --x: var(--offHeight);
+ --x: var(--btn_);
position: fixed;
- bottom: var(--height);
+ bottom: var(--btn);
left: var(--x);
right: var(--x);
z-index:99;
width: calc(100% - var(--x) - var(--x));
background-color: var(--base);
}
+.jvb-seo-admin nav.tabs.tabs {
+ position: sticky;
+ padding-bottom: 0;
+ bottom: unset;
+ left: 0;
+ right: 0;
+ top: var(--btn);
+}
+ .jvb-seo-admin nav.tabs button {
+ border: none;
+ margin: 0 .125rem;
+ background-color: var(--base-200);
+ box-shadow:var(--shdw-none);
+ }
+ .jvb-seo-admin nav.tabs button.active {
+ background-color: var(--base);
+ color: var(--action-0);
+ }
nav.integrations ul,
nav.integrations li,
nav.integrations a,
@@ -363,11 +521,11 @@
.integration {
background: var(--base);
border: 2px solid var(--base-200);
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
padding: 1rem;
position: relative;
- transition: all var(--transition-base);
- box-shadow: var(--shadow);
+ transition: all var(--trans-base);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.integration.connected {
border-color: var(--success);
@@ -386,23 +544,23 @@
}
.integration h3 {
letter-spacing: 1px;
- font-size: var(--medium);
+ font-size: var(--txt-medium);
margin: 0;
}
.integration .meta {
margin-bottom: 1rem;
text-align: right;
color: var(--contrast-200);
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.integration .setup {
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: bold;
text-transform: uppercase;
}
.integration .setup .indicator {
- font-size: var(--medium);
+ font-size: var(--txt-medium);
}
.integration .connected .indicator,
.integration .setup .connected {
@@ -442,12 +600,6 @@
margin-top: 1rem;
}
-.hint {
- line-height: 1.2;
- font-style: italic;
- font-size: var(--small);
-}
-
.hasChanges button[data-action=save_credentials] {
border-color: var(--warning);
animation: pulse-color 1s infinite;
@@ -503,7 +655,7 @@
grid-column: 1/-1;
padding: 1rem 10vw;
margin: 0 10vw;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
background-color: var(--base-100);
}
@@ -601,3 +753,304 @@
color: #dc3545;
}
+
+
+/*******************************************
+REFERRAL
+ */
+.referral-dashboard {
+ max-width: var(--wide);
+}
+.card {
+ background-color: var(--base-100);
+ padding: 30px;
+ border-radius: var(--radius-outer);
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.dashboard-page.referral {
+ text-align: center;
+}
+.referral-dashboard .empty-state {
+ padding: 3rem 7vw;
+}
+.referral-dashboard .empty-state h3 {
+ margin-top: 0;
+}
+.referral-dashboard .empty-state h3 .icon:first-of-type {
+ margin-right: 1rem;
+}
+.referral-dashboard .empty-state h3 .icon:last-of-type {
+ margin-left: 1rem;
+}
+
+.item-grid.stats .card {
+ border: 1px solid var(--base);
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ flex-direction: column;
+}
+.item-grid.stats .card.highlight {
+ box-shadow: var(--contrast-rgb) var(--shadow);
+ background-color: var(--action-200);
+ color: var(--action-contrast);
+ grid-column: 1/-1;
+ margin: 0 4rem 30px;
+ aspect-ratio: unset;
+}
+.card h4 {
+ font-size: var(--medium);
+ color: var(--contrast-200);
+ font-weight: var(--fw-b-bold);
+ margin: 0 0 .5rem;
+}
+.card span {
+ color: var(--action-0);
+ font-weight: var(--fw-b-bold);
+ font-size: var(--txt-xx-large);
+}
+ .card.highlight span {
+ color: var(--action-contrast);
+ }
+
+
+/*.referral-dashboard {*/
+/* max-width: 1200px;*/
+/* margin: 0 auto;*/
+/*}*/
+/*.referral-header {*/
+/* text-align: center;*/
+/* margin-bottom: 30px;*/
+/*}*/
+/*.referral-code-card {*/
+/* background: var(--base-100);*/
+/* padding: 30px;*/
+/* border-radius: 8px;*/
+/* text-align: center;*/
+/* margin-bottom: 30px;*/
+/*}*/
+/*.code-display {*/
+/* display: flex;*/
+/* align-items: center;*/
+/* justify-content: center;*/
+/* gap: 15px;*/
+/* margin: 20px 0;*/
+/*}*/
+/*.code-display .code {*/
+/* font-size: 32px;*/
+/* font-weight: bold;*/
+/* letter-spacing: 2px;*/
+/* color: var(--action-0);*/
+/* user-select: all;*/
+/*}*/
+/*.stats-grid {*/
+/* display: grid;*/
+/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
+/* gap: 20px;*/
+/* margin-bottom: 30px;*/
+/*}*/
+/*.stat-card {*/
+/* background: white;*/
+/* padding: 25px;*/
+/* border-radius: 8px;*/
+/* border: 1px solid #ddd;*/
+/* text-align: center;*/
+/*}*/
+/*.stat-card.highlight {*/
+/* background: #d4edda;*/
+/* border-color: #c3e6cb;*/
+/*}*/
+/*.stat-card h4 {*/
+/* margin: 0 0 10px 0;*/
+/* color: #666;*/
+/* font-size: 14px;*/
+/* font-weight: 600;*/
+/* text-transform: uppercase;*/
+/*}*/
+/*.stat-number {*/
+/* font-size: 36px;*/
+/* font-weight: bold;*/
+/* color: #2271b1;*/
+/*}*/
+/*.referrals-list-card {*/
+/* background: white;*/
+/* padding: 25px;*/
+/* border-radius: 8px;*/
+/* border: 1px solid #ddd;*/
+/*}*/
+/*.referrals-table {*/
+/* width: 100%;*/
+/* border-collapse: collapse;*/
+/* margin-top: 15px;*/
+/*}*/
+/*.referrals-table th,*/
+/*.referrals-table td {*/
+/* padding: 12px;*/
+/* text-align: left;*/
+/* border-bottom: 1px solid #eee;*/
+/*}*/
+/*.referrals-table th {*/
+/* background: #f5f5f5;*/
+/* font-weight: 600;*/
+/*}*/
+/*.status-badge {*/
+/* padding: 4px 12px;*/
+/* border-radius: 12px;*/
+/* font-size: 12px;*/
+/* font-weight: 500;*/
+/*}*/
+/*.status-badge.pending {*/
+/* background: #fff3cd;*/
+/* color: #856404;*/
+/*}*/
+/*.status-badge.consulted {*/
+/* background: #d1ecf1;*/
+/* color: #0c5460;*/
+/*}*/
+/*.status-badge.treated {*/
+/* background: #d4edda;*/
+/* color: #155724;*/
+/*}*/
+
+nav.sidebar {
+ --wrap: nowrap;
+ position: fixed;
+ top: var(--btn);
+ bottom: 0;
+ left: 0;
+ z-index: var(--z-4);
+ height: calc(100% - var(--btn));
+ background-color: var(--base);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ width: var(--btn);
+ transition: var(--trans-size);
+ overflow: hidden auto;
+}
+nav.sidebar .icon {
+ --w: var(--chip_);
+ width: var(--btn);
+ transition: var(--trans-size), margin var(--trans-base);
+}
+nav.sidebar.open {
+ width: fit-content;
+ max-width: 100%;
+}
+nav.sidebar.open .icon {
+ --w: var(--chip);
+ margin: .75rem;
+ width: var(--w);
+}
+
+nav.sidebar ul {
+ height: max-content;
+ width: 100%;
+ --gap: 0;
+}
+nav.sidebar .title {
+ display: block;
+}
+/*nav.sidebar .title,*/
+/*nav.sidebar .toggle {*/
+/* transition: var(--trans-size);*/
+/*}*/
+nav.sidebar .toggle {
+ width: var(--btn);
+ height: var(--chipchip);
+ box-shadow: none;
+ background-color: transparent;
+ min-height: 0;
+}
+nav.sidebar .toggle:hover,
+nav.sidebar .toggle:focus {
+ background-color:var(--action-0);
+ color: var(--action-contrast);
+}
+
+/*nav.sidebar:not(.open) .title,*/
+/*nav.sidebar:not(.open) .toggle:not(.main) {*/
+/* position: absolute;*/
+/* left: var(--offScreen);*/
+/* width: 0;*/
+/* height: 0;*/
+/* max-width: 0;*/
+/* max-height: 0;*/
+/*}*/
+nav.sidebar .toggle.main {
+ position: fixed;
+ left: unset;
+ bottom: 0;
+ right: 0;
+ width: var(--btn);
+ height: var(--btn);
+ z-index: var(--z-8);
+ box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
+}
+
+nav.sidebar .title {
+ white-space: nowrap;
+}
+
+nav.sidebar li {
+ --justify: center;
+ flex-wrap: nowrap;
+ overflow: hidden;
+ align-items: flex-start;
+}
+nav.sidebar.open li > div {
+ width: 100%;
+ padding-right: var(--btn);
+}
+nav.sidebar.open li.has-submenu > div {
+ padding-right: 0;
+}
+nav.sidebar.open li.has-submenu > ul {
+ padding-left: var(--chip);
+}
+
+nav.sidebar .a {
+ color: var(--contrast-200);
+}
+
+nav.sidebar a,
+nav.sidebar .a {
+ height: var(--chipchip);
+ /*width: var(--btn);*/
+ display: flex;
+ justify-content:center;
+ align-items:center;
+ transition: none;
+ padding-left: 0;
+}
+nav.sidebar.open a,
+nav.sidebar.open .a {
+ width: 100%;
+ justify-content: flex-start;
+}
+
+nav.sidebar .has-submenu ul {
+ max-height: 0;
+ height: 0;
+ overflow:hidden;
+ transition: var(--trans-size);
+}
+nav.sidebar .has-submenu.open > ul {
+ height: 100%;
+ max-height: fit-content;
+}
+
+
+
+header .title,
+header .title a {
+ height: var(--btn);
+ margin: 0;
+ display:block;
+}
+header .title {
+ margin-left: var(--btn);
+}
+header .title a {
+ width: var(--btn);
+}
\ No newline at end of file
diff --git a/feed.css b/feed.css
index 5471f2f..97057b1 100644
--- a/feed.css
+++ b/feed.css
@@ -5,11 +5,11 @@
}
.feed-block > *:not(.feed-grid, h2) {
- max-width: var(--alignWide);
+ max-width: var(--wide);
margin: 1rem var(--mr) 1rem var(--ml);
}
.feed-block > h2 {
- max-width: var(--maxWidth);
+ max-width: var(--content);
}
.feed-block[data-loading="true"] {
@@ -57,7 +57,7 @@
background: var(--base-50);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
opacity: 0;
- transition: opacity var(--transition-base) var(--delay);
+ transition: opacity var(--trans-base) var(--delay);
height: fit-content;
padding: 0;
}
@@ -91,7 +91,7 @@
width: 100%;
height: 100%;
object-fit: cover;
- transition: transform var(--timing) var(--function);
+ transition: transform var(--trans-t) var(--trans-fn);
}
.artist-tattoos a:hover img,
@@ -108,7 +108,7 @@
margin: 0!important;
font-size: 1.1rem;
font-family: var(--body);
- font-weight: var(--bWeight);
+ font-weight: var(--fw-b);
text-align: center;
}
.item-info span {
@@ -169,7 +169,7 @@
top: .5rem;
right: .5rem;
z-index: 10;
- background: var(--overlay-medium);
+ background: rgba(var(--base-rgb),var(--op-4));
border-radius: 50%;
box-shadow: var(--subtle);
border: none;
@@ -180,7 +180,7 @@
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
button.favourite:hover {
@@ -219,7 +219,7 @@
/* position: relative;*/
/* justify-content: flex-start;*/
/* gap: .5rem;*/
- /* border-radius: var(--innerRadius);*/
+ /* border-radius: var(--radius);*/
}
.feed-filters details[open] summary {
background-color: var(--base-50);
@@ -243,7 +243,7 @@
border: 1px solid var(--base-200);
border-radius: 4px;
font-size: .875rem;
- transition: border-color var(--transition-base);
+ transition: border-color var(--trans-base);
margin-bottom: .5rem;
}
.filter-toggle .icon {
@@ -252,7 +252,7 @@
.type-filter:hover {
color: var(--action-0);
border-color: var(--action-0);
- transition: var(--transition-color);
+ transition: var(--trans-color);
}
.feed-filters .type-filter > label {
flex-direction: column;
@@ -316,7 +316,7 @@
top: .5rem;
right: 4rem;
opacity: 0;
- transition: transform var(--timing) var(--function);
+ transition: transform var(--trans-t) var(--trans-fn);
transition-property: max-width, transform;
}
.feed-filters input:checked + label .label {
@@ -355,7 +355,7 @@
max-width: none!important;
width: 100%;
height: 100%;
- background: var(--overlay-medium);
+ background: rgba(var(--base-rgb),var(--op-4));
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
@@ -370,7 +370,7 @@
background: var(--base);
padding: 2rem;
border-radius: 1rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
text-align: center;
width: min(400px, 60vw);
}
@@ -503,9 +503,9 @@
bottom: 0;
left: 0;
right: 0;
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
backdrop-filter: blur(5px);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
z-index: 1;
padding: .25rem .25rem .25rem 1.1rem;
}
@@ -566,8 +566,8 @@
opacity: 1;
transform: scaleY(1);
transform-origin: bottom;
- transition: opacity var(--transition-base),
- transform var(--transition-base);
+ transition: opacity var(--trans-base),
+ transform var(--trans-base);
}
.loading .changing .loading-message p {
@@ -635,13 +635,13 @@
color: var(--contrast-200);
border: none;
border-radius: 4px;
- font-size: var(--medium);
+ font-size: var(--txt-medium);
cursor: pointer;
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
.load-more[hidden]{
opacity: 0;
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
.load-more:hover {
@@ -915,7 +915,7 @@
.common-term {
background: var(--base-50);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
}
.loading-indicator {
@@ -963,7 +963,7 @@
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.back-to-parent:hover {
@@ -1040,7 +1040,7 @@
border-radius: 4px;
cursor: pointer;
color: var(--contrast);
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.term-breadcrumb button:hover {
@@ -1062,7 +1062,7 @@
}
.suggestion-prompt {
- font-size: var(--small);
+ font-size: var(--txt-small);
color: var(--contrast-50);
margin-bottom: 1rem;
}
@@ -1098,7 +1098,7 @@
}
.parent-row {
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.parent-row label {
@@ -1171,7 +1171,7 @@
align-items: center;
}
.gallery-nav:hover {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
}
.gallery-nav:hover {
@@ -1199,11 +1199,11 @@
bottom: 1rem;
left: 2rem;
width: calc(100% - 4rem);
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
padding: 0;
}
.gallery-content details:hover,
.gallery-content details[open] {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
backdrop-filter: blur(5px);
}
diff --git a/forms.css b/forms.css
index 5a64bde..ec3bdcc 100644
--- a/forms.css
+++ b/forms.css
@@ -1,3 +1,683 @@
+/******************************************************************
+FORM INPUTS - BASE
+******************************************************************/
+textarea,
+input:is([type=date], [type=number], [type=text], [type=url],
+ [type=email], [type=tel], [type=password], [type=search],
+ [type=datetime-local], [type=time]) {
+ font-family: var(--body);
+ font-size: var(--txt-medium);
+ color: var(--contrast);
+ padding: var(--p-y) var(--p-x);
+ border-radius: var(--radius);
+ background-color: var(--base);
+ outline: 0;
+ border: 1px solid var(--base-100);
+ border-bottom: 2px solid var(--contrast-200);
+ width: 100%;
+ max-width: 100%;
+ margin: 0 4px;
+}
+
+/******************************************************************
+FORM INPUTS - STATES
+******************************************************************/
+textarea:focus,
+input:is([type=date], [type=number], [type=text], [type=url],
+ [type=email], [type=tel], [type=password], [type=search],
+ [type=datetime-local], [type=time]):focus {
+ outline: var(--action-50);
+ background-color: var(--base-100);
+ color: var(--contrast);
+}
+
+textarea::placeholder,
+input::placeholder {
+ font-family: var(--body);
+ color: var(--base-200);
+}
+
+@media (min-width: 768px) {
+ :root {
+ --p-y: 1rem;
+ }
+}
+
+/******************************************************************
+SELECT
+******************************************************************/
+select {
+ background: var(--base);
+ border: 2px solid var(--base-100);
+ border-radius: var(--radius);
+ color: var(--contrast);
+ cursor: pointer;
+ font-family: var(--body);
+ font-size: var(--txt-small);
+ padding: .5rem 1rem;
+ width: 100%;
+}
+
+select:disabled {
+ background-color: var(--base-50);
+ border-color: var(--base-100);
+ color: var(--base-200);
+ cursor: not-allowed;
+}
+
+select option {
+ background: var(--base);
+ color: var(--contrast);
+ padding: .5rem;
+}
+
+select option:hover,
+select option:focus,
+select option:active,
+select option:checked {
+ background: var(--action-0);
+ color: var(--base);
+ box-shadow: 0 0 0 100px var(--action-0) inset;
+}
+
+select option:checked {
+ background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
+ color: var(--base);
+}
+
+select:hover {
+ border-color: var(--action-0);
+}
+
+select:focus {
+ border-color: var(--action-0);
+}
+
+/******************************************************************
+SEARCH & SPECIAL INPUTS
+******************************************************************/
+input[type=search]:focus + .clear-search {
+ opacity: 1;
+ cursor: pointer;
+}
+
+.search-container .clear-search {
+ opacity: 0;
+ cursor: default;
+}
+
+.search-container .icon.search {
+ padding: 4px 8px;
+ color: var(--contrast-200);
+ --w: 3rem;
+}
+
+input[type="search"]::-moz-search-clear-button,
+input[type="search"]::-ms-clear,
+input[type="search"]::-ms-reveal,
+input[type="search"]::search-cancel-button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ display: none;
+ visibility: hidden;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance:none;
+}
+
+input[type=url] {
+ background: var(--linkIcon);
+ background-position: .5em;
+ background-size: 1em;
+ background-repeat: no-repeat;
+ padding-left: 2em;
+}
+
+/******************************************************************
+LABELS & FIELDS
+******************************************************************/
+.integration .label,
+label {
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-bottom: .5rem;
+ display: block;
+}
+
+.field {
+ margin: 2rem 0;
+ position: relative;
+}
+
+.field:has(.has-tooltip) label {
+ margin-left: 2rem;
+}
+
+legend {
+ padding: 0 1rem;
+}
+
+/**********************
+DATE & TIME FIELDS
+**********************/
+.date-wrapper {
+ position: relative;
+ display: inline-block;
+}
+
+input[type=date] {
+ padding: 8px 36px 8px 8px;
+ border-radius: 4px;
+}
+
+input[type=date]::-webkit-calendar-picker-indicator {
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: pointer;
+}
+
+input[type=date] + .icon {
+ --w: 20px;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+}
+
+input:is([type=time], [type=datetime-local], [type=date]) {
+ padding: .5rem;
+ border: 1px solid var(--contrast-200);
+ border-radius: 4px;
+ font-size: 14px;
+ min-width: 180px;
+ background: var(--base);
+ color: var(--contrast);
+ cursor: pointer;
+}
+
+.field-input-wrapper input:is([type=time], [type=datetime-local], [type=date]):focus,
+.time-wrapper input[type=time]:focus,
+.datetime-wrapper input[type=datetime-local]:focus,
+.date-wrapper input[type=date]:focus {
+ border-color: var(--action-0);
+ box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
+}
+
+.field-input-wrapper .icon,
+.time-wrapper .icon,
+.datetime-wrapper .icon,
+.date-wrapper .icon {
+ width: 18px;
+ height: 18px;
+ background-color: var(--contrast);
+ opacity: .7;
+}
+
+/**********************
+SPECIAL FIELDS
+**********************/
+.selected-items {
+ --justify: flex-start;
+ --gap: .5rem;
+ margin-bottom: .5rem;
+}
+
+.selected-item {
+ padding: .25rem .5rem;
+ margin: .125em;
+ background: var(--base-100);
+ border-radius: .25rem;
+ font-size: var(--txt-medium);
+ border: 1px solid var(--base-200);
+ position: relative;
+}
+
+.remove-item {
+ background: none;
+ border: none;
+ padding: .25rem;
+ cursor: pointer;
+ color: #666;
+ border-radius: var(--radius);
+ width: 1.5em;
+ height: 1.5em;
+}
+
+.remove-item .close {
+ width: .5em;
+ height: .5em;
+}
+
+.remove-item:hover {
+ color: var(--action-0);
+ background: #fee;
+}
+
+.clear-filters {
+ margin-left: auto;
+ border: 1px solid var(--base-200);
+}
+
+/******************************************************************
+CHECKBOXES & RADIOS
+******************************************************************/
+[type=radio],
+[type=checkbox],
+input.ch {
+ position: absolute;
+ opacity: 0;
+ left: -200vw;
+}
+
+[type=radio] + label,
+[type=checkbox] + label,
+input.ch + label {
+ position: relative;
+ cursor: pointer;
+}
+
+[type=radio] + label:hover,
+[type=checkbox] + label:hover {
+ color: var(--action-0);
+}
+
+[type=radio] + label::before,
+[type=checkbox] + label::before,
+input.ch + label::before,
+[type=radio] + label::after,
+[type=checkbox] + label::after,
+input.ch + label::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+}
+
+[type=radio] + label::after,
+[type=checkbox] + label::after,
+input.ch + label::after {
+ left: 5px;
+ transform: translateY(-70%) rotate(45deg);
+ width: 5px;
+ height: 10px;
+ border: solid var(--light-0);
+ border-width: 0 2px 2px 0;
+ display: none;
+}
+
+[type=radio] + label::before,
+[type=checkbox] + label::before,
+input.ch + label::before {
+ left: 0;
+ transform: translateY(-50%);
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid var(--contrast-200);
+ background-color: var(--base);
+ border-radius: var(--radius);
+}
+
+[type=radio]:hover + label::before,
+[type=checkbox]:hover + label::before,
+input.ch:hover + label::before {
+ border-color: var(--action-200);
+}
+
+[type=radio]:checked + label::before,
+[type=checkbox]:checked + label::before,
+input.ch:checked + label::before {
+ background-color: var(--action-0);
+ border-color: var(--action-100);
+}
+
+[type=radio]:checked + label::before {
+ border-radius: 50%;
+}
+
+[type=checkbox]:checked + label::after,
+input.ch:checked + label::after {
+ display: block;
+ left: 5px;
+ top: 50%;
+ transform: translateY(-70%) rotate(45deg);
+ width: .35rem;
+ height: .66rem;
+ border: solid var(--light-0);
+ border-width: 0 2px 2px 0;
+}
+
+[type=radio]:disabled + label,
+[type=checkbox]:disabled + label,
+input.ch:disabled + label {
+ cursor: not-allowed;
+ background-color: var(--base-50);
+ color: var(--base-200);
+ border-color: var(--base-200);
+}
+
+[type=radio]:disabled + label:hover,
+[type=checkbox]:disabled + label:hover,
+input.ch:disabled + label:hover {
+ background-color: var(--base-50);
+ color: var(--base-200);
+ border-color: var(--base-200);
+}
+
+[type=radio]:disabled + label::before,
+[type=checkbox]:disabled + label::before,
+input.ch:disabled + label::before {
+ border-color: var(--base-200);
+}
+
+[type=radio]:not(.btn) + label,
+[type=checkbox]:not(.btn) + label,
+input.ch + label {
+ flex: 1;
+ padding-left: 2rem;
+ transform-origin: top center;
+ will-change: transform;
+}
+
+/* Button-style checkboxes/radios */
+.btn + label::before,
+.btn + label::after {
+ display: none;
+}
+
+.btn + label {
+ --w: 1.2em;
+ border: 1px solid var(--base-200);
+ border-radius: var(--radius);
+ min-width: 2rem;
+ min-height: 2rem;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: .5rem;
+ color: var(--contrast-200);
+ opacity: .8;
+}
+
+.radio-options.status label {
+ padding: 0 .5rem;
+}
+
+.btn:checked + label {
+ border-color: var(--contrast);
+ color: var(--contrast);
+ opacity: 1;
+}
+
+.btn + label:hover {
+ color: var(--action-50);
+ border-color: var(--action-50);
+}
+
+input[hidden] + label,
+.btn[hidden] + label {
+ display: none!important;
+}
+
+.checkbox-options {
+ --gap: .5rem 2rem;
+}
+
+.checkbox-options label {
+ flex: unset!important;
+}
+
+.radio-options {
+ --gap: .125rem .5rem;
+}
+
+.radio-options input:not(.ch) + label::before {
+ display: none!important;
+}
+
+.radio-options input:not(.ch) + label {
+ flex: unset!important;
+ padding: .25rem!important;
+ border-radius: 4px;
+ border: 1px solid var(--base-100);
+ color: var(--contrast-200);
+ font-weight: normal;
+ text-align: center;
+}
+
+.radio-options input:not(.ch) + label:hover,
+.radio-options input:not(.ch):checked + label {
+ border-color: var(--action-0);
+ color: var(--action-0);
+}
+
+/******************************************************************
+QUANTITY FIELD
+******************************************************************/
+.quantity {
+ margin: 0;
+ display: inline-flex;
+ width: fit-content;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ position: relative;
+}
+
+.quantity:focus-within {
+ border-color: var(--action-0);
+}
+
+.quantity label {
+ margin: 0;
+ font-size: var(--txt-small);
+}
+
+.quantity button {
+ background: var(--base);
+ padding: 0;
+ width: 38px;
+ height: 38px;
+ z-index: 0;
+ position: relative;
+ border: 1px solid var(--base-200);
+ color: var(--contrast-200);
+}
+
+.quantity button:hover:not(:disabled) {
+ color: var(--action-0);
+ border-color: var(--action-0);
+ background-color: var(--base);
+}
+
+.quantity button:active:not(:disabled) {
+ background-color: var(--action-0);
+ color: var(--light-0);
+ transform: scale(.95);
+}
+
+.quantity button:disabled {
+ opacity: .5;
+ cursor: not-allowed;
+}
+
+.quantity input[type=number] {
+ z-index: 1;
+ border: 1px solid var(--base-200);
+ background: var(--base);
+ text-align: center;
+ font-size: 1.1rem;
+ width: 60px;
+ height: 48px;
+ margin: 0;
+ padding: 0!important;
+ appearance: textfield;
+}
+
+.quantity input[type=number]::-webkit-outer-spin-button,
+.quantity input[type=number]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+.quantity input[type=number]:focus {
+ background-color: var(--base-50);
+}
+
+.quantity button.increase {
+ left: -2px;
+ border-radius: 0 4px 4px 0;
+}
+
+.quantity button.decrease {
+ right: -2px;
+ border-radius: 4px 0 0 4px;
+}
+
+/******************************************************************
+TAXONOMY SELECTOR
+******************************************************************/
+.items-container {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+.create-new-term {
+ margin-top: 1rem;
+ width: 100%;
+}
+
+.create-new-term .field,
+.create-new-term[open] summary {
+ margin-bottom: 1rem;
+}
+
+.create-new-term .field {
+ max-width: 100%;
+}
+
+#jvb-selector > .wrap {
+ --wrap: nowrap;
+ --justify: flex-start;
+}
+
+#jvb-selector .items-wrap {
+ width: 100%;
+}
+
+#jvb-selector .items-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(1fr, 100%))
+}
+
+/******************************
+TABS
+******************************/
+.tab-content[hidden] {
+ display: block!important;
+ transform: scaleY(0);
+ height: 0;
+ overflow: hidden;
+}
+
+.tab-content[hidden]:focus-within {
+ transform: scaleY(1);
+ height:auto;
+}
+
+nav.tabs h2 {
+ margin: 0!important;
+ line-height: 1;
+ font-size: var(--txt-medium);
+ display: flex;
+ color: var(--contrast);
+ white-space: nowrap;
+ gap: 1rem;
+}
+
+nav.tabs .active h2 {
+ color: var(--action-contrast);
+}
+
+nav.tabs button {
+ padding: .75rem 1.5rem;
+ border-radius: 0;
+ position: relative;
+ border: 2px solid var(--action-0);
+}
+
+nav.tabs > button:first-of-type {
+ border-top-left-radius: var(--radius);
+}
+
+nav.tabs > button:last-of-type {
+ border-top-right-radius: var(--radius);
+}
+
+.tabs > button:hover,
+.tabs > button:focus {
+ background-color: var(--base-200);
+}
+
+.tabs > button::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 3px;
+ background-color: var(--action-50);
+ transition: width .3s;
+}
+
+.tabs > button:hover::after,
+.tabs > button.active::after {
+ width: 100%;
+}
+
+.tabs > button.active::after {
+ background-color: var(--action-200);
+}
+
+.tabs > button.active {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+
+.tabs > button.active:hover,
+.tabs > button.active:focus {
+ background-color: var(--action-100);
+}
+
+.tab-content h2 {
+ display: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+/************* DONE TO HERE *****/
+
details.uploader .file-upload-container {
margin: 1rem 0;
max-width: 100%;
@@ -5,7 +685,7 @@
@media (min-width: 768px) {
details.uploader .file-upload-container {
margin: 1rem var(--mr) 1rem var(--ml);
- max-width: var(--maxWidth);
+ max-width: var(--content);
}
}
/*.field.upload .item-grid,*/
@@ -19,18 +699,18 @@
padding: 2rem;
text-align: center;
transition: all .3s ease;
- background: rgba(var(--action-rgb),var(--rgb-subtle));
+ background: rgba(var(--action-rgb),var(--op-1));
position: relative;
cursor: pointer;
}
.file-upload-wrapper h2 {
margin: 0!important;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.file-upload-wrapper:hover,
.dragover {
- background: rgba(var(--action-rgb),var(--rgb-subtle-hover));
+ background: rgba(var(--action-rgb),var(--op-2));
border-color: var(--action-0)!important;
}
@@ -70,10 +750,9 @@
top: 0;
right: 0;
}
-.item-grid.restore,
-.item-grid.group,
-.item-grid.preview {
- grid-template-columns: repeat(3, 1fr)
+
+.item-grid.group {
+ margin-bottom: 0;
}
.item-grid.restore .item,
.item-grid.group .item,
@@ -126,7 +805,7 @@
.item-grid.preview:has([type=checkbox]:checked),
.item-grid.group:has([type=checkbox]:checked) {
padding: 1rem;
- background-color: rgba(var(--contrast-rgb),var(--rgb-subtle));
+ background-color: rgba(var(--contrast-rgb),var(--op-1));
}
.item-grid.restore:has([type=checkbox]:checked) .item,
.item-grid.preview:has([type=checkbox]:checked) .item,
@@ -148,28 +827,32 @@
.item-grid.preview .item:has([type=checkbox]:checked),
.item-grid.group .item:has([type=checkbox]:checked) {
padding: .5rem;
- background-color: rgba(var(--action-rgb), var(--rgb-medium));
+ background-color: rgba(var(--action-rgb), var(--op-4));
opacity: 1;
}
+.item-grid.preview summary span {
+ display: none;
+}
+
.item-grid.restore .item:has([type=checkbox]:checked) img,
.item-grid.preview .item:has([type=checkbox]:checked) img,
.item-grid.group .item:has([type=checkbox]:checked) img {
filter: none;
}
-[type=radio].featured:checked + label .star,
-[type=radio].featured + label .star + .star {
+[type=radio].featured:checked + label .icon-star,
+[type=radio].featured + label .icon-star-fi {
display: none;
}
-[type=radio].featured + label .star,
-[type=radio].featured:checked + label .star + .star {
+[type=radio].featured + label .icon-star,
+[type=radio].featured:checked + label .icon-star-fi {
display: inline-block;
}
.restore.restore.item,
.upload.upload.item {
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
aspect-ratio: unset;
overflow: hidden;
background: var(--base);
@@ -185,30 +868,36 @@
}
.restore.item img,
.upload.item img {
- transition: transform var(--transition-base);
+ transition: transform var(--trans-base);
}
.restore.item:hover img,
.upload.item:hover img {
transform: scale(1.02);
- transition: transform var(--transition-base);
+ transition: transform var(--trans-base);
}
.upload-group {
background-image: var(--dashed-action);
padding: 5px;
- border-radius: var(--innerRadius);
- background-color: rgba(var(--action-rgb), var(--rgb-subtle));
+ border-radius: var(--radius);
+ background-color: rgba(var(--action-rgb), var(--op-1));
+}
+.upload-group .selected .field {
+ margin: 0;
+}
+.upload-group .group-actions button {
+ aspect-ratio: unset;
}
.submit-uploads {
position: fixed;
- bottom: var(--offHeight);
- right: var(--offHeight);
+ bottom: var(--btn_);
+ right: var(--btn_);
z-index: var(--z-6);
- height: var(--height);
- box-shadow: var(--shadow);
- border-radius: var(--innerRadius);
+ height: var(--btn);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ border-radius: var(--radius);
animation: pulse-color 5s infinite;
animation-delay: 1s;
background-color: var(--action-0);
@@ -220,15 +909,16 @@
}
.empty-group {
+ order: -1;
grid-column: 1 / -1;
padding: 20px;
background-image: var(--dashed-action);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
margin: 10px 0;
cursor: pointer;
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
text-align: center;
- background-color: rgba(var(--action-rgb), var(--rgb-subtle));
+ background-color: rgba(var(--action-rgb), var(--op-1));
}
.group-display:not([hidden]) ~ .file-upload-container {
@@ -239,12 +929,12 @@
.dragging {
opacity: .7;
transform: scale(.95) rotate(3deg);
- z-index: var(--z-top);
+ z-index: var(--z-7);
box-shadow: 0 8px 25px rgba(0,0,0,.3);
}
.dragover {
- background: rgba(var(--action-rgb),var(--rgb-light))!important;
+ background: rgba(var(--action-rgb),var(--op-3))!important;
border-color: var(--action-0) !important;
transform: scale(1.05);
animation: drop-pulse .8s infinite ease-in-out;
@@ -252,7 +942,7 @@
.drag-preview {
position: fixed;
- z-index: var(--zz-top);
+ z-index: var(--z-9);
width: fit-content;
overflow: visible;
pointer-events: none;
@@ -273,8 +963,8 @@
top: 0;
left: 0;
background: var(--base);
- border-radius: var(--outerRadius);
- box-shadow: var(--shadow);
+ border-radius: var(--radius-outer);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.drag-preview .drag-items .drag-item:nth-child(1) {
@@ -338,7 +1028,7 @@
justify-content: center;
font-size: 12px;
font-weight: bold;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
z-index: var(--z-3);
}
@@ -357,11 +1047,11 @@
@keyframes drop-pulse {
0%, 100% {
- background-color: rgba(var(--action-rgb),var(--rgb-light));
+ background-color: rgba(var(--action-rgb),var(--op-3));
transform: scale(1.02);
}
50% {
- background-color: var(rgba(var(--action-rgb),var(--rgb-medium)));
+ background-color: var(rgba(var(--action-rgb),var(--op-4)));
transform: scale(1.04);
}
}
@@ -383,8 +1073,8 @@
.group-display.group-display {
position: fixed;
- top: var(--height);
- bottom: var(--height);
+ top: var(--btn);
+ bottom: var(--btn);
left: 0;
right: 0;
max-height: var(--maxHeight);
@@ -406,7 +1096,7 @@
left: -.5rem;
right: -.5rem;
position: absolute;
- background-color: rgba(var(--base-rgb), var(--rgb-heavy));
+ background-color: rgba(var(--base-rgb), var(--op-6));
filter: blur(5px);
}
@@ -455,9 +1145,9 @@
position: absolute;
left: 0;
right: 0;
- background-color: rgba(var(--base-rgb), var(--rgb-heavy));
+ background-color: rgba(var(--base-rgb), var(--op-6));
z-index: var(--z-3);
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.group-display .item-grid {
height: 100%;
@@ -476,7 +1166,7 @@
height: fit-content;
top: 0;
z-index: var(--z-3);
- background-color: rgba(var(--action-rgb), var(--rgb-heavy));
+ background-color: rgba(var(--action-rgb), var(--op-6));
}
.group-display .sidebar .upload-group {
order: 1;
@@ -502,7 +1192,7 @@
}
.submit-uploads {
- bottom: var(--height);
+ bottom: var(--btn);
left: 0;
right: 0;
width: 100%;
@@ -527,7 +1217,7 @@
.group-display .preview-wrap,
.group-display .sidebar {
--justify: flex-start;
- max-height: calc(100vh - var(--doubleHeight));
+ max-height: calc(100vh - var(--btnbtn));
overflow: hidden auto;
}
.group-display .preview-wrap,
@@ -539,7 +1229,7 @@
.preview-wrap .hint {
position: sticky;
z-index: var(--z-3);
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
background-color: var(--base);
width: 100%;
}
@@ -564,14 +1254,14 @@
.restore-uploads {
position: fixed;
- top: var(--offHeight);
- bottom: var(--offHeight);
+ top: var(--btn_);
+ bottom: var(--btn_);
left: 1rem;
right: 1rem;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
padding: 1rem;
- z-index: var(--z-top);
- box-shadow: var(--shadow);
+ z-index: var(--z-7);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
background-color: var(--base-200);
overflow: hidden auto;
}
@@ -585,7 +1275,7 @@
top: 0;
background-color: var(--base-50);
z-index: var(--z-6);
- box-shadow: var(--shadow-down);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
margin-bottom: 2rem;
}
@@ -599,8 +1289,8 @@
flex-wrap: wrap;
padding: .25rem;
gap: .5rem 1rem;
- border-top-left-radius: var(--innerRadius);
- border-top-right-radius: var(--innerRadius);
+ border-top-left-radius: var(--radius);
+ border-top-right-radius: var(--radius);
border-bottom: 4px solid var(--base-50);
}
.ql-toolbar .ql-formats {
@@ -610,8 +1300,8 @@
.editor-container .ql-container {
--padding: 1rem;
background-color: var(--base);
- border-bottom-left-radius: var(--innerRadius);
- border-bottom-right-radius: var(--innerRadius);
+ border-bottom-left-radius: var(--radius);
+ border-bottom-right-radius: var(--radius);
height: fit-content;
padding: 2px;
border: 1px solid var(--base-200);
@@ -641,7 +1331,7 @@
transform: translateY(10px);
background-color: var(--base-100);
border: 1px solid var(--base);
- box-shadow: 0px 0px 5px var(--overlay-heavy);
+ box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6));
color: var(--contrast);
padding: 5px 12px;
white-space: nowrap;
@@ -677,12 +1367,12 @@
/*.group-actions button {*/
/* padding: 0.5rem 0.75rem;*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* background: rgba(var(--action-rgb), 0.1);*/
/* border: 1px solid rgba(var(--action-rgb), 0.3);*/
/* color: var(--action-0);*/
-/* font-size: var(--small);*/
-/* transition: all var(--transition-base);*/
+/* font-size: var(--txt-small);*/
+/* transition: all var(--trans-base);*/
/* cursor: pointer;*/
/*}*/
@@ -696,7 +1386,7 @@
/*.item-grid.group {*/
/* background: rgba(255, 255, 255, 0.5);*/
/* border: 1px solid rgba(var(--action-rgb), 0.15);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* padding: 0.75rem;*/
/* min-height: 100px;*/
/*}*/
@@ -704,7 +1394,7 @@
/*!* Group count hint *!*/
/*.group-count {*/
/* margin-top: 0.5rem;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* color: var(--contrast-70);*/
/* font-style: italic;*/
/*}*/
@@ -775,9 +1465,9 @@
/* padding: 1rem;*/
/* background: rgba(var(--action-rgb), 0.05);*/
/* border: 1px solid rgba(var(--action-rgb), 0.2);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* margin: 1rem 0;*/
-/* animation: slideDown var(--transition-base);*/
+/* animation: slideDown var(--trans-base);*/
/*}*/
/*.field.upload .progress[hidden] {*/
@@ -807,7 +1497,7 @@
/*!* Progress details - styled for row layout with text and count *!*/
/*.progress > .details {*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* color: var(--contrast);*/
/* display: flex;*/
/* justify-content: space-between;*/
@@ -841,7 +1531,7 @@
/* gap: 0.5rem;*/
/* z-index: var(--z-2);*/
/* color: white;*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* backdrop-filter: blur(2px);*/
/*}*/
@@ -864,7 +1554,7 @@
/*.upload.item .progress span.details {*/
/* color: white;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* font-weight: 500;*/
/*}*/
@@ -897,7 +1587,7 @@
/*!* Selection checkbox - always visible on hover or when checked *!*/
/*.upload.item .upload-select + label::before {*/
/* opacity: 0.7;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/*}*/
/*.upload.item:hover .upload-select + label::before,*/
@@ -925,7 +1615,7 @@
/*}*/
/*.selection-count {*/
-/* font-size: var(--large);*/
+/* font-size: var(--txt-large);*/
/* color: var(--action-0);*/
/*}*/
@@ -1031,7 +1721,7 @@
/*.restore-message h4 {*/
/* margin: 0 0 0.5rem 0;*/
/* color: var(--action-0);*/
-/* font-size: var(--large);*/
+/* font-size: var(--txt-large);*/
/*}*/
/*.restore-message .restore-details {*/
@@ -1042,7 +1732,7 @@
/*.restore-message .hint {*/
/* margin: 0.5rem 0 0 0;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* color: var(--contrast-70);*/
/*}*/
@@ -1080,10 +1770,10 @@
/* display: flex;*/
/* flex-direction: column;*/
/* border: 2px solid var(--border);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* overflow: hidden;*/
/* cursor: pointer;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/* position: relative;*/
/*}*/
@@ -1132,7 +1822,7 @@
/*}*/
/*.restore-item-info .name {*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* font-weight: 600;*/
/* color: var(--contrast);*/
/* overflow: hidden;*/
@@ -1178,13 +1868,13 @@
/*.selection-controls button {*/
/* padding: 0.5rem 1rem;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* border: 1px solid var(--border);*/
/* background: var(--base);*/
/* color: var(--contrast);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* cursor: pointer;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/*}*/
/*.selection-controls button:hover {*/
@@ -1206,9 +1896,9 @@
/* font-size: var(--base);*/
/* font-weight: 600;*/
/* border: none;*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* cursor: pointer;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/* display: flex;*/
/* align-items: center;*/
/* gap: 0.5rem;*/
@@ -1326,7 +2016,7 @@
.form-progress .progress {
background: var(--base-100);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
padding: 1rem;
}
@@ -1347,7 +2037,7 @@
}
.form-progress .step-text {
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: 600;
color: var(--contrast-200);
}
@@ -1385,7 +2075,7 @@
align-items: center;
justify-content: center;
font-weight: 700;
- font-size: var(--small);
+ font-size: var(--txt-small);
border: 3px solid var(--base);
}
@@ -1447,7 +2137,7 @@
.error-message {
color: var(--errorText);
- font-size: var(--small);
+ font-size: var(--txt-small);
margin-top: 0.25rem;
display: block;
}
@@ -1456,11 +2146,11 @@
@media (max-width: 768px) {
form nav.tabs button {
min-width: 80px;
- font-size: var(--small);
+ font-size: var(--txt-small);
}
form nav.tabs button h2 {
- font-size: var(--small);
+ font-size: var(--txt-small);
}
form {
@@ -1514,7 +2204,7 @@
/* Validation Message */
.validation-message {
color: var(--error-0);
- font-size: var(--small);
+ font-size: var(--txt-small);
margin-top: 0.25rem;
display: block;
animation: slideDown 0.2s ease;
@@ -1625,14 +2315,14 @@
}
.ql-toolbar button {
- --height: fit-content;
+ min-height: 0;
padding: .5rem;
}
.success-message {
- color: var(--success, #16a34a);
- background-color: var(--success-bg, #f0fdf4);
- border: 1px solid var(--success, #16a34a);
+ color: var(--success);
+ background-color: var(--successBack);
+ border: 1px solid var(--success);
padding: 0.75rem 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
@@ -1648,16 +2338,16 @@
}
.success-box {
- background-color: var(--success-bg, #f0fdf4);
- border: 2px solid var(--success, #16a34a);
+ background-color: var(--successBack);
+ border: 2px solid var(--success);
padding: 1.5rem;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
margin-bottom: 1rem;
text-align: center;
}
.success-box h3 {
- color: var(--success, #16a34a);
+ color: var(--success);
margin-bottom: 0.5rem;
}
@@ -1685,19 +2375,19 @@
.field-error input,
.field-error textarea,
.field-error select {
- border-color: var(--error, #dc2626);
+ border-color: var(--error);
}
.error-message {
- color: var(--error, #dc2626);
- font-size: var(--small);
+ color: var(--error);
+ font-size: var(--txt-small);
margin-top: 0.25rem;
display: block;
}
.form-error {
- background-color: var(--error-bg, #fee);
- border: 1px solid var(--error, #dc2626);
+ background-color: var(--errorBack);
+ border: 1px solid var(--error);
padding: 0.75rem;
border-radius: var(--radius);
margin-bottom: 1rem;
@@ -1707,7 +2397,7 @@
.has-success input,
.has-success textarea,
.has-success select {
- border-color: var(--success, #16a34a);
+ border-color: var(--success);
}
.form-error {
display: flex;
@@ -1725,5 +2415,86 @@
width: 100%;
background-color: var(--base-100);
padding: .5rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+
+.invite details {
+ margin-bottom: 1.5rem;
+}
+
+/*******************************
+Tag Field
+ */
+/* Tag List Field */
+.field.tag-list .tag-input-row {
+ display: flex;
+ gap: 0.5rem;
+ align-items: flex-start;
+ margin-bottom: 1rem;
+ flex-wrap: wrap;
+}
+
+.field.tag-list .tag-input-row .field {
+ flex: 1;
+ min-width: 150px;
+ margin: 0;
+}
+
+.field.tag-list .tag-input-row .add-tag-item {
+ flex-shrink: 0;
+ white-space: nowrap;
+ margin-top: calc(var(--txt-medium) + 1rem);
+}
+
+.field.tag-list .tag-items {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+}
+
+.field.tag-list .tag-item {
+ background: var(--base-200);
+ padding: 0.4rem 0.75rem;
+ border-radius: 4px;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.9rem;
+ line-height: 1.2;
+}
+
+.field.tag-list .tag-item:hover {
+ background: var(--base-100);
+}
+
+.field.tag-list .tag-label {
+ max-width: 300px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.field.tag-list .remove-tag {
+ min-height: 0;
+ padding: .25rem;
+ color: var(--contrast);
+ transition: transform 0.2s;
+ box-shadow: none;
+}
+
+.field.tag-list .remove-tag:hover {
+ transform: scale(1.2);
+}
+
+@media (max-width: 768px) {
+ .field.tag-list .tag-input-row {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .field.tag-list .tag-input-row .field {
+ min-width: 100%;
+ }
}
\ No newline at end of file
diff --git a/nav-hover.css b/nav-hover.css
new file mode 100644
index 0000000..d92589b
--- /dev/null
+++ b/nav-hover.css
@@ -0,0 +1,96 @@
+/**********************************************************
+NAVIGATION - HOVER STYLES (OPTIMIZED)
+Only loaded for (hover: hover) and (pointer: fine)
+**********************************************************/
+
+/**
+ * Primary hover state - All elements that use action-0 on hover
+ * Using :is() to group selectors reduces repetition
+ */
+:is(
+ nav a,
+ nav a:visited,
+ .has-submenu button,
+ nav.always > button,
+ nav.always .has-submenu > a,
+ nav.always .submenu > li > a,
+ .index a,
+ .index .active a
+):hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+
+/**
+ * Submenu hover opening
+ */
+.has-submenu:hover > ul.submenu {
+ transform: scaleY(1);
+ max-height: 1000%;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+
+/**
+ * Icon rotation on hover
+ */
+.has-submenu:hover > button:not(.notifications, .quick-help) .icon {
+ transform: rotate(var(--nav-icon-rotation));
+}
+
+/**
+ * Special hover states - Different from primary action-0
+ */
+
+/* Submenu items - overlay effect */
+.submenu li:hover {
+ --c: var(--action-rgb);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+}
+
+/* Keep submenu link backgrounds transparent */
+.submenu a:hover {
+ background-color: transparent;
+}
+
+/* Fixed navigation - uses action-contrast directly */
+:is(
+ nav.fixed.bottom a,
+ nav.fixed.bottom a:visited
+):hover {
+ color: var(--action-contrast);
+}
+
+/* Condensed nav - border instead of background */
+:is(
+ .condensed a,
+ .condensed a:visited
+):hover {
+ border-color: var(--action-0);
+}
+
+/* Breadcrumbs - transparent background, action-0 text */
+:is(
+ nav#breadcrumbs a,
+ nav#breadcrumbs a:visited
+):hover {
+ background-color: transparent;
+ color: var(--action-0);
+}
+
+/*!* Current hours - lighter shade *!*/
+/*.current-hours a:hover {*/
+/* color: var(--action-200);*/
+/*}*/
+
+/*!* Find us - inverted colors *!*/
+/*.find-us a:hover {*/
+/* background-color: var(--base);*/
+/* color: var(--contrast);*/
+/* border-color: var(--contrast);*/
+/*}*/
+
+/* Share button - vertical shift effect */
+nav.share .button:hover {
+ top: -4px;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
+}
\ No newline at end of file
diff --git a/nav.css b/nav.css
index 2e29555..5a48ba2 100644
--- a/nav.css
+++ b/nav.css
@@ -1,711 +1,730 @@
-/**********************************************************
-BASE NAV STYLES
-**********************************************************/
-nav {
- --py: .25rem;
- --px: 1rem;
- max-width: 100%;
- font-family: var(--heading);
-}
+/**************************************************************
+BASE NAVIGATION - Works for 80% of cases
+**************************************************************/
nav,
nav ol,
-nav ul,
-nav li,
-nav a {
- height: var(--height);
- display: flex;
- justify-content: var(--justify);
- align-items: var(--align);
- gap: var(--gap);
- flex-wrap: var(--wrap);
- flex-direction: var(--dir);
-}
-
-ul.socials {
- --w: 1.2em;
- --height: fit-content;
- gap: .5rem;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: nowrap;
- flex-direction: row;
- overflow: auto hidden;
- touch-action: pan-x;
- list-style: none;
-}
-nav:not(:has(> ul)),
-nav > ul {
- --justify: flex-start;
- --align: center;
+nav ul {
+ --padding: 0 1rem;
--wrap: nowrap;
- --w: 1em;
- --dir: row;
- position: relative;
- overflow: auto hidden;
- touch-action: pan-x;
+ display: flex;
+ flex-direction: var(--dir, row);
+ justify-content: var(--justify, flex-start);
+ align-items: var(--align, center);
+ gap: var(--gap, 0);
+ flex-wrap: var(--wrap, nowrap);
+ height: var(--btn, 3rem);
+ max-width: 100%;
+ font-family: var(--heading);
+ padding: 0;
+ margin: 0;
}
-nav a {
- padding: 0 var(--px);
+/* Items fill parent */
+nav li {
+ display: flex;
+ align-items: center;
+ height: max(var(--btn), max-content);
+ width: 100%;
+ max-inline-size: none;
+}
+
+/* Links fill parent */
+nav a,
+nav button {
+ display: flex;
+ text-decoration: none;
+ align-items: center;
+ justify-content: center;
+ height: var(--btn);
+ width: 100%;
white-space: nowrap;
text-transform: uppercase;
+ transition: var(--trans-color);
}
-nav .current a,
-nav a.current,
-nav a:hover,
-nav a:focus,
-nav a:hover:visited,
-nav a:focus:visited {
- background-color: var(--action-0);
- color: var(--action-contrast);
- transition: background-color var(--transition-base),
- color var(--transition-base);
+nav a {
+ height: var(--btn);
+ padding: var(--padding);
}
-
-nav ol,
-nav ul {
- list-style: none;
- margin: 0;
+/* Buttons */
+nav button {
+ justify-content: center;
+ aspect-ratio: 1;
padding: 0;
-}
-
-/**************************************************************
-SUBMENU
-**************************************************************/
-.has-submenu button:hover,
-nav a:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-.has-submenu button {
- height: var(--height);
- width: var(--height);
- padding: 0;
- /*background-color: var(--base);*/
border: 2px solid var(--base);
color: var(--contrast);
border-radius: 0;
}
+/**************************************************************
+STATES - Apply to all navs
+**************************************************************/
+
+/* Active/Focus states */
+ nav a:hover,
+ nav .current a,
+ nav a.current,
+ nav a:focus,
+ nav a:focus:visited,
+ nav button:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+
+
+/* Icon rotation */
.toggle .icon {
transform: rotate(0deg);
- transition: transform var(--timing) var(--function);
- transition-property: transform, background-color, color;
+ transition: transform var(--trans-base);
}
-.has-submenu.open > button:not(.notifications, .quick-help) .icon,
-.has-submenu:hover > button:not(.notifications, .quick-help) .icon {
+
+.has-submenu.open > button .icon {
transform: rotate(900deg);
}
+/**************************************************************
+SUBMENUS - Generic pattern
+**************************************************************/
+.has-submenu {
+ position: relative;
+}
+
ul.submenu {
--dir: column;
- --wrap: nowrap;
- --gap: 0;
+ height: max-content;
position: absolute;
top: 100%;
left: 0;
max-height: 0;
transform: scaleY(0);
transform-origin: top;
- width: max-content;
- min-width: 100%;
- background-color: var(--overlay-light);
- border: 2px solid var(--overlay-light);
- transition: all var(--timing) var(--function);
- box-shadow: var(--shadow-none);
-}
-
-.always ul.submenu {
- position: relative;
- top: 0;
- left: 0;
+ width: max(100%, max-content);
+ background-color: rgba(var(--base-rgb),var(--op-3));
+ border: 2px solid rgba(var(--base-rgb),var(--op-3));
+ transition: all var(--trans-t) var(--trans-fn);
+ box-shadow: var(--shdw-none);
+ overflow: hidden;
}
.submenu li {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
border: 1px solid var(--base-50);
}
-.submenu li:hover {
- --c: var(--action-rgb);
- background-color: var(--overlay-heavy);
-}
-.submenu a:hover {
- background-color: transparent;
-}
-.wp-site-blocks > header ul.submenu {
- right: 0;
- left: auto;
-}
-/**
-Opening Submenus
- */
-.has-submenu.open > ul.submenu,
-.has-submenu:hover > ul.submenu {
+/* Open state */
+.open > ul.submenu {
transform: scaleY(1);
max-height: 1000%;
- box-shadow: var(--shadow);
-}
-/**************************************************************
-FIXED
-**************************************************************/
-nav.on-this-page,
-nav.fixed.bottom {
- --dir: row;
- --gap: 0;
- width: calc(100% - var(--height));
- left: 0;
- bottom: 0;
- position: fixed;
- box-shadow: var(--shadow);
- z-index: var(--zz-top);
-}
-nav.fixed.bottom ul {
- width: 100%;
- --justify: space-between;
- background-color: var(--base);
- padding: 0 .25rem;
-}
-nav.fixed li,
-nav.fixed a {
- --justify: center;
- width: 100%;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
-nav.fixed.bottom a:visited,
-nav.fixed.bottom a {
- color: var(--contrast);
- font-size: var(--small);
+/**************************************************************
+ACCESSIBILITY - Universal
+**************************************************************/
+.screen-reader-text {
+ position: absolute;
+ width: 1px;
+ height: 1px;
padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
}
-@media (min-width:768px) {
- nav.fixed.bottom a:visited,
- nav.fixed.bottom a {
- font-size: var(--medium);
- }
+
+nav a:focus:not(:focus-visible) {
+ outline: none;
}
-nav.fixed.bottom a:hover,
-nav.fixed.bottom a:hover:visited,
-nav.fixed.bottom a:focus,
-nav.fixed.bottom a:focus:visited {
- color: var(--action-contrast);
+
+nav a:focus-visible {
+ outline: 2px solid var(--action-0);
+ outline-offset: 2px;
}
-.fixed.bottom li {
+
+/**************************************************************
+VARIANT: MOBILE NAV (.always)
+Only define what makes it different from base
+**************************************************************/
+nav.always {
+ /* Different positioning */
+ --dir: column;
+ --wrap: nowrap;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ width: var(--btn);
+ z-index: var(--z-10);
+}
+
+nav.always.open {
+ --justify: flex-end;
+ width: 100vw;
+ height: 100vh;
+ padding-bottom: var(--btn_);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ backdrop-filter: blur(5px);
+}
+
+nav.always > ul {
+ --dir: column;
+ --align: center;
+ --justify: flex-start;
+ --gap: 0;
+ height: 100%;
+ position: relative;
+ right: -300vw;
+ width: 100vw;
+ max-height: 100%;
+ padding: 1rem 0 0;
+ overflow: hidden auto;
+ transition: right var(--trans-base);
+}
+
+nav.always.open > ul {
+ right: 0;
+}
+
+nav.always li {
+ flex-wrap: wrap;
+ background-color: rgba(var(--base-rgb), var(--op-6));
+}
+
+nav.always a {
+ padding: 1rem;
+ max-width: calc(100% - var(--btn));
+ text-align: center;
+}
+
+/* Split layout for items with submenus */
+nav.always .has-submenu {
+ display: flex;
+}
+
+nav.always .has-submenu > a {
flex: 1;
}
-nav.always a {
- padding: 0;
- --justify: center;
-}
-nav.always .socials {
- width: 100%;
-}
- nav.always .socials li {
- width: 100%;
- }
-nav.always li {
- gap: 0;
- --justify:flex-start;
-}
- nav.always > ul > li > a {
- width: 80%;
- }
-nav.always .submenu {
- width: 80%;
- min-width: 80%;
- box-shadow: none!important;
- border: 2px solid var(--action-0);
- background-color: rgba(var(--contrast-rgb), var(--rgb-subtle));
-}
- nav.always .submenu li {
- background-color: var(--overlay-light);
- }
-nav.fixed .has-submenu > a,
-nav.always .has-submenu > a {
- width: 80%;
-}
-.has-submenu > button {
- width: 20%;
-}
-/**************************************************************
-BREADCRUMBS
-**************************************************************/
-nav#breadcrumbs {
- --height: 1.5em;
- --w: 20px;
- width: fit-content;
- max-width: var(--full);
- position: absolute;
- background-color: var(--overlay-medium);
- font-size: var(--small);
- padding: .125em;
- overflow:visible;
- --gap: 0;
-}
-nav#breadcrumbs li + li::before {
- content: '/';
- color: var(--contrast-200);
-}
-nav#breadcrumbs li:last-of-type {
- margin-right: .5em;
-}
-nav#breadcrumbs span,
-nav#breadcrumbs a {
- padding: 0 .125rem;
- white-space: nowrap;
- height: 2em;
- color: var(--contrast);
- text-transform: none;
- width: max-content;
-}
-nav#breadcrumbs span {
- display: flex;
- align-items: center;
- padding-left: .5em;
-}
-nav#breadcrumbs a:focus:visited,
-nav#breadcrumbs a:hover:visited,
-nav#breadcrumbs a:focus,
-nav#breadcrumbs a:hover {
- background-color: transparent;
- color: var(--action-0);
-}
-nav#breadcrumbs a:has(.icon) {
- width: 2rem;
-}
-/**************************************************************
-MOBILE
-**************************************************************/
-nav.always {
- z-index: var(--z-above);
- position: fixed;
- width: var(--height);
- bottom: 0;
- right: 0;
-}
-nav.always.open {
- width: 100vw;
- height: 100vh;
- padding-bottom:var(--offHeight);
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- justify-content: flex-end;
- flex-direction: column;
- z-index: var(--z-above);
-}
-nav.always > ul {
- --dir: column;
- --wrap: nowrap;
- --justify: flex-start;
- --align: center;
- --gap: 0;
- position: relative;
- right: -300vw;
- padding: 1rem 0 0;
- width: 100vw;
- height: fit-content;
- max-height: 100%;
- overflow:hidden auto;
- transition: right var(--transition-base);
-}
-nav.always.open > ul {
- right: 0;
- transition: right var(--transition-base);
-}
-/*nav.always > ul li:hover,*/
-/*nav.always > ul li:focus-within,*/
-/*nav.always > ul li.active {*/
-/* background-color: var(--overlay-heavy);*/
-/*}*/
-nav.always li {
- max-inline-size: none;
- width: 100%;
- height: fit-content;
- --dir: row;
- --wrap: wrap;
-}
-nav.always a {
- --py: 1rem;
- width: 100%;
- min-height: var(--height);
+nav.always .has-submenu > button {
+ flex: 0 0 var(--btn);
}
+/* Submenu adjustments */
+nav.always .submenu {
+ position: relative;
+ padding-right: 4rem;
+ height: max-content;
+ top: 0;
+ width: 100%;
+ border: 2px solid var(--action-0);
+ background-color: rgba(var(--contrast-rgb), var(--op-1));
+}
+
+nav.always .submenu li {
+ background-color: rgba(var(--base-rgb),var(--op-3));
+}
+
+/* Toggle button */
nav.always > button {
position: fixed;
bottom: 0;
right: 0;
- width: var(--height);
- height: var(--height);
- border-radius: 0;
+ width: var(--btn);
+ height: var(--btn);
background-color: var(--base);
color: var(--contrast);
- transition: width var(--timing) var(--function);
- transition-property: width, background-color;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ transition: width var(--trans-base);
}
-nav.always > button:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
+ nav.always > button:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ }
+
nav.always.open > button {
- --c: var(--action-rgb);
- z-index: 1000000;
width: 100%;
- background-color: var(--overlay-heavy);
- color: var(--contrast);
+ background-color: rgba(var(--base-rgb),var(--op-6));
backdrop-filter: blur(5px);
-}
-nav.always.open > button:hover,
-nav.always.open > button:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-nav.always.open > button .icon-list,
-nav.always >button .icon-x {
- transform: scale(0);
- height: 0;
- width: 0;
- position: absolute;
-}
-nav.always > button .icon-list,
-nav.always.open > button .icon-x {
- transform: scale(1);
- height: 32px;
- width: 32px;
-}
-nav.always .has-submenu:hover > .submenu,
-nav.always .has-submenu.open > .submenu {
- height: max-content;
+ z-index: 1000000;
}
-nav.always .has-submenu:hover > a,
-nav.always .submenu > li > a:hover,
-nav.always .submenu > li > a:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
+/* Icon toggle */
+nav.always > button .icon-x,
+nav.always.open > button .icon-list {
+ display: none;
}
+
+nav.always > button .icon-list,
+nav.always.open > button .icon-x {
+ display: block;
+ width: 32px;
+ height: 32px;
+}
+
@media (min-width: 768px) {
- /*nav.always a {*/
- /* padding: 2rem 0;*/
- /*}*/
nav.always > ul {
- padding: var(--height) 0 0;
+ padding-top: var(--btn);
}
}
+
/**************************************************************
-ON THIS PAGE
+VARIANT: BREADCRUMBS (#breadcrumbs)
+Only define what makes it different
+**************************************************************/
+nav#breadcrumbs {
+ /* Different sizing */
+ height: max-content;
+ --wrap: wrap;
+ --gap: 0;
+ width: max-content;
+ max-width: var(--full);
+ position: absolute;
+ background-color: rgba(var(--base-rgb),var(--op-4));
+ font-size: var(--txt-x-small);
+ padding: .125em;
+ z-index: var(--z-7);
+}
+#breadcrumbs ol {
+ height: max-content;
+}
+#breadcrumbs li {
+ width: max-content;
+}
+#breadcrumbs a {
+ height: var(--chip);
+}
+
+#breadcrumbs li::after {
+ content: '/';
+ color: var(--contrast-200);
+ padding: 0 .25rem;
+}
+ #breadcrumbs li:last-of-type::after {
+ display: none;
+ }
+
+#breadcrumbs :is(a, span) {
+ padding: 0 .125rem;
+ color: var(--contrast);
+ text-transform: none;
+}
+
+#breadcrumbs a:focus {
+ background-color: transparent;
+ color: var(--action-0);
+}
+
+/**************************************************************
+VARIANT: FIXED BOTTOM (nav.fixed.bottom)
+Only define what makes it different
+**************************************************************/
+nav.fixed.bottom {
+ /* Different positioning */
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: calc(100% - var(--btn));
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ z-index: var(--z-9);
+}
+
+nav.fixed.bottom ul {
+ --justify: space-between;
+ width: 100%;
+ background-color: var(--base);
+ padding: 0 .25rem;
+}
+
+nav.fixed.bottom li {
+ flex: 1;
+ justify-content: center;
+}
+
+nav.fixed.bottom a {
+ color: var(--contrast);
+ font-size: var(--txt-x-small);
+}
+
+@media (min-width: 768px) {
+ nav.fixed.bottom a {
+ font-size: var(--txt-medium);
+ }
+}
+
+/**************************************************************
+VARIANT: ON THIS PAGE (nav.on-this-page)
+Only define what makes it different
**************************************************************/
nav.on-this-page {
--justify: space-between;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: calc(100% - var(--btn));
max-width: none;
- z-index: var(--z-6);
- margin: 0;
padding: 0 .5rem;
- background-color: var(--overlay-medium);
+ background-color: rgba(var(--base-rgb),var(--op-4));
color: var(--base-200);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ z-index: var(--z-6);
}
+
body:has(nav.fixed) nav.on-this-page {
- bottom: var(--offHeight);
+ bottom: var(--btn_);
}
+
.on-this-page ul {
- --justify: flex-start;
- gap: 0;
width: 100%;
}
-.on-this-page li:not(.has) {
- padding: 0;
-}
-nav.letters li {
- width: 100%;
- max-width: calc(7.69% - 2px);
-}
+
.on-this-page .active a {
- --c: var(--action-rgb);
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
color: var(--action-contrast);
}
+/**************************************************************
+VARIANT: LETTERS (nav.letters)
+Only define what makes it different
+**************************************************************/
+nav.letters li {
+ flex: 1;
+ max-width: calc(7.69% - 2px); /*Fit 26 letters over 2 rows) */
+}
+
@media (min-width: 768px) {
nav.letters li {
+ flex: 0 1 auto;
max-width: none;
- width: fit-content;
}
- nav.letters a,
- nav.letters li:not(.has) {
+
+ nav.letters a {
padding: .25rem .66rem;
}
}
+
/**************************************************************
-Table of Contents TOC
+VARIANT: INDEX/TOC (nav.index)
+Only define what makes it different
**************************************************************/
nav.index {
--justify: flex-start;
- --px: 0;
- background-color: var(--overlay-heavy);
+ --padding: 0;
+ background-color: rgba(var(--base-rgb),var(--op-6));
}
+
.index ul {
- --justify: flex-start;
- width: fit-content;
+ width: max-content;
}
+
.index li {
flex-shrink: 0;
transform: scaleX(0);
transform-origin: right;
max-width: 0;
overflow: hidden;
- transition: transform var(--timing) var(--function);
+ transition: transform var(--trans-base);
}
-.index li.active {
+
+.index li.active,
+.index li.adj {
transform: scaleX(1);
transform-origin: left;
width: 100%;
flex-shrink: 1;
max-width: fit-content;
}
-@media (min-width: 768px ){
+
+@media (max-width: 767px) {
.index li.adj {
- transform: scaleX(1);
- transform-origin: left;
- width: 100%;
- flex-shrink: 1;
- max-width: fit-content;
+ transform: scaleX(0);
+ max-width: 0;
}
}
+
.index a {
border-bottom: 4px solid transparent;
}
+
.index .active a {
border-color: var(--action-0);
color: var(--contrast);
}
-.index a:hover,
-.index .active a:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-.index label {
- display: flex;
- color: var(--contrast);
- align-items: center;
- margin: 0;
-}
-.index label button {
- margin-left: 1em;
-}
+/* Index open state */
.index.open {
--dir: column-reverse;
- height: calc(100% - 8rem);
- z-index: var(--z-above);
+ height: var(--maxHeight);
width: 100%;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
align-items: flex-end;
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ backdrop-filter: blur(5px);
+ z-index: var(--z-10);
}
-.index.open label {
- max-width: 90%;
- margin-top: 1rem;
- margin-right: 2rem;
-}
-.index.open .toggle .icon {
- transform: rotate(45deg);
-}
+
.index.open ul {
--dir: column;
--justify: flex-end;
height: 100%;
- max-width: 100%;
width: 100%;
}
+
.index.open li {
- background-color: transparent;
- max-width: 100%!important;
width: 100%;
- height: var(--height);
+ height: var(--btn);
+ max-width: 100%!important;
transform: scaleX(1);
- flex-shrink: 1;
overflow: visible;
}
+
.index.open a {
- --justify: flex-end;
- background-color: transparent;
+ justify-content: flex-end;
padding: 0 2rem 0 0;
+ background-color: transparent;
}
+
/**************************************************************
-CONDENSED
+VARIANT: CONDENSED (nav.condensed)
+Only define what makes it different
**************************************************************/
-.condensed {
- --dir: row;
+nav.condensed {
+ height: max-content;
--wrap: wrap;
- --height: 1.2em;
- --py: .25rem;
- --px:.25rem;
- height: fit-content;
+ --gap: 0 .25rem;
}
-.condensed > ul {
- --wrap: wrap;
- height: fit-content
-}
-.condensed ul {
+
+nav.condensed ul {
+ min-height: var(--chip_);
+ height: max-content;
--justify: center;
- --gap: 0;
+ --wrap: wrap;
}
.condensed li {
- width: fit-content;
+ width: max-content;
+ min-height: var(--chip);
}
.condensed li + li::before {
content: '·';
- display: block;
padding: 0 .25em;
}
-nav.condensed a {
+
+.condensed a {
+ height: max-content;
+ min-height: var(--chip);
+ font-size:var(--txt-x-small);
+ padding: 0 .25rem;
text-transform: none;
- white-space: nowrap;
border-bottom: 2px solid transparent;
}
-.condensed a:hover,
-.condensed a:focus,
-.condensed a:hover:visited,
-.condensed a:focus:visited {
+
+.condensed a:focus {
border-color: var(--action-0);
}
+
/**************************************************************
-ADDITIONAL HEADER STUFF
+VARIANT: SOCIALS (ul.socials)
+Only define what makes it different
**************************************************************/
-.dashboard-nav {
+ul.socials {
+ --dir: row;
+ height: max-content;
+ --gap: .5rem;
+ --justify: stretch;
+ --wrap:nowrap;
+ overflow: auto hidden;
+ touch-action: pan-x;
+}
+.always ul.socials,
+.always ul.socials li,
+.always ul.socials a {
width: 100%;
- --dir: row;
- --justify: flex-start;
+}
+
+ul.socials a {
+ padding: .5rem;
+ max-width: none;
+}
+
+ul.socials .icon {
+ margin: 0;
+}
+
+/**************************************************************
+VARIANT: TABS (nav.tabs)
+Only define what makes it different
+**************************************************************/
+nav.tabs {
+ position: fixed;
+ bottom: var(--btn);
+ left: var(--btnbtn);
+ right: var(--btnbtn);
+ padding-bottom: 2px;
+ z-index: var(--z-6);
+ touch-action: pan-x pan-y;
+ --wrap:nowrap;
+ overflow: auto hidden;
+}
+nav.tabs button {
+ aspect-ratio: unset;
+}
+ nav.tabs button.active {
+ cursor: default;
+ }
+ nav.tabs button.active:hover {
+ background-color: var(--base-100);
+ color: var(--contrast);
+ }
+nav.tabs button h2 {
--wrap: nowrap;
+ margin: 0;
+ font-size: var(--txt-x-small);
}
-body > header,
-.wp-site-blocks > header {
- --dir: row;
- position: sticky;
- top: 0;
- left: 0;
- right: 0;
- height: var(--height);
- width: 100vw;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 .5rem;
+.tab-content nav.tabs button {
+ height: var(--chip_);
+ padding: .25rem .75rem;
+ min-height: 0;
+}
+.tab-content.active {
+ padding: 1rem 0;
+}
+.tab-content h2 {
+ margin: 0 0 .5rem;
+}
+.tab-content nav.tabs {
+ height: max-content;
background-color: var(--base);
- z-index: var(--zz-top);
- box-shadow: var(--shadow);
- border-bottom: 1px solid var(--action-0);
+ --gap: 0;
}
- .wp-site-blocks > header img {
- width: var(--height);
+ .tab-content .tab-content nav.tabs {
+ background-color: var(--base-100);
+ }
+ .tab-content .tab-content .tab-content nav.tabs {
+ background-color: var(--base-200);
+ }
+ .tab-content nav.tabs button.active h2 {
+ color: var(--action-0);
}
-body > header {
- justify-content: space-between;
-}
-/** MOVE TO NORTHEH **/
-/*header a[rel=home],*/
-/*header > img {*/
-/* position: absolute;*/
-/* width: var(--offHeight);*/
-/* left: calc(50% - (var(--offHeight) / 2));*/
-/*}*/
-header .title {
- --w: 5em;
- margin: 0;
- position: absolute;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: flex-start;
- max-inline-size: none;
-}
-.current-hours {
- position: sticky;
- top: var(--height);
- bottom: unset;
- width: unset;
- z-index: 100;
- background-color: var(--action-0);
- color: var(--action-contrast);
- box-shadow: var(--shadow);
- padding: .25rem 1rem;
- display: flex;
- justify-content: space-between;
-}
-.current-hours p {
- margin: 0;
- display: flex;
- flex-wrap: wrap;
- flex: 1;
-}
-.current-hours p + p {
- justify-content: flex-end;
-}
-.current-hours a {
- color: var(--action-contrast);
-}
-.current-hours a:hover {
- color: var(--action-200);
-}
-.current-hours b {
- margin-right: .25rem;
-}
-.find-us {
- display: flex;
- align-items: center;
- gap: 0 .5rem;
-}
-.find-us p {
-
-}
-.find-us a {
- display: flex;
- padding: .25rem 1rem;
- border: 1px solid var(--action-contrast);
- border-radius: var(--innerRadius);
-}
-.find-us a:hover {
- background-color: var(--base);
- color: var(--contrast);
- border-color: var(--contrast);
-}
-nav.menu {
- --justify: flex-start;
-}
+/**************************************************************
+VARIANT: MENU (nav.menu)
+Only define what makes it different
+**************************************************************/
nav.menu a {
padding: .5rem .66rem;
}
-/*************
-TABS
-*************/
-nav.tabs {
- --gap: 0;
- --wrap: nowrap;
- padding-bottom: 2px;
- z-index: var(--z-6);
- position: fixed;
- bottom: var(--height);
- left: var(--doubleHeight);
- right: var(--doubleHeight);
+/**************************************************************
+VARIANT: SHARE (nav.share)
+Only define what makes it different
+**************************************************************/
+nav.share {
+ height: max-content;
+ margin: 1rem 0;
}
-/*@media (min-width: 768px) {*/
-/* nav.tabs {*/
-/* --wrap: wrap;*/
-/* overflow: hidden;*/
-/* }*/
+
+nav.share ul {
+ overflow: visible;
+}
+
+nav.share h4 {
+ display: inline-block;
+ width: max-content;
+ margin: .25rem .5rem .25rem 0;
+ font-size: var(--txt-x-small);
+}
+
+/**************************************************************
+HEADER ELEMENTS
+**************************************************************/
+:where(body > header, .wp-site-blocks > header) {
+ --dir: row;
+ --justify: space-between;
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: var(--btn);
+ width: 100vw;
+ display: flex;
+ align-items: center;
+ padding: 0 .5rem;
+ background-color: var(--base);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ z-index: var(--z-9);
+}
+
+.wp-site-blocks > header img {
+ width: var(--btn);
+}
+
+/**************************************************************
+CURRENT HOURS BANNER
+**************************************************************/
+/*.current-hours {*/
+/* position: sticky;*/
+/* top: var(--nav-height);*/
+/* padding: .25rem 1rem;*/
+/* background-color: var(--action-0);*/
+/* color: var(--action-contrast);*/
+/* box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
+/* display: flex;*/
+/* justify-content: space-between;*/
+/* z-index: 100;*/
/*}*/
+/*.current-hours p {*/
+/* margin: 0;*/
+/* display: flex;*/
+/* flex-wrap: wrap;*/
+/* flex: 1;*/
+/*}*/
+
+/*.current-hours p + p {*/
+/* justify-content: flex-end;*/
+/*}*/
+
+/*.current-hours a {*/
+/* color: var(--action-contrast);*/
+/*}*/
+
+/*.current-hours b {*/
+/* margin-right: .25rem;*/
+/*}*/
+
+/**************************************************************
+FIND US BUTTONS
+**************************************************************/
+/*.find-us {*/
+/* display: flex;*/
+/* align-items: center;*/
+/* gap: 0 .5rem;*/
+/*}*/
+
+/*.find-us a {*/
+/* padding: .25rem 1rem;*/
+/* border: 1px solid var(--action-contrast);*/
+/* border-radius: var(--radius);*/
+/*}*/
+
+/**************************************************************
+UTILITIES
+**************************************************************/
+
+/* Hide navigation when empty */
nav.term-navigation:has(*[hidden]) {
display: none;
}
-ul.socials a {
- padding: .5rem;
+
+/* Dashboard nav */
+.dashboard-nav {
+ --justify: flex-start;
+ width: 100%;
}
-ul.socials a .icon {
- margin: 0;
+
+nav.filters {
+ --dir: row;
+ --justify: flex-start;
+ overflow: auto hidden;
+}
+nav.filters .filter {
+ width: auto;
+ padding: .25rem .75rem;
}
\ No newline at end of file
diff --git a/navTemp.css b/navTemp.css
index db57cac..58233f0 100644
--- a/navTemp.css
+++ b/navTemp.css
@@ -1,128 +1,752 @@
-@media (max-width:768px){
- .mobile .nav.toggle {
- display: block;
- position: fixed;
- right: 0;
- bottom: 2rem;
- z-index: 50;
- height: 3rem;
- width: 3rem;
- border-radius: 3rem;
- background-color: var(--gray);
- padding: 0.25rem;
- transition: all var(--timing) var(--duration);
+/**********************************************************
+BASE NAV STYLES
+**********************************************************/
+nav {
+ --py: .25rem;
+ --px: 1rem;
+ max-width: 100%;
+ font-family: var(--heading);
+}
+nav,
+nav ol,
+nav ul,
+nav li,
+nav a {
+ height: var(--btn);
+ display: flex;
+ justify-content: var(--justify);
+ align-items: var(--align);
+ gap: var(--gap);
+ flex-wrap: var(--wrap);
+ flex-direction: var(--dir);
+}
+
+ul.socials {
+ --w: 1.2em;
+ --height: fit-content;
+ gap: .5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ overflow: auto hidden;
+ touch-action: pan-x;
+ list-style: none;
+}
+nav:not(:has(> ul)),
+nav > ul {
+ --justify: flex-start;
+ --align: center;
+ --wrap: nowrap;
+ --w: 1em;
+ --dir: row;
+ position: relative;
+ overflow: auto hidden;
+ touch-action: pan-x;
+}
+
+nav a {
+ padding: 0 var(--px);
+ white-space: nowrap;
+ text-transform: uppercase;
+}
+nav .current a,
+nav a.current,
+nav a:hover,
+nav a:focus,
+nav a:hover:visited,
+nav a:focus:visited {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ transition: background-color var(--trans-base),
+ color var(--trans-base);
+}
+
+nav ol,
+nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/**************************************************************
+SUBMENU
+**************************************************************/
+.has-submenu button:hover,
+nav a:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.has-submenu button {
+ height: var(--btn);
+ width: var(--btn);
+ padding: 0;
+ /*background-color: var(--base);*/
+ border: 2px solid var(--base);
+ color: var(--contrast);
+ border-radius: 0;
+}
+
+.toggle .icon {
+ transform: rotate(0deg);
+ transition: transform var(--trans-t) var(--trans-fn);
+ transition-property: transform, background-color, color;
+}
+.has-submenu.open > button:not(.notifications, .quick-help) .icon,
+.has-submenu:hover > button:not(.notifications, .quick-help) .icon {
+ transform: rotate(900deg);
+}
+
+ul.submenu {
+ --dir: column;
+ --wrap: nowrap;
+ --gap: 0;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ max-height: 0;
+ transform: scaleY(0);
+ transform-origin: top;
+ width: max-content;
+ min-width: 100%;
+ background-color: rgba(var(--base-rgb),var(--op-3));
+ border: 2px solid rgba(var(--base-rgb),var(--op-3));
+ transition: all var(--trans-t) var(--trans-fn);
+ box-shadow: var(--shdw-none);
+}
+
+.always ul.submenu {
+ position: relative;
+ top: 0;
+ left: 0;
+}
+
+.submenu li {
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ border: 1px solid var(--base-50);
+}
+.submenu li:hover {
+ --c: var(--action-rgb);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+}
+.submenu a:hover {
+ background-color: transparent;
+}
+.wp-site-blocks > header ul.submenu {
+ right: 0;
+ left: auto;
+}
+
+/**
+Opening Submenus
+ */
+.has-submenu.open > ul.submenu,
+.has-submenu:hover > ul.submenu {
+ transform: scaleY(1);
+ max-height: 1000%;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+/**************************************************************
+FIXED
+**************************************************************/
+nav.on-this-page,
+nav.fixed.bottom {
+ --dir: row;
+ --gap: 0;
+ width: calc(100% - var(--btn));
+ left: 0;
+ bottom: 0;
+ position: fixed;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ z-index: var(--z-9);
+}
+nav.fixed.bottom ul {
+ width: 100%;
+ --justify: space-between;
+ background-color: var(--base);
+ padding: 0 .25rem;
+}
+nav.fixed li,
+nav.fixed a {
+ --justify: center;
+ width: 100%;
+}
+
+nav.fixed.bottom a:visited,
+nav.fixed.bottom a {
+ color: var(--contrast);
+ font-size: var(--txt-small);
+ padding: 0;
+}
+@media (min-width:768px) {
+ nav.fixed.bottom a:visited,
+ nav.fixed.bottom a {
+ font-size: var(--txt-medium);
}
- .mobile .nav.toggle:hover {
- box-shadow: var(--legacy-shadow-inset);
+}
+nav.fixed.bottom a:hover,
+nav.fixed.bottom a:hover:visited,
+nav.fixed.bottom a:focus,
+nav.fixed.bottom a:focus:visited {
+ color: var(--action-contrast);
+}
+.fixed.bottom li {
+ flex: 1;
+}
+
+nav.always a {
+ padding: 0;
+ --justify: center;
+}
+nav.always .socials {
+ width: 100%;
+}
+nav.always .socials li {
+ width: 100%;
+}
+nav.always li {
+ gap: 0;
+ --justify:flex-start;
+ background-color: rgba(var(--base-rgb), var(--op-6));
+}
+nav.always > ul > li > a {
+ width: 80%;
+}
+nav.always .submenu {
+ width: 80%;
+ min-width: 80%;
+ box-shadow: none!important;
+ border: 2px solid var(--action-0);
+ background-color: rgba(var(--contrast-rgb), var(--op-1));
+}
+nav.always .submenu li {
+ background-color: rgba(var(--base-rgb),var(--op-3));
+}
+nav.fixed .has-submenu > a,
+nav.always .has-submenu > a {
+ width: 80%;
+}
+.has-submenu > button {
+ width: 20%;
+}
+/**************************************************************
+BREADCRUMBS
+**************************************************************/
+nav#breadcrumbs {
+ --height: 1.5em;
+ --w: 20px;
+ width: fit-content;
+ min-height: var(--btn);
+ max-width: var(--full);
+ position: absolute;
+ background-color: rgba(var(--base-rgb),var(--op-4));
+ font-size: var(--txt-small);
+ padding: .125em;
+ overflow:visible;
+ --gap: 0;
+ height: max-content;
+ z-index: var(--z-7);
+}
+#breadcrumbs ol {
+ --wrap: wrap;
+}
+#breadcrumbs ol,
+#breadcrumbs li,
+#breadcrumbs a,
+#breadcrumbs span {
+ height: max-content!important;
+}
+nav#breadcrumbs li + li::before {
+ content: '/';
+ color: var(--contrast-200);
+}
+nav#breadcrumbs li:last-of-type {
+ margin-right: .5em;
+}
+nav#breadcrumbs span,
+nav#breadcrumbs a {
+ padding: 0 .125rem;
+ white-space: nowrap;
+ height: 2em;
+ color: var(--contrast);
+ text-transform: none;
+ width: max-content;
+}
+nav#breadcrumbs span {
+ display: flex;
+ align-items: center;
+ padding-left: .5em;
+}
+nav#breadcrumbs a:focus:visited,
+nav#breadcrumbs a:hover:visited,
+nav#breadcrumbs a:focus,
+nav#breadcrumbs a:hover {
+ background-color: transparent;
+ color: var(--action-0);
+}
+nav#breadcrumbs a:has(.icon) {
+ width: 2rem;
+}
+/**************************************************************
+MOBILE
+**************************************************************/
+nav.always {
+ z-index: var(--z-10);
+ position: fixed;
+ width: var(--btn);
+ bottom: 0;
+ right: 0;
+}
+nav.always.open {
+ width: 100vw;
+ height: 100vh;
+ padding-bottom:var(--btn_);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ backdrop-filter: blur(5px);
+ justify-content: flex-end;
+ flex-direction: column;
+ z-index: var(--z-10);
+}
+nav.always > ul {
+ --dir: column;
+ --wrap: nowrap;
+ --justify: flex-start;
+ --align: center;
+ --gap: 0;
+ position: relative;
+ right: -300vw;
+ padding: 1rem 0 0;
+ width: 100vw;
+ height: fit-content;
+ max-height: 100%;
+ overflow:hidden auto;
+ transition: right var(--trans-base);
+}
+nav.always.open > ul {
+ right: 0;
+ transition: right var(--trans-base);
+}
+/*nav.always > ul li:hover,*/
+/*nav.always > ul li:focus-within,*/
+/*nav.always > ul li.active {*/
+/* background-color: rgba(var(--base-rgb),var(--op-6));*/
+/*}*/
+nav.always li {
+ max-inline-size: none;
+ width: 100%;
+ height: fit-content;
+ --dir: row;
+ --wrap: wrap;
+}
+nav.always a {
+ --py: 1rem;
+ width: 100%;
+ min-height: var(--btn);
+}
+
+nav.always > button {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ width: var(--btn);
+ height: var(--btn);
+ border-radius: 0;
+ background-color: var(--base);
+ color: var(--contrast);
+ transition: width var(--trans-t) var(--trans-fn);
+ transition-property: width, background-color;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+nav.always > button:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+nav.always.open > button {
+ --c: var(--action-rgb);
+ z-index: 1000000;
+ width: 100%;
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ color: var(--contrast);
+ backdrop-filter: blur(5px);
+}
+nav.always.open > button:hover,
+nav.always.open > button:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+nav.always.open > button .icon-list,
+nav.always >button .icon-x {
+ transform: scale(0);
+ height: 0;
+ width: 0;
+ position: absolute;
+}
+nav.always > button .icon-list,
+nav.always.open > button .icon-x {
+ transform: scale(1);
+ height: 32px;
+ width: 32px;
+}
+nav.always .has-submenu:hover > .submenu,
+nav.always .has-submenu.open > .submenu {
+ height: max-content;
+}
+
+nav.always .has-submenu:hover > a,
+nav.always .submenu > li > a:hover,
+nav.always .submenu > li > a:focus {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+@media (min-width: 768px) {
+ /*nav.always a {*/
+ /* padding: 2rem 0;*/
+ /*}*/
+ nav.always > ul {
+ padding: var(--btn) 0 0;
}
- nav.mobile li:hover > a {
- color: var(--white);
+}
+/**************************************************************
+ON THIS PAGE
+**************************************************************/
+nav.on-this-page {
+ --justify: space-between;
+ max-width: none;
+ z-index: var(--z-6);
+ margin: 0;
+ padding: 0 .5rem;
+ background-color: rgba(var(--base-rgb),var(--op-4));
+ color: var(--base-200);
+}
+body:has(nav.fixed) nav.on-this-page {
+ bottom: var(--btn_);
+}
+.on-this-page ul {
+ --justify: flex-start;
+ gap: 0;
+ width: 100%;
+}
+.on-this-page li:not(.has) {
+ padding: 0;
+}
+nav.letters li {
+ width: 100%;
+ max-width: calc(7.69% - 2px);
+}
+.on-this-page .active a {
+ --c: var(--action-rgb);
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ color: var(--action-contrast);
+}
+
+@media (min-width: 768px) {
+ nav.letters li {
+ max-width: none;
+ width: fit-content;
}
- nav.mobile .opened > a,
- nav.mobile li.opened:hover > a,
- nav.mobile a:hover,
- nav.mobile li:hover a:hover {
- background-color: var(--pink);
- color: var(--black);
+ nav.letters a,
+ nav.letters li:not(.has) {
+ padding: .25rem .66rem;
}
- nav.mobile a {
- width: 75%;
- padding: 2rem;
- font-size: 1.1rem;
- text-align: center;
- border-radius: 0;
- }
- nav.mobile .submenu a {
- padding: 1.75rem;
- width: 100%;
- }
- nav.mobile > ul {
- position: fixed;
- background: rgb(10,10,10);
- width: 100vw;
- height: 100vh;
- transform-origin: right;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- flex-wrap: nowrap;
- transform: scaleX(0);
- visibility: hidden;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow-y: scroll;
- transition: transform var(--timing) var(--duration);
- }
- nav.mobile.open > ul {
+}
+/**************************************************************
+Table of Contents TOC
+**************************************************************/
+nav.index {
+ --justify: flex-start;
+ --px: 0;
+ background-color: rgba(var(--base-rgb),var(--op-6));
+}
+.index ul {
+ --justify: flex-start;
+ width: fit-content;
+}
+.index li {
+ flex-shrink: 0;
+ transform: scaleX(0);
+ transform-origin: right;
+ max-width: 0;
+ overflow: hidden;
+ transition: transform var(--trans-t) var(--trans-fn);
+}
+.index li.active {
+ transform: scaleX(1);
+ transform-origin: left;
+ width: 100%;
+ flex-shrink: 1;
+ max-width: fit-content;
+}
+@media (min-width: 768px ){
+ .index li.adj {
transform: scaleX(1);
- visibility: visible;
- transition: transform var(--timing) var(--duration);
- }
- nav.mobile > ul > li {
+ transform-origin: left;
width: 100%;
- flex-wrap: wrap;
+ flex-shrink: 1;
+ max-width: fit-content;
}
- nav.mobile > ul > li:hover {
- background-color: transparent;
- }
- nav.mobile > ul > li + li {
- margin: 0;
- }
+}
+.index a {
+ border-bottom: 4px solid transparent;
+}
+.index .active a {
+ border-color: var(--action-0);
+ color: var(--contrast);
+}
+.index a:hover,
+.index .active a:hover {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+.index label {
+ display: flex;
+ color: var(--contrast);
+ align-items: center;
+ margin: 0;
+}
+.index label button {
+ margin-left: 1em;
+}
- nav.mobile > ul > li:hover .submenu-toggle svg {
- transform: rotate(180deg);
- color: var(--white);
- }
- nav.mobile > ul > li.opened:hover .submenu-toggle svg {
- transform: rotate(0);
- }
- nav.mobile > ul > li .submenu-toggle:hover {
- color: var(--white);
- background-color: var(--pink);
- }
- nav.mobile .submenu-toggle {
- width: 25%;
- display: flex;
- align-items: center;
- justify-content: center;
- border: 8px solid rgb(10,10,10);
- background-color: var(--black);
- padding-right: 16px;
- }
- nav.mobile .has-submenu:not(.opened):hover .submenu {
- transform: scaleY(0);
- height: 0;
- }
- nav.mobile .opened .submenu-toggle {
- background-color: var(--pink);
- color: var(--blacker);
- }
- nav.mobile .opened {
- background: var(--blacker);
- }
+.index.open {
+ --dir: column-reverse;
+ height: calc(100% - 8rem);
+ z-index: var(--z-10);
+ width: 100%;
+ background-color: rgba(var(--base-rgb),var(--op-6));
+ backdrop-filter: blur(5px);
+ align-items: flex-end;
+}
+.index.open label {
+ max-width: 90%;
+ margin-top: 1rem;
+ margin-right: 2rem;
+}
+.index.open .toggle .icon {
+ transform: rotate(45deg);
+}
+.index.open ul {
+ --dir: column;
+ --justify: flex-end;
+ height: 100%;
+ max-width: 100%;
+ width: 100%;
+}
+.index.open li {
+ background-color: transparent;
+ max-width: 100%!important;
+ width: 100%;
+ height: var(--btn);
+ transform: scaleX(1);
+ flex-shrink: 1;
+ overflow: visible;
+}
+.index.open a {
+ --justify: flex-end;
+ background-color: transparent;
+ padding: 0 2rem 0 0;
+}
+/**************************************************************
+CONDENSED
+**************************************************************/
+.condensed {
+ --dir: row;
+ --wrap: wrap;
+ --height: 1.2em;
+ --py: .25rem;
+ --px:.25rem;
+ height: fit-content;
+}
+.condensed > ul {
+ --wrap: wrap;
+ height: fit-content
+}
+.condensed ul {
+ --justify: center;
+ --gap: 0;
+}
+.condensed li {
+ width: fit-content;
+}
+.condensed li + li::before {
+ content: '·';
+ display: block;
+ padding: 0 .25em;
+}
+nav.condensed a {
+ text-transform: none;
+ white-space: nowrap;
+ border-bottom: 2px solid transparent;
+}
+.condensed a:hover,
+.condensed a:focus,
+.condensed a:hover:visited,
+.condensed a:focus:visited {
+ border-color: var(--action-0);
+}
+/**************************************************************
+ADDITIONAL HEADER STUFF
+**************************************************************/
+.dashboard-nav {
+ width: 100%;
+ --dir: row;
+ --justify: flex-start;
+ --wrap: nowrap;
+}
+body > header,
+.wp-site-blocks > header {
+ --dir: row;
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: var(--btn);
+ width: 100vw;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 .5rem;
+ background-color: var(--base);
+ z-index: var(--z-9);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ border-bottom: 1px solid var(--action-0);
+}
+.wp-site-blocks > header img {
+ width: var(--btn);
+}
- nav.mobile .submenu {
- position: relative;
- height: 0;
- transform: scaleY(0);
- top: 0;
- width: 75%;
- z-index: 1;
- }
- nav.mobile .has-submenu.opened:hover .submenu,
- nav.mobile .has-submenu.opened .submenu {
- margin-bottom: 8px;
- border: 1px solid var(--pink);
- transform: scaleY(1);
- height: min-content;
- }
- nav.mobile .submenu > li {
- border: 2px solid var(--pitch);
- }
- nav.mobile .submenu > li + li {
- border-top: 4px solid var(--pitch);
- }
+body > header {
+ justify-content: space-between;
+}
+/** MOVE TO NORTHEH **/
+/*header a[rel=home],*/
+/*header > img {*/
+/* position: absolute;*/
+/* width: var(--btn_);*/
+/* left: calc(50% - (var(--btn_) / 2));*/
+/*}*/
+header .title {
+ --w: 5em;
+ margin: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ max-inline-size: none;
+}
+.current-hours {
+ position: sticky;
+ top: var(--btn);
+ bottom: unset;
+ width: unset;
+ z-index: 100;
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ padding: .25rem 1rem;
+ display: flex;
+ justify-content: space-between;
+}
+.current-hours p {
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ flex: 1;
+}
+.current-hours p + p {
+ justify-content: flex-end;
+}
+.current-hours a {
+ color: var(--action-contrast);
+}
+.current-hours a:hover {
+ color: var(--action-200);
+}
+.current-hours b {
+ margin-right: .25rem;
+}
+.find-us {
+ display: flex;
+ align-items: center;
+ gap: 0 .5rem;
+}
+.find-us p {
+}
+.find-us a {
+ display: flex;
+ padding: .25rem 1rem;
+ border: 1px solid var(--action-contrast);
+ border-radius: var(--radius);
+}
+.find-us a:hover {
+ background-color: var(--base);
+ color: var(--contrast);
+ border-color: var(--contrast);
+}
+nav.menu {
+ --justify: flex-start;
+}
+nav.menu a {
+ padding: .5rem .66rem;
+}
+
+/*************
+TABS
+*************/
+nav.tabs {
+ --gap: 0;
+ --wrap: nowrap;
+ padding-bottom: 2px;
+ z-index: var(--z-6);
+ position: fixed;
+ bottom: var(--btn);
+ left: var(--btnbtn);
+ right: var(--btnbtn);
+}
+/*@media (min-width: 768px) {*/
+/* nav.tabs {*/
+/* --wrap: wrap;*/
+/* overflow: hidden;*/
+/* }*/
+/*}*/
+
+nav.term-navigation:has(*[hidden]) {
+ display: none;
+}
+ul.socials a {
+ padding: .5rem;
+}
+ul.socials a .icon {
+ margin: 0;
+}
+
+nav.share {
+ height: max-content;
+ margin: 1rem 0;
+ --align: center;
+}
+nav.share ul {
+ overflow: visible;
+}
+nav.share h4 {
+ display: inline-block;
+ width: max-content;
+ margin: .25rem .5rem .25rem 0;
+ font-size: var(--txt-small);
+}
+nav.share .icon {
+ margin-right: 0;
+}
+nav.share .button {
+ position: relative;
+ transition: top var(--trans-base), box-shadow var(--trans-base);
+ top: 0;
+ box-shadow: var(--shdw-none);
+}
+nav.share .button:hover {
+ top: -4px;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
}
\ No newline at end of file
diff --git a/style.css b/style.css
index b4c8a7b..cfc974c 100644
--- a/style.css
+++ b/style.css
@@ -7,8 +7,8 @@
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
-Version: 1.279
+Version: 1.5.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jv
-*/:root{--narrow:min(500px, 50vw);--maxWidth:min(768px, 65vw);--alignWide:min(1024px, 90vw);--alignMed:min(962px, 82.5vw);--full:100vw;--mr:auto;--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;--doubleHeight:8rem;--offHeight:5rem;--maxHeight:calc(100vh - var(--height) - var(--height));--gap:.5rem;--wrap:wrap;--justify:center;--align:center;--dir:row;--w:1.2em;--filter:grayscale(.3) sepia(.4);--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='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");--dashed-action: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='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");--font-base:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--heading:'Aleo',var(--font-base);--body:'Josefin Slab',var(--font-base);--hWeight:900;--hlight:400;--bWeight:400;--bBold:700;--bLight:200;--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);--mixBlendMode:darken;--coverBlend:overlay;--coverIndex:2;--light-0:#fafafa;--light-50:#fcfbfb;--light-100:#f1eded;--light-200:#e6dfdf;--dark-0:#201313;--dark-50:#261717;--dark-100:#2d1b1b;--dark-200:#331e1e;--action-0:#B7332E;--action-50:#a32d29;--action-100:#8e2824;--action-200:#7a221f;--secondary-0:#E8A737;--secondary-50:#e59d20;--secondary-100:#d48f18;--secondary-200:#bd7f16;--success:#22C55E;--successBack:#d4edda;--successText:#155724;--warning:#E8A737;--error:#EF4444;--errorBack:#f8d7da;--errorText:#721c24;--action-contrast:var(--light-0);--secondary-contrast:var(--light-0);--light-rgb:250,250,250;--dark-rgb:16,4,4;--action-rgb:183,51,46;--secondary-rgb:232,167,55;--rgba-subtle:rgba(var(--c),.05);--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);--z-1:5;--z-2:10;--z-3:15;--z-4:20;--z-5:50;--z-6:100;--z-top:999;--z-topper:1000;--zz-top:999999;--z-above:9999999;--rgb-subtle:.05;--rgb-subtle-hover:.15;--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%;--shadow:rgba(var(--dark-rgb),.45) 0px 0px 4px;--shadow-down:rgba(var(--dark-rgb),.45) 0 6px 5px -5px;--shadow-right:rgba(var(--dark-rgb),.45) 6px 0 5px -5px;--shadow-left:rgba(var(--dark-rgb), .45) -6px 0 5px -5px;--shadow-up:rgba(var(--dark-rgb), .45) 0 -6px 5px -5px;--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;--innerRadius:4px;--outerPadding:1rem;--outerRadius:calc(var(--innerRadius) + var(--outerPadding));--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);--sp1:clamp(0.5rem, 0.714vw + 0.321rem, 1rem);--sp2:clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);--sp3:clamp(1rem, 1.429vw + 0.643rem, 2rem);--sp4:clamp(1.5rem, 2.143vw + 0.964rem, 3rem);--sp5:clamp(2rem, 2.857vw + 1.286rem, 4rem);--sp6:clamp(3rem, 4.286vw + 1.929rem, 6rem);--sp7:clamp(4rem, 5.714vw + 2.571rem, 8rem);--offScreen:-200vw;/*!** Icons **!*/--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:#cb3933;--action-100:#d14c47;--action-200:#d6605c;--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);--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;--shadow-right:rgba(var(--light-rgb),.45) 6px 0 5px -5px;--shadow-left:rgba(var(--light-rgb), .45) -6px 0 5px -5px;--shadow-up:rgba(var(--light-rgb), .45) 0 -6px 5px -5px;--subtle:rgba(var(--light-rgb), .45) 0px 25px 20px -20px;--subtleRight:rgba(var(--light-rgb), .45) 10px 0 20px -20px;--successBack:#155724;--successText:#d4edda;--errorBack:#721c24;--errorText:#f8d7da}@layer reset{font:clamp(1rem,1rem + .5vw,2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,::after,::before{box-sizing:border-box}h1,h2{font-weight:900;letter-spacing:-.02rem}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0}dd,li,p{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}dl,ol,ul{margin:0;padding:0;list-style:inside}iframe,img,video{display:block;max-inline-size:100%;block-size:auto;border-style:none}figure{inline-size:fit-content;margin-inline:auto}figcaption{contain:inline-size;font-size:90%}button,input,select,textarea{font:inherit}label{display:block}input:not(:where([type=submit],[type=checkbox],[type=radio],[type=button],[type=reset])){inline-size:100%}button,input:where([type=submit],[type=reset],[type=button]){background:CanvasText;color:Canvas;border:1px solid transparent}textarea{field-sizing:content;min-block-size:5lh;inline-size:100%;max-inline-size:100%}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,monospace}svg{fill:currentColor}[aria-disabled=true i],[disabled]{cursor:not-allowed}[hidden]{display:none!important}[disabled],label:has(input[disabled]){opacity:.5}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible;margin-block:2.5rem}:target{scroll-margin:3rlh}table{caption-side:bottom;border-collapse:collapse}td,th{word-break:normal;border:1px solid gray;padding:.5rem}caption{font-size:90%}.screen-reader-text:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:focus-visible{outline-offset:2px}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}html{interpolate-size:allow-keywords}}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-border-radius);border:var(--scrollbar-thumb-border)}::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}body{background-color:var(--base-50);color:var(--contrast);max-width:100vw;overflow-x:hidden;margin:0;font-family:var(--body);font-weight:var(--bWeight);font-size:var(--medium);line-height:1.4;position:relative}body b,body strong{font-weight:var(--bBold)}:target{scroll-snap-margin-top:max(6rem,20vh);scroll-margin-top:max(6rem,20vh);outline:double var(--action-0);border-radius:var(--outerRadius);padding:var(--outerPadding)}body.menu_item :target h2{background-color:var(--action-0);color:var(--action-contrast)}body,body *{transition:background-color var(--transition-base);transition-property:background-color,border}.home main,.home>section:first-of-type{margin-top:0}body.loading,body:has(aside.expanded),body:has(dialog[open]),body:has(nav.open){overflow:hidden}.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)}.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]{display:none!important}@media (max-width:767px){.hide-small{display:none}}.width-50{width:100%}.width-25{width:50%}.width-75{width:100%}.w-full,.width-full{width:100%}@media (min-width:768px){.buttons li.width-50,.width-50{width:calc(50% - .3em)}.width-25{width:calc(25% - .3em)}.width-75{width:calc(75% - .3em)}}.col,.row:not(.icon){--align:center;--justify:center;display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir)}.col{--dir:column}.row:not(.icon){--dir:row}.col.rev{--dir:column-reverse}.row.rev{--dir:row-reverse}.nowrap{--wrap:nowrap}.col.a-start,.row.start{--justify:flex-start}.col.a-end,.row.end{--justify:flex-end}.col.btw,.row.btw{--justify:space-between;width:100%}.col.even,.row.even{--justify:space-evenly}.col.start,.row.a-start{--align:flex-start}.col.end,.row.a-end{--align:flex-end}.abs{position:absolute}:has(>.abs){position:relative}.hidden{transform:scale(0);max-width:0;max-height:0;overflow:hidden;transition:var(--transition-transform),var(--transition-size)}.visible{transform:scale(1);max-width:100%;max-height:100%;transition:var(--transition-transform),var(--transition-size)}.toggle-switch input{opacity:0;width:0;height:0;position:absolute;left:var(--offScreen)}.toggle-switch .slider{position:relative;width:2rem;height:1rem;background-color:var(--base-200);border-radius:.75rem;overflow:hidden;display:flex;justify-content:space-evenly;align-items:center;border:4px solid transparent;transition:.3s;box-shadow:0 0 .25rem 0 rgba(var(--contrast-rgb),.125) inset;cursor:pointer;margin:5px}.toggle-switch .slider::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--base);transform:translateX(-1rem);border-radius:.75rem;transition:.3s;box-shadow:0 0 .25rem 3px rgba(var(--contrast-rgb),.125)}.toggle-switch input:checked~.slider::before{transform:translateX(1rem);box-shadow:0 0 .25rem 3px rgb(0,0,0,.25)}.toggle-switch input:checked~.slider{background-color:var(--action-0)}.toggle-switch input:active~.slider::before{transform:translate(0)}#theme-switch{z-index:99;margin:0;--wrap:nowrap;--gap:1rem}#theme-switch .slider{width:3rem;height:1.5rem}#theme-switch .slider::before{transform:translateX(-1.5rem)}#theme-switch input:checked~.slider::before{transform:translateX(1.5rem)}@media (max-width:600px){#theme-switch{left:1rem}.wp-site-blocks>header{padding:0!important}}/*!* Focus States *!*//*!* Icon Animations *!*//*!* Hover Effects *!*//*!* Active State *!*/html{scroll-behavior:smooth}@media(prefers-reduced-motion){html{scroll-behavior:unset}*{transition:none!important;animation:none!important}}main{min-height:90vh;--justify:flex-start}main>*{width:100%;max-width:var(--maxWidth);margin:var(--setMargin)}main>.align-wide{max-width:var(--alignWide)}main>.align-full{--ml:0;--mr:0;max-width:var(--full)}main>section{--mt:6rem}main>:first-child{margin-top:0}footer{padding:1rem;background-color:var(--base-200);color:var(--contrast-200);text-align:center;margin:4rem 0 0;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}@media (min-width:768px){footer{padding:1rem 2rem var(--offHeight)}}.grid-view,.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid-view .item,.item-grid .item{border-radius:var(--outerRadius);aspect-ratio:1;display:flex;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)}.item-grid.list-view{display:flex;flex-direction:column;gap:2rem;--gap:2rem}.item-grid.list-view .item .col{--gap:.5rem}.item-grid.list-view img{width:20%}@media (min-width:768px){.grid-view,.item-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}h1 b,h1 strong,h2 b,h2 strong,h3 b,h3 strong,h4 b,h4 strong,h5 b,h5 strong,h6 b,h6 strong{font-weight:var(--hBold);letter-spacing:2px}h1,h2,h3,h4,h5,h6{--mt:1.5em;--mb:.25em;font-family:var(--heading);text-transform:uppercase;font-weight:var(--hWeight);line-height:1.3;margin:var(--mt) var(--mr) var(--mb) var(--ml)}h1.inline,h2.inline,h3.inline,h4.inline,h5.inline,h6.inline{font-size:1.2rem;font-weight:600;display:inline-block;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+*,h3.inline+*,h4.inline+*,h5.inline+*,h6.inline+*{display:inline-block;margin:.5rem 0}h1.inline+.term-list,h2.inline+.term-list,h3.inline+.term-list,h4.inline+.term-list,h5.inline+.term-list,h6.inline+.term-list{display:inline-flex;margin:.5rem 0}h1{font-size:var(--xxxlarge);font-weight:var(--hWeight);line-height:1;margin:0 var(--mr) .25em var(--ml)}h1:first-of-type{margin-top:20vh}h1 small{display:block;font-size:var(--small);font-weight:var(--bWeight);line-height:1;font-family:var(--body)}h2{font-size:var(--xxlarge)}h3{font-size:var(--xlarge)}h4{font-weight:400;font-size:var(--large)}h5,h6{font-weight:400;font-size:var(--medium)}p{line-height:1.6}main>* h1,main>* h2,main>* h3,main>* h4,main>* h5,main>* h6,main>* p{width:100%}main>* p{margin:.5rem 0}a{color:var(--action-0);text-decoration:none}ul a{display:inline-flex;text-decoration:none}a:visited{color:var(--action-100)}a:hover{color:var(--action-50);text-decoration:underline}ol{list-style-type:decimal}.buttons{--wrap:wrap;--justify:flex-start;margin:1rem var(--mr) 1rem var(--ml);width:100%;padding:0}.buttons.fit{width:fit-content;margin:1rem 2rem}.buttons li{--justify:stretch;--align:stretch;padding:0;list-style:none;overflow:hidden;width:100%}.list-none{list-style:none}@media (min-width:768px){.buttons{max-width:var(--maxWidth);margin:3rem var(--mr) 3rem var(--ml)}}.btn+label,.buttons a,[type=submit],a.button,a.wp-block-button__link,button,ul.socials a{--justify:center;--align:center;--dir:row;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-family:var(--heading);cursor:pointer;outline:inherit;height:var(--height);display:inline-flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);transition:color var(--transition-base);transition-property:color,border,background-color;position:relative}.btn+label:focus,.btn+label:hover,.buttons a:focus,.buttons a:hover,[type=submit]:focus,[type=submit]:hover,a.button:focus,a.button:hover,button:focus,button:hover,ul.socials a:focus,ul.socials a:hover{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:focus,.buttons .outline a:hover{background-color:var(--action-0);color:var(--action-contrast);border-color:var(--action-0)}.buttons a{width:100%}.btn:disabled+label,.btn:disabled+label:hover,[type=submit]:disabled,[type=submit]:disabled:focus,[type=submit]:disabled:hover,a.button:disabled,a.button:disabled:focus,a.button:disabled:hover,a.wp-block-button__link:disabled,a.wp-block-button__link:disabled:focus,a.wp-block-button__link:disabled:hover,button:disabled,button:disabled:focus,button:disabled:hover,ul.socials a:disabled,ul.socials a:disabled:hover{opacity:.5;background-color:var(--base-200)!important;color:var(--contrast-200)!important}details .icon{--w:1.5em}button.favourite.favourited,button.voted .icon{animation:favourite-pop .4s cubic-bezier(.25,.46,.45,.94)}@keyframes favourite-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}75%{transform:scale(.9)}100%{transform:scale(1)}}button.filter-toggle{border:1px solid var(--base-200);background-color:transparent;white-space:nowrap;font-size:1rem;padding:.35em;--w:1.2em}.filter-toggle:hover{border-color:var(--action-50);color:var(--action-50)}.filter-toggle:focus{background-color:var(--action-50);color:var(--action-contrast)}.toggle.notifications.has .bell,.toggle.notifications:not(.has) .bell-ringing,.vote .voted .downvote,.vote .voted .upvote,.vote button:not(.voted) .downvoted,.vote button:not(.voted) .upvoted,button.favourite.favourited .heart,button.favourite:not(.favourited) .heart-fill{display:none}.toggle.notifications.has .bell-ringing,.toggle.notifications:not(.has) .bell,.vote .voted .downvoted,.vote .voted .upvoted,.vote button:not(.voted) .downvote,.vote button:not(.voted) .upvote,button.favourite.favourited .heart-fill,button.favourite:not(.favourited) .heart{display:block}i.icon{width:var(--w);height:var(--w);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.small,nav ul .icon{--w:24px}.icon-colour{background:#b7332e;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%)}.icon.logo-basic svg path{transition:fill var(--timing) var(--function)}.icon.logo-basic svg path#innerCircle,.icon.logo-basic svg path#outerSkull{fill:var(--base)}a .icon.logo-basic:hover svg path{fill:var(--base)}a .icon.logo-basic:hover svg path#innerCircle,a .icon.logo-basic:hover svg path#outerSkull{fill:var(--action-0)}.icon.grab{cursor:grab}main a .icon{margin-right:.5em}body:has(#theme-switcher:not(:checked)) .icon.logo-split-color{position:relative}body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{content:'';display:block;width:60%;height:60%;border-radius:50%;background-color:var(--dark-200);position:absolute;left:18%;top:22%;z-index:-1}path#refresh{transform-origin:center;transform-box:fill-box;animation:spin 1s var(--function) infinite}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}input:focus,input:focus-within,input[type=checkbox]+label:focus,input[type=checkbox]+label:focus-visible,input[type=radio]+label:focus,input[type=radio]+label:focus-visible{outline:2px solid var(--action-0)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(var(--action-rgb),var(--rgb-light))!important}[aria-busy=true]{cursor:progress}[aria-disabled=true],[disabled]{cursor:not-allowed;opacity:.7}details{padding:.25rem 0;border-top:1px solid var(--base-200);border-bottom:1px solid var(--base-200)}details[open]{background-color:var(--base-50)}details summary{--wrap:nowrap;list-style:none;text-transform:uppercase;cursor:pointer;border:0;transition:background-color var(--transition-base);transition-property:background-color,border;position:relative;padding:.5rem 2.5rem .5rem .5rem;gap:.5rem}details summary:hover{background-color:var(--base-100);border-color:var(--base-100);color:var(--contrast);transition:background-color var(--transition-base);transition-property:background-color,border,color}details[open]>summary{background-color:var(--base-50)}details summary::after{content:"";background-color:var(--contrast-100);-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-image:var(--details);mask-image:var(--details);mask-repeat:no-repeat;mask-size:contain;width:1.25rem;height:1.25rem;margin-left:auto;transition:background-color var(--transition-base);transition-property:background-color,transform}details summary:hover::after,details[open]>summary::after{background-color:var(--contrast)}details[open]>summary::after{transform:rotate(-540deg);transition:background-color var(--transition-base);transition-property:background-color,transform}details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility var(--timing) allow-discrete,opacity var(--timing),block-size var(--timing)}details[open]::details-content{opacity:1;block-size:auto}@media (prefers-reduced-motion:no-preference){details{interpolate-size:allow-keywords}}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=textarea],input[type=url],textarea{font-family:var(--body);font-size:var(--medium);color:var(--contrast);padding:var(--p-y) var(--p-x);border-radius:var(--innerRadius);background-color:var(--base);outline:0;border:1px solid var(--base-100);border-bottom:2px solid var(--contrast-200);width:100%;max-width:100%;margin:0 4px;transition:background-color var(--transition-base);transition-property:background-color,border}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=textarea]:focus,input[type=url]:focus,textarea:focus{outline:var(--action-50);background-color:var(--base-100);color:var(--contrast)}input::placeholder,textarea::placeholder{font-family:var(--body);color:var(--base-200)}@media (min-width:768px){:root{--p-y:1rem}}select{background:var(--base);border:2px solid var(--base-100);border-radius:var(--innerRadius);color:var(--contrast);cursor:pointer;font-family:var(--body);font-size:var(--small);padding:.5rem 1rem;width:100%;transition:var(--transition-color)}select:disabled{background-color:var(--base-50);border-color:var(--base-100);color:var(--base-200);cursor:not-allowed}select option{background:var(--base);color:var(--contrast);padding:.5rem}select option:active,select option:checked,select option:focus,select option:hover{background:var(--action-0);color:var(--base);box-shadow:0 0 0 100px var(--action-0) inset}select option:checked{background:var(--action-0) linear-gradient(0deg,var(--action-0) 0,var(--action-0) 100%);color:var(--base)}select:hover{border-color:var(--action-0)}select:focus{border-color:var(--action-0)}input[type=search]:focus+.clear-search{opacity:1;cursor:pointer;transition:opacity var(--transition-base)}.search-container .clear-search{opacity:0;cursor:default;transition:opacity var(--transition-base)}.search-container .icon.search{padding:4px 8px;color:var(--contrast-200);--w:3rem}input[type=search]::-moz-search-clear-button,input[type=search]::-ms-clear,input[type=search]::-ms-reveal,input[type=search]::search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:none;visibility:hidden}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.integration .label,label{text-transform:uppercase;font-weight:700;margin-bottom:.5rem;display:block}.selected-items{--justify:flex-start;--gap:.5rem;margin-bottom:.5rem}.selected-item{padding:.25rem .5rem;margin:.125em;background:var(--base-100);border-radius:.25rem;font-size:var(--medium);border:1px solid var(--base-200);position:relative}.remove-item{background:0 0;border:none;padding:.25rem;cursor:pointer;color:#666;border-radius:var(--innerRadius);width:1.5em;height:1.5em}.remove-item .close{width:.5em;height:.5em}.remove-item:hover{color:var(--action-0);background:#fee}.clear-filters{margin-left:auto;border:1px solid var(--base-200)}[type=checkbox],[type=radio],input.ch{position:absolute;opacity:0;left:-200vw}[type=checkbox]+label,[type=radio]+label,input.ch+label{position:relative;cursor:pointer}[type=checkbox]+label:hover,[type=radio]+label:hover{color:var(--action-0)}[type=checkbox]+label::after,[type=checkbox]+label::before,[type=radio]+label::after,[type=radio]+label::before,input.ch+label::after,input.ch+label::before{content:'';position:absolute;top:50%}[type=checkbox]+label::after,[type=radio]+label::after,input.ch+label::after{left:5px;transform:translateY(-70%) rotate(45deg);width:5px;height:10px;border:solid var(--light-0);border-width:0 2px 2px 0;display:none}[type=checkbox]+label::before,[type=radio]+label::before,input.ch+label::before{left:0;transform:translateY(-50%);width:1rem;height:1rem;border:2px solid var(--contrast-200);background-color:var(--base);border-radius:var(--innerRadius);transition:background-color var(--transition-base),border-color var(--transition-base)}[type=checkbox]:hover+label::before,[type=radio]:hover+label::before,input.ch:hover+label::before{border-color:var(--action-200)}[type=checkbox]:checked+label::before,[type=radio]:checked+label::before,input.ch:checked+label::before{background-color:var(--action-0);border-color:var(--action-100)}[type=radio]:checked+label::before{border-radius:50%}[type=checkbox]:checked+label::after,input.ch:checked+label::after{display:block;left:5px;top:50%;transform:translateY(-70%) rotate(45deg);width:.35rem;height:.66rem;border:solid var(--light-0);border-width:0 2px 2px 0}[type=checkbox]:disabled+label,[type=radio]:disabled+label,input.ch:disabled+label{cursor:not-allowed;background-color:var(--base-50);color:var(--base-200);border-color:var(--base-200)}[type=checkbox]:disabled+label:hover,[type=radio]:disabled+label:hover,input.ch:disabled+label:hover{background-color:var(--base-50);color:var(--base-200);border-color:var(--base-200)}[type=checkbox]:disabled+label::before,[type=radio]:disabled+label::before,input.ch:disabled+label::before{border-color:var(--base-200)}[type=checkbox]:not(.btn)+label,[type=radio]:not(.btn)+label,input.ch+label{flex:1;padding-left:2rem;transform-origin:top center;transition:transform .3s ease;will-change:transform}.btn+label::after,.btn+label::before{display:none}.btn+label{--w:1.2em;border:1px solid var(--base-200);border-radius:var(--innerRadius);min-width:2rem;min-height:2rem;margin:0;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:.5rem;color:var(--contrast-200);opacity:.8}.radio-options.status label{padding:0 .5rem}.btn:checked+label{border-color:var(--contrast);color:var(--contrast);opacity:1}.btn+label:hover{color:var(--action-50);border-color:var(--action-50)}.btn[hidden]+label{display:none}.date-wrapper{position:relative;display:inline-block}input[type=date]{padding:8px 36px 8px 8px;border-radius:4px}input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0;cursor:pointer}input[type=date]+.icon{--w:20px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}input[type=url]{background:var(--linkIcon);background-position:.5em;background-size:1em;background-repeat:no-repeat;padding-left:2em}.field{margin:2rem 0;position:relative}.field:has(.has-tooltip) label{margin-left:2rem}.toggle-text input{display:none}.toggle-text input+label{font-weight:400;color:var(--contrast)!important;text-transform:none;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toggle-text label::after,.toggle-text label::before{display:none}.toggle-text label{padding-left:0!important}.toggle-text input+label .text{position:relative;margin:0 .5rem;font-weight:700;width:fit-content;padding:2px 4px;border:1px solid var(--action-50);border-radius:4px;color:var(--action-50)!important}table .toggle-text input+label .text{color:var(--contrast)!important;border-color:var(--contrast)}.toggle-text:hover .text,table .toggle-text:hover .text{background-color:var(--action-50);color:var(--light-0)!important;border-color:var(--action-50)}.toggle-text input+label .off,.toggle-text input+label .on{-webkit-transition:opacity .125s ease-out,-webkit-transform .125s ease-out;transition:opacity .125s ease-out,-webkit-transform .125s ease-out;transition:transform .125s ease-out,opacity .125s ease-out;transition:transform .125s ease-out,opacity .125s ease-out,-webkit-transform .125s ease-out}.toggle-text input+label .off{opacity:1;max-width:100%;-webkit-transform:none;transform:none}.toggle-text input+label .on{opacity:0;max-width:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.toggle-text input:checked+label .off{opacity:0;max-width:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.toggle-text input:checked+label .on{max-width:100%;opacity:1;-webkit-transform:none;transform:none}.items-container{margin:0;padding:0;width:100%}.create-new-term{margin-top:1rem;width:100%}.create-new-term .field,.create-new-term[open] summary{margin-bottom:1rem}.create-new-term .field{max-width:100%}#jvb-selector>.wrap{--gap:nowrap}.quantity{margin:0}.quantity label{margin:0;font-size:var(--small)}.quantity{display:inline-flex;width:fit-content;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px;position:relative}.quantity:focus-within{border-color:var(--action-0)}.quantity button{background:var(--base);padding:0;width:38px;height:38px;z-index:0;position:relative;border:1px solid var(--base-200);color:var(--contrast-200)}.quantity button:hover:not(:disabled){color:var(--action-0);border-color:var(--action-0);background-color:var(--base)}.quantity button:active:not(:disabled){background-color:var(--action-0);color:var(--light-0);transform:scale(.95)}.quantity button:disabled{opacity:.5;cursor:not-allowed}.quantity input[type=number]{z-index:1;border:1px solid var(--base-200);background:var(--base);text-align:center;font-size:1.1rem;width:60px;height:48px;margin:0;padding:0!important;appearance:textfield}.quantity input[type=number]::-webkit-inner-spin-button,.quantity input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity input[type=number]:focus{background-color:var(--base-50)}.quantity button.increase{left:-2px;border-radius:0 4px 4px 0}.quantity button.decrease{right:-2px;border-radius:4px 0 0 4px}.term-list{--justify:flex-start;--align:center;--wrap:nowrap;--gap:1.5rem;--dir:row;--w:1em;list-style:none;padding:0;height:var(--height);display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);position:relative;overflow:auto hidden;touch-action:pan-x;text-transform:lowercase}.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:''}.cover::before,.cover>img,.cover>video{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%}.cover>img{z-index:1;opacity:.5;mix-blend-mode:luminosity;object-fit:cover}@media (min-width:768px){.cover>img{opacity:.33}}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::after,blockquote .content::before{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}dialog::backdrop{backdrop-filter:blur(5px);background-color:var(--overlay-medium)}dialog[open]{z-index:999;--padding:0;top:5vh;width:min(500px,95vw);border-radius:1rem;height:fit-content;overflow:hidden;max-height:90vh;padding:var(--padding);background-color:var(--base-50);color:var(--contrast);border:1px solid var(--base-200);box-shadow:var(--shadow)}dialog>.wrap,dialog>form{max-height:100%;overflow:hidden auto;margin:0 0 0 1.5rem;padding-right:1.2rem;width:calc(100% - 1.5rem)}dialog label{font-weight:400}dialog h2,dialog h3{margin:0 0 .5rem 0;font-size:var(--large)}dialog:has(.m-actions){padding-bottom:var(--height)}.m-actions{--w:1.15em;--justify:flex-end;--wrap:nowrap;--gap:0;position:absolute;bottom:0;left:0;right:0;width:100%;z-index:var(--z-6);background-color:var(--action-100);box-shadow:var(--shadow-up)}.m-actions button{width:100%;height:3rem;border-radius:0;color:var(--action-contrast);background-color:var(--action-50);border:2px solid var(--action-50)}.m-actions button:focus,.m-actions button:hover{background-color:var(--base);color:var(--contrast)}.m-actions button:first-of-type{border-bottom-left-radius:1rem}.m-actions button:last-of-type{border-bottom-right-radius:1rem}dialog ul{list-style:none}dialog .search-container{padding-top:1rem;width:100%;gap:.5rem}dialog[open].gallery{width:calc(100vw - var(--padding) * 2);height:99vh;background:var(--overlay-heavy)}.gallery .content{position:relative;max-width:100%;max-height:100%;padding:2rem}.gallery .favourite button.favourite{top:unset;bottom:1rem;right:1rem}.gallery .image{max-width:100%;max-height:calc(100vh - 4rem);object-fit:contain}.gallery .cancel{position:absolute;top:1rem;right:1rem;background:0 0;border:none;color:#fff;cursor:pointer;padding:.5rem;z-index:10;transition:color .3s ease}.gallery .cancel:hover{color:var(--action-0)}.gallery .nav{position:absolute;top:50%;height:50%;z-index:5;transform:translateY(-50%);border:none;color:var(--contrast);cursor:pointer;padding:1rem;transition:color .3s ease}.gallery .nav:hover{background-color:var(--overlay-heavy)}.gallery .nav:hover{color:var(--action-0)}.gallery .prev{left:1rem}.gallery .next{right:1rem}.gallery .counter{position:absolute;top:1rem;left:1rem;color:#fff;font-size:.875rem}.gallery .content details{position:absolute;bottom:1rem;left:2rem;width:calc(100% - 4rem);background-color:var(--overlay-light);padding:0}.gallery .content details:hover,.gallery .content details[open]{background-color:var(--overlay-heavy);backdrop-filter:blur(5px)}.gallery .content details[open] summary{background-color:transparent}table{white-space:nowrap;width:100%;display:block;margin:0 0 2rem;border-radius:4px;height:var(--maxHeight);overflow:auto;position:relative}tfoot,thead{position:sticky;z-index:10;background-color:var(--base);text-transform:uppercase;padding:.5rem 0;line-height:2;font-weight:400}tr:nth-of-type(even){background-color:var(--base-200)}tfoot th{vertical-align:middle}tfoot th:first-of-type{text-align:right}tfoot tr,thead tr{background-color:var(--overlay-heavy);box-shadow:var(--shadow)}thead tr{border-bottom:1px solid var(--contrast-200)}tfoot tr{border-top:1px solid var(--contrast-200)}thead{top:0}tfoot{bottom:0}thead th{width:max-content}th p{margin:0!important}td{width:max-content;padding:.5rem 1rem}td .toggle input[type=checkbox]{margin:0}td .field{margin:.25rem 0}td[data-id=actions] label{margin:0;padding:0}td .description{display:none}td input[type=text]{width:fit-content;max-width:40vw;padding:.25em!important;font-size:var(--small)!important}tbody tr{border:2px solid transparent}tbody tr:focus-within{background-color:var(--base-100);border-color:var(--action-50)}[data-stuck]{background-color:var(--overlay-medium);position:sticky;left:-1rem;z-index:15;box-shadow:var(--subtleRight)}tbody [data-stuck]{z-index:5}tfoot [data-stuck],thead [data-stuck]{background:var(--base)}.hide-tooltip.hide-tooltip.hide-tooltip+[role=tooltip],[role=tooltip]{visibility:hidden;position:absolute;bottom:2rem;left:1rem;width:max-content;height:fit-content;max-width:50vw;padding:.5rem;border-radius:var(--innerRadius);box-shadow:var(--shadow);background:var(--action-0);color:var(--action-contrast)}body.menu_item [role=tooltip]{left:auto;right:100%;top:-200%;z-index:var(--z-4)}[role=tooltip] p{margin:0}[role=tooltip] p+p{margin-top:.5rem}.field:has([aria-describedby]:focus) [role=tooltip],[aria-describedby]:focus~.has-tooltip[role=tooltip],[aria-describedby]:hover~.has-tooltip [role=tooltip]{visibility:visible;display:block}.has-tooltip{display:inline-flex;justify-content:flex-end;position:absolute;top:0;left:0;--w:1.5rem}.tt-toggle{cursor:pointer;display:flex;border-radius:50%;background-color:transparent}.tt-toggle:focus,.tt-toggle:hover{background-color:var(--action-0);color:var(--action-contrast)}.tt-toggle:focus+[role=tooltip],.tt-toggle:hover+[role=tooltip]{visibility:visible}dialog[open]#jvb-selector{height:70vh;top:15vh;display:flex}#jvb-selector>.wrap{flex:1}dialog.loading{opacity:0;transition:opacity var(--transition-base)}dialog.loading[open]{opacity:1;transition:opacity var(--transition-base);width:100vw;height:100vh;display:flex;max-width:100%;max-height:100%;border-radius:0;border:none;background-color:transparent;box-shadow:none;--w:3em;justify-content:center;align-items:center}dialog.loading[open]@starting-style{opacity:0}dialog.loading[open]>.col{height:fit-content;width:min(400px,60vw);border-radius:var(--outerRadius);background-color:var(--overlay-medium);padding:2rem;box-shadow:var(--shadow);position:relative}dialog.loading[open] .spinner{position:absolute;top:1rem;width:5rem;height:5rem;border-width:0;border-top-width:4px;animation:spin 1s var(--function) infinite}.loading[open] .icon{background-color:var(--action-0)}dialog.loading[open] .icon{animation:dance 2s ease-in-out infinite;transition:color .3s ease}dialog.loading[open] h3{color:var(--contrast);margin:2rem 1rem auto!important;font-size:var(--large);width:-moz-fit-content;width:fit-content}dialog.loading[open] p{margin:.5rem auto}dialog.loading[open]::after{animation:shimmer 3s ease-in-out infinite;background:linear-gradient(90deg,var(--shimmer));content:"";inset:0;position:absolute;z-index:-1}.spinner{width:12px;height:12px;border:2px solid transparent;border-top:2px solid var(--action-50);border-radius:50%;animation:spin 1s var(--function) infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes shimmer{0%{left:-50%}50%{left:150%}100%{left:-50%}}@keyframes dance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}@keyframes letterOutline{0%{background-size:1ch 0}100%{background-size:1ch 100%}}@keyframes letterInside{0%,50%{background-position-y:100%,0}100%,50.01%{background-position-y:0,100%}}.tab-content[hidden]{display:block!important;transform:scaleY(0);height:0;overflow:hidden}.tab-content[hidden]:focus-within{transform:scaleY(1);height:auto}nav.tabs h2{margin:0!important;line-height:1;font-size:var(--medium);display:flex;color:var(--contrast);white-space:nowrap;gap:1rem}nav.tabs .active h2{color:var(--action-contrast)}nav.tabs button{padding:.75rem 1.5rem;border-radius:0;position:relative;border:2px solid var(--action-0)}nav.tabs>button:first-of-type{border-top-left-radius:var(--innerRadius)}nav.tabs>button:last-of-type{border-top-right-radius:var(--innerRadius)}.tabs>button:focus,.tabs>button:hover{background-color:var(--base-200)}.tabs>button::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;background-color:var(--action-50);transition:width .3s}.tabs>button.active::after,.tabs>button:hover::after{width:100%}.tabs>button.active::after{background-color:var(--action-200)}.tabs>button.active{background-color:var(--action-0);color:var(--action-contrast)}.tabs>button.active:focus,.tabs>button.active:hover{background-color:var(--action-100)}.tab-content h2{display:none}.toggle-details{gap:2px}body.menu_item #top{z-index:var(--z-4);position:relative}section .toggle-details{position:absolute;right:0;top:5rem}[data-toggle=all]{position:fixed;bottom:calc(var(--offHeight) + var(--height) + .5rem);right:0;z-index:var(--z-4);background-color:var(--action-0);color:var(--action-contrast)}[data-toggle]{z-index:var(--z-1)}body:has(#queue[hidden]) [data-toggle=all]{left:1rem}dialog:not([open]).col,dialog:not([open]).row{display:none}@media (min-width:768px){section .toggle-details{right:-10%}}.typeText::after{content:'|';display:inline-block;margin-left:0;animation:blink .75s step-end infinite}@keyframes blink{from,to{opacity:1}50%{opacity:0}}aside{position:fixed;top:var(--doubleHeight);bottom:var(--offHeight);width:min(500px,calc(100vw - 2rem));background-color:var(--base);z-index:var(--z-5);box-shadow:var(--shadow);padding-bottom:var(--height);overflow:visible}.qtoggle{z-index:var(--z-6);position:fixed;bottom:var(--offHeight);width:var(--height);height:var(--height);background-color:var(--overlay-medium);color:var(--contrast);transition:width var(--transition-base),background-color var(--transition-base),color var(--transition-base),left var(--transition-base);box-shadow:var(--shadow)}.qtoggle:focus,.qtoggle:hover{background-color:rgba(var(--action-rgb),var(--rgb-heavy));color:var(--action-contrast)}.qtoggle:disabled,.qtoggle:disabled:focus,.qtoggle:disabled:hover{opacity:.5;background-color:var(--overlay-light);color:var(--contrast)}.toggle-cart{right:0;border-radius:4px 4px 4px var(--outerRadius)}body:has(#cart.expanded) .toggle-cart .icon{display:none}aside#cart{padding-bottom:6rem}#cart form{max-height:100%;overflow:hidden auto}#cart nav.tabs{z-index:var(--z-6);top:0}#cart table{height:auto}#cart th{padding:0 1.5rem}#cart table th:first-of-type{width:100%}#cart nav.tabs{position:sticky;box-shadow:var(--shadow)}#cart button[data-tab]{flex:1;border-radius:0}#cart form>:not(.tabs){max-width:90%;margin:0 auto}#cart form .empty p{margin:.5rem 0!important}#cart .cart-total.cart-total{--gap:0 1rem;padding-right:1rem;position:absolute;bottom:var(--height);width:100%;max-width:100%;background-color:var(--overlay-heavy);z-index:var(--z-6);box-shadow:var(--shadow-up)}.cart-total p{--gap:2rem;max-width:100%;margin:0}.cart-total p span{width:6rem;display:inline-block;text-align:right}.cart-total p+p{font-weight:700}.cart-items .total{font-weight:700}#cart .restored{background-color:rgba(var(--action-rgb),var(--rgb-light));border-radius:var(--outerRadius);padding:1rem}.restored h3{font-size:var(--medium);margin:0}.restored p{margin:0}.restored .row{--gap:0;--wrap:nowrap;--w:1em}.toasts{position:fixed;top:4rem;right:-350px;z-index:1000;width:350px}.toast{background-color:var(--overlay-heavy);border-left:4px solid var(--action-0);padding:1rem;box-shadow:var(--shadow);left:0;position:relative;opacity:0;transition:left .3s,opacity .3s}.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--error)}.toast.info{border-left-color:var(--warning)}.toast.show{left:calc(-350px - 1rem);opacity:1}.toast.hiding{left:0;opacity:0}.toast-content p{margin:0}.close-toast{background:0 0;border:none;font-size:1.25rem;cursor:pointer;opacity:.5;transition:opacity .2s;color:inherit}.close-toast:hover{opacity:1}.qtoggle{left:0;border-radius:4px 4px var(--outerRadius) 4px}.qtoggle.expanded{left:var(--height);width:min(calc(500px - var(--height)),calc(100vw - 2rem - var(--height)))}.qtoggle.saving .icon{background-color:var(--action-0);animation:spin .87s var(--function) infinite}#queue .status-actions{position:absolute;bottom:0;left:0;right:0;z-index:var(--z-2)}#queue .status-actions .popup{position:absolute;z-index:-1;width:max-content;max-width:300px;background-color:var(--action-50);color:var(--action-contrast);border-radius:var(--innerRadius);padding:.25em .75em;top:1rem;left:-100vw;transition:left var(--transition-base)}aside#queue .popup::before{content:'';width:10px;height:10px;transform:rotate(-45deg);background-color:var(--action-50);z-index:-1;left:-5px;position:absolute;top:calc(50% - 5px)}.expanded#queue .status-actions .popup.showing{left:calc(100% + 1em)}#queue .status-actions .popup.showing{left:calc(200vw + var(--offHeight));max-width:75vw}#queue .item .status,.filter .count,.qtoggle .count,.qtoggle .indicator,.refresh .countdown{z-index:var(--z-3);--offset:0;position:absolute;top:var(--offset);background-color:var(--overlay-light)}.expanded+.qtoggle .count,.expanded+.qtoggle .indicator{--offset:.25rem}.qtoggle .indicator{right:var(--offset);width:.75rem;height:.75rem;border-radius:50%}aside#queue.synced+.qtoggle .indicator{background-color:var(--success)}aside#queue.pending+.qtoggle .indicator{background-color:var(--warning);animation:pulse 2s infinite}aside#queue.pending:not(.expanded)+.qtoggle .icon{background-color:var(--error);animation:spin 1s var(--function) infinite}.qtoggle .count{--align:center;--justify:center;left:var(--offset);min-width:1.25rem;height:1.25rem;padding:0 4px;color:var(--contrast);border-radius:var(--innerRadius);font-size:var(--extra-small)}#queue:has(.empty-queue)+.qtoggle .count{display:none}aside#queue .header{padding:15px;border-bottom:1px solid var(--base-200);flex-shrink:0}.qitems{flex:1;overflow:hidden auto;padding:.5rem 2rem;--gap:.5rem}aside#queue h3{margin:0 0 12px 0;font-size:16px;color:var(--contrast)}#queue .filters .filter{background-color:transparent;white-space:nowrap;font-size:var(--small)}#queue .filters .filter.active{background:var(--base-200);border-color:transparent}#queue .filter:focus,#queue .filter:hover{background-color:var(--action-0);color:var(--action-contrast)}.filter .count{--offset:-8px;right:var(--offset);background:var(--base-200);color:var(--contrast-200);border-radius:10px;min-width:18px;height:18px;font-size:10px}.filter .count:empty{display:none}.empty-queue{height:100px;color:var(--contrast-200);font-size:var(--small);font-style:italic}.refresh .countdown:not(.counting),aside#queue:has(.empty-queue) .refresh .count{display:none}#queue .item{padding:15px;background:var(--base-100);border-radius:var(--innerRadius);transition:all .2s ease;box-shadow:var(--shadow-none)}#queue .item:hover{box-shadow:var(--shadow)}#queue .item .header{position:relative}#queue .item .type{font-size:var(--small)}#queue .item .status{--w:1em;--gap:0;--justify:center;--align:center;--offset:-1.2rem;aspect-ratio:1;right:var(--offset);border-radius:50%;color:var(--contrast-200);background-color:var(--base-50);border:1px solid var(--base-200);width:1.25em;height:1.25em}#queue .item .status.pending{background:var(--base-100);color:var(--contrast-200)}#queue .item .status.processing{background:var(--base-200);color:var(--contrast-100);animation:pulse-color 2s infinite}#queue .item .status.completed{background:var(--base-50);color:var(--base-200)}#queue .item .status.completed:hover{color:var(--contrast-200)}#queue .item .status.failed{background:var(--base);color:var(--error)}#queue .item button{font-size:16px;padding:0;line-height:1;opacity:.5;transition:opacity .2s}#queue .item button:hover{opacity:1}#queue .item .info{margin-top:8px;font-size:var(--small)}#queue .item .info .time{--gap:7px;font-size:10px}#queue .item .actions{margin-top:12px;--gap:8px}#queue .item .actions button{padding:6px 12px;font-size:12px;background:var(--base-200);border:none;border-radius:4px;cursor:pointer;transition:all .2s;color:var(--contrast)}#queue .item .actions .retry{background-color:var(--secondary-200);color:var(--secondary-contrast)}#queue .item .actions button:hover{opacity:.9}.queue-actions{padding:15px;border-top:1px solid var(--base-200);flex-shrink:0}.queue-actions button{padding:8px 12px;font-size:var(--small);transition:all .2s}.status-actions>.refresh{position:relative;font-size:var(--small)}.refresh .countdown{--justify:center;--align:center;--offset:0;right:var(--offset);margin:0 3px;border-radius:50%;border:1px solid var(--base-200)}.refreshNow{width:var(--height);height:var(--height)}.refreshNow:hover{background:var(--base-200);color:var(--contrast-200)}.icon.refresh{--w:18px}#queue.pending.expanded .refreshNow .icon{animation:spin 1.5s var(--function) infinite}#queue,.item-grid{counter-reset:delay-counter}.item{counter-increment:delay-counter}.item .progress .fill::after{--delay:calc(counter(delay-counter) * .1s)}.progress .bar{height:6px;display:block;border-radius:6px;overflow:hidden;background:var(--base-200);position:relative}.progress .fill{height:100%;background:var(--action-0);border-radius:6px;width:0;transition:width .3s ease}.progress .details{margin-top:5px;font-size:var(--small);color:var(--contrast);text-align:center;padding:.25rem 0}.progress .details:empty{display:none}.pending .fill::after,.processing .fill::after,.queued .fill::after,.uploading .fill::after{--delay:0s;content:'';position:absolute;top:0;left:-50%;width:30%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.225) 50%,rgba(255,255,255,0) 100%);animation:shimmer 2.5s infinite linear var(--delay)}.additional-actions.additional-actions{padding:0;background-color:transparent}.additional-actions .buttons{position:fixed;bottom:var(--offHeight);right:1rem;margin:0;--gap:1rem;z-index:var(--z-6);width:fit-content}.additional-actions .buttons button{height:var(--height);width:var(--height);background-color:var(--overlay-medium);color:var(--contrast);transition:width var(--transition-base),background-color var(--transition-base),color var(--transition-base),left var(--transition-base);box-shadow:var(--shadow)}.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}.additional-actions .buttons button:disabled,.additional-actions .buttons button:disabled:focus,.additional-actions .buttons button:disabled:hover{opacity:.5;background-color:var(--overlay-light);color:var(--contrast)}.additional-actions .buttons button:last-of-type{border-radius:4px 4px 4px var(--outerRadius)}aside{position:fixed;top:var(--doubleHeight);bottom:var(--offHeight);width:min(500px,calc(100vw - 2rem));background-color:var(--base);z-index:var(--z-5);box-shadow:var(--shadow);--wrap:nowrap;--align:stretch;overflow:hidden auto;padding:1rem 1rem var(--height)}aside.left{left:var(--offScreen);transition:left var(--transition-base);border-radius:0 var(--outerRadius) var(--outerRadius) 0}aside.left.expanded{left:0}aside.right{right:var(--offScreen);border-radius:var(--outerRadius) 0 0 var(--outerRadius);transition:right var(--transition-base)}aside.right.expanded{right:0}aside.right.expanded button.close{position:sticky;bottom:calc(var(--height) * -1);left:0;border-bottom-left-radius:var(--outerRadius);width:var(--height);height:var(--height)}.additional-actions .buttons:has(.expanded) button:not(.expanded){display:none}.additional-actions .buttons:has(.expanded){right:0}.additional-actions .buttons .expanded{width:calc(min(500px,calc(100vw - 2rem)));background-color:var(--base)}.additional-actions .buttons .expanded:hover,.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}[type=submit]{width:100%;height:var(--height);background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shadow-none);font-weight:700}[type=submit]:hover{box-shadow:var(--shadow);border:2px solid var(--action-0);color:var(--action-0);background-color:var(--action-contrast)}aside nav.tabs{position:sticky;bottom:unset;top:0;left:0;right:0}.jvb-referral nav.tabs button{width:50%}aside .tab-content.active{padding:1rem;min-height:100%}aside header h3{font-size:var(--medium);margin:1rem 0;text-align:center}aside header p{margin:.25rem 0;text-align:center}aside h4{font-size:var(--small);margin:1rem 0 0 0}code{width:100%;margin:.5rem;padding:.5rem;user-select:all;text-align:center;border-radius:4px;background-color:var(--base-200);border:1px solid var(--contrast-200)}.restore-form{background-color:rgba(var(--action-rgb),var(--rgb-light));border:1px solid var(--action-200);padding:.5rem;border-radius:var(--outerRadius);margin:1rem 2rem}.restore-form h3{text-align:center;margin:1rem 0 0;font-size:var(--medium)}.restore-form p{margin:.5rem 0}.fstatus{z-index:var(--z-5);background-color:rgba(var(--base-rgb),var(--rgb-heavy));border-radius:4px;padding:0 .5rem;position:fixed;bottom:var(--offHeight);right:calc(var(--offHeight) + 1rem);--w:1em;box-shadow:var(--shadow)}.fstatus .spinner{display:none}.fstatus.loading .spinner{display:inline-block}.fstatus p{margin:0;padding:.25rem}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)}@keyframes shimmer{0%{left:-50%}50%{left:150%}100%{left:-50%}}@keyframes pulse-color{0%{box-shadow:0 0 0 0 rgba(var(--action-rgb),.4)}30%{box-shadow:0 0 0 .75rem rgba(var(--action-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--action-rgb),0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes detect-scroll{from,to{--can-scroll:1}}.menu-items .menu-item{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}.menu-items .menu-item:not(.variable) label{display:none}.menu-items .menu-item .field{margin:0;--wrap:nowrap}.menu-items .menu-item .has-tooltip{position:absolute;right:-2.5rem}.menu-items .menu-item+.menu-item{border-top:1px solid var(--base-200);margin-top:2rem;padding-top:1rem}.menu-items .menu-item .header{grid-column:1/-1}.menu-items .menu-item .description{grid-column:1/3}.menu-items .menu-item .info{grid-column:3/3}.menu-items .menu-item h3{font-size:var(--medium);font-weight:400;margin:0 0 .5rem 0!important}.menu-items .menu-item .info{--gap:1rem}.price>span{vertical-align:super;font-size:12px}body.menu_item section>h2{display:inline-block;max-width:var(--maxWidth);width:max-content;background-color:var(--base-50);color:var(--action-0);position:relative;z-index:5;padding:0 1rem;margin:var(--mt) auto var(--mb) auto}.menu-section{position:relative}.menu-section hr{position:absolute;width:100%;left:-5%;top:3.5rem;border:none;background-color:var(--action-100);height:2px}details.menu-item summary.row{flex-direction:column;align-items:flex-start}details.menu-item summary .row{width:100%}.menu_item h1:first-of-type{margin-top:10vh!important}@media (min-width:768px){.menu-section hr{width:120%;left:-10%;top:4.25rem}.menu_item section{max-width:var(--maxWidth)}}/*!** Forms **!*//*!*.field.time_open,*!*//*!*.field.time_closes,*!*//*!*.field.date_start,*!*//*!*.field.time_start,*!*//*!*.field.time_end {*!*//*!* margin-bottom: 0;*!*//*!*}*!*//*!*.field.time_open,*!*//*!*.field.time_closes,*!*//*!*.field.time_start,*!*//*!*.field.time_end {*!*//*!* width: 49%;*!*//*!* display: inline-block;*!*//*!* margin-top: 1rem;*!*//*!*}*!*//*!* Style for disabled state *!*//*!** Shop Page **!*//*!** Bio Sections **!*//*!*!* Status notification *!*//*!*.status-notification {*!*//*!* position: fixed;*!*//*!* bottom: 20px;*!*//*!* left: 80px; !* Position to the right of the panel *!*!*//*!* width: 300px;*!*//*!* max-width: calc(100vw - 100px);*!*//*!* border-radius: 8px;*!*//*!* padding: 15px;*!*//*!* background: #323232;*!*//*!* color: white;*!*//*!* transform: translateY(20px);*!*//*!* opacity: 0;*!*//*!* transition: transform .3s, opacity .3s;*!*//*!* z-index: 10000;*!*//*!* box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*//*!* pointer-events: none;*!*//*!*}*!*//*!*.status-notification.active {*!*//*!* transform: translateY(0);*!*//*!* opacity: 1;*!*//*!* pointer-events: auto;*!*//*!*}*!*//*!*.status-notification .title {*!*//*!* font-weight: 600;*!*//*!* margin-bottom: 5px;*!*//*!* font-size: 15px;*!*//*!*}*!*//*!*.status-notification .message {*!*//*!* margin-bottom: 10px;*!*//*!* font-size: 14px;*!*//*!*}*!*//*!*.status-notification .actions {*!*//*!* display: flex;*!*//*!* justify-content: flex-end;*!*//*!*}*!*//*!*.status-notification .actions button {*!*//*!* padding: 6px 12px;*!*//*!* background: rgba(255, 255, 255, .2);*!*//*!* border: none;*!*//*!* border-radius: 4px;*!*//*!* color: white;*!*//*!* cursor: pointer;*!*//*!* font-size: 13px;*!*//*!* transition: background .2s;*!*//*!*}*!*//*!*.status-notification .actions button:hover {*!*//*!* background: rgba(255, 255, 255, .3);*!*//*!*}*!*//*!* Progress containers in notifications *!*//*!* Collapsed state - just show the toggle button *!*//*!***/.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)}/*!***//*!*.new-term-toggle:disabled + .loader,*!*//*!*.loading .loader {*!*//*!* width: 50px;*!*//*!* aspect-ratio: 1;*!*//*!* display: grid;*!*//*!* border: 4px solid #0000;*!*//*!* border-radius: 50%;*!*//*!* border-right-color: var(--action-0);*!*//*!* animation: l15 1s infinite linear;*!*//*!*}*!*//*!*.new-term-toggle:disabled + .loader::before,*!*//*!*.new-term-toggle:disabled + .loader::after,*!*//*!*.loading .loader::before,*!*//*!*.loading .loader::after {*!*//*!* content: "";*!*//*!* grid-area: 1/1;*!*//*!* margin: 2px;*!*//*!* border: inherit;*!*//*!* border-radius: 50%;*!*//*!* animation: l15 2s infinite;*!*//*!*}*!*//*!*.new-term-toggle:disabled + .loader::after,*!*//*!*.loading .loader::after {*!*//*!* margin: 8px;*!*//*!* animation-duration: 3s;*!*//*!*}*!*//*!*@keyframes l15{*!*//*!* 100%{transform: rotate(1turn)}*!*//*!*}*!*//*!* High contrast mode support *!*//*!** TODO: Verify **!*/input[type=date],input[type=datetime-local],input[type=time]{padding:.5rem;border:1px solid var(--contrast-200);border-radius:4px;font-size:14px;min-width:180px;background:var(--base);color:var(--contrast);cursor:pointer;transition:border-color .2s ease}.date-wrapper input[type=date]:focus,.datetime-wrapper input[type=datetime-local]:focus,.field-input-wrapper input[type=date]:focus,.field-input-wrapper input[type=datetime-local]:focus,.field-input-wrapper input[type=time]:focus,.time-wrapper input[type=time]:focus{border-color:var(--action-0);box-shadow:0 0 0 2px rgba(var(--action-rgb),.1)}.date-wrapper .icon,.datetime-wrapper .icon,.field-input-wrapper .icon,.time-wrapper .icon{width:18px;height:18px;background-color:var(--contrast);opacity:.7}/*!* Required field asterisk *!*//*!* Invalid field styling *!*//*!* Frontend Display *!*//*!* Set and Checkbox Field Display *!*//*!* Radio and Select Field Display *!*//*!* True/False Field Display *!*//*!* Group Field Styling *!*//*!* Responsive Design *!*/legend{padding:0 1rem}.abs{position:absolute}.top{top:0;right:0;left:0}.top-right{top:0;right:0}.top-left{top:0;left:0}.btm{bottom:0;left:0;right:0}.btm-right{bottom:0;right:0}.btm-left{bottom:0;left:0}.edges{top:0;right:0;left:0;bottom:0}.referral-widget{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px;margin:20px 0;box-shadow:0 2px 4px rgba(0,0,0,.05)}.referral-header{text-align:center;margin-bottom:20px}.referral-header h3{margin:0 0 8px 0;color:#2271b1}.referral-header p{margin:0;color:#666;font-size:14px}.referral-link-section{margin-bottom:20px}.referral-link-section label{display:block;font-weight:600;margin-bottom:8px;color:#333}.link-copy-wrapper{display:flex;gap:8px}.link-copy-wrapper input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-family:monospace;font-size:13px;background:#f9f9f9}.copy-link-btn{padding:10px 20px;background:#2271b1;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}.copy-link-btn:hover{background:#135e96}.referral-code-display{margin:8px 0 0 0;font-size:13px;color:#666}.referral-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:16px;margin-bottom:20px;padding:16px;background:#f8f9fa;border-radius:6px}.stat-item{text-align:center}.stat-value{display:block;font-size:24px;font-weight:700;color:#2271b1}.stat-label{display:block;font-size:12px;color:#666;margin-top:4px}.share-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #ddd;border-radius:4px;text-decoration:none;color:#333;font-size:14px;font-weight:500;transition:all .2s}.share-btn:hover{background:#f5f5f5;border-color:#999}.form-group{margin-bottom:16px}.form-group label{display:block;font-weight:600;margin-bottom:8px;color:#333}.input-button-wrapper{display:flex;gap:8px}.input-button-wrapper input{flex:1;padding:12px 16px;border:2px solid #ddd;border-radius:4px;font-size:16px;font-family:monospace;font-weight:600;text-transform:uppercase;transition:border-color .2s}.input-button-wrapper input:focus{outline:0;border-color:#2271b1}.validate-btn{padding:12px 24px;background:#2271b1;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}.validate-btn:hover{background:#135e96}.validate-btn:disabled{background:#ccc;cursor:not-allowed}.helper-text{margin:8px 0 0 0;font-size:13px;color:#666}.helper-text a{color:#2271b1;text-decoration:none}.helper-text a:hover{text-decoration:underline}.message{padding:12px 16px;border-radius:4px;margin-top:16px;font-size:14px}.message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.referral-success-state{text-align:center}.success-icon{width:80px;height:80px;margin:0 auto 20px;background:#28a745;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px}.success-content h3{color:#28a745;margin:0 0 12px 0}.reward-highlight{background:#e7f5ff;padding:20px;border-radius:6px;margin:20px 0;border-left:4px solid #2271b1}.reward-highlight strong{color:#2271b1;font-size:18px}.cta-button{display:inline-block;padding:14px 32px;background:#2271b1;color:#fff;text-decoration:none;border-radius:4px;font-weight:600;margin-top:16px;transition:background .2s}.cta-button:hover{background:#135e96}.referred-by{margin-top:16px;padding-top:16px;border-top:1px solid #ddd;font-size:13px;color:#666}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2271b1;border-radius:50%;animation:spin 1s linear infinite;margin-left:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width:600px){.input-button-wrapper{flex-direction:column}.validate-btn{width:100%}.link-copy-wrapper{flex-direction:column}.copy-link-btn{width:100%}}.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 figure,.media-text>div{width:100%;margin:0}.media-text>div{max-width:var(--maxWidth);margin:0 auto;padding:2rem}
\ No newline at end of file
+*/:root{--half:min(384px, 17.5vw);--narrow:min(500px, 62.5vw);--content:min(768px, 65vw);--wider:min(900px, 75vw);--wide:min(1024px, 90vw);--full:100vw;--offScreen:-200vw;--chip:1.5rem;--chipchip:3rem;--chip_:2rem;--btn:4rem;--btn_:5rem;--btnbtn:8rem;--maxHeight:calc(100vh - var(--btnbtn));--dir:row;--justify:center;--align:center;--wrap:wrap;--gap:.5rem;--w:1.2em;--font-base:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--heading:'Aleo',var(--font-base);--body:'Josefin Slab',var(--font-base);--fw-h-light:400;--fw-h:900;--fw-h-bold:900;--fw-b-light:200;--fw-b:400;--fw-b-bold:700;--txt-small:clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);--txt-x-small:clamp(.95rem, .879rem + .19vw, 1.05rem);--txt-medium:clamp(1.1rem, .993rem + .286vw, 1.25rem);--txt-x-medium:clamp(1.4rem, .971rem + 1.143vw, 2rem);--txt-large:clamp(1.3rem, .6rem + 1.867vw, 2rem);--txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);--txt-xx-large:clamp(2rem, 1.286rem + 1.905vw, 3rem);--txt-xxx-large:clamp(2.5rem, 1.429rem + 2.857vw, 4rem);--txt-enormous:calc(26vh - 4rem);--filter:grayscale(.3) sepia(.4);--mix-blend-mode:darken;--coverBlend:overlay;--coverIndex:2;--light-0:#fafafa;--light-50:#fcfbfb;--light-100:#f1eded;--light-200:#e6dfdf;--light-rgb:250,250,250;--dark-0:#201313;--dark-50:#261717;--dark-100:#2d1b1b;--dark-200:#331e1e;--dark-rgb:16,4,4;--action-0:#B7332E;--action-50:#a32d29;--action-100:#8e2824;--action-200:#7a221f;--action-contrast:var(--light-0);--action-rgb:183,51,46;--secondary-0:#E8A737;--secondary-50:#e59d20;--secondary-100:#d48f18;--secondary-200:#bd7f16;--secondary-contrast:var(--light-0);--secondary-rgb:232,167,55;--success:#22C55E;--successBack:#d4edda;--successText:#155724;--warning:#E8A737;--error:#EF4444;--errorBack:#f8d7da;--errorText:#721c24;--base:var(--light-0);--base-50:var(--light-50);--base-100:var(--light-100);--base-200:var(--light-200);--base-rgb:var(--light-rgb);--contrast:var(--dark-0);--contrast-50:var(--dark-50);--contrast-100:var(--dark-100);--contrast-200:var(--dark-200);--contrast-rgb:var(--dark-rgb);--shimmer:rgba(var(--dark-rgb),0) 0%,rgba(var(--dark-rgb),.05) 50%,rgba(var(--dark-rgb),0) 100%;--op-1:.05;--op-2:.15;--op-3:.25;--op-45:.45;--op-4:.66;--op-5:.75;--op-6:.85;--shdw-inset:inset 0 0 4px 1px;--shdw:0 0 4px;--shdw-down:0 6px 5px -5px;--shdw-right:6px 0 5px -5px;--shdw-left:-6px 0 5px -5px;--shdw-up:0 -6px 5px -5px;--shdw-subtle:0 25px 20px -20px;--shdw-subtle-right:10px 0 20px -20px;--shdw-none:transparent 0 0 0;--z-1:5;--z-2:10;--z-3:15;--z-4:20;--z-5:50;--z-6:100;--z-7:999;--z-8:1000;--z-9:999999;--z-10:9999999;--radius:4px;--p-outer:1rem;--radius-outer:calc(var(--radius) + var(--p-outer));--p-y:1rem;--p-x:1rem;--trans-fn:cubic-bezier(.47,.24,.07,.47);--trans-t:.25s;--trans-base:var(--trans-t) var(--trans-fn);--trans-color:background-color var(--trans-base),color var(--trans-base),border var(--trans-base);--trans-transform:transform var(--trans-base);--trans-size:width var(--trans-base),height var(--trans-base),max-width var(--trans-base),max-height var(--trans-base);--trans-vis:opacity var(--trans-base);--sp1:clamp(0.5rem, 0.714vw + 0.321rem, 1rem);--sp2:clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);--sp3:clamp(1rem, 1.429vw + 0.643rem, 2rem);--sp4:clamp(1.5rem, 2.143vw + 0.964rem, 3rem);--sp5:clamp(2rem, 2.857vw + 1.286rem, 4rem);--sp6:clamp(3rem, 4.286vw + 1.929rem, 6rem);--sp7:clamp(4rem, 5.714vw + 2.571rem, 8rem);--sb-width:8px;--sb-track:var(--base-100);--sb-thumb:var(--action-0);--sb-thumb-hover:var(--action-50);--sb-thumb-border:2px solid var(--base-50);--sb-radius:4px;--details:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');--link:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>')}body:has(#theme-switcher:checked){--mixBlendMode:lighten;--coverBlend:multiply;--coverIndex:0;--action-50:#cb3933;--action-100:#d14c47;--action-200:#d6605c;--secondary-50:#ebb14e;--secondary-100:#edbb65;--secondary-200:#f0c57c;--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:#155724;--successText:#d4edda;--errorBack:#721c24;--errorText:#f8d7da;--shimmer:rgba(var(--c),0) 0%,rgba(var(--c),.05) 50%,rgba(var(--c),0) 100%}@layer reset{font:clamp(1rem,1rem + .5vw,2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,::after,::before{box-sizing:border-box}h1,h2{font-weight:900;letter-spacing:-.02rem}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0}dd,li,p{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}dl,ol,ul{margin:0;padding:0;list-style:outside}iframe,img,video{display:block;max-inline-size:100%;block-size:auto;border-style:none}figure{inline-size:fit-content;margin-inline:auto}figcaption{contain:inline-size;font-size:90%}button,input,select,textarea{font:inherit}label{display:block}input:not(:where([type=submit],[type=checkbox],[type=radio],[type=button],[type=reset])){inline-size:100%}button,input:where([type=submit],[type=reset],[type=button]){background:CanvasText;color:Canvas;border:1px solid transparent}textarea{field-sizing:content;min-block-size:5lh;inline-size:100%;max-inline-size:100%}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,monospace}svg{fill:currentColor}[aria-disabled=true i],[disabled]{cursor:not-allowed}[hidden]{display:none!important}[disabled],label:has(input[disabled]){opacity:.5}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible;margin-block:2.5rem}:target{scroll-margin:3rlh}table{caption-side:bottom;border-collapse:collapse}td,th{word-break:normal;border:1px solid gray;padding:.5rem}caption{font-size:90%}.screen-reader-text:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:focus-visible{outline-offset:2px}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}html{interpolate-size:allow-keywords}}::-webkit-scrollbar{width:var(--sb-width);height:var(--sb-width)}::-webkit-scrollbar-track{background:var(--sb-track)}::-webkit-scrollbar-thumb{background-color:var(--sb-thumb);border-radius:var(--sb-radius);border:var(--sb-thumb-border)}::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}body{background-color:var(--base-50);color:var(--contrast);margin:0;font-family:var(--body);font-weight:var(--fw-b);font-size:var(--txt-medium);line-height:1.4;position:relative;max-width:100vw}body,body *{transition:var(--trans-color)}html{scroll-behavior:smooth;overflow-x:hidden}@media(prefers-reduced-motion){html{scroll-behavior:unset}*{transition:none!important;animation:none!important}}body.loading,body:has(aside.expanded),body:has(dialog[open]),body:has(nav.open){overflow:hidden;max-height:100vh}main{display:grid;grid-template-columns:[full-start] minmax(1rem,1fr) [wide-start] minmax(0,calc((100% - var(--content))/ 2)) [wider-start] minmax(0,calc((var(--wide) - var(--wider))/ 2)) [content-start] minmax(0,calc((var(--wider) - var(--content))/ 2)) [narrow-start] min(100% - 2rem,var(--narrow)) [narrow-end] minmax(0,calc((var(--content) - var(--narrow))/ 2)) [content-end] minmax(0,calc((var(--wider) - var(--content))/ 2)) [wider-end] minmax(0,calc((var(--wide) - var(--wider))/ 2)) [wide-end] minmax(0,calc((100% - var(--content))/ 2)) minmax(1rem,1fr) [full-end];min-height:var(--maxHeight)}main>*{grid-column:content}main>section{padding:3rem 0;grid-column:full}main>section>*{width:100%;max-width:var(--content)}main .align-narrow{grid-column:narrow}main .align-content{grid-column:content}main .align-wider{grid-column:wider}main .align-wide{grid-column:wide}main .align-full{grid-column:full;width:100%;max-width:none}main>:first-child{margin-top:0}.wp-site-blocks>header{position:sticky;top:0;z-index:var(--z-8);background-color:var(--base);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);transition:top var(--trans-base)}.scroll-progress{position:absolute;inset-inline:0;bottom:0;height:3px;display:flex;align-items:center;pointer-events:none;z-index:var(--z-3);background-color:var(--base-200);overflow:hidden}.scroll-progress .bar{width:100%;height:1px;transform-origin:left center;transform:scaleX(0);background:var(--action-0)}aside.pre-footer,aside.pre-header,aside.sub-footer,aside.sub-header{height:var(--chip_);display:flex;justify-content:space-between;align-items:center;padding:0 1rem;font-size:var(--txt-x-small);background-color:var(--base-50);z-index:var(--z-7)}.pre-header p{width:max-content}.pre-header{position:sticky;top:-2rem;transition:top var(--trans-base)}.scroll-up .pre-header{top:0}.scroll-up .pre-header~header{top:calc(var(--chip_) - 2px)}footer{padding:1rem;background-color:var(--base-200);color:var(--contrast-200);text-align:center;margin:4rem 0 0;position:relative;z-index:var(--z-7)}footer p{margin:0 auto}body:has(nav.fixed.bottom,nav.on-this-page) footer{padding-bottom:var(--btn_)}@media (min-width:768px){footer{padding:1rem 2rem var(--btn_)}}:target{scroll-snap-margin-top:var(--btnbtn);scroll-margin-top:var(--btnbtn);outline:double var(--action-200);background-color:var(--base)}body :is(b,strong){font-weight:var(--fw-b-bold)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--heading);text-transform:uppercase;font-weight:var(--fw-h);line-height:1.3;margin:1.5em auto .25em;width:100%}:is(h1,h2,h3,h4,h5,h6),p{width:100%}:is(h1,h2,h3,h4,h5,h6) :is(b,strong){font-weight:var(--fw-h-bold);letter-spacing:2px}:is(h1,h2,h3,h4,h5,h6) small{display:block;line-height:.8;font-family:var(--body);font-size:.5em}:is(h1,h2,h3,h4,h5,h6) small :is(b,strong){font-weight:var(--fw-b-bold)}:is(h1,h2,h3,h4,h5,h6).inline{font-size:1.2rem;font-weight:600;display:inline-block;margin:0 2rem 0 0;letter-spacing:.05em}:is(h1,h2,h3,h4,h5,h6).inline+*{display:inline-block;margin:.5rem 0}:is(h1,h2,h3,h4,h5,h6).inline+.term-list{display:inline-flex;margin:.5rem 0}h1{font-size:var(--txt-xxx-large);font-weight:var(--fw-h);line-height:1;margin:0 auto .25em}h1:first-of-type{margin-top:10vh}h1 small{display:block;font-size:var(--txt-x-small);font-weight:var(--fw-b);line-height:1;margin-bottom:.75em;font-family:var(--body)}h1 small+small{display:inline-block;font-size:var(--txt-large);margin-right:.5rem}h2{font-size:var(--txt-xx-large)}h3{font-size:var(--txt-x-large)}h4{font-weight:400;font-size:var(--txt-large)}h5,h6{font-weight:400;font-size:var(--txt-medium)}p{line-height:1.6}.hint{line-height:1.2;font-style:italic;font-size:var(--txt-small)}main>* p{margin:.5rem 0}a{color:var(--action-0);border-radius:4px;padding:.125rem}ul a{display:inline-flex}a:visited{color:var(--action-50)}a:hover{color:var(--contrast-50);text-decoration:none}:is(h1,h2,h3,h4,h5,h6) a:hover,li a:hover,p a:hover{color:var(--action-contrast);background-color:var(--action-0)}ol{list-style-type:decimal}.font-small{font-size:var(--txt-x-small)}.font-medium{font-size:var(--txt-medium)}.font-large{font-size:var(--txt-large)}.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)}.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]{display:none!important}@media (max-width:767px){.hide-small{display:none}}.width-25,.width-50,.width-75{width:100%}.w-full{width:100%}@media (min-width:768px){.buttons li.width-50,.width-50{width:calc(50% - .3em)}.width-25{width:calc(25% - .3em)}.width-75{width:calc(75% - .3em)}}.col,.row{display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);--align:center;--justify:center;--gap:.5rem;--wrap:wrap}.col{--dir:column}.row{--dir:row}.col.rev{--dir:column-reverse}.row.rev{--dir:row-reverse}.nowrap.nowrap{--wrap:nowrap}.nowrap.nowrap.stack-small{--wrap:wrap}@media (min-width:768px){.nowrap.nowrap.stack-small{--wrap:nowrap}}.col.start,.row.a-start{--align:flex-start}.col.end,.row.a-end{--align:flex-end}.col.a-start,.row.start{--justify:flex-start}.col.a-end,.row.end{--justify:flex-end}.col.btw,.row.btw{--justify:space-between;width:100%}.col.even,.row.even{--justify:space-evenly}.abs{position:absolute}:has(>.abs){position:relative}.top{top:0;right:0;left:0}.top-right{top:0;right:0}.top-left{top:0;left:0}.btm{bottom:0;left:0;right:0}.btm-right{bottom:0;right:0}.btm-left{bottom:0;left:0}.edges{inset:0}.hidden{transform:scale(0);max-width:0;max-height:0;overflow:hidden;transition:var(--trans-transform),var(--trans-size)}.visible{transform:scale(1);max-width:100%;max-height:100%;transition:var(--trans-transform),var(--trans-size)}.toggle-switch input{opacity:0;width:0;height:0;position:absolute;left:var(--offScreen)}.toggle-switch .slider{position:relative;width:2rem;height:1rem;background-color:var(--base-200);border-radius:.75rem;overflow:hidden;display:flex;justify-content:space-evenly;align-items:center;border:4px solid transparent;transition:var(--trans-t);box-shadow:0 0 .25rem 0 rgba(var(--contrast-rgb),.125) inset;cursor:pointer;margin:5px}.toggle-switch .slider::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--base);transform:translateX(-1rem);border-radius:.75rem;transition:var(--trans-transform);box-shadow:0 0 .25rem 3px rgba(var(--contrast-rgb),.125)}.toggle-switch input:checked~.slider::before{transform:translateX(1rem);box-shadow:0 0 .25rem 3px rgba(var(--base-rgb),.25)}.toggle-switch input:checked~.slider{background-color:var(--action-0)}.toggle-switch input:active~.slider::before{transform:translate(0)}#theme-switch{z-index:99;margin:0;--wrap:nowrap;--gap:1rem}#theme-switch .slider{width:var(--chipchip);height:var(--chip)}#theme-switch .slider::before{transform:translateX(-1.5rem)}#theme-switch input:checked~.slider::before{transform:translateX(1.5rem)}@media (max-width:600px){#theme-switch{left:1rem}.wp-site-blocks>header{padding:0!important}}.grid-view,.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.item-grid.stats{grid-template-columns:repeat(2,1fr)}@media (min-width:768px){.grid-view,.item-grid{--width:250px;grid-template-columns:repeat(auto-fill,minmax(var(--width),1fr))}}.grid-view .item,.item-grid .item{border-radius:var(--radius-outer);aspect-ratio:1;display:flex;filter:none}.item-grid button{--height:max-content;aspect-ratio:1}.grid-view img,.item-grid img{border-radius:var(--radius)}.item-grid.list-view{display:flex;flex-direction:column;gap:2rem;--gap:2rem}.item-grid.list-view .item .col{--gap:.5rem}.item-grid.list-view img{width:20%}@media (min-width:768px){.grid-view,.item-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.btn+label,.buttons a,[type=submit],a.button,button{--justify:center;--align:center;--dir:row;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(--radius);padding:.25rem 1rem;font-family:var(--heading);cursor:pointer;outline:0;min-height:var(--btn);display:inline-flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);position:relative;box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset)}.btn+label,[data-filter]{width:var(--chipchip);height:var(--chipchip);min-height:var(--chipchip)}select[data-filter]{width:max-content;height:auto;min-height:0}ul.socials a{background-color:var(--base-100);color:var(--contrast-50);border:1px solid var(--base-200);border-radius:var(--radius);padding:.25rem 1rem;cursor:pointer;min-height:var(--btn);display:inline-flex;justify-content:center;align-items:center;box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset)}.btn+label:focus,.btn+label:hover,.buttons a:focus,.buttons a:hover,[type=submit]:focus,[type=submit]:hover,a.button:focus,a.button:hover,button:focus,button:hover,ul.socials a:focus,ul.socials a:hover{background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shdw-none)}.btn:disabled+label,.btn:disabled+label:hover,[type=submit]:disabled,[type=submit]:disabled:focus,[type=submit]:disabled:hover,a.button:disabled,a.button:disabled:focus,a.button:disabled:hover,button:disabled,button:disabled:focus,button:disabled:hover,ul.socials a:disabled,ul.socials a:disabled:hover{opacity:.5;cursor:not-allowed;background-color:var(--base-200);color:var(--contrast-200)}.buttons{--wrap:wrap;--justify:flex-start;margin:1rem auto;width:100%;padding:0}.buttons.fit{width:fit-content;margin:1rem 2rem}.buttons li{--justify:stretch;--align:stretch;padding:0;list-style:none;overflow:hidden;width:100%}.list-none{list-style:none}@media (min-width:768px){.buttons{max-width:var(--content);margin:3rem auto}}.buttons .outline a{background-color:transparent;color:var(--action-0);border:2px solid var(--action-0)}.buttons .outline a:focus,.buttons .outline a:hover{background-color:var(--action-0);color:var(--action-contrast);border-color:var(--action-0)}.buttons a{width:100%}details .icon{--w:1.5em}button.favourite.favourited,button.voted .icon{animation:favourite-pop .4s cubic-bezier(.25,.46,.45,.94)}@keyframes favourite-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}75%{transform:scale(.9)}100%{transform:scale(1)}}button.filter-toggle{border:1px solid var(--base-200);background-color:transparent;white-space:nowrap;font-size:1rem;padding:.35em;--w:1.2em}.filter-toggle:hover{border-color:var(--action-50);color:var(--action-50)}.filter-toggle:focus{background-color:var(--action-50);color:var(--action-contrast)}.toggle.notifications.has .bell,.toggle.notifications:not(.has) .bell-ringing,.vote .voted .downvote,.vote .voted .upvote,.vote button:not(.voted) .downvoted,.vote button:not(.voted) .upvoted,button.favourite.favourited .heart,button.favourite:not(.favourited) .heart-fill{display:none}.toggle.notifications.has .bell-ringing,.toggle.notifications:not(.has) .bell,.vote .voted .downvoted,.vote .voted .upvoted,.vote button:not(.voted) .downvote,.vote button:not(.voted) .upvote,button.favourite.favourited .heart-fill,button.favourite:not(.favourited) .heart{display:block}i.icon{width:var(--w);height:var(--w);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}.icon-colour{background:#b7332e;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%)}.icon.grab{cursor:grab}main a .icon{margin-right:.5rem}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}input:focus,input:focus-within,input[type=checkbox]:focus+label,input[type=checkbox]:focus-visible+label,input[type=radio]:focus+label,input[type=radio]:focus-visible+label{outline:2px solid var(--action-0)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(var(--action-rgb),var(--op-3))!important}[aria-busy=true]{cursor:progress}[aria-disabled=true],[disabled]{cursor:not-allowed;opacity:.7}details{padding:.25rem 0;border-top:1px solid var(--base-200);border-bottom:1px solid var(--base-200)}details[open]{background-color:var(--base-50)}details summary{--wrap:nowrap;list-style:none;text-transform:uppercase;cursor:pointer;border:0;position:relative;padding:.5rem 2.5rem .5rem .5rem;gap:.5rem}details summary:hover{background-color:var(--base-100);border-color:var(--base-100);color:var(--contrast)}details[open]>summary{background-color:var(--base-50)}details summary::after{position:absolute;right:.5rem;top:.5rem;--icon:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');content:"";background-color:var(--contrast-100);-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-image:var(--icon);mask-image:var(--icon);mask-repeat:no-repeat;mask-size:contain;width:1.25rem;height:1.25rem;margin-left:auto;transition:var(--trans-color),var(--trans-transform)}details summary:hover::after{background-color:var(--action-0)}details[open]>summary::after{background-color:var(--contrast)}details[open]>summary::after{transform:rotate(-540deg);transition:background-color var(--trans-base);transition-property:background-color,transform}details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility var(--trans-t) allow-discrete,opacity var(--trans-t),block-size var(--trans-t)}details[open]::details-content{opacity:1;block-size:auto}@media (prefers-reduced-motion:no-preference){details{interpolate-size:allow-keywords}}.term-list{--justify:flex-start;--align:center;--wrap:nowrap;--gap:1.5rem;--dir:row;--w:1em;list-style:none;padding:0;height:var(--btn);display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);position:relative;overflow:auto hidden;touch-action:pan-x;text-transform:lowercase}.cover{position:relative;overflow:hidden;min-height:60vh;padding:var(--btn)}.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:''}.cover::before,.cover>img,.cover>video{position:absolute;inset:0;width:100%;height:100%}.cover .content{z-index:5;position:relative;overflow:hidden auto;width:max-content;height:max-content;max-width:100%;max-height:100%}.cover>img{z-index:1;opacity:.5;mix-blend-mode:luminosity;object-fit:cover}@media (min-width:768px){.cover>img{opacity:.33}}blockquote{--background:var(--base-100);--border:var(--action-0);line-height:1.2;padding:var(--btn);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(--fw-h-bold);padding:3rem 2.5rem;border-radius:var(--radius-outer);border:2px solid var(--border)}blockquote .content::after,blockquote .content::before{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:rgba(var(--base-rgb),var(--op-45)) var(--shdw-down),rgba(var(--base-rgb),var(--op-45)) var(--shdw-up)}blockquote.pull cite{margin:0}aside.expanded,dialog[open]{background-color:var(--base);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);z-index:var(--z-5)}dialog::backdrop{backdrop-filter:blur(5px);background-color:rgba(var(--base-rgb),var(--op-4))}aside.main,dialog[open]{border-radius:var(--radius-outer);overflow:hidden}dialog[open]{z-index:999;--padding:0;top:5vh;width:min(500px,95vw);height:fit-content;max-height:90vh;padding:var(--padding);background-color:var(--base-50);color:var(--contrast);border:1px solid var(--base-200)}dialog>.wrap,dialog>form{max-height:100%;overflow:hidden auto;margin:0 0 0 1.5rem;padding-right:1.2rem;width:calc(100% - 1.5rem)}dialog label{font-weight:400}dialog :is(h2,h3){margin:0 0 .5rem 0;font-size:var(--txt-large)}dialog:has(.m-actions){padding-bottom:var(--btn)}.m-actions{--w:1.15em;--justify:flex-end;--wrap:nowrap;--gap:0;position:absolute;bottom:0;left:0;right:0;width:100%;z-index:var(--z-6);background-color:var(--action-100);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-up)}.m-actions button{width:100%;height:3rem;border-radius:0;color:var(--action-contrast);background-color:var(--action-50);border:2px solid var(--action-50)}.m-actions button:focus,.m-actions button:hover{background-color:var(--base);color:var(--contrast)}.m-actions button:first-of-type{border-bottom-left-radius:1rem}.m-actions button:last-of-type{border-bottom-right-radius:1rem}dialog ul{list-style:none}dialog .search-container{padding-top:1rem;width:100%;gap:.5rem}.loop .item-grid{grid-template-columns:repeat(1,1fr)}@media (min-width:768px){.loop .item-grid{grid-template-columns:repeat(2,1fr)}}.loop .item-grid .progress{aspect-ratio:3/2;position:relative}.loop .item-grid .progress figure{width:100%;height:100%;display:flex;gap:.125rem;background-color:var(--action-0);position:relative}.loop .item-grid .progress figure span{position:absolute;width:50%;text-transform:uppercase;background-color:rgba(var(--action-rgb),var(--op-4));color:var(--action-contrast);padding:0 .25rem}.loop .progress figure img{max-width:50%;object-fit:cover}figure .after{top:0;right:0}figure .before{bottom:0;left:0}table{white-space:nowrap;width:100%;display:block;margin:0 0 2rem;border-radius:4px;height:var(--maxHeight);overflow:auto;position:relative}tfoot,thead{position:sticky;z-index:10;background-color:var(--base);text-transform:uppercase;padding:.5rem 0;line-height:2;font-weight:400}tr:nth-of-type(even){background-color:var(--base-200)}tfoot th{vertical-align:middle}tfoot th:first-of-type{text-align:right}tfoot tr,thead tr{background-color:rgba(var(--base-rgb),var(--op-6));box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}thead tr{border-bottom:1px solid var(--contrast-200)}tfoot tr{border-top:1px solid var(--contrast-200)}thead{top:0}tfoot{bottom:0}thead th{width:max-content}th p{margin:0!important}td{width:max-content;padding:.5rem 1rem}td .toggle input[type=checkbox]{margin:0}td .field{margin:.25rem 0}td[data-id=actions] label{margin:0;padding:0}td .description{display:none}td input[type=text]{width:fit-content;max-width:40vw;padding:.25em!important;font-size:var(--txt-x-small)!important}tbody tr{border:2px solid transparent}tbody tr:focus-within{background-color:var(--base-100);border-color:var(--action-50)}[data-stuck]{background-color:rgba(var(--base-rgb),var(--op-4));position:sticky;left:-1rem;z-index:15;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right)}tbody [data-stuck]{z-index:5}tfoot [data-stuck],thead [data-stuck]{background:var(--base)}.hide-tooltip.hide-tooltip.hide-tooltip+[role=tooltip],[role=tooltip]{visibility:hidden;position:absolute;bottom:2rem;left:1rem;width:max-content;height:fit-content;max-width:50vw;padding:.5rem;border-radius:var(--radius);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);background:var(--action-0);color:var(--action-contrast)}body.menu_item [role=tooltip]{left:auto;right:100%;top:-200%;z-index:var(--z-4)}[role=tooltip] p{margin:0}[role=tooltip] p+p{margin-top:.5rem}.field:has([aria-describedby]:focus) [role=tooltip],[aria-describedby]:focus~.has-tooltip[role=tooltip],[aria-describedby]:hover~.has-tooltip [role=tooltip]{visibility:visible;display:block}.has-tooltip{display:inline-flex;justify-content:flex-end;position:absolute;top:0;left:0;--w:1.5rem}.tt-toggle{cursor:pointer;display:flex;border-radius:50%;background-color:transparent}.tt-toggle:focus,.tt-toggle:hover{background-color:var(--action-0);color:var(--action-contrast)}.tt-toggle:focus+[role=tooltip],.tt-toggle:hover+[role=tooltip]{visibility:visible}dialog[open]#jvb-selector{height:70vh;top:15vh;display:flex}#jvb-selector>.wrap{flex:1}.item .status,.status,.status-badge{border-radius:var(--radius);font-size:.875rem;font-weight:500;text-transform:capitalize}#queue .item .status.pending,.status-badge.pending,.status.pending,[data-status=pending]{background:var(--base-100);color:var(--contrast-200)}#queue .item .status.processing,.status-badge.processing,.status.processing,[data-status=processing]{background:var(--base-200);color:var(--contrast-100);animation:pulse-color 2s infinite}#queue .item .status.completed,.status-badge.consulted,.status-badge.treated,.status.completed,[data-status=completed]{background:var(--success);color:var(--successText)}#queue .item .status.failed,.status-badge.error,.status.failed,[data-status=failed]{background:var(--error);color:var(--errorText)}dialog.loading{opacity:0}dialog.loading[open]{opacity:1;width:100vw;height:100vh;display:flex;max-width:100%;max-height:100%;border-radius:0;border:none;background-color:transparent;box-shadow:none;--w:3em;justify-content:center;align-items:center}dialog.loading[open]@starting-style{opacity:0}dialog.loading[open]>.col{height:fit-content;width:min(400px,60vw);border-radius:var(--radius-outer);background-color:rgba(var(--base-rgb),var(--op-4));padding:2rem;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);position:relative}dialog.loading[open] .spinner{position:absolute;top:1rem;width:5rem;height:5rem;border-width:0;border-top-width:4px;animation:spin 1s var(--trans-fn) infinite}.loading[open] i.icon{background-color:var(--action-0)}dialog.loading[open] i.icon{animation:dance 2s ease-in-out infinite}dialog.loading[open] h3{color:var(--contrast);margin:2rem 1rem auto!important;font-size:var(--txt-large);width:-moz-fit-content;width:fit-content}dialog.loading[open] p{margin:.5rem auto}dialog.loading[open]::after{animation:shimmer 3s ease-in-out infinite;background:linear-gradient(90deg,var(--shimmer));content:"";inset:0;position:absolute;z-index:-1}.spinner{width:12px;height:12px;border:2px solid transparent;border-top:2px solid var(--action-50);border-radius:50%;animation:spin 1s var(--trans-fn) infinite}.toggle-details{gap:2px}body.menu_item #top{z-index:var(--z-4);position:relative}section .toggle-details{position:absolute;right:0;top:5rem}[data-toggle=all]{position:fixed;bottom:calc(var(--btn_) + var(--btn) + .5rem);right:0;z-index:var(--z-4);background-color:var(--action-0);color:var(--action-contrast)}[data-toggle]{z-index:var(--z-1)}body:has(#queue[hidden]) [data-toggle=all]{left:1rem}dialog:not([open]).col,dialog:not([open]).row{display:none}@media (min-width:768px){section .toggle-details{right:-10%}}.typeText::after{content:'|';display:inline-block;margin-left:0;animation:blink .75s step-end infinite}@keyframes blink{from,to{opacity:1}50%{opacity:0}}aside.main{--wrap:nowrap;--align:stretch;position:fixed;top:var(--btnbtn);bottom:var(--btn_);width:min(500px,calc(100vw - 2rem));background-color:var(--base);z-index:var(--z-5);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);padding:1rem 1rem var(--btn);overflow:hidden auto}aside.main.referral{padding-top:0}aside.main.referral nav.tabs{padding:1rem 0;background-color:var(--base);height:max-content;min-height:var(--btn)}.qtoggle{z-index:var(--z-6);position:fixed;bottom:var(--btn_);width:var(--btn);height:var(--btn);background-color:rgba(var(--base-rgb),var(--op-4));color:var(--contrast);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);transition:var(--trans-size),var(--trans-color)}.qtoggle:focus,.qtoggle:hover{background-color:rgba(var(--action-rgb),var(--op-6));color:var(--action-contrast)}.qtoggle:disabled,.qtoggle:disabled:focus,.qtoggle:disabled:hover{opacity:.5;background-color:rgba(var(--base-rgb),var(--op-3));color:var(--contrast)}.toggle-cart{right:0;border-radius:4px 4px 4px var(--radius-outer)}body:has(#cart.expanded) .toggle-cart .icon{display:none}aside#cart{padding-bottom:6rem}#cart form{max-height:100%;overflow:hidden auto}#cart nav.tabs{z-index:var(--z-6);top:0}#cart table{height:auto}#cart th{padding:0 1.5rem}#cart table th:first-of-type{width:100%}#cart nav.tabs{position:sticky;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}#cart button[data-tab]{flex:1;border-radius:0}#cart form>:not(.tabs){max-width:90%;margin:0 auto}#cart form .empty p{margin:.5rem 0!important}#cart .cart-total.cart-total{--gap:0 1rem;padding-right:1rem;position:absolute;bottom:var(--btn);width:100%;max-width:100%;background-color:rgba(var(--base-rgb),var(--op-6));z-index:var(--z-6);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-up)}.cart-total p{--gap:2rem;max-width:100%;margin:0}.cart-total p span{width:6rem;display:inline-block;text-align:right}.cart-total p+p{font-weight:700}.cart-items .total{font-weight:700}#cart .restored{background-color:rgba(var(--action-rgb),var(--op-3));border-radius:var(--radius-outer);padding:1rem}.restored h3{font-size:var(--txt-medium);margin:0}.restored p{margin:0}.restored .row{--gap:0;--wrap:nowrap;--w:1em}.toasts{position:fixed;top:4rem;right:-350px;z-index:1000;width:350px}.toast{background-color:rgba(var(--base-rgb),var(--op-6));border-left:4px solid var(--action-0);padding:1rem;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);left:0;position:relative;opacity:0;transition:left .3s,opacity .3s}.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--error)}.toast.info{border-left-color:var(--warning)}.toast.show{left:calc(-350px - 1rem);opacity:1}.toast.hiding{left:0;opacity:0}.toast-content p{margin:0}.close-toast{background:0 0;border:none;font-size:1.25rem;cursor:pointer;opacity:.5;transition:opacity .2s;color:inherit}.close-toast:hover{opacity:1}#queue#queue{width:min(500px,calc(100vw - 2rem))}#queue>*{max-width:100%}.qtoggle{left:0;border-radius:4px 4px var(--radius-outer) 4px}.qtoggle.expanded{left:var(--btn);width:min(calc(500px - var(--btn)),calc(100vw - 2rem - var(--btn)))}.qtoggle.saving .icon{background-color:var(--action-0);animation:spin .87s var(--trans-fn) infinite}#queue .status-actions{position:absolute;bottom:0;left:0;right:0;z-index:var(--z-2)}#queue .status-actions .popup{position:absolute;z-index:-1;width:max-content;max-width:300px;background-color:var(--action-50);color:var(--action-contrast);border-radius:var(--radius);padding:.25em .75em;top:1rem;left:-100vw;transition:left var(--trans-base)}aside#queue .popup::before{content:'';width:10px;height:10px;transform:rotate(-45deg);background-color:var(--action-50);z-index:-1;left:-5px;position:absolute;top:calc(50% - 5px)}.expanded#queue .status-actions .popup.showing{left:calc(100% + 1em)}#queue .status-actions .popup.showing{left:calc(200vw + var(--btn_));max-width:75vw}#queue .item .status,.filter .count,.qtoggle .count,.qtoggle .indicator,.refresh .countdown{z-index:var(--z-3);--offset:0;position:absolute;top:var(--offset);background-color:rgba(var(--base-rgb),var(--op-3))}.expanded+.qtoggle .count,.expanded+.qtoggle .indicator{--offset:.25rem}.qtoggle .indicator{right:var(--offset);width:.75rem;height:.75rem;border-radius:50%}aside#queue.synced+.qtoggle .indicator{background-color:var(--success)}aside#queue.pending+.qtoggle .indicator{background-color:var(--warning);animation:pulse 2s infinite}aside#queue.pending:not(.expanded)+.qtoggle .icon{background-color:var(--error);animation:spin 1s var(--trans-fn) infinite}.qtoggle .count{--align:center;--justify:center;left:var(--offset);min-width:1.25rem;height:1.25rem;padding:0 4px;color:var(--contrast);border-radius:var(--radius);font-size:var(--txt-x-small)}#queue:has(.empty-queue)+.qtoggle .count{display:none}aside#queue .header{padding:15px;border-bottom:1px solid var(--base-200);flex-shrink:0;--height:max-content}.qitems{flex:1;width:100%;overflow:hidden auto;overflow-anchor:none;padding:.5rem 2rem;--gap:.5rem}.qitems .item{width:100%}.qitems button{--height:max-content}aside#queue h3{margin:0;font-size:16px;color:var(--contrast)}#queue .filters{padding:1rem 0 0}#queue .filters .filter{background-color:transparent;white-space:nowrap;font-size:var(--txt-x-small)}#queue .filters .filter.active{background:var(--base-200);border-color:transparent}#queue .filter:focus,#queue .filter:hover{background-color:var(--action-0);color:var(--action-contrast)}.filter .count{--offset:-8px;right:var(--offset);background:var(--base-200);color:var(--contrast-200);border-radius:10px;min-width:18px;height:18px;font-size:10px}.filter .count:empty{display:none}.empty-queue{height:100px;color:var(--contrast-200);font-size:var(--txt-x-small);font-style:italic}.refresh .countdown:not(.counting),aside#queue:has(.empty-queue) .refresh .count{display:none}#queue .item{padding:15px;background:var(--base-100);border-radius:var(--radius);transition:all .2s ease;box-shadow:var(--shdw-none)}#queue .item:hover{box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}#queue .item .header{position:relative;padding:.25rem 0}#queue .item .type{font-size:var(--txt-x-small)}#queue .item .status{--w:1em;--gap:0;--justify:center;--align:center;--offset:-1.2rem;aspect-ratio:1;right:var(--offset);border-radius:50%;color:var(--contrast-200);background-color:var(--base-50);border:1px solid var(--base-200);width:1.25em;height:1.25em}#queue .item .status.completed:hover{color:var(--contrast-200)}#queue .item button{font-size:16px;padding:0;line-height:1;opacity:.5;transition:opacity .2s}#queue .item button:hover{opacity:1}#queue .item .info{margin-top:8px;font-size:var(--txt-x-small)}#queue .item .info .time{--gap:7px;font-size:10px}#queue .item .actions{--gap:8px}#queue .item .actions button{padding:6px 12px;font-size:12px;background:var(--base-200);border:none;border-radius:4px;cursor:pointer;transition:all .2s;color:var(--contrast)}#queue .item .actions .retry{background-color:var(--secondary-200);color:var(--secondary-contrast)}#queue .item .actions button:hover{opacity:.9}.queue-actions{padding:.5rem 0;border-top:1px solid var(--base-200);flex-shrink:0}.queue-actions button{--height:max-content;padding:.75rem;width:100%;font-size:var(--txt-x-small)}.status-actions>.refresh{position:relative;font-size:var(--txt-x-small)}.refresh .countdown{--justify:center;--align:center;--offset:0;right:var(--offset);margin:0 3px;border-radius:50%;border:1px solid var(--base-200)}.refreshNow{width:var(--btn);height:var(--btn)}.refreshNow:hover{background:var(--base-200);color:var(--contrast-200)}.icon.refresh{--w:18px}#queue.pending.expanded .refreshNow .icon{animation:spin 1.5s var(--trans-fn) infinite}#queue,.item-grid{counter-reset:delay-counter}.item{counter-increment:delay-counter}.item .progress .fill::after{--delay:calc(counter(delay-counter) * .1s)}.progress .bar{height:6px;display:block;border-radius:6px;overflow:hidden;background:var(--base-200);position:relative}.progress .fill{height:100%;background:var(--action-0);border-radius:6px;width:0;transition:width .3s ease}.progress .details{margin-top:5px;font-size:var(--txt-x-small);color:var(--contrast);text-align:center;padding:.25rem 0}.progress .details:empty{display:none}.pending .fill::after,.processing .fill::after,.queued .fill::after,.uploading .fill::after{--delay:0s;content:'';position:absolute;top:0;left:-50%;width:30%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.225) 50%,rgba(255,255,255,0) 100%);animation:shimmer 2.5s infinite linear var(--delay)}.additional-actions.additional-actions{padding:0;background-color:transparent}.additional-actions .buttons{position:fixed;bottom:var(--btn_);right:1rem;margin:0;--gap:1rem;z-index:var(--z-6);width:fit-content}.additional-actions .buttons button{height:var(--btn);width:var(--btn);background-color:rgba(var(--base-rgb),var(--op-4));color:var(--contrast);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}.additional-actions .buttons button:disabled,.additional-actions .buttons button:disabled:focus,.additional-actions .buttons button:disabled:hover{opacity:.5;background-color:rgba(var(--base-rgb),var(--op-3));color:var(--contrast)}.additional-actions .buttons button:last-of-type{border-radius:4px 4px 4px var(--radius-outer)}aside.left{transition:left var(--trans-base);left:var(--offScreen);border-radius:0 var(--radius-outer) var(--radius-outer) 0}aside.left.expanded{left:0}aside.right{transition:right var(--trans-base);right:var(--offScreen);border-radius:var(--radius-outer) 0 0 var(--radius-outer)}aside.right.expanded{right:0}aside.right.expanded button.close{position:sticky;bottom:calc(var(--btn) * -1);left:0;border-bottom-left-radius:var(--radius-outer);width:var(--btn);height:var(--btn)}.additional-actions .buttons:has(.expanded) button:not(.expanded){display:none}.additional-actions .buttons:has(.expanded){right:0}.additional-actions .buttons button{transition:right var(--trans-base),var(--trans-size)}.additional-actions .buttons .expanded{width:calc(min(500px,calc(100vw - 2rem)));background-color:var(--base)}.additional-actions .buttons .expanded:hover,.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}[type=submit]{width:100%;height:var(--btn);background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shdw-none);font-weight:700}[type=submit]:hover{box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);border:2px solid var(--action-0);color:var(--action-0);background-color:var(--action-contrast)}aside nav.tabs{position:sticky;bottom:unset;top:0;left:0;right:0}aside .tab-content.active{padding:1rem;min-height:100%}aside header h3{font-size:var(--txt-medium);margin:1rem 0;text-align:center}aside header p{margin:.25rem 0;text-align:center}aside h4{font-size:var(--txt-x-small);margin:1rem 0 0 0}code{width:100%;margin:.5rem;padding:.5rem;user-select:all;text-align:center;border-radius:4px;background-color:var(--base-200);border:1px solid var(--contrast-200)}.restore-form{background-color:rgba(var(--action-rgb),var(--op-3));border:1px solid var(--action-200);padding:.5rem;border-radius:var(--radius-outer);margin:1rem 2rem}.restore-form h3{text-align:center;margin:1rem 0 0;font-size:var(--txt-medium)}.restore-form p{margin:.5rem 0}.fstatus{z-index:var(--z-5);background-color:rgba(var(--base-rgb),var(--op-6));border-radius:4px;padding:0 .5rem;position:fixed;bottom:var(--btn_);right:calc(var(--btn_) + 1rem);--w:1em;box-shadow:var(--shdw)}.fstatus .spinner{display:none}.fstatus.loading .spinner{display:inline-block}.fstatus p{margin:0;padding:.25rem}.callalt.callalt,.callout.callout{padding:2rem;margin:0;max-width:none;grid-column:full}@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 :is(h1,h2,h3,h4,h5,h6),.callout :is(h1,h2,h3,h4,h5,h6){font-family:var(--body);font-weight:var(--fw-b-bold);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-text figure,.media-text>div{width:100%;margin:0}@media (min-width:768px){.media-text{--wrap:nowrap}}.media-text>div{max-width:var(--content);margin:0 auto;padding:2rem}.timeline.terms{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}.timeline.terms>li{width:100%}@media (min-width:768px){.timeline.terms>li{width:50%}}dialog.gallery[open]{position:fixed;inset:1rem;margin:0;border:none;width:calc(100% - 2rem);height:calc(100% - 2rem);padding:0;background:rgba(var(--base-rgb),var(--op-6));display:flex;align-items:center;justify-content:center;overflow:hidden;backdrop-filter:blur(3px);z-index:var(--z-9);max-height:100vh;max-width:100vw}.gallery .controls{order:3;justify-content:flex-end;--height:2rem}.gallery .controls .cancel{order:3}dialog.gallery::backdrop{background:rgba(var(--base-rgb),var(--op-4))}dialog.gallery .wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}dialog.gallery .cancel:hover{background:rgba(var(--base-rgb),var(--op-4))}dialog.gallery .content{position:relative;flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}dialog.gallery .content .image{max-width:90vw;max-height:85vh;object-fit:contain;transition:transform .15s ease-out;touch-action:none}dialog.gallery .image-left,dialog.gallery .image-right{position:absolute;opacity:0;pointer-events:none}dialog.gallery details{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:600px;background:rgba(0,0,0,.45);color:#fff;border-radius:4px;overflow:hidden;z-index:10}dialog.gallery details summary{padding:.75rem 1rem;cursor:pointer;user-select:none}dialog.gallery details[open] .item-info{padding:1rem}dialog.gallery .counter{position:absolute;bottom:1rem;left:1rem;background:rgba(var(--base-rgb),var(--op-4));color:var(--contrast);padding:.4rem .8rem;border-radius:3px;font-size:.85rem;z-index:10}dialog.gallery .favourite{position:absolute;top:1rem;left:1rem;z-index:10}dialog.gallery .image{opacity:0;transition:opacity .2s ease,transform .15s ease-out}dialog.gallery .image[src]{opacity:1}.referral-reward-banner{background:var(--base-100);color:var(--action-0);border:2px dashed var(--action-0);padding:1.5rem;border-radius:8px;text-align:center;margin-bottom:1.5rem;display:flex;justify-content:center;align-items:center}.referral-reward-banner .icon{--w:3rem}.referral-reward-banner h4{margin:0;font-size:1.25rem;font-weight:700;color:var(--contrast)}.check-code-btn{width:100%;margin-top:.5rem;background:var(--base-100);color:var(--contrast-100);border:1px solid var(--contrast-200);display:flex;align-items:center;justify-content:center;gap:.5rem}.code-status{padding:.75rem;border-radius:4px;margin-top:.5rem;font-size:.875rem}.code-status.loading{background:var(--base-200);color:var(--contrast-200)}.code-status.success{background:var(--successBack);color:var(--successText);border:1px solid var(--successBack)}.code-status.error{background:var(--errorBack);color:var(--errorText);border:1px solid var(--errorBack)}.referral-footer{text-align:center;padding:1rem 0;border-top:1px solid var(--base-200);margin-top:1rem}.referral-footer .text-link{color:var(--contrast-200);text-decoration:none;font-size:.875rem}.referral-footer .text-link:hover{color:var(--action-0);text-decoration:underline}.share-section{margin-bottom:1.5rem}.share-section h4{margin:0 0 .75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.copy-section{margin-bottom:1.5rem}.copy-section h4{margin:0 0 .5rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.copy-group{--gap:0 .5rem;margin-bottom:0}.copy-group+.hint{margin:.25rem 1rem 1rem}.copy-target{flex:1;padding:.75rem;background:var(--base-100);border:1px solid var(--base-200);border-radius:4px;font-family:Monaco,'Courier New',monospace;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.copy-btn{flex-shrink:0;width:var(--chipchip);height:var(--chipchip);min-height:0;padding:0}.copy-btn .icon-check-circle,.copy-btn.success .icon-copy{display:none}.copy-btn.success .icon-check-circle{display:inline-block}.copy-btn.success{background:var(--successBack);color:var(--success)}.recent-referrals-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--contrast-200)}.recent-referrals-section h4{margin:0 0 .75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.recent-referrals-list{display:flex;flex-direction:column;gap:.5rem}.referral-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--base-100);border-radius:4px;font-size:.875rem}.referral-info{display:flex;align-items:center;gap:.5rem}.referral-info strong{color:var(--contrast-200)}.referral-date{font-size:.75rem}.loading,.no-referrals{text-align:center;padding:1rem;color:var(--contrast-200);font-size:.875rem}.stats-summary{margin-bottom:1.5rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid var(--base-200)}.stat-row:last-child{border-bottom:none}.stat-row.highlight{background:var(--base-100);border-radius:4px;border:1px solid var(--base);font-weight:600}.stat-label{color:#666;font-size:.875rem}.stat-value{color:#333;font-weight:600;font-size:1rem}.stat-row.highlight .stat-value{color:var(--action-0);font-size:1.25rem}.view-dashboard-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem;background:var(--action-0);color:var(--action-contrast);text-decoration:none;border-radius:8px;font-weight:600;transition:all .2s ease}aside a.button,aside button:not(.button,.qtoggle){position:relative;top:0;box-shadow:var(--shdw-none);transition:top var(--trans-base),box-shadow var(--trans-base)}aside a.button:hover,aside button:not(.button,.qtoggle,:disabled):hover{top:-4px;box-shadow:rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down)}.view-dashboard-btn:visited{color:var(--action-contrast)}.view-dashboard-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.success-content{padding:2rem 1rem;text-align:center}.success-content h3{color:var(--success);margin-bottom:1rem}.success-content p{margin-bottom:.75rem;color:var(--base-200)}.success-content .hint{font-size:.875rem;color:var(--base-200);font-style:italic}.code-status.loading::before{content:'';display:inline-block;width:1rem;height:1rem;border:2px solid var(--action-200);border-top:2px solid var(--action-0);border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem;vertical-align:middle}.share-buttons-grid a{padding:0;min-height:0;width:var(--chipchip);height:var(--chipchip)}.share-buttons-grid a .icon{margin-right:0}@media (max-width:768px){.share-buttons-grid{grid-template-columns:repeat(3,1fr)}.referral-item{flex-direction:column;align-items:flex-start;gap:.5rem}}.toggle-text input{display:none}.toggle-text input+label{font-weight:400;color:var(--contrast)!important;text-transform:none;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toggle-text label::after,.toggle-text label::before{display:none}.toggle-text label{padding-left:0!important}.toggle-text input+label .text{position:relative;margin:0 .5rem;font-weight:700;width:fit-content;padding:2px 4px;border:1px solid var(--action-50);border-radius:4px;color:var(--action-50)!important}table .toggle-text input+label .text{color:var(--contrast)!important;border-color:var(--contrast)}.toggle-text:hover .text,table .toggle-text:hover .text{background-color:var(--action-50);color:var(--light-0)!important;border-color:var(--action-50)}.toggle-text input+label .off,.toggle-text input+label .on{transition:var(--trans-transform),opacity var(--trans-base)}.toggle-text input+label .off{opacity:1;max-width:100%;transform:none}.toggle-text input+label .on{opacity:0;max-width:0;transform:translate3d(0,100%,0)}.toggle-text input:checked+label .off{opacity:0;max-width:0;transform:translate3d(0,-100%,0)}.toggle-text input:checked+label .on{max-width:100%;opacity:1;transform:none}@keyframes shimmer{0%{left:-50%}50%{left:150%}100%{left:-50%}}@keyframes pulse-color{0%{box-shadow:0 0 0 0 rgba(var(--action-rgb),.4)}30%{box-shadow:0 0 0 .75rem rgba(var(--action-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--action-rgb),0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes dance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}
\ No newline at end of file
--
Gitblit v1.10.0