Page History

...

Div

id	architectural-design
class	section

Html-bobswift

<div class="container">

<div class="cols">
<div class="col-9">
<h2>Introduction to the Once-Only Technical System (OOTS)</h2>
<p>The Once-Only Technical System (OOTS) is a technical framework for data sharing. As of the end of 2023, 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 in 7 simple steps. The decentralised architecture connects public authorities, so they can exchange evidence at the citizen's or business' request.</p>
<p>The Guidance Presentation provides a useful introduction for teams across the EU working on the implementation of the Once-Only Technical System.</p>
<p><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/592642240/OOTS-guidance-Q3-2022.pdf"><span>Download the Guidance Presentation</span><span class="ico-download"></span></a></p> </div>
</div>

<div class="cols">
<div><h3>Once-Only Technical System - user journey for cross-border procedures</h3></div>
</div>

<div class="cols">
<div class="col-6">
<ul class="technical-system_steps">
<li><div><span>1</span><p><strong>Authenticate: </strong>The user authenticates with an eIDAS notified eID scheme</p></div></li>
<li><div><span>2</span><p><strong>Locate evidence: </strong>The procedure portal identifies what to ask for (Evidence Type), and who to ask it from (Evidence Provider)</p></div></li>
<li><div><span>3</span><p><strong>Evidence request: </strong>The request for evidence is sent to the Evidence Provider</p></div></li>
<li><div><span>4</span><p><strong>Redirect: </strong>The user is redirected to the provider side</p></div></li>
</ul>
</div>
<div class="col-6">
<ul class="technical-system_steps mobile">
<li><div><span>5</span><p><strong>Preview: </strong>The user previews their evidence</p></div></li>
<li><div><span>6</span><p><strong>Evidence response: </strong>The Evidence Provider responds to the evidence request</p></div></li>
<li><div><span>7</span><p><strong>Submit: </strong>The user completes and submits his/her procedural form</p></div></li>
</ul>
</div>
</div>

<div class="cols">
<div>
<h3>Mapping of architecture to the user journey</h3>
<p><img aria-hidden="true" class="img-fluid diagram" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323610468075/diagram-how-does-it-work.png" alt=""></p>
</div>
</div>

</div>

...

Div

id	services
class	section

Div

class	container

Div

class	cols

Html-bobswift
<div class="col-9"> <h2>Common services</h2> <p class="lead opacity-75">The Commission provides Common Services to help the Member States ensure the proper exchange of evidences.</p> </div>

Div

class	cols gap-lg

Div

class	col-4

Html-bobswift

<div class="card-grid">
<div class="card-grid-body"> 
<p><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323610468075/ico-article-secondary.svg"></p> 
<h3 class="h5">Data Service Directory</h3>
<p class="opacity-75">The Data Service Directory is a common service that acts as a catalogue of evidence types that can be provided upon request.</p>
</div>
<div class="card-grid-footer">
<p><span class="badge sm">In development</span></p>
<p class="opacity-50">Expected release date: <strong>October 2023</strong></p>
</div>
</div>

Div

class	col-4 col-separator-before col-separator-after

Html-bobswift

<div class="card-grid">
<div class="card-grid-body">
<p><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323610468075/ico-assured-workload-secondary.svg"></p>
<h3 class="h5">Evidence Broker</h3>
<p class="opacity-75">The Evidence Broker is an authoritative system that maps specific data sets as evidence types that prove specific requirements.</p>
</div>
<div class="card-grid-footer"> 
<p><span class="badge sm">In development</span></p> 
<p class="opacity-50">Expected release date: <strong>October 2023</strong></p>
</div>
</div>

Div

class	col-4

Html-bobswift

<div class="card-grid">
<div class="card-grid-body">
<p><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323610468075/ico-dns-secondary.svg"></p>
<h3 class="h5">Semantic Repository</h3>
<p class="opacity-75">The Semantic Repository is a common service that acts as a data portal for the technical system.</p>
</div>
<div class="card-grid-footer"> 
<p><span class="badge sm">In development</span></p> 
<p class="opacity-50">Expected release date: <strong>October 2023</strong></p>
</div>
</div>

Div

id	supporting-services
class	section

Div

class	container

Div

class	cols

Div

class	col-8

Html-bobswift

<h2>Supporting services</h2>
<p><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323610468075/ico-testing-primary.svg"></p>
<h3 class="h5">Testing service</h3>

<div class="supporting-services-container">
<p>The OOTS Testing service assists national teams in implementing the Once-Only Technical System. Information on available testing services, including the test platform and other tools to facilitate testing are available on a restricted wiki space.<br><br> 
If required, please request access to the restricted wiki via <a target="_blank" href="https://ec.europa.eu/digital-building-blocks/tracker/plugins/servlet/desk/portal/15">the Service Desk</a>.
</p> 
<p><a class="btn ghost" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/kwPTI"><span>Go to wiki</span><span class="ico-cta"></span></a></p>
</div>

<hr>

<!--
<div class="supporting-services-container">
<p>Access a test platform and tools through our secure testing service</p>
<p><a class="btn ghost" target="_blank" href="#"><span>Go to testing service</span><span class="ico-external"></span></a></p>
</div>
-->

<div class="supporting-services-container">
<p>Contact the service desk on <a href="mailto:EC-OOTS-SUPPORT@ec.europa.eu" target="_blank">EC-OOTS-SUPPORT@ec.europa.eu</a></p>
<p><!--<a class="btn ghost" target="_blank" href="mailto:EC-OOTS-SUPPORT@ec.europa.eu"><span>Contact via email</span><span class="ico-email"></span></a>--></p>
</div>

...

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/565379323610468075/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%);} 
#architectural-design .diagram { margin-top:2.5rem;}  

@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/565379323610468075/bg-illu-sigle-service-documentation.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: cover;
background-color: white;}

@media screen and (max-width: 769px) {
  #technical-documentation { background-position: top right; background-size: 240%;}
}  

#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/565379323610468075/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/565379323610468075/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;}
#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: #F4BEFE;}

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

Page tree

Versions Compared

Old Version 382

New Version 383

Key