Div | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||
| |||||||||||||||||||||||
Div | |||||||||||||||||||||||
| |||||||||||||||||||||||
|
Div | |||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
Div | |||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
CSS Stylesheet |
---|
/*-------------------------------------------*/
/*---OOH EVENTS CALENDAR PAGE - 21-11-2022---*/
/*------------------------------------------*/
/*---INTRODUCTION---*/
#introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/bg-illu-sigle-events.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
}
@media screen and (max-width: 769px) {
#introduction { background-position: top right; background-size: 240%;}
}
#introduction h1 + p.lead { margin-bottom:5rem;}
/*HACK TO REMOVE EMPTY P FROM CONFLUENCE*/
#introduction .container .cols p:first-child { display: none; border:1px solid red;}
.event-list .col-container { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid #F3F4F7;}
.event-list .col-container:last-child { border:none;}
.col-container { display: flex; justify-content: space-between; align-items: center !important;}
.col-first { width: 35%;}
.col-first img { max-width: 100%; height: auto; border-radius: 12px;}
.col-second { width: 55%;}
.col-second .badge { display:inline-flex; align-items:center; gap:4px; border-radius:4px;}
.col-container h2 { display: none;}
.col-container h3 { font-size:20px;}
.col-container h3 span { display: block; font-size: 1rem; line-height: 1; color: #5D24A4;}
.col-container p.date { margin-bottom:0.5rem;}
.col-container p.event-cta { margin-bottom:0; text-align: right;}
/*---REVISIT PAST EVENT---*/
#revisit-past-events { margin-top:-6rem; padding-top:2.5rem; border-top:1px solid #F3F4F7;}
#revisit-past-events .event-list { position: relative; z-index: 1;}
/*
#revisit-past-events .link-cta.after { color: #3D597A !important;}
#revisit-past-events .link-cta.after span:after { position: absolute; top: 2px; right: -30px; content: ""; width: 24px; height: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-arrow-forward-primary-bis.svg") left no-repeat; background-size: 24px; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease;}
*/
/*EXPAND MACRO*/
.expand-container |
CSS Stylesheet |
/*-------------------------------------------*/ /*---OOH EVENTS CALENDAR PAGE - 21-11-2022---*/ /*------------------------------------------*/ /*---INTRODUCTION---*/ #introduction { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/bg-illu-sigle-events.svg"); background-position: top right; background-repeat: no-repeat; background-size: 100%; } @media screen and (max-width: 769px) { #introduction { background-position: top right; background-size: 240%;} } #introduction h1 + p.lead { margin-bottom:5rem;} /*HACK TO REMOVE EMPTY P FROM CONFLUENCE*/ #introduction .container .cols p:first-child { display: none; border:1px solid red;} .event-list .col-container { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid #F3F4F7;} .event-list .col-container:last-child { border:none;} .col-container { display: flex; justify-content: space-between; align-items: center !important;} .col-first { width: 35%;} .col-first img { max-width: 100%; height: auto; border-radius: 12px;} .col-second { width: 55%;} .col-container h2 { display: none;} .col-container h3 { font-size:20px;} .col-container h3 span { display: block; font-size: 1rem; line-height: 1; color: #5D24A4;} .col-container p.date { margin-bottom:0.5rem;} .col-container p.event-cta { margin-bottom:0; text-align: right;} /*---REVISIT PAST EVENT---*/ #revisit-past-events { margin-top:-6rem; padding-top:2.5rem; border-top:1px solid #F3F4F7;} #revisit-past-events .event-list { position: relative; z-index: 1; margin-top:-2.5rem;} /* #revisit-past-events .link-cta.after { color: #3D597A !important;} .expand-container .col-container { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #F3F4F7;} #revisit-past-events .linkexpand-cta.after span:after control { positionmargin:0 absolute!important; toppadding: 2px; right: -30px; content: ""; width: 24px; height: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-arrow-forward-primary-bis.svg") left no-repeat; background-size: 24px; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease;} */ /*EXPAND MACRO*/ .expand-container { position: relative; z-index: 1; margin-top:-2.5rem;} .expand-container .col-container { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #F3F4F7;} 0 !important; text-align: right;} /*expand control*/ #revisit-past-events .expand-control .expand-icon { display: none;} #revisit-past-events .expand-control[aria-expanded="true"] { display: none;} #revisit-past-events .expand-control .expand-control-text { color: #3D597A !important; text-decoration: underline;} #revisit-past-events .expand-control .expand-control-text:hover { text-decoration: none !important;} /*expand content*/ #revisit-past-events .expand-controlcontent { margin:0 !important; padding: 0 !important; text-align: right} #revisit-past-events .expand-content > p:first-child, .expand-content > p:last-child { display: none;} /*expand control---BOX CTA PROJECTATHON---*/ #revisit#box-pastcta-events .expand-control .expand-icon projectathon { displayposition: nonerelative; padding-top:0;} #revisit#box-pastcta-eventsprojectathon .expand-control[aria-expanded="true"] { display: none;} #revisit-past-events .expand-control .expand-control-text { color: #3D597A !important; text-decoration: underline;} #revisit-past-events .expand-control .expand-control-text:hover { text-decoration: none !important;} /*expand content*/ #revisit-past-events .expand-content { margin:0 !important; padding: 0 !important;} #revisit-past-events .expand-content > p:first-child, .expand-content > p:last-child { display: none;} /*---BOX CTA EVENTS---*/ #box-cta-projectathon-playbook { padding-topprojectathon-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;} /*hack - remove empty p from confluence*/ #box-cta-projectathon-playbook .container > p:first-child , #box-cta-projectathon-playbookevents .container > p:last-child { display:none; border:1px solid red;} #box-cta-projectathon-playbook .container { position: relativenone; paddingborder:1px 3remsolid 2.5rem; background-color: #00284A; border-radius: 20px;} green;} @media screen and (min-width: 769px) { #box-cta-projectathon .projectathon-playbook h3box { color: whitepadding:2.5rem;} #box-cta-projectathon .projectathon-playbookbox-cols p { margin-top:0.75rem; color: white; opacity:0.75display: flex; align-items: center;} #box-cta-projectathon .projectathon-playbook p:last-childbox-col-illu { margin-bottom:0; opacity:1;padding:0 3rem 0 0} } @media screen and (min-width: 769px1366px) { #box-cta-projectathon-playbook .container { padding: 6.25rem 5rem;} #box-cta-projectathon-playbookbox .col-10 { padding-left: 2rem5rem;} } |