...
CSS Stylesheet |
---|
/*------------------------------------------------*/ /*---OOH PROJECTATONS DETAIL PAGE - 0913-03-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/647954663/illu-introduction-projectathon-01.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---*/ .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%} } /*---AGENDA---*/ .agenda-list { margin: 0; padding: 0;} .agenda-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;} .agenda-list > li:first-child { margin-top:0;} .agenda-list > li:last-child { padding-bottom:0; border-bottom: none;} .agenda-col:nth-child(1) p { font-size: 18px; color: #001832;} .agenda-list > li:last-child .information-col:nth-child(2) p { margin-bottom:0;} .agenda-list li:last-child .agenda-col:nth-child(2) p:last-child { margin-bottom:0;} .agenda-hour { margin: 0; padding:0; } .agenda-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;} .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-list .label { margin-bottom:0;} .agenda-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;} .agenda-list .label.plenary span { color: #842DB5; background: #F2E5F7;} .agenda-list .label.ccab span { color: #995E00; background: #FFEECC;} .agenda-list .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%} } /*---PERFORMROOM---*/ #perform.room-list { margin-top:-2.5rem; margin-bottom:1.5rem 0; padding-top:0; padding-bottom:0;} #perform .cols { margin-bottom:0;} #perform ul.room-list > li { margin:2.5rem2rem 0 0 0; padding-bottom: 01rem; list-style-type: 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 border-bottom: 1px solid #E3E6EB;} .room-list > li:first-child { margin-top:0;} .room-list > li:last-child { padding-bottom:0; border-bottom: none;} .room-col:nth-child(1) p { font-size: 18px; color: #001832;} .room-list > li:last-child .room-col:nth-child(2) p { margin-bottom:0;} .room-list li:last-child > div > p.room-col:nth-child(2) p:last-child { margin-bottom:0;} #perform h3 { margin-bottom:2.5rem;} .performroom-illuhour { margin-bottom: 0; line-heightpadding:0; !important;} .performroom-illuhour imgli { widthpadding:1rem 180px0;} @media screen and (min-width: 769px) { .perform-illu img { width: 100%; max-width: 270px; height: auto;} } /*---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;} } /*---TIMELINE---*/ #timeline list-style: none; border-bottom: 1px dashed #F2E5F7;} .room-hour li:first-child { padding-top:0;} .room-hour li:last-child { padding-bottom:0; border-bottom: none;} .room-hour li .room-hour-cols { display: flex;} .room-hour li .room-hour-col:nth-child(1) { width: 25%; font-family: Source Sans Pro SB;} .room-hour li .room-hour-col:nth-child(2) { width: 75%;} .room-list .label { margin-bottom:0;} .room-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;} .room-list .label.room1 span { color: #842DB5; background: #F2E5F7;} .room-list .label.room2 span { color: #995E00; background: #FFEECC;} @media screen and (min-width: 769px) { .room-cols { display: flex;} .room-col:nth-child(1) { width: 30%;} .room-col:nth-child(2) { width: 70%} } /*---PERFORM---*/ #perform { margin-top:-2.5rem; margin-bottom:1.5rem; padding-top:0; padding-bottom:0;} #perform .cols { margin-bottom:0;} .timeline-list #perform ul { margin:2.5rem 0 !important0 0; padding: 0; list-style: none;} .timeline-list#perform ul li > div { margindisplay:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;} .timeline-list li:first-child { margin-top:0;} .timeline-listflex; 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 { paddingmargin-bottom:0; border} #perform h3 { margin-bottom: none2.5rem;} .timeline-col:nth-child(1) pperform-illu { fontmargin-sizebottom: 18px0; colorline-height:0 #001832!important;} .timeline-col:nth-child(2) p:first-childperform-illu img { font-size: 18px; font-weight: bold; color: #001832;} .timeline-list li:last-child .timeline-col:nth-child(2) p:last-child { margin-bottom:0width: 180px;} @media screen and (min-width: 769px) { .timelineperform-colsillu img { displaywidth: flex100%; align-itemsmax-width: 270px; height: centerauto;} } .timeline-col:nth-child(1) { width: 30%;} .timeline-col:nth-child(2) { width: 70%} } /*---BOX CTA PROJECTATHONTIMELINE---*/ #box-cta-projectathon#timeline .cols { paddingmargin-topbottom:0; position:relative;} #box-cta-projectathon .projectathon-box .timeline-list { paddingmargin:1.5rem; background-color: #00284A; border-radius:20px 0 !important; padding: 0;} #box-cta-projectathon .container .cols.timeline-list li { margin:2rem 0 0 0; padding-bottom:-1rem;} #box-cta-projectathon .projectathon-box-col-illu list-style-type: none; border-bottom: 1px solid #E3E6EB;} .timeline-list li:first-child { margin-bottomtop:1rem0;} #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.timeline-list li:last-child { padding-bottom:0; border-bottom: none;} .timeline-col:nth-child(1) p { font-size: 18px; color: #001832;} .timeline-col:nth-child(2) p:first-child { font-size: 18px; font-weight: bold; color: #001832;} .timeline-list li:last-child .timeline-col:nth-child(2) p:last-child { margin-bottom:0;} /*hack@media -screen remove empty p from confluence*/ #box-cta-projectathon .container > p:first-child, #box-cta-events .container > p:last-childand (min-width: 769px) { .timeline-cols { display: noneflex; borderalign-items:1px solid greencenter;} @media screen and (min-width: 769px .timeline-col:nth-child(1) { #box-cta-projectathon .projectathon-box { padding:2.5rem;} width: 30%;} .timeline-col:nth-child(2) { width: 70%} } /*---BOX CTA PROJECTATHON---*/ #box-cta-projectathon { padding-top:0; position:relative;} #box-cta-projectathon .projectathon-box-cols { displaypadding:1.5rem; background-color: flex#00284A; alignborder-items: centerradius:20px;} #box-cta-projectathon .container .cols { margin-bottom:-1rem;} #box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0} } @media screen and (min-width: 1366px) { 1rem;} #box-cta-projectathon .projectathon-box-col-illu img { width: 120px; height:auto;} #box-cta-projectathon h3, #box-cta-projectathon .projectathon-boxp { paddingcolor:5rem white;} } /*#box---ROOM---*/ .room-listcta-projectathon p.p-opacity { marginopacity: 0; padding: 0;.75} .room-list > li#box-cta-projectathon p:last-of-type { margin:2rem 0 0 0; padding-bottom:1rem0;} /*hack list-style-type: none; border-bottom: 1px solid #E3E6EB;} .room-list > li remove empty p from confluence*/ #box-cta-projectathon .container > p:first-child, { margin-top:0;} .room-list#box-cta-events .container > lip:last-child { padding-bottom:0display: none; border-bottom:1px nonesolid green;} .room-col:nth-child(1) p { font-size: 18px; color: #001832;} .room-list > li:last-child .room-col:nth-child(2) p @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;} .room-list li:last-child .room-col:nth-child(2) p:last-child { margin-bottom:0;} .room-hour { margin: 0; padding:0; } .room-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;} .room-hour li padding:0 3rem 0 0} } @media screen and (min-width: 1366px) { #box-cta-projectathon .projectathon-box { padding:5rem;} } /*---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 { padding-top:0display: none;} .room-hour li:last-child { padding-bottom:0; border-bottom#how-to-register-box ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} .room-hour#how-to-register-box ul li .room-hour-cols> div { display: flex;} .room-hour li .room-hour-col:nth-child(1) { width: 25%; font-family: Source Sans Pro SB;} .room-hour li .room-hour-col:nth-child(2) { width: 75%;} .room-list .label { margin-bottom:0;} .room-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;} .room-list .label.room1 span { color: #842DB5; background: #F2E5F7;} .room-list .label.room2 span { color: #995E00; background: #FFEECC 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: 769px1366px) { .room-cols { display: flex;} .room-col:nth-child(1)#how-to-register-box { widthpadding: 30%;} .room-col:nth-child(2) { width: 70%5rem;} } |