Skip to content

Commit e889604

Browse files
ModelizedModelized
authored
Website Update
1 parent 817df0c commit e889604

3 files changed

Lines changed: 66 additions & 28 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@
5050
--home-image-silhouette-brightness: 1.24;
5151
--home-image-silhouette-contrast: 1.08;
5252
--home-image-gradient-opacity: 1;
53+
--home-next-layer-opacity: 0;
54+
--home-next-layer-shift: 58px;
5355
--site-html-warm-alpha: 0.08;
5456
--site-html-cool-alpha: 0.08;
5557
--site-body-warm-alpha: 0.11;
@@ -1020,10 +1022,10 @@ a {
10201022
}
10211023

10221024
.hero {
1023-
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.75rem, 1.15vw, 1.3rem));
1025+
--hero-top-pad: calc(var(--page-top-offset) + clamp(1rem, 1.45vw, 1.65rem));
10241026
--hero-content-bottom-gap: clamp(3rem, 4.1vw, 4.2rem);
10251027
--hero-stage-min: 0px;
1026-
--home-transition-span: clamp(7rem, 14vh, 11rem);
1028+
--home-transition-span: clamp(12rem, 23vh, 19rem);
10271029
--hero-stage-height: calc(var(--hero-initial-viewport-height, 100svh) - var(--hero-top-pad) - var(--hero-content-bottom-gap));
10281030
--hero-stage-reference: max(var(--hero-stage-height), var(--hero-stage-min));
10291031
--hero-image-size: clamp(30rem, calc(var(--hero-stage-reference) * 1.06), 60rem);
@@ -1073,7 +1075,7 @@ a {
10731075
.hero-image-wrap {
10741076
position: absolute;
10751077
left: 50%;
1076-
top: 44.6%;
1078+
top: 46.8%;
10771079
z-index: 1;
10781080
display: grid;
10791081
place-items: center;
@@ -1435,6 +1437,13 @@ a {
14351437
will-change: opacity;
14361438
}
14371439

1440+
.js body.page-home .page-wrap > .section:not(.hero),
1441+
.js body.page-home .site-footer {
1442+
opacity: var(--home-next-layer-opacity);
1443+
transform: translate3d(0, var(--home-next-layer-shift), 0);
1444+
will-change: opacity, transform;
1445+
}
1446+
14381447
.hero-actions {
14391448
flex: 0 0 auto;
14401449
}
@@ -1792,11 +1801,12 @@ a {
17921801
position: absolute;
17931802
inset: 0;
17941803
background:
1795-
linear-gradient(180deg, rgba(10, 10, 14, 0.48) 0%, rgba(8, 8, 11, 0.72) 100%);
1796-
backdrop-filter: blur(18px) saturate(0.82);
1797-
-webkit-backdrop-filter: blur(18px) saturate(0.82);
1798-
-webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
1799-
mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
1804+
linear-gradient(180deg, rgba(8, 8, 11, 0.97) 0%, rgba(7, 7, 10, 0.985) 100%);
1805+
backdrop-filter: blur(16px) saturate(0.76);
1806+
-webkit-backdrop-filter: blur(16px) saturate(0.76);
1807+
box-shadow:
1808+
inset 0 1px 0 rgba(255, 255, 255, 0.03),
1809+
inset 0 -1px 0 rgba(255, 255, 255, 0.015);
18001810
}
18011811

18021812
.stack-loading-spinner {
@@ -1840,6 +1850,23 @@ a {
18401850
z-index: 1;
18411851
outline: none;
18421852
-webkit-tap-highlight-color: transparent;
1853+
transition:
1854+
opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
1855+
visibility 0s linear 420ms;
1856+
}
1857+
1858+
.discipline-stack-shell[data-stack-loading="true"] .discipline-stack-viewport {
1859+
opacity: 0;
1860+
visibility: hidden;
1861+
pointer-events: none;
1862+
transition: none;
1863+
}
1864+
1865+
.discipline-stack-shell[data-stack-loading="false"] .discipline-stack-viewport {
1866+
opacity: 1;
1867+
visibility: visible;
1868+
pointer-events: auto;
1869+
transition-delay: 120ms, 0s;
18431870
}
18441871

18451872
.discipline-stack-shell,
@@ -1865,6 +1892,7 @@ a {
18651892

18661893
.js .discipline-stack-viewport:not([data-stack-ready="true"]) .discipline-stack-card {
18671894
opacity: 0 !important;
1895+
visibility: hidden !important;
18681896
transition: none !important;
18691897
}
18701898

@@ -2355,7 +2383,7 @@ a {
23552383
}
23562384

23572385
.hero {
2358-
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.55rem, 1.3vw, 0.95rem));
2386+
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.8rem, 1.55vw, 1.2rem));
23592387
--hero-content-bottom-gap: clamp(2.7rem, 4vw, 3.35rem);
23602388
}
23612389

@@ -2420,16 +2448,16 @@ a {
24202448
}
24212449

24222450
.hero {
2423-
--hero-top-pad: calc(var(--page-top-offset) + 0.45rem);
2451+
--hero-top-pad: calc(var(--page-top-offset) + 0.9rem);
24242452
--hero-content-bottom-gap: 2.12rem;
2425-
--home-transition-span: clamp(8rem, 15vh, 10.5rem);
2453+
--home-transition-span: clamp(11rem, 20vh, 14rem);
24262454
--hero-image-size: clamp(29rem, calc(var(--hero-stage-reference) * 0.96), 52rem);
24272455
--hero-image-max-inline: 110vw;
24282456
--hero-tagline-base-size: clamp(2.25rem, min(calc(var(--hero-stage-reference) * 0.1), 11.2cqi), 3.35rem);
24292457
}
24302458

24312459
.hero-image-wrap {
2432-
top: 40.5%;
2460+
top: 42.8%;
24332461
}
24342462

24352463
.hero-kicker {
@@ -2587,7 +2615,7 @@ a {
25872615

25882616
.hero {
25892617
--hero-stage-min: 20.75rem;
2590-
--home-transition-span: clamp(6rem, 11vh, 8rem);
2618+
--home-transition-span: clamp(10rem, 18vh, 13rem);
25912619
}
25922620

25932621
.discipline-stack-shell {

‎docs/assets/js/shell.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
const body = document.body;
55
const base = (body?.getAttribute('data-base') || '.').trim();
6-
const assetVersion = '20260417c';
6+
const assetVersion = '20260418a';
77
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
88
const SETTLE_PASS_DELAYS = [0, 140, 320, 560];
99
const simpleIcon = (name) => `https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/${name}.svg`;
@@ -1284,25 +1284,32 @@
12841284
const setAtmosphere = (amount) => {
12851285
root.style.setProperty("--site-html-warm-alpha", (atmosphereTargets.htmlWarm * amount).toFixed(4));
12861286
root.style.setProperty("--site-html-cool-alpha", (atmosphereTargets.htmlCool * amount).toFixed(4));
1287-
root.style.setProperty("--site-body-warm-alpha", (atmosphereTargets.bodyWarm * amount).toFixed(4));
1288-
root.style.setProperty("--site-body-cool-alpha", (atmosphereTargets.bodyCool * amount).toFixed(4));
1289-
root.style.setProperty("--site-body-bottom-alpha", (atmosphereTargets.bodyBottom * amount).toFixed(4));
1287+
body.style.setProperty("--site-body-warm-alpha", (atmosphereTargets.bodyWarm * amount).toFixed(4));
1288+
body.style.setProperty("--site-body-cool-alpha", (atmosphereTargets.bodyCool * amount).toFixed(4));
1289+
body.style.setProperty("--site-body-bottom-alpha", (atmosphereTargets.bodyBottom * amount).toFixed(4));
1290+
};
1291+
1292+
const setLowerLayer = (amount) => {
1293+
const shift = lerp(58, 0, amount);
1294+
root.style.setProperty("--home-next-layer-opacity", amount.toFixed(4));
1295+
root.style.setProperty("--home-next-layer-shift", `${shift.toFixed(2)}px`);
12901296
};
12911297

12921298
const sync = () => {
12931299
rafId = 0;
12941300

12951301
const progress = clamp(getScrollTop() / transitionSpan, 0, 1);
1296-
const uiOpacity = 1 - range(progress, 0.18, 0.76, easeInOutCubic);
1302+
const uiOpacity = 1 - range(progress, 0.28, 0.92, easeInOutCubic);
12971303
const imageScale = lerp(1, 1.12, easeOutCubic(progress));
1298-
const baseFade = 1 - range(progress, 0.12, 0.74, easeInOutCubic);
1299-
const baseBrightness = lerp(1, 0.66, range(progress, 0.18, 0.78, easeInOutCubic));
1300-
const baseContrast = lerp(1, 0.95, range(progress, 0.18, 0.78, easeInOutCubic));
1301-
const silhouetteAppear = range(progress, 0.34, 0.62, easeInOutCubic);
1302-
const silhouetteFade = 1 - range(progress, 0.68, 0.92, easeInOutCubic);
1304+
const baseFade = 1 - range(progress, 0.24, 0.92, easeInOutCubic);
1305+
const baseBrightness = lerp(1, 0.7, range(progress, 0.3, 0.9, easeInOutCubic));
1306+
const baseContrast = lerp(1, 0.96, range(progress, 0.3, 0.9, easeInOutCubic));
1307+
const silhouetteAppear = range(progress, 0.42, 0.72, easeInOutCubic);
1308+
const silhouetteFade = 1 - range(progress, 0.82, 1, easeInOutCubic);
13031309
const silhouetteOpacity = 0.78 * silhouetteAppear * silhouetteFade;
1304-
const gradientOpacity = 1 - range(progress, 0.56, 0.9, easeInOutCubic);
1305-
const atmosphereProgress = range(progress, 0.82, 1, easeInOutCubic);
1310+
const gradientOpacity = 1 - range(progress, 0.54, 0.96, easeInOutCubic);
1311+
const atmosphereProgress = range(progress, 0.72, 1, easeInOutCubic);
1312+
const nextLayerProgress = range(progress, 0.7, 0.98, easeInOutCubic);
13061313

13071314
root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));
13081315
root.style.setProperty("--home-image-scroll-scale", imageScale.toFixed(4));
@@ -1312,6 +1319,7 @@
13121319
root.style.setProperty("--home-image-silhouette-layer-opacity", Math.max(0, silhouetteOpacity).toFixed(4));
13131320
root.style.setProperty("--home-image-gradient-opacity", Math.max(0, gradientOpacity).toFixed(4));
13141321
setAtmosphere(atmosphereProgress);
1322+
setLowerLayer(nextLayerProgress);
13151323
};
13161324

13171325
const requestSync = () => {
@@ -1336,6 +1344,7 @@
13361344
root.style.setProperty("--home-image-silhouette-layer-opacity", "0");
13371345
root.style.setProperty("--home-image-gradient-opacity", "1");
13381346
setAtmosphere(1);
1347+
setLowerLayer(1);
13391348
return;
13401349
}
13411350

@@ -1766,6 +1775,7 @@
17661775
requestAnimationFrame(() => {
17671776
loadingFadeScheduled = false;
17681777
loadingFinished = true;
1778+
stack.dataset.stackReady = "true";
17691779
setStackLoading(false);
17701780
});
17711781
});
@@ -1957,7 +1967,6 @@
19571967
card.style.setProperty("--discipline-surface-lift", appearance.lift.toFixed(3));
19581968
});
19591969

1960-
stack.dataset.stackReady = "true";
19611970
syncLabels();
19621971
};
19631972

@@ -2198,6 +2207,7 @@
21982207

21992208
metrics = measureMetrics();
22002209
setStackLoading(true);
2210+
stack.dataset.stackReady = "false";
22012211
stack.classList.add("discipline-stack-viewport--static");
22022212
applyState();
22032213
requestAnimationFrame(() => {

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/css/style.css?v=20260417c">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260418a">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -228,6 +228,6 @@ <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
228228

229229
<div id="footer-slot"></div>
230230

231-
<script src="assets/js/shell.js?v=20260417c" defer></script>
231+
<script src="assets/js/shell.js?v=20260418a" defer></script>
232232
</body>
233233
</html>

0 commit comments

Comments
 (0)