We have a little inner bubble on our timeline .title::before element that totally disappeared when I copied it over to our CMS. I looked over all the class properties and haven't been able to figure out what's overriding the darker background bubble. I gave everything a unique class name in hopes of avoiding a conflict and can't seem to figure out what's going wrong. I copied the codepen over to this post. A link to the page with the issue can be found here -> https://www.harpercollege.edu/dev/whoward-dev-area/timeline.php
* {
font-family: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif;
letter-spacing: -.3px!important;
}
/* Timeline Container */
.timeline {
background: var(--primary-color);
margin: 20px auto;
padding: 20px;
}
/* timeline-card container */
.timeline-card {
position: relative;
max-width: 600px;
font-size: 1em;
}
/* setting padding based on even or odd */
.timeline-card:nth-child(odd) {
padding: 30px 0 30px 30px;
}
.timeline-card:nth-child(even) {
padding: 30px 30px 30px 0;
text-align: right;
}
/* Global ::before */
.timeline-card::before {
content: "";
position: absolute;
width: 50%;
border: dotted #036;
}
/* Setting the border of top, bottom, left */
.timeline-card:nth-child(odd)::before {
left: 0px;
top: -4.5px;
bottom: -4.5px;
border-width: 5px 0 5px 5px;
border-radius: 50px 0 0 50px;
}
/* Setting the border of top, bottom, right */
.timeline-card:nth-child(even)::before {
right: 0;
top: 0;
bottom: 0;
border-width: 5px 5px 5px 0;
border-radius: 0 50px 50px 0;
}
/* Removing the border if it is the first timeline-card */
.timeline-card:first-child::before {
border-top: 0;
border-top-left-radius: 0;
}
/* Removing the border if it is the last timeline-card and it's odd */
.timeline-card:last-child:nth-child(odd)::before {
border-bottom: 0;
border-bottom-left-radius: 0;
}
/* Removing the border if it is the last timeline-card and it's even */
.timeline-card:last-child:nth-child(even)::before {
border-bottom: 0;
border-bottom-right-radius: 0;
}
/* timeline-information about the timeline */
.timeline-info {
display: flex;
flex-direction: column;
background: #fff;
color: #000;
border-radius: 10px;
padding: 20px;
padding-top: 0;
padding-bottom: 0;
}
/* Title of the timeline-card */
.title {
color: #036;
position: relative;
}
/* Timeline dot */
.title::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #6eb43f;
border-radius: 999px;
border: 8px solid #b3d597;
}
/* text right if the timeline-card is even */
.timeline-card:nth-child(even) > .timeline-info > .title {
text-align: right;
}
/* setting dot to the left if the timeline-card is odd */
.timeline-card:nth-child(odd) > .timeline-info > .title::before {
left: -60px;
}
/* setting dot to the right if the timeline-card is odd */
.timeline-card:nth-child(even) > .timeline-info > .title::before {
right: -60px;
}<div class="timeline">
<div class="outer">
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2009</h2>
<h3>Harper Joins Achieving the Dream (ATD)</h3>
<p>Harper Joins Achieving the Dream (ATD) Recognizing not enough students were completing the credentials they had come to earn, Harper joins the Achieving the Dream national network to help develop a student-focused culture that promotes student success. </p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2013</h2>
<h3>Leader College</h3>
<p>Harper earns Achieving the Dream’s Leader College distinction, a national designation awarded to community colleges that commit to improving
student success and closing achievement gaps.</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2015</h2>
<h3>Harper Promise Scholarship Program Launches</h3>
<p>Harper launches the Promise Scholarship providing area high school students with the opportunity to earn up to two years of tuition at Harper if meet attendance, academic and community service requirements. Designed with its high school and business partners, Promise is a collective approach to promoting life skills and behaviors that help students succeed in college, the workplace and beyond</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2016</h2>
<h3>Leah Meyer Austin Award</h3>
<p>Achieving the Dream selects Harper for the prestigious Leah Meyer Austin Award for outstanding achievement in developing an organizational culture designed and dedicated to increasing student success.</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2017</h2>
<h3>Harper Meets 10,604 Goal Earl</h3>
<p>Harper reaches 102% of its 10,604 goal three years early, granting an additional 10,792 degrees and certificates since 2010.</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2018</h2>
<h3>University Center Opens</h3>
<p>Harper teams with four-year university partners to open the University Center and make completing a bachelor’s degree more accessible. DePaul, Northern Illinois, Roosevelt and Southern Illinois universities bring more than 10 programs, faculty and student service staff to Harper’s campus</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2019</h2>
<h3>Addressing Students’ Basic Needs</h3>
<p>Recognizing the connection between student finances and student success, Harper begins to holistically assess student financial wellness and
develop strategic recommendations.</p>
</div>
</div>
</div>
</div>https://www.harpercollege.edu/dev/whoward-dev-area/timeline.php