botascopia-webiste-static/assets/css/_home.scss

@use "abstracts/mixins.scss" as *;

#home__livrets {
    --color: var(--color-violet);
    --color-medium: var(--color-violet-medium);
    --color-light: var(--color-violet-light);
    background-color: var(--color);
    color: var(--white);
}


#home__animations {
    --color: var(--color-yellow);
    --color-medium: var(--color-yellow-medium);
    --color-light: var(--color-yellow-light);
    background-color: var(--color);


      color: var(--color-txt);
}
#home__base-connaissance {
    --color: var(--color-orange);
    --color-medium: var(--color-orange-medium);
    --color-light: var(--color-orange-light);
    background-color: var(--color);
}







#main_home {
    --max-w-home: 1100px;
    section {
        padding: calc(var(--unit)*3) var(--padding-body);
        position: relative;

        .section--inner {
            max-width: var(--max-w-home);
            margin: 0 auto;

        }
    }

    .item-nav__group {
        display: flex;
        flex-direction: column;
             gap: var(--spacing);
    }

    .section--header {
            margin-bottom: calc(var(--spacing) * 4);

              display: grid;
        // grid-template-columns: 3fr 2fr;
           grid-template-columns: 1fr 440px;
        gap: calc(var(--spacing)*1);
    }

    .section--title {
        font-size: 2.8rem;
        font-family: var(--font-title);
        // margin-bottom: calc(var(--spacing) * 1.5);
        grid-column: span 2;
    }

    .baseline {
        font-size: var(--fs-medium);
        max-width: 42ch;
        margin-top: calc(var(--spacing)*0.5);


    }


}




.slideshow {
    width: 100%;
    height: calc(var(--unit)*13);

    figure {
        height: calc(var(--unit)*11);
    }
}






#home__hero {
    margin-bottom: 0;
    padding-bottom: calc(var(--unit)*1.5) !important;

    .section--inner {
        display: block;
        text-align: center;
        width: 100%;
        max-width: 100%;


    }

    .section--title {
        font-size: 3.6em;

        margin-bottom: calc(var(--unit)*1.5);
        color: var(--color);


    }

    /* button{ display: none;} */
    .description {
        font-size: var(--fs-medium);

        max-width: 48ch;
        margin: 0 auto;
        margin-bottom: calc(var(--unit)*1.5);
    }

    .search--container {
        display: none;
    }

    .nav-hero {
        list-style: none;
        display: flex;
        justify-content: center;
        gap: var(--unit);
        margin-top: calc(var(--unit)*1);
        margin-bottom: calc(var(--unit)*3);


        li {

            font-weight: 500;
            font-size: 1rem;
            min-width: 12ch;
            text-align: center;


            border: 1.5px solid var(--color);
            color: var(--color);

            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: calc(var(--unit)*1.5);
            padding: 0px 1.5ch;
            border-radius: var(--radius-btn);
            cursor: pointer;

            &:hover {
                background-color: var(--color-light);

            }

        }

        a {
            text-decoration: none;
            color: var(--color);
            font-weight: bold;
            /* &::after{
                content: " ↓"
            } */
        }
    }

    .see-more {
        display: block;
        // color: var(--color-txt);
        // font-weight: bold;
        padding-top: calc(var(--unit)*1.5);
    }


}


#home__a-propos {

    p,
    li {
        font-size: 1.6rem;
        margin-bottom: 1em;
        position: relative;

        strong {
            color: var(--color-green)
        }
    }

    ol li::marker {
        display: none;
        content: "";

    }

    ol {
        padding-left: 5ch;
        counter-reset: ol;

        li {
            counter-increment: ol 1;
            position: relative;
        }
    }

    ol li::before {
        font-size: 1.2rem;
        font-weight: bold;
        content: counter(ol);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2ch;
        height: 2ch;
        border-radius: 50%;
        border: 2px solid var(--color-green);
        color: var(--color-green);
        background-color: var(--color-green-light);
        position: absolute;
        left: -4ch;
        top: 4px;

    }

    .btn--solid {
        margin-top: calc(var(--unit)*2);
    }

}


.slideshow-scroll{
    width: 100vw;
    position: relative;
    left: calc((100vw - var(--max-w-home))*-0.5);
    padding-bottom: 20px;
   
    overflow-y: scroll;
    @include hide-scrollbar();
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);

    .slideshow-scroll__warpper{
        // padding-left: calc((100vw - var(--max-w-home))*0.5);
        padding-left: var(--padding-body);
        display: flex;
        gap: var(--padding-inner);


        .slideshow-item{
            flex-shrink: 0;
            figure{
                height: 420px;
                 width: 100%;
               img{
                width: 100%;
                aspect-ratio: 5/3;
                }
            }
        }
        &::after{
            content: "........................................";
            display: block;
            width: calc((100vw - var(--max-w-home))*1);
            color: transparent;
        }
    }
}



.screenshot-booklet{
    display: flex;
    --size-page: 340px;
    --gap: var(--padding-inner);
    gap: var(--gap);
    width: calc(var(--size-page)*5 + var(--gap)*2);

    .cover, .page{
        width: 300px;
     
        img{
               border: 0.5px solid var(--color-txt-light);
            width: 100%;
        }
    }

    .double{
        display: flex;
       
    }

    .page + .page img{
        border-left-color: transparent!important;
        
    }

}