Big visual and content update

Author: sofvanh

css/base.css

@@ -2,15 +2,6 @@
 
 :root {
   font-family: 'Petrona', serif;
-  --text-primary: #6f4f5b;
-  --text-secondary: #ba8398;
-  --text-dark: #442c35;
-  --link: #ac2254;
-  --link-hover: #e40060;
-  --bg-primary: #ffffff;
-  --bg-secondary: #f2e2e8;
-  --hr-color: #f2e2e8;
-  font-size: 100%;
 }
 
 @keyframes fadeIn {
@@ -24,181 +15,25 @@
 }
 
 body {
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
+  color: var(--color-stone-900);
   animation: fadeIn 2s ease;
 }
 
-h1 {
-  font-size: 4rem;
-  color: var(--text-secondary);
-  font-weight: bold;
-}
-
 h2 {
   font-size: 1.5rem;
-  color: var(--text-dark);
-  font-weight: bold;
-}
-
-h3 {
-  font-size: 1.2rem;
-  color: var(--text-dark);
-  font-weight: bold;
+  color: var(--color-stone-800);
 }
 
 a {
-  color: var(--link);
+  color: var(--color-stone-900);
   text-decoration: underline;
-  text-decoration-thickness: 1.5px;
-  text-decoration-color: var(--link);
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--color-stone-900);
   text-underline-offset: 0.23rem;
-  transition: color 0.3s ease;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 a:hover {
-  color: var(--link-hover);
-  text-decoration-color: var(--link-hover);
-}
-
-nav {
-  width: 100vw;
-  height: 5rem;
-  position: fixed;
-  top: 0;
-  display: flex;
-  flex-direction: row;
-  background-color: var(--bg-secondary);
-}
-
-nav a {
-  text-decoration: none;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  transition: color 0.3s ease;
-}
-
-li {
-  margin: 0.5rem;
-}
-
-hr {
-  border: 0 none;
-  margin: 2rem 0rem;
-  border-top: 1px solid var(--hr-color);
-  border-bottom: 1px solid var(--hr-color);
-  height: 3px;
-  background-color: transparent;
-}
-
-.content {
-  padding-top: 5rem;
-}
-
-.container {
-  margin: 8px 0px;
-  padding: 2px 0px;
-  border-radius: 8px;
-}
-
-.container h3,
-.container p {
-  margin: 0.3rem 0rem;
-}
-
-.container sub {
-  display: block;
-  margin: 0rem 0rem 2rem 0rem;
-  font-size: 1rem;
-  color: var(--text-secondary);
-}
-
-a img {
-  filter: brightness(0) saturate(100%) invert(63%) sepia(11%) saturate(300%) hue-rotate(295deg) brightness(130%) contrast(87%);
-  transition: filter 0.3s ease;
-  margin: 0 0.5rem;
-}
-
-a img:hover {
-  filter: brightness(0) saturate(100%) invert(63%) sepia(11%) saturate(900%) hue-rotate(295deg) brightness(90%) contrast(87%);
-}
-
-.tag-llm {
-  background-color: #E8E6FF;
-  color: #5A4D9C;
-}
-
-.tag-deliberation {
-  background-color: #FFE6E6;
-  color: #9C4D4D;
-}
-
-.tag-group-epistemics {
-  background-color: #FFEDE6;
-  color: #9C614D;
-}
-
-.tag-platform {
-  background-color: #E6F0FF;
-  color: #4D7A9C;
-}
-
-.tag-democracy {
-  background-color: #ffe6ea;
-  color: #99394d;
-}
-
-.tag-future {
-  background-color: #E6FFFA;
-  color: #4D9C8C;
-}
-
-.tag-adaptive {
-  background-color: #ffe6f7;
-  color: #99397b;
-
-}
-
-.tag-worldbuild {
-  background-color: #E6FFF0;
-  color: #4D9C7A;
-}
-
-.tag-award {
-  background-color: #F7F2E0;
-  color: #8C7A40;
-}
-
-.tag-react {
-  background-color: #E6F3FF;
-  color: #4D7A9C;
-}
-
-.tag-next {
-  background-color: #E6E8FF;
-  color: #4D5A9C;
-}
-
-.tag-client {
-  background-color: #E6F0FF;
-  color: #4D7A9C;
-}
-
-.tag-bot {
-  background-color: #F0F0FF;
-  color: #5A5A9C;
-}
-
-.tag-tools {
-  background-color: #FFE6F0;
-  color: #9C4D7A;
-}
-
-.tag-facilitation {
-  background-color: #FFE6E6;
-  color: #9C4D4D;
+  color: var(--color-stone-400);
+  text-decoration-color: var(--color-stone-400);
 }