New styles

assets/styles/app.css

@@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: 400;
     line-height: 1.1;
     color: var(--color-primary);
-    margin: 0 0 10px;
+    margin: 30px 0 10px;
 }
 
 h1 {
@@ -31,27 +31,27 @@ h1.brand {
 }
 
 h1.brand a {
-    color: white;
+    color: var(--brand-color);
 }
 
 h2 {
-    font-size: 3rem;
+    font-size: 2.2rem;
 }
 
 h3 {
-    font-size: 2.5rem;
+    font-size: 2rem;
 }
 
 h4 {
-    font-size: 2rem;
+    font-size: 1.9rem;
 }
 
 h5 {
-    font-size: 1.85rem;
+    font-size: 1.75rem;
 }
 
 h6 {
-    font-size: 1.65rem;
+    font-size: 1.5rem;
 }
 
 p {
@@ -59,26 +59,25 @@ p {
 }
 
 aside h1 {
-    font-size: 2rem;
+    font-size: 1.2rem;
 }
 
 aside h2 {
-    font-size: 1.7rem;
+    font-size: 1.1rem;
 }
 
 aside p.lede {
-    font-size: 1.2rem;
+    font-size: 1rem;
 }
 
 .lede {
     font-family: var(--main-body-font), serif;
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     word-wrap: break-word;
-    margin: 20px 0;
     font-weight: 300;
 }
 
-strong, .strong {
+strong:not(>h2), .strong {
     color: var(--color-primary);
 }
 
@@ -106,8 +105,8 @@ img {
 }
 
 svg.icon {
-    width: 1em;
+    width: 2em;
-    height: 1em;
+    height: 2em;
 }
 
 .divider {
@@ -262,6 +261,10 @@ footer p {
     margin: 0;
 }
 
+footer a {
+    color: var(--color-text-mid);
+}
+
 /* Tags container */
 .tags {
     margin: 10px 0;
@@ -296,6 +299,7 @@ footer p {
 }
 
 
+
 .card.card__horizontal {
     display: flex;
     justify-content: space-between;
@@ -319,6 +323,7 @@ footer p {
 }
 
 .article__image img {
+    margin: 1rem 0;
     width: 100%;
 }
 

assets/styles/card.css

@@ -1,3 +1,40 @@
+.price-list {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.price-list .card {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    border: var(--color-primary) solid 1px;
+    flex-grow: 1;
+    padding: 20px;
+    flex-basis: 300px;
+}
+
+.price-list .card .features {
+    list-style: none; padding: 0;
+}
+
+.price { font-size: 22px; font-weight: bold; color: var(--color-secondary); }
+
+.price-list .card .features li { padding: 8px 0; }
+
+.price-list .card button:last-child {
+    margin-top: auto;
+}
+
+.article-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.article-list .card {
+    margin-bottom: 1rem;
+}
+
 .card-header img {
     max-width: 100%;
     height: auto;

assets/styles/layout.css

@@ -77,6 +77,10 @@ hr {
     margin: 20px 0;
 }
 
+dt {
+    margin-top: 10px;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     nav, aside {
@@ -97,6 +101,10 @@ footer {
     width: 100%;
 }
 
+footer .footer-links {
+    margin: 24px 0;
+}
+
 .search input {
     flex-grow: 1;
 }

assets/styles/theme.css

@@ -3,18 +3,28 @@
 @import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
 
+
 :root {
-    --color-bg: #222;        /* Black background */
+    --color-bg: #1a1a1a;        /* Deep charcoal background */
-    --color-bg-light: #444;    /* Lighter black background */
+    --color-bg-light: #2a2a2a;  /* Slightly lighter charcoal */
-    --color-bg-primary: #2b1a2b;
+    --color-bg-primary: #2e1f2e; /* Muted aubergine for a rich, elegant feel */
-    --color-text: #ffffff;      /* White text */
+    --color-text: #f5f5f5;       /* Soft white for readability */
-    --color-text-mid: #eee;     /* Light gray text */
+    --color-text-mid: #d8d8d8;   /* Warm light gray */
     --color-text-contrast: #000; /* Black text for contrast */
     --color-primary: #a2559c;   /* Plum primary color */
     --color-secondary: #9CAF88; /*  secondary color */
-    --color-border: #333;    /* White border for contrast */
+    --color-border: #3a3a3a;     /* Subtle gray border */
-    --font-family: 'Montserrat'; /* Set the Montserrat font as default */
+    --font-family: 'Montserrat', serif; /* Set the Montserrat font as default */
-    --main-body-font: 'Newsreader'; /* Set the font for the main body */
+    --main-body-font: 'Newsreader', serif; /* Set the font for the main body */
-    --heading-font: 'Josefin Slab'; /* Set the font for headings */
+    --heading-font: 'Josefin Slab', serif; /* Set the font for headings */
-    --brand-font: 'Lobster';
+    --brand-font: 'Lobster', serif; /* A classic, refined branding font */
+    --brand-color: white;
+}
+
+[data-theme="light"] {
+    --color-bg: #f4f1ee;
+    --color-bg-light: #e8e4df;
+    --color-text: #2a2a2a;
+    --color-text-mid: #3a3a3a;   /* Warm light gray */
+    --brand-color: black;
 }