Versions Compared

Key

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

...

Div
idwho-hub-for
classsection
Div
classcontainer
Div
classcols
Div

Who's the HUB for?

Div
classcols gap-lg align-items-center
Div
classcol-4

HTML Image
srchttps://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-national-coordination-groups.png
altillustration of a writing hand

Html-bobswift
<h3 class="h4">SDG coordination group</h3> 
<p>Actors responsible for building and maintaining the Once-Only Technical System between Member States.</p>
Div
classcol-4 col-separator-before col-separator-after

HTML Image
srchttps://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-competent-authorities.png
altillustration of a checklist

Html-bobswift
<h3 class="h4">Competent authorities</h3> 
<p>The authorities who must allow their users to retrieve requested evidence using the  Once-Only Technical System.</p>
Div
classcol-4

HTML Image
srchttps://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-solution-providers.png
altillustration of a light bulb

Html-bobswift
<h3 class="h4">Interested parties</h3> 
<p>Everyone who wants to learn more about the Once-Only Technical System.</p>
Div
idarchitectural-design
classsection
Div
classcontainer
Div
classcols
Div

Architectural design of the Once Only Technical System

Div
stylemargin-top: -3rem;
classcols
Div
classcol-8

The Once-Only Technical System is a technical framework for data sharing. Citizens and businesses will be able to request “evidence” to complete administrative procedures (allowing people to study, work, live and retire in other EU countries). The decentralised architecture connects public authorities, so they can exchange official documents and data at the citizen's request.

The citizen or business is identified and, having actively confirmed that the Once-Only Technical System should be used, is shown a list of the types of document that are possible to be retrieved directly from data sources abroad. The citizen will then select which documents they wish to retrieve from the data sources.

Div
classcol-4
Html-bobswift
<p><a class="btn ghost" href="#"><span>Download the OOTS Guidance Report</span><span class="ico-download"></span></a></p>
Div
classcols
Div

HTML Image
srchttps://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/diagram-how-does-it-work.png
altillustration customer service desk, a phone with message
classimg-fluid

...

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

/*---ARCHITECTURAL DESIGN---*/
#architectural-design { background: #F3F4F7;}

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

/*---COLLABORATE WITH US---*/
#collaborate-with-us { position: relative; z-index: 3; margin-bottom:-20rem; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 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 { position: relative; z-index: 2; padding-top:22rem;
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;  
}