/* ============================================ */
/* SANITIZE.CSS */
/* ============================================ */
/* Document
* ========================================================================== */
/**
* 1. Add border box sizing in all browsers (opinionated).
* 2. Backgrounds do not repeat by default (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
background-repeat: no-repeat; /* 2 */
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*/
::before,
::after {
text-decoration: inherit; /* 1 */
vertical-align: inherit; /* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Change the line height in all browsers (opinionated).
* 3. Breaks words to prevent overflow in all browsers (opinionated).
* 4. Use a 4-space tab width in all browsers (opinionated).
* 5. Remove the grey highlight on links in iOS (opinionated).
* 6. Prevent adjustments of font size after orientation changes in iOS.
*/
:where(:root) {
cursor: default; /* 1 */
line-height: 1.5; /* 2 */
overflow-wrap: break-word; /* 3 */
-moz-tab-size: 4; /* 4 */
tab-size: 4; /* 4 */
-webkit-tap-highlight-color: transparent; /* 5 */
-webkit-text-size-adjust: 100%; /* 6 */
}
/* Sections
* ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
:where(body) {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Edge, Firefox, and Safari.
*/
:where(h1) {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* Remove the margin on nested lists in Chrome, Edge, and Safari.
*/
/**
* 1. Correct the inheritance of border color in Firefox.
* 2. Add the correct box sizing in Firefox.
*/
:where(hr) {
color: inherit; /* 1 */
height: 0; /* 2 */
}
/**
* Remove the list style on navigation lists in all browsers (opinionated).
*/
/**
* Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
*/
:where(nav li)::before {
content: "\200B";
float: left;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
* 3. Prevent overflow of the container in all browsers (opinionated).
*/
/* Text-level semantics
* ========================================================================== */
/**
* Add the correct text decoration in Safari.
*/
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
:where(b, strong) {
font-weight: 500;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
/**
* Add the correct font size in all browsers.
*/
:where(small) {
font-size: 80%;
}
/* Embedded content
* ========================================================================== */
/*
* Change the alignment on media elements in all browsers (opinionated).
*/
:where( canvas, iframe, img, svg, video) {
vertical-align: middle;
}
/**
* Remove the border on iframes in all browsers (opinionated).
*/
:where(iframe) {
border-style: none;
}
/**
* Change the fill color to match the text color in all browsers (opinionated).
*/
:where(svg:not([fill])) {
fill: currentColor;
}
/* Tabular data
* ========================================================================== */
/**
* 1. Collapse border spacing in all browsers (opinionated).
* 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
* 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
*/
:where(table) {
border-collapse: collapse; /* 1 */
border-color: inherit; /* 2 */
text-indent: 0; /* 3 */
}
/* Forms
* ========================================================================== */
/**
* Remove the margin on controls in Safari.
*/
:where(button, input, select) {
margin: 0;
}
/**
* Correct the inability to style buttons in iOS and Safari.
*/
:where(button, [type="button" i], [type="reset" i]) {
-webkit-appearance: button;
}
/**
* Change the inconsistent appearance in all browsers (opinionated).
*/
/**
* Add the correct vertical alignment in Chrome, Edge, and Firefox.
*/
:where(progress) {
vertical-align: baseline;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 3. Change the resize direction in all browsers (opinionated).
*/
:where(textarea) {
margin: 0; /* 1 */
resize: vertical; /* 3 */
}
/**
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
:where([type="search" i]) {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
* ========================================================================== */
/*
* Add the correct styles in Safari.
*/
:where(dialog) {
background-color: white;
border: solid;
color: black;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
:where(dialog:not([open])) {
display: none;
}
/*
* Add the correct display in Safari.
*/
/* Accessibility
* ========================================================================== */
/**
* Change the cursor on busy elements in all browsers (opinionated).
*/
/*
* Change the cursor on control elements in all browsers (opinionated).
*/
:where([aria-controls]) {
cursor: pointer;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers (opinionated).
*/
:where([aria-disabled="true" i], [disabled]) {
cursor: not-allowed;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers (opinionated).
*/
/* ============================================ */
/* SANITIZE.CSS */
/* ============================================ */
/* ============================================ */
/* forms.CSS */
/* ============================================ */
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
:where(button, input, select, textarea) {
background-color: transparent; /* 1 */
border: 1px solid WindowFrame; /* 1 */
color: inherit; /* 1 */
font: inherit; /* 2 */
letter-spacing: inherit; /* 2 */
padding: 0.25em 0.375em; /* 1 */
}
/**
* Change the inconsistent appearance in all browsers (opinionated).
*/
:where(select) {
appearance: none;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
border-radius: 0;
padding-right: 1em;
}
/**
* Don't show the arrow for multiple choice selects
*/
:where(select[multiple]) {
background-image: none;
}
/**
* Remove the border and padding in all browsers (opinionated).
*/
:where([type="color" i], [type="range" i]) {
border-width: 0;
padding: 0;
}
/* ============================================ */
/* forms.CSS */
/* ============================================ */
/* ============================================ */
/* BASIC ELEMENTS */
/* ============================================ */
@font-face {
font-family: Content;
src: url('../../assets/fonts/Inter.woff2');
}
:root {
--clr-0: hsl(0, 0%, 0%);
--clr-1: hsl(198, 10%, 15%);
--clr-2: hsl(198, 10%, 20%);
--clr-3: hsl(198, 10%, 25%);
--clr-text-low: hsl(198, 10%, 70%);
--clr-text-medium: hsl(198, 10%, 85%);
--clr-text-high: hsl(198, 10%, 90%);
--clr-characteristic-relevance: hsl(0, 50%, 30%);
--clr-edit-characteristic-relevance-medium: hsl(0, 50%, 15%);
--clr-characteristic-quantity-quality: hsl(60, 50%, 30%);
--clr-characteristic-factor: hsl(112, 50%, 30%);
--clr-calculated-characteristic-factor: hsl(196, 50%, 30%);
--clr-item-aspect-total: hsl(237, 50%, 30%);
--clr-transparent-accent: hsla(200, 100%, 45%, 0.5);
--clr-transparent-red: hsla(330, 72%, 40%, 0.4);
--clr-transparent-yellow: hsla(44.9, 100%, 45.1%, 0.25);
--clr-transparent-accent-light: hsla(200, 100%, 45%, 0.2);
--clr-transparent-red-light: hsla(330, 72%, 40%, 0.25);
--clr-2-icon: invert(16%) sepia(9%) saturate(812%) hue-rotate(153deg) brightness(94%) contrast(85%);
--backdrop-filter-blur: hsla(198, 10%, 0%, .7);
--backdrop-filter-blur1: hsla(198, 10%, 15%, .8);
--clr-accent: hsl(200, 100%, 45%);
--clr-red: hsl(330, 72%, 45%);
--clr-yellow: hsl(45, 100%, 45%);
--clr-accent-2: hsl(200, 100%, 40%);
--clr-accent-icon: invert(61%) sepia(64%) saturate(5722%) hue-rotate(172deg) brightness(95%) contrast(101%);
--clr-red-icon: invert(15%) sepia(98%) saturate(3030%) hue-rotate(315deg) brightness(98%) contrast(88%);
--clr-yellow-icon: invert(80%) sepia(35%) saturate(7051%) hue-rotate(10deg) brightness(102%) contrast(101%);
--clr-table-icon: invert(1);
--clr-table-icon-reversed: invert(0);
--clr-opacity: 1;
--clr-title-blur-opacity: 1;
--clr-light-bg-in-dark-mode: hsla(198, 10%, 96%, .8);
--clr-dark-bg-in-light-mode: hsla(198, 10%, 15%, 0);
font-family: Content;
background-color: var(--clr-0);
color: var(--clr-text-high);
fill: var(--clr-text-low);
scroll-behavior: smooth;
scroll-padding-top: 117px;
overflow: visible;
cursor: unset;
}
[data-theme="light"] {
--clr-0: hsl(0, 0%, 100%);
--clr-1: hsl(198, 10%, 95%);
--clr-2: hsl(198, 10%, 90%);
--clr-3: hsl(198, 10%, 85%);
--clr-text-low: hsl(198, 10%, 60%);
--clr-text-medium: hsl(198, 10%, 30%);
--clr-text-high: hsl(198, 10%, 15%);
--clr-characteristic-relevance: hsl(0, 80.4%, 90%);
--clr-edit-characteristic-relevance-medium: hsl(0, 50%, 95%);
--clr-characteristic-quantity-quality: hsl(54, 80%, 90%);
--clr-characteristic-factor: hsl(100, 80%, 90%);
--clr-calculated-characteristic-factor: hsl(196, 80%, 90%);
--clr-item-aspect-total: hsl(237, 80%, 90%);
--clr-transparent-accent: hsla(200, 100%, 45%, 0.3);
--clr-transparent-red: hsla(330, 72%, 50%, 0.1);
--clr-transparent-yellow: hsla(44.9, 100%, 45.1%, 0.2);
--clr-transparent-accent-light: hsla(200, 100%, 45%, 0.1);
--clr-transparent-red-light: hsla(330, 72%, 50%, 0.05);
--clr-2-icon: invert(78%) sepia(42%) saturate(14%) hue-rotate(145deg) brightness(108%) contrast(96%);
--backdrop-filter-blur: hsla(198, 10%, 100%, .8);
--backdrop-filter-blur1: hsla(198, 10%, 96%, .8);
--clr-light-bg-in-dark-mode: hsla(198, 10%, 96%, 0);
--clr-dark-bg-in-light-mode: hsla(198, 10%, 15%, .8);
background-color: var(--clr-0);
color: var(--clr-text-high);
fill: var(--clr-text-low);
--clr-table-icon: invert(0);
--clr-table-icon-reversed: invert(1);
--clr-opacity: .5;
--clr-title-blur-opacity: .7;
font-family: Content;
scroll-behavior: smooth;
scroll-padding-top: 117px;
overflow: visible;
}
body {
min-height: 100vh;
margin: 0 0 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
font-size: clamp(.9rem, 1vw, 1.1rem);
justify-content: start;
text-align: center;
font-weight: 325;
background-color: var(--clr-0);
}
header {
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 3;
width: 100%;
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
background-color: var(--backdrop-filter-blur);
height: 50px;
align-items: center;
color: var(--clr-text-high);
border-bottom: 2px dashed var(--clr-2);
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
width: 100%;
}
section {
line-height: 1.5rem;
width: 100%;
padding: clamp(1rem, 5vw, 3rem) 1rem;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
}
h1 {
font-size: clamp(1.7rem, 2.5vw, 2rem);
margin: clamp(1rem, 3vw, 2rem) 0 clamp(.5rem, 3vw, 1rem);
line-height: 1.2em;
font-weight: 900;
}
h2 {
font-size: clamp(1.6rem, 2.1vw, 1.8rem);
margin: clamp(1rem, 3vw, 2rem) 0 clamp(.5rem, 3vw, 1rem);
line-height: clamp(3em, 1vw, 4em);
font-weight: 500;
position: relative;
width: fit-content;
}
h3 {
font-size: clamp(1.5rem, 1.8vw, 1.7rem);
margin: clamp(0.8rem, 2vw, 2rem) 0 clamp(.4rem, 2vw, 1rem);
line-height: clamp(1.5em, 2vw, 4em);
font-weight: 500;
position: relative;
}
h4 {
font-size: clamp(1.4rem, 1.4vw, 1.6rem);
margin: clamp(0.8rem, 2vw, 2rem) 0 clamp(.4rem, 2vw, 1rem);
line-height: clamp(1.5em, 1vw, 4em);
font-weight: 500;
position: relative;
}
h5 {
font-size: clamp(1.3rem, 1.1vw, 1.5rem);
margin: clamp(0.4rem, 2vw, 2rem) 0 clamp(.2rem, 2vw, 1rem);
line-height: clamp(1.5em, 1vw, 4em);
font-weight: 500;
position: relative;
}
h6 {
font-size: clamp(1.2rem, 1vw, 1.4rem);
margin: clamp(0.1rem, 1vw, 0.3rem) 0;
line-height: clamp(1.5em, 1vw, 2.1em);
font-weight: 500;
position: relative;
}
blockquote {
border-left: 0.3em solid var(--clr-2);
padding-left: 1.5rem;
margin-left: 1.5rem;
}
hr {
width: 70%;
color: var(--clr-1);
opacity: 0.5;
}
button {
border-radius: 100vmax;
padding: clamp(0.4rem, 1vw, 0.6rem) clamp(1.3rem, 1vw, 1.3rem) clamp(0.5rem, 1vw, 0.6rem) clamp(1.3rem, 1vw, 1.3rem);
background-color: var(--clr-1);
border: none;
color: var(--clr-text-low);
cursor: pointer;
/* font-size: clamp(.6rem, 1vw, .8rem); */
font-weight: normal;
justify-content: center;
width: fit-content;
transition: none;
}
button:hover, .button:hover, button.active {
background-color: var(--clr-2);
}
button a svg {
height: 1.25rem;
width: 1.25rem;
margin-left: 0.5rem;
margin-right: -0.25rem;
}
button a, .logo {
background-image: none;
}
input[type="text"], input[type="password"] {
border: 2px solid var(--clr-2);
background-color: var(--clr-0);
border-radius: .5rem;
color: var(--clr-text-high);
padding: 7px 16px 5px !important;
font-size: .9rem;
margin: 1rem auto;
width: -moz-available;
width: -webkit-fill-available;
max-width: 700px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
min-height: 41px;
text-align: left;
}
input[type="text"]::placeholder, input[type="password"]::placeholder {
color: var(--clr-text-low);
text-align: center;
}
/*input[type="text"]:focus-visible, input[type="password"]:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible, */
*:focus-visible {
outline: 0.2em solid var(--clr-transparent-accent);
}
a:focus-visible {
border-radius: 0.3rem;
}
a:hover {
background-size: 0 100%;
}
a {
background-image: linear-gradient(0deg,currentColor,currentColor min(2px,0.2rem),transparent min(2px,.1em),transparent);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
text-decoration: none;
transition: background-size .2s,color .2s;
color: var(--clr-accent);
font-weight: 500;
}
.menu li a, #menu-secondary li a, .gallery a, .sideBarContent a {
background-image: none;
font-weight: normal;
}
.medium-space {
height: 50px;
}
.small-space {
height: 25px;
}
.logo {
height: 100%;
display: flex;
justify-content: center;
}
.logo svg {
height: auto;
width: 140px;
}
.logo svg:hover > g g path[aria-label="p"], .logo svg:hover > g g path[aria-label="a"]:nth-child(5), .logo svg:hover > g g path[aria-label="i"]:nth-child(4), .logo svg:hover > g g path[aria-label="r"] {
fill: var(--clr-accent) !important;
transition: fill 10s;
}
/*.logo svg g g path[aria-label="p"], .logo svg g g path[aria-label="a"]:nth-child(5), .logo svg g g path[aria-label="i"]:nth-child(4), .logo svg g g path[aria-label="r"] {*/
/* transition: fill 10s;*/
/*}*/
/*[aria-label="o"], [aria-label="m"], [aria-label="p"], [aria-label="a"], [aria-label="i"], [aria-label="r"] {*/
/* fill: var(--clr-text-high);*/
/*}*/
.logo img {
width: 140px;
}
.inline-highlight {
background-color: var(--clr-1);
padding: 0 0.4em;
border-radius: 0.3em;
color: var(--clr-text-medium);
}
.page h1, .page-header h1 {
font-size: clamp(2.9rem, 2.5vw, 3.75rem);
z-index: 1;
}
.page main section h1 {
/*-webkit-text-stroke: .2em var(--clr-transparent-accent);*/
/*text-shadow: 0 0.1em var(--clr-transparent-accent);*/
color: var(--clr-text-high);
}
.page-header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: auto auto 100px;
margin-bottom: 0;
padding-bottom: 0;
flex-flow: column;
padding: clamp(5em, 1vw, 7em) clamp(1em, 1vw, 7em);
border-bottom: clamp(2px, 0.7vw, 3px) dashed var(--clr-2);
}
.page-header h1 {
margin: 0;
/*width: 100vw;*/
}
.auto-page-title-size {
font-size: clamp(2.5rem, 4vw, 4.4rem);
transition: font-size 0.3s ease;
width: 100%; /* Adjust as needed */
}
.gradient-title {
animation: 3s ease-out 0s 1 cTitleAnimation;
}
/*@keyframes slideInFromLeft {*/
/* 0% {*/
/* -moz-background-size: 0%;*/
/* background-size: 0%;*/
/* }*/
/* 100% {*/
/*background-position: 0% 50%, 130% 50%;*/
/*background-position: 50% 50%;*/
/* -moz-background-size: 400%;*/
/* background-size: 400%;*/
/* }*/
/*}*/
.page-header-compared {
text-align: left;
margin: 0;
width: fit-content;
color: var(--clr-text-low);
display: flex;
justify-content: center;
align-items: center;
padding: 0.2em 1em;
border-radius: 0.5em;
border: 1px solid var(--clr-2);
backdrop-filter: blur(10px);
font-weight: 400;
font-size: clamp(0.7rem, 1vw, 0.8rem);
}
.comparison-card-header img {
position: absolute;
filter: var(--clr-2-icon);
z-index: 0;
width: 100%;
height: 100%;
max-width: 700px;
opacity: 0.5;
display: none;
}
.page-header .separator {
position: absolute;
bottom: clamp(-51px, 1vw, -120px);
height: clamp(51px, 1vw, 120px);
transform: rotateY(180deg);
}
/*.page .page-header, .page-header, .post-type-archive-c .page-header, .archive.tag .page-header, .single-blog .page-header {*/
/* background-color: var(--clr-1);*/
/*}*/
.page-header {
/*padding: 7em 0 clamp(4em, 19vw, 31em) 0;*/
}
.page-header svg {
position: absolute;
bottom: 0;
width: 100vw;
transform: translateY(clamp(0rem, 5vw, 1rem));
}
/* ============================================ */
/* TOPBAR */
/* ============================================ */
/* .theme-switch-label::after {
content: "\263C";
transform: rotate(20deg);
display: inline-flex;
color: var(--clr-text-low);
} */
.theme-switch-label .icon-sun {
opacity: 1;
}
.theme-switch-label .icon-moon {
opacity: 0;
}
.theme-switch-label svg {
position: absolute;
}
.checkbox-theme:checked + .theme-switch-label .icon-moon {
/* content: "\263E"; */
opacity: 1;
}
.checkbox-theme:checked + .theme-switch-label .icon-sun {
/* content: "\263E"; */
opacity: 0;
}
.theme-switch-label {
height: 45px;
width: 45px;
display: flex;
border-radius: 100vmax;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 1.5rem;
margin: 7px 11px;
}
.theme-switch-label:hover {
background-color: var(--clr-1);
}
.checkbox-theme {
display: none;
}
.menu-background, .legend-background {
background-color: hsla(0, 0%, 0%, .20);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
z-index: 10;
opacity: 0;
visibility: hidden;
transition: visibility 250ms, opacity 250ms;
}
.open-menu-popup:hover {
background-color: var(--clr-1);
}
.open-menu-popup {
padding: 11px;
cursor: pointer;
display: flex;
border-radius: 100vmax;
justify-content: center;
align-items: center;
margin: 7px;
cursor: pointer;
}
.menu-wrapper, .sideBar, .legend-wrapper {
position: fixed;
background-color: var(--clr-0);
display: flex !important;
left: 0;
top: 0;
bottom: 0;
right: 0;
justify-content: center;
align-items: center;
z-index: 10;
/*display: none;*/
/* opacity: 0;
visibility: hidden; */
transition: visibility 250ms, opacity 250ms, transform 250ms;
flex-direction: column;
width: 320px;
transform: translateX(-330px);
border-right: 1px solid var(--clr-1);
}
.show-menu-background, .show-legend-background {
/*display:flex;*/
opacity: 1;
visibility: visible;
}
.show-menu, .show-legend {
transform: translateX(0px);
opacity: 1;
visibility: visible;
}
.legend-wrapper {
justify-content: flex-start;
align-items: flex-start;
}
.legend-wrapper .close-menu-popup, .sideBar .close-menu-popup {
background: var(--clr-0);
width: 100%;
border-bottom: 1px solid var(--clr-1);
z-index: 2;
}
.legend-items {
padding: 2rem 1rem 1rem;
width: 100%;
text-align: left;
font-size: .9rem;
overflow-y: auto;
}
.legend-item {
display: flex;
flex-direction: row;
align-items: center;
margin: .5rem auto;
}
.legend-element {
margin-right: .5rem;
display: flex;
font-size: 0.7rem;
color: var(--clr-text-low);
}
.legend-element span {
display: flex;
align-items: center;
}
.legend-element .formula {
position: relative;
padding: clamp(6px, 1vw, 8px) clamp(4px, 1vw, 7px) clamp(7px, 1vw, 8px) clamp(0px, 1vw, 6px);
display: flex !important;
}
.legend-more-info {
display: flex;
color: var(--clr-text-low);
background: var(--clr-1);
border-radius: 100px;
font-size: 0.7rem;
font-weight: 500;
text-transform: lowercase;
height: 0;
width: 0;
justify-content: center;
align-items: center;
padding: 7px 8px 7px 8px;
text-indent: initial;
user-select: none;
}
.legend-description {
margin-left: .5rem;
}
.legend-element .characteristic-quantity, .legend-element .characteristic-quality, .legend-element .characteristic-relevance, .legend-element .normalization-value, .legend-element .characteristic-factor, .legend-element .calculated-characteristic-factor, .legend-element .item-aspect-total, .legend-element .calculated-factor {
position: relative;
display: flex !important;
color: var(--clr-text-high);
}
.legend-element .characteristic-relevance {
height: 0;
padding: 8px 5px 10px;
}
.legend-element .normalization-value {
height: 0;
padding: 7px 5px 9px;
}
.legend-element .calculated-characteristic-factor, .legend-element .item-aspect-total, .legend-element .calculated-factor {
height: 0;
padding: 1em 5px;
margin: 0 2px 0 0;
}
.legend-element .item-aspect-total {
font-weight: 500;
}
.legend-items .direction {
font-size: .8rem;
border: 1px dashed var(--clr-3);
padding: 0.2em .5em;
border-radius: .5em;
color: var(--clr-text-low);
}
.legend-items .separator {
border-top: 1px solid var(--clr-3);
padding-bottom: 0.5rem;
width: 80%;
margin: 2rem auto auto auto;
}
.close-menu-popup {
position: fixed;
top: 0;
left: 0;
cursor: pointer;
color: var(--clr-red);
display: flex;
justify-content: center;
align-items: center;
padding: 11px 15px 15px 15px;
width: 100%;
border-bottom: 1px dashed var(--clr-2);
}
.main-menu {
margin-top: auto;
}
.sub-menu-wrapper {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow-y: auto;
padding: 10px;
}
.sub-menu-wrapper nav:nth-child(2) {
margin-top: auto;
}
.sub-menu-wrapper nav:nth-child(4) {
margin-top: auto;
}
.sub-menu-wrapper .copyright {
color: var(--clr-text-low);
font-size: 0.9rem;
border-top: 1px solid var(--clr-2);
padding-top: 0.9rem;
width: 100%;
}
.search {
margin: 50px auto;
text-align: center;
/* width: 230px !important; */
}
.menu {
flex-direction: column;
text-align: center;
}
#menu-main li a {
padding: 10px 30px;
border-radius: 100vmax;
background-color: var(--clr-transparent-accent-light);
width: fit-content;
display: flex;
align-items: center;
color: var(--clr-accent);
outline: 1px solid var(--clr-accent);
}
#menu-main li a:hover {
outline: 2px solid var(--clr-accent);
}
.menu li a svg {
margin-right: .5rem;
}
.comparisons-menu {
font-size: 1.5rem;
margin-bottom: 35px;
color: var(--clr-text-low);
/* font-weight: 500; */
}
.menu,
#menu-secondary {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.menu li a,
#menu-secondary li a {
text-decoration-line: none;
}
#menu-secondary {
display: flex;
margin: 10px auto;
flex-wrap: wrap;
flex-direction: row;
}
#menu-secondary li {
margin: 8px;
}
#menu-secondary li a {
color: var(--clr-text-low);
font-size: .9rem;
padding: 5px;
}
#menu-secondary li a:hover {
color: var(--clr-text-medium);
}
.menu li a, #menu-secondary li a, .gallery a, .sideBarContent a {
background-image: none;
font-weight: normal;
}
/* ============================================ */
/* TOPBAR */
/* ============================================ */
/* ============================================ */
/* LOGIN PAGE */
/* ============================================ */
/*Checkbox*/
/*#rememberme + label:hover {*/
/* background-color: var(--clr-2);*/
/*}*/
#nav a {
font-size: 0.9rem;
font-weight: normal;
color: var(--clr-text-low);
}
#nav {
grid-row-start: 5;
grid-column-start: 1;
grid-row-end: 5;
grid-column-end: 2;
justify-self: left;
}
/* ============================================ */
/* LOGIN PAGE */
/* ============================================ */
/* ============================================ */
/* PAGE HEADER */
/* ============================================ */
.last-updated {
color: var(--clr-text-low);
font-size: clamp(0.7rem, 1vw, 0.8rem);
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
backdrop-filter: blur(10px);
/*border-top: 1px solid var(--clr-2);*/
}
.last-updated-value {
font-size: clamp(0.8rem, 1vw, 0.9rem);
margin-left: .5rem;
font-weight: normal;
}
.single-intro {
margin: clamp(3rem, 3vw, 5rem) clamp(0.5rem, 1vw, 2rem);
max-width: 700px;
text-align: justify;
padding: 1rem;
}
.single-intro h1, .single-intro blockquote {
font-size: 0;
/*color: var(--clr-text-low) !important;*/
/*font-weight: 100;*/
display: none;
}
/* ============================================ */
/* PAGE HEADER */
/* ============================================ */
/* ============================================ */
/* WALKTHROUGH */
/* ============================================ */
.walkthrough h2 {
line-height: clamp(1em, 1vw, 1em);
margin: 0;
}
.walkthrough p {
color: var(--clr-text-low);
}
.walkthrough iframe {
border-radius: 25px;
outline: none;
border: 5px solid var(--clr-dark-bg-in-light-mode);
}
/* ============================================ */
/* WALKTHROUGH */
/* ============================================ */
/* ============================================ */
/* FRIENDLY REMINDER */
/* ============================================ */
.fiendly-reminder {
font-size: clamp(1rem, 1vw, 1.2rem);
max-width: 654px;
border: 3px dashed var(--clr-text-low);
border-radius: 1rem;
padding: clamp(20px, 3vw, 4px);
color: var(--clr-text-low);
/*margin: clamp(3rem, 3vw, 5rem) clamp(0.5rem, 1vw, 2rem);*/
text-align: justify;
position: relative;
background-color: var(--clr-1);
}
.fiendly-reminder::before {
content: "Fiendly Reminder";
position: absolute;
top: -15px;
left: 13px;
background-color: var(--clr-text-low);
padding: 0px 10px;
border-radius: 100vmax;
font-size: clamp(0.8rem, 1vw, 0.9rem);
color: var(--clr-0);
}
/* ============================================ */
/* FRIENDLY REMINDER */
/* ============================================ */
/* .table-controls {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 55px 10px 0 10px;
flex-wrap: wrap;
width: 100%;
} */
/* Manual Filter START */
/* .manual-filter {
margin: 0 10px;
}
.manual-filter label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid var(--lighter-gray);
border-radius: 100vmax;
height: 90px;
width: 90px;
color: var(--clr-text-low);
cursor: pointer;
}
.filter-circle {
height: 20px;
width: 20px;
border-radius: 100vmax;
border: 1px solid var(--lighter-gray);
margin-top: 11px;
transition: transform, 0.2s;
}
.manual-filter label:hover > .filter-circle {
background-color: var(--lighter-gray);
}
.manual-filter input[type="checkbox"]:checked + label .filter-circle {
transform: scale(1.1);
background-color: var(--clr-accent);
border: 1ps solid var(--clr-accent);
}
*/
/*
.manual-filter input[type="checkbox"]:enabled + label {
border-color: var(--clr-accent);
}
.manual-filter input {
display: none;
} */
/* Manual Filter END */
/* ============================================ */
/* PRESETS */
/* ============================================ */
.presets {
background-color: var(--clr-transparent-accent);
width: 100%;
padding: clamp(1rem, 1vw, 2rem) clamp(0.5rem, 1vw, 1rem) clamp(1.6rem, 2vw, 2.3rem);
display: flex;
justify-content: center;
align-items: center;
margin: clamp(3rem, 3vw, 5rem) clamp(0.5rem, 1vw, 2rem);
overflow: hidden;
}
.preset {
background-image: none;
background-color: var(--clr-0);
padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.9rem, 1vw, 1rem);
border-radius: 100vmax;
margin: .5rem;
color: var(--clr-text-medium);
font-weight: normal;
display: inline-block;
font-size: clamp(0.8rem, 1vw, 0.9rem);
font-weight: 500;
}
.preset:hover {
background-color: var(--clr-1);
}
/* ============================================ */
/* PRESETS */
/* ============================================ */
/* ============================================ */
/* CLASSIFICATION FILTERS */
/* ============================================ */
.characteristic-filter {
padding: 15px 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.characteristic-filter span {
padding: .4rem;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.characteristic-filter-name {
width: 100%;
padding: 5px;
color: var(--clr-text-low);
text-align: left;
font-size: 0.9rem;
}
.characteristic-filter-name::after {
content: ":";
}
.characteristic-filter span label {
padding: clamp(0.4rem, 1vw, .5rem) clamp(0.7rem, 1vw, 0.8rem);
background-color: var(--clr-text-high);
border-radius: 100vmax;
cursor: pointer;
color: var(--clr-0);
min-width: clamp(2.4rem, 2vw, 2.6rem);
display: inline-block;
min-height: clamp(2.3rem, 2vw, 2.5rem);
font-weight: 200;
}
.characteristic-filter span label img {
width: clamp(0.9rem, 1vw, 1rem);
height: clamp(0.9rem, 1vw, 1rem);
filter: var(--clr-table-icon-reversed);
}
.characteristic-filter span label:hover {
background-color: var(--clr-accent);
}
.characteristic-filter span input[type="checkbox"] {
display: none;
}
/*.characteristic-filter span label::before {*/
/* content: "+";*/
/* font-size: .8rem;*/
/* padding: 0 14px 0 8px;*/
/* width: 5px;*/
/* display: inline-block;*/
/* height: 5px;*/
/*}*/
/*.characteristic-filter span input[type="checkbox"]:checked + label::before {*/
/* content: " \2713";*/
/*}*/
.characteristic-filter span input[type="checkbox"]:checked + label {
background-color: var(--clr-accent);
color: white;
border-color: var(--clr-accent);
}
.characteristic-filter span input[type="checkbox"]:checked + label img {
filter: invert(1);
}
#filters {
position: relative;
padding-top: 30px;
}
#filterReset {
border-radius: 100vmax;
padding: clamp(.3rem, 1vw, 0.5rem) clamp(.9rem, 1vw, 1.1rem) clamp(.2rem, 1vw, 0.4rem) clamp(.9rem, 1vw, 1.1rem);
background-color: var(--clr-transparent-red-light);
cursor: pointer;
color: var(--clr-red);
position: absolute;
top: 2px;
right: 10px;
outline: 1px solid var(--clr-red);
}
#filterReset:hover {
outline: 2px solid var(--clr-red);
}
/* ============================================ */
/* CLASSIFICATION FILTERS */
/* ============================================ */
/* ============================================ */
/* TABLE */
/* ============================================ */
#orderitems {
border-radius: 100vmax;
background-color: var(--clr-1);
padding: clamp(.0rem, 1vw, .2rem) clamp(0.8rem, 1vw, 0.9rem) clamp(0rem, 1vw, 0.3rem) clamp(0.8rem, 1vw, 0.9rem);
color: var(--clr-text-low);
font-size: clamp(.6rem, 1vw, .8rem);
border: none;
font-weight: normal;
}
#orderitems:hover {
background-color: var(--clr-2);
}
#orderitems:disabled {
pointer-events: none;
opacity: .6;
}
.order-items {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 4;
width: fit-content;
justify-self: center;
}
.order-items label {
font-size: clamp(.45rem, 1vw, .5rem);
font-weight: normal;
display: none;
}
/* Order By END */
.relevance-mode label {
padding: 0.7rem 1rem;
/* border: 1px solid var(--clr-1); */
border-radius: 100vmax;
cursor: pointer;
/* color: var(--clr-text-high); */
font-weight: normal;
align-items: center;
display: flex;
font-size: 0.8rem;
border: 1px solid var(--clr-text-low);
color: var(--clr-text-medium);
}
.relevance-mode label:hover {
background: var(--clr-1);
}
.relevance-mode input[type="checkbox"] {
display: none;
}
.relevance-mode label::before {
content: "+";
font-size: clamp(.6rem, 1vw, .8rem);
/* padding: 10px; */
/* width: 5px; */
display: inline-table;
/* height: 5px; */
margin-right: clamp(.1rem, 1vw, .3rem);
}
.relevance-mode input[type="checkbox"]:checked + label::before {
content: " \2713";
}
.relevance-mode input[type="checkbox"]:checked + label {
background-color: var(--clr-2);
color: var(--clr-text-medium);
border-color: var(--clr-text-low);
cursor: default;
opacity: .6;
pointer-events: none;
}
.relevance-mode {
font-size: clamp(.55rem, 1vw, .6rem);
align-items: center;
width: max-content;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 4;
justify-self: center;
}
.relevance-mode input {
width: clamp(.45rem, 1vw, .7rem);
}
/* input[type="checkbox"].relevance-mode-checkbox {
font-size: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 214px;
height: 50px;
color: var(--gray);
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--lighter-gray);
}
input[type="checkbox"].relevance-mode-checkbox:hover {
background-color: --clr-1;
}
input[type="checkbox"].relevance-mode-checkbox:checked {
background-color: var(--lighter-gray);
color: var(--clr-text-low);
pointer-events: none;
opacity: .5;
}
input[type="checkbox"].relevance-mode-checkbox::after {
position: absolute;
content: "RELEVANCE";
width: 160px;
height: 40px;
border-radius: 4rem;
background-color: #fff;
transform: scale(0.7);
left: -15px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color: var(--clr-text-low);
font-size: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--lighter-gray);
}
input[type="checkbox"].relevance-mode-checkbox:checked:after {
left: calc(100% - 151px);
}
.relevance-mode-checkbox::before {
content: "DEFAULT CUSTOM";
padding: 1rem;
font-size: 0.8rem;
word-spacing: 64px;
} */
.collapse-expand-all {
display: flex;
justify-content: space-evenly;
align-items: center;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
justify-self: start;
/* height: 40px;
width: 100%; */
}
.collapse-expand-all button svg {
width: clamp(.6rem, 1vw, .85rem);
}
.collapse-expand-all button {
padding: 0;
height: clamp(1.4rem, 2vw, 1.9rem);
width: clamp(1.5rem, 2vw, 2rem);
/*margin: auto clamp(0rem, 1vw, 0.6rem)*/
}
#btnCollapsed {
margin-right: clamp(0rem, 1vw, 0.6rem);
}
.disabled {
pointer-events: none;
opacity: 0.7;
}
.enabled {
pointer-events: auto;
opacity: 1;
}
/* .save,
.cancel {
margin: 0.4rem;
} */
.save {
position: relative;
border-radius: 100vmax;
color: var(--clr-accent);
background-color: var(--clr-0);
font-weight: 500;
border: 1px solid var(--clr-accent);
z-index: 1;
}
.save:hover {
background-color: var(--clr-transparent-accent);
}
.save:disabled {
opacity: .6;
cursor: default;
pointer-events: none;
}
/*.save:disabled:hover {*/
/* background-color: var(--clr-0);*/
/*}*/
/* .save::after {
color: var(--light-gray);
background-color: var(--lightest-gray);
font-size: 0.7rem;
border-radius: 100vmax;
height: 25px;
width: 25px;
display: flex;
content: "OR";
justify-content: center;
align-items: center;
position: absolute;
right: -20px;
top: 3px;
pointer-events: none;
display: none;
} */
.save-cancel {
justify-content: space-evenly;
grid-row-start: 5;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 4;
margin: 5px;
justify-self: center;
width: 100%;
}
.save-cancel button {
font-size: clamp(0.8rem, 1vw, .8rem);
}
.save-cancel .cancel {
border-radius: 100vmax;
color: var(--clr-red);
padding: 0.6rem 1.3rem;
background-color: var(--clr-0);
font-weight: 500;
border: 1px solid var(--clr-red);
/* outline: 1px solid var(--clr-red); */
}
.save-cancel .cancel:hover {
background-color: var(--clr-transparent-red);
}
.save:disabled:hover {
background-color: var(--clr-transparent-accent);
color: var(--clr-text-medium);
}
/* .or {
color: var(--light-gray);
background-color: var(--lightest-gray);
font-size: 0.7rem;
border-radius: 10rem;
height: 25px;
width: 25px;
display: none;
justify-content: center;
align-items: center;
position: absolute;
right: 105px;
top: 67px;
cursor: default;
} */
/* .filter-btn.open::before {
content: "";
height: 10px;
width: 10px;
background-color: white;
border-radius: 50%;
margin-right: 10px;
transform: translateY(-3px);
} */
/* .show-hide-all {
background-color: lightpink;
display: flex;
justify-content: center;
align-items: center;
} */
/* .switch {
height: 30px;
width: 30px;
background-color: white;
border-radius: 100px;
transform: translate(10px, -2px);
} */
.legend {
padding: clamp(5px, 1vw, 7px) clamp(5px, 1vw, 7px);
font-size: clamp(0.5rem, 1vw, .8rem);
grid-row-start: 4;
grid-column-start: 1;
grid-row-end: 5;
grid-column-end: 2;
margin: auto;
}
.calc-toggle + label svg, .legend svg {
width: clamp(15px, 1vw, 17px);
height: clamp(15px, 1vw, 15px);
}
.metricimperialswitch + label svg {
width: clamp(13px, 1vw, 16px);
height: clamp(13px, 1vw, 15px);
}
.metricimperialswitch + label {
padding: clamp(5px, 1vw, 6px) clamp(5px, 1vw, 6px);
border: 1px solid var(--clr-1);
border-radius: 100vmax;
cursor: pointer;
color: var(--clr-text-low);
font-weight: normal;
align-items: center;
display: flex;
background-color: var(--clr-1);
font-size: clamp(0.6rem, 1vw, 0.75rem);
grid-row-start: 4;
grid-column-start: 2;
grid-row-end: 5;
grid-column-end: 3;
justify-content: center;
margin: auto;
}
.metricimperialswitch + label:hover {
background-color: var(--clr-2);
}
.metricimperialswitch:checked + label {
background-color: var(--clr-accent);
color: white;
border-color: var(--clr-accent);
position: relative;
}
.calc-toggle + label {
padding: clamp(5px, 1vw, 7px) clamp(5px, 1vw, 7px);
/* border: 1px solid var(--clr-1); */
border-radius: 100vmax;
cursor: pointer;
color: var(--clr-text-low);
font-weight: normal;
align-items: center;
display: flex;
background-color: var(--clr-1);
font-size: clamp(0.6rem, 1vw, 0.75rem);
grid-row-start: 4;
grid-column-start: 3;
grid-row-end: 5;
grid-column-end: 4;
justify-content: center;
margin: auto;
}
.calc-toggle + label:hover {
background-color: var(--clr-2);
}
.calc-toggle, .metricimperialswitch {
display: none;
}
/*.calc-toggle + label::before {*/
/* content: "+";*/
/* font-size: clamp(.6rem, 1vw, .65rem);*/
/* padding: 10px; */
/* width: 0.5rem;*/
/* display: inline-table;*/
/* height: 0.5rem;*/
/* margin-right: clamp(.1rem, 1vw, .3rem);*/
/*}*/
/*.calc-toggle:checked + label::before {*/
/* content: " \2713";*/
/*}*/
.calc-toggle:checked + label {
background-color: var(--clr-accent);
color: white;
border-color: var(--clr-accent);
position: relative;
}
.calc-toggle {
/* font-size: .55em; */
cursor: pointer;
font-size: clamp(.45rem, 1vw, .8rem);
align-items: center;
width: max-content;
}
.calc-toggle {
cursor: pointer;
width: clamp(.45rem, 1vw, .7rem);
}
.manual-filter label {
padding: clamp(0rem, 1vw, 0.2rem) clamp(.5rem, 1vw, .9rem) clamp(0rem, 1vw, 0.2rem) clamp(.5rem, 1vw, .9rem);
border: 1px solid var(--clr-1);
border-radius: 100vmax;
cursor: pointer;
color: var(--clr-text-low);
font-weight: normal;
align-items: center;
display: flex;
background-color: var(--clr-1);
font-size: clamp(0.7rem, 1vw, .8rem);
}
.manual-filter label:hover {
background-color: --clr-1;
}
.manual-filter input[type="checkbox"] {
display: none;
}
.manual-filter label::before {
content: " \25CB";
font-size: clamp(.8rem, 1vw, 1.1rem);
/* padding: 10px; */
/* width: 5px; */
display: inline-table;
/* height: 5px; */
margin-right: clamp(.1rem, 1vw, .3rem);
}
.manual-filter input[type="checkbox"]:checked + label::before {
content: " \25CF";
}
.manual-filter input[type="checkbox"]:checked + label {
background-color: var(--clr-accent);
color: white;
border-color: var(--clr-accent);
}
.manual-filter {
/* font-size: .55em; */
font-size: clamp(.45rem, 1vw, .8rem);
align-items: center;
width: max-content;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 4;
justify-self: center;
}
.manual-filter input[type="checkbox"]:disabled + label {
cursor: default;
pointer-events: none;
opacity: .6;
}
.manual-filter input[type="checkbox"]:enabled + label {
cursor: pointer;
border-color: var(--clr-accent);
opacity: 1;
}
/* .manual-filter input {
cursor: pointer;
width: clamp(.45rem, 1vw, .7rem);
} */
.table-wrapper {
position: relative;
z-index: 3;
border-top: 1px solid var(--clr-2);
border-bottom: 1px solid var(--clr-2);
background-color: var(--clr-0);
width: 100%;
margin: clamp(3rem, 3vw, 5rem) auto 0;
line-height: .9rem;
padding: 0;
font-weight: 450;
}
.table-wrapper button {
font-size: clamp(.6rem, 1vw, .8rem);
}
.table {
display: flex;
flex-direction: row;
/* max-width: 700px; */
overflow-x: scroll;
position: relative;
justify-content: left;
align-items: start;
float: left;
top: -1px;
color: var(--clr-text-high);
scrollbar-width: none;
}
.navigation-left,
.navigation-right {
height: 30px;
width: 30px;
background-color: var(--clr-2);
display: flex;
align-items: center;
border-radius: 100vmax;
opacity: 0.97;
/* padding: 0px 18px; */
cursor: pointer;
position: absolute;
z-index: 4;
color: var(--clr-text-low);
top: 4rem;
justify-content: center;
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
background-color: var(--backdrop-filter-blur1);
border: 1px solid var(--clr-3);
}
.navigation-left {
left: clamp(140px, 11vw, 216px);
transition: left 0.5s;
}
.navigation-right {
right: 15px;
}
.navigation-left.scrolling, .navigation-right.scrolling {
top: 2.8rem;
}
.characteristic-column {
border-bottom: 1px solid var(--lighter-gray);
border-left: 1px solid var(--lighter-gray);
position: sticky;
left: 0px;
z-index: 3;
display: table;
}
.characteristic-column:before {
content: "";
max-width: clamp(22.3em, 26vw, 22.1em);
width: 100%;
height: 100%;
background: hsla(0, 0%, 100%, 10%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.characteristic-relevance {
position: absolute;
right: 0;
bottom: 0;
padding: 0 5px;
margin: 2px;
border-radius: 100vmax;
background-color: var(--clr-2);
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(0.6rem, 1vw, .7rem);
text-indent: 0;
color: var(--clr-text-high);
}
/*.item-column:last-child {*/
/* box-shadow: 0px 0px 400px 200px var(--clr-transparent-red-light) inset;*/
/*}*/
/*.item-column:nth-child(2) {*/
/* box-shadow: 0px 0px 400px 200px var(--clr-transparent-accent-light) inset;*/
/*}*/
.item-order {
border-radius: 100vmax;
background-color: var(--clr-1);
font-size: clamp(.6rem, 1vw, .7rem);
min-width: clamp(1.2rem, 1.5vw, 1.5rem);
height: clamp(1.2rem, 1.5vw, 1.5rem);
font-weight: normal;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.1s !important;
color: var(--clr-text-low);
fill: var(--clr-text-low);
margin: .2em;
margin: .2em auto;
grid-row: 1;
padding: 0 0.5em;
outline: 1px solid var(--clr-2);
}
.item-order .icon-crown {
width: clamp(.9rem, 1vw, 1rem);
}
.item-order .icon-ribbon,
.item-order .icon-trophy {
width: clamp(.7rem, 1vw, .8rem);
}
.scrolling .item-order svg {
width: clamp(.7rem, 1vw, .8rem);
/* height: clamp(.7rem, 1vw, 1rem); */
}
.item-variation {
font-size: clamp(.6rem, 1vw, .7rem);
padding: clamp(0rem, 1vw, 0rem) clamp(0.5rem, 1vw, 0.5rem) clamp(.9rem, 1vw, 0rem) clamp(0.5rem, 1vw, 0.5rem);
border: 1px solid var(--clr-3);
color: var(--clr-text-low);
border-radius: 100vmax;
height: 0;
display: block;
line-height: .8rem;
margin: auto .2em .2em .2em;
grid-row: 4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.order-items #orderitems option {
background-color: --clr-1;
}
/* .selection-indicator {
width: 15px;
height: 15px;
border-radius: 100px;
border: 1px solid lightgray;
margin: 10px;
}
.selected {
width: 15px;
height: 15px;
border-radius: 100px;
margin: 10px;
background-color: black;
} */
.item-header {
display: grid;
/*flex-direction: column;*/
/*align-items: center;*/
height: 160px !important;
/*width: 218px;*/
font-weight: 500;
border-bottom: 1px solid var(--clr-2);
font-size: clamp(.7rem, 1vw, 1rem) !important;
justify-content: space-around;
border-top: 1px solid var(--clr-2);
border-right: 1px solid var(--clr-2);
width: clamp(7.95rem, 10vw, 13rem);
padding: 0 0.5rem;
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
background-color: var(--backdrop-filter-blur);
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
gap: .2em;
align-items: center;
justify-items: center;
text-align: center;
}
/*.item-column:not(:nth-last-child(1 of .item-column)) > .item-header::after {*/
/* content: "VS";*/
/* display: block;*/
/* z-index: 99;*/
/* height: 20px;*/
/* width: 20px;*/
/* background: red;*/
/* position: absolute;*/
/* top: 45%;*/
/* right: -10px;*/
/*}*/
/*.item-column.checked-column:not(.l_hide):not(:last-child) > .item-header::after {*/
/*.item-column.checked-column:not(:nth-last-child(1 of .checked-column)) > .item-header::after {*/
/* content: "VS";*/
/* display: block;*/
/* z-index: 99;*/
/* height: 20px;*/
/* width: 20px;*/
/* background: red;*/
/* position: absolute;*/
/* top: 45%;*/
/* right: -10px;*/
/* text-wrap: nowrap;*/
/*}*/
/*.item-column:not(.l_hide):not(:nth-last-child(1 of .l_hide)) > .item-header::before {*/
/* content: "VS";*/
/* display: block;*/
/* height: clamp(1.1rem, 1vw, 1.5rem);*/
/* width: clamp(1.1rem, 1vw, 1.5rem);*/
/* background: var(--clr-0);*/
/* position: absolute;*/
/* top: 45%;*/
/* left: -10px;*/
/* text-wrap: nowrap;*/
/* line-height: clamp(1.1rem, 1vw, 1.5rem);*/
/* font-size: clamp(0.5rem, 1vw, 0.7rem);*/
/* border-radius: 100vmax;*/
/* color: var(--clr-text-low);*/
/*}*/
.item-column.checked-column:not(:nth-child(1 of .checked-column)) > .item-header::before {
content: "VS";
display: block;
height: clamp(1.1rem, 1vw, 1.5rem);
width: clamp(1.1rem, 1vw, 1.5rem);
background: var(--clr-0);
position: absolute;
top: 45%;
left: -10px;
text-wrap: nowrap;
line-height: clamp(1.1rem, 1vw, 1.5rem);
font-size: clamp(0.5rem, 1vw, 0.7rem);
border-radius: 100vmax;
color: var(--clr-text-low);
}
.do-filter .item-header{
cursor: pointer;
}
.extraneous-cell {
cursor: default !important;
flex-direction: row;
flex-wrap: wrap;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
color: var(--clr-text-low);
}
.scrolling .extraneous-cell {
max-width: clamp(22.3em, 26vw, 22.1em);
}
.item-brand {
position: absolute;
max-width: clamp(35px, 3vw, 75px);
width: 100%;
max-height: clamp(35px, 3vw, 75px);
top: 0;
left: 0;
margin: 0.4rem;
padding: 5px;
border-radius: 5px;
backdrop-filter: blur(10px);
}
.item-brand.invert-bg-black {
background-color: hsla(198, 10%, 15%, .8);
}
.item-brand.invert-bg-white {
background-color: hsla(198, 10%, 96%, .8);
}
.light-bg-in-dark-mode {
background-color: var(--clr-light-bg-in-dark-mode);
}
.item-image {
/* width: clamp(5rem, 4vw, 4.5rem); */
margin: auto;
grid-row: 2;
max-height: clamp(43px, 4vw, 85px);
object-fit: contain;
align-self: stretch;
/*width: 100%;*/
height: 100%;
max-width: clamp(95px, 8vw, 190px);
border-radius: 8px;
padding: 3px;
}
.item-name {
grid-row: 3;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4em;
}
.item-column {
position: relative;
text-align: center;
/* width: 100px; */
visibility: visible;
border-bottom: 1px solid var(--lighter-gray);
transition: all 0.3s;
}
.item-column.l_hide {
width: 0px;
opacity: 0;
visibility: hidden;
transform: scale(0);
/* transform: translateY(0); */
}
.item-column.l_hide .item-characteristic-value,
.item-column.l_hide .aspect {
visibility: hidden;
}
.characteristic-name, .aspect, .aspect-summary {
border-top: 1px solid var(--clr-2);
border-right: 1px solid var(--clr-2);
position: relative;
display: flex;
overflow: clip;
height: 54px;
align-items: center;
width: clamp(7.95rem, 10vw, 13rem);
font-size: clamp(.6rem, 1vw, .85rem);
/* text-indent: 0; */
background-color: var(--backdrop-filter-blur);
font-weight: 400;
padding-left: clamp(0px, 1vw, 5px);
}
/*.characteristic-name {*/
/* text-indent: clamp(.2rem, 1vw, 0.3rem);*/
/*}*/
.aspect {
display: flex;
cursor: pointer;
font-weight: 500;
background-color: var(--backdrop-filter-blur1);
border-right: 1px solid hsla(0, 0%, 0%, 0);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-flow: row-reverse;
justify-content: start;
align-items: center;
padding-right: 3ch;
padding-left: clamp(2px, 1vw, 10px);
}
/*.aspect.summary-icon::before {*/
/* height: clamp(1rem, 1vw, 1.3rem);*/
/* width: clamp(1rem, 1vw, 1.3rem);*/
/* display: flex;*/
/* opacity: 0.3;*/
/* filter: var(--clr-table-icon);*/
/* position: absolute;*/
/* top: clamp(18px, 1vw, 17px);*/
/* bottom: 0;*/
/* left: clamp(4px, 1vw, 6px);*/
/*}*/
.aspect-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aspect-icon {
height: clamp(1rem, 1vw, 1.3rem);
width: clamp(1rem, 1vw, 1.3rem);
opacity: 0.1;
filter: var(--clr-table-icon);
margin-right: 2px;
}
.characteristic-name {
color: var(--clr-text-low);
text-align: left;
text-indent: 3px;
}
.characteristic-name.height-auto {
text-align: left;
}
.height-auto b {
margin: 1rem;
display: grid;
}
.characteristic-name.alwaysVisible svg {
height: clamp(0.8rem, 1vw, 1rem);
margin-left: 0.3rem;
/* padding-top: .1rem; */
width: clamp(0.7rem, 1vw, 1rem);
height: clamp(0.8rem, 1vw, 1rem);
display: inline-block;
/* transform: translateY(2px); */
}
.formula {
position: absolute;
top: 0;
left: 0;
font-size: clamp(.5rem, 1vw, .6rem);
background-color: var(--clr-transparent-accent);
border-radius: 100vmax;
padding: clamp(6px, 1vw, 7px) clamp(4px, 1vw, 7px) clamp(7px, 1vw, 8px) clamp(4px, 1vw, 6px);
line-height: 0;
margin: 2px;
color: var(--clr-text-high);
text-indent: 0;
height: fit-content;
}
.item-characteristic-value {
border-top: 1px solid var(--clr-2);
border-right: 1px solid var(--clr-2);
/* padding: 0 0.5rem; */
display: flex;
position: relative;
overflow: clip;
height: 54px;
align-items: center;
justify-content: center;
width: clamp(7.95rem, 10vw, 13rem);
font-size: clamp(.7rem, 1vw, .85rem);
}
.el-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 0.2em;
pointer-events: none;
}
.item-characteristic-value .el-text {
line-height: 1.2rem;
}
.el-text img {
display: inline-block;
width: clamp(0.9rem, 1vw, 1.1rem);
height: clamp(0.9rem, 1vw, 1.1rem);
filter: var(--clr-table-icon);
}
/*.Price .el-text {*/
/* padding: 0;*/
/*}*/
.cell-content-divider {
color: var(--clr-3);
padding: 0 3px;
}
.item-aspect-total {
position: absolute;
right: 0;
padding: 1px 6px;
margin: 0 5px;
border-radius: 100vmax;
background-color: var(--clr-item-aspect-total);
justify-content: center;
align-items: center;
font-size: clamp(.5rem, 1vw, .7rem);
text-indent: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 48%;
}
.characteristic-factor,
.characteristic-quantity,
.characteristic-quality {
position: absolute;
padding: 0 5px 0px 5px;
margin: 2px;
border-radius: 100vmax;
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(.5rem, 1vw, .7rem);
width: max-content;
line-height: 0.8rem;
}
.characteristic-quantity {
background-color: var(--clr-characteristic-quantity-quality);
display: none;
top: 0;
left: 0;
}
.characteristic-quality {
background-color: var(--clr-characteristic-quantity-quality);
display: none;
right: 0;
top: 0;
}
.characteristic-factor {
background-color: var(--clr-characteristic-factor);
display: none;
bottom: 0;
left: 0;
}
.calculated-characteristic-factor,
.calculated-factor {
position: absolute;
right: 0;
bottom: 0;
padding: 0px 6px 0px 6px;
margin: 2px;
border-radius: 100vmax;
background-color: var(--clr-calculated-characteristic-factor);
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(.5rem, 1vw, .7rem);
color: var(--clr-text-high);
line-height: 0.8rem;
}
.item-header {
/* position: sticky !important;
top: 0px !important;*/
z-index: 2;
position: absolute;
}
.at-bottom .item-header {
bottom: 0;
}
.priceHead {
position: absolute;
top: 20px;
right: 0;
font-size: clamp(0.6rem, 1vw, 0.7rem);
border-radius: 100vmax;
background-color: var(--clr-1);
padding: 1px clamp(1px, 2vw, 6px);
font-weight: 500;
margin: clamp(4px, 1vw, 3px) 2px;
outline: 1px solid var(--clr-2);
color: var(--clr-text-low);
}
.scrolling .priceHead, .scrolling .overallHead {
padding: clamp(1px, 0.1vw, 2px) clamp(1px, 2vw, 6px);
}
.priceHead::before {
content: "$";
}
.overallHead {
position: absolute;
top: 0;
right: 0;
font-size: clamp(0.6rem, 1vw, 0.7rem);
border-radius: 100vmax;
background-color: var(--clr-1);
padding: 1px clamp(1px, 2vw, 6px);
font-weight: 500;
margin: 2px;
outline: 1px solid var(--clr-2);
color: var(--clr-text-low);
}
.overallHead::after {
content: url("data:image/svg+xml;charset=UTF-8,");
margin-left: 0.1rem;
width: clamp(0.7rem, 1vw, 0.7rem);
height: clamp(0.8rem, 1vw, 0.7rem);
display: inline-block;
transform: translateY(1px);
}
.aspect-arrow {
box-sizing: border-box;
position: absolute;
display: flex;
width: 22px;
height: 22px;
border: 2px solid transparent;
border-radius: 100px;
right: 0;
}
.downarrow::after {
content: "";
display: flex;
box-sizing: border-box;
position: relative;
width: clamp(5px, 1vw, 7px);
height: clamp(5px, 1vw, 7px);
border-bottom: clamp(1px, 0.1vw, 1px) solid;
border-left: clamp(1px, 0.1vw, 1px) solid;
transform: rotate(-45deg);
left: 6px;
top: 5px;
transition-duration: .1s;
}
.leftarrow::after {
transform: rotate(45deg);
}
.edit {
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
padding: clamp(0rem, 1vw, 0.4rem) clamp(1.3rem, 1vw, 2rem) clamp(1.1rem, 1vw, 1.3rem) clamp(1.3rem, 1vw, 2rem);
height: 0;
width: 0;
justify-self: center;
}
.edit-relevance {
display: flex;
flex-direction: row-reverse;
position: absolute;
bottom: 0;
justify-content: space-evenly;
height: unset;
width: inherit;
margin: 2px auto;
}
.edit-relevance input {
position: absolute !important;
/* clip: rect(0, 0, 0, 0); */
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
display: none;
}
.edit-relevance label {
background-color: #e4e4e4;
font-size: clamp(0.5rem, 1vw, 0.6rem);
border: 1px solid var(--clr-3);
transition: all 0.1s ease-in-out;
width: 25%;
padding: 0 5px;
display: flex;
justify-content: center;
align-items: center;
border-radius: .4em;
cursor: pointer;
text-indent: 0;
font-weight: normal;
color: var(--clr-text-high);
line-height: 1.4em;
}
.edit-relevance label:hover {
border: 1px solid var(--clr-2);
}
.edit-relevance input:checked + label {
transform: scale(1.1);
font-weight: 500;
background-color: var(--clr-transparent-accent) !important;
z-index: 1;
}
/*.edit-relevance input:checked + label::before {*/
/* content: " \27A4";*/
/* position: absolute;*/
/* top: 0;*/
/* left: clamp(-7px, 1vw, -7px);*/
/*}*/
.edit-relevance label {
background-color: var(--clr-1);
}
.edit-relevance label:nth-child(2) {
background-color: var(--clr-3) !important;
}
.edit-relevance label:last-child {
background-color: var(--clr-0) !important;
}
.table {
width: calc(100vw - 0px);
}
div.characteristic-relevance.clicked {
border: 3px solid #777;
}
div.edit.click {
background-color: #434e5a;
}
/* .dialog.hide {
display: none;
}
.dialog {
position: fixed;
top: 400px;
bottom: 400px;
left: 400px;
right: 400px;
background-color: white;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid black;
flex-direction: column;
} */
/* .edit, .save, .cancel {
font-size: 1rem;
} */
/* .edit:hover,
.save:hover,
.cancel:hover {
background-color: var(--lightest-gray);
} */
#errors {
text-align: center;
color: var(--clr-text-low);
border-radius: 1rem;
border: 1px solid var(--clr-red);
margin: 4rem 1rem;
padding: 1.5rem;
max-width: 500px;
overflow: hidden;
width: 90%;
}
.error-title {
color: var(--clr-red);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.errors-characteristics {
text-align: center;
color: var(--clr-text-low);
border-radius: 100vmax;
border: 1px solid var(--clr-3);
margin: 0.2rem 0.4rem;
padding: 0 0.7rem 0.2rem;
display: inline-block;
word-break: keep-all;
}
.error1 {
margin-bottom: 0.5rem;
}
.error2 {
margin-top: .5rem;
}
/* input[type="checkbox"].calc-toggle {
font-size: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 145px;
height: 50px;
color: var(--gray);
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--lighter-gray);
}
input[type="checkbox"].calc-toggle:hover {
background-color: var(--lightest-gray);
}
input[type="checkbox"].calc-toggle:checked {
background-color: var(--lighter-gray);
color: var(--clr-text-low);
}
input[type="checkbox"].calc-toggle::after {
position: absolute;
content: "CALC";
width: 90px;
height: 40px;
border-radius: 4rem;
background-color: #fff;
transform: scale(0.7);
left: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color: var(--clr-text-low);
font-size: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--lighter-gray);
}
input[type="checkbox"].calc-toggle:checked:after {
left: calc(100% - 90px);
}
.calc-toggle::before {
content: "ON OFF";
padding: 1rem;
font-size: 0.8rem;
word-spacing: 43px;
} */
.selection-indicator-checkbox {
/* appearance: none;
height: 20px;
width: 20px;
border-radius: 100vmax;
border: 1px solid var(--lighter-gray);
transition: all, 0.2s;
cursor: pointer;
pointer-events: none;
position: absolute;
top: -13px; */
display: none;
}
.do-filter .item-header:hover .item-order {
background-color: var(--clr-2);
}
.item-header:hover .selection-indicator-checkbox:checked ~ .item-order {
background-color: var(--clr-accent);
outline: none;
}
.selection-indicator-checkbox:checked {
background-color: var(--clr-accent);
border: none;
transform: scale(1.1);
}
.selection-indicator-checkbox:checked + .item-order {
background-color: var(--clr-accent);
color: white;
fill: white;
border-color: var(--clr-accent);
transform: scale(1.1);
outline: none;
}
.characteristic-column > div:nth-child(2),
.item-column > div:nth-child(2) {
margin-top: 161px;
}
.normalization-switch {
display: none;
font-size: clamp(.4rem, 1vw, .7rem);
position: absolute;
top: 0;
right: 0;
padding: clamp(0rem, 0vw, 0rem) clamp(0.4rem, 1vw, 0.8rem) clamp(0.0rem, 1vw, 0.1rem) clamp(0.4rem, 1vw, 0.5rem);
margin: 2px;
max-width: 113px;
text-indent: 0;
background-color: var(--clr-1);
color: var(--clr-text-high);
border: none;
border-radius: 0.4em;
}
.normalization-switch:hover {
background-color: var(--clr-2);
}
.normalization-value, .multi-value {
display: none;
margin: 2px;
position: absolute;
font-size: clamp(.6rem, 1vw, .7rem);
right: 0;
top: 0;
background-color: var(--clr-1);
border-radius: 100vmax;
padding: clamp(6px, 1vw, 7px) clamp(4px, 1vw, 7px) clamp(7px, 1vw, 8px) clamp(5px, 1vw, 0px);
text-indent: 0;
color: var(--clr-text-high);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: clamp(14.4ch, 7.3vw, 24ch);
line-height: 0;
}
.alwaysVisible {
display: flex !important;
}
.hide {
display: none;
}
.item-characteristic-value.ValueOverFive .el-text::after,
.item-characteristic-value.PriceOverFive .el-text::after,
.item-characteristic-value.OverallOverFive .el-text::after {
content: url("data:image/svg+xml;charset=UTF-8,");
margin-left: .1rem;
padding-top: .1rem;
width: clamp(0.7rem, 1vw, 1rem);
height: clamp(0.8rem, 1vw, 1rem);
display: inline-block;
transform: translateY(2px);
}
.ValueOverFive .el-text,
.PriceOverFive .el-text,
.OverallOverFive .el-text {
font-weight: 500;
}
.item-characteristic-value.PointsRatio .el-text::after,
.item-characteristic-value.PriceRatio .el-text::after,
.item-characteristic-value.OverallRatio .el-text::after {
content: "/100";
font-size: clamp(0.5rem, 1vw, 0.6rem);
margin-top: clamp(0.1rem, 1vw, 0.2rem);
margin-left: .1rem;
color: var(--clr-text-medium);
margin-bottom: clamp(0.1rem, 1vw, 0rem);
}
.item-characteristic-value.ValueOverTen .el-text::after,
.item-characteristic-value.PriceOverTen .el-text::after,
.item-characteristic-value.OverallOverTen .el-text::after {
content: "/10";
font-size: clamp(0.5rem, 1vw, 0.6rem);
margin-top: clamp(0rem, 1vw, 0.5rem);
margin-left: .1rem;
color: var(--clr-text-medium);
margin-bottom: clamp(0.3rem, 1vw, 0rem);
}
.item-characteristic-value.button .button {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background-color: transparent;
border-radius: 0;
color: var(--clr-accent);
}
.item-characteristic-value.button .button:hover {
background-color: var(--clr-1);
}
.item-characteristic-value.alwaysVisible.button {
border-radius: 0;
padding: 0;
}
.item-characteristic-value.alwaysVisible.button .external-link-icon {
position: absolute;
top: 0;
right: 0;
z-index: 1;
pointer-events: none;
height: auto;
margin: 0.2rem;
width: 0.8rem;
}
.item-characteristic-value.button.more-info::before {
display: none;
}
.item-characteristic-value a span {
border-radius: 100vmax;
padding: clamp(.2rem, 1vw, 0.4rem) clamp(0.5rem, 1vw, 0.8rem) clamp(.2rem, 1vw, 0.4rem) clamp(0.5rem, 1vw, 0.8rem);
background-color: var(--clr-text-high);
border: none;
color: var(--clr-0);
cursor: pointer;
font-size: clamp(.6rem, 1vw, .8rem);
width: fit-content;
font-weight: 500;
}
.item-characteristic-value a:hover {
background-color: var(--clr-1);
}
.item-characteristic-value a:hover > span {
background-color: var(--clr-accent);
}
.item-characteristic-value.height-auto {
display: flex;
flex-direction: column;
align-items: start;
height: auto;
/* padding: 7px; */
line-height: 1.5;
padding: clamp(5px, 1vw, 10px);
justify-content: start;
}
.height-auto:has(> .pros-cons .empty) {
justify-content: center;
}
/* .item-header,
.item-header img,
.item-header .item-name ,
.item-header .item-order,
.item-order svg {
transition: transform .5s, height .5s, width .5s;
} */
.scrolling .item-header {
height: 115px !important;
}
/*.scrolling .item-header img {*/
/* width: clamp(2.5rem, 2vw, 2.3rem);*/
/*}*/
.scrolling .item-name {
font-size: clamp(.7rem, 1vw, .8rem);
}
.scrolling .item-order {
width: clamp(1rem, 1.5vw, 1.5rem);
height: clamp(1rem, 1.5vw, 1.5rem);
}
.scrolling .item-header .item-image {
max-height: 43px;
}
.at-bottom .item-header {
height: 115px !important;
}
.at-bottom .item-header img {
width: clamp(2.5rem, 2vw, 2.3rem);
}
.at-bottom .item-header .item-name {
font-size: clamp(.7rem, 1vw, .8rem);
}
.at-bottom .item-header .item-order {
width: clamp(1.2rem, 1.5vw, 1.5rem);
height: clamp(1.2rem, 1.5vw, 1.5rem);
}
.formula, .normalization-value, .characteristic-quantity, .characteristic-quality, .characteristic-factor, .calculated-factor {
cursor: default;
}
.manual-filter, #calcLabel, .relevance-mode, .save, .cancel, .relevanceInputLabel {
user-select: none;
}
.characteristic-quality, .characteristic-quantity, .characteristic-factor, .calculated-characteristic-factor, .calculated-factor {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 48%;
pointer-events: none;
}
/* @media (max-width: 576px){
.item-header img {
display: none;
}
} */
/* ============================================ */
/* TABLE */
/* ============================================ */
/* ============================================ */
/* OTHER ACTIONS */
/* ============================================ */
/* @media (max-width: 600px) {
.tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
background-color: rgba(0, 0, 0, 0.08);
}
} */
/* @media (max-width: 600px) {
.tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
background-color: rgba(0, 0, 0, 0.08);
}
} */
/* @media (max-width: 600px) {
.tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
background-color: rgba(0, 0, 0, 0.08);
}
} */
/* @media (max-width: 600px) {
.tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
background-color: rgba(0, 0, 0, 0.08);
}
} */
@-webkit-keyframes content {
from {
opacity: 0;
transform: translateY(5%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes content {
from {
opacity: 0;
transform: translateY(5%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
/* @media (max-width: 600px) {
.tabs ul li label {
padding: 5px;
border-radius: 5px;
}
.tabs ul li label span {
display: none;
}
.tabs .slider {
display: none;
}
.tabs .content {
margin-top: 20px;
}
.tabs .content section h2 {
display: block;
}
} */
.url {
color: var(--clr-text-medium);
}
/* ============================================ */
/* OTHER ACTIONS */
/* ============================================ */
/* ============================================ */
/* TOOLTIP */
/* ============================================ */
[tooltip]:hover::after {
content: attr(tooltip);
/* magic! */
text-align: center;
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3rem;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: var(--clr-text-high);
color: var(--clr-0);
z-index: 1000;
/* absurdity 2 */
position: absolute;
font-weight: normal;
font-size: 0.6rem;
display: none;
}
[tooltip] {
position: relative;
}
/* FLOW: UP */
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -.5em);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 150ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 150ms ease-out forwards;
}
@media not all and (pointer: coarse) {
[tooltip]:hover::after {
display: block;
}
}
/* ============================================ */
/* TOOLTIP */
/* ============================================ */
/* ============================================ */
/* MORE INFO */
/* ============================================ */
.more-info-content {
visibility: hidden;
display: none;
}
.more-info {
cursor: pointer;
}
/*.edit-mode .more-info {*/
/* cursor: auto;*/
/*}*/
.more-info::after {
content: 'i';
display: flex;
position: absolute;
right: 2px;
top: calc(50% + -0.4rem);
color: var(--clr-text-low);
background: var(--clr-1);
border-radius: 100px;
font-size: 0.7rem;
font-weight: 500;
text-transform: lowercase;
height: 0;
width: 0;
justify-content: center;
align-items: center;
padding: 7px 8px 7px 8px;
text-indent: initial;
pointer-events: none;
}
.more-info:hover::after {
background: var(--clr-1);
}
.more-info:hover {
background: var(--clr-1);
}
.edit-mode .more-info:hover {
background-color: var(--backdrop-filter-blur);
}
.sideBar {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
/*padding: 50px 1rem 1rem;*/
text-align: left;
overflow-y: auto;
font-size: clamp(.9rem, 1vw, 1rem);
}
.sideBar .close-menu-popup {
position: sticky;
top: 0;
left: 0;
right: 0;
height: 55px;
width: 100%;
background-color: var(--backdrop-filter-blur);
backdrop-filter: blur(10px);
border-bottom: 1px dashed var(--clr-2);
z-index: 1;
}
.sideBarContent {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
padding: 0.6rem 1rem 50px 1rem;
}
.sideBarContent ul {
padding-left: 1rem;
}
.lg-backdrop {
background-color: #000000b2 !important;
backdrop-filter: blur(20px);
}
.gallery-item.horizontal {
margin: 0;
}
.sideBar .gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
width: 100%;
margin-top: 1em;
}
.sideBar .gallery a img {
width: 100%;
border-radius: 1rem;
border: 0.5em var(--clr-0) solid;
}
.sideBar .gallery a img:hover {
box-shadow: 0px 0px 0px 2px var(--clr-3);
}
.gallery-caption {
font-size: 0.6em;
color: var(--clr-text-medium);
margin-top: 1em;
}
.sideBar iframe {
width: 100%;
height: 200px;
border-radius: 1rem;
}
.sideBar .references {
width: 100%;
align-self: end;
border-top: 1px solid var(--clr-3);
}
.references {
padding-bottom: 0.3rem;
margin-top: 3rem;
}
.references ul {
padding-left: 1rem;
}
.references h4 {
font-size: clamp(1.2rem, 1.4vw, 1.3rem);
}
.providers {
text-decoration: none;
}
.providers span::after {
content: url("data:image/svg+xml; utf8, ");
width: clamp(7px, 1vw, 10px);
margin: auto auto auto clamp(3px, 1vw, 6px);
display: inline-block;
filter: var(--clr-table-icon-reversed);
}
.provider {
width: 100%;
background-color: var(--clr-1);
text-decoration: none;
border-radius: 1rem;
/* display: flex; */
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
margin: 1.1rem auto;
border: 2px solid var(--clr-2);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr auto;
gap: 0px 0px;
grid-template-areas: "provider-header provider-price provider-price" "provider-header provider-last-updated provider-last-updated" "provider-supplementary-info provider-supplementary-info provider-supplementary-info";
}
.provider-header {
grid-area: provider-header;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 1px solid var(--clr-2);
}
.provider-price { grid-area: provider-price; }
.provider-last-updated { grid-area: provider-last-updated; }
.provider-supplementary-info { grid-area: provider-supplementary-info; }
.provider:hover {
border: 2px solid var(--clr-text-low);
}
.provider-name {
color: var(--clr-text-low);
width: 100%;
text-align: center;
text-wrap: wrap;
font-size: 0.9rem;
padding-right: 1rem;
margin-top: 0.6rem;
}
.provider-logo-container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin-right: 1rem;
border-radius: 10px;
}
.provider-logo {
width: 100%;
}
.provider-price {
color: var(--clr-text-high);
font-weight: 500;
font-size: 1.1rem;
margin: auto 0.3rem;
}
.provider-price span {
font-size: 0.8rem;
}
/*.provider-price::before {*/
/* content: "$";*/
/* font-size: 1rem;*/
/*}*/
.provider-last-updated {
margin: auto auto auto 1rem;
}
.provider-last-updated::before {
content: "Last Updated: ";
font-size: .7rem;
color: var(--clr-text-low);
display: block;
}
.provider-last-updated, .provider-supplementary-info {
font-size: 0.8rem;
color: var(--clr-text-medium);
}
.provider-supplementary-info {
border-top: 1px solid var(--clr-2);
padding-top: 0.6rem;
margin-top: 1rem;
}
.provider .external-link-icon {
position: absolute;
top: 0;
right: 0;
margin: 0.7rem;
height: auto;
width: 0.9rem;
}
/* ============================================ */
/* MORE INFO */
/* ============================================ */
/* ============================================ */
/* ADDITIONAL NOTES & DISCLOSURE */
/* ============================================ */
.additional-notes, .disclosure {
width: 100%;
text-align: left;
padding: 1rem;
font-size: 0.9rem;
margin: unset;
display: flex;
align-items: start;
}
.additional-notes {
background-color: var(--clr-1);
}
.disclosure {
border-bottom: 1px solid var(--clr-3);
}
.disclosure p {
margin: 1rem;
text-align: left;
}
.notes-title {
font-weight: 500;
}
/* ============================================ */
/* ADDITIONAL NOTES */
/* ============================================ */
/* ============================================ */
/* FAQ */
/* ============================================ */
/* ============================================ */
/* FAQ */
/* ============================================ */
/* ============================================ */
/* SHARE */
/* ============================================ */
#copy-to-clipboard {
background: var(--clr-text-high);
color: var(--clr-0);
}
#copy-to-clipboard:hover {
background-color: var(--clr-accent) !important;
}
/* ============================================ */
/* SHARE */
/* ============================================ */
/* ============================================ */
/* HOME */
/* ============================================ */
/*@media only screen and (max-device-height : 393px), (max-device-width : 1180px) {*/
/* .hero-background {*/
/* display: none !important;*/
/* }*/
/*}*/
.hero {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 100px;
flex-flow: wrap;
background-color: var(--clr-0);
border-bottom: clamp(2px, 0.7vw, 3px) dashed var(--clr-1);
height: 100lvh;
}
.hero div {
margin: auto 2rem;
}
.hero h1 span {
color: var(--clr-accent);
}
.hero-foreground p {
color: var(--clr-text-low);
max-width: 63ch;
}
.column img {
width: 95%;
}
.column {
position: relative;
}
.hero-background {
display: flex;
justify-content: center;
align-items: center;
opacity: var(--clr-opacity) !important;
margin: 8rem !important;
min-width: 16rem;
transition: opacity 20s;
}
.red-circle {
position: relative;
display: block;
filter: blur(50px);
transition: all 10s ease-in-out;
animation: red-circle 10s ease infinite alternate;
width: 70px;
height: 140px;
background-color: var(--clr-red);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: translateX(20px);
}
.blue-circle {
position: relative;
display: block;
filter: blur(50px);
transition: all 10s ease-in-out;
animation: blue-circle 10s ease infinite alternate;
width: 70px;
height: 140px;
background-color: var(--clr-accent);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: translateX(-20px);
}
@keyframes red-circle {
0% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
25% {
transform: translate(30px, 0px) scale(2) rotate(80deg);
}
50% {
transform: translate(10px, 0px) scale(1) rotate(140deg);
}
75% {
transform: translate(20px, 0px) scale(1.5) rotate(70deg);
}
100% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
}
@keyframes blue-circle {
0% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
20% {
transform: translate(-10px, 0px) scale(1.5) rotate(50deg);
}
55% {
transform: translate(-40px, 0px) scale(2) rotate(80deg);
}
88% {
transform: translate(-30px, 0px) scale(1) rotate(40deg);
}
100% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
}
.hero-foreground {
position: relative;
text-align: left;
}
.action-call-1, .action-call-2 {
padding: 0;
cursor: default;
margin: 0.4rem;
background: unset;
}
.action-call-1:hover, .action-call-2:hover {
background: unset;
}
.hero div div {
margin: 0;
}
.action-call-1 a, .action-call-2 a {
text-decoration-line: none;
padding: clamp(0.4rem, 1vw, 0.6rem) clamp(1.3rem, 1vw, 1.3rem) clamp(0.5rem, 1vw, 0.6rem) clamp(1.3rem, 1vw, 1.3rem);
height: 100%;
width: 100%;
display: inline-block;
border-radius: 100vmax;
font-size: 1rem;
/*transition: all .3s;*/
font-weight: 500;
color: var(--clr-text-high);
}
.action-call-1 a {
background: var(--clr-transparent-accent-light);
font-weight: normal;
color: var(--clr-accent);
outline: 1px solid var(--clr-accent);
}
.open-contact-form {
background: var(--clr-transparent-accent-light);
font-weight: normal;
color: var(--clr-accent);
outline: 1px solid var(--clr-accent);
}
.open-contact-form:hover {
background-color: var(--clr-transparent-accent-light);
outline: 2px solid var(--clr-accent);
}
.action-call-1 a:hover {
outline: 2px solid var(--clr-accent);
}
.action-call-2 a {
background-color: var(--clr-0);
color: var(--clr-text-low);
font-weight: normal;
outline: 1px solid var(--clr-3);
}
.action-call-2 a:hover {
outline: 2px solid var(--clr-3);
}
@keyframes action-divider {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/*.recent-comparisons {*/
/* clip-path: polygon(0 0,50% 58px,100% 0,100% 100%,0 100%);*/
/* margin-top: -48px;*/
/*}*/
@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
/*@media (prefers-reduced-motion: no-preference) {*/
/*.recent-comparisons, .facts, .methodology-features, .table-features, .comparison-features {*/
/*.fact-1 div div div {*/
/* opacity: 0;*/
/* animation: fadein ease-in-out forwards;*/
/* animation-timeline: view();*/
/* animation-range-start: entry;*/
/* animation-range-end: contain -150%;*/
/*animation-delay: 1s;*/
/*}*/
/*}*/
/*Apply scrolling animations only to Chrome (to prevent section color issues with Safari):*/
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.recent-comparisons, .facts, .methodology-features {-chrome-:only(;
opacity: 0;
animation: fadein ease-in-out forwards;
animation-timeline: view();
animation-range-start: entry;
animation-range-end: contain -150%;
/*animation-delay: 1s;*/
);
}
}
.recent-comparisons {
background-color: var(--backdrop-filter-blur1);
}
.comparison-card {
color: var(--clr-text-low);
text-decoration-line: none;
margin: 1rem;
border-radius: 1rem;
transition: all, .3s;
width: 20rem;
display: inline-block;
background-image: none;
}
.comparison-card-header .gradient-title::after {
transform: scale(0);
animation: card-title-blur .5s ease-out forwards;
}
@keyframes card-title-blur {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.comparison-card:hover {
/*box-shadow: 0px 0px 25px var(--clr-2);*/
}
.new-indicator {
position: absolute;
z-index: 1;
font-size: 0.7rem;
top: 0;
right: 0;
background: var(--clr-red);
color: var(--clr-0);
border-radius: 100vmax;
padding: 0rem .5rem;
margin: 0.3rem;
font-weight: 700;
}
.comparison-card-header {
height: 9rem;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
width: 100%;
border: 2px solid var(--clr-3);
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0.5rem;
background-color: var(--clr-0);
}
.comparison-card-header h4, .auto-card-title-size {
color: var(--clr-text-high);
z-index: 1;
height: auto;
margin: 0 !important;
font-size: 4rem;
display: flex;
align-items: center;
justify-content: center;
background-size: 1%;
animation: 3s ease-out 0s 1 cTitleAnimation;
font-weight: 1000;
}
@keyframes cTitleAnimation {
0% {
-moz-background-size: 1%;
background-size: 1%;
}
100% {
-moz-background-size: 100%;
background-size: 100%;
}
}
.comparison-card-meta {
padding: 0.5rem;
border-bottom: 2px solid var(--clr-3);
border-right: 2px solid var(--clr-3);
border-left: 2px solid var(--clr-3);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.comparison-card:hover > .comparison-card-header, .comparison-card:hover > .comparison-card-meta {
outline: 1px solid var(--clr-3);
}
.facts {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--clr-0);
position: relative;
}
.facts .background {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
background-attachment: fixed;
background-size: cover;
filter: blur(30px);
}
/*.page-template-home section, .page-template-contribute section, .page-template-insider section, .page-template-sponsor section, .page-template-about section {*/
/* overflow: hidden;*/
/*}*/
/*.perfect-balance-stamp {*/
/* font-size: 2.2rem;*/
/* font-weight: 1000;*/
/* display: inline-block;*/
/* text-transform: uppercase;*/
/* font-family: 'Courier';*/
/* -webkit-mask-image: url('data:image/svg+xml,'); */
/* -webkit-mask-size: 2.6rem 2.4rem;*/
/* mask-size: 20rem 20rem;*/
/* mix-blend-mode: multiply;*/
/* color: var(--clr-transparent-accent);*/
/* border: 5px solid var(--clr-transparent-accent);*/
/* -webkit-mask-position: 13rem 6rem;*/
/* transform: rotate(-8deg);*/
/* border-radius: 1rem;*/
/* padding: 0.7rem 0rem 1rem 0rem;*/
/* line-height: 2.3rem;*/
/* width: 10ch;*/
/* margin: 1rem auto;*/
/* mask-image: url('../../assets/img/stamp-effect.png');*/
/*}*/
.scribble-background {
position: absolute;
opacity: 0.15;
z-index: 0;
}
.scribble-background {
transform: scale(19);
}
.methodology-features {
position: relative;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
overflow: hidden;
}
.methodology-features {
background-color: var(--clr-transparent-accent);
overflow: hidden;
}
.methodology-features h2 {
text-shadow: 0em 0em 0.6em var(--clr-0);
line-height: clamp(2em, 1vw, 3em);
}
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
z-index: 1;
}
.feature {
margin: clamp(1em, 2vw, 3em);
max-width: 20rem;
}
.feature h5 {
font-size: clamp(1.1rem, 1.1vw, 1.4rem);
}
.feature p {
font-size: 1rem;
margin: 0;
}
.feature-icon .icon {
background-color: var(--clr-0);
width: clamp(8rem, 1vw, 100%);
height: clamp(8rem, 1vw, 100%);
padding: 1rem;
}
/* .feature-icon svg .inner-icon path {
fill: var(--clr-1);
}
.feature-icon svg .inner-icon {
stroke: var(--clr-0);
fill: var(--clr-1);
}
.feature-icon svg .blob path {
stroke: var(--clr-1);
}
.feature-icon svg path {
stroke: var(--clr-1);
}
.feature-icon svg #box, .feature-icon svg .switch-buttons {
stroke: var(--clr-0);
fill: var(--clr-1);
}
.feature-icon svg .share-part {
fill: var(--clr-1);
}
.feature-icon svg #path875, .feature-icon svg .inner-icon {
fill: var(--clr-1);
stroke: none;
}
.feature-icon svg .blob g path {
fill: var(--clr-1);
stroke: var(--clr-0);
} */
/* */
.feature-icon .gears {
border-radius: 60% 27% 47% 70% / 57% 40% 74% 45%;
}
.feature-icon .magnifying-glass {
border-radius: 62% 43% 33% 61% / 60% 58% 50% 44%;
}
.feature-icon .box {
border-radius: 37% 82% 33% 52% / 57% 40% 74% 37%;
}
.feature-icon .active {
border-radius: 49% 59% 50% 33% / 42% 45% 38% 70%;
}
.feature-icon .share {
border-radius: 71% 46% 47% 48% / 53%;
}
.feature-icon .refresh {
border-radius: 31% 46% 47% 48% / 53%;
}
.feature-icon .shapes {
border-radius: 40% 34% 48% 36% / 48%;
}
/* border-radius: 56% 57% 50% 28% / 55%;
border-radius: 51% 29% 36% 52% / 50%; */
.feature-icon svg .fill, .feature-icon svg .fill path, .feature-icon svg g .fill path, .feature-icon svg g g {
fill: var(--clr-3);
}
.feature-icon svg .no-stroke {
stroke: none;
}
.methodology h2::after, .presentation h2::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 1rem;
transform: skew(-12deg);
background: var(--clr-transparent-accent);
/*z-index: -1;*/
}
.methodology h2::after, .presentation h2::after {
left: 0;
}
/*.home-foot h5:after{*/
/* content:"";*/
/* z-index:-1;*/
/* left:0em;*/
/* top:0em;*/
/* border-width:2px;*/
/* border-style:solid;*/
/* border-color:darkblue;*/
/* border-left-color:transparent;*/
/* border-top-color:transparent;*/
/* position:absolute;*/
/* width:100%;*/
/* height:1em;*/
/* transform:rotate(-1deg);*/
/* opacity:0.5;*/
/* border-radius:0.25em;*/
/*}*/
/* */
/* .feature h3 {
position: relative;
}
.feature p {
position: relative;
} */
/* .feature-icon {
background-size: cover;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8, %3Csvg width=%22100%25%22 height=%22100%25%22 viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22 %3E %3Cdefs%3E %3Cpattern id=%22pattern%22 patternUnits=%22userSpaceOnUse%22 width=%2225%22 height=%2225%22 viewBox=%220 0 100 100%22 fill=%22%234879d5%22 %3E %3Ccircle cx=%2250%22 cy=%2250%22 r=%2212.5%22 %2F%3E %3C%2Fpattern%3E %3CclipPath id=%22shape%22%3E %3Cpath fill=%22currentColor%22 d=%22M925%2C646Q902%2C792%2C771%2C861Q640%2C930%2C513.5%2C888.5Q387%2C847%2C276%2C795.5Q165%2C744%2C86.5%2C622Q8%2C500%2C86.5%2C378.5Q165%2C257%2C264%2C167.5Q363%2C78%2C498.5%2C83Q634%2C88%2C768%2C148Q902%2C208%2C925%2C354Q948%2C500%2C925%2C646Z%22%3E%3C%2Fpath%3E %3C%2FclipPath%3E %3C%2Fdefs%3E %3Cpath fill=%22url(%23pattern)%22 d=%22M925%2C646Q902%2C792%2C771%2C861Q640%2C930%2C513.5%2C888.5Q387%2C847%2C276%2C795.5Q165%2C744%2C86.5%2C622Q8%2C500%2C86.5%2C378.5Q165%2C257%2C264%2C167.5Q363%2C78%2C498.5%2C83Q634%2C88%2C768%2C148Q902%2C208%2C925%2C354Q948%2C500%2C925%2C646Z%22 transform=%22translate(-60%2C -60)%22%2F%3E %3Cg clip-path=%22url(%23shape)%22%3E %3Cpath fill=%22%234879d5%22 d=%22M925%2C646Q902%2C792%2C771%2C861Q640%2C930%2C513.5%2C888.5Q387%2C847%2C276%2C795.5Q165%2C744%2C86.5%2C622Q8%2C500%2C86.5%2C378.5Q165%2C257%2C264%2C167.5Q363%2C78%2C498.5%2C83Q634%2C88%2C768%2C148Q902%2C208%2C925%2C354Q948%2C500%2C925%2C646Z%22 %2F%3E %3C%2Fg%3E %3C%2Fsvg%3E");
} */
/* ============================================ */
/* HOME */
/* ============================================ */
/* ============================================ */
/* About */
/* ============================================ */
.container {
padding: 1rem;
max-width: 800px;
width: 100%;
text-align: left;
z-index: 1;
}
.what-is {
background: var(--backdrop-filter-blur1);
overflow: hidden;
}
.founder {
border-bottom: clamp(2px, 0.7vw, 3px) dashed var(--clr-1);
overflow: hidden;
}
.what-is .scribble-background {
opacity: 0.25;
transform: scale(22);
}
.founder .scribble-background {
transform: scale(12);
opacity: 0.35;
}
/* ============================================ */
/* About */
/* ============================================ */
/* ============================================ */
/* 404 */
/* ============================================ */
.notfound-container {
justify-content: center;
}
.notfound-title {
font-size: clamp(8rem, 8vw, 13rem);
color: var(--clr-accent);
}
.notfound-p {
color: var(--clr-text-low);
}
/* ============================================ */
/* 404 */
/* ============================================ */
/* ============================================ */
/* Privacy & Conditions */
/* ============================================ */
/* ============================================ */
/* Privacy & Conditions */
/* ============================================ */
/* ============================================ */
/* Footer */
/* ============================================ */
.back-to-top {
padding: 0 1rem 1rem;
background-color: var(--clr-1);
flex-wrap: wrap;
margin-top: 10rem;
}
.back-to-top-art {
height: 50px;
transform: translateY(-30px);
transition: transform, height, .3s;
width: 100%;
}
.back-to-top:hover .back-to-top-art {
transform: translateY(-40px);
}
.back-to-top div:nth-child(2) {
font-weight: bold;
color: var(--clr-2);
font-size: 3rem;
opacity: .5;
width: 100%;
pointer-events: none;
}
.back-to-top .action-call-1, .back-to-top .action-call-2 {
margin: 3rem 1rem;
}
/* ============================================ */
/* Footer */
/* ============================================ */
/* ============================================ */
/* Lightbox */
/* ============================================ */
/* ============================================ */
/* Lightbox */
/* ============================================ */
/* ============================================ */
/* Contribute */
/* ============================================ */
.page-header div {
z-index: 1;
margin: 1rem;
line-height: initial;
color: var(--clr-text-low);
}
.title-container {
margin: 1rem 1rem auto !important;
max-width: 700px;
}
.page-title {
margin: 0 auto !important;
font-weight: 1000;
position: relative;
}
/*.page-header div:nth-child(1) {*/
/* font-size: 1.1rem;*/
/* color: var(--clr-text-low);*/
/*}*/
.process {
background: var(--clr-transparent-accent);
}
.feature-icon .icon polyline {
stroke: var(--clr-3);
}
/* ============================================ */
/* Contribute */
/* ============================================ */
/* ============================================ */
/* Insider Access */
/* ============================================ */
/*.price-value::after {*/
/* position: absolute;*/
/* font-size: 0.8rem;*/
/* color: var(--clr-text-low);*/
/* top: 0.7rem;*/
/*}*/
/*.price1 .price-value::after {*/
/* content: "(like $9/mo)";*/
/* right: -1rem;*/
/*}*/
/*.price2 .price-value::after {*/
/* content: "(like $7/mo)";*/
/* right: -0.2rem;*/
/*}*/
/*.price {*/
/* display: flex;*/
/* flex-direction: row;*/
/* flex-wrap: wrap;*/
/* justify-content: center;*/
/* align-items: center;*/
/*}*/
.price {
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem;
}
.duration {
margin: 0.8rem;
color: var(--clr-text-low);
}
/* ============================================ */
/* Insider Access */
/* ============================================ */
/* ============================================ */
/* Sponsor */
/* ============================================ */
/* ============================================ */
/* Sponsor */
/* ============================================ */
/* ============================================ */
/* Blog */
/* ============================================ */
/*.single-blog .page-header svg {*/
/* position: absolute;*/
/* bottom: 0;*/
/* width: 100vw;*/
/* transform: translateY(clamp(0rem, 12vw, 19rem)) scaleX(-1);*/
/*}*/
/* ============================================ */
/* Blog */
/* ============================================ */
/* ============================================ */
/* Account */
/* ============================================ */
/* ============================================ */
/* Account */
/* ============================================ */
/* ============================================ */
/* ACF Forms */
/* ============================================ */
/* ============================================ */
/* ACF Forms */
/* ============================================ */
/* ============================================ */
/* Multi-select */
/* ============================================ */
.multiSelect {
margin: 2px;
}
.characteristic-name .multiSelect {
display: none;
}
.multiselect-container{
width: 100%;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
overflow: visible;
vertical-align: middle;
}
.multiselect-label{
font-weight: 500;
font-size: clamp(0.4rem, 1vw, 0.5rem);
margin: 0 5px
}
.multiselect-data-container{
position: relative;
overflow: visible;
vertical-align: middle;
}
.multiselect-button{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: var(--clr-0);
border: none;
padding: 0;
border-radius: unset;
margin-bottom: 0;
font-size: clamp(0.71rem, 1vw, 0.77rem) !important;
color: var(--clr-text-medium);
cursor: pointer;
}
.multiselect-text{
border: 0;
padding: 0 2px !important;
width: 100%;
min-height: unset;
border: none;
}
.multiselect-button input,
.multiselect-button b{
pointer-events: none;
/*border: none;*/
/*background-color: var(--clr-1);*/
}
.multiselect-list{
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 200px;
background-color: var(--clr-0);
border: 1px solid var(--clr-3);
box-shadow: 0 6px 12px var(--clr-3);
font-size: clamp(0.4rem, 1vw, 0.5rem);
text-align: left;
list-style: none;
background-clip: padding-box;
border-radius: 4px;
list-style-type: none;
overflow: auto;
z-index: 1000;
}
.multiselect-item-label{
display: flex;
height: 100%;
border: 1px solid transparent;
align-items: center;
padding: 0.3rem;
color: var(--clr-text-medium);
cursor: pointer;
}
.multiselect-item-label:hover {
background-color: var(--clr-1);
}
/*.multiselect-item-label--active{*/
/* border: 1px solid var(--clr-3); */
/*}*/
input.multiselect-text::placeholder {
font-size: 0.7em;
color: var(--clr-text-high);
opacity: 1;
}
input.multiselect-text {
padding: 0 0.6em !important;
margin: 0;
min-height: 1.3em;
height: 1.4em;
font-size: 1em;
border-width: 1px;
border-radius: 0.3em;
}
.multiselect-text:focus-visible {
outline: 0.1em solid var(--clr-transparent-accent);
}
.characteristic-name .multiSelect {
position: absolute;
top: 0;
right: 0;
}
.multiselect-checkbox {
margin-right: 0.4em;
}
.multiselect-item-label--select-all{
font-weight: 500;
border-bottom: 1px solid var(--clr-3);
padding: 0.3rem;
}
/* On edit mode characteristic-column expand */
.characteristic-column .characteristic-name, .characteristic-column .aspect, .characteristic-column .aspect-summary, .characteristic-column .item-header.extraneous-cell {
transition: width .5s;
}
.edit-mode .characteristic-column .characteristic-name, .edit-mode .characteristic-column .aspect {
width: clamp(250px, 14vw, 354px);
/*backdrop-filter: none;*/
/*-webkit-backdrop-filter: none; */
}
.edit-mode .characteristic-column .item-header.extraneous-cell {
width: clamp(250px, 14vw, 354px);
}
/*.edit-mode .scrolling .characteristic-column .item-header.extraneous-cell {*/
/* width: clamp(21.4em, 15vw, 21.6em);*/
/*}*/
/*.edit-mode .characteristic-column::after {*/
/* content: "";*/
/* display: block;*/
/* height: 100%;*/
/* width: 100vw;*/
/* background-color: var(--backdrop-filter-blur);*/
/* position: absolute;*/
/* top: 0;*/
/* right: 0;*/
/* transform: translateX(100%);*/
/* backdrop-filter: blur(7px);*/
/* transition: all .5s;*/
/*}*/
/* ============================================ */
/* Multi-select */
/* ============================================ */
/* ============================================ */
/* Archive Page */
/* ============================================ */
.comparisons {
background: var(--clr-1);
padding-top: 0;
min-height: 100vh;
}
.comparisons h2 {
color: var(--clr-3);
align-self: start;
}
.comparisons .comparisons-container {
max-width: 710px;
}
/* ============================================ */
/* Archive Page */
/* ============================================ */
/* ============================================ */
/* lightgallery-bundle.min.css 2.7.1 */
/* ============================================ */
@font-face{font-family:lg;src:url(../fonts/lg.woff2?io9a6k) format("woff2"),url(../fonts/lg.ttf?io9a6k) format("truetype"),url(../fonts/lg.woff?io9a6k) format("woff"),url(../fonts/lg.svg?io9a6k#lg) format("svg");font-weight:400;font-style:normal;font-display:block}.lg-icon{font-family:lg!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.lg-container{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}.lg-next,.lg-prev{background-color:rgba(0,0,0,.45);border-radius:2px;color:#999;cursor:pointer;display:block;font-size:22px;margin-top:-10px;padding:8px 10px 9px;position:absolute;top:50%;z-index:1084;outline:0;border:none}.lg-next.disabled,.lg-prev.disabled{opacity:0!important;cursor:default}.lg-next:hover:not(.disabled),.lg-prev:hover:not(.disabled){color:#fff}.lg-single-item .lg-next,.lg-single-item .lg-prev{display:none}.lg-next{right:20px}.lg-next:before{content:'\e095'}.lg-prev{left:20px}.lg-prev:after{content:'\e094'}@-webkit-keyframes lg-right-end{0%{left:0}50%{left:-30px}100%{left:0}}@-moz-keyframes lg-right-end{0%{left:0}50%{left:-30px}100%{left:0}}@-ms-keyframes lg-right-end{0%{left:0}50%{left:-30px}100%{left:0}}@keyframes lg-right-end{0%{left:0}50%{left:-30px}100%{left:0}}@-webkit-keyframes lg-left-end{0%{left:0}50%{left:30px}100%{left:0}}@-moz-keyframes lg-left-end{0%{left:0}50%{left:30px}100%{left:0}}@-ms-keyframes lg-left-end{0%{left:0}50%{left:30px}100%{left:0}}@keyframes lg-left-end{0%{left:0}50%{left:30px}100%{left:0}}.lg-outer.lg-right-end .lg-object{-webkit-animation:lg-right-end .3s;-o-animation:lg-right-end .3s;animation:lg-right-end .3s;position:relative}.lg-outer.lg-left-end .lg-object{-webkit-animation:lg-left-end .3s;-o-animation:lg-left-end .3s;animation:lg-left-end .3s;position:relative}.lg-toolbar{z-index:1082;left:0;position:absolute;top:0;width:100%}.lg-media-overlap .lg-toolbar{background-image:linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,.4))}.lg-toolbar .lg-icon{color:#999;cursor:pointer;float:right;font-size:24px;height:47px;line-height:27px;padding:10px 0;text-align:center;width:50px;text-decoration:none!important;outline:medium none;will-change:color;-webkit-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear;background:0 0;border:none;box-shadow:none}.lg-toolbar .lg-icon:hover{color:#fff}.lg-toolbar .lg-close:after{content:'\e070'}.lg-toolbar .lg-maximize{font-size:22px}.lg-toolbar .lg-maximize:after{content:'\e90a'}.lg-toolbar .lg-download:after{content:'\e0f2'}.lg-sub-html{color:#eee;font-size:16px;padding:10px 40px;text-align:center;z-index:1080;opacity:0;-webkit-transition:opacity .2s ease-out 0s;-o-transition:opacity .2s ease-out 0s;transition:opacity .2s ease-out 0s}.lg-sub-html h4{margin:0;font-size:13px;font-weight:700}.lg-sub-html p{font-size:12px;margin:5px 0 0}.lg-sub-html a{color:inherit}.lg-sub-html a:hover{text-decoration:underline}.lg-media-overlap .lg-sub-html{background-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}.lg-item .lg-sub-html{position:absolute;bottom:0;right:0;left:0}.lg-error-msg{font-size:14px;color:#999}.lg-counter{color:#999;display:inline-block;font-size:16px;padding-left:20px;padding-top:12px;height:47px;vertical-align:middle}.lg-closing .lg-next,.lg-closing .lg-prev,.lg-closing .lg-sub-html,.lg-closing .lg-toolbar{opacity:0;-webkit-transition:-webkit-transform .08 cubic-bezier(0,0,.25,1) 0s,opacity .08 cubic-bezier(0,0,.25,1) 0s,color .08 linear;-moz-transition:-moz-transform .08 cubic-bezier(0,0,.25,1) 0s,opacity .08 cubic-bezier(0,0,.25,1) 0s,color .08 linear;-o-transition:-o-transform .08 cubic-bezier(0,0,.25,1) 0s,opacity .08 cubic-bezier(0,0,.25,1) 0s,color .08 linear;transition:transform .08 cubic-bezier(0,0,.25,1) 0s,opacity .08 cubic-bezier(0,0,.25,1) 0s,color .08 linear}body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont{opacity:0;-moz-transform:scale3d(.5,.5,.5);-o-transform:scale3d(.5,.5,.5);-ms-transform:scale3d(.5,.5,.5);-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);will-change:transform,opacity;-webkit-transition:-webkit-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-moz-transition:-moz-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-o-transition:-o-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;transition:transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important}body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont{opacity:1;-moz-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}.lg-icon:focus-visible{color:#fff;border-radius:3px;outline:1px dashed rgba(255,255,255,.6)}.lg-toolbar .lg-icon:focus-visible{border-radius:8px;outline-offset:-5px}.lg-outer .lg-thumb-outer{background-color:#0d0a0a;width:100%;max-height:350px;overflow:hidden;float:left}.lg-outer.lg-single-item .lg-thumb-outer{display:none}.lg-outer.lg-can-toggle .lg-item{padding-bottom:0}.lg-outer .lg-video-cont{text-align:center;display:inline-block;vertical-align:middle;position:relative}.lg-outer .lg-video-cont .lg-object{width:100%!important;height:100%!important}.lg-outer .lg-has-iframe .lg-video-cont{-webkit-overflow-scrolling:touch;overflow:auto}.lg-outer .lg-video-poster{z-index:1}@keyframes lg-play-stroke{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes lg-play-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lg-video-play-button{width:18%;max-width:140px;position:absolute;top:50%;left:50%;z-index:2;cursor:pointer;transform:translate(-50%,-50%) scale(1);will-change:opacity,transform;-webkit-transition:-webkit-transform .25s cubic-bezier(.17,.88,.32,1.28),opacity .1s;-moz-transition:-moz-transform .25s cubic-bezier(.17,.88,.32,1.28),opacity .1s;-o-transition:-o-transform .25s cubic-bezier(.17,.88,.32,1.28),opacity .1s;transition:transform .25s cubic-bezier(.17,.88,.32,1.28),opacity .1s}.lg-video-play-button:hover .lg-video-play-icon,.lg-video-play-button:hover .lg-video-play-icon-bg{opacity:1}.lg-video-play-icon-bg{fill:none;stroke-width:3%;stroke:#fcfcfc;opacity:.6;will-change:opacity;-webkit-transition:opacity .12s ease-in;-o-transition:opacity .12s ease-in;transition:opacity .12s ease-in}.lg-video-play-icon-circle{position:absolute;top:0;left:0;bottom:0;right:0;fill:none;stroke-width:3%;stroke:rgba(30,30,30,.9);stroke-opacity:1;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200}.lg-video-play-icon{position:absolute;width:25%;max-width:120px;left:50%;top:50%;transform:translate3d(-50%,-50%,0);opacity:.6;will-change:opacity;-webkit-transition:opacity .12s ease-in;-o-transition:opacity .12s ease-in;transition:opacity .12s ease-in}.lg-video-play-icon .lg-video-play-icon-inner{fill:#fcfcfc}.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image,.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transition-duration:0s!important;transition-duration:0s!important}.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap{will-change:transform;-webkit-transition:-webkit-transform .5s cubic-bezier(.12,.415,.01,1.19) 0s;-moz-transition:-moz-transform .5s cubic-bezier(.12,.415,.01,1.19) 0s;-o-transition:-o-transform .5s cubic-bezier(.12,.415,.01,1.19) 0s;transition:transform .5s cubic-bezier(.12,.415,.01,1.19) 0s}.lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap{will-change:transform;-webkit-transition:-webkit-transform .8s cubic-bezier(0,0,.25,1) 0s;-moz-transition:-moz-transform .8s cubic-bezier(0,0,.25,1) 0s;-o-transition:-o-transform .8s cubic-bezier(0,0,.25,1) 0s;transition:transform .8s cubic-bezier(0,0,.25,1) 0s}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img,.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition:-webkit-transform .5s cubic-bezier(.12,.415,.01,1.19) 0s,opacity .15s!important;-moz-transition:-moz-transform .5s cubic-bezier(.12,.415,.01,1.19) 0s,opacity .15s!important;-o-transition:-o-transform .5s cubic-bezier(.12,.415,.01,1.19) 0s,opacity .15s!important;transition:transform .5s cubic-bezier(.12,.415,.01,1.19) 0s,opacity .15s!important;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.no-transition,.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.no-transition{transition:none!important}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition,.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition{transform:scale3d(1,1,1) translate3d(-50%,-50%,0)!important;max-width:none!important;max-height:none!important;top:50%!important;left:50%!important}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-x,.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-x{transform:scale3d(1,1,1) translate3d(-50%,0,0)!important;top:0!important;left:50%!important;max-width:none!important;max-height:none!important}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-y,.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-y{transform:scale3d(1,1,1) translate3d(0,-50%,0)!important;top:50%!important;left:0!important;max-width:none!important;max-height:none!important}.lg-icon.lg-zoom-in:after{content:'\e311'}.lg-actual-size .lg-icon.lg-zoom-in{opacity:.5;pointer-events:none}.lg-icon.lg-actual-size{font-size:20px}.lg-icon.lg-actual-size:after{content:'\e033'}.lg-icon.lg-zoom-out{opacity:.5;pointer-events:none}.lg-icon.lg-zoom-out:after{content:'\e312'}.lg-zoomed .lg-icon.lg-zoom-out{opacity:1;pointer-events:auto}.lg-outer.lg-first-slide-loading .lg-actual-size,.lg-outer.lg-first-slide-loading .lg-zoom-in,.lg-outer.lg-first-slide-loading .lg-zoom-out,.lg-outer[data-lg-slide-type=iframe] .lg-actual-size,.lg-outer[data-lg-slide-type=iframe] .lg-zoom-in,.lg-outer[data-lg-slide-type=iframe] .lg-zoom-out,.lg-outer[data-lg-slide-type=video] .lg-actual-size,.lg-outer[data-lg-slide-type=video] .lg-zoom-in,.lg-outer[data-lg-slide-type=video] .lg-zoom-out{opacity:.75;pointer-events:none}.lg-group:after{content:'';display:table;clear:both}.lg-container{display:none;outline:0}.lg-container.lg-show{display:block}.lg-on{scroll-behavior:unset}.lg-overlay-open{overflow:hidden}.lg-next,.lg-prev,.lg-toolbar{opacity:0;will-change:transform,opacity;-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1) 0s,opacity .25s cubic-bezier(0,0,.25,1) 0s;-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1) 0s,opacity .25s cubic-bezier(0,0,.25,1) 0s;-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1) 0s,opacity .25s cubic-bezier(0,0,.25,1) 0s;transition:transform .25s cubic-bezier(0,0,.25,1) 0s,opacity .25s cubic-bezier(0,0,.25,1) 0s}.lg-show-in .lg-next,.lg-show-in .lg-prev,.lg-show-in .lg-toolbar{opacity:1}.lg-show-in .lg-hide-items .lg-prev{opacity:0;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}.lg-show-in .lg-hide-items .lg-next{opacity:0;-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}.lg-show-in .lg-hide-items .lg-toolbar{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.lg-outer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:1050;text-align:left;opacity:.001;outline:0;will-change:auto;overflow:hidden;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-outer *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lg-outer.lg-zoom-from-image{opacity:1}.lg-outer.lg-visible{opacity:1}.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current,.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide,.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide{-webkit-transition-duration:inherit!important;transition-duration:inherit!important;-webkit-transition-timing-function:inherit!important;transition-timing-function:inherit!important}.lg-outer.lg-css3.lg-dragging .lg-item.lg-current,.lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide,.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide{-webkit-transition-duration:0s!important;transition-duration:0s!important;opacity:1}.lg-outer.lg-grab img.lg-object{cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.lg-outer.lg-grabbing img.lg-object{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.lg-outer .lg-content{position:absolute;top:0;left:0;right:0;bottom:0}.lg-outer .lg-inner{width:100%;position:absolute;left:0;top:0;bottom:0;-webkit-transition:opacity 0s;-o-transition:opacity 0s;transition:opacity 0s;white-space:nowrap}.lg-outer .lg-item{display:none!important}.lg-outer .lg-item:not(.lg-start-end-progress){background:url(../images/loading.gif) no-repeat scroll center center transparent}.lg-outer.lg-css3 .lg-current,.lg-outer.lg-css3 .lg-next-slide,.lg-outer.lg-css3 .lg-prev-slide{display:inline-block!important}.lg-outer .lg-img-wrap,.lg-outer .lg-item{display:inline-block;text-align:center;position:absolute;width:100%;height:100%}.lg-outer .lg-img-wrap:before,.lg-outer .lg-item:before{content:'';display:inline-block;height:100%;vertical-align:middle}.lg-outer .lg-img-wrap{position:absolute;left:0;right:0;top:0;bottom:0;white-space:nowrap;font-size:0}.lg-outer .lg-item.lg-complete{background-image:none}.lg-outer .lg-item.lg-current{z-index:1060}.lg-outer .lg-object{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%;width:auto;height:auto;position:relative}.lg-outer .lg-empty-html .lg-sub-html,.lg-outer .lg-empty-html.lg-sub-html{display:none}.lg-outer.lg-hide-download .lg-download{opacity:.75;pointer-events:none}.lg-outer .lg-first-slide .lg-dummy-img{position:absolute;top:50%;left:50%}.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html{opacity:1;transition:opacity .2s ease-out .15s}.lg-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1040;background-color:#000;opacity:0;will-change:auto;-webkit-transition:opacity 333ms ease-in 0s;-o-transition:opacity 333ms ease-in 0s;transition:opacity 333ms ease-in 0s}.lg-backdrop.in{opacity:1}.lg-css3.lg-no-trans .lg-current,.lg-css3.lg-no-trans .lg-next-slide,.lg-css3.lg-no-trans .lg-prev-slide{-webkit-transition:none 0s ease 0s!important;-moz-transition:none 0s ease 0s!important;-o-transition:none 0s ease 0s!important;transition:none 0s ease 0s!important}.lg-css3.lg-use-css3 .lg-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-css3.lg-use-css3 .lg-item.lg-start-progress{-webkit-transition:-webkit-transform 1s cubic-bezier(.175,.885,.32,1.275) 0s;-moz-transition:-moz-transform 1s cubic-bezier(.175,.885,.32,1.275) 0s;-o-transition:-o-transform 1s cubic-bezier(.175,.885,.32,1.275) 0s;transition:transform 1s cubic-bezier(.175,.885,.32,1.275) 0s}.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress{-webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.25,1) 0s;-moz-transition:-moz-transform 1s cubic-bezier(0,0,.25,1) 0s;-o-transition:-o-transform 1s cubic-bezier(0,0,.25,1) 0s;transition:transform 1s cubic-bezier(0,0,.25,1) 0s}.lg-css3.lg-slide.lg-use-css3 .lg-item{opacity:0}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current,.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide,.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide{-webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-moz-transition:-moz-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-o-transition:-o-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;transition:transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s}.lg-container{display:none}.lg-container.lg-show{display:block}.lg-container.lg-dragging-vertical .lg-backdrop{-webkit-transition-duration:0s!important;transition-duration:0s!important}.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current{-webkit-transition-duration:0s!important;transition-duration:0s!important;opacity:1}.lg-inline .lg-backdrop,.lg-inline .lg-outer{position:absolute}.lg-inline .lg-backdrop{z-index:1}.lg-inline .lg-outer{z-index:2}.lg-inline .lg-maximize:after{content:'\e909'}.lg-components{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);will-change:transform;-webkit-transition:-webkit-transform .35s ease-out 0s;-moz-transition:-moz-transform .35s ease-out 0s;-o-transition:-o-transform .35s ease-out 0s;transition:transform .35s ease-out 0s;z-index:1080;position:absolute;bottom:0;right:0;left:0}
/* ============================================ */
/* lightgallery-bundle.min.css 2.7.1 */
/* ============================================ */
/* ============================================ */
/* swiper-bundle.min.css */
/* ============================================ */
/**
* Swiper 9.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 13, 2023
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-slide,swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after{content:'prev'}.swiper-button-next{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
/* ============================================ */
/* swiper-bundle.min.css */
/* ============================================ */
/* ============================================ */
/* charts.min.css */
/* ============================================ */
@property --color-1{syntax:"";initial-value:transparent;inherits:true}@property --color-2{syntax:"";initial-value:transparent;inherits:true}@property --color-3{syntax:"";initial-value:transparent;inherits:true}@property --color-4{syntax:"";initial-value:transparent;inherits:true}@property --color-5{syntax:"";initial-value:transparent;inherits:true}@property --color-6{syntax:"";initial-value:transparent;inherits:true}@property --color-7{syntax:"";initial-value:transparent;inherits:true}@property --color-8{syntax:"";initial-value:transparent;inherits:true}@property --color-9{syntax:"";initial-value:transparent;inherits:true}@property --color-10{syntax:"";initial-value:transparent;inherits:true}@property --color{syntax:"";inherits:true}@property --chart-bg-color{syntax:"";inherits:true}@property --aspect-ratio{syntax:"";initial-value:auto;inherits:true}@property --labels-size{syntax:"";initial-value:0;inherits:true}@property --labels-align-block{syntax:"";inherits:true}@property --labels-align-inline{syntax:"";inherits:true}@property --primary-axis-width{syntax:"";initial-value:1px;inherits:true}@property --secondary-axes-width{syntax:"";initial-value:1px;inherits:true}@property --data-axes-width{syntax:"";initial-value:1px;inherits:true}@property --legend-border-width{syntax:"";initial-value:1px;inherits:true}@property --primary-axis-style{syntax:"";initial-value:solid;inherits:true}@property --secondary-axes-style{syntax:"";initial-value:solid;inherits:true}@property --data-axes-style{syntax:"";initial-value:solid;inherits:true}@property --legend-border-style{syntax:"";initial-value:solid;inherits:true}@property --primary-axis-color{syntax:"";initial-value:transparent;inherits:true}@property --secondary-axes-color{syntax:"";initial-value:transparent;inherits:true}@property --data-axes-color{syntax:"";initial-value:transparent;inherits:true}@property --legend-border-color{syntax:"";initial-value:transparent;inherits:true}@property --start{syntax:"";inherits:true}@property --end{syntax:"";inherits:true}@property --size{syntax:"";inherits:true}@property --line-size{syntax:"";inherits:true}
/* ============================================ */
/* charts.min.css */
/* ============================================ */
/* ============================================ */
/* Comparison charts */
/* ============================================ */
/* Swipper */
.swiper {
width: 100%;
height: 100%;
}
.swiper-wrapper {
margin-top: 4rem;
}
.swiper-button-next, .swiper-button-prev {
top: var(--swiper-navigation-top-offset,5%);
}
.swiper-slide {
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-button-next, .swiper-button-prev {
color: var(--clr-3);
}
/* Chart styles start */
/* To center the buttons */
.charts {
padding: 0 0.3rem;
z-index: 3;
background-color: var(--clr-0);
/*margin: clamp(4rem, 5vw, 8rem) auto;*/
}
/* .chart-container tbody td .data .el-text {
color: inherit !important;
} */
/* animation */
/* Highligted */
/* @keyframes highlighted-bar {
0% {
box-shadow: none;
}
50% {
box-shadow: 0 0 1px 0 black, 0 0 20px 5px darkgrey;
}
100% {
box-shadow: none;
}
} */
/* ============================================ */
/* Comparison charts */
/* ============================================ */
/* ============================================ */
/* Contact us */
/* ============================================ */
.the-contact-form {
height: 634px;
width: 100%;
min-width: 300px;
max-width: 700px;
overflow: hidden;
z-index: 10;
position: fixed;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%) scale(0);
-moz-transform: translate(-50%,-50%) scale(0);
-webkit-transform: translate(-50%,-50%) scale(0);
transform: translate(-50%,-50%) scale(0) scaleY(0);
padding: 1rem;
border-radius: 1rem;
visibility: hidden;
border: 2px solid var(--clr-text-low);
background-color: black;
transition-duration: .3s;
transition-timing-function: ease-in-out;
/*opacity: 0;*/
}
.the-contact-form iframe {
/* width: 700px; */
/* min-width: 300px; */
width: 100%;
/* height: 847px; */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
outline: none;
}
.show-form {
-ms-transform: translate(-50%,-50%) scaleY(1) !important;
-moz-transform: translate(-50%,-50%) scaleY(1) !important;
-webkit-transform: translate(-50%,-50%) scaleY(1) !important;
transform: translate(-50%,-50%) scaleY(1) !important;
visibility: visible;
/*border-radius: 0.6vmax;*/
/*opacity: 1;*/
}
.close-form {
position: absolute;
top: 0;
right: 0;
z-index: 1;
padding: 0;
cursor: pointer;
color: var(--clr-red);
background-color: hsla(330, 72%, 40%, 0.4);
border-radius: 0.7rem;
font-size: 1.5rem;
font-weight: 700;
height: 2.7rem;
width: 2.7rem;
display: flex;
justify-content: center;
align-items: center;
margin: 0.5rem;
}
.close-form:hover {
outline: 1px solid var(--clr-red);
}
.close-form svg {
pointer-events: none;
}
.the-contact-form a {
margin: 0.5rem;
z-index: 1;
position: absolute;
top: 0;
left: 0;
background: var(--clr-transparent-accent);
font-weight: normal;
line-height: 0;
padding: 0.7rem 1.4rem 0.5rem;
border-radius: 0.7rem;
}
.the-contact-form a:hover {
outline: 1px solid var(--clr-accent);
}
.the-contact-form a svg {
width: 1.1rem;
margin-right: .1rem;
transform: translateY(-2px);
}
.open-contact-form svg {
height: 1.15rem;
width: 1.15rem;
margin-left: 0.5rem;
margin-right: -0.15rem;
}
.external-link-icon {
width: 0.7rem;
margin: auto auto auto 0.7rem;
display: inline-block;
color: var(--clr-text-high);
}
/* ============================================ */
/* Contact us */
/* ============================================ */
/* ============================================ */
/* Guidelines */
/* ============================================ */
.presentation {
padding-top: 0;
}
/* ============================================ */
/* Guidelines */
/* ============================================ */
/* ============================================ */
/* User changeable */
/* ============================================ */
.user-changeable.changed.change-color, .user-changeable.unchanged {
cursor: pointer;
}
.user-changeable.change-color.changed {
background-color: var(--clr-transparent-accent);
}
.user-changeable.change-color.changed .el-text {
color: var(--clr-accent) !important;
}
.user-changeable.change-color.changed:hover {
background: var(--clr-transparent-accent-light);
}
.item-characteristic-value.user-changeable.unchanged:hover {
background: var(--clr-2);
}
.user-changeable-popup-content {
background: var(--clr-0);
border-radius: 1rem;
box-shadow: 0 0 10px var(--clr-3);
transition-duration: .3s;
transition-timing-function: ease-in-out;
visibility: hidden;
transform: scaleY(0);
max-width: -moz-available;
margin: 1rem;
width: 300px;
max-width: -webkit-fill-available;
max-height: 95vh;
overflow-y: auto;
}
.user-changeable-popup.show {
opacity: 1;
visibility: visible;
}
.user-changeable-popup {
position: fixed;
top: 0;
left: 0;
z-index: 4;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
background: var(--backdrop-filter-blur1);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
transition-duration: .2s;
transition-timing-function: ease-in-out;
}
.user-changeable-popup.show .user-changeable-popup-content {
transform: scaleY(1) !important;
visibility: visible;
}
/*.radio-group {*/
/* margin: 10px 0;*/
/*}*/
.popup-buttons {
padding: 1rem;
text-align: center;
border-top: 1px solid var(--clr-2);
}
.popup-buttons button {
margin: auto 0.5rem;
}
.item-characteristic-value.user-changeable.unchanged {
background: var(--clr-3);
}
.item-characteristic-value.user-changeable.unchanged .el-text {
color: var(--clr-text-medium) !important;
}
.item-characteristic-value.user-changeable.unchanged .suffix {
color: var(--clr-text-medium) !important;
}
.item-characteristic-value.user-changeable.change-color .suffix, .item-characteristic-value.user-changeable.change-color .prefix {
color: var(--clr-accent) !important;
}
/*.item-characteristic-value.user-changeable .suffix {*/
/* transform: translate(-6px, 1px);*/
/*}*/
.item-characteristic-value .suffix {
pointer-events: none;
}
.popup-header {
/*background: var(--backdrop-filter-blur1);*/
padding: 1rem;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.popup-item-image {
max-height: 100px;
max-width: 100px;
}
.popup-item-brand {
width: 60px;
position: absolute;
top: 0;
left: 0;
margin: 1rem;
}
.user-changeable-mode {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.popup-item-name {
font-size: 0.7rem;
color: var(--clr-text-low);
}
.popup-item-variation {
color: var(--clr-text-low);
font-size: .8rem;
font-weight: 500;
}
.popup-characteristic-name {
color: var(--clr-text-low);
font-size: .9rem;
font-weight: 700;
margin: 1rem auto 0;
}
#ucpreset:checked ~ label:nth-child(2), #uccustom:checked ~ label:nth-child(4) {
background: var(--clr-accent);
color: var(--clr-0);
}
#ucpreset:not(:checked) ~ label:nth-child(2):hover, #uccustom:not(:checked) ~ label:nth-child(4):hover {
background: var(--clr-1);
cursor: pointer;
}
#ucpreset:not(:checked) ~ label:nth-child(2), #uccustom:not(:checked) ~ label:nth-child(4) {
background: var(--backdrop-filter-blur1);
color: var(--clr-text-low);
}
#ucpreset ~ label, #uccustom ~ label {
width: 100%;
padding: 0.5rem;
}
.preset-values, .custom-options, .custom-options .custom-options-type, .custom-options .percentage-options {
display: flex;
padding: 1rem 0;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.preset-values {
padding: 1rem;
}
.preset-values label, .custom-options .custom-options-type label, .custom-options .percentage-options label {
position: relative;
width: fit-content;
background: var(--clr-1);
padding: 0.4rem 1rem;
border-radius: 100vmax;
margin: 0.4rem;
}
.preset-values input:checked + label, .custom-options .custom-options-type input:checked + label, .custom-options .percentage-options input:checked + label {
background: var(--clr-accent);
color: var(--clr-0);
}
/*#preset-values input:checked + label::before {*/
/* content: "\26AB";*/
/* width: 5px;*/
/* height: 5px;*/
/* display: ;*/
/* transform: scale(0.4);*/
/* display: none;*/
/* position: absolute;*/
/*}*/
.preset-values input:not(:checked) + label:hover, .custom-options .custom-options-type input:not(:checked) + label:hover, .custom-options .percentage-options input:not(:checked) + label:hover {
background: var(--clr-2);
cursor: pointer;
}
.preset-values input, .custom-options .custom-options-type input, .custom-options .percentage-options input {
display: none;
}
.user-changeable-preset, .user-changeable-custom {
display: none;
}
.custom-options .custom-value {
text-align: center;
border-radius: 0.6rem;
margin: 1rem;
border: 1px solid var(--clr-3);
}
.popup-ok {
background: var(--clr-0);
color: var(--clr-accent);
outline: 1px solid var(--clr-accent);
}
.popup-ok:hover {
background: var(--clr-transparent-accent-light);
}
.popup-dismiss {
background: var(--clr-0);
color: var(--clr-red);
outline: 1px solid var(--clr-red);
}
.popup-dismiss:hover {
background: var(--clr-transparent-red-light);
}
.user-changeable .el-text {
font-weight: 500;
}
.item-characteristic-value .user-changeable-notice {
display: none;
}
/*TEST*/
.auto-proportionate-container {
margin-top: 15px;
padding: 10px;
border-top: 1px solid var(--clr-border);
}
.auto-proportionate-container label {
margin-left: 8px;
cursor: pointer;
}
.auto-proportionate-adjustment {
cursor: pointer;
}
.auto-proportionate-container [tooltip]:hover::after {
display: inline-block;
}
.auto-proportionate-container [tooltip]:hover::after {
white-space: wrap;
text-overflow: unset;
height: auto;
width: 100%;
font-size: 0.8rem;
}
.user-changeable-notice {
margin: 1rem;
padding: .5rem 1rem;
background: var(--clr-transparent-yellow);
border-radius: 0.5rem;
color: var(--clr-yellow) !important;
font-size: 0.8rem !important;
font-weight: normal !important;
}
/* ============================================ */
/* User changeable */
/* ============================================ */
/* ============================================ */
/* Misc */
/* ============================================ */
.early-stage {
margin: 1rem;
padding: .5rem 1rem;
background: var(--clr-transparent-yellow);
border-radius: 0.5rem;
color: var(--clr-yellow) !important;
font-size: 0.8rem !important;
font-weight: normal !important;
}
.early-stage svg {
position: relative;
width: auto;
height: 12px;
margin: auto .2rem auto auto;
padding: 0;
transform: translateY(-.1rem);
}
/* ============================================ */
/* Misc */
/* ============================================ */
/* ============================================ */
/* Chrome/Webkit/Blink support */
/* ============================================ */
@supports (not (-moz-appearance: none)) {
/*@media only screen and (max-device-width : 1190px) {*/
/* .aspect.battery-icon::before, .aspect.summary-icon::before {*/
/* scale: .6;*/
/* }*/
/*}*/
/*.characteristic-name {*/
/* text-indent: 0;*/
/* padding-left: clamp(9px, 1vw, 10px);*/
/*}*/
}
/* ============================================ */
/* Chrome/Webkit/Blink support */
/* ============================================ */