CSS Stylesheet |
---|
/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 24-04-2024---*/
/*----------------------------------------------*/
#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}
/*---INTRODUCTION---*/
#introduction { }
/*reboot*/
#introduction .container .cols { margin:0;}
#introduction .container .cols .col-10 { padding:0;}
#introduction .cols { justify-content: center;}
#introduction p.lead { margin-bottom:40px;}
#introduction .information-illu {margin-bottom:0; }
#introduction img { max-width: 100%; height: auto; border-radius: 12px;}
/*---INFORMATION---*/
#information { margin-top:-9rem; padding-top:9rem; padding-bottom:18rem; background-color: #F3F4F7;}
/*reboot*/
#information .container .cols { margin:0;}
#information .container .cols .col-10 { padding:0;}
#information .cols { justify-content: center;}
@media screen and (min-width: 769px) {
#information { margin-top:-18rem; padding-top:18rem;}
}
/*---BOX CTA REPORT---*/
#box-cta-report { margin-top:-12rem; padding-top:0; position:relative;}
#box-cta-report .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-report .container .cols { margin-bottom:-1rem;}
#box-cta-report .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-report .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-report h3, #box-cta-report p { color: white;}
#box-cta-report p.p-opacity { opacity: 0.75}
#box-cta-report p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-report .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-report .projectathon-box { padding:2.5rem;}
#box-cta-report .projectathon-box-cols { display: flex; align-items: center;}
#box-cta-report .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#box-cta-report .projectathon-box { padding:5rem;}
}
/*---GALLERY---*/
#gallery { position: relative; z-index: 2; padding-top:0; padding-bottom:0;}
/*reboot*/
#gallery .container .cols { margin:0;}
#gallery .container .cols .col-10 { padding:0;}
#gallery .container .cols > div p:first-child, #gallery .container .cols > div p:last-child |
Div | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
CSS Stylesheet |
---|
/*--------------------------------------------------*/ /*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/ /*------------------------------------------------*/ #main-content p:empty { display: none;} /*#main#gallery .cols { justify-content: center;} .wiki-content .gallery-p span:empty{ margin:0 0 2rem 0;} .wiki-content .gallery-cta { displaymargin: none2rem 0 0 0;}*/ .mb-0 { margin-bottom:0;} /*---TEAMS AND ACTORS---*/ #teams-actors {} #teams-actors-box { padding:1rem; background: #F3F4F7; border-radius: 60px;} #teams-actors-box ul { margin-bottom:0; padding:0; list-style:none; } #teams-actors-box ul li { margin-top:1rem; padding:1rem 0 1.5rem 0; border-bottom: 1px solid #E3E6EB;} #teams-actors-box ul li:last-child { border-bottom: none;} #teams-actors-box ul li h4 { color:#3D597A !important;} #teams-actors-box ul li p { margin-bottom:0;} @media screen and (min-width: 1366px) { #teams-actors-box { padding:5rem;} #teams-actors-box ul { display: flex; flex-wrap: wrap;} #teams-actors-box ul li { flex-shrink: 2; padding:0 30px; width: 25%; border-left:1px solid #E3E6EB; border-bottom: none;} #teams-actors-box ul li:first-child { padding-left:0; border-left:none;} } /*---ACTORS---*/ #actors { margin-top:7.5rem;} #actors ul { margin-top:2.5rem !important; margin-bottom:3rem; padding:0; list-style:none; } #actors ul li { padding:1rem;} #actors ul li:last-child { border-bottom: none;} #actors ul li h4 { margin-bottom:12px; color:#3D597A !important;} @media screen and (min-width: 1366px) { #actors ulgallery { margin: 0 -5px!important; width:100%;} .gallery table { width:100%;} .gallery table td { width:25%;} .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;} /*cols video*/ .cols-video { justify-content: center;} #gallery .cols:nth-child(2) { padding-top:120px;} .cols-video div p:first-child { display: none; border:1px solid yellow;} .video-container-iframe { position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */} .video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;} /*tabs video*/ #tabs-video-nav { list-style: none; margin: 40px 0 0 0; padding: 0; overflow: auto;} #tabs-video-nav li a { text-decoration: none; color: #001832;} #tabs-video-nav li a .cover-play { position: relative; display:inline-block; line-height: 0;} #tabs-video-nav li a .cover-play:before { z-index: 1000; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; width: 40px; background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-play-video-secondary.svg)} #tabs-video-nav li a .cover-play img { width: 100%; max-width: 110px; height: auto; border: 2px solid transparent; border-radius:16px; opacity: 1; filter: brightness(0.7) saturate(0.7);} #tabs-video-nav li:hover a .cover-play img { opacity: 1; filter: none;} #tabs-video-nav li.active a .cover-play:before { display: none;} #tabs-video-nav li.active a .cover-play img { /*border: 2px solid #842DB5;*/ opacity: 1; filter: none;} #tabs-video-nav li a .cover-text { display: block; color: #3D597A;} #tabs-video-nav li.active a .cover-text { color:#842DB5;} .tabs-video-content { background-color: #FFF;} .tabs-video-content-iframe { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */} .tabs-video-content-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;} @media screen and (min-width: 769px) { #tabs-video-nav { list-style: none; display:flex; justify-content:center; gap: 2%; padding: 0; overflow: auto;} #tabs-video-nav li { width: 33%; cursor: pointer;} #tabs-video-nav li a .cover-play img { width: 100%; max-width: 360px; height: auto;} } /*---UPCOMING PROJECTATONS---*/ #upcoming-projectatons {} /*reboot*/ #upcoming-projectatons .container .cols { margin:0;} #upcoming-projectatons .container .cols .col-10 { padding:0;} #upcoming-projectatons .cols { justify-content: center;} #upcoming-projectatons .badge { display:flex; align-items:center; gap:4px; border-radius:4px;} .card-upcoming-cols { display: flex; flex-wrap: wrapdirection: column; margin-top:40px; width: 100%; gap:24px;} .card-upcoming { #actorsposition: ulrelative; lidisplay: {flex; flex-shrink: 2direction: column; min-width: 0; height: 100% !important; padding:0 30px1rem 2rem 2rem 2rem; widthbackground-color: 50%white; borderbox-left:1px solid #E3E6EBshadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-bottomradius: 12px; overflow: nonehidden;} .card-upcoming-body a #actors ul li:first-child { padding-left:0{ display: block; line-height:0; text-align: right; height: 300px; border-top-right-radius: 12px; border-top-left:none;} } /*---BOX CTA PROJECTATHON---*/ #box-cta-projectathon { position:relative;} #box-cta-projectathon .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;} #box-cta-projectathon .container .cols-radius: 12px; overflow: hidden;} .card-upcoming-col.p3 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;} .card-upcoming-col.p2 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-02.jpg"); background-size: cover; background-position: top center; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;} .card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;} .card-upcoming-body p:last-child { margin-bottom:-1rem0;} .card-upcoming-date { font-size: 14px !important; color: #5E748E !important;} #box .card-ctaupcoming-projectathon .projectathon-box-col-illufooter { margin-top:24px;} .card-upcoming-footer p:last-child { margin-bottom:1rem:0; text-align:right;} #box-cta-projectathon .projectathon-box-col-illu img { @media screen and (min-width: 992px) { .card-upcoming-cols { flex-direction:row; margin-left:auto; margin-right: auto; width: 120px80%; heightgap:auto24px;} #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;} } .card-upcoming-col:nth-child(1) { width: 50%;} .card-upcoming-col:nth-child(2) { width: 50%;} .card-upcoming-body { flex: 1 1 auto;} .card-upcoming-body a { height: 220px;} } |
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||
|
Div | |||||||||
---|---|---|---|---|---|---|---|---|---|
| |||||||||
|