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;} } |
...