/* new/index.html — the reworked company page, under review at /new/ before it replaces the
* landing view in index.html.
*
* LOADED AFTER css/style.css, NEVER INSTEAD OF IT. Everything shared with the live site — the
* palette, .button/.primary, .eyebrow, .step-number, .site-header, .site-footer, #contact-form,
* the OUR MISSION block — comes from style.css unchanged, so a change there reaches this page
* too and the two cannot drift apart while both are live. This file adds only what the new
* layout needs, all of it under an `nv-` prefix so nothing here can reach an existing page.
*
* THE 35% COLUMN IS A CONTRACT, not a guess: --nv-media is the one place the reserved width is
* written down, and the hero and all four panels read it. Change it here and every slot moves
* together.
*/
:root{
--nv-media:35%; /* reserved for the graphic / animations */
--nv-gap:5%;
/* THE GUTTER IS THE HEADER'S, not a new one. .site-header is max-width:1640px with 3.5%
padding, so these two values are what puts the headline's left edge on the same vertical as
the wordmark above it. (OUR MISSION keeps its own narrower .inner-page inset, as on the live
page — that indent is part of how the section reads as a coda rather than another panel.) */
--nv-edge:3.5%;
--nv-max:1640px;
}
/* -------------------------------------------------------------------------------------------
Hero
------------------------------------------------------------------------------------------- */
.nv-hero{
max-width:var(--nv-max);margin:0 auto;
padding:clamp(48px,7vh,96px) var(--nv-edge) clamp(56px,8vh,104px);
display:grid;grid-template-columns:1fr var(--nv-media);gap:var(--nv-gap);
align-items:center;
border-bottom:1px solid var(--line);
}
.nv-hero-copy{min-width:0}
.nv-hero h1{
font-size:clamp(38px,4.4vw,68px);letter-spacing:-.03em;line-height:1.05;
max-width:26ch;
}
/* "with a smaller font" — the lede is deliberately a long way below the headline in scale, and
capped at a readable measure rather than running the full column width. */
.nv-lede{
font:400 clamp(16px,1.18vw,19px)/1.6 var(--sans);
color:#4b5d4c;max-width:62ch;margin-top:clamp(20px,2.4vh,30px);
}
.nv-hero-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:clamp(26px,3.4vh,40px)}
/* The waitlist beside the demo: the same button in the palette's lime, so the two read as a pair
and neither as the secondary of the other. */
.button.nv-waitlist{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.button.nv-waitlist:hover{background:#cadd52;transform:translateY(-2px)}
.nv-hero-media{min-width:0;position:relative}
/* -------------------------------------------------------------------------------------------
The reserved slots. A placeholder is a placeholder: it is visibly empty, it states what it is
waiting for, and it holds the exact space the finished asset will occupy — so the layout under
review is the layout that ships, not one that reflows the day the animations arrive.
------------------------------------------------------------------------------------------- */
.nv-slot{
position:relative;width:100%;aspect-ratio:4/5;
border:1px dashed var(--line);border-radius:6px;
background:
repeating-linear-gradient(135deg,rgba(22,53,37,.028) 0 12px,transparent 12px 24px),
#f3f1e6;
display:grid;place-items:center;overflow:hidden;
}
.nv-slot-hero{aspect-ratio:4/3}
.nv-slot.nv-hero-graphic{background:transparent;border:0;border-radius:0;isolation:isolate}
.nv-hero-graphic>img,.nv-hero-graphic>canvas{position:absolute;inset:0}
.nv-hero-graphic>canvas{visibility:hidden}
.nv-hero-ready>canvas{visibility:visible}
.nv-hero-ready>img{visibility:hidden}
.nv-hero-pause{
position:absolute;right:4px;bottom:4px;width:36px;height:36px;
display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
background:var(--paper);color:#6f8065;cursor:pointer;
}
.nv-hero-pause:hover{color:var(--ink);border-color:#91a17e}
.nv-hero-pause:focus-visible{outline:2px solid #779349;outline-offset:3px}
.nv-hero-pause[hidden]{display:none}
.nv-hero-pause svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nv-hero-play-icon,.nv-hero-pause[aria-pressed="true"] .nv-hero-pause-icon{display:none}
.nv-hero-pause[aria-pressed="true"] .nv-hero-play-icon{display:block}
/* Whatever the colleague drops in fills the slot and nothing else has to change. */
.nv-slot>img,.nv-slot>video,.nv-slot>svg,.nv-slot>canvas{display:block;width:100%;height:100%;object-fit:contain}
.nv-slot-note{text-align:center;color:var(--muted);padding:16px;line-height:1.5}
.nv-slot-note span{display:block;font:500 11px/1.5 var(--sans);letter-spacing:.16em;color:#8a9484}
.nv-slot-note small{display:block;font-size:12px;margin-top:6px}
/* -------------------------------------------------------------------------------------------
The four panels.
THE ANIMATION SETS THE PANEL HEIGHT. Each panel is a grid row with its text and its animation
centred against each other, and its height comes from whichever of the two is taller — which
at any desktop width is the 4/5 animation frame. On a normal laptop that lands at roughly one
screenful per panel without anyone pinning it there, and it stays right at every width. The
earlier version fixed the height at ~880px instead: correct at 1600px, and at 1000px it framed
300px of content in 880px of blank paper. A floor is kept only so a short panel cannot collapse
into a strip; content is free to exceed it, which panel 3's copy does.
IF THE FOUR ANIMATIONS TURN OUT TO BE ONE CONTINUOUS PIECE rather than four separate ones, the
change is `align-self:start; position:sticky; top:12vh` on .nv-panel-media — the animation then
holds still while its panel's text scrolls past it. Centred is the right default for four
independent animations, which is what four slots implies.
------------------------------------------------------------------------------------------- */
.nv-story{max-width:var(--nv-max);margin:0 auto;padding:0 var(--nv-edge)}
.nv-panel{
display:grid;grid-template-columns:1fr var(--nv-media);gap:var(--nv-gap);
align-items:center;
min-height:min(620px,calc(100vh - 105px)); /* a floor, not a height. 105px = .site-header */
padding:clamp(44px,6vh,80px) 0;
border-bottom:1px solid var(--line);
scroll-margin-top:105px;
}
.nv-panel:last-child{border-bottom:0}
.nv-panel-body{min-width:0;max-width:60ch}
.nv-panel-index{display:flex;align-items:flex-start;gap:12px;margin-bottom:clamp(16px,2vh,24px);color:#6d813e}
.nv-panel-index .step-number{flex-shrink:0;margin-top:2px}
.nv-panel h2{font-size:clamp(26px,2.5vw,38px);letter-spacing:-.02em;line-height:1.15}
.nv-panel-body>p{font-size:17px;color:#4b5d4c;margin-top:1.15em;max-width:56ch}
.nv-panel-body h2+p{margin-top:clamp(18px,2.4vh,28px)}
.nv-panel-media{min-width:0}
/* -------------------------------------------------------------------------------------------
OUR MISSION — unchanged, which took one rule to keep true.
THE MISSION HEADING IS SIZED IN css/simulation.css, not in style.css: the live page loads both,
this page loads neither the simulation nor its stylesheet, and without the line below the same
markup renders at the browser default 24px instead of the 42-72px it has today. Copied here
verbatim rather than by loading a stylesheet full of console and planet rules for one
declaration. If that clamp is ever changed there, change it here too.
------------------------------------------------------------------------------------------- */
.company-overview .page-intro h2{font-size:clamp(42px,5vw,72px)}
.nv-story+.company-overview{border-top:1px solid var(--line);margin-top:clamp(40px,6vh,80px)}
/* -------------------------------------------------------------------------------------------
The demo dialog. Borrows dialog/::backdrop from style.css; #contact-form is styled there too.
------------------------------------------------------------------------------------------- */
.nv-demo-dialog{width:min(560px,94vw);padding:44px 42px 38px}
.nv-demo-dialog h2{font-size:38px;letter-spacing:-.02em}
.nv-demo-dialog .lede{color:var(--muted);margin:.5rem 0 1.4rem;font-size:15px}
.nv-demo-dialog .cf-note{margin-top:1.8rem}
.nv-demo-dialog #contact-form button{background:var(--ink);color:var(--paper)}
/* -------------------------------------------------------------------------------------------
Narrow screens. The 35% column cannot survive here, so the media moves BELOW its own text
rather than being dropped: an animation nobody sees on a phone is the same as one that was
never made. The full-viewport panel height goes too — a screenful of blank paper under three
lines of text is a bug on a phone, not a rhythm.
------------------------------------------------------------------------------------------- */
@media(max-width:1200px){
:root{--nv-gap:4%}
.nv-hero h1{max-width:none}
}
@media(max-width:1000px){
.nv-hero,.nv-panel{grid-template-columns:1fr;gap:clamp(26px,4vh,40px)}
.nv-hero{padding-top:44px;padding-bottom:48px}
.nv-panel{min-height:0;padding:44px 0}
/* Left-aligned with the text and capped: full-bleed, a stacked slot on a 1000px tablet is a
520px-tall block of empty paper before the reader reaches the first panel. */
.nv-slot,.nv-slot-hero{aspect-ratio:16/10;max-width:620px;max-height:52vh}
.nv-hero,.nv-story{padding-left:6%;padding-right:6%}
.nv-demo-dialog{padding:34px 24px 28px}
.nv-demo-dialog h2{font-size:31px}
}