| CSS Stylesheet |
|---|
#main-content { overflow: hidden;}
/*---SPECIFIC CLASS---*/
.wiki-content a.btn.ghost span.ico-open-in-new { margin-left: 10px; width: 18px; height: 18px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary-bis.svg") left no-repeat; background-size: 18px;}
.link-open-in-new { display: inline-block !important; position: relative;}
.link-open-in-newspan:hover { text-decoration: none;}
.link-open-in-new { margin-right: 28px}
.link-open-in-new.primary { color: #842DB5 !important;}
.link-open-in-new.primary:hover { color: #5D24A4 !important;}
.link-open-in-new.primary:focus { outline: 2px dashed #5D24A4 !important; outline-offset: 2px !important;}
.link-open-in-new span:after { position: absolute; top: 3px; right: -22px; content: ""; width: 18px; height: 18px; background: left no-repeat; background-size: 18px !important;}
.link-open-in-new.primary span:after { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary.svg");}
.link-open-in-new.primary:hover span:after { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary-hover.svg");}
.list-checked { margin:0; padding:0; }
.list-checked li { position: relative; padding: 0 0 0 36px; list-style-type: none;}
.list-checked li:before { content:''; display:block; position: absolute; top:0; left: 0; width:24px; height:24px; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-check-primary-bis.svg");}
.list-checked li > p { margin-bottom:12px;}
/*---HACK FOR CONFLUENCE - REMOVE EXTRA P---*/
#main-content.wiki-content > p { display: none; border:1px solid red;}
.cols > div > p:first-child, .cols > div > p:last-child { display:none; border:1px solid green;}
/*---CARD GRID COMMON FOR ALL SECTIONS---*/
/*card-grid*/
.card-grid { position: relative; padding:2.5rem; overflow: hidden;}
.card-grid-body img { width: 100%; max-width: 75px; height: auto;}
/*card-grid-custom*/
.card-grid.card-grid-custom { flex-direction: row; gap:24px;}
.card-grid-custom-illu { width: 28%;}
.card-grid-custom-illu img { width: 100%; max-width: 120px; height: auto;}
.card-grid-custom-content { width: 58%; position: relative;}
/*---INTRODUCTION---*/
/*-----------------*/
#introduction { overflow:visible;}
.introduction-content { position: relative; z-index: 2;}
.introduction-content h1 { margin-bottom:2.5rem;}
.introduction-illu { position: relative; overflow: visible;}
.introduction-illu p { margin-bottom: 0; line-height:0 !important;}
.introduction-illu img:first-child { position: relative; z-index: 2; width: 180px;}
.introduction-illu-bg { z-index: 1; position:absolute; top: -120px; left:-64px;}
@media screen and (min-width: 768px) {
.introduction-illu img:first-child { width: 100%; max-width: 275px; height: auto;}
.introduction-illu-bg { z-index: 1; position:absolute; top: -70px; left:-90px;}
}
/*hack for confluence - remove extra p*/
#introduction .container .cols > div p:first-child, #introduction .container .cols > div p:last-child { display: none; border:1px solid red;}
/*---WHO---*/
/*--------*/
#who { position: relative; z-index: 2;}
#who-title > div { padding-top:0; padding-bottom:0;}
#who-title h2 { margin-bottom:2.5rem;}
#who-title h2 + p { margin-bottom:2.5rem;}
#who .card-grid { min-height: 260px; background: #00284A;}
#who .card-grid .card-grid-custom-content { display: flex; flex-direction: column; height: 100%; justify-content: space-between; }
#who .card-grid .card-grid-custom-content h3 { color: white;}
#who .card-grid .card-grid-custom-content h3 + p { color: rgba(255, 255, 255, 0.75);}
#who .col-6 a.btn.primary-bis { background-color: transparent;}
#who .col-6 a.btn.primary-bis:hover { background: #134067; border-color:#134067;}
#who .card-grid-bg { position: absolute; left: 0; top: 0; height: 100%; }
#who .card-grid-custom-illu { display: flex; align-items: center; }
#who .card-grid-custom-illu img { position: relative; left: -11px;}
@media screen and (max-width: 540px) {
#who .card-grid-custom { flex-direction: column;}
#who .card-grid-custom-illu { width: 100%;}
#who .card-grid-custom-content { width: 100%;}
}
/*---INFORMATION---*/
/*----------------*/
#information { position:relative; padding-bottom:18rem; background-color: #F3F4F7;}
#information .information-illu { z-index: 1; position: absolute; bottom: 0; right: 0;}
#information .cols { z-index: 2; position: relative;}
#information h2 { margin-bottom:4rem;}
#information h3 { font-size: 18px; line-height: 24px; color: #3D597A;}
/*---BOX ONBOARDING PROCESS---*/
/*---------------------------*/
#box-process { position: relative; z-index: 2; margin-top:-12rem; padding-top:0; position:relative;}
#box-process .process-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-process .process-box-col-illu { margin-bottom:1rem;}
#box-process .process-box-col-illu img { width: 120px; height:auto;}
#box-process h3, #box-process p { color: white;}
#box-process p.p-opacity { opacity: 0.75}
.process-box-col-content p:last-child { margin-bottom: 0;}
@media screen and (min-width: 768px) {
#box-process .process-box { padding:2.5rem;}
#box-process .process-box-cols { display: flex; align-items: center;}
#box-process .process-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#box-process .process-box { padding:5rem;}
#box-process p.p-opacity { padding-right: 2rem;}
}
#box-process > p:first-child, #box-process > p:last-child { display:none; border:1px solid pink;}
/*---TOOLKIT---*/
/*------------*/
#toolkit { overflow:visible;}
#toolkit .toolkit-cta { margin-top: 2.5rem; margin-bottom:0;}
.toolkit-content { position: relative; z-index: 2;}
.toolkit-content h1 { margin-bottom:2.5rem;}
.toolkit-illu { position: relative; overflow: visible;}
.toolkit-illu p { margin-bottom: 0; line-height:0 !important;}
.toolkit-illu img:first-child { position: relative; z-index: 2; width: 180px;}
.toolkit-illu-bg { z-index: 1; position:absolute; top: -120px; left:-64px;}
@media screen and (max-width: 767px) {
#toolkit .cols { display: flex; flex-direction: column-reverse;}
}
@media screen and (min-width: 768px) {
.toolkit-illu img:first-child { width: 100%; max-width: 250px; height: auto;}
.toolkit-illu-bg { z-index: 1; position:absolute; top: -90px; left:-90px;}
}
/*---QUESTION---*/
/*-------------*/
#question { position: relative; z-index: 2;}
#question .question-cta { margin-top: 2.5rem; margin-bottom:0;}
.question-p-img { margin-bottom:0;}
.question-p-img img { width: 100%; max-width: 200px; height: auto;}
/*--- MACRO EXPAND ---*/
.expand-container { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
.expand-controlcontainer .aui-icon::before { displayfont-size: flex20px !important; flex-direction: row-reversecolor:#001832}
.expand-control { display: flex; 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-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-content { margin:0; padding: 0; color: #3D597A;}
.expand-content > p:first-child, .expand-content > p:last-child { display: none; border:1px solid green;}
.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;}
} |
...