Div | |||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
|
Div | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||
|
Div | ||||
---|---|---|---|---|
| ||||
|
|
Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Div | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
|
Div | ||||
---|---|---|---|---|
| ||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||||
---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||
|
Div | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||
|
Div | ||||
---|---|---|---|---|
| ||||
|
Div | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
CSS Stylesheet | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
/*---------------------------------*/
/*---OOH HOME PAGE - 27-03-2024---*/
/*-------------------------------*/
.mb-0 { margin-bottom: 0;}
@media screen and (max-width: 769px) {
.img-mobile { width: 180px;}
}
@media screen and (max-width: 1200px) {
.not-d-block-mobile { display:inline !important;}
}
/*---INTRODUCTION---*/
#introduction .introduction-text { z-index: 3; position: relative;}
#introduction h1 { margin-bottom:2.5rem;}
#introduction p.lead { margin-bottom:0;}
#introduction .introduction-illu { position: relative;}
.introduction-illu-img { z-index: 2; position: relative; width: 180px;}
.introduction-illu p { margin-bottom:0;}
@media screen and (max-width: 768px) {
#introduction { overflow:visible;}
.introduction-illu-bg { display:none;}
}
@media screen and (min-width: 769px) {
#introduction { overflow:hidden;}
.introduction-illu-img { width: 100%; max-width: 390px; height: auto;}
.introduction-illu-bg { z-index: 1; position:absolute; top: -8%; left:-8%;}
}
/*---ARCHITECTURAL DESIGN---*/
#architectural-design { padding-bottom:16rem; background: #F3F4F7;}
#architectural-design h2 { margin-bottom:2.5rem;}
#architectural-design .cols:last-child p:last-child { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;}
#architectural-design .technical-system_steps { list-style: none; margin:0; padding: 0;}
#architectural-design .technical-system_steps li > div { display:flex; align-items: baseline; gap:10px;}
#architectural-design .technical-system_steps li > div > 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;}
#architectural-design .ico-download {filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(110%) contrast(100%);}
#architectural-design .diagram { margin-top:2.5rem;}
.architectural-design-illu { width: 100px;}
/*---LATEST NEWS---*/
/*hack margin top 1rem + 1.5rem natural space from the newsteaser = 2.5rem spacing*/
.news-teaser-deprecated ~ p { margin-top:1rem; margin-bottom: 0; text-align:center;}
/*hack - remove empty p from confluence*/
#latest-news .container > p:first-child, #latest-news .container > p:last-child { border:1px solid red;}
#latest-news .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
#latest-news .news-teaser-root a img { border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#latest-news .news-teaser-root > div > div > div > div > div > div:last-child { padding:0 2rem 0.25rem 2rem;}
#latest-news .news-teaser-root a h2 {font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none;}
#latest-news .news-teaser-root a, #latest-news .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #001832; text-decoration: none;}
#latest-news .news-teaser-root a:hover { text-decoration: underline;}
#latest-news .news-teaser-root .aui-group span { font-size: initial; color: #001832; }
#latest-news .news-teaser-root > div > div:last-child { display:none;}
@media screen and (max-width: 768px) {
#latest-news .news-teaser-root > div > div > div { position:relative !important; width: auto !important; left: auto !important; top: auto !important;}
#latest-news .news-teaser-root .aui-group { min-height: auto !important;}
}
/*---GUIDANCE BOX---*/
#guidance-box { position:relative; margin-top:-13rem; padding-top:0; padding-bottom:0;}
#guidance-box .guidance-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#guidance-box .container .cols { margin-bottom:-1rem;}
#guidance-box .guidance-box-col-illu { margin-bottom:1rem;}
#guidance-box .guidance-box-col-illu img { width: 82px; height:auto;}
@media screen and (min-width: 769px) {
#guidance-box { margin-top:-12rem;}
#guidance-box .guidance-box { padding:2.5rem;}
#guidance-box .guidance-box-cols { display: flex; align-items: center;}
#guidance-box .guidance-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#guidance-box .guidance-box { padding:5rem;}
}
#guidance-box h3, #guidance-box p { color: white;}
#guidance-box p.p-opacity { opacity: 0.75}
#guidance-box p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#guidance-box .container > p:first-child, #guidance-box .container > p:last-child { display: none; border:1px solid green;}
/*---DOCUMENTATION AND SERVICES---*/
#documentation-services { background-color: #F3F4F7; /*background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-documentation-services.svg") no-repeat 100% 10%*/}
#documentation-services .common-supporting-services h2 { margin-bottom:2.5rem;}
#documentation-services .technical-design-documentation { padding-top: 2.5rem; margin-bottom:-1rem;}
#documentation-services .technical-design-documentation h2 { margin-bottom:2.5rem;}
.technical-design-documentation-illu img { width: 180px;}
@media only screen and (max-width: 768px) {
#documentation-services .cols:nth-child(2) { display: flex; flex-direction: column-reverse;}
}
@media screen and (min-width: 769px) {
.technical-design-documentation-illu img { width: 100%; max-width: 270px; height: auto;}
}
#documentation-services .cols p:last-child { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#documentation-services .container > p:first-child, #documentation-services .container > p:last-child { display: none; border:1px solid green;}
@media screen and (min-width: 769px) {
#documentation-services .technical-design-documentation div:first-child { padding: 1.5rem;}
}
/*---COLLABORATE WITH US---*/
#collaborate-with-us { position:relative; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#collaborate-with-us .container { position: relative; padding: 3rem 3rem 9rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;
}
@media screen and (min-width: 769px) {
#collaborate-with-us .container { padding: 6rem 3rem 6rem 0;}
}
.collaborate-with-us-img { position: absolute; bottom: 0; right: 1.5rem; width: 100%; max-width: 200px; height: auto;}
@media screen and (min-width: 769px) {
.collaborate-with-us-img { max-width: 320px;}
}
#collaborate-with-us h2 { margin-bottom:2.5rem;}
#collaborate-with-us .col-separator-before:before,
#collaborate-with-us .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}
#collaborate-with-us .opacity-75 { color: rgba(255, 255, 255, 0.75);}
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}
#collaborate-with-us .p-badge {}
#collaborate-with-us .badge { margin-bottom:0; color: #995E00; background: #FFEECC;}
#collaborate-with-us a, #collaborate-with-us .restricted-space-link { color: #EC8FFF;}
.collaborate-with-us-list-link { margin:0; padding: 0;}
.collaborate-with-us-list-link li { margin-bottom: 1rem;}
.collaborate-with-us-list-link li:last-child { margin-bottom: 0;}
/*hack - remove empty p from confluence*/
#collaborate-with-us > p:first-child, #collaborate-with-us > p:last-child { display:none;}
/*---SERVICE DESK---*/
#service-desk { position:relative;}
#service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;}
.service-desk-p-img { margin-bottom:0;}
.service-desk-p-img img { width: 100%; max-width: 200px; height: auto;}
/*---LATEST NEWS DEPRECATED BACKUP---*/
/*hack - remove empty p from confluence*/
.news-teaser-deprecated > p:first-child, .news-teaser-deprecated > p:last-child { display:none; border:1px solid green;}
.news-teaser-deprecated { padding-top:0; padding-bottom:0;}
.news-teaser-deprecated .newsteaser-entry { display: inline-block; margin-top:0.5rem; box-shadow:none;}
.news-teaser-deprecated .newsteaser-entry .aui-group { display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
/*LINK*/
.news-teaser-deprecated .newsteaser-entry a,
.news-teaser-deprecated .newsteaser-entry a:link { display:inline-block; background-color: transparent !important; border:none !important; }
.news-teaser-deprecated .newsteaser-entry .news-image a img { border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
.news-teaser-deprecated .newsteaser-entry .news-metadata { font-size:14px !important; line-height: 20px; color: #5E748E !important;}
.news-teaser-deprecated .newsteaser-entry h2 a { font-size: 20px; line-height: 24px; text-transform: initial; text-decoration:none; color: #001832 !important;}
.news-teaser-deprecated .newsteaser-entry h2 a:hover { color: #842DB5 !important; text-decoration: underline !important;}
.news-teaser-deprecated .newsteaser-entry p a { font-weight: normal; color: inherit !important;}
.news-teaser-deprecated .newsteaser-entry p a:hover { text-decoration: underline !important;}
/*CONTENT*/
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child { padding: 0;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { padding: 1rem 2.5rem 0 2.5rem;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p { margin-bottom: 0;}
@media screen and (max-width: 768px) {
.news-teaser-deprecated .newsteaser-entry { position:relative !important; top: 0 !important; left: 0 !important; float: none !important;; display: block !important; width: 100% !important;}
}
@media screen and (min-width: 769px) {
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { display:flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 1rem 2.5rem 1rem 2.5rem; min-height: 260px;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p:last-child { display: none; }
}
@media screen and (min-width: 1366px) {
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { min-height: 200px;}
}
/*---SLIDER HIGHLIGHT---*/
#slider-highlight { padding:0; background-color: #00284A;}
.slider-highlight-bg { padding:6px 1.5rem 36px 1.5rem;}
#slider-highlight > p:first-child, #slider-highlight > p:last-child { display: none; border:1px solid red;}
#slider-highlight .container .cols { margin-top: 0; margin-bottom: 0;}
#slider-highlight .container .cols > div > p:first-child, #slider-highlight .container .cols > div > p:last-child { display: none;}
#slider-highlight .cols .slider-highlight-content > p:first-child, #slider-highlight .cols .slider-highlight-content > p:last-child{ display: none; border:1px solid green;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left p { margin-top:1rem; font-size: 20px; line-height: 24px; color: white;}
@media screen and (min-width: 1280px) {
.slider-highlight-bg { padding:36px 1.5rem 60px 1.5rem;}
#slider-highlight .cols .slider-highlight-content { display: flex; gap:40px; justify-content: space-between;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left { display: flex; gap:12px; align-items:center; width:70%;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left p { margin-top:0; margin-bottom:0; }
}
/*MACRO SLIDER*/
#slider-highlight .news-slider-root { width: 100%;}
#slider-highlight .news-slider-root > div { padding:0;}
#slider-highlight .news-slider-root div div { background-color: transparent; box-shadow:none;}
#slider-highlight .aui-group .aui-item:first-child { display: none;}
#slider-highlight .aui-item { padding:0;}
/*heading*/
#slider-highlight h2:first-child, #slider-highlight h2:first-child +div { display: none;}
/*dots*/
#slider-highlight .flickity-page-dots { position:absolute; top:auto; bottom:20px; margin-bottom: 0; height:1rem; text-align: center !important;}
#slider-highlight .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #EC8FFF !important; border:1px solid #EC8FFF;}
#slider-highlight .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #EC8FFF !important; border:1px solid #EC8FFF; border-radius:10px;}
#slider-highlight .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
/*---PROJECTATHON---*/
#projectathon { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-projectathon.svg") no-repeat bottom left;}
#projectathon h2, #projectathon .p-spacing { margin-bottom:2.5rem;}
.card-upcoming-cols { margin-top: -1rem;}
.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}
.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-04.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url( | |||||||||||||||||||||
Div | |||||||||||||||||||||
| |||||||||||||||||||||
Div | | ||||||||||||||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||
|
Div | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||
|
"https://ec.europa.eu/digital-building-blocks/sites/
x/GIcUJ"><span>Change log</span><span class="ico-cta"></span></a></p>
</div>
</div> id | services |
---|---|
class | section |
class | container |
---|
Div | ||
---|---|---|
| ||
|
class | cols gap-lg |
---|
Div | ||
---|---|---|
| ||
|
Div | ||
---|---|---|
| ||
|
class | col-4 |
---|
download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;} .card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;} .card-upcoming-body p { position:relative;} .card-upcoming-body p.label { margin-bottom:12px; display: inline-block;} .card-upcoming-body p:last-child { margin-bottom:0;} .card-upcoming-date { font-size: 14px !important; color: #5E748E !important;} .card-upcoming-footer { margin-top:24px; text-align: right;} .card-upcoming-footer .label { display: inline;} .card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;} .card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;} .card-upcoming .label.past { color: #3D597A; background: #E3E6EB;} .card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;} @media screen and (max-width: 991px) { .card-upcoming-col { margin-bottom: 1.5rem;} } @media screen and (min-width: 992px) { .card-upcoming-cols { display: flex; margin:0 auto; width: 80%; gap:24px;} .card-upcoming-col:nth-child(1) { width: 50%;} .card-upcoming-col:nth-child(2) { width: 50%;} /*.card-upcoming-col:nth-child(3) { width: 29%;}*/ .card-upcoming-body { flex: 1 1 auto;} } /*---MONITORING---*/ #monitoring { margin-top:-6rem; padding-top:9rem; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico
bg-illu-dns
sigle-secondary
monitoring.svg"></p> <h3 class="h5">Semantic Repository</h3> <p class="opacity-75">The Semantic Repository is a common service that acts as a data portal for the technical system.</p> </div> <div class="card-grid-footer"> <p><span class="badge sm">In development</span></p> <p class="opacity-50">Expected release date: <strong>October 2023</strong></p> </div> </div>
id | supporting-services |
---|---|
class | section |
class | container |
---|
class | cols |
---|
class | col-8 |
---|
) no-repeat top right;} #monitoring .cols { margin-bottom: 0;} #monitoring .cols > div {padding-top:0; padding-bottom:0;} #monitoring h2, #monitoring h2 + p { margin-bottom:2.5rem;} /*---MONITORING CARDS---*/ .card-monitoring { position: relative; display: flex; flex-direction: column; gap:24px; min-width: 0; height: 100% !important; padding:24px; background-color: white; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico-testing-primary.svg"></p> <h3 class="h5">Testing service</h3> <div class="supporting-services-container"> <p>The OOTS Testing service assists national teams in implementing the Once-Only Technical System. Information on available testing services, including the test platform and other tools to facilitate testing are available on a restricted wiki space.<br><br> If required, please request access to the restricted wiki via <a target="_blank" href="https://ec.europa.eu/digital-building-blocks/tracker/plugins/servlet/desk/portal/15">the Service Desk</a>. </p> <p><a class="btn ghost" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/kwPTI"><span>Go to wiki</span><span class="ico-cta"></span></a></p> </div> <hr> <!-- <div class="supporting-services-container"> <p>Access a test platform and tools through our secure testing service</p> <p><a class="btn ghost" target="_blank" href="#"><span>Go to testing service</span><span class="ico-external"></span></a></p> </div> --> <div class="supporting-services-container"> <p>Contact the service desk on <a href="mailto:EC-OOTS-SUPPORT@ec.europa.eu" target="_blank">EC-OOTS-SUPPORT@ec.europa.eu</a></p> <p><!--<a class="btn ghost" target="_blank" href="mailto:EC-OOTS-SUPPORT@ec.europa.eu"><span>Contact via email</span><span class="ico-email"></span></a>--></p> </div>
id | latest-news |
---|---|
class | section |
class | container |
---|
Html-bobswift |
---|
<div class="container">
<div class="cols">
<div class="col-7">
<h2>Latest news</h2>
</div>
<div class="col-5 text-right">
<p><a class="link-cta after text-primary" href="https://ec.europa.eu/digital-building-blocks/sites/x/iAJTIw"><span>Go to news room</span></a></p>
</div>
</div>
</div>
|
Div | ||||
---|---|---|---|---|
| ||||
|
Div | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||
|
677518598/bg-monitoring-card.svg") no-repeat bottom left white; box-shadow: 0px 4px 20px 0px rgba(0, 55, 100, 0.10); border-radius: 16px; overflow: hidden;}
.card-monitoring-header h3 { position: relative; margin-bottom: 12px; font-size:20px; line-height:22px;}
.card-monitoring-header h3:after { content:""; position:absolute; bottom: -12px; left: 0; width: 44px; height: 2px; background-color: #5D24A4;}
.card-monitoring-body { display: flex; align-items: center; align-self: stretch; gap:20px;}
div.card-monitoring-body-number { display:flex; align-items:center; flex: 0 160px; padding:16px 24px; height:100px; color: #842DB5; background: #F2E5F7; border-radius: 16px;}
div.card-monitoring-body-number-inner { width: 100%;}
div.card-monitoring-body-number span { display: block; width: 100%; text-align: center;}
div.card-monitoring-body-number span:first-child { font-size: 44px; line-height: 32px; font-weight: 700;}
div.card-monitoring-body-number span:last-child { font-size: 14px; line-height: 20px;}
div.card-monitoring-body-content { flex:1;}
div.card-monitoring-body-content p { margin-bottom: 0; font-size: 14px; line-height: 20px;}
.card-monitoring-footer { text-align: right;}
@media screen and (max-width: 768px) {
.card-monitoring-cols { margin-top: 1.5rem;}
}
@media screen and (max-width: 991px) {
.card-monitoring-col { width: 100%;}
.card-monitoring-col { margin-bottom: 1.5rem;}
}
@media screen and (min-width: 992px) {
.card-monitoring-cols { display: flex; width: 100%; gap:20px;}
.card-monitoring-col { width: 33%;}
.card-monitoring-body { flex: 1 1 auto;}
}
/*---MONITORING CARDS---*/
.monitoring-cta { padding-top:2.5rem; text-align:center;}
/*---VIDEO---*/
#video {}
#video h2 { margin-bottom:2.5rem;}
/*hack remove empty p from confluence*/
#video .container .cols:first-child p:first-child { display: none; border:1px solid red;}
.video-container-iframe { 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;}
|
CSS Stylesheet |
---|
/* updated news section */
#latest-news h2 { margin-bottom: 2.5rem;}
#latest-news .content-by-label{display: none; visibility: 'hidden';}
#latest-news .news-wrapper{display: flex; flex-direction: column;}
#latest-news .news-wrapper > .btn{margin: auto; margin-top: 32px;}
#latest-news .news-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;}
#latest-news .news-grid .news-item{overflow: hidden; border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(0, 24, 50, 0.08); display: flex; flex-direction: column; gap: 24px; background: white;}
#latest-news .news-grid .news-item .article-details{padding-inline: 40px; padding-bottom: 40px; display: flex; flex-direction: column; flex: 1;}
#latest-news .news-grid .news-item .article-preview{width: 100%; height: 200px; object-fit: cover; clip-path: ellipse(70% 142% at 71% -46%);}
#latest-news .news-grid .news-item .article-title{font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px;}
#latest-news .news-grid .news-item .article-date{font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; display: flex;
align-items: center; gap: 8px;}
#latest-news .news-grid .news-item .article-link{margin-left: auto; margin-top: auto;} |
HTML |
---|
<script>
document.addEventListener('DOMContentLoaded', ev => {
const items = [];
const contentByLabel = document.querySelector('#latest-news .content-by-label');
const newsList = document.querySelector('#latest-news .news-grid');
populateArray();
sortFun('desc');
addDomElements();
contentByLabel.remove();
// functions -----------------------------
function populateArray() {
Array.from(contentByLabel.children).forEach(element => {
try {
const arTitle = element.querySelector('.details > a').innerText;
const arLink = `https://ec.europa.eu${element.querySelector('.details > a').getAttribute('href')}`;
const arTime = formatTime(element.querySelector('.details time').getAttribute('datetime'));
const sortableTime = new Date(element.querySelector('.details time').getAttribute('datetime'));
const arPreview = element.querySelector('.details .exc-preview').innerText;
const domElement = document.createElement('div');
domElement.classList.add('news-item');
domElement.innerHTML = `
<img loading="lazy" class="article-preview" src="${arPreview}" alt="" aria-hidden="true">
<div class="article-details">
<h5 class="article-title">${arTitle}</h5>
<p class="article-date"><img src=" |
CSS Stylesheet |
/*---------------------------------*/ /*---OOH HOME PAGE - 03-11-2022---*/ /*-------------------------------*/ @media screen and (max-width: 769px) { .img-mobile { width: 180px;} .remove-on-mobile { display:none !important;} } @media screen and (max-width: 1200px) { .not-d-block-mobile { display:inline !important;} } /*---INTRODUCTION---*/ #introduction { padding-bottom: 26rem; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-home-introduction.svg"); background-position: bottom right; background-repeat: no-repeat; background-size: cover; } #introduction h1 { margin-bottom:2.5rem;} @media screen and (max-width: 769px) { #introduction { background-position: top right; background-size: 240%;} } /*---WHO HUB FOR---*/ #who-hub-for { margin-top:-23rem; padding-top: 0;} #who-hub-for img { height: 120px;} @media screen and (max-width: 768px) { .who-hub-for-container p:last-child { margin-bottom: 0;} } @media screen and (min-width: 769px) { .who-hub-for-container { display: flex; justify-content: space-between;} .who-hub-for-container p { width: 45%;} } /*---ARCHITECTURAL DESIGN---*/ #architectural-design { background: #F3F4F7;} #architectural-design h2 { margin-bottom:2.5rem;} #architectural-design .cols:last-child p:last-child { margin-bottom:0;} /*hack - remove empty p from confluence*/ #architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;} #architectural-design .technical-system_steps { list-style: none; margin:0; padding: 0;} #architectural-design .technical-system_steps li > div { display:flex; align-items: baseline; gap:10px;} #architectural-design .technical-system_steps li > div > 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;} #architectural-design .ico-download {filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(110%) contrast(100%);} @media screen and (max-width: 768px) { #architectural-design .technical-system_steps.mobile { margin-top:-2rem;} } @media screen and (min-width: 769px) { #architectural-design h3 { margin-top:3rem;} } /*---TECHNICAL DOCUMENTATION---*/ #technical-documentation { position:relative; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323760938508/bg-illu-sigle-service-documentationico-date.svg"); background-position: top right; background-repeat: no-repeat; background-size: cover; background-color: white;} @media screen and (max-width: 769px) { #technical-documentation { background-position: top right; background-size: 240%;} } #technical-documentation .container > p:last-child { display:none; border:1px solid red;} #technical-documentation .card-grid small { color: #5D24A4;} #technical-documentation .card-grid-footer { text-align: right;} #technical-documentation .card-grid-footer p:first-child { margin-bottom:1.5rem;} .technical-documentation-cta { margin-bottom:0 !important;} @media screen and (min-width: 769px) { #technical-documentation .card-grid-body p:last-child { margin-bottom: 0;} .technical-documentation-cta { margin-top:2.5rem !important;} } /*---SERVICES---*/ #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 { padding-bottom:11.25rem; background: #F3F4F7; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-supporting-services.svg"); background-position: bottom right; background-repeat: no-repeat; background-size: cover; } #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 and (min-width: 769px) { .supporting-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;} } /*---LATEST NEWS---*/ #latest-news .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);} #latest-news .news-teaser-root a img { border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;} #latest-news .news-teaser-root > div > div > div > div > div > div:last-child { padding:0 2rem 0.25rem 2rem;} #latest-news .news-teaser-root a h2 {font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none;} #latest-news .news-teaser-root a, #latest-news .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #001832; text-decoration: none;} #latest-news .news-teaser-root a:hover { text-decoration: underline;} #latest-news .news-teaser-root .aui-group span { font-size: initial; color: #001832; } #latest-news .news-teaser-root > div > div:last-child button { color: #001832 !important; background-color: transparent; border: 1px solid #B7C2CF; border-radius: 6px;} #latest-news .news-teaser-root > div > div:last-child button:hover { text-decoration: underline;} @media screen and (max-width: 768px) { #latest-news .news-teaser-root > div > div > div { position:relative !important; width: auto !important; left: auto !important; top: auto !important;} #latest-news .news-teaser-root .aui-group { min-height: auto !important;} } /*hack - remove empty p from confluence*/ #latest-news .container > p:first-child, #latest-news .container > p:last-child { display:none; border:1px solid red;} /*---COLLABORATE WITH US---*/ #collaborate-with-us { position:relative; z-index: 5; margin-bottom: -16rem; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);} #collaborate-with-us .container { padding: 6rem 3rem 6rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-launch-rocket.png"); background-position: 90% bottom; background-repeat: no-repeat; } #collaborate-with-us h2 { margin-bottom:2.5rem;} #collaborate-with-us .col-separator-before:before, #collaborate-with-us .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);} #collaborate-with-us .opacity-75 { opacity: 0.75;} #collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;} #collaborate-with-us .p-badge { margin-bottom:0;} #collaborate-with-us .badge { margin-bottom:0; color: #995E00; background: #FFEECC;} #collaborate-with-us a, #collaborate-with-us .restricted-space-link { color: #F4BEFE;} /*hack - remove empty p from confluence*/ #collaborate-with-us > p:first-child, #collaborate-with-us > p:last-child { display:none; border:1px solid red;} /*---SERVICE DESK---*/ #service-desk { position:relative; z-index: 4; padding-top: 21rem; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-service-desk.svg"); background-position: top right; background-repeat: no-repeat; background-size: cover;} #service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;} @media screen and (max-width: 769px) { #service-desk { background-position: center right; background-size: 240%;} } /> ${arTime}</p> <a class="article-link link-cta primary after" href="${arLink}"><span>Read article</span></a> </div> `; items.push({ arTitle: arTitle, arLink: arLink, arTime: arTime, sortableTime: sortableTime, arPreview: arPreview, arDOMElement: domElement }); } catch (err) { } }); } function formatTime(timetxt) { const date = new Date(timetxt); const monthName = date.toLocaleString('en-US', { month: 'long' }); const datetxt = `${date.getDate()} ${monthName} ${date.getFullYear()}`; return datetxt; } function sortFun(type) { if (type === 'desc') { items.sort((a, b) => { return a.sortableTime < b.sortableTime ? 1 : -1 }); return; } items.sort((a, b) => { return a.sortableTime > b.sortableTime ? 1 : -1 }); } function addDomElements() { let num = 3; for (let index = 0; index < num; index++) { let element = items[index]; if(!element) break; newsList.appendChild(element.arDOMElement); } } }); </script> |