e-commerce/prototype/src/main/resources/static/css/ecom.css

@import "fonts.css";

:root {
   font-family: "Fira Sans";
   line-height: 1.15;

   --u5:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 );
   --u4:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
   --u3:  calc(1em * 1.5 * 1.5 * 1.5);
   --u2:  calc(1em * 1.5 * 1.5);
   --u1:  calc(1em * 1.5);
   --u0:  calc(1em);
   --u-1: calc(1em * 0.666);
   --u-2: calc(1em * 0.666 * 0.666);
   --u-3: calc(1em * 0.666 * 0.666 * 0.666);
   --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);


   --root-c-base: #ecf0f1;
   --root-c-base-highlight: #FFF;

   --root-c-primary: #1abc9c;
   --root-c-primary-highlight: #16a085;

   --root-c-secondary: #9b59b6;
   --root-c-secondary-highlight: #8e44ad;

   --root-c-black: #2c3e50;
   --root-c-black-highlight: #34495e;


   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);

   --c-primary: var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--root-c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);

   --c-error: #c0392b;
}

.primary {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);

   --c-primary:var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.secondary {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);

   --c-primary:var(--root-c-secondary);
   --c-primary-highlight: var(--root-c-secondary-highlight);

   --c-secondary: var(--root-c-primary);
   --c-secondary-highlight: var(--root-c-primary-highlight);

   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.inverted {
   --c-base: var(--root-c-black);
   --c-base-highlight: var(--root-c-black-highlight);

   --c-primary:var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-base);
   --c-black-highlight: var(--root-c-base-highlight);
}

.bg-base {
   background-color: var(--root-c-base);
}

.bg-base {
   background-color: var(--root-c-base);
}

.bg-base-highlight {
   background-color: var(--root-c-base-highlight);
}

.bg-primary {
   background-color: var(--root-c-primary);
}

.bg-primary-highlight {
   background-color: var(--root-c-primary-highlight);
}

.bg-secondary {
   background-color: var(--root-c-secondary);
}

.bg-secondary-highlight {
   background-color: var(--root-c-secondary-highlight);
}

.bg-black {
   background-color: var(--root-c-black);
}

.bg-black-highlight {
   background-color: var(--root-c-black-highlight);
}

.highlight > *,
.highlight {
   --c-base: var(--root-c-black);
   --c-base-highlight: var(--root-c-black-highlight);

   --c-primary:var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-base);
   --c-black-highlight: var(--root-c-base-highlight);
}




.smaller {
   --u5: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
   --u4: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5);
   --u3: calc(0.666em * 1.5 * 1.5 * 1.5);
   --u2: calc(0.666em * 1.5 * 1.5);
   --u1: calc(0.666em * 1.5);
   --u0: calc(0.666em);
   --u-1: calc(0.666em * 0.666);
   --u-2: calc(0.666em * 0.666 * 0.666);
   --u-3: calc(0.666em * 0.666 * 0.666 * 0.666);
   --u-4: calc(0.666em * 0.666 * 0.666 * 0.666 * 0.666);
}


* {
    margin: 0em;
    padding: 0em;
    box-sizing: border-box;
}

html, body {
    font-size: var(--u0);
    height: 100%;
    background-color: var(--c-base);
    color: var(--c-black)
}

main {
   min-height: 100%;
}


h1, h2, h3, h4, h5 {
   font-family: "Fira Mono";
   padding-top: var(--u0);
   padding-bottom: var(--u-1);
   text-transform: uppercase;
}

a {
   text-decoration: underline;
   color: inherit;
}

a:visited {
   color: inherit;
}

p {
   padding-top: var(--u0);
   padding-bottom: var(--u0);
   color: var(--c-black);
}

h1 {
   font-size: var(--u2);
}

h2 {
   font-size: var(--u1);
}

h3, h4, h5 {
   font-size: var(--u0);
}

img {
   width: 100%;
   object-fit: cover;
}

li {
    list-style-type: none;
}

table {
   width: 100%;
   border-collapse: collapse;
}

table td,
table th {
   padding: var(--u0);
   text-align: center;
}

table th {
   background-color: var(--c-primary);
   color: var(--c-base);
}

table tr:nth-child(2n+1) {
   background-color: var(--c-base-highlight);
}


img.xs {
   width: var(--u2);
}

img.s {
   width: var(--u4);
}


img.m {
   width: var(--u8);
}

/*
 *  NAV
 */

nav {

}

nav h1 {
   font-size: var(--u0);
   margin: 0rem;
}

nav li {
   display: flex;
   flex-direction: column;
}

nav li li {
   margin-left: var(--u0);
}

nav li a {
   padding: var(--u0);
   transition: all 0.1s ease-out;
}

nav li a:hover,
nav li a.selected {
   padding: var(--u0);
   background-color: var(--c-primary);
   color: var(--c-base);
}
/*
 * FOOTER
 */

footer {
   padding-top: var(--u3);
   padding-bottom:  var(--u1);
}

/*
 * INPUTS
 */
textarea,
input[list],
input[type="text"],
input[type="password"] {

   background-color: var(--c-base);
   font-size: var(--u0);

   border: none;

   border-radius: var(--u-2);
   margin-top: var(--u0);
   margin-bottom: var(--u0);

   padding: var(--u0);
   font-size: var(--u0);
   color: var(--c-black);

   background-color: var(--c-base-highlight);
    box-shadow: var(--s-0-secondary);
}

textarea {
   font-family: "Fira Mono";
}
/*
input[type="text"]:invalid,
input[type="password"]:invalid {
   background-color: var(--c-error);
   color: var(--c-base);
}*/
textarea::placeholder,
input[list]::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder  {
  color: var(--c-primary-highlight);
  opacity: 50%;
}

button, .button {
   font-family: "Fira Mono";
   font-weight: bold;
   text-decoration: none;
   text-align: center;

   background-color: var(--c-primary);
   color: var(--c-base);

   border: none;
   border-radius: var(--u-2);

   margin-bottom: var(--u0);
   margin-top: var(--u0);

   padding: var(--u0);

   min-width: 10em;

   font-family: "Fira Mono";
   text-transform: uppercase;
   font-size: var(--u0);

   /* box-shadow: var(--s-0-secondary); */
}

button:active, .button:active {
   background-color: var(--c-primary-highlight);
}

input[type="text"],
input[type="password"],
input[list],
button,
.button {
   transition: all 0.1s ease-out;
}

label {
   display: block;
   min-width: 10em;
   font-weight: bold;
}

label.nolinebreak {
    display:inline;
}

input.linestyle {
   background-color: transparent;
   border-bottom: var(--u-4) solid var(--c-primary);
   border-radius: 0px;
   padding: 0px;
}

fieldset {
    border: none;
}

fieldset label {
   display: inline-block;
}

/*
 * HERO
 */

.hero {
   background-color: var(--c-primary);
   color: var(--c-base);
}

.hero > * {
   --c-primary: var(--root-c-primary-highlight);
   --c-primary-highlight: var(--root-c-primary);
}

.hero-black {
   background-color: var(--c-black);
   color: var(--c-base);
}

.primarytext{
    color: var(--c-primary)
}

.secondarytext{
    color: var(--c-secondary)
}

/*
 * LAYOUT
 */

.content-width {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;

    padding-left: var(--u0);
    padding-right: var(--u0);
}

.full-width {
   width: 100%;
}

.detailflex {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: stretch;
   flex-wrap: wrap;
}

.detailflex.s {
   max-width: calc(20rem + var(--u0) * 2);
   margin-left: auto;
   margin-right: auto;
}

.detailflex.m {
   max-width: calc(40rem + var(--u0) * 3);
   margin-left: auto;
   margin-right: auto;
}

.detailflex.l {
   max-width: calc(20rem + var(--u0) * 5);
   margin-left: auto;
   margin-right: auto;
}

.detailflex  > * {
   min-width: 100%;
   padding: var(--u0);
   flex: 1;
}


.detailflex  > .col-2 {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   align-items: wrap;
   padding: 0px;
}

.detailflex  > .col-2 > * {
   min-width: calc(15rem + var(--u0) * 3);
   flex: 1;
   padding: var(--u0);
}


.detailgrid {
   display: grid;
   grid-auto-flow: dense;
   min-width: 20rem;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   grid-template-rows: auto;
   grid-column-gap: var(--u0);
   grid-row-gap: var(--u0);
}

.detailgrid.s {
   max-width: calc(20rem + var(--u0) * 2);
   margin-left: auto;
   margin-right: auto;
}

.detailgrid.m {
   max-width: calc(40rem + var(--u0) * 3);
   margin-left: auto;
   margin-right: auto;
}

.detailgrid.l {
   max-width: calc(20rem + var(--u0) * 5);
   margin-left: auto;
   margin-right: auto;
}


.detailgrid > .s {
   grid-column: span 1;
}

.detailgrid > .m {
   grid-column: span 2;
}

.detailgrid > .l {
   grid-column: span 3;
}

.detailgrid > .spacer {
   grid-column: span 3;
   height: 0px;
}


.bar-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}

.bar-flex > * {
   margin: var(--u0);
}

.bar-flex > .spacer {
   flex: 1;
}

.sidebar-layout {
   display: flex;
   align-items: stretch;
   justify-content: center;
   flex-wrap: wrap;
}

.sidebar-layout > *:nth-child(2) {
   flex: 1;
}

.grid {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.grid.vertical-center {
   align-items: center;
   height: 100%;
}

.grid.center {
   justify-content: space-around;
}

.grid > * {
    flex: 1;
    margin: var(--u0);
    padding: var(--u0);
    border-radius: var(--u0);
}

.grid.base > * {
   background-color: var(--c-base);
   color: var(--c-black);
}

.grid.black > * {
   background-color: var(--c-black);
   color: var(--c-base);
}

.grid.primary > * {
   background-color: var(--c-primary);
   color: var(--c-base);
}

.grid.secondary > * {
   background-color: var(--c-primary-highlight);
   color: var(--c-base);
}

.hero-primary .grid.shadow > * {
   /* box-shadow: var(--s-0-secondary); */
}

.hero-black .grid.shadow > * {
   /* box-shadow: var(--s-0-secondary); */
}

.grid.s > .spacer {
   box-shadow: none;

   margin: calc(var(--u0) * 2);
   padding: 0px;

   width: 10rem;
   max-width: 10rem;
   min-width: 7.5rem;
   height: 0px;
}

.grid.s > * {
   max-width: 10rem;
   min-width: 7.5rem;
}


.grid.m > .spacer {
   box-shadow: none;

   margin: calc(var(--u0) * 2);
   padding: 0px;

   width: 20rem;
   max-width: 20rem;
   min-width: 15rem;
   height: 0px;
   padding: 0px;
}

.grid.m > * {
   width: 20rem;
   max-width: 20rem;
   min-width: 15rem;
}

.grid.l > .spacer {
   box-shadow: none;

   margin: calc(var(--u0) * 2);
   padding: 0px;

   width: 40rem;
   max-width: 40rem;
   min-width: 15rem;
   height: 0px;
   padding: 0px;
}

.grid.l > * {
   width: 40rem;
   max-width: 40rem;
   min-width: 15rem;
}

.vertical-spacer.s {
   min-height: 10rem;
}

.vertical-spacer.m {
   min-height: 20rem;
}

.vertical-spacer.l {
   min-height: 40rem;
}

.modal {
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal > * {
   border-radius: var(--u0);
   padding: var(--u0);
   flex: 1;
}

/*
 * Impov
 */

.input-icon {
   /* box-shadow: var(--s-0-secondary); */
   display: flex;
   padding: 0px;

   border-radius: var(--u0);
}

.input-icon > input {
   flex: 1;
   margin: 0px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   box-shadow: none;
}

.input-icon > button {
   margin: 0px;

   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   box-shadow: none;
}


/*
 * CONTENT
 */

.price {
   opacity: 75%;
   font-size: var(--u1);
   text-align: right;
}

.center-text {
    text-align: center;
}

.leftspace {
    padding-left: 1em;
}
.noPadding {
   padding: 0rem;
}
.noMargin {
   margin: 0rem;
}
.Margin-left.s {
   margin-left: 2rem;
}