CSS Stylesheet |
---|
/*-----------------------------------------------*/ /*---OOH ACCELERATOR DETAIL PAGE - 13-05-2024---*/ /*---------------------------------------------*/ #main-content p:empty { display: none;} .mb-0 { margin-bottom:0;} /*---INTRODUCTION---*/ #introduction .container > p:first-child { display: none; border:1px solid red;} .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/716149200732397574/illu-introduction-accelerator-projectathon3-02024.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; letter-spacing: 5px; font-family: Source Sans Pro SB !important; text-transform: uppercase;} @media screen and (max-width: 768px) { .introduction-box { display: block;} .introduction-box-cover { height: 260px; width: 100%;} .introduction-box-content { padding: 2rem; width: 100%;} .introduction-box-content:before { width: 0;} } @media screen and (min-width: 769px) { .introduction-box-content h1 + p { width: 80%;} } /*---INFORMATION---*/ #information { padding-top:0; padding-bottom:0;} /*reboot*/ #information .container .cols { margin:0;} #information .container .cols > div { padding:0;} #information h2 { margin:6rem 0 40px 0;} #information h2:first-child { margin-top: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: flex-start;} .information-col:nth-child(1) { width: 30%;} .information-col:nth-child(2) { width: 70%} } /*---AGENDA BOX---*/ .agenda-content-box { position: relative; padding:80px; background-color:#00284A; border-radius:60px;} .agenda-content-box:nth-child(1) { margin-bottom:80px;} .agenda-content-box:nth-child(2) { margin-top:40px;} .agenda-content-box > p:first-child { display:none; border:1px solid red;} @media screen and (max-width: 768px) { .agenda-content-box { padding:20px; border-radius:20px;} } .agenda-content-box h2 { margin-bottom:40px; color: #FFF;} .agenda-hour-cols { display: flex;} .agenda-hour-col:nth-child(1) { padding:1rem 0; width: 25%; font-family: Source Sans Pro SB;} .agenda-hour-col:nth-child(2) { padding:1rem 0; width: 75%; border-bottom: 1px dashed rgba(255, 255, 255, 0.25);} .agenda-hour li:last-child .agenda-hour-cols .agenda-hour-col:nth-child(2) { border-bottom:none;} @media screen and (min-width: 769px) { .agenda-cols { display: flex;} .agenda-col:nth-child(1) { width: 30%;} .agenda-col:nth-child(2) { width: 70%} } /*hour*/ .agenda-hour { margin: 0; padding:0;} .agenda-hour li { list-style: none;} .agenda-hour li:first-child { padding-top:0;} .agenda-hour li:last-child { padding-bottom:0; border-bottom: 1px dashed transparent;} .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;} .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);} /*ico-location*/ .location { display: inline-flex; flex-direction: row; align-items: center; gap: 6px;} .location span:nth-child(1) { display: inline-block; width: 16px; height: 16px;} .location.room-1 span:nth-child(1) { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716149200/ico-room-1.svg") no-repeat center;} .location.room-1 span:nth-child(2) { color:#FBC11D;} .location.room-2 span:nth-child(1) { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716149200/ico-room-2.svg") no-repeat center;} .location.room-2 span:nth-child(2) { color:#EC8FFF;} /*add illu*/ .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;} } /*macro expand*/ .expand-container { margin:0; padding:0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);} .expand-container:last-child { border-bottom: 1px solid transparent;} .expand-container .aui-icon::before { font-size: 20px !important; color: #FFF;} .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-control { display: flex; align-items: center; margin-bottom:0; padding:40px 0;} .expand-control button { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items:end; gap: 24px; width:100%;} .expand-control button.aui-button.aui-button-link { color: transparent;} .expand-control button span:nth-child(1) {} .expand-control button span:nth-child(2) { text-align: left;} .expand-control-text {width: 100%; font-size: 20px; color: #FFF;} .expand-content { margin:0; padding: 0; color: #5E748E;} @media screen and (max-width: 768px) { .expand-control-text { font-size: 16px;} } /*---REGISTER---*/ #register { display:none; padding-bottom:0; background:#F3F4F7;} /*reboot*/ #register .container .cols { margin:0;} #register .container .cols > div { padding:0;} #register .container .cols { position:relative; z-index: 10;} #register h2 { margin-bottom:40px;} #register ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #register ul li { display:flex; align-items: baseline; gap:8px;} #register ul li 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;} #register ul li:last-child > p { margin-bottom:0;} #register p.p-btn-cta { margin:40px 0 0 0;} /*---FOOTER---*/ #projectathon-footer { padding-top:0;} /*reboot*/ #projectathon-footer .container .cols { margin:0;} #projectathon-footer .container .cols .col-12 { padding:0;} #projectathon-footer .container .cols div { border-top:1px solid #E3E6EB;} #projectathon-footer .container .cols div p { margin:40px 0 0 0;} |
...