cssco.css

/* -------------------------------------------------------------------------- *
   CSSCO | 1.1.0 | https://github.com/we-are-next/cssco
\* -------------------------------------------------------------------------- */

.cssco {
    position: relative;
}

.cssco:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.cssco img {
    display: block;
    height: auto;
    width: 100%;
}





/* -------------------------------------------------------------------------- *
   #C1
\* -------------------------------------------------------------------------- */

.cssco.cssco--c1 {
    background: linear-gradient(#d5aeae, #8f8f8f, #c99d93, #185d62 110%);
}

.cssco.cssco--c1:after {
    background-color: #58747b;
    mix-blend-mode: overlay;
}

.cssco.cssco--c1 img {
    -webkit-filter: grayscale(6%) contrast(130%);
            filter: grayscale(6%) contrast(130%);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *
   #F2
\* -------------------------------------------------------------------------- */

.cssco.cssco--f2 {
    background: linear-gradient(#b8dfdc, #aaa);
}

.cssco.cssco--f2:after {
    background: linear-gradient(#aebab6 43%, #4a5580);
    mix-blend-mode: soft-light;
}

.cssco.cssco--f2 img {
    -webkit-filter: contrast(150%);
            filter: contrast(150%);
    opacity: 0.85;
}





/* -------------------------------------------------------------------------- *
   #G3
\* -------------------------------------------------------------------------- */

.cssco.cssco--g3 {
    background: linear-gradient(#485c6e, #b9b9b0 15%, #4b6974);
}

.cssco.cssco--g3 img {
    -webkit-filter: contrast(130%);
            filter: contrast(130%);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *
   #P5
\* -------------------------------------------------------------------------- */

.cssco.cssco--p5 {
    background-color: #8facaf;
}

.cssco.cssco--p5:after {
    background: linear-gradient(to bottom left, #9ec1b3, #8c78a0, #646983, #252c37);
    mix-blend-mode: overlay;
}

.cssco.cssco--p5 img {
    -webkit-filter: contrast(150%) grayscale(15%);
            filter: contrast(150%) grayscale(15%);
    opacity: 0.8;
}





/* -------------------------------------------------------------------------- *
   #LV3
\* -------------------------------------------------------------------------- */

.cssco.cssco--lv3 {
    background: linear-gradient(-179deg, #a48a7a 0%, #927f77 37%, #ac8577 49%, #574d47 100%);
}

.cssco.cssco--lv3 img {
    -webkit-filter: grayscale(20%) contrast(130%);
            filter: grayscale(20%) contrast(130%);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *
   #B5
\* -------------------------------------------------------------------------- */

.cssco.cssco--b5 {
    background-color: #000;
}

.cssco.cssco--b5 img {
    -webkit-filter: grayscale(100%) contrast(180%) brightness(95%);
            filter: grayscale(100%) contrast(180%) brightness(95%);
    opacity: 0.9;
}





/* -------------------------------------------------------------------------- *
   #A6
\* -------------------------------------------------------------------------- */

.cssco.cssco--a6 {
    background-color: #a9a499;
}

.cssco.cssco--a6:after {
    background-color: #eaeae9;
    mix-blend-mode: multiply;
}

.cssco.cssco--a6 img {
    -webkit-filter: grayscale(30%) contrast(140%) hue-rotate(-5deg);
            filter: grayscale(30%) contrast(140%) hue-rotate(-5deg);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *\
   #KK2
\* -------------------------------------------------------------------------- */

.cssco.cssco--kk2 {
    background: linear-gradient(-179deg, #b1957d 29%, #7d7b73 57%, #ce9778 100%);
}

.cssco.cssco--kk2:after {
    background-color: #dab66d;
    mix-blend-mode: darken;
    opacity: 0.15;
}

.cssco.cssco--kk2 img {
    -webkit-filter: grayscale(30%) contrast(170%);
            filter: grayscale(30%) contrast(170%);
    mix-blend-mode: hard-light;
    opacity: 0.8;
}





/* -------------------------------------------------------------------------- *
   #M5
\* -------------------------------------------------------------------------- */

.cssco.cssco--m5 {
    background: radial-gradient(#c09f81, #816c5f);
}

.cssco.cssco--m5:after {
    background: linear-gradient(#bbccce 50%, #000000);
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

.cssco.cssco--m5 img {
    -webkit-filter: grayscale(40%) contrast(110%);
            filter: grayscale(40%) contrast(110%);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *
   #M3
\* -------------------------------------------------------------------------- */

.cssco.cssco--m3 {
    background-color: #817e72;
}

.cssco.cssco--m3:after {
    background-color: #cce7de;
    mix-blend-mode: multiply;
    opacity: 0.35;
}

.cssco.cssco--m3 img {
    -webkit-filter: grayscale(30%) contrast(155%);
            filter: grayscale(30%) contrast(155%);
    mix-blend-mode: hard-light;
    opacity: 0.75;
}





/* -------------------------------------------------------------------------- *
   #HB1
\* -------------------------------------------------------------------------- */

.cssco.cssco--hb1 {
    background: linear-gradient(-180deg, #8e8d9a 30%, #a6939f 48%, #6c7c95 65%, #6a7b95 58%, #c5cdd7 86%, #303743 100%);
}

.cssco.cssco--hb1:after {
    background-color: #294459;
    mix-blend-mode: lighten;
    opacity: 0.5;
}

.cssco.cssco--hb1 img {
    -webkit-filter: grayscale(20%) contrast(130%);
            filter: grayscale(20%) contrast(130%);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *
   #HB2
\* -------------------------------------------------------------------------- */

.cssco.cssco--hb2 {
    background: linear-gradient(-180deg, #8e8d9a 31%, #a69893 49%, #4c4644 58%, #c5cdd7 88%, #303d43 100%);
}

.cssco.cssco--hb2:after {
    background-color: #315764;
    mix-blend-mode: overlay;
    opacity: 0.25;
}

.cssco.cssco--hb2 img {
    -webkit-filter: grayscale(20%) contrast(130%);
            filter: grayscale(20%) contrast(130%);
    mix-blend-mode: hard-light;
}





/* -------------------------------------------------------------------------- *
   #ACG
\* -------------------------------------------------------------------------- */

.cssco.cssco--acg {
    background-color: #eceedf;
}

.cssco.cssco--acg:after {
    background: linear-gradient(-180deg, #77766f 30%, #6a6f68 60%, #45353e 100%);
    mix-blend-mode: overlay;
}

.cssco.cssco--acg img {
    -webkit-filter: grayscale(40%) contrast(160%) brightness(85%) hue-rotate(-5deg);
            filter: grayscale(40%) contrast(160%) brightness(85%) hue-rotate(-5deg);
    mix-blend-mode: darken;
    opacity: 0.85;
}





/* -------------------------------------------------------------------------- *
   #X1
\* -------------------------------------------------------------------------- */

.cssco.cssco--x1 {
    background-color: #444;
}

.cssco.cssco--x1:after {
    background-color: #333;
    mix-blend-mode: lighten;
}

.cssco.cssco--x1 img {
    -webkit-filter: grayscale(100%) contrast(190%) brightness(110%);
            filter: grayscale(100%) contrast(190%) brightness(110%);
    opacity: 0.75;
}





/* -------------------------------------------------------------------------- *
   #T1
\* -------------------------------------------------------------------------- */

.cssco.cssco--t1 {
    background-color: #9d9990;
}

.cssco.cssco--t1:after {
    background-color: #878787;
    mix-blend-mode: lighten;
    opacity: 0.5;
}

.cssco.cssco--t1 img {
    -webkit-filter: grayscale(20%) contrast(140%);
            filter: grayscale(20%) contrast(140%);
    mix-blend-mode: hard-light;
}