Website Update

Author: Modelized

docs/assets/css/style.css

@@ -1417,8 +1417,10 @@ a {
 
 .discipline-stack-shell {
   margin-top: 1.75rem;
+  --discipline-card-width: min(100%, 50rem);
+  --discipline-card-height: clamp(22rem, 39vw, 28rem);
   --discipline-stack-pad-top: clamp(0.7rem, 1.1vw, 1rem);
-  --discipline-stack-pad-bottom: clamp(6rem, 11vw, 8.5rem);
+  --discipline-stack-pad-bottom: clamp(3.4rem, 7vw, 5.8rem);
   --discipline-stack-pad-inline: clamp(0.3rem, 1.2vw, 0.85rem);
 }
 
@@ -1440,12 +1442,22 @@ a {
   transform: translateY(0) scale(1);
 }
 
+.discipline-stack-bleed {
+  position: relative;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  overflow-x: hidden;
+  padding-inline:
+    max(env(safe-area-inset-left, 0px), 0px)
+    max(env(safe-area-inset-right, 0px), 0px);
+  overflow-x: clip;
+  overflow-y: visible;
+}
+
 .discipline-stack-stage {
   position: relative;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 1.1rem;
+  width: min(calc(100% - 1.5rem), 1380px);
+  margin: 0 auto;
   padding:
     var(--discipline-stack-pad-top)
     var(--discipline-stack-pad-inline)
@@ -1454,8 +1466,6 @@ a {
 }
 
 .discipline-stack-viewport {
-  --discipline-card-width: min(100%, 50rem);
-  --discipline-card-height: clamp(22rem, 39vw, 28rem);
   position: relative;
   min-height: var(--discipline-card-height);
   overflow: visible;
@@ -1508,35 +1518,37 @@ a {
 .discipline-stack-card__surface {
   --discipline-bg-1: #181e2e;
   --discipline-bg-2: #0f131d;
-  --discipline-border: rgba(127, 149, 255, 0.16);
-  --discipline-shadow: rgba(8, 11, 18, 0.22);
-  --discipline-sheen: rgba(255, 255, 255, 0.035);
+  --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-depth-dim: 0;
   --discipline-surface-lift: 0.045;
   position: relative;
   display: grid;
+  grid-template-rows: auto auto auto;
   justify-items: start;
   align-content: center;
   gap: clamp(1.05rem, 1.8vw, 1.38rem);
   height: 100%;
   padding:
-    clamp(1.45rem, 2.4vw, 2.05rem)
-    clamp(1.5rem, 2.7vw, 2.35rem)
-    clamp(1.55rem, 2.9vw, 2.3rem);
+    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);
   border-radius: 36px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, var(--discipline-surface-lift)) 0%, rgba(255, 255, 255, 0) 18%),
-    linear-gradient(180deg, rgba(0, 0, 0, var(--discipline-depth-dim)) 0%, rgba(0, 0, 0, calc(var(--discipline-depth-dim) + 0.018)) 100%),
-    radial-gradient(120% 110% at 10% 0%, var(--discipline-sheen), transparent 52%),
+    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, var(--discipline-bg-1) 0%, var(--discipline-bg-2) 100%);
   box-shadow:
-    0 24px 44px rgba(0, 0, 0, 0.18),
-    0 12px 24px var(--discipline-shadow);
+    0 18px 34px rgba(0, 0, 0, 0.16),
+    0 8px 20px var(--discipline-shadow);
   overflow: hidden;
   transition:
-    transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1),
-    box-shadow 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
+    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;
 }
 
 .discipline-stack-card__surface::before {
@@ -1548,43 +1560,43 @@ a {
 }
 
 .discipline-stack-card[data-tone="development"] .discipline-stack-card__surface {
-  --discipline-bg-1: #1b2440;
-  --discipline-bg-2: #101827;
-  --discipline-border: rgba(112, 138, 255, 0.18);
-  --discipline-shadow: rgba(31, 51, 112, 0.18);
-  --discipline-sheen: rgba(110, 139, 255, 0.075);
+  --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-stack-card[data-tone="engineering"] .discipline-stack-card__surface {
-  --discipline-bg-1: #281d1a;
-  --discipline-bg-2: #141118;
-  --discipline-border: rgba(223, 141, 93, 0.19);
-  --discipline-shadow: rgba(102, 60, 39, 0.18);
-  --discipline-sheen: rgba(223, 141, 93, 0.072);
+  --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-stack-card[data-tone="design"] .discipline-stack-card__surface {
-  --discipline-bg-1: #231d31;
-  --discipline-bg-2: #13111a;
-  --discipline-border: rgba(165, 127, 233, 0.18);
-  --discipline-shadow: rgba(76, 51, 116, 0.18);
-  --discipline-sheen: rgba(176, 144, 234, 0.07);
+  --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-stack-card[data-tone="music"] .discipline-stack-card__surface {
-  --discipline-bg-1: #261920;
-  --discipline-bg-2: #130f14;
-  --discipline-border: rgba(201, 109, 95, 0.18);
-  --discipline-shadow: rgba(86, 42, 47, 0.18);
-  --discipline-sheen: rgba(211, 128, 112, 0.068);
+  --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-stack-card[data-tone="research"] .discipline-stack-card__surface {
-  --discipline-bg-1: #142328;
-  --discipline-bg-2: #0d1319;
-  --discipline-border: rgba(106, 184, 161, 0.18);
-  --discipline-shadow: rgba(35, 83, 72, 0.18);
-  --discipline-sheen: rgba(106, 184, 161, 0.07);
+  --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-stack-card__header {
@@ -1614,7 +1626,7 @@ a {
 }
 
 .discipline-stack-card__arsenal {
-  margin-top: 0.05rem;
+  margin-top: 0.2rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.62rem 0.65rem;
@@ -1685,12 +1697,13 @@ a {
 }
 
 .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;
-  align-self: center;
   padding: 0;
   border: 1px solid var(--nav-border);
   border-radius: 999px;
@@ -1702,11 +1715,21 @@ a {
   backdrop-filter: saturate(170%) blur(18px);
   -webkit-backdrop-filter: saturate(170%) blur(18px);
   cursor: pointer;
-  transition: border-color 220ms ease, background-color 220ms ease;
+  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-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 {
@@ -1734,16 +1757,16 @@ a {
 
 @media (hover:hover) and (pointer:fine) {
   .discipline-stack-card.is-active:hover .discipline-stack-card__surface {
-    transform: scale(1.014);
+    transform: scale(1.016);
     box-shadow:
-      0 34px 60px rgba(0, 0, 0, 0.28),
-      0 18px 30px var(--discipline-shadow);
+      0 24px 42px rgba(0, 0, 0, 0.2),
+      0 10px 24px var(--discipline-shadow);
   }
 }
 
 @media (min-width: 1280px) {
   .discipline-stack-card__surface {
-    padding: 1.9rem 2.15rem 2.2rem;
+    padding: 2.1rem 2.5rem 2.35rem;
   }
 }
 
@@ -1949,8 +1972,6 @@ a {
   }
 
   .discipline-stack-viewport {
-    --discipline-card-width: min(100%, 39rem);
-    --discipline-card-height: clamp(20rem, 40vw, 24rem);
     min-height: var(--discipline-card-height);
   }
 
@@ -2008,9 +2029,18 @@ a {
     display: none;
   }
 
-  .discipline-stack-viewport {
+  .discipline-stack-shell {
     --discipline-card-width: min(100%, 24.1rem);
     --discipline-card-height: clamp(25.8rem, 84vw, 30.4rem);
+  }
+
+  .discipline-stack-bleed {
+    overflow-x: hidden;
+    overflow-x: clip;
+    overflow-y: visible;
+  }
+
+  .discipline-stack-viewport {
     min-height: var(--discipline-card-height);
     cursor: grab;
   }
@@ -2049,9 +2079,12 @@ a {
     display: none !important;
   }
 
-  .discipline-stack-viewport {
+  .discipline-stack-shell {
     --discipline-card-width: min(100%, 41rem);
     --discipline-card-height: clamp(18.8rem, 33vw, 22.8rem);
+  }
+
+  .discipline-stack-viewport {
     min-height: var(--discipline-card-height);
   }
 }