link styles #1

app/components/ContentBox/box.css

@@ -1,33 +1,43 @@
 .main-container-box-table {
   display: flex;
   justify-content: space-between;
-  margin-top: var(--spacing-80, 80px);
+  margin-top: var(--spacing-80);
 }
 
 .content-box-table-button {
-  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
+  padding: var(--spacing-8) var(--spacing-24);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .eclipse-team-bottom {
   /* position: relative; */
-  top: var(--spacing-40, 40px);
-  left: var(--spacing-56, 56ax);
+  top: var(--spacing-40);
+  left: var(--spacing-56);
 }
 
 .eclipse-individual-top {
   /* position: relative; */
-  bottom: var(--spacing-80, 80px);
-  right: var(--spacing-40, 40px);
+  bottom: var(--spacing-80);
+  right: var(--spacing-40);
 }
 
 .content-box-table {
-  padding: var(--spacing-16, 16px);
+  padding: var(--spacing-16);
 }
 
 .teal-background {
-  background-color: var(--colors-teal-600, #1a817c);
+  background-color: var(--colors-teal-600);
 }
 
 .content-box-description {
-  margin: var(--spacing-80, 80px);
+  margin: var(--spacing-80);
+}
+
+.content-box-button:hover,
+.content-box-table-button:hover {
+  color: var(--colors-teal-800);
+  border-color: var(--colors-teal-200);
+  text-decoration: none;
 }

app/components/ContentBox/index.tsx

@@ -39,12 +39,12 @@ export const ContentBoxMain = () => (
       </>
     }
     action="/9OGZ"
-    actionTitle={(
+    actionTitle={
       <>
         Start here
-        <ArrowRight className="img-2" />
+        <ArrowRight />
       </>
-    )}
+    }
   >
     <img
       loading="lazy"

app/components/Grid/grid.css

@@ -12,7 +12,13 @@
   cursor: pointer;
   text-align: left;
   padding: 32.5px 32px;
+  text-decoration: none;
 }
+
+.grid-item:hover {
+  outline: 1px solid var(--colors-teal-200);
+}
+
 .grid-item div {
   padding: 8px;
 }
@@ -22,4 +28,4 @@
   gap: 50px 50px;
   grid-template-columns: auto auto auto;
   justify-content: space-around;
-}
+}

app/components/Table/listTable.css

@@ -3,23 +3,23 @@
 .table-entry {
   letter-spacing: -0.01em;
   font-weight: 600;
-  color: var(--colors-teal-500, #1d9089);
+  color: var(--colors-teal-500);
   text-align: left;
   display: block;
   text-decoration: none;
   padding: 32px;
-  border-bottom: 1px solid var(--colors-teal-200, #a6d9d7);
+  border-bottom: 1px solid var(--colors-teal-200);
 }
 .table-entry:hover {
-  background-color: var(--colors-teal-50, #edfaf9);
+  background-color: var(--colors-teal-50);
 }
 .table-list {
   max-width: 47.43vw;
   width: 100%;
   position: relative;
   text-align: left;
-  color: var(--colors-teal-500, #1d9089);
+  color: var(--colors-teal-500);
   border-radius: 6px;
-  border: 1px solid var(--colors-teal-200, #a6d9d7);
+  border: 1px solid var(--colors-teal-200);
   box-sizing: border-box;
 }

app/newRoot.css

@@ -206,7 +206,11 @@ hr {
 
 a {
   color: inherit; /* disable link specific colours */
-  text-decoration: inherit; /* no underline */
+  text-decoration-color: color-mix(in srgb, currentColor, white);
+}
+
+a:not(:hover, :focus-visible) {
+  text-decoration: none;
 }
 
 .page-body {
@@ -218,6 +222,13 @@ a {
   height: 16px;
 }
 
+.main-container-box-table {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--spacing-80, 80px);
+}
+
+
 .iconsMagnifyingGlass {
   width: 16px;
   position: relative;