1 files changed, 72 insertions, 50 deletions

diff --git a/themes/danixme/assets/css/main.css b/themes/danixme/assets/css/main.css
index ec1c271..a4eebe2 100644
--- a/themes/danixme/assets/css/main.css
+++ b/themes/danixme/assets/css/main.css
@@ -820,23 +820,20 @@ section {
 }
 
 .service-card {
-  border: 1px solid var(--border);
-  background: var(--bg2);
+  background: rgba(16,30,45,0.55);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(168,85,247,0.12);
+  border-left: 2px solid var(--muted);
   padding: 1.75rem;
   position: relative;
   overflow: hidden;
-  transition: border-color 0.3s, background 0.2s;
-}
-.service-card::before {
-  content: '';
-  position: absolute;
-  top: 0; inset-inline: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s;
 }
+.service-card::before { display: none; }
 .service-card:hover {
-  border-color: rgba(168,85,247,0.28);
-  background: var(--surface);
+  border-left-color: var(--accent);
+  box-shadow: 0 0 22px rgba(168,85,247,0.10);
+  background: rgba(16,30,45,0.75);
 }
 
 .service-icon {
@@ -854,12 +851,18 @@ section {
   margin-bottom: 0.2rem;
 }
 .service-subtitle {
-  font-size: 0.76rem;
-  color: var(--accent);
-  letter-spacing: 0.06em;
-  margin-bottom: 0.9rem;
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  color: var(--muted);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin-bottom: 0.6rem;
+  transition: color 0.25s;
 }
+.service-card:hover .service-subtitle { color: var(--text-dim); }
 .service-desc {
+  font-family: var(--font-body);
   font-size: 0.88rem;
   color: var(--text-dim);
   line-height: 1.85;
@@ -965,11 +968,22 @@ section {
 }
 
 .skill-card {
-  background: var(--bg2);
+  background: rgba(16,30,45,0.55);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(168,85,247,0.12);
+  border-left: 2px solid var(--muted);
   padding: 1.5rem;
-  transition: background 0.2s;
+  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s;
+}
+.skill-card:hover {
+  border-left-color: var(--accent);
+  box-shadow: 0 0 22px rgba(168,85,247,0.10);
+  background: rgba(16,30,45,0.75);
+}
+.skill-card.card--green:hover {
+  border-left-color: var(--accent2);
+  box-shadow: 0 0 22px rgba(0,255,136,0.07);
 }
-.skill-card:hover { background: var(--surface); }
 
 .skill-head {
   display: flex;
@@ -995,20 +1009,22 @@ section {
   color: var(--text);
   letter-spacing: 0.01em;
 }
-.skill-track {
-  height: 2px;
-  background: var(--border);
-  margin-top: 0.75rem;
-  overflow: hidden;
+.skill-level {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  color: var(--text-dim);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border: 1px solid var(--muted);
+  padding: 0.15rem 0.45rem;
+  margin-top: 0.6rem;
+  margin-bottom: 0.2rem;
 }
-.skill-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent), var(--accent2));
-  transform-origin: left;
-  transform: scaleX(0);
-  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
+.skill-card.card--green .skill-level {
+  color: var(--accent2);
+  border-color: var(--accent2);
 }
-.skill-fill.go { transform: scaleX(var(--w, 1)); }
 
 .skill-tags {
   display: flex;
@@ -1039,12 +1055,14 @@ section {
 }
 
 .cert-card {
-  border: 1px solid var(--border);
-  background: var(--bg2);
+  background: rgba(16,30,45,0.55);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(168,85,247,0.12);
+  border-left: 2px solid var(--muted);
   padding: 1.5rem;
   position: relative;
   overflow: hidden;
-  transition: border-color 0.3s, box-shadow 0.3s;
+  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s;
 }
 
 .cert-date {
@@ -1091,16 +1109,11 @@ section {
   .cert-card { padding: 2rem; }
 }
 
-.cert-card::before {
-  content: '';
-  position: absolute;
-  top: 0; inset-inline: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--accent), var(--accent2));
-}
+.cert-card::before { display: none; }
 .cert-card:hover {
-  border-color: rgba(168,85,247,0.28);
-  box-shadow: 0 0 40px rgba(168,85,247,0.04);
+  border-left-color: var(--accent);
+  box-shadow: 0 0 22px rgba(168,85,247,0.10);
+  background: rgba(16,30,45,0.75);
 }
 .cert-card.placeholder {
   opacity: 0.38;
@@ -1149,6 +1162,7 @@ section {
   margin-bottom: 0.9rem;
 }
 .cert-desc {
+  font-family: var(--font-body);
   font-size: 0.88rem;
   color: var(--text-dim);
   line-height: 1.85;
@@ -1284,17 +1298,21 @@ section {
 }
 
 .project-card {
-  background: var(--bg2);
-  border: 1px solid var(--border);
+  background: rgba(16,30,45,0.55);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(168,85,247,0.12);
+  border-left: 2px solid var(--muted);
   border-radius: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  transition: border-color 0.25s, transform 0.25s;
+  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.25s;
 }
 
 .project-card:hover {
-  border-color: var(--accent);
+  border-left-color: var(--accent);
+  box-shadow: 0 0 22px rgba(168,85,247,0.10);
+  background: rgba(16,30,45,0.75);
   transform: translateY(-3px);
 }
 
@@ -1331,12 +1349,15 @@ section {
 }
 
 .project-subtitle {
-  font-size: 0.8rem;
-  color: var(--accent);
-  letter-spacing: 0.06em;
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  color: var(--muted);
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   margin: 0;
+  transition: color 0.25s;
 }
+.project-card:hover .project-subtitle { color: var(--text-dim); }
 
 .project-tags {
   display: flex;
@@ -1355,6 +1376,7 @@ section {
 }
 
 .project-desc {
+  font-family: var(--font-body);
   font-size: 0.88rem;
   color: var(--text-dim);
   line-height: 1.7;