From 7d930f88d932fb7207e32c570b0eced34c429295 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 11 May 2026 18:36:41 +0000
Subject: [PATCH] =Complete css overhaul
---
allBackup.css | 5120 ++++++++++++++++++----------------------------------------
1 files changed, 1,603 insertions(+), 3,517 deletions(-)
diff --git a/allBackup.css b/allBackup.css
index 2b5ab1a..647212e 100644
--- a/allBackup.css
+++ b/allBackup.css
@@ -7,7 +7,7 @@
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
-Version: 1.5
+Version: 1.5.95
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jv
@@ -15,83 +15,92 @@
/*************************************************************
VARIABLES
*************************************************************/
-:root{
- /* Layout */
- --narrow: min(500px, 50vw);
- --maxWidth: min(768px, 65vw);
+:root {
+ /*****************************
+ Layout
+ *****************************/
+ --half: min(384px, 17.5vw);
+ --narrow: min(500px, 62.5vw);
+ --content: min(768px, 65vw);
--wider: min(900px, 75vw);
- --alignWide: min(1024px, 90vw);
- --alignMed: min(962px, 82.5vw);
+ --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;
- --offTop: var(--height);
- --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;
@@ -100,76 +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 */
- --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);
+ --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 */
@@ -178,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) 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>');*/
+ --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 {
@@ -277,10 +258,6 @@
body {
margin: 0;
- /*padding: 2rem;*/
- /*@media (width < 500px) {*/
- /* padding: 1rem;*/
- /*}*/
}
*,
@@ -343,7 +320,7 @@
dl {
margin: 0;
padding: 0;
- list-style: inside;
+ list-style: outside;
ul,
ol,
dl {
@@ -367,6 +344,11 @@
inline-size: fit-content;
margin-inline: auto;
}
+ figure img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
figcaption {
contain: inline-size;
font-size: 90%;
@@ -503,82 +485,373 @@
}
}
}
-/***************************************************************
+
+/*************************************************************
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: var(--transition-color)
+ transition: var(--trans-color)
+}
+/*************************************************************
+LAYOUT
+*************************************************************/
+html {
+ scroll-behavior: smooth;
+ overflow-x: hidden;
}
-.home > section:first-of-type,
-.home main {
+@media(prefers-reduced-motion){
+ html {
+ scroll-behavior: unset;
+ }
+ * {
+ transition: none!important;
+ animation: none!important;
+ }
+}
+/*body:has(aside.expanded),*/
+/*body:has(nav.open:not(.drawer)),*/
+/*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;
}
-/**************************************************************
-UTILITY CLASSES
-**************************************************************/
-body:has(aside.expanded),
-body:has(nav.open),
-body:has(dialog[open]),
-body.loading {
+
+.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);
+}
+header a[rel="home"] {
+ display: flex;
+ align-items: center;
+ max-height:var(--btn);
+ overflow:hidden;
+}
+
+
+.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); }
+.font-x-large { font-size: var(--txt-x-large); }
+/**************************************************************
+UTILITY CLASSES - SPACING
+**************************************************************/
/** PADDING **/
.p-1 {padding: var(--sp1);}
.p-2 {padding: var(--sp2);}
@@ -632,7 +905,9 @@
.pr-7 { padding-right: var(--sp7); }
.pl-7 { padding-left: var(--sp7); }
.pb-7 { padding-bottom: var(--sp7); }
+
/** MARGIN **/
+.m-0 {margin: 0;}
.m-1 {margin: var(--sp1);}
.m-2 {margin: var(--sp2);}
.m-3 {margin: var(--sp3);}
@@ -686,16 +961,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
+**************************************************************/
+.align-center { text-align: center; }
+.align-left { text-align: left; }
+.align-right { text-align: right; }
*[hidden] {
display: none!important;
@@ -707,21 +978,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 {
@@ -735,81 +1001,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);
}
/******************************************************************
@@ -834,7 +1099,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;
@@ -851,13 +1116,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 {
@@ -868,59 +1133,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;
@@ -930,213 +1162,121 @@
}
}
-/* 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);
+ 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);
- aspect-ratio: 1;
+ border-radius: var(--radius-outer);
display:flex;
+ justify-content: var(--justify);
+ align-items: var(--align);
+ flex-wrap: var(--wrap);
+ gap: var(--gap);
+ flex-direction: var(--dir);
filter: none;
- transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);
+ position: relative;
}
+.item-grid.list-view {
+ gap: 0;
+}
+.item-grid.list-view .item {
+ aspect-ratio: unset;
+ align-items: flex-start;
+ border-radius: 4px;
+ padding: 1rem 0;
+}
+.list-view .item:nth-of-type(even) {
+ background-color: var(--base);
+}
+.list-view .item-select {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 18vh;
+}
+.list-view .item .col {
+ padding: 0 var(--chip_) 0 1rem;
+}
+.list-view .abs {
+ right:0;
+ top:0;
+ width:max-content;
+ --dir:column-reverse;
+ justify-content: flex-end;
+}
+.item.col {
+ --wrap: nowrap;
+}
+.votes,
+.favourite {
+ position: absolute;
+ z-index: var(--z-1);
+ box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw);
+ background-color: rgba(var(--base-rgb),var(--op-2));
+}
+.favourite .icon-heart-fi,
+.favourited .icon-heart {
+ display: none;
+}
+.favourited .icon-heart-fi,
+.favourite .icon-heart {
+ display: block;
+}
+.votes {
+ bottom: 0;
+ right: 0;
+}
+.favourite {
+ top: 0;
+ left: 0;
+}
+.item-grid .item .images,
+.item-grid .item .images a{
+ aspect-ratio: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+}
+
+
.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;
+ gap: 0;
}
+
.item-grid.list-view .item .col {
--gap: .5rem;
}
+
.item-grid.list-view img {
width: 20%;
}
@@ -1148,198 +1288,15 @@
}
}
-/*********************************************************
-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
+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,
+li.btn,
+button,
[type=submit],
a.button,
-a.wp-block-button__link,
-button {
+.buttons a,
+.btn + label {
--justify: center;
--align: center;
--dir: row;
@@ -1350,23 +1307,56 @@
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;
- min-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: var(--transition-color);
position: relative;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-inset);
+ 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
+******************************************************************/
+li.btn:hover,
+li.btn:focus,
+button:hover,
+button:focus,
+[type=submit]:hover,
+[type=submit]:focus,
a.button:hover,
a.button:focus,
ul.socials a:hover,
@@ -1374,14 +1364,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(--shadow-none);
+ 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 {
@@ -1389,6 +1430,7 @@
color: var(--action-0);
border: 2px solid var(--action-0);
}
+
.buttons .outline a:hover,
.buttons .outline a:focus {
background-color: var(--action-0);
@@ -1400,34 +1442,17 @@
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;
}
-
+details .filters .icon {
+ --w: 1em;
+}
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); }
@@ -1440,13 +1465,18 @@
background-color: transparent;
white-space: nowrap;
font-size: 1rem;
+ height: var(--chip_);
+ width: var(--chip_);
+ min-height: 0;
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);
@@ -1462,6 +1492,7 @@
.vote .voted .downvote {
display: none;
}
+
button.favourite:not(.favourited) .heart,
button.favourite.favourited .heart-fill,
.toggle.notifications:not(.has) .bell,
@@ -1472,10 +1503,10 @@
.vote .voted .downvoted {
display: block;
}
+
/******************************************************************
ICONS
******************************************************************/
-
i.icon {
width: var(--w);
height: var(--w);
@@ -1490,63 +1521,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
@@ -1563,22 +1554,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;
@@ -1593,52 +1584,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: 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 {
+ 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;
}
@@ -1646,588 +1647,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: 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
**************************************************/
@@ -2240,7 +1673,7 @@
--w: 1em;
list-style: none;
padding: 0;
- height: var(--height);
+ height: var(--btn);
display: flex;
justify-content: var(--justify);
align-items: var(--align);
@@ -2252,53 +1685,77 @@
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 small {
+ vertical-align: baseline;
+ margin-left: .5rem;
+ font-style: italic;
+}
+.term-list li {
+ display: flex;
+ align-items: center;
+}
+.term-list a {
+ align-items: center;
+}
-/*.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);*/
-/*}*/
+.directory-list > ul
+{
+ max-width: 100%;
+}
+.directory-list img {
+ width: 70px;
+}
+.directory-list .image {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+.directory-list h3 {
+ margin: 0;
+ text-align: center;
+ font-weight: var(--fw-h-bold);
+ font-family: var(--heading);
+ position: sticky;
+ font-size: var(--txt-enormous);
+ width: 100%;
+ top: 0;
+ left: 0;
+ color: var(--base);
+ text-shadow: var(--base-200) 1px 1px 0;
+ user-select:none;
+}
+.directory-list > ul > li {
+ padding: 2rem;
+ align-items: center;
+}
+.directory-list > ul > li:nth-of-type(even) {
+ background-color: var(--base-100);
+}
+.directory-list ul ul {
+ width: 100%;
+}
+.directory-list ul ul li {
+ padding: .35rem .5rem;
+}
+.directory-list ul ul li:nth-of-type(even) {
+ background-color:var(--base);
+}
+
+@media (min-width: 768px) {
+ .directory-list h3 {
+ width: 20vw;
+ }
+ .directory-list > ul {
+ width: 100%;
+ }
+ .directory-list ul ul {
+ min-height: var(--txt-enormous);
+ }
+ .directory-list > ul > li {
+ padding: 2rem 10vw;
+ }
+}
/**************************************************
COVER BLOCK
**************************************************/
@@ -2306,8 +1763,9 @@
position: relative;
overflow: hidden;
min-height: 60vh;
- padding: var(--height);
+ padding: var(--btn);
}
+
.cover::before {
z-index: var(--coverIndex);
background-color: var(--action-0);
@@ -2316,52 +1774,42 @@
background-repeat: no-repeat;
background-size: cover;
content: '';
- /*filter: brightness(.25);*/
}
+
.cover::before,
.cover > video,
.cover > img {
position: absolute;
inset: 0;
width: 100%;
+ max-width: 100%;
height: 100%;
+ margin: 0;
}
+
+
.cover .content {
z-index: 5;
+ position: relative;
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
@@ -2370,32 +1818,36 @@
--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(--fw-h-bold);
- padding: 25px;
- border-radius: var(--outerRadius);
+ 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;
@@ -2406,51 +1858,69 @@
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;
}
+
+/******************************************************************
+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,
dialog > form {
- max-height: 100%;
+ max-height: var(--maxHeight);
overflow: hidden auto;
margin: 0 0 0 1.5rem;
padding-right: 1.2rem;
+ padding-bottom: var(--btn);
width: calc(100% - 1.5rem);
}
@@ -2458,15 +1928,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;
@@ -2479,27 +1949,35 @@
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;
+ height: var(--chipchip);
border-radius: 0;
+ font-size: var(--txt-x-small);
+ --gap: .75rem;
color: var(--action-contrast);
background-color: var(--action-50);
border: 2px solid var(--action-50);
+ box-shadow:none;
}
+
.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;
}
@@ -2509,158 +1987,22 @@
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
**************************************************/
@@ -2674,6 +2016,7 @@
overflow: auto;
position: relative;
}
+
thead,tfoot {
position: sticky;
z-index: 10;
@@ -2687,36 +2030,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;
@@ -2725,41 +2076,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: 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);
@@ -2778,8 +2136,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);
}
@@ -2790,20 +2148,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;
@@ -2812,17 +2172,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;
@@ -2836,20 +2199,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;
@@ -2862,17 +2271,20 @@
--w: 3em;
justify-content: center;
align-items: center;
+ inset: 0;
}
+
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;
}
@@ -2883,26 +2295,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] 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);
+ 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 {
@@ -2924,135 +2333,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;
@@ -3061,18 +2356,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;
@@ -3083,84 +2381,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 {
@@ -3170,28 +2464,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;
@@ -3210,23 +2510,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;
}
@@ -3234,23 +2537,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
******************/
@@ -3263,10 +2571,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;
@@ -3312,28 +2620,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 {
@@ -3351,12 +2662,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;
@@ -3372,13 +2684,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,
@@ -3388,12 +2700,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);
@@ -3410,12 +2724,27 @@
background-color: var(--warning);
animation: pulse 2s infinite;
}
+
+.refreshNow.fetching .icon,
aside#queue.pending:not(.expanded) + .qtoggle .icon {
- background-color: var(--error);
- animation: spin 1s var(--function) infinite;
+ background-color: var(--action-0);
+ animation: spin 1s var(--trans-fn) infinite;
}
/* Status count badge */
+
+/*.refresh .countdown {*/
+/* --justify:center;*/
+/* --align: center;*/
+/* --offset: 0;*/
+/* left: .25rem;*/
+/* margin: 0 3px;*/
+/* border-radius: 50%;*/
+/* background-color: var(--base);*/
+/* width: 1em;*/
+/* height: 1em;*/
+/*}*/
+.refresh .countdown,
.qtoggle .count {
--align: center;
--justify: center;
@@ -3424,8 +2753,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 {
@@ -3437,7 +2766,9 @@
border-bottom: 1px solid var(--base-200);
flex-shrink: 0;
--height: max-content;
+ width: 100%;
}
+
.qitems {
flex: 1;
width: 100%;
@@ -3446,9 +2777,11 @@
padding: .5rem 2rem;
--gap: .5rem;
}
+
.qitems .item {
width: 100%;
}
+
.qitems button {
--height: max-content;
}
@@ -3458,25 +2791,64 @@
font-size: 16px;
color: var(--contrast);
}
+
#queue .filters {
padding: 1rem 0 0;
+ width: 100%;
}
+#queue .filters .btn + label {
+ width: max-content;
+ position: relative;
+ height: var(--chip_);
+ font-size: var(--txt-x-small);
+ font-weight: var(--fw-h-light);
+ box-shadow: var(--shdw-none);
+}
+#queue .filters label .count {
+ width: 1em;
+ height: 1em;
+ position: absolute;
+ top: -8px;
+ right: -4px;
+ background: var(--base-100);
+ border-radius: 50%;
+ z-index: 5;
+}
+#queue .filters label .count:empty {
+ display: none;
+}
+#queue .failed .bar,
+#queue .failed_permanent .bar {
+ background-color: var(--error);
+ opacity: .2;
+}
+#queue span.completed {
+ margin-left: auto;
+}
+
#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);
}
+#queue .progress .row.btw {
+ --justify: flex-end;
+}
+#queue .progress .details {
+ font-size: var(--txt-small);
+}
/* Filter count badge */
.filter .count {
@@ -3489,6 +2861,7 @@
height: 18px;
font-size: 10px;
}
+
.filter .count:empty {
display: none;
}
@@ -3497,7 +2870,7 @@
.empty-queue {
height: 100px;
color: var(--contrast-200);
- font-size: var(--small);
+ font-size: var(--txt-x-small);
font-style: italic;
}
@@ -3510,13 +2883,13 @@
#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 {
@@ -3525,11 +2898,11 @@
}
#queue .item .type {
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
#queue .item .status {
- --w: 1em;
+ --w: 1.3em;
--gap: 0;
--justify:center;
--align: center;
@@ -3540,39 +2913,21 @@
color: var(--contrast-200);
background-color: var(--base-50);
border: 1px solid var(--base-200);
- width: 1.25em;
- height: 1.25em;
+ width: 2em;
+ height: 2em;
}
-#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;
+ min-height: 0;
transition: opacity .2s;
}
@@ -3583,8 +2938,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;
@@ -3593,6 +2949,7 @@
/* Item actions */
#queue .item .actions {
--gap: 8px;
+ margin-top: 1rem;
}
#queue .item .actions button {
@@ -3611,7 +2968,6 @@
color: var(--secondary-contrast);
}
-
#queue .item .actions button:hover {
opacity: .9;
}
@@ -3627,29 +2983,19 @@
--height: max-content;
padding: .75rem;
width: 100%;
- font-size: var(--small);
+ 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 {
- --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);
+ width: var(--btn);
+ height: var(--btn);
}
.refreshNow:hover {
@@ -3661,27 +3007,21 @@
--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
**************************************************/
@@ -3701,16 +3041,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,
@@ -3730,6 +3073,7 @@
);
animation: shimmer 2.5s infinite linear var(--delay);
}
+
/**************************************************
ACTIONS
**************************************************/
@@ -3737,87 +3081,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);
@@ -3826,14 +3169,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);
@@ -3846,25 +3190,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;
}
@@ -3878,35 +3222,54 @@
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);
+ top: var(--btnbtn);
+ right: 1rem;
--w: 1em;
- box-shadow:var(--shadow);
+ box-shadow:var(--shdw);
+ display:flex;
+ flex-wrap: nowrap;
+ gap: 1rem;
}
+@media (min-width: 768px) {
+ .fstatus {
+ right:calc(var(--btn_) + 1rem);
+ bottom: 0;
+ top: unset;
+ }
+ body:has(.fixed.bottom) .fstatus {
+ bottom: var(--btn_);
+ }
+}
+
.fstatus .spinner {
display: none;
}
+
.fstatus.loading .spinner {
display: inline-block;
}
@@ -3917,1465 +3280,14 @@
}
/**************************************************
-ASIDE EXCEPTIONS
+CALLOUT SECTIONS
**************************************************/
-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;
+ grid-column: full;
}
@media (min-width: 768px){
@@ -5383,28 +3295,21 @@
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 {
+
+.callalt :is(h1, h2, h3, h4, h5, h6),
+.callout :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--body);
- font-weight: var(--bBold);
+ font-weight: var(--fw-b-bold);
margin: 1rem 0 0;
width: 100%;
}
@@ -5419,34 +3324,40 @@
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,
-.media-text figure {
- width: 100%;
- margin: 0;
-}
+
.media-text > div {
- max-width: var(--maxWidth);
+ max-width: var(--content);
margin: 0 auto;
padding: 2rem;
}
-
+.timeline.terms ul,
.timeline.terms {
list-style: none;
- display: flex;
+ display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
+.timeline.terms ul {
+ gap: 1rem;
+}
+
.timeline.terms > li {
width: 100%;
}
+
@media (min-width: 768px) {
.timeline.terms > li {
width: 50%;
@@ -5455,10 +3366,7 @@
/**********************************
GALLERY
- */
-/* -------------------------------------------------------
- GALLERY DIALOG BASE
-------------------------------------------------------- */
+**********************************/
dialog.gallery[open] {
position: fixed;
inset: 1rem;
@@ -5467,13 +3375,13 @@
width: calc(100% - 2rem);
height: calc(100% - 2rem);
padding: 0;
- background: rgba(var(--base-rgb),var(--rgb-heavy));
+ 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(--zz-top);
+ z-index: var(--z-9);
max-height: 100vh;
max-width: 100vw;
}
@@ -5483,17 +3391,15 @@
justify-content: flex-end;
--height: 2rem;
}
+
.gallery .controls .cancel {
order: 3;
}
dialog.gallery::backdrop {
- background: rgba(var(--base-rgb), var(--rgb-medium));
+ background: rgba(var(--base-rgb), var(--op-4));
}
-/* -------------------------------------------------------
- WRAPPER
-------------------------------------------------------- */
dialog.gallery .wrap {
position: relative;
width: 100%;
@@ -5503,59 +3409,10 @@
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));
+ background: rgba(var(--base-rgb),var(--op-4));
}
-/* -------------------------------------------------------
- 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;
@@ -5563,21 +3420,17 @@
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 */
+ touch-action: none;
}
-/* Left/Right preload images (off-canvas) */
dialog.gallery .image-left,
dialog.gallery .image-right {
position: absolute;
@@ -5585,9 +3438,6 @@
pointer-events: none;
}
-/* -------------------------------------------------------
- DETAILS PANEL
-------------------------------------------------------- */
dialog.gallery details {
position: absolute;
bottom: 2rem;
@@ -5612,14 +3462,11 @@
padding: 1rem;
}
-/* -------------------------------------------------------
- COUNTER
-------------------------------------------------------- */
dialog.gallery .counter {
position: absolute;
bottom: 1rem;
left: 1rem;
- background: rgba(var(--base-rgb),var(--rgb-medium));
+ background: rgba(var(--base-rgb),var(--op-4));
color: var(--contrast);
padding: 0.4rem 0.8rem;
border-radius: 3px;
@@ -5627,15 +3474,13 @@
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;
@@ -5645,39 +3490,33 @@
opacity: 1;
}
-/* ================================================
- REFERRAL SIDEBAR STYLES
- Add these to your all.css
- ================================================ */
-
-/* Reward Banner (Unlogged In) */
+/**************************************************
+REFERRAL SYSTEM
+**************************************************/
.referral-reward-banner {
- background: var(--action-0);
- color: var(--action-contrast);
+ 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 .reward-emoji {
- font-size: 2.5rem;
- display: block;
- margin-bottom: 0.5rem;
+.referral-reward-banner .icon {
+ --w: 3rem;
}
.referral-reward-banner h4 {
- margin: 0 0 0.5rem;
+ margin: 0;
font-size: 1.25rem;
font-weight: 700;
+ color: var(--contrast);
}
-.referral-reward-banner p {
- margin: 0;
- opacity: 0.95;
-}
-
-/* Code Verification */
.check-code-btn {
width: 100%;
margin-top: 0.5rem;
@@ -5690,7 +3529,6 @@
gap: 0.5rem;
}
-
.code-status {
padding: 0.75rem;
border-radius: 4px;
@@ -5715,7 +3553,6 @@
border: 1px solid var(--errorBack);
}
-/* Footer Links */
.referral-footer {
text-align: center;
padding: 1rem 0;
@@ -5734,7 +3571,6 @@
text-decoration: underline;
}
-/* Share Section (Logged In) */
.share-section {
margin-bottom: 1.5rem;
}
@@ -5747,7 +3583,6 @@
color: var(--contrast-200);
}
-/* Copy Section */
.copy-section {
margin-bottom: 1.5rem;
}
@@ -5761,10 +3596,11 @@
}
.copy-group {
- display: flex;
- gap: 0.5rem;
- align-items: center;
- margin-bottom: 1rem;
+ --gap: 0 .5rem;
+ margin-bottom: 0;
+}
+.copy-group + .hint {
+ margin: .25rem 1rem 1rem;
}
.copy-target {
@@ -5783,29 +3619,24 @@
.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;
+ 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(--success);
- color: var(--successText)
+ background: var(--successBack);
+ color: var(--success);
}
-.copy-btn.selected {
- background: var(--secondary-0);
- color: var(--secondary-contrast);
-}
-
-/* Recent Referrals */
.recent-referrals-section {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
@@ -5846,42 +3677,19 @@
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 {
+.loading,
+.message {
text-align: center;
padding: 1rem;
color: var(--contrast-200);
font-size: 0.875rem;
}
-/* Stats Summary */
.stats-summary {
margin-bottom: 1.5rem;
}
@@ -5921,7 +3729,6 @@
font-size: 1.25rem;
}
-/* View Dashboard Button */
.view-dashboard-btn {
display: flex;
align-items: center;
@@ -5936,23 +3743,28 @@
font-weight: 600;
transition: all 0.2s ease;
}
-
-.jvb-referral button:not(.button) {
+aside button:not(.button, .qtoggle),
+aside a.button{
position: relative;
top: 0;
- box-shadow: var(--shadow-none);
- transition: top var(--transition-base), box-shadow var(--transition-base);
+ box-shadow: var(--shdw-none);
+ transition: top var(--trans-base), box-shadow var(--trans-base);
}
-.jvb-referral button:not(.button):hover {
+
+aside button:not(.button, .qtoggle, :disabled):hover,
+aside a.button:hover {
top: -4px;
- box-shadow: var(--shadow-down);
+ 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 */
.success-content {
padding: 2rem 1rem;
text-align: center;
@@ -5974,31 +3786,8 @@
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 {
+.code-status.loading::before {
+ /*.loading::before {*/
content: '';
display: inline-block;
width: 1rem;
@@ -6009,4 +3798,301 @@
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!important;
+}
+
+.toggle-text label {
+ padding-left: 0!important;
+}
+
+.toggle-text input + label .text {
+ position: relative;
+ margin: 0;
+ --gap: 0;
+ 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;
+}
+
+/******************************************************************
+TAXONOMY SELECTOR
+******************************************************************/
+.items-container {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+details.create-term {
+ margin-top: auto;
+ width: 100%;
+}
+#jvb-selector .search-wrapper {
+ margin-top: auto;
+ width:100%;
+}
+.search-wrapper:not(.open) .search {
+ margin-left: auto;
+}
+.search-wrapper + details.create-term {
+ margin-top: 0;
+}
+
+details.create-term .field,
+.create-term[open] summary {
+ margin-bottom: 1rem;
+}
+
+details.create-term .field {
+ max-width: 100%;
+}
+
+#jvb-selector > .wrap {
+ --wrap: nowrap;
+ --justify: flex-start;
+}
+
+#jvb-selector .items-wrap {
+ width: 100%;
+ padding: 1rem 0;
+ border-top: 1px solid var(--base-200);
+}
+
+#jvb-selector .items-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr)
+}
+#jvb-selector li {
+ list-style: none;
+}
+#jvb-selector li label {
+ padding-left: 0!important;
+}
+
+/*.auto-wrapper {*/
+/* position: absolute;*/
+/* bottom: -105%;*/
+/* background-color: rgba(var(--base-rgb), var(--op-5));*/
+/* backdrop-filter: blur(2px);*/
+/* border-radius: var(--radius);*/
+/* z-index: 1;*/
+/*}*/
+.autocomplete-dropdown {
+ width: 100%;
+ background-color: var(--base-100);
+ padding: .5rem;
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+li.autocomplete {
+ list-style: none;
+ display: inline-flex;
+ margin: 0.25rem;
+ min-height: var(--chip);
+}
+
+.submit-term {
+ gap: 0;
+}
+.submit-term strong {
+ padding-right: 1rem;
+}
+.selected-items {
+ width:100%;
+ padding: .5rem;
+ border-radius: var(--radius);
+ background-color:var(--base);
+ --justify: flex-start;
+ --gap: .5rem;
+ margin-bottom: .5rem;
+}
+
+.selected-items.selected-items:empty {
+ padding:0;
+ background-color:transparent;
+ margin: 0;
+}
+
+.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-term.remove-term {
+ min-height: 0;
+ height: var(--chip);
+ width: var(--chip);
+ padding: 0;
+ --w: .75em;
+}
+
+.clear-filters {
+ margin-left: auto;
+ border: 1px solid var(--base-200);
+}
+/**************************************************
+ANIMATIONS
+**************************************************/
+@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(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes dance {
+ 0%, 100% {
+ transform: rotate(-5deg) scale(1);
+ }
+ 50% {
+ transform: rotate(5deg) scale(1.1);
+ }
+}
+
+
+.content-term-list, .content-term-list ul,
+.content-term-list li {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.content-term-list .item {
+ flex-direction: column;
+}
+.content-term-list h3 {
+ font-size: var(--txt-medium);
+ font-weight: var(--fw-h);
}
\ No newline at end of file
--
Gitblit v1.10.0