Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

CSS Stylesheet
@media screen and (min-width: 769px) {
  .col-separator-before, .col-separator-after { position:relative;}
  .col-separator-before:before, .col-separator-after:after { content:''; position:absolute; top:0; height:100%; border-left:1px solid #F2E5F7;}
  .col-separator-before:before { left:-0.25rem;}
  .col-separator-after:after { right:-0.25rem;}
}

/*---------------------------------*/
/*---OOH HOME PAGE - 05-10-2022---*/
/*-------------------------------*/
@media screen and (min-width: 769px) { 
  .wiki-content h1, .wiki-content .h1, #title-text { font-size:56px; line-height: 64px;}
}  

/*---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;
}

/*---WHO HUB FOR---*/
#who-hub-for { margin-top:-23rem; padding-top: 0;}
#who-hub-for img { height: 120px;}
#who-hub-for .col-4 p:nth-child(3) { margin-bottom:0;}

/*---TECHNICAL DOCUMENTATION---*/
#technical-documentation { background: white;} 
#technical-documentation .card-grid { background-color: #F9F5FB;}
#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:1rem;}

@media screen and (min-width: 769px) {
  #technical-documentation .card-grid-body p:last-child { margin-bottom: 0;}
}

/*---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 { 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-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 {}

/*---COLLABORATE WITH US---*/
#collaborate-with-us { padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, #fbfcff 50%, #fbfcff 100%);}
#collaborate-with-us .container { padding: 3rem 3rem 5rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;}
#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;#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 h2 { font-size: 1.4rem; line-height: 1.2; 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; }

/*---SERVICECOLLABORATE WITH DESKUS---*/
#service#collaborate-with-deskus {}

/*--- MACRO NEWS TEASER CARD BLOG ---*/
.news-teaser-card-blog .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; box-shadow:none;}
.news-teaser-card-blog .news-teaser-root > div > div > div:hover img { outline: 2px solid black; filter:brightness(100%);}
.news-teaser-card-blog .news-teaser-root div div div div div div:last-child { padding:1rem;}
.news-teaser-card-blog .news-teaser-root .aui-group { display: block;}
.news-teaser-card-blog .news-teaser-root > div > div:nth-child(2) { margin:0; padding:0;}
.news-teaser-card-blog .news-teaser-root a, .news-teaser-card-blog .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #1D0D34; text-decoration: none;} padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, #fbfcff 50%, #fbfcff 100%);}
#collaborate-with-us .container { padding: 3rem 3rem 5rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;}
#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;}

/*---SERVICE DESK---*/
#service-desk {}


/*--- MACRO NEWS TEASER CARD BLOG ---*/
.news-teaser-card-blog .news-teaser-root a:hover div div div div div div:last-child { text-decoration: nonepadding:1rem;}
.news-teaser-card-blog .news-teaser-root a img.aui-group { line-height:0; outline: 2px solid transparent; outline-offset: 2px; display: block;}
.news-teaser-card-blog .news-teaser-root a:hover> imgdiv {> outline: 2px solid black; div:nth-child(2) { margin:0; padding:0;}
.news-teaser-card-blog .news-teaser-root a:focus img { outline img { line-height:0; outline: 2px solid transparent; outline-offset: 2px; dashed black;}
.news-teaser-card-blog .news-teaser-root a:hover h2img { font-sizeoutline: 1.4rem; line-height: 1.2; text-transform: initial; text-decoration:none;2px solid black; }
.news-teaser-card-blog .news-teaser-root .aui-group spana:focus img { font-sizeoutline: initial;2px color: initial; text-transform: uppercasedashed black;}
.news-teaser-card-blog .news-teaser-root > div > div:last-child button { color: white !important;; background-color: #1D0D34;}
.news-teaser-card-blog .news-teaser-root > div > div:last-child button:hover { text-decoration: underline;}

@media screen and (max-width: 600px) {
.news-teaser-card-blog .news-teaser-root > div > div > div  { position:relative !important; width: auto !important; left: auto !important; top: auto !important;}
.news-teaser-card-blog .news-teaser-root .aui-group { min-height: auto !important;}
}