<img id="bg-about-us" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/474513483/bg-curve-intro.svg" alt="" aria-hidden="true"/> |
|
|
|
|
|
|
|
|
|
.tabs-container { padding-left: 16px; padding-right: 16px; padding-bottom: 40px; position: relative; z-index: 2; }
.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; cursor: pointer; padding-right: 24px; padding-left: 24px; height: 48px; }
.case-family_tabs li:first-child { padding-left: 40px; padding-right: 40px; }
.case-family_tabs li:last-child { padding-right: 24px; }
.case-family_tabs a { text-decoration: none; color: black; text-align: left; line-height: 1;}
.case-family_tabs { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 20px; list-style: none; background: #E6ECF4; width: 100%; }
.case-family_tabs .active {background: #004494; display: flex; align-items: center; border-radius: 16px; color: white; padding-top: 12px; padding-bottom: 12px; }
.num-active { display: none; }
@media screen and ( max-width: 610px ) {
.case-family_tabs a { flex-direction: column; gap: 2px!important; line-height: 24px; text-align: center; white-space: pre; }
.case-family_tabs li { height: 74px; padding: 12px 24px!important; }
}
@media screen and ( max-width: 768px ) {
.case-family_tabs { gap: 0px; }
}
@media screen and ( min-width: 1101px ) {
.case-family_tabs { max-width: 850px; }
.case-family_tabs { max-height: 64px; }
.illu-about-us { position: relative; top: -37px; max-width: 92.2%!important; }
}
@media screen and ( max-width: 1100px ) {
.case-family_tabs li { width: 100%; padding-left: 40px; }
.active { width: 100%; }
#bg-about-us { top: -230px!important; }
}
@media screen and ( min-width: 1117px ) {
.case-family_tabs li:hover, .case-family_tabs li:active { background : #6a9ad1; border-radius: 16px; color: white; }
.case-family_tabs .active:hover, .case-family_tabs .active:active { background: #004494!important; }
}
.case-family_tabs a { display: flex; align-items: center; gap: 12px; }
.case-family_tabs a img { max-width: 24px; max-height: 24px; width: 24px; height: 24px; }
.hierarchy-first { display: flex; justify-content: center; align-items: center; }
#about-us-container { position: relative; z-index: 1; }
#about-us-container > p:first-child { margin-bottom: 0; }
#bg-about-us { position: absolute; top: -125px; right: 0; width: 66%; z-index: 1; max-width: 900px; }
#about-us-introduction { padding-top: 15px; }
#about-us-introduction .container { position: relative; z-index: 10; }
#about-us-introduction h1 { margin-bottom: 40px; }
#about-us-introduction .col-6 > p:first-child, #about-us-introduction .col-6 > p:last-child { display: none; }
#about-us-introduction h1 { font-size: 48px!important; }
#main-content .container { max-width: 1226px!important; position: relative; z-index: 2; }
@media screen and ( max-width: 610px ) {
#bg-about-us { right: -421px!important; width: 210%!important; }
#governance-coordination .gc-description { margin-left: 49px!important; }
#about-us-introduction .col-6 { padding-top: 0; }
}
@media screen and ( max-width: 768px ) {
#main-content h2.heading-deco { font-size: 32px!important; }
#main-content h3 { font-size: 32px!important; }
#about-us-introduction h1 { font-size: 40px!important; }
.about-us-buttons-container { flex-direction: column; }
.about-us-buttons-container a { max-width: 100%; width: 100%; }
.gc-cards-container .col-3 { padding: 24px 24px 32px; }
.gc-cards-container .col-3 h4 { margin-bottom: 16px; }
.gc-cards-container { display: flex; flex-direction: column; gap: 40px!important; }
#governance-coordination .container { padding-top: 80px; }
#governance-coordination .card-grid { border-top-right-radius: 24px; border-top-left-radius: 24px; }
#governance-coordination .card-grid .card-grid-img { margin: -24px -24px -8px -24px; }
.gc-bottom { top: -54px; }
#community-participants .cols { display: flex; flex-direction: column-reverse; gap: 40px; }
#community-participants .col-4 { max-width: 367px; }
}
@media screen and ( min-width: 769px ) {
#main-content h2.heading-deco { font-size: 40px!important; }
#main-content h3 { font-size: 32px!important; }
#governance-coordination .col-7 { width: 66.6%; }
#governance-coordination .gc-cards-container .col-3 { width: 32%; padding: 24px 24px 24px 25px; }
.gc-cards-container .col-3 h4 { margin-bottom: 12px; }
.gc-description { color: #776E85; letter-spacing: 0.1em; font-size: 12px!important; line-height: 20px; }
#governance-coordination .container { padding-top: 155px; padding-bottom: 114px; }
#community-participants .cols { gap: 87px; }
#community-participants .col-4 { max-width: 432px; }
#bg-about-us { min-width: 784px; }
}
@media screen and ( max-width: 941px ) {
#about-us-introduction .cols { display: flex!important; flex-direction: column; }
#about-us-introduction .col-6 { width: 100%!important; }
.illu-container { display: flex!important; justify-content: center; }
}
@media screen and ( max-width: 1000px ) {
#community-participants .about-us-buttons-container { flex-direction: column; }
#community-participants .about-us-buttons-container a { width: 100%; max-width: 100%; }
}
.about-us-buttons-container { display: flex; gap: 16px; margin-top: 40px!important; }
#history-context > .container { position: relative; z-index: 10; }
/* INTRO */
#about-us-introduction a.btn.outline span.ico-arrow-south { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/ico-arrow-south-primary.svg") left no-repeat!important; }
/* Governance and Coordination */
#governance-coordination { position: relative; padding-top:0; padding-bottom: 0; }
#governance-coordination .container { position: relative; z-index: 5; }
#governance-coordination h2, #governance-coordination p { color: #FDFDFD; }
.gc-background { background: #004494; }
/*wave top*/
.gc-top { z-index:1; position: absolute; left: 0; right: 0; height: 100%; }
.gc-top p { margin:0;}
.gc-top img {width: 103%; margin-top:-1%}
/*wave bottom*/
.gc-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #004494; }
.gc-bottom p { margin:0;}
.gc-bottom img { position:absolute; bottom:0; left:-1%; width: 102%;}
#governance-coordination .gc-cards-container { margin: 8px 0rem -1rem 0rem; gap: 20px; }
#governance-coordination .gc-cards-container p, #governance-coordination .gc-cards-container .h4 { color: #4A3D5D; }
#governance-coordination .card-grid { display: flex!important; height: inherit!important; border-radius: 13px; }
#governance-coordination .card-grid > p:first-child, #governance-coordination .card-grid > p:last-child { display: none; }
#governance-coordination .card-grid .card-grid-img { margin: -24px -24px -8px -25px; padding-bottom: 8px; border-top-right-radius: 13px; border-top-left-radius: 13px; }
#governance-coordination .card-grid .card-grid-img > img { border-top-right-radius: 13px; border-top-left-radius: 13px; }
#governance-coordination .card-grid-body { display: flex; flex-direction: column; }
#governance-coordination .gc-description { margin-bottom: 21px; flex-grow: 1; word-break: break-all; margin-left: 24px; flex-grow: 1; color: #776E85!important;}
#governance-coordination .gc-description a { color: #776E85!important; }
#governance-coordination .card-grid-text { margin-bottom: 40px; }
#governance-coordination .card-grid-footer { text-align: right; }
/* Community and Participants */
#community-participants .about-us-buttons-container { margin-top: 40px; }
#community-participants .col-6 { max-width: 704px; }
/* History and Context */
#history-context { position: relative; padding-bottom: 8rem; overflow: hidden; }
#hc-cards-section { display: flex; flex-direction: column; align-items: center; }
#hc-cards-section > p:first-child, #hc-cards-section > p:last-child { display: none; }
.hc-card-container { display: flex!important; justify-content: center; position: relative; }
.hc-bullet { width: 44px; height: 44px; background-color: #CD1D8B; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.hc-bullet-cross { width: 20.5px; height: 2px; background-color: #FFFFFF; position: relative; }
.hc-bullet-cross:before { content: ''; position: absolute; width: 21px; height: 2px; background-color: #FFFFFF; }
.hc-bullet-cross:before {transform: rotate(90deg); }
.hc-card { width: 344px; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 12px; }
.hc-card img { max-width: 140px; margin-bottom: 8px; }
.hc-card .line-separator{ background: #E8E7EB; height: 1px; border: none; }
.expanded a, .collapsed a { position: relative; z-index: 10; }
.hc-card .card-grid-footer { display: flex; justify-content: center; position: relative; }
.hc-card .card-info { display: flex; flex-direction: column; align-items: center; }
.hc-card .card-info img { max-width: 200px; margin-bottom: 20px; }
#hc-bg { position: absolute; top: 2px; left: 0; }
@media screen and ( max-width: 610px ) {
#hc-bg { top: 181px!important; }
}
@media screen and ( min-width: 1330px ) {
#hc-bg { width: 100%; max-height: 3665px; }
}
.launch-card { position: relative; display: flex!important; justify-content: center; align-items: center; }
.launch-card > div:nth-child(2) { width: 160px; height: 160px; min-width: 160px; min-height: 160px; background: #CCF0FC; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); position: relative; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.launch-card > div:nth-child(2) > img { width: 64px; min-width: 64px; }
/*--- HOME NEWSFLASH ---*/
.home-newsflash { padding-top: 16rem; padding-bottom:0; margin-top: 7rem;}
.home-newsflash .container { position: relative;}
.home-newsflash .cols { z-index: 5; position: relative;}
.home-newsflash .home-newsflash-bg { display: block; z-index: 4; position:absolute; bottom: 0; left:-100%; width: 200%;}
.home-newsflash .home-newsflash-bg p { margin:0; line-height:0;}
.home-newsflash .home-newsflash-bg p img { margin:0; max-width: 100%; height: auto;}
.home-newsflash .btn { margin-bottom: 2rem;}
@media screen and ( max-width: 550px ) {
.home-newsflash { padding-top: 6rem!important; }
.home-newsflash .home-newsflash-bg { bottom: -126px!important; left: -111%!important; }
.home-newsflash .home-newsflash-bg p img { max-width: unset!important; }
}
@media screen and (min-width: 768px) {
.home-newsflash .home-newsflash-bg { left:-30%; width: 100%;}
.home-newsflash .btn { margin-bottom: 3rem;}
}
@media screen and (min-width: 1360px) {
.home-newsflash .home-newsflash-bg { left:-30%; width: 90%;}
}
/* CARD RESP VERSION */
@media screen and ( max-width: 365px ) {
.hc-card { width: 90vw!important; }
}
@media screen and ( min-width: 855px ) {
.launch-card, .hc-card-container { padding: 0 16px!important; }
.hc-card .expanded > .line-separator:first-child { margin: 20px 0; }
.hc-card { padding: 24px 24px 24px; }
.hc-card .line-separator { margin: 32px 0; }
.launch-card > div:nth-child(2) { bottom: -80px; }
.hc-card { position: absolute; }
.hc-bullet { position: relative; top: 100px; cursor: pointer; }
#hc-cards-section > .hc-card-container:nth-child(2) .hc-bullet { top: 101px; }
.hc-card-container:before { content: ""; position: absolute; top: 155px; left: 50%; width: 100%; height: 100%; background-image: url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/474513483/Line.svg'); background-repeat: repeat-y; background-position: center left; }
.hc-card .hc-bullet, .card-line-connector { display: none; }
}
@media screen and ( max-width: 854px ) {
.hc-card .expanded > .line-separator:first-child { margin: 24px 0; }
.hc-card { padding: 40px 24px 24px; }
.hc-card .line-separator { margin: 24px 0 16px; }
.launch-card { flex-direction: column; margin-top: 2px; }
.launch-card, .hc-card-container { padding: 0 16px!important; }
.hc-card-container { flex-direction: column; align-items: center; }
.hc-card { position: relative; }
.hc-card-container > .hc-bullet { position: absolute; bottom: 66px; z-index: 10; cursor: pointer; }
.hc-card .hc-bullet { display: flex; }
.hc-card .card-grid-footer { display: none; }
.hc-card .hc-bullet { position: absolute; bottom: -22px; left: 150px; }
.card-line-connector { display: flex; }
.expanded div:nth-child(3) { display: none; }
}
#ebsi-figures { padding: 6.25rem 1.5rem 12.5rem 1.5rem; }
#ebsi-figures h2 { text-align: center; margin-bottom: 24px; }
#ebsi-figures .cols { gap: 24px; }
#ebsi-figures .col-4 { position: relative; max-width: 392px; min-height: 254px; padding: 24px; }
#ebsi-figures .col-4 > p:first-child, #ebsi-figures .col-4 > p:last-child { display: none; }
#ebsi-figures p { margin-bottom: 0; }
#ebsi-figures h4 { font-size: 20px; line-height: 22px; margin-bottom: 24px; }
#ebsi-figures .h4 { font-size: 20px; line-height: 22px; text-align: start; margin-bottom: 24px; }
#ebsi-figures .figures-wrapper { display: flex; gap: 20px; align-items: center; position: relative; z-index: 5; }
#ebsi-figures .figures-l-container { max-width: 50%; width: 160px; height: 100px; padding: 16px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5.5px; background: #FFE6F2; border-radius: 16px; text-align: center; }
#ebsi-figures .figures-l-container p { font-size: 14px; line-height: 20px; color: #FF0179; }
#ebsi-figures .figures-r-container { max-width: 50%; }
#ebsi-figures .figures-r-container p { font-size: 14px; line-height: 20px; color: #4A3D5D; }
#ebsi-figures .bg-curve { position: absolute; bottom: 0; right: 0; }
@media screen and ( max-width: 768px ) {
#ebsi-figures .cols { display: flex; flex-direction: column; align-items: center; }
} |
<script>
const calculateCard = function () {
const hcSection = document.querySelector("#hc-cards-section")
const cardsContainer = hcSection.querySelectorAll(".hc-card-container")
const windowWidth = window.innerWidth
cardsContainer.forEach((child, index) => {
const hcCard = child.querySelector(".hc-card")
parentElement = child
if (windowWidth > 854) {
if (index % 2 === 0) {
hcCard.style.left = "50%"
hcCard.style.transform = "translateX(64px)"
} else {
hcCard.style.right = "50%"
hcCard.style.transform = "translateX(-64px)"
}
parentElement = child
const childElement = hcCard
const childHeight = childElement.offsetHeight
parentElement.style.height = childHeight + "px"
that = parentElement
} else {
parentElement.style.height = ""
hcCard.style.left = "unset"
hcCard.style.right = "unset"
hcCard.style.transform = "unset"
}
})
}
const ctas = function () {
$(".expanded a, .collapsed a").click(function (e) {
e.stopPropagation()
let $container = $(this).parents("div")
let that = $(this).closest(".hc-card-container")
let bullet = that.find(".hc-bullet")
let collapsed = that.find(".collapsed")
$container.children(".expanded, .collapsed").toggle()
calculateCard()
if ($(collapsed).css("display") === "none") {
$(bullet).attr("isActive", "active")
$(bullet).css("transform", "rotate(45deg)")
$(bullet).css("transition", "transform 0.1s ease")
} else {
$(bullet).attr("isActive", "")
$(bullet).css("transform", "rotate(0deg)")
$(bullet).css("transition", "transform 0.1s ease")
}
e.preventDefault()
})
}
const bullets = function () {
$(".hc-bullet").click(function (e) {
e.stopPropagation()
let that = $(this).next(".hc-card")
that.children(".expanded, .collapsed").toggle()
e.preventDefault()
if ($(this).attr("isactive") === "active") {
$(this).css("transform", "rotate(0deg)")
$(this).css("transition", "transform 0.1s ease")
$(this).attr("isactive", "")
} else {
$(this).css("transform", "rotate(45deg)")
$(this).css("transition", "transform 0.1s ease")
$(this).attr("isactive", "active")
}
calculateCard()
e.preventDefault()
})
}
window.addEventListener("DOMContentLoaded", function () {
$(".expanded").hide()
calculateCard()
ctas()
bullets()
const mediaQuery = window.matchMedia("(min-width: 854px)")
if (mediaQuery.matches) {
const hcSection = document.querySelector("#hc-cards-section")
const cardsContainer = hcSection.querySelectorAll(".hc-card-container")
cardsContainer.forEach((parentElement) => {
parentElement.style.height = 239 + "px"
})
}
})
const mediaQuery = window.matchMedia("(min-width: 854px)")
function handleScreenChange(e) {
const hcSection = document.querySelector("#hc-cards-section")
const cardsContainer = hcSection.querySelectorAll(".hc-card-container")
cardsContainer.forEach((child, index) => {
const hcCard = child.querySelector(".hc-card")
let parentElement = child
if (e.matches) {
if (index % 2 === 0) {
hcCard.style.left = "50%"
hcCard.style.transform = "translateX(64px)"
} else {
hcCard.style.right = "50%"
hcCard.style.transform = "translateX(-64px)"
}
parentElement = child
const childElement = hcCard
const childHeight = childElement.offsetHeight
parentElement.style.height = childHeight + "px"
that = parentElement
} else {
parentElement.style.height = ""
hcCard.style.left = "unset"
hcCard.style.right = "unset"
hcCard.style.transform = "unset"
}
})
}
mediaQuery.addEventListener("change", handleScreenChange)
//!======================
$("#eu-expert-group-on-blockchain-ethics-container").hide()
const mediaQuery2 = window.matchMedia("(max-width: 1070px)")
const structureNav = () => {
const mediaQuery = window.matchMedia("(max-width: 1070px)")
const tabs = document.querySelectorAll(".case-family_tabs li")
tabs.forEach((tab) => {
if (mediaQuery.matches) {
tab.getAttribute("id") === "about-us"
? (tab.querySelector("a > span").textContent = "About us")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-expert"
? (tab.querySelector("a > span").textContent = "EGBE")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-bc-sb"
? (tab.querySelector("a > span").textContent = "Sandbox")
: tab.querySelector("a > span").textContent
} else {
tab.getAttribute("id") === "about-us"
? (tab.querySelector("a > span").textContent = "About us")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-expert"
? (tab.querySelector("a > span").textContent =
"EU Expert Group on Blockchain Ethics")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-bc-sb"
? (tab.querySelector("a > span").textContent =
"European Blockchain Sandbox")
: tab.querySelector("a > span").textContent
}
})
}
structureNav()
mediaQuery2.addEventListener("change", structureNav)
const setImageInActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "about-us"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
$(that.children[0].children[2]).css("fontWeight", "600")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "eu-expert"
) {
$(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") == "eu-bc-sb"
) {
$(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") == "about-us"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
$(that.children[0].children[2]).css("fontWeight", "600")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "eu-expert"
) {
$(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") == "eu-bc-sb"
) {
$(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 tabs = document.querySelectorAll(".case-family_tabs li")
tabs.forEach((tab) => {
if (
tab.getAttribute("data-index") == 0 ||
tab.getAttribute("id") == "about-us"
) {
$(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)
if (this.getAttribute("data-index") == 1) {
window.location.href =
"https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/EU+Expert+Group+on+Blockchain+Ethics"
}
if (this.getAttribute("data-index") == 2) {
window.location.href =
"https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Sandbox+Project"
}
e.preventDefault()
})
})
</script> |