--color-primary-yellow
#ff9900
--color-primary-purple
#6D46DD
--color-primary-blue
#0065F2
--color-secondary-light-purple
#F3E9FF
--color-secondary-pale-blue
#e5f0fe
--color-secondary-warm-grey
#F6F1EE
--color-neutrals-black
#1f1f1f
--color-neutrals-grey
#808080
--color-neutrals-light-grey
#dadada
--color-neutrals-white
#ffffff
--color-semantics-green
#60D372
--color-semantics-green-dark
#28C240
--color-semantics-red
#e43939
--color-border-grey
#E7E7E7
--color-headings-grey
#333333
--color-body-grey
#666666
--color-smoky-onyx
#383838
Inter-Black-900 [ font-weight: 900; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-SemiBold-600 [ font-weight: 600; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-Bold-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-Bold-700 [ font-weight: 700; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-Regular-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-Medium-500 [ font-weight: 500; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-Light-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Inter-ExtraLight-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
<h1>
Innovate Boldly.
h1 {
font-size: 42px;
letter-spacing: -1px;
line-height: 120%;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<h1 class="--color-neutrals-white">
h1.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<h2>
Transform Your Ideas into Reality
h2 {
font-size: 32px;
letter-spacing: -0.4px;
line-height: 130%;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<h2 class="--color-primary-purple">
h2.--color-primary-purple {
color: #6D46DD; /* --color-primary-purple */
}
<h2 class="--color-neutrals-white">
h2.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<h2 class="two">
Transform Your Ideas into Reality
h2.two {
font-size: 30px;
letter-spacing: -0.6px;
line-height: normal;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<h3>
Build Smarter, Faster, and Better
h3 {
font-size: 24px;
letter-spacing: -0.1px;
line-height: 130%;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<h3 class="--color-neutrals-white">
h3.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<h3 class="--color-primary-yellow">
h3.--color-primary-yellow {
color: #ff9900; /* --color-primary-yellow */
}
<h4>
Tools Tailored for Every Developer
h4 {
font-size: 21px;
letter-spacing: -0.1px;
line-height: 130%;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<h4 class="--color-primary-purple">
h4.--color-primary-purple {
color: #6D46DD; /* --color-primary-purple */
}
<h4 class="--color-neutrals-white">
h4.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<h5>
Reliable Solutions Backed by Experience
h5 {
font-size: 18px;
letter-spacing: -0.1px;
line-height: 130%;
font-family: Inter-Bold-400;
color: #1f1f1f; /* --color-neutrals-black */
margin: 0px;
padding: 0px;
}
<h5 class="--color-neutrals-white">
h5.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<h6>
Powered by Simplicity & Precision
h6 {
font-size: 15px;
letter-spacing: 5px;
line-height: 150%;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
text-transform: uppercase;
margin: 0px;
padding: 0px;
}
<h6 class="--color-neutrals-white">
h6.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<h6 class="--color-primary-yellow">
h6.--color-primary-yellow {
color: #ff9900; /* --color-primary-yellow */
}
<p>
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p {
font-size: 17px;
letter-spacing: 0px;
line-height: 150%;
font-family: Inter-Regular-400;
color: #808080; /* --color-neutrals-grey */
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
<p class="--color-neutrals-white">
p.--color-neutrals-white {
color: #ffffff; /* --color-neutrals-white */
}
<p class="--color-primary-yellow">
p.--color-primary-yellow {
color: #ff9900; /* --color-primary-yellow */
}
<p class="body-small-text">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.body-small-text {
font-size: 14px;
letter-spacing: 0px;
line-height: 150%;
font-family: Inter-Regular-400;
color: #808080; /* --color-neutrals-grey */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<p class="body-small-text --color-body-grey">
p.body-small-text.--color-body-grey {
color: #666666; /* --color-body-grey */
}
<p class="cards-red-green-wrapper-text">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.cards-red-green-wrapper-text {
font-size: 11px;
letter-spacing: 1px;
line-height: 20px;
font-family: Inter-SemiBold-600;
color: #ffffff; /* --color-neutrals-white */
text-transform: uppercase;
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<p class="cards-category-text">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.cards-category-text {
font-size: 10px;
letter-spacing: 2px;
line-height: 150%;
font-family: Inter-SemiBold-600;
color: #ff9900; /* --color-primary-yellow */
text-transform: uppercase;
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<p class="user-initials">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.user-initials {
font-size: 16px;
letter-spacing: 0.1px;
line-height: 24px;
font-family: Inter-Medium-500;
color: #ff9900; /* --color-primary-yellow */
margin: 0px;
padding: 0px;
}
<p class="user-initials --color-neutrals-black">
p.user-initials.--color-neutrals-black {
color: #1f1f1f; /* --color-neutrals-black */
}
<p class="course-level-title">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.course-level-title {
font-size: 13px;
letter-spacing: 0px;
line-height: 13px;
font-family: Inter-Bold-700;
color: #ffffff; /* --color-neutrals-white */
margin: 0px;
padding: 0px;
}
<p class="course-level-age">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.course-level-age {
font-size: 15px;
letter-spacing: 0px;
line-height: 15px;
font-family: Inter-Bold-700;
color: #ffffff; /* --color-neutrals-white */
margin: 0px;
padding: 0px;
}
<p class="cards-price-line-through">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.cards-price-line-through {
font-size: 15px;
letter-spacing: -0.1px;
line-height: 130%;
font-family: Inter-Regular-400;
color: #808080; /* --color-neutrals-grey */
text-decoration: line-through;
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<p class="cards-price">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.cards-price {
font-size: 15px;
letter-spacing: -0.1px;
line-height: 130%;
font-family: Inter-Bold-700;
color: #ff9900; /* --color-primary-yellow */
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
<p class="tagline">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.tagline {
font-size: 15px;
letter-spacing: 0.1px;
line-height: 24px;
font-family: Inter-Bold-700;
color: #ffffff; /* --color-neutrals-white */
word-wrap: break-word;
text-align: center;
margin: 0px;
padding: 0px;
}
<p class="tagline --color-neutrals-black">
p.tagline.--color-neutrals-black {
color: #1f1f1f; /* --color-neutrals-black */
}
<p class="long-headline">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.long-headline {
font-size: 64px;
letter-spacing: -2px;
line-height: 100%;
font-family: Inter-SemiBold-600;
color: #ffffff; /* --color-neutrals-white */
word-wrap: break-word;
text-align: center;
margin: 0px;
padding: 0px;
}
<p class="circle-text">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.circle-text {
font-size: 13px;
letter-spacing: 0px;
line-height: 150%;
font-family: Inter-Regular-400;
color: #ff9900; /* --color-primary-yellow */
margin: 0px;
padding: 0px;
text-align: left;
}
<p class="circle-text --color-neutrals-grey">
p.circle-text.--color-neutrals-grey {
color: #808080; /* --color-neutrals-grey */
}
<p class="footer-heading">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.footer-heading {
font-size: 14px;
letter-spacing: 0px;
line-height: 20px;
font-family: Inter-Medium-500;
color: #1f1f1f; /* --color-neutrals-black */
margin: 0px;
padding: 0px;
text-align: left;
}
<p class="currency">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.currency {
font-size: 12px;
letter-spacing: -0.24px;
line-height: normal;
font-family: Inter-Bold-700;
color: #1f1f1f; /* --color-neutrals-black */
margin: 0px;
padding: 0px;
text-align: left;
}
<p class="vouchers-minimum-spend-cart">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.vouchers-minimum-spend-cart {
font-size: 16px;
letter-spacing: 1px;
line-height: normal;
font-family: Inter-Regular-400;
color: #ffffff; /* --color-neutrals-white */
margin: 0px;
padding: 0px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
<p class="vouchers-complimentary-offer-cart">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.vouchers-complimentary-offer-cart {
font-size: 40px;
letter-spacing: -1px;
line-height: 40px;
font-family: Inter-Black-900;
color: #ffffff; /* --color-neutrals-white */
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
<p class="vouchers-expires-cart">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.vouchers-expires-cart {
font-size: 16px;
letter-spacing: 0px;
line-height: normal;
font-family: Inter-Bold-700;
color: #ffffff; /* --color-neutrals-white */
margin: 0px;
padding: 0px;
}
<strong>
strong {
font-size: 17px;
letter-spacing: 0px;
line-height: 150%;
font-family: Inter-Regular-400;
color: #808080; /* --color-neutrals-grey */
margin: 0px;
padding: 0px;
}
List Sets
@mixin website-list-default-list {
ul.data-tinymce-ul-ol-block, ol.data-tinymce-ul-ol-block {
font-size: 17px;
line-height: 26px;
letter-spacing: 0px;
font-family: Inter-Regular-400;
color: #808080; /* --color-neutrals-grey */
}
ul.data-tinymce-ul-ol-block {
list-style-type: none;
}
ul.data-tinymce-ul-ol-block li[data-tinymce-root-block] {
position: relative;
}
ul.data-tinymce-ul-ol-block li[data-tinymce-root-block]::before {
content: "•";
font-size: 17px;
color: #ff9900; /* --color-primary-yellow */
left: -15px;
top: -4px;
position: absolute;
}
ol.data-tinymce-ul-ol-block {
counter-reset: list-counter;
list-style-type: none;
}
ol.data-tinymce-ul-ol-block li[data-tinymce-root-block] {
counter-increment: list-counter;
position: relative;
}
ol.data-tinymce-ul-ol-block li[data-tinymce-root-block]::before {
content: counter(list-counter);
color: #ff9900; /* --color-primary-yellow */
font-size: 17px;
left: -15px;
top: 2px;
position: absolute;
}
ul.data-tinymce-ul-ol-block ul, ol.data-tinymce-ul-ol-block ol {
font-size: 17px;
line-height: 26px;
letter-spacing: 0px;
font-family: Inter-Regular-400;
color: #808080; /* --color-neutrals-grey */
}
}
<div class="animate-on-scroll">
HTML
<div class="animate-on-scroll" data-animate="fade-up" data-delay="0.0s"></div>
.animate-on-scroll {
opacity: 0;
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
transition-delay: 0s;
}
<div data-animate="fade-up">
[data-animate="fade-up"] {
transform: translateY(40px);
}
<div data-animate="fade-down">
[data-animate="fade-down"] {
transform: translateY(-20px);
}
<div data-animate="fade-left">
[data-animate="fade-left"] {
transform: translateX(-20px);
}
<div data-animate="fade-right">
[data-animate="fade-right"] {
transform: translateX(20px);
}
<div data-animate="zoom-in">
[data-animate="zoom-in"] {
transform: scale(0.8);
}
<div data-animate="zoom-out">
[data-animate="zoom-out"] {
transform: scale(1.2);
}
<div data-animate="rotate">
[data-animate="rotate"] {
transform: rotate(-5deg);
}
/* When element enters viewport */
<div class="animate-on-scroll in-view">
.animate-on-scroll.in-view {
opacity: 1;
transform: none;
}
<div>
:root {
--button--transition-duration: 300ms;
--button--transition-timing-function: ease-in-out;
}
@mixin website-containers {
<a class="course-application--button--large">
a.course-application--button--large {
position: relative;
height: 70px;
width: 122px;
box-sizing: border-box;
padding: 12px 20px;
border-radius: 6px;
display: inline-flex;
flex-direction: row;
gap: 10px;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-align: center;
font-size: 17px;
font-family: Inter-Bold-700;
font-weight: 700;
line-height: 23.8px;
letter-spacing: 0;
transition-property: background-color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
}
<a class="course-application--button--default">
<a class="course-application--button--default--no-hover">
a.course-application--button--default, a.course-application--button--default--no-hover {
position: relative;
box-sizing: border-box;
padding: 15px 25px;
border-radius: 6px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
font-size: 15px;
font-family: Inter-Bold-700;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.10px;
word-wrap: break-word;
transition-property: background-color, border, color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
text-decoration: none;
}
<a class="course-application--button--default">
a.course-application--button--default {
&:hover {
background-color: #6D46DD; /* --color-primary-purple */
}
}
<a class="course-application--button--default--purple">
ButtonHTML
<a class="course-application--button--default course-application--button--default--purple" title="Button" href="#">
Button
</a>
a.course-application--button--default--purple {
background-color: #6D46DD; /* --color-primary-purple */
color: #ffffff; /* --color-neutrals-white */
transition-property: background-color, border, color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
&:hover {
background-color: #ff9900; /* --color-primary-yellow */
}
}
<a class="course-application--button--primary--no-hover">
ButtonHTML
<a class="course-application--button--default--no-hover course-application--button--primary--no-hover" title="Button" href="#">
Button
</a>
a.course-application--button--primary--no-hover {
background-color: #ff9900; /* --color-primary-yellow */
color: #ffffff; /* --color-neutrals-white */
border: 0px solid transparent;
text-decoration: none;
}
<a class="course-application--button--primary">
ButtonHTML
<a class="course-application--button--default course-application--button--primary" title="Button" href="#">
Button
</a>
a.course-application--button--primary {
background-color: #ff9900; /* --color-primary-yellow */
color: #ffffff; /* --color-neutrals-white */
border: 0px solid transparent;
text-decoration: none;
transition-property: background-color, border, color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
&:hover {
background-color: #6D46DD; /* --color-primary-purple */
}
}
<a class="course-application--button--primary--to-ghost">
ButtonHTML
<a class="course-application--button--default course-application--button--primary--to-ghost" title="Button" href="#">
Button
</a>
a.course-application--button--primary--to-ghost {
font-family: Inter-Medium-500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.1px;
font-weight: 500;
background-color: #ff9900; /* --color-primary-yellow */
color: #ffffff; /* --color-neutrals-white */
border: 1px solid transparent;
transition-property: background-color, border, color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
&:hover {
background-color: transparent !important;
border: #ff9900; /* --color-primary-yellow */
}
}
<a class="course-application--button--secondary">
ButtonHTML
<a class="course-application--button--default course-application--button--secondary" title="Button" href="#">
Button
</a>
a.course-application--button--secondary {
background-color: transparent;
color: #6D46DD; /* --color-primary-purple */
border: #6D46DD; /* --color-primary-purple */
text-decoration: none;
transition-property: background-color, border, color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
&:hover {
background-color: transparent !important;
color: #ff9900; /* --color-primary-yellow */
border: #ff9900; /* --color-primary-yellow */
}
}
<a class="course-application--button--secondary--orange--tags">
ButtonHTML
<a class="course-application--button--default course-application--button--secondary--orange--tags" title="Button" href="#">
Button
</a>
a.course-application--button--secondary--orange--tags {
background-color: transparent;
color: #ff9900; /* --color-primary-yellow */
border: #ff9900; /* --color-primary-yellow */
padding: 6px 12px 6px 12px;
font-family: Inter-SemiBold-600;
font-size: 11px;
line-height: 20px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
letter-spacing: 1px;
transition-property: background-color, border, color;
transition-duration: var(--button--transition-duration);
transition-timing-function: var(--button--transition-timing-function);
&:hover {
background-color: transparent !important;
color: #6D46DD; /* --color-primary-purple */
border: #6D46DD; /* --color-primary-purple */
}
}
<a class="menu-link-item-lesson-plans">
ButtonHTML
<a class="menu-link-item-lesson-plans" title="Button" href="#">
Button
</a>
a.menu-link-item-lesson-plans {
display: block;
box-sizing: border-box;
transition: all 0.5s ease;
font-size: 27px;
color: #ff9900; /* --color-primary-yellow */
&:hover {
color: #6D46DD; /* --color-primary-purple */
}
}
<a class="menu-link-item-shopping-cart-icon">
a.menu-link-item-shopping-cart-icon {
display: block;
height: 27px;
width: 27px;
background-image: url('/neal_cms/neal_cms_includes/css/css/courseApplication/shopping-cart.svg');
background-repeat: no-repeat;
transition: all 0.5s ease;
&:hover {
background-image: url('/neal_cms/neal_cms_includes/css/css/courseApplication/shopping-cart-hover.svg');
}
}
<a class="menu-link-item-shopping-question-mark-icon">
a.menu-link-item-shopping-question-mark-icon {
display: block;
height: 27px;
width: 27px;
background-image: url('/neal_cms/neal_cms_includes/css/css/courseApplication/question-mark.svg');
background-repeat: no-repeat;
transition: all 0.5s ease;
&:hover {
background-image: url('/neal_cms/neal_cms_includes/css/css/courseApplication/question-mark-hover.svg');
}
}
<a class="menu-link-item">
Menu LinkHTML
<a class="menu-link-item" title="Menu Link" href="#">
Menu Link
</a>
a.menu-link-item {
color: #1f1f1f; /* --color-neutrals-black */
text-align: center;
font-family: Inter-Bold-700;
font-size: 15px;
letter-spacing: 0.1px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.5s ease;
text-decoration: none;
&:hover {
color: #6D46DD; /* --color-primary-purple */
}
}
<a class="footer-links">
Footer LinksHTML
<a class="footer-links" title="Footer Links" href="#">
Footer Links
</a>
a.footer-links {
color: #808080; /* --color-neutrals-grey */
text-align: left;
font-family: Inter-Regular-400;
font-size: 13px;
line-height: 150%;
font-weight: 400;
position: relative;
text-decoration: none;
transition: color 0.3s ease, letter-spacing 0.3s ease;
letter-spacing: normal;
&:hover {
color: #6D46DD; /* --color-primary-purple */
letter-spacing: 0.3px;
}
&::after {
content: '';
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
background-color: #6D46DD; /* --color-primary-purple */
transition: width 0.3s ease, left 0.3s ease;
}
&:hover::after {
width: 100%;
left: 0;
}
}
<a class="account-settings-links">
Account LinksHTML
<a class="account-settings-links" title="Account Links" href="#">
Account Links
</a>
a.account-settings-links {
color: #1f1f1f; /* --color-neutrals-black */
text-align: left;
font-family: Inter-Medium-500;
font-size: 14px;
line-height: 20px;
font-weight: 500;
position: relative;
transition: color 0.5s ease;
&:hover {
color: #6D46DD; /* --color-primary-purple */
}
}
}
