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