Page History

/*-------------------------------------------*/
/*---OOH EVENTS CALENDAR PAGE - 21-11-2022---*/
/*------------------------------------------*/      

/*---INTRODUCTION---*/
#introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/bg-illu-sigle-events.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
}

@media screen and (max-width: 769px) {
  #introduction { background-position: top right; background-size: 240%;}
}

#introduction h1 + p.lead { margin-bottom:5rem;}

/*HACK TO REMOVE EMPTY P FROM CONFLUENCE*/
#introduction .container .cols p:first-child { display: none; border:1px solid red;} 

.event-list .col-container { margin-bottom:2.5rem; padding-bottom:2.5rem;  border-bottom:1px solid #F3F4F7;}
.event-list .col-container:last-child { border:none;}  

.col-container { display: flex; justify-content: space-between; align-items: center !important;}
.col-first { width: 35%;}
.col-first img { max-width: 100%; height: auto; border-radius: 12px;}
.col-second { width: 55%;}
.col-second .badge { display:inline-flex; align-items:center; gap:4px; border-radius:4px;}

.col-container h2 { display: none;} 
.col-container h3 { font-size:20px;} 
.col-container h3 span { display: block; font-size: 1rem; line-height: 1; color: #5D24A4;} 
.col-container p.date { margin-bottom:0.5rem;} 
.col-container p.event-cta { margin-bottom:0; text-align: right;}  

/*---REVISIT PAST EVENT---*/
#revisit-past-events { margin-top:-6rem; padding-top:2.5rem; border-top:1px solid #F3F4F7;}
#revisit-past-events .event-list { position: relative; z-index: 1;}
/*
#revisit-past-events .link-cta.after { color: #3D597A !important;} 
#revisit-past-events .link-cta.after span:after { position: absolute; top: 2px; right: -30px; content: ""; width: 24px; height: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-arrow-forward-primary-bis.svg") left no-repeat; background-size: 24px; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease;}
*/

/*EXPAND MACRO*/
.expand-container { position: relative; z-index: 1; margin-top:-2.5rem;}
.expand-container .col-container { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #F3F4F7;} #revisit-past-events .expand-control { margin:0 !important; padding: 0 !important; text-align: right;} 
/*expand control*/
#revisit-past-events .expand-control .expand-icon { display: none;}
#revisit-past-events .expand-control[aria-expanded="true"] { display: none;}
#revisit-past-events .expand-control .expand-control-text { color: #3D597A !important; text-decoration: underline;}
#revisit-past-events .expand-control .expand-control-text:hover { text-decoration: none !important;}
/*expand content*/
#revisit-past-events .expand-content { margin:0 !important; padding: 0 !important;}
#revisit-past-events .expand-content > p:first-child, .expand-content > p:last-child { display: none;}  

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon { position:relative; padding-top:0;}
#box-cta-projectathon .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-projectathon .container .cols { margin-bottom:-1rem;}
#box-cta-projectathon .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-projectathon .projectathon-box-col-illu img { width: 120px; height:auto;}
 #box-cta-projectathon h3, #box-cta-projectathon p { color: white;}
#box-cta-projectathon p.p-opacity { opacity: 0.75}
#box-cta-projectathon p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}

@media screen and (min-width: 769px) {
 #box-cta-projectathon .projectathon-box { padding:2.5rem;}
 #box-cta-projectathon .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-cta-projectathon .projectathon-box { padding:5rem;}
}