| CSS Stylesheet |
|---|
/*-------------------------------------------------------*/ /*---OOH COMMON AND SUPPORTTINGSUPPORTING SERVICES - 1718-1103-20222024---*/ /*-----------------------------------------------------*/ .hack-remove-p > p:first-child, .hack-remove-p > p:last-child { display:none; border:1px solid red;} @media screen and (max-width: 769px) { .img-mobile { width: 180px;} .remove-on-mobile { display:none !important;} } #main-content { overflow: hidden;} /*---INTRODUCTION---*/ #introduction h1 { margin-bottom:2.5rem;} #introduction p { margin-bottom:0;} #introduction img { width: 100%; max-width: 225px; height: auto;} @media screen and (maxmin-width: 1200px769px) { .not-d-block-mobile { display:inline !important #introduction img { max-width: 320px;} } /*---INTRODUCTION---*/ /*HACK INTRODUCTION ILLU SIZEhack - remove empty p from confluence*/ #introduction { padding-top:3rem; padding-bottom:3rem;} #introduction h1 { margin-bottom:2.5rem;} #introduction p { margin-bottom:0;} /*hack - remove empty p from confluence*/ #introduction p:first-child ,#introduction p:last-child { display:none; p:first-child ,#introduction p:last-child { display:none; border:1px solid red;} /*---COMMON SERVICES---*/ #services#common-services { background: #00284A;} #services h2, #services h3, #services p { color: white;} #services .card-grid { padding: 0; background: transparent;} #services .col-separator-before:before, #services .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);} #services .opacity-75 { opacity: 0.75;} #services .opacity-50 { opacity: 0.50;} #services .badge { margin-bottom:0.5rem; color: #995E00; background: #FFEECC;} /*HACK remove empty p from Confluence*/ #services .col-4 > p:first-child { border:1px solid green; display: none;} @media screen and (min-width: 769px) { #services { padding-bottom:6rem;} #services .card-grid-body p:last-child { margin-bottom:0;} } /*---SUPPORTING SERVICES---*/ #supporting-services { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/615481586/bg-illu-sigle-supporting-services.svg"); background-position: bottom right; background-repeat: no-repeat; } #supporting-services .cols:last-child { margin-top:-3rem;} #supporting-services h2 { margin-bottom:2.5rem;} #supporting-services hr { margin:2rem 0 3rem 0; border:none; border-top:1px solid #E3E6EB; height: 1px;} @media screen rgb(243,244,247); background: linear-gradient(180deg, rgba(243,244,247,1) 85%, rgba(251,252,255,1) 85%, rgba(251,252,255,1) 100%);} #common-services h2 { margin-bottom:2.5rem;} .common-services-card { display: flex; flex-direction: column; gap: 24px; padding: 32px 40px 40px;} .common-services-card-bg { position: absolute; top: 0; right: 0; width: 100%; } .common-services-card .card-grid-custom-illu { display: flex; width: 100%; justify-content: end; align-items: center; min-height: 128px;} .common-services-card .card-grid-custom-illu img { position: relative; top: -21px; width: 100%; max-width: 120px; height: auto;} .common-services-card .card-grid-custom-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative;} .common-services-card h3 { margin-bottom: 12px;} /*to do put in the main CSS*/ .common-services-card .card-grid-footer .card-grid-footer-btns { display: inline-flex; flex-direction: row; gap:12px;} @media only screen and (max-width: 1024px) and (min-width: 769px) { .supportingcommon-services-container { display: flex; justify-content: space-between;} .supporting-services-container p:first-child { width: 70%;} .supporting-services-container p:last-child { width: 30%; text-align: right;} .supporting-services-container .btn { margin-left:1rem;} } /*---SERVICE DESK---*/ #service-desk { padding-top: 0;} #service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;} |
| Div | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
|
| Div | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
|
card .card-grid-footer .card-grid-footer-btns {flex-direction: column;}
}
.wiki-content a.btn { justify-content: flex-start; align-items: left;}
.wiki-content a.btn span[class^="ico-"] { flex-shrink: 0;}
/**/
/*hack - remove empty p from confluence*/
.common-services-cards .col-4 > p:first-child, .common-services-cards .col-4 > p:last-child { border:1px solid red; display: none;}
/*---TESTING SERVICES---*/
#testing-services h2 { margin-bottom:2.5rem;}
#testing-services .col-7 { position: relative; z-index: 2;}
#testing-services .col-4 { position: relative;}
#testing-services .col-4 p { margin-bottom:0;}
#testing-services .bg { z-index: 1; position: absolute; top:-50px; left: 30px;}
#testing-services .illu { z-index: 2; position: relative; width: 100%; max-width: 200px; height: auto;}
@media screen and (max-width: 768px) {
#testing-services .col-7 { margin-top: -2.5rem;}
}
@media screen and (min-width: 769px) {
#testing-services { padding-top:0;}
#testing-services .col-4 { order: 2;}
#testing-services .col-7 { order: 1;}
#testing-services .illu { max-width: 270px;}
}
/*---SUPPORTING SERVICES---*/
#supporting-services h2 { margin-bottom:2.5rem;}
#supporting-services .supporting-services-cta { margin-bottom:0;}
#supporting-services .col-6 { position: relative; z-index: 2;}
#supporting-services .col-4 { position: relative;}
#supporting-services .col-4 p { margin-bottom:0;}
#supporting-services .bg { z-index: 1; position: absolute; top:0; right: 120px;}
#supporting-services .illu { z-index: 2; position: relative; width: 100%; max-width: 200px; height: auto;}
@media screen and (max-width: 768px) {
#supporting-services .col-6 { margin-top: -2.5rem;}
}
@media screen and (min-width: 769px) {
#supporting-services .bg { z-index: 1; position: absolute; top:10px; right: 60px;}
#supporting-services .illu { max-width: 270px;}
}
/*---EVIDENCE EXPLORER---*/
#evidence-explorer h2 { margin-bottom:2.5rem;}
#evidence-explorer .col-7 { position: relative; z-index: 2;}
#evidence-explorer .col-4 { position: relative;}
#evidence-explorer .col-4 p { margin-bottom:0;}
#evidence-explorer .bg { z-index: 1; position: absolute; top:-50px; left: 10px;}
#evidence-explorer .illu { z-index: 2; position: relative; width: 100%; max-width: 200px; height: auto;}
#evidence-explorer ul { margin: 0 0 1.5rem 0; padding: 0; list-style: none;}
#evidence-explorer ul li:before { content: '•'; padding-right: 12px;}
@media screen and (max-width: 768px) {
#evidence-explorer .col-7 { margin-top: -2.5rem;}
}
@media screen and (min-width: 769px) {
#evidence-explorer {}
#evidence-explorer .col-4 { order: 2;}
#evidence-explorer .col-7 { order: 1;}
#evidence-explorer .illu { max-width: 270px;}
}
/*---DOCUMENTS---*/
#documents { z-index: 2; position:relative; padding-bottom:0;}
#documents h2, #documents p.lead { margin-bottom: 2.5rem;}
#documents .cols:nth-child(2) {margin-top:-2rem;}
#documents .card-grid { text-align: center;}
#documents .card-grid-body p { font-family: Source Sans Pro SB; color: #001832;}
#documents .card-grid-body p img { margin:0 auto 0.5rem auto; display: block;}
/*hack - remove empty p from confluence*/
#documents .container .cols:first-child p:first-child { display: none; border:1px solid red;}
#documents .col-4 > p:first-child, #documents .col-4 > p:last-child { display: none; border:1px solid red;}
/*---BOX CTA PLAYBOOK---*/
#box-cta-playbook { position:relative;}
#box-cta-playbook .container .cols { margin-bottom:-1rem;}
.box-playbook { padding:1.5rem; background-color: #00284A; border-radius:20px;}
.box-playbook-col-illu { margin-bottom:1rem;}
.box-playbook-col-illu img { width: 120px; height:auto;}
.box-playbook h3, .box-playbook p { color: white;}
.box-playbook p.p-opacity { opacity: 0.75}
.box-playbook p:last-of-type { margin-bottom:0;}
@media screen and (min-width: 769px) {
.box-playbook { padding:2.5rem;}
.box-playbook-cols { display: flex; align-items: center;}
.box-playbook-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
.box-playbook { padding:5rem;}
}
/*hack - remove empty p from confluence*/
#box-cta-playbook .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}
/*---VIDEO---*/
#video {margin-top:6rem;}
#video h3 { margin-bottom:20px;}
.video-container-iframe { margin-top:40px; position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;} |
| Div | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
|
| Div | |||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||
|
| Div | |||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Div | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||
| |||||||||||||||||||||
| Div | |||||||||||||||||||||
| |||||||||||||||||||||
|