|
|
|
|
|
|
|
|
<script> const tabs = document.querySelectorAll(".case-family_tabs > li"); const tabsSections = document.querySelectorAll('.case-section'); // const vodSection = document.querySelector("#vod-section") // const vopSection = document.querySelector("#vop-section") tabs.forEach( (tab, index1) => { tab.addEventListener("click", function(e) { try{ document.querySelector('.case-family_tabs .active').classList.remove('active'); }catch(err){} this.classList.add('active'); tabsSections.forEach((section, index2) => { if(index1 === index2){ section.classList.remove('hide'); } else{ section.classList.add('hide'); } }); // tabs.forEach(t => t.classList.remove("active")) // this.classList.add("active") // if (this.getAttribute("id") === "vod") { // vodSection.classList.remove("hide") // vopSection.classList.add("hide") // } else if ( this.getAttribute("id") === "vop") { // vodSection.classList.add("hide") // vopSection.classList.remove("hide") // } }) }) </script> |
/* CARDS */ #sec-8 .cards-container { display: flex; gap: 40px; flex-wrap: wrap; } #sec-8 .card-wrapper { display: flex; flex-direction: column; max-width: 381px; border-radius: 16px; box-shadow: 0px 4px 20px 0px rgba(0, 55, 100, 0.10); min-height: 440px; } #sec-8 .card-wrapper p { margin-bottom: 0; } #sec-8 .card-head { padding: 24px; position: relative; min-height: 160px; } #sec-8 .card-badge { position: absolute; top: 0; left: 0; } #sec-8 .card-badge > img { max-width: 119px; } #sec-8 .card-program { position: absolute; top: 24px; right: 24px; } #sec-8 .card-program > img { max-width: 40px; } #sec-8 .card-body { display: flex; flex-direction: column; padding: 24px 24px 16px; flex-grow: 1; } #sec-8 .flag-container { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } #sec-8 .flag-container img { border-radius: 50%; width: 16px; height: 16px; } #sec-8 .card-foot { padding: 0 24px 40px; display: flex; justify-content: flex-end; } #sec-8 .card-wrapper .card-head { background-repeat: no-repeat!important; background-size: cover!important; background-position-y: center!important; border-top-left-radius: 16px; border-top-right-radius: 16px; } #sec-8 .section-block { margin-bottom: 80px; } #sec-8 .section-block h3 { margin-bottom: 36px; } #sec-8 .card-wrapper.card-a .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-a.png"); } #sec-8 .card-wrapper.card-b .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-b.png"); } #sec-8 .card-wrapper.card-c .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-c.png"); } #sec-8 .card-wrapper.card-d .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-d.png"); } #sec-8 .card-wrapper.card-e .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-e.png"); } #sec-8 .card-wrapper.card-f .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-f.png"); } #sec-8 .card-wrapper.card-g .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-g.png"); } #sec-8 .card-wrapper.card-h .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-h.png"); } #sec-8 .card-wrapper.card-i .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-i.png"); } #sec-8 .card-wrapper.card-j .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-j.png"); } #sec-8 .card-wrapper.card-k .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-k.png"); } #sec-8 .card-wrapper.card-l .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-l.png"); } #sec-8 .card-wrapper.card-m .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-m.png"); } #sec-8 .card-wrapper.card-n .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-n.png"); } #sec-8 .card-wrapper.card-o .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-o.png"); } #sec-8 .card-wrapper.card-p .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-p.png"); } #sec-8 .card-wrapper.card-q .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-q.png"); } #sec-8 .card-wrapper.card-seafood .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-seafood.png");} #sec-8 .card-wrapper.card-traceability .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-traceability.png"); } #sec-8 .card-wrapper.card-onepass .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-onepass.png");} #sec-8 .card-wrapper.card-resume .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-resume.png");} #sec-8 .card-wrapper.card-cert-good-conduct .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-cert-good-conduct.png");} #sec-8 .card-wrapper.card-openrights .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-openrights.png");} #sec-8 .card-wrapper.card-esspass .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-esspass.png");} #sec-8 .card-wrapper.card-ferry .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-ferry.png");} #sec-8 .card-wrapper.card-ebsi-vector .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-ebsi-vector.png");} #sec-8 .card-wrapper.card-eorigin .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-eorigin.png");} #sec-8 .card-wrapper.card-n.disabled .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-n-disabled.png"); } #sec-8 .card-wrapper.card-o.disabled .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-o-disabled.png"); } #sec-8 .card-wrapper.card-p.disabled .card-head { background: url("/digital-building-blocks/sites/download/attachments/710119737/c-cover-p-disabled.png"); } #sec-8 .card-wrapper.disabled .card-program { display: none; } #sec-8 .card-wrapper.disabled .flag-container { filter: grayscale(1); } #sec-8 .card-wrapper.disabled .card-foot a { display: none!important; } |
#sec-8 .tabs { margin: 32px 0; } .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;} .case-family_tabs li{ padding: 16px 40px; } .case-family_tabs a { text-decoration: none; color: black; text-align: center; line-height: 1;} .case-family_tabs { display: flex; max-width: fit-content; gap: 16px; 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: 16px 40px; } .case-family_tabs .active a {color: white;} .case-family_tabs > ul > li:hover { background: #ffb3d7; border-radius: 16px; color: white; padding: 16px 40px; width: 275px; height: 72px; } @media screen and ( max-width: 690px) { .case-family_tabs { height: auto; flex-direction: column; } .case-family_tabs li { width: -webkit-fill-available!important; } } @media screen and ( max-width: 768px ) { .case-family_tabs { max-width: 100%; } } @media screen and (min-width: 1117px) { .case-family_tabs li:hover, .case-family_tabs li:active { background : #ffb3d7; border-radius: 16px; color: white; padding: 16px 40px; } } #sec-8 .hide { display: none; visibility: hidden; opacity: 0; } |
.bg-top-curve { background-image: url("/digital-building-blocks/sites/download/attachments/710119737/bg-page-cover.svg"); background-position:right top; background-repeat: no-repeat; background-size: contain; } .col-6.visual-sec { display: flex; flex-direction: column; gap: 24px; align-items: center; } .col-6.visual-sec p { margin-bottom: 0; } #sec-3 .col-6 > p:first-child, #sec-3 .col-6 > p:last-child { display: none; } .col-6.visual-sec > p:nth-child(2) { color: #000; } .col-6.visual-sec > p:nth-child(4) { color: #776E85; text-align: center; font-size: 14px; line-height: 20px; } #sec-3 .col-6.visual-sec img { max-width: 600px; width: 100%; } #sec-3 .col-5 > p:first-child, #sec-3 .col-5 p:last-child { display: none; } #sec-4 .col-6 > p:first-child, #sec-4 .col-6 > p:last-child { display: none; } #sec-4 .col-6.visual-sec img { max-width: 437px; width: 100%; } #sec-4 .col-5 > p:first-child, #sec-4 .col-5 > p:last-child { display: none; } #sec-4 .col-6.visual-sec { gap: 0; } #sec-5 .col-6 > p:first-child, #sec-4 .col-6 > p:last-child { display: none; } #sec-5 .col-6.visual-sec img { max-width: 437px; width: 100%; } #sec-5 .col-5 > p:first-child, #sec-4 .col-5 > p:last-child { display: none; } #sec-5 .col-6.visual-sec { gap: 0; } #sec-6 { background: url("/digital-building-blocks/sites/download/attachments/710119737/bg-section-cover.svg"); background-repeat: no-repeat; background-position: top right; } #sec-6 .card-wrap { display: flex; justify-content: space-between; align-items: center; padding: 40px 64px; background: #FFE6F2; border-radius: 24px; } #sec-6 .card-wrap .r-container img { max-width: 468px; } #sec-6 .card-wrap .l-container h3 { margin-bottom: 40px; } @media screen and ( max-width: 1000px ) { #sec-6 .card-wrap { flex-direction: column; padding: 40px 24px; } } #sec-7 { background: #E6F7FD; } #sec-7 .graph-des { width: 100%; max-width: 1224px; margin-top: 48px; } #sec-8 .b-container { display: flex; flex-direction: column; gap: 8px; flex-wrap: wrap; } #sec-8 .b-container > div { display: flex; align-items: center; gap: 8px; border-radius: 8px; max-width: fit-content; min-width: 257px; padding: 8px; } #sec-8 .b-container div img { max-width: 24px; } #sec-8 .b-container div p { margin-bottom: 0; } #sec-8 .b-container { margin-top: 8px; margin-bottom: 24px; } |