Website Update

Author: Modelized

docs/assets/css/style.css

@@ -254,7 +254,7 @@ a {
   white-space: nowrap;
   color: var(--accent-script-color);
   -webkit-text-fill-color: var(--accent-script-color);
-  -webkit-text-stroke: 0.6px var(--accent-script-color);
+  -webkit-text-stroke: 0.8px var(--accent-script-color);
   top: var(--script-visual-shift-y);
   overflow: visible;
   vertical-align: baseline;
@@ -1505,50 +1505,52 @@ a {
   height: var(--discipline-card-height);
   transform-origin: center center;
   pointer-events: none;
-  transition:
-    transform 660ms cubic-bezier(0.18, 0.92, 0.22, 1),
-    opacity 420ms ease;
+  transition: transform 560ms cubic-bezier(0.2, 0.82, 0.22, 1);
   backface-visibility: hidden;
 }
 
 .discipline-stack-card.is-active {
   pointer-events: auto;
 }
 
+.discipline-stack-card.is-neighbor {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
 .discipline-stack-card__surface {
   --discipline-bg-1: #181e2e;
   --discipline-bg-2: #0f131d;
-  --discipline-border: rgba(127, 149, 255, 0.14);
-  --discipline-shadow: rgba(8, 11, 18, 0.18);
-  --discipline-sheen: rgba(255, 255, 255, 0.026);
+  --discipline-edge: rgba(127, 149, 255, 0.12);
+  --discipline-shadow: rgba(8, 11, 18, 0.16);
+  --discipline-sheen: rgba(255, 255, 255, 0.018);
   --discipline-depth-dim: 0;
-  --discipline-surface-lift: 0.045;
+  --discipline-surface-lift: 0.028;
   position: relative;
   display: grid;
   grid-template-rows: auto auto auto;
   justify-items: start;
   align-content: center;
-  gap: clamp(1.05rem, 1.8vw, 1.38rem);
+  gap: clamp(1.08rem, 1.8vw, 1.44rem);
   height: 100%;
   padding:
-    clamp(1.58rem, 2.8vw, 2.28rem)
-    clamp(1.62rem, 3vw, 2.5rem)
-    clamp(1.62rem, 3vw, 2.32rem);
-  border: 1px solid var(--discipline-border);
+    clamp(1.7rem, 3vw, 2.45rem)
+    clamp(1.72rem, 3.15vw, 2.6rem)
+    clamp(1.74rem, 3.1vw, 2.45rem);
   border-radius: 36px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, var(--discipline-surface-lift)) 0%, rgba(255, 255, 255, 0) 16%),
-    linear-gradient(180deg, rgba(0, 0, 0, var(--discipline-depth-dim)) 0%, rgba(0, 0, 0, calc(var(--discipline-depth-dim) + 0.026)) 100%),
-    radial-gradient(126% 108% at 12% 0%, var(--discipline-sheen), transparent 48%),
+    linear-gradient(180deg, rgba(0, 0, 0, var(--discipline-depth-dim)) 0%, rgba(0, 0, 0, calc(var(--discipline-depth-dim) + 0.03)) 100%),
+    radial-gradient(124% 104% at 12% 0%, var(--discipline-sheen), transparent 46%),
     linear-gradient(180deg, var(--discipline-bg-1) 0%, var(--discipline-bg-2) 100%);
   box-shadow:
-    0 18px 34px rgba(0, 0, 0, 0.16),
-    0 8px 20px var(--discipline-shadow);
+    inset 0 0 0 1px var(--discipline-edge),
+    0 16px 28px rgba(0, 0, 0, 0.14),
+    0 8px 18px var(--discipline-shadow);
   overflow: hidden;
   transition:
-    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
-    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
-    border-color 300ms ease;
+    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .discipline-stack-card__surface::before {
@@ -1560,43 +1562,43 @@ a {
 }
 
 .discipline-stack-card[data-tone="development"] .discipline-stack-card__surface {
-  --discipline-bg-1: #1a2238;
-  --discipline-bg-2: #0f1624;
-  --discipline-border: rgba(112, 138, 255, 0.14);
-  --discipline-shadow: rgba(28, 46, 101, 0.16);
-  --discipline-sheen: rgba(110, 139, 255, 0.052);
+  --discipline-bg-1: #141d31;
+  --discipline-bg-2: #0b111c;
+  --discipline-edge: rgba(112, 138, 255, 0.11);
+  --discipline-shadow: rgba(24, 41, 92, 0.15);
+  --discipline-sheen: rgba(110, 139, 255, 0.034);
 }
 
 .discipline-stack-card[data-tone="engineering"] .discipline-stack-card__surface {
-  --discipline-bg-1: #241b19;
-  --discipline-bg-2: #131015;
-  --discipline-border: rgba(223, 141, 93, 0.145);
-  --discipline-shadow: rgba(92, 56, 38, 0.16);
-  --discipline-sheen: rgba(223, 141, 93, 0.05);
+  --discipline-bg-1: #1c1513;
+  --discipline-bg-2: #0f0c11;
+  --discipline-edge: rgba(223, 141, 93, 0.115);
+  --discipline-shadow: rgba(84, 50, 35, 0.15);
+  --discipline-sheen: rgba(223, 141, 93, 0.032);
 }
 
 .discipline-stack-card[data-tone="design"] .discipline-stack-card__surface {
-  --discipline-bg-1: #211d2a;
-  --discipline-bg-2: #121018;
-  --discipline-border: rgba(165, 127, 233, 0.14);
-  --discipline-shadow: rgba(72, 48, 108, 0.16);
-  --discipline-sheen: rgba(176, 144, 234, 0.048);
+  --discipline-bg-1: #1a1724;
+  --discipline-bg-2: #0f0d14;
+  --discipline-edge: rgba(165, 127, 233, 0.108);
+  --discipline-shadow: rgba(64, 44, 99, 0.15);
+  --discipline-sheen: rgba(176, 144, 234, 0.03);
 }
 
 .discipline-stack-card[data-tone="music"] .discipline-stack-card__surface {
-  --discipline-bg-1: #25171c;
-  --discipline-bg-2: #120e13;
-  --discipline-border: rgba(201, 109, 95, 0.14);
-  --discipline-shadow: rgba(81, 40, 44, 0.16);
-  --discipline-sheen: rgba(211, 128, 112, 0.046);
+  --discipline-bg-1: #1d1318;
+  --discipline-bg-2: #100c11;
+  --discipline-edge: rgba(201, 109, 95, 0.108);
+  --discipline-shadow: rgba(74, 38, 42, 0.15);
+  --discipline-sheen: rgba(211, 128, 112, 0.03);
 }
 
 .discipline-stack-card[data-tone="research"] .discipline-stack-card__surface {
-  --discipline-bg-1: #152127;
-  --discipline-bg-2: #0d1218;
-  --discipline-border: rgba(106, 184, 161, 0.14);
-  --discipline-shadow: rgba(35, 76, 69, 0.16);
-  --discipline-sheen: rgba(106, 184, 161, 0.048);
+  --discipline-bg-1: #132026;
+  --discipline-bg-2: #0b1117;
+  --discipline-edge: rgba(106, 184, 161, 0.108);
+  --discipline-shadow: rgba(32, 69, 63, 0.15);
+  --discipline-sheen: rgba(106, 184, 161, 0.03);
 }
 
 .discipline-stack-card__header {
@@ -1619,7 +1621,7 @@ a {
 .discipline-stack-card__body {
   margin: 0;
   max-width: 44ch;
-  color: rgba(243, 242, 238, 0.8);
+  color: rgba(243, 242, 238, 0.76);
   font-size: clamp(0.99rem, 1.52vw, 1.08rem);
   line-height: 1.74;
   width: 100%;
@@ -1665,14 +1667,14 @@ a {
 }
 
 .discipline-stack-card__arsenal[data-arsenal-kind="development"] .discipline-pill__icon {
-  background: rgba(87, 127, 255, 0.16);
-  border-color: rgba(87, 127, 255, 0.22);
-  color: #dfe7ff;
+  background: rgba(255, 255, 255, 0.052);
+  border-color: rgba(243, 242, 238, 0.14);
+  color: #e8e7e1;
 }
 
 .discipline-stack-card__arsenal[data-arsenal-kind="engineering"] .discipline-pill__icon {
-  background: rgba(223, 141, 93, 0.16);
-  border-color: rgba(223, 141, 93, 0.22);
+  background: rgba(223, 141, 93, 0.12);
+  border-color: rgba(223, 141, 93, 0.18);
   color: #ffe3d1;
 }
 
@@ -1688,61 +1690,15 @@ a {
   object-fit: contain;
 }
 
-.discipline-pill__icon svg {
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.discipline-nav {
-  position: absolute;
-  top: calc(var(--discipline-stack-pad-top) + (var(--discipline-card-height) * 0.5) - (var(--nav-icon-size) * 0.5));
-  width: var(--nav-icon-size);
-  height: var(--nav-icon-size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid var(--nav-border);
-  border-radius: 999px;
-  background: var(--nav-surface);
-  color: var(--text);
-  font-family: var(--body-font);
-  font-weight: 600;
-  box-shadow: var(--nav-shadow);
-  backdrop-filter: saturate(170%) blur(18px);
-  -webkit-backdrop-filter: saturate(170%) blur(18px);
-  cursor: pointer;
-  z-index: 6;
-  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
-}
-
-.discipline-nav--prev {
-  left: max(0.35rem, calc(50% - (var(--discipline-card-width-resolved, var(--discipline-card-width)) / 2) - clamp(2rem, 3vw, 2.85rem)));
+.discipline-stack-card__arsenal[data-arsenal-kind="development"] .discipline-pill__icon img {
+  filter: brightness(0) saturate(100%) invert(92%) sepia(7%) saturate(304%) hue-rotate(193deg) brightness(101%) contrast(96%);
+  opacity: 0.94;
 }
 
-.discipline-nav--next {
-  right: max(0.35rem, calc(50% - (var(--discipline-card-width-resolved, var(--discipline-card-width)) / 2) - clamp(2rem, 3vw, 2.85rem)));
-}
-
-.discipline-nav:hover {
-  background: var(--nav-press-bg);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
-}
-
-.discipline-nav:disabled {
-  opacity: 0.42;
-  pointer-events: none;
-}
-
-.discipline-nav svg {
-  width: 18px;
-  height: 18px;
+.discipline-pill__icon svg {
   stroke: currentColor;
   fill: none;
-  stroke-width: 2.15;
+  stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
@@ -1757,10 +1713,11 @@ a {
 
 @media (hover:hover) and (pointer:fine) {
   .discipline-stack-card.is-active:hover .discipline-stack-card__surface {
-    transform: scale(1.016);
+    transform: scale(1.012);
     box-shadow:
-      0 24px 42px rgba(0, 0, 0, 0.2),
-      0 10px 24px var(--discipline-shadow);
+      inset 0 0 0 1px var(--discipline-edge),
+      0 18px 32px rgba(0, 0, 0, 0.18),
+      0 8px 20px var(--discipline-shadow);
   }
 }
 
@@ -2025,10 +1982,6 @@ a {
     display: block;
   }
 
-  .discipline-nav {
-    display: none;
-  }
-
   .discipline-stack-shell {
     --discipline-card-width: min(100%, 24.1rem);
     --discipline-card-height: clamp(25.8rem, 84vw, 30.4rem);
@@ -2113,7 +2066,6 @@ a {
 
   .hero-text,
   .button,
-  .discipline-nav,
   .project-card,
   .project-media,
   .js .reveal,
@@ -2124,8 +2076,7 @@ a {
     opacity: 1 !important;
   }
 
-  .discipline-stack-card,
-  .discipline-nav {
+  .discipline-stack-card {
     animation: none !important;
     transition: none !important;
   }