mode-light.css

/*LIGHT STYLE SHEET*/

/* light.css: 👉 dark-on-light  */


   :root {

    --main-background: white;
    --text-color: #242424;
    --subdued-text: #454545;
    --logo-color: #666;
    --top-header: #fff;    
    --header-accent: rgb(133, 133, 133);
    --accordion-background: #f6f6f6; 
    --accordion-highlight: #fff;
    --advanced-background: #bad0d8;

    --settings-background: rgb(213, 213, 213);
    --settings-border: rgb(220, 220, 222);
    --emblem-pink: #fc02fc;
    --emblem-pink-over: #bb02bb;
    --emblem-blue: #329bb8;
    --emblem-blue-over: #23748a;
    --emblem-green: #008000;
    --emblem-green-over: #0ca70c;
    --emblem-orange: #fc8302;
    --emblem-orange-over: #d46e00;
    --selector: rgb(149, 149, 149);
    --selector-highlight: rgb(203, 203, 203);
    --selector-highlight-over: rgb(224, 224, 224);
    --divider-line:  rgb(206, 205, 205);
    --sub-menu:  rgb(179, 179, 179);
    --modal-background: rgb(231, 231, 231);
    --search-row: rgba(255, 255, 255, 0.192);
    --slide-overlays: rgb(225, 225, 225);
    --side-overlays: rgb(225, 225, 225);
    --slide-highlight: rgb(212, 212, 213);
    --show-hide: rgba(225, 225, 225, 0.809);
    --darker:rgba(0, 0, 0, 0.049);
    --ecobrick-preview: rgba(255, 255, 255, 0.836);
    --x-button-over: rgb(146, 146, 146);
    --input-background: rgb(229, 213, 241);

    --form-background: rgb(223, 231, 233);


  --gallery:  rgb(222, 223, 236);
  --yellow-alert: #fbe9c8;

  --table-background-1: #f2f2f2;

  --table-background-2: #dad9d9;

  --table-background-hover: #bcbcbc;

  --table-background-heading: #2A91DA;

       .modal-content-box {
           background: #ffffff;
       }

       /*BOOK NOTES */

       --deeper-accent-color: rgb(225, 225, 225) ;
       --slider: rgb(228, 228, 228);
       --header-footer: #e7e7e7;
       --drop-cap: rgb(63, 63, 63);


       #booknotes-curtain {
           background: url(svgs/tractatus-mandala-full-light-grey.svg) center no-repeat;
           background-size: contain;
           background-color: var(--slider);
       }

       #book-box a {

           background: url(svgs/content-arrow.svg) left center no-repeat var(--background-color);
           background-size: 30px;
           background-position-x: 18px;
       }

       #book-box a:hover {

           background: url(svgs/content-arrow-45.svg) left center no-repeat var(--deeper-accent-color);
           background-size: 30px;
           background-position-x: 18px;
       ;
       }




 



    --h1: black;
    --general-background: rgb(252, 252, 252);
    --general-background-highlight: rgb(234, 234, 234);
    --deeper-accent: rgb(148, 148, 148);
    --button-1-1: #4646cf;
    --button-1-1-over: #5b5bf6;
    --button-1-2: #3b3baf;
    --button-1-2-over: #5454ff;
    --button-2-1:#00a1f2;
    --button-2-1-over:#3cb0fd;
    --button-2-2:#008ad4;
    --button-2-2-over:#3498db;
    --shadow: rgba(57, 57, 57, 0.613);
    --login:rgb(244, 242, 242);
    
    --footer-background: #252b4d;
    --footer-text: #a2cbe3;
    --footer-header: #a8aab8;
    --splash: #2A91DA;
    --splash-over: #19659c;
    --notification: #a1ccfd;
    --fuscia-button: #a458a4;

    --facebook: #728398;

   }

   .dark-only {display:none;}

.light-only {display:block;}
   
.top-emblem-button {
    /*background: url(../svgs/settings-icon-dark.svg) no-repeat;*/
    background: url(icons/main-menu.svg) no-repeat;
    background-size: contain;
}

.top-emblem-button:hover {
      background: url(icons/main-menu-over.svg) no-repeat;
      background-size: contain;
  }

  .top-search-button {
    background: url(icons/search-day.svg) no-repeat center;
    background-size: contain;
}

.top-search-button:hover {
      background: url(icons/search-day-over.svg) no-repeat;
      background-size: contain;
  }

#top-settings-button {
    background: url(icons/settings-icon.svg) no-repeat;

    background-size: contain;
}

#top-settings-button:hover {
    background: url(icons/settings-icon-over.svg) no-repeat;
    background-size: contain;
}

.top-lang-button {
  background: url(icons/language-button.svg) no-repeat;
  background-size: contain;
}

.top-lang-button:hover {
  background: url(icons/language-button-over-invert.svg) no-repeat;
  background-size: contain;
}

.top-login-button {
  background: url(icons/login-icon.svg) no-repeat;
  background-size: contain;
}

.top-login-button:hover {
  background: url(icons/login-icon-over.svg) no-repeat;
  background-size: contain;
}



.tour-slide1 {
  background: url(svgs/richard-and-team-day.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide2 {
  background: url(svgs/ecobricking-materials-day.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide4 {
  background: url(svgs/dolphin-top-optimized.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide5 {
  background: url(svgs/earth-home-animated-day.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide6 {
  background: url(svgs/dolphin-top-optimized-light.svg) no-repeat bottom;
  background-size: contain;
}


.featured-content-2 {
  background: url(svgs/blue-circles-banner-light.svg) no-repeat bottom;
  background-size: cover;
}

.dolphin-pic {
  background: url(svgs/dolphin-top-optimized-light.svg) no-repeat bottom;
  background-size: cover;
}

.featured-content-3 {
  background: url(svgs/ecobrick-village-vision-2024-day.svg) no-repeat bottom;
  background-size: cover;
}

.ecovillage-pic {
  background: url(webp/spiral-building.webp) no-repeat center;
  background-size: cover;
}

.earthservice-pic {
  background: url(svgs/earth-service-animation.svg) no-repeat center;
  background-size: contain;
  margin-top:25px;
  margin-bottom:-10px;

}

#main {
  background: url(svgs/ocean-footer-background-day.svg) repeat-x bottom;
  background-size: contain;
}

.vision-landscape {
  background: url(svgs/ocean-footer-day.svg?v=4) no-repeat bottom;
  background-size: cover;
  /* background-color: #10ffff; */
  
}

@media screen and (min-width: 700px) {
.side {
  background: rgb(212,212,212);
	background: linear-gradient(126deg, rgba(212,212,212,1) 10%, rgba(251,251,251,1) 71%);

}
}

#header-content-block {
  background-color: #59c1fdb2;

}

.grey {
  background: rgb(235,235,235);
  background: linear-gradient(132deg, rgba(235,235,235,1) 0%, rgba(199,199,199,1) 100%);
}

.reddish {
  background: rgb(255,238,238);
  background: linear-gradient(132deg, rgba(255,238,238,1) 0%, rgba(254,195,195,1) 100%);
}

.greenish {
  background: rgb(239,255,238);
  background: linear-gradient(132deg, rgba(239,255,238,1) 0%, rgba(198,254,195,1) 100%);
}

.blueish {
  background: rgb(235,253,255);
  background: linear-gradient(132deg, rgba(235,253,255,1) 0%, rgba(195,250,254,1) 100%);
}

.orangeish {
  background: rgb(255,248,235);
  background: linear-gradient(132deg, rgba(255,248,235,1) 0%, rgba(254,234,195,1) 100%);
}

.pinkish {
  background: rgb(254,235,255);
  background: linear-gradient(132deg, rgba(254,235,255,1) 0%, rgba(248,195,254,1) 100%);
}

.greyish {
  background: #F6F6F6;
  /*background: linear-gradient(126deg, rgba(212,212,212,1) 10%, rgba(251,251,251,1) 71%);*/

}

#clouds {
	background: url(../svgs/top-clouds-animated-desktop.svg) center top;
    background-repeat: no-repeat;
    background-size: cover;
}



.x-button {
  background: url('svgs/x-button-day.svg?v=4') no-repeat center;
  background-size: contain;

}


.x-button:hover {
  background: url('svgs/x-button-day-over.svg?v=4') no-repeat center;
  background-size: contain;

}

/* #logo-ecobricks-org, #logo-global-ecobrick-alliance {
  fill: #666;
  transition: 0.5s;
} */

/* 
#gea-logo {
  background: url(logos/gea-logo-full-light.svg) no-repeat;
  background-size: contain;
} */


/*
.top-down-button {
  background: url(../up-arrow.svg) no-repeat;
  background-size: contain;
}

#top-down-button:hover {
  background: url(../svgs/down-arrow.svg) no-repeat;
  background-size: contain;
}
*/

.main-menu-button {
    background: url(../svgs/login-icon.svg) no-repeat;
    background-size: contain;
}

.main-menu-button:hover  {
    background: url(../svgs/login-icon-over.svg) no-repeat;
    background-size: contain;
}

@media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
      background-image: linear-gradient(#30ffff, var(--general-background),var(--general-background),var(--general-background));
      }
    }
  
 @media screen and (min-width: 701px) {
  .clouds-new2  {
  background-image: linear-gradient(#30ffff, var(--general-background),)
}
}
      /*
  @media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
      background-image: linear-gradient(#30ffff, var(--general-background),var(--general-background),var(--general-background), #30ffff);
     /* background: url(../svgs/ashim-top-clouds-mobile.svg?v1.3) center top repeat-x;
          box-sizing: border-box;
          background-size: 100%;*/
  
          /* .bottom-scope  {
            background-image: linear-gradient(var(--general-background),var(--general-background), #30ffff);
          }


  .tree-coins {
    background: url(../svgs/earth-home-animated-v6.svg) no-repeat center;
    background-size: contain;
  }


  .bio-top {
    background: url(../svgs/biosphere-top-day.svg) no-repeat center top;
    background-size: cover;
  }



  .splash-content-block {
    background: url(../svgs/brik-view-light.svg?v=2) bottom no-repeat;
    background-size: cover;
    background-color: #2A91DA;

    }

    #splash-bar {
      background-color: #2A91DA;
      box-shadow: 0 8px 7px rgba(85, 84, 84, 0.4);
    }


    .top-close-button {
      background: url(../svgs/down-arrow.svg) no-repeat;
      background-size: contain;
    }
    
    .top-close-button:hover {
      background: url(../svgs/up-arrow.svg) no-repeat;
      background-size: contain;
    }

    .earth-com {
      background: url(../svgs/earth-community-day.svg?v=2) no-repeat center;
      background-size: contain;
    }


    .city-image {
      background: url(../svgs/city-village-day.svg?v=2) no-repeat center;
      background-size: contain;
    }


    .loader {
      background: url(../svgs/bottle-loader.svg) center no-repeat;
      background-size: 38px;
    }


    .my-ecobricks {

      background: url(../webp/my-ecobricks-day.webp) no-repeat center;
      background-size: contain;
      }


      .help-validate {
        background: url(../webp/help-validate-day.webp) no-repeat center;
        background-size: contain;
      
      }

      .log-ecobricks {
        background: url(../webp/log-ecobricks-day.webp) no-repeat center;
        background-size: contain;
      
      }

      .main-landing-graphic {
      background: url(../svgs/richard-and-team-day.svg) no-repeat center center;
      background-size: contain;
      }

      .biosphere {
        background: url(https://gobrik.com/webp/biosphere-day.webp) no-repeat  center bottom;
        background-size: contain;
      
      } */

/* light.css
light.css 
--icon-filter_hover: invert(60%);*/

[part="permanentLabel"] {
  font-size: smaller !important;
}

#reg-up-button {
  background: url(svgs/up-reg-arrow-light.svg?v=3) center no-repeat;
  background-size: contain;
}

.form-container .splash-heading {
  color: var(--text-color)!important;
  text-shadow: none !important;
}