| Div | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||
|
...
| Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
...
| CSS Stylesheet |
|---|
#ss-bg-section { position:relative; height:8rem;}
#ss-bg-section p { margin: 0; }
#ss-bg-section img { position: absolute; top: -216px; right: 0;}
/*---SS SECTION INTRODUCTION---*/
.success-stories-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-terciary.svg");
background-position: bottom righttop; background-repeat: no-repeat; background-size: cover;}
/*---SS SECTION FIRST PILOT---*/
/* https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-right-secondary.svg */
.ss-first-pilot { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-top-right-secondary.svg"); background-position: bottom right; background-repeat: no-repeat; background-size: cover;}
.ss-first-pilot .container { margin-bottom: 2rem;}
.ss-first-pilot .card-grid-body .list-flag { margin-top:1rem; margin-bottom:0;}
.ss-first-pilot .card-grid-footer { text-align:right;}
/*---SS SECTION IMPORTANCE ECOSYSTEM---*/
/*wave top*/
.ss-importance-ecosystem-wave-top { position:relative; height:8rem; background-color: #E5F7FE;}
.ss-importance-ecosystem-wave-top p { margin:0;}
.ss-importance-ecosystem-wave-top img { position:absolute; top:-1px; left:-1%; width: 102%;}
/*content*/
.ss-importance-ecosystem { background-color: #E5F7FE;}
.ss-importance-ecosystem .cols:first-child { margin-top:-4rem;}
.ss-importance-ecosystem .list-numeral li p:first-child { margin-top:1rem;}
/*---SS SECTION EBSI ECOSYSTEM---*/
.ss-ecosystem h2 { margin-bottom: 0;}
/*---SS SECTION EBSI ECOSYSTEM---*/
.ss-actors { margin-top:-3.5rem;}
.ss-actors [class*="ss-col-actor"] { padding-top: 2rem; padding-bottom: 2.5rem; border-bottom:1px solid #E3E2E6;}
.ss-actors [class*="ss-col-actor"] p:last-child {margin-bottom:0;}
@media only screen and (max-width: 768px) {
.ss-actors [class*="ss-col-actor"].ss-actor-no-border-mobile { border:none;}
.ss-actor-no-mobile { display:none !important;}
}
@media only screen and (min-width: 769px) {
.ss-actors [class*="ss-col-actor"].ss-actor-no-border-desktop { border:none;}
}
.ss-actor-list-label { padding: 0;}
.ss-actor-list-label li {list-style: none; display: inline-block;}
.ss-actor-list-label li, .ss-actor-label { margin:0.25rem 1rem 0 0; padding:4px 12px; letter-spacing:1px; background-color: #FFCCE4; border-radius: 6px;}
/*---SS SECTION CTA REGISTER---*/
/*wave top*/
.ss-cta-register-wave-top { z-index:1; margin-top:-1rem; position:relative; height:8rem; background-color: #E5F7FE;}
.ss-cta-register-wave-top p { margin:0;}
.ss-cta-register-wave-top img { position:absolute; top:-1px; left:-1%; width: 102%;}
/*content*/
.ss-cta-register { z-index:2; position: relative; margin-top:-2rem; padding-top:0; padding-bottom: 6rem; background-color: #E5F7FE;}
.ss-cta-register .cols:last-child { margin-top: -3rem;}
/*HACK to remove empty p*/
.ss-cta-register .cols:first-child p:first-child { display: none;}
/*CARD*/
.ss-cta-register .card-grid-body img { margin-top:1rem; width: 80px}
.ss-cta-register .card-grid-text { margin:1rem 0 0 0;}
.ss-cta-register .card-grid-footer { text-align: right;}
/* Updated page - CSS */
@media screen and ( max-width: 400px) {
#a-collaborative-path_image > img { width: 80%; }
}
@media screen and (max-width: 768px) {
#choose-a-domain .justify-content-around { display: flex; flex-direction: column; gap: 24px; }
#choose-a-domain .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important;}
#define-your-role .justify-content-around { display: flex; flex-direction: column; gap: 24px; }
#define-your-role .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important; }
#ready-to-register-content .justify-content-around { display: flex; flex-direction: column; gap: 24px; }
#ready-to-register-content .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important;}
#whats-in-it-for-you_image img { width: auto!important; }
#first-successful-story_image > img { width: 80vw!important; }
}
.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important;}
.remove-unused-list { visibility: hidden; margin: 0px; }
.h2 { font-size: 32px!important;}
.card-grid { background: #FFF; }
.card-grid-body { padding:0 1rem;}
.card-grid-footer { padding: 0 1rem;}
.card-grid-footer a { cursor: pointer; }
.justify-content-around { gap: 1.5rem; }
.img-fluid { width: 110%!important; }
/* Importance of eco */
#first-successful-story { background: #E5F7FE; position: relative;}
#first-successful-story .container { max-width: 1288px!important; }
#first-successful-story_content { display: flex; flex-direction: column; justify-content: center; }
#first-successful-story_content h2 { font-size: 40px; }
#first-successful-story_image > img { max-width: 100%; }
#a-collaborative-path > div:first-child { position: relative; z-index: 10; }
#a-collaborative-path .list-numeral li::before { font-size: 20px!important; }
#a-collaborative-path .list-numeral li strong { vertical-align: text-bottom; margin-left: 10px; }
#a-collaborative-path .list-numeral li p { margin-left: 32px; }
#a-collaborative-path_image { display: flex; align-items: end; justify-content: center; z-index : 10; }
#a-collaborative-path_image > img { z-index: 10; }
#a-collaborative-path .bg-background-image {position: absolute; right: -15px; bottom: -38px; z-index : 1;}
#a-collaborative-path { margin-top: 2rem;}
#a-collaborative-path h2 { font-size: 32px; }
#a-collaborative-path > .col-6:nth-child(2) > p:first-child, #a-collaborative-path > .col-6:nth-child(2) > p:last-child { display: none; }
#a-collaborative-path > .col-6:nth-child(2) { display: flex; flex-direction: column; gap: 32px; justify-content: center; margin-top: 96px; z-index: 5; position: relative; }
#a-collaborative-path > .col-6:nth-child(2) .check-demo-days-list { display: flex; justify-content: center; }
#a-collaborative-path > .col-6:nth-child(2) .tabs-video-content-iframe > iframe { border-radius: 16px; }
/* requirements section */
#requirments-to-join .list-numeral li span { font-size: 32px; margin-left: 10px; font-weight: 500;}
#requirments-to-join .justify-content-around { padding-bottom: 1.5rem;}
#requirments-to-join h2 { font-size: 40px; }
.header-requirments-to-join {padding-top: 0px!important; padding-bottom: 0px!important;}
#choose-a-domain { border-left: 2px solid #99E1F9;} #choose-a-domain > div { padding-left: 2.5rem;}
#choose-a-domain > div:first-child { padding-top: 0px;}
#choose-a-domain { display: flex; flex-direction: column; margin-left: 0.2rem;}
#choose-a-domain .card-grid {width: 32%; min-width: 145px; min-height: 356px; padding-top: 3rem; padding-bottom: 2.5rem;}
#define-your-role { border-left: 2px solid #99E1F9;}
#define-your-role > div:first-child { padding-left: 2.5rem; }
#define-your-role > div { padding-left: 2.5rem;}
#define-your-role > div:first-child { padding-top: 0px;}
#define-your-role { display: flex; flex-direction: column; margin-left: 0.2rem;}
#define-your-role .card-grid {display: flex; flex-direction: column; padding-top: 3rem; padding-bottom: 2.5rem; width: 32%; min-width: 145px!important; min-height: 420px;}
#define-your-role .card-grid-footer .card-capabilities { background: #ffcce4; width: fit-content; padding: 0.2rem 0.5rem; border-radius: 6px; letter-spacing: 0.1em; margin-top: 1rem; word-break : break-word; max-width: 250px;}
/* ready to register section */
#ready-to-register-content > div:first-child { padding-left: 2.5rem; }
#ready-to-register .list-numeral li span { font-size: 32px; margin-left: 10px; font-weight: 500; color: #fff;}
#ready-to-register p { color: #fff;}
#ready-to-register h2 { color: #fff;}
#ready-to-register .list-numeral li::before { color: #fff!important;}
#ready-to-register .container > div { display: flex; flex-direction: column; }
#ready-to-register { padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem;}
#ready-to-register-content > div > p:first-child { margin: 0px; }
#ready-to-register-content > div > p:nth-child(2) { margin-bottom: 2rem; }
#ready-to-register-content > div > p:nth-child(3) { margin-bottom: 5rem; }
#ready-to-register-content .card-grid {width:32%; min-width: 145px!important; min-height: 315px!important; display: flex; flex-direction: column; justify-content: space-around; padding-top: 2.5rem; padding-bottom: 2.5rem;}
#ready-to-register-content .card-grid-footer { display: flex; justify-content: end; }
#ready-to-register-content .justify-content-around { margin-top: 3rem;}
#ready-to-register-content .card-grid-text p { color: #000;}
#ready-to-register_content p { margin-bottom: 1rem!important;}
#whats-in-it-for-you { display: flex; flex-direction: column; justify-content: center;}
#whats-in-it-for-you p { color: #fff;}
#whats-in-it-for-you h3 { color: #fff;}
#whats-in-it-for-you_image { margin-top : 5rem;}
#whats-in-it-for-you_image p { margin: 0!important; }
#whats-in-it-for-you_image img { width: 90%; }
.whats-in-it-for-you-curve-top { z-index:1; margin-top:-1rem; position:relative;}
.whats-in-it-for-you-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; }
.whats-in-it-for-you-curve-top > p > img { position:absolute; top:-1px; left:-1%; width: 102%;}
.whats-in-it-for-you-wave-bottom > p > img { position:absolute; bottom:0; left:-1%; width: 102%;}
#first-ss-pilot .card-grid-footer { text-align: right; } |
...