Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt
Div
idevent-detail-footer
classsection
Div
classcontainer
Div
classcols
Div
Html-bobswift
<p class="social-media-cta">Don’t forget to follow the Once-Only Technical System <a href="https://twitter.com/EU_OnceOnly" target="_blank">Twitter</a> account to keep up to date with the latest news.</p>
<p><a href="https://twitter.com/EU_OnceOnly" target="_blank"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-twitter.svg" alt="OOH on Twitter"></a></p>
CSS Stylesheet
/*-----------------------------------------*/
/*---OOH EVENT DETAIL PAGE - 15-02-2023---*/
/*---------------------------------------*/

/*Hack remove empty p from Confluence*/
#main-content p:empty { display: none;}
/*Hack remove extra p from excerpt macro*/
#event-detail-description + p { display: none; border:1px solid green;}
/*Hack remove extra p from excerpt macro*/
#event-detail-presentation + p { display: none; border:1px solid green;}  

.mt-h2 { margin-top:2.5rem !important;}  

/*---INTRODUCTION---*/
.event-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/638059037/event-04-cover-page-detail.jpg");
background-position: center center; background-repeat: no-repeat; background-size: 100%;
}

.event-detail-introduction-content { position:relative; padding-top:2.5rem !important;; padding-bottom:2.5rem !important; background-color: #F3F4F7;}
.event-detail-introduction-content:before { content:''; display:block; z-index: 2; position:absolute; top:0; left:-2.5rem;; width:100%; height:100%; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-detail-introduction-content-shape.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center left;}

.event-detail-introduction-content h1, .event-detail-introduction-content p { z-index: 3; position:relative;}
.event-detail-introduction-content h1 { margin-left:auto; margin-right:auto; width:80%;}
.event-detail-introduction-content h1 span { display: block; margin-bottom:0.5rem; font-size: 1rem; line-height: 1; color: #5D24A4;}
.event-detail-introduction-content p { margin-left:auto; margin-right:auto; width:80%;}
.event-detail-introduction-content .register-cta { text-align: right}

@media screen and (min-width: 769px) {
	.event-detail-introduction-cover {border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
	.event-detail-introduction-content { border-top-right-radius: 12px; border-bottom-right-radius: 12px;} 
}

/*---DESCRIPTION---*/
#event-detail-description { padding-top: 0rem;}
#event-detail-description h2 { margin-bottom: 2.5rem;}
#event-detail-description p:last-child { margin-bottom: 0rem;}
#event-detail-description .register-cta { margin-top:2.5rem;}

/*---PRESENTATION---*/
#event-detail-presentation { padding-top: 0rem;}
/*Remove empty p of Confluence*/
#event-detail-presentation .col-4 > p:first-child,
#event-detail-presentation .col-4 > p:last-child { display: none; border:1px solid red;}
#event-detail-presentation .card-grid { text-align: center;}
#event-detail-presentation .card-grid-body p img { margin:0 auto 0.5rem auto; display: block;}

/*---FOOTER---*/
#event-detail-footer { padding-top: 0rem; padding-bottom: 3rem;}
#event-detail-footer .container { border-top:1px solid #E3E6EB;}
#event-detail-footer .register-cta { margin-top:2.5rem; text-align: right;}
#event-detail-footer .social-media-cta { margin-bottom:1rem;} 

/*---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;}
}