… with no classes.
/* Because the site root is 62.5% (1rem = 10px) and inherits it,
/* anything without an explicit size renders at 10px — hence the tiny
/* article copy. Wrap any RTE field in to pick this up.
/*******************************************/
.rte {
font-size: 1.6rem;
line-height: 1.7;
color: var(--dark-gray);
}
.rte > *:first-child { margin-top: 0; }
.rte > *:last-child { margin-bottom: 0; }
.rte p {
margin: 0 0 1.6rem;
}
.rte h2 {
margin: 3.2rem 0 1.2rem;
font-size: 1.9rem;
font-weight: 600;
line-height: 1.35;
color: var(--dark-green);
}
.rte h3 {
margin: 2.8rem 0 1rem;
font-size: 1.7rem;
font-weight: 600;
line-height: 1.4;
}
.rte h4 {
margin: 2.4rem 0 0.8rem;
font-size: 1.6rem;
font-weight: 600;
}
.rte ul,
.rte ol {
margin: 0 0 1.6rem;
padding-left: 2.4rem;
}
.rte li {
margin-bottom: 0.6rem;
}
.rte a {
color: var(--dark-purple);
}
.rte a:hover {
text-decoration: none;
}
.rte strong,
.rte b {
font-weight: 600;
}
.rte img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 2.4rem 0;
}
.rte blockquote {
margin: 2.4rem 0;
padding-left: 2.4rem;
border-left: 0.2rem solid var(--normal-green);
font-size: 1.8rem;
font-weight: 300;
font-style: italic;
color: var(--dark-green);
}
.rte hr {
margin: 3.2rem 0;
border: 0;
border-top: 0.1rem solid var(--light-gray);
}
.rte table {
width: 100%;
margin: 2.4rem 0;
border-collapse: collapse;
}
.rte th,
.rte td {
padding: 1.2rem 1.6rem 1.2rem 0;
border-bottom: 0.1rem solid var(--light-gray);
text-align: left;
}
.rte th {
font-weight: 600;
}
/******************************************
/* FREEBIE BANNER
/*******************************************/
.freebie-banner {
background-color: var(--dark-purple);
color: white;
padding: .75rem 0;
width: 100%;
}
.freebie-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.freebie-icon {
height: 5rem;
width: auto;
}
.freebie-text {
font-size: 1.8rem;
margin: 0;
font-weight: 500;
}
.freebie-link {
color: white;
font-weight: 700;
text-decoration: underline;
margin-left: 0.5rem;
transition: color 0.2s ease;
}
.freebie-link:hover {
color: var(--light-purple);
}
/* Mobile adjustments */
@media screen and (max-width: 600px) {
.freebie-container {
flex-direction: column;
text-align: center;
gap: 0.8rem;
}
.freebie-text {
font-size: 1.4rem;
}
}