/*!
|
Theme Name: Jake Van
|
Theme URI: https://jakevan.ca
|
Author: Jake Vanderwerf
|
Author URI: https://jakevan.ca
|
Description: A base theme for Jake Van clients
|
Requires at least: 6.4
|
Tested up to: 6.4
|
Requires PHP: 7.0
|
Version: 1.279
|
License: GNU General Public License v2 or later
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
Text Domain: jv
|
*/
|
/*************************************************************
|
VARIABLES
|
*************************************************************/
|
:root{
|
/* Layout */
|
--narrow: min(500px, 50vw);
|
--maxWidth: min(768px, 65vw);
|
--alignWide: min(1024px, 90vw);
|
--alignMed: min(962px, 82.5vw);
|
--full: 100vw;
|
/* Margin */
|
--mr: auto;
|
--ml: auto;
|
--mt: 1rem;
|
--mb: 1rem;
|
--setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
|
--insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
|
--height: 4rem;
|
--doubleHeight: 8rem;
|
--offHeight: 5rem;
|
--maxHeight: calc(100vh - var(--height) - var(--height));
|
|
--gap: .5rem;
|
--wrap: wrap;
|
--justify: center;
|
--align: center;
|
--dir: row;
|
/* Typography */
|
--w: 1.2em; /** Icon **/
|
|
--filter: grayscale(.3) sepia(.4);
|
|
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
--heading: 'Open Sans', var(--font-base);
|
--body: 'Montserrat', var(--font-base);
|
--hWeight: 900;
|
--hlight: 400;
|
--bWeight: 400;
|
--bBold: 900;
|
--bLight: 200;
|
/* Font sizes */
|
--enormous: calc(26vh - 4rem);
|
--xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
|
--xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
|
--xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
|
--large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
|
--xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
|
--medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
|
--small: clamp(.95rem, .879rem + .19vw, 1.05rem);
|
--extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
|
/* Colours
|
For best results, generate colours from base colours using: https://uicolors.app/generate/
|
or sass darken/lighten by 5%: http://scg.ar-ch.org/
|
*/
|
--light-0: #ededf4;
|
--light-50: #e3e3ee;
|
--light-100: #dadae8;
|
--light-200: #d1d1e3;
|
--dark-0: #2a2b2a;
|
--dark-50: #2f302f;
|
--dark-100: #393a39;
|
--dark-200: #3e403e;
|
--red-0: #ef767a;
|
--red-50: #ec5f64;
|
--red-100: #ea484e;
|
--red-200: #e73238;
|
--orange-0: #ef9e76;
|
--orange-50: #ec8e5f;
|
--orange-100: #ea7e48;
|
--orange-200: #e76e32;
|
--yellow-0: #E3BE39;
|
--yellow-50: #cca61d;
|
--yellow-100: #9f8217;
|
--yellow-200: #735d10;
|
--green-0: #32cb82;
|
--green-50: #28a268;
|
--green-100: #1e794e;
|
--green-200: #145033;
|
--blue-0: #329dcb;
|
--blue-50: #287da2;
|
--blue-100: #1e5e79;
|
--blue-200: #143e50;
|
--purple-0: #ba76ef;
|
--purple-50: #a348ea;
|
--purple-100: #8c1be4;
|
--purple-200: #7015b7;
|
--action-0: #ef767a;
|
--action-50: #ec5f64;
|
--action-100: #ea484e;
|
--action-200: #e73238;
|
--secondary-0: #329dcb;
|
--secondary-50: #287da2;
|
--secondary-100: #1e5e79;
|
--secondary-200: #143e50;
|
|
--success: #22C55E;
|
--successBack: #d4edda;
|
--successText:#155724;
|
--warning: #E8A737;
|
--error: #EF4444;
|
--errorBack: #f8d7da;
|
--errorText: #721c24;
|
--action-contrast: var(--light-0);
|
--secondary-contrast: var(--light-0);
|
--light-rgb: 237,237,244;
|
--dark-rgb: 42,43,42;
|
--red-rgb: 239,118,122;
|
--orange-rgb: 239,158,118;
|
--yellow-rgb: 227,190,57;
|
--green-rgb: 50,203,130;
|
--blue-rgb: 50,157,203;
|
--purple-rgb: 186,118,239;
|
--action-rgb: 239,118,122;
|
--secondary-rgb: 50,157,203;
|
|
--rgba-subtle: rgba(var(--c),.5);
|
--rgba-subtle-hover: rgba(var(--c),.1);
|
|
--base: var(--light-0);
|
--base-50: var(--light-50);
|
--base-100: var(--light-100);
|
--base-200: var(--light-200);
|
--contrast: var(--dark-0);
|
--contrast-50: var(--dark-50);
|
--contrast-100: var(--dark-100);
|
--contrast-200: var(--dark-200);
|
--c: var(--light-rgb);
|
--base-rgb: var(--light-rgb);
|
--contrast-rgb: var(--dark-rgb);
|
|
/* Stacking */
|
--z-1: 5;
|
--z-2: 10;
|
--z-3: 15;
|
--z-4: 20;
|
--z-5: 50;
|
--z-6: 100;
|
--z-top: 999;
|
--zz-top: 999999;
|
/* Overlays */
|
--rgb-light: .25;
|
--rgb-medium: .66;
|
--rgb-heavy: .85;
|
--overlay-light: rgba(var(--c), .25);
|
--overlay-medium: rgba(var(--c), .66);
|
--overlay-heavy: rgba(var(--c), .85);
|
--shimmer: rgba(var(--dark-rgb),0) 0%,
|
rgba(var(--dark-rgb),.05) 50%,
|
rgba(var(--dark-rgb),0) 100%;
|
/* Shadows */
|
--shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
|
--shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
|
--shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
|
--shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
|
--shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
|
--subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
|
--subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
|
--shadow-none: transparent 0px 0px 0px;
|
/* Rounding */
|
--innerRadius: 4px;
|
--outerPadding: 1rem;
|
--outerRadius: calc(var(--innerRadius) + var(--outerPadding));
|
/* Transitions */
|
--function:cubic-bezier(.47,.24,.07,.47);
|
--timing: .25s;
|
--transition-base: var(--timing) var(--function);
|
--transition-color: background-color var(--transition-base),
|
color var(--transition-base), border var(--transition-base);
|
--transition-transform: transform var(--transition-base);
|
--transition-size: width var(--transition-base),
|
height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
|
|
--offScreen: -200vw;
|
|
/** Icons **/
|
--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
|
--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
|
--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
|
--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
|
--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
|
--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
|
--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
|
--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
|
--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
|
--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
|
--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
|
--linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
|
--swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');
|
|
|
--scrollbar-width: 8px;
|
--scrollbar-track-color: var(--base-100);
|
--scrollbar-thumb-color: var(--action-0);
|
--scrollbar-thumb-hover-color: var(--action-50);
|
--scrollbar-thumb-border: 2px solid var(--base-50);
|
--scrollbar-border-radius: 4px;
|
|
--can-scroll: 0;
|
}
|
|
body:has(#theme-switcher:checked){
|
--red-50: #ec5f64;
|
--red-100: #ea484e;
|
--red-200: #e73238;
|
--orange-50: #f2ae8d;
|
--orange-100: #f4bea4;
|
--orange-200: #f7cfbb;
|
--yellow-50: #e9cd66;
|
--yellow-100: #f0db92;
|
--yellow-200: #f6eabf;
|
--green-50: #5ad69b;
|
--green-100: #83e0b4;
|
--green-200: #aceacc;
|
--blue-50: #5ab1d6;
|
--blue-100: #83c4e0;
|
--blue-200: #acd8ea;
|
--purple-50: #c58df2;
|
--purple-100: #d1a4f4;
|
--purple-200: #dcbbf7;
|
--action-50: #f28d90;
|
--action-100: #f4a4a6;
|
--action-200: #f7bbbd;
|
--secondary-50: #5ab1d6;
|
--secondary-100: #83c4e0;
|
--secondary-200: #acd8ea;
|
--contrast: var(--light-0);
|
--contrast-50: var(--light-50);
|
--contrast-100: var(--light-100);
|
--contrast-200: var(--light-200);
|
--base: var(--dark-0);
|
--base-50: var(--dark-50);
|
--base-100: var(--dark-100);
|
--base-200: var(--dark-200);
|
--c: var(--dark-rgb);
|
--base-rgb: var(--dark-rgb);
|
--contrast-rgb: var(--light-rgb);
|
--overlay-light: rgba(var(--c), .25);
|
--overlay-medium: rgba(var(--c), .5);
|
--overlay-heavy: rgba(var(--c), .85);
|
--shimmer: rgba(var(--c),0) 0%,
|
rgba(var(--c),.05) 50%,
|
rgba(var(--c),0) 100%;
|
--shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
|
--shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */
|
--shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */
|
--shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */
|
--shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */
|
--subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
|
--subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
|
|
--successBack: #155724;
|
--successText:#d4edda;
|
--errorBack: #721c24;
|
--errorText: #f8d7da;
|
|
--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
|
--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
|
--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
|
--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
|
--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
|
--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
|
--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
|
--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
|
--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
|
--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
|
--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
|
--linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
|
}
|
/******************************************************************
|
FONTS
|
******************************************************************/
|
/* open-sans-regular - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 800;
|
src: url('./fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 800;
|
src: url('./fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* montserrat-200 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 200;
|
src: url('./fonts/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
}
|
/* montserrat-200italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 200;
|
src: url('./fonts/montserrat-v31-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
}
|
/* montserrat-regular - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
}
|
/* montserrat-italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./fonts/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
}
|
/* montserrat-900 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 900;
|
src: url('./fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
}
|
/* montserrat-900italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 900;
|
src: url('./fonts/montserrat-v31-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
}
|
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
|
@layer reset {
|
html {
|
color-scheme: light dark;
|
font:
|
clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
|
sans-serif;
|
tab-size: 2;
|
hanging-punctuation: first allow-end last;
|
word-break: break-word;
|
}
|
|
body {
|
margin: 0;
|
/*padding: 2rem;*/
|
/*@media (width < 500px) {*/
|
/* padding: 1rem;*/
|
/*}*/
|
}
|
|
*,
|
*::before,
|
*::after {
|
box-sizing: border-box;
|
}
|
|
h1,
|
h2 {
|
font-weight: 900;
|
letter-spacing: -0.02rem;
|
}
|
h1,
|
h2,
|
h3 {
|
line-height: 1.1;
|
}
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 /* FUTURE :heading */ {
|
text-wrap: balance;
|
margin-block-start: 0;
|
}
|
|
p,
|
li,
|
dd {
|
text-wrap: pretty;
|
max-inline-size: 88ch;
|
}
|
|
a {
|
color: oklch(0.68 0.17 228);
|
text-underline-offset: 2px;
|
&:not(:is(:hover, :focus)) {
|
text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
|
}
|
}
|
|
sub,
|
sup {
|
font-size: 75%;
|
line-height: 0;
|
position: relative;
|
vertical-align: baseline;
|
}
|
sub {
|
inset-block-end: -0.25em;
|
}
|
sup {
|
inset-block-start: -0.5em;
|
}
|
|
ul,
|
ol,
|
dl {
|
margin: 0;
|
padding: 0;
|
list-style: inside;
|
ul,
|
ol,
|
dl {
|
padding-inline-start: 2ch;
|
}
|
}
|
|
img,
|
video,
|
iframe {
|
display: block;
|
max-inline-size: 100%;
|
block-size: auto;
|
border-style: none;
|
}
|
|
figure {
|
inline-size: fit-content;
|
margin-inline: auto;
|
}
|
figcaption {
|
contain: inline-size;
|
font-size: 90%;
|
}
|
|
input,
|
select,
|
textarea,
|
button {
|
font: inherit;
|
/* FUTURE: appearance: base; */
|
}
|
label {
|
display: block;
|
}
|
input:not(
|
:where(
|
[type="submit"],
|
[type="checkbox"],
|
[type="radio"],
|
[type="button"],
|
[type="reset"]
|
)
|
) {
|
inline-size: 100%;
|
}
|
button,
|
input:where(
|
[type="submit"],
|
[type="reset"],
|
[type="button"]
|
) {
|
background: CanvasText;
|
color: Canvas;
|
border: 1px solid transparent;
|
}
|
textarea {
|
field-sizing: content;
|
min-block-size: 5lh;
|
inline-size: 100%;
|
max-inline-size: 100%;
|
}
|
|
pre,
|
code,
|
kbd,
|
samp {
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
}
|
|
svg {
|
fill: currentColor;
|
}
|
|
[aria-disabled="true" i],
|
[disabled] {
|
cursor: not-allowed;
|
}
|
[hidden] {
|
display: none !important;
|
}
|
[disabled],
|
label:has(input[disabled]) {
|
opacity: 0.5;
|
|
[disabled] {
|
opacity: 1;
|
}
|
}
|
|
pre {
|
white-space: pre-wrap;
|
background: CanvasText;
|
color: Canvas;
|
padding: 1.5rem;
|
}
|
|
hr {
|
border-style: solid;
|
border-width: 1px 0 0;
|
color: inherit;
|
height: 0;
|
overflow: visible;
|
margin-block: 2.5rem;
|
}
|
|
:target {
|
scroll-margin: 3rlh;
|
}
|
|
table {
|
caption-side: bottom;
|
border-collapse: collapse;
|
td {
|
font-size: 90%;
|
}
|
td,
|
th {
|
word-break: normal;
|
border: 1px solid gray;
|
padding: 0.5rem;
|
}
|
}
|
[role="region"][aria-labelledby][tabindex] {
|
overflow: auto;
|
}
|
caption {
|
font-size: 90%;
|
}
|
|
.screen-reader-text:not(:focus):not(:active) {
|
clip: rect(0 0 0 0);
|
clip-path: inset(50%);
|
height: 1px;
|
overflow: hidden;
|
position: absolute;
|
white-space: nowrap;
|
width: 1px;
|
}
|
:focus-visible {
|
outline-offset: 2px;
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
@view-transition {
|
navigation: auto;
|
}
|
|
html {
|
interpolate-size: allow-keywords;
|
&:focus-within {
|
scroll-behavior: smooth;
|
}
|
}
|
}
|
}
|
/***************************************************************
|
SCROLLBAR
|
***************************************************************/
|
* {
|
scrollbar-width: thin;
|
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
|
}
|
|
/* For WebKit browsers (Chrome, Safari, etc.) */
|
::-webkit-scrollbar {
|
width: var(--scrollbar-width);
|
height: var(--scrollbar-width);
|
}
|
|
::-webkit-scrollbar-track {
|
background: var(--scrollbar-track-color);
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: var(--scrollbar-thumb-color);
|
border-radius: var(--scrollbar-border-radius);
|
border: var(--scrollbar-thumb-border);
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background-color: var(--scrollbar-thumb-hover-color);
|
}
|
|
|
body{
|
background-color: var(--base-50);
|
color: var(--contrast);
|
max-width: 100vw;
|
overflow-x: hidden;
|
margin: 0;
|
font-family: var(--body);
|
font-weight: var(--bWeight);
|
font-size: var(--medium);
|
line-height: 1.4;
|
position: relative;
|
}
|
body b,
|
body strong {
|
font-weight: var(--bBold);
|
}
|
|
|
*:target {
|
scroll-snap-margin-top: max(6rem, 20vh);
|
scroll-margin-top: max(6rem, 20vh);
|
outline: double var(--action-0);
|
border-radius: var(--outerRadius);
|
padding: var(--outerPadding);
|
}
|
body.menu_item *:target h2 {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
body,
|
body * {
|
transition: background-color var(--transition-base);
|
transition-property: background-color, border;
|
}
|
|
|
/**************************************************************
|
UTILITY CLASSES
|
**************************************************************/
|
body:has(aside.expanded),
|
body:has(nav.open),
|
body:has(dialog[open]),
|
body.loading {
|
overflow: hidden;
|
}
|
|
|
*[hidden] {
|
display: none!important;
|
}
|
|
@media (max-width: 767px){
|
.hide-small {
|
display: none;
|
}
|
}
|
.width-50 {
|
width: 100%;
|
}
|
.width-25 {
|
width: 50%;
|
}
|
.width-75 {
|
width: 100%;
|
}
|
.w-full {
|
width: 100%;
|
}
|
|
|
@media (min-width: 768px){
|
.buttons li.width-50,
|
.width-50 {
|
width: calc(50% - .3em);
|
}
|
.width-25 {
|
width: calc(25% - .3em);
|
}
|
.width-75 {
|
width: calc(75% - .3em);
|
}
|
}
|
|
.row:not(.icon),
|
.col {
|
display: flex;
|
justify-content: var(--justify);
|
align-items: var(--align);
|
gap: var(--gap);
|
flex-wrap: var(--wrap);
|
flex-direction: var(--dir);
|
}
|
.col {
|
--dir: column;
|
}
|
.row:not(.icon) {
|
--dir: row;
|
}
|
.col.rev {
|
--dir: column-reverse;
|
}
|
.row.rev {
|
--dir: row-reverse;
|
}
|
|
.nowrap {
|
--wrap: nowrap;
|
}
|
.col.a-start,
|
.row.start {
|
--justify: flex-start;
|
}
|
|
.col.a-end,
|
.row.end {
|
--justify: flex-end;
|
}
|
.col.btw,
|
.row.btw {
|
--justify: space-between;
|
}
|
.col.even,
|
.row.even {
|
--justify: space-evenly;
|
}
|
|
.col.start,
|
.row.a-start {
|
--align: flex-start;
|
}
|
|
.col.end,
|
.row.a-end {
|
--align: flex-end;
|
}
|
|
.abs {
|
position: absolute;
|
}
|
*:has(>.abs) {
|
position: relative;
|
}
|
.hidden {
|
transform: scale(0);
|
max-width: 0;
|
max-height: 0;
|
overflow: hidden;
|
transition: var(--transition-transform), var(--transition-size);
|
}
|
|
.visible {
|
transform: scale(1);
|
max-width: 100%;
|
max-height: 100%;
|
transition: var(--transition-transform), var(--transition-size);
|
}
|
|
/******************************************************************
|
THEME SWITCHER & TOGGLE
|
******************************************************************/
|
.theme-switcher {
|
position: absolute;
|
opacity: 0;
|
width: 0;
|
height: 0;
|
}
|
#theme-switch {
|
z-index: 99;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
#theme-switch,
|
.toggle-switch {
|
--wrap: nowrap;
|
cursor: pointer;
|
}
|
#theme-switch,
|
.toggle-switch input[type=checkbox] {
|
--h: 2rem;
|
width: calc(var(--h) * 2);
|
height: var(--h);
|
margin: 0 2rem 0 0;
|
left: 0;
|
appearance:none;
|
background: var(--base-200);
|
border: 1px solid var(--base-50);
|
border-radius: var(--h);
|
cursor: pointer;
|
transition: all .3s ease;
|
opacity: 1;
|
}
|
|
.toggle-switch input[type=checkbox] {
|
position: relative;
|
}
|
.toggle-switch {
|
position: relative;
|
}
|
|
@media (max-width: 600px) {
|
#theme-switch {
|
left: 1rem;
|
}
|
.wp-site-blocks > header {
|
padding: 0!important;
|
}
|
}
|
|
/* Icon wrapper styling */
|
#theme-switch .icon {
|
--w: 1em;
|
position: relative;
|
top: 0;
|
margin: 0 .25em;
|
color: var(--contrast-200);
|
z-index: 2;
|
transform: translateX(0);
|
}
|
|
|
#theme-switcher:not(:checked) ~ .sun-dim,
|
#theme-switcher:checked ~ .moon {
|
--w: 1.5em;
|
color: var(--contrast);
|
}
|
|
#theme-switcher:not(:checked) ~ .moon,
|
#theme-switcher:checked ~ .sun-dim {
|
top: -.17rem;
|
}
|
#theme-switcher:not(:checked) ~ .sun-dim {
|
color: var(--secondary-0);
|
transform: translate(-2px, 2px);
|
}
|
#theme-switcher:checked ~ .moon {
|
transform: translate(4px, 4px);
|
}
|
|
#theme-switch span,
|
.toggle-switch input[type=checkbox]::before {
|
--m: 2px;
|
content: "";
|
position: absolute;
|
top: var(--m);
|
left: var(--m);
|
width: calc(var(--h) - (var(--m) * 2));
|
height: calc(var(--h) - var(--m) * 2);
|
border: 1px solid rgba(var(--contrast-rgb), .2);
|
border-bottom: 3px solid var(--contrast-200);
|
background: var(--base-50);
|
border-radius: 50%;
|
z-index: 1;
|
transform: rotate(360deg);
|
transition: transform var(--transition-base),
|
left var(--transition-base),
|
top var(--transition-base),
|
height var(--transition-base);
|
}
|
#theme-switch input:checked ~ span,
|
.toggle-switch input[type=checkbox]:checked::before {
|
left: calc(100% - (var(--h) - var(--m)));
|
transform: rotate(-180deg);
|
transition: transform var(--transition-base), left var(--transition-base);
|
}
|
.toggle-switch input[type=checkbox]:checked {
|
background: var(--action-0);
|
}
|
|
/* Focus States */
|
.theme-switch:focus-visible + label {
|
outline: 2px solid var(--action-0);
|
outline-offset: 2px;
|
}
|
|
/* Icon Animations */
|
#theme-switch .icon {
|
transition:
|
transform var(--transition-base),
|
width var(--transition-base),
|
height var(--transition-base),
|
top var(--transition-base),
|
color var(--transition-base);
|
}
|
|
#theme-switcher:not(:checked) ~ .icon.dark,
|
#theme-switcher:checked ~ .icon.light {
|
transform: rotate(360deg);
|
color: var(--contrast-200);
|
}
|
#theme-switcher:not(:checked) ~ .icon.light,
|
#theme-switcher:checked ~ .icon.dark {
|
transform: rotate(-360deg);
|
color: var(--contrast);
|
}
|
|
/* Hover Effects */
|
#theme-switch:hover span {
|
background-color: var(--base-100);
|
}
|
|
|
#theme-switch:hover .icon {
|
color: var(--action-50);
|
}
|
|
/* Active State */
|
#theme-switch:active span {
|
transform: scale(.97);
|
}
|
|
/***********************************************************
|
SMOOTH SCROLLING
|
***********************************************************/
|
html {
|
scroll-behavior: smooth;
|
}
|
|
@media(prefers-reduced-motion){
|
html {
|
scroll-behavior: unset;
|
}
|
* {
|
transition: none!important;
|
animation: none!important;
|
}
|
}
|
|
/*********************************************************
|
SPACING
|
*********************************************************/
|
main {
|
min-height: 60vh;
|
}
|
|
main > * {
|
width: 100%;
|
max-width: var(--maxWidth);
|
margin: var(--setMargin);
|
}
|
main > .align-wide {
|
max-width: var(--alignWide);
|
}
|
main > .align-full {
|
--ml: 0;
|
--mr: 0;
|
max-width: var(--full);
|
}
|
main > section {
|
--mt: 6rem;
|
}
|
main > *:first-child {
|
margin-top: 0;
|
}
|
|
footer {
|
padding: 1rem 1rem var(--offHeight);
|
background-color: var(--base-200);
|
color: var(--contrast-200);
|
text-align: center;
|
margin: 4rem 0 0;
|
position: relative;
|
z-index: var(--z-top);
|
}
|
footer p,
|
footer p + p {
|
margin: .5rem auto;
|
}
|
|
@media (min-width:768px) {
|
footer {
|
padding: 1rem 2rem var(--offHeight);
|
}
|
}
|
/*********************************************************
|
GRIDS
|
*********************************************************/
|
.grid-view,
|
.item-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 10px;
|
}
|
.grid-view .item,
|
.item-grid .item {
|
border-radius: var(--outerRadius);
|
aspect-ratio: 1;
|
display:flex;
|
filter: none;
|
transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);
|
}
|
.grid-view img,
|
.item-grid img {
|
border-radius: var(--innerRadius);
|
}
|
.item-grid.list-view {
|
display: flex;
|
flex-direction: column;
|
gap: 2rem;
|
--gap: 2rem;
|
}
|
.item-grid.list-view .item .col {
|
--gap: .5rem;
|
}
|
.item-grid.list-view img {
|
width: 20%;
|
}
|
|
@media (min-width: 768px) {
|
.item-grid,
|
.grid-view {
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
}
|
}
|
|
/*********************************************************
|
TYPOGRAPHY
|
*********************************************************/
|
h1 b, h1 strong,
|
h2 b, h2 strong,
|
h3 b, h3 strong,
|
h4 b, h4 strong,
|
h5 b, h5 strong,
|
h6 b, h6 strong {
|
text-decoration: double;
|
-webkit-text-fill-color: transparent;
|
-webkit-text-stroke: 2px var(--contrast);
|
}
|
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 {
|
--mt: 1.5em;
|
--mb: .875em;
|
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.inline + *,
|
h2.inline + *,
|
h3.inline + *,
|
h4.inline + *,
|
h5.inline + *,
|
h6.inline + * {
|
display: inline-block;
|
margin: .5rem 0;
|
}
|
h1.inline + .term-list,
|
h2.inline + .term-list,
|
h3.inline + .term-list,
|
h4.inline + .term-list,
|
h5.inline + .term-list,
|
h6.inline + .term-list {
|
display: inline-flex;
|
margin: .5rem 0;
|
}
|
|
h1 {
|
font-size: var(--xxxlarge);
|
font-weight: var(--hWeight);
|
line-height: 1;
|
margin: 0 var(--mr) .25em var(--ml);
|
}
|
h1:first-of-type {
|
margin-top: 20vh;
|
}
|
h1 small {
|
display: block;
|
font-size: var(--small);
|
font-weight: var(--bWeight);
|
line-height: 1;
|
font-family: var(--body);
|
}
|
|
h2 {
|
font-size: var(--xxlarge);
|
}
|
h3 {
|
font-size: var(--xlarge);
|
}
|
h4 {
|
/*font-family: var(--body);*/
|
font-weight: 400;
|
font-size: var(--large);
|
}
|
h5, h6 {
|
/*font-family: var(--body);*/
|
font-weight: 400;
|
font-size: var(--medium);
|
}
|
|
p {
|
line-height: 1.6;
|
}
|
p + p {
|
margin-top: 2.5rem;
|
}
|
|
a {
|
color: var(--action-0);
|
text-decoration: none;
|
}
|
ul a {
|
display: inline-flex;
|
text-decoration: none;
|
}
|
|
a:visited {
|
color: var(--action-100);
|
}
|
a:hover {
|
color: var(--action-50);
|
text-decoration: underline;
|
}
|
/******************************************************************
|
BUTTONS
|
******************************************************************/
|
.buttons {
|
--wrap: wrap;
|
--justify: flex-start;
|
margin: 1rem var(--mr) 1rem var(--ml);
|
width: 100%;
|
padding: 0;
|
}
|
.buttons.fit {
|
width: fit-content;
|
margin: 1rem 2rem;
|
}
|
.buttons li {
|
--justify: stretch;
|
--align: stretch;
|
padding: 0;
|
list-style: none;
|
overflow:hidden;
|
}
|
.buttons {
|
margin: 3rem auto;
|
max-width: 90%;
|
}
|
|
@media (min-width: 768px){
|
.buttons {
|
max-width: var(--maxWidth);
|
margin: 3rem var(--mr) 3rem var(--ml);
|
}
|
}
|
[type=submit],
|
a.button,
|
a.wp-block-button__link,
|
button {
|
--justify: center;
|
--align: center;
|
--dir: row;
|
width: fit-content;
|
text-transform: uppercase;
|
text-decoration: none;
|
background-color: var(--base-100);
|
color: var(--contrast-50);
|
border: 1px solid var(--base-200);
|
border-radius: var(--innerRadius);
|
padding: .25rem 1rem;
|
font: inherit;
|
cursor: pointer;
|
outline: inherit;
|
display: inline-flex;
|
justify-content: var(--justify);
|
align-items: var(--align);
|
gap: var(--gap);
|
flex-wrap: var(--wrap);
|
flex-direction: var(--dir);
|
transition: color var(--transition-base);
|
transition-property: color, border,background-color;
|
position: relative;
|
}
|
[type=submit]:hover,
|
[type=submit]:focus,
|
.buttons a:hover,
|
a.button:hover,
|
a.button:focus,
|
a.wp-block-button__link:hover,
|
a.wp-block-button__link:focus,
|
button:hover,
|
button:focus {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
|
[type=submit]:disabled,
|
[type=submit]:disabled:hover,
|
[type=submit]:disabled:focus,
|
a.button:disabled,
|
a.wp-block-button__link:disabled,
|
button:disabled,
|
a.button:disabled:hover,
|
a.wp-block-button__link:disabled:hover,
|
button:disabled:hover,
|
a.button:disabled:focus,
|
a.wp-block-button__link:disabled:focus,
|
button:disabled:focus {
|
opacity: .5;
|
background-color: var(--base-200)!important;
|
color: var(--contrast-200)!important;
|
}
|
details .icon {
|
--w: 1.5em;
|
}
|
|
button.voted svg,
|
button.favourite.favourited {
|
animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
|
}
|
@keyframes favourite-pop {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.3); }
|
75% { transform: scale(.9); }
|
100% { transform: scale(1); }
|
}
|
|
button.filter-toggle {
|
border: 1px solid var(--base-200);
|
background-color: transparent;
|
white-space: nowrap;
|
font-size: 1rem;
|
padding: .35em;
|
--w: 1.2em;
|
}
|
.filter-toggle:hover {
|
border-color: var(--action-50);
|
color: var(--action-50);
|
}
|
.filter-toggle:focus {
|
background-color: var(--action-50);
|
color: var(--action-contrast);
|
}
|
|
button.favourite:not(.favourited) .heart-fill,
|
button.favourite.favourited .heart,
|
.toggle.notifications:not(.has) .bell-ringing,
|
.toggle.notifications.has .bell,
|
.vote button:not(.voted) .upvoted,
|
.vote button:not(.voted) .downvoted,
|
.vote .voted .upvote,
|
.vote .voted .downvote {
|
display: none;
|
}
|
button.favourite:not(.favourited) .heart,
|
button.favourite.favourited .heart-fill,
|
.toggle.notifications:not(.has) .bell,
|
.toggle.notifications.has .bell-ringing,
|
.vote button:not(.voted) .upvote,
|
.vote button:not(.voted) .downvote,
|
.vote .voted .upvoted,
|
.vote .voted .downvoted {
|
display: block;
|
}
|
/******************************************************************
|
ICONS
|
******************************************************************/
|
.icon {
|
width: var(--w);
|
height: var(--w);
|
display: inline-flex;
|
transition: var(--transition-size), var(--transition-color);
|
}
|
.icon svg {
|
width: 100%;
|
height: 100%;
|
}
|
.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%);
|
mask-image: var(--colour);
|
-webkit-mask-image: var(--colour);
|
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-size: contain;
|
mask-repeat: no-repeat;
|
mask-size: contain;
|
width: 1.25rem;
|
height: 1.25rem;
|
}
|
|
.icon.logo-basic svg path {
|
transition: fill var(--timing) var(--function);
|
}
|
.icon.logo-basic svg path#innerCircle,
|
.icon.logo-basic svg path#outerSkull {
|
fill: var(--base);
|
}
|
|
a .icon.logo-basic:hover svg path {
|
fill: var(--base);
|
}
|
a .icon.logo-basic:hover svg path#innerCircle,
|
a .icon.logo-basic:hover svg path#outerSkull {
|
fill: var(--action-0);
|
}
|
|
.icon.grab {
|
cursor: grab;
|
}
|
|
main a .icon {
|
margin-right: .5em;
|
}
|
|
body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {
|
position: relative;
|
}
|
body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{
|
content: '';
|
display: block;
|
width:60%;
|
height:60%;
|
border-radius: 50%;
|
background-color: var(--dark-200);
|
position: absolute;
|
left: 18%;
|
top: 22%;
|
z-index:-1;
|
}
|
|
path#refresh {
|
transform-origin: center;
|
transform-box: fill-box;
|
animation: spin 1s var(--function) infinite;
|
}
|
|
/******************************************************************
|
ACCESSIBILITY
|
******************************************************************/
|
.screen-reader-text {
|
border: 0;
|
clip: rect(1px, 1px, 1px, 1px);
|
clip-path: inset(50%);
|
height: 1px;
|
margin: -1px;
|
overflow: hidden;
|
padding: 0;
|
position: absolute !important;
|
width: 1px;
|
word-wrap: normal !important;
|
}
|
input[type=checkbox] + label:focus,
|
input[type=checkbox] + label:focus-visible,
|
input[type=radio] + label:focus,
|
input[type=radio] + label:focus-visible,
|
input:focus,
|
input:focus-within {
|
outline: 2px solid var(--action-0) !important;
|
outline-offset: 2px !important;
|
box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;
|
}
|
|
[aria-busy="true"] {
|
cursor: progress;
|
}
|
|
/* Disabled states */
|
[aria-disabled="true"],
|
[disabled] {
|
cursor: not-allowed;
|
opacity: .7;
|
}
|
|
/******************************************************************
|
DETAILS
|
******************************************************************/
|
details {
|
padding: .25rem 0;
|
border-top: 1px solid var(--base-200);
|
border-bottom: 1px solid var(--base-200);
|
}
|
details[open] {
|
background-color: var(--base-50);
|
}
|
details summary {
|
--wrap: nowrap;
|
list-style: none;
|
text-transform: uppercase;
|
cursor: pointer;
|
border: 0;
|
transition: background-color var(--transition-base);
|
transition-property: background-color, border;
|
position: relative;
|
padding: .5rem 2.5rem .5rem .5rem;
|
gap: .5rem;
|
}
|
details summary:hover {
|
background-color: var(--base-100);
|
border-color: var(--base-100);
|
color: var(--contrast);
|
transition: background-color var(--transition-base);
|
transition-property: background-color, border,color;
|
}
|
details[open] > summary {
|
background-color: var(--base-50);
|
}
|
details summary::after {
|
content: "";
|
background-color: var(--contrast-100);
|
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-size: contain;
|
-webkit-mask-image: var(--details);
|
mask-image: var(--details);
|
mask-repeat: no-repeat;
|
mask-size: contain;
|
width: 1.25rem;
|
height: 1.25rem;
|
margin-left: auto;
|
transition: background-color var(--transition-base);
|
transition-property: background-color, transform;
|
}
|
|
details summary:hover::after,
|
details[open] > summary::after {
|
background-color: var(--contrast);
|
}
|
details[open] > summary::after {
|
transform: rotate(-540deg);
|
transition: background-color var(--transition-base);
|
transition-property: background-color, transform;
|
}
|
|
details::details-content {
|
opacity: 0;
|
block-size: 0;
|
overflow-y: clip;
|
transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);
|
}
|
details[open]::details-content {
|
opacity: 1;
|
block-size: auto;
|
}
|
@media (prefers-reduced-motion: no-preference){
|
details {
|
interpolate-size: allow-keywords;
|
}
|
}
|
|
/******************************************************************
|
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] {
|
--p-x: 1.5rem;
|
font-family: var(--body);
|
font-size: var(--medium);
|
color: var(--contrast);
|
padding: 1rem var(--p-x);
|
border-radius: var(--innerRadius);
|
background-color: var(--base);
|
outline: 0;
|
border: 1px solid var(--base-100);
|
border-bottom: 2px solid var(--contrast-200);
|
width: 100%;
|
max-width: 100%;
|
margin: 0 4px;
|
transition: background-color var(--transition-base);
|
transition-property: background-color, border;
|
}
|
textarea:focus,
|
input[type=number]:focus,
|
input[type=text]:focus,
|
input[type=url]:focus,
|
input[type=email]:focus,
|
input[type=textarea]:focus,
|
input[type=tel]:focus,
|
input[type=password]:focus,
|
input[type=search]:focus {
|
outline: var(--action-50);
|
background-color: var(--base-100);
|
color: var(--contrast);
|
}
|
textarea::placeholder,
|
input::placeholder {
|
font-family: var(--body);
|
color: var(--base-200);
|
}
|
|
select {
|
/*appearance: none;*/
|
/*-webkit-appearance: none;*/
|
/*-moz-appearance: none;*/
|
background: var(--base);
|
border: 2px solid var(--base-100);
|
border-radius: var(--innerRadius);
|
color: var(--contrast);
|
cursor: pointer;
|
font-family: var(--body);
|
font-size: var(--small);
|
padding: .5rem 1rem;
|
width: 100%;
|
transition: var(--transition-color);
|
}
|
select:disabled {
|
background-color: var(--base-50);
|
border-color: var(--base-100);
|
color: var(--base-200);
|
cursor: not-allowed;
|
}
|
|
select option {
|
background: var(--base);
|
color: var(--contrast);
|
padding: .5rem;
|
}
|
select option:hover,
|
select option:focus,
|
select option:active,
|
select option:checked {
|
background: var(--action-0);
|
color: var(--base);
|
box-shadow: 0 0 0 100px var(--action-0) inset;
|
}
|
|
select option:checked {
|
background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
|
color: var(--base);
|
}
|
|
select:hover {
|
border-color: var(--action-0);
|
}
|
|
select:focus {
|
border-color: var(--action-0);
|
}
|
|
input[type=search]:focus + .clear-search {
|
opacity: 1;
|
cursor: pointer;
|
transition: opacity var(--transition-base);
|
}
|
|
.search-container .clear-search {
|
opacity: 0;
|
cursor: default;
|
transition: opacity var(--transition-base);
|
}
|
.search-container .icon.search {
|
padding: 4px 8px;
|
color: var(--contrast-200);
|
--w: 3rem;
|
}
|
input[type="search"]::-moz-search-clear-button,
|
input[type="search"]::-ms-clear,
|
input[type="search"]::-ms-reveal,
|
input[type="search"]::search-cancel-button {
|
-webkit-appearance: none;
|
-moz-appearance: none;
|
appearance: none;
|
display: none;
|
visibility: hidden;
|
}
|
|
input[type="search"]::-webkit-search-decoration,
|
input[type="search"]::-webkit-search-cancel-button,
|
input[type="search"]::-webkit-search-results-button,
|
input[type="search"]::-webkit-search-results-decoration {
|
-webkit-appearance:none;
|
}
|
|
.integration .label,
|
label {
|
text-transform: uppercase;
|
font-weight: bold;
|
margin-bottom: .5rem;
|
display: block;
|
}
|
|
/**********************
|
SPECIAL FIELDS
|
**********************/
|
.selected-items {
|
--justify: flex-start;
|
--gap: .5rem;
|
margin-bottom: .5rem;
|
}
|
|
.selected-item {
|
padding: .25rem .5rem;
|
margin: .125em;
|
background: var(--base-100);
|
border-radius: .25rem;
|
font-size: var(--medium);
|
border: 1px solid var(--base-200);
|
position: relative;
|
}
|
|
.remove-item {
|
background: none;
|
border: none;
|
padding: .25rem;
|
cursor: pointer;
|
color: #666;
|
border-radius: var(--innerRadius);
|
width: 1.5em;
|
height: 1.5em;
|
}
|
.remove-item .close {
|
width: .5em;
|
height: .5em;
|
}
|
|
.remove-item:hover {
|
color: var(--action-0);
|
background: #fee;
|
}
|
|
.clear-filters {
|
margin-left: auto;
|
border: 1px solid var(--base-200);
|
}
|
[type=radio],
|
[type=checkbox],
|
input.ch {
|
position: absolute;
|
opacity: 0;
|
left: -200vw;
|
}
|
/* Pseudo checkbox */
|
[type=radio] + label,
|
[type=checkbox] + label,
|
input.ch + label {
|
position: relative;
|
cursor: pointer;
|
}
|
[type=radio] + label:hover,
|
[type=checkbox] + label:hover {
|
color: var(--action-0);
|
}
|
[type=radio] + label::before,
|
[type=checkbox] + label::before,
|
input.ch + label::before,
|
[type=radio] + label::after,
|
[type=checkbox] + label::after,
|
input.ch + label::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
}
|
|
|
[type=radio] + label::after,
|
[type=checkbox] + label::after,
|
input.ch + label::after {
|
left: 5px;
|
transform: translateY(-70%) rotate(45deg);
|
width: 5px;
|
height: 10px;
|
border: solid var(--light-0);
|
border-width: 0 2px 2px 0;
|
display: none;
|
}
|
|
|
|
|
[type=radio] + label::before,
|
[type=checkbox] + label::before,
|
input.ch + label::before {
|
left: 0;
|
transform: translateY(-50%);
|
width: 1rem;
|
height: 1rem;
|
border: 2px solid var(--contrast-200);
|
background-color: var(--base);
|
border-radius: var(--innerRadius);
|
transition: background-color var(--transition-base),
|
border-color var(--transition-base);
|
}
|
[type=radio]:hover + label::before,
|
[type=checkbox]:hover + label::before,
|
input.ch:hover + label::before {
|
border-color: var(--action-200);
|
}
|
|
[type=radio]:checked + label::before,
|
[type=checkbox]:checked + label::before,
|
input.ch:checked + label::before {
|
background-color: var(--action-0);
|
border-color: var(--action-100);
|
}
|
|
[type=radio]:checked + label::before {
|
border-radius: 50%;
|
}
|
|
[type=checkbox]:checked + label::after,
|
input.ch:checked + label::after {
|
display: block;
|
left: 5px;
|
top: 50%;
|
transform: translateY(-70%) rotate(45deg);
|
width: .35rem;
|
height: .66rem;
|
border: solid var(--light-0);
|
border-width: 0 2px 2px 0;
|
}
|
|
[type=radio]:disabled + label,
|
[type=checkbox]:disabled + label,
|
input.ch:disabled + label {
|
cursor: not-allowed;
|
background-color: var(--base-50);
|
color: var(--base-200);
|
border-color: var(--base-200);
|
}
|
[type=radio]:disabled + label:hover,
|
[type=checkbox]:disabled + label:hover,
|
input.ch:disabled + label:hover {
|
background-color: var(--base-50);
|
color: var(--base-200);
|
border-color: var(--base-200);
|
}
|
[type=radio]:disabled + label::before,
|
[type=checkbox]:disabled + label::before,
|
input.ch:disabled + label::before {
|
border-color: var(--base-200);
|
}
|
|
[type=radio]:not(.btn) + label,
|
[type=checkbox]:not(.btn) + label,
|
input.ch + label {
|
flex: 1;
|
padding-left: 2rem;
|
transform-origin: top center;
|
transition: transform .3s ease;
|
will-change: transform;
|
}
|
|
/* Non-pseudo checkbox, that acts more like a button/pill style */
|
.btn + label::before,
|
.btn + label::after {
|
display: none;
|
}
|
.btn + label {
|
--w: 1.2em; /* For icons */
|
border: 1px solid var(--base-200);
|
border-radius: var(--innerRadius);
|
min-width: 2rem;
|
min-height: 2rem;
|
margin: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-wrap: nowrap;
|
gap: .5rem;
|
color: var(--contrast-200);
|
opacity: .8;
|
}
|
.radio-options.status label {
|
padding: 0 .5rem;
|
}
|
.btn:checked + label {
|
border-color: var(--contrast);
|
color: var(--contrast);
|
opacity: 1;
|
}
|
|
.btn + label:hover {
|
color: var(--action-50);
|
border-color: var(--action-50);
|
}
|
|
.btn[hidden] + label {
|
display: none;
|
}
|
|
/* DATE */
|
.date-wrapper {
|
position: relative;
|
display: inline-block;
|
}
|
input[type=date] {
|
padding: 8px 36px 8px 8px;
|
/*border: 1px solid #ccc;*/
|
border-radius: 4px;
|
}
|
input[type=date]::-webkit-calendar-picker-indicator {
|
opacity: 0;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
cursor: pointer;
|
}
|
input[type=date] + .icon {
|
--w: 20px;
|
position: absolute;
|
right: 10px;
|
top: 50%;
|
transform: translateY(-50%);
|
pointer-events: none; /* This allows clicks to pass through to the input below */
|
}
|
|
/** TIME **/
|
|
|
input[type=url] {
|
background: var(--linkIcon);
|
background-position: .5em;
|
background-size: 1em;
|
background-repeat: no-repeat;
|
padding-left: 2em;
|
}
|
|
|
.field {
|
margin: 2rem 0;
|
position: relative;
|
}
|
.field:has(.has-tooltip) label {
|
margin-left: 2rem;
|
}
|
/***************
|
TOGGLE TEXT
|
***************/
|
.toggle-text input {
|
display: none;
|
}
|
|
.toggle-text input + label {
|
font-weight: normal;
|
color: var(--contrast)!important;
|
text-transform: none;
|
cursor: pointer;
|
position: relative;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
.toggle-text label::before,
|
.toggle-text label::after {
|
display: none;
|
}
|
.toggle-text label {
|
padding-left: 0!important;
|
}
|
|
.toggle-text input + label .text {
|
position: relative;
|
margin: 0 .5rem;
|
font-weight: bold;
|
width: fit-content;
|
padding: 2px 4px;
|
border: 1px solid var(--action-50);
|
border-radius: 4px;
|
color: var(--action-50)!important;
|
}
|
table .toggle-text input+label .text {
|
color: var(--contrast)!important;
|
border-color: var(--contrast);
|
}
|
.toggle-text:hover .text,
|
table .toggle-text:hover .text {
|
background-color: var(--action-50);
|
color: var(--light-0)!important;
|
border-color: var(--action-50);
|
}
|
|
.toggle-text input + label .off,
|
.toggle-text input + label .on {
|
/*left: 0;*/
|
/*position: absolute;*/
|
/*top: 0;*/
|
-webkit-transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
|
transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
|
transition: transform .125s ease-out, opacity .125s ease-out;
|
transition: transform .125s ease-out, opacity .125s ease-out, -webkit-transform .125s ease-out;
|
}
|
|
.toggle-text input + label .off {
|
opacity: 1;
|
max-width: 100%;
|
-webkit-transform: none;
|
transform: none;
|
}
|
|
.toggle-text input + label .on {
|
opacity: 0;
|
max-width: 0;
|
-webkit-transform: translate3d(0, 100%, 0);
|
transform: translate3d(0, 100%, 0);
|
}
|
|
.toggle-text input:checked + label .off {
|
opacity: 0;
|
max-width: 0;
|
-webkit-transform: translate3d(0, -100%, 0);
|
transform: translate3d(0, -100%, 0);
|
}
|
|
.toggle-text input:checked + label .on {
|
max-width: 100%;
|
opacity: 1;
|
-webkit-transform: none;
|
transform: none;
|
}
|
|
|
/******************************************************************
|
TAXONOMY SELECTOR
|
******************************************************************/
|
.items-container {
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
}
|
.create-new-term {
|
margin-top: 1rem;
|
width: 100%;
|
}
|
.create-new-term .field,
|
.create-new-term[open] summary {
|
margin-bottom: 1rem;
|
}
|
.create-new-term .field {
|
max-width: 100%;
|
}
|
#jvb-selector > .wrap {
|
--gap: nowrap;
|
}
|
/******************************************************************
|
QUANTITY FIELD
|
******************************************************************/
|
.quantity {
|
margin: 0;
|
}
|
.quantity label {
|
margin: 0;
|
font-size: var(--small);
|
}
|
.quantity {
|
display: inline-flex;
|
width: fit-content;
|
align-items: center;
|
justify-content: center;
|
border: 1px solid transparent;
|
border-radius: 4px;
|
position: relative;
|
}
|
.quantity:focus-within {
|
border-color: var(--action-0);
|
}
|
|
.quantity button {
|
background: var(--base);
|
padding: 0;
|
width: 38px;
|
height: 38px;
|
z-index: 0;
|
position: relative;
|
border: 1px solid var(--base-200);
|
color: var(--contrast-200);
|
}
|
.quantity button:hover:not(:disabled) {
|
color: var(--action-0);
|
border-color: var(--action-0);
|
background-color: var(--base);
|
}
|
.quantity button:active:not(:disabled) {
|
background-color: var(--action-0);
|
color: var(--light-0);
|
transform: scale(.95);
|
}
|
.quantity button:disabled {
|
opacity: .5;
|
cursor: not-allowed;
|
}
|
.quantity input[type=number] {
|
z-index: 1;
|
border: 1px solid var(--base-200);
|
background: var(--base);
|
text-align: center;
|
font-size: 1.1rem;
|
width: 60px;
|
height: 48px;
|
margin: 0;
|
padding: 0!important;
|
appearance: textfield;
|
}
|
.quantity input[type=number]::-webkit-outer-spin-button,
|
.quantity input[type=number]::-webkit-inner-spin-button {
|
-webkit-appearance: none;
|
margin: 0;
|
}
|
.quantity input[type=number]:focus {
|
background-color: var(--base-50);
|
}
|
.quantity button.increase {
|
left: -2px;
|
border-radius: 0 4px 4px 0;
|
}
|
.quantity button.decrease {
|
right: -2px;
|
border-radius: 4px 0 0 4px;
|
}
|
|
/**************************************************
|
LIST OVERRIDES
|
**************************************************/
|
.term-list {
|
--justify: flex-start;
|
--align: center;
|
--wrap: nowrap;
|
--gap: .5rem;
|
--w: 1em;
|
margin: 0;
|
padding: 0;
|
height: var(--height);
|
display: flex;
|
justify-content: var(--justify);
|
align-items: var(--align);
|
gap: var(--gap);
|
flex-wrap: var(--wrap);
|
flex-direction: var(--dir);
|
position: relative;
|
overflow: auto hidden;
|
touch-action: pan-x;
|
text-transform: lowercase;
|
}
|
/*.term-list a {*/
|
/* color: var(--contrast);*/
|
/* text-decoration: none;*/
|
/* font-size: var(--small);*/
|
/* }*/
|
/* .term-list a:hover {*/
|
/* color: var(--action-0);*/
|
/* }*/
|
/*.term-list.shop a::before,*/
|
/*.term-list.style a::before,*/
|
/*.term-list.theme a::before,*/
|
/*.term-list.city a::before,*/
|
/*#by-city::before,*/
|
/*#by-style::before,*/
|
/*#by-theme::before,*/
|
/*.term-list.all a::before{*/
|
/* content:"";*/
|
/* display:inline-block;*/
|
/* mask-repeat: no-repeat;*/
|
/* mask-size: contain;*/
|
/* width: 1.2em;*/
|
/* height: 1.2em;*/
|
/* margin-right: .5rem;*/
|
/* vertical-align: middle;*/
|
/* background-color: currentColor;*/
|
/*}*/
|
/*.term-list a::after {*/
|
/* display: none;*/
|
/*}*/
|
|
/*.term-list.shop a::before {*/
|
/* mask-image: var(--shop);*/
|
/*}*/
|
|
/*.term-list.city a::before,*/
|
/*#by-city::before {*/
|
/* mask-image: var(--map);*/
|
/*}*/
|
/*.term-list.style a::before,*/
|
/*#by-style::before,*/
|
/*.term-list.all.styles a::before {*/
|
/* mask-image: var(--style);*/
|
/*}*/
|
/*.term-list.theme a::before,*/
|
/*#by-theme::before {*/
|
/* mask-image: var(--theme);*/
|
/*}*/
|
/**************************************************
|
MODALS DIALOGUE
|
**************************************************/
|
dialog::backdrop {
|
backdrop-filter: blur(5px);
|
background-color: var(--overlay-medium);
|
}
|
|
dialog[open] {
|
z-index:999;
|
--padding: 0;
|
top: 0;
|
width: min(500px, 95vw);
|
border-radius: 1rem;
|
height: fit-content;
|
max-height: 90vh;
|
overflow: hidden;
|
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 {
|
overflow: hidden auto;
|
max-height: 100%;
|
margin: 1.5rem 0 0 1.5rem;
|
padding-right: 1.2rem;
|
width: calc(100% - 1.5rem - 1.2rem);
|
}
|
|
dialog label {
|
font-weight: normal;
|
}
|
|
dialog h2,
|
dialog h3 {
|
margin: 0 0 .5rem 0;
|
font-size: var(--large);
|
}
|
|
dialog:has(.m-actions){
|
padding-bottom: var(--height);
|
}
|
.m-actions {
|
--w: 1.5em;
|
--justify: flex-end;
|
--wrap: nowrap;
|
--gap: 0;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: var(--z-6);
|
background-color: var(--action-100);
|
box-shadow: var(--shadow-up);
|
}
|
.m-actions button {
|
width: 100%;
|
height: 3rem;
|
border-radius: 0;
|
color: var(--action-contrast);
|
background-color: var(--action-50);
|
border: 2px solid var(--action-50);
|
}
|
.m-actions button:hover,
|
.m-actions button:focus {
|
background-color: var(--base);
|
color: var(--contrast);
|
}
|
.m-actions button:first-of-type {
|
border-bottom-left-radius: 1rem;
|
}
|
.m-actions button:last-of-type {
|
border-bottom-right-radius: 1rem;
|
}
|
dialog ul {
|
list-style: none;
|
}
|
|
dialog .search-container {
|
padding-top: 1rem;
|
width: 100%;
|
gap: .5rem;
|
}
|
/****************
|
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 .cancel {
|
position: absolute;
|
top: 1rem;
|
right: 1rem;
|
background: none;
|
border: none;
|
color: white;
|
cursor: pointer;
|
padding: .5rem;
|
z-index: 10;
|
transition: color .3s ease;
|
}
|
|
.gallery .cancel:hover {
|
color: var(--action-0);
|
}
|
|
.gallery .nav {
|
position: absolute;
|
top: 50%;
|
height: 50%;
|
z-index: 5;
|
transform: translateY(-50%);
|
border: none;
|
color: var(--contrast);
|
cursor: pointer;
|
padding: 1rem;
|
transition: color .3s ease;
|
}
|
.gallery .nav:hover {
|
background-color: var(--overlay-heavy);
|
}
|
|
.gallery .nav:hover {
|
color: var(--action-0);
|
}
|
|
.gallery .prev {
|
left: 1rem;
|
}
|
|
.gallery .next {
|
right: 1rem;
|
}
|
|
.gallery .counter {
|
position: absolute;
|
top: 1rem;
|
left: 1rem;
|
color: white;
|
font-size: .875rem;
|
}
|
|
.gallery .content details {
|
position:absolute;
|
bottom: 1rem;
|
left: 2rem;
|
width: calc(100% - 4rem);
|
background-color: var(--overlay-light);
|
padding: 0;
|
}
|
.gallery .content details:hover,
|
.gallery .content details[open] {
|
background-color: var(--overlay-heavy);
|
backdrop-filter: blur(5px);
|
}
|
.gallery .content details[open] summary {
|
background-color: transparent;
|
}
|
/**************************************************
|
TABLES
|
**************************************************/
|
table {
|
white-space: nowrap;
|
width: 100%;
|
display: block;
|
margin: 0 0 2rem;
|
border-radius: 4px;
|
height: var(--maxHeight);
|
overflow: auto;
|
position: relative;
|
}
|
thead,tfoot {
|
position: sticky;
|
z-index: 10;
|
background-color: var(--base);
|
text-transform: uppercase;
|
padding: .5rem 0;
|
line-height: 2;
|
font-weight: normal;
|
}
|
|
tr:nth-of-type(even){
|
background-color: var(--base-200);
|
}
|
tfoot th {
|
vertical-align: middle;
|
}
|
tfoot th:first-of-type {
|
text-align: right;
|
}
|
tbody {
|
}
|
thead tr, tfoot tr {
|
background-color: var(--overlay-heavy);
|
box-shadow: var(--shadow);
|
}
|
thead tr {
|
border-bottom: 1px solid var(--contrast-200);
|
}
|
tfoot tr {
|
border-top: 1px solid var(--contrast-200);
|
}
|
thead {
|
top: 0;
|
}
|
tfoot {
|
bottom: 0;
|
}
|
thead th {
|
width: max-content;
|
}
|
th p {
|
margin: 0!important;
|
}
|
td {
|
width: max-content;
|
padding: .5rem 1rem;
|
}
|
|
td .toggle input[type=checkbox] {
|
margin: 0;
|
}
|
td .field {
|
margin: .25rem 0;
|
}
|
td[data-id="actions"] label {
|
margin: 0;
|
padding: 0;
|
}
|
td .description {
|
display: none;
|
}
|
td input[type=text] {
|
width: fit-content;
|
max-width: 40vw;
|
padding: .25em!important;
|
font-size: var(--small)!important;
|
}
|
|
tbody tr {
|
border: 2px solid transparent;
|
}
|
tbody tr:focus-within {
|
background-color: var(--base-100);
|
border-color: var(--action-50)
|
}
|
|
[data-stuck] {
|
background-color: var(--overlay-medium);
|
position: sticky;
|
left: -1rem;
|
z-index: 15;
|
box-shadow: var(--subtleRight);
|
}
|
tbody [data-stuck] {
|
z-index: 5;
|
}
|
thead [data-stuck],
|
tfoot [data-stuck] {
|
background: var(--base);
|
}
|
|
/**************************************************
|
BLOCKQUOTE
|
**************************************************/
|
blockquote {
|
padding: var(--outerPadding);
|
border-radius: var(--outerRadius);
|
background-color: var(--base-50);
|
}
|
|
cite {
|
width: 90%;
|
margin: 1rem auto;
|
}
|
/**************************************************
|
TOOLTIP
|
**************************************************/
|
[role=tooltip],
|
.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
|
visibility: hidden;
|
position: absolute;
|
bottom: 2rem;
|
left: 1rem;
|
width: max-content;
|
height:fit-content;
|
max-width: 50vw;
|
padding: .5rem;
|
border-radius: var(--innerRadius);
|
box-shadow: var(--shadow);
|
background: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
body.menu_item [role=tooltip] {
|
left: auto;
|
right: 100%;
|
top: -200%;
|
z-index: var(--z-4);
|
}
|
[role=tooltip] p {
|
margin: 0;
|
}
|
[role=tooltip] p + p {
|
margin-top: .5rem;
|
}
|
|
/*.field:has([aria-describedby]:hover) [role=tooltip],*/
|
.field:has([aria-describedby]:focus) [role=tooltip],
|
[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
|
[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
|
visibility: visible;
|
display: block;
|
}
|
.has-tooltip {
|
display: inline-flex;
|
justify-content: flex-end;
|
position: absolute;
|
top: 0;
|
left: 0;
|
--w: 1.5rem
|
}
|
.tt-toggle {
|
cursor: pointer;
|
display: flex;
|
border-radius: 50%;
|
background-color: transparent;
|
}
|
.tt-toggle:hover,
|
.tt-toggle:focus {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
.tt-toggle:hover + [role=tooltip],
|
.tt-toggle:focus + [role=tooltip] {
|
visibility: visible;
|
}
|
|
/************************************************************
|
SELECTOR
|
************************************************************/
|
dialog[open]#jvb-selector {
|
height: 70vh;
|
top: 15vh;
|
display: flex;
|
}
|
#jvb-selector > .wrap {
|
flex: 1;
|
}
|
|
/******************************************************************
|
LOADING
|
******************************************************************/
|
dialog.loading {
|
opacity: 0;
|
transition: opacity var(--transition-base);
|
}
|
dialog.loading[open] {
|
opacity: 1;
|
transition: opacity var(--transition-base);
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
max-width: 100%;
|
max-height: 100%;
|
border-radius: 0;
|
border: none;
|
background-color: transparent;
|
box-shadow: none;
|
--w: 3em;
|
justify-content: center;
|
align-items: center;
|
}
|
dialog.loading[open]@starting-style {
|
opacity: 0;
|
}
|
dialog.loading[open] > .col {
|
height: fit-content;
|
width: min(400px, 60vw);
|
border-radius: var(--outerRadius);
|
background-color: var(--overlay-medium);
|
padding: 2rem;
|
box-shadow: var(--shadow);
|
position: relative;
|
}
|
|
dialog.loading[open] .spinner {
|
position: absolute;
|
top: 1rem;
|
width: 5rem;
|
height: 5rem;
|
border-width: 0;
|
border-top-width: 4px;
|
animation: spin 1s var(--function) infinite;
|
}
|
.loading[open] .icon {
|
color: var(--action-0);
|
}
|
|
dialog.loading[open] svg {
|
animation: dance 2s ease-in-out infinite;
|
transition: color .3s ease;
|
}
|
dialog.loading[open] h3 {
|
color: var(--contrast);
|
margin: 2rem 1rem auto !important;
|
font-size: var(--large);
|
width: -moz-fit-content;
|
width: fit-content;
|
/*-webkit-text-stroke: 1px var(--contrast);*/
|
/*--g: conic-gradient(var(--action-0) 0 0) no-repeat text;*/
|
/*animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;*/
|
/*background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;*/
|
}
|
|
dialog.loading[open] p {
|
margin: .5rem auto;
|
}
|
|
dialog.loading[open]::after {
|
animation: shimmer 3s ease-in-out infinite;
|
background: linear-gradient(90deg, var(--shimmer));
|
content: "";
|
inset: 0;
|
position: absolute;
|
z-index: -1;
|
}
|
|
.spinner {
|
width: 12px;
|
height: 12px;
|
border: 2px solid transparent;
|
border-top: 2px solid var(--action-50);
|
border-radius: 50%;
|
animation: spin 1s var(--function) infinite;
|
}
|
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
|
@keyframes shimmer {
|
0% {
|
left: -50%;
|
}
|
50% {
|
left: 150%;
|
}
|
100% {
|
left: -50%;
|
}
|
}
|
|
|
@keyframes dance {
|
0%, 100% {
|
transform: rotate(-5deg) scale(1);
|
}
|
50% {
|
transform: rotate(5deg) scale(1.1);
|
}
|
}
|
|
@keyframes letterOutline {
|
0% {
|
background-size: 1ch 0;
|
}
|
100% {
|
background-size: 1ch 100%;
|
}
|
}
|
|
@keyframes letterInside {
|
0%, 50% {
|
background-position-y: 100%,0;
|
}
|
50.01%, 100% {
|
background-position-y: 0, 100%;
|
}
|
}
|
|
/******************************
|
TABS
|
******************************/
|
.tab-content[hidden] {
|
display: block!important;
|
transform: scaleY(0);
|
height: 0;
|
overflow: hidden;
|
}
|
.tab-content[hidden]:focus-within {
|
transform: scaleY(1);
|
height:auto;
|
}
|
|
nav.tabs h2 {
|
margin: 0!important;
|
line-height: 1;
|
font-size: var(--medium);
|
display: flex;
|
color: var(--contrast);
|
white-space: nowrap;
|
gap: 1rem;
|
}
|
nav.tabs .active h2 {
|
color: var(--action-contrast);
|
}
|
nav.tabs button {
|
padding: .75rem 1.5rem;
|
border-radius: 0;
|
position: relative;
|
border: 2px solid var(--action-0);
|
}
|
nav.tabs > button:first-of-type {
|
border-top-left-radius: var(--innerRadius);
|
}
|
nav.tabs > button:last-of-type {
|
border-top-right-radius: var(--innerRadius);
|
}
|
.tabs > button:hover,
|
.tabs > button:focus {
|
background-color: var(--base-200);
|
}
|
|
.tabs > button::after {
|
content: '';
|
position: absolute;
|
bottom: -2px;
|
left: 0;
|
width: 0;
|
height: 3px;
|
background-color: var(--action-50);
|
transition: width .3s;
|
}
|
.tabs > button:hover::after,
|
.tabs > button.active::after {
|
width: 100%;
|
}
|
.tabs > button.active::after {
|
background-color: var(--action-200);
|
}
|
.tabs > button.active {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
.tabs > button.active:hover,
|
.tabs > button.active:focus {
|
background-color: var(--action-100);
|
}
|
.tab-content h2 {
|
display: none;
|
}
|
/*****************************************************************************
|
MENU
|
*****************************************************************************/
|
.toggle-details {
|
gap: 2px;
|
}
|
body.menu_item #top {
|
z-index: var(--z-4);
|
position: relative;
|
}
|
section .toggle-details {
|
position: absolute;
|
right: 0;
|
top: 5rem;
|
}
|
|
[data-toggle=all] {
|
position: fixed;
|
bottom: calc(var(--offHeight) + var(--height) + .5rem);
|
right: 0;
|
z-index: var(--z-4);
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
[data-toggle] {
|
z-index: var(--z-1);
|
}
|
body:has(#queue[hidden]) [data-toggle=all] {
|
left: 1rem;
|
}
|
dialog:not([open]).col,
|
dialog:not([open]).row {
|
display: none;
|
}
|
|
@media (min-width:768px) {
|
section .toggle-details {
|
right: -10%;
|
}
|
}
|
/********************************************
|
TYPE TEXT
|
********************************************/
|
/* Cursor, for typing messages */
|
.typeText::after {
|
content: '|';
|
display: inline-block;
|
margin-left: 0;
|
animation: blink .75s step-end infinite;
|
}
|
@keyframes blink {
|
from, to { opacity: 1; }
|
50% { opacity: 0; }
|
}
|
|
/**************************************************
|
POPUPS:
|
- toast container
|
- cart
|
- queue
|
**************************************************/
|
aside#cart,
|
aside#queue {
|
position: fixed;
|
top: var(--doubleHeight);
|
bottom: var(--offHeight);
|
width: min(500px, calc(100vw - 2rem));
|
background-color: var(--base);
|
z-index: var(--z-5);
|
box-shadow: var(--shadow);
|
padding-bottom: var(--height);
|
overflow: visible;
|
}
|
|
.qtoggle,
|
.toggle-cart,
|
.create-item {
|
z-index: var(--z-6);
|
position: fixed;
|
bottom: var(--offHeight);
|
width: var(--height);
|
height: var(--height);
|
background-color: var(--overlay-medium);
|
color: var(--contrast);
|
transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
|
box-shadow: var(--shadow);
|
}
|
.toggle-cart:hover,
|
.qtoggle:hover,
|
.create-item:hover,
|
.toggle-cart:focus,
|
.qtoggle:focus,
|
.create-item:focus {
|
background-color: rgba(var(--action-rgb),var(--rgb-heavy));
|
color: var(--action-contrast);
|
}
|
.toggle-cart:disabled,
|
.qtoggle:disabled,
|
.create-item:disabled,
|
.toggle-cart:disabled:hover,
|
.qtoggle:disabled:hover,
|
.create-item:disabled:hover,
|
.toggle-cart:disabled:focus,
|
.qtoggle:disabled:focus,
|
.create-item:disabled:focus {
|
opacity: .5;
|
background-color: var(--overlay-light);
|
color: var(--contrast);
|
}
|
/******************
|
CART
|
******************/
|
.create-item,
|
.toggle-cart {
|
right: 0;
|
border-radius: 4px 4px 4px var(--outerRadius);
|
}
|
|
body:has(#cart.expanded) .toggle-cart {
|
width: min(500px, calc(100vw - 2rem));
|
}
|
body:has(#cart.expanded) .toggle-cart .icon {
|
display: none;
|
}
|
|
aside#cart {
|
overflow: hidden;
|
right: var(--offScreen);
|
border-radius: var(--outerRadius) 0 0 var(--outerRadius);
|
transition: right var(--transition-base);
|
padding-bottom: 6rem;
|
}
|
aside#cart.expanded {
|
right: 0;
|
transition: right var(--transition-base);
|
}
|
#cart form {
|
max-height: 100%;
|
overflow: hidden auto;
|
}
|
#cart nav.tabs {
|
z-index: var(--z-6);
|
top: 0;
|
}
|
#cart table {
|
height: auto;
|
}
|
#cart th {
|
padding: 0 1.5rem;
|
}
|
#cart table th:first-of-type {
|
width: 100%;
|
}
|
|
#cart nav.tabs {
|
position: sticky;
|
box-shadow: var(--shadow);
|
}
|
#cart button[data-tab] {
|
flex: 1;
|
border-radius: 0;
|
}
|
|
#cart form > *:not(.tabs) {
|
max-width: 90%;
|
margin: 0 auto;
|
}
|
|
#cart form .empty p {
|
margin: .5rem 0!important;
|
}
|
|
#cart .cart-total.cart-total {
|
--gap: 0 1rem;
|
padding-right: 1rem;
|
position: absolute;
|
bottom: var(--height);
|
width: 100%;
|
max-width: 100%;
|
background-color: var(--overlay-heavy);
|
z-index: var(--z-6);
|
box-shadow: var(--shadow-up);
|
}
|
.cart-total p {
|
--gap: 2rem;
|
max-width: 100%;
|
margin: 0;
|
}
|
.cart-total p span {
|
width: 6rem;
|
display: inline-block;
|
text-align: right;
|
}
|
.cart-total p + p {
|
font-weight: bold;
|
}
|
|
.cart-items .total {
|
font-weight: bold;
|
}
|
#cart .restored {
|
background-color: rgba(var(--action-rgb), var(--rgb-light));
|
border-radius: var(--outerRadius);
|
padding: 1rem;
|
}
|
.restored h3 {
|
font-size: var(--medium);
|
margin: 0;
|
}
|
.restored p {
|
margin: 0;
|
}
|
.restored .row {
|
--gap: 0;
|
--wrap:nowrap;
|
--w: 1em;
|
}
|
/******************
|
TOAST
|
******************/
|
.toasts {
|
position: fixed;
|
top: 4rem;
|
right: -350px;
|
z-index: 1000;
|
width: 350px;
|
}
|
|
.toast {
|
background-color: var(--overlay-heavy);
|
border-left: 4px solid var(--action-0);
|
padding: 1rem;
|
box-shadow: var(--shadow);
|
left: 0;
|
position: relative;
|
opacity: 0;
|
transition: left .3s, opacity .3s;
|
}
|
|
.toast.success {
|
border-left-color: var(--success);
|
}
|
|
.toast.error {
|
border-left-color: var(--error);
|
}
|
|
.toast.info {
|
border-left-color: var(--warning);
|
}
|
|
.toast.show {
|
left: calc(-350px - 1rem);
|
opacity: 1;
|
}
|
|
.toast.hiding {
|
left: 0;
|
opacity: 0;
|
}
|
|
.toast-content p {
|
margin: 0;
|
}
|
|
.close-toast {
|
background: none;
|
border: none;
|
font-size: 1.25rem;
|
cursor: pointer;
|
opacity: .5;
|
transition: opacity .2s;
|
color: inherit;
|
}
|
|
.close-toast:hover {
|
opacity: 1;
|
}
|
/******************
|
QUEUE
|
******************/
|
aside#queue {
|
left: var(--offScreen);
|
border-radius: 0 var(--outerRadius) var(--outerRadius) 0;
|
transition: left var(--transition-base);
|
--wrap: nowrap;
|
--align: stretch;
|
}
|
aside#queue.expanded {
|
left: 0;
|
overflow: hidden auto;
|
}
|
|
.qtoggle {
|
left: 0;
|
border-radius: 4px 4px var(--outerRadius) 4px;
|
}
|
|
body:has(#queue.expanded) .qtoggle {
|
left: var(--height);
|
width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
|
}
|
|
.qtoggle.saving svg {
|
color: var(--action-0);
|
animation: spin .87s var(--function) infinite;
|
}
|
|
#queue .status-actions {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: var(--z-2);
|
}
|
|
#queue .status-actions .popup {
|
position: absolute;
|
z-index: -1;
|
width: max-content;
|
max-width: 300px;
|
background-color: var(--action-50);
|
color: var(--action-contrast);
|
border-radius: var(--innerRadius);
|
padding: .25em .75em;
|
top: 1rem;
|
left: -100vw;
|
transition: left var(--transition-base);
|
}
|
aside#queue .popup::before{
|
content: '';
|
width: 10px;
|
height: 10px;
|
transform: rotate(-45deg);
|
background-color: var(--action-50);
|
z-index: -1;
|
left: -5px;
|
position: absolute;
|
top: calc(50% - 5px);
|
}
|
|
.expanded#queue .status-actions .popup.showing {
|
left: calc(100% + 1em);
|
}
|
#queue .status-actions .popup.showing {
|
left: calc(200vw + var(--offHeight));
|
max-width: 75vw;
|
}
|
|
/** BADGES **/
|
|
.refresh .countdown,
|
#queue .item .status,
|
.filter .count,
|
.qtoggle .count,
|
.qtoggle .indicator {
|
z-index: var(--z-3);
|
--offset: 0;
|
position: absolute;
|
top: var(--offset);
|
background-color: var(--overlay-light);
|
}
|
.expanded + .qtoggle .indicator,
|
.expanded + .qtoggle .count {
|
--offset: .25rem;
|
}
|
/* Status indicator */
|
.qtoggle .indicator {
|
right: var(--offset);
|
width: .75rem;
|
height: .75rem;
|
border-radius: 50%;
|
}
|
|
aside#queue.synced + .qtoggle .indicator {
|
background-color: var(--success);
|
}
|
|
aside#queue.pending + .qtoggle .indicator {
|
background-color: var(--warning);
|
animation: pulse 2s infinite;
|
}
|
aside#queue.pending:not(.expanded) + .qtoggle svg {
|
color: var(--error);
|
animation: spin 1s var(--function) infinite;
|
}
|
|
/* Status count badge */
|
.qtoggle .count {
|
--align: center;
|
--justify: center;
|
left: var(--offset);
|
min-width: 1.25rem;
|
height: 1.25rem;
|
padding: 0 4px;
|
color: var(--contrast);
|
border-radius: var(--innerRadius);
|
font-size: var(--extra-small);
|
}
|
|
#queue:has(.empty-queue) + .qtoggle .count {
|
display: none;
|
}
|
|
aside#queue .header {
|
padding: 15px;
|
border-bottom: 1px solid var(--base-200);
|
flex-shrink: 0;
|
}
|
.qitems {
|
flex: 1;
|
overflow: hidden auto;
|
padding: .5rem 2rem;
|
--gap: .5rem;
|
}
|
|
aside#queue h3 {
|
margin: 0 0 12px 0;
|
font-size: 16px;
|
color: var(--contrast);
|
}
|
|
#queue .filters .filter {
|
background-color: transparent;
|
white-space: nowrap;
|
font-size: var(--small);
|
}
|
|
#queue .filters .filter.active {
|
background: var(--base-200);
|
border-color: transparent;
|
}
|
#queue .filter:hover,
|
#queue .filter:focus {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
|
/* Filter count badge */
|
.filter .count {
|
--offset: -8px;
|
right: var(--offset);
|
background: var(--base-200);
|
color: var(--contrast-200);
|
border-radius: 10px;
|
min-width: 18px;
|
height: 18px;
|
font-size: 10px;
|
}
|
.filter .count:empty {
|
display: none;
|
}
|
|
/* Empty state */
|
.empty-queue {
|
height: 100px;
|
color: var(--contrast-200);
|
font-size: var(--small);
|
font-style: italic;
|
}
|
|
.refresh .countdown:not(.counting),
|
aside#queue:has(.empty-queue) .refresh .count {
|
display: none;
|
}
|
|
/* Queue items */
|
#queue .item {
|
padding: 15px;
|
background: var(--base-100);
|
border-radius: var(--innerRadius);
|
transition: all .2s ease;
|
box-shadow: var(--shadow-none);
|
}
|
|
#queue .item:hover {
|
box-shadow: var(--shadow);
|
}
|
|
#queue .item .header {
|
position: relative;
|
}
|
|
#queue .item .type {
|
font-size: var(--small);
|
}
|
|
#queue .item .status {
|
--w: 1em;
|
--gap: 0;
|
--justify:center;
|
--align: center;
|
--offset: -1.2rem;
|
aspect-ratio: 1;
|
right: var(--offset);
|
border-radius: 50%;
|
color: var(--contrast-200);
|
background-color: var(--base-50);
|
border: 1px solid var(--base-200);
|
width: 1.25em;
|
height: 1.25em;
|
}
|
|
#queue .item .status.pending {
|
background: var(--base-100);
|
color: var(--contrast-200);
|
}
|
#queue .item .status.processing {
|
background: var(--base-200);
|
color: var(--contrast-100);
|
animation: pulse-color 2s infinite;
|
}
|
|
#queue .item .status.completed {
|
background: var(--base-50);
|
color: var(--base-200);
|
}
|
#queue .item .status.completed:hover {
|
color: var(--contrast-200);
|
}
|
|
#queue .item .status.failed {
|
background: var(--base);
|
color: var(--error);
|
}
|
|
|
#queue .item button {
|
font-size: 16px;
|
padding: 0;
|
line-height: 1;
|
opacity: .5;
|
transition: opacity .2s;
|
}
|
|
#queue .item button:hover {
|
opacity: 1;
|
}
|
|
/* Item details */
|
#queue .item .info {
|
margin-top: 8px;
|
font-size: var(--small);
|
}
|
#queue .item .info .time {
|
--gap: 7px;
|
font-size: 10px;
|
}
|
|
/* Item actions */
|
#queue .item .actions {
|
margin-top: 12px;
|
--gap: 8px;
|
}
|
|
#queue .item .actions button {
|
padding: 6px 12px;
|
font-size: 12px;
|
background: var(--base-200);
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
transition: all .2s;
|
color: var(--contrast);
|
}
|
|
#queue .item .actions .retry {
|
background-color: var(--secondary-200);
|
color: var(--secondary-contrast);
|
}
|
|
|
#queue .item .actions button:hover {
|
opacity: .9;
|
}
|
|
/* Queue actions footer */
|
.queue-actions {
|
padding: 15px;
|
border-top: 1px solid var(--base-200);
|
flex-shrink: 0;
|
}
|
|
.queue-actions button {
|
padding: 8px 12px;
|
font-size: var(--small);
|
transition: all .2s;
|
}
|
|
|
/* Refresh area */
|
.status-actions > .refresh {
|
position: relative;
|
font-size: var(--small);
|
}
|
|
.refresh .countdown {
|
--justify:center;
|
--align: center;
|
--offset: 0;
|
right: var(--offset);
|
margin: 0 3px;
|
border-radius: 50%;
|
border: 1px solid var(--base-200);
|
}
|
|
.refreshNow {
|
width: var(--height);
|
height: var(--height);
|
}
|
|
.refreshNow:hover {
|
background: var(--base-200);
|
color: var(--contrast-200);
|
}
|
|
.icon.refresh {
|
--w: 18px;
|
}
|
|
/* Refreshing animation */
|
#queue.pending.expanded .refreshNow svg {
|
animation: spin 1.5s var(--function) infinite;
|
}
|
/**************************************************
|
DELAY
|
**************************************************/
|
/* Initialize counter on the parent container */
|
.item-grid, #queue {
|
counter-reset: delay-counter;
|
}
|
|
/* Increment counter for each item */
|
.item {
|
counter-increment: delay-counter;
|
}
|
|
/* Use counter value to calculate delay */
|
.item .progress .fill::after {
|
--delay: calc(counter(delay-counter) * .1s);
|
}
|
/**************************************************
|
PROGRESS
|
**************************************************/
|
.progress .bar {
|
height: 6px;
|
display: block;
|
border-radius: 6px;
|
overflow: hidden;
|
background: var(--base-200);
|
position: relative;
|
}
|
|
.progress .fill {
|
height: 100%;
|
background: var(--action-0);
|
border-radius: 6px;
|
width: 0;
|
transition: width .3s ease;
|
}
|
.progress .details {
|
margin-top: 5px;
|
font-size: var(--small);
|
color: var(--contrast);
|
text-align: center;
|
padding: .25rem 0;
|
}
|
.progress .details:empty {
|
display: none;
|
}
|
.queued .fill::after,
|
.pending .fill::after,
|
.processing .fill::after,
|
.uploading .fill::after {
|
--delay: 0s;
|
content: '';
|
position: absolute;
|
top: 0;
|
left: -50%;
|
width: 30%;
|
height: 100%;
|
background: linear-gradient(
|
90deg,
|
rgba(255, 255, 255, 0) 0%,
|
rgba(255, 255, 255, .225) 50%,
|
rgba(255, 255, 255, 0) 100%
|
);
|
animation: shimmer 2.5s infinite linear var(--delay);
|
}
|
/**************************************************
|
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(--secondary-rgb), .4);
|
}
|
70% {
|
box-shadow: 0 0 0 6px rgba(var(--secondary-rgb), 0);
|
}
|
100% {
|
box-shadow: 0 0 0 0 rgba(var(--secondary-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%;
|
}
|
|
.menu_item h1:first-of-type {
|
margin-top: 10vh!important;
|
}
|
|
@media (min-width: 768px) {
|
.menu-section hr {
|
width: 120%;
|
left: -10%;
|
top: 4.25rem;
|
}
|
|
.menu_item section {
|
max-width: var(--maxWidth);
|
}
|
|
/*details.menu-item summary.row {*/
|
/* flex-direction: var(--dir);*/
|
/* align-items: var(--justify);*/
|
/*}*/
|
}
|
/**
|
TODO: For Legacy
|
Triangles Loader
|
|
.loading-wrapper {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 2rem 1rem 1rem;
|
}
|
.loader-wrap {
|
height: 75px;
|
width: 75px;
|
}
|
.new-term-toggle:disabled + .loader,
|
.loading .loader {
|
width: 50px;
|
aspect-ratio: 1.154;
|
display: grid;
|
color: var(--action-0);
|
background:
|
linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,
|
linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,
|
linear-gradient(currentColor 0 0) bottom/100% 2px;
|
background-repeat: no-repeat;
|
transform-origin: 50% 66%;
|
animation: l5 4s infinite linear;
|
}
|
.new-term-toggle:disabled + .loader::before,
|
.new-term-toggle:disabled + .loader::after,
|
.loading .loader::before,
|
.loading .loader::after {
|
content: "";
|
grid-area: 1/1;
|
background: inherit;
|
transform-origin: inherit;
|
animation: inherit;
|
}
|
.new-term-toggle:disabled + .loader::after,
|
.loading .loader::after {
|
animation-duration: 2s;
|
}
|
@keyframes l5{
|
100% {transform:rotate(1turn)}
|
}
|
*/
|
|
/* DONE TO HERE */
|
|
|
|
/*dialog .search-wrapper {*/
|
/* padding: .5rem;*/
|
/*}*/
|
|
|
/*.favourite-terms ul {*/
|
/* gap: .25rem 1rem;*/
|
/* padding: 0;*/
|
/*}*/
|
/* .favourite-terms label::before,*/
|
/* .favourite-terms label::after {*/
|
/* display: none;*/
|
/* }*/
|
/* .favourite-terms label {*/
|
/* padding: .25rem .5rem!important;*/
|
/* border: 1px solid var(--base-200);*/
|
/* color: var(--contrast-200);*/
|
/* border-radius: var(--innerRadius);*/
|
/* }*/
|
/* .favourite-terms :checked + label,*/
|
/* .favourite-terms label:hover {*/
|
/* border-color: var(--action-0);*/
|
/* color: var(--action-0);*/
|
/* }*/
|
/*.items-container {*/
|
/* padding: 0;*/
|
/*}*/
|
/* .items-container li .children {*/
|
/* width: 100%;*/
|
/* padding-left: 1rem;*/
|
/* }*/
|
/*.path button+button::before {*/
|
/* content: ' > ';*/
|
/* display: inline-block;*/
|
/* margin: 0 .5rem;*/
|
/*}*/
|
/*!** Forms **!*/
|
|
|
/*!*.field.time_open,*!*/
|
/*!*.field.time_closes,*!*/
|
/*!*.field.date_start,*!*/
|
/*!*.field.time_start,*!*/
|
/*!*.field.time_end {*!*/
|
/*!* margin-bottom: 0;*!*/
|
/*!*}*!*/
|
|
/*!*.field.time_open,*!*/
|
/*!*.field.time_closes,*!*/
|
/*!*.field.time_start,*!*/
|
/*!*.field.time_end {*!*/
|
/*!* width: 49%;*!*/
|
/*!* display: inline-block;*!*/
|
/*!* margin-top: 1rem;*!*/
|
/*!*}*!*/
|
|
/*[data-h] {*/
|
/* border: 0;*/
|
/* clip: rect(1px, 1px, 1px, 1px);*/
|
/* clip-path: inset(50%);*/
|
/* height: 1px;*/
|
/* margin: -1px;*/
|
/* overflow: hidden;*/
|
/* padding: 0;*/
|
/* position: absolute !important;*/
|
/* width: 1px;*/
|
/* word-wrap: normal !important;*/
|
/*}*/
|
|
/*.checkbox-options {*/
|
/* --gap: .5rem 2rem;*/
|
/*}*/
|
/*.checkbox-options label {*/
|
/* flex: unset!important;*/
|
/*}*/
|
|
/*.radio-options {*/
|
/* --gap: .125rem .5rem;*/
|
/*}*/
|
|
/*.radio-options input:not(.ch) + label::before {*/
|
/* display: none!important;*/
|
/*}*/
|
/*.radio-options input:not(.ch) + label {*/
|
/* flex: unset!important;*/
|
/* padding: .25rem!important;*/
|
/* border-radius: 4px;*/
|
/* border: 1px solid var(--base-100);*/
|
/* color: var(--contrast-200);*/
|
/* transition: var(--transition-color)!important;*/
|
/* font-weight: normal;*/
|
/* !*width: 40%;*!*/
|
/* text-align: center;*/
|
/*}*/
|
/*.radio-options input:not(.ch) + label:hover,*/
|
/*.radio-options input:not(.ch):checked + label {*/
|
/* border-color: var(--action-0);*/
|
/* color: var(--action-0);*/
|
/* transition: var(--transition-color);*/
|
/*}*/
|
|
|
|
/*!* Style for disabled state *!*/
|
|
|
|
/*.date-range {*/
|
/* padding: 2rem;*/
|
/* border: none;*/
|
/* border-radius: var(--innerRadius);*/
|
/* background: var(--base);*/
|
/* box-shadow: var(--shadow);*/
|
/*}*/
|
/*.date-range::backdrop {*/
|
/* backdrop-filter: blur(5px);*/
|
/* background: var(--overlay-medium);*/
|
/*}*/
|
|
/*.custom-range,*/
|
/*.month-picker {*/
|
/* --gap: 1rem;*/
|
/* margin-bottom: 1rem;*/
|
/*}*/
|
/*.custom-range input,*/
|
/*.month-picker select {*/
|
/* padding: .5rem;*/
|
/* border: 1px solid var(--base-100);*/
|
/* border-radius: var(--innerRadius);*/
|
/* background: var(--base-200);*/
|
/* color: var(--contrast);*/
|
/* font: inherit;*/
|
/*}*/
|
/*.custom-range input:focus,*/
|
/*.month-picker select:focus {*/
|
/* outline: none;*/
|
/* border-color: var(--action-0);*/
|
/*}*/
|
/*!** Shop Page **!*/
|
/*.shop header {*/
|
/* max-width: var(--full);*/
|
/*}*/
|
/*.shop header img {*/
|
/* width: 100%;*/
|
/* height: auto;*/
|
/*}*/
|
/*.shop header h1 {*/
|
/* margin-bottom: .5em;*/
|
/*}*/
|
/*.ratings {*/
|
/* margin: 0;*/
|
/*}*/
|
/*!** Bio Sections **!*/
|
/*.bio-info {*/
|
/* max-width: var(--alignWide);*/
|
/* padding: .25em;*/
|
/* border-radius: var(--outerRadius);*/
|
/* font-size: var(--medium);*/
|
/* line-height: 1.5;*/
|
/*}*/
|
/*.bio-info section {*/
|
/* margin: 4rem 0;*/
|
/*}*/
|
/*.shop .column,*/
|
/*.bio-info .column {*/
|
/* --justify: center;*/
|
/*}*/
|
/*.bio-info[open] {*/
|
/* background-color: var(--base-100);*/
|
/*}*/
|
/*.bio-info summary {*/
|
/* padding: .25rem;*/
|
/* position: relative;*/
|
/* border-radius: var(--innerRadius);*/
|
/*}*/
|
/*.bio-info[open] summary {*/
|
/* background-color: var(--base-50);*/
|
/* margin-bottom: 1rem;*/
|
/*}*/
|
/*.bio-info > div:not(.columns) {*/
|
/* margin: 4rem 0;*/
|
/* padding: 0 1rem;*/
|
/*}*/
|
/*.bio-info h2 {*/
|
/* margin: 0!important;*/
|
/* font-size: var(--medium);*/
|
/* font-family: var(--body);*/
|
/* font-weight: var(--bWeight);*/
|
/*}*/
|
|
/*.bio-info h3 {*/
|
/* margin: 1em 0!important;*/
|
/* font-size: var(--medium);*/
|
/*}*/
|
/*.bio-info figure {*/
|
/* margin: 0;*/
|
/* padding: 0;*/
|
/*}*/
|
/*.bio-info img {*/
|
/* width: 100%;*/
|
/* height: auto;*/
|
/* aspect-ratio: 5/4;*/
|
/* object-fit: cover;*/
|
/*}*/
|
|
/* #contact {*/
|
/* max-width: var(--alignWide);*/
|
/* }*/
|
/* #contact h2,*/
|
/* section.inline h2 {*/
|
/* font-size: var(--medium);*/
|
/* font-weight: var(--bWeight);*/
|
/* margin: 0 0 .5em 0!important;*/
|
/* white-space: nowrap;*/
|
/* }*/
|
/*ul.contact {*/
|
/* list-style: none;*/
|
/* display: inline-flex;*/
|
/* justify-content: flex-start;*/
|
/* flex-wrap: wrap;*/
|
/* align-items: center;*/
|
/* gap: 1rem;*/
|
/* margin: 0;*/
|
/* padding: 0;*/
|
/*}*/
|
/* ul.contact + ul.contact {*/
|
/* margin-left: 1rem;*/
|
/* }*/
|
/* ul.contact a{*/
|
/* color: var(--contrast);*/
|
/* }*/
|
/* ul.contact a:hover {*/
|
/* color: var(--action-0);*/
|
/* }*/
|
|
/*.term-list {*/
|
/* display: inline-flex;*/
|
/* flex-wrap: wrap;*/
|
/* list-style: none;*/
|
/* text-transform: lowercase;*/
|
/* margin: 0;*/
|
/* padding: 0;*/
|
/* gap: 0 .5em;*/
|
/*}*/
|
/*p.loading {*/
|
/* text-align: center;*/
|
/* margin: 3rem 0;*/
|
/*}*/
|
/*
|
/*.term-list li {*/
|
/* padding: 2px 6px;*/
|
/*}*/
|
|
/*ul.simple-list {*/
|
/* margin: 0;*/
|
/* padding: 0;*/
|
/* list-style: none;*/
|
/*}*/
|
/*ul.reviews li + li{*/
|
/* margin-top: 2rem;*/
|
/*}*/
|
|
|
|
/*!*!* Status notification *!*/
|
/*!*.status-notification {*!*/
|
/*!* position: fixed;*!*/
|
/*!* bottom: 20px;*!*/
|
/*!* left: 80px; !* Position to the right of the panel *!*!*/
|
/*!* width: 300px;*!*/
|
/*!* max-width: calc(100vw - 100px);*!*/
|
/*!* border-radius: 8px;*!*/
|
/*!* padding: 15px;*!*/
|
/*!* background: #323232;*!*/
|
/*!* color: white;*!*/
|
/*!* transform: translateY(20px);*!*/
|
/*!* opacity: 0;*!*/
|
/*!* transition: transform .3s, opacity .3s;*!*/
|
/*!* z-index: 10000;*!*/
|
/*!* box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*/
|
/*!* pointer-events: none;*!*/
|
/*!*}*!*/
|
|
/*!*.status-notification.active {*!*/
|
/*!* transform: translateY(0);*!*/
|
/*!* opacity: 1;*!*/
|
/*!* pointer-events: auto;*!*/
|
/*!*}*!*/
|
|
/*!*.status-notification .title {*!*/
|
/*!* font-weight: 600;*!*/
|
/*!* margin-bottom: 5px;*!*/
|
/*!* font-size: 15px;*!*/
|
/*!*}*!*/
|
|
/*!*.status-notification .message {*!*/
|
/*!* margin-bottom: 10px;*!*/
|
/*!* font-size: 14px;*!*/
|
/*!*}*!*/
|
|
/*!*.status-notification .actions {*!*/
|
/*!* display: flex;*!*/
|
/*!* justify-content: flex-end;*!*/
|
/*!*}*!*/
|
|
/*!*.status-notification .actions button {*!*/
|
/*!* padding: 6px 12px;*!*/
|
/*!* background: rgba(255, 255, 255, .2);*!*/
|
/*!* border: none;*!*/
|
/*!* border-radius: 4px;*!*/
|
/*!* color: white;*!*/
|
/*!* cursor: pointer;*!*/
|
/*!* font-size: 13px;*!*/
|
/*!* transition: background .2s;*!*/
|
/*!*}*!*/
|
|
/*!*.status-notification .actions button:hover {*!*/
|
/*!* background: rgba(255, 255, 255, .3);*!*/
|
/*!*}*!*/
|
|
/*!* Progress containers in notifications *!*/
|
/*.progress-container {*/
|
/* margin-top: 15px;*/
|
/* background: rgba(255, 255, 255, .1);*/
|
/* border-radius: 4px;*/
|
/* padding: 10px;*/
|
/* transition: all .3s;*/
|
/*}*/
|
|
/*.progress-container.complete {*/
|
/* opacity: .5;*/
|
/*}*/
|
|
/*!* Collapsed state - just show the toggle button *!*/
|
|
|
|
|
|
|
|
/*!***/
|
/*Response stuff*/
|
/* *!*/
|
|
/*.columns {*/
|
/* --wrap: nowrap;*/
|
/*}*/
|
/* .columns.stack-small {*/
|
/* --wrap: wrap;*/
|
/* }*/
|
/* @media (min-width: 768px){*/
|
/* .columns.stack-small {*/
|
/* --wrap: nowrap;*/
|
/* }*/
|
/* }*/
|
/*.column {*/
|
/* width: 100%;*/
|
/* padding: 1rem 0;*/
|
/*}*/
|
|
/*.width-300 {*/
|
/* width: 300px!important;*/
|
/* height: auto!important;*/
|
/*}*/
|
|
|
|
|
/*.font-small {*/
|
/* font-size: var(--small);*/
|
/*}*/
|
|
/*!***/
|
/*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);
|
cursor: pointer;
|
transition: border-color .2s ease;
|
}
|
|
.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 */
|
.time-wrapper svg,
|
.datetime-wrapper svg,
|
.date-wrapper svg {
|
width: 18px;
|
height: 18px;
|
color: #666;
|
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;*/
|
/* }*/
|
/*}*/
|
