*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
border-collapse: collapse;
border-spacing: 0;
line-height: inherit;
}
.toast {
position: fixed;
bottom: -100px;
right: 20px;
padding: 10px;
border-radius: 5px;
transition: bottom 0.3s ease, opacity 0.3s ease-out;
opacity: 0;
cursor: pointer;
z-index: 1000;
}
.toast-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
box-shadow: 0 0 10px rgba(186, 219, 204, 0.5);
}
.toast-error {
color: #842029;
background-color: #f8d7da;
border-color: #f5c2c7;
box-shadow: 0 0 10px rgba(245, 195, 199, 0.5);
}
.toast.show {
bottom: 30px;
opacity: 1;
}
.container {
padding: 0 24px;
margin: 0 auto;
}
.container-lg {
width: 1200px;
}
.container-md {
width: 850px;
}
.container-sm {
width: 600px;
}
@media (max-width: 1200px) {
.container-lg {
width: 100%;
}
}
@media (max-width: 1000px) {
.container-md {
width: 100%;
}
}
@media (max-width: 600px) {
.container-sm {
width: 100%;
}
}
.nav {
margin-top: 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 42px;
font-family: "Vollkorn", Cambria, Cochin, Georgia, Times, "Times New Roman",
serif;
}
.nav .logo {
width: 80px;
opacity: 0.8;
}
.nav .nav-link {
padding: 6px 0;
font-size: 20px;
font-weight: bold;
text-decoration: none;
opacity: 0.3;
color: #000;
letter-spacing: 2px;
}
.nav .nav-link:hover,
.nav .nav-link.is-active {
cursor: pointer;
opacity: 0.8;
}
.cards-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.card {
display: flex;
flex-direction: row;
width: 100%;
border: 1px solid #e5e7eb;
background: #ffffff;
border-radius: 4px;
text-decoration: none;
color: #000;
}
.card:hover {
background-color: #fffef5;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.card-image {
width: 300px;
aspect-ratio: 6 / 3;
overflow: hidden;
margin: 4px;
border-radius: 4px;
border: 1px solid #f0f2f5;
flex-shrink: 0;
}
@media (max-width: 700px) {
.card {
flex-direction: column;
}
.card-image {
width: auto;
}
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.card-body {
padding: 8px 18px;
padding-right: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.card-title {
margin-top: 0 !important;
font-family: "Vollkorn", sans-serif;
font-size: 1.3em;
letter-spacing: 0.01em;
opacity: 0.8;
}
.card-excerpt {
color: #334155;
}
.card-read-more-container {
margin: 0 !important;
margin-top: auto !important;
padding-bottom: 12px !important;
text-align: right !important;
}
.card-read-more {
margin-top: 12px;
font-size: 0.9em;
color: #475569;
text-decoration: none;
position: relative;
transition: color 0.2s ease;
}
.card-read-more::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: currentColor;
opacity: 0.4;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: scaleX(0.6);
transform-origin: left;
}
.card:hover .card-read-more {
color: #0f172a;
}
.card:hover .card-read-more::after {
opacity: 1;
transform: scaleX(1);
}
@font-face {
font-family: "Vollkorn";
src: url("/fonts/vollkorn-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-v20-latin-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-v20-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-v20-latin-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("/fonts/montserrat-v31-latin-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("/fonts/montserrat-v31-latin-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("/fonts/montserrat-v31-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("/fonts/montserrat-v31-latin-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
.article {
font-size: 19px;
font-family: "Vollkorn";
}
.article h1 {
margin-top: 1em;
font-size: 2em;
color: #181e2c;
}
.article h2 {
margin-top: 1.5em;
font-size: 1.5em;
color: #181e2c;
}
.article h3 {
margin-top: 1em;
font-size: 1.3em;
color: #181e2c;
}
.article p,
.article li {
margin: 18px 0;
line-height: 1.3em;
font-weight: 300;
text-align: justify;
color: #3a3e48;
}
.article blockquote {
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 3px solid #e0e0e0;
color: #555;
}
.article p,
.article ul,
.article ol {
padding: 4px 0;
}
.article ul,
.article ol {
margin-left: 48px;
}
.article li {
margin: 6px 0;
padding-left: 8px;
}
.article strong {
font-weight: bold;
}
.article-hero {
display: block;
width: 100%;
max-height: 400px;
height: auto;
object-fit: cover;
margin-top: 30px;
border-radius: 8px;
}
.article-info {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: right;
margin-top: 18px;
opacity: 0.5;
font-size: 0.9em;
gap: 4px;
font-style: italic;
}