...
| CSS Stylesheet |
|---|
/*---------------------------------------------*/
/*---OOH INTERVIEW DETAIL PAGE - 13-12-2022---*/
/*-------------------------------------------*/
/*---INTERVIEW DETAIL INTRODUCTION---*/
#interview-detail-introduction { padding-bottom: 1rem;}
#interview-detail-introduction .h1-subtitle { color: #001832;}
#interview-detail-introduction .h1-date {margin-top: 2.5rem; color: #5E748E;}
.interview-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/flag-france.jpg");
background-position: center center; background-repeat: no-repeat; background-size: 100%;
}
.interview-detail-introduction-content { position:relative; padding-top:2.5rem !important;; padding-bottom:2.5rem !important; background-color: #F3F4F7;}
.interview-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;}
.interview-detail-introduction-content h2, .interview-detail-introduction-content p { z-index: 3; position:relative;}
.interview-detail-introduction-content h2 { margin-left:auto; margin-right:auto; width:65%;}
.interview-detail-introduction-content h2 span { display: block; margin-bottom:0.5rem; font-size: 1rem; line-height: 1; color: #5D24A4;}
.interview-detail-introduction-content p { margin-left:auto; margin-right:auto; width:65%;}
.interview-detail-introduction-content .register-cta { text-align: right}
@media screen and (min-width: 769px) {
.interview-detail-introduction-cover {border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
.interview-detail-introduction-content { border-top-right-radius: 12px; border-bottom-right-radius: 12px;}
}
/*---INTERVIEW DETAIL MS---*/
.interview-detail-ms-picture { position: relative; text-align: center;}
.interview-detail-ms-picture .interview-detail-ms-picture-photo { position: relative; display: block; margin:0 auto; height: 100px; width: 100px; background: #F4BEFE; border-radius:50%;}
.interview-detail-ms-picture-photo img { position: absolute; top: -4px; left: -4px; width: 100px; height: 100px; border-radius:50%;}
.interview-detail-ms-picture-name { margin: 0.5rem 0 0 0 !important;}
.interview-detail-ms-picture-function { margin-bottom:0 !important; font-size: 12px !important; color: #5E748E !important;}
.interview-detail-ms-quote { margin-top:3rem; position:relative; font-style: italic;}
.interview-detail-ms-quote:before { position:absolute; top:-2rem; left: 0; content: ""; display: inline-block; height: 24px; width: 24px;
background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-secondary.svg")}
.interview-detail-ms-quote q { color:#3D597A;}
@media screen and (min-width: 769px) {
.interview-detail-ms-cols { display: flex; gap:10%; align-items: center;}
.interview-detail-ms-picture { width: 30%;}
.interview-detail-ms-picture:before { position: absolute; top:-1rem; right:-10%; content: ""; border-right:1px solid #FBE5FF; height: 120%}
.interview-detail-ms-quote { margin-top:0; width: 60%;}
}
/*---INTERVIEW DETAIL ARTICLE---*/
#interview-detail-article { padding-top:0;}
#interview-detail-article .interview-detail-article-col > p:last-child { margin-bottom:0;}
#interview-detail-article .interview-detail-article-subtite { margin-bottom: 0.75rem; color: #5D24A4;}
#interview-detail-article h2, #interview-detail-article h3 { margin-bottom:1.25rem;}
#interview-detail-article h3 { margin-top:2.5rem; margin-bottom:1.25rem; }
.interview-detail-article-cols {display: flex; gap:5%; align-items: center;}
.interview-detail-article-p {width: 50%;}
.interview-detail-article-quote { position:relative; margin-bottom:1.5rem; padding:2.5rem 0 1rem 0; width: 45%; font-style: italic; border-top:1px solid #F4BEFE; border-bottom:1px solid #F4BEFE;}
.interview-detail-article-quote:before { position:absolute; top:0.50rem; left: 0; content: ""; display: inline-block; height: 24px; width: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-secondary.svg")}
.interview-detail-article-quote q { color:#3D597A;}
/*---INTERVIEW DETAIL ABOUT MS---*/
#interview-detail-about-ms { padding-top:0; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/bg-illu-sigle-interview-detail-ms.svg") no-repeat 100% 6rem;}
.interview-detail-about-ms-picture { position: relative; text-align: center;}
.interview-detail-about-ms-picture .interview-detail-about-ms-picture-photo { position: relative; display: block; margin:0 auto; height: 100px; width: 100px; background: #F4BEFE; border-radius:50%;}
.interview-detail-about-ms-picture-photo img { position: absolute; top: -4px; left: -4px; width: 100px; height: 100px; border-radius:50%;}
.interview-detail-about-ms-picture-name { margin: 0.5rem 0 0 0 !important;}
.interview-detail-about-ms-picture-function { margin-bottom:0 !important; font-size: 12px !important; color: #5E748E !important;}
.interview-detail-about-ms-quote { margin-top:3rem; position:relative; font-style: italic;}
.interview-detail-about-ms-quote:before { position:absolute; top:-2rem; left: 0; content: ""; display: inline-block; height: 24px; width: 24px;
background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-secondary.svg")}
.interview-detail-about-ms-quote q { color:#3D597A;}
@media screen and (min-width: 769px) {
.interview-detail-about-ms-cols { display: flex; gap:10%; align-items: center;}
.interview-detail-about-ms-picture { width: 30%;}
.interview-detail-about-ms-picture:before { position: absolute; top:-1rem; right:-10%; content: ""; border-right:1px solid #FBE5FF; height: 120%}
.interview-detail-about-ms-quote { margin-top:0; width: 60%;}
}
/*---INTERVIEW DETAIL FOOTER---*/
#interview-detail-footer { padding-top: 0rem;}
#interview-detail-footer p:last-child { margin-bottom:0;}
#interview-detail-footer .social-media-cta { margin-bottom:1rem; padding-top: 2.5rem; border-top:1px solid #E3E6EB;} |