...
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 { margin: 2.5rem 0; display: flex; gap:10%; align-items: center;} .interview-detail-about-ms-picture { width: 25%20%;} .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: 75%70%;} } /*---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;} |