Versions Compared

Key

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

...

Div
idtechnical-documentation
classsection
Div
classcontainer
Div
classcols
Div
classcol-9

Documentation

Html-bobswift
<p class="lead">The technical and operational specifications of the Once-Only Technical System, laid down in the Commission’s Implementing Regulation ((EU) 2022/1463) setting out the system, are complemented by detailed, non-binding technical design documents jointly prepared by the Commission and Member States.</p>
Div
stylemargin-top:-3rem;
classcols
Div
classcol-4
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<p><small>Chapter 1</small></p>
<h3 class="h5">Introduction - High Level Architecture</h3>
<p>This chapter introduces the high-level architecture of the Once-Only Technical System and the key concepts and themes found in the subsequent chapters.</p>
</div>
<div class="card-grid-footer">
<p>Release date: <strong>October 2022</strong></p>
<p><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/WoUvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcol-4
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<p><small>Chapter 2</small></p>
<h3 class="h5">User Identification, Authentication and Record Matching</h3>
<p>This chapter explains how those submitting or receiving evidences through the Once-Only Technical System are identified and authenticated.</p>
</div>
<div class="card-grid-footer">
<p>Release date: <strong>October 2022</strong></p> 
<p><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/mYUvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcol-4
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<p><small>Chapter 3</small></p>
<h3 class="h5">Common Services</h3>
<p>This chapter looks at the Common Services (provided by the Commission) necessary for the proper execution of the evidence exchange process.</p>
</div>
<div class="card-grid-footer">
<p>Release date: <strong>October 2022</strong></p> 
<p><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/vYUvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcols
Div
classcol-4
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<p><small>Chapter 4</small></p>
<h3 class="h5">Evidence Exchange</h3>
<p>This chapter introduces evidence exchange in the Once-Only Technical System, which is based on bilateral data exchange between relevant authorities.</p>
</div>
<div class="card-grid-footer">
<p>Release date: <strong>October 2022</strong></p>
<p><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/4IUvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcol-4
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<p><small>Chapter 5</small></p>
<h3 class="h5">Data Models</h3>
<p>This chapter looks at the data models that streamline the exchange of evidences, together with a methodology for defining new data models and code lists.</p>
</div>
<div class="card-grid-footer">
<p>Release date: <strong>October 2022</strong></p> 
<p><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/T4YvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcol-4
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<p><small>Chapter 6</small></p>
<h3 class="h5">OOTS Guidance & UX Recommendations</h3>
<p>This chapter provides an overview of how the Once-Only Technical System works as part of the wider Single Digital Gateway and looks at the first set of UX recommendations.</p>
</div>
<div class="card-grid-footer">
<p>Release date: <strong>October 2022</strong></p> 
<p><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/P4CYI"><span>View chapter</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcols text-right
Div
Html-bobswift
<p><a<p class="technical-documentation-cta"><a class="btn ghost" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/PQF1Fg"><span>View all latest chapter releases</span><span class="ico-cta"></span></a></p>

...

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

@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 > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;}  

/*---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;}
.technical-documentation-cta { margin-bottom:0;}

@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 .container > p:first-child, #latest-news .container > p:last-child { display:none; border:1px solid red;}
#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: 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;}

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