index-main/assets/css/template/_investigation-summary.scss

[data-template="investigation-summary"]  main{

  
    position: relative;
    


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

    .section__article{
        a:hover{
            color: var(--grey-200);
        }
        .section__title{
            font-weight: normal;
            text-transform: uppercase;
            margin-bottom: calc(var(--spacing)*0.5)
        }
    }

 

    #nav--page{
        ul{
            list-style: none;
            li{
                text-align: center;
                color: var(--color-txt-light);                
                a{
                    display: block;
                    padding: 0.3em 0;
                    text-decoration: none;
                }
            }
        }
    }

    #section__short{
        font-size: var(--fs-medium);
    }

    #section__dl{
        margin-top: calc(var(--spacing)*1.5);
        border-bottom: var(--border-light);

        .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;
        }

        ul:not(.keywords){
            list-style: none;
            li{
                padding-bottom: 0.2em;
            }
            
        }
    }


    #section__synthese{
        p + p{
            margin-top: 0.5em;
        }

        h4{
            margin-top: 2em;
            margin-bottom: 1em;
            font-size: var(--fs-normal);
            font-weight: normal;
            text-decoration: 1px underline var(--color-txt-light);
            text-underline-offset: 3px;
            
        }
        
    }



}






// SMALL ----------------------------------------------------------
// ----------------------------------------------------------------


@media #{$small}{

    [data-template="investigation-summary"] main{

        header{
            padding-top: calc(var(--spacing)*1);
            .page-type{
                font-size: var(--fs-small);
            }
        }  

        .section__article{
            margin: calc(var(--spacing)*1.5) 0;
        }  

        #section__impacts, #section__en-lien{
            margin-top: 0px;
        }

        #hero{
            margin: calc(var(--spacing)*0.5) 0;
            figcaption{ 
                margin: 0 var(--padding-body);
            }
        }

        .modal--share{
            position: absolute;
            width: calc(100% - var(--padding-body)*2);
            bottom: calc(var(--spacing) * 2);
        }


        #banner--page {
            padding: calc(var(--spacing)*0.5) 0;

            position: fixed;
            bottom: 0;
            left: 0;
            width: 100vw;
            padding: calc(var(--spacing)*0.75) var(--padding-body);
            padding-top: var(--spacing);
            background-color: var(--color-bg);
            background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
            z-index: 800;

            #nav--page{
                display: none;
            }
            .btn--group{
               
                display: flex;
                gap: calc(var(--spacing)*0.25);
                position: relative;
                
                > button,
                > label {
                    width: 50%;
                    cursor: pointer;
                }
                
            }
            
        }


        // action

        #banner--page{
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease-in;
        }

        #banner--page.is-visible{
            opacity: 1;
            pointer-events: auto;
        }
       

        
    }

}



@media #{$x-small}{
    [data-template="investigation-summary"] main{
        #section__dl .dl__group{
           
            column-gap: 1ch;
            font-size: var(--fs-small);
            padding: calc(var(--spacing)*0.25) 0;
        } 
    } 
} 





// DESKTOP ----------------------------------------------------------
// ----------------------------------------------------------------


@media #{$small-up}{

    [data-template="investigation-summary"] main{

        #banner--page{
            height: calc(100vh - var(--header-h));
            height: calc(100dvh - var(--header-h));
            margin-bottom: calc((100vh - var(--header-h))*-1);
            margin-bottom: calc((100dvh - var(--header-h))*-1);
            padding: var(--padding-body);
            padding-left: 0px;
            padding-bottom: calc(var(--padding-body)*2);
            position: sticky;
            top: var(--header-h);
            width: var(--banner-medium);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #banner--page .btn--group{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--spacing)*0.25);
            
            > button,
            > label {
                width: 100%;
                max-width: 160px;
                cursor: pointer;
            }
            
        }

        #hero{
            margin-top: calc(var(--spacing)*1);
            margin-bottom: calc(var(--spacing)*3);
        }

      .section__article{
            margin-left: var(--banner-medium);
            margin-top: calc(var(--spacing)*3);
            margin-bottom: calc(var(--spacing)*3);
        }

        #section__short{
            margin-top: var(--padding-body);
        }

       

        header{
            max-width: var(--max-w-content);
            margin-left: var(--banner-medium);
            margin-top: calc(var(--spacing)*1.5);
            margin-bottom: calc(var(--spacing)*0.5);
        }

        .section__article{
            .section__title{
                font-size: var(--fs-medium);
                margin-bottom: var(--spacing);
            } 
        }  

        #section__synthese{
            font-size: var(--fs-medium);
        }
    }
    .modal--share{
        position: absolute;
        bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25);
        width: calc(100% - var(--padding-body));
    }
}  




@media #{$medium-up}{

    [data-template="investigation-summary"] main{
        #banner--page{
            width: calc((100% - var(--max-w-content))/2);
        }

        #hero{
            margin-top: 0;
            margin-bottom: calc(var(--spacing)*3);
            figcaption{ 
                max-width: var(--max-w-content);
                margin: 0 auto;
            }
        }



        header{
            margin-left: auto!important;
            margin-right: auto!important;          
        }

       

        .section__article{
            max-width: var(--max-w-content);
            margin: calc(var(--spacing)*3) auto;
        }

      

        
    }
}