/* ═══════════════════════════════════════════════════════════════════════ Inyosi Technologies — the INNER-PAGE kit Layers on top of primitives.css and style.css, in that order. Loaded by /the-hive/, /capabilities/ and /contact/ ONLY. The homepage does not link it and must never need to. WHY A SEPARATE FILE. style.css is 160KB of homepage: eleven chapters, nine motion devices and a semantic token layer that the whole page is measured against. The inner pages need none of that and adding them to it would mean every future homepage change reads past three pages of unrelated layout. WHAT THIS FILE MAY NOT DO. It defines no tokens. Every colour, size, easing and measure below comes from style.css's lattice and semantic layer, and any value that is not on that lattice is a defect. If a size is needed that the lattice does not have, the lattice is the thing to change. THE HIERARCHY THESE PAGES USE, and why it is not the homepage's: page H1 --fs-chapter 48.00 / 26.00 section H2 --fs-h3 30.72 / 21.60 sub-head --fs-sub 22.00 / 20.00 body --fs-lead 17.60 / 17.00 The homepage hero keeps --fs-hero-heavy (83.84) to itself, so it stays the largest type on the site and an inner page can never out-shout the front door. Within any one inner page no two levels share a rung, which is the tie the lattice exists to prevent. ═══════════════════════════════════════════════════════════════════════ */ /* ═══ the nav, off the homepage ══════════════════════════════════════════ navSpy() selects `.iy-nav__link[href^="#"]` and drives .is-active, which is what lights the small gold hexagon beside the current chapter. On an inner page there are no in-page chapters to spy: links 3-5 are absolute (`/#sectors`), so they do not match that selector at all and navSpy returns early having found nothing to observe. That is correct and needs no code — but it leaves the indicator dark on a page that IS one of the nav's destinations. So off the homepage the state is declarative: the link to the current page carries aria-current="page" in the markup, and these two rules give it exactly what .is-active gives its equivalent. The attribute is the accessible truth as well as the visual one, which is why it is used rather than a second class. ⚠ Written at (0,2,0) to match .iy-nav__link.is-active, not below it. A lower-specificity rule would lose to nothing today and lose silently to the first hover or theme rule added later. ─────────────────────────────────────────────────────────────────────── */ .iy-nav__link[aria-current="page"] { color: var(--iy-on-dark); } .iy-nav__link[aria-current="page"]::before { opacity: 1; transform: scale(1); } /* And on paper, where the white foreground would be invisible. Mirrors the .is-light block in style.css exactly; the two must not drift. */ .iy-nav.is-light .iy-nav__link[aria-current="page"] { color: var(--iy-on-light); } .iy-nav.is-light .iy-nav__link[aria-current="page"]::before { background: var(--iy-gold-800); } /* The mobile drawer's equivalent. Its links are not .iy-nav__link, so they need their own rule or the drawer gives no sense of place at all. */ .iy-mobile__links a[aria-current="page"] { color: var(--iy-fg-accent); } /* ═══ the page hero ══════════════════════════════════════════════════════ The inner-page equivalent of chapter 01, and deliberately NOT a copy of it. The homepage hero is a full viewport of cinema with a scroll cue; an inner page is a document and its reader has already decided to be here, so this is a compact banner that gets out of the way. IT MUST BE DARK, and that is structural rather than aesthetic. navContext() in script.js only writes .is-light / .is-dark once the page has scrolled past 40px, so at rest on an inner page the bar carries neither class and renders its default — the WHITE wordmark and white links. A paper hero would strand a white wordmark on paper, which is the highest-risk failure this design has. navContext() also reads #hero for its .is-atop state. There is no #hero on these pages, so heroBottom resolves to 0, .is-atop is never set, and the nav arrives complete with its links and CTA visible from the first frame. That is the correct behaviour here and it needs no code: an inner page has no cinematic opening to keep clear. ─────────────────────────────────────────────────────────────────────── */ .iy-phero { position: relative; overflow: hidden; display: flex; align-items: flex-end; /* Tall enough to be a banner, short enough that the first section is on screen at 900px tall. Not a vh unit: this must not become a second full screen of nothing on a laptop. */ min-height: clamp(21rem, 46vh, 27rem); } .iy-phero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Two bands, not the hero's three. The hero needs a radial because its lattice is deliberately dense toward the upper right where the nav links sit; this preset (contact) is flatter and half the opacity, so it needs the top band to keep the links off lit cells and a bottom pull so the headline sits on clean ground. A radial in between would only mute a lattice that is already quiet. */ .iy-phero__scrim { position: absolute; inset: 0; pointer-events: none; background: /* 1. the top band, keeping the nav links off lit cells. */ linear-gradient(to bottom, rgba(5,5,6,.86) 0%, rgba(5,5,6,.50) 10%, transparent 26%), /* 2. THE LEFT WASH. Every string on this hero — crumb, eyebrow, H1, standfirst — is set left inside .iy-wrap. The lattice seeds RANDOMLY on every load, so the scrim has to protect the type for any seed, not just one that happens to render clear. Darkening the left protects the type and leaves the lattice legible on the right, where nothing is set. Same logic as the homepage hero's radial, adapted to a banner that is wide rather than tall. */ linear-gradient(to right, var(--iy-black) 0%, rgba(5,5,6,.72) 34%, rgba(5,5,6,.24) 62%, transparent 84%), /* 3. the bottom pull. */ linear-gradient(to top, var(--iy-black) 0%, rgba(5,5,6,.55) 30%, transparent 72%); } .iy-phero__inner { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3rem)); padding-bottom: clamp(2.25rem, 6vh, 3.75rem); } .iy-phero__h1 { margin: .35rem 0 0; font-family: var(--display); font-weight: 800; font-size: var(--fs-chapter); text-transform: uppercase; letter-spacing: -.012em; line-height: 1.02; text-wrap: balance; max-width: 16em; } .iy-phero__sub { margin: 1.15rem 0 0; max-width: 46ch; font-size: var(--fs-sub); line-height: 1.5; color: var(--iy-fg-soft); } /* ═══ the breadcrumb ═════════════════════════════════════════════════════ Small, tracked, and set in the eyebrow's own language so it reads as part of the page furniture rather than as a browser control. It sits ABOVE the eyebrow, which means the page opens with two tracked uppercase lines — so the crumb is deliberately a rung smaller (--fs-micro against --fs-eyebrow) and softer in colour, or the two would tie. Marked up as