Page History

/*only for dev*/
/*.section { border:1px solid red;}
.cols { border:1px solid green;}*/

/*erase main CSS*/
.cols { margin-top: 0;}
.cols:last-child { margin-bottom: 0;}
.cols:not(:last-child) { margin-bottom: 0;}
.cols > div { padding-top: 0; padding-bottom:0;}

/*remove empty p added by Confluence*/ 
#main-content p:empty { display: none;}  

/*-----------------------------------------------*/
/*---OOH FORUM EVENT DETAIL PAGE - 06-10-2023---*/
/*---------------------------------------------*/  

/*---INTRODUCTION---*/
#introduction .container > p:first-child { display: none; border:1px solid purple;}
.introduction-box { display: flex; border-radius: 16px; overflow: hidden; }
.introduction-box-cover { width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/691830885/illu-forum-event-citizens-introduction.jpg"); background-size: cover;} 
.introduction-box-content { position:relative; padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;}
.introduction-box-content * { position: relative;}
.introduction-box-content:before { position:absolute; top: -10%; left:-110px; display: inline-block; content:""; background-color: #F3F4F7; width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;}
.introduction-box-content p:last-child { margin-bottom:0;}
.heading-subtitle { display: block; font-size: 14px; line-height: 24px;}

@media screen and (max-width: 768px) {
    .introduction-box { display: block;}
    .introduction-box-cover { height: 12rem; width: 100%;}
    .introduction-box-content { padding: 2rem; width: 100%;}
    .introduction-box-content:before { width: 0;}
}

/*---INFORMATION---*/
#information { padding-top:0; padding-bottom:0;}
#information h2 { margin:3rem 0 2.5rem 0;}
#information p:last-child { margin-bottom:0;}
.information-list { margin: 0; padding: 0;}
.information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.information-list li:first-child { margin-top:0;}
.information-list li:last-child { padding-bottom:0; border-bottom: none;}
.information-col:nth-child(1) p { font-size: 18px; color: #001832;}

@media screen and (min-width: 769px) {
	#information h2 { margin:6rem 0 2.5rem 0;}  
	.information-cols { display: flex; align-items: center;}
	.information-col:nth-child(1) { width: 30%;}
	.information-col:nth-child(2) { width: 70%}
}

/*---AGENDA BOX---*/
.agenda-content-box { margin-bottom:6rem; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;}
.agenda-content-box:last-child { margin-bottom:0;}
.agenda-content-box h2 + p { color: white; opacity: 0.75;}  

@media screen and (max-width: 768px) { 
  .agenda-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;}
}

.agenda-content-box {background-color: #00284A;}
.agenda-content-box h2 {color: #FFF;}

.agenda-content-box .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.agenda-content-box .expand-container:last-child { border-bottom: 1px solid transparent;}
.agenda-content-box .expand-control-text {color: #FFF;}
.agenda-content-box .expand-container .aui-icon::before { color: #FFF;}

.agenda-content-box .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.agenda-content-box .agenda-hour li:last-child { border-bottom: 1px dashed transparent;}
.agenda-content-box .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.agenda-content-box .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}

.agenda-content-box { position: relative;}
.illu-forum-agenda { position: absolute; bottom: -65px; right: 50px;}
.illu-forum-agenda img {width: 90px;}

@media screen and (min-width: 769px) {
  .illu-forum-agenda { bottom: -110px; right: 100px;}
  .illu-forum-agenda img {width: 180px;}
}

/*--- AGENDA MACRO EXPAND ---*/  
.agenda-content-box .expand-container:last-child { border-bottom:1px solid transparent;}
.expand-container { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
.expand-control { display: flex; flex-direction: row-reverse; align-items: center; margin-bottom:0; padding:1rem 0;}
.expand-control-text { margin:0 0.5rem 0.5rem 0; width: 100%; font-size: 20px; color:#001832;}
.expand-content { margin:0; padding: 0; color: #5E748E;}
.expand-container [aria-expanded="true"] .aui-iconfont-chevron-down { transform: rotate(180deg);}
.expand-container [aria-expanded="false"] .aui-iconfont-chevron-right { transform: rotate(90deg);}
.expand-container .aui-icon::before { font-size: 20px !important;}

@media screen and (max-width: 768px) { 
  .expand-control-text { font-size: 16px;}
}

/*---AGENDA HOUR---*/
.agenda-hour { margin: 0; padding:0; }
.agenda-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #E3E6EB;}
.agenda-hour li:first-child { padding-top:0;}
.agenda-hour li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-hour li .agenda-hour-cols { display: flex;}
.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%;  font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-hour .label { margin-bottom:0;}
.agenda-hour .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-hour .label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-hour .label.ccab span { color: #995E00; background: #FFEECC;}
.agenda-hour .label.tbc span { background: #E3E6EB;}

@media screen and (min-width: 769px) {
	.agenda-cols { display: flex;}
	.agenda-col:nth-child(1) { width: 30%;}
	.agenda-col:nth-child(2) { width: 70%}
}   

/*---UPCOMING EVENT---*/
#upcoming-event h2 + p { margin-bottom:3rem;}

/*---UPCOMING CARDS---*/
.card-upcoming-col { margin-top: 1.5rem;}

.card-upcoming-col:nth-child(0) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/691830885/illu-forum-event-introduction-citizens.jpg"); background-size: 100%; background-position: 0 10%;border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}     
.card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/691830885/illu-forum-event-introduction-students.jpg"); background-size: 100%; background-position: 0 5%; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;}
.card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/691830885/illu-forum-event-introduction-expats.jpg"); background-size: 100%; background-position: 0 26%; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p { position:relative;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}

.card-upcoming-footer { margin-top:24px; text-align: right;} 

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; width: 100%; gap:20px;}
  .card-upcoming-col:nth-child(0) { width: 33%;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 33%;}
  .card-upcoming-body { flex: 1 1 auto;}
}

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

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

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

/*---GALLERY---*/
#gallery { position: relative; z-index: 2;}
#gallery h3 { margin-bottom:2.5rem;} 
/*#gallery .container .cols > div p:first-child, #gallery .container .cols > div p:last-child { display: none;}*/
.wiki-content .gallery-p { margin:0 0 2rem 0;}
.wiki-content .gallery-cta { margin:2rem 0 0 0;}

.gallery { margin: 0 -5px!important; width:100%;}
.gallery table { width:100%;}
.gallery table td { width:12%;}
.gallery table td img { margin: 0 !important; padding: 5px; width: 100%; max-width: 400px; height: auto; border-radius: 16px;}
.gallery table td img:hover { cursor: pointer;}  

#gallery .group-picture { margin:5px auto 0; text-align: center;}
#gallery .group-picture p { margin:0;}
#gallery .group-picture img { width: 100%; max-width: 450px !important; height: auto; cursor: pointer !important; border-radius: 16px;}