diff --git a/src/pages/index.astro b/src/pages/index.astro index f181ee1..137287b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -78,29 +78,69 @@ const canonical = new URL('/', Astro.site);
- +
-

- Research - that runs. -

+
+

+ Research + that runs. +

- - 01 / Flagship system - Nucleic - - Where agents live — persisted, orchestrated, observed. - - - +

+ We engineer infrastructure that keeps intelligence forever online and forever + active — immortal by design. +

+
+ +
+
+
+
+ + 01 / Flagship system + Nucleic + + Where agents live — persisted, orchestrated, observed. + + + + + + 02 / Agent foundation + narOS + nash + + The agent OS and shell — ready on turn zero, watching every command. + + + +
+ +
+ + + +
+
+
+ + +
- -

- We engineer infrastructure that keeps intelligence forever online and forever - active — immortal by design. -

@@ -410,6 +450,7 @@ const canonical = new URL('/', Astro.site); } .card-index, + .technology-index, .footer { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; @@ -436,10 +477,7 @@ const canonical = new URL('/', Astro.site); --hero-span-4: calc(var(--hero-col) * 4 + 3 * var(--hero-gap)); display: grid; - grid-template-columns: repeat(12, minmax(0, 1fr)); - column-gap: var(--hero-gap); - row-gap: clamp(1.9rem, 4.4vh, 4rem); - min-height: 0; + min-height: 100%; align-content: center; padding: clamp(1.75rem, 4.5vh, 4.5rem) 0 clamp(1.5rem, 3vh, 3rem); } @@ -451,13 +489,63 @@ const canonical = new URL('/', Astro.site); headline's minimum width outgrows its share, the line breaks, and the card steps down instead of being printed over. */ .hero-lead { - grid-column: 1 / -1; - grid-row: 1; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: var(--hero-gap); - row-gap: clamp(1.5rem, 3vh, 2.5rem); + row-gap: clamp(2.75rem, 7vh, 6rem); + } + + .hero-lead.has-scroll-stack { + position: relative; + min-height: clamp(68rem, 185svh, 108rem); + align-items: stretch; + } + + .hero-copy { + display: grid; + flex: 1 1 var(--hero-span-8); + align-self: flex-end; + gap: clamp(1.9rem, 4.4vh, 4rem); + } + + .has-scroll-stack .hero-copy { + position: sticky; + top: 50svh; + align-self: flex-start; + transform: translateY(-50%); + } + + /* Enlarged type and middle-width windows can make the flex line wrap before the + phone breakpoint. The script detects that actual wrap from geometry; once it + happens, the story becomes one column so its two sticky elements never occupy + the same band of the viewport. */ + .hero-lead.is-stacked-stack { + display: block; + min-height: 0; + } + + .is-stacked-stack .hero-copy { + position: relative; + top: auto; + transform: none; + } + + .is-stacked-stack .technology-stack { + width: min(100%, 28rem); + min-width: 0; + min-height: 135svh; + margin-top: clamp(3.25rem, 9vh, 6rem); + margin-left: auto; + } + + .is-stacked-stack .technology-stage { + top: clamp(8.5rem, 28svh, 14rem); + transform: none; + } + + .is-stacked-stack .technology-cards { + min-height: 11.9rem; } .statement { @@ -470,15 +558,6 @@ const canonical = new URL('/', Astro.site); --optical-inset: 0.078em; display: grid; - /* Flex sizes the border box, so the basis has to give back what the negative - margin takes or the card lands inside the eight columns. The half-pixel keeps - sub-pixel rounding in the two calc()s from ever summing past the hero width and - breaking the line at normal size; flex-grow hands it straight back. */ - flex: 1 1 calc(var(--hero-span-8) + var(--optical-inset) - 0.5px); - /* Fills the row the way a stretched grid item did, so on the narrow desktop - widths where the card is the taller of the two, the headline's own rows keep - the extra height instead of collapsing to the card's baseline. */ - align-self: stretch; justify-items: start; margin: 0 0 0 calc(-1 * var(--optical-inset)); font-size: clamp(3.2rem, min(9vw, 18vh), 8.25rem); @@ -618,8 +697,6 @@ const canonical = new URL('/', Astro.site); } .mission { - grid-column: 1 / span 4; - grid-row: 2; max-width: 29rem; margin: 0; color: var(--secondary); @@ -629,19 +706,76 @@ const canonical = new URL('/', Astro.site); animation: fade-up 700ms 850ms ease-out forwards; } + .technology-stack { + position: relative; + flex: 0 1 var(--hero-span-4); + align-self: flex-end; + min-width: min(100%, 18rem); + } + + .has-scroll-stack .technology-stack { + align-self: stretch; + } + + .technology-stage { + position: relative; + z-index: 1; + } + + .is-scroll-stack .technology-stage { + position: sticky; + top: 50svh; + transform: translateY(-50%); + } + + .technology-panel { + opacity: 0; + animation: fade-up 700ms 980ms ease-out forwards; + } + + .technology-cards { + display: grid; + gap: clamp(1.5rem, 3vh, 2.25rem); + } + + .is-scroll-stack .technology-cards { + min-height: 11.6rem; + } + .product-card { position: relative; display: grid; - /* Never grows, so the half-pixel the headline gives up comes back to the headline - alone and the card starts exactly on the ninth column line. */ - flex: 0 1 var(--hero-span-4); grid-template-columns: 1fr; + align-content: start; gap: 0.55rem; padding: 1.15rem 0 1.05rem; border-top: 1px solid var(--line); text-decoration: none; + } + + .is-scroll-stack .product-card { + grid-area: 1 / 1; opacity: 0; - animation: fade-up 700ms 980ms ease-out forwards; + visibility: hidden; + pointer-events: none; + transform: translate3d(0, -1.5rem, 0) scale(0.985); + transition: + opacity 320ms ease, + visibility 0s linear 320ms, + transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1); + } + + .is-scroll-stack .product-card-next { + transform: translate3d(0, 1.5rem, 0) scale(0.985); + } + + .is-scroll-stack .product-card.is-active { + z-index: 1; + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translate3d(0, 0, 0) scale(1); + transition-delay: 80ms, 0s, 0s; } .product-card::after { @@ -680,6 +814,54 @@ const canonical = new URL('/', Astro.site); line-height: 1.45; } + .technology-index { + display: none; + align-items: center; + justify-content: flex-end; + gap: 0.45rem; + margin-top: 0.75rem; + color: var(--muted); + } + + .is-scroll-stack .technology-index { + display: flex; + } + + .technology-index button { + appearance: none; + border: 0; + padding: 0.3rem; + color: inherit; + background: transparent; + font: inherit; + letter-spacing: inherit; + line-height: inherit; + cursor: pointer; + transition: color 220ms ease; + } + + .technology-index button:hover, + .technology-index button:focus-visible, + .technology-index button.is-active { + color: var(--pine); + } + + .technology-index button:focus-visible { + outline-offset: 1px; + } + + .technology-steps { + position: absolute; + inset: 0; + display: none; + grid-template-rows: repeat(2, minmax(0, 1fr)); + pointer-events: none; + } + + .is-scroll-stack .technology-steps { + display: grid; + } + .footer { padding-top: 1rem; border-top: 1px solid var(--line); @@ -797,8 +979,6 @@ const canonical = new URL('/', Astro.site); } .hero { - grid-template-columns: 1fr; - row-gap: clamp(1.75rem, 5vh, 3rem); padding-top: clamp(2.5rem, 8vh, 5rem); } @@ -810,34 +990,49 @@ const canonical = new URL('/', Astro.site); margin-left: 1.2em; } - /* One column, so there is nothing for the headline to collide with and no need - for the flex line. Dissolving the wrapper puts all three back on the hero grid, - where explicit rows keep the phone order the design has always had — the DOM - carries the card first because that is where it reads on the desktop layout. */ .hero-lead { - display: contents; + display: block; } - .statement, - .mission, - .product-card { - grid-column: 1; + .hero-lead.has-scroll-stack { + min-height: 0; } - .statement { - grid-row: 1; + .hero-copy, + .has-scroll-stack .hero-copy { + position: relative; + top: auto; + display: grid; + gap: clamp(1.75rem, 5vh, 3rem); + transform: none; } .mission { - grid-row: 2; max-width: 25rem; } - /* Stacked, the card is a separate thought from the hero copy rather than the - column beside it, so it wants more air above than the hero's row rhythm gives. */ - .product-card { - grid-row: 3; - margin-top: clamp(0.75rem, 3.5vh, 2.25rem); + .technology-stack { + width: 100%; + min-width: 0; + margin-top: clamp(3.25rem, 9vh, 6rem); + } + + .hero-lead.is-stacked-stack .technology-stack { + width: 100%; + margin-left: 0; + } + + .has-scroll-stack .technology-stack { + min-height: 135svh; + } + + .is-scroll-stack .technology-stage { + top: clamp(8.5rem, 28svh, 14rem); + transform: none; + } + + .is-scroll-stack .technology-cards { + min-height: 11.9rem; } /* One line each: side by side these two need ~360px of tracking-heavy mono, which @@ -959,6 +1154,7 @@ const canonical = new URL('/', Astro.site); .masthead, .line, .mission, + .technology-panel, .product-card, .footer { opacity: 1; @@ -966,3 +1162,61 @@ const canonical = new URL('/', Astro.site); } } + +