index-main/assets/css/template/_report.scss

// LAOUT -----------------------------------


@media #{$small}{
    [data-template="report"] {

        #toggle-panel{
            display: none;
        }

        #report__aside{
            width: 100vw;
            position: fixed;
            top: 0px;
            height: 100vh;
            left: -100vw;
            z-index: calc(var(--z-header) + 10);
            transition: left .4s ease-in;
            background: var(--color-bg);


              .panel__header{
                margin: 0 var(--padding-body);
                border-bottom: var(--border-aside);
                height: var(--header-h);
            }

            .panel__content{
                height: calc(100dvh - var(--header-h));
                height: calc(100vh - var(--header-h));
                padding-bottom: 30vh;
            }

            .btn--group{
                display: none;
            }
        
        }

        .panel-open  #report__aside{
            left: 0px;
        }

    }
}


.arrow-report{
    font-size: 14px;
    color: var(--color-txt-light);

    width: 20px;
    height: 20px;

}

.media-anchor{
    width: 100%;
    height: 0px;
    display: flex;
    justify-content: flex-end;

    .arrow-report{
        position: relative;
        left: 50px;
        top: 8px;
    }
}



@media #{$small-up}{
[data-template="report"] {


    .report__header {
        margin-inline: auto;
        max-width: var(--max-w-cards);
        margin-top: calc(var(--spacing) * 3);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .report__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: calc(var(--padding-body)*2.5);
        z-index: calc(var(--z-header) - 100);

        .report__txt {
            grid-row: 1;
            grid-column: 1;
            max-width: var(--max-w-content);
        }

        #report__medias {
            z-index: calc(var(--z-header) - 100);
            position: sticky;
            top: calc(var(--header-h) + var(--padding-body));
            align-self: start;

            grid-row: 1;
            grid-column: 2;
            // border: var(--border-light);
            min-height: 100px;
            
        }

        #arrow__medias{
            z-index: calc(var(--z-header) - 100);
            position: sticky;
            top: calc(var(--header-h) + var(--padding-body));
            align-self: start;

            grid-row: 1;
            grid-column: 2;
            transform: rotate(180deg);
            transform-origin: center;
           
            span{
                position: relative;
                left: 26px;
            }
        }

    }



    #toggle-panel {
        position: fixed;
        top:  var(--header-h);
        left: var(--padding-body);
        z-index: calc(var(--z-header) + 100);
    }

    #report__aside {
        position: fixed;
        top: var(--header-h);
        left: var(--padding-body);
        width: var(--panel-w);
        height: calc(100vh - var(--header-h));
        z-index: calc(var(--z-header) + 200);
        background-color: var(--color-bg);
        box-shadow: 4px 0px 4px 1px var(--color-bg);

        .panel__header{
                border: var(--border-aside);
            height: calc(var(--h-block)*1.5);
        }

    .panel__content {
        height: calc(100% - var(--h-block)*4.25);
                    padding-bottom: 80px;

           }
     
    }


     #report__aside {
        left: calc(var(--panel-w)*-1);
        transition: left ease-in-out .5s;
    }
      #report {
        padding-left: calc(var(--padding-body)*2);
          transition: padding-left ease-in-out .5s;
    }


    .panel-open{

         #report__aside{
               left: var(--padding-body);
         }
          #report {
            padding-left: calc(var(--panel-w) + var(--padding-body)*1);
        }

    }





}

}

// HEADER -------------------------------------------------------------------------

.report__header {


    display: grid;
    column-gap: var(--padding-inner);
    row-gap: calc(var(--spacing)*1);
    grid-template-columns: 65% 35%;
    grid-template-rows: auto auto 1fr;
    position: relative;

    .report__title-group {
        grid-row: 1;
        grid-column: span 2;

        .title {
            text-transform: uppercase;
            font-weight: normal;
            font-size: var(--fs-big);
            line-height: var(--leading-tight);
            font-weight: normal;
            margin-top: calc(var(--spacing)*1);
            text-wrap: balance;
        }

        .subtitle {
            font-size: var(--fs-big);
            line-height: var(--leading-tight);
            font-weight: normal;
            text-wrap: balance;

        }

    }

    @include figure-16-9();

    figure {
        grid-row: 2;
        grid-column: 2;
    }

    .report__dl {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        // font-size: var(--fs-small);
        border-bottom: var(--border-light);
        align-items: flex-start;

        .dl__group {
            @include grid-content();
            border-top: var(--border-light);
            padding: calc(var(--spacing)*0.5) 0;
        }

        dt {
            color: var(--color-txt-light);
            padding-right: 1ch;
        }
    }


    .btn--group {
        position: relative;
        grid-row: 3;
        grid-column: 1/3;

        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        align-items: start;
        gap: calc(var(--spacing)*0.25);

    }
}





// CONTENT -------------------------------------------------------------------------------



.report__content {



    .section-content {
        padding-bottom: calc(var(--spacing)*3);
        &:target{
            padding-top: calc(var(--header-h) + var(--spacing)*2);
            @media #{$small}{   padding-top: calc(var(--header-h) + var(--spacing)*0.5);  }
        }

    }



    .section-title {
        font-size: var(--fs-medium);
        margin-bottom: var(--spacing);
        font-weight: normal;
        text-transform: uppercase;
        text-wrap: balance;
        max-width: 42ch;
    }

    p {
        margin: calc(var(--spacing)*0.5) 0;
    }

    ul {
        padding-left: 3ch;
    }
}

.report__content:target {
    padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
}


.media{

    video{
        width: 100%;
    }

    figure{
        height: auto;
    }

    .caption{
        font-size: var(--fs-small);
        line-height: 1.1;
    }

    .swiper{
        width: calc(100% - 60px);
        max-width: 600px;
    }
}



/// PANEL-LEFT  --------------------------------------------



#toggle-panel {
    width: calc(var(--h-block) * 1);
    padding: 0;
}

#report__aside {
    --border-aside: 1px solid var(--color-txt);

    .panel__header {
        display: flex;
    
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5ch;

        .icon {
            width: calc(var(--h-block)*1.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg {
            width: 16px;
            fill: var(--color-txt);
        }

        .text {
            padding-top: 5px;
        }

        .close {
            position: absolute;
            right: 0;

            svg {
                width: 10px;
                fill: var(--color-txt);
            }

        
        }

            cursor: pointer;

            &:hover {
                .close svg {
                    fill: var(--grey-200);
                }
            }


    }

    .panel__content {
        padding: var(--padding-body);
        overflow: scroll;
        @include hide-scroll();
        border: var(--border-aside);
        border-top: none;
    }


    #toc {
        ul {
            list-style: none;
        }

        li {
            font-size: var(--fs-small);

            color: var(--color-txt-light);

            a {
                display: block;
                padding: 5px 1ch;
                padding-top: 7px;
            }


        }

        li.selected {
            background-color: var(--grey-800);
            color: var(--color-txt);
        }

        li:hover {
            background-color: var(--grey-800);
        }

        .toc-level-1 {
            margin-bottom: calc(var(--spacing)*0.5);
            font-weight: bold;
        }

        .toc-level-2 {
            margin-bottom: calc(var(--spacing)*0.25);
            padding-left: 4ch;
        }

        a {
            text-decoration: none;
        }

    }

    .btn--group {
        margin-top: calc(var(--spacing)*0.5);
        display: flex;
        gap: var(--padding-inner);

        button {
            flex-grow: 1;
        }
    }




}