Page tree

European Commission Digital

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: change layer class to cef cef-section

...

Content Layer
id1130511694
classsection ebsi-service parallax-bgcef cef-section
Content Column
width100%
id1130511695
Content Block
id1130511696
Div
source-page-id113541243
classcol-md-4
Div
source-page-id113541243
classcolwrapper

Building Blocks

Div
source-page-id113541243
classcol-md-4
Div
source-page-id113541243
classcolwrapper

Digital Service Infrastructures

Div
source-page-id113541243
classcol-md-4
Div
source-page-id113541243
classcolwrapper

Connectivity

CSS Stylesheet
/*EBSI INTRODUCTION ILLUSTRATION*/
/*------------------------------*/
.ebsi-introduction-illu img { margin-top:10px;}

/*EBSI INTRODUCTION TEXT*/
/*----------------------*/
.ebsi-introduction-text .lead { margin-bottom:30px;}
.ebsi-introduction-text .first-letter p::first-letter { font-size: 300%;}

/*EBSI KEY FIGURE*/
/*---------------*/
.ebsi-key-figure {text-align:center;}
.ebsi-key-figure .cef-equal-height-column { width:49%; background-color: rgba(0,0,0,0.1); border-radius: 10px;}
.ebsi-key-figure .cef-equal-height-content { padding:20px; background-color: rgba(0,0,0,0.5); border-radius: 10px;}
.ebsi-key-figure h2, .ebsi-key-figure p {color:white;}
.ebsi-key-figure h2 { margin-bottom:30px;}
.ebsi-key-figure h3 { color:#ffd417; line-height:1;}
.ebsi-key-figure p { margin-top:0;}

/*EBSI CASE*/
/*---------*/
.ebsi-case .cef-equal-height-container { margin-top:30px;}
.ebsi-case .cef-equal-height-column { width:48%; background-color: rgba(255,255,255,0.4); border-radius: 10px;}
.ebsi-case .cef-equal-height-content { padding:20px; height:310px; background-color: rgba(255,255,255,0.8); border-radius: 10px;}
.ebsi-case img { width:120px;}
.ebsi-case h3 { margin-top:0;}
.ebsi-case h3:after { display:block; margin-top:30px; margin-bottom:30px; content:""; width:25px; height:5px; background-color: #ffd417;}

@media only screen and (max-width: 768px) {
	.ebsi-case .cef-equal-height-content { height:440px;}
}
@media only screen and (max-width: 574px) {
	.ebsi-case .cef-equal-height-content { height:auto;}
}

/*EBSI WORKING*/
/*------------*/
.ebsi-working img { margin-top:30px;}

/*EBSI BENEFIT*/
/*------------*/
.ebsi-benefit {text-align:center;}
.ebsi-benefit .cef-equal-height-column { width:32%; background-color: rgba(0,0,0,0.1); border-radius: 10px;}
.ebsi-benefit .cef-equal-height-content { padding:20px; height:320px; background-color: rgba(0,0,0,0.5); border-radius: 10px;}
.ebsi-benefit h2, .ebsi-benefit h3, .ebsi-benefit p {color:white;}
.ebsi-benefit h2 { margin-bottom:30px;}
.ebsi-benefit h3 { margin-top:10px;}
.ebsi-benefit h3:after { display:block; margin:30px auto; content:""; width:25px; height:5px; background-color: #ffd417;}
.ebsi-benefit img { width:100px;}

@media only screen and (max-width: 768px) {
	.ebsi-benefit .cef-equal-height-content { height:420px;}
}
@media only screen and (max-width: 574px) {
	.ebsi-benefit .cef-equal-height-content { height:auto;}
}

/*EBSI COME FROM*/
/*--------------*/
.ebsi-come-from h2 { margin-bottom:30px;}
.ebsi-come-from h3:after { display:block; margin-top:30px; margin-bottom:30px; content:""; width:25px; height:5px; background-color: #ffd417;}

/*EBSI CALL TO ACTION*/
/*-------------------*/
.ebsi-call-to-action { text-align:center;}
.ebsi-call-to-action h2 { margin-bottom:30px; color: white;}
@media only screen and (max-width: 574px) {
	.ebsi-call-to-action { text-align:left;}
}
.form-ebsi-subscribe { font-family: 'Source Sans Pro', sans-serif;}
.form-ebsi-subscribe h2 { margin:30px 0 0 0 !important;} 
.form-ebsi-subscribe .easyforms-container { margin:0; border:none;}
.form-ebsi-subscribe .easyforms-header, .form-ebsi-subscribe .easyforms-footer {background-color: transparent;}
.form-ebsi-subscribe .easyforms-title { display:none !important;}
.form-ebsi-subscribe form.aui .field-group { padding: 0;}
.form-ebsi-subscribe form.aui .field-group > label { float: none; margin: 0 10px 0 0; padding: 0; font-size: initial; color: white;}
.form-ebsi-subscribe form.aui input.text { padding:10px 5px; width: 300px; height:auto; font-size: initial; border:3px solid white; border-radius: 0;}
.form-ebsi-subscribe form.aui input.text:focus { border-color:#f8cc02; box-shadow: none; -webkit-box-shadow: none; outline: none;}
.form-ebsi-subscribe form.aui .buttons-container { margin: 0; padding: 0;}
.form-ebsi-subscribe form.aui input.button { margin-top:30px; padding:10px 12px; min-width: 140px; height:auto; font-size:16px; text-transform: uppercase; letter-spacing: 1px; background-color: #f8cc02 !important; border-color:#f8cc02; border-radius: 0;}
.form-ebsi-subscribe form.aui input.button:hover { text-decoration: underline; background-color:#FFE570 !important;}

/*VALIDATION*/
.form-ebsi-subscribe form.aui .icon-required::before { font-size: initial; color: #F9786C;}
.form-ebsi-subscribe .easyforms-form input.parsley-error { border:3px solid #F9786C !important;}
.form-ebsi-subscribe .easyforms-form .parsley-errors-list { margin: 0;}
.brikit-canvas ul.parsley-errors-list li {color:#F9786C;}

/*CONFIRMATION*/
.form-ebsi-subscribe .aui-message.success { background: #f8cc02;; border-color: #f8cc02; border-radius: 0;}
.form-ebsi-subscribe .aui-message.success::after { content: "";}
.form-ebsi-subscribe .aui-message p.title { color: #003764;}
.form-ebsi-subscribe .easyforms-submitted-header { color: #003764;}

/*EBSI MILESTONE*/
/*--------------*/
.ebsi-milestone h2 { margin-bottom: 30px;}
.ebsi-milestone .timeline { display:none;}
.ebsi-milestone img { display:block;}

@media only screen and (max-width: 574px) {
	.ebsi-milestone img { display:none;}
	.ebsi-milestone .timeline { display:block;}
}

/*EBSI SERVICE*/
/*------------*/
.ebsi-service .cef-equal-height-container { margin-top:30px;}
.ebsi-service .cef-equal-height-column { width:32%; background-color: rgba(255,255,255,0.4); border-radius: 10px;}
.ebsi-service .cef-equal-height-content { padding:20px; height:400px; background-color: rgba(255,255,255,0.8); border-radius: 10px;}
.ebsi-service h3:after { display:block; margin-top:30px; margin-bottom:30px; content:""; width:25px; height:5px; background-color: #ffd417;}

@media only screen and (max-width: 768px) {
	.ebsi-service .cef-equal-height-content { height:600px;}
}
@media only screen and (max-width: 574px) {
	.ebsi-service .cef-equal-height-content { height:auto;}
}

/*GRID*/
/*----*/
@media only screen and (max-width: 574px) {
.colwrapper { margin-bottom:30px; padding-left:0; padding-right:0;}
.empty-column { display:none;}
}
/*TYPOGRAPHY*/
/*----------*/
.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2;}
.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2;}
.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2;}
.display-4 { font-size: 3.5rem !important; font-weight: 300; line-height: 1.2;}
.wiki-content h1, .brikit-content-layers .h1, .brikit-content-layers .h1:first-child { font-size: 3.157em; line-height: 1.2;}
.wiki-content h2, .brikit-content-layers .h2, .brikit-content-layers .h2:first-child { font-size: 2.369em; line-height: 1.2;}
.wiki-content h3, .brikit-content-layers .h3, .brikit-content-layers .h3:first-child { font-size: 1.777em; line-height: 1.2;}
.wiki-content h4, .brikit-content-layers .h4, .brikit-content-layers .h4:first-child {font-size: 1.333em; line-height: 1.2;}

.blog-blockquotes h2, .brikit-canvas p { line-height:1.4em;}

@media only screen and (max-width: 574px) {
	.wiki-content h1, .brikit-content-layers .h1, .brikit-content-layers .h1:first-child { font-size: 2.5em;}
	.wiki-content h2, .brikit-content-layers .h2, .brikit-content-layers .h2:first-child { font-size: 1.8em;}
	.wiki-content h3, .brikit-content-layers .h3, .brikit-content-layers .h3:first-child, .blog-blockquotes h2 { font-size: 1.4em;}
	.blog-blockquotes h2 { font-size: 1.4em !important;}
	.wiki-content h4, .brikit-content-layers .h4, .brikit-content-layers .h4:first-child {font-size: 1.1em;}
}

/*UTILITIES*/
/*---------*/

/*EQUAL HEIGHT COL*/
.cef-equal-height-container { display: table; width: 100%;}
.cef-equal-height-column { float:none; display: table-cell; vertical-align:top;}
.cef-equal-height-empty-column { float:none; display: table-cell; width:15px;}
.cef-equal-height-content { margin:20px;}

@media only screen and (max-width: 574px) {
  .cef-equal-height-column { margin-bottom:15px; display: inline-block; width: 100% !important;}
  .cef-equal-height-empty-column { display:none;}
}

/*TIMELINE*/
.timeline * { box-sizing: border-box;}
.timeline { margin: 0 auto; position: relative;}
.timeline::after { margin-left: -3px; position: absolute; top: 0; left: 50%; bottom: 0; content: ''; width: 6px; background-color: #eee;}

.timeline-year { padding:20px; text-align:center; background-color: #eee; border-radius: 10px;}

.timeline-container { position: relative; padding: 10px 40px; width: 50%;}
.timeline-container.step-point::after { z-index: 1; content: ''; position: absolute; top: 0; right: -17px; width: 35px; height: 35px; border-radius: 50%;}
.step-point-first-color::after { background-color: #003666;  border: 4px solid #0076c7;}
.step-point-second-color::after { background-color: #ffd417; border: 4px solid #0076c7;}

.timeline-container.timeline-right.line-second-color::before {margin-left: 6px; position: absolute; top: 0; left: 0; bottom: 0; content: ''; width: 6px; background-color: #ffd417;}
.timeline-container.timeline-left.line-second-color::before {margin-right: -12px; position: absolute; top: 0; right: 0; bottom: 0; content: ''; width: 6px; background-color:#ffd417;}

.timeline-left { left: 0;}
.timeline-right { left: 50%;}

.timeline-left::before { z-index: 1; position: absolute; top: 22px; right: 30px;}
.timeline-right::before { z-index: 1; position: absolute; top: 22px; left: 30px;}
.timeline-right::after { left: -16px;}

.timeline-content { padding-bottom:20px; position: relative; background-color: white;}

@media only screen and (max-width: 574px) 
{ 
.timeline::after { left: 15px;}
.timeline-container { width: 100%;}
.timeline-right { left: 5%;}  
.timeline-container.timeline-left.line-second-color::before { left: 0; margin-left: 23px;}
}

.horizontal-align { margin:0 auto; float:none;}
.text-center { text-align:center;}
.clearfix { width:100%; overflow: auto;}  
.clearfix::after { content: ""; clear: both; display: table;}  
.img-responsive { max-width: 100%; height: auto;}  
.text-half-size { font-size:50%;} 

...