diff --git a/.hallmark/log.json b/.hallmark/log.json index 8b585e0..903b45a 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 / classical-serif / chromatic-amber ~78°", + "vibe": "monolith glow, cinematic void, bone serif", + "macrostructure": "Marquee Hero + Feature Stack", + "nav": "N9", + "footer": "Ft1", + "enrichment": "H1 logo monolith + light sweep (CSS) + 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..ac5a841 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 (C · Cinematic monolith) +- New home in review: symbolic graphics, motion with reduced-motion paths, verified at 320–1440 px. +- New sections: local intelligence deployments (built on the NVIDIA stack) and program logos (Apple App Store Small Business Program, 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..8800e09 --- /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 Apple, NVIDIA, 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 the stack its local deployments use, 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..2a3b43d 100644 --- a/design.md +++ b/design.md @@ -1,85 +1,123 @@ # Design — Zero State -A locked design system for the Zero State public website. +**Status: proposed — direction C · Cinematic monolith, 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: “monolith glow, cinematic void, bone serif”. Diversification axes: dark / classical-serif / chromatic-amber ~78°. -## 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: Marquee Hero + Feature Stack — the lit logo fills the fold; the method plays as a pinned scene; the work list scrolls beside a pinned symbol; nav N9 edge-aligned minimal; footer Ft1 mast-headed. +- Inner pages (planned for the rollout): Product, skill, client, community: a title-card hero (serif name, symbol lit behind it) then the story as a pinned two-column scene with the evidence figure. Work: Feature Stack at full length. Philosophy: pinned statements, one per screen. About, contact, legal: Long Document with a quiet 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(12% 0.016 262) +- `--color-paper-2` oklch(15.5% 0.018 262) +- `--color-paper-3` oklch(19% 0.02 262) +- `--color-ink` oklch(94% 0.014 85) +- `--color-ink-2` oklch(81% 0.012 80) +- `--color-muted` oklch(67% 0.014 255) +- `--color-rule` oklch(29% 0.016 262) +- `--color-rule-2` oklch(22% 0.016 262) +- `--color-accent` oklch(82% 0.11 78) +- `--color-accent-ink` oklch(17% 0.02 78) +- `--color-focus` oklch(86% 0.14 78) -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: Instrument Serif 400, roman only +- Body: Geist 400 (300/500 for small UI) + +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 light: the logo emerges (18 px rise), then a single band of light crosses the blade once, masked to the mark's own shape. +- Pinned scenes, ≥ 62 rem and no-preference only: the method plays line by line across a 340 svh scroll; the local-intelligence frame corners close in as the section enters. +- State: the pinned symbol crossfades to whichever entry sits in the reading band; focus moves it too. + +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, amber border; fills amber on hover. Light variant for the closing email. +- Secondary: Underlined text link that turns amber. +- 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(12% 0.016 262)", + "$type": "color" + }, + "ink": { + "$value": "oklch(94% 0.014 85)", + "$type": "color" + }, + "muted": { + "$value": "oklch(67% 0.014 255)", + "$type": "color" + }, + "rule": { + "$value": "oklch(29% 0.016 262)", + "$type": "color" + }, + "accent": { + "$value": "oklch(82% 0.11 78)", + "$type": "color" + }, + "focus": { + "$value": "oklch(86% 0.14 78)", + "$type": "color" + } + }, + "font": { + "display": { + "$value": "Instrument Serif", + "$type": "fontFamily" + }, + "body": { + "$value": "Geist", + "$type": "fontFamily" + } + } +} +``` diff --git a/home.css b/home.css new file mode 100644 index 0000000..1ec7370 --- /dev/null +++ b/home.css @@ -0,0 +1,312 @@ +/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero + Feature Stack · hero: H1 marquee (logo monolith + light sweep) · nav: N9 · footer: Ft1 + * theme: custom · vibe: "monolith glow, cinematic void, bone serif" · paper: oklch(12% 0.016 262) · accent: oklch(82% 0.11 78) + * display: Instrument Serif (roman) · body: Geist 400 · axes: dark / classical-serif / chromatic-amber ~78° + * motion: one light sweep · pinned scroll scenes (≥62rem) · stack crossfade · studied: no · context: user + inferred + */ +/* Hallmark · pre-emit critique: P5 H5 E4 S4 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: "Instrument Serif"; src: url("assets/fonts/instrument-serif-latin-ext.woff2") format("woff2"); font-weight: 400; 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: "Instrument Serif"; src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; 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"; 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; } + +*, *::before, *::after { box-sizing: border-box; } +html { overflow-x: clip; scroll-behavior: smooth; -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; } +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: 4px; border-radius: 3px; } +.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); text-decoration: none; } +.skip-link:focus-visible { top: var(--space-sm); } +.glyph { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; overflow: visible; } +.button { display: inline-flex; align-items: center; gap: 0.6em; min-height: 50px; padding: 0 1.5em; 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); } +.button:hover { background: var(--color-accent); color: var(--color-accent-ink); } +.button:active { transform: translateY(1px); } +.button[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } +.button--light { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } +.button--light:hover { background: var(--color-accent); border-color: var(--color-accent); } +.text-link { color: var(--color-ink-2); text-underline-offset: 0.3em; text-decoration-color: var(--color-rule); white-space: nowrap; } +.text-link:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); } + +/* ---------- N9 · edge-aligned minimal ---------- */ +.edge { + position: fixed; + inset: 0 0 auto 0; + z-index: var(--z-sticky); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-md) var(--gutter); + background: linear-gradient(var(--color-veil), transparent); +} +.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--color-ink); text-decoration: none; font: 500 0.78rem/1 var(--font-body); letter-spacing: 0.36em; white-space: nowrap; } +.wordmark img { width: 18px; height: auto; } +.edge__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } +.edge__cta:hover { border-color: var(--color-accent); color: var(--color-accent); } + +/* ---------- marquee hero · the monolith ---------- */ +.marquee { + position: relative; + isolation: isolate; + display: grid; + justify-items: center; + align-content: center; + gap: var(--space-lg); + min-height: 88svh; /* phones: let the next section peek so the page reads as continuing */ + /* bottom ≥ 1.3× top so the composition sits above the geometric centre (gate 44) */ + padding: calc(var(--space-2xl) + var(--space-md)) var(--gutter) calc(var(--space-2xl) * 1.75); + text-align: center; + overflow: clip; +} +.marquee::before { + /* bloom 1 — the beam */ + content: ""; + position: absolute; + z-index: -2; + left: 50%; + top: 0; + width: min(46rem, 120%); + height: 92%; + translate: -50% 0; + background: radial-gradient(closest-side, var(--color-glow), transparent 75%); + pointer-events: none; +} +.hero-grid { + /* the reflective horizon floor */ + position: absolute; + z-index: -1; + inset: auto 0 0 0; + height: 34%; + perspective: 420px; + overflow: hidden; + pointer-events: none; + -webkit-mask-image: linear-gradient(to top, black, transparent 95%); + mask-image: linear-gradient(to top, black, transparent 95%); +} +.hero-grid::before { + content: ""; + position: absolute; + inset: 0 -40% -60% -40%; + background: repeating-linear-gradient(to bottom, var(--color-rule) 0 1px, transparent 1px 34px); + transform-origin: 50% 0; + transform: rotateX(76deg); +} +.hero-grid::after { + content: ""; + position: absolute; + left: 10%; + right: 10%; + top: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--color-accent), transparent); + box-shadow: 0 0 24px 4px var(--color-glow); +} +.marquee__mark { position: relative; width: min(64vw, 46svh, 30rem); } +.aperture-mark { width: 100%; height: auto; } +.marquee__sweep { + position: absolute; + inset: 0; + background: linear-gradient(105deg, transparent 35%, var(--color-beam) 50%, transparent 65%) no-repeat; + background-size: 300% 100%; + background-position: 120% 0; + -webkit-mask: url("assets/brand/zero_state_logo_1200.webp") center / contain no-repeat; + mask: url("assets/brand/zero_state_logo_1200.webp") center / contain no-repeat; + mix-blend-mode: screen; + pointer-events: none; + opacity: 0; +} +.marquee__title { max-width: 18ch; font: 400 var(--text-2xl)/1.02 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; } +.marquee__title span { display: block; } +.marquee__title span + span { color: var(--color-ink-2); } +.marquee__kicker { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase; } +.marquee__mark, .marquee__title, .marquee__kicker { animation: emerge 1100ms var(--ease-out) both; } +.marquee__title { animation-delay: 220ms; } +.marquee__kicker { animation-delay: 380ms; } +.marquee__sweep { animation: sweep 2200ms var(--ease-in-out) 700ms both; } +@media (min-width: 48rem) { .marquee { min-height: 100svh; } } +@keyframes emerge { from { opacity: 0; transform: translateY(18px); } } +@keyframes sweep { 0% { opacity: 1; background-position: 120% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } } + +/* ---------- intro ---------- */ +.intro { display: grid; gap: var(--space-xl); padding: var(--space-2xl) var(--page-pad) var(--space-3xl); } +.intro__lede { max-width: 30ch; font: 400 var(--text-xl)/1.15 var(--font-display); } +.intro__doors { display: grid; border-top: 1px solid var(--color-rule); } +.door { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "g label" "g text"; column-gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); text-decoration: none; } +.door__glyph { grid-area: g; width: 44px; height: 44px; color: var(--color-accent); } +.door__label { grid-area: label; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; } +.door__text { grid-area: text; font: 400 var(--text-lg)/1.15 var(--font-display); transition: color var(--dur-short) var(--ease-out); } +.door:hover .door__text { color: var(--color-accent); } +.intro__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); } +.intro__foot a { color: var(--color-ink-2); white-space: nowrap; text-decoration: none; } +.intro__foot a:hover { color: var(--color-accent); } +@media (min-width: 62rem) { + .intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "lede doors" "foot foot"; column-gap: var(--space-2xl); align-items: end; } + .intro__lede { grid-area: lede; } + .intro__doors { grid-area: doors; } + .intro__foot { grid-area: foot; } +} + +/* ---------- method · pinned scene ---------- */ +.scene { padding: var(--space-3xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.scene__stage { display: grid; gap: var(--space-lg); max-width: 52rem; } +.scene h2 { font: 400 var(--text-2xl)/1.02 var(--font-display); letter-spacing: -0.015em; } +.scene h2 span { display: block; } +.scene__b { color: var(--color-ink-2); } +.scene__lines { display: grid; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-md); } +.scene__line.lit { color: var(--color-accent); } +.scene__doctrine { max-width: 32ch; font: 400 var(--text-lg)/1.25 var(--font-display); } +.scene__prose { display: grid; gap: var(--space-md); max-width: 58ch; color: var(--color-ink-2); } +@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) { + @supports (animation-timeline: view()) { + .scene { height: 340svh; padding: 0 var(--page-pad); view-timeline-name: --scene; } + .scene__stage { position: sticky; top: 0; height: 100svh; align-content: center; } + .scene__stage > *, .scene h2 span, .scene__line { animation: scene-in linear both; animation-timeline: --scene; } + .scene h2 { animation: none; } + .scene__a { animation-range: contain 0% contain 12%; } + .scene__b { animation-range: contain 12% contain 26%; } + .scene__lines { animation: none; } + .scene__line:nth-child(1) { animation-range: contain 28% contain 38%; } + .scene__line:nth-child(2) { animation-range: contain 38% contain 48%; } + .scene__line:nth-child(3) { animation-range: contain 48% contain 60%; } + .scene__doctrine { animation-range: contain 62% contain 74%; } + .scene__prose { animation-range: contain 76% contain 90%; } + } +} +@keyframes scene-in { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } } + +/* ---------- evidence · F2 feature stack ---------- */ +.stack { padding: var(--space-3xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.stack__head { display: grid; gap: var(--space-sm); max-width: 40rem; } +.stack__head h2 { font: 400 var(--text-2xl)/1.02 var(--font-display); } +.stack__head p { color: var(--color-ink-2); font-size: var(--text-md); } +.stack__body { margin-top: var(--space-2xl); } +.stack__pin { display: none; } +.stack__group { margin-top: var(--space-2xl); } +.stack__group:first-child { margin-top: 0; } +.stack__group h3 { font: 400 var(--text-lg)/1.1 var(--font-display); } +.stack__group > p { max-width: 50ch; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); } +.stack__list { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); } +.entry a { + display: grid; + grid-template-columns: 48px minmax(0, 1fr); + grid-template-areas: "g name" "g type" "g status"; + column-gap: var(--space-md); + padding: var(--space-md) 0; + border-bottom: 1px solid var(--color-rule-2); + text-decoration: none; +} +.entry__glyph { grid-area: g; width: 44px; height: 44px; color: var(--color-ink-2); } +.entry__name { grid-area: name; font: 400 var(--text-lg)/1.1 var(--font-display); transition: color var(--dur-short) var(--ease-out); } +.entry__type { grid-area: type; color: var(--color-ink-2); } +.entry__status { grid-area: status; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.02em; } +.entry__evidence { display: none; } +.entry a:hover .entry__name, .entry.is-active .entry__name { color: var(--color-accent); } +@media (min-width: 62rem) { + .stack__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-2xl); align-items: start; } + .stack__pin { position: sticky; top: 14svh; display: grid; justify-items: center; gap: var(--space-md); } + .pin__stage { position: relative; width: min(100%, 22rem); aspect-ratio: 1; } + .pin__stage::before { content: ""; position: absolute; inset: -18%; background: radial-gradient(closest-side, var(--color-glow-soft), transparent 70%); } + .pin__glyph { position: absolute; inset: 0; color: var(--color-ink); opacity: 0; transform: scale(0.94); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); } + .pin__glyph .glyph { stroke-width: 1; } + .pin__glyph.is-active { opacity: 1; transform: none; } + .pin__caption { font: 400 var(--text-xl)/1 var(--font-display); text-align: center; } + .pin__evidence { width: min(100%, 18rem); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--color-rule); background: var(--color-paper-2); } + .pin__evidence img { width: 100%; height: 100%; object-fit: cover; animation: fade var(--dur-long) var(--ease-out); } + .entry a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "type" "status"; padding: var(--space-lg) 0; } + .entry__glyph { display: none; } + .entry__name { font-size: var(--text-xl); } +} +@keyframes fade { from { opacity: 0; } } + +/* ---------- local intelligence · the frame closes ---------- */ +.local { display: grid; gap: var(--space-2xl); padding: var(--space-3xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.local__art { width: min(100%, 26rem); } +.frame-art { width: 100%; height: auto; overflow: visible; } +.frame-art * { fill: none; } +.fc path { stroke: var(--color-ink); stroke-width: 2.5; stroke-linecap: square; } +.fc { transform-box: view-box; } +.fa__halo { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 7; } +.fa__edge { stroke: var(--color-ink-2); stroke-width: 1.2; } +.frame-art .fa__node { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.5; } +.frame-art .fa__node--lit { fill: var(--color-accent); stroke: var(--color-accent); } +.frame-art text { fill: var(--color-muted); font: 500 11px/1 var(--font-body); letter-spacing: 0.2em; } +.local__copy { display: grid; gap: var(--space-lg); min-width: 0; } +.local h2 { font: 400 var(--text-2xl)/1 var(--font-display); } +.local__nvidia { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font-size: var(--text-sm); } +.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.5; } +.local__why { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); } +.local__why li::before { content: "— "; color: var(--color-accent); } +.local__uses { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); border-block: 1px solid var(--color-rule); } +.local__uses h3, .local__steps h3 { font: 400 var(--text-lg)/1.1 var(--font-display); } +.local__uses p, .local__steps p { color: var(--color-ink-2); max-width: 46ch; } +.local__steps { display: grid; gap: var(--space-lg); } +/* ordinal steps: the number stacks above its heading at every width (gate 54) */ +.local__steps li { display: grid; gap: var(--space-2xs); } +.step__n { color: var(--color-accent); font-size: var(--text-xs); letter-spacing: 0.1em; } +.local .button { justify-self: start; } +@media (min-width: 48rem) { .local__uses { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); } } +@media (min-width: 62rem) { + .local { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-2xl); align-items: start; view-timeline-name: --local; } + .local__art { position: sticky; top: 18svh; width: 100%; } +} +@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) { + @supports (animation-timeline: view()) { + .fc { animation: close-in linear both; animation-timeline: --local; animation-range: entry 20% contain 25%; } + .fc--tl { --fx: -60px; --fy: -60px; } .fc--tr { --fx: 60px; --fy: -60px; } .fc--br { --fx: 60px; --fy: 60px; } .fc--bl { --fx: -60px; --fy: 60px; } + } +} +@keyframes close-in { from { opacity: 0.15; transform: translate(var(--fx, 0), var(--fy, 0)); } } + +/* ---------- programs ---------- */ +.programs { padding: var(--space-2xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.programs h2 { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; } +.programs__list { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); } +.programs__list li { display: flex; align-items: center; gap: var(--space-md); } +.program__logo { flex: none; width: 30px; height: 30px; color: var(--color-ink-2); } +.program__brand { font: 400 var(--text-md)/1.2 var(--font-display); } +.program__name { color: var(--color-muted); font-size: var(--text-sm); } +@media (min-width: 48rem) { .programs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } +@media (min-width: 75rem) { .programs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } + +/* ---------- 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: 6rem; } +.principles h2 { font: 400 var(--text-2xl)/1.02 var(--font-display); } +.principles h2 span { display: block; color: var(--color-ink-2); } +.principles__list { display: grid; gap: var(--space-lg); } +.principles__list strong { display: block; font: 400 var(--text-xl)/1 var(--font-display); font-weight: 400; color: var(--color-accent); } +.principles__list p { margin-top: var(--space-xs); color: var(--color-ink-2); } +@media (min-width: 62rem) { + .principles { grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); column-gap: var(--space-2xl); } + .principles__mark { grid-row: 1 / span 2; width: 100%; max-width: 9rem; } + .principles__list { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); column-gap: var(--space-xl); } +} + +/* ---------- closing + Ft1 mast ---------- */ +.closing { position: relative; isolation: isolate; display: grid; gap: var(--space-xl); justify-items: start; padding: var(--space-3xl) var(--page-pad); border-top: 1px solid var(--color-rule-2); } +.closing::before { content: ""; position: absolute; z-index: -1; inset: 30% 0 0 0; background: radial-gradient(50% 70% at 70% 100%, var(--color-glow-soft), transparent 70%); } +.closing h2 { font: 400 clamp(3rem, 7vw + 1rem, 7rem)/0.98 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; } +.closing h2 span { display: block; 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-size: var(--text-sm); } +.mast { display: grid; gap: var(--space-lg); padding: var(--space-2xl) var(--page-pad) var(--space-xl); border-top: 1px solid var(--color-rule); } +.mast__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); } +.mast__band p { font: 400 var(--text-lg)/1.1 var(--font-display); color: var(--color-ink-2); } +.mast__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); } +.mast__links a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; } +.mast__links a:hover { color: var(--color-accent); } +.mast__legal { color: var(--color-muted); font-size: var(--text-xs); } + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation-duration: 150ms !important; animation-delay: 0ms !important; transition-duration: 150ms !important; scroll-behavior: auto !important; } + .marquee__sweep { display: none; } + .marquee__mark, .marquee__title, .marquee__kicker { animation-name: fade !important; } +} diff --git a/home.js b/home.js new file mode 100644 index 0000000..1df30e5 --- /dev/null +++ b/home.js @@ -0,0 +1,37 @@ +// Zero State · Cinematic monolith — feature-stack pin follows the entry in the reading band. +(() => { + const year = document.querySelector('[data-year]'); + if (year) year.textContent = String(new Date().getFullYear()); + + const stack = document.querySelector('[data-stack]'); + if (!stack || !('IntersectionObserver' in window)) return; + const caption = stack.querySelector('[data-pin-caption]'); + const evidence = stack.querySelector('[data-pin-evidence]'); + const glyphs = new Map([...stack.querySelectorAll('[data-pin]')].map((g) => [g.dataset.pin, g])); + let current = null; + const activate = (entry) => { + if (entry === current) return; + current?.classList.remove('is-active'); + current = entry; + entry.classList.add('is-active'); + glyphs.forEach((g, key) => g.classList.toggle('is-active', key === entry.dataset.key)); + caption.textContent = entry.querySelector('.entry__name')?.textContent || ''; + const src = entry.querySelector('.entry__evidence source')?.getAttribute('srcset') || entry.querySelector('img.entry__evidence, .entry__evidence img')?.getAttribute('src'); + if (src) { + const img = new Image(); + img.alt = ''; + img.decoding = 'async'; + img.src = src; + evidence.replaceChildren(img); + } + }; + const entries = [...stack.querySelectorAll('.entry')]; + const io = new IntersectionObserver((records) => { + records.forEach((r) => { if (r.isIntersecting) activate(r.target); }); + }, { rootMargin: '-45% 0px -50% 0px' }); + entries.forEach((e) => { + io.observe(e); + e.addEventListener('focusin', () => activate(e)); + }); + if (entries[0]) activate(entries[0]); +})(); diff --git a/index.html b/index.html index 8daae58..9a769cc 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,18 @@ - - - + + + + Zero State — Software for a world that keeps changing. - + + - + @@ -19,310 +21,105 @@ - + - - + + + + + - - - -
-
- - - ZERØ STATE - - -
+ + +
+ ZERØ STATE + Begin here +
+
+
+ +
+ + Zero State — Opportunity begins at zero + +
+

The world moves. The reference remains.

+

Independent software studio

+
+
+

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

+ +

zer0state@zer0state.comSoftware 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.

-
-
- - - - + +
+
+
+
+

Local intelligence.

+

Local intelligence built on the NVIDIA stack.

+

Private AI that runs on hardware you control. We deploy models, agents, and retrieval inside your walls, so the work gets sharper and the data stays home.

+
  • Your data stays inside the frame.
  • Answers at the speed of your own network.
  • No per-request cloud bill.
+

  • Private knowledge

    Ask across your own documents, tickets, and records. Answers cite their sources; nothing leaves your network.

  • Agents at work

    Agents that operate inside your tools, with every action logged and reviewable.

  • Voice and media

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

  • Plain-language limits

    Every deployment ships with 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.

+ Talk about a deployment +
+
+
+

Supported by

+
  • Apple App Store Small Business Program
  • ElevenLabs Startup Grants
  • Databricks Startup Program
  • Neon Startup 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.comContact 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..fa75d9e --- /dev/null +++ b/intent/2026-10-02-site-redesign.md @@ -0,0 +1,62 @@ +# 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: Apple App Store Small Business Program, ElevenLabs Startup Grants, Databricks Startup Program, Neon Startup Program; +- the NVIDIA mark with the line "Local intelligence built on the NVIDIA stack"; +- a section on local intelligence deployments for business. + +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.** Apple's trademark guidelines restrict using the Apple logo to signal a relationship, and NVIDIA restricts logo use outside its partner programs. ElevenLabs, Databricks, and Neon brand terms still need checking. The owner decides whether to keep the marks, switch to text-only names, or use official program badges. +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 four named programs | `INFERRED` | owner statement in session | +| Local intelligence deployments on the NVIDIA stack 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..40071a2 --- /dev/null +++ b/tokens.css @@ -0,0 +1,51 @@ +/* Zero State · design tokens — home (monolith). Every colour, face, space, ease and duration + * on the page is referenced by name from here. See design.md. */ +:root { + --color-paper: oklch(12% 0.016 262); + --color-paper-2: oklch(15.5% 0.018 262); + --color-paper-3: oklch(19% 0.02 262); + --color-ink: oklch(94% 0.014 85); + --color-ink-2: oklch(81% 0.012 80); + --color-muted: oklch(67% 0.014 255); + --color-rule: oklch(29% 0.016 262); + --color-rule-2: oklch(22% 0.016 262); + --color-accent: oklch(82% 0.11 78); + --color-accent-ink: oklch(17% 0.02 78); + --color-focus: oklch(86% 0.14 78); + --color-glow: oklch(82% 0.11 78 / 0.2); + --color-glow-soft: oklch(82% 0.11 78 / 0.07); + --color-beam: oklch(94% 0.03 85 / 0.5); + --color-veil: oklch(12% 0.016 262 / 0.9); + + --font-display: "Instrument Serif", ui-serif, serif; + --font-body: "Geist", ui-sans-serif, sans-serif; + + --text-2xs: 0.74rem; + --text-xs: 0.82rem; + --text-sm: 0.92rem; + --text-base: 1.0625rem; + --text-md: 1.3rem; + --text-lg: 1.75rem; + --text-xl: clamp(2rem, 2.4vw + 1.2rem, 3rem); + --text-2xl: clamp(2.6rem, 4.4vw + 1rem, 5.25rem); + + --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, 10vw, 10rem); + --gutter: clamp(1rem, 4vw, 3.5rem); + --page-max: 76rem; + --page-pad: max(var(--gutter), calc((100% - var(--page-max)) / 2)); + + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --dur-short: 220ms; + --dur-long: 480ms; + --radius-pill: 999px; + --z-sticky: 200; + --z-modal: 400; +}