decor-6-site/assets/css/portfolio.css

:root{
    --bleed-images: 3mm;
    --pagedjs-fold: 0px;
}

.portfolio{
  page: portfolio;
  --margin: 8mm;
  break-before: left;
}

@page portfolio{
  background-color: var(--silver);
}

@page portfolio:first{
   
    @top-left { content: none;}
    @top-right { content: none; }
    @top-center { content: none;}
     @top-right-corner { content: none;}
      @top-left-corner { content: none; display: none; }
}




.pagedjs_portfolio_page .pagedjs_sheet{
  /* overflow: visible !important; */
}

/* [data-chapter="portfolio"] p{
    color: #FFF;
}

.pagedjs_portfolio_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after,
.pagedjs_portfolio_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after{
    background-color: black;
    color: white;
    padding: 0;
} */


.portfolio .chapter-header{
  break-before: right;
}


.portfolio img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}


.intro-portfolio{
  width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
  position: absolute;
  left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
  top: calc(var(--pagedjs-margin-top)*-1 + var(--margin));

}

.portfolio-simple-paysage{
  width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
  position: relative;
  left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
}


.portfolio-full-page{
     break-before: page;
   break-after: page;
}

.portfolio-full-page figure{
  position: absolute;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)*2);
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
 z-index: -1;
}


.portfolio-spread-left{
  break-before: left;
}

.portfolio-spread-right{
    break-before: right;
}

.portfolio-spread figure{
  position: absolute;
  z-index: -1;
  width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
}

.portfolio-spread-right figure{
  left: calc(var(--pagedjs-pagebox-width)*-1 - var(--pagedjs-margin-left) - var(--bleed-images));
}



/* Stephane & Gwenola -------------------------------------------- */



#fig-stephane-degoutin-et-gwenola-wagon-2 img{
 object-fit: contain;
  width: 80%;
  object-position: calc(var(--margin) + var(--bleed-images)) calc(var(--pagedjs-margin-top) + var(--bleed-images));
  

}


#fig-stephane-degoutin-et-gwenola-wagon-3{
  break-before: left;

}

#fig-stephane-degoutin-et-gwenola-wagon-3 figure{
   break-before: right;
}

#fig-stephane-degoutin-et-gwenola-wagon-5{
   break-before: left;
}

#fig-stephane-degoutin-et-gwenola-wagon-6{
   break-before: right;
}




/* IYO BISSECK -------------------------------------------- */


#fig-iyo-bisseck-1{
break-before: right;
}

#fig-iyo-bisseck-3 img{
  object-fit: contain;
  width: 80%;
  object-position: calc(var(--margin) + var(--bleed-images)) calc(var(--pagedjs-margin-top) + var(--bleed-images));

}

#fig-iyo-bisseck-4{
  break-before: left;
}

#fig-iyo-bisseck-5{
  break-before: right;
}

#fig-iyo-bisseck-6 img{
  position: relative;
  width: 60%;
  left: calc(40% - var(--bleed-images));
 object-fit: contain;
  object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
}







/* ------ DOUBLE PAGE ------- */ 

.spread{
  position: absolute;
  z-index: -1;
  width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
}

.spread-inner{
  position: relative;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
}

.spread__left{
  margin: 0;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  break-after: page;
}
.spread__right{
  margin: 0;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.spread-content{
  margin: 0;
  width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2);
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
  position: absolute;
  top: 0;
  left: 0;
}

.spread__left .spread-content{
  left: calc(var(--pagedjs-fold)*-1);
}
.spread__right .spread-content{
  left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold));
}

.spread-content img{
  height: 100%;
  object-fit: cover;
}

.spread .image__top{
  z-index: 9000;
  position: absolute;
  /*overflow: hidden;*/
}

.spread .image__top img{ 
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.spread .image__top.topleft{
  top: 0;
  left: 0;
}

.spread .image__top.topright{
  top: 0;
  right: 0;
}

.spread .image__top.bottomleft{
  bottom: 0;
  left: 0;
}

.spread .image__top.bottomright{
  bottom: 0;
  right: 0;
}

.spread .image__top.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}