Page History

...

HTML

<style>
  .bg-top-curve {
    background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/609583364/bg-curve-node.svg");
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .whats-in-it-for-you-curve-top {
    background: linear-gradient(
      84.61deg,
      #00b3ef -13.37%,
      #004494 33.79%,
      #004494 65.57%,
      #ff0179 115.49%
    ) !important;
  }

  #main-content .mb-24 {
    margin-bottom: 24px !important;
  }
  #main-content .mb-128 {
    margin-bottom: 128px !important;
  }

  #choose-a-domain > div:nth-child(3) > .cols > div > ul {
    padding-left: 20px;
  }

  #main-content .btn,
  #main-content .btn span {
    font-weight: 600;
  }
  #ebsi-node-network .col-5 {
    padding-right: 0;
  }
  #ebsi-node-network .col-5 .btns,
  #ebsi-node-network .col-5 .btns a.btn {
    margin-bottom: 0;
  }

  #ebsi-node-operator-introduction .btn {
    font-weight: 600;
  }

   #ebsi-node-operator-introduction .col-5 {
box-sizing: content-box;
  } 

  #ebsi-become-node-operator .col-6 {
    max-width: 500px; box-sizing: content-box;
  }
  #ebsi-become-node-operator h2 {
    font-size: 40px;
  }
  #ebsi-node-operator-introduction .outline .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;
  }



  /* CARDS */
  .section-cards-container {    .blue-container{
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 1rem40px;
    marginbackground-leftcolor: 1rem#E6F7FD;
  }
   .sectionblue-
container >div> .sectionh4:first-cards-container_endorsment {
    display: flex;
    flex-direction: row;
    gap: 1rem;of-type{margin-bottom: 20px;}
  .blue-container >div> p:first-of-type{margin-top: 20px;}
  @media screen and (max-width:768px){
    margin.blue-left: 0.2rem;container > p .btn.secondary{align-items: center;}
  }
  .section-cardsblue-container_endorsment div> {
    min-height: 44px;p .btn.secondary >span:first-child{max-width: 80%;}
  }  

  /* CARDS */
  .section-cards-container_alreadyano {
    display: flex;
    flex-direction: column;
    align-itemsgap: 1rem;
    margin-left: center1rem;
  }
   .section-cards-container_alreadyano h3 .card-grid {
    text-align	margin: center1rem;
  	}
  .section-cards-container-alreadyano_contentendorsment {
    display: flex !important;
    gap: flex-direction: row;
    gap: 1rem;
    zmargin-indexleft: 100.2rem;
  }
  .section-cards-container-alreadyano_content >endorsment div {
    maxmin-widthheight: 392px44px; padding:1rem;
  }
  .section-cards-container-alreadyano_content .card-grid-body_alreadyano {
    display: flex;
    flex-direction: column;
    justifyalign-contentitems: space-betweencenter;
  }
  .section-cards-container-_alreadyano_content .card-grid-footer h3 {
    displaytext-align: flexcenter;
  }
  flex-direction: column;.container-alreadyano_content {
    align-itemsdisplay: flex-end !important;
    gap: 10px1rem;
    }

#already-a-node-operator .card-grid h4{font-weight:600;}

  .card-gridz-index: 10;
  }
  .container-alreadyano_content > div {
    minmax-heightwidth: 240px392px; padding:1rem;
  }
  .container-alreadyano_content .card-grid-body {
    paddingdisplay: 24pxflex;
  }
  .card-grid-body > p:first-child {flex-direction: column;
    displayjustify-content: nonespace-between;
  }
  .container-alreadyano_content .card-grid-body > p:last-childfooter {
    display: noneflex;
  }
  .card-grid-header {flex-direction: column;
    displayalign-items: flex-end;
    flex-directiongap: row10px;
  }

#already-a-node-operator  gap: 11px;
    align-items: center;.card-grid h4{font-weight:600;}

  .card-grid {
    marginmin-bottomheight: 16px240px;
  }
  .card-grid-header pbody {
    marginpadding: 024px;
  }

  /* injected */.card-grid-body > p:first-child {
  @media screen and (min-width: 769px) { display: none;
  }
  #main-content .section .card-grid-body > p:last-child {
      paddingdisplay: 100px 108pxnone;
    }
    #main-content .section:last-of-type.card-grid-header {
    display: flex;
    paddingflex-direction: 80px 108pxrow;
    gap: }11px;
    }
align-items: center;
  @media screen and (max-width: 820px) {margin-bottom: 16px;
  }
  .container-alreadyano_contentcard-grid-header p {
      flex-directionmargin: column !important0;
  }

  }
/* injected }*/

  @media screen and (maxmin-width: 890px769px) {
    #main-content .section-cards-container_endorsment {
      flex-directionpadding: column100px !important108px;
    }
    #main-content .section:last-cards-container_endorsment > divof-type {
      widthpadding: -webkit-fill-available !important80px 108px;
      min-height: auto !important;
    }
  }

  @media screen and (max-width: 690px820px) {
    .casecontainer-familyalreadyano_tabscontent {
      height: auto;
      flex-direction: column !important;
    }
  }

  @media screen and .case-family_tabs li(max-width: 890px) {
      width.section-cards-container_endorsment {
      flex-direction: column !important;
    }
    .section-cards-container_endorsment > div {
      width: -webkit-fill-available !important;
      min-height: auto !important;
    }
  }

  @media screen and (minmax-width: 1117px690px) {
    .case-family_tabs li:hover,
    .case-family_tabs li:active {
      backgroundheight: #ffb3d7auto;
      borderflex-radiusdirection: 16pxcolumn;
    }
  color: white;
    .case-family_tabs li {
     padding width: 16px 40px-webkit-fill-available !important;
    }
  }

  @media /* -- restricted link label -- */
  .restricted-accessscreen and (min-width: 1117px) {
    .case-family_tabs li:hover,
    .case-family_tabs li:active {
    display  background: inline-block !important#ffb3d7;
      marginborder-leftradius: 24px16px;
      positioncolor: relativewhite;
      colorpadding: #776e8516px 40px;
    }
  .restricted-access:before {}

  /* -- restricted link label -- */
  .restricted-access {
    display: inline-block !important;
    margin-left: 24px;
    position: relative;
    color: #776e85;
  }
  .restricted-access:before {
    position: absolute;
    top: 0;
    left: -24px;
    content: "";
    width: 20px;
    height: 20px;
    background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/ico-lock-darkpurple.svg")
      right no-repeat;
    background-size: 14px;
  }

  #read-the-requirements .list-numeral li span {
    font-size: 32px;
    margin-left: 10px;
    font-weight: 500;
  }
  #read-the-requirments .list-numeral li::before {
  }
  #read-the-requirements .container > div {
    display: flex;
    flex-direction: column;
  }
  #read-the-requirements {
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 1.5rem;
  }

  #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;
  }
  .remove-unused-list {
    visibility: hidden;
    margin: 0px;
  }

  #pilot-environment {
    border-left: 2px solid #99e1f9;
  }

   #pilot-environment .col-9{
    box-sizing: content-box;    
  } 

  #pilot-environment > div {
    padding-left: 2.5rem;
  }
  #pilot-environment > div:first-child {
    padding-top: 0px;
  }
  #pilot-environment {
    display: flex;
    flex-direction: column;
    margin-left: 0.2rem;
  }

  #get-endorse {
    border-left: 2px solid #99e1f9;
  }
  #get-endorse > div {
    padding-left: 2.5rem;
  }
  #get-endorse > div:first-child {
    padding-top: 0px;
  }
  #get-endorse {
    display: flex;
    flex-direction: column;
    margin-left: 0.2rem;
  }

  .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:first-child {
    width: 203px;
  }
  .case-family_tabs li:last-child {
    width: 375px;
  }
  .case-family_tabs a {
    text-decoration: none;
    color: black;
    text-align: center;
    line-height: 1;
  }
  .case-family_tabs {
    display: flex;
    max-width: 595px;
    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;
    font-weights: 600;
  }
  .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;
  }

  .whats-in-it-for-you-curve-top > p > img {
    position: absolute;
    top: -1px;
    left: -1%;
    width: 102%;
  }
  .whats-in-it-for-you-curve-top {
    z-index: 1;
    margin-top: -1rem;
    position: relative;
  }
  #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%;
  }

  #request-a-node-content > div:first-child {
    padding-left: 2.5rem;
  }
  #request-a-node .list-numeral li span {
    font-size: 32px;
    margin-left: 10px;
    font-weight: 500;
    color: #fff;
  }
  #request-a-node p {
    color: #fff;
  }
  #reaquest-a-node h2 {
    color: #fff;
  }
  #request-a-node .list-numeral li::before {
    color: #fff !important;
  }
  #request-a-node .container > div {
    display: flex;
    flex-direction: column;
  }
  #request-a-node {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  #request-a-node-content > div > p:first-child {
    margin: 0px;
  }
  #request-a-node-content > div > p:nth-child(2) {
    margin-bottom: 2rem;
  }
  #request-a-node-content > div > p:nth-child(3) {
    margin-bottom: 5rem;
  }
  #request-a-node-content .card-grid {
    width: 32%;
    min-width: 145px !important;
    min-height: 290px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  #request-a-node-content .card-grid-footer {
    display: flex;
    justify-content: end;
  }
  #request-a-node-content .justify-content-around {
    margin-top: 3rem;
  }
  #request-a-node-content .card-grid-text p {
    color: #000;
  }
  #request-a-node-content > div > p:nth-child(2) {
    max-width: 770px;
    font-size: 18px;
    line-height: 28px;
  }

  #get-endorse
    > div:nth-child(2)
    > div.cols.section-cards-container_endorsment.pilot-env {
    margin-bottom: 0;
  }
  #get-endorse > div:nth-child(2) {
    padding-bottom: 0;
  }

  #service-disabled_banner {
    background: #ffe6f2;
    padding: 1rem;
  }
  .service-disabled_container {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }
  .service-disabled_content > p:nth-child(2) {
    margin-bottom: 4px;
  }
  .service-disabled_img > p {
    margin: 0px;
  }
    .btn {
    align-items: center;
  }


   .blue-container{
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    background-color: #E6F7FD;
  }
  .blue-container >div> .h4:first-of-type{margin-bottom: 20px;}
  .blue-container >div> p:first-of-type{margin-top: 20px;}
  @media screen and (max-width:768px){
    .blue-container > p .btn.secondary{align-items: center;}
    .blue-container > p .btn.secondary >span:first-child{max-width: 80%;}
  } 
</style>

HTML

<script>
$(document).ready(function() {
    $(".expanded").hide();
	$(".pre-pro").hide();

	$("#pilot-env").on("click", function(e) {
		e.stopPropagation();
		$("#get-endorse > div:nth-child(2)").css('padding-bottom', '0');
	    $("#pre-pro").removeClass("active");
		$("#pilot-env").addClass("active");
	   	$(".pre-pro").hide();
		$(".pilot-env").show();
		e.preventDefault();
	})

	$("#pre-pro").on("click", function(e) {
		e.stopPropagation();
		$("#get-endorse > div:nth-child(2)").css('padding-bottom', '16px');
	    $("#pilot-env").removeClass("active");
		$("#pre-pro").addClass("active");    
		$(".pilot-env").hide();
		$(".pre-pro").show();
		e.preventDefault();
	})

    $(".expanded a, .collapsed a").click(function(e) {
        let $container = $(this).parents("div");
        e.preventDefault();
        $container.children(".expanded, .collapsed").toggle();
    });
});

</script>

Page tree

Versions Compared

Old Version 206

New Version 207

Key