...
CSS Stylesheet |
---|
/*---------------------------------*/ /*---OOH HOME PAGE - 27-03-112024-2022---*/ /*-------------------------------*/ .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---*/ #latest-news .container .cols > div > h2 { margin-bottom: 2.5rem;} /*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 button { margin-top:1rem; 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;} } /*---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 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-01.png"); background-size: cover; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;} */ .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("https://ec.europa.eu/digital-building-blocks/sites/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: 100%80%; gap:20px24px;} .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/bg-illu-sigle-monitoring.svg") 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/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;} |