| Div | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
|
| Divstyle | |
|---|---|
| |
/*--- HACK REMOVE TABLE FILTER ---*/
.tf-inline-btn-container { display: none !important; border:1px solid red;}
div.tablefilter-outer-wrapper .tf-floating-btn-container { display: none !important; border:1px solid red;}
/*--- CARD CONTENT CUSTOM ---*/
.card-content-custom .card-content { padding:0; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 16px;}
.card-content-custom .card-content .card-content-text { padding:0 2rem 1rem 2rem;}
/*hack confluence*/
.card > p:first-child { display:none; border:1px solid red;}
@media screen and (max-width: 768px) {
.card-content-custom .card-content img { display: none;}
}
/*--- MACRO SLIDER BY DEFAULT ---*/
.slider-default { position:relative; z-index:8; }
.slider-default .flickity-enabled { background-color: transparent; box-shadow:none;}
.slider-default .flickity-enabled.is-draggable { box-shadow:none;}
.slider-default .news-slider-root > div { padding:0;}
.slider-default .aui-item > div { margin:0; padding:0;}
.slider-default .aui-item { display:inline-block; padding:0 15px 10px 15px;}
.slider-default .aui-group>.aui-item { padding-top:0; padding-top:1rem; padding-bottom:0; width: 100%;}
.slider-default .aui-group>.aui-item+.aui-item { padding:0; width: 100%;}
.slider-default > ul { list-style: none; margin: 0; padding: 0;}
/*heading*/
.slider-default h2:first-child { display: none;}
/*arrow*/
.slider-default .flickity-button { top:38% !important; background-color: #fff !important; border:1px solid #CD1D8B; border-radius:8px !important;}
.slider-default .flickity-button:hover { background-color: #FFE7F2 !important;}
.slider-default .flickity-button:focus { outline: 2px dashed black; outline-offset: 2px; box-shadow: none;}
.slider-default .flickity-prev-next-button .flickity-button-icon { left: 30%; top: 30%; width: 40%; height: 40%; fill: rgb(205, 29, 139) !important;}
.slider-default .flickity-prev-next-button.previous { left: -50px;}
.slider-default .flickity-prev-next-button.next { right: -50px;}
/*dots*/
.slider-default .flickity-page-dots { position:relative; margin-bottom: 0; top:1rem !important; height:1rem; text-align: center !important;}
.slider-default .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;}
.slider-default .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;}
.slider-default .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
@media screen and (max-width: 768px) {
.slider-default .flickity-prev-next-button.previous { left: -15px;}
.slider-default .flickity-prev-next-button.next { right: -15px;}
} |
| Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| CSS Stylesheet |
|---|
@media screen and ( max-width: 600px ) {
.close-button { display: flex!important; position: relative; }
.illu-popup .collapse-panel { max-width: unset!important; top: -93px!important;}
.illu-popup-title { font-size: 14px!important;}
#eco1-container { top: 32%; left: 0%; }
#eco2-container { top: 69%; left: 24%; }
#eco2-container .h4 { width: 80px; }
#eco3-container { top: 69%; left: 54%; }
#eco4-container { top: 30%; left: 70%; }
#eco5-container { top: 0%; left: 55%; }
#eco6-container { top: 64%; left: 21%; flex-direction: column; }
#eco6-container .h4 { width: 80px; text-align: center; }
#eco7-container { top: 6%; left: 20%; flex-direction: column;}
#eco7-container .h4 { width: 150px!important; text-align: center; margin-bottom: 1rem;}
#eco8-container { top: 52%; left: 41%; flex-direction: column-reverse; }
#eco9-container { top: 52%; left: 51%; right: 5%; flex-direction: column-reverse; }
#eco9-container .h4 { width: 70px; text-align: center;}
#eco10-container { top: 4%; left: 55%; flex-direction: column-reverse; text-align: center; }
#eco11-container { top: 32%; right: 53%; flex-direction: row; }
#eco11-container .h4 { width: 100px!important; text-align: center; }
#eco12-container { top: 17%; left: 57%; flex-direction: column-reverse;}
#eco12-container .h4 { text-align: center; }
#v-actors_content, #v-process_content, #v-credentials_content { margin-top: 7.5rem; margin-bottom: 7.5rem; }
.collapse-panel { box-shadow: 0 0 0 9999px rgb(0 0 0 / 50%); }
}
@media screen and (min-width: 601px) {
.illu-popup .collapse-panel { max-width: unset!important;}
.illu-popup-title { font-size: 16px!important; text-align: center; }
#eco1-container { top: 37%; left: 7%; bottom: 50%; }
#eco2-container { top: 72%; left: 29%; bottom: 20%; }
#eco3-container { top: 72%; left: 58%; bottom: 20%; }
#eco4-container { top: 69%; left: 75%; bottom: 20%; right: 3%; flex-direction: column; text-align: center; }
#eco5-container { top: 17%; left: 64%; }
#eco6-container { top: 72.5%; left: 26%; flex-direction: column; text-align: center;}
#eco7-container { top: 32%; right: 53%; bottom: 55%; left: unset; flex-direction: row; text-align: center;}
#eco7-container .h4 { width: 150px!important; text-align: center; margin-bottom: 1rem;}
#eco8-container { top: 56%; left: 43%; right: 50%; flex-direction: column-reverse; text-align: center;}
#eco9-container { top: 56%; left: 64%; right: 20%; flex-direction: column-reverse; text-align: center;}
#eco10-container { top: 30%; left: 70%; bottom: 55%; flex-direction: row; text-align: center;}
#eco11-container { top: 39%; right: 54%; flex-direction: row; }
#eco11-container .h4 { width: 100px!important; text-align: center; }
#eco12-container { top: 39%; left: 74%; flex-direction: row;}
#eco12-container .h4 { text-align: center; }
}
@media screen and (min-width: 1000px) {
#eco1-container { top: 42%; left: 7%; bottom: unset;}
#eco1-container .h4 { text-align: start!important; }
#eco2-container { top: 42%; left: 29%; bottom: unset;}
#eco3-container { top: 72%; left: 58%; bottom: unset;}
#eco4-container { top: 72%; left: 83%; right: 5%; bottom: unset; flex-direction: row; text-align: start; }
#eco4-container .h4 { width: auto!important; text-align: start;}
#eco5-container { top: 17%; left: 64%; }
#eco5-container .h4 { text-align: start; }
#eco6-container { top: 73%; left: 26%; right: unset; bottom: unset; flex-direction: column; }
#eco7-container .h4 { margin: 0px; }
#eco8-container { top: 55%; left: 43%; right: unset; flex-direction: column; }
#eco9-container { top: 55%; left: 66%; right: unset; flex-direction: column; }
#eco10-container { }
#eco11-container { top: 39%; right: 54%;}
#eco12-container { top: 39%; left: 74%; }
#ecosect1 { top: 47.5%; left: 8%; right: 50%;}
#ecosect2 { top: 47.5%; left: 31%; right: 24%; }
#ecosect3 { top: 29%; left: 60%; right: unset; }
#ecosect4 { top: 48.5%; left: 45%; right: 12%; }
#ecosect5 { top: 22%; left: 66%; right: unset; }
#ecosect6 { top: 56%; left: 29%; right: 30%; }
#ecosect7 { top: 18%; left: 44%; right: 10%; }
#ecosect8 { top: 65%; left: 45%; right: 14%; }
#ecosect9 { top: 65%; left: 30%; right: 28%; }
#ecosect10 { top: 20%; left: 14%; right: 27%; }
#ecosect11 { top: 9%; left: 43.5%; right: unset; }
#ecosect12 { top: 6%; left: 19%; right: 24%; }
}
@media screen and (min-width: 1920px) {
#eco8-container { top: 56%; }
#eco9-container { top: 56%; }
#ecosect3 { top: 37%; }
#ecosect4 { top: 50.5%; }
#ecosect6 { top: 58%; }
#ecosect7 { top: 20%; left: 45%; }
#ecosect8 { top: 66%; }
#ecosect9 { top: 66%; right: 29%; }
#ecosect10 { top: 22%; right: 28%; }
#ecosect11 { top: 12%; left: 44.5%; }
#ecosect12 { top: 12%; }
}
.close-button { cursor: pointer; display: flex; flex-direction: flow; justify-content: flex-end; align-items: center; display: none;}
.fadeBody { top:0px; left:0px; z-index: 99; background: black; }
.ebsi-works-container { display:flex; flex-direction: column; gap: 24px; }
.illu-user-log { margin-bottom: 0!important; }
.hierarchy-first { margin-bottom: -1.5rem; } |
| Div | |||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||
|
| Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Div | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||
|
| Div | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
|
| Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Div | ||
|---|---|---|
| ||
|
| CSS Stylesheet |
|---|
/*--- HOME SECTION USE CASES ---*/
.home-use-cases {}
.home-use-cases img { height: 113px;}
/*card content custom*/
.card-content-custom .card-content { padding:0; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 16px;}
.card-content-custom .card-content .card-content-text { padding:1rem 2rem 0 2rem;}
.card-content-custom .card-content .card-content-footer {display: flex; justify-content: end; padding:0 2rem 1.5rem 2rem; }
.card-content-custom .card-content .card-content-capabilities { background: #E8E7EB; max-width: 191px; border-radius: 6px; text-align: center; letter-spacing: 1px; }
.card-content-custom .card-content { display: flex; flex-direction: column; justify-content: space-between; }
/*--- MACRO HOME SLIDER NEWS ---*/
.flickity-viewport .card-grid-sc-slider{min-height: 449px;}
.home-slider-news { position:relative; z-index:2; padding-top: 0; padding-bottom:0; border:1px solid #00b3ef;}
.home-slider-news .flickity-enabled { position:relative; background-color: transparent; box-shadow:none;}
.home-slider-news .flickity-enabled.is-draggable { box-shadow:none;}
.home-slider-news .news-slider-root > div { padding:0;}
.home-slider-news .aui-item > div { margin:0; padding:0;}
.home-slider-news .aui-item { display:inline-block; padding:0;}
.home-slider-news .aui-group>.aui-item { padding-top:0; padding-bottom:0; width: 100%;}
.home-slider-news .aui-group>.aui-item+.aui-item { padding:0; width: 100%;}
.home-slider-news > ul { list-style: none; margin: 0; padding: 0;}
/*heading*/
.home-slider-news h2:first-child { display: none;}
/*arrow*/
.home-slider-news .flickity-button { display:none;}
/*dots*/
.home-slider-news .flickity-page-dots { position:absolute; top:auto; bottom:-3rem; margin-bottom: 0; height:1rem; text-align: center !important;}
.home-slider-news .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;}
.home-slider-news .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;}
.home-slider-news .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
/*content*/
.home-slider-news-label { display: inline-block; padding: 0.25rem; font-weight: normal; letter-spacing: 2px; line-height: 1em; text-align: center; text-decoration: none; background-color: #E6F7FD; border: 1px solid transparent; border-radius: 6px;}
.home-slider-news-title { margin-bottom: 0; }
.home-slider-news-title h3 { font-size: 1.2rem; padding-top:1rem; line-height: 1.2;}
@media screen and (min-width: 576px) {
.home-slider-news-cell { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.home-slider-news-label { padding: 0.5rem 0.75rem; font-weight: normal; letter-spacing: 2px; line-height: 1em;}
.home-slider-news-title { flex-grow: 1;}
.home-slider-news-title h3 { padding-left: 1rem; padding-right:1rem; font-size: 1.5rem;}
}
.home-slider-news-container.flickity-enabled.is-draggable:focus { outline:0; outline:none; box-shadow:none;}
/*--- MACRO SLIDER BY DEFAULT ---*/
.slider-default { position:relative; z-index:8; }
.slider-default .flickity-enabled { background-color: transparent; box-shadow:none;}
.slider-default .flickity-enabled.is-draggable { box-shadow:none;}
.slider-default .news-slider-root > div { padding:0;}
.slider-default .aui-item > div { margin:0; padding:0;}
.slider-default .aui-item { display:inline-block; padding:0 15px 10px 15px;}
.slider-default .aui-group>.aui-item { padding-top:0; padding-top:1rem; padding-bottom:0; width: 100%;}
.slider-default .aui-group>.aui-item+.aui-item { padding:0; width: 100%;}
.slider-default > ul { list-style: none; margin: 0; padding: 0;}
/*heading*/
.slider-default h2:first-child { display: none;}
/*arrow*/
.slider-default .flickity-button { top:38% !important; background-color: #fff !important; border:1px solid #CD1D8B; border-radius:8px !important;}
.slider-default .flickity-button:hover { background-color: #FFE7F2 !important;}
.slider-default .flickity-button:focus { outline: 2px dashed black; outline-offset: 2px; box-shadow: none;}
.slider-default .flickity-prev-next-button .flickity-button-icon { left: 30%; top: 30%; width: 40%; height: 40%; fill: rgb(205, 29, 139) !important;}
.slider-default .flickity-prev-next-button.previous { left: -15px;}
.slider-default .flickity-prev-next-button.next { right: -15px;}
/*dots*/
.slider-default .flickity-page-dots { position:relative; margin-bottom: 0; top:1rem !important; height:1rem; text-align: center !important;}
.slider-default .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;}
.slider-default .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;}
.slider-default .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
@media screen and (min-width: 1280px) {
.slider-default .flickity-prev-next-button.previous { left: -50px;}
.slider-default .flickity-prev-next-button.next { right: -50px;}
}
.flickity-viewport { height: 551px; }
/*--- HOME SS SLIDER BY DEFAULT ADD ON ---*/
.ss-carroussel { position:relative; padding-top:0; padding-bottom:0;}
.ss-carroussel .slider-default { margin-top:1rem;}
/*hack*/
.ss-carroussel .slider-default > p:last-child { display: none;}
/*arrow*/
.ss-carroussel .slider-default .flickity-button { background-color: rgba(205, 29, 139, .3) !important;; border:1px solid #FFF;}
.ss-carroussel .slider-default .flickity-button:hover { background-color: #CD1D8B !important;}
.ss-carroussel .slider-default .flickity-prev-next-button .flickity-button-icon { fill: rgb(255, 255, 255) !important;}
@media screen and (min-width: 1280px) {
.ss-carroussel .slider-default .flickity-button { background-color: transparent !important; border:1px solid #FFF;}
}
.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important }
/*card*/
.ss-carroussel .card-grid-body p:first-child { margin-bottom:0.25rem;}
.ss-carroussel .card-grid-body p:last-child { margin-bottom:0;}
.ss-carroussel .list-flag { margin-bottom: 0;}
.ss-carroussel .card-grid-footer p { text-align: right;}
/*content*/
.ss-carroussel h2 { margin-top:-2rem;}
/*wave top*/
.success-stories-curve-top { z-index:1; position: absolute; left: 0; right: 0; height: 100%; margin-top: 7.7rem;}
.success-stories-curve-top p { margin:0;}
.success-stories-curve-top img {width: 103%;}
/*wave bottom*/
.success-stories-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; }
.success-stories-wave-bottom p { margin:0;}
.success-stories-wave-bottom img { position:absolute; bottom:0; left:-1%; width: 102%;}
/*---HOME SS SECTION CTA REGISTER---*/
.ss-cta-register { position: relative; padding-top:4rem; 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;}
#ss-become-a-pilot { position: relative; z-index: 1000; padding-top: 4rem; }
#ss-become-a-pilot h3 { color: white; }
#ss-become-a-pilot p { color: white; }
#ss-become-a-pliot span { color: white; }
#ss-stories-get-inspired { padding-left: 2.5rem; padding-bottom: 0;}
.home-slider-news { background: #001E65; border-radius: 0px 0px 24px 24px; border: none!important;}
#bg-news-left { position: absolute; left: 0%; bottom: 0px; width: 15%; max-width: 180px; border-bottom-left-radius: 24px;}
#bg-news-right { position: absolute; right: 50px; bottom: 0px; height: 100%; z-index: 1; }
.news-info { display: flex; gap: 1rem; align-items: center;}
.news-slider-container { min-height: 78px; display: flex; justify-content: space-between; align-items: center; }
.home-slider-news p { margin: 0px!important; padding: 0px!important; }
.news-text { display: flex; align-items: center; }
.news-text > h3 { margin-bottom: 0px; color: white; z-index: 10;}
.home-slider-news-label {background: white!important; font-size: 18px; color: #D70058; z-index: 10;}
.news-cta { z-index: 10; }
@media screen and ( max-width: 768px ) {
#bg-news-left { width: 100%; }
#bg-news-right { right: -253px; bottom: 0px; width: 300px; }
.news-info { padding-top: 1rem; padding-bottom: 1rem; }
.news-cta { padding-bottom: 1rem; }
.news-slider-container { flex-direction: column; }
} |
| CSS Stylesheet |
|---|
.verifiable-credentials-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/bg-introduction-vc.svg");
background-position: top right; background-repeat: no-repeat; background-size: contain;}
.vc-history-cards .card-grid { max-width: 339px; padding: 34px 21px 20px; min-height: 250px; box-shadow: none; background: #F6F5F7; min-height: 449px; }
.vc-history-cards .card-grid-body { display: flex; flex-direction: column; justify-content: space-between; }
.vc-history-cards .card-grid-body > p:first-child, .vc-history-cards .card-grid-body > p:last-child { display: none; }
.vc-history-cards .card-grid-header > h3 { font-size: 20px; margin-bottom: 13px; }
.vc-history-cards .card-grid-footer > p { font-size: 14px; }
@media screen and (max-width: 768px) {
.btns-horizontal { flex-direction: column; }
.vc-history-cards { display: flex!important; }
}
@media screen and ( max-width: 1088px) {
.vc-history-cards .col-4 { width: 100%!important;}
.vc-history-cards > p { display: flex; justify-content: center; align-items: center; }
.vc-history-cards .arrow-right-history-section { transform: rotate(90deg); top: 0px!important;}
.vc-history-cards { flex-direction: column; }
.vc-history-cards .card-grid { max-width: none!important; width: 100%; }
.vc-history-cards .card-grid+p { transform: rotate(90deg); margin-top: 1rem; }
}
#vc-history .vc-history-cards .col-4 { width: 31%; }
#vc-history .col-4 {padding: 0;}
#vc-history .col-4 > p:first-child, #vc-history .col-4 > p:last-child { display: none; }
#vc-history .line-seperator hr { background: #E8E7EB; height: 1px; border: none; margin:0;}
#vc-history .info-container { display: flex; align-items: center; gap: 15.5px; background: #f6f5f7; padding: 12px 16px; border-radius: 6px; width: fit-content; min-height: 48px;}
#vc-history .card-grid-header { padding: 40px 40px 24px; min-height: 156px;}
#vc-history .card-grid-header h3 { font-size: 32px; margin-bottom: 8px;}
#vc-history .card-grid-header p { margin-bottom: 0; }
#vc-history .card-grid-footer { display: flex; flex-direction: column; gap: 12px; padding: 40px 40px}
#vc-history .web-3-card { background: white; border: 1px solid #00B3EF; border-radius: 16px;}
#vc-history .web-3-card .info-container { background: #E6F7FD; }
#vc-history .arrow-right-history-section { position: relative; top: 40px; }
#vc-history .vc-web3-ssi_movement .col-4 { max-width: 345px; }
#vc-history .vc-web3-ssi_movement { border: 1px solid #00B3EF; margin-top: 2.5rem; position: relative; border-radius: 16px; display: flex; flex-direction: column; padding: 40px;}
#vc-history .vc-web3-ssi_movement::after { content: ''; height: 15px; width: 15px; position: absolute; background-color: white; border-top: #00B3EF solid 1px; border-left: #00B3EF solid 1px; transform: rotate(45deg); right: 15%; top: -8.6px; }
#vc-history .vc-web3-ssi_movement > div:first-child { margin-bottom: 0; padding-bottom: 0; }
#vc-history .vc-web3-ssi_movement > div:first-child > div:first-child { padding-left: 0; }
#vc-history .vc-web3-ssi_movement > div:nth-child(2) { padding-top: 0; }
#vc-history .vc-web3-ssi_movement h4 { margin-top: 1rem; }
#vc-history .vc-web3-ssi_movement .img-container { min-height: 88px; display: flex; align-items: center; }
.case-family_tabs { margin-bottom: 0rem!important; }
.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: rgba(255, 255, 255, 0.8); }
.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;} */
.num-active { display: none; }
@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; }
}
#understand-eco-ebsi .case-family_tabs a { display: flex; flex-direction: column; align-items: start; gap: 4px;}
.btns-horizontal { display: flex; gap: 1rem; margin-top: 2rem; } |
| HTML |
|---|
<script>
$("document").ready(function () {
const setImageInActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "v-actors"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display","block")
$(that.children[0].children[2]).css("color","black")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "v-process"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display","block")
$(that.children[0].children[2]).css("color","black")
}
if (
that.getAttribute("data-index") == 2 ||
that.getAttribute("id") == "v-credentials"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display","block")
$(that.children[0].children[2]).css("color","black")
}
}
const setImageActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "v-actors"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display","none")
$(that.children[0].children[2]).css("color","white")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "v-process"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display","none")
$(that.children[0].children[2]).css("color","white")
}
if (
that.getAttribute("data-index") == 2 ||
that.getAttribute("id") == "v-credentials"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display","none")
$(that.children[0].children[2]).css("color","white")
}
}
const illu = document.querySelectorAll("#understand-eco-ebsi .illu-popup");
const tabs = document.querySelectorAll("#understand-eco-ebsi .case-family_tabs li");
illu.forEach(popup => {
if ( popup.getAttribute("data-index") == 0 ) {
$(popup).show();
} else {
$(popup).hide();
}
})
tabs.forEach(tab => {
if ( tab.getAttribute("data-index") == 0 || tab.getAttribute("id") == 'v-actors') {
$(tab).addClass("active")
setImageActive(tab)
}
$(tab).on("click",function(e) {
e.stopPropagation();
tabs.forEach(tab => {
$(tab).removeClass('active')
setImageInActive(tab)
})
this.classList.toggle("active")
setImageActive(this)
illu.forEach(popup => {
if (this.getAttribute("data-index") == popup.getAttribute("data-index") ) {
$(popup).show();
} else {
$(popup).hide();
}
})
e.preventDefault();
})
})
})
</script> |
| HTML |
|---|
<script>
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* Simple accordion pattern example
*/
'use strict';
Array.prototype.slice.call(document.querySelectorAll('.collapse')).forEach(function (accordion) {
// Allow for multiple accordion sections to be expanded at the same time
var allowMultiple = accordion.hasAttribute('data-allow-multiple');
// Allow for each toggle to both open and close individually
var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
// Create the array of toggle elements for the accordion group
var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-trigger'));
var panels = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-panel'));
accordion.addEventListener('click', function (event) {
let storeArr = document.querySelectorAll('.collapse-trigger')
var target = event.target;
let active = accordion.querySelector('[aria-expanded="true"]');
if(target.classList.contains('collapse-trigger') == false && active != null ) {
storeArr.forEach( tar => {
tar.setAttribute('aria-expanded', 'false');
})
document.querySelectorAll('.collapse-panel').forEach(panel => {
panel.setAttribute('hidden', '');
})
active = null;
}
if (target.classList.contains('collapse-trigger')) {
// Check if the current toggle is expanded.
var isExpanded = target.getAttribute('aria-expanded') == 'true';
let active = accordion.querySelector('[aria-expanded="true"]');
// without allowMultiple, close the open accordion
if (!allowMultiple && active && active !== target) {
// Set the expanded state on the triggering element
active.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
// When toggling is not allowed, clean up disabled state
if (!allowToggle) {
active.removeAttribute('aria-disabled');
}
}
if (!isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'true');
// Hide the accordion sections, using aria-controls to specify the desired section
document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
// If toggling is not allowed, set disabled state on trigger
if (!allowToggle) {
target.setAttribute('aria-disabled', 'true');
}
}
else if (allowToggle && isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
}
event.preventDefault();
}
});
// Bind keyboard behaviors on the main accordion container
accordion.addEventListener('keydown', function (event) {
var target = event.target;
var key = event.which.toString();
var isExpanded = target.getAttribute('aria-expanded') == 'true';
var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
// 33 = Page Up, 34 = Page Down
var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
// Is this coming from an accordion header?
if (target.classList.contains('collapse-trigger')) {
// Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
// 38 = Up, 40 = Down
if (key.match(/38|40/) || ctrlModifier) {
var index = triggers.indexOf(target);
var direction = (key.match(/34|40/)) ? 1 : -1;
var length = triggers.length;
var newIndex = (index + length + direction) % length;
triggers[newIndex].focus();
event.preventDefault();
}
else if (key.match(/35|36/)) {
// 35 = End, 36 = Home keyboard operations
switch (key) {
// Go to first accordion
case '36':
triggers[0].focus();
break;
// Go to last accordion
case '35':
triggers[triggers.length - 1].focus();
break;
}
event.preventDefault();
}
}
});
// These are used to style the accordion when one of the buttons has focus
accordion.querySelectorAll('.collapse-trigger').forEach(function (trigger) {
trigger.addEventListener('focus', function (event) {
accordion.classList.add('focus');
});
trigger.addEventListener('blur', function (event) {
accordion.classList.remove('focus');
});
});
// Minor setup: will set disabled state, via aria-disabled, to an
// expanded/ active accordion which is not allowed to be toggled close
if (!allowToggle) {
// Get the first expanded/ active accordion
var expanded = accordion.querySelector('[aria-expanded="true"]');
// If an expanded/ active accordion is found, disable
if (expanded) {
expanded.setAttribute('aria-disabled', 'true');
}
}
});
</script> |
| CSS Stylesheet |
|---|
/* TABS ecosystem */
.aui-tabs.horizontal-tabs>.tabs-menu { justify-content: center; align-items: center; padding: 8px; gap: 16px; background: #CCF0FC; border-radius: 80px; }
.aui-tabs.horizontal-tabs>.tabs-menu:before { display: none; }
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item { padding: 20px; color: #776E85; }
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a:before { display: none; }
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab { background: #fff; border-radius: 80px; }
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a:link { font-weight: bold; color: #4A3D5D; }
.aui-tabs.horizontal-tabs>.tabs-pane { position: relative; }
/* POPUPS ecosystem */
.illu-popup { position: relative; }
.illu-popup .collapse-item { position: absolute; top: 60%;}
.illu-popup .collapse-trigger { position: relative; display: block; padding: 8px; text-align: center; width: auto; color: #1D0D34; border: none; cursor: pointer; border-radius: 80px; transition: all 0s; transform: rotate(45deg);}
.illu-popup .collapse-trigger[aria-expanded="true"] {transform: rotate(45deg);}
.illu-popup .collapse-trigger[aria-expanded="false"] {transform: none;}
.collapse-trigger:hover {transition: all 0.4s; background: none!important;}
.illu-popup .collapse-panel { position: absolute; top: 0; left: 0; right: 0; max-width: 400px; border: none; border-radius: 17px; -webkit-animation: none; -moz-animation: none;}
.illu-popup-item { position: absolute; top: 60%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;}
.illu-popup-title { color: #194891; margin-bottom: 0.3rem; font-weight: 600; width: 70%; font-size: 18px; line-height: 1!important;}
.illu-popup-icon { position: relative; display: block; width: 32px; height: auto; pointer-events: none;}
/*
.collapse-item { margin-bottom:1rem; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1);}
.collapse button { position:relative; background-color: white; }
.collapse button[aria-expanded="false"] {border-radius: 16px;}
.collapse button[aria-expanded="true"] {border-radius: 16px 16px 0 0;}
.illu-popup .collapse button:after { display: none;}
.illu-popup .collapse-item:hover button:after { border-right:none;}
.collapse button::-moz-focus-inner { border: 0;}
.collapse-trigger { display: block; padding:1rem 3rem 1rem 1rem; position: relative; text-align: left; width: 100%; color: #1D0D34; background-color: transparent; border-color: transparent; cursor: pointer; border-radius: 10px 10px 0px 0px; transition: all 0s;}
.collapse-trigger:hover {transition: all 0.4s; background: none!important;}
.collapse-trigger:focus { outline: 2px dashed #1D0D34; outline-offset: 2px;}
.collapse-title { display: block; pointer-events: none; outline: none;}
.collapse-trigger:focus .collapse-title { border-color: hsl(216, 94%, 73%);}
.collapse-icon { position: absolute; right: 1.25rem; top: 50%; height: 0.90rem; width: 0.90rem; border: solid #CD1D8B; border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg); -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out;}
.collapse-trigger[aria-expanded="true"] .collapse-icon { transform: translateY(-50%) rotate(-135deg);}
.illu-popup .collapse-panel { position:relative; z-index:7; padding:1rem; color: #1D0D34; background-color: white; border-top: none; display: block; -webkit-animation: collapse-slide .2s ease-out; -moz-animation: collapse-slide .2s ease-out; border-radius: 0px 0px 10px 10px;}
.collapse-panel[hidden] { display: none;}
@-webkit-keyframes collapse-slide {
0% { opacity: 0; -webkit-transform: translateY(-100%);}
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes collapse-slide {
0% { opacity: 0; -moz-transform: translateY(-100%);}
100% { opacity: 1; -moz-transform: translateY(0);}
}
@media screen and (min-width: 768px) {
.collapse-trigger { padding:1rem 3rem 1rem 2rem;}
}
*/ |
| CSS Stylesheet |
/*---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 right; background-repeat: no-repeat; background-size: cover;}
/*---SS SECTION FIRST PILOT---*/
.ss-first-pilot { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-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;} |