diff --git a/.hallmark/log.json b/.hallmark/log.json index 8b585e0..f295400 100644 --- a/.hallmark/log.json +++ b/.hallmark/log.json @@ -1,4 +1,17 @@ [ + { + "date": "2026-10-02", + "scope": "home (review PR)", + "genre": "atmospheric", + "theme": "custom", + "theme_axes": "dark / geometric-sans / warm", + "vibe": "observatory void, bone light, ember signal", + "macrostructure": "Map / Diagram", + "nav": "N10", + "footer": "Ft5", + "enrichment": "H9 Tier B SVG instrument + symbol sprite", + "brief": "Home redesign for owner review — symbolic graphics, motion, every-width mobile, local intelligence (NVIDIA stack), program logos" + }, { "date": "2026-08-07", "scope": "app + concept", diff --git a/AGENTS.md b/AGENTS.md index f623d27..67c5ede 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -41,7 +41,8 @@ links, product posture, identity-motion constraints). Dev server: licensing claims without an approved source (`CONTRIBUTING.md`). - Changes to the static mark or highway-centerline motion require explicit brand review. -- Official home is the dark landing (`index.html` + `styles-dark.css`). +- Official home is the dark landing (`index.html` + `tokens.css` + `home.css` + `home.js`). + Inner pages keep `styles-dark.css` / `styles-light.css` until the redesign rollout. - Evidence labels: `OBSERVED` / `INFERRED` / `ASPIRATIONAL` / `NOT_READY` / `NOT_COMPUTABLE`. App Store and production product URLs stay `NOT_READY` until a release is ready. diff --git a/CHANGELOG.md b/CHANGELOG.md index 8afb9ff..bec30dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,12 @@ Cumulative release since `v0.3.0`: official dark home, social preview, and Herme ## Unreleased +### Home redesign — proposed (A · Observatory) +- New home in review: symbolic graphics, motion with reduced-motion paths, verified at 320–1440 px. +- New sections: local intelligence deployments on your own hardware and program logos (ElevenLabs Startup Grants, Databricks Startup Program, Neon Startup Program). +- Fixes malformed `` markup and dead `srcset` targets on the old home; hero image 1 MB → 107 KB; fonts self-hosted. +- See `intent/2026-10-02-site-redesign.md`. Not deployed until approved. + ### Community - Add a **Community** section on Work (`#community`) and a short Community block on the home evidence area, separate from Products and Clients. - First community entry: **SUAS** (“Shut up and serve.”), with a real screenshot of https://scrimshawlife-ctrl.github.io/suas/ cropped to the live hero and category cards. The Veteran Innovation Hackathon is linked in copy only (`https://luma.com/Innovation4Veterans`); no Luma page image. Built by zer0state for the event at Hacker Dojo, 28–30 August 2026. SUAS is not a Zero State product and is not listed for sale. Status on the public page: SPEC-017 · NOT READY. diff --git a/README.md b/README.md index ab5ec14..f88ac82 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,10 @@ Humans and coding agents follow [`AGENTS.md`](AGENTS.md). [`CLAUDE.md`](CLAUDE.m | `products/` | Parent-brand product summaries + repo links | | `clients/` | Parent-brand client notes; live product remains on the client site | | `community/` | Parent-brand notes for civic and hackathon work; not products for sale | -| `index.html` + `styles-dark.css` | **Official home** (dark landing) | +| `index.html` + `tokens.css` + `home.css` + `home.js` | **Official home** (dark landing) | +| `styles-dark.css` | Inner product, skill, client, community, and work pages (until the redesign rollout) | +| `assets/glyphs.svg` | Symbol system — one glyph per portfolio entry and section | +| `assets/fonts/` | Self-hosted OFL faces (see `assets/THIRD_PARTY_NOTICES.md`) | | `concepts/dark-landing/` | Redirect to official home (legacy URL) | | `styles-light.css` | Secondary light pages (work, philosophy, about, …) | | `assets/` | Marks, retina identity, product heroes | diff --git a/assets/THIRD_PARTY_NOTICES.md b/assets/THIRD_PARTY_NOTICES.md new file mode 100644 index 0000000..187db9a --- /dev/null +++ b/assets/THIRD_PARTY_NOTICES.md @@ -0,0 +1,17 @@ +# Third-party notices — site assets + +## Typefaces (self-hosted, `assets/fonts/`) + +| Face | Files | Licence | Notice | +|---|---|---|---| +| Geist | `geist-latin.woff2`, `geist-latin-ext.woff2` | SIL Open Font License 1.1 | `OFL-geist.txt` — © 2024 The Geist Project Authors | +| Geist Mono | `geist-mono-latin.woff2`, `geist-mono-latin-ext.woff2` | SIL Open Font License 1.1 | `OFL-geistmono.txt` — © 2024 The Geist Project Authors | +| Instrument Serif | `instrument-serif-latin.woff2`, `instrument-serif-latin-ext.woff2` | SIL Open Font License 1.1 | `OFL-instrumentserif.txt` — © 2022 The Instrument Serif Project Authors | + +The files are the Latin and Latin Extended subsets served by Google Fonts. They are unmodified and hosted here so the site makes no third-party font requests. + +## Partner and program marks + +Monochrome mark outlines for Databricks, ElevenLabs, and Neon come from [Simple Icons](https://simpleicons.org) v16.33.0. The path data is CC0-1.0, and the outlines are inlined in the page markup. + +The marks are trademarks of their respective owners. They appear only to identify programs Zero State takes part in, and they do not imply endorsement. Each owner's brand guidelines apply. See `intent/2026-10-02-site-redesign.md` § Open questions before shipping. diff --git a/assets/brand/apple-touch-icon.png b/assets/brand/apple-touch-icon.png new file mode 100644 index 0000000..a7ceb45 Binary files /dev/null and b/assets/brand/apple-touch-icon.png differ diff --git a/assets/brand/favicon-64.png b/assets/brand/favicon-64.png new file mode 100644 index 0000000..e5ea0fd Binary files /dev/null and b/assets/brand/favicon-64.png differ diff --git a/assets/brand/zero_state_logo_1200.webp b/assets/brand/zero_state_logo_1200.webp new file mode 100644 index 0000000..76ac7ab Binary files /dev/null and b/assets/brand/zero_state_logo_1200.webp differ diff --git a/assets/brand/zero_state_mark_3_nav.png b/assets/brand/zero_state_mark_3_nav.png new file mode 100644 index 0000000..3b9ce48 Binary files /dev/null and b/assets/brand/zero_state_mark_3_nav.png differ diff --git a/assets/brand/zero_state_mark_3_nav.webp b/assets/brand/zero_state_mark_3_nav.webp new file mode 100644 index 0000000..a79096e Binary files /dev/null and b/assets/brand/zero_state_mark_3_nav.webp differ diff --git a/assets/brand/zero_state_mark_4_640.webp b/assets/brand/zero_state_mark_4_640.webp new file mode 100644 index 0000000..e8bfd13 Binary files /dev/null and b/assets/brand/zero_state_mark_4_640.webp differ diff --git a/assets/clients/autogive-hero.webp b/assets/clients/autogive-hero.webp new file mode 100644 index 0000000..9154993 Binary files /dev/null and b/assets/clients/autogive-hero.webp differ diff --git a/assets/community/suas-hero.webp b/assets/community/suas-hero.webp new file mode 100644 index 0000000..5044582 Binary files /dev/null and b/assets/community/suas-hero.webp differ diff --git a/assets/fonts/OFL-geist.txt b/assets/fonts/OFL-geist.txt new file mode 100644 index 0000000..61f6f4b --- /dev/null +++ b/assets/fonts/OFL-geist.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file diff --git a/assets/fonts/OFL-geistmono.txt b/assets/fonts/OFL-geistmono.txt new file mode 100644 index 0000000..61f6f4b --- /dev/null +++ b/assets/fonts/OFL-geistmono.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file diff --git a/assets/fonts/OFL-instrumentserif.txt b/assets/fonts/OFL-instrumentserif.txt new file mode 100644 index 0000000..669ce79 --- /dev/null +++ b/assets/fonts/OFL-instrumentserif.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/assets/fonts/geist-latin-ext.woff2 b/assets/fonts/geist-latin-ext.woff2 new file mode 100644 index 0000000..8a1d3df Binary files /dev/null and b/assets/fonts/geist-latin-ext.woff2 differ diff --git a/assets/fonts/geist-latin.woff2 b/assets/fonts/geist-latin.woff2 new file mode 100644 index 0000000..8f01e76 Binary files /dev/null and b/assets/fonts/geist-latin.woff2 differ diff --git a/assets/fonts/geist-mono-latin-ext.woff2 b/assets/fonts/geist-mono-latin-ext.woff2 new file mode 100644 index 0000000..751a04d Binary files /dev/null and b/assets/fonts/geist-mono-latin-ext.woff2 differ diff --git a/assets/fonts/geist-mono-latin.woff2 b/assets/fonts/geist-mono-latin.woff2 new file mode 100644 index 0000000..cf24126 Binary files /dev/null and b/assets/fonts/geist-mono-latin.woff2 differ diff --git a/assets/fonts/instrument-serif-latin-ext.woff2 b/assets/fonts/instrument-serif-latin-ext.woff2 new file mode 100644 index 0000000..3ee1bf9 Binary files /dev/null and b/assets/fonts/instrument-serif-latin-ext.woff2 differ diff --git a/assets/fonts/instrument-serif-latin.woff2 b/assets/fonts/instrument-serif-latin.woff2 new file mode 100644 index 0000000..1765304 Binary files /dev/null and b/assets/fonts/instrument-serif-latin.woff2 differ diff --git a/assets/glyphs.svg b/assets/glyphs.svg new file mode 100644 index 0000000..2448c46 --- /dev/null +++ b/assets/glyphs.svg @@ -0,0 +1,22 @@ + + +Walker and companion on a path +Two patched jacks in a hive cell +A field lattice bending around a node +A camera reticle with a blind spot +A trace wired through hex cells +A field with isolated halves +A matched triple on a shelf +Water inside a watch face +A watched world with agents inside +An evidence chain from intent to impact +Two chevrons over a found signal +A symbolic tree of nodes +A radar sweep finding new words +A one-point perspective frame +A weak signal refined into a line +A sigil sealed in a ring +The split zero crossed by the passage +Intelligence held inside a frame +A node on its orbit + diff --git a/assets/products/hexwire-hero.webp b/assets/products/hexwire-hero.webp new file mode 100644 index 0000000..b93f1c5 Binary files /dev/null and b/assets/products/hexwire-hero.webp differ diff --git a/assets/products/hollersports-hero.webp b/assets/products/hollersports-hero.webp new file mode 100644 index 0000000..a916bae Binary files /dev/null and b/assets/products/hollersports-hero.webp differ diff --git a/assets/products/marigold-hero.webp b/assets/products/marigold-hero.webp new file mode 100644 index 0000000..50f4228 Binary files /dev/null and b/assets/products/marigold-hero.webp differ diff --git a/assets/products/noema-hero.webp b/assets/products/noema-hero.webp new file mode 100644 index 0000000..49e7fdf Binary files /dev/null and b/assets/products/noema-hero.webp differ diff --git a/assets/products/patchhive-hero.webp b/assets/products/patchhive-hero.webp new file mode 100644 index 0000000..919339e Binary files /dev/null and b/assets/products/patchhive-hero.webp differ diff --git a/assets/products/psyfi-hero.webp b/assets/products/psyfi-hero.webp new file mode 100644 index 0000000..d4243b6 Binary files /dev/null and b/assets/products/psyfi-hero.webp differ diff --git a/assets/products/surveillance-survivor-hero.webp b/assets/products/surveillance-survivor-hero.webp new file mode 100644 index 0000000..5deadc2 Binary files /dev/null and b/assets/products/surveillance-survivor-hero.webp differ diff --git a/assets/products/waykin-hero.webp b/assets/products/waykin-hero.webp new file mode 100644 index 0000000..f41e498 Binary files /dev/null and b/assets/products/waykin-hero.webp differ diff --git a/assets/skills/hyperlex-hero.webp b/assets/skills/hyperlex-hero.webp new file mode 100644 index 0000000..b18c7ca Binary files /dev/null and b/assets/skills/hyperlex-hero.webp differ diff --git a/assets/skills/kubrick-hero.webp b/assets/skills/kubrick-hero.webp new file mode 100644 index 0000000..22fd277 Binary files /dev/null and b/assets/skills/kubrick-hero.webp differ diff --git a/assets/skills/neon-genie-hero.webp b/assets/skills/neon-genie-hero.webp new file mode 100644 index 0000000..8b6d955 Binary files /dev/null and b/assets/skills/neon-genie-hero.webp differ diff --git a/assets/skills/orchestra-hero.webp b/assets/skills/orchestra-hero.webp new file mode 100644 index 0000000..07cfed7 Binary files /dev/null and b/assets/skills/orchestra-hero.webp differ diff --git a/assets/skills/sigil-forge-hero.webp b/assets/skills/sigil-forge-hero.webp new file mode 100644 index 0000000..d9d3a44 Binary files /dev/null and b/assets/skills/sigil-forge-hero.webp differ diff --git a/design.md b/design.md index 8a5ae5e..ced124e 100644 --- a/design.md +++ b/design.md @@ -1,85 +1,125 @@ # Design — Zero State -A locked design system for the Zero State public website. +**Status: proposed — direction A · Observatory, pending owner review.** A sibling PR proposes the other direction. Whichever is approved becomes this file's locked system and is rolled out to every page before merge; until then the previous system (git history: `design.md` before 2026-10-02) still governs the inner pages. ## Genre -Modern-minimal: quiet, structural, and exact. Cinematic restraint with one controlled expressive element — the Balanced Aperture mark and its highway-centerline passage. +Atmospheric. Dark-first; the canvas carries the mood, type carries the meaning, one warm signal. Vibe: “observatory void, bone light, ember signal”. Diversification axes: dark / geometric-sans / warm. -## Iteration (2026-08 redesign) +## Symbol system -- Previous: Marquee Hero dominant with asymmetric editorial. -- Current: Split Studio diptych energy for marketing surfaces + indexed "evidence" / reel presentation for work. Philosophy and content pages remain Long Document. -- Emphasis on recurring motif (aperture as anchor across folds), tighter vertical rhythm, document-like ruled sections, and evidence language over marketing card uniformity. - -## Hallmark audit pass (2026-08-07) - -- Dark landing: collapse dual manifesto + philosophy into one **method** band (position lines + single doctrine rail + two short prose grafs). -- One signal side-stripe only (doctrine). -- Evidence lists: thumbs + title/type (dark landing); featured Waykin + compact cards (homepage/work); drop per-card essay bodies and ordinal indices on grids. -- Remove evidence hover scale; stamp production CSS to this design.md; product heroes content-height (no forced 100vh). - -## Release 0.3.0 notes (2026-08-07) - -- Identity stage is logo-only: no corner chrome, no frame border, transparent stage over page void. -- Primary nav leads with **Begin here**, then progressive destinations. -- Portfolio and heroes are org-repo-bound; parent-brand product copy avoids external stack brand names (Abraxas / ABX-Core). -- See `CHANGELOG.md` for the full release inventory. - -## Full repo sweep (August 2026) - -- Work page converted to evidence-list style for consistency with homepage. -- Philosophy, About, Contact, and all product pages refreshed for structural alignment (Long Document and Workbench). -- Legal pages lightly aligned. -- Added supporting CSS for page-hero, product-detail, longform, and status elements. -- All changes preserve exact copy, the Balanced Aperture mark + highway animation, and validation requirements. +Graphics are symbolic, never literal. `assets/glyphs.svg` holds one symbol per product, client, community entry, skill, and section, all built from the mark's own primitives: axis, split ring, orbit, node, frame corner, dashed passage. Symbols are `currentColor` hairlines (`vector-effect: non-scaling-stroke`), referenced with ``. Evidence images (screenshots, key art) stay as secondary figures, loaded on demand. ## Macrostructure family -- Marketing / Homepage: Split Studio (diptych text + aperture proof) with asymmetric editorial sections and recurring motif dividers. -- Work / Product listings: Indexed reel / findings list (ruled rows, minimal cards, status as metadata). -- Product pages: Workbench product brief (preserve existing). -- Philosophy, About, legal: Long Document. +- Home: Map / Diagram — the portfolio is an orbital system map around the zero; hero H9 (logo inside a hand-built SVG instrument); nav N10 floating-on-scroll morph; footer Ft5 statement. +- Inner pages (planned for the rollout): Product, skill, client, community: a dossier page whose hero is the entry's symbol on its orbit, with the evidence image as a framed figure beneath. Work: the orbital map at full size plus the list. Philosophy, about, contact, legal: Long Document with a hairline rail. -## Theme (evolved tokens) +## Theme -- Paper / base: #FBF9F4 (light), #F4F0E8 (stone) -- Ink: #1D2321 (carbon) -- Rule / line: #B9B2A7 -- Signal / Highway (sole chromatic accent): #F2C200 (used sparingly, only for the passage and key signals) -- Secondary: #486F6A (deep teal) for meta labels -- Supporting: softer inks for captions and rules +- `--color-paper` oklch(13% 0.008 65) +- `--color-paper-2` oklch(16% 0.009 65) +- `--color-paper-3` oklch(19.5% 0.01 65) +- `--color-ink` oklch(93% 0.018 80) +- `--color-ink-2` oklch(81% 0.014 75) +- `--color-muted` oklch(65% 0.012 70) +- `--color-rule` oklch(31% 0.01 65) +- `--color-rule-2` oklch(23% 0.009 65) +- `--color-accent` oklch(72% 0.14 50) +- `--color-accent-ink` oklch(17% 0.02 50) +- `--color-focus` oklch(78% 0.17 50) -The yellow highway remains the only strong color signal. Everything else is warm neutrals with high contrast. +Neutrals are tinted toward the anchor hue; no pure black or white. The accent stays at or under 5 % of any viewport; at most two canvas blooms per page. ## Typography -- Display: Georgia (serif), 600–700 weight, generous but controlled letter-spacing on large sizes. -- Body: Inter / system-ui sans, 400–600. -- Mono: system monospace for labels, status, meta, captions. -- No italics on headings. - -## Spacing and motion - -4-point scale (see styles.css tokens). - -Motion stance remains extremely quiet: -- One controlled linear highway passage on the identity mark (IntersectionObserver + click replay). -- Residue / mutation traces only. -- No hover lifts, no decorative reveals, no bouncy easings. -- prefers-reduced-motion: opacity crossfades only. - -## Shared page rules - -- Masthead header (frame-like, not floating SaaS nav). -- Section labels / eyebrows only when they name a real category or domain. -- Footer closes with the company statement. -- The Balanced Aperture mark (reference frame + split zero + highway) is sacred — never alter the SVG coordinate system or core animation semantics. -- Product names and status language are preserved as factual evidence. - -## Constraints for this redesign - -- Preserve every line of existing philosophy and product copy. -- Do not introduce new product claims or invented metrics. -- Keep GitHub Pages compatibility (relative paths, no root-absolute links). -- Maintain deterministic validation (required landmarks, no empty links, Pages-safe assets). +- Display: Geist 200 (headings 200, small heads 500) +- Body: Geist 400 +- Mono: Geist Mono 400/500 — labels, status, readouts + +Headings are roman, never italic. Two families on the page. Display line-height 1.0–1.08, `overflow-wrap: anywhere` on headings. Faces are self-hosted (OFL 1.1, `assets/fonts/`). + +## Spacing + +Named 4-point scale in `tokens.css` (`--space-3xs` … `--space-3xl`). Pages reference tokens, never raw values. + +## Motion + +- One orchestrated load: kicker, title lines, lede, doors rise 14 px in a 90 ms stagger; the instrument settles from 96.5 %. +- Scroll-linked, ≥ 40 rem and no-preference only: hero orbits turn up to 140°, “The world moves.” drifts 26 % while “The reference remains.” holds still; the field grid moves toward the reader; the orbital map turns ±24° as it crosses the viewport (all rings rigidly, so spacing never collapses). +- Reveal once: the method glyph's passage (brand-token spec: 4800 ms, linear, one pass); the enclosure's frame corners close in. +- State: N10 nav morph (one curve, 520 ms); map readout crossfade on hover or focus. + +All motion is `transform` / `opacity` except the brand passage stroke. Every animation has a `prefers-reduced-motion` path (opacity only, ≤ 150 ms); scroll-linked motion is progressive enhancement (`@supports (animation-timeline: view())`) and never runs below 40 rem. + +## Microinteractions stance + +- Silent success; no toasts. +- Focus rings appear instantly (2 px, focus token, never animated). +- One hover signal per element. + +## CTA voice + +- Primary: Outlined pill, ember border; fills ember on hover. Solid variant for the closing email. +- Secondary: Underlined text link, rule-coloured underline that turns ember. +- Labels are verbs and never wrap. + +## What pages MUST share + +- The mark and wordmark (`assets/brand/`, `assets/danny-email-bundle/`). +- The tokens in `tokens.css`, the two faces, the CTA voice. +- The symbol system for every portfolio entry. + +## What pages MAY differ on + +- Macrostructure within the family above. +- Whether a page carries scroll-linked motion (home and work may; legal pages do not). + +## Exports + +### tokens.css + +See [`tokens.css`](tokens.css) — the canonical source. + +### DTCG `tokens.json` + +```json +{ + "color": { + "paper": { + "$value": "oklch(13% 0.008 65)", + "$type": "color" + }, + "ink": { + "$value": "oklch(93% 0.018 80)", + "$type": "color" + }, + "muted": { + "$value": "oklch(65% 0.012 70)", + "$type": "color" + }, + "rule": { + "$value": "oklch(31% 0.01 65)", + "$type": "color" + }, + "accent": { + "$value": "oklch(72% 0.14 50)", + "$type": "color" + }, + "focus": { + "$value": "oklch(78% 0.17 50)", + "$type": "color" + } + }, + "font": { + "display": { + "$value": "Geist", + "$type": "fontFamily" + }, + "body": { + "$value": "Geist", + "$type": "fontFamily" + } + } +} +``` diff --git a/home.css b/home.css new file mode 100644 index 0000000..539f4e2 --- /dev/null +++ b/home.css @@ -0,0 +1,734 @@ +/* Hallmark · genre: atmospheric · macrostructure: Map / Diagram · hero: H9 custom illustration (Tier B SVG instrument) · nav: N10 · footer: Ft5 + * theme: custom · vibe: "observatory void, bone light, ember signal" · paper: oklch(13% 0.008 65) · accent: oklch(72% 0.14 50) + * display: Geist 200 · body: Geist 400 · mono: Geist Mono · axes: dark / geometric-sans / warm + * motion: load reveal · scroll-linked orbit + drift (≥40rem) · readout crossfade · studied: no · context: user + inferred + */ +/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · gates: see .hallmark/log.json */ + +/* Self-hosted faces (SIL OFL 1.1 — assets/fonts/OFL-*.txt). No third-party font requests. */ +@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } +@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } +@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@property --spin { syntax: ""; inherits: true; initial-value: 0deg; } + + +/* ---------- base ---------- */ +*, *::before, *::after { box-sizing: border-box; } +html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; } +body { + margin: 0; + overflow-x: clip; + background: var(--color-paper); + color: var(--color-ink); + font: 400 var(--text-base)/1.6 var(--font-body); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} +body::after { + /* film grain — tactile depth, < 0.06 opacity */ + content: ""; + position: fixed; + inset: 0; + z-index: var(--z-modal); + pointer-events: none; + opacity: 0.05; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); +} +img, picture, svg { display: block; max-width: 100%; } +h1, h2, h3, p, ul, ol, figure { margin: 0; } +h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; } +a:active { color: var(--color-accent); } +ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } +a { color: inherit; } +::selection { background: var(--color-accent); color: var(--color-accent-ink); } +:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; } + +.skip-link { + position: absolute; + left: var(--gutter); + top: -100px; + z-index: var(--z-modal); + padding: var(--space-xs) var(--space-md); + background: var(--color-ink); + color: var(--color-paper); + border-radius: var(--radius-pill); + font-weight: 500; + text-decoration: none; +} +.skip-link:focus-visible { top: var(--space-sm); } + +.glyph { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; overflow: visible; } + +.button { + display: inline-flex; + align-items: center; + gap: 0.6em; + min-height: 48px; + padding: 0 1.4em; + border: 1px solid var(--color-accent); + border-radius: var(--radius-pill); + color: var(--color-ink); + font-weight: 500; + text-decoration: none; + white-space: nowrap; + transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); +} +.button:active { transform: translateY(1px); } +.button--solid { background: var(--color-accent); color: var(--color-accent-ink); } +@media (hover: hover) { + .button:hover { background: var(--color-accent); color: var(--color-accent-ink); } + .button--solid:hover { background: var(--color-ink); border-color: var(--color-ink); } +} +.text-link { + color: var(--color-ink-2); + text-decoration: underline; + text-decoration-color: var(--color-rule); + text-underline-offset: 0.3em; + white-space: nowrap; + transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); +} +.text-link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); } + +/* ---------- N10 · floating-on-scroll morph ---------- */ +.nav { + position: sticky; + top: 0; + z-index: var(--z-sticky); + padding-block: 0; + background-color: var(--color-veil); + border-block-end: 1px solid var(--color-rule-2); + -webkit-backdrop-filter: saturate(1.3) blur(14px); + backdrop-filter: saturate(1.3) blur(14px); + transition: padding-block var(--dur-morph) var(--ease-out), background-color var(--dur-morph) var(--ease-out), + border-color var(--dur-morph) var(--ease-out), backdrop-filter var(--dur-morph) var(--ease-out); +} +.nav__inner { + position: relative; + display: flex; + align-items: center; + gap: var(--space-md); + max-width: calc(var(--page-max) + 2 * var(--gutter)); + min-height: 60px; + margin-inline: auto; + padding: 12px var(--gutter); + border-radius: 0; + background-color: transparent; + -webkit-backdrop-filter: blur(0); + backdrop-filter: blur(0); + box-shadow: none; + transform: translateY(0); + transition: max-width var(--dur-morph) var(--ease-out), min-height var(--dur-morph) var(--ease-out), + padding var(--dur-morph) var(--ease-out), border-radius var(--dur-morph) var(--ease-out), + background-color var(--dur-morph) var(--ease-out), backdrop-filter var(--dur-morph) var(--ease-out), + box-shadow var(--dur-morph) var(--ease-out), transform var(--dur-morph) var(--ease-out); +} +.nav.is-floating { + padding-block: 4px; + background-color: transparent; + border-color: transparent; + -webkit-backdrop-filter: blur(0); + backdrop-filter: blur(0); +} +.nav.is-floating .nav__inner { + max-width: 60rem; + min-height: 52px; + padding-block: 4px; + padding-inline: var(--space-xs); + border-radius: var(--radius-pill); + background-color: var(--color-veil-2); + -webkit-backdrop-filter: blur(18px); + backdrop-filter: blur(18px); + box-shadow: inset 0 0 0 1px var(--color-rule), 0 18px 40px -18px var(--color-shadow); + transform: translateY(10px); +} +.wordmark { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding-inline: var(--space-2xs) 0; + color: var(--color-ink); + text-decoration: none; + font: 500 0.82rem/1 var(--font-mono); + letter-spacing: 0.32em; + white-space: nowrap; +} +.wordmark img { width: 20px; height: auto; } +.nav__links { + display: none; + margin-inline-start: auto; + gap: var(--space-2xs); +} +.nav__links a { + padding: 0.55rem 0.85rem; + border-radius: var(--radius-pill); + color: var(--color-ink-2); + text-decoration: none; + font-size: var(--text-sm); + white-space: nowrap; + transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); +} +.nav__links a:hover { color: var(--color-ink); background-color: var(--color-paper-3); } +.nav__sheet-cta { color: var(--color-accent) !important; } +.nav__cta { + display: none; + align-items: center; + min-height: 40px; + padding: 0 1.1rem; + border: 1px solid var(--color-accent); + border-radius: var(--radius-pill); + color: var(--color-ink); + font-size: var(--text-sm); + font-weight: 500; + text-decoration: none; + white-space: nowrap; + transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); +} +.nav__cta:hover { background: var(--color-accent); color: var(--color-accent-ink); } +.nav__menu { + margin-inline-start: auto; + min-height: 44px; + min-width: 44px; + padding: 0 1rem; + border: 1px solid var(--color-rule); + border-radius: var(--radius-pill); + background: transparent; + color: var(--color-ink); + font: 500 var(--text-sm)/1 var(--font-body); + cursor: pointer; +} +.nav__menu[aria-expanded="true"] { border-color: var(--color-accent); } +.nav__menu:active { transform: translateY(1px); } +.nav__menu:disabled { opacity: 0.45; cursor: not-allowed; } +/* mobile sheet */ +.nav .nav__links { + position: absolute; + inset-inline: var(--gutter); + top: calc(100% + 8px); + display: grid; + padding: var(--space-xs); + background: var(--color-paper-2); + border: 1px solid var(--color-rule); + border-radius: var(--radius-card); + box-shadow: 0 24px 48px -24px var(--color-shadow); + visibility: hidden; + opacity: 0; + transform: translateY(-6px); + transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); +} +.nav .nav__links a { padding: 0.9rem 1rem; font-size: var(--text-md); } +.nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } + +@media (min-width: 40rem) { + .nav__cta { display: inline-flex; margin-inline-start: auto; } + .nav__menu { margin-inline-start: 0; } +} +@media (min-width: 62rem) { + .nav__menu, .nav__sheet-cta { display: none; } + .nav .nav__links { + position: static; + display: flex; + padding: 0; + background: none; + border: 0; + box-shadow: none; + visibility: visible; + opacity: 1; + transform: none; + } + .nav .nav__links a { padding: 0.55rem 0.85rem; font-size: var(--text-sm); } + .nav__cta { margin-inline-start: var(--space-xs); } +} + +/* ---------- hero ---------- */ +.hero { + position: relative; + isolation: isolate; + display: grid; + gap: var(--space-xl); + padding: var(--space-xl) var(--page-pad) var(--space-2xl); + view-timeline-name: --hero; +} +.hero::before { + /* bloom 1 — behind the instrument */ + content: ""; + position: absolute; + z-index: -2; + inset: -10% -10% 30% 30%; + background: radial-gradient(closest-side, var(--color-glow), transparent 72%); + pointer-events: none; +} +.hero-grid { + position: absolute; + z-index: -1; + inset: auto 0 0 0; + height: 42%; + overflow: hidden; + perspective: 480px; + pointer-events: none; + -webkit-mask-image: linear-gradient(to top, black 10%, transparent 92%); + mask-image: linear-gradient(to top, black 10%, transparent 92%); +} +.hero-grid::before { + content: ""; + position: absolute; + inset: 0 -60% -40% -60%; + background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); + background-size: 64px 64px; + transform-origin: 50% 0%; + transform: rotateX(72deg); + opacity: 0.55; +} +.hero-grid::after { + content: ""; + position: absolute; + inset: 0 0 auto 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--color-accent), transparent); + opacity: 0.35; +} +.stage { + position: relative; + order: -1; + justify-self: center; + width: min(74%, 22rem); + margin-block: var(--space-lg) var(--space-xs); +} +.stage picture { position: relative; z-index: 1; } +.aperture-mark { width: 100%; height: auto; } +.stage__orbits { + position: absolute; + z-index: 0; + left: 50.8%; + top: 48.7%; + width: 172%; + height: auto; + aspect-ratio: 1; + translate: -50% -50%; + overflow: visible; + pointer-events: none; +} +.orb { transform-box: view-box; transform-origin: 50% 50%; } +.orb circle, .orb path, .orb line { fill: none; stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; } +.orb--crosshair path { stroke: var(--color-rule-2); } +.orb--c line { stroke: var(--color-grid); } +.orb .orb__node { fill: var(--color-ink-2); stroke: none; } +.orb .orb__node--lit { fill: var(--color-accent); } +.orb--a { transform: rotate(calc(var(--spin) * 1.6)); } +.orb--b { transform: rotate(calc(var(--spin) * -1)); } +.orb--c { transform: rotate(calc(var(--spin) * 0.45)); } + +.hero__copy { display: grid; gap: var(--space-lg); min-width: 0; } +.hero__kicker { + color: var(--color-muted); + font: 500 var(--text-2xs)/1.2 var(--font-mono); + letter-spacing: 0.16em; + text-transform: uppercase; +} +.hero__title { + font: 200 var(--text-display)/1.02 var(--font-display); + letter-spacing: -0.035em; + overflow-wrap: anywhere; + min-width: 0; +} +.hero__moves, .hero__remains { display: block; } +.hero__moves-inner { display: inline-block; } +.hero__remains { color: var(--color-ink-2); } +.hero__remains::after { + /* the reference: a fixed accent tick */ + content: ""; + display: inline-block; + width: 0.14em; + height: 0.14em; + margin-inline-start: 0.12em; + border-radius: 50%; + background: var(--color-accent); + vertical-align: 0.12em; +} +.hero__lede { max-width: 54ch; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; } +.doors { display: grid; border-bottom: 1px solid var(--color-rule); } +.door { + display: grid; + grid-template-columns: 40px minmax(0, 1fr) auto; + grid-template-areas: "glyph label arrow" "glyph text arrow"; + column-gap: var(--space-md); + row-gap: var(--space-3xs); + align-items: center; + padding: var(--space-md) var(--space-2xs); + border-top: 1px solid var(--color-rule); + text-decoration: none; +} +.door__glyph { grid-area: glyph; width: 40px; height: 40px; color: var(--color-ink-2); stroke-width: 1.15; transition: color var(--dur-short) var(--ease-out); } +.door__label { grid-area: label; color: var(--color-muted); font: 500 var(--text-2xs)/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; } +.door__text { grid-area: text; font-size: var(--text-md); line-height: 1.3; } +.door__arrow { grid-area: arrow; color: var(--color-muted); font-size: var(--text-md); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } +@media (hover: hover) { + .door:hover .door__glyph, .door:hover .door__arrow { color: var(--color-accent); } + .door:hover .door__arrow { transform: translateX(4px); } +} +.hero__foot { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: var(--space-xs) var(--space-lg); + padding-top: var(--space-md); + border-top: 1px solid var(--color-rule-2); + color: var(--color-muted); + font: 400 var(--text-xs)/1.4 var(--font-mono); + letter-spacing: 0.04em; +} +.hero__foot a { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; } +.hero__foot a:hover { color: var(--color-accent); } + +@media (min-width: 60rem) { + .hero { + grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); + grid-template-areas: "copy stage" "foot foot"; + column-gap: var(--space-2xl); + align-items: center; + } + .hero__copy { grid-area: copy; } + .stage { grid-area: stage; order: 0; width: min(100%, 30rem); margin: 0; } + .hero__foot { grid-area: foot; } + .doors { max-width: 40rem; } +} + +/* ---------- method ---------- */ +.method { + display: grid; + gap: var(--space-xl); + padding: var(--space-3xl) var(--page-pad); + border-top: 1px solid var(--color-rule-2); +} +.method__mark { width: min(44vw, 14rem); } +.method__zero { width: 100%; height: auto; overflow: visible; } +.method__zero path { fill: none; } +.mz__frame { stroke: var(--color-muted); stroke-width: 1; vector-effect: non-scaling-stroke; } +.mz__ring { stroke: var(--color-ink); stroke-width: 3.2; stroke-linecap: round; } +.mz__highway { stroke: var(--color-accent); stroke-width: 2.9; stroke-dasharray: 7.2 7.2; stroke-dashoffset: 0; } +.mz__highway.is-revealed { animation: passage 4800ms linear 1 both; } +@keyframes passage { to { stroke-dashoffset: -57.6; } } +.method__copy { display: grid; gap: var(--space-lg); min-width: 0; } +.method h2 { font: 200 var(--text-2xl)/1.08 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; } +.method h2 span { display: block; color: var(--color-ink-2); } +.method__lines { display: grid; gap: var(--space-2xs); font-size: var(--text-md); color: var(--color-muted); } +.method__lines li::before { content: "— "; color: var(--color-muted); } +.method__lines .lit { color: var(--color-ink); } +.method__lines .lit::before { content: "● "; color: var(--color-accent); font-size: 0.7em; vertical-align: 0.15em; } +.method__doctrine { max-width: 34ch; font-size: var(--text-lg); line-height: 1.4; } +.method__prose { display: grid; gap: var(--space-md); max-width: 60ch; color: var(--color-ink-2); } +@media (min-width: 60rem) { + .method { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; } + .method__mark { width: 100%; max-width: 22rem; position: sticky; top: 120px; } +} + +/* ---------- evidence · orbital map ---------- */ +.evidence { padding: var(--space-3xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.evidence__head { display: grid; gap: var(--space-sm); max-width: 44rem; } +.evidence__head h2 { font: 200 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.03em; } +.evidence__head p { color: var(--color-ink-2); font-size: var(--text-md); } + +.map { position: relative; margin-top: var(--space-xl); } +.map__rings, .map__core, .map__readout { display: none; } +.map__group { margin-top: var(--space-xl); } +.map__legend h3 { + display: flex; + align-items: center; + gap: 0.6em; + color: var(--color-ink); + font: 500 var(--text-xs)/1.3 var(--font-mono); + letter-spacing: 0.12em; + text-transform: uppercase; +} +.map__legend p { max-width: 52ch; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); } +.legend-swatch { width: 22px; height: 0; border-top: 1px solid var(--color-ink-2); } +.legend-swatch--outer { border-top-style: dashed; } +.legend-swatch--inner-a, .legend-swatch--inner-b { border-top-style: dotted; border-top-width: 2px; } +.ring { margin-top: var(--space-md); border-top: 1px solid var(--color-rule-2); } +.node__link { + display: grid; + grid-template-columns: 44px minmax(0, 1fr); + grid-template-areas: "g name" "g meta"; + column-gap: var(--space-md); + row-gap: var(--space-3xs); + align-items: center; + padding: var(--space-sm) var(--space-2xs); + border-bottom: 1px solid var(--color-rule-2); + text-decoration: none; +} +.node__glyph { grid-area: g; display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } +.node__glyph .glyph { width: 38px; height: 38px; } +.node__name { grid-area: name; font-size: var(--text-md); font-weight: 500; line-height: 1.25; } +.node__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.15em 0.9em; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; } +.node__status { font: 400 var(--text-2xs)/1.6 var(--font-mono); letter-spacing: 0.02em; } +.node__evidence { display: none; } +@media (hover: hover) { + .node__link:hover .node__glyph { color: var(--color-accent); } +} + +@media (min-width: 62rem) { + .map { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); + grid-template-rows: repeat(4, auto) 1fr; + column-gap: var(--space-2xl); + align-items: start; + animation: map-spin linear both; + animation-timeline: view(); + animation-range: cover 0% cover 100%; + animation-play-state: paused; + } + .map__rings { display: block; grid-column: 1; grid-row: 1 / -1; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; } + .map__rings * { fill: none; vector-effect: non-scaling-stroke; } + .map__cross { stroke: var(--color-rule-2); stroke-width: 1; } + .map__ring { stroke: var(--color-rule); stroke-width: 1; } + .map__ring--outer { stroke-dasharray: 3 7; } + .map__ring--inner { stroke-dasharray: 1 5; stroke-width: 2; stroke-linecap: round; } + .map__ticks { stroke: var(--color-grid); stroke-width: 1; transform-box: view-box; transform-origin: 50% 50%; transform: rotate(calc(var(--spin) * -0.6)); } + .map__core { + display: grid; + place-items: center; + grid-column: 1; + grid-row: 1 / -1; + width: 100%; + aspect-ratio: 1; + pointer-events: none; + } + .map__core-glyph { width: 11%; height: auto; aspect-ratio: 1; color: var(--color-ink); stroke-width: 1.25; --glyph-accent: var(--color-accent); } + .map__group { display: contents; } + .map__legend { grid-column: 2; margin-bottom: var(--space-lg); } + .ring { + position: relative; + grid-column: 1; + grid-row: 1 / -1; + align-self: start; + width: 100%; + aspect-ratio: 1; + margin: 0; + border: 0; + container-type: inline-size; + pointer-events: none; + } + .ring--mid { --r: 32cqi; --step: 40deg; --off: -70deg; } + .ring--outer { --r: 46cqi; --step: 80deg; --off: -90deg; } + .ring--inner-a { --r: 17cqi; --step: 0deg; --off: -90deg; } + .ring--inner-b { --r: 17cqi; --step: 0deg; --off: 90deg; } + .node { + /* rigid rotation: every ring turns together, so spacing never collapses */ + --a: calc(var(--i) * var(--step) + var(--off) + var(--spin)); + position: absolute; + left: 50%; + top: 50%; + transform-origin: 0 0; + transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) translate(-50%, -50%); + pointer-events: auto; + } + .node__link { + grid-template-columns: auto; + grid-template-areas: "g" "name"; + justify-items: center; + row-gap: var(--space-xs); + padding: var(--space-2xs); + border: 0; + border-radius: var(--radius-card); + text-align: center; + } + .node__glyph { + width: 50px; + height: 50px; + border-radius: 50%; + background: var(--color-paper); + box-shadow: 0 0 0 1px var(--color-rule); + } + .node__glyph .glyph { width: 32px; height: 32px; } + .node__name { font-size: 0.78rem; font-weight: 500; white-space: nowrap; color: var(--color-ink-2); } + .node__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } + .node.is-active .node__glyph, .node__link:focus-visible .node__glyph { color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 0 0 6px var(--color-glow); } + .node.is-active .node__name { color: var(--color-ink); } + .map__readout { + display: block; + grid-column: 2; + grid-row: 5; + min-height: 22rem; + padding: var(--space-lg); + border: 1px solid var(--color-rule); + border-radius: var(--radius-card); + background: var(--color-paper-2); + } +} +@keyframes map-spin { from { --spin: -24deg; } to { --spin: 24deg; } } +.readout__hint { color: var(--color-muted); font-size: var(--text-sm); } +.readout__card { display: grid; gap: var(--space-xs); animation: fade var(--dur-short) var(--ease-out); } +.readout__group { color: var(--color-muted); font: 500 var(--text-2xs)/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } +.readout__name { font: 300 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.02em; } +.readout__type { color: var(--color-ink-2); } +.readout__status { color: var(--color-muted); font: 400 var(--text-2xs)/1.6 var(--font-mono); } +.readout__evidence { position: relative; margin-block: var(--space-xs); overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--color-rule); aspect-ratio: 16 / 10; background: var(--color-paper-3); } +.readout__evidence img { width: 100%; height: 100%; object-fit: cover; } +.readout__evidence figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } +@keyframes fade { from { opacity: 0; } } + +/* ---------- local intelligence ---------- */ +.local { + display: grid; + gap: var(--space-2xl); + padding: var(--space-3xl) var(--page-pad); + border-top: 1px solid var(--color-rule-2); +} +.local__intro { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; } +.local h2 { font: 200 var(--text-display)/1 var(--font-display); letter-spacing: -0.04em; overflow-wrap: anywhere; } +.local__nvidia { display: flex; align-items: center; gap: 0.75rem; color: var(--color-ink); font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.04em; } +.nvidia-logo { flex: none; width: 34px; height: 34px; color: var(--color-ink); } +.local__lede { max-width: 46ch; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; } +.local__intro .button { justify-self: start; } +.enclosure { display: grid; gap: var(--space-lg); min-width: 0; } +.enclosure__art { width: 100%; height: auto; overflow: visible; } +.enclosure__art * { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; } +.enclosure__art text { fill: var(--color-muted); stroke: none; font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; } +.enc__corner path { stroke: var(--color-ink); stroke-width: 2; stroke-linecap: square; } +.enc__graph path, .enc__graph circle { stroke: var(--color-ink-2); } +.enc__graph .enc__node { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.4; } +.enc__graph .enc__node--lit { fill: var(--color-accent); stroke: var(--color-accent); } +.enc__cloud path { stroke: var(--color-muted); } +.enc__cloud .enc__stop { stroke: var(--color-accent); stroke-width: 1.6; } +.enc__corner { transform-box: view-box; } +[data-reveal] .enc__corner { opacity: 0; transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out); } +[data-reveal] .enc__corner--tl { transform: translate(-34px, -34px); } +[data-reveal] .enc__corner--tr { transform: translate(34px, -34px); transition-delay: 60ms; } +[data-reveal] .enc__corner--br { transform: translate(34px, 34px); transition-delay: 120ms; } +[data-reveal] .enc__corner--bl { transform: translate(-34px, 34px); transition-delay: 180ms; } +[data-reveal].is-revealed .enc__corner { opacity: 1; transform: none; } +.enclosure__why { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font: 400 var(--text-xs)/1.5 var(--font-mono); } +.enclosure__why li::before { content: "◦ "; color: var(--color-accent); } +.local__uses { display: grid; gap: 0; border-top: 1px solid var(--color-rule); } +.local__uses li { display: grid; gap: var(--space-2xs); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule-2); } +.local__uses h3, .local__steps h3 { font-size: var(--text-md); font-weight: 500; line-height: 1.3; } +.local__uses p, .local__steps p { color: var(--color-ink-2); max-width: 46ch; } +.local__steps { display: grid; gap: var(--space-lg); counter-reset: none; } +/* ordinal steps: the number stacks above its heading at every width (gate 54) */ +.local__steps li { position: relative; display: grid; gap: var(--space-2xs); } +.step__n { color: var(--color-accent); font: 500 var(--text-xs)/1.6 var(--font-mono); letter-spacing: 0.08em; } +@media (min-width: 42rem) { + .local__uses { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--space-xl); } +} +@media (min-width: 62rem) { + .local { + grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); + grid-template-areas: "intro art" "uses uses" "steps steps"; + column-gap: var(--space-2xl); + } + .local__intro { grid-area: intro; } + .enclosure { grid-area: art; } + .local__uses { grid-area: uses; grid-template-columns: repeat(4, minmax(0, 1fr)); } + .local__uses li { padding-inline-end: var(--space-lg); border-bottom: 0; } + .local__uses li + li { padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-rule-2); } + .local__steps { + grid-area: steps; + grid-template-columns: repeat(4, minmax(0, 1fr)); + column-gap: var(--space-xl); + padding-top: var(--space-xl); + background: linear-gradient(var(--color-rule), var(--color-rule)) 0 0.55rem / 100% 1px no-repeat; + } + .local__steps li { padding-top: var(--space-lg); } + .step__n { position: absolute; left: 0; top: -1.6rem; padding-inline-end: var(--space-xs); background: var(--color-paper); } +} + +/* ---------- programs · T2 logo wall ---------- */ +.programs { padding: var(--space-2xl) var(--page-pad) var(--space-3xl); } +.programs h2 { color: var(--color-muted); font: 500 var(--text-xs)/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; } +.programs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); } +.programs__list li { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule-2); } +.programs__list li + li { padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--color-rule-2); } +.program__logo { width: 28px; height: 28px; margin-bottom: var(--space-xs); color: var(--color-ink-2); } +.program__brand { font-weight: 500; } +.program__name { color: var(--color-muted); font: 400 var(--text-2xs)/1.5 var(--font-mono); letter-spacing: 0.02em; } +@media (min-width: 48rem) { + .programs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .programs__list li { border-bottom: 0; padding-inline-start: var(--space-lg); } + .programs__list li + li { border-inline-start: 1px solid var(--color-rule-2); } + .programs__list li:first-child { padding-inline-start: 0; } +} + +/* ---------- principles ---------- */ +.principles { display: grid; gap: var(--space-xl); padding: var(--space-3xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.principles__mark { width: 7rem; opacity: 0.9; } +.principles__copy { display: grid; gap: var(--space-xl); } +.principles h2 { font: 200 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.03em; } +.principles h2 span { display: block; color: var(--color-ink-2); } +.principles ol { display: grid; gap: var(--space-lg); } +.principles li { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); } +.principles strong { font-weight: 500; font-size: var(--text-md); } +.principles li p { color: var(--color-ink-2); } +@media (min-width: 62rem) { + .principles { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; column-gap: var(--space-2xl); } + .principles__mark { width: 100%; max-width: 13rem; } + .principles ol { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr); column-gap: var(--space-xl); } +} + +/* ---------- closing ---------- */ +.closing { + position: relative; + isolation: isolate; + display: grid; + gap: var(--space-xl); + padding: var(--space-3xl) var(--page-pad); + border-top: 1px solid var(--color-rule-2); +} +.closing::before { + /* bloom 2 — the horizon */ + content: ""; + position: absolute; + z-index: -1; + inset: 40% 0 0 0; + background: radial-gradient(60% 80% at 20% 100%, var(--color-glow), transparent 70%); + pointer-events: none; +} +.closing h2 { font: 200 var(--text-display)/1 var(--font-display); letter-spacing: -0.04em; overflow-wrap: anywhere; } +.closing h2 span { color: var(--color-ink-2); } +.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); } +.closing__note { color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-mono); letter-spacing: 0.04em; } + +/* ---------- Ft5 · statement footer ---------- */ +.foot { display: grid; gap: var(--space-xl); padding: var(--space-2xl) var(--page-pad) var(--space-xl); border-top: 1px solid var(--color-rule); } +.foot__line { max-width: 22ch; font: 200 clamp(1.75rem, 3.6vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.03em; } +.foot__meta { display: grid; gap: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); } +.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); } +.foot__links a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; } +.foot__links a:hover { color: var(--color-accent); } +.foot__legal { color: var(--color-muted); font: 400 var(--text-xs)/1.4 var(--font-mono); } +@media (min-width: 62rem) { + .foot__meta { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-xl); } + .foot__links { justify-content: center; } +} + +/* ---------- motion: one orchestrated load ---------- */ +[data-load] { animation: rise var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 100ms); } +[data-load="1"] { --d: 1; } +[data-load="2"] { --d: 2; } +[data-load="3"] { --d: 3; } +[data-load="4"] { --d: 4; } +.stage[data-load] { animation-name: settle; animation-duration: 900ms; } +@keyframes rise { from { opacity: 0; transform: translateY(14px); } } +@keyframes settle { from { opacity: 0; transform: scale(0.965); } } + +/* scroll-linked: the world moves, the reference remains (pointer-fine, ≥40rem) */ +@media (min-width: 40rem) and (prefers-reduced-motion: no-preference) { + @supports (animation-timeline: view()) { + .stage__orbits { animation: hero-spin linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; } + .hero__moves-inner { animation: drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 90%; } + .hero-grid::before { animation: floor linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; } + .map { animation-play-state: running; } + } +} +@keyframes hero-spin { to { --spin: 140deg; } } +@keyframes drift { to { translate: 26% 0; } } +@keyframes floor { to { transform: rotateX(72deg) translateY(128px); } } + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation-duration: 150ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; } + [data-load] { animation-name: fade !important; } + .mz__highway.is-revealed { animation: none !important; } + [data-reveal] .enc__corner { transform: none !important; } +} diff --git a/home.js b/home.js new file mode 100644 index 0000000..8413000 --- /dev/null +++ b/home.js @@ -0,0 +1,91 @@ +// Zero State · Observatory — nav morph, menu sheet, reveal-once, orbital readout. +(() => { + const year = document.querySelector('[data-year]'); + if (year) year.textContent = String(new Date().getFullYear()); + + // N10 floating-on-scroll morph: one DOM, one class, boolean-flip guard. + const nav = document.querySelector('[data-nav]'); + if (nav) { + const THRESHOLD = 80; + let floating = false; + let ticking = false; + const update = () => { + const next = window.scrollY > THRESHOLD; + if (next !== floating) { + floating = next; + nav.classList.toggle('is-floating', floating); + } + }; + window.addEventListener('scroll', () => { + if (ticking) return; + ticking = true; + requestAnimationFrame(() => { update(); ticking = false; }); + }, { passive: true }); + update(); + + const menu = nav.querySelector('[data-menu]'); + const close = () => { nav.classList.remove('is-open'); menu?.setAttribute('aria-expanded', 'false'); }; + menu?.addEventListener('click', () => { + const open = menu.getAttribute('aria-expanded') !== 'true'; + menu.setAttribute('aria-expanded', String(open)); + nav.classList.toggle('is-open', open); + }); + nav.querySelectorAll('.nav__links a').forEach((a) => a.addEventListener('click', close)); + document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); }); + } + + // Reveal once — the method passage and the closing frame. + const reveals = document.querySelectorAll('[data-reveal]'); + if ('IntersectionObserver' in window && reveals.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + entry.target.classList.add('is-revealed'); + io.unobserve(entry.target); + }); + }, { threshold: 0.45 }); + reveals.forEach((el) => io.observe(el)); + } else { + reveals.forEach((el) => el.classList.add('is-revealed')); + } + + // Orbital map readout — hover or focus a symbol, read its posture. + const map = document.querySelector('[data-map]'); + const readout = map?.querySelector('[data-readout]'); + if (!map || !readout) return; + const groupName = (node) => node.closest('.map__group')?.querySelector('.map__legend h3')?.textContent.trim() || ''; + let active = null; + const show = (node) => { + if (node === active) return; + active?.classList.remove('is-active'); + active = node; + node.classList.add('is-active'); + const link = node.querySelector('.node__link'); + const name = node.querySelector('.node__name')?.textContent || ''; + const type = node.querySelector('.node__type')?.textContent || ''; + const status = node.querySelector('.node__status')?.textContent || ''; + const source = node.querySelector('.node__evidence source')?.getAttribute('srcset') || node.querySelector('.node__evidence img, img.node__evidence')?.getAttribute('src'); + const card = document.createElement('div'); + card.className = 'readout__card'; + card.innerHTML = ` +

+

+

+

+ ${source ? '
' : ''} + `; + card.querySelector('.readout__group').textContent = groupName(node); + card.querySelector('.readout__name').textContent = name; + card.querySelector('.readout__type').textContent = type; + card.querySelector('.readout__status').textContent = status; + if (source) { const img = card.querySelector('img'); img.src = source; img.alt = `${name} — evidence from the project’s own source`; } + const open = card.querySelector('a'); + open.href = link.getAttribute('href'); + open.textContent = `Open ${name} →`; + readout.replaceChildren(card); + }; + map.querySelectorAll('.node').forEach((node) => { + node.addEventListener('pointerenter', () => show(node)); + node.addEventListener('focusin', () => show(node)); + }); +})(); diff --git a/index.html b/index.html index 8daae58..62e5fd4 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,18 @@ - - - + + + + Zero State — Software for a world that keeps changing. - + + - + @@ -19,310 +21,151 @@ - + - - + + + + - - - -
-
- - - ZERØ STATE - - -
+ + +
+
+ ZERØ STATE + + Begin here + +
+
+
+
+ +
+

Independent software studio

+

+ The world moves. + The reference remains. +

+

We build thoughtful, adaptable software by returning to first principles—then combining the tools already here in ways that weren’t obvious before.

+ +
+
+ + + Zero State — Opportunity begins at zero +
+
+ zer0state@zer0state.com + Software for a world that keeps changing +
+
+
+ +
+

Zero is not emptiness.It is clarity before commitment.

+
  • Not another layer of noise.
  • Not technology for its own sake.
  • A clear frame for what comes next.
+

Zero State is the willingness to return to first principles as the world is changing.

+

We believe the tools for a more capable, creative, and desirable future already exist. What remains is the discipline to understand them, combine them wisely, and build with care.

The software we create is the record of that practice. This is the beginning of our work.

+
+
+
+
+

Systems in motion.

+

Products are not claims. They are evidence of the method under pressure.

- -
-
- - -
-

Independent software studio

-

The world moves.The reference remains.

-

We build thoughtful, adaptable software by returning to first principles—then combining the tools already here in ways that weren’t obvious before.

-
- See the evidence - Read our method -
-
- -
- - - - Zero State — Opportunity begins at zero - -
- -
- zer0state@zer0state.com - Software for a world that keeps changing -
-
- -
-
-

Zero is not emptiness.
It is clarity before commitment.

- -

Zero State is the willingness to return to first principles as the world is changing.

-
-

We believe the tools for a more capable, creative, and desirable future already exist. What remains is the discipline to understand them, combine them wisely, and build with care.

-

The software we create is the record of that practice. This is the beginning of our work.

-
-
-
- -
-
-

Systems in motion.

-

Products are not claims. They are evidence of the method under pressure.

-
- -
- - - - Waykin - Audio-first adaptive walking - - - - - - - PatchHive - Eurorack rig intelligence - - - - - - - PsyFi - Consciousness-field simulation - - - - - - - Surveillance Survivor - Satirical survivor roguelite - - - - - - - HexWire - Tactical cyberpunk RPG - - - - - - - Hollersports - Deterministic sports analysis - - - - - - - Marigold Market - Hybrid-casual sorting puzzle - - - - - - - Slosh - Interactive water for Apple Watch - - - - - - - Noema - Persistent shared world - - - -
-
- -
-
-

Clients.

-

Client work, shown separately from Zero State products.

-
- -
- - - - Autogive.app - Giving transparency - - - -
-
- -
-
-

Community.

-

Civic and hackathon work by zer0state, shown separately from products and clients.

-
- -
- - - - SUAS - Veteran Innovation Hackathon - - - -
-
- -
-
-

Hermes / OpenClaw skills.

-

Installable agent skills — short tools that change how the work gets done.

-
- -
- - - - Abraxas Orchestra - Symbolic software architecture - - - - - - - Hyperlex - Memetic emergence engine - - - - - - - Kubrick - Cinematic narrative engineering - - - - - - - Neon Genie - Opportunity & product intelligence - - - - - - - Sigil-Forge - Intent wallpaper & stego vault - - - -
-
- -
- -
-

See clearly.
Build deliberately.

-
    -
  1. -
    - Creativity -

    Perceives possibility and gives it form.

    -
    -
    2. -
  2. -
    - Curiosity -

    Finds what inherited assumptions cannot explain.

    -
    -
    3. -
  3. -
    - Authenticity -

    Keeps perception, judgment, expression, and action coherent.

    -
    -
    4. -
-
-
- -
-

Return to zero. Begin again.

-
- zer0state@zer0state.com - Contact page -
-

The tools are already here.

-
-
- - - - +
+ + +

Products

Apps, games, and platforms we are building.

+

Clients.

Client work, shown separately from Zero State products.

+

Community.

Civic and hackathon work by zer0state, shown separately from products and clients.

+

Hermes / OpenClaw skills.

Installable agent skills — short tools that change how the work gets done.

+ +
+
+
+
+

Local intelligence.

+

Local intelligence on your own hardware.

+

Private AI that runs on hardware you control, such as NVIDIA GPUs. We set up models, agents, and retrieval inside your walls, designed so the work gets sharper and the data stays home.

+ Talk about a deployment +
+
+
  • Designed to keep your data inside the frame.
  • Built to answer at the speed of your own network.
  • Designed to avoid per-request cloud bills.
+
+

  • Private knowledge

    Ask across your own documents, tickets, and records. Designed so answers cite their sources and the data stays on your network.

  • Agents at work

    Agents designed to work inside your tools, with their actions logged for review.

  • Voice and media

    Transcription, speech, and media pipelines designed to keep recordings on your machines.

  • Plain-language limits

    Each deployment is designed to include tests, receipts, and a clear statement of what it will not do.

+

  1. Frame

    We map the work, the data, and the boundary it must not cross.

  2. Fit

    We size models to the job and hardware to the models.

  3. Deploy

    Installed on your machines, on your network, under your access rules.

  4. Hand over

    Documented, observable, and yours to run.

+
+
+

Supported by

+
  • ElevenLabsStartup Grants
  • DatabricksStartup Program
  • NeonStartup Program
+
+
+
+
+
+

See clearly.Build deliberately.

+
  1. Creativity

    Perceives possibility and gives it form.

  2. Curiosity

    Finds what inherited assumptions cannot explain.

  3. Authenticity

    Keeps perception, judgment, expression, and action coherent.

+
+
+
+

Return to zero. Begin again.

+
+ zer0state@zer0state.com + Contact page +
+

The tools are already here.

+
+
+ + - + \ No newline at end of file diff --git a/intent/2026-10-02-site-redesign.md b/intent/2026-10-02-site-redesign.md new file mode 100644 index 0000000..15eec24 --- /dev/null +++ b/intent/2026-10-02-site-redesign.md @@ -0,0 +1,61 @@ +# Intent — Home redesign: two candidate directions for owner review + +## Problem + +The owner asked for a redesign of zer0state.com that "dials up" the brand with current (2026) design practice: motion, full mobile support at every width, and graphics that are symbolic rather than literal. The brief also asks for new content: + +- program logos: ElevenLabs Startup Grants, Databricks Startup Program, Neon Startup Program; +- a section on local intelligence deployments for business, framed as capability ("Local intelligence on your own hardware"), with no partner mark. + +The live home also has defects: stray `` / `` tags in `index.html`, `srcset` entries that point at files which do not exist, and a 1 MB hero PNG as the largest paint. + +## Proposed outcome + +Two pull requests, each a complete production home page in one direction, so the owners can compare real pages instead of descriptions: + +- **A · Observatory** — Map / Diagram macrostructure: the portfolio drawn as an orbital system map around the zero. +- **C · Cinematic monolith** — Marquee Hero + Feature Stack: the logo as a lit monolith, pinned scroll scenes. + +Danny reviews both and chooses one, or a mix. Only after that choice is the chosen system rolled out to the other 24 public pages, on the chosen PR's branch, before anything merges. The other PR is closed. + +Out of scope until the choice: inner pages, legal copy, product posture, and `styles-dark.css` (20 inner pages still depend on it). + +## Affected users / systems + +- Site visitors: the home page only. +- `index.html`, new `tokens.css` / `home.css` / `home.js`. +- `assets/glyphs.svg` (symbol system), `assets/brand/` (web-optimised marks), WebP derivatives of the evidence images, `assets/fonts/` (self-hosted OFL faces). +- `design.md`, `.hallmark/log.json`, `README.md`, `AGENTS.md` (official-home line), `CHANGELOG.md`. +- `sitemap.xml`, regenerated by `npm test` (the copy on `main` was missing `media/hexwire.html`). + +## Constraints / non-goals + +- No merge and no Pages deploy without an approving review. Human yes on deploy. +- Static mark files are unchanged. Direction A animates the method glyph's passage with the brand-token spec (4800 ms, linear, one pass). +- No invented products, metrics, or availability claims. Portfolio copy is carried over verbatim. +- `scripts/validate-site.js` assertions are untouched; both branches pass `npm test` as-is. +- No third-party requests from the home: fonts are self-hosted, so the privacy policy's website section stays accurate. + +## Open questions + +1. **Which direction?** Danny decides. +2. **Local intelligence copy.** Drafted from the owner's brief ("local intelligence deployments for business, etc."). The owner confirms the service scope before merge. +3. **Partner and program marks.** Resolved by the owner: no Apple or NVIDIA marks on the home. ElevenLabs, Databricks, and Neon marks stay; their brand terms still need checking. +4. **Program membership.** Supplied by the owner in session; not verified here. + +## Verified / assumed claims + +| Claim | Label | Basis | +|---|---|---| +| Home passes `npm test` on both branches | `OBSERVED` | local runs, 2026-10-02 | +| No horizontal scroll and no wrapped clickable text at 320 / 375 / 414 / 768 / 1024 / 1440 px | `OBSERVED` | scripted check in Chromium (local preview) | +| Home makes zero third-party requests | `OBSERVED` | resource timing in local preview | +| Hero image weight drops from 1 MB to 107 KB | `OBSERVED` | `assets/brand/zero_state_logo_1200.webp` | +| Zero State is in the three named programs | `INFERRED` | owner statement in session | +| Local intelligence deployments on customer hardware are offered | `ASPIRATIONAL` | owner brief; copy is a draft | +| Partner logo use is permitted | `NOT_COMPUTABLE` | needs brand-guideline review per company | + +## Author / date + +- Author: Claude Code (session with Luna, `prabu-openclaw`), at the owner's request +- Date: 2026-10-02 diff --git a/sitemap.xml b/sitemap.xml index 1b259c7..41d2ec7 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,13 +2,13 @@ https://zer0state.com/ - 2026-08-22 + 2026-10-02 weekly 1.0 https://zer0state.com/work.html - 2026-08-22 + 2026-09-21 monthly 0.8 @@ -38,13 +38,13 @@ https://zer0state.com/terms.html - 2026-08-21 + 2026-09-15 yearly 0.4 https://zer0state.com/marketing.html - 2026-08-21 + 2026-09-21 monthly 0.8 @@ -74,10 +74,16 @@ https://zer0state.com/products/hexwire.html - 2026-08-21 + 2026-09-10 monthly 0.6 + + https://zer0state.com/media/hexwire.html + 2026-09-10 + monthly + 0.7 + https://zer0state.com/products/hollersports.html 2026-08-21 @@ -98,6 +104,7 @@ https://zer0state.com/products/noema.html + 2026-08-22 monthly 0.6 @@ -109,7 +116,7 @@ https://zer0state.com/community/suas.html - 2026-08-22 + 2026-08-24 monthly 0.6 diff --git a/tokens.css b/tokens.css new file mode 100644 index 0000000..d217647 --- /dev/null +++ b/tokens.css @@ -0,0 +1,64 @@ +/* Zero State · design tokens — home (observatory). Every colour, face, space, ease and duration + * on the page is referenced by name from here. See design.md. */ +:root { + --color-paper: oklch(13% 0.008 65); + --color-paper-2: oklch(16% 0.009 65); + --color-paper-3: oklch(19.5% 0.01 65); + --color-ink: oklch(93% 0.018 80); + --color-ink-2: oklch(81% 0.014 75); + --color-muted: oklch(65% 0.012 70); + --color-rule: oklch(31% 0.01 65); + --color-rule-2: oklch(23% 0.009 65); + --color-grid: oklch(36% 0.02 60); + --color-accent: oklch(72% 0.14 50); + --color-accent-ink: oklch(17% 0.02 50); + --color-focus: oklch(78% 0.17 50); + --color-veil: oklch(13% 0.008 65 / 0.74); + --color-veil-2: oklch(17% 0.01 65 / 0.84); + --color-glow: oklch(72% 0.14 50 / 0.13); + --color-glow-bone: oklch(93% 0.018 80 / 0.06); + --color-shadow: oklch(6% 0.01 65 / 0.8); + + --font-display: "Geist", ui-sans-serif, sans-serif; + --font-body: "Geist", ui-sans-serif, sans-serif; + --font-mono: "Geist Mono", ui-monospace, monospace; + + --text-2xs: 0.72rem; + --text-xs: 0.8rem; + --text-sm: 0.9rem; + --text-base: 1rem; + --text-md: 1.25rem; + --text-lg: 1.5625rem; + --text-xl: 1.9531rem; + --text-2xl: clamp(2rem, 2.6vw + 1.2rem, 3.05rem); + --text-display: clamp(2.5rem, 3.6vw + 1rem, 4.6rem); + + --space-3xs: 0.125rem; + --space-2xs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 0.75rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2.5rem; + --space-2xl: 4rem; + --space-3xl: clamp(5rem, 9vw, 9rem); + + --gutter: clamp(1rem, 4vw, 3rem); + --page-max: 78rem; + --page-pad: max(var(--gutter), calc((100% - var(--page-max)) / 2)); + + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in: cubic-bezier(0.7, 0, 0.84, 0); + --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --dur-micro: 120ms; + --dur-short: 220ms; + --dur-long: 480ms; + --dur-morph: 520ms; + + --radius-pill: 999px; + --radius-card: 18px; + --z-base: 1; + --z-raised: 10; + --z-sticky: 200; + --z-modal: 400; +}