...
CSS Stylesheet |
---|
/*------------------------------------------------*/ /*---OOH PROJECTATONS DETAIL PAGE - 14-06-2023---*/ /*----------------------------------------------*/ #main-content p:empty { display: none;} .mb-0 { margin-bottom:0;} /*---INTRODUCTION---*/ #introduction { padding-bottom:0;} .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/674506672/illu-introduction-projectathon-03.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% ;} .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;} #information h2 { margin:7.5rem 0 2.5rem 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;} .information-list li:last-child .information-col:nth-child(2) p { margin-bottom:0;} @media screen and (min-width: 769px) { .information-cols { display: flex; align-items: center;} .information-col:nth-child(1) { width: 30%;} .information-col:nth-child(2) { width: 70%} } hr.solid { border-top: 1px solid #fbe5ff#E3E6EB; } /*---AGENDA BOX---*/ .agenda-box { padding-top:0;} .faq-content-box { margin-bottom:6rem; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;} .faq-content-box:last-child { margin-bottom:0;} .faq-content-box h2 {} @media screen and (max-width: 768px) { .faq-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;} } /*--- MACRO EXPAND ---*/ .faq-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%} } /*---LABEL---*/ .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;} .label.room1 span { color: #842DB5; background: #F2E5F7;} .label.room2 span { color: #995E00; background: #FFEECC;} /*---CUSTOM AGENDA---*/ .faq-content-box.custom-agenda {background-color: #00284A;} .faq-content-box.custom-agenda h2 {color: #FFF;} .faq-content-box.custom-agenda .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);} .faq-content-box.custom-agenda .expand-container:last-child { border-bottom: 1px solid transparent;} .faq-content-box.custom-agenda .expand-control-text {color: #FFF;} .faq-content-box.custom-agenda .expand-container .aui-icon::before { color: #FFF;} .faq-content-box.custom-agenda .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);} .faq-content-box.custom-agenda .agenda-hour li:last-child { border-bottom: 1px dashed transparent;} .faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;} .faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);} /*---CUSTOM AGENDA ADD ILLU---*/ .faq-content-box { position: relative;} .illu-projectathon-agenda { position: absolute; bottom: -65px; right: 50px;} .illu-projectathon-agenda img {width: 90px;} @media screen and (min-width: 769px) { .illu-projectathon-agenda { bottom: -110px; right: 100px;} .illu-projectathon-agenda img {width: 180px;} } /*---PERFORM---*/ #perform { padding-top:0; padding-bottom:0;} #perform .cols { margin-bottom:0;} #perform ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #perform ul li > div { display:flex; align-items: baseline; gap:10px;} #perform ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;} #perform ul li:last-child > div > p { margin-bottom:0;} #perform h3 { margin-bottom:2.5rem;} .perform-illu { margin-bottom:0; line-height:0 !important;} .perform-illu img { width: 180px;} @media screen and (min-width: 769px) { .perform-illu img { width: 100%; max-width: 270px; height: auto;} } /*---TIMELINE ILLU---*/ #timeline-illu { margin-bottom:0;} /*---TIMELINE---*/ .wiki-content #timeline h2 { margin-bottom:2.5rem;} .month-01-bg { background-color:#F9F5FB !important;} .month-02-bg { background-color:#F2E5F7 !important;} .month-03-bg { background-color:#DDBFEB !important;} .timeline-description { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding: 1rem 0;} .timeline-description-body { flex: 1 1 auto;} .timeline-description-body h3 { display: flex; align-items: center; gap: 10px; font-size:20px !important; line-height:24px;} .timeline-description-body h3 span:first-child { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; color: #001832; font-size: 12px; border-radius: 24px;} .timeline-description-body-box { padding: 10px; background: #F3F4F7; text-align:center; border-radius: 12px;} .timeline-description-body-box p { margin-bottom:0;} .timeline-description-footer { margin-top:20px;} .timeline-description-footer img { width: 100%; max-width: 174px; height: auto;} @media screen and (max-width: 1023px) { #timeline-month-tablet { display: none;} #timeline-cols .timeline-col { margin-bottom:10px; } #timeline-cols .timeline-col .timeline-month-mobile { padding:10px; width:auto; text-transform: uppercase; border-radius:6px;} #timeline-cols .timeline-col .timeline-description { width:100%;} .timeline-description-footer img { max-width: 87px;} } @media screen and (min-width: 1024px) { .timeline-month-mobile { display:none;} #timeline-month-tablet { display: flex;} #timeline-month-tablet div { padding: 20px 10px; font-size:20px; line-height:24px; text-transform: uppercase; text-align: center; border-radius:12px} #timeline-month-tablet div:nth-child(1) { width:20%;} #timeline-month-tablet div:nth-child(2) { width:60%;} #timeline-month-tablet div:nth-child(3) { width:20%;} #timeline-cols { margin-top:1rem; display: flex; gap:20px;} #timeline-cols .timeline-col { width:20%;} .timeline-description-body { padding-right:20px; border-right:1px solid #F2E5F7;} .timeline-col:last-child .timeline-description-body { padding-right:0; border:none;} } /*---HOW TO REGISTER DISPLAY NONE FOR THE MOMENT---*/ #how-to-register { margin-top:-2rem; padding-top:0;} #how-to-register-box { padding:3rem 1rem; background: #F3F4F7; border-radius: 60px;} #how-to-register-box .cols p:first-child { display: none;} #how-to-register-box ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #how-to-register-box ul li > div { display:flex; align-items: baseline; gap:10px;} #how-to-register-box ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;} #how-to-register-box ul li:last-child > div > p { margin-bottom:0;} #how-to-register-box h3 { margin-bottom:2.5rem;} @media screen and (min-width: 1366px) { #how-to-register-box { padding:5rem;} } /*---PAST INSIGHTS---*/ #past-insights { padding-top: 16rem; background-color: #F3F4F7;} .wiki-content .past-insights-p { margin-bottom:2rem;} .past-insights-illu { line-height:0 !important;} .past-insights-illu img { width: 180px;} @media screen and (min-width: 769px) { .past-insights-illu img { width: 100%; max-width: 200px; height: auto;} } /*---BOX CTA REPORT---*/ #box-cta-report { padding-bottom: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;} } /*---UPCOMING PROJECTATONS---*/ #upcoming-projectatons { margin-bottom:-10rem; padding-top:0; padding-bottom:0;} .card-upcoming-cols { margin-top: 1.5rem;} /*---UPCOMING CARDS---*/ .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-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/645595199/illu-card-projectathon-01.png"); background-size: cover; 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/645595199/illu-card-projectathon-02.jpg"); background-size: cover; 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 { position:relative;} .card-upcoming-body p.label { margin-bottom:12px; display: inline-block;} .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;} .card-upcoming-footer .label { display: inline;} .card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;} .card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;} .card-upcoming .label.past { color: #3D597A; background: #E3E6EB;} .card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;} @media screen and (max-width: 991px) { .card-upcoming-col { margin-bottom: 1.5rem;} } @media screen and (min-width: 992px) { .card-upcoming-cols { display: flex; width: 100%; gap:20px;} .card-upcoming-col:nth-child(1) { width: 50%;} .card-upcoming-col:nth-child(2) { width: 50%;} /*.card-upcoming-col:nth-child(3) { width: 29%;}*/ .card-upcoming-body { flex: 1 1 auto;} } /*---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 { 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;} #box-cta-projectathon ul { margin-bottom:0; padding:1rem 0 0 1rem; color: white;} #box-cta-projectathon a.secondary-download { color: #EC8FFF;} /*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;} } |