* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #f6f6f3;
color: #29343a;
line-height: 1.7;
}
.container {
width: 90%;
max-width: 1150px;
margin: auto;
}
/* HEADER */
.site-header {
background: white;
border-bottom: 1px solid #dddddd;
padding: 28px 0;
}
.logo h1 {
margin: 0;
font-size: 32px;
color: #243239;
}
.logo p {
margin-top: 5px;
color: #66737a;
font-size: 15px;
}
nav {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
gap: 25px;
}
nav a {
text-decoration: none;
color: #35444a;
font-weight: bold;
font-size: 14px;
}
nav a:hover {
text-decoration: underline;
}
/* HERO */
.hero {
background: #e7ece6;
padding: 95px 0;
}
.hero .container {
max-width: 1150px;
}
.eyebrow {
font-size: 12px;
font-weight: bold;
letter-spacing: 1.5px;
color: #65766c;
}
.hero h2 {
max-width: 900px;
font-size: 48px;
line-height: 1.2;
margin: 15px 0 25px;
}
.hero p {
max-width: 800px;
font-size: 19px;
color: #56636a;
}
/* FEATURED ARTICLES */
.featured {
background: white;
padding: 85px 0;
}
.featured h2 {
font-size: 34px;
margin-bottom: 35px;
}
.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.card {
background: #f7f7f4;
padding: 30px;
border: 1px solid #e1e1dc;
}
.category {
display: block;
font-size: 11px;
font-weight: bold;
letter-spacing: 1.4px;
color: #718078;
margin-bottom: 15px;
}
.card h3 {
font-size: 23px;
line-height: 1.35;
margin-top: 0;
}
.card h3 a {
color: #29363c;
text-decoration: none;
}
.card h3 a:hover {
text-decoration: underline;
}
.card p {
color: #637078;
}
.read-more {
display: inline-block;
margin-top: 15px;
font-weight: bold;
color: #314c40;
text-decoration: none;
}
.read-more:hover {
text-decoration: underline;
}
.coming-soon {
display: inline-block;
margin-top: 15px;
color: #7b8589;
font-size: 14px;
}
/* CONTENT SECTIONS */
.content-section {
background: white;
padding: 85px 0;
}
.content-section.alternate {
background: #edf0eb;
}
.section-label {
font-size: 12px;
font-weight: bold;
letter-spacing: 1.5px;
color: #708078;
}
.content-section h2 {
max-width: 850px;
font-size: 38px;
line-height: 1.25;
margin: 12px 0 25px;
}
.content-section p {
max-width: 850px;
font-size: 18px;
color: #58666d;
}
/* ABOUT */
.about {
background: #29383e;
color: white;
padding: 85px 0;
}
.about h2 {
font-size: 36px;
}
.about p {
max-width: 850px;
color: #d7dfda;
font-size: 17px;
}
/* FOOTER */
footer {
background: #1d272b;
color: #aeb9ba;
padding: 28px 0;
font-size: 14px;
}
/* MOBILE */
@media (max-width: 850px) {
.article-grid {
grid-template-columns: 1fr;
}
.hero h2 {
font-size: 36px;
}
.content-section h2 {
font-size: 30px;
}
}
@media (max-width: 500px) {
.container {
width: 88%;
}
.hero {
padding: 65px 0;
}
.hero h2 {
font-size: 30px;
}
nav {
gap: 15px;
}
}
/* ARTICLE PAGE */
.logo h1 a {
color: #243239;
text-decoration: none;
}
.article-header {
background: #e7ece6;
padding: 70px 0 75px;
}
.article-container {
max-width: 850px;
}
.breadcrumb {
font-size: 14px;
margin-bottom: 30px;
color: #6d777b;
}
.breadcrumb a {
color: #4f6759;
text-decoration: none;
}
.breadcrumb span {
margin: 0 8px;
}
.article-category {
display: inline-block;
font-size: 12px;
font-weight: bold;
letter-spacing: 1.5px;
color: #687b70;
margin-bottom: 15px;
}
.article-header h1 {
font-size: 52px;
line-height: 1.15;
margin: 10px 0 25px;
color: #26343b;
}
.article-intro {
font-size: 21px;
line-height: 1.6;
color: #56646a;
max-width: 800px;
}
.article-meta {
margin-top: 30px;
font-size: 14px;
color: #6d777b;
}
.article-meta span {
margin-right: 8px;
}
/* ARTICLE CONTENT */
.article-content {
background: #ffffff;
padding: 75px 0;
}
.article-content p {
font-size: 18px;
color: #4f5d64;
margin-bottom: 24px;
}
.article-content h2 {
font-size: 32px;
line-height: 1.3;
color: #29373d;
margin-top: 55px;
margin-bottom: 25px;
}
.article-content ul {
margin: 25px 0;
padding-left: 25px;
}
.article-content li {
margin-bottom: 12px;
font-size: 17px;
color: #4f5d64;
}
.article-content a {
color: #385d4c;
font-weight: bold;
}
.article-content a:hover {
color: #263f34;
}
/* RELATED ARTICLES */
.related-articles {
background: #edf0eb;
padding: 70px 0;
}
.related-articles h2 {
font-size: 30px;
margin-bottom: 30px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.related-card {
background: #ffffff;
padding: 30px;
border: 1px solid #e0e2dd;
}
.related-card span {
font-size: 11px;
font-weight: bold;
letter-spacing: 1.3px;
color: #718078;
}
.related-card h3 {
font-size: 22px;
line-height: 1.4;
}
.related-card p {
color: #737d81;
}
/* ARTICLE MOBILE */
@media (max-width: 850px) {
.article-header h1 {
font-size: 38px;
}
.related-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 500px) {
.article-header {
padding: 55px 0;
}
.article-header h1 {
font-size: 30px;
}
.article-intro {
font-size: 18px;
}
.article-content {
padding: 55px 0;
}
.article-content p {
font-size: 17px;
}
.article-content h2 {
font-size: 27px;
}
}