Versions Compared

Key

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

...

Div
idwho-hub-for
classsection
Div
classcontainer
Div
classcols align-items-center
Div
classcol-4 text-center

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

Div
Html-bobswift
<h2>Who's is the HUBOnce-Only Hub for?</h2>
<div class="who-hub-for-container">
<p><strong>Implementers from EU Member States</strong>, building and maintaining the Once-Only Technical System. A single environment providing them with information and access to services.</p>
<p><strong>Anyone</strong> can browse the Hub to learn more about the system, program and the benefits for them. </p>
</div>
Div
idarchitectural-design
classsection
Div
classcontainer
Div
classcols
Div
classcol-9
Html-bobswift
<h2>Architectural design of the Once-Only Technical System</h2>
<p class="lead">The Once-Only Technical System (OOTS) is a technical framework for data sharing. Citizens and businesses will be able to request official documents (known as “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 evidences (official documents) at the citizen's request.</p>
<p class="lead">The citizen or business is identified and, having actively confirmed that they wish to use the Once-Only Technical System, 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.</p>
Div
stylemargin-top: -4rem; margin-bottom: -2rem;
classcols
Div
Html-bobswift
<p class="text-right"><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---*/
/*-------------------------------*/ 

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

/*---WHO HUB FOR---*/
#who-hub-for { margin-top:-23rem; padding-top: 0;}
#who-hub-for img { height: 120px;}
#who

@media screen and (min-width: 769px) {
  .who-hub-for-container { display: flex; justify-content: .col-4 p:nth-child(3) { margin-bottom:0;}space-between;}
  .who-hub-for-container p { width: 45%;}
}    

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

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

@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 { 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 .cols:last-child { margin-top:-3rem;}

#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;}
}

/*---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: 3rem 3rem 5rem 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 .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: 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 p.p-btn { margin-top: 2.5rem; margin-bottom:0;}