/*  csso by enniosan
    2025 01 03
    base implementation of css classes to be used in a simple web site project
*/

/*  
    fonts
    list of available fonts downloaded in the poject
    by default three fonts are included. They came all from https://fonts.google.com/
    I'm avoyding to download them from gfonts to maintain the project independent 
    current fonts: Lato, Montserrat, Signika
    The current defined language is latin only.
    In this way I can keep the project lightweight but still complete for the most common tasks and meanings.

*/

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/csso/fonts/lato.woff2") format('woff2');
}

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/csso/fonts/montserrat.woff2") format('woff2');
}  

@font-face {
font-family: 'Signika'; 
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/csso/fonts/signika.woff2") format('woff2');
}

@font-face {
font-family: 'Oswald'; 
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/csso/fonts/oswald.woff2") format('woff2');
}


:root{

    margin:0px;
    padding:0px;
    box-sizing: content-box;
    text-rendering: optimizeSpeed;
    transition: all 0.5s ease;
    font-family: 'Montserrat';

    /*  css vars
        you have to modify this params for each project
    */

    /* typografy */

    font-size: 16px;
    line-height: 26px;

    /* container */
    --container-min-height: 60vh;

    /* grid */

    --min-col: 300px;
    --col-gap: 15px;

    /* colors */

    --red-1: #3a0000; 
    --red-2: #7c0000;
    --red-3: #e60b0b;
    --red-4: #da9a9a;
    --red-5: #ecd8d8;
    
    --blue-1: #001f4d;
    --blue-2: #0047b3;
    --blue-3: #007bff;
    --blue-4: #9fbfe2;
    --blue-5: #e7eef7;
    
    --yellow-1: #b38f00;
    --yellow-2: #ffcc00;
    --yellow-3: #ffdb4d;
    --yellow-4: #d6cb9d;
    --yellow-5: #faf6e6;
    
    --green-1: #003014;
    --green-2: #015f1d;
    --green-3: #00a732;
    --green-4: #79b98c;
    --green-5: #cbdfd1;

    --orange-1: #f50;
    --orange-2: #dc6d18;
    --orange-3: #d68e28;
    --orange-4: #dea978;
    --orange-5: #c89d72;

    

    --dark-1: #000000FF;
    --dark-2: #000000AA;
    --dark-3: #00000077;
    --dark-4: #00000044;
    --dark-5: #00000011;


    --light-1: #ffffffFF;
    --light-2: #ffffffAA;
    --light-3: #ffffff77;
    --light-4: #ffffff44;
    --light-5: #ffffff11;

    --cream-1: rgb(241, 241, 231);
    --cream-2: #f3f3e7ee;
    --cream-3: #eaebe2f8;
    --cream-4: #f3eddb;
    --cream-5: #e1e2d8;

    


    --color-primary: #007bff;
    --color-background: #f0f0f0;
    --color-text: #333;
    --color-text-light: #666;
    --color-text-dark: #222;
    --color-text-white: #fff;
    --color-text-black: #000;
    --color-text-gray: #999;
    --color-text-gray-light: #ccc;
    --color-text-gray-dark: #666;

    --zinc: #100a20;
    --carbon: #1d1b24;
}


/*  default html behaviours */
html, body{
    scroll-behavior: smooth;
    
}

/*  scrollbar   */

::-webkit-scrollbar{width: 12px;}
::-webkit-scrollbar-track{background: var(--green-3)}
::-webkit-scrollbar-thumb{ background:var(--light-3); border-radius: 10px }
::-webkit-scrollbar-thumb:hover{ background:var(--light-1) }

/*  colors  */


.red-1{ color: var(--red-1); } .b-red-1{ background-color: var(--red-1); }  
.red-2{ color: var(--red-2); } .b-red-2{ background-color: var(--red-2); } 
.red-3{ color: var(--red-3); } .b-red-3{ background-color: var(--red-3); } 
.red-4{ color: var(--red-4); } .b-red-4{ background-color: var(--red-4); } 
.red-5{ color: var(--red-5); } .b-red-5{ background-color: var(--red-5); } 
.blue-1{ color: var(--blue-1); } .b-blue-1{ background-color: var(--blue-1); } 
.blue-2{ color: var(--blue-2); } .b-blue-2{ background-color: var(--blue-2); } 
.blue-3{ color: var(--blue-3); } .b-blue-3{ background-color: var(--blue-3); } 
.blue-4{ color: var(--blue-4); } .b-blue-4{ background-color: var(--blue-4); } 
.blue-5{ color: var(--blue-5); } .b-blue-5{ background-color: var(--blue-5); } 
.yellow-1{ color: var(--yellow-1); } .b-yellow-1{ background-color: var(--yellow-1); } 
.yellow-2{ color: var(--yellow-2); } .b-yellow-2{ background-color: var(--yellow-2); } 
.yellow-3{ color: var(--yellow-3); } .b-yellow-3{ background-color: var(--yellow-3); } 
.yellow-4{ color: var(--yellow-4); } .b-yellow-4{ background-color: var(--yellow-4); } 
.yellow-5{ color: var(--yellow-5); } .b-yellow-5{ background-color: var(--yellow-5); } 
.orange-1{ color: var(--orange-1); } .b-orange-1{ background-color: var(--orange-1); } 
.orange-2{ color: var(--orange-2); } .b-orange-2{ background-color: var(--orange-2); } 
.orange-3{ color: var(--orange-3); } .b-orange-3{ background-color: var(--orange-3); } 
.orange-4{ color: var(--orange-4); } .b-orange-4{ background-color: var(--orange-4); } 
.orange-5{ color: var(--orange-5); } .b-orange-5{ background-color: var(--orange-5); } 
.green-1{ color: var(--green-1); } .b-green-1{ background-color: var(--green-1); } 
.green-2{ color: var(--green-2); } .b-green-2{ background-color: var(--green-2); } 
.green-3{ color: var(--green-3); } .b-green-3{ background-color: var(--green-3); } 
.green-4{ color: var(--green-4); } .b-green-4{ background-color: var(--green-4); } 
.green-5{ color: var(--green-5); } .b-green-5{ background-color: var(--green-5); } 
.dark-1{ color: var(--dark-1); } .b-dark-1{ background-color: var(--dark-1); } 
.dark-2{ color: var(--dark-2); } .b-dark-2{ background-color: var(--dark-2); } 
.dark-3{ color: var(--dark-3); } .b-dark-3{ background-color: var(--dark-3); } 
.dark-4{ color: var(--dark-4); } .b-dark-4{ background-color: var(--dark-4); } 
.dark-5{ color: var(--dark-5); } .b-dark-5{ background-color: var(--dark-5); } 
.light-1{ color: var(--light-1); } .b-light-1{ background-color: var(--light-1); } 
.light-2{ color: var(--light-2); } .b-light-2{ background-color: var(--light-2); } 
.light-3{ color: var(--light-3); } .b-light-3{ background-color: var(--light-3); } 
.light-4{ color: var(--light-4); } .b-light-4{ background-color: var(--light-4); } 
.light-5{ color: var(--light-5); } .b-light-5{ background-color: var(--light-5); } 




.clickable{ cursor: pointer; }
.rounded{ border-radius: 15px; }
.centered{ text-align: center; }
.shadowed{ box-shadow: 0px 10px var(--dark3) }
.tshadowed{ text-shadow: 0px 5px 5px #000 }
.invisible, .hidden{ display: none; }
.xs-hide{ display: inherit; }

.bold { font-weight: 700; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }


.p0{ padding: 0px; }
.p10{ padding: 10px; }
.p15{ padding: 15px; }
.p20{ padding: 20px; }

.m0{  margin:  0px!important; }
.m10{ margin: 10px!important; }
.m15{ margin: 15px!important; }
.m20{ margin: 20px!important; }
.m30{ margin: 20px!important; }

.fs10{ font-size: clamp( 8px, 3vw,  10px  ) }
.fs12{ font-size: clamp( 10px, 3vw, 12px ) }
.fs15{ font-size: clamp( 16px, 3vw, 15px ) }
.fs18{ font-size: clamp( 16px, 3vw, 18px ) }
.fs20{ font-size: clamp( 16px, 3vw, 20px ) }
.fs30{ font-size: clamp( 16px, 3vw, 30px ) }


/*  containers  */

.container{ width: 100%; min-height: var(--container-min-height); margin:0px; scroll-behavior: smooth; overflow:hidden;}
.container-short{ width: 100%;  height: auto!important; margin:0px; scroll-behavior: smooth; overflow:hidden;}
.content{ padding: 20px; margin: auto; width: clamp(100px, 90vw, 1200px); }
.small-content{ padding: 20px; margin: auto; width: clamp(100px, 90vw, 500px); }

.grid-col{ display: grid;  grid-template-columns: repeat( auto-fill, minmax( var(--min-col), 1fr ) ); gap: var(--col-gap); }

.col-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.col-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.col-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.col-1{ display: grid; grid-template-columns: 1fr;  }

/*  colonne speciali  */

.col-4-1{ width: 100%; display: grid; gap: 20px; grid-template-columns: 79% 20%; }
.col-1-4{ width: 100%; display: grid; gap: 20px; grid-template-columns: 20% 79%; }
.col-3-1{ width: 100%; display: grid; gap: 20px; grid-template-columns: 74% 25%; }
.col-1-3{ width: 100%; display: grid; gap: 20px; grid-template-columns: 25% 74%; }
.col-2-1{ width: 100%; display: grid; gap: 20px; grid-template-columns: 65% 34%; }
.col-1-2{ width: 100%; display: grid; gap: 20px; grid-template-columns: 34% 65%; }

.col-1-2-1{ width: 100%; display: grid; gap: 20px; grid-template-columns: 25% 50% 25% }



.col-top-center{ place-items: start center }
.col-center-center{ place-items: center center; }
.col-top-start{ place-items: start start; }

.gap0{ gap:0px;}
.gap5{ gap:5px;}
.gap10{ gap:10px;}
.gap15{ gap:15px;}
.gap20{ gap:20px;}


.w100{ width: 100%; }  .h100{ min-height: 100vh; }       
.w90{ width: 90%; }     .h90{ min-height: 90vh; }
.w80{ width: 80%; }     .h80{ min-height: 80vh; }
.w70{ width: 70%; }     .h70{ min-height: 70vh; }
.w60{ width: 60%; }     .h60{ min-height: 60vh; }
.w50{ width: 50%; }     .h50{ min-height: 50vh; }
.w40{ width: 40%; }     .h40{ min-height: 40vh; }
.w30{ width: 30%; }     .h30{ min-height: 30vh; }
.w20{ width: 20%; }     .h20{ min-height: 20vh; }
.w10{ width: 10%; }     .h10{ min-height: 10vh; }





/*
    special classes

    those special classes reacts to js events
    they are specified to be manipulated by the css
*/

.backgroundable{
    background: radial-gradient( circle, var(--color-primary), var(--color-background) );
}


.paralText{
    margin:auto;
    perspective: 500px;
    transform: translateZ(-250px) scale(1.5);
}





/*  media queries  */

@media( max-width: 760px){
    
    .m10{
        margin: 0px!important;

    }

    .content{ width: 100% !important; max-width: 100%!important;  } 

    .col-1, .col-2, .col-3, .col-4, .col-1-2, .col-1-3, .col-1-4,.col-2-1, .col-3-1, .col-4-1, .col-1-2-1, .col-1-3-1{ 
        grid-template-columns: 1fr!important; 
        
        /*width: calc( 100% - 10px )!important;
        */

        width: initial!important;
        padding: 0px 5px;
    }

    .backgroundable {
        padding: 0px!important;
        width: 100%!important;

    }
    
    .xs-hide{ display: none; width:1px; height:1px; }

}