Divi custom coded Loop Layout Template - CSS

de-custom-loop-template.css

.grid-col,
.grid-col > div,
.grid-col > div > article {
  height:100%;
  margin-bottom: 0;;
}
.card {
  width:100%; /* Ensure the card is 100% width of the column */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /* Add a shadow to make it stand out */
  border-radius:10px; /* Subtle rounding on the corners */
  overflow:hidden; /* Hide the content that overflows the card */
  height: 100%; /* Ensure the card is 100% height of the column */
  display:flex; /* Flexbox makes the container flexible */
  flex-direction:column; /* Flex direction column makes the children stack vertically */
  justify-content:flex-start; /* Align the children to the top of the container */
}

/* .event-schedule is the container for our date and times */
.event-schedule {
  display: flex; /* Flexbox makes the container flexible */
  flex-direction: row; /* Flex direction row makes the children stack horizontally */
  box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px; /* Add a shadow to make it stand out */
  border-radius: 10px; /* Subtle rounding on the corners */
  position: relative; /* Position relative allows us to position the date and time on top of the card */
  z-index: 2; /* Z-index allows us to position the date and time on top of the featured image */
  background: white; /* White background */
  padding: 8px; /* Padding to give the date and time some space */
  max-width: 90%; /* Max width to keep the date and time from taking up the whole card */
  margin: -20px auto 10px; /* We're adding some negative top margin to get the date and time to overlap the featured image */
  font-weight: bold; /* Bold font weight */
  justify-content: center; /* Center the date and time */
}
/* Target the date and time */
.event-schedule > div {
  font-family: sans-serif;
  width: auto;
  text-align: center;
}
/* Target the date */
.event-date {
  border-right: 1px solid #dedede; /* Add a seperator between the date and time */
  padding-right: 10px;
}
/* Target the time */
.event-time {
  padding-left: 10px;
}
/* Target the container of the title and address */
.event-details {
  width: 90%;
  margin: 0 auto 0 auto;
  color: #273c75;
  flex-grow: 1;
}
.event-details h2 {
  font-family:sans-serif;
}
.event-address {
  font-family:sans-serif;
}

/* Setup the container for the CTA buttons */
.event-cta-row {
  display:flex; /* Flexbox makes the container flexible */
  margin-top:10px; /* Add some top margin */
}
/* Style the CTA buttons */
.event-cta-row > a {
  transition: opacity 0.3s ease-in-out; /* Add a transition to the opacity */
  flex-grow: 1; /* Allow the buttons to grow to fill the container */
}
.event-cta-row > a:hover {
  opacity: 0.8; /* Fade the button on hover */
}
.event-details-cta {
  width:50%; /* Make the button 50% of the container - It will still grow if there is only 1 button */
  background: #8360c3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding:10px; /* Add some padding */
  color:white; /* White text */
  text-align:center; /* Center the text */
  font-family:sans-serif; /* Sans-serif font */
  text-decoration:none; /* Remove the underline */
  font-weight:bold; /* Bold font weight */
}
.event-tickets-cta {
  width:50%; /* Make the button 50% of the container - It will still grow if there is only 1 button */
  background: #ad5389;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding:10px; /* Add some padding */
  color:white; /* White text */
  text-align:center; /* Center the text */
  font-family:sans-serif; /* Sans-serif font */
  text-decoration:none; /* Remove the underline */
  font-weight:bold; /* Bold font weight */
}

/* Style the Title above the icons */
.event-icons-title {
  text-align: center; /* Center the title */
  font-weight: bold; /* Bold font weight */
  margin-top: 20px; /* Add some top margin */
}
/* Style the icon container */
.event-icons {
  display:flex; /* Flexbox makes the container flexible */
  flex-direction:row; /* Flex direction row makes the children stack horizontally */
  justify-content:center; /* Center the icons */
  gap:10px; /* Add some space between the icons */
  margin-top:10px; /* Add some top margin */
}
.event-icon {
  position: relative; /* Position relative allows us to position the tooltip */
}
/* Style the tooltip */
.event-icon:before {
  content:attr(data-tooltip); /* Add the tooltip text */
  position: absolute; /* Position absolute allows us to position the tooltip */
  background:rgb(39 60 117 / 100%); /* Add a background color */
  top:-35px; /* Position the tooltip above the icon */
  left:50%; /* Position the tooltip in the center of the icon */
  transform:translateX(-50%); /* Translate the tooltip to the left by 50% of its own width */
  width:auto; /* Make the tooltip width auto so it can grow with the text */
  white-space: nowrap; /* Prevent the tooltip from wrapping */
  color:white; /* White text */
  padding:5px; /* Add some padding */
  border-radius: 10px; /* Add some rounding to the corners */
  transition: all 0.3s ease-in-out; /* Add a transition to the opacity */
  opacity: 0; /* Hide the tooltip by default */
}
.event-icon:hover:before {
  opacity:1; /* Show the tooltip on hover */
}
/* Set the width and height of the icon */
.event-icon > img {
  width:20px;
  height:20px;
}