...
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/565379323/bg-illu-sigle-service-deskdocumentation.svg"); background-position: centertop right; background-repeat: no-repeat; background-size: cover; background: white;} #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;} /*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%;} } |