/*
Design System
v0.0.4 | March 2021
simonecarluccio.com
*/
/* @group Reset */
/* @group Meyer */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* @end */
/* @group Simone */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html, body {
margin: 0 auto;
}
a,
a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
cursor: pointer;
border: none;
outline: none;
}
html, p, a {
-webkit-text-size-adjust: 100%;
}
img {
display: block;
}
/* @end */
/* @end */
/* @group Variables Panel */
:root {
/* page structure */
--bxd-width: 1920px;
--bxd-color: #E1E1E1;
--sep-color: #E1E1E1;
}
/* @end */
/* @group Page Structure */
/*
Index:
.bxd Boxed used for width limit with very wide screens
.head-cnt Header Container used for the header (modulating LR padding for icon compensation)
.main-cnt Main Container used for main elements as main, articles etc...
.thin-cnt Thin Container used for centered elements (6 of 8 column)...
.full-cnt Full Page Container used for 100% width modules
.pano-cnt Panoramic Container used for bleeding modules, elements etc...
.foot-cnt Footer Container used for the footer (modulating LR padding for icon compensation)
.absl-cnt Absolute Container
.main-sep Main Separator
.pano-sep Panoramic Separator
:root:
--bxd-width Boxed Width
--bxd-color Boxed Color
--sep-color Separator Color
Example:
*/
.bxd {
margin: 0 auto;
width: 100%;
max-width: var(--bxd-width);
-webkit-box-shadow: 0px 0px 0px 1px var(--bxd-color);
box-shadow: 0px 0px 0px 1px var(--bxd-color);
}
/* @group Containers */
.head-cnt {
margin: 0 auto;
width: var(--head-mob-width);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--head-mob-padding);
padding-right: var(--head-mob-padding);
/* to fix nav button animation */
overflow: hidden;
}
.main-cnt {
margin: 0 auto;
max-width: var(--main-mob-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--main-mob-padding);
padding-right: var(--main-mob-padding);
}
.thin-cnt {
margin: 0 auto;
max-width: var(--main-mob-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--thin-mob-padding);
padding-right: var(--thin-mob-padding);
}
.full-cnt {
margin: 0 auto;
width: var(--full-mob-width);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--full-mob-padding);
padding-right: var(--full-mob-padding);
}
.pano-cnt {
margin: 0 auto;
}
.foot-cnt {
margin: 0 auto;
width: var(--foot-mob-width);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--foot-mob-padding);
padding-right: var(--foot-mob-padding);
}
.absl-cnt {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 656px) {
.thin-cnt {
max-width: 640px;
padding-top: 0;
padding-bottom: 0;
padding-left: var(--main-des-padding);
padding-right: var(--main-des-padding);
}
}
@media screen and (min-width: 968px) {
.thin-cnt {
max-width: 952px;
padding-top: 0;
padding-bottom: 0;
padding-left: var(--main-des-padding);
padding-right: var(--main-des-padding);
}
}
@media screen and (min-width: 1280px) {
.head-cnt {
max-width: var(--head-des-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--head-des-padding);
padding-right: var(--head-des-padding);
}
.main-cnt {
max-width: var(--main-des-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--main-des-padding);
padding-right: var(--main-des-padding);
}
.thin-cnt {
max-width: var(--thin-mob-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--thin-des-padding);
padding-right: var(--thin-des-padding);
}
.full-cnt {
max-width: var(--full-des-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--full-des-padding);
padding-right: var(--full-des-padding);
}
.foot-cnt {
max-width: var(--foot-des-maxwidth);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--foot-des-padding);
padding-right: var(--foot-des-padding);
}
}
/* iPhone "notch" support */
@media screen and (max-width: 1279px) {
@supports(padding: max(0px)) {
/* containers (left and right) */
.head-cnt {
padding-left: max(var(--head-mob-padding), env(safe-area-inset-left));
padding-right: max(var(--head-mob-padding), env(safe-area-inset-right));
}
.main-cnt {
padding-left: max(var(--main-mob-padding), env(safe-area-inset-left));
padding-right: max(var(--main-mob-padding), env(safe-area-inset-right));
}
.thin-cnt {
padding-left: max(var(--main-mob-padding), env(safe-area-inset-left));
padding-right: max(var(--main-mob-padding), env(safe-area-inset-right));
}
.full-cnt {
padding-left: max(var(--main-mob-padding), env(safe-area-inset-left));
padding-right: max(var(--main-mob-padding), env(safe-area-inset-right));
}
.foot-cnt {
padding-left: max(var(--foot-mob-padding), env(safe-area-inset-left));
padding-right: max(var(--foot-mob-padding), env(safe-area-inset-right));
}
/* footer (bottom) */
footer {
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
}
}
/* @end */
/* @group Separators */
.main-sep,
.pano-sep {
margin: 0 auto;
border-bottom: 1px solid var(--sep-color);
}
.main-sep {max-width: 1280px;}
.pano-sep {max-width: 100vw;}
/* @end */
/* @end */
/* @group Input */
input {
padding: 0 16px;
height: var(--input-height);
border-radius: var(--input-radius);
}
input[type=text],
input[type=email],
input[type=password] {background-color: var(--input-bgr-color); color: var(--input-txt-color);}
input[type=submit] {background-color: var(--submt-bgr-color); color: var(--submt-txt-color); cursor: pointer !important;}
input[type=submit]:hover {opacity: 0.9;}
/* Remove borders and outlines */
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0px solid #FFF;
outline: none;
}
/* Input and textarea placeholders */
::-webkit-input-placeholder {color: var(--input-plc-color); opacity: 1; -webkit-transition: opacity 0.3s 0 ease; -o-transition: opacity 0.3s 0 ease; transition: opacity 0.3s 0 ease;}
::-ms-input-placeholder {color: var(--input-plc-color); opacity: 1; -webkit-transition: opacity 0.3s 0 ease; -o-transition: opacity 0.3s 0 ease; transition: opacity 0.3s 0 ease;}
:-ms-input-placeholder {color: var(--input-plc-color); opacity: 1; -webkit-transition: opacity 0.3s 0 ease; -o-transition: opacity 0.3s 0 ease; transition: opacity 0.3s 0 ease;}
::placeholder {color: var(--input-plc-color); opacity: 1; -webkit-transition: opacity 0.3s 0 ease; -o-transition: opacity 0.3s 0 ease; transition: opacity 0.3s 0 ease;}
:-ms-input-placeholder {color: var(--input-plc-color); opacity: 1; -webkit-transition: opacity 0.3s 0 ease; -o-transition: opacity 0.3s 0 ease; transition: opacity 0.3s 0 ease;}
:-moz-placeholder {color: var(--input-plc-color); opacity: 1; -webkit-transition: opacity 0.3s 0 ease; -o-transition: opacity 0.3s 0 ease; transition: opacity 0.3s 0 ease;}
/* Hide input and textarea placeholders */
input:focus::-webkit-input-placeholder {opacity: 0;}
input:focus::-ms-input-placeholder {opacity: 0;}
input:focus:-ms-input-placeholder {opacity: 0;}
input:focus::placeholder {opacity: 0;}
input:focus:-ms-input-placeholder {opacity: 0;}
input:focus:-moz-placeholder {opacity: 0;}
textarea:focus::-webkit-input-placeholder {opacity: 0;}
textarea:focus::-ms-input-placeholder {opacity: 0;}
textarea:focus:-ms-input-placeholder {opacity: 0;}
textarea:focus::placeholder {opacity: 0;}
textarea:focus:-ms-input-placeholder {opacity: 0;}
textarea:focus:-moz-placeholder {opacity: 0;}
input::-moz-focus-inner {border: 0;}
/* Autofill background and text color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: var(--input-txt-color);
-webkit-box-shadow: 0 0 0px 1000px var(--input-bgr-color) inset;
-webkit-transition: background-color 5000s ease-in-out 0s;
-o-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
}
/* @end */
/* @group Utilities */
/*
Index:
.nsel Disable Selection
.sel Enable Selection
.npev Disable pointer-events
*/
/* @group Selections */
.opa-over {opacity: 1.00 !important;}
@media screen and (orientation: landscape) and (min-width: 1024px) {
.opa-over {opacity: 0.85 !important;}
}
@media screen and (orientation: portrait) and (min-width: 768px) {
.opa-over {opacity: 0.85 !important;}
}
.opa00 {opacity: 0.00 !important;}
.opa98 {opacity: 0.98 !important;}
.opa09 {opacity: 0.90 !important;}
.opa85 {opacity: 0.85 !important;}
.opa10 {opacity: 1.00 !important;}
.opa10l {opacity: 1.00;}
.dnone {display: none !important;}
.dblock {display: block !important;}
.dflex {display: flex !important; display: -webkit-box !important; display: -ms-flexbox !important;}
.nsel {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.sel {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.npev {
pointer-events: none;
}
.res-br {
display: none;
}
@media screen and (min-width: 1024px) {
.scrollock {
overflow: hidden !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
}
.lowcas {
text-transform: lowercase !important;
}
.bold {
font-weight: 900 !important;
}
/* @end */
/* @end */
/* @group Animations */
/* @group fadeIn */
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* @end */
/* @group fadeIn */
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
/* @end */
/* @end */
/* @group Develop */
/* @group Colors */
.c0 {background-color: #FF3C46; opacity: 0.9;} /*rosso*/
.c1 {background-color: #FFD2D2; opacity: 0.9;} /*rosa*/
.c2 {background-color: #FFBE96; opacity: 0.9;} /*arancione*/
.c3 {background-color: #FFF0AF; opacity: 0.9;} /*giallo*/
.c4 {background-color: #B9EBA5; opacity: 0.9;} /*verde*/
.c5 {background-color: #96E6E6; opacity: 0.9;} /*blu*/
.c6 {background-color: #CDE6FA; opacity: 0.9;} /*celeste*/
.c7 {background-color: #B9B9FF; opacity: 0.9;} /*viola*/
.c8 {background-color: #C8C8C8; opacity: 0.9;} /*grigio*/
/* @end */
/* @end */
.preloader {
overflow: hidden !important;
height: 100% !important;
width: 100% !important;
}
.overlay {
/* z-index: 999999; */
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #FFFFFF;
}
h1,
h2,
h3,
h4,
p,
q,
input,
.txt {
font-display: block; /* FOIT - Hide text before fonts are loaded */
text-rendering: optimizeLegibility; /* Emphasizes legibility (special kerning, optional ligature...) */
}