Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Div
idintroduction-legal
classsection bg-legal-page-curve
Div
classcontainer
Div
classcols justify-content-between
Div
classcol-6 intro-paragraph
HTML
<h1 class="heading-deco terciary"><span id="compliance-header">Compliance</span> documents</h1>
<p>This page contains important legal and compliance documents related to the work of EBSI and its services. Please refer to specific privacy statements, service offering descriptions and master service arrangement available for you to consult below.</p>
Div
classcol-6
HTML
<img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/634978415638058995/illu-legal.svg" alt=""/>

...

CSS Stylesheet
@media screen and ( max-width: 768px ) {
	#compliance-header { font-weight: 600; }
	.so-content .col-4 { min-height: auto!important; }
	.tab-cards-container { margin-right: 0px; }
}

@media screen and ( max-width: 832px ) {
	.so-content { flex-direction: column; }
	.so-content .col-4 { max-width: none!important; width: 100%; }
	.so-content .col-4:first-child { padding-left: 1rem!important; padding-right: 1rem!important; }
	.so-content .col-4:last-child { padding-left: 1rem!important; padding-right: 1rem!important; }
 }

@media screen and ( max-width: 1074px ) {

	.case-family_tabs { flex-direction: column; }
	.case-family_tabs li { width: 100%; padding-left: 40px; justify-content: flex-start!important; }
	.active { width: 100%; justify-content: flex-start!important; }
}

@media screen and ( min-width: 1117px ) {

 .case-family_tabs li:hover, .case-family_tabs li:active { background : #ffb3d7; border-radius: 16px; color: white; }
}





.btn { height: 45px!important; margin-top: 4px; align-items: center;}
.card-grid .ico-external { background-size: 18px!important; }  



.bg-legal-page-curve {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/634978415590447955/bg-curve-legalwhatisebsi.svg");
background-position: top right; background-repeat: no-repeat; background-size: contain60%;}
#introduction-legal .intro-paragraph { display: flex; flex-direction: column; justify-content: center; }
;}
#introduction-legal{padding-block:6.25rem;}
@media screen and ( max-width: 768px ) {
#introduction-legal{padding-block:6.25rem; padding-top:2.5rem;padding-bottom:4rem;}
.bg-legal-page-curve {background-position: initial; background-size: 200%;}
}


.case-family_tabs ul { list-style: none; }
.case-family_tabs li {display: flex; align-items: center; justify-content: center; list-style: none; height: 72px; cursor: pointer; padding-right: 40px; padding-left: 40px;}
.case-family_tabs li:first-child { padding-left: 40px; }
.case-family_tabs li:last-child { padding-right: 40px; }
.case-family_tabs a { text-decoration: none; color: black; text-align: center; line-height: 1;}
.case-family_tabs { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 20px; list-style: none; background: #f6f5f7; }
.case-family_tabs .active {background: #cd1d8b; display: flex; align-items: center; border-radius: 16px; color: white; padding-top: 16px; padding-bottom: 16px; }
.case-family_tabs .active a {color: white;}
  







  /* cards */


.tab-cards-container { display: flex; flex-direction: row; gap: 1.375rem; margin-left: 0; flex-wrap: wrap;}
.tab-cards-container div { min-height: 49px; }
.tab-cards-container .col-3 { min-width: 331px; }
.card-grid-body { padding: 23px; }
.card-grid-body > p:first-child { display: none; }
.card-grid-body > p:last-child { display: none; }
.card-grid-header { display: flex; flex-direction: row; gap: 11px; align-items: center; margin-bottom: 16px;}
.card-grid-header p { margin: 0; font-size: 15px;}
.card-grid-body { display: flex; flex-direction: column; justify-content: space-around; }
.card-grid-footer { display: flex; flex-direction: column; justify-content: center; }


.msa-content { display: flex; flex-direction: column; }
#four-terms h3 { font-size: 32px; margin-bottom: 0;}
.term-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;}
.msa-content-description p:first-child { display: none; }
.msa-content-description { padding-top: 0!important; }

.term-header > img { width: 49px; }